list.js 3.1 KB

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