expand.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  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 genExpandStyle = token => {
  9. const {
  10. componentCls,
  11. antCls,
  12. motionDurationSlow,
  13. lineWidth,
  14. paddingXS,
  15. lineType,
  16. tableBorderColor,
  17. tableExpandIconBg,
  18. tableExpandColumnWidth,
  19. borderRadius,
  20. tablePaddingVertical,
  21. tablePaddingHorizontal,
  22. tableExpandedRowBg,
  23. paddingXXS,
  24. expandIconMarginTop,
  25. expandIconSize,
  26. expandIconHalfInner,
  27. expandIconScale,
  28. calc
  29. } = token;
  30. const tableBorder = `${(0, _cssinjs.unit)(lineWidth)} ${lineType} ${tableBorderColor}`;
  31. const expandIconLineOffset = calc(paddingXXS).sub(lineWidth).equal();
  32. return {
  33. [`${componentCls}-wrapper`]: {
  34. [`${componentCls}-expand-icon-col`]: {
  35. width: tableExpandColumnWidth
  36. },
  37. [`${componentCls}-row-expand-icon-cell`]: {
  38. textAlign: 'center',
  39. [`${componentCls}-row-expand-icon`]: {
  40. display: 'inline-flex',
  41. float: 'none',
  42. verticalAlign: 'sub'
  43. }
  44. },
  45. [`${componentCls}-row-indent`]: {
  46. height: 1,
  47. float: 'left'
  48. },
  49. [`${componentCls}-row-expand-icon`]: Object.assign(Object.assign({}, (0, _style.operationUnit)(token)), {
  50. position: 'relative',
  51. float: 'left',
  52. width: expandIconSize,
  53. height: expandIconSize,
  54. color: 'inherit',
  55. lineHeight: (0, _cssinjs.unit)(expandIconSize),
  56. background: tableExpandIconBg,
  57. border: tableBorder,
  58. borderRadius,
  59. transform: `scale(${expandIconScale})`,
  60. '&:focus, &:hover, &:active': {
  61. borderColor: 'currentcolor'
  62. },
  63. '&::before, &::after': {
  64. position: 'absolute',
  65. background: 'currentcolor',
  66. transition: `transform ${motionDurationSlow} ease-out`,
  67. content: '""'
  68. },
  69. '&::before': {
  70. top: expandIconHalfInner,
  71. insetInlineEnd: expandIconLineOffset,
  72. insetInlineStart: expandIconLineOffset,
  73. height: lineWidth
  74. },
  75. '&::after': {
  76. top: expandIconLineOffset,
  77. bottom: expandIconLineOffset,
  78. insetInlineStart: expandIconHalfInner,
  79. width: lineWidth,
  80. transform: 'rotate(90deg)'
  81. },
  82. // Motion effect
  83. '&-collapsed::before': {
  84. transform: 'rotate(-180deg)'
  85. },
  86. '&-collapsed::after': {
  87. transform: 'rotate(0deg)'
  88. },
  89. '&-spaced': {
  90. '&::before, &::after': {
  91. display: 'none',
  92. content: 'none'
  93. },
  94. background: 'transparent',
  95. border: 0,
  96. visibility: 'hidden'
  97. }
  98. }),
  99. [`${componentCls}-row-indent + ${componentCls}-row-expand-icon`]: {
  100. marginTop: expandIconMarginTop,
  101. marginInlineEnd: paddingXS
  102. },
  103. [`tr${componentCls}-expanded-row`]: {
  104. '&, &:hover': {
  105. '> th, > td': {
  106. background: tableExpandedRowBg
  107. }
  108. },
  109. // https://github.com/ant-design/ant-design/issues/25573
  110. [`${antCls}-descriptions-view`]: {
  111. display: 'flex',
  112. table: {
  113. flex: 'auto',
  114. width: '100%'
  115. }
  116. }
  117. },
  118. // With fixed
  119. [`${componentCls}-expanded-row-fixed`]: {
  120. position: 'relative',
  121. margin: `${(0, _cssinjs.unit)(calc(tablePaddingVertical).mul(-1).equal())} ${(0, _cssinjs.unit)(calc(tablePaddingHorizontal).mul(-1).equal())}`,
  122. padding: `${(0, _cssinjs.unit)(tablePaddingVertical)} ${(0, _cssinjs.unit)(tablePaddingHorizontal)}`
  123. }
  124. }
  125. };
  126. };
  127. var _default = exports.default = genExpandStyle;