Skip to content

Commit 94ec041

Browse files
crisbetoandrewseguin
authored andcommitted
fix(material-experimental/mdc-dialog): reduce amount of generated CSS
Reduces the amount of CSS generated by the MDC-based dialog by disabling CSS variable callbacks. Also combines a couple of selectors targeting the same element.
1 parent 63544f9 commit 94ec041

File tree

1 file changed

+13
-13
lines changed

1 file changed

+13
-13
lines changed

src/material-experimental/mdc-dialog/dialog.scss

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -42,15 +42,22 @@ $mat-dialog-button-horizontal-margin: 8px !default;
4242
@include mdc-dialog-structure-overrides.private-dialog-structure-overrides(
4343
$mat-dialog-content-max-height);
4444

45-
// Apply the theming slots to the container using an initial set of
46-
// values that will be overridden in the theme styles.
4745
.mat-mdc-dialog-container {
48-
@include mdc-dialog-theme.theme-styles($_dialog-initial-theme);
49-
}
46+
// Apply the theming slots to the container using an initial set of
47+
// values that will be overridden in the theme styles.
48+
@include mdc-helpers.disable-fallback-declarations {
49+
@include mdc-dialog-theme.theme-styles($_dialog-initial-theme);
50+
}
5051

51-
// The dialog container is focusable. We remove the default outline shown in browsers.
52-
.mat-mdc-dialog-container {
52+
// The dialog container is focusable. We remove the default outline shown in browsers.
5353
outline: 0;
54+
55+
// Angular Material supports disabling all animations when NoopAnimationsModule is imported.
56+
// TODO(devversion): Look into using MDC's Sass queries to separate the animation styles and
57+
// conditionally add them. Consider the size cost and churn when deciding whether to switch.
58+
&._mat-animation-noopable .mdc-dialog__container {
59+
transition: none;
60+
}
5461
}
5562

5663
// MDC sets the display behavior for title and actions, but not for content. Since we support
@@ -87,10 +94,3 @@ $mat-dialog-button-horizontal-margin: 8px !default;
8794
}
8895
}
8996
}
90-
91-
// Angular Material supports disabling all animations when NoopAnimationsModule is imported.
92-
// TODO(devversion): Look into using MDC's Sass queries to separate the animation styles and
93-
// conditionally add them. Consider the size cost and churn when deciding whether to switch.
94-
.mat-mdc-dialog-container._mat-animation-noopable .mdc-dialog__container {
95-
transition: none;
96-
}

0 commit comments

Comments
 (0)