axiom-react-calendar/src/Calendar.less

A component for picking dates or date periods for your React application.

.react-calendar {
  width: 350px;
  max-width: 100%;
  background: white;
  border: 1px solid rgb(160, 160, 150);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.125em;

  &, & *, & *:before, & *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  button {
    border: 0;
    outline: none;

    &:not([disabled]) {
      &:hover {
        cursor: pointer;
      }
    }
  }

  &__navigation {
    height: 44px;
    margin-bottom: 1em;

    button {
      min-width: 44px;
      background: none;

      &:not([disabled]) {
        &:hover, &:focus {
          background-color: rgb(230, 230, 230);
        }
      }

      &[disabled] {
        background-color: rgb(240, 240, 240);
      }
    }
  }

  &__month-view {
    &__weekdays {
      text-align: center;
      text-transform: uppercase;
      font-weight: bold;
      font-size: .75em;

      &__weekday {
        padding: .5em;
      }
    }

    &__weekNumbers {
      font-weight: bold;

      .react-calendar__tile {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .75em;
        padding: calc(.75em / .75) calc(.5em / .75);
      }
    }

    &__days {
      &__day {
        &--weekend {
          color: red;
        }

        &--neighboringMonth {
          color: rgb(150, 150, 150);
        }
      }
    }
  }

  &__year-view,
  &__decade-view,
  &__century-view {
    .react-calendar__tile {
      padding: 2em .5em;
    }
  }

  &__tile {
    max-width: 100%;
    text-align: center;
    padding: .75em .5em;
    background: none;

    button&[disabled] {
      background-color: rgb(240, 240, 240);
    }

    button&:not([disabled]) {
      &:hover, &:focus {
        background-color: rgb(230, 230, 230);
      }
    }

    &--hasActive {
      @bgcolor: lighten(rgb(0, 110, 220), 30%);
      background: @bgcolor;

      button&:not([disabled]) {
        &:hover, &:focus {
          background: lighten(@bgcolor, 10%);
        }
      }
    }

    &--active {
      @bgcolor: rgb(0, 110, 220);
      background: @bgcolor;
      color: white;

      button&:not([disabled]) {
        &:hover, &:focus {
          background: lighten(@bgcolor, 10%);
        }
      }
    }
  }

  &--selectRange {
    .react-calendar__tile {
      &--hover {
        background-color: rgb(230, 230, 230);
      }
    }
  }
}