From e182245d3205d929881f51da9b48d6c4ed97a682 Mon Sep 17 00:00:00 2001 From: HombreLaser Date: Thu, 8 Feb 2024 16:36:31 -0600 Subject: Commit inicial --- _sass/bourbon/addons/_border-color.scss | 26 +++++++ _sass/bourbon/addons/_border-radius.scss | 48 ++++++++++++ _sass/bourbon/addons/_border-style.scss | 25 +++++++ _sass/bourbon/addons/_border-width.scss | 25 +++++++ _sass/bourbon/addons/_buttons.scss | 64 ++++++++++++++++ _sass/bourbon/addons/_clearfix.scss | 25 +++++++ _sass/bourbon/addons/_ellipsis.scss | 30 ++++++++ _sass/bourbon/addons/_font-stacks.scss | 31 ++++++++ _sass/bourbon/addons/_hide-text.scss | 27 +++++++ _sass/bourbon/addons/_margin.scss | 26 +++++++ _sass/bourbon/addons/_padding.scss | 26 +++++++ _sass/bourbon/addons/_position.scss | 48 ++++++++++++ _sass/bourbon/addons/_prefixer.scss | 66 ++++++++++++++++ _sass/bourbon/addons/_retina-image.scss | 25 +++++++ _sass/bourbon/addons/_size.scss | 51 +++++++++++++ _sass/bourbon/addons/_text-inputs.scss | 112 ++++++++++++++++++++++++++++ _sass/bourbon/addons/_timing-functions.scss | 34 +++++++++ _sass/bourbon/addons/_triangle.scss | 63 ++++++++++++++++ _sass/bourbon/addons/_word-wrap.scss | 29 +++++++ 19 files changed, 781 insertions(+) create mode 100644 _sass/bourbon/addons/_border-color.scss create mode 100644 _sass/bourbon/addons/_border-radius.scss create mode 100644 _sass/bourbon/addons/_border-style.scss create mode 100644 _sass/bourbon/addons/_border-width.scss create mode 100644 _sass/bourbon/addons/_buttons.scss create mode 100644 _sass/bourbon/addons/_clearfix.scss create mode 100644 _sass/bourbon/addons/_ellipsis.scss create mode 100644 _sass/bourbon/addons/_font-stacks.scss create mode 100644 _sass/bourbon/addons/_hide-text.scss create mode 100644 _sass/bourbon/addons/_margin.scss create mode 100644 _sass/bourbon/addons/_padding.scss create mode 100644 _sass/bourbon/addons/_position.scss create mode 100644 _sass/bourbon/addons/_prefixer.scss create mode 100644 _sass/bourbon/addons/_retina-image.scss create mode 100644 _sass/bourbon/addons/_size.scss create mode 100644 _sass/bourbon/addons/_text-inputs.scss create mode 100644 _sass/bourbon/addons/_timing-functions.scss create mode 100644 _sass/bourbon/addons/_triangle.scss create mode 100644 _sass/bourbon/addons/_word-wrap.scss (limited to '_sass/bourbon/addons') diff --git a/_sass/bourbon/addons/_border-color.scss b/_sass/bourbon/addons/_border-color.scss new file mode 100644 index 0000000..6f6ab36 --- /dev/null +++ b/_sass/bourbon/addons/_border-color.scss @@ -0,0 +1,26 @@ +@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. +/// +/// @param {Arglist} $vals +/// List of arguments +/// +/// @example scss - Usage +/// .element { +/// @include border-color(#a60b55 #76cd9c null #e8ae1a); +/// } +/// +/// @example css - CSS Output +/// .element { +/// border-left-color: #e8ae1a; +/// border-right-color: #76cd9c; +/// border-top-color: #a60b55; +/// } +/// +/// @require {mixin} directional-property +/// +/// @output `border-color` + +@mixin border-color($vals...) { + @include directional-property(border, color, $vals...); +} diff --git a/_sass/bourbon/addons/_border-radius.scss b/_sass/bourbon/addons/_border-radius.scss new file mode 100644 index 0000000..1f65863 --- /dev/null +++ b/_sass/bourbon/addons/_border-radius.scss @@ -0,0 +1,48 @@ +@charset "UTF-8"; + +/// Provides a quick method for targeting `border-radius` on both corners on the side of a box. +/// +/// @param {Number} $radii +/// List of arguments +/// +/// @example scss - Usage +/// .element-one { +/// @include border-top-radius(5px); +/// } +/// +/// .element-two { +/// @include border-left-radius(3px); +/// } +/// +/// @example css - CSS Output +/// .element-one { +/// border-top-left-radius: 5px; +/// border-top-right-radius: 5px; +/// } +/// +/// .element-two { +/// border-bottom-left-radius: 3px; +/// border-top-left-radius: 3px; +/// } +/// +/// @output `border-radius` + +@mixin border-top-radius($radii) { + border-top-left-radius: $radii; + border-top-right-radius: $radii; +} + +@mixin border-right-radius($radii) { + border-bottom-right-radius: $radii; + border-top-right-radius: $radii; +} + +@mixin border-bottom-radius($radii) { + border-bottom-left-radius: $radii; + border-bottom-right-radius: $radii; +} + +@mixin border-left-radius($radii) { + border-bottom-left-radius: $radii; + border-top-left-radius: $radii; +} diff --git a/_sass/bourbon/addons/_border-style.scss b/_sass/bourbon/addons/_border-style.scss new file mode 100644 index 0000000..d86ee79 --- /dev/null +++ b/_sass/bourbon/addons/_border-style.scss @@ -0,0 +1,25 @@ +@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. +/// +/// @param {Arglist} $vals +/// List of arguments +/// +/// @example scss - Usage +/// .element { +/// @include border-style(dashed null solid); +/// } +/// +/// @example css - CSS Output +/// .element { +/// border-bottom-style: solid; +/// border-top-style: dashed; +/// } +/// +/// @require {mixin} directional-property +/// +/// @output `border-style` + +@mixin border-style($vals...) { + @include directional-property(border, style, $vals...); +} diff --git a/_sass/bourbon/addons/_border-width.scss b/_sass/bourbon/addons/_border-width.scss new file mode 100644 index 0000000..0ea2d4b --- /dev/null +++ b/_sass/bourbon/addons/_border-width.scss @@ -0,0 +1,25 @@ +@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. +/// +/// @param {Arglist} $vals +/// List of arguments +/// +/// @example scss - Usage +/// .element { +/// @include border-width(1em null 20px); +/// } +/// +/// @example css - CSS Output +/// .element { +/// border-bottom-width: 20px; +/// border-top-width: 1em; +/// } +/// +/// @require {mixin} directional-property +/// +/// @output `border-width` + +@mixin border-width($vals...) { + @include directional-property(border, width, $vals...); +} diff --git a/_sass/bourbon/addons/_buttons.scss b/_sass/bourbon/addons/_buttons.scss new file mode 100644 index 0000000..debeabc --- /dev/null +++ b/_sass/bourbon/addons/_buttons.scss @@ -0,0 +1,64 @@ +@charset "UTF-8"; + +/// Generates variables for all buttons. Please note that you must use interpolation on the variable: `#{$all-buttons}`. +/// +/// @example scss - Usage +/// #{$all-buttons} { +/// background-color: #f00; +/// } +/// +/// #{$all-buttons-focus}, +/// #{$all-buttons-hover} { +/// background-color: #0f0; +/// } +/// +/// #{$all-buttons-active} { +/// background-color: #00f; +/// } +/// +/// @example css - CSS Output +/// button, +/// input[type="button"], +/// input[type="reset"], +/// input[type="submit"] { +/// background-color: #f00; +/// } +/// +/// button:focus, +/// input[type="button"]:focus, +/// input[type="reset"]:focus, +/// input[type="submit"]:focus, +/// button:hover, +/// input[type="button"]:hover, +/// input[type="reset"]:hover, +/// input[type="submit"]:hover { +/// background-color: #0f0; +/// } +/// +/// button:active, +/// input[type="button"]:active, +/// input[type="reset"]:active, +/// input[type="submit"]:active { +/// background-color: #00f; +/// } +/// +/// @require assign-inputs +/// +/// @type List +/// +/// @todo Remove double assigned variables (Lines 59–62) in v5.0.0 + +$buttons-list: 'button', + 'input[type="button"]', + 'input[type="reset"]', + 'input[type="submit"]'; + +$all-buttons: assign-inputs($buttons-list); +$all-buttons-active: assign-inputs($buttons-list, active); +$all-buttons-focus: assign-inputs($buttons-list, focus); +$all-buttons-hover: assign-inputs($buttons-list, hover); + +$all-button-inputs: $all-buttons; +$all-button-inputs-active: $all-buttons-active; +$all-button-inputs-focus: $all-buttons-focus; +$all-button-inputs-hover: $all-buttons-hover; diff --git a/_sass/bourbon/addons/_clearfix.scss b/_sass/bourbon/addons/_clearfix.scss new file mode 100644 index 0000000..11313d6 --- /dev/null +++ b/_sass/bourbon/addons/_clearfix.scss @@ -0,0 +1,25 @@ +@charset "UTF-8"; + +/// Provides an easy way to include a clearfix for containing floats. +/// +/// @link http://cssmojo.com/latest_new_clearfix_so_far/ +/// +/// @example scss - Usage +/// .element { +/// @include clearfix; +/// } +/// +/// @example css - CSS Output +/// .element::after { +/// clear: both; +/// content: ""; +/// display: table; +/// } + +@mixin clearfix { + &::after { + clear: both; + content: ""; + display: table; + } +} diff --git a/_sass/bourbon/addons/_ellipsis.scss b/_sass/bourbon/addons/_ellipsis.scss new file mode 100644 index 0000000..a367f65 --- /dev/null +++ b/_sass/bourbon/addons/_ellipsis.scss @@ -0,0 +1,30 @@ +@charset "UTF-8"; + +/// Truncates text and adds an ellipsis to represent overflow. +/// +/// @param {Number} $width [100%] +/// Max-width for the string to respect before being truncated +/// +/// @example scss - Usage +/// .element { +/// @include ellipsis; +/// } +/// +/// @example css - CSS Output +/// .element { +/// display: inline-block; +/// max-width: 100%; +/// overflow: hidden; +/// text-overflow: ellipsis; +/// white-space: nowrap; +/// word-wrap: normal; +/// } + +@mixin ellipsis($width: 100%) { + display: inline-block; + max-width: $width; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + word-wrap: normal; +} diff --git a/_sass/bourbon/addons/_font-stacks.scss b/_sass/bourbon/addons/_font-stacks.scss new file mode 100644 index 0000000..57128f4 --- /dev/null +++ b/_sass/bourbon/addons/_font-stacks.scss @@ -0,0 +1,31 @@ +@charset "UTF-8"; + +/// Georgia font stack. +/// +/// @type List + +$georgia: "Georgia", "Cambria", "Times New Roman", "Times", serif; + +/// Helvetica font stack. +/// +/// @type List + +$helvetica: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; + +/// Lucida Grande font stack. +/// +/// @type List + +$lucida-grande: "Lucida Grande", "Tahoma", "Verdana", "Arial", sans-serif; + +/// Monospace font stack. +/// +/// @type List + +$monospace: "Bitstream Vera Sans Mono", "Consolas", "Courier", monospace; + +/// Verdana font stack. +/// +/// @type List + +$verdana: "Verdana", "Geneva", sans-serif; diff --git a/_sass/bourbon/addons/_hide-text.scss b/_sass/bourbon/addons/_hide-text.scss new file mode 100644 index 0000000..4caf20e --- /dev/null +++ b/_sass/bourbon/addons/_hide-text.scss @@ -0,0 +1,27 @@ +/// Hides the text in an element, commonly used to show an image. Some elements will need block-level styles applied. +/// +/// @link http://zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement +/// +/// @example scss - Usage +/// .element { +/// @include hide-text; +/// } +/// +/// @example css - CSS Output +/// .element { +/// overflow: hidden; +/// text-indent: 101%; +/// white-space: nowrap; +/// } +/// +/// @todo Remove height argument in v5.0.0 + +@mixin hide-text($height: null) { + overflow: hidden; + text-indent: 101%; + white-space: nowrap; + + @if $height { + @warn "The `hide-text` mixin has changed and no longer requires a height. The height argument will no longer be accepted in v5.0.0"; + } +} diff --git a/_sass/bourbon/addons/_margin.scss b/_sass/bourbon/addons/_margin.scss new file mode 100644 index 0000000..674f4e5 --- /dev/null +++ b/_sass/bourbon/addons/_margin.scss @@ -0,0 +1,26 @@ +@charset "UTF-8"; + +/// Provides a quick method for targeting `margin` on specific sides of a box. Use a `null` value to “skip” a side. +/// +/// @param {Arglist} $vals +/// List of arguments +/// +/// @example scss - Usage +/// .element { +/// @include margin(null 10px 3em 20vh); +/// } +/// +/// @example css - CSS Output +/// .element { +/// margin-bottom: 3em; +/// margin-left: 20vh; +/// margin-right: 10px; +/// } +/// +/// @require {mixin} directional-property +/// +/// @output `margin` + +@mixin margin($vals...) { + @include directional-property(margin, false, $vals...); +} diff --git a/_sass/bourbon/addons/_padding.scss b/_sass/bourbon/addons/_padding.scss new file mode 100644 index 0000000..40a5f00 --- /dev/null +++ b/_sass/bourbon/addons/_padding.scss @@ -0,0 +1,26 @@ +@charset "UTF-8"; + +/// Provides a quick method for targeting `padding` on specific sides of a box. Use a `null` value to “skip” a side. +/// +/// @param {Arglist} $vals +/// List of arguments +/// +/// @example scss - Usage +/// .element { +/// @include padding(12vh null 10px 5%); +/// } +/// +/// @example css - CSS Output +/// .element { +/// padding-bottom: 10px; +/// padding-left: 5%; +/// padding-top: 12vh; +/// } +/// +/// @require {mixin} directional-property +/// +/// @output `padding` + +@mixin padding($vals...) { + @include directional-property(padding, false, $vals...); +} diff --git a/_sass/bourbon/addons/_position.scss b/_sass/bourbon/addons/_position.scss new file mode 100644 index 0000000..e460f3f --- /dev/null +++ b/_sass/bourbon/addons/_position.scss @@ -0,0 +1,48 @@ +@charset "UTF-8"; + +/// Provides a quick method for setting an element’s position. Use a `null` value to “skip” a side. +/// +/// @param {Position} $position [relative] +/// A CSS position value +/// +/// @param {Arglist} $coordinates [null null null null] +/// List of values that correspond to the 4-value syntax for the edges of a box +/// +/// @example scss - Usage +/// .element { +/// @include position(absolute, 0 null null 10em); +/// } +/// +/// @example css - CSS Output +/// .element { +/// left: 10em; +/// position: absolute; +/// top: 0; +/// } +/// +/// @require {function} is-length +/// @require {function} unpack + +@mixin position($position: relative, $coordinates: null null null null) { + @if type-of($position) == list { + $coordinates: $position; + $position: relative; + } + + $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; + } + } +} diff --git a/_sass/bourbon/addons/_prefixer.scss b/_sass/bourbon/addons/_prefixer.scss new file mode 100644 index 0000000..2b6f731 --- /dev/null +++ b/_sass/bourbon/addons/_prefixer.scss @@ -0,0 +1,66 @@ +@charset "UTF-8"; + +/// A mixin for generating vendor prefixes on non-standardized properties. +/// +/// @param {String} $property +/// Property to prefix +/// +/// @param {*} $value +/// Value to use +/// +/// @param {List} $prefixes +/// Prefixes to define +/// +/// @example scss - Usage +/// .element { +/// @include prefixer(border-radius, 10px, webkit ms spec); +/// } +/// +/// @example css - CSS Output +/// .element { +/// -webkit-border-radius: 10px; +/// -moz-border-radius: 10px; +/// border-radius: 10px; +/// } +/// +/// @require {variable} $prefix-for-webkit +/// @require {variable} $prefix-for-mozilla +/// @require {variable} $prefix-for-microsoft +/// @require {variable} $prefix-for-opera +/// @require {variable} $prefix-for-spec + +@mixin prefixer($property, $value, $prefixes) { + @each $prefix in $prefixes { + @if $prefix == webkit { + @if $prefix-for-webkit { + -webkit-#{$property}: $value; + } + } @else if $prefix == moz { + @if $prefix-for-mozilla { + -moz-#{$property}: $value; + } + } @else if $prefix == ms { + @if $prefix-for-microsoft { + -ms-#{$property}: $value; + } + } @else if $prefix == o { + @if $prefix-for-opera { + -o-#{$property}: $value; + } + } @else if $prefix == spec { + @if $prefix-for-spec { + #{$property}: $value; + } + } @else { + @warn "Unrecognized prefix: #{$prefix}"; + } + } +} + +@mixin disable-prefix-for-all() { + $prefix-for-webkit: false !global; + $prefix-for-mozilla: false !global; + $prefix-for-microsoft: false !global; + $prefix-for-opera: false !global; + $prefix-for-spec: false !global; +} diff --git a/_sass/bourbon/addons/_retina-image.scss b/_sass/bourbon/addons/_retina-image.scss new file mode 100644 index 0000000..7febbd7 --- /dev/null +++ b/_sass/bourbon/addons/_retina-image.scss @@ -0,0 +1,25 @@ +@mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $retina-suffix: _2x, $asset-pipeline: $asset-pipeline) { + @if $asset-pipeline { + background-image: image-url("#{$filename}.#{$extension}"); + } @else { + background-image: url("#{$filename}.#{$extension}"); + } + + @include hidpi { + @if $asset-pipeline { + @if $retina-filename { + background-image: image-url("#{$retina-filename}.#{$extension}"); + } @else { + background-image: image-url("#{$filename}#{$retina-suffix}.#{$extension}"); + } + } @else { + @if $retina-filename { + background-image: url("#{$retina-filename}.#{$extension}"); + } @else { + background-image: url("#{$filename}#{$retina-suffix}.#{$extension}"); + } + } + + background-size: $background-size; + } +} diff --git a/_sass/bourbon/addons/_size.scss b/_sass/bourbon/addons/_size.scss new file mode 100644 index 0000000..a2992a3 --- /dev/null +++ b/_sass/bourbon/addons/_size.scss @@ -0,0 +1,51 @@ +@charset "UTF-8"; + +/// Sets the `width` and `height` of the element. +/// +/// @param {List} $size +/// A list of at most 2 size values. +/// +/// If there is only a single value in `$size` it is used for both width and height. All units are supported. +/// +/// @example scss - Usage +/// .first-element { +/// @include size(2em); +/// } +/// +/// .second-element { +/// @include size(auto 10em); +/// } +/// +/// @example css - CSS Output +/// .first-element { +/// width: 2em; +/// height: 2em; +/// } +/// +/// .second-element { +/// width: auto; +/// height: 10em; +/// } +/// +/// @todo Refactor in 5.0.0 to use a comma-separated argument + +@mixin size($value) { + $width: nth($value, 1); + $height: $width; + + @if length($value) > 1 { + $height: nth($value, 2); + } + + @if is-size($height) { + height: $height; + } @else { + @warn "`#{$height}` is not a valid length for the `$height` parameter in the `size` mixin."; + } + + @if is-size($width) { + width: $width; + } @else { + @warn "`#{$width}` is not a valid length for the `$width` parameter in the `size` mixin."; + } +} diff --git a/_sass/bourbon/addons/_text-inputs.scss b/_sass/bourbon/addons/_text-inputs.scss new file mode 100644 index 0000000..20164d4 --- /dev/null +++ b/_sass/bourbon/addons/_text-inputs.scss @@ -0,0 +1,112 @@ +@charset "UTF-8"; + +/// Generates variables for all text-based inputs. Please note that you must use interpolation on the variable: `#{$all-text-inputs}`. +/// +/// @example scss - Usage +/// #{$all-text-inputs} { +/// border: 1px solid #f00; +/// } +/// +/// #{$all-text-inputs-focus}, +/// #{$all-text-inputs-hover} { +/// border: 1px solid #0f0; +/// } +/// +/// #{$all-text-inputs-active} { +/// border: 1px solid #00f; +/// } +/// +/// @example css - CSS Output +/// input[type="color"], +/// input[type="date"], +/// input[type="datetime"], +/// input[type="datetime-local"], +/// input[type="email"], +/// input[type="month"], +/// input[type="number"], +/// input[type="password"], +/// input[type="search"], +/// input[type="tel"], +/// input[type="text"], +/// input[type="time"], +/// input[type="url"], +/// input[type="week"], +/// textarea { +/// border: 1px solid #f00; +/// } +/// +/// input[type="color"]:focus, +/// input[type="date"]:focus, +/// input[type="datetime"]:focus, +/// input[type="datetime-local"]:focus, +/// input[type="email"]:focus, +/// input[type="month"]:focus, +/// input[type="number"]:focus, +/// input[type="password"]:focus, +/// input[type="search"]:focus, +/// input[type="tel"]:focus, +/// input[type="text"]:focus, +/// input[type="time"]:focus, +/// input[type="url"]:focus, +/// input[type="week"]:focus, +/// textarea:focus, +/// input[type="color"]:hover, +/// input[type="date"]:hover, +/// input[type="datetime"]:hover, +/// input[type="datetime-local"]:hover, +/// input[type="email"]:hover, +/// input[type="month"]:hover, +/// input[type="number"]:hover, +/// input[type="password"]:hover, +/// input[type="search"]:hover, +/// input[type="tel"]:hover, +/// input[type="text"]:hover, +/// input[type="time"]:hover, +/// input[type="url"]:hover, +/// input[type="week"]:hover, +/// textarea:hover { +/// border: 1px solid #0f0; +/// } +/// +/// input[type="color"]:active, +/// input[type="date"]:active, +/// input[type="datetime"]:active, +/// input[type="datetime-local"]:active, +/// input[type="email"]:active, +/// input[type="month"]:active, +/// input[type="number"]:active, +/// input[type="password"]:active, +/// input[type="search"]:active, +/// input[type="tel"]:active, +/// input[type="text"]:active, +/// input[type="time"]:active, +/// input[type="url"]:active, +/// input[type="week"]:active, +/// textarea:active { +/// border: 1px solid #00f; +/// } +/// +/// @require assign-inputs +/// +/// @type List + +$text-inputs-list: 'input[type="color"]', + 'input[type="date"]', + 'input[type="datetime"]', + 'input[type="datetime-local"]', + 'input[type="email"]', + 'input[type="month"]', + 'input[type="number"]', + 'input[type="password"]', + 'input[type="search"]', + 'input[type="tel"]', + 'input[type="text"]', + 'input[type="time"]', + 'input[type="url"]', + 'input[type="week"]', + 'textarea'; + +$all-text-inputs: assign-inputs($text-inputs-list); +$all-text-inputs-active: assign-inputs($text-inputs-list, active); +$all-text-inputs-focus: assign-inputs($text-inputs-list, focus); +$all-text-inputs-hover: assign-inputs($text-inputs-list, hover); diff --git a/_sass/bourbon/addons/_timing-functions.scss b/_sass/bourbon/addons/_timing-functions.scss new file mode 100644 index 0000000..20e5f1d --- /dev/null +++ b/_sass/bourbon/addons/_timing-functions.scss @@ -0,0 +1,34 @@ +@charset "UTF-8"; + +/// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie) +/// +/// Timing functions are the same as demoed here: http://jqueryui.com/resources/demos/effect/easing.html +/// +/// @type cubic-bezier + +$ease-in-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); diff --git a/_sass/bourbon/addons/_triangle.scss b/_sass/bourbon/addons/_triangle.scss new file mode 100644 index 0000000..8a1ed9c --- /dev/null +++ b/_sass/bourbon/addons/_triangle.scss @@ -0,0 +1,63 @@ +@mixin triangle($size, $color, $direction) { + $width: nth($size, 1); + $height: nth($size, length($size)); + $foreground-color: nth($color, 1); + $background-color: if(length($color) == 2, nth($color, 2), transparent); + height: 0; + width: 0; + + @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) { + $width: $width / 2; + $height: if(length($size) > 1, $height, $height/2); + + @if $direction == up { + border-bottom: $height solid $foreground-color; + border-left: $width solid $background-color; + border-right: $width solid $background-color; + } @else if $direction == right { + border-bottom: $width solid $background-color; + border-left: $height solid $foreground-color; + border-top: $width solid $background-color; + } @else if $direction == down { + border-left: $width solid $background-color; + border-right: $width solid $background-color; + border-top: $height solid $foreground-color; + } @else if $direction == left { + border-bottom: $width solid $background-color; + border-right: $height solid $foreground-color; + border-top: $width solid $background-color; + } + } @else if ($direction == up-right) or ($direction == up-left) { + border-top: $height solid $foreground-color; + + @if $direction == up-right { + border-left: $width solid $background-color; + } @else if $direction == up-left { + border-right: $width solid $background-color; + } + } @else if ($direction == down-right) or ($direction == down-left) { + border-bottom: $height solid $foreground-color; + + @if $direction == down-right { + border-left: $width solid $background-color; + } @else if $direction == down-left { + border-right: $width solid $background-color; + } + } @else if ($direction == inset-up) { + border-color: $background-color $background-color $foreground-color; + border-style: solid; + border-width: $height $width; + } @else if ($direction == inset-down) { + border-color: $foreground-color $background-color $background-color; + border-style: solid; + border-width: $height $width; + } @else if ($direction == inset-right) { + border-color: $background-color $background-color $background-color $foreground-color; + border-style: solid; + border-width: $width $height; + } @else if ($direction == inset-left) { + border-color: $background-color $foreground-color $background-color $background-color; + border-style: solid; + border-width: $width $height; + } +} diff --git a/_sass/bourbon/addons/_word-wrap.scss b/_sass/bourbon/addons/_word-wrap.scss new file mode 100644 index 0000000..64856a9 --- /dev/null +++ b/_sass/bourbon/addons/_word-wrap.scss @@ -0,0 +1,29 @@ +@charset "UTF-8"; + +/// Provides an easy way to change the `word-wrap` property. +/// +/// @param {String} $wrap [break-word] +/// Value for the `word-break` property. +/// +/// @example scss - Usage +/// .wrapper { +/// @include word-wrap(break-word); +/// } +/// +/// @example css - CSS Output +/// .wrapper { +/// overflow-wrap: break-word; +/// word-break: break-all; +/// word-wrap: break-word; +/// } + +@mixin word-wrap($wrap: break-word) { + overflow-wrap: $wrap; + word-wrap: $wrap; + + @if $wrap == break-word { + word-break: break-all; + } @else { + word-break: $wrap; + } +} -- cgit v1.2.3