mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-13 15:49:10 +08:00
100fa29bef
* chore: basic control * chore: input instad * docs: update demo * chore: adjust operation interactive * chore: lock selection * chore: fix patch logic * chore: merge logic * chore: patch autoFocus * test: update snapshot * test: add test case * test: coverage * chore: update size limit * docs: update docs * test: fix test case * chore: update comment * refactor: change to length * chore: blur all * chore: size limit
48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
import type { GenerateStyle } from '../../theme/internal';
|
|
import { genStyleHooks, mergeToken } from '../../theme/internal';
|
|
import type { InputToken } from './token';
|
|
import { initComponentToken, initInputToken } from './token';
|
|
|
|
// =============================== OTP ================================
|
|
const genOTPStyle: GenerateStyle<InputToken> = (token) => {
|
|
const { componentCls, paddingXS } = token;
|
|
|
|
return {
|
|
[`${componentCls}`]: {
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
flexWrap: 'nowrap',
|
|
columnGap: paddingXS,
|
|
|
|
'&-rtl': {
|
|
direction: 'rtl',
|
|
},
|
|
|
|
[`${componentCls}-input`]: {
|
|
textAlign: 'center',
|
|
paddingInline: token.paddingXXS,
|
|
},
|
|
|
|
// ================= Size =================
|
|
[`&${componentCls}-sm ${componentCls}-input`]: {
|
|
paddingInline: token.calc(token.paddingXXS).div(2).equal(),
|
|
},
|
|
|
|
[`&${componentCls}-lg ${componentCls}-input`]: {
|
|
paddingInline: token.paddingXS,
|
|
},
|
|
},
|
|
};
|
|
};
|
|
|
|
// ============================== Export ==============================
|
|
export default genStyleHooks(
|
|
['Input', 'OTP'],
|
|
(token) => {
|
|
const inputToken = mergeToken<InputToken>(token, initInputToken(token));
|
|
|
|
return [genOTPStyle(inputToken)];
|
|
},
|
|
initComponentToken,
|
|
);
|