From 448d3ddb7f382df99f08260f9ffe18672a738fa0 Mon Sep 17 00:00:00 2001 From: davegandy Date: Tue, 22 Oct 2013 15:55:08 -0400 Subject: [PATCH] re-writing & simplifying stacked icons, massive re-organization of less include files --- css/font-awesome.css | 104 +++++++----------- css/font-awesome.min.css | 21 ++-- less/bordered-pulled.less | 17 +++ less/core.less | 102 +---------------- less/extras.less | 47 +------- less/fixed-width.less | 6 + less/font-awesome.less | 18 ++- less/larger.less | 13 +++ less/list.less | 20 ++++ less/mixins.less | 23 ---- less/rotated-flipped.less | 9 ++ less/spinning.less | 30 +++++ less/stacked.less | 19 ++++ less/variables.less | 4 +- scss/_core.scss | 10 +- src/_includes/examples/bordered-pulled.html | 4 +- src/_includes/examples/fixed-width.html | 2 +- .../examples/{lists.html => list.html} | 6 +- src/_includes/examples/new.html | 4 +- src/_includes/examples/stacked.html | 37 ++++--- src/_includes/navbar.html | 2 +- .../tests/stacked-inside-anchor.html | 36 +++--- src/_includes/tests/stacked.html | 36 +++--- .../font-awesome/less/bordered-pulled.less | 20 ++++ src/assets/font-awesome/less/core.less | 103 +---------------- src/assets/font-awesome/less/fixed-width.less | 9 ++ .../font-awesome/less/font-awesome.less | 18 ++- src/assets/font-awesome/less/larger.less | 16 +++ src/assets/font-awesome/less/list.less | 23 ++++ src/assets/font-awesome/less/mixins.less | 23 ---- .../font-awesome/less/rotated-flipped.less | 12 ++ .../less/{extras.less => spinning.less} | 18 +-- src/assets/font-awesome/less/stacked.less | 22 ++++ src/assets/font-awesome/less/variables.less | 4 +- src/examples.html | 2 +- src/test.html | 26 +++-- 36 files changed, 381 insertions(+), 485 deletions(-) create mode 100644 less/bordered-pulled.less create mode 100644 less/fixed-width.less create mode 100644 less/larger.less create mode 100644 less/list.less create mode 100644 less/rotated-flipped.less create mode 100644 less/spinning.less create mode 100644 less/stacked.less rename src/_includes/examples/{lists.html => list.html} (87%) create mode 100644 src/assets/font-awesome/less/bordered-pulled.less create mode 100644 src/assets/font-awesome/less/fixed-width.less create mode 100644 src/assets/font-awesome/less/larger.less create mode 100644 src/assets/font-awesome/less/list.less create mode 100644 src/assets/font-awesome/less/rotated-flipped.less rename src/assets/font-awesome/less/{extras.less => spinning.less} (59%) create mode 100644 src/assets/font-awesome/less/stacked.less diff --git a/css/font-awesome.css b/css/font-awesome.css index d4351ece2..d207d4d0b 100644 --- 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 index 88c6e054b..0909c172a 100644 --- 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 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"; diff --git a/scss/_core.scss b/scss/_core.scss index 38e45808e..be1cd682e 100644 --- a/scss/_core.scss +++ b/scss/_core.scss @@ -17,14 +17,10 @@ line-height: (3em / 4); vertical-align: -15%; } -/* increased font size for icon-lg */ + .#{$fa-css-prefix}-fixed-width { - width: (16em / 14); - padding-right: (4em / 14); - text-align: right; - &.#{$fa-css-prefix}-lg { - width: (20em / 14); - } + width: (18em / 14); + text-align: center; } diff --git a/src/_includes/examples/bordered-pulled.html b/src/_includes/examples/bordered-pulled.html index 2439cdb99..01c495012 100644 --- a/src/_includes/examples/bordered-pulled.html +++ b/src/_includes/examples/bordered-pulled.html @@ -9,13 +9,13 @@
- + Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image. Or spinning icons for loading and refreshing content. Or fun big icons in multi-line buttons. You can combine all of them in any combination to get lots of new possibilities.
{% highlight html %} - + Use a few of the new styles together ... lots of new possibilities. {% endhighlight %}
diff --git a/src/_includes/examples/fixed-width.html b/src/_includes/examples/fixed-width.html index 2a0f8f592..ac15a94b8 100644 --- a/src/_includes/examples/fixed-width.html +++ b/src/_includes/examples/fixed-width.html @@ -11,7 +11,7 @@

- For use when variable width throws off alignment. Especially useful in things like nav lists. + The fa-fw sets icons at a fixed width. For use when variable width throws off alignment. Especially useful in things like nav lists.

{% highlight html %}