307 lines
9.1 KiB
SCSS
307 lines
9.1 KiB
SCSS
|
@use '@angular/cdk';
|
||
|
|
@use '../core/tokens/m2/mdc/dialog' as tokens-mdc-dialog;
|
||
|
|
@use '../core/tokens/m2/mat/dialog' as tokens-mat-dialog;
|
||
|
|
@use '../core/tokens/token-utils';
|
||
|
|
@use '../core/style/variables';
|
||
|
|
|
||
|
|
// Dialog content max height. This has been copied from the standard dialog
|
||
|
|
// and is needed to make the dialog content scrollable.
|
||
|
|
$mat-dialog-content-max-height: 65vh !default;
|
||
|
|
// Dialog button horizontal margin. This has been extracted from MDC as they
|
||
|
|
// don't expose this value as variable.
|
||
|
|
$mat-dialog-button-horizontal-margin: 8px !default;
|
||
|
|
|
||
|
|
// Dialog container max height. This has been given a default value so the
|
||
|
|
// flex-children can be calculated and not overflow on smaller screens.
|
||
|
|
// Fixes b/323588333
|
||
|
|
$mat-dialog-container-max-height: 95vh !default;
|
||
|
|
|
||
|
|
// Whether to emit fallback values for the structural styles. Previously MDC was emitting
|
||
|
|
// paddings in the static styles which meant that users would get them even if they didn't
|
||
|
|
// include the `dialog-base`. Eventually we should clean up the usages of this flag.
|
||
|
|
$_emit-fallbacks: true;
|
||
|
|
|
||
|
|
@mixin _use-mat-tokens {
|
||
|
|
@include token-utils.use-tokens(tokens-mat-dialog.$prefix, tokens-mat-dialog.get-token-slots()) {
|
||
|
|
@content;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin _use-mdc-tokens {
|
||
|
|
@include token-utils.use-tokens(tokens-mdc-dialog.$prefix, tokens-mdc-dialog.get-token-slots()) {
|
||
|
|
@content;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Note that we disable fallback declarations, but we don't disable fallback
|
||
|
|
// values, because there are a lot of internal apps that don't include a proper
|
||
|
|
// theme in their tests.
|
||
|
|
.mat-mdc-dialog-container {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
display: block;
|
||
|
|
box-sizing: border-box;
|
||
|
|
max-height: inherit;
|
||
|
|
min-height: inherit;
|
||
|
|
min-width: inherit;
|
||
|
|
max-width: inherit;
|
||
|
|
|
||
|
|
// The dialog container is focusable. We remove the default outline shown in browsers.
|
||
|
|
outline: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
// This needs extra specificity so it doesn't get overwritten by the CDK structural styles.
|
||
|
|
.cdk-overlay-pane.mat-mdc-dialog-panel {
|
||
|
|
@include _use-mat-tokens {
|
||
|
|
@include token-utils.create-token-slot(max-width, container-max-width,
|
||
|
|
$_emit-fallbacks);
|
||
|
|
@include token-utils.create-token-slot(min-width, container-min-width,
|
||
|
|
$_emit-fallbacks);
|
||
|
|
|
||
|
|
@media (variables.$xsmall) {
|
||
|
|
@include token-utils.create-token-slot(max-width, container-small-max-width,
|
||
|
|
$_emit-fallbacks);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-mdc-dialog-inner-container {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-around;
|
||
|
|
box-sizing: border-box;
|
||
|
|
height: 100%;
|
||
|
|
opacity: 0;
|
||
|
|
transition: opacity linear var(--mat-dialog-transition-duration, 0ms);
|
||
|
|
max-height: inherit;
|
||
|
|
min-height: inherit;
|
||
|
|
min-width: inherit;
|
||
|
|
max-width: inherit;
|
||
|
|
|
||
|
|
.mdc-dialog--closing & {
|
||
|
|
transition: opacity 75ms linear;
|
||
|
|
transform: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-dialog--open & {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
._mat-animation-noopable & {
|
||
|
|
transition: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-mdc-dialog-surface {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
flex-grow: 0;
|
||
|
|
flex-shrink: 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
position: relative;
|
||
|
|
overflow-y: auto;
|
||
|
|
outline: 0;
|
||
|
|
transform: scale(0.8);
|
||
|
|
transition: transform var(--mat-dialog-transition-duration, 0ms) cubic-bezier(0, 0, 0.2, 1);
|
||
|
|
max-height: inherit;
|
||
|
|
min-height: inherit;
|
||
|
|
min-width: inherit;
|
||
|
|
max-width: inherit;
|
||
|
|
|
||
|
|
@include _use-mat-tokens {
|
||
|
|
@include token-utils.create-token-slot(box-shadow, container-elevation-shadow,
|
||
|
|
$_emit-fallbacks);
|
||
|
|
}
|
||
|
|
|
||
|
|
@include _use-mdc-tokens {
|
||
|
|
@include token-utils.create-token-slot(border-radius, container-shape, $_emit-fallbacks);
|
||
|
|
@include token-utils.create-token-slot(background-color, container-color, $_emit-fallbacks);
|
||
|
|
}
|
||
|
|
|
||
|
|
[dir='rtl'] & {
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-dialog--open &,
|
||
|
|
.mdc-dialog--closing & {
|
||
|
|
transform: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
._mat-animation-noopable & {
|
||
|
|
transition: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
&::before {
|
||
|
|
// Renders an outline in high contrast mode.
|
||
|
|
position: absolute;
|
||
|
|
box-sizing: border-box;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
border: 2px solid transparent;
|
||
|
|
border-radius: inherit;
|
||
|
|
content: '';
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-mdc-dialog-title {
|
||
|
|
display: block;
|
||
|
|
position: relative;
|
||
|
|
flex-shrink: 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
margin: 0 0 1px;
|
||
|
|
|
||
|
|
@include _use-mat-tokens {
|
||
|
|
@include token-utils.create-token-slot(padding, headline-padding, $_emit-fallbacks);
|
||
|
|
}
|
||
|
|
|
||
|
|
// This was used by MDC to set the text baseline. We should figure out a way to
|
||
|
|
// remove it, because it can introduce unnecessary whitespace at the beginning
|
||
|
|
// of the element.
|
||
|
|
&::before {
|
||
|
|
display: inline-block;
|
||
|
|
width: 0;
|
||
|
|
height: 40px;
|
||
|
|
content: '';
|
||
|
|
vertical-align: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
[dir='rtl'] & {
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Nested to maintain the old specificity.
|
||
|
|
.mat-mdc-dialog-container & {
|
||
|
|
@include _use-mdc-tokens {
|
||
|
|
@include token-utils.create-token-slot(color, subhead-color, $_emit-fallbacks);
|
||
|
|
@include token-utils.create-token-slot(font-family, subhead-font,
|
||
|
|
if($_emit-fallbacks, inherit, null));
|
||
|
|
@include token-utils.create-token-slot(line-height, subhead-line-height, $_emit-fallbacks);
|
||
|
|
@include token-utils.create-token-slot(font-size, subhead-size, $_emit-fallbacks);
|
||
|
|
@include token-utils.create-token-slot(font-weight, subhead-weight, $_emit-fallbacks);
|
||
|
|
@include token-utils.create-token-slot(letter-spacing, subhead-tracking, $_emit-fallbacks);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-mdc-dialog-content {
|
||
|
|
display: block;
|
||
|
|
flex-grow: 1;
|
||
|
|
box-sizing: border-box;
|
||
|
|
margin: 0;
|
||
|
|
overflow: auto;
|
||
|
|
max-height: $mat-dialog-content-max-height;
|
||
|
|
|
||
|
|
> :first-child {
|
||
|
|
margin-top: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
> :last-child {
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Nested to maintain the old specificity.
|
||
|
|
.mat-mdc-dialog-container & {
|
||
|
|
@include _use-mdc-tokens {
|
||
|
|
@include token-utils.create-token-slot(color, supporting-text-color, $_emit-fallbacks);
|
||
|
|
@include token-utils.create-token-slot(font-family, supporting-text-font,
|
||
|
|
if($_emit-fallbacks, inherit, null));
|
||
|
|
@include token-utils.create-token-slot(line-height, supporting-text-line-height,
|
||
|
|
$_emit-fallbacks);
|
||
|
|
@include token-utils.create-token-slot(font-size, supporting-text-size, $_emit-fallbacks);
|
||
|
|
@include token-utils.create-token-slot(font-weight, supporting-text-weight, $_emit-fallbacks);
|
||
|
|
@include token-utils.create-token-slot(letter-spacing, supporting-text-tracking,
|
||
|
|
$_emit-fallbacks);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@include _use-mat-tokens {
|
||
|
|
// These styles need a bit more specificity.
|
||
|
|
.mat-mdc-dialog-container & {
|
||
|
|
@include token-utils.create-token-slot(padding, content-padding, $_emit-fallbacks);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Note: we can achieve this with a `:has` selector, but it results in an
|
||
|
|
// increased specificity which breaks a lot of internal clients.
|
||
|
|
.mat-mdc-dialog-container-with-actions & {
|
||
|
|
@include token-utils.create-token-slot(padding, with-actions-content-padding,
|
||
|
|
$_emit-fallbacks);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-mdc-dialog-container .mat-mdc-dialog-title + & {
|
||
|
|
padding-top: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-mdc-dialog-actions {
|
||
|
|
display: flex;
|
||
|
|
position: relative;
|
||
|
|
flex-shrink: 0;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: flex-end;
|
||
|
|
box-sizing: border-box;
|
||
|
|
min-height: 52px;
|
||
|
|
margin: 0;
|
||
|
|
padding: 8px;
|
||
|
|
border-top: 1px solid transparent;
|
||
|
|
|
||
|
|
// For backwards compatibility, actions align at start by default. MDC usually
|
||
|
|
// aligns actions at the end of the container.
|
||
|
|
@include _use-mat-tokens {
|
||
|
|
@include token-utils.create-token-slot(padding, actions-padding, $_emit-fallbacks);
|
||
|
|
@include token-utils.create-token-slot(justify-content, actions-alignment, $_emit-fallbacks);
|
||
|
|
}
|
||
|
|
|
||
|
|
@include cdk.high-contrast {
|
||
|
|
border-top-color: CanvasText;
|
||
|
|
}
|
||
|
|
|
||
|
|
// .mat-mdc-dialog-actions-align-{start|center|end} are set by directive input "align"
|
||
|
|
// [align='start'], [align='center'] and [align='right'] are kept for backwards compability
|
||
|
|
&.mat-mdc-dialog-actions-align-start, &[align='start'] {
|
||
|
|
justify-content: start;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.mat-mdc-dialog-actions-align-center, &[align='center'] {
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.mat-mdc-dialog-actions-align-end, &[align='end'] {
|
||
|
|
justify-content: flex-end;
|
||
|
|
}
|
||
|
|
|
||
|
|
// MDC applies horizontal margin to buttons that have an explicit `mdc-dialog__button`
|
||
|
|
// class applied. We can't set this class for projected buttons that consumers of the
|
||
|
|
// dialog create. To workaround this, we select all Material Design buttons we know and
|
||
|
|
// add the necessary spacing similar to how MDC applies spacing.
|
||
|
|
.mat-button-base + .mat-button-base,
|
||
|
|
.mat-mdc-button-base + .mat-mdc-button-base {
|
||
|
|
margin-left: $mat-dialog-button-horizontal-margin;
|
||
|
|
|
||
|
|
[dir='rtl'] & {
|
||
|
|
margin-left: 0;
|
||
|
|
margin-right: $mat-dialog-button-horizontal-margin;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// When a component is passed into the dialog, the host element interrupts
|
||
|
|
// the `display:flex` from affecting the dialog title, content, and
|
||
|
|
// actions. To fix this, we make the component host `display: contents` by
|
||
|
|
// marking its host with the `mat-mdc-dialog-component-host` class.
|
||
|
|
//
|
||
|
|
// Note that this problem does not exist when a template ref is used since
|
||
|
|
// the title, contents, and actions are then nested directly under the
|
||
|
|
// dialog surface.
|
||
|
|
.mat-mdc-dialog-component-host {
|
||
|
|
display: contents;
|
||
|
|
}
|
||
|
|
|