Skip to content

Commit

Permalink
style(dialog): Move dialog scaling from container to surface.
Browse files Browse the repository at this point in the history
PiperOrigin-RevId: 566703990
  • Loading branch information
material-web-copybara authored and Copybara-Service committed Sep 19, 2023
1 parent a246a44 commit d153db6
Showing 1 changed file with 14 additions and 2 deletions.
16 changes: 14 additions & 2 deletions packages/mdc-dialog/_mixins.scss
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,6 @@
justify-content: space-around; // Ensure Safari centers the dialog (because it treats the container's width oddly)
box-sizing: border-box;
height: 100%;
transform: scale(0.8);
opacity: 0;
// This element is necessary for IE 11 and needs to have `height: 100%`.
// Let clicks on element fall through to scrim element underneath.
Expand All @@ -136,6 +135,8 @@
// IE 11: Otherwise, scrolling content in `mdc-dialog__content` overflows.
overflow-y: auto;
outline: 0;
// Dialog scales up as it opens.
transform: scale(0.8);

@include rtl.rtl {
@include rtl.ignore-next-line();
Expand Down Expand Up @@ -409,6 +410,12 @@
}

.mdc-dialog__container {
@include feature-targeting.targets($feat-structure) {
transform: none;
}
}

.mdc-dialog__surface {
@include feature-targeting.targets($feat-structure) {
// Dialog container scales up while opening, but should remain scaled up while closing
transform: none;
Expand All @@ -425,11 +432,16 @@

.mdc-dialog__container {
@include feature-targeting.targets($feat-structure) {
transform: none;
opacity: 1;
}
}

.mdc-dialog__surface {
@include feature-targeting.targets($feat-structure) {
transform: none;
}
}

&.mdc-dialog__surface-scrim--shown {
.mdc-dialog__surface-scrim {
@include feature-targeting.targets($feat-structure) {
Expand Down

0 comments on commit d153db6

Please sign in to comment.