@vaadin/vaadin-lumo-styles/src/components/date-picker-month-calendar.css

Lumo is a design system foundation for modern web applications, used by Vaadin components

/**
 * @license
 * Copyright (c) 2017 - 2026 Vaadin Ltd.
 * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
 */
@media lumo_components_date-picker-month-calendar {
  :host {
    display: block;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    font-size: var(--lumo-font-size-m);
    color: var(--lumo-body-text-color);
    text-align: center;
    padding: 0 var(--lumo-space-xs);
    --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
    --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
    --_selection-color: var(--vaadin-selection-color, var(--lumo-primary-color));
    --_selection-color-text: var(--vaadin-selection-color-text, var(--lumo-primary-text-color));
  }

  #monthGrid {
    width: 100%;
    border-collapse: collapse;
  }

  #days-container tr,
  #weekdays-container tr {
    display: flex;
  }

  [part~='disabled'] {
    pointer-events: none;
  }

  /* Month header */

  [part='month-header'] {
    color: var(--lumo-header-text-color);
    font-size: var(--lumo-font-size-l);
    line-height: 1;
    font-weight: 500;
    margin-bottom: var(--lumo-space-m);
  }

  /* Week days and numbers */

  [part='weekdays'],
  [part='weekday'],
  [part='week-number'] {
    font-size: var(--lumo-font-size-xxs);
    line-height: 1;
    color: var(--lumo-secondary-text-color);
  }

  [part='weekdays'] {
    margin-bottom: var(--lumo-space-s);
  }

  [part='weekday']:empty,
  [part='week-number'] {
    flex-shrink: 0;
    padding: 0;
    width: var(--lumo-size-xs);
  }

  [part='week-number'][hidden],
  [part='weekday'][hidden] {
    display: none;
  }

  /* Date and week number cells */

  [part~='date'],
  [part='week-number'] {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--lumo-size-m);
    position: relative;
  }

  [part~='date'] {
    outline: none;
    transition: color 0.1s;
  }

  [part~='date']:not(:empty) {
    cursor: var(--lumo-clickable-cursor);
  }

  [part='weekday'],
  [part~='date'] {
    width: calc(100% / 7);
    padding: 0;
    font-weight: normal;
  }

  :host([week-numbers]) [part='weekday']:not(:empty),
  :host([week-numbers]) [part~='date'] {
    width: calc((100% - var(--lumo-size-xs)) / 7);
  }

  /* Today date */

  [part~='date'][part~='today'] {
    color: var(--_selection-color-text);
  }

  /* Focused date */

  [part~='date']::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 2em;
    min-height: 2em;
    width: 80%;
    height: 80%;
    max-height: 100%;
    max-width: 100%;
    border-radius: var(--lumo-border-radius-m);
  }

  [part~='date'][part~='focused']::before {
    box-shadow:
      0 0 0 1px var(--lumo-base-color),
      0 0 0 calc(var(--_focus-ring-width) + 1px) var(--_focus-ring-color);
  }

  :host(:not([focused])) [part~='date'][part~='focused']::before {
    animation: vaadin-date-picker-month-calendar-focus-date 1.4s infinite;
  }

  @keyframes vaadin-date-picker-month-calendar-focus-date {
    50% {
      box-shadow:
        0 0 0 1px var(--lumo-base-color),
        0 0 0 calc(var(--_focus-ring-width) + 1px) transparent;
    }
  }

  [part~='date']:not(:empty):not([part~='disabled']):not([part~='selected']):hover::before {
    background-color: var(--lumo-primary-color-10pct);
  }

  [part~='date'][part~='selected'] {
    color: var(--lumo-primary-contrast-color);
  }

  [part~='date'][part~='selected']::before {
    background-color: var(--_selection-color);
  }

  [part~='date'][part~='disabled'] {
    color: var(--lumo-disabled-text-color);
  }

  @media (pointer: coarse) {
    [part~='date']:hover:not([part~='selected'])::before,
    :host(:not([focus-ring])) [part~='focused']:not([part~='selected'])::before {
      display: none;
    }

    [part~='date']:not(:empty):not([part~='disabled']):active::before {
      display: block;
    }

    :host(:not([focus-ring])) [part~='date'][part~='selected']::before {
      box-shadow: none;
    }
  }
  /* Disabled */

  :host([disabled]) * {
    color: var(--lumo-disabled-text-color) !important;
  }

  @media (forced-colors: active) {
    [part~='date'][part~='focused'] {
      outline: 1px solid;
    }

    [part~='date'][part~='selected'] {
      outline: 3px solid;
    }
  }
}