vertical.js 2.3 KB

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