Adding utility classes.

composer.json

@@ -1,29 +1,53 @@
 {
-    "name": "websharks/sharkicons",
-    "homepage": "https://github.com/websharks/sharkicons",
-    "description": "Font containing WebSharks logos/icons.",
-    "keywords": [
-        "websharks",
-        "wordpress",
-        "php"
-    ],
-    "type": "library",
-    "license": "GPL-3.0+",
-    "authors": [{
-        "name": "websharks",
-        "homepage": "http://websharks-inc.com/",
-        "role": "company"
-    }, {
-        "name": "jaswsinc",
-        "homepage": "http://jaswsinc.com/",
-        "role": "developer"
-    }, {
-        "name": "raamdev",
-        "homepage": "http://raam.org/",
-        "role": "developer"
-    }],
-    "support": {
-        "source": "https://github.com/websharks/sharkicons",
-        "issues": "https://github.com/websharks/sharkicons/issues"
+  "name": "websharks/sharkicons",
+  "homepage": "https://github.com/websharks/sharkicons",
+  "description": "Font containing WebSharks logos/icons.",
+  "keywords": [
+    "websharks",
+    "wordpress",
+    "php"
+  ],
+  "type": "library",
+  "license": "GPL-3.0+",
+  "authors": [{
+    "name": "websharks",
+    "homepage": "http://websharks-inc.com/",
+    "role": "company"
+  }, {
+    "name": "jaswsinc",
+    "homepage": "http://jaswsinc.com/",
+    "role": "developer"
+  }, {
+    "name": "raamdev",
+    "homepage": "http://raam.org/",
+    "role": "developer"
+  }],
+  "support": {
+    "source": "https://github.com/websharks/sharkicons",
+    "issues": "https://github.com/websharks/sharkicons/issues"
+  },
+
+  "require": {},
+  "require-dev": {
+    "package/bourbon": "4.2.3"
+  },
+
+  "autoload": {
+    "psr-4": {}
+  },
+  "config": {
+    "vendor-dir": "src/vendor",
+    "preferred-install": "dist"
+  },
+  "repositories": [{
+    "type": "package",
+    "package": {
+      "name": "package/bourbon",
+      "version": "4.2.3",
+      "dist": {
+        "url": "https://github.com/thoughtbot/bourbon/releases/download/v4.2.3/bourbon-v4.2.3.zip",
+        "type": "zip"
+      }
     }
+  }]
 }

src/_sharkicons.scss

@@ -1,5 +1,5 @@
-// UTF-8 map.
 @import 'map';
+@import 'vendor/package/bourbon/bourbon-v4.2.3/bourbon';
 
 // Font family.
 @mixin sharkicons-font($dir: '') {
@@ -30,45 +30,166 @@
   text-transform:             none;
 }
 
-// Long markup classes.
-@mixin sharkicon-long-classes {
-  .sharkicon::before {
+// Sharkicon markup classes.
+@mixin sharkicon-classes($prefix: sharkicon) {
+  .#{$prefix}::before {
     @include sharkicon-font-styles;
   }
 
   @each $-key, $-value in $sharkicons {
-    .sharkicon-#{$-key}::before {
+    .#{$prefix}-#{$-key}::before {
       content:                $-value;
     }
   }
-}
 
-// Short markup classes.
-@mixin sharkicon-short-classes {
-  .si::before {
-    @include sharkicon-font-styles;
+  .#{$prefix}-lg {
+    font-size:                1.33333333em;
+    line-height:              0.75em;
+    vertical-align:          -15%;
   }
 
-  @each $-key, $-value in $sharkicons {
-    .si-#{$-key}::before {
-      content:                $-value;
+  .#{$prefix}-2x {
+    font-size:                2em;
+  }
+
+  .#{$prefix}-3x {
+    font-size:                3em;
+  }
+
+  .#{$prefix}-4x {
+    font-size:                4em;
+  }
+
+  .#{$prefix}-5x {
+    font-size:                5em;
+  }
+
+  .#{$prefix}-fw {
+    text-align:               center;
+    width:                    1.28571429em;
+  }
+
+  .#{$prefix}-border {
+    border-radius:           .1em;
+    padding:                 .2em .25em .15em;
+    border:                   solid 0.08em;
+  }
+
+  .#{$prefix}-pull-left {
+    float:                    left;
+    margin-right:            .3em;
+  }
+
+  .#{$prefix}-pull-right {
+    float:                    right;
+    margin-left:             .3em;
+  }
+
+  .#{$prefix}-rotate-90 {
+    @include transform(rotate(90deg));
+  }
+
+  .#{$prefix}-rotate-180 {
+    @include transform(rotate(180deg));
+  }
+
+  .#{$prefix}-rotate-270 {
+    @include transform(rotate(270deg));
+  }
+
+  .#{$prefix}-flip-horizontal {
+    @include transform(scale(-1, 1));
+  }
+
+  .#{$prefix}-flip-vertical {
+    @include transform(scale(1, -1));
+  }
+
+  .#{$prefix}-inverse {
+    @include filter(invert(100%));
+  }
+
+  .#{$prefix}-spin {
+    @include animation(#{$prefix}-animation-spin 2s infinite linear);
+  }
+
+  .#{$prefix}-pulse {
+    @include animation(#{$prefix}-animation-spin 1s infinite steps(8));
+  }
+
+  .#{$prefix}-ul {
+    padding-left:             0;
+    list-style-type:          none;
+    margin-left:              2.14285714em;
+
+    > li {
+      position:               relative;
+
+      .#{$prefix}-li {
+        text-align:           center;
+        position:             absolute;
+        left:                -2.14285714em;
+        width:                2.14285714em;
+        top:                  0.14285714em;
+
+        .#{$prefix}-lg {
+          left:              -1.85714286em;
+        }
+      }
     }
   }
-}
 
-// Custom markup classes.
-@mixin sharkicon-custom-classes($prefix) {
-  .#{$prefix}::before {
-    @include sharkicon-font-styles;
+  .#{$prefix}-stack {
+    width:                    2em;
+    height:                   2em;
+    line-height:              2em;
+    vertical-align:           middle;
+    position:                 relative;
+    display:                  inline-block;
+
+    .#{$prefix}-stack-1x,
+    .#{$prefix}-stack-2x {
+      left:                   0;
+      width:                  100%;
+      text-align:             center;
+      position:               absolute;
+    }
+
+    .#{$prefix}-stack-1x {
+      line-height:            inherit;
+    }
+
+    .#{$prefix}-stack-2x {
+      font-size:              2em;
+    }
   }
 
-  @each $-key, $-value in $sharkicons {
-    .#{$prefix}-#{$-key}::before {
-      content:                $-value;
+  @include keyframes(#{$prefix}-animation-spin) {
+    0% {
+      @include transform(rotate(0deg));
+    }
+
+    100% {
+      @include transform(rotate(359deg));
     }
   }
 }
 
+// Long markup classes.
+@mixin sharkicon-long-classes {
+  @include sharkicon-classes(sharkicon);
+}
+
+// Short markup classes.
+@mixin sharkicon-short-classes {
+  @include sharkicon-classes(si);
+}
+
+// Custom markup classes.
+@mixin sharkicon-custom-classes($prefix) {
+  @include sharkicon-classes($prefix);
+}
+
 // Make an icon out of any element.
 @mixin sharkicon($icon, $position: before) {
   &::#{$position} {