fix: Input replace '.ant' with antCls (#36937)

* fix: Input replace '.ant' with antCls

* chore: update eslint rules
This commit is contained in:
MadCcc 2022-08-08 15:50:49 +08:00 committed by GitHub
parent 0cbd73fa8a
commit a5588f631e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -180,7 +180,7 @@ export const genBasicInputStyle = (token: InputToken): CSSObject => ({
});
export const genInputGroupStyle = (token: InputToken): CSSObject => {
const { prefixCls } = token;
const { prefixCls, antCls } = token;
return {
position: 'relative',
@ -208,11 +208,11 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
},
// Fix https://github.com/ant-design/ant-design/issues/5754
'&-lg .ant-select-single .ant-select-selector': {
[`&-lg ${antCls}-select-single ${antCls}-select-selector`]: {
height: token.controlHeightLG,
},
'&-sm .ant-select-single .ant-select-selector': {
[`&-sm ${antCls}-select-single ${antCls}-select-selector`]: {
height: token.controlHeightSM,
},
@ -253,11 +253,11 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
transition: `all ${token.motionDurationSlow}`,
// Reset Select's style in addon
'.ant-select': {
[`${antCls}-select`]: {
margin: `-${token.inputPaddingVertical + 1}px -${token.inputPaddingHorizontal}px`,
'&.ant-select-single:not(.ant-select-customize-input)': {
'.ant-select-selector': {
[`&${antCls}-select-single:not(${antCls}-select-customize-input)`]: {
[`${antCls}-select-selector`]: {
backgroundColor: 'inherit',
border: `${token.controlLineWidth}px ${token.controlLineType} transparent`,
boxShadow: 'none',
@ -265,17 +265,17 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
},
'&-open, &-focused': {
'.ant-select-selector': {
[`${antCls}-select-selector`]: {
color: token.colorPrimary,
},
},
},
// https://github.com/ant-design/ant-design/issues/31333
'.ant-cascader-picker': {
[`${antCls}-cascader-picker`]: {
margin: `-9px -${token.inputPaddingHorizontal}px`,
backgroundColor: 'transparent',
'.ant-cascader-input': {
[`${antCls}-cascader-input`]: {
textAlign: 'start',
border: 0,
boxShadow: 'none',
@ -319,7 +319,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
borderEndEndRadius: 0,
// Reset Select's style in addon
'.ant-select .ant-select-selector': {
[`${antCls}-select ${antCls}-select-selector`]: {
borderStartEndRadius: 0,
borderEndEndRadius: 0,
},
@ -342,7 +342,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
borderEndStartRadius: 0,
// Reset Select's style in addon
'.ant-select .ant-select-selector': {
[`${antCls}-select ${antCls}-select-selector`]: {
borderStartStartRadius: 0,
borderEndStartRadius: 0,
},
@ -393,7 +393,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
display: 'inline-flex',
},
'& > .ant-picker-range': {
[`& > ${antCls}-picker-range`]: {
display: 'inline-flex',
},
@ -408,9 +408,9 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
},
// reset border for Select, DatePicker, AutoComplete, Cascader, Mention, TimePicker, Input
[`& > .ant-select > .ant-select-selector,
& > .ant-select-auto-complete .${prefixCls},
& > .ant-cascader-picker .${prefixCls},
[`& > ${antCls}-select > ${antCls}-select-selector,
& > ${antCls}-select-auto-complete .${prefixCls},
& > ${antCls}-cascader-picker .${prefixCls},
& > .${prefixCls}-group-wrapper .${prefixCls}`]: {
borderInlineEndWidth: token.controlLineWidth,
borderRadius: 0,
@ -424,34 +424,34 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
},
},
'& > .ant-select-focused': {
[`& > ${antCls}-select-focused`]: {
zIndex: 1,
},
// update z-index for arrow icon
'& > .ant-select > .ant-select-arrow': {
[`& > ${antCls}-select > ${antCls}-select-arrow`]: {
zIndex: 1, // https://github.com/ant-design/ant-design/issues/20371
},
[`& > *:first-child,
& > .ant-select:first-child > .ant-select-selector,
& > .ant-select-auto-complete:first-child .${prefixCls},
& > .ant-cascader-picker:first-child .${prefixCls}`]: {
& > ${antCls}-select:first-child > ${antCls}-select-selector,
& > ${antCls}-select-auto-complete:first-child .${prefixCls},
& > ${antCls}-cascader-picker:first-child .${prefixCls}`]: {
borderStartStartRadius: token.controlRadius,
borderEndStartRadius: token.controlRadius,
},
[`& > *:last-child,
& > .ant-select:last-child > .ant-select-selector,
& > .ant-cascader-picker:last-child .${prefixCls},
& > .ant-cascader-picker-focused:last-child .${prefixCls}`]: {
& > ${antCls}-select:last-child > ${antCls}-select-selector,
& > ${antCls}-cascader-picker:last-child .${prefixCls},
& > ${antCls}-cascader-picker-focused:last-child .${prefixCls}`]: {
borderInlineEndWidth: token.controlLineWidth,
borderStartEndRadius: token.controlRadius,
borderEndEndRadius: token.controlRadius,
},
// https://github.com/ant-design/ant-design/issues/12493
[`& > .ant-select-auto-complete .${prefixCls}`]: {
[`& > ${antCls}-select-auto-complete .${prefixCls}`]: {
verticalAlign: 'top',
},
@ -694,7 +694,7 @@ const genGroupStyle: GenerateStyle<InputToken> = (token: InputToken) => {
};
const genSearchInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
const { prefixCls } = token;
const { prefixCls, antCls } = token;
const searchPrefixCls = `.${prefixCls}-search`;
return {
[searchPrefixCls]: {
@ -734,10 +734,10 @@ const genSearchInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
borderEndStartRadius: 0,
},
[`${searchPrefixCls}-button:not(.ant-btn-primary)`]: {
[`${searchPrefixCls}-button:not(${antCls}-btn-primary)`]: {
color: token.colorTextDescription,
'&.ant-btn-loading::before': {
[`&${antCls}-btn-loading::before`]: {
insetInlineStart: 0,
insetInlineEnd: 0,
insetBlockStart: 0,