@dnb/eufemia/components/date-picker/style/themes/dnb-date-picker-theme-ui.css

DNB Eufemia Design System UI Library

/*
* DatePicker theme
*
*/
/*
 * Utilities
 */
.dnb-date-picker__portal .dnb-popover {
  --popover-background-color: var(--color-white);
  --popover-border-radius: 0.25rem;
  box-shadow: var(--shadow-sharp);
}
.dnb-date-picker__container {
  border-radius: 0.25rem;
  background-color: var(--color-white);
}
.dnb-date-picker--inline .dnb-date-picker__container {
  box-shadow: var(--shadow-sharp);
}
.dnb-date-picker__addon::after, .dnb-date-picker__calendar::after {
  background-color: var(--color-black-8);
}
.dnb-date-picker__header {
  --gap: 0.25rem;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  gap: var(--gap);
}
.dnb-date-picker__header::after {
  background-color: var(--color-black-8);
}
.dnb-date-picker__header--only-month-label {
  justify-content: center;
  margin-bottom: 1rem;
}
.dnb-date-picker__header__row {
  min-width: 60%;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
}
.dnb-date-picker__header__row--year {
  min-width: calc(40% - var(--gap));
}
.dnb-date-picker__header__nav .dnb-button {
  box-shadow: none;
}
.dnb-date-picker__header__title {
  text-transform: capitalize;
  text-align: center;
  font-size: var(--font-size-basis);
  font-weight: var(--font-weight-medium);
  color: var(--color-black-80);
}
.dnb-date-picker__labels__day {
  text-transform: capitalize;
  font-weight: var(--font-weight-medium);
  color: var(--color-black-80);
}
.dnb-date-picker__day, .dnb-date-picker__labels__day {
  text-align: center;
}
.dnb-date-picker__day--today .dnb-button {
  font-weight: var(--font-weight-medium);
}
.dnb-date-picker__day--today .dnb-button::after {
  content: "";
  position: absolute;
  bottom: 0.1875rem;
  height: 0.2188em;
  width: 0.2188em;
  pointer-events: none;
  border-radius: 50%;
  background-color: currentcolor;
}
.dnb-date-picker__day--preview .dnb-button, .dnb-date-picker__day--inactive .dnb-button, .dnb-date-picker__day--within-selection:not(.dnb-date-picker__day--start-date):not(.dnb-date-picker__day--end-date) .dnb-button:not(:hover) {
  background-color: transparent;
}
.dnb-date-picker__day--preview:not(.dnb-date-picker__day--inactive):not(.dnb-date-picker__day--start-date):not(.dnb-date-picker__day--end-date), .dnb-date-picker__day--within-selection:not(.dnb-date-picker__day--inactive):not(.dnb-date-picker__day--start-date):not(.dnb-date-picker__day--end-date) {
  background-color: var(--color-mint-green-50);
}
.dnb-date-picker__day--start-date:not(.dnb-date-picker__day--inactive)::after, .dnb-date-picker__day--end-date:not(.dnb-date-picker__day--inactive)::after {
  background-color: var(--color-mint-green-50);
}
.dnb-date-picker__day--start-date:not(.dnb-date-picker__day--inactive) .dnb-button, .dnb-date-picker__day--end-date:not(.dnb-date-picker__day--inactive) .dnb-button {
  color: var(--color-mint-green-25);
  background-color: var(--color-emerald-green);
}
.dnb-date-picker__day--start-date:not(.dnb-date-picker__day--inactive):not(.dnb-date-picker__day--preview) .dnb-button:hover, .dnb-date-picker__day--end-date:not(.dnb-date-picker__day--inactive):not(.dnb-date-picker__day--preview) .dnb-button:hover {
  box-shadow: none;
}
html:not([data-whatintent=touch]) .dnb-date-picker__day--start-date.dnb-date-picker__day--within-selection .dnb-button:hover:not([disabled]), html:not([data-whatintent=touch]) .dnb-date-picker__day--end-date.dnb-date-picker__day--within-selection .dnb-button:hover:not([disabled]) {
  color: var(--color-mint-green-25);
  background-color: var(--color-emerald-green);
}
.dnb-date-picker__day--disabled .dnb-button {
  -webkit-text-decoration: line-through;
  text-decoration: line-through;
}
.dnb-date-picker__day--inactive .dnb-button {
  color: var(--color-black-55);
}
.dnb-date-picker__day--inactive .dnb-button[disabled], .dnb-date-picker__day--disabled .dnb-button[disabled] {
  box-shadow: none;
}
html:not([data-whatintent=touch]) .dnb-date-picker__day--inactive .dnb-button[disabled] {
  cursor: default;
}
.dnb-date-picker--open .dnb-input .dnb-input__shell, .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-form-label:hover ~ .dnb-date-picker__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__shell {
  --border-color: var(--color-sea-green);
  --border-width: 0.125rem;
  box-shadow: 0 0 0 var(--border-width) var(--border-color);
  border-color: transparent;
}
.dnb-date-picker--open .dnb-button--input-button.dnb-button--selected {
  --button-color-bg--default: var(--button-color-bg--active);
  --button-color-icon--default: var(--button-color-icon--active);
  --button-input-separator-color--default: var(
    --button-input-separator-color--active
  );
}
.dnb-date-picker__status--error:not(.dnb-date-picker--open) .dnb-form-label:hover ~ .dnb-date-picker__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__shell {
  --border-color: var(--color-fire-red);
  --border-width: 0.125rem;
  box-shadow: 0 0 0 var(--border-width) var(--border-color);
  border-color: transparent;
}