mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
fix(overlay): opaque backdrop appearing solid in high contrast mode (#10252)
Recently we switched to using an RGBA color to make the backdrop opaque, instead of setting the opacity. This is more convenient when it comes to overriding and animating it, however it causes high contrast mode on Windows to display it as a solid color. These changes add a fallback that will use the `opacity`.
This commit is contained in:
committed by
Jeremy Elbourn
parent
356ba71b90
commit
8366ec6560
@@ -1,3 +1,5 @@
|
||||
@import '../a11y/a11y';
|
||||
|
||||
// We want overlays to always appear over user content, so set a baseline
|
||||
// very high z-index for the overlay container, which is where we create the new
|
||||
// stacking context for all overlays.
|
||||
@@ -71,6 +73,12 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
|
||||
|
||||
&.cdk-overlay-backdrop-showing {
|
||||
opacity: 1;
|
||||
|
||||
// In high contrast mode the rgba background will become solid
|
||||
// so we need to fall back to making it opaque using `opacity`.
|
||||
@include cdk-high-contrast {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user