diff --git a/CODING_STANDARDS.md b/CODING_STANDARDS.md index 8aa4ab845aba..9c8e0c879e7c 100644 --- a/CODING_STANDARDS.md +++ b/CODING_STANDARDS.md @@ -208,7 +208,7 @@ specific error being caught and why it cannot be prevented. * Except for `@Input` properties, use `is` and `has` prefixes for boolean properties / methods. ##### Observables -* Don't suffix observables with `$`. +* Don't suffix observables with `$`. ##### Classes Classes should be named based on what they're responsible for. Names should capture what the code @@ -333,7 +333,7 @@ The latter is equivalent for the component, but makes it easier override when ne #### Support styles for Windows high-contrast mode This is a low-effort task that makes a big difference for low-vision users. Example: ```css -@media screen and (-ms-high-contrast: active) { +@include cdk-high-contrast(active, off) { .unicorn-motocycle { border: 1px solid #fff !important; } diff --git a/src/cdk/overlay/BUILD.bazel b/src/cdk/overlay/BUILD.bazel index 3775ea2571b7..57836919b82f 100644 --- a/src/cdk/overlay/BUILD.bazel +++ b/src/cdk/overlay/BUILD.bazel @@ -41,7 +41,10 @@ sass_library( sass_binary( name = "overlay_prebuilt_scss", src = "overlay-prebuilt.scss", - deps = [":overlay_scss_lib"], + deps = [ + ":overlay_scss_lib", + "//src/cdk/a11y:a11y_scss_lib", + ], ) ng_test_library( diff --git a/src/cdk/overlay/_overlay.scss b/src/cdk/overlay/_overlay.scss index 8582fd822471..33fae7cbfb93 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. @@ -84,7 +86,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default; // to making it opaque using `opacity`. Note that we can't use the `cdk-high-contrast` // mixin, because we can't normalize the import path to the _a11y.scss both for the // source and when this file is distributed. See #10908. - @media screen and (-ms-high-contrast: active) { + @include cdk-high-contrast(active, off) { opacity: 0.6; } }