rtl.less 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. @import '../../style/themes/index';
  2. @import '../../style/mixins/index';
  3. @timeline-prefix-cls: ~'@{ant-prefix}-timeline';
  4. .@{timeline-prefix-cls} {
  5. &-rtl {
  6. direction: rtl;
  7. }
  8. &-item {
  9. &-tail {
  10. .@{timeline-prefix-cls}-rtl & {
  11. right: 4px;
  12. left: auto;
  13. border-right: @timeline-width solid @timeline-color;
  14. border-left: none;
  15. }
  16. }
  17. &-head-custom {
  18. .@{timeline-prefix-cls}-rtl & {
  19. right: 5px;
  20. left: auto;
  21. transform: translate(50%, -50%);
  22. }
  23. }
  24. &-content {
  25. .@{timeline-prefix-cls}-rtl & {
  26. margin: 0 18px 0 0;
  27. }
  28. }
  29. }
  30. &.@{timeline-prefix-cls}-alternate,
  31. &.@{timeline-prefix-cls}-right,
  32. &.@{timeline-prefix-cls}-label {
  33. .@{timeline-prefix-cls}-item {
  34. &-tail,
  35. &-head,
  36. &-head-custom {
  37. .@{timeline-prefix-cls}-rtl& {
  38. right: 50%;
  39. left: auto;
  40. }
  41. }
  42. &-head {
  43. .@{timeline-prefix-cls}-rtl& {
  44. margin-right: -4px;
  45. margin-left: 0;
  46. }
  47. &-custom {
  48. .@{timeline-prefix-cls}-rtl& {
  49. margin-right: 1px;
  50. margin-left: 0;
  51. }
  52. }
  53. }
  54. &-left {
  55. .@{timeline-prefix-cls}-item-content {
  56. .@{timeline-prefix-cls}-rtl& {
  57. right: calc(50% - 4px);
  58. left: auto;
  59. text-align: right;
  60. }
  61. }
  62. }
  63. &-right {
  64. .@{timeline-prefix-cls}-item-content {
  65. .@{timeline-prefix-cls}-rtl& {
  66. text-align: left;
  67. }
  68. }
  69. }
  70. }
  71. }
  72. &.@{timeline-prefix-cls}-right {
  73. .@{timeline-prefix-cls}-item-right {
  74. .@{timeline-prefix-cls}-item-tail,
  75. .@{timeline-prefix-cls}-item-head,
  76. .@{timeline-prefix-cls}-item-head-custom {
  77. .@{timeline-prefix-cls}-rtl& {
  78. right: 0;
  79. left: auto;
  80. }
  81. }
  82. .@{timeline-prefix-cls}-item-content {
  83. .@{timeline-prefix-cls}-rtl& {
  84. width: 100%;
  85. margin-right: 18px;
  86. text-align: right;
  87. }
  88. }
  89. }
  90. }
  91. &&-pending &-item-last &-item-tail {
  92. .@{timeline-prefix-cls}-rtl& {
  93. border-right: 2px dotted @timeline-color;
  94. border-left: none;
  95. }
  96. }
  97. &&-reverse &-item-pending {
  98. .@{timeline-prefix-cls}-item-tail {
  99. .@{timeline-prefix-cls}-rtl& {
  100. border-right: 2px dotted @timeline-color;
  101. border-left: none;
  102. }
  103. }
  104. }
  105. &.@{timeline-prefix-cls}-label {
  106. .@{timeline-prefix-cls}-item-label {
  107. .@{timeline-prefix-cls}-rtl& {
  108. text-align: left;
  109. }
  110. }
  111. .@{timeline-prefix-cls}-item-right {
  112. .@{timeline-prefix-cls}-item-label {
  113. .@{timeline-prefix-cls}-rtl& {
  114. right: calc(50% + 14px);
  115. text-align: right;
  116. }
  117. }
  118. }
  119. }
  120. }