bordered.js 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. const genBorderedStyle = token => {
  3. const {
  4. componentCls
  5. } = token;
  6. const tableBorder = `${token.lineWidth}px ${token.lineType} ${token.tableBorderColor}`;
  7. const getSizeBorderStyle = (size, paddingVertical, paddingHorizontal) => ({
  8. [`&${componentCls}-${size}`]: {
  9. [`> ${componentCls}-container`]: {
  10. [`> ${componentCls}-content, > ${componentCls}-body`]: {
  11. '> table > tbody > tr > td': {
  12. [`> ${componentCls}-expanded-row-fixed`]: {
  13. margin: `-${paddingVertical}px -${paddingHorizontal + token.lineWidth}px`
  14. }
  15. }
  16. }
  17. }
  18. }
  19. });
  20. return {
  21. [`${componentCls}-wrapper`]: {
  22. [`${componentCls}${componentCls}-bordered`]: _extends(_extends(_extends({
  23. // ============================ Title =============================
  24. [`> ${componentCls}-title`]: {
  25. border: tableBorder,
  26. borderBottom: 0
  27. },
  28. // ============================ Content ============================
  29. [`> ${componentCls}-container`]: {
  30. borderInlineStart: tableBorder,
  31. [`
  32. > ${componentCls}-content,
  33. > ${componentCls}-header,
  34. > ${componentCls}-body,
  35. > ${componentCls}-summary
  36. `]: {
  37. '> table': {
  38. // ============================= Cell =============================
  39. [`
  40. > thead > tr > th,
  41. > tbody > tr > td,
  42. > tfoot > tr > th,
  43. > tfoot > tr > td
  44. `]: {
  45. borderInlineEnd: tableBorder
  46. },
  47. // ============================ Header ============================
  48. '> thead': {
  49. '> tr:not(:last-child) > th': {
  50. borderBottom: tableBorder
  51. },
  52. '> tr > th::before': {
  53. backgroundColor: 'transparent !important'
  54. }
  55. },
  56. // Fixed right should provides additional border
  57. [`
  58. > thead > tr,
  59. > tbody > tr,
  60. > tfoot > tr
  61. `]: {
  62. [`> ${componentCls}-cell-fix-right-first::after`]: {
  63. borderInlineEnd: tableBorder
  64. }
  65. },
  66. // ========================== Expandable ==========================
  67. '> tbody > tr > td': {
  68. [`> ${componentCls}-expanded-row-fixed`]: {
  69. margin: `-${token.tablePaddingVertical}px -${token.tablePaddingHorizontal + token.lineWidth}px`,
  70. '&::after': {
  71. position: 'absolute',
  72. top: 0,
  73. insetInlineEnd: token.lineWidth,
  74. bottom: 0,
  75. borderInlineEnd: tableBorder,
  76. content: '""'
  77. }
  78. }
  79. }
  80. }
  81. },
  82. [`
  83. > ${componentCls}-content,
  84. > ${componentCls}-header
  85. `]: {
  86. '> table': {
  87. borderTop: tableBorder
  88. }
  89. }
  90. },
  91. // ============================ Scroll ============================
  92. [`&${componentCls}-scroll-horizontal`]: {
  93. [`> ${componentCls}-container > ${componentCls}-body`]: {
  94. '> table > tbody': {
  95. [`
  96. > tr${componentCls}-expanded-row,
  97. > tr${componentCls}-placeholder
  98. `]: {
  99. '> td': {
  100. borderInlineEnd: 0
  101. }
  102. }
  103. }
  104. }
  105. }
  106. }, getSizeBorderStyle('middle', token.tablePaddingVerticalMiddle, token.tablePaddingHorizontalMiddle)), getSizeBorderStyle('small', token.tablePaddingVerticalSmall, token.tablePaddingHorizontalSmall)), {
  107. // ============================ Footer ============================
  108. [`> ${componentCls}-footer`]: {
  109. border: tableBorder,
  110. borderTop: 0
  111. }
  112. }),
  113. // ============================ Nested ============================
  114. [`${componentCls}-cell`]: {
  115. [`${componentCls}-container:first-child`]: {
  116. // :first-child to avoid the case when bordered and title is set
  117. borderTop: 0
  118. },
  119. // https://github.com/ant-design/ant-design/issues/35577
  120. '&-scrollbar:not([rowspan])': {
  121. boxShadow: `0 ${token.lineWidth}px 0 ${token.lineWidth}px ${token.tableHeaderBg}`
  122. }
  123. }
  124. }
  125. };
  126. };
  127. export default genBorderedStyle;