diff --git a/src/components/calendar/calendar-theme.scss b/src/components/calendar/calendar-theme.scss index 148de3a242a..34eab1813dc 100644 --- a/src/components/calendar/calendar-theme.scss +++ b/src/components/calendar/calendar-theme.scss @@ -1,28 +1,36 @@ // Theme styles for mdCalendar. +.md-calendar { + color: '{{foreground-2}}'; + + tr:last-child td { + border-bottom-color: '{{background-200}}'; + } +} + .md-calendar-day-header { - background-color: #eeeeee; // grey-200 - color: #616161; // need spec; currently grey-700 + background-color: '{{background-200}}'; // grey-200 + color: '{{foreground-2}}'; // grey-700 } .md-calendar-date.md-calendar-date-today { - color: #2196f3; // blue-500 + color: '{{primary-500}}'; // blue-500 } .md-calendar-date:focus { .md-calendar-date-selection-indicator { - background-color: #e0e0e0; // grey-300 + background-color: '{{background-300}}'; // grey-300 } } .md-calendar-date-selection-indicator:hover { - background-color: #e0e0e0; // grey-300 + background-color: '{{background-300}}'; // grey-300 } // Selected style goes after hover and focus so that it takes priority. .md-calendar-date.md-calendar-selected-date { .md-calendar-date-selection-indicator { - background-color: #2196f3; // blue-500 - color: white; // ? + background-color: '{{primary-500}}'; // blue-500 + color: '{{primary-contrast}}'; // SHOULD BE WHITE (ish) } } diff --git a/src/components/calendar/calendar.js b/src/components/calendar/calendar.js index dd357b295b3..5989e19e2eb 100644 --- a/src/components/calendar/calendar.js +++ b/src/components/calendar/calendar.js @@ -17,14 +17,13 @@ // TODO(jelbourn): read-only state. // TODO(jelbourn): Date "isComplete" logic // TODO(jelbourn): Apple + up / down == PgDown and PgUp - // TODO(jelbourn): Documentation - // TODO(jelbourn): Demo that uses moment.js // TODO(jelbourn): Fix NVDA stealing key presses (IE) ??? - // FUTURE VERSION - // TODO(jelbourn): Animated month transition on ng-model change. - // TODO(jelbourn): Scroll snapping - // TODO(jelbourn): Month headers stick to top when scrolling + // POST RELEASE + // TODO(jelbourn): Animated month transition on ng-model change (virtual-repeat) + // TODO(jelbourn): Scroll snapping (virtual repeat) + // TODO(jelbourn): Remove superfluous row from short months (virtual-repeat) + // TODO(jelbourn): Month headers stick to top when scrolling. // TODO(jelbourn): Previous month opacity is lowered when partially scrolled out of view. // TODO(jelbourn): Support md-calendar standalone on a page (as a tabstop w/ aria-live // announcement and key handling). diff --git a/src/components/calendar/calendar.scss b/src/components/calendar/calendar.scss index 041b8fbe013..dd0fa48cef2 100644 --- a/src/components/calendar/calendar.scss +++ b/src/components/calendar/calendar.scss @@ -122,11 +122,11 @@ md-calendar { // Primary table containing all date cells. Each month is a tbody in this table. .md-calendar { @include md-calendar-table(); - color: rgba(black, 0.7); // secondary // Divider between months. tr:last-child td { - border-bottom: 1px solid #e9e9e9; + border-bottom-width: 1px; + border-bottom-style: solid; } // The divider between months doesn't actualyl change the height of the tbody in which the @@ -136,4 +136,3 @@ md-calendar { border-top: 1px solid transparent; } } - diff --git a/src/components/calendar/datePicker.js b/src/components/calendar/datePicker.js index cf718574b74..df2bd6f9c52 100644 --- a/src/components/calendar/datePicker.js +++ b/src/components/calendar/datePicker.js @@ -2,15 +2,17 @@ 'use strict'; // PRE RELEASE + // TODO(jelbourn): Documentation + // TODO(jelbourn): Demo that uses moment.js // TODO(jelbourn): aria attributes tying together date input and floating calendar. - // TODO(jelbourn): something for mobile (probably calendar panel should take up entire screen) // TODO(jelbourn): make sure this plays well with validation and ngMessages. // TODO(jelbourn): forward more attributes to the internal input (required, autofocus, etc.) // TODO(jelbourn): floating panel open animation (see animation for menu in spec). - // TODO(jelbourn): error state // TODO(jelbourn): auto-grow input to accomodate longer dates - // FUTURE VERSION + // POST RELEASE + // TODO(jelbourn): error state + // TODO(jelbourn): something better for mobile (calendar panel takes up entire screen?) // TODO(jelbourn): input behavior (masking? auto-complete?) // TODO(jelbourn): UTC mode // TODO(jelbourn): RTL