single.js 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. import { unit } from '@ant-design/cssinjs';
  2. import { resetComponent } from '../../style';
  3. import { mergeToken } from '../../theme/internal';
  4. function genSizeStyle(token, suffix) {
  5. const {
  6. componentCls,
  7. inputPaddingHorizontalBase,
  8. borderRadius
  9. } = token;
  10. const selectHeightWithoutBorder = token.calc(token.controlHeight).sub(token.calc(token.lineWidth).mul(2)).equal();
  11. const suffixCls = suffix ? `${componentCls}-${suffix}` : '';
  12. return {
  13. [`${componentCls}-single${suffixCls}`]: {
  14. fontSize: token.fontSize,
  15. height: token.controlHeight,
  16. // ========================= Selector =========================
  17. [`${componentCls}-selector`]: Object.assign(Object.assign({}, resetComponent(token, true)), {
  18. display: 'flex',
  19. borderRadius,
  20. flex: '1 1 auto',
  21. [`${componentCls}-selection-wrap:after`]: {
  22. lineHeight: unit(selectHeightWithoutBorder)
  23. },
  24. [`${componentCls}-selection-search`]: {
  25. position: 'absolute',
  26. inset: 0,
  27. width: '100%',
  28. '&-input': {
  29. width: '100%',
  30. WebkitAppearance: 'textfield'
  31. }
  32. },
  33. [`
  34. ${componentCls}-selection-item,
  35. ${componentCls}-selection-placeholder
  36. `]: {
  37. display: 'block',
  38. padding: 0,
  39. lineHeight: unit(selectHeightWithoutBorder),
  40. transition: `all ${token.motionDurationSlow}, visibility 0s`,
  41. alignSelf: 'center'
  42. },
  43. [`${componentCls}-selection-placeholder`]: {
  44. transition: 'none',
  45. pointerEvents: 'none'
  46. },
  47. // For common baseline align
  48. [['&:after', /* For '' value baseline align */
  49. `${componentCls}-selection-item:empty:after`, /* For undefined value baseline align */
  50. `${componentCls}-selection-placeholder:empty:after`].join(',')]: {
  51. display: 'inline-block',
  52. width: 0,
  53. visibility: 'hidden',
  54. content: '"\\a0"'
  55. }
  56. }),
  57. [`
  58. &${componentCls}-show-arrow ${componentCls}-selection-item,
  59. &${componentCls}-show-arrow ${componentCls}-selection-search,
  60. &${componentCls}-show-arrow ${componentCls}-selection-placeholder
  61. `]: {
  62. paddingInlineEnd: token.showArrowPaddingInlineEnd
  63. },
  64. // Opacity selection if open
  65. [`&${componentCls}-open ${componentCls}-selection-item`]: {
  66. color: token.colorTextPlaceholder
  67. },
  68. // ========================== Input ==========================
  69. // We only change the style of non-customize input which is only support by `combobox` mode.
  70. // Not customize
  71. [`&:not(${componentCls}-customize-input)`]: {
  72. [`${componentCls}-selector`]: {
  73. width: '100%',
  74. height: '100%',
  75. alignItems: 'center',
  76. padding: `0 ${unit(inputPaddingHorizontalBase)}`,
  77. [`${componentCls}-selection-search-input`]: {
  78. height: selectHeightWithoutBorder,
  79. fontSize: token.fontSize
  80. },
  81. '&:after': {
  82. lineHeight: unit(selectHeightWithoutBorder)
  83. }
  84. }
  85. },
  86. [`&${componentCls}-customize-input`]: {
  87. [`${componentCls}-selector`]: {
  88. '&:after': {
  89. display: 'none'
  90. },
  91. [`${componentCls}-selection-search`]: {
  92. position: 'static',
  93. width: '100%'
  94. },
  95. [`${componentCls}-selection-placeholder`]: {
  96. position: 'absolute',
  97. insetInlineStart: 0,
  98. insetInlineEnd: 0,
  99. padding: `0 ${unit(inputPaddingHorizontalBase)}`,
  100. '&:after': {
  101. display: 'none'
  102. }
  103. }
  104. }
  105. }
  106. }
  107. };
  108. }
  109. export default function genSingleStyle(token) {
  110. const {
  111. componentCls
  112. } = token;
  113. const inputPaddingHorizontalSM = token.calc(token.controlPaddingHorizontalSM).sub(token.lineWidth).equal();
  114. return [genSizeStyle(token),
  115. // ======================== Small ========================
  116. // Shared
  117. genSizeStyle(mergeToken(token, {
  118. controlHeight: token.controlHeightSM,
  119. borderRadius: token.borderRadiusSM
  120. }), 'sm'),
  121. // padding
  122. {
  123. [`${componentCls}-single${componentCls}-sm`]: {
  124. [`&:not(${componentCls}-customize-input)`]: {
  125. [`${componentCls}-selector`]: {
  126. padding: `0 ${unit(inputPaddingHorizontalSM)}`
  127. },
  128. // With arrow should provides `padding-right` to show the arrow
  129. [`&${componentCls}-show-arrow ${componentCls}-selection-search`]: {
  130. insetInlineEnd: token.calc(inputPaddingHorizontalSM).add(token.calc(token.fontSize).mul(1.5)).equal()
  131. },
  132. [`
  133. &${componentCls}-show-arrow ${componentCls}-selection-item,
  134. &${componentCls}-show-arrow ${componentCls}-selection-placeholder
  135. `]: {
  136. paddingInlineEnd: token.calc(token.fontSize).mul(1.5).equal()
  137. }
  138. }
  139. }
  140. },
  141. // ======================== Large ========================
  142. // Shared
  143. genSizeStyle(mergeToken(token, {
  144. controlHeight: token.singleItemHeightLG,
  145. fontSize: token.fontSizeLG,
  146. borderRadius: token.borderRadiusLG
  147. }), 'lg')];
  148. }