rtl.less 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
  1. @import '../../style/themes/index';
  2. @import '../../style/mixins/index';
  3. @import '../../input/style/mixin';
  4. @import '../../button/style/mixin';
  5. @import '../../grid/style/mixin';
  6. @form-prefix-cls: ~'@{ant-prefix}-form';
  7. @form-item-prefix-cls: ~'@{form-prefix-cls}-item';
  8. .@{form-prefix-cls} {
  9. &-rtl {
  10. direction: rtl;
  11. }
  12. }
  13. // ================================================================
  14. // = Item =
  15. // ================================================================
  16. .@{form-item-prefix-cls} {
  17. // ==============================================================
  18. // = Label =
  19. // ==============================================================
  20. &-label {
  21. .@{form-prefix-cls}-rtl & {
  22. text-align: left;
  23. }
  24. > label {
  25. &.@{form-item-prefix-cls}-required::before {
  26. .@{form-prefix-cls}-rtl & {
  27. margin-right: 0;
  28. margin-left: 4px;
  29. }
  30. }
  31. &::after {
  32. .@{form-prefix-cls}-rtl & {
  33. margin: 0 @form-item-label-colon-margin-left 0 @form-item-label-colon-margin-right;
  34. }
  35. }
  36. .@{form-item-prefix-cls}-optional {
  37. .@{form-prefix-cls}-rtl & {
  38. margin-right: @margin-xss;
  39. margin-left: 0;
  40. }
  41. }
  42. }
  43. }
  44. // ==============================================================
  45. // = Input =
  46. // ==============================================================
  47. &-control {
  48. .@{ant-prefix}-col-rtl &:first-child {
  49. width: 100%;
  50. }
  51. }
  52. // status
  53. &-has-feedback {
  54. .@{ant-prefix}-input {
  55. .@{form-prefix-cls}-rtl & {
  56. padding-right: @input-padding-horizontal-base;
  57. padding-left: 24px;
  58. }
  59. }
  60. .@{ant-prefix}-input-affix-wrapper {
  61. .@{ant-prefix}-input-suffix {
  62. .@{form-prefix-cls}-rtl & {
  63. padding-right: @input-padding-horizontal-base;
  64. padding-left: 18px;
  65. }
  66. }
  67. .@{ant-prefix}-input {
  68. .@{form-prefix-cls}-rtl & {
  69. padding: 0;
  70. }
  71. }
  72. }
  73. .@{ant-prefix}-input-number-affix-wrapper {
  74. .@{ant-prefix}-input-number {
  75. .@{form-prefix-cls}-rtl & {
  76. padding: 0;
  77. }
  78. }
  79. }
  80. .@{ant-prefix}-input-search:not(.@{ant-prefix}-input-search-enter-button) {
  81. .@{ant-prefix}-input-suffix {
  82. .@{form-prefix-cls}-rtl & {
  83. right: auto;
  84. left: 28px;
  85. }
  86. }
  87. }
  88. .@{ant-prefix}-input-number {
  89. .@{form-prefix-cls}-rtl & {
  90. padding-left: 18px;
  91. }
  92. }
  93. > .@{ant-prefix}-select .@{ant-prefix}-select-arrow,
  94. > .@{ant-prefix}-select .@{ant-prefix}-select-clear,
  95. :not(.@{ant-prefix}-input-group-addon) > .@{ant-prefix}-select .@{ant-prefix}-select-arrow,
  96. :not(.@{ant-prefix}-input-group-addon) > .@{ant-prefix}-select .@{ant-prefix}-select-clear,
  97. :not(.@{ant-prefix}-input-number-group-addon)
  98. > .@{ant-prefix}-select
  99. .@{ant-prefix}-select-arrow,
  100. :not(.@{ant-prefix}-input-number-group-addon)
  101. > .@{ant-prefix}-select
  102. .@{ant-prefix}-select-clear {
  103. .@{form-prefix-cls}-rtl & {
  104. right: auto;
  105. left: 32px;
  106. }
  107. }
  108. > .@{ant-prefix}-select .@{ant-prefix}-select-selection-selected-value,
  109. :not(.@{ant-prefix}-input-group-addon)
  110. > .@{ant-prefix}-select
  111. .@{ant-prefix}-select-selection-selected-value,
  112. :not(.@{ant-prefix}-input-number-group-addon)
  113. > .@{ant-prefix}-select
  114. .@{ant-prefix}-select-selection-selected-value {
  115. .@{form-prefix-cls}-rtl & {
  116. padding-right: 0;
  117. padding-left: 42px;
  118. }
  119. }
  120. .@{ant-prefix}-cascader-picker {
  121. &-arrow {
  122. .@{form-prefix-cls}-rtl & {
  123. margin-right: 0;
  124. margin-left: 19px;
  125. }
  126. }
  127. &-clear {
  128. .@{form-prefix-cls}-rtl & {
  129. right: auto;
  130. left: 32px;
  131. }
  132. }
  133. }
  134. .@{ant-prefix}-picker {
  135. .@{form-prefix-cls}-rtl & {
  136. padding-right: @input-padding-horizontal-base;
  137. padding-left: @input-padding-horizontal-base + @font-size-base * 1.3;
  138. }
  139. &-large {
  140. .@{form-prefix-cls}-rtl & {
  141. padding-right: @input-padding-horizontal-lg;
  142. padding-left: @input-padding-horizontal-lg + @font-size-base * 1.3;
  143. }
  144. }
  145. &-small {
  146. .@{form-prefix-cls}-rtl & {
  147. padding-right: @input-padding-horizontal-sm;
  148. padding-left: @input-padding-horizontal-sm + @font-size-base * 1.3;
  149. }
  150. }
  151. }
  152. &.@{form-item-prefix-cls} {
  153. &-has-success,
  154. &-has-warning,
  155. &-has-error,
  156. &-is-validating {
  157. // ====================== Icon ======================
  158. .@{form-item-prefix-cls}-children-icon {
  159. .@{form-prefix-cls}-rtl & {
  160. right: auto;
  161. left: 0;
  162. }
  163. }
  164. }
  165. }
  166. }
  167. }
  168. // inline
  169. .@{form-prefix-cls}-inline {
  170. .@{form-prefix-cls}-item {
  171. .@{form-prefix-cls}-rtl& {
  172. margin-right: 0;
  173. margin-left: 16px;
  174. }
  175. }
  176. }
  177. // vertical
  178. .make-vertical-layout-label() {
  179. .@{form-prefix-cls}-rtl& {
  180. text-align: right;
  181. }
  182. }