polestar-ui-kit/styles/components/base-date-picker/index.less

## Install

// @import "../../../styles/index.less";
@import '~rc-calendar/assets/index.css';
@import '~rc-time-picker/assets/index.css';

@import '../../themes/default/index';
@import '../../mixins/index';

@popover-prefix-cls: ~'@{ant-prefix}-popover';
@list-prefix-cls: ~'@{ant-prefix}-list';
@calendar-prefix-cls: ~'@{ant-prefix}-calendar';

.@{popover-prefix-cls} {
  &-inner-content {
    padding: 0;
  }
  .@{ps-base-date-calendar-prefix-cls} {
    height: 350px;
    &-panel {
      float: left;
      &:nth-of-type(2) .@{ps-base-date-calendar-prefix-cls}-title{
        border-left: @border-width-base @border-style-base @primary-3;
      }
    }
    &-title {
      background: @primary-1;
      padding: 5px 0 5px 10px;
      border-bottom: @border-width-base @border-style-base @primary-3;
    }
    &-content {
      .@{list-prefix-cls} {
        &-item {
          cursor: pointer;
        }
        &.active {
          color: @primary-color;
          background-color: @primary-2;
        }
      }
    }
    &-list-container {
      border: 0;
      border-radius: 0;
      overflow: auto;
      height: 324px;
      border-left: @border-width-base @border-style-base @primary-3;
    }
    .@{list-prefix-cls}-bordered {
      border-radius: 0;
      border: 0;
      .@{list-prefix-cls}-item {
        border-bottom: 1px solid transparent;
        padding-left: 10px;
        &:hover{
          background: @item-hover-bg;
          color: @primary-color;
        }
      }
    }

    /* rc calendar*/

    .rc-calendar {
      border-radius: 0;
      box-shadow: none;
      border: 0;
    }
    .rc-calendar-input {
      color: @primary-color;
    }
    .rc-calendar-header {
      border-bottom: @border-width-base @border-style-base @primary-3;
    }
    .rc-calendar-input-wrap {
      //border-top: @border-width-base @border-style-base @primary-3;
      border-bottom: @border-width-base @border-style-base @primary-3;
    }
    .rc-calendar-footer {
      background: @primary-1;
      border-top: @border-width-base @border-style-base @primary-3;
    }
    .rc-calendar-date {
      border-radius: 100px;
      transition: all ease .3s;
    }
    .rc-calendar-date:hover {
      background: @primary-1;
      color: @primary-color;
    }
    .rc-calendar-selected-date .rc-calendar-date {
      background: @primary-5;
    }
    .rc-calendar-selected-day .rc-calendar-date {
      background: @primary-4;
      color: @primary-1;
      .font-noto();
    }
    .rc-calendar-today .rc-calendar-date {
        border: transparent;
        border-radius: 100px;
        background: @primary-2;
        color: @primary-color;
        .font-noto();
    }
    .rc-calendar-time-picker-panel .rc-time-picker-panel-select li {
      &:hover{
        background: @item-hover-bg;
        color: @primary-color;
      }
    }
    li.rc-time-picker-panel-select-option-selected {
      background: @gray-1;
      font-weight: 500;
    }
    .rc-calendar-time-picker-panel .rc-time-picker-panel-inner {
      height: 100%;
    }
    .rc-calendar-prev-month-btn,
    .rc-calendar-next-month-btn,
    .rc-calendar-prev-year-btn,
    .rc-calendar-next-year-btn {
      font-size: @font-size-lg;
      font-weight: 600;
      color: @primary-4;
    }
    .rc-calendar-prev-month-btn:hover,
    .rc-calendar-next-month-btn:hover,
    .rc-calendar-prev-year-btn:hover,
    .rc-calendar-next-year-btn:hover {
      color: @primary-color;
    }
    .rc-calendar-today-btn,
    .rc-calendar-ok-btn,
    .rc-calendar-time-picker-btn {
      color: @primary-4;
      &:hover{
        color: @primary-color;
      }
    }
    .rc-calendar-footer {
      padding: 9px 0;
    }
    .rc-calendar-year-select,
    .rc-calendar-month-select,
    .rc-calendar-day-select {
      &:hover{
        color: @primary-color;
      }
    }
    .rc-calendar-year-panel-header,
    .rc-calendar-decade-panel-header,
    .rc-calendar-month-panel-header {
      background: #ebf0f7;
      height: auto;
      border-bottom-width: 0;
    }
    .rc-calendar-year-panel-header > a,
    .rc-calendar-decade-panel-header > a,
    .rc-calendar-month-panel-header > a {
      color: @text-color-base;
      &:hover{
        color: @primary-color;
      }
    }
    .rc-calendar-year-panel-prev-decade-btn,
    .rc-calendar-year-panel-next-decade-btn,
    .rc-calendar-decade-panel-prev-century-btn,
    .rc-calendar-decade-panel-next-century-btn,
    .rc-calendar-month-panel-prev-year-btn,
    .rc-calendar-month-panel-next-year-btn {
        font-size: @font-size-lg;
    }
    .rc-calendar-year-panel .rc-calendar-year-panel-decade-select {
        font-size: @font-size-sm;
    }
    .rc-calendar-year-panel-year:hover,
    .rc-calendar-decade-panel-decade:hover{
        background: none;
    }
    .rc-calendar-year-panel-selected-cell .rc-calendar-year-panel-year,
    .rc-calendar-decade-panel-selected-cell .rc-calendar-decade-panel-decade,
    .rc-calendar-month-panel-selected-cell .rc-calendar-month-panel-month {
        background: none !important;
        color: @primary-color;
    }
    .rc-calendar-year-panel-selected-cell .rc-calendar-year-panel-year:hover,
    .rc-calendar-decade-panel-selected-cell .rc-calendar-decade-panel-decade:hover,
    .rc-calendar-month-panel-cell .rc-calendar-month-panel-month:hover {
        background: none !important;
        color: @text-color-base;
    }
    .rc-calendar-month-panel-cell .rc-calendar-month-panel-month:hover {
      color: @primary-color;
    }
    .rc-calendar-year-panel-body,
    .rc-calendar-decade-panel-body,
    .rc-calendar-month-panel-body {
        padding: 0px 0px 0px;
        top: 38px;
    }
    .rc-calendar-decade-panel-body{
        top: 34px;
    }
    .rc-calendar-year-panel-cell,
    .rc-calendar-decade-panel-cell,
    .rc-calendar-month-panel-cell {
      border-right: @border-width-base @border-style-base @primary-3 !important;
      border-bottom: @border-width-base @border-style-base @primary-3 !important;
      &:last-child{
          border-right-width: 0 !important;
          border-bottom-width: 0;
      }
      &:hover{
          background: @primary-2;
      }
    }
    .rc-calendar-year-panel-last-decade-cell .rc-calendar-year-panel-year,
    .rc-calendar-year-panel-next-decade-cell .rc-calendar-year-panel-year,
    .rc-calendar-decade-panel-last-century-cell .rc-calendar-decade-panel-decade,
    .rc-calendar-decade-panel-next-century-cell .rc-calendar-decade-panel-decade {
      cursor: not-allowed; 
    }
    .rc-calendar-year-panel-last-decade-cell,
    .rc-calendar-year-panel-next-decade-cell,
    .rc-calendar-decade-panel-last-century-cell,
    .rc-calendar-decade-panel-next-century-cell{
      background: none;
      &:hover{
        background: none;
      }
    }
    &-picker {
      width: 100%;
      .@{calendar-prefix-cls}-picker-input {
        cursor: text;
        padding: 2px 11px 4px 11px;
      }
    }
  }
}