Merge branch 'vanilla-radial-gradient'

togakangaroo · Mar 16, 2012 · 94506ea · 94506ea
2 parents 3342577 + e2c505f
commit 94506ea
Show file tree

Hide file tree

Showing 4 changed files with 115 additions and 13 deletions.
diff --git a/app/assets/stylesheets/css3/_linear-gradient.scss b/app/assets/stylesheets/css3/_linear-gradient.scss
@@ -3,6 +3,8 @@
                        $G5: false, $G6: false,
                        $G7: false, $G8: false,
                        $G9: false, $G10: false,
+                       $deprecated-pos1: left top,
+                       $deprecated-pos2: left bottom,
                        $fallback: false) {
   // Detect what type of value exists in $pos
   $pos-type: type-of(nth($pos, 1));
@@ -25,7 +27,7 @@
   }
 
   background-color: $fallback-color;
-  background-image: deprecated-webkit-gradient(linear, $full); // Safari <= 5.0
+  background-image: deprecated-webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $full); // Safari <= 5.0
   background-image:  -webkit-linear-gradient($pos, $full); // Safari 5.1+, Chrome
   background-image:     -moz-linear-gradient($pos, $full);
   background-image:      -ms-linear-gradient($pos, $full);

diff --git a/app/assets/stylesheets/css3/_radial-gradient.scss b/app/assets/stylesheets/css3/_radial-gradient.scss
@@ -1,24 +1,69 @@
 // Requires Sass 3.1+
-@mixin radial-gradient($pos, $shape-size,
-                       $G1,        $G2,
+@mixin radial-gradient($G1,        $G2,
                        $G3: false, $G4: false,
                        $G5: false, $G6: false,
                        $G7: false, $G8: 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: 460,
                        $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;
+        }
+      }
+    }
+  }
+
   $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;
   }
 
   background-color:  $fallback-color;
-  background-image:          deprecated-webkit-gradient(radial, $full); // Safari <= 5.0
+  background-image: deprecated-webkit-gradient(radial, $deprecated-pos1, $deprecated-pos2, $full, $deprecated-radius1, $deprecated-radius2); // Safari <= 5.0
   background-image:  -webkit-radial-gradient($pos, $shape-size, $full);
   background-image:     -moz-radial-gradient($pos, $shape-size, $full);
   background-image:      -ms-radial-gradient($pos, $shape-size, $full);

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, $full) {
+@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,23 +17,28 @@
       $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);
     }
   }
 
   @if $type == radial {
-    $gradient: -webkit-gradient(radial, center center, 0, center center, 460, $gradient-list);
+    $gradient: -webkit-gradient(radial, $deprecated-pos1, $deprecated-radius1, $deprecated-pos2, $deprecated-radius2, $gradient-list);
   }
+
   @else if $type == linear {
-    $gradient: -webkit-gradient(linear, left top, left bottom, $gradient-list);
+    $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;
 }
-