Skip to content

Commit 3ad6ff0

Browse files
willshowellmmalerba
authored andcommitted
fix(button): persist theme color of button when leaving hover state (#3629)
For all buttons that need the focus overlay to be visible on on focus, that is already covered in `_button-base.scss`. For flat or icon buttons that need the focus overlay to be visible on hover, that is already covered in `button.scss`. All disabled buttons should always hide the focus overlay.
1 parent b810e11 commit 3ad6ff0

File tree

2 files changed

+8
-15
lines changed

2 files changed

+8
-15
lines changed

src/lib/button/_button-theme.scss

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,10 @@
1818
&.mat-warn .mat-button-focus-overlay {
1919
background-color: mat-color($warn, 0.12);
2020
}
21+
22+
&[disabled] .mat-button-focus-overlay {
23+
background-color: transparent;
24+
}
2125
}
2226

2327
// Applies a property to an md-button element for each of the supported palettes.
@@ -54,20 +58,15 @@
5458
$foreground: map-get($theme, foreground);
5559

5660
.mat-button, .mat-icon-button, .mat-raised-button, .mat-fab, .mat-mini-fab {
57-
&.cdk-keyboard-focused {
58-
@include _mat-button-focus-color($theme);
59-
}
61+
// Appy color to focus overlay.
62+
// The focus overlay will be visible when any button type is focused or when
63+
// flat buttons or icon buttons are hovered.
64+
@include _mat-button-focus-color($theme);
6065
}
6166

6267
.mat-button, .mat-icon-button {
6368
@include _mat-button-theme-color($theme, 'color');
6469
background: transparent;
65-
66-
// Only flat buttons and icon buttons (not raised or fabs) have a hover style.
67-
// Use the same visual treatment for hover as for focus.
68-
&:hover {
69-
@include _mat-button-focus-color($theme);
70-
}
7170
}
7271

7372
.mat-raised-button, .mat-fab, .mat-mini-fab {

src/lib/button/button.scss

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,6 @@
1414
opacity: 1;
1515
}
1616
}
17-
18-
&[disabled]:hover {
19-
&.mat-primary, &.mat-accent, &.mat-warn, .mat-button-focus-overlay {
20-
background-color: transparent;
21-
}
22-
}
2317
}
2418

2519
.mat-raised-button {

0 commit comments

Comments
 (0)