stipe 0.0.5.7.7 → 0.0.5.7.8

checksums.yaml

@@ -1,15 +1,15 @@
 ---
 !binary "U0hBMQ==":
   metadata.gz: !binary |-
-    YzZiZDU5YjkyZWM5NTM2NDdkYjVkYTRlODM2MjdmNjA1NWZhOGNmNQ==
+    YjhlYTVjMDVjMTEyOTgyYTRmNThkMjAwZjA3NjkxYmI4YjlhMjVmYg==
   data.tar.gz: !binary |-
-    MDg0ZTdkYzg2ZjBkYTJhYjNmNTU0YjY3MTgwMmIwZjc0OGNiYTk0Ng==
+    ZWY0NmJhNTdlZjQ0ZTc4OTkxNDFlYTMzMzZjYzhmMzYwMGYwYjM4NQ==
 !binary "U0hBNTEy":
   metadata.gz: !binary |-
-    Zjg3MDlhNTM2ZTEyNmEwYjU0ZjM1Y2QzZGY5N2FiYTQ0NzZjOTI4ZGNmMzRk
-    ZGI3ODEyMzlmNDI3ZGZmYTgxZmU3N2RiMTViZDE0MDE5YzFmZWU0YWRlMTQx
-    YjA4MzU1ZTBmYjI2YTEyZDFhMGFjYTU0ZDg1ZjdhZDQ1ZjY4YjQ=
+    ZDNhNDgyZWZmMDhhOTVjYzUzZjRkNWZjNmMzYjI2MmIzMTQzODYzNGVjNTI4
+    NmNjYzU2ZWE0ZWNmNDU4NTRkYWVlYzVmYzA2NGE3ZGFlOTk3MmQxYWU0MDIw
+    MGFmNWFiNWYzNDBmYTBjMjdlNGEzNGMxNTk2NDFiMjdkOTk3MjY=
   data.tar.gz: !binary |-
-    YzliNGIwYzEwMDlhNmQ4YTEwNjkwYzcxYzE1ODQ2ZTEwYTU3MjcyZjk1MWJh
-    ZDUyYWM2MzJmYmI5YTAzMGEzYmQ4YmIxYTcwYzI5ZjRiOThhNDE2MjAwZmJm
-    YzQzZGRkMGZhOTE1MDYzMjU3MDYxNTIzMTUwODk4N2Q0ZDczZmY=
+    Y2E5YzJlZDc1NTM5MmNmNmIzMTRiODlmYjAwMTQxZDI0YzUyNDM1YTQ4MDcz
+    NWYxYTI4MjYwYzE3NDVkY2ExNjI2MDIzYjNkMDcyMjk3MWZkMGMxOGU2NGZm
+    YzJhZmM4ZGI2NWRiM2YxNjY1MTNiZGNjNDUxMGM5MmQ2MDI0MWQ=

data/readme.md

@@ -1,4 +1,4 @@
-#Stipe Compass Extension
+e#Stipe Compass Extension
 Stipe is the life blood of the Toadstool style guide framework. Consisting of a series of mixins, extends and defaults that give Toadstool that 'instant on' experience.
 
 [Stipe](https://rubygems.org/gems/stipe)
@@ -12,12 +12,12 @@ To use the Stipe gem, using Bundler `gem 'stipe'`
 Stipe is a Compass Extension, so Compass is a dependency. You will need to include `require 'stipe'` in your config.rb file.
 
 # Stipe Changelog
-###0.0.5.8(roadmap)
-`toadstool branch: 0_1_1 / stipe branch: 0_0_5_8`
-* BUG FIX
-  * nth-child buttons: need to remove the left margin for mobile breakpoint
+###0.0.5.7.8
+* ALERT!!!! Deprecated Stipe's gradient support. This code will be deleted in future releases. Please make sure to update all gradients to use Compass' `@include background-image` mixin
+* Grids have been updated to support a larger array of placeholder classes for both 12 col and 24 col grid layouts.
+* New experimental support for placeholder selectors and nested grids
 
-###0.0.5.7.6
+###0.0.5.7.7
 * Update grid - move box-sizing from grid scope to global attribute
 * Deprecate Stipe's grid solution in favor of using Compass
 

data/stylesheets/stipe/_gradients.scss

@@ -1,11 +1,7 @@
-// Toadstool core v0.0.0.1
-// This document is not to be edited as it will be versioned
-// -----------------------------------------------------------------
+// Code is depricated!
+// ALERT!!!!!!!!!!!
+// In future releases of Stipe, all references to this document will be deleted and all gradient support moved over to Compass
 
-// @import "gradients/mixins/color_gradients";
-
-// This is where new magic may come from
+// ----------------------------------------------------------------------
 @import "gradients/mixins/area_51";
 @import "gradients/mixins/linear_gradient_bkgimage";
-
-@import "gradients/extends";

data/stylesheets/stipe/gradients/mixins/_linear_gradient_bkgimage.scss

@@ -1,13 +1,15 @@
-// Toadstool core v0.0.0.1
-// This document is not to be edited as it will be versioned
-// -----------------------------------------------------------------
+// Code is depricated!
+// ALERT!!!!!!!!!!!
+// In future releases of Stipe, all references to this document will be deleted and all gradient support moved over to Compass
+
+// ----------------------------------------------------------------------
 
 
 // The following gradients are designed with variable color stops and supports background images
 // It is recommended to use these to build reusable objects in the SCSS
 // -------------------------------------------------------------------------------------
-// four color stop linear gradient with color stops and images set as variable 
-// --------------------------------------------------------------- 
+// four color stop linear gradient with color stops and images set as variable
+// ---------------------------------------------------------------
 // NOTE:  Place url path on single quotes, i.e. '../../images/image.png'
 
 @mixin linear_gradient_bkgimage ($image, $position, $start_color, $color_values, $prefixes: $prefix_defaults) {
@@ -30,7 +32,7 @@
 
 // requires that color values are written using #{} interpolation syntax
 // example .....
-// @include linear_gradient_bkgimage_legacy_safari (#{color-stop(0%,$alpha_color), color-stop(100%,$bravo_color)}); 
+// @include linear_gradient_bkgimage_legacy_safari (#{color-stop(0%,$alpha_color), color-stop(100%,$bravo_color)});
 // ---------------------------------------------------------------------------------------
 // NOTE:  Place url path on single quotes, i.e. '../../images/image.png'
 @mixin linear_gradient_bkgimage_legacy_safari ($image, $position, $color_values) {

data/stylesheets/stipe/grid/_extends.scss

@@ -3,149 +3,61 @@
 // Preferred uses include @extend .class; or repurpose the mixin within the class.
 //
 
-// grid ----------------------
-%grid_display {
-  margin-bottom: 1em;
-  text-align: center;
-  padding: em(10) 0;
-  @include box_shadow (inset $shadow_color, 0 0 em(20) em(10));
-}
-
-
-%grid_1 {
-  @include grid(1);
-  @media #{$tablet_portrait} {
-    @include grid(1, $grid_context: 10);
-  }
-  @media #{$mobile} {
-    @include grid(1, $grid_context: 4);
-  }
-}
-
-%grid_2 {
-  @include grid(2);
-  @media #{$tablet_portrait} {
-    @include grid(2, $grid_context: 10);
-  }
-  @media #{$mobile} {
-    @include grid(2, $grid_context: 4);
-  }
-}
-
-%grid_3 {
-  @include grid(3);
-  @media #{$tablet_portrait} {
-    @include grid(3, $grid_context: 10);
-  }
-  @media #{$mobile} {
-    @include grid(3, $grid_context: 4);
-  }
-}
-
-%grid_4 {
-  @include grid(4);
-  @media #{$tablet_portrait} {
-    @include grid(4, $grid_context: 10);
-  }
-  @media #{$mobile} {
-    @include grid(4, $grid_context: 4);
-  }
-}
-
-%grid_5 {
-  @include grid(5);
-  @media #{$tablet_portrait} {
-    @include grid(5, $grid_context: 10);
-  }
-  @media #{$mobile} {
-    @include grid(4, $grid_context: 4);
+// 12 col grid support --------------------
+@for $i from 1 through 12 {
+  %grid_#{$i}of12 {
+    @include grid($i, $grid_context: 12);
   }
 }
 
-%grid_6 {
-  @include grid(6);
-  @media #{$tablet_portrait} {
-    @include grid(6, $grid_context: 10);
+@media #{$tablet_portrait} {
+  @for $i from 1 through 10 {
+    %grid_#{$i}of10 {
+      @include grid($i, $grid_context: 10);
+    }
   }
-  @media #{$mobile} {
-    @include grid(4, $grid_context: 4);
+  @for $i from 11 through 12 {
+    %grid_#{$i}of10 {
+      @include grid(10, $grid_context: 10);
+    }
   }
 }
 
-%grid_7 {
-  @include grid(7);
-  @media #{$tablet_portrait} {
-    @include grid(7, $grid_context: 10);
+@media #{$mobile} {
+  @for $i from 1 through 4 {
+    %grid_#{$i}of4 {
+      @include grid($i, $grid_context: 4);
+    }
   }
-  @media #{$mobile} {
-    @include grid(4, $grid_context: 4);
+  @for $i from 5 through 12 {
+    %grid_#{$i}of4 {
+      @include grid(4, $grid_context: 4);
+    }
   }
 }
 
-%grid_8 {
-  @include grid(8);
-  @media #{$tablet_portrait} {
-    @include grid(8, $grid_context: 10);
-  }
-  @media #{$mobile} {
-    @include grid(4, $grid_context: 4);
-  }
-}
 
-%grid_9 {
-  @include grid(9);
-  @media #{$tablet_portrait} {
-    @include grid(9, $grid_context: 10);
-  }
-  @media #{$mobile} {
-    @include grid(4, $grid_context: 4);
-  }
-}
-
-%grid_10 {
-  @include grid(10);
-  @media #{$tablet_portrait} {
-    @include grid(10, $grid_context: 10);
-  }
-  @media #{$mobile} {
-    @include grid(4, $grid_context: 4);
-  }
-}
 
-%grid_11 {
-  @include grid(11);
-  @media #{$tablet_portrait} {
-    @include grid(10, $grid_context: 10);
-  }
-  @media #{$mobile} {
-    @include grid(4, $grid_context: 4);
+// 12 col Nested grids -----------------------------
+@for $v from 1 through 12 {
+  @for $i from 1 through $v {
+    %grid_#{$i}of#{$v}_nested {
+      @include grid($i, $grid_context: $v);
+    }
   }
 }
 
-%grid_12 {
-  @include grid(12);
-  @media #{$tablet_portrait} {
-    @include grid(10, $grid_context: 10);
-  }
-  @media #{$mobile} {
-    @include grid(4, $grid_context: 4);
+// 24 col Nested grids -----------------------------
+@for $v from 1 through 24 {
+  @for $i from 1 through $v {
+    %grid_#{$i}of#{$v}_nested {
+      @include grid($i, $grid_context: $v);
+    }
   }
 }
 
-%grid_full {
-  @include full_width_block(12, $main_grid_align: left);
-}
 
-%grid_full_center {
-  @include full_width_block(12);
-}
 
-// 24 col grid support --------------------
-@for $i from 1 through 24 {
-  %grid_#{$i}_24 {
-    @include grid($i, $grid_type:24);
-  }
-}
 
 // push ----------------------
 @for $i from 1 through 12 {
@@ -183,11 +95,54 @@
 }
 
 // alpha / omega ----------------------
-
 %alpha {
   @include alpha;
 }
 
 %omega {
   @include omega;
-} 
+}
+
+
+
+// 24 col grid support --------------------
+@for $i from 1 through 24 {
+  %grid_#{$i}of24 {
+    @include grid($i, $grid_context: 24);
+  }
+}
+
+@media #{$tablet_portrait} {
+  @for $i from 1 through 19 {
+    %grid_#{$i}of19 {
+      @include grid($i, $grid_context: 19);
+    }
+  }
+  @for $i from 20 through 24 {
+    %grid_#{$i}of19 {
+      @include grid(19, $grid_context: 19);
+    }
+  }
+}
+
+@media #{$mobile} {
+  @for $i from 1 through 8 {
+    %grid_#{$i}of8 {
+      @include grid($i, $grid_context: 8);
+    }
+  }
+  @for $i from 9 through 24 {
+    %grid_#{$i}of8 {
+      @include grid(8, $grid_context: 8);
+    }
+  }
+}
+
+// Standard layout ----------------------------
+%grid_full {
+  @include full_width_block(12, $main_grid_align: left);
+}
+
+%grid_full_center {
+  @include full_width_block(12);
+}

data/stylesheets/stipe/grid/_mixins.scss

@@ -69,4 +69,4 @@ $border_place: '';
 
 @mixin omega() {
 	margin-right: 0;
-}
+}

data/stylesheets/stipe/grid/lib/_grid_placement.scss

@@ -15,10 +15,10 @@
 				$margin_calc: #{$margin / $em}em;
 				@include grid_margin($grid_child, $margin_calc);
 			}
-			@else if $grid_uom == combo {
-				$margin_calc: #{$margin / $em}em;
-				@include grid_margin($grid_child, $margin_calc);
-			}
+			// @else if $grid_uom == combo {
+			// 	$margin_calc: #{$margin / $em}em;
+			// 	@include grid_margin($grid_child, $margin_calc);
+			// }
 			@else if $grid_uom == percent {
 				$margin_calc: $margin / $grid_context_width * 100%;
 				@include grid_margin($grid_child, $margin_calc);
@@ -30,10 +30,10 @@
 				$margin_calc: #{$margin / $em}em;
 				@include grid_margin($grid_child, $margin_calc);
 			}
-			@else if $grid_uom == combo {
-				$margin_calc: #{$margin / $em}em;
-				@include grid_margin($grid_child, $margin_calc);
-			}
+			// @else if $grid_uom == combo {
+			// 	$margin_calc: #{$margin / $em}em;
+			// 	@include grid_margin($grid_child, $margin_calc);
+			// }
 			@else if $grid_uom == percent {
 				$margin_calc: $margin / $grid_context_width * 100%;
 				@include grid_margin($grid_child, $margin_calc);
@@ -45,10 +45,10 @@
 				$margin_calc: #{$margin / $em}em;
 				@include grid_margin($grid_child, $margin_calc);
 			}
-			@else if $grid_uom == combo {
-				$margin_calc: #{$margin / $em}em;
-				@include grid_margin($grid_child, $margin_calc);
-			}
+			// @else if $grid_uom == combo {
+			// 	$margin_calc: #{$margin / $em}em;
+			// 	@include grid_margin($grid_child, $margin_calc);
+			// }
 			@else if $grid_uom == percent {
 				$margin_calc: $margin / $grid_context_width * 100%;
 				@include grid_margin($grid_child, $margin_calc);

data/stylesheets/stipe/grid/readme.md

@@ -1,29 +1,64 @@
-#Stipe's grid solution
-While there are a number of other really awesome grid solutions out there, I always find myself customizing their code to meet my personal needs. You will see these needs described in the supported arguments below.
+#Grids
+Stipe's grid system is based on the original 960.gs solution. Whereas there are concepts like columns, gutters and nesting. 
 
-##Grid use definition
-To use grids in Toadstool, Stipe comes with some awesome Mixins for easy creation of custom grids as well as commonly used silent classes.
 
-Stipe's grid system is based on the original 960.gs solution. Whereas there are concepts like columns, gutters and nesting. For the most part when framing a UI, simply extend already pre-defned [silent classes](http://goo.gl/W0QlA) like `@extend %grid_4`. These pre-formatted silent classes already come with additional support for mobile devices. 
+##Placeholder classes
+For the most part when framing a UI, simply extend already pre-defned placeholder classes like `@extend %grid_4of12`, for example. Stipe's placeholder classes come with support for tablet and mobile devices. 
 
-If you require more customization of a given grid, use `@include grid($col_count)` whareas you are replacing `$col_count` with the number of colums you need. 
+For example, using the following Sass
 
-For nested grids, Stipe supports 'alpha' and 'omega' concepts. For added spice, if you want to remove both margins, 'alphaomega' works too. Example `@include grid(5, alpha)`.
+```sass
+.grid-block {
+  @extend %grid_4of12;
+  @media #{$mobile} {
+    @extend %grid_4of4;
+  }
+}
 
-Since Stipe's grid is pure math, you can pass in floating point numbers as well. Example, if using `@include grid(12, alphaomega)` this will remove the margin on the outside of the grid, but will not be 100% across. By adding a floating point `@include grid(12.25, alphaomega)` this will address the missing space.
+.left-nav {
+  @extend %grid_4of12;
+  @media #{$mobile} {
+    @extend %grid_4of4;
+  }
+}
+```
+
+You will get the following CSS
+
+```css
+.grid-block, .left-nav {
+  float: left;
+  margin-left: 1.04167%;
+  margin-right: 1.04167%;
+  width: 31.25%;
+}
+
+@media screen and (max-width: 40em) {
+  .grid-block, .left-nav {
+    float: left;
+    margin-left: 3.125%;
+    margin-right: 3.125%;
+    width: 93.75%;
+  }
+}
+```
+
+##Building custom grid widths and nesting
+If you require more customization of a given grid, use Stipe's grid mixin `@include grid($col_count)`. Whereas you are replacing `$col_count` with the number of columns you need.
+
+When nesting grids, since Stipe uses percentages, you need to make sure to reset your context. 
 
 ##Grid arguments
 Additional arguments can be passed into the grid mixin to include `$grid_padding_l` `$grid_padding_r` `$grid_padding_tb` `$grid_border` `$border_place` `$grid_uom` `$col_gutter` `$grid_type` `$grid_align` `$grid_context`
 
-* `$grid_padding_l` => adds padding LEFT, takes intager value
-* `$grid_padding_r` => adds padding RIGHT, takes intager value
-* `$grid_padding_tb` => adds padding TOP and BOTTOM, takes intager value
+* `$grid_padding_l` => adds padding LEFT, takes integer value
+* `$grid_padding_r` => adds padding RIGHT, takes integer value
+* `$grid_padding_tb` => adds padding TOP and BOTTOM, takes integer value
 * `$grid_border` => takes integer value, adds border using `$border_color` and `$standard_border_style` configs found in `_config.scss`.
 * `$border_place` => arguments are `left` and `right`. Argument will place a single border on either the left or right side of the block.
 * `$grid_uom` => set to percent by default, accepts `em` as argument.
 * `$col_gutter` => takes integer to adjust col gutter
-* `$grid_type` => set to 12 col by default, allows for on-the-fly adjustment to grid type <b>Feature us currently inoperable</b>
 * `$grid_align` => takes `center` as argument
-* `$grid_context` => Adjusts column widths based on nested grid context. Necessary when calcuclating with percentages
+* `$grid_context` => Adjusts column widths based on nested grid context. Necessary when calculating with percentages
 			
 Stipe uses the `box-size` CSS property, but this is not supported by IE7. By entereing values like `$grid_padding_l, $grid_padding_r, $grid_border`, Stipe will calculate a width that IE7 can use.

data/stylesheets/stipe/toadstool/_design.scss

@@ -31,7 +31,7 @@
 		margin-bottom: em(20);
 		float: left;
 		background-image: url(data:image/gif;base64,R0lGODlhUAABAIAAAP/////l5SwAAAAAUAABAAACC4SPocvtD6NsqIICADs=);
-		&.col_24_grid {
+		&.col_24_grid, &.col_18_grid, &.col_8_grid {
   		background-image: url(data:image/gif;base64,R0lGODlhKAABAIAAAP/////l5SH5BAAAAAAALAAAAAAoAAEAAAIIhB2py+15TAEAOw==);
 		}
 	}

data/stylesheets/stipe/toadstool/_grids.scss

@@ -1,48 +1,99 @@
 
-.col_4_grid, .col_10_grid {
+.col_4_grid, .col_8_grid, .col_10_grid, .col_18_grid {
 	display: none;
 }
 
 @media #{$tablet_portrait} {
-	.col_10_grid {
+	.col_10_grid, .col_18_grid {
 		display: block;
 	}
-	.col_12_grid {
+	.col_12_grid, .col_24_grid {
 		display: none;
 	}
 }
 
 @media #{$mobile} {
-	.col_4_grid {
+	.col_4_grid, .col_8_grid {
 		display: block;
 	}
-	.col_12_grid, .col_10_grid {
+	.col_12_grid, .col_10_grid, .col_18_grid {
 		display: none;
 	}
 }
 
 
+[class^=grid] {
+  margin-bottom: 1em;
+  text-align: center;
+  padding: em(10) 0;
+  @include box_shadow (inset $shadow_color, 0 0 em(20) em(10));
+}
+
 
-// grid ----------------------
+// 12 col grid support --------------------
 @for $i from 1 through 12 {
   .grid-#{$i} {
-    @extend %grid_#{$i};
-    @extend %grid_display;
+    @extend %grid_#{$i}of12;
   }
 }
 
-.grid-full {
-	@include full_width_block(12, $main_grid_align: left);
+@media #{$tablet_portrait} {
+  @for $i from 1 through 10 {
+    .grid-#{$i} {
+      @extend %grid_#{$i}of10;
+    }
+  }
+  @for $i from 11 through 12 {
+    .grid-#{$i} {
+      @extend %grid_#{$i}of10;
+    }
+  }
 }
 
-.grid-full_center {
-	@include full_width_block(12);
+@media #{$mobile} {
+  @for $i from 1 through 4 {
+    .grid-#{$i} {
+      @extend %grid_#{$i}of4;
+    }
+  }
+  @for $i from 5 through 12 {
+    .grid-#{$i} {
+      @extend %grid_#{$i}of4;
+    }
+  }
 }
 
 
+
+// 24 col grid support --------------------
 @for $i from 1 through 24 {
   .grid-#{$i}-24 {
-    @extend %grid_#{$i}_24;
-    @extend %grid_display;
+    @extend %grid_#{$i}of24;
+  }
+}
+
+@media #{$tablet_portrait} {
+  @for $i from 1 through 19 {
+    .grid-#{$i}-24 {
+      @extend %grid_#{$i}of19;
+    }
+  }
+  @for $i from 20 through 24 {
+    .grid-#{$i}-24 {
+      @extend %grid_#{$i}of19;
+    }
+  }
+}
+
+@media #{$mobile} {
+  @for $i from 1 through 8 {
+    .grid-#{$i}-24 {
+      @extend %grid_#{$i}of8;
+    }
   }
-}
+  @for $i from 9 through 24 {
+    .grid-#{$i}-24 {
+      @extend %grid_#{$i}of8;
+    }
+  }
+}

data/stylesheets/stipe/toadstool/modules/_main_nav.scss

@@ -27,7 +27,8 @@
   }
   a {
     color: $white;
-    @include linear_gradient_w3c ($bravo_gray, #{$bravo_gray 50%,$delta_gray 100%});
+    background-color: $bravo_gray; // Old browsers
+      @include background-image(linear-gradient(top,  $bravo_gray 50%, $delta_gray 100%));
     .no-flexbox & {
       padding: 0 em(10);
     }

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: stipe
 version: !ruby/object:Gem::Version
-  version: 0.0.5.7.7
+  version: 0.0.5.7.8
 platform: ruby
 authors:
 - Dale Sande
@@ -72,7 +72,6 @@ files:
 - stylesheets/stipe/doc-src/grids.md
 - stylesheets/stipe/forms/_extends.scss
 - stylesheets/stipe/forms/_mixins.scss
-- stylesheets/stipe/gradients/_extends.scss
 - stylesheets/stipe/gradients/mixins/_area_51.scss
 - stylesheets/stipe/gradients/mixins/_linear_gradient_bkgimage.scss
 - stylesheets/stipe/grid/_debug.scss

data/stylesheets/stipe/gradients/_extends.scss

@@ -1,48 +0,0 @@
-//
-// Standardized abstract gradient color objects.  NOT to be used as classes appended to a block in the HTML.
-// Preferred uses include @extend .class; or repurpose the mixin within the class.
-//
-
-
-/////// OOCSS gradient color ////////
-// ----------------------------------------------
-
-//* Gradient color objects */
-//* ----------------------- */
-// %alpha_color_gradient {
-// 	@include alpha_color_gradient;
-// }
-// 
-// %bravo_color_gradient {
-// 	@include bravo_color_gradient;
-// }
-// 
-// %charlie_color_gradient {
-// 	@include charlie_color_gradient;
-// }
-// 
-// %delta_color_gradient {
-// 	@include delta_color_gradient;
-// }
-// 
-// %echo_color_gradient {
-// 	@include echo_color_gradient;
-// }
-// 
-// %fox_color_gradient {
-// 	@include fox_color_gradient;
-// }
-// 
-// %golf_color_gradient {
-// 	@include golf_color_gradient;
-// }
-// 
-// %hotel_color_gradient {
-// 	@include hotel_color_gradient;
-// }
-// 
-// %india_color_gradient {
-// 	@include india_color_gradient;
-// }
-
-/////// OOCSS gradient color mixins ////////