Skip to content
Browse files

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

… to spec. WIP
  • Loading branch information...
1 parent b536834 commit b34300380245803181a35947c1ac26e5a2bafc52 Phil LaPier committed Apr 3, 2013
View
3 app/assets/stylesheets/_bourbon.scss
@@ -1,3 +1,6 @@
+// Custom Helpers
+@import "helpers/calc-gradient-positions";
+
// Custom Functions
@import "functions/compact";
@import "functions/deprecated-webkit-gradient";
View
27 app/assets/stylesheets/css3/_background-image.scss
@@ -5,25 +5,37 @@
@mixin background-image($images...) {
background-image: add-prefix($images, webkit);
- background-image: add-prefix($images, moz);
- background-image: add-prefix($images, ms);
- background-image: add-prefix($images, o);
background-image: add-prefix($images);
}
-
@function add-prefix($images, $vendor: false) {
+ @debug $images;
$images-prefixed: ();
+ $gradient-positions: false;
@for $i from 1 through length($images) {
$type: type-of(nth($images, $i)); // Get type of variable - List or String
// If variable is a list - Gradient
@if $type == list {
$gradient-type: nth(nth($images, $i), 1); // Get type of gradient (linear || radial)
- $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue)
-
- $gradient: render-gradients($gradient-args, $gradient-type, $vendor);
+ $gradient-pos: null;
+ $gradient-args: null;
+
+ @if $gradient-type == linear {
+ $gradient-pos: nth(nth($images, $i), 2); // Get gradient position
+ $gradient-args: nth(nth($images, $i), 3); // Get actual gradient (red, blue)
+ }
+ @else {
+ $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue)
+ }
+
+ @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: render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
$images-prefixed: append($images-prefixed, $gradient, comma);
}
@@ -35,7 +47,6 @@
@return $images-prefixed;
}
-
//Examples:
//@include background-image(linear-gradient(top, orange, red));
//@include background-image(radial-gradient(50% 50%, cover circle, orange, red));
View
54 app/assets/stylesheets/css3/_linear-gradient.scss
@@ -19,57 +19,9 @@
}
@if $pos {
- $pos-side: null;
- $pos-corner: null;
- $pos-length: length($pos);
-
- // Parse Side and corner positions
- @if ($pos-length > 1) {
- @if nth($pos, 1) == "to" {
- $pos-side: nth($pos, 2);
-
- @if $pos-length == 2 {
- // Swap for backwards compatability
- $pos-degree: _flip-position(nth($pos, 2));
- }
-
- @else if $pos-length == 3 {
- $pos-corner: nth($pos, 3);
- }
- @if ("#{$pos-side} #{$pos-corner}" == "left top") or ("#{$pos-side} #{$pos-corner}" == "top left") {
- $pos-degree: 135deg;
- }
- @else if ("#{$pos-side} #{$pos-corner}" == "right top") or ("#{$pos-side} #{$pos-corner}" == "top right") {
- $pos-degree: 45deg;
- }
- @else if ("#{$pos-side} #{$pos-corner}" == "right bottom") or ("#{$pos-side} #{$pos-corner}" == "bottom right") {
- $pos-degree: -45deg;
- }
- @else if ("#{$pos-side} #{$pos-corner}" == "left bottom") or ("#{$pos-side} #{$pos-corner}" == "bottom left") {
- $pos-degree: -135deg;
- }
- }
- @else {
- @warn "Incorrect gradient syntax";
- }
-
- $pos-spec: to $pos-side $pos-corner;
- }
-
- @else if $pos-length == 1 {
- // Swap for backwards compatability
- @if $pos-type == string {
- $pos-degree: $pos;
- $pos-spec: to _flip-position($pos);
- }
- @else {
- $pos-degree: (-45*6) - $pos; //rotate the gradient opposite from spec
- $pos-spec: $pos;
- }
- }
-
- $pos-degree: unquote($pos-degree + ",");
- $pos-spec: unquote($pos-spec + ",");
+ $positions: calc-gradient-positions($pos);
+ $pos-degree: nth($positions, 1);
+ $pos-spec: nth($positions, 2);
}
$full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
View
11 app/assets/stylesheets/functions/_linear-gradient.scss
@@ -1,6 +1,13 @@
-@function linear-gradient($gradients...) {
+@function linear-gradient($pos, $gradients...) {
$type: linear;
- $type-gradient: append($type, $gradients, comma);
+ $pos-type: type-of(nth($pos, 1));
+ // if $pos doesn't exist, fix $gradient
+ @if ($pos-type == color) or (nth($pos, 1) == "transparent") {
+ $gradients: zip($pos $gradients);
+ $pos: false;
+ }
+
+ $type-gradient: $type, $pos, $gradients;
@return $type-gradient;
}
View
15 app/assets/stylesheets/functions/_render-gradients.scss
@@ -1,13 +1,22 @@
// User for linear and radial gradients within background-image or border-image properties
-@function render-gradients($gradients, $gradient-type, $vendor: false) {
+@function render-gradients($gradient-positions, $gradients, $gradient-type, $vendor: false) {
+ $pos-degree: null;
+ $pos-spec: null;
+
+ @if $gradient-positions {
+ $pos-degree: nth($gradient-positions, 1);
+ $pos-spec: nth($gradient-positions, 2);
+ }
+
$vendor-gradients: false;
+
@if $vendor {
- $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient($gradients);
+ $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient(#{$pos-degree} $gradients);
}
@else if $vendor == false {
- $vendor-gradients: "#{$gradient-type}-gradient(#{$gradients})";
+ $vendor-gradients: "#{$gradient-type}-gradient(#{$pos-spec} #{$gradients})";
$vendor-gradients: unquote($vendor-gradients);
}
@return $vendor-gradients;
View
54 app/assets/stylesheets/helpers/calc-gradient-position.scss
@@ -0,0 +1,54 @@
+@function calc-gradient-positions($pos) {
+ $type: type-of(nth($pos, 1));
+ $spec: null;
+ $degree: null;
+ $side: null;
+ $corner: null;
+ $length: length($pos);
+
+ // Parse Side and corner positions
+ @if ($length > 1) {
+ @if nth($pos, 1) == "to" {
+ $side: nth($pos, 2);
+
+ @if $length == 2 {
+ // Swap for backwards compatability
+ $degree: _flip-position(nth($pos, 2));
+ }
+ @else if $length == 3 {
+ $corner: nth($pos, 3);
+ }
+ @if ("#{$side} #{$corner}" == "left top") or ("#{$side} #{$corner}" == "top left") {
+ $degree: 135deg;
+ }
+ @else if ("#{$side} #{$corner}" == "right top") or ("#{$side} #{$corner}" == "top right") {
+ $degree: 45deg;
+ }
+ @else if ("#{$side} #{$corner}" == "right bottom") or ("#{$side} #{$corner}" == "bottom right") {
+ $degree: -45deg;
+ }
+ @else if ("#{$side} #{$corner}" == "left bottom") or ("#{$side} #{$corner}" == "bottom left") {
+ $degree: -135deg;
+ }
+ }
+ @else {
+ @warn "Incorrect gradient syntax";
+ }
+ $spec: to $side $corner;
+ }
+
+ @else if $length == 1 {
+ // Swap for backwards compatability
+ @if $type == string {
+ $degree: $pos;
+ $spec: to _flip-position($pos);
+ }
+ @else {
+ $degree: -270 - $pos; //rotate the gradient opposite from spec
+ $spec: $pos;
+ }
+ }
+ $degree: unquote($degree + ",");
+ $spec: unquote($spec + ",");
+ @return $degree $spec;
+}

0 comments on commit b343003

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