Skip to content

Commit 94ab707

Browse files
crisbetommalerba
authored andcommitted
fix(datepicker): add hover indication to navigation buttons (#18995)
The calendar navigation buttons use `mat-icon-button` which explicitly doesn't have hover indication for some reason (see https://github.com/angular/components/blob/master/src/material/button/button.scss#L13). I'm not exactly sure about the reasoning in `mat-button`, so I decided to scope these changes only to the calendar so we don't cause unexpected behavior. Fixes #18958.
1 parent 76fb193 commit 94ab707

File tree

1 file changed

+4
-0
lines changed

1 file changed

+4
-0
lines changed

src/material/datepicker/calendar.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,10 @@ $mat-calendar-next-icon-transform: translateX(-2px) rotate(45deg);
3535
.mat-calendar-controls {
3636
display: flex;
3737
margin: $mat-calendar-controls-vertical-padding $mat-calendar-controls-side-margin;
38+
39+
.mat-icon-button:hover .mat-button-focus-overlay {
40+
opacity: 0.04;
41+
}
3842
}
3943

4044
.mat-calendar-spacer {

0 commit comments

Comments
 (0)