Skip to content

Commit

Permalink
fix(material-experimental/mdc-dialog): reduce amount of generated CSS
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
crisbeto authored and forsti0506 committed Apr 3, 2022
1 parent 7cbec03 commit 3eae33d
Showing 1 changed file with 13 additions and 13 deletions.
26 changes: 13 additions & 13 deletions src/material-experimental/mdc-dialog/dialog.scss
Original file line number Diff line number Diff line change
Expand Up @@ -42,15 +42,22 @@ $mat-dialog-button-horizontal-margin: 8px !default;
@include mdc-dialog-structure-overrides.private-dialog-structure-overrides(
$mat-dialog-content-max-height);

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

// The dialog container is focusable. We remove the default outline shown in browsers.
.mat-mdc-dialog-container {
// The dialog container is focusable. We remove the default outline shown in browsers.
outline: 0;

// Angular Material supports disabling all animations when NoopAnimationsModule is imported.
// TODO(devversion): Look into using MDC's Sass queries to separate the animation styles and
// conditionally add them. Consider the size cost and churn when deciding whether to switch.
&._mat-animation-noopable .mdc-dialog__container {
transition: none;
}
}

// MDC sets the display behavior for title and actions, but not for content. Since we support
Expand Down Expand Up @@ -87,10 +94,3 @@ $mat-dialog-button-horizontal-margin: 8px !default;
}
}
}

// Angular Material supports disabling all animations when NoopAnimationsModule is imported.
// TODO(devversion): Look into using MDC's Sass queries to separate the animation styles and
// conditionally add them. Consider the size cost and churn when deciding whether to switch.
.mat-mdc-dialog-container._mat-animation-noopable .mdc-dialog__container {
transition: none;
}

0 comments on commit 3eae33d

Please sign in to comment.