tntd/lib/date-picker/index.less

tntd是基于 TNT Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

@import '../style/themes/index';

@datepicker-prefix-cls: ~'@{ant-prefix}-date-picker';
@calendar-prefix-cls: ~'@{ant-prefix}-calendar';
@calendar-timepicker-prefix-cls: ~'@{ant-prefix}-calendar-time-picker';

.@{calendar-prefix-cls}-picker-container{
  .@{calendar-prefix-cls}{
    // margin-top: 42px;
    .@{calendar-prefix-cls}-input-wrap{
      // display: none;
    }
  }
  .@{calendar-prefix-cls}-range{
    // margin-top: 42px;
    .@{calendar-prefix-cls}-input-wrap,.@{calendar-prefix-cls}-range-middle{
      // display: none;
    }
    .@{calendar-prefix-cls}-decade-panel,.@{calendar-prefix-cls}-year-panel,.@{calendar-prefix-cls}-month-panel{
      // top: 0
    }
  }
  .@{calendar-prefix-cls}-month-calendar,.@{calendar-prefix-cls}-week-number{
    // margin-top: 42px;
  }
  //.@{calendar-prefix-cls}-today .@{calendar-prefix-cls}-date{
  //  background-color: @white;
  //}
  .@{calendar-prefix-cls}:not(.@{calendar-prefix-cls}-range){
    .@{calendar-prefix-cls}-selected-date .@{calendar-prefix-cls}-date{
      background-color: @blue-6;
      color: @white;
    }
  }

}
//Picker
.@{calendar-prefix-cls}-picker{
  input,.@{calendar-prefix-cls}-picker-input{
    border-color: @border-color-secondary;
    color: @text-color;
    &:focus{
      border-color: @blue-5;
    }
  }
  &:has(input:not([value=''])),&:hover  {
    .@{calendar-prefix-cls}-picker-icon{
      color: @text-color-secondary;
    }
  }
  &:has(input[disabled]){
    .@{calendar-prefix-cls}-picker-icon{
      color: @disabled-color;
    }
  }
  .@{calendar-prefix-cls}-picker-icon{
    width: auto;
    height: @font-size-lg;
    font-size: @font-size-lg;
  }
  .@{calendar-prefix-cls}-picker-clear{
    color: tint(@bg-color-spotilight, 50%);
  }
}
.@{datepicker-prefix-cls}{
  &-fill{
    .@{calendar-prefix-cls}-picker{
      &-input {
        &.@{ant-prefix}-input {
          background-color: @fill-color-quaternary;
          border-color: @fill-color-quaternary;
          &-disabled {
            border: none;
            pointer-events: none;
            background: @disabled-bg;
          }
          &:focus{
            background-color: @white;
            border-color: @blue-5;
          }
        }
        &:not([value='']):hover {
          background-color: @white;
        }
      }
    }
  }
}

//Calender
.@{calendar-prefix-cls}{
  &-footer {
    &-extra {
      .@{ant-prefix}-tag{
        color: @text-color;
        border: none;
        background-color: @white;
        &:hover{
          color: @blue-6;
        }
      }
    }
  }

  thead tr{
    border-bottom: none;
  }
  table th{
    background-color: @white;
  }
}

//RangePicker
.@{calendar-prefix-cls}-range{
  .@{calendar-prefix-cls}-in-range-cell,
  .@{calendar-prefix-cls}-selected-start-date,
  .@{calendar-prefix-cls}-selected-end-date {
    position: relative;
    border-radius: 0;
    > div {
      position: relative;
      z-index: 1;
    }
    &::before {
      position: absolute;
      top: 3px;
      right: 0;
      bottom: 3px;
      left: 0;
      display: block;
      background: @item-active-bg;
      border: 0;
      border-radius: 0;
      content: '';
    }
  }
  .@{calendar-prefix-cls}-selected-start-date{
    &::before{
      border-radius: @border-radius-base 0 0 @border-radius-base;
    }
    &::after {
      position: absolute;
      bottom: -2px;
      left: 16px;
      display: block;
      background: @blue-6;
      border: 0;
      border-radius: 50%;
      width: 4px;
      height: 4px;
      content: '';
    }
  }
  //ant-calendar-last-day-of-month
  //ant-calendar-last-month-cell ant-calendar-last-day-of-month
  .@{calendar-prefix-cls}-selected-end-date{
    &::before{
      border-radius: 0 @border-radius-base @border-radius-base 0;
    }
  }
  .@{calendar-prefix-cls}-selected-start-date.@{calendar-prefix-cls}-selected-end-date{
    &::before{
      border-radius: @border-radius-base @border-radius-base @border-radius-base @border-radius-base;
    }
  }
  tr .@{calendar-prefix-cls}-in-range-cell:first-child{
    &::before{
      border-radius: @border-radius-base 0 0 @border-radius-base;
    }
  }
  tr .@{calendar-prefix-cls}-selected-end-date:first-child,
  tr .@{calendar-prefix-cls}-selected-start-date:last-child{
    &::before{
      border-radius: @border-radius-base @border-radius-base @border-radius-base @border-radius-base;
    }
  }
  tr .@{calendar-prefix-cls}-in-range-cell:last-child{
    &::before{
      border-radius: 0 @border-radius-base @border-radius-base 0;
    }
  }
  .@{calendar-prefix-cls}-cell{
    height: 38px;
  }
}

//MonthPanel
.@{calendar-prefix-cls}-month-panel-month {
  border-radius: @border-radius-base;
}

//WeekPicker
.@{calendar-prefix-cls}-week-number {
  &-cell {
    opacity: 1;
    font-weight: normal;
    color: @text-color-tertiary !important;
  }
  .@{calendar-prefix-cls}-body tr {
    cursor: pointer;
    transition: all 0.3s;
    background: @white;
    .@{calendar-prefix-cls}-date{
      width: auto;
      border-radius: 0;
      font-weight: 500;
    }
    &:hover {
      background: @white;
      td:nth-child(2){
        .@{calendar-prefix-cls}-date{
          border-radius: @border-radius-base 0  0 @border-radius-base;
        }
      }
      td:last-child{
        .@{calendar-prefix-cls}-date{
          border-radius: 0 @border-radius-base @border-radius-base 0;
        }
      }
      .@{calendar-prefix-cls}-cell{
        &::before{
          top: 8px;
          bottom: 8px;
        }
        .@{calendar-prefix-cls}-date{
          background: @background-color-base;
          &:hover{
            background: @background-color-base;
          }
        }
        .@{calendar-prefix-cls}-selected-day{
          background: @background-color-base;
        }
      }
      .@{calendar-prefix-cls}-week-number-cell{
        background: @white;
      }
    }
    .@{calendar-prefix-cls}-selected-day .@{calendar-prefix-cls}-date,
    .@{calendar-prefix-cls}-selected-day:hover .@{calendar-prefix-cls}-date {
      color: @text-color;
      background: transparent;
    }
    &.@{calendar-prefix-cls}-active-week {
      background: transparent;
      td:nth-child(2){
        .@{calendar-prefix-cls}-selected-day,.@{calendar-prefix-cls}-date{
          border-radius: @border-radius-base 0  0 @border-radius-base;
        }
      }
      td:last-child{
        .@{calendar-prefix-cls}-selected-day,.@{calendar-prefix-cls}-date{
          border-radius: 0 @border-radius-base @border-radius-base 0;
        }
      }
      .@{calendar-prefix-cls}-cell{
        font-weight: bold;
        //background: @primary-color;
        .@{calendar-prefix-cls}-date{
          color: @text-color-inverse;
          background: @primary-color;
          &:hover{
            color: @text-color-inverse;
            background: @primary-color;
          }
        }
        .@{calendar-prefix-cls}-selected-day{
          background: @primary-color;
        }
      }
    }
    .@{calendar-prefix-cls}-today .@{calendar-prefix-cls}-date{
      //color: @text-color;
      //font-weight: normal;
      border-color: transparent;
    }
  }
  .@{calendar-prefix-cls}-cell{
    height: 38px;
    position: relative;
    &::before {
      position: absolute;
      top: 3px;
      right: 0;
      bottom: 3px;
      left: 0;
      display: block;
      border: 0;
      border-radius: 0;
      content: '';
    }
  }
}