Skip to content

Commit 947c29a

Browse files
crisbetojelbourn
authored andcommitted
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.
1 parent 6314d15 commit 947c29a

File tree

1 file changed

+10
-0
lines changed

1 file changed

+10
-0
lines changed

src/lib/button/button.scss

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,16 @@
2222
opacity: 1;
2323
}
2424

25+
// Disable the hover styles on non-hover devices. Since this is more of a progressive
26+
// enhancement and not all desktop browsers support this kind of media query, we can't
27+
// use something like `@media (hover)`.
28+
@media (hover: none) {
29+
.mat-button:hover .mat-button-focus-overlay,
30+
.mat-stroked-button:hover .mat-button-focus-overlay {
31+
opacity: 0;
32+
}
33+
}
34+
2535
.mat-raised-button {
2636
@include mat-raised-button;
2737
}

0 commit comments

Comments
 (0)