From b692520f947653c30d4913aa8db637c4381cea55 Mon Sep 17 00:00:00 2001 From: Zenobius Jiricek Date: Sat, 11 May 2013 09:49:07 +0930 Subject: [PATCH] moved more items into mixins and provided a base import for pure sass users --- build/assets/font-awesome/sass/_core.sass | 34 ++-------- build/assets/font-awesome/sass/_extras.sass | 41 ++++-------- .../font-awesome/sass/_font-awesome.sass | 7 ++ build/assets/font-awesome/sass/_icons.sass | 4 -- build/assets/font-awesome/sass/_mixins.sass | 66 +++++++++++++++++++ .../font-awesome/sass/font-awesome-sass.sass | 8 +-- 6 files changed, 90 insertions(+), 70 deletions(-) create mode 100644 build/assets/font-awesome/sass/_font-awesome.sass diff --git a/build/assets/font-awesome/sass/_core.sass b/build/assets/font-awesome/sass/_core.sass index a88cce511..e35cb3de5 100644 --- a/build/assets/font-awesome/sass/_core.sass +++ b/build/assets/font-awesome/sass/_core.sass @@ -3,26 +3,12 @@ [class^="icon-"], [class*=" icon-"] - font-family: FontAwesome - font-weight: normal - font-style: normal - text-decoration: inherit - -webkit-font-smoothing: antialiased - *margin-right: .3em // fixes ie7 issues - - -[class^="icon-"]:before, -[class*=" icon-"]:before - text-decoration: inherit - display: inline-block - speak: none + +fontawesome /* makes the font 33% larger relative to the icon container */ -.icon-large:before - vertical-align: -10% - font-size: 4/3em - +.icon-large + +icon-large /* makes sure icons active on rollover in links */ a @@ -43,20 +29,8 @@ a width: 22/14em - - ul.icons-ul - list-style-type: none - text-indent: -10/14em - margin-left: 30/14em - - > li - .icon-li - width: 10/14em - display: inline-block - text-align: center - - + +icon-list // allows usage of the hide class directly on font awesome icons diff --git a/build/assets/font-awesome/sass/_extras.sass b/build/assets/font-awesome/sass/_extras.sass index d70b6a049..84b571eaf 100644 --- a/build/assets/font-awesome/sass/_extras.sass +++ b/build/assets/font-awesome/sass/_extras.sass @@ -1,14 +1,5 @@ /* EXTRAS * -------------------------- */ - -/* Stacked and layered icon */ -+icon-stack - -/* Animated rotating icon */ -.icon-spin - display: inline-block - +experimental(animation, spin 2s infinite linear) - +keyframes(spin) 0% +experimental(transform, rotate(0deg)) @@ -16,24 +7,16 @@ +experimental(transform, rotate(359deg)) -/* Icon rotations and mirroring */ -.icon-rotate-90:before - +experimental(transform, rotate(90deg)) - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1) +/* Stacked and layered icon */ ++icon-stack - -.icon-rotate-180:before - +experimental(transform, rotate(180deg)) - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2) - - -.icon-rotate-270:before - +experimental(transform, rotate(270deg)) - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3) - - -.icon-flip-horizontal:before - +experimental(transform, scale(-1, 1)) - -.icon-flip-vertical:before - +experimental(transform, scale(1, -1)) +.icon-spin + +icon-spin +.icon-rotate-270 + +icon-rotate-270 +.icon-flip-horizontal + +icon-flip-horizontal +.icon-flip-vertical + +icon-flip-vertical +.icon-rotate-90 + +icon-rotate-90 diff --git a/build/assets/font-awesome/sass/_font-awesome.sass b/build/assets/font-awesome/sass/_font-awesome.sass new file mode 100644 index 000000000..b5676c487 --- /dev/null +++ b/build/assets/font-awesome/sass/_font-awesome.sass @@ -0,0 +1,7 @@ +@import variables +@import mixins +@import path +@import core +@import bootstrap +@import extras +@import icons diff --git a/build/assets/font-awesome/sass/_icons.sass b/build/assets/font-awesome/sass/_icons.sass index aab03c253..87520cf94 100644 --- a/build/assets/font-awesome/sass/_icons.sass +++ b/build/assets/font-awesome/sass/_icons.sass @@ -1,9 +1,5 @@ /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen readers do not read off random characters that represent icons */ -=icon($code) - &:before - content: $code - =icon-glass +icon("\f000") diff --git a/build/assets/font-awesome/sass/_mixins.sass b/build/assets/font-awesome/sass/_mixins.sass index 1ac6926eb..606da1d0d 100644 --- a/build/assets/font-awesome/sass/_mixins.sass +++ b/build/assets/font-awesome/sass/_mixins.sass @@ -1,5 +1,37 @@ // Mixins // -------------------------- +=fontawesome + font-family: FontAwesome + font-weight: normal + font-style: normal + text-decoration: inherit + -webkit-font-smoothing: antialiased + *margin-right: .3em // fixes ie7 issues + + &:before, &:before + text-decoration: inherit + display: inline-block + speak: none + + + + + +=icon-large + &:before + vertical-align: -10% + font-size: 4/3em + + +=icon-list + list-style-type: none + text-indent: -10/14em + margin-left: 30/14em + > li + .icon-li + width: 10/14em + display: inline-block + text-align: center =border-radius($radius) -webkit-border-radius: $radius @@ -44,3 +76,37 @@ @content +=icon($code) + &:before + content: $code + + + +/* Animated rotating icon */ +=icon-spin + display: inline-block + +experimental(animation, spin 2s infinite linear) + +/* Icon rotations and mirroring */ +=icon-rotate-90 + &:before + +experimental(transform, rotate(90deg)) + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1) + +=icon-flip-vertical + &:before + +experimental(transform, scale(1, -1)) + +=icon-rotate-180 + &:before + +experimental(transform, rotate(180deg)) + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2) + +=icon-rotate-270 + &:before + +experimental(transform, rotate(270deg)) + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3) + +=icon-flip-horizontal + &:before + +experimental(transform, scale(-1, 1)) diff --git a/build/assets/font-awesome/sass/font-awesome-sass.sass b/build/assets/font-awesome/sass/font-awesome-sass.sass index a9ca80259..a3b3de0af 100644 --- a/build/assets/font-awesome/sass/font-awesome-sass.sass +++ b/build/assets/font-awesome/sass/font-awesome-sass.sass @@ -23,10 +23,4 @@ * Work: Lead Product Designer @ http://kyruus.com */ -@import variables -@import mixins -@import path -@import core -@import bootstrap -@import extras -@import icons +@import font-awesome