From 80918cba98794acdd343d378750e8f69e5e1f2f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9E=9C=E5=86=BB=E6=A9=99?= Date: Sun, 12 Feb 2023 10:37:06 +0800 Subject: [PATCH] refactor:datepicker (#6245) --- .../generatePicker/generateRangePicker.tsx | 13 +- .../generatePicker/generateSinglePicker.tsx | 15 +- components/date-picker/style/index.less | 364 ----- components/date-picker/style/index.tsx | 1451 ++++++++++++++++- components/date-picker/style/panel.less | 677 -------- components/date-picker/style/rtl.less | 246 --- components/date-picker/style/status.less | 34 - components/style.ts | 2 +- components/theme/interface/components.ts | 4 +- 9 files changed, 1472 insertions(+), 1334 deletions(-) delete mode 100644 components/date-picker/style/index.less delete mode 100644 components/date-picker/style/panel.less delete mode 100644 components/date-picker/style/rtl.less delete mode 100644 components/date-picker/style/status.less diff --git a/components/date-picker/generatePicker/generateRangePicker.tsx b/components/date-picker/generatePicker/generateRangePicker.tsx index 22b83d0e3..19600d588 100644 --- a/components/date-picker/generatePicker/generateRangePicker.tsx +++ b/components/date-picker/generatePicker/generateRangePicker.tsx @@ -20,6 +20,9 @@ import { FormItemInputContext, useInjectFormItemContext } from '../../form/FormI import omit from '../../_util/omit'; import { getMergedStatus, getStatusClassNames } from '../../_util/statusUtils'; +//CSSINJS +import useStyle from '../style'; + export default function generateRangePicker( generateConfig: GenerateConfig, extraProps: ExtraProps, @@ -58,6 +61,10 @@ export default function generateRangePicker( 'picker', props, ); + + // style + const [wrapSSR, hashId] = useStyle(prefixCls); + const pickerRef = ref(); expose({ focus: () => { @@ -166,7 +173,7 @@ export default function generateRangePicker( {formItemInputContext.hasFeedback && formItemInputContext.feedbackIcon} ); - return ( + return wrapSSR( ( formItemInputContext.hasFeedback, ), attrs.class, + hashId.value, )} locale={locale!.lang} prefixCls={pre} @@ -213,6 +221,7 @@ export default function generateRangePicker( superNextIcon={slots.superNextIcon?.() || } components={Components} direction={direction.value} + dropdownClassName={classNames(hashId.value)} onChange={onChange} onOpenChange={onOpenChange} onFocus={onFocus} @@ -220,7 +229,7 @@ export default function generateRangePicker( onPanelChange={onPanelChange} onOk={onOk} onCalendarChange={onCalendarChange} - /> + />, ); }; }, diff --git a/components/date-picker/generatePicker/generateSinglePicker.tsx b/components/date-picker/generatePicker/generateSinglePicker.tsx index ed321f376..6aa4ba33f 100644 --- a/components/date-picker/generatePicker/generateSinglePicker.tsx +++ b/components/date-picker/generatePicker/generateSinglePicker.tsx @@ -18,6 +18,9 @@ import devWarning from '../../vc-util/devWarning'; import { FormItemInputContext, useInjectFormItemContext } from '../../form/FormItemContext'; import { getMergedStatus, getStatusClassNames } from '../../_util/statusUtils'; +//CSSINJS +import useStyle from '../style'; + export default function generateSinglePicker( generateConfig: GenerateConfig, extraProps: ExtraProps, @@ -67,6 +70,10 @@ export default function generateSinglePicker( 'picker', props, ); + + // style + const [wrapSSR, hashId] = useStyle(prefixCls); + const pickerRef = ref(); expose({ focus: () => { @@ -156,7 +163,7 @@ export default function generateSinglePicker( id = formItemContext.id.value, ...restProps } = p; - const showTime = p.showTime === '' ? true : p.showTime; + const showTime = (p as any).showTime === '' ? true : p.showTime; const { format } = p as any; let additionalOverrideProps: any = {}; @@ -185,7 +192,7 @@ export default function generateSinglePicker( {formItemInputContext.hasFeedback && formItemInputContext.feedbackIcon} ); - return ( + return wrapSSR( ( formItemInputContext.hasFeedback, ), attrs.class, + hashId.value, )} prefixCls={pre} getPopupContainer={attrs.getCalendarContainer || getPopupContainer.value} @@ -227,13 +235,14 @@ export default function generateSinglePicker( superNextIcon={slots.superNextIcon?.() || } components={Components} direction={direction.value} + dropdownClassName={classNames(hashId.value)} onChange={onChange} onOpenChange={onOpenChange} onFocus={onFocus} onBlur={onBlur} onPanelChange={onPanelChange} onOk={onOk} - /> + />, ); }; }, diff --git a/components/date-picker/style/index.less b/components/date-picker/style/index.less deleted file mode 100644 index 37b9073b0..000000000 --- a/components/date-picker/style/index.less +++ /dev/null @@ -1,364 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; -@import '../../input/style/mixin'; -@import './status'; - -@picker-prefix-cls: ~'@{ant-prefix}-picker'; - -.picker-padding(@input-height, @font-size, @padding-horizontal) { - // font height probably 22.0001， So use floor better - @font-height: floor(@font-size * @line-height-base) + 2; - @padding-top: max(((@input-height - @font-height) / 2), 0); - @padding-bottom: max(@input-height - @font-height - @padding-top, 0); - padding: @padding-top @padding-horizontal @padding-bottom; -} - -.@{picker-prefix-cls} { - @arrow-size: @popover-arrow-width; - - .reset-component(); - .picker-padding(@input-height-base, @font-size-base, @input-padding-horizontal-base); - position: relative; - display: inline-flex; - align-items: center; - background: @picker-bg; - border: @border-width-base @border-style-base @select-border-color; - border-radius: @control-border-radius; - transition: border @animation-duration-slow, box-shadow @animation-duration-slow; - - &:hover, - &-focused { - .hover(); - } - - &-focused { - .active(); - } - - &&-disabled { - background: @input-disabled-bg; - border-color: @select-border-color; - cursor: not-allowed; - } - - &&-disabled &-suffix { - color: @disabled-color; - } - - &&-borderless { - background-color: transparent !important; - border-color: transparent !important; - box-shadow: none !important; - } - - // ======================== Input ========================= - &-input { - position: relative; - display: inline-flex; - align-items: center; - width: 100%; - - > input { - .input(); - flex: auto; - - // Fix Firefox flex not correct: - // https://github.com/ant-design/ant-design/pull/20023#issuecomment-564389553 - min-width: 1px; - height: auto; - padding: 0; - background: transparent; - - border: 0; - - &:focus { - box-shadow: none; - } - - &[disabled] { - background: transparent; - } - } - - &:hover { - .@{picker-prefix-cls}-clear { - opacity: 1; - } - } - - &-placeholder { - > input { - color: @input-placeholder-color; - } - } - } - - // Size - &-large { - .picker-padding(@input-height-lg, @font-size-lg, @input-padding-horizontal-lg); - - .@{picker-prefix-cls}-input > input { - font-size: @font-size-lg; - } - } - - &-small { - .picker-padding(@input-height-sm, @font-size-base, @input-padding-horizontal-sm); - } - - &-suffix { - display: flex; - flex: none; - align-self: center; - margin-left: (@padding-xs / 2); - color: @disabled-color; - line-height: 1; - pointer-events: none; - - > * { - vertical-align: top; - - &:not(:last-child) { - margin-right: 8px; - } - } - } - - &-clear { - position: absolute; - top: 50%; - right: 0; - color: @disabled-color; - line-height: 1; - background: @component-background; - transform: translateY(-50%); - cursor: pointer; - opacity: 0; - transition: opacity @animation-duration-slow, color @animation-duration-slow; - - > * { - vertical-align: top; - } - - &:hover { - color: @text-color-secondary; - } - } - - &-separator { - position: relative; - display: inline-block; - width: 1em; - height: @font-size-lg; - color: @disabled-color; - font-size: @font-size-lg; - vertical-align: top; - cursor: default; - - .@{picker-prefix-cls}-focused & { - color: @text-color-secondary; - } - - .@{picker-prefix-cls}-range-separator & { - .@{picker-prefix-cls}-disabled & { - cursor: not-allowed; - } - } - } - - // ======================== Range ========================= - &-range { - position: relative; - display: inline-flex; - - // Clear - .@{picker-prefix-cls}-clear { - right: @input-padding-horizontal-base; - } - - &:hover { - .@{picker-prefix-cls}-clear { - opacity: 1; - } - } - - // Active bar - .@{picker-prefix-cls}-active-bar { - bottom: -@border-width-base; - height: 2px; - margin-left: @input-padding-horizontal-base; - background: @primary-color; - opacity: 0; - transition: all @animation-duration-slow ease-out; - pointer-events: none; - } - - &.@{picker-prefix-cls}-focused { - .@{picker-prefix-cls}-active-bar { - opacity: 1; - } - } - - &-separator { - align-items: center; - padding: 0 @padding-xs; - line-height: 1; - } - - &.@{picker-prefix-cls}-small { - .@{picker-prefix-cls}-clear { - right: @input-padding-horizontal-sm; - } - - .@{picker-prefix-cls}-active-bar { - margin-left: @input-padding-horizontal-sm; - } - } - } - - // ======================= Dropdown ======================= - &-dropdown { - .reset-component(); - position: absolute; - z-index: @zindex-picker; - - &-hidden { - display: none; - } - - &-placement-bottomLeft { - .@{picker-prefix-cls}-range-arrow { - top: (@arrow-size / 2) - (@arrow-size / 3) + 0.7px; - display: block; - transform: rotate(-135deg) translateY(1px); - } - } - - &-placement-topLeft { - .@{picker-prefix-cls}-range-arrow { - bottom: (@arrow-size / 2) - (@arrow-size / 3) + 0.7px; - display: block; - transform: rotate(45deg); - } - } - - &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topLeft, - &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topRight, - &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topLeft, - &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topRight { - animation-name: antSlideDownIn; - } - - &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-bottomLeft, - &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-bottomRight, - &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-bottomLeft, - &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-bottomRight { - animation-name: antSlideUpIn; - } - - &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topLeft, - &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topRight { - animation-name: antSlideDownOut; - } - - &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-bottomLeft, - &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-bottomRight { - animation-name: antSlideUpOut; - } - } - - &-dropdown-range { - padding: (@arrow-size * 2 / 3) 0; - - &-hidden { - display: none; - } - } - - // Time picker with additional style - &-dropdown &-panel > &-time-panel { - padding-top: (@padding-xs / 2); - } - - // ======================== Ranges ======================== - &-ranges { - margin-bottom: 0; - padding: (@padding-xs / 2) @padding-sm; - overflow: hidden; - line-height: @picker-text-height - 2 * @border-width-base - (@padding-xs / 2); - text-align: left; - list-style: none; - - > li { - display: inline-block; - } - - // https://github.com/ant-design/ant-design/issues/23687 - .@{picker-prefix-cls}-preset > .@{ant-prefix}-tag-blue { - color: @primary-color; - background: @primary-1; - border-color: @primary-3; - cursor: pointer; - } - - .@{picker-prefix-cls}-ok { - float: right; - margin-left: @padding-xs; - } - } - - &-range-wrapper { - display: flex; - } - - &-range-arrow { - position: absolute; - z-index: 1; - display: none; - width: @arrow-size; - height: @arrow-size; - margin-left: @input-padding-horizontal-base * 1.5; - background: linear-gradient( - 135deg, - transparent 40%, - @calendar-bg 40% - ); // Use linear-gradient to prevent arrow from covering text - box-shadow: 2px 2px 6px -2px fade(@black, 10%); // use spread radius to hide shadow over popover - transition: left @animation-duration-slow ease-out; - .roundedArrow(@arrow-size, 5px, @calendar-bg); - } - - &-panel-container { - overflow: hidden; - vertical-align: top; - background: @calendar-bg; - border-radius: @border-radius-base; - box-shadow: @box-shadow-base; - transition: margin @animation-duration-slow; - - .@{picker-prefix-cls}-panels { - display: inline-flex; - flex-wrap: nowrap; - direction: ltr; - } - - .@{picker-prefix-cls}-panel { - vertical-align: top; - background: transparent; - border-width: 0 0 @border-width-base 0; - border-radius: 0; - - .@{picker-prefix-cls}-content, - table { - text-align: center; - } - - &-focused { - border-color: @border-color-split; - } - } - } -} - -@import './panel'; -@import './rtl'; diff --git a/components/date-picker/style/index.tsx b/components/date-picker/style/index.tsx index 18447e360..e765b859b 100644 --- a/components/date-picker/style/index.tsx +++ b/components/date-picker/style/index.tsx @@ -1,7 +1,1448 @@ -import './index.less'; +import type { CSSObject } from '../../_util/cssinjs'; +import { TinyColor } from '@ctrl/tinycolor'; +import type { InputToken } from '../../input/style'; +import { + genActiveStyle, + genBasicInputStyle, + genHoverStyle, + initInputToken, +} from '../../input/style'; +import { + initSlideMotion, + initMoveMotion, + slideDownIn, + slideDownOut, + slideUpIn, + slideUpOut, +} from '../../_style/motion'; +import type { FullToken, GenerateStyle } from '../../theme/internal'; +import { genComponentStyleHook, mergeToken } from '../../theme/internal'; +import type { GlobalToken } from '../../theme/interface'; +import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook'; +import { resetComponent, roundedArrow, textEllipsis } from '../../_style'; +import { genCompactItemStyle } from '../../_style/compact-item'; -// style dependencies -import '../../tag/style'; -import '../../button/style'; +export interface ComponentToken { + presetsWidth: number; + presetsMaxWidth: number; + zIndexPopup: number; +} -// deps-lint-skip: form +export type PickerPanelToken = { + pickerCellCls: string; + pickerCellInnerCls: string; + pickerTextHeight: number; + pickerPanelCellWidth: number; + pickerPanelCellHeight: number; + pickerDateHoverRangeBorderColor: string; + pickerBasicCellHoverWithRangeColor: string; + pickerPanelWithoutTimeCellHeight: number; + pickerYearMonthCellWidth: number; + pickerTimePanelColumnHeight: number; + pickerTimePanelColumnWidth: number; + pickerTimePanelCellHeight: number; + pickerCellPaddingVertical: number; + pickerQuarterPanelContentHeight: number; + pickerCellBorderGap: number; + pickerControlIconSize: number; + pickerControlIconBorderWidth: number; +}; + +type PickerToken = InputToken> & PickerPanelToken; + +type SharedPickerToken = Omit; + +const genPikerPadding = ( + token: PickerToken, + inputHeight: number, + fontSize: number, + paddingHorizontal: number, +): CSSObject => { + const { lineHeight } = token; + + const fontHeight = Math.floor(fontSize * lineHeight) + 2; + const paddingTop = Math.max((inputHeight - fontHeight) / 2, 0); + const paddingBottom = Math.max(inputHeight - fontHeight - paddingTop, 0); + + return { + padding: `${paddingTop}px ${paddingHorizontal}px ${paddingBottom}px`, + }; +}; + +const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => { + const { + componentCls, + pickerCellCls, + pickerCellInnerCls, + pickerPanelCellHeight, + motionDurationSlow, + borderRadiusSM, + motionDurationMid, + controlItemBgHover, + lineWidth, + lineType, + colorPrimary, + controlItemBgActive, + colorTextLightSolid, + controlHeightSM, + pickerDateHoverRangeBorderColor, + pickerCellBorderGap, + pickerBasicCellHoverWithRangeColor, + pickerPanelCellWidth, + colorTextDisabled, + colorBgContainerDisabled, + } = token; + + return { + '&::before': { + position: 'absolute', + top: '50%', + insetInlineStart: 0, + insetInlineEnd: 0, + zIndex: 1, + height: pickerPanelCellHeight, + transform: 'translateY(-50%)', + transition: `all ${motionDurationSlow}`, + content: '""', + }, + + // >>> Default + [pickerCellInnerCls]: { + position: 'relative', + zIndex: 2, + display: 'inline-block', + minWidth: pickerPanelCellHeight, + height: pickerPanelCellHeight, + lineHeight: `${pickerPanelCellHeight}px`, + borderRadius: borderRadiusSM, + transition: `background ${motionDurationMid}, border ${motionDurationMid}`, + }, + + // >>> Hover + [`&:hover:not(${pickerCellCls}-in-view), + &:hover:not(${pickerCellCls}-selected):not(${pickerCellCls}-range-start):not(${pickerCellCls}-range-end):not(${pickerCellCls}-range-hover-start):not(${pickerCellCls}-range-hover-end)`]: + { + [pickerCellInnerCls]: { + background: controlItemBgHover, + }, + }, + + // >>> Today + [`&-in-view${pickerCellCls}-today ${pickerCellInnerCls}`]: { + '&::before': { + position: 'absolute', + top: 0, + insetInlineEnd: 0, + bottom: 0, + insetInlineStart: 0, + zIndex: 1, + border: `${lineWidth}px ${lineType} ${colorPrimary}`, + borderRadius: borderRadiusSM, + content: '""', + }, + }, + + // >>> In Range + [`&-in-view${pickerCellCls}-in-range`]: { + position: 'relative', + + '&::before': { + background: controlItemBgActive, + }, + }, + + // >>> Selected + [`&-in-view${pickerCellCls}-selected ${pickerCellInnerCls}, + &-in-view${pickerCellCls}-range-start ${pickerCellInnerCls}, + &-in-view${pickerCellCls}-range-end ${pickerCellInnerCls}`]: { + color: colorTextLightSolid, + background: colorPrimary, + }, + + [`&-in-view${pickerCellCls}-range-start:not(${pickerCellCls}-range-start-single), + &-in-view${pickerCellCls}-range-end:not(${pickerCellCls}-range-end-single)`]: { + '&::before': { + background: controlItemBgActive, + }, + }, + + [`&-in-view${pickerCellCls}-range-start::before`]: { + insetInlineStart: '50%', + }, + + [`&-in-view${pickerCellCls}-range-end::before`]: { + insetInlineEnd: '50%', + }, + + // >>> Range Hover + [`&-in-view${pickerCellCls}-range-hover-start:not(${pickerCellCls}-in-range):not(${pickerCellCls}-range-start):not(${pickerCellCls}-range-end), + &-in-view${pickerCellCls}-range-hover-end:not(${pickerCellCls}-in-range):not(${pickerCellCls}-range-start):not(${pickerCellCls}-range-end), + &-in-view${pickerCellCls}-range-hover-start${pickerCellCls}-range-start-single, + &-in-view${pickerCellCls}-range-hover-start${pickerCellCls}-range-start${pickerCellCls}-range-end${pickerCellCls}-range-end-near-hover, + &-in-view${pickerCellCls}-range-hover-end${pickerCellCls}-range-start${pickerCellCls}-range-end${pickerCellCls}-range-start-near-hover, + &-in-view${pickerCellCls}-range-hover-end${pickerCellCls}-range-end-single, + &-in-view${pickerCellCls}-range-hover:not(${pickerCellCls}-in-range)`]: { + '&::after': { + position: 'absolute', + top: '50%', + zIndex: 0, + height: controlHeightSM, + borderTop: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, + borderBottom: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, + transform: 'translateY(-50%)', + transition: `all ${motionDurationSlow}`, + content: '""', + }, + }, + + // Add space for stash + [`&-range-hover-start::after, + &-range-hover-end::after, + &-range-hover::after`]: { + insetInlineEnd: 0, + insetInlineStart: pickerCellBorderGap, + }, + + // Hover with in range + [`&-in-view${pickerCellCls}-in-range${pickerCellCls}-range-hover::before, + &-in-view${pickerCellCls}-range-start${pickerCellCls}-range-hover::before, + &-in-view${pickerCellCls}-range-end${pickerCellCls}-range-hover::before, + &-in-view${pickerCellCls}-range-start:not(${pickerCellCls}-range-start-single)${pickerCellCls}-range-hover-start::before, + &-in-view${pickerCellCls}-range-end:not(${pickerCellCls}-range-end-single)${pickerCellCls}-range-hover-end::before, + ${componentCls}-panel + > :not(${componentCls}-date-panel) + &-in-view${pickerCellCls}-in-range${pickerCellCls}-range-hover-start::before, + ${componentCls}-panel + > :not(${componentCls}-date-panel) + &-in-view${pickerCellCls}-in-range${pickerCellCls}-range-hover-end::before`]: { + background: pickerBasicCellHoverWithRangeColor, + }, + + // range start border-radius + [`&-in-view${pickerCellCls}-range-start:not(${pickerCellCls}-range-start-single):not(${pickerCellCls}-range-end) ${pickerCellInnerCls}`]: + { + borderStartStartRadius: borderRadiusSM, + borderEndStartRadius: borderRadiusSM, + borderStartEndRadius: 0, + borderEndEndRadius: 0, + }, + + // range end border-radius + [`&-in-view${pickerCellCls}-range-end:not(${pickerCellCls}-range-end-single):not(${pickerCellCls}-range-start) ${pickerCellInnerCls}`]: + { + borderStartStartRadius: 0, + borderEndStartRadius: 0, + borderStartEndRadius: borderRadiusSM, + borderEndEndRadius: borderRadiusSM, + }, + + [`&-range-hover${pickerCellCls}-range-end::after`]: { + insetInlineStart: '50%', + }, + + // Edge start + [`tr > &-in-view${pickerCellCls}-range-hover:first-child::after, + tr > &-in-view${pickerCellCls}-range-hover-end:first-child::after, + &-in-view${pickerCellCls}-start${pickerCellCls}-range-hover-edge-start${pickerCellCls}-range-hover-edge-start-near-range::after, + &-in-view${pickerCellCls}-range-hover-edge-start:not(${pickerCellCls}-range-hover-edge-start-near-range)::after, + &-in-view${pickerCellCls}-range-hover-start::after`]: { + insetInlineStart: (pickerPanelCellWidth - pickerPanelCellHeight) / 2, + borderInlineStart: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, + borderStartStartRadius: lineWidth, + borderEndStartRadius: lineWidth, + }, + + // Edge end + [`tr > &-in-view${pickerCellCls}-range-hover:last-child::after, + tr > &-in-view${pickerCellCls}-range-hover-start:last-child::after, + &-in-view${pickerCellCls}-end${pickerCellCls}-range-hover-edge-end${pickerCellCls}-range-hover-edge-end-near-range::after, + &-in-view${pickerCellCls}-range-hover-edge-end:not(${pickerCellCls}-range-hover-edge-end-near-range)::after, + &-in-view${pickerCellCls}-range-hover-end::after`]: { + insetInlineEnd: (pickerPanelCellWidth - pickerPanelCellHeight) / 2, + borderInlineEnd: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, + borderStartEndRadius: lineWidth, + borderEndEndRadius: lineWidth, + }, + + // >>> Disabled + '&-disabled': { + color: colorTextDisabled, + pointerEvents: 'none', + + [pickerCellInnerCls]: { + background: 'transparent', + }, + + '&::before': { + background: colorBgContainerDisabled, + }, + }, + [`&-disabled${pickerCellCls}-today ${pickerCellInnerCls}::before`]: { + borderColor: colorTextDisabled, + }, + }; +}; + +export const genPanelStyle = (token: SharedPickerToken): CSSObject => { + const { + componentCls, + pickerCellInnerCls, + pickerYearMonthCellWidth, + pickerControlIconSize, + pickerPanelCellWidth, + paddingSM, + paddingXS, + paddingXXS, + colorBgContainer, + lineWidth, + lineType, + borderRadiusLG, + colorPrimary, + colorTextHeading, + colorSplit, + pickerControlIconBorderWidth, + colorIcon, + pickerTextHeight, + motionDurationMid, + colorIconHover, + fontWeightStrong, + pickerPanelCellHeight, + pickerCellPaddingVertical, + colorTextDisabled, + colorText, + fontSize, + pickerBasicCellHoverWithRangeColor, + motionDurationSlow, + pickerPanelWithoutTimeCellHeight, + pickerQuarterPanelContentHeight, + colorLink, + colorLinkActive, + colorLinkHover, + pickerDateHoverRangeBorderColor, + borderRadiusSM, + colorTextLightSolid, + borderRadius, + controlItemBgHover, + pickerTimePanelColumnHeight, + pickerTimePanelColumnWidth, + pickerTimePanelCellHeight, + controlItemBgActive, + marginXXS, + } = token; + + const pickerPanelWidth = pickerPanelCellWidth * 7 + paddingSM * 2 + 4; + const hoverCellFixedDistance = + (pickerPanelWidth - paddingXS * 2) / 3 - pickerYearMonthCellWidth / 2; + + return { + [componentCls]: { + '&-panel': { + display: 'inline-flex', + flexDirection: 'column', + textAlign: 'center', + background: colorBgContainer, + border: `${lineWidth}px ${lineType} ${colorSplit}`, + borderRadius: borderRadiusLG, + outline: 'none', + + '&-focused': { + borderColor: colorPrimary, + }, + + '&-rtl': { + direction: 'rtl', + + [`${componentCls}-prev-icon, + ${componentCls}-super-prev-icon`]: { + transform: 'rotate(45deg)', + }, + + [`${componentCls}-next-icon, + ${componentCls}-super-next-icon`]: { + transform: 'rotate(-135deg)', + }, + }, + }, + + // ======================================================== + // = Shared Panel = + // ======================================================== + [`&-decade-panel, + &-year-panel, + &-quarter-panel, + &-month-panel, + &-week-panel, + &-date-panel, + &-time-panel`]: { + display: 'flex', + flexDirection: 'column', + width: pickerPanelWidth, + }, + + // ======================= Header ======================= + '&-header': { + display: 'flex', + padding: `0 ${paddingXS}px`, + color: colorTextHeading, + borderBottom: `${lineWidth}px ${lineType} ${colorSplit}`, + + '> *': { + flex: 'none', + }, + + button: { + padding: 0, + color: colorIcon, + lineHeight: `${pickerTextHeight}px`, + background: 'transparent', + border: 0, + cursor: 'pointer', + transition: `color ${motionDurationMid}`, + }, + + '> button': { + minWidth: '1.6em', + fontSize, + + '&:hover': { + color: colorIconHover, + }, + }, + + '&-view': { + flex: 'auto', + fontWeight: fontWeightStrong, + lineHeight: `${pickerTextHeight}px`, + + button: { + color: 'inherit', + fontWeight: 'inherit', + verticalAlign: 'top', + + '&:not(:first-child)': { + marginInlineStart: paddingXS, + }, + + '&:hover': { + color: colorPrimary, + }, + }, + }, + }, + // Arrow button + [`&-prev-icon, + &-next-icon, + &-super-prev-icon, + &-super-next-icon`]: { + position: 'relative', + display: 'inline-block', + width: pickerControlIconSize, + height: pickerControlIconSize, + + '&::before': { + position: 'absolute', + top: 0, + insetInlineStart: 0, + display: 'inline-block', + width: pickerControlIconSize, + height: pickerControlIconSize, + border: `0 solid currentcolor`, + borderBlockStartWidth: pickerControlIconBorderWidth, + borderBlockEndWidth: 0, + borderInlineStartWidth: pickerControlIconBorderWidth, + borderInlineEndWidth: 0, + content: '""', + }, + }, + + [`&-super-prev-icon, + &-super-next-icon`]: { + '&::after': { + position: 'absolute', + top: Math.ceil(pickerControlIconSize / 2), + insetInlineStart: Math.ceil(pickerControlIconSize / 2), + display: 'inline-block', + width: pickerControlIconSize, + height: pickerControlIconSize, + border: '0 solid currentcolor', + borderBlockStartWidth: pickerControlIconBorderWidth, + borderBlockEndWidth: 0, + borderInlineStartWidth: pickerControlIconBorderWidth, + borderInlineEndWidth: 0, + content: '""', + }, + }, + + [`&-prev-icon, + &-super-prev-icon`]: { + transform: 'rotate(-45deg)', + }, + + [`&-next-icon, + &-super-next-icon`]: { + transform: 'rotate(135deg)', + }, + + // ======================== Body ======================== + '&-content': { + width: '100%', + tableLayout: 'fixed', + borderCollapse: 'collapse', + + 'th, td': { + position: 'relative', + minWidth: pickerPanelCellHeight, + fontWeight: 'normal', + }, + + th: { + height: pickerPanelCellHeight + pickerCellPaddingVertical * 2, + color: colorText, + verticalAlign: 'middle', + }, + }, + + '&-cell': { + padding: `${pickerCellPaddingVertical}px 0`, + color: colorTextDisabled, + cursor: 'pointer', + + // In view + '&-in-view': { + color: colorText, + }, + + ...genPickerCellInnerStyle(token), + }, + + // DatePanel only + [`&-date-panel ${componentCls}-cell-in-view${componentCls}-cell-in-range${componentCls}-cell-range-hover-start ${pickerCellInnerCls}, + &-date-panel ${componentCls}-cell-in-view${componentCls}-cell-in-range${componentCls}-cell-range-hover-end ${pickerCellInnerCls}`]: + { + '&::after': { + position: 'absolute', + top: 0, + bottom: 0, + zIndex: -1, + background: pickerBasicCellHoverWithRangeColor, + transition: `all ${motionDurationSlow}`, + content: '""', + }, + }, + + [`&-date-panel + ${componentCls}-cell-in-view${componentCls}-cell-in-range${componentCls}-cell-range-hover-start + ${pickerCellInnerCls}::after`]: { + insetInlineEnd: -(pickerPanelCellWidth - pickerPanelCellHeight) / 2, + insetInlineStart: 0, + }, + + [`&-date-panel ${componentCls}-cell-in-view${componentCls}-cell-in-range${componentCls}-cell-range-hover-end ${pickerCellInnerCls}::after`]: + { + insetInlineEnd: 0, + insetInlineStart: -(pickerPanelCellWidth - pickerPanelCellHeight) / 2, + }, + + // Hover with range start & end + [`&-range-hover${componentCls}-range-start::after`]: { + insetInlineEnd: '50%', + }, + + [`&-decade-panel, + &-year-panel, + &-quarter-panel, + &-month-panel`]: { + [`${componentCls}-content`]: { + height: pickerPanelWithoutTimeCellHeight * 4, + }, + + [pickerCellInnerCls]: { + padding: `0 ${paddingXS}px`, + }, + }, + + '&-quarter-panel': { + [`${componentCls}-content`]: { + height: pickerQuarterPanelContentHeight, + }, + }, + + // ======================== Footer ======================== + [`&-panel ${componentCls}-footer`]: { + borderTop: `${lineWidth}px ${lineType} ${colorSplit}`, + }, + + '&-footer': { + width: 'min-content', + minWidth: '100%', + lineHeight: `${pickerTextHeight - 2 * lineWidth}px`, + textAlign: 'center', + + '&-extra': { + padding: `0 ${paddingSM}`, + lineHeight: `${pickerTextHeight - 2 * lineWidth}px`, + textAlign: 'start', + + '&:not(:last-child)': { + borderBottom: `${lineWidth}px ${lineType} ${colorSplit}`, + }, + }, + }, + + '&-now': { + textAlign: 'start', + }, + + '&-today-btn': { + color: colorLink, + + '&:hover': { + color: colorLinkHover, + }, + + '&:active': { + color: colorLinkActive, + }, + + [`&${componentCls}-today-btn-disabled`]: { + color: colorTextDisabled, + cursor: 'not-allowed', + }, + }, + + // ======================================================== + // = Special = + // ======================================================== + + // ===================== Decade Panel ===================== + '&-decade-panel': { + [pickerCellInnerCls]: { + padding: `0 ${paddingXS / 2}px`, + }, + + [`${componentCls}-cell::before`]: { + display: 'none', + }, + }, + + // ============= Year & Quarter & Month Panel ============= + [`&-year-panel, + &-quarter-panel, + &-month-panel`]: { + [`${componentCls}-body`]: { + padding: `0 ${paddingXS}px`, + }, + + [pickerCellInnerCls]: { + width: pickerYearMonthCellWidth, + }, + + [`${componentCls}-cell-range-hover-start::after`]: { + insetInlineStart: hoverCellFixedDistance, + borderInlineStart: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, + borderStartStartRadius: borderRadiusSM, + borderBottomStartRadius: borderRadiusSM, + borderStartEndRadius: 0, + borderBottomEndRadius: 0, + + [`${componentCls}-panel-rtl &`]: { + insetInlineEnd: hoverCellFixedDistance, + borderInlineEnd: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, + borderStartStartRadius: 0, + borderBottomStartRadius: 0, + borderStartEndRadius: borderRadiusSM, + borderBottomEndRadius: borderRadiusSM, + }, + }, + [`${componentCls}-cell-range-hover-end::after`]: { + insetInlineEnd: hoverCellFixedDistance, + borderInlineEnd: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, + borderStartStartRadius: 0, + borderBottomStartRadius: 0, + borderStartEndRadius: borderRadius, + borderBottomEndRadius: borderRadius, + + [`${componentCls}-panel-rtl &`]: { + insetInlineStart: hoverCellFixedDistance, + borderInlineStart: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, + borderStartStartRadius: borderRadius, + borderBottomStartRadius: borderRadius, + borderStartEndRadius: 0, + borderBottomEndRadius: 0, + }, + }, + }, + + // ====================== Week Panel ====================== + '&-week-panel': { + [`${componentCls}-body`]: { + padding: `${paddingXS}px ${paddingSM}px`, + }, + + // Clear cell style + [`${componentCls}-cell`]: { + [`&:hover ${pickerCellInnerCls}, + &-selected ${pickerCellInnerCls}, + ${pickerCellInnerCls}`]: { + background: 'transparent !important', + }, + }, + + '&-row': { + td: { + transition: `background ${motionDurationMid}`, + + '&:first-child': { + borderStartStartRadius: borderRadiusSM, + borderEndStartRadius: borderRadiusSM, + }, + + '&:last-child': { + borderStartEndRadius: borderRadiusSM, + borderEndEndRadius: borderRadiusSM, + }, + }, + + '&:hover td': { + background: controlItemBgHover, + }, + + [`&-selected td, + &-selected:hover td`]: { + background: colorPrimary, + + [`&${componentCls}-cell-week`]: { + color: new TinyColor(colorTextLightSolid).setAlpha(0.5).toHexString(), + }, + + [`&${componentCls}-cell-today ${pickerCellInnerCls}::before`]: { + borderColor: colorTextLightSolid, + }, + + [pickerCellInnerCls]: { + color: colorTextLightSolid, + }, + }, + }, + }, + + // ====================== Date Panel ====================== + '&-date-panel': { + [`${componentCls}-body`]: { + padding: `${paddingXS}px ${paddingSM}px`, + }, + + [`${componentCls}-content`]: { + width: pickerPanelCellWidth * 7, + + th: { + width: pickerPanelCellWidth, + }, + }, + }, + + // ==================== Datetime Panel ==================== + '&-datetime-panel': { + display: 'flex', + + [`${componentCls}-time-panel`]: { + borderInlineStart: `${lineWidth}px ${lineType} ${colorSplit}`, + }, + + [`${componentCls}-date-panel, + ${componentCls}-time-panel`]: { + transition: `opacity ${motionDurationSlow}`, + }, + + // Keyboard + '&-active': { + [`${componentCls}-date-panel, + ${componentCls}-time-panel`]: { + opacity: 0.3, + + '&-active': { + opacity: 1, + }, + }, + }, + }, + + // ====================== Time Panel ====================== + '&-time-panel': { + width: 'auto', + minWidth: 'auto', + direction: 'ltr', + + [`${componentCls}-content`]: { + display: 'flex', + flex: 'auto', + height: pickerTimePanelColumnHeight, + }, + + '&-column': { + flex: '1 0 auto', + width: pickerTimePanelColumnWidth, + margin: `${paddingXXS}px 0`, + padding: 0, + overflowY: 'hidden', + textAlign: 'start', + listStyle: 'none', + transition: `background ${motionDurationMid}`, + overflowX: 'hidden', + + '&::after': { + display: 'block', + height: pickerTimePanelColumnHeight - pickerTimePanelCellHeight, + content: '""', + }, + + '&:not(:first-child)': { + borderInlineStart: `${lineWidth}px ${lineType} ${colorSplit}`, + }, + + '&-active': { + background: new TinyColor(controlItemBgActive).setAlpha(0.2).toHexString(), + }, + + '&:hover': { + overflowY: 'auto', + }, + + '> li': { + margin: 0, + padding: 0, + + [`&${componentCls}-time-panel-cell`]: { + marginInline: marginXXS, + [`${componentCls}-time-panel-cell-inner`]: { + display: 'block', + width: pickerTimePanelColumnWidth - 2 * marginXXS, + height: pickerTimePanelCellHeight, + margin: 0, + paddingBlock: 0, + paddingInlineEnd: 0, + paddingInlineStart: (pickerTimePanelColumnWidth - pickerTimePanelCellHeight) / 2, + color: colorText, + lineHeight: `${pickerTimePanelCellHeight}px`, + borderRadius: borderRadiusSM, + cursor: 'pointer', + transition: `background ${motionDurationMid}`, + + '&:hover': { + background: controlItemBgHover, + }, + }, + + '&-selected': { + [`${componentCls}-time-panel-cell-inner`]: { + background: controlItemBgActive, + }, + }, + + '&-disabled': { + [`${componentCls}-time-panel-cell-inner`]: { + color: colorTextDisabled, + background: 'transparent', + cursor: 'not-allowed', + }, + }, + }, + }, + }, + }, + // https://github.com/ant-design/ant-design/issues/39227 + [`&-datetime-panel ${componentCls}-time-panel-column:after`]: { + height: pickerTimePanelColumnHeight - pickerTimePanelCellHeight + paddingXXS * 2, + }, + }, + }; +}; + +const genPickerStatusStyle: GenerateStyle = token => { + const { + componentCls, + colorBgContainer, + colorError, + colorErrorOutline, + colorWarning, + colorWarningOutline, + } = token; + + return { + [componentCls]: { + [`&-status-error${componentCls}`]: { + '&, &:not([disabled]):hover': { + backgroundColor: colorBgContainer, + borderColor: colorError, + }, + + '&-focused, &:focus': { + ...genActiveStyle( + mergeToken(token, { + inputBorderActiveColor: colorError, + inputBorderHoverColor: colorError, + controlOutline: colorErrorOutline, + }), + ), + }, + + [`${componentCls}-active-bar`]: { + background: colorError, + }, + }, + + [`&-status-warning${componentCls}`]: { + '&, &:not([disabled]):hover': { + backgroundColor: colorBgContainer, + borderColor: colorWarning, + }, + + '&-focused, &:focus': { + ...genActiveStyle( + mergeToken(token, { + inputBorderActiveColor: colorWarning, + inputBorderHoverColor: colorWarning, + controlOutline: colorWarningOutline, + }), + ), + }, + + [`${componentCls}-active-bar`]: { + background: colorWarning, + }, + }, + }, + }; +}; + +const genPickerStyle: GenerateStyle = token => { + const { + componentCls, + antCls, + boxShadowPopoverArrow, + controlHeight, + fontSize, + inputPaddingHorizontal, + colorBgContainer, + lineWidth, + lineType, + colorBorder, + borderRadius, + motionDurationMid, + colorBgContainerDisabled, + colorTextDisabled, + colorTextPlaceholder, + controlHeightLG, + fontSizeLG, + controlHeightSM, + inputPaddingHorizontalSM, + paddingXS, + marginXS, + colorTextDescription, + lineWidthBold, + lineHeight, + colorPrimary, + motionDurationSlow, + zIndexPopup, + paddingXXS, + paddingSM, + pickerTextHeight, + controlItemBgActive, + colorPrimaryBorder, + sizePopupArrow, + borderRadiusXS, + borderRadiusOuter, + colorBgElevated, + borderRadiusLG, + boxShadowSecondary, + borderRadiusSM, + colorSplit, + controlItemBgHover, + presetsWidth, + presetsMaxWidth, + } = token; + + return [ + { + [componentCls]: { + ...resetComponent(token), + ...genPikerPadding(token, controlHeight, fontSize, inputPaddingHorizontal), + position: 'relative', + display: 'inline-flex', + alignItems: 'center', + background: colorBgContainer, + lineHeight: 1, + border: `${lineWidth}px ${lineType} ${colorBorder}`, + borderRadius, + transition: `border ${motionDurationMid}, box-shadow ${motionDurationMid}`, + + '&:hover, &-focused': { + ...genHoverStyle(token), + }, + + '&-focused': { + ...genActiveStyle(token), + }, + + [`&${componentCls}-disabled`]: { + background: colorBgContainerDisabled, + borderColor: colorBorder, + cursor: 'not-allowed', + + [`${componentCls}-suffix`]: { + color: colorTextDisabled, + }, + }, + + [`&${componentCls}-borderless`]: { + backgroundColor: 'transparent !important', + borderColor: 'transparent !important', + boxShadow: 'none !important', + }, + + // ======================== Input ========================= + [`${componentCls}-input`]: { + position: 'relative', + display: 'inline-flex', + alignItems: 'center', + width: '100%', + + '> input': { + ...genBasicInputStyle(token), + flex: 'auto', + + // Fix Firefox flex not correct: + // https://github.com/ant-design/ant-design/pull/20023#issuecomment-564389553 + minWidth: 1, + height: 'auto', + padding: 0, + background: 'transparent', + border: 0, + + '&:focus': { + boxShadow: 'none', + }, + + '&[disabled]': { + background: 'transparent', + }, + }, + + '&:hover': { + [`${componentCls}-clear`]: { + opacity: 1, + }, + }, + + '&-placeholder': { + '> input': { + color: colorTextPlaceholder, + }, + }, + }, + + // Size + '&-large': { + ...genPikerPadding(token, controlHeightLG, fontSizeLG, inputPaddingHorizontal), + + [`${componentCls}-input > input`]: { + fontSize: fontSizeLG, + }, + }, + + '&-small': { + ...genPikerPadding(token, controlHeightSM, fontSize, inputPaddingHorizontalSM), + }, + + [`${componentCls}-suffix`]: { + display: 'flex', + flex: 'none', + alignSelf: 'center', + marginInlineStart: paddingXS / 2, + color: colorTextDisabled, + lineHeight: 1, + pointerEvents: 'none', + + '> *': { + verticalAlign: 'top', + + '&:not(:last-child)': { + marginInlineEnd: marginXS, + }, + }, + }, + + [`${componentCls}-clear`]: { + position: 'absolute', + top: '50%', + insetInlineEnd: 0, + color: colorTextDisabled, + lineHeight: 1, + background: colorBgContainer, + transform: 'translateY(-50%)', + cursor: 'pointer', + opacity: 0, + transition: `opacity ${motionDurationMid}, color ${motionDurationMid}`, + + '> *': { + verticalAlign: 'top', + }, + + '&:hover': { + color: colorTextDescription, + }, + }, + + [`${componentCls}-separator`]: { + position: 'relative', + display: 'inline-block', + width: '1em', + height: fontSizeLG, + color: colorTextDisabled, + fontSize: fontSizeLG, + verticalAlign: 'top', + cursor: 'default', + + [`${componentCls}-focused &`]: { + color: colorTextDescription, + }, + + [`${componentCls}-range-separator &`]: { + [`${componentCls}-disabled &`]: { + cursor: 'not-allowed', + }, + }, + }, + + // ======================== Range ========================= + '&-range': { + position: 'relative', + display: 'inline-flex', + + // Clear + [`${componentCls}-clear`]: { + insetInlineEnd: inputPaddingHorizontal, + }, + + '&:hover': { + [`${componentCls}-clear`]: { + opacity: 1, + }, + }, + + // Active bar + [`${componentCls}-active-bar`]: { + bottom: -lineWidth, + height: lineWidthBold, + marginInlineStart: inputPaddingHorizontal, + background: colorPrimary, + opacity: 0, + transition: `all ${motionDurationSlow} ease-out`, + pointerEvents: 'none', + }, + + [`&${componentCls}-focused`]: { + [`${componentCls}-active-bar`]: { + opacity: 1, + }, + }, + + [`${componentCls}-range-separator`]: { + alignItems: 'center', + padding: `0 ${paddingXS}px`, + lineHeight: 1, + }, + + [`&${componentCls}-small`]: { + [`${componentCls}-clear`]: { + insetInlineEnd: inputPaddingHorizontalSM, + }, + + [`${componentCls}-active-bar`]: { + marginInlineStart: inputPaddingHorizontalSM, + }, + }, + }, + + // ======================= Dropdown ======================= + '&-dropdown': { + ...resetComponent(token), + ...genPanelStyle(token), + position: 'absolute', + // Fix incorrect position of picker popup + // https://github.com/ant-design/ant-design/issues/35590 + top: -9999, + left: { + _skip_check_: true, + value: -9999, + }, + zIndex: zIndexPopup, + + [`&${componentCls}-dropdown-hidden`]: { + display: 'none', + }, + + [`&${componentCls}-dropdown-placement-bottomLeft`]: { + [`${componentCls}-range-arrow`]: { + top: 0, + display: 'block', + transform: 'translateY(-100%)', + }, + }, + + [`&${componentCls}-dropdown-placement-topLeft`]: { + [`${componentCls}-range-arrow`]: { + bottom: 0, + display: 'block', + transform: 'translateY(100%) rotate(180deg)', + }, + }, + + [`&${antCls}-slide-up-enter${antCls}-slide-up-enter-active${componentCls}-dropdown-placement-topLeft, + &${antCls}-slide-up-enter${antCls}-slide-up-enter-active${componentCls}-dropdown-placement-topRight, + &${antCls}-slide-up-appear${antCls}-slide-up-appear-active${componentCls}-dropdown-placement-topLeft, + &${antCls}-slide-up-appear${antCls}-slide-up-appear-active${componentCls}-dropdown-placement-topRight`]: + { + animationName: slideDownIn, + }, + + [`&${antCls}-slide-up-enter${antCls}-slide-up-enter-active${componentCls}-dropdown-placement-bottomLeft, + &${antCls}-slide-up-enter${antCls}-slide-up-enter-active${componentCls}-dropdown-placement-bottomRight, + &${antCls}-slide-up-appear${antCls}-slide-up-appear-active${componentCls}-dropdown-placement-bottomLeft, + &${antCls}-slide-up-appear${antCls}-slide-up-appear-active${componentCls}-dropdown-placement-bottomRight`]: + { + animationName: slideUpIn, + }, + + [`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active${componentCls}-dropdown-placement-topLeft, + &${antCls}-slide-up-leave${antCls}-slide-up-leave-active${componentCls}-dropdown-placement-topRight`]: + { + animationName: slideDownOut, + }, + + [`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active${componentCls}-dropdown-placement-bottomLeft, + &${antCls}-slide-up-leave${antCls}-slide-up-leave-active${componentCls}-dropdown-placement-bottomRight`]: + { + animationName: slideUpOut, + }, + + // Time picker with additional style + [`${componentCls}-panel > ${componentCls}-time-panel`]: { + paddingTop: paddingXXS, + }, + + // ======================== Ranges ======================== + [`${componentCls}-ranges`]: { + marginBottom: 0, + padding: `${paddingXXS}px ${paddingSM}px`, + overflow: 'hidden', + lineHeight: `${pickerTextHeight - 2 * lineWidth - paddingXS / 2}px`, + textAlign: 'start', + listStyle: 'none', + display: 'flex', + justifyContent: 'space-between', + + '> li': { + display: 'inline-block', + }, + + // https://github.com/ant-design/ant-design/issues/23687 + [`${componentCls}-preset > ${antCls}-tag-blue`]: { + color: colorPrimary, + background: controlItemBgActive, + borderColor: colorPrimaryBorder, + cursor: 'pointer', + }, + + [`${componentCls}-ok`]: { + marginInlineStart: 'auto', + }, + }, + + [`${componentCls}-range-wrapper`]: { + display: 'flex', + position: 'relative', + }, + + [`${componentCls}-range-arrow`]: { + position: 'absolute', + zIndex: 1, + display: 'none', + marginInlineStart: inputPaddingHorizontal * 1.5, + transition: `left ${motionDurationSlow} ease-out`, + ...roundedArrow( + sizePopupArrow, + borderRadiusXS, + borderRadiusOuter, + colorBgElevated, + boxShadowPopoverArrow, + ), + }, + + [`${componentCls}-panel-container`]: { + overflow: 'hidden', + verticalAlign: 'top', + background: colorBgElevated, + borderRadius: borderRadiusLG, + boxShadow: boxShadowSecondary, + transition: `margin ${motionDurationSlow}`, + + // ======================== Layout ======================== + [`${componentCls}-panel-layout`]: { + display: 'flex', + flexWrap: 'nowrap', + alignItems: 'stretch', + }, + + // ======================== Preset ======================== + [`${componentCls}-presets`]: { + display: 'flex', + flexDirection: 'column', + minWidth: presetsWidth, + maxWidth: presetsMaxWidth, + + ul: { + height: 0, + flex: 'auto', + listStyle: 'none', + overflow: 'auto', + margin: 0, + padding: paddingXS, + borderInlineEnd: `${lineWidth}px ${lineType} ${colorSplit}`, + + li: { + ...textEllipsis, + borderRadius: borderRadiusSM, + paddingInline: paddingXS, + paddingBlock: (controlHeightSM - Math.round(fontSize * lineHeight)) / 2, + cursor: 'pointer', + transition: `all ${motionDurationSlow}`, + + '+ li': { + marginTop: marginXS, + }, + + '&:hover': { + background: controlItemBgHover, + }, + }, + }, + }, + + // ======================== Panels ======================== + [`${componentCls}-panels`]: { + display: 'inline-flex', + flexWrap: 'nowrap', + direction: 'ltr', + + [`${componentCls}-panel`]: { + borderWidth: `0 0 ${lineWidth}px`, + }, + + '&:last-child': { + [`${componentCls}-panel`]: { + borderWidth: 0, + }, + }, + }, + + [`${componentCls}-panel`]: { + verticalAlign: 'top', + background: 'transparent', + borderRadius: 0, + borderWidth: 0, + + [`${componentCls}-content, + table`]: { + textAlign: 'center', + }, + + '&-focused': { + borderColor: colorBorder, + }, + }, + }, + }, + + '&-dropdown-range': { + padding: `${(sizePopupArrow * 2) / 3}px 0`, + + '&-hidden': { + display: 'none', + }, + }, + + '&-rtl': { + direction: 'rtl', + + [`${componentCls}-separator`]: { + transform: 'rotate(180deg)', + }, + + [`${componentCls}-footer`]: { + '&-extra': { + direction: 'rtl', + }, + }, + }, + }, + }, + + // Follow code may reuse in other components + initSlideMotion(token, 'slide-up'), + initSlideMotion(token, 'slide-down'), + initMoveMotion(token, 'move-up'), + initMoveMotion(token, 'move-down'), + ]; +}; + +export const initPickerPanelToken = (token: TokenWithCommonCls): PickerPanelToken => { + const pickerTimePanelCellHeight = 28; + const { componentCls, controlHeightLG, controlHeightSM, colorPrimary, paddingXXS } = token; + + return { + pickerCellCls: `${componentCls}-cell`, + pickerCellInnerCls: `${componentCls}-cell-inner`, + pickerTextHeight: controlHeightLG, + pickerPanelCellWidth: controlHeightSM * 1.5, + pickerPanelCellHeight: controlHeightSM, + pickerDateHoverRangeBorderColor: new TinyColor(colorPrimary).lighten(20).toHexString(), + pickerBasicCellHoverWithRangeColor: new TinyColor(colorPrimary).lighten(35).toHexString(), + pickerPanelWithoutTimeCellHeight: controlHeightLG * 1.65, + pickerYearMonthCellWidth: controlHeightLG * 1.5, + pickerTimePanelColumnHeight: pickerTimePanelCellHeight * 8, + pickerTimePanelColumnWidth: controlHeightLG * 1.4, + pickerTimePanelCellHeight, + pickerQuarterPanelContentHeight: controlHeightLG * 1.4, + pickerCellPaddingVertical: paddingXXS, + pickerCellBorderGap: 2, // Magic for gap between cells + pickerControlIconSize: 7, + pickerControlIconBorderWidth: 1.5, + }; +}; + +// ============================== Export ============================== +export default genComponentStyleHook( + 'DatePicker', + token => { + const pickerToken = mergeToken( + initInputToken>(token), + initPickerPanelToken(token), + ); + return [ + genPickerStyle(pickerToken), + genPickerStatusStyle(pickerToken), + // ===================================================== + // == Space Compact == + // ===================================================== + genCompactItemStyle(token, { + focusElCls: `${token.componentCls}-focused`, + }), + ]; + }, + token => ({ + presetsWidth: 120, + presetsMaxWidth: 200, + zIndexPopup: token.zIndexPopupBase + 50, + }), +); diff --git a/components/date-picker/style/panel.less b/components/date-picker/style/panel.less deleted file mode 100644 index 5a5d41b3d..000000000 --- a/components/date-picker/style/panel.less +++ /dev/null @@ -1,677 +0,0 @@ -@picker-cell-inner-cls: ~'@{picker-prefix-cls}-cell-inner'; - -.@{picker-prefix-cls} { - @picker-arrow-size: 7px; - @picker-year-month-cell-width: 60px; - @picker-panel-width: @picker-panel-cell-width * 7 + @padding-sm * 2 + 4; - - &-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: @primary-color; - } - } - - // ======================================================== - // = Shared Panel = - // ======================================================== - &-decade-panel, - &-year-panel, - &-quarter-panel, - &-month-panel, - &-week-panel, - &-date-panel, - &-time-panel { - display: flex; - flex-direction: column; - width: @picker-panel-width; - } - - // ======================= Header ======================= - &-header { - display: flex; - padding: 0 @padding-xs; - color: @heading-color; - border-bottom: @border-width-base @border-style-base @picker-border-color; - - > * { - flex: none; - } - - button { - padding: 0; - color: @disabled-color; - line-height: @picker-text-height; - background: transparent; - border: 0; - cursor: pointer; - transition: color @animation-duration-slow; - } - - > button { - min-width: 1.6em; - font-size: @font-size-base; - - &:hover { - color: @text-color; - } - } - - &-view { - flex: auto; - font-weight: 500; - line-height: @picker-text-height; - - button { - color: inherit; - font-weight: inherit; - - &:not(:first-child) { - margin-left: @padding-xs; - } - - &:hover { - color: @primary-color; - } - } - } - } - - // 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: 30px; - color: @text-color; - line-height: 30px; - } - } - - .picker-cell-inner(@cellClassName) { - &::before { - position: absolute; - top: 50%; - right: 0; - left: 0; - z-index: 1; - height: @picker-panel-cell-height; - transform: translateY(-50%); - transition: all @animation-duration-slow; - content: ''; - } - - // >>> Default - .@{cellClassName} { - position: relative; - z-index: 2; - display: inline-block; - min-width: @picker-panel-cell-height; - height: @picker-panel-cell-height; - line-height: @picker-panel-cell-height; - border-radius: @border-radius-base; - transition: background @animation-duration-slow, border @animation-duration-slow; - } - - // >>> Hover - &:hover:not(&-in-view), - &:hover: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} { - &::before { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 1; - border: @border-width-base @border-style-base @primary-color; - border-radius: @border-radius-base; - 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: @text-color-inverse; - background: @primary-color; - } - - &-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 { - left: 50%; - } - - &-in-view&-range-end::before { - right: 50%; - } - - // >>> 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; - height: 24px; - 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; - 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-base 0 0 @border-radius-base; - } - - // range end border-radius - &-in-view&-range-end:not(&-range-end-single):not(&-range-start) .@{cellClassName} { - border-radius: 0 @border-radius-base @border-radius-base 0; - } - - // 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: 0; - bottom: 0; - z-index: -1; - background: @picker-date-hover-range-color; - transition: all @animation-duration-slow; - content: ''; - } - } - - .@{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&-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: 6px; - 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; - } - - // 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: 6px; - 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; - } - - // >>> 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: 3px 0; - color: @disabled-color; - cursor: pointer; - - // In view - &-in-view { - color: @text-color; - } - - .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-cls} { - padding: 0 @padding-xs; - } - } - - &-quarter-panel { - .@{picker-prefix-cls}-content { - height: 56px; - } - } - - // ======================== Footer ======================== - &-footer { - width: min-content; - min-width: 100%; - line-height: @picker-text-height - 2 * @border-width-base; - text-align: 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; - } - - &-extra { - padding: 0 @padding-sm; - line-height: @picker-text-height - 2 * @border-width-base; - text-align: left; - - &:not(:last-child) { - border-bottom: @border-width-base @border-style-base @picker-border-color; - } - } - } - - &-now { - text-align: left; - } - - &-today-btn { - color: @link-color; - - &:hover { - color: @link-hover-color; - } - - &:active { - color: @link-active-color; - } - - &&-disabled { - color: @disabled-color; - cursor: not-allowed; - } - } - - // ======================================================== - // = 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: 0 @padding-xs; - } - - .@{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-xs @padding-sm; - } - - // 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 { - background: @picker-basic-cell-hover-color; - } - - &-selected td, - &-selected:hover td { - background: @primary-color; - - &.@{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; - } - } - } - } - - // ====================== Date Panel ====================== - &-date-panel { - .@{picker-prefix-cls}-body { - padding: @padding-xs @padding-sm; - } - - .@{picker-prefix-cls}-content { - width: @picker-panel-cell-width * 7; - - th { - width: @picker-panel-cell-width; - } - } - } - - // ==================== 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; - } - } - } - } - - // ====================== 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: @picker-time-panel-column-width; - margin: 0; - padding: 0; - overflow-y: hidden; - text-align: left; - list-style: none; - transition: background @animation-duration-slow; - - &::after { - display: block; - height: @picker-time-panel-column-height - @picker-time-panel-cell-height; - content: ''; - .@{picker-prefix-cls}-datetime-panel & { - height: @picker-time-panel-column-height - @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; - padding: 0; - - &.@{picker-prefix-cls}-time-panel-cell { - .@{picker-prefix-cls}-time-panel-cell-inner { - display: block; - width: 100%; - height: @picker-time-panel-cell-height; - margin: 0; - padding: 0 0 0 ((@picker-time-panel-column-width - 28px) / 2); - color: @text-color; - line-height: @picker-time-panel-cell-height; - border-radius: 0; - cursor: pointer; - transition: background @animation-duration-slow; - - &:hover { - background: @item-hover-bg; - } - } - - &-selected { - .@{picker-prefix-cls}-time-panel-cell-inner { - background: @calendar-item-active-bg; - } - } - - &-disabled { - .@{picker-prefix-cls}-time-panel-cell-inner { - color: @disabled-color; - background: transparent; - cursor: not-allowed; - } - } - } - } - } - } -} - -// 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 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; - } - } -} diff --git a/components/date-picker/style/rtl.less b/components/date-picker/style/rtl.less deleted file mode 100644 index 3a74800e9..000000000 --- a/components/date-picker/style/rtl.less +++ /dev/null @@ -1,246 +0,0 @@ -.@{picker-prefix-cls} { - &-rtl { - direction: rtl; - } - - &-suffix { - .@{picker-prefix-cls}-rtl & { - margin-right: (@padding-xs / 2); - margin-left: 0; - } - } - - &-clear { - .@{picker-prefix-cls}-rtl & { - right: auto; - left: 0; - } - } - - &-separator { - .@{picker-prefix-cls}-rtl & { - transform: rotate(180deg); - } - } - - &-header { - &-view { - button { - &:not(:first-child) { - .@{picker-prefix-cls}-panel-rtl & { - margin-right: @padding-xs; - margin-left: 0; - } - } - } - } - } - - // ======================== Range ========================= - &-range { - // Clear - .@{picker-prefix-cls}-clear { - .@{picker-prefix-cls}-rtl& { - right: auto; - left: @input-padding-horizontal-base; - } - } - - // Active bar - .@{picker-prefix-cls}-active-bar { - .@{picker-prefix-cls}-rtl& { - margin-right: @input-padding-horizontal-base; - margin-left: 0; - } - } - - &.@{picker-prefix-cls}-small { - .@{picker-prefix-cls}-active-bar { - .@{picker-prefix-cls}-rtl& { - margin-right: @input-padding-horizontal-sm; - } - } - } - } - - // ======================== Ranges ======================== - &-ranges { - .@{picker-prefix-cls}-dropdown-rtl & { - text-align: right; - } - - .@{picker-prefix-cls}-ok { - .@{picker-prefix-cls}-dropdown-rtl & { - float: left; - margin-right: @padding-xs; - margin-left: 0; - } - } - } - - // ======================== Panel ======================== - &-panel { - &-rtl { - direction: rtl; - } - } - - &-prev-icon, - &-super-prev-icon { - .@{picker-prefix-cls}-panel-rtl & { - transform: rotate(135deg); - } - } - - &-next-icon, - &-super-next-icon { - .@{picker-prefix-cls}-panel-rtl & { - transform: rotate(-45deg); - } - } - - &-cell { - .picker-cell-inner(~'@{picker-cell-inner-cls}'); - } - - // ======================== Body ========================== - .picker-cell-inner(@cellClassName) { - .@{cellClassName} { - position: relative; - z-index: 2; - display: inline-block; - min-width: @picker-panel-cell-height; - height: @picker-panel-cell-height; - line-height: @picker-panel-cell-height; - border-radius: @border-radius-base; - transition: background @animation-duration-slow, border @animation-duration-slow; - } - - &-in-view&-range-start::before { - .@{picker-prefix-cls}-panel-rtl & { - right: 50%; - left: 0; - } - } - - &-in-view&-range-end::before { - .@{picker-prefix-cls}-panel-rtl & { - right: 0; - left: 50%; - } - } - - &-in-view&-range-start&-range-end::before { - .@{picker-prefix-cls}-panel-rtl & { - right: 50%; - left: 50%; - } - } - - .@{picker-prefix-cls}-date-panel - &-in-view&-in-range&-range-hover-start - .@{cellClassName}::after { - .@{picker-prefix-cls}-panel-rtl & { - right: 0; - left: -5px - @border-width-base; - } - } - - .@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-end .@{cellClassName}::after { - .@{picker-prefix-cls}-panel-rtl & { - right: -5px - @border-width-base; - left: 0; - } - } - - // Hover with range start & end - &-range-hover&-range-start::after { - .@{picker-prefix-cls}-panel-rtl & { - right: 0; - left: 50%; - } - } - - &-range-hover&-range-end::after { - .@{picker-prefix-cls}-panel-rtl & { - right: 50%; - left: 0; - } - } - - // range start border-radius - &-in-view&-range-start:not(&-range-start-single):not(&-range-end) .@{cellClassName} { - .@{picker-prefix-cls}-panel-rtl & { - border-radius: 0 @border-radius-base @border-radius-base 0; - } - } - - // range end border-radius - &-in-view&-range-end:not(&-range-end-single):not(&-range-start) .@{cellClassName} { - .@{picker-prefix-cls}-panel-rtl & { - border-radius: @border-radius-base 0 0 @border-radius-base; - } - } - - // Edge start - tr > &-in-view&-range-hover:not(&-selected):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 { - .@{picker-prefix-cls}-panel-rtl & { - right: 6px; - left: 0; - border-right: @border-width-base dashed @picker-date-hover-range-border-color; - border-left: none; - border-radius: 0 @border-radius-base @border-radius-base 0; - } - } - - // Edge end - tr > &-in-view&-range-hover:not(&-selected):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 { - .@{picker-prefix-cls}-panel-rtl & { - right: 0; - left: 6px; - border-right: none; - border-left: @border-width-base dashed @picker-date-hover-range-border-color; - border-radius: @border-radius-base 0 0 @border-radius-base; - } - } - - tr > &-in-view&-range-hover-start:last-child::after, - tr > &-in-view&-range-hover-end:first-child::after, - &-in-view&-start&-range-hover-edge-start:not(&-range-hover)::after, - &-in-view&-start&-range-hover-end&-range-hover-edge-start:not(&-range-hover)::after, - &-in-view&-end&-range-hover-start&-range-hover-edge-end:not(&-range-hover)::after, - tr > &-in-view&-start&-range-hover&-range-hover-edge-start:last-child::after, - tr > &-in-view&-end&-range-hover&-range-hover-edge-end:first-child::after { - .@{picker-prefix-cls}-panel-rtl & { - right: 6px; - left: 6px; - border-right: @border-width-base dashed @picker-date-hover-range-border-color; - border-left: @border-width-base dashed @picker-date-hover-range-border-color; - border-radius: @border-radius-base; - } - } - } - - // ======================== Footer ======================== - &-footer { - &-extra { - .@{picker-prefix-cls}-dropdown-rtl & { - direction: rtl; - text-align: right; - } - } - } - - // ====================== Time Panel ====================== - &-time-panel { - .@{picker-prefix-cls}-panel-rtl & { - direction: ltr; - } - } -} diff --git a/components/date-picker/style/status.less b/components/date-picker/style/status.less deleted file mode 100644 index 4087bf5cf..000000000 --- a/components/date-picker/style/status.less +++ /dev/null @@ -1,34 +0,0 @@ -@import '../../input/style/mixin'; - -@picker-prefix-cls: ~'@{ant-prefix}-picker'; - -.picker-status-color( - @text-color: @input-color; - @border-color: @input-border-color; - @background-color: @input-bg; - @hoverBorderColor: @primary-color-hover; - @outlineColor: @primary-color-outline; -) { - &.@{picker-prefix-cls} { - &, - &:not([disabled]):hover { - background-color: @background-color; - border-color: @border-color; - } - - &-focused, - &:focus { - .active(@text-color, @hoverBorderColor, @outlineColor); - } - } -} - -.@{picker-prefix-cls} { - &-status-error { - .picker-status-color(@error-color, @error-color, @input-bg, @error-color-hover, @error-color-outline); - } - - &-status-warning { - .picker-status-color(@warning-color, @warning-color, @input-bg, @warning-color-hover, @warning-color-outline); - } -} diff --git a/components/style.ts b/components/style.ts index f71c8cfbc..6693d82d4 100644 --- a/components/style.ts +++ b/components/style.ts @@ -35,7 +35,7 @@ import './time-picker/style'; import './steps/style'; // import './breadcrumb/style'; import './calendar/style'; -import './date-picker/style'; +// import './date-picker/style'; import './slider/style'; import './table/style'; // import './progress/style'; diff --git a/components/theme/interface/components.ts b/components/theme/interface/components.ts index 42c617e84..78ce85091 100644 --- a/components/theme/interface/components.ts +++ b/components/theme/interface/components.ts @@ -10,7 +10,7 @@ import type { ComponentToken as ButtonComponentToken } from '../../button/style' // import type { ComponentToken as CascaderComponentToken } from '../../cascader/style'; // import type { ComponentToken as CheckboxComponentToken } from '../../checkbox/style'; // import type { ComponentToken as CollapseComponentToken } from '../../collapse/style'; -// import type { ComponentToken as DatePickerComponentToken } from '../../date-picker/style'; +import type { ComponentToken as DatePickerComponentToken } from '../../date-picker/style'; import type { ComponentToken as DividerComponentToken } from '../../divider/style'; import type { ComponentToken as DropdownComponentToken } from '../../dropdown/style'; // import type { ComponentToken as DrawerComponentToken } from '../../drawer/style'; @@ -65,7 +65,7 @@ export interface ComponentTokenMap { // Checkbox?: CheckboxComponentToken; // Collapse?: CollapseComponentToken; Comment?: {}; - // DatePicker?: DatePickerComponentToken; + DatePicker?: DatePickerComponentToken; Descriptions?: {}; Divider?: DividerComponentToken; // Drawer?: DrawerComponentToken;