Browse Source
* refactor: input number cssinjs * refactor: rtl * chore: code clean * pref: better code style * test: fix lint * perf: better style * chore: code style * chore: use GenerateStyle * chore: remove useless pxpull/34493/head
MadCcc
3 years ago
committed by
GitHub
GitHub
4 changed files with 659 additions and 264 deletions
@ -1,235 +1,235 @@ |
|||
@import '../../style/themes/index'; |
|||
@import '../../style/mixins/index'; |
|||
@import '../../input/style/mixin'; |
|||
@import './affix'; |
|||
@import './status'; |
|||
|
|||
@input-number-prefix-cls: ~'@{ant-prefix}-input-number'; |
|||
@form-item-prefix-cls: ~'@{ant-prefix}-form-item'; |
|||
|
|||
.@{input-number-prefix-cls} { |
|||
.reset-component(); |
|||
.input(); |
|||
|
|||
//== Style for input-group: input with label, with button or dropdown... |
|||
&-group { |
|||
.reset-component(); |
|||
.input-group(~'@{input-number-prefix-cls}'); |
|||
|
|||
&-wrapper { |
|||
display: inline-block; |
|||
text-align: start; |
|||
vertical-align: top; // https://github.com/ant-design/ant-design/issues/6403 |
|||
} |
|||
} |
|||
|
|||
display: inline-block; |
|||
width: 90px; |
|||
margin: 0; |
|||
padding: 0; |
|||
border: @border-width-base @border-style-base @border-color-base; |
|||
border-radius: @border-radius-base; |
|||
|
|||
&-handler { |
|||
position: relative; |
|||
display: block; |
|||
width: 100%; |
|||
height: 50%; |
|||
overflow: hidden; |
|||
color: @text-color-secondary; |
|||
font-weight: bold; |
|||
line-height: 0; |
|||
text-align: center; |
|||
border-left: @border-width-base @border-style-base @input-number-handler-border-color; |
|||
transition: all 0.1s linear; |
|||
|
|||
&:active { |
|||
background: @input-number-handler-active-bg; |
|||
} |
|||
|
|||
&:hover &-up-inner, |
|||
&:hover &-down-inner { |
|||
color: @input-number-handler-hover-bg; |
|||
} |
|||
} |
|||
|
|||
&-handler-up-inner, |
|||
&-handler-down-inner { |
|||
.iconfont-mixin(); |
|||
|
|||
position: absolute; |
|||
right: 4px; |
|||
width: 12px; |
|||
height: 12px; |
|||
color: @text-color-secondary; |
|||
line-height: 12px; |
|||
transition: all 0.1s linear; |
|||
user-select: none; |
|||
} |
|||
|
|||
&:hover { |
|||
.hover(@input-number-hover-border-color); |
|||
& + .@{form-item-prefix-cls}-children-icon { |
|||
opacity: 0; |
|||
transition: opacity 0.24s linear 0.24s; |
|||
} |
|||
} |
|||
|
|||
&-focused { |
|||
.active(); |
|||
} |
|||
|
|||
&-disabled { |
|||
.disabled(); |
|||
.@{input-number-prefix-cls}-input { |
|||
cursor: not-allowed; |
|||
} |
|||
.@{input-number-prefix-cls}-handler-wrap { |
|||
display: none; |
|||
} |
|||
} |
|||
|
|||
&-readonly { |
|||
.@{input-number-prefix-cls}-handler-wrap { |
|||
display: none; |
|||
} |
|||
} |
|||
|
|||
&-input { |
|||
width: 100%; |
|||
height: @input-height-base - 2px; |
|||
padding: 0 @control-padding-horizontal - 1px; |
|||
text-align: left; |
|||
background-color: transparent; |
|||
border: 0; |
|||
border-radius: @border-radius-base; |
|||
outline: 0; |
|||
transition: all 0.3s linear; |
|||
appearance: textfield !important; |
|||
.placeholder(); |
|||
|
|||
&[type='number']::-webkit-inner-spin-button, |
|||
&[type='number']::-webkit-outer-spin-button { |
|||
margin: 0; |
|||
/* stylelint-disable-next-line property-no-vendor-prefix */ |
|||
-webkit-appearance: none; |
|||
appearance: none; |
|||
} |
|||
} |
|||
|
|||
&-lg { |
|||
padding: 0; |
|||
font-size: @font-size-lg; |
|||
|
|||
input { |
|||
height: @input-height-lg - 2px; |
|||
} |
|||
} |
|||
|
|||
&-sm { |
|||
padding: 0; |
|||
|
|||
input { |
|||
height: @input-height-sm - 2px; |
|||
padding: 0 @control-padding-horizontal-sm - 1px; |
|||
} |
|||
} |
|||
|
|||
&-handler-wrap { |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
width: 22px; |
|||
height: 100%; |
|||
background: @input-number-handler-bg; |
|||
border-radius: 0 @border-radius-base @border-radius-base 0; |
|||
opacity: 0; |
|||
transition: opacity 0.24s linear 0.1s; |
|||
|
|||
// Fix input number inside Menu makes icon too large |
|||
// We arise the selector priority by nest selector here |
|||
// https://github.com/ant-design/ant-design/issues/14367 |
|||
.@{input-number-prefix-cls}-handler { |
|||
.@{input-number-prefix-cls}-handler-up-inner, |
|||
.@{input-number-prefix-cls}-handler-down-inner { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
min-width: auto; |
|||
margin-right: 0; |
|||
font-size: 7px; |
|||
} |
|||
} |
|||
|
|||
.@{input-number-prefix-cls}-borderless & { |
|||
border-left-width: 0; |
|||
} |
|||
} |
|||
|
|||
&-handler-wrap:hover &-handler { |
|||
height: 40%; |
|||
} |
|||
|
|||
&:hover &-handler-wrap, |
|||
&-focused &-handler-wrap { |
|||
opacity: 1; |
|||
} |
|||
|
|||
&-handler-up { |
|||
border-top-right-radius: @border-radius-base; |
|||
cursor: pointer; |
|||
|
|||
&-inner { |
|||
top: 50%; |
|||
margin-top: -5px; |
|||
text-align: center; |
|||
} |
|||
|
|||
&:hover { |
|||
height: 60% !important; |
|||
} |
|||
} |
|||
|
|||
&-handler-down { |
|||
top: 0; |
|||
border-top: @border-width-base @border-style-base @border-color-base; |
|||
border-bottom-right-radius: @border-radius-base; |
|||
cursor: pointer; |
|||
|
|||
&-inner { |
|||
top: 50%; |
|||
text-align: center; |
|||
transform: translateY(-50%); |
|||
} |
|||
|
|||
&:hover { |
|||
height: 60% !important; |
|||
} |
|||
.@{input-number-prefix-cls}-borderless & { |
|||
border-top-width: 0; |
|||
} |
|||
} |
|||
|
|||
&-handler-up-disabled, |
|||
&-handler-down-disabled { |
|||
cursor: not-allowed; |
|||
} |
|||
|
|||
&-handler-up-disabled:hover &-handler-up-inner, |
|||
&-handler-down-disabled:hover &-handler-down-inner { |
|||
color: @disabled-color; |
|||
} |
|||
|
|||
&-borderless { |
|||
box-shadow: none; |
|||
} |
|||
|
|||
// ===================== Out Of Range ===================== |
|||
&-out-of-range { |
|||
input { |
|||
color: @error-color; |
|||
} |
|||
} |
|||
} |
|||
|
|||
@import './rtl'; |
|||
//@import '../../style/themes/index'; |
|||
//@import '../../style/mixins/index'; |
|||
//@import '../../input/style/mixin'; |
|||
//@import './affix'; |
|||
//@import './status'; |
|||
// |
|||
//@input-number-prefix-cls: ~'@{ant-prefix}-input-number'; |
|||
//@form-item-prefix-cls: ~'@{ant-prefix}-form-item'; |
|||
// |
|||
//.@{input-number-prefix-cls} { |
|||
// .reset-component(); |
|||
// .input(); |
|||
// |
|||
// //== Style for input-group: input with label, with button or dropdown... |
|||
// &-group { |
|||
// .reset-component(); |
|||
// .input-group(~'@{input-number-prefix-cls}'); |
|||
// |
|||
// &-wrapper { |
|||
// display: inline-block; |
|||
// text-align: start; |
|||
// vertical-align: top; // https://github.com/ant-design/ant-design/issues/6403 |
|||
// } |
|||
// } |
|||
// |
|||
// display: inline-block; |
|||
// width: 90px; |
|||
// margin: 0; |
|||
// padding: 0; |
|||
// border: @border-width-base @border-style-base @border-color-base; |
|||
// border-radius: @border-radius-base; |
|||
// |
|||
// &-handler { |
|||
// position: relative; |
|||
// display: block; |
|||
// width: 100%; |
|||
// height: 50%; |
|||
// overflow: hidden; |
|||
// color: @text-color-secondary; |
|||
// font-weight: bold; |
|||
// line-height: 0; |
|||
// text-align: center; |
|||
// border-left: @border-width-base @border-style-base @input-number-handler-border-color; |
|||
// transition: all 0.1s linear; |
|||
// |
|||
// &:active { |
|||
// background: @input-number-handler-active-bg; |
|||
// } |
|||
// |
|||
// &:hover &-up-inner, |
|||
// &:hover &-down-inner { |
|||
// color: @input-number-handler-hover-bg; |
|||
// } |
|||
// } |
|||
// |
|||
// &-handler-up-inner, |
|||
// &-handler-down-inner { |
|||
// .iconfont-mixin(); |
|||
// |
|||
// position: absolute; |
|||
// right: 4px; |
|||
// width: 12px; |
|||
// height: 12px; |
|||
// color: @text-color-secondary; |
|||
// line-height: 12px; |
|||
// transition: all 0.1s linear; |
|||
// user-select: none; |
|||
// } |
|||
// |
|||
// &:hover { |
|||
// .hover(@input-number-hover-border-color); |
|||
// & + .@{form-item-prefix-cls}-children-icon { |
|||
// opacity: 0; |
|||
// transition: opacity 0.24s linear 0.24s; |
|||
// } |
|||
// } |
|||
// |
|||
// &-focused { |
|||
// .active(); |
|||
// } |
|||
// |
|||
// &-disabled { |
|||
// .disabled(); |
|||
// .@{input-number-prefix-cls}-input { |
|||
// cursor: not-allowed; |
|||
// } |
|||
// .@{input-number-prefix-cls}-handler-wrap { |
|||
// display: none; |
|||
// } |
|||
// } |
|||
// |
|||
// &-readonly { |
|||
// .@{input-number-prefix-cls}-handler-wrap { |
|||
// display: none; |
|||
// } |
|||
// } |
|||
// |
|||
// &-input { |
|||
// width: 100%; |
|||
// height: @input-height-base - 2px; |
|||
// padding: 0 @control-padding-horizontal - 1px; |
|||
// text-align: left; |
|||
// background-color: transparent; |
|||
// border: 0; |
|||
// border-radius: @border-radius-base; |
|||
// outline: 0; |
|||
// transition: all 0.3s linear; |
|||
// appearance: textfield !important; |
|||
// .placeholder(); |
|||
// |
|||
// &[type='number']::-webkit-inner-spin-button, |
|||
// &[type='number']::-webkit-outer-spin-button { |
|||
// margin: 0; |
|||
// /* stylelint-disable-next-line property-no-vendor-prefix */ |
|||
// -webkit-appearance: none; |
|||
// appearance: none; |
|||
// } |
|||
// } |
|||
// |
|||
// &-lg { |
|||
// padding: 0; |
|||
// font-size: @font-size-lg; |
|||
// |
|||
// input { |
|||
// height: @input-height-lg - 2px; |
|||
// } |
|||
// } |
|||
// |
|||
// &-sm { |
|||
// padding: 0; |
|||
// |
|||
// input { |
|||
// height: @input-height-sm - 2px; |
|||
// padding: 0 @control-padding-horizontal-sm - 1px; |
|||
// } |
|||
// } |
|||
// |
|||
// &-handler-wrap { |
|||
// position: absolute; |
|||
// top: 0; |
|||
// right: 0; |
|||
// width: 22px; |
|||
// height: 100%; |
|||
// background: @input-number-handler-bg; |
|||
// border-radius: 0 @border-radius-base @border-radius-base 0; |
|||
// opacity: 0; |
|||
// transition: opacity 0.24s linear 0.1s; |
|||
// |
|||
// // Fix input number inside Menu makes icon too large |
|||
// // We arise the selector priority by nest selector here |
|||
// // https://github.com/ant-design/ant-design/issues/14367 |
|||
// .@{input-number-prefix-cls}-handler { |
|||
// .@{input-number-prefix-cls}-handler-up-inner, |
|||
// .@{input-number-prefix-cls}-handler-down-inner { |
|||
// display: flex; |
|||
// align-items: center; |
|||
// justify-content: center; |
|||
// min-width: auto; |
|||
// margin-right: 0; |
|||
// font-size: 7px; |
|||
// } |
|||
// } |
|||
// |
|||
// .@{input-number-prefix-cls}-borderless & { |
|||
// border-left-width: 0; |
|||
// } |
|||
// } |
|||
// |
|||
// &-handler-wrap:hover &-handler { |
|||
// height: 40%; |
|||
// } |
|||
// |
|||
// &:hover &-handler-wrap, |
|||
// &-focused &-handler-wrap { |
|||
// opacity: 1; |
|||
// } |
|||
// |
|||
// &-handler-up { |
|||
// border-top-right-radius: @border-radius-base; |
|||
// cursor: pointer; |
|||
// |
|||
// &-inner { |
|||
// top: 50%; |
|||
// margin-top: -5px; |
|||
// text-align: center; |
|||
// } |
|||
// |
|||
// &:hover { |
|||
// height: 60% !important; |
|||
// } |
|||
// } |
|||
// |
|||
// &-handler-down { |
|||
// top: 0; |
|||
// border-top: @border-width-base @border-style-base @border-color-base; |
|||
// border-bottom-right-radius: @border-radius-base; |
|||
// cursor: pointer; |
|||
// |
|||
// &-inner { |
|||
// top: 50%; |
|||
// text-align: center; |
|||
// transform: translateY(-50%); |
|||
// } |
|||
// |
|||
// &:hover { |
|||
// height: 60% !important; |
|||
// } |
|||
// .@{input-number-prefix-cls}-borderless & { |
|||
// border-top-width: 0; |
|||
// } |
|||
// } |
|||
// |
|||
// &-handler-up-disabled, |
|||
// &-handler-down-disabled { |
|||
// cursor: not-allowed; |
|||
// } |
|||
// |
|||
// &-handler-up-disabled:hover &-handler-up-inner, |
|||
// &-handler-down-disabled:hover &-handler-down-inner { |
|||
// color: @disabled-color; |
|||
// } |
|||
// |
|||
// &-borderless { |
|||
// box-shadow: none; |
|||
// } |
|||
// |
|||
// // ===================== Out Of Range ===================== |
|||
// &-out-of-range { |
|||
// input { |
|||
// color: @error-color; |
|||
// } |
|||
// } |
|||
//} |
|||
// |
|||
//@import './rtl'; |
|||
|
|||
@ -1,4 +1,389 @@ |
|||
import '../../style/index.less'; |
|||
import './index.less'; |
|||
// deps-lint-skip-all
|
|||
import { |
|||
GenerateStyle, |
|||
resetComponent, |
|||
resetIcon, |
|||
UseComponentStyleResult, |
|||
useStyleRegister, |
|||
useToken, |
|||
} from '../../_util/theme'; |
|||
import { |
|||
genActiveStyle, |
|||
genBasicInputStyle, |
|||
genDisabledStyle, |
|||
genHoverStyle, |
|||
genInputGroupStyle, |
|||
genPlaceholderStyle, |
|||
genStatusStyle, |
|||
initInputToken, |
|||
InputToken, |
|||
} from '../../input/style'; |
|||
|
|||
// deps-lint-skip: form
|
|||
interface InputNumberToken extends InputToken { |
|||
prefixCls: string; |
|||
inputNumberCls: string; |
|||
inputNumberHandlerActiveBgColor: string; |
|||
} |
|||
|
|||
const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumberToken) => { |
|||
const { |
|||
inputNumberCls, |
|||
borderWidth, |
|||
borderStyle, |
|||
borderColor, |
|||
borderRadius, |
|||
fontSizeLG, |
|||
controlHeightLG, |
|||
controlHeightSM, |
|||
errorColor, |
|||
paddingXS, |
|||
textColorSecondary, |
|||
durationFast, |
|||
inputNumberHandlerActiveBgColor, |
|||
primaryColor, |
|||
marginXXS, |
|||
controlHeight, |
|||
inputPaddingHorizontal, |
|||
duration, |
|||
componentBackground, |
|||
durationMid, |
|||
textColorDisabled, |
|||
prefixCls, |
|||
} = token; |
|||
|
|||
return { |
|||
[inputNumberCls]: { |
|||
...resetComponent(token), |
|||
...genBasicInputStyle(prefixCls, token), |
|||
...genStatusStyle(prefixCls, token), |
|||
|
|||
display: 'inline-block', |
|||
width: 90, // FIXME: magic number
|
|||
margin: 0, |
|||
padding: 0, |
|||
border: `${borderWidth}px ${borderStyle} ${borderColor}`, |
|||
borderRadius, |
|||
|
|||
'&-rtl': { |
|||
direction: 'rtl', |
|||
|
|||
[`${inputNumberCls}-input`]: { |
|||
direction: 'rtl', |
|||
}, |
|||
}, |
|||
|
|||
[`&:hover ${inputNumberCls}-handler-wrap, &-focused ${inputNumberCls}-handler-wrap`]: { |
|||
opacity: 1, |
|||
}, |
|||
|
|||
'&-lg': { |
|||
padding: 0, |
|||
fontSize: fontSizeLG, |
|||
|
|||
[`input${inputNumberCls}-input`]: { |
|||
height: controlHeightLG - 2 * borderWidth, |
|||
}, |
|||
}, |
|||
|
|||
'&-sm': { |
|||
padding: 0, |
|||
|
|||
[`input${inputNumberCls}-input`]: { |
|||
height: controlHeightSM - 2 * borderWidth, |
|||
padding: `0 ${paddingXS - borderWidth}px`, |
|||
}, |
|||
}, |
|||
|
|||
'&:hover': { |
|||
...genHoverStyle(token), |
|||
}, |
|||
|
|||
'&-focused': { |
|||
...genActiveStyle(token), |
|||
}, |
|||
|
|||
'&-disabled': { |
|||
...genDisabledStyle(token), |
|||
[`${inputNumberCls}-input`]: { |
|||
cursor: 'not-allowed', |
|||
}, |
|||
[`${inputNumberCls}-handler-wrap`]: { |
|||
display: 'none', |
|||
}, |
|||
}, |
|||
|
|||
'&-readonly': { |
|||
[`${inputNumberCls}-handler-wrap`]: { |
|||
display: 'none', |
|||
}, |
|||
}, |
|||
|
|||
'&-borderless': { |
|||
boxShadow: 'none', |
|||
}, |
|||
|
|||
// ===================== Out Of Range =====================
|
|||
'&-out-of-range': { |
|||
input: { |
|||
color: errorColor, |
|||
}, |
|||
}, |
|||
|
|||
// Style for input-group: input with label, with button or dropdown...
|
|||
'&-group': { |
|||
...resetComponent(token), |
|||
...genInputGroupStyle(prefixCls, token), |
|||
|
|||
'&-wrapper': { |
|||
display: 'inline-block', |
|||
textAlign: 'start', |
|||
verticalAlign: 'top', // https://github.com/ant-design/ant-design/issues/6403
|
|||
|
|||
[`${inputNumberCls}-affix-wrapper`]: { |
|||
width: '100%', |
|||
}, |
|||
}, |
|||
}, |
|||
|
|||
[inputNumberCls]: { |
|||
'&-handler': { |
|||
position: 'relative', |
|||
display: 'block', |
|||
width: '100%', |
|||
height: '50%', |
|||
overflow: 'hidden', |
|||
color: textColorSecondary, |
|||
fontWeight: 'bold', |
|||
lineHeight: 0, |
|||
textAlign: 'center', |
|||
borderInlineStart: `${borderWidth}px ${borderStyle} ${borderColor}`, |
|||
transition: `all ${durationFast} linear`, |
|||
|
|||
'&:active': { |
|||
background: inputNumberHandlerActiveBgColor, |
|||
}, |
|||
|
|||
'&:hover &-up-inner, &:hover &-down-inner': { |
|||
color: primaryColor, |
|||
}, |
|||
}, |
|||
|
|||
'&-handler-up-inner, &-handler-down-inner': { |
|||
...resetIcon(), |
|||
|
|||
position: 'absolute', |
|||
insetInlineEnd: marginXXS, |
|||
width: controlHeightSM / 2, |
|||
height: controlHeightSM / 2, |
|||
color: textColorSecondary, |
|||
lineHeight: controlHeightSM / 2, |
|||
transition: `all ${durationFast} linear`, |
|||
userSelect: 'none', |
|||
}, |
|||
|
|||
'&-input': { |
|||
width: '100%', |
|||
height: controlHeight - 2 * borderWidth, |
|||
padding: `0 ${inputPaddingHorizontal - borderWidth}px`, |
|||
textAlign: 'start', |
|||
backgroundColor: 'transparent', |
|||
border: 0, |
|||
borderRadius, |
|||
outline: 0, |
|||
transition: `all ${duration} linear`, |
|||
appearance: 'textfield', // FIXME: important
|
|||
...genPlaceholderStyle(), |
|||
|
|||
'&[type="number"]::-webkit-inner-spin-button, &[type="number"]::-webkit-outer-spin-button': |
|||
{ |
|||
margin: 0, |
|||
/* stylelint-disable-next-line property-no-vendor-prefix */ |
|||
webkitAppearance: 'none', |
|||
appearance: 'none', |
|||
}, |
|||
}, |
|||
|
|||
'&-handler-wrap': { |
|||
position: 'absolute', |
|||
insetBlockStart: 0, |
|||
insetInlineEnd: 0, |
|||
width: 22, // FIXME: magic number
|
|||
height: '100%', |
|||
background: componentBackground, |
|||
borderStartStartRadius: 0, |
|||
borderStartEndRadius: borderRadius, |
|||
borderEndEndRadius: borderRadius, |
|||
borderEndStartRadius: 0, |
|||
opacity: 0, |
|||
transition: `opacity ${durationMid} linear ${durationFast}`, |
|||
|
|||
// Fix input number inside Menu makes icon too large
|
|||
// We arise the selector priority by nest selector here
|
|||
// https://github.com/ant-design/ant-design/issues/14367
|
|||
[`${inputNumberCls}-handler`]: { |
|||
[`${inputNumberCls}-handler-up-inner,
|
|||
${inputNumberCls}-handler-down-inner`]: {
|
|||
display: 'flex', |
|||
alignItems: 'center', |
|||
justifyContent: 'center', |
|||
minWidth: 'auto', |
|||
marginRight: 0, |
|||
fontSize: 7, // FIXME: magic
|
|||
}, |
|||
}, |
|||
|
|||
[`${inputNumberCls}-borderless &`]: { |
|||
borderInlineStartWidth: 0, |
|||
}, |
|||
|
|||
[`&:hover ${inputNumberCls}-handler`]: { |
|||
height: '40%', |
|||
}, |
|||
}, |
|||
|
|||
'&-handler-up': { |
|||
borderStartEndRadius: borderRadius, |
|||
cursor: 'pointer', |
|||
|
|||
'&-inner': { |
|||
top: '50%', |
|||
marginTop: -5, // FIXME: magic
|
|||
textAlign: 'center', |
|||
}, |
|||
|
|||
'&:hover': { |
|||
height: '60% !important', |
|||
}, |
|||
}, |
|||
|
|||
'&-handler-down': { |
|||
top: 0, |
|||
borderBlockStart: `${borderWidth}px ${borderStyle} ${borderColor}`, |
|||
borderEndEndRadius: borderRadius, |
|||
cursor: 'pointer', |
|||
|
|||
'&-inner': { |
|||
top: '50%', |
|||
textAlign: 'center', |
|||
transform: 'translateY(-50%)', |
|||
}, |
|||
|
|||
'&:hover': { |
|||
height: '60% !important', |
|||
}, |
|||
|
|||
[`${inputNumberCls}-borderless &`]: { |
|||
borderBlockStartWidth: 0, |
|||
}, |
|||
}, |
|||
'&-handler-up-disabled, &-handler-down-disabled': { |
|||
cursor: 'not-allowed', |
|||
}, |
|||
|
|||
[`&-handler-up-disabled:hover &-handler-up-inner,
|
|||
&-handler-down-disabled:hover &-handler-down-inner`]: {
|
|||
color: textColorDisabled, |
|||
}, |
|||
}, |
|||
}, |
|||
}; |
|||
}; |
|||
|
|||
const genAffixWrapperStyles: GenerateStyle<InputNumberToken> = (token: InputNumberToken) => { |
|||
const { inputNumberCls, inputPaddingHorizontal, inputAffixMargin, prefixCls } = token; |
|||
|
|||
return { |
|||
[`${inputNumberCls}-affix-wrapper`]: { |
|||
...genBasicInputStyle(prefixCls, token), |
|||
...genStatusStyle(prefixCls, token), |
|||
// or number handler will cover form status
|
|||
position: 'relative', |
|||
display: 'inline-flex', |
|||
width: 90, // FIXME: magic
|
|||
padding: 0, |
|||
paddingInlineStart: inputPaddingHorizontal, |
|||
|
|||
'&:not(&-disabled):hover': { |
|||
...genHoverStyle(token), |
|||
zIndex: 1, |
|||
}, |
|||
|
|||
'&-focused, &:focus': { |
|||
zIndex: 1, |
|||
}, |
|||
|
|||
'&-disabled': { |
|||
[`${inputNumberCls}[disabled]`]: { |
|||
background: 'transparent', |
|||
}, |
|||
}, |
|||
|
|||
[`> div${inputNumberCls}`]: { |
|||
width: '100%', |
|||
border: 'none', |
|||
outline: 'none', |
|||
|
|||
[`&${inputNumberCls}-focused`]: { |
|||
boxShadow: 'none !important', |
|||
}, |
|||
}, |
|||
|
|||
[`input${inputNumberCls}-input`]: { |
|||
padding: 0, |
|||
}, |
|||
|
|||
'&::before': { |
|||
width: 0, |
|||
visibility: 'hidden', |
|||
content: '"\\a0"', |
|||
}, |
|||
|
|||
[`${inputNumberCls}-handler-wrap`]: { |
|||
zIndex: 2, |
|||
}, |
|||
|
|||
[inputNumberCls]: { |
|||
'&-prefix, &-suffix': { |
|||
display: 'flex', |
|||
flex: 'none', |
|||
alignItems: 'center', |
|||
pointerEvents: 'none', |
|||
}, |
|||
|
|||
'&-prefix': { |
|||
marginInlineEnd: inputAffixMargin, |
|||
}, |
|||
|
|||
'&-suffix': { |
|||
position: 'absolute', |
|||
insetBlockStart: 0, |
|||
insetInlineEnd: 0, |
|||
zIndex: 1, |
|||
height: '100%', |
|||
marginInlineEnd: inputPaddingHorizontal, |
|||
marginInlineStart: inputAffixMargin, |
|||
}, |
|||
}, |
|||
}, |
|||
}; |
|||
}; |
|||
|
|||
// ============================== Export ==============================
|
|||
export default function useStyle(prefixCls: string): UseComponentStyleResult { |
|||
const [theme, token, hashId] = useToken(); |
|||
|
|||
const inputNumberToken: InputNumberToken = { |
|||
...initInputToken(token), |
|||
prefixCls, |
|||
inputNumberCls: `.${prefixCls}`, |
|||
inputNumberHandlerActiveBgColor: '#f4f4f4', // FIXME: magic number
|
|||
}; |
|||
|
|||
return [ |
|||
useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [ |
|||
genInputNumberStyles(inputNumberToken), |
|||
genAffixWrapperStyles(inputNumberToken), |
|||
]), |
|||
hashId, |
|||
]; |
|||
} |
|||
|
|||
Loading…
Reference in new issue