rtl.less 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  1. @import '../../style/themes/index';
  2. @import '../../style/mixins/index';
  3. @import '../../input/style/mixin';
  4. @select-prefix-cls: ~'@{ant-prefix}-select';
  5. .@{select-prefix-cls} {
  6. &-rtl {
  7. direction: rtl;
  8. }
  9. // ========================== Arrow ==========================
  10. &-arrow {
  11. .@{select-prefix-cls}-rtl & {
  12. right: initial;
  13. left: @control-padding-horizontal - 1px;
  14. }
  15. }
  16. // ========================== Clear ==========================
  17. &-clear {
  18. .@{select-prefix-cls}-rtl & {
  19. right: initial;
  20. left: @control-padding-horizontal - 1px;
  21. }
  22. }
  23. // ========================== Popup ==========================
  24. &-dropdown {
  25. &-rtl {
  26. direction: rtl;
  27. }
  28. }
  29. // ========================= Options =========================
  30. &-item {
  31. &-option {
  32. &-grouped {
  33. .@{select-prefix-cls}-dropdown-rtl & {
  34. padding-right: @control-padding-horizontal * 2;
  35. padding-left: @control-padding-horizontal;
  36. }
  37. }
  38. }
  39. }
  40. }
  41. // multiple
  42. @select-multiple-item-border-width: 1px;
  43. @select-multiple-item-spacing-half: ceil((@input-padding-vertical-base / 2));
  44. @select-multiple-padding: max(
  45. @input-padding-vertical-base - @select-multiple-item-border-width -
  46. @select-multiple-item-spacing-half,
  47. 0
  48. );
  49. .@{select-prefix-cls}-multiple {
  50. &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selector,
  51. &.@{select-prefix-cls}-allow-clear .@{select-prefix-cls}-selector {
  52. .@{select-prefix-cls}-rtl& {
  53. padding-right: @input-padding-vertical-base;
  54. padding-left: @font-size-sm + @control-padding-horizontal;
  55. }
  56. }
  57. // ======================== Selections ========================
  58. .@{select-prefix-cls}-selection-item {
  59. .@{select-prefix-cls}-rtl& {
  60. text-align: right;
  61. }
  62. // It's ok not to do this, but 24px makes bottom narrow in view should adjust
  63. &-content {
  64. .@{select-prefix-cls}-rtl& {
  65. margin-right: 0;
  66. margin-left: (@padding-xs / 2);
  67. text-align: right;
  68. }
  69. }
  70. }
  71. // ========================== Input ==========================
  72. .@{select-prefix-cls}-selection-search {
  73. &-mirror {
  74. .@{select-prefix-cls}-rtl& {
  75. right: 0;
  76. left: auto;
  77. }
  78. }
  79. }
  80. // ======================= Placeholder =======================
  81. .@{select-prefix-cls}-selection-placeholder {
  82. .@{select-prefix-cls}-rtl& {
  83. right: @input-padding-horizontal;
  84. left: auto;
  85. }
  86. }
  87. // ============================================================
  88. // == Size ==
  89. // ============================================================
  90. // Size small need additional set padding
  91. &.@{select-prefix-cls}-sm {
  92. .@{select-prefix-cls}-selection-placeholder {
  93. .@{select-prefix-cls}-rtl& {
  94. right: @input-padding-horizontal-sm;
  95. }
  96. }
  97. }
  98. }
  99. // single
  100. @selection-item-padding: ceil(@font-size-base * 1.25);
  101. .@{select-prefix-cls}-single {
  102. // ========================= Selector =========================
  103. .@{select-prefix-cls}-selector {
  104. .@{select-prefix-cls}-selection-item,
  105. .@{select-prefix-cls}-selection-placeholder {
  106. .@{select-prefix-cls}-rtl& {
  107. right: 0;
  108. left: 9px;
  109. text-align: right;
  110. }
  111. }
  112. }
  113. // With arrow should provides `padding-right` to show the arrow
  114. &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-search {
  115. .@{select-prefix-cls}-rtl& {
  116. right: @input-padding-horizontal-base;
  117. left: @input-padding-horizontal-base + @font-size-base;
  118. }
  119. }
  120. &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-item,
  121. &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-placeholder {
  122. .@{select-prefix-cls}-rtl& {
  123. padding-right: 0;
  124. padding-left: @selection-item-padding;
  125. }
  126. }
  127. // ============================================================
  128. // == Size ==
  129. // ============================================================
  130. // Size small need additional set padding
  131. &.@{select-prefix-cls}-sm {
  132. &:not(.@{select-prefix-cls}-customize-input) {
  133. // With arrow should provides `padding-right` to show the arrow
  134. &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-search {
  135. .@{select-prefix-cls}-rtl& {
  136. right: @input-padding-horizontal-sm - 1px;
  137. }
  138. }
  139. &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-item,
  140. &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-placeholder {
  141. .@{select-prefix-cls}-rtl& {
  142. padding-right: 0;
  143. padding-left: @font-size-base * 1.5;
  144. }
  145. }
  146. }
  147. }
  148. }