/// Makes an element's :before pseudoelement a FontAwesome icon. /// @param {string} $content Optional content value to use. @mixin icon($content: false) { text-decoration: none; &:before { @if $content { content: $content; } -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: FontAwesome; font-style: normal; font-weight: normal; text-transform: none !important; } } /// Applies padding to an element, taking the current element-margin value into account. /// @param {mixed} $tb Top/bottom padding. /// @param {mixed} $lr Left/right padding. /// @param {list} $pad Optional extra padding (in the following order top, right, bottom, left) /// @param {bool} $important If true, adds !important. @mixin padding($tb, $lr, $pad: (0,0,0,0), $important: null) { @if $important { $important: '!important'; } padding: ($tb + nth($pad,1)) ($lr + nth($pad,2)) max(0.1em, $tb - _size(element-margin) + nth($pad,3)) ($lr + nth($pad,4)) #{$important}; } /// Stripe builder /// @author Hugo Giraudel /// @param {Direction} $direction - Gradient direction /// @param {List} $colors - List of colors /// @output `background-image` if several colors, `background-color` if only one @mixin stripes($direction, $colors) { $length: length($colors); @if $length > 1 { $stripes: (); @for $i from 1 through $length { $stripe: (100% / $length) * ($i - 1); @if $i > 1 { $stripes: append($stripes, nth($colors, $i - 1) $stripe, comma); } $stripes: append($stripes, nth($colors, $i) $stripe, comma); } background-image: linear-gradient($direction, $stripes); } @else if $length == 1 { background-color: $colors; } }