applications/calendar/src/app/styles/_monthgrid.scss

   1 .calendar-monthgrid {
   2         &-day {
   3                 color: var(--text-norm);
   4
   5                 &-number {
   6                         display: inline-flex;
   7                         inline-size: 1.75em;
   8                         block-size: 1.75em;
   9                         border-radius: var(--border-radius-md);
  10                         border: 1px solid transparent;
  11                         transition: 0.15s easing(ease-out-quint);
  12                 }
  13
  14                 &:hover &-number,
  15                 &:focus &-number {
  16                         background-color: var(--interaction-default-hover);
  17                 }
  18
  19                 &:active &-number {
  20                         background-color: var(--interaction-default-active);
  21                 }
  22
  23                 @include media('screen') {
  24                         &[aria-current='date'] {
  25                                 .calendar-monthgrid-day-number {
  26                                         color: var(--primary);
  27                                         border-color: var(--primary);
  28                                         font-weight: var(--font-weight-bold);
  29                                 }
  30
  31                                 &:hover,
  32                                 &:focus {
  33                                         .calendar-monthgrid-day-number {
  34                                                 color: var(--interaction-norm-hover);
  35                                                 border-color: var(--interaction-norm-hover);
  36                                                 background-color: var(--interaction-default-hover);
  37                                         }
  38                                 }
  39
  40                                 &:active {
  41                                         .calendar-monthgrid-day-number {
  42                                                 color: var(--interaction-norm-active);
  43                                                 border-color: var(--interaction-norm-active);
  44                                                 background-color: var(--interaction-default-active);
  45                                         }
  46                                 }
  47                         }
  48
  49                         @include media('<=small') {
  50                                 &[aria-pressed='true'] &-number {
  51                                         background-color: var(--primary);
  52                                         color: var(--primary-contrast);
  53                                         font-weight: var(--font-weight-bold);
  54                                 }
  55                         }
  56                 }
  57         }
  58 }