fix: removed white background on Stepper.Header component (#2358)

* fix: removed white background on Stepper.Header component * refactor: after review
openedx · Jun 8, 2023 · 4da189c · 4da189c
1 parent 1ed518f
commit 4da189c
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 16 deletions.
diff --git a/src/Stepper/Stepper.scss b/src/Stepper/Stepper.scss
@@ -1,41 +1,43 @@
+@import "variables";
+
 .pgn__stepper-header {
   display: flex;
   justify-content: center;
   align-items: center;
-  background: $white;
-  padding: .75rem 1rem;
-  min-height: 5.13rem;
+  background: $stepper-header-bg;
+  padding: $stepper-header-padding-y $stepper-header-padding-x;
+  min-height: $stepper-header-min-height;
 
   .pgn__stepper-header-step-list {
     list-style: none;
-    padding: .25rem 0;
+    padding: $stepper-header-step-list-padding-y $stepper-header-step-list-padding-x;
     display: flex;
     align-items: center;
-    margin: 0;
+    margin: $stepper-header-step-list-margin;
     flex-grow: 1;
     justify-content: center;
 
     .pgn__stepper-header-line {
       display: block;
-      height: 1px;
-      background: $light;
+      height: $stepper-header-line-height;
+      background: $stepper-header-line-bg;
       flex-basis: 80px;
       margin: 0 .5rem;
     }
 
     button.pgn__stepper-header-step {
-      border: none;
-      background-color: transparent;
+      border: $stepper-header-step-border;
+      background-color: $stepper-header-step-bg;
     }
   }
 
   .pgn__stepper-header-step {
     display: flex;
     align-items: center;
-    color: $primary;
+    color: $stepper-header-step-color;
     flex-shrink: 1;
-    min-width: 0;
-    padding: .25rem;
+    min-width: $stepper-header-step-min-width;
+    padding: $stepper-header-step-padding;
 
     .pgn__bubble {
       margin-inline-end: .5rem;
@@ -58,21 +60,24 @@
     }
 
     &.pgn__stepper-header-step-active ~ .pgn__stepper-header-step {
-      color: $gray-500;
+      color: $stepper-header-active-step-bg;
     }
 
     &.pgn__stepper-header-step-has-error {
       .pgn__bubble {
         background: transparent;
-        box-shadow: inset 0 0 0 3px $danger;
+        box-shadow:
+          inset 0 0 0
+          $stepper-header-step-error-bubble-shadow-width
+          $stepper-header-step-error-bubble-color;
 
         * {
-          color: $danger;
+          color: $stepper-header-step-error-bubble-color;
         }
       }
 
       .pgn__stepper-header-step-description {
-        color: $danger;
+        color: $stepper-header-step-error-description-color;
       }
     }
   }

diff --git a/src/Stepper/_variables.scss b/src/Stepper/_variables.scss
@@ -0,0 +1,18 @@
+$stepper-header-bg:                                       transparent !default;
+$stepper-header-min-height:                               5.13rem !default;
+$stepper-header-padding-y:                                .75rem !default;
+$stepper-header-padding-x:                                $spacer !default;
+$stepper-header-line-bg:                                  $light !default;
+$stepper-header-line-height:                              1px !default;
+$stepper-header-step-color:                               $primary !default;
+$stepper-header-step-bg:                                  $stepper-header-bg !default;
+$stepper-header-step-border:                              none !default;
+$stepper-header-step-min-width:                           0 !default;
+$stepper-header-step-padding:                             .25rem !default;
+$stepper-header-step-list-padding-y:                      .25rem !default;
+$stepper-header-step-list-padding-x:                      0 !default;
+$stepper-header-step-list-margin:                         0 !default;
+$stepper-header-active-step-bg:                           $gray-500 !default;
+$stepper-header-step-error-bubble-color:                  $danger !default;
+$stepper-header-step-error-bubble-shadow-width:           3px !default;
+$stepper-header-step-error-description-color:             $stepper-header-step-error-bubble-color !default;