From 09dec490eab35af505f26fd9eb30bbdab6922c68 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Tue, 27 Nov 2018 16:47:58 +0100 Subject: [PATCH] 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. --- src/lib/stepper/_stepper-theme.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/lib/stepper/_stepper-theme.scss b/src/lib/stepper/_stepper-theme.scss index 99f09d6a48d..3ed6674b715 100644 --- 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