bourbon 2.0.0.rc1 → 2.1.0

data/app/assets/stylesheets/_bourbon.scss

@@ -7,6 +7,7 @@
 @import "functions/radial-gradient";
 @import "functions/render-gradients";
 @import "functions/tint-shade";
+@import "functions/transition-property-name";
 
 // CSS3 Mixins
 @import "css3/animation";
@@ -21,6 +22,7 @@
 @import "css3/flex-box";
 @import "css3/inline-block";
 @import "css3/linear-gradient";
+@import "css3/prefixer";
 @import "css3/radial-gradient";
 @import "css3/transform";
 @import "css3/transition";
@@ -29,7 +31,9 @@
 // Addons & other mixins
 @import "addons/button";
 @import "addons/clearfix";
+@import "addons/font-face";
 @import "addons/font-family";
 @import "addons/hide-text";
 @import "addons/html5-input-types";
+@import "addons/position";
 @import "addons/timing-functions";

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

@@ -34,6 +34,11 @@
       @include pill($base-color);
     }
   }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
 }
 
 
@@ -71,7 +76,7 @@
   text-shadow: 0 1px 0 $text-shadow;
   -webkit-background-clip: padding-box;
 
-  &:hover {
+  &:hover:not(:disabled) {
     $base-color-hover:    adjust-color($base-color, $saturation: -4%, $lightness: -5%);
     $inset-shadow-hover:  adjust-color($base-color, $saturation: -7%, $lightness:  5%);
     $stop-gradient-hover: adjust-color($base-color, $saturation:  8%, $lightness: -14%);
@@ -87,7 +92,7 @@
     @include linear-gradient ($base-color-hover, $stop-gradient-hover);
   }
 
-  &:active {
+  &:active:not(:disabled) {
     $border-active:       adjust-color($base-color, $saturation: 9%, $lightness: -14%);
     $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
 
@@ -143,7 +148,7 @@
   text-decoration: none;
   text-shadow: 0 -1px 1px $text-shadow;
 
-  &:hover {
+  &:hover:not(:disabled) {
     $first-stop-hover:  adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
     $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51);
     $third-stop-hover:  adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
@@ -163,7 +168,7 @@
                                   $fourth-stop-hover 100%);
   }
 
-  &:active {
+  &:active:not(:disabled) {
     $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
 
     @if $grayscale == true {
@@ -216,7 +221,7 @@
   text-shadow: 0 -1px 1px $text-shadow;
   -webkit-background-clip: padding-box;
 
-  &:hover {
+  &:hover:not(:disabled) {
     $base-color-hover:    adjust-color($base-color,                                $lightness: -4.5%);
     $border-bottom:       adjust-color($base-color, $hue:  8, $saturation:  13.5%, $lightness: -32%);
     $border-sides:        adjust-color($base-color, $hue:  4, $saturation: -2%,    $lightness: -27%);
@@ -244,7 +249,7 @@
     -webkit-background-clip: padding-box;
   }
 
-  &:active {
+  &:active: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%);
@@ -266,4 +271,3 @@
     text-shadow: 0 -1px 1px $text-shadow-active;
   }
 }
-

data/app/assets/stylesheets/addons/_font-face.scss

@@ -0,0 +1,12 @@
+@mixin font-face($font-family, $file-path, $weight: normal, $style: normal ) {
+  @font-face {
+      font-family: $font-family;
+      src: url('#{$file-path}.eot');
+      src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
+           url('#{$file-path}.woff') format('woff'),
+           url('#{$file-path}.ttf') format('truetype'),
+           url('#{$file-path}.svg##{$font-family}') format('svg');
+      font-weight: $weight;
+      font-style: $style;
+  }
+}

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

@@ -0,0 +1,42 @@
+@mixin position ($position: relative, $coordinates: 0 0 0 0) {
+
+  @if type-of($position) == list {
+    $coordinates: $position;
+    $position: relative;
+  }
+
+  $top: nth($coordinates, 1);
+  $right: nth($coordinates, 2);
+  $bottom: nth($coordinates, 3);
+  $left: nth($coordinates, 4);
+
+  position: $position;
+
+  @if $top == auto {
+    top: $top;
+  }
+  @else if not(unitless($top)) {
+    top: $top;
+  }
+
+  @if $right == auto {
+    right: $right;
+  }
+  @else if not(unitless($right)) {
+    right: $right;
+  }
+
+  @if $bottom == auto {
+    bottom: $bottom;
+  }
+  @else if not(unitless($bottom)) {
+    bottom: $bottom;
+  }
+
+  @if $left == auto {
+    left: $left;
+  }
+  @else if not(unitless($left)) {
+    left: $left;
+  }
+}

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

@@ -11,9 +11,7 @@
     $full: compact($animation-1, $animation-2, $animation-3, $animation-4,
                    $animation-5, $animation-6, $animation-7, $animation-8, $animation-9);
 
-  -webkit-animation: $full;
-     -moz-animation: $full;
-          animation: $full;
+  @include prefixer(animation, $full);
 }
 
 // Individual Animation Properties
@@ -26,9 +24,7 @@
     $full:  compact($name-1, $name-2, $name-3, $name-4,
                     $name-5, $name-6, $name-7, $name-8, $name-9);
 
-  -webkit-animation-name: $full;
-     -moz-animation-name: $full;
-          animation-name: $full;
+  @include prefixer(animation-name, $full);
 }
 
 
@@ -41,9 +37,7 @@
     $full:  compact($time-1, $time-2, $time-3, $time-4,
                     $time-5, $time-6, $time-7, $time-8, $time-9);
 
-  -webkit-animation-duration: $full;
-     -moz-animation-duration: $full;
-          animation-duration: $full;
+  @include prefixer(animation-duration, $full);
 }
 
 
@@ -57,9 +51,7 @@
     $full:  compact($motion-1, $motion-2, $motion-3, $motion-4,
                     $motion-5, $motion-6, $motion-7, $motion-8, $motion-9);
 
-  -webkit-animation-timing-function: $full;
-     -moz-animation-timing-function: $full;
-          animation-timing-function: $full;
+  @include prefixer(animation-timing-function, $full);
 }
 
 
@@ -73,9 +65,7 @@
     $full:  compact($value-1, $value-2, $value-3, $value-4,
                     $value-5, $value-6, $value-7, $value-8, $value-9);
 
-  -webkit-animation-iteration-count: $full;
-     -moz-animation-iteration-count: $full;
-          animation-iteration-count: $full;
+  @include prefixer(animation-iteration-count, $full);
 }
 
 
@@ -89,9 +79,7 @@
     $full:  compact($direction-1, $direction-2, $direction-3, $direction-4,
                     $direction-5, $direction-6, $direction-7, $direction-8, $direction-9);
 
-  -webkit-animation-direction: $full;
-     -moz-animation-direction: $full;
-          animation-direction: $full;
+  @include prefixer(animation-direction, $full);
 }
 
 
@@ -105,9 +93,7 @@
     $full:  compact($state-1, $state-2, $state-3, $state-4,
                     $state-5, $state-6, $state-7, $state-8, $state-9);
 
-  -webkit-animation-play-state: $full;
-     -moz-animation-play-state: $full;
-          animation-play-state: $full;
+  @include prefixer(animation-play-state, $full);
 }
 
 
@@ -120,9 +106,7 @@
     $full:  compact($time-1, $time-2, $time-3, $time-4,
                     $time-5, $time-6, $time-7, $time-8, $time-9);
 
-  -webkit-animation-delay: $full;
-     -moz-animation-delay: $full;
-          animation-delay: $full;
+  @include prefixer(animation-delay, $full);
 }
 
 
@@ -137,7 +121,5 @@
     $full:  compact($mode-1, $mode-2, $mode-3, $mode-4,
                     $mode-5, $mode-6, $mode-7, $mode-8, $mode-9);
 
-  -webkit-animation-fill-mode: $full;
-     -moz-animation-fill-mode: $full;
-          animation-fill-mode: $full;
+  @include prefixer(animation-fill-mode, $full);
 }

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

@@ -1,7 +1,3 @@
 @mixin appearance ($value) {
-  -webkit-appearance: $value;
-     -moz-appearance: $value;
-      -ms-appearance: $value;
-       -o-appearance: $value;
-          appearance: $value;
+  @include prefixer(appearance, $value, webkit, moz, ms, o);
 }

data/app/assets/stylesheets/css3/_background-size.scss

@@ -7,9 +7,5 @@
     $full: compact($length-1, $length-2, $length-3, $length-4,
                    $length-5, $length-6, $length-7, $length-8, $length-9);
 
-  -webkit-background-size: $full;
-     -moz-background-size: $full;
-      -ms-background-size: $full;
-       -o-background-size: $full;
-          background-size: $full;
+@include prefixer(background-size, $full, webkit, moz, ms, o);
 }

data/app/assets/stylesheets/css3/_border-radius.scss

@@ -1,35 +1,24 @@
 @mixin border-radius ($radii) {
-  -webkit-border-radius: $radii;
-     -moz-border-radius: $radii;
-          border-radius: $radii;
+  @include prefixer(border-radius, $radii);
 }
 
 @mixin border-top-left-radius($radii) {
-  -webkit-border-top-left-radius: $radii;
-     -moz-border-top-left-radius: $radii;
-      -moz-border-radius-topleft: $radii;
-          border-top-left-radius: $radii;
+  -moz-border-radius-topleft: $radii;
+  @include prefixer(border-top-left-radius, $radii);
 }
 
 @mixin border-top-right-radius($radii) {
-  -webkit-border-top-right-radius: $radii;
-     -moz-border-top-right-radius: $radii;
-      -moz-border-radius-topright: $radii;
-          border-top-right-radius: $radii;
+  -moz-border-radius-topright: $radii;
+  @include prefixer(border-top-right-radius, $radii);
 }
 
 @mixin border-bottom-left-radius($radii) {
-  -webkit-border-bottom-left-radius: $radii;
-     -moz-border-bottom-left-radius: $radii;
-      -moz-border-radius-bottomleft: $radii;
-          border-bottom-left-radius: $radii;
+  -moz-border-radius-bottomleft: $radii;
+  @include prefixer(border-bottom-left-radius, $radii);
 }
 
 @mixin border-bottom-right-radius($radii) {
-  -webkit-border-bottom-right-radius: $radii;
-     -moz-border-bottom-right-radius: $radii;
-      -moz-border-radius-bottomright: $radii;
-          border-bottom-right-radius: $radii;
+  @include prefixer(border-bottom-right-radius, $radii);
 }
 
 @mixin border-top-radius($radii) {

data/app/assets/stylesheets/css3/_box-shadow.scss

@@ -8,7 +8,5 @@
     $full: compact($shadow-1, $shadow-2, $shadow-3, $shadow-4,
                    $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9);
 
-  -webkit-box-shadow: $full;
-     -moz-box-shadow: $full;
-          box-shadow: $full;
+    @include prefixer(box-shadow, $full);
 }

data/app/assets/stylesheets/css3/_box-sizing.scss

@@ -1,6 +1,4 @@
 @mixin box-sizing ($box) {
 //  content-box | border-box | inherit
-  -webkit-box-sizing: $box;
-     -moz-box-sizing: $box;
-          box-sizing: $box;
+  @include prefixer(box-sizing, $box);
 }

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

@@ -1,67 +1,47 @@
 @mixin columns($arg: auto) {
 // <column-count> || <column-width>
-  -webkit-columns: $arg;
-     -moz-columns: $arg;
-          columns: $arg;
+  @include prefixer(columns, $arg);
 }
 
 @mixin column-count($int: auto) {
 // auto || integer
-  -webkit-column-count: $int;
-     -moz-column-count: $int;
-          column-count: $int;
+  @include prefixer(column-count, $int);
 }
 
 @mixin column-gap($length: normal) {
 // normal || length
-  -webkit-column-gap: $length;
-     -moz-column-gap: $length;
-          column-gap: $length;
+  @include prefixer(column-gap, $length);
 }
 
 @mixin column-fill($arg: auto) {
 // auto || length
-  -webkit-columns-fill: $arg;
-     -moz-columns-fill: $arg;
-          columns-fill: $arg;
+  @include prefixer(columns-fill, $arg);
 }
 
 @mixin column-rule($arg) {
 // <border-width> || <border-style> || <color>
-  -webkit-column-rule: $arg;
-     -moz-column-rule: $arg;
-          column-rule: $arg;
+  @include prefixer(column-rule, $arg);
 }
 
 @mixin column-rule-color($color) {
-  -webkit-column-rule-color: $color;
-     -moz-column-rule-color: $color;
-          column-rule-color: $color;
+  @include prefixer(column-rule-color, $color);
 }
 
 @mixin column-rule-style($style: none) {
 // none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid
-  -webkit-column-rule-style: $style;
-     -moz-column-rule-style: $style;
-          column-rule-style: $style;
+  @include prefixer(column-rule-style, $style);
 }
 
 @mixin column-rule-width ($width: none) {
-  -webkit-column-rule-width: $width;
-     -moz-column-rule-width: $width;
-          column-rule-width: $width;
+  @include prefixer(column-rule-width, $width);
 }
 
 @mixin column-span($arg: none) {
 // none || all
-  -webkit-column-span: $arg;
-     -moz-column-span: $arg;
-          column-span: $arg;
+  @include prefixer(column-span, $arg);
 }
 
 @mixin column-width($length: auto) {
 // auto || length
-  -webkit-column-width: $length;
-     -moz-column-width: $length;
-          column-width: $length;
+  @include prefixer(column-width, $length);
 }

data/app/assets/stylesheets/css3/_flex-box.scss

@@ -16,52 +16,37 @@
 
 @mixin box-orient($orient: inline-axis) {
 // horizontal|vertical|inline-axis|block-axis|inherit
-  -webkit-box-orient: $orient;
-     -moz-box-orient: $orient;
-          box-orient: $orient;
+  @include prefixer(box-orient, $orient);
 }
 
 @mixin box-pack($pack: start) {
 // start|end|center|justify
-  -webkit-box-pack: $pack;
-     -moz-box-pack: $pack;
-          box-pack: $pack;
+  @include prefixer(box-pack, $pack);
 }
 
 @mixin box-align($align: stretch) {
 // start|end|center|baseline|stretch
-  -webkit-box-align: $align;
-     -moz-box-align: $align;
-          box-align: $align;
+  @include prefixer(box-align, $align);
 }
 
 @mixin box-direction($direction: normal) {
 // normal|reverse|inherit
-  -webkit-box-direction: $direction;
-     -moz-box-direction: $direction;
-          box-direction: $direction;
+  @include prefixer(box-direction, $direction);
 }
+
 @mixin box-lines($lines: single) {
 // single|multiple
-  -webkit-box-lines: $lines;
-     -moz-box-lines: $lines;
-          box-lines: $lines;
+  @include prefixer(box-lines, $lines);
 }
 
-@mixin box-ordinal-group($integer: 1) {
-  -webkit-box-ordinal-group: $integer;
-     -moz-box-ordinal-group: $integer;
-          box-ordinal-group: $integer;
+@mixin box-ordinal-group($int: 1) {
+  @include prefixer(box-ordinal-group, $int);
 }
 
 @mixin box-flex($value: 0.0) {
-  -webkit-box-flex: $value;
-     -moz-box-flex: $value;
-          box-flex: $value;
+  @include prefixer(box-flex, $value);
 }
 
-@mixin box-flex-group($integer: 1) {
-  -webkit-box-flex-group: $integer;
-     -moz-box-flex-group: $integer;
-          box-flex-group: $integer;
+@mixin box-flex-group($int: 1) {
+  @include prefixer(box-flex-group, $int);
 }