rtl.less 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253
  1. .@{steps-prefix-cls} {
  2. &-rtl {
  3. direction: rtl;
  4. }
  5. }
  6. .@{steps-prefix-cls}-item {
  7. &-icon {
  8. .@{steps-prefix-cls}.@{steps-prefix-cls}-rtl & {
  9. margin-right: 0;
  10. margin-left: 8px;
  11. }
  12. }
  13. &-tail {
  14. .@{steps-prefix-cls}-rtl & {
  15. right: 0;
  16. left: auto;
  17. }
  18. }
  19. &-title {
  20. .@{steps-prefix-cls}-rtl & {
  21. padding-right: 0;
  22. padding-left: 16px;
  23. }
  24. &::after {
  25. .@{steps-prefix-cls}-rtl & {
  26. right: 100%;
  27. left: auto;
  28. }
  29. }
  30. }
  31. }
  32. .@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical) {
  33. .@{steps-prefix-cls}-item {
  34. .@{steps-prefix-cls}-rtl& {
  35. padding-right: 16px;
  36. padding-left: 0;
  37. }
  38. &:first-child {
  39. .@{steps-prefix-cls}-rtl& {
  40. padding-right: 0;
  41. }
  42. }
  43. &:last-child .@{steps-prefix-cls}-item-title {
  44. .@{steps-prefix-cls}-rtl& {
  45. padding-left: 0;
  46. }
  47. }
  48. }
  49. }
  50. // custom-icon
  51. .@{steps-prefix-cls}-item-custom {
  52. .@{steps-prefix-cls}-item-icon {
  53. > .@{steps-prefix-cls}-icon {
  54. .@{steps-prefix-cls}-rtl & {
  55. right: 0.5px;
  56. left: auto;
  57. }
  58. }
  59. }
  60. }
  61. // nav
  62. .@{steps-prefix-cls}-navigation {
  63. &.@{steps-prefix-cls}-small {
  64. .@{steps-prefix-cls}-item {
  65. &-container {
  66. .@{steps-prefix-cls}-rtl& {
  67. margin-right: -12px;
  68. margin-left: 0;
  69. }
  70. }
  71. }
  72. }
  73. .@{steps-prefix-cls}-item {
  74. &-container {
  75. .@{steps-prefix-cls}-rtl& {
  76. margin-right: -16px;
  77. margin-left: 0;
  78. text-align: right;
  79. }
  80. .@{steps-prefix-cls}-item-title {
  81. .@{steps-prefix-cls}-rtl& {
  82. padding-left: 0;
  83. }
  84. }
  85. }
  86. &::after {
  87. .@{steps-prefix-cls}-rtl& {
  88. right: 100%;
  89. left: auto;
  90. margin-right: -2px;
  91. margin-left: 0;
  92. transform: rotate(225deg);
  93. }
  94. }
  95. }
  96. }
  97. // small
  98. .@{steps-prefix-cls}-small {
  99. &.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical)
  100. .@{steps-prefix-cls}-item {
  101. .@{steps-prefix-cls}-rtl& {
  102. padding-right: 12px;
  103. padding-left: 0;
  104. }
  105. &:first-child {
  106. .@{steps-prefix-cls}-rtl& {
  107. padding-right: 0;
  108. }
  109. }
  110. }
  111. .@{steps-prefix-cls}-item-title {
  112. .@{steps-prefix-cls}-rtl& {
  113. padding-right: 0;
  114. padding-left: 12px;
  115. }
  116. }
  117. }
  118. // vertical
  119. .@{steps-prefix-cls}-vertical {
  120. > .@{steps-prefix-cls}-item {
  121. .@{steps-prefix-cls}-item-icon {
  122. .@{steps-prefix-cls}-rtl& {
  123. float: right;
  124. margin-right: 0;
  125. margin-left: @steps-vertical-icon-width;
  126. }
  127. }
  128. }
  129. > .@{steps-prefix-cls}-item
  130. > .@{steps-prefix-cls}-item-container
  131. > .@{steps-prefix-cls}-item-tail {
  132. .@{steps-prefix-cls}-rtl& {
  133. right: @steps-vertical-tail-width;
  134. left: auto;
  135. }
  136. }
  137. &.@{steps-prefix-cls}-small .@{steps-prefix-cls}-item-container {
  138. .@{steps-prefix-cls}-item-tail {
  139. .@{steps-prefix-cls}-rtl& {
  140. right: @steps-vertical-tail-width-sm;
  141. left: auto;
  142. }
  143. }
  144. }
  145. }
  146. // label
  147. .@{steps-prefix-cls}-label-vertical {
  148. .@{steps-prefix-cls}-item {
  149. &-title {
  150. .@{steps-prefix-cls}-rtl& {
  151. padding-left: 0;
  152. }
  153. }
  154. }
  155. }
  156. // progress-dot
  157. .@{steps-prefix-cls}-dot,
  158. .@{steps-prefix-cls}-dot.@{steps-prefix-cls}-small {
  159. .@{steps-prefix-cls}-item {
  160. &-tail {
  161. .@{steps-prefix-cls}-rtl& {
  162. margin: 0 (@steps-description-max-width / 2) 0 0;
  163. }
  164. &::after {
  165. .@{steps-prefix-cls}-rtl& {
  166. margin-right: 12px;
  167. margin-left: 0;
  168. }
  169. }
  170. }
  171. &:first-child .@{steps-prefix-cls}-icon-dot {
  172. .@{steps-prefix-cls}-rtl& {
  173. right: 2px;
  174. left: auto;
  175. }
  176. }
  177. &-icon {
  178. .@{steps-prefix-cls}-rtl& {
  179. margin-right: 67px;
  180. margin-left: 0;
  181. }
  182. .@{steps-prefix-cls}-icon-dot {
  183. .@{steps-prefix-cls}-rtl& {
  184. float: right;
  185. }
  186. /* expand hover area */
  187. &::after {
  188. .@{steps-prefix-cls}-rtl& {
  189. right: -26px;
  190. left: auto;
  191. }
  192. }
  193. }
  194. }
  195. }
  196. }
  197. .@{steps-prefix-cls}-vertical.@{steps-prefix-cls}-dot {
  198. .@{steps-prefix-cls}-item-icon {
  199. .@{steps-prefix-cls}-rtl& {
  200. margin-right: 0;
  201. margin-left: 16px;
  202. }
  203. }
  204. // https://github.com/ant-design/ant-design/issues/18354
  205. .@{steps-prefix-cls}-item > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail {
  206. .@{steps-prefix-cls}-rtl& {
  207. right: -9px;
  208. left: auto;
  209. }
  210. }
  211. .@{steps-prefix-cls}-item:first-child .@{steps-prefix-cls}-icon-dot {
  212. .@{steps-prefix-cls}-rtl& {
  213. right: 0;
  214. left: auto;
  215. }
  216. }
  217. .@{steps-prefix-cls}-item-process .@{steps-prefix-cls}-icon-dot {
  218. .@{steps-prefix-cls}-rtl& {
  219. right: -2px;
  220. left: auto;
  221. }
  222. }
  223. }
  224. // RTL Steps with progress
  225. .@{steps-prefix-cls}-rtl.@{steps-prefix-cls}-with-progress.@{steps-prefix-cls}-horizontal.@{steps-prefix-cls}-label-horizontal {
  226. .@{steps-prefix-cls}-item:first-child.@{steps-prefix-cls}-item-active {
  227. padding-right: 4px;
  228. }
  229. }