ungleich-staticcms/assets/u/static/popper.js-1.16.0/docs/_sass/libs/_mixins.scss

66 lines
1.7 KiB
SCSS
Executable File

/// 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;
}
}