Added a stylus version of the styles based on the 3.2.0-wip branch

This commit is contained in:
Marcello di Simone 2013-05-24 11:21:08 +02:00
parent a4612d8b81
commit 1bb45601ee
9 changed files with 434 additions and 0 deletions

View File

@ -0,0 +1,87 @@
/* BOOTSTRAP SPECIFIC CLASSES
* -------------------------- */
/* Bootstrap 2.0 sprites.less reset */
[class^="icon-"]
[class*=" icon-"]
display inline
width auto
height auto
line-height normal
vertical-align baseline
background-image none
background-position 0% 0%
background-repeat repeat
margin-top 0
/* more sprites.less reset */
.icon-white
background-image none
.nav-pills > .active > a
.nav-list > .active > a
.navbar-inverse .nav > .active > a
.dropdown-menu > li > a:hover
.dropdown-menu > .active > a
.dropdown-submenu:hover > a
& > [class^="icon-"]
& > [class*=" icon-"]
background-image none
/* keeps Bootstrap styles with and without icons the same */
.btn, .nav
[class^="icon-"]
[class*=" icon-"]
// display inline
&.icon-large
line-height .9em
&.icon-spin
display inline-block
.nav-tabs
.nav-pills
[class^="icon-"]
[class*=" icon-"]
&, &.icon-large
line-height .9em
.btn
[class^="icon-"]
[class*=" icon-"]
&.pull-left
&.pull-right
&.icon-2x
margin-top .18em
&.icon-spin.icon-large
line-height .8em
&.btn-small
[class^="icon-"]
[class*=" icon-"]
&.pull-left
&.pull-right
&.icon-2x
margin-top .25em
&.btn-large
[class^="icon-"]
[class*=" icon-"]
margin-top 0 // overrides bootstrap default
&.pull-left
&.pull-right
&.icon-2x
margin-top .05em
&.pull-left.icon-2x
margin-right .2em
&.pull-right.icon-2x
margin-left .2em

View File

@ -0,0 +1,111 @@
/* FONT AWESOME CORE
* -------------------------- */
[class^="icon-"]
[class*=" icon-"]
font-family FontAwesome
font-weight normal
font-style normal
text-decoration inherit
-webkit-font-smoothing antialiased
*margin-right .3em
&:before
text-decoration inherit
display inline-block
speak none
&.hide
display none
&.pull-left
margin-right .3em
&.pull-right
margin-left .3em
&.icon-fixed-width
display inline-block
width (18/14)em
text-align center
&.icon-large
width (22/14)em
.icon-large:before
vertical-align -10%
font-size (4/3)em
/* makes sure icons active on rollover in links */
a
[class^="icon-"],
[class*=" icon-"]
&, &:before
display inline
ul.icons-ul
list-style-type none
text-indent -(10/14)em
margin-left (30/14)em
> li
.icon-li
width (10/14)em
display inline-block
text-align center
.icon-muted
color iconMuted
.icon-light
color iconLight
.icon-dark
color iconDark
// Icon Borders
// -------------------------
.icon-border
border solid 1px borderColor
padding .2em .25em .15em
border-radius(3px)
// Icon Sizes
// -------------------------
.icon-2x
font-size 2em
&.icon-border
border-width 2px
border-radius(4px)
.icon-3x
font-size 3em
&.icon-border
border-width 3px
border-radius(5px)
.icon-4x
font-size 4em
&.icon-border
border-width 4px
border-radius(6px)
.icon-5x
font-size 5em
&.icon-border
border-width 5px
border-radius(7px)
// Floats & Margins
// -------------------------
// Quick floats
.pull-right
float right
.pull-left
float left

View File

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

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,32 @@
/*!
* Font Awesome 3.1.0
* the iconic font designed for Bootstrap
* -------------------------------------------------------
* The full suite of pictographic icons, examples, and documentation
* can be found at: http://fontawesome.io
*
* License
* -------------------------------------------------------
* - The Font Awesome font is licensed under the SIL Open Font License v1.1 -
* http://scripts.sil.org/OFL
* - Font Awesome CSS, styl, and SASS files are licensed under the MIT License -
* http://opensource.org/licenses/mit-license.html
* - Font Awesome documentation licensed under CC BY 3.0 License -
* http://creativecommons.org/licenses/by/3.0/
* - Attribution is no longer required in Font Awesome 3.0, but much appreciated:
* "Font Awesome by Dave Gandy - http://fontawesome.io"
* Contact
* -------------------------------------------------------
* Email: dave@fontawesome.io
* Twitter: http://twitter.com/fortaweso_me
* Work: Lead Product Designer @ http://kyruus.com
*/
@import "variables.styl"
@import "mixins.styl"
@import "path.styl"
@import "core.styl"
@import "bootstrap.styl"
@import "extras.styl"
@import "icons.styl"

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,45 @@
// Mixins
// --------------------------
border-radius(radius)
-webkit-border-radius radius
-moz-border-radius radius
border-radius radius
icon-stack(width = 2em, height = 2em, top-font-size = 1em, base-font-size = 2em)
.icon-stack
position relative
display inline-block
width width
height height
line-height width
vertical-align -35%
[class^="icon-"]
[class*=" icon-"]
display block
text-align center
position absolute
width 100%
height 100%
font-size top-font-size
line-height inherit
*line-height height
.icon-stack-base
font-size base-font-size
*line-height (height / base-font-size)
vendor(prop, args...)
for prefix in vendor-prefixes
unless prefix == official
property = '-' + prefix + '-' + prop
add-property(property, args)
add-property(prop, args)
buildIcons(hash)
for icon, index in hash
.icon-{icon}:before
content icon[1]

View File

@ -0,0 +1,15 @@
/* FONT PATH
* -------------------------- */
@font-face {
font-family: 'FontAwesome';
src: url(FontAwesomePath + '/fontawesome-webfont.eot?v=' + FontAwesomeVersion);
src: url(FontAwesomePath + '/fontawesome-webfont.eot?#iefix&v=' + FontAwesomeVersion) format('embedded-opentype'),
url(FontAwesomePath + '/fontawesome-webfont.woff?v=' + FontAwesomeVersion) format('woff'),
url(FontAwesomePath + '/fontawesome-webfont.ttf?v=' + FontAwesomeVersion) format('truetype'),
url(FontAwesomePath + '/fontawesome-webfont.svg#fontawesomeregular?v=' + FontAwesomeVersion) format('svg');
// src: url(FontAwesomePath + '/FontAwesome.otf') format('opentype'); // used when developing fonts
font-weight: normal;
font-style: normal;
}

View File

@ -0,0 +1,11 @@
// Variables
// --------------------------
FontAwesomePath = "../font";
FontAwesomeVersion = "3.1.0";
borderColor = #eee;
iconMuted = #eee;
iconLight = #fff;
iconDark = #333;
vendor-prefixes = webkit moz o ms official