rsuite/DatePicker/styles/index.less

A suite of react components

@import '../../styles/common.less';
@import '../../styles/mixins/listbox.less';
@import '../../Button/styles/mixin.less';
@import '../../Input/styles/index.less';
@import '../../InputGroup/styles/index.less';
@import '../../Calendar/styles/index.less';
@import '../../internals/Picker/styles/index.less';
@import '../../Stack/styles/index.less';
@import 'mixin.less';

// DatePicker Picker
// ----------------------

// Toolbar
.rs-picker-toolbar {
  padding: @calendar-picker-padding;
  border-top: 1px solid @calendar-toolbar-border-color;
}

// Picker date
.rs-picker-date {
  &-inline {
    height: 299px;

    .rs-calendar {
      height: 286px;
    }
  }

  .rs-input-group-addon {
    color: var(--rs-text-secondary);
    cursor: pointer;

    .rs-btn-close {
      padding: 0;
    }
  }

  &.rs-picker-subtle {
    .rs-input-group {
      border-color: transparent;
    }
  }

  > .rs-input-group.rs-input-group-inside .rs-input {
    padding-right: 0;
  }
}

// Predefined Ranges
.rs-picker-date-predefined {
  height: 325px;
  border-right: 1px solid var(--rs-border-primary);
  padding: 4px 0;

  .rs-btn {
    display: block;
  }
}

// Calendar in DatePicker popup
.rs-picker-popup {
  @calendar-width: 264px; // This is a fixed value per design.

  @calendar-padding-x: 15px;
  // The padding used when show week numbers.
  @calendar-padding-x-condensed: 12px;

  &&-date {
    padding: 0;
  }

  .rs-picker-toolbar {
    max-width: 100%;

    &-ranges {
      max-width: 400px;
    }
  }

  .rs-calendar {
    min-width: @calendar-width;
    // To make sure <Calendar/> horizontal align at center when toolbar  width is so long.
    display: block;
    margin: 0 auto;

    &-show-week-numbers {
      @calendar-width: 278px; // This is a fixed value per design.

      min-width: @calendar-width;

      & .rs-calendar-body {
        padding-left: @calendar-padding-x-condensed;
        padding-right: @calendar-padding-x-condensed;
      }
    }

    &-header {
      width: 100%;
    }

    &-body {
      padding-left: @calendar-padding-x;
      padding-right: @calendar-padding-x;
    }

    &-table {
      width: unset;
    }

    &-month-dropdown-cell:focus-visible {
      .rs-calendar-month-dropdown-cell-content {
        outline: 3px solid var(--rs-color-focus-ring);
      }
    }

    &-table-cell {
      &:focus-visible {
        outline: none;
        .rs-calendar-table-cell-content {
          outline: 3px solid var(--rs-color-focus-ring);
        }
      }
    }

    .rs-calendar-table-cell-content {
      width: @calendar-in-menu-content-side-length;
      height: @calendar-in-menu-content-side-length;
    }

    .rs-calendar-month-dropdown-cell-content:hover {
      .listbox-option-active();
    }

    .rs-calendar-month-dropdown-cell-active .rs-calendar-month-dropdown-cell-content:hover {
      .calendar-cell-selected-hover();
    }

    .rs-calendar-table-header-row .rs-calendar-table-cell-content {
      height: 24px;
      padding-top: 0;
    }

    .rs-calendar-table-cell-content {
      padding-left: 0;
      padding-right: 0;
      display: inline-block;
    }

    // There's a small gap between cell and cell-content (cell-content smaller than cell)
    // So don't apply hover style directly on cell-content
    .rs-calendar-table-cell:hover .rs-calendar-table-cell-content {
      // borrowed from listbox option
      .listbox-option-active();
    }

    .rs-calendar-table-cell-selected:hover .rs-calendar-table-cell-content {
      .calendar-cell-selected-hover();
    }

    .rs-calendar-time-dropdown-column > ul {
      height: 198px;
    }

    &.rs-calendar-only-time {
      min-width: auto;

      .rs-calendar-time-dropdown-column > ul {
        height: 240px;
      }
    }
  }
}