Skip to content

Commit

Permalink
fix(cdk/overlay): resolve regression when overlay is imported through…
Browse files Browse the repository at this point in the history
… shorthand path

Fixes a regression caused by angular#21896 where importing the overlay styles through
`~@angular/cdk/overlay` would result in a compilation error.
  • Loading branch information
crisbeto committed Feb 26, 2021
1 parent 8b3c82d commit 5513f6d
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 7 deletions.
2 changes: 2 additions & 0 deletions src/cdk/a11y/_a11y.scss
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,8 @@
$selector-context: #{&};

@if ($encapsulation != 'on') {
// Note that if this selector is updated, the same change has to be made inside
// `_overlay.scss` which can't depend on this mixin due to some infrastructure limitations.
.cdk-high-contrast-#{$target} {
@include _cdk-optionally-nest-content($selector-context) {
@content;
Expand Down
13 changes: 6 additions & 7 deletions src/cdk/overlay/_overlay.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
@use '../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.
Expand Down Expand Up @@ -82,11 +80,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`. 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.
@include a11y.high-contrast(active, off) {
// Note that we can't import and use the `high-contrast` mixin from `_a11y.scss`, because
// this file will be copied to the top-level `cdk` package when putting together the files
// for npm. Any relative import paths we use here will become invalid once the file is copied.
.cdk-high-contrast-active & {
// In high contrast mode the rgba background will become solid
// so we need to fall back to making it opaque using `opacity`.
opacity: 0.6;
}
}
Expand Down

0 comments on commit 5513f6d

Please sign in to comment.