From 8366ec65606e3873e54ea540eea6ba161488d842 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Fri, 9 Mar 2018 10:39:07 -0500 Subject: [PATCH] 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`. --- src/cdk/overlay/_overlay.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/cdk/overlay/_overlay.scss b/src/cdk/overlay/_overlay.scss index bf95c8739c9..332e7256f47 100644 --- a/src/cdk/overlay/_overlay.scss +++ b/src/cdk/overlay/_overlay.scss @@ -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; + } } }