react-toolbox/components/date_picker/theme.scss

@import "../colors";
@import "../globals";
@import "../mixins";
@import "./config";

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

.header {
  padding: 1.6 * $unit 2 * $unit;
  color: $datepicker-primary-contrast-color;
  cursor: pointer;
  background-color: $datepicker-primary-color;
}

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

.date {
  display: block;
  font-weight: $font-weight-semi-bold;
  text-transform: capitalize;
  transition: opacity $animation-duration $animation-curve-default;
}

.calendarWrapper {
  padding: $unit .5 * $unit 0;
}

.yearsDisplay {
  .date {
    opacity: $datepicker-inactive-opacity;
  }
  .year {
    font-size: $font-size-normal;
  }
}

.monthsDisplay {
  .year {
    opacity: $datepicker-inactive-opacity;
  }
}

.dialog {
  width: $datepicker-dialog-width;
  > [role="body"] {
    padding: 0;
  }
  > [role="navigation"] > .button {
    color: $datepicker-primary-color;
    &:hover {
      background: $datepicker-primary-hover-color;
    }
    &:focus:not(:active) {
      background: $datepicker-primary-hover-color;
    }
  }
}

.calendar {
  position: relative;
  height: $calendar-total-height;
  overflow: hidden;
  font-size: $font-size-small;
  line-height: $calendar-row-height;
  text-align: center;
  background: $calendar-primary-contrast-color;
  .prev, .next {
    position: absolute;
    top: 0;
    z-index: $z-index-high;
    height: 3.6 * $unit;
    cursor: pointer;
    opacity: .7;
  }
  .prev {
    left: 0;
  }
  .next {
    right: 0;
  }
}

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

.years {
  height: 100%;
  overflow-y: auto;
  font-size: $font-size-big;
  > li {
    line-height: 2.4;
    cursor: pointer;
    &.active {
      font-size: $calendar-year-font-size;
      font-weight: $font-weight-semi-bold;
      color: $calendar-primary-color;
    }
  }
}

.week {
  display: flex;
  height: $calendar-row-height;
  flex-wrap: wrap;
  font-size: $calendar-day-font-size;
  line-height: $calendar-row-height;
  opacity: .5;
  > span {
    flex: 0 0 (100% / 7);
  }
}

.days {
  display: flex;
  flex-wrap: wrap;
  font-size: $calendar-day-font-size;
}

.day {
  flex: 0 0 (100% / 7);
  padding: $calendar-day-padding-topbottom $calendar-day-padding-leftright;
  > span {
    display: inline-block;
    width: $calendar-row-height;
    height: $calendar-row-height;
    line-height: $calendar-row-height;
    border-radius: 50%;
  }
  &:hover:not(.active):not(.disabled) > span {
    color: $calendar-primary-contrast-color;
    background: $calendar-primary-hover-color;
  }
  &.active > span {
    color: $calendar-primary-contrast-color;
    background: $calendar-primary-color;
  }
  &:hover:not(.disabled) > span {
    cursor: pointer;
  }
  &.disabled {
    opacity: $calendar-day-disable-opacity;
  }
}

.month {
  background-color: $calendar-primary-contrast-color;
}