diff --git a/src/components/datepicker/calendar.scss b/src/components/datepicker/calendar.scss index 0238f02d0d6..c47ac00b6fc 100644 --- a/src/components/datepicker/calendar.scss +++ b/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. diff --git a/src/components/datepicker/datePicker.scss b/src/components/datepicker/datePicker.scss index 82cdaf67be5..858ac748884 100644 --- a/src/components/datepicker/datePicker.scss +++ b/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); + } +}