fix: replace css variables

AlaskaAirlines · Dec 20, 2022 · ac1fd1b · ac1fd1b
1 parent 225c08b
commit ac1fd1b
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -949,13 +949,13 @@
     display: inline-block;
   }
 }</code>" data-collapsed="#{$scope}.#{$prefix}util_listIndentedOrdered { ... }"><code>#{$scope}.#{$prefix}util_listIndentedOrdered { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Utility class to display ordered lists with unindented numbering</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_listIndentedOrdered {}</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_listIndentedOrdered {}</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_listIndentedOrdered {}</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/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties&quot;;</code></pre></div></section><section class="main__item container item" id="utility-list-css-#{$scope}.#{$prefix}util_listAuroIcon"><h3 class="item__heading"><a class="item__name" href="#css-#{$scope}.#{$prefix}util_listAuroIcon">#{$scope}.#{$prefix}util_listAuroIcon</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_listAuroIcon {
-  padding-left: 2*$auro-size-200; //calc(x*x)
+  padding-left: calc(var(--auro-size-300) + var(--auro-size-50));
   list-style: none;
   li {
-    text-indent: -$auro-size-200;
+    text-indent: calc(var(--auro-size-200) * -1);
   }
-  auro-icon{
-    width: $auro-size-200;
+  auro-icon {
+    width: var(--auro-size-200);
   }
 }</code>" data-collapsed="#{$scope}.#{$prefix}util_listAuroIcon { ... }"><code>#{$scope}.#{$prefix}util_listAuroIcon { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Utility class to display unordered lists with auro icons</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_listAuroIcon {}</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_listAuroIcon {}</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_listAuroIcon {}</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/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties&quot;;</code></pre></div></section></section></section><section class="main__section"><h1 class="main__heading" id="utility-mixins"><div class="container">utility-mixins</div></h1><section class="main__sub-section" id="utility-mixins-mixin"><h2 class="main__heading--secondary"><div class="container">mixins</div></h2><section class="main__item container item" id="utility-mixins-mixin-auro_anchorButton"><h3 class="item__heading"><a class="item__name" href="#mixin-auro_anchorButton">auro_anchorButton</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin auro_anchorButton($style, $env, $display: inline-block) { 
   $color: null;

diff --git a/src/utilityClasses/_listProperties.scss b/src/utilityClasses/_listProperties.scss
@@ -165,12 +165,12 @@
 /// @example scss - import mixin file
 ///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties";
 #{$scope}.#{$prefix}util_listAuroIcon {
-  padding-left: 2*$auro-size-200; //calc(x*x)
+  padding-left: calc(var(--auro-size-300) + var(--auro-size-50));
   list-style: none;
   li {
-    text-indent: -$auro-size-200;
+    text-indent: calc(var(--auro-size-200) * -1);
   }
-  auro-icon{
-    width: $auro-size-200;
+  auro-icon {
+    width: var(--auro-size-200);
   }
 }