From e8f8d079fa98e5d864bff5f97f7f8cdbde7d8d1e Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Tue, 23 Oct 2018 18:16:04 +0200 Subject: [PATCH] fix(slide-toggle): don't show hover ripples on touch devices (#13702) On touch devices `:hover` styling persists after the user has tapped. These changes hide the persistent ripple if the user isn't able to hover, in order to avoid confusion with the other ripples. Related to #13675. --- src/lib/slide-toggle/slide-toggle.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/lib/slide-toggle/slide-toggle.scss b/src/lib/slide-toggle/slide-toggle.scss index f0d79610a51..f06a0ce9425 100644 --- a/src/lib/slide-toggle/slide-toggle.scss +++ b/src/lib/slide-toggle/slide-toggle.scss @@ -214,6 +214,16 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg &, .mat-slide-toggle.mat-disabled .mat-slide-toggle-bar:hover & { opacity: 0; } + + // Hover styles will be displayed after tapping on touch devices. + // Disable the hover styling if the user's device doesn't support hovering. + @media (hover: none) { + // Note that we only negate the `:hover` rather than setting it to always be `display: none`, + // in order to maintain the focus indication for hybrid touch + keyboard devices. + .mat-slide-toggle-bar:hover & { + display: none; + } + } } /** Custom styling to make the slide-toggle usable in high contrast mode. */