100 lines
2.3 KiB
SCSS
100 lines
2.3 KiB
SCSS
@charset "UTF-8";
|
||
@if $use-sprite == true{
|
||
|
||
/*------------------------------------*\
|
||
$SPRITE
|
||
\*------------------------------------*/
|
||
/**
|
||
* Giving an element a class of `.sprite` will throw it into ‘sprite’ mode and apply
|
||
* a background image e.g.:
|
||
*
|
||
<a class="sprite sprite--question-mark">More info…</a>
|
||
*
|
||
* or
|
||
*
|
||
<a href=#><i class="sprite sprite--question-mark"></i> Help and FAQ</a>
|
||
*
|
||
* Giving an element a class of `.icon` will throw it into ‘icon’ mode and will
|
||
* not add a background, but should be used for icon fonts and is populated
|
||
* through a `data-icon` attribute and the `:after` pseudo-element, e.g.:
|
||
*
|
||
<a href=#><i class=icon data-icon=""></i> View your favourites</a>
|
||
*
|
||
* Where ‘’ might map to a star in your particular icon font.
|
||
*
|
||
* These all require extension in your theme stylesheet, e.g., in your own CSS:
|
||
*
|
||
.sprite{
|
||
background-image:url(path/to/your/sprite.png);
|
||
}
|
||
.sprite--link{ background-position:0 0 ; }
|
||
.sprite--star{ background-position:0 -16px; }
|
||
*
|
||
* Demo: jsfiddle.net/inuitcss/6TKuS
|
||
*
|
||
*/
|
||
.sprite,
|
||
.icon{
|
||
display:inline-block;
|
||
line-height:1;
|
||
position:relative;
|
||
vertical-align:middle;
|
||
zoom:1;
|
||
/**
|
||
* So using `.icon` on certain elements doesn’t make a visual difference.
|
||
*/
|
||
font-style:normal;
|
||
font-weight:normal;
|
||
/**
|
||
* So icons added using `.icon` sit in the centre of the element.
|
||
*/
|
||
text-align:center;
|
||
}
|
||
.sprite{
|
||
/**
|
||
* The typical size of most icons. Override in your theme stylesheet.
|
||
*/
|
||
width: 16px;
|
||
height:16px;
|
||
top:-1px;
|
||
|
||
/*
|
||
* H5BP method image replacement:
|
||
* github.com/h5bp/html5-boilerplate/commit/adecc5da035d6d76b77e3fa95c6abde841073da2
|
||
*/
|
||
overflow:hidden;
|
||
*text-indent:-9999px;
|
||
|
||
&:before{
|
||
content:"";
|
||
display:block;
|
||
width:0;
|
||
height:100%;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Set up icon font
|
||
*/
|
||
.icon{
|
||
font-size:16px;
|
||
/**
|
||
* Place the icon in a box the exact same dimensions as the icon itself.
|
||
*/
|
||
width:1em;
|
||
height:1em;
|
||
|
||
&:before{
|
||
content:attr(data-icon);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Icon size modifiers.
|
||
*/
|
||
.icon--large { font-size:32px; }
|
||
.icon--huge { font-size:64px; }
|
||
.icon--natural { font-size:inherit; }
|
||
|
||
}//endif
|