From 6d2767fe40ffbbb82820550aa67a12513fe86db2 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Mon, 14 Jun 2021 17:18:37 +0200 Subject: [PATCH] fix(material/datepicker): add focus indication for selected date Currently there's no way to tell when the selected date in the calendar has focus. These changes reuse the styling from when the selected date is today (white circle inside the main circle). Fixes #22883. --- src/material/datepicker/_datepicker-theme.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/material/datepicker/_datepicker-theme.scss b/src/material/datepicker/_datepicker-theme.scss index ef4205f61839..f582f0305cbf 100644 --- a/src/material/datepicker/_datepicker-theme.scss +++ b/src/material/datepicker/_datepicker-theme.scss @@ -37,7 +37,9 @@ $calendar-weekday-table-font-size: 11px !default; } } - .mat-calendar-body-today.mat-calendar-body-selected { + .mat-calendar-body-today.mat-calendar-body-selected, + .cdk-keyboard-focused .mat-calendar-body-active .mat-calendar-body-selected, + .cdk-program-focused .mat-calendar-body-active .mat-calendar-body-selected { box-shadow: inset 0 0 0 $selected-today-box-shadow-width theming.get-color-from-palette($palette, default-contrast); }