@onenexus/cell

<!doctype html><html lang="en"><head><meta charset="utf-8"><title>@onenexus/cell - v1.0.0-beta.21</title><link rel="stylesheet" href="assets/css/main.css"><link href="http://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"><meta property="og:title" content="@onenexus/cell - SassDoc"><meta property="og:type" content="website"><meta property="og:description" content="<p>Style BEM DOM elements using Sass</p> "><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://github.com/One-Nexus/Cell">@onenexus/cell - v1.0.0-beta.21</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="undefined"><a href="#undefined">General</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="undefined-mixin"><a href="#undefined-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-name="display" data-type="mixin"><a href="#mixin-display">display</a></li><li class="sidebar__item sassdoc__item" data-name="position" data-type="mixin"><a href="#mixin-position">position</a></li><li class="sidebar__item sassdoc__item" data-name="visibility" data-type="mixin"><a href="#mixin-visibility">visibility</a></li><li class="sidebar__item sassdoc__item" data-name="component" data-type="mixin"><a href="#mixin-component">component</a></li><li class="sidebar__item sassdoc__item" data-name="sub-component" data-type="mixin"><a href="#mixin-sub-component">sub-component</a></li><li class="sidebar__item sassdoc__item" data-name="components" data-type="mixin"><a href="#mixin-components">components</a></li><li class="sidebar__item sassdoc__item" data-name="context" data-type="mixin"><a href="#mixin-context">context</a></li><li class="sidebar__item sassdoc__item" data-name="extend" data-type="mixin"><a href="#mixin-extend">extend</a></li><li class="sidebar__item sassdoc__item" data-name="modifier" data-type="mixin"><a href="#mixin-modifier">modifier</a></li><li class="sidebar__item sassdoc__item" data-name="modifiers" data-type="mixin"><a href="#mixin-modifiers">modifiers</a></li><li class="sidebar__item sassdoc__item" data-name="is" data-type="mixin"><a href="#mixin-is">is</a></li><li class="sidebar__item sassdoc__item" data-name="module" data-type="mixin"><a href="#mixin-module">module</a></li><li class="sidebar__item sassdoc__item" data-name="module-content" data-type="mixin"><a href="#mixin-module-content">module-content</a></li><li class="sidebar__item sassdoc__item" data-name="modules" data-type="mixin"><a href="#mixin-modules">modules</a></li><li class="sidebar__item sassdoc__item" data-name="combine-modifiers" data-type="mixin"><a href="#mixin-combine-modifiers">combine-modifiers</a></li><li class="sidebar__item sassdoc__item" data-name="extend-modifiers" data-type="mixin"><a href="#mixin-extend-modifiers">extend-modifiers</a></li><li class="sidebar__item sassdoc__item" data-name="option" data-type="mixin"><a href="#mixin-option">option</a></li><li class="sidebar__item sassdoc__item" data-name="pseudo-state" data-type="mixin"><a href="#mixin-pseudo-state">pseudo-state</a></li><li class="sidebar__item sassdoc__item" data-name="hover" data-type="mixin"><a href="#mixin-hover">hover</a></li><li class="sidebar__item sassdoc__item" data-name="value" data-type="mixin"><a href="#mixin-value">value</a></li><li class="sidebar__item sassdoc__item" data-name="wrapper" data-type="mixin"><a href="#mixin-wrapper">wrapper</a></li><li class="sidebar__item sassdoc__item" data-name="group" data-type="mixin"><a href="#mixin-group">group</a></li><li class="sidebar__item sassdoc__item" data-name="parse-cq" data-type="mixin"><a href="#mixin-parse-cq">parse-cq</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="undefined-function"><a href="#undefined-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-name="create-config" data-type="function"><a href="#function-create-config">create-config</a></li><li class="sidebar__item sassdoc__item" data-name="eval-config" data-type="function"><a href="#function-eval-config">eval-config</a></li><li class="sidebar__item sassdoc__item" data-name="smart-config" data-type="function"><a href="#function-smart-config">smart-config</a></li><li class="sidebar__item sassdoc__item" data-name="create-selector-from-context" data-type="function"><a href="#function-create-selector-from-context">create-selector-from-context</a></li><li class="sidebar__item sassdoc__item" data-name="generate-chunk" data-type="function"><a href="#function-generate-chunk">generate-chunk</a></li><li class="sidebar__item sassdoc__item" data-name="enabled" data-type="function"><a href="#function-enabled">enabled</a></li><li class="sidebar__item sassdoc__item" data-name="get-module-name" data-type="function"><a href="#function-get-module-name">get-module-name</a></li><li class="sidebar__item sassdoc__item" data-name="get-param" data-type="function"><a href="#function-get-param">get-param</a></li><li class="sidebar__item sassdoc__item" data-name="merge-css-maps" data-type="function"><a href="#function-merge-css-maps">merge-css-maps</a></li><li class="sidebar__item sassdoc__item" data-name="module-tree" data-type="function"><a href="#function-module-tree">module-tree</a></li><li class="sidebar__item sassdoc__item" data-name="option" data-type="function"><a href="#function-option">option</a></li><li class="sidebar__item sassdoc__item" data-name="remove-junk" data-type="function"><a href="#function-remove-junk">remove-junk</a></li><li class="sidebar__item sassdoc__item" data-name="remove-modifiers" data-type="function"><a href="#function-remove-modifiers">remove-modifiers</a></li><li class="sidebar__item sassdoc__item" data-name="selector-to-map" data-type="function"><a href="#function-selector-to-map">selector-to-map</a></li><li class="sidebar__item sassdoc__item" data-name="setting" data-type="function"><a href="#function-setting">setting</a></li><li class="sidebar__item sassdoc__item" data-name="strip-glue" data-type="function"><a href="#function-strip-glue">strip-glue</a></li><li class="sidebar__item sassdoc__item" data-name="theme" data-type="function"><a href="#function-theme">theme</a></li><li class="sidebar__item sassdoc__item" data-name="this" data-type="function"><a href="#function-this">this</a></li><li class="sidebar__item sassdoc__item" data-name="value-enabled" data-type="function"><a href="#function-value-enabled">value-enabled</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="undefined-variable"><a href="#undefined-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-name="css-properties" data-type="variable"><a href="#variable-css-properties">css-properties</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"><h1 class="main__heading" id="undefined"><div class="container">General</div></h1><section class="main__sub-section" id="undefined-mixin"><h2 class="main__heading--secondary"><div class="container">mixins</div></h2><section class="main__item container item" id="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($context, $default, $value) { display: $default; @include context($context...) { display: $value; } }" data-collapsed="@mixin display($context, $default, $value) { ... }"><code>@mixin display($context, $default, $value) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Cell Atom - Display property</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter</span>Name</th><th scope="col"><span class="visually-hidden">parameter</span>Description</th><th scope="col"><span class="visually-hidden">parameter</span>Type</th><th scope="col"><span class="visually-hidden">parameter</span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$context</code></th><td data-label="desc"><p>The desired context/condition</p></td><td data-label="type"><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>$default</code></th><td data-label="desc"><p>The default value to use when the context is not met</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>$value</code></th><td data-label="desc"><p>The value to use when the context is met</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">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixin-context"><code>context</code></a></li></ul></section><section class="main__item container item" id="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($context, $default, $value) { position: $default; @include context($context...) { position: $value; } }" data-collapsed="@mixin position($context, $default, $value) { ... }"><code>@mixin position($context, $default, $value) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Cell Atom - Position property</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter</span>Name</th><th scope="col"><span class="visually-hidden">parameter</span>Description</th><th scope="col"><span class="visually-hidden">parameter</span>Type</th><th scope="col"><span class="visually-hidden">parameter</span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$context</code></th><td data-label="desc"><p>The desired context/condition</p></td><td data-label="type"><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>$default</code></th><td data-label="desc"><p>The default value to use when the context is not met</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>$value</code></th><td data-label="desc"><p>The value to use when the context is met</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">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixin-context"><code>context</code></a></li></ul></section><section class="main__item container item" id="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($context, $default, $value) { visibility: $default; @include context($context...) { visibility: $value; } }" data-collapsed="@mixin visibility($context, $default, $value) { ... }"><code>@mixin visibility($context, $default, $value) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Cell Atom - Visibility property</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter</span>Name</th><th scope="col"><span class="visually-hidden">parameter</span>Description</th><th scope="col"><span class="visually-hidden">parameter</span>Type</th><th scope="col"><span class="visually-hidden">parameter</span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$context</code></th><td data-label="desc"><p>The desired context/condition</p></td><td data-label="type"><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>$default</code></th><td data-label="desc"><p>The default value to use when the context is not met</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>$value</code></th><td data-label="desc"><p>The value to use when the context is met</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">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixin-context"><code>context</code></a></li></ul></section><section class="main__item container item" id="mixin-component"><h3 class="item__heading"><a class="item__name" href="#mixin-component">component</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin component($components, $content, $sub-component, $glue, $cascade) { $this: &; $module-map: selector-to-map($this); $selectors: '[class*="#{$module}#{$glue}"]'; $namespace: map-get($module-map, 'module'); @if str-index($namespace, '%') == 1 { $namespace: $module; } @if $sub-component { $namespace: nth(module-tree(&), length(module-tree(&))); } @if $components { $selectors: (); @each $component in $components { $selector: '.#{$namespace}#{$glue}#{$component}, [class*="#{$namespace}#{$glue}#{$component}#{$modifierGlue}"]'; @if not $cascade { $selector: '> #{$selector}'; } $selectors: join($selectors, $selector, comma); } } $parents: (); @each $selector in & { // spoof the selector into a list $selector: selector-parse(str-replace(inspect($selector), ' ', ', ')); $is-modifier: str-index(inspect(nth($selector, length($selector))), '[class*="#{$modifierGlue}'); $is-pseudo-state: str-index(inspect(nth($selector, length($selector))), ':'); // if the last item isn't a modifier or pseudo state, remove it @if not ($is-modifier or $is-pseudo-state) { $selector: list-remove($selector, nth($selector, length($selector))); } @if length($selector) == 1 { $selector: nth($selector, 1); } // Re-build the parent selector $parents: append($parents, str-replace(inspect($selector), ', ', ' '), comma); } $parents: list-remove-duplicates($parents); @if length($parents) == 1 { $parents: nth($parents, 1); } @if ($parents == '()') { @at-root #{$selectors} { @content; @include parse-cq($content); } } @else { @at-root #{$parents} { #{$selectors} { @content; @include parse-cq($content); } } } }" data-collapsed="@mixin component($components, $content, $sub-component, $glue, $cascade) { ... }"><code>@mixin component($components, $content, $sub-component, $glue, $cascade) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Create a component based off the main module</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter</span>Name</th><th scope="col"><span class="visually-hidden">parameter</span>Description</th><th scope="col"><span class="visually-hidden">parameter</span>Type</th><th scope="col"><span class="visually-hidden">parameter</span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$components</code></th><td data-label="desc"><p>The component or components to be used</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><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>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>$sub-component</code></th><td data-label="desc">—<span class="visually-hidden">none</span></td><td data-label="type"><code>Bool</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>$glue</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">—<span class="visually-hidden">none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$cascade</code></th><td data-label="desc">—<span class="visually-hidden">none</span></td><td data-label="type"><code>Bool</code></td><td data-label="default">—<span class="visually-hidden">none</span></td></tr></tbody></table><h3 class="item__sub-heading">Content</h3><p>This mixin allows extra content to be passed (through the <code>@content</code> directive).<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="#mixin-parse-cq"><code>parse-cq</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixin-parse-cq"><code>parse-cq</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#function-selector-to-map"><code>selector-to-map</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#function-module-tree"><code>module-tree</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#function-module-tree"><code>module-tree</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="#mixin-sub-component"><code>sub-component</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-components"><code>components</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-parse-cq"><code>parse-cq</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-parse-cq"><code>parse-cq</code></a></li></ul></p></section><section class="main__item container item" id="mixin-sub-component"><h3 class="item__heading"><a class="item__name" href="#mixin-sub-component">sub-component</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin sub-component($components, $content, $glue) { @include component($components, $content, true, $glue) { @content; } }" data-collapsed="@mixin sub-component($components, $content, $glue) { ... }"><code>@mixin sub-component($components, $content, $glue) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Alis for <code>component</code> mixin with $sub-component: 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>$components</code></th><td data-label="desc">—<span class="visually-hidden">none</span></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><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>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>$glue</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">—<span class="visually-hidden">none</span></td></tr></tbody></table><h3 class="item__sub-heading">Content</h3><p>This mixin allows extra content to be passed (through the <code>@content</code> directive).<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="#mixin-component"><code>component</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="#mixin-parse-cq"><code>parse-cq</code></a></li></ul></p></section><section class="main__item container item" id="mixin-components"><h3 class="item__heading"><a class="item__name" href="#mixin-components">components</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin components() { @include component($args...) { @content; } }" data-collapsed="@mixin components() { ... }"><code>@mixin components() { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Alias for component() mixin</p></div><h3 class="item__sub-heading">Parameters</h3><p>None.</p><h3 class="item__sub-heading">Content</h3><p>This mixin allows extra content to be passed (through the <code>@content</code> directive).<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="#mixin-component"><code>component</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p><a href="http://twitter.com/esr360">@esr360</a></p></li></ul></p></section><section class="main__item container item" id="mixin-context"><h3 class="item__heading"><a class="item__name" href="#mixin-context">context</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin context($context...) { $selector: create-selector-from-context($context...); $scope: &; @at-root #{$selector} { #{$scope} { @content; } } }" data-collapsed="@mixin context($context...) { ... }"><code>@mixin context($context...) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Apply styles to a component within a certain context</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter</span>Name</th><th scope="col"><span class="visually-hidden">parameter</span>Description</th><th scope="col"><span class="visually-hidden">parameter</span>Type</th><th scope="col"><span class="visually-hidden">parameter</span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$context</code></th><td data-label="desc">—<span class="visually-hidden">none</span></td><td data-label="type"><code>Arglist</code></td><td data-label="default">—<span class="visually-hidden">none</span></td></tr></tbody></table><h3 class="item__sub-heading">Content</h3><p>This mixin allows extra content to be passed (through the <code>@content</code> directive).<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="#function-create-selector-from-context"><code>create-selector-from-context</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="#mixin-display"><code>display</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-position"><code>position</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-visibility"><code>visibility</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-parse-cq"><code>parse-cq</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-parse-cq"><code>parse-cq</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-parse-cq"><code>parse-cq</code></a></li></ul></p></section><section class="main__item container item" id="mixin-extend"><h3 class="item__heading"><a class="item__name" href="#mixin-extend">extend</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin extend($modifiers: null, $parent: null, $core: false) { $namespaced-parent: if($moduleNamespace and $parent, $moduleNamespace + $parent, $parent); @if $core or not $modifiers { @extend .#{$namespaced-parent}; } @each $modifier in $modifiers { @if type-of($modifier) == 'string' { $selector: if($parent, $namespaced-parent, $module); @extend [class*="#{$selector}#{$modifierGlue}"][class*="#{$modifierGlue}#{$modifier}"]; } @else if type-of($modifier) == 'list' { $namespaced-selector: ('[class*="#{$namespaced-parent}#{$modifierGlue}"]'); $module-selector: ('[class*="#{$module}#{$modifierGlue}"]'); $selectors: if($parent, $namespaced-selector, $module-selector); @each $item in $modifier { $selectors: join($selectors, '[class*="#{$modifierGlue}#{$item}"]', comma); } @extend #{$selectors}; } } }" data-collapsed="@mixin extend($modifiers: null, $parent: null, $core: false) { ... }"><code>@mixin extend($modifiers: null, $parent: null, $core: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Extend one or more modifiers of a module to create a new modifier combining the ones you pass</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter</span>Name</th><th scope="col"><span class="visually-hidden">parameter</span>Description</th><th scope="col"><span class="visually-hidden">parameter</span>Type</th><th scope="col"><span class="visually-hidden">parameter</span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$modifiers</code></th><td data-label="desc"><p>The modifiers which you wish to combine</p></td><td data-label="type"><code>String</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>$parent</code></th><td data-label="desc"><p>The parent module if not current one</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>$core</code></th><td data-label="desc"><p>Extend the core '.module' styles?</p></td><td data-label="type"><code>Bool</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-combine-modifiers"><code>combine-modifiers</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-extend-modifiers"><code>extend-modifiers</code></a></li></ul></section><section class="main__item container item" id="mixin-modifier"><h3 class="item__heading"><a class="item__name" href="#mixin-modifier">modifier</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin modifier($modifiers, $special: null, $glue: '--', $module) { $scope: &; @if str-index(inspect(&), '.#{$module}') { $scope: (); @for $i from 1 through length(&) { @if $i % 2 == 0 { $scope: append($scope, nth(&, $i), comma); } } } $modifiers-chunk: (); @each $modifier in $modifiers { @if $special == 'not' { $modifiers-chunk: join($modifiers-chunk, ':not([class*="#{$glue}#{$modifier}"])', comma); } @else { $modifiers-chunk: join($modifiers-chunk, '[class*="#{$glue}#{$modifier}"]', comma); } $selector: #{$scope}#{$modifiers-chunk}; // pseudo-elements must be at the end @if str-index($selector, ':before') and str-index($selector, ':before') != (str-length($selector) - 6) { $selector: str-replace($selector, ':before', '') + ':before'; } @if str-index($selector, ':after') and str-index($selector, ':after') != (str-length($selector) - 5) { $selector: str-replace($selector, ':after', '') + ':after'; } @at-root #{$selector} { @content; } } }" data-collapsed="@mixin modifier($modifiers, $special: null, $glue: '--', $module) { ... }"><code>@mixin modifier($modifiers, $special: null, $glue: '--', $module) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Create a modifier for a module</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter</span>Name</th><th scope="col"><span class="visually-hidden">parameter</span>Description</th><th scope="col"><span class="visually-hidden">parameter</span>Type</th><th scope="col"><span class="visually-hidden">parameter</span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$modifiers</code></th><td data-label="desc"><p>The modifier(s) which you wish to create</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><tr class="item__parameter"><th scope="row" data-label="name"><code>$special</code></th><td data-label="desc"><p>Add special contextual options to modifier</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>$glue</code></th><td data-label="desc"><p>Desired modifier separator/glue</p></td><td data-label="type"><code>Bool</code></td><td data-label="default"><code>'--'</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$module</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">—<span class="visually-hidden">none</span></td></tr></tbody></table><h3 class="item__sub-heading">Content</h3><p>This mixin allows extra content to be passed (through the <code>@content</code> directive).<h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-modifiers"><code>modifiers</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-is"><code>is</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-combine-modifiers"><code>combine-modifiers</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-option"><code>option</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-value"><code>value</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-value"><code>value</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-wrapper"><code>wrapper</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-parse-cq"><code>parse-cq</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-parse-cq"><code>parse-cq</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-parse-cq"><code>parse-cq</code></a></li></ul></p></section><section class="main__item container item" id="mixin-modifiers"><h3 class="item__heading"><a class="item__name" href="#mixin-modifiers">modifiers</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin modifiers() { @include modifier($args...) { @content; } }" data-collapsed="@mixin modifiers() { ... }"><code>@mixin modifiers() { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Alias for modifier() mixin</p></div><h3 class="item__sub-heading">Parameters</h3><p>None.</p><h3 class="item__sub-heading">Content</h3><p>This mixin allows extra content to be passed (through the <code>@content</code> directive).<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="#mixin-modifier"><code>modifier</code></a></li></ul></p></section><section class="main__item container item" id="mixin-is"><h3 class="item__heading"><a class="item__name" href="#mixin-is">is</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin is() { @include modifier($args...) { @content; } }" data-collapsed="@mixin is() { ... }"><code>@mixin is() { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Alias for modifier() mixin</p></div><h3 class="item__sub-heading">Parameters</h3><p>None.</p><h3 class="item__sub-heading">Content</h3><p>This mixin allows extra content to be passed (through the <code>@content</code> directive).<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="#mixin-modifier"><code>modifier</code></a></li></ul></p></section><section class="main__item container item" id="mixin-module"><h3 class="item__heading"><a class="item__name" href="#mixin-module">module</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin module($modules, $content) { $config: () !default; @if type-of($modules) == 'map' { $modules: if(variable-exists('config'), (map-get($config, 'name')), ''); } @if ($moduleNamespace) { $modules: $moduleNamespace + $modules; } // disable any output $disable-output: if(variable-exists('disable-output'), $disable-output, false); @if variable-exists('config') and map-has-key($config, 'disable-output') { $disable-output: map-get($config, 'disable-output'); } // @TODO this needs to identify if nested within itself, not nested in general $nested: &; // We are creating a root module, so create a global variable @if not $nested { $module: $modules !global; $this: $module !global; } $selectors: (); @each $module in $modules { $selectors: join($selectors, '.#{$module}', comma); $selectors: join($selectors, '[class*="#{$module}#{$modifierGlue}"]', comma); } $targetExists: variable-exists('config') and map-has-key($config, 'target'); // @TODO tidy up how $target is used here and in $modifier - also probably won't work for component() $target: if($targetExists, ('module': $module, 'target': map-get($config, 'target')), false) !global; @if not $disable-output { #{$selectors} { @if not $nested { @include module-content($modules, $config, $target); } @content; @include parse-cq($content); } } }" data-collapsed="@mixin module($modules, $content) { ... }"><code>@mixin module($modules, $content) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Create a new module</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter</span>Name</th><th scope="col"><span class="visually-hidden">parameter</span>Description</th><th scope="col"><span class="visually-hidden">parameter</span>Type</th><th scope="col"><span class="visually-hidden">parameter</span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$modules</code></th><td data-label="desc"><p>The module(s) you wish to create</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><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>Map</code></td><td data-label="default">—<span class="visually-hidden">none</span></td></tr></tbody></table><h3 class="item__sub-heading">Content</h3><p>This mixin allows extra content to be passed (through the <code>@content</code> directive).<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="#mixin-module-content"><code>module-content</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixin-parse-cq"><code>parse-cq</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="#mixin-modules"><code>modules</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-wrapper"><code>wrapper</code></a></li></ul></p></section><section class="main__item container item" id="mixin-module-content"><h3 class="item__heading"><a class="item__name" href="#mixin-module-content">module-content</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin module-content($module, $config, $target) { @include extend-modifiers; @include combine-modifiers; @if variable-exists('config') and $outputCSSFromConfig { @if $module == map-get($config, 'name') or $target { @if type-of($target) == 'map' and map-get($target, 'module') == $module { #{map-get($target, 'target')} { @include parse-cq($config); } } @else { @include parse-cq($config); } } } }" data-collapsed="@mixin module-content($module, $config, $target) { ... }"><code>@mixin module-content($module, $config, $target) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Render a module's 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>$module</code></th><td data-label="desc">—<span class="visually-hidden">none</span></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><tr class="item__parameter"><th scope="row" data-label="name"><code>$config</code></th><td data-label="desc">—<span class="visually-hidden">none</span></td><td data-label="type"><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>$target</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">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixin-extend-modifiers"><code>extend-modifiers</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixin-combine-modifiers"><code>combine-modifiers</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixin-parse-cq"><code>parse-cq</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixin-parse-cq"><code>parse-cq</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="#mixin-module"><code>module</code></a></li></ul></section><section class="main__item container item" id="mixin-modules"><h3 class="item__heading"><a class="item__name" href="#mixin-modules">modules</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin modules($modules) { @include module($modules) { @content; } }" data-collapsed="@mixin modules($modules) { ... }"><code>@mixin modules($modules) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Alias for module() 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>$modules</code></th><td data-label="desc"><p>The module(s) you wish to create</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">Content</h3><p>This mixin allows extra content to be passed (through the <code>@content</code> directive).<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="#mixin-module"><code>module</code></a></li></ul></p></section><section class="main__item container item" id="mixin-combine-modifiers"><h3 class="item__heading"><a class="item__name" href="#mixin-combine-modifiers">combine-modifiers</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin combine-modifiers($styles) { @if variable-exists('config') and $combine { @each $new-modifier, $target-modifiers in $combine { @include modifier($new-modifier) { @include extend(($target-modifiers)); } } } }" data-collapsed="@mixin combine-modifiers($styles) { ... }"><code>@mixin combine-modifiers($styles) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Combine modifiers into a new, single modifier</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter</span>Name</th><th scope="col"><span class="visually-hidden">parameter</span>Description</th><th scope="col"><span class="visually-hidden">parameter</span>Type</th><th scope="col"><span class="visually-hidden">parameter</span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$styles</code></th><td data-label="desc"><p>The CSS styles to output</p></td><td data-label="type"><code>Map</code></td><td data-label="default">—<span class="visually-hidden">none</span></td></tr></tbody></table><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="#mixin-modifier"><code>modifier</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[mixin]</span> <a href="#mixin-extend"><code>extend</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="#mixin-module-content"><code>module-content</code></a></li></ul></section><section class="main__item container item" id="mixin-extend-modifiers"><h3 class="item__heading"><a class="item__name" href="#mixin-extend-modifiers">extend-modifiers</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin extend-modifiers($styles) { @if variable-exists('config') and $modifiers { @include extend(($modifiers)); } }" data-collapsed="@mixin extend-modifiers($styles) { ... }"><code>@mixin extend-modifiers($styles) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Extend modifiers into the naked module</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter</span>Name</th><th scope="col"><span class="visually-hidden">parameter</span>Description</th><th scope="col"><span class="visually-hidden">parameter</span>Type</th><th scope="col"><span class="visually-hidden">parameter</span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$styles</code></th><td data-label="desc"><p>The CSS styles to output</p></td><td data-label="type"><code>Map</code></td><td data-label="default">—<span class="visually-hidden">none</span></td></tr></tbody></table><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="#mixin-extend"><code>extend</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="#mixin-module-content"><code>module-content</code></a></li></ul></section><section class="main__item container item" id="mixin-option"><h3 class="item__heading"><a class="item__name" href="#mixin-option">option</a></h3><div class="item__code-wrapper"><pre class="item__c