vertical.js 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. const genStepsVerticalStyle = token => {
  2. const {
  3. componentCls,
  4. stepsSmallIconSize,
  5. stepsIconSize
  6. } = token;
  7. return {
  8. [`&${componentCls}-vertical`]: {
  9. display: 'flex',
  10. flexDirection: 'column',
  11. [`> ${componentCls}-item`]: {
  12. display: 'block',
  13. flex: '1 0 auto',
  14. paddingInlineStart: 0,
  15. overflow: 'visible',
  16. [`${componentCls}-item-icon`]: {
  17. float: 'left',
  18. marginInlineEnd: token.margin
  19. },
  20. [`${componentCls}-item-content`]: {
  21. display: 'block',
  22. minHeight: token.controlHeight * 1.5,
  23. overflow: 'hidden'
  24. },
  25. [`${componentCls}-item-title`]: {
  26. lineHeight: `${stepsIconSize}px`
  27. },
  28. [`${componentCls}-item-description`]: {
  29. paddingBottom: token.paddingSM
  30. }
  31. },
  32. [`> ${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]: {
  33. position: 'absolute',
  34. top: 0,
  35. insetInlineStart: token.stepsIconSize / 2 - token.lineWidth,
  36. width: token.lineWidth,
  37. height: '100%',
  38. padding: `${stepsIconSize + token.marginXXS * 1.5}px 0 ${token.marginXXS * 1.5}px`,
  39. '&::after': {
  40. width: token.lineWidth,
  41. height: '100%'
  42. }
  43. },
  44. [`> ${componentCls}-item:not(:last-child) > ${componentCls}-item-container > ${componentCls}-item-tail`]: {
  45. display: 'block'
  46. },
  47. [` > ${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-content > ${componentCls}-item-title`]: {
  48. '&::after': {
  49. display: 'none'
  50. }
  51. },
  52. [`&${componentCls}-small ${componentCls}-item-container`]: {
  53. [`${componentCls}-item-tail`]: {
  54. position: 'absolute',
  55. top: 0,
  56. insetInlineStart: token.stepsSmallIconSize / 2 - token.lineWidth,
  57. padding: `${stepsSmallIconSize + token.marginXXS * 1.5}px 0 ${token.marginXXS * 1.5}px`
  58. },
  59. [`${componentCls}-item-title`]: {
  60. lineHeight: `${stepsSmallIconSize}px`
  61. }
  62. }
  63. }
  64. };
  65. };
  66. export default genStepsVerticalStyle;