variants.js 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738
  1. import { unit } from '@ant-design/cssinjs';
  2. import { genBorderlessStyle, genFilledStyle, genOutlinedStyle, genUnderlinedStyle } from '../../input/style/variants';
  3. const genVariantsStyle = token => {
  4. const {
  5. componentCls
  6. } = token;
  7. return {
  8. [componentCls]: [Object.assign(Object.assign(Object.assign(Object.assign({}, genOutlinedStyle(token)), genUnderlinedStyle(token)), genFilledStyle(token)), genBorderlessStyle(token)),
  9. // ========================= Multiple =========================
  10. {
  11. '&-outlined': {
  12. [`&${componentCls}-multiple ${componentCls}-selection-item`]: {
  13. background: token.multipleItemBg,
  14. border: `${unit(token.lineWidth)} ${token.lineType} ${token.multipleItemBorderColor}`
  15. }
  16. },
  17. '&-filled': {
  18. [`&${componentCls}-multiple ${componentCls}-selection-item`]: {
  19. background: token.colorBgContainer,
  20. border: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`
  21. }
  22. },
  23. '&-borderless': {
  24. [`&${componentCls}-multiple ${componentCls}-selection-item`]: {
  25. background: token.multipleItemBg,
  26. border: `${unit(token.lineWidth)} ${token.lineType} ${token.multipleItemBorderColor}`
  27. }
  28. },
  29. '&-underlined': {
  30. [`&${componentCls}-multiple ${componentCls}-selection-item`]: {
  31. background: token.multipleItemBg,
  32. border: `${unit(token.lineWidth)} ${token.lineType} ${token.multipleItemBorderColor}`
  33. }
  34. }
  35. }]
  36. };
  37. };
  38. export default genVariantsStyle;