From 947c29afcca90050239b0ca5ca0a235585252073 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Wed, 11 Jul 2018 17:10:51 +0200
Subject: [PATCH] fix(button): don't show hover overlay on devices that don't
 support hovering (#12030)

Fixes the hover overlay persisting on touch devices after tapping on a button.

Fixes #12022.
---
 src/lib/button/button.scss | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/lib/button/button.scss b/src/lib/button/button.scss
index 637d785b834..565ffcb5379 100644
--- a/src/lib/button/button.scss
+++ b/src/lib/button/button.scss
@@ -22,6 +22,16 @@
   opacity: 1;
 }
 
+// Disable the hover styles on non-hover devices. Since this is more of a progressive
+// enhancement and not all desktop browsers support this kind of media query, we can't
+// use something like `@media (hover)`.
+@media (hover: none) {
+  .mat-button:hover .mat-button-focus-overlay,
+  .mat-stroked-button:hover .mat-button-focus-overlay {
+    opacity: 0;
+  }
+}
+
 .mat-raised-button {
   @include mat-raised-button;
 }