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.
This commit is contained in:
Will Howell
2017-03-17 16:26:09 -04:00
committed by mmalerba
parent b810e11fa4
commit 3ad6ff0946
2 changed files with 8 additions and 15 deletions
+8 -9
View File
@@ -18,6 +18,10 @@
&.mat-warn .mat-button-focus-overlay {
background-color: mat-color($warn, 0.12);
}
&[disabled] .mat-button-focus-overlay {
background-color: transparent;
}
}
// Applies a property to an md-button element for each of the supported palettes.
@@ -54,20 +58,15 @@
$foreground: map-get($theme, foreground);
.mat-button, .mat-icon-button, .mat-raised-button, .mat-fab, .mat-mini-fab {
&.cdk-keyboard-focused {
@include _mat-button-focus-color($theme);
}
// Appy color to focus overlay.
// The focus overlay will be visible when any button type is focused or when
// flat buttons or icon buttons are hovered.
@include _mat-button-focus-color($theme);
}
.mat-button, .mat-icon-button {
@include _mat-button-theme-color($theme, 'color');
background: transparent;
// Only flat buttons and icon buttons (not raised or fabs) have a hover style.
// Use the same visual treatment for hover as for focus.
&:hover {
@include _mat-button-focus-color($theme);
}
}
.mat-raised-button, .mat-fab, .mat-mini-fab {
-6
View File
@@ -14,12 +14,6 @@
opacity: 1;
}
}
&[disabled]:hover {
&.mat-primary, &.mat-accent, &.mat-warn, .mat-button-focus-overlay {
background-color: transparent;
}
}
}
.mat-raised-button {