Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Comparing changes

Choose two branches to see what's changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
base fork: thoughtbot/bourbon
...
head fork: thoughtbot/bourbon
Checking mergeability… Don't worry, you can still create the pull request.
  • 2 commits
  • 11 files changed
  • 0 commit comments
  • 1 contributor
View
6 app/assets/stylesheets/_bourbon.scss 100755 → 100644
@@ -1,3 +1,9 @@
+// Custom Helpers
+@import "helpers/linear-positions-parser";
+@import "helpers/radial-arg-parser";
+@import "helpers/radial-positions-parser";
+@import "helpers/shape-size-stripper";
+
// Custom Functions
@import "functions/compact";
@import "functions/deprecated-webkit-gradient";
View
28 app/assets/stylesheets/css3/_background-image.scss
@@ -5,25 +5,39 @@
@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) {
$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-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) 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)
+ }
+
+ @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: render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
$images-prefixed: append($images-prefixed, $gradient, comma);
}
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: _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);
View
72 app/assets/stylesheets/css3/_radial-gradient.scss
@@ -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);
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
56 app/assets/stylesheets/functions/_radial-gradient.scss
@@ -4,54 +4,20 @@
$G5: false, $G6: false,
$G7: false, $G8: false,
$G9: false, $G10: false,
- $pos: 50% 50%,
- $shape-size: ellipse cover) {
+ $pos: null,
+ $shape-size: null) {
- @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);
$type: radial;
- $gradient: compact($pos, $shape-size, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
- $type-gradient: append($type, $gradient, comma);
+ $gradient: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
+ $type-gradient: $type, $shape-size $pos, $gradient;
@return $type-gradient;
}
+
+
View
23 app/assets/stylesheets/functions/_render-gradients.scss
@@ -1,13 +1,28 @@
// User for linear and radial gradients within background-image or border-image properties
-@function render-gradients($gradients, $gradient-type, $vendor: false) {
- $vendor-gradients: false;
+@function render-gradients($gradient-positions, $gradients, $gradient-type, $vendor: false) {
+ $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);
+ }
+ }
+
+ @else if $gradient-type == radial {
+ $pre-spec: nth($gradient-positions, 1);
+ $spec: nth($gradient-positions, 2);
+ }
+
@if $vendor {
- $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient($gradients);
+ $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient(#{$pre-spec} $gradients);
}
@else if $vendor == false {
- $vendor-gradients: "#{$gradient-type}-gradient(#{$gradients})";
+ $vendor-gradients: "#{$gradient-type}-gradient(#{$spec} #{$gradients})";
$vendor-gradients: unquote($vendor-gradients);
}
@return $vendor-gradients;
View
54 app/assets/stylesheets/helpers/_linear-positions-parser.scss
@@ -0,0 +1,54 @@
+@function _linear-positions-parser($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;
+}
View
69 app/assets/stylesheets/helpers/_radial-arg-parser.scss
@@ -0,0 +1,69 @@
+@function _radial-arg-parser($G1, $G2, $pos, $shape-size) {
+ @each $value in $G1, $G2 {
+ $first-val: nth($value, 1);
+ $pos-type: type-of($first-val);
+ $spec-at-index: null;
+
+ // Determine if spec was passed to mixin
+ @if type-of($value) == list {
+ $spec-at-index: if(index($value, at), index($value, at), false);
+ }
+ @if $spec-at-index {
+ @if $spec-at-index > 1 {
+ @for $i from 1 through ($spec-at-index - 1) {
+ $shape-size: $shape-size nth($value, $i);
+ }
+ @for $i from ($spec-at-index + 1) through length($value) {
+ $pos: $pos nth($value, $i);
+ }
+ }
+ @else if $spec-at-index == 1 {
+ @for $i from ($spec-at-index + 1) through length($value) {
+ $pos: $pos nth($value, $i);
+ }
+ }
+ $G1: false;
+ }
+
+ // If not spec calculate correct values
+ @else {
+ @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;
+ }
+ }
+ }
+ }
+ }
+ @return $G1, $G2, $pos, $shape-size;
+}
View
18 app/assets/stylesheets/helpers/_radial-positions-parser.scss
@@ -0,0 +1,18 @@
+@function _radial-positions-parser($gradient-pos) {
+ $shape-size: nth($gradient-pos, 1);
+ $pos: nth($gradient-pos, 2);
+ $shape-size-spec: _shape-size-stripper($shape-size);
+
+ $pre-spec: unquote(if($pos, "#{$pos}, ", null))
+ unquote(if($shape-size, "#{$shape-size},", null));
+ $pos-spec: if($pos, "at #{$pos}", null);
+
+ $spec: "#{$shape-size-spec} #{$pos-spec}";
+
+ // Add comma
+ @if ($spec != ' ') {
+ $spec: "#{$spec},"
+ }
+
+ @return $pre-spec $spec;
+}
View
10 app/assets/stylesheets/helpers/_shape-size-stripper.scss
@@ -0,0 +1,10 @@
+@function _shape-size-stripper($shape-size) {
+ $shape-size-spec: null;
+ @each $value in $shape-size {
+ @if ($value == "cover") or ($value == "contain") {
+ $value: null;
+ }
+ $shape-size-spec: "#{$shape-size-spec} #{$value}";
+ }
+ @return $shape-size-spec;
+}

No commit comments for this range

Something went wrong with that request. Please try again.