rtl.less 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  1. @import '../../style/themes/index';
  2. @import '../../style/mixins/index';
  3. @menu-prefix-cls: ~'@{ant-prefix}-menu';
  4. .@{menu-prefix-cls} {
  5. &&-rtl {
  6. direction: rtl;
  7. text-align: right;
  8. }
  9. &-item-group-title {
  10. .@{menu-prefix-cls}-rtl & {
  11. text-align: right;
  12. }
  13. }
  14. &-inline,
  15. &-vertical {
  16. .@{menu-prefix-cls}-rtl& {
  17. border-right: none;
  18. border-left: @border-width-base @border-style-base @border-color-split;
  19. }
  20. }
  21. &-dark&-inline,
  22. &-dark&-vertical {
  23. .@{menu-prefix-cls}-rtl& {
  24. border-left: none;
  25. }
  26. }
  27. &-vertical&-sub,
  28. &-vertical-left&-sub,
  29. &-vertical-right&-sub {
  30. > .@{menu-prefix-cls}-item,
  31. > .@{menu-prefix-cls}-submenu {
  32. .@{menu-prefix-cls}-rtl& {
  33. transform-origin: top right;
  34. }
  35. }
  36. }
  37. &-item,
  38. &-submenu-title {
  39. .@{menu-prefix-cls}-item-icon,
  40. .@{iconfont-css-prefix} {
  41. .@{menu-prefix-cls}-rtl & {
  42. margin-right: auto;
  43. margin-left: @menu-icon-margin-right;
  44. }
  45. }
  46. &.@{menu-prefix-cls}-item-only-child {
  47. > .@{menu-prefix-cls}-item-icon,
  48. > .@{iconfont-css-prefix} {
  49. .@{menu-prefix-cls}-rtl & {
  50. margin-left: 0;
  51. }
  52. }
  53. }
  54. }
  55. &-submenu {
  56. &-rtl.@{menu-prefix-cls}-submenu-popup {
  57. transform-origin: 100% 0;
  58. }
  59. &-vertical,
  60. &-vertical-left,
  61. &-vertical-right,
  62. &-inline {
  63. > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
  64. .@{menu-prefix-cls}-rtl & {
  65. right: auto;
  66. left: 16px;
  67. }
  68. }
  69. }
  70. &-vertical,
  71. &-vertical-left,
  72. &-vertical-right {
  73. > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
  74. &::before {
  75. .@{menu-prefix-cls}-rtl & {
  76. transform: rotate(-45deg) translateY(-2px);
  77. }
  78. }
  79. &::after {
  80. .@{menu-prefix-cls}-rtl & {
  81. transform: rotate(45deg) translateY(2px);
  82. }
  83. }
  84. }
  85. }
  86. }
  87. &-vertical,
  88. &-vertical-left,
  89. &-vertical-right,
  90. &-inline {
  91. .@{menu-prefix-cls}-item {
  92. &::after {
  93. .@{menu-prefix-cls}-rtl& {
  94. right: auto;
  95. left: 0;
  96. }
  97. }
  98. }
  99. .@{menu-prefix-cls}-item,
  100. .@{menu-prefix-cls}-submenu-title {
  101. .@{menu-prefix-cls}-rtl& {
  102. text-align: right;
  103. }
  104. }
  105. }
  106. &-inline {
  107. .@{menu-prefix-cls}-submenu-title {
  108. .@{menu-prefix-cls}-rtl& {
  109. padding-right: 0;
  110. padding-left: 34px;
  111. }
  112. }
  113. }
  114. &-vertical {
  115. .@{menu-prefix-cls}-submenu-title {
  116. .@{menu-prefix-cls}-rtl& {
  117. padding-right: 16px;
  118. padding-left: 34px;
  119. }
  120. }
  121. }
  122. &-inline-collapsed&-vertical {
  123. .@{menu-prefix-cls}-submenu-title {
  124. .@{menu-prefix-cls}-rtl& {
  125. padding: 0 ~'calc(50% - @{menu-icon-size-lg} / 2)';
  126. }
  127. }
  128. }
  129. &-item-group-list {
  130. .@{menu-prefix-cls}-item,
  131. .@{menu-prefix-cls}-submenu-title {
  132. .@{menu-prefix-cls}-rtl & {
  133. padding: 0 28px 0 16px;
  134. }
  135. }
  136. }
  137. &-sub&-inline {
  138. border: 0;
  139. & .@{menu-prefix-cls}-item-group-title {
  140. .@{menu-prefix-cls}-rtl& {
  141. padding-right: 32px;
  142. padding-left: 0;
  143. }
  144. }
  145. }
  146. }