stylesheets/bourbon/css3/_background-image.scss in bourbon-compass-3.1.1 vs stylesheets/bourbon/css3/_background-image.scss in bourbon-compass-3.1.3

- old
+ new

@@ -2,40 +2,44 @@ // Background-image property for adding multiple background images with // gradients, or for stringing multiple gradients together. //************************************************************************// @mixin background-image($images...) { - background-image: add-prefix($images, webkit); - background-image: add-prefix($images, moz); - background-image: add-prefix($images, ms); - background-image: add-prefix($images, o); - background-image: add-prefix($images); + background-image: _add-prefix($images, webkit); + background-image: _add-prefix($images); } - -@function add-prefix($images, $vendor: false) { +@function _add-prefix($images, $vendor: false) { $images-prefixed: (); - + $gradient-positions: false; @for $i from 1 through length($images) { $type: type-of(nth($images, $i)); // Get type of variable - List or String // If variable is a list - Gradient @if $type == list { - $gradient-type: nth(nth($images, $i), 1); // Get type of gradient (linear || radial) - $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue) + $gradient-type: nth(nth($images, $i), 1); // linear or radial + $gradient-pos: null; + $gradient-args: null; - $gradient: render-gradients($gradient-args, $gradient-type, $vendor); + @if ($gradient-type == linear) or ($gradient-type == radial) { + $gradient-pos: nth(nth($images, $i), 2); // Get gradient position + $gradient-args: nth(nth($images, $i), 3); // Get actual gradient (red, blue) + } + @else { + $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue) + } + + $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos); + $gradient: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor); $images-prefixed: append($images-prefixed, $gradient, comma); } - // If variable is a string - Image @else if $type == string { $images-prefixed: join($images-prefixed, nth($images, $i), comma); } } @return $images-prefixed; } - //Examples: //@include background-image(linear-gradient(top, orange, red)); //@include background-image(radial-gradient(50% 50%, cover circle, orange, red)); //@include background-image(url("/images/a.png"), linear-gradient(orange, red));