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