progress.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. import { unit } from '@ant-design/cssinjs';
  2. const genStepsProgressStyle = token => {
  3. const {
  4. antCls,
  5. componentCls,
  6. iconSize,
  7. iconSizeSM,
  8. processIconColor,
  9. marginXXS,
  10. lineWidthBold,
  11. lineWidth,
  12. paddingXXS
  13. } = token;
  14. const progressSize = token.calc(iconSize).add(token.calc(lineWidthBold).mul(4).equal()).equal();
  15. const progressSizeSM = token.calc(iconSizeSM).add(token.calc(token.lineWidth).mul(4).equal()).equal();
  16. return {
  17. [`&${componentCls}-with-progress`]: {
  18. [`${componentCls}-item`]: {
  19. paddingTop: paddingXXS,
  20. [`&-process ${componentCls}-item-container ${componentCls}-item-icon ${componentCls}-icon`]: {
  21. color: processIconColor
  22. }
  23. },
  24. [`&${componentCls}-vertical > ${componentCls}-item `]: {
  25. paddingInlineStart: paddingXXS,
  26. [`> ${componentCls}-item-container > ${componentCls}-item-tail`]: {
  27. top: marginXXS,
  28. insetInlineStart: token.calc(iconSize).div(2).sub(lineWidth).add(paddingXXS).equal()
  29. }
  30. },
  31. [`&, &${componentCls}-small`]: {
  32. [`&${componentCls}-horizontal ${componentCls}-item:first-child`]: {
  33. paddingBottom: paddingXXS,
  34. paddingInlineStart: paddingXXS
  35. }
  36. },
  37. [`&${componentCls}-small${componentCls}-vertical > ${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]: {
  38. insetInlineStart: token.calc(iconSizeSM).div(2).sub(lineWidth).add(paddingXXS).equal()
  39. },
  40. [`&${componentCls}-label-vertical ${componentCls}-item ${componentCls}-item-tail`]: {
  41. top: token.calc(iconSize).div(2).add(paddingXXS).equal()
  42. },
  43. [`${componentCls}-item-icon`]: {
  44. position: 'relative',
  45. [`${antCls}-progress`]: {
  46. position: 'absolute',
  47. insetInlineStart: '50%',
  48. top: '50%',
  49. transform: 'translate(-50%, -50%)',
  50. '&-inner': {
  51. width: `${unit(progressSize)} !important`,
  52. height: `${unit(progressSize)} !important`
  53. }
  54. }
  55. },
  56. // ============================== Small size ==============================
  57. [`&${componentCls}-small`]: {
  58. [`&${componentCls}-label-vertical ${componentCls}-item ${componentCls}-item-tail`]: {
  59. top: token.calc(iconSizeSM).div(2).add(paddingXXS).equal()
  60. },
  61. [`${componentCls}-item-icon ${antCls}-progress-inner`]: {
  62. width: `${unit(progressSizeSM)} !important`,
  63. height: `${unit(progressSizeSM)} !important`
  64. }
  65. }
  66. }
  67. };
  68. };
  69. export default genStepsProgressStyle;