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

   1 .calendar-grid {
   2         &-heading {
   3                 color: var(--text-norm);
   4                 font-weight: var(--font-weight-semibold);
   5
   6                 @include media('>small') {
   7                         flex-wrap: nowrap;
   8                 }
   9
  10                 @include media('>small', '<large') {
  11                         padding-inline: 0;
  12                 }
  13
  14                 &-day {
  15                         @include media('<=small') {
  16                                 inline-size: 100%;
  17                         }
  18
  19                         @include media('>small') {
  20                                 margin-inline-end: rem(2);
  21                         }
  22                 }
  23
  24                 &-number {
  25                         border-radius: var(--border-radius-sm);
  26                         border: 1px solid transparent;
  27                         line-height: 1;
  28                         inline-size: 1.75em;
  29                         block-size: 1.75em;
  30                         transition: 0.15s easing(ease-out-quint);
  31
  32                         @include media('>small') {
  33                                 block-size: rem(28);
  34                                 inline-size: rem(28);
  35                         }
  36                 }
  37
  38                 &:hover &-number,
  39                 &:focus &-number {
  40                         background-color: var(--interaction-default-hover);
  41                 }
  42
  43                 &:active &-number {
  44                         background-color: var(--interaction-default-active);
  45                 }
  46
  47                 @include media('screen') {
  48                         &[aria-current='date'] {
  49                                 .calendar-grid-heading-day {
  50                                         @include media('>small') {
  51                                                 margin-inline-end: rem(6);
  52                                         }
  53                                 }
  54
  55                                 .calendar-grid-heading-number {
  56                                         border-color: var(--primary);
  57                                         color: var(--primary);
  58                                         background-color: var(--interaction-default);
  59                                 }
  60
  61                                 &:hover,
  62                                 &:focus {
  63                                         .calendar-grid-heading-number {
  64                                                 color: var(--interaction-norm-hover);
  65                                                 border-color: var(--interaction-norm-hover);
  66                                                 background-color: var(--interaction-default-hover);
  67                                         }
  68                                 }
  69
  70                                 &:active {
  71                                         .calendar-grid-heading-number {
  72                                                 color: var(--interaction-norm-active);
  73                                                 border-color: var(--interaction-norm-active);
  74                                                 background-color: var(--interaction-default-active);
  75                                         }
  76                                 }
  77                         }
  78                 }
  79
  80                 @include media('<=small') {
  81                         &[aria-pressed='true'] &-number {
  82                                 @include media('screen') {
  83                                         background-color: var(--primary);
  84                                         color: var(--primary-contrast);
  85                                 }
  86                         }
  87                 }
  88         }
  89
  90         &-gridcells {
  91                 border-block-end: $calendar-grid-border;
  92         }
  93
  94         &-dayLine,
  95         &-hourLine,
  96         &-gridcell {
  97                 &::after {
  98                         content: '';
  99                         position: absolute;
 100                         pointer-events: none;
 101                 }
 102         }
 103
 104         &-dayLine {
 105                 &::after {
 106                         block-size: 100%;
 107                         margin-inline-start: -1px;
 108                         border-inline-start: $calendar-grid-border;
 109                 }
 110         }
 111
 112         &-hourLine {
 113                 block-size: $calendar-hour-height;
 114
 115                 &::after {
 116                         inline-size: 100%;
 117                         margin-block-start: -1px;
 118                         border-block-end: $calendar-grid-border;
 119                 }
 120         }
 121
 122         &-gridcell {
 123                 margin-inline-end: $calendar-gridcell-margin;
 124
 125                 &::after {
 126                         border-inline-start: $calendar-grid-border;
 127                         block-size: 100%;
 128                         margin-inline-start: -1px;
 129                 }
 130         }
 131
 132         &-nowHourLine {
 133                 z-index: 8; // Need to be higher than .calendar-eventcell.isSelected's z-index
 134                 inset-inline-start: 0;
 135                 inset-inline-end: -$calendar-gridcell-margin;
 136                 border-block-end: 2px solid var(--primary);
 137                 box-shadow: var(--shadow-norm);
 138                 pointer-events: none;
 139
 140                 &::before {
 141                         content: '';
 142                         position: absolute;
 143                         inset-block-start: rem(-3);
 144                         inset-inline-start: rem(-4);
 145                         inline-size: rem(7);
 146                         block-size: rem(7);
 147                         border-radius: 50%;
 148                         background-color: var(--primary);
 149                 }
 150         }
 151
 152         &-timeBlock {
 153                 block-size: $calendar-hour-height;
 154         }
 155
 156         &-timeText {
 157                 inset-block-start: rem(-10);
 158                 font-size: rem(10);
 159         }
 160 }
 161
 162 .calendar-time-grid {
 163         @include media('print') {
 164                 flex-basis: auto;
 165         }
 166 }