Permalink
Browse files

Merge branch 'pl-linear-gradient-spec'

  • Loading branch information...
Phil LaPier
Phil LaPier committed Apr 10, 2013
2 parents e119ccf + d87183e commit 7a299b8f10fa1cc9e577fc2f730fafee95874be9
View
@@ -1,13 +1,20 @@
+// Custom Helpers
+@import "helpers/deprecated-webkit-gradient";
+@import "helpers/gradient-positions-parser";
+@import "helpers/linear-positions-parser";
+@import "helpers/radial-arg-parser";
+@import "helpers/radial-positions-parser";
+@import "helpers/render-gradients";
+@import "helpers/shape-size-stripper";
+
// Custom Functions
@import "functions/compact";
-@import "functions/deprecated-webkit-gradient";
@import "functions/flex-grid";
@import "functions/grid-width";
@import "functions/linear-gradient";
@import "functions/modular-scale";
@import "functions/px-to-em";
@import "functions/radial-gradient";
-@import "functions/render-gradients";
@import "functions/tint-shade";
@import "functions/transition-property-name";
@@ -4,29 +4,34 @@
//************************************************************************//
@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);
+ background-image: _add-prefix($images, webkit);
+ background-image: _add-prefix($images);
}
-
-@function add-prefix($images, $vendor: false) {
+@function _add-prefix($images, $vendor: false) {
$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-type: nth(nth($images, $i), 1); // linear or radial
+ $gradient-pos: null;
+ $gradient-args: null;
+
+ @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)
+ }
+ @else {
+ $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue)
+ }
+
+ $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos);
+ $gradient: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
$images-prefixed: append($images-prefixed, $gradient, comma);
}
-
// If variable is a string - Image
@else if $type == string {
$images-prefixed: join($images-prefixed, nth($images, $i), comma);
@@ -35,7 +40,6 @@
@return $images-prefixed;
}
-
//Examples:
//@include background-image(linear-gradient(top, orange, red));
//@include background-image(radial-gradient(50% 50%, cover circle, orange, red));
@@ -22,20 +22,17 @@
$fallback-color: $fallback;
}
@else {
- $fallback-color: extract-background-color($backgrounds);
+ $fallback-color: _extract-background-color($backgrounds);
}
@if $fallback-color {
background-color: $fallback-color;
}
- background: background-add-prefix($backgrounds, webkit);
- background: background-add-prefix($backgrounds, moz);
- background: background-add-prefix($backgrounds, ms);
- background: background-add-prefix($backgrounds, o);
- background: background-add-prefix($backgrounds);
+ background: _background-add-prefix($backgrounds, webkit);
+ background: _background-add-prefix($backgrounds);
}
-@function extract-background-color($backgrounds) {
+@function _extract-background-color($backgrounds) {
$final-bg-layer: nth($backgrounds, length($backgrounds));
@if type-of($final-bg-layer) == list {
@for $i from 1 through length($final-bg-layer) {
@@ -48,51 +45,50 @@
@return false;
}
-
-@function background-add-prefix($backgrounds, $vendor: false) {
+@function _background-add-prefix($backgrounds, $vendor: false) {
$backgrounds-prefixed: ();
@for $i from 1 through length($backgrounds) {
$shorthand: nth($backgrounds, $i); // Get member for current index
- $type: type-of($shorthand); // Get type of variable - List or String
+ $type: type-of($shorthand); // Get type of variable - List (gradient) or String (image)
- // If shorthand is a list
+ // If shorthand is a list (gradient)
@if $type == list {
$first-member: nth($shorthand, 1); // Get first member of shorthand
// Linear Gradient
@if index(linear radial, nth($first-member, 1)) {
$gradient-type: nth($first-member, 1); // linear || radial
-
- // Get actual gradient (red, blue)
- $gradient-args: false;
- $shorthand-start: false;
- // Linear gradient and positioning, repeat, etc. values
- @if type-of($first-member) == list {
- $gradient-args: nth($first-member, 2);
+ $gradient-args: false;
+ $gradient-positions: false;
+ $shorthand-start: false;
+ @if type-of($first-member) == list { // Linear gradient plus additional shorthand values — lg(red,orange)repeat,...
+ $gradient-positions: nth($first-member, 2);
+ $gradient-args: nth($first-member, 3);
$shorthand-start: 2;
}
- // Linear gradient only
- @else {
- $gradient-args: nth($shorthand, 2); // Get actual gradient (red, blue)
- $shorthand-start: 3;
+ @else { // Linear gradient only — lg(red,orange),...
+ $gradient-positions: nth($shorthand, 2);
+ $gradient-args: nth($shorthand, 3); // Get gradient (red, blue)
}
- $gradient: render-gradients($gradient-args, $gradient-type, $vendor);
- @for $j from $shorthand-start through length($shorthand) {
- $gradient: join($gradient, nth($shorthand, $j), space);
+ $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-positions);
+ $gradient: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
+
+ // Append any additional shorthand args to gradient
+ @if $shorthand-start {
+ @for $j from $shorthand-start through length($shorthand) {
+ $gradient: join($gradient, nth($shorthand, $j), space);
+ }
}
$backgrounds-prefixed: append($backgrounds-prefixed, $gradient, comma);
}
-
// Image with additional properties
@else {
$backgrounds-prefixed: append($backgrounds-prefixed, $shorthand, comma);
}
-
}
-
- // If shorthand is a simple string, color or image
+ // If shorthand is a simple string (color or image)
@else if $type == string {
$backgrounds-prefixed: join($backgrounds-prefixed, $shorthand, comma);
}
@@ -102,6 +98,6 @@
//Examples:
//@include background(linear-gradient(top, orange, red));
- //@include background(radial-gradient(50% 50%, cover circle, orange, red));
+ //@include background(radial-gradient(circle at 40% 40%, orange, red));
//@include background(url("/images/a.png") no-repeat, linear-gradient(orange, red));
//@include background(url("image.png") center center, linear-gradient(orange, red), url("image.png"));
@@ -1,11 +1,11 @@
@mixin border-image($images) {
- -webkit-border-image: border-add-prefix($images, webkit);
- -moz-border-image: border-add-prefix($images, moz);
- -o-border-image: border-add-prefix($images, o);
- border-image: border-add-prefix($images);
+ -webkit-border-image: _border-add-prefix($images, webkit);
+ -moz-border-image: _border-add-prefix($images, moz);
+ -o-border-image: _border-add-prefix($images, o);
+ border-image: _border-add-prefix($images);
}
-@function border-add-prefix($images, $vendor: false) {
+@function _border-add-prefix($images, $vendor: false) {
$border-image: ();
$images-type: type-of(nth($images, 1));
$first-var: nth(nth($images, 1), 1); // Get type of Gradient (Linear || radial)
@@ -16,16 +16,14 @@
@for $i from 2 through length($images) {
$gradient-type: nth($images, 1); // Get type of gradient (linear || radial)
$gradient-args: nth($images, $i); // Get actual gradient (red, blue)
- $border-image: render-gradients($gradient-args, $gradient-type, $vendor);
+ $border-image: _render-gradients($gradient-args, $gradient-type, $vendor);
}
}
-
// If input is a URL
@else {
$border-image: $images;
}
}
-
// If input is gradient or url + additional args
@else if $images-type == list {
@for $i from 1 through length($images) {
@@ -35,9 +33,8 @@
@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)
- $border-image: render-gradients($gradient-args, $gradient-type, $vendor);
+ $border-image: _render-gradients($gradient-args, $gradient-type, $vendor);
}
-
// If variable is a string - Image or number
@else if ($type == string) or ($type == number) {
$border-image: append($border-image, nth($images, $i));
@@ -8,12 +8,20 @@
$fallback: false) {
// Detect what type of value exists in $pos
$pos-type: type-of(nth($pos, 1));
+ $pos-spec: null;
+ $pos-degree: null;
// If $pos is missing from mixin, reassign vars and add default position
@if ($pos-type == color) or (nth($pos, 1) == "transparent") {
$G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
$G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
- $pos: top; // Default position
+ $pos: null;
+ }
+
+ @if $pos {
+ $positions: _linear-positions-parser($pos);
+ $pos-degree: nth($positions, 1);
+ $pos-spec: nth($positions, 2);
}
$full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
@@ -27,17 +35,7 @@
}
background-color: $fallback-color;
- background-image: deprecated-webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $full); // Safari <= 5.0
- background-image: -webkit-linear-gradient($pos, $full); // Safari 5.1+, Chrome
- background-image: -moz-linear-gradient($pos, $full);
- background-image: -ms-linear-gradient($pos, $full);
- background-image: -o-linear-gradient($pos, $full);
- background-image: unquote("linear-gradient(#{$pos}, #{$full})");
+ background-image: _deprecated-webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $full); // Safari <= 5.0
+ background-image: -webkit-linear-gradient($pos-degree $full); // Safari 5.1+, Chrome
+ background-image: unquote("linear-gradient(#{$pos-spec}#{$full})");
}
-
-
-// Usage: Gradient position is optional, default is top. Position can be a degree. Color stops are optional as well.
-// @include linear-gradient(#1e5799, #2989d8);
-// @include linear-gradient(#1e5799, #2989d8, $fallback:#2989d8);
-// @include linear-gradient(top, #1e5799 0%, #2989d8 50%);
-// @include linear-gradient(50deg, rgba(10, 10, 10, 0.5) 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
@@ -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);
@@ -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;
}
Oops, something went wrong.

0 comments on commit 7a299b8

Please sign in to comment.