tdesign-react/esm/style/web/components/date-picker/_index.less

TDesign Component for React

// 组件允许单个组件打包，因此默认引入公共基础样式

@import "../../base.less";

@import "./_var.less";

@import "./_mixin.less";

@import "../../mixins/_reset.less";

.@{prefix}-date-picker,
.@{prefix}-date-range-picker {
  display: inline-flex;
  .reset;
}

.@{prefix}-date-picker__header-controller-month-popup,
.@{prefix}-date-picker__header-controller-year-popup {
  > .@{prefix}-popup__content {
    max-height: @datepicker-panel-select-max-width;
  }
}

.@{prefix}-date-picker__panel-container,
.@{prefix}-date-range-picker__panel-container {
  > .@{prefix}-popup__content {
    padding: 0;
    min-width: @datepicker-panel-container-min-width;
  }
}

.@{prefix}-date-picker__panel,
.@{prefix}-date-range-picker__panel {
  display: flex;
  flex-direction: column;

  &--direction-row {
    flex-direction: row;
  }

  // 配合time-picker使用 需重置部分样式
  .@{prefix}-time-picker__panel {
    width: @datepicker-time-panel-width;

    &-section-body {
      padding: 0;
    }

    &-body {
      margin: 0;
    }
  }
}

.@{prefix}-date-picker__panel-content,
.@{prefix}-date-range-picker__panel-content,
.@{prefix}-date-range-picker__panel-content-wrapper {
  display: flex;
}

.@{prefix}-date-picker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: @datepicker-header-gap;
  width: 100%;

  &-controller {
    display: inline-flex;
    gap: @datepicker-header-controller-gap;

    .@{prefix}-date-picker__header-controller-month {
      width: @datepicker-month-controller-width;
      display: flex;
    }

    .@{prefix}-date-picker__header-controller-year {
      width: @datepicker-year-controller-width;
      display: flex;
    }
  }
}

.@{prefix}-date-picker__table {
  table {
    width: 100%;
    border-collapse: collapse;

    th {
      text-align: center;
      color: @datepicker-th-font-color;
      font-weight: @datepicker-th-font-weight;
    }

    td.@{prefix}-date-picker__cell {
      text-align: center;
      font-weight: @datepicker-font-weight-medium;
    }

    th,
    th.@{prefix}-date-picker__table-header-cell,
    td.@{prefix}-date-picker__cell {
      padding: 0;
      border: 0;
      line-height: @text-line-height-base;
    }

    thead::after {
      content: "-";
      display: block;
      line-height: @datepicker-thead-pseudo-line-height;
      color: transparent;
    }

    thead::before {
      content: "-";
      display: block;
      line-height: @datepicker-thead-pseudo-line-height;
      color: transparent;
    }
  }

  // 周选择器交互
  &-week-row {
    cursor: pointer;
    position: sticky;

    .@{prefix}-date-picker__cell:first-child .@{prefix}-date-picker__cell-inner {
      color: @datepicker-cell-disabled-color;
    }

    .@{prefix}-date-picker__cell:hover .@{prefix}-date-picker__cell-inner {
      box-shadow: none;
      background: none;
    }

    &::after {
      content: "";
      position: absolute;
      left: @datepicker-week-firstcell-margin-left;
      right: 0;
      top: @datepicker-cell-inner-margin;
      z-index: 10;
      height: @datepicker-cell-height;
      border-radius: @border-radius-default;
      transition: @datepicker-transition;
      pointer-events: none;
    }

    &:hover {
      .@{prefix}-date-picker__cell:first-child .@{prefix}-date-picker__cell-inner {
        color: @brand-color;
      }

      &::after {
        box-shadow: inset 0 0 0 1px @brand-color;
      }
    }

    // 高亮
    &--active {
      &::after {
        opacity: 1;
        z-index: 0;
        background-color: @datepicker-cell-active-background;
      }
      .@{prefix}-date-picker__cell:first-child .@{prefix}-date-picker__cell-inner {
        color: @brand-color;
      }
      .@{prefix}-date-picker__cell .@{prefix}-date-picker__cell-inner {
        background: transparent;
        color: @datepicker-cell-active-color;
      }
    }

    // 在高亮区间
    &--range {
      &::after {
        opacity: 1;
        z-index: 0;
        background-color: @datepicker-highlight-color;
      }

      .@{prefix}-date-picker__cell .@{prefix}-date-picker__cell-inner {
        background: transparent;
      }
    }
  }
}

.@{prefix}-date-picker__footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: @datepicker-presets-padding;
  gap: @datepicker-presets-gap;

  &--bottom {
    border-top: 1px solid @datepicker-panel-divider-color;
  }

  &--top {
    border-bottom: 1px solid @datepicker-panel-divider-color;
  }

  &--left {
    flex-direction: column;
    border-right: 1px solid @datepicker-panel-divider-color;

    .@{prefix}-date-picker__presets {
      flex-direction: column;
    }
  }

  &--right {
    flex-direction: column;
    border-left: 1px solid @datepicker-panel-divider-color;

    .@{prefix}-date-picker__presets {
      flex-direction: column;
    }
  }
}

.@{prefix}-date-picker__presets {
  display: flex;
  gap: @datepicker-presets-gap;
  white-space: nowrap;
  min-width: @datepicker-presets-min-width;

  .@{prefix}-button {
    cursor: pointer;
  }

  a {
    color: @datepicker-presets-text-color;

    &:hover {
      color: @datepicker-presets-text-color-hover;
    }
  }
}

.@{prefix}-date-picker__panel-time,
.@{prefix}-date-range-picker__panel-time {
  display: flex;
  flex-direction: column;
  gap: @datepicker-time-panel-gap;
  padding: @datepicker-time-panel-padding;
  border-left: 1px solid @datepicker-panel-divider-color;

  &-viewer {
    display: flex;
    height: @datepicker-time-header-viewer-size;
    line-height: @text-line-height-base;
    align-items: center;
    justify-content: center;
    color: @text-color-primary;
  }

  .@{prefix}-time-picker__panel-body {
    margin: 0;
  }
}

.@{prefix}-date-picker__panel-year,
.@{prefix}-date-picker__panel-month,
.@{prefix}-date-picker__panel-quarter,
.@{prefix}-date-picker__panel-week,
.@{prefix}-date-picker__panel-date {
  display: flex;
  flex-direction: column;
  padding: @datepicker-panel-padding;
  gap: @datepicker-panel-gap;
  width: @datepicker-panel-width;
  box-sizing: border-box;
}

// year month picker highlight
.@{prefix}-date-picker__panel-year,
.@{prefix}-date-picker__panel-month {
  .@{prefix}-date-picker__cell--hover-highlight +
  .@{prefix}-date-picker__cell--hover-highlight {
    &::before,
    &::after {
      opacity: 1;
      left: @datepicker-cell-month-year-left;
    }
  }

  .@{prefix}-date-picker__cell--hover-highlight +
  .@{prefix}-date-picker__cell--active {
    &::after {
      opacity: 1;
      left: @datepicker-cell-month-year-left;
      z-index: 5;
    }
  }

  .@{prefix}-date-picker__cell--highlight +
  .@{prefix}-date-picker__cell--highlight {
    &::before {
      left: @datepicker-cell-month-year-left;
    }
  }
}

.@{prefix}-date-picker__panel-year,
.@{prefix}-date-picker__panel-month,
.@{prefix}-date-picker__panel-quarter {
  .@{prefix}-date-picker__header-controller-year {
    width: 130px;
    display: flex;
  }

  .@{prefix}-date-picker__table {
    table {
      tbody {
        width: 100%;
        display: flex;
        gap: @datepicker-year-month-quarter-table-gap;
        flex-direction: column;

        tr {
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }

  .@{prefix}-date-picker__cell--disabled + .@{prefix}-date-picker__cell--disabled:before {
    left: @datepicker-cell-disabled-left-large;
  }

  .@{prefix}-date-picker__cell:nth-child(1) {
    text-align: left;
  }

  .@{prefix}-date-picker__cell:nth-child(3) {
    text-align: right;
  }

  .@{prefix}-date-picker__cell-inner {
    width: @datepicker-cell-min-width-l;
  }
}

.@{prefix}-date-picker__cell {
  cursor: pointer;
  position: relative;
  padding: 0;

  &::before,
  &::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -5%;
    left: -5%;
    z-index: 1;
    opacity: 0;
    border-radius: @border-radius-default;
    height: @datepicker-cell-height;
    transform: translateY(-50%);
    transition: opacity @anim-duration-base @anim-time-fn-ease-out;
  }

  &:hover {
    .@{prefix}-date-picker__cell-inner {
      box-shadow: inset 0 0 0 1px @brand-color;
    }
  }

  &-inner {
    position: relative;
    z-index: 5;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: @datepicker-cell-min-width;
    height: @datepicker-cell-height;
    margin: @datepicker-cell-inner-margin;
    border-radius: @datepicker-panel-border-radius;
    transition: @datepicker-transition;
  }

  &--now {
    .@{prefix}-date-picker__cell-inner {
      color: @datepicker-now-text-color;
      background: @datepicker-now-background-color;
    }
  }

  &--hover-highlight {
    &::after {
      opacity: 1;
      background-color: @datepicker-highlight-color;
    }
  }

  &--highlight {
    &::before {
      opacity: 1;
      background-color: @datepicker-highlight-color;
    }

    &.@{prefix}-date-picker__cell--hover-highlight {
      &::after {
        opacity: 1;
        background-color: @datepicker-hover-highlight-color;
      }
    }
  }

  &--additional {
    &:hover {
      .@{prefix}-date-picker__cell-inner {
        box-shadow: none;
        border-color: @datepicker-cell-hover-background;
        background-color: @datepicker-cell-hover-background;
      }
    }

    .@{prefix}-date-picker__cell-inner {
      color: @datepicker-cell-disabled-color;
    }
  }

  &--active {
    .@{prefix}-date-picker__cell-inner {
      color: @datepicker-cell-active-color;
      background-color: @datepicker-cell-active-background;
    }

    &-start {
      &::before {
        opacity: 1;
        left: @datepicker-cell-start-end-horizontal;
        border-top-left-radius: @border-radius-default;
        border-bottom-left-radius: @border-radius-default;
      }

      &:hover::before {
        left: -5%;
      }
    }

    &-end {
      &::before {
        opacity: 1;
        right: @datepicker-cell-start-end-horizontal;
        border-top-right-radius: @border-radius-default;
        border-bottom-right-radius: @border-radius-default;
      }

      &:hover::before {
        right: -5%;
      }
    }
  }

  &--disabled {
    &:hover {
      .@{prefix}-date-picker__cell-inner {
        box-shadow: none;
        background-color: @datepicker-cell-disable-background-color;
      }
    }

    .@{prefix}-date-picker__cell-inner {
      cursor: not-allowed;
      color: @datepicker-cell-disabled-color;
      background-color: @datepicker-cell-disable-background-color;
    }
  }

  &--disabled + &--disabled {
    &::before {
      opacity: 1;
      left: @datepicker-cell-disabled-left;
      background-color: @datepicker-cell-disable-background-color;
      border-radius: @border-radius-default;
    }
  }
}

// hover 日期淡化输入框
.@{prefix}-date-picker__input--placeholder {
  input {
    color: @text-color-placeholder;
  }
}