From f679441881df4234a58c8298e62a05d5a7c288fa Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Wed, 15 Aug 2018 23:00:28 +0200
Subject: [PATCH] feat(datepicker): align with 2018 material design spec

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.
---
 src/lib/datepicker/datepicker-animations.ts | 22 +++++++++++----------
 src/lib/datepicker/datepicker-content.scss  |  4 ++--
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/lib/datepicker/datepicker-animations.ts b/src/lib/datepicker/datepicker-animations.ts
index dc396c1e9c28..a84f8b4149cb 100644
--- a/src/lib/datepicker/datepicker-animations.ts
+++ b/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,12 +21,14 @@ 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})))
   ]),
 
@@ -37,6 +36,9 @@ export const matDatepickerAnimations: {
   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)'))
   ])
 };
diff --git a/src/lib/datepicker/datepicker-content.scss b/src/lib/datepicker/datepicker-content.scss
index cba88c32e08d..c3c4b03aafce 100644
--- a/src/lib/datepicker/datepicker-content.scss
+++ b/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;