rsuite/lib/DateRangePicker/styles/common.less

A suite of react components

@import '../../styles/common';

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

// Date range Picker Name Space
@drpns: ~'@{ns}@{date-range-picker-prefix}';

.@{drpns} {
  .@{ns}picker-toggle-caret::before {
    content: @calendar-default-caret-content !important;
    // Adjust the line-height to make sure icon vertical align middle.
    line-height: 17px;
  }
}

.@{drpns}-menu {
  .@{ns}@{calendar-picker-prefix} {
    display: inline-block;
    width: @date-range-picker-calendar-default-width;
    height: 278px;
    padding-bottom: 12px;

    &:first-child {
      border-right: @date-range-picker-inner-border;
    }

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

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

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

    &-list {
      width: 185px;
    }
  }

  .@{ns}picker-toolbar {
    margin-top: 4px;
    max-width: @date-range-picker-calendar-default-width * 2;
  }

  .@{drpns}-panel-show-one-calendar .@{ns}picker-toolbar {
    max-width: @date-range-picker-calendar-default-width;
  }

  // Calendar single
  .@{drpns}-calendar-single {
    .@{ns}@{calendar-picker-prefix} {
      border: 0;
      display: block;
      margin: auto;
    }
  }
}

// Header
.@{drpns}-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: @date-range-picker-inner-border;
}

// Calendar group
.@{drpns}-calendar-group {
  height: 274px;
  // Make sure group wrapper can put 2 date-panels even screen width is not enough.
  min-width: 510px;
}