Permalink
Browse files

Make background-shorthand mixin play well with the new gradient changes

  • Loading branch information...
1 parent c9c10af commit e05bdf7f74cc0f062c880b6386280d5750514dcc Phil LaPier committed Apr 8, 2013
@@ -1,4 +1,5 @@
// Custom Helpers
+@import "helpers/gradient-positions-parser";
@import "helpers/linear-positions-parser";
@import "helpers/radial-arg-parser";
@import "helpers/radial-positions-parser";
@@ -30,13 +30,7 @@
$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) {
- $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-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);
}
@@ -29,9 +29,6 @@
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);
}
@@ -48,51 +45,50 @@
@return 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"));
@@ -4,14 +4,12 @@
$pre-spec: null;
$spec: null;
$vendor-gradients: null;
-
@if $gradient-type == linear {
@if $gradient-positions {
$pre-spec: nth($gradient-positions, 1);
- $spec: nth($gradient-positions, 2);
+ $spec: nth($gradient-positions, 2);
}
}
-
@else if $gradient-type == radial {
$pre-spec: nth($gradient-positions, 1);
$spec: nth($gradient-positions, 2);
@@ -20,7 +18,6 @@
@if $vendor {
$vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient(#{$pre-spec} $gradients);
}
-
@else if $vendor == false {
$vendor-gradients: "#{$gradient-type}-gradient(#{$spec} #{$gradients})";
$vendor-gradients: unquote($vendor-gradients);
@@ -0,0 +1,13 @@
+@function _gradient-positions-parser($gradient-type, $gradient-positions) {
+ @if $gradient-positions
+ and ($gradient-type == linear)
+ and (type-of($gradient-positions) != color) {
+ $gradient-positions: _linear-positions-parser($gradient-positions);
+ }
+ @else if $gradient-positions
+ and ($gradient-type == radial)
+ and (type-of($gradient-positions) != color) {
+ $gradient-positions: _radial-positions-parser($gradient-positions);
+ }
+ @return $gradient-positions;
+}
@@ -5,7 +5,6 @@
$side: null;
$corner: null;
$length: length($pos);
-
// Parse Side and corner positions
@if ($length > 1) {
@if nth($pos, 1) == "to" {
@@ -36,7 +35,6 @@
}
$spec: to $side $corner;
}
-
@else if $length == 1 {
// Swap for backwards compatability
@if $type == string {

0 comments on commit e05bdf7

Please sign in to comment.