rtl.less 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
  1. @import '../../style/themes/index';
  2. @import '../../style/mixins/index';
  3. //== Style for input-group: input with label, with button or dropdown...
  4. .@{ant-prefix}-input-group {
  5. &-wrapper {
  6. &-rtl {
  7. direction: rtl;
  8. }
  9. }
  10. &-rtl {
  11. direction: rtl;
  12. }
  13. }
  14. // affix
  15. @input-affix-margin: 4px;
  16. .@{ant-prefix}-input {
  17. &-affix-wrapper&-affix-wrapper-rtl {
  18. > input.@{ant-prefix}-input {
  19. border: none;
  20. outline: none;
  21. }
  22. }
  23. &-affix-wrapper-rtl {
  24. .@{ant-prefix}-input-prefix {
  25. margin: 0 0 0 @input-affix-margin;
  26. }
  27. .@{ant-prefix}-input-suffix {
  28. margin: 0 @input-affix-margin 0 0;
  29. }
  30. }
  31. &-textarea {
  32. &-rtl {
  33. direction: rtl;
  34. }
  35. &-rtl&-show-count::after {
  36. text-align: left;
  37. }
  38. }
  39. }
  40. // allow-clear
  41. .@{ant-prefix}-input-clear-icon {
  42. &-has-suffix {
  43. .@{ant-prefix}-input-affix-wrapper-rtl & {
  44. margin-right: 0;
  45. margin-left: @input-affix-margin;
  46. }
  47. }
  48. .@{ant-prefix}-input-affix-wrapper-rtl & {
  49. right: auto;
  50. left: 8px;
  51. }
  52. }
  53. // mixin
  54. @input-rtl-cls: ~'@{ant-prefix}-input-rtl';
  55. .active() {
  56. .@{input-rtl-cls} & {
  57. border-right-width: 0;
  58. border-left-width: @border-width-base !important;
  59. }
  60. }
  61. .hover() {
  62. .@{input-rtl-cls} & {
  63. border-right-width: 0;
  64. border-left-width: @border-width-base !important;
  65. }
  66. }
  67. .input() {
  68. &-rtl {
  69. direction: rtl;
  70. }
  71. }
  72. // label input
  73. .input-group(@inputClass) {
  74. > .@{inputClass}-rtl:first-child,
  75. &-rtl &-addon:first-child {
  76. border-radius: 0 @border-radius-base @border-radius-base 0;
  77. }
  78. &-addon:first-child {
  79. .@{inputClass}-group-rtl & {
  80. border-right: @border-width-base @border-style-base @input-border-color;
  81. border-left: 0;
  82. }
  83. }
  84. &-addon:last-child {
  85. .@{inputClass}-group-rtl & {
  86. border-right: 0;
  87. border-left: @border-width-base @border-style-base @input-border-color;
  88. border-radius: @border-radius-base 0 0 @border-radius-base;
  89. }
  90. }
  91. > .@{inputClass}:last-child,
  92. &-addon:last-child {
  93. .@{inputClass}-group-rtl& {
  94. border-radius: @border-radius-base 0 0 @border-radius-base;
  95. }
  96. }
  97. .@{inputClass}-affix-wrapper {
  98. &:not(:first-child) {
  99. .@{inputClass}-group-rtl& {
  100. border-radius: @border-radius-base 0 0 @border-radius-base;
  101. }
  102. }
  103. &:not(:last-child) {
  104. .@{inputClass}-group-rtl& {
  105. border-radius: 0 @border-radius-base @border-radius-base 0;
  106. }
  107. }
  108. }
  109. &&-compact {
  110. & > *:not(:last-child) {
  111. .@{inputClass}-group-rtl& {
  112. margin-right: 0;
  113. margin-left: -@border-width-base;
  114. border-left-width: @border-width-base;
  115. }
  116. }
  117. & > *:first-child,
  118. & > .@{ant-prefix}-select:first-child > .@{ant-prefix}-select-selector,
  119. & > .@{ant-prefix}-select-auto-complete:first-child .@{ant-prefix}-input,
  120. & > .@{ant-prefix}-cascader-picker:first-child .@{ant-prefix}-input {
  121. .@{inputClass}-group-rtl& {
  122. border-radius: 0 @border-radius-base @border-radius-base 0;
  123. }
  124. }
  125. & > *:last-child,
  126. & > .@{ant-prefix}-select:last-child > .@{ant-prefix}-select-selector,
  127. & > .@{ant-prefix}-select-auto-complete:last-child .@{ant-prefix}-input,
  128. & > .@{ant-prefix}-cascader-picker:last-child .@{ant-prefix}-input,
  129. & > .@{ant-prefix}-cascader-picker-focused:last-child .@{ant-prefix}-input {
  130. .@{inputClass}-group-rtl& {
  131. border-left-width: @border-width-base;
  132. border-radius: @border-radius-base 0 0 @border-radius-base;
  133. }
  134. }
  135. .@{ant-prefix}-input-group-wrapper-rtl + .@{ant-prefix}-input-group-wrapper-rtl {
  136. margin-right: -1px;
  137. margin-left: 0;
  138. }
  139. .@{ant-prefix}-input-group-wrapper-rtl:not(:last-child) {
  140. &.@{ant-prefix}-input-search > .@{ant-prefix}-input-group {
  141. & > .@{ant-prefix}-input {
  142. border-radius: 0 @border-radius-base @border-radius-base 0;
  143. }
  144. }
  145. }
  146. }
  147. }
  148. // search-input
  149. @search-prefix: ~'@{ant-prefix}-input-search';
  150. @search-rtl-cls: ~'@{search-prefix}-rtl';
  151. .@{search-prefix}-rtl {
  152. direction: rtl;
  153. .@{ant-prefix}-input {
  154. &:hover,
  155. &:focus {
  156. + .@{ant-prefix}-input-group-addon .@{search-prefix}-button:not(.@{ant-prefix}-btn-primary) {
  157. border-left-color: @border-color-base;
  158. &:hover {
  159. border-left-color: @input-hover-border-color;
  160. }
  161. }
  162. }
  163. }
  164. > .@{ant-prefix}-input-group {
  165. > .@{ant-prefix}-input-affix-wrapper {
  166. &:hover,
  167. &-focused {
  168. border-right-color: @input-hover-border-color;
  169. }
  170. }
  171. > .@{ant-prefix}-input-group-addon:last-child {
  172. right: -1px;
  173. left: auto;
  174. .@{search-prefix}-button {
  175. border-radius: @border-radius-base 0 0 @border-radius-base;
  176. }
  177. }
  178. }
  179. }