small.js 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. const genStepsSmallStyle = token => {
  2. const {
  3. componentCls,
  4. stepsSmallIconSize,
  5. // stepsSmallIconMargin,
  6. fontSizeSM,
  7. fontSize,
  8. colorTextDescription
  9. } = token;
  10. return {
  11. [`&${componentCls}-small`]: {
  12. [`&${componentCls}-horizontal:not(${componentCls}-label-vertical) ${componentCls}-item`]: {
  13. paddingInlineStart: token.paddingSM,
  14. '&:first-child': {
  15. paddingInlineStart: 0
  16. }
  17. },
  18. [`${componentCls}-item-icon`]: {
  19. width: stepsSmallIconSize,
  20. height: stepsSmallIconSize,
  21. // margin: stepsSmallIconMargin,
  22. marginTop: 0,
  23. marginBottom: 0,
  24. marginInline: `0 ${token.marginXS}px`,
  25. fontSize: fontSizeSM,
  26. lineHeight: `${stepsSmallIconSize}px`,
  27. textAlign: 'center',
  28. borderRadius: stepsSmallIconSize
  29. },
  30. [`${componentCls}-item-title`]: {
  31. paddingInlineEnd: token.paddingSM,
  32. fontSize,
  33. lineHeight: `${stepsSmallIconSize}px`,
  34. '&::after': {
  35. top: stepsSmallIconSize / 2
  36. }
  37. },
  38. [`${componentCls}-item-description`]: {
  39. color: colorTextDescription,
  40. fontSize
  41. },
  42. [`${componentCls}-item-tail`]: {
  43. top: stepsSmallIconSize / 2 - token.paddingXXS
  44. },
  45. [`${componentCls}-item-custom ${componentCls}-item-icon`]: {
  46. width: 'inherit',
  47. height: 'inherit',
  48. lineHeight: 'inherit',
  49. background: 'none',
  50. border: 0,
  51. borderRadius: 0,
  52. [`> ${componentCls}-icon`]: {
  53. fontSize: stepsSmallIconSize,
  54. lineHeight: `${stepsSmallIconSize}px`,
  55. transform: 'none'
  56. }
  57. }
  58. }
  59. };
  60. };
  61. export default genStepsSmallStyle;