re-porting to scss, fixing some fa variable names

This commit is contained in:
davegandy 2013-10-23 00:24:08 -04:00
parent e5a654cd01
commit f212bebf6c
34 changed files with 1095 additions and 1144 deletions

View File

@ -11,7 +11,7 @@ pygments: true
permalink: pretty
# ensures SCSS files are compiled
include: [_bootstrap.scss, _core.scss, _extras.scss, _icons.scss, _mixins.scss, _path.scss, _variables.scss]
include: [_bordered-pulled.scss, _core.scss, _fixed-width.scss, _icons.scss, _larger.scss, _list.scss, _mixins.scss, _path.scss, _rotated-flipped.scss, _spinning.scss, _stacked.scss, _variables.scss]
# used in building icon pages
icon_meta: src/icons.yml

1667
css/font-awesome.css vendored

File diff suppressed because it is too large Load Diff

View File

@ -3,8 +3,7 @@
.@{fa-css-prefix}-border {
padding: .2em .25em .15em;
border: solid 1px @fa-border-color;
border-width: .08em;
border: solid .08em @fa-border-color;
border-radius: .1em;
}

View File

@ -3,18 +3,17 @@
.@{fa-css-prefix}-ul {
padding-left: 0;
margin-left: @fa-icon-li-width;
margin-left: @fa-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;
left: -@fa-li-width;
width: @fa-li-width;
top: (2em / 14);
text-align: center;
&.@{fa-css-prefix}-lg {
left: -@fa-icon-li-width + (4em / 14);
left: -@fa-li-width + (4em / 14);
}
}

View File

@ -16,4 +16,4 @@
}
.@{fa-css-prefix}-stack-top { line-height: inherit; }
.@{fa-css-prefix}-stack-bottom { font-size: 2em; }
.@{fa-css-prefix}-inverse { color: @fa-icon-inverse; }
.@{fa-css-prefix}-inverse { color: @fa-inverse; }

View File

@ -6,8 +6,8 @@
@fa-css-prefix: fa;
@fa-version: "4.0.0";
@fa-border-color: #eee;
@fa-icon-inverse: #fff;
@fa-icon-li-width: (30em / 14);
@fa-inverse: #fff;
@fa-li-width: (30em / 14);
@fa-var-glass: "\f000";
@fa-var-music: "\f001";

View File

@ -0,0 +1,16 @@
// Bordered & Pulled
// -------------------------
.#{$fa-css-prefix}-border {
padding: .2em .25em .15em;
border: solid .08em $fa-border-color;
border-radius: .1em;
}
.pull-right { float: right; }
.pull-left { float: left; }
.#{$fa-css-prefix} {
&.pull-left { margin-right: .3em; }
&.pull-right { margin-left: .3em; }
}

View File

@ -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}-fixed-width {
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; }
}

View File

@ -2,7 +2,6 @@
* -------------------------- */
/* Stacked and layered icon */
@include fa-icon-stack();
/* Animated rotating icon */
.#{$fa-css-prefix}-spin {
@ -41,5 +40,5 @@
.#{$fa-css-prefix}-rotate-180 { @include fa-icon-rotate(180deg, 2); }
.#{$fa-css-prefix}-rotate-270 { @include fa-icon-rotate(270deg, 3); }
.#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1); }
.#{$fa-css-prefix}-flip-vertical { @include fa-icon-flip(1, -1); }
.#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1, 0); }
.#{$fa-css-prefix}-flip-vertical { @include fa-icon-flip(1, -1, 2); }

6
scss/_fixed-width.scss Normal file
View File

@ -0,0 +1,6 @@
// Fixed Width Icons
// -------------------------
.#{$fa-css-prefix}-fw {
width: (18em / 14);
text-align: center;
}

13
scss/_larger.scss Normal file
View File

@ -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; }

19
scss/_list.scss Normal file
View File

@ -0,0 +1,19 @@
// List Icons
// -------------------------
.#{$fa-css-prefix}-ul {
padding-left: 0;
margin-left: $fa-li-width;
list-style-type: none;
> li { position: relative; }
}
.#{$fa-css-prefix}-li {
position: absolute;
left: -$fa-li-width;
width: $fa-li-width;
top: (2em / 14);
text-align: center;
&.#{$fa-css-prefix}-lg {
left: -$fa-li-width + (4em / 14);
}
}

View File

@ -10,33 +10,11 @@
transform: rotate($degrees);
}
@mixin fa-icon-flip($horiz, $vert) {
@mixin fa-icon-flip($horiz, $vert, $rotation) {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=$rotation);
-webkit-transform: scale($horiz, $vert);
-moz-transform: scale($horiz, $vert);
-ms-transform: scale($horiz, $vert);
-o-transform: scale($horiz, $vert);
transform: scale($horiz, $vert);
}
@mixin 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;
}
}
}

View File

@ -0,0 +1,9 @@
// Rotated & Flipped Icons
// -------------------------
.#{$fa-css-prefix}-rotate-90 { @include fa-icon-rotate(90deg, 1); }
.#{$fa-css-prefix}-rotate-180 { @include fa-icon-rotate(180deg, 2); }
.#{$fa-css-prefix}-rotate-270 { @include fa-icon-rotate(270deg, 3); }
.#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1, 0); }
.#{$fa-css-prefix}-flip-vertical { @include fa-icon-flip(1, -1, 2); }

30
scss/_spinning.scss Normal file
View File

@ -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); }
}

19
scss/_stacked.scss Normal file
View File

@ -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-inverse; }

View File

@ -6,10 +6,8 @@ $fa-font-path: "../fonts" !default;
$fa-css-prefix: fa;
$fa-version: "4.0.0" !default;
$fa-border-color: #eee !default;
$fa-icon-muted: #eee !default;
$fa-icon-light: #fff !default;
$fa-icon-dark: #333 !default;
$fa-icon-li-width: (30em / 14);
$fa-inverse: #fff !default;
$fa-li-width: (30em / 14);
$fa-var-glass: "\f000";
$fa-var-music: "\f001";

View File

@ -28,5 +28,11 @@
@import "mixins";
@import "path";
@import "core";
@import "extras";
@import "larger";
@import "fixed-width";
@import "list";
@import "bordered-pulled";
@import "spinning";
@import "rotated-flipped";
@import "stacked";
@import "icons";

View File

@ -23,9 +23,9 @@ build:
@echo "Compiling Less files"
@mkdir -p ${FA_CSS_DIRECTORY}
lessc ${FA_LESS_MODERN} > ${FA_CSS_MODERN}
lessc --compress ${FA_LESS_MODERN} > ${FA_CSS_MODERN_MIN}
# sass ${FA_SCSS_MODERN} ${FA_CSS_MODERN}
# lessc ${FA_LESS_MODERN} > ${FA_CSS_MODERN}
# lessc --compress ${FA_LESS_MODERN} > ${FA_CSS_MODERN_MIN}
sass ${FA_SCSS_MODERN} ${FA_CSS_MODERN}
lessc --compress ${SITE_LESS} > ${SITE_CSS_MIN}
cp -r ${FA_ROOT_DIRECTORY}/* ../

View File

@ -6,8 +6,7 @@
.@{fa-css-prefix}-border {
padding: .2em .25em .15em;
border: solid 1px @fa-border-color;
border-width: .08em;
border: solid .08em @fa-border-color;
border-radius: .1em;
}

View File

@ -6,18 +6,17 @@
.@{fa-css-prefix}-ul {
padding-left: 0;
margin-left: @fa-icon-li-width;
margin-left: @fa-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;
left: -@fa-li-width;
width: @fa-li-width;
top: (2em / 14);
text-align: center;
&.@{fa-css-prefix}-lg {
left: -@fa-icon-li-width + (4em / 14);
left: -@fa-li-width + (4em / 14);
}
}

View File

@ -19,4 +19,4 @@
}
.@{fa-css-prefix}-stack-top { line-height: inherit; }
.@{fa-css-prefix}-stack-bottom { font-size: 2em; }
.@{fa-css-prefix}-inverse { color: @fa-icon-inverse; }
.@{fa-css-prefix}-inverse { color: @fa-inverse; }

View File

@ -8,8 +8,8 @@
@fa-css-prefix: {{ site.fontawesome.css_prefix }};
@fa-version: "{{ site.fontawesome.version }}";
@fa-border-color: #eee;
@fa-icon-inverse: #fff;
@fa-icon-li-width: (30em / 14);
@fa-inverse: #fff;
@fa-li-width: (30em / 14);
{% for icon in icons %}@fa-var-{{ icon.id }}: "\{{ icon.unicode }}";
{% endfor %}

View File

@ -0,0 +1,19 @@
---
---
// Bordered & Pulled
// -------------------------
.#{$fa-css-prefix}-border {
padding: .2em .25em .15em;
border: solid .08em $fa-border-color;
border-radius: .1em;
}
.pull-right { float: right; }
.pull-left { float: left; }
.#{$fa-css-prefix} {
&.pull-left { margin-right: .3em; }
&.pull-right { margin-left: .3em; }
}

View File

@ -1,7 +1,8 @@
---
---
/* FONT AWESOME CORE
* -------------------------- */
// Base Class Definition
// -------------------------
.#{$fa-css-prefix} {
display: inline-block;
@ -12,101 +13,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}-fixed-width {
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; }
}

View File

@ -0,0 +1,9 @@
---
---
// Fixed Width Icons
// -------------------------
.#{$fa-css-prefix}-fw {
width: (18em / 14);
text-align: center;
}

View File

@ -0,0 +1,16 @@
---
---
// 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; }

22
src/assets/font-awesome/scss/_list.scss vendored Normal file
View File

@ -0,0 +1,22 @@
---
---
// List Icons
// -------------------------
.#{$fa-css-prefix}-ul {
padding-left: 0;
margin-left: $fa-li-width;
list-style-type: none;
> li { position: relative; }
}
.#{$fa-css-prefix}-li {
position: absolute;
left: -$fa-li-width;
width: $fa-li-width;
top: (2em / 14);
text-align: center;
&.#{$fa-css-prefix}-lg {
left: -$fa-li-width + (4em / 14);
}
}

View File

@ -12,33 +12,11 @@
transform: rotate($degrees);
}
@mixin fa-icon-flip($horiz, $vert) {
@mixin fa-icon-flip($horiz, $vert, $rotation) {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=$rotation);
-webkit-transform: scale($horiz, $vert);
-moz-transform: scale($horiz, $vert);
-ms-transform: scale($horiz, $vert);
-o-transform: scale($horiz, $vert);
transform: scale($horiz, $vert);
}
@mixin 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;
}
}
}

View File

@ -0,0 +1,12 @@
---
---
// Rotated & Flipped Icons
// -------------------------
.#{$fa-css-prefix}-rotate-90 { @include fa-icon-rotate(90deg, 1); }
.#{$fa-css-prefix}-rotate-180 { @include fa-icon-rotate(180deg, 2); }
.#{$fa-css-prefix}-rotate-270 { @include fa-icon-rotate(270deg, 3); }
.#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1, 0); }
.#{$fa-css-prefix}-flip-vertical { @include fa-icon-flip(1, -1, 2); }

View File

@ -1,12 +1,9 @@
---
---
/* EXTRAS
* -------------------------- */
/* Stacked and layered icon */
@include fa-icon-stack();
// Spinning Icons
// --------------------------
/* Animated rotating icon */
.#{$fa-css-prefix}-spin {
-webkit-animation: spin 2s infinite linear;
-moz-animation: spin 2s infinite linear;
@ -34,14 +31,3 @@
0% { transform: rotate(0deg); }
100% { transform: rotate(359deg); }
}
// Icon rotations & flipping
// -------------------------
.#{$fa-css-prefix}-rotate-90 { @include fa-icon-rotate(90deg, 1); }
.#{$fa-css-prefix}-rotate-180 { @include fa-icon-rotate(180deg, 2); }
.#{$fa-css-prefix}-rotate-270 { @include fa-icon-rotate(270deg, 3); }
.#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1); }
.#{$fa-css-prefix}-flip-vertical { @include fa-icon-flip(1, -1); }

View File

@ -0,0 +1,22 @@
---
---
// 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-inverse; }

View File

@ -8,10 +8,8 @@ $fa-font-path: "../fonts" !default;
$fa-css-prefix: {{ site.fontawesome.css_prefix }};
$fa-version: "{{ site.fontawesome.version }}" !default;
$fa-border-color: #eee !default;
$fa-icon-muted: #eee !default;
$fa-icon-light: #fff !default;
$fa-icon-dark: #333 !default;
$fa-icon-li-width: (30em / 14);
$fa-inverse: #fff !default;
$fa-li-width: (30em / 14);
{% for icon in icons %}$fa-var-{{ icon.id }}: "\{{ icon.unicode }}";
{% endfor %}

View File

@ -6,5 +6,11 @@
@import "mixins";
@import "path";
@import "core";
@import "extras";
@import "larger";
@import "fixed-width";
@import "list";
@import "bordered-pulled";
@import "spinning";
@import "rotated-flipped";
@import "stacked";
@import "icons";