@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:not(.dnb-date-picker__status--error) .dnb-date-picker__input {
  color: var(--color-black-55);
}
.dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input ~ .dnb-date-picker--separator {
  color: var(--color-black-55);
}
.dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input--highlight:not([disabled]) {
  color: var(--color-black);
}
.dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input--highlight:not([disabled]) ~ .dnb-date-picker--separator {
  color: var(--color-black);
}
.dnb-date-picker__container {
  box-shadow: var(--shadow-default);
  border-radius: 0.25rem;
  background-color: var(--color-white);
}
.dnb-date-picker__addon::after, .dnb-date-picker__calendar::after {
  background-color: var(--color-black-8);
}
.dnb-date-picker__header::after {
  background-color: var(--color-black-8);
}
.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--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--opened .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--opened .dnb-input .dnb-input__submit-button__button.dnb-button--secondary, .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__submit-button__button.dnb-button--secondary {
  color: var(--color-white);
  background-color: var(--color-sea-green);
}
.dnb-date-picker--opened .dnb-input .dnb-input__submit-button__button.dnb-button--secondary::after, .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__submit-button__button.dnb-button--secondary::after {
  background-color: inherit;
}
.dnb-date-picker__triangle::before {
  border: none;
  background-color: var(--color-white);
  box-shadow: var(--shadow-default);
}
.dnb-date-picker__status--error:not(.dnb-date-picker--opened) .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;
}