packages/styles/scss/components/_minicalendar.scss

   1 .minicalendar {
   2         // Size of each cell width and height when `fixedSize`property is set.
   3         --fixed-cell-size: #{em(34)};
   4
   5         min-inline-size: rem(150);
   6         max-inline-size: rem(400);
   7         font-size: rem(12);
   8
   9         &-grid,
  10         &-weeknumbers,
  11         &-weekdays,
  12         &-monthdays {
  13                 display: grid;
  14         }
  15
  16         &-weeknumbers,
  17         &-weekdays,
  18         &-monthdays {
  19                 grid-gap: 1px 0;
  20                 user-select: none;
  21
  22                 & > * {
  23                         display: flex;
  24                         justify-content: center;
  25                         align-items: stretch;
  26                         inline-size: var(--cell-width, auto);
  27
  28                         // Chrome since v94 has a jiggling bug provoked by a cascade of minicalendar re-sizings at
  29                         // the threshold for the scrollbar to appear in the sidebar.
  30                         // We use a rather edgy browser check to avoid using aspect-ratio in Chrome because of this bug
  31                         @supports (aspect-ratio: 1 / 1) and (-moz-appearance: none) {
  32                                 aspect-ratio: 1 / 1;
  33                         }
  34
  35                         @supports (not (aspect-ratio: 1 / 1)) or (not (-moz-appearance: none)) {
  36                                 block-size: var(--cell-height, initial);
  37                         }
  38                 }
  39         }
  40
  41         &-grid {
  42                 grid-gap: 1px;
  43
  44                 &:not(.with-weeknumbers) {
  45                         grid-template-columns: 7fr; // It could be 1fr, but well… just for you to understand ^^
  46                         grid-template-rows: auto;
  47                         /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
  48                         grid-template-areas:
  49                                 'weekdays'
  50                                 'monthdays';
  51                 }
  52
  53                 &.with-weeknumbers {
  54                         grid-template-columns: 1fr 1px 7fr;
  55                         grid-template-rows: auto;
  56                         /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
  57                         grid-template-areas:
  58                                 'weeknumbers rule weekdays'
  59                                 'weeknumbers rule monthdays';
  60                 }
  61
  62                 &.is-fixed-size {
  63                         --cell-width: var(--fixed-cell-size);
  64                 }
  65
  66                 // Chrome since v94 has a jiggling bug provoked by a cascade of minicalendar re-sizings at
  67                 // the threshold for the scrollbar to appear in the sidebar.
  68                 // We use a rather edgy browser check to avoid using aspect-ratio in Chrome because of this bug
  69                 @supports (not (aspect-ratio: 1 / 1)) or (not (-moz-appearance: none)) {
  70                         // Ensure the aspect ratio while waiting for aspect-ratio property
  71                         --cell-height: var(--computed-cell-width, var(--fixed-cell-size));
  72                 }
  73         }
  74
  75         &-weeknumbers {
  76                 grid-area: weeknumbers;
  77                 grid-template-columns: 1fr;
  78                 grid-template-rows: repeat(var(--week-count, 4), 1fr);
  79         }
  80
  81         // Use a vertical rule instead of a border the use the grid gaps for spacing
  82         &-vr {
  83                 grid-area: rule;
  84         }
  85
  86         &-weekdays {
  87                 grid-area: weekdays;
  88                 grid-template-columns: repeat(var(--weekdays-count, 7), 1fr);
  89                 grid-template-rows: auto;
  90                 color: var(--text-weak);
  91
  92                 & > * {
  93                         // No buttons for weekdays, so no need to stretch
  94                         align-items: center;
  95                 }
  96
  97                 .current-weekday {
  98                         color: var(--mini-calendar-today-color);
  99                 }
 100         }
 101
 102         &-monthdays {
 103                 grid-area: monthdays;
 104                 grid-template-columns: repeat(var(--cols, 7), 1fr);
 105                 grid-template-rows: repeat(var(--rows, 4), 1fr);
 106         }
 107
 108         &-weeknumber,
 109         &-day {
 110                 @extend .interactive-pseudo;
 111
 112                 position: relative;
 113                 inline-size: 100%;
 114                 border-radius: var(--border-radius-sm);
 115
 116                 &[aria-pressed='true'] {
 117                         background: var(--interaction-weak);
 118                         color: var(--text-norm);
 119
 120                         &:hover {
 121                                 background: var(--interaction-weak-hover);
 122                         }
 123
 124                         &:active {
 125                                 background: var(--interaction-weak-active);
 126                         }
 127                 }
 128         }
 129
 130         &-day {
 131                 // This is the 'selected' and 'current' marker, placed below the number by z-index
 132                 &::before {
 133                         content: '';
 134                         position: absolute;
 135                         inset: 0;
 136                         z-index: 0;
 137                         border-radius: var(--border-radius-sm);
 138                         border: 1px solid transparent;
 139                         pointer-events: none;
 140                         transition: 0.15s easing(ease-out-quad);
 141                 }
 142
 143                 &-number {
 144                         position: relative;
 145                         z-index: 1;
 146                 }
 147
 148                 &--selected {
 149                         &::before {
 150                                 background: var(--interaction-norm);
 151                         }
 152                 }
 153
 154                 &--selected:hover,
 155                 &--selected:focus-visible {
 156                         &::before {
 157                                 background: var(--interaction-norm-hover);
 158                         }
 159                 }
 160
 161                 &--selected:active {
 162                         &::before {
 163                                 background: var(--interaction-norm-active);
 164                         }
 165                 }
 166
 167                 &--selected &-number {
 168                         font-weight: var(--font-weight-bold);
 169                         color: var(--interaction-norm-contrast);
 170                 }
 171
 172                 &[aria-current='date'] {
 173                         font-weight: var(--font-weight-bold);
 174                         color: var(--mini-calendar-today-color);
 175
 176                         &::before,
 177                         &::after {
 178                                 border-color: var(--mini-calendar-today-color);
 179                         }
 180                 }
 181
 182                 &--out-of-month {
 183                         color: var(--text-weak);
 184
 185                         // Separate style of days out of month from the other ones when part of a range
 186                         &[aria-pressed='true'] {
 187                                 background: var(--background-weak);
 188                                 color: var(--text-weak);
 189                         }
 190                 }
 191
 192                 &--range:not(#{&}--range-bound-start) {
 193                         border-start-start-radius: 0;
 194                         border-end-start-radius: 0;
 195                 }
 196
 197                 &--range:not(#{&}--range-bound-end) {
 198                         border-start-end-radius: 0;
 199                         border-end-end-radius: 0;
 200                 }
 201         }
 202 }