mirror of
https://github.com/home-assistant/home-assistant.io.git
synced 2025-06-04 09:16:49 +00:00
41 lines
981 B
SCSS
41 lines
981 B
SCSS
@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
|