more

Author: mdo

scss/_stepper.scss

@@ -1,20 +1,40 @@
+@use "sass:map";
+@use "config" as *;
+@use "variables" as *;
+@use "layout/breakpoints" as *;
+@use "mixins/border-radius" as *;
+@use "mixins/box-shadow" as *;
+@use "mixins/gradients" as *;
+@use "mixins/transition" as *;
+
+// scss-docs-start stepper-variables
+$stepper-size: 2rem !default;
+$stepper-gap: 1rem !default;
+$stepper-track-size: .25rem !default;
+$stepper-bg: var(--bg-2) !default;
+$stepper-active-fg: $component-active-color !default;
+$stepper-active-bg: $component-active-bg !default;
+// $stepper-vertical-gap: .5rem !default;
+// scss-docs-end stepper-variables
+
+
 @mixin stepper-horizontal() {
   display: inline-grid;
   grid-auto-columns: 1fr;
   grid-auto-flow: column;
 
   .stepper-item {
-    grid-template-rows: repeat(2, var(--#{$prefix}stepper-size));
+    grid-template-rows: repeat(2, var(--stepper-size));
     grid-template-columns: auto;
     justify-items: center;
 
     &::after {
-      top: calc((var(--#{$prefix}stepper-size) * .5) - (var(--#{$prefix}stepper-track-size) * .5)); // stylelint-disable-line function-disallowed-list
+      top: calc((var(--stepper-size) * .5) - (var(--stepper-track-size) * .5));
       right: 0;
       bottom: auto;
-      left: calc(-50% - var(--#{$prefix}stepper-gap)); // stylelint-disable-line function-disallowed-list
+      left: calc(-50% - var(--stepper-gap));
       width: auto;
-      height: var(--#{$prefix}stepper-track-size);
+      height: var(--stepper-track-size);
     }
 
     &:last-child::after {
@@ -25,18 +45,18 @@
 
 .stepper {
   // scss-docs-start stepper-css-vars
-  --#{$prefix}stepper-size: #{$stepper-size};
-  --#{$prefix}stepper-gap: #{$stepper-gap};
-  --#{$prefix}stepper-bg: #{$stepper-bg};
-  --#{$prefix}stepper-track-size: #{$stepper-track-size};
-  --#{$prefix}stepper-active-color: #{$stepper-active-fg};
-  --#{$prefix}stepper-active-bg: #{$stepper-active-bg};
+  --stepper-size: #{$stepper-size};
+  --stepper-gap: #{$stepper-gap};
+  --stepper-bg: #{$stepper-bg};
+  --stepper-track-size: #{$stepper-track-size};
+  --stepper-active-color: #{$stepper-active-fg};
+  --stepper-active-bg: #{$stepper-active-bg};
   // scss-docs-end stepper-css-vars
 
   display: grid;
   grid-auto-rows: 1fr;
   grid-auto-flow: row;
-  gap: var(--#{$prefix}stepper-gap);
+  gap: var(--stepper-gap);
   padding-left: 0;
   list-style: none;
   counter-reset: stepper;
@@ -46,7 +66,7 @@
   position: relative;
   display: grid;
   grid-template-rows: auto;
-  grid-template-columns: var(--#{$prefix}stepper-size) auto;
+  grid-template-columns: var(--stepper-size) auto;
   gap: .5rem;
   place-items: center;
   justify-items: start;
@@ -59,28 +79,28 @@
     position: relative;
     z-index: 1;
     display: inline-block;
-    width: var(--#{$prefix}stepper-size);
-    height: var(--#{$prefix}stepper-size);
+    width: var(--stepper-size);
+    height: var(--stepper-size);
     padding: .5rem;
     font-weight: 600;
     line-height: 1;
     text-align: center;
     content: counter(stepper);
     counter-increment: stepper;
-    background-color: var(--#{$prefix}stepper-bg);
+    background-color: var(--stepper-bg);
     @include border-radius(50%);
   }
 
   // Connecting lines
   &::after {
     position: absolute;
-    top: calc(var(--#{$prefix}stepper-gap) * -1); // stylelint-disable-line function-disallowed-list
+    top: calc(var(--stepper-gap) * -1);
     bottom: 100%;
-    left: calc((var(--#{$prefix}stepper-size) * .5) - (var(--#{$prefix}stepper-track-size) * .5)); // stylelint-disable-line function-disallowed-list
-    width: var(--#{$prefix}stepper-track-size);
+    left: calc((var(--stepper-size) * .5) - (var(--stepper-track-size) * .5));
+    width: var(--stepper-track-size);
     // height: auto;
     content: "";
-    background-color: var(--#{$prefix}stepper-bg);
+    background-color: var(--stepper-bg);
   }
 
   // Avoid sibling selector for easier CSS overrides
@@ -91,13 +111,13 @@
   &.active {
     &::before,
     &::after {
-      color: var(--#{$prefix}stepper-active-color);
-      background-color: var(--#{$prefix}stepper-active-bg);
+      color: var(--stepper-active-color);
+      background-color: var(--stepper-active-bg);
     }
   }
 }
 
-@each $breakpoint in map-keys($grid-breakpoints) {
+@each $breakpoint in map.keys($grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);