bourbon 4.3.4 → 5.0.0

data/core/bourbon/library/_border-width.scss

@@ -0,0 +1,25 @@
+@charset "UTF-8";
+
+/// Provides a concise, one-line method for setting `border-width` on specific
+/// edges of a box. Use a `null` value to “skip” edges of the box with standard
+/// CSS shorthand.
+///
+/// @argument {list} $values
+///   List of border widths; accepts CSS shorthand.
+///
+/// @example scss
+///   .element {
+///     @include border-width(1em null 20px);
+///   }
+///
+///   // CSS Output
+///   .element {
+///     border-bottom-width: 20px;
+///     border-top-width: 1em;
+///   }
+///
+/// @require {mixin} _directional-property
+
+@mixin border-width($values) {
+  @include _directional-property(border, width, $values);
+}

data/core/bourbon/library/_buttons.scss

@@ -0,0 +1,84 @@
+@charset "UTF-8";
+
+////
+/// @type list
+///
+/// @require {function} _assign-inputs
+///
+/// @require {variable} $_buttons-list
+////
+
+/// A list of all HTML button elements. Please note that you must interpolate
+/// the variable (`#{}`) to use it as a selector.
+///
+/// @example scss
+///   #{$all-buttons} {
+///     background-color: #f00;
+///   }
+///
+///   // CSS Output
+///   button,
+///   [type='button'],
+///   [type='reset'],
+///   [type='submit'] {
+///     background-color: #f00;
+///   }
+
+$all-buttons: _assign-inputs($_buttons-list);
+
+/// A list of all HTML button elements with the `:active` pseudo-class applied.
+/// Please note that you must interpolate the variable (`#{}`) to use it as a
+/// selector.
+///
+/// @example scss
+///   #{$all-buttons-active} {
+///     background-color: #00f;
+///   }
+///
+///   // CSS Output
+///   button:active,
+///   [type='button']:active,
+///   [type='reset']:active,
+///   [type='submit']:active {
+///     background-color: #00f;
+///   }
+
+$all-buttons-active: _assign-inputs($_buttons-list, active);
+
+/// A list of all HTML button elements with the `:focus` pseudo-class applied.
+/// Please note that you must interpolate the variable (`#{}`) to use it as a
+/// selector.
+///
+/// @example scss
+///   #{$all-buttons-focus} {
+///     background-color: #0f0;
+///   }
+///
+///   // CSS Output
+///   button:focus,
+///   [type='button']:focus,
+///   [type='reset']:focus,
+///   [type='submit']:focus {
+///     background-color: #0f0;
+///   }
+
+$all-buttons-focus: _assign-inputs($_buttons-list, focus);
+
+/// A list of all HTML button elements with the `:hover` pseudo-class applied.
+/// Please note that you must interpolate the variable (`#{}`) to use it as a
+/// selector.
+///
+/// @example scss
+///   #{$all-buttons-hover} {
+///     background-color: #0f0;
+///   }
+///
+///   // CSS Output
+///   button:hover,
+///   [type='button']:hover,
+///   [type='reset']:hover,
+///   [type='submit']:hover {
+///     background-color: #0f0;
+///   }
+
+$all-buttons-hover: _assign-inputs($_buttons-list, hover);

data/{app/assets/stylesheets/addons → core/bourbon/library}/_clearfix.scss

@@ -2,24 +2,24 @@
 
 /// Provides an easy way to include a clearfix for containing floats.
 ///
-/// @link http://cssmojo.com/latest_new_clearfix_so_far/
+/// @link https://goo.gl/yP5hiZ
 ///
-/// @example scss - Usage
+/// @example scss
 ///   .element {
 ///     @include clearfix;
 ///   }
 ///
-/// @example css - CSS Output
+///   // CSS Output
 ///   .element::after {
 ///     clear: both;
 ///     content: "";
-///     display: table;
+///     display: block;
 ///   }
 
 @mixin clearfix {
   &::after {
     clear: both;
     content: "";
-    display: table;
+    display: block;
   }
 }

data/core/bourbon/library/_contrast-switch.scss

@@ -0,0 +1,81 @@
+@charset "UTF-8";
+
+/// Switches between two colors based on the contrast to another color. It’s
+/// like a [ternary operator] for color contrast and can be useful for building
+/// a button system.
+///
+/// The calculation of the contrast ratio is based on the [WCAG 2.0
+/// specification]. However, we cannot guarantee full compliance, though all of
+/// our manual testing passed.
+///
+///   [ternary operator]: https://goo.gl/ccfLqi
+///   [WCAG 2.0 specification]: https://goo.gl/zhQuYA
+///
+/// @argument {color} $base-color
+///   The color to evaluate lightness against.
+///
+/// @argument {color} $dark-color [#000]
+///   The color to be output when `$base-color` is light. Can also be set
+///   globally using the `contrast-switch-dark-color` key in the
+///   Bourbon settings.
+///
+/// @argument {color} $light-color [#fff]
+///   The color to be output when `$base-color` is dark. Can also be set
+///   globally using the `contrast-switch-light-color` key in the
+///   Bourbon settings.
+///
+/// @return {color}
+///
+/// @example scss
+///   .element {
+///     color: contrast-switch(#bae6e6);
+///   }
+///
+///   // CSS Output
+///   .element {
+///     color: #000;
+///   }
+///
+/// @example scss
+///   .element {
+///     $button-color: #2d72d9;
+///     background-color: $button-color;
+///     color: contrast-switch($button-color, #222, #eee);
+///   }
+///
+///   // CSS Output
+///   .element {
+///     background-color: #2d72d9;
+///     color: #eee;
+///   }
+///
+/// @require {function} _fetch-bourbon-setting
+///
+/// @require {function} _is-color
+///
+/// @require {function} _contrast-ratio
+///
+/// @since 5.0.0
+
+@function contrast-switch(
+  $base-color,
+  $dark-color: _fetch-bourbon-setting("contrast-switch-dark-color"),
+  $light-color: _fetch-bourbon-setting("contrast-switch-light-color")
+) {
+  @if not _is-color($base-color) {
+    @error "`#{$base-color}` is not a valid color for the `$base-color` " +
+           "argument in the `contrast-switch` function.";
+  } @else if not _is-color($dark-color) {
+    @error "`#{$dark-color}` is not a valid color for the `$dark-color` " +
+           "argument in the `contrast-switch` function.";
+  } @else if not _is-color($light-color) {
+    @error "`#{$light-color}` is not a valid color for the `$light-color` " +
+           "argument in the `contrast-switch` function.";
+  } @else {
+    $-contrast-to-dark: _contrast-ratio($base-color, $dark-color);
+    $-contrast-to-light: _contrast-ratio($base-color, $light-color);
+    $-prefer-dark: $-contrast-to-dark >= $-contrast-to-light;
+
+    @return if($-prefer-dark, $dark-color, $light-color);
+  }
+}

data/{app/assets/stylesheets/addons → core/bourbon/library}/_ellipsis.scss

@@ -2,15 +2,18 @@
 
 /// Truncates text and adds an ellipsis to represent overflow.
 ///
-/// @param {Number} $width [100%]
-///   Max-width for the string to respect before being truncated
+/// @argument {number} $width [100%]
+///   The `max-width` for the string to respect before being truncated.
 ///
-/// @example scss - Usage
+/// @argument {string} $display [inline-block]
+///   Sets the display-value of the element.
+///
+/// @example scss
 ///   .element {
 ///     @include ellipsis;
 ///   }
 ///
-/// @example css - CSS Output
+///   // CSS Output
 ///   .element {
 ///     display: inline-block;
 ///     max-width: 100%;
@@ -20,8 +23,11 @@
 ///     word-wrap: normal;
 ///   }
 
-@mixin ellipsis($width: 100%) {
-  display: inline-block;
+@mixin ellipsis(
+  $width: 100%,
+  $display: inline-block
+) {
+  display: $display;
   max-width: $width;
   overflow: hidden;
   text-overflow: ellipsis;

data/core/bourbon/library/_font-face.scss

@@ -0,0 +1,65 @@
+@charset "UTF-8";
+
+/// Generates an `@font-face` declaration. You can choose the specific file
+/// formats you need to output; the mixin supports `eot`, `ttf`, `svg`, `woff2`
+/// and `woff`. The mixin also supports usage with the Rails Asset Pipeline,
+/// which you can enable per use, or globally in the `$bourbon()` settings.
+///
+/// @argument {string} $font-family
+///
+/// @argument {string} $file-path
+///
+/// @argument {string} $asset-pipeline [false]
+///   Set to `true` if you’re using the Rails Asset Pipeline (place the fonts
+///   in `app/assets/fonts/`). Can also be set globally using the
+///   `rails-asset-pipeline` key in the Bourbon settings.
+///
+/// @argument {string | list} $file-formats [("ttf", "woff2", "woff")]
+///   List of the font file formats to include. Can also be set globally using
+///   the `global-font-file-formats` key in the Bourbon settings.
+///
+/// @content
+///   Any additional CSS properties that are included in the `@include`
+///   directive will be output within the `@font-face` declaration, e.g. you can
+///   pass in `font-weight`, `font-style` and/or `unicode-range`.
+///
+/// @example scss
+///   @include font-face(
+///     "source-sans-pro",
+///     "fonts/source-sans-pro-regular",
+///     ("woff2", "woff")
+///   ) {
+///     font-style: normal;
+///     font-weight: 400;
+///   }
+///
+///   // CSS Output
+///   @font-face {
+///     font-family: "source-sans-pro";
+///     src: url("fonts/source-sans-pro-regular.woff2") format("woff2"),
+///          url("fonts/source-sans-pro-regular.woff") format("woff");
+///     font-style: normal;
+///     font-weight: 400;
+///   }
+///
+/// @require {function} _font-source-declaration
+///
+/// @require {function} _fetch-bourbon-setting
+
+@mixin font-face(
+  $font-family,
+  $file-path,
+  $file-formats: _fetch-bourbon-setting("global-font-file-formats"),
+  $asset-pipeline: _fetch-bourbon-setting("rails-asset-pipeline")
+) {
+  @font-face {
+    font-family: $font-family;
+    src: _font-source-declaration(
+      $font-family,
+      $file-path,
+      $asset-pipeline,
+      $file-formats
+    );
+    @content;
+  }
+}

data/core/bourbon/library/_font-stacks.scss

@@ -0,0 +1,249 @@
+@charset "UTF-8";
+
+/// A variable that outputs a Helvetica font stack.
+///
+/// @link https://goo.gl/uSJvZe
+///
+/// @type list
+///
+/// @example scss
+///   .element {
+///     font-family: $font-stack-helvetica;
+///   }
+///
+///   // CSS Output
+///   .element {
+///     font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+///   }
+
+$font-stack-helvetica: (
+  "Helvetica Neue",
+  "Helvetica",
+  "Arial",
+  sans-serif,
+);
+
+/// A variable that outputs a Lucida Grande font stack.
+///
+/// @link https://goo.gl/R5UyYE
+///
+/// @type list
+///
+/// @example scss
+///   .element {
+///     font-family: $font-stack-lucida-grande;
+///   }
+///
+///   // CSS Output
+///   .element {
+///     font-family: "Lucida Grande", "Lucida Sans Unicode", "Geneva", "Verdana", sans-serif;
+///   }
+
+$font-stack-lucida-grande: (
+  "Lucida Grande",
+  "Lucida Sans Unicode",
+  "Geneva",
+  "Verdana",
+  sans-serif,
+);
+
+/// A variable that outputs a Verdana font stack.
+///
+/// @link https://goo.gl/yGXWSS
+///
+/// @type list
+///
+/// @example scss
+///   .element {
+///     font-family: $font-stack-verdana;
+///   }
+///
+///   // CSS Output
+///   .element {
+///     font-family: "Verdana", "Geneva", sans-serif;
+///   }
+
+$font-stack-verdana: (
+  "Verdana",
+  "Geneva",
+  sans-serif,
+);
+
+/// A variable that outputs a system font stack.
+///
+/// @link https://goo.gl/LHRZIf
+///
+/// @type list
+///
+/// @example scss
+///   .element {
+///     font-family: $font-stack-system;
+///   }
+///
+///   // CSS Output
+///   .element {
+///     font-family: -apple-system, BlinkMacSystemFont, "Avenir Next", "Avenir", "Segoe UI", "Lucida Grande", "Helvetica Neue", "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell", "Oxygen", "Ubuntu", "Franklin Gothic Medium", "Century Gothic", "Liberation Sans", sans-serif;
+///   }
+
+$font-stack-system: (
+  -apple-system,
+  BlinkMacSystemFont,
+  "Avenir Next",
+  "Avenir",
+  "Segoe UI",
+  "Lucida Grande",
+  "Helvetica Neue",
+  "Helvetica",
+  "Fira Sans",
+  "Roboto",
+  "Noto",
+  "Droid Sans",
+  "Cantarell",
+  "Oxygen",
+  "Ubuntu",
+  "Franklin Gothic Medium",
+  "Century Gothic",
+  "Liberation Sans",
+  sans-serif,
+);
+
+/// A variable that outputs a Garamond font stack.
+///
+/// @link https://goo.gl/QQFEkV
+///
+/// @type list
+///
+/// @example scss
+///   .element {
+///     font-family: $font-stack-garamond;
+///   }
+///
+///   // CSS Output
+///   .element {
+///     font-family: "Garamond", "Baskerville", "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
+///   }
+
+$font-stack-garamond: (
+  "Garamond",
+  "Baskerville",
+  "Baskerville Old Face",
+  "Hoefler Text",
+  "Times New Roman",
+  serif,
+);
+
+/// A variable that outputs a Georgia font stack.
+///
+/// @link https://goo.gl/wtzVPy
+///
+/// @type list
+///
+/// @example scss
+///   .element {
+///     font-family: $font-stack-georgia;
+///   }
+///
+///   // CSS Output
+///   .element {
+///     font-family: "Georgia", "Times", "Times New Roman", serif;
+///   }
+
+$font-stack-georgia: (
+  "Georgia",
+  "Times",
+  "Times New Roman",
+  serif,
+);
+
+/// A variable that outputs a Hoefler Text font stack.
+///
+/// @link https://goo.gl/n7U7zx
+///
+/// @type list
+///
+/// @example scss
+///   .element {
+///     font-family: $font-stack-hoefler-text;
+///   }
+///
+///   // CSS Output
+///   .element {
+///     font-family: "Hoefler Text", "Baskerville Old Face", "Garamond", "Times New Roman", serif;
+///   }
+
+$font-stack-hoefler-text: (
+  "Hoefler Text",
+  "Baskerville Old Face",
+  "Garamond",
+  "Times New Roman",
+  serif,
+);
+
+/// A variable that outputs a Consolas font stack.
+///
+/// @link https://goo.gl/iKrtqv
+///
+/// @type list
+///
+/// @example scss
+///   .element {
+///     font-family: $font-stack-consolas;
+///   }
+///
+///   // CSS Output
+///   .element {
+///     font-family: "Consolas", "monaco", monospace;
+///   }
+
+$font-stack-consolas: (
+  "Consolas",
+  "monaco",
+  monospace,
+);
+
+/// A variable that outputs a Courier New font stack.
+///
+/// @link https://goo.gl/bHfWMP
+///
+/// @type list
+///
+/// @example scss
+///   .element {
+///     font-family: $font-stack-courier-new;
+///   }
+///
+///   // CSS Output
+///   .element {
+///     font-family: "Courier New", "Courier", "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
+///   }
+
+$font-stack-courier-new: (
+  "Courier New",
+  "Courier",
+  "Lucida Sans Typewriter",
+  "Lucida Typewriter",
+  monospace,
+);
+
+/// A variable that outputs a Monaco font stack.
+///
+/// @link https://goo.gl/9PgKDO
+///
+/// @type list
+///
+/// @example scss
+///   .element {
+///     font-family: $font-stack-monaco;
+///   }
+///
+///   // CSS Output
+///   .element {
+///     font-family: "Monaco", "Consolas", "Lucida Console", monospace;
+///   }
+
+$font-stack-monaco: (
+  "Monaco",
+  "Consolas",
+  "Lucida Console",
+  monospace,
+);