UNPKG

antd

Version:

An enterprise-class UI design language and React components implementation

594 lines (575 loc) • 24.1 kB
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty"; import _extends from "@babel/runtime/helpers/esm/extends"; import { genComponentStyleHook, mergeToken } from '../../theme'; import { clearFix, resetComponent } from '../../style'; export var genPlaceholderStyle = function genPlaceholderStyle(color) { return { // Firefox '&::-moz-placeholder': { opacity: 1 }, '&::placeholder': { color: color, userSelect: 'none' // https://github.com/ant-design/ant-design/pull/32639 }, '&:placeholder-shown': { textOverflow: 'ellipsis' } }; }; export var genHoverStyle = function genHoverStyle(token) { return { borderColor: token.inputBorderHoverColor, borderInlineEndWidth: token.controlLineWidth }; }; export var genActiveStyle = function genActiveStyle(token) { return { borderColor: token.inputBorderHoverColor, boxShadow: "0 0 0 ".concat(token.controlOutlineWidth, "px ").concat(token.controlOutline), borderInlineEndWidth: token.controlLineWidth, outline: 0 }; }; export var genDisabledStyle = function genDisabledStyle(token) { return { color: token.colorTextDisabled, backgroundColor: token.colorBgContainerDisabled, borderColor: token.colorBorder, boxShadow: 'none', cursor: 'not-allowed', opacity: 1, '&:hover': _extends({}, genHoverStyle(mergeToken(token, { inputBorderHoverColor: token.colorBorder }))) }; }; var genInputLargeStyle = function genInputLargeStyle(token) { var inputPaddingVerticalLG = token.inputPaddingVerticalLG, inputPaddingHorizontal = token.inputPaddingHorizontal, fontSizeLG = token.fontSizeLG, controlRadiusLG = token.controlRadiusLG; return { padding: "".concat(inputPaddingVerticalLG, "px ").concat(inputPaddingHorizontal, "px"), fontSize: fontSizeLG, borderRadius: controlRadiusLG }; }; export var genInputSmallStyle = function genInputSmallStyle(token) { return { padding: "".concat(token.inputPaddingVerticalSM, "px ").concat(token.controlPaddingHorizontalSM - 1, "px"), borderRadius: token.controlRadiusSM }; }; export var genStatusStyle = function genStatusStyle(token) { var prefixCls = token.prefixCls, colorError = token.colorError, colorWarning = token.colorWarning, colorErrorOutline = token.colorErrorOutline, colorWarningOutline = token.colorWarningOutline, colorErrorBorderHover = token.colorErrorBorderHover, colorWarningBorderHover = token.colorWarningBorderHover; return { '&-status-error:not(&-disabled):not(&-borderless)&': _defineProperty({ borderColor: colorError, '&:hover': { borderColor: colorErrorBorderHover }, '&:focus, &-focused': _extends({}, genActiveStyle(mergeToken(token, { inputBorderActiveColor: colorError, inputBorderHoverColor: colorError, controlOutline: colorErrorOutline }))) }, ".".concat(prefixCls, "-prefix"), { color: colorError }), '&-status-warning:not(&-disabled):not(&-borderless)&': _defineProperty({ borderColor: colorWarning, '&:hover': { borderColor: colorWarningBorderHover }, '&:focus, &-focused': _extends({}, genActiveStyle(mergeToken(token, { inputBorderActiveColor: colorWarning, inputBorderHoverColor: colorWarning, controlOutline: colorWarningOutline }))) }, ".".concat(prefixCls, "-prefix"), { color: colorWarning }) }; }; export var genBasicInputStyle = function genBasicInputStyle(token) { return _extends(_extends({ position: 'relative', display: 'inline-block', width: '100%', minWidth: 0, padding: "".concat(token.inputPaddingVertical, "px ").concat(token.inputPaddingHorizontal, "px"), color: token.colorText, fontSize: token.fontSize, lineHeight: token.lineHeight, backgroundColor: token.colorBgContainer, backgroundImage: 'none', borderWidth: token.controlLineWidth, borderStyle: token.controlLineType, borderColor: token.colorBorder, borderRadius: token.controlRadius, transition: "all ".concat(token.motionDurationFast) }, genPlaceholderStyle(token.colorTextPlaceholder)), { '&:hover': _extends({}, genHoverStyle(token)), '&:focus, &-focused': _extends({}, genActiveStyle(token)), '&-disabled, &[disabled]': _extends({}, genDisabledStyle(token)), '&-borderless': { '&, &:hover, &:focus, &-focused, &-disabled, &[disabled]': { backgroundColor: 'transparent', border: 'none', boxShadow: 'none' } }, // Reset height for `textarea`s 'textarea&': { maxWidth: '100%', height: 'auto', minHeight: token.controlHeight, lineHeight: token.lineHeight, verticalAlign: 'bottom', transition: "all ".concat(token.motionDurationSlow, ", height 0s") }, '&-textarea': { '&-rtl': { direction: 'rtl' } }, // Size '&-lg': _extends({}, genInputLargeStyle(token)), '&-sm': _extends({}, genInputSmallStyle(token)), '&-rtl': { direction: 'rtl' } }); }; export var genInputGroupStyle = function genInputGroupStyle(token) { var _$concat, _addon, _$concat3, _$concat4, _$concat$concat5, _extends2, _ref; var prefixCls = token.prefixCls, antCls = token.antCls; return _ref = { position: 'relative', display: 'table', width: '100%', borderCollapse: 'separate', borderSpacing: 0 }, _defineProperty(_ref, "&[class*='col-']", { paddingInlineEnd: token.paddingXS, '&:last-child': { paddingInlineEnd: 0 } }), _defineProperty(_ref, "&-lg .".concat(prefixCls, ", &-lg > .").concat(prefixCls, "-group-addon"), _extends({}, genInputLargeStyle(token))), _defineProperty(_ref, "&-sm .".concat(prefixCls, ", &-sm > .").concat(prefixCls, "-group-addon"), _extends({}, genInputSmallStyle(token))), _defineProperty(_ref, "&-lg ".concat(antCls, "-select-single ").concat(antCls, "-select-selector"), { height: token.controlHeightLG }), _defineProperty(_ref, "&-sm ".concat(antCls, "-select-single ").concat(antCls, "-select-selector"), { height: token.controlHeightSM }), _defineProperty(_ref, "> .".concat(prefixCls), { display: 'table-cell', '&:not(:first-child):not(:last-child)': { borderRadius: 0 } }), _defineProperty(_ref, ".".concat(prefixCls, "-group"), (_$concat3 = {}, _defineProperty(_$concat3, "&-addon, &-wrap", { display: 'table-cell', width: 1, whiteSpace: 'nowrap', verticalAlign: 'middle', '&:not(:first-child):not(:last-child)': { borderRadius: 0 } }), _defineProperty(_$concat3, '&-wrap > *', { display: 'block !important' }), _defineProperty(_$concat3, '&-addon', (_addon = { position: 'relative', padding: "0 ".concat(token.inputPaddingHorizontal, "px"), color: token.colorText, fontWeight: 'normal', fontSize: token.fontSize, textAlign: 'center', backgroundColor: token.colorFillAlter, border: "".concat(token.controlLineWidth, "px ").concat(token.controlLineType, " ").concat(token.colorBorder), borderRadius: token.controlRadius, transition: "all ".concat(token.motionDurationSlow) }, _defineProperty(_addon, "".concat(antCls, "-select"), (_$concat = { margin: "-".concat(token.inputPaddingVertical + 1, "px -").concat(token.inputPaddingHorizontal, "px") }, _defineProperty(_$concat, "&".concat(antCls, "-select-single:not(").concat(antCls, "-select-customize-input)"), _defineProperty({}, "".concat(antCls, "-select-selector"), { backgroundColor: 'inherit', border: "".concat(token.controlLineWidth, "px ").concat(token.controlLineType, " transparent"), boxShadow: 'none' })), _defineProperty(_$concat, '&-open, &-focused', _defineProperty({}, "".concat(antCls, "-select-selector"), { color: token.colorPrimary })), _$concat)), _defineProperty(_addon, "".concat(antCls, "-cascader-picker"), _defineProperty({ margin: "-9px -".concat(token.inputPaddingHorizontal, "px"), backgroundColor: 'transparent' }, "".concat(antCls, "-cascader-input"), { textAlign: 'start', border: 0, boxShadow: 'none' })), _addon)), _defineProperty(_$concat3, '&-addon:first-child', { borderInlineEnd: 0 }), _defineProperty(_$concat3, '&-addon:last-child', { borderInlineStart: 0 }), _$concat3)), _defineProperty(_ref, ".".concat(prefixCls), { "float": 'inline-start', width: '100%', marginBottom: 0, textAlign: 'inherit', '&:focus': { zIndex: 1, borderInlineEndWidth: 1 }, '&:hover': _defineProperty({ zIndex: 1, borderInlineEndWidth: 1 }, ".".concat(prefixCls, "-search-with-button &"), { zIndex: 0 }) }), _defineProperty(_ref, "> .".concat(prefixCls, ":first-child, .").concat(prefixCls, "-group-addon:first-child"), _defineProperty({ borderStartEndRadius: 0, borderEndEndRadius: 0 }, "".concat(antCls, "-select ").concat(antCls, "-select-selector"), { borderStartEndRadius: 0, borderEndEndRadius: 0 })), _defineProperty(_ref, "> .".concat(prefixCls, "-affix-wrapper"), (_$concat4 = {}, _defineProperty(_$concat4, "&:not(:first-child) .".concat(prefixCls), { borderStartStartRadius: 0, borderEndStartRadius: 0 }), _defineProperty(_$concat4, "&:not(:last-child) .".concat(prefixCls), { borderStartEndRadius: 0, borderEndEndRadius: 0 }), _$concat4)), _defineProperty(_ref, "> .".concat(prefixCls, ":last-child, .").concat(prefixCls, "-group-addon:last-child"), _defineProperty({ borderStartStartRadius: 0, borderEndStartRadius: 0 }, "".concat(antCls, "-select ").concat(antCls, "-select-selector"), { borderStartStartRadius: 0, borderEndStartRadius: 0 })), _defineProperty(_ref, ".".concat(prefixCls, "-affix-wrapper"), _defineProperty({ '&:not(:last-child)': _defineProperty({ borderStartEndRadius: 0, borderEndEndRadius: 0 }, ".".concat(prefixCls, "-search &"), { borderStartStartRadius: token.controlRadius, borderEndStartRadius: token.controlRadius }) }, "&:not(:first-child), .".concat(prefixCls, "-search &:not(:first-child)"), { borderStartStartRadius: 0, borderEndStartRadius: 0 })), _defineProperty(_ref, '&&-compact', _extends(_extends({ display: 'block' }, clearFix()), (_extends2 = {}, _defineProperty(_extends2, ".".concat(prefixCls, "-group-addon, .").concat(prefixCls, "-group-wrap, > .").concat(prefixCls), { '&:not(:first-child):not(:last-child)': { borderInlineEndWidth: token.controlLineWidth, '&:hover': { zIndex: 1 }, '&:focus': { zIndex: 1 } } }), _defineProperty(_extends2, '& > *', { display: 'inline-block', "float": 'none', verticalAlign: 'top', borderRadius: 0 }), _defineProperty(_extends2, "& > .".concat(prefixCls, "-affix-wrapper"), { display: 'inline-flex' }), _defineProperty(_extends2, "& > ".concat(antCls, "-picker-range"), { display: 'inline-flex' }), _defineProperty(_extends2, '& > *:not(:last-child)', { marginInlineEnd: -token.controlLineWidth, borderInlineEndWidth: token.controlLineWidth }), _defineProperty(_extends2, ".".concat(prefixCls), { "float": 'none' }), _defineProperty(_extends2, "& > ".concat(antCls, "-select > ").concat(antCls, "-select-selector,\n & > ").concat(antCls, "-select-auto-complete .").concat(prefixCls, ",\n & > ").concat(antCls, "-cascader-picker .").concat(prefixCls, ",\n & > .").concat(prefixCls, "-group-wrapper .").concat(prefixCls), { borderInlineEndWidth: token.controlLineWidth, borderRadius: 0, '&:hover': { zIndex: 1 }, '&:focus': { zIndex: 1 } }), _defineProperty(_extends2, "& > ".concat(antCls, "-select-focused"), { zIndex: 1 }), _defineProperty(_extends2, "& > ".concat(antCls, "-select > ").concat(antCls, "-select-arrow"), { zIndex: 1 // https://github.com/ant-design/ant-design/issues/20371 }), _defineProperty(_extends2, "& > *:first-child,\n & > ".concat(antCls, "-select:first-child > ").concat(antCls, "-select-selector,\n & > ").concat(antCls, "-select-auto-complete:first-child .").concat(prefixCls, ",\n & > ").concat(antCls, "-cascader-picker:first-child .").concat(prefixCls), { borderStartStartRadius: token.controlRadius, borderEndStartRadius: token.controlRadius }), _defineProperty(_extends2, "& > *:last-child,\n & > ".concat(antCls, "-select:last-child > ").concat(antCls, "-select-selector,\n & > ").concat(antCls, "-cascader-picker:last-child .").concat(prefixCls, ",\n & > ").concat(antCls, "-cascader-picker-focused:last-child .").concat(prefixCls), { borderInlineEndWidth: token.controlLineWidth, borderStartEndRadius: token.controlRadius, borderEndEndRadius: token.controlRadius }), _defineProperty(_extends2, "& > ".concat(antCls, "-select-auto-complete .").concat(prefixCls), { verticalAlign: 'top' }), _defineProperty(_extends2, ".".concat(prefixCls, "-group-wrapper + .").concat(prefixCls, "-group-wrapper"), _defineProperty({ marginInlineStart: -token.controlLineWidth }, ".".concat(prefixCls, "-affix-wrapper"), { borderRadius: 0 })), _defineProperty(_extends2, ".".concat(prefixCls, "-group-wrapper:not(:last-child)"), _defineProperty({}, "&.".concat(prefixCls, "-search > .").concat(prefixCls, "-group"), (_$concat$concat5 = {}, _defineProperty(_$concat$concat5, "& > .".concat(prefixCls, "-group-addon > .").concat(prefixCls, "-search-button"), { borderRadius: 0 }), _defineProperty(_$concat$concat5, "& > .".concat(prefixCls), { borderStartStartRadius: token.controlRadius, borderStartEndRadius: 0, borderEndEndRadius: 0, borderEndStartRadius: token.controlRadius }), _$concat$concat5))), _extends2))), _ref; }; var genInputStyle = function genInputStyle(token) { var _typeColor; var prefixCls = token.prefixCls, controlHeightSM = token.controlHeightSM, controlLineWidth = token.controlLineWidth; var FIXED_CHROME_COLOR_HEIGHT = 16; var colorSmallPadding = (controlHeightSM - controlLineWidth * 2 - FIXED_CHROME_COLOR_HEIGHT) / 2; return _defineProperty({}, ".".concat(prefixCls), _extends(_extends(_extends(_extends({}, resetComponent(token)), genBasicInputStyle(token)), genStatusStyle(token)), { '&[type="color"]': (_typeColor = { height: token.controlHeight }, _defineProperty(_typeColor, "&.".concat(prefixCls, "-lg"), { height: token.controlHeightLG }), _defineProperty(_typeColor, "&.".concat(prefixCls, "-sm"), { height: controlHeightSM, paddingTop: colorSmallPadding, paddingBottom: colorSmallPadding }), _typeColor) })); }; var genAllowClearStyle = function genAllowClearStyle(token) { var _ref3; var prefixCls = token.prefixCls; return _ref3 = {}, _defineProperty(_ref3, ".".concat(prefixCls, "-clear-icon"), { margin: 0, color: token.colorIcon, fontSize: token.fontSizeIcon, verticalAlign: -1, // https://github.com/ant-design/ant-design/pull/18151 // https://codesandbox.io/s/wizardly-sun-u10br cursor: 'pointer', transition: "color ".concat(token.motionDurationSlow), '&:hover': { color: token.colorTextDescription }, '&:active': { color: token.colorText }, '&-hidden': { visibility: 'hidden' }, '&-has-suffix': { margin: "0 ".concat(token.inputAffixPadding, "px") } }), _defineProperty(_ref3, '&-textarea-with-clear-btn', _defineProperty({ padding: '0 !important', border: '0 !important' }, ".".concat(prefixCls, "-clear-icon"), { position: 'absolute', insetBlockStart: token.paddingXS, insetInlineEnd: token.paddingXS, zIndex: 1 })), _ref3; }; var genAffixStyle = function genAffixStyle(token) { var _extends4; var prefixCls = token.prefixCls, inputAffixPadding = token.inputAffixPadding, colorTextDescription = token.colorTextDescription, motionDurationSlow = token.motionDurationSlow, colorIcon = token.colorIcon, colorIconHover = token.colorIconHover, iconCls = token.iconCls; return _defineProperty({}, ".".concat(prefixCls, "-affix-wrapper"), _extends(_extends(_extends(_extends(_extends({}, genBasicInputStyle(token)), (_extends4 = { display: 'inline-flex', '&:not(&-disabled):hover': _extends(_extends({}, genHoverStyle(token)), _defineProperty({ zIndex: 1 }, ".".concat(prefixCls, "-search-with-button &"), { zIndex: 0 })), '&-focused, &:focus': { zIndex: 1 }, '&-disabled': _defineProperty({}, ".".concat(prefixCls, "[disabled]"), { background: 'transparent' }) }, _defineProperty(_extends4, "> input.".concat(prefixCls), { padding: 0, border: 'none', outline: 'none', '&:focus': { boxShadow: 'none !important' } }), _defineProperty(_extends4, '&::before', { width: 0, visibility: 'hidden', content: '"\\a0"' }), _defineProperty(_extends4, ".".concat(prefixCls), { '&-prefix, &-suffix': { display: 'flex', flex: 'none', alignItems: 'center', '> *:not(:last-child)': { marginInlineEnd: token.paddingXS } }, '&-show-count-suffix': { color: colorTextDescription }, '&-show-count-has-suffix': { marginInlineEnd: token.paddingXXS }, '&-prefix': { marginInlineEnd: inputAffixPadding }, '&-suffix': { marginInlineStart: inputAffixPadding } }), _extends4)), genAllowClearStyle(token)), _defineProperty({}, "".concat(iconCls, ".").concat(prefixCls, "-password-icon"), { color: colorIcon, cursor: 'pointer', transition: "all ".concat(motionDurationSlow), '&:hover': { color: colorIconHover } })), genStatusStyle(token))); }; var genGroupStyle = function genGroupStyle(token) { var prefixCls = token.prefixCls, colorError = token.colorError, colorSuccess = token.colorSuccess, componentCls = token.componentCls, controlRadiusLG = token.controlRadiusLG, controlRadiusSM = token.controlRadiusSM; return _defineProperty({}, ".".concat(prefixCls, "-group"), _extends(_extends(_extends({}, resetComponent(token)), genInputGroupStyle(token)), { '&-rtl': { direction: 'rtl' }, '&-wrapper': { display: 'inline-block', width: '100%', textAlign: 'start', verticalAlign: 'top', '&-rtl': { direction: 'rtl' }, // Size '&-lg': _defineProperty({}, "".concat(componentCls, "-group-addon"), { borderRadius: controlRadiusLG }), '&-sm': _defineProperty({}, "".concat(componentCls, "-group-addon"), { borderRadius: controlRadiusSM }), // Status '&-status-error': _defineProperty({}, ".".concat(prefixCls, "-group-addon"), { color: colorError, borderColor: colorError }), '&-status-warning': _defineProperty({}, ".".concat(prefixCls, "-group-addon"), { color: colorSuccess, borderColor: colorSuccess }) } })); }; var genSearchInputStyle = function genSearchInputStyle(token) { var _$concat7, _searchPrefixCls; var prefixCls = token.prefixCls, antCls = token.antCls; var searchPrefixCls = ".".concat(prefixCls, "-search"); return _defineProperty({}, searchPrefixCls, (_searchPrefixCls = {}, _defineProperty(_searchPrefixCls, ".".concat(prefixCls), { '&:hover, &:focus': _defineProperty({ borderColor: token.colorPrimaryHover }, "+ .".concat(prefixCls, "-group-addon ").concat(searchPrefixCls, "-button:not(.@{ant-prefix}-btn-primary)"), { borderInlineStartColor: token.colorPrimaryHover }) }), _defineProperty(_searchPrefixCls, ".".concat(prefixCls, "-affix-wrapper"), { borderRadius: 0 }), _defineProperty(_searchPrefixCls, ".".concat(prefixCls, "-lg"), { lineHeight: token.lineHeight - 0.0002 }), _defineProperty(_searchPrefixCls, "> .".concat(prefixCls, "-group"), _defineProperty({}, "> .".concat(prefixCls, "-group-addon:last-child"), (_$concat7 = { insetInlineStart: -1, padding: 0, border: 0 }, _defineProperty(_$concat7, "".concat(searchPrefixCls, "-button"), { paddingTop: 0, paddingBottom: 0, borderStartStartRadius: 0, borderStartEndRadius: token.controlRadius, borderEndEndRadius: token.controlRadius, borderEndStartRadius: 0 }), _defineProperty(_$concat7, "".concat(searchPrefixCls, "-button:not(").concat(antCls, "-btn-primary)"), _defineProperty({ color: token.colorTextDescription, '&:hover': { color: token.colorPrimaryHover }, '&:active': { color: token.colorPrimaryActive } }, "&".concat(antCls, "-btn-loading::before"), { insetInlineStart: 0, insetInlineEnd: 0, insetBlockStart: 0, insetBlockEnd: 0 })), _$concat7))), _defineProperty(_searchPrefixCls, "".concat(searchPrefixCls, "-button"), { height: token.controlHeight, '&:hover, &:focus': { zIndex: 1 } }), _defineProperty(_searchPrefixCls, "&-large ".concat(searchPrefixCls, "-button"), { height: token.controlHeightLG }), _defineProperty(_searchPrefixCls, "&-small ".concat(searchPrefixCls, "-button"), { height: token.controlHeightSM }), _defineProperty(_searchPrefixCls, '&-rtl', { direction: 'rtl' }), _searchPrefixCls)); }; export function initInputToken(token) { // @ts-ignore return mergeToken(token, { inputAffixPadding: token.paddingXXS, inputPaddingVertical: Math.max(Math.round((token.controlHeight - token.fontSize * token.lineHeight) / 2 * 10) / 10 - token.controlLineWidth, 3), inputPaddingVerticalLG: Math.ceil((token.controlHeightLG - token.fontSizeLG * token.lineHeight) / 2 * 10) / 10 - token.controlLineWidth, inputPaddingVerticalSM: Math.max(Math.round((token.controlHeightSM - token.fontSize * token.lineHeight) / 2 * 10) / 10 - token.controlLineWidth, 0), inputPaddingHorizontal: token.controlPaddingHorizontal - token.controlLineWidth, inputPaddingHorizontalSM: token.controlPaddingHorizontalSM - token.controlLineWidth, inputBorderHoverColor: token.colorPrimaryHover, inputBorderActiveColor: token.colorPrimaryHover }); } var genTextAreaStyle = function genTextAreaStyle(token) { var _showCount, _textareaPrefixCls; var prefixCls = token.prefixCls, inputPaddingHorizontal = token.inputPaddingHorizontal, paddingLG = token.paddingLG; var textareaPrefixCls = ".".concat(prefixCls, "-textarea"); return _defineProperty({}, textareaPrefixCls, (_textareaPrefixCls = { position: 'relative' }, _defineProperty(_textareaPrefixCls, "".concat(textareaPrefixCls, "-suffix"), { position: 'absolute', top: 0, insetInlineEnd: inputPaddingHorizontal, bottom: 0, zIndex: 1, display: 'inline-flex', alignItems: 'center', margin: 'auto' }), _defineProperty(_textareaPrefixCls, "&-status-error,\n &-status-warning,\n &-status-success,\n &-status-validating", _defineProperty({}, "&".concat(textareaPrefixCls, "-has-feedback"), _defineProperty({}, ".".concat(prefixCls), { paddingInlineEnd: paddingLG }))), _defineProperty(_textareaPrefixCls, '&-show-count', (_showCount = {}, _defineProperty(_showCount, "> .".concat(prefixCls), { height: '100%' }), _defineProperty(_showCount, '&::after', { position: 'absolute', bottom: 0, insetInlineEnd: 0, color: token.colorTextDescription, whiteSpace: 'nowrap', content: 'attr(data-count)', pointerEvents: 'none', display: 'block', transform: 'translateY(100%)' }), _showCount)), _textareaPrefixCls)); }; // ============================== Export ============================== export default genComponentStyleHook('Input', function (token) { var inputToken = initInputToken(token); return [genInputStyle(inputToken), genTextAreaStyle(inputToken), genAffixStyle(inputToken), genGroupStyle(inputToken), genSearchInputStyle(inputToken)]; });