From a320af2d64b8b984d8360a2fd7fc883f0d1e765b Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Sat, 3 Nov 2018 01:24:36 +0100
Subject: [PATCH] fix(button-toggle): remove hover state on touch devices
 (#13724)

Negates the `:hover` state on touch devices, in order to prevent it from lingering after the user taps on a button toggle. Also fixes the native tap highlight showing up if the user taps on a disabled toggle group.
---
 src/lib/button-toggle/button-toggle.scss | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/lib/button-toggle/button-toggle.scss b/src/lib/button-toggle/button-toggle.scss
index 155cac769d8b..aa6ffad971ed 100644
--- a/src/lib/button-toggle/button-toggle.scss
+++ b/src/lib/button-toggle/button-toggle.scss
@@ -18,6 +18,7 @@ $mat-button-toggle-legacy-border-radius: 2px !default;
   white-space: nowrap;
   overflow: hidden;
   border-radius: $mat-button-toggle-legacy-border-radius;
+  -webkit-tap-highlight-color: transparent;
 
   @include cdk-high-contrast {
     outline: solid 1px;
@@ -46,7 +47,6 @@ $mat-button-toggle-legacy-border-radius: 2px !default;
 .mat-button-toggle {
   white-space: nowrap;
   position: relative;
-  -webkit-tap-highlight-color: transparent;
 
   &.cdk-keyboard-focused {
     .mat-button-toggle-focus-overlay {
@@ -77,6 +77,16 @@ $mat-button-toggle-legacy-border-radius: 2px !default;
       opacity: 0.5;
     }
   }
+
+  // On touch devices the hover state will linger on the element after the user has tapped.
+  // Disable it, because it can be confused with focus. We target the :hover state explicitly,
+  // because we still want to preserve the keyboard focus state for hybrid devices that have
+  // a keyboard and a touchscreen.
+  @media (hover: none) {
+    &:not(.mat-button-toggle-disabled):hover .mat-button-toggle-focus-overlay {
+      display: none;
+    }
+  }
 }
 
 .mat-button-toggle-label-content {