rtl.less 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. @import '../../style/themes/index';
  2. @import '../../style/mixins/index';
  3. @import './customize.less';
  4. @list-prefix-cls: ~'@{ant-prefix}-list';
  5. .@{list-prefix-cls} {
  6. &-rtl {
  7. direction: rtl;
  8. text-align: right;
  9. // fix for virtual scroll style attribute > (direction:ltr)
  10. .ReactVirtualized__List .@{list-prefix-cls}-item {
  11. direction: rtl;
  12. }
  13. }
  14. &-pagination {
  15. .@{list-prefix-cls}-rtl & {
  16. text-align: left;
  17. }
  18. }
  19. &-item {
  20. &-meta {
  21. &-avatar {
  22. .@{list-prefix-cls}-rtl & {
  23. margin-right: 0;
  24. margin-left: @list-item-meta-avatar-margin-right;
  25. }
  26. }
  27. }
  28. &-action {
  29. .@{list-prefix-cls}-rtl & {
  30. margin-right: 48px;
  31. margin-left: 0;
  32. }
  33. & > li:first-child {
  34. .@{list-prefix-cls}.@{list-prefix-cls}-rtl & {
  35. padding-right: 0;
  36. padding-left: @padding-md;
  37. }
  38. }
  39. &-split {
  40. .@{list-prefix-cls}-rtl & {
  41. right: auto;
  42. left: 0;
  43. }
  44. }
  45. }
  46. }
  47. &-vertical &-item {
  48. &-extra {
  49. .@{list-prefix-cls}-rtl& {
  50. margin-right: 40px;
  51. margin-left: 0;
  52. }
  53. }
  54. &-action {
  55. .@{list-prefix-cls}-rtl& {
  56. margin-right: auto;
  57. }
  58. > li {
  59. &:first-child {
  60. .@{list-prefix-cls}-rtl & {
  61. padding-right: 0;
  62. padding-left: @padding-md;
  63. }
  64. }
  65. }
  66. }
  67. }
  68. // Horizontal
  69. &:not(.@{list-prefix-cls}-vertical) {
  70. .@{list-prefix-cls}-item-no-flex {
  71. .@{list-prefix-cls}-item-action {
  72. .@{list-prefix-cls}-rtl & {
  73. float: left;
  74. }
  75. }
  76. }
  77. }
  78. }
  79. // responsive
  80. @media screen and (max-width: @screen-md) {
  81. .@{list-prefix-cls} {
  82. &-item {
  83. &-action {
  84. .@{list-prefix-cls}-rtl & {
  85. margin-right: 24px;
  86. margin-left: 0;
  87. }
  88. }
  89. }
  90. }
  91. .@{list-prefix-cls}-vertical {
  92. .@{list-prefix-cls}-item {
  93. &-extra {
  94. .@{list-prefix-cls}-rtl & {
  95. margin-right: 24px;
  96. margin-left: 0;
  97. }
  98. }
  99. }
  100. }
  101. }
  102. @media screen and (max-width: @screen-sm) {
  103. .@{list-prefix-cls} {
  104. &-item {
  105. &-action {
  106. .@{list-prefix-cls}-rtl & {
  107. margin-right: 22px;
  108. margin-left: 0;
  109. }
  110. }
  111. }
  112. }
  113. .@{list-prefix-cls}-vertical {
  114. .@{list-prefix-cls}-item {
  115. &-extra {
  116. // to override margins on rtl view
  117. .@{list-prefix-cls}-rtl& {
  118. margin: auto auto 16px;
  119. }
  120. }
  121. }
  122. }
  123. }