|
|
|
$site__font__family--icon: FontAwesome; |
|
$site__spacing--primary: 20px; |
|
/************************************** |
|
icon font pattern |
|
**************************************/ |
|
$iconfont__font__family: $site__font__family--icon; |
|
$iconfont__spacing--between:.2em; |
|
$iconfont__spacing--between-vertical:$site__spacing--primary; |
|
|
|
$icon-classname: "icon"; |
|
$block: ".#{$icon-classname}"; |
|
|
|
// Quite a bit of digging has gone into the code below. See the following codepen for examples and history: http://codepen.io/aaronbarker/pen/FfgJd |
|
// it is encouraged to put the declaration of icons (which glyph goes with which icon) and icon specific tweaks in another section, so that the core icon logic and the specifcs are separated. Not required, but encouraged. |
|
|
|
[class^="#{$icon-classname}-"], |
|
[class*=" #{$icon-classname}-"]{ |
|
display:inline-block; |
|
} |
|
|
|
[class^="#{$icon-classname}-"]:before, |
|
[class*=" #{$icon-classname}-"]:before { |
|
margin-right:$iconfont__spacing--between; /*this is just spacing between icon and text*/ |
|
line-height:1; |
|
font-family:$iconfont__font__family; |
|
} |
|
// show it only as an icon (hide the text) |
|
#{$block}--icon { |
|
/* indent can't be 100% thanks to IE */ |
|
overflow:hidden; |
|
text-indent:-10em; |
|
vertical-align:bottom; /*fixes a vertical alignment issue seen in all browsers due to the icon being display:block, which it needs to be*/ |
|
white-space:nowrap; |
|
display:inline-table; |
|
font-family:$site__font__family--icon; // have to put on the parent due to an IE bug https://connect.microsoft.com/IE/feedback/details/796188/pseudo-element-display-table-cell-font-ignored |
|
&:before { |
|
margin-right:0; /*fixes the spacing between icon and text for regular version*/ |
|
display:table-cell; |
|
text-indent:0; |
|
margin-bottom:1em; /* adds some space below the icon so wrapped word isn't seen when there is lots of padding */ |
|
} |
|
|
|
#{$block}--suffix:before { |
|
float:right; |
|
margin-right:0; |
|
margin-left:$iconfont__spacing--between; |
|
} |
|
} |
|
|
|
/*target firefox only, the only one to have problems*/ |
|
@-moz-document url-prefix(){ |
|
[class^="icon-"]:before, |
|
[class*=" icon-"]:before { |
|
/* vertical-align:-10%; */ |
|
} |
|
#{$block} { |
|
vertical-align:middle; |
|
} |
|
} |
|
/************************************** |
|
end iconfont pattern |
|
**************************************/ |
|
|
|
|
|
/*General stuff, not specific to this solution*/ |
|
*{ |
|
box-sizing: border-box; |
|
-moz-box-sizing:border-box; |
|
} |
|
body { |
|
padding:0 140px; |
|
font-size:1em; |
|
line-height:1em |
|
} |
|
@font-face { |
|
font-family: 'FontAwesome'; |
|
src: url('//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.0/font/fontawesome-webfont.eot?v=3.2.0'); |
|
src: url('//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.0/font/fontawesome-webfont.eot?#iefix&v=3.2.0') format('embedded-opentype'), |
|
url('//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.0/font/fontawesome-webfont.woff?v=3.2.0') format('woff'), |
|
url('//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.0/font/fontawesome-webfont.ttf?v=3.2.0') format('truetype'), |
|
url('//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.0/font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.0') format('svg'); |
|
font-weight: normal; |
|
font-style: normal; |
|
} |
|
/*.icon.icon-search:after,*/ |
|
.icon-narrow:before { |
|
content:"\f176"; |
|
} |
|
.icon-wide:before { |
|
content:"\f07e"; |
|
} |
|
|
|
/*simple styles to see some stuff*/ |
|
span { |
|
border:1px solid rgba(0,0,255,.1); |
|
} |
|
.bigger { |
|
font-size:150%; |
|
} |
|
.btn{ |
|
background:#ddd; |
|
border:1px solid green; |
|
padding:.3em .8em; |
|
font-size:inherit; |
|
/* display:inline-block; */ |
|
line-height:100%; |
|
/*overflow:visible;*/ |
|
} |
|
[class^="icon-"]:before, |
|
[class*=" icon-"]:before, |
|
[class^="icon-"]:after, |
|
[class*=" icon-"]:after{ |
|
background:rgba(0,255,0,.3); |
|
} |