|
1 | 1 | @use 'sass:map';
|
2 |
| -@use '@angular/cdk'; |
3 | 2 | @use '@material/snackbar/snackbar' as mdc-snackbar;
|
4 | 3 | @use '@material/snackbar/snackbar-theme' as mdc-snackbar-theme;
|
5 | 4 | @use '../core/mdc-helpers/mdc-helpers';
|
|
10 | 9 | @include mdc-snackbar.static-styles($query: mdc-helpers.$mdc-base-styles-without-animation-query);
|
11 | 10 | }
|
12 | 11 |
|
| 12 | +@mixin _container-min-width { |
| 13 | + $min-width: mdc-snackbar-theme.$min-width; |
| 14 | + $mobile-breakpoint: mdc-snackbar-theme.$mobile-breakpoint; |
| 15 | + |
| 16 | + // The styles weren't included in `static-styles` so we need to add them ourselves. |
| 17 | + @include mdc-snackbar-theme.min-width( |
| 18 | + $min-width: $min-width, |
| 19 | + $mobile-breakpoint: $mobile-breakpoint, |
| 20 | + $query: mdc-helpers.$mdc-base-styles-query |
| 21 | + ); |
| 22 | + |
| 23 | + // The MDC `min-width` mixin has a similar breakpoint that sets `min-width: 100%` on the surface |
| 24 | + // element to make it span the entire viewport, however it ends up collapsing because the |
| 25 | + // container is `width: auto`. This query ensures that the surface will span the whole viewport. |
| 26 | + @media (max-width: $mobile-breakpoint), (max-width: $min-width) { |
| 27 | + width: 100vw; |
| 28 | + } |
| 29 | +} |
| 30 | + |
13 | 31 | .mat-mdc-snack-bar-container {
|
14 | 32 | @include mdc-helpers.disable-mdc-fallback-declarations {
|
15 |
| - // The styles weren't included in `static-styles` so we need to add them ourselves. |
16 |
| - @include mdc-snackbar-theme.min-width( |
17 |
| - mdc-snackbar-theme.$min-width, |
18 |
| - $query: mdc-helpers.$mdc-base-styles-query |
19 |
| - ); |
| 33 | + @include _container-min-width; |
20 | 34 | @include mdc-snackbar-theme.max-width(
|
21 | 35 | mdc-snackbar-theme.$max-width,
|
22 | 36 | $query: mdc-helpers.$mdc-base-styles-query
|
|
60 | 74 | // of positions, so we'll defer logic there.
|
61 | 75 | position: static;
|
62 | 76 |
|
63 |
| - @include cdk.high-contrast(active, off) { |
64 |
| - border: solid 1px; |
65 |
| - } |
66 |
| - |
67 | 77 | // The `mat-mdc-button` and `:not(:disabled)` here are redundant, but we need them to increase
|
68 | 78 | // the specificity over the button styles that may bleed in from the rest of the app.
|
69 | 79 | .mat-mdc-button.mat-mdc-snack-bar-action:not(:disabled) {
|
|
0 commit comments