Skip to content

Commit 00b7233

Browse files
crisbetommalerba
authored andcommitted
feat(dialog): align with 2018 material design spec (#12705)
Aligns the dialog with the most-recent Material Design spec. BREAKING CHANGES: * The `matDialogAnimations.slideDialog` symbol has been renamed to `matDialogAnimations.dialogContainer`. ![angular_material_-_google_chrome_2018-08-16_20-43-44](https://user-images.githubusercontent.com/4450522/44231568-da0d2780-a19e-11e8-9836-4f1b15f9bcc2.png) ![angular_material_-_google_chrome_2018-08-16_21-30-17](https://user-images.githubusercontent.com/4450522/44231576-e09b9f00-a19e-11e8-9fae-8ad9cf0be8e5.png)
1 parent 484dc8b commit 00b7233

File tree

3 files changed

+14
-3
lines changed

3 files changed

+14
-3
lines changed

src/cdk/overlay/_overlay.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ $cdk-z-index-overlay: 1000;
66
$cdk-z-index-overlay-backdrop: 1000;
77

88
// Background color for all of the backdrops
9-
$cdk-overlay-dark-backdrop-background: rgba(0, 0, 0, 0.288);
9+
$cdk-overlay-dark-backdrop-background: rgba(0, 0, 0, 0.32);
1010

1111
// Default backdrop animation is based on the Material Design swift-ease-out.
1212
$backdrop-animation-duration: 400ms !default;

src/demo-app/dialog/dialog-demo.scss

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,12 @@
22
max-width: 405px;
33
margin: 20px 0;
44
}
5+
6+
button {
7+
margin-right: 8px;
8+
9+
[dir='rtl'] & {
10+
margin-left: 8px;
11+
margin-right: 0;
12+
}
13+
}

src/lib/dialog/dialog.scss

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44

55
$mat-dialog-padding: 24px !default;
6-
$mat-dialog-border-radius: 2px !default;
6+
$mat-dialog-border-radius: 4px !default;
77
$mat-dialog-max-height: 65vh !default;
88
$mat-dialog-button-margin: 8px !default;
99

@@ -44,9 +44,11 @@ $mat-dialog-button-margin: 8px !default;
4444
}
4545

4646
.mat-dialog-actions {
47-
padding: $mat-dialog-padding / 2 0;
47+
padding: 8px 0;
4848
display: flex;
4949
flex-wrap: wrap;
50+
min-height: 52px;
51+
align-items: center;
5052

5153
// Pull the actions down to avoid their padding stacking with the dialog's padding.
5254
margin-bottom: -$mat-dialog-padding;

0 commit comments

Comments
 (0)