Skip to content
This repository
Browse code

Extracted function to helper file. Make linear-gradient function work…

… to spec. WIP
  • Loading branch information...
commit b34300380245803181a35947c1ac26e5a2bafc52 1 parent b536834
Phil LaPier plapier authored
3  app/assets/stylesheets/_bourbon.scss
... ... @@ -1,3 +1,6 @@
  1 +// Custom Helpers
  2 +@import "helpers/calc-gradient-positions";
  3 +
1 4 // Custom Functions
2 5 @import "functions/compact";
3 6 @import "functions/deprecated-webkit-gradient";
27 app/assets/stylesheets/css3/_background-image.scss
@@ -5,15 +5,13 @@
5 5
6 6 @mixin background-image($images...) {
7 7 background-image: add-prefix($images, webkit);
8   - background-image: add-prefix($images, moz);
9   - background-image: add-prefix($images, ms);
10   - background-image: add-prefix($images, o);
11 8 background-image: add-prefix($images);
12 9 }
13 10
14   -
15 11 @function add-prefix($images, $vendor: false) {
  12 + @debug $images;
16 13 $images-prefixed: ();
  14 + $gradient-positions: false;
17 15
18 16 @for $i from 1 through length($images) {
19 17 $type: type-of(nth($images, $i)); // Get type of variable - List or String
@@ -21,9 +19,23 @@
21 19 // If variable is a list - Gradient
22 20 @if $type == list {
23 21 $gradient-type: nth(nth($images, $i), 1); // Get type of gradient (linear || radial)
24   - $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue)
25   -
26   - $gradient: render-gradients($gradient-args, $gradient-type, $vendor);
  22 + $gradient-pos: null;
  23 + $gradient-args: null;
  24 +
  25 + @if $gradient-type == linear {
  26 + $gradient-pos: nth(nth($images, $i), 2); // Get gradient position
  27 + $gradient-args: nth(nth($images, $i), 3); // Get actual gradient (red, blue)
  28 + }
  29 + @else {
  30 + $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue)
  31 + }
  32 +
  33 + @if ($gradient-pos) and ($gradient-type == linear) and (type-of($gradient-pos) != color) and (type-of($gradient-pos) != number) {
  34 + @debug "happing";
  35 + $gradient-positions: calc-gradient-positions($gradient-pos);
  36 + }
  37 +
  38 + $gradient: render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
27 39 $images-prefixed: append($images-prefixed, $gradient, comma);
28 40 }
29 41
@@ -35,7 +47,6 @@
35 47 @return $images-prefixed;
36 48 }
37 49
38   -
39 50 //Examples:
40 51 //@include background-image(linear-gradient(top, orange, red));
41 52 //@include background-image(radial-gradient(50% 50%, cover circle, orange, red));
54 app/assets/stylesheets/css3/_linear-gradient.scss
@@ -19,57 +19,9 @@
19 19 }
20 20
21 21 @if $pos {
22   - $pos-side: null;
23   - $pos-corner: null;
24   - $pos-length: length($pos);
25   -
26   - // Parse Side and corner positions
27   - @if ($pos-length > 1) {
28   - @if nth($pos, 1) == "to" {
29   - $pos-side: nth($pos, 2);
30   -
31   - @if $pos-length == 2 {
32   - // Swap for backwards compatability
33   - $pos-degree: _flip-position(nth($pos, 2));
34   - }
35   -
36   - @else if $pos-length == 3 {
37   - $pos-corner: nth($pos, 3);
38   - }
39   - @if ("#{$pos-side} #{$pos-corner}" == "left top") or ("#{$pos-side} #{$pos-corner}" == "top left") {
40   - $pos-degree: 135deg;
41   - }
42   - @else if ("#{$pos-side} #{$pos-corner}" == "right top") or ("#{$pos-side} #{$pos-corner}" == "top right") {
43   - $pos-degree: 45deg;
44   - }
45   - @else if ("#{$pos-side} #{$pos-corner}" == "right bottom") or ("#{$pos-side} #{$pos-corner}" == "bottom right") {
46   - $pos-degree: -45deg;
47   - }
48   - @else if ("#{$pos-side} #{$pos-corner}" == "left bottom") or ("#{$pos-side} #{$pos-corner}" == "bottom left") {
49   - $pos-degree: -135deg;
50   - }
51   - }
52   - @else {
53   - @warn "Incorrect gradient syntax";
54   - }
55   -
56   - $pos-spec: to $pos-side $pos-corner;
57   - }
58   -
59   - @else if $pos-length == 1 {
60   - // Swap for backwards compatability
61   - @if $pos-type == string {
62   - $pos-degree: $pos;
63   - $pos-spec: to _flip-position($pos);
64   - }
65   - @else {
66   - $pos-degree: (-45*6) - $pos; //rotate the gradient opposite from spec
67   - $pos-spec: $pos;
68   - }
69   - }
70   -
71   - $pos-degree: unquote($pos-degree + ",");
72   - $pos-spec: unquote($pos-spec + ",");
  22 + $positions: calc-gradient-positions($pos);
  23 + $pos-degree: nth($positions, 1);
  24 + $pos-spec: nth($positions, 2);
73 25 }
74 26
75 27 $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
11 app/assets/stylesheets/functions/_linear-gradient.scss
... ... @@ -1,6 +1,13 @@
1   -@function linear-gradient($gradients...) {
  1 +@function linear-gradient($pos, $gradients...) {
2 2 $type: linear;
3   - $type-gradient: append($type, $gradients, comma);
  3 + $pos-type: type-of(nth($pos, 1));
4 4
  5 + // if $pos doesn't exist, fix $gradient
  6 + @if ($pos-type == color) or (nth($pos, 1) == "transparent") {
  7 + $gradients: zip($pos $gradients);
  8 + $pos: false;
  9 + }
  10 +
  11 + $type-gradient: $type, $pos, $gradients;
5 12 @return $type-gradient;
6 13 }
15 app/assets/stylesheets/functions/_render-gradients.scss
... ... @@ -1,13 +1,22 @@
1 1 // User for linear and radial gradients within background-image or border-image properties
2 2
3   -@function render-gradients($gradients, $gradient-type, $vendor: false) {
  3 +@function render-gradients($gradient-positions, $gradients, $gradient-type, $vendor: false) {
  4 + $pos-degree: null;
  5 + $pos-spec: null;
  6 +
  7 + @if $gradient-positions {
  8 + $pos-degree: nth($gradient-positions, 1);
  9 + $pos-spec: nth($gradient-positions, 2);
  10 + }
  11 +
4 12 $vendor-gradients: false;
  13 +
5 14 @if $vendor {
6   - $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient($gradients);
  15 + $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient(#{$pos-degree} $gradients);
7 16 }
8 17
9 18 @else if $vendor == false {
10   - $vendor-gradients: "#{$gradient-type}-gradient(#{$gradients})";
  19 + $vendor-gradients: "#{$gradient-type}-gradient(#{$pos-spec} #{$gradients})";
11 20 $vendor-gradients: unquote($vendor-gradients);
12 21 }
13 22 @return $vendor-gradients;
54 app/assets/stylesheets/helpers/calc-gradient-position.scss
... ... @@ -0,0 +1,54 @@
  1 +@function calc-gradient-positions($pos) {
  2 + $type: type-of(nth($pos, 1));
  3 + $spec: null;
  4 + $degree: null;
  5 + $side: null;
  6 + $corner: null;
  7 + $length: length($pos);
  8 +
  9 + // Parse Side and corner positions
  10 + @if ($length > 1) {
  11 + @if nth($pos, 1) == "to" {
  12 + $side: nth($pos, 2);
  13 +
  14 + @if $length == 2 {
  15 + // Swap for backwards compatability
  16 + $degree: _flip-position(nth($pos, 2));
  17 + }
  18 + @else if $length == 3 {
  19 + $corner: nth($pos, 3);
  20 + }
  21 + @if ("#{$side} #{$corner}" == "left top") or ("#{$side} #{$corner}" == "top left") {
  22 + $degree: 135deg;
  23 + }
  24 + @else if ("#{$side} #{$corner}" == "right top") or ("#{$side} #{$corner}" == "top right") {
  25 + $degree: 45deg;
  26 + }
  27 + @else if ("#{$side} #{$corner}" == "right bottom") or ("#{$side} #{$corner}" == "bottom right") {
  28 + $degree: -45deg;
  29 + }
  30 + @else if ("#{$side} #{$corner}" == "left bottom") or ("#{$side} #{$corner}" == "bottom left") {
  31 + $degree: -135deg;
  32 + }
  33 + }
  34 + @else {
  35 + @warn "Incorrect gradient syntax";
  36 + }
  37 + $spec: to $side $corner;
  38 + }
  39 +
  40 + @else if $length == 1 {
  41 + // Swap for backwards compatability
  42 + @if $type == string {
  43 + $degree: $pos;
  44 + $spec: to _flip-position($pos);
  45 + }
  46 + @else {
  47 + $degree: -270 - $pos; //rotate the gradient opposite from spec
  48 + $spec: $pos;
  49 + }
  50 + }
  51 + $degree: unquote($degree + ",");
  52 + $spec: unquote($spec + ",");
  53 + @return $degree $spec;
  54 +}

0 comments on commit b343003

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