rsuite/DateRangePicker/styles/index.less

A suite of react components

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

.rs-picker-daterange {
  .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;
  }
}

// Date range Picker
// ----------------------

.rs-picker-popup {
  &&-daterange {
    padding: 0;

    .rs-calendar:first-child {
      border-right: 1px solid var(--rs-border-primary);
    }
  }

  .rs-calendar {
    height: 274px;
    padding-bottom: @calendar-picker-padding;

    &-header {
      width: 100%;
      text-align: center;
    }

    &-header-month-toolbar {
      float: none;
    }
  }

  .rs-calendar-month-dropdown {
    z-index: @zindex-date-range-picker-calendar-dropdown;
  }

  .rs-picker-daterange-panel-show-one-calendar {
    .rs-picker-toolbar {
      &-ranges {
        width: 190px;
      }
    }
  }

  .rs-picker-daterange-panel-only-time {
    .rs-picker-daterange-calendar-group {
      min-width: auto;
    }
  }

  // Calendar single
  .rs-picker-daterange-calendar-single {
    .rs-calendar {
      border: 0;
      display: block;
      margin: auto;
    }
  }
}

// Header
.rs-picker-daterange-header {
  padding: @date-range-picker-header-padding-vertical @picker-menu-padding;
  font-size: @date-range-picker-header-font-size;
  line-height: @date-range-picker-header-line-height;
  border-bottom: 1px solid var(--rs-border-primary);

  .rs-picker-header-date:focus {
    background-color: transparent;
  }

  &.rs-picker-tab-active-end,
  &.rs-picker-tab-active-start {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-around;

    &::after {
      content: ' ';
      position: absolute;
      width: 50%;
      bottom: -1px;
      border-bottom: 2px solid #3498ff;
      left: 0;
      transition: left 0.3s;
    }
  }

  &.rs-picker-tab-active-end {
    &::after {
      left: 50%;
    }
  }
}

// Calendar group
.rs-picker-daterange-calendar-group {
  display: flex;
  flex-wrap: nowrap;
  height: 274px;
  // Make sure group wrapper can put 2 date-panels even screen width is not enough.
  min-width: 492px;
}

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

  .rs-btn {
    display: block;
  }
}