small.js 1.7 KB

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