bourbon 4.1.0 → 4.2.0

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

@@ -0,0 +1,64 @@
+@charset "UTF-8";
+
+/// Generates variables for all buttons. Please note that you must use interpolation on the variable: `#{$all-buttons}`.
+///
+/// @example scss - Usage
+///   #{$all-buttons} {
+///     background-color: #f00;
+///   }
+///
+///   #{$all-buttons-focus},
+///   #{$all-buttons-hover} {
+///     background-color: #0f0;
+///   }
+///
+///   #{$all-buttons-active} {
+///     background-color: #00f;
+///   }
+///
+/// @example css - CSS Output
+///   button,
+///   input[type="button"],
+///   input[type="reset"],
+///   input[type="submit"] {
+///     background-color: #f00;
+///   }
+///
+///   button:focus,
+///   input[type="button"]:focus,
+///   input[type="reset"]:focus,
+///   input[type="submit"]:focus,
+///   button:hover,
+///   input[type="button"]:hover,
+///   input[type="reset"]:hover,
+///   input[type="submit"]:hover {
+///     background-color: #0f0;
+///   }
+///
+///   button:active,
+///   input[type="button"]:active,
+///   input[type="reset"]:active,
+///   input[type="submit"]:active {
+///     background-color: #00f;
+///   }
+///
+/// @require assign-inputs
+///
+/// @type List
+///
+/// @todo Remove double assigned variables (Lines 59–62) in v5.0.0
+
+$buttons-list: 'button',
+               'input[type="button"]',
+               'input[type="reset"]',
+               'input[type="submit"]';
+
+$all-buttons:        assign-inputs($buttons-list);
+$all-buttons-active: assign-inputs($buttons-list, active);
+$all-buttons-focus:  assign-inputs($buttons-list, focus);
+$all-buttons-hover:  assign-inputs($buttons-list, hover);
+
+$all-button-inputs:        $all-buttons;
+$all-button-inputs-active: $all-buttons-active;
+$all-button-inputs-focus:  $all-buttons-focus;
+$all-button-inputs-hover:  $all-buttons-hover;

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

@@ -1,9 +1,20 @@
-// The clearfix mixin provides an easy way to contain floats
-//
-// Example usage:
-// .wrapper {
-//   @include clearfix;
-// }
+@charset "UTF-8";
+
+/// Provides an easy way to include a clearfix for containing floats.
+///
+/// @link http://cssmojo.com/latest_new_clearfix_so_far/
+///
+/// @example scss - Usage
+///   .element {
+///     @include clearfix;
+///   }
+///
+/// @example css - CSS Output
+///   .element::after {
+///     clear: both;
+///     content: "";
+///     display: table;
+///   }
 
 @mixin clearfix {
   &::after {
@@ -12,7 +23,3 @@
     display: table;
   }
 }
-
-// Acknowledgements:
-// Thierry Koblentz, cssmojo
-// http://goo.gl/AQWvyH

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

@@ -1,3 +1,25 @@
+@charset "UTF-8";
+
+/// Truncates text and adds an ellipsis to represent overflow.
+///
+/// @param {Number} $width [100%]
+///   Max-width for the string to respect before being truncated
+///
+/// @example scss - Usage
+///   .element {
+///     @include ellipsis;
+///   }
+///
+/// @example css - CSS Output
+///   .element {
+///     display: inline-block;
+///     max-width: 100%;
+///     overflow: hidden;
+///     text-overflow: ellipsis;
+///     white-space: nowrap;
+///     word-wrap: normal;
+///   }
+
 @mixin ellipsis($width: 100%) {
   display: inline-block;
   max-width: $width;

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

@@ -0,0 +1,31 @@
+@charset "UTF-8";
+
+/// Georgia font stack.
+///
+/// @type List
+
+$georgia: "Georgia", "Cambria", "Times New Roman", "Times", serif;
+
+/// Helvetica font stack.
+///
+/// @type List
+
+$helvetica: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
+
+/// Lucida Grande font stack.
+///
+/// @type List
+
+$lucida-grande: "Lucida Grande", "Tahoma", "Verdana", "Arial", sans-serif;
+
+/// Monospace font stack.
+///
+/// @type List
+
+$monospace: "Bitstream Vera Sans Mono", "Consolas", "Courier", monospace;
+
+/// Verdana font stack.
+///
+/// @type List
+
+$verdana: "Verdana", "Geneva", sans-serif;

data/app/assets/stylesheets/addons/_hide-text.scss

@@ -1,12 +1,27 @@
-@mixin hide-text($height: 1em) {
-  height: $height;
-  line-height: 1.5;
+/// Hides the text in an element, commonly used to show an image. Some elements will need block-level styles applied.
+///
+/// @link http://zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement
+///
+/// @example scss - Usage
+///   .element {
+///     @include hide-text;
+///   }
+///
+/// @example css - CSS Output
+///   .element {
+///     overflow: hidden;
+///     text-indent: 101%;
+///     white-space: nowrap;
+///   }
+///
+/// @todo Remove height argument in v5.0.0
+
+@mixin hide-text($height: null) {
   overflow: hidden;
+  text-indent: 101%;
+  white-space: nowrap;
 
-  &::before {
-    content: "";
-    display: block;
-    width: 0;
-    height: 100%;
+  @if $height {
+    @warn "The `hide-text` mixin has changed and no longer requires a height. The height argument will no longer be accepted in v5.0.0";
   }
 }

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

@@ -0,0 +1,26 @@
+@charset "UTF-8";
+
+/// Provides a quick method for targeting `margin` on specific sides of a box. Use a `null` value to “skip” a side.
+///
+/// @param {Arglist} $vals
+///   List of arguments
+///
+/// @example scss - Usage
+///   .element {
+///     @include margin(null 10px 3em 20vh);
+///   }
+///
+/// @example css - CSS Output
+///   .element {
+///     margin-bottom: 3em;
+///     margin-left: 20vh;
+///     margin-right: 10px;
+///   }
+///
+/// @require {mixin} directional-property
+///
+/// @output `margin`
+
+@mixin margin($vals...) {
+  @include directional-property(margin, false, $vals...);
+}

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

@@ -0,0 +1,26 @@
+@charset "UTF-8";
+
+/// Provides a quick method for targeting `padding` on specific sides of a box. Use a `null` value to “skip” a side.
+///
+/// @param {Arglist} $vals
+///   List of arguments
+///
+/// @example scss - Usage
+///   .element {
+///     @include padding(12vh null 10px 5%);
+///   }
+///
+/// @example css - CSS Output
+///   .element {
+///     padding-bottom: 10px;
+///     padding-left: 5%;
+///     padding-top: 12vh;
+///   }
+///
+/// @require {mixin} directional-property
+///
+/// @output `padding`
+
+@mixin padding($vals...) {
+  @include directional-property(padding, false, $vals...);
+}

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

@@ -1,7 +1,29 @@
-// Set element positioning in a single statement
+@charset "UTF-8";
 
-@mixin position($position: relative, $coordinates: null null null null) {
+/// Provides a quick method for setting an element’s position. Use a `null` value to “skip” a side.
+///
+/// @param {Position} $position [relative]
+///   A CSS position value
+///
+/// @param {Arglist} $coordinates [null null null null]
+///   List of values that correspond to the 4-value syntax for the edges of a box
+///
+/// @example scss - Usage
+///   .element {
+///     @include position(absolute, 0 null null 10em);
+///   }
+///
+/// @example css - CSS Output
+///   .element {
+///     left: 10em;
+///     position: absolute;
+///     top: 0;
+///   }
+///
+/// @require {function} is-length
+/// @require {function} unpack
 
+@mixin position($position: relative, $coordinates: null null null null) {
   @if type-of($position) == list {
     $coordinates: $position;
     $position: relative;

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

@@ -1,36 +1,57 @@
-//************************************************************************//
-// Example: @include prefixer(border-radius, $radii, webkit ms spec);
-//************************************************************************//
-// Variables located in /settings/_prefixer.scss
+@charset "UTF-8";
 
-@mixin prefixer ($property, $value, $prefixes) {
+/// A mixin for generating vendor prefixes on non-standardized properties.
+///
+/// @param {String} $property
+///   Property to prefix
+///
+/// @param {*} $value
+///   Value to use
+///
+/// @param {List} $prefixes
+///   Prefixes to define
+///
+/// @example scss - Usage
+///   .element {
+///     @include prefixer(border-radius, 10px, webkit ms spec);
+///   }
+///
+/// @example css - CSS Output
+///   .element {
+///     -webkit-border-radius: 10px;
+///     -moz-border-radius: 10px;
+///     border-radius: 10px;
+///   }
+///
+/// @require {variable} $prefix-for-webkit
+/// @require {variable} $prefix-for-mozilla
+/// @require {variable} $prefix-for-microsoft
+/// @require {variable} $prefix-for-opera
+/// @require {variable} $prefix-for-spec
+
+@mixin prefixer($property, $value, $prefixes) {
   @each $prefix in $prefixes {
     @if $prefix == webkit {
       @if $prefix-for-webkit {
         -webkit-#{$property}: $value;
       }
-    }
-    @else if $prefix == moz {
+    } @else if $prefix == moz {
       @if $prefix-for-mozilla {
         -moz-#{$property}: $value;
       }
-    }
-    @else if $prefix == ms {
+    } @else if $prefix == ms {
       @if $prefix-for-microsoft {
         -ms-#{$property}: $value;
       }
-    }
-    @else if $prefix == o {
+    } @else if $prefix == o {
       @if $prefix-for-opera {
         -o-#{$property}: $value;
       }
-    }
-    @else if $prefix == spec {
+    } @else if $prefix == spec {
       @if $prefix-for-spec {
         #{$property}: $value;
       }
-    }
-    @else  {
+    } @else  {
       @warn "Unrecognized prefix: #{$prefix}";
     }
   }

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

@@ -1,4 +1,33 @@
-// Set `width` and `height` in a single statement
+@charset "UTF-8";
+
+/// Sets the `width` and `height` of the element.
+///
+/// @param {List} $size
+///   A list of at most 2 size values.
+///
+///   If there is only a single value in `$size` it is used for both width and height. All units are supported.
+///
+/// @example scss - Usage
+///   .first-element {
+///     @include size(2em);
+///   }
+///
+///   .second-element {
+///     @include size(auto 10em);
+///   }
+///
+/// @example css - CSS Output
+///   .first-element {
+///     width: 2em;
+///     height: 2em;
+///   }
+///
+///   .second-element {
+///     width: auto;
+///     height: 10em;
+///   }
+///
+/// @todo Refactor in 5.0.0 to use a comma-separated argument
 
 @mixin size($value) {
   $width: nth($value, 1);

data/app/assets/stylesheets/addons/_text-inputs.scss

@@ -0,0 +1,112 @@
+@charset "UTF-8";
+
+/// Generates variables for all text-based inputs. Please note that you must use interpolation on the variable: `#{$all-text-inputs}`.
+///
+/// @example scss - Usage
+///   #{$all-text-inputs} {
+///     border: 1px solid #f00;
+///   }
+///
+///   #{$all-text-inputs-focus},
+///   #{$all-text-inputs-hover} {
+///     border: 1px solid #0f0;
+///   }
+///
+///   #{$all-text-inputs-active} {
+///     border: 1px solid #00f;
+///   }
+///
+/// @example css - CSS Output
+///   input[type="color"],
+///   input[type="date"],
+///   input[type="datetime"],
+///   input[type="datetime-local"],
+///   input[type="email"],
+///   input[type="month"],
+///   input[type="number"],
+///   input[type="password"],
+///   input[type="search"],
+///   input[type="tel"],
+///   input[type="text"],
+///   input[type="time"],
+///   input[type="url"],
+///   input[type="week"],
+///   textarea {
+///     border: 1px solid #f00;
+///   }
+///
+///   input[type="color"]:focus,
+///   input[type="date"]:focus,
+///   input[type="datetime"]:focus,
+///   input[type="datetime-local"]:focus,
+///   input[type="email"]:focus,
+///   input[type="month"]:focus,
+///   input[type="number"]:focus,
+///   input[type="password"]:focus,
+///   input[type="search"]:focus,
+///   input[type="tel"]:focus,
+///   input[type="text"]:focus,
+///   input[type="time"]:focus,
+///   input[type="url"]:focus,
+///   input[type="week"]:focus,
+///   textarea:focus,
+///   input[type="color"]:hover,
+///   input[type="date"]:hover,
+///   input[type="datetime"]:hover,
+///   input[type="datetime-local"]:hover,
+///   input[type="email"]:hover,
+///   input[type="month"]:hover,
+///   input[type="number"]:hover,
+///   input[type="password"]:hover,
+///   input[type="search"]:hover,
+///   input[type="tel"]:hover,
+///   input[type="text"]:hover,
+///   input[type="time"]:hover,
+///   input[type="url"]:hover,
+///   input[type="week"]:hover,
+///   textarea:hover {
+///     border: 1px solid #0f0;
+///   }
+///
+///   input[type="color"]:active,
+///   input[type="date"]:active,
+///   input[type="datetime"]:active,
+///   input[type="datetime-local"]:active,
+///   input[type="email"]:active,
+///   input[type="month"]:active,
+///   input[type="number"]:active,
+///   input[type="password"]:active,
+///   input[type="search"]:active,
+///   input[type="tel"]:active,
+///   input[type="text"]:active,
+///   input[type="time"]:active,
+///   input[type="url"]:active,
+///   input[type="week"]:active,
+///   textarea:active {
+///     border: 1px solid #00f;
+///   }
+///
+/// @require assign-inputs
+///
+/// @type List
+
+$text-inputs-list: 'input[type="color"]',
+                   'input[type="date"]',
+                   'input[type="datetime"]',
+                   'input[type="datetime-local"]',
+                   'input[type="email"]',
+                   'input[type="month"]',
+                   'input[type="number"]',
+                   'input[type="password"]',
+                   'input[type="search"]',
+                   'input[type="tel"]',
+                   'input[type="text"]',
+                   'input[type="time"]',
+                   'input[type="url"]',
+                   'input[type="week"]',
+                   'textarea';
+
+$all-text-inputs:        assign-inputs($text-inputs-list);
+$all-text-inputs-active: assign-inputs($text-inputs-list, active);
+$all-text-inputs-focus:  assign-inputs($text-inputs-list, focus);
+$all-text-inputs-hover:  assign-inputs($text-inputs-list, hover);

data/app/assets/stylesheets/addons/_timing-functions.scss

@@ -1,7 +1,11 @@
-// 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
+@charset "UTF-8";
+
+/// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie)
+///
+/// Timing functions are the same as demoed here: http://jqueryui.com/resources/demos/effect/easing.html
+///
+/// @type cubic-bezier
 
-// EASE IN
 $ease-in-quad:      cubic-bezier(0.550,  0.085, 0.680, 0.530);
 $ease-in-cubic:     cubic-bezier(0.550,  0.055, 0.675, 0.190);
 $ease-in-quart:     cubic-bezier(0.895,  0.030, 0.685, 0.220);
@@ -11,7 +15,6 @@ $ease-in-expo:      cubic-bezier(0.950,  0.050, 0.795, 0.035);
 $ease-in-circ:      cubic-bezier(0.600,  0.040, 0.980, 0.335);
 $ease-in-back:      cubic-bezier(0.600, -0.280, 0.735, 0.045);
 
-// EASE OUT
 $ease-out-quad:     cubic-bezier(0.250,  0.460, 0.450, 0.940);
 $ease-out-cubic:    cubic-bezier(0.215,  0.610, 0.355, 1.000);
 $ease-out-quart:    cubic-bezier(0.165,  0.840, 0.440, 1.000);
@@ -21,7 +24,6 @@ $ease-out-expo:     cubic-bezier(0.190,  1.000, 0.220, 1.000);
 $ease-out-circ:     cubic-bezier(0.075,  0.820, 0.165, 1.000);
 $ease-out-back:     cubic-bezier(0.175,  0.885, 0.320, 1.275);
 
-// EASE IN OUT
 $ease-in-out-quad:  cubic-bezier(0.455,  0.030, 0.515, 0.955);
 $ease-in-out-cubic: cubic-bezier(0.645,  0.045, 0.355, 1.000);
 $ease-in-out-quart: cubic-bezier(0.770,  0.000, 0.175, 1.000);

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

@@ -14,14 +14,14 @@
     $height: if(length($size) > 1, $height, $height/2);
 
     @if $direction == up {
+      border-bottom: $height solid $foreground-color;
       border-left: $width solid $background-color;
       border-right: $width solid $background-color;
-      border-bottom: $height solid $foreground-color;
 
     } @else if $direction == right {
-      border-top: $width solid $background-color;
       border-bottom: $width solid $background-color;
       border-left: $height solid $foreground-color;
+      border-top: $width solid $background-color;
 
     } @else if $direction == down {
       border-left: $width solid $background-color;
@@ -29,9 +29,9 @@
       border-top: $height solid $foreground-color;
 
     } @else if $direction == left {
-      border-top: $width solid $background-color;
       border-bottom: $width solid $background-color;
       border-right: $height solid $foreground-color;
+      border-top: $width solid $background-color;
     }
   }
 
@@ -58,26 +58,26 @@
   }
 
   @else if ($direction == inset-up) {
-    border-width: $height $width;
-    border-style: solid;
     border-color: $background-color $background-color $foreground-color;
+    border-style: solid;
+    border-width: $height $width;
   }
 
   @else if ($direction == inset-down) {
-    border-width: $height $width;
-    border-style: solid;
     border-color: $foreground-color $background-color $background-color;
+    border-style: solid;
+    border-width: $height $width;
   }
 
   @else if ($direction == inset-right) {
-    border-width: $width $height;
-    border-style: solid;
     border-color: $background-color $background-color $background-color $foreground-color;
+    border-style: solid;
+    border-width: $width $height;
   }
 
   @else if ($direction == inset-left) {
-    border-width: $width $height;
-    border-style: solid;
     border-color: $background-color $foreground-color $background-color $background-color;
+    border-style: solid;
+    border-width: $width $height;
   }
 }

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

@@ -1,3 +1,22 @@
+@charset "UTF-8";
+
+/// Provides an easy way to change the `word-wrap` property.
+///
+/// @param {String} $wrap [break-word]
+///   Value for the `word-break` property.
+///
+/// @example scss - Usage
+///   .wrapper {
+///     @include word-wrap(break-word);
+///   }
+///
+/// @example css - CSS Output
+///   .wrapper {
+///     overflow-wrap: break-word;
+///     word-break: break-all;
+///     word-wrap: break-word;
+///   }
+
 @mixin word-wrap($wrap: break-word) {
   overflow-wrap: $wrap;
   word-wrap: $wrap;