Carry over improved radial-gradient mixin to radial-gradient function

togakangaroo · Mar 16, 2012 · e2c505f · e2c505f
1 parent cb8b731
commit e2c505f
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 19 deletions.
diff --git a/app/assets/stylesheets/css3/_radial-gradient.scss b/app/assets/stylesheets/css3/_radial-gradient.scss
@@ -14,32 +14,39 @@
 
   @each $value in $G1, $G2 {
     $first-val: nth($value, 1);
-    $pos-type: type-of($first-val);
+    $pos-type:  type-of($first-val);
 
     @if ($pos-type != color) or ($first-val != "transparent") {
       @if ($pos-type == number)
-       or ($first-val == "center")
-       or ($first-val == "top")
-       or ($first-val == "right")
-       or ($first-val == "bottom")
-       or ($first-val == "left") {
+      or ($first-val == "center")
+      or ($first-val == "top")
+      or ($first-val == "right")
+      or ($first-val == "bottom")
+      or ($first-val == "left") {
 
         $pos: $value;
-        // @debug $pos;
 
         @if $pos == $G1 {
           $G1: false;
         }
       }
-      @else if ($first-val == "ellipse") or ($first-val == "circle")
-        or ($first-val == "closest-side")  or ($first-val == "closest-corner")
-        or ($first-val == "farthest-side") or ($first-val == "farthest-corner")
-        or ($first-val == "contain") or ($first-val == "cover") {
-          $shape-size: $value;
+
+      @else if
+         ($first-val == "ellipse")
+      or ($first-val == "circle")
+      or ($first-val == "closest-side")
+      or ($first-val == "closest-corner")
+      or ($first-val == "farthest-side")
+      or ($first-val == "farthest-corner")
+      or ($first-val == "contain")
+      or ($first-val == "cover") {
+
+        $shape-size: $value;
 
         @if $value == $G1 {
           $G1: false;
         }
+
         @else if $value == $G2 {
           $G2: false;
         }
@@ -49,10 +56,8 @@
 
   $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
 
-  // Set $G1 as the default fallback color
   $fallback-color: nth($G1, 1);
 
-  // If $fallback is a color use that color as the fallback color
   @if (type-of($fallback) == color) or ($fallback == "transparent") {
     $fallback-color: $fallback;
   }

diff --git a/app/assets/stylesheets/functions/_deprecated-webkit-gradient.scss b/app/assets/stylesheets/functions/_deprecated-webkit-gradient.scss
@@ -1,6 +1,9 @@
 // Render Deprecated Webkit Gradient - Linear || Radial
 //************************************************************************//
-@function deprecated-webkit-gradient($type, $deprecated-pos1, $deprecated-pos2, $full, $deprecated-radius1: false, $deprecated-radius2: false) {
+@function deprecated-webkit-gradient($type,
+                                     $deprecated-pos1, $deprecated-pos2,
+                                     $full,
+                                     $deprecated-radius1: false, $deprecated-radius2: false) {
   $gradient-list: ();
   $gradient: false;
   $full-length: length($full);
@@ -14,13 +17,16 @@
       $color-stop: color-stop(nth($gradient, 2), nth($gradient, 1));
       $gradient-list: join($gradient-list, $color-stop, comma);
     }
+
     @else {
       @if $i == $full-length {
         $percentage: 100%;
       }
+
       @else {
         $percentage: ($i - 1) * (100 / ($full-length - 1)) + "%";
       }
+
       $color-stop: color-stop(unquote($percentage), $gradient);
       $gradient-list: join($gradient-list, $color-stop, comma);
     }
@@ -29,8 +35,10 @@
   @if $type == radial {
     $gradient: -webkit-gradient(radial, $deprecated-pos1, $deprecated-radius1, $deprecated-pos2, $deprecated-radius2, $gradient-list);
   }
+
   @else if $type == linear {
     $gradient: -webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $gradient-list);
   }
+
   @return $gradient;
 }
diff --git a/app/assets/stylesheets/functions/_radial-gradient.scss b/app/assets/stylesheets/functions/_radial-gradient.scss
@@ -1,15 +1,62 @@
 // This function is required and used by the background-image mixin.
-@function radial-gradient($pos, $shape-size,
-                       $G1,        $G2,
+@function radial-gradient($G1,        $G2,
                        $G3: false, $G4: false,
                        $G5: false, $G6: false,
                        $G7: false, $G8: false,
-                       $G9: false, $G10: false) {
+                       $G9: false, $G10: false,
+                       $pos: 50% 50%,
+                       $shape-size: ellipse cover,
+                       $deprecated-pos1: center center,
+                       $deprecated-pos2: center center,
+                       $deprecated-radius1: 0,
+                       $deprecated-radius2: 50,
+                       $fallback: false) {
+
+  @each $value in $G1, $G2 {
+    $first-val: nth($value, 1);
+    $pos-type:  type-of($first-val);
+
+    @if ($pos-type != color) or ($first-val != "transparent") {
+      @if ($pos-type == number)
+      or ($first-val == "center")
+      or ($first-val == "top")
+      or ($first-val == "right")
+      or ($first-val == "bottom")
+      or ($first-val == "left") {
+
+        $pos: $value;
+
+        @if $pos == $G1 {
+          $G1: false;
+        }
+      }
+
+      @else if
+         ($first-val == "ellipse")
+      or ($first-val == "circle")
+      or ($first-val == "closest-side")
+      or ($first-val == "closest-corner")
+      or ($first-val == "farthest-side")
+      or ($first-val == "farthest-corner")
+      or ($first-val == "contain")
+      or ($first-val == "cover") {
+
+        $shape-size: $value;
+
+        @if $value == $G1 {
+          $G1: false;
+        }
+
+        @else if $value == $G2 {
+          $G2: false;
+        }
+      }
+    }
+  }
 
   $type: radial;
   $gradient: compact($pos, $shape-size, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
   $type-gradient: append($type, $gradient, comma);
 
   @return $type-gradient;
 }
-