re-writing & simplifying stacked icons, massive re-organization of le…

…ss include files
TorinPascal · Oct 22, 2013 · 448d3dd · 448d3dd
1 parent 2879ed2
commit 448d3dd
Show file tree

Hide file tree

Showing 36 changed files with 381 additions and 485 deletions.
diff --git a/css/font-awesome.css b/css/font-awesome.css
@@ -31,8 +31,6 @@
   font-weight: normal;
   font-style: normal;
 }
-/* FONT AWESOME CORE
- * -------------------------- */
 .fa {
   display: inline-block;
   font-family: FontAwesome;
@@ -48,6 +46,18 @@
   line-height: 0.75em;
   vertical-align: -15%;
 }
+.fa-2x {
+  font-size: 2em;
+}
+.fa-3x {
+  font-size: 3em;
+}
+.fa-4x {
+  font-size: 4em;
+}
+.fa-5x {
+  font-size: 5em;
+}
 .fa-fw {
   width: 1.2857142857142858em;
   text-align: center;
@@ -70,50 +80,11 @@
 .fa-li.fa-lg {
   left: -1.8571428571428572em;
 }
-.fa.hide {
-  display: none;
-}
-.fa-muted {
-  color: #eeeeee;
-}
-.fa-light {
-  color: #ffffff;
-}
-.fa-dark {
-  color: #333333;
-}
 .fa-border {
   padding: .2em .25em .15em;
   border: solid 1px #eeeeee;
-  border-radius: 3px;
-}
-.fa-2x {
-  font-size: 2em;
-}
-.fa-2x.fa-border {
-  border-width: 2px;
-  border-radius: 4px;
-}
-.fa-3x {
-  font-size: 3em;
-}
-.fa-3x.fa-border {
-  border-width: 3px;
-  border-radius: 5px;
-}
-.fa-4x {
-  font-size: 4em;
-}
-.fa-4x.fa-border {
-  border-width: 4px;
-  border-radius: 6px;
-}
-.fa-5x {
-  font-size: 5em;
-}
-.fa-5x.fa-border {
-  border-width: 5px;
-  border-radius: 7px;
+  border-width: .08em;
+  border-radius: .1em;
 }
 .pull-right {
   float: right;
@@ -127,30 +98,6 @@
 .fa.pull-right {
   margin-left: .3em;
 }
-/* EXTRAS
- * -------------------------- */
-/* Stacked and layered icon */
-.fa-stack {
-  position: relative;
-  display: inline-block;
-  width: 2em;
-  height: 2em;
-  line-height: 2em;
-  vertical-align: -35%;
-}
-.fa-stack .fa {
-  position: absolute;
-  display: block;
-  width: 100%;
-  height: 100%;
-  font-size: 1em;
-  line-height: inherit;
-  text-align: center;
-}
-.fa-stack .fa-stack-base {
-  font-size: 2em;
-}
-/* Animated rotating icon */
 .fa-spin {
   -webkit-animation: spin 2s infinite linear;
   -moz-animation: spin 2s infinite linear;
@@ -235,6 +182,29 @@
   -o-transform: scale(1, -1);
   transform: scale(1, -1);
 }
+.fa-stack {
+  position: relative;
+  display: inline-block;
+  width: 2em;
+  height: 2em;
+  line-height: 2em;
+  vertical-align: middle;
+}
+.fa-stack-top,
+.fa-stack-bottom {
+  position: absolute;
+  width: 100%;
+  text-align: center;
+}
+.fa-stack-top {
+  line-height: inherit;
+}
+.fa-stack-bottom {
+  font-size: 2em;
+}
+.fa-inverse {
+  color: #ffffff;
+}
 /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
    readers do not read off random characters that represent icons */
 .fa-glass:before {

diff --git a/css/font-awesome.min.css b/css/font-awesome.min.css
@@ -1,29 +1,28 @@
 @font-face{font-family:'FontAwesome';src:url('../fonts/FontAwesome.otf') format('opentype');font-weight:normal;font-style:normal}.fa{display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:normal;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
 .fa-lg{font-size:1.3333333333333333em;line-height:.75em;vertical-align:-15%}
+.fa-2x{font-size:2em}
+.fa-3x{font-size:3em}
+.fa-4x{font-size:4em}
+.fa-5x{font-size:5em}
 .fa-fw{width:1.2857142857142858em;text-align:center}
 .fa-ul{padding-left:0;margin-left:2.142857142857143em;list-style-type:none}.fa-ul>li{position:relative}
 .fa-li{position:absolute;left:-2.142857142857143em;width:2.142857142857143em;top:.14285714285714285em;text-align:center}.fa-li.fa-lg{left:-1.8571428571428572em}
-.fa.hide{display:none}
-.fa-muted{color:#eee}
-.fa-light{color:#fff}
-.fa-dark{color:#333}
-.fa-border{padding:.2em .25em .15em;border:solid 1px #eee;border-radius:3px}
-.fa-2x{font-size:2em}.fa-2x.fa-border{border-width:2px;border-radius:4px}
-.fa-3x{font-size:3em}.fa-3x.fa-border{border-width:3px;border-radius:5px}
-.fa-4x{font-size:4em}.fa-4x.fa-border{border-width:4px;border-radius:6px}
-.fa-5x{font-size:5em}.fa-5x.fa-border{border-width:5px;border-radius:7px}
+.fa-border{padding:.2em .25em .15em;border:solid 1px #eee;border-width:.08em;border-radius:.1em}
 .pull-right{float:right}
 .pull-left{float:left}
 .fa.pull-left{margin-right:.3em}
 .fa.pull-right{margin-left:.3em}
-.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:-35%}.fa-stack .fa{position:absolute;display:block;width:100%;height:100%;font-size:1em;line-height:inherit;text-align:center}
-.fa-stack .fa-stack-base{font-size:2em}
 .fa-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)}}.fa-rotate-90{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}
 .fa-rotate-180{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}
 .fa-rotate-270{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-ms-transform:rotate(270deg);-o-transform:rotate(270deg);transform:rotate(270deg)}
 .fa-flip-horizontal{-webkit-transform:scale(-1, 1);-moz-transform:scale(-1, 1);-ms-transform:scale(-1, 1);-o-transform:scale(-1, 1);transform:scale(-1, 1)}
 .fa-flip-vertical{-webkit-transform:scale(1, -1);-moz-transform:scale(1, -1);-ms-transform:scale(1, -1);-o-transform:scale(1, -1);transform:scale(1, -1)}
+.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}
+.fa-stack-top,.fa-stack-bottom{position:absolute;width:100%;text-align:center}
+.fa-stack-top{line-height:inherit}
+.fa-stack-bottom{font-size:2em}
+.fa-inverse{color:#fff}
 .fa-glass:before{content:"\f000"}
 .fa-music:before{content:"\f001"}
 .fa-search:before{content:"\f002"}

diff --git a/less/bordered-pulled.less 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
@@ -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
@@ -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
@@ -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
@@ -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";