feat(stepped process): add dark variant (#1434)

Orange-OpenSource · Aug 30, 2022 · 57633bb · 57633bb
1 parent 428fbd7
commit 57633bb
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 2 deletions.
diff --git a/scss/_stepped-process.scss b/scss/_stepped-process.scss
@@ -20,6 +20,7 @@
   --#{$prefix}stepped-process-link-line-height: #{$step-link-line-height};
   --#{$prefix}stepped-process-link-color: #{$step-link-color};
   --#{$prefix}stepped-process-link-active-color: #{$step-link-active-color};
+  --#{$prefix}stepped-process-link-next-color: #{$step-link-next-color};
   --#{$prefix}stepped-process-link-marker: #{$step-link-marker};
   --#{$prefix}stepped-process-link-text-decoration: #{$step-link-text-decoration};
 
@@ -117,10 +118,13 @@
     outline-offset: $spacer * .25;
   }
 
-  .active &,
-  .active ~ .stepped-process-item & {
+  .active & {
     color: var(--#{$prefix}stepped-process-link-active-color);
   }
+
+  .active ~ .stepped-process-item & {
+    color: var(--#{$prefix}stepped-process-link-next-color);
+  }
 }
 
 @for $i from 1 through $stepped-process-max-items {
@@ -142,3 +146,15 @@
     flex: $stepped-process-max-items - 1;
   }
 }
+
+.stepped-process-dark {
+  // scss-docs-start stepped-process-dark-css-vars
+  --#{$prefix}stepped-process-item-bg: #{$step-item-dark-bg};
+  --#{$prefix}stepped-process-item-active-bg: #{$step-item-dark-active-bg};
+  --#{$prefix}stepped-process-item-next-bg: #{$step-item-dark-next-bg};
+  --#{$prefix}stepped-process-item-drop-shadow: #{$step-item-dark-drop-shadow};
+  --#{$prefix}stepped-process-link-color: #{$step-link-dark-color};
+  --#{$prefix}stepped-process-link-active-color: #{$step-link-dark-active-color};
+  --#{$prefix}stepped-process-link-next-color: #{$step-link-dark-next-color};
+  // scss-docs-end stepped-process-dark-css-vars
+}
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1989,10 +1989,19 @@ $step-item-arrow-shape:       polygon(0% 0%, 1px 0%, subtract(100%, $border-widt
 $step-link-width:             1.25ch !default; // Matches width of a single number
 $step-link-color:             $white !default;
 $step-link-active-color:      $black !default;
+$step-link-next-color:        $black !default;
 $step-link-line-height:       $line-height-sm !default;
 $step-link-marker:            counter(var(--bs-stepped-process-counter)) inspect("\A0") !default;
 $step-link-marker-lg:         counter(var(--bs-stepped-process-counter)) inspect(".\A0") !default;
 $step-link-text-decoration:   $link-decoration !default;
+
+$step-item-dark-bg:           $white !default;
+$step-item-dark-active-bg:    $brand-orange !default;
+$step-item-dark-next-bg:      $gray-700 !default;
+$step-item-dark-drop-shadow:  drop-shadow($step-item-shadow-size 0 0 $black) #{"/* rtl:"} drop-shadow(-$step-item-shadow-size 0 0 $black) #{"*/"} !default;
+$step-link-dark-color:        $black !default;
+$step-link-dark-active-color: $black !default;
+$step-link-dark-next-color:   $white !default;
 // scss-docs-end stepped-process
 
 //// Sticker

diff --git a/site/content/docs/5.2/components/stepped-process.md b/site/content/docs/5.2/components/stepped-process.md
@@ -39,6 +39,33 @@ Add `.active` to a `.stepped-process-item` to indicate the current step, alongsi
 </nav>
 {{< /example >}}
 
+## Dark variant
+
+Stepped process comes with a dark variant: `.stepped-process-dark`.
+
+{{< example class="bg-dark" >}}
+<nav class="stepped-process stepped-process-dark" aria-label="Checkout process">
+  <p class="float-start mt-2 me-2 fw-bold d-sm-none">Step</p>
+  <ol>
+    <li class="stepped-process-item">
+      <a class="stepped-process-link" href="#" title="1. Sign in">Sign in</a>
+    </li>
+    <li class="stepped-process-item active">
+      <a class="stepped-process-link" href="#" title="2. Review" aria-current="step">Review</a>
+    </li>
+    <li class="stepped-process-item">
+      <a class="stepped-process-link" href="#" title="3. Delivery">Delivery</a>
+    </li>
+    <li class="stepped-process-item">
+      <a class="stepped-process-link" href="#" title="4. Payment">Payment</a>
+    </li>
+    <li class="stepped-process-item">
+      <a class="stepped-process-link" href="#" title="5. Place order">Place order</a>
+    </li>
+  </ol>
+</nav>
+{{< /example >}}
+
 ## CSS
 
 ### Variables
@@ -49,6 +76,10 @@ As part of Boosted's evolving CSS variables approach, stepped processes now use
 
 {{< scss-docs name="stepped-process-css-vars" file="scss/_stepped-process.scss" >}}
 
+Customization through CSS variables can be seen on the `.stepped-process-dark` modifier class where we override specific values without adding duplicate CSS selectors.
+
+{{< scss-docs name="stepped-process-dark-css-vars" file="scss/_stepped-process.scss" >}}
+
 ### Sass variables
 
 For more details, please have a look at the exhaustive list of available variables: