diff --git a/lib/core/src/lib/styles/_index.scss b/lib/core/src/lib/styles/_index.scss index 87e279c3ef..9c0529ac59 100644 --- a/lib/core/src/lib/styles/_index.scss +++ b/lib/core/src/lib/styles/_index.scss @@ -2,3 +2,4 @@ @forward './flex'; @forward './mixins'; @forward './mat-selectors'; +@forward './mat-datetimepicker'; diff --git a/lib/core/src/lib/styles/_mat-datetimepicker.scss b/lib/core/src/lib/styles/_mat-datetimepicker.scss new file mode 100644 index 0000000000..e691877073 --- /dev/null +++ b/lib/core/src/lib/styles/_mat-datetimepicker.scss @@ -0,0 +1,90 @@ +@use 'mat-selectors' as ms; + +@mixin override-mat-date-timepicker( + $primary-color, + $on-primary-color, + $sys-background, + $on-surface, + $surface-container-highest, + $on-surface-variant +) { + #{ms.$mat-datetimepicker-calendar-header} { + background-color: $primary-color; + color: $on-primary-color; + } + + #{ms.$mat-datetimepicker-calendar} { + #{ms.$mat-datetimepicker-calendar-content} { + background-color: $sys-background; + color: $on-surface; + #{ms.$mat-datetimepicker-clock} { + background-color: $surface-container-highest; + #{ms.$mat-datetimepicker-clock-cell} { + color: $on-surface; + } + } + } + } + + #{ms.$mat-datetimepicker-calendar-body-cell} { + color: $on-surface; + #{ms.$mat-datetimepicker-calendar-body-cell-content} { + color: $on-surface; + } + } + + #{ms.$mat-datetimepicker-calendar-body-cell-content} { + &#{ms.$mat-datetimepicker-calendar-body-selected} { + background-color: $primary-color; + color: $on-surface; + color: $on-primary-color; + } + + &#{ms.$mat-datetimepicker-calendar-body-disabled} > #{ms.$mat-datetimepicker-calendar-body-selected} { + background-color: $primary-color; + opacity: 0.4; + color: $on-primary-color; + } + + &#{ms.$mat-datetimepicker-calendar-body-today} { + &:not(#{ms.$mat-datetimepicker-calendar-body-selected}) { + border-color: $primary-color; + } + + &#{ms.$mat-datetimepicker-calendar-body-selected} { + box-shadow: inset 0 0 0 1px $on-primary-color; + } + } + } + + #{ms.$mat-datetimepicker-clock-center} { + background-color: $primary-color; + } + + #{ms.$mat-datetimepicker-clock-hand} { + background-color: $primary-color; + + &::before { + background-color: $primary-color; + } + } + + #{ms.$mat-datetimepicker-clock} { + #{ms.$mat-datetimepicker-clock-cell} { + &#{ms.$mat-datetimepicker-clock-cell-selected} { + color: $on-primary-color; + background-color: color-mix(in srgb, $primary-color 95%, white); + } + } + } + + #{ms.$mat-datetimepicker-calendar-body-disabled} + > #{ms.$mat-datetimepicker-calendar-body-cell-content}:not(#{ms.$mat-datetimepicker-calendar-body-selected}) { + opacity: 0.4; + color: $on-surface; + } + + #{ms.$mat-datetimepicker-calendar-table-header} { + color: $on-surface-variant; + } +} diff --git a/lib/core/src/lib/styles/_mat-selectors.scss b/lib/core/src/lib/styles/_mat-selectors.scss index 31fa2b1208..af4b49cc10 100644 --- a/lib/core/src/lib/styles/_mat-selectors.scss +++ b/lib/core/src/lib/styles/_mat-selectors.scss @@ -77,3 +77,12 @@ $mat-datetimepicker-calendar-header-time: '.mat-datetimepicker-calendar-header-t $mat-datetimepicker-calendar-content: '.mat-datetimepicker-calendar-content'; $mat-datetimepicker-calendar-body-disabled: '.mat-datetimepicker-calendar-body-disabled'; $mat-datetimepicker-toggle: '.mat-datetimepicker-toggle'; +$mat-datetimepicker-clock: '.mat-datetimepicker-clock'; +$mat-datetimepicker-clock-cell: '.mat-datetimepicker-clock-cell'; +$mat-datetimepicker-calendar-body-cell-content: '.mat-datetimepicker-calendar-body-cell-content'; +$mat-datetimepicker-calendar-body-selected: '.mat-datetimepicker-calendar-body-selected'; +$mat-datetimepicker-calendar-body-today: '.mat-datetimepicker-calendar-body-today'; +$mat-datetimepicker-clock-center: '.mat-datetimepicker-clock-center'; +$mat-datetimepicker-clock-hand: '.mat-datetimepicker-clock-hand'; +$mat-datetimepicker-clock-cell-selected: '.mat-datetimepicker-clock-cell-selected'; +$mat-datetimepicker-calendar-body-cell: '.mat-datetimepicker-calendar-body-cell';