bordered.js 5.1 KB

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