diff --git a/src/lib/datepicker/_datepicker-theme.scss b/src/lib/datepicker/_datepicker-theme.scss index 693eb77337fd..5cf64b335323 100644 --- a/src/lib/datepicker/_datepicker-theme.scss +++ b/src/lib/datepicker/_datepicker-theme.scss @@ -3,10 +3,32 @@ @mixin mat-datepicker-theme($theme) { + $mat-datepicker-selected-today-box-shadow-width: 1px; $primary: map-get($theme, primary); $foreground: map-get($theme, foreground); $background: map-get($theme, background); + .mat-calendar { + background-color: mat-color($background, card); + } + + .mat-calendar-header { + border-color: mat-color($foreground, divider); + } + + .mat-calendar-arrow { + border-top-color: mat-color($foreground, icon); + } + + .mat-calendar-next-button, + .mat-calendar-previous-button { + color: mat-color($foreground, icon); + } + + .mat-calendar-weekday-table { + color: mat-color($foreground, hint-text); + } + .mat-calendar-table-label { color: mat-color($foreground, secondary-text); } @@ -16,17 +38,27 @@ border-color: transparent; } - .mat-calendar-table-cell-content:hover { - background: mat-color($background, hover); + .mat-calendar-table-cell:hover { + .mat-calendar-table-cell-content:not(.mat-calendar-table-selected) { + background-color: mat-color($background, hover); + } } - .mat-calendar-table-selected, - .mat-calendar-table-selected:hover { - background: mat-color($primary); + .mat-calendar-table-selected { + background-color: mat-color($primary); color: mat-color($primary, default-contrast); } .mat-calendar-table-today { - border-color: mat-color($foreground, divider); + &:not(.mat-calendar-table-selected) { + // Note: though it's not text, the border is a hint about the fact that this is today's date, + // so we use the hint color. + border-color: mat-color($foreground, hint-text); + } + + &.mat-calendar-table-selected { + box-shadow: inset 0 0 0 $mat-datepicker-selected-today-box-shadow-width + mat-color($primary, default-contrast); + } } } diff --git a/src/lib/datepicker/calendar-table.scss b/src/lib/datepicker/calendar-table.scss index 16466a7dac90..c96189cd84ac 100644 --- a/src/lib/datepicker/calendar-table.scss +++ b/src/lib/datepicker/calendar-table.scss @@ -1,4 +1,5 @@ -$mat-calendar-table-font-size: 12px !default; +$mat-calendar-table-font-size: 13px !default; +$mat-calendar-table-header-font-size: 14px !default; $mat-calendar-table-label-padding-start: 5% !default; $mat-calendar-table-label-translation: -6px !default; $mat-calendar-table-cell-min-size: 32px !default; @@ -20,10 +21,14 @@ $mat-calendar-table-cell-content-size: 100% - $mat-calendar-table-cell-content-m } .mat-calendar-table-label { - padding: 0 0 0 $mat-calendar-table-cell-padding; + padding: $mat-calendar-table-cell-padding 0 + $mat-calendar-table-cell-padding $mat-calendar-table-cell-padding; + height: 0; + line-height: 0; transform: translateX($mat-calendar-table-label-translation); text-align: left; - font-weight: normal; + font-size: $mat-calendar-table-header-font-size; + font-weight: bold; } .mat-calendar-table-cell { diff --git a/src/lib/datepicker/calendar.html b/src/lib/datepicker/calendar.html index 4c30a6bd9037..1c4921e792fb 100644 --- a/src/lib/datepicker/calendar.html +++ b/src/lib/datepicker/calendar.html @@ -1,39 +1,44 @@
- -
- - -
+
+ +
+ + +
- - -
{{day}}
+ + +
{{day}}
+ - - +
+ + - - + + +
diff --git a/src/lib/datepicker/calendar.scss b/src/lib/datepicker/calendar.scss index 8192360fad9b..ab0761a96cf5 100644 --- a/src/lib/datepicker/calendar.scss +++ b/src/lib/datepicker/calendar.scss @@ -1,11 +1,34 @@ +$mat-calendar-padding: 8px !default; +$mat-calendar-header-divider-width: 1px !default; +$mat-calendar-controls-vertical-padding: 5%; +// We want to indent to the middle of the first tile. There are 7 tiles, so 100% / 7 / 2. +// Then we back up a little bit since the text in the cells is center-aligned. +$mat-calendar-controls-start-padding: calc(100% / 14 - 6px); +// Same as above, but we back up a little more since the arrow buttons have more padding. +$mat-calendar-controls-end-padding: calc(100% / 14 - 12px); +$mat-calendar-period-font-size: 14px; $mat-calendar-arrow-size: 5px !default; +$mat-calendar-weekday-table-font-size: 11px !default; + .mat-calendar { display: block; } .mat-calendar-header { + border-bottom-width: $mat-calendar-header-divider-width; + border-bottom-style: solid; + padding: $mat-calendar-padding; +} + +.mat-calendar-body { + padding: $mat-calendar-padding; +} + +.mat-calendar-controls { display: flex; + padding: $mat-calendar-controls-vertical-padding $mat-calendar-controls-end-padding + $mat-calendar-controls-vertical-padding $mat-calendar-controls-start-padding; } .mat-calendar-spacer { @@ -20,6 +43,12 @@ $mat-calendar-arrow-size: 5px !default; outline: none; } +.mat-calendar-period-button { + font: inherit; + font-size: $mat-calendar-period-font-size; + font-weight: bold; +} + .mat-calendar-button > svg { vertical-align: middle; } @@ -30,7 +59,18 @@ $mat-calendar-arrow-size: 5px !default; height: 0; border-left: $mat-calendar-arrow-size solid transparent; border-right: $mat-calendar-arrow-size solid transparent; - border-top: $mat-calendar-arrow-size solid; + border-top-width: $mat-calendar-arrow-size; + border-top-style: solid; margin: 0 $mat-calendar-arrow-size; vertical-align: middle; + + .mat-calendar-invert { + transform: rotate(180deg); + } +} + +.mat-calendar-weekday-table { + width: 100%; + text-align: center; + font-size: $mat-calendar-weekday-table-font-size; } diff --git a/src/lib/datepicker/calendar.ts b/src/lib/datepicker/calendar.ts index cd840713e05f..cca226f0de45 100644 --- a/src/lib/datepicker/calendar.ts +++ b/src/lib/datepicker/calendar.ts @@ -62,7 +62,8 @@ export class MdCalendar implements AfterContentInit { /** The label for the current calendar view. */ get _label(): string { - return this._monthView ? this._locale.getCalendarMonthHeaderLabel(this._currentPeriod) : + return this._monthView ? + this._locale.getCalendarMonthHeaderLabel(this._currentPeriod).toLocaleUpperCase() : this._locale.getCalendarYearHeaderLabel(this._currentPeriod); } diff --git a/src/lib/datepicker/month-view.ts b/src/lib/datepicker/month-view.ts index fbfc0c0d7d8c..8fb387b9e358 100644 --- a/src/lib/datepicker/month-view.ts +++ b/src/lib/datepicker/month-view.ts @@ -86,7 +86,7 @@ export class MdMonthView implements AfterContentInit { private _init() { this._selectedDate = this._getDateInCurrentMonth(this.selected); this._todayDate = this._getDateInCurrentMonth(SimpleDate.today()); - this._monthLabel = this._locale.getCalendarMonthHeaderLabel(this.date); + this._monthLabel = this._locale.shortMonths[this.date.month].toLocaleUpperCase(); let firstOfMonth = new SimpleDate(this.date.year, this.date.month, 1); this._firstWeekOffset = @@ -114,6 +114,6 @@ export class MdMonthView implements AfterContentInit { * Returns null if the given Date is in another month. */ private _getDateInCurrentMonth(date: SimpleDate) { - return date && date.month == this.date.month ? date.date : null; + return date && date.month == this.date.month && date.year == this.date.year ? date.date : null; } } diff --git a/src/lib/datepicker/year-view.ts b/src/lib/datepicker/year-view.ts index 7521103f73fa..e49ea0b6b4b8 100644 --- a/src/lib/datepicker/year-view.ts +++ b/src/lib/datepicker/year-view.ts @@ -95,6 +95,6 @@ export class MdYearView implements AfterContentInit { /** Creates an MdCalendarCell for the given month. */ private _createCellForMonth(month: number) { - return new MdCalendarCell(month, this._locale.shortMonths[month]); + return new MdCalendarCell(month, this._locale.shortMonths[month].toLocaleUpperCase()); } }