791 lines
24 KiB
JavaScript
791 lines
24 KiB
JavaScript
import _extends from '@babel/runtime/helpers/esm/extends';
|
|
import { D as genComponentStyleHook, a6 as genCompactItemStyle, Z as merge, N as resetComponent, a7 as clearFix } from './server.mjs';
|
|
|
|
const genPlaceholderStyle = (color) => ({
|
|
// Firefox
|
|
"&::-moz-placeholder": {
|
|
opacity: 1
|
|
},
|
|
"&::placeholder": {
|
|
color,
|
|
userSelect: "none"
|
|
// https://github.com/ant-design/ant-design/pull/32639
|
|
},
|
|
"&:placeholder-shown": {
|
|
textOverflow: "ellipsis"
|
|
}
|
|
});
|
|
const genHoverStyle = (token) => ({
|
|
borderColor: token.inputBorderHoverColor,
|
|
borderInlineEndWidth: token.lineWidth
|
|
});
|
|
const genActiveStyle = (token) => ({
|
|
borderColor: token.inputBorderHoverColor,
|
|
boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.controlOutline}`,
|
|
borderInlineEndWidth: token.lineWidth,
|
|
outline: 0
|
|
});
|
|
const genDisabledStyle = (token) => ({
|
|
color: token.colorTextDisabled,
|
|
backgroundColor: token.colorBgContainerDisabled,
|
|
borderColor: token.colorBorder,
|
|
boxShadow: "none",
|
|
cursor: "not-allowed",
|
|
opacity: 1,
|
|
"&:hover": _extends({}, genHoverStyle(merge(token, {
|
|
inputBorderHoverColor: token.colorBorder
|
|
})))
|
|
});
|
|
const genInputLargeStyle = (token) => {
|
|
const {
|
|
inputPaddingVerticalLG,
|
|
fontSizeLG,
|
|
lineHeightLG,
|
|
borderRadiusLG,
|
|
inputPaddingHorizontalLG
|
|
} = token;
|
|
return {
|
|
padding: `${inputPaddingVerticalLG}px ${inputPaddingHorizontalLG}px`,
|
|
fontSize: fontSizeLG,
|
|
lineHeight: lineHeightLG,
|
|
borderRadius: borderRadiusLG
|
|
};
|
|
};
|
|
const genInputSmallStyle = (token) => ({
|
|
padding: `${token.inputPaddingVerticalSM}px ${token.controlPaddingHorizontalSM - 1}px`,
|
|
borderRadius: token.borderRadiusSM
|
|
});
|
|
const genStatusStyle = (token, parentCls) => {
|
|
const {
|
|
componentCls,
|
|
colorError,
|
|
colorWarning,
|
|
colorErrorOutline,
|
|
colorWarningOutline,
|
|
colorErrorBorderHover,
|
|
colorWarningBorderHover
|
|
} = token;
|
|
return {
|
|
[`&-status-error:not(${parentCls}-disabled):not(${parentCls}-borderless)${parentCls}`]: {
|
|
borderColor: colorError,
|
|
"&:hover": {
|
|
borderColor: colorErrorBorderHover
|
|
},
|
|
"&:focus, &-focused": _extends({}, genActiveStyle(merge(token, {
|
|
inputBorderActiveColor: colorError,
|
|
inputBorderHoverColor: colorError,
|
|
controlOutline: colorErrorOutline
|
|
}))),
|
|
[`${componentCls}-prefix`]: {
|
|
color: colorError
|
|
}
|
|
},
|
|
[`&-status-warning:not(${parentCls}-disabled):not(${parentCls}-borderless)${parentCls}`]: {
|
|
borderColor: colorWarning,
|
|
"&:hover": {
|
|
borderColor: colorWarningBorderHover
|
|
},
|
|
"&:focus, &-focused": _extends({}, genActiveStyle(merge(token, {
|
|
inputBorderActiveColor: colorWarning,
|
|
inputBorderHoverColor: colorWarning,
|
|
controlOutline: colorWarningOutline
|
|
}))),
|
|
[`${componentCls}-prefix`]: {
|
|
color: colorWarning
|
|
}
|
|
}
|
|
};
|
|
};
|
|
const genBasicInputStyle = (token) => _extends(_extends({
|
|
position: "relative",
|
|
display: "inline-block",
|
|
width: "100%",
|
|
minWidth: 0,
|
|
padding: `${token.inputPaddingVertical}px ${token.inputPaddingHorizontal}px`,
|
|
color: token.colorText,
|
|
fontSize: token.fontSize,
|
|
lineHeight: token.lineHeight,
|
|
backgroundColor: token.colorBgContainer,
|
|
backgroundImage: "none",
|
|
borderWidth: token.lineWidth,
|
|
borderStyle: token.lineType,
|
|
borderColor: token.colorBorder,
|
|
borderRadius: token.borderRadius,
|
|
transition: `all ${token.motionDurationMid}`
|
|
}, genPlaceholderStyle(token.colorTextPlaceholder)), {
|
|
"&:hover": _extends({}, genHoverStyle(token)),
|
|
"&:focus, &-focused": _extends({}, genActiveStyle(token)),
|
|
"&-disabled, &[disabled]": _extends({}, genDisabledStyle(token)),
|
|
"&-borderless": {
|
|
"&, &:hover, &:focus, &-focused, &-disabled, &[disabled]": {
|
|
backgroundColor: "transparent",
|
|
border: "none",
|
|
boxShadow: "none"
|
|
}
|
|
},
|
|
// Reset height for `textarea`s
|
|
"textarea&": {
|
|
maxWidth: "100%",
|
|
height: "auto",
|
|
minHeight: token.controlHeight,
|
|
lineHeight: token.lineHeight,
|
|
verticalAlign: "bottom",
|
|
transition: `all ${token.motionDurationSlow}, height 0s`,
|
|
resize: "vertical"
|
|
},
|
|
// Size
|
|
"&-lg": _extends({}, genInputLargeStyle(token)),
|
|
"&-sm": _extends({}, genInputSmallStyle(token)),
|
|
// RTL
|
|
"&-rtl": {
|
|
direction: "rtl"
|
|
},
|
|
"&-textarea-rtl": {
|
|
direction: "rtl"
|
|
}
|
|
});
|
|
const genInputGroupStyle = (token) => {
|
|
const {
|
|
componentCls,
|
|
antCls
|
|
} = token;
|
|
return {
|
|
position: "relative",
|
|
display: "table",
|
|
width: "100%",
|
|
borderCollapse: "separate",
|
|
borderSpacing: 0,
|
|
// Undo padding and float of grid classes
|
|
[`&[class*='col-']`]: {
|
|
paddingInlineEnd: token.paddingXS,
|
|
"&:last-child": {
|
|
paddingInlineEnd: 0
|
|
}
|
|
},
|
|
// Sizing options
|
|
[`&-lg ${componentCls}, &-lg > ${componentCls}-group-addon`]: _extends({}, genInputLargeStyle(token)),
|
|
[`&-sm ${componentCls}, &-sm > ${componentCls}-group-addon`]: _extends({}, genInputSmallStyle(token)),
|
|
[`> ${componentCls}`]: {
|
|
display: "table-cell",
|
|
"&:not(:first-child):not(:last-child)": {
|
|
borderRadius: 0
|
|
}
|
|
},
|
|
[`${componentCls}-group`]: {
|
|
[`&-addon, &-wrap`]: {
|
|
display: "table-cell",
|
|
width: 1,
|
|
whiteSpace: "nowrap",
|
|
verticalAlign: "middle",
|
|
"&:not(:first-child):not(:last-child)": {
|
|
borderRadius: 0
|
|
}
|
|
},
|
|
"&-wrap > *": {
|
|
display: "block !important"
|
|
},
|
|
"&-addon": {
|
|
position: "relative",
|
|
padding: `0 ${token.inputPaddingHorizontal}px`,
|
|
color: token.colorText,
|
|
fontWeight: "normal",
|
|
fontSize: token.fontSize,
|
|
textAlign: "center",
|
|
backgroundColor: token.colorFillAlter,
|
|
border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
|
|
borderRadius: token.borderRadius,
|
|
transition: `all ${token.motionDurationSlow}`,
|
|
lineHeight: 1,
|
|
// Reset Select's style in addon
|
|
[`${antCls}-select`]: {
|
|
margin: `-${token.inputPaddingVertical + 1}px -${token.inputPaddingHorizontal}px`,
|
|
[`&${antCls}-select-single:not(${antCls}-select-customize-input)`]: {
|
|
[`${antCls}-select-selector`]: {
|
|
backgroundColor: "inherit",
|
|
border: `${token.lineWidth}px ${token.lineType} transparent`,
|
|
boxShadow: "none"
|
|
}
|
|
},
|
|
"&-open, &-focused": {
|
|
[`${antCls}-select-selector`]: {
|
|
color: token.colorPrimary
|
|
}
|
|
}
|
|
},
|
|
// https://github.com/ant-design/ant-design/issues/31333
|
|
[`${antCls}-cascader-picker`]: {
|
|
margin: `-9px -${token.inputPaddingHorizontal}px`,
|
|
backgroundColor: "transparent",
|
|
[`${antCls}-cascader-input`]: {
|
|
textAlign: "start",
|
|
border: 0,
|
|
boxShadow: "none"
|
|
}
|
|
}
|
|
},
|
|
"&-addon:first-child": {
|
|
borderInlineEnd: 0
|
|
},
|
|
"&-addon:last-child": {
|
|
borderInlineStart: 0
|
|
}
|
|
},
|
|
[`${componentCls}`]: {
|
|
float: "inline-start",
|
|
width: "100%",
|
|
marginBottom: 0,
|
|
textAlign: "inherit",
|
|
"&:focus": {
|
|
zIndex: 1,
|
|
borderInlineEndWidth: 1
|
|
},
|
|
"&:hover": {
|
|
zIndex: 1,
|
|
borderInlineEndWidth: 1,
|
|
[`${componentCls}-search-with-button &`]: {
|
|
zIndex: 0
|
|
}
|
|
}
|
|
},
|
|
// Reset rounded corners
|
|
[`> ${componentCls}:first-child, ${componentCls}-group-addon:first-child`]: {
|
|
borderStartEndRadius: 0,
|
|
borderEndEndRadius: 0,
|
|
// Reset Select's style in addon
|
|
[`${antCls}-select ${antCls}-select-selector`]: {
|
|
borderStartEndRadius: 0,
|
|
borderEndEndRadius: 0
|
|
}
|
|
},
|
|
[`> ${componentCls}-affix-wrapper`]: {
|
|
[`&:not(:first-child) ${componentCls}`]: {
|
|
borderStartStartRadius: 0,
|
|
borderEndStartRadius: 0
|
|
},
|
|
[`&:not(:last-child) ${componentCls}`]: {
|
|
borderStartEndRadius: 0,
|
|
borderEndEndRadius: 0
|
|
}
|
|
},
|
|
[`> ${componentCls}:last-child, ${componentCls}-group-addon:last-child`]: {
|
|
borderStartStartRadius: 0,
|
|
borderEndStartRadius: 0,
|
|
// Reset Select's style in addon
|
|
[`${antCls}-select ${antCls}-select-selector`]: {
|
|
borderStartStartRadius: 0,
|
|
borderEndStartRadius: 0
|
|
}
|
|
},
|
|
[`${componentCls}-affix-wrapper`]: {
|
|
"&:not(:last-child)": {
|
|
borderStartEndRadius: 0,
|
|
borderEndEndRadius: 0,
|
|
[`${componentCls}-search &`]: {
|
|
borderStartStartRadius: token.borderRadius,
|
|
borderEndStartRadius: token.borderRadius
|
|
}
|
|
},
|
|
[`&:not(:first-child), ${componentCls}-search &:not(:first-child)`]: {
|
|
borderStartStartRadius: 0,
|
|
borderEndStartRadius: 0
|
|
}
|
|
},
|
|
[`&${componentCls}-group-compact`]: _extends(_extends({
|
|
display: "block"
|
|
}, clearFix()), {
|
|
[`${componentCls}-group-addon, ${componentCls}-group-wrap, > ${componentCls}`]: {
|
|
"&:not(:first-child):not(:last-child)": {
|
|
borderInlineEndWidth: token.lineWidth,
|
|
"&:hover": {
|
|
zIndex: 1
|
|
},
|
|
"&:focus": {
|
|
zIndex: 1
|
|
}
|
|
}
|
|
},
|
|
"& > *": {
|
|
display: "inline-block",
|
|
float: "none",
|
|
verticalAlign: "top",
|
|
borderRadius: 0
|
|
},
|
|
[`& > ${componentCls}-affix-wrapper`]: {
|
|
display: "inline-flex"
|
|
},
|
|
[`& > ${antCls}-picker-range`]: {
|
|
display: "inline-flex"
|
|
},
|
|
"& > *:not(:last-child)": {
|
|
marginInlineEnd: -token.lineWidth,
|
|
borderInlineEndWidth: token.lineWidth
|
|
},
|
|
// Undo float for .ant-input-group .ant-input
|
|
[`${componentCls}`]: {
|
|
float: "none"
|
|
},
|
|
// reset border for Select, DatePicker, AutoComplete, Cascader, Mention, TimePicker, Input
|
|
[`& > ${antCls}-select > ${antCls}-select-selector,
|
|
& > ${antCls}-select-auto-complete ${componentCls},
|
|
& > ${antCls}-cascader-picker ${componentCls},
|
|
& > ${componentCls}-group-wrapper ${componentCls}`]: {
|
|
borderInlineEndWidth: token.lineWidth,
|
|
borderRadius: 0,
|
|
"&:hover": {
|
|
zIndex: 1
|
|
},
|
|
"&:focus": {
|
|
zIndex: 1
|
|
}
|
|
},
|
|
[`& > ${antCls}-select-focused`]: {
|
|
zIndex: 1
|
|
},
|
|
// update z-index for arrow icon
|
|
[`& > ${antCls}-select > ${antCls}-select-arrow`]: {
|
|
zIndex: 1
|
|
// https://github.com/ant-design/ant-design/issues/20371
|
|
},
|
|
[`& > *:first-child,
|
|
& > ${antCls}-select:first-child > ${antCls}-select-selector,
|
|
& > ${antCls}-select-auto-complete:first-child ${componentCls},
|
|
& > ${antCls}-cascader-picker:first-child ${componentCls}`]: {
|
|
borderStartStartRadius: token.borderRadius,
|
|
borderEndStartRadius: token.borderRadius
|
|
},
|
|
[`& > *:last-child,
|
|
& > ${antCls}-select:last-child > ${antCls}-select-selector,
|
|
& > ${antCls}-cascader-picker:last-child ${componentCls},
|
|
& > ${antCls}-cascader-picker-focused:last-child ${componentCls}`]: {
|
|
borderInlineEndWidth: token.lineWidth,
|
|
borderStartEndRadius: token.borderRadius,
|
|
borderEndEndRadius: token.borderRadius
|
|
},
|
|
// https://github.com/ant-design/ant-design/issues/12493
|
|
[`& > ${antCls}-select-auto-complete ${componentCls}`]: {
|
|
verticalAlign: "top"
|
|
},
|
|
[`${componentCls}-group-wrapper + ${componentCls}-group-wrapper`]: {
|
|
marginInlineStart: -token.lineWidth,
|
|
[`${componentCls}-affix-wrapper`]: {
|
|
borderRadius: 0
|
|
}
|
|
},
|
|
[`${componentCls}-group-wrapper:not(:last-child)`]: {
|
|
[`&${componentCls}-search > ${componentCls}-group`]: {
|
|
[`& > ${componentCls}-group-addon > ${componentCls}-search-button`]: {
|
|
borderRadius: 0
|
|
},
|
|
[`& > ${componentCls}`]: {
|
|
borderStartStartRadius: token.borderRadius,
|
|
borderStartEndRadius: 0,
|
|
borderEndEndRadius: 0,
|
|
borderEndStartRadius: token.borderRadius
|
|
}
|
|
}
|
|
}
|
|
}),
|
|
[`&&-sm ${antCls}-btn`]: {
|
|
fontSize: token.fontSizeSM,
|
|
height: token.controlHeightSM,
|
|
lineHeight: "normal"
|
|
},
|
|
[`&&-lg ${antCls}-btn`]: {
|
|
fontSize: token.fontSizeLG,
|
|
height: token.controlHeightLG,
|
|
lineHeight: "normal"
|
|
},
|
|
// Fix https://github.com/ant-design/ant-design/issues/5754
|
|
[`&&-lg ${antCls}-select-single ${antCls}-select-selector`]: {
|
|
height: `${token.controlHeightLG}px`,
|
|
[`${antCls}-select-selection-item, ${antCls}-select-selection-placeholder`]: {
|
|
// -2 is for the border size & override default
|
|
lineHeight: `${token.controlHeightLG - 2}px`
|
|
},
|
|
[`${antCls}-select-selection-search-input`]: {
|
|
height: `${token.controlHeightLG}px`
|
|
}
|
|
},
|
|
[`&&-sm ${antCls}-select-single ${antCls}-select-selector`]: {
|
|
height: `${token.controlHeightSM}px`,
|
|
[`${antCls}-select-selection-item, ${antCls}-select-selection-placeholder`]: {
|
|
// -2 is for the border size & override default
|
|
lineHeight: `${token.controlHeightSM - 2}px`
|
|
},
|
|
[`${antCls}-select-selection-search-input`]: {
|
|
height: `${token.controlHeightSM}px`
|
|
}
|
|
}
|
|
};
|
|
};
|
|
const genInputStyle = (token) => {
|
|
const {
|
|
componentCls,
|
|
controlHeightSM,
|
|
lineWidth
|
|
} = token;
|
|
const FIXED_CHROME_COLOR_HEIGHT = 16;
|
|
const colorSmallPadding = (controlHeightSM - lineWidth * 2 - FIXED_CHROME_COLOR_HEIGHT) / 2;
|
|
return {
|
|
[componentCls]: _extends(_extends(_extends(_extends({}, resetComponent(token)), genBasicInputStyle(token)), genStatusStyle(token, componentCls)), {
|
|
'&[type="color"]': {
|
|
height: token.controlHeight,
|
|
[`&${componentCls}-lg`]: {
|
|
height: token.controlHeightLG
|
|
},
|
|
[`&${componentCls}-sm`]: {
|
|
height: controlHeightSM,
|
|
paddingTop: colorSmallPadding,
|
|
paddingBottom: colorSmallPadding
|
|
}
|
|
}
|
|
})
|
|
};
|
|
};
|
|
const genAllowClearStyle = (token) => {
|
|
const {
|
|
componentCls
|
|
} = token;
|
|
return {
|
|
// ========================= Input =========================
|
|
[`${componentCls}-clear-icon`]: {
|
|
margin: 0,
|
|
color: token.colorTextQuaternary,
|
|
fontSize: token.fontSizeIcon,
|
|
verticalAlign: -1,
|
|
// https://github.com/ant-design/ant-design/pull/18151
|
|
// https://codesandbox.io/s/wizardly-sun-u10br
|
|
cursor: "pointer",
|
|
transition: `color ${token.motionDurationSlow}`,
|
|
"&:hover": {
|
|
color: token.colorTextTertiary
|
|
},
|
|
"&:active": {
|
|
color: token.colorText
|
|
},
|
|
"&-hidden": {
|
|
visibility: "hidden"
|
|
},
|
|
"&-has-suffix": {
|
|
margin: `0 ${token.inputAffixPadding}px`
|
|
}
|
|
},
|
|
// ======================= TextArea ========================
|
|
"&-textarea-with-clear-btn": {
|
|
padding: "0 !important",
|
|
border: "0 !important",
|
|
[`${componentCls}-clear-icon`]: {
|
|
position: "absolute",
|
|
insetBlockStart: token.paddingXS,
|
|
insetInlineEnd: token.paddingXS,
|
|
zIndex: 1
|
|
}
|
|
}
|
|
};
|
|
};
|
|
const genAffixStyle = (token) => {
|
|
const {
|
|
componentCls,
|
|
inputAffixPadding,
|
|
colorTextDescription,
|
|
motionDurationSlow,
|
|
colorIcon,
|
|
colorIconHover,
|
|
iconCls
|
|
} = token;
|
|
return {
|
|
[`${componentCls}-affix-wrapper`]: _extends(_extends(_extends(_extends(_extends({}, genBasicInputStyle(token)), {
|
|
display: "inline-flex",
|
|
[`&:not(${componentCls}-affix-wrapper-disabled):hover`]: _extends(_extends({}, genHoverStyle(token)), {
|
|
zIndex: 1,
|
|
[`${componentCls}-search-with-button &`]: {
|
|
zIndex: 0
|
|
}
|
|
}),
|
|
"&-focused, &:focus": {
|
|
zIndex: 1
|
|
},
|
|
"&-disabled": {
|
|
[`${componentCls}[disabled]`]: {
|
|
background: "transparent"
|
|
}
|
|
},
|
|
[`> input${componentCls}`]: {
|
|
padding: 0,
|
|
fontSize: "inherit",
|
|
border: "none",
|
|
borderRadius: 0,
|
|
outline: "none",
|
|
"&:focus": {
|
|
boxShadow: "none !important"
|
|
}
|
|
},
|
|
"&::before": {
|
|
width: 0,
|
|
visibility: "hidden",
|
|
content: '"\\a0"'
|
|
},
|
|
[`${componentCls}`]: {
|
|
"&-prefix, &-suffix": {
|
|
display: "flex",
|
|
flex: "none",
|
|
alignItems: "center",
|
|
"> *:not(:last-child)": {
|
|
marginInlineEnd: token.paddingXS
|
|
}
|
|
},
|
|
"&-show-count-suffix": {
|
|
color: colorTextDescription
|
|
},
|
|
"&-show-count-has-suffix": {
|
|
marginInlineEnd: token.paddingXXS
|
|
},
|
|
"&-prefix": {
|
|
marginInlineEnd: inputAffixPadding
|
|
},
|
|
"&-suffix": {
|
|
marginInlineStart: inputAffixPadding
|
|
}
|
|
}
|
|
}), genAllowClearStyle(token)), {
|
|
// password
|
|
[`${iconCls}${componentCls}-password-icon`]: {
|
|
color: colorIcon,
|
|
cursor: "pointer",
|
|
transition: `all ${motionDurationSlow}`,
|
|
"&:hover": {
|
|
color: colorIconHover
|
|
}
|
|
}
|
|
}), genStatusStyle(token, `${componentCls}-affix-wrapper`))
|
|
};
|
|
};
|
|
const genGroupStyle = (token) => {
|
|
const {
|
|
componentCls,
|
|
colorError,
|
|
colorSuccess,
|
|
borderRadiusLG,
|
|
borderRadiusSM
|
|
} = token;
|
|
return {
|
|
[`${componentCls}-group`]: _extends(_extends(_extends({}, resetComponent(token)), genInputGroupStyle(token)), {
|
|
"&-rtl": {
|
|
direction: "rtl"
|
|
},
|
|
"&-wrapper": {
|
|
display: "inline-block",
|
|
width: "100%",
|
|
textAlign: "start",
|
|
verticalAlign: "top",
|
|
"&-rtl": {
|
|
direction: "rtl"
|
|
},
|
|
// Size
|
|
"&-lg": {
|
|
[`${componentCls}-group-addon`]: {
|
|
borderRadius: borderRadiusLG
|
|
}
|
|
},
|
|
"&-sm": {
|
|
[`${componentCls}-group-addon`]: {
|
|
borderRadius: borderRadiusSM
|
|
}
|
|
},
|
|
// Status
|
|
"&-status-error": {
|
|
[`${componentCls}-group-addon`]: {
|
|
color: colorError,
|
|
borderColor: colorError
|
|
}
|
|
},
|
|
"&-status-warning": {
|
|
[`${componentCls}-group-addon:last-child`]: {
|
|
color: colorSuccess,
|
|
borderColor: colorSuccess
|
|
}
|
|
}
|
|
}
|
|
})
|
|
};
|
|
};
|
|
const genSearchInputStyle = (token) => {
|
|
const {
|
|
componentCls,
|
|
antCls
|
|
} = token;
|
|
const searchPrefixCls = `${componentCls}-search`;
|
|
return {
|
|
[searchPrefixCls]: {
|
|
[`${componentCls}`]: {
|
|
"&:hover, &:focus": {
|
|
borderColor: token.colorPrimaryHover,
|
|
[`+ ${componentCls}-group-addon ${searchPrefixCls}-button:not(${antCls}-btn-primary)`]: {
|
|
borderInlineStartColor: token.colorPrimaryHover
|
|
}
|
|
}
|
|
},
|
|
[`${componentCls}-affix-wrapper`]: {
|
|
borderRadius: 0
|
|
},
|
|
// fix slight height diff in Firefox:
|
|
// https://ant.design/components/auto-complete-cn/#components-auto-complete-demo-certain-category
|
|
[`${componentCls}-lg`]: {
|
|
lineHeight: token.lineHeightLG - 2e-4
|
|
},
|
|
[`> ${componentCls}-group`]: {
|
|
[`> ${componentCls}-group-addon:last-child`]: {
|
|
insetInlineStart: -1,
|
|
padding: 0,
|
|
border: 0,
|
|
[`${searchPrefixCls}-button`]: {
|
|
paddingTop: 0,
|
|
paddingBottom: 0,
|
|
borderStartStartRadius: 0,
|
|
borderStartEndRadius: token.borderRadius,
|
|
borderEndEndRadius: token.borderRadius,
|
|
borderEndStartRadius: 0
|
|
},
|
|
[`${searchPrefixCls}-button:not(${antCls}-btn-primary)`]: {
|
|
color: token.colorTextDescription,
|
|
"&:hover": {
|
|
color: token.colorPrimaryHover
|
|
},
|
|
"&:active": {
|
|
color: token.colorPrimaryActive
|
|
},
|
|
[`&${antCls}-btn-loading::before`]: {
|
|
insetInlineStart: 0,
|
|
insetInlineEnd: 0,
|
|
insetBlockStart: 0,
|
|
insetBlockEnd: 0
|
|
}
|
|
}
|
|
}
|
|
},
|
|
[`${searchPrefixCls}-button`]: {
|
|
height: token.controlHeight,
|
|
"&:hover, &:focus": {
|
|
zIndex: 1
|
|
}
|
|
},
|
|
[`&-large ${searchPrefixCls}-button`]: {
|
|
height: token.controlHeightLG
|
|
},
|
|
[`&-small ${searchPrefixCls}-button`]: {
|
|
height: token.controlHeightSM
|
|
},
|
|
"&-rtl": {
|
|
direction: "rtl"
|
|
},
|
|
// ===================== Compact Item Customized Styles =====================
|
|
[`&${componentCls}-compact-item`]: {
|
|
[`&:not(${componentCls}-compact-last-item)`]: {
|
|
[`${componentCls}-group-addon`]: {
|
|
[`${componentCls}-search-button`]: {
|
|
marginInlineEnd: -token.lineWidth,
|
|
borderRadius: 0
|
|
}
|
|
}
|
|
},
|
|
[`&:not(${componentCls}-compact-first-item)`]: {
|
|
[`${componentCls},${componentCls}-affix-wrapper`]: {
|
|
borderRadius: 0
|
|
}
|
|
},
|
|
[`> ${componentCls}-group-addon ${componentCls}-search-button,
|
|
> ${componentCls},
|
|
${componentCls}-affix-wrapper`]: {
|
|
"&:hover,&:focus,&:active": {
|
|
zIndex: 2
|
|
}
|
|
},
|
|
[`> ${componentCls}-affix-wrapper-focused`]: {
|
|
zIndex: 2
|
|
}
|
|
}
|
|
}
|
|
};
|
|
};
|
|
function initInputToken(token) {
|
|
return merge(token, {
|
|
inputAffixPadding: token.paddingXXS,
|
|
inputPaddingVertical: Math.max(Math.round((token.controlHeight - token.fontSize * token.lineHeight) / 2 * 10) / 10 - token.lineWidth, 3),
|
|
inputPaddingVerticalLG: Math.ceil((token.controlHeightLG - token.fontSizeLG * token.lineHeightLG) / 2 * 10) / 10 - token.lineWidth,
|
|
inputPaddingVerticalSM: Math.max(Math.round((token.controlHeightSM - token.fontSize * token.lineHeight) / 2 * 10) / 10 - token.lineWidth, 0),
|
|
inputPaddingHorizontal: token.paddingSM - token.lineWidth,
|
|
inputPaddingHorizontalSM: token.paddingXS - token.lineWidth,
|
|
inputPaddingHorizontalLG: token.controlPaddingHorizontal - token.lineWidth,
|
|
inputBorderHoverColor: token.colorPrimaryHover,
|
|
inputBorderActiveColor: token.colorPrimaryHover
|
|
});
|
|
}
|
|
const genTextAreaStyle = (token) => {
|
|
const {
|
|
componentCls,
|
|
inputPaddingHorizontal,
|
|
paddingLG
|
|
} = token;
|
|
const textareaPrefixCls = `${componentCls}-textarea`;
|
|
return {
|
|
[textareaPrefixCls]: {
|
|
position: "relative",
|
|
[`${textareaPrefixCls}-suffix`]: {
|
|
position: "absolute",
|
|
top: 0,
|
|
insetInlineEnd: inputPaddingHorizontal,
|
|
bottom: 0,
|
|
zIndex: 1,
|
|
display: "inline-flex",
|
|
alignItems: "center",
|
|
margin: "auto"
|
|
},
|
|
[`&-status-error,
|
|
&-status-warning,
|
|
&-status-success,
|
|
&-status-validating`]: {
|
|
[`&${textareaPrefixCls}-has-feedback`]: {
|
|
[`${componentCls}`]: {
|
|
paddingInlineEnd: paddingLG
|
|
}
|
|
}
|
|
},
|
|
"&-show-count": {
|
|
// https://github.com/ant-design/ant-design/issues/33049
|
|
[`> ${componentCls}`]: {
|
|
height: "100%"
|
|
},
|
|
"&::after": {
|
|
color: token.colorTextDescription,
|
|
whiteSpace: "nowrap",
|
|
content: "attr(data-count)",
|
|
pointerEvents: "none",
|
|
float: "right"
|
|
}
|
|
},
|
|
"&-rtl": {
|
|
"&::after": {
|
|
float: "left"
|
|
}
|
|
}
|
|
}
|
|
};
|
|
};
|
|
const useStyle = genComponentStyleHook("Input", (token) => {
|
|
const inputToken = initInputToken(token);
|
|
return [
|
|
genInputStyle(inputToken),
|
|
genTextAreaStyle(inputToken),
|
|
genAffixStyle(inputToken),
|
|
genGroupStyle(inputToken),
|
|
genSearchInputStyle(inputToken),
|
|
// =====================================================
|
|
// == Space Compact ==
|
|
// =====================================================
|
|
genCompactItemStyle(inputToken)
|
|
];
|
|
});
|
|
|
|
export { genStatusStyle as a, genPlaceholderStyle as b, genActiveStyle as c, genDisabledStyle as d, genHoverStyle as e, genBasicInputStyle as g, initInputToken as i, useStyle as u };
|
|
//# sourceMappingURL=index-C1mihc8c.mjs.map
|