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:
Kristiyan Kostadinov
2018-03-09 10:39:07 -05:00
committed by Jeremy Elbourn
parent 356ba71b90
commit 8366ec6560
+8
View File
@@ -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;
}
}
}