@wangxinowo/vue-datepicker-next 1.0.3 → 1.0.5

package/src/components/date-picker/style/RangePicker.less

@@ -1,507 +1,515 @@
-@input-box-height: 34px;
-
-// Range picker input wrapper with Active Bar
-// 统一样式：使用与基础 DatePicker 相同的 input 变量
-.@{calendar-prefix-cls}-range-picker-input-wrapper {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  width: 100%;
-  min-width: 280px;
-  height: @input-height-base;
-  // 使用与 .input() mixin 相同的 padding
-  padding: @input-padding-vertical-base @input-padding-horizontal-base;
-  // 为图标和清除按钮预留空间
-  padding-right: @input-padding-horizontal-base + 30px;
-  color: @input-color;
-  font-size: @font-size-base;
-  line-height: @line-height-base;
-  background-color: @input-bg;
-  background-image: none;
-  border: @border-width-base @border-style-base @input-border-color;
-  border-radius: @border-radius-base;
-  transition: all 0.3s;
-
-  &:hover {
-    border-color: @input-hover-border-color;
-  }
-
-  // 聚焦状态
-  .@{calendar-prefix-cls}-picker-focused &,
-  .@{calendar-prefix-cls}-picker:focus-within & {
-    border-color: @primary-color;
-    box-shadow: @input-outline-offset @outline-blur-size @outline-width fade(@primary-color, 20%);
-    outline: 0;
-  }
-
-  // 无边框模式
-  .@{calendar-prefix-cls}-picker-borderless & {
-    background-color: transparent;
-    border: none;
-    box-shadow: none;
-    padding-right: @input-padding-horizontal-base;
-  }
-
-  // 禁用状态
-  &[disabled],
-  .@{calendar-prefix-cls}-picker-disabled & {
-    color: @disabled-color;
-    background-color: @input-disabled-bg;
-    border-color: @input-border-color;
-    cursor: not-allowed;
-    opacity: 1;
-  }
-
-  // Error 状态
-  .@{calendar-prefix-cls}-picker-status-error & {
-    border-color: @error-color;
-
-    &:hover {
-      border-color: @error-color;
-    }
-  }
-
-  .@{calendar-prefix-cls}-picker-status-error.@{calendar-prefix-cls}-picker-focused &,
-  .@{calendar-prefix-cls}-picker-status-error:focus-within & {
-    border-color: @error-color;
-    box-shadow: @input-outline-offset @outline-blur-size @outline-width fade(@error-color, 20%);
-  }
-
-  // Warning 状态
-  .@{calendar-prefix-cls}-picker-status-warning & {
-    border-color: @warning-color;
-
-    &:hover {
-      border-color: @warning-color;
-    }
-  }
-
-  .@{calendar-prefix-cls}-picker-status-warning.@{calendar-prefix-cls}-picker-focused &,
-  .@{calendar-prefix-cls}-picker-status-warning:focus-within & {
-    border-color: @warning-color;
-    box-shadow: @input-outline-offset @outline-blur-size @outline-width fade(@warning-color, 20%);
-  }
-
-  // Success 状态
-  .@{calendar-prefix-cls}-picker-status-success & {
-    border-color: @success-color;
-
-    &:hover {
-      border-color: @success-color;
-    }
-  }
-
-  .@{calendar-prefix-cls}-picker-status-success.@{calendar-prefix-cls}-picker-focused &,
-  .@{calendar-prefix-cls}-picker-status-success:focus-within & {
-    border-color: @success-color;
-    box-shadow: @input-outline-offset @outline-blur-size @outline-width fade(@success-color, 20%);
-  }
-
-  // RangePicker 内的图标样式（与基础 DatePicker 统一）
-  .@{calendar-prefix-cls}-picker-icon {
-    position: absolute;
-    top: 50%;
-    right: @input-padding-horizontal-base;
-    z-index: 1;
-    display: inline-block;
-    width: 14px;
-    height: 14px;
-    margin-top: -7px;
-    color: @disabled-color;
-    font-size: @font-size-base;
-    line-height: 1;
-    transition: all 0.3s;
-    user-select: none;
-  }
-
-  // RangePicker 内的清除按钮样式（与基础 DatePicker 统一）
-  .@{calendar-prefix-cls}-picker-clear {
-    position: absolute;
-    top: 50%;
-    right: @input-padding-horizontal-base;
-    z-index: 2;
-    width: 14px;
-    height: 14px;
-    margin-top: -7px;
-    color: @disabled-color;
-    font-size: @font-size-base;
-    background: @input-bg;
-    cursor: pointer;
-    opacity: 0;
-    pointer-events: none;
-    transition: all 0.3s;
-
-    &:hover {
-      color: @text-color-secondary;
-    }
-  }
-
-  // hover 时显示清除按钮
-  &:hover .@{calendar-prefix-cls}-picker-clear {
-    opacity: 1;
-    pointer-events: auto;
-  }
-}
-
-.@{calendar-prefix-cls}-range-picker-input {
-  flex: 1;
-  min-width: 0;
-  height: 100%;
-  text-align: center;
-  background-color: transparent;
-  border: 0;
-  outline: 0;
-  cursor: pointer;
-  transition: color 0.3s;
-  .placeholder();
-
-  &[disabled] {
-    cursor: not-allowed;
-  }
-
-  // 激活状态的输入框
-  &-active {
-    color: @primary-color;
-  }
-}
-
-// Active Bar 底部滑块
-.@{calendar-prefix-cls}-range-picker-active-bar {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  height: 2px;
-  background: @primary-color;
-  pointer-events: none;
-  transition: left 0.3s ease-out, width 0.3s ease-out;
-  opacity: 0;
-
-  // 当 picker 获得焦点时显示
-  .@{calendar-prefix-cls}-picker:focus-within &,
-  .@{calendar-prefix-cls}-picker-focused & {
-    opacity: 1;
-  }
-}
-
-.@{calendar-prefix-cls}-range-picker-separator {
-  flex: none;
-  display: inline-flex;
-  align-items: center;
-  padding: 0 8px;
-  color: @text-color-secondary;
-  white-space: nowrap;
-  text-align: center;
-  vertical-align: top;
-  pointer-events: none;
-  .@{ant-prefix}-input-disabled & {
-    color: @disabled-color;
-  }
-}
-
-.@{calendar-prefix-cls}-range {
-  width: 552px;
-  overflow: hidden;
-
-  .@{calendar-prefix-cls}-date-panel {
-    &::after {
-      display: block;
-      clear: both;
-      height: 0;
-      visibility: hidden;
-      content: '.';
-    }
-  }
-  &-part {
-    position: relative;
-    width: 50%;
-  }
-
-  &-left {
-    float: left;
-    .@{calendar-prefix-cls} {
-      &-time-picker-inner {
-        border-right: 1px solid @border-color-split;
-      }
-    }
-  }
-
-  &-right {
-    float: right;
-    .@{calendar-prefix-cls} {
-      &-time-picker-inner {
-        border-left: 1px solid @border-color-split;
-      }
-    }
-  }
-
-  // 已隐藏 &-middle, 相关样式已移除
-
-  // &-right date-input-wrap 已隐藏，无需额外样式
-
-  .@{calendar-prefix-cls}-today
-    :not(.@{calendar-prefix-cls}-disabled-cell)
-    :not(.@{calendar-prefix-cls}-last-month-cell)
-    :not(.@{calendar-prefix-cls}-next-month-btn-day) {
-    .@{calendar-prefix-cls}-date {
-      color: @primary-color;
-      background: @primary-2;
-      border-color: @primary-color;
-    }
-  }
-
-  .@{calendar-prefix-cls}-selected-start-date,
-  .@{calendar-prefix-cls}-selected-end-date {
-    .calendar-selected-cell;
-  }
-
-  // 已隐藏 date-input-wrap，time 模式相关样式已移除
-
-  // 隐藏弹窗内部的日期输入框（已在外部 RangePicker 中显示）
-  .@{calendar-prefix-cls}-input-wrap {
-    display: none;
-  }
-
-  .@{calendar-prefix-cls}-date-input-wrap {
-    display: none;
-  }
-
-  &-middle {
-    display: none;
-  }
-
-  .@{calendar-prefix-cls}-input,
-  .@{calendar-timepicker-prefix-cls}-input {
-    .input;
-    height: @input-height-sm;
-    padding-right: 0;
-    padding-left: 0;
-    line-height: @input-height-sm;
-    border: 0;
-    box-shadow: none;
-
-    &:focus {
-      box-shadow: none;
-    }
-  }
-
-  .@{calendar-timepicker-prefix-cls}-icon {
-    display: none;
-  }
-
-  &.@{calendar-prefix-cls}-week-number {
-    width: 574px;
-
-    .@{calendar-prefix-cls}-range-part {
-      width: 286px;
-    }
-  }
-
-  .@{calendar-prefix-cls}-year-panel,
-  .@{calendar-prefix-cls}-month-panel,
-  .@{calendar-prefix-cls}-decade-panel {
-    top: @input-box-height;
-  }
-  .@{calendar-prefix-cls}-month-panel .@{calendar-prefix-cls}-year-panel {
-    top: 0;
-  }
-  .@{calendar-prefix-cls}-decade-panel-table,
-  .@{calendar-prefix-cls}-year-panel-table,
-  .@{calendar-prefix-cls}-month-panel-table {
-    height: 208px;
-  }
-
-  .@{calendar-prefix-cls}-in-range-cell {
-    position: relative;
-    border-radius: 0;
-    > div {
-      position: relative;
-      z-index: 1;
-    }
-    &::before {
-      position: absolute;
-      top: 4px;
-      right: 0;
-      bottom: 4px;
-      left: 0;
-      display: block;
-      background: @item-active-bg;
-      border: 0;
-      border-radius: 0;
-      content: '';
-    }
-  }
-
-  // 年份面板和月份面板的范围选中背景样式
-  .@{calendar-prefix-cls}-year-panel-cell.@{calendar-prefix-cls}-in-range-cell,
-  .@{calendar-prefix-cls}-month-panel-cell.@{calendar-prefix-cls}-in-range-cell {
-    position: relative;
-    border-radius: 0;
-
-    > a {
-      position: relative;
-      z-index: 1;
-    }
-
-    &::before {
-      position: absolute;
-      top: 4px;
-      right: 0;
-      bottom: 4px;
-      left: 0;
-      display: block;
-      background: @item-active-bg;
-      border: 0;
-      border-radius: 0;
-      content: '';
-    }
-  }
-
-  // 年份/月份范围选择的起始单元格圆角
-  .@{calendar-prefix-cls}-year-panel-selected-start-cell.@{calendar-prefix-cls}-in-range-cell,
-  .@{calendar-prefix-cls}-month-panel-selected-start-cell.@{calendar-prefix-cls}-in-range-cell {
-    &::before {
-      border-top-left-radius: @border-radius-sm;
-      border-bottom-left-radius: @border-radius-sm;
-    }
-  }
-
-  // 年份/月份范围选择的结束单元格圆角
-  .@{calendar-prefix-cls}-year-panel-selected-end-cell.@{calendar-prefix-cls}-in-range-cell,
-  .@{calendar-prefix-cls}-month-panel-selected-end-cell.@{calendar-prefix-cls}-in-range-cell {
-    &::before {
-      border-top-right-radius: @border-radius-sm;
-      border-bottom-right-radius: @border-radius-sm;
-    }
-  }
-
-  // 悬停高亮效果 - 范围起始单元格
-  .@{calendar-prefix-cls}-selected-start-date,
-  .@{calendar-prefix-cls}-selected-end-date {
-    .@{calendar-prefix-cls}-date {
-      color: @text-color-inverse;
-      background: @primary-color;
-      border-radius: @border-radius-sm;
-    }
-  }
-
-  // 悬停预览样式 - 鼠标悬停时预览范围
-  .@{calendar-prefix-cls}-in-range-cell.@{calendar-prefix-cls}-in-range-hover-cell {
-    &::before {
-      background: @primary-2;
-    }
-  }
-
-  // 范围起始单元格圆角
-  .@{calendar-prefix-cls}-in-range-cell:first-child,
-  .@{calendar-prefix-cls}-selected-start-date + .@{calendar-prefix-cls}-in-range-cell {
-    &::before {
-      border-top-left-radius: @border-radius-sm;
-      border-bottom-left-radius: @border-radius-sm;
-    }
-  }
-
-  // 范围结束单元格圆角
-  .@{calendar-prefix-cls}-in-range-cell:last-child,
-  .@{calendar-prefix-cls}-in-range-cell + .@{calendar-prefix-cls}-selected-end-date {
-    &::before {
-      border-top-right-radius: @border-radius-sm;
-      border-bottom-right-radius: @border-radius-sm;
-    }
-  }
-
-  // 悬停时的过渡效果
-  .@{calendar-prefix-cls}-cell {
-    transition: background 0.3s;
-
-    &:hover:not(.@{calendar-prefix-cls}-disabled-cell) {
-      .@{calendar-prefix-cls}-date {
-        background: @item-hover-bg;
-      }
-    }
-  }
-
-  // 选中的起始/结束日期悬停效果
-  .@{calendar-prefix-cls}-selected-start-date,
-  .@{calendar-prefix-cls}-selected-end-date {
-    &:hover {
-      .@{calendar-prefix-cls}-date {
-        background: @primary-5 !important;
-      }
-    }
-  }
-
-  .@{calendar-prefix-cls}-footer-extra {
-    float: left;
-  }
-
-  // `div` for selector specificity
-  div&-quick-selector {
-    text-align: left;
-
-    > a {
-      margin-right: 8px;
-    }
-  }
-
-  .@{calendar-prefix-cls},
-  .@{calendar-prefix-cls}-month-panel,
-  .@{calendar-prefix-cls}-year-panel,
-  .@{calendar-prefix-cls}-decade-panel {
-    &-header {
-      border-bottom: 0;
-    }
-    &-body {
-      border-top: @border-width-base @border-style-base @border-color-split;
-    }
-  }
-
-  &.@{calendar-prefix-cls}-time {
-    .@{calendar-timepicker-prefix-cls} {
-      top: 68px;
-      z-index: 2; // cover .ant-calendar-range .ant-calendar-in-range-cell > div (z-index: 1)
-      width: 100%;
-      height: 207px;
-      &-panel {
-        height: 267px;
-        margin-top: -34px;
-      }
-
-      &-inner {
-        height: 100%;
-        padding-top: 40px;
-        background: none;
-      }
-
-      &-combobox {
-        display: inline-block;
-        height: 100%;
-        background-color: @component-background;
-        border-top: @border-width-base @border-style-base @border-color-split;
-      }
-      &-select {
-        height: 100%;
-        ul {
-          max-height: 100%;
-        }
-      }
-    }
-    .@{calendar-prefix-cls}-footer .@{calendar-prefix-cls}-time-picker-btn {
-      margin-right: 8px;
-    }
-    .@{calendar-prefix-cls}-today-btn {
-      height: 22px;
-      margin: 8px 12px;
-      line-height: 22px;
-    }
-  }
-
-  &-with-ranges.@{calendar-prefix-cls}-time .@{calendar-timepicker-prefix-cls} {
-    height: 233px;
-  }
-}
-
-.@{calendar-prefix-cls}-range.@{calendar-prefix-cls}-show-time-picker {
-  .@{calendar-prefix-cls}-body {
-    border-top-color: transparent;
-  }
-}
+@input-box-height: 34px;
+
+// Range picker input wrapper with Active Bar
+// 统一样式：使用与基础 DatePicker 相同的 input 变量
+.@{calendar-prefix-cls}-range-picker-input-wrapper {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+  min-width: 280px;
+  height: @input-height-base;
+  // 使用与 .input() mixin 相同的 padding
+  padding: @input-padding-vertical-base @input-padding-horizontal-base;
+  // 为图标和清除按钮预留空间
+  padding-right: @input-padding-horizontal-base + 30px;
+  color: @input-color;
+  font-size: @font-size-base;
+  line-height: @line-height-base;
+  background-color: @input-bg;
+  background-image: none;
+  border: @border-width-base @border-style-base @input-border-color;
+  border-radius: @border-radius-base;
+  transition: all 0.3s;
+
+  &:hover {
+    border-color: @input-hover-border-color;
+  }
+
+  // 聚焦状态
+  .@{calendar-prefix-cls}-picker-focused &,
+  .@{calendar-prefix-cls}-picker:focus-within & {
+    border-color: @primary-color;
+    box-shadow: @input-outline-offset @outline-blur-size @outline-width fade(@primary-color, 20%);
+    outline: 0;
+  }
+
+  // 无边框模式
+  .@{calendar-prefix-cls}-picker-borderless & {
+    background-color: transparent;
+    border: none;
+    box-shadow: none;
+    padding-right: @input-padding-horizontal-base;
+  }
+
+  // 禁用状态
+  &[disabled],
+  .@{calendar-prefix-cls}-picker-disabled & {
+    color: @disabled-color;
+    background-color: @input-disabled-bg;
+    border-color: @input-border-color;
+    cursor: not-allowed;
+    opacity: 1;
+  }
+
+  // Error 状态
+  .@{calendar-prefix-cls}-picker-status-error & {
+    border-color: @error-color;
+
+    &:hover {
+      border-color: @error-color;
+    }
+  }
+
+  .@{calendar-prefix-cls}-picker-status-error.@{calendar-prefix-cls}-picker-focused &,
+  .@{calendar-prefix-cls}-picker-status-error:focus-within & {
+    border-color: @error-color;
+    box-shadow: @input-outline-offset @outline-blur-size @outline-width fade(@error-color, 20%);
+  }
+
+  // Warning 状态
+  .@{calendar-prefix-cls}-picker-status-warning & {
+    border-color: @warning-color;
+
+    &:hover {
+      border-color: @warning-color;
+    }
+  }
+
+  .@{calendar-prefix-cls}-picker-status-warning.@{calendar-prefix-cls}-picker-focused &,
+  .@{calendar-prefix-cls}-picker-status-warning:focus-within & {
+    border-color: @warning-color;
+    box-shadow: @input-outline-offset @outline-blur-size @outline-width fade(@warning-color, 20%);
+  }
+
+  // Success 状态
+  .@{calendar-prefix-cls}-picker-status-success & {
+    border-color: @success-color;
+
+    &:hover {
+      border-color: @success-color;
+    }
+  }
+
+  .@{calendar-prefix-cls}-picker-status-success.@{calendar-prefix-cls}-picker-focused &,
+  .@{calendar-prefix-cls}-picker-status-success:focus-within & {
+    border-color: @success-color;
+    box-shadow: @input-outline-offset @outline-blur-size @outline-width fade(@success-color, 20%);
+  }
+
+  // RangePicker 内的图标样式（与基础 DatePicker 统一）
+  .@{calendar-prefix-cls}-picker-icon {
+    position: absolute;
+    top: 50%;
+    right: @input-padding-horizontal-base;
+    z-index: 1;
+    display: inline-block;
+    width: 14px;
+    height: 14px;
+    margin-top: -7px;
+    color: @disabled-color;
+    font-size: @font-size-base;
+    line-height: 1;
+    transition: all 0.3s;
+    user-select: none;
+  }
+
+  // RangePicker 内的清除按钮样式（与基础 DatePicker 统一）
+  .@{calendar-prefix-cls}-picker-clear {
+    position: absolute;
+    top: 50%;
+    right: @input-padding-horizontal-base;
+    z-index: 2;
+    width: 14px;
+    height: 14px;
+    margin-top: -7px;
+    color: @disabled-color;
+    font-size: @font-size-base;
+    background: @input-bg;
+    cursor: pointer;
+    opacity: 0;
+    pointer-events: none;
+    transition: all 0.3s;
+
+    &:hover {
+      color: @text-color-secondary;
+    }
+  }
+
+  // hover 时显示清除按钮
+  &:hover .@{calendar-prefix-cls}-picker-clear {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+.@{calendar-prefix-cls}-range-picker-input {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  text-align: center;
+  background-color: transparent;
+  border: 0;
+  outline: 0;
+  cursor: pointer;
+  transition: color 0.3s;
+  .placeholder();
+
+  &[disabled] {
+    cursor: not-allowed;
+  }
+
+  // 激活状态的输入框
+  &-active {
+    color: @primary-color;
+  }
+}
+
+// Active Bar 底部滑块
+.@{calendar-prefix-cls}-range-picker-active-bar {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 2px;
+  background: @primary-color;
+  pointer-events: none;
+  transition: left 0.3s ease-out, width 0.3s ease-out;
+  opacity: 0;
+
+  // 当 picker 获得焦点时显示
+  .@{calendar-prefix-cls}-picker:focus-within &,
+  .@{calendar-prefix-cls}-picker-focused & {
+    opacity: 1;
+  }
+}
+
+.@{calendar-prefix-cls}-range-picker-separator {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  padding: 0 8px;
+  color: @text-color-secondary;
+  white-space: nowrap;
+  text-align: center;
+  vertical-align: top;
+  pointer-events: none;
+  .@{ant-prefix}-input-disabled & {
+    color: @disabled-color;
+  }
+}
+
+.@{calendar-prefix-cls}-range {
+  width: 552px;
+  overflow: hidden;
+
+  .@{calendar-prefix-cls}-date-panel {
+    &::after {
+      display: block;
+      clear: both;
+      height: 0;
+      visibility: hidden;
+      content: '.';
+    }
+  }
+  &-part {
+    position: relative;
+    width: 50%;
+  }
+
+  &-left {
+    float: left;
+    .@{calendar-prefix-cls} {
+      &-time-picker-inner {
+        border-right: 1px solid @border-color-split;
+      }
+    }
+  }
+
+  &-right {
+    float: right;
+    .@{calendar-prefix-cls} {
+      &-time-picker-inner {
+        border-left: 1px solid @border-color-split;
+      }
+    }
+  }
+
+  // 已隐藏 &-middle, 相关样式已移除
+
+  // &-right date-input-wrap 已隐藏，无需额外样式
+
+  .@{calendar-prefix-cls}-today
+    :not(.@{calendar-prefix-cls}-disabled-cell)
+    :not(.@{calendar-prefix-cls}-last-month-cell)
+    :not(.@{calendar-prefix-cls}-next-month-btn-day) {
+    .@{calendar-prefix-cls}-date {
+      color: @primary-color;
+      background: @primary-2;
+      border-color: @primary-color;
+    }
+  }
+
+  .@{calendar-prefix-cls}-selected-start-date,
+  .@{calendar-prefix-cls}-selected-end-date {
+    .calendar-selected-cell;
+  }
+
+  // 已隐藏 date-input-wrap，time 模式相关样式已移除
+
+  // 隐藏弹窗内部的日期输入框（已在外部 RangePicker 中显示）
+  .@{calendar-prefix-cls}-input-wrap {
+    display: none;
+  }
+
+  .@{calendar-prefix-cls}-date-input-wrap {
+    display: none;
+  }
+
+  &-middle {
+    display: none;
+  }
+
+  .@{calendar-prefix-cls}-input,
+  .@{calendar-timepicker-prefix-cls}-input {
+    .input;
+    height: @input-height-sm;
+    padding-right: 0;
+    padding-left: 0;
+    line-height: @input-height-sm;
+    border: 0;
+    box-shadow: none;
+
+    &:focus {
+      box-shadow: none;
+    }
+  }
+
+  .@{calendar-timepicker-prefix-cls}-icon {
+    display: none;
+  }
+
+  &.@{calendar-prefix-cls}-week-number {
+    width: 574px;
+
+    .@{calendar-prefix-cls}-range-part {
+      width: 286px;
+    }
+  }
+
+  .@{calendar-prefix-cls}-year-panel,
+  .@{calendar-prefix-cls}-month-panel,
+  .@{calendar-prefix-cls}-decade-panel {
+    top: @input-box-height;
+  }
+  .@{calendar-prefix-cls}-month-panel .@{calendar-prefix-cls}-year-panel {
+    top: 0;
+  }
+  .@{calendar-prefix-cls}-decade-panel-table,
+  .@{calendar-prefix-cls}-year-panel-table,
+  .@{calendar-prefix-cls}-month-panel-table {
+    height: auto;
+  }
+
+  .@{calendar-prefix-cls}-in-range-cell {
+    position: relative;
+    border-radius: 0;
+    > div {
+      position: relative;
+      z-index: 1;
+    }
+    &::before {
+      position: absolute;
+      top: 4px;
+      right: 0;
+      bottom: 4px;
+      left: 0;
+      display: block;
+      background: @item-active-bg;
+      border: 0;
+      border-radius: 0;
+      content: '';
+    }
+  }
+
+  // 年份面板和月份面板的范围选中背景样式
+  .@{calendar-prefix-cls}-year-panel-cell.@{calendar-prefix-cls}-in-range-cell,
+  .@{calendar-prefix-cls}-month-panel-cell.@{calendar-prefix-cls}-in-range-cell {
+    position: relative;
+    border-radius: 0;
+
+    > a {
+      position: relative;
+      z-index: 1;
+    }
+
+    &::before {
+      position: absolute;
+      top: 4px;
+      right: 0;
+      bottom: 4px;
+      left: 0;
+      display: block;
+      background: @item-active-bg;
+      border: 0;
+      border-radius: 0;
+      content: '';
+    }
+  }
+
+  // 年份/月份范围选择的起始单元格圆角
+  .@{calendar-prefix-cls}-year-panel-selected-start-cell.@{calendar-prefix-cls}-in-range-cell,
+  .@{calendar-prefix-cls}-month-panel-selected-start-cell.@{calendar-prefix-cls}-in-range-cell {
+    &::before {
+      border-top-left-radius: @border-radius-sm;
+      border-bottom-left-radius: @border-radius-sm;
+    }
+  }
+
+  // 年份/月份范围选择的结束单元格圆角
+  .@{calendar-prefix-cls}-year-panel-selected-end-cell.@{calendar-prefix-cls}-in-range-cell,
+  .@{calendar-prefix-cls}-month-panel-selected-end-cell.@{calendar-prefix-cls}-in-range-cell {
+    &::before {
+      border-top-right-radius: @border-radius-sm;
+      border-bottom-right-radius: @border-radius-sm;
+    }
+  }
+
+  // 年份/月份 hover 预览范围样式
+  .@{calendar-prefix-cls}-year-panel-cell.@{calendar-prefix-cls}-in-hover-range-cell,
+  .@{calendar-prefix-cls}-month-panel-cell.@{calendar-prefix-cls}-in-hover-range-cell {
+    &::before {
+      background: @primary-2;
+    }
+  }
+
+  // 悬停高亮效果 - 范围起始单元格
+  .@{calendar-prefix-cls}-selected-start-date,
+  .@{calendar-prefix-cls}-selected-end-date {
+    .@{calendar-prefix-cls}-date {
+      color: @text-color-inverse;
+      background: @primary-color;
+      border-radius: @border-radius-sm;
+    }
+  }
+
+  // 悬停预览样式 - 鼠标悬停时预览范围
+  .@{calendar-prefix-cls}-in-range-cell.@{calendar-prefix-cls}-in-range-hover-cell {
+    &::before {
+      background: @primary-2;
+    }
+  }
+
+  // 范围起始单元格圆角
+  .@{calendar-prefix-cls}-in-range-cell:first-child,
+  .@{calendar-prefix-cls}-selected-start-date + .@{calendar-prefix-cls}-in-range-cell {
+    &::before {
+      border-top-left-radius: @border-radius-sm;
+      border-bottom-left-radius: @border-radius-sm;
+    }
+  }
+
+  // 范围结束单元格圆角
+  .@{calendar-prefix-cls}-in-range-cell:last-child,
+  .@{calendar-prefix-cls}-in-range-cell + .@{calendar-prefix-cls}-selected-end-date {
+    &::before {
+      border-top-right-radius: @border-radius-sm;
+      border-bottom-right-radius: @border-radius-sm;
+    }
+  }
+
+  // 悬停时的过渡效果
+  .@{calendar-prefix-cls}-cell {
+    transition: background 0.3s;
+
+    &:hover:not(.@{calendar-prefix-cls}-disabled-cell) {
+      .@{calendar-prefix-cls}-date {
+        background: @item-hover-bg;
+      }
+    }
+  }
+
+  // 选中的起始/结束日期悬停效果
+  .@{calendar-prefix-cls}-selected-start-date,
+  .@{calendar-prefix-cls}-selected-end-date {
+    &:hover {
+      .@{calendar-prefix-cls}-date {
+        background: @primary-5 !important;
+      }
+    }
+  }
+
+  .@{calendar-prefix-cls}-footer-extra {
+    float: left;
+  }
+
+  // `div` for selector specificity
+  div&-quick-selector {
+    text-align: left;
+
+    > a {
+      margin-right: 8px;
+    }
+  }
+
+  .@{calendar-prefix-cls},
+  .@{calendar-prefix-cls}-month-panel,
+  .@{calendar-prefix-cls}-year-panel,
+  .@{calendar-prefix-cls}-decade-panel {
+    &-header {
+      border-bottom: 0;
+    }
+    &-body {
+      border-top: @border-width-base @border-style-base @border-color-split;
+    }
+  }
+
+  &.@{calendar-prefix-cls}-time {
+    .@{calendar-timepicker-prefix-cls} {
+      top: 68px;
+      z-index: 2; // cover .ant-calendar-range .ant-calendar-in-range-cell > div (z-index: 1)
+      width: 100%;
+      height: 207px;
+      &-panel {
+        height: 267px;
+        margin-top: -34px;
+      }
+
+      &-inner {
+        height: 100%;
+        padding-top: 40px;
+        background: none;
+      }
+
+      &-combobox {
+        display: inline-block;
+        height: 100%;
+        background-color: @component-background;
+        border-top: @border-width-base @border-style-base @border-color-split;
+      }
+      &-select {
+        height: 100%;
+        ul {
+          max-height: 100%;
+        }
+      }
+    }
+    .@{calendar-prefix-cls}-footer .@{calendar-prefix-cls}-time-picker-btn {
+      margin-right: 8px;
+    }
+    .@{calendar-prefix-cls}-today-btn {
+      height: 22px;
+      margin: 8px 12px;
+      line-height: 22px;
+    }
+  }
+
+  &-with-ranges.@{calendar-prefix-cls}-time .@{calendar-timepicker-prefix-cls} {
+    height: 233px;
+  }
+}
+
+.@{calendar-prefix-cls}-range.@{calendar-prefix-cls}-show-time-picker {
+  .@{calendar-prefix-cls}-body {
+    border-top-color: transparent;
+  }
+}