wetrade-design/lib/date-picker/style/panel.less

一款多语言支持Vue3的UI框架

@picker-cell-inner-cls: ~'@{picker-prefix-cls}-cell-inner';
@calendar-prefix-cls: ~'@{wd-prefix}-picker-calendar';

.@{picker-prefix-cls} {
  @picker-arrow-size: 7px;
  @picker-year-month-cell-width: 56px;
  @picker-panel-width: @picker-panel-cell-width * 7 + @padding-sm * 2;
  @picker-week-panel-width: @picker-panel-cell-width * 8 + @padding-sm * 2;

  &-panel {
    display: inline-flex;
    flex-direction: column;
    text-align: center;
    background: @calendar-bg;
    // border: @border-width-base @border-style-base @picker-border-color;
    border-radius: @border-radius-base;
    outline: none;

    &-focused {
      border-color: @brand-primary;
    }
  }

  // ========================================================
  // =                     Shared Panel                     =
  // ========================================================
  &-decade-panel,
  &-year-panel,
  &-quarter-panel,
  &-month-panel,
  &-date-panel,
  &-time-panel {
    display: flex;
    flex-direction: column;
    width: @picker-panel-width;
  }

  &-week-panel {
    display: flex;
    flex-direction: column;
    width: @picker-week-panel-width;
  }

  // ======================= Header =======================
  &-header {
    display: flex;
    padding: @padding-xs @padding-sm;
    color: @heading-color;
    border-bottom: @border-width-base @border-style-base @picker-border-color;

    > * {
      flex: none;
    }

    button {
      padding: 0;
      color: @disabled-color;
      line-height: @line-height-normal;
      background: transparent;
      border: 0;
      cursor: pointer;
      transition: color @animation-duration-slow;

      .@{iconfont-css-prefix} {
        font-size: @font-size-base;
        color: @icon-secondary;
      }

      &.@{picker-prefix-cls} {
        &-header-super-prev-btn,
        &-header-prev-btn,
        &-header-super-next-btn,
        &-header-next-btn {
          position: relative;
          width: @picker-panel-header-button-size;

          &:hover {
            .@{iconfont-css-prefix} {
              color: @icon-primary;
            }

            &::before {
              background-color: @sp-hover-bar;
              opacity: 1;
            }
          }

          &:active {
            .@{iconfont-css-prefix} {
              color: @icon-primary;
            }

            &::before {
              background-color: @sp-hover-bar-active;
              opacity: 1;
            }
          }

          &::before {
            opacity: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: @picker-panel-header-button-bg-hover-color;
            content: '';
            width: @picker-panel-header-button-size;
            height: @picker-panel-header-button-size;
            border-radius: @picker-panel-header-button-size;
          }
        }
      }
    }

    > button {
      min-width: 1.6em;
      font-size: @font-size-base;

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

    &-view {
      flex: auto;
      font-weight: 500;
      line-height: @line-height-normal;
      color: @picker-panel-header-title-color;
      font-size: @font-size-base;

      button {
        color: inherit;
        font-weight: inherit;

        // &:not(:first-child) {
        // margin-left: @padding-xs;
        // }

        &:hover {
          color: @brand-primary;
        }
      }
    }

    &-split {
      margin: 0 @margin-xss;
    }
  }

  // Arrow button
  &-prev-icon,
  &-next-icon,
  &-super-prev-icon,
  &-super-next-icon {
    position: relative;
    display: inline-block;
    width: @picker-arrow-size;
    height: @picker-arrow-size;

    &::before {
      position: absolute;
      top: 0;
      left: 0;
      display: inline-block;
      width: @picker-arrow-size;
      height: @picker-arrow-size;
      border: 0 solid currentcolor;
      border-width: 1.5px 0 0 1.5px;
      content: '';
    }
  }

  &-super-prev-icon,
  &-super-next-icon {
    &::after {
      position: absolute;
      top: ceil((@picker-arrow-size / 2));
      left: ceil((@picker-arrow-size / 2));
      display: inline-block;
      width: @picker-arrow-size;
      height: @picker-arrow-size;
      border: 0 solid currentcolor;
      border-width: 1.5px 0 0 1.5px;
      content: '';
    }
  }

  &-prev-icon,
  &-super-prev-icon {
    transform: rotate(-45deg);
  }

  &-next-icon,
  &-super-next-icon {
    transform: rotate(135deg);
  }

  // ======================== Body ========================
  &-content {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;

    th,
    td {
      position: relative;
      min-width: 24px;
      font-weight: 400;
    }

    th {
      height: @picker-panel-header-height;
      color: @picker-panel-header-color;
      line-height: @picker-panel-header-height;
      font-size: @picker-panel-header-font-size;
    }

    td {
      height: @picker-panel-cell-td-height;
      line-height: @picker-panel-cell-td-height;
    }
  }

  .picker-cell-inner(@cellClassName) {
    &::before {
      position: absolute;
      top: calc(50%);
      right: 0;
      left: 0;
      z-index: 1;
      height: @picker-panel-cell-td-before-height;
      transform: translateY(-50%);
      transition: all @animation-duration-slow;
      content: '';
    }

    // >>> Default
    .@{cellClassName} {
      position: relative;
      z-index: 2;
      display: inline-block;
      min-width: @picker-time-panel-cell-height;
      height: @picker-time-panel-cell-height;
      line-height: @picker-time-panel-cell-height;
      border-radius: @border-radius-bg;
      transition: background @animation-duration-slow, border @animation-duration-slow;
      font-size: @font-size-sm;
    }

    // >>> Hover
    &:hover:not(&-no-event):not(&-in-view),
    &:hover:not(&-no-event):not(&-selected):not(&-range-start):not(&-range-end):not(
        &-range-hover-start
      ):not(&-range-hover-end) {
      .@{cellClassName} {
        background: @picker-basic-cell-hover-color;
      }
    }

    // >>> Today
    &-in-view&-today .@{cellClassName} {
      color: @picker-panel-body-today-color;

      &::before {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 0);
        z-index: 1;
        border-radius: @picker-panel-cell-today-width;
        border: @picker-month-panel-today-border solid @brand-primary;
        content: '';
      }
    }

    // >>> In Range
    &-in-view&-in-range {
      position: relative;

      &::before {
        background: @picker-basic-cell-active-with-range-color;
      }
    }

    // >>> Selected
    &-in-view&-selected .@{cellClassName},
    &-in-view&-range-start .@{cellClassName},
    &-in-view&-range-end .@{cellClassName} {
      color: @picker-panel-body-selected-color;
      background: @brand-primary;
    }

    &-in-view&-range-start:not(&-range-start-single),
    &-in-view&-range-end:not(&-range-end-single) {
      &::before {
        background: @picker-basic-cell-active-with-range-color;
      }
    }

    &-in-view&-range-start::before {
      border-radius: @border-radius-bg 0 0 @border-radius-bg;
    }

    &-in-view&-range-end::before {
      border-radius: 0 @border-radius-bg @border-radius-bg 0;
    }

    &-in-view&-range-start&-in-view&-range-end::before {
      border-radius: @border-radius-bg;
    }

    // >>> Range Hover
    &-in-view&-range-hover-start:not(&-in-range):not(&-range-start):not(&-range-end),
    &-in-view&-range-hover-end:not(&-in-range):not(&-range-start):not(&-range-end),
    &-in-view&-range-hover-start&-range-start-single,
    &-in-view&-range-hover-start&-range-start&-range-end&-range-end-near-hover,
    &-in-view&-range-hover-end&-range-start&-range-end&-range-start-near-hover,
    &-in-view&-range-hover-end&-range-end-single,
    &-in-view&-range-hover:not(&-in-range) {
      &::after {
        position: absolute;
        top: 50%;
        z-index: 0;
        width: 100%;
        height: @picker-panel-cell-height;
        // border-top: @border-width-base dashed @picker-date-hover-range-border-color;
        // border-bottom: @border-width-base dashed @picker-date-hover-range-border-color;
        transform: translateY(-50%);
        transition: all @animation-duration-slow;
        background: @picker-date-active-range-color;
        content: '';
      }
    }

    // Add space for stash
    &-range-hover-start::after,
    &-range-hover-end::after,
    &-range-hover::after {
      right: 0;
      // left: 2px;
    }

    // Hover with in range
    &-in-view&-in-range&-range-hover::before,
    &-in-view&-range-start&-range-hover::before,
    &-in-view&-range-end&-range-hover::before,
    &-in-view&-range-start:not(&-range-start-single)&-range-hover-start::before,
    &-in-view&-range-end:not(&-range-end-single)&-range-hover-end::before,
    .@{picker-prefix-cls}-panel
      > :not(.@{picker-prefix-cls}-date-panel)
      &-in-view&-in-range&-range-hover-start::before,
    .@{picker-prefix-cls}-panel
      > :not(.@{picker-prefix-cls}-date-panel)
      &-in-view&-in-range&-range-hover-end::before {
      background: @picker-date-hover-range-color;
    }

    // range start border-radius
    &-in-view&-range-start:not(&-range-start-single):not(&-range-end) .@{cellClassName} {
      border-radius: @border-radius-bg;
    }

    // range end border-radius
    &-in-view&-range-end:not(&-range-end-single):not(&-range-start) .@{cellClassName} {
      border-radius: @border-radius-bg;
    }

    // DatePanel only
    // .@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-start .@{cellClassName},
    // .@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-end .@{cellClassName} {
    //   &::after {
    //     position: absolute;
    //     top: @picker-panel-after-top;
    //     bottom: @picker-panel-after-bottom;
    //     z-index: -1;
    //     background: @picker-date-hover-range-color;
    //     transition: all @animation-duration-slow;
    //     content: '';
    //     width: @picker-panel-cell-height;
    //     height: @picker-panel-cell-height;
    //     left: @picker-panel-after-left !important;
    //   }
    // }
    .@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-start,
    .@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-end {
      &::before {
        background: @picker-date-hover-range-color;
      }
    }

    .@{picker-prefix-cls}-date-panel
      &-in-view&-in-range&-range-hover-start
      .@{cellClassName}::after {
      right: -5px - @border-width-base;
      left: 0;
    }
    .@{picker-prefix-cls}-date-panel &-in-view&-range-start&-in-view&-range-end::before,
    .@{picker-prefix-cls}-date-panel &-in-view&-range-start:not(&-range-start-single) &-inner,
    .@{picker-prefix-cls}-date-panel &-in-view&-range-end:not(&-range-end-single) &-inner {
      border-radius: 50%;
    }

    .@{picker-prefix-cls}-date-panel &-in-view&-range-start::before {
      border-radius: 50% 0 0 50%;
    }

    .@{picker-prefix-cls}-date-panel &-in-view&-range-end::before {
      border-radius: 0 50% 50% 0;
    }
    .@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-end .@{cellClassName}::after {
      right: 0;
      left: -5px - @border-width-base;
    }

    // Hover with range start & end
    // &-range-hover&-range-start::after {
    //   right: 50%;
    // }

    // &-range-hover&-range-end::after {
    //   left: 50%;
    // }

    // Edge start
    // tr > &-in-view&-range-hover:first-child::after,
    // tr > &-in-view&-range-hover-end:first-child::after,
    // &-in-view&-start&-range-hover-edge-start&-range-hover-edge-start-near-range::after,
    // &-in-view&-range-hover-edge-start:not(&-range-hover-edge-start-near-range)::after,
    // &-in-view&-range-hover-start::after {
    // left: 0;
    // border-left: @border-width-base dashed @picker-date-hover-range-border-color;
    // border-top-left-radius: @border-radius-base;
    // border-bottom-left-radius: @border-radius-base;
    // background: @picker-date-active-range-color;
    // }

    &-in-view&-range-hover-start::after {
      border-top-left-radius: 50%;
      border-bottom-left-radius: 50%;
    }

    // Edge end
    // tr > &-in-view&-range-hover:last-child::after,
    // tr > &-in-view&-range-hover-start:last-child::after,
    // &-in-view&-end&-range-hover-edge-end&-range-hover-edge-end-near-range::after,
    // &-in-view&-range-hover-edge-end:not(&-range-hover-edge-end-near-range)::after,
    // &-in-view&-range-hover-end::after {
    // right: 0;
    // border-right: @border-width-base dashed @picker-date-hover-range-border-color;
    // border-top-right-radius: @border-radius-base;
    // border-bottom-right-radius: @border-radius-base;
    // background: @picker-date-active-range-color;
    // }
    &-in-view&-range-hover-end::after {
      right: 0;
      border-top-right-radius: 50%;
      border-bottom-right-radius: 50%;
    }

    // >>> Disabled
    &-disabled {
      color: @disabled-color;
      pointer-events: none;

      .@{cellClassName} {
        background: transparent;
      }

      &::before {
        background: @picker-basic-cell-disabled-bg;
      }
    }
    &-disabled&-today .@{cellClassName}::before {
      border-color: @disabled-color;
    }
  }

  &-cell {
    // padding: 2px 0;
    color: @disabled-color;
    cursor: pointer;

    // In view
    &-in-view {
      color: @text-primary;
    }

    .picker-cell-inner(~'@{picker-cell-inner-cls}');
  }

  &-decade-panel,
  &-year-panel,
  &-quarter-panel,
  &-month-panel {
    .@{picker-prefix-cls}-content {
      height: @picker-panel-without-time-cell-height * 4;
      .picker-cell-inner(@cellClassName) {
      }
    }

    tbody {
      tr {
        td {
          &:last-child {
            .@{picker-cell-inner-cls} {
              margin-right: 0;
            }
          }

          &:first-child {
            .@{picker-cell-inner-cls} {
              margin-left: 0;
            }
          }
        }
      }
    }
  }

  &-date-panel {
    .@{picker-prefix-cls}-cell {
      .@{picker-cell-inner-cls} {
        border-radius: 50%;
      }
      &-in-view&-range-start::before {
        border-radius: 50%;
      }

      &-in-view&-range-end::before {
        border-radius: 50%;
      }

      &-in-view&-range-start&-in-view&-range-end::before {
        border-radius: 50%;
      }
    }
  }

  &-quarter-panel {
    width: @picker-quarter-panel-width;

    .wd-picker-body {
      padding: 12px 8px !important;
    }

    .@{picker-prefix-cls}-content {
      height: @picker-quarter-panel-cell-height;

      td {
        height: @picker-quarter-panel-cell-height;
        line-height: @picker-quarter-panel-cell-height;

        &::before {
          height: @picker-quarter-panel-cell-height;
        }
      }
    }
  }

  // ======================== Footer ========================
  &-footer {
    width: min-content;
    min-width: 100%;
    text-align: center;
    height: @picker-panel-footer-height;
    display: flex;
    align-items: center;
    justify-content: center;
    // border-bottom: @border-width-base @border-style-base transparent;

    .@{picker-prefix-cls}-panel & {
      border-top: @border-width-base @border-style-base @picker-border-color;
    }

    .@{picker-prefix-cls}-ranges {
      width: 100%;
    }

    &-extra {
      padding: 0 @padding-sm;
      text-align: center;

      &:not(:last-child) {
        border-bottom: @border-width-base @border-style-base @picker-border-color;
      }
    }
  }

  &-now {
    text-align: left;
  }

  &-today-btn {
    margin: @picker-panel-body-today-margin;
    width: @picker-panel-body-today-width;
  }

  // ========================================================
  // =                       Special                        =
  // ========================================================

  // ===================== Decade Panel =====================
  &-decade-panel {
    .@{picker-cell-inner-cls} {
      padding: 0 (@padding-xs / 2);
    }

    .@{picker-prefix-cls}-cell::before {
      display: none;
    }
  }

  // ============= Year & Quarter & Month Panel =============
  &-year-panel,
  &-quarter-panel,
  &-month-panel {
    @hover-cell-fixed-distance: (
      (((@picker-panel-width - @padding-xs * 2) / 3) - @picker-year-month-cell-width) / 2
    );

    .@{picker-prefix-cls}-body {
      padding: @padding-sm;
    }

    .@{picker-cell-inner-cls} {
      width: @picker-year-month-cell-width;
    }

    .@{picker-prefix-cls}-cell-range-hover-start::after {
      left: @hover-cell-fixed-distance;
      border-left: @border-width-base dashed @picker-date-hover-range-border-color;
      border-radius: @border-radius-base 0 0 @border-radius-base;

      .@{picker-prefix-cls}-panel-rtl & {
        right: @hover-cell-fixed-distance;
        border-right: @border-width-base dashed @picker-date-hover-range-border-color;
        border-radius: 0 @border-radius-base @border-radius-base 0;
      }
    }
    .@{picker-prefix-cls}-cell-range-hover-end::after {
      right: @hover-cell-fixed-distance;
      border-right: @border-width-base dashed @picker-date-hover-range-border-color;
      border-radius: 0 @border-radius-base @border-radius-base 0;

      .@{picker-prefix-cls}-panel-rtl & {
        left: @hover-cell-fixed-distance;
        border-left: @border-width-base dashed @picker-date-hover-range-border-color;
        border-radius: @border-radius-base 0 0 @border-radius-base;
      }
    }
  }

  // ====================== Week Panel ======================
  &-week-panel {
    .@{picker-prefix-cls}-body {
      padding: @padding-md;
    }

    // Clear cell style
    .@{picker-prefix-cls}-cell {
      &:hover .@{picker-cell-inner-cls},
      &-selected .@{picker-cell-inner-cls},
      .@{picker-cell-inner-cls} {
        background: transparent !important;
      }
    }

    &-row {
      td {
        transition: background @animation-duration-slow;
      }

      &:hover td {
        &::before {
          background: @picker-basic-cell-hover-color;
        }
      }

      &-selected td,
      &-selected:hover td {
        &::before {
          background: @brand-primary;
        }

        &.@{picker-prefix-cls}-cell-week {
          color: fade(@text-color-inverse, 50%);
        }

        &.@{picker-prefix-cls}-cell-today .@{picker-cell-inner-cls}::before {
          border-color: @text-color-inverse;
        }

        .@{picker-cell-inner-cls} {
          color: @text-color-inverse;
        }
      }
    }

    &-row-selected {
      .@{picker-prefix-cls}-cell-today {
        .@{picker-prefix-cls}-cell-inner {
          color: var(--wd-text-white) !important;
        }
      }
    }

    &-row-range-hover {
      td {
        &::before {
          background-color: var(--wd-brand-extra-light) !important;
        }
        .@{picker-prefix-cls}-cell-inner {
          color: var(--wd-text-primary) !important;
        }
      }
    }

    &-row-range-start,
    &-row-range-end {
      td {
        &::before {
          background-color: var(--wd-brand-primary) !important;
        }
        .@{picker-prefix-cls}-cell-inner {
          color: var(--wd-text-white) !important;
        }
      }
    }

    &-row-range-start {
      td:first-child {
        &::before {
          border-top-left-radius: 50%;
          border-bottom-left-radius: 50%;
        }
      }
    }

    &-row-range-end {
      td:last-child {
        &::before {
          border-top-right-radius: 50%;
          border-bottom-right-radius: 50%;
        }
      }
    }
  }

  // ====================== Date Panel ======================
  &-date-panel {
    .@{picker-prefix-cls}-body {
      padding: @padding-sm;
    }

    .@{picker-prefix-cls}-content {
      width: @picker-panel-cell-width * 7;
      th {
        width: @picker-panel-cell-width;
      }
    }

    // .@{picker-prefix-cls}-cell:not(.@{picker-prefix-cls}-cell-in-view):not(
    //     .@{picker-prefix-cls}-cell-week
    //   ) {
    //   opacity: 0;
    //   pointer-events: none;
    // }
  }

  // ==================== Datetime Panel ====================
  &-datetime-panel {
    display: flex;

    .@{picker-prefix-cls}-time-panel {
      border-left: @border-width-base @border-style-base @picker-border-color;
    }

    .@{picker-prefix-cls}-date-panel,
    .@{picker-prefix-cls}-time-panel {
      transition: opacity @animation-duration-slow;
    }

    // Keyboard
    &-active {
      .@{picker-prefix-cls}-date-panel,
      .@{picker-prefix-cls}-time-panel {
        opacity: 0.3;

        &-active {
          opacity: 1;
        }
      }
    }

    .@{picker-prefix-cls}-time-panel {
      .@{picker-prefix-cls}-content {
        margin-bottom: @picker-show-time-panel-content-margin-bottom;
      }
    }
  }

  // ====================== Time Panel ======================
  &-time-panel {
    width: auto;
    min-width: auto;

    .@{picker-prefix-cls}-content {
      display: flex;
      flex: auto;
      height: @picker-time-panel-column-height;
    }

    &-column {
      flex: 1 0 auto;
      width: calc(@picker-time-panel-column-width - @picker-scroll-bar-padding);
      margin: 0;
      padding: 0;
      overflow-y: hidden;
      overflow-x: hidden;
      text-align: left;
      list-style: none;
      transition: background @animation-duration-slow;
      margin: @picker-show-time-panel-column-margin-top @picker-scroll-bar-padding
        @picker-show-time-panel-column-margin-top 0;

      &::-webkit-scrollbar {
        width: @scroll-bar-width;
        height: @scroll-bar-height;
      }
      &::-webkit-scrollbar-thumb {
        background-color: @sp-scroll-bar;
        border-radius: @border-radius-sm;
      }

      &::after {
        display: block;
        height: @picker-time-panel-column-height * 0.5 - @picker-time-panel-cell-height * 2;
        content: '';
        .@{picker-prefix-cls}-datetime-panel & {
          height: @picker-time-panel-column-height * 0.5 - @picker-time-panel-cell-height + 2 *
            @border-width-base;
        }
      }

      &:not(:first-child) {
        border-left: @border-width-base @border-style-base @picker-border-color;
      }

      &-active {
        background: @calendar-column-active-bg;
      }

      &:hover {
        overflow-y: auto;
      }

      > li {
        margin: 0 calc(@margin-xs - @picker-scroll-bar-padding) 0 @margin-xs;
        padding: @picker-time-panel-cell-padding;

        &.@{picker-prefix-cls}-time-panel-cell {
          .@{picker-prefix-cls}-time-panel-cell-inner {
            text-align: center;
            display: block;
            width: calc(@picker-time-panel-column-width - @margin-xs * 2);
            height: @picker-time-panel-cell-height;
            margin: 0;
            color: @text-color;
            line-height: @picker-time-panel-cell-height;
            border-radius: @border-radius-sm;
            cursor: pointer;
            transition: background @animation-duration-slow;
            color: var(--wd-text-primary);
            font-size: @font-size-sm;

            &:hover {
              background: @item-hover-bg;
            }
          }

          &-selected {
            .@{picker-prefix-cls}-time-panel-cell-inner {
              background: @sp-hover-bar-select;
            }
          }

          &-disabled {
            .@{picker-prefix-cls}-time-panel-cell-inner {
              color: @disabled-color;
              background: transparent;
              cursor: not-allowed;
            }
          }
        }
      }
    }
  }

  &-month-panel,
  &-year-panel {
    width: @picker-month-panel-width;

    .@{picker-prefix-cls}-body {
      height: @picker-month-panel-height;
      padding: @picker-month-year-panel-body-padding;
    }

    .@{picker-prefix-cls}-cell {
      width: @picker-year-month-cell-width;

      .@{picker-prefix-cls}-cell-inner {
        height: @picker-time-panel-cell-height;
        line-height: @picker-time-panel-cell-height;
      }

      &::before {
        height: @picker-time-panel-cell-height;
      }
    }

    .@{picker-prefix-cls}-cell-in-range,
    .@{picker-prefix-cls}-cell-range-start,
    .@{picker-prefix-cls}-cell-range-end {
      &::before {
        height: @picker-month-year-panel-cell-before-height;
        line-height: @picker-month-year-panel-cell-before-height;
        width: @picker-time-panel-column-width;
        left: @picker-month-panel-before-left !important;
        border-color: var(--wd-brand-extra-light);
      }
    }

    .@{picker-prefix-cls}-cell-range-start {
      &::before {
        border-radius: @picker-range-hover-start-border-radius;
      }
    }

    .@{picker-prefix-cls}-cell-range-end {
      &::before {
        border-radius: @picker-range-hover-end-border-radius;
      }
    }
    .@{picker-prefix-cls}-cell-disabled {
      &::before {
        height: @height-base;
        line-height: @height-base;
        width: @picker-time-panel-column-width;
        left: @picker-month-panel-before-left !important;
      }
    }

    .@{picker-prefix-cls}-cell-range-hover-start,
    .@{picker-prefix-cls}-cell-range-hover-end {
      &::after {
        height: @height-base !important;
        line-height: @height-base !important;
        width: @picker-time-panel-column-width !important;
        left: @picker-month-panel-before-left !important;
      }
    }

    .@{picker-prefix-cls}-cell-range-hover-start {
      &::after {
        border-radius: @picker-range-hover-start-border-radius;
        border-left: transparent;
      }
    }

    .@{picker-prefix-cls}-cell-range-hover-end {
      &::after {
        border-radius: @picker-range-hover-end-border-radius;
        border-right: transparent;
      }
    }

    // range-hover
    .@{picker-prefix-cls}-cell-range-hover {
      &::after {
        height: @height-base !important;
        line-height: @height-base !important;
        width: @picker-time-panel-column-width !important;
        left: @picker-month-panel-before-left !important;
      }
    }

    tbody {
      display: flex;
      flex-direction: column;

      tr {
        display: flex;
        justify-content: space-between;
        align-items: center;

        &:last-child {
          padding-bottom: 0;
        }

        td {
          font-size: 0;
        }
      }
    }
  }

  &-month-panel {
    .@{picker-prefix-cls}-cell {
      display: inline-flex;
      align-items: center;
      height: @picker-month-panel-cell-td-height;
      line-height: @picker-month-panel-cell-td-height;
    }
  }

  &-year-panel {
    .@{picker-prefix-cls}-body {
      height: @picker-year-panel-height;
    }

    .@{picker-prefix-cls}-cell {
      display: inline-flex;
      align-items: center;
      height: @picker-year-panel-cell-td-height;
      line-height: @picker-year-panel-cell-td-height;
    }

    .@{picker-prefix-cls}-cell-in-range,
    .@{picker-prefix-cls}-cell-range-start,
    .@{picker-prefix-cls}-cell-range-end {
      &::before {
        height: @picker-year-panel-cell-before-height;
        line-height: @picker-year-panel-cell-before-line-height;
      }
    }

    .@{picker-prefix-cls}-cell-range-start {
      &::before {
        border-radius: @picker-year-panel-range-hover-start-border-radius;
      }
    }

    .@{picker-prefix-cls}-cell-range-hover {
      &::after {
        height: @picker-year-panel-cell-before-height !important;
        line-height: @picker-year-panel-cell-before-line-height !important;
      }
    }

    .@{picker-prefix-cls}-cell-range-hover-start,
    .@{picker-prefix-cls}-cell-range-hover-end {
      &::before {
        height: @picker-year-panel-cell-before-height !important;
        line-height: @picker-year-panel-cell-before-line-height !important;
      }

      &::after {
        height: @picker-year-panel-cell-before-height !important;
        line-height: @picker-year-panel-cell-before-line-height !important;
      }
    }

    .@{picker-prefix-cls}-cell-disabled {
      &::before {
        height: @picker-year-panel-cell-before-height !important;
        line-height: @picker-year-panel-cell-before-line-height !important;
      }
    }
  }
}

.@{picker-prefix-cls}-cell-no-event {
  cursor: initial !important;

  &:hover {
    cursor: initial !important;
  }
}

// Fix IE11 render bug by css hacks
// https://github.com/ant-design/ant-design/issues/21559
// https://codepen.io/afc163-1472555193/pen/mdJRaNj?editors=0110
/* stylelint-disable-next-line selector-type-no-unknown,selector-no-vendor-prefix */
_:-ms-fullscreen,
:root {
  .@{picker-prefix-cls}-range-wrapper {
    .@{picker-prefix-cls}-month-panel .@{picker-prefix-cls}-cell,
    .@{picker-prefix-cls}-year-panel .@{picker-prefix-cls}-cell {
      padding: 21px 0;
    }
  }
}