Update to site
This commit is contained in:
parent
3345fa5897
commit
b0bdfe2fe9
244 changed files with 11618 additions and 12 deletions
40
sass/inuitcss/objects/_icon-text.scss
Normal file
40
sass/inuitcss/objects/_icon-text.scss
Normal file
|
@ -0,0 +1,40 @@
|
|||
@if $use-icon-text == true{
|
||||
|
||||
/*------------------------------------*\
|
||||
$ICON-TEXT
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* For text-links etc that have an icon with them. Sometimes whitespace would
|
||||
* suffice in creating a gap between the icon and text, for example:
|
||||
*
|
||||
<a href=#>
|
||||
<i class="s s--help"></i> Help & support
|
||||
</a>
|
||||
*
|
||||
* However we will sometimes want a larger, explicity set gap:
|
||||
<a href=# class=icon-text>
|
||||
<i class="icon-text__icon s s--help"></i>Help & support
|
||||
</a>
|
||||
*
|
||||
* Demo: jsfiddle.net/inuitcss/Q6Lbf
|
||||
*
|
||||
*/
|
||||
.icon-text > .icon-text__icon{
|
||||
margin-right:$half-spacing-unit / 2;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* We can also reverse the direction of the margin for icons that appear to the
|
||||
* right of the text content, thus:
|
||||
*
|
||||
<a href=# class=icon-text--rev>
|
||||
Help & support<i class="icon-text__icon s s--help"></i>
|
||||
</a>
|
||||
*
|
||||
*/
|
||||
.icon-text--rev > .icon-text__icon{
|
||||
margin-left:$half-spacing-unit / 2;
|
||||
}
|
||||
|
||||
}//endif
|
Loading…
Add table
Add a link
Reference in a new issue