| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798 |
- "use strict";
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
- Object.defineProperty(exports, "__esModule", {
- value: true
- });
- exports.genStatusStyle = exports.genPlaceholderStyle = exports.genInputSmallStyle = exports.genInputGroupStyle = exports.genHoverStyle = exports.genDisabledStyle = exports.genBasicInputStyle = exports.genActiveStyle = exports.default = void 0;
- exports.initInputToken = initInputToken;
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
- var _internal = require("../../theme/internal");
- var _style = require("../../style");
- var _compactItem = require("../../style/compact-item");
- const genPlaceholderStyle = color => ({
- // Firefox
- '&::-moz-placeholder': {
- opacity: 1
- },
- '&::placeholder': {
- color,
- userSelect: 'none' // https://github.com/ant-design/ant-design/pull/32639
- },
- '&:placeholder-shown': {
- textOverflow: 'ellipsis'
- }
- });
- exports.genPlaceholderStyle = genPlaceholderStyle;
- const genHoverStyle = token => ({
- borderColor: token.inputBorderHoverColor,
- borderInlineEndWidth: token.lineWidth
- });
- exports.genHoverStyle = genHoverStyle;
- const genActiveStyle = token => ({
- borderColor: token.inputBorderHoverColor,
- boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.controlOutline}`,
- borderInlineEndWidth: token.lineWidth,
- outline: 0
- });
- exports.genActiveStyle = genActiveStyle;
- const genDisabledStyle = token => ({
- color: token.colorTextDisabled,
- backgroundColor: token.colorBgContainerDisabled,
- borderColor: token.colorBorder,
- boxShadow: 'none',
- cursor: 'not-allowed',
- opacity: 1,
- '&:hover': (0, _extends2.default)({}, genHoverStyle((0, _internal.mergeToken)(token, {
- inputBorderHoverColor: token.colorBorder
- })))
- });
- exports.genDisabledStyle = genDisabledStyle;
- const genInputLargeStyle = token => {
- const {
- inputPaddingVerticalLG,
- fontSizeLG,
- lineHeightLG,
- borderRadiusLG,
- inputPaddingHorizontalLG
- } = token;
- return {
- padding: `${inputPaddingVerticalLG}px ${inputPaddingHorizontalLG}px`,
- fontSize: fontSizeLG,
- lineHeight: lineHeightLG,
- borderRadius: borderRadiusLG
- };
- };
- const genInputSmallStyle = token => ({
- padding: `${token.inputPaddingVerticalSM}px ${token.controlPaddingHorizontalSM - 1}px`,
- borderRadius: token.borderRadiusSM
- });
- exports.genInputSmallStyle = genInputSmallStyle;
- const genStatusStyle = (token, parentCls) => {
- const {
- componentCls,
- colorError,
- colorWarning,
- colorErrorOutline,
- colorWarningOutline,
- colorErrorBorderHover,
- colorWarningBorderHover
- } = token;
- return {
- [`&-status-error:not(${parentCls}-disabled):not(${parentCls}-borderless)${parentCls}`]: {
- borderColor: colorError,
- '&:hover': {
- borderColor: colorErrorBorderHover
- },
- '&:focus, &-focused': (0, _extends2.default)({}, genActiveStyle((0, _internal.mergeToken)(token, {
- inputBorderActiveColor: colorError,
- inputBorderHoverColor: colorError,
- controlOutline: colorErrorOutline
- }))),
- [`${componentCls}-prefix`]: {
- color: colorError
- }
- },
- [`&-status-warning:not(${parentCls}-disabled):not(${parentCls}-borderless)${parentCls}`]: {
- borderColor: colorWarning,
- '&:hover': {
- borderColor: colorWarningBorderHover
- },
- '&:focus, &-focused': (0, _extends2.default)({}, genActiveStyle((0, _internal.mergeToken)(token, {
- inputBorderActiveColor: colorWarning,
- inputBorderHoverColor: colorWarning,
- controlOutline: colorWarningOutline
- }))),
- [`${componentCls}-prefix`]: {
- color: colorWarning
- }
- }
- };
- };
- exports.genStatusStyle = genStatusStyle;
- const genBasicInputStyle = token => (0, _extends2.default)((0, _extends2.default)({
- position: 'relative',
- display: 'inline-block',
- width: '100%',
- minWidth: 0,
- padding: `${token.inputPaddingVertical}px ${token.inputPaddingHorizontal}px`,
- color: token.colorText,
- fontSize: token.fontSize,
- lineHeight: token.lineHeight,
- backgroundColor: token.colorBgContainer,
- backgroundImage: 'none',
- borderWidth: token.lineWidth,
- borderStyle: token.lineType,
- borderColor: token.colorBorder,
- borderRadius: token.borderRadius,
- transition: `all ${token.motionDurationMid}`
- }, genPlaceholderStyle(token.colorTextPlaceholder)), {
- '&:hover': (0, _extends2.default)({}, genHoverStyle(token)),
- '&:focus, &-focused': (0, _extends2.default)({}, genActiveStyle(token)),
- '&-disabled, &[disabled]': (0, _extends2.default)({}, 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 ${token.motionDurationSlow}, height 0s`,
- resize: 'vertical'
- },
- // Size
- '&-lg': (0, _extends2.default)({}, genInputLargeStyle(token)),
- '&-sm': (0, _extends2.default)({}, genInputSmallStyle(token)),
- // RTL
- '&-rtl': {
- direction: 'rtl'
- },
- '&-textarea-rtl': {
- direction: 'rtl'
- }
- });
- exports.genBasicInputStyle = genBasicInputStyle;
- const genInputGroupStyle = token => {
- const {
- componentCls,
- antCls
- } = token;
- return {
- position: 'relative',
- display: 'table',
- width: '100%',
- borderCollapse: 'separate',
- borderSpacing: 0,
- // Undo padding and float of grid classes
- [`&[class*='col-']`]: {
- paddingInlineEnd: token.paddingXS,
- '&:last-child': {
- paddingInlineEnd: 0
- }
- },
- // Sizing options
- [`&-lg ${componentCls}, &-lg > ${componentCls}-group-addon`]: (0, _extends2.default)({}, genInputLargeStyle(token)),
- [`&-sm ${componentCls}, &-sm > ${componentCls}-group-addon`]: (0, _extends2.default)({}, genInputSmallStyle(token)),
- [`> ${componentCls}`]: {
- display: 'table-cell',
- '&:not(:first-child):not(:last-child)': {
- borderRadius: 0
- }
- },
- [`${componentCls}-group`]: {
- [`&-addon, &-wrap`]: {
- display: 'table-cell',
- width: 1,
- whiteSpace: 'nowrap',
- verticalAlign: 'middle',
- '&:not(:first-child):not(:last-child)': {
- borderRadius: 0
- }
- },
- '&-wrap > *': {
- display: 'block !important'
- },
- '&-addon': {
- position: 'relative',
- padding: `0 ${token.inputPaddingHorizontal}px`,
- color: token.colorText,
- fontWeight: 'normal',
- fontSize: token.fontSize,
- textAlign: 'center',
- backgroundColor: token.colorFillAlter,
- border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
- borderRadius: token.borderRadius,
- transition: `all ${token.motionDurationSlow}`,
- lineHeight: 1,
- // Reset Select's style in addon
- [`${antCls}-select`]: {
- margin: `-${token.inputPaddingVertical + 1}px -${token.inputPaddingHorizontal}px`,
- [`&${antCls}-select-single:not(${antCls}-select-customize-input)`]: {
- [`${antCls}-select-selector`]: {
- backgroundColor: 'inherit',
- border: `${token.lineWidth}px ${token.lineType} transparent`,
- boxShadow: 'none'
- }
- },
- '&-open, &-focused': {
- [`${antCls}-select-selector`]: {
- color: token.colorPrimary
- }
- }
- },
- // https://github.com/ant-design/ant-design/issues/31333
- [`${antCls}-cascader-picker`]: {
- margin: `-9px -${token.inputPaddingHorizontal}px`,
- backgroundColor: 'transparent',
- [`${antCls}-cascader-input`]: {
- textAlign: 'start',
- border: 0,
- boxShadow: 'none'
- }
- }
- },
- '&-addon:first-child': {
- borderInlineEnd: 0
- },
- '&-addon:last-child': {
- borderInlineStart: 0
- }
- },
- [`${componentCls}`]: {
- float: 'inline-start',
- width: '100%',
- marginBottom: 0,
- textAlign: 'inherit',
- '&:focus': {
- zIndex: 1,
- borderInlineEndWidth: 1
- },
- '&:hover': {
- zIndex: 1,
- borderInlineEndWidth: 1,
- [`${componentCls}-search-with-button &`]: {
- zIndex: 0
- }
- }
- },
- // Reset rounded corners
- [`> ${componentCls}:first-child, ${componentCls}-group-addon:first-child`]: {
- borderStartEndRadius: 0,
- borderEndEndRadius: 0,
- // Reset Select's style in addon
- [`${antCls}-select ${antCls}-select-selector`]: {
- borderStartEndRadius: 0,
- borderEndEndRadius: 0
- }
- },
- [`> ${componentCls}-affix-wrapper`]: {
- [`&:not(:first-child) ${componentCls}`]: {
- borderStartStartRadius: 0,
- borderEndStartRadius: 0
- },
- [`&:not(:last-child) ${componentCls}`]: {
- borderStartEndRadius: 0,
- borderEndEndRadius: 0
- }
- },
- [`> ${componentCls}:last-child, ${componentCls}-group-addon:last-child`]: {
- borderStartStartRadius: 0,
- borderEndStartRadius: 0,
- // Reset Select's style in addon
- [`${antCls}-select ${antCls}-select-selector`]: {
- borderStartStartRadius: 0,
- borderEndStartRadius: 0
- }
- },
- [`${componentCls}-affix-wrapper`]: {
- '&:not(:last-child)': {
- borderStartEndRadius: 0,
- borderEndEndRadius: 0,
- [`${componentCls}-search &`]: {
- borderStartStartRadius: token.borderRadius,
- borderEndStartRadius: token.borderRadius
- }
- },
- [`&:not(:first-child), ${componentCls}-search &:not(:first-child)`]: {
- borderStartStartRadius: 0,
- borderEndStartRadius: 0
- }
- },
- [`&${componentCls}-group-compact`]: (0, _extends2.default)((0, _extends2.default)({
- display: 'block'
- }, (0, _style.clearFix)()), {
- [`${componentCls}-group-addon, ${componentCls}-group-wrap, > ${componentCls}`]: {
- '&:not(:first-child):not(:last-child)': {
- borderInlineEndWidth: token.lineWidth,
- '&:hover': {
- zIndex: 1
- },
- '&:focus': {
- zIndex: 1
- }
- }
- },
- '& > *': {
- display: 'inline-block',
- float: 'none',
- verticalAlign: 'top',
- borderRadius: 0
- },
- [`& > ${componentCls}-affix-wrapper`]: {
- display: 'inline-flex'
- },
- [`& > ${antCls}-picker-range`]: {
- display: 'inline-flex'
- },
- '& > *:not(:last-child)': {
- marginInlineEnd: -token.lineWidth,
- borderInlineEndWidth: token.lineWidth
- },
- // Undo float for .ant-input-group .ant-input
- [`${componentCls}`]: {
- float: 'none'
- },
- // reset border for Select, DatePicker, AutoComplete, Cascader, Mention, TimePicker, Input
- [`& > ${antCls}-select > ${antCls}-select-selector,
- & > ${antCls}-select-auto-complete ${componentCls},
- & > ${antCls}-cascader-picker ${componentCls},
- & > ${componentCls}-group-wrapper ${componentCls}`]: {
- borderInlineEndWidth: token.lineWidth,
- borderRadius: 0,
- '&:hover': {
- zIndex: 1
- },
- '&:focus': {
- zIndex: 1
- }
- },
- [`& > ${antCls}-select-focused`]: {
- zIndex: 1
- },
- // update z-index for arrow icon
- [`& > ${antCls}-select > ${antCls}-select-arrow`]: {
- zIndex: 1 // https://github.com/ant-design/ant-design/issues/20371
- },
- [`& > *:first-child,
- & > ${antCls}-select:first-child > ${antCls}-select-selector,
- & > ${antCls}-select-auto-complete:first-child ${componentCls},
- & > ${antCls}-cascader-picker:first-child ${componentCls}`]: {
- borderStartStartRadius: token.borderRadius,
- borderEndStartRadius: token.borderRadius
- },
- [`& > *:last-child,
- & > ${antCls}-select:last-child > ${antCls}-select-selector,
- & > ${antCls}-cascader-picker:last-child ${componentCls},
- & > ${antCls}-cascader-picker-focused:last-child ${componentCls}`]: {
- borderInlineEndWidth: token.lineWidth,
- borderStartEndRadius: token.borderRadius,
- borderEndEndRadius: token.borderRadius
- },
- // https://github.com/ant-design/ant-design/issues/12493
- [`& > ${antCls}-select-auto-complete ${componentCls}`]: {
- verticalAlign: 'top'
- },
- [`${componentCls}-group-wrapper + ${componentCls}-group-wrapper`]: {
- marginInlineStart: -token.lineWidth,
- [`${componentCls}-affix-wrapper`]: {
- borderRadius: 0
- }
- },
- [`${componentCls}-group-wrapper:not(:last-child)`]: {
- [`&${componentCls}-search > ${componentCls}-group`]: {
- [`& > ${componentCls}-group-addon > ${componentCls}-search-button`]: {
- borderRadius: 0
- },
- [`& > ${componentCls}`]: {
- borderStartStartRadius: token.borderRadius,
- borderStartEndRadius: 0,
- borderEndEndRadius: 0,
- borderEndStartRadius: token.borderRadius
- }
- }
- }
- }),
- [`&&-sm ${antCls}-btn`]: {
- fontSize: token.fontSizeSM,
- height: token.controlHeightSM,
- lineHeight: 'normal'
- },
- [`&&-lg ${antCls}-btn`]: {
- fontSize: token.fontSizeLG,
- height: token.controlHeightLG,
- lineHeight: 'normal'
- },
- // Fix https://github.com/ant-design/ant-design/issues/5754
- [`&&-lg ${antCls}-select-single ${antCls}-select-selector`]: {
- height: `${token.controlHeightLG}px`,
- [`${antCls}-select-selection-item, ${antCls}-select-selection-placeholder`]: {
- // -2 is for the border size & override default
- lineHeight: `${token.controlHeightLG - 2}px`
- },
- [`${antCls}-select-selection-search-input`]: {
- height: `${token.controlHeightLG}px`
- }
- },
- [`&&-sm ${antCls}-select-single ${antCls}-select-selector`]: {
- height: `${token.controlHeightSM}px`,
- [`${antCls}-select-selection-item, ${antCls}-select-selection-placeholder`]: {
- // -2 is for the border size & override default
- lineHeight: `${token.controlHeightSM - 2}px`
- },
- [`${antCls}-select-selection-search-input`]: {
- height: `${token.controlHeightSM}px`
- }
- }
- };
- };
- exports.genInputGroupStyle = genInputGroupStyle;
- const genInputStyle = token => {
- const {
- componentCls,
- controlHeightSM,
- lineWidth
- } = token;
- const FIXED_CHROME_COLOR_HEIGHT = 16;
- const colorSmallPadding = (controlHeightSM - lineWidth * 2 - FIXED_CHROME_COLOR_HEIGHT) / 2;
- return {
- [componentCls]: (0, _extends2.default)((0, _extends2.default)((0, _extends2.default)((0, _extends2.default)({}, (0, _style.resetComponent)(token)), genBasicInputStyle(token)), genStatusStyle(token, componentCls)), {
- '&[type="color"]': {
- height: token.controlHeight,
- [`&${componentCls}-lg`]: {
- height: token.controlHeightLG
- },
- [`&${componentCls}-sm`]: {
- height: controlHeightSM,
- paddingTop: colorSmallPadding,
- paddingBottom: colorSmallPadding
- }
- }
- })
- };
- };
- const genAllowClearStyle = token => {
- const {
- componentCls
- } = token;
- return {
- // ========================= Input =========================
- [`${componentCls}-clear-icon`]: {
- margin: 0,
- color: token.colorTextQuaternary,
- 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 ${token.motionDurationSlow}`,
- '&:hover': {
- color: token.colorTextTertiary
- },
- '&:active': {
- color: token.colorText
- },
- '&-hidden': {
- visibility: 'hidden'
- },
- '&-has-suffix': {
- margin: `0 ${token.inputAffixPadding}px`
- }
- },
- // ======================= TextArea ========================
- '&-textarea-with-clear-btn': {
- padding: '0 !important',
- border: '0 !important',
- [`${componentCls}-clear-icon`]: {
- position: 'absolute',
- insetBlockStart: token.paddingXS,
- insetInlineEnd: token.paddingXS,
- zIndex: 1
- }
- }
- };
- };
- const genAffixStyle = token => {
- const {
- componentCls,
- inputAffixPadding,
- colorTextDescription,
- motionDurationSlow,
- colorIcon,
- colorIconHover,
- iconCls
- } = token;
- return {
- [`${componentCls}-affix-wrapper`]: (0, _extends2.default)((0, _extends2.default)((0, _extends2.default)((0, _extends2.default)((0, _extends2.default)({}, genBasicInputStyle(token)), {
- display: 'inline-flex',
- [`&:not(${componentCls}-affix-wrapper-disabled):hover`]: (0, _extends2.default)((0, _extends2.default)({}, genHoverStyle(token)), {
- zIndex: 1,
- [`${componentCls}-search-with-button &`]: {
- zIndex: 0
- }
- }),
- '&-focused, &:focus': {
- zIndex: 1
- },
- '&-disabled': {
- [`${componentCls}[disabled]`]: {
- background: 'transparent'
- }
- },
- [`> input${componentCls}`]: {
- padding: 0,
- fontSize: 'inherit',
- border: 'none',
- borderRadius: 0,
- outline: 'none',
- '&:focus': {
- boxShadow: 'none !important'
- }
- },
- '&::before': {
- width: 0,
- visibility: 'hidden',
- content: '"\\a0"'
- },
- [`${componentCls}`]: {
- '&-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
- }
- }
- }), genAllowClearStyle(token)), {
- // password
- [`${iconCls}${componentCls}-password-icon`]: {
- color: colorIcon,
- cursor: 'pointer',
- transition: `all ${motionDurationSlow}`,
- '&:hover': {
- color: colorIconHover
- }
- }
- }), genStatusStyle(token, `${componentCls}-affix-wrapper`))
- };
- };
- const genGroupStyle = token => {
- const {
- componentCls,
- colorError,
- colorSuccess,
- borderRadiusLG,
- borderRadiusSM
- } = token;
- return {
- [`${componentCls}-group`]: (0, _extends2.default)((0, _extends2.default)((0, _extends2.default)({}, (0, _style.resetComponent)(token)), genInputGroupStyle(token)), {
- '&-rtl': {
- direction: 'rtl'
- },
- '&-wrapper': {
- display: 'inline-block',
- width: '100%',
- textAlign: 'start',
- verticalAlign: 'top',
- '&-rtl': {
- direction: 'rtl'
- },
- // Size
- '&-lg': {
- [`${componentCls}-group-addon`]: {
- borderRadius: borderRadiusLG
- }
- },
- '&-sm': {
- [`${componentCls}-group-addon`]: {
- borderRadius: borderRadiusSM
- }
- },
- // Status
- '&-status-error': {
- [`${componentCls}-group-addon`]: {
- color: colorError,
- borderColor: colorError
- }
- },
- '&-status-warning': {
- [`${componentCls}-group-addon:last-child`]: {
- color: colorSuccess,
- borderColor: colorSuccess
- }
- }
- }
- })
- };
- };
- const genSearchInputStyle = token => {
- const {
- componentCls,
- antCls
- } = token;
- const searchPrefixCls = `${componentCls}-search`;
- return {
- [searchPrefixCls]: {
- [`${componentCls}`]: {
- '&:hover, &:focus': {
- borderColor: token.colorPrimaryHover,
- [`+ ${componentCls}-group-addon ${searchPrefixCls}-button:not(${antCls}-btn-primary)`]: {
- borderInlineStartColor: token.colorPrimaryHover
- }
- }
- },
- [`${componentCls}-affix-wrapper`]: {
- borderRadius: 0
- },
- // fix slight height diff in Firefox:
- // https://ant.design/components/auto-complete-cn/#components-auto-complete-demo-certain-category
- [`${componentCls}-lg`]: {
- lineHeight: token.lineHeightLG - 0.0002
- },
- [`> ${componentCls}-group`]: {
- [`> ${componentCls}-group-addon:last-child`]: {
- insetInlineStart: -1,
- padding: 0,
- border: 0,
- [`${searchPrefixCls}-button`]: {
- paddingTop: 0,
- paddingBottom: 0,
- borderStartStartRadius: 0,
- borderStartEndRadius: token.borderRadius,
- borderEndEndRadius: token.borderRadius,
- borderEndStartRadius: 0
- },
- [`${searchPrefixCls}-button:not(${antCls}-btn-primary)`]: {
- color: token.colorTextDescription,
- '&:hover': {
- color: token.colorPrimaryHover
- },
- '&:active': {
- color: token.colorPrimaryActive
- },
- [`&${antCls}-btn-loading::before`]: {
- insetInlineStart: 0,
- insetInlineEnd: 0,
- insetBlockStart: 0,
- insetBlockEnd: 0
- }
- }
- }
- },
- [`${searchPrefixCls}-button`]: {
- height: token.controlHeight,
- '&:hover, &:focus': {
- zIndex: 1
- }
- },
- [`&-large ${searchPrefixCls}-button`]: {
- height: token.controlHeightLG
- },
- [`&-small ${searchPrefixCls}-button`]: {
- height: token.controlHeightSM
- },
- '&-rtl': {
- direction: 'rtl'
- },
- // ===================== Compact Item Customized Styles =====================
- [`&${componentCls}-compact-item`]: {
- [`&:not(${componentCls}-compact-last-item)`]: {
- [`${componentCls}-group-addon`]: {
- [`${componentCls}-search-button`]: {
- marginInlineEnd: -token.lineWidth,
- borderRadius: 0
- }
- }
- },
- [`&:not(${componentCls}-compact-first-item)`]: {
- [`${componentCls},${componentCls}-affix-wrapper`]: {
- borderRadius: 0
- }
- },
- [`> ${componentCls}-group-addon ${componentCls}-search-button,
- > ${componentCls},
- ${componentCls}-affix-wrapper`]: {
- '&:hover,&:focus,&:active': {
- zIndex: 2
- }
- },
- [`> ${componentCls}-affix-wrapper-focused`]: {
- zIndex: 2
- }
- }
- }
- };
- };
- function initInputToken(token) {
- // @ts-ignore
- return (0, _internal.mergeToken)(token, {
- inputAffixPadding: token.paddingXXS,
- inputPaddingVertical: Math.max(Math.round((token.controlHeight - token.fontSize * token.lineHeight) / 2 * 10) / 10 - token.lineWidth, 3),
- inputPaddingVerticalLG: Math.ceil((token.controlHeightLG - token.fontSizeLG * token.lineHeightLG) / 2 * 10) / 10 - token.lineWidth,
- inputPaddingVerticalSM: Math.max(Math.round((token.controlHeightSM - token.fontSize * token.lineHeight) / 2 * 10) / 10 - token.lineWidth, 0),
- inputPaddingHorizontal: token.paddingSM - token.lineWidth,
- inputPaddingHorizontalSM: token.paddingXS - token.lineWidth,
- inputPaddingHorizontalLG: token.controlPaddingHorizontal - token.lineWidth,
- inputBorderHoverColor: token.colorPrimaryHover,
- inputBorderActiveColor: token.colorPrimaryHover
- });
- }
- const genTextAreaStyle = token => {
- const {
- componentCls,
- inputPaddingHorizontal,
- paddingLG
- } = token;
- const textareaPrefixCls = `${componentCls}-textarea`;
- return {
- [textareaPrefixCls]: {
- position: 'relative',
- [`${textareaPrefixCls}-suffix`]: {
- position: 'absolute',
- top: 0,
- insetInlineEnd: inputPaddingHorizontal,
- bottom: 0,
- zIndex: 1,
- display: 'inline-flex',
- alignItems: 'center',
- margin: 'auto'
- },
- [`&-status-error,
- &-status-warning,
- &-status-success,
- &-status-validating`]: {
- [`&${textareaPrefixCls}-has-feedback`]: {
- [`${componentCls}`]: {
- paddingInlineEnd: paddingLG
- }
- }
- },
- '&-show-count': {
- // https://github.com/ant-design/ant-design/issues/33049
- [`> ${componentCls}`]: {
- height: '100%'
- },
- '&::after': {
- color: token.colorTextDescription,
- whiteSpace: 'nowrap',
- content: 'attr(data-count)',
- pointerEvents: 'none',
- float: 'right'
- }
- },
- '&-rtl': {
- '&::after': {
- float: 'left'
- }
- }
- }
- };
- };
- // ============================== Export ==============================
- var _default = exports.default = (0, _internal.genComponentStyleHook)('Input', token => {
- const inputToken = initInputToken(token);
- return [genInputStyle(inputToken), genTextAreaStyle(inputToken), genAffixStyle(inputToken), genGroupStyle(inputToken), genSearchInputStyle(inputToken),
- // =====================================================
- // == Space Compact ==
- // =====================================================
- (0, _compactItem.genCompactItemStyle)(inputToken)];
- });
|