66 lines
2.4 KiB
SCSS
66 lines
2.4 KiB
SCSS
|
@use '@angular/cdk';
|
||
|
|
@use '../core/style/elevation';
|
||
|
|
@use '../core/tokens/m2/mat/bottom-sheet' as tokens-mat-bottom-sheet;
|
||
|
|
@use '../core/tokens/token-utils';
|
||
|
|
|
||
|
|
// The bottom sheet minimum width on larger screen sizes is based
|
||
|
|
// on increments of the toolbar, according to the spec. See:
|
||
|
|
// https://material.io/guidelines/components/bottom-sheets.html#bottom-sheets-specs
|
||
|
|
$_width-increment: 64px;
|
||
|
|
$container-vertical-padding: 8px !default;
|
||
|
|
$container-horizontal-padding: 16px !default;
|
||
|
|
|
||
|
|
.mat-bottom-sheet-container {
|
||
|
|
@include elevation.elevation(16);
|
||
|
|
padding: $container-vertical-padding
|
||
|
|
$container-horizontal-padding;
|
||
|
|
min-width: 100vw;
|
||
|
|
box-sizing: border-box;
|
||
|
|
display: block;
|
||
|
|
outline: 0;
|
||
|
|
max-height: 80vh;
|
||
|
|
overflow: auto;
|
||
|
|
|
||
|
|
@include token-utils.use-tokens(
|
||
|
|
tokens-mat-bottom-sheet.$prefix, tokens-mat-bottom-sheet.get-token-slots()) {
|
||
|
|
@include token-utils.create-token-slot(background, container-background-color);
|
||
|
|
@include token-utils.create-token-slot(color, container-text-color);
|
||
|
|
@include token-utils.create-token-slot(font-family, container-text-font);
|
||
|
|
@include token-utils.create-token-slot(font-size, container-text-size);
|
||
|
|
@include token-utils.create-token-slot(line-height, container-text-line-height);
|
||
|
|
@include token-utils.create-token-slot(font-weight, container-text-weight);
|
||
|
|
@include token-utils.create-token-slot(letter-spacing, container-text-tracking);
|
||
|
|
}
|
||
|
|
|
||
|
|
@include cdk.high-contrast {
|
||
|
|
outline: 1px solid;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Applies a border radius to the bottom sheet. Should only be applied when it's not full-screen.
|
||
|
|
%_mat-bottom-sheet-container-border-radius {
|
||
|
|
@include token-utils.use-tokens(
|
||
|
|
tokens-mat-bottom-sheet.$prefix, tokens-mat-bottom-sheet.get-token-slots()) {
|
||
|
|
@include token-utils.create-token-slot(border-top-left-radius, container-shape);
|
||
|
|
@include token-utils.create-token-slot(border-top-right-radius, container-shape);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-bottom-sheet-container-medium {
|
||
|
|
@extend %_mat-bottom-sheet-container-border-radius;
|
||
|
|
min-width: $_width-increment * 6;
|
||
|
|
max-width: calc(100vw - #{$_width-increment * 2});
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-bottom-sheet-container-large {
|
||
|
|
@extend %_mat-bottom-sheet-container-border-radius;
|
||
|
|
min-width: $_width-increment * 8;
|
||
|
|
max-width: calc(100vw - #{$_width-increment * 4});
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-bottom-sheet-container-xlarge {
|
||
|
|
@extend %_mat-bottom-sheet-container-border-radius;
|
||
|
|
min-width: $_width-increment * 9;
|
||
|
|
max-width: calc(100vw - #{$_width-increment * 6});
|
||
|
|
}
|