UNPKG

antd-v5

Version:

An enterprise-class UI design language and React components implementation

83 lines (82 loc) 2.68 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.default = void 0; var _multiple = require("../../select/style/multiple"); var _internal = require("../../theme/internal"); const genSize = (token, suffix) => { const { componentCls, selectHeight, fontHeight, lineWidth, calc } = token; const suffixCls = suffix ? `${componentCls}-${suffix}` : ''; const height = token.calc(fontHeight).add(2).equal(); const restHeight = () => calc(selectHeight).sub(height).sub(calc(lineWidth).mul(2)); const paddingTop = token.max(restHeight().div(2).equal(), 0); const paddingBottom = token.max(restHeight().sub(paddingTop).equal(), 0); return [(0, _multiple.genSelectionStyle)(token, suffix), { [`${componentCls}-multiple${suffixCls}`]: { paddingTop, paddingBottom, paddingInlineStart: paddingTop } }]; }; const genPickerMultipleStyle = token => { const { componentCls, calc, lineWidth } = token; const smallToken = (0, _internal.mergeToken)(token, { fontHeight: token.fontSize, selectHeight: token.controlHeightSM, multipleSelectItemHeight: token.controlHeightXS, borderRadius: token.borderRadiusSM, borderRadiusSM: token.borderRadiusXS }); const largeToken = (0, _internal.mergeToken)(token, { fontHeight: calc(token.multipleItemHeightLG).sub(calc(lineWidth).mul(2).equal()).equal(), fontSize: token.fontSizeLG, selectHeight: token.controlHeightLG, multipleSelectItemHeight: token.multipleItemHeightLG, borderRadius: token.borderRadiusLG, borderRadiusSM: token.borderRadius }); return [ // ======================== Size ======================== genSize(smallToken, 'small'), genSize(token), genSize(largeToken, 'large'), // ====================== Selection ====================== (0, _multiple.genSelectionStyle)(token), { [`${componentCls}${componentCls}-multiple`]: { width: '100%', // ==================== Selector ===================== [`${componentCls}-selector`]: { flex: 'auto', padding: 0, '&:after': { margin: 0 } }, // ==================== Selection ==================== [`${componentCls}-selection-item`]: { marginBlock: 0 }, // ====================== Input ====================== // Input is `readonly`, which is used for a11y only [`${componentCls}-multiple-input`]: { width: 0, height: 0, border: 0, visibility: 'hidden', position: 'absolute', zIndex: -1 } } }]; }; var _default = exports.default = genPickerMultipleStyle;