re-writing & simplifying stacked icons, massive re-organization of less include files

12 files changed, 131 insertions, 177 deletions

diff --git a/less/bordered-pulled.less b/less/bordered-pulled.less
new file mode 100644
index 000000000..6d2bfca1c
--- /dev/null
+++ b/less/bordered-pulled.less
@@ -0,0 +1,17 @@
+// Bordered & Pulled
+// -------------------------
+
+.@{fa-css-prefix}-border {
+  padding: .2em .25em .15em;
+  border: solid 1px @fa-border-color;
+  border-width: .08em;
+  border-radius: .1em;
+}
+
+.pull-right { float: right; }
+.pull-left { float: left; }
+
+.@{fa-css-prefix} {
+  &.pull-left { margin-right: .3em; }
+  &.pull-right { margin-left: .3em; }
+}
diff --git a/less/core.less b/less/core.less
index 1de234769..6d223bc2f 100644
--- a/less/core.less
+++ b/less/core.less
@@ -1,5 +1,5 @@
-/* FONT AWESOME CORE
- * -------------------------- */
+// Base Class Definition
+// -------------------------
 
 .@{fa-css-prefix} {
   display: inline-block;
@@ -10,101 +10,3 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-
-/* makes the font 33% larger relative to the icon container */
-.@{fa-css-prefix}-lg {
-  font-size: (4em / 3);
-  line-height: (3em / 4);
-  vertical-align: -15%;
-}
-
-.@{fa-css-prefix}-fw {
-  width: (18em / 14);
-  text-align: center;
-}
-
-
-// Icon UL & LI
-// -------------------------
-
-.@{fa-css-prefix}-ul {
-  padding-left: 0;
-  margin-left: @fa-icon-li-width;
-  list-style-type: none;
-
-  > li { position: relative; }
-}
-.@{fa-css-prefix}-li {
-  position: absolute;
-  left: -@fa-icon-li-width;
-  width: @fa-icon-li-width;
-  top: (2em / 14);
-  text-align: center;
-  &.@{fa-css-prefix}-lg {
-    left: -@fa-icon-li-width + (4em / 14);
-  }
-}
-
-
-// allows usage of the hide class directly on font awesome icons
-.@{fa-css-prefix}.hide { display: none; }
-
-.@{fa-css-prefix}-muted { color: @fa-icon-muted; }
-.@{fa-css-prefix}-light { color: @fa-icon-light; }
-.@{fa-css-prefix}-dark { color: @fa-icon-dark; }
-
-
-// Icon Borders
-// -------------------------
-
-.@{fa-css-prefix}-border {
-  padding: .2em .25em .15em;
-  border: solid 1px @fa-border-color;
-  border-radius: 3px;
-}
-
-
-// Icon Sizes
-// -------------------------
-
-.@{fa-css-prefix}-2x {
-  font-size: 2em;
-  &.@{fa-css-prefix}-border {
-    border-width: 2px;
-    border-radius: 4px;
-  }
-}
-.@{fa-css-prefix}-3x {
-  font-size: 3em;
-  &.@{fa-css-prefix}-border {
-    border-width: 3px;
-    border-radius: 5px;
-  }
-}
-.@{fa-css-prefix}-4x {
-  font-size: 4em;
-  &.@{fa-css-prefix}-border {
-    border-width: 4px;
-    border-radius: 6px;
-  }
-}
-.@{fa-css-prefix}-5x {
-  font-size: 5em;
-  &.@{fa-css-prefix}-border {
-    border-width: 5px;
-    border-radius: 7px;
-  }
-}
-
-
-// Floats & Margins
-// -------------------------
-
-// Quick floats
-.pull-right { float: right; }
-.pull-left { float: left; }
-
-.@{fa-css-prefix} {
-  &.pull-left { margin-right: .3em; }
-  &.pull-right { margin-left: .3em; }
-}
diff --git a/less/extras.less b/less/extras.less
index 0ca41c37e..89faf70fc 100644
--- a/less/extras.less
+++ b/less/extras.less
@@ -1,45 +1,2 @@
-/* EXTRAS
- * -------------------------- */
-
-/* Stacked and layered icon */
-.fa-icon-stack();
-
-/* Animated rotating icon */
-.@{fa-css-prefix}-spin {
-  -webkit-animation: spin 2s infinite linear;
-  -moz-animation: spin 2s infinite linear;
-  -o-animation: spin 2s infinite linear;
-  animation: spin 2s infinite linear;
-}
-
-@-moz-keyframes spin {
-  0% { -moz-transform: rotate(0deg); }
-  100% { -moz-transform: rotate(359deg); }
-}
-@-webkit-keyframes spin {
-  0% { -webkit-transform: rotate(0deg); }
-  100% { -webkit-transform: rotate(359deg); }
-}
-@-o-keyframes spin {
-  0% { -o-transform: rotate(0deg); }
-  100% { -o-transform: rotate(359deg); }
-}
-@-ms-keyframes spin {
-  0% { -ms-transform: rotate(0deg); }
-  100% { -ms-transform: rotate(359deg); }
-}
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(359deg); }
-}
-
-
-// Icon rotations & flipping
-// -------------------------
-
-.@{fa-css-prefix}-rotate-90  { .fa-icon-rotate(90deg, 1);  }
-.@{fa-css-prefix}-rotate-180 { .fa-icon-rotate(180deg, 2); }
-.@{fa-css-prefix}-rotate-270 { .fa-icon-rotate(270deg, 3); }
-
-.@{fa-css-prefix}-flip-horizontal { .fa-icon-flip(-1, 1); }
-.@{fa-css-prefix}-flip-vertical   { .fa-icon-flip(1, -1); }
+// Extras
+// --------------------------
diff --git a/less/fixed-width.less b/less/fixed-width.less
new file mode 100644
index 000000000..110289f2f
--- /dev/null
+++ b/less/fixed-width.less
@@ -0,0 +1,6 @@
+// Fixed Width Icons
+// -------------------------
+.@{fa-css-prefix}-fw {
+  width: (18em / 14);
+  text-align: center;
+}
diff --git a/less/font-awesome.less b/less/font-awesome.less
index b6fd86bb8..62c0e0e17 100644
--- a/less/font-awesome.less
+++ b/less/font-awesome.less
@@ -24,9 +24,15 @@
  *  Work: Lead Product Designer @ Kyruus - http://kyruus.com
  */
 
-@import "variables.less";
-@import "mixins.less";
-@import "path.less";
-@import "core.less";
-@import "extras.less";
-@import "icons.less";
+@import "variables";
+@import "mixins";
+@import "path";
+@import "core";
+@import "larger";
+@import "fixed-width";
+@import "list";
+@import "bordered-pulled";
+@import "spinning";
+@import "rotated-flipped";
+@import "stacked";
+@import "icons";
diff --git a/less/larger.less b/less/larger.less
new file mode 100644
index 000000000..c9d646770
--- /dev/null
+++ b/less/larger.less
@@ -0,0 +1,13 @@
+// Icon Sizes
+// -------------------------
+
+/* makes the font 33% larger relative to the icon container */
+.@{fa-css-prefix}-lg {
+  font-size: (4em / 3);
+  line-height: (3em / 4);
+  vertical-align: -15%;
+}
+.@{fa-css-prefix}-2x { font-size: 2em; }
+.@{fa-css-prefix}-3x { font-size: 3em; }
+.@{fa-css-prefix}-4x { font-size: 4em; }
+.@{fa-css-prefix}-5x { font-size: 5em; }
diff --git a/less/list.less b/less/list.less
new file mode 100644
index 000000000..9c8d7df55
--- /dev/null
+++ b/less/list.less
@@ -0,0 +1,20 @@
+// Icon UL & LI
+// -------------------------
+
+.@{fa-css-prefix}-ul {
+  padding-left: 0;
+  margin-left: @fa-icon-li-width;
+  list-style-type: none;
+  > li { position: relative; }
+}
+.@{fa-css-prefix}-li {
+  position: absolute;
+  left: -@fa-icon-li-width;
+  width: @fa-icon-li-width;
+  top: (2em / 14);
+  text-align: center;
+  &.@{fa-css-prefix}-lg {
+    left: -@fa-icon-li-width + (4em / 14);
+  }
+}
+
diff --git a/less/mixins.less b/less/mixins.less
index 37b2a016b..71486c839 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -17,26 +17,3 @@
        -o-transform: scale(@horiz, @vert);
           transform: scale(@horiz, @vert);
 }
-
-.fa-icon-stack(@width: 2em, @height: 2em, @top-font-size: 1em, @base-font-size: 2em) {
-  .@{fa-css-prefix}-stack {
-    position: relative;
-    display: inline-block;
-    width: @width;
-    height: @height;
-    line-height: @width;
-    vertical-align: -35%;
-    .@{fa-css-prefix} {
-      position: absolute;
-      display: block;
-      width: 100%;
-      height: 100%;
-      font-size: @top-font-size;
-      line-height: inherit;
-      text-align: center;
-    }
-    .@{fa-css-prefix}-stack-base {
-      font-size: @base-font-size;
-    }
-  }
-}
diff --git a/less/rotated-flipped.less b/less/rotated-flipped.less
new file mode 100644
index 000000000..5c457a4b7
--- /dev/null
+++ b/less/rotated-flipped.less
@@ -0,0 +1,9 @@
+// Rotated & Flipped Icons
+// -------------------------
+
+.@{fa-css-prefix}-rotate-90  { .fa-icon-rotate(90deg, 1);  }
+.@{fa-css-prefix}-rotate-180 { .fa-icon-rotate(180deg, 2); }
+.@{fa-css-prefix}-rotate-270 { .fa-icon-rotate(270deg, 3); }
+
+.@{fa-css-prefix}-flip-horizontal { .fa-icon-flip(-1, 1); }
+.@{fa-css-prefix}-flip-vertical   { .fa-icon-flip(1, -1); }
diff --git a/less/spinning.less b/less/spinning.less
new file mode 100644
index 000000000..60828fe5c
--- /dev/null
+++ b/less/spinning.less
@@ -0,0 +1,30 @@
+// Spinning Icons
+// --------------------------
+
+.@{fa-css-prefix}-spin {
+  -webkit-animation: spin 2s infinite linear;
+  -moz-animation: spin 2s infinite linear;
+  -o-animation: spin 2s infinite linear;
+  animation: spin 2s infinite linear;
+}
+
+@-moz-keyframes spin {
+  0% { -moz-transform: rotate(0deg); }
+  100% { -moz-transform: rotate(359deg); }
+}
+@-webkit-keyframes spin {
+  0% { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(359deg); }
+}
+@-o-keyframes spin {
+  0% { -o-transform: rotate(0deg); }
+  100% { -o-transform: rotate(359deg); }
+}
+@-ms-keyframes spin {
+  0% { -ms-transform: rotate(0deg); }
+  100% { -ms-transform: rotate(359deg); }
+}
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(359deg); }
+}
diff --git a/less/stacked.less b/less/stacked.less
new file mode 100644
index 000000000..fc1dc121d
--- /dev/null
+++ b/less/stacked.less
@@ -0,0 +1,19 @@
+// Stacked Icons
+// -------------------------
+
+.@{fa-css-prefix}-stack {
+  position: relative;
+  display: inline-block;
+  width: 2em;
+  height: 2em;
+  line-height: 2em;
+  vertical-align: middle;
+}
+.@{fa-css-prefix}-stack-top, .@{fa-css-prefix}-stack-bottom {
+  position: absolute;
+  width: 100%;
+  text-align: center;
+}
+.@{fa-css-prefix}-stack-top { line-height: inherit; }
+.@{fa-css-prefix}-stack-bottom { font-size: 2em; }
+.@{fa-css-prefix}-inverse { color: @fa-icon-inverse; }
diff --git a/less/variables.less b/less/variables.less
index 9558b59b3..a44303cbf 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -6,9 +6,7 @@
 @fa-css-prefix:       fa;
 @fa-version:          "4.0.0";
 @fa-border-color:     #eee;
-@fa-icon-muted:       #eee;
-@fa-icon-light:       #fff;
-@fa-icon-dark:        #333;
+@fa-icon-inverse:     #fff;
 @fa-icon-li-width:    (30em / 14);
 
 @fa-var-glass: "\f000";