Merge pull request #1 from snide/style/steps

Minor touchup to horiz steps
cchaos · Feb 9, 2018 · 7cb11f0 · 7cb11f0
2 parents 6895695 + 816d1cc
commit 7cb11f0
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 4 deletions.
diff --git a/src/components/steps/__snapshots__/steps_horizontal.test.js.snap b/src/components/steps/__snapshots__/steps_horizontal.test.js.snap
@@ -110,7 +110,7 @@ exports[`EuiStepsHorizontal is rendered 1`] = `
       class="euiStepHorizontal__number"
     >
       <svg
-        class="euiIcon euiIcon--medium euiIcon--ghost"
+        class="euiIcon euiStepHorizontal__disabledIcon euiIcon--medium"
         height="16"
         viewBox="0 0 16 16"
         width="16"

diff --git a/src/components/steps/_steps_horizontal.scss b/src/components/steps/_steps_horizontal.scss
@@ -25,7 +25,19 @@
   // focus state
   &:focus {
     .euiStepHorizontal__number {
-      //box-shadow: 0 0 0 2px rgba($euiColorPrimary, .2);
+      background: $euiColorPrimary;
+      color: $euiColorEmptyShade;
+      animation: $euiAnimSpeedSlow $euiAnimSlightResistance 1 normal forwards focusRingAnimate;
+    }
+
+    .euiStepHorizontal__title {
+      text-decoration: underline;
+    }
+  }
+
+  &:hover:not(:disabled) {
+
+    .euiStepHorizontal__number {
       animation: $euiAnimSpeedSlow $euiAnimSlightResistance 1 normal forwards focusRingAnimate;
     }
 
@@ -74,6 +86,8 @@
   @include createStepsNumber;
   position: relative; /* 2 */
   z-index: $euiZLevel1; /* 2 */
+  transition: background-color $euiAnimSpeedSlow $euiAnimSlightResistance,
+              color $euiAnimSpeedSlow $euiAnimSlightResistance;
 
   // if it contains an icon, it needs to shift up a couple px
   > .euiIcon {
@@ -82,6 +96,11 @@
   }
 }
 
+
+.euiStepHorizontal__disabledIcon {
+  fill: $euiColorDarkShade;
+}
+
 .euiStepHorizontal__title {
   display: block;
   @include euiTitle;
@@ -98,11 +117,20 @@
 .euiStepHorizontal-isIncomplete {
   .euiStepHorizontal__number {
     background-color: $euiColorLightShade;
+    color: $euiColorDarkShade;
   }
 
   .euiStepHorizontal__title {
     color: $euiColorDarkShade;
   }
+
+  &:hover:not(:disabled) {
+
+    .euiStepHorizontal__number {
+      background-color: $euiColorPrimary;
+      color: $euiColorEmptyShade;
+    }
+  }
 }
 
 // Complete state
@@ -147,6 +175,6 @@
     box-shadow: 0 0 0 10px rgba($euiColorPrimary, 0);
   }
   100% {
-    box-shadow: 0 0 0 2px rgba($euiColorPrimary, .2);
+    box-shadow: 0 0 0 4px rgba($euiColorPrimary, .2);
   }
 }
diff --git a/src/components/steps/step_horizontal.js b/src/components/steps/step_horizontal.js
@@ -30,7 +30,7 @@ export const EuiStepHorizontal = ({
 
   if (disabled) {
     numberNode = (
-      <EuiIcon type="lock" color="ghost" />
+      <EuiIcon type="lock" className="euiStepHorizontal__disabledIcon" />
     );
     titleAppendix = ' is disabled';
   } else if (isComplete) {