diff --git a/src/material/snack-bar/snack-bar-container.scss b/src/material/snack-bar/snack-bar-container.scss index c08f4208b2f4..c4c333b4bb0f 100644 --- a/src/material/snack-bar/snack-bar-container.scss +++ b/src/material/snack-bar/snack-bar-container.scss @@ -1,5 +1,4 @@ @use 'sass:map'; -@use '@angular/cdk'; @use '@material/snackbar/snackbar' as mdc-snackbar; @use '@material/snackbar/snackbar-theme' as mdc-snackbar-theme; @use '../core/mdc-helpers/mdc-helpers'; @@ -10,13 +9,28 @@ @include mdc-snackbar.static-styles($query: mdc-helpers.$mdc-base-styles-without-animation-query); } +@mixin _container-min-width { + $min-width: mdc-snackbar-theme.$min-width; + $mobile-breakpoint: mdc-snackbar-theme.$mobile-breakpoint; + + // The styles weren't included in `static-styles` so we need to add them ourselves. + @include mdc-snackbar-theme.min-width( + $min-width: $min-width, + $mobile-breakpoint: $mobile-breakpoint, + $query: mdc-helpers.$mdc-base-styles-query + ); + + // The MDC `min-width` mixin has a similar breakpoint that sets `min-width: 100%` on the surface + // element to make it span the entire viewport, however it ends up collapsing because the + // container is `width: auto`. This query ensures that the surface will span the whole viewport. + @media (max-width: $mobile-breakpoint), (max-width: $min-width) { + width: 100vw; + } +} + .mat-mdc-snack-bar-container { @include mdc-helpers.disable-mdc-fallback-declarations { - // The styles weren't included in `static-styles` so we need to add them ourselves. - @include mdc-snackbar-theme.min-width( - mdc-snackbar-theme.$min-width, - $query: mdc-helpers.$mdc-base-styles-query - ); + @include _container-min-width; @include mdc-snackbar-theme.max-width( mdc-snackbar-theme.$max-width, $query: mdc-helpers.$mdc-base-styles-query @@ -60,10 +74,6 @@ // of positions, so we'll defer logic there. position: static; - @include cdk.high-contrast(active, off) { - border: solid 1px; - } - // The `mat-mdc-button` and `:not(:disabled)` here are redundant, but we need them to increase // the specificity over the button styles that may bleed in from the rest of the app. .mat-mdc-button.mat-mdc-snack-bar-action:not(:disabled) {