Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

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

  • Loading branch information...
commit e2c505fa31017948305cb31814e38b5e815ac136 1 parent cb8b731
Phil LaPier authored
View
33 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;
}
View
10 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;
}
View
55 app/assets/stylesheets/functions/_radial-gradient.scss
@@ -1,10 +1,58 @@
// 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);
@@ -12,4 +60,3 @@
@return $type-gradient;
}
-
Please sign in to comment.
Something went wrong with that request. Please try again.