@universal-material/web/calendar/calendar-base.styles.js

Material web components

import { css } from 'lit';
export const styles = css `
  :host {
    --_date-size: var(--u-calendar-date-size, 40px);
    display: inline-block;
  }

  .calendar {
    display: grid;
    grid-template-columns: repeat(7, 48px);
    align-items: center;
  }

  .calendar-item {
    --u-ripple-border-radius: 9999px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
  }
  .calendar-item:has(.date) {
    cursor: pointer;
  }
  .calendar-item u-ripple {
    padding: 4px;
  }

  .month-button {
    --u-common-button-padding: var(--u-calendar-month-button--padding, 16px);
    color: var(--u-calendar-month-button-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
  }

  .previous-month-button {
    margin-inline-start: auto;
  }

  .week-day {
    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"));
    line-height: var(--u-calendar-week-day-line-height, var(--u-body-l-line-height, 1.5rem));
    font-size: var(--u-calendar-week-day-font-size, var(--u-body-l-font-size, 1rem));
    letter-spacing: var(--u-calendar-week-day-letter-spacing, var(--u-body-l-letter-spacing, 0.03125rem));
    font-weight: var(--u-calendar-week-day-font-weight, var(--u-body-l-font-weight, var(--u-font-weight-regular, 400)));
    color: var(--u-calendar-week-day-color, var(--u-color-on-surface, rgb(29, 27, 32)));
  }

  .date {
    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"));
    line-height: var(--u-calendar-date-line-height, var(--u-body-l-line-height, 1.5rem));
    font-size: var(--u-calendar-date-font-size, var(--u-body-l-font-size, 1rem));
    letter-spacing: var(--u-calendar-date-letter-spacing, var(--u-body-l-letter-spacing, 0.03125rem));
    font-weight: var(--u-calendar-date-font-weight, var(--u-body-l-font-weight, var(--u-font-weight-regular, 400)));
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--_date-size);
    height: var(--_date-size);
    border-radius: var(--u-calendar-date-border-radius, 9999px);
    color: var(--u-calendar-date-color, var(--u-color-on-surface, rgb(29, 27, 32)));
  }

  .date-outside-month .date {
    color: var(--u-calendar-date-out-of-month-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
  }

  .current-date .date {
    border: 1px solid var(--u-calendar-current-date-color, var(--u-color-primary, rgb(103, 80, 164)));
    color: var(--u-calendar-current-date-color, var(--u-color-primary, rgb(103, 80, 164)));
  }

  .selected-date .date {
    background-color: var(--u-calendar-selected-date-background-color, var(--u-color-primary, rgb(103, 80, 164)));
    color: var(--u-calendar-selected-date-color, var(--u-color-on-primary, rgb(255, 255, 255)));
  }

  .date-out-of-month {
    color: var(--u-calendar-date-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
  }
`;
//# sourceMappingURL=calendar-base.styles.js.map