summaryrefslogtreecommitdiff
path: root/_sass/bourbon/addons
diff options
context:
space:
mode:
authorHombreLaser <sebastian-440@live.com>2024-02-08 16:36:31 -0600
committerHombreLaser <sebastian-440@live.com>2024-02-08 16:36:31 -0600
commite182245d3205d929881f51da9b48d6c4ed97a682 (patch)
treed390e8754dec70a9c9293afb801321b96f043c15 /_sass/bourbon/addons
Commit inicialHEADmaster
Diffstat (limited to '_sass/bourbon/addons')
-rw-r--r--_sass/bourbon/addons/_border-color.scss26
-rw-r--r--_sass/bourbon/addons/_border-radius.scss48
-rw-r--r--_sass/bourbon/addons/_border-style.scss25
-rw-r--r--_sass/bourbon/addons/_border-width.scss25
-rw-r--r--_sass/bourbon/addons/_buttons.scss64
-rw-r--r--_sass/bourbon/addons/_clearfix.scss25
-rw-r--r--_sass/bourbon/addons/_ellipsis.scss30
-rw-r--r--_sass/bourbon/addons/_font-stacks.scss31
-rw-r--r--_sass/bourbon/addons/_hide-text.scss27
-rw-r--r--_sass/bourbon/addons/_margin.scss26
-rw-r--r--_sass/bourbon/addons/_padding.scss26
-rw-r--r--_sass/bourbon/addons/_position.scss48
-rw-r--r--_sass/bourbon/addons/_prefixer.scss66
-rw-r--r--_sass/bourbon/addons/_retina-image.scss25
-rw-r--r--_sass/bourbon/addons/_size.scss51
-rw-r--r--_sass/bourbon/addons/_text-inputs.scss112
-rw-r--r--_sass/bourbon/addons/_timing-functions.scss34
-rw-r--r--_sass/bourbon/addons/_triangle.scss63
-rw-r--r--_sass/bourbon/addons/_word-wrap.scss29
19 files changed, 781 insertions, 0 deletions
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;
+ }
+}