Make border-image play nicely with new gradient changes

thoughtbot · Apr 21, 2013 · 669c5f7 · 669c5f7
1 parent f96d63d
commit 669c5f7
Showing 1 changed file with 18 additions and 16 deletions.
diff --git 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));
+