bourbon 3.2.0.beta.2 → 3.2.0

data/app/assets/stylesheets/addons/_prefixer.scss

@@ -37,9 +37,9 @@
 }
 
 @mixin disable-prefix-for-all() {
-  $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;
+  $prefix-for-webkit:    false;
+  $prefix-for-mozilla:   false;
+  $prefix-for-microsoft: false;
+  $prefix-for-opera:     false;
+  $prefix-for-spec:      false;
 }

data/app/assets/stylesheets/addons/_triangle.scss

@@ -2,44 +2,82 @@
   height: 0;
   width: 0;
 
+  $width: nth($size, 1);
+  $height: nth($size, length($size));
+
+  $foreground-color: nth($color, 1);
+  $background-color: if(length($color) == 2, nth($color, 2), transparent);
+
   @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
-    border-color: transparent;
-    border-style: solid;
-    border-width: $size / 2;
+
+    $width: $width / 2;
+    $height: if(length($size) > 1, $height, $height/2);
 
     @if $direction == up {
-      border-bottom-color: $color;
+      border-left: $width solid $background-color;
+      border-right: $width solid $background-color;
+      border-bottom: $height solid $foreground-color;
 
     } @else if $direction == right {
-      border-left-color:   $color;
+      border-top: $width solid $background-color;
+      border-bottom: $width solid $background-color;
+      border-left: $height solid $foreground-color;
 
     } @else if $direction == down {
-      border-top-color:    $color;
+      border-left: $width solid $background-color;
+      border-right: $width solid $background-color;
+      border-top: $height solid $foreground-color;
 
     } @else if $direction == left {
-      border-right-color:  $color;
+      border-top: $width solid $background-color;
+      border-bottom: $width solid $background-color;
+      border-right: $height solid $foreground-color;
     }
   }
 
   @else if ($direction == up-right) or ($direction == up-left) {
-    border-top: $size solid $color;
+    border-top: $height solid $foreground-color;
 
     @if $direction == up-right {
-      border-left:  $size solid transparent;
+      border-left:  $width solid $background-color;
 
     } @else if $direction == up-left {
-      border-right: $size solid transparent;
+      border-right: $width solid $background-color;
     }
   }
 
   @else if ($direction == down-right) or ($direction == down-left) {
-    border-bottom: $size solid $color;
+    border-bottom: $height solid $foreground-color;
 
     @if $direction == down-right {
-      border-left:  $size solid transparent;
+      border-left:  $width solid $background-color;
 
     } @else if $direction == down-left {
-      border-right: $size solid transparent;
+      border-right: $width solid $background-color;
     }
   }
+
+  @else if ($direction == inset-up) {
+    border-width: $height $width;
+    border-style: solid;
+    border-color: $background-color $background-color $foreground-color;
+  }
+
+  @else if ($direction == inset-down) {
+    border-width: $height $width;
+    border-style: solid;
+    border-color: $foreground-color $background-color $background-color;
+  }
+
+  @else if ($direction == inset-right) {
+    border-width: $width $height;
+    border-style: solid;
+    border-color: $background-color $background-color $background-color $foreground-color;
+  }
+
+  @else if ($direction == inset-left) {
+    border-width: $width $height;
+    border-style: solid;
+    border-color: $background-color $foreground-color $background-color $background-color;
+  }
 }

data/app/assets/stylesheets/addons/_word-wrap.scss

@@ -0,0 +1,8 @@
+@mixin word-wrap($wrap: break-word) {
+  word-wrap: $wrap;
+
+  @if $wrap == break-word {
+    overflow-wrap: break-word;
+    word-break: break-all;
+  }
+}

data/app/assets/stylesheets/css3/_columns.scss

@@ -15,7 +15,7 @@
 
 @mixin column-fill($arg: auto) {
 // auto || length
-  @include prefixer(columns-fill, $arg, webkit moz spec);
+  @include prefixer(column-fill, $arg, webkit moz spec);
 }
 
 @mixin column-rule($arg) {

data/app/assets/stylesheets/css3/_filter.scss

@@ -0,0 +1,5 @@
+@mixin filter($function: none) {
+  // <filter-function> [<filter-function]* | none
+  @include prefixer(filter, $function, webkit spec);
+}
+

data/app/assets/stylesheets/css3/_font-feature-settings.scss

@@ -0,0 +1,10 @@
+// Font feature settings mixin and property default.
+// Examples: @include font-feature-settings("liga");
+//           @include font-feature-settings("lnum" false);
+//           @include font-feature-settings("pnum" 1, "kern" 0);
+//           @include font-feature-settings("ss01", "ss02");
+
+@mixin font-feature-settings($settings...) {
+  @if length($settings) == 0 { $settings: none; }
+  @include prefixer(font-feature-settings, $settings, webkit moz ms spec);
+}

data/app/assets/stylesheets/css3/_image-rendering.scss

@@ -1,6 +1,7 @@
 @mixin image-rendering ($mode:auto) {
 
   @if ($mode == crisp-edges) {
+      -ms-interpolation-mode: nearest-neighbor; // IE8+
       image-rendering: -moz-crisp-edges;
       image-rendering: -o-crisp-edges;
       image-rendering: -webkit-optimize-contrast;

data/app/assets/stylesheets/css3/_keyframes.scss

@@ -8,29 +8,28 @@
 
   @if $original-prefix-for-webkit {
     @include disable-prefix-for-all();
-    $prefix-for-webkit: true !global;
+    $prefix-for-webkit: true;
     @-webkit-keyframes #{$name} {
       @content;
     }
   }
   @if $original-prefix-for-mozilla {
     @include disable-prefix-for-all();
-    $prefix-for-mozilla: true !global;
+    $prefix-for-mozilla: true;
     @-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;
+
   @if $original-prefix-for-spec {
-    @include disable-prefix-for-all();
-    $prefix-for-spec: true !global;
     @keyframes #{$name} {
       @content;
     }
   }
-
-  $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;
 }

data/app/assets/stylesheets/css3/_transition.scss

@@ -4,13 +4,56 @@
 //          @include transition-property (transform, opacity);
 
 @mixin transition ($properties...) {
-  @if length($properties) >= 1 {
-    @include prefixer(transition, $properties, webkit moz spec);
+  // Fix for vendor-prefix transform property
+  $needs-prefixes: false;
+  $webkit: ();
+  $moz: ();
+  $spec: ();
+
+  // Create lists for vendor-prefixed transform
+  @each $list in $properties {
+    @if nth($list, 1) == "transform" {
+      $needs-prefixes: true;
+      $list1: -webkit-transform;
+      $list2: -moz-transform;
+      $list3: ();
+
+      @each $var in $list {
+        $list3: join($list3, $var);
+
+        @if $var != "transform" {
+          $list1: join($list1, $var);
+          $list2: join($list2, $var);
+        }
+      }
+
+      $webkit: append($webkit, $list1);
+         $moz: append($moz,    $list2);
+        $spec: append($spec,   $list3);
+    }
+
+    // Create lists for non-prefixed transition properties
+    @else {
+      $webkit:  append($webkit, $list, comma);
+      $moz:     append($moz,    $list, comma);
+      $spec:    append($spec,   $list, comma);
+    }
   }
 
+  @if $needs-prefixes {
+    -webkit-transition: $webkit;
+       -moz-transition: $moz;
+            transition: $spec;
+  }
   @else {
-    $properties: all 0.15s ease-out 0s;
-    @include prefixer(transition, $properties, webkit moz spec);
+    @if length($properties) >= 1 {
+      @include prefixer(transition, $properties, webkit moz spec);
+    }
+
+    @else {
+      $properties: all 0.15s ease-out 0s;
+      @include prefixer(transition, $properties, webkit moz spec);
+    }
   }
 }
 

data/app/assets/stylesheets/functions/_color-lightness.scss

@@ -0,0 +1,13 @@
+// Programatically determines whether a color is light or dark
+// Returns a boolean
+// 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));
+
+  $-local-lightness: ($-local-red * 0.2126 + $-local-green * 0.7152 + $-local-blue * 0.0722) / 255;
+
+  @return $-local-lightness > .6;
+}

data/app/assets/stylesheets/functions/_modular-scale.scss

@@ -1,4 +1,4 @@
-// Scaling Varaibles
+// Scaling Variables
 $golden:           1.618;
 $minor-second:     1.067;
 $major-second:     1.125;

data/app/assets/stylesheets/functions/_px-to-rem.scss

@@ -0,0 +1,15 @@
+// Convert pixels to rems
+// eg. for a relational value of 12px write rem(12)
+// Assumes $em-base is the font-size of <html>
+
+@function rem($pxval) {
+  @if not unitless($pxval) {
+      $pxval: strip-units($pxval);
+  }
+
+  $base: $em-base;
+  @if not unitless($base) {
+      $base: strip-units($base);
+  }
+  @return ($pxval / $base) * 1rem;
+}

data/bourbon.gemspec

@@ -6,7 +6,7 @@ Gem::Specification.new do |s|
   s.name        = "bourbon"
   s.version     = Bourbon::VERSION
   s.platform    = Gem::Platform::RUBY
-  s.authors     = ["Phil LaPier", "Chad Mazzola", "Matt Jankowski", "Nick Quaranto", "Jeremy Raines", "Mike Burns", "Andres Mejia", "Travis Haynes", "Chris Lloyd", "Gabe Berke-Williams", "J. Edward Dewyea", "Reda Lemeden"]
+  s.authors     = ["Phil LaPier", "Chad Mazzola", "Matt Jankowski", "Nick Quaranto", "Jeremy Raines", "Mike Burns", "Andres Mejia", "Travis Haynes", "Chris Lloyd", "Gabe Berke-Williams", "J. Edward Dewyea", "Reda Lemeden", "Kyle Fiedler"]
   s.email       = ["support@thoughtbot.com"]
   s.license     = 'MIT'
   s.homepage    = "https://github.com/thoughtbot/bourbon"
@@ -27,7 +27,7 @@ that support only CSS3 prefixed properties.
   s.executables   = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
   s.require_paths = ["lib"]
 
-  s.add_dependency('sass', '>= 3.3.0.rc.2')
+  s.add_dependency('sass', '~> 3.2')
   s.add_dependency('thor')
 
   s.add_development_dependency('aruba', '~> 0.4')

data/bower.json

@@ -1,6 +1,7 @@
 {
   "name": "bourbon",
   "homepage": "http://bourbon.io/",
+  "version": "3.2.0",
   "main": "dist/_bourbon.scss",
   "ignore": [
     "app",

data/dist/_bourbon.scss

@@ -11,12 +11,14 @@
 @import "helpers/shape-size-stripper";
 
 // Custom Functions
+@import "functions/color-lightness";
 @import "functions/flex-grid";
-@import "functions/grid-width";
 @import "functions/golden-ratio";
+@import "functions/grid-width";
 @import "functions/linear-gradient";
 @import "functions/modular-scale";
 @import "functions/px-to-em";
+@import "functions/px-to-rem";
 @import "functions/radial-gradient";
 @import "functions/strip-units";
 @import "functions/tint-shade";
@@ -34,6 +36,7 @@
 @import "css3/box-sizing";
 @import "css3/calc";
 @import "css3/columns";
+@import "css3/filter";
 @import "css3/flex-box";
 @import "css3/font-face";
 @import "css3/hyphens";
@@ -59,11 +62,11 @@
 @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";
 @import "addons/triangle";
+@import "addons/word-wrap";
 
 // Soon to be deprecated Mixins
 @import "bourbon-deprecated-upcoming";

data/dist/addons/_button.scss

@@ -1,38 +1,51 @@
-@mixin button ($style: simple, $base-color: #4294f0) {
+@mixin button ($style: simple, $base-color: #4294f0, $text-size: inherit, $padding: 7px 18px) {
 
-  @if type-of($style) == color {
+  @if type-of($style) == string and type-of($base-color) == color {
+    @include buttonstyle($style, $base-color, $text-size, $padding);
+  }
+
+  @if type-of($style) == string and type-of($base-color) == number {
+    $padding: $text-size;
+    $text-size: $base-color;
+    $base-color: #4294f0;
+
+    @if $padding == inherit {
+      $padding: 7px 18px;
+    }
+
+    @include buttonstyle($style, $base-color, $text-size, $padding);
+  }
+
+  @if type-of($style) == color and type-of($base-color) == color {
     $base-color: $style;
     $style: simple;
+    @include buttonstyle($style, $base-color, $text-size, $padding);
   }
 
-  // Grayscale button
-  @if $base-color == grayscale($base-color) {
-    @if $style == simple {
-      @include simple($base-color, $grayscale: true);
-    }
+  @if type-of($style) == color and type-of($base-color) == number {
+    $padding: $text-size;
+    $text-size: $base-color;
+    $base-color: $style;
+    $style: simple;
 
-    @else if $style == shiny {
-      @include shiny($base-color, $grayscale: true);
+    @if $padding == inherit {
+      $padding: 7px 18px;
     }
 
-    @else if $style == pill {
-      @include pill($base-color, $grayscale: true);
-    }
+    @include buttonstyle($style, $base-color, $text-size, $padding);
   }
 
-  // Colored button
-  @else {
-    @if $style == simple {
-      @include simple($base-color);
-    }
+  @if type-of($style) == number {
+    $padding: $base-color;
+    $text-size: $style;
+    $base-color: #4294f0;
+    $style: simple;
 
-    @else if $style == shiny {
-      @include shiny($base-color);
+    @if $padding == #4294f0 {
+      $padding: 7px 18px;
     }
 
-    @else if $style == pill {
-      @include pill($base-color);
-    }
+    @include buttonstyle($style, $base-color, $text-size, $padding);
   }
 
   &:disabled {
@@ -42,16 +55,55 @@
 }
 
 
+// Selector Style Button
+//************************************************************************//
+@mixin buttonstyle($type, $b-color, $t-size, $pad) {
+  // Grayscale button
+  @if $type == simple and $b-color == grayscale($b-color) {
+    @include simple($b-color, true, $t-size, $pad);
+  }
+
+  @if $type == shiny and $b-color == grayscale($b-color) {
+    @include shiny($b-color, true, $t-size, $pad);
+  }
+
+  @if $type == pill and $b-color == grayscale($b-color) {
+    @include pill($b-color, true, $t-size, $pad);
+  }
+
+  @if $type == flat and $b-color == grayscale($b-color) {
+    @include flat($b-color, true, $t-size, $pad);
+  }
+
+  // Colored button
+  @if $type == simple {
+    @include simple($b-color, false, $t-size, $pad);
+  }
+
+  @else if $type == shiny {
+    @include shiny($b-color, false, $t-size, $pad);
+  }
+
+  @else if $type == pill {
+    @include pill($b-color, false, $t-size, $pad);
+  }
+
+  @else if $type == flat {
+    @include flat($b-color, false, $t-size, $pad);
+  }
+}
+
+
 // Simple Button
 //************************************************************************//
-@mixin simple($base-color, $grayscale: false) {
+@mixin simple($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
   $color:         hsl(0, 0, 100%);
   $border:        adjust-color($base-color, $saturation:  9%,  $lightness: -14%);
   $inset-shadow:  adjust-color($base-color, $saturation: -8%,  $lightness:  15%);
   $stop-gradient: adjust-color($base-color, $saturation:  9%,  $lightness: -11%);
   $text-shadow:   adjust-color($base-color, $saturation:  15%, $lightness: -18%);
 
-  @if lightness($base-color) > 70% {
+  @if is-light($base-color) {
     $color:       hsl(0, 0, 20%);
     $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
   }
@@ -68,10 +120,10 @@
   box-shadow: inset 0 1px 0 0 $inset-shadow;
   color: $color;
   display: inline-block;
-  font-size: inherit;
+  font-size: $textsize;
   font-weight: bold;
   @include linear-gradient ($base-color, $stop-gradient);
-  padding: 7px 18px;
+  padding: $padding;
   text-decoration: none;
   text-shadow: 0 1px 0 $text-shadow;
   background-clip: padding-box;
@@ -92,7 +144,8 @@
     @include linear-gradient ($base-color-hover, $stop-gradient-hover);
   }
 
-  &:active:not(:disabled) {
+  &:active:not(:disabled),
+  &:focus:not(:disabled) {
     $border-active:       adjust-color($base-color, $saturation: 9%, $lightness: -14%);
     $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
 
@@ -102,14 +155,14 @@
     }
 
     border: 1px solid $border-active;
-    box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 #eee;
+    box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active;
   }
 }
 
 
 // Shiny Button
 //************************************************************************//
-@mixin shiny($base-color, $grayscale: false) {
+@mixin shiny($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
   $color:         hsl(0, 0, 100%);
   $border:        adjust-color($base-color, $red: -117, $green: -111, $blue: -81);
   $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122);
@@ -119,7 +172,7 @@
   $text-shadow:   adjust-color($base-color, $red: -140, $green: -141, $blue: -114);
   $third-stop:    adjust-color($base-color, $red: -86,  $green: -75,  $blue: -48);
 
-  @if lightness($base-color) > 70% {
+  @if is-light($base-color) {
     $color:       hsl(0, 0, 20%);
     $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
   }
@@ -140,10 +193,10 @@
   box-shadow: inset 0 1px 0 0 $inset-shadow;
   color: $color;
   display: inline-block;
-  font-size: inherit;
+  font-size: $textsize;
   font-weight: bold;
   @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
-  padding: 8px 20px;
+  padding: $padding;
   text-align: center;
   text-decoration: none;
   text-shadow: 0 -1px 1px $text-shadow;
@@ -168,21 +221,22 @@
                                   $fourth-stop-hover 100%);
   }
 
-  &:active:not(:disabled) {
+  &:active:not(:disabled),
+  &:focus:not(:disabled) {
     $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
 
     @if $grayscale == true {
       $inset-shadow-active: grayscale($inset-shadow-active);
     }
 
-    box-shadow: inset 0 0 20px 0 $inset-shadow-active, 0 1px 0 #fff;
+    box-shadow: inset 0 0 20px 0 $inset-shadow-active;
   }
 }
 
 
 // Pill Button
 //************************************************************************//
-@mixin pill($base-color, $grayscale: false) {
+@mixin pill($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
   $color:         hsl(0, 0, 100%);
   $border-bottom: adjust-color($base-color, $hue:  8, $saturation: -11%, $lightness: -26%);
   $border-sides:  adjust-color($base-color, $hue:  4, $saturation: -21%, $lightness: -21%);
@@ -191,7 +245,7 @@
   $stop-gradient: adjust-color($base-color, $hue:  8, $saturation:  14%, $lightness: -10%);
   $text-shadow:   adjust-color($base-color, $hue:  5, $saturation: -19%, $lightness: -15%);
 
-  @if lightness($base-color) > 70% {
+  @if is-light($base-color) {
     $color:       hsl(0, 0, 20%);
     $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
   }
@@ -208,14 +262,14 @@
   border: 1px solid $border-top;
   border-color: $border-top $border-sides $border-bottom;
   border-radius: 16px;
-  box-shadow: inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3;
+  box-shadow: inset 0 1px 0 0 $inset-shadow;
   color: $color;
   display: inline-block;
-  font-size: inherit;
+  font-size: $textsize;
   font-weight: normal;
   line-height: 1;
   @include linear-gradient ($base-color, $stop-gradient);
-  padding: 5px 16px;
+  padding: $padding;
   text-align: center;
   text-decoration: none;
   text-shadow: 0 -1px 1px $text-shadow;
@@ -249,7 +303,8 @@
     background-clip: padding-box;
   }
 
-  &:active:not(:disabled) {
+  &:active:not(:disabled),
+  &:focus:not(:disabled) {
     $active-color:         adjust-color($base-color, $hue: 4,  $saturation: -12%,  $lightness: -10%);
     $border-active:        adjust-color($base-color, $hue: 6,  $saturation: -2.5%, $lightness: -30%);
     $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation:  6%,   $lightness: -31%);
@@ -267,7 +322,53 @@
     background: $active-color;
     border: 1px solid $border-active;
     border-bottom: 1px solid $border-bottom-active;
-    box-shadow: inset 0 0 6px 3px $inset-shadow-active, 0 1px 0 0 #fff;
+    box-shadow: inset 0 0 6px 3px $inset-shadow-active;
     text-shadow: 0 -1px 1px $text-shadow-active;
   }
 }
+
+
+
+// Flat Button
+//************************************************************************//
+@mixin flat($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
+  $color:         hsl(0, 0, 100%);
+
+  @if is-light($base-color) {
+    $color:       hsl(0, 0, 20%);
+  }
+
+  background-color: $base-color;
+  border-radius: 3px;
+  border: none;
+  color: $color;
+  display: inline-block;
+  font-size: inherit;
+  font-weight: bold;
+  padding: 7px 18px;
+  text-decoration: none;
+  background-clip: padding-box;
+
+  &:hover:not(:disabled){
+    $base-color-hover:    adjust-color($base-color, $saturation: 4%, $lightness: 5%);
+
+    @if $grayscale == true {
+      $base-color-hover: grayscale($base-color-hover);
+    }
+
+    background-color: $base-color-hover;
+    cursor: pointer;
+  }
+
+  &:active:not(:disabled),
+  &:focus:not(:disabled) {
+    $base-color-active: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
+
+    @if $grayscale == true {
+      $base-color-active: grayscale($base-color-active);
+    }
+
+    background-color: $base-color-active;
+    cursor: pointer;
+  }
+}