fix(scss notation): fix & notation for process wizard (#4993)

Co-authored-by: DouG Molidor <[email protected]>

Author: kflournoy-sf

ui/components/process/wizard/_deprecate.scss

@@ -6,92 +6,92 @@
   .slds-wizard {
     position: relative;
 
-    &__list {
-      display: flex;
-      justify-content: space-between;
-      position: relative;
-      margin: auto;
-    }
-
-    &__item {
-      flex: 2 0 auto;
-      text-align: center;
-      width: 0%; // Needed for truncation due to different flex grow on items
-      user-select: none;
-
-      &:first-child {
-        text-align: left;
-        flex-grow: 1;
-      }
+    .slds-is-active {
 
-      &:last-child {
-        text-align: right;
-        flex-grow: 1;
+      .slds-wizard__marker {
+        background: #0076de; // @TODO: Need a token for this
       }
 
       a:hover,
       a:focus {
-        outline: 0;
-        text-decoration: none;
 
         .slds-wizard__marker {
-          background: rgb(216, 221, 230); // @TODO - no matching token
+          background: rgb(0, 95, 178); // @TODO: Need a token for this
         }
       }
     }
+  }
 
-    &__link {
-      display: block;
-    }
-
-    &__marker {
-      @include square($square-icon-small-boundary);
-      border-radius: $border-radius-circle;
-      background: $color-background-dark;
-      display: inline-block;
-      vertical-align: middle;
-      z-index: 1;
-      position: relative;
-    }
+  .slds-wizard__list {
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    margin: auto;
+  }
 
-    &__label {
-      display: block;
-      margin-top: $spacing-small;
-    }
+  .slds-wizard__item {
+    flex: 2 0 auto;
+    text-align: center;
+    width: 0%; // Needed for truncation due to different flex grow on items
+    user-select: none;
 
-    &__progress {
-      position: absolute;
-      left: 0;
-      top: (($square-icon-small-boundary * 0.5) - ($square-icon-x-small-content * 0.25));
-      height: ($square-icon-x-small-content * 0.5);
-      display: block;
-      width: 100%;
-      z-index: -1;
-      background: $color-background-dark;
+    &:first-child {
+      text-align: left;
+      flex-grow: 1;
     }
 
-    &__progress-bar {
-      position: absolute;
-      left: 0;
-      top: 0;
-      height: 100%;
-      background: #0076de; // @TODO: Need a token for this
-      transition: width $duration-promptly ease;
+    &:last-child {
+      text-align: right;
+      flex-grow: 1;
     }
 
-    .slds-is-active {
+    a:hover,
+    a:focus {
+      outline: 0;
+      text-decoration: none;
 
       .slds-wizard__marker {
-        background: #0076de; // @TODO: Need a token for this
+        background: rgb(216, 221, 230); // @TODO - no matching token
       }
+    }
+  }
 
-      a:hover,
-      a:focus {
+  .slds-wizard__link {
+    display: block;
+  }
 
-        .slds-wizard__marker {
-          background: rgb(0, 95, 178); // @TODO: Need a token for this
-        }
-      }
-    }
+  .slds-wizard__marker {
+    @include square($square-icon-small-boundary);
+    border-radius: $border-radius-circle;
+    background: $color-background-dark;
+    display: inline-block;
+    vertical-align: middle;
+    z-index: 1;
+    position: relative;
+  }
+
+  .slds-wizard__label {
+    display: block;
+    margin-top: $spacing-small;
+  }
+
+  .slds-wizard__progress {
+    position: absolute;
+    left: 0;
+    top: (($square-icon-small-boundary * 0.5) - ($square-icon-x-small-content * 0.25));
+    height: ($square-icon-x-small-content * 0.5);
+    display: block;
+    width: 100%;
+    z-index: -1;
+    background: $color-background-dark;
+  }
+
+  .slds-wizard__progress-bar {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    background: #0076de; // @TODO: Need a token for this
+    transition: width $duration-promptly ease;
   }
 }