Permalink
Browse files

Finished gradients updates to spec. Refactored helper functions to he…

…lpers directory
  • Loading branch information...
1 parent e05bdf7 commit d87183e92cab1a8d8877fc44331ba53596880011 Phil LaPier committed Apr 10, 2013
@@ -1,20 +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,21 +4,19 @@
//************************************************************************//
@mixin background-image($images...) {
- background-image: add-prefix($images, webkit);
- 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;
-
- // REMOVE FOR LOOP??
@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-type: nth(nth($images, $i), 1); // linear or radial
$gradient-pos: null;
$gradient-args: null;
@@ -31,10 +29,9 @@
}
$gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos);
- $gradient: render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
+ $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);
@@ -43,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,17 +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);
+ 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) {
@@ -45,7 +45,7 @@
@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) {
@@ -73,7 +73,7 @@
}
$gradient-positions: _gradient-positions-parser($gradient-type, $gradient-positions);
- $gradient: render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
+ $gradient: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
// Append any additional shorthand args to gradient
@if $shorthand-start {
@@ -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));
@@ -35,15 +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-degree $full); // Safari 5.1+, Chrome
+ 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})");
}
-
-// Helper Function
-@function _flip-position($pos) {
- @return if($pos == left, right, null)
- if($pos == right, left, null)
- if($pos == top, bottom, null)
- if($pos == bottom, top, null);
-}
@@ -38,7 +38,7 @@
$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 && IOS 4
- background-image: -webkit-radial-gradient(unquote(#{$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})");
}
@@ -1,6 +1,6 @@
// Render Deprecated Webkit Gradient - Linear || Radial
//************************************************************************//
-@function deprecated-webkit-gradient($type,
+@function _deprecated-webkit-gradient($type,
$deprecated-pos1, $deprecated-pos2,
$full,
$deprecated-radius1: false, $deprecated-radius2: false) {
@@ -17,16 +17,13 @@
$color-stop: color-stop(nth($gradient, 2), nth($gradient, 1));
$gradient-list: join($gradient-list, $color-stop, comma);
}
-
@else if $gradient != null {
@if $i == $full-length {
$percentage: 100%;
}
-
@else {
$percentage: ($i - 1) * (100 / ($full-length - 1)) + "%";
}
-
$color-stop: color-stop(unquote($percentage), $gradient);
$gradient-list: join($gradient-list, $color-stop, comma);
}
@@ -35,10 +32,8 @@
@if $type == radial {
$gradient: -webkit-gradient(radial, $deprecated-pos1, $deprecated-radius1, $deprecated-pos2, $deprecated-radius2, $gradient-list);
}
-
@else if $type == linear {
$gradient: -webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $gradient-list);
}
-
@return $gradient;
}
@@ -12,7 +12,7 @@
@if $length == 2 {
// Swap for backwards compatability
- $degree: _flip-position(nth($pos, 2));
+ $degree: _position-flipper(nth($pos, 2));
}
@else if $length == 3 {
$corner: nth($pos, 3);
@@ -39,7 +39,7 @@
// Swap for backwards compatability
@if $type == string {
$degree: $pos;
- $spec: to _flip-position($pos);
+ $spec: to _position-flipper($pos);
}
@else {
$degree: -270 - $pos; //rotate the gradient opposite from spec
@@ -50,3 +50,11 @@
$spec: unquote($spec + ",");
@return $degree $spec;
}
+
+// Helper Function
+@function _position-flipper($pos) {
+ @return if($pos == left, right, null)
+ if($pos == right, left, null)
+ if($pos == top, bottom, null)
+ if($pos == bottom, top, null);
+}
@@ -1,6 +1,6 @@
// User for linear and radial gradients within background-image or border-image properties
-@function render-gradients($gradient-positions, $gradients, $gradient-type, $vendor: false) {
+@function _render-gradients($gradient-positions, $gradients, $gradient-type, $vendor: false) {
$pre-spec: null;
$spec: null;
$vendor-gradients: null;

0 comments on commit d87183e

Please sign in to comment.