104 lines
3.8 KiB
SCSS
104 lines
3.8 KiB
SCSS
|
//************************************************************************//
|
||
|
|
// Background property for adding multiple backgrounds using shorthand
|
||
|
|
// notation.
|
||
|
|
//************************************************************************//
|
||
|
|
|
||
|
|
@mixin background(
|
||
|
|
$background-1 , $background-2: false,
|
||
|
|
$background-3: false, $background-4: false,
|
||
|
|
$background-5: false, $background-6: false,
|
||
|
|
$background-7: false, $background-8: false,
|
||
|
|
$background-9: false, $background-10: false,
|
||
|
|
$fallback: false
|
||
|
|
) {
|
||
|
|
$backgrounds: compact($background-1, $background-2,
|
||
|
|
$background-3, $background-4,
|
||
|
|
$background-5, $background-6,
|
||
|
|
$background-7, $background-8,
|
||
|
|
$background-9, $background-10);
|
||
|
|
|
||
|
|
$fallback-color: false;
|
||
|
|
@if (type-of($fallback) == color) or ($fallback == "transparent") {
|
||
|
|
$fallback-color: $fallback;
|
||
|
|
}
|
||
|
|
@else {
|
||
|
|
$fallback-color: _extract-background-color($backgrounds);
|
||
|
|
}
|
||
|
|
|
||
|
|
@if $fallback-color {
|
||
|
|
background-color: $fallback-color;
|
||
|
|
}
|
||
|
|
background: _background-add-prefix($backgrounds, webkit);
|
||
|
|
background: _background-add-prefix($backgrounds);
|
||
|
|
}
|
||
|
|
|
||
|
|
@function _extract-background-color($backgrounds) {
|
||
|
|
$final-bg-layer: nth($backgrounds, length($backgrounds));
|
||
|
|
@if type-of($final-bg-layer) == list {
|
||
|
|
@for $i from 1 through length($final-bg-layer) {
|
||
|
|
$value: nth($final-bg-layer, $i);
|
||
|
|
@if type-of($value) == color {
|
||
|
|
@return $value;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
@function _background-add-prefix($backgrounds, $vendor: false) {
|
||
|
|
$backgrounds-prefixed: ();
|
||
|
|
|
||
|
|
@for $i from 1 through length($backgrounds) {
|
||
|
|
$shorthand: nth($backgrounds, $i); // Get member for current index
|
||
|
|
$type: type-of($shorthand); // Get type of variable - List (gradient) or String (image)
|
||
|
|
|
||
|
|
// If shorthand is a list (gradient)
|
||
|
|
@if $type == list {
|
||
|
|
$first-member: nth($shorthand, 1); // Get first member of shorthand
|
||
|
|
|
||
|
|
// Linear Gradient
|
||
|
|
@if index(linear radial, nth($first-member, 1)) {
|
||
|
|
$gradient-type: nth($first-member, 1); // linear || radial
|
||
|
|
$gradient-args: false;
|
||
|
|
$gradient-positions: false;
|
||
|
|
$shorthand-start: false;
|
||
|
|
@if type-of($first-member) == list { // Linear gradient plus additional shorthand values - lg(red,orange)repeat,...
|
||
|
|
$gradient-positions: nth($first-member, 2);
|
||
|
|
$gradient-args: nth($first-member, 3);
|
||
|
|
$shorthand-start: 2;
|
||
|
|
}
|
||
|
|
@else { // Linear gradient only - lg(red,orange),...
|
||
|
|
$gradient-positions: nth($shorthand, 2);
|
||
|
|
$gradient-args: nth($shorthand, 3); // Get gradient (red, blue)
|
||
|
|
}
|
||
|
|
|
||
|
|
$gradient-positions: _gradient-positions-parser($gradient-type, $gradient-positions);
|
||
|
|
$gradient: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
|
||
|
|
|
||
|
|
// Append any additional shorthand args to gradient
|
||
|
|
@if $shorthand-start {
|
||
|
|
@for $j from $shorthand-start through length($shorthand) {
|
||
|
|
$gradient: join($gradient, nth($shorthand, $j), space);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
$backgrounds-prefixed: append($backgrounds-prefixed, $gradient, comma);
|
||
|
|
}
|
||
|
|
// Image with additional properties
|
||
|
|
@else {
|
||
|
|
$backgrounds-prefixed: append($backgrounds-prefixed, $shorthand, comma);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// If shorthand is a simple string (color or image)
|
||
|
|
@else if $type == string {
|
||
|
|
$backgrounds-prefixed: join($backgrounds-prefixed, $shorthand, comma);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@return $backgrounds-prefixed;
|
||
|
|
}
|
||
|
|
|
||
|
|
//Examples:
|
||
|
|
//@include background(linear-gradient(top, orange, red));
|
||
|
|
//@include background(radial-gradient(circle at 40% 40%, orange, red));
|
||
|
|
//@include background(url("/images/a.png") no-repeat, linear-gradient(orange, red));
|
||
|
|
//@include background(url("image.png") center center, linear-gradient(orange, red), url("image.png"));
|