Applies new version of bourbon, 5.0.0

This commit is contained in:
David Darnes 2016-06-18 08:46:20 +01:00
parent 7b1bee8f9b
commit b33964b385
43 changed files with 1844 additions and 0 deletions

View File

@ -0,0 +1,14 @@
@charset "UTF-8";
/// A list of all HTML button elements.
///
/// @type list
///
/// @access private
$_buttons-list: (
"button",
"[type='button']",
"[type='reset']",
"[type='submit']",
);

View File

@ -0,0 +1,27 @@
@charset "UTF-8";
////
/// Pre-defined scales for use with the `modular-scale` function.
///
/// @type number (unitless)
///
/// @see {function} modular-scale
////
$minor-second: 1.067;
$major-second: 1.125;
$minor-third: 1.2;
$major-third: 1.25;
$perfect-fourth: 1.333;
$augmented-fourth: 1.414;
$perfect-fifth: 1.5;
$minor-sixth: 1.6;
$golden: 1.618;
$major-sixth: 1.667;
$minor-seventh: 1.778;
$major-seventh: 1.875;
$octave: 2;
$major-tenth: 2.5;
$major-eleventh: 2.667;
$major-twelfth: 3;
$double-octave: 4;

View File

@ -0,0 +1,26 @@
@charset "UTF-8";
/// A list of all _text-based_ HTML inputs.
///
/// @type list
///
/// @access private
$_text-inputs-list: (
"[type='color']",
"[type='date']",
"[type='datetime']",
"[type='datetime-local']",
"[type='email']",
"[type='month']",
"[type='number']",
"[type='password']",
"[type='search']",
"[type='tel']",
"[type='text']",
"[type='time']",
"[type='url']",
"[type='week']",
"input:not([type])",
"textarea",
);

View File

@ -0,0 +1,25 @@
@charset "UTF-8";
/// Provides a quick method for targeting `border-color` on specific sides of a
/// box. Use a `null` value to skip a side.
///
/// @argument {arglist} $values
/// List of colors, defined as CSS shorthand.
///
/// @example scss
/// .element {
/// @include border-color(#a60b55 #76cd9c null #e8ae1a);
/// }
///
/// @example css
/// .element {
/// border-left-color: #e8ae1a;
/// border-right-color: #76cd9c;
/// border-top-color: #a60b55;
/// }
///
/// @require {mixin} _directional-property
@mixin border-color($values...) {
@include _directional-property(border, color, $values...);
}

View File

@ -0,0 +1,85 @@
@charset "UTF-8";
/// Provides a shorthand syntax to add `border-radius` to both the top-left and
/// top-right of an element.
///
/// @argument {number (with unit)} $radii
///
/// @example scss
/// .element {
/// @include border-top-radius(4px);
/// }
///
/// @example css
/// .element {
/// border-top-left-radius: 4px;
/// border-top-right-radius: 4px;
/// }
@mixin border-top-radius($radii) {
border-top-left-radius: $radii;
border-top-right-radius: $radii;
}
/// Provides a shorthand syntax to add `border-radius` to both the top-right and
/// bottom-right of an element.
///
/// @argument {number (with unit)} $radii
///
/// @example scss
/// .element {
/// @include border-right-radius(3px);
/// }
///
/// @example css
/// .element {
/// border-bottom-right-radius: 3px;
/// border-top-right-radius: 3px;
/// }
@mixin border-right-radius($radii) {
border-bottom-right-radius: $radii;
border-top-right-radius: $radii;
}
/// Provides a shorthand syntax to add `border-radius` to both the bottom-left
/// and bottom-right of an element.
///
/// @argument {number (with unit)} $radii
///
/// @example scss
/// .element {
/// @include border-bottom-radius(2px);
/// }
///
/// @example css
/// .element {
/// border-bottom-left-radius: 2px;
/// border-bottom-right-radius: 2px;
/// }
@mixin border-bottom-radius($radii) {
border-bottom-left-radius: $radii;
border-bottom-right-radius: $radii;
}
/// Provides a shorthand syntax to add `border-radius` to both the top-left
/// and bottom-left of an element.
///
/// @argument {number (with unit)} $radii
///
/// @example scss
/// .element {
/// @include border-left-radius(1px);
/// }
///
/// @example css
/// .element {
/// border-bottom-left-radius: 1px;
/// border-top-left-radius: 1px;
/// }
@mixin border-left-radius($radii) {
border-bottom-left-radius: $radii;
border-top-left-radius: $radii;
}

View File

@ -0,0 +1,24 @@
@charset "UTF-8";
/// Provides a quick method for targeting `border-style` on specific sides of a
/// box. Use a `null` value to skip a side.
///
/// @argument {arglist} $values
/// List of border styles, defined as CSS shorthand.
///
/// @example scss
/// .element {
/// @include border-style(dashed null solid);
/// }
///
/// @example css
/// .element {
/// border-bottom-style: solid;
/// border-top-style: dashed;
/// }
///
/// @require {mixin} _directional-property
@mixin border-style($values...) {
@include _directional-property(border, style, $values...);
}

View File

@ -0,0 +1,24 @@
@charset "UTF-8";
/// Provides a quick method for targeting `border-width` on specific sides of a
/// box. Use a `null` value to skip a side.
///
/// @argument {arglist} $values
/// List of border widths, defined as CSS shorthand.
///
/// @example scss
/// .element {
/// @include border-width(1em null 20px);
/// }
///
/// @example css
/// .element {
/// border-bottom-width: 20px;
/// border-top-width: 1em;
/// }
///
/// @require {mixin} _directional-property
@mixin border-width($values...) {
@include _directional-property(border, width, $values...);
}

View File

@ -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;
/// }
///
/// @example css
/// 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;
/// }
///
/// @example css
/// 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;
/// }
///
/// @example css
/// 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;
/// }
///
/// @example css
/// button:hover,
/// [type='button']:hover,
/// [type='reset']:hover,
/// [type='submit']:hover {
/// background-color: #0f0;
/// }
$all-buttons-hover: _assign-inputs($_buttons-list, hover);

View File

@ -0,0 +1,25 @@
@charset "UTF-8";
/// Provides an easy way to include a clearfix for containing floats.
///
/// @link http://goo.gl/yP5hiZ
///
/// @example scss
/// .element {
/// @include clearfix;
/// }
///
/// @example css
/// .element::after {
/// clear: both;
/// content: "";
/// display: block;
/// }
@mixin clearfix {
&::after {
clear: both;
content: "";
display: block;
}
}

View File

@ -0,0 +1,60 @@
@charset "UTF-8";
/// Switches between two colors based on the lightness of a another color. Great
/// for building button styles.
///
/// @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.
///
/// @argument {color} $light-color [#fff]
/// The color to be output when `$base-color` is dark.
///
/// @return {color}
///
/// @example scss
/// .first-element {
/// color: contrast-switch(#bae6e6);
/// }
///
/// .second-element {
/// $button-color: #2d72d9;
/// background-color: $button-color;
/// color: contrast-switch($button-color, #222, #eee);
/// }
///
/// @example css
/// .first-element {
/// color: #000;
/// }
///
/// .second-element {
/// background-color: #2d72d9;
/// color: #eee;
/// }
///
/// @require {function} _is-light
///
/// @since 5.0.0
@function contrast-switch(
$base-color,
$dark-color: _retrieve-bourbon-setting("contrast-switch-dark-color"),
$light-color: _retrieve-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 {
@return if(_is-light($base-color), $dark-color, $light-color);
}
}

View File

@ -0,0 +1,37 @@
@charset "UTF-8";
/// Truncates text and adds an ellipsis to represent overflow.
///
/// @argument {number} $width [100%]
/// The `max-width` for the string to respect before being truncated.
///
/// @argument {string} $display [inline-block]
/// Sets the display-value of the element.
///
/// @example scss
/// .element {
/// @include ellipsis;
/// }
///
/// @example css
/// .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
) {
display: $display;
max-width: $width;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
}

View File

@ -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 youre using the Rails Asset Pipeline (place the fonts
/// in `app/assets/fonts/`).
///
/// @argument {string | list} $file-formats [("ttf", "woff2", "woff")]
/// Pass a list of file formats to support,
/// for example ("eot", "ttf", "svg", "woff2", "woff").
///
/// @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;
/// }
///
/// @example css
/// @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} _retrieve-bourbon-setting
@mixin font-face(
$font-family,
$file-path,
$file-formats: _retrieve-bourbon-setting("global-font-file-formats"),
$asset-pipeline: _retrieve-bourbon-setting("rails-asset-pipeline")
) {
@font-face {
font-family: $font-family;
src: _font-source-declaration(
$font-family,
$file-path,
$asset-pipeline,
$file-formats
);
@content;
}
}

View File

@ -0,0 +1,87 @@
@charset "UTF-8";
////
/// @type list
///
/// @link goo.gl/Cxb26i
////
$font-stack-helvetica: (
"Helvetica Neue",
"Helvetica",
"Arial",
sans-serif,
);
$font-stack-lucida-grande: (
"Lucida Grande",
"Lucida Sans Unicode",
"Geneva",
"Verdana",
sans-serif,
);
$font-stack-verdana: (
"Verdana",
"Geneva",
sans-serif,
);
$font-stack-system: (
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
"Roboto",
"Oxygen",
"Ubuntu",
"Cantarell",
"Fira Sans",
"Droid Sans",
"Helvetica Neue",
sans-serif,
);
$font-stack-garamond: (
"Garamond",
"Baskerville",
"Baskerville Old Face",
"Hoefler Text",
"Times New Roman",
serif,
);
$font-stack-georgia: (
"Georgia",
"Times",
"Times New Roman",
serif,
);
$font-stack-hoefler-text: (
"Hoefler Text",
"Baskerville Old Face",
"Garamond",
"Times New Roman",
serif,
);
$font-stack-consolas: (
"Consolas",
"monaco",
monospace,
);
$font-stack-courier-new: (
"Courier New",
"Courier",
"Lucida Sans Typewriter",
"Lucida Typewriter",
monospace,
);
$font-stack-monaco: (
"monaco",
"Consolas",
"Lucida Console",
monospace,
);

View File

@ -0,0 +1,24 @@
@charset "UTF-8";
/// 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
///
/// @example scss
/// .element {
/// @include hide-text;
/// }
///
/// @example css
/// .element {
/// overflow: hidden;
/// text-indent: 101%;
/// white-space: nowrap;
/// }
@mixin hide-text {
overflow: hidden;
text-indent: 101%;
white-space: nowrap;
}

View File

@ -0,0 +1,65 @@
@charset "UTF-8";
/// Hides an element visually while still allowing the content to be accessible
/// to assistive technology, e.g. screen readers. Passing `unhide` will reverse
/// the affects of the hiding, which is handy for showing the element on focus,
/// for example.
///
/// @link http://goo.gl/Vf1TGn
///
/// @argument {string} $toggle [hide]
/// Accepts `hide` or `unhide`. `unhide` reverses the affects of `hide`.
///
/// @example scss
/// .element {
/// @include hide-visually;
///
/// &:active,
/// &:focus {
/// @include hide-visually(unhide);
/// }
/// }
///
/// @example css
/// .element {
/// border: 0;
/// clip: rect(1px, 1px, 1px, 1px);
/// clip-path: circle(1% at 1% 1%);
/// height: 1px;
/// overflow: hidden;
/// padding: 0;
/// position: absolute;
/// width: 1px;
/// }
///
/// .hide-visually:active,
/// .hide-visually:focus {
/// clip: auto;
/// clip-path: none;
/// height: auto;
/// overflow: visible;
/// position: static;
/// width: auto;
/// }
///
/// @since 5.0.0
@mixin hide-visually($toggle: hide) {
@if $toggle == "hide" {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: circle(1% at 1% 1%);
height: 1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
} @else if $toggle == "unhide" {
clip: auto;
clip-path: none;
height: auto;
overflow: visible;
position: static;
width: auto;
}
}

View File

@ -0,0 +1,34 @@
@charset "UTF-8";
/// Provides a quick method for targeting `margin` on specific sides of a
/// box. Use a `null` value to skip a side.
///
/// @argument {arglist} $values
/// List of margin values, defined as CSS shorthand.
///
/// @example scss
/// .element-one {
/// @include margin(null auto);
/// }
///
/// .element-two {
/// @include margin(10px 3em 20vh null);
/// }
///
/// @example css
/// .element-one {
/// margin-left: auto;
/// margin-right: auto;
/// }
///
/// .element-two {
/// margin-bottom: 20vh;
/// margin-right: 3em;
/// margin-top: 10px;
/// }
///
/// @require {mixin} _directional-property
@mixin margin($values...) {
@include _directional-property(margin, false, $values...);
}

View File

@ -0,0 +1,113 @@
@charset "UTF-8";
/// Increments up or down a defined scale and returns an adjusted value. This
/// helps establish consistent measurements and spacial relationships throughout
/// your project. We provide a list of commonly used scales as
/// [pre-defined variables][scales].
///
/// [scales]: https://github.com/thoughtbot/bourbon/blob/master/core/bourbon/settings/_scales.scss
///
/// @argument {number (unitless)} $increment
/// How many steps to increment up or down the scale.
///
/// @argument {number (with unit) | list} $value [1em]
/// The base value the scale starts at.
///
/// @argument {number (unitless)} $ratio [1.25]
/// The ratio the scale is built on.
///
/// @return {number (with unit)}
///
/// @example scss
/// .first-element {
/// font-size: modular-scale(2);
/// }
///
/// .second-element {
/// margin-right: modular-scale(3, 2em);
/// }
///
/// .third-element {
/// font-size: modular-scale(3, 1em 1.6em, $major-seventh);
/// }
///
/// // Globally change the base ratio
/// $bourbon: (
/// "modular-scale-ratio": 1.2,
/// );
///
/// .fourth-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 {
/// font-size: 1.728em;
/// }
///
/// @require {function} _retrieve-bourbon-setting
@function modular-scale(
$increment,
$value: _retrieve-bourbon-setting("modular-scale-base"),
$ratio: _retrieve-bourbon-setting("modular-scale-ratio")
) {
$v1: nth($value, 1);
$v2: nth($value, length($value));
$value: $v1;
// scale $v2 to just above $v1
@while $v2 > $v1 {
$v2: ($v2 / $ratio); // will be off-by-1
}
@while $v2 < $v1 {
$v2: ($v2 * $ratio); // will fix off-by-1
}
// check AFTER scaling $v2 to prevent double-counting corner-case
$double-stranded: $v2 > $v1;
@if $increment > 0 {
@for $i from 1 through $increment {
@if $double-stranded and ($v1 * $ratio) > $v2 {
$value: $v2;
$v2: ($v2 * $ratio);
} @else {
$v1: ($v1 * $ratio);
$value: $v1;
}
}
}
@if $increment < 0 {
// adjust $v2 to just below $v1
@if $double-stranded {
$v2: ($v2 / $ratio);
}
@for $i from $increment through -1 {
@if $double-stranded and ($v1 / $ratio) < $v2 {
$value: $v2;
$v2: ($v2 / $ratio);
} @else {
$v1: ($v1 / $ratio);
$value: $v1;
}
}
}
@return $value;
}

View File

@ -0,0 +1,34 @@
@charset "UTF-8";
/// Provides a quick 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.
///
/// @example scss
/// .element-one {
/// @include padding(null 1rem);
/// }
///
/// .element-two {
/// @include padding(10vh null 10px 5%);
/// }
///
/// @example css
/// .element-one {
/// padding-left: 1rem;
/// padding-right: 1rem;
/// }
///
/// .element-two {
/// padding-bottom: 10px;
/// padding-left: 5%;
/// padding-top: 10vh;
/// }
///
/// @require {mixin} _directional-property
@mixin padding($values...) {
@include _directional-property(padding, false, $values...);
}

View File

@ -0,0 +1,54 @@
@charset "UTF-8";
/// Provides a quick method for setting an elements position. Use a `null`
/// value to skip a side.
///
/// @argument {string} $position [relative]
/// A CSS position value.
///
/// @argument {arglist} $coordinates [null]
/// List of lengths, defined as CSS shorthand.
///
/// @example scss
/// .element {
/// @include position(absolute, 0 null null 10em);
/// }
///
/// @example css
/// .element {
/// left: 10em;
/// position: absolute;
/// top: 0;
/// }
///
/// @require {function} _is-length
///
/// @require {function} _unpack
@mixin position(
$position: relative,
$coordinates: null
) {
@if type-of($position) == list {
$coordinates: $position;
$position: relative;
}
$coordinates: _unpack($coordinates);
$offsets: (
top: nth($coordinates, 1),
right: nth($coordinates, 2),
bottom: nth($coordinates, 3),
left: nth($coordinates, 4),
);
position: $position;
@each $offset, $value in $offsets {
@if _is-length($value) {
#{$offset}: $value;
}
}
}

View File

@ -0,0 +1,38 @@
@charset "UTF-8";
/// Generates vendor prefixes.
///
/// @argument {string} $property
/// Property to prefix.
///
/// @argument {string} $value
/// Value to use.
///
/// @argument {list} $prefixes
/// Vendor prefixes to output.
///
/// @example scss
/// .element {
/// @include prefixer(appearance, none, ("webkit", "moz"));
/// }
///
/// @example css
/// .element {
/// -webkit-appearance: none;
/// -moz-appearance: none;
/// appearance: none;
/// }
///
/// @author Hugo Giraudel
@mixin prefixer(
$property,
$value,
$prefixes: ()
) {
@each $prefix in $prefixes {
#{"-" + $prefix + "-" + $property}: $value;
}
#{$property}: $value;
}

View File

@ -0,0 +1,33 @@
@charset "UTF-8";
/// Mixes a color with black.
///
/// @argument {color} $color
///
/// @argument {number (percentage)} $percent
/// The amount of black to be mixed in.
///
/// @return {color}
///
/// @example scss
/// .element {
/// background-color: shade(#ffbb52, 60%);
/// }
///
/// @example css
/// .element {
/// background-color: #664a20;
/// }
@function shade(
$color,
$percent
) {
@if not _is-color($color) {
@error "`#{$color}` is not a valid color for the `$color` argument in " +
"the `shade` mixin.";
} @else {
@return mix(#000, $color, $percent);
}
}

View File

@ -0,0 +1,49 @@
@charset "UTF-8";
/// Sets the `width` and `height` of the element in one statement.
///
/// @argument {number (with unit) | string} $width
///
/// @argument {number (with unit) | string} $height [$width]
///
/// @example scss
/// .first-element {
/// @include size(2em);
/// }
///
/// .second-element {
/// @include size(auto, 10em);
/// }
///
/// @example css
/// .first-element {
/// width: 2em;
/// height: 2em;
/// }
///
/// .second-element {
/// width: auto;
/// height: 10em;
/// }
///
/// @require {function} _is-size
@mixin size(
$width,
$height: $width
) {
@if _is-size($height) {
height: $height;
} @else {
@error "`#{$height}` is not a valid length for the `$height` argument " +
"in the `size` mixin.";
}
@if _is-size($width) {
width: $width;
} @else {
@error "`#{$width}` is not a valid length for the `$width` argument " +
"in the `size` mixin.";
}
}

View File

@ -0,0 +1,17 @@
@charset "UTF-8";
/// Strips the unit from a number.
///
/// @argument {number} $value
///
/// @return {number (unitless)}
///
/// @example scss
/// $dimension: strip-unit(10em);
///
/// @example css
/// $dimension: 10;
@function strip-unit($value) {
@return ($value / ($value * 0 + 1));
}

View File

@ -0,0 +1,163 @@
@charset "UTF-8";
////
/// @type list
///
/// @require {function} _assign-inputs
///
/// @require {variable} $_text-inputs-list
////
/// A list of all _text-based_ HTML inputs. Please note that you must
/// interpolate the variable (`#{}`) to use it as a selector.
///
/// @example scss
/// #{$all-text-inputs} {
/// border: 1px solid #ccc;
/// }
///
/// @example css
/// [type='color'],
/// [type='date'],
/// [type='datetime'],
/// [type='datetime-local'],
/// [type='email'],
/// [type='month'],
/// [type='number'],
/// [type='password'],
/// [type='search'],
/// [type='tel'],
/// [type='text'],
/// [type='time'],
/// [type='url'],
/// [type='week'],
/// input:not([type]),
/// textarea {
/// border: 1px solid #ccc;
/// }
$all-text-inputs: _assign-inputs($_text-inputs-list);
/// A list of all _text-based_ HTML inputs with the `:active` pseudo-class
/// applied. Please note that you must interpolate the variable (`#{}`) to use
/// it as a selector.
///
/// @example scss
/// #{$all-text-inputs-active} {
/// border: 1px solid #aaa;
/// }
///
/// @example css
/// [type='color']:active,
/// [type='date']:active,
/// [type='datetime']:active,
/// [type='datetime-local']:active,
/// [type='email']:active,
/// [type='month']:active,
/// [type='number']:active,
/// [type='password']:active,
/// [type='search']:active,
/// [type='tel']:active,
/// [type='text']:active,
/// [type='time']:active,
/// [type='url']:active,
/// [type='week']:active,
/// input:not([type]):active,
/// textarea:active {
/// border: 1px solid #aaa;
/// }
$all-text-inputs-active: _assign-inputs($_text-inputs-list, active);
/// A list of all _text-based_ HTML inputs with the `:focus` pseudo-class
/// applied. Please note that you must interpolate the variable (`#{}`) to use
/// it as a selector.
///
/// @example scss
/// #{$all-text-inputs-focus} {
/// border: 1px solid #1565c0;
/// }
///
/// @example css
/// [type='color']:focus,
/// [type='date']:focus,
/// [type='datetime']:focus,
/// [type='datetime-local']:focus,
/// [type='email']:focus,
/// [type='month']:focus,
/// [type='number']:focus,
/// [type='password']:focus,
/// [type='search']:focus,
/// [type='tel']:focus,
/// [type='text']:focus,
/// [type='time']:focus,
/// [type='url']:focus,
/// [type='week']:focus,
/// input:not([type]):focus,
/// textarea:focus {
/// border: 1px solid #1565c0;
/// }
$all-text-inputs-focus: _assign-inputs($_text-inputs-list, focus);
/// A list of all _text-based_ HTML inputs with the `:hover` pseudo-class
/// applied. Please note that you must interpolate the variable (`#{}`) to use
/// it as a selector.
///
/// @example scss
/// #{$all-text-inputs-hover} {
/// border: 1px solid #aaa;
/// }
///
/// @example css
/// [type='color']:hover,
/// [type='date']:hover,
/// [type='datetime']:hover,
/// [type='datetime-local']:hover,
/// [type='email']:hover,
/// [type='month']:hover,
/// [type='number']:hover,
/// [type='password']:hover,
/// [type='search']:hover,
/// [type='tel']:hover,
/// [type='text']:hover,
/// [type='time']:hover,
/// [type='url']:hover,
/// [type='week']:hover,
/// input:not([type]):hover,
/// textarea:hover {
/// border: 1px solid #aaa;
/// }
$all-text-inputs-hover: _assign-inputs($_text-inputs-list, hover);
/// A list of all _text-based_ HTML inputs with the `:invalid` pseudo-class
/// applied. Please note that you must interpolate the variable (`#{}`) to use
/// it as a selector.
///
/// @example scss
/// #{$all-text-inputs-invalid} {
/// border: 1px solid #00f;
/// }
///
/// @example css
/// [type='color']:invalid,
/// [type='date']:invalid,
/// [type='datetime']:invalid,
/// [type='datetime-local']:invalid,
/// [type='email']:invalid,
/// [type='month']:invalid,
/// [type='number']:invalid,
/// [type='password']:invalid,
/// [type='search']:invalid,
/// [type='tel']:invalid,
/// [type='text']:invalid,
/// [type='time']:invalid,
/// [type='url']:invalid,
/// [type='week']:invalid,
/// input:not([type]):invalid,
/// textarea:invalid {
/// border: 1px solid #00f;
/// }
$all-text-inputs-invalid: _assign-inputs($_text-inputs-list, invalid);

View File

@ -0,0 +1,38 @@
@charset "UTF-8";
// scss-lint:disable SpaceAfterComma, UnnecessaryMantissa, TrailingZero
////
/// CSS cubic-bezier timing functions.
///
/// @link http://goo.gl/p8u6SK
///
/// @type string
////
$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);
$ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060);
$ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715);
$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-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);
$ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
$ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000);
$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-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);
$ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000);
$ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950);
$ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000);
$ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860);
$ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550);

View File

@ -0,0 +1,33 @@
@charset "UTF-8";
/// Mixes a color with white.
///
/// @argument {color} $color
///
/// @argument {number (percentage)} $percent
/// The amount of white to be mixed in.
///
/// @return {color}
///
/// @example scss
/// .element {
/// background-color: tint(#6ecaa6, 40%);
/// }
///
/// @example css
/// .element {
/// background-color: #a8dfc9;
/// }
@function tint(
$color,
$percent
) {
@if not _is-color($color) {
@error "`#{$color}` is not a valid color for the `$color` argument in " +
"the `tint` mixin.";
} @else {
@return mix(#fff, $color, $percent);
}
}

View File

@ -0,0 +1,82 @@
@charset "UTF-8";
/// Generates a triangle pointing in a specified direction.
///
/// @argument {string} $direction [up]
/// The direction the triangle should point. Accepts `up`, `up-right`,
/// `right`, `down-right`, `down`, `down-left`, `left` or `up-left`.
///
/// @argument {color} $color [currentColor]
/// Color of the triangle.
///
/// @argument {number (with unit)} $width [1rem]
/// Width of the triangle.
///
/// @argument {number (with unit)} $height [($width / 2)]
/// Height of the triangle.
///
/// @example scss
/// .element {
/// &::before {
/// @include triangle(up, #b25c9c, 2rem);
/// content: "";
/// }
/// }
///
/// @example css
/// .element::before {
/// border-style: solid;
/// height: 0;
/// width: 0;
/// border-color: transparent transparent #b25c9c transparent;
/// border-width: 0 1rem 1rem;
/// content: "";
/// }
@mixin triangle(
$direction: up,
$color: currentColor,
$width: 1rem,
$height: ($width / 2)
) {
@if not index(
"up" "up-right" "right" "down-right" "down" "down-left" "left" "up-left",
$direction
) {
@error "Direction must be `up`, `up-right`, `right`, `down-right`, " +
"`down`, `down-left`, `left` or `up-left`.";
} @else if not _is-color($color) {
@error "`#{$color}` is not a valid color for the `$color` argument in " +
"the `triangle` mixin.";
} @else {
border-style: solid;
height: 0;
width: 0;
@if $direction == "up" {
border-color: transparent transparent $color;
border-width: 0 ($width / 2) $height;
} @else if $direction == "up-right" {
border-color: transparent $color transparent transparent;
border-width: 0 $width $width 0;
} @else if $direction == "right" {
border-color: transparent transparent transparent $color;
border-width: ($height / 2) 0 ($height / 2) $width;
} @else if $direction == "down-right" {
border-color: transparent transparent $color;
border-width: 0 0 $width $width;
} @else if $direction == "down" {
border-color: $color transparent transparent;
border-width: $height ($width / 2) 0;
} @else if $direction == "down-left" {
border-color: transparent transparent transparent $color;
border-width: $width 0 0 $width;
} @else if $direction == "left" {
border-color: transparent $color transparent transparent;
border-width: ($height / 2) $width ($height / 2) 0;
} @else if $direction == "up-left" {
border-color: $color transparent transparent;
border-width: $width $width 0 0;
}
}
}

View File

@ -0,0 +1,38 @@
@charset "UTF-8";
/// Generates vendor prefixes for values.
///
/// @argument {string} $property
/// Property to use.
///
/// @argument {string} $value
/// Value to prefix.
///
/// @argument {list} $prefixes
/// Vendor prefixes to output.
///
/// @example scss
/// .element {
/// @include value-prefixer(cursor, grab, ("webkit", "moz"));
/// }
///
/// @example css
/// .element {
/// cursor: -webkit-grab;
/// cursor: -moz-grab;
/// cursor: grab;
/// }
///
/// @author Matthew Tobiasz
@mixin value-prefixer(
$property,
$value,
$prefixes: ()
) {
@each $prefix in $prefixes {
#{$property}: #{"-" + $prefix + "-" + $value};
}
#{$property}: $value;
}

View File

@ -0,0 +1,29 @@
@charset "UTF-8";
/// Provides an easy way to change the `word-wrap` property.
///
/// @argument {string} $wrap [break-word]
/// Value for the `word-break` property.
///
/// @example scss
/// .wrapper {
/// @include word-wrap(break-word);
/// }
///
/// @example css
/// .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;
@if $wrap == break-word {
word-break: break-all;
} @else {
word-break: $wrap;
}
}

View File

@ -0,0 +1,51 @@
@charset "UTF-8";
/// Default Bourbon configuration settings.
///
/// @type map
///
/// @property {color} contrast-switch-dark-color [#000]
/// Global dark color for the `contrast-switch` function.
///
/// @property {color} contrast-switch-light-color [#fff]
/// Global light color for the `contrast-switch` function.
///
/// @property {list} global-font-file-formats [("ttf", "woff2", "woff")]
/// Global font file formats for the `font-face` mixin.
///
/// @property {number (with unit)} modular-scale-base [1em]
/// Global base value for the `modular-scale` function.
///
/// @property {number (unitless)} modular-scale-ratio [$major-third (1.25)]
/// Global base ratio for the `modular-scale` function.
///
/// @property {boolean} rails-asset-pipeline [false]
/// Enable or disable the `$asset-pipeline` variable for all functions that
/// accept it.
///
/// @access private
$_bourbon-defaults: (
"contrast-switch-dark-color": #000,
"contrast-switch-light-color": #fff,
"global-font-file-formats": ("ttf", "woff2", "woff"),
"modular-scale-base": 1em,
"modular-scale-ratio": $major-third,
"rails-asset-pipeline": false,
);
/// User overrides of Bourbon configuration settings.
///
/// @type map
///
/// @example scss
/// $bourbon: (
/// "contrast-switch-dark-color": #000,
/// "contrast-switch-light-color": #fff,
/// "global-font-file-formats": ("ttf", "woff2", "woff"),
/// "modular-scale-base": 1em,
/// "modular-scale-ratio": $major-third,
/// "rails-asset-pipeline": false,
/// );
$bourbon: () !default;

View File

@ -0,0 +1,29 @@
@charset "UTF-8";
/// Append pseudo-classes to a selector(s).
///
/// @argument {list | string} $inputs
/// A selector, or list of selectors, to apply the pseudo-class to.
///
/// @argument {pseudo-class} $pseudo [null]
/// The pseudo-class to be appended.
///
/// @return {list}
///
/// @access private
@function _assign-inputs(
$inputs,
$pseudo: null
) {
$list: ();
@each $input in $inputs {
$input: unquote($input);
$input: if($pseudo, $input + ":" + $pseudo, $input);
$list: append($list, $input, comma);
}
@return $list;
}

View File

@ -0,0 +1,51 @@
@charset "UTF-8";
// scss-lint:disable ElsePlacement
/// Directional-property mixins are shorthands for writing properties like
/// the following.
///
/// @ignore You can also use `false` instead of `null`.
///
/// @argument {list} $values
/// List of directional values.
///
/// @example scss - Usage
/// .element {
/// @include border-style(dotted null);
/// @include margin(null 0 10px);
/// }
///
/// @example css - CSS Output
/// .element {
/// border-bottom-style: dotted;
/// border-top-style: dotted;
/// margin-bottom: 10px;
/// margin-left: 0;
/// margin-right: 0;
/// }
///
/// @return {list}
///
/// @access private
@function _collapse-directionals($values) {
$output: null;
$a: nth($values, 1);
$b: if(length($values) < 2, $a, nth($values, 2));
$c: if(length($values) < 3, $a, nth($values, 3));
$d: if(length($values) < 2, $a, nth($values, if(length($values) < 4, 2, 4)));
@if $a == 0 { $a: 0; }
@if $b == 0 { $b: 0; }
@if $c == 0 { $c: 0; }
@if $d == 0 { $d: 0; }
@if $a == $b and $a == $c and $a == $d { $output: $a; }
@else if $a == $c and $b == $d { $output: $a $b; }
@else if $b == $d { $output: $a $b $c; }
@else { $output: $a $b $c $d; }
@return $output;
}

View File

@ -0,0 +1,58 @@
@charset "UTF-8";
// scss-lint:disable SpaceAroundOperator
/// Output directional properties, for instance `margin`.
///
/// @argument {string} $pre
/// Prefix to use.
///
/// @argument {string} $suf
/// Suffix to use.
///
/// @argument {list} $values
/// List of values.
///
/// @require {function} _collapse-directionals
///
/// @require {function} _contains-falsy
///
/// @access private
@mixin _directional-property(
$pre,
$suf,
$values
) {
$top: $pre + "-top" + if($suf, "-#{$suf}", "");
$bottom: $pre + "-bottom" + if($suf, "-#{$suf}", "");
$left: $pre + "-left" + if($suf, "-#{$suf}", "");
$right: $pre + "-right" + if($suf, "-#{$suf}", "");
$all: $pre + if($suf, "-#{$suf}", "");
$values: _collapse-directionals($values);
@if _contains-falsy($values) {
@if nth($values, 1) { #{$top}: nth($values, 1); }
@if length($values) == 1 {
@if nth($values, 1) { #{$right}: nth($values, 1); }
} @else {
@if nth($values, 2) { #{$right}: nth($values, 2); }
}
@if length($values) == 2 {
@if nth($values, 1) { #{$bottom}: nth($values, 1); }
@if nth($values, 2) { #{$left}: nth($values, 2); }
} @else if length($values) == 3 {
@if nth($values, 3) { #{$bottom}: nth($values, 3); }
@if nth($values, 2) { #{$left}: nth($values, 2); }
} @else if length($values) == 4 {
@if nth($values, 3) { #{$bottom}: nth($values, 3); }
@if nth($values, 4) { #{$left}: nth($values, 4); }
}
} @else {
#{$all}: $values;
}
}

View File

@ -0,0 +1,52 @@
@charset "UTF-8";
/// Builds the `src` list for an `@font-face` declaration.
///
/// @link http://goo.gl/Ru1bKP
///
/// @argument {string} $font-family
///
/// @argument {string} $file-path
///
/// @argument {boolean} $asset-pipeline
///
/// @argument {list} $file-formats
///
/// @return {list}
///
/// @require {function} _contains
///
/// @access private
@function _font-source-declaration(
$font-family,
$file-path,
$asset-pipeline,
$file-formats
) {
$src: ();
$formats-map: (
eot: "#{$file-path}.eot?#iefix" format("embedded-opentype"),
woff2: "#{$file-path}.woff2" format("woff2"),
woff: "#{$file-path}.woff" format("woff"),
ttf: "#{$file-path}.ttf" format("truetype"),
svg: "#{$file-path}.svg##{$font-family}" format("svg"),
);
@each $key, $values in $formats-map {
@if _contains($file-formats, $key) {
$file-path: nth($values, 1);
$font-format: nth($values, 2);
@if $asset-pipeline == true {
$src: append($src, font-url($file-path) $font-format, comma);
} @else {
$src: append($src, url($file-path) $font-format, comma);
}
}
}
@return $src;
}

View File

@ -0,0 +1,16 @@
@charset "UTF-8";
/// Return a Bourbon setting.
///
/// @argument {string} $setting
///
/// @return {boolean | color | list | number | string}
///
/// @example scss
/// _retrieve-bourbon-setting(rails-asset-pipeline)
///
/// @access private
@function _retrieve-bourbon-setting($setting) {
@return map-get(map-merge($_bourbon-defaults, $bourbon), $setting);
}

View File

@ -0,0 +1,29 @@
@charset "UTF-8";
/// Converts shorthand to the 4-value syntax.
///
/// @argument {list} $shorthand
///
/// @example scss
/// .element {
/// margin: _unpack(1em 2em);
/// }
///
/// @example css
/// .element {
/// margin: 1em 2em 1em 2em;
/// }
///
/// @access private
@function _unpack($shorthand) {
@if length($shorthand) == 1 {
@return nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1);
} @else if length($shorthand) == 2 {
@return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 1) nth($shorthand, 2);
} @else if length($shorthand) == 3 {
@return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 3) nth($shorthand, 2);
} @else {
@return $shorthand;
}
}

View File

@ -0,0 +1,20 @@
@charset "UTF-8";
/// Checks if a list does not contains a value.
///
/// @argument {list} $list
/// The list to check against.
///
/// @return {boolean}
///
/// @access private
@function _contains-falsy($list) {
@each $item in $list {
@if not $item {
@return true;
}
}
@return false;
}

View File

@ -0,0 +1,27 @@
@charset "UTF-8";
/// Checks if a list contains a value(s).
///
/// @argument {list} $list
/// The list to check against.
///
/// @argument {list} $values
/// A single value or list of values to check for.
///
/// @return {boolean}
///
/// @access private
@function _contains(
$list,
$values...
) {
@each $value in $values {
@if type-of(index($list, $value)) != "number" {
@return false;
}
}
@return true;
}

View File

@ -0,0 +1,13 @@
@charset "UTF-8";
/// Checks for a valid CSS color.
///
/// @argument {string} $color
///
/// @return {boolean}
///
/// @access private
@function _is-color($color) {
@return (type-of($color) == color) or ($color == "currentColor");
}

View File

@ -0,0 +1,15 @@
@charset "UTF-8";
/// Checks for a valid CSS length.
///
/// @argument {string} $value
///
/// @return {boolean}
///
/// @access private
@function _is-length($value) {
@return type-of($value) != "null" and (str-slice($value + "", 1, 4) == "calc"
or index(auto inherit initial 0, $value)
or (type-of($value) == "number" and not(unitless($value))));
}

View File

@ -0,0 +1,23 @@
@charset "UTF-8";
/// Programatically determines whether a color is light or dark.
///
/// @link http://goo.gl/Dil4Y9
///
/// @argument {color (hex)} $hex-color
///
/// @return {boolean}
///
/// @example scss
/// is-light($color)
///
/// @access private
@function _is-light($hex-color) {
$-local-red: red(rgba($hex-color, 1));
$-local-green: green(rgba($hex-color, 1));
$-local-blue: blue(rgba($hex-color, 1));
$-local-lightness: ($-local-red * 0.2126 + $-local-green * 0.7152 + $-local-blue * 0.0722) / 255;
@return $-local-lightness > 0.6;
}

View File

@ -0,0 +1,15 @@
@charset "UTF-8";
/// Checks for a valid number.
///
/// @argument {number} $value
///
/// @require {function} _contains
///
/// @return {boolean}
///
/// @access private
@function _is-number($value) {
@return _contains("0" "1" "2" "3" "4" "5" "6" "7" "8" "9" 0 1 2 3 4 5 6 7 8 9, $value);
}

View File

@ -0,0 +1,18 @@
@charset "UTF-8";
/// Checks for a valid CSS size.
///
/// @argument {string} $value
///
/// @return {boolean}
///
/// @require {function} _contains
///
/// @require {function} _is-length
///
/// @access private
@function _is-size($value) {
@return _is-length($value)
or _contains("fill" "fit-content" "min-content" "max-content", $value);
}