fix(button): focus indication hard to see in high contrast mode (#13259)

* When we switched to the new design, we also switched our approach to how the focus overlay is shown (using `opacity` vs `display`), however we never switched the focus indicator's background to a solid color, which means that it's opacity when displayed is close to zero (0.5 * 0.012 = 0.006). These changes switch it to a solid color.
* Fixes the focus indicator being white on a white background, when the user has high contrast set to black-on-white.
This commit is contained in:
Kristiyan Kostadinov
2019-01-23 20:14:27 +01:00
committed by Andrew Seguin
parent cbdddf407a
commit fffbcb19ee
+8 -2
View File
@@ -109,7 +109,6 @@
// Element that overlays the button to show focus and hover effects.
.mat-button-focus-overlay {
opacity: 0;
transition: $mat-button-focus-transition;
._mat-animation-noopable & {
@@ -120,7 +119,14 @@
// Note that IE will render this in the same way, no
// matter whether the theme is light or dark. This helps
// with the readability of focused buttons.
background-color: rgba(white, 0.5);
background-color: #fff;
}
@include cdk-high-contrast(black-on-white) {
// For the black-on-white high contrast mode, the browser will set this element
// to white, making it blend in with the background, hence why we need to set
// it explicitly to black.
background-color: #000;
}
}