variants.js 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.default = void 0;
  6. var _cssinjs = require("@ant-design/cssinjs");
  7. // =====================================================
  8. // == Outlined ==
  9. // =====================================================
  10. const genBaseOutlinedStyle = (token, options) => {
  11. const {
  12. componentCls,
  13. antCls,
  14. controlOutlineWidth
  15. } = token;
  16. return {
  17. [`&:not(${componentCls}-customize-input) ${componentCls}-selector`]: {
  18. border: `${(0, _cssinjs.unit)(token.lineWidth)} ${token.lineType} ${options.borderColor}`,
  19. background: token.selectorBg
  20. },
  21. [`&:not(${componentCls}-disabled):not(${componentCls}-customize-input):not(${antCls}-pagination-size-changer)`]: {
  22. [`&:hover ${componentCls}-selector`]: {
  23. borderColor: options.hoverBorderHover
  24. },
  25. [`${componentCls}-focused& ${componentCls}-selector`]: {
  26. borderColor: options.activeBorderColor,
  27. boxShadow: `0 0 0 ${(0, _cssinjs.unit)(controlOutlineWidth)} ${options.activeOutlineColor}`,
  28. outline: 0
  29. },
  30. [`${componentCls}-prefix`]: {
  31. color: options.color
  32. }
  33. }
  34. };
  35. };
  36. const genOutlinedStatusStyle = (token, options) => ({
  37. [`&${token.componentCls}-status-${options.status}`]: Object.assign({}, genBaseOutlinedStyle(token, options))
  38. });
  39. const genOutlinedStyle = token => ({
  40. '&-outlined': Object.assign(Object.assign(Object.assign(Object.assign({}, genBaseOutlinedStyle(token, {
  41. borderColor: token.colorBorder,
  42. hoverBorderHover: token.hoverBorderColor,
  43. activeBorderColor: token.activeBorderColor,
  44. activeOutlineColor: token.activeOutlineColor,
  45. color: token.colorText
  46. })), genOutlinedStatusStyle(token, {
  47. status: 'error',
  48. borderColor: token.colorError,
  49. hoverBorderHover: token.colorErrorHover,
  50. activeBorderColor: token.colorError,
  51. activeOutlineColor: token.colorErrorOutline,
  52. color: token.colorError
  53. })), genOutlinedStatusStyle(token, {
  54. status: 'warning',
  55. borderColor: token.colorWarning,
  56. hoverBorderHover: token.colorWarningHover,
  57. activeBorderColor: token.colorWarning,
  58. activeOutlineColor: token.colorWarningOutline,
  59. color: token.colorWarning
  60. })), {
  61. [`&${token.componentCls}-disabled`]: {
  62. [`&:not(${token.componentCls}-customize-input) ${token.componentCls}-selector`]: {
  63. background: token.colorBgContainerDisabled,
  64. color: token.colorTextDisabled
  65. }
  66. },
  67. [`&${token.componentCls}-multiple ${token.componentCls}-selection-item`]: {
  68. background: token.multipleItemBg,
  69. border: `${(0, _cssinjs.unit)(token.lineWidth)} ${token.lineType} ${token.multipleItemBorderColor}`
  70. }
  71. })
  72. });
  73. // =====================================================
  74. // == Filled ==
  75. // =====================================================
  76. const genBaseFilledStyle = (token, options) => {
  77. const {
  78. componentCls,
  79. antCls
  80. } = token;
  81. return {
  82. [`&:not(${componentCls}-customize-input) ${componentCls}-selector`]: {
  83. background: options.bg,
  84. border: `${(0, _cssinjs.unit)(token.lineWidth)} ${token.lineType} transparent`,
  85. color: options.color
  86. },
  87. [`&:not(${componentCls}-disabled):not(${componentCls}-customize-input):not(${antCls}-pagination-size-changer)`]: {
  88. [`&:hover ${componentCls}-selector`]: {
  89. background: options.hoverBg
  90. },
  91. [`${componentCls}-focused& ${componentCls}-selector`]: {
  92. background: token.selectorBg,
  93. borderColor: options.activeBorderColor,
  94. outline: 0
  95. }
  96. }
  97. };
  98. };
  99. const genFilledStatusStyle = (token, options) => ({
  100. [`&${token.componentCls}-status-${options.status}`]: Object.assign({}, genBaseFilledStyle(token, options))
  101. });
  102. const genFilledStyle = token => ({
  103. '&-filled': Object.assign(Object.assign(Object.assign(Object.assign({}, genBaseFilledStyle(token, {
  104. bg: token.colorFillTertiary,
  105. hoverBg: token.colorFillSecondary,
  106. activeBorderColor: token.activeBorderColor,
  107. color: token.colorText
  108. })), genFilledStatusStyle(token, {
  109. status: 'error',
  110. bg: token.colorErrorBg,
  111. hoverBg: token.colorErrorBgHover,
  112. activeBorderColor: token.colorError,
  113. color: token.colorError
  114. })), genFilledStatusStyle(token, {
  115. status: 'warning',
  116. bg: token.colorWarningBg,
  117. hoverBg: token.colorWarningBgHover,
  118. activeBorderColor: token.colorWarning,
  119. color: token.colorWarning
  120. })), {
  121. [`&${token.componentCls}-disabled`]: {
  122. [`&:not(${token.componentCls}-customize-input) ${token.componentCls}-selector`]: {
  123. borderColor: token.colorBorder,
  124. background: token.colorBgContainerDisabled,
  125. color: token.colorTextDisabled
  126. }
  127. },
  128. [`&${token.componentCls}-multiple ${token.componentCls}-selection-item`]: {
  129. background: token.colorBgContainer,
  130. border: `${(0, _cssinjs.unit)(token.lineWidth)} ${token.lineType} ${token.colorSplit}`
  131. }
  132. })
  133. });
  134. // =====================================================
  135. // == Borderless ==
  136. // =====================================================
  137. const genBorderlessStyle = token => ({
  138. '&-borderless': {
  139. [`${token.componentCls}-selector`]: {
  140. background: 'transparent',
  141. border: `${(0, _cssinjs.unit)(token.lineWidth)} ${token.lineType} transparent`
  142. },
  143. [`&${token.componentCls}-disabled`]: {
  144. [`&:not(${token.componentCls}-customize-input) ${token.componentCls}-selector`]: {
  145. color: token.colorTextDisabled
  146. }
  147. },
  148. [`&${token.componentCls}-multiple ${token.componentCls}-selection-item`]: {
  149. background: token.multipleItemBg,
  150. border: `${(0, _cssinjs.unit)(token.lineWidth)} ${token.lineType} ${token.multipleItemBorderColor}`
  151. },
  152. // Status
  153. [`&${token.componentCls}-status-error`]: {
  154. [`${token.componentCls}-prefix, ${token.componentCls}-selection-item`]: {
  155. color: token.colorError
  156. }
  157. },
  158. [`&${token.componentCls}-status-warning`]: {
  159. [`${token.componentCls}-prefix, ${token.componentCls}-selection-item`]: {
  160. color: token.colorWarning
  161. }
  162. }
  163. }
  164. });
  165. // =====================================================
  166. // == Underlined ==
  167. // =====================================================
  168. const genBaseUnderlinedStyle = (token, options) => {
  169. const {
  170. componentCls,
  171. antCls
  172. } = token;
  173. return {
  174. [`&:not(${componentCls}-customize-input) ${componentCls}-selector`]: {
  175. borderWidth: `0 0 ${(0, _cssinjs.unit)(token.lineWidth)} 0`,
  176. borderStyle: `none none ${token.lineType} none`,
  177. borderColor: options.borderColor,
  178. background: token.selectorBg,
  179. borderRadius: 0
  180. },
  181. [`&:not(${componentCls}-disabled):not(${componentCls}-customize-input):not(${antCls}-pagination-size-changer)`]: {
  182. [`&:hover ${componentCls}-selector`]: {
  183. borderColor: options.hoverBorderHover
  184. },
  185. [`${componentCls}-focused& ${componentCls}-selector`]: {
  186. borderColor: options.activeBorderColor,
  187. outline: 0
  188. },
  189. [`${componentCls}-prefix`]: {
  190. color: options.color
  191. }
  192. }
  193. };
  194. };
  195. const genUnderlinedStatusStyle = (token, options) => ({
  196. [`&${token.componentCls}-status-${options.status}`]: Object.assign({}, genBaseUnderlinedStyle(token, options))
  197. });
  198. const genUnderlinedStyle = token => ({
  199. '&-underlined': Object.assign(Object.assign(Object.assign(Object.assign({}, genBaseUnderlinedStyle(token, {
  200. borderColor: token.colorBorder,
  201. hoverBorderHover: token.hoverBorderColor,
  202. activeBorderColor: token.activeBorderColor,
  203. activeOutlineColor: token.activeOutlineColor,
  204. color: token.colorText
  205. })), genUnderlinedStatusStyle(token, {
  206. status: 'error',
  207. borderColor: token.colorError,
  208. hoverBorderHover: token.colorErrorHover,
  209. activeBorderColor: token.colorError,
  210. activeOutlineColor: token.colorErrorOutline,
  211. color: token.colorError
  212. })), genUnderlinedStatusStyle(token, {
  213. status: 'warning',
  214. borderColor: token.colorWarning,
  215. hoverBorderHover: token.colorWarningHover,
  216. activeBorderColor: token.colorWarning,
  217. activeOutlineColor: token.colorWarningOutline,
  218. color: token.colorWarning
  219. })), {
  220. [`&${token.componentCls}-disabled`]: {
  221. [`&:not(${token.componentCls}-customize-input) ${token.componentCls}-selector`]: {
  222. color: token.colorTextDisabled
  223. }
  224. },
  225. [`&${token.componentCls}-multiple ${token.componentCls}-selection-item`]: {
  226. background: token.multipleItemBg,
  227. border: `${(0, _cssinjs.unit)(token.lineWidth)} ${token.lineType} ${token.multipleItemBorderColor}`
  228. }
  229. })
  230. });
  231. const genVariantsStyle = token => ({
  232. [token.componentCls]: Object.assign(Object.assign(Object.assign(Object.assign({}, genOutlinedStyle(token)), genFilledStyle(token)), genBorderlessStyle(token)), genUnderlinedStyle(token))
  233. });
  234. var _default = exports.default = genVariantsStyle;