From 669c5f7a461f0cea5b221afc48405542e2929b44 Mon Sep 17 00:00:00 2001 From: Phil LaPier Date: Sun, 21 Apr 2013 15:53:21 -0400 Subject: [PATCH] Make border-image play nicely with new gradient changes --- .../stylesheets/css3/_border-image.scss | 34 ++++++++++--------- 1 file changed, 18 insertions(+), 16 deletions(-) diff --git a/app/assets/stylesheets/css3/_border-image.scss b/app/assets/stylesheets/css3/_border-image.scss index 879395a7c..1fff212df 100644 --- a/app/assets/stylesheets/css3/_border-image.scss +++ b/app/assets/stylesheets/css3/_border-image.scss @@ -6,18 +6,18 @@ } @function _border-add-prefix($images, $vendor: false) { - $border-image: (); + $border-image: null; $images-type: type-of(nth($images, 1)); $first-var: nth(nth($images, 1), 1); // Get type of Gradient (Linear || radial) // If input is a gradient @if $images-type == string { @if ($first-var == "linear") or ($first-var == "radial") { - @for $i from 2 through length($images) { - $gradient-type: nth($images, 1); // Get type of gradient (linear || radial) - $gradient-args: nth($images, $i); // Get actual gradient (red, blue) - $border-image: _render-gradients($gradient-args, $gradient-type, $vendor); - } + $gradient-type: nth($images, 1); // Get type of gradient (linear || radial) + $gradient-pos: nth($images, 2); // Get gradient position + $gradient-args: nth($images, 3); // Get actual gradient (red, blue) + $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos); + $border-image: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor); } // If input is a URL @else { @@ -26,17 +26,18 @@ } // If input is gradient or url + additional args @else if $images-type == list { - @for $i from 1 through length($images) { - $type: type-of(nth($images, $i)); // Get type of variable - List or String + $type: type-of(nth($images, 1)); // 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) - $border-image: _render-gradients($gradient-args, $gradient-type, $vendor); - } - // If variable is a string - Image or number - @else if ($type == string) or ($type == number) { + // If variable is a list - Gradient + @if $type == list { + $gradient: nth($images, 1); + $gradient-type: nth($gradient, 1); // Get type of gradient (linear || radial) + $gradient-pos: nth($gradient, 2); // Get gradient position + $gradient-args: nth($gradient, 3); // Get actual gradient (red, blue) + $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos); + $border-image: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor); + + @for $i from 2 through length($images) { $border-image: append($border-image, nth($images, $i)); } } @@ -51,3 +52,4 @@ // @include border-image(linear-gradient(45deg, orange, yellow) stretch); // @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round); // @include border-image(radial-gradient(top, cover, orange, yellow, orange)); +