flavor-scss
Version:
Flavor SCSS - Advanced type checking Sass/SCSS Framework with Mixins & Helpers and a fully customizable Grid System
4,559 lines • 1.38 MB
HTML
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Flavor-scss - v1.10.0</title><link rel="stylesheet" href="assets/css/main.css"><link href="https://fonts.googleapis.com/css?family=Open+Sans:400,500,700" rel="stylesheet" type="text/css"><meta name="viewport" content="width=device-width"><meta content="IE=edge, chrome=1" http-equiv="X-UA-Compatible"><!-- Open Graph tags --><meta property="og:title" content="Flavor-scss - SassDoc"><meta property="og:type" content="website"><meta property="og:description" content="<p>Flavor SCSS - Advanced type checking Sass/SCSS Framework with Mixins & Helpers and a fully customizable Grid System</p>
"><!-- Thanks to Sass-lang.com for the icons --><link href="assets/images/favicon.png" rel="shortcut icon"></head><body><aside class="sidebar" role="nav"><div class="sidebar__header"><h1 class="sidebar__title"><a href="https://blackmirror1980.github.io/flavor-scss">Flavor-scss - v1.10.0</a></h1></div><div class="sidebar__body"><button type="button" class="btn-toggle js-btn-toggle" data-alt="Open all">Close all</button><p class="sidebar__item sidebar__item--heading" data-slug="core"><a href="#core">Core</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="core-function"><a href="#core-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="core" data-name="is-null" data-type="function"><a href="#core-function-is-null">is-null</a></li><li class="sidebar__item sassdoc__item" data-group="core" data-name="is-defined" data-type="function"><a href="#core-function-is-defined">is-defined</a></li><li class="sidebar__item sassdoc__item" data-group="core" data-name="nth-value" data-type="function"><a href="#core-function-nth-value">nth-value</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="grid-system"><a href="#grid-system">Grid System</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="grid-system-mixin"><a href="#grid-system-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="grid-system" data-name="grid-system" data-type="mixin"><a href="#grid-system-mixin-grid-system">grid-system</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="grid-system-columns"><a href="#grid-system-columns">Grid System - Columns</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="grid-system-columns-mixin"><a href="#grid-system-columns-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="grid-system-columns" data-name="columns" data-type="mixin"><a href="#grid-system-columns-mixin-columns">columns</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="grid-system-reboot"><a href="#grid-system-reboot">Grid System - Reboot</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="grid-system-reboot-css"><a href="#grid-system-reboot-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="grid-system-reboot" data-name="*" data-type="css"><a href="#grid-system-reboot-css-*">*</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="mixins-animation"><a href="#mixins-animation">Mixins - Animation</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-animation-function"><a href="#mixins-animation-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-animation" data-name="is-animation-name" data-type="function"><a href="#mixins-animation-function-is-animation-name">is-animation-name</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-animation" data-name="is-animation-time" data-type="function"><a href="#mixins-animation-function-is-animation-time">is-animation-time</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-animation" data-name="is-animation-direction" data-type="function"><a href="#mixins-animation-function-is-animation-direction">is-animation-direction</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-animation" data-name="is-animation-iteration-count" data-type="function"><a href="#mixins-animation-function-is-animation-iteration-count">is-animation-iteration-count</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-animation" data-name="is-animation-fill" data-type="function"><a href="#mixins-animation-function-is-animation-fill">is-animation-fill</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-animation" data-name="is-animation-timing-function" data-type="function"><a href="#mixins-animation-function-is-animation-timing-function">is-animation-timing-function</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-animation" data-name="is-animation-play-state-modes" data-type="function"><a href="#mixins-animation-function-is-animation-play-state-modes">is-animation-play-state-modes</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-animation-mixin"><a href="#mixins-animation-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-animation" data-name="keyframes" data-type="mixin"><a href="#mixins-animation-mixin-keyframes">keyframes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-animation" data-name="animation" data-type="mixin"><a href="#mixins-animation-mixin-animation">animation</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-animation-variable"><a href="#mixins-animation-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-animation" data-name="animation-name-modes" data-type="variable"><a href="#mixins-animation-variable-animation-name-modes">animation-name-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-animation" data-name="animation-direction-modes" data-type="variable"><a href="#mixins-animation-variable-animation-direction-modes">animation-direction-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-animation" data-name="animation-iteration-count-modes" data-type="variable"><a href="#mixins-animation-variable-animation-iteration-count-modes">animation-iteration-count-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-animation" data-name="animation-fill-modes" data-type="variable"><a href="#mixins-animation-variable-animation-fill-modes">animation-fill-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-animation" data-name="animation-timing-function-modes" data-type="variable"><a href="#mixins-animation-variable-animation-timing-function-modes">animation-timing-function-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-animation" data-name="animation-play-state-modes" data-type="variable"><a href="#mixins-animation-variable-animation-play-state-modes">animation-play-state-modes</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="mixins-appearance"><a href="#mixins-appearance">Mixins - Appearance</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-appearance-function"><a href="#mixins-appearance-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-appearance" data-name="is-appearance-mode" data-type="function"><a href="#mixins-appearance-function-is-appearance-mode">is-appearance-mode</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-appearance-mixin"><a href="#mixins-appearance-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-appearance" data-name="appearance" data-type="mixin"><a href="#mixins-appearance-mixin-appearance">appearance</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-appearance-variable"><a href="#mixins-appearance-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-appearance" data-name="appearance-modes" data-type="variable"><a href="#mixins-appearance-variable-appearance-modes">appearance-modes</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="mixins-background"><a href="#mixins-background">Mixins - Background</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-background-function"><a href="#mixins-background-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-background" data-name="is-background-image-mode" data-type="function"><a href="#mixins-background-function-is-background-image-mode">is-background-image-mode</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-background" data-name="is-background-attachment" data-type="function"><a href="#mixins-background-function-is-background-attachment">is-background-attachment</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-background" data-name="is-background-repeat" data-type="function"><a href="#mixins-background-function-is-background-repeat">is-background-repeat</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-background" data-name="is-background-origin-clip" data-type="function"><a href="#mixins-background-function-is-background-origin-clip">is-background-origin-clip</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-background" data-name="is-background-size" data-type="function"><a href="#mixins-background-function-is-background-size">is-background-size</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-background" data-name="is-background-image" data-type="function"><a href="#mixins-background-function-is-background-image">is-background-image</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-background" data-name="is-background-position" data-type="function"><a href="#mixins-background-function-is-background-position">is-background-position</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-background-mixin"><a href="#mixins-background-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-background" data-name="background-color" data-type="mixin"><a href="#mixins-background-mixin-background-color">background-color</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-background" data-name="background-attachment" data-type="mixin"><a href="#mixins-background-mixin-background-attachment">background-attachment</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-background" data-name="background-repeat" data-type="mixin"><a href="#mixins-background-mixin-background-repeat">background-repeat</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-background" data-name="background-origin" data-type="mixin"><a href="#mixins-background-mixin-background-origin">background-origin</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-background" data-name="background-image" data-type="mixin"><a href="#mixins-background-mixin-background-image">background-image</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-background" data-name="background-size" data-type="mixin"><a href="#mixins-background-mixin-background-size">background-size</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-background" data-name="background-clip" data-type="mixin"><a href="#mixins-background-mixin-background-clip">background-clip</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-background" data-name="background-position" data-type="mixin"><a href="#mixins-background-mixin-background-position">background-position</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-background" data-name="background" data-type="mixin"><a href="#mixins-background-mixin-background">background</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-background-variable"><a href="#mixins-background-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-background" data-name="background-attachment-modes" data-type="variable"><a href="#mixins-background-variable-background-attachment-modes">background-attachment-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-background" data-name="background-image-modes" data-type="variable"><a href="#mixins-background-variable-background-image-modes">background-image-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-background" data-name="background-origin-clip-modes" data-type="variable"><a href="#mixins-background-variable-background-origin-clip-modes">background-origin-clip-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-background" data-name="background-position-horizontal-modes" data-type="variable"><a href="#mixins-background-variable-background-position-horizontal-modes">background-position-horizontal-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-background" data-name="background-repeat-modes" data-type="variable"><a href="#mixins-background-variable-background-repeat-modes">background-repeat-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-background" data-name="background-size-modes" data-type="variable"><a href="#mixins-background-variable-background-size-modes">background-size-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-background" data-name="background-position-vertical-modes" data-type="variable"><a href="#mixins-background-variable-background-position-vertical-modes">background-position-vertical-modes</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="mixins-border"><a href="#mixins-border">Mixins - Border</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-border-function"><a href="#mixins-border-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-border" data-name="is-border-radius" data-type="function"><a href="#mixins-border-function-is-border-radius">is-border-radius</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-border" data-name="is-border-style" data-type="function"><a href="#mixins-border-function-is-border-style">is-border-style</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-border" data-name="is-border-mode" data-type="function"><a href="#mixins-border-function-is-border-mode">is-border-mode</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-border-mixin"><a href="#mixins-border-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-border" data-name="border-color" data-type="mixin"><a href="#mixins-border-mixin-border-color">border-color</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-border" data-name="border-width" data-type="mixin"><a href="#mixins-border-mixin-border-width">border-width</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-border" data-name="border-style" data-type="mixin"><a href="#mixins-border-mixin-border-style">border-style</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-border" data-name="border-top-color" data-type="mixin"><a href="#mixins-border-mixin-border-top-color">border-top-color</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-border" data-name="border-top-width" data-type="mixin"><a href="#mixins-border-mixin-border-top-width">border-top-width</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-border" data-name="border-right-color" data-type="mixin"><a href="#mixins-border-mixin-border-right-color">border-right-color</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-border" data-name="border-top-style" data-type="mixin"><a href="#mixins-border-mixin-border-top-style">border-top-style</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-border" data-name="border" data-type="mixin"><a href="#mixins-border-mixin-border">border</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-border" data-name="border-right-width" data-type="mixin"><a href="#mixins-border-mixin-border-right-width">border-right-width</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-border" data-name="border-bottom-color" data-type="mixin"><a href="#mixins-border-mixin-border-bottom-color">border-bottom-color</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-border" data-name="border-right-style" data-type="mixin"><a href="#mixins-border-mixin-border-right-style">border-right-style</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-border" data-name="border-radius" data-type="mixin"><a href="#mixins-border-mixin-border-radius">border-radius</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-border" data-name="border-bottom-width" data-type="mixin"><a href="#mixins-border-mixin-border-bottom-width">border-bottom-width</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-border" data-name="border-left-color" data-type="mixin"><a href="#mixins-border-mixin-border-left-color">border-left-color</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-border" data-name="border-bottom-style" data-type="mixin"><a href="#mixins-border-mixin-border-bottom-style">border-bottom-style</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-border" data-name="border-left-width" data-type="mixin"><a href="#mixins-border-mixin-border-left-width">border-left-width</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-border" data-name="border-left-style" data-type="mixin"><a href="#mixins-border-mixin-border-left-style">border-left-style</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-border" data-name="border-top" data-type="mixin"><a href="#mixins-border-mixin-border-top">border-top</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-border" data-name="border-top-radius" data-type="mixin"><a href="#mixins-border-mixin-border-top-radius">border-top-radius</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-border" data-name="border-right" data-type="mixin"><a href="#mixins-border-mixin-border-right">border-right</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-border" data-name="border-right-radius" data-type="mixin"><a href="#mixins-border-mixin-border-right-radius">border-right-radius</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-border" data-name="border-bottom" data-type="mixin"><a href="#mixins-border-mixin-border-bottom">border-bottom</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-border" data-name="border-bottom-radius" data-type="mixin"><a href="#mixins-border-mixin-border-bottom-radius">border-bottom-radius</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-border" data-name="border-left" data-type="mixin"><a href="#mixins-border-mixin-border-left">border-left</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-border" data-name="border-left-radius" data-type="mixin"><a href="#mixins-border-mixin-border-left-radius">border-left-radius</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-border-variable"><a href="#mixins-border-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-border" data-name="border-styles" data-type="variable"><a href="#mixins-border-variable-border-styles">border-styles</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-border" data-name="border-modes" data-type="variable"><a href="#mixins-border-variable-border-modes">border-modes</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="mixins-box"><a href="#mixins-box">Mixins - Box</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-box-mixin"><a href="#mixins-box-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-box" data-name="reset-inline-block" data-type="mixin"><a href="#mixins-box-mixin-reset-inline-block">reset-inline-block</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-box" data-name="display" data-type="mixin"><a href="#mixins-box-mixin-display">display</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-box" data-name="box-sizing" data-type="mixin"><a href="#mixins-box-mixin-box-sizing">box-sizing</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-box" data-name="box-bounds" data-type="mixin"><a href="#mixins-box-mixin-box-bounds">box-bounds</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-box" data-name="box-size" data-type="mixin"><a href="#mixins-box-mixin-box-size">box-size</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-box" data-name="box-color" data-type="mixin"><a href="#mixins-box-mixin-box-color">box-color</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-box" data-name="box-shadow" data-type="mixin"><a href="#mixins-box-mixin-box-shadow">box-shadow</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-box" data-name="z-index" data-type="mixin"><a href="#mixins-box-mixin-z-index">z-index</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-box" data-name="visibility" data-type="mixin"><a href="#mixins-box-mixin-visibility">visibility</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-box" data-name="backface-visibility" data-type="mixin"><a href="#mixins-box-mixin-backface-visibility">backface-visibility</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-box" data-name="aspect-ratio" data-type="mixin"><a href="#mixins-box-mixin-aspect-ratio">aspect-ratio</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-box-function"><a href="#mixins-box-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-box" data-name="is-display" data-type="function"><a href="#mixins-box-function-is-display">is-display</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-box" data-name="is-box-sizing" data-type="function"><a href="#mixins-box-function-is-box-sizing">is-box-sizing</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-box" data-name="is-box-size" data-type="function"><a href="#mixins-box-function-is-box-size">is-box-size</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-box" data-name="is-box-bound-size" data-type="function"><a href="#mixins-box-function-is-box-bound-size">is-box-bound-size</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-box" data-name="is-box-shadow-mode" data-type="function"><a href="#mixins-box-function-is-box-shadow-mode">is-box-shadow-mode</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-box" data-name="is-box-shadow" data-type="function"><a href="#mixins-box-function-is-box-shadow">is-box-shadow</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-box" data-name="is-box-shadows" data-type="function"><a href="#mixins-box-function-is-box-shadows">is-box-shadows</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-box" data-name="is-z-index" data-type="function"><a href="#mixins-box-function-is-z-index">is-z-index</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-box" data-name="is-visibility" data-type="function"><a href="#mixins-box-function-is-visibility">is-visibility</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-box" data-name="is-backface-visibility" data-type="function"><a href="#mixins-box-function-is-backface-visibility">is-backface-visibility</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-box" data-name="aspect-ratio-factor" data-type="function"><a href="#mixins-box-function-aspect-ratio-factor">aspect-ratio-factor</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-box-variable"><a href="#mixins-box-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-box" data-name="display-modes" data-type="variable"><a href="#mixins-box-variable-display-modes">display-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-box" data-name="box-sizing-modes" data-type="variable"><a href="#mixins-box-variable-box-sizing-modes">box-sizing-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-box" data-name="box-size-modes" data-type="variable"><a href="#mixins-box-variable-box-size-modes">box-size-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-box" data-name="box-bound-size-modes" data-type="variable"><a href="#mixins-box-variable-box-bound-size-modes">box-bound-size-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-box" data-name="box-shadow-modes" data-type="variable"><a href="#mixins-box-variable-box-shadow-modes">box-shadow-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-box" data-name="z-index-modes" data-type="variable"><a href="#mixins-box-variable-z-index-modes">z-index-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-box" data-name="visibility-modes" data-type="variable"><a href="#mixins-box-variable-visibility-modes">visibility-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-box" data-name="backface-visibility-modes" data-type="variable"><a href="#mixins-box-variable-backface-visibility-modes">backface-visibility-modes</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="mixins-common"><a href="#mixins-common">Mixins - Common</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-common-function"><a href="#mixins-common-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-common" data-name="important" data-type="function"><a href="#mixins-common-function-important">important</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-common" data-name="rem" data-type="function"><a href="#mixins-common-function-rem">rem</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-common" data-name="px" data-type="function"><a href="#mixins-common-function-px">px</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-common-mixin"><a href="#mixins-common-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-common" data-name="prefixer" data-type="mixin"><a href="#mixins-common-mixin-prefixer">prefixer</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-common" data-name="prefixer-at-rule" data-type="mixin"><a href="#mixins-common-mixin-prefixer-at-rule">prefixer-at-rule</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-common" data-name="disable" data-type="mixin"><a href="#mixins-common-mixin-disable">disable</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-common" data-name="hidden" data-type="mixin"><a href="#mixins-common-mixin-hidden">hidden</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-common-variable"><a href="#mixins-common-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-common" data-name="animateable-properties" data-type="variable"><a href="#mixins-common-variable-animateable-properties">animateable-properties</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="mixins-cursor"><a href="#mixins-cursor">Mixins - Cursor</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-cursor-function"><a href="#mixins-cursor-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-cursor" data-name="is-cursor" data-type="function"><a href="#mixins-cursor-function-is-cursor">is-cursor</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-cursor" data-name="is-pointer-events" data-type="function"><a href="#mixins-cursor-function-is-pointer-events">is-pointer-events</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-cursor-mixin"><a href="#mixins-cursor-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-cursor" data-name="cursor" data-type="mixin"><a href="#mixins-cursor-mixin-cursor">cursor</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-cursor" data-name="pointer-events" data-type="mixin"><a href="#mixins-cursor-mixin-pointer-events">pointer-events</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-cursor-variable"><a href="#mixins-cursor-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-cursor" data-name="cursor-modes" data-type="variable"><a href="#mixins-cursor-variable-cursor-modes">cursor-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-cursor" data-name="pointer-events-modes" data-type="variable"><a href="#mixins-cursor-variable-pointer-events-modes">pointer-events-modes</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="mixins-filter"><a href="#mixins-filter">Mixins - Filter</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-filter-function"><a href="#mixins-filter-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-filter" data-name="get-filter-function-name" data-type="function"><a href="#mixins-filter-function-get-filter-function-name">get-filter-function-name</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-filter" data-name="is-filter-function" data-type="function"><a href="#mixins-filter-function-is-filter-function">is-filter-function</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-filter" data-name="is-filter" data-type="function"><a href="#mixins-filter-function-is-filter">is-filter</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-filter-mixin"><a href="#mixins-filter-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-filter" data-name="filter" data-type="mixin"><a href="#mixins-filter-mixin-filter">filter</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-filter" data-name="opacity" data-type="mixin"><a href="#mixins-filter-mixin-opacity">opacity</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-filter-variable"><a href="#mixins-filter-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-filter" data-name="filter-functions-names" data-type="variable"><a href="#mixins-filter-variable-filter-functions-names">filter-functions-names</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-filter" data-name="filter-modes" data-type="variable"><a href="#mixins-filter-variable-filter-modes">filter-modes</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="mixins-flex"><a href="#mixins-flex">mixins-flex</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-flex-function"><a href="#mixins-flex-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-flex" data-name="is-flex-grow" data-type="function"><a href="#mixins-flex-function-is-flex-grow">is-flex-grow</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-flex" data-name="is-flex-shrink" data-type="function"><a href="#mixins-flex-function-is-flex-shrink">is-flex-shrink</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-flex" data-name="is-order" data-type="function"><a href="#mixins-flex-function-is-order">is-order</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-flex" data-name="is-flex-basis" data-type="function"><a href="#mixins-flex-function-is-flex-basis">is-flex-basis</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-flex" data-name="is-flex-direction" data-type="function"><a href="#mixins-flex-function-is-flex-direction">is-flex-direction</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-flex" data-name="is-flex-wrap" data-type="function"><a href="#mixins-flex-function-is-flex-wrap">is-flex-wrap</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-flex-mixin"><a href="#mixins-flex-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-flex" data-name="flex-grow" data-type="mixin"><a href="#mixins-flex-mixin-flex-grow">flex-grow</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-flex" data-name="flex-shrink" data-type="mixin"><a href="#mixins-flex-mixin-flex-shrink">flex-shrink</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-flex" data-name="order" data-type="mixin"><a href="#mixins-flex-mixin-order">order</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-flex" data-name="flex-flow" data-type="mixin"><a href="#mixins-flex-mixin-flex-flow">flex-flow</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-flex" data-name="flex-basis" data-type="mixin"><a href="#mixins-flex-mixin-flex-basis">flex-basis</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-flex" data-name="flex-direction" data-type="mixin"><a href="#mixins-flex-mixin-flex-direction">flex-direction</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-flex" data-name="flex-wrap" data-type="mixin"><a href="#mixins-flex-mixin-flex-wrap">flex-wrap</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-flex-variable"><a href="#mixins-flex-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-flex" data-name="flex-basis-modes" data-type="variable"><a href="#mixins-flex-variable-flex-basis-modes">flex-basis-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-flex" data-name="flex-direction-modes" data-type="variable"><a href="#mixins-flex-variable-flex-direction-modes">flex-direction-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-flex" data-name="flex-wrap-modes" data-type="variable"><a href="#mixins-flex-variable-flex-wrap-modes">flex-wrap-modes</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="mixins-flex-grid"><a href="#mixins-flex-grid">mixins-flex-grid</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-flex-grid-function"><a href="#mixins-flex-grid-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-flex-grid" data-name="is-align-content" data-type="function"><a href="#mixins-flex-grid-function-is-align-content">is-align-content</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-flex-grid" data-name="is-align-items" data-type="function"><a href="#mixins-flex-grid-function-is-align-items">is-align-items</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-flex-grid" data-name="is-align-self" data-type="function"><a href="#mixins-flex-grid-function-is-align-self">is-align-self</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-flex-grid" data-name="is-justify-content" data-type="function"><a href="#mixins-flex-grid-function-is-justify-content">is-justify-content</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-flex-grid" data-name="is-justify-items" data-type="function"><a href="#mixins-flex-grid-function-is-justify-items">is-justify-items</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-flex-grid" data-name="is-justify-self" data-type="function"><a href="#mixins-flex-grid-function-is-justify-self">is-justify-self</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-flex-grid-mixin"><a href="#mixins-flex-grid-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-flex-grid" data-name="place-content" data-type="mixin"><a href="#mixins-flex-grid-mixin-place-content">place-content</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-flex-grid" data-name="place-items" data-type="mixin"><a href="#mixins-flex-grid-mixin-place-items">place-items</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-flex-grid" data-name="align-content" data-type="mixin"><a href="#mixins-flex-grid-mixin-align-content">align-content</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-flex-grid" data-name="align-items" data-type="mixin"><a href="#mixins-flex-grid-mixin-align-items">align-items</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-flex-grid" data-name="align-self" data-type="mixin"><a href="#mixins-flex-grid-mixin-align-self">align-self</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-flex-grid" data-name="justify-content" data-type="mixin"><a href="#mixins-flex-grid-mixin-justify-content">justify-content</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-flex-grid" data-name="justify-items" data-type="mixin"><a href="#mixins-flex-grid-mixin-justify-items">justify-items</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-flex-grid" data-name="justify-self" data-type="mixin"><a href="#mixins-flex-grid-mixin-justify-self">justify-self</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-flex-grid-variable"><a href="#mixins-flex-grid-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-flex-grid" data-name="align-content-modes" data-type="variable"><a href="#mixins-flex-grid-variable-align-content-modes">align-content-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-flex-grid" data-name="align-items-modes" data-type="variable"><a href="#mixins-flex-grid-variable-align-items-modes">align-items-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-flex-grid" data-name="align-self-modes" data-type="variable"><a href="#mixins-flex-grid-variable-align-self-modes">align-self-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-flex-grid" data-name="justify-content-modes" data-type="variable"><a href="#mixins-flex-grid-variable-justify-content-modes">justify-content-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-flex-grid" data-name="justify-items-modes" data-type="variable"><a href="#mixins-flex-grid-variable-justify-items-modes">justify-items-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-flex-grid" data-name="justify-self-modes" data-type="variable"><a href="#mixins-flex-grid-variable-justify-self-modes">justify-self-modes</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="mixins-float"><a href="#mixins-float">mixins-float</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-float-function"><a href="#mixins-float-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-float" data-name="is-clear" data-type="function"><a href="#mixins-float-function-is-clear">is-clear</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-float" data-name="is-float" data-type="function"><a href="#mixins-float-function-is-float">is-float</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-float-mixin"><a href="#mixins-float-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-float" data-name="clear" data-type="mixin"><a href="#mixins-float-mixin-clear">clear</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-float" data-name="float" data-type="mixin"><a href="#mixins-float-mixin-float">float</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-float-variable"><a href="#mixins-float-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-float" data-name="clear-modes" data-type="variable"><a href="#mixins-float-variable-clear-modes">clear-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-float" data-name="float-modes" data-type="variable"><a href="#mixins-float-variable-float-modes">float-modes</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="mixins-margin"><a href="#mixins-margin">Mixins - Margin</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-margin-function"><a href="#mixins-margin-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-margin" data-name="is-margin" data-type="function"><a href="#mixins-margin-function-is-margin">is-margin</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-margin-mixin"><a href="#mixins-margin-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-margin" data-name="margin-direction" data-type="mixin"><a href="#mixins-margin-mixin-margin-direction">margin-direction</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-margin" data-name="margin-top" data-type="mixin"><a href="#mixins-margin-mixin-margin-top">margin-top</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-margin" data-name="margin-right" data-type="mixin"><a href="#mixins-margin-mixin-margin-right">margin-right</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-margin" data-name="margin-bottom" data-type="mixin"><a href="#mixins-margin-mixin-margin-bottom">margin-bottom</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-margin" data-name="margin-left" data-type="mixin"><a href="#mixins-margin-mixin-margin-left">margin-left</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-margin" data-name="margin" data-type="mixin"><a href="#mixins-margin-mixin-margin">margin</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-margin-variable"><a href="#mixins-margin-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-margin" data-name="margin-modes" data-type="variable"><a href="#mixins-margin-variable-margin-modes">margin-modes</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="mixins-media"><a href="#mixins-media">Mixins - Media</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-media-mixin"><a href="#mixins-media-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-media" data-name="media" data-type="mixin"><a href="#mixins-media-mixin-media">media</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="mixins-outline"><a href="#mixins-outline">Mixins - Outline</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-outline-function"><a href="#mixins-outline-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-outline" data-name="is-outline-width" data-type="function"><a href="#mixins-outline-function-is-outline-width">is-outline-width</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-outline" data-name="is-outline-style" data-type="function"><a href="#mixins-outline-function-is-outline-style">is-outline-style</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-outline" data-name="is-outline-color" data-type="function"><a href="#mixins-outline-function-is-outline-color">is-outline-color</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-outline" data-name="is-outline-offset" data-type="function"><a href="#mixins-outline-function-is-outline-offset">is-outline-offset</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-outline-mixin"><a href="#mixins-outline-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-outline" data-name="outline-width" data-type="mixin"><a href="#mixins-outline-mixin-outline-width">outline-width</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-outline" data-name="outline-style" data-type="mixin"><a href="#mixins-outline-mixin-outline-style">outline-style</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-outline" data-name="outline-color" data-type="mixin"><a href="#mixins-outline-mixin-outline-color">outline-color</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-outline" data-name="outline-offset" data-type="mixin"><a href="#mixins-outline-mixin-outline-offset">outline-offset</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-outline" data-name="outline" data-type="mixin"><a href="#mixins-outline-mixin-outline">outline</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-outline" data-name="outline-force" data-type="mixin"><a href="#mixins-outline-mixin-outline-force">outline-force</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-outline-variable"><a href="#mixins-outline-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-outline" data-name="outline-width-modes" data-type="variable"><a href="#mixins-outline-variable-outline-width-modes">outline-width-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-outline" data-name="outline-style-modes" data-type="variable"><a href="#mixins-outline-variable-outline-style-modes">outline-style-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-outline" data-name="outline-color-modes" data-type="variable"><a href="#mixins-outline-variable-outline-color-modes">outline-color-modes</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="mixins-overflow"><a href="#mixins-overflow">Mixins - Overflow</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-overflow-function"><a href="#mixins-overflow-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-overflow" data-name="is-overflow" data-type="function"><a href="#mixins-overflow-function-is-overflow">is-overflow</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-overflow-mixin"><a href="#mixins-overflow-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-overflow" data-name="overflow" data-type="mixin"><a href="#mixins-overflow-mixin-overflow">overflow</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-overflow-variable"><a href="#mixins-overflow-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-overflow" data-name="overflow-modes" data-type="variable"><a href="#mixins-overflow-variable-overflow-modes">overflow-modes</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="mixins-padding"><a href="#mixins-padding">Mixins - Padding</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-padding-function"><a href="#mixins-padding-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-padding" data-name="is-padding" data-type="function"><a href="#mixins-padding-function-is-padding">is-padding</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-padding-mixin"><a href="#mixins-padding-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-padding" data-name="padding-direction" data-type="mixin"><a href="#mixins-padding-mixin-padding-direction">padding-direction</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-padding" data-name="padding-top" data-type="mixin"><a href="#mixins-padding-mixin-padding-top">padding-top</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-padding" data-name="padding-right" data-type="mixin"><a href="#mixins-padding-mixin-padding-right">padding-right</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-padding" data-name="padding-bottom" data-type="mixin"><a href="#mixins-padding-mixin-padding-bottom">padding-bottom</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-padding" data-name="padding-left" data-type="mixin"><a href="#mixins-padding-mixin-padding-left">padding-left</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-padding" data-name="padding" data-type="mixin"><a href="#mixins-padding-mixin-padding">padding</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="mixins-position"><a href="#mixins-position">Mixins - Position</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-position-function"><a href="#mixins-position-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-position" data-name="is-position" data-type="function"><a href="#mixins-position-function-is-position">is-position</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-position" data-name="is-position-point-value" data-type="function"><a href="#mixins-position-function-is-position-point-value">is-position-point-value</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-position" data-name="is-position-point" data-type="function"><a href="#mixins-position-function-is-position-point">is-position-point</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-position-mixin"><a href="#mixins-position-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-position" data-name="position-point" data-type="mixin"><a href="#mixins-position-mixin-position-point">position-point</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-position" data-name="top" data-type="mixin"><a href="#mixins-position-mixin-top">top</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-position" data-name="right" data-type="mixin"><a href="#mixins-position-mixin-right">right</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-position" data-name="bottom" data-type="mixin"><a href="#mixins-position-mixin-bottom">bottom</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-position" data-name="left" data-type="mixin"><a href="#mixins-position-mixin-left">left</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-position" data-name="position" data-type="mixin"><a href="#mixins-position-mixin-position">position</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-position-variable"><a href="#mixins-position-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-position" data-name="position-modes" data-type="variable"><a href="#mixins-position-variable-position-modes">position-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-position" data-name="position-point-modes" data-type="variable"><a href="#mixins-position-variable-position-point-modes">position-point-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-position" data-name="position-points" data-type="variable"><a href="#mixins-position-variable-position-points">position-points</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="mixins-text"><a href="#mixins-text">Mixins - Text</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-text-function"><a href="#mixins-text-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="is-font-family" data-type="function"><a href="#mixins-text-function-is-font-family">is-font-family</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="is-text-indent" data-type="function"><a href="#mixins-text-function-is-text-indent">is-text-indent</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="is-text-shadow-mode" data-type="function"><a href="#mixins-text-function-is-text-shadow-mode">is-text-shadow-mode</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="is-direction" data-type="function"><a href="#mixins-text-function-is-direction">is-direction</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="is-font-weight" data-type="function"><a href="#mixins-text-function-is-font-weight">is-font-weight</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="is-hyphens" data-type="function"><a href="#mixins-text-function-is-hyphens">is-hyphens</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="is-letter-spacing" data-type="function"><a href="#mixins-text-function-is-letter-spacing">is-letter-spacing</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="is-line-height" data-type="function"><a href="#mixins-text-function-is-line-height">is-line-height</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="is-text-align" data-type="function"><a href="#mixins-text-function-is-text-align">is-text-align</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="is-text-decoration-line" data-type="function"><a href="#mixins-text-function-is-text-decoration-line">is-text-decoration-line</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="is-text-overflow" data-type="function"><a href="#mixins-text-function-is-text-overflow">is-text-overflow</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="is-text-size-adjust" data-type="function"><a href="#mixins-text-function-is-text-size-adjust">is-text-size-adjust</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="is-text-stroke-width" data-type="function"><a href="#mixins-text-function-is-text-stroke-width">is-text-stroke-width</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="is-text-transform" data-type="function"><a href="#mixins-text-function-is-text-transform">is-text-transform</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="is-user-select" data-type="function"><a href="#mixins-text-function-is-user-select">is-user-select</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="is-vertical-align" data-type="function"><a href="#mixins-text-function-is-vertical-align">is-vertical-align</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="is-white-space" data-type="function"><a href="#mixins-text-function-is-white-space">is-white-space</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="is-word-break" data-type="function"><a href="#mixins-text-function-is-word-break">is-word-break</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="is-word-spacing" data-type="function"><a href="#mixins-text-function-is-word-spacing">is-word-spacing</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="is-font-size" data-type="function"><a href="#mixins-text-function-is-font-size">is-font-size</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="is-font-style" data-type="function"><a href="#mixins-text-function-is-font-style">is-font-style</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="is-word-wrap" data-type="function"><a href="#mixins-text-function-is-word-wrap">is-word-wrap</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="is-text-shadow" data-type="function"><a href="#mixins-text-function-is-text-shadow">is-text-shadow</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="is-text-decoration-style" data-type="function"><a href="#mixins-text-function-is-text-decoration-style">is-text-decoration-style</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="is-text-decoration-color" data-type="function"><a href="#mixins-text-function-is-text-decoration-color">is-text-decoration-color</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="is-text-decoration-mode" data-type="function"><a href="#mixins-text-function-is-text-decoration-mode">is-text-decoration-mode</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="is-text-shadows" data-type="function"><a href="#mixins-text-function-is-text-shadows">is-text-shadows</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="is-text-decoration-skip" data-type="function"><a href="#mixins-text-function-is-text-decoration-skip">is-text-decoration-skip</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="is-text-underline-position" data-type="function"><a href="#mixins-text-function-is-text-underline-position">is-text-underline-position</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-text-mixin"><a href="#mixins-text-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="color" data-type="mixin"><a href="#mixins-text-mixin-color">color</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="text-indent" data-type="mixin"><a href="#mixins-text-mixin-text-indent">text-indent</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="direction" data-type="mixin"><a href="#mixins-text-mixin-direction">direction</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="font-weight" data-type="mixin"><a href="#mixins-text-mixin-font-weight">font-weight</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="letter-spacing" data-type="mixin"><a href="#mixins-text-mixin-letter-spacing">letter-spacing</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="line-height" data-type="mixin"><a href="#mixins-text-mixin-line-height">line-height</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="text-align" data-type="mixin"><a href="#mixins-text-mixin-text-align">text-align</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="text-transform" data-type="mixin"><a href="#mixins-text-mixin-text-transform">text-transform</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="vertical-align" data-type="mixin"><a href="#mixins-text-mixin-vertical-align">vertical-align</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="white-space" data-type="mixin"><a href="#mixins-text-mixin-white-space">white-space</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="word-break" data-type="mixin"><a href="#mixins-text-mixin-word-break">word-break</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="word-spacing" data-type="mixin"><a href="#mixins-text-mixin-word-spacing">word-spacing</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="font-size" data-type="mixin"><a href="#mixins-text-mixin-font-size">font-size</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="font-style" data-type="mixin"><a href="#mixins-text-mixin-font-style">font-style</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="text-overflow" data-type="mixin"><a href="#mixins-text-mixin-text-overflow">text-overflow</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="text-stroke-width" data-type="mixin"><a href="#mixins-text-mixin-text-stroke-width">text-stroke-width</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="text-decoration-line" data-type="mixin"><a href="#mixins-text-mixin-text-decoration-line">text-decoration-line</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="font-family" data-type="mixin"><a href="#mixins-text-mixin-font-family">font-family</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="hyphens" data-type="mixin"><a href="#mixins-text-mixin-hyphens">hyphens</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="user-select" data-type="mixin"><a href="#mixins-text-mixin-user-select">user-select</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="word-wrap" data-type="mixin"><a href="#mixins-text-mixin-word-wrap">word-wrap</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="text-size-adjust" data-type="mixin"><a href="#mixins-text-mixin-text-size-adjust">text-size-adjust</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="text-stroke-color" data-type="mixin"><a href="#mixins-text-mixin-text-stroke-color">text-stroke-color</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="word-wrap-force" data-type="mixin"><a href="#mixins-text-mixin-word-wrap-force">word-wrap-force</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="font" data-type="mixin"><a href="#mixins-text-mixin-font">font</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="text-decoration-style" data-type="mixin"><a href="#mixins-text-mixin-text-decoration-style">text-decoration-style</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="text-stroke" data-type="mixin"><a href="#mixins-text-mixin-text-stroke">text-stroke</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="text-decoration-color" data-type="mixin"><a href="#mixins-text-mixin-text-decoration-color">text-decoration-color</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="text-decoration" data-type="mixin"><a href="#mixins-text-mixin-text-decoration">text-decoration</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="content-align" data-type="mixin"><a href="#mixins-text-mixin-content-align">content-align</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="text-shadow" data-type="mixin"><a href="#mixins-text-mixin-text-shadow">text-shadow</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="ellipsis" data-type="mixin"><a href="#mixins-text-mixin-ellipsis">ellipsis</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="text-decoration-skip" data-type="mixin"><a href="#mixins-text-mixin-text-decoration-skip">text-decoration-skip</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="content" data-type="mixin"><a href="#mixins-text-mixin-content">content</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="text-underline-position" data-type="mixin"><a href="#mixins-text-mixin-text-underline-position">text-underline-position</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-text-variable"><a href="#mixins-text-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="direction-modes" data-type="variable"><a href="#mixins-text-variable-direction-modes">direction-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="font-weight-modes" data-type="variable"><a href="#mixins-text-variable-font-weight-modes">font-weight-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="hyphens-modes" data-type="variable"><a href="#mixins-text-variable-hyphens-modes">hyphens-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="letter-spacing-modes" data-type="variable"><a href="#mixins-text-variable-letter-spacing-modes">letter-spacing-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="line-height-modes" data-type="variable"><a href="#mixins-text-variable-line-height-modes">line-height-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="text-align-modes" data-type="variable"><a href="#mixins-text-variable-text-align-modes">text-align-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="text-overflow-modes" data-type="variable"><a href="#mixins-text-variable-text-overflow-modes">text-overflow-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="text-shadow-modes" data-type="variable"><a href="#mixins-text-variable-text-shadow-modes">text-shadow-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="text-size-adjust-modes" data-type="variable"><a href="#mixins-text-variable-text-size-adjust-modes">text-size-adjust-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="text-transform-modes" data-type="variable"><a href="#mixins-text-variable-text-transform-modes">text-transform-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="user-select-modes" data-type="variable"><a href="#mixins-text-variable-user-select-modes">user-select-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="vertical-align-modes" data-type="variable"><a href="#mixins-text-variable-vertical-align-modes">vertical-align-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="white-space-modes" data-type="variable"><a href="#mixins-text-variable-white-space-modes">white-space-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="word-break-modes" data-type="variable"><a href="#mixins-text-variable-word-break-modes">word-break-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="word-spacing-modes" data-type="variable"><a href="#mixins-text-variable-word-spacing-modes">word-spacing-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="font-size-modes" data-type="variable"><a href="#mixins-text-variable-font-size-modes">font-size-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="font-style-modes" data-type="variable"><a href="#mixins-text-variable-font-style-modes">font-style-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="text-decoration-line-modes" data-type="variable"><a href="#mixins-text-variable-text-decoration-line-modes">text-decoration-line-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="text-stroke-width-modes" data-type="variable"><a href="#mixins-text-variable-text-stroke-width-modes">text-stroke-width-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="word-wrap-modes" data-type="variable"><a href="#mixins-text-variable-word-wrap-modes">word-wrap-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="text-decoration-style-modes" data-type="variable"><a href="#mixins-text-variable-text-decoration-style-modes">text-decoration-style-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="text-decoration-modes" data-type="variable"><a href="#mixins-text-variable-text-decoration-modes">text-decoration-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="text-decoration-skip-modes" data-type="variable"><a href="#mixins-text-variable-text-decoration-skip-modes">text-decoration-skip-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-text" data-name="text-underline-position-modes" data-type="variable"><a href="#mixins-text-variable-text-underline-position-modes">text-underline-position-modes</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="mixins-transform"><a href="#mixins-transform">Mixins - Transform</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-transform-function"><a href="#mixins-transform-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-transform" data-name="get-transform-function-name" data-type="function"><a href="#mixins-transform-function-get-transform-function-name">get-transform-function-name</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-transform" data-name="is-transform-function" data-type="function"><a href="#mixins-transform-function-is-transform-function">is-transform-function</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-transform" data-name="is-transform" data-type="function"><a href="#mixins-transform-function-is-transform">is-transform</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-transform" data-name="is-transforms" data-type="function"><a href="#mixins-transform-function-is-transforms">is-transforms</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-transform" data-name="is-transform-origin" data-type="function"><a href="#mixins-transform-function-is-transform-origin">is-transform-origin</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-transform" data-name="is-transform-style" data-type="function"><a href="#mixins-transform-function-is-transform-style">is-transform-style</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-transform-mixin"><a href="#mixins-transform-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-transform" data-name="transform" data-type="mixin"><a href="#mixins-transform-mixin-transform">transform</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-transform" data-name="matrix" data-type="mixin"><a href="#mixins-transform-mixin-matrix">matrix</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-transform" data-name="matrix3d" data-type="mixin"><a href="#mixins-transform-mixin-matrix3d">matrix3d</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-transform" data-name="perspective" data-type="mixin"><a href="#mixins-transform-mixin-perspective">perspective</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-transform" data-name="rotate" data-type="mixin"><a href="#mixins-transform-mixin-rotate">rotate</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-transform" data-name="rotate3d" data-type="mixin"><a href="#mixins-transform-mixin-rotate3d">rotate3d</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-transform" data-name="rotateX" data-type="mixin"><a href="#mixins-transform-mixin-rotateX">rotateX</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-transform" data-name="rotateY" data-type="mixin"><a href="#mixins-transform-mixin-rotateY">rotateY</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-transform" data-name="rotateZ" data-type="mixin"><a href="#mixins-transform-mixin-rotateZ">rotateZ</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-transform" data-name="scale" data-type="mixin"><a href="#mixins-transform-mixin-scale">scale</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-transform" data-name="scale3d" data-type="mixin"><a href="#mixins-transform-mixin-scale3d">scale3d</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-transform" data-name="scaleX" data-type="mixin"><a href="#mixins-transform-mixin-scaleX">scaleX</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-transform" data-name="scaleY" data-type="mixin"><a href="#mixins-transform-mixin-scaleY">scaleY</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-transform" data-name="scaleZ" data-type="mixin"><a href="#mixins-transform-mixin-scaleZ">scaleZ</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-transform" data-name="skew" data-type="mixin"><a href="#mixins-transform-mixin-skew">skew</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-transform" data-name="skewX" data-type="mixin"><a href="#mixins-transform-mixin-skewX">skewX</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-transform" data-name="skewY" data-type="mixin"><a href="#mixins-transform-mixin-skewY">skewY</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-transform" data-name="translate" data-type="mixin"><a href="#mixins-transform-mixin-translate">translate</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-transform" data-name="translate3d" data-type="mixin"><a href="#mixins-transform-mixin-translate3d">translate3d</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-transform" data-name="translateX" data-type="mixin"><a href="#mixins-transform-mixin-translateX">translateX</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-transform" data-name="translateY" data-type="mixin"><a href="#mixins-transform-mixin-translateY">translateY</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-transform" data-name="translateZ" data-type="mixin"><a href="#mixins-transform-mixin-translateZ">translateZ</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-transform" data-name="transform-origin" data-type="mixin"><a href="#mixins-transform-mixin-transform-origin">transform-origin</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-transform" data-name="transform-style" data-type="mixin"><a href="#mixins-transform-mixin-transform-style">transform-style</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-transform-variable"><a href="#mixins-transform-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-transform" data-name="transform-functions-names" data-type="variable"><a href="#mixins-transform-variable-transform-functions-names">transform-functions-names</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-transform" data-name="transform-modes" data-type="variable"><a href="#mixins-transform-variable-transform-modes">transform-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-transform" data-name="transform-origin-x-axis-modes" data-type="variable"><a href="#mixins-transform-variable-transform-origin-x-axis-modes">transform-origin-x-axis-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-transform" data-name="transform-origin-y-axis-modes" data-type="variable"><a href="#mixins-transform-variable-transform-origin-y-axis-modes">transform-origin-y-axis-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-transform" data-name="transform-style-modes" data-type="variable"><a href="#mixins-transform-variable-transform-style-modes">transform-style-modes</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="mixins-transition"><a href="#mixins-transition">Mixins - Transition</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-transition-function"><a href="#mixins-transition-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-transition" data-name="is-transition-time" data-type="function"><a href="#mixins-transition-function-is-transition-time">is-transition-time</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-transition" data-name="is-transition-property" data-type="function"><a href="#mixins-transition-function-is-transition-property">is-transition-property</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-transition" data-name="get-transition-timing-function-name" data-type="function"><a href="#mixins-transition-function-get-transition-timing-function-name">get-transition-timing-function-name</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-transition" data-name="is-transition-timing-function" data-type="function"><a href="#mixins-transition-function-is-transition-timing-function">is-transition-timing-function</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-transition" data-name="is-transition-timing-mode-or-function" data-type="function"><a href="#mixins-transition-function-is-transition-timing-mode-or-function">is-transition-timing-mode-or-function</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-transition" data-name="is-transition" data-type="function"><a href="#mixins-transition-function-is-transition">is-transition</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-transition" data-name="is-transitions" data-type="function"><a href="#mixins-transition-function-is-transitions">is-transitions</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-transition-mixin"><a href="#mixins-transition-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-transition" data-name="transition-delay" data-type="mixin"><a href="#mixins-transition-mixin-transition-delay">transition-delay</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-transition" data-name="transition-duration" data-type="mixin"><a href="#mixins-transition-mixin-transition-duration">transition-duration</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-transition" data-name="transition-property" data-type="mixin"><a href="#mixins-transition-mixin-transition-property">transition-property</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-transition" data-name="transition-timing-function" data-type="mixin"><a href="#mixins-transition-mixin-transition-timing-function">transition-timing-function</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-transition" data-name="transition" data-type="mixin"><a href="#mixins-transition-mixin-transition">transition</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-transition-variable"><a href="#mixins-transition-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-transition" data-name="transition-property-modes" data-type="variable"><a href="#mixins-transition-variable-transition-property-modes">transition-property-modes</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-transition" data-name="transition-timing-functions-names" data-type="variable"><a href="#mixins-transition-variable-transition-timing-functions-names">transition-timing-functions-names</a></li><li class="sidebar__item sassdoc__item" data-group="mixins-transition" data-name="transition-timing-modes" data-type="variable"><a href="#mixins-transition-variable-transition-timing-modes">transition-timing-modes</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="mixins-will-change"><a href="#mixins-will-change">Mixins - Will Change</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-will-change-function"><a href="#mixins-will-change-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-will-change" data-name="is-will-change" data-type="function"><a href="#mixins-will-change-function-is-will-change">is-will-change</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-will-change-mixin"><a href="#mixins-will-change-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-will-change" data-name="will-change" data-type="mixin"><a href="#mixins-will-change-mixin-will-change">will-change</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="mixins-will-change-variable"><a href="#mixins-will-change-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="mixins-will-change" data-name="will-change-modes" data-type="variable"><a href="#mixins-will-change-variable-will-change-modes">will-change-modes</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="types-angle"><a href="#types-angle">Types - Angle</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="types-angle-function"><a href="#types-angle-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="types-angle" data-name="is-angle" data-type="function"><a href="#types-angle-function-is-angle">is-angle</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="types-angle-variable"><a href="#types-angle-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="types-angle" data-name="angle-units" data-type="variable"><a href="#types-angle-variable-angle-units">angle-units</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="types-array"><a href="#types-array">Types - Array</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="types-array-function"><a href="#types-array-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="types-array" data-name="is-array" data-type="function"><a href="#types-array-function-is-array">is-array</a></li><li class="sidebar__item sassdoc__item" data-group="types-array" data-name="array-contains" data-type="function"><a href="#types-array-function-array-contains">array-contains</a></li><li class="sidebar__item sassdoc__item" data-group="types-array" data-name="array-concat" data-type="function"><a href="#types-array-function-array-concat">array-concat</a></li><li class="sidebar__item sassdoc__item" data-group="types-array" data-name="array-join" data-type="function"><a href="#types-array-function-array-join">array-join</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="types-boolean"><a href="#types-boolean">Types - Boolean</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="types-boolean-function"><a href="#types-boolean-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="types-boolean" data-name="is-boolean" data-type="function"><a href="#types-boolean-function-is-boolean">is-boolean</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="types-color"><a href="#types-color">Types - Color</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="types-color-function"><a href="#types-color-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="types-color" data-name="is-color" data-type="function"><a href="#types-color-function-is-color">is-color</a></li><li class="sidebar__item sassdoc__item" data-group="types-color" data-name="is-css-color" data-type="function"><a href="#types-color-function-is-css-color">is-css-color</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="types-color-variable"><a href="#types-color-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="types-color" data-name="color-modes" data-type="variable"><a href="#types-color-variable-color-modes">color-modes</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="types-common"><a href="#types-common">Types - Common</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="types-common-function"><a href="#types-common-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="types-common" data-name="is-css-default" data-type="function"><a href="#types-common-function-is-css-default">is-css-default</a></li><li class="sidebar__item sassdoc__item" data-group="types-common" data-name="is-calc-length" data-type="function"><a href="#types-common-function-is-calc-length">is-calc-length</a></li><li class="sidebar__item sassdoc__item" data-group="types-common" data-name="get-calc-length-expression" data-type="function"><a href="#types-common-function-get-calc-length-expression">get-calc-length-expression</a></li><li class="sidebar__item sassdoc__item" data-group="types-common" data-name="is-length-mode" data-type="function"><a href="#types-common-function-is-length-mode">is-length-mode</a></li><li class="sidebar__item sassdoc__item" data-group="types-common" data-name="is-relative-length" data-type="function"><a href="#types-common-function-is-relative-length">is-relative-length</a></li><li class="sidebar__item sassdoc__item" data-group="types-common" data-name="is-absolute-length" data-type="function"><a href="#types-common-function-is-absolute-length">is-absolute-length</a></li><li class="sidebar__item sassdoc__item" data-group="types-common" data-name="is-length" data-type="function"><a href="#types-common-function-is-length">is-length</a></li><li class="sidebar__item sassdoc__item" data-group="types-common" data-name="is-size" data-type="function"><a href="#types-common-function-is-size">is-size</a></li><li class="sidebar__item sassdoc__item" data-group="types-common" data-name="strip-unit" data-type="function"><a href="#types-common-function-strip-unit">strip-unit</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="types-common-variable"><a href="#types-common-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="types-common" data-name="css-default-modes" data-type="variable"><a href="#types-common-variable-css-default-modes">css-default-modes</a></li><li class="sidebar__item sassdoc__item" data-group="types-common" data-name="length-modes" data-type="variable"><a href="#types-common-variable-length-modes">length-modes</a></li><li class="sidebar__item sassdoc__item" data-group="types-common" data-name="relative-length-units" data-type="variable"><a href="#types-common-variable-relative-length-units">relative-length-units</a></li><li class="sidebar__item sassdoc__item" data-group="types-common" data-name="absolute-length-units" data-type="variable"><a href="#types-common-variable-absolute-length-units">absolute-length-units</a></li><li class="sidebar__item sassdoc__item" data-group="types-common" data-name="css-size-modes" data-type="variable"><a href="#types-common-variable-css-size-modes">css-size-modes</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="types-frequency"><a href="#types-frequency">Types - Frequency</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="types-frequency-function"><a href="#types-frequency-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="types-frequency" data-name="is-frequency" data-type="function"><a href="#types-frequency-function-is-frequency">is-frequency</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="types-frequency-variable"><a href="#types-frequency-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="types-frequency" data-name="frequency-units" data-type="variable"><a href="#types-frequency-variable-frequency-units">frequency-units</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="types-function"><a href="#types-function">Types - Function</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="types-function-function"><a href="#types-function-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="types-function" data-name="is-function" data-type="function"><a href="#types-function-function-is-function">is-function</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="types-number"><a href="#types-number">Types - Number</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="types-number-function"><a href="#types-number-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="types-number" data-name="is-number" data-type="function"><a href="#types-number-function-is-number">is-number</a></li><li class="sidebar__item sassdoc__item" data-group="types-number" data-name="is-integer" data-type="function"><a href="#types-number-function-is-integer">is-integer</a></li><li class="sidebar__item sassdoc__item" data-group="types-number" data-name="is-float" data-type="function"><a href="#types-number-function-is-float">is-float</a></li><li class="sidebar__item sassdoc__item" data-group="types-number" data-name="unitstrip" data-type="function"><a href="#types-number-function-unitstrip">unitstrip</a></li><li class="sidebar__item sassdoc__item" data-group="types-number" data-name="is-number-between" data-type="function"><a href="#types-number-function-is-number-between">is-number-between</a></li><li class="sidebar__item sassdoc__item" data-group="types-number" data-name="is-percentage" data-type="function"><a href="#types-number-function-is-percentage">is-percentage</a></li><li class="sidebar__item sassdoc__item" data-group="types-number" data-name="is-percentage-number" data-type="function"><a href="#types-number-function-is-percentage-number">is-percentage-number</a></li><li class="sidebar__item sassdoc__item" data-group="types-number" data-name="to-number" data-type="function"><a href="#types-number-function-to-number">to-number</a></li><li class="sidebar__item sassdoc__item" data-group="types-number" data-name="to-length" data-type="function"><a href="#types-number-function-to-length">to-length</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="types-object"><a href="#types-object">Types - Object</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="types-object-function"><a href="#types-object-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="types-object" data-name="is-object" data-type="function"><a href="#types-object-function-is-object">is-object</a></li><li class="sidebar__item sassdoc__item" data-group="types-object" data-name="get" data-type="function"><a href="#types-object-function-get">get</a></li><li class="sidebar__item sassdoc__item" data-group="types-object" data-name="set" data-type="function"><a href="#types-object-function-set">set</a></li><li class="sidebar__item sassdoc__item" data-group="types-object" data-name="extend" data-type="function"><a href="#types-object-function-extend">extend</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="types-string"><a href="#types-string">Types - String</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="types-string-function"><a href="#types-string-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="types-string" data-name="is-string" data-type="function"><a href="#types-string-function-is-string">is-string</a></li><li class="sidebar__item sassdoc__item" data-group="types-string" data-name="to-string" data-type="function"><a href="#types-string-function-to-string">to-string</a></li><li class="sidebar__item sassdoc__item" data-group="types-string" data-name="string-length" data-type="function"><a href="#types-string-function-string-length">string-length</a></li><li class="sidebar__item sassdoc__item" data-group="types-string" data-name="string-index" data-type="function"><a href="#types-string-function-string-index">string-index</a></li><li class="sidebar__item sassdoc__item" data-group="types-string" data-name="string-insert" data-type="function"><a href="#types-string-function-string-insert">string-insert</a></li><li class="sidebar__item sassdoc__item" data-group="types-string" data-name="string-slice" data-type="function"><a href="#types-string-function-string-slice">string-slice</a></li><li class="sidebar__item sassdoc__item" data-group="types-string" data-name="string-starts-with" data-type="function"><a href="#types-string-function-string-starts-with">string-starts-with</a></li><li class="sidebar__item sassdoc__item" data-group="types-string" data-name="string-contains" data-type="function"><a href="#types-string-function-string-contains">string-contains</a></li><li class="sidebar__item sassdoc__item" data-group="types-string" data-name="string-ends-with" data-type="function"><a href="#types-string-function-string-ends-with">string-ends-with</a></li><li class="sidebar__item sassdoc__item" data-group="types-string" data-name="string-split" data-type="function"><a href="#types-string-function-string-split">string-split</a></li><li class="sidebar__item sassdoc__item" data-group="types-string" data-name="string-replace" data-type="function"><a href="#types-string-function-string-replace">string-replace</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="types-time"><a href="#types-time">Types - Time</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="types-time-function"><a href="#types-time-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="types-time" data-name="is-time" data-type="function"><a href="#types-time-function-is-time">is-time</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="types-time-variable"><a href="#types-time-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="types-time" data-name="time-units" data-type="variable"><a href="#types-time-variable-time-units">time-units</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="types-url"><a href="#types-url">Types - URL</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="types-url-function"><a href="#types-url-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="types-url" data-name="has-url-function" data-type="function"><a href="#types-url-function-has-url-function">has-url-function</a></li><li class="sidebar__item sassdoc__item" data-group="types-url" data-name="is-url" data-type="function"><a href="#types-url-function-is-url">is-url</a></li><li class="sidebar__item sassdoc__item" data-group="types-url" data-name="inspect-url" data-type="function"><a href="#types-url-function-inspect-url">inspect-url</a></li></ul></div></div></aside><article class="main" role="main"><header class="header" role="banner"><div class="container"><div class="sassdoc__searchbar searchbar"><label for="js-search-input" class="visually-hidden">Search</label><div class="searchbar__form" id="js-search"><input name="search" type="search" class="searchbar__field" autocomplete="off" autofocus id="js-search-input" placeholder="Search"><ul class="searchbar__suggestions" id="js-search-suggestions"></ul></div></div></div></header><section class="main__section"><div class="container"><h2 id="flavor-scss---advanced-type-checking-sassscss-framework-with-mixins--helpers-and-a-fully-customizable-grid-system">Flavor SCSS - Advanced type checking Sass/SCSS Framework with Mixins & Helpers and a fully customizable Grid System</h2><hr><h4 id="greetings-to">Greetings to</h4><ul><li><a href="https://hugogiraudel.com">Hugo Giraudel</a> for his knowledge</li><li><a href="https://getbootstrap.com">Bootstrap</a> for the grid system idea</li><li><a href="https://github.com/necolas/normalize.css">normalize.css</a> for the reboot idea</li></ul></div></section><section class="main__section"><h1 class="main__heading" id="core"><div class="container">Core</div></h1><section class="main__sub-section" id="core-function"><h2 class="main__heading--secondary"><div class="container">functions</div></h2><section class="main__item container item" id="core-function-is-null"><h3 class="item__heading"><a class="item__name" href="#function-is-null">is-null</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-null($n) {
@return type-of($n)==null;
}" data-collapsed="@function is-null($n) { ... }"><code>@function is-null($n) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if a value is null</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$n</code></th><td data-label="desc"><p>the value to check</p></td><td data-label="type"><code>Any</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is null</p></div><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-common-mixin-prefixer"><code>prefixer</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="core-function-is-defined"><h3 class="item__heading"><a class="item__name" href="#function-is-defined">is-defined</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-defined($d) {
@return $d and not is-null($d);
}" data-collapsed="@function is-defined($d) { ... }"><code>@function is-defined($d) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if a value is defined</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$d</code></th><td data-label="desc"><p>the value to check</p></td><td data-label="type"><code>Any</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is defined</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-null"><code>is-null</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-animation-function-is-animation-direction"><code>is-animation-direction</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-animation-function-is-animation-iteration-count"><code>is-animation-iteration-count</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-animation-function-is-animation-fill"><code>is-animation-fill</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-animation-function-is-animation-timing-function"><code>is-animation-timing-function</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-animation-function-is-animation-play-state-modes"><code>is-animation-play-state-modes</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-animation-mixin-animation"><code>animation</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-appearance-function-is-appearance-mode"><code>is-appearance-mode</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-background-function-is-background-image-mode"><code>is-background-image-mode</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-background-function-is-background-image"><code>is-background-image</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-background-function-is-background-origin-clip"><code>is-background-origin-clip</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-background-function-is-background-position"><code>is-background-position</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-background-function-is-background-repeat"><code>is-background-repeat</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-background-function-is-background-size"><code>is-background-size</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-background-mixin-background"><code>background</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-border-function-is-border-radius"><code>is-border-radius</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border-radius"><code>border-radius</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-border-function-is-border-style"><code>is-border-style</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-border-function-is-border-mode"><code>is-border-mode</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border"><code>border</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-display"><code>is-display</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-sizing"><code>is-box-sizing</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-size"><code>is-box-size</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-bound-size"><code>is-box-bound-size</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-box-bounds"><code>box-bounds</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-box-size"><code>box-size</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-box-color"><code>box-color</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-shadow-mode"><code>is-box-shadow-mode</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-shadow"><code>is-box-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-shadow"><code>is-box-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-shadow"><code>is-box-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-shadow"><code>is-box-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-shadow"><code>is-box-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-shadow"><code>is-box-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-shadow"><code>is-box-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-shadows"><code>is-box-shadows</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-z-index"><code>is-z-index</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-visibility"><code>is-visibility</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-backface-visibility"><code>is-backface-visibility</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-cursor-function-is-cursor"><code>is-cursor</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-cursor-function-is-pointer-events"><code>is-pointer-events</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-filter-function-is-filter-function"><code>is-filter-function</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-filter-function-is-filter"><code>is-filter</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-flex-function-is-flex-basis"><code>is-flex-basis</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-flex-function-is-flex-direction"><code>is-flex-direction</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-flex-function-is-flex-grow"><code>is-flex-grow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-flex-function-is-flex-shrink"><code>is-flex-shrink</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-flex-function-is-flex-wrap"><code>is-flex-wrap</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-flex-function-is-order"><code>is-order</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-mixin-flex-flow"><code>flex-flow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-flex-grid-function-is-align-content"><code>is-align-content</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-flex-grid-function-is-align-items"><code>is-align-items</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-flex-grid-function-is-align-self"><code>is-align-self</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-flex-grid-function-is-justify-content"><code>is-justify-content</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-flex-grid-function-is-justify-items"><code>is-justify-items</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-flex-grid-function-is-justify-self"><code>is-justify-self</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-grid-mixin-place-content"><code>place-content</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-grid-mixin-place-items"><code>place-items</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-float-function-is-clear"><code>is-clear</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-float-function-is-float"><code>is-float</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-margin-function-is-margin"><code>is-margin</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-margin-mixin-margin-direction"><code>margin-direction</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-outline-function-is-outline-width"><code>is-outline-width</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-outline-function-is-outline-style"><code>is-outline-style</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-outline-function-is-outline-color"><code>is-outline-color</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-outline-function-is-outline-offset"><code>is-outline-offset</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-outline-mixin-outline"><code>outline</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-outline-mixin-outline"><code>outline</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-outline-mixin-outline"><code>outline</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-outline-mixin-outline"><code>outline</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-outline-mixin-outline"><code>outline</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-outline-mixin-outline"><code>outline</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-outline-mixin-outline"><code>outline</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-outline-mixin-outline"><code>outline</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-overflow-function-is-overflow"><code>is-overflow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-padding-function-is-padding"><code>is-padding</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-padding-mixin-padding-direction"><code>padding-direction</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-position-function-is-position"><code>is-position</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-position-function-is-position-point-value"><code>is-position-point-value</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-position-function-is-position-point"><code>is-position-point</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-position"><code>position</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-position"><code>position</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-position"><code>position</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-position"><code>position</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-position"><code>position</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-position"><code>position</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-position"><code>position</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-position"><code>position</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-position"><code>position</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-position"><code>position</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-color"><code>color</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-direction"><code>is-direction</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-font-family"><code>is-font-family</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-font-size"><code>is-font-size</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-font-style"><code>is-font-style</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-font-weight"><code>is-font-weight</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-hyphens"><code>is-hyphens</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-letter-spacing"><code>is-letter-spacing</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-line-height"><code>is-line-height</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-align"><code>is-text-align</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-decoration-line"><code>is-text-decoration-line</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-decoration-style"><code>is-text-decoration-style</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-decoration-color"><code>is-text-decoration-color</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-decoration-mode"><code>is-text-decoration-mode</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-decoration"><code>text-decoration</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-decoration"><code>text-decoration</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-decoration"><code>text-decoration</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-decoration"><code>text-decoration</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-decoration"><code>text-decoration</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-decoration"><code>text-decoration</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-decoration-skip"><code>is-text-decoration-skip</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-underline-position"><code>is-text-underline-position</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-indent"><code>is-text-indent</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-overflow"><code>is-text-overflow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-shadow-mode"><code>is-text-shadow-mode</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-shadow"><code>is-text-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-shadow"><code>is-text-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-shadow"><code>is-text-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-shadow"><code>is-text-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-shadow"><code>is-text-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-shadow"><code>is-text-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-shadow"><code>is-text-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-shadows"><code>is-text-shadows</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-size-adjust"><code>is-text-size-adjust</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-stroke-width"><code>is-text-stroke-width</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-stroke"><code>text-stroke</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-transform"><code>is-text-transform</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-user-select"><code>is-user-select</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-vertical-align"><code>is-vertical-align</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-white-space"><code>is-white-space</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-word-break"><code>is-word-break</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-word-spacing"><code>is-word-spacing</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-word-wrap"><code>is-word-wrap</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-font"><code>font</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-content-align"><code>content-align</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-content-align"><code>content-align</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-content-align"><code>content-align</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-content-align"><code>content-align</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-transform-function-is-transform-function"><code>is-transform-function</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-transform-function-is-transform"><code>is-transform</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-scale"><code>scale</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-transform-function-is-transform-origin"><code>is-transform-origin</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-transform-function-is-transform-style"><code>is-transform-style</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-transform-style"><code>transform-style</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-is-transition-time"><code>is-transition-time</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-is-transition-property"><code>is-transition-property</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-is-transition-timing-function"><code>is-transition-timing-function</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-is-transition-timing-mode-or-function"><code>is-transition-timing-mode-or-function</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-is-transition"><code>is-transition</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-is-transition"><code>is-transition</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-is-transition"><code>is-transition</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-is-transition"><code>is-transition</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-will-change-function-is-will-change"><code>is-will-change</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-will-change-mixin-will-change"><code>will-change</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-array-function-is-array"><code>is-array</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-boolean-function-is-boolean"><code>is-boolean</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-color-function-is-color"><code>is-color</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-color-function-is-css-color"><code>is-css-color</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-css-default"><code>is-css-default</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-calc-length"><code>is-calc-length</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-length-mode"><code>is-length-mode</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-length"><code>is-length</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-size"><code>is-size</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-function-function-is-function"><code>is-function</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-number"><code>is-number</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-object-function-is-object"><code>is-object</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-string-function-is-string"><code>is-string</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="core-function-nth-value"><h3 class="item__heading"><a class="item__name" href="#function-nth-value">nth-value</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function nth-value($list, $index, $default: null) {
@return if(length($list) >= $index, nth($list, $index), $default);
}" data-collapsed="@function nth-value($list, $index, $default: null) { ... }"><code>@function nth-value($list, $index, $default: null) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>nth-value Helper function<br>Return $default rather than throwing an error if index is not available in the list.</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$list</code></th><td data-label="desc"><p>the haystack list to check</p></td><td data-label="type"><code>Array</code> or <code>List</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$index</code></th><td data-label="desc"><p>the needle index</p></td><td data-label="type"><code>Integer</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$default</code></th><td data-label="desc"><p>the default value to fallback</p></td><td data-label="type"><code>Any</code></td><td data-label="default"><code>null</code></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Any</code> —<p>the nth-value</p></div><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-animation-mixin-animation"><code>animation</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-background-function-is-background-position"><code>is-background-position</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-background-function-is-background-size"><code>is-background-size</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-background-mixin-background"><code>background</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border-radius"><code>border-radius</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border"><code>border</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-box-bounds"><code>box-bounds</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-box-size"><code>box-size</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-box-color"><code>box-color</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-shadow"><code>is-box-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-shadow"><code>is-box-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-shadow"><code>is-box-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-shadow"><code>is-box-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-shadow"><code>is-box-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-shadow"><code>is-box-shadow</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-mixin-flex-flow"><code>flex-flow</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-grid-mixin-place-content"><code>place-content</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-grid-mixin-place-items"><code>place-items</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-margin-mixin-margin"><code>margin</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-margin-mixin-margin"><code>margin</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-margin-mixin-margin"><code>margin</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-margin-mixin-margin"><code>margin</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-outline-mixin-outline"><code>outline</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-outline-mixin-outline"><code>outline</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-outline-mixin-outline"><code>outline</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-outline-mixin-outline"><code>outline</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-overflow-mixin-overflow"><code>overflow</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-padding-mixin-padding"><code>padding</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-padding-mixin-padding"><code>padding</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-padding-mixin-padding"><code>padding</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-padding-mixin-padding"><code>padding</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-position"><code>position</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-position"><code>position</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-position"><code>position</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-position"><code>position</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-position"><code>position</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-color"><code>color</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-decoration"><code>text-decoration</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-decoration"><code>text-decoration</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-decoration"><code>text-decoration</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-shadow"><code>is-text-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-shadow"><code>is-text-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-shadow"><code>is-text-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-shadow"><code>is-text-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-shadow"><code>is-text-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-shadow"><code>is-text-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-shadow"><code>is-text-shadow</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-stroke"><code>text-stroke</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-font"><code>font</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-content-align"><code>content-align</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-content-align"><code>content-align</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-transform-origin"><code>transform-origin</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-transform-origin"><code>transform-origin</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-transform-origin"><code>transform-origin</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-is-transition"><code>is-transition</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-is-transition"><code>is-transition</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-is-transition"><code>is-transition</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-is-transition"><code>is-transition</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section></section><section class="main__section"><h1 class="main__heading" id="grid-system"><div class="container">Grid System</div></h1><section class="main__sub-section" id="grid-system-mixin"><h2 class="main__heading--secondary"><div class="container">mixins</div></h2><section class="main__item container item" id="grid-system-mixin-grid-system"><h3 class="item__heading"><a class="item__name" href="#mixin-grid-system">grid-system</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin grid-system($columns: $columns-default, $gutter: $gutter-default, $reboot: true) {
@if is-integer($columns) and is-length($gutter) {
@if $reboot {
@include reboot;
}
@else {
html,
body {
@include font($font-size-base $line-height-base $font-family-base $font-weight-base);
}
}
@include helpers;
// Grid system
// --------------------------------------------------
@include containers($gutter, $breakpoints);
@include rows($gutter);
@include columns($columns, $gutter, $first-breakpoint, $breakpoints);
}
@else {
@error 'columns: #{$columns}, gutter: #{$gutter} are not valid options for the grid-system mixin';
}
}" data-collapsed="@mixin grid-system($columns: $columns-default, $gutter: $gutter-default, $reboot: true) { ... }"><code>@mixin grid-system($columns: $columns-default, $gutter: $gutter-default, $reboot: true) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Grid system mixin<br>entry point of flavor-scss grid system</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$columns</code></th><td data-label="desc"><p>the columns number</p></td><td data-label="type"><code>Integer</code></td><td data-label="default"><code>$columns-default</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$gutter</code></th><td data-label="desc"><p>the gutter value</p></td><td data-label="type"><code>Size</code> or <code>Length</code></td><td data-label="default"><code>$gutter-default</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$reboot</code></th><td data-label="desc"><p>if true a reboot/reset/normalize will be prepended to the grid system</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>true</code></td></tr></tbody></table><h3 class="item__sub-heading">Throws</h3><ul class="list-unstyled"><li><p>columns: #{$columns}, gutter: #{$gutter} are not valid options for the grid-system mixin</p></li></ul><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-font"><code>font</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#grid-system-columns-mixin-columns"><code>columns</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-integer"><code>is-integer</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-length"><code>is-length</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section></section><section class="main__section"><h1 class="main__heading" id="grid-system-columns"><div class="container">Grid System - Columns</div></h1><section class="main__sub-section" id="grid-system-columns-mixin"><h2 class="main__heading--secondary"><div class="container">mixins</div></h2><section class="main__item container item" id="grid-system-columns-mixin-columns"><h3 class="item__heading"><a class="item__name" href="#mixin-columns">columns</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin columns($columns: $columns-default, $gutter: $gutter-default) {
@if is-integer($columns) and is-length($gutter) {
// Columns
// --------------------------------------------------
// Common styles for small and large grid columns
$padding: ($gutter / 2);
[class*='col-'] {
@include position(relative);
@include display(inline-block, true);
@include padding(null $padding);
@include content-align(left top);
@include box-bounds(null 1px); // Prevent columns from collapsing when empty
> .row {
@include reset-inline-block;
}
}
@include columns-breakpoints($columns, $gutter, $first-breakpoint, $breakpoints);
}
@else {
@error 'columns: #{$columns}, gutter: #{$gutter} are not valid options for the grid-system columns mixin';
}
}" data-collapsed="@mixin columns($columns: $columns-default, $gutter: $gutter-default) { ... }"><code>@mixin columns($columns: $columns-default, $gutter: $gutter-default) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Columns mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$columns</code></th><td data-label="desc"><p>the columns number</p></td><td data-label="type"><code>Integer</code></td><td data-label="default"><code>$columns-default</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$gutter</code></th><td data-label="desc"><p>the gutter value</p></td><td data-label="type"><code>Size</code> or <code>Length</code></td><td data-label="default"><code>$gutter-default</code></td></tr></tbody></table><h3 class="item__sub-heading">Throws</h3><ul class="list-unstyled"><li><p>columns: #{$columns}, gutter: #{$gutter} are not valid options for the grid-system columns mixin</p></li></ul><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-position"><code>position</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-display"><code>display</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-padding-mixin-padding"><code>padding</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-content-align"><code>content-align</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-box-bounds"><code>box-bounds</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-reset-inline-block"><code>reset-inline-block</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-integer"><code>is-integer</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-length"><code>is-length</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#grid-system-mixin-grid-system"><code>grid-system</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section></section><section class="main__section"><h1 class="main__heading" id="grid-system-reboot"><div class="container">Grid System - Reboot</div></h1><section class="main__sub-section" id="grid-system-reboot-css"><h2 class="main__heading--secondary"><div class="container">css</div></h2><section class="main__item container item" id="grid-system-reboot-css-*"><h3 class="item__heading"><a class="item__name" href="#css-*">*</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>* {
@include box-sizing(border-box);
@include padding(0);
@include margin(0);
@include cursor(default);
@include user-select(none);
text-rendering: optimizeLegibility;
&:before,
&:after {
@include box-sizing(border-box);
@include padding(0);
@include margin(0);
@include cursor(default);
@include user-select(none);
}
}</code>" data-collapsed="* { ... }"><code>* { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>every selector will be resetted to<br></p><ul><li>Change from <code>box-sizing: content-box</code> so that <code>width</code> is not affected by <code>padding</code> or <code>border</code>.</li><li>Change the default font family in all browsers.</li><li>Correct the line height in all browsers.</li><li>Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.</li><li>Setting @viewport causes scrollbars to overlap content in IE11 and Edge, so we force a non-overlapping, non-auto-hiding scrollbar to counteract.</li><li>Change the default tap highlight to be completely transparent in iOS.</li></ul>@name star-selector-reset<p></p></div><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section></section><section class="main__section"><h1 class="main__heading" id="mixins-animation"><div class="container">Mixins - Animation</div></h1><section class="main__sub-section" id="mixins-animation-function"><h2 class="main__heading--secondary"><div class="container">functions</div></h2><section class="main__item container item" id="mixins-animation-function-is-animation-name"><h3 class="item__heading"><a class="item__name" href="#function-is-animation-name">is-animation-name</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-animation-name($an) {
@return is-string($an) or array-contains($animation-name-modes, $an);
}" data-collapsed="@function is-animation-name($an) { ... }"><code>@function is-animation-name($an) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if animation name is string or animation-name-mode (none, inherit, initial)</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$an</code></th><td data-label="desc"><p>the animation-name value</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is animation-name value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-string-function-is-string"><code>is-string</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-animation-variable-animation-name-modes"><code>animation-name-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-animation-mixin-animation"><code>animation</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/css3_pr_animation-name.asp">W3Schools animation-name docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-animation-function-is-animation-time"><h3 class="item__heading"><a class="item__name" href="#function-is-animation-time">is-animation-time</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-animation-time($at) {
@return is-time($at) or is-css-default($at);
}" data-collapsed="@function is-animation-time($at) { ... }"><code>@function is-animation-time($at) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if animation time is a correct time value</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$at</code></th><td data-label="desc"><p>the animation-time value</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is animation-time value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-time-function-is-time"><code>is-time</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-css-default"><code>is-css-default</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-animation-mixin-animation"><code>animation</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/css3_pr_animation-duration.asp">W3Schools animation-duration docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-animation-function-is-animation-direction"><h3 class="item__heading"><a class="item__name" href="#function-is-animation-direction">is-animation-direction</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-animation-direction($ad) {
@return is-defined($ad) and array-contains($animation-direction-modes, $ad);
}" data-collapsed="@function is-animation-direction($ad) { ... }"><code>@function is-animation-direction($ad) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if animation direction is a correct direction mode</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$ad</code></th><td data-label="desc"><p>the animation-direction mode</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is animation-direction mode</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-animation-variable-animation-direction-modes"><code>animation-direction-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-animation-mixin-animation"><code>animation</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/css3_pr_animation-direction.asp">W3Schools animation-direction docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-animation-function-is-animation-iteration-count"><h3 class="item__heading"><a class="item__name" href="#function-is-animation-iteration-count">is-animation-iteration-count</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-animation-iteration-count($aic) {
@return is-defined($aic) and (is-integer($aic) or array-contains($animation-iteration-count-modes, $aic));
}" data-collapsed="@function is-animation-iteration-count($aic) { ... }"><code>@function is-animation-iteration-count($aic) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if animation iteration count is a correct iteration count value (integer or infinite, initial, inherit)</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$aic</code></th><td data-label="desc"><p>the animation-iteration-count value</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is animation-iteration-count value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-integer"><code>is-integer</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-animation-variable-animation-iteration-count-modes"><code>animation-iteration-count-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-animation-mixin-animation"><code>animation</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/css3_pr_animation-iteration-count.asp">W3Schools animation-iteration-count docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-animation-function-is-animation-fill"><h3 class="item__heading"><a class="item__name" href="#function-is-animation-fill">is-animation-fill</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-animation-fill($afm) {
@return is-defined($afm) and array-contains($animation-fill-modes, $afm);
}" data-collapsed="@function is-animation-fill($afm) { ... }"><code>@function is-animation-fill($afm) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if animation fill mode is a correct fill mode value (integer or none, forwards, backwards, both, initial, inherit)</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$afm</code></th><td data-label="desc"><p>the animation-fill mode</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is animation-fill mode</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-animation-variable-animation-fill-modes"><code>animation-fill-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-animation-mixin-animation"><code>animation</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/css3_pr_animation-fill-mode.asp">W3Schools animation-fill-mode docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-animation-function-is-animation-timing-function"><h3 class="item__heading"><a class="item__name" href="#function-is-animation-timing-function">is-animation-timing-function</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-animation-timing-function($atf) {
@return is-defined($atf) and (string-starts-with($atf, 'steps') or string-starts-with($atf, 'cubic-bezier') or array-contains($animation-timing-function-modes, $atf));
}" data-collapsed="@function is-animation-timing-function($atf) { ... }"><code>@function is-animation-timing-function($atf) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if animation timing function mode is a correct timing function (steps(), cubid-bezier(), linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end, initial, inherit)</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$atf</code></th><td data-label="desc"><p>the animation-timing-function value</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is animation-timing-function value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-string-function-string-starts-with"><code>string-starts-with</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-animation-variable-animation-timing-function-modes"><code>animation-timing-function-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-animation-mixin-animation"><code>animation</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp">W3Schools animation-timing-function docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-animation-function-is-animation-play-state-modes"><h3 class="item__heading"><a class="item__name" href="#function-is-animation-play-state-modes">is-animation-play-state-modes</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-animation-play-state-modes($aps) {
@return is-defined($aps) and array-contains($animation-play-state-modes, $aps);
}" data-collapsed="@function is-animation-play-state-modes($aps) { ... }"><code>@function is-animation-play-state-modes($aps) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if animation play state is a correct play state mode (paused, running, initial, inherit)</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$aps</code></th><td data-label="desc"><p>the animation-play-state mode</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is animation-play-state mode</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-animation-variable-animation-play-state-modes"><code>animation-play-state-modes</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/css3_pr_animation-play-state.asp">W3Schools animation-play-state docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section><section class="main__sub-section" id="mixins-animation-mixin"><h2 class="main__heading--secondary"><div class="container">mixins</div></h2><section class="main__item container item" id="mixins-animation-mixin-keyframes"><h3 class="item__heading"><a class="item__name" href="#mixin-keyframes">keyframes</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin keyframes($animation-name) {
@keyframes #{$animation-name} {
@content;
}
}" data-collapsed="@mixin keyframes($animation-name) { ... }"><code>@mixin keyframes($animation-name) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Keyframe Mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$animation-name</code></th><td data-label="desc"><p>the animation name</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage - Fade Out</p></div><pre class="example__code language-scss"><code>@include keyframes(fade-out) {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output - Fade Out</p></div><pre class="example__code language-css"><code>@keyframes fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Usage - Change Color</p></div><pre class="example__code language-scss"><code>@include keyframes(change-color) {
0% {
color: #000;
}
100% {
color: #FFF;
}
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output - Change Color</p></div><pre class="example__code language-css"><code>@keyframes change-color {
0% {
color: #000;
}
100% {
color: #FFF;
}
}</code></pre></div><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-animation-mixin-animation"><h3 class="item__heading"><a class="item__name" href="#mixin-animation">animation</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin animation($options, $options.name: none, $options.duration: 0s, $options.delay: 0s, $options.direction: normal, $options.iteration-count: 0, $options.timing-function: ease, $options.fill-mode: forwards, $options.play-state: initial, $important: false) {
@if is-css-default($options) {
@include prefixer(animation, $options, null, $important);
}
@else {
$settings: (name: none, duration: 0s, delay: 0s, direction: normal, iteration-count: 0, timing-function: ease, fill-mode: forwards, play-state: initial);
@if is-object($options) {
$settings: extend($settings, $options);
}
@else {
$name: nth-value($options, 1);
@if is-defined($name) {
$settings: extend($settings, (name: $name));
}
$duration: nth-value($options, 2);
@if is-defined($duration) {
$settings: extend($settings, (duration: $duration));
}
$delay: nth-value($options, 3);
@if is-defined($delay) {
$settings: extend($settings, (delay: $delay));
}
$direction: nth-value($options, 4);
@if is-defined($direction) {
$settings: extend($settings, (direction: $direction));
}
$iteration-count: nth-value($options, 5);
@if is-defined($iteration-count) {
$settings: extend($settings, (iteration-count: $iteration-count));
}
$timing-function: nth-value($options, 6);
@if is-defined($timing-function) {
$settings: extend($settings, (timing-function: $timing-function));
}
$fill-mode: nth-value($options, 7);
@if is-defined($fill-mode) {
$settings: extend($settings, (fill-mode: $fill-mode));
}
$play-state: nth-value($options, 8);
@if is-defined($play-state) {
$settings: extend($settings, (play-state: $play-state));
}
}
$animation: ();
$animation-name: map-get($settings, name);
@if is-animation-name($animation-name) {
@include prefixer(animation-name, $animation-name, null, $important);
}
@else {
@error '`animation-name: #{$animation-name}` is mandatory parameter';
}
$animation-duration: map-get($settings, duration);
@if is-animation-time($animation-duration) {
@include prefixer(animation-duration, $animation-duration, null, $important);
}
@else {
@warn '`animation-duration: #{$animation-duration}` is not a valid animation time value (only time & css defaults are allowed)';
}
$animation-delay: map-get($settings, delay);
@if is-animation-time($animation-delay) {
@include prefixer(animation-delay, $animation-delay, null, $important);
}
@else {
@warn '`animation-delay: #{$animation-delay}` is not a valid animation time value (only time & css defaults are allowed)';
}
$animation-direction: map-get($settings, direction);
@if is-animation-direction($animation-direction) {
@include prefixer(animation-direction, $animation-direction, null, $important);
}
@else {
@warn '`animation-direction: #{$animation-direction}` is not a valid animation direction value';
}
$animation-iteration-count: map-get($settings, iteration-count);
@if is-animation-iteration-count($animation-iteration-count) {
@include prefixer(animation-iteration-count, $animation-iteration-count, null, $important);
}
@else {
@warn '`animation-iteration-count: #{$animation-iteration-count}` is not a valid animation iteration count value';
}
$animation-timing-function: map-get($settings, timing-function);
@if is-animation-timing-function($animation-timing-function) {
@include prefixer(animation-timing-function, $animation-timing-function, null, $important);
}
@else {
@warn '`animation-timing-function: #{$animation-timing-function}` is not a valid animation timing function value';
}
$animation-fill-mode: map-get($settings, fill-mode);
@if is-animation-fill($animation-fill-mode) {
@include prefixer(animation-fill-mode, $animation-fill-mode, null, $important);
}
@else {
@warn '`animation-fill-mode: #{$animation-fill-mode}` is not a valid animation fill mode value';
}
$animation-play-state: map-get($settings, play-state);
@if is-animation-direction($animation-play-state) {
@include prefixer(animation-play-state, $animation-play-state, null, $important);
}
@else {
@warn '`animation-play-state: #{$animation-play-state}` is not a valid animation play state value';
}
}
}" data-collapsed="@mixin animation($options, $options.name: none, $options.duration: 0s, $options.delay: 0s, $options.direction: normal, $options.iteration-count: 0, $options.timing-function: ease, $options.fill-mode: forwards, $options.play-state: initial, $important: false) { ... }"><code>@mixin animation($options, $options.name: none, $options.duration: 0s, $options.delay: 0s, $options.direction: normal, $options.iteration-count: 0, $options.timing-function: ease, $options.fill-mode: forwards, $options.play-state: initial, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Animation Mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$options</code></th><td data-label="desc"><p>animation options</p></td><td data-label="type"><code>Object</code> or <code>Map</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.name</code></th><td data-label="desc"><p>animation name</p></td><td data-label="type"><code>String</code> or <code>Animation-name-mode</code></td><td data-label="default"><code>none</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.duration</code></th><td data-label="desc"><p>animation duration</p></td><td data-label="type"><code>Time</code></td><td data-label="default"><code>0s</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.delay</code></th><td data-label="desc"><p>animation delay</p></td><td data-label="type"><code>Time</code></td><td data-label="default"><code>0s</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.direction</code></th><td data-label="desc"><p>animation direction</p></td><td data-label="type"><code>String</code></td><td data-label="default"><code>normal</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.iteration-count</code></th><td data-label="desc"><p>animation iteration count</p></td><td data-label="type"><code>Integer</code></td><td data-label="default"><code>0</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.timing-function</code></th><td data-label="desc"><p>animation timing function (easing)</p></td><td data-label="type"><code>String</code></td><td data-label="default"><code>ease</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.fill-mode</code></th><td data-label="desc"><p>animation fill mode</p></td><td data-label="type"><code>String</code></td><td data-label="default"><code>forwards</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.play-state</code></th><td data-label="desc"><p>animation play state</p></td><td data-label="type"><code>String</code></td><td data-label="default"><code>initial</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.animated-element {
@include animation(change-color 10s 5s);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.animated-element {
-webkit-animation-name: change-color;
-moz-animation-name: change-color;
-ms-animation-name: change-color;
-o-animation-name: change-color;
animation-name: change-color;
-webkit-animation-duration: 10s;
-moz-animation-duration: 10s;
-ms-animation-duration: 10s;
-o-animation-duration: 10s;
animation-duration: 10s;
-webkit-animation-delay: 5s;
-moz-animation-delay: 5s;
-ms-animation-delay: 5s;
-o-animation-delay: 5s;
animation-delay: 5s;
-webkit-animation-direction: normal;
-moz-animation-direction: normal;
-ms-animation-direction: normal;
-o-animation-direction: normal;
animation-direction: normal;
-webkit-animation-iteration-count: 0;
-moz-animation-iteration-count: 0;
-ms-animation-iteration-count: 0;
-o-animation-iteration-count: 0;
animation-iteration-count: 0;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
-ms-animation-timing-function: ease;
-o-animation-timing-function: ease;
animation-timing-function: ease;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-play-state: initial;
-moz-animation-play-state: initial;
-ms-animation-play-state: initial;
-o-animation-play-state: initial;
animation-play-state: initial;
}</code></pre></div><h3 class="item__sub-heading">Throws</h3><ul class="list-unstyled"><li><p><code>animation-name: #{$animation-name}</code> is mandatory parameter</p></li></ul><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-css-default"><code>is-css-default</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-is-object"><code>is-object</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-animation-function-is-animation-name"><code>is-animation-name</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-animation-function-is-animation-iteration-count"><code>is-animation-iteration-count</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-animation-function-is-animation-timing-function"><code>is-animation-timing-function</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-animation-function-is-animation-fill"><code>is-animation-fill</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-animation-function-is-animation-time"><code>is-animation-time</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-animation-function-is-animation-direction"><code>is-animation-direction</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-common-mixin-prefixer"><code>prefixer</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section><section class="main__sub-section" id="mixins-animation-variable"><h2 class="main__heading--secondary"><div class="container">variables</div></h2><section class="main__item container item" id="mixins-animation-variable-animation-name-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-animation-name-modes">animation-name-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$animation-name-modes: array-concat((none), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Animation name modes supported</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-animation-function-is-animation-name"><code>is-animation-name</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-animation-variable-animation-direction-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-animation-direction-modes">animation-direction-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$animation-direction-modes: array-concat((normal, reverse, alternate, alternate-reverse), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Animation direction modes supported</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-animation-function-is-animation-direction"><code>is-animation-direction</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-animation-variable-animation-iteration-count-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-animation-iteration-count-modes">animation-iteration-count-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$animation-iteration-count-modes: array-concat((infinite), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Animation iteration count modes supported</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-animation-function-is-animation-iteration-count"><code>is-animation-iteration-count</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-animation-variable-animation-fill-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-animation-fill-modes">animation-fill-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$animation-fill-modes: array-concat((none, forwards, backwards, both), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Animation fill modes supported</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-animation-function-is-animation-fill"><code>is-animation-fill</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-animation-variable-animation-timing-function-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-animation-timing-function-modes">animation-timing-function-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$animation-timing-function-modes: array-concat((linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Animation timing function modes supported</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-animation-function-is-animation-timing-function"><code>is-animation-timing-function</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-animation-variable-animation-play-state-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-animation-play-state-modes">animation-play-state-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$animation-play-state-modes: array-concat((paused, running), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Animation play state supported</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-animation-function-is-animation-play-state-modes"><code>is-animation-play-state-modes</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section></section><section class="main__section"><h1 class="main__heading" id="mixins-appearance"><div class="container">Mixins - Appearance</div></h1><section class="main__sub-section" id="mixins-appearance-function"><h2 class="main__heading--secondary"><div class="container">functions</div></h2><section class="main__item container item" id="mixins-appearance-function-is-appearance-mode"><h3 class="item__heading"><a class="item__name" href="#function-is-appearance-mode">is-appearance-mode</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-appearance-mode($a) {
@return is-defined($am) and array-contains($appearance-modes, $am);
}" data-collapsed="@function is-appearance-mode($a) { ... }"><code>@function is-appearance-mode($a) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is an appearance mode</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$a</code></th><td data-label="desc"><p>the appearance mode</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is appearance mode</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-appearance-variable-appearance-modes"><code>appearance-modes</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance">MDN web docs for appearance</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section><section class="main__sub-section" id="mixins-appearance-mixin"><h2 class="main__heading--secondary"><div class="container">mixins</div></h2><section class="main__item container item" id="mixins-appearance-mixin-appearance"><h3 class="item__heading"><a class="item__name" href="#mixin-appearance">appearance</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin appearance($a, $important: false) {
@include prefixer(appearance, $a, webkit moz spec, $important);
}" data-collapsed="@mixin appearance($a, $important: false) { ... }"><code>@mixin appearance($a, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Appearance mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$a</code></th><td data-label="desc"><p>the appearance mode</p></td><td data-label="type"><code>Appearance-mode</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.appearance-element {
@include appearance(none);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.appearance-element {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-common-mixin-prefixer"><code>prefixer</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section><section class="main__sub-section" id="mixins-appearance-variable"><h2 class="main__heading--secondary"><div class="container">variables</div></h2><section class="main__item container item" id="mixins-appearance-variable-appearance-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-appearance-modes">appearance-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$appearance-modes: (none, button, button-arrow-down, button-arrow-next, button-arrow-previous, button-arrow-up, button-bevel, button-focus, caret, checkbox, checkbox-container, checkbox-label, checkmenuitem, dualbutton, groupbox, listbox, listitem, menuarrow, menubar, menucheckbox, menuimage, menuitem, menuitemtext, menulist, menulist-button, menulist-text, menulist-textfield, menupopup, menuradio, menuseparator, meterbar, meterchunk, progressbar, progressbar-vertical, progresschunk, progresschunk-vertical, radio, radio-container, radio-label, radiomenuitem, range, range-thumb, resizer, resizerpanel, scale-horizontal, scalethumbend, scalethumb-horizontal, scalethumbstart, scalethumbtick, scalethumb-vertical, scale-vertical, scrollbarbutton-down, scrollbarbutton-left, scrollbarbutton-right, scrollbarbutton-up, scrollbarthumb-horizontal, scrollbarthumb-vertical, scrollbartrack-horizontal, scrollbartrack-vertical, searchfield, separator, sheet, spinner, spinner-downbutton, spinner-textfield, spinner-upbutton, splitter, statusbar, statusbarpanel, tab, tabpanel, tabpanels, tab-scroll-arrow-back, tab-scroll-arrow-forward, textfield, textfield-multiline, toolbar, toolbarbutton, toolbarbutton-dropdown, toolbargripper, toolbox, tooltip, treeheader, treeheadercell, treeheadersortarrow, treeitem, treeline, treetwisty, treetwistyopen, treeview, -moz-mac-unified-toolbar, -moz-win-borderless-glass, -moz-win-browsertabbar-toolbox, -moz-win-communicationstext, -moz-win-communications-toolbox, -moz-win-exclude-glass, -moz-win-glass, -moz-win-mediatext, -moz-win-media-toolbox, -moz-window-button-box, -moz-window-button-box-maximized, -moz-window-button-close, -moz-window-button-maximize, -moz-window-button-minimize, -moz-window-button-restore, -moz-window-frame-bottom, -moz-window-frame-left, -moz-window-frame-right, -moz-window-titlebar, -moz-window-titlebar-maximized);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Appearance modes supported</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-appearance-function-is-appearance-mode"><code>is-appearance-mode</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section></section><section class="main__section"><h1 class="main__heading" id="mixins-background"><div class="container">Mixins - Background</div></h1><section class="main__sub-section" id="mixins-background-function"><h2 class="main__heading--secondary"><div class="container">functions</div></h2><section class="main__item container item" id="mixins-background-function-is-background-image-mode"><h3 class="item__heading"><a class="item__name" href="#function-is-background-image-mode">is-background-image-mode</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-background-image-mode($bi) {
@return is-defined($bi) and array-contains($background-image-modes, $bi);
}" data-collapsed="@function is-background-image-mode($bi) { ... }"><code>@function is-background-image-mode($bi) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is background image mode (none, initial, inherit)</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$bi</code></th><td data-label="desc"><p>the background-image mode</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is background-image mode</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-background-variable-background-image-modes"><code>background-image-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-background-function-is-background-image"><code>is-background-image</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-background-mixin-background"><code>background</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-background-function-is-background-attachment"><h3 class="item__heading"><a class="item__name" href="#function-is-background-attachment">is-background-attachment</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-background-attachment($ba) {
@return array-contains($background-attachment-modes, $ba);
}" data-collapsed="@function is-background-attachment($ba) { ... }"><code>@function is-background-attachment($ba) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a background attachment mode</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$ba</code></th><td data-label="desc"><p>the background-attachment mode</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is background-attachment mode</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-background-variable-background-attachment-modes"><code>background-attachment-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-background-mixin-background-attachment"><code>background-attachment</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-background-mixin-background"><code>background</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/pr_background-attachment.asp">W3Schools background-attachment docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-background-function-is-background-repeat"><h3 class="item__heading"><a class="item__name" href="#function-is-background-repeat">is-background-repeat</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-background-repeat($br) {
@return is-defined($br) and array-contains($background-repeat-modes, $br);
}" data-collapsed="@function is-background-repeat($br) { ... }"><code>@function is-background-repeat($br) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a background repeat value</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$br</code></th><td data-label="desc"><p>the background-repeat value</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is background-repeat value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-background-variable-background-repeat-modes"><code>background-repeat-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-background-mixin-background-repeat"><code>background-repeat</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-background-mixin-background"><code>background</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/pr_background-repeat.asp">W3Schools background-repeat docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-background-function-is-background-origin-clip"><h3 class="item__heading"><a class="item__name" href="#function-is-background-origin-clip">is-background-origin-clip</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-background-origin-clip($boc) {
@return is-defined($boc) and array-contains($background-origin-clip-modes, $boc);
}" data-collapsed="@function is-background-origin-clip($boc) { ... }"><code>@function is-background-origin-clip($boc) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a background origin/clip mode</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$boc</code></th><td data-label="desc"><p>the background-origin or background-clip value</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is background-origin or background-clip value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-background-variable-background-origin-clip-modes"><code>background-origin-clip-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-background-mixin-background-origin"><code>background-origin</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-background-mixin-background-clip"><code>background-clip</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-background-mixin-background"><code>background</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/css3_pr_background-clip.asp">W3Schools background-clip docs</a></li><li><a href="https://www.w3schools.com/cssref/css3_pr_background-origin.asp">W3Schools background-origin docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-background-function-is-background-size"><h3 class="item__heading"><a class="item__name" href="#function-is-background-size">is-background-size</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-background-size($bs) {
@if is-defined($bs) {
@if is-array($bs) {
$w: nth-value($bs, 1);
$h: nth-value($bs, 2);
@if (is-size($w) or is-percentage($w)) and (is-size($h) and is-percentage($h)) {
@return true;
}
}
@return is-size($bs) or is-percentage($bs) or array-contains($background-size-modes, $bs);
}
@return false;
}" data-collapsed="@function is-background-size($bs) { ... }"><code>@function is-background-size($bs) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a background size value</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$bs</code></th><td data-label="desc"><p>the background-size value/values</p></td><td data-label="type"><code>String</code> or <code>Array</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is background-size value/values</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-is-array"><code>is-array</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-size"><code>is-size</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-percentage"><code>is-percentage</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-background-variable-background-size-modes"><code>background-size-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-background-mixin-background-size"><code>background-size</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-background-mixin-background"><code>background</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/css3_pr_background-size.asp">W3Schools background-size docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-background-function-is-background-image"><h3 class="item__heading"><a class="item__name" href="#function-is-background-image">is-background-image</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-background-image($bi) {
@return is-defined($bi) and (is-background-image-mode($bi) or is-url($bi));
}" data-collapsed="@function is-background-image($bi) { ... }"><code>@function is-background-image($bi) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is background image (url, none, initial, inherit)</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$bi</code></th><td data-label="desc"><p>the background-image value</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is background-image value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-background-function-is-background-image-mode"><code>is-background-image-mode</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-url-function-is-url"><code>is-url</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-background-mixin-background-image"><code>background-image</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-background-mixin-background"><code>background</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-background-function-is-background-position"><h3 class="item__heading"><a class="item__name" href="#function-is-background-position">is-background-position</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-background-position($bp) {
@if is-defined($bp) {
@if is-array($bp) {
$h: nth-value($bp, 1);
$h-valid: is-size($h) or is-percentage($h) or array-contains($background-position-horizontal-modes, $h);
$v: if(length($bp) > 1, nth-value($bp, 2), center);
$v-valid: is-size($v) or is-percentage($v) or array-contains($background-position-vertical-modes, $v);
@return $h-valid and $v-valid;
}
@return is-size($bp) or is-percentage($bp) or array-contains($background-position-horizontal-modes, $bp) or array-contains($background-position-vertical-modes, $bp);
}
@return false;
}" data-collapsed="@function is-background-position($bp) { ... }"><code>@function is-background-position($bp) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a background position value</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$bp</code></th><td data-label="desc"><p>the background-position value/values</p></td><td data-label="type"><code>String</code> or <code>Array</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is background-position value/values</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-is-array"><code>is-array</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-size"><code>is-size</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-percentage"><code>is-percentage</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-background-variable-background-position-horizontal-modes"><code>background-position-horizontal-modes</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-background-variable-background-position-vertical-modes"><code>background-position-vertical-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-background-mixin-background-position"><code>background-position</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-background-mixin-background"><code>background</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/pr_background-position.asp">W3Schools background-position docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section><section class="main__sub-section" id="mixins-background-mixin"><h2 class="main__heading--secondary"><div class="container">mixins</div></h2><section class="main__item container item" id="mixins-background-mixin-background-color"><h3 class="item__heading"><a class="item__name" href="#mixin-background-color">background-color</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin background-color($bc, $important: false) {
@if(is-css-color($bc)) {
background-color: $bc important($important);
}
@else {
@warn '`background-color: #{$bc}` is not a valid background-color value';
}
}" data-collapsed="@mixin background-color($bc, $important: false) { ... }"><code>@mixin background-color($bc, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Background color mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$bc</code></th><td data-label="desc"><p>the background-color value</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.background-color-element {
@include background-color(#ffddee);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.background-color-element {
background-color: #ffddee;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-color-function-is-css-color"><code>is-css-color</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-background-mixin-background"><code>background</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-box-color"><code>box-color</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-background-mixin-background-attachment"><h3 class="item__heading"><a class="item__name" href="#mixin-background-attachment">background-attachment</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin background-attachment($ba, $important: false) {
@if(is-background-attachment($ba)) {
background-attachment: $ba important($important);
}
@else {
@warn '`background-attachment: #{$ba}` is not a valid background-attachment value';
}
}" data-collapsed="@mixin background-attachment($ba, $important: false) { ... }"><code>@mixin background-attachment($ba, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Background attachment mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$ba</code></th><td data-label="desc"><p>the background-attachment value</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.background-attachment-element {
@include background-attachment(local);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.background-attachment-element {
background-attachment: local;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-background-function-is-background-attachment"><code>is-background-attachment</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-background-mixin-background"><code>background</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-background-mixin-background-repeat"><h3 class="item__heading"><a class="item__name" href="#mixin-background-repeat">background-repeat</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin background-repeat($br, $important: false) {
@if(is-background-repeat($br)) {
background-repeat: $br important($important);
}
@else {
@warn '`background-repeat: #{$br}` is not a valid background-repeat value';
}
}" data-collapsed="@mixin background-repeat($br, $important: false) { ... }"><code>@mixin background-repeat($br, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Background repeat mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$br</code></th><td data-label="desc"><p>the background-repeat value</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.background-repeat-element {
@include background-repeat(no-repeat);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.background-repeat-element {
background-repeat: no-repeat;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-background-function-is-background-repeat"><code>is-background-repeat</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-background-mixin-background"><code>background</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-background-mixin-background-origin"><h3 class="item__heading"><a class="item__name" href="#mixin-background-origin">background-origin</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin background-origin($bo, $important: false) {
@if(is-background-origin-clip($bo)) {
background-origin: $bo important($important);
}
@else {
@warn '`background-origin: #{$bo}` is not a valid background-origin value';
}
}" data-collapsed="@mixin background-origin($bo, $important: false) { ... }"><code>@mixin background-origin($bo, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Background origin mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$bo</code></th><td data-label="desc"><p>the background-origin value</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.background-origin-element {
@include background-origin(border-box);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.background-origin-element {
background-origin: border-box;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-background-function-is-background-origin-clip"><code>is-background-origin-clip</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-background-mixin-background"><code>background</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-background-mixin-background-image"><h3 class="item__heading"><a class="item__name" href="#mixin-background-image">background-image</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin background-image($bi, $important: false) {
@if(is-background-image($bi)) {
background-image: $bi important($important);
}
@else {
@warn '`background-image: #{$bi}` is not a valid background-image value';
}
}" data-collapsed="@mixin background-image($bi, $important: false) { ... }"><code>@mixin background-image($bi, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Background image mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$bi</code></th><td data-label="desc"><p>the background-image value</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.background-image-element {
@include background-image(url('http://www.......'));
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.background-image-element {
background-image: url('http://www.......');
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-background-function-is-background-image"><code>is-background-image</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-background-mixin-background"><code>background</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-background-mixin-background-size"><h3 class="item__heading"><a class="item__name" href="#mixin-background-size">background-size</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin background-size($bs, $important: false) {
@if(is-background-size($bs)) {
background-size: $bs important($important);
}
@else {
@warn '`background-size: #{$bs}` is not a valid background-size value';
}
}" data-collapsed="@mixin background-size($bs, $important: false) { ... }"><code>@mixin background-size($bs, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Background size mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$bs</code></th><td data-label="desc"><p>the background-size value</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.background-size-element {
@include background-size(100% 20px);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.background-size-element {
background-size: 100% 20px;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-background-function-is-background-size"><code>is-background-size</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-background-mixin-background"><code>background</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-background-mixin-background-clip"><h3 class="item__heading"><a class="item__name" href="#mixin-background-clip">background-clip</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin background-clip($bc, $important: false) {
@if(is-background-origin-clip($bc)) {
background-clip: $bc important($important);
}
@else {
@warn '`background-clip: #{$bc}` is not a valid background-clip value';
}
}" data-collapsed="@mixin background-clip($bc, $important: false) { ... }"><code>@mixin background-clip($bc, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Background clip mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$bc</code></th><td data-label="desc"><p>the background-clip value</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.background-clip-element {
@include background-clip(border-box);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.background-clip-element {
background-clip: border-box;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-background-function-is-background-origin-clip"><code>is-background-origin-clip</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-background-mixin-background"><code>background</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-background-mixin-background-position"><h3 class="item__heading"><a class="item__name" href="#mixin-background-position">background-position</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin background-position($bp, $important: false) {
@if(is-background-position($bp)) {
background-position: $bp important($important);
}
@else {
@warn '`background-position: #{$bp}` is not a valid background-position value';
}
}" data-collapsed="@mixin background-position($bp, $important: false) { ... }"><code>@mixin background-position($bp, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Background position mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$bp</code></th><td data-label="desc"><p>the background-position value</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.background-position-element {
@include background-position(top center);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.background-position-element {
background-position: top center;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-background-function-is-background-position"><code>is-background-position</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-background-mixin-background"><code>background</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-background-mixin-background"><h3 class="item__heading"><a class="item__name" href="#mixin-background">background</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin background($options, $options.color: transparent, $options.image: none, $options.position: 0 0, $options.size: auto, $options.repeat: repeat, $options.origin: padding-box, $options.clip: border-box, $options.attachment: scroll, $shorthand: false, $important: false) {
@if is-css-default($options) {
background: $options important($important);
}
@else {
$settings: (color: transparent, image: none, position: 0 0, size: auto, repeat: repeat, origin: padding-box, clip: border-box, attachment: scroll);
@if is-object($options) {
$settings: extend($settings, $options);
}
@else {
$color: nth-value($options, 1);
@if is-defined($color) {
$settings: extend($settings, (color: $color));
}
$image: nth-value($options, 2);
@if is-defined($image) {
$settings: extend($settings, (image: $image));
}
$position: nth-value($options, 3);
@if is-defined($position) {
$settings: extend($settings, (position: $position));
}
$size: nth-value($options, 4);
@if is-defined($size) {
$settings: extend($settings, (size: $size));
}
$repeat: nth-value($options, 5);
@if is-defined($repeat) {
$settings: extend($settings, (repeat: $repeat));
}
$origin: nth-value($options, 6);
@if is-defined($origin) {
$settings: extend($settings, (origin: $origin));
}
$clip: nth-value($options, 7);
@if is-defined($clip) {
$settings: extend($settings, (clip: $clip));
}
$attachment: nth-value($options, 8);
@if is-defined($attachment) {
$settings: extend($settings, (attachment: $attachment));
}
}
$background: ();
$background-color: map-get($settings, color);
@if is-css-color($background-color) {
@if $shorthand == true {
$background: append($background, $background-color);
}
@else {
@include background-color($background-color, $important);
}
}
@else {
@warn '`background-color: #{$background-color}` is not a valid css color';
}
$background-image: map-get($settings, image);
@if is-background-image($background-image) {
@if not is-background-image-mode($background-image) {
$background-image: inspect-url($background-image);
}
@if $shorthand == true {
$background: append($background, $background-image);
}
@else {
@include background-image($background-image, $important);
}
}
@else {
@warn '`background-image: #{$background-image}` is not a valid background-image value';
}
$background-position: map-get($settings, position);
$background-size: map-get($settings, size);
@if is-background-position($background-position) and is-background-size($background-size) {
@if $shorthand == true {
$background: append($background, $background-position + '/' + $background-size);
}
@else {
@include background-position($background-position, $important);
@include background-size($background-size, $important);
}
}
@else {
@warn '`background-position: #{$background-position}` is not a valid background-position value';
@warn '`background-size: #{$background-size}` is not a valid background-size value';
}
$background-repeat: map-get($settings, repeat);
@if is-background-repeat($background-repeat) {
@if $shorthand == true {
$background: append($background, $background-repeat);
}
@else {
@include background-repeat($background-repeat, $important);
}
}
@else {
@warn '`background-repeat: #{$background-repeat}` is not a valid background-repeat value';
}
$background-origin: map-get($settings, origin);
@if is-background-origin-clip($background-origin) {
@if $shorthand == true {
$background: append($background, $background-origin);
}
@else {
@include background-origin($background-origin, $important);
}
}
@else {
@warn '`background-origin: #{$background-origin}` is not a valid background-origin value';
}
$background-clip: map-get($settings, clip);
@if is-background-origin-clip($background-clip) {
@if $shorthand == true {
$background: append($background, $background-clip);
}
@else {
@include background-clip($background-clip, $important);
}
}
@else {
@warn '`background-clip: #{$background-clip}` is not a valid background-clip value';
}
$background-attachment: map-get($settings, attachment);
@if is-background-attachment($background-attachment) {
@if $shorthand == true {
$background: append($background, $background-attachment);
}
@else {
@include background-attachment($background-attachment, $important);
}
}
@else {
@warn '`background-attachment: #{$background-attachment}` is not a valid background-attachment value';
}
@if $shorthand == true {
background: $background important($important);
}
}
}" data-collapsed="@mixin background($options, $options.color: transparent, $options.image: none, $options.position: 0 0, $options.size: auto, $options.repeat: repeat, $options.origin: padding-box, $options.clip: border-box, $options.attachment: scroll, $shorthand: false, $important: false) { ... }"><code>@mixin background($options, $options.color: transparent, $options.image: none, $options.position: 0 0, $options.size: auto, $options.repeat: repeat, $options.origin: padding-box, $options.clip: border-box, $options.attachment: scroll, $shorthand: false, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Background mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$options</code></th><td data-label="desc"><p>the background options</p></td><td data-label="type"><code>Object</code> or <code>Map</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.color</code></th><td data-label="desc"><p>background color</p></td><td data-label="type"><code>Color</code></td><td data-label="default"><code>transparent</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.image</code></th><td data-label="desc"><p>background image</p></td><td data-label="type"><code>Image</code></td><td data-label="default"><code>none</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.position</code></th><td data-label="desc"><p>background position</p></td><td data-label="type"><code>String</code> or <code>Array</code></td><td data-label="default"><code>0 0</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.size</code></th><td data-label="desc"><p>background size</p></td><td data-label="type"><code>String</code></td><td data-label="default"><code>auto</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.repeat</code></th><td data-label="desc"><p>background repeat</p></td><td data-label="type"><code>String</code></td><td data-label="default"><code>repeat</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.origin</code></th><td data-label="desc"><p>background origin</p></td><td data-label="type"><code>String</code></td><td data-label="default"><code>padding-box</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.clip</code></th><td data-label="desc"><p>background clip</p></td><td data-label="type"><code>String</code></td><td data-label="default"><code>border-box</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.attachment</code></th><td data-label="desc"><p>background attachment</p></td><td data-label="type"><code>String</code></td><td data-label="default"><code>scroll</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$shorthand</code></th><td data-label="desc"><p>specifies if shorthand selector will be used or not</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.background-element {
@include background(null url('http://test.com/image.png') null cover no-repeat null null fixed);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.background-element {
background-color: transparent;
background-image: url('http://test.com/image.png');
background-position: 0 0;
background-size: cover;
background-repeat: no-repeat;
background-origin: padding-box;
background-clip: border-box;
background-attachment: fixed;
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Usage Shorthand</p></div><pre class="example__code language-scss"><code>.background-element {
@include background((
image: url('http://test.com/image.png'),
size: cover,
repeat: no-repeat,
attachment: fixed
), true);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output Shorthand</p></div><pre class="example__code language-css"><code>.background-element {
background: transparent url('http://test.com/image.png') 0 0/cover no-repeat padding-box border-box fixed;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-background-mixin-background-color"><code>background-color</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-background-mixin-background-image"><code>background-image</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-background-mixin-background-position"><code>background-position</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-background-mixin-background-size"><code>background-size</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-background-mixin-background-repeat"><code>background-repeat</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-background-mixin-background-origin"><code>background-origin</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-background-mixin-background-clip"><code>background-clip</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-background-mixin-background-attachment"><code>background-attachment</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-css-default"><code>is-css-default</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-is-object"><code>is-object</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-color-function-is-css-color"><code>is-css-color</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-background-function-is-background-image"><code>is-background-image</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-background-function-is-background-image-mode"><code>is-background-image-mode</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-url-function-inspect-url"><code>inspect-url</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-background-function-is-background-position"><code>is-background-position</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-background-function-is-background-size"><code>is-background-size</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-background-function-is-background-repeat"><code>is-background-repeat</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-background-function-is-background-attachment"><code>is-background-attachment</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-background-function-is-background-origin-clip"><code>is-background-origin-clip</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section><section class="main__sub-section" id="mixins-background-variable"><h2 class="main__heading--secondary"><div class="container">variables</div></h2><section class="main__item container item" id="mixins-background-variable-background-attachment-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-background-attachment-modes">background-attachment-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$background-attachment-modes: array-concat((scroll, fixed, local), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Background attachment modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-background-function-is-background-attachment"><code>is-background-attachment</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-background-variable-background-image-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-background-image-modes">background-image-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$background-image-modes: array-concat((none), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Background image modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-background-function-is-background-image-mode"><code>is-background-image-mode</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-background-variable-background-origin-clip-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-background-origin-clip-modes">background-origin-clip-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$background-origin-clip-modes: array-concat((border-box, padding-box, content-box), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Background origin and background clip modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-background-function-is-background-origin-clip"><code>is-background-origin-clip</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-background-variable-background-position-horizontal-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-background-position-horizontal-modes">background-position-horizontal-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$background-position-horizontal-modes: array-concat((left, center, right), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Background position horizontal modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-background-function-is-background-position"><code>is-background-position</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-background-variable-background-repeat-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-background-repeat-modes">background-repeat-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$background-repeat-modes: array-concat((repeat, repeat-x, repeat-y, no-repeat), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Background repeat modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-background-function-is-background-repeat"><code>is-background-repeat</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-background-variable-background-size-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-background-size-modes">background-size-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$background-size-modes: array-concat((auto, cover, contain), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Background size modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-background-function-is-background-size"><code>is-background-size</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-background-variable-background-position-vertical-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-background-position-vertical-modes">background-position-vertical-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$background-position-vertical-modes: array-concat((top, center, bottom), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Background position vertical modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-background-function-is-background-position"><code>is-background-position</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section></section><section class="main__section"><h1 class="main__heading" id="mixins-border"><div class="container">Mixins - Border</div></h1><section class="main__sub-section" id="mixins-border-function"><h2 class="main__heading--secondary"><div class="container">functions</div></h2><section class="main__item container item" id="mixins-border-function-is-border-radius"><h3 class="item__heading"><a class="item__name" href="#function-is-border-radius">is-border-radius</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-border-radius($br) {
@return is-defined($br) and (is-size($br) or is-percentage($br) or array-contains($css-default-modes, $br));
}" data-collapsed="@function is-border-radius($br) { ... }"><code>@function is-border-radius($br) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is border radius value</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$br</code></th><td data-label="desc"><p>the border-radius value</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is border-radius value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-size"><code>is-size</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-percentage"><code>is-percentage</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#types-common-variable-css-default-modes"><code>css-default-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border-radius"><code>border-radius</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-border-function-is-border-style"><h3 class="item__heading"><a class="item__name" href="#function-is-border-style">is-border-style</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-border-style($bs) {
@return is-defined($bs) and array-contains($border-styles, $bs);
}" data-collapsed="@function is-border-style($bs) { ... }"><code>@function is-border-style($bs) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is border style mode</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$bs</code></th><td data-label="desc"><p>the border-style mode</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is border-style value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-border-variable-border-styles"><code>border-styles</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border-style"><code>border-style</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border"><code>border</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-border-function-is-border-mode"><h3 class="item__heading"><a class="item__name" href="#function-is-border-mode">is-border-mode</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-border-mode($bm) {
@return is-defined($bm) and array-contains($border-modes, $bm);
}" data-collapsed="@function is-border-mode($bm) { ... }"><code>@function is-border-mode($bm) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is border mode (none, initial, inherit)</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$bm</code></th><td data-label="desc"><p>the border mode</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is border mode</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-border-variable-border-modes"><code>border-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border"><code>border</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section><section class="main__sub-section" id="mixins-border-mixin"><h2 class="main__heading--secondary"><div class="container">mixins</div></h2><section class="main__item container item" id="mixins-border-mixin-border-color"><h3 class="item__heading"><a class="item__name" href="#mixin-border-color">border-color</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin border-color($color: transparent, $border-selector: border, $important: false) {
$border-color: $color;
@if is-css-color($border-color) {
#{$border-selector}-color: $border-color important($important);
}
@else {
@warn '`border-color: #{$border-color}` is not a valid css color';
}
}" data-collapsed="@mixin border-color($color: transparent, $border-selector: border, $important: false) { ... }"><code>@mixin border-color($color: transparent, $border-selector: border, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Border color mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$color</code></th><td data-label="desc"><p>border-color</p></td><td data-label="type"><code>Color</code></td><td data-label="default"><code>transparent</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$border-selector</code></th><td data-label="desc"><p>border selector to use</p></td><td data-label="type"><code>String</code></td><td data-label="default"><code>border</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.border-color-element {
@include border-color(red);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.border-color-element {
border-color: red;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-color-function-is-css-color"><code>is-css-color</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border-top-color"><code>border-top-color</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border-right-color"><code>border-right-color</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border-bottom-color"><code>border-bottom-color</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border-left-color"><code>border-left-color</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border"><code>border</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/pr_border-color.asp">W3Schools border color docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-border-mixin-border-width"><h3 class="item__heading"><a class="item__name" href="#mixin-border-width">border-width</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin border-width($width: 0, $border-selector: border, $important: false) {
$border-width: $width;
@if is-size($border-width) {
#{$border-selector}-width: $border-width important($important);
}
@else {
@warn '`border-width: #{$border-width}` is not a valid size';
}
}" data-collapsed="@mixin border-width($width: 0, $border-selector: border, $important: false) { ... }"><code>@mixin border-width($width: 0, $border-selector: border, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Border width mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$width</code></th><td data-label="desc"><p>border-width</p></td><td data-label="type"><code>Size</code></td><td data-label="default"><code>0</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$border-selector</code></th><td data-label="desc"><p>border-selector will be used as property name</p></td><td data-label="type"><code>String</code></td><td data-label="default"><code>border</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.border-width-element {
@include border-width(1px);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.border-width-element {
border-width: 1px;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-size"><code>is-size</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border-top-width"><code>border-top-width</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border-right-width"><code>border-right-width</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border-bottom-width"><code>border-bottom-width</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border-left-width"><code>border-left-width</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border"><code>border</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/pr_border-width.asp">W3Schools border width docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-border-mixin-border-style"><h3 class="item__heading"><a class="item__name" href="#mixin-border-style">border-style</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin border-style($style: solid, $border-selector: border, $important: false) {
$border-style: $style;
@if is-border-style($border-style) {
#{$border-selector}-style: $border-style important($important);
}
@else {
@warn '`border-style: #{$border-style}` is not a valid border-style value';
}
}" data-collapsed="@mixin border-style($style: solid, $border-selector: border, $important: false) { ... }"><code>@mixin border-style($style: solid, $border-selector: border, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Border style mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$style</code></th><td data-label="desc"><p>border-style</p></td><td data-label="type"><code>String</code></td><td data-label="default"><code>solid</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$border-selector</code></th><td data-label="desc"><p>border-selector, will be used as selector</p></td><td data-label="type"><code>String</code></td><td data-label="default"><code>border</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.border-style-element {
@include border-style(dashed);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.border-style-element {
border-style: dashed;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-border-function-is-border-style"><code>is-border-style</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border-top-style"><code>border-top-style</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border-right-style"><code>border-right-style</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border-bottom-style"><code>border-bottom-style</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border-left-style"><code>border-left-style</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border"><code>border</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/pr_border-style.asp">W3Schools border style docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-border-mixin-border-top-color"><h3 class="item__heading"><a class="item__name" href="#mixin-border-top-color">border-top-color</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin border-top-color() {
@include border-color($color, border-top, $important);
}" data-collapsed="@mixin border-top-color() { ... }"><code>@mixin border-top-color() { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Border top color mixin</p></div><h3 class="item__sub-heading">Parameters</h3><p>None.</p><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.border-top-color-element {
@include border-top-color(red);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.border-top-color-element {
border-top-color: red;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border-color"><code>border-color</code></a></li></ul><h3 class="item__sub-heading">See</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-border-color"><code>border-color</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-border-mixin-border-top-width"><h3 class="item__heading"><a class="item__name" href="#mixin-border-top-width">border-top-width</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin border-top-width($width: 0, $important: false) {
@include border-width($width, border-top, $important);
}" data-collapsed="@mixin border-top-width($width: 0, $important: false) { ... }"><code>@mixin border-top-width($width: 0, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Border top width mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$width</code></th><td data-label="desc"><p>border-width</p></td><td data-label="type"><code>Size</code></td><td data-label="default"><code>0</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.border-top-width-element {
@include border-top-width(1px);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.border-top-width-element {
border-top-width: 1px;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border-width"><code>border-width</code></a></li></ul><h3 class="item__sub-heading">See</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-border-width"><code>border-width</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-border-mixin-border-right-color"><h3 class="item__heading"><a class="item__name" href="#mixin-border-right-color">border-right-color</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin border-right-color() {
@include border-color($color, border-right, $important);
}" data-collapsed="@mixin border-right-color() { ... }"><code>@mixin border-right-color() { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Border right color mixin</p></div><h3 class="item__sub-heading">Parameters</h3><p>None.</p><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.border-right-color-element {
@include border-right-color(red);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.border-right-color-element {
border-right-color: red;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border-color"><code>border-color</code></a></li></ul><h3 class="item__sub-heading">See</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-border-color"><code>border-color</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-border-mixin-border-top-style"><h3 class="item__heading"><a class="item__name" href="#mixin-border-top-style">border-top-style</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin border-top-style($style: solid, $important: false) {
@include border-style($style, border-top, $important);
}" data-collapsed="@mixin border-top-style($style: solid, $important: false) { ... }"><code>@mixin border-top-style($style: solid, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Border top style mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$style</code></th><td data-label="desc"><p>border-style</p></td><td data-label="type"><code>String</code></td><td data-label="default"><code>solid</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.border-top-style-element {
@include border-top-style(dashed);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.border-top-style-element {
border-top-style: dashed;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border-style"><code>border-style</code></a></li></ul><h3 class="item__sub-heading">See</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-border-style"><code>border-style</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-border-mixin-border"><h3 class="item__heading"><a class="item__name" href="#mixin-border">border</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin border($options, $options.size: 0, $options.style: solid, $options.color: transparent, $options.radius: null, $border-selector: border, $shorthand: true, $important: false) {
@if is-border-mode($options) {
#{$border-selector}: $options;
}
@else {
$settings: (size: 0, style: solid, color: transparent, radius: null);
@if is-object($options) {
$settings: extend($settings, $options);
}
@else {
$size: nth-value($options, 1);
@if is-defined($size) {
$settings: extend($settings, (size: $size));
}
$style: nth-value($options, 2);
@if is-defined($style) {
$settings: extend($settings, (style: $style));
}
$color: nth-value($options, 3);
@if is-defined($color) {
$settings: extend($settings, (color: $color));
}
$radius: nth-value($options, 4);
@if is-defined($radius) {
$settings: extend($settings, (radius: $radius));
}
}
$border: ();
$border-width: get($settings, size);
@if $shorthand == false {
@include border-width($border-width, $border-selector, $important);
}
@else {
@if is-size($border-width) {
$border: append($border, $border-width);
}
@else {
@warn '`border-width: #{$border-width}` is not a valid size';
}
}
$border-style: get($settings, style);
@if $shorthand == false {
@include border-style($border-style, $border-selector, $important);
}
@else {
@if is-border-style($border-style) {
$border: append($border, $border-style);
}
@else {
@warn '`border-style: #{$border-style}` is not a valid border-style value';
}
}
$border-color: get($settings, color);
@if $shorthand == false {
@include border-color($border-color, $border-selector, $important);
}
@else {
@if is-css-color($border-color) {
$border: append($border, $border-color);
}
@else {
@warn '`border-color: #{$border-color}` is not a valid css color';
}
}
@if $shorthand == true {
#{$border-selector}: $border important($important);
}
$border-radius: get($settings, radius);
@if is-defined($border-radius) {
@include border-radius($border-radius, false, $important);
}
}
}" data-collapsed="@mixin border($options, $options.size: 0, $options.style: solid, $options.color: transparent, $options.radius: null, $border-selector: border, $shorthand: true, $important: false) { ... }"><code>@mixin border($options, $options.size: 0, $options.style: solid, $options.color: transparent, $options.radius: null, $border-selector: border, $shorthand: true, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Border mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$options</code></th><td data-label="desc"><p>the border options</p></td><td data-label="type"><code>String</code> or <code>Object</code> or <code>Map</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.size</code></th><td data-label="desc"><p>border-width</p></td><td data-label="type"><code>Size</code></td><td data-label="default"><code>0</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.style</code></th><td data-label="desc"><p>border-style</p></td><td data-label="type"><code>String</code></td><td data-label="default"><code>solid</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.color</code></th><td data-label="desc"><p>border-color</p></td><td data-label="type"><code>Color</code></td><td data-label="default"><code>transparent</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.radius</code></th><td data-label="desc"><p>border-radius</p></td><td data-label="type"><code>Size</code></td><td data-label="default"><code>null</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$border-selector</code></th><td data-label="desc"><p>used for the border selector</p></td><td data-label="type"><code>String</code></td><td data-label="default"><code>border</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$shorthand</code></th><td data-label="desc"><p>if true, renders the shorthand form of border selector</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>true</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.border-element {
@include border(1px null red);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.border-element {
border: 1px solid red;
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Usage - with object parameter</p></div><pre class="example__code language-scss"><code>.border-element {
@include border((
size: 2px,
color: black
);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output - with object parameter</p></div><pre class="example__code language-css"><code>.border-element {
border: 2px solid black;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border-width"><code>border-width</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border-style"><code>border-style</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border-color"><code>border-color</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border-radius"><code>border-radius</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-border-function-is-border-mode"><code>is-border-mode</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-is-object"><code>is-object</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-size"><code>is-size</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-border-function-is-border-style"><code>is-border-style</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-color-function-is-css-color"><code>is-css-color</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-get"><code>get</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border-top"><code>border-top</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border-right"><code>border-right</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border-bottom"><code>border-bottom</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border-left"><code>border-left</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-common-mixin-hidden"><code>hidden</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/pr_border.asp">W3Schools border docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-border-mixin-border-right-width"><h3 class="item__heading"><a class="item__name" href="#mixin-border-right-width">border-right-width</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin border-right-width($width: 0, $important: false) {
@include border-width($width, border-right, $important);
}" data-collapsed="@mixin border-right-width($width: 0, $important: false) { ... }"><code>@mixin border-right-width($width: 0, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Border right width mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$width</code></th><td data-label="desc"><p>border-width</p></td><td data-label="type"><code>Size</code></td><td data-label="default"><code>0</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.border-right-width-element {
@include border-right-width(1px);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.border-right-width-element {
border-right-width: 1px;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border-width"><code>border-width</code></a></li></ul><h3 class="item__sub-heading">See</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-border-width"><code>border-width</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-border-mixin-border-bottom-color"><h3 class="item__heading"><a class="item__name" href="#mixin-border-bottom-color">border-bottom-color</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin border-bottom-color() {
@include border-color($color, border-bottom, $important);
}" data-collapsed="@mixin border-bottom-color() { ... }"><code>@mixin border-bottom-color() { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Border bottom color mixin</p></div><h3 class="item__sub-heading">Parameters</h3><p>None.</p><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.border-bottom-color-element {
@include border-bottom-color(red);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.border-bottom-color-element {
border-bottom-color: red;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border-color"><code>border-color</code></a></li></ul><h3 class="item__sub-heading">See</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-border-color"><code>border-color</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-border-mixin-border-right-style"><h3 class="item__heading"><a class="item__name" href="#mixin-border-right-style">border-right-style</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin border-right-style($style: solid, $important: false) {
@include border-style($style, border-right, $important);
}" data-collapsed="@mixin border-right-style($style: solid, $important: false) { ... }"><code>@mixin border-right-style($style: solid, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Border right style mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$style</code></th><td data-label="desc"><p>border-style</p></td><td data-label="type"><code>String</code></td><td data-label="default"><code>solid</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.border-right-style-element {
@include border-right-style(dashed);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.border-right-style-element {
border-right-style: dashed;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border-style"><code>border-style</code></a></li></ul><h3 class="item__sub-heading">See</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-border-style"><code>border-style</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-border-mixin-border-radius"><h3 class="item__heading"><a class="item__name" href="#mixin-border-radius">border-radius</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin border-radius($br: 0, $shorthand: false, $important: false) {
$border-radius: ();
$border-top-left-radius: nth-value($br, 1, 0);
@if is-defined($border-top-left-radius) {
@if is-border-radius($border-top-left-radius) {
@if $shorthand==true {
$border-radius: append($border-radius, $border-top-left-radius);
}
@else {
@include prefixer(border-top-left-radius, $border-top-left-radius, null, $important);
}
}
@else {
@warn '`border-top-left-radius: #{$border-top-left-radius}` is not a valid radius value';
}
}
$border-top-right-radius: nth-value($br, 2, $border-top-left-radius);
@if is-defined($border-top-right-radius) {
@if is-border-radius($border-top-right-radius) {
@if $shorthand==true {
$border-radius: append($border-radius, $border-top-right-radius);
}
@else {
@include prefixer(border-top-right-radius, $border-top-right-radius, null, $important);
}
}
@else {
@warn '`border-top-right-radius: #{$border-top-right-radius}` is not a valid radius value';
}
}
$border-bottom-right-radius: nth-value($br, 3, $border-top-left-radius);
@if is-defined($border-bottom-right-radius) {
@if is-border-radius($border-bottom-right-radius) {
@if $shorthand==true {
$border-radius: append($border-radius, $border-bottom-right-radius);
}
@else {
@include prefixer(border-bottom-right-radius, $border-bottom-right-radius, null, $important);
}
}
@else {
@warn '`border-bottom-right-radius: #{$border-bottom-right-radius}` is not a valid radius value';
}
}
$border-bottom-left-radius: nth-value($br, 4, $border-top-right-radius);
@if is-defined($border-bottom-left-radius) {
@if is-border-radius($border-bottom-left-radius) {
@if $shorthand==true {
$border-radius: append($border-radius, $border-bottom-left-radius);
}
@else {
@include prefixer(border-bottom-left-radius, $border-bottom-left-radius, null, $important);
}
}
@else {
@warn '`border-bottom-left-radius: #{$border-bottom-left-radius}` is not a valid radius value';
}
}
@if $shorthand==true {
@include prefixer(border-radius, $border-radius, null, $important);
}
}" data-collapsed="@mixin border-radius($br: 0, $shorthand: false, $important: false) { ... }"><code>@mixin border-radius($br: 0, $shorthand: false, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Border radius mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$br</code></th><td data-label="desc"><p>the border radius</p></td><td data-label="type"><code>Size</code> or <code>Array</code> or <code>List</code></td><td data-label="default"><code>0</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$shorthand</code></th><td data-label="desc"><p>if true, uses the shorthand selector</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage - One value</p></div><pre class="example__code language-scss"><code>.border-radius-element {
@include border-radius(0);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output - One value</p></div><pre class="example__code language-css"><code>.border-radius-element {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Usage - Two values</p></div><pre class="example__code language-scss"><code>.border-radius-element {
@include border-radius(0 50%);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output - Two values</p></div><pre class="example__code language-css"><code>.border-radius-element {
border-top-left-radius: 0;
border-top-right-radius: 50%;
border-bottom-right-radius: 0;
border-bottom-left-radius: 50%;
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Usage - Three values</p></div><pre class="example__code language-scss"><code>.border-radius-element {
@include border-radius(10px 50% 30px);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output - Three values</p></div><pre class="example__code language-css"><code>.border-radius-element {
border-top-left-radius: 10px;
border-top-right-radius: 50%;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 50%;
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Usage - Four values</p></div><pre class="example__code language-scss"><code>.border-radius-element {
@include border-radius(10px 50% 30px 20%);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output - Four values</p></div><pre class="example__code language-css"><code>.border-radius-element {
border-top-left-radius: 10px;
border-top-right-radius: 50%;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 20%;
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Usage - Shorthand</p></div><pre class="example__code language-scss"><code>.border-radius-element {
@include border-radius(10px 50% 30px 20%, true);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output - Shorthand</p></div><pre class="example__code language-css"><code>.border-radius-element {
border-radius: 10px 50% 30px 20%;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-border-function-is-border-radius"><code>is-border-radius</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-common-mixin-prefixer"><code>prefixer</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border-top-radius"><code>border-top-radius</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border-right-radius"><code>border-right-radius</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border-bottom-radius"><code>border-bottom-radius</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border-left-radius"><code>border-left-radius</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border"><code>border</code></a></li></ul><h3 class="item__sub-heading">TODO's</h3><ul class="list-unstyled"><li><p>manage fractions (e.g. 2em 1em 4em / 0.5em 0.2em)</p></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/css3_pr_border-radius.asp">W3Schools border-radius docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-border-mixin-border-bottom-width"><h3 class="item__heading"><a class="item__name" href="#mixin-border-bottom-width">border-bottom-width</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin border-bottom-width($width: 0, $important: false) {
@include border-width($width, border-bottom, $important);
}" data-collapsed="@mixin border-bottom-width($width: 0, $important: false) { ... }"><code>@mixin border-bottom-width($width: 0, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Border bottom width mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$width</code></th><td data-label="desc"><p>border-width</p></td><td data-label="type"><code>Size</code></td><td data-label="default"><code>0</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.border-bottom-width-element {
@include border-bottom-width(1px);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.border-bottom-width-element {
border-bottom-width: 1px;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border-width"><code>border-width</code></a></li></ul><h3 class="item__sub-heading">See</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-border-width"><code>border-width</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-border-mixin-border-left-color"><h3 class="item__heading"><a class="item__name" href="#mixin-border-left-color">border-left-color</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin border-left-color() {
@include border-color($color, border-left, $important);
}" data-collapsed="@mixin border-left-color() { ... }"><code>@mixin border-left-color() { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Border left color mixin</p></div><h3 class="item__sub-heading">Parameters</h3><p>None.</p><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.border-left-color-element {
@include border-left-color(red);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.border-left-color-element {
border-left-color: red;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border-color"><code>border-color</code></a></li></ul><h3 class="item__sub-heading">See</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-border-color"><code>border-color</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-border-mixin-border-bottom-style"><h3 class="item__heading"><a class="item__name" href="#mixin-border-bottom-style">border-bottom-style</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin border-bottom-style($style: solid, $important: false) {
@include border-style($style, border-bottom, $important);
}" data-collapsed="@mixin border-bottom-style($style: solid, $important: false) { ... }"><code>@mixin border-bottom-style($style: solid, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Border bottom style mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$style</code></th><td data-label="desc"><p>border-style</p></td><td data-label="type"><code>String</code></td><td data-label="default"><code>solid</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.border-bottom-style-element {
@include border-bottom-style(dashed);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.border-bottom-style-element {
border-bottom-style: dashed;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border-style"><code>border-style</code></a></li></ul><h3 class="item__sub-heading">See</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-border-style"><code>border-style</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-border-mixin-border-left-width"><h3 class="item__heading"><a class="item__name" href="#mixin-border-left-width">border-left-width</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin border-left-width($width: 0, $important: false) {
@include border-width($width, border-left, $important);
}" data-collapsed="@mixin border-left-width($width: 0, $important: false) { ... }"><code>@mixin border-left-width($width: 0, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Border left width mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$width</code></th><td data-label="desc"><p>border-width</p></td><td data-label="type"><code>Size</code></td><td data-label="default"><code>0</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.border-left-width-element {
@include border-left-width(1px);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.border-left-width-element {
border-left-width: 1px;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border-width"><code>border-width</code></a></li></ul><h3 class="item__sub-heading">See</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-border-width"><code>border-width</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-border-mixin-border-left-style"><h3 class="item__heading"><a class="item__name" href="#mixin-border-left-style">border-left-style</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin border-left-style($style: solid, $important: false) {
@include border-style($style, border-left, $important);
}" data-collapsed="@mixin border-left-style($style: solid, $important: false) { ... }"><code>@mixin border-left-style($style: solid, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Border left style mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$style</code></th><td data-label="desc"><p>border-style</p></td><td data-label="type"><code>String</code></td><td data-label="default"><code>solid</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.border-left-style-element {
@include border-left-style(dashed);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.border-left-style-element {
border-left-style: dashed;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border-style"><code>border-style</code></a></li></ul><h3 class="item__sub-heading">See</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-border-style"><code>border-style</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-border-mixin-border-top"><h3 class="item__heading"><a class="item__name" href="#mixin-border-top">border-top</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin border-top($options, $important: false) {
@include border($options, border-top, $important);
}" data-collapsed="@mixin border-top($options, $important: false) { ... }"><code>@mixin border-top($options, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Border top mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$options</code></th><td data-label="desc"><p>the border options</p></td><td data-label="type"><code>String</code> or <code>Object</code> or <code>Map</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.border-element {
@include border-top(1px null red);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.border-element {
border-top: 1px solid red;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border"><code>border</code></a></li></ul><h3 class="item__sub-heading">See</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-border"><code>border</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-border-mixin-border-top-radius"><h3 class="item__heading"><a class="item__name" href="#mixin-border-top-radius">border-top-radius</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin border-top-radius($br: 0, $important: false) {
@include border-radius($br $br null null, false, $important);
}" data-collapsed="@mixin border-top-radius($br: 0, $important: false) { ... }"><code>@mixin border-top-radius($br: 0, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Border top radius mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$br</code></th><td data-label="desc"><p>the border radius</p></td><td data-label="type"><code>Size</code></td><td data-label="default"><code>0</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.border-radius-element {
@include border-top-radius(15px);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.border-radius-element {
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border-radius"><code>border-radius</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/css3_pr_border-radius.asp">W3Schools border-radius docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-border-mixin-border-right"><h3 class="item__heading"><a class="item__name" href="#mixin-border-right">border-right</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin border-right($options, $important: false) {
@include border($options, border-right, $important);
}" data-collapsed="@mixin border-right($options, $important: false) { ... }"><code>@mixin border-right($options, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Border right mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$options</code></th><td data-label="desc"><p>the border options</p></td><td data-label="type"><code>String</code> or <code>Object</code> or <code>Map</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.border-element {
@include border-right(1px null red);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.border-element {
border-right: 1px solid red;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border"><code>border</code></a></li></ul><h3 class="item__sub-heading">See</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-border"><code>border</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-border-mixin-border-right-radius"><h3 class="item__heading"><a class="item__name" href="#mixin-border-right-radius">border-right-radius</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin border-right-radius($br: 0, $important: false) {
@include border-radius(null $br null $br, false, $important);
}" data-collapsed="@mixin border-right-radius($br: 0, $important: false) { ... }"><code>@mixin border-right-radius($br: 0, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Border right radius mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$br</code></th><td data-label="desc"><p>the border radius</p></td><td data-label="type"><code>Size</code></td><td data-label="default"><code>0</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.border-radius-element {
@include border-right-radius(15px);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.border-radius-element {
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border-radius"><code>border-radius</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/css3_pr_border-radius.asp">W3Schools border-radius docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-border-mixin-border-bottom"><h3 class="item__heading"><a class="item__name" href="#mixin-border-bottom">border-bottom</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin border-bottom($options, $important: false) {
@include border($options, border-bottom, $important);
}" data-collapsed="@mixin border-bottom($options, $important: false) { ... }"><code>@mixin border-bottom($options, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Border bottom mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$options</code></th><td data-label="desc"><p>the border options</p></td><td data-label="type"><code>String</code> or <code>Object</code> or <code>Map</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.border-element {
@include border-bottom(1px null red);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.border-element {
border-bottom: 1px solid red;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border"><code>border</code></a></li></ul><h3 class="item__sub-heading">See</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-border"><code>border</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-border-mixin-border-bottom-radius"><h3 class="item__heading"><a class="item__name" href="#mixin-border-bottom-radius">border-bottom-radius</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin border-bottom-radius($br: 0, $important: false) {
@include border-radius(null null $br $br, false, $important);
}" data-collapsed="@mixin border-bottom-radius($br: 0, $important: false) { ... }"><code>@mixin border-bottom-radius($br: 0, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Border bottom radius mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$br</code></th><td data-label="desc"><p>the border radius</p></td><td data-label="type"><code>Size</code></td><td data-label="default"><code>0</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.border-radius-element {
@include border-bottom-radius(15px);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.border-radius-element {
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border-radius"><code>border-radius</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/css3_pr_border-radius.asp">W3Schools border-radius docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-border-mixin-border-left"><h3 class="item__heading"><a class="item__name" href="#mixin-border-left">border-left</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin border-left($options, $important: false) {
@include border($options, border-left, $important);
}" data-collapsed="@mixin border-left($options, $important: false) { ... }"><code>@mixin border-left($options, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Border left mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$options</code></th><td data-label="desc"><p>the border options</p></td><td data-label="type"><code>String</code> or <code>Object</code> or <code>Map</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.border-element {
@include border-left(1px null red);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.border-element {
border-left: 1px solid red;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border"><code>border</code></a></li></ul><h3 class="item__sub-heading">See</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-border"><code>border</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-border-mixin-border-left-radius"><h3 class="item__heading"><a class="item__name" href="#mixin-border-left-radius">border-left-radius</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin border-left-radius($br: 0, $important: false) {
@include border-radius($br null null $br, false, $important);
}" data-collapsed="@mixin border-left-radius($br: 0, $important: false) { ... }"><code>@mixin border-left-radius($br: 0, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Border left radius mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$br</code></th><td data-label="desc"><p>the border radius</p></td><td data-label="type"><code>Size</code></td><td data-label="default"><code>0</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.border-radius-element {
@include border-left-radius(15px);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.border-radius-element {
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border-radius"><code>border-radius</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/css3_pr_border-radius.asp">W3Schools border-radius docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section><section class="main__sub-section" id="mixins-border-variable"><h2 class="main__heading--secondary"><div class="container">variables</div></h2><section class="main__item container item" id="mixins-border-variable-border-styles"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-border-styles">border-styles</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$border-styles: array-concat((none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Border style modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-border-function-is-border-style"><code>is-border-style</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-border-variable-border-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-border-modes">border-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$border-modes: array-concat((none), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Border modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-border-function-is-border-mode"><code>is-border-mode</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section></section><section class="main__section"><h1 class="main__heading" id="mixins-box"><div class="container">Mixins - Box</div></h1><section class="main__sub-section" id="mixins-box-mixin"><h2 class="main__heading--secondary"><div class="container">mixins</div></h2><section class="main__item container item" id="mixins-box-mixin-reset-inline-block"><h3 class="item__heading"><a class="item__name" href="#mixin-reset-inline-block">reset-inline-block</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin reset-inline-block() {
@include letter-spacing(-.295rem);
@include line-height(0);
text-rendering: optimizeSpeed;
> * {
@include letter-spacing(normal);
@include line-height(initial);
}
}" data-collapsed="@mixin reset-inline-block() { ... }"><code>@mixin reset-inline-block() { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Reset inline-block mixin (useful to fix those annoying auto margins between inline-block children elements</p></div><h3 class="item__sub-heading">Parameters</h3><p>None.</p><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-letter-spacing"><code>letter-spacing</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-line-height"><code>line-height</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-letter-spacing"><code>letter-spacing</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-line-height"><code>line-height</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#grid-system-columns-mixin-columns"><code>columns</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-display"><code>display</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-box-mixin-display"><h3 class="item__heading"><a class="item__name" href="#mixin-display">display</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin display($dm, $auto-reset-inline-block: false, $important: false) {
@if is-display($dm) {
@if $dm == flex {
display: -webkit-box important($important);
display: -webkit-flex important($important);
display: -moz-box important($important);
display: -ms-flexbox important($important);
}
@if $dm == inline-flex {
display: -webkit-inline-box important($important);
display: -webkit-inline-flex important($important);
display: -moz-inline-box important($important);
display: -ms-inline-flexbox important($important);
}
@if $dm == grid {
display: -ms-grid important($important);
}
@if $dm == inline-grid {
display: -ms-inline-grid important($important);
}
display: $dm important($important);
@if $dm == inline-block and $auto-reset-inline-block == true {
@include reset-inline-block;
}
}
@else {
@warn '`display: #{$dm}` is not a valid display mode';
}
}" data-collapsed="@mixin display($dm, $auto-reset-inline-block: false, $important: false) { ... }"><code>@mixin display($dm, $auto-reset-inline-block: false, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Display mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$dm</code></th><td data-label="desc"><p>the display mode</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$auto-reset-inline-block</code></th><td data-label="desc"><p>auto resets inline block</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.display-element {
@include display(block);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.display-element {
display: block;
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Usage inline-block</p></div><pre class="example__code language-scss"><code>.display-element {
@include display(inline-block);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output inline-block</p></div><pre class="example__code language-css"><code>.display-element {
display: inline-block;
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Usage inline-block with auto reset</p></div><pre class="example__code language-scss"><code>.display-element {
@include display(inline-block, true);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output inline-block with auto reset</p></div><pre class="example__code language-css"><code>.display-element {
display: inline-block;
letter-spacing: -.3em;
line-height: 0;
text-rendering: optimizeSpeed;
> * {
letter-spacing: initial;
line-height: initial;
}
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-reset-inline-block"><code>reset-inline-block</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-display"><code>is-display</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#grid-system-columns-mixin-columns"><code>columns</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-aspect-ratio"><code>aspect-ratio</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-ellipsis"><code>ellipsis</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-ellipsis"><code>ellipsis</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-box-mixin-box-sizing"><h3 class="item__heading"><a class="item__name" href="#mixin-box-sizing">box-sizing</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin box-sizing($bs, $important: false) {
@if is-box-sizing($bs) {
box-sizing: $bs important($important);
}
@else {
@warn '`box-sizing: #{$bs}` is not a valid box-sizing mode';
}
}" data-collapsed="@mixin box-sizing($bs, $important: false) { ... }"><code>@mixin box-sizing($bs, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Box sizing mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$bs</code></th><td data-label="desc"><p>the box sizing mode</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.box-sizing-element {
@include box-sizing(content-box);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.box-sizing-element {
box-sizing: content-box;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-sizing"><code>is-box-sizing</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-box-mixin-box-bounds"><h3 class="item__heading"><a class="item__name" href="#mixin-box-bounds">box-bounds</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin box-bounds($options, $options.min-width: null, $options.min-height: null, $options.max-width: null, $options.max-height: null, $important: false) {
$settings: (min-width: null, min-height: null, max-width: null, max-height: null);
@if is-object($options) {
$settings: extend($settings, $options);
}
@else {
$min-width: nth-value($options, 1);
@if is-defined($min-width) {
$settings: extend($settings, (min-width: $min-width));
}
$min-height: nth-value($options, 2);
@if is-defined($min-height) {
$settings: extend($settings, (min-height: $min-height));
}
$max-width: nth-value($options, 3);
@if is-defined($max-width) {
$settings: extend($settings, (max-width: $max-width));
}
$max-height: nth-value($options, 4);
@if is-defined($max-height) {
$settings: extend($settings, (max-height: $max-height));
}
}
$min-width: map-get($settings, min-width);
@if is-defined($min-width) {
@if is-box-bound-size($min-width) {
min-width: $min-width important($important);
}
@else {
@warn '`min-width: #{$min-width}` is not a valid size';
}
}
$min-height: map-get($settings, min-height);
@if is-defined($min-height) {
@if is-box-bound-size($min-height) {
min-height: $min-height important($important);
}
@else {
@warn '`min-height: #{$min-height}` is not a valid size';
}
}
$max-width: map-get($settings, max-width);
@if is-defined($max-width) {
@if is-box-bound-size($max-width) {
max-width: $max-width important($important);
}
@else {
@warn '`max-width: #{$max-width}` is not a valid size';
}
}
$max-height: map-get($settings, max-height);
@if is-defined($max-height) {
@if is-box-bound-size($max-height) {
max-height: $max-height important($important);
}
@else {
@warn '`max-height: #{$max-height}` is not a valid size';
}
}
}" data-collapsed="@mixin box-bounds($options, $options.min-width: null, $options.min-height: null, $options.max-width: null, $options.max-height: null, $important: false) { ... }"><code>@mixin box-bounds($options, $options.min-width: null, $options.min-height: null, $options.max-width: null, $options.max-height: null, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Box bounds mixin<br>useful to set min/max width & height in one shot</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$options</code></th><td data-label="desc"><p>the bounds options</p></td><td data-label="type"><code>Object</code> or <code>Map</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.min-width</code></th><td data-label="desc"><p>the min width bound</p></td><td data-label="type"><code>Size</code> or <code>Percentage</code></td><td data-label="default"><code>null</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.min-height</code></th><td data-label="desc"><p>the min height bound</p></td><td data-label="type"><code>Size</code> or <code>Percentage</code></td><td data-label="default"><code>null</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.max-width</code></th><td data-label="desc"><p>the max width bound</p></td><td data-label="type"><code>Size</code> or <code>Percentage</code></td><td data-label="default"><code>null</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.max-height</code></th><td data-label="desc"><p>the max height bound</p></td><td data-label="type"><code>Size</code> or <code>Percentage</code></td><td data-label="default"><code>null</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.bounds-element {
@include box-bounds(10% null null 610px);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.bounds-element {
min-width: 10%;
max-height: 610px
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-is-object"><code>is-object</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-bound-size"><code>is-box-bound-size</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-bound-size"><code>is-box-bound-size</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-bound-size"><code>is-box-bound-size</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-bound-size"><code>is-box-bound-size</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#grid-system-columns-mixin-columns"><code>columns</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-box-size"><code>box-size</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-ellipsis"><code>ellipsis</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-box-mixin-box-size"><h3 class="item__heading"><a class="item__name" href="#mixin-box-size">box-size</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin box-size($options, $options.width: null, $options.height: null, $options.min-width: null, $options.min-height: null, $options.max-width: null, $options.max-height: null, $height-fallback: true, $important: false) {
$settings: (width: null, height: null, min-width: null, min-height: null, max-width: null, max-height: null);
@if is-object($options) {
$settings: extend($settings, $options);
}
@else {
$width: nth-value($options, 1);
@if is-defined($width) {
$settings: extend($settings, (width: $width));
}
$height: nth-value($options, 2);
@if is-defined($height) {
$settings: extend($settings, (height: $height));
}
$min-width: nth-value($options, 3);
@if is-defined($min-width) {
$settings: extend($settings, (min-width: $min-width));
}
$min-height: nth-value($options, 4);
@if is-defined($min-height) {
$settings: extend($settings, (min-height: $min-height));
}
$max-width: nth-value($options, 5);
@if is-defined($max-width) {
$settings: extend($settings, (max-width: $max-width));
}
$max-height: nth-value($options, 6);
@if is-defined($max-height) {
$settings: extend($settings, (max-height: $max-height));
}
}
$width: map-get($settings, width);
@if is-defined($width) {
@if is-box-size($width) {
width: $width important($important);
}
@else {
@warn '`width: #{$width}` is not a valid size';
}
}
$height: map-get($settings, height);
@if $height-fallback==true and is-defined($width) and not is-defined($height) {
$height: $width;
}
@if is-defined($height) {
@if is-box-size($height) {
height: $height important($important);
}
@else {
@warn '`height: #{$height}` is not a valid size';
}
}
$min-width: map-get($settings, min-width);
$min-height: map-get($settings, min-height);
$max-width: map-get($settings, max-width);
$max-height: map-get($settings, max-height);
@include box-bounds($min-width $min-height $max-width $max-height);
}" data-collapsed="@mixin box-size($options, $options.width: null, $options.height: null, $options.min-width: null, $options.min-height: null, $options.max-width: null, $options.max-height: null, $height-fallback: true, $important: false) { ... }"><code>@mixin box-size($options, $options.width: null, $options.height: null, $options.min-width: null, $options.min-height: null, $options.max-width: null, $options.max-height: null, $height-fallback: true, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Box size mixin<br>used to set size & bounds in one shot</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$options</code></th><td data-label="desc"><p>the bounds options</p></td><td data-label="type"><code>Object</code> or <code>Map</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.width</code></th><td data-label="desc"><p>the min width bound</p></td><td data-label="type"><code>Size</code> or <code>Percentage</code></td><td data-label="default"><code>null</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.height</code></th><td data-label="desc"><p>the min width bound</p></td><td data-label="type"><code>Size</code> or <code>Percentage</code></td><td data-label="default"><code>null</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.min-width</code></th><td data-label="desc"><p>the min width bound</p></td><td data-label="type"><code>Size</code> or <code>Percentage</code></td><td data-label="default"><code>null</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.min-height</code></th><td data-label="desc"><p>the min height bound</p></td><td data-label="type"><code>Size</code> or <code>Percentage</code></td><td data-label="default"><code>null</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.max-width</code></th><td data-label="desc"><p>the max width bound</p></td><td data-label="type"><code>Size</code> or <code>Percentage</code></td><td data-label="default"><code>null</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.max-height</code></th><td data-label="desc"><p>the max height bound</p></td><td data-label="type"><code>Size</code> or <code>Percentage</code></td><td data-label="default"><code>null</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$height-fallback</code></th><td data-label="desc"><p>falls back the height value to the width value, if height is not specified (useful for square sizes)</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>true</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage - height fallback</p></div><pre class="example__code language-scss"><code>.size-element {
@include box-size(100px);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output - height fallback</p></div><pre class="example__code language-css"><code>.size-element {
width: 100px;
height: 100px;
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Usage - no height fallback</p></div><pre class="example__code language-scss"><code>.size-element {
@include box-size(100px, false);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output - no height fallback</p></div><pre class="example__code language-css"><code>.size-element {
width: 100px;
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Usage - height only</p></div><pre class="example__code language-scss"><code>.size-element {
@include box-size(null 250px);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output - height only</p></div><pre class="example__code language-css"><code>.size-element {
height: 250px;
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Usage - full usage</p></div><pre class="example__code language-scss"><code>.size-element {
@include box-size(100% auto 30px 0 100% 250px);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output - full usage</p></div><pre class="example__code language-css"><code>.size-element {
width: 100%;
height: auto;
min-width: 30px;
min-height: 0;
max-width: 100%;
max-height: 250px;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-size"><code>is-box-size</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-is-object"><code>is-object</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-box-bounds"><code>box-bounds</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-aspect-ratio"><code>aspect-ratio</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-common-mixin-hidden"><code>hidden</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-ellipsis"><code>ellipsis</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-ellipsis"><code>ellipsis</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-box-mixin-box-color"><h3 class="item__heading"><a class="item__name" href="#mixin-box-color">box-color</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin box-color($options, $options.color: inherit, $options.bgcolor: inherit, $important: false) {
$settings: (color: inherit, bgcolor: inherit);
@if is-object($options) {
$settings: extend($settings, $options);
}
@else {
$color: nth-value($options, 1);
@if is-defined($color) {
$settings: extend($settings, (color: $color));
}
$bgcolor: nth-value($options, 2);
@if is-defined($bgcolor) {
$settings: extend($settings, (bgcolor: $bgcolor));
}
}
$color: map-get($settings, color);
@if is-css-color($color) {
@include color($color, $important);
}
@else {
@warn '`color: #{$color}` is not a valid css color';
}
$bgcolor: map-get($settings, bgcolor);
@if is-css-color($bgcolor) {
@include background-color($bgcolor, $important);
}
@else {
@warn '`background-color: #{$bgcolor}` is not a valid css color';
}
}" data-collapsed="@mixin box-color($options, $options.color: inherit, $options.bgcolor: inherit, $important: false) { ... }"><code>@mixin box-color($options, $options.color: inherit, $options.bgcolor: inherit, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Box color mixin<br>used to set color & background color in one shot</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$options</code></th><td data-label="desc"><p>the box color options</p></td><td data-label="type"><code>Object</code> or <code>Map</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.color</code></th><td data-label="desc"><p>the color</p></td><td data-label="type"><code>Color</code></td><td data-label="default"><code>inherit</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.bgcolor</code></th><td data-label="desc"><p>the background color</p></td><td data-label="type"><code>Color</code></td><td data-label="default"><code>inherit</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.box-color-element {
@include box-color(#ffa transparent);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.box-color-element {
color: #ffa;
background-color: transparent;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-color"><code>color</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-background-mixin-background-color"><code>background-color</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-is-object"><code>is-object</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-color-function-is-css-color"><code>is-css-color</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-color-function-is-css-color"><code>is-css-color</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-font"><code>font</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-box-mixin-box-shadow"><h3 class="item__heading"><a class="item__name" href="#mixin-box-shadow">box-shadow</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin box-shadow($box-shadows...) {
@if list-separator($box-shadows) != comma {
$box-shadows: ($box-shadows,);
}
@if is-box-shadows($box-shadows) {
@include prefixer(box-shadow, $box-shadows);
}
@else {
@warn '`box-shadow: #{$box-shadows}` one or more are not valid css box-shadow values';
}
}" data-collapsed="@mixin box-shadow($box-shadows...) { ... }"><code>@mixin box-shadow($box-shadows...) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Box shadow mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$box-shadows...</code></th><td data-label="desc"><p>the box shadows list</p></td><td data-label="type"><code>Shadow</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.box-shadow-element {
@include box-shadow(0 2px 0 0 #dcffa6 inset, 0 2px 5px 0 #000);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.box-shadow-element {
-webkit-box-shadow: 0 2px 0 0 #dcffa6 inset, 0 2px 5px 0 #000;
-moz-box-shadow: 0 2px 0 0 #dcffa6 inset, 0 2px 5px 0 #000;
-ms-box-shadow: 0 2px 0 0 #dcffa6 inset, 0 2px 5px 0 #000;
-o-box-shadow: 0 2px 0 0 #dcffa6 inset, 0 2px 5px 0 #000;
box-shadow: 0 2px 0 0 #dcffa6 inset, 0 2px 5px 0 #000;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-common-mixin-prefixer"><code>prefixer</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-shadows"><code>is-box-shadows</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-box-mixin-z-index"><h3 class="item__heading"><a class="item__name" href="#mixin-z-index">z-index</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin z-index($zi, $important: false) {
@if(is-z-index($zi)) {
z-index: $zi important($important);
}
@else {
@warn '`z-index: #{$zi}` is not a valid z-index value';
}
}" data-collapsed="@mixin z-index($zi, $important: false) { ... }"><code>@mixin z-index($zi, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Z-index mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$zi</code></th><td data-label="desc"><p>the z-index</p></td><td data-label="type"><code>Integer</code> or <code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.z-index-element {
@include z-index(1);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.z-index-element {
z-index: 1;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-z-index"><code>is-z-index</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-box-mixin-visibility"><h3 class="item__heading"><a class="item__name" href="#mixin-visibility">visibility</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin visibility($v, $important: false) {
@if(is-visibility($v)) {
visibility: $v important($important);
}
@else {
@warn '`visibility: #{$zi}` is not a valid visibility value';
}
}" data-collapsed="@mixin visibility($v, $important: false) { ... }"><code>@mixin visibility($v, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Visibility mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$v</code></th><td data-label="desc"><p>the visibility</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.visibility-element {
@include visibility(hidden);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.visibility-element {
visibility: hidden;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-visibility"><code>is-visibility</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-box-mixin-backface-visibility"><h3 class="item__heading"><a class="item__name" href="#mixin-backface-visibility">backface-visibility</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin backface-visibility($bv, $important: false) {
@if is-backface-visibility($bv) {
@include prefixer(backface-visibility, $bv, null, $important);
}
@else {
@warn '`backface-visibility: #{$bv}` is not a valid backface-visibility value';
}
}" data-collapsed="@mixin backface-visibility($bv, $important: false) { ... }"><code>@mixin backface-visibility($bv, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Backface visibility mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$bv</code></th><td data-label="desc"><p>the backface visibility</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.backface-visibility-element {
@include backface-visibility(visible);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.backface-visibility-element {
-webkit-backface-visibility: visible;
-moz-backface-visibility: visible;
-ms-backface-visibility: visible;
-o-backface-visibility: visible;
backface-visibility: visible;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-common-mixin-prefixer"><code>prefixer</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-backface-visibility"><code>is-backface-visibility</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-box-mixin-aspect-ratio"><h3 class="item__heading"><a class="item__name" href="#mixin-aspect-ratio">aspect-ratio</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin aspect-ratio($width: 1, $height: 1, $content-selector: '.content') {
@if (unit($height)==unit($width)) {
@include position(relative);
@include display(inline-block);
&:before {
@include display(inline-block);
@include box-size(100%, false);
@include padding(aspect-ratio-factor($width, $height) null null null);
content: '';
}
> #{$content-selector} {
@include position(absolute 0 0 0 0);
@include display(inline-block);
@include box-size(100%);
}
}
@else {
@warn '`$width: #{$width}` and `$height: #{$height}` should have the same measure unit';
}
}" data-collapsed="@mixin aspect-ratio($width: 1, $height: 1, $content-selector: '.content') { ... }"><code>@mixin aspect-ratio($width: 1, $height: 1, $content-selector: '.content') { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Aspect ratio mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$width</code></th><td data-label="desc"><p>desired width for aspect ratio calculation</p></td><td data-label="type"><code>Integer</code> or <code>Size</code></td><td data-label="default"><code>1</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$height</code></th><td data-label="desc"><p>desired height for aspect ratio calculation</p></td><td data-label="type"><code>Integer</code> or <code>Size</code></td><td data-label="default"><code>1</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$content-selector</code></th><td data-label="desc"><p>desired content selector</p></td><td data-label="type"><code>Integer</code> or <code>Size</code></td><td data-label="default"><code>'.content'</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.aspect-ratio-element {
@include aspect-ratio(170px, 20px);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.aspect-ratio-element {
position: relative;
display: inline-block; // so you can use text align to align the element
&:before {
display: inline-block;
width: 100%;
padding-top: 11,764705882352941%; // = 20 / 170 * 100%
content: '';
}
> .content {
position: absolute;
display: inline-block;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-position"><code>position</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-padding-mixin-padding"><code>padding</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-position"><code>position</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-aspect-ratio-factor"><code>aspect-ratio-factor</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-strip-unit"><code>strip-unit</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-box-size"><code>box-size</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-display"><code>display</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section><section class="main__sub-section" id="mixins-box-function"><h2 class="main__heading--secondary"><div class="container">functions</div></h2><section class="main__item container item" id="mixins-box-function-is-display"><h3 class="item__heading"><a class="item__name" href="#function-is-display">is-display</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-display($dm) {
@return is-defined($dm) and array-contains($display-modes, $dm);
}" data-collapsed="@function is-display($dm) { ... }"><code>@function is-display($dm) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a correct display mode</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$dm</code></th><td data-label="desc"><p>the display mode</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is display mode</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-box-variable-display-modes"><code>display-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-display"><code>display</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-box-function-is-box-sizing"><h3 class="item__heading"><a class="item__name" href="#function-is-box-sizing">is-box-sizing</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-box-sizing($bs) {
@return is-defined($bs) and array-contains($box-sizing-modes, $bs);
}" data-collapsed="@function is-box-sizing($bs) { ... }"><code>@function is-box-sizing($bs) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is box sizing mode</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$bs</code></th><td data-label="desc"><p>the box-sizing mode</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is box-sizing mode</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-box-variable-box-sizing-modes"><code>box-sizing-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-box-sizing"><code>box-sizing</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-box-function-is-box-size"><h3 class="item__heading"><a class="item__name" href="#function-is-box-size">is-box-size</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-box-size($s) {
@return is-defined($s) and (is-size($s) or array-contains($box-size-modes, $s));
}" data-collapsed="@function is-box-size($s) { ... }"><code>@function is-box-size($s) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is box size</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$s</code></th><td data-label="desc"><p>the box size value</p></td><td data-label="type"><code>Size</code> or <code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is box size value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-size"><code>is-size</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-box-variable-box-size-modes"><code>box-size-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-box-size"><code>box-size</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-box-function-is-box-bound-size"><h3 class="item__heading"><a class="item__name" href="#function-is-box-bound-size">is-box-bound-size</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-box-bound-size($s) {
@return is-defined($s) and (is-size($s) or array-contains($box-bound-size-modes, $s));
}" data-collapsed="@function is-box-bound-size($s) { ... }"><code>@function is-box-bound-size($s) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is box bound size</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$s</code></th><td data-label="desc"><p>the box bound size value</p></td><td data-label="type"><code>Size</code> or <code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is box bound size value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-size"><code>is-size</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-box-variable-box-bound-size-modes"><code>box-bound-size-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-box-bounds"><code>box-bounds</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-box-bounds"><code>box-bounds</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-box-bounds"><code>box-bounds</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-box-bounds"><code>box-bounds</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-box-function-is-box-shadow-mode"><h3 class="item__heading"><a class="item__name" href="#function-is-box-shadow-mode">is-box-shadow-mode</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-box-shadow-mode($bsm) {
@return is-defined($bsm) and array-contains($box-shadow-modes, $bsm);
}" data-collapsed="@function is-box-shadow-mode($bsm) { ... }"><code>@function is-box-shadow-mode($bsm) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is box shadow mode</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$bsm</code></th><td data-label="desc"><p>the box-shadow mode</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is box-shadow mode</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-box-variable-box-shadow-modes"><code>box-shadow-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-shadow"><code>is-box-shadow</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-box-function-is-box-shadow"><h3 class="item__heading"><a class="item__name" href="#function-is-box-shadow">is-box-shadow</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-box-shadow($box-shadow) {
@if is-defined($box-shadow) {
@if is-box-shadow-mode($box-shadow) {
@return true;
}
@else {
$defaults: (h-offset: 0, v-offset: 0, blur: 0, spread: 0, color: transparent, inset: null);
@if is-object($box-shadow) {
$box-shadow: extend($defaults, $box-shadow);
}
@else {
$box-shadow-h-offset: nth-value($box-shadow, 1);
$box-shadow-v-offset: nth-value($box-shadow, 2);
$box-shadow-blur: nth-value($box-shadow, 3);
$box-shadow-spread: nth-value($box-shadow, 4);
$box-shadow-color: nth-value($box-shadow, 5);
$box-shadow-inset: nth-value($box-shadow, 6);
$box-shadow: extend($defaults, ());
@if is-defined($box-shadow-h-offset) {
$box-shadow: extend($box-shadow, (h-offset: $box-shadow-h-offset));
}
@if is-defined($box-shadow-v-offset) {
$box-shadow: extend($box-shadow, (v-offset: $box-shadow-v-offset));
}
@if is-defined($box-shadow-blur) {
$box-shadow: extend($box-shadow, (blur: $box-shadow-blur));
}
@if is-defined($box-shadow-spread) {
$box-shadow: extend($box-shadow, (spread: $box-shadow-spread));
}
@if is-defined($box-shadow-color) {
$box-shadow: extend($box-shadow, (color: $box-shadow-color));
}
@if is-defined($box-shadow-inset) {
$box-shadow: extend($box-shadow, (inset: $box-shadow-inset));
}
}
$is-box-shadow-valid: true;
$box-shadow-h-offset: get($box-shadow, h-offset);
@if not is-length($box-shadow-h-offset) {
$is-box-shadow-valid: false;
@warn '`box-shadow h-offset: #{$box-shadow-h-offset}` is not a valid css length value';
}
$box-shadow-v-offset: get($box-shadow, v-offset);
@if $is-box-shadow-valid {
@if not is-length($box-shadow-v-offset) {
$is-box-shadow-valid: false;
@warn '`box-shadow v-offset: #{$box-shadow-v-offset}` is not a valid css length value';
}
}
$box-shadow-blur: get($box-shadow, blur);
@if $is-box-shadow-valid {
@if not is-length($box-shadow-blur) {
$is-box-shadow-valid: false;
@warn '`box-shadow blur: #{$box-shadow-blur}` is not a valid css length value';
}
}
$box-shadow-spread: get($box-shadow, spread);
@if $is-box-shadow-valid {
@if not is-length($box-shadow-spread) {
$is-box-shadow-valid: false;
@warn '`box-shadow spread: #{$box-shadow-spread}` is not a valid css length value';
}
}
$box-shadow-color: get($box-shadow, color);
@if $is-box-shadow-valid {
@if not is-css-color($box-shadow-color) {
$is-box-shadow-valid: false;
@warn '`box-shadow color: #{$box-shadow-color}` is not a valid css color value';
}
}
$box-shadow-inset: get($box-shadow, inset);
@if $is-box-shadow-valid {
@if is-string($box-shadow-inset) and $box-shadow-inset !=inset {
$is-box-shadow-valid: false;
@warn '`box-shadow inset: #{$box-shadow-inset}` is not a valid css inset value';
}
}
@return $is-box-shadow-valid;
}
}
@return false;
}" data-collapsed="@function is-box-shadow($box-shadow) { ... }"><code>@function is-box-shadow($box-shadow) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is box shadow value</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$box-shadow</code></th><td data-label="desc"><p>the box-shadow value</p></td><td data-label="type"><code>Any</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is box-shadow value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-shadow-mode"><code>is-box-shadow-mode</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-is-object"><code>is-object</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-get"><code>get</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-length"><code>is-length</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-get"><code>get</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-length"><code>is-length</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-get"><code>get</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-length"><code>is-length</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-get"><code>get</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-length"><code>is-length</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-get"><code>get</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-color-function-is-css-color"><code>is-css-color</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-get"><code>get</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-string-function-is-string"><code>is-string</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-shadows"><code>is-box-shadows</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-box-function-is-box-shadows"><h3 class="item__heading"><a class="item__name" href="#function-is-box-shadows">is-box-shadows</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-box-shadows($box-shadows) {
@if is-defined($box-shadows) {
$is-box-shadows-valid: true;
@each $box-shadow in $box-shadows {
@if $is-box-shadows-valid {
$is-box-shadows-valid: is-box-shadow($box-shadow);
}
}
@return $is-box-shadows-valid;
}
@return false;
}" data-collapsed="@function is-box-shadows($box-shadows) { ... }"><code>@function is-box-shadows($box-shadows) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if a list is a box-shadow values list (e.g. <code>0 2px 0 0 #dcffa6 inset, 0 2px 5px 0 #000</code>)</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$box-shadows</code></th><td data-label="desc"><p>the box-shadow values list</p></td><td data-label="type"><code>Array</code> or <code>List</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is box-shadow values list</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-shadow"><code>is-box-shadow</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-box-shadow"><code>box-shadow</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-box-function-is-z-index"><h3 class="item__heading"><a class="item__name" href="#function-is-z-index">is-z-index</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-z-index($zi) {
@return is-defined($zi) and (is-integer($zi) or array-contains($z-index-modes, $zi));
}" data-collapsed="@function is-z-index($zi) { ... }"><code>@function is-z-index($zi) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is z-index value</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$zi</code></th><td data-label="desc"><p>the z-index value</p></td><td data-label="type"><code>Integer</code> or <code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is z-index value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-integer"><code>is-integer</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-box-variable-z-index-modes"><code>z-index-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-z-index"><code>z-index</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-box-function-is-visibility"><h3 class="item__heading"><a class="item__name" href="#function-is-visibility">is-visibility</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-visibility($vm) {
@return is-defined($vm) and array-contains($visibility-modes, $vm);
}" data-collapsed="@function is-visibility($vm) { ... }"><code>@function is-visibility($vm) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is supported visibility mode</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$vm</code></th><td data-label="desc"><p>the visibility mode</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is visibility mode</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-box-variable-visibility-modes"><code>visibility-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-visibility"><code>visibility</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-box-function-is-backface-visibility"><h3 class="item__heading"><a class="item__name" href="#function-is-backface-visibility">is-backface-visibility</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-backface-visibility($bv) {
@return is-defined($bv) and array-contains($backface-visibility-modes, $bv);
}" data-collapsed="@function is-backface-visibility($bv) { ... }"><code>@function is-backface-visibility($bv) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is supported backface-visibility mode</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$bv</code></th><td data-label="desc"><p>the backface-visibility mode</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is backface-visibility mode</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-box-variable-backface-visibility-modes"><code>backface-visibility-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-backface-visibility"><code>backface-visibility</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-box-function-aspect-ratio-factor"><h3 class="item__heading"><a class="item__name" href="#function-aspect-ratio-factor">aspect-ratio-factor</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function aspect-ratio-factor($width: 1, $height: 1) {
@return (strip-unit($height) / strip-unit($width)) * 100%;
}" data-collapsed="@function aspect-ratio-factor($width: 1, $height: 1) { ... }"><code>@function aspect-ratio-factor($width: 1, $height: 1) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Returns the aspect-ratio-factor in percentage for the aspect-ratio padding-top</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$width</code></th><td data-label="desc"><p>desired width for aspect ratio calculation</p></td><td data-label="type"><code>Integer</code> or <code>Size</code></td><td data-label="default"><code>1</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$height</code></th><td data-label="desc"><p>desired height for aspect ratio calculation</p></td><td data-label="type"><code>Integer</code> or <code>Size</code></td><td data-label="default"><code>1</code></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Percentage</code> —<p>the calculated percentage of the aspect-ratio-factor</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-strip-unit"><code>strip-unit</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-strip-unit"><code>strip-unit</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-aspect-ratio"><code>aspect-ratio</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section><section class="main__sub-section" id="mixins-box-variable"><h2 class="main__heading--secondary"><div class="container">variables</div></h2><section class="main__item container item" id="mixins-box-variable-display-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-display-modes">display-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$display-modes: array-concat((none, inline, block, inline-block, flex, inline-flex, grid, inline-grid, table, inline-table, table-caption, table-header-group, table-row-group, table-column-group, table-footer-group, table-row, table-column, table-cell, list-item, run-in, contents), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Display modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-display"><code>is-display</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-box-variable-box-sizing-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-box-sizing-modes">box-sizing-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$box-sizing-modes: array-concat((content-box, border-box), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Box sizing modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-sizing"><code>is-box-sizing</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-box-variable-box-size-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-box-size-modes">box-size-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$box-size-modes: array-concat((auto), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Box size modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-size"><code>is-box-size</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-box-variable-box-bound-size-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-box-bound-size-modes">box-bound-size-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$box-bound-size-modes: array-concat((none), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Box bound size modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-bound-size"><code>is-box-bound-size</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-box-variable-box-shadow-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-box-shadow-modes">box-shadow-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$box-shadow-modes: array-concat((none), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Box shadow modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-shadow-mode"><code>is-box-shadow-mode</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-box-variable-z-index-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-z-index-modes">z-index-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$z-index-modes: array-concat((auto), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Z-index modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-z-index"><code>is-z-index</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-box-variable-visibility-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-visibility-modes">visibility-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$visibility-modes: array-concat((visible, hidden, collapse), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Visibility modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-visibility"><code>is-visibility</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-box-variable-backface-visibility-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-backface-visibility-modes">backface-visibility-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$backface-visibility-modes: array-concat((visible, hidden), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Backface visibility modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-backface-visibility"><code>is-backface-visibility</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section></section><section class="main__section"><h1 class="main__heading" id="mixins-common"><div class="container">Mixins - Common</div></h1><section class="main__sub-section" id="mixins-common-function"><h2 class="main__heading--secondary"><div class="container">functions</div></h2><section class="main__item container item" id="mixins-common-function-important"><h3 class="item__heading"><a class="item__name" href="#function-important">important</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function important($important: false) {
@return if($important, !important, null);
}" data-collapsed="@function important($important: false) { ... }"><code>@function important($important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Gets important attribute based on a boolean flag</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>important boolean flag</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>String</code> —<p>the resulting string value</p></div><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-background-mixin-background-attachment"><code>background-attachment</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-background-mixin-background-color"><code>background-color</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-background-mixin-background-image"><code>background-image</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-background-mixin-background-origin"><code>background-origin</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-background-mixin-background-clip"><code>background-clip</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-background-mixin-background-position"><code>background-position</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-background-mixin-background-repeat"><code>background-repeat</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-background-mixin-background-size"><code>background-size</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-background-mixin-background"><code>background</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-background-mixin-background"><code>background</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border-color"><code>border-color</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border-style"><code>border-style</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border-width"><code>border-width</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border"><code>border</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-display"><code>display</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-display"><code>display</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-display"><code>display</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-display"><code>display</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-display"><code>display</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-display"><code>display</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-display"><code>display</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-display"><code>display</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-display"><code>display</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-display"><code>display</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-display"><code>display</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-box-sizing"><code>box-sizing</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-box-bounds"><code>box-bounds</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-box-bounds"><code>box-bounds</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-box-bounds"><code>box-bounds</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-box-bounds"><code>box-bounds</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-box-size"><code>box-size</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-box-size"><code>box-size</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-z-index"><code>z-index</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-visibility"><code>visibility</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-common-mixin-prefixer"><code>prefixer</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-common-mixin-hidden"><code>hidden</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-common-mixin-hidden"><code>hidden</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-cursor-mixin-cursor"><code>cursor</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-cursor-mixin-cursor"><code>cursor</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-cursor-mixin-cursor"><code>cursor</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-cursor-mixin-cursor"><code>cursor</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-cursor-mixin-pointer-events"><code>pointer-events</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-filter-mixin-opacity"><code>opacity</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-filter-mixin-opacity"><code>opacity</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-filter-mixin-opacity"><code>opacity</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-mixin-flex-basis"><code>flex-basis</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-mixin-flex-direction"><code>flex-direction</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-mixin-flex-grow"><code>flex-grow</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-mixin-flex-shrink"><code>flex-shrink</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-mixin-flex-wrap"><code>flex-wrap</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-mixin-order"><code>order</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-mixin-flex-flow"><code>flex-flow</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-grid-mixin-align-content"><code>align-content</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-grid-mixin-align-items"><code>align-items</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-grid-mixin-align-self"><code>align-self</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-grid-mixin-justify-content"><code>justify-content</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-grid-mixin-justify-items"><code>justify-items</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-grid-mixin-justify-self"><code>justify-self</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-grid-mixin-place-content"><code>place-content</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-grid-mixin-place-items"><code>place-items</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-float-mixin-clear"><code>clear</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-float-mixin-float"><code>float</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-margin-mixin-margin-direction"><code>margin-direction</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-outline-mixin-outline-width"><code>outline-width</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-outline-mixin-outline-style"><code>outline-style</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-outline-mixin-outline-color"><code>outline-color</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-outline-mixin-outline-offset"><code>outline-offset</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-outline-mixin-outline"><code>outline</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-overflow-mixin-overflow"><code>overflow</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-overflow-mixin-overflow"><code>overflow</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-padding-mixin-padding-direction"><code>padding-direction</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-position-point"><code>position-point</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-position"><code>position</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-position"><code>position</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-color"><code>color</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-direction"><code>direction</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-font-family"><code>font-family</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-font-size"><code>font-size</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-font-style"><code>font-style</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-font-weight"><code>font-weight</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-letter-spacing"><code>letter-spacing</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-line-height"><code>line-height</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-align"><code>text-align</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-decoration"><code>text-decoration</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-decoration"><code>text-decoration</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-indent"><code>text-indent</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-transform"><code>text-transform</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-vertical-align"><code>vertical-align</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-white-space"><code>white-space</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-word-break"><code>word-break</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-word-spacing"><code>word-spacing</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-word-wrap"><code>word-wrap</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-common-function-rem"><h3 class="item__heading"><a class="item__name" href="#function-rem">rem</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function rem($px, $base: $font-size-base) {
@if not unitless($px) {
$px: strip-unit($px);
}
@if not unitless($base) {
$base: strip-unit($base);
}
@return ($px / $base) * 1rem;
}" data-collapsed="@function rem($px, $base: $font-size-base) { ... }"><code>@function rem($px, $base: $font-size-base) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Convert pixels to rems<br>eg. for a relational value of 12px write rem(12)<br>Assumes $base is the font-size of</p><html><p></p></html></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$px</code></th><td data-label="desc"><p>pixels size you want to convert</p></td><td data-label="type"><code>Size</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$base</code></th><td data-label="desc"><p>html font-size base</p></td><td data-label="type"><code>Size</code></td><td data-label="default"><code>$font-size-base</code></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Size</code> —<p>the size converted in rem based on html font-size</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-strip-unit"><code>strip-unit</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-strip-unit"><code>strip-unit</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-common-function-px"><h3 class="item__heading"><a class="item__name" href="#function-px">px</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function px($px, $base: $font-size-base) {
@if not unitless($rem) {
$rem: strip-unit($rem);
}
@return strip-unit($rem / 1rem) * $base;
}" data-collapsed="@function px($px, $base: $font-size-base) { ... }"><code>@function px($px, $base: $font-size-base) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Convert rems to pixels<br>eg. for a relational value of 12px write px(1.2rem) base on $font-size-base (10px)<br>Assumes $base is the font-size of</p><html><p></p></html></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$px</code></th><td data-label="desc"><p>pixels size you want to convert</p></td><td data-label="type"><code>Size</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$base</code></th><td data-label="desc"><p>html font-size base</p></td><td data-label="type"><code>Size</code></td><td data-label="default"><code>$font-size-base</code></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Size</code> —<p>the size converted in rem based on html font-size</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-strip-unit"><code>strip-unit</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-strip-unit"><code>strip-unit</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section><section class="main__sub-section" id="mixins-common-mixin"><h2 class="main__heading--secondary"><div class="container">mixins</div></h2><section class="main__item container item" id="mixins-common-mixin-prefixer"><h3 class="item__heading"><a class="item__name" href="#mixin-prefixer">prefixer</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin prefixer($property, $values, $prefixes: $prefixes-default, $important: false) {
@if not $prefixes or is-null($prefixes) {
$prefixes: $prefixes-default;
}
@each $prefix in $prefixes {
@if is-prefix($prefix) {
#{if($prefix != spec, '-#{$prefix}-', '') + $property}: $values important($important);
}
@else {
@warn 'Unrecognized prefix: #{$prefix}';
}
}
}" data-collapsed="@mixin prefixer($property, $values, $prefixes: $prefixes-default, $important: false) { ... }"><code>@mixin prefixer($property, $values, $prefixes: $prefixes-default, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Prefixer mixin<br>for generating vendor prefixes on non-standardized properties.</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$property</code></th><td data-label="desc"><p>the property to prefix</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$values</code></th><td data-label="desc"><p>the values list to use</p></td><td data-label="type"><code>Any</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$prefixes</code></th><td data-label="desc"><p>space separated list</p></td><td data-label="type"><code>Array</code> or <code>List</code></td><td data-label="default"><code>$prefixes-default</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.element {
@include prefixer(border-radius, 10px, webkit moz spec);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.element {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-null"><code>is-null</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-animation-mixin-animation"><code>animation</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-appearance-mixin-appearance"><code>appearance</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border-radius"><code>border-radius</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-box-shadow"><code>box-shadow</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-backface-visibility"><code>backface-visibility</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-filter-mixin-filter"><code>filter</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-hyphens"><code>hyphens</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-decoration-line"><code>text-decoration-line</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-decoration-style"><code>text-decoration-style</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-decoration-color"><code>text-decoration-color</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-decoration-skip"><code>text-decoration-skip</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-underline-position"><code>text-underline-position</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-overflow"><code>text-overflow</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-shadow"><code>text-shadow</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-size-adjust"><code>text-size-adjust</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-stroke-width"><code>text-stroke-width</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-stroke-color"><code>text-stroke-color</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-user-select"><code>user-select</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-transform"><code>transform</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-transform-origin"><code>transform-origin</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-transform-origin"><code>transform-origin</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-transform-style"><code>transform-style</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transition-mixin-transition-delay"><code>transition-delay</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transition-mixin-transition-duration"><code>transition-duration</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transition-mixin-transition-property"><code>transition-property</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transition-mixin-transition-timing-function"><code>transition-timing-function</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transition-mixin-transition"><code>transition</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-common-mixin-prefixer-at-rule"><h3 class="item__heading"><a class="item__name" href="#mixin-prefixer-at-rule">prefixer-at-rule</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin prefixer-at-rule($at-rule, $at-rule-suffix: null, $prefixes) {
@each $prefix in $prefixes {
@if is-prefix($prefix) {
$at-rule-selector: #{'@' + if($prefix != spec, '-' + $prefix + '-', '') + $at-rule + if($at-rule-suffix, ' ' + $at-rule-suffix, '')};
@debug $at-rule-selector;
#{$at-rule-selector} {
@content;
};
}
@else {
@warn 'Unrecognized prefix: #{$prefix}';
}
}
}" data-collapsed="@mixin prefixer-at-rule($at-rule, $at-rule-suffix: null, $prefixes) { ... }"><code>@mixin prefixer-at-rule($at-rule, $at-rule-suffix: null, $prefixes) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Prefixer @Selector mixin<br>for generating vendor prefixes on non-standardized properties.</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$at-rule</code></th><td data-label="desc"><p>the at rule to prefix</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$at-rule-suffix</code></th><td data-label="desc"><p>the suffix to add after the at-rule (eg. animation keyframes)</p></td><td data-label="type"><code>String</code></td><td data-label="default"><code>null</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$prefixes</code></th><td data-label="desc"><p>space separated list</p></td><td data-label="type"><code>Array</code> or <code>List</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>@include prefixer-at-rule(viewport, null, ms spec) {
width: device-width;
};</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>@-ms-viewport {
width: device-width;
}
@viewport {
width: device-width;
}</code></pre></div><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-common-mixin-disable"><h3 class="item__heading"><a class="item__name" href="#mixin-disable">disable</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin disable($force: true, $important: false) {
@include cursor(default, $important);
@include pointer-events(none, $important);
@if $force == true {
* {
@include cursor(default, $important);
@include pointer-events(none, $important);
}
}
}" data-collapsed="@mixin disable($force: true, $important: false) { ... }"><code>@mixin disable($force: true, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Disable mixin<br>it forces the cursor to default and pointer-evento to none for an element and all of his children<br>it's compatible with IE11+</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$force</code></th><td data-label="desc"><p>if true, forces the disable for all children</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>true</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.disable-element {
@include disable;
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.disable-element {
cursor: default;
pointer-events: none;
}
.disable-element * {
cursor: default;
pointer-events: none;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-cursor-mixin-cursor"><code>cursor</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-cursor-mixin-pointer-events"><code>pointer-events</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-cursor-mixin-cursor"><code>cursor</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-cursor-mixin-pointer-events"><code>pointer-events</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://caniuse.com/#search=pointer-events">caniuse.com i use pointer-events</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-common-mixin-hidden"><h3 class="item__heading"><a class="item__name" href="#mixin-hidden">hidden</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin hidden($important: false) {
@include position(absolute, $important);
@include box-size(1px, true, $important);
@include padding(0, $important);
@include border(0, $important);
@include overflow(hidden, $important);
@include white-space(nowrap, $important);
clip: rect(1px, 1px, 1px, 1px) important($important);
clip-path: inset(100%) important($important);
}" data-collapsed="@mixin hidden($important: false) { ... }"><code>@mixin hidden($important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Hidden mixin<br>visually hides an element without touching display or visibility selectors</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.hidden-element {
@include hidden;
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.hidden-element {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
border: 0;
overflow: hidden;
white-space: nowrap;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(100%);
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-position"><code>position</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-box-size"><code>box-size</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-padding-mixin-padding"><code>padding</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border"><code>border</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-overflow-mixin-overflow"><code>overflow</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-white-space"><code>white-space</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section><section class="main__sub-section" id="mixins-common-variable"><h2 class="main__heading--secondary"><div class="container">variables</div></h2><section class="main__item container item" id="mixins-common-variable-animateable-properties"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-animateable-properties">animateable-properties</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$animateable-properties: (background, background-color, background-position, background-size, border, border-bottom, border-bottom-color, border-bottom-left-radius, border-bottom-right-radius, border-bottom-width, border-color, border-left, border-left-color, border-left-width, border-right, border-right-color, border-right-width, border-spacing, border-top, border-top-color, border-top-left-radius, border-top-right-radius, border-top-width, bottom, box-shadow, clip, clip-path, color, column-count, column-gap, column-rule, column-rule-color, column-rule-width, column-width, columns, filter, flex, flex-basis, flex-grow, flex-shrink, font, font-size, font-size-adjust font-stretch font-weight, height, left, letter-spacing, line-height, margin, margin-bottom, margin-left, margin-right, margin-top, max-height, max-width, min-height, min-width, opacity, order, outline, outline-color, outline-offset, outline-width, padding, padding-bottom, padding-left, padding-right, padding-top, perspective, perspective-origin, right, text-decoration-color, text-indent, text-shadow, top, transform, transform-origin, vertical-align, visibility width, word-spacing, z-index);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Animateable properties</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section></section><section class="main__section"><h1 class="main__heading" id="mixins-cursor"><div class="container">Mixins - Cursor</div></h1><section class="main__sub-section" id="mixins-cursor-function"><h2 class="main__heading--secondary"><div class="container">functions</div></h2><section class="main__item container item" id="mixins-cursor-function-is-cursor"><h3 class="item__heading"><a class="item__name" href="#function-is-cursor">is-cursor</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-cursor($c) {
@if is-defined($c) {
@if array-contains($cursor-modes, $c) {
@return true;
}
$curl: $c;
@if is-array($curl) {
// in this case the cursor url contains the fallback part
@if is-array-comma($curl) {
$curl: array-head($curl);
}
// in this case the cursor url contains also the cursor icon position numbers
@if is-array-space($curl) {
$curl: array-head($curl);
}
}
@return is-url($curl);
}
@return false;
}" data-collapsed="@function is-cursor($c) { ... }"><code>@function is-cursor($c) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a correct cursor mode</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$c</code></th><td data-label="desc"><p>the cursor mode or url</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is cursor mode or url</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-is-array"><code>is-array</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-url-function-is-url"><code>is-url</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-cursor-variable-cursor-modes"><code>cursor-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-cursor-mixin-cursor"><code>cursor</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-cursor-function-is-pointer-events"><h3 class="item__heading"><a class="item__name" href="#function-is-pointer-events">is-pointer-events</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-pointer-events($pe) {
@return is-defined($pe) and array-contains($pointer-events-modes, $pe);
}" data-collapsed="@function is-pointer-events($pe) { ... }"><code>@function is-pointer-events($pe) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a correct pointer-events mode</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$pe</code></th><td data-label="desc"><p>the pointer-events mode</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is pointer-events mode</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-cursor-variable-pointer-events-modes"><code>pointer-events-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-cursor-mixin-pointer-events"><code>pointer-events</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section><section class="main__sub-section" id="mixins-cursor-mixin"><h2 class="main__heading--secondary"><div class="container">mixins</div></h2><section class="main__item container item" id="mixins-cursor-mixin-cursor"><h3 class="item__heading"><a class="item__name" href="#mixin-cursor">cursor</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin cursor($c: default, $force: false, $important: false) {
@if is-cursor($c) {
cursor: $c important($important);
@if $force {
&:before,
&:after {
cursor: $c important($important);
}
* {
cursor: $c important($important);
&:before,
&:after {
cursor: $c important($important);
}
}
}
}
@else {
@warn '`cursor: #{$c}` is not a valid cursor value';
}
}" data-collapsed="@mixin cursor($c: default, $force: false, $important: false) { ... }"><code>@mixin cursor($c: default, $force: false, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Cursor mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$c</code></th><td data-label="desc"><p>the cursor mode</p></td><td data-label="type"><code>String</code></td><td data-label="default"><code>default</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$force</code></th><td data-label="desc"><p>if true forces the cursor mode for all the child elements and before, after pseudo selectors</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.cursor-element {
@include cursor(pointer);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.cursor-element {
cursor: pointer;
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Usage - force mode</p></div><pre class="example__code language-scss"><code>.cursor-element {
@include cursor(pointer, true);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output - force mode</p></div><pre class="example__code language-css"><code>.cursor-element {
cursor: pointer;
}
.cursor-element:before,
.cursor-element:after {
cursor: pointer;
}
.cursor-element * {
cursor: pointer;
}
.cursor-element *:before,
.cursor-element *:after {
cursor: pointer;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-cursor-function-is-cursor"><code>is-cursor</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-common-mixin-disable"><code>disable</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-common-mixin-disable"><code>disable</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/pr_class_cursor.asp">W3Schools cursor docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-cursor-mixin-pointer-events"><h3 class="item__heading"><a class="item__name" href="#mixin-pointer-events">pointer-events</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin pointer-events($pe: auto, $important: false) {
@if is-pointer-events($pe) {
pointer-events: $pe important($important);
}
@else {
@warn '`pointer-events: #{$pe}` is not a valid pointer-events value';
}
}" data-collapsed="@mixin pointer-events($pe: auto, $important: false) { ... }"><code>@mixin pointer-events($pe: auto, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Pointer events mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$pe</code></th><td data-label="desc"><p>the pointer events mode</p></td><td data-label="type"><code>String</code></td><td data-label="default"><code>auto</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.pointer-events-element {
@include pointer-events(none);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.pointer-events-element {
pointer-events: none;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-cursor-function-is-pointer-events"><code>is-pointer-events</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-common-mixin-disable"><code>disable</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-common-mixin-disable"><code>disable</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/css3_pr_pointer-events.asp">W3Schools pointer-events docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section><section class="main__sub-section" id="mixins-cursor-variable"><h2 class="main__heading--secondary"><div class="container">variables</div></h2><section class="main__item container item" id="mixins-cursor-variable-cursor-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-cursor-modes">cursor-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$cursor-modes: array-concat((alias, all-scroll, auto, cell, context-menu, col-resize, copy, crosshair, default, e-resize, ew-resize, grab, grabbing, help, move, n-resize, ne-resize, nesw-resize, ns-resize, nw-resize, nwse-resize, no-drop, none, not-allowed, pointer, progress, row-resize, s-resize, se-resize, sw-resize, text, vertical-text, w-resize, wait, zoom-in, zoom-out), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Cursor modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-cursor-function-is-cursor"><code>is-cursor</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-cursor-variable-pointer-events-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-pointer-events-modes">pointer-events-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$pointer-events-modes: array-concat((all, auto, bounding-box, fill, none, painted, stroke, unset, visible, visiblefill, visiblepainted, visiblestroke), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Pointer events modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-cursor-function-is-pointer-events"><code>is-pointer-events</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section></section><section class="main__section"><h1 class="main__heading" id="mixins-filter"><div class="container">Mixins - Filter</div></h1><section class="main__sub-section" id="mixins-filter-function"><h2 class="main__heading--secondary"><div class="container">functions</div></h2><section class="main__item container item" id="mixins-filter-function-get-filter-function-name"><h3 class="item__heading"><a class="item__name" href="#function-get-filter-function-name">get-filter-function-name</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function get-filter-function-name($ff) {
@if(string-contains($ff, '(') and string-contains($ff, ')')) {
@return string-slice($ff, 1, string-index($ff, '(') - 1);
}
@return null;
}" data-collapsed="@function get-filter-function-name($ff) { ... }"><code>@function get-filter-function-name($ff) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Extracts filter function name from a string</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$ff</code></th><td data-label="desc"><p>the filter string (e.g. <code>blur(5px)</code>)</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>String</code> or <code>Null</code> —<p>the filter function name or null</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-string-function-string-slice"><code>string-slice</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-string-function-string-index"><code>string-index</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-string-function-string-contains"><code>string-contains</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-filter-function-is-filter-function"><code>is-filter-function</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-filter-function-is-filter-function"><h3 class="item__heading"><a class="item__name" href="#function-is-filter-function">is-filter-function</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-filter-function($ff) {
$filter-function-name: get-filter-function-name($ff);
@return is-defined($filter-function-name) and array-contains($filter-functions-names, $filter-function-name);
}" data-collapsed="@function is-filter-function($ff) { ... }"><code>@function is-filter-function($ff) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a filter function</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$ff</code></th><td data-label="desc"><p>the filter string (e.g. <code>blur(5px)</code>)</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is filter function value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-filter-function-get-filter-function-name"><code>get-filter-function-name</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-filter-variable-filter-functions-names"><code>filter-functions-names</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-filter-function-is-filter"><code>is-filter</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-filter-function-is-filter"><h3 class="item__heading"><a class="item__name" href="#function-is-filter">is-filter</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-filter($filter) {
@return is-defined($filter) and (array-contains($filter-modes, $filter) or is-filter-function($filter));
}" data-collapsed="@function is-filter($filter) { ... }"><code>@function is-filter($filter) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a filter mode or function</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$filter</code></th><td data-label="desc"><p>the filter string (e.g. <code>blur(5px)</code> or <code>'none</code>)</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is filter mode or filter function value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-filter-function-is-filter-function"><code>is-filter-function</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-filter-variable-filter-modes"><code>filter-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-filter-mixin-filter"><code>filter</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section><section class="main__sub-section" id="mixins-filter-mixin"><h2 class="main__heading--secondary"><div class="container">mixins</div></h2><section class="main__item container item" id="mixins-filter-mixin-filter"><h3 class="item__heading"><a class="item__name" href="#mixin-filter">filter</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin filter($filter, $important: false) {
@if is-filter($filter) {
@include prefixer(filter, $filter, null, $important);
}
@else {
@warn '`filter: #{$filter}` is not a valid filter value';
}
}" data-collapsed="@mixin filter($filter, $important: false) { ... }"><code>@mixin filter($filter, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Filter mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$filter</code></th><td data-label="desc"><p>the filter string (e.g. <code>blur(5px)</code> or <code>none</code>)</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.filter-element {
@include filter(blur(5px));
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.filter-element {
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-ms-filter: blur(5px);
-o-filter: blur(5px);
filter: blur(5px);
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-common-mixin-prefixer"><code>prefixer</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-filter-function-is-filter"><code>is-filter</code></a></li></ul><h3 class="item__sub-heading">TODO's</h3><ul class="list-unstyled"><li><p>manage multiple filters</p></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-filter-mixin-opacity"><h3 class="item__heading"><a class="item__name" href="#mixin-opacity">opacity</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin opacity($o, $fallbacks: false, $important: false) {
@if is-percentage-number($o) {
@if $fallbacks {
// fallbacks for ie old browsers
filter: alpha(opacity=(#{$o * 100})) important($important);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$o * 100})" important($important);
}
opacity: $o important($important);
}
@else {
@warn '`opacity: #{$o}` is not a valid opacity value';
}
}" data-collapsed="@mixin opacity($o, $fallbacks: false, $important: false) { ... }"><code>@mixin opacity($o, $fallbacks: false, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Opacity mixin<br>cross-browser with fallbacks for ie old browsers opacity mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$o</code></th><td data-label="desc"><p>the opacity value (e.g. <code>.3</code> or <code>1</code>)</p></td><td data-label="type"><code>Float</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$fallbacks</code></th><td data-label="desc"><p>if true add fallbacksa for ie old browsers</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage - default</p></div><pre class="example__code language-scss"><code>.opacity-element {
@include opacity(.3);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output - default</p></div><pre class="example__code language-css"><code>.opacity-element {
opacity: .3;
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Usage - with fallbacks</p></div><pre class="example__code language-scss"><code>.opacity-element {
@include opacity(.3, true);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output - with fallbacks</p></div><pre class="example__code language-css"><code>.opacity-element {
filter: alpha(opacity=(30));
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
opacity: .3;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-percentage-number"><code>is-percentage-number</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/css3_pr_opacity.asp">W3Schools opacity docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section><section class="main__sub-section" id="mixins-filter-variable"><h2 class="main__heading--secondary"><div class="container">variables</div></h2><section class="main__item container item" id="mixins-filter-variable-filter-functions-names"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-filter-functions-names">filter-functions-names</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$filter-functions-names: (blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate, sepia, url);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Filter functions</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-filter-function-is-filter-function"><code>is-filter-function</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-filter-variable-filter-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-filter-modes">filter-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$filter-modes: array-concat((none), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Filter modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-filter-function-is-filter"><code>is-filter</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section></section><section class="main__section"><h1 class="main__heading" id="mixins-flex"><div class="container">mixins-flex</div></h1><section class="main__sub-section" id="mixins-flex-function"><h2 class="main__heading--secondary"><div class="container">functions</div></h2><section class="main__item container item" id="mixins-flex-function-is-flex-grow"><h3 class="item__heading"><a class="item__name" href="#function-is-flex-grow">is-flex-grow</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-flex-grow($fg) {
@return is-defined($fg) and (is-number($fg) or array-contains($css-default-modes, $fg));
}" data-collapsed="@function is-flex-grow($fg) { ... }"><code>@function is-flex-grow($fg) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a support flex-grow value (number, inherit, initial)</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$fg</code></th><td data-label="desc"><p>the flex-grow value</p></td><td data-label="type"><code>Number</code> or <code>Css-default-mode</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is flex-grow value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-number"><code>is-number</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#types-common-variable-css-default-modes"><code>css-default-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-mixin-flex-grow"><code>flex-grow</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/css3_pr_flex-grow.asp">W3Schools flex-grow docs</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow">MDN flex-grow docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-flex-function-is-flex-shrink"><h3 class="item__heading"><a class="item__name" href="#function-is-flex-shrink">is-flex-shrink</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-flex-shrink($fs) {
@return is-defined($fs) and (is-number($fs) or array-contains($css-default-modes, $fs));
}" data-collapsed="@function is-flex-shrink($fs) { ... }"><code>@function is-flex-shrink($fs) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a support flex-shrink value (number, inherit, initial)</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$fs</code></th><td data-label="desc"><p>the flex-shrink value</p></td><td data-label="type"><code>Number</code> or <code>Css-default-mode</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is flex-shrink value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-number"><code>is-number</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#types-common-variable-css-default-modes"><code>css-default-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-mixin-flex-shrink"><code>flex-shrink</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/css3_pr_flex-shrink.asp">W3Schools flex-shrink docs</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink">MDN flex-shrink docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-flex-function-is-order"><h3 class="item__heading"><a class="item__name" href="#function-is-order">is-order</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-order($o) {
@return is-defined($o) and (is-integer($o) or array-contains($css-default-modes, $o));
}" data-collapsed="@function is-order($o) { ... }"><code>@function is-order($o) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a support order value (number, inherit, initial)</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$o</code></th><td data-label="desc"><p>the order value</p></td><td data-label="type"><code>Integer</code> or <code>Css-default-mode</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is order value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-integer"><code>is-integer</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#types-common-variable-css-default-modes"><code>css-default-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-mixin-order"><code>order</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/css3_pr_order.asp">W3Schools order docs</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/order">MDN order docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-flex-function-is-flex-basis"><h3 class="item__heading"><a class="item__name" href="#function-is-flex-basis">is-flex-basis</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-flex-basis($fb) {
@return is-defined($fb) and (is-size($fb) or array-contains($flex-basis-modes, $fb));
}" data-collapsed="@function is-flex-basis($fb) { ... }"><code>@function is-flex-basis($fb) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a support flex-basis mode (auto, inherit, initial)</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$fb</code></th><td data-label="desc"><p>the flex-basis value</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is flex-basis value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-size"><code>is-size</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-flex-variable-flex-basis-modes"><code>flex-basis-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-mixin-flex-basis"><code>flex-basis</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/css3_pr_flex-basis.asp">W3Schools flex-basis docs</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis">MDN flex-basis docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-flex-function-is-flex-direction"><h3 class="item__heading"><a class="item__name" href="#function-is-flex-direction">is-flex-direction</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-flex-direction($fd) {
@return is-defined($fd) and array-contains($flex-direction-modes, $fd);
}" data-collapsed="@function is-flex-direction($fd) { ... }"><code>@function is-flex-direction($fd) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a support flex-direction mode (row, row-reverse, column, column-reverse, inherit, initial)</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$fd</code></th><td data-label="desc"><p>the flex-direction value</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is flex-direction value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-flex-variable-flex-direction-modes"><code>flex-direction-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-mixin-flex-direction"><code>flex-direction</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-mixin-flex-flow"><code>flex-flow</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/css3_pr_flex-direction.asp">W3Schools flex-direction docs</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction">MDN flex-direction docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-flex-function-is-flex-wrap"><h3 class="item__heading"><a class="item__name" href="#function-is-flex-wrap">is-flex-wrap</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-flex-wrap($fw) {
@return is-defined($fw) and array-contains($flex-wrap-modes, $fw);
}" data-collapsed="@function is-flex-wrap($fw) { ... }"><code>@function is-flex-wrap($fw) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a support flex-wrap mode (nowrap, wrap, wrap-reverse, inherit, initial)</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$fw</code></th><td data-label="desc"><p>the flex-wrap mode</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is flex-wrap mode</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-flex-variable-flex-wrap-modes"><code>flex-wrap-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-mixin-flex-wrap"><code>flex-wrap</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-mixin-flex-flow"><code>flex-flow</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/css3_pr_flex-wrap.asp">W3Schools flex-wrap docs</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap">MDN flex-wrap docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section><section class="main__sub-section" id="mixins-flex-mixin"><h2 class="main__heading--secondary"><div class="container">mixins</div></h2><section class="main__item container item" id="mixins-flex-mixin-flex-grow"><h3 class="item__heading"><a class="item__name" href="#mixin-flex-grow">flex-grow</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin flex-grow($fg, $important: false) {
@if(is-flex-grow($fg)) {
flex-grow: $fg important($important);
}
@else {
@warn '`flex-grow: #{$fg}` is not a valid flex-grow value';
}
}" data-collapsed="@mixin flex-grow($fg, $important: false) { ... }"><code>@mixin flex-grow($fg, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Flex grow mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$fg</code></th><td data-label="desc"><p>the flex-grow value</p></td><td data-label="type"><code>Number</code> or <code>Css-default-mode</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.flex-grow-element {
@include flex-grow(2);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.flex-grow-element {
flex-grow: 2;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-flex-function-is-flex-grow"><code>is-flex-grow</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-flex-mixin-flex-shrink"><h3 class="item__heading"><a class="item__name" href="#mixin-flex-shrink">flex-shrink</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin flex-shrink($fs, $important: false) {
@if(is-flex-shrink($fs)) {
flex-shrink: $fs important($important);
}
@else {
@warn '`flex-shrink: #{$fs}` is not a valid flex-shrink value';
}
}" data-collapsed="@mixin flex-shrink($fs, $important: false) { ... }"><code>@mixin flex-shrink($fs, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Flex shrink mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$fs</code></th><td data-label="desc"><p>the flex-shrink value</p></td><td data-label="type"><code>Number</code> or <code>Css-default-mode</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.flex-shrink-element {
@include flex-shrink(2);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.flex-shrink-element {
flex-shrink: 2;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-flex-function-is-flex-shrink"><code>is-flex-shrink</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-flex-mixin-order"><h3 class="item__heading"><a class="item__name" href="#mixin-order">order</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin order($o, $important: false) {
@if(is-order($o)) {
order: $o important($important);
}
@else {
@warn '`order: #{$o}` is not a valid order value';
}
}" data-collapsed="@mixin order($o, $important: false) { ... }"><code>@mixin order($o, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Flex grow mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$o</code></th><td data-label="desc"><p>the order value</p></td><td data-label="type"><code>Integer</code> or <code>Css-default-mode</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.order-element {
@include order(2);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.order-element {
order: 2;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-flex-function-is-order"><code>is-order</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-flex-mixin-flex-flow"><h3 class="item__heading"><a class="item__name" href="#mixin-flex-flow">flex-flow</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin flex-flow($options, $options.direction: row, $options.wrap: nowrap, $shorthand: true, $important: false) {
$settings: (direction: row, wrap: nowrap);
@if is-object($options) {
$settings: extend($settings, $options);
}
@else {
$direction: nth-value($options, 1);
@if is-defined($direction) {
$settings: extend($settings, (direction: $direction));
}
$wrap: nth-value($options, 2);
@if is-defined($wrap) {
$settings: extend($settings, (wrap: $wrap));
}
}
$flex-flow: ();
$flex-direction: map-get($settings, direction);
@if is-defined($flex-direction) {
@if is-flex-direction($flex-direction) {
@if $shorthand == true {
$flex-flow: append($flex-flow, $flex-direction);
}
@else {
@include flex-direction($flex-direction, $important);
}
}
@else {
@warn '`flex-direction: #{$flex-direction}` is not a flex-direction value';
}
}
$flex-wrap: map-get($settings, wrap);
@if is-defined($flex-wrap) {
@if is-flex-wrap($flex-wrap) {
@if $shorthand == true {
$flex-flow: append($flex-flow, $flex-wrap);
}
@else {
@include flex-wrap($flex-wrap, $important);
}
}
@else {
@warn '`flex-wrap: #{$flex-wrap}` is not a flex-wrap value';
}
}
@if $shorthand == true {
flex-flow: $flex-flow important($important);
}
}" data-collapsed="@mixin flex-flow($options, $options.direction: row, $options.wrap: nowrap, $shorthand: true, $important: false) { ... }"><code>@mixin flex-flow($options, $options.direction: row, $options.wrap: nowrap, $shorthand: true, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Flex flow mixin - shorthand for flex-direction and flex-wrap</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$options</code></th><td data-label="desc"><p>the options</p></td><td data-label="type"><code>Object</code> or <code>Map</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.direction</code></th><td data-label="desc"><p>the flex-direction value</p></td><td data-label="type"><code>String</code></td><td data-label="default"><code>row</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.wrap</code></th><td data-label="desc"><p>the flex-wrap value</p></td><td data-label="type"><code>String</code></td><td data-label="default"><code>nowrap</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$shorthand</code></th><td data-label="desc"><p>if true, will render the flex-flow property instead of flex-direction and flex-wrap properties</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>true</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.flex-flow-element {
@include flex-flow(row-reverse wrap);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.flex-flow-element {
flex-flow: row-reverse wrap;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-mixin-flex-direction"><code>flex-direction</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-mixin-flex-wrap"><code>flex-wrap</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-flex-function-is-flex-direction"><code>is-flex-direction</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-flex-function-is-flex-wrap"><code>is-flex-wrap</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-is-object"><code>is-object</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-flex-mixin-flex-basis"><h3 class="item__heading"><a class="item__name" href="#mixin-flex-basis">flex-basis</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin flex-basis($fb, $important: false) {
@if(is-flex-basis($fb)) {
flex-basis: $fb important($important);
}
@else {
@warn '`flex-basis: #{$fb}` is not a valid flex-basis mode';
}
}" data-collapsed="@mixin flex-basis($fb, $important: false) { ... }"><code>@mixin flex-basis($fb, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Flex basis mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$fb</code></th><td data-label="desc"><p>the flex-basis mode</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.flex-basis-element {
@include flex-basis(200px);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.flex-basis-element {
flex-basis: 200px;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-flex-function-is-flex-basis"><code>is-flex-basis</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-flex-mixin-flex-direction"><h3 class="item__heading"><a class="item__name" href="#mixin-flex-direction">flex-direction</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin flex-direction($fd, $important: false) {
@if(is-flex-direction($fd)) {
flex-direction: $fd important($important);
}
@else {
@warn '`flex-direction: #{$fd}` is not a valid flex-direction mode';
}
}" data-collapsed="@mixin flex-direction($fd, $important: false) { ... }"><code>@mixin flex-direction($fd, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Flex direction mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$fd</code></th><td data-label="desc"><p>the flex-direction mode</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.flex-direction-element {
@include flex-direction(column);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.flex-direction-element {
flex-direction: column;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-flex-function-is-flex-direction"><code>is-flex-direction</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-mixin-flex-flow"><code>flex-flow</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-flex-mixin-flex-wrap"><h3 class="item__heading"><a class="item__name" href="#mixin-flex-wrap">flex-wrap</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin flex-wrap($fw, $important: false) {
@if(is-flex-wrap($fw)) {
flex-wrap: $fw important($important);
}
@else {
@warn '`flex-wrap: #{$fw}` is not a valid flex-wrap mode';
}
}" data-collapsed="@mixin flex-wrap($fw, $important: false) { ... }"><code>@mixin flex-wrap($fw, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Flex wrap mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$fw</code></th><td data-label="desc"><p>the flex-wrap mode</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.flex-wrap-element {
@include flex-wrap(wrap);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.flex-wrap-element {
flex-wrap: wrap;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-flex-function-is-flex-wrap"><code>is-flex-wrap</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-mixin-flex-flow"><code>flex-flow</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section><section class="main__sub-section" id="mixins-flex-variable"><h2 class="main__heading--secondary"><div class="container">variables</div></h2><section class="main__item container item" id="mixins-flex-variable-flex-basis-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-flex-basis-modes">flex-basis-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$flex-basis-modes: array-concat((auto), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Flex basis modes supported</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-flex-function-is-flex-basis"><code>is-flex-basis</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-flex-variable-flex-direction-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-flex-direction-modes">flex-direction-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$flex-direction-modes: array-concat((row, row-reverse, column, column-reverse), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Flex direction modes supported</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-flex-function-is-flex-direction"><code>is-flex-direction</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-flex-variable-flex-wrap-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-flex-wrap-modes">flex-wrap-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$flex-wrap-modes: array-concat((nowrap, wrap, wrap-reverse), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Flex wrap modes supported</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-flex-function-is-flex-wrap"><code>is-flex-wrap</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section></section><section class="main__section"><h1 class="main__heading" id="mixins-flex-grid"><div class="container">mixins-flex-grid</div></h1><section class="main__sub-section" id="mixins-flex-grid-function"><h2 class="main__heading--secondary"><div class="container">functions</div></h2><section class="main__item container item" id="mixins-flex-grid-function-is-align-content"><h3 class="item__heading"><a class="item__name" href="#function-is-align-content">is-align-content</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-align-content($ac) {
@return is-defined($ac) and array-contains($align-content-modes, $ac);
}" data-collapsed="@function is-align-content($ac) { ... }"><code>@function is-align-content($ac) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a support align-content mode (normal, stretch, center, flex-start, flex-end, space-between, space-around, space-evenly, inherit, initial)</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$ac</code></th><td data-label="desc"><p>the align-content value</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is align-content value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-flex-grid-variable-align-content-modes"><code>align-content-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-grid-mixin-align-content"><code>align-content</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-grid-mixin-place-content"><code>place-content</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/css3_pr_align-content.asp">W3Schools align-content docs</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-content">MDN align-content docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-flex-grid-function-is-align-items"><h3 class="item__heading"><a class="item__name" href="#function-is-align-items">is-align-items</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-align-items($ai) {
@return is-defined($ai) and array-contains($align-items-modes, $ai);
}" data-collapsed="@function is-align-items($ai) { ... }"><code>@function is-align-items($ai) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a support align-items mode (normal, stretch, center, flex-start, flex-end, space-between, space-around, space-evenly, inherit, initial)</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$ai</code></th><td data-label="desc"><p>the align-items value</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is align-items value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-flex-grid-variable-align-items-modes"><code>align-items-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-grid-mixin-align-items"><code>align-items</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-grid-mixin-place-items"><code>place-items</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/css3_pr_align-items.asp">W3Schools align-items docs</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-items">MDN align-items docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-flex-grid-function-is-align-self"><h3 class="item__heading"><a class="item__name" href="#function-is-align-self">is-align-self</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-align-self($as) {
@return is-defined($as) and array-contains($align-self-modes, $as);
}" data-collapsed="@function is-align-self($as) { ... }"><code>@function is-align-self($as) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a support align-self mode (normal, auto, center, stretch, self-start, self-end, flex-start, flex-end, inherit, initial)</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$as</code></th><td data-label="desc"><p>the align-self value</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is align-self value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-flex-grid-variable-align-self-modes"><code>align-self-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-grid-mixin-align-self"><code>align-self</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/css3_pr_align-self.asp">W3Schools align-self docs</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-self">MDN align-self docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-flex-grid-function-is-justify-content"><h3 class="item__heading"><a class="item__name" href="#function-is-justify-content">is-justify-content</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-justify-content($jc) {
@return is-defined($jc) and array-contains($justify-content-modes, $jc);
}" data-collapsed="@function is-justify-content($jc) { ... }"><code>@function is-justify-content($jc) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a support justify-content mode (normal, stretch, center, flex-start, flex-end, space-between, space-around, space-evenly, inherit, initial)</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$jc</code></th><td data-label="desc"><p>the justify-content value</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is justify-content value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-flex-grid-variable-justify-content-modes"><code>justify-content-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-grid-mixin-justify-content"><code>justify-content</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-grid-mixin-place-content"><code>place-content</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/css3_pr_justify-content.asp">W3Schools justify-content docs</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content">MDN justify-content docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-flex-grid-function-is-justify-items"><h3 class="item__heading"><a class="item__name" href="#function-is-justify-items">is-justify-items</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-justify-items($ji) {
@return is-defined($ji) and array-contains($justify-items-modes, $ji);
}" data-collapsed="@function is-justify-items($ji) { ... }"><code>@function is-justify-items($ji) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a support justify-items mode (normal, stretch, center, flex-start, flex-end, space-between, space-around, space-evenly, inherit, initial)</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$ji</code></th><td data-label="desc"><p>the justify-items value</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is justify-items value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-flex-grid-variable-justify-items-modes"><code>justify-items-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-grid-mixin-justify-items"><code>justify-items</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-grid-mixin-place-items"><code>place-items</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/css3_pr_justify-items.asp">W3Schools justify-items docs</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items">MDN justify-items docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-flex-grid-function-is-justify-self"><h3 class="item__heading"><a class="item__name" href="#function-is-justify-self">is-justify-self</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-justify-self($js) {
@return is-defined($js) and array-contains($justify-self-modes, $js);
}" data-collapsed="@function is-justify-self($js) { ... }"><code>@function is-justify-self($js) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a support justify-self mode (normal, auto, center, stretch, self-start, self-end, flex-start, flex-end, inherit, initial)</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$js</code></th><td data-label="desc"><p>the justify-self value</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is justify-self value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-flex-grid-variable-justify-self-modes"><code>justify-self-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-grid-mixin-justify-self"><code>justify-self</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/css3_pr_justify-self.asp">W3Schools justify-self docs</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self">MDN justify-self docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section><section class="main__sub-section" id="mixins-flex-grid-mixin"><h2 class="main__heading--secondary"><div class="container">mixins</div></h2><section class="main__item container item" id="mixins-flex-grid-mixin-place-content"><h3 class="item__heading"><a class="item__name" href="#mixin-place-content">place-content</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin place-content($options, $options.align-content: stretch, $options.justify-content: flex-start, $shorthand: true, $important: false) {
$settings: (align-content: stretch, justify-content: flex-start);
@if is-object($options) {
$settings: extend($settings, $options);
}
@else {
$align-content: nth-value($options, 1);
@if is-defined($align-content) {
$settings: extend($settings, (align-content: $align-content));
}
$justify-content: nth-value($options, 2);
@if is-defined($justify-content) {
$settings: extend($settings, (justify-content: $justify-content));
}
}
$place-content: ();
$align-content: map-get($settings, align-content);
@if is-defined($align-content) {
@if is-align-content($align-content) {
@if $shorthand == true {
$place-content: append($place-content, $align-content);
}
@else {
@include align-content($align-content, $important);
}
}
@else {
@warn '`align-content: #{$align-content}` is not a align-content value';
}
}
$justify-content: map-get($settings, justify-content);
@if is-defined($justify-content) {
@if is-justify-content($justify-content) {
@if $shorthand == true {
$place-content: append($place-content, $justify-content);
}
@else {
@include justify-content($justify-content, $important);
}
}
@else {
@warn '`justify-content: #{$justify-content}` is not a justify-content value';
}
}
@if $shorthand == true {
place-content: $place-content important($important);
}
}" data-collapsed="@mixin place-content($options, $options.align-content: stretch, $options.justify-content: flex-start, $shorthand: true, $important: false) { ... }"><code>@mixin place-content($options, $options.align-content: stretch, $options.justify-content: flex-start, $shorthand: true, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Place content mixin - shorthand for align-content and justify-content</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$options</code></th><td data-label="desc"><p>the options</p></td><td data-label="type"><code>Object</code> or <code>Map</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.align-content</code></th><td data-label="desc"><p>the align-content value</p></td><td data-label="type"><code>String</code></td><td data-label="default"><code>stretch</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.justify-content</code></th><td data-label="desc"><p>the justify-content value</p></td><td data-label="type"><code>String</code></td><td data-label="default"><code>flex-start</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$shorthand</code></th><td data-label="desc"><p>if true, will render the place-content property instead of align-content and justify-content properties</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>true</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.place-content-element {
@include place-content(space-between stretch);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.place-content-element {
place-content: space-between stretch;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-grid-mixin-align-content"><code>align-content</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-grid-mixin-justify-content"><code>justify-content</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-flex-grid-function-is-align-content"><code>is-align-content</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-flex-grid-function-is-justify-content"><code>is-justify-content</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-is-object"><code>is-object</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-flex-grid-mixin-place-items"><h3 class="item__heading"><a class="item__name" href="#mixin-place-items">place-items</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin place-items($options, $options.align-items: stretch, $options.justify-items: flex-start, $shorthand: true, $important: false) {
$settings: (align-items: stretch, justify-items: flex-start);
@if is-object($options) {
$settings: extend($settings, $options);
}
@else {
$align-items: nth-value($options, 1);
@if is-defined($align-items) {
$settings: extend($settings, (align-items: $align-items));
}
$justify-items: nth-value($options, 2);
@if is-defined($justify-items) {
$settings: extend($settings, (justify-items: $justify-items));
}
}
$place-items: ();
$align-items: map-get($settings, align-items);
@if is-defined($align-items) {
@if is-align-items($align-items) {
@if $shorthand == true {
$place-items: append($place-items, $align-items);
}
@else {
@include align-items($align-items, $important);
}
}
@else {
@warn '`align-items: #{$align-items}` is not a align-items value';
}
}
$justify-items: map-get($settings, justify-items);
@if is-defined($justify-items) {
@if is-justify-items($justify-items) {
@if $shorthand == true {
$place-items: append($place-items, $justify-items);
}
@else {
@include justify-items($justify-items, $important);
}
}
@else {
@warn '`justify-items: #{$justify-items}` is not a justify-items value';
}
}
@if $shorthand == true {
place-items: $place-items important($important);
}
}" data-collapsed="@mixin place-items($options, $options.align-items: stretch, $options.justify-items: flex-start, $shorthand: true, $important: false) { ... }"><code>@mixin place-items($options, $options.align-items: stretch, $options.justify-items: flex-start, $shorthand: true, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Place items mixin - shorthand for align-items and justify-items</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$options</code></th><td data-label="desc"><p>the options</p></td><td data-label="type"><code>Object</code> or <code>Map</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.align-items</code></th><td data-label="desc"><p>the align-items value</p></td><td data-label="type"><code>String</code></td><td data-label="default"><code>stretch</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.justify-items</code></th><td data-label="desc"><p>the justify-items value</p></td><td data-label="type"><code>String</code></td><td data-label="default"><code>flex-start</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$shorthand</code></th><td data-label="desc"><p>if true, will render the place-items property instead of align-items and justify-items properties</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>true</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.place-items-element {
@include place-items(space-between stretch);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.place-items-element {
place-items: space-between stretch;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-grid-mixin-align-items"><code>align-items</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-grid-mixin-justify-items"><code>justify-items</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-flex-grid-function-is-align-items"><code>is-align-items</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-flex-grid-function-is-justify-items"><code>is-justify-items</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-is-object"><code>is-object</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-flex-grid-mixin-align-content"><h3 class="item__heading"><a class="item__name" href="#mixin-align-content">align-content</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin align-content($ac, $important: false) {
@if(is-align-content($ac)) {
align-content: $ac important($important);
}
@else {
@warn '`align-content: #{$ac}` is not a valid align-content mode';
}
}" data-collapsed="@mixin align-content($ac, $important: false) { ... }"><code>@mixin align-content($ac, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Align Content mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$ac</code></th><td data-label="desc"><p>the align-content mode</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.align-content-element {
@include align-content(stretch);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.align-content-element {
align-content: stretch;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-flex-grid-function-is-align-content"><code>is-align-content</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-grid-mixin-place-content"><code>place-content</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-flex-grid-mixin-align-items"><h3 class="item__heading"><a class="item__name" href="#mixin-align-items">align-items</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin align-items($ai, $important: false) {
@if(is-align-items($ai)) {
align-items: $ai important($important);
}
@else {
@warn '`align-items: #{$ai}` is not a valid align-items mode';
}
}" data-collapsed="@mixin align-items($ai, $important: false) { ... }"><code>@mixin align-items($ai, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Align Items mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$ai</code></th><td data-label="desc"><p>the align-items mode</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.align-items-element {
@include align-items(stretch);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.align-items-element {
align-items: stretch;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-flex-grid-function-is-align-items"><code>is-align-items</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-grid-mixin-place-items"><code>place-items</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-flex-grid-mixin-align-self"><h3 class="item__heading"><a class="item__name" href="#mixin-align-self">align-self</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin align-self($as, $important: false) {
@if(is-align-self($as)) {
align-self: $as important($important);
}
@else {
@warn '`align-self: #{$as}` is not a valid align-self mode';
}
}" data-collapsed="@mixin align-self($as, $important: false) { ... }"><code>@mixin align-self($as, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Flex Align Self mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$as</code></th><td data-label="desc"><p>the align-self mode</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.align-self-element {
@include align-self(auto);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.align-self-element {
align-self: auto;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-flex-grid-function-is-align-self"><code>is-align-self</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-flex-grid-mixin-justify-content"><h3 class="item__heading"><a class="item__name" href="#mixin-justify-content">justify-content</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin justify-content($jc, $important: false) {
@if(is-justify-content($jc)) {
justify-content: $jc important($important);
}
@else {
@warn '`justify-content: #{$jc}` is not a valid justify-content mode';
}
}" data-collapsed="@mixin justify-content($jc, $important: false) { ... }"><code>@mixin justify-content($jc, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Justify Content mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$jc</code></th><td data-label="desc"><p>the justify-content mode</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.justify-content-element {
@include justify-content(stretch);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.justify-content-element {
justify-content: stretch;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-flex-grid-function-is-justify-content"><code>is-justify-content</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-grid-mixin-place-content"><code>place-content</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-flex-grid-mixin-justify-items"><h3 class="item__heading"><a class="item__name" href="#mixin-justify-items">justify-items</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin justify-items($ji, $important: false) {
@if(is-justify-items($ji)) {
justify-items: $ji important($important);
}
@else {
@warn '`justify-items: #{$ji}` is not a valid justify-items mode';
}
}" data-collapsed="@mixin justify-items($ji, $important: false) { ... }"><code>@mixin justify-items($ji, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Justify Items mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$ji</code></th><td data-label="desc"><p>the justify-items mode</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.justify-items-element {
@include justify-items(stretch);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.justify-items-element {
justify-items: stretch;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-flex-grid-function-is-justify-items"><code>is-justify-items</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-grid-mixin-place-items"><code>place-items</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-flex-grid-mixin-justify-self"><h3 class="item__heading"><a class="item__name" href="#mixin-justify-self">justify-self</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin justify-self($js, $important: false) {
@if(is-justify-self($js)) {
justify-self: $js important($important);
}
@else {
@warn '`justify-self: #{$js}` is not a valid justify-self mode';
}
}" data-collapsed="@mixin justify-self($js, $important: false) { ... }"><code>@mixin justify-self($js, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Flex Justify Self mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$js</code></th><td data-label="desc"><p>the justify-self mode</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.justify-self-element {
@include justify-self(auto);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.justify-self-element {
justify-self: auto;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-flex-grid-function-is-justify-self"><code>is-justify-self</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section><section class="main__sub-section" id="mixins-flex-grid-variable"><h2 class="main__heading--secondary"><div class="container">variables</div></h2><section class="main__item container item" id="mixins-flex-grid-variable-align-content-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-align-content-modes">align-content-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$align-content-modes: array-concat((normal, stretch, center, flex-start, flex-end, space-between, space-around, space-evenly), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Align Content modes supported</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-flex-grid-function-is-align-content"><code>is-align-content</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-flex-grid-variable-align-items-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-align-items-modes">align-items-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$align-items-modes: array-concat((normal, stretch, center, flex-start, flex-end, space-between, space-around, space-evenly), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Align Items modes supported</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-flex-grid-function-is-align-items"><code>is-align-items</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-flex-grid-variable-align-self-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-align-self-modes">align-self-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$align-self-modes: array-concat((normal, auto, center, stretch, self-start, self-end, flex-start, flex-end), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Align Self modes supported</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-flex-grid-function-is-align-self"><code>is-align-self</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-flex-grid-variable-justify-content-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-justify-content-modes">justify-content-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$justify-content-modes: array-concat((normal, stretch, center, flex-start, flex-end, space-between, space-around, space-evenly), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Justify Content modes supported</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-flex-grid-function-is-justify-content"><code>is-justify-content</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-flex-grid-variable-justify-items-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-justify-items-modes">justify-items-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$justify-items-modes: array-concat((normal, stretch, center, flex-start, flex-end, space-between, space-around, space-evenly), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Justify Items modes supported</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-flex-grid-function-is-justify-items"><code>is-justify-items</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-flex-grid-variable-justify-self-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-justify-self-modes">justify-self-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$justify-self-modes: array-concat((normal, auto, center, stretch, self-start, self-end, flex-start, flex-end), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Justify Self modes supported</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-flex-grid-function-is-justify-self"><code>is-justify-self</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section></section><section class="main__section"><h1 class="main__heading" id="mixins-float"><div class="container">mixins-float</div></h1><section class="main__sub-section" id="mixins-float-function"><h2 class="main__heading--secondary"><div class="container">functions</div></h2><section class="main__item container item" id="mixins-float-function-is-clear"><h3 class="item__heading"><a class="item__name" href="#function-is-clear">is-clear</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-clear($f) {
@return is-defined($f) and array-contains($clear-modes, $f);
}" data-collapsed="@function is-clear($f) { ... }"><code>@function is-clear($f) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if clear mode is valid (none, left, right, both, inherit, initial)</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$f</code></th><td data-label="desc"><p>the clear value</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is clear value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-float-variable-clear-modes"><code>clear-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-float-mixin-clear"><code>clear</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/pr_class_clear.asp">W3Schools clear docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-float-function-is-float"><h3 class="item__heading"><a class="item__name" href="#function-is-float">is-float</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-float($f) {
@return is-defined($f) and array-contains($float-modes, $f);
}" data-collapsed="@function is-float($f) { ... }"><code>@function is-float($f) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if float mode is valid (none, left, right, inherit, initial)</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$f</code></th><td data-label="desc"><p>the float value</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is float value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-float-variable-float-modes"><code>float-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-float-mixin-float"><code>float</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/pr_class_float.asp">W3Schools float docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section><section class="main__sub-section" id="mixins-float-mixin"><h2 class="main__heading--secondary"><div class="container">mixins</div></h2><section class="main__item container item" id="mixins-float-mixin-clear"><h3 class="item__heading"><a class="item__name" href="#mixin-clear">clear</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin clear($clear, $important: false) {
@if is-clear($clear) {
clear: $clear important($important);
}
@else {
@warn '`clear: #{$clear}` is not a valid clear value';
}
}" data-collapsed="@mixin clear($clear, $important: false) { ... }"><code>@mixin clear($clear, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Clear mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$clear</code></th><td data-label="desc"><p>the clear value (e.g. <code>left</code> or <code>none</code>)</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.clear-element {
@include clear(left);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.clear-element {
clear: left;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-float-function-is-clear"><code>is-clear</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-float-mixin-float"><h3 class="item__heading"><a class="item__name" href="#mixin-float">float</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin float($float, $important: false) {
@if is-float($float) {
float: $float important($important);
}
@else {
@warn '`float: #{$float}` is not a valid float value';
}
}" data-collapsed="@mixin float($float, $important: false) { ... }"><code>@mixin float($float, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Float mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$float</code></th><td data-label="desc"><p>the float value (e.g. <code>left</code> or <code>none</code>)</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.float-element {
@include float(left);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.float-element {
float: left;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-float-function-is-float"><code>is-float</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section><section class="main__sub-section" id="mixins-float-variable"><h2 class="main__heading--secondary"><div class="container">variables</div></h2><section class="main__item container item" id="mixins-float-variable-clear-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-clear-modes">clear-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$clear-modes: array-concat((none, left, right, both), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Clear modes supported</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-float-function-is-clear"><code>is-clear</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-float-variable-float-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-float-modes">float-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$float-modes: array-concat((none, left, right), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Float modes supported</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-float-function-is-float"><code>is-float</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section></section><section class="main__section"><h1 class="main__heading" id="mixins-margin"><div class="container">Mixins - Margin</div></h1><section class="main__sub-section" id="mixins-margin-function"><h2 class="main__heading--secondary"><div class="container">functions</div></h2><section class="main__item container item" id="mixins-margin-function-is-margin"><h3 class="item__heading"><a class="item__name" href="#function-is-margin">is-margin</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-margin($m) {
@return is-defined($m) and (array-contains($margin-modes, $m) or is-length($m));
}" data-collapsed="@function is-margin($m) { ... }"><code>@function is-margin($m) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a margin value</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$m</code></th><td data-label="desc"><p>the margin value (e.g. <code>auto</code> or <code>20px</code>)</p></td><td data-label="type"><code>String</code> or <code>Length</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is margin value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-length"><code>is-length</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-margin-variable-margin-modes"><code>margin-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-margin-mixin-margin-direction"><code>margin-direction</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section><section class="main__sub-section" id="mixins-margin-mixin"><h2 class="main__heading--secondary"><div class="container">mixins</div></h2><section class="main__item container item" id="mixins-margin-mixin-margin-direction"><h3 class="item__heading"><a class="item__name" href="#mixin-margin-direction">margin-direction</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin margin-direction($m, $margin-direction-selector: margin, $important: false) {
@if is-defined($m) {
@if is-margin($m) {
#{$margin-direction-selector}: $m important($important);
}
@else {
@warn '`#{$margin-direction-selector}: #{$m}` is not a valid margin value';
}
}
}" data-collapsed="@mixin margin-direction($m, $margin-direction-selector: margin, $important: false) { ... }"><code>@mixin margin-direction($m, $margin-direction-selector: margin, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Margin direction mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$m</code></th><td data-label="desc"><p>the margin value (e.g. <code>auto</code> or <code>20px</code>)</p></td><td data-label="type"><code>String</code> or <code>Length</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$margin-direction-selector</code></th><td data-label="desc"><p>the margin direction (e.g. <code>margin-top</code>)</p></td><td data-label="type"><code>String</code></td><td data-label="default"><code>margin</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.margin-direction-element {
@include margin-direction(5px);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.margin-direction-element {
margin: 5px;
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Usage - margin-left</p></div><pre class="example__code language-scss"><code>.margin-direction-element {
@include margin-direction(5px, margin-left);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output - margin-left</p></div><pre class="example__code language-css"><code>.margin-direction-element {
margin-left: 5px;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-margin-function-is-margin"><code>is-margin</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-margin-mixin-margin-top"><code>margin-top</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-margin-mixin-margin-right"><code>margin-right</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-margin-mixin-margin-bottom"><code>margin-bottom</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-margin-mixin-margin-left"><code>margin-left</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-margin-mixin-margin-top"><h3 class="item__heading"><a class="item__name" href="#mixin-margin-top">margin-top</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin margin-top($m, $important: false) {
@include margin-direction($m, margin-top, $important);
}" data-collapsed="@mixin margin-top($m, $important: false) { ... }"><code>@mixin margin-top($m, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Margin top mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$m</code></th><td data-label="desc"><p>the margin value (e.g. <code>auto</code> or <code>20px</code>)</p></td><td data-label="type"><code>String</code> or <code>Length</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.margin-top-element {
@include margin-top(5px);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.margin-top-element {
margin-top: 5px;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-margin-mixin-margin-direction"><code>margin-direction</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-margin-mixin-margin"><code>margin</code></a></li></ul><h3 class="item__sub-heading">See</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-margin-direction"><code>margin-direction</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-margin-mixin-margin-right"><h3 class="item__heading"><a class="item__name" href="#mixin-margin-right">margin-right</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin margin-right($m, $important: false) {
@include margin-direction($m, margin-right, $important);
}" data-collapsed="@mixin margin-right($m, $important: false) { ... }"><code>@mixin margin-right($m, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Margin right mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$m</code></th><td data-label="desc"><p>the margin value (e.g. <code>auto</code> or <code>20px</code>)</p></td><td data-label="type"><code>String</code> or <code>Length</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.margin-right-element {
@include margin-right(5px);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.margin-right-element {
margin-right: 5px;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-margin-mixin-margin-direction"><code>margin-direction</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-margin-mixin-margin"><code>margin</code></a></li></ul><h3 class="item__sub-heading">See</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-margin-direction"><code>margin-direction</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-margin-mixin-margin-bottom"><h3 class="item__heading"><a class="item__name" href="#mixin-margin-bottom">margin-bottom</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin margin-bottom($m, $important: false) {
@include margin-direction($m, margin-bottom, $important);
}" data-collapsed="@mixin margin-bottom($m, $important: false) { ... }"><code>@mixin margin-bottom($m, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Margin bottom mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$m</code></th><td data-label="desc"><p>the margin value (e.g. <code>auto</code> or <code>20px</code>)</p></td><td data-label="type"><code>String</code> or <code>Length</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.margin-bottom-element {
@include margin-bottom(5px);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.margin-bottom-element {
margin-bottom: 5px;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-margin-mixin-margin-direction"><code>margin-direction</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-margin-mixin-margin"><code>margin</code></a></li></ul><h3 class="item__sub-heading">See</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-margin-direction"><code>margin-direction</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-margin-mixin-margin-left"><h3 class="item__heading"><a class="item__name" href="#mixin-margin-left">margin-left</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin margin-left($m, $important: false) {
@include margin-direction($m, margin-left, $important);
}" data-collapsed="@mixin margin-left($m, $important: false) { ... }"><code>@mixin margin-left($m, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Margin left mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$m</code></th><td data-label="desc"><p>the margin value (e.g. <code>auto</code> or <code>20px</code>)</p></td><td data-label="type"><code>String</code> or <code>Length</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.margin-left-element {
@include margin-left(5px);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.margin-left-element {
margin-left: 5px;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-margin-mixin-margin-direction"><code>margin-direction</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-margin-mixin-margin"><code>margin</code></a></li></ul><h3 class="item__sub-heading">See</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-margin-direction"><code>margin-direction</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-margin-mixin-margin"><h3 class="item__heading"><a class="item__name" href="#mixin-margin">margin</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin margin($m, $important: false) {
$margin-top: nth-value($m, 1, 0);
$margin-right: nth-value($m, 2, $margin-top);
$margin-bottom: nth-value($m, 3, $margin-top);
$margin-left: nth-value($m, 4, $margin-right);
@include margin-top($margin-top, $important);
@include margin-right($margin-right, $important);
@include margin-bottom($margin-bottom, $important);
@include margin-left($margin-left, $important);
}" data-collapsed="@mixin margin($m, $important: false) { ... }"><code>@mixin margin($m, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Margin mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$m</code></th><td data-label="desc"><p>the margin value (e.g. <code>auto</code> or <code>20px</code>)</p></td><td data-label="type"><code>String</code> or <code>Length</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage - single value</p></div><pre class="example__code language-scss"><code>.margin-element {
@include margin(5px);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output - single value</p></div><pre class="example__code language-css"><code>.margin-element {
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Usage - two values</p></div><pre class="example__code language-scss"><code>.margin-element {
@include margin(5px 10px);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output - two values</p></div><pre class="example__code language-css"><code>.margin-element {
margin-top: 5px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Usage - three values</p></div><pre class="example__code language-scss"><code>.margin-element {
@include margin(5px 10px 7px);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output - three values</p></div><pre class="example__code language-css"><code>.margin-element {
margin-top: 5px;
margin-right: 10px;
margin-bottom: 7px;
margin-left: 10px;
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Usage - four values</p></div><pre class="example__code language-scss"><code>.margin-element {
@include margin(5px 10px 7px 15px);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output - four values</p></div><pre class="example__code language-css"><code>.margin-element {
margin-top: 5px;
margin-right: 10px;
margin-bottom: 7px;
margin-left: 15px;
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Usage - null values</p></div><pre class="example__code language-scss"><code>.margin-element {
@include margin(5px null null 15px);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output - null values</p></div><pre class="example__code language-css"><code>.margin-element {
margin-top: 5px;
margin-left: 15px;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-margin-mixin-margin-top"><code>margin-top</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-margin-mixin-margin-right"><code>margin-right</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-margin-mixin-margin-bottom"><code>margin-bottom</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-margin-mixin-margin-left"><code>margin-left</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-ellipsis"><code>ellipsis</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section><section class="main__sub-section" id="mixins-margin-variable"><h2 class="main__heading--secondary"><div class="container">variables</div></h2><section class="main__item container item" id="mixins-margin-variable-margin-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-margin-modes">margin-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$margin-modes: array-concat((auto), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Margin modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-margin-function-is-margin"><code>is-margin</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section></section><section class="main__section"><h1 class="main__heading" id="mixins-media"><div class="container">Mixins - Media</div></h1><section class="main__sub-section" id="mixins-media-mixin"><h2 class="main__heading--secondary"><div class="container">mixins</div></h2><section class="main__item container item" id="mixins-media-mixin-media"><h3 class="item__heading"><a class="item__name" href="#mixin-media">media</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin media() {
$media-type: 'only screen';
$media-type-key: 'media-type';
$args: keywords($args);
$expr: '';
@if map-has-key($args, $media-type-key) {
$media-type: map-get($args, $media-type-key);
$args: map-remove($args, $media-type-key);
}
$expr: "#{$media-type}";
@each $key, $value in $args {
@if $value {
$expr: "#{$expr} and (#{$key}: #{$value})";
}
}
@media #{$expr} {
@content;
}
}" data-collapsed="@mixin media() { ... }"><code>@mixin media() { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Media query mixin</p></div><h3 class="item__sub-heading">Parameters</h3><p>None.</p><h3 class="item__sub-heading">TODO's</h3><ul class="list-unstyled"><li><p>refactor this mixin</p></li><li><p>write documentation</p></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section></section><section class="main__section"><h1 class="main__heading" id="mixins-outline"><div class="container">Mixins - Outline</div></h1><section class="main__sub-section" id="mixins-outline-function"><h2 class="main__heading--secondary"><div class="container">functions</div></h2><section class="main__item container item" id="mixins-outline-function-is-outline-width"><h3 class="item__heading"><a class="item__name" href="#function-is-outline-width">is-outline-width</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-outline-width($ow) {
@return is-defined($ow) and (is-length($ow) or array-contains($overflow-width-modes, $ow));
}" data-collapsed="@function is-outline-width($ow) { ... }"><code>@function is-outline-width($ow) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a supported outline width value</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$ow</code></th><td data-label="desc"><p>the outline-width value</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is outline-width value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-length"><code>is-length</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-outline-mixin-outline-width"><code>outline-width</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-outline-function-is-outline-style"><h3 class="item__heading"><a class="item__name" href="#function-is-outline-style">is-outline-style</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-outline-style($os) {
@return is-defined($os) and array-contains($overflow-style-modes, $os);
}" data-collapsed="@function is-outline-style($os) { ... }"><code>@function is-outline-style($os) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a supported outline style value</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$os</code></th><td data-label="desc"><p>the outline-style value</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is outline-style value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-outline-mixin-outline-style"><code>outline-style</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-outline-function-is-outline-color"><h3 class="item__heading"><a class="item__name" href="#function-is-outline-color">is-outline-color</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-outline-color($oc) {
@return is-defined($oc) and (is-color($oc) or array-contains($overflow-color-modes, $oc));
}" data-collapsed="@function is-outline-color($oc) { ... }"><code>@function is-outline-color($oc) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a supported outline color value</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$oc</code></th><td data-label="desc"><p>the outline-color value</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is outline-color value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-color-function-is-color"><code>is-color</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-outline-mixin-outline-color"><code>outline-color</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-outline-function-is-outline-offset"><h3 class="item__heading"><a class="item__name" href="#function-is-outline-offset">is-outline-offset</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-outline-offset($oo) {
@return is-defined($oo) and (is-length($oo) or array-contains($css-default-modes, $oo));
}" data-collapsed="@function is-outline-offset($oo) { ... }"><code>@function is-outline-offset($oo) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a supported outline offset value</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$oo</code></th><td data-label="desc"><p>the outline-offset value</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is outline-offset value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-length"><code>is-length</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#types-common-variable-css-default-modes"><code>css-default-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-outline-mixin-outline-offset"><code>outline-offset</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section><section class="main__sub-section" id="mixins-outline-mixin"><h2 class="main__heading--secondary"><div class="container">mixins</div></h2><section class="main__item container item" id="mixins-outline-mixin-outline-width"><h3 class="item__heading"><a class="item__name" href="#mixin-outline-width">outline-width</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin outline-width($ow: medium, $important: false) {
@if is-outline-width($ow) {
outline-width: $ow important($important);
}
@else {
@warn '`outline-width: #{$ow}` is not a valid outline-width value';
}
}" data-collapsed="@mixin outline-width($ow: medium, $important: false) { ... }"><code>@mixin outline-width($ow: medium, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Outline width mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$ow</code></th><td data-label="desc"><p>the outline-width value</p></td><td data-label="type"><code>String</code> or <code>Size</code> or <code>Length</code></td><td data-label="default"><code>medium</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.outline-width-element {
@include outline-width(2px);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.outline-width-element {
outline-width: 2px;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-outline-function-is-outline-width"><code>is-outline-width</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-outline-mixin-outline"><code>outline</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/pr_outline-width.asp">W3Schools outline-width docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-outline-mixin-outline-style"><h3 class="item__heading"><a class="item__name" href="#mixin-outline-style">outline-style</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin outline-style($os: none, $important: false) {
@if is-outline-style($os) {
outline-style: $os important($important);
}
@else {
@warn '`outline-style: #{$os}` is not a valid outline-style value';
}
}" data-collapsed="@mixin outline-style($os: none, $important: false) { ... }"><code>@mixin outline-style($os: none, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Outline style mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$os</code></th><td data-label="desc"><p>the outline-style value</p></td><td data-label="type"><code>String</code></td><td data-label="default"><code>none</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.outline-style-element {
@include outline-style(dotted);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.outline-style-element {
outline-style: dotted;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-outline-function-is-outline-style"><code>is-outline-style</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-outline-mixin-outline"><code>outline</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/pr_outline-style.asp">W3Schools outline-style docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-outline-mixin-outline-color"><h3 class="item__heading"><a class="item__name" href="#mixin-outline-color">outline-color</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin outline-color($oc: invert, $important: false) {
@if is-outline-color($oc) {
outline-color: $oc important($important);
}
@else {
@warn '`outline-color: #{$oc}` is not a valid outline-color value';
}
}" data-collapsed="@mixin outline-color($oc: invert, $important: false) { ... }"><code>@mixin outline-color($oc: invert, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Outline color mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$oc</code></th><td data-label="desc"><p>the outline-color value</p></td><td data-label="type"><code>String</code> or <code>Color</code></td><td data-label="default"><code>invert</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.outline-color-element {
@include outline-color(#ffa);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.outline-color-element {
outline-color: #ffa;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-outline-function-is-outline-color"><code>is-outline-color</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-outline-mixin-outline"><code>outline</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/pr_outline-color.asp">W3Schools outline-color docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-outline-mixin-outline-offset"><h3 class="item__heading"><a class="item__name" href="#mixin-outline-offset">outline-offset</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin outline-offset($oo: 0, $important: false) {
@if is-outline-offset($oo) {
outline-offset: $oo important($important);
}
@else {
@warn '`outline-offset: #{$oo}` is not a valid outline-offset value';
}
}" data-collapsed="@mixin outline-offset($oo: 0, $important: false) { ... }"><code>@mixin outline-offset($oo: 0, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Outline offset mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$oo</code></th><td data-label="desc"><p>the outline-offset value</p></td><td data-label="type"><code>String</code> or <code>Size</code> or <code>Length</code></td><td data-label="default"><code>0</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.outline-offset-element {
@include outline-offset(2px);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.outline-offset-element {
outline-offset: 2px;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-outline-function-is-outline-offset"><code>is-outline-offset</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-outline-mixin-outline"><code>outline</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/css3_pr_outline-offset.asp">W3Schools outline-offset docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-outline-mixin-outline"><h3 class="item__heading"><a class="item__name" href="#mixin-outline">outline</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin outline($options, $options.size: medium, $options.style: none, $options.color: invert, $options.offset: null, $important: false) {
@if is-outline-mode($options) {
outline: $options important($important);
}
@else {
$settings: (size: medium, style: none, color: invert, offset: null);
@if is-object($options) {
$settings: extend($settings, $options);
}
@else {
$size: nth-value($options, 1);
@if is-defined($size) {
$settings: extend($settings, (size: $size));
}
$style: nth-value($options, 2);
@if is-defined($style) {
$settings: extend($settings, (style: $style));
}
$color: nth-value($options, 3);
@if is-defined($color) {
$settings: extend($settings, (color: $color));
}
$offset: nth-value($options, 4);
@if is-defined($offset) {
$settings: extend($settings, (offset: $offset));
}
}
$outline-width: get($settings, size);
@if is-defined($outline-width) {
@include outline-width($outline-width, $important);
}
$outline-style: get($settings, style);
@if is-defined($outline-style) {
@include outline-style($outline-style, $important);
}
$outline-color: get($settings, color);
@if is-defined($outline-color) {
@include outline-color($outline-color, $important);
}
$outline-offset: get($settings, offset);
@if is-defined($outline-offset) {
@include outline-offset($outline-offset, $important);
}
}
}" data-collapsed="@mixin outline($options, $options.size: medium, $options.style: none, $options.color: invert, $options.offset: null, $important: false) { ... }"><code>@mixin outline($options, $options.size: medium, $options.style: none, $options.color: invert, $options.offset: null, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Outline mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$options</code></th><td data-label="desc"><p>the outline options</p></td><td data-label="type"><code>String</code> or <code>Object</code> or <code>Map</code> or <code>Array</code> or <code>List</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.size</code></th><td data-label="desc"><p>the outline-width value</p></td><td data-label="type"><code>String</code> or <code>Size</code> or <code>Length</code></td><td data-label="default"><code>medium</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.style</code></th><td data-label="desc"><p>the outline-style value</p></td><td data-label="type"><code>String</code></td><td data-label="default"><code>none</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.color</code></th><td data-label="desc"><p>the outline-color value</p></td><td data-label="type"><code>String</code> or <code>Color</code></td><td data-label="default"><code>invert</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.offset</code></th><td data-label="desc"><p>the outline-offset value</p></td><td data-label="type"><code>String</code> or <code>Size</code> or <code>Length</code></td><td data-label="default"><code>null</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.outline-element {
@include outline(2px solid #000 1px);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.outline-element {
outline-width: 2px;
outline-style: solid;
outline-color: #000;
outline-offset: 1px;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-outline-mixin-outline-width"><code>outline-width</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-outline-mixin-outline-style"><code>outline-style</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-outline-mixin-outline-color"><code>outline-color</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-outline-mixin-outline-offset"><code>outline-offset</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-is-object"><code>is-object</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-get"><code>get</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-get"><code>get</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-get"><code>get</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-get"><code>get</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-outline-mixin-outline-force"><code>outline-force</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-outline-mixin-outline-force"><code>outline-force</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-outline-mixin-outline-force"><h3 class="item__heading"><a class="item__name" href="#mixin-outline-force">outline-force</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin outline-force($options, $options.size: medium, $options.style: none, $options.color: invert, $options.offset: null, $important: false) {
@include outline($o, $important);
&:active,
&:focus {
@include outline($o, $important);
}
}" data-collapsed="@mixin outline-force($options, $options.size: medium, $options.style: none, $options.color: invert, $options.offset: null, $important: false) { ... }"><code>@mixin outline-force($options, $options.size: medium, $options.style: none, $options.color: invert, $options.offset: null, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Outline force mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$options</code></th><td data-label="desc"><p>the outline options</p></td><td data-label="type"><code>String</code> or <code>Object</code> or <code>Map</code> or <code>Array</code> or <code>List</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.size</code></th><td data-label="desc"><p>the outline-width value</p></td><td data-label="type"><code>String</code> or <code>Size</code> or <code>Length</code></td><td data-label="default"><code>medium</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.style</code></th><td data-label="desc"><p>the outline-style value</p></td><td data-label="type"><code>String</code></td><td data-label="default"><code>none</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.color</code></th><td data-label="desc"><p>the outline-color value</p></td><td data-label="type"><code>String</code> or <code>Color</code></td><td data-label="default"><code>invert</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.offset</code></th><td data-label="desc"><p>the outline-offset value</p></td><td data-label="type"><code>String</code> or <code>Size</code> or <code>Length</code></td><td data-label="default"><code>null</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.outline-force-element {
@include outline-force(none);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.outline-force-element {
outline-width: medium;
outline-style: none;
outline-color: invert;
}
.outline-force-element:active,
.outline-force-element:focus, {
outline-width: medium;
outline-style: none;
outline-color: invert;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-outline-mixin-outline"><code>outline</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-outline-mixin-outline"><code>outline</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section><section class="main__sub-section" id="mixins-outline-variable"><h2 class="main__heading--secondary"><div class="container">variables</div></h2><section class="main__item container item" id="mixins-outline-variable-outline-width-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-outline-width-modes">outline-width-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$outline-width-modes: array-concat((medium, thin, thick), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Outline width modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-outline-variable-outline-style-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-outline-style-modes">outline-style-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$outline-style-modes: array-concat((none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Outline style modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-outline-variable-outline-color-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-outline-color-modes">outline-color-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$outline-color-modes: array-concat((invert), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Outline color modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section></section><section class="main__section"><h1 class="main__heading" id="mixins-overflow"><div class="container">Mixins - Overflow</div></h1><section class="main__sub-section" id="mixins-overflow-function"><h2 class="main__heading--secondary"><div class="container">functions</div></h2><section class="main__item container item" id="mixins-overflow-function-is-overflow"><h3 class="item__heading"><a class="item__name" href="#function-is-overflow">is-overflow</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-overflow($o) {
@return is-defined($o) and array-contains($overflow-modes, $o);
}" data-collapsed="@function is-overflow($o) { ... }"><code>@function is-overflow($o) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a supported overflow mode</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$o</code></th><td data-label="desc"><p>the overflow mode</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is overflow mode</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-overflow-variable-overflow-modes"><code>overflow-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-overflow-mixin-overflow"><code>overflow</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-overflow-mixin-overflow"><code>overflow</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section><section class="main__sub-section" id="mixins-overflow-mixin"><h2 class="main__heading--secondary"><div class="container">mixins</div></h2><section class="main__item container item" id="mixins-overflow-mixin-overflow"><h3 class="item__heading"><a class="item__name" href="#mixin-overflow">overflow</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin overflow($o, $important: false) {
$overflow-x: nth-value($o, 1);
@if is-overflow($overflow-x) {
overflow-x: $overflow-x important($important);
}
@else {
@warn '`overflow-x: #{$o}` is not a valid overflow value';
}
$overflow-y: nth-value($o, 2, $overflow-x);
@if is-overflow($overflow-y) {
overflow-y: $overflow-y important($important);
}
@else {
@warn '`overflow-y: #{$o}` is not a valid overflow value';
}
}" data-collapsed="@mixin overflow($o, $important: false) { ... }"><code>@mixin overflow($o, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Overflow mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$o</code></th><td data-label="desc"><p>the overflow mode</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.overflow-element {
@include overflow(hidden);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.overflow-element {
overflow-x: hidden;
overflow-y: hidden;
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.overflow-element {
@include overflow(hidden scroll);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.overflow-element {
overflow-x: hidden;
overflow-y: scroll;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-overflow-function-is-overflow"><code>is-overflow</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-overflow-function-is-overflow"><code>is-overflow</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-common-mixin-hidden"><code>hidden</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-ellipsis"><code>ellipsis</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section><section class="main__sub-section" id="mixins-overflow-variable"><h2 class="main__heading--secondary"><div class="container">variables</div></h2><section class="main__item container item" id="mixins-overflow-variable-overflow-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-overflow-modes">overflow-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$overflow-modes: array-concat((visible, hidden, scroll, overlay, unset, auto), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Overflow modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-overflow-function-is-overflow"><code>is-overflow</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section></section><section class="main__section"><h1 class="main__heading" id="mixins-padding"><div class="container">Mixins - Padding</div></h1><section class="main__sub-section" id="mixins-padding-function"><h2 class="main__heading--secondary"><div class="container">functions</div></h2><section class="main__item container item" id="mixins-padding-function-is-padding"><h3 class="item__heading"><a class="item__name" href="#function-is-padding">is-padding</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-padding($p) {
@return is-defined($p) and (array-contains($css-default-modes, $p) or is-length($p));
}" data-collapsed="@function is-padding($p) { ... }"><code>@function is-padding($p) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a padding value</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$p</code></th><td data-label="desc"><p>the padding value (e.g. <code>initial</code> or <code>20px</code>)</p></td><td data-label="type"><code>String</code> or <code>Length</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is padding value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-length"><code>is-length</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#types-common-variable-css-default-modes"><code>css-default-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-padding-mixin-padding-direction"><code>padding-direction</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section><section class="main__sub-section" id="mixins-padding-mixin"><h2 class="main__heading--secondary"><div class="container">mixins</div></h2><section class="main__item container item" id="mixins-padding-mixin-padding-direction"><h3 class="item__heading"><a class="item__name" href="#mixin-padding-direction">padding-direction</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin padding-direction($p, $padding-direction-selector: padding, $important: false) {
@if is-defined($p) {
@if is-padding($p) {
#{$padding-direction-selector}: $p important($important);
}
@else {
@warn '`#{$padding-direction-selector}: #{$p}` is not a valid padding value';
}
}
}" data-collapsed="@mixin padding-direction($p, $padding-direction-selector: padding, $important: false) { ... }"><code>@mixin padding-direction($p, $padding-direction-selector: padding, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Padding direction mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$p</code></th><td data-label="desc"><p>the padding value (e.g. <code>initial</code> or <code>20px</code>)</p></td><td data-label="type"><code>String</code> or <code>Length</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$padding-direction-selector</code></th><td data-label="desc"><p>the padding direction (e.g. <code>padding-top</code>)</p></td><td data-label="type"><code>String</code></td><td data-label="default"><code>padding</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.padding-direction-element {
@include padding-direction(5px);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.padding-direction-element {
padding: 5px;
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Usage - padding-left</p></div><pre class="example__code language-scss"><code>.padding-direction-element {
@include padding-direction(5px, padding-left);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output - padding-left</p></div><pre class="example__code language-css"><code>.padding-direction-element {
padding-left: 5px;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-padding-function-is-padding"><code>is-padding</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-padding-mixin-padding-top"><code>padding-top</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-padding-mixin-padding-right"><code>padding-right</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-padding-mixin-padding-bottom"><code>padding-bottom</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-padding-mixin-padding-left"><code>padding-left</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-padding-mixin-padding-top"><h3 class="item__heading"><a class="item__name" href="#mixin-padding-top">padding-top</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin padding-top($p, $important: false) {
@include padding-direction($p, padding-top, $important);
}" data-collapsed="@mixin padding-top($p, $important: false) { ... }"><code>@mixin padding-top($p, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Padding top mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$p</code></th><td data-label="desc"><p>the padding value (e.g. <code>initial</code> or <code>20px</code>)</p></td><td data-label="type"><code>String</code> or <code>Length</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.padding-top-element {
@include padding-top(5px);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.padding-top-element {
padding-top: 5px;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-padding-mixin-padding-direction"><code>padding-direction</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-padding-mixin-padding"><code>padding</code></a></li></ul><h3 class="item__sub-heading">See</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-padding-direction"><code>padding-direction</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-padding-mixin-padding-right"><h3 class="item__heading"><a class="item__name" href="#mixin-padding-right">padding-right</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin padding-right($p, $important: false) {
@include padding-direction($p, padding-right, $important);
}" data-collapsed="@mixin padding-right($p, $important: false) { ... }"><code>@mixin padding-right($p, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Padding right mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$p</code></th><td data-label="desc"><p>the padding value (e.g. <code>initial</code> or <code>20px</code>)</p></td><td data-label="type"><code>String</code> or <code>Length</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.padding-right-element {
@include padding-right(5px);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.padding-right-element {
padding-right: 5px;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-padding-mixin-padding-direction"><code>padding-direction</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-padding-mixin-padding"><code>padding</code></a></li></ul><h3 class="item__sub-heading">See</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-padding-direction"><code>padding-direction</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-padding-mixin-padding-bottom"><h3 class="item__heading"><a class="item__name" href="#mixin-padding-bottom">padding-bottom</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin padding-bottom($p, $important: false) {
@include padding-direction($p, padding-bottom, $important);
}" data-collapsed="@mixin padding-bottom($p, $important: false) { ... }"><code>@mixin padding-bottom($p, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Padding bottom mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$p</code></th><td data-label="desc"><p>the padding value (e.g. <code>initial</code> or <code>20px</code>)</p></td><td data-label="type"><code>String</code> or <code>Length</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.padding-bottom-element {
@include padding-bottom(5px);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.padding-bottom-element {
padding-bottom: 5px;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-padding-mixin-padding-direction"><code>padding-direction</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-padding-mixin-padding"><code>padding</code></a></li></ul><h3 class="item__sub-heading">See</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-padding-direction"><code>padding-direction</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-padding-mixin-padding-left"><h3 class="item__heading"><a class="item__name" href="#mixin-padding-left">padding-left</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin padding-left($p, $important: false) {
@include padding-direction($p, padding-left, $important);
}" data-collapsed="@mixin padding-left($p, $important: false) { ... }"><code>@mixin padding-left($p, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Padding left mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$p</code></th><td data-label="desc"><p>the padding value (e.g. <code>initial</code> or <code>20px</code>)</p></td><td data-label="type"><code>String</code> or <code>Length</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.padding-left-element {
@include padding-left(5px);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.padding-left-element {
padding-left: 5px;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-padding-mixin-padding-direction"><code>padding-direction</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-padding-mixin-padding"><code>padding</code></a></li></ul><h3 class="item__sub-heading">See</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-padding-direction"><code>padding-direction</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-padding-mixin-padding"><h3 class="item__heading"><a class="item__name" href="#mixin-padding">padding</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin padding($p, $important: false) {
$padding-top: nth-value($p, 1, 0);
$padding-right: nth-value($p, 2, $padding-top);
$padding-bottom: nth-value($p, 3, $padding-top);
$padding-left: nth-value($p, 4, $padding-right);
@include padding-top($padding-top, $important);
@include padding-right($padding-right, $important);
@include padding-bottom($padding-bottom, $important);
@include padding-left($padding-left, $important);
}" data-collapsed="@mixin padding($p, $important: false) { ... }"><code>@mixin padding($p, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Padding mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$p</code></th><td data-label="desc"><p>the padding value (e.g. <code>initial</code> or <code>20px</code>)</p></td><td data-label="type"><code>String</code> or <code>Length</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage - single value</p></div><pre class="example__code language-scss"><code>.padding-element {
@include padding(5px);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output - single value</p></div><pre class="example__code language-css"><code>.padding-element {
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Usage - two values</p></div><pre class="example__code language-scss"><code>.padding-element {
@include padding(5px 10px);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output - two values</p></div><pre class="example__code language-css"><code>.padding-element {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Usage - three values</p></div><pre class="example__code language-scss"><code>.padding-element {
@include padding(5px 10px 7px);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output - three values</p></div><pre class="example__code language-css"><code>.padding-element {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 7px;
padding-left: 10px;
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Usage - four values</p></div><pre class="example__code language-scss"><code>.padding-element {
@include padding(5px 10px 7px 15px);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output - four values</p></div><pre class="example__code language-css"><code>.padding-element {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 7px;
padding-left: 15px;
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Usage - null values</p></div><pre class="example__code language-scss"><code>.padding-element {
@include padding(5px null null 15px);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output - null values</p></div><pre class="example__code language-css"><code>.padding-element {
padding-top: 5px;
padding-left: 15px;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-padding-mixin-padding-top"><code>padding-top</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-padding-mixin-padding-right"><code>padding-right</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-padding-mixin-padding-bottom"><code>padding-bottom</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-padding-mixin-padding-left"><code>padding-left</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#grid-system-columns-mixin-columns"><code>columns</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-aspect-ratio"><code>aspect-ratio</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-common-mixin-hidden"><code>hidden</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section></section><section class="main__section"><h1 class="main__heading" id="mixins-position"><div class="container">Mixins - Position</div></h1><section class="main__sub-section" id="mixins-position-function"><h2 class="main__heading--secondary"><div class="container">functions</div></h2><section class="main__item container item" id="mixins-position-function-is-position"><h3 class="item__heading"><a class="item__name" href="#function-is-position">is-position</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-position($pm) {
@return is-defined($pm) and array-contains($position-modes, $pm);
}" data-collapsed="@function is-position($pm) { ... }"><code>@function is-position($pm) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a position mode</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$pm</code></th><td data-label="desc"><p>the position mode</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is position mode</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-position-variable-position-modes"><code>position-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-position"><code>position</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-position-function-is-position-point-value"><h3 class="item__heading"><a class="item__name" href="#function-is-position-point-value">is-position-point-value</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-position-point-value($ppv) {
@return is-defined($ppv) and (is-length($ppv) or array-contains($position-point-modes, $ppv));
}" data-collapsed="@function is-position-point-value($ppv) { ... }"><code>@function is-position-point-value($ppv) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a position point value</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$ppv</code></th><td data-label="desc"><p>the position point value</p></td><td data-label="type"><code>String</code> or <code>Length</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is position point value value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-length"><code>is-length</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-position-variable-position-point-modes"><code>position-point-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-position-point"><code>position-point</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-position-function-is-position-point"><h3 class="item__heading"><a class="item__name" href="#function-is-position-point">is-position-point</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-position-point($pp) {
@return is-defined($pp) and array-contains($position-points, $pp);
}" data-collapsed="@function is-position-point($pp) { ... }"><code>@function is-position-point($pp) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a position point</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$pp</code></th><td data-label="desc"><p>the position point</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is position point</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-position-variable-position-points"><code>position-points</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-position-point"><code>position-point</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section><section class="main__sub-section" id="mixins-position-mixin"><h2 class="main__heading--secondary"><div class="container">mixins</div></h2><section class="main__item container item" id="mixins-position-mixin-position-point"><h3 class="item__heading"><a class="item__name" href="#mixin-position-point">position-point</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin position-point($v, $p, $important: false) {
@if is-position-point-value($v) and is-position-point($p) {
#{$p}: $v important($important);
}
@else {
@warn '`#{$p}: #{$v}` is not a valid position point value';
}
}" data-collapsed="@mixin position-point($v, $p, $important: false) { ... }"><code>@mixin position-point($v, $p, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Position point mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$v</code></th><td data-label="desc"><p>the point value (eg. 1px, 20%, auto, etc...)</p></td><td data-label="type"><code>String</code> or <code>Length</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$p</code></th><td data-label="desc"><p>the point (top, right, bottom, left)</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.position-point-element {
@include position-point(0, top);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.position-point-element {
top: 0;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-position-function-is-position-point-value"><code>is-position-point-value</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-position-function-is-position-point"><code>is-position-point</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-top"><code>top</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-right"><code>right</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-bottom"><code>bottom</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-left"><code>left</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-position-mixin-top"><h3 class="item__heading"><a class="item__name" href="#mixin-top">top</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin top($v, $important: false) {
@include position-point($v, top, $important);
}" data-collapsed="@mixin top($v, $important: false) { ... }"><code>@mixin top($v, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Top mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$v</code></th><td data-label="desc"><p>the point value (eg. 1px, 20%, auto, etc...)</p></td><td data-label="type"><code>String</code> or <code>Length</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.top-element {
@include top(0);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.top-element {
top: 0;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-position-point"><code>position-point</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-position"><code>position</code></a></li></ul><h3 class="item__sub-heading">See</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-position-point"><code>position-point</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-position-mixin-right"><h3 class="item__heading"><a class="item__name" href="#mixin-right">right</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin right($v, $important: false) {
@include position-point($v, right, $important);
}" data-collapsed="@mixin right($v, $important: false) { ... }"><code>@mixin right($v, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Right mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$v</code></th><td data-label="desc"><p>the point value (eg. 1px, 20%, auto, etc...)</p></td><td data-label="type"><code>String</code> or <code>Length</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.right-element {
@include right(0);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.right-element {
right: 0;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-position-point"><code>position-point</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-position"><code>position</code></a></li></ul><h3 class="item__sub-heading">See</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-position-point"><code>position-point</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-position-mixin-bottom"><h3 class="item__heading"><a class="item__name" href="#mixin-bottom">bottom</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin bottom($v, $important: false) {
@include position-point($v, bottom, $important);
}" data-collapsed="@mixin bottom($v, $important: false) { ... }"><code>@mixin bottom($v, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Bottom mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$v</code></th><td data-label="desc"><p>the point value (eg. 1px, 20%, auto, etc...)</p></td><td data-label="type"><code>String</code> or <code>Length</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.bottom-element {
@include bottom(0);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.bottom-element {
bottom: 0;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-position-point"><code>position-point</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-position"><code>position</code></a></li></ul><h3 class="item__sub-heading">See</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-position-point"><code>position-point</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-position-mixin-left"><h3 class="item__heading"><a class="item__name" href="#mixin-left">left</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin left($v, $important: false) {
@include position-point($v, left, $important);
}" data-collapsed="@mixin left($v, $important: false) { ... }"><code>@mixin left($v, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Left mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$v</code></th><td data-label="desc"><p>the point value (eg. 1px, 20%, auto, etc...)</p></td><td data-label="type"><code>String</code> or <code>Length</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.left-element {
@include left(0);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.left-element {
left: 0;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-position-point"><code>position-point</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-position"><code>position</code></a></li></ul><h3 class="item__sub-heading">See</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-position-point"><code>position-point</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-position-mixin-position"><h3 class="item__heading"><a class="item__name" href="#mixin-position">position</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin position($options, $options.position, $options.top, $options.right, $options.bottom, $options.left, $important: false) {
$settings: (position: static, top: null, right: null, bottom: null, left: null);
@if is-object($options) {
$settings: extend($settings, $options);
}
@else {
$position: nth-value($options, 1);
@if is-defined($position) {
$settings: extend($settings, (position: $position));
}
$top: nth-value($options, 2, null);
@if is-defined($top) {
$settings: extend($settings, (top: $top));
}
$right: nth-value($options, 3, $top);
@if is-defined($right) {
$settings: extend($settings, (right: $right));
}
$bottom: nth-value($options, 4, $top);
@if is-defined($bottom) {
$settings: extend($settings, (bottom: $bottom));
}
$left: nth-value($options, 5, $right);
@if is-defined($left) {
$settings: extend($settings, (left: $left));
}
}
$position: get($settings, position);
@if is-defined($position) {
@if is-position($position) {
@if $position == sticky {
position: -webkit-sticky important($important);
}
position: $position important($important);
}
@else {
@warn '`position: #{$position}` is not a valid position mode';
}
}
$top: get($settings, top);
@if is-defined($top) {
@include top($top, $important);
}
$right: get($settings, right);
@if is-defined($right) {
@include right($right, $important);
}
$bottom: get($settings, bottom);
@if is-defined($bottom) {
@include bottom($bottom, $important);
}
$left: get($settings, left);
@if is-defined($left) {
@include left($left, $important);
}
}" data-collapsed="@mixin position($options, $options.position, $options.top, $options.right, $options.bottom, $options.left, $important: false) { ... }"><code>@mixin position($options, $options.position, $options.top, $options.right, $options.bottom, $options.left, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Position mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$options</code></th><td data-label="desc"><p>the options</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.position</code></th><td data-label="desc"><p>the position mode</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.top</code></th><td data-label="desc"><p>the top</p></td><td data-label="type"><code>Length</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.right</code></th><td data-label="desc"><p>the right</p></td><td data-label="type"><code>Length</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.bottom</code></th><td data-label="desc"><p>the bottom</p></td><td data-label="type"><code>Length</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.left</code></th><td data-label="desc"><p>the left</p></td><td data-label="type"><code>Length</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.position-element {
@include position(absolute 0 0 0 0);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.position-element {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Usage - sticky</p></div><pre class="example__code language-scss"><code>.position-element {
@include position(sticky 10px 2rem);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.position-element {
position: -webkit-sticky;
position: sticky;
top: 10px;
right: 2rem;
bottom: 10px;
left: 2rem;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-top"><code>top</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-right"><code>right</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-bottom"><code>bottom</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-left"><code>left</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-is-object"><code>is-object</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-get"><code>get</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-position-function-is-position"><code>is-position</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-get"><code>get</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-get"><code>get</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-get"><code>get</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-get"><code>get</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#grid-system-columns-mixin-columns"><code>columns</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-aspect-ratio"><code>aspect-ratio</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-aspect-ratio"><code>aspect-ratio</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-common-mixin-hidden"><code>hidden</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section><section class="main__sub-section" id="mixins-position-variable"><h2 class="main__heading--secondary"><div class="container">variables</div></h2><section class="main__item container item" id="mixins-position-variable-position-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-position-modes">position-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$position-modes: array-concat((static, absolute, fixed, relative, sticky), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Position modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-position-function-is-position"><code>is-position</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-position-variable-position-point-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-position-point-modes">position-point-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$position-point-modes: array-concat((auto), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Position point modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-position-function-is-position-point-value"><code>is-position-point-value</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-position-variable-position-points"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-position-points">position-points</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$position-points: (top, right, bottom, left);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Position points</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-position-function-is-position-point"><code>is-position-point</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section></section><section class="main__section"><h1 class="main__heading" id="mixins-text"><div class="container">Mixins - Text</div></h1><section class="main__sub-section" id="mixins-text-function"><h2 class="main__heading--secondary"><div class="container">functions</div></h2><section class="main__item container item" id="mixins-text-function-is-font-family"><h3 class="item__heading"><a class="item__name" href="#function-is-font-family">is-font-family</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-font-family($ff) {
@return is-defined($ff) and (is-string($ff) or is-array($ff));
}" data-collapsed="@function is-font-family($ff) { ... }"><code>@function is-font-family($ff) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a supported font-family value</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$ff</code></th><td data-label="desc"><p>the font-family value</p></td><td data-label="type"><code>String</code> or <code>Array</code> or <code>List</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is font-family value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-string-function-is-string"><code>is-string</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-is-array"><code>is-array</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-font-family"><code>font-family</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/pr_font_font-family.asp">- W3Schools font-family docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-function-is-text-indent"><h3 class="item__heading"><a class="item__name" href="#function-is-text-indent">is-text-indent</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-text-indent($ti) {
@return is-defined($ti) and (is-size($ti) or is-percentage($ti) or array-contains($css-default-modes, $ti));
}" data-collapsed="@function is-text-indent($ti) { ... }"><code>@function is-text-indent($ti) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a supported text-indent value</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$ti</code></th><td data-label="desc"><p>the text-indent value</p></td><td data-label="type"><code>Percentage</code> or <code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is text-indent value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-size"><code>is-size</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-percentage"><code>is-percentage</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#types-common-variable-css-default-modes"><code>css-default-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-indent"><code>text-indent</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://developer.mozilla.org/it/docs/Web/CSS/text-indent">- MDN text-indent docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-function-is-text-shadow-mode"><h3 class="item__heading"><a class="item__name" href="#function-is-text-shadow-mode">is-text-shadow-mode</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-text-shadow-mode($tsm) {
@return is-defined($tsm) and array-contains($text-shadow-modes, $tsm);
}" data-collapsed="@function is-text-shadow-mode($tsm) { ... }"><code>@function is-text-shadow-mode($tsm) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is text shadow mode</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$tsm</code></th><td data-label="desc"><p>the text-shadow mode</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is text-shadow mode</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-text-variable-text-shadow-modes"><code>text-shadow-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-shadow"><code>is-text-shadow</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-function-is-direction"><h3 class="item__heading"><a class="item__name" href="#function-is-direction">is-direction</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-direction($d) {
@return is-defined($d) and array-contains($direction-modes, $d);
}" data-collapsed="@function is-direction($d) { ... }"><code>@function is-direction($d) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a supported direction mode</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$d</code></th><td data-label="desc"><p>the direction mode</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is direction mode</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-text-variable-direction-modes"><code>direction-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-direction"><code>direction</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/pr_text_direction.asp">- W3Schools direction docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-function-is-font-weight"><h3 class="item__heading"><a class="item__name" href="#function-is-font-weight">is-font-weight</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-font-weight($fw) {
@return is-defined($fw) and array-contains($font-weight-modes, $fw);
}" data-collapsed="@function is-font-weight($fw) { ... }"><code>@function is-font-weight($fw) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a supported font-weight value</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$fw</code></th><td data-label="desc"><p>the font-weight value</p></td><td data-label="type"><code>String</code> or <code>Integer</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is font-weight value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-text-variable-font-weight-modes"><code>font-weight-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-font-weight"><code>font-weight</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/pr_font_weight.asp">- W3Schools font-weight docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-function-is-hyphens"><h3 class="item__heading"><a class="item__name" href="#function-is-hyphens">is-hyphens</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-hyphens($h) {
@return is-defined($h) and array-contains($hyphens-modes, $h);
}" data-collapsed="@function is-hyphens($h) { ... }"><code>@function is-hyphens($h) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a supported hyphens mode</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$h</code></th><td data-label="desc"><p>the hyphens mode</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is hyphens mode</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-text-variable-hyphens-modes"><code>hyphens-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-hyphens"><code>hyphens</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens">- MDN hyphens docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-function-is-letter-spacing"><h3 class="item__heading"><a class="item__name" href="#function-is-letter-spacing">is-letter-spacing</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-letter-spacing($ls) {
@return is-defined($ls) and (array-contains($letter-spacing-modes, $ls) or is-size($ls));
}" data-collapsed="@function is-letter-spacing($ls) { ... }"><code>@function is-letter-spacing($ls) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a supported letter-spacing value</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$ls</code></th><td data-label="desc"><p>the letter-spacing value</p></td><td data-label="type"><code>Size</code> or <code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is letter-spacing value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-size"><code>is-size</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-text-variable-letter-spacing-modes"><code>letter-spacing-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-letter-spacing"><code>letter-spacing</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/pr_text_letter-spacing.asp">- W3Schools letter-spacing docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-function-is-line-height"><h3 class="item__heading"><a class="item__name" href="#function-is-line-height">is-line-height</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-line-height($lh) {
@return is-defined($lh) and (is-size($lh) or is-percentage($lh) or array-contains($line-height-modes, $lh));
}" data-collapsed="@function is-line-height($lh) { ... }"><code>@function is-line-height($lh) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a supported line-height value</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$lh</code></th><td data-label="desc"><p>the line-height value</p></td><td data-label="type"><code>Size</code> or <code>Percentage</code> or <code>Line-height-mode</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is line-height value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-size"><code>is-size</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-percentage"><code>is-percentage</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-text-variable-line-height-modes"><code>line-height-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-line-height"><code>line-height</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/pr_dim_line-height.asp">- W3Schools line-height docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-function-is-text-align"><h3 class="item__heading"><a class="item__name" href="#function-is-text-align">is-text-align</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-text-align($ta) {
@return is-defined($ta) and array-contains($text-align-modes, $ta);
}" data-collapsed="@function is-text-align($ta) { ... }"><code>@function is-text-align($ta) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a supported text-align value</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$ta</code></th><td data-label="desc"><p>the text-align value</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is text-align value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-text-variable-text-align-modes"><code>text-align-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-align"><code>text-align</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/pr_text_text-align.asp">- W3Schools text-align docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-function-is-text-decoration-line"><h3 class="item__heading"><a class="item__name" href="#function-is-text-decoration-line">is-text-decoration-line</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-text-decoration-line($tdlm) {
@return is-defined($tdlm) and array-contains($text-decoration-line-modes, $tdlm);
}" data-collapsed="@function is-text-decoration-line($tdlm) { ... }"><code>@function is-text-decoration-line($tdlm) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a supported text-decoration-line mode</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$tdlm</code></th><td data-label="desc"><p>the text-decoration-line mode</p></td><td data-label="type"><code>Text-decoration-line-mode</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is text-decoration-line mode</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-text-variable-text-decoration-line-modes"><code>text-decoration-line-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-decoration-line"><code>text-decoration-line</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-decoration"><code>text-decoration</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-function-is-text-overflow"><h3 class="item__heading"><a class="item__name" href="#function-is-text-overflow">is-text-overflow</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-text-overflow($to) {
@return is-defined($to) and (array-contains($text-overflow-modes, $to) or is-string($to));
}" data-collapsed="@function is-text-overflow($to) { ... }"><code>@function is-text-overflow($to) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a supported text-overflow mode</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$to</code></th><td data-label="desc"><p>the text-overflow mode</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is text-overflow mode</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-string-function-is-string"><code>is-string</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-text-variable-text-overflow-modes"><code>text-overflow-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-overflow"><code>text-overflow</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/css3_pr_text-overflow.asp">- W3Schools text-overflow docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-function-is-text-size-adjust"><h3 class="item__heading"><a class="item__name" href="#function-is-text-size-adjust">is-text-size-adjust</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-text-size-adjust($tsa) {
@return is-defined($tsa) and (is-percentage($tsa) or array-contains($text-size-adjust-modes, $tsa));
}" data-collapsed="@function is-text-size-adjust($tsa) { ... }"><code>@function is-text-size-adjust($tsa) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a supported text-size-adjust value</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$tsa</code></th><td data-label="desc"><p>the text-size-adjust value</p></td><td data-label="type"><code>Percentage</code> or <code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is text-size-adjust value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-percentage"><code>is-percentage</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-text-variable-text-size-adjust-modes"><code>text-size-adjust-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-size-adjust"><code>text-size-adjust</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://developer.mozilla.org/it/docs/Web/CSS/text-size-adjust">- MDN text-size-adjust docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-function-is-text-stroke-width"><h3 class="item__heading"><a class="item__name" href="#function-is-text-stroke-width">is-text-stroke-width</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-text-stroke-width($tsw) {
@return is-defined($tsw) and (is-size($tsw) or array-contains($text-stroke-width-modes, $tsw));
}" data-collapsed="@function is-text-stroke-width($tsw) { ... }"><code>@function is-text-stroke-width($tsw) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a supported text-stroke-width value</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$tsw</code></th><td data-label="desc"><p>the text-stroke-width value</p></td><td data-label="type"><code>Size</code> or <code>Text-stroke-width-mode</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is text-stroke-width value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-size"><code>is-size</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-text-variable-text-stroke-width-modes"><code>text-stroke-width-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-stroke-width"><code>text-stroke-width</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-function-is-text-transform"><h3 class="item__heading"><a class="item__name" href="#function-is-text-transform">is-text-transform</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-text-transform($tt) {
@return is-defined($tt) and array-contains($text-transform-modes, $tt);
}" data-collapsed="@function is-text-transform($tt) { ... }"><code>@function is-text-transform($tt) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a supported text-transform value</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$tt</code></th><td data-label="desc"><p>the text-transform value</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is text-transform value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-text-variable-text-transform-modes"><code>text-transform-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-transform"><code>text-transform</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/pr_text_text-transform.asp">- W3Schools text-transform docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-function-is-user-select"><h3 class="item__heading"><a class="item__name" href="#function-is-user-select">is-user-select</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-user-select($us) {
@return is-defined($us) and array-contains($user-select-modes, $us);
}" data-collapsed="@function is-user-select($us) { ... }"><code>@function is-user-select($us) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a supported user-select mode</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$us</code></th><td data-label="desc"><p>the user-select mode</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is user-select mode</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-text-variable-user-select-modes"><code>user-select-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-user-select"><code>user-select</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/css3_pr_user-select.asp">- W3Schools user-select docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-function-is-vertical-align"><h3 class="item__heading"><a class="item__name" href="#function-is-vertical-align">is-vertical-align</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-vertical-align($va) {
@return is-defined($va) and (is-size($va) or array-contains($vertical-align-modes, $va));
}" data-collapsed="@function is-vertical-align($va) { ... }"><code>@function is-vertical-align($va) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a supported vertical-align value</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$va</code></th><td data-label="desc"><p>the vertical-align value</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is vertical-align value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-size"><code>is-size</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-text-variable-vertical-align-modes"><code>vertical-align-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-vertical-align"><code>vertical-align</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/pr_pos_vertical-align.asp">- W3Schools vertical-align docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-function-is-white-space"><h3 class="item__heading"><a class="item__name" href="#function-is-white-space">is-white-space</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-white-space($ws) {
@return is-defined($ws) and array-contains($white-space-modes, $ws);
}" data-collapsed="@function is-white-space($ws) { ... }"><code>@function is-white-space($ws) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a supported white-space mode</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$ws</code></th><td data-label="desc"><p>the white-space mode</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is white-space mode</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-text-variable-white-space-modes"><code>white-space-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-white-space"><code>white-space</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/pr_text_white-space.asp">- W3Schools white-space docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-function-is-word-break"><h3 class="item__heading"><a class="item__name" href="#function-is-word-break">is-word-break</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-word-break($wb) {
@return is-defined($wb) and array-contains($word-break-modes, $wb);
}" data-collapsed="@function is-word-break($wb) { ... }"><code>@function is-word-break($wb) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a supported word-break mode</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$wb</code></th><td data-label="desc"><p>the word-break mode</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is word-break mode</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-text-variable-word-break-modes"><code>word-break-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-word-break"><code>word-break</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/css3_pr_word-break.asp">- W3Schools word-break docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-function-is-word-spacing"><h3 class="item__heading"><a class="item__name" href="#function-is-word-spacing">is-word-spacing</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-word-spacing($ws) {
@return is-defined($ws) and (array-contains($word-spacing-modes, $ws) or is-size($ws));
}" data-collapsed="@function is-word-spacing($ws) { ... }"><code>@function is-word-spacing($ws) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a supported word-spacing value</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$ws</code></th><td data-label="desc"><p>the word-spacing value</p></td><td data-label="type"><code>Size</code> or <code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is word-spacing value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-size"><code>is-size</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-text-variable-word-spacing-modes"><code>word-spacing-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-word-spacing"><code>word-spacing</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/pr_text_word-spacing.asp">- W3Schools word-spacing docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-function-is-font-size"><h3 class="item__heading"><a class="item__name" href="#function-is-font-size">is-font-size</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-font-size($fs) {
@return is-defined($fs) and (is-size($fs) or is-percentage($fs) or array-contains($font-size-modes, $fs));
}" data-collapsed="@function is-font-size($fs) { ... }"><code>@function is-font-size($fs) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a supported font-size value</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$fs</code></th><td data-label="desc"><p>the font-size value</p></td><td data-label="type"><code>Size</code> or <code>Percentage</code> or <code>Font-size-mode</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is font-size value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-size"><code>is-size</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-percentage"><code>is-percentage</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-text-variable-font-size-modes"><code>font-size-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-font-size"><code>font-size</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/pr_font_font-size.asp">- W3Schools font-size docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-function-is-font-style"><h3 class="item__heading"><a class="item__name" href="#function-is-font-style">is-font-style</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-font-style($fs) {
@return is-defined($fs) and array-contains($font-style-modes, $fs);
}" data-collapsed="@function is-font-style($fs) { ... }"><code>@function is-font-style($fs) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a supported font-style value</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$fs</code></th><td data-label="desc"><p>the font-style value</p></td><td data-label="type"><code>Font-style-mode</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true, if it's actually a font style value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-text-variable-font-style-modes"><code>font-style-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-font-style"><code>font-style</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/pr_font_font-style.asp">- W3Schools font-style docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-function-is-word-wrap"><h3 class="item__heading"><a class="item__name" href="#function-is-word-wrap">is-word-wrap</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-word-wrap($ww) {
@return is-defined($ww) and array-contains($word-wrap-modes, $ww);
}" data-collapsed="@function is-word-wrap($ww) { ... }"><code>@function is-word-wrap($ww) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a supported word-wrap mode</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$ww</code></th><td data-label="desc"><p>the word-wrap mode</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is word-wrap mode</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-text-variable-word-wrap-modes"><code>word-wrap-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-word-wrap"><code>word-wrap</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/css3_pr_word-wrap.asp">- W3Schools word-wrap docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-function-is-text-shadow"><h3 class="item__heading"><a class="item__name" href="#function-is-text-shadow">is-text-shadow</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-text-shadow($text-shadow) {
@if is-defined($text-shadow) {
@if is-text-shadow-mode($text-shadow) {
@return true;
}
@else {
// $defaults: (h-offset: 0, v-offset: 0, blur: 0, spread: 0, color: transparent, inset: null);
// TODO: add spread & inset support when available
$defaults: (h-offset: 0, v-offset: 0, blur: 0, color: transparent);
@if is-object($text-shadow) {
$text-shadow: extend($defaults, $text-shadow);
}
@else {
$text-shadow-h-offset: nth-value($text-shadow, 1);
$text-shadow-v-offset: nth-value($text-shadow, 2);
$text-shadow-blur: nth-value($text-shadow, 3);
$text-shadow-color: nth-value($text-shadow, 4);
// $text-shadow-spread: nth-value($text-shadow, 4);
// $text-shadow-color: nth-value($text-shadow, 5);
// $text-shadow-inset: nth-value($text-shadow, 6);
$text-shadow: extend($defaults, ());
@if is-defined($text-shadow-h-offset) {
$text-shadow: extend($text-shadow, (h-offset: $text-shadow-h-offset));
}
@if is-defined($text-shadow-v-offset) {
$text-shadow: extend($text-shadow, (v-offset: $text-shadow-v-offset));
}
@if is-defined($text-shadow-blur) {
$text-shadow: extend($text-shadow, (blur: $text-shadow-blur));
}
// @if is-defined($text-shadow-spread) {
// $text-shadow: extend($text-shadow, (spread: $text-shadow-spread));
// }
@if is-defined($text-shadow-color) {
$text-shadow: extend($text-shadow, (color: $text-shadow-color));
}
// @if is-defined($text-shadow-inset) {
// $text-shadow: extend($text-shadow, (inset: $text-shadow-inset));
// }
}
$is-text-shadow-valid: true;
$text-shadow-h-offset: get($text-shadow, h-offset);
@if not is-length($text-shadow-h-offset) {
$is-text-shadow-valid: false;
@warn '`text-shadow h-offset: #{$text-shadow-h-offset}` is not a valid css length value';
}
$text-shadow-v-offset: get($text-shadow, v-offset);
@if $is-text-shadow-valid {
@if not is-length($text-shadow-v-offset) {
$is-text-shadow-valid: false;
@warn '`text-shadow v-offset: #{$text-shadow-v-offset}` is not a valid css length value';
}
}
$text-shadow-blur: get($text-shadow, blur);
@if $is-text-shadow-valid {
@if not is-length($text-shadow-blur) {
$is-text-shadow-valid: false;
@warn '`text-shadow blur: #{$text-shadow-blur}` is not a valid css length value';
}
}
// $text-shadow-spread: get($text-shadow, spread);
// @if $is-text-shadow-valid {
// @if not is-length($text-shadow-spread) {
// $is-text-shadow-valid: false;
// @warn '`text-shadow spread: #{$text-shadow-spread}` is not a valid css length value';
// }
// }
$text-shadow-color: get($text-shadow, color);
@if $is-text-shadow-valid {
@if not is-css-color($text-shadow-color) {
$is-text-shadow-valid: false;
@warn '`text-shadow color: #{$text-shadow-color}` is not a valid css color value';
}
}
// $text-shadow-inset: get($text-shadow, inset);
// @if $is-text-shadow-valid {
// @if is-string($text-shadow-inset) and $text-shadow-inset !=inset {
// $is-text-shadow-valid: false;
// @warn '`text-shadow inset: #{$text-shadow-inset}` is not a valid css inset value';
// }
// }
@return $is-text-shadow-valid;
}
}
@return false;
}" data-collapsed="@function is-text-shadow($text-shadow) { ... }"><code>@function is-text-shadow($text-shadow) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is text shadow value</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$text-shadow</code></th><td data-label="desc"><p>the text-shadow value</p></td><td data-label="type"><code>Any</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is text-shadow value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-shadow-mode"><code>is-text-shadow-mode</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-is-object"><code>is-object</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-get"><code>get</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-length"><code>is-length</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-get"><code>get</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-length"><code>is-length</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-get"><code>get</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-length"><code>is-length</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-get"><code>get</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-length"><code>is-length</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-get"><code>get</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-color-function-is-css-color"><code>is-css-color</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-get"><code>get</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-string-function-is-string"><code>is-string</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-shadows"><code>is-text-shadows</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-function-is-text-decoration-style"><h3 class="item__heading"><a class="item__name" href="#function-is-text-decoration-style">is-text-decoration-style</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-text-decoration-style($tdsm) {
@return is-defined($tdsm) and array-contains($text-decoration-style-modes, $tdsm);
}" data-collapsed="@function is-text-decoration-style($tdsm) { ... }"><code>@function is-text-decoration-style($tdsm) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a supported text-decoration-style mode</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$tdsm</code></th><td data-label="desc"><p>the text-decoration-style mode</p></td><td data-label="type"><code>Text-decoration-style-mode</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is text-decoration-style mode</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-text-variable-text-decoration-style-modes"><code>text-decoration-style-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-decoration-style"><code>text-decoration-style</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-decoration"><code>text-decoration</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-function-is-text-decoration-color"><h3 class="item__heading"><a class="item__name" href="#function-is-text-decoration-color">is-text-decoration-color</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-text-decoration-color($tdc) {
@return is-defined($tdc) and (is-color($tdc) or array-contains($css-default-modes, $tdc));
}" data-collapsed="@function is-text-decoration-color($tdc) { ... }"><code>@function is-text-decoration-color($tdc) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a supported text-decoration-color mode</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$tdc</code></th><td data-label="desc"><p>the text-decoration-color value</p></td><td data-label="type"><code>Text-decoration-color</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is text-decoration-color value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-color-function-is-color"><code>is-color</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#types-common-variable-css-default-modes"><code>css-default-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-decoration-color"><code>text-decoration-color</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-decoration"><code>text-decoration</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-function-is-text-decoration-mode"><h3 class="item__heading"><a class="item__name" href="#function-is-text-decoration-mode">is-text-decoration-mode</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-text-decoration-mode($tdm) {
@return is-defined($tdm) and (array-contains($text-decoration-modes, $tdm));
}" data-collapsed="@function is-text-decoration-mode($tdm) { ... }"><code>@function is-text-decoration-mode($tdm) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a supported text-decoration mode</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$tdm</code></th><td data-label="desc"><p>the text-decoration mode</p></td><td data-label="type"><code>Text-decoration-mode</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is text-decoration mode</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-text-variable-text-decoration-modes"><code>text-decoration-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-decoration"><code>text-decoration</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-function-is-text-shadows"><h3 class="item__heading"><a class="item__name" href="#function-is-text-shadows">is-text-shadows</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-text-shadows($text-shadows) {
@if is-defined($text-shadows) {
$is-text-shadows-valid: true;
@each $text-shadow in $text-shadows {
@if $is-text-shadows-valid {
$is-text-shadows-valid: is-text-shadow($text-shadow);
}
}
@return $is-text-shadows-valid;
}
@return false;
}" data-collapsed="@function is-text-shadows($text-shadows) { ... }"><code>@function is-text-shadows($text-shadows) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if a list is a text-shadow values list (e.g. <code>0 2px 0 #dcffa6, 0 2px 5px #000</code>)</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$text-shadows</code></th><td data-label="desc"><p>the text-shadow values list</p></td><td data-label="type"><code>Array</code> or <code>List</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is text-shadow values list</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-shadow"><code>is-text-shadow</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-shadow"><code>text-shadow</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-function-is-text-decoration-skip"><h3 class="item__heading"><a class="item__name" href="#function-is-text-decoration-skip">is-text-decoration-skip</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-text-decoration-skip($tds) {
@return is-defined($tds) and array-contains($text-decoration-skip-modes, $tds);
}" data-collapsed="@function is-text-decoration-skip($tds) { ... }"><code>@function is-text-decoration-skip($tds) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a supported text-decoration-skip mode</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$tds</code></th><td data-label="desc"><p>the text-decoration-skip mode</p></td><td data-label="type"><code>Text-decoration-skip-mode</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is text-decoration-skip mode</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-text-variable-text-decoration-skip-modes"><code>text-decoration-skip-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-decoration-skip"><code>text-decoration-skip</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-function-is-text-underline-position"><h3 class="item__heading"><a class="item__name" href="#function-is-text-underline-position">is-text-underline-position</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-text-underline-position($tup) {
@return is-defined($tup) and array-contains($text-underline-position-modes, $tup);
}" data-collapsed="@function is-text-underline-position($tup) { ... }"><code>@function is-text-underline-position($tup) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a supported text-underline-position mode</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$tup</code></th><td data-label="desc"><p>the text-underline-position mode</p></td><td data-label="type"><code>Text-underline-position-mode</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is text-underline-position mode</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-text-variable-text-underline-position-modes"><code>text-underline-position-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-underline-position"><code>text-underline-position</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section><section class="main__sub-section" id="mixins-text-mixin"><h2 class="main__heading--secondary"><div class="container">mixins</div></h2><section class="main__item container item" id="mixins-text-mixin-color"><h3 class="item__heading"><a class="item__name" href="#mixin-color">color</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin color($options, $color: inherit, $important: false) {
@if is-css-color($color) {
color: $color important($important);
}
@else {
@warn '`color: #{$color}` is not a valid css color';
}
}" data-collapsed="@mixin color($options, $color: inherit, $important: false) { ... }"><code>@mixin color($options, $color: inherit, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Color mixin<br>used to foreground color</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$options</code></th><td data-label="desc"><p>the box color options</p></td><td data-label="type"><code>Object</code> or <code>Map</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$color</code></th><td data-label="desc"><p>the color</p></td><td data-label="type"><code>Color</code></td><td data-label="default"><code>inherit</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.color-element {
@include box-color(#ffa);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.color-element {
color: #ffa;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-color-function-is-css-color"><code>is-css-color</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-box-color"><code>box-color</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-mixin-text-indent"><h3 class="item__heading"><a class="item__name" href="#mixin-text-indent">text-indent</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin text-indent($ti, $important: false) {
@if is-text-indent($ti) {
text-indent: $ti important($important);
}
@else {
@warn '`text-indent: #{$ti}` is not a valid text-indent value';
}
}" data-collapsed="@mixin text-indent($ti, $important: false) { ... }"><code>@mixin text-indent($ti, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Text indent mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$ti</code></th><td data-label="desc"><p>the text-indent value</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.text-indent-element {
@include text-indent(-9999px);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.text-indent-element {
text-indent: -9999px;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-indent"><code>is-text-indent</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-mixin-direction"><h3 class="item__heading"><a class="item__name" href="#mixin-direction">direction</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin direction($d, $important: false) {
@if is-direction($d) {
direction: $d important($important);
}
@else {
@warn '`direction: #{$d}` is not a valid direction value';
}
}" data-collapsed="@mixin direction($d, $important: false) { ... }"><code>@mixin direction($d, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Direction mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$d</code></th><td data-label="desc"><p>the direction value</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.direction-element {
@include direction(rtl);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.direction-element {
direction: rtl;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-direction"><code>is-direction</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-mixin-font-weight"><h3 class="item__heading"><a class="item__name" href="#mixin-font-weight">font-weight</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin font-weight($fw, $important: false) {
@if is-font-weight($fw) {
font-weight: $fw important($important);
}
@else {
@warn '`font-weight: #{$fw}` is not a valid font-weight';
}
}" data-collapsed="@mixin font-weight($fw, $important: false) { ... }"><code>@mixin font-weight($fw, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Font weight mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$fw</code></th><td data-label="desc"><p>the font-weight value</p></td><td data-label="type"><code>String</code> or <code>Integer</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.font-weight-element {
@include font-weight(bold);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.font-weight-element {
font-weight: bold;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-font-weight"><code>is-font-weight</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-font"><code>font</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-mixin-letter-spacing"><h3 class="item__heading"><a class="item__name" href="#mixin-letter-spacing">letter-spacing</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin letter-spacing($ls, $important: false) {
@if is-letter-spacing($ls) {
letter-spacing: $ls important($important);
}
@else {
@warn '`letter-spacing: #{$ls}` is not a valid letter-spacing value';
}
}" data-collapsed="@mixin letter-spacing($ls, $important: false) { ... }"><code>@mixin letter-spacing($ls, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Letter spacing mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$ls</code></th><td data-label="desc"><p>the letter-spacing value</p></td><td data-label="type"><code>Size</code> or <code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.letter-spacing-element {
@include letter-spacing(3px);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.letter-spacing-element {
letter-spacing: 3px;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-letter-spacing"><code>is-letter-spacing</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-reset-inline-block"><code>reset-inline-block</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-reset-inline-block"><code>reset-inline-block</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-mixin-line-height"><h3 class="item__heading"><a class="item__name" href="#mixin-line-height">line-height</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin line-height($lh, $important: false) {
@if is-line-height($lh) {
line-height: $lh important($important);
}
@else {
@warn '`line-height: #{$lh}` is not a valid line-height value';
}
}" data-collapsed="@mixin line-height($lh, $important: false) { ... }"><code>@mixin line-height($lh, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Line height mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$lh</code></th><td data-label="desc"><p>the line-height value</p></td><td data-label="type"><code>Size</code> or <code>Percentage</code> or <code>Line-height-mode</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.line-height-element {
@include line-height(2.5rem);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.line-height-element {
line-height: 2.5rem;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-line-height"><code>is-line-height</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-reset-inline-block"><code>reset-inline-block</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-reset-inline-block"><code>reset-inline-block</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-font"><code>font</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-mixin-text-align"><h3 class="item__heading"><a class="item__name" href="#mixin-text-align">text-align</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin text-align($ta, $important: false) {
@if(is-text-align($ta)) {
text-align: $ta important($important);
}
@else {
@warn '`text-align: #{$ta}` is not a valid text-align value';
}
}" data-collapsed="@mixin text-align($ta, $important: false) { ... }"><code>@mixin text-align($ta, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Text align mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$ta</code></th><td data-label="desc"><p>the text-align value</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.text-align-element {
@include text-align(center);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.text-align-element {
text-align: center;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-align"><code>is-text-align</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-content-align"><code>content-align</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-mixin-text-transform"><h3 class="item__heading"><a class="item__name" href="#mixin-text-transform">text-transform</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin text-transform($tt, $important: false) {
@if is-text-transform($tt) {
text-transform: $tt important($important);
}
@else {
@warn '`text-transform: #{$tt}` is not a valid text-transform value';
}
}" data-collapsed="@mixin text-transform($tt, $important: false) { ... }"><code>@mixin text-transform($tt, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Text transform mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$tt</code></th><td data-label="desc"><p>the text-transform value</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.text-transform-element {
@include text-transform(uppercase);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.text-transform-element {
text-transform: uppercase;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-transform"><code>is-text-transform</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-mixin-vertical-align"><h3 class="item__heading"><a class="item__name" href="#mixin-vertical-align">vertical-align</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin vertical-align($va, $important: false) {
@if(is-vertical-align($va)) {
vertical-align: $va important($important);
}
@else {
@warn '`vertical-align: #{$va}` is not a valid vertical-align value';
}
}" data-collapsed="@mixin vertical-align($va, $important: false) { ... }"><code>@mixin vertical-align($va, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Vertical align mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$va</code></th><td data-label="desc"><p>the vertical-align value</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.vertical-align-element {
@include vertical-align(top);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.vertical-align-element {
vertical-align: top;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-vertical-align"><code>is-vertical-align</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-content-align"><code>content-align</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-mixin-white-space"><h3 class="item__heading"><a class="item__name" href="#mixin-white-space">white-space</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin white-space($ws, $important: false) {
@if is-white-space($ws) {
white-space: $ws important($important);
}
@else {
@warn '`white-space: #{$ws}` is not a valid white-space value';
}
}" data-collapsed="@mixin white-space($ws, $important: false) { ... }"><code>@mixin white-space($ws, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>White space mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$ws</code></th><td data-label="desc"><p>the white-space value</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.white-space-element {
@include white-space(nowrap);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.white-space-element {
white-space: nowrap;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-white-space"><code>is-white-space</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-common-mixin-hidden"><code>hidden</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-ellipsis"><code>ellipsis</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-mixin-word-break"><h3 class="item__heading"><a class="item__name" href="#mixin-word-break">word-break</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin word-break($wb, $important: false) {
@if is-word-break($wb) {
word-break: $wb important($important);
}
@else {
@warn '`word-break: #{$wb}` is not a valid word-break value';
}
}" data-collapsed="@mixin word-break($wb, $important: false) { ... }"><code>@mixin word-break($wb, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Word break mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$wb</code></th><td data-label="desc"><p>the word-break value</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.word-break-element {
@include word-break(break-all);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.word-break-element {
word-break: break-all;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-word-break"><code>is-word-break</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-word-wrap-force"><code>word-wrap-force</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-mixin-word-spacing"><h3 class="item__heading"><a class="item__name" href="#mixin-word-spacing">word-spacing</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin word-spacing($ws, $important: false) {
@if is-word-spacing($ws) {
word-spacing: $ws important($important);
}
@else {
@warn '`word-spacing: #{$ws}` is not a valid word-spacing value';
}
}" data-collapsed="@mixin word-spacing($ws, $important: false) { ... }"><code>@mixin word-spacing($ws, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Word spacing mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$ws</code></th><td data-label="desc"><p>the word-spacing value</p></td><td data-label="type"><code>Size</code> or <code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.word-spacing-element {
@include word-spacing(1rem);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.word-spacing-element {
word-spacing: 1rem;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-word-spacing"><code>is-word-spacing</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-mixin-font-size"><h3 class="item__heading"><a class="item__name" href="#mixin-font-size">font-size</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin font-size($fs, $important: false) {
@if is-font-size($fs) {
font-size: $fs important($important);
}
@else {
@warn '`font-size: #{$fs}` is not a valid font-size value';
}
}" data-collapsed="@mixin font-size($fs, $important: false) { ... }"><code>@mixin font-size($fs, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Font size mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$fs</code></th><td data-label="desc"><p>the font-size value</p></td><td data-label="type"><code>Size</code> or <code>Percentage</code> or <code>Font-size-mode</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.font-size-element {
@include font-size(1.8rem);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.font-size-element {
font-size: 1.8rem;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-font-size"><code>is-font-size</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-font"><code>font</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-mixin-font-style"><h3 class="item__heading"><a class="item__name" href="#mixin-font-style">font-style</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin font-style($fs, $important: false) {
@if is-font-style($fs) {
font-style: $fs important($important);
}
@else {
@warn '`font-style: #{$fs}` is not a valid font-style value';
}
}" data-collapsed="@mixin font-style($fs, $important: false) { ... }"><code>@mixin font-style($fs, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Font size mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$fs</code></th><td data-label="desc"><p>the font-style value</p></td><td data-label="type"><code>Font-style-mode</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.font-style-element {
@include font-style(italic);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.font-style-element {
font-style: italic;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-font-style"><code>is-font-style</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-font"><code>font</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-mixin-text-overflow"><h3 class="item__heading"><a class="item__name" href="#mixin-text-overflow">text-overflow</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin text-overflow($to, $important: false) {
@if is-text-overflow($to) {
@include prefixer(text-overflow, $to, o spec, $important);
}
@else {
@warn '`text-overflow: #{$to}` is not a valid text-overflow value';
}
}" data-collapsed="@mixin text-overflow($to, $important: false) { ... }"><code>@mixin text-overflow($to, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Text overflow mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$to</code></th><td data-label="desc"><p>the text-overflow value</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.text-overflow-element {
@include text-overflow(ellipsis);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.text-overflow-element {
-o-overflow: ellipsis;
text-overflow: ellipsis;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-common-mixin-prefixer"><code>prefixer</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-overflow"><code>is-text-overflow</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-ellipsis"><code>ellipsis</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-mixin-text-stroke-width"><h3 class="item__heading"><a class="item__name" href="#mixin-text-stroke-width">text-stroke-width</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin text-stroke-width($tsw, $important: false) {
@if(is-text-stroke-width($tsw)) {
@include prefixer(text-stroke-width, $tsw, webkit spec, $important);
}
@else {
@warn '`text-stroke-width: #{$tsw}` is not a valid text-stroke-width value';
}
}" data-collapsed="@mixin text-stroke-width($tsw, $important: false) { ... }"><code>@mixin text-stroke-width($tsw, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Text stroke width mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$tsw</code></th><td data-label="desc"><p>the text-stroke-width value</p></td><td data-label="type"><code>Size</code> or <code>Text-stroke-width-mode</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.text-stroke-width-element {
@include text-stroke-width(2rem);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.text-stroke-width {
-webkit-text-stroke-width: 2rem;
text-stroke-width: 2rem;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-common-mixin-prefixer"><code>prefixer</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-stroke-width"><code>is-text-stroke-width</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-stroke"><code>text-stroke</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke-width">- MDN text-stroke-width docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-mixin-text-decoration-line"><h3 class="item__heading"><a class="item__name" href="#mixin-text-decoration-line">text-decoration-line</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin text-decoration-line($tdlm, $important: false) {
@if(is-text-decoration-line($tdlm)) {
@include prefixer(text-decoration-line, $tdlm, webkit moz spec, $important);
}
@else {
@warn '`text-decoration-line: #{$tdlm}` is not a valid text-decoration-line value';
}
}" data-collapsed="@mixin text-decoration-line($tdlm, $important: false) { ... }"><code>@mixin text-decoration-line($tdlm, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Text decoration line mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$tdlm</code></th><td data-label="desc"><p>the text-decoration-line value</p></td><td data-label="type"><code>Text-decoration-line-mode</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.text-decoration-line-element {
@include text-decoration-line(overline);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.text-decoration-line-element {
-webkit-text-decoration-line: overline;
-moz-decoration-line: overline;
text-decoration-line: overline;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-common-mixin-prefixer"><code>prefixer</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-decoration-line"><code>is-text-decoration-line</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-decoration"><code>text-decoration</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/css3_pr_text-decoration-line.asp">- W3Schools text-decoration-line docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-mixin-font-family"><h3 class="item__heading"><a class="item__name" href="#mixin-font-family">font-family</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin font-family($ff, $important: false) {
@if is-font-family($ff) {
font-family: #{$ff} important($important);
}
@else {
@warn '`font-family: #{$ff}` is not a valid font-family value';
}
}" data-collapsed="@mixin font-family($ff, $important: false) { ... }"><code>@mixin font-family($ff, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Font family mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$ff</code></th><td data-label="desc"><p>the font-family value</p></td><td data-label="type"><code>String</code> or <code>Array</code> or <code>List</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.font-family-element {
@include font-family('Source Sans Pro');
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.font-family-element {
font-family: 'Source Sans Pro';
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.font-family-element {
@include font-family('Source Sans Pro', Verdana, sans-serif);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.font-family-element {
font-family: 'Source Sans Pro', Verdana, sans-serif;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-font-family"><code>is-font-family</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-font"><code>font</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-mixin-hyphens"><h3 class="item__heading"><a class="item__name" href="#mixin-hyphens">hyphens</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin hyphens($h, $important: false) {
@if is-hyphens($h) {
@include prefixer(hyphens, $h, null, $important);
}
@else {
@warn '`hyphens: #{$h}` is not a valid hyphens value';
}
}" data-collapsed="@mixin hyphens($h, $important: false) { ... }"><code>@mixin hyphens($h, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Hyphens mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$h</code></th><td data-label="desc"><p>the hyphens value</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.hyphens-element {
@include hyphens(manual);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.hyphens-element {
-webkit-overflow: manual;
-moz-overflow: manual;
-ms-overflow: manual;
-o-overflow: manual;
hyphens: manual;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-common-mixin-prefixer"><code>prefixer</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-hyphens"><code>is-hyphens</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-word-wrap-force"><code>word-wrap-force</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-mixin-user-select"><h3 class="item__heading"><a class="item__name" href="#mixin-user-select">user-select</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin user-select($us, $important: false) {
@if is-user-select($us) {
@include prefixer(user-select, $us, null, $important);
}
@else {
@warn '`user-select: #{$us}` is not a valid user-select value';
}
}" data-collapsed="@mixin user-select($us, $important: false) { ... }"><code>@mixin user-select($us, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>User select mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$us</code></th><td data-label="desc"><p>the user-select value</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.user-select-element {
@include user-select(none);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.user-select-element {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-common-mixin-prefixer"><code>prefixer</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-user-select"><code>is-user-select</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-mixin-word-wrap"><h3 class="item__heading"><a class="item__name" href="#mixin-word-wrap">word-wrap</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin word-wrap($ww, $force: false, $important: false) {
@if is-word-wrap($ww) {
word-wrap: $ww important($important);
}
@else {
@warn '`word-wrap: #{$ww}` is not a valid word-wrap value';
}
}" data-collapsed="@mixin word-wrap($ww, $force: false, $important: false) { ... }"><code>@mixin word-wrap($ww, $force: false, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Word wrap mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$ww</code></th><td data-label="desc"><p>the word-wrap value</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$force</code></th><td data-label="desc"><p>if true, will do proper hacks to force word-wrap</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.word-wrap-element {
@include word-wrap(break-word);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.word-wrap-element {
word-wrap: break-word;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-word-wrap"><code>is-word-wrap</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-word-wrap-force"><code>word-wrap-force</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-ellipsis"><code>ellipsis</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-mixin-text-size-adjust"><h3 class="item__heading"><a class="item__name" href="#mixin-text-size-adjust">text-size-adjust</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin text-size-adjust($tsa, $prefixes: $prefixes-default, $important: false) {
@if is-text-size-adjust($tsa) {
@include prefixer(text-size-adjust, $tsa, $prefixes, $important);
}
@else {
@warn '`text-size-adjust: #{$tsa}` is not a valid text-size-adjust value';
}
}" data-collapsed="@mixin text-size-adjust($tsa, $prefixes: $prefixes-default, $important: false) { ... }"><code>@mixin text-size-adjust($tsa, $prefixes: $prefixes-default, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Text size adjust mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$tsa</code></th><td data-label="desc"><p>the text-size-adjust value</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$prefixes</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Array</code> or <code>List</code></td><td data-label="default"><code>$prefixes-default</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.text-size-adjust-element {
@include text-size-adjust(67%);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.text-size-adjust-element {
-webkit-text-size-adjust: 67%;
-moz-text-size-adjust: 67%;
-ms-text-size-adjust: 67%;
-o-text-size-adjust: 67%;
text-size-adjust: 67%;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-common-mixin-prefixer"><code>prefixer</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-size-adjust"><code>is-text-size-adjust</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-mixin-text-stroke-color"><h3 class="item__heading"><a class="item__name" href="#mixin-text-stroke-color">text-stroke-color</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin text-stroke-color($tsc, $important: false) {
@if(is-text-stroke-color($tsc)) {
@include prefixer(text-stroke-color, $tsc, webkit spec, $important);
}
@else {
@warn '`text-stroke-color: #{$tsc}` is not a valid text-stroke-color value';
}
}" data-collapsed="@mixin text-stroke-color($tsc, $important: false) { ... }"><code>@mixin text-stroke-color($tsc, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Text stroke color mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$tsc</code></th><td data-label="desc"><p>the text-stroke-color value</p></td><td data-label="type"><code>Color</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.text-stroke-color-element {
@include text-stroke-color(red);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.text-stroke-color {
-webkit-text-stroke-color: red;
text-stroke-color: red;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-common-mixin-prefixer"><code>prefixer</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-stroke"><code>text-stroke</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke-color">- MDN text-stroke-color docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-mixin-word-wrap-force"><h3 class="item__heading"><a class="item__name" href="#mixin-word-wrap-force">word-wrap-force</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin word-wrap-force() {
@include hyphens(auto);
@include word-break(break-all);
@include word-wrap(break-word);
}" data-collapsed="@mixin word-wrap-force() { ... }"><code>@mixin word-wrap-force() { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Word Wrap Force mixin</p></div><h3 class="item__sub-heading">Parameters</h3><p>None.</p><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage - single line</p></div><pre class="example__code language-scss"><code>.word-wrap-force-element {
@include word-wrap-force;
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output - single line</p></div><pre class="example__code language-css"><code>.word-wrap-force-element {
hyphens: auto;
word-break: break-all;
word-wrap: break-word;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-hyphens"><code>hyphens</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-word-break"><code>word-break</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-word-wrap"><code>word-wrap</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-mixin-font"><h3 class="item__heading"><a class="item__name" href="#mixin-font">font</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin font($options, $options.size: 1rem, $options.height: 1rem, $options.family: null, $options.weight: normal, $options.style: normal, $options.color: null, $important: false) {
$settings: (size: 1rem, height: 1rem, family: null, weight: normal, style: normal, color: null);
@if is-object($options) {
$settings: extend($settings, $options);
}
@else {
$size: nth-value($options, 1);
@if is-defined($size) {
$settings: extend($settings, (size: $size));
}
$height: nth-value($options, 2);
@if is-defined($height) {
$settings: extend($settings, (height: $height));
}
$family: nth-value($options, 3);
@if is-defined($family) {
$settings: extend($settings, (family: $family));
}
$weight: nth-value($options, 4);
@if is-defined($weight) {
$settings: extend($settings, (weight: $weight));
}
$style: nth-value($options, 5);
@if is-defined($style) {
$settings: extend($settings, (style: $style));
}
$color: nth-value($options, 6);
@if is-defined($color) {
$settings: extend($settings, (color: $color));
}
}
$font-size: map-get($settings, size);
@if is-defined($font-size) {
@include font-size($font-size, $important);
}
$line-height: map-get($settings, height);
@if is-defined($line-height) {
@include line-height($line-height, $important);
}
$font-family: map-get($settings, family);
@if is-defined($font-family) {
@include font-family($font-family, $important);
}
$font-weight: map-get($settings, weight);
@if is-defined($font-weight) {
@include font-weight($font-weight, $important);
}
$font-style: map-get($settings, style);
@if is-defined($font-style) {
@include font-style($font-style, $important);
}
$font-color: map-get($settings, color);
@if is-defined($font-color) {
@include box-color($font-color null, $important);
}
}" data-collapsed="@mixin font($options, $options.size: 1rem, $options.height: 1rem, $options.family: null, $options.weight: normal, $options.style: normal, $options.color: null, $important: false) { ... }"><code>@mixin font($options, $options.size: 1rem, $options.height: 1rem, $options.family: null, $options.weight: normal, $options.style: normal, $options.color: null, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Font mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$options</code></th><td data-label="desc"><p>the options</p></td><td data-label="type"><code>Object</code> or <code>Map</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.size</code></th><td data-label="desc"><p>the font-size value</p></td><td data-label="type"><code>Size</code> or <code>Percentage</code> or <code>Font-size-mode</code></td><td data-label="default"><code>1rem</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.height</code></th><td data-label="desc"><p>the line-height value</p></td><td data-label="type"><code>Size</code> or <code>Percentage</code> or <code>Line-height-mode</code></td><td data-label="default"><code>1rem</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.family</code></th><td data-label="desc"><p>the font-family value</p></td><td data-label="type"><code>String</code> or <code>Array</code> or <code>List</code></td><td data-label="default"><code>null</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.weight</code></th><td data-label="desc"><p>the font-weight value</p></td><td data-label="type"><code>String</code> or <code>Integer</code></td><td data-label="default"><code>normal</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.style</code></th><td data-label="desc"><p>the font-style value</p></td><td data-label="type"><code>Font-style-mode</code></td><td data-label="default"><code>normal</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.color</code></th><td data-label="desc"><p>the color value</p></td><td data-label="type"><code>Color</code></td><td data-label="default"><code>null</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>$font-family: OpenSans, Verdana, sans-serif;
.font-element {
@include font(1.5rem 2.5rem $font-family bold italic white);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.font-element {
font-size: 1.5rem;
line-height: 2.5rem;
font-family: OpenSans, Verdana, sans-serif;
font-weight: bold;
font-style: italic;
color: white;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-font-size"><code>font-size</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-line-height"><code>line-height</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-font-family"><code>font-family</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-font-weight"><code>font-weight</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-font-style"><code>font-style</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-box-color"><code>box-color</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-is-object"><code>is-object</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#grid-system-mixin-grid-system"><code>grid-system</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-ellipsis"><code>ellipsis</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-mixin-text-decoration-style"><h3 class="item__heading"><a class="item__name" href="#mixin-text-decoration-style">text-decoration-style</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin text-decoration-style($tdsm, $important: false) {
@if(is-text-decoration-style($tdsm)) {
@include prefixer(text-decoration-style, $tdsm, moz spec, $important);
}
@else {
@warn '`text-decoration-style: #{$tdsm}` is not a valid text-decoration-style value';
}
}" data-collapsed="@mixin text-decoration-style($tdsm, $important: false) { ... }"><code>@mixin text-decoration-style($tdsm, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Text decoration style mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$tdsm</code></th><td data-label="desc"><p>the text-decoration-style value</p></td><td data-label="type"><code>Text-decoration-style-mode</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.text-decoration-style-element {
@include text-decoration-style(wavy);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.text-decoration-style-element {
-moz-text-decoration-style: wavy;
text-decoration-style: wavy;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-common-mixin-prefixer"><code>prefixer</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-decoration-style"><code>is-text-decoration-style</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-decoration"><code>text-decoration</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/css3_pr_text-decoration-style.asp">- W3Schools text-decoration-style docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-mixin-text-stroke"><h3 class="item__heading"><a class="item__name" href="#mixin-text-stroke">text-stroke</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin text-stroke($options, $options.width: 1rem, $options.color: #fff, $important: false) {
$settings: (width: 1rem, color: #fff);
@if is-object($options) {
$settings: extend($settings, $options);
}
@else {
$width: nth-value($options, 1);
@if is-defined($width) {
$settings: extend($settings, (width: $width));
}
$color: nth-value($options, 2);
@if is-defined($color) {
$settings: extend($settings, (color: $color));
}
}
$text-stroke-width: map-get($settings, width);
$text-stroke-color: map-get($settings, color);
@if is-defined($text-stroke-width) and is-defined($text-stroke-color) {
@supports ((text-stroke-width: $text-stroke-width) and (text-stroke-color: $text-stroke-color)) or ((-webkit-text-stroke-width: $text-stroke-width) and (-webkit-text-stroke-color: $text-stroke-color)) {
@include text-stroke-width($text-stroke-width, $important);
@include text-stroke-color($text-stroke-color, $important);
}
@supports (not (((text-stroke-width: $text-stroke-width) and (text-stroke-color: $text-stroke-color)) or ((-webkit-text-stroke-width: $text-stroke-width) and (-webkit-text-stroke-color: $text-stroke-color)))) {
@include text-shadow(.1rem .1rem $text-stroke-width $text-stroke-color, .1rem -.1rem $text-stroke-width $text-stroke-color, -.1rem .1rem $text-stroke-width $text-stroke-color, -.1rem -.1rem $text-stroke-width $text-stroke-color);
}
}
}" data-collapsed="@mixin text-stroke($options, $options.width: 1rem, $options.color: #fff, $important: false) { ... }"><code>@mixin text-stroke($options, $options.width: 1rem, $options.color: #fff, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Text stroke mixin, with fallbacks for older browsers</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$options</code></th><td data-label="desc"><p>the options</p></td><td data-label="type"><code>Object</code> or <code>Map</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.width</code></th><td data-label="desc"><p>the text-stroke-width value</p></td><td data-label="type"><code>Size</code> or <code>Text-stroke-width-mode</code></td><td data-label="default"><code>1rem</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.color</code></th><td data-label="desc"><p>the text-stroke-color value</p></td><td data-label="type"><code>Color</code></td><td data-label="default"><code class="color-preview--inline" style="background:#fff; color: #000">#fff</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.text-stroke-element {
@include text-stroke(2rem red);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.text-stroke-element {
// if text-stroke is supported
-webkit-text-stroke: 2rem red;
text-stroke: 2rem red;
// if text-stroke is not supported
-webkit-text-shadow: .1rem .1rem 2rem red, .1rem -.1rem 2rem red, -.1rem .1rem 2rem red, -.1rem -.1rem 2rem red;
-moz-text-shadow: .1rem .1rem 2rem red, .1rem -.1rem 2rem red, -.1rem .1rem 2rem red, -.1rem -.1rem 2rem red;
-ms-text-shadow: .1rem .1rem 2rem red, .1rem -.1rem 2rem red, -.1rem .1rem 2rem red, -.1rem -.1rem 2rem red;
-o-text-shadow: .1rem .1rem 2rem red, .1rem -.1rem 2rem red, -.1rem .1rem 2rem red, -.1rem -.1rem 2rem red;
text-shadow: .1rem .1rem 2rem red, .1rem -.1rem 2rem red, -.1rem .1rem 2rem red, -.1rem -.1rem 2rem red;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-stroke-width"><code>text-stroke-width</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-stroke-color"><code>text-stroke-color</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-shadow"><code>text-shadow</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-is-object"><code>is-object</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-mixin-text-decoration-color"><h3 class="item__heading"><a class="item__name" href="#mixin-text-decoration-color">text-decoration-color</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin text-decoration-color($tdc, $important: false) {
@if(is-text-decoration-color($tdc)) {
@include prefixer(text-decoration-color, $tdc, webkit moz spec, $important);
}
@else {
@warn '`text-decoration-color: #{$tdc}` is not a valid text-decoration-color value';
}
}" data-collapsed="@mixin text-decoration-color($tdc, $important: false) { ... }"><code>@mixin text-decoration-color($tdc, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Text decoration color mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$tdc</code></th><td data-label="desc"><p>the text-decoration-color value</p></td><td data-label="type"><code>Text-decoration-color-mode</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.text-decoration-color-element {
@include text-decoration-color(red);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.text-decoration-color-element {
-webkit-text-decoration-color: red;
-moz-decoration-color: red;
text-decoration-color: red;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-common-mixin-prefixer"><code>prefixer</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-decoration-color"><code>is-text-decoration-color</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-decoration"><code>text-decoration</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/css3_pr_text-decoration-color.asp">- W3Schools text-decoration-color docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-mixin-text-decoration"><h3 class="item__heading"><a class="item__name" href="#mixin-text-decoration">text-decoration</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin text-decoration($options, $options.line: none, $options.style: solid, $options.color: transparent, $shorthand: false, $important: false) {
@if(is-text-decoration-mode($options)) {
text-decoration: $options important($important);
}
@else {
$settings: (line: none, style: null, color: null);
@if is-object($options) {
$settings: extend($settings, $options);
}
@else {
$line: nth-value($options, 1);
@if is-defined($line) {
$settings: extend($settings, (line: $line));
}
$style: nth-value($options, 2);
@if is-defined($style) {
$settings: extend($settings, (style: $style));
}
$color: nth-value($options, 3);
@if is-defined($color) {
$settings: extend($settings, (color: $color));
}
}
$text-decoration: ();
$text-decoration-line: get($settings, line);
@if is-defined($text-decoration-line) {
@if $shorthand == false {
@include text-decoration-line($text-decoration-line, $important);
}
@else if is-text-decoration-line($text-decoration-line) {
$text-decoration: append($text-decoration, $text-decoration-line);
}
@else {
@warn '`text-decoration-line: #{$text-decoration-line}` is not a valid text-decoration-line value';
}
}
$text-decoration-style: get($settings, style);
@if is-defined($text-decoration-style) {
@if $shorthand == false {
@include text-decoration-style($text-decoration-style, $important);
}
@else if is-text-decoration-style($text-decoration-style) {
$text-decoration: append($text-decoration, $text-decoration-style);
}
@else {
@warn '`text-decoration-style: #{$text-decoration-style}` is not a valid text-decoration-style value';
}
}
$text-decoration-color: get($settings, color);
@if is-defined($text-decoration-color) {
@if $shorthand == false {
@include text-decoration-color($text-decoration-color, $important);
}
@else if is-text-decoration-color($text-decoration-color) {
$text-decoration: append($text-decoration, $text-decoration-color);
}
@else {
@warn '`text-decoration-color: #{$text-decoration-color}` is not a valid css color';
}
}
@if $shorthand == true {
text-decoration: $text-decoration important($important);
}
}
}" data-collapsed="@mixin text-decoration($options, $options.line: none, $options.style: solid, $options.color: transparent, $shorthand: false, $important: false) { ... }"><code>@mixin text-decoration($options, $options.line: none, $options.style: solid, $options.color: transparent, $shorthand: false, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Text decoration mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$options</code></th><td data-label="desc"><p>the text-decoration options</p></td><td data-label="type"><code>String</code> or <code>Object</code> or <code>Map</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.line</code></th><td data-label="desc"><p>text-decoration-line</p></td><td data-label="type"><code>Text-decoration-line</code></td><td data-label="default"><code>none</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.style</code></th><td data-label="desc"><p>text-decoration-style</p></td><td data-label="type"><code>Text-decoration-style</code></td><td data-label="default"><code>solid</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.color</code></th><td data-label="desc"><p>text-decoration-color</p></td><td data-label="type"><code>Text-decoration-color</code></td><td data-label="default"><code>transparent</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$shorthand</code></th><td data-label="desc"><p>if true, will render the shorthand form of text-decoration property</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.text-decoration-element {
@include text-decoration(none);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.text-decoration {
text-decoration: none;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-decoration-line"><code>text-decoration-line</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-decoration-style"><code>text-decoration-style</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-decoration-color"><code>text-decoration-color</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-decoration-mode"><code>is-text-decoration-mode</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-is-object"><code>is-object</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-get"><code>get</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-decoration-line"><code>is-text-decoration-line</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-get"><code>get</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-decoration-style"><code>is-text-decoration-style</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-get"><code>get</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-decoration-color"><code>is-text-decoration-color</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-important"><code>important</code></a></li></ul><h3 class="item__sub-heading">TODO's</h3><ul class="list-unstyled"><li><p>Add support to multiple text-decoration-line options</p></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/pr_text_text-decoration.asp">- W3Schools text-decoration docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-mixin-content-align"><h3 class="item__heading"><a class="item__name" href="#mixin-content-align">content-align</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin content-align($options, $options.h: inherit, $options.v: inherit, $important: false) {
$settings: (h: inherit, v: inherit);
@if is-object($options) {
$settings: extend($settings, $options);
}
@else {
$h: nth-value($options, 1);
@if is-defined($h) {
$settings: extend($settings, (h: $h));
}
$v: nth-value($options, 2);
@if is-defined($v) {
$settings: extend($settings, (v: $v));
}
}
$h: get($settings, h);
@if is-defined($h) {
@include text-align($h, $important);
}
$v: get($settings, v);
@if is-defined($v) {
@include vertical-align($v, $important);
}
}" data-collapsed="@mixin content-align($options, $options.h: inherit, $options.v: inherit, $important: false) { ... }"><code>@mixin content-align($options, $options.h: inherit, $options.v: inherit, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Content align mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$options</code></th><td data-label="desc"><p>the content-align options value</p></td><td data-label="type"><code>Object</code> or <code>Map</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.h</code></th><td data-label="desc"><p>the text-align value</p></td><td data-label="type"><code>String</code></td><td data-label="default"><code>inherit</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$options.v</code></th><td data-label="desc"><p>the vertical-align value</p></td><td data-label="type"><code>String</code></td><td data-label="default"><code>inherit</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.content-align-element {
@include content-align(center middle);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.content-align-element {
text-align: center;
vertical-align: middle;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-align"><code>text-align</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-vertical-align"><code>vertical-align</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-is-object"><code>is-object</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-get"><code>get</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-get"><code>get</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#grid-system-columns-mixin-columns"><code>columns</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-mixin-text-shadow"><h3 class="item__heading"><a class="item__name" href="#mixin-text-shadow">text-shadow</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin text-shadow($text-shadows...) {
@if list-separator($text-shadows) != comma {
$text-shadows: ($text-shadows,);
}
@if is-text-shadows($text-shadows) {
@include prefixer(text-shadow, $text-shadows);
}
@else {
@warn '`text-shadow: #{$text-shadows}` one or more are not valid css text-shadow values';
}
}" data-collapsed="@mixin text-shadow($text-shadows...) { ... }"><code>@mixin text-shadow($text-shadows...) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Text shadow mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$text-shadows...</code></th><td data-label="desc"><p>the text shadows list</p></td><td data-label="type"><code>Shadow</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.text-shadow-element {
@include text-shadow(0 2px 0 #dcffa6, 0 2px 5px #000);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.text-shadow-element {
-webkit-text-shadow: 0 2px 0 #dcffa6, 0 2px 5px #000;
-moz-text-shadow: 0 2px 0 #dcffa6, 0 2px 5px #000;
-ms-text-shadow: 0 2px 0 #dcffa6, 0 2px 5px #000;
-o-text-shadow: 0 2px 0 #dcffa6, 0 2px 5px #000;
text-shadow: 0 2px 0 #dcffa6, 0 2px 5px #000;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-common-mixin-prefixer"><code>prefixer</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-shadows"><code>is-text-shadows</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-stroke"><code>text-stroke</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-mixin-ellipsis"><h3 class="item__heading"><a class="item__name" href="#mixin-ellipsis">ellipsis</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin ellipsis($multiline: false, $width: 100%, $font-size: $font-size-base, $line-height: $line-height-base, $lines-to-show: 3, $text-overflow: ellipsis) {
@if $multiline {
$max-width: $width;
$height: $line-height * $lines-to-show; // fallback for non-webkit
$min-height: $height; // fallback for non-webkit
@include margin(0 auto);
@include font($font-size $line-height);
@supports (display: -webkit-box) and (-webkit-line-clamp: $lines-to-show) and (-webkit-box-orient: vertical) {
display: -webkit-box;
-webkit-line-clamp: $lines-to-show;
-webkit-box-orient: vertical;
@include box-size(null null null null $max-width);
}
@supports (not ((display: -webkit-box) and (-webkit-line-clamp: $lines-to-show) and (-webkit-box-orient: vertical))) {
@include display(block); // fallback for non-webkit
@include box-size(null $height null $min-height $max-width);
}
}
@else {
@include display(inline-block);
@include box-bounds(null null $width null);
@include white-space(nowrap);
@include word-wrap(normal);
}
@include overflow(hidden);
@include text-overflow($text-overflow);
}" data-collapsed="@mixin ellipsis($multiline: false, $width: 100%, $font-size: $font-size-base, $line-height: $line-height-base, $lines-to-show: 3, $text-overflow: ellipsis) { ... }"><code>@mixin ellipsis($multiline: false, $width: 100%, $font-size: $font-size-base, $line-height: $line-height-base, $lines-to-show: 3, $text-overflow: ellipsis) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Ellipsis mixin<br>useful to ellipse text containers also in multiline mode</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$multiline</code></th><td data-label="desc"><p>the multiline mode</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$width</code></th><td data-label="desc"><p>the width to use</p></td><td data-label="type"><code>Size</code> or <code>Length</code> or <code>Percentage</code></td><td data-label="default"><code>100%</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$font-size</code></th><td data-label="desc"><p>the font-size</p></td><td data-label="type"><code>Size</code> or <code>Length</code> or <code>Percentage</code></td><td data-label="default"><code>$font-size-base</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$line-height</code></th><td data-label="desc"><p>the line-height</p></td><td data-label="type"><code>Size</code> or <code>Length</code> or <code>Percentage</code></td><td data-label="default"><code>$line-height-base</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$lines-to-show</code></th><td data-label="desc"><p>the lines to show before ellipsis</p></td><td data-label="type"><code>Integer</code></td><td data-label="default"><code>3</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$text-overflow</code></th><td data-label="desc"><p>the text to use for overflowing</p></td><td data-label="type"><code>String</code></td><td data-label="default"><code>ellipsis</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage - single line</p></div><pre class="example__code language-scss"><code>.ellipsis-element {
@include ellipsis;
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output - single line</p></div><pre class="example__code language-css"><code>.ellipsis-element {
display: inline-block;
white-space: nowrap;
word-wrap: normal;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Usage - multi line</p></div><pre class="example__code language-scss"><code>.ellipsis-element {
@include ellipsis(true);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output - multi line</p></div><pre class="example__code language-css"><code>.ellipsis-element {
display: block;
display: -webkit-box;
margin: 0 auto;
font-size: 10px;
line-height: 1.5;
max-width: 100%;
height: 45px;
min-height: 45px;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-margin-mixin-margin"><code>margin</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-font"><code>font</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-box-size"><code>box-size</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-display"><code>display</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-box-size"><code>box-size</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-display"><code>display</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-box-bounds"><code>box-bounds</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-white-space"><code>white-space</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-word-wrap"><code>word-wrap</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-overflow-mixin-overflow"><code>overflow</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-overflow"><code>text-overflow</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-mixin-text-decoration-skip"><h3 class="item__heading"><a class="item__name" href="#mixin-text-decoration-skip">text-decoration-skip</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin text-decoration-skip($tds, $important: false) {
@if(is-text-decoration-skip($tds)) {
@include prefixer(text-decoration-skip, $tds, webkit spec, $important);
}
@else {
@warn '`text-decoration-skip: #{$tds}` is not a valid text-decoration-skip value';
}
}" data-collapsed="@mixin text-decoration-skip($tds, $important: false) { ... }"><code>@mixin text-decoration-skip($tds, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Text decoration skip mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$tds</code></th><td data-label="desc"><p>the text-decoration-skip value</p></td><td data-label="type"><code>Text-decoration-skip-mode</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.text-decoration-skip-element {
@include text-decoration-skip(objects);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.text-decoration-skip-element {
-webkit-text-decoration-skip: objects;
text-decoration-skip: objects;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-common-mixin-prefixer"><code>prefixer</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-decoration-skip"><code>is-text-decoration-skip</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/css3_pr_text-decoration-skip.asp">- W3Schools text-decoration-skip docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-mixin-content"><h3 class="item__heading"><a class="item__name" href="#mixin-content">content</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin content($content: '') {
content: $content;
}" data-collapsed="@mixin content($content: '') { ... }"><code>@mixin content($content: '') { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Content mixin<br>useful to set content</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$content</code></th><td data-label="desc">—<span class="visually-hidden"> none</span></td><td data-label="type"><code>String</code></td><td data-label="default"><code>''</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage - empty</p></div><pre class="example__code language-scss"><code>.content-element {
@include content;
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output - empty</p></div><pre class="example__code language-css"><code>.content-element {
content: '';
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Usage - with attr</p></div><pre class="example__code language-scss"><code>.content-element {
@include content(attr(title));
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output - with attr</p></div><pre class="example__code language-css"><code>.ellipsis-element {
content: attr(title);
}</code></pre></div><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-mixin-text-underline-position"><h3 class="item__heading"><a class="item__name" href="#mixin-text-underline-position">text-underline-position</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin text-underline-position($tup, $important: false) {
@if(is-text-underline-position($tup)) {
@include prefixer(text-underline-position, $tup, webkit spec, $important);
}
@else {
@warn '`text-underline-position: #{$tup}` is not a valid text-underline-position value';
}
}" data-collapsed="@mixin text-underline-position($tup, $important: false) { ... }"><code>@mixin text-underline-position($tup, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Text underline position mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$tup</code></th><td data-label="desc"><p>the text-underline-position value</p></td><td data-label="type"><code>Text-underline-position-mode</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>if true, will render the important rule</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.text-underline-position-element {
@include text-underline-position(under);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.text-underline-position-element {
-webkit-text-underline-position: under;
text-underline-position: under;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-common-mixin-prefixer"><code>prefixer</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-underline-position"><code>is-text-underline-position</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/css3_pr_text-underline-position.asp">- W3Schools text-underline-position docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section><section class="main__sub-section" id="mixins-text-variable"><h2 class="main__heading--secondary"><div class="container">variables</div></h2><section class="main__item container item" id="mixins-text-variable-direction-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-direction-modes">direction-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$direction-modes: array-concat((ltr, rtl), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Direction modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-direction"><code>is-direction</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-variable-font-weight-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-font-weight-modes">font-weight-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$font-weight-modes: array-concat((normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Font weight modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-font-weight"><code>is-font-weight</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-variable-hyphens-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-hyphens-modes">hyphens-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$hyphens-modes: array-concat((none, manual, auto, unset), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Hyphens modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-hyphens"><code>is-hyphens</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-variable-letter-spacing-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-letter-spacing-modes">letter-spacing-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$letter-spacing-modes: array-concat((normal), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Letter spacing modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-letter-spacing"><code>is-letter-spacing</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-variable-line-height-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-line-height-modes">line-height-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$line-height-modes: array-concat((normal), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Line height modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-line-height"><code>is-line-height</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-variable-text-align-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-text-align-modes">text-align-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$text-align-modes: array-concat((left, center, right, justify), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Text align modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-align"><code>is-text-align</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-variable-text-overflow-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-text-overflow-modes">text-overflow-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$text-overflow-modes: array-concat((clip, ellipsis), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Text overflow modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-overflow"><code>is-text-overflow</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-variable-text-shadow-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-text-shadow-modes">text-shadow-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$text-shadow-modes: array-concat((none), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Text shadow modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-shadow-mode"><code>is-text-shadow-mode</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-variable-text-size-adjust-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-text-size-adjust-modes">text-size-adjust-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$text-size-adjust-modes: array-concat((none, auto, unset), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Text size adjust modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-size-adjust"><code>is-text-size-adjust</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-variable-text-transform-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-text-transform-modes">text-transform-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$text-transform-modes: array-concat((none, capitalize, uppercase, lowercase), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Text transform modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-transform"><code>is-text-transform</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-variable-user-select-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-user-select-modes">user-select-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$user-select-modes: (auto, none, text, all);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>User select modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-user-select"><code>is-user-select</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-variable-vertical-align-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-vertical-align-modes">vertical-align-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$vertical-align-modes: array-concat((baseline, sub, super, top, text-top, middle, bottom, text-bottom), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Vertical align modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-vertical-align"><code>is-vertical-align</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-variable-white-space-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-white-space-modes">white-space-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$white-space-modes: array-concat((normal, nowrap, pre, pre-line, pre-wrap), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>White space modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-white-space"><code>is-white-space</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-variable-word-break-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-word-break-modes">word-break-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$word-break-modes: array-concat((normal, break-all, keep-all), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Word break modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-word-break"><code>is-word-break</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-variable-word-spacing-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-word-spacing-modes">word-spacing-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$word-spacing-modes: array-concat((normal), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Word spacing modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-word-spacing"><code>is-word-spacing</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-variable-font-size-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-font-size-modes">font-size-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$font-size-modes: array-concat((medium, xx-small, x-small, small, large, x-large, xx-large, smaller, larger), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Font size modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-concat"><code>array-concat</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-font-size"><code>is-font-size</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-variable-font-style-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-font-style-modes">font-style-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$font-style-modes: array-concat((normal, italic, oblique), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Font style modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-concat"><code>array-concat</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-font-style"><code>is-font-style</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-variable-text-decoration-line-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-text-decoration-line-modes">text-decoration-line-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$text-decoration-line-modes: array-concat((none, underline, overline, line-through), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Text decoration line modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-concat"><code>array-concat</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-decoration-line"><code>is-text-decoration-line</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-variable-text-stroke-width-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-text-stroke-width-modes">text-stroke-width-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$text-stroke-width-modes: array-concat((thin, medium, thick), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Text stroke width modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-concat"><code>array-concat</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-stroke-width"><code>is-text-stroke-width</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-variable-word-wrap-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-word-wrap-modes">word-wrap-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$word-wrap-modes: array-concat((normal, break-word), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Word wrap modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-word-wrap"><code>is-word-wrap</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-variable-text-decoration-style-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-text-decoration-style-modes">text-decoration-style-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$text-decoration-style-modes: array-concat((solid, double, dotted, dashed, wavy), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Text decoration style modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-concat"><code>array-concat</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-decoration-style"><code>is-text-decoration-style</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-variable-text-decoration-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-text-decoration-modes">text-decoration-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$text-decoration-modes: array-concat((none), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Text decoration modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-concat"><code>array-concat</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-decoration-mode"><code>is-text-decoration-mode</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-variable-text-decoration-skip-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-text-decoration-skip-modes">text-decoration-skip-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$text-decoration-skip-modes: array-concat((none, objects, spaces, ink, edges, box-decoration, unset), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Text decoration skip modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-concat"><code>array-concat</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-decoration-skip"><code>is-text-decoration-skip</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-text-variable-text-underline-position-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-text-underline-position-modes">text-underline-position-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$text-underline-position-modes: array-concat((auto, left, right, under, unset), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Text underline position modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-concat"><code>array-concat</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-underline-position"><code>is-text-underline-position</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section></section><section class="main__section"><h1 class="main__heading" id="mixins-transform"><div class="container">Mixins - Transform</div></h1><section class="main__sub-section" id="mixins-transform-function"><h2 class="main__heading--secondary"><div class="container">functions</div></h2><section class="main__item container item" id="mixins-transform-function-get-transform-function-name"><h3 class="item__heading"><a class="item__name" href="#function-get-transform-function-name">get-transform-function-name</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function get-transform-function-name($t) {
@if(string-contains($t, '(') and string-contains($t, ')')) {
@return string-slice($t, 1, string-index($t, '(') - 1);
}
@return null;
}" data-collapsed="@function get-transform-function-name($t) { ... }"><code>@function get-transform-function-name($t) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Extracts transform function name from a transform value</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$t</code></th><td data-label="desc"><p>the transform value (e.g. <code>scale(2)</code> or <code>rotate(10deg)</code>)</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>String</code> or <code>Null</code> —<p>the transform function name or null</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-string-function-string-contains"><code>string-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-string-function-string-contains"><code>string-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-string-function-string-slice"><code>string-slice</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-string-function-string-index"><code>string-index</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-transform-function-is-transform-function"><code>is-transform-function</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-transform-function-is-transform-function"><h3 class="item__heading"><a class="item__name" href="#function-is-transform-function">is-transform-function</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-transform-function($tf) {
$transform-function-name: get-transform-function-name($tf);
@return is-defined($transform-function-name) and array-contains($transform-functions-names, $transform-function-name);
}" data-collapsed="@function is-transform-function($tf) { ... }"><code>@function is-transform-function($tf) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a transform function value</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$tf</code></th><td data-label="desc"><p>the transform function value (e.g. <code>scale(2)</code> or <code>rotate(10deg)</code>)</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is a transform function value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-transform-function-get-transform-function-name"><code>get-transform-function-name</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-transform-variable-transform-functions-names"><code>transform-functions-names</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-transform-function-is-transform"><code>is-transform</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-transform-function-is-transform"><h3 class="item__heading"><a class="item__name" href="#function-is-transform">is-transform</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-transform($t) {
@return is-defined($t) and (array-contains($transform-modes, $t) or is-transform-function($t));
}" data-collapsed="@function is-transform($t) { ... }"><code>@function is-transform($t) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a transform value</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$t</code></th><td data-label="desc"><p>the transform value (e.g. <code>none</code> or <code>scale(2)</code> or <code>rotate(10deg)</code>)</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is a transform value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-transform-function-is-transform-function"><code>is-transform-function</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-transform-variable-transform-modes"><code>transform-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-transform-function-is-transforms"><code>is-transforms</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-transform-function-is-transforms"><h3 class="item__heading"><a class="item__name" href="#function-is-transforms">is-transforms</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-transforms($ts) {
$is-valid: true;
@each $t in $ts {
@if $is-valid {
$is-valid: is-transform(to-string($t));
}
}
@return $is-valid;
}" data-collapsed="@function is-transforms($ts) { ... }"><code>@function is-transforms($ts) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if a space separated list is a transforms values list</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$ts</code></th><td data-label="desc"><p>the transforms values list (e.g. <code>scale(2) rotate(-45deg)</code>)</p></td><td data-label="type"><code>String</code> or <code>Array</code> or <code>List</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is a transform values list</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-transform-function-is-transform"><code>is-transform</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-string-function-to-string"><code>to-string</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-transform"><code>transform</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-transform-function-is-transform-origin"><h3 class="item__heading"><a class="item__name" href="#function-is-transform-origin">is-transform-origin</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-transform-origin($to, $to-axis-modes) {
@return is-defined($to) and (is-size($to) or if(length($to-axis-modes) > 0, array-contains($to-axis-modes, $to) or is-percentage($to)));
}" data-collapsed="@function is-transform-origin($to, $to-axis-modes) { ... }"><code>@function is-transform-origin($to, $to-axis-modes) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a transform-origin value</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$to</code></th><td data-label="desc"><p>the transform-origin value (e.g. <code>auto</code> or <code>20px</code>) - <b>Note:</b> for the z-axis can be only a length (e.g. no percentage)</p></td><td data-label="type"><code>String</code> or <code>Size</code> or <code>Length</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$to-axis-modes</code></th><td data-label="desc"><p>can be empty list or $transform-origin-x-axis-modes or $transform-origin-y-axis-modes</p></td><td data-label="type"><code>Array</code> or <code>List</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is a transform-origin value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-size"><code>is-size</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-percentage"><code>is-percentage</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-transform-origin"><code>transform-origin</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-transform-origin"><code>transform-origin</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-transform-origin"><code>transform-origin</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-transform-function-is-transform-style"><h3 class="item__heading"><a class="item__name" href="#function-is-transform-style">is-transform-style</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-transform-style($ts) {
@return is-defined($ts) and array-contains($transform-style-modes, $ts);
}" data-collapsed="@function is-transform-style($ts) { ... }"><code>@function is-transform-style($ts) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a transform-style mode</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$ts</code></th><td data-label="desc"><p>the transform-style mode (e.g. <code>preserve-3d</code> or <code>initial</code>)</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is a transform-style mode</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-transform-variable-transform-style-modes"><code>transform-style-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-transform-style"><code>transform-style</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/css3_pr_transform-style.asp">W3Schools transform-style docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section><section class="main__sub-section" id="mixins-transform-mixin"><h2 class="main__heading--secondary"><div class="container">mixins</div></h2><section class="main__item container item" id="mixins-transform-mixin-transform"><h3 class="item__heading"><a class="item__name" href="#mixin-transform">transform</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin transform($ts) {
@if is-transforms($ts) {
@include prefixer(transform, $ts);
}
@else {
@warn '`transform: #{$transforms}` is not a valid transform value';
}
}" data-collapsed="@mixin transform($ts) { ... }"><code>@mixin transform($ts) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Transform mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$ts</code></th><td data-label="desc"><p>the transforms list (e.g. <code>skew(10deg, 3deg)</code> or <code>scale(2.2) rotate(-90deg)</code>)</p></td><td data-label="type"><code>String</code> or <code>Array</code> or <code>List</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage - single transform</p></div><pre class="example__code language-scss"><code>.transform-element {
@include transform(skew(10deg, 3deg));
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output - single transform</p></div><pre class="example__code language-css"><code>.transform-element {
-webkit-transform: skew(10deg, 3deg);
-moz-transform: skew(10deg, 3deg);
-ms-transform: skew(10deg, 3deg);
-o-transform: skew(10deg, 3deg);
transform: skew(10deg, 3deg);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Usage - multiple transforms</p></div><pre class="example__code language-scss"><code>.transform-element {
@include transform(scale(2.2) rotate(-90deg));
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output - multiple transforms</p></div><pre class="example__code language-css"><code>.transform-element {
-webkit-transform: scale(2.2) rotate(-90deg);
-moz-transform: scale(2.2) rotate(-90deg);
-ms-transform: scale(2.2) rotate(-90deg);
-o-transform: scale(2.2) rotate(-90deg);
transform: scale(2.2) rotate(-90deg);
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-common-mixin-prefixer"><code>prefixer</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-transform-function-is-transforms"><code>is-transforms</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-matrix"><code>matrix</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-matrix3d"><code>matrix3d</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-perspective"><code>perspective</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-rotate"><code>rotate</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-rotate3d"><code>rotate3d</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-rotateX"><code>rotateX</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-rotateY"><code>rotateY</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-rotateZ"><code>rotateZ</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-scale"><code>scale</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-scale3d"><code>scale3d</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-scaleX"><code>scaleX</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-scaleY"><code>scaleY</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-scaleZ"><code>scaleZ</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-skew"><code>skew</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-skewX"><code>skewX</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-skewY"><code>skewY</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-translate"><code>translate</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-translate3d"><code>translate3d</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-translateX"><code>translateX</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-translateY"><code>translateY</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-translateZ"><code>translateZ</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-transform-mixin-matrix"><h3 class="item__heading"><a class="item__name" href="#mixin-matrix">matrix</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin matrix($a, $b, $c, $d, $tx, $ty) {
@if (is-number($a) and is-number($b) and is-number($c) and is-number($d) and is-number($tx) and is-number($ty)) {
@include transform(matrix($a, $b, $c, $d, $tx, $ty));
}
@else {
@warn '`transform: matrix(#{$a}, #{$b}, #{$c}, #{$d}, #{$tx}, #{$ty})` are not valid transform:matrix parameters values';
}
}" data-collapsed="@mixin matrix($a, $b, $c, $d, $tx, $ty) { ... }"><code>@mixin matrix($a, $b, $c, $d, $tx, $ty) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Matrix transform mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$a</code></th><td data-label="desc"><p>the a value for the linear transformation</p></td><td data-label="type"><code>Number</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$b</code></th><td data-label="desc"><p>the b value for the linear transformation</p></td><td data-label="type"><code>Number</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$c</code></th><td data-label="desc"><p>the c value for the linear transformation</p></td><td data-label="type"><code>Number</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$d</code></th><td data-label="desc"><p>the d value for the linear transformation</p></td><td data-label="type"><code>Number</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$tx</code></th><td data-label="desc"><p>the horizontal translation to apply</p></td><td data-label="type"><code>Number</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$ty</code></th><td data-label="desc"><p>the vertical translation to apply</p></td><td data-label="type"><code>Number</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.matrix-transform-element {
@include matrix(1, 2, -1, 1, 80, 80);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.matrix-transform-element {
-webkit-transform: matrix(1, 2, -1, 1, 80, 80);
-moz-transform: matrix(1, 2, -1, 1, 80, 80);
-ms-transform: matrix(1, 2, -1, 1, 80, 80);
-o-transform: matrix(1, 2, -1, 1, 80, 80);
transform: matrix(1, 2, -1, 1, 80, 80);
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-transform"><code>transform</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-number"><code>is-number</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-number"><code>is-number</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-number"><code>is-number</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-number"><code>is-number</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-number"><code>is-number</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-number"><code>is-number</code></a></li></ul><h3 class="item__sub-heading">See</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-transform"><code>transform</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix">MDN transform matrix docs</a></li><li><a href="https://dev.opera.com/articles/understanding-the-css-transforms-matrix/">Dev.Opera understanding the CSS Transform Matrix</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-transform-mixin-matrix3d"><h3 class="item__heading"><a class="item__name" href="#mixin-matrix3d">matrix3d</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin matrix3d($a1, $b1, $c1, $d1, $a2, $b2, $c2, $d2, $a3, $b3, $c3, $d3, $a4, $b4, $c4, $d4) {
@if (is-number($a1) and is-number($b1) and is-number($c1) and is-number($d1) and is-number($a2) and is-number($b2) and is-number($c2) and is-number($d2) and is-number($a3) and is-number($b3) and is-number($c3) and is-number($d3) and is-number($a4) and is-number($b4) and is-number($c4) and is-number($d4)) {
@include transform(matrix3d($a1, $b1, $c1, $d1, $a2, $b2, $c2, $d2, $a3, $b3, $c3, $d3, $a4, $b4, $c4, $d4));
}
@else {
@warn '`transform: matrix3d(#{$a1}, #{$b1}, #{$c1}, #{$d1}, #{$a2}, #{$b2}, #{$c2}, #{$d2}, #{$a3}, #{$b3}, #{$c3}, #{$d3}, #{$a4}, #{$b4}, #{$c4}, #{$d4})` are not valid transform:matrix3d parameters values';
}
}" data-collapsed="@mixin matrix3d($a1, $b1, $c1, $d1, $a2, $b2, $c2, $d2, $a3, $b3, $c3, $d3, $a4, $b4, $c4, $d4) { ... }"><code>@mixin matrix3d($a1, $b1, $c1, $d1, $a2, $b2, $c2, $d2, $a3, $b3, $c3, $d3, $a4, $b4, $c4, $d4) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Matrix transform mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$a1</code></th><td data-label="desc"><p>the a1 value for the linear transformation</p></td><td data-label="type"><code>Number</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$b1</code></th><td data-label="desc"><p>the b1 value for the linear transformation</p></td><td data-label="type"><code>Number</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$c1</code></th><td data-label="desc"><p>the c1 value for the linear transformation</p></td><td data-label="type"><code>Number</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$d1</code></th><td data-label="desc"><p>the d1 value for the linear transformation</p></td><td data-label="type"><code>Number</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$a2</code></th><td data-label="desc"><p>the a2 value for the linear transformation</p></td><td data-label="type"><code>Number</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$b2</code></th><td data-label="desc"><p>the b2 value for the linear transformation</p></td><td data-label="type"><code>Number</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$c2</code></th><td data-label="desc"><p>the c2 value for the linear transformation</p></td><td data-label="type"><code>Number</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$d2</code></th><td data-label="desc"><p>the d2 value for the linear transformation</p></td><td data-label="type"><code>Number</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$a3</code></th><td data-label="desc"><p>the a3 value for the linear transformation</p></td><td data-label="type"><code>Number</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$b3</code></th><td data-label="desc"><p>the b3 value for the linear transformation</p></td><td data-label="type"><code>Number</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$c3</code></th><td data-label="desc"><p>the c3 value for the linear transformation</p></td><td data-label="type"><code>Number</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$d3</code></th><td data-label="desc"><p>the d3 value for the linear transformation</p></td><td data-label="type"><code>Number</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$a4</code></th><td data-label="desc"><p>the a4 value for the translation to apply</p></td><td data-label="type"><code>Number</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$b4</code></th><td data-label="desc"><p>the b4 value for the translation to apply</p></td><td data-label="type"><code>Number</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$c4</code></th><td data-label="desc"><p>the c4 value for the translation to apply</p></td><td data-label="type"><code>Number</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$d4</code></th><td data-label="desc"><p>the d4 value for the linear transformation</p></td><td data-label="type"><code>Number</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.matrix3d-transform-element {
@include matrix3d(0.515078, -0.199333, 0, 0.00021, 0.502268, 0.802615, 0, 0.00008, 0, 0, 1, 0, 438, 240, 0, 1);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.matrix-transform-element {
-webkit-transform: matrix3d(0.515078, -0.199333, 0, 0.00021, 0.502268, 0.802615, 0, 0.00008, 0, 0, 1, 0, 438, 240, 0, 1);
-moz-transform: matrix3d(0.515078, -0.199333, 0, 0.00021, 0.502268, 0.802615, 0, 0.00008, 0, 0, 1, 0, 438, 240, 0, 1);
-ms-transform: matrix3d(0.515078, -0.199333, 0, 0.00021, 0.502268, 0.802615, 0, 0.00008, 0, 0, 1, 0, 438, 240, 0, 1);
-o-transform: matrix3d(0.515078, -0.199333, 0, 0.00021, 0.502268, 0.802615, 0, 0.00008, 0, 0, 1, 0, 438, 240, 0, 1);
transform: matrix3d(0.515078, -0.199333, 0, 0.00021, 0.502268, 0.802615, 0, 0.00008, 0, 0, 1, 0, 438, 240, 0, 1);
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-transform"><code>transform</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-number"><code>is-number</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-number"><code>is-number</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-number"><code>is-number</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-number"><code>is-number</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-number"><code>is-number</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-number"><code>is-number</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-number"><code>is-number</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-number"><code>is-number</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-number"><code>is-number</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-number"><code>is-number</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-number"><code>is-number</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-number"><code>is-number</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-number"><code>is-number</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-number"><code>is-number</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-number"><code>is-number</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-number"><code>is-number</code></a></li></ul><h3 class="item__sub-heading">See</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-transform"><code>transform</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix3d">MDN transform matrix docs</a></li><li><a href="https://dev.opera.com/articles/understanding-the-css-transforms-matrix/">Dev.Opera understanding the CSS Transform Matrix</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-transform-mixin-perspective"><h3 class="item__heading"><a class="item__name" href="#mixin-perspective">perspective</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin perspective($p) {
@if (is-size($p)) {
@include transform(perspective($p));
}
@else {
@warn '`transform: perspective(#{$p})` is not valid transform:perspective value';
}
}" data-collapsed="@mixin perspective($p) { ... }"><code>@mixin perspective($p) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Perspective transform mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$p</code></th><td data-label="desc"><p>the perspective value (e.g. <code>0</code> or <code>100px</code>)</p></td><td data-label="type"><code>Length</code> or <code>Size</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.perspective-element {
@include perspective(1000px);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.perspective-element {
-webkit-transform: perspective(1000px);
-moz-transform: perspective(1000px);
-ms-transform: perspective(1000px);
-o-transform: perspective(1000px);
transform: perspective(1000px);
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-transform"><code>transform</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-size"><code>is-size</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/perspective">MDN transform perspective docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-transform-mixin-rotate"><h3 class="item__heading"><a class="item__name" href="#mixin-rotate">rotate</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin rotate($a) {
@if (is-angle($a)) {
@include transform(rotate($a));
}
@else {
@warn '`transform: rotate(#{$a})` is not valid transform:rotate angle value';
}
}" data-collapsed="@mixin rotate($a) { ... }"><code>@mixin rotate($a) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Rotate transform mixin<br><b>Note:</b> - this is equivalent to rotateZ($a) or rotate3d(0, 0, 1, $a)</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$a</code></th><td data-label="desc"><p>the rotate angle (e.g. <code>30deg</code> or <code>-10rad</code>)</p></td><td data-label="type"><code>Angle</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.rotate-element {
@include rotate(10deg);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.rotate-element {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg);
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-transform"><code>transform</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-angle-function-is-angle"><code>is-angle</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate">MDN transform rotate docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-transform-mixin-rotate3d"><h3 class="item__heading"><a class="item__name" href="#mixin-rotate3d">rotate3d</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin rotate3d($x, $y, $z, $a) {
@if (is-percentage-number($x) and is-percentage-number($y) and is-percentage-number($z) and is-angle($a)) {
@include transform(rotate3d($x, $y, $z, $a));
}
@else {
@warn '`transform: rotate3d(#{$x}, #{$y}, #{$z}, #{$a})` are not valid transform:rotate3d values';
}
}" data-collapsed="@mixin rotate3d($x, $y, $z, $a) { ... }"><code>@mixin rotate3d($x, $y, $z, $a) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Rotate 3d transform mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$x</code></th><td data-label="desc"><p>the x-coordinate of the vector denoting the axis of rotation which could between 0 and 1 (e.g. <code>.75</code>)</p></td><td data-label="type"><code>Float</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$y</code></th><td data-label="desc"><p>the y-coordinate of the vector denoting the axis of rotation which could between 0 and 1 (e.g. <code>.75</code>)</p></td><td data-label="type"><code>Float</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$z</code></th><td data-label="desc"><p>the z-coordinate of the vector denoting the axis of rotation which could between 0 and 1 (e.g. <code>.75</code>)</p></td><td data-label="type"><code>Float</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$a</code></th><td data-label="desc"><p>the rotate angle (e.g. <code>30deg</code> or <code>-10rad</code>)</p></td><td data-label="type"><code>Angle</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.rotate3d-element {
@include rotate3d(.3, .5, .75, -10turn);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.rotate3d-element {
-webkit-transform: rotate3d(.3, .5, .75, -10turn);
-moz-transform: rotate3d(.3, .5, .75, -10turn);
-ms-transform: rotate3d(.3, .5, .75, -10turn);
-o-transform: rotate3d(.3, .5, .75, -10turn);
transform: rotate3d(.3, .5, .75, -10turn);
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-transform"><code>transform</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-percentage-number"><code>is-percentage-number</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-percentage-number"><code>is-percentage-number</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-percentage-number"><code>is-percentage-number</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-angle-function-is-angle"><code>is-angle</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate3d">MDN transform rotate3d docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-transform-mixin-rotateX"><h3 class="item__heading"><a class="item__name" href="#mixin-rotateX">rotateX</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin rotateX($a) {
@if (is-angle($x)) {
@include transform(rotateX($x));
}
@else {
@warn '`transform: rotateX(#{$x})` is not valid transform:rotateX angle value';
}
}" data-collapsed="@mixin rotateX($a) { ... }"><code>@mixin rotateX($a) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>RotateX transform mixin<br><b>Note:</b> - this is equivalent to rotate3d(1, 0, 0, $a)</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$a</code></th><td data-label="desc"><p>the rotateX angle (e.g. <code>30deg</code> or <code>-10rad</code>)</p></td><td data-label="type"><code>Angle</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.rotate-x-element {
@include rotateX(10deg);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.rotate-x-element {
-webkit-transform: rotateX(10deg);
-moz-transform: rotateX(10deg);
-ms-transform: rotateX(10deg);
-o-transform: rotateX(10deg);
transform: rotateX(10deg);
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-transform"><code>transform</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-angle-function-is-angle"><code>is-angle</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateX">MDN transform rotateX docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-transform-mixin-rotateY"><h3 class="item__heading"><a class="item__name" href="#mixin-rotateY">rotateY</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin rotateY($a) {
@if (is-angle($y)) {
@include transform(rotateY($y));
}
@else {
@warn '`transform: rotateY(#{$y})` is not valid transform:rotateY angle value';
}
}" data-collapsed="@mixin rotateY($a) { ... }"><code>@mixin rotateY($a) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>RotateY transform mixin<br><b>Note:</b> - this is equivalent to rotate3d(0, 1, 0, $a)</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$a</code></th><td data-label="desc"><p>the rotateY angle (e.g. <code>30deg</code> or <code>-10rad</code>)</p></td><td data-label="type"><code>Angle</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.rotate-y-element {
@include rotateY(10deg);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.rotate-y-element {
-webkit-transform: rotateY(10deg);
-moz-transform: rotateY(10deg);
-ms-transform: rotateY(10deg);
-o-transform: rotateY(10deg);
transform: rotateY(10deg);
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-transform"><code>transform</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-angle-function-is-angle"><code>is-angle</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateY">MDN transform rotateY docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-transform-mixin-rotateZ"><h3 class="item__heading"><a class="item__name" href="#mixin-rotateZ">rotateZ</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin rotateZ($a) {
@if (is-angle($z)) {
@include transform(rotateZ($z));
}
@else {
@warn '`transform: rotateZ(#{$z})` is not valid transform:rotateZ angle value';
}
}" data-collapsed="@mixin rotateZ($a) { ... }"><code>@mixin rotateZ($a) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>RotateZ transform mixin<br><b>Note:</b> - this is equivalent to rotate($a) or rotate3d(0, 0, 1, $a)</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$a</code></th><td data-label="desc"><p>the rotateZ angle (e.g. <code>30deg</code> or <code>-10rad</code>)</p></td><td data-label="type"><code>Angle</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.rotate-z-element {
@include rotateZ(10deg);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.rotate-z-element {
-webkit-transform: rotateZ(10deg);
-moz-transform: rotateZ(10deg);
-ms-transform: rotateZ(10deg);
-o-transform: rotateZ(10deg);
transform: rotateZ(10deg);
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-transform"><code>transform</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-angle-function-is-angle"><code>is-angle</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateZ">MDN transform rotateZ docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-transform-mixin-scale"><h3 class="item__heading"><a class="item__name" href="#mixin-scale">scale</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin scale($sx, $sy: $sx) {
$sy: if(is-defined($sy), $sy, $sx);
@if is-number($sx) and is-number($sy) {
@include transform(scale($sx, $sy));
}
@else {
@warn '`transform: scale(#{$sx}, #{$sy})` is not valid transform:scale factor value';
}
}" data-collapsed="@mixin scale($sx, $sy: $sx) { ... }"><code>@mixin scale($sx, $sy: $sx) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Scale transform mixin<br><b>Note:</b> - this is equivalent to <code>scaleX($sx) scaleY($sy)</code> or <code>scale3d($sx, $sy, 1)</code></p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$sx</code></th><td data-label="desc"><p>the abscissa of the scaling vector (e.g. <code>-.1</code> or <code>3.2</code>)</p></td><td data-label="type"><code>Float</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$sy</code></th><td data-label="desc"><p>the ordinate of the scaling vector (e.g. <code>-.1</code> or <code>3.2</code>)</p></td><td data-label="type"><code>Float</code></td><td data-label="default"><code>$sx</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage - single value</p></div><pre class="example__code language-scss"><code>.scale-element {
@include scale(3.2);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output - single value</p></div><pre class="example__code language-css"><code>.scale-element {
-webkit-transform: scale(3.2, 3.2);
-moz-transform: scale(3.2, 3.2);
-ms-transform: scale(3.2, 3.2);
-o-transform: scale(3.2, 3.2);
transform: scale(3.2, 3.2);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Usage - two values</p></div><pre class="example__code language-scss"><code>.scale-element {
@include scale(3.2, 2.5);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output - two values</p></div><pre class="example__code language-css"><code>.scale-element {
-webkit-transform: scale(3.2, 2.5);
-moz-transform: scale(3.2, 2.5);
-ms-transform: scale(3.2, 2.5);
-o-transform: scale(3.2, 2.5);
transform: scale(3.2, 2.5);
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-transform"><code>transform</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-number"><code>is-number</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-number"><code>is-number</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale">MDN transform scale docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-transform-mixin-scale3d"><h3 class="item__heading"><a class="item__name" href="#mixin-scale3d">scale3d</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin scale3d($sx, $sy, $sz) {
@if is-number($sx) and is-number($sy) and is-number($sz) {
@include transform(scale3d($sx, $sy, $sz));
}
@else {
@warn '`transform: scale3d(#{$sx}, #{$sy}, #{$sz})` are not valid transform:scale3d factor values';
}
}" data-collapsed="@mixin scale3d($sx, $sy, $sz) { ... }"><code>@mixin scale3d($sx, $sy, $sz) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Scale 3d transform mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$sx</code></th><td data-label="desc"><p>the abscissa of the scaling vector (e.g. <code>-.1</code> or <code>3.2</code>)</p></td><td data-label="type"><code>Float</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$sy</code></th><td data-label="desc"><p>the ordinate of the scaling vector (e.g. <code>-.1</code> or <code>3.2</code>)</p></td><td data-label="type"><code>Float</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$sz</code></th><td data-label="desc"><p>the z-component of the scaling vector (e.g. <code>-.1</code> or <code>3.2</code>)</p></td><td data-label="type"><code>Float</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.scale3d-element {
@include scale3d(-1.4, 0.4, 0.7);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.scale3d-element {
-webkit-transform: scale3d(-1.4, 0.4, 0.7);
-moz-transform: scale3d(-1.4, 0.4, 0.7);
-ms-transform: scale3d(-1.4, 0.4, 0.7);
-o-transform: scale3d(-1.4, 0.4, 0.7);
transform: scale3d(-1.4, 0.4, 0.7);
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-transform"><code>transform</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-number"><code>is-number</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-number"><code>is-number</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-number"><code>is-number</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale3d">MDN transform scale3d docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-transform-mixin-scaleX"><h3 class="item__heading"><a class="item__name" href="#mixin-scaleX">scaleX</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin scaleX($sx) {
@if is-number($sx) {
@include transform(scaleX($sx));
}
@else {
@warn '`transform: scaleX(#{$sx})` is not valid transform:scaleX factor value';
}
}" data-collapsed="@mixin scaleX($sx) { ... }"><code>@mixin scaleX($sx) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>ScaleX transform mixin<br><b>Note:</b> - this is equivalent to <code>scale($sx, 1)</code> or <code>scale3d($sx, 1, 1)</code></p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$sx</code></th><td data-label="desc"><p>the scaling factor to apply on the abscissa of each point of the element (e.g. <code>-.1</code> or <code>3.2</code>)</p></td><td data-label="type"><code>Float</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.scale-x-element {
@include scaleX(3.2);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.scale-x-element {
-webkit-transform: scaleX(3.2);
-moz-transform: scaleX(3.2);
-ms-transform: scaleX(3.2);
-o-transform: scaleX(3.2);
transform: scaleX(3.2);
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-transform"><code>transform</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-number"><code>is-number</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scaleX">MDN transform scaleX docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-transform-mixin-scaleY"><h3 class="item__heading"><a class="item__name" href="#mixin-scaleY">scaleY</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin scaleY($sy) {
@if is-number($sy) {
@include transform(scaleY($sy));
}
@else {
@warn '`transform: scaleY(#{$sy})` is not valid transform:scaleY factor value';
}
}" data-collapsed="@mixin scaleY($sy) { ... }"><code>@mixin scaleY($sy) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>ScaleY transform mixin<br><b>Note:</b> - this is equivalent to <code>scale(1, $sy)</code> or <code>scale3d(1, $sy, 1)</code></p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$sy</code></th><td data-label="desc"><p>the scaling factor to apply on the ordinate of each point of the element (e.g. <code>-.1</code> or <code>3.2</code>)</p></td><td data-label="type"><code>Float</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.scale-y-element {
@include scaleY(3.2);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.scale-y-element {
-webkit-transform: scaleY(3.2);
-moz-transform: scaleY(3.2);
-ms-transform: scaleY(3.2);
-o-transform: scaleY(3.2);
transform: scaleY(3.2);
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-transform"><code>transform</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-number"><code>is-number</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scaleY">MDN transform scaleY docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-transform-mixin-scaleZ"><h3 class="item__heading"><a class="item__name" href="#mixin-scaleZ">scaleZ</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin scaleZ($sz) {
@if is-number($sz) {
@include transform(scaleZ($sz));
}
@else {
@warn '`transform: scaleZ(#{$sz})` is not valid transform:scaleZ factor value';
}
}" data-collapsed="@mixin scaleZ($sz) { ... }"><code>@mixin scaleZ($sz) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>ScaleZ transform mixin<br><b>Note:</b> - this is equivalent to <code>scale3d(1, 1, $sz)</code></p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$sz</code></th><td data-label="desc"><p>the scaling factor to apply on the z-coordinate of each point of the element (e.g. <code>-.1</code> or <code>3.2</code>)</p></td><td data-label="type"><code>Float</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.scale-z-element {
@include scaleZ(3.2);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.scale-z-element {
-webkit-transform: scaleZ(3.2);
-moz-transform: scaleZ(3.2);
-ms-transform: scaleZ(3.2);
-o-transform: scaleZ(3.2);
transform: scaleZ(3.2);
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-transform"><code>transform</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-number"><code>is-number</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scaleZ">MDN transform scaleZ docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-transform-mixin-skew"><h3 class="item__heading"><a class="item__name" href="#mixin-skew">skew</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin skew($ax, $ay: 0deg) {
@if(is-angle($ax) and is-angle($ay)) {
@include transform(skew($ax, $ay));
}
@else {
@warn '`transform: skew(#{$ax}, #{$ay})` are not valid transform:skew angle values';
}
}" data-collapsed="@mixin skew($ax, $ay: 0deg) { ... }"><code>@mixin skew($ax, $ay: 0deg) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Skew transform mixin<br><b>Note:</b> - this is equivalent to <code>skewX($ax)</code> (in single value usage) or <code>skewX($ax) skewY($ay)</code> (in two values usage)</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$ax</code></th><td data-label="desc"><p>the angle to use to distort the element along the abscissa (e.g. <code>-1.2rad</code> or <code>30deg</code>)</p></td><td data-label="type"><code>Angle</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$ay</code></th><td data-label="desc"><p>the angle to use to distort the element along the ordinate (e.g. <code>-1.2rad</code> or <code>30deg</code>)</p></td><td data-label="type"><code>Angle</code></td><td data-label="default"><code>0deg</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage - single value</p></div><pre class="example__code language-scss"><code>.skew-element {
@include skew(50deg);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output - single value</p></div><pre class="example__code language-css"><code>.skew-element {
-webkit-transform: skew(50deg, 0deg);
-moz-transform: skew(50deg, 0deg);
-ms-transform: skew(50deg, 0deg);
-o-transform: skew(50deg, 0deg);
transform: skew(50deg, 0deg);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Usage - two values</p></div><pre class="example__code language-scss"><code>.skew-element {
@include skew(15deg, -50rad);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output - two values</p></div><pre class="example__code language-css"><code>.skew-element {
-webkit-transform: skew(15deg, -50rad);
-moz-transform: skew(15deg, -50rad);
-ms-transform: skew(15deg, -50rad);
-o-transform: skew(15deg, -50rad);
transform: skew(15deg, -50rad);
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-transform"><code>transform</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-angle-function-is-angle"><code>is-angle</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-angle-function-is-angle"><code>is-angle</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skew">MDN transform skew docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-transform-mixin-skewX"><h3 class="item__heading"><a class="item__name" href="#mixin-skewX">skewX</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin skewX($ax) {
@if(is-angle($ax)) {
@include transform(skewX($ax));
}
@else {
@warn '`transform: skewX(#{$ax})` is not valid transform:skewX angle value';
}
}" data-collapsed="@mixin skewX($ax) { ... }"><code>@mixin skewX($ax) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>SkewX transform mixin<br><b>Note:</b> - this is equivalent to <code>skew($ax)</code></p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$ax</code></th><td data-label="desc"><p>the angle to use to distort the element along the abscissa (e.g. <code>-1.2rad</code> or <code>30deg</code>)</p></td><td data-label="type"><code>Angle</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.skew-x-element {
@include skewX(50deg);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.skew-x-element {
-webkit-transform: skewX(50deg);
-moz-transform: skewX(50deg);
-ms-transform: skewX(50deg);
-o-transform: skewX(50deg);
transform: skewX(50deg);
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-transform"><code>transform</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-angle-function-is-angle"><code>is-angle</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skewX">MDN transform skewX docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-transform-mixin-skewY"><h3 class="item__heading"><a class="item__name" href="#mixin-skewY">skewY</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin skewY($ay) {
@if(is-angle($ay)) {
@include transform(skewY($ay));
}
@else {
@warn '`transform: skewY(#{$ay})` is not valid transform:skewY angle value';
}
}" data-collapsed="@mixin skewY($ay) { ... }"><code>@mixin skewY($ay) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>SkewY transform mixin<br><b>Note:</b> - this is equivalent to <code>skew(0deg, $ay)</code></p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$ay</code></th><td data-label="desc"><p>the angle to use to distort the element along the ordinate (e.g. <code>-1.2rad</code> or <code>30deg</code>)</p></td><td data-label="type"><code>Angle</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.skew-y-element {
@include skewY(-10deg);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.skew-y-element {
-webkit-transform: skewY(-10deg);
-moz-transform: skewY(-10deg);
-ms-transform: skewY(-10deg);
-o-transform: skewY(-10deg);
transform: skewY(-10deg);
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-transform"><code>transform</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-angle-function-is-angle"><code>is-angle</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skewY">MDN transform skewY docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-transform-mixin-translate"><h3 class="item__heading"><a class="item__name" href="#mixin-translate">translate</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin translate($tx: 0, $ty: 0) {
@if is-size($tx) and is-size($ty) {
@include transform(translate($tx, $ty));
}
@else {
@warn '`transform: translate(#{$tx}, #{$ty})` are not valid transform:translate size value';
}
}" data-collapsed="@mixin translate($tx: 0, $ty: 0) { ... }"><code>@mixin translate($tx: 0, $ty: 0) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Translate transform mixin<br><b>Note:</b> - this is equivalent to <code>translateX($tx)</code> or <code>translate3d($tx, 0, 0)</code> (in single value usage) or <code>translateX($tx) translateY($ty)</code> or <code>translate3d($tx, $ty, 0)</code> (in two values usage)</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$tx</code></th><td data-label="desc"><p>the abscissa (x-coordinate) of the translating vector (e.g. <code>10px</code> or <code>30rem</code>)</p></td><td data-label="type"><code>Size</code> or <code>Length</code></td><td data-label="default"><code>0</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$ty</code></th><td data-label="desc"><p>the ordinate (y-coordinate) of the translating vector (e.g. <code>10px</code> or <code>30rem</code>)</p></td><td data-label="type"><code>Size</code> or <code>Length</code></td><td data-label="default"><code>0</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage - single value</p></div><pre class="example__code language-scss"><code>.translate-element {
@include translate(10px);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output - single value</p></div><pre class="example__code language-css"><code>.translate-element {
-webkit-transform: translate(10px);
-moz-transform: translate(10px);
-ms-transform: translate(10px);
-o-transform: translate(10px);
transform: translate(10px);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Usage - two values</p></div><pre class="example__code language-scss"><code>.translate-element {
@include translate(20px, 15rem);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output - two values</p></div><pre class="example__code language-css"><code>.translate-element {
-webkit-transform: translate(20px, 15rem);
-moz-transform: translate(20px, 15rem);
-ms-transform: translate(20px, 15rem);
-o-transform: translate(20px, 15rem);
transform: translate(20px, 15rem);
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-transform"><code>transform</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-size"><code>is-size</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-size"><code>is-size</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate">MDN transform translate docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-transform-mixin-translate3d"><h3 class="item__heading"><a class="item__name" href="#mixin-translate3d">translate3d</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin translate3d($tx, $ty, $tz) {
@if is-size($tx) and is-size($ty) and (is-size($tz) and not is-percentage($tz)) {
@include transform(translate3d($tx, $ty, $tz));
}
@else {
@warn '`transform: translate3d(#{$tx}, #{$ty}, #{$tz})` are not valid transform:translate3d factor values';
}
}" data-collapsed="@mixin translate3d($tx, $ty, $tz) { ... }"><code>@mixin translate3d($tx, $ty, $tz) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Translate 3d transform mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$tx</code></th><td data-label="desc"><p>the abscissa (x-coordinate) of the translating vector (e.g. <code>10px</code> or <code>30rem</code> or <code>20%</code>)</p></td><td data-label="type"><code>Size</code> or <code>Length</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$ty</code></th><td data-label="desc"><p>the ordinate (y-coordinate) of the translating vector (e.g. <code>10px</code> or <code>30rem</code> or <code>20%</code>)</p></td><td data-label="type"><code>Size</code> or <code>Length</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$tz</code></th><td data-label="desc"><p>the z component of the translating vector (e.g. <code>10px</code> or <code>30rem</code>) - <b>Note:</b> it can't be a<percentage>value</percentage></p></td><td data-label="type"><code>Size</code> or <code>Length</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.translate3d-element {
@include translate3d(30px, 20%, 10rem);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.translate3d-element {
-webkit-transform: translate3d(30px, 20%, 10rem);
-moz-transform: translate3d(30px, 20%, 10rem);
-ms-transform: translate3d(30px, 20%, 10rem);
-o-transform: translate3d(30px, 20%, 10rem);
transform: translate3d(30px, 20%, 10rem);
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-transform"><code>transform</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-size"><code>is-size</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-size"><code>is-size</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-size"><code>is-size</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-percentage"><code>is-percentage</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate3d">MDN transform translate3d docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-transform-mixin-translateX"><h3 class="item__heading"><a class="item__name" href="#mixin-translateX">translateX</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin translateX($tx) {
@if (is-size($tx)) {
@include transform(translateX($tx));
}
@else {
@warn '`transform: translateX(#{$tx})` is not valid transform:translateX factor value';
}
}" data-collapsed="@mixin translateX($tx) { ... }"><code>@mixin translateX($tx) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>TranslateX transform mixin<br><b>Note:</b> - this is equivalent to <code>translate($tx, 0)</code> or <code>translate3d($tx, 0, 0)</code></p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$tx</code></th><td data-label="desc"><p>the abscissa (x-coordinate) of the translating vector (e.g. <code>10px</code> or <code>30rem</code>)</p></td><td data-label="type"><code>Size</code> or <code>Length</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.translate-x-element {
@include translateX(10px);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.translate-x-element {
-webkit-transform: translateX(10px);
-moz-transform: translateX(10px);
-ms-transform: translateX(10px);
-o-transform: translateX(10px);
transform: translateX(10px);
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-transform"><code>transform</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-size"><code>is-size</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateX">MDN transform translateX docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-transform-mixin-translateY"><h3 class="item__heading"><a class="item__name" href="#mixin-translateY">translateY</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin translateY($ty) {
@if (is-size($ty)) {
@include transform(translateY($ty));
}
@else {
@warn '`transform: translateY(#{$ty})` is not valid transform:translateY factor value';
}
}" data-collapsed="@mixin translateY($ty) { ... }"><code>@mixin translateY($ty) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>TranslateY transform mixin<br><b>Note:</b> - this is equivalent to <code>translate(0, $ty)</code> or <code>translate3d(0, $ty, 0)</code></p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$ty</code></th><td data-label="desc"><p>the ordinate (y-coordinate) of the translating vector (e.g. <code>10px</code> or <code>30rem</code>)</p></td><td data-label="type"><code>Size</code> or <code>Length</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.translate-y-element {
@include translateY(10px);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.translate-y-element {
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-ms-transform: translateY(10px);
-o-transform: translateY(10px);
transform: translateY(10px);
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-transform"><code>transform</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-size"><code>is-size</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateY">MDN transform translateY docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-transform-mixin-translateZ"><h3 class="item__heading"><a class="item__name" href="#mixin-translateZ">translateZ</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin translateZ($tz) {
@if (is-size($tz)) {
@include transform(translateZ($tz));
}
@else {
@warn '`transform: translateZ(#{$tz})` is not valid transform:translateZ factor value';
}
}" data-collapsed="@mixin translateZ($tz) { ... }"><code>@mixin translateZ($tz) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>TranslateZ transform mixin<br><b>Note:</b> - this is equivalent to <code>translate3d(0, 0, $tz)</code></p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$tz</code></th><td data-label="desc"><p>the z component of the translating vector (e.g. <code>10px</code> or <code>30rem</code>) - <b>Note:</b> it can't be a<percentage>value</percentage></p></td><td data-label="type"><code>Size</code> or <code>Length</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.translate-z-element {
@include translateZ(10px);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.translate-z-element {
-webkit-transform: translateZ(10px);
-moz-transform: translateZ(10px);
-ms-transform: translateZ(10px);
-o-transform: translateZ(10px);
transform: translateZ(10px);
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-transform"><code>transform</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-size"><code>is-size</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateZ">MDN transform translateZ docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-transform-mixin-transform-origin"><h3 class="item__heading"><a class="item__name" href="#mixin-transform-origin">transform-origin</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin transform-origin($to, $to.x: 50%, $to.y: 50%, $to.z: 0) {
@if is-css-default($to) {
@include prefixer(transform-origin, $to);
}
@else if(length($to) > 1) {
$transform-origin: ();
$x-axis: nth-value($to, 1, 50%);
@if is-transform-origin($x-axis, $transform-origin-x-axis-modes) {
$transform-origin: append($transform-origin, $x-axis);
}
@else {
@warn '`transform-origin x-axis: #{$x-axis}` is not a valid x axis transform origin value';
}
$y-axis: nth-value($to, 2, 50%);
@if is-transform-origin($y-axis, $transform-origin-y-axis-modes) {
$transform-origin: append($transform-origin, $y-axis);
}
@else {
@warn '`transform-origin y-axis: #{$y-axis}` is not a valid y axis transform origin value';
}
$z-axis: nth-value($to, 3, 0);
@if is-transform-origin($z-axis) {
$transform-origin: append($transform-origin, $z-axis);
}
@else {
@warn '`transform-origin z-axis: #{$z-axis}` is not a valid z-axis transform origin value';
}
@include prefixer(transform-origin, $transform-origin);
}
}" data-collapsed="@mixin transform-origin($to, $to.x: 50%, $to.y: 50%, $to.z: 0) { ... }"><code>@mixin transform-origin($to, $to.x: 50%, $to.y: 50%, $to.z: 0) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Transform origin mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$to</code></th><td data-label="desc"><p>the transform origin options (e.g. <code>40% 20rem 0</code> or <code>right bottom 0</code> or <code>initial</code>)</p></td><td data-label="type"><code>String</code> or <code>Array</code> or <code>List</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$to.x</code></th><td data-label="desc"><p>the x-axis value for transform origin</p></td><td data-label="type"><code>Size</code> or <code>Length</code></td><td data-label="default"><code>50%</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$to.y</code></th><td data-label="desc"><p>the y-axis value for transform origin</p></td><td data-label="type"><code>Size</code> or <code>Length</code></td><td data-label="default"><code>50%</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$to.z</code></th><td data-label="desc"><p>the z-axis value for transform origin - <b>Note:</b> for the z-axis can be only a length (e.g. no percentage)</p></td><td data-label="type"><code>Size</code> or <code>Length</code></td><td data-label="default"><code>0</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.transform-origin-element {
@include transform-origin(25.5% 30px 0);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.transform-origin-element {
-webkit-transform-origin: 25.5% 30px 0;
-moz-transform-origin: 25.5% 30px 0;
-ms-transform-origin: 25.5% 30px 0;
-o-transform-origin: 25.5% 30px 0;
transform-origin: 25.5% 30px 0;
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Usage - with css default value</p></div><pre class="example__code language-scss"><code>.transform-origin-element {
@include transform-origin(inherit);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output - with css default value</p></div><pre class="example__code language-css"><code>.transform-origin-element {
-webkit-transform-origin: inherit;
-moz-transform-origin: inherit;
-ms-transform-origin: inherit;
-o-transform-origin: inherit;
transform-origin: inherit;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-common-mixin-prefixer"><code>prefixer</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-common-mixin-prefixer"><code>prefixer</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-css-default"><code>is-css-default</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-transform-function-is-transform-origin"><code>is-transform-origin</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-transform-function-is-transform-origin"><code>is-transform-origin</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-transform-function-is-transform-origin"><code>is-transform-origin</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-transform-variable-transform-origin-x-axis-modes"><code>transform-origin-x-axis-modes</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-transform-variable-transform-origin-y-axis-modes"><code>transform-origin-y-axis-modes</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-transform-mixin-transform-style"><h3 class="item__heading"><a class="item__name" href="#mixin-transform-style">transform-style</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin transform-style($ts) {
@if is-defined($ts) and is-transform-style($ts) {
@include prefixer(transform-style, $ts);
}
@else {
@warn '`transform-style: #{$ts}` is not a valid transform-style mode';
}
}" data-collapsed="@mixin transform-style($ts) { ... }"><code>@mixin transform-style($ts) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Transform style mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$ts</code></th><td data-label="desc"><p>the transform-style value (e.g. <code>preserve-3d</code> or <code>initial</code>)</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.transform-style-element {
@include transform-style(preserve-3d);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.transform-style-element {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-common-mixin-prefixer"><code>prefixer</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-transform-function-is-transform-style"><code>is-transform-style</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section><section class="main__sub-section" id="mixins-transform-variable"><h2 class="main__heading--secondary"><div class="container">variables</div></h2><section class="main__item container item" id="mixins-transform-variable-transform-functions-names"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-transform-functions-names">transform-functions-names</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$transform-functions-names: (matrix, matrix3d, translate, translate3d, translateX, translateY, translateZ, scale, scale3d, scaleX, scaleY, scaleZ, rotate, rotate3d, rotateX, rotateY, rotateZ, skew, skewX, skewY, perspective);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Transform function names</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-transform-function-is-transform-function"><code>is-transform-function</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-transform-variable-transform-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-transform-modes">transform-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$transform-modes: array-concat((none), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Transform modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-transform-function-is-transform"><code>is-transform</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-transform-variable-transform-origin-x-axis-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-transform-origin-x-axis-modes">transform-origin-x-axis-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$transform-origin-x-axis-modes: (left, right, center);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Transform origin x axis modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-transform-origin"><code>transform-origin</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-transform-variable-transform-origin-y-axis-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-transform-origin-y-axis-modes">transform-origin-y-axis-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$transform-origin-y-axis-modes: (top, center, bottom);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Transform origin y axis modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-transform-origin"><code>transform-origin</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-transform-variable-transform-style-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-transform-style-modes">transform-style-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$transform-style-modes: array-concat((flat, preserve-3d), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Transform style modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-transform-function-is-transform-style"><code>is-transform-style</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section></section><section class="main__section"><h1 class="main__heading" id="mixins-transition"><div class="container">Mixins - Transition</div></h1><section class="main__sub-section" id="mixins-transition-function"><h2 class="main__heading--secondary"><div class="container">functions</div></h2><section class="main__item container item" id="mixins-transition-function-is-transition-time"><h3 class="item__heading"><a class="item__name" href="#function-is-transition-time">is-transition-time</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-transition-time($tt) {
@return is-defined($tt) and (is-time($tt) or is-css-default($tt));
}" data-collapsed="@function is-transition-time($tt) { ... }"><code>@function is-transition-time($tt) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a transition time value</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$tt</code></th><td data-label="desc"><p>the transition time value (e.g. <code>initial</code> or <code>20ms</code>)</p></td><td data-label="type"><code>String</code> or <code>Time</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is a transform time value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-time-function-is-time"><code>is-time</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-css-default"><code>is-css-default</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transition-mixin-transition-delay"><code>transition-delay</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transition-mixin-transition-duration"><code>transition-duration</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-is-transition"><code>is-transition</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-is-transition"><code>is-transition</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-transition-function-is-transition-property"><h3 class="item__heading"><a class="item__name" href="#function-is-transition-property">is-transition-property</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-transition-property($tp) {
@return is-defined($tp) and array-contains($transition-property-modes, $tp);
}" data-collapsed="@function is-transition-property($tp) { ... }"><code>@function is-transition-property($tp) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a transition property value</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$tp</code></th><td data-label="desc"><p>the transform property value (e.g. <code>none</code>, <code>all</code>, <code>transform</code> or <code>initial</code> )</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is a transform property value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-transition-variable-transition-property-modes"><code>transition-property-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transition-mixin-transition-property"><code>transition-property</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-is-transition"><code>is-transition</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-transition-function-get-transition-timing-function-name"><h3 class="item__heading"><a class="item__name" href="#function-get-transition-timing-function-name">get-transition-timing-function-name</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function get-transition-timing-function-name($t) {
@if(string-contains($t, '(') and string-contains($t, ')')) {
@return str-slice($t, 1, str-index($t, '(') - 1);
}
@return null;
}" data-collapsed="@function get-transition-timing-function-name($t) { ... }"><code>@function get-transition-timing-function-name($t) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Extracts transition function name from a transform-timing-function value</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$t</code></th><td data-label="desc"><p>the transform-timing-function value (e.g. <code>cubic-bezier(0,0,1,1)</code>)</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>String</code> or <code>Null</code> —<p>the transform-timing-function name or null</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-string-function-string-contains"><code>string-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-string-function-string-contains"><code>string-contains</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-is-transition-timing-function"><code>is-transition-timing-function</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-transition-function-is-transition-timing-function"><h3 class="item__heading"><a class="item__name" href="#function-is-transition-timing-function">is-transition-timing-function</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-transition-timing-function($t) {
$transition-timing-function-name: get-transition-timing-function-name($t);
@return is-defined($transition-timing-function-name) and array-contains($transition-timing-functions-names, $transition-timing-function-name);
}" data-collapsed="@function is-transition-timing-function($t) { ... }"><code>@function is-transition-timing-function($t) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a transition timing function value</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$t</code></th><td data-label="desc"><p>the transition value (e.g. <code>cubic-bezier(0,0,1,1)</code>)</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is a transform-timing-function value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-get-transition-timing-function-name"><code>get-transition-timing-function-name</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-transition-variable-transition-timing-functions-names"><code>transition-timing-functions-names</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-is-transition-timing-mode-or-function"><code>is-transition-timing-mode-or-function</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-transition-function-is-transition-timing-mode-or-function"><h3 class="item__heading"><a class="item__name" href="#function-is-transition-timing-mode-or-function">is-transition-timing-mode-or-function</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-transition-timing-mode-or-function($ttf) {
@return is-defined($ttf) and (array-contains($transition-timing-modes, $ttf) or is-transition-timing-function($ttf));
}" data-collapsed="@function is-transition-timing-mode-or-function($ttf) { ... }"><code>@function is-transition-timing-mode-or-function($ttf) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a transition-timing-function value</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$ttf</code></th><td data-label="desc"><p>the transition-timing-function value (e.g. <code>cubic-bezier(0,0,1,1)</code> or <code>ease-in-out</code>)</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is a transition-timing-function value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-is-transition-timing-function"><code>is-transition-timing-function</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-transition-variable-transition-timing-modes"><code>transition-timing-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transition-mixin-transition-timing-function"><code>transition-timing-function</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-is-transition"><code>is-transition</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-transition-function-is-transition"><h3 class="item__heading"><a class="item__name" href="#function-is-transition">is-transition</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-transition($transition) {
$defaults: (property: all, duration: 0s, timing: ease, delay: 0s);
@if is-object($transition) {
$transition: extend($defaults, $transition);
}
@else {
$transition-property: nth-value($transition, 1);
$transition-duration: nth-value($transition, 2);
$transition-timing-function: nth-value($transition, 3);
$transition-delay: nth-value($transition, 4);
$transition: extend($defaults, ());
@if is-defined($transition-property) {
$transition: extend($transition, (property: $transition-property));
}
@if is-defined($transition-duration) {
$transition: extend($transition, (duration: $transition-duration));
}
@if is-defined($transition-timing-function) {
$transition: extend($transition, (timing: $transition-timing-function));
}
@if is-defined($transition-delay) {
$transition: extend($transition, (delay: $transition-delay));
}
}
$is-transition-valid: true;
$transition-property: get($transition, property);
@if not is-transition-property($transition-property) {
$is-transition-valid: false;
@warn '`transition-property: #{$transition-property}` is not a valid transition-property value';
}
@if $is-transition-valid {
$transition-duration: get($transition, duration);
@if not is-transition-time($transition-duration) {
$is-transition-valid: false;
@warn '`transition-duration: #{$transition-duration}` is not a valid transition-duration value';
}
}
@if $is-transition-valid {
$transition-timing-function: get($transition, timing);
@if not is-transition-timing-mode-or-function($transition-timing-function) {
$is-transition-valid: false;
@warn '`transition-timing-function: #{$transition-timing-function}` is not a valid transition-timing-function value';
}
}
@if $is-transition-valid {
$transition-delay: get($transition, delay);
@if not is-transition-time($transition-delay) {
$is-transition-valid: false;
@warn '`transition-delay: #{$transition-delay}` is not a valid transition-delay value';
}
}
@return $is-transition-valid;
}" data-collapsed="@function is-transition($transition) { ... }"><code>@function is-transition($transition) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a transition value</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$transition</code></th><td data-label="desc"><p>the transition value (e.g. <code>background .3s linear 0</code>)</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is a transition value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-is-object"><code>is-object</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-nth-value"><code>nth-value</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-get"><code>get</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-is-transition-property"><code>is-transition-property</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-get"><code>get</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-is-transition-time"><code>is-transition-time</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-get"><code>get</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-is-transition-timing-mode-or-function"><code>is-transition-timing-mode-or-function</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-get"><code>get</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-is-transition-time"><code>is-transition-time</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-is-transitions"><code>is-transitions</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-transition-function-is-transitions"><h3 class="item__heading"><a class="item__name" href="#function-is-transitions">is-transitions</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-transitions($transitions) {
$is-transitions-valid: true;
@each $transition in $transitions {
@if $is-transitions-valid {
$is-transitions-valid: is-transition($transition);
}
}
@return $is-transitions-valid;
}" data-collapsed="@function is-transitions($transitions) { ... }"><code>@function is-transitions($transitions) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if a comma separated list is a transition values list</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$transitions</code></th><td data-label="desc"><p>the transition values list (e.g. <code>background .3s linear 0, top .2s ease-in-out 1s</code>)</p></td><td data-label="type"><code>String</code> or <code>Array</code> or <code>List</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is a transition values list</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-is-transition"><code>is-transition</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transition-mixin-transition"><code>transition</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section><section class="main__sub-section" id="mixins-transition-mixin"><h2 class="main__heading--secondary"><div class="container">mixins</div></h2><section class="main__item container item" id="mixins-transition-mixin-transition-delay"><h3 class="item__heading"><a class="item__name" href="#mixin-transition-delay">transition-delay</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin transition-delay($td) {
@if is-transition-time($td) {
@include prefixer(transition-delay, $td);
}
@else {
@warn '`transition-delay: #{$td}` is not a valid transition-delay value';
}
}" data-collapsed="@mixin transition-delay($td) { ... }"><code>@mixin transition-delay($td) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Transition delay mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$td</code></th><td data-label="desc"><p>the transition delay value (e.g. <code>initial</code> or <code>10s</code>)</p></td><td data-label="type"><code>String</code> or <code>Time</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.transition-delay-element {
@include transition-delay(1s);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.transition-delay-element {
-webkit-transition-delay: 1s;
-moz-transition-delay: 1s;
-ms-transition-delay: 1s;
-o-transition-delay: 1s;
transition-delay: 1s;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-common-mixin-prefixer"><code>prefixer</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-is-transition-time"><code>is-transition-time</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/css3_pr_transition-delay.asp">W3Schools transition-delay docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-transition-mixin-transition-duration"><h3 class="item__heading"><a class="item__name" href="#mixin-transition-duration">transition-duration</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin transition-duration($td) {
@if is-transition-time($td) {
@include prefixer(transition-duration, $td);
}
@else {
@warn '`transition-duration: #{$td}` is not a valid transition-duration value';
}
}" data-collapsed="@mixin transition-duration($td) { ... }"><code>@mixin transition-duration($td) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Transition duration mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$td</code></th><td data-label="desc"><p>the transition duration value (e.g. <code>initial</code> or <code>10s</code>)</p></td><td data-label="type"><code>String</code> or <code>Time</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.transition-duration-element {
@include transition-duration(1s);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.transition-duration-element {
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-ms-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-common-mixin-prefixer"><code>prefixer</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-is-transition-time"><code>is-transition-time</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/css3_pr_transition-duration.asp">W3Schools transition-duration docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-transition-mixin-transition-property"><h3 class="item__heading"><a class="item__name" href="#mixin-transition-property">transition-property</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin transition-property($tp) {
@if is-transition-property($tp) {
@include prefixer(transition-property, $tp);
}
@else {
@warn '`transition-property: #{$tp}` is not a valid transition-property value';
}
}" data-collapsed="@mixin transition-property($tp) { ... }"><code>@mixin transition-property($tp) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Transition property mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$tp</code></th><td data-label="desc"><p>the transform property value (e.g. <code>none</code> or <code>all</code> or <code>initial</code>)</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.transition-property-element {
@include transition-property(background-color);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.transition-property-element {
-webkit-transition-property: background-color;
-moz-transition-property: background-color;
-ms-transition-property: background-color;
-o-transition-property: background-color;
transition-property: background-color;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-common-mixin-prefixer"><code>prefixer</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-is-transition-property"><code>is-transition-property</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/css3_pr_transition-property.asp">W3Schools transition-property docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-transition-mixin-transition-timing-function"><h3 class="item__heading"><a class="item__name" href="#mixin-transition-timing-function">transition-timing-function</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin transition-timing-function($ttf) {
@if is-transition-timing-mode-or-function($ttf) {
@include prefixer(transition-timing-function, $ttf);
}
@else {
@warn '`transition-timing-function: #{$ttf}` is not a valid transition-timing-function value';
}
}" data-collapsed="@mixin transition-timing-function($ttf) { ... }"><code>@mixin transition-timing-function($ttf) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Transition timing function mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$ttf</code></th><td data-label="desc"><p>the transition timing function value (e.g. <code>cubic-bezier(0,0,1,1)</code> or <code>ease-in-out</code>)</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.transition-timing-function-element {
@include transition-timing-function(linear);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.transition-timing-function-element {
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-common-mixin-prefixer"><code>prefixer</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-is-transition-timing-mode-or-function"><code>is-transition-timing-mode-or-function</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp">W3Schools transition-timing-function docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-transition-mixin-transition"><h3 class="item__heading"><a class="item__name" href="#mixin-transition">transition</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin transition($transitions) {
@if is-transitions($transitions...) {
@include prefixer(transition, $transitions);
}
@else {
@warn '`transition: #{$transitions}` one or more are not valid css transition values';
}
}" data-collapsed="@mixin transition($transitions) { ... }"><code>@mixin transition($transitions) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Transform mixin</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$transitions</code></th><td data-label="desc"><p>the transitions list (e.g. <code>background .3s linear 0, top .2s ease-in-out 1s</code>)</p></td><td data-label="type"><code>String</code> or <code>Array</code> or <code>List</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage - single transition</p></div><pre class="example__code language-scss"><code>.transition-element {
@include transition(background .3s linear 0);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output - single transition</p></div><pre class="example__code language-css"><code>.transition-element {
-webkit-transition: background .3s linear 0;
-moz-transition: background .3s linear 0;
-ms-transition: background .3s linear 0;
-o-transition: background .3s linear 0;
transition: background .3s linear 0;
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Usage - multiple transitions</p></div><pre class="example__code language-scss"><code>.transition-element {
@include transition(background .3s linear 0, top .2s ease-in-out 1s);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output - multiple transitions</p></div><pre class="example__code language-css"><code>.transition-element {
-webkit-transition: background .3s linear 0, top .2s ease-in-out 1s;
-moz-transition: background .3s linear 0, top .2s ease-in-out 1s;
-ms-transition: background .3s linear 0, top .2s ease-in-out 1s;
-o-transition: background .3s linear 0, top .2s ease-in-out 1s;
transition: background .3s linear 0, top .2s ease-in-out 1s;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixins-common-mixin-prefixer"><code>prefixer</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-is-transitions"><code>is-transitions</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section><section class="main__sub-section" id="mixins-transition-variable"><h2 class="main__heading--secondary"><div class="container">variables</div></h2><section class="main__item container item" id="mixins-transition-variable-transition-property-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-transition-property-modes">transition-property-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$transition-property-modes: array-concat((none, all), $animateable-properties, $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Transition property modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-is-transition-property"><code>is-transition-property</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-transition-variable-transition-timing-functions-names"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-transition-timing-functions-names">transition-timing-functions-names</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$transition-timing-functions-names: (steps, cubic-bezier);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Transition timing functions</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-is-transition-timing-function"><code>is-transition-timing-function</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="mixins-transition-variable-transition-timing-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-transition-timing-modes">transition-timing-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$transition-timing-modes: array-concat((linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Transition timing modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-is-transition-timing-mode-or-function"><code>is-transition-timing-mode-or-function</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section></section><section class="main__section"><h1 class="main__heading" id="mixins-will-change"><div class="container">Mixins - Will Change</div></h1><section class="main__sub-section" id="mixins-will-change-function"><h2 class="main__heading--secondary"><div class="container">functions</div></h2><section class="main__item container item" id="mixins-will-change-function-is-will-change"><h3 class="item__heading"><a class="item__name" href="#function-is-will-change">is-will-change</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-will-change($wc) {
@if is-defined($wc) {
@if list-separator($wc) != comma {
$wc: ($wc,);
}
$is-will-change-valid: true;
@each $will-change-value in $wc {
@if $is-will-change-valid {
$is-will-change-valid: array-contains($will-change-modes, $will-change-value);
}
}
@return $is-will-change-valid;
}
@return false;
}" data-collapsed="@function is-will-change($wc) { ... }"><code>@function is-will-change($wc) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a will-change value</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$wc</code></th><td data-label="desc"><p>the will-change value (e.g. <code>auto</code> or <code>left, top</code>)</p></td><td data-label="type"><code>String</code> or <code>List</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is a will-change value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#mixins-will-change-variable-will-change-modes"><code>will-change-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-will-change-mixin-will-change"><code>will-change</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section><section class="main__sub-section" id="mixins-will-change-mixin"><h2 class="main__heading--secondary"><div class="container">mixins</div></h2><section class="main__item container item" id="mixins-will-change-mixin-will-change"><h3 class="item__heading"><a class="item__name" href="#mixin-will-change">will-change</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin will-change($wc) {
@if is-defined($wc) {
@if is-will-change($wc) {
will-change: $wc;
}
@else {
@warn '`will-change: #{$wc}` is not a valid will-change value';
}
}
}" data-collapsed="@mixin will-change($wc) { ... }"><code>@mixin will-change($wc) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Will Change</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$wc</code></th><td data-label="desc"><p>the will-change value (e.g. <code>auto</code> or <code>left, top</code>)</p></td><td data-label="type"><code>String</code> or <code>Array</code> or <code>List</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.will-change-element {
@include will-change(scroll-position);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.will-change-element {
will-change: scroll-position;
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.will-change-element {
@include will-change(left, top);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.will-change-element {
will-change: left, top;
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#mixins-will-change-function-is-will-change"><code>is-will-change</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section><section class="main__sub-section" id="mixins-will-change-variable"><h2 class="main__heading--secondary"><div class="container">variables</div></h2><section class="main__item container item" id="mixins-will-change-variable-will-change-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-will-change-modes">will-change-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$will-change-modes: array-concat((auto, scroll-position, contents, transform, opacity, unset), $animateable-properties, $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Will Change modes</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-will-change-function-is-will-change"><code>is-will-change</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section></section><section class="main__section"><h1 class="main__heading" id="types-angle"><div class="container">Types - Angle</div></h1><section class="main__sub-section" id="types-angle-function"><h2 class="main__heading--secondary"><div class="container">functions</div></h2><section class="main__item container item" id="types-angle-function-is-angle"><h3 class="item__heading"><a class="item__name" href="#function-is-angle">is-angle</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-angle($a) {
@return is-number($a) and array-contains($angle-units, unit($a));
}" data-collapsed="@function is-angle($a) { ... }"><code>@function is-angle($a) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if a value is an angle value</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$a</code></th><td data-label="desc"><p>the value to check</p></td><td data-label="type"><code>Number (with unit)</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is a corrent angle value</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>.element {
$a: 30deg;
@if is-angle($a) {
transform: rotate($a);
}
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Output</p></div><pre class="example__code language-css"><code>.element {
transform: rotate(30deg);
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-number"><code>is-number</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#types-angle-variable-angle-units"><code>angle-units</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-rotate"><code>rotate</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-rotate3d"><code>rotate3d</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-rotateX"><code>rotateX</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-rotateY"><code>rotateY</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-rotateZ"><code>rotateZ</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-skew"><code>skew</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-skew"><code>skew</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-skewX"><code>skewX</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-skewY"><code>skewY</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section><section class="main__sub-section" id="types-angle-variable"><h2 class="main__heading--secondary"><div class="container">variables</div></h2><section class="main__item container item" id="types-angle-variable-angle-units"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-angle-units">angle-units</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$angle-units: (deg, rad, grad, turn);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Angle units supported</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#types-angle-function-is-angle"><code>is-angle</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section></section><section class="main__section"><h1 class="main__heading" id="types-array"><div class="container">Types - Array</div></h1><section class="main__sub-section" id="types-array-function"><h2 class="main__heading--secondary"><div class="container">functions</div></h2><section class="main__item container item" id="types-array-function-is-array"><h3 class="item__heading"><a class="item__name" href="#function-is-array">is-array</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-array($a) {
@return is-defined($a) and type-of($a)==list;
}" data-collapsed="@function is-array($a) { ... }"><code>@function is-array($a) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if a value is an array/list</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$a</code></th><td data-label="desc"><p>the value to check</p></td><td data-label="type"><code>List</code> or <code>Array</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is an array value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-background-function-is-background-position"><code>is-background-position</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-background-function-is-background-size"><code>is-background-size</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-cursor-function-is-cursor"><code>is-cursor</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-font-family"><code>is-font-family</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-concat"><code>array-concat</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="types-array-function-array-contains"><h3 class="item__heading"><a class="item__name" href="#function-array-contains">array-contains</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function array-contains($a, $i) {
@if is-array($a) and is-defined($i) {
$index-of: index($a, $i);
@return is-defined($index-of) and $index-of > 0;
}
@warn '`array: #{$a}` and `item: #{$i}` are not valid data for array-contains';
@return false;
}" data-collapsed="@function array-contains($a, $i) { ... }"><code>@function array-contains($a, $i) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if an array/list contains specified item</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$a</code></th><td data-label="desc"><p>the array/list</p></td><td data-label="type"><code>List</code> or <code>Array</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$i</code></th><td data-label="desc"><p>the item</p></td><td data-label="type"><code>Any</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is the array contains the value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-is-array"><code>is-array</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-animation-function-is-animation-name"><code>is-animation-name</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-animation-function-is-animation-direction"><code>is-animation-direction</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-animation-function-is-animation-iteration-count"><code>is-animation-iteration-count</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-animation-function-is-animation-fill"><code>is-animation-fill</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-animation-function-is-animation-timing-function"><code>is-animation-timing-function</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-animation-function-is-animation-play-state-modes"><code>is-animation-play-state-modes</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-appearance-function-is-appearance-mode"><code>is-appearance-mode</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-background-function-is-background-attachment"><code>is-background-attachment</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-background-function-is-background-image-mode"><code>is-background-image-mode</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-background-function-is-background-origin-clip"><code>is-background-origin-clip</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-background-function-is-background-position"><code>is-background-position</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-background-function-is-background-repeat"><code>is-background-repeat</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-background-function-is-background-size"><code>is-background-size</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-border-function-is-border-radius"><code>is-border-radius</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-border-function-is-border-style"><code>is-border-style</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-border-function-is-border-mode"><code>is-border-mode</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-display"><code>is-display</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-sizing"><code>is-box-sizing</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-size"><code>is-box-size</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-bound-size"><code>is-box-bound-size</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-shadow-mode"><code>is-box-shadow-mode</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-z-index"><code>is-z-index</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-visibility"><code>is-visibility</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-backface-visibility"><code>is-backface-visibility</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-cursor-function-is-cursor"><code>is-cursor</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-cursor-function-is-pointer-events"><code>is-pointer-events</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-filter-function-is-filter-function"><code>is-filter-function</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-filter-function-is-filter"><code>is-filter</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-flex-function-is-flex-basis"><code>is-flex-basis</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-flex-function-is-flex-direction"><code>is-flex-direction</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-flex-function-is-flex-grow"><code>is-flex-grow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-flex-function-is-flex-shrink"><code>is-flex-shrink</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-flex-function-is-flex-wrap"><code>is-flex-wrap</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-flex-function-is-order"><code>is-order</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-flex-grid-function-is-align-content"><code>is-align-content</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-flex-grid-function-is-align-items"><code>is-align-items</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-flex-grid-function-is-align-self"><code>is-align-self</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-flex-grid-function-is-justify-content"><code>is-justify-content</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-flex-grid-function-is-justify-items"><code>is-justify-items</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-flex-grid-function-is-justify-self"><code>is-justify-self</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-float-function-is-clear"><code>is-clear</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-float-function-is-float"><code>is-float</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-margin-function-is-margin"><code>is-margin</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-outline-function-is-outline-width"><code>is-outline-width</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-outline-function-is-outline-style"><code>is-outline-style</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-outline-function-is-outline-color"><code>is-outline-color</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-outline-function-is-outline-offset"><code>is-outline-offset</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-overflow-function-is-overflow"><code>is-overflow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-padding-function-is-padding"><code>is-padding</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-position-function-is-position"><code>is-position</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-position-function-is-position-point-value"><code>is-position-point-value</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-position-function-is-position-point"><code>is-position-point</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-direction"><code>is-direction</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-font-size"><code>is-font-size</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-font-style"><code>is-font-style</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-font-weight"><code>is-font-weight</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-hyphens"><code>is-hyphens</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-letter-spacing"><code>is-letter-spacing</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-line-height"><code>is-line-height</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-align"><code>is-text-align</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-decoration-line"><code>is-text-decoration-line</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-decoration-style"><code>is-text-decoration-style</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-decoration-color"><code>is-text-decoration-color</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-decoration-mode"><code>is-text-decoration-mode</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-decoration-skip"><code>is-text-decoration-skip</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-underline-position"><code>is-text-underline-position</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-indent"><code>is-text-indent</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-overflow"><code>is-text-overflow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-shadow-mode"><code>is-text-shadow-mode</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-size-adjust"><code>is-text-size-adjust</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-stroke-width"><code>is-text-stroke-width</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-transform"><code>is-text-transform</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-user-select"><code>is-user-select</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-vertical-align"><code>is-vertical-align</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-white-space"><code>is-white-space</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-word-break"><code>is-word-break</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-word-spacing"><code>is-word-spacing</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-word-wrap"><code>is-word-wrap</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-transform-function-is-transform-function"><code>is-transform-function</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-transform-function-is-transform"><code>is-transform</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-transform-function-is-transform-origin"><code>is-transform-origin</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-transform-function-is-transform-style"><code>is-transform-style</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-is-transition-property"><code>is-transition-property</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-is-transition-timing-function"><code>is-transition-timing-function</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-is-transition-timing-mode-or-function"><code>is-transition-timing-mode-or-function</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-will-change-function-is-will-change"><code>is-will-change</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-angle-function-is-angle"><code>is-angle</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-color-function-is-css-color"><code>is-css-color</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-css-default"><code>is-css-default</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-length-mode"><code>is-length-mode</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-relative-length"><code>is-relative-length</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-absolute-length"><code>is-absolute-length</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-size"><code>is-size</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-frequency-function-is-frequency"><code>is-frequency</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-time-function-is-time"><code>is-time</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="types-array-function-array-concat"><h3 class="item__heading"><a class="item__name" href="#function-array-concat">array-concat</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function array-concat($lists...) {
$concat-list: ();
@each $list in $lists {
@if is-array($list) {
@each $item in $list {
$concat-list: append($concat-list, $item);
}
}
@else {
$concat-list: append($concat-list, $list);
}
}
@return $concat-list;
}" data-collapsed="@function array-concat($lists...) { ... }"><code>@function array-concat($lists...) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Concats two or more arrays/lists</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$lists...</code></th><td data-label="desc"><p>the arrays/lists</p></td><td data-label="type"><code>List</code> or <code>Array</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>List</code> or <code>Array</code> —<p>the concatenated array/list</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-is-array"><code>is-array</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[variable]</span> <a href="#mixins-text-variable-font-size-modes"><code>font-size-modes</code></a></li><li><span class="item__cross-type">[variable]</span> <a href="#mixins-text-variable-font-style-modes"><code>font-style-modes</code></a></li><li><span class="item__cross-type">[variable]</span> <a href="#mixins-text-variable-text-decoration-line-modes"><code>text-decoration-line-modes</code></a></li><li><span class="item__cross-type">[variable]</span> <a href="#mixins-text-variable-text-decoration-style-modes"><code>text-decoration-style-modes</code></a></li><li><span class="item__cross-type">[variable]</span> <a href="#mixins-text-variable-text-decoration-modes"><code>text-decoration-modes</code></a></li><li><span class="item__cross-type">[variable]</span> <a href="#mixins-text-variable-text-decoration-skip-modes"><code>text-decoration-skip-modes</code></a></li><li><span class="item__cross-type">[variable]</span> <a href="#mixins-text-variable-text-underline-position-modes"><code>text-underline-position-modes</code></a></li><li><span class="item__cross-type">[variable]</span> <a href="#mixins-text-variable-text-stroke-width-modes"><code>text-stroke-width-modes</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-string-function-string-split"><code>string-split</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="types-array-function-array-join"><h3 class="item__heading"><a class="item__name" href="#function-array-join">array-join</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function array-join($a, $sep: ',') {
$join-string: '';
@each $item in $a {
$join-string: $join-string + $sep + $item;
}
$join-string: str-slice($join-string, str-length($sep) + 1);
@return $join-string;
}" data-collapsed="@function array-join($a, $sep: ',') { ... }"><code>@function array-join($a, $sep: ',') { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Joins an array/list in a string with the specified separator</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$a</code></th><td data-label="desc"><p>the array/list</p></td><td data-label="type"><code>List</code> or <code>Array</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$sep</code></th><td data-label="desc"><p>the sparator</p></td><td data-label="type"><code>String</code></td><td data-label="default"><code>','</code></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>String</code> —<p>the joined string</p></div><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section></section><section class="main__section"><h1 class="main__heading" id="types-boolean"><div class="container">Types - Boolean</div></h1><section class="main__sub-section" id="types-boolean-function"><h2 class="main__heading--secondary"><div class="container">functions</div></h2><section class="main__item container item" id="types-boolean-function-is-boolean"><h3 class="item__heading"><a class="item__name" href="#function-is-boolean">is-boolean</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-boolean($b) {
@return is-defined($b) and type-of($b)==bool;
}" data-collapsed="@function is-boolean($b) { ... }"><code>@function is-boolean($b) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if a value is a boolean value</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$b</code></th><td data-label="desc"><p>the value to check</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is a boolean value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section></section><section class="main__section"><h1 class="main__heading" id="types-color"><div class="container">Types - Color</div></h1><section class="main__sub-section" id="types-color-function"><h2 class="main__heading--secondary"><div class="container">functions</div></h2><section class="main__item container item" id="types-color-function-is-color"><h3 class="item__heading"><a class="item__name" href="#function-is-color">is-color</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-color($c) {
@return is-defined($c) and type-of($c)==color;
}" data-collapsed="@function is-color($c) { ... }"><code>@function is-color($c) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if a value is a color value</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$c</code></th><td data-label="desc"><p>the value to check</p></td><td data-label="type"><code>Color</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is a color value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-outline-function-is-outline-color"><code>is-outline-color</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-decoration-color"><code>is-text-decoration-color</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-color-function-is-css-color"><code>is-css-color</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="types-color-function-is-css-color"><h3 class="item__heading"><a class="item__name" href="#function-is-css-color">is-css-color</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-css-color($c) {
@return is-defined($c) and (is-color($c) or array-contains($color-modes, $c));
}" data-collapsed="@function is-css-color($c) { ... }"><code>@function is-css-color($c) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if a value is a css color value (including transparent, initial, inherit)</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$c</code></th><td data-label="desc"><p>the value to check</p></td><td data-label="type"><code>Color</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is a css color value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-color-function-is-color"><code>is-color</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#types-color-variable-color-modes"><code>color-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-background-mixin-background-color"><code>background-color</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-background-mixin-background"><code>background</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border-color"><code>border-color</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border"><code>border</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-box-color"><code>box-color</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-box-color"><code>box-color</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-shadow"><code>is-box-shadow</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-color"><code>color</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-shadow"><code>is-text-shadow</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section><section class="main__sub-section" id="types-color-variable"><h2 class="main__heading--secondary"><div class="container">variables</div></h2><section class="main__item container item" id="types-color-variable-color-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-color-modes">color-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$color-modes: array-concat((transparent), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Color modes supported</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#types-color-function-is-css-color"><code>is-css-color</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section></section><section class="main__section"><h1 class="main__heading" id="types-common"><div class="container">Types - Common</div></h1><section class="main__sub-section" id="types-common-function"><h2 class="main__heading--secondary"><div class="container">functions</div></h2><section class="main__item container item" id="types-common-function-is-css-default"><h3 class="item__heading"><a class="item__name" href="#function-is-css-default">is-css-default</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-css-default($cd) {
@return is-defined($cd) and array-contains($css-default-modes, $cd);
}" data-collapsed="@function is-css-default($cd) { ... }"><code>@function is-css-default($cd) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if a value is a css default mode (initial, inherit)</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$cd</code></th><td data-label="desc"><p>the value to check</p></td><td data-label="type"><code>Any</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is a css default value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#types-common-variable-css-default-modes"><code>css-default-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-animation-function-is-animation-time"><code>is-animation-time</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-animation-mixin-animation"><code>animation</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-background-mixin-background"><code>background</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-transform-origin"><code>transform-origin</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-is-transition-time"><code>is-transition-time</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="types-common-function-is-calc-length"><h3 class="item__heading"><a class="item__name" href="#function-is-calc-length">is-calc-length</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-calc-length($cl) {
@return is-defined($cl) and string-starts-with($cl + '', 'calc(') and string-ends-with($cl + '', ')');
}" data-collapsed="@function is-calc-length($cl) { ... }"><code>@function is-calc-length($cl) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if a value is a css calc length value</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$cl</code></th><td data-label="desc"><p>the value to check</p></td><td data-label="type"><code>Any</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is a calc length value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-string-function-string-starts-with"><code>string-starts-with</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-string-function-string-ends-with"><code>string-ends-with</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#types-common-function-get-calc-length-expression"><code>get-calc-length-expression</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-length"><code>is-length</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="types-common-function-get-calc-length-expression"><h3 class="item__heading"><a class="item__name" href="#function-get-calc-length-expression">get-calc-length-expression</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function get-calc-length-expression($cl) {
@if is-calc-length($cl) {
@return string-replace(string-replace($cl, 'calc(', ''), ')', '');
}
}" data-collapsed="@function get-calc-length-expression($cl) { ... }"><code>@function get-calc-length-expression($cl) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Returns the css expression included in a css calc length value</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$cl</code></th><td data-label="desc"><p>the value to check</p></td><td data-label="type"><code>Any</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Css-expression</code> —<p>the fixed css calc expression</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-calc-length"><code>is-calc-length</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-string-function-string-replace"><code>string-replace</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="types-common-function-is-length-mode"><h3 class="item__heading"><a class="item__name" href="#function-is-length-mode">is-length-mode</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-length-mode($lm) {
@return is-defined($lm) and array-contains($length-modes, $lm);
}" data-collapsed="@function is-length-mode($lm) { ... }"><code>@function is-length-mode($lm) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if a value is a css length mode supported</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$lm</code></th><td data-label="desc"><p>the value to check</p></td><td data-label="type"><code>Any</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is a length mode</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#types-common-variable-length-modes"><code>length-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-length"><code>is-length</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="types-common-function-is-relative-length"><h3 class="item__heading"><a class="item__name" href="#function-is-relative-length">is-relative-length</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-relative-length($l) {
@return is-number($l) and ($l==0 or (not(unitless($l) and (array-contains($relative-length-units, unit($l)) or is-percentage($l)))));
}" data-collapsed="@function is-relative-length($l) { ... }"><code>@function is-relative-length($l) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if a length value has a relative length unit (em, ex, ch, rem, vw, vh, vmin, vmax)</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$l</code></th><td data-label="desc"><p>the value to check</p></td><td data-label="type"><code>Any</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is a relative length</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-number"><code>is-number</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-percentage"><code>is-percentage</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#types-common-variable-relative-length-units"><code>relative-length-units</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-length"><code>is-length</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="types-common-function-is-absolute-length"><h3 class="item__heading"><a class="item__name" href="#function-is-absolute-length">is-absolute-length</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-absolute-length($l) {
@return is-number($l) and ($l==0 or (not(unitless($l) and (array-contains($absolute-length-units, unit($l))))));
}" data-collapsed="@function is-absolute-length($l) { ... }"><code>@function is-absolute-length($l) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if a length value has an absolute length unit (cm, mm, in, px, pt, pc)</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$l</code></th><td data-label="desc"><p>the value to check</p></td><td data-label="type"><code>Any</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is a absolute length</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-number"><code>is-number</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#types-common-variable-absolute-length-units"><code>absolute-length-units</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-length"><code>is-length</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="types-common-function-is-length"><h3 class="item__heading"><a class="item__name" href="#function-is-length">is-length</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-length($l) {
@return is-defined($l) and (is-relative-length($l) or is-absolute-length($l) or is-calc-length($l) or is-percentage($l) or is-length-mode($l));
}" data-collapsed="@function is-length($l) { ... }"><code>@function is-length($l) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if a value is a valid CSS length<br>Relative, Absolute, Percentage, Calc or Length Mode</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$l</code></th><td data-label="desc"><p>true if is a relative length</p></td><td data-label="type"><code>Any</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is a length</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-relative-length"><code>is-relative-length</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-absolute-length"><code>is-absolute-length</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-calc-length"><code>is-calc-length</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-percentage"><code>is-percentage</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-length-mode"><code>is-length-mode</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#grid-system-mixin-grid-system"><code>grid-system</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#grid-system-columns-mixin-columns"><code>columns</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-shadow"><code>is-box-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-shadow"><code>is-box-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-shadow"><code>is-box-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-shadow"><code>is-box-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-margin-function-is-margin"><code>is-margin</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-outline-function-is-outline-width"><code>is-outline-width</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-outline-function-is-outline-offset"><code>is-outline-offset</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-padding-function-is-padding"><code>is-padding</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-position-function-is-position-point-value"><code>is-position-point-value</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-shadow"><code>is-text-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-shadow"><code>is-text-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-shadow"><code>is-text-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-shadow"><code>is-text-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-size"><code>is-size</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="types-common-function-is-size"><h3 class="item__heading"><a class="item__name" href="#function-is-size">is-size</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-size($s) {
@return is-defined($s) and (is-length($s) or array-contains($css-size-modes, $s));
}" data-collapsed="@function is-size($s) { ... }"><code>@function is-size($s) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if a value is a CSS size.</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$s</code></th><td data-label="desc">—<span class="visually-hidden"> none</span></td><td data-label="type"><code>Any</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is a size</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-length"><code>is-length</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#types-common-variable-css-size-modes"><code>css-size-modes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-background-function-is-background-position"><code>is-background-position</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-background-function-is-background-size"><code>is-background-size</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-border-function-is-border-radius"><code>is-border-radius</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border-width"><code>border-width</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border"><code>border</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-size"><code>is-box-size</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-bound-size"><code>is-box-bound-size</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-flex-function-is-flex-basis"><code>is-flex-basis</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-font-size"><code>is-font-size</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-letter-spacing"><code>is-letter-spacing</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-line-height"><code>is-line-height</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-indent"><code>is-text-indent</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-stroke-width"><code>is-text-stroke-width</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-vertical-align"><code>is-vertical-align</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-word-spacing"><code>is-word-spacing</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-perspective"><code>perspective</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-translate"><code>translate</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-translate"><code>translate</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-translate3d"><code>translate3d</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-translate3d"><code>translate3d</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-translate3d"><code>translate3d</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-translateX"><code>translateX</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-translateY"><code>translateY</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-translateZ"><code>translateZ</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-transform-function-is-transform-origin"><code>is-transform-origin</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="types-common-function-strip-unit"><h3 class="item__heading"><a class="item__name" href="#function-strip-unit">strip-unit</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function strip-unit($v) {
@return ($v / ($v * 0 + 1));
}" data-collapsed="@function strip-unit($v) { ... }"><code>@function strip-unit($v) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Strips the unit from a value.</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$v</code></th><td data-label="desc">—<span class="visually-hidden"> none</span></td><td data-label="type"><code>Number</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Number (unitless)</code> —<p>the unitless value</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>$dimension: strip-unit(10em);</code></pre></div><div class="item__example example"><div class="example__description"><p>Result</p></div><pre class="example__code language-scss"><code>$dimension: 10;</code></pre></div><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-aspect-ratio-factor"><code>aspect-ratio-factor</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-aspect-ratio-factor"><code>aspect-ratio-factor</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-aspect-ratio"><code>aspect-ratio</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-rem"><code>rem</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-rem"><code>rem</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-px"><code>px</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-common-function-px"><code>px</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section><section class="main__sub-section" id="types-common-variable"><h2 class="main__heading--secondary"><div class="container">variables</div></h2><section class="main__item container item" id="types-common-variable-css-default-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-css-default-modes">css-default-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$css-default-modes: (initial, inherit);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>CSS default modes supported (shared between all modes arrays/lists)</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-border-function-is-border-radius"><code>is-border-radius</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-flex-function-is-flex-grow"><code>is-flex-grow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-flex-function-is-flex-shrink"><code>is-flex-shrink</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-flex-function-is-order"><code>is-order</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-outline-function-is-outline-offset"><code>is-outline-offset</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-padding-function-is-padding"><code>is-padding</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-decoration-color"><code>is-text-decoration-color</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-indent"><code>is-text-indent</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-css-default"><code>is-css-default</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="types-common-variable-length-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-length-modes">length-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$length-modes: array-concat((auto), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Length modes supported (auto and $css-default-modes)</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-length-mode"><code>is-length-mode</code></a></li></ul><h3 class="item__sub-heading">See</h3><ul class="list-unstyled"><li><span class="item__cross-type">[variable]</span> <a href="#variable-css-default-modes"><code>css-default-modes</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="types-common-variable-relative-length-units"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-relative-length-units">relative-length-units</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$relative-length-units: (em, ex, ch, rem, vw, vh, vmin, vmax);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Relative length units supported</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-relative-length"><code>is-relative-length</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="types-common-variable-absolute-length-units"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-absolute-length-units">absolute-length-units</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$absolute-length-units: (cm, mm, in, px, pt, pc);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Absolute length units supported</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-absolute-length"><code>is-absolute-length</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="types-common-variable-css-size-modes"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-css-size-modes">css-size-modes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$css-size-modes: array-concat((auto, fill, fill-available, available, fit-content, min-content, max-content), $css-default-modes);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>CSS size/length modes supported</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-size"><code>is-size</code></a></li></ul><h3 class="item__sub-heading">See</h3><ul class="list-unstyled"><li><span class="item__cross-type">[variable]</span> <a href="#variable-css-default-modes"><code>css-default-modes</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section></section><section class="main__section"><h1 class="main__heading" id="types-frequency"><div class="container">Types - Frequency</div></h1><section class="main__sub-section" id="types-frequency-function"><h2 class="main__heading--secondary"><div class="container">functions</div></h2><section class="main__item container item" id="types-frequency-function-is-frequency"><h3 class="item__heading"><a class="item__name" href="#function-is-frequency">is-frequency</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-frequency($f) {
@return is-number($f) and array-contains($frequency-units, unit($f));
}" data-collapsed="@function is-frequency($f) { ... }"><code>@function is-frequency($f) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if a value has a supported frequency unit</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$f</code></th><td data-label="desc"><p>the value to check</p></td><td data-label="type"><code>Any</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is a frequency value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-number"><code>is-number</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#types-frequency-variable-frequency-units"><code>frequency-units</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section><section class="main__sub-section" id="types-frequency-variable"><h2 class="main__heading--secondary"><div class="container">variables</div></h2><section class="main__item container item" id="types-frequency-variable-frequency-units"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-frequency-units">frequency-units</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$frequency-units: (Hz, kHz);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Frequency units supported</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#types-frequency-function-is-frequency"><code>is-frequency</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section></section><section class="main__section"><h1 class="main__heading" id="types-function"><div class="container">Types - Function</div></h1><section class="main__sub-section" id="types-function-function"><h2 class="main__heading--secondary"><div class="container">functions</div></h2><section class="main__item container item" id="types-function-function-is-function"><h3 class="item__heading"><a class="item__name" href="#function-is-function">is-function</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-function($f) {
@return is-defined($f) and type-of($f)==function;
}" data-collapsed="@function is-function($f) { ... }"><code>@function is-function($f) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a function</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$f</code></th><td data-label="desc"><p>the value to check</p></td><td data-label="type"><code>Any</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is a function</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section></section><section class="main__section"><h1 class="main__heading" id="types-number"><div class="container">Types - Number</div></h1><section class="main__sub-section" id="types-number-function"><h2 class="main__heading--secondary"><div class="container">functions</div></h2><section class="main__item container item" id="types-number-function-is-number"><h3 class="item__heading"><a class="item__name" href="#function-is-number">is-number</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-number($n) {
@return is-defined($n) and type-of($n)==number;
}" data-collapsed="@function is-number($n) { ... }"><code>@function is-number($n) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a number</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$n</code></th><td data-label="desc"><p>the value to check</p></td><td data-label="type"><code>Any</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is a number</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-flex-function-is-flex-grow"><code>is-flex-grow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-flex-function-is-flex-shrink"><code>is-flex-shrink</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-matrix"><code>matrix</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-matrix"><code>matrix</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-matrix"><code>matrix</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-matrix"><code>matrix</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-matrix"><code>matrix</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-matrix"><code>matrix</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-matrix3d"><code>matrix3d</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-matrix3d"><code>matrix3d</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-matrix3d"><code>matrix3d</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-matrix3d"><code>matrix3d</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-matrix3d"><code>matrix3d</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-matrix3d"><code>matrix3d</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-matrix3d"><code>matrix3d</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-matrix3d"><code>matrix3d</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-matrix3d"><code>matrix3d</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-matrix3d"><code>matrix3d</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-matrix3d"><code>matrix3d</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-matrix3d"><code>matrix3d</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-matrix3d"><code>matrix3d</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-matrix3d"><code>matrix3d</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-matrix3d"><code>matrix3d</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-matrix3d"><code>matrix3d</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-scale"><code>scale</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-scale"><code>scale</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-scale3d"><code>scale3d</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-scale3d"><code>scale3d</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-scale3d"><code>scale3d</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-scaleX"><code>scaleX</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-scaleY"><code>scaleY</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-scaleZ"><code>scaleZ</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-angle-function-is-angle"><code>is-angle</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-relative-length"><code>is-relative-length</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-absolute-length"><code>is-absolute-length</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-frequency-function-is-frequency"><code>is-frequency</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-integer"><code>is-integer</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-float"><code>is-float</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-number-function-unitstrip"><code>unitstrip</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-number-between"><code>is-number-between</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-number-between"><code>is-number-between</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-number-between"><code>is-number-between</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-percentage"><code>is-percentage</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-percentage-number"><code>is-percentage-number</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-time-function-is-time"><code>is-time</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="types-number-function-is-integer"><h3 class="item__heading"><a class="item__name" href="#function-is-integer">is-integer</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-integer($i) {
@return is-number($i) and round($i)==$i;
}" data-collapsed="@function is-integer($i) { ... }"><code>@function is-integer($i) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is an integer number</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$i</code></th><td data-label="desc"><p>the value to check</p></td><td data-label="type"><code>Any</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is an integer number</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-number"><code>is-number</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#grid-system-mixin-grid-system"><code>grid-system</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#grid-system-columns-mixin-columns"><code>columns</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-animation-function-is-animation-iteration-count"><code>is-animation-iteration-count</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-z-index"><code>is-z-index</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-flex-function-is-order"><code>is-order</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="types-number-function-is-float"><h3 class="item__heading"><a class="item__name" href="#function-is-float">is-float</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-float($f) {
@return is-number($f) and floor($f)!=$f;
}" data-collapsed="@function is-float($f) { ... }"><code>@function is-float($f) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a floating number</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$f</code></th><td data-label="desc"><p>the value to check</p></td><td data-label="type"><code>Any</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is a float number</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-number"><code>is-number</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="types-number-function-unitstrip"><h3 class="item__heading"><a class="item__name" href="#function-unitstrip">unitstrip</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function unitstrip($n) {
@if is-number($n) and not unitless($n) {
@return $n / ($n * 0 + 1);
}
@return $n;
}" data-collapsed="@function unitstrip($n) { ... }"><code>@function unitstrip($n) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Removes the unit of something</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$n</code></th><td data-label="desc"><p>the something ;-)</p></td><td data-label="type"><code>Number</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Number</code> —<p>the something unitstripped ;-)</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-number"><code>is-number</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-percentage-number"><code>is-percentage-number</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="types-number-function-is-number-between"><h3 class="item__heading"><a class="item__name" href="#function-is-number-between">is-number-between</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-number-between($n, $f, $t, $include-bounds: true) {
@if (is-number($n) and is-number($from) and is-number($to)) {
@return if($include-bounds, ($n >=$from) and ($n <=$to), ($n > $from) and ($n < $to));
}
@warn '`#{$n}, #{$from} and #{$to}` are not valid numbers';
@return false;
}" data-collapsed="@function is-number-between($n, $f, $t, $include-bounds: true) { ... }"><code>@function is-number-between($n, $f, $t, $include-bounds: true) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if a number is between two numbers, with an include bounds options defaulted to true</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$n</code></th><td data-label="desc"><p>the value to check</p></td><td data-label="type"><code>Number</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$f</code></th><td data-label="desc"><p>the from value</p></td><td data-label="type"><code>Number</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$t</code></th><td data-label="desc"><p>the to value</p></td><td data-label="type"><code>Number</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$include-bounds</code></th><td data-label="desc"><p>specifies to execute either >= & =< or > & <</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>true</code></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if the number is inside the bounds</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-number"><code>is-number</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-number"><code>is-number</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-number"><code>is-number</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-percentage-number"><code>is-percentage-number</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="types-number-function-is-percentage"><h3 class="item__heading"><a class="item__name" href="#function-is-percentage">is-percentage</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-percentage($p) {
@return is-number($p) and unit($p)=='%';
}" data-collapsed="@function is-percentage($p) { ... }"><code>@function is-percentage($p) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a percentage number</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$p</code></th><td data-label="desc"><p>the value to check</p></td><td data-label="type"><code>Any</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is percentage number</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-number"><code>is-number</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-background-function-is-background-position"><code>is-background-position</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-background-function-is-background-size"><code>is-background-size</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-border-function-is-border-radius"><code>is-border-radius</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-font-size"><code>is-font-size</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-line-height"><code>is-line-height</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-indent"><code>is-text-indent</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-size-adjust"><code>is-text-size-adjust</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-translate3d"><code>translate3d</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-transform-function-is-transform-origin"><code>is-transform-origin</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-relative-length"><code>is-relative-length</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-length"><code>is-length</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="types-number-function-is-percentage-number"><h3 class="item__heading"><a class="item__name" href="#function-is-percentage-number">is-percentage-number</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-percentage-number($pn) {
@return is-number($pn) and is-number-between(unitstrip($pn), 0, 1);
}" data-collapsed="@function is-percentage-number($pn) { ... }"><code>@function is-percentage-number($pn) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is a percentage floating number (between 0 and 1)</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$pn</code></th><td data-label="desc"><p>the value to check</p></td><td data-label="type"><code>Any</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is percentage floating number</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-number"><code>is-number</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-number-between"><code>is-number-between</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-unitstrip"><code>unitstrip</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-filter-mixin-opacity"><code>opacity</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-rotate3d"><code>rotate3d</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-rotate3d"><code>rotate3d</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-transform-mixin-rotate3d"><code>rotate3d</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="types-number-function-to-number"><h3 class="item__heading"><a class="item__name" href="#function-to-number">to-number</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function to-number($value) {
@if type-of($value) == 'number' {
@return $value;
} @else if type-of($value) != 'string' {
$_: log('Value for `to-number` should be a number or a string.');
}
$result: 0;
$digits: 0;
$minus: str-slice($value, 1, 1) == '-';
$numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9);
@for $i from if($minus, 2, 1) through str-length($value) {
$character: str-slice($value, $i, $i);
@if not (index(map-keys($numbers), $character) or $character == '.') {
@return to-length(if($minus, -$result, $result), str-slice($value, $i));
}
@if $character == '.' {
$digits: 1;
} @else if $digits == 0 {
$result: $result * 10 + map-get($numbers, $character);
} @else {
$digits: $digits * 10;
$result: $result + map-get($numbers, $character) / $digits;
}
}
@return if($minus, -$result, $result);;
}" data-collapsed="@function to-number($value) { ... }"><code>@function to-number($value) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Casts a string into a number</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$value</code></th><td data-label="desc"><p>Value to be parsed</p></td><td data-label="type"><code>String</code> or <code>Number</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Number</code></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-to-length"><code>to-length</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="types-number-function-to-length"><h3 class="item__heading"><a class="item__name" href="#function-to-length">to-length</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function to-length($value, $unit) {
$units: ('px': 1px, 'cm': 1cm, 'mm': 1mm, '%': 1%, 'ch': 1ch, 'pc': 1pc, 'in': 1in, 'em': 1em, 'rem': 1rem, 'pt': 1pt, 'ex': 1ex, 'vw': 1vw, 'vh': 1vh, 'vmin': 1vmin, 'vmax': 1vmax);
@if not index(map-keys($units), $unit) {
$_: log('Invalid unit `#{$unit}`.');
}
@return $value * map-get($units, $unit);
}" data-collapsed="@function to-length($value, $unit) { ... }"><code>@function to-length($value, $unit) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Add <code>$unit</code> to <code>$value</code></p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$value</code></th><td data-label="desc"><p>Value to add unit to</p></td><td data-label="type"><code>Number</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$unit</code></th><td data-label="desc"><p>String representation of the unit</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Number</code> —<p><code>$value</code> expressed in <code>$unit</code></p></div><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#types-number-function-to-number"><code>to-number</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section></section><section class="main__section"><h1 class="main__heading" id="types-object"><div class="container">Types - Object</div></h1><section class="main__sub-section" id="types-object-function"><h2 class="main__heading--secondary"><div class="container">functions</div></h2><section class="main__item container item" id="types-object-function-is-object"><h3 class="item__heading"><a class="item__name" href="#function-is-object">is-object</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-object($o) {
@return is-defined($o) and type-of($o)==map;
}" data-collapsed="@function is-object($o) { ... }"><code>@function is-object($o) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if something is an object/map</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$o</code></th><td data-label="desc"><p>the value to check</p></td><td data-label="type"><code>Any</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is an object</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-animation-mixin-animation"><code>animation</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-background-mixin-background"><code>background</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border"><code>border</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-box-bounds"><code>box-bounds</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-box-size"><code>box-size</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-box-color"><code>box-color</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-shadow"><code>is-box-shadow</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-mixin-flex-flow"><code>flex-flow</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-grid-mixin-place-content"><code>place-content</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-grid-mixin-place-items"><code>place-items</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-outline-mixin-outline"><code>outline</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-position"><code>position</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-decoration"><code>text-decoration</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-shadow"><code>is-text-shadow</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-stroke"><code>text-stroke</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-font"><code>font</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-content-align"><code>content-align</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-is-transition"><code>is-transition</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-object-function-get"><code>get</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="types-object-function-get"><h3 class="item__heading"><a class="item__name" href="#function-get">get</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function get($o, $p) {
$keys: $p;
@if is-string($p) {
$keys: string-split($p);
}
$length: length($keys);
@if $length==1 {
$keys: nth($keys, 1);
}
$get: map-get($o, nth($keys, 1));
@if $length > 1 {
@for $i from 2 through $length {
@if is-object($get) {
$get: map-get($get, nth($keys, $i));
}
}
}
@return $get;
}" data-collapsed="@function get($o, $p) { ... }"><code>@function get($o, $p) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Deep get function for objects</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$o</code></th><td data-label="desc"><p>the object to look in</p></td><td data-label="type"><code>Object</code> or <code>Map</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$p</code></th><td data-label="desc"><p>the path to check for</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Any</code> —<p>the value found at the path or null</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>$o: (
prop1: (
subprop1: #333,
subprop2: #444
),
prop2: (
subprop1: solid
),
prop3: (),
)</code></pre></div><div class="item__example example"><div class="example__description"><p>Result</p></div><pre class="example__code language-scss"><code>$p: get($o, 'prop1.subprop2'); // #444</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-string-function-is-string"><code>is-string</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-string-function-string-split"><code>string-split</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-is-object"><code>is-object</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border"><code>border</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-shadow"><code>is-box-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-shadow"><code>is-box-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-shadow"><code>is-box-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-shadow"><code>is-box-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-shadow"><code>is-box-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-shadow"><code>is-box-shadow</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-outline-mixin-outline"><code>outline</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-outline-mixin-outline"><code>outline</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-outline-mixin-outline"><code>outline</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-outline-mixin-outline"><code>outline</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-position"><code>position</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-position"><code>position</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-position"><code>position</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-position"><code>position</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-position"><code>position</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-decoration"><code>text-decoration</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-decoration"><code>text-decoration</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-decoration"><code>text-decoration</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-shadow"><code>is-text-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-shadow"><code>is-text-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-shadow"><code>is-text-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-shadow"><code>is-text-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-shadow"><code>is-text-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-shadow"><code>is-text-shadow</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-content-align"><code>content-align</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-content-align"><code>content-align</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-is-transition"><code>is-transition</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-is-transition"><code>is-transition</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-is-transition"><code>is-transition</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-is-transition"><code>is-transition</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-object-function-set"><code>set</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-object-function-set"><code>set</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-object-function-extend"><code>extend</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="types-object-function-set"><h3 class="item__heading"><a class="item__name" href="#function-set">set</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function set($o, $p, $v) {
$keys: $p;
@if is-string($p) {
$keys: string-split($p);
}
$length: length($keys);
$get-keys: ();
$map-level: ();
@if $length > 1 {
$map-level: get($o, $keys);
}
$merge: (nth($keys, $length): $v);
@if $map-level {
$get-keys: get-keys($keys, $length);
$merge: map-merge($map-level, $merge);
}
@for $i from ($length * -1 + 1) through -1 {
$j: abs($i);
$key: nth($keys, $j);
@if $j > 1 {
$get-keys: get-keys($keys, $j);
$map-level: get($o, $get-keys);
@if $map-level {
$merge: map-merge($map-level, ($key: $merge));
}
@else {
$merge: ($key: $merge);
}
}
@else {
$merge: ($key: $merge);
}
}
$o: map-merge($o, $merge);
@return $o;
}" data-collapsed="@function set($o, $p, $v) { ... }"><code>@function set($o, $p, $v) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Deep set function for objects</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$o</code></th><td data-label="desc"><p>the object to modify in</p></td><td data-label="type"><code>Object</code> or <code>Map</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$p</code></th><td data-label="desc"><p>the path to use</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$v</code></th><td data-label="desc"><p>the value to use</p></td><td data-label="type"><code>Any</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Any</code> —<p>the object with the new value set at the specified path</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>$o: (
prop1: (
subprop1: #333,
subprop2: #444
),
prop2: (
subprop1: solid
),
prop3: (),
)
$p: set($o, 'prop2.subprop2', #555);</code></pre></div><div class="item__example example"><div class="example__description"><p>Result</p></div><pre class="example__code language-scss"><code>$o: (
prop1: (
subprop1: #333,
subprop2: #444
),
prop2: (
subprop1: solid
subprop2: #555
),
prop3: (),
)</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-string-function-is-string"><code>is-string</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-string-function-string-split"><code>string-split</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-get"><code>get</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-get"><code>get</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="types-object-function-extend"><h3 class="item__heading"><a class="item__name" href="#function-extend">extend</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function extend($o, $objects) {
$max: length($objects); // Loop through all maps in $objects...
@for $i from 1 through $max {
// Store current map
$current: nth($objects, $i); // Loop through all tuples in current map
@each $key, $value in $current {
// If value is a nested map and same key from object is a nested map as well
@if is-object($value) and is-object(map-get($o, $key)) {
// Recursive extend
$value: extend(get($o, $key), $value);
} // Merge current tuple with object
$o: map-merge($o, ($key: $value));
}
}
@return $o;
}" data-collapsed="@function extend($o, $objects) { ... }"><code>@function extend($o, $objects) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Deep extend/merge function for objects</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$o</code></th><td data-label="desc"><p>the object to modify in</p></td><td data-label="type"><code>Object</code> or <code>Map</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$objects</code></th><td data-label="desc"><p>the objects to merge in</p></td><td data-label="type"><code>Object</code> or <code>Map</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Any</code> —<p>the new extended object</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Usage</p></div><pre class="example__code language-scss"><code>$o1: (
prop1: (
subprop1: #333,
subprop2: #444
),
prop2: (
subprop1: solid
subprop2: #555
)
)
$o2: (
prop1: (
subprop3: #555,
),
prop2: (
subprop2: Verdana
),
)
$o3: (
prop3: (
subprop1: 1px
),
)</code></pre></div><div class="item__example example"><div class="example__description"><p>Result</p></div><pre class="example__code language-scss"><code>$o: (
prop1: (
subprop1: #333,
subprop2: #444,
subprop3: #555,
),
prop2: (
subprop1: solid
subprop2: Verdana
),
prop3: (
subprop1: 1px
),
)</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-get"><code>get</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-object-function-is-object"><code>is-object</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-animation-mixin-animation"><code>animation</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-background-mixin-background"><code>background</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-border-mixin-border"><code>border</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-box-bounds"><code>box-bounds</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-box-size"><code>box-size</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-box-mixin-box-color"><code>box-color</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-shadow"><code>is-box-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-shadow"><code>is-box-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-shadow"><code>is-box-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-shadow"><code>is-box-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-shadow"><code>is-box-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-shadow"><code>is-box-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-shadow"><code>is-box-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-shadow"><code>is-box-shadow</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-mixin-flex-flow"><code>flex-flow</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-grid-mixin-place-content"><code>place-content</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-flex-grid-mixin-place-items"><code>place-items</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-outline-mixin-outline"><code>outline</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-outline-mixin-outline"><code>outline</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-outline-mixin-outline"><code>outline</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-outline-mixin-outline"><code>outline</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-outline-mixin-outline"><code>outline</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-position"><code>position</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-position"><code>position</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-position"><code>position</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-position"><code>position</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-position"><code>position</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-position-mixin-position"><code>position</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-color"><code>color</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-decoration"><code>text-decoration</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-decoration"><code>text-decoration</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-decoration"><code>text-decoration</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-decoration"><code>text-decoration</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-shadow"><code>is-text-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-shadow"><code>is-text-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-shadow"><code>is-text-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-shadow"><code>is-text-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-shadow"><code>is-text-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-shadow"><code>is-text-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-shadow"><code>is-text-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-shadow"><code>is-text-shadow</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-text-stroke"><code>text-stroke</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-font"><code>font</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-content-align"><code>content-align</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-content-align"><code>content-align</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-text-mixin-content-align"><code>content-align</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-is-transition"><code>is-transition</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-is-transition"><code>is-transition</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-is-transition"><code>is-transition</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-is-transition"><code>is-transition</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-is-transition"><code>is-transition</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-is-transition"><code>is-transition</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section></section><section class="main__section"><h1 class="main__heading" id="types-string"><div class="container">Types - String</div></h1><section class="main__sub-section" id="types-string-function"><h2 class="main__heading--secondary"><div class="container">functions</div></h2><section class="main__item container item" id="types-string-function-is-string"><h3 class="item__heading"><a class="item__name" href="#function-is-string">is-string</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-string($s) {
@return is-defined($s) and type-of($s)==string;
}" data-collapsed="@function is-string($s) { ... }"><code>@function is-string($s) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if a value is a string value.</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$s</code></th><td data-label="desc"><p>the value to check</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is a string</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#core-function-is-defined"><code>is-defined</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-animation-function-is-animation-name"><code>is-animation-name</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-box-function-is-box-shadow"><code>is-box-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-font-family"><code>is-font-family</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-overflow"><code>is-text-overflow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-text-function-is-text-shadow"><code>is-text-shadow</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-object-function-get"><code>get</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-object-function-set"><code>set</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-string-function-string-starts-with"><code>string-starts-with</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-string-function-string-contains"><code>string-contains</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-string-function-string-ends-with"><code>string-ends-with</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-url-function-has-url-function"><code>has-url-function</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-url-function-is-url"><code>is-url</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="types-string-function-to-string"><h3 class="item__heading"><a class="item__name" href="#function-to-string">to-string</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function to-string($a) {
@return inspect($a);
}" data-collapsed="@function to-string($a) { ... }"><code>@function to-string($a) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Converts something to a string</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$a</code></th><td data-label="desc"><p>the value to convert</p></td><td data-label="type"><code>Any</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>String</code> —<p>the converted string</p></div><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-transform-function-is-transforms"><code>is-transforms</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="types-string-function-string-length"><h3 class="item__heading"><a class="item__name" href="#function-string-length">string-length</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function string-length($s) {
@return str-length($s);
}" data-collapsed="@function string-length($s) { ... }"><code>@function string-length($s) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Returns the number of characters in a string.<br><br><u>Note: aliases the native str-length method</u></p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$s</code></th><td data-label="desc"><p>the string to count</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Integer</code> —<p>the string length</p></div><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#types-string-function-string-starts-with"><code>string-starts-with</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-string-function-string-ends-with"><code>string-ends-with</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-string-function-string-split"><code>string-split</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-string-function-string-replace"><code>string-replace</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-url-function-is-url"><code>is-url</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://sass-lang.com/documentation/Sass/Script/Functions.html#str_length-instance_method">SassLang str-length docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="types-string-function-string-index"><h3 class="item__heading"><a class="item__name" href="#function-string-index">string-index</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function string-index($h, $n) {
@return str-index($h, $n);
}" data-collapsed="@function string-index($h, $n) { ... }"><code>@function string-index($h, $n) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Returns the position index of the first occurrence of string needle in string haystack<br><br><u>Note: aliases the native str-index method</u></p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$h</code></th><td data-label="desc"><p>the haystack</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$n</code></th><td data-label="desc"><p>the needle</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Integer</code> —<p>the string index position of the needle</p></div><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-filter-function-get-filter-function-name"><code>get-filter-function-name</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-transform-function-get-transform-function-name"><code>get-transform-function-name</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-string-function-string-contains"><code>string-contains</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-string-function-string-split"><code>string-split</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-string-function-string-replace"><code>string-replace</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://sass-lang.com/documentation/Sass/Script/Functions.html#str_index-instance_method">SassLang str-index docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="types-string-function-string-insert"><h3 class="item__heading"><a class="item__name" href="#function-string-insert">string-insert</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function string-insert($s, $i, $p) {
@return str-insert($s, $i, $p);
}" data-collapsed="@function string-insert($s, $i, $p) { ... }"><code>@function string-insert($s, $i, $p) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Inserts string $i in string $s at $p position<br><br><u>Note: aliases the native str-insert method</u></p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$s</code></th><td data-label="desc"><p>the string to modify</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$i</code></th><td data-label="desc"><p>the string to insert into</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$p</code></th><td data-label="desc"><p>the position index to use for insertion</p></td><td data-label="type"><code>Number</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>String</code> —<p>the new string</p></div><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://sass-lang.com/documentation/Sass/Script/Functions.html#str_insert-instance_method">SassLang str-insert docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="types-string-function-string-slice"><h3 class="item__heading"><a class="item__name" href="#function-string-slice">string-slice</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function string-slice($s, $from: 1, $to: -1) {
@return str-slice($s, $from, $to);
}" data-collapsed="@function string-slice($s, $from: 1, $to: -1) { ... }"><code>@function string-slice($s, $from: 1, $to: -1) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Extracts a sub string from a string between from & to position indexes,<br>if to position index is not specified (null), will be between from & the end of the string<br><br><u>Note: aliases the native str-slice method</u></p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$s</code></th><td data-label="desc"><p>the string</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$from</code></th><td data-label="desc"><p>the from position index</p></td><td data-label="type"><code>String</code></td><td data-label="default"><code>1</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$to</code></th><td data-label="desc"><p>the to position index</p></td><td data-label="type"><code>String</code></td><td data-label="default"><code>-1</code></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>String</code> —<p>the sub string needle</p></div><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-filter-function-get-filter-function-name"><code>get-filter-function-name</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-transform-function-get-transform-function-name"><code>get-transform-function-name</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-string-function-string-starts-with"><code>string-starts-with</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-string-function-string-ends-with"><code>string-ends-with</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-string-function-string-split"><code>string-split</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-string-function-string-replace"><code>string-replace</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-url-function-is-url"><code>is-url</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://sass-lang.com/documentation/Sass/Script/Functions.html#str_slice-instance_method">SassLang str-slice docs</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="types-string-function-string-starts-with"><h3 class="item__heading"><a class="item__name" href="#function-string-starts-with">string-starts-with</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function string-starts-with($h, $n) {
@if is-string($h) and is-string($n) {
@return string-slice($h, 1, string-length($n))==$n;
}
@warn '`haystack: #{$h}` and `needle: #{$n}` are not valid strings';
@return false;
}" data-collapsed="@function string-starts-with($h, $n) { ... }"><code>@function string-starts-with($h, $n) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if a string starts with another string.</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$h</code></th><td data-label="desc"><p>the haystack</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$n</code></th><td data-label="desc"><p>the needle</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if the string starts with the needle</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-string-function-is-string"><code>is-string</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-string-function-string-length"><code>string-length</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-string-function-string-slice"><code>string-slice</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-animation-function-is-animation-timing-function"><code>is-animation-timing-function</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-calc-length"><code>is-calc-length</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-url-function-has-url-function"><code>has-url-function</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-url-function-is-url"><code>is-url</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="types-string-function-string-contains"><h3 class="item__heading"><a class="item__name" href="#function-string-contains">string-contains</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function string-contains($h, $n) {
@if is-string($h) and is-string($n) {
@return string-index($h, $n) > 0;
}
@warn '`haystack: #{$h}` and `needle: #{$n}` are not valid strings';
@return false;
}" data-collapsed="@function string-contains($h, $n) { ... }"><code>@function string-contains($h, $n) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if a string contains another string.</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$h</code></th><td data-label="desc"><p>the haystack</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$n</code></th><td data-label="desc"><p>the needle</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if the string contains the needle</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-string-function-is-string"><code>is-string</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-string-function-string-index"><code>string-index</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-filter-function-get-filter-function-name"><code>get-filter-function-name</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-transform-function-get-transform-function-name"><code>get-transform-function-name</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-transform-function-get-transform-function-name"><code>get-transform-function-name</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-get-transition-timing-function-name"><code>get-transition-timing-function-name</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-get-transition-timing-function-name"><code>get-transition-timing-function-name</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="types-string-function-string-ends-with"><h3 class="item__heading"><a class="item__name" href="#function-string-ends-with">string-ends-with</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function string-ends-with($h, $n) {
@if is-string($h) and is-string($n) {
$h-length: string-length($h);
$n-length: string-length($n);
@return string-slice($h, $h-length - $n-length + 1)==$n;
}
@warn '`haystack: #{$h}` and `needle: #{$n}` are not valid strings';
@return false;
}" data-collapsed="@function string-ends-with($h, $n) { ... }"><code>@function string-ends-with($h, $n) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if a string ends with another string.</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$h</code></th><td data-label="desc"><p>the haystack</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$n</code></th><td data-label="desc"><p>the needle</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if the string ends with the needle</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-string-function-is-string"><code>is-string</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-string-function-string-length"><code>string-length</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-string-function-string-slice"><code>string-slice</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#types-common-function-is-calc-length"><code>is-calc-length</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-url-function-has-url-function"><code>has-url-function</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="types-string-function-string-split"><h3 class="item__heading"><a class="item__name" href="#function-string-split">string-split</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function string-split($s, $sep: '.') {
$split: ();
$i: string-index($s, $sep);
@while $i!=null {
$item: string-slice($s, 1, $i - 1);
$split: array-concat($split, $item);
$s: string-slice($s, $i + string-length($sep));
$i: string-index($s, $sep);
}
$split: array-concat($split, $s);
@return $split;
}" data-collapsed="@function string-split($s, $sep: '.') { ... }"><code>@function string-split($s, $sep: '.') { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Splits a string in an array/list using the specified separator</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$s</code></th><td data-label="desc"><p>the string to split</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$sep</code></th><td data-label="desc"><p>the separator</p></td><td data-label="type"><code>String</code></td><td data-label="default"><code>'.'</code></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>List</code> or <code>Array</code> —<p>the splitted array</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-string-function-string-length"><code>string-length</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-concat"><code>array-concat</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-string-function-string-index"><code>string-index</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-string-function-string-slice"><code>string-slice</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#types-object-function-get"><code>get</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-object-function-set"><code>set</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="types-string-function-string-replace"><h3 class="item__heading"><a class="item__name" href="#function-string-replace">string-replace</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function string-replace($h, $n, $r: '') {
$i: string-index($h, $n);
@if $i {
@return string-slice($h, 1, $i - 1) + $r + string-replace(string-slice($h, $i + string-length($n)), $n, $r);
}
@return $h;
}" data-collapsed="@function string-replace($h, $n, $r: '') { ... }"><code>@function string-replace($h, $n, $r: '') { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Replaces all the occurrencies of a string inside another string with the specified value</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$h</code></th><td data-label="desc"><p>the haystack</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$n</code></th><td data-label="desc"><p>the needle</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$r</code></th><td data-label="desc"><p>the string to use for replacement</p></td><td data-label="type"><code>String</code></td><td data-label="default"><code>''</code></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>String</code> —<p>the updated string</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-string-function-string-index"><code>string-index</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-string-function-string-length"><code>string-length</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-string-function-string-slice"><code>string-slice</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#types-common-function-get-calc-length-expression"><code>get-calc-length-expression</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section></section><section class="main__section"><h1 class="main__heading" id="types-time"><div class="container">Types - Time</div></h1><section class="main__sub-section" id="types-time-function"><h2 class="main__heading--secondary"><div class="container">functions</div></h2><section class="main__item container item" id="types-time-function-is-time"><h3 class="item__heading"><a class="item__name" href="#function-is-time">is-time</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-time($t) {
@return is-number($t) and array-contains($time-units, unit($t));
}" data-collapsed="@function is-time($t) { ... }"><code>@function is-time($t) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if a value has a supported time unit</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$t</code></th><td data-label="desc"><p>the value to check</p></td><td data-label="type"><code>Any</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is a time value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-number-function-is-number"><code>is-number</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-array-function-array-contains"><code>array-contains</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#types-time-variable-time-units"><code>time-units</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-animation-function-is-animation-time"><code>is-animation-time</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-transition-function-is-transition-time"><code>is-transition-time</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section><section class="main__sub-section" id="types-time-variable"><h2 class="main__heading--secondary"><div class="container">variables</div></h2><section class="main__item container item" id="types-time-variable-time-units"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-time-units">time-units</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$time-units: (s, ms);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Time units supported</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#types-time-function-is-time"><code>is-time</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section></section><section class="main__section"><h1 class="main__heading" id="types-url"><div class="container">Types - URL</div></h1><section class="main__sub-section" id="types-url-function"><h2 class="main__heading--secondary"><div class="container">functions</div></h2><section class="main__item container item" id="types-url-function-has-url-function"><h3 class="item__heading"><a class="item__name" href="#function-has-url-function">has-url-function</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function has-url-function($u) {
@if is-string($u) {
@return string-starts-with($u, 'url("') and string-ends-with($u, '")');
}
@warn '`url: #{$u}` is not a valid string';
@return false;
}" data-collapsed="@function has-url-function($u) { ... }"><code>@function has-url-function($u) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if a string is an url function string</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$u</code></th><td data-label="desc"><p>the value to check</p></td><td data-label="type"><code>Any</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if the url value has the url function inside</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-string-function-is-string"><code>is-string</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-string-function-string-starts-with"><code>string-starts-with</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-string-function-string-ends-with"><code>string-ends-with</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#types-url-function-is-url"><code>is-url</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-url-function-inspect-url"><code>inspect-url</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="types-url-function-is-url"><h3 class="item__heading"><a class="item__name" href="#function-is-url">is-url</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function is-url($u) {
@if is-string($u) {
$url: $u;
@if has-url-function($url) {
$url: string-slice($u, 6, string-length($u) - 2);
}
@if string-starts-with($url, '../') or string-starts-with($url, '/') or string-starts-with($url, 'http') or string-starts-with($url, 'data:') {
@return true;
}
}
@warn '`url: #{$u}` is not a valid string';
@return false;
}" data-collapsed="@function is-url($u) { ... }"><code>@function is-url($u) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Checks if a string is an url</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$u</code></th><td data-label="desc"><p>the value to check</p></td><td data-label="type"><code>Any</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>true if is an url</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-string-function-is-string"><code>is-string</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-url-function-has-url-function"><code>has-url-function</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-string-function-string-slice"><code>string-slice</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-string-function-string-length"><code>string-length</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-string-function-string-starts-with"><code>string-starts-with</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#mixins-background-function-is-background-image"><code>is-background-image</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#mixins-cursor-function-is-cursor"><code>is-cursor</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#types-url-function-inspect-url"><code>inspect-url</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section><section class="main__item container item" id="types-url-function-inspect-url"><h3 class="item__heading"><a class="item__name" href="#function-inspect-url">inspect-url</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function inspect-url($u) {
@if is-url($u) {
$url: $u;
@if not has-url-function($url) {
$url: url('#{$url}');
}
@return $url;
}
@return false;
}" data-collapsed="@function inspect-url($u) { ... }"><code>@function inspect-url($u) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Adds the url function to an url string if is missing</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$u</code></th><td data-label="desc"><p>the value to check</p></td><td data-label="type"><code>Any</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Boolean</code> —<p>the fixed url string value</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-url-function-is-url"><code>is-url</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#types-url-function-has-url-function"><code>has-url-function</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixins-background-mixin-background"><code>background</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>blackmirror1980</p></li></ul></section></section></section><footer class="footer" role="contentinfo"><div class="container"><div class="footer__project-info project-info"><!-- Name and URL --> <a class="project-info__name" href="https://blackmirror1980.github.io/flavor-scss">Flavor-scss</a><!-- Version --> <span class="project-info__version">- v1.10.0</span><!-- License --> <span class="project-info__license">, under MIT</span></div><a class="footer__watermark" href="http://sassdoc.com"><img src="assets/images/logo_light_inline.svg" alt="SassDoc Logo"></a></div></footer></article><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script>window.jQuery || document.write('<script src="assets/js/vendor/jquery.min.js"><\/script>')</script><script src="assets/js/main.min.js"></script></body></html>