moved more items into mixins and provided a base import for pure sass users

This commit is contained in:
Zenobius Jiricek 2013-05-11 09:49:07 +09:30
parent b7a522533e
commit b692520f94
6 changed files with 90 additions and 70 deletions

View File

@ -3,26 +3,12 @@
[class^="icon-"], [class^="icon-"],
[class*=" icon-"] [class*=" icon-"]
font-family: FontAwesome +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
/* makes the font 33% larger relative to the icon container */ /* makes the font 33% larger relative to the icon container */
.icon-large:before .icon-large
vertical-align: -10% +icon-large
font-size: 4/3em
/* makes sure icons active on rollover in links */ /* makes sure icons active on rollover in links */
a a
@ -43,20 +29,8 @@ a
width: 22/14em width: 22/14em
ul.icons-ul ul.icons-ul
list-style-type: none +icon-list
text-indent: -10/14em
margin-left: 30/14em
> li
.icon-li
width: 10/14em
display: inline-block
text-align: center
// allows usage of the hide class directly on font awesome icons // allows usage of the hide class directly on font awesome icons

View File

@ -1,14 +1,5 @@
/* EXTRAS /* EXTRAS
* -------------------------- */ * -------------------------- */
/* Stacked and layered icon */
+icon-stack
/* Animated rotating icon */
.icon-spin
display: inline-block
+experimental(animation, spin 2s infinite linear)
+keyframes(spin) +keyframes(spin)
0% 0%
+experimental(transform, rotate(0deg)) +experimental(transform, rotate(0deg))
@ -16,24 +7,16 @@
+experimental(transform, rotate(359deg)) +experimental(transform, rotate(359deg))
/* Icon rotations and mirroring */ /* Stacked and layered icon */
.icon-rotate-90:before +icon-stack
+experimental(transform, rotate(90deg))
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1)
.icon-spin
.icon-rotate-180:before +icon-spin
+experimental(transform, rotate(180deg)) .icon-rotate-270
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2) +icon-rotate-270
.icon-flip-horizontal
+icon-flip-horizontal
.icon-rotate-270:before .icon-flip-vertical
+experimental(transform, rotate(270deg)) +icon-flip-vertical
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3) .icon-rotate-90
+icon-rotate-90
.icon-flip-horizontal:before
+experimental(transform, scale(-1, 1))
.icon-flip-vertical:before
+experimental(transform, scale(1, -1))

View File

@ -0,0 +1,7 @@
@import variables
@import mixins
@import path
@import core
@import bootstrap
@import extras
@import icons

View File

@ -1,9 +1,5 @@
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
readers do not read off random characters that represent icons */ readers do not read off random characters that represent icons */
=icon($code)
&:before
content: $code
=icon-glass =icon-glass
+icon("\f000") +icon("\f000")

View File

@ -1,5 +1,37 @@
// Mixins // 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) =border-radius($radius)
-webkit-border-radius: $radius -webkit-border-radius: $radius
@ -44,3 +76,37 @@
@content @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))

View File

@ -23,10 +23,4 @@
* Work: Lead Product Designer @ http://kyruus.com * Work: Lead Product Designer @ http://kyruus.com
*/ */
@import variables @import font-awesome
@import mixins
@import path
@import core
@import bootstrap
@import extras
@import icons