bourbon 5.0.0.beta.6 → 5.0.0.beta.7

data/core/bourbon/library/_hide-text.scss

@@ -3,14 +3,14 @@
 /// Hides the text in an element, commonly used to show an image instead. Some
 /// elements will need block-level styles applied.
 ///
-/// @link http://goo.gl/EvLRIu
+/// @link https://goo.gl/EvLRIu
 ///
 /// @example scss
 ///   .element {
 ///     @include hide-text;
 ///   }
 ///
-/// @example css
+///   // CSS Output
 ///   .element {
 ///     overflow: hidden;
 ///     text-indent: 101%;

data/core/bourbon/library/_hide-visually.scss

@@ -5,7 +5,7 @@
 /// the affects of the hiding, which is handy for showing the element on focus,
 /// for example.
 ///
-/// @link http://goo.gl/Vf1TGn
+/// @link https://goo.gl/Vf1TGn
 ///
 /// @argument {string} $toggle [hide]
 ///   Accepts `hide` or `unhide`. `unhide` reverses the affects of `hide`.
@@ -20,7 +20,7 @@
 ///     }
 ///   }
 ///
-/// @example css
+///   // CSS Output
 ///   .element {
 ///     border: 0;
 ///     clip: rect(1px, 1px, 1px, 1px);
@@ -53,6 +53,7 @@
     overflow: hidden;
     padding: 0;
     position: absolute;
+    white-space: nowrap;
     width: 1px;
   } @else if $toggle == "unhide" {
     clip: auto;
@@ -60,6 +61,7 @@
     height: auto;
     overflow: visible;
     position: static;
+    white-space: inherit;
     width: auto;
   }
 }

data/core/bourbon/library/_margin.scss

@@ -1,27 +1,30 @@
 @charset "UTF-8";
 
-/// Provides a quick method for targeting `margin` on specific sides of a
-/// box. Use a `null` value to “skip” a side.
+/// Provides a concise, one-line method for setting `margin` on specific edges
+/// of a box. Use a `null` value to “skip” edges of the box with standard
+/// CSS shorthand.
 ///
-/// @argument {arglist} $values
-///   List of margin values, defined as CSS shorthand.
+/// @argument {list} $values
+///   List of margin values; accepts CSS shorthand.
 ///
 /// @example scss
-///   .element-one {
+///   .element {
 ///     @include margin(null auto);
 ///   }
 ///
-///   .element-two {
-///     @include margin(10px 3em 20vh null);
-///   }
-///
-/// @example css
-///   .element-one {
+///   // CSS Output
+///   .element {
 ///     margin-left: auto;
 ///     margin-right: auto;
 ///   }
 ///
-///   .element-two {
+/// @example scss
+///   .element {
+///     @include margin(10px 3em 20vh null);
+///   }
+///
+///   // CSS Output
+///   .element {
 ///     margin-bottom: 20vh;
 ///     margin-right: 3em;
 ///     margin-top: 10px;
@@ -29,6 +32,6 @@
 ///
 /// @require {mixin} _directional-property
 
-@mixin margin($values...) {
-  @include _directional-property(margin, false, $values...);
+@mixin margin($values) {
+  @include _directional-property(margin, null, $values);
 }

data/core/bourbon/library/_modular-scale.scss

@@ -11,49 +11,57 @@
 ///   How many steps to increment up or down the scale.
 ///
 /// @argument {number (with unit) | list} $value [1em]
-///   The base value the scale starts at.
+///   The base value the scale starts at. Can also be set globally using the
+///   `modular-scale-base` key in the Bourbon settings.
 ///
 /// @argument {number (unitless)} $ratio [1.25]
-///   The ratio the scale is built on.
+///   The ratio the scale is built on. Can also be set globally using the
+///   `modular-scale-ratio` key in the Bourbon settings.
 ///
 /// @return {number (with unit)}
 ///
 /// @example scss
-///   .first-element {
+///   .element {
 ///     font-size: modular-scale(2);
 ///   }
 ///
-///   .second-element {
+///   // CSS Output
+///   .element {
+///     font-size: 1.5625em;
+///   }
+///
+/// @example scss
+///   .element {
 ///     margin-right: modular-scale(3, 2em);
 ///   }
 ///
-///   .third-element {
+///   // CSS Output
+///   .element {
+///     margin-right: 3.90625em;
+///   }
+///
+/// @example scss
+///   .element {
 ///     font-size: modular-scale(3, 1em 1.6em, $major-seventh);
 ///   }
 ///
+///   // CSS Output
+///   .element {
+///     font-size: 3em;
+///   }
+///
+/// @example scss
 ///   // Globally change the base ratio
 ///   $bourbon: (
 ///     "modular-scale-ratio": 1.2,
 ///   );
 ///
-///   .fourth-element {
+///   .element {
 ///     font-size: modular-scale(3);
 ///   }
 ///
-/// @example css
-///   .first-element {
-///     font-size: 1.5625em;
-///   }
-///
-///   .second-element {
-///     margin-right: 3.90625em;
-///   }
-///
-///   .third-element {
-///     font-size: 3em;
-///   }
-///
-///   .fourth-element {
+///   // CSS Output
+///   .element {
 ///     font-size: 1.728em;
 ///   }
 ///

data/core/bourbon/library/_overflow-wrap.scss

@@ -0,0 +1,24 @@
+@charset "UTF-8";
+
+/// Outputs the `overflow-wrap` property and its legacy name `word-wrap` to
+/// support browsers that do not yet use `overflow-wrap`.
+///
+/// @argument {string} $wrap [break-word]
+///   Accepted CSS values are `normal`, `break-word`, `inherit`, `initial`,
+///   or `unset`.
+///
+/// @example scss
+///   .wrapper {
+///     @include overflow-wrap;
+///   }
+///
+///   // CSS Output
+///   .wrapper {
+///     word-wrap: break-word;
+///     overflow-wrap: break-word;
+///   }
+
+@mixin overflow-wrap($wrap: break-word) {
+  word-wrap: $wrap;
+  overflow-wrap: $wrap;
+}

data/core/bourbon/library/_padding.scss

@@ -1,26 +1,28 @@
 @charset "UTF-8";
 
-/// Provides a quick method for targeting `padding` on specific sides of a
+/// Provides a concise method for targeting `padding` on specific sides of a
 /// box. Use a `null` value to “skip” a side.
 ///
-/// @argument {arglist} $values
-///   List of padding values, defined as CSS shorthand.
+/// @argument {list} $values
+///   List of padding values; accepts CSS shorthand.
 ///
 /// @example scss
 ///   .element-one {
 ///     @include padding(null 1rem);
 ///   }
 ///
-///   .element-two {
-///     @include padding(10vh null 10px 5%);
-///   }
-///
-/// @example css
+///   // CSS Output
 ///   .element-one {
 ///     padding-left: 1rem;
 ///     padding-right: 1rem;
 ///   }
 ///
+/// @example scss
+///   .element-two {
+///     @include padding(10vh null 10px 5%);
+///   }
+///
+///   // CSS Output
 ///   .element-two {
 ///     padding-bottom: 10px;
 ///     padding-left: 5%;
@@ -29,6 +31,6 @@
 ///
 /// @require {mixin} _directional-property
 
-@mixin padding($values...) {
-  @include _directional-property(padding, false, $values...);
+@mixin padding($values) {
+  @include _directional-property(padding, null, $values);
 }

data/core/bourbon/library/_position.scss

@@ -1,47 +1,57 @@
 @charset "UTF-8";
 
-/// Provides a quick method for setting an element’s position. Use a `null`
-/// value to “skip” a side.
+/// Provides a concise, one-line method for setting an element’s positioning
+/// properties: `position`, `top`, `right`, `bottom` and `left`. Use a `null`
+/// value to “skip” an edge of the box.
 ///
-/// @argument {string} $position [relative]
+/// @argument {string} $position
 ///   A CSS position value.
 ///
-/// @argument {arglist} $coordinates [null]
-///   List of lengths, defined as CSS shorthand.
+/// @argument {list} $box-edge-values
+///   List of lengths; accepts CSS shorthand.
 ///
 /// @example scss
 ///   .element {
-///     @include position(absolute, 0 null null 10em);
+///     @include position(relative, 0 null null 10em);
 ///   }
 ///
-/// @example css
+///   // CSS Output
 ///   .element {
 ///     left: 10em;
+///     position: relative;
+///     top: 0;
+///   }
+///
+/// @example scss
+///   .element {
+///     @include position(absolute, 0);
+///   }
+///
+///   // CSS Output
+///   .element {
 ///     position: absolute;
 ///     top: 0;
+///     right: 0;
+///     bottom: 0;
+///     left: 0;
 ///   }
 ///
 /// @require {function} _is-length
 ///
-/// @require {function} _unpack
+/// @require {function} _unpack-shorthand
 
 @mixin position(
-    $position: relative,
-    $coordinates: null
+    $position,
+    $box-edge-values
   ) {
 
-  @if type-of($position) == list {
-    $coordinates: $position;
-    $position: relative;
-  }
-
-  $coordinates: _unpack($coordinates);
+  $box-edge-values: _unpack-shorthand($box-edge-values);
 
   $offsets: (
-    top:    nth($coordinates, 1),
-    right:  nth($coordinates, 2),
-    bottom: nth($coordinates, 3),
-    left:   nth($coordinates, 4),
+    top:    nth($box-edge-values, 1),
+    right:  nth($box-edge-values, 2),
+    bottom: nth($box-edge-values, 3),
+    left:   nth($box-edge-values, 4),
   );
 
   position: $position;

data/core/bourbon/library/_prefixer.scss

@@ -16,7 +16,7 @@
 ///     @include prefixer(appearance, none, ("webkit", "moz"));
 ///   }
 ///
-/// @example css
+///   // CSS Output
 ///   .element {
 ///     -webkit-appearance: none;
 ///     -moz-appearance: none;

data/core/bourbon/library/_shade.scss

@@ -14,7 +14,7 @@
 ///     background-color: shade(#ffbb52, 60%);
 ///   }
 ///
-/// @example css
+///   // CSS Output
 ///   .element {
 ///     background-color: #664a20;
 ///   }

data/core/bourbon/library/_size.scss

@@ -11,16 +11,18 @@
 ///     @include size(2em);
 ///   }
 ///
-///   .second-element {
-///     @include size(auto, 10em);
-///   }
-///
-/// @example css
+///   // CSS Output
 ///   .first-element {
 ///     width: 2em;
 ///     height: 2em;
 ///   }
 ///
+/// @example scss
+///   .second-element {
+///     @include size(auto, 10em);
+///   }
+///
+///   // CSS Output
 ///   .second-element {
 ///     width: auto;
 ///     height: 10em;

data/core/bourbon/library/_strip-unit.scss

@@ -9,7 +9,7 @@
 /// @example scss
 ///   $dimension: strip-unit(10em);
 ///
-/// @example css
+///   // Output
 ///   $dimension: 10;
 
 @function strip-unit($value) {

data/core/bourbon/library/_text-inputs.scss

@@ -16,7 +16,7 @@
 ///     border: 1px solid #ccc;
 ///   }
 ///
-/// @example css
+///   // CSS Output
 ///   [type='color'],
 ///   [type='date'],
 ///   [type='datetime'],
@@ -47,7 +47,7 @@ $all-text-inputs: _assign-inputs($_text-inputs-list);
 ///     border: 1px solid #aaa;
 ///   }
 ///
-/// @example css
+///   // CSS Output
 ///   [type='color']:active,
 ///   [type='date']:active,
 ///   [type='datetime']:active,
@@ -78,7 +78,7 @@ $all-text-inputs-active: _assign-inputs($_text-inputs-list, active);
 ///     border: 1px solid #1565c0;
 ///   }
 ///
-/// @example css
+///   // CSS Output
 ///   [type='color']:focus,
 ///   [type='date']:focus,
 ///   [type='datetime']:focus,
@@ -109,7 +109,7 @@ $all-text-inputs-focus: _assign-inputs($_text-inputs-list, focus);
 ///     border: 1px solid #aaa;
 ///   }
 ///
-/// @example css
+///   // CSS Output
 ///   [type='color']:hover,
 ///   [type='date']:hover,
 ///   [type='datetime']:hover,
@@ -140,7 +140,7 @@ $all-text-inputs-hover: _assign-inputs($_text-inputs-list, hover);
 ///     border: 1px solid #00f;
 ///   }
 ///
-/// @example css
+///   // CSS Output
 ///   [type='color']:invalid,
 ///   [type='date']:invalid,
 ///   [type='datetime']:invalid,

data/core/bourbon/library/_timing-functions.scss

@@ -5,7 +5,7 @@
 ////
 /// CSS cubic-bezier timing functions.
 ///
-/// @link http://goo.gl/p8u6SK
+/// @link https://goo.gl/p8u6SK
 ///
 /// @type string
 ////

data/core/bourbon/library/_tint.scss

@@ -14,7 +14,7 @@
 ///     background-color: tint(#6ecaa6, 40%);
 ///   }
 ///
-/// @example css
+///   // CSS Output
 ///   .element {
 ///     background-color: #a8dfc9;
 ///   }