expand.js 3.5 KB

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