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-"]
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

View File

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

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
readers do not read off random characters that represent icons */
=icon($code)
&:before
content: $code
=icon-glass
+icon("\f000")

View File

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

View File

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