feat(datepicker): add shadow and animation cue for scrolling. Fixes

Closes #4547.

src/components/datepicker/calendar.scss

@@ -8,6 +8,8 @@ $md-calendar-weeks-to-show: 7 !default;
 $md-calendar-month-label-padding: 8px !default;
 $md-calendar-month-label-font-size: 13px !default;
 
+$md-calendar-scroll-cue-shadow-radius: 6px;
+
 $md-calendar-width: (7 * $md-calendar-cell-size) + (2 * $md-calendar-side-padding);
 $md-calendar-height:
  ($md-calendar-weeks-to-show * $md-calendar-cell-size) + $md-calendar-header-height;
@@ -79,9 +81,16 @@ md-calendar {
 
 // Contains the scrolling element (this is the md-virtual-repeat-container).
 .md-calendar-scroll-container {
+ // Add an inset shadow to help cue users that the calendar is scrollable. Use a negative x
+ // offset to push the vertical edge shadow off to the right so that it's cut off by the edge
+ // of the calendar container.
+ box-shadow: inset -3px 3px $md-calendar-scroll-cue-shadow-radius rgba(black, 0.2);
+
  display: inline-block;
  height: $md-calendar-weeks-to-show * $md-calendar-cell-size;
- width: $md-calendar-width;
+
+ // Add the shadow radius to the width so that the shadow os pushed off to the side and cut off.
+ width: $md-calendar-width + $md-calendar-scroll-cue-shadow-radius;
 }
 
 // A single date cell in the calendar table.

src/components/datepicker/datePicker.scss

@@ -163,3 +163,17 @@ md-datepicker[disabled] {
  display: none;
  }
 }
+
+// Animate the calendar inside of the floating calendar pane such that it appears to "scroll" into
+// view while the pane is opening. This is done as a cue to users that the calendar is scrollable.
+.md-datepicker-calendar-pane {
+ .md-calendar {
+ transform: translateY(150px);
+ transition: transform 0.4s $swift-ease-out-timing-function;
+ transition-delay: 0.1s;
+ }
+
+ &.md-pane-open .md-calendar {
+ transform: translateY(0);
+ }
+}