mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 06:03:38 +08:00
feat: change transiton to mid duration (#38648)
This commit is contained in:
MadCcc
GitHub
parent
35af9b180b
commit
0162d2e2d8
@ -178,7 +178,7 @@ export const genActionStyle: GenerateStyle<AlertToken> = (token: AlertToken): CS
|
||||
const {
|
||||
componentCls,
|
||||
iconCls,
|
||||
motionDurationFast,
|
||||
motionDurationMid,
|
||||
marginXS,
|
||||
fontSizeIcon,
|
||||
colorIcon,
|
||||
@ -204,7 +204,7 @@ export const genActionStyle: GenerateStyle<AlertToken> = (token: AlertToken): CS
|
||||
|
||||
[`${iconCls}-close`]: {
|
||||
color: colorIcon,
|
||||
transition: `color ${motionDurationFast}`,
|
||||
transition: `color ${motionDurationMid}`,
|
||||
'&:hover': {
|
||||
color: colorIconHover,
|
||||
},
|
||||
@ -213,7 +213,7 @@ export const genActionStyle: GenerateStyle<AlertToken> = (token: AlertToken): CS
|
||||
|
||||
'&-close-text': {
|
||||
color: colorIcon,
|
||||
transition: `color ${motionDurationFast}`,
|
||||
transition: `color ${motionDurationMid}`,
|
||||
'&:hover': {
|
||||
color: colorIconHover,
|
||||
},
|
||||
@ -228,7 +228,7 @@ export const genAlertStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSS
|
||||
genActionStyle(token),
|
||||
];
|
||||
|
||||
export default genComponentStyleHook('Alert', token => {
|
||||
export default genComponentStyleHook('Alert', (token) => {
|
||||
const { fontSizeHeading3 } = token;
|
||||
|
||||
const alertToken = mergeToken<AlertToken>(token, {
|
||||
|
||||
@ -50,11 +50,11 @@ const genSharedBackTopStyle: GenerateStyle<BackTopToken, CSSObject> = (token): C
|
||||
textAlign: 'center',
|
||||
backgroundColor: token.backTopBackground,
|
||||
borderRadius: backTopSize,
|
||||
transition: `all ${token.motionDurationFast}`,
|
||||
transition: `all ${token.motionDurationMid}`,
|
||||
|
||||
'&:hover': {
|
||||
backgroundColor: token.backTopHoverBackground,
|
||||
transition: `all ${token.motionDurationFast}`,
|
||||
transition: `all ${token.motionDurationMid}`,
|
||||
},
|
||||
},
|
||||
|
||||
@ -89,7 +89,7 @@ const genMediaBackTopStyle: GenerateStyle<BackTopToken> = (token): CSSObject =>
|
||||
export default genComponentStyleHook<'BackTop'>(
|
||||
'BackTop',
|
||||
|
||||
token => {
|
||||
(token) => {
|
||||
const {
|
||||
fontSizeHeading3,
|
||||
colorTextDescription,
|
||||
@ -112,7 +112,7 @@ export default genComponentStyleHook<'BackTop'>(
|
||||
});
|
||||
return [genSharedBackTopStyle(backTopToken), genMediaBackTopStyle(backTopToken)];
|
||||
},
|
||||
token => ({
|
||||
(token) => ({
|
||||
zIndexPopup: token.zIndexBase + 10,
|
||||
}),
|
||||
);
|
||||
|
||||
@ -116,7 +116,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
|
||||
background: token.badgeColor,
|
||||
borderRadius: token.badgeHeight / 2,
|
||||
boxShadow: `0 0 0 ${badgeShadowSize}px ${token.badgeShadowColor}`,
|
||||
transition: `background ${token.motionDurationFast}`,
|
||||
transition: `background ${token.motionDurationMid}`,
|
||||
|
||||
a: {
|
||||
color: token.badgeTextColor,
|
||||
@ -161,7 +161,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
|
||||
transformOrigin: '100% 0%',
|
||||
[`${iconCls}-spin`]: {
|
||||
animationName: antBadgeLoadingCircle,
|
||||
animationDuration: token.motionDurationFast,
|
||||
animationDuration: token.motionDurationMid,
|
||||
animationIterationCount: 'infinite',
|
||||
animationTimingFunction: 'linear',
|
||||
},
|
||||
@ -323,7 +323,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook('Badge', token => {
|
||||
export default genComponentStyleHook('Badge', (token) => {
|
||||
const { fontSize, lineHeight, fontSizeSM, lineWidth, marginXS, colorBorderBg } = token;
|
||||
|
||||
const badgeFontHeight = Math.round(fontSize * lineHeight);
|
||||
|
||||
@ -14,7 +14,7 @@ interface BreadcrumbToken extends FullToken<'Breadcrumb'> {
|
||||
breadcrumbSeparatorColor: string;
|
||||
}
|
||||
|
||||
const genBreadcrumbStyle: GenerateStyle<BreadcrumbToken, CSSObject> = token => {
|
||||
const genBreadcrumbStyle: GenerateStyle<BreadcrumbToken, CSSObject> = (token) => {
|
||||
const { componentCls, iconCls } = token;
|
||||
|
||||
return {
|
||||
@ -37,7 +37,7 @@ const genBreadcrumbStyle: GenerateStyle<BreadcrumbToken, CSSObject> = token => {
|
||||
|
||||
a: {
|
||||
color: token.breadcrumbLinkColor,
|
||||
transition: `color ${token.motionDurationFast}`,
|
||||
transition: `color ${token.motionDurationMid}`,
|
||||
padding: `0 ${token.paddingXXS}px`,
|
||||
borderRadius: token.borderRadiusSM,
|
||||
height: token.lineHeight * token.fontSize,
|
||||
@ -107,7 +107,7 @@ const genBreadcrumbStyle: GenerateStyle<BreadcrumbToken, CSSObject> = token => {
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook('Breadcrumb', token => {
|
||||
export default genComponentStyleHook('Breadcrumb', (token) => {
|
||||
const BreadcrumbToken = mergeToken<BreadcrumbToken>(token, {
|
||||
breadcrumbBaseColor: token.colorTextDescription,
|
||||
breadcrumbFontSize: token.fontSize,
|
||||
|
||||
@ -31,7 +31,7 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
|
||||
backgroundColor: 'transparent',
|
||||
border: `${token.lineWidth}px ${token.lineType} transparent`,
|
||||
cursor: 'pointer',
|
||||
transition: `all ${token.motionDurationFast} ${token.motionEaseInOut}`,
|
||||
transition: `all ${token.motionDurationMid} ${token.motionEaseInOut}`,
|
||||
userSelect: 'none',
|
||||
touchAction: 'manipulation',
|
||||
lineHeight: token.lineHeight,
|
||||
@ -109,14 +109,14 @@ const genHoverActiveButtonStyle = (hoverStyle: CSSObject, activeStyle: CSSObject
|
||||
});
|
||||
|
||||
// ============================== Shape ===============================
|
||||
const genCircleButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
|
||||
const genCircleButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
|
||||
minWidth: token.controlHeight,
|
||||
paddingInlineStart: 0,
|
||||
paddingInlineEnd: 0,
|
||||
borderRadius: '50%',
|
||||
});
|
||||
|
||||
const genRoundButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
|
||||
const genRoundButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
|
||||
borderRadius: token.controlHeight,
|
||||
paddingInlineStart: token.controlHeight / 2,
|
||||
paddingInlineEnd: token.controlHeight / 2,
|
||||
@ -158,7 +158,7 @@ const genGhostButtonStyle = (
|
||||
},
|
||||
});
|
||||
|
||||
const genSolidDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
|
||||
const genSolidDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
|
||||
'&:disabled': {
|
||||
cursor: 'not-allowed',
|
||||
borderColor: token.colorBorder,
|
||||
@ -168,11 +168,11 @@ const genSolidDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token
|
||||
},
|
||||
});
|
||||
|
||||
const genSolidButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
|
||||
const genSolidButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
|
||||
...genSolidDisabledButtonStyle(token),
|
||||
});
|
||||
|
||||
const genPureDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
|
||||
const genPureDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
|
||||
'&:disabled': {
|
||||
cursor: 'not-allowed',
|
||||
color: token.colorTextDisabled,
|
||||
@ -180,7 +180,7 @@ const genPureDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token
|
||||
});
|
||||
|
||||
// Type: Default
|
||||
const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
|
||||
const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
|
||||
...genSolidButtonStyle(token),
|
||||
|
||||
backgroundColor: token.colorBgContainer,
|
||||
@ -234,7 +234,7 @@ const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
|
||||
});
|
||||
|
||||
// Type: Primary
|
||||
const genPrimaryButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
|
||||
const genPrimaryButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
|
||||
...genSolidButtonStyle(token),
|
||||
|
||||
color: token.colorTextLightSolid,
|
||||
@ -302,14 +302,14 @@ const genPrimaryButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
|
||||
});
|
||||
|
||||
// Type: Dashed
|
||||
const genDashedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
|
||||
const genDashedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
|
||||
...genDefaultButtonStyle(token),
|
||||
|
||||
borderStyle: 'dashed',
|
||||
});
|
||||
|
||||
// Type: Link
|
||||
const genLinkButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
|
||||
const genLinkButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
|
||||
color: token.colorLink,
|
||||
|
||||
...genHoverActiveButtonStyle(
|
||||
@ -340,7 +340,7 @@ const genLinkButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
|
||||
});
|
||||
|
||||
// Type: Text
|
||||
const genTextButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
|
||||
const genTextButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
|
||||
...genHoverActiveButtonStyle(
|
||||
{
|
||||
color: token.colorText,
|
||||
@ -371,7 +371,7 @@ const genTextButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
|
||||
},
|
||||
});
|
||||
|
||||
const genTypeButtonStyle: GenerateStyle<ButtonToken> = token => {
|
||||
const genTypeButtonStyle: GenerateStyle<ButtonToken> = (token) => {
|
||||
const { componentCls } = token;
|
||||
|
||||
return {
|
||||
@ -440,9 +440,9 @@ const genSizeButtonStyle = (token: ButtonToken, sizePrefixCls: string = ''): CSS
|
||||
];
|
||||
};
|
||||
|
||||
const genSizeBaseButtonStyle: GenerateStyle<ButtonToken> = token => genSizeButtonStyle(token);
|
||||
const genSizeBaseButtonStyle: GenerateStyle<ButtonToken> = (token) => genSizeButtonStyle(token);
|
||||
|
||||
const genSizeSmallButtonStyle: GenerateStyle<ButtonToken> = token => {
|
||||
const genSizeSmallButtonStyle: GenerateStyle<ButtonToken> = (token) => {
|
||||
const smallToken = mergeToken<ButtonToken>(token, {
|
||||
controlHeight: token.controlHeightSM,
|
||||
padding: token.paddingXS,
|
||||
@ -453,7 +453,7 @@ const genSizeSmallButtonStyle: GenerateStyle<ButtonToken> = token => {
|
||||
return genSizeButtonStyle(smallToken, `${token.componentCls}-sm`);
|
||||
};
|
||||
|
||||
const genSizeLargeButtonStyle: GenerateStyle<ButtonToken> = token => {
|
||||
const genSizeLargeButtonStyle: GenerateStyle<ButtonToken> = (token) => {
|
||||
const largeToken = mergeToken<ButtonToken>(token, {
|
||||
controlHeight: token.controlHeightLG,
|
||||
fontSize: token.fontSizeLG,
|
||||
@ -464,7 +464,7 @@ const genSizeLargeButtonStyle: GenerateStyle<ButtonToken> = token => {
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook('Button', token => {
|
||||
export default genComponentStyleHook('Button', (token) => {
|
||||
const { controlTmpOutline, paddingContentHorizontal } = token;
|
||||
|
||||
const buttonToken = mergeToken<ButtonToken>(token, {
|
||||
|
||||
@ -96,7 +96,7 @@ const genCardGridStyle: GenerateStyle<CardToken> = (token): CSSObject => {
|
||||
${lineWidth}px 0 0 0 ${colorBorderSecondary} inset,
|
||||
0 ${lineWidth}px 0 0 ${colorBorderSecondary} inset;
|
||||
`,
|
||||
transition: `all ${token.motionDurationFast}`,
|
||||
transition: `all ${token.motionDurationMid}`,
|
||||
|
||||
'&-hoverable:hover': {
|
||||
position: 'relative',
|
||||
@ -134,7 +134,7 @@ const genCardActionsStyle: GenerateStyle<CardToken> = (token): CSSObject => {
|
||||
|
||||
'&:hover': {
|
||||
color: token.colorPrimary,
|
||||
transition: `color ${token.motionDurationFast}`,
|
||||
transition: `color ${token.motionDurationMid}`,
|
||||
},
|
||||
|
||||
[`a:not(${componentCls}-btn), > ${iconCls}`]: {
|
||||
@ -142,7 +142,7 @@ const genCardActionsStyle: GenerateStyle<CardToken> = (token): CSSObject => {
|
||||
width: '100%',
|
||||
color: token.colorTextDescription,
|
||||
lineHeight: `${token.fontSize * token.lineHeight}px`,
|
||||
transition: `color ${token.motionDurationFast}`,
|
||||
transition: `color ${token.motionDurationMid}`,
|
||||
|
||||
'&:hover': {
|
||||
color: token.colorPrimary,
|
||||
@ -300,7 +300,7 @@ const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
|
||||
|
||||
[`${componentCls}-hoverable`]: {
|
||||
cursor: 'pointer',
|
||||
transition: `box-shadow ${token.motionDurationFast}, border-color ${token.motionDurationFast}`,
|
||||
transition: `box-shadow ${token.motionDurationMid}, border-color ${token.motionDurationMid}`,
|
||||
|
||||
'&:hover': {
|
||||
borderColor: 'transparent',
|
||||
@ -376,7 +376,7 @@ const genCardSizeStyle: GenerateStyle<CardToken> = (token): CSSObject => {
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook('Card', token => {
|
||||
export default genComponentStyleHook('Card', (token) => {
|
||||
const cardToken = mergeToken<CardToken>(token, {
|
||||
cardShadow: token.boxShadowCard,
|
||||
cardHeaderHeight: token.fontSizeLG * token.lineHeightLG + token.padding * 2,
|
||||
|
||||
@ -13,7 +13,7 @@ export interface ComponentToken {
|
||||
type CascaderToken = FullToken<'Cascader'>;
|
||||
|
||||
// =============================== Base ===============================
|
||||
const genBaseStyle: GenerateStyle<CascaderToken> = token => {
|
||||
const genBaseStyle: GenerateStyle<CascaderToken> = (token) => {
|
||||
const { prefixCls, componentCls, antCls } = token;
|
||||
const cascaderMenuItemCls = `${componentCls}-menu-item`;
|
||||
const iconCls = `
|
||||
@ -99,7 +99,7 @@ const genBaseStyle: GenerateStyle<CascaderToken> = token => {
|
||||
padding: `${itemPaddingVertical}px ${token.paddingSM}px`,
|
||||
lineHeight: token.lineHeight,
|
||||
cursor: 'pointer',
|
||||
transition: `all ${token.motionDurationFast}`,
|
||||
transition: `all ${token.motionDurationMid}`,
|
||||
borderRadius: token.borderRadiusSM,
|
||||
|
||||
'&:hover': {
|
||||
@ -156,7 +156,7 @@ const genBaseStyle: GenerateStyle<CascaderToken> = token => {
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook('Cascader', token => [genBaseStyle(token)], {
|
||||
export default genComponentStyleHook('Cascader', (token) => [genBaseStyle(token)], {
|
||||
controlWidth: 184,
|
||||
controlItemWidth: 111,
|
||||
dropdownHeight: 180,
|
||||
|
||||
@ -75,7 +75,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
|
||||
pickerPanelCellHeight,
|
||||
motionDurationSlow,
|
||||
borderRadiusSM,
|
||||
motionDurationFast,
|
||||
motionDurationMid,
|
||||
controlItemBgHover,
|
||||
lineWidth,
|
||||
lineType,
|
||||
@ -113,7 +113,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
|
||||
height: pickerPanelCellHeight,
|
||||
lineHeight: `${pickerPanelCellHeight}px`,
|
||||
borderRadius: borderRadiusSM,
|
||||
transition: `background ${motionDurationFast}, border ${motionDurationFast}`,
|
||||
transition: `background ${motionDurationMid}, border ${motionDurationMid}`,
|
||||
},
|
||||
|
||||
// >>> Hover
|
||||
@ -300,7 +300,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
|
||||
pickerControlIconBorderWidth,
|
||||
colorIcon,
|
||||
pickerTextHeight,
|
||||
motionDurationFast,
|
||||
motionDurationMid,
|
||||
colorIconHover,
|
||||
fontWeightStrong,
|
||||
pickerPanelCellHeight,
|
||||
@ -394,7 +394,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
|
||||
background: 'transparent',
|
||||
border: 0,
|
||||
cursor: 'pointer',
|
||||
transition: `color ${motionDurationFast}`,
|
||||
transition: `color ${motionDurationMid}`,
|
||||
},
|
||||
|
||||
'> button': {
|
||||
@ -687,7 +687,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
|
||||
|
||||
'&-row': {
|
||||
td: {
|
||||
transition: `background ${motionDurationFast}`,
|
||||
transition: `background ${motionDurationMid}`,
|
||||
|
||||
'&:first-child': {
|
||||
borderStartStartRadius: borderRadiusSM,
|
||||
@ -784,7 +784,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
|
||||
overflowY: 'hidden',
|
||||
textAlign: 'start',
|
||||
listStyle: 'none',
|
||||
transition: `background ${motionDurationFast}`,
|
||||
transition: `background ${motionDurationMid}`,
|
||||
overflowX: 'hidden',
|
||||
|
||||
'&::after': {
|
||||
@ -827,7 +827,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
|
||||
lineHeight: `${pickerTimePanelCellHeight}px`,
|
||||
borderRadius: borderRadiusSM,
|
||||
cursor: 'pointer',
|
||||
transition: `background ${motionDurationFast}`,
|
||||
transition: `background ${motionDurationMid}`,
|
||||
|
||||
'&:hover': {
|
||||
background: controlItemBgHover,
|
||||
@ -925,7 +925,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
|
||||
lineType,
|
||||
colorBorder,
|
||||
borderRadius,
|
||||
motionDurationFast,
|
||||
motionDurationMid,
|
||||
colorBgContainerDisabled,
|
||||
colorTextDisabled,
|
||||
colorTextPlaceholder,
|
||||
@ -970,7 +970,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
|
||||
background: colorBgContainer,
|
||||
border: `${lineWidth}px ${lineType} ${colorBorder}`,
|
||||
borderRadius,
|
||||
transition: `border ${motionDurationFast}, box-shadow ${motionDurationFast}`,
|
||||
transition: `border ${motionDurationMid}, box-shadow ${motionDurationMid}`,
|
||||
|
||||
// Space.Compact
|
||||
...genCompactItemStyle(token, componentCls, '', `${componentCls}-focused`),
|
||||
@ -1081,7 +1081,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
|
||||
transform: 'translateY(-50%)',
|
||||
cursor: 'pointer',
|
||||
opacity: 0,
|
||||
transition: `opacity ${motionDurationFast}, color ${motionDurationFast}`,
|
||||
transition: `opacity ${motionDurationMid}, color ${motionDurationMid}`,
|
||||
|
||||
'> *': {
|
||||
verticalAlign: 'top',
|
||||
|
||||
@ -19,7 +19,7 @@ const genDrawerStyle: GenerateStyle<DrawerToken> = (token: DrawerToken) => {
|
||||
colorBgMask,
|
||||
colorBgElevated,
|
||||
motionDurationSlow,
|
||||
motionDurationFast,
|
||||
motionDurationMid,
|
||||
padding,
|
||||
paddingLG,
|
||||
fontSizeLG,
|
||||
@ -171,7 +171,7 @@ const genDrawerStyle: GenerateStyle<DrawerToken> = (token: DrawerToken) => {
|
||||
border: 0,
|
||||
outline: 0,
|
||||
cursor: 'pointer',
|
||||
transition: `color ${motionDurationFast}`,
|
||||
transition: `color ${motionDurationMid}`,
|
||||
textRendering: 'auto',
|
||||
|
||||
'&:focus, &:hover': {
|
||||
@ -216,7 +216,7 @@ const genDrawerStyle: GenerateStyle<DrawerToken> = (token: DrawerToken) => {
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook(
|
||||
'Drawer',
|
||||
token => {
|
||||
(token) => {
|
||||
const drawerToken = mergeToken<DrawerToken>(token, {
|
||||
drawerFooterPaddingVertical: token.paddingXS,
|
||||
drawerFooterPaddingHorizontal: token.padding,
|
||||
@ -224,7 +224,7 @@ export default genComponentStyleHook(
|
||||
|
||||
return [genDrawerStyle(drawerToken), genMotionStyle(drawerToken)];
|
||||
},
|
||||
token => ({
|
||||
(token) => ({
|
||||
zIndexPopup: token.zIndexPopupBase,
|
||||
}),
|
||||
);
|
||||
|
||||
@ -27,7 +27,7 @@ export interface DropdownToken extends FullToken<'Dropdown'> {
|
||||
}
|
||||
|
||||
// =============================== Base ===============================
|
||||
const genBaseStyle: GenerateStyle<DropdownToken> = token => {
|
||||
const genBaseStyle: GenerateStyle<DropdownToken> = (token) => {
|
||||
const {
|
||||
componentCls,
|
||||
menuCls,
|
||||
@ -38,7 +38,6 @@ const genBaseStyle: GenerateStyle<DropdownToken> = token => {
|
||||
antCls,
|
||||
iconCls,
|
||||
motionDurationMid,
|
||||
motionDurationFast,
|
||||
dropdownPaddingVertical,
|
||||
fontSize,
|
||||
dropdownEdgeChildPadding,
|
||||
@ -273,7 +272,7 @@ const genBaseStyle: GenerateStyle<DropdownToken> = token => {
|
||||
[`${menuCls}-item-group-title`]: {
|
||||
padding: `${dropdownPaddingVertical}px ${controlPaddingHorizontal}px`,
|
||||
color: token.colorTextDescription,
|
||||
transition: `all ${motionDurationFast}`,
|
||||
transition: `all ${motionDurationMid}`,
|
||||
},
|
||||
|
||||
// ======================= Item Content =======================
|
||||
@ -295,7 +294,7 @@ const genBaseStyle: GenerateStyle<DropdownToken> = token => {
|
||||
|
||||
'> a': {
|
||||
color: 'inherit',
|
||||
transition: `all ${motionDurationFast}`,
|
||||
transition: `all ${motionDurationMid}`,
|
||||
|
||||
'&:hover': {
|
||||
color: 'inherit',
|
||||
@ -319,7 +318,7 @@ const genBaseStyle: GenerateStyle<DropdownToken> = token => {
|
||||
fontSize,
|
||||
lineHeight: token.lineHeight,
|
||||
cursor: 'pointer',
|
||||
transition: `all ${motionDurationFast}`,
|
||||
transition: `all ${motionDurationMid}`,
|
||||
|
||||
'&:first-child': !dropdownEdgeChildPadding
|
||||
? {
|
||||
@ -460,7 +459,7 @@ export default genComponentStyleHook(
|
||||
genStatusStyle(dropdownToken),
|
||||
];
|
||||
},
|
||||
token => ({
|
||||
(token) => ({
|
||||
zIndexPopup: token.zIndexPopupBase + 50,
|
||||
}),
|
||||
);
|
||||
|
||||
@ -23,7 +23,7 @@ type FloatButtonToken = FullToken<'FloatButton'> & {
|
||||
};
|
||||
|
||||
// ============================== Group ==============================
|
||||
const floatButtonGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = token => {
|
||||
const floatButtonGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token) => {
|
||||
const { componentCls, floatButtonSize, margin, borderRadius, motionDurationSlow } = token;
|
||||
const groupPrefixCls = `${componentCls}-group`;
|
||||
const moveDownIn = new Keyframes('antFloatButtonMoveDownIn', {
|
||||
@ -161,7 +161,7 @@ const floatButtonGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = token
|
||||
};
|
||||
|
||||
// ============================== Shared ==============================
|
||||
const sharedFloatButtonStyle: GenerateStyle<FloatButtonToken, CSSObject> = token => {
|
||||
const sharedFloatButtonStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token) => {
|
||||
const { componentCls, floatButtonIconSize, floatButtonSize } = token;
|
||||
return {
|
||||
[componentCls]: {
|
||||
@ -196,7 +196,7 @@ const sharedFloatButtonStyle: GenerateStyle<FloatButtonToken, CSSObject> = token
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
transition: `all ${token.motionDurationFast}`,
|
||||
transition: `all ${token.motionDurationMid}`,
|
||||
[`${componentCls}-content`]: {
|
||||
overflow: 'hidden',
|
||||
textAlign: 'center',
|
||||
@ -234,10 +234,10 @@ const sharedFloatButtonStyle: GenerateStyle<FloatButtonToken, CSSObject> = token
|
||||
},
|
||||
[`${componentCls}-default`]: {
|
||||
backgroundColor: token.colorBgContainer,
|
||||
transition: `background-color ${token.motionDurationFast}`,
|
||||
transition: `background-color ${token.motionDurationMid}`,
|
||||
[`${componentCls}-body`]: {
|
||||
backgroundColor: token.colorBgContainer,
|
||||
transition: `background-color ${token.motionDurationFast}`,
|
||||
transition: `background-color ${token.motionDurationMid}`,
|
||||
'&:hover': {
|
||||
backgroundColor: token.colorFillContent,
|
||||
},
|
||||
@ -259,7 +259,7 @@ const sharedFloatButtonStyle: GenerateStyle<FloatButtonToken, CSSObject> = token
|
||||
backgroundColor: token.colorPrimary,
|
||||
[`${componentCls}-body`]: {
|
||||
backgroundColor: token.colorPrimary,
|
||||
transition: `background-color ${token.motionDurationFast}`,
|
||||
transition: `background-color ${token.motionDurationMid}`,
|
||||
'&:hover': {
|
||||
backgroundColor: token.colorPrimaryHover,
|
||||
},
|
||||
@ -281,7 +281,7 @@ const sharedFloatButtonStyle: GenerateStyle<FloatButtonToken, CSSObject> = token
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook<'FloatButton'>('FloatButton', token => {
|
||||
export default genComponentStyleHook<'FloatButton'>('FloatButton', (token) => {
|
||||
const {
|
||||
colorTextLightSolid,
|
||||
colorBgContainer,
|
||||
|
||||
@ -37,12 +37,11 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
|
||||
colorError,
|
||||
inputPaddingHorizontalSM,
|
||||
colorTextDescription,
|
||||
motionDurationFast,
|
||||
motionDurationMid,
|
||||
colorPrimary,
|
||||
controlHeight,
|
||||
inputPaddingHorizontal,
|
||||
colorBgContainer,
|
||||
motionDurationMid,
|
||||
colorTextDisabled,
|
||||
borderRadiusSM,
|
||||
borderRadiusLG,
|
||||
@ -154,7 +153,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
|
||||
border: 0,
|
||||
borderRadius,
|
||||
outline: 0,
|
||||
transition: `all ${motionDurationFast} linear`,
|
||||
transition: `all ${motionDurationMid} linear`,
|
||||
appearance: 'textfield',
|
||||
color: token.colorText,
|
||||
fontSize: 'inherit',
|
||||
@ -195,7 +194,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'stretch',
|
||||
transition: `opacity ${motionDurationMid} linear ${motionDurationFast}`,
|
||||
transition: `opacity ${motionDurationMid} linear ${motionDurationMid}`,
|
||||
|
||||
// Fix input number inside Menu makes icon too large
|
||||
// We arise the selector priority by nest selector here
|
||||
@ -226,7 +225,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
|
||||
textAlign: 'center',
|
||||
cursor: 'pointer',
|
||||
borderInlineStart: `${lineWidth}px ${lineType} ${colorBorder}`,
|
||||
transition: `all ${motionDurationFast} linear`,
|
||||
transition: `all ${motionDurationMid} linear`,
|
||||
'&:active': {
|
||||
background: token.colorFillAlter,
|
||||
},
|
||||
@ -247,7 +246,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
|
||||
...resetIcon(),
|
||||
|
||||
color: colorTextDescription,
|
||||
transition: `all ${motionDurationFast} linear`,
|
||||
transition: `all ${motionDurationMid} linear`,
|
||||
userSelect: 'none',
|
||||
},
|
||||
},
|
||||
@ -395,11 +394,11 @@ const genAffixWrapperStyles: GenerateStyle<InputNumberToken> = (token: InputNumb
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook(
|
||||
'InputNumber',
|
||||
token => {
|
||||
(token) => {
|
||||
const inputNumberToken = initInputToken<FullToken<'InputNumber'>>(token);
|
||||
return [genInputNumberStyles(inputNumberToken), genAffixWrapperStyles(inputNumberToken)];
|
||||
},
|
||||
token => ({
|
||||
(token) => ({
|
||||
controlWidth: 90,
|
||||
handleWidth: token.controlHeightSM - token.lineWidth * 2,
|
||||
handleFontSize: token.fontSize / 2,
|
||||
|
||||
@ -149,7 +149,7 @@ export const genBasicInputStyle = (token: InputToken): CSSObject => ({
|
||||
borderStyle: token.lineType,
|
||||
borderColor: token.colorBorder,
|
||||
borderRadius: token.borderRadius,
|
||||
transition: `all ${token.motionDurationFast}`,
|
||||
transition: `all ${token.motionDurationMid}`,
|
||||
...genPlaceholderStyle(token.colorTextPlaceholder),
|
||||
|
||||
'&:hover': {
|
||||
@ -868,7 +868,7 @@ export function initInputToken<T extends GlobalToken = GlobalToken>(token: T): I
|
||||
});
|
||||
}
|
||||
|
||||
const genTextAreaStyle: GenerateStyle<InputToken> = token => {
|
||||
const genTextAreaStyle: GenerateStyle<InputToken> = (token) => {
|
||||
const { componentCls, inputPaddingHorizontal, paddingLG } = token;
|
||||
const textareaPrefixCls = `${componentCls}-textarea`;
|
||||
|
||||
@ -921,7 +921,7 @@ const genTextAreaStyle: GenerateStyle<InputToken> = token => {
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook('Input', token => {
|
||||
export default genComponentStyleHook('Input', (token) => {
|
||||
const inputToken = initInputToken<FullToken<'Input'>>(token);
|
||||
|
||||
return [
|
||||
|
||||
@ -24,7 +24,7 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
|
||||
motionEaseInOut,
|
||||
motionEaseOut,
|
||||
menuItemPaddingInline,
|
||||
motionDurationFast,
|
||||
motionDurationMid,
|
||||
colorItemTextHover,
|
||||
lineType,
|
||||
colorSplit,
|
||||
@ -221,8 +221,8 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
|
||||
transform: 'scaleY(0.0001)',
|
||||
opacity: 0,
|
||||
transition: [
|
||||
`transform ${motionDurationFast} ${motionEaseOut}`,
|
||||
`opacity ${motionDurationFast} ${motionEaseOut}`,
|
||||
`transform ${motionDurationMid} ${motionEaseOut}`,
|
||||
`opacity ${motionDurationMid} ${motionEaseOut}`,
|
||||
].join(','),
|
||||
content: '""',
|
||||
},
|
||||
@ -240,8 +240,8 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
|
||||
transform: 'scaleY(1)',
|
||||
opacity: 1,
|
||||
transition: [
|
||||
`transform ${motionDurationFast} ${motionEaseInOut}`,
|
||||
`opacity ${motionDurationFast} ${motionEaseInOut}`,
|
||||
`transform ${motionDurationMid} ${motionEaseInOut}`,
|
||||
`opacity ${motionDurationMid} ${motionEaseInOut}`,
|
||||
].join(','),
|
||||
},
|
||||
},
|
||||
|
||||
@ -59,7 +59,7 @@ const getVerticalStyle: GenerateStyle<MenuToken> = (token) => {
|
||||
colorTextLightSolid,
|
||||
dropdownWidth,
|
||||
controlHeightLG,
|
||||
motionDurationFast,
|
||||
motionDurationMid,
|
||||
motionEaseOut,
|
||||
paddingXL,
|
||||
fontSizeSM,
|
||||
@ -127,7 +127,7 @@ const getVerticalStyle: GenerateStyle<MenuToken> = (token) => {
|
||||
transition: [
|
||||
`border-color ${motionDurationSlow}`,
|
||||
`background ${motionDurationSlow}`,
|
||||
`padding ${motionDurationFast} ${motionEaseOut}`,
|
||||
`padding ${motionDurationMid} ${motionEaseOut}`,
|
||||
],
|
||||
|
||||
[`> ${componentCls}-title-content`]: {
|
||||
|
||||
@ -46,7 +46,7 @@ function box(position: React.CSSProperties['position']): React.CSSProperties {
|
||||
};
|
||||
}
|
||||
|
||||
export const genModalMaskStyle: GenerateStyle<TokenWithCommonCls<AliasToken>> = token => {
|
||||
export const genModalMaskStyle: GenerateStyle<TokenWithCommonCls<AliasToken>> = (token) => {
|
||||
const { componentCls } = token;
|
||||
|
||||
return [
|
||||
@ -84,7 +84,7 @@ export const genModalMaskStyle: GenerateStyle<TokenWithCommonCls<AliasToken>> =
|
||||
];
|
||||
};
|
||||
|
||||
const genModalStyle: GenerateStyle<ModalToken> = token => {
|
||||
const genModalStyle: GenerateStyle<ModalToken> = (token) => {
|
||||
const { componentCls } = token;
|
||||
|
||||
return [
|
||||
@ -185,7 +185,7 @@ const genModalStyle: GenerateStyle<ModalToken> = token => {
|
||||
border: 0,
|
||||
outline: 0,
|
||||
cursor: 'pointer',
|
||||
transition: `color ${token.motionDurationFast}, background-color ${token.motionDurationFast}`,
|
||||
transition: `color ${token.motionDurationMid}, background-color ${token.motionDurationMid}`,
|
||||
|
||||
'&-x': {
|
||||
display: 'block',
|
||||
@ -264,7 +264,7 @@ const genModalStyle: GenerateStyle<ModalToken> = token => {
|
||||
];
|
||||
};
|
||||
|
||||
const genModalConfirmStyle: GenerateStyle<ModalToken> = token => {
|
||||
const genModalConfirmStyle: GenerateStyle<ModalToken> = (token) => {
|
||||
const { componentCls } = token;
|
||||
const confirmComponentCls = `${componentCls}-confirm`;
|
||||
|
||||
@ -356,7 +356,7 @@ const genModalConfirmStyle: GenerateStyle<ModalToken> = token => {
|
||||
};
|
||||
};
|
||||
|
||||
const genRTLStyle: GenerateStyle<ModalToken> = token => {
|
||||
const genRTLStyle: GenerateStyle<ModalToken> = (token) => {
|
||||
const { componentCls } = token;
|
||||
return {
|
||||
[`${componentCls}-root`]: {
|
||||
@ -371,7 +371,7 @@ const genRTLStyle: GenerateStyle<ModalToken> = token => {
|
||||
};
|
||||
};
|
||||
|
||||
const genWireframeStyle: GenerateStyle<ModalToken> = token => {
|
||||
const genWireframeStyle: GenerateStyle<ModalToken> = (token) => {
|
||||
const { componentCls, antCls } = token;
|
||||
const confirmComponentCls = `${componentCls}-confirm`;
|
||||
|
||||
@ -421,7 +421,7 @@ const genWireframeStyle: GenerateStyle<ModalToken> = token => {
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook('Modal', token => {
|
||||
export default genComponentStyleHook('Modal', (token) => {
|
||||
const headerPaddingVertical = token.padding;
|
||||
const headerFontSize = token.fontSizeHeading5;
|
||||
const headerLineHeight = token.lineHeightHeading5;
|
||||
|
||||
@ -22,7 +22,7 @@ export interface NotificationToken extends FullToken<'Notification'> {
|
||||
notificationCloseButtonSize: number;
|
||||
}
|
||||
|
||||
const genNotificationStyle: GenerateStyle<NotificationToken> = token => {
|
||||
const genNotificationStyle: GenerateStyle<NotificationToken> = (token) => {
|
||||
const {
|
||||
iconCls,
|
||||
componentCls, // .ant-notification
|
||||
@ -230,7 +230,7 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = token => {
|
||||
width: token.notificationCloseButtonSize,
|
||||
height: token.notificationCloseButtonSize,
|
||||
borderRadius: token.borderRadiusSM,
|
||||
transition: `background-color ${token.motionDurationFast}, color ${token.motionDurationFast}`,
|
||||
transition: `background-color ${token.motionDurationMid}, color ${token.motionDurationMid}`,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
@ -260,7 +260,7 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = token => {
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook(
|
||||
'Notification',
|
||||
token => {
|
||||
(token) => {
|
||||
const notificationPaddingVertical = token.paddingMD;
|
||||
const notificationPaddingHorizontal = token.paddingLG;
|
||||
|
||||
@ -280,7 +280,7 @@ export default genComponentStyleHook(
|
||||
|
||||
return [genNotificationStyle(notificationToken)];
|
||||
},
|
||||
token => ({
|
||||
(token) => ({
|
||||
zIndexPopup: token.zIndexPopupBase + 50,
|
||||
width: 384,
|
||||
}),
|
||||
|
||||
@ -31,7 +31,7 @@ interface PaginationToken extends InputToken<FullToken<'Pagination'>> {
|
||||
paginationSlashMarginInlineEnd: number;
|
||||
}
|
||||
|
||||
const genPaginationDisabledStyle: GenerateStyle<PaginationToken, CSSObject> = token => {
|
||||
const genPaginationDisabledStyle: GenerateStyle<PaginationToken, CSSObject> = (token) => {
|
||||
const { componentCls } = token;
|
||||
|
||||
return {
|
||||
@ -114,7 +114,7 @@ const genPaginationDisabledStyle: GenerateStyle<PaginationToken, CSSObject> = to
|
||||
};
|
||||
};
|
||||
|
||||
const genPaginationMiniStyle: GenerateStyle<PaginationToken, CSSObject> = token => {
|
||||
const genPaginationMiniStyle: GenerateStyle<PaginationToken, CSSObject> = (token) => {
|
||||
const { componentCls } = token;
|
||||
|
||||
return {
|
||||
@ -183,7 +183,7 @@ const genPaginationMiniStyle: GenerateStyle<PaginationToken, CSSObject> = token
|
||||
};
|
||||
};
|
||||
|
||||
const genPaginationSimpleStyle: GenerateStyle<PaginationToken, CSSObject> = token => {
|
||||
const genPaginationSimpleStyle: GenerateStyle<PaginationToken, CSSObject> = (token) => {
|
||||
const { componentCls } = token;
|
||||
|
||||
return {
|
||||
@ -221,7 +221,7 @@ const genPaginationSimpleStyle: GenerateStyle<PaginationToken, CSSObject> = toke
|
||||
border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
|
||||
borderRadius: token.borderRadius,
|
||||
outline: 'none',
|
||||
transition: `border-color ${token.motionDurationFast}`,
|
||||
transition: `border-color ${token.motionDurationMid}`,
|
||||
|
||||
'&:hover': {
|
||||
borderColor: token.colorPrimary,
|
||||
@ -243,7 +243,7 @@ const genPaginationSimpleStyle: GenerateStyle<PaginationToken, CSSObject> = toke
|
||||
};
|
||||
};
|
||||
|
||||
const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = token => {
|
||||
const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = (token) => {
|
||||
const { componentCls } = token;
|
||||
|
||||
return {
|
||||
@ -331,7 +331,7 @@ const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = token
|
||||
listStyle: 'none',
|
||||
borderRadius: token.borderRadius,
|
||||
cursor: 'pointer',
|
||||
transition: `all ${token.motionDurationFast}`,
|
||||
transition: `all ${token.motionDurationMid}`,
|
||||
},
|
||||
|
||||
[`${componentCls}-prev, ${componentCls}-next`]: {
|
||||
@ -355,7 +355,7 @@ const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = token
|
||||
border: `${token.lineWidth}px ${token.lineType} transparent`,
|
||||
borderRadius: token.borderRadius,
|
||||
outline: 'none',
|
||||
transition: `border ${token.motionDurationFast}`,
|
||||
transition: `border ${token.motionDurationMid}`,
|
||||
},
|
||||
|
||||
[`&:focus-visible ${componentCls}-item-link`]: {
|
||||
@ -414,7 +414,7 @@ const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = token
|
||||
};
|
||||
};
|
||||
|
||||
const genPaginationItemStyle: GenerateStyle<PaginationToken, CSSObject> = token => {
|
||||
const genPaginationItemStyle: GenerateStyle<PaginationToken, CSSObject> = (token) => {
|
||||
const { componentCls } = token;
|
||||
|
||||
return {
|
||||
@ -448,7 +448,7 @@ const genPaginationItemStyle: GenerateStyle<PaginationToken, CSSObject> = token
|
||||
|
||||
[`&:not(${componentCls}-item-active)`]: {
|
||||
'&:hover': {
|
||||
transition: `all ${token.motionDurationFast}`,
|
||||
transition: `all ${token.motionDurationMid}`,
|
||||
backgroundColor: token.colorBgTextHover,
|
||||
},
|
||||
|
||||
@ -482,7 +482,7 @@ const genPaginationItemStyle: GenerateStyle<PaginationToken, CSSObject> = token
|
||||
};
|
||||
};
|
||||
|
||||
const genPaginationStyle: GenerateStyle<PaginationToken, CSSObject> = token => {
|
||||
const genPaginationStyle: GenerateStyle<PaginationToken, CSSObject> = (token) => {
|
||||
const { componentCls } = token;
|
||||
|
||||
return {
|
||||
@ -550,7 +550,7 @@ const genPaginationStyle: GenerateStyle<PaginationToken, CSSObject> = token => {
|
||||
};
|
||||
};
|
||||
|
||||
const genBorderedStyle: GenerateStyle<PaginationToken> = token => {
|
||||
const genBorderedStyle: GenerateStyle<PaginationToken> = (token) => {
|
||||
const { componentCls } = token;
|
||||
|
||||
return {
|
||||
@ -647,7 +647,7 @@ const genBorderedStyle: GenerateStyle<PaginationToken> = token => {
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook('Pagination', token => {
|
||||
export default genComponentStyleHook('Pagination', (token) => {
|
||||
const paginationToken = mergeToken<PaginationToken>(
|
||||
token,
|
||||
{
|
||||
|
||||
@ -36,7 +36,7 @@ const antRadioEffect = new Keyframes('antRadioEffect', {
|
||||
});
|
||||
|
||||
// styles from RadioGroup only
|
||||
const getGroupRadioStyle: GenerateStyle<RadioToken> = token => {
|
||||
const getGroupRadioStyle: GenerateStyle<RadioToken> = (token) => {
|
||||
const { componentCls, antCls } = token;
|
||||
const groupPrefixCls = `${componentCls}-group`;
|
||||
|
||||
@ -63,7 +63,7 @@ const getGroupRadioStyle: GenerateStyle<RadioToken> = token => {
|
||||
};
|
||||
|
||||
// Styles from radio-wrapper
|
||||
const getRadioBasicStyle: GenerateStyle<RadioToken> = token => {
|
||||
const getRadioBasicStyle: GenerateStyle<RadioToken> = (token) => {
|
||||
const {
|
||||
componentCls,
|
||||
radioWrapperMarginRight,
|
||||
@ -71,7 +71,7 @@ const getRadioBasicStyle: GenerateStyle<RadioToken> = token => {
|
||||
radioTop,
|
||||
radioSize,
|
||||
motionDurationSlow,
|
||||
motionDurationFast,
|
||||
motionDurationMid,
|
||||
motionEaseInOut,
|
||||
motionEaseInOutCirc,
|
||||
radioButtonBg,
|
||||
@ -187,7 +187,7 @@ const getRadioBasicStyle: GenerateStyle<RadioToken> = token => {
|
||||
borderStyle: 'solid',
|
||||
borderWidth: lineWidth,
|
||||
borderRadius: '50%',
|
||||
transition: `all ${motionDurationFast}`,
|
||||
transition: `all ${motionDurationMid}`,
|
||||
},
|
||||
|
||||
[`${componentCls}-input`]: {
|
||||
@ -255,7 +255,7 @@ const getRadioBasicStyle: GenerateStyle<RadioToken> = token => {
|
||||
};
|
||||
|
||||
// Styles from radio-button
|
||||
const getRadioButtonStyle: GenerateStyle<RadioToken> = token => {
|
||||
const getRadioButtonStyle: GenerateStyle<RadioToken> = (token) => {
|
||||
const {
|
||||
radioButtonColor,
|
||||
controlHeight,
|
||||
@ -264,7 +264,7 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = token => {
|
||||
lineType,
|
||||
colorBorder,
|
||||
motionDurationSlow,
|
||||
motionDurationFast,
|
||||
motionDurationMid,
|
||||
radioButtonPaddingHorizontal,
|
||||
fontSize,
|
||||
radioButtonBg,
|
||||
@ -305,10 +305,10 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = token => {
|
||||
borderInlineEndWidth: lineWidth,
|
||||
cursor: 'pointer',
|
||||
transition: [
|
||||
`color ${motionDurationFast}`,
|
||||
`background ${motionDurationFast}`,
|
||||
`border-color ${motionDurationFast}`,
|
||||
`box-shadow ${motionDurationFast}`,
|
||||
`color ${motionDurationMid}`,
|
||||
`background ${motionDurationMid}`,
|
||||
`border-color ${motionDurationMid}`,
|
||||
`box-shadow ${motionDurationMid}`,
|
||||
].join(','),
|
||||
|
||||
a: {
|
||||
@ -480,7 +480,7 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = token => {
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook('Radio', token => {
|
||||
export default genComponentStyleHook('Radio', (token) => {
|
||||
const {
|
||||
padding,
|
||||
lineWidth,
|
||||
|
||||
@ -12,7 +12,7 @@ interface RateToken extends FullToken<'Rate'> {
|
||||
defaultColor: string;
|
||||
}
|
||||
|
||||
const genRateStarStyle: GenerateStyle<RateToken, CSSObject> = token => {
|
||||
const genRateStarStyle: GenerateStyle<RateToken, CSSObject> = (token) => {
|
||||
const { componentCls } = token;
|
||||
|
||||
return {
|
||||
@ -27,7 +27,7 @@ const genRateStarStyle: GenerateStyle<RateToken, CSSObject> = token => {
|
||||
},
|
||||
|
||||
'> div': {
|
||||
transition: `all ${token.motionDurationFast}, outline 0s`,
|
||||
transition: `all ${token.motionDurationMid}, outline 0s`,
|
||||
|
||||
'&:hover': {
|
||||
transform: token.rateStarHoverScale,
|
||||
@ -45,7 +45,7 @@ const genRateStarStyle: GenerateStyle<RateToken, CSSObject> = token => {
|
||||
|
||||
'&-first, &-second': {
|
||||
color: token.defaultColor,
|
||||
transition: `all ${token.motionDurationFast}`,
|
||||
transition: `all ${token.motionDurationMid}`,
|
||||
userSelect: 'none',
|
||||
|
||||
[token.iconCls]: {
|
||||
@ -80,7 +80,7 @@ const genRateRtlStyle = (token: RateToken): CSSObject => ({
|
||||
},
|
||||
});
|
||||
|
||||
const genRateStyle: GenerateStyle<RateToken> = token => {
|
||||
const genRateStyle: GenerateStyle<RateToken> = (token) => {
|
||||
const { componentCls } = token;
|
||||
|
||||
return {
|
||||
@ -122,7 +122,7 @@ const genRateStyle: GenerateStyle<RateToken> = token => {
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook('Rate', token => {
|
||||
export default genComponentStyleHook('Rate', (token) => {
|
||||
const { colorFillContent } = token;
|
||||
|
||||
const rateToken = mergeToken<RateToken>(token, {
|
||||
|
||||
@ -52,7 +52,7 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
|
||||
color: token.labelColor,
|
||||
backgroundColor: token.bgColor,
|
||||
borderRadius: token.borderRadius,
|
||||
transition: `all ${token.motionDurationFast} ${token.motionEaseInOut}`,
|
||||
transition: `all ${token.motionDurationMid} ${token.motionEaseInOut}`,
|
||||
|
||||
[`${componentCls}-group`]: {
|
||||
position: 'relative',
|
||||
@ -82,7 +82,7 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
|
||||
position: 'relative',
|
||||
textAlign: 'center',
|
||||
cursor: 'pointer',
|
||||
transition: `color ${token.motionDurationFast} ${token.motionEaseInOut}`,
|
||||
transition: `color ${token.motionDurationMid} ${token.motionEaseInOut}`,
|
||||
borderRadius: token.borderRadiusSM,
|
||||
|
||||
'&-selected': {
|
||||
@ -98,7 +98,7 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
|
||||
top: 0,
|
||||
insetInlineStart: 0,
|
||||
borderRadius: token.borderRadiusSM,
|
||||
transition: `background-color ${token.motionDurationFast}`,
|
||||
transition: `background-color ${token.motionDurationMid}`,
|
||||
},
|
||||
|
||||
[`&:hover:not(${componentCls}-item-selected):not(${componentCls}-item-disabled)`]: {
|
||||
|
||||
@ -17,14 +17,14 @@ export interface SelectToken extends FullToken<'Select'> {
|
||||
}
|
||||
|
||||
// ============================= Selector =============================
|
||||
const genSelectorStyle: GenerateStyle<SelectToken, CSSObject> = token => {
|
||||
const genSelectorStyle: GenerateStyle<SelectToken, CSSObject> = (token) => {
|
||||
const { componentCls } = token;
|
||||
|
||||
return {
|
||||
position: 'relative',
|
||||
backgroundColor: token.colorBgContainer,
|
||||
border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
|
||||
transition: `all ${token.motionDurationFast} ${token.motionEaseInOut}`,
|
||||
transition: `all ${token.motionDurationMid} ${token.motionEaseInOut}`,
|
||||
|
||||
input: {
|
||||
cursor: 'pointer',
|
||||
@ -101,7 +101,7 @@ const genStatusStyle = (
|
||||
|
||||
// ============================== Styles ==============================
|
||||
// /* Reset search input style */
|
||||
const getSearchInputWithoutBorderStyle: GenerateStyle<SelectToken, CSSObject> = token => {
|
||||
const getSearchInputWithoutBorderStyle: GenerateStyle<SelectToken, CSSObject> = (token) => {
|
||||
const { componentCls } = token;
|
||||
|
||||
return {
|
||||
@ -122,7 +122,7 @@ const getSearchInputWithoutBorderStyle: GenerateStyle<SelectToken, CSSObject> =
|
||||
};
|
||||
|
||||
// =============================== Base ===============================
|
||||
const genBaseStyle: GenerateStyle<SelectToken> = token => {
|
||||
const genBaseStyle: GenerateStyle<SelectToken> = (token) => {
|
||||
const { componentCls, inputPaddingHorizontalBase, iconCls } = token;
|
||||
|
||||
return {
|
||||
@ -215,7 +215,7 @@ const genBaseStyle: GenerateStyle<SelectToken> = token => {
|
||||
background: token.colorBgContainer,
|
||||
cursor: 'pointer',
|
||||
opacity: 0,
|
||||
transition: `color ${token.motionDurationFast} ease, opacity ${token.motionDurationSlow} ease`,
|
||||
transition: `color ${token.motionDurationMid} ease, opacity ${token.motionDurationSlow} ease`,
|
||||
textRendering: 'auto',
|
||||
|
||||
'&:before': {
|
||||
@ -244,7 +244,7 @@ const genBaseStyle: GenerateStyle<SelectToken> = token => {
|
||||
};
|
||||
|
||||
// ============================== Styles ==============================
|
||||
const genSelectStyle: GenerateStyle<SelectToken> = token => {
|
||||
const genSelectStyle: GenerateStyle<SelectToken> = (token) => {
|
||||
const { componentCls } = token;
|
||||
|
||||
return [
|
||||
@ -335,7 +335,7 @@ export default genComponentStyleHook(
|
||||
|
||||
return [genSelectStyle(selectToken)];
|
||||
},
|
||||
token => ({
|
||||
(token) => ({
|
||||
zIndexPopup: token.zIndexPopupBase + 50,
|
||||
}),
|
||||
);
|
||||
|
||||
@ -28,7 +28,7 @@ interface SliderToken extends FullToken<'Slider'> {
|
||||
}
|
||||
|
||||
// =============================== Base ===============================
|
||||
const genBaseStyle: GenerateStyle<SliderToken> = token => {
|
||||
const genBaseStyle: GenerateStyle<SliderToken> = (token) => {
|
||||
const { componentCls, controlSize, dotSize, marginFull, marginPart, colorFillContentHover } =
|
||||
token;
|
||||
|
||||
@ -51,14 +51,14 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
|
||||
position: 'absolute',
|
||||
backgroundColor: token.colorFillTertiary,
|
||||
borderRadius: token.borderRadiusXS,
|
||||
transition: `background-color ${token.motionDurationFast}`,
|
||||
transition: `background-color ${token.motionDurationMid}`,
|
||||
},
|
||||
|
||||
[`${componentCls}-track`]: {
|
||||
position: 'absolute',
|
||||
backgroundColor: token.colorPrimaryBorder,
|
||||
borderRadius: token.borderRadiusXS,
|
||||
transition: `background-color ${token.motionDurationFast}`,
|
||||
transition: `background-color ${token.motionDurationMid}`,
|
||||
},
|
||||
|
||||
'&:hover': {
|
||||
@ -116,11 +116,11 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
|
||||
borderRadius: '50%',
|
||||
cursor: 'pointer',
|
||||
transition: `
|
||||
inset-inline-start ${token.motionDurationFast},
|
||||
inset-block-start ${token.motionDurationFast},
|
||||
width ${token.motionDurationFast},
|
||||
height ${token.motionDurationFast},
|
||||
box-shadow ${token.motionDurationFast}
|
||||
inset-inline-start ${token.motionDurationMid},
|
||||
inset-block-start ${token.motionDurationMid},
|
||||
width ${token.motionDurationMid},
|
||||
height ${token.motionDurationMid},
|
||||
box-shadow ${token.motionDurationMid}
|
||||
`,
|
||||
},
|
||||
|
||||
@ -282,7 +282,7 @@ const genDirectionStyle = (token: SliderToken, horizontal: boolean): CSSObject =
|
||||
};
|
||||
};
|
||||
// ============================ Horizontal ============================
|
||||
const genHorizontalStyle: GenerateStyle<SliderToken> = token => {
|
||||
const genHorizontalStyle: GenerateStyle<SliderToken> = (token) => {
|
||||
const { componentCls, marginPartWithMark } = token;
|
||||
|
||||
return {
|
||||
@ -297,7 +297,7 @@ const genHorizontalStyle: GenerateStyle<SliderToken> = token => {
|
||||
};
|
||||
|
||||
// ============================= Vertical =============================
|
||||
const genVerticalStyle: GenerateStyle<SliderToken> = token => {
|
||||
const genVerticalStyle: GenerateStyle<SliderToken> = (token) => {
|
||||
const { componentCls } = token;
|
||||
|
||||
return {
|
||||
@ -311,7 +311,7 @@ const genVerticalStyle: GenerateStyle<SliderToken> = token => {
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook(
|
||||
'Slider',
|
||||
token => {
|
||||
(token) => {
|
||||
const sliderToken = mergeToken<SliderToken>(token, {
|
||||
marginPart: (token.controlHeight - token.controlSize) / 2,
|
||||
marginFull: token.controlSize / 2,
|
||||
@ -323,7 +323,7 @@ export default genComponentStyleHook(
|
||||
genVerticalStyle(sliderToken),
|
||||
];
|
||||
},
|
||||
token => {
|
||||
(token) => {
|
||||
// Handle line width is always width-er 1px
|
||||
const increaseHandleWidth = 1;
|
||||
const controlSize = token.controlHeightLG / 4;
|
||||
|
||||
@ -2,7 +2,7 @@ import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import type { StepsToken } from '.';
|
||||
import type { GenerateStyle } from '../../theme';
|
||||
|
||||
const genStepsInlineStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
const genStepsInlineStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
|
||||
const { componentCls, inlineDotSize, inlineTitleColor, inlineTailColor } = token;
|
||||
const containerPaddingTop = token.paddingXS + token.lineWidth;
|
||||
const titleStyle = {
|
||||
@ -24,7 +24,7 @@ const genStepsInlineStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
margin: `0 ${token.marginXXS / 2}px`,
|
||||
borderRadius: token.borderRadiusSM,
|
||||
cursor: 'pointer',
|
||||
transition: `background-color ${token.motionDurationFast}`,
|
||||
transition: `background-color ${token.motionDurationMid}`,
|
||||
'&:hover': {
|
||||
background: token.controlItemBgHover,
|
||||
},
|
||||
|
||||
@ -206,7 +206,7 @@ export const initZoomMotion = (
|
||||
motionCls,
|
||||
inKeyframes,
|
||||
outKeyframes,
|
||||
motionName === 'zoom-big-fast' ? token.motionDurationFast : token.motionDurationMid,
|
||||
motionName === 'zoom-big-fast' ? token.motionDurationMid : token.motionDurationMid,
|
||||
),
|
||||
{
|
||||
[`
|
||||
|
||||
@ -26,7 +26,7 @@ interface SwitchToken extends FullToken<'Switch'> {
|
||||
switchHandleActiveInset: string;
|
||||
}
|
||||
|
||||
const genSwitchSmallStyle: GenerateStyle<SwitchToken, CSSObject> = token => {
|
||||
const genSwitchSmallStyle: GenerateStyle<SwitchToken, CSSObject> = (token) => {
|
||||
const { componentCls } = token;
|
||||
const switchInnerCls = `${componentCls}-inner`;
|
||||
|
||||
@ -106,7 +106,7 @@ const genSwitchSmallStyle: GenerateStyle<SwitchToken, CSSObject> = token => {
|
||||
};
|
||||
};
|
||||
|
||||
const genSwitchLoadingStyle: GenerateStyle<SwitchToken, CSSObject> = token => {
|
||||
const genSwitchLoadingStyle: GenerateStyle<SwitchToken, CSSObject> = (token) => {
|
||||
const { componentCls } = token;
|
||||
|
||||
return {
|
||||
@ -125,7 +125,7 @@ const genSwitchLoadingStyle: GenerateStyle<SwitchToken, CSSObject> = token => {
|
||||
};
|
||||
};
|
||||
|
||||
const genSwitchHandleStyle: GenerateStyle<SwitchToken, CSSObject> = token => {
|
||||
const genSwitchHandleStyle: GenerateStyle<SwitchToken, CSSObject> = (token) => {
|
||||
const { componentCls } = token;
|
||||
const switchHandleCls = `${componentCls}-handle`;
|
||||
|
||||
@ -172,7 +172,7 @@ const genSwitchHandleStyle: GenerateStyle<SwitchToken, CSSObject> = token => {
|
||||
};
|
||||
};
|
||||
|
||||
const genSwitchInnerStyle: GenerateStyle<SwitchToken, CSSObject> = token => {
|
||||
const genSwitchInnerStyle: GenerateStyle<SwitchToken, CSSObject> = (token) => {
|
||||
const { componentCls } = token;
|
||||
const switchInnerCls = `${componentCls}-inner`;
|
||||
|
||||
@ -260,7 +260,7 @@ const genSwitchStyle = (token: SwitchToken): CSSObject => {
|
||||
border: '0',
|
||||
borderRadius: 100,
|
||||
cursor: 'pointer',
|
||||
transition: `all ${token.motionDurationFast}`,
|
||||
transition: `all ${token.motionDurationMid}`,
|
||||
userSelect: 'none',
|
||||
|
||||
[`&:hover:not(${componentCls}-disabled)`]: {
|
||||
@ -296,7 +296,7 @@ const genSwitchStyle = (token: SwitchToken): CSSObject => {
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook('Switch', token => {
|
||||
export default genComponentStyleHook('Switch', (token) => {
|
||||
const switchHeight = token.fontSize * token.lineHeight;
|
||||
const switchHeightSM = token.controlHeight / 2;
|
||||
const switchPadding = 2; // This is magic
|
||||
|
||||
@ -77,7 +77,7 @@ const genBaseStyle = (token: TagToken): CSSInterpolation => {
|
||||
border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
|
||||
borderRadius: token.borderRadiusSM,
|
||||
opacity: 1,
|
||||
transition: `all ${token.motionDurationFast}`,
|
||||
transition: `all ${token.motionDurationMid}`,
|
||||
textAlign: 'start',
|
||||
|
||||
// RTL
|
||||
@ -94,7 +94,7 @@ const genBaseStyle = (token: TagToken): CSSInterpolation => {
|
||||
color: token.colorTextDescription,
|
||||
fontSize: token.tagIconSize,
|
||||
cursor: 'pointer',
|
||||
transition: `all ${token.motionDurationFast}`,
|
||||
transition: `all ${token.motionDurationMid}`,
|
||||
|
||||
'&:hover': {
|
||||
color: token.colorTextHeading,
|
||||
@ -148,7 +148,7 @@ const genBaseStyle = (token: TagToken): CSSInterpolation => {
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook('Tag', token => {
|
||||
export default genComponentStyleHook('Tag', (token) => {
|
||||
const { fontSize, lineHeight, lineWidth, fontSizeIcon } = token;
|
||||
const tagHeight = Math.round(fontSize * lineHeight);
|
||||
|
||||
|
||||
@ -15,7 +15,7 @@ interface TourToken extends FullToken<'Tour'> {
|
||||
}
|
||||
|
||||
// =============================== Base ===============================
|
||||
const genBaseStyle: GenerateStyle<TourToken> = token => {
|
||||
const genBaseStyle: GenerateStyle<TourToken> = (token) => {
|
||||
const {
|
||||
componentCls,
|
||||
lineHeight,
|
||||
@ -89,7 +89,7 @@ const genBaseStyle: GenerateStyle<TourToken> = token => {
|
||||
width: tourCloseSize,
|
||||
height: tourCloseSize,
|
||||
borderRadius: token.borderRadiusSM,
|
||||
transition: `background-color ${token.motionDurationFast}, color ${token.motionDurationFast}`,
|
||||
transition: `background-color ${token.motionDurationMid}, color ${token.motionDurationMid}`,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
@ -236,7 +236,7 @@ const genBaseStyle: GenerateStyle<TourToken> = token => {
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook('Tour', token => {
|
||||
export default genComponentStyleHook('Tour', (token) => {
|
||||
const { borderRadiusLG, fontSize, lineHeight } = token;
|
||||
const TourToken = mergeToken<TourToken>(token, {
|
||||
tourZIndexPopup: token.zIndexPopupBase + 70,
|
||||
|
||||
@ -281,7 +281,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject =>
|
||||
background: 'transparent',
|
||||
borderRadius: token.borderRadius,
|
||||
cursor: 'pointer',
|
||||
transition: `all ${token.motionDurationFast}, border 0s, line-height 0s, box-shadow 0s`,
|
||||
transition: `all ${token.motionDurationMid}, border 0s, line-height 0s, box-shadow 0s`,
|
||||
|
||||
'&:hover': {
|
||||
backgroundColor: token.controlItemBgHover,
|
||||
@ -393,7 +393,7 @@ export const genDirectoryStyle = (token: TreeToken): CSSObject => {
|
||||
insetInlineEnd: 0,
|
||||
bottom: treeNodePadding,
|
||||
insetInlineStart: 0,
|
||||
transition: `background-color ${token.motionDurationFast}`,
|
||||
transition: `background-color ${token.motionDurationMid}`,
|
||||
content: '""',
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
@ -411,7 +411,7 @@ export const genDirectoryStyle = (token: TreeToken): CSSObject => {
|
||||
|
||||
// >>> Switcher
|
||||
[`${treeCls}-switcher`]: {
|
||||
transition: `color ${token.motionDurationFast}`,
|
||||
transition: `color ${token.motionDurationMid}`,
|
||||
},
|
||||
|
||||
// >>> Title
|
||||
|
||||
Loading…
Reference in New Issue
Block a user