@intility/bifrost-react-datepicker/dist/datepicker.css

React detepicker for Intility's design system, Bifrost.

/* stylelint-disable selector-class-pattern */

/* INPUT */
.bf-datepicker {
  height: var(--rem40);
}

.bf-datepicker:hover {
  cursor: pointer;
}

/* DATEPICKER */
.react-datepicker {
  font-size: var(--bf-font-size-m);
  -webkit-font-smoothing: antialiased;
  background: var(--bfc-base-3);
  color: var(--bfc-base-c);
  border: 1px solid var(--bfc-base-c-wcag);
  border-radius: var(--bf-radius-s);
  display: block;
  position: relative;
  min-width: 243px;
  box-shadow: var(--bf-shadow);
}

/* When showTimeSelect is true */
.bf-show-time-select .react-datepicker {
  display: flex;
  min-width: 329px;
}

/* When showTimeSelectOnly is true */
.bf-show-time-select-only .react-datepicker {
  min-width: 87px;
}

.bf-show-time-select-only .react-datepicker .react-datepicker__time-container {
  border-left: none;
}

.bf-show-time-select-only
  .react-datepicker__time-container
  .react-datepicker__time
  .react-datepicker__time-box
  ul.react-datepicker__time-list
  li.react-datepicker__time-list-item {
  margin: 4px;
}

/* Remove inline-block from default */
.react-datepicker-wrapper {
  display: block;
  width: 100%;
}

/* MONTH / YEAR DROPDOWN BUTTON */
.react-datepicker__year-dropdown-container--select,
.react-datepicker__month-dropdown-container--select,
.react-datepicker__month-year-dropdown-container--select,
.react-datepicker__year-dropdown-container--scroll,
.react-datepicker__month-dropdown-container--scroll,
.react-datepicker__month-year-dropdown-container--scroll {
  display: inline-block;
  margin: 0 2px;
}

/* POPPER */
.react-datepicker-popper {
  line-height: 0;
  z-index: 1;
}

.react-datepicker__triangle {
  display: none;
}

/* HEADER */
.react-datepicker__header {
  border-top-left-radius: var(--bf-radius-s);
  border-top-right-radius: var(--bf-radius-s);
}

.react-datepicker__header,
.react-datepicker__current-month {
  text-align: center;
  padding-top: 8px;
  position: relative;
  background: var(--bfc-base-3);
  font-weight: normal;
}

.react-datepicker__day-names {
  margin-top: 6px;
  white-space: nowrap;
}

.react-datepicker__header__dropdown {
  padding: 12px 0;
}

/* TEXT */
.react-datepicker__header,
.react-datepicker__current-month,
.react-datepicker__day-name,
.react-datepicker__day {
  color: var(--bfc-base-c);
}

.react-datepicker__day,
.react-datepicker__month-text,
.react-datepicker__quarter-text,
.react-datepicker__year-text,
.react-datepicker__year-read-view,
.react-datepicker__month-read-view,
.react-datepicker__month-option,
.react-datepicker__year-option {
  cursor: pointer;
}

.react-datepicker__day-name,
.react-datepicker__day {
  display: inline-block;
  width: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  margin: 0.166rem;
}

/* DAY */
.react-datepicker__day {
  border: 1px solid transparent;
  border-radius: var(--bf-radius-xs);
}

/* DAY TODAY */
.react-datepicker__day--today {
  border-color: var(--bfc-base-dimmed-2);
  background-color: var(--bfc-base-3);
  font-weight: 600;
}

/* CLEARABLE DATE BUTTON */
.bf-datepicker-clearable.bf-datepicker-icon-left
  .react-datepicker__input-container
  .bf-datepicker {
  padding-right: 2.375rem; /* 38px */
}

.bf-datepicker-clearable.bf-datepicker-icon-right
  .react-datepicker__input-container
  .bf-datepicker {
  padding-right: 4.25rem; /* 68px */
}

.bf-datepicker-small
  .bf-datepicker-clearable.bf-datepicker-icon-left
  .react-datepicker__input-container
  .bf-datepicker {
  padding-right: 1.875rem; /* 30px */
}

.bf-datepicker-small
  .bf-datepicker-clearable.bf-datepicker-icon-right
  .react-datepicker__input-container
  .bf-datepicker {
  padding-right: 3.25rem; /* 52px */
}

.bf-datepicker-small .bf-datepicker {
  height: var(--rem32);
  padding: 0.1875rem 8px;
}

.bf-datepicker.clearable.bf .react-datepicker__input-container {
  display: flex;
  position: relative;
}

.react-datepicker__close-icon {
  position: absolute;
  cursor: pointer;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--bfc-base-c-2);
  width: var(--rem32);
  height: var(--rem32);
  margin: var(--rem4);
  padding: var(--rem4) 0;
  font-size: var(--bf-font-size-h3);
  line-height: 1;
}

.bf-datepicker-small .react-datepicker__close-icon {
  width: var(--rem24);
  height: var(--rem24);
  padding-block: 0;
}

.bf-datepicker-icon-left .react-datepicker__close-icon {
  right: 0;
}

.bf-datepicker-icon-right .react-datepicker__close-icon {
  right: var(--rem32);
}

.bf-datepicker-small .bf-datepicker-icon-right .react-datepicker__close-icon {
  right: var(--rem28);
}

.react-datepicker__close-icon:hover {
  color: var(--bfc-base-c-1);
}

.react-datepicker__close-icon::after {
  content: "\00d7";
}

/* DROPDOWN TITLES */
.react-datepicker__month-dropdown-container,
.react-datepicker__year-dropdown-container {
  font-size: var(--bf-font-size-m);
}

.bf-datepicker-container .react-datepicker__year-dropdown-container--scroll {
  margin: 1px 0 0;
}

.react-datepicker__month-read-view--selected-month,
.react-datepicker__year-read-view--selected-year {
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: var(--bf-radius-xs);
}

/* DROPDOWN MENUS */
.react-datepicker__month-dropdown,
.react-datepicker__year-dropdown {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px 0;
  place-content: center center;
  background: var(--bfc-base-3);
  color: var(--bfc-base-c-1);
  padding: 15px 4px;
  font-size: var(--bf-font-size-m);
  position: absolute;
  top: 45px;
  width: calc(100% + 2px);
  left: -1px;
  height: 292px;
  border: 1px solid var(--bfc-base-c-wcag);
  border-top-color: var(--bfc-base-c-dimmed);
  border-radius: var(--bf-radius-xs);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* MONTH + YEAR OPTIONS */
.bf-datepicker-container .react-datepicker__month-option,
.bf-datepicker-container .react-datepicker__year-option {
  display: inline-block;
  width: 65px;
  line-height: 38px;
  height: 38px;
  border: 1px solid transparent;
  margin: 6px 5px;
  vertical-align: bottom;
  border-radius: var(--bf-radius-xs);
}

/* YEAR DROPDOWN SCROLL ARROW */
.react-datepicker__year-option:nth-child(12) {
  display: none;
}

/* NAVIGATION */
.react-datepicker__navigation {
  background: none;
  cursor: pointer;
  position: absolute;
  top: 16px;
  padding: 0;
  border: 0.45rem solid transparent;
  z-index: 1;
  height: 10px;
  width: 10px;
  text-indent: -999em;
  overflow: hidden;
  outline: none;
}

.react-datepicker__navigation--previous {
  left: 12px;
  border-right-color: var(--bfc-base-c-2);
  border-left-width: 0;
}

.react-datepicker__navigation--previous:hover {
  border-right-color: var(--bfc-base-c);
}

.react-datepicker__navigation--next {
  right: 12px;
  border-left-color: var(--bfc-base-c-2);
  border-right-width: 0;
}

.react-datepicker__navigation--next:hover {
  border-left-color: var(--bfc-base-c);
}

.react-datepicker__navigation--previous:focus-visible,
.react-datepicker__navigation--next:focus-visible {
  outline: 2px dotted var(--bfc-base-c);
  outline-offset: 2px;
}

/* When showTimeSelect is true */
.react-datepicker__navigation--next--with-time:not(
  .react-datepicker__navigation--next--with-today-button
) {
  right: 95px;
}

/* Years navigation arrows */
.react-datepicker__navigation--years {
  position: relative;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.bf-datepicker-container .react-datepicker__navigation--years-previous {
  top: 15px;
  padding: 0;
  border-radius: 0;
  border-top-color: var(--bfc-base-c-2);
}

.bf-datepicker-container .react-datepicker__navigation--years-upcoming {
  top: 7px;
  padding: 0;
  border-radius: 0;
  border-bottom-color: var(--bfc-base-c-2);
}

.bf-datepicker-container
  .react-datepicker__year-option:hover
  .react-datepicker__navigation--years-upcoming {
  background: none;
  box-shadow: none;
  border-bottom-color: var(--bfc-base-c);
}

.bf-datepicker-container
  .react-datepicker__year-option:hover
  .react-datepicker__navigation--years-previous {
  background: none;
  box-shadow: none;
  border-top-color: var(--bfc-base-c);
}

.react-datepicker__month-read-view,
.react-datepicker__year-read-view {
  visibility: visible !important;
}

.react-datepicker__month-read-view--down-arrow,
.react-datepicker__year-read-view--down-arrow {
  display: none;
}

.react-datepicker__current-month {
  display: none;
}

/* REMOVING ICON FROM SELECTED MONTH OPTION */
.react-datepicker__month-option--selected,
.react-datepicker__year-option--selected {
  display: none;
}

/* ICON */
.bf-datepicker-icon-container {
  position: relative;
  display: flex;
}

.bf-datepicker-icon-container .bf-datepicker-icon {
  color: var(--bfc-base-c-2);
  position: absolute;
  height: var(--rem32);
  width: var(--rem32);
  margin: var(--rem4);
  padding: var(--rem4) 0;
  text-align: center;
  font-size: var(--bf-font-size-l);
  pointer-events: none;
}

.bf-datepicker-small .bf-datepicker-icon-container .bf-datepicker-icon {
  height: var(--rem24);
  width: var(--rem24);
  padding-block: 0;
}

.bf-datepicker-icon-left .bf-datepicker-icon {
  right: auto;
  left: 0;
}

.bf-datepicker-icon-right .bf-datepicker-icon {
  left: auto;
  right: 0;
}

.bf-datepicker-icon-right .bf-datepicker {
  /* using 2.375rem because we don't have CSS variable for 38px */
  padding-right: 2.375rem;
}

.bf-datepicker-icon-left .bf-datepicker {
  /* using 2.375rem because we don't have CSS variable for 38px */
  padding-left: 2.375rem;
}

.bf-datepicker-small .bf-datepicker-icon-right .bf-datepicker {
  /* using 1.875rem because we don't have CSS variable for 30px */
  padding-right: 1.875rem;
}

.bf-datepicker-small .bf-datepicker-icon-left .bf-datepicker {
  /* using 1.875rem because we don't have CSS variable for 30px */
  padding-left: 1.875rem;
}

.bf-datepicker-success .bf-state-icon {
  color: var(--bfc-base-c-success);
}

.bf-datepicker-alert .bf-state-icon {
  color: var(--bfc-base-c-alert);
}

/* TIME */
.react-datepicker__time-container {
  border-left: 1px solid var(--bfc-base-c-dimmed);
}

.react-datepicker__time-container
  .react-datepicker__time
  .react-datepicker__time-box {
  width: 85px;
}

/* TIMEBOX SCROLLBAR */
.react-datepicker__time-container
  .react-datepicker__time
  .react-datepicker__time-box
  ul.react-datepicker__time-list::-webkit-scrollbar {
  height: 18px;
  width: 18px;
  background-color: transparent;
}

.react-datepicker__time-container
  .react-datepicker__time
  .react-datepicker__time-box
  ul.react-datepicker__time-list::-webkit-scrollbar-corner {
  background-color: transparent;
}

.react-datepicker__time-container
  .react-datepicker__time
  .react-datepicker__time-box
  ul.react-datepicker__time-list::-webkit-scrollbar-thumb {
  height: 30px;
  border: 5px solid transparent;
  background-color: var(--bfc-base-dimmed);
  background-clip: padding-box;
  border-radius: 10px;
}

.react-datepicker__time-container
  .react-datepicker__time
  .react-datepicker__time-box
  ul.react-datepicker__time-list::-webkit-scrollbar,
.react-datepicker__time-container
  .react-datepicker__time
  .react-datepicker__time-box
  ul.react-datepicker__time-list::-webkit-scrollbar-corner {
  background-color: var(--bfc-base-3);
}

/* Timelist */
.react-datepicker__time-container
  .react-datepicker__time
  .react-datepicker__time-box
  ul.react-datepicker__time-list {
  list-style: none;
  margin: 0;
  height: calc(195px + (1.7rem / 2));
  overflow-y: scroll;
  padding-right: 0;
  padding-left: 0;
  width: 100%;
  box-sizing: content-box;
}

.react-datepicker__time-list-item {
  height: 30px;
  line-height: 30px;
  padding: 0 4px;
  white-space: nowrap;
  font-size: var(--bf-font-size-m);
  list-style: none;
  border: 1px solid transparent;
  margin: 4px 4px 4px 8px;
  border-radius: var(--bf-radius-xs);
  text-align: center;
  cursor: pointer;
}

/* Display none to not show header for time selection */
.react-datepicker__header--time {
  display: none;
}

/* TIME INPUT */
.react-datepicker__input-time-container {
  clear: both;
  width: 100%;
  margin: 5px 0 10px 15px;
  text-align: left;
}

.react-datepicker__input-time-container .react-datepicker-time__caption {
  display: inline-block;
  font-size: 13px;
}

.react-datepicker__input-time-container
  .react-datepicker-time__input-container {
  display: inline-block;
}

.react-datepicker__input-time-container
  .react-datepicker-time__input-container
  .react-datepicker-time__input {
  display: inline-block;
  margin-left: 10px;
}

.react-datepicker__input-time-container
  .react-datepicker-time__input-container
  .react-datepicker-time__input
  input {
  width: 150px;
  background: var(--bfc-base-3);
  color: var(--bfc-base-c);
  font-size: 13px;
  border: 1px solid var(--bfc-base-c-wcag);
  padding: 4px;
  padding-left: 10px;
  outline: none;
  border-radius: var(--bf-radius-xs);
}

.react-datepicker__input-time-container
  .react-datepicker-time__input-container
  .react-datepicker-time__input
  input:hover {
  outline: none;
  border: 1px solid var(--bfc-base-c-inverted-1);
}

.react-datepicker__input-time-container
  .react-datepicker-time__input-container
  .react-datepicker-time__input
  input:focus {
  outline: none;
  border: 1px solid var(--bfc-theme-3);
}

/* Time icon */
.react-datepicker__input-time-container
  .react-datepicker-time__input-container
  .react-datepicker-time__input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--bf-radius-xs);
}

.bf-darkmode
  .react-datepicker__input-time-container
  .react-datepicker-time__input-container
  .react-datepicker-time__input::-webkit-calendar-picker-indicator {
  background-color: var(--bfc-base-c);
}

.react-datepicker__input-time-container
  .react-datepicker-time__input-container
  .react-datepicker-time__input::-webkit-calendar-picker-indicator:focus {
  outline: none;
  border: 1px solid var(--bfc-theme-3);
}

.react-datepicker__input-time-container
  .react-datepicker-time__input-container
  .react-datepicker-time__input
  input[type="time"]::-webkit-inner-spin-button,
.react-datepicker__input-time-container
  .react-datepicker-time__input-container
  .react-datepicker-time__input
  input[type="time"]::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

.react-datepicker__input-time-container
  .react-datepicker-time__input-container
  .react-datepicker-time__input
  input[type="time"] {
  appearance: textfield;
}

.react-datepicker__input-time-container
  .react-datepicker-time__input-container
  .react-datepicker-time__delimiter {
  margin-left: 5px;
  display: inline-block;
}

/* MONTHPICKER / YEARPICKER */
.react-datepicker__year {
  margin: 8px;
}

.react-datepicker-year-header {
  padding: 19px 0;
}

.react-datepicker__month {
  margin: 0.4rem;
  text-align: center;
  display: grid;
  gap: 8px;
}

.react-datepicker__month .react-datepicker__month-wrapper,
.react-datepicker__year-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.react-datepicker__month-text,
.react-datepicker__year-text {
  height: 38px;
  line-height: 38px;
  padding: 0 4px;
  text-align: center;
  border-radius: var(--bf-radius-xs);
  border: 1px dashed transparent;
  outline: none;
}

.react-datepicker__month-text:hover,
.react-datepicker__year-text:hover {
  background: var(--bfc-base-dimmed-2);
}

.react-datepicker__month-text.react-datepicker__month--selected,
.react-datepicker__year-text.react-datepicker__year-text--selected {
  background: var(--bfc-theme);
  font-weight: 600;
  color: var(--bfc-theme-hc);
}

.react-datepicker__month-text.react-datepicker__month--selected:hover,
.react-datepicker__year-text.react-datepicker__year-text--selected:hover {
  background: var(--bfc-theme-2);
}

/* Portal (modal) view */
.react-datepicker__portal {
  position: fixed;
  width: 100dvw;
  height: 100dvh;
  background-color: rgba(0, 0, 0, 0.8);
  left: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  z-index: 2147483647;
}

.react-datepicker__portal .react-datepicker__day-name,
.react-datepicker__portal .react-datepicker__day,
.react-datepicker__portal .react-datepicker__time-name {
  width: 3rem;
  line-height: 3rem;
}

@media (max-width: 400px), (max-height: 550px) {
  .react-datepicker__portal .react-datepicker__day-name,
  .react-datepicker__portal .react-datepicker__day,
  .react-datepicker__portal .react-datepicker__time-name {
    width: 2rem;
    line-height: 2rem;
  }
}

.react-datepicker__portal .react-datepicker__current-month,
.react-datepicker__portal .react-datepicker-time__header {
  font-size: 1.44rem;
}

.react-datepicker__portal .react-datepicker__navigation {
  border: 0.81rem solid transparent;
}

.react-datepicker__portal .react-datepicker__navigation--previous {
  border-right-color: #ccc;
}

.react-datepicker__portal .react-datepicker__navigation--previous:hover {
  border-right-color: #b3b3b3;
}

.react-datepicker__portal .react-datepicker__navigation--previous--disabled,
.react-datepicker__portal
  .react-datepicker__navigation--previous--disabled:hover {
  border-right-color: #e6e6e6;
  cursor: default;
}

.react-datepicker__portal .react-datepicker__navigation--next {
  border-left-color: #ccc;
}

.react-datepicker__portal .react-datepicker__navigation--next:hover {
  border-left-color: #b3b3b3;
}

.react-datepicker__portal .react-datepicker__navigation--next--disabled,
.react-datepicker__portal .react-datepicker__navigation--next--disabled:hover {
  border-left-color: #e6e6e6;
  cursor: default;
}

.react-datepicker__aria-live {
  position: absolute;
  clip-path: circle(0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  width: 1px;
  white-space: nowrap;
}

.react-datepicker__day--holidays,
.react-datepicker__month-text--holidays,
.react-datepicker__quarter-text--holidays,
.react-datepicker__year-text--holidays {
  position: relative;
  border-radius: 0.3rem;
  background-color: var(--bfc-warning);
  color: var(--bfc-warning-c);
}

.react-datepicker__day--holidays .overlay,
.react-datepicker__month-text--holidays .overlay,
.react-datepicker__quarter-text--holidays .overlay,
.react-datepicker__year-text--holidays .overlay {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--bfc-overlay);
  color: var(--bfc-overlay-c);
  padding: 4px;
  border-radius: var(--bf-radius-xs);
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition:
    visibility 0s,
    opacity 0.3s ease-in-out;
}

.react-datepicker__day--holidays:hover,
.react-datepicker__month-text--holidays:hover,
.react-datepicker__quarter-text--holidays:hover,
.react-datepicker__year-text--holidays:hover {
  background-color: var(--bfc-warning);
  color: var(--bfc-warning-c);
}

.react-datepicker__day--holidays:hover .overlay,
.react-datepicker__month-text--holidays:hover .overlay,
.react-datepicker__quarter-text--holidays:hover .overlay,
.react-datepicker__year-text--holidays:hover .overlay {
  visibility: visible;
  opacity: 1;
}

/* OUTSIDE RANGE */
.react-datepicker__day--outside-month {
  color: var(--bfc-base-c-2);
}

/* HOVER */
.react-datepicker__day:hover,
.react-datepicker__day--in-selecting-range,
.react-datepicker__month-read-view--selected-month:hover,
.react-datepicker__year-read-view--selected-year:hover,
.react-datepicker__month-option:hover,
.react-datepicker__year-option:hover,
.react-datepicker__time-list-item:hover {
  background-color: var(--bfc-base-dimmed-2);
  color: var(--bfc-base-c);
}

/* SELECTED */
.react-datepicker__day--selected,
.react-datepicker__day--in-range,
.react-datepicker__month-option--selected_month,
.react-datepicker__month-text--selected,
.react-datepicker__year-option--selected_year,
.react-datepicker__time-list-item--selected {
  background: var(--bfc-theme);
  color: var(--bfc-theme-hc);
  font-weight: 600;
  border-color: transparent;
}

/* SELECTED + HOVER */
.react-datepicker__day--selected:hover,
.react-datepicker__day--in-range:hover,
.react-datepicker__month-option--selected_month:hover,
.react-datepicker__month-text--selected:hover,
.react-datepicker__year-option--selected_year:hover,
.react-datepicker__time-list-item--selected:hover {
  background: var(--bfc-theme-2);
  color: var(--bfc-theme-hc);
}

/* DISABLED */
.react-datepicker__day--disabled,
.react-datepicker__day--disabled:hover,
.react-datepicker__time-list-item--disabled,
.react-datepicker__time-list-item--disabled:hover {
  color: var(--bfc-base-disabled);
  background-color: transparent;
  cursor: default;
}

.react-datepicker__day--disabled .overlay,
.react-datepicker__month-text--disabled .overlay,
.react-datepicker__quarter-text--disabled .overlay,
.react-datepicker__year-text--disabled .overlay {
  display: none;
}

/* SELECTING WITH KEYBOARD */
.react-datepicker__week .react-datepicker__day:focus-visible,
.react-datepicker__time-list:focus-visible,
.react-datepicker__time-list-item:focus-visible {
  outline: 2px dotted var(--bfc-base-c);
  outline-offset: 1px;
  border-radius: var(--bf-radius-s);
  position: relative;
  z-index: 1;
}