progress-dot.js 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  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. const genStepsProgressDotStyle = token => {
  8. const {
  9. componentCls,
  10. descriptionMaxWidth,
  11. lineHeight,
  12. dotCurrentSize,
  13. dotSize,
  14. motionDurationSlow
  15. } = token;
  16. return {
  17. [`&${componentCls}-dot, &${componentCls}-dot${componentCls}-small`]: {
  18. [`${componentCls}-item`]: {
  19. '&-title': {
  20. lineHeight
  21. },
  22. '&-tail': {
  23. // Math.floor((token.size - token.lineWidth * 3) / 2)
  24. top: token.calc(token.dotSize).sub(token.calc(token.lineWidth).mul(3).equal()).div(2).equal(),
  25. width: '100%',
  26. marginTop: 0,
  27. marginBottom: 0,
  28. marginInline: `${(0, _cssinjs.unit)(token.calc(descriptionMaxWidth).div(2).equal())} 0`,
  29. padding: 0,
  30. '&::after': {
  31. width: `calc(100% - ${(0, _cssinjs.unit)(token.calc(token.marginSM).mul(2).equal())})`,
  32. height: token.calc(token.lineWidth).mul(3).equal(),
  33. marginInlineStart: token.marginSM
  34. }
  35. },
  36. '&-icon': {
  37. width: dotSize,
  38. height: dotSize,
  39. marginInlineStart: token.calc(token.descriptionMaxWidth).sub(dotSize).div(2).equal(),
  40. paddingInlineEnd: 0,
  41. lineHeight: (0, _cssinjs.unit)(dotSize),
  42. background: 'transparent',
  43. border: 0,
  44. [`${componentCls}-icon-dot`]: {
  45. position: 'relative',
  46. float: 'left',
  47. width: '100%',
  48. height: '100%',
  49. borderRadius: 100,
  50. // very large number
  51. transition: `all ${motionDurationSlow}`,
  52. /* expand hover area */
  53. '&::after': {
  54. position: 'absolute',
  55. top: token.calc(token.marginSM).mul(-1).equal(),
  56. insetInlineStart: token.calc(dotSize).sub(token.calc(token.controlHeightLG).mul(1.5).equal()).div(2).equal(),
  57. width: token.calc(token.controlHeightLG).mul(1.5).equal(),
  58. height: token.controlHeight,
  59. background: 'transparent',
  60. content: '""'
  61. }
  62. }
  63. },
  64. '&-content': {
  65. width: descriptionMaxWidth
  66. },
  67. [`&-process ${componentCls}-item-icon`]: {
  68. position: 'relative',
  69. top: token.calc(dotSize).sub(dotCurrentSize).div(2).equal(),
  70. width: dotCurrentSize,
  71. height: dotCurrentSize,
  72. lineHeight: (0, _cssinjs.unit)(dotCurrentSize),
  73. background: 'none',
  74. marginInlineStart: token.calc(token.descriptionMaxWidth).sub(dotCurrentSize).div(2).equal()
  75. },
  76. [`&-process ${componentCls}-icon`]: {
  77. [`&:first-child ${componentCls}-icon-dot`]: {
  78. insetInlineStart: 0
  79. }
  80. }
  81. }
  82. },
  83. [`&${componentCls}-vertical${componentCls}-dot`]: {
  84. [`${componentCls}-item-icon`]: {
  85. marginTop: token.calc(token.controlHeight).sub(dotSize).div(2).equal(),
  86. marginInlineStart: 0,
  87. background: 'none'
  88. },
  89. [`${componentCls}-item-process ${componentCls}-item-icon`]: {
  90. marginTop: token.calc(token.controlHeight).sub(dotCurrentSize).div(2).equal(),
  91. top: 0,
  92. insetInlineStart: token.calc(dotSize).sub(dotCurrentSize).div(2).equal(),
  93. marginInlineStart: 0
  94. },
  95. // https://github.com/ant-design/ant-design/issues/18354
  96. [`${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]: {
  97. top: token.calc(token.controlHeight).sub(dotSize).div(2).equal(),
  98. insetInlineStart: 0,
  99. margin: 0,
  100. padding: `${(0, _cssinjs.unit)(token.calc(dotSize).add(token.paddingXS).equal())} 0 ${(0, _cssinjs.unit)(token.paddingXS)}`,
  101. '&::after': {
  102. marginInlineStart: token.calc(dotSize).sub(token.lineWidth).div(2).equal()
  103. }
  104. },
  105. [`&${componentCls}-small`]: {
  106. [`${componentCls}-item-icon`]: {
  107. marginTop: token.calc(token.controlHeightSM).sub(dotSize).div(2).equal()
  108. },
  109. [`${componentCls}-item-process ${componentCls}-item-icon`]: {
  110. marginTop: token.calc(token.controlHeightSM).sub(dotCurrentSize).div(2).equal()
  111. },
  112. [`${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]: {
  113. top: token.calc(token.controlHeightSM).sub(dotSize).div(2).equal()
  114. }
  115. },
  116. [`${componentCls}-item:first-child ${componentCls}-icon-dot`]: {
  117. insetInlineStart: 0
  118. },
  119. [`${componentCls}-item-content`]: {
  120. width: 'inherit'
  121. }
  122. }
  123. };
  124. };
  125. var _default = exports.default = genStepsProgressDotStyle;