From 22f593b1dc6bf9fbc89d867c6284a50848156f4a 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 99f09d6a48d6..3ed6674b7156 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