rtl.less 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  1. @import '../../style/themes/index';
  2. @import '../../style/mixins/index';
  3. @table-prefix-cls: ~'@{ant-prefix}-table';
  4. @table-wrapepr-cls: ~'@{table-prefix-cls}-wrapper';
  5. @table-wrapepr-rtl-cls: ~'@{table-prefix-cls}-wrapper-rtl';
  6. .@{table-prefix-cls}-wrapper {
  7. &-rtl {
  8. direction: rtl;
  9. }
  10. }
  11. .@{table-prefix-cls} {
  12. &-rtl {
  13. direction: rtl;
  14. }
  15. table {
  16. .@{table-wrapepr-rtl-cls} & {
  17. text-align: right;
  18. }
  19. }
  20. // ============================ Header ============================
  21. &-thead {
  22. > tr {
  23. > th {
  24. &[colspan]:not([colspan='1']) {
  25. .@{table-wrapepr-rtl-cls} & {
  26. text-align: center;
  27. }
  28. }
  29. &:not(:last-child):not(.@{table-prefix-cls}-selection-column):not(.@{table-prefix-cls}-row-expand-icon-cell):not([colspan])::before {
  30. .@{table-wrapepr-rtl-cls} & {
  31. right: auto;
  32. left: 0;
  33. }
  34. }
  35. .@{table-wrapepr-rtl-cls} & {
  36. text-align: right;
  37. }
  38. }
  39. }
  40. }
  41. // ============================= Body =============================
  42. &-tbody {
  43. > tr {
  44. // ========================= Nest Table ===========================
  45. .@{table-prefix-cls}-wrapper:only-child {
  46. .@{table-prefix-cls}.@{table-prefix-cls}-rtl {
  47. margin: -@table-padding-vertical (@table-padding-horizontal + ceil(@font-size-sm * 1.4)) -@table-padding-vertical -@table-padding-horizontal;
  48. }
  49. }
  50. }
  51. }
  52. // ========================== Pagination ==========================
  53. &-pagination {
  54. &-left {
  55. .@{table-wrapepr-cls}.@{table-wrapepr-rtl-cls} & {
  56. justify-content: flex-end;
  57. }
  58. }
  59. &-right {
  60. .@{table-wrapepr-cls}.@{table-wrapepr-rtl-cls} & {
  61. justify-content: flex-start;
  62. }
  63. }
  64. }
  65. // ================================================================
  66. // = Function =
  67. // ================================================================
  68. // ============================ Sorter ============================
  69. &-column-sorter {
  70. .@{table-wrapepr-rtl-cls} & {
  71. margin-right: 4px;
  72. margin-left: 0;
  73. }
  74. }
  75. // ============================ Filter ============================
  76. &-filter-column-title {
  77. .@{table-wrapepr-rtl-cls} & {
  78. padding: @table-padding-vertical @table-padding-horizontal @table-padding-vertical 2.3em;
  79. }
  80. }
  81. &-thead tr th.@{table-prefix-cls}-column-has-sorters {
  82. .@{table-prefix-cls}-filter-column-title {
  83. .@{table-prefix-cls}-rtl & {
  84. padding: 0 0 0 2.3em;
  85. }
  86. }
  87. }
  88. &-filter-trigger {
  89. .@{table-wrapepr-rtl-cls} & {
  90. margin: -4px 4px -4px (-@table-padding-horizontal / 2);
  91. }
  92. }
  93. // Dropdown
  94. &-filter-dropdown {
  95. // Checkbox
  96. &,
  97. &-submenu {
  98. .@{ant-prefix}-checkbox-wrapper + span {
  99. .@{ant-prefix}-dropdown-rtl &,
  100. .@{ant-prefix}-dropdown-menu-submenu-rtl& {
  101. padding-right: 8px;
  102. padding-left: 0;
  103. }
  104. }
  105. }
  106. }
  107. // ========================== Selections ==========================
  108. &-selection {
  109. .@{table-wrapepr-rtl-cls} & {
  110. text-align: center;
  111. }
  112. }
  113. // ========================== Expandable ==========================
  114. &-row-indent {
  115. .@{table-wrapepr-rtl-cls} & {
  116. float: right;
  117. }
  118. }
  119. &-row-expand-icon {
  120. .@{table-wrapepr-rtl-cls} & {
  121. float: right;
  122. }
  123. .@{table-prefix-cls}-row-indent + & {
  124. .@{table-wrapepr-rtl-cls} & {
  125. margin-right: 0;
  126. margin-left: @padding-xs;
  127. }
  128. }
  129. &::after {
  130. .@{table-wrapepr-rtl-cls} & {
  131. transform: rotate(-90deg);
  132. }
  133. }
  134. &-collapsed::before {
  135. .@{table-wrapepr-rtl-cls} & {
  136. transform: rotate(180deg);
  137. }
  138. }
  139. &-collapsed::after {
  140. .@{table-wrapepr-rtl-cls} & {
  141. transform: rotate(0deg);
  142. }
  143. }
  144. }
  145. }