From d237107dc108a03fe344eeda7738f6166741633c Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Thu, 6 Sep 2018 21:28:31 +0300
Subject: [PATCH] fix(button): hover styles taking precedence over focus
 styling

Fixes the `:hover` styles overriding the focused styling, because they have the same specificity, but are positioned lower in the stylesheet.
---
 src/lib/button/button.scss | 37 +++++++++++++++++++++----------------
 1 file changed, 21 insertions(+), 16 deletions(-)

diff --git a/src/lib/button/button.scss b/src/lib/button/button.scss
index 9160fe2ac03e..9796ca7424be 100644
--- a/src/lib/button/button.scss
+++ b/src/lib/button/button.scss
@@ -4,30 +4,35 @@
 @import '../core/style/layout-common';
 @import '../../cdk/a11y/a11y';
 
-.mat-button, .mat-icon-button, .mat-stroked-button, .mat-flat-button {
-  @include mat-button-base;
-}
-
-.mat-button, .mat-icon-button {
-  .mat-button-focus-overlay {
-
-    opacity: 0;
-  }
-}
-
 // Only flat and stroked buttons (not raised, FABs or icon buttons) have a hover style.
 // Use the same visual treatment for hover as for focus.
-.mat-button:hover .mat-button-focus-overlay,
-.mat-stroked-button:hover .mat-button-focus-overlay {
-  opacity: 0.04;
+.mat-button,
+.mat-stroked-button {
+  &:hover .mat-button-focus-overlay {
+    opacity: 0.04;
+  }
 }
 
 // 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 {
+  .mat-button,
+  .mat-stroked-button {
+    &:hover .mat-button-focus-overlay {
+      opacity: 0;
+    }
+  }
+}
+
+// Should be placed after the `:hover` styles so the focused
+// styling coming in from `mat-button-base` takes precedence.
+.mat-button, .mat-icon-button, .mat-stroked-button, .mat-flat-button {
+  @include mat-button-base;
+}
+
+.mat-button, .mat-icon-button {
+  .mat-button-focus-overlay {
     opacity: 0;
   }
 }