feat(dialog): align with 2018 material design spec

Aligns the dialog with the most-recent Material Design spec.

BREAKING CHANGES:
* The `matDialogAnimations.slideDialog` symbol has been renamed to `matDialogAnimations.dialogContainer`.

Author: crisbeto

src/cdk/overlay/_overlay.scss

@@ -6,7 +6,7 @@ $cdk-z-index-overlay: 1000;
 $cdk-z-index-overlay-backdrop: 1000;
 
 // Background color for all of the backdrops
-$cdk-overlay-dark-backdrop-background: rgba(0, 0, 0, 0.288);
+$cdk-overlay-dark-backdrop-background: rgba(0, 0, 0, 0.32);
 
 // Default backdrop animation is based on the Material Design swift-ease-out.
 $backdrop-animation-duration: 400ms !default;

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

@@ -2,3 +2,12 @@
   max-width: 405px;
   margin: 20px 0;
 }
+
+button {
+  margin-right: 8px;
+
+  [dir='rtl'] & {
+    margin-left: 8px;
+    margin-right: 0;
+  }
+}

src/lib/dialog/dialog-animations.ts

@@ -14,19 +14,26 @@ import {
   AnimationTriggerMetadata,
 } from '@angular/animations';
 
+const animationBody = [
+  // Note: The `enter` animation transitions to `transform: none`, because for some reason
+  // specifying the transform explicitly, causes IE both to blur the dialog content and
+  // decimate the animation performance. Leaving it as `none` solves both issues.
+  state('void', style({opacity: 0, transform: 'scale(0.7)'})),
+  state('enter', style({transform: 'none'})),
+  transition('* => enter', animate('150ms cubic-bezier(0, 0, 0.2, 1)',
+      style({transform: 'none', opacity: 1}))),
+  transition('enter => void, enter => exit',
+      animate('75ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({opacity: 0}))),
+];
+
 /** Animations used by MatDialog. */
 export const matDialogAnimations: {
+  readonly dialogContainer: AnimationTriggerMetadata;
   readonly slideDialog: AnimationTriggerMetadata;
 } = {
-  /** Animation that slides the dialog in and out of view and fades the opacity. */
-  slideDialog: trigger('slideDialog', [
-    // Note: The `enter` animation doesn't transition to something like `translate3d(0, 0, 0)
-    // scale(1)`, because for some reason specifying the transform explicitly, causes IE both
-    // to blur the dialog content and decimate the animation performance. Leaving it as `none`
-    // solves both issues.
-    state('enter', style({ transform: 'none', opacity: 1 })),
-    state('void', style({ transform: 'translate3d(0, 25%, 0) scale(0.9)', opacity: 0 })),
-    state('exit', style({ transform: 'translate3d(0, 25%, 0)', opacity: 0 })),
-    transition('* => *', animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)')),
-  ])
+  /** Animation that is applied on the dialog container by defalt. */
+  dialogContainer: trigger('dialogContainer', animationBody),
+
+  /** @deprecated @breaking-change 8.0.0 Use `matDialogAnimations.dialogContainer` instead. */
+  slideDialog: trigger('slideDialog', animationBody)
 };

src/lib/dialog/dialog-container.ts

@@ -55,7 +55,7 @@ export function throwMatDialogContentAlreadyAttachedError() {
   // Using OnPush for dialogs caused some G3 sync issues. Disabled until we can track them down.
   // tslint:disable-next-line:validate-decorators
   changeDetection: ChangeDetectionStrategy.Default,
-  animations: [matDialogAnimations.slideDialog],
+  animations: [matDialogAnimations.dialogContainer],
   host: {
     'class': 'mat-dialog-container',
     'tabindex': '-1',
@@ -65,9 +65,9 @@ export function throwMatDialogContentAlreadyAttachedError() {
     '[attr.aria-labelledby]': '_config.ariaLabel ? null : _ariaLabelledBy',
     '[attr.aria-label]': '_config.ariaLabel',
     '[attr.aria-describedby]': '_config.ariaDescribedBy || null',
-    '[@slideDialog]': '_state',
-    '(@slideDialog.start)': '_onAnimationStart($event)',
-    '(@slideDialog.done)': '_onAnimationDone($event)',
+    '[@dialogContainer]': '_state',
+    '(@dialogContainer.start)': '_onAnimationStart($event)',
+    '(@dialogContainer.done)': '_onAnimationDone($event)',
   },
 })
 export class MatDialogContainer extends BasePortalOutlet {

src/lib/dialog/dialog.scss

@@ -4,7 +4,7 @@
 
 
 $mat-dialog-padding: 24px !default;
-$mat-dialog-border-radius: 2px !default;
+$mat-dialog-border-radius: 4px !default;
 $mat-dialog-max-height: 65vh !default;
 $mat-dialog-button-margin: 8px !default;
 
@@ -47,9 +47,11 @@ $mat-dialog-button-margin: 8px !default;
 }
 
 .mat-dialog-actions {
-  padding: $mat-dialog-padding / 2 0;
+  padding: 8px 0;
   display: flex;
   flex-wrap: wrap;
+  min-height: 52px;
+  align-items: center;
 
   // Pull the actions down to avoid their padding stacking with the dialog's padding.
   margin-bottom: -$mat-dialog-padding;