fix(stepper): showing hover state after tap on touch devices (#14074)

Fixes the `:hover` state of the step header lingering on the element after a tap on a touch device.
angular · Dec 3, 2018 · f3031ad · f3031ad
1 parent 0ef75ea
commit f3031ad
Showing 1 changed file with 9 additions and 0 deletions.
diff --git a/src/lib/stepper/_stepper-theme.scss b/src/lib/stepper/_stepper-theme.scss
@@ -15,6 +15,15 @@
       background-color: mat-color($background, hover);
     }
 
+    // On touch devices the :hover state will linger on the element after a tap.
+    // Reset it via `@media` after the declaration, because the media query isn't
+    // supported by all browsers yet.
+    @media (hover: none) {
+      &:hover {
+        background: none;
+      }
+    }
+
     .mat-step-label,
     .mat-step-optional {
       // TODO(josephperrott): Update to using a corrected disabled-text contrast