vuestic-ui/dist/esm-node/VaDatePicker.css

Vue 3 UI Framework

:root,
:host {
  /* Font */
  --va-date-picker-font-style: normal;
  --va-date-picker-font-weight: 600;
  --va-date-picker-font-size: 12px;
  --va-date-picker-line-height: 1.25;
  --va-date-picker-weekday-font-size: 9px;
  /* Colors */
  --va-date-picker-color: var(--va-primary);
  --va-date-picker-text-color: inherit;
  /* Sizes */
  --va-date-picker-cell-size: 32px;
  --va-date-picker-cell-gap: 2px;
  --va-date-picker-cell-radius: 4px;
  /* Selected cell */
  --va-date-picker-selected-text: var(--va-text-inverted);
  --va-date-picker-selected-background: var(--va-date-picker-color);
  /* Today cell */
  --va-date-picker-today-background: var(--va-date-picker-color);
  --va-date-picker-today-background-opacity: 0.8;
  /* Weekend */
  --va-date-picker-weekends-color: var(--va-danger);
  /* Focused */
  --va-date-picker-focused-border-color: var(--va-date-picker-color);
  /* Opacity */
  --va-date-picker-cell-opacity: 0.5;
  --va-date-picker-cell-background-opacity-hover: 0.1;
  --va-date-picker-cell-background-opacity-in-range: 0.2;
  --va-date-picker-cell-selected-background-opacity-hover: 0.8;
}
.va-date-picker {
  --va-date-picker-content-height: calc(var(--va-date-picker-cell-size) * 7 + var(--va-date-picker-cell-gap) * 6);
  width: calc(var(--va-date-picker-cell-size) * 7 + var(--va-date-picker-cell-gap) * 6);
  font-family: var(--va-font-family);
  font-style: var(--va-date-picker-font-style);
  font-weight: var(--va-date-picker-font-weight);
  font-size: var(--va-date-picker-font-size);
  line-height: var(--va-date-picker-line-height);
  color: currentColor;
}
.va-date-picker__picker-wrapper {
  height: var(--va-date-picker-content-height);
}
.va-date-picker_without-week-days {
  --va-date-picker-content-height: calc(var(--va-date-picker-cell-size) * 6 + var(--va-date-picker-cell-gap) * 6);
}
.va-date-picker_mobile .va-day-picker,
.va-date-picker_mobile .va-month-picker,
.va-date-picker_mobile .va-year-picker {
  height: 100%;
}
.va-date-picker_disabled {
  opacity: 0.4;
  position: relative;
}
.va-date-picker_disabled::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 100;
}
.va-date-picker-header {
  padding-bottom: 0.25rem;
}