fix(path): add focus and reorder active styles (#2974)

* fix(path): add focus and reorder active styles * fix(path): add slds-is-focused class * fix(path): scope to slds-is-complete * feat(path): reuse active styling
salesforce-ux · Jan 31, 2018 · f197b4a · f197b4a
1 parent 399da9c
commit f197b4a
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 28 deletions.
diff --git a/ui/components/path/base/_index.scss b/ui/components/path/base/_index.scss
@@ -149,33 +149,6 @@
     }
   }
 
-  /**
-  * @summary Creates the active stage of the sales path
-  *
-  * @selector .slds-is-active
-  * @restrict .slds-path__item
-  * @notes This class must be placed on the item programatically when the guidance section is activated
-  */
-  .slds-is-active {
-    background-color: $color-background-path-active;
-
-    .slds-path__link {
-      color: $color-text-inverse;
-    }
-
-    &:hover {
-      background-color: $color-background-path-active-hover;
-
-      + .slds-path__item:before {
-        background-color: $color-background-path-active-hover;
-      }
-    }
-
-    + .slds-path__item:before {
-      background-color: $color-background-path-active;
-    }
-  }
-
   /**
    * @summary Creates success stage of the path
    *
@@ -233,6 +206,42 @@
     }
   }
 
+  /**
+  * @summary Creates the active stage of the sales path
+  *
+  * @selector .slds-is-active
+  * @restrict .slds-path__item
+  * @notes This class must be placed on the item programatically when the guidance section is activated
+  */
+  .slds-is-active,
+  .slds-is-complete.slds-is-focused {
+    background-color: $color-background-path-active;
+
+    .slds-path__stage {
+      transform: translateY(-50%) rotateX(-180deg);
+    }
+
+    .slds-path__title {
+      transform: rotateX(0deg);
+    }
+
+    .slds-path__link {
+      color: $color-text-inverse;
+    }
+
+    &:hover {
+      background-color: $color-background-path-active-hover;
+
+      + .slds-path__item:before {
+        background-color: $color-background-path-active-hover;
+      }
+    }
+
+    + .slds-path__item:before {
+      background-color: $color-background-path-active;
+    }
+  }
+
   /**
    * @summary Creates the current stage of the path
    *

diff --git a/ui/components/path/tokens/background-color.yml b/ui/components/path/tokens/background-color.yml
@@ -18,7 +18,7 @@ props:
     comment: The hover background color for Salespath stages that are complete.
   COLOR_BACKGROUND_PATH_ACTIVE:
     value: '{!DEEP_COVE}'
-    comment: The background color for Salespath stages that are complete.
+    comment: The background color for Salespath stages that are active.
   COLOR_BACKGROUND_PATH_ACTIVE_HOVER:
     value: '{!BISCAY}'
     comment: The hovered background color for Salespath stages that are complete.