react-toolbox/components/date_picker/theme.css

@import '../colors.css';
@import '../variables.css';
@import './config.css';

.input:not(.disabled) > .inputElement {
  cursor: pointer;
}

.header {
  background-color: var(--datepicker-primary-color);
  color: var(--datepicker-primary-contrast-color);
  cursor: pointer;
  padding: calc(1.6 * var(--unit)) calc(2 * var(--unit));
}

.year {
  display: inline-block;
  font-size: var(--datepicker-year-font-size);
  transition: opacity, font-size var(--animation-duration) var(--animation-curve-default);
}

.date {
  display: block;
  font-size: calc(3.4 * var(--unit));
  font-weight: 400;
  font-weight: var(--font-weight-semi-bold);
  line-height: calc(4 * var(--unit));
  margin: 0;
  text-transform: capitalize;
  transition: opacity var(--animation-duration) var(--animation-curve-default);
}

.calendarWrapper {
  padding: var(--unit) calc(0.5 * var(--unit)) 0;
}

.yearsDisplay {
  & .date {
    opacity: var(--datepicker-inactive-opacity);
  }

  & .year {
    font-size: var(--font-size-normal);
  }
}

.monthsDisplay {
  & .year {
    opacity: var(--datepicker-inactive-opacity);
  }
}

.dialog {
  width: var(--datepicker-dialog-width);

  & > [role='body'] {
    padding: 0;
  }

  & > [role='navigation'] > .button {
    color: var(--datepicker-primary-color);

    &:hover {
      background: var(--datepicker-primary-hover-color);
    }

    &:focus:not(:active) {
      background: var(--datepicker-primary-hover-color);
    }
  }
}

.calendar {
  background: var(--calendar-primary-contrast-color);
  font-size: var(--font-size-small);
  height: var(--calendar-total-height);
  line-height: var(--calendar-row-height);
  overflow: hidden;
  position: relative;
  text-align: center;

  & .prev,
  & .next {
    cursor: pointer;
    height: calc(3.6 * var(--unit));
    opacity: 0.7;
    position: absolute;
    top: 0;
    z-index: var(--z-index-high);
  }

  & .prev {
    left: 0;
  }

  & .next {
    right: 0;
  }
}

.title {
  display: inline-block;
  font-weight: 500;
  line-height: var(--calendar-row-height);
}

.years {
  font-size: var(--font-size-big);
  height: 100%;
  list-style: none;
  margin: 0;
  overflow-y: auto;
  padding: 0;

  & > li {
    cursor: pointer;
    line-height: 2.4;

    &.active {
      color: var(--calendar-primary-color);
      font-size: var(--calendar-year-font-size);
      font-weight: var(--font-weight-semi-bold);
    }
  }
}

.week {
  display: flex;
  flex-wrap: wrap;
  font-size: var(--calendar-day-font-size);
  height: var(--calendar-row-height);
  line-height: var(--calendar-row-height);
  opacity: 0.5;

  & > span {
    flex: 0 0 calc(100% / 7);
  }
}

.days {
  display: flex;
  flex-wrap: wrap;
  font-size: var(--calendar-day-font-size);
}

.day {
  flex: 0 0 calc(100% / 7);
  padding: var(--calendar-day-padding-topbottom) var(--calendar-day-padding-leftright);

  & > span {
    border-radius: 50%;
    display: inline-block;
    height: var(--calendar-row-height);
    line-height: var(--calendar-row-height);
    width: var(--calendar-row-height);
  }

  &:hover:not(.active):not(.disabled) > span {
    background: var(--calendar-primary-hover-color);
    color: var(--calendar-primary-contrast-color);
  }

  &.active > span {
    background: var(--calendar-primary-color);
    color: var(--calendar-primary-contrast-color);
  }

  &:hover:not(.disabled) > span {
    cursor: pointer;
  }

  &.disabled {
    opacity: var(--calendar-day-disable-opacity);
  }
}

.month {
  background-color: var(--calendar-primary-contrast-color);
}

.slideRightEnter,
.slideRightLeave {
  position: absolute;
}

.slideRightEnterActive,
.slideRightLeaveActive {
  transition-duration: 350ms;
  transition-property: transform, opacity;
  transition-timing-function: ease-in-out;
}

.slideRightEnter {
  opacity: 0;
  transform: translateX(100%);

  &.slideRightEnterActive {
    opacity: 1;
    transform: translateX(0);
  }
}

.slideRightLeave {
  opacity: 1;
  transform: translateX(0);

  &.slideRightLeaveActive {
    opacity: 0;
    transform: translateX(-100%);
  }
}

.slideLeftEnter,
.slideLeftLeave {
  position: absolute;
  transition-duration: 0.35s;
  transition-property: transform, opacity;
  transition-timing-function: ease-in-out;
}

.slideLeftEnter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);

  &.slideLeftEnterActive {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.slideLeftLeave {
  opacity: 1;
  transform: translate3d(0, 0, 0);

  &.slideLeftLeaveActive {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
}