Skip to content

Commit

Permalink
fix: address variable use in inset mixin
Browse files Browse the repository at this point in the history
  • Loading branch information
@blackfalcon
blackfalcon committed Jan 8, 2020
1 parent 80bd965 commit aa138e4
Show file tree
Hide file tree
Showing 3 changed files with 12 additions and 11 deletions.
8 changes: 4 additions & 4 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -671,7 +671,7 @@
float: right $important;
}</code>" data-collapsed="#{$scope}.#{$prefix}util_floatRight { ... }"><code>#{$scope}.#{$prefix}util_floatRight { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Utility class to set elements to float <code>right</code></p><p><a href="/#utility-variable-important">Manage</a> <code>!important</code> flag.</p><p><a href="/#scope-prefix-variable">Manage</a> <code>$scope</code> and <code>$prefix</code> options.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Default selector(s)</p></div><pre class="example__code language-scss"><code>.util_floatRight {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Selector(s) when $scope: true;</p></div><pre class="example__code language-scss"><code>.auro .util_floatRight {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Selector(s) when $prefix: true;</p></div><pre class="example__code language-scss"><code>.auro_util_floatRight {}</code></pre></div><div class="item__example example"><div class="example__description"><p>import mixin file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties&quot;;</code></pre></div></section><section class="main__item container item" id="utility-layout-css-#{$scope}.#{$prefix}util_margin--auto"><h3 class="item__heading"><a class="item__name" href="#css-#{$scope}.#{$prefix}util_margin--auto">#{$scope}.#{$prefix}util_margin--auto</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>#{$scope}.#{$prefix}util_margin--auto {
margin: 0 auto $important;
}</code>" data-collapsed="#{$scope}.#{$prefix}util_margin--auto { ... }"><code>#{$scope}.#{$prefix}util_margin--auto { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Utility class to center content within a block element</p><p><a href="/#utility-variable-important">Manage</a> <code>!important</code> flag.</p><p><a href="/#scope-prefix-variable">Manage</a> <code>$scope</code> and <code>$prefix</code> options.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Default selector(s)</p></div><pre class="example__code language-scss"><code>.util_margin--auto {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Selector(s) when $scope: true;</p></div><pre class="example__code language-scss"><code>.auro .util_margin--auto {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Selector(s) when $prefix: true;</p></div><pre class="example__code language-scss"><code>.auro_util_margin--auto {}</code></pre></div><div class="item__example example"><div class="example__description"><p>import mixin file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties&quot;;</code></pre></div></section></section><section class="main__sub-section" id="utility-layout-mixin"><h2 class="main__heading--secondary"><div class="container">mixins</div></h2><section class="main__item container item" id="utility-layout-mixin-auro_inset"><h3 class="item__heading"><a class="item__name" href="#mixin-auro_inset">auro_inset</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin auro_inset($auro-inset-spacing-options: none, xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl) {
}</code>" data-collapsed="#{$scope}.#{$prefix}util_margin--auto { ... }"><code>#{$scope}.#{$prefix}util_margin--auto { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Utility class to center content within a block element</p><p><a href="/#utility-variable-important">Manage</a> <code>!important</code> flag.</p><p><a href="/#scope-prefix-variable">Manage</a> <code>$scope</code> and <code>$prefix</code> options.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Default selector(s)</p></div><pre class="example__code language-scss"><code>.util_margin--auto {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Selector(s) when $scope: true;</p></div><pre class="example__code language-scss"><code>.auro .util_margin--auto {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Selector(s) when $prefix: true;</p></div><pre class="example__code language-scss"><code>.auro_util_margin--auto {}</code></pre></div><div class="item__example example"><div class="example__description"><p>import mixin file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties&quot;;</code></pre></div></section></section><section class="main__sub-section" id="utility-layout-mixin"><h2 class="main__heading--secondary"><div class="container">mixins</div></h2><section class="main__item container item" id="utility-layout-mixin-auro_inset"><h3 class="item__heading"><a class="item__name" href="#mixin-auro_inset">auro_inset</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin auro_inset($auro-inset-directions: &quot;&quot;, --stretch, --squish, $auro-inset-spacing-options: none, xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl) {
@each $value in $values {
$map: map-keys($tokens);
$mapValue: auro_map-deep-get($tokens, #{$map}, $value);
Expand Down Expand Up @@ -705,8 +705,8 @@
}
@else {
@for $i from 1 through length($auro-inset-directions) {
$direction: nth($auro-inset-directions, $i);
@for $i from 1 through length($directions) {
$direction: nth($directions, $i);
#{$scope}.#{$prefix}util_inset#{auro_capitalize($value)}#{$direction} {
@if $direction == &#39;&#39; {
Expand All @@ -721,7 +721,7 @@
}
}
}
}" data-collapsed="@mixin auro_inset($auro-inset-spacing-options: none, xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl) { ... }"><code>@mixin auro_inset($auro-inset-spacing-options: none, xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>This mixin is designed to return a series of pre-defined selectors based on the inset spacing design spec</p><p>DO NOT execute mixin, this is already included with the import of the file dependency</p><p><strong>Dependency:</strong> <code>$npm i alaskaairux/orion-design-tokens</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>$auro-inset-spacing-options</code></th><td data-label="desc"><p>defines value applied</p></td><td data-label="type"><code>String</code></td><td data-label="default"><code>none, xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Example output css</p></div><pre class="example__code language-css"><code>.util_insetXxxs {
}" data-collapsed="@mixin auro_inset($auro-inset-directions: &quot;&quot;, --stretch, --squish, $auro-inset-spacing-options: none, xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl) { ... }"><code>@mixin auro_inset($auro-inset-directions: &quot;&quot;, --stretch, --squish, $auro-inset-spacing-options: none, xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>This mixin is designed to return a series of pre-defined selectors based on the inset spacing design spec</p><p>DO NOT execute mixin, this is already included with the import of the file dependency</p><p><strong>Dependency:</strong> <code>$npm i alaskaairux/orion-design-tokens</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>$auro-inset-directions</code></th><td data-label="desc"><p>defines value</p></td><td data-label="type"><code>String</code></td><td data-label="default"><code>&quot;&quot;, --stretch, --squish</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$auro-inset-spacing-options</code></th><td data-label="desc"><p>defines value applied</p></td><td data-label="type"><code>String</code></td><td data-label="default"><code>none, xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Example output css</p></div><pre class="example__code language-css"><code>.util_insetXxxs {
padding: 0.125rem;
}
.util_insetXxxs--stretch {
Expand Down
8 changes: 4 additions & 4 deletions scripts/testBuild.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,13 +89,13 @@ $prefix: true;

/*------------- general spacing -----------------*/
@import "./node_modules/@alaskaairux/orion-design-tokens/dist/tokens/SCSSVariableMap";
// $auro-spacing-types: inline, stack;
// $auro-spacing-options: none;
$auro-spacing-types: inline;
$auro-spacing-options: sm, md, lg;
@import "./src/utilityMixins/spacingUtility";

/*---------- inset generator ----------------*/
// $auro-inset-spacing-options: none;
// $auro-inset-directions:'';
$auro-inset-spacing-options: sm, md, lg;
$auro-inset-directions: --stretch;
@import "./src/utilityMixins/insetUtility";

@import './src/utilityClasses/responsive';
Expand Down
7 changes: 4 additions & 3 deletions src/utilityMixins/_insetUtility.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ $auro-inset-spacing-options: $auro-spacing-options !default;
///
/// **Dependency:** `$npm i alaskaairux/orion-design-tokens`
/// @group utility-layout
/// @param {String} $auro-inset-directions ["", --stretch, --squish] defines value
/// @param {String} $auro-inset-spacing-options [none, xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl] defines value applied
/// @example css - Example output css
/// .util_insetXxxs {
Expand All @@ -39,7 +40,7 @@ $auro-inset-spacing-options: $auro-spacing-options !default;
/// @import "./node_modules/@alaskaairux/orion-design-tokens/dist/tokens/SCSSVariableMap";
/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityMixins/insetUtility";

@mixin auro_inset($values: $auro-inset-spacing-options) {
@mixin auro_inset($directions: $auro-inset-directions, $values: $auro-inset-spacing-options) {
@each $value in $values {
$map: map-keys($tokens);
$mapValue: auro_map-deep-get($tokens, #{$map}, $value);
Expand Down Expand Up @@ -73,8 +74,8 @@ $auro-inset-spacing-options: $auro-spacing-options !default;
}

@else {
@for $i from 1 through length($auro-inset-directions) {
$direction: nth($auro-inset-directions, $i);
@for $i from 1 through length($directions) {
$direction: nth($directions, $i);

#{$scope}.#{$prefix}util_inset#{auro_capitalize($value)}#{$direction} {
@if $direction == '' {
Expand Down

0 comments on commit aa138e4

Please sign in to comment.