React-DateTime-Picker demo page styling

calendar.less

.react-calendar {
  .rounded-corners();
  width: 350px;
  max-width: 100%;
  background: white;
  font: inherit;
  line-height: 1.125em;
  border: 0;
  overflow: hidden;

  button {
    margin: 0;
    border: 0;
    outline: none;
    font: inherit;
    font-size: .8em;

    &:enabled {
      &:hover {
        cursor: pointer;
      }
    }
  }

  &--doubleView {
    width: 700px;

    .react-calendar__viewContainer {
      display: flex;
      margin: -.5em;

      > * {
        width: 50%;
        margin: .5em;
      }
    }
  }

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

  &__navigation {
    height: 44px;
    margin-bottom: 10px;

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

      &:enabled {
        &: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: rgb(209, 0, 0);
        }

        &--neighboringMonth {
          color: rgb(117, 117, 117)
        }
      }
    }
  }

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

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

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

    &:enabled {
      &:hover, &:focus {
        background-color: rgb(230, 230, 230);
      }
    }

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

      &:enabled {
        &:hover, &:focus {
          background: lighten(@bgcolor, 10%);
        }
      }
    }

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

      &:enabled {
        &:hover, &:focus {
          background: lighten(@bgcolor, 10%);
        }
      }
    }
  }

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

colors.less

@white: rgb(236, 240, 242);
@blueish-white: rgb(248, 250, 252);
@gray: rgb(222, 228, 240);

@orange: rgb(231, 76, 60);
@purple: rgb(120, 55, 140);

@blue: rgb(60, 145, 231);

`theme.less`
```less
@import './colors.less';

@bkg: @blueish-white;

@primary: @blue;
@secondary: @purple;

react-ALL-picker.less

@import (reference) './theme.less';
@import (reference) './style-helpers.less';

.react-ALL-picker() {
  & * {
    font-family: inherit;
  }

  &--closed {
    .rounded-corners();
  }

  &--closed &__wrapper {
    .rounded-corners();
  }

  &--open {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  &--open &__wrapper {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  &__wrapper {
    background: white;
    border: 0;
    border-radius: 4px;
    font-size: 1.25em;
  }

  &__inputGroup {
    @digit-width: .54em;
    @dot-width: .217em;
    // own padding + inputs padding + digits width + dots width
    min-width: calc(~"4px + (4px * 3) + " @digit-width * 8 ~" + " @dot-width * 2);
    flex-grow: 1;
    display: flex;
    padding: 2px;
    align-items: baseline;

    &__divider {
      padding: 1px;
    }

    &__input {
      -moz-appearance: textfield;

      &::-webkit-outer-spin-button,
      &::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }

      &:invalid {
        background: fade(red, 10%);
      }

      &--hasLeadingZero {
        margin-left: -@digit-width;
        padding-left: calc(~"1px + " @digit-width);
      }
    }
  }

  &__calendar {
    .rounded-corners();
    .shadow();
    border-top-left-radius: 0;

    .react-calendar {
      border-top-left-radius: 0;
    }
  }

  &__clock {
    .rounded-corners();
    .shadow();
    font-family: inherit;
    width: 220px;
    height: 220px;
    padding: 20px;
    border: 0;
    border-top-left-radius: 0;

    .react-clock {
      &__second-hand {
        transition: transform cubic-bezier(.68,0,.27,1.55) 0.2s;

        &__body {
          &:before {
            width: 5px;
            height: 5px;
          }

          &:after {
            width: 15px;
            height: 15px;
          }
        }
      }
    }
  }
}

react-clock.less

@import (reference) '../theme.less';
@import (reference) '../style-helpers.less';

.react-clock {
  background-color: white;
  border-radius: 50%;

  &__face {
    border: 3px solid white;
  }

  &__second-hand {
    transition: transform cubic-bezier(.68,0,.27,1.55) 0.2s;

    &__body {
      &:before {
        content: '';
        display: block;
        width: 7px;
        height: 7px;
        position: absolute;
        bottom: 20%;
        left: 50%;
        background-color: red;
        border-radius: 50%;
        transform: translateX(-50%) translateY(-50%);
      }

      &:after {
        content: '';
        display: block;
        width: 20px;
        height: 20px;
        position: absolute;
        top: 0;
        left: 50%;
        background-color: red;
        border-radius: 50%;
        transform: translateX(-50%);
      }
    }
  }
}

react-datetime-picker.less

@import '../react-ALL-picker.less';
@import '../react-clock.less';

.react-datetime-picker {
  .react-ALL-picker();

  &--open {
    .rounded-corners();
    border-bottom-left-radius: 0;
  }

  &--open &__wrapper {
    .rounded-corners();
    border-bottom-left-radius: 0;
  }

  &__clock {
    border-top-right-radius: 0;
  }
}

root.less

@import (reference) './theme.less';
@import (reference) './style-helpers.less';
@import './calendar.less';

body {
  margin: 0;
  background: @bkg;
  font-family: Montserrat, 'Segoe UI', Tahoma, sans-serif;
}

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

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  text-transform: uppercase;

  &:first-child {
    margin-top: 0;
  }

  &:last-child {
    margin-bottom: 0;
  }
}

h2 {
  .hyphens();
  margin-bottom: .325em;
  font-size: 2.8em;
}

p {
  margin: 0;
  font-size: 19px;
}

a {
  text-decoration: none;
  color: inherit;
  border-bottom: 0.1em dashed;

  &:hover, &:focus {
    outline: none;
    color: inherit;
    border-bottom-style: solid;
  }
}

button {
  font-family: inherit;
}

code {
  display: block;
  border-radius: 2px;
  margin: 1em 0;
  padding: 1em 0.5em;
  background-color: rgba(0, 0, 0, 0.1);
}

style-helpers.less

@import (reference) './theme.less';

.hyphens() {
  word-wrap: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.rounded-corners() {
  border-radius: 4px;
}

.shadow() {
  box-shadow: 0 30px 40px 0 rgba(16, 36, 94, 0.2),
}