bourbon-compass 3.1.8 → 3.2.0.beta.1.a

data/stylesheets/bourbon/_bourbon.scss

@@ -1,5 +1,8 @@
+// Settings
+@import "settings/prefixer";
+@import "settings/px-to-em";
+
 // Custom Helpers
-@import "helpers/deprecated-webkit-gradient";
 @import "helpers/gradient-positions-parser";
 @import "helpers/linear-positions-parser";
 @import "helpers/radial-arg-parser";
@@ -8,15 +11,17 @@
 @import "helpers/shape-size-stripper";
 
 // Custom Functions
-@import "functions/compact";
 @import "functions/flex-grid";
 @import "functions/grid-width";
+@import "functions/golden-ratio";
 @import "functions/linear-gradient";
 @import "functions/modular-scale";
 @import "functions/px-to-em";
 @import "functions/radial-gradient";
+@import "functions/strip-units";
 @import "functions/tint-shade";
 @import "functions/transition-property-name";
+@import "functions/unpack";
 
 // CSS3 Mixins
 @import "css3/animation";
@@ -27,9 +32,11 @@
 @import "css3/border-image";
 @import "css3/border-radius";
 @import "css3/box-sizing";
+@import "css3/calc";
 @import "css3/columns";
 @import "css3/flex-box";
 @import "css3/font-face";
+@import "css3/hyphens";
 @import "css3/hidpi-media-query";
 @import "css3/image-rendering";
 @import "css3/inline-block";
@@ -45,11 +52,14 @@
 // Addons & other mixins
 @import "addons/button";
 @import "addons/clearfix";
+@import "addons/directional-values";
+@import "addons/ellipsis";
 @import "addons/font-family";
 @import "addons/hide-text";
 @import "addons/html5-input-types";
 @import "addons/position";
 @import "addons/prefixer";
+@import "addons/rem";
 @import "addons/retina-image";
 @import "addons/size";
 @import "addons/timing-functions";

data/stylesheets/bourbon/addons/_button.scss

@@ -68,7 +68,7 @@
   box-shadow: inset 0 1px 0 0 $inset-shadow;
   color: $color;
   display: inline-block;
-  font-size: 11px;
+  font-size: inherit;
   font-weight: bold;
   @include linear-gradient ($base-color, $stop-gradient);
   padding: 7px 18px;
@@ -140,7 +140,7 @@
   box-shadow: inset 0 1px 0 0 $inset-shadow;
   color: $color;
   display: inline-block;
-  font-size: 14px;
+  font-size: inherit;
   font-weight: bold;
   @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
   padding: 8px 20px;
@@ -211,7 +211,7 @@
   box-shadow: inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3;
   color: $color;
   display: inline-block;
-  font-size: 11px;
+  font-size: inherit;
   font-weight: normal;
   line-height: 1;
   @include linear-gradient ($base-color, $stop-gradient);

data/stylesheets/bourbon/addons/_clearfix.scss

@@ -1,4 +1,4 @@
-// Micro clearfix provides an easy way to contain floats without adding additional markup
+// Modern micro clearfix provides an easy way to contain floats without adding additional markup.
 //
 // Example usage:
 //
@@ -12,18 +12,12 @@
 //    }
 
 @mixin clearfix {
-  *zoom: 1;
-
-  &:before,
-  &:after {
-    content: " ";
-    display: table;
-  }
-
   &:after {
-    clear: both;
+    content:"";
+    display:table;
+    clear:both;
   }
 }
 
 // Acknowledgements
-// Micro clearfix: [Nicolas Gallagher](http://nicolasgallagher.com/micro-clearfix-hack/)
+// Beat *that* clearfix: [Thierry Koblentz](http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php)

data/stylesheets/bourbon/addons/_directional-values.scss

@@ -0,0 +1,114 @@
+// directional-property mixins are shorthands
+// for writing properties like the following
+//
+// @include margin(null 0 10px);
+// ------
+// margin-right: 0;
+// margin-bottom: 10px;
+// margin-left: 0;
+//
+// - or -
+//
+// @include border-style(dotted null);
+// ------
+// border-top-style: dotted;
+// border-bottom-style: dotted;
+//
+// ------
+//
+// Note: You can also use false instead of null
+
+@function collapse-directionals($vals) {
+  $output: null;
+
+  $A: nth( $vals, 1 );
+  $B: if( length($vals) < 2, $A, nth($vals, 2));
+  $C: if( length($vals) < 3, $A, nth($vals, 3));
+  $D: if( length($vals) < 2, $A, nth($vals, if( length($vals) < 4, 2, 4) ));
+
+  @if $A == 0 { $A: 0 }
+  @if $B == 0 { $B: 0 }
+  @if $C == 0 { $C: 0 }
+  @if $D == 0 { $D: 0 }
+
+  @if $A == $B and $A == $C and $A == $D { $output: $A          }
+  @else if $A == $C and $B == $D         { $output: $A $B       }
+  @else if $B == $D                      { $output: $A $B $C    }
+  @else                                  { $output: $A $B $C $D }
+
+  @return $output;
+}
+
+@function contains-falsy($list) {
+  @each $item in $list {
+    @if not $item {
+      @return true;
+    }
+  }
+
+  @return false;
+}
+
+@mixin directional-property($pre, $suf, $vals) {
+  // Property Names
+  $top:    $pre + "-top"    + if($suf, "-#{$suf}", "");
+  $bottom: $pre + "-bottom" + if($suf, "-#{$suf}", "");
+  $left:   $pre + "-left"   + if($suf, "-#{$suf}", "");
+  $right:  $pre + "-right"  + if($suf, "-#{$suf}", "");
+  $all:    $pre +             if($suf, "-#{$suf}", "");
+
+  // Get list inside $vals (is there a better way?)
+  @each $val in $vals { $vals: $val; }
+
+  $vals: collapse-directionals($vals);
+
+  @if contains-falsy($vals) {
+    @if nth($vals, 1) { #{$top}: nth($vals, 1); }
+
+    @if length($vals) == 1 {
+      @if nth($vals, 1) { #{$right}: nth($vals, 1); }
+    } @else {
+      @if nth($vals, 2) { #{$right}: nth($vals, 2); }
+    }
+
+    // prop: top/bottom right/left
+    @if length($vals) == 2 {
+      @if nth($vals, 1) { #{$bottom}: nth($vals, 1); }
+      @if nth($vals, 2) { #{$left}:   nth($vals, 2); }
+
+    // prop: top right/left bottom
+    } @else if length($vals) == 3 {
+      @if nth($vals, 3) { #{$bottom}: nth($vals, 3); }
+      @if nth($vals, 2) { #{$left}:   nth($vals, 2); }
+
+    // prop: top right bottom left
+    } @else if length($vals) == 4 {
+      @if nth($vals, 3) { #{$bottom}: nth($vals, 3); }
+      @if nth($vals, 4) { #{$left}:   nth($vals, 4); }
+    }
+
+  // prop: top/right/bottom/left
+  } @else {
+    #{$all}: $vals;
+  }
+}
+
+@mixin margin($vals...) {
+  @include directional-property(margin, false, $vals);
+}
+
+@mixin padding($vals...) {
+  @include directional-property(padding, false, $vals);
+}
+
+@mixin border-style($vals...) {
+  @include directional-property(border, style, $vals);
+}
+
+@mixin border-color($vals...) {
+  @include directional-property(border, color, $vals);
+}
+
+@mixin border-width($vals...) {
+  @include directional-property(border, width, $vals);
+}

data/stylesheets/bourbon/addons/_ellipsis.scss

@@ -0,0 +1,7 @@
+@mixin ellipsis($width: 100%) {
+  display: inline-block;
+  max-width: $width;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

data/stylesheets/bourbon/addons/_font-family.scss

@@ -1,5 +1,5 @@
 $georgia: Georgia, Cambria, "Times New Roman", Times, serif;
-$helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
+$helvetica: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
 $lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
 $monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
 $verdana: Verdana, Geneva, sans-serif;

data/stylesheets/bourbon/addons/_hide-text.scss

@@ -1,5 +1,10 @@
 @mixin hide-text {
-  color:            transparent;
-  font:             0/0 a;
-  text-shadow:      none;
+  overflow: hidden;
+
+  &:before {
+    content: "";
+    display: block;
+    width: 0;
+    height: 100%;
+  }
 }

data/stylesheets/bourbon/addons/_html5-input-types.scss

@@ -22,7 +22,7 @@ $inputs-list: 'input[type="email"]',
 
 $unquoted-inputs-list: ();
 @each $input-type in $inputs-list {
-  $unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma);
+  $unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma) !global;
 }
 
 $all-text-inputs: $unquoted-inputs-list;
@@ -33,7 +33,7 @@ $all-text-inputs: $unquoted-inputs-list;
 $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: append($all-text-inputs-hover, $input-type-hover, comma) !global;
 }
 
 // Focus Pseudo-class
@@ -41,7 +41,7 @@ $all-text-inputs-hover: ();
 $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: append($all-text-inputs-focus, $input-type-focus, comma) !global;
 }
 
 // You must use interpolation on the variable:
@@ -54,3 +54,57 @@ $all-text-inputs-focus: ();
 //   #{$all-text-inputs}, textarea {
 //     border: 1px solid red;
 //   }
+
+
+
+//************************************************************************//
+// Generate a variable ($all-button-inputs) with a list of all html5
+// input types that have a button-based input, excluding button.
+//************************************************************************//
+$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;
+
+
+// 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);
+}
+
+// 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);
+}
+
+// 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);
+}
+
+// You must use interpolation on the variable:
+// #{$all-button-inputs}
+// #{$all-button-inputs-hover}
+// #{$all-button-inputs-focus}
+// #{$all-button-inputs-active}
+
+// Example
+//************************************************************************//
+//   #{$all-button-inputs}, button {
+//     border: 1px solid red;
+//   }

data/stylesheets/bourbon/addons/_position.scss

@@ -5,6 +5,8 @@
     $position: relative;
   }
 
+  $coordinates: unpack($coordinates);
+
   $top: nth($coordinates, 1);
   $right: nth($coordinates, 2);
   $bottom: nth($coordinates, 3);
@@ -12,31 +14,19 @@
 
   position: $position;
 
-  @if $top == auto {
-    top: $top;
-  }
-  @else if not(unitless($top)) {
+  @if ($top and $top == auto) or (type-of($top) == number and not unitless($top)) {
     top: $top;
   }
 
-  @if $right == auto {
-    right: $right;
-  }
-  @else if not(unitless($right)) {
+  @if ($right and $right == auto) or (type-of($right) == number and not unitless($right)) {
     right: $right;
   }
 
-  @if $bottom == auto {
-    bottom: $bottom;
-  }
-  @else if not(unitless($bottom)) {
+  @if ($bottom and $bottom == auto) or (type-of($bottom) == number and not unitless($bottom)) {
     bottom: $bottom;
   }
 
-  @if $left == auto {
-    left: $left;
-  }
-  @else if not(unitless($left)) {
+  @if ($left and $left == auto) or (type-of($left) == number and not unitless($left)) {
     left: $left;
   }
 }

data/stylesheets/bourbon/addons/_prefixer.scss

@@ -1,11 +1,7 @@
 //************************************************************************//
 // Example: @include prefixer(border-radius, $radii, webkit ms spec);
 //************************************************************************//
-$prefix-for-webkit:    true !default;
-$prefix-for-mozilla:   true !default;
-$prefix-for-microsoft: true !default;
-$prefix-for-opera:     true !default;
-$prefix-for-spec:      true !default; // required for keyframe mixin
+// Variables located in /settings/_prefixer.scss
 
 @mixin prefixer ($property, $value, $prefixes) {
   @each $prefix in $prefixes {

data/stylesheets/bourbon/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 $pxval {
+    $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/stylesheets/bourbon/addons/_retina-image.scss

@@ -1,19 +1,18 @@
-@mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $asset-pipeline: false) {
+@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}");
   }
   @else {
-    background-image: url("#{$filename}.#{$extension}");
+    background-image:       url("#{$filename}.#{$extension}");
   }
 
   @include hidpi {
-
     @if $asset-pipeline {
       @if $retina-filename {
         background-image: image-url("#{$retina-filename}.#{$extension}");
       }
       @else {
-        background-image: image-url("#{$filename}@2x.#{$extension}");
+        background-image: image-url("#{$filename}#{$retina-suffix}.#{$extension}");
       }
     }
 
@@ -22,7 +21,7 @@
         background-image: url("#{$retina-filename}.#{$extension}");
       }
       @else {
-        background-image: url("#{$filename}@2x.#{$extension}");
+        background-image: url("#{$filename}#{$retina-suffix}.#{$extension}");
       }
     }