feat(datepicker): align with 2018 material design spec (#12693)

Aligns the datepicker panel with the latest Material Design spec. Note that this only handles the datepicker in popup mode, the touch mode will be handled when we align the dialog.

Author: crisbeto

src/lib/datepicker/datepicker-animations.ts

@@ -12,9 +12,6 @@ import {
   transition,
   trigger,
   AnimationTriggerMetadata,
-  group,
-  query,
-  animateChild,
 } from '@angular/animations';
 
 /** Animations used by the Material datepicker. */
@@ -24,19 +21,24 @@ export const matDatepickerAnimations: {
 } = {
   /** Transforms the height of the datepicker's calendar. */
   transformPanel: trigger('transformPanel', [
-    state('void', style({opacity: 0, transform: 'scale(1, 0)'})),
-    state('enter', style({opacity: 1, transform: 'scale(1, 1)'})),
-    transition('void => enter', group([
-      query('@fadeInCalendar', animateChild()),
-      animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)')
-    ])),
+    state('void', style({
+      opacity: 0,
+      transform: 'scale(1, 0.8)'
+    })),
+    transition('void => enter',  animate('120ms cubic-bezier(0, 0, 0.2, 1)', style({
+      opacity: 1,
+      transform: 'scale(1, 1)'
+    }))),
     transition('* => void', animate('100ms linear', style({opacity: 0})))
   ]),
 
   /** Fades in the content of the calendar. */
   fadeInCalendar: trigger('fadeInCalendar', [
     state('void', style({opacity: 0})),
     state('enter', style({opacity: 1})),
-    transition('void => *', animate('400ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)'))
+
+    // TODO(crisbeto): this animation should be removed since it isn't quite on spec, but we
+    // need to keep it until #12440 gets in, otherwise the exit animation will look glitchy.
+    transition('void => *', animate('120ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)'))
   ])
 };

src/lib/datepicker/datepicker-content.scss

@@ -25,10 +25,10 @@ $mat-datepicker-touch-max-height: 788px;
 
 
 .mat-datepicker-content {
-  @include mat-elevation(8);
+  @include mat-elevation(4);
 
   display: block;
-  border-radius: 2px;
+  border-radius: 4px;
 
   .mat-calendar {
     width: $mat-datepicker-non-touch-calendar-width;