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

Fixes the `:hover` state of the step header lingering on the element after a tap on a touch device.
angular · Nov 10, 2018 · d50faa5 · d50faa5
1 parent ba31c72
commit d50faa5
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 {
       color: mat-color($foreground, disabled-text);