variants.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.genUnderlinedStyle = exports.genOutlinedStyle = exports.genOutlinedGroupStyle = exports.genHoverStyle = exports.genFilledStyle = exports.genFilledGroupStyle = exports.genDisabledStyle = exports.genBorderlessStyle = exports.genBaseUnderlinedStyle = exports.genBaseOutlinedStyle = void 0;
  6. var _cssinjs = require("@ant-design/cssinjs");
  7. var _internal = require("../../theme/internal");
  8. const genHoverStyle = token => ({
  9. borderColor: token.hoverBorderColor,
  10. backgroundColor: token.hoverBg
  11. });
  12. exports.genHoverStyle = genHoverStyle;
  13. const genDisabledStyle = token => ({
  14. color: token.colorTextDisabled,
  15. backgroundColor: token.colorBgContainerDisabled,
  16. borderColor: token.colorBorder,
  17. boxShadow: 'none',
  18. cursor: 'not-allowed',
  19. opacity: 1,
  20. 'input[disabled], textarea[disabled]': {
  21. cursor: 'not-allowed'
  22. },
  23. '&:hover:not([disabled])': Object.assign({}, genHoverStyle((0, _internal.mergeToken)(token, {
  24. hoverBorderColor: token.colorBorder,
  25. hoverBg: token.colorBgContainerDisabled
  26. })))
  27. });
  28. /* ============== Outlined ============== */
  29. exports.genDisabledStyle = genDisabledStyle;
  30. const genBaseOutlinedStyle = (token, options) => ({
  31. background: token.colorBgContainer,
  32. borderWidth: token.lineWidth,
  33. borderStyle: token.lineType,
  34. borderColor: options.borderColor,
  35. '&:hover': {
  36. borderColor: options.hoverBorderColor,
  37. backgroundColor: token.hoverBg
  38. },
  39. '&:focus, &:focus-within': {
  40. borderColor: options.activeBorderColor,
  41. boxShadow: options.activeShadow,
  42. outline: 0,
  43. backgroundColor: token.activeBg
  44. }
  45. });
  46. exports.genBaseOutlinedStyle = genBaseOutlinedStyle;
  47. const genOutlinedStatusStyle = (token, options) => ({
  48. [`&${token.componentCls}-status-${options.status}:not(${token.componentCls}-disabled)`]: Object.assign(Object.assign({}, genBaseOutlinedStyle(token, options)), {
  49. [`${token.componentCls}-prefix, ${token.componentCls}-suffix`]: {
  50. color: options.affixColor
  51. }
  52. }),
  53. [`&${token.componentCls}-status-${options.status}${token.componentCls}-disabled`]: {
  54. borderColor: options.borderColor
  55. }
  56. });
  57. const genOutlinedStyle = (token, extraStyles) => ({
  58. '&-outlined': Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, genBaseOutlinedStyle(token, {
  59. borderColor: token.colorBorder,
  60. hoverBorderColor: token.hoverBorderColor,
  61. activeBorderColor: token.activeBorderColor,
  62. activeShadow: token.activeShadow
  63. })), {
  64. [`&${token.componentCls}-disabled, &[disabled]`]: Object.assign({}, genDisabledStyle(token))
  65. }), genOutlinedStatusStyle(token, {
  66. status: 'error',
  67. borderColor: token.colorError,
  68. hoverBorderColor: token.colorErrorBorderHover,
  69. activeBorderColor: token.colorError,
  70. activeShadow: token.errorActiveShadow,
  71. affixColor: token.colorError
  72. })), genOutlinedStatusStyle(token, {
  73. status: 'warning',
  74. borderColor: token.colorWarning,
  75. hoverBorderColor: token.colorWarningBorderHover,
  76. activeBorderColor: token.colorWarning,
  77. activeShadow: token.warningActiveShadow,
  78. affixColor: token.colorWarning
  79. })), extraStyles)
  80. });
  81. exports.genOutlinedStyle = genOutlinedStyle;
  82. const genOutlinedGroupStatusStyle = (token, options) => ({
  83. [`&${token.componentCls}-group-wrapper-status-${options.status}`]: {
  84. [`${token.componentCls}-group-addon`]: {
  85. borderColor: options.addonBorderColor,
  86. color: options.addonColor
  87. }
  88. }
  89. });
  90. const genOutlinedGroupStyle = token => ({
  91. '&-outlined': Object.assign(Object.assign(Object.assign({
  92. [`${token.componentCls}-group`]: {
  93. '&-addon': {
  94. background: token.addonBg,
  95. border: `${(0, _cssinjs.unit)(token.lineWidth)} ${token.lineType} ${token.colorBorder}`
  96. },
  97. '&-addon:first-child': {
  98. borderInlineEnd: 0
  99. },
  100. '&-addon:last-child': {
  101. borderInlineStart: 0
  102. }
  103. }
  104. }, genOutlinedGroupStatusStyle(token, {
  105. status: 'error',
  106. addonBorderColor: token.colorError,
  107. addonColor: token.colorErrorText
  108. })), genOutlinedGroupStatusStyle(token, {
  109. status: 'warning',
  110. addonBorderColor: token.colorWarning,
  111. addonColor: token.colorWarningText
  112. })), {
  113. [`&${token.componentCls}-group-wrapper-disabled`]: {
  114. [`${token.componentCls}-group-addon`]: Object.assign({}, genDisabledStyle(token))
  115. }
  116. })
  117. });
  118. /* ============ Borderless ============ */
  119. exports.genOutlinedGroupStyle = genOutlinedGroupStyle;
  120. const genBorderlessStyle = (token, extraStyles) => {
  121. const {
  122. componentCls
  123. } = token;
  124. return {
  125. '&-borderless': Object.assign({
  126. background: 'transparent',
  127. border: 'none',
  128. '&:focus, &:focus-within': {
  129. outline: 'none'
  130. },
  131. // >>>>> Disabled
  132. [`&${componentCls}-disabled, &[disabled]`]: {
  133. color: token.colorTextDisabled,
  134. cursor: 'not-allowed'
  135. },
  136. // >>>>> Status
  137. [`&${componentCls}-status-error`]: {
  138. '&, & input, & textarea': {
  139. color: token.colorError
  140. }
  141. },
  142. [`&${componentCls}-status-warning`]: {
  143. '&, & input, & textarea': {
  144. color: token.colorWarning
  145. }
  146. }
  147. }, extraStyles)
  148. };
  149. };
  150. /* ============== Filled ============== */
  151. exports.genBorderlessStyle = genBorderlessStyle;
  152. const genBaseFilledStyle = (token, options) => {
  153. var _a;
  154. return {
  155. background: options.bg,
  156. borderWidth: token.lineWidth,
  157. borderStyle: token.lineType,
  158. borderColor: 'transparent',
  159. 'input&, & input, textarea&, & textarea': {
  160. color: (_a = options === null || options === void 0 ? void 0 : options.inputColor) !== null && _a !== void 0 ? _a : 'unset'
  161. },
  162. '&:hover': {
  163. background: options.hoverBg
  164. },
  165. '&:focus, &:focus-within': {
  166. outline: 0,
  167. borderColor: options.activeBorderColor,
  168. backgroundColor: token.activeBg
  169. }
  170. };
  171. };
  172. const genFilledStatusStyle = (token, options) => ({
  173. [`&${token.componentCls}-status-${options.status}:not(${token.componentCls}-disabled)`]: Object.assign(Object.assign({}, genBaseFilledStyle(token, options)), {
  174. [`${token.componentCls}-prefix, ${token.componentCls}-suffix`]: {
  175. color: options.affixColor
  176. }
  177. })
  178. });
  179. const genFilledStyle = (token, extraStyles) => ({
  180. '&-filled': Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, genBaseFilledStyle(token, {
  181. bg: token.colorFillTertiary,
  182. hoverBg: token.colorFillSecondary,
  183. activeBorderColor: token.activeBorderColor
  184. })), {
  185. [`&${token.componentCls}-disabled, &[disabled]`]: Object.assign({}, genDisabledStyle(token))
  186. }), genFilledStatusStyle(token, {
  187. status: 'error',
  188. bg: token.colorErrorBg,
  189. hoverBg: token.colorErrorBgHover,
  190. activeBorderColor: token.colorError,
  191. inputColor: token.colorErrorText,
  192. affixColor: token.colorError
  193. })), genFilledStatusStyle(token, {
  194. status: 'warning',
  195. bg: token.colorWarningBg,
  196. hoverBg: token.colorWarningBgHover,
  197. activeBorderColor: token.colorWarning,
  198. inputColor: token.colorWarningText,
  199. affixColor: token.colorWarning
  200. })), extraStyles)
  201. });
  202. exports.genFilledStyle = genFilledStyle;
  203. const genFilledGroupStatusStyle = (token, options) => ({
  204. [`&${token.componentCls}-group-wrapper-status-${options.status}`]: {
  205. [`${token.componentCls}-group-addon`]: {
  206. background: options.addonBg,
  207. color: options.addonColor
  208. }
  209. }
  210. });
  211. const genFilledGroupStyle = token => ({
  212. '&-filled': Object.assign(Object.assign(Object.assign({
  213. [`${token.componentCls}-group-addon`]: {
  214. background: token.colorFillTertiary,
  215. '&:last-child': {
  216. position: 'static'
  217. }
  218. }
  219. }, genFilledGroupStatusStyle(token, {
  220. status: 'error',
  221. addonBg: token.colorErrorBg,
  222. addonColor: token.colorErrorText
  223. })), genFilledGroupStatusStyle(token, {
  224. status: 'warning',
  225. addonBg: token.colorWarningBg,
  226. addonColor: token.colorWarningText
  227. })), {
  228. [`&${token.componentCls}-group-wrapper-disabled`]: {
  229. [`${token.componentCls}-group`]: {
  230. '&-addon': {
  231. background: token.colorFillTertiary,
  232. color: token.colorTextDisabled
  233. },
  234. '&-addon:first-child': {
  235. borderInlineStart: `${(0, _cssinjs.unit)(token.lineWidth)} ${token.lineType} ${token.colorBorder}`,
  236. borderTop: `${(0, _cssinjs.unit)(token.lineWidth)} ${token.lineType} ${token.colorBorder}`,
  237. borderBottom: `${(0, _cssinjs.unit)(token.lineWidth)} ${token.lineType} ${token.colorBorder}`
  238. },
  239. '&-addon:last-child': {
  240. borderInlineEnd: `${(0, _cssinjs.unit)(token.lineWidth)} ${token.lineType} ${token.colorBorder}`,
  241. borderTop: `${(0, _cssinjs.unit)(token.lineWidth)} ${token.lineType} ${token.colorBorder}`,
  242. borderBottom: `${(0, _cssinjs.unit)(token.lineWidth)} ${token.lineType} ${token.colorBorder}`
  243. }
  244. }
  245. }
  246. })
  247. });
  248. /* ============== Underlined ============== */
  249. // https://github.com/ant-design/ant-design/issues/51379
  250. exports.genFilledGroupStyle = genFilledGroupStyle;
  251. const genBaseUnderlinedStyle = (token, options) => ({
  252. background: token.colorBgContainer,
  253. borderWidth: `${(0, _cssinjs.unit)(token.lineWidth)} 0`,
  254. borderStyle: `${token.lineType} none`,
  255. borderColor: `transparent transparent ${options.borderColor} transparent`,
  256. borderRadius: 0,
  257. '&:hover': {
  258. borderColor: `transparent transparent ${options.borderColor} transparent`,
  259. backgroundColor: token.hoverBg
  260. },
  261. '&:focus, &:focus-within': {
  262. borderColor: `transparent transparent ${options.activeBorderColor} transparent`,
  263. outline: 0,
  264. backgroundColor: token.activeBg
  265. }
  266. });
  267. exports.genBaseUnderlinedStyle = genBaseUnderlinedStyle;
  268. const genUnderlinedStatusStyle = (token, options) => ({
  269. [`&${token.componentCls}-status-${options.status}:not(${token.componentCls}-disabled)`]: Object.assign(Object.assign({}, genBaseUnderlinedStyle(token, options)), {
  270. [`${token.componentCls}-prefix, ${token.componentCls}-suffix`]: {
  271. color: options.affixColor
  272. }
  273. }),
  274. [`&${token.componentCls}-status-${options.status}${token.componentCls}-disabled`]: {
  275. borderColor: `transparent transparent ${options.borderColor} transparent`
  276. }
  277. });
  278. const genUnderlinedStyle = (token, extraStyles) => ({
  279. '&-underlined': Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, genBaseUnderlinedStyle(token, {
  280. borderColor: token.colorBorder,
  281. hoverBorderColor: token.hoverBorderColor,
  282. activeBorderColor: token.activeBorderColor,
  283. activeShadow: token.activeShadow
  284. })), {
  285. // >>>>> Disabled
  286. [`&${token.componentCls}-disabled, &[disabled]`]: {
  287. color: token.colorTextDisabled,
  288. boxShadow: 'none',
  289. cursor: 'not-allowed',
  290. '&:hover': {
  291. borderColor: `transparent transparent ${token.colorBorder} transparent`
  292. }
  293. },
  294. 'input[disabled], textarea[disabled]': {
  295. cursor: 'not-allowed'
  296. }
  297. }), genUnderlinedStatusStyle(token, {
  298. status: 'error',
  299. borderColor: token.colorError,
  300. hoverBorderColor: token.colorErrorBorderHover,
  301. activeBorderColor: token.colorError,
  302. activeShadow: token.errorActiveShadow,
  303. affixColor: token.colorError
  304. })), genUnderlinedStatusStyle(token, {
  305. status: 'warning',
  306. borderColor: token.colorWarning,
  307. hoverBorderColor: token.colorWarningBorderHover,
  308. activeBorderColor: token.colorWarning,
  309. activeShadow: token.warningActiveShadow,
  310. affixColor: token.colorWarning
  311. })), extraStyles)
  312. });
  313. exports.genUnderlinedStyle = genUnderlinedStyle;