From: danix Date: Thu, 26 Jan 2023 18:49:37 +0000 (+0100) Subject: added bourbon to the source files and included in the main scss X-Git-Url: https://git.danix.xyz/?a=commitdiff_plain;h=2d3ca553a3d3345ec8ecdf0faedc6924cd0e2f5d;p=theme-danix.xyz.git added bourbon to the source files and included in the main scss --- diff --git a/assets/sass/bourbon/_bourbon.scss b/assets/sass/bourbon/_bourbon.scss new file mode 100644 index 0000000..c369793 --- /dev/null +++ b/assets/sass/bourbon/_bourbon.scss @@ -0,0 +1,54 @@ +// Bourbon 7.3.0 +// https://www.bourbon.io/ +// Copyright 2011-2020 thoughtbot, inc. +// MIT License + +@import "bourbon/helpers/buttons-list"; +@import "bourbon/helpers/scales"; +@import "bourbon/helpers/text-inputs-list"; + +@import "bourbon/settings/settings"; + +@import "bourbon/validators/contains"; +@import "bourbon/validators/contains-falsy"; +@import "bourbon/validators/is-color"; +@import "bourbon/validators/is-length"; +@import "bourbon/validators/is-number"; +@import "bourbon/validators/is-size"; + +@import "bourbon/utilities/assign-inputs"; +@import "bourbon/utilities/compact-shorthand"; +@import "bourbon/utilities/directional-property"; +@import "bourbon/utilities/fetch-bourbon-setting"; +@import "bourbon/utilities/font-source-declaration"; +@import "bourbon/utilities/gamma"; +@import "bourbon/utilities/lightness"; +@import "bourbon/utilities/contrast-ratio"; +@import "bourbon/utilities/unpack-shorthand"; + +@import "bourbon/library/border-color"; +@import "bourbon/library/border-radius"; +@import "bourbon/library/border-style"; +@import "bourbon/library/border-width"; +@import "bourbon/library/buttons"; +@import "bourbon/library/clearfix"; +@import "bourbon/library/contrast-switch"; +@import "bourbon/library/ellipsis"; +@import "bourbon/library/font-face"; +@import "bourbon/library/font-stacks"; +@import "bourbon/library/hide-text"; +@import "bourbon/library/hide-visually"; +@import "bourbon/library/margin"; +@import "bourbon/library/modular-scale"; +@import "bourbon/library/overflow-wrap"; +@import "bourbon/library/padding"; +@import "bourbon/library/position"; +@import "bourbon/library/prefixer"; +@import "bourbon/library/shade"; +@import "bourbon/library/size"; +@import "bourbon/library/strip-unit"; +@import "bourbon/library/text-inputs"; +@import "bourbon/library/timing-functions"; +@import "bourbon/library/tint"; +@import "bourbon/library/triangle"; +@import "bourbon/library/value-prefixer"; diff --git a/assets/sass/bourbon/bourbon/helpers/_buttons-list.scss b/assets/sass/bourbon/bourbon/helpers/_buttons-list.scss new file mode 100644 index 0000000..2e845f7 --- /dev/null +++ b/assets/sass/bourbon/bourbon/helpers/_buttons-list.scss @@ -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']", +); diff --git a/assets/sass/bourbon/bourbon/helpers/_scales.scss b/assets/sass/bourbon/bourbon/helpers/_scales.scss new file mode 100644 index 0000000..178174a --- /dev/null +++ b/assets/sass/bourbon/bourbon/helpers/_scales.scss @@ -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; diff --git a/assets/sass/bourbon/bourbon/helpers/_text-inputs-list.scss b/assets/sass/bourbon/bourbon/helpers/_text-inputs-list.scss new file mode 100644 index 0000000..479326a --- /dev/null +++ b/assets/sass/bourbon/bourbon/helpers/_text-inputs-list.scss @@ -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", +); diff --git a/assets/sass/bourbon/bourbon/library/_border-color.scss b/assets/sass/bourbon/bourbon/library/_border-color.scss new file mode 100644 index 0000000..de25d17 --- /dev/null +++ b/assets/sass/bourbon/bourbon/library/_border-color.scss @@ -0,0 +1,26 @@ +@charset "UTF-8"; + +/// Provides a concise, one-line method for setting `border-color` 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 colors; accepts CSS shorthand. +/// +/// @example scss +/// .element { +/// @include border-color(#a60b55 #76cd9c null #e8ae1a); +/// } +/// +/// // CSS Output +/// .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); +} diff --git a/assets/sass/bourbon/bourbon/library/_border-radius.scss b/assets/sass/bourbon/bourbon/library/_border-radius.scss new file mode 100644 index 0000000..3fce348 --- /dev/null +++ b/assets/sass/bourbon/bourbon/library/_border-radius.scss @@ -0,0 +1,85 @@ +@charset "UTF-8"; + +/// Provides a concise, one-line method for setting `border-radius` on both the +/// top-left and top-right of a box. +/// +/// @argument {number (with unit)} $radii +/// +/// @example scss +/// .element { +/// @include border-top-radius(4px); +/// } +/// +/// // CSS Output +/// .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 concise, one-line method for setting `border-radius` on both the +/// top-right and bottom-right of a box. +/// +/// @argument {number (with unit)} $radii +/// +/// @example scss +/// .element { +/// @include border-right-radius(3px); +/// } +/// +/// // CSS Output +/// .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 concise, one-line method for setting `border-radius` on both the +/// bottom-left and bottom-right of a box. +/// +/// @argument {number (with unit)} $radii +/// +/// @example scss +/// .element { +/// @include border-bottom-radius(2px); +/// } +/// +/// // CSS Output +/// .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 concise, one-line method for setting `border-radius` on both the +/// top-left and bottom-left of a box. +/// +/// @argument {number (with unit)} $radii +/// +/// @example scss +/// .element { +/// @include border-left-radius(1px); +/// } +/// +/// // CSS Output +/// .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; +} diff --git a/assets/sass/bourbon/bourbon/library/_border-style.scss b/assets/sass/bourbon/bourbon/library/_border-style.scss new file mode 100644 index 0000000..222f274 --- /dev/null +++ b/assets/sass/bourbon/bourbon/library/_border-style.scss @@ -0,0 +1,25 @@ +@charset "UTF-8"; + +/// Provides a concise, one-line method for setting `border-style` 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 styles; accepts CSS shorthand. +/// +/// @example scss +/// .element { +/// @include border-style(dashed null solid); +/// } +/// +/// // CSS Output +/// .element { +/// border-bottom-style: solid; +/// border-top-style: dashed; +/// } +/// +/// @require {mixin} _directional-property + +@mixin border-style($values) { + @include _directional-property(border, style, $values); +} diff --git a/assets/sass/bourbon/bourbon/library/_border-width.scss b/assets/sass/bourbon/bourbon/library/_border-width.scss new file mode 100644 index 0000000..a64e4b8 --- /dev/null +++ b/assets/sass/bourbon/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); +} diff --git a/assets/sass/bourbon/bourbon/library/_buttons.scss b/assets/sass/bourbon/bourbon/library/_buttons.scss new file mode 100644 index 0000000..a03485d --- /dev/null +++ b/assets/sass/bourbon/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); diff --git a/assets/sass/bourbon/bourbon/library/_clearfix.scss b/assets/sass/bourbon/bourbon/library/_clearfix.scss new file mode 100644 index 0000000..d8ccc42 --- /dev/null +++ b/assets/sass/bourbon/bourbon/library/_clearfix.scss @@ -0,0 +1,25 @@ +@charset "UTF-8"; + +/// Provides an easy way to include a clearfix for containing floats. +/// +/// @link https://goo.gl/yP5hiZ +/// +/// @example scss +/// .element { +/// @include clearfix; +/// } +/// +/// // CSS Output +/// .element::after { +/// clear: both; +/// content: ""; +/// display: block; +/// } + +@mixin clearfix { + &::after { + clear: both; + content: ""; + display: block; + } +} diff --git a/assets/sass/bourbon/bourbon/library/_contrast-switch.scss b/assets/sass/bourbon/bourbon/library/_contrast-switch.scss new file mode 100644 index 0000000..4545be3 --- /dev/null +++ b/assets/sass/bourbon/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); + } +} diff --git a/assets/sass/bourbon/bourbon/library/_ellipsis.scss b/assets/sass/bourbon/bourbon/library/_ellipsis.scss new file mode 100644 index 0000000..6d3e5c6 --- /dev/null +++ b/assets/sass/bourbon/bourbon/library/_ellipsis.scss @@ -0,0 +1,36 @@ +@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; +/// } +/// +/// // 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 +) { + display: $display; + max-width: $width; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + word-wrap: normal; +} diff --git a/assets/sass/bourbon/bourbon/library/_font-face.scss b/assets/sass/bourbon/bourbon/library/_font-face.scss new file mode 100644 index 0000000..8aab1dc --- /dev/null +++ b/assets/sass/bourbon/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 `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 | list} $file-formats [("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. +/// +/// @argument {boolean} $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. +/// +/// @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; + } +} diff --git a/assets/sass/bourbon/bourbon/library/_font-stacks.scss b/assets/sass/bourbon/bourbon/library/_font-stacks.scss new file mode 100644 index 0000000..e1676ba --- /dev/null +++ b/assets/sass/bourbon/bourbon/library/_font-stacks.scss @@ -0,0 +1,248 @@ +@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. +/// +/// @type list +/// +/// @example scss +/// .element { +/// font-family: $font-stack-system; +/// } +/// +/// // CSS Output +/// .element { +/// font-family: system-ui, -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: ( + system-ui, + -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, +); diff --git a/assets/sass/bourbon/bourbon/library/_hide-text.scss b/assets/sass/bourbon/bourbon/library/_hide-text.scss new file mode 100644 index 0000000..e9ee0f9 --- /dev/null +++ b/assets/sass/bourbon/bourbon/library/_hide-text.scss @@ -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 https://goo.gl/EvLRIu +/// +/// @example scss +/// .element { +/// @include hide-text; +/// } +/// +/// // CSS Output +/// .element { +/// overflow: hidden; +/// text-indent: 101%; +/// white-space: nowrap; +/// } + +@mixin hide-text { + overflow: hidden; + text-indent: 101%; + white-space: nowrap; +} diff --git a/assets/sass/bourbon/bourbon/library/_hide-visually.scss b/assets/sass/bourbon/bourbon/library/_hide-visually.scss new file mode 100644 index 0000000..4d092c7 --- /dev/null +++ b/assets/sass/bourbon/bourbon/library/_hide-visually.scss @@ -0,0 +1,70 @@ +@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 https://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"); +/// } +/// } +/// +/// // CSS Output +/// .element { +/// border: 0; +/// clip: rect(1px, 1px, 1px, 1px); +/// clip-path: inset(100%); +/// 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 not index("hide" "unhide", $toggle) { + @error "`#{$toggle}` is not a valid value for the `$toggle` argument in " + + "the `hide-visually` mixin. Must be either `hide` or `unhide`."; + } @else if $toggle == "hide" { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(100%); + height: 1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: 1px; + } @else if $toggle == "unhide" { + clip: auto; + clip-path: none; + height: auto; + overflow: visible; + position: static; + white-space: inherit; + width: auto; + } +} diff --git a/assets/sass/bourbon/bourbon/library/_margin.scss b/assets/sass/bourbon/bourbon/library/_margin.scss new file mode 100644 index 0000000..29fa7ab --- /dev/null +++ b/assets/sass/bourbon/bourbon/library/_margin.scss @@ -0,0 +1,37 @@ +@charset "UTF-8"; + +/// 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 {list} $values +/// List of margin values; accepts CSS shorthand. +/// +/// @example scss +/// .element { +/// @include margin(null auto); +/// } +/// +/// // CSS Output +/// .element { +/// margin-left: auto; +/// margin-right: auto; +/// } +/// +/// @example scss +/// .element { +/// @include margin(10px 3em 20vh null); +/// } +/// +/// // CSS Output +/// .element { +/// margin-bottom: 20vh; +/// margin-right: 3em; +/// margin-top: 10px; +/// } +/// +/// @require {mixin} _directional-property + +@mixin margin($values) { + @include _directional-property(margin, null, $values); +} diff --git a/assets/sass/bourbon/bourbon/library/_modular-scale.scss b/assets/sass/bourbon/bourbon/library/_modular-scale.scss new file mode 100644 index 0000000..81f2ab9 --- /dev/null +++ b/assets/sass/bourbon/bourbon/library/_modular-scale.scss @@ -0,0 +1,120 @@ +@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/helpers/_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. 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. Can also be set globally using the +/// `modular-scale-ratio` key in the Bourbon settings. +/// +/// @return {number (with unit)} +/// +/// @example scss +/// .element { +/// font-size: modular-scale(2); +/// } +/// +/// // CSS Output +/// .element { +/// font-size: 1.5625em; +/// } +/// +/// @example scss +/// .element { +/// margin-right: modular-scale(3, 2em); +/// } +/// +/// // 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, +/// ); +/// +/// .element { +/// font-size: modular-scale(3); +/// } +/// +/// // CSS Output +/// .element { +/// font-size: 1.728em; +/// } +/// +/// @require {function} _fetch-bourbon-setting + +@function modular-scale( + $increment, + $value: _fetch-bourbon-setting("modular-scale-base"), + $ratio: _fetch-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; +} diff --git a/assets/sass/bourbon/bourbon/library/_overflow-wrap.scss b/assets/sass/bourbon/bourbon/library/_overflow-wrap.scss new file mode 100644 index 0000000..6a4d148 --- /dev/null +++ b/assets/sass/bourbon/bourbon/library/_overflow-wrap.scss @@ -0,0 +1,25 @@ +@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; + // stylelint-disable-next-line order/properties-alphabetical-order + overflow-wrap: $wrap; +} diff --git a/assets/sass/bourbon/bourbon/library/_padding.scss b/assets/sass/bourbon/bourbon/library/_padding.scss new file mode 100644 index 0000000..7d401bb --- /dev/null +++ b/assets/sass/bourbon/bourbon/library/_padding.scss @@ -0,0 +1,36 @@ +@charset "UTF-8"; + +/// Provides a concise method for targeting `padding` on specific sides of a +/// box. Use a `null` value to “skip” a side. +/// +/// @argument {list} $values +/// List of padding values; accepts CSS shorthand. +/// +/// @example scss +/// .element-one { +/// @include padding(null 1rem); +/// } +/// +/// // 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%; +/// padding-top: 10vh; +/// } +/// +/// @require {mixin} _directional-property + +@mixin padding($values) { + @include _directional-property(padding, null, $values); +} diff --git a/assets/sass/bourbon/bourbon/library/_position.scss b/assets/sass/bourbon/bourbon/library/_position.scss new file mode 100644 index 0000000..3161757 --- /dev/null +++ b/assets/sass/bourbon/bourbon/library/_position.scss @@ -0,0 +1,62 @@ +@charset "UTF-8"; + +/// 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 +/// A CSS position value. +/// +/// @argument {list} $box-edge-values +/// List of lengths; accepts CSS shorthand. +/// +/// @example scss +/// .element { +/// @include position(relative, 0 null null 10em); +/// } +/// +/// // 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-shorthand + +@mixin position( + $position, + $box-edge-values +) { + $box-edge-values: _unpack-shorthand($box-edge-values); + $offsets: ( + "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; + + @each $offset, $value in $offsets { + @if _is-length($value) { + #{$offset}: $value; + } + } +} diff --git a/assets/sass/bourbon/bourbon/library/_prefixer.scss b/assets/sass/bourbon/bourbon/library/_prefixer.scss new file mode 100644 index 0000000..ad28e5a --- /dev/null +++ b/assets/sass/bourbon/bourbon/library/_prefixer.scss @@ -0,0 +1,37 @@ +@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")); +/// } +/// +/// // CSS Output +/// .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; +} diff --git a/assets/sass/bourbon/bourbon/library/_shade.scss b/assets/sass/bourbon/bourbon/library/_shade.scss new file mode 100644 index 0000000..1e1ec72 --- /dev/null +++ b/assets/sass/bourbon/bourbon/library/_shade.scss @@ -0,0 +1,32 @@ +@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%); +/// } +/// +/// // CSS Output +/// .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); + } +} diff --git a/assets/sass/bourbon/bourbon/library/_size.scss b/assets/sass/bourbon/bourbon/library/_size.scss new file mode 100644 index 0000000..c90f36e --- /dev/null +++ b/assets/sass/bourbon/bourbon/library/_size.scss @@ -0,0 +1,50 @@ +@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); +/// } +/// +/// // CSS Output +/// .first-element { +/// width: 2em; +/// height: 2em; +/// } +/// +/// @example scss +/// .second-element { +/// @include size(auto, 10em); +/// } +/// +/// // CSS Output +/// .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."; + } +} diff --git a/assets/sass/bourbon/bourbon/library/_strip-unit.scss b/assets/sass/bourbon/bourbon/library/_strip-unit.scss new file mode 100644 index 0000000..f4f660a --- /dev/null +++ b/assets/sass/bourbon/bourbon/library/_strip-unit.scss @@ -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); +/// +/// // Output +/// $dimension: 10; + +@function strip-unit($value) { + @return ($value / ($value * 0 + 1)); +} diff --git a/assets/sass/bourbon/bourbon/library/_text-inputs.scss b/assets/sass/bourbon/bourbon/library/_text-inputs.scss new file mode 100644 index 0000000..dfebb79 --- /dev/null +++ b/assets/sass/bourbon/bourbon/library/_text-inputs.scss @@ -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; +/// } +/// +/// // CSS Output +/// [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; +/// } +/// +/// // CSS Output +/// [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; +/// } +/// +/// // CSS Output +/// [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; +/// } +/// +/// // CSS Output +/// [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; +/// } +/// +/// // CSS Output +/// [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); diff --git a/assets/sass/bourbon/bourbon/library/_timing-functions.scss b/assets/sass/bourbon/bourbon/library/_timing-functions.scss new file mode 100644 index 0000000..1981416 --- /dev/null +++ b/assets/sass/bourbon/bourbon/library/_timing-functions.scss @@ -0,0 +1,36 @@ +@charset "UTF-8"; + +//// +/// CSS cubic-bezier timing functions. +/// +/// @link https://goo.gl/p8u6SK +/// +/// @type string +//// + +$ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53); +$ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19); +$ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22); +$ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06); +$ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715); +$ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035); +$ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335); +$ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045); + +$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); +$ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1); +$ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1); +$ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1); +$ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1); +$ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); +$ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1); +$ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275); + +$ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955); +$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1); +$ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1); +$ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1); +$ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95); +$ease-in-out-expo: cubic-bezier(1, 0, 0, 1); +$ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86); +$ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55); diff --git a/assets/sass/bourbon/bourbon/library/_tint.scss b/assets/sass/bourbon/bourbon/library/_tint.scss new file mode 100644 index 0000000..c9ef892 --- /dev/null +++ b/assets/sass/bourbon/bourbon/library/_tint.scss @@ -0,0 +1,32 @@ +@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%); +/// } +/// +/// // CSS Output +/// .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); + } +} diff --git a/assets/sass/bourbon/bourbon/library/_triangle.scss b/assets/sass/bourbon/bourbon/library/_triangle.scss new file mode 100644 index 0000000..6ed32a1 --- /dev/null +++ b/assets/sass/bourbon/bourbon/library/_triangle.scss @@ -0,0 +1,82 @@ +@charset "UTF-8"; + +/// Generates a triangle pointing in a specified direction. +/// +/// @argument {string} $direction +/// The direction the triangle should point. Accepts `up`, `up-right`, +/// `right`, `down-right`, `down`, `down-left`, `left` or `up-left`. +/// +/// @argument {number (with unit)} $width +/// Width of the triangle. +/// +/// @argument {number (with unit)} $height +/// Height of the triangle. +/// +/// @argument {color} $color +/// Color of the triangle. +/// +/// @example scss +/// .element { +/// &::before { +/// @include triangle("up", 2rem, 1rem, #b25c9c); +/// content: ""; +/// } +/// } +/// +/// // CSS Output +/// .element::before { +/// border-style: solid; +/// height: 0; +/// width: 0; +/// border-color: transparent transparent #b25c9c; +/// border-width: 0 1rem 1rem; +/// content: ""; +/// } + +@mixin triangle( + $direction, + $width, + $height, + $color +) { + @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; + } + } +} diff --git a/assets/sass/bourbon/bourbon/library/_value-prefixer.scss b/assets/sass/bourbon/bourbon/library/_value-prefixer.scss new file mode 100644 index 0000000..6eb8867 --- /dev/null +++ b/assets/sass/bourbon/bourbon/library/_value-prefixer.scss @@ -0,0 +1,37 @@ +@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")); +/// } +/// +/// // CSS Output +/// .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; +} diff --git a/assets/sass/bourbon/bourbon/settings/_settings.scss b/assets/sass/bourbon/bourbon/settings/_settings.scss new file mode 100644 index 0000000..44c41c7 --- /dev/null +++ b/assets/sass/bourbon/bourbon/settings/_settings.scss @@ -0,0 +1,75 @@ +@charset "UTF-8"; + +/// Default global Bourbon settings. Values in this map are overwritten by any +/// values set in the `$bourbon` map. +/// +/// @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 [("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] +/// Set this to `true` when using the Rails Asset Pipeline and Bourbon will +/// write asset paths using +/// [sass-rails’ asset helpers](https://github.com/rails/sass-rails#asset-helpers). +/// +/// @access private + +$_bourbon-defaults: ( + "contrast-switch-dark-color": #000, + "contrast-switch-light-color": #fff, + "global-font-file-formats": ("woff2", "woff"), + "modular-scale-base": 1em, + "modular-scale-ratio": $major-third, + "rails-asset-pipeline": false, +); + +/// Global Bourbon settings. +/// +/// @name 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 [("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] +/// Set this to `true` when using the Rails Asset Pipeline and Bourbon will +/// write asset paths using +/// [sass-rails’ asset helpers](https://github.com/rails/sass-rails#asset-helpers). +/// +/// @example scss +/// $bourbon: ( +/// "contrast-switch-dark-color": #000, +/// "contrast-switch-light-color": #fff, +/// "global-font-file-formats": ("woff2", "woff"), +/// "modular-scale-base": 1em, +/// "modular-scale-ratio": $major-third, +/// "rails-asset-pipeline": false, +/// ); + +$bourbon: () !default; diff --git a/assets/sass/bourbon/bourbon/utilities/_assign-inputs.scss b/assets/sass/bourbon/bourbon/utilities/_assign-inputs.scss new file mode 100644 index 0000000..e374553 --- /dev/null +++ b/assets/sass/bourbon/bourbon/utilities/_assign-inputs.scss @@ -0,0 +1,28 @@ +@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; +} diff --git a/assets/sass/bourbon/bourbon/utilities/_compact-shorthand.scss b/assets/sass/bourbon/bourbon/utilities/_compact-shorthand.scss new file mode 100644 index 0000000..98a98db --- /dev/null +++ b/assets/sass/bourbon/bourbon/utilities/_compact-shorthand.scss @@ -0,0 +1,42 @@ +@charset "UTF-8"; + +/// Transforms shorthand to its shortest possible form. +/// +/// @argument {list} $values +/// List of directional values. +/// +/// @example scss +/// $values: _compact-shorthand(10px 20px 10px 20px); +/// +/// // Output +/// $values: 10px 20px; +/// +/// @return {list} +/// +/// @access private + +@function _compact-shorthand($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; +} diff --git a/assets/sass/bourbon/bourbon/utilities/_contrast-ratio.scss b/assets/sass/bourbon/bourbon/utilities/_contrast-ratio.scss new file mode 100644 index 0000000..1ba65ce --- /dev/null +++ b/assets/sass/bourbon/bourbon/utilities/_contrast-ratio.scss @@ -0,0 +1,31 @@ +@charset "UTF-8"; + +/// Programatically determines the contrast ratio between two colors. +/// +/// Note that the alpha channel is ignored. +/// +/// @link https://goo.gl/54htLV +/// +/// @argument {color (hex)} $color-1 +/// +/// @argument {color (hex)} $color-2 +/// +/// @return {number (1-21)} +/// +/// @example scss +/// _contrast-ratio(black, white) +/// +/// @require {function} _lightness +/// +/// @access private + +@function _contrast-ratio($color-1, $color-2) { + $-local-lightness-1: _lightness($color-1) + 0.05; + $-local-lightness-2: _lightness($color-2) + 0.05; + + @if $-local-lightness-1 > $-local-lightness-2 { + @return $-local-lightness-1 / $-local-lightness-2; + } @else { + @return $-local-lightness-2 / $-local-lightness-1; + } +} diff --git a/assets/sass/bourbon/bourbon/utilities/_directional-property.scss b/assets/sass/bourbon/bourbon/utilities/_directional-property.scss new file mode 100644 index 0000000..7f715d7 --- /dev/null +++ b/assets/sass/bourbon/bourbon/utilities/_directional-property.scss @@ -0,0 +1,68 @@ +@charset "UTF-8"; + +/// Builds directional properties by parsing CSS shorthand values. For example, +/// a value of `10px null` will output top and bottom directional properties, +/// but the `null` skips left and right from being output. +/// +/// @argument {string} $property +/// Base property. +/// +/// @argument {string} $suffix +/// Suffix to append. Use `null` to omit. +/// +/// @argument {list} $values +/// List of values to set for the property. +/// +/// @example scss +/// .element { +/// @include _directional-property(border, width, null 5px); +/// } +/// +/// // CSS Output +/// .element { +/// border-right-width: 5px; +/// border-left-width: 5px; +/// } +/// +/// @require {function} _compact-shorthand +/// +/// @require {function} _contains-falsy +/// +/// @access private + +@mixin _directional-property( + $property, + $suffix, + $values +) { + $top: $property + "-top" + if($suffix, "-#{$suffix}", ""); + $bottom: $property + "-bottom" + if($suffix, "-#{$suffix}", ""); + $left: $property + "-left" + if($suffix, "-#{$suffix}", ""); + $right: $property + "-right" + if($suffix, "-#{$suffix}", ""); + $all: $property + if($suffix, "-#{$suffix}", ""); + + $values: _compact-shorthand($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; + } +} diff --git a/assets/sass/bourbon/bourbon/utilities/_fetch-bourbon-setting.scss b/assets/sass/bourbon/bourbon/utilities/_fetch-bourbon-setting.scss new file mode 100644 index 0000000..b6e4366 --- /dev/null +++ b/assets/sass/bourbon/bourbon/utilities/_fetch-bourbon-setting.scss @@ -0,0 +1,16 @@ +@charset "UTF-8"; + +/// Return a Bourbon setting. +/// +/// @argument {string} $setting +/// +/// @return {boolean | color | list | number | string} +/// +/// @example scss +/// _fetch-bourbon-setting(rails-asset-pipeline) +/// +/// @access private + +@function _fetch-bourbon-setting($setting) { + @return map-get(map-merge($_bourbon-defaults, $bourbon), $setting); +} diff --git a/assets/sass/bourbon/bourbon/utilities/_font-source-declaration.scss b/assets/sass/bourbon/bourbon/utilities/_font-source-declaration.scss new file mode 100644 index 0000000..f2447aa --- /dev/null +++ b/assets/sass/bourbon/bourbon/utilities/_font-source-declaration.scss @@ -0,0 +1,52 @@ +@charset "UTF-8"; + +/// Builds the `src` list for an `@font-face` declaration. +/// +/// @link https://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: ( + "woff2": "#{$file-path}.woff2" format("woff2"), + "woff": "#{$file-path}.woff" format("woff"), + ); + + @each $format in $file-formats { + @if _contains(map-keys($formats-map), $format) { + $value: map-get($formats-map, $format); + $file-path: nth($value, 1); + $font-format: nth($value, 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); + } + } @else { + @error "`#{$file-formats}` contains an unsupported font file format. " + + "Must be `woff` and/or `woff2`."; + } + } + + @return $src; +} diff --git a/assets/sass/bourbon/bourbon/utilities/_gamma.scss b/assets/sass/bourbon/bourbon/utilities/_gamma.scss new file mode 100644 index 0000000..3e5145b --- /dev/null +++ b/assets/sass/bourbon/bourbon/utilities/_gamma.scss @@ -0,0 +1,24 @@ +@charset "UTF-8"; + +/// Performs gamma correction on a single color channel. +/// +/// Note that the calculation is approximate if a `pow()` is not available. +/// +/// @argument {number (0-1)} $channel +/// +/// @return {number (0-1)} +/// +/// @access private + +@function _gamma($channel) { + @if $channel < 0.03928 { + @return $channel / 12.92; + } @else { + $c: ($channel + 0.055) / 1.055; + @if function-exists("pow") { + @return pow($c, 2.4); + } @else { + @return 0.56 * $c * $c * $c + 0.44 * $c * $c; + } + } +} diff --git a/assets/sass/bourbon/bourbon/utilities/_lightness.scss b/assets/sass/bourbon/bourbon/utilities/_lightness.scss new file mode 100644 index 0000000..a292904 --- /dev/null +++ b/assets/sass/bourbon/bourbon/utilities/_lightness.scss @@ -0,0 +1,24 @@ +@charset "UTF-8"; + +/// Programatically determines the lightness of a color. +/// +/// @argument {color (hex)} $hex-color +/// +/// @return {number (0-1)} +/// +/// @example scss +/// _lightness($color) +/// +/// @access private + +@function _lightness($hex-color) { + $-local-red-raw: red(rgba($hex-color, 1)); + $-local-green-raw: green(rgba($hex-color, 1)); + $-local-blue-raw: blue(rgba($hex-color, 1)); + + $-local-red: _gamma($-local-red-raw / 255); + $-local-green: _gamma($-local-green-raw / 255); + $-local-blue: _gamma($-local-blue-raw / 255); + + @return $-local-red * 0.2126 + $-local-green * 0.7152 + $-local-blue * 0.0722; +} diff --git a/assets/sass/bourbon/bourbon/utilities/_unpack-shorthand.scss b/assets/sass/bourbon/bourbon/utilities/_unpack-shorthand.scss new file mode 100644 index 0000000..5d39a71 --- /dev/null +++ b/assets/sass/bourbon/bourbon/utilities/_unpack-shorthand.scss @@ -0,0 +1,29 @@ +@charset "UTF-8"; + +/// Transforms shorthand that can range from 1-to-4 values to be 4 values. +/// +/// @argument {list} $shorthand +/// +/// @example scss +/// .element { +/// margin: _unpack-shorthand(1em 2em); +/// } +/// +/// // CSS Output +/// .element { +/// margin: 1em 2em 1em 2em; +/// } +/// +/// @access private + +@function _unpack-shorthand($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; + } +} diff --git a/assets/sass/bourbon/bourbon/validators/_contains-falsy.scss b/assets/sass/bourbon/bourbon/validators/_contains-falsy.scss new file mode 100644 index 0000000..4501e58 --- /dev/null +++ b/assets/sass/bourbon/bourbon/validators/_contains-falsy.scss @@ -0,0 +1,20 @@ +@charset "UTF-8"; + +/// Checks if a list does not contain any values. +/// +/// @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; +} diff --git a/assets/sass/bourbon/bourbon/validators/_contains.scss b/assets/sass/bourbon/bourbon/validators/_contains.scss new file mode 100644 index 0000000..97910a1 --- /dev/null +++ b/assets/sass/bourbon/bourbon/validators/_contains.scss @@ -0,0 +1,26 @@ +@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; +} diff --git a/assets/sass/bourbon/bourbon/validators/_is-color.scss b/assets/sass/bourbon/bourbon/validators/_is-color.scss new file mode 100644 index 0000000..fa40e74 --- /dev/null +++ b/assets/sass/bourbon/bourbon/validators/_is-color.scss @@ -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"); +} diff --git a/assets/sass/bourbon/bourbon/validators/_is-length.scss b/assets/sass/bourbon/bourbon/validators/_is-length.scss new file mode 100644 index 0000000..bfc3964 --- /dev/null +++ b/assets/sass/bourbon/bourbon/validators/_is-length.scss @@ -0,0 +1,20 @@ +@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 str-slice($value + "", 1, 3) == "var" + or str-slice($value + "", 1, 3) == "env" + or index(auto inherit initial 0, $value) + or (type-of($value) == "number" and not(unitless($value))) + ); +} diff --git a/assets/sass/bourbon/bourbon/validators/_is-number.scss b/assets/sass/bourbon/bourbon/validators/_is-number.scss new file mode 100644 index 0000000..36fa086 --- /dev/null +++ b/assets/sass/bourbon/bourbon/validators/_is-number.scss @@ -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); +} diff --git a/assets/sass/bourbon/bourbon/validators/_is-size.scss b/assets/sass/bourbon/bourbon/validators/_is-size.scss new file mode 100644 index 0000000..54edcb5 --- /dev/null +++ b/assets/sass/bourbon/bourbon/validators/_is-size.scss @@ -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); +} diff --git a/assets/sass/main.scss b/assets/sass/main.scss index 6f5989e..6aebb79 100644 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -1,3 +1,5 @@ +@import "bourbon/bourbon"; + body { background-color: #dadada;; header#masthead,