index.js 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.genStatusStyle = exports.genPlaceholderStyle = exports.genInputSmallStyle = exports.genInputGroupStyle = exports.genHoverStyle = exports.genDisabledStyle = exports.genBasicInputStyle = exports.genActiveStyle = exports.default = void 0;
  7. exports.initInputToken = initInputToken;
  8. var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  9. var _internal = require("../../theme/internal");
  10. var _style = require("../../style");
  11. var _compactItem = require("../../style/compact-item");
  12. const genPlaceholderStyle = color => ({
  13. // Firefox
  14. '&::-moz-placeholder': {
  15. opacity: 1
  16. },
  17. '&::placeholder': {
  18. color,
  19. userSelect: 'none' // https://github.com/ant-design/ant-design/pull/32639
  20. },
  21. '&:placeholder-shown': {
  22. textOverflow: 'ellipsis'
  23. }
  24. });
  25. exports.genPlaceholderStyle = genPlaceholderStyle;
  26. const genHoverStyle = token => ({
  27. borderColor: token.inputBorderHoverColor,
  28. borderInlineEndWidth: token.lineWidth
  29. });
  30. exports.genHoverStyle = genHoverStyle;
  31. const genActiveStyle = token => ({
  32. borderColor: token.inputBorderHoverColor,
  33. boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.controlOutline}`,
  34. borderInlineEndWidth: token.lineWidth,
  35. outline: 0
  36. });
  37. exports.genActiveStyle = genActiveStyle;
  38. const genDisabledStyle = token => ({
  39. color: token.colorTextDisabled,
  40. backgroundColor: token.colorBgContainerDisabled,
  41. borderColor: token.colorBorder,
  42. boxShadow: 'none',
  43. cursor: 'not-allowed',
  44. opacity: 1,
  45. '&:hover': (0, _extends2.default)({}, genHoverStyle((0, _internal.mergeToken)(token, {
  46. inputBorderHoverColor: token.colorBorder
  47. })))
  48. });
  49. exports.genDisabledStyle = genDisabledStyle;
  50. const genInputLargeStyle = token => {
  51. const {
  52. inputPaddingVerticalLG,
  53. fontSizeLG,
  54. lineHeightLG,
  55. borderRadiusLG,
  56. inputPaddingHorizontalLG
  57. } = token;
  58. return {
  59. padding: `${inputPaddingVerticalLG}px ${inputPaddingHorizontalLG}px`,
  60. fontSize: fontSizeLG,
  61. lineHeight: lineHeightLG,
  62. borderRadius: borderRadiusLG
  63. };
  64. };
  65. const genInputSmallStyle = token => ({
  66. padding: `${token.inputPaddingVerticalSM}px ${token.controlPaddingHorizontalSM - 1}px`,
  67. borderRadius: token.borderRadiusSM
  68. });
  69. exports.genInputSmallStyle = genInputSmallStyle;
  70. const genStatusStyle = (token, parentCls) => {
  71. const {
  72. componentCls,
  73. colorError,
  74. colorWarning,
  75. colorErrorOutline,
  76. colorWarningOutline,
  77. colorErrorBorderHover,
  78. colorWarningBorderHover
  79. } = token;
  80. return {
  81. [`&-status-error:not(${parentCls}-disabled):not(${parentCls}-borderless)${parentCls}`]: {
  82. borderColor: colorError,
  83. '&:hover': {
  84. borderColor: colorErrorBorderHover
  85. },
  86. '&:focus, &-focused': (0, _extends2.default)({}, genActiveStyle((0, _internal.mergeToken)(token, {
  87. inputBorderActiveColor: colorError,
  88. inputBorderHoverColor: colorError,
  89. controlOutline: colorErrorOutline
  90. }))),
  91. [`${componentCls}-prefix`]: {
  92. color: colorError
  93. }
  94. },
  95. [`&-status-warning:not(${parentCls}-disabled):not(${parentCls}-borderless)${parentCls}`]: {
  96. borderColor: colorWarning,
  97. '&:hover': {
  98. borderColor: colorWarningBorderHover
  99. },
  100. '&:focus, &-focused': (0, _extends2.default)({}, genActiveStyle((0, _internal.mergeToken)(token, {
  101. inputBorderActiveColor: colorWarning,
  102. inputBorderHoverColor: colorWarning,
  103. controlOutline: colorWarningOutline
  104. }))),
  105. [`${componentCls}-prefix`]: {
  106. color: colorWarning
  107. }
  108. }
  109. };
  110. };
  111. exports.genStatusStyle = genStatusStyle;
  112. const genBasicInputStyle = token => (0, _extends2.default)((0, _extends2.default)({
  113. position: 'relative',
  114. display: 'inline-block',
  115. width: '100%',
  116. minWidth: 0,
  117. padding: `${token.inputPaddingVertical}px ${token.inputPaddingHorizontal}px`,
  118. color: token.colorText,
  119. fontSize: token.fontSize,
  120. lineHeight: token.lineHeight,
  121. backgroundColor: token.colorBgContainer,
  122. backgroundImage: 'none',
  123. borderWidth: token.lineWidth,
  124. borderStyle: token.lineType,
  125. borderColor: token.colorBorder,
  126. borderRadius: token.borderRadius,
  127. transition: `all ${token.motionDurationMid}`
  128. }, genPlaceholderStyle(token.colorTextPlaceholder)), {
  129. '&:hover': (0, _extends2.default)({}, genHoverStyle(token)),
  130. '&:focus, &-focused': (0, _extends2.default)({}, genActiveStyle(token)),
  131. '&-disabled, &[disabled]': (0, _extends2.default)({}, genDisabledStyle(token)),
  132. '&-borderless': {
  133. '&, &:hover, &:focus, &-focused, &-disabled, &[disabled]': {
  134. backgroundColor: 'transparent',
  135. border: 'none',
  136. boxShadow: 'none'
  137. }
  138. },
  139. // Reset height for `textarea`s
  140. 'textarea&': {
  141. maxWidth: '100%',
  142. height: 'auto',
  143. minHeight: token.controlHeight,
  144. lineHeight: token.lineHeight,
  145. verticalAlign: 'bottom',
  146. transition: `all ${token.motionDurationSlow}, height 0s`,
  147. resize: 'vertical'
  148. },
  149. // Size
  150. '&-lg': (0, _extends2.default)({}, genInputLargeStyle(token)),
  151. '&-sm': (0, _extends2.default)({}, genInputSmallStyle(token)),
  152. // RTL
  153. '&-rtl': {
  154. direction: 'rtl'
  155. },
  156. '&-textarea-rtl': {
  157. direction: 'rtl'
  158. }
  159. });
  160. exports.genBasicInputStyle = genBasicInputStyle;
  161. const genInputGroupStyle = token => {
  162. const {
  163. componentCls,
  164. antCls
  165. } = token;
  166. return {
  167. position: 'relative',
  168. display: 'table',
  169. width: '100%',
  170. borderCollapse: 'separate',
  171. borderSpacing: 0,
  172. // Undo padding and float of grid classes
  173. [`&[class*='col-']`]: {
  174. paddingInlineEnd: token.paddingXS,
  175. '&:last-child': {
  176. paddingInlineEnd: 0
  177. }
  178. },
  179. // Sizing options
  180. [`&-lg ${componentCls}, &-lg > ${componentCls}-group-addon`]: (0, _extends2.default)({}, genInputLargeStyle(token)),
  181. [`&-sm ${componentCls}, &-sm > ${componentCls}-group-addon`]: (0, _extends2.default)({}, genInputSmallStyle(token)),
  182. [`> ${componentCls}`]: {
  183. display: 'table-cell',
  184. '&:not(:first-child):not(:last-child)': {
  185. borderRadius: 0
  186. }
  187. },
  188. [`${componentCls}-group`]: {
  189. [`&-addon, &-wrap`]: {
  190. display: 'table-cell',
  191. width: 1,
  192. whiteSpace: 'nowrap',
  193. verticalAlign: 'middle',
  194. '&:not(:first-child):not(:last-child)': {
  195. borderRadius: 0
  196. }
  197. },
  198. '&-wrap > *': {
  199. display: 'block !important'
  200. },
  201. '&-addon': {
  202. position: 'relative',
  203. padding: `0 ${token.inputPaddingHorizontal}px`,
  204. color: token.colorText,
  205. fontWeight: 'normal',
  206. fontSize: token.fontSize,
  207. textAlign: 'center',
  208. backgroundColor: token.colorFillAlter,
  209. border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
  210. borderRadius: token.borderRadius,
  211. transition: `all ${token.motionDurationSlow}`,
  212. lineHeight: 1,
  213. // Reset Select's style in addon
  214. [`${antCls}-select`]: {
  215. margin: `-${token.inputPaddingVertical + 1}px -${token.inputPaddingHorizontal}px`,
  216. [`&${antCls}-select-single:not(${antCls}-select-customize-input)`]: {
  217. [`${antCls}-select-selector`]: {
  218. backgroundColor: 'inherit',
  219. border: `${token.lineWidth}px ${token.lineType} transparent`,
  220. boxShadow: 'none'
  221. }
  222. },
  223. '&-open, &-focused': {
  224. [`${antCls}-select-selector`]: {
  225. color: token.colorPrimary
  226. }
  227. }
  228. },
  229. // https://github.com/ant-design/ant-design/issues/31333
  230. [`${antCls}-cascader-picker`]: {
  231. margin: `-9px -${token.inputPaddingHorizontal}px`,
  232. backgroundColor: 'transparent',
  233. [`${antCls}-cascader-input`]: {
  234. textAlign: 'start',
  235. border: 0,
  236. boxShadow: 'none'
  237. }
  238. }
  239. },
  240. '&-addon:first-child': {
  241. borderInlineEnd: 0
  242. },
  243. '&-addon:last-child': {
  244. borderInlineStart: 0
  245. }
  246. },
  247. [`${componentCls}`]: {
  248. float: 'inline-start',
  249. width: '100%',
  250. marginBottom: 0,
  251. textAlign: 'inherit',
  252. '&:focus': {
  253. zIndex: 1,
  254. borderInlineEndWidth: 1
  255. },
  256. '&:hover': {
  257. zIndex: 1,
  258. borderInlineEndWidth: 1,
  259. [`${componentCls}-search-with-button &`]: {
  260. zIndex: 0
  261. }
  262. }
  263. },
  264. // Reset rounded corners
  265. [`> ${componentCls}:first-child, ${componentCls}-group-addon:first-child`]: {
  266. borderStartEndRadius: 0,
  267. borderEndEndRadius: 0,
  268. // Reset Select's style in addon
  269. [`${antCls}-select ${antCls}-select-selector`]: {
  270. borderStartEndRadius: 0,
  271. borderEndEndRadius: 0
  272. }
  273. },
  274. [`> ${componentCls}-affix-wrapper`]: {
  275. [`&:not(:first-child) ${componentCls}`]: {
  276. borderStartStartRadius: 0,
  277. borderEndStartRadius: 0
  278. },
  279. [`&:not(:last-child) ${componentCls}`]: {
  280. borderStartEndRadius: 0,
  281. borderEndEndRadius: 0
  282. }
  283. },
  284. [`> ${componentCls}:last-child, ${componentCls}-group-addon:last-child`]: {
  285. borderStartStartRadius: 0,
  286. borderEndStartRadius: 0,
  287. // Reset Select's style in addon
  288. [`${antCls}-select ${antCls}-select-selector`]: {
  289. borderStartStartRadius: 0,
  290. borderEndStartRadius: 0
  291. }
  292. },
  293. [`${componentCls}-affix-wrapper`]: {
  294. '&:not(:last-child)': {
  295. borderStartEndRadius: 0,
  296. borderEndEndRadius: 0,
  297. [`${componentCls}-search &`]: {
  298. borderStartStartRadius: token.borderRadius,
  299. borderEndStartRadius: token.borderRadius
  300. }
  301. },
  302. [`&:not(:first-child), ${componentCls}-search &:not(:first-child)`]: {
  303. borderStartStartRadius: 0,
  304. borderEndStartRadius: 0
  305. }
  306. },
  307. [`&${componentCls}-group-compact`]: (0, _extends2.default)((0, _extends2.default)({
  308. display: 'block'
  309. }, (0, _style.clearFix)()), {
  310. [`${componentCls}-group-addon, ${componentCls}-group-wrap, > ${componentCls}`]: {
  311. '&:not(:first-child):not(:last-child)': {
  312. borderInlineEndWidth: token.lineWidth,
  313. '&:hover': {
  314. zIndex: 1
  315. },
  316. '&:focus': {
  317. zIndex: 1
  318. }
  319. }
  320. },
  321. '& > *': {
  322. display: 'inline-block',
  323. float: 'none',
  324. verticalAlign: 'top',
  325. borderRadius: 0
  326. },
  327. [`& > ${componentCls}-affix-wrapper`]: {
  328. display: 'inline-flex'
  329. },
  330. [`& > ${antCls}-picker-range`]: {
  331. display: 'inline-flex'
  332. },
  333. '& > *:not(:last-child)': {
  334. marginInlineEnd: -token.lineWidth,
  335. borderInlineEndWidth: token.lineWidth
  336. },
  337. // Undo float for .ant-input-group .ant-input
  338. [`${componentCls}`]: {
  339. float: 'none'
  340. },
  341. // reset border for Select, DatePicker, AutoComplete, Cascader, Mention, TimePicker, Input
  342. [`& > ${antCls}-select > ${antCls}-select-selector,
  343. & > ${antCls}-select-auto-complete ${componentCls},
  344. & > ${antCls}-cascader-picker ${componentCls},
  345. & > ${componentCls}-group-wrapper ${componentCls}`]: {
  346. borderInlineEndWidth: token.lineWidth,
  347. borderRadius: 0,
  348. '&:hover': {
  349. zIndex: 1
  350. },
  351. '&:focus': {
  352. zIndex: 1
  353. }
  354. },
  355. [`& > ${antCls}-select-focused`]: {
  356. zIndex: 1
  357. },
  358. // update z-index for arrow icon
  359. [`& > ${antCls}-select > ${antCls}-select-arrow`]: {
  360. zIndex: 1 // https://github.com/ant-design/ant-design/issues/20371
  361. },
  362. [`& > *:first-child,
  363. & > ${antCls}-select:first-child > ${antCls}-select-selector,
  364. & > ${antCls}-select-auto-complete:first-child ${componentCls},
  365. & > ${antCls}-cascader-picker:first-child ${componentCls}`]: {
  366. borderStartStartRadius: token.borderRadius,
  367. borderEndStartRadius: token.borderRadius
  368. },
  369. [`& > *:last-child,
  370. & > ${antCls}-select:last-child > ${antCls}-select-selector,
  371. & > ${antCls}-cascader-picker:last-child ${componentCls},
  372. & > ${antCls}-cascader-picker-focused:last-child ${componentCls}`]: {
  373. borderInlineEndWidth: token.lineWidth,
  374. borderStartEndRadius: token.borderRadius,
  375. borderEndEndRadius: token.borderRadius
  376. },
  377. // https://github.com/ant-design/ant-design/issues/12493
  378. [`& > ${antCls}-select-auto-complete ${componentCls}`]: {
  379. verticalAlign: 'top'
  380. },
  381. [`${componentCls}-group-wrapper + ${componentCls}-group-wrapper`]: {
  382. marginInlineStart: -token.lineWidth,
  383. [`${componentCls}-affix-wrapper`]: {
  384. borderRadius: 0
  385. }
  386. },
  387. [`${componentCls}-group-wrapper:not(:last-child)`]: {
  388. [`&${componentCls}-search > ${componentCls}-group`]: {
  389. [`& > ${componentCls}-group-addon > ${componentCls}-search-button`]: {
  390. borderRadius: 0
  391. },
  392. [`& > ${componentCls}`]: {
  393. borderStartStartRadius: token.borderRadius,
  394. borderStartEndRadius: 0,
  395. borderEndEndRadius: 0,
  396. borderEndStartRadius: token.borderRadius
  397. }
  398. }
  399. }
  400. }),
  401. [`&&-sm ${antCls}-btn`]: {
  402. fontSize: token.fontSizeSM,
  403. height: token.controlHeightSM,
  404. lineHeight: 'normal'
  405. },
  406. [`&&-lg ${antCls}-btn`]: {
  407. fontSize: token.fontSizeLG,
  408. height: token.controlHeightLG,
  409. lineHeight: 'normal'
  410. },
  411. // Fix https://github.com/ant-design/ant-design/issues/5754
  412. [`&&-lg ${antCls}-select-single ${antCls}-select-selector`]: {
  413. height: `${token.controlHeightLG}px`,
  414. [`${antCls}-select-selection-item, ${antCls}-select-selection-placeholder`]: {
  415. // -2 is for the border size & override default
  416. lineHeight: `${token.controlHeightLG - 2}px`
  417. },
  418. [`${antCls}-select-selection-search-input`]: {
  419. height: `${token.controlHeightLG}px`
  420. }
  421. },
  422. [`&&-sm ${antCls}-select-single ${antCls}-select-selector`]: {
  423. height: `${token.controlHeightSM}px`,
  424. [`${antCls}-select-selection-item, ${antCls}-select-selection-placeholder`]: {
  425. // -2 is for the border size & override default
  426. lineHeight: `${token.controlHeightSM - 2}px`
  427. },
  428. [`${antCls}-select-selection-search-input`]: {
  429. height: `${token.controlHeightSM}px`
  430. }
  431. }
  432. };
  433. };
  434. exports.genInputGroupStyle = genInputGroupStyle;
  435. const genInputStyle = token => {
  436. const {
  437. componentCls,
  438. controlHeightSM,
  439. lineWidth
  440. } = token;
  441. const FIXED_CHROME_COLOR_HEIGHT = 16;
  442. const colorSmallPadding = (controlHeightSM - lineWidth * 2 - FIXED_CHROME_COLOR_HEIGHT) / 2;
  443. return {
  444. [componentCls]: (0, _extends2.default)((0, _extends2.default)((0, _extends2.default)((0, _extends2.default)({}, (0, _style.resetComponent)(token)), genBasicInputStyle(token)), genStatusStyle(token, componentCls)), {
  445. '&[type="color"]': {
  446. height: token.controlHeight,
  447. [`&${componentCls}-lg`]: {
  448. height: token.controlHeightLG
  449. },
  450. [`&${componentCls}-sm`]: {
  451. height: controlHeightSM,
  452. paddingTop: colorSmallPadding,
  453. paddingBottom: colorSmallPadding
  454. }
  455. }
  456. })
  457. };
  458. };
  459. const genAllowClearStyle = token => {
  460. const {
  461. componentCls
  462. } = token;
  463. return {
  464. // ========================= Input =========================
  465. [`${componentCls}-clear-icon`]: {
  466. margin: 0,
  467. color: token.colorTextQuaternary,
  468. fontSize: token.fontSizeIcon,
  469. verticalAlign: -1,
  470. // https://github.com/ant-design/ant-design/pull/18151
  471. // https://codesandbox.io/s/wizardly-sun-u10br
  472. cursor: 'pointer',
  473. transition: `color ${token.motionDurationSlow}`,
  474. '&:hover': {
  475. color: token.colorTextTertiary
  476. },
  477. '&:active': {
  478. color: token.colorText
  479. },
  480. '&-hidden': {
  481. visibility: 'hidden'
  482. },
  483. '&-has-suffix': {
  484. margin: `0 ${token.inputAffixPadding}px`
  485. }
  486. },
  487. // ======================= TextArea ========================
  488. '&-textarea-with-clear-btn': {
  489. padding: '0 !important',
  490. border: '0 !important',
  491. [`${componentCls}-clear-icon`]: {
  492. position: 'absolute',
  493. insetBlockStart: token.paddingXS,
  494. insetInlineEnd: token.paddingXS,
  495. zIndex: 1
  496. }
  497. }
  498. };
  499. };
  500. const genAffixStyle = token => {
  501. const {
  502. componentCls,
  503. inputAffixPadding,
  504. colorTextDescription,
  505. motionDurationSlow,
  506. colorIcon,
  507. colorIconHover,
  508. iconCls
  509. } = token;
  510. return {
  511. [`${componentCls}-affix-wrapper`]: (0, _extends2.default)((0, _extends2.default)((0, _extends2.default)((0, _extends2.default)((0, _extends2.default)({}, genBasicInputStyle(token)), {
  512. display: 'inline-flex',
  513. [`&:not(${componentCls}-affix-wrapper-disabled):hover`]: (0, _extends2.default)((0, _extends2.default)({}, genHoverStyle(token)), {
  514. zIndex: 1,
  515. [`${componentCls}-search-with-button &`]: {
  516. zIndex: 0
  517. }
  518. }),
  519. '&-focused, &:focus': {
  520. zIndex: 1
  521. },
  522. '&-disabled': {
  523. [`${componentCls}[disabled]`]: {
  524. background: 'transparent'
  525. }
  526. },
  527. [`> input${componentCls}`]: {
  528. padding: 0,
  529. fontSize: 'inherit',
  530. border: 'none',
  531. borderRadius: 0,
  532. outline: 'none',
  533. '&:focus': {
  534. boxShadow: 'none !important'
  535. }
  536. },
  537. '&::before': {
  538. width: 0,
  539. visibility: 'hidden',
  540. content: '"\\a0"'
  541. },
  542. [`${componentCls}`]: {
  543. '&-prefix, &-suffix': {
  544. display: 'flex',
  545. flex: 'none',
  546. alignItems: 'center',
  547. '> *:not(:last-child)': {
  548. marginInlineEnd: token.paddingXS
  549. }
  550. },
  551. '&-show-count-suffix': {
  552. color: colorTextDescription
  553. },
  554. '&-show-count-has-suffix': {
  555. marginInlineEnd: token.paddingXXS
  556. },
  557. '&-prefix': {
  558. marginInlineEnd: inputAffixPadding
  559. },
  560. '&-suffix': {
  561. marginInlineStart: inputAffixPadding
  562. }
  563. }
  564. }), genAllowClearStyle(token)), {
  565. // password
  566. [`${iconCls}${componentCls}-password-icon`]: {
  567. color: colorIcon,
  568. cursor: 'pointer',
  569. transition: `all ${motionDurationSlow}`,
  570. '&:hover': {
  571. color: colorIconHover
  572. }
  573. }
  574. }), genStatusStyle(token, `${componentCls}-affix-wrapper`))
  575. };
  576. };
  577. const genGroupStyle = token => {
  578. const {
  579. componentCls,
  580. colorError,
  581. colorSuccess,
  582. borderRadiusLG,
  583. borderRadiusSM
  584. } = token;
  585. return {
  586. [`${componentCls}-group`]: (0, _extends2.default)((0, _extends2.default)((0, _extends2.default)({}, (0, _style.resetComponent)(token)), genInputGroupStyle(token)), {
  587. '&-rtl': {
  588. direction: 'rtl'
  589. },
  590. '&-wrapper': {
  591. display: 'inline-block',
  592. width: '100%',
  593. textAlign: 'start',
  594. verticalAlign: 'top',
  595. '&-rtl': {
  596. direction: 'rtl'
  597. },
  598. // Size
  599. '&-lg': {
  600. [`${componentCls}-group-addon`]: {
  601. borderRadius: borderRadiusLG
  602. }
  603. },
  604. '&-sm': {
  605. [`${componentCls}-group-addon`]: {
  606. borderRadius: borderRadiusSM
  607. }
  608. },
  609. // Status
  610. '&-status-error': {
  611. [`${componentCls}-group-addon`]: {
  612. color: colorError,
  613. borderColor: colorError
  614. }
  615. },
  616. '&-status-warning': {
  617. [`${componentCls}-group-addon:last-child`]: {
  618. color: colorSuccess,
  619. borderColor: colorSuccess
  620. }
  621. }
  622. }
  623. })
  624. };
  625. };
  626. const genSearchInputStyle = token => {
  627. const {
  628. componentCls,
  629. antCls
  630. } = token;
  631. const searchPrefixCls = `${componentCls}-search`;
  632. return {
  633. [searchPrefixCls]: {
  634. [`${componentCls}`]: {
  635. '&:hover, &:focus': {
  636. borderColor: token.colorPrimaryHover,
  637. [`+ ${componentCls}-group-addon ${searchPrefixCls}-button:not(${antCls}-btn-primary)`]: {
  638. borderInlineStartColor: token.colorPrimaryHover
  639. }
  640. }
  641. },
  642. [`${componentCls}-affix-wrapper`]: {
  643. borderRadius: 0
  644. },
  645. // fix slight height diff in Firefox:
  646. // https://ant.design/components/auto-complete-cn/#components-auto-complete-demo-certain-category
  647. [`${componentCls}-lg`]: {
  648. lineHeight: token.lineHeightLG - 0.0002
  649. },
  650. [`> ${componentCls}-group`]: {
  651. [`> ${componentCls}-group-addon:last-child`]: {
  652. insetInlineStart: -1,
  653. padding: 0,
  654. border: 0,
  655. [`${searchPrefixCls}-button`]: {
  656. paddingTop: 0,
  657. paddingBottom: 0,
  658. borderStartStartRadius: 0,
  659. borderStartEndRadius: token.borderRadius,
  660. borderEndEndRadius: token.borderRadius,
  661. borderEndStartRadius: 0
  662. },
  663. [`${searchPrefixCls}-button:not(${antCls}-btn-primary)`]: {
  664. color: token.colorTextDescription,
  665. '&:hover': {
  666. color: token.colorPrimaryHover
  667. },
  668. '&:active': {
  669. color: token.colorPrimaryActive
  670. },
  671. [`&${antCls}-btn-loading::before`]: {
  672. insetInlineStart: 0,
  673. insetInlineEnd: 0,
  674. insetBlockStart: 0,
  675. insetBlockEnd: 0
  676. }
  677. }
  678. }
  679. },
  680. [`${searchPrefixCls}-button`]: {
  681. height: token.controlHeight,
  682. '&:hover, &:focus': {
  683. zIndex: 1
  684. }
  685. },
  686. [`&-large ${searchPrefixCls}-button`]: {
  687. height: token.controlHeightLG
  688. },
  689. [`&-small ${searchPrefixCls}-button`]: {
  690. height: token.controlHeightSM
  691. },
  692. '&-rtl': {
  693. direction: 'rtl'
  694. },
  695. // ===================== Compact Item Customized Styles =====================
  696. [`&${componentCls}-compact-item`]: {
  697. [`&:not(${componentCls}-compact-last-item)`]: {
  698. [`${componentCls}-group-addon`]: {
  699. [`${componentCls}-search-button`]: {
  700. marginInlineEnd: -token.lineWidth,
  701. borderRadius: 0
  702. }
  703. }
  704. },
  705. [`&:not(${componentCls}-compact-first-item)`]: {
  706. [`${componentCls},${componentCls}-affix-wrapper`]: {
  707. borderRadius: 0
  708. }
  709. },
  710. [`> ${componentCls}-group-addon ${componentCls}-search-button,
  711. > ${componentCls},
  712. ${componentCls}-affix-wrapper`]: {
  713. '&:hover,&:focus,&:active': {
  714. zIndex: 2
  715. }
  716. },
  717. [`> ${componentCls}-affix-wrapper-focused`]: {
  718. zIndex: 2
  719. }
  720. }
  721. }
  722. };
  723. };
  724. function initInputToken(token) {
  725. // @ts-ignore
  726. return (0, _internal.mergeToken)(token, {
  727. inputAffixPadding: token.paddingXXS,
  728. inputPaddingVertical: Math.max(Math.round((token.controlHeight - token.fontSize * token.lineHeight) / 2 * 10) / 10 - token.lineWidth, 3),
  729. inputPaddingVerticalLG: Math.ceil((token.controlHeightLG - token.fontSizeLG * token.lineHeightLG) / 2 * 10) / 10 - token.lineWidth,
  730. inputPaddingVerticalSM: Math.max(Math.round((token.controlHeightSM - token.fontSize * token.lineHeight) / 2 * 10) / 10 - token.lineWidth, 0),
  731. inputPaddingHorizontal: token.paddingSM - token.lineWidth,
  732. inputPaddingHorizontalSM: token.paddingXS - token.lineWidth,
  733. inputPaddingHorizontalLG: token.controlPaddingHorizontal - token.lineWidth,
  734. inputBorderHoverColor: token.colorPrimaryHover,
  735. inputBorderActiveColor: token.colorPrimaryHover
  736. });
  737. }
  738. const genTextAreaStyle = token => {
  739. const {
  740. componentCls,
  741. inputPaddingHorizontal,
  742. paddingLG
  743. } = token;
  744. const textareaPrefixCls = `${componentCls}-textarea`;
  745. return {
  746. [textareaPrefixCls]: {
  747. position: 'relative',
  748. [`${textareaPrefixCls}-suffix`]: {
  749. position: 'absolute',
  750. top: 0,
  751. insetInlineEnd: inputPaddingHorizontal,
  752. bottom: 0,
  753. zIndex: 1,
  754. display: 'inline-flex',
  755. alignItems: 'center',
  756. margin: 'auto'
  757. },
  758. [`&-status-error,
  759. &-status-warning,
  760. &-status-success,
  761. &-status-validating`]: {
  762. [`&${textareaPrefixCls}-has-feedback`]: {
  763. [`${componentCls}`]: {
  764. paddingInlineEnd: paddingLG
  765. }
  766. }
  767. },
  768. '&-show-count': {
  769. // https://github.com/ant-design/ant-design/issues/33049
  770. [`> ${componentCls}`]: {
  771. height: '100%'
  772. },
  773. '&::after': {
  774. color: token.colorTextDescription,
  775. whiteSpace: 'nowrap',
  776. content: 'attr(data-count)',
  777. pointerEvents: 'none',
  778. float: 'right'
  779. }
  780. },
  781. '&-rtl': {
  782. '&::after': {
  783. float: 'left'
  784. }
  785. }
  786. }
  787. };
  788. };
  789. // ============================== Export ==============================
  790. var _default = exports.default = (0, _internal.genComponentStyleHook)('Input', token => {
  791. const inputToken = initInputToken(token);
  792. return [genInputStyle(inputToken), genTextAreaStyle(inputToken), genAffixStyle(inputToken), genGroupStyle(inputToken), genSearchInputStyle(inputToken),
  793. // =====================================================
  794. // == Space Compact ==
  795. // =====================================================
  796. (0, _compactItem.genCompactItemStyle)(inputToken)];
  797. });