Skip to content
Browse files

Bring radial-gradient function and mixin up to spec

  • Loading branch information...
1 parent b343003 commit c9c10afeef6f0f6b893164c5d77b2ed036b939a3 Phil LaPier committed
View
5 app/assets/stylesheets/_bourbon.scss 100755 → 100644
@@ -1,5 +1,8 @@
// Custom Helpers
-@import "helpers/calc-gradient-positions";
+@import "helpers/linear-positions-parser";
+@import "helpers/radial-arg-parser";
+@import "helpers/radial-positions-parser";
+@import "helpers/shape-size-stripper";
// Custom Functions
@import "functions/compact";
View
11 app/assets/stylesheets/css3/_background-image.scss
@@ -9,10 +9,10 @@
}
@function add-prefix($images, $vendor: false) {
- @debug $images;
$images-prefixed: ();
$gradient-positions: false;
+ // REMOVE FOR LOOP??
@for $i from 1 through length($images) {
$type: type-of(nth($images, $i)); // Get type of variable - List or String
@@ -22,7 +22,7 @@
$gradient-pos: null;
$gradient-args: null;
- @if $gradient-type == linear {
+ @if ($gradient-type == linear) or ($gradient-type == radial) {
$gradient-pos: nth(nth($images, $i), 2); // Get gradient position
$gradient-args: nth(nth($images, $i), 3); // Get actual gradient (red, blue)
}
@@ -31,8 +31,10 @@
}
@if ($gradient-pos) and ($gradient-type == linear) and (type-of($gradient-pos) != color) and (type-of($gradient-pos) != number) {
- @debug "happing";
- $gradient-positions: calc-gradient-positions($gradient-pos);
+ $gradient-positions: _linear-positions-parser($gradient-pos);
+ }
+ @else if ($gradient-pos) and ($gradient-type == radial) and (type-of($gradient-pos) != color) and (type-of($gradient-pos) != number) {
+ $gradient-positions: _radial-positions-parser($gradient-pos);
}
$gradient: render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
@@ -47,6 +49,7 @@
@return $images-prefixed;
}
+
//Examples:
//@include background-image(linear-gradient(top, orange, red));
//@include background-image(radial-gradient(50% 50%, cover circle, orange, red));
View
2 app/assets/stylesheets/css3/_linear-gradient.scss
@@ -19,7 +19,7 @@
}
@if $pos {
- $positions: calc-gradient-positions($pos);
+ $positions: _linear-positions-parser($pos);
$pos-degree: nth($positions, 1);
$pos-spec: nth($positions, 2);
}
View
72 app/assets/stylesheets/css3/_radial-gradient.scss
@@ -4,58 +4,25 @@
$G5: false, $G6: false,
$G7: false, $G8: false,
$G9: false, $G10: false,
- $pos: 50% 50%,
- $shape-size: ellipse cover,
+ $pos: null,
+ $shape-size: null,
$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;
- }
- }
- }
- }
+ $data: _radial-arg-parser($G1, $G2, $pos, $shape-size);
+ $G1: nth($data, 1);
+ $G2: nth($data, 2);
+ $pos: nth($data, 3);
+ $shape-size: nth($data, 4);
$full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
+ // Strip deprecated cover/contain for spec
+ $shape-size-spec: _shape-size-stripper($shape-size);
+
// Set $G1 as the default fallback color
$first-color: nth($full, 1);
$fallback-color: nth($first-color, 1);
@@ -64,15 +31,14 @@
$fallback-color: $fallback;
}
+ // Add Commas and spaces
+ $shape-size: if($shape-size, '#{$shape-size}, ', null);
+ $pos: if($pos, '#{$pos}, ', null);
+ $pos-spec: if($pos, 'at #{$pos}', null);
+ $shape-size-spec: if(($shape-size-spec != ' ') and ($pos == null), '#{$shape-size-spec}, ', '#{$shape-size-spec} ');
+
background-color: $fallback-color;
- 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);
- background-image: -o-radial-gradient($pos, $shape-size, $full);
- background-image: unquote("radial-gradient(#{$pos}, #{$shape-size}, #{$full})");
+ background-image: deprecated-webkit-gradient(radial, $deprecated-pos1, $deprecated-pos2, $full, $deprecated-radius1, $deprecated-radius2); // Safari <= 5.0 && IOS 4
+ background-image: -webkit-radial-gradient(unquote(#{$pos}#{$shape-size}#{$full}));
+ background-image: unquote("radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full})");
}
-
-// Usage: Gradient position and shape-size are required. Color stops are optional.
-// @include radial-gradient(50% 50%, circle cover, #1e5799, #efefef);
-// @include radial-gradient(50% 50%, circle cover, #eee 10%, #1e5799 30%, #efefef);
View
56 app/assets/stylesheets/functions/_radial-gradient.scss
@@ -4,54 +4,20 @@
$G5: false, $G6: false,
$G7: false, $G8: false,
$G9: false, $G10: false,
- $pos: 50% 50%,
- $shape-size: ellipse cover) {
+ $pos: null,
+ $shape-size: null) {
- @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;
- }
- }
- }
- }
+ $data: _radial-arg-parser($G1, $G2, $pos, $shape-size);
+ $G1: nth($data, 1);
+ $G2: nth($data, 2);
+ $pos: nth($data, 3);
+ $shape-size: nth($data, 4);
$type: radial;
- $gradient: compact($pos, $shape-size, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
- $type-gradient: append($type, $gradient, comma);
+ $gradient: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
+ $type-gradient: $type, $shape-size $pos, $gradient;
@return $type-gradient;
}
+
+
View
22 app/assets/stylesheets/functions/_render-gradients.scss
@@ -1,22 +1,28 @@
// User for linear and radial gradients within background-image or border-image properties
@function render-gradients($gradient-positions, $gradients, $gradient-type, $vendor: false) {
- $pos-degree: null;
- $pos-spec: null;
+ $pre-spec: null;
+ $spec: null;
+ $vendor-gradients: null;
- @if $gradient-positions {
- $pos-degree: nth($gradient-positions, 1);
- $pos-spec: nth($gradient-positions, 2);
+ @if $gradient-type == linear {
+ @if $gradient-positions {
+ $pre-spec: nth($gradient-positions, 1);
+ $spec: nth($gradient-positions, 2);
+ }
}
- $vendor-gradients: false;
+ @else if $gradient-type == radial {
+ $pre-spec: nth($gradient-positions, 1);
+ $spec: nth($gradient-positions, 2);
+ }
@if $vendor {
- $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient(#{$pos-degree} $gradients);
+ $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient(#{$pre-spec} $gradients);
}
@else if $vendor == false {
- $vendor-gradients: "#{$gradient-type}-gradient(#{$pos-spec} #{$gradients})";
+ $vendor-gradients: "#{$gradient-type}-gradient(#{$spec} #{$gradients})";
$vendor-gradients: unquote($vendor-gradients);
}
@return $vendor-gradients;
View
2 ...heets/helpers/calc-gradient-position.scss → ...ets/helpers/_linear-positions-parser.scss
@@ -1,4 +1,4 @@
-@function calc-gradient-positions($pos) {
+@function _linear-positions-parser($pos) {
$type: type-of(nth($pos, 1));
$spec: null;
$degree: null;
View
69 app/assets/stylesheets/helpers/_radial-arg-parser.scss
@@ -0,0 +1,69 @@
+@function _radial-arg-parser($G1, $G2, $pos, $shape-size) {
+ @each $value in $G1, $G2 {
+ $first-val: nth($value, 1);
+ $pos-type: type-of($first-val);
+ $spec-at-index: null;
+
+ // Determine if spec was passed to mixin
+ @if type-of($value) == list {
+ $spec-at-index: if(index($value, at), index($value, at), false);
+ }
+ @if $spec-at-index {
+ @if $spec-at-index > 1 {
+ @for $i from 1 through ($spec-at-index - 1) {
+ $shape-size: $shape-size nth($value, $i);
+ }
+ @for $i from ($spec-at-index + 1) through length($value) {
+ $pos: $pos nth($value, $i);
+ }
+ }
+ @else if $spec-at-index == 1 {
+ @for $i from ($spec-at-index + 1) through length($value) {
+ $pos: $pos nth($value, $i);
+ }
+ }
+ $G1: false;
+ }
+
+ // If not spec calculate correct values
+ @else {
+ @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;
+ }
+ }
+ }
+ }
+ }
+ @return $G1, $G2, $pos, $shape-size;
+}
View
18 app/assets/stylesheets/helpers/_radial-positions-parser.scss
@@ -0,0 +1,18 @@
+@function _radial-positions-parser($gradient-pos) {
+ $shape-size: nth($gradient-pos, 1);
+ $pos: nth($gradient-pos, 2);
+ $shape-size-spec: _shape-size-stripper($shape-size);
+
+ $pre-spec: unquote(if($pos, "#{$pos}, ", null))
+ unquote(if($shape-size, "#{$shape-size},", null));
+ $pos-spec: if($pos, "at #{$pos}", null);
+
+ $spec: "#{$shape-size-spec} #{$pos-spec}";
+
+ // Add comma
+ @if ($spec != ' ') {
+ $spec: "#{$spec},"
+ }
+
+ @return $pre-spec $spec;
+}
View
10 app/assets/stylesheets/helpers/_shape-size-stripper.scss
@@ -0,0 +1,10 @@
+@function _shape-size-stripper($shape-size) {
+ $shape-size-spec: null;
+ @each $value in $shape-size {
+ @if ($value == "cover") or ($value == "contain") {
+ $value: null;
+ }
+ $shape-size-spec: "#{$shape-size-spec} #{$value}";
+ }
+ @return $shape-size-spec;
+}

0 comments on commit c9c10af

Please sign in to comment.
Something went wrong with that request. Please try again.