Refactored deprecated-gradient decleration. Added support for radial-…

…gradient
thoughtbot · Oct 14, 2011 · f54da8f · f54da8f
1 parent 5e4cea2
commit f54da8f
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 44 deletions.
diff --git a/app/assets/stylesheets/_bourbon.scss b/app/assets/stylesheets/_bourbon.scss
@@ -2,6 +2,7 @@
 @import "functions/golden-ratio";
 @import "functions/grid-width";
 @import "functions/tint-shade";
+@import "functions/deprecated-webkit-gradient";
 
 // CSS3 Mixins
 @import "css3/animation";

diff --git a/app/assets/stylesheets/css3/_linear-gradient.scss b/app/assets/stylesheets/css3/_linear-gradient.scss
@@ -16,59 +16,16 @@
   $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
 
   background-color:  nth($G1, 1);
-  background-image:     deprecated-webkit-gradient($full); // Safari <= 5.0
+  background-image: deprecated-webkit-gradient(linear, $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);
   background-image:       -o-linear-gradient($pos, $full);
   background-image: unquote("linear-gradient(#{$pos}, #{$full})");
 }
 
-// Render Deprecated Webkit Gradient
-//************************************************************************//
-@function deprecated-webkit-gradient($full) {
-  $gradient-list: ();
-  $gradient: false;
-
-  @if length($full) > 2 {
-    @each $gradient in $full {
-      @if length($gradient) == 2 {
-        $color-stop: color-stop(join(nth($gradient, 2), nth($gradient, 1), comma));
-        $gradient-list: join($gradient-list, $color-stop, comma);
-      }
-      @else {
-        $color-stop: color-stop($gradient);
-        $gradient-list: join($gradient-list, $color-stop, comma);
-        @warn "When defining more 3 or more color-stops, you must define stop values. (e.g. red 0%, orange 50%, pink 75%)"
-      }
-    }
-    $gradient: -webkit-gradient(linear, left top, left bottom, $gradient-list);
-  }
-
-  @else if length($full) == 2 {
-    @each $gradient in $full {
-      @if length($gradient) == 2 {
-        $color-stop: color-stop(join(nth($gradient, 2), nth($gradient, 1), comma));
-        $gradient-list: join($gradient-list, $color-stop, comma);
-      }
-      @else {
-        @if $gradient == nth($full, 1) {
-          $color-stop: from($gradient);
-          $gradient-list: join($gradient-list, $color-stop, comma);
-        }
-        @else if $gradient == nth($full, 2) {
-          $color-stop: to($gradient);
-          $gradient-list: join($gradient-list, $color-stop, comma);
-        }
-      }
-    }
-    $gradient: -webkit-gradient(linear, left top, left bottom, $gradient-list);
-  }
-  @return $gradient;
-}
 
 // Usage: Gradient position is optional, default is top. Position can be a degree. Color stops are optional as well.
 // @include linear-gradient(#1e5799, #2989d8);
 // @include linear-gradient(top, #1e5799 0%, #2989d8 50%);
 // @include linear-gradient(50deg, rgba(10, 10, 10, 0.5) 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
-
diff --git a/app/assets/stylesheets/css3/_radial-gradient.scss b/app/assets/stylesheets/css3/_radial-gradient.scss
@@ -9,6 +9,7 @@
   $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
 
   background-color:  nth($G1, 1);
+  background-image:          deprecated-webkit-gradient(radial, $full); // 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
@@ -0,0 +1,36 @@
+// Render Deprecated Webkit Gradient - Linear || Radial
+//************************************************************************//
+@function deprecated-webkit-gradient($type, $full) {
+  $gradient-list: ();
+  $gradient: false;
+  $full-length: length($full);
+  $percentage: false;
+  $gradient-type: $type;
+
+  @for $i from 1 through $full-length {
+    $gradient: nth($full, $i);
+
+    @if length($gradient) == 2 {
+      $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);
+  }
+  @else if $type == linear {
+    $gradient: -webkit-gradient(linear, left top, left bottom, $gradient-list);
+  }
+  @return $gradient;
+}