stratum 0.4 → 0.5

data/assets/stylesheets/_css3.scss

@@ -5,6 +5,7 @@
 @import "css3/calc";
 @import "css3/columns";
 @import "css3/flex";
+@import "css3/gradients";
 @import "css3/transform";
 @import "css3/transition";
 @import "css3/user-select";

data/assets/stylesheets/css3/_flex.scss

@@ -14,6 +14,10 @@
 // - Firefox 20+
 // - Opera 12.1+
 
+// Not supported
+// - IE < 10
+// - Opera Mini
+
 @mixin flex-container {
   display: -webkit-flex;
   display: -ms-flexbox;

data/assets/stylesheets/css3/_gradients.scss

@@ -0,0 +1,288 @@
+// CSS Gradients
+// -------------
+
+// Vendor prefixes:
+// - Firefox: 3.6+
+// - Chrome 10+
+// - Safari 5.1+
+// - iOS Safari 3.2+
+// - Android 2.1+
+// - Blackberry 7+
+
+// No prefixes
+// - Firefox 16+
+// - Opera 12.1
+// - Chrome 26+
+// - IE 10+
+
+// Not supported
+// - IE < 10
+// - Opera Mini
+
+$vendor-prefixes-background: webkit moz spec !default;
+
+
+// Parse CSS functions
+// -------------------
+// linear-gradient
+@function linear-gradient($values...) {
+  @return append(linear, $values);
+}
+// linear-gradient
+// ---------------
+@function radial-gradient($values...) {
+  @return append(radial, $values);
+}
+
+
+// Reverse direction keyword
+// -------------------------
+// used to convert between standards and pre-standards modes
+@function -gradient-reverse-direction-keywords($-keywords...) {
+  $-direction-keywords: null;
+
+  @if  type-of($-keywords) == arglist {
+    // convert arglist into list
+    @each $-kw in $-keywords { $-keywords: $-kw }
+  }
+
+  @each $-keyword in $-keywords {
+    @if $-keyword == top {
+      $-direction-keywords: #{unquote($-direction-keywords) bottom};
+    }
+    @if $-keyword == bottom {
+      $-direction-keywords: #{unquote($-direction-keywords) top};
+    }
+    @if $-keyword == left {
+      $-direction-keywords: #{unquote($-direction-keywords) right};
+    }
+    @if $-keyword == right {
+      $-direction-keywords: #{unquote($-direction-keywords) left};
+    }
+    @if $-keyword == center {
+      $-direction-keywords: #{unquote($-direction-keywords) center};
+    }
+  }
+
+  @return $-direction-keywords;
+}
+
+
+// Parse gradient directions
+// -------------------------
+@function -parse-direction($-keywords, $-prefix: to, $-mode: standard, $-reverse: true) {
+  $-direction-old-syntax: $-keywords;
+  $-direction-new-syntax: #{$-prefix -gradient-reverse-direction-keywords($-direction-old-syntax)};
+  @if not $-reverse {
+    $-direction-new-syntax: #{$-prefix $-direction-old-syntax};
+  }
+
+  // Convert back to non-standard direction keywords
+  @if index(to at, nth($-keywords, 1)) {
+    $-direction-old-syntax: -gradient-reverse-direction-keywords($-direction-old-syntax);
+    $-direction-new-syntax: $-keywords;
+
+    // get keywords sans standard `at/to` prefix
+    $-non-standard-direction: ();
+    @for $-i from 2 to length($-keywords) + 1 {
+      $-non-standard-direction: append($-non-standard-direction, nth($-keywords, $-i));
+    }
+    // use the same keyword if $-reverse if false
+    @if not $-reverse {
+      $-direction-old-syntax: $-non-standard-direction;
+    }
+  }
+  // Convert to standard direction keywords
+  @else {
+    @if type-of($-keywords) == number {
+      $-direction-new-syntax: $-direction-old-syntax;
+    }
+  }
+
+  @if $-mode == standard {
+    @return $-direction-new-syntax;
+  } @else {
+    @return $-direction-old-syntax;
+  }
+}
+
+
+// Outputs linear gradient value for specific vendor
+// -------------------------------------------------
+@function -linear-gradient($-vendor, $values...) {
+  @if  type-of($values) == arglist {
+    // convert arglist into list
+    @each $-value in $values { $values: $-value }
+  }
+
+  $-direction: top;
+  $-combined-background: ();
+  $-stops: ();
+
+  @each $-value in $values {
+    // Gradient stops
+    @if type-of(nth($-value, 1)) == color
+        or (type-of(nth($-value, 1)) == string and nth($-value, 1) == transparent) {
+      $-stops: append($-stops, $-value, comma);
+    }
+    // Direction provided
+    @else if index(string number list, type-of($-value)) {
+      $-direction: $-value;
+    }
+  }
+
+  $-direction: -parse-direction($-direction, to, if($-vendor == "spec", standard, old));
+  $-prefixed-gradients: vendor-prefix(linear-gradient, #{$-direction, $-stops}, $-vendor);
+  $-combined-background: append($-combined-background, $-prefixed-gradients, comma);
+
+  // background-color: mix(nth($-stops, 1), nth($-stops, length($-stops)));
+  @return $-combined-background;
+}
+
+
+// Outputs radial gradient value for specific vendor
+// -------------------------------------------------
+@function -radial-gradient($-vendor, $values...) {
+  @if type-of($values) == arglist {
+    // convert arglist into list
+    @each $-value in $values { $values: $-value }
+  }
+
+  $-shape: null;
+  $-shape-size: ();
+  $-extend-keyword: null;
+  $-position: center;
+  $-combined-background: ();
+  $-stops: ();
+
+  @each $-value in $values {
+    // Gradient stops
+    @if type-of(nth($-value, 1)) == color
+        or (type-of(nth($-value, 1)) == string and nth($-value, 1) == transparent) {
+      $-stops: append($-stops, $-value, comma);
+    }
+    // Gradient parameters
+    // Simple (one parameter)
+    @else if type-of($-value) == string {
+      // Shape
+      @if index(circle ellipse, $-value) {
+        $-shape: $-value;
+      // Position
+      } @else if index(center top bottom left right, $-value) {
+        $-position: $-value;
+      }
+    }
+    // Complex (list of parameters)
+    @else if type-of($-value) == list {
+      $-pos: ();
+      @each $-v in $-value {
+        // Extend keywords
+        @if index(cover contain closest-side closest-corner farthest-side farthest-corner, $-v) {
+          // Early drafts
+          @if $-v == cover and $-vendor == spec {
+            $-extend-keyword: farthest-corner;
+          } @else if $-v == contain and $-vendor == spec {
+            $-extend-keyword: closest-side;
+          }
+          // Current standard
+          @else {
+            $-extend-keyword: $-v;
+          }
+        }
+        // Position keywords
+        @else if index(center top bottom left right, $-v) {
+          $-pos: append($-v, $-pos);
+        }
+        // Numbers
+        @else if type-of($-v) == number {
+          // Position percentage
+          @if unit($-v) == "%" {
+            $-pos: append($-pos, $-v);
+          }
+          // Shape size
+          @if index(px em ex mm cm, unit($-v)) {
+            $-shape-size: append($-shape-size, $-v);
+          }
+        }
+        // Shape
+        @else if index(ellipse circle, $-v) {
+          $-shape: $-v;
+        }
+      }
+      $-position: if(length($-pos) > 0, $-pos, $-position);
+    }
+  }
+
+  $-gradient-params: #{$-position, $-extend-keyword if($-shape-size, $-shape-size, $-shape)};
+
+  @if $-vendor == spec {
+    $-position: -parse-direction($-position, at, if($-vendor == "spec", standard, old), $-reverse: false);
+    $-gradient-params: #{$-shape-size $-shape $-extend-keyword $-position};
+  }
+
+  $-prefixed-gradients: vendor-prefix(radial-gradient, #{$-gradient-params, $-stops}, $-vendor);
+  $-combined-background: append($-combined-background, $-prefixed-gradients, comma);
+
+  // background-color: mix(nth($-stops, 1), nth($-stops, length($-stops)));
+  @return $-combined-background;
+}
+
+
+// Background shorthand mixin
+// --------------------------
+// Can take comma-separated gradients and background images
+// If one gradient is specified, a colour fallback can be given as the first parameter
+// e.g. `background(#ddd, linear-gradient(#eee, #ccc))`
+// Colour background can also be provided with image e.g. `..., #ddd url(...) no-repeat 50%`
+@mixin background($values...) {
+  @each $-vendor in $vendor-prefixes-background {
+    $-color: null;
+    $-combined-background: ();
+
+    // Extract individual backgrounds from string
+    @each $-value in $values {
+      // Look for colours
+      @if type-of($-value) == color {
+        $-color: $-value;
+      }
+      // Look for linear/radial gradient
+      @if index(linear radial, nth($-value, 1)) {
+        $-type: nth($-value, 1);
+        $-params: nth($-value, 2);
+        @if $-type == linear {
+          $-combined-background: append($-combined-background, -linear-gradient($-vendor, $-params), comma);
+        }
+        @if $-type == radial {
+          $-combined-background: append($-combined-background, -radial-gradient($-vendor, $-params), comma);
+        }
+      }
+      // Look for image URL
+      @else if index(string list, type-of($-value)) {
+        $-combined-background: append($-combined-background, $-value);
+      }
+    }
+
+    // Add fallback colour if only one gradient is specified
+    $-color-fallback: if(length($-combined-background) == 1, $-color, null);
+
+    background: #{unquote($-color-fallback) $-combined-background};
+  }
+}
+
+
+// Linear gradient mixin
+// ---------------------
+@mixin linear-gradient($values...) {
+  @each $-vendor in $vendor-prefixes-background {
+    background-image: -linear-gradient($-vendor, $values);
+  }
+}
+
+
+// Radial gradient mixin
+// ---------------------
+@mixin radial-gradient($values...) {
+  @each $-vendor in $vendor-prefixes-background {
+    background-image: -radial-gradient($-vendor, $values);
+  }
+}

data/assets/stylesheets/helpers/_triangle.scss

@@ -1,12 +1,17 @@
 // Generate CSS triangles
 // ----------------------
 
+// $size can be:
+// one value - base; sides are created 2/3 of base length
+// two values - base and two sides (e.g. 12px 10px)
+// three values - base and each side (e.g. 12px 4px 7px; base left right)
+
 @mixin triangle($position: top, $color: black, $size: 16px) {
   $-dimensions: null;
   $-colors: null;
-  $-height: nth($size, 1);
-  $-left: $-height / 1.5;
-  $-right: $-height / 1.5;
+  $-base: nth($size, 1);
+  $-left: $-base / 1.5;
+  $-right: $-base / 1.5;
 
   // sides width specified
   @if length($size) == 2 {
@@ -19,35 +24,35 @@
   }
 
   @if $position == top {
-    $-dimensions: 0 $-right $-height $-left;
+    $-dimensions: 0 $-right $-base $-left;
     $-colors: transparent transparent $color;
   }
   @if $position == top-right {
-    $-dimensions: 0 $-height $-height 0;
+    $-dimensions: 0 $-base $-base 0;
     $-colors: transparent $color transparent transparent;
   }
   @if $position == right {
-    $-dimensions: $-left 0 $-right $-height;
+    $-dimensions: $-left 0 $-right $-base;
     $-colors: transparent transparent transparent $color;
   }
   @if $position == bottom-right {
-    $-dimensions: 0 0 $-height $-height;
+    $-dimensions: 0 0 $-base $-base;
     $-colors: transparent transparent $color;
   }
   @if $position == bottom {
-    $-dimensions: $-height $-left 0 $-right;
+    $-dimensions: $-base $-left 0 $-right;
     $-colors: $color transparent transparent;
   }
   @if $position == bottom-left {
-    $-dimensions: $-height 0 0 $-height;
+    $-dimensions: $-base 0 0 $-base;
     $-colors: transparent transparent transparent $color;
   }
   @if $position == left {
-    $-dimensions: $-left $-height $-right 0;
+    $-dimensions: $-left $-base $-right 0;
     $-colors: transparent $color transparent transparent;
   }
   @if $position == top-left {
-    $-dimensions: $-height $-height 0 0;
+    $-dimensions: $-base $-base 0 0;
     $-colors: $color transparent transparent transparent;
   }
 

data/assets/stylesheets/helpers/_vendor-prefix.scss

@@ -16,3 +16,23 @@
     }
   }
 }
+
+
+@function vendor-prefix($property, $value, $prefixes) {
+  $-allowed-prefixes: moz, webkit, ms, o, spec;
+
+  @each $-prefix in $prefixes {
+    $-result: invalid;
+
+    @each $-allowed-prefix in $-allowed-prefixes {
+      @if $-prefix == $-allowed-prefix {
+        $-result: if($-prefix == "spec", "", "-#{$-prefix}-");
+      }
+    }
+    @if($-result != invalid) {
+      @return unquote("#{$-result}#{$property}(#{$value})");
+    } @else {
+      @warn("Prefix '-#{$-prefix}' is invalid");
+    }
+  }
+}

data/lib/stratum/version.rb

@@ -1,3 +1,3 @@
 module Stratum
-  VERSION = "0.4"
+  VERSION = "0.5"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: stratum
 version: !ruby/object:Gem::Version
-  version: '0.4'
+  version: '0.5'
   prerelease: 
 platform: ruby
 authors:
@@ -9,11 +9,11 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-03-16 00:00:00.000000000 Z
+date: 2013-04-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: thor
-  requirement: &70094945051220 !ruby/object:Gem::Requirement
+  requirement: &70096668512440 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -21,7 +21,7 @@ dependencies:
         version: '0'
   type: :runtime
   prerelease: false
-  version_requirements: *70094945051220
+  version_requirements: *70096668512440
 description: Stratum is a collection of SASS mixins and utilities for your web development
   needs.
 email: tyom@semonov.com
@@ -44,6 +44,7 @@ files:
 - assets/stylesheets/css3/_calc.scss
 - assets/stylesheets/css3/_columns.scss
 - assets/stylesheets/css3/_flex.scss
+- assets/stylesheets/css3/_gradients.scss
 - assets/stylesheets/css3/_transform.scss
 - assets/stylesheets/css3/_transition.scss
 - assets/stylesheets/css3/_user-select.scss