mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
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:
committed by
Andrew Seguin
parent
cbdddf407a
commit
fffbcb19ee
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user