rtl.less 5.7 KB

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