Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

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

…lpers directory
  • Loading branch information...
commit d87183e92cab1a8d8877fc44331ba53596880011 1 parent e05bdf7
Phil LaPier plapier authored
4 app/assets/stylesheets/_bourbon.scss
View
@@ -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";
14 app/assets/stylesheets/css3/_background-image.scss
View
@@ -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));
12 app/assets/stylesheets/css3/_background.scss
View
@@ -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 {
17 app/assets/stylesheets/css3/_border-image.scss
View
@@ -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));
12 app/assets/stylesheets/css3/_linear-gradient.scss
View
@@ -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);
-}
4 app/assets/stylesheets/css3/_radial-gradient.scss
View
@@ -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})");
}
7 ...sheets/functions/_deprecated-webkit-gradient.scss → ...lesheets/helpers/_deprecated-webkit-gradient.scss
View
@@ -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 app/assets/stylesheets/helpers/_linear-positions-parser.scss
View
@@ -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);
+}
2  ...sets/stylesheets/functions/_render-gradients.scss → ...assets/stylesheets/helpers/_render-gradients.scss
View
@@ -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;
Please sign in to comment.
Something went wrong with that request. Please try again.