single.js 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  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.controlHeight - token.lineWidth * 2;
  11. const selectionItemPadding = Math.ceil(token.fontSize * 1.25);
  12. const suffixCls = suffix ? `${componentCls}-${suffix}` : '';
  13. return {
  14. [`${componentCls}-single${suffixCls}`]: {
  15. fontSize: token.fontSize,
  16. // ========================= Selector =========================
  17. [`${componentCls}-selector`]: _extends(_extends({}, resetComponent(token)), {
  18. display: 'flex',
  19. borderRadius,
  20. [`${componentCls}-selection-search`]: {
  21. position: 'absolute',
  22. top: 0,
  23. insetInlineStart: inputPaddingHorizontalBase,
  24. insetInlineEnd: inputPaddingHorizontalBase,
  25. bottom: 0,
  26. '&-input': {
  27. width: '100%'
  28. }
  29. },
  30. [`
  31. ${componentCls}-selection-item,
  32. ${componentCls}-selection-placeholder
  33. `]: {
  34. padding: 0,
  35. lineHeight: `${selectHeightWithoutBorder}px`,
  36. transition: `all ${token.motionDurationSlow}`,
  37. // Firefox inline-block position calculation is not same as Chrome & Safari. Patch this:
  38. '@supports (-moz-appearance: meterbar)': {
  39. lineHeight: `${selectHeightWithoutBorder}px`
  40. }
  41. },
  42. [`${componentCls}-selection-item`]: {
  43. position: 'relative',
  44. userSelect: 'none'
  45. },
  46. [`${componentCls}-selection-placeholder`]: {
  47. transition: 'none',
  48. pointerEvents: 'none'
  49. },
  50. // For common baseline align
  51. [['&:after', /* For '' value baseline align */
  52. `${componentCls}-selection-item:after`, /* For undefined value baseline align */
  53. `${componentCls}-selection-placeholder:after`].join(',')]: {
  54. display: 'inline-block',
  55. width: 0,
  56. visibility: 'hidden',
  57. content: '"\\a0"'
  58. }
  59. }),
  60. [`
  61. &${componentCls}-show-arrow ${componentCls}-selection-item,
  62. &${componentCls}-show-arrow ${componentCls}-selection-placeholder
  63. `]: {
  64. paddingInlineEnd: selectionItemPadding
  65. },
  66. // Opacity selection if open
  67. [`&${componentCls}-open ${componentCls}-selection-item`]: {
  68. color: token.colorTextPlaceholder
  69. },
  70. // ========================== Input ==========================
  71. // We only change the style of non-customize input which is only support by `combobox` mode.
  72. // Not customize
  73. [`&:not(${componentCls}-customize-input)`]: {
  74. [`${componentCls}-selector`]: {
  75. width: '100%',
  76. height: token.controlHeight,
  77. padding: `0 ${inputPaddingHorizontalBase}px`,
  78. [`${componentCls}-selection-search-input`]: {
  79. height: selectHeightWithoutBorder
  80. },
  81. '&:after': {
  82. lineHeight: `${selectHeightWithoutBorder}px`
  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 ${inputPaddingHorizontalBase}px`,
  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.controlPaddingHorizontalSM - token.lineWidth;
  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}-selection-search`]: {
  126. insetInlineStart: inputPaddingHorizontalSM,
  127. insetInlineEnd: inputPaddingHorizontalSM
  128. },
  129. [`${componentCls}-selector`]: {
  130. padding: `0 ${inputPaddingHorizontalSM}px`
  131. },
  132. // With arrow should provides `padding-right` to show the arrow
  133. [`&${componentCls}-show-arrow ${componentCls}-selection-search`]: {
  134. insetInlineEnd: inputPaddingHorizontalSM + token.fontSize * 1.5
  135. },
  136. [`
  137. &${componentCls}-show-arrow ${componentCls}-selection-item,
  138. &${componentCls}-show-arrow ${componentCls}-selection-placeholder
  139. `]: {
  140. paddingInlineEnd: token.fontSize * 1.5
  141. }
  142. }
  143. }
  144. },
  145. // ======================== Large ========================
  146. // Shared
  147. genSizeStyle(mergeToken(token, {
  148. controlHeight: token.controlHeightLG,
  149. fontSize: token.fontSizeLG,
  150. borderRadius: token.borderRadiusLG
  151. }), 'lg')];
  152. }