bourbon 3.2.4 → 4.0.0.rc1

data/dist/addons/_html5-input-types.scss

@@ -20,29 +20,19 @@ $inputs-list: 'input[type="email"]',
               'input[type="time"]',
               'input[type="week"]';
 
-$unquoted-inputs-list: ();
-@each $input-type in $inputs-list {
-  $unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma);
-}
-
-$all-text-inputs: $unquoted-inputs-list;
-
+// Bare inputs
+//************************************************************************//
+$all-text-inputs: assign-inputs($inputs-list);
 
 // Hover Pseudo-class
 //************************************************************************//
-$all-text-inputs-hover: ();
-@each $input-type in $unquoted-inputs-list {
-      $input-type-hover: $input-type + ":hover";
-      $all-text-inputs-hover: append($all-text-inputs-hover, $input-type-hover, comma);
-}
+$all-text-inputs-hover: assign-inputs($inputs-list, hover);
 
 // Focus Pseudo-class
 //************************************************************************//
-$all-text-inputs-focus: ();
-@each $input-type in $unquoted-inputs-list {
-      $input-type-focus: $input-type + ":focus";
-      $all-text-inputs-focus: append($all-text-inputs-focus, $input-type-focus, comma);
-}
+$all-text-inputs-focus: assign-inputs($inputs-list, focus);
+
+
 
 // You must use interpolation on the variable:
 // #{$all-text-inputs}
@@ -65,37 +55,23 @@ $inputs-button-list: 'input[type="button"]',
                      'input[type="reset"]',
                      'input[type="submit"]';
 
-$unquoted-inputs-button-list: ();
-@each $input-type in $inputs-button-list {
-  $unquoted-inputs-button-list: append($unquoted-inputs-button-list, unquote($input-type), comma);
-}
-
-$all-button-inputs: $unquoted-inputs-button-list;
-
+// Bare inputs
+//************************************************************************//
+$all-button-inputs: assign-inputs($inputs-button-list);
 
 // Hover Pseudo-class
 //************************************************************************//
-$all-button-inputs-hover: ();
-@each $input-type in $unquoted-inputs-button-list {
-      $input-type-hover: $input-type + ":hover";
-      $all-button-inputs-hover: append($all-button-inputs-hover, $input-type-hover, comma);
-}
+$all-button-inputs-hover: assign-inputs($inputs-button-list, hover);
 
 // Focus Pseudo-class
 //************************************************************************//
-$all-button-inputs-focus: ();
-@each $input-type in $unquoted-inputs-button-list {
-      $input-type-focus: $input-type + ":focus";
-      $all-button-inputs-focus: append($all-button-inputs-focus, $input-type-focus, comma);
-}
+$all-button-inputs-focus: assign-inputs($inputs-button-list, focus);
 
 // Active Pseudo-class
 //************************************************************************//
-$all-button-inputs-active: ();
-@each $input-type in $unquoted-inputs-button-list {
-      $input-type-active: $input-type + ":active";
-      $all-button-inputs-active: append($all-button-inputs-active, $input-type-active, comma);
-}
+$all-button-inputs-active: assign-inputs($inputs-button-list, active);
+
+
 
 // You must use interpolation on the variable:
 // #{$all-button-inputs}

data/dist/addons/_position.scss

@@ -1,4 +1,4 @@
-@mixin position ($position: relative, $coordinates: 0 0 0 0) {
+@mixin position ($position: relative, $coordinates: null null null null) {
 
   @if type-of($position) == list {
     $coordinates: $position;
@@ -14,19 +14,19 @@
 
   position: $position;
 
-  @if ($top and $top == auto) or (type-of($top) == number and not(unitless($top))) {
+  @if ($top and $top == auto) or (type-of($top) == number) {
     top: $top;
   }
 
-  @if ($right and $right == auto) or (type-of($right) == number and not(unitless($right))) {
+  @if ($right and $right == auto) or (type-of($right) == number) {
     right: $right;
   }
 
-  @if ($bottom and $bottom == auto) or (type-of($bottom) == number and not(unitless($bottom))) {
+  @if ($bottom and $bottom == auto) or (type-of($bottom) == number) {
     bottom: $bottom;
   }
 
-  @if ($left and $left == auto) or (type-of($left) == number and not(unitless($left))) {
+  @if ($left and $left == auto) or (type-of($left) == number) {
     left: $left;
   }
 }

data/dist/addons/_prefixer.scss

@@ -37,9 +37,9 @@
 }
 
 @mixin disable-prefix-for-all() {
-  $prefix-for-webkit:    false;
-  $prefix-for-mozilla:   false;
-  $prefix-for-microsoft: false;
-  $prefix-for-opera:     false;
-  $prefix-for-spec:      false;
+  $prefix-for-webkit:    false !global;
+  $prefix-for-mozilla:   false !global;
+  $prefix-for-microsoft: false !global;
+  $prefix-for-opera:     false !global;
+  $prefix-for-spec:      false !global;
 }

data/dist/addons/_rem.scss

@@ -0,0 +1,33 @@
+@mixin rem($property, $size, $base: $em-base) {
+  @if not unitless($base) {
+    $base: strip-units($base);
+  }
+
+  $unitless_values: ();
+  @each $num in $size {
+    @if not unitless($num) {
+      @if unit($num) == "em" {
+        $num: $num * $base;
+      }
+
+      $num: strip-units($num);
+    }
+
+    $unitless_values: append($unitless_values, $num);
+  }
+  $size: $unitless_values;
+
+  $pixel_values: ();
+  $rem_values: ();
+  @each $value in $size {
+    $pixel_value: $value * 1px;
+    $pixel_values: append($pixel_values, $pixel_value);
+
+    $rem_value: ($value / $base) * 1rem;
+    $rem_values: append($rem_values, $rem_value);
+  }
+
+  #{$property}: $pixel_values;
+  #{$property}: $rem_values;
+}
+

data/dist/addons/_retina-image.scss

@@ -1,4 +1,4 @@
-@mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $retina-suffix: _2x, $asset-pipeline: $asset-pipeline) {
+@mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $retina-suffix: _2x, $asset-pipeline: false) {
   @if $asset-pipeline {
     background-image: image-url("#{$filename}.#{$extension}");
   }

data/dist/addons/_size.scss

@@ -1,44 +1,16 @@
 @mixin size($size) {
-  @if length($size) == 1 {
-    @if $size == auto {
-      width:  $size;
-      height: $size;
-    }
+  $height: nth($size, 1);
+  $width: $height;
 
-    @else if unitless($size) {
-      width:  $size + px;
-      height: $size + px;
-    }
-
-    @else if not(unitless($size)) {
-      width:  $size;
-      height: $size;
-    }
-  }
-
-  // Width x Height
-  @if length($size) == 2 {
-    $width:  nth($size, 1);
+  @if length($size) > 1 {
     $height: nth($size, 2);
+  }
 
-    @if $width == auto {
-      width: $width;
-    }
-    @else if not(unitless($width)) {
-      width: $width;
-    }
-    @else if unitless($width) {
-      width: $width + px;
-    }
+  @if $height == auto or (type-of($height) == number and not unitless($height)) {
+    height: $height;
+  }
 
-    @if $height == auto {
-      height: $height;
-    }
-    @else if not(unitless($height)) {
-      height: $height;
-    }
-    @else if unitless($height) {
-      height: $height + px;
-    }
+  @if $width == auto or (type-of($height) == number and not unitless($width)) {
+    width: $width;
   }
 }

data/dist/addons/_timing-functions.scss

@@ -1,5 +1,5 @@
 // CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie)
-// Timing functions are the same as demo'ed here: http://jqueryui.com/resources/demos/effect/easing.html
+// Timing functions are the same as demo'ed here: http://jqueryui.com/demos/effect/easing.html
 
 // EASE IN
 $ease-in-quad:      cubic-bezier(0.550,  0.085, 0.680, 0.530);

data/dist/addons/_triangle.scss

@@ -14,7 +14,6 @@
   @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
 
     $width: $width / 2;
-    $height: if(length($size) > 1, $height, $height/2);
 
     @if $direction == up {
       border-left: $width solid $background-color;

data/dist/css3/_background-image.scss

@@ -4,45 +4,39 @@
 //************************************************************************//
 
 @mixin background-image($images...) {
-  background-image: _add-prefix($images, webkit);
-  background-image: _add-prefix($images);
-}
+  $webkit-images: ();
+  $spec-images: ();
+
+  @each $image in $images {
+    $webkit-image: ();
+    $spec-image: ();
+
+    @if (type-of($image) == string) {
+      $url-str:       str-slice($image, 0, 3);
+      $gradient-type: str-slice($image, 0, 6);
 
-@function _add-prefix($images, $vendor: false) {
-  $images-prefixed: ();
-  $gradient-positions: false;
-  @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); // linear or radial
-      $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)
+      @if $url-str == "url" {
+        $webkit-image: $image;
+          $spec-image: $image;
       }
-      @else {
-        $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue)
+
+      @else if $gradient-type == "linear" {
+        $gradients: _linear-gradient-parser($image);
+        $webkit-image:  map-get($gradients, webkit-image);
+        $spec-image:    map-get($gradients, spec-image);
       }
 
-      $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos);
-      $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);
+      @else if $gradient-type == "radial" {
+        $gradients: _radial-gradient-parser($image);
+        $webkit-image: map-get($gradients, webkit-image);
+        $spec-image:   map-get($gradients, spec-image);
+      }
     }
+
+    $webkit-images: append($webkit-images, $webkit-image, comma);
+    $spec-images:   append($spec-images,   $spec-image,   comma);
   }
-  @return $images-prefixed;
-}
 
-//Examples:
-  //@include background-image(linear-gradient(top, orange, red));
-  //@include background-image(radial-gradient(50% 50%, cover circle, orange, red));
-  //@include background-image(url("/images/a.png"), linear-gradient(orange, red));
-  //@include background-image(url("image.png"), linear-gradient(orange, red), url("image.png"));
-  //@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(orange, red));
+  background-image: $webkit-images;
+  background-image: $spec-images;
+}

data/dist/css3/_background.scss

@@ -3,101 +3,53 @@
 // notation.
 //************************************************************************//
 
-@mixin background(
-  $background-1       , $background-2: null,
-  $background-3: null, $background-4: null,
-  $background-5: null, $background-6: null,
-  $background-7: null, $background-8: null,
-  $background-9: null, $background-10: null,
-  $fallback: null
-) {
-  $backgrounds: $background-1, $background-2,
-                $background-3, $background-4,
-                $background-5, $background-6,
-                $background-7, $background-8,
-                $background-9, $background-10;
+@mixin background($backgrounds...) {
+  $webkit-backgrounds: ();
+  $spec-backgrounds: ();
 
-  $fallback-color: false;
-  @if (type-of($fallback) == color) or ($fallback == "transparent") {
-    $fallback-color: $fallback;
-  }
-  @else {
-    $fallback-color: _extract-background-color($backgrounds);
-  }
-
-  @if $fallback-color {
-    background-color: $fallback-color;
-  }
-  background: _background-add-prefix($backgrounds, webkit);
-  background: _background-add-prefix($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) {
-      $value: nth($final-bg-layer, $i);
-      @if type-of($value) == color {
-        @return $value;
-      }
-    }
-  }
-  @return false;
-}
-
-@function _background-add-prefix($backgrounds, $vendor: false) {
-  $backgrounds-prefixed: ();
+  @each $background in $backgrounds {
+    $webkit-background: ();
+    $spec-background: ();
+    $background-type: type-of($background);
 
-  @for $i from 1 through length($backgrounds) {
-    $shorthand: nth($backgrounds, $i); // Get member for current index
-    $type: type-of($shorthand); // Get type of variable - List (gradient) or String (image)
+    @if $background-type == string or list {
+      $background-str: if($background-type == list, nth($background, 1), $background);
 
-    // If shorthand is a list (gradient)
-    @if $type == list {
-      $first-member: nth($shorthand, 1); // Get first member of shorthand
+      $url-str:       str-slice($background-str, 0, 3);
+      $gradient-type: str-slice($background-str, 0, 6);
 
-      // Linear Gradient
-      @if index(linear radial, nth($first-member, 1)) {
-        $gradient-type: nth($first-member, 1); // linear || radial
-        $gradient-args:      false;
-        $gradient-positions: false;
-        $shorthand-start:    false;
-        @if type-of($first-member) == list { // Linear gradient plus additional shorthand values - lg(red,orange)repeat,...
-          $gradient-positions: nth($first-member, 2);
-          $gradient-args:      nth($first-member, 3);
-          $shorthand-start: 2;
-        }
-        @else { // Linear gradient only - lg(red,orange),...
-          $gradient-positions: nth($shorthand, 2);
-          $gradient-args:      nth($shorthand, 3); // Get gradient (red, blue)
-        }
+      @if $url-str == "url" {
+        $webkit-background: $background;
+          $spec-background: $background;
+      }
 
-        $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-positions);
-        $gradient: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
+      @else if $gradient-type == "linear" {
+        $gradients: _linear-gradient-parser("#{$background}");
+        $webkit-background: map-get($gradients, webkit-image);
+        $spec-background:   map-get($gradients, spec-image);
+      }
 
-        // Append any additional shorthand args to gradient
-        @if $shorthand-start {
-          @for $j from $shorthand-start through length($shorthand) {
-            $gradient: join($gradient, nth($shorthand, $j), space);
-          }
-        }
-        $backgrounds-prefixed: append($backgrounds-prefixed, $gradient, comma);
+      @else if $gradient-type == "radial" {
+        $gradients: _radial-gradient-parser("#{$background}");
+        $webkit-background: map-get($gradients, webkit-image);
+        $spec-background:   map-get($gradients, spec-image);
       }
-      // Image with additional properties
+
       @else {
-        $backgrounds-prefixed: append($backgrounds-prefixed, $shorthand, comma);
+        $webkit-background: $background;
+          $spec-background: $background;
       }
     }
-    // If shorthand is a simple string (color or image)
-    @else if $type == string {
-      $backgrounds-prefixed: join($backgrounds-prefixed, $shorthand, comma);
+
+    @else {
+      $webkit-background: $background;
+        $spec-background: $background;
     }
+
+    $webkit-backgrounds: append($webkit-backgrounds, $webkit-background, comma);
+    $spec-backgrounds:   append($spec-backgrounds,   $spec-background,   comma);
   }
-  @return $backgrounds-prefixed;
-}
 
-//Examples:
-  //@include background(linear-gradient(top, orange, red));
-  //@include background(radial-gradient(circle at 40% 40%, orange, red));
-  //@include background(url("/images/a.png") no-repeat, linear-gradient(orange, red));
-  //@include background(url("image.png") center center, linear-gradient(orange, red), url("image.png"));
+  background: $webkit-backgrounds;
+  background: $spec-backgrounds;
+}