From c9c10afeef6f0f6b893164c5d77b2ed036b939a3 Mon Sep 17 00:00:00 2001 From: Phil LaPier Date: Fri, 5 Apr 2013 16:50:21 -0400 Subject: [PATCH] Bring radial-gradient function and mixin up to spec --- app/assets/stylesheets/_bourbon.scss | 5 +- .../stylesheets/css3/_background-image.scss | 11 +-- .../stylesheets/css3/_linear-gradient.scss | 2 +- .../stylesheets/css3/_radial-gradient.scss | 72 +++++-------------- .../functions/_radial-gradient.scss | 56 +++------------ .../functions/_render-gradients.scss | 22 +++--- ...ion.scss => _linear-positions-parser.scss} | 2 +- .../helpers/_radial-arg-parser.scss | 69 ++++++++++++++++++ .../helpers/_radial-positions-parser.scss | 18 +++++ .../helpers/_shape-size-stripper.scss | 10 +++ 10 files changed, 154 insertions(+), 113 deletions(-) mode change 100755 => 100644 app/assets/stylesheets/_bourbon.scss rename app/assets/stylesheets/helpers/{calc-gradient-position.scss => _linear-positions-parser.scss} (97%) create mode 100644 app/assets/stylesheets/helpers/_radial-arg-parser.scss create mode 100644 app/assets/stylesheets/helpers/_radial-positions-parser.scss create mode 100644 app/assets/stylesheets/helpers/_shape-size-stripper.scss diff --git a/app/assets/stylesheets/_bourbon.scss b/app/assets/stylesheets/_bourbon.scss old mode 100755 new mode 100644 index 95ea72896..3745305b3 --- a/app/assets/stylesheets/_bourbon.scss +++ b/app/assets/stylesheets/_bourbon.scss @@ -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"; diff --git a/app/assets/stylesheets/css3/_background-image.scss b/app/assets/stylesheets/css3/_background-image.scss index d726857a2..e96648e06 100644 --- a/app/assets/stylesheets/css3/_background-image.scss +++ b/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)); diff --git a/app/assets/stylesheets/css3/_linear-gradient.scss b/app/assets/stylesheets/css3/_linear-gradient.scss index 0ca3a186e..32a487b66 100644 --- a/app/assets/stylesheets/css3/_linear-gradient.scss +++ b/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); } diff --git a/app/assets/stylesheets/css3/_radial-gradient.scss b/app/assets/stylesheets/css3/_radial-gradient.scss index 19279b09e..dd3192502 100644 --- a/app/assets/stylesheets/css3/_radial-gradient.scss +++ b/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); diff --git a/app/assets/stylesheets/functions/_radial-gradient.scss b/app/assets/stylesheets/functions/_radial-gradient.scss index 13b8e7af8..75584060d 100644 --- a/app/assets/stylesheets/functions/_radial-gradient.scss +++ b/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; } + + diff --git a/app/assets/stylesheets/functions/_render-gradients.scss b/app/assets/stylesheets/functions/_render-gradients.scss index 8f49c9da4..1a452e766 100644 --- a/app/assets/stylesheets/functions/_render-gradients.scss +++ b/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; diff --git a/app/assets/stylesheets/helpers/calc-gradient-position.scss b/app/assets/stylesheets/helpers/_linear-positions-parser.scss similarity index 97% rename from app/assets/stylesheets/helpers/calc-gradient-position.scss rename to app/assets/stylesheets/helpers/_linear-positions-parser.scss index fa801c605..00600489b 100644 --- a/app/assets/stylesheets/helpers/calc-gradient-position.scss +++ b/app/assets/stylesheets/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; diff --git a/app/assets/stylesheets/helpers/_radial-arg-parser.scss b/app/assets/stylesheets/helpers/_radial-arg-parser.scss new file mode 100644 index 000000000..3466695bd --- /dev/null +++ b/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; +} diff --git a/app/assets/stylesheets/helpers/_radial-positions-parser.scss b/app/assets/stylesheets/helpers/_radial-positions-parser.scss new file mode 100644 index 000000000..6a5b47777 --- /dev/null +++ b/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; +} diff --git a/app/assets/stylesheets/helpers/_shape-size-stripper.scss b/app/assets/stylesheets/helpers/_shape-size-stripper.scss new file mode 100644 index 000000000..ee5eda422 --- /dev/null +++ b/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; +}