mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 17:44:35 +08:00
fix: picker motion
This commit is contained in:
二货机器人
parent
d71c7116f4
commit
3da377036f
@ -7,7 +7,14 @@ import {
|
|||||||
genHoverStyle,
|
genHoverStyle,
|
||||||
initInputToken,
|
initInputToken,
|
||||||
} from '../../input/style';
|
} from '../../input/style';
|
||||||
import { slideDownIn, slideDownOut, slideUpIn, slideUpOut } from '../../style/motion';
|
import {
|
||||||
|
initSlideMotion,
|
||||||
|
initMoveMotion,
|
||||||
|
slideDownIn,
|
||||||
|
slideDownOut,
|
||||||
|
slideUpIn,
|
||||||
|
slideUpOut,
|
||||||
|
} from '../../style/motion';
|
||||||
import type { FullToken, GenerateStyle } from '../../theme';
|
import type { FullToken, GenerateStyle } from '../../theme';
|
||||||
import { genComponentStyleHook, mergeToken } from '../../theme';
|
import { genComponentStyleHook, mergeToken } from '../../theme';
|
||||||
import type { GlobalToken } from '../../theme/interface';
|
import type { GlobalToken } from '../../theme/interface';
|
||||||
@ -848,7 +855,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
|
|||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
const genPickerStatusStyle: GenerateStyle<PickerToken> = token => {
|
const genPickerStatusStyle: GenerateStyle<PickerToken> = (token) => {
|
||||||
const {
|
const {
|
||||||
componentCls,
|
componentCls,
|
||||||
colorBgContainer,
|
colorBgContainer,
|
||||||
@ -905,7 +912,7 @@ const genPickerStatusStyle: GenerateStyle<PickerToken> = token => {
|
|||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
const genPickerStyle: GenerateStyle<PickerToken> = token => {
|
const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
|
||||||
const {
|
const {
|
||||||
componentCls,
|
componentCls,
|
||||||
antCls,
|
antCls,
|
||||||
@ -952,428 +959,436 @@ const genPickerStyle: GenerateStyle<PickerToken> = token => {
|
|||||||
presetsMaxWidth,
|
presetsMaxWidth,
|
||||||
} = token;
|
} = token;
|
||||||
|
|
||||||
return {
|
return [
|
||||||
[componentCls]: {
|
{
|
||||||
...resetComponent(token),
|
[componentCls]: {
|
||||||
...genPikerPadding(token, controlHeight, fontSize, inputPaddingHorizontal),
|
...resetComponent(token),
|
||||||
position: 'relative',
|
...genPikerPadding(token, controlHeight, fontSize, inputPaddingHorizontal),
|
||||||
display: 'inline-flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
background: colorBgContainer,
|
|
||||||
border: `${lineWidth}px ${lineType} ${colorBorder}`,
|
|
||||||
borderRadius,
|
|
||||||
transition: `border ${motionDurationFast}, box-shadow ${motionDurationFast}`,
|
|
||||||
|
|
||||||
// Space.Compact
|
|
||||||
...genCompactItemStyle(token, componentCls, '', `${componentCls}-focused`),
|
|
||||||
|
|
||||||
'&:hover, &-focused': {
|
|
||||||
...genHoverStyle(token),
|
|
||||||
},
|
|
||||||
|
|
||||||
'&-focused': {
|
|
||||||
...genActiveStyle(token),
|
|
||||||
},
|
|
||||||
|
|
||||||
'&&-disabled': {
|
|
||||||
background: colorBgContainerDisabled,
|
|
||||||
borderColor: colorBorder,
|
|
||||||
cursor: 'not-allowed',
|
|
||||||
|
|
||||||
[`${componentCls}-suffix`]: {
|
|
||||||
color: colorTextDisabled,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
'&&-borderless': {
|
|
||||||
backgroundColor: 'transparent !important',
|
|
||||||
borderColor: 'transparent !important',
|
|
||||||
boxShadow: 'none !important',
|
|
||||||
},
|
|
||||||
|
|
||||||
// ======================== Input =========================
|
|
||||||
[`${componentCls}-input`]: {
|
|
||||||
position: 'relative',
|
position: 'relative',
|
||||||
display: 'inline-flex',
|
display: 'inline-flex',
|
||||||
alignItems: 'center',
|
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,
|
background: colorBgContainer,
|
||||||
transform: 'translateY(-50%)',
|
border: `${lineWidth}px ${lineType} ${colorBorder}`,
|
||||||
cursor: 'pointer',
|
borderRadius,
|
||||||
opacity: 0,
|
transition: `border ${motionDurationFast}, box-shadow ${motionDurationFast}`,
|
||||||
transition: `opacity ${motionDurationFast}, color ${motionDurationFast}`,
|
|
||||||
|
|
||||||
'> *': {
|
// Space.Compact
|
||||||
verticalAlign: 'top',
|
...genCompactItemStyle(token, componentCls, '', `${componentCls}-focused`),
|
||||||
|
|
||||||
|
'&:hover, &-focused': {
|
||||||
|
...genHoverStyle(token),
|
||||||
},
|
},
|
||||||
|
|
||||||
'&:hover': {
|
'&-focused': {
|
||||||
color: colorTextDescription,
|
...genActiveStyle(token),
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
[`${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 &`]: {
|
'&&-disabled': {
|
||||||
[`${componentCls}-disabled &`]: {
|
background: colorBgContainerDisabled,
|
||||||
cursor: 'not-allowed',
|
borderColor: colorBorder,
|
||||||
},
|
cursor: 'not-allowed',
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
// ======================== Range =========================
|
[`${componentCls}-suffix`]: {
|
||||||
'&-range': {
|
color: colorTextDisabled,
|
||||||
position: 'relative',
|
|
||||||
display: 'inline-flex',
|
|
||||||
|
|
||||||
// Clear
|
|
||||||
[`${componentCls}-clear`]: {
|
|
||||||
insetInlineEnd: inputPaddingHorizontal,
|
|
||||||
},
|
|
||||||
|
|
||||||
'&:hover': {
|
|
||||||
[`${componentCls}-clear`]: {
|
|
||||||
opacity: 1,
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
// Active bar
|
'&&-borderless': {
|
||||||
[`${componentCls}-active-bar`]: {
|
backgroundColor: 'transparent !important',
|
||||||
bottom: -lineWidth,
|
borderColor: 'transparent !important',
|
||||||
height: lineWidthBold,
|
boxShadow: 'none !important',
|
||||||
marginInlineStart: inputPaddingHorizontal,
|
|
||||||
background: colorPrimary,
|
|
||||||
opacity: 0,
|
|
||||||
transition: `all ${motionDurationSlow} ease-out`,
|
|
||||||
pointerEvents: 'none',
|
|
||||||
},
|
},
|
||||||
|
|
||||||
[`&${componentCls}-focused`]: {
|
// ======================== Input =========================
|
||||||
[`${componentCls}-active-bar`]: {
|
[`${componentCls}-input`]: {
|
||||||
opacity: 1,
|
position: 'relative',
|
||||||
},
|
display: 'inline-flex',
|
||||||
},
|
|
||||||
|
|
||||||
[`${componentCls}-range-separator`]: {
|
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
padding: `0 ${paddingXS}px`,
|
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,
|
lineHeight: 1,
|
||||||
|
pointerEvents: 'none',
|
||||||
|
|
||||||
|
'> *': {
|
||||||
|
verticalAlign: 'top',
|
||||||
|
|
||||||
|
'&:not(:last-child)': {
|
||||||
|
marginInlineEnd: marginXS,
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
[`&${componentCls}-small`]: {
|
[`${componentCls}-clear`]: {
|
||||||
|
position: 'absolute',
|
||||||
|
top: '50%',
|
||||||
|
insetInlineEnd: 0,
|
||||||
|
color: colorTextDisabled,
|
||||||
|
lineHeight: 1,
|
||||||
|
background: colorBgContainer,
|
||||||
|
transform: 'translateY(-50%)',
|
||||||
|
cursor: 'pointer',
|
||||||
|
opacity: 0,
|
||||||
|
transition: `opacity ${motionDurationFast}, color ${motionDurationFast}`,
|
||||||
|
|
||||||
|
'> *': {
|
||||||
|
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`]: {
|
[`${componentCls}-clear`]: {
|
||||||
insetInlineEnd: inputPaddingHorizontalSM,
|
insetInlineEnd: inputPaddingHorizontal,
|
||||||
},
|
},
|
||||||
|
|
||||||
|
'&:hover': {
|
||||||
|
[`${componentCls}-clear`]: {
|
||||||
|
opacity: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
// Active bar
|
||||||
[`${componentCls}-active-bar`]: {
|
[`${componentCls}-active-bar`]: {
|
||||||
marginInlineStart: inputPaddingHorizontalSM,
|
bottom: -lineWidth,
|
||||||
|
height: lineWidthBold,
|
||||||
|
marginInlineStart: inputPaddingHorizontal,
|
||||||
|
background: colorPrimary,
|
||||||
|
opacity: 0,
|
||||||
|
transition: `all ${motionDurationSlow} ease-out`,
|
||||||
|
pointerEvents: 'none',
|
||||||
},
|
},
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
// ======================= Dropdown =======================
|
[`&${componentCls}-focused`]: {
|
||||||
'&-dropdown': {
|
[`${componentCls}-active-bar`]: {
|
||||||
...resetComponent(token),
|
opacity: 1,
|
||||||
...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,
|
|
||||||
|
|
||||||
'&&-hidden': {
|
[`${componentCls}-range-separator`]: {
|
||||||
display: 'none',
|
alignItems: 'center',
|
||||||
},
|
padding: `0 ${paddingXS}px`,
|
||||||
|
lineHeight: 1,
|
||||||
|
},
|
||||||
|
|
||||||
'&&-placement-bottomLeft': {
|
[`&${componentCls}-small`]: {
|
||||||
[`${componentCls}-range-arrow`]: {
|
[`${componentCls}-clear`]: {
|
||||||
top: 0,
|
insetInlineEnd: inputPaddingHorizontalSM,
|
||||||
display: 'block',
|
},
|
||||||
transform: 'translateY(-100%)',
|
|
||||||
|
[`${componentCls}-active-bar`]: {
|
||||||
|
marginInlineStart: inputPaddingHorizontalSM,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
'&&-placement-topLeft': {
|
// ======================= Dropdown =======================
|
||||||
[`${componentCls}-range-arrow`]: {
|
'&-dropdown': {
|
||||||
bottom: 0,
|
...resetComponent(token),
|
||||||
display: 'block',
|
...genPanelStyle(token),
|
||||||
transform: 'translateY(100%) rotate(180deg)',
|
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,
|
||||||
|
|
||||||
[`&${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-topLeft,
|
'&&-hidden': {
|
||||||
|
display: 'none',
|
||||||
|
},
|
||||||
|
|
||||||
|
'&&-placement-bottomLeft': {
|
||||||
|
[`${componentCls}-range-arrow`]: {
|
||||||
|
top: 0,
|
||||||
|
display: 'block',
|
||||||
|
transform: 'translateY(-100%)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
'&&-placement-topLeft': {
|
||||||
|
[`${componentCls}-range-arrow`]: {
|
||||||
|
bottom: 0,
|
||||||
|
display: 'block',
|
||||||
|
transform: 'translateY(100%) rotate(180deg)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
[`&${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-topLeft,
|
||||||
&${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-topRight,
|
&${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-topRight,
|
||||||
&${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-topLeft,
|
&${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-topLeft,
|
||||||
&${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-topRight`]: {
|
&${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-topRight`]: {
|
||||||
animationName: slideDownIn,
|
animationName: slideDownIn,
|
||||||
},
|
},
|
||||||
|
|
||||||
[`&${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-bottomLeft,
|
[`&${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-bottomLeft,
|
||||||
&${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-bottomRight,
|
&${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-bottomRight,
|
||||||
&${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-bottomLeft,
|
&${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-bottomLeft,
|
||||||
&${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-bottomRight`]: {
|
&${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-bottomRight`]: {
|
||||||
animationName: slideUpIn,
|
animationName: slideUpIn,
|
||||||
},
|
},
|
||||||
|
|
||||||
[`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-topLeft,
|
[`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-topLeft,
|
||||||
&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-topRight`]: {
|
&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-topRight`]: {
|
||||||
animationName: slideDownOut,
|
animationName: slideDownOut,
|
||||||
},
|
},
|
||||||
|
|
||||||
[`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-bottomLeft,
|
[`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-bottomLeft,
|
||||||
&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-bottomRight`]: {
|
&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-bottomRight`]: {
|
||||||
animationName: slideUpOut,
|
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
|
// Time picker with additional style
|
||||||
[`${componentCls}-preset > ${antCls}-tag-blue`]: {
|
[`${componentCls}-panel > ${componentCls}-time-panel`]: {
|
||||||
color: colorPrimary,
|
paddingTop: paddingXXS,
|
||||||
background: controlItemBgActive,
|
|
||||||
borderColor: colorPrimaryBorder,
|
|
||||||
cursor: 'pointer',
|
|
||||||
},
|
},
|
||||||
|
|
||||||
[`${componentCls}-ok`]: {
|
// ======================== Ranges ========================
|
||||||
marginInlineStart: 'auto',
|
[`${componentCls}-ranges`]: {
|
||||||
},
|
marginBottom: 0,
|
||||||
},
|
padding: `${paddingXXS}px ${paddingSM}px`,
|
||||||
|
overflow: 'hidden',
|
||||||
[`${componentCls}-range-wrapper`]: {
|
lineHeight: `${pickerTextHeight - 2 * lineWidth - paddingXS / 2}px`,
|
||||||
display: 'flex',
|
textAlign: 'start',
|
||||||
position: 'relative',
|
listStyle: 'none',
|
||||||
},
|
|
||||||
|
|
||||||
[`${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',
|
display: 'flex',
|
||||||
flexWrap: 'nowrap',
|
justifyContent: 'space-between',
|
||||||
alignItems: 'stretch',
|
|
||||||
},
|
|
||||||
|
|
||||||
// ======================== Preset ========================
|
'> li': {
|
||||||
[`${componentCls}-presets`]: {
|
display: 'inline-block',
|
||||||
display: 'flex',
|
},
|
||||||
flexDirection: 'column',
|
|
||||||
minWidth: presetsWidth,
|
|
||||||
maxWidth: presetsMaxWidth,
|
|
||||||
|
|
||||||
ul: {
|
// https://github.com/ant-design/ant-design/issues/23687
|
||||||
height: 0,
|
[`${componentCls}-preset > ${antCls}-tag-blue`]: {
|
||||||
flex: 'auto',
|
color: colorPrimary,
|
||||||
listStyle: 'none',
|
background: controlItemBgActive,
|
||||||
overflow: 'auto',
|
borderColor: colorPrimaryBorder,
|
||||||
margin: 0,
|
cursor: 'pointer',
|
||||||
padding: paddingXS,
|
},
|
||||||
borderInlineEnd: `${lineWidth}px ${lineType} ${colorSplit}`,
|
|
||||||
|
|
||||||
li: {
|
[`${componentCls}-ok`]: {
|
||||||
...textEllipsis,
|
marginInlineStart: 'auto',
|
||||||
borderRadius: borderRadiusSM,
|
|
||||||
paddingInline: paddingXS,
|
|
||||||
paddingBlock: (controlHeightSM - Math.round(fontSize * lineHeight)) / 2,
|
|
||||||
cursor: 'pointer',
|
|
||||||
transition: `all ${motionDurationSlow}`,
|
|
||||||
|
|
||||||
'+ li': {
|
|
||||||
marginTop: marginXS,
|
|
||||||
},
|
|
||||||
|
|
||||||
'&:hover': {
|
|
||||||
background: controlItemBgHover,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
// ======================== Panels ========================
|
[`${componentCls}-range-wrapper`]: {
|
||||||
[`${componentCls}-panels`]: {
|
display: 'flex',
|
||||||
display: 'inline-flex',
|
position: 'relative',
|
||||||
flexWrap: 'nowrap',
|
},
|
||||||
direction: 'ltr',
|
|
||||||
|
[`${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`]: {
|
[`${componentCls}-panel`]: {
|
||||||
borderWidth: `0 0 ${lineWidth}px`,
|
verticalAlign: 'top',
|
||||||
},
|
background: 'transparent',
|
||||||
|
borderRadius: 0,
|
||||||
|
borderWidth: 0,
|
||||||
|
|
||||||
'&:last-child': {
|
[`${componentCls}-content,
|
||||||
[`${componentCls}-panel`]: {
|
table`]: {
|
||||||
borderWidth: 0,
|
textAlign: 'center',
|
||||||
|
},
|
||||||
|
|
||||||
|
'&-focused': {
|
||||||
|
borderColor: colorBorder,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
},
|
||||||
|
|
||||||
[`${componentCls}-panel`]: {
|
'&-dropdown-range': {
|
||||||
verticalAlign: 'top',
|
padding: `${(sizePopupArrow * 2) / 3}px 0`,
|
||||||
background: 'transparent',
|
|
||||||
borderRadius: 0,
|
|
||||||
borderWidth: 0,
|
|
||||||
|
|
||||||
[`${componentCls}-content,
|
'&-hidden': {
|
||||||
table`]: {
|
display: 'none',
|
||||||
textAlign: 'center',
|
|
||||||
},
|
|
||||||
|
|
||||||
'&-focused': {
|
|
||||||
borderColor: colorBorder,
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
|
||||||
|
|
||||||
'&-dropdown-range': {
|
'&-rtl': {
|
||||||
padding: `${(sizePopupArrow * 2) / 3}px 0`,
|
direction: 'rtl',
|
||||||
|
|
||||||
'&-hidden': {
|
[`${componentCls}-separator`]: {
|
||||||
display: 'none',
|
transform: 'rotate(180deg)',
|
||||||
},
|
},
|
||||||
},
|
|
||||||
|
|
||||||
'&-rtl': {
|
[`${componentCls}-footer`]: {
|
||||||
direction: 'rtl',
|
'&-extra': {
|
||||||
|
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<GlobalToken>): PickerPanelToken => {
|
export const initPickerPanelToken = (token: TokenWithCommonCls<GlobalToken>): PickerPanelToken => {
|
||||||
@ -1403,14 +1418,14 @@ export const initPickerPanelToken = (token: TokenWithCommonCls<GlobalToken>): Pi
|
|||||||
// ============================== Export ==============================
|
// ============================== Export ==============================
|
||||||
export default genComponentStyleHook(
|
export default genComponentStyleHook(
|
||||||
'DatePicker',
|
'DatePicker',
|
||||||
token => {
|
(token) => {
|
||||||
const pickerToken = mergeToken<PickerToken>(
|
const pickerToken = mergeToken<PickerToken>(
|
||||||
initInputToken<FullToken<'DatePicker'>>(token),
|
initInputToken<FullToken<'DatePicker'>>(token),
|
||||||
initPickerPanelToken(token),
|
initPickerPanelToken(token),
|
||||||
);
|
);
|
||||||
return [genPickerStyle(pickerToken), genPickerStatusStyle(pickerToken)];
|
return [genPickerStyle(pickerToken), genPickerStatusStyle(pickerToken)];
|
||||||
},
|
},
|
||||||
token => ({
|
(token) => ({
|
||||||
presetsWidth: 120,
|
presetsWidth: 120,
|
||||||
presetsMaxWidth: 200,
|
presetsMaxWidth: 200,
|
||||||
zIndexPopup: token.zIndexPopupBase + 50,
|
zIndexPopup: token.zIndexPopupBase + 50,
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user