Permalink
Browse files

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

…gradient
  • Loading branch information...
1 parent 5e4cea2 commit f54da8fd4572e5d66b41138e6414ceb1cabd9493 Phil LaPier committed Oct 14, 2011
@@ -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";
@@ -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%);
-
@@ -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);
@@ -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;
+}

0 comments on commit f54da8f

Please sign in to comment.