progress.js 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. const genStepsProgressStyle = token => {
  2. const {
  3. antCls,
  4. componentCls
  5. } = token;
  6. return {
  7. [`&${componentCls}-with-progress`]: {
  8. [`${componentCls}-item`]: {
  9. paddingTop: token.paddingXXS,
  10. [`&-process ${componentCls}-item-container ${componentCls}-item-icon ${componentCls}-icon`]: {
  11. color: token.processIconColor
  12. }
  13. },
  14. [`&${componentCls}-vertical > ${componentCls}-item `]: {
  15. paddingInlineStart: token.paddingXXS,
  16. [`> ${componentCls}-item-container > ${componentCls}-item-tail`]: {
  17. top: token.marginXXS,
  18. insetInlineStart: token.stepsIconSize / 2 - token.lineWidth + token.paddingXXS
  19. }
  20. },
  21. [`&, &${componentCls}-small`]: {
  22. [`&${componentCls}-horizontal ${componentCls}-item:first-child`]: {
  23. paddingBottom: token.paddingXXS,
  24. paddingInlineStart: token.paddingXXS
  25. }
  26. },
  27. [`&${componentCls}-small${componentCls}-vertical > ${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]: {
  28. insetInlineStart: token.stepsSmallIconSize / 2 - token.lineWidth + token.paddingXXS
  29. },
  30. [`&${componentCls}-label-vertical`]: {
  31. [`${componentCls}-item ${componentCls}-item-tail`]: {
  32. top: token.margin - 2 * token.lineWidth
  33. }
  34. },
  35. [`${componentCls}-item-icon`]: {
  36. position: 'relative',
  37. [`${antCls}-progress`]: {
  38. position: 'absolute',
  39. insetBlockStart: (token.stepsIconSize - token.stepsProgressSize - token.lineWidth * 2) / 2,
  40. insetInlineStart: (token.stepsIconSize - token.stepsProgressSize - token.lineWidth * 2) / 2
  41. }
  42. }
  43. }
  44. };
  45. };
  46. export default genStepsProgressStyle;