bordered.js 4.9 KB

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