Skip to content

Commit

Permalink
feat(datepicker): add shadow and animation cue for scrolling. Fixes
Browse files Browse the repository at this point in the history
Closes angular#4547.
  • Loading branch information
jelbourn authored and kennethcachia committed Sep 23, 2015
1 parent 598bf08 commit a134e38
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 1 deletion.
11 changes: 10 additions & 1 deletion src/components/datepicker/calendar.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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.
Expand Down
14 changes: 14 additions & 0 deletions src/components/datepicker/datePicker.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}

0 comments on commit a134e38

Please sign in to comment.