fix(scss notation): fix & notation for progress indicator (#5000)

Author: kflournoy-sf

ui/components/progress-indicator/base/_index.scss

@@ -15,55 +15,55 @@
   flex: 1 1 auto;
   margin: auto;
 
-  /**
-   * When on a shaded background such as the modal footer
-   *
-   * @selector .slds-progress_shade
-   * @restrict .slds-progress
-   * @modifier
-   */
-  &_shade,
-  &--shade {
-
-    .slds-progress__item {
+  .slds-progress-bar {
+    position: absolute;
+    top: 50%;
+    margin-top: (($progress-bar-height * 0.5) * -1);
+  }
+}
 
-      &.slds-is-completed .slds-progress__marker,
-      &.slds-is-active .slds-progress__marker {
-        background: $progress-color-background-shade;
-      }
+/**
+  * When on a shaded background such as the modal footer
+  *
+  * @selector .slds-progress_shade
+  * @restrict .slds-progress
+  * @modifier
+*/
+.slds-progress_shade,
+.slds-progress--shade {
+
+  .slds-progress__item {
+
+    &.slds-is-completed .slds-progress__marker,
+    &.slds-is-active .slds-progress__marker {
+      background: $progress-color-background-shade;
+    }
 
-      &.slds-is-completed .slds-progress__marker_icon,
-      &.slds-is-completed .slds-progress__marker--icon {
-        border-color: $progress-color-background-shade;
-      }
+    &.slds-is-completed .slds-progress__marker_icon,
+    &.slds-is-completed .slds-progress__marker--icon {
+      border-color: $progress-color-background-shade;
+    }
 
-      &.slds-is-active .slds-progress__marker {
-        box-shadow: $progress-color-background-shade 0 0 0 4px; // Adds whitespace around indicator
+    &.slds-is-active .slds-progress__marker {
+      box-shadow: $progress-color-background-shade 0 0 0 4px; // Adds whitespace around indicator
 
-        &:focus {
-          box-shadow: $progress-color-background-shade 0 0 0 4px, 0 0 3px 4px $color-border-brand-dark; // Keeps white space and add blue focus ring
-        }
+      &:focus {
+        box-shadow: $progress-color-background-shade 0 0 0 4px, 0 0 3px 4px $color-border-brand-dark; // Keeps white space and add blue focus ring
       }
+    }
 
-      &.slds-has-error .slds-progress__marker {
-
-        &,
-        &:hover,
-        &:focus {
-          background: $progress-color-background-shade;
-        }
-      }
+    &.slds-has-error .slds-progress__marker {
 
-      .slds-progress__marker {
-        border-color: $progress-color-border-shade;
+      &,
+      &:hover,
+      &:focus {
+        background: $progress-color-background-shade;
       }
     }
-  }
 
-  .slds-progress-bar {
-    position: absolute;
-    top: 50%;
-    margin-top: (($progress-bar-height * 0.5) * -1);
+    .slds-progress__marker {
+      border-color: $progress-color-border-shade;
+    }
   }
 }
 
@@ -179,16 +179,16 @@
   background: $progress-bar-color-background;
   border: 4px solid $progress-color-border;
   vertical-align: middle;
+}
 
-  /**
-   * Modifier that notifies the marker indicator that the step has been completed and its getting an icon
-   *
-   * @selector .slds-progress__marker_icon
-   * @restrict .slds-progress__marker
-   * @required
-   */
-  &_icon,
-  &--icon {
-    @include square(auto);
-  }
+/**
+  * Modifier that notifies the marker indicator that the step has been completed and its getting an icon
+  *
+  * @selector .slds-progress__marker_icon
+  * @restrict .slds-progress__marker
+  * @required
+  */
+.slds-progress__marker_icon,
+.slds-progress__marker--icon {
+  @include square(auto);
 }