rtl.scss 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  1. $module: #{$prefix}-table;
  2. .#{$prefix}-rtl,
  3. .#{$prefix}-portal-rtl {
  4. .#{$module} {
  5. direction: rtl;
  6. text-align: right;
  7. &-thead {
  8. & > .#{$module}-row {
  9. & > .#{$module}-row-head {
  10. text-align: right;
  11. &.#{$module}-cell-fixed {
  12. &-left-last {
  13. border-right: 0;
  14. border-left: 1px solid $color-table_shadow-border-default;
  15. &.resizing {
  16. // rtl override mixin
  17. border-left: $border-table_resizer;
  18. }
  19. }
  20. &-right-first {
  21. border-left: 0;
  22. border-right: 1px solid $color-table_shadow-border-default;
  23. &.resizing {
  24. border-left: $border-table_resizer;
  25. }
  26. &[x-type="column-scrollbar"] {
  27. box-shadow: none;
  28. border-right: transparent;
  29. }
  30. }
  31. }
  32. }
  33. .resizing {
  34. border-left: $border-table_resizer;
  35. }
  36. .react-resizable-handle {
  37. right: auto;
  38. left: $spacing-table_react_resizable_handle-right;
  39. }
  40. }
  41. }
  42. &-tbody {
  43. display: table-row-group;
  44. & > .#{$module}-row {
  45. & > .#{$module}-row-cell {
  46. &.resizing {
  47. border-right: 0;
  48. border-left: $border-table_resizer;
  49. }
  50. }
  51. & > .#{$module}-cell-fixed {
  52. &-left-last {
  53. border-right: 0;
  54. border-left: $width-table_cell_fixed_left_last solid $color-table_shadow-border-default;
  55. }
  56. &-right-first {
  57. border-left: 0;
  58. border-right: $width-table_cell_fixed_right_first solid $color-table_shadow-border-default;
  59. }
  60. }
  61. }
  62. }
  63. .#{$module}-column {
  64. &-selection {
  65. .#{$prefix}-checkbox-inner-display {
  66. .#{$prefix}-icon {
  67. left: auto;
  68. right: 0;
  69. }
  70. }
  71. }
  72. &-expand {
  73. .#{$module}-expand-icon {
  74. transform: scaleX(-1) translateY(2px);
  75. &:last-child {
  76. margin-right: auto;
  77. margin-left: 0;
  78. }
  79. }
  80. }
  81. &-sorter {
  82. margin-left: auto;
  83. margin-right: $spacing-table_column_sorter-marginLeft;
  84. }
  85. &-filter {
  86. margin-left: auto;
  87. margin-right: $spacing-table_column_filter-marginLeft;
  88. }
  89. }
  90. &-bordered {
  91. .#{$module}-container {
  92. border-left: 0;
  93. border-right: $border-table;
  94. }
  95. .#{$module}-thead > .#{$module}-row > .#{$module}-row-head,
  96. .#{$module}-tbody > .#{$module}-row > .#{$module}-row-cell {
  97. border-right: 0;
  98. border-left: $border-table;
  99. }
  100. .#{$module}-placeholder {
  101. border-left: $border-table;
  102. border-right: 0;
  103. }
  104. .#{$module}-header {
  105. &::-webkit-scrollbar {
  106. border-right: 0;
  107. border-left: $border-table;
  108. }
  109. }
  110. }
  111. &-fixed {
  112. & > .#{$module}-tbody {
  113. & > .#{$module}-row-expand > .#{$module}-row-cell > .#{$module}-expand-inner,
  114. & > .#{$module}-row-section > .#{$module}-row-cell > .#{$module}-section-inner {
  115. left: auto;
  116. right: 0;
  117. margin-right: -$spacing-table_expand_row-paddingLeft;
  118. margin-left: -$spacing-table_expand_row-paddingRight;
  119. padding-right: $spacing-table_expand_row-paddingLeft;
  120. padding-left: $spacing-table_expand_row-paddingRight;
  121. }
  122. }
  123. }
  124. }
  125. .#{$module}-expand-icon {
  126. margin-right: auto;
  127. margin-left: $spacing-table_expand_icon-marginRight;
  128. transform: scaleX(-1) translateY(2px);
  129. }
  130. }