bourbon 3.2.4 → 4.0.0.rc1

data/dist/css3/_border-image.scss

@@ -1,49 +1,53 @@
-@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);
-          border-style: solid;
-}
+@mixin border-image($borders...) {
+  $webkit-borders: ();
+  $spec-borders: ();
+
+  @each $border in $borders {
+    $webkit-border: ();
+    $spec-border: ();
+    $border-type: type-of($border);
+
+    @if $border-type == string or list {
+      $border-str: if($border-type == list, nth($border, 1), $border);
+
+      $url-str:       str-slice($border-str, 0, 3);
+      $gradient-type: str-slice($border-str, 0, 6);
+
+      @if $url-str == "url" {
+        $webkit-border: $border;
+          $spec-border: $border;
+      }
+
+      @else if $gradient-type == "linear" {
+        $gradients: _linear-gradient-parser("#{$border}");
+        $webkit-border: map-get($gradients, webkit-image);
+        $spec-border:   map-get($gradients, spec-image);
+      }
+
+      @else if $gradient-type == "radial" {
+        $gradients: _radial-gradient-parser("#{$border}");
+        $webkit-border: map-get($gradients, webkit-image);
+        $spec-border:   map-get($gradients, spec-image);
+      }
 
-@function _border-add-prefix($images, $vendor: false) {
-  $border-image: null;
-  $images-type:  type-of(nth($images, 1));
-  $first-var:    nth(nth($images, 1), 1);          // Get type of Gradient (Linear || radial)
-
-  // If input is a gradient
-  @if $images-type == string {
-    @if ($first-var == "linear") or ($first-var == "radial") {
-      $gradient-type: nth($images, 1);           // Get type of gradient (linear || radial)
-      $gradient-pos:  nth($images, 2);           // Get gradient position
-      $gradient-args: nth($images, 3);           // Get actual gradient (red, blue)
-      $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos);
-      $border-image:  _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
+      @else {
+        $webkit-border: $border;
+          $spec-border: $border;
+      }
     }
-    // If input is a URL
+
     @else {
-      $border-image: $images;
-    }
-  }
-  // If input is gradient or url + additional args
-  @else if $images-type == list {
-    $type: type-of(nth($images, 1));           // Get type of variable - List or String
-
-    // If variable is a list - Gradient
-    @if $type == list {
-      $gradient: nth($images, 1);
-      $gradient-type: nth($gradient, 1);           // Get type of gradient (linear || radial)
-      $gradient-pos:  nth($gradient, 2);           // Get gradient position
-      $gradient-args: nth($gradient, 3);           // Get actual gradient (red, blue)
-      $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos);
-      $border-image:  _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
-
-      @for $i from 2 through length($images) {
-        $border-image: append($border-image, nth($images, $i));
-      }
+      $webkit-border: $border;
+        $spec-border: $border;
     }
+
+    $webkit-borders: append($webkit-borders, $webkit-border, comma);
+    $spec-borders:   append($spec-borders,   $spec-border,   comma);
   }
-  @return $border-image;
+
+  -webkit-border-image: $webkit-borders;
+          border-image: $spec-borders;
+          border-style: solid;
 }
 
 //Examples:
@@ -53,4 +57,3 @@
 // @include border-image(linear-gradient(45deg, orange, yellow) stretch);
 // @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round);
 // @include border-image(radial-gradient(top, cover, orange, yellow, orange));
-

data/dist/css3/_flex-box.scss

@@ -78,7 +78,7 @@
         display: flex;
     }
 
-    @else if $value == "inline-flex" {
+    @elseif $value == "inline-flex" {
         display: -webkit-inline-box;
         display: -moz-inline-box;
         display: inline-box;
@@ -124,16 +124,16 @@
         $value-2009: horizontal;
     }
 
-    @else if $value == "row-reverse" {
+    @elseif $value == "row-reverse" {
         $value-2009: horizontal;
         $direction: reverse;
     }
 
-    @else if $value == column {
+    @elseif $value == column {
         $value-2009: vertical;
     }
 
-    @else if $value == "column-reverse" {
+    @elseif $value == "column-reverse" {
         $value-2009: vertical;
         $direction: reverse;
     }
@@ -162,11 +162,11 @@
         $alt-value: single;
     }
 
-    @else if $value == wrap {
+    @elseif $value == wrap {
         $alt-value: multiple;
     }
 
-    @else if $value == "wrap-reverse" {
+    @elseif $value == "wrap-reverse" {
         $alt-value: multiple;
     }
 
@@ -224,15 +224,15 @@
         $alt-value: start;
     }
 
-    @else if $value == "flex-end" {
+    @elseif $value == "flex-end" {
         $alt-value: end;
     }
 
-    @else if $value == "space-between" {
+    @elseif $value == "space-between" {
         $alt-value: justify;
     }
 
-    @else if $value == "space-around" {
+    @elseif $value == "space-around" {
         $alt-value: center;
     }
 
@@ -257,7 +257,7 @@
         $alt-value: start;
     }    
 
-    @else if $value == "flex-end" {
+    @elseif $value == "flex-end" {
         $alt-value: end;
     }
 
@@ -280,7 +280,7 @@
         $value-2011: start;
     }    
 
-    @else if $value == "flex-end" {
+    @elseif $value == "flex-end" {
         $value-2011: end;
     }
 
@@ -300,15 +300,15 @@
         $value-2011: start;
     }    
 
-    @else if $value == "flex-end" {
+    @elseif $value == "flex-end" {
         $value-2011: end;
     }
 
-    @else if $value == "space-between" {
+    @elseif $value == "space-between" {
         $value-2011: justify;
     }
 
-    @else if $value == "space-around" {
+    @elseif $value == "space-around" {
         $value-2011: distribute;
     }
 

data/dist/css3/_font-face.scss

@@ -1,6 +1,6 @@
 // Order of the includes matters, and it is: normal, bold, italic, bold+italic.
 
-@mixin font-face($font-family, $file-path, $weight: normal, $style: normal, $asset-pipeline: $asset-pipeline) {
+@mixin font-face($font-family, $file-path, $weight: normal, $style: normal, $asset-pipeline: false ) {
   @font-face {
     font-family: $font-family;
     font-weight: $weight;

data/dist/css3/_keyframes.scss

@@ -8,24 +8,24 @@
 
   @if $original-prefix-for-webkit {
     @include disable-prefix-for-all();
-    $prefix-for-webkit: true;
+    $prefix-for-webkit: true !global;
     @-webkit-keyframes #{$name} {
       @content;
     }
   }
   @if $original-prefix-for-mozilla {
     @include disable-prefix-for-all();
-    $prefix-for-mozilla: true;
+    $prefix-for-mozilla: true !global;
     @-moz-keyframes #{$name} {
       @content;
     }
   }
 
-  $prefix-for-webkit:    $original-prefix-for-webkit;
-  $prefix-for-mozilla:   $original-prefix-for-mozilla;
-  $prefix-for-microsoft: $original-prefix-for-microsoft;
-  $prefix-for-opera:     $original-prefix-for-opera;
-  $prefix-for-spec:      $original-prefix-for-spec;
+  $prefix-for-webkit:    $original-prefix-for-webkit    !global;
+  $prefix-for-mozilla:   $original-prefix-for-mozilla   !global;
+  $prefix-for-microsoft: $original-prefix-for-microsoft !global;
+  $prefix-for-opera:     $original-prefix-for-opera     !global;
+  $prefix-for-spec:      $original-prefix-for-spec      !global;
 
   @if $original-prefix-for-spec {
     @keyframes #{$name} {

data/dist/functions/_assign.scss

@@ -0,0 +1,11 @@
+@function assign-inputs($inputs, $pseudo: null) {
+  $list : ();
+
+  @each $input in $inputs {
+    $input: unquote($input);
+    $input: if($pseudo, $input + ":" + $pseudo, $input);
+    $list: append($list, $input, comma);
+  }
+
+  @return $list;
+}

data/dist/functions/_color-lightness.scss

@@ -3,11 +3,11 @@
 // More details here http://robots.thoughtbot.com/closer-look-color-lightness
 
 @function is-light($hex-color) {
-  $-local-red: red(rgba($hex-color, 1.0));
-  $-local-green: green(rgba($hex-color, 1.0));
-  $-local-blue: blue(rgba($hex-color, 1.0));
+  $red: red(rgba($hex-color, 1.0));
+  $green: green(rgba($hex-color, 1.0));
+  $blue: blue(rgba($hex-color, 1.0));
 
-  $-local-lightness: ($-local-red * 0.2126 + $-local-green * 0.7152 + $-local-blue * 0.0722) / 255;
+  $lightness: ($red * 0.2126 + $green * 0.7152 + $blue * 0.0722) / 255;
 
-  @return $-local-lightness > .6;
+  @return $lightness > .6;
 }

data/dist/helpers/_convert-units.scss

@@ -0,0 +1,15 @@
+//************************************************************************//
+// Helper function for str-to-num fn.
+// Source: http://sassmeister.com/gist/9647408
+//************************************************************************//
+@function _convert-units($number, $unit) {
+  $strings: 'px' 'cm' 'mm' '%' 'ch' 'pica' 'in' 'em' 'rem' 'pt' 'pc' 'ex' 'vw' 'vh' 'vmin' 'vmax', 'deg', 'rad', 'grad', 'turn';
+  $units:   1px  1cm  1mm  1%  1ch  1pica  1in  1em  1rem  1pt  1pc  1ex  1vw  1vh  1vmin  1vmax,  1deg,  1rad,  1grad, 1turn;
+  $index: index($strings, $unit);
+
+  @if not $index {
+    @warn "Unknown unit `#{$unit}`.";
+    @return false;
+  }
+  @return $number * nth($units, $index);
+}

data/dist/helpers/_is-num.scss

@@ -0,0 +1,8 @@
+//************************************************************************//
+// Helper for linear-gradient-parser
+//************************************************************************//
+@function _is-num($char) {
+  $strings: "0 1 2 3 4 5 6 7 8 9";
+  $index: str-index($strings, $char);
+  @return if($index, true, false);
+}

data/dist/helpers/_linear-angle-parser.scss

@@ -0,0 +1,25 @@
+// Private function for linear-gradient-parser
+@function _linear-angle-parser($image, $first-val, $prefix, $suffix) {
+  $offset: null;
+  $unit-short:  str-slice($first-val, str-length($first-val) - 2, str-length($first-val));
+  $unit-long:   str-slice($first-val, str-length($first-val) - 3, str-length($first-val));
+
+  @if ($unit-long == "grad") or
+      ($unit-long == "turn") {
+    $offset: if($unit-long == "grad", -100grad * 3, -0.75turn);
+  }
+
+  @else if ($unit-short == "deg") or
+           ($unit-short == "rad") {
+    $offset: if($unit-short == "deg", -90 * 3, 1.6rad);
+  }
+
+  @if $offset {
+    $num: _str-to-num($first-val);
+
+    @return (
+      webkit-image: -webkit- + $prefix + ($offset - $num) + $suffix,
+      spec-image: $image
+    );
+  }
+}

data/dist/helpers/_linear-gradient-parser.scss

@@ -0,0 +1,41 @@
+@function _linear-gradient-parser($image) {
+  $image: unquote($image);
+  $gradients: ();
+  $start: str-index($image, "(");
+  $end: str-index($image, ",");
+  $first-val: str-slice($image, $start + 1, $end - 1);
+
+  $prefix: str-slice($image, 0, $start);
+  $suffix: str-slice($image, $end, str-length($image));
+
+  $has-multiple-vals: str-index($first-val, " ");
+  $has-single-position: unquote(_position-flipper($first-val) + "");
+  $has-angle: _is-num(str-slice($first-val, 0, 0));
+
+  @if $has-multiple-vals {
+    $gradients: _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals);
+  }
+
+  @else if $has-single-position != "" {
+    $pos: unquote($has-single-position + "");
+
+    $gradients: (
+      webkit-image: -webkit- + $image,
+      spec-image: $prefix + "to " + $pos + $suffix
+    );
+  }
+
+  @else if $has-angle {
+    // Rotate degree for webkit
+    $gradients: _linear-angle-parser($image, $first-val, $prefix, $suffix);
+  }
+
+  @else {
+    $gradients: (
+      webkit-image: -webkit- + $image,
+      spec-image: $image
+    );
+  }
+
+  @return $gradients;
+}

data/dist/helpers/_linear-side-corner-parser.scss

@@ -0,0 +1,31 @@
+// Private function for linear-gradient-parser
+@function _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals) {
+  $val-1: str-slice($first-val, 0, $has-multiple-vals - 1 );
+  $val-2: str-slice($first-val, $has-multiple-vals + 1, str-length($first-val));
+  $val-3: null;
+  $has-val-3: str-index($val-2, " ");
+
+  @if $has-val-3 {
+    $val-3: str-slice($val-2, $has-val-3 + 1, str-length($val-2));
+    $val-2: str-slice($val-2, 0, $has-val-3 - 1);
+  }
+
+  $pos: _position-flipper($val-1) _position-flipper($val-2) _position-flipper($val-3);
+  $pos: unquote($pos + "");
+
+  // Use old spec for webkit
+  @if $val-1 == "to" {
+    @return (
+      webkit-image: -webkit- + $prefix + $pos + $suffix,
+      spec-image: $image
+    );
+  }
+
+  // Bring the code up to spec
+  @else {
+    @return (
+      webkit-image: -webkit- + $image,
+      spec-image: $prefix + "to " + $pos + $suffix
+    );
+  }
+}

data/dist/helpers/_radial-gradient-parser.scss

@@ -0,0 +1,50 @@
+@function _radial-gradient-parser($image) {
+  $image: unquote($image);
+  $gradients: ();
+  $start: str-index($image, "(");
+  $end: str-index($image, ",");
+  $first-val: str-slice($image, $start + 1, $end - 1);
+
+  $prefix: str-slice($image, 0, $start);
+  $suffix: str-slice($image, $end, str-length($image));
+
+  $is-spec-syntax: str-index($first-val, "at");
+
+  @if $is-spec-syntax and $is-spec-syntax > 1 {
+    $keyword: str-slice($first-val, 1, $is-spec-syntax - 2);
+    $pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val));
+    $pos: append($pos, $keyword, comma);
+
+    $gradients: (
+      webkit-image: -webkit- + $prefix + $pos + $suffix,
+      spec-image: $image
+    )
+  }
+
+  @else if $is-spec-syntax == 1 {
+    $pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val));
+
+    $gradients: (
+      webkit-image: -webkit- + $prefix + $pos + $suffix,
+      spec-image: $image
+    )
+  }
+
+  @else if str-index($image, "cover") or str-index($image, "contain") {
+    @warn "Radial-gradient needs to be updated to conform to latest spec.";
+
+    $gradients: (
+      webkit-image: null,
+      spec-image: $image
+    )
+  }
+
+  @else {
+    $gradients: (
+      webkit-image: -webkit- + $image,
+      spec-image: $image
+    )
+  }
+
+  @return $gradients;
+}

data/dist/helpers/_render-gradients.scss

@@ -16,11 +16,11 @@
   }
 
   @if $vendor {
-    $vendor-gradients: "-#{$vendor}-#{$gradient-type}-gradient(#{$pre-spec} #{$gradients})";
+    $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient(#{$pre-spec} $gradients);
   }
   @else if $vendor == false {
     $vendor-gradients: "#{$gradient-type}-gradient(#{$spec} #{$gradients})";
+    $vendor-gradients: unquote($vendor-gradients);
   }
-  $vendor-gradients: unquote($vendor-gradients);
   @return $vendor-gradients;
 }