Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
99 lines (91 sloc) 2.298 kb
@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&hellip;</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="&#xF000;"></i> View your favourites</a>
*
* Where ‘&#xF000;’ 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
Jump to Line
Something went wrong with that request. Please try again.