56 lines
1.7 KiB
SCSS
56 lines
1.7 KiB
SCSS
|
//************************************************************************//
|
||
|
|
// Background property for adding multiple backgrounds using shorthand
|
||
|
|
// notation.
|
||
|
|
//************************************************************************//
|
||
|
|
|
||
|
|
@mixin background($backgrounds...) {
|
||
|
|
$webkit-backgrounds: ();
|
||
|
|
$spec-backgrounds: ();
|
||
|
|
|
||
|
|
@each $background in $backgrounds {
|
||
|
|
$webkit-background: ();
|
||
|
|
$spec-background: ();
|
||
|
|
$background-type: type-of($background);
|
||
|
|
|
||
|
|
@if $background-type == string or list {
|
||
|
|
$background-str: if($background-type == list, nth($background, 1), $background);
|
||
|
|
|
||
|
|
$url-str: str-slice($background-str, 0, 3);
|
||
|
|
$gradient-type: str-slice($background-str, 0, 6);
|
||
|
|
|
||
|
|
@if $url-str == "url" {
|
||
|
|
$webkit-background: $background;
|
||
|
|
$spec-background: $background;
|
||
|
|
}
|
||
|
|
|
||
|
|
@else if $gradient-type == "linear" {
|
||
|
|
$gradients: _linear-gradient-parser("#{$background}");
|
||
|
|
$webkit-background: map-get($gradients, webkit-image);
|
||
|
|
$spec-background: map-get($gradients, spec-image);
|
||
|
|
}
|
||
|
|
|
||
|
|
@else if $gradient-type == "radial" {
|
||
|
|
$gradients: _radial-gradient-parser("#{$background}");
|
||
|
|
$webkit-background: map-get($gradients, webkit-image);
|
||
|
|
$spec-background: map-get($gradients, spec-image);
|
||
|
|
}
|
||
|
|
|
||
|
|
@else {
|
||
|
|
$webkit-background: $background;
|
||
|
|
$spec-background: $background;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@else {
|
||
|
|
$webkit-background: $background;
|
||
|
|
$spec-background: $background;
|
||
|
|
}
|
||
|
|
|
||
|
|
$webkit-backgrounds: append($webkit-backgrounds, $webkit-background, comma);
|
||
|
|
$spec-backgrounds: append($spec-backgrounds, $spec-background, comma);
|
||
|
|
}
|
||
|
|
|
||
|
|
background: $webkit-backgrounds;
|
||
|
|
background: $spec-backgrounds;
|
||
|
|
}
|