@aplus-frontend/antdv/es/input/style/otp.js

Vue basic component library maintained based on ant-design-vue

import { genComponentStyleHook } from '../../theme/internal';
import { initInputToken } from './index';
const genOTPInputStyle = 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.paddingXXS / 2
      },
      [`&${componentCls}-lg ${componentCls}-input`]: {
        paddingInline: token.paddingXS
      }
    }
  };
};
// ================ EXPORT =======================
export default genComponentStyleHook('Input', token => {
  const inputToken = initInputToken(token);
  return [genOTPInputStyle(inputToken)];
});