list.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. import { unit } from '@ant-design/cssinjs';
  2. import { clearFix, textEllipsis } from '../../style';
  3. const genListStyle = token => {
  4. const {
  5. componentCls,
  6. iconCls,
  7. fontSize,
  8. lineHeight,
  9. calc
  10. } = token;
  11. const itemCls = `${componentCls}-list-item`;
  12. const actionsCls = `${itemCls}-actions`;
  13. const actionCls = `${itemCls}-action`;
  14. return {
  15. [`${componentCls}-wrapper`]: {
  16. [`${componentCls}-list`]: Object.assign(Object.assign({}, clearFix()), {
  17. lineHeight: token.lineHeight,
  18. [itemCls]: {
  19. position: 'relative',
  20. height: calc(token.lineHeight).mul(fontSize).equal(),
  21. marginTop: token.marginXS,
  22. fontSize,
  23. display: 'flex',
  24. alignItems: 'center',
  25. transition: `background-color ${token.motionDurationSlow}`,
  26. borderRadius: token.borderRadiusSM,
  27. '&:hover': {
  28. backgroundColor: token.controlItemBgHover
  29. },
  30. [`${itemCls}-name`]: Object.assign(Object.assign({}, textEllipsis), {
  31. padding: `0 ${unit(token.paddingXS)}`,
  32. lineHeight,
  33. flex: 'auto',
  34. transition: `all ${token.motionDurationSlow}`
  35. }),
  36. [actionsCls]: {
  37. whiteSpace: 'nowrap',
  38. [actionCls]: {
  39. opacity: 0
  40. },
  41. [iconCls]: {
  42. color: token.actionsColor,
  43. transition: `all ${token.motionDurationSlow}`
  44. },
  45. [`
  46. ${actionCls}:focus-visible,
  47. &.picture ${actionCls}
  48. `]: {
  49. opacity: 1
  50. }
  51. },
  52. [`${componentCls}-icon ${iconCls}`]: {
  53. color: token.colorIcon,
  54. fontSize
  55. },
  56. [`${itemCls}-progress`]: {
  57. position: 'absolute',
  58. bottom: token.calc(token.uploadProgressOffset).mul(-1).equal(),
  59. width: '100%',
  60. paddingInlineStart: calc(fontSize).add(token.paddingXS).equal(),
  61. fontSize,
  62. lineHeight: 0,
  63. pointerEvents: 'none',
  64. '> div': {
  65. margin: 0
  66. }
  67. }
  68. },
  69. [`${itemCls}:hover ${actionCls}`]: {
  70. opacity: 1
  71. },
  72. [`${itemCls}-error`]: {
  73. color: token.colorError,
  74. [`${itemCls}-name, ${componentCls}-icon ${iconCls}`]: {
  75. color: token.colorError
  76. },
  77. [actionsCls]: {
  78. [`${iconCls}, ${iconCls}:hover`]: {
  79. color: token.colorError
  80. },
  81. [actionCls]: {
  82. opacity: 1
  83. }
  84. }
  85. },
  86. [`${componentCls}-list-item-container`]: {
  87. transition: `opacity ${token.motionDurationSlow}, height ${token.motionDurationSlow}`,
  88. // For smooth removing animation
  89. '&::before': {
  90. display: 'table',
  91. width: 0,
  92. height: 0,
  93. content: '""'
  94. }
  95. }
  96. })
  97. }
  98. };
  99. };
  100. export default genListStyle;