UNPKG

6.51 kBSCSSView Raw
1@import "../core/index-noreset.scss";
2
3@import "scss/variable";
4@import "scss/normalize";
5@import "scss/mixin";
6@import "scss/util";
7@import "./rtl.scss";
8
9#{$timeline-prefix} {
10 & {
11 margin: 0;
12 padding: 0;
13 list-style: none;
14 & > li {
15 outline: 0;
16 }
17 }
18}
19
20#{$timeline-prefix}-item {
21 &-folder {
22 padding-left: calc(#{$timeline-item-content-margin-left} + #{$timeline-item-node-size});
23 padding-top: $timeline-item-folder-margin-top;
24 padding-bottom: $timeline-item-folder-margin-bottom;
25 font-size: $timeline-item-folder-font-size;
26 line-height: $font-lineheight-2;
27 position: relative;
28 /* min-height: auto !important; */
29 }
30
31 &-dot-tail {
32 position: absolute;
33 top: 0;
34 left: calc(#{$timeline-item-node-size} / 2);
35 height: 100%;
36 border-top: 0;
37 border-bottom: 0;
38 border-right: 0;
39 border-left: $timeline-item-tail-size dotted $timeline-item-tail-color;
40 }
41
42 &-dot-tail-solid {
43 border-style: solid;
44 }
45
46 /* 时间轴左边存在内容的情况 */
47 &-has-left-content {
48 &#{$timeline-prefix}-item-folder {
49 margin-left: $timeline-item-left-content-width;
50 }
51 }
52}
53
54#{$timeline-prefix}-item-done {
55 @include node-state('ltr', $timeline-item-done-background, $timeline-item-done-color, $timeline-item-done-dot-size);
56}
57
58#{$timeline-prefix}-item-process {
59 @include node-state('ltr', $timeline-item-process-background, $timeline-item-process-color, $timeline-item-process-dot-size);
60}
61
62#{$timeline-prefix}-item-success {
63 @include node-state('ltr', $timeline-item-success-background, $timeline-item-success-color, $timeline-item-success-dot-size);
64}
65
66#{$timeline-prefix}-item-error {
67 @include node-state('ltr', $timeline-item-error-background, $timeline-item-error-color, $timeline-item-error-dot-size);
68}
69
70#{$timeline-prefix}.#{$css-prefix}alternate {
71 #{$timeline-prefix}-item-left, #{$timeline-prefix}-item-right {
72 #{$timeline-prefix}-item-left-content {
73 width: 50%;
74 padding-right: $timeline-item-content-margin-left;
75 }
76 #{$timeline-prefix}-item-timeline {
77 margin-left: 50%;
78 }
79 #{$timeline-prefix}-item-content {
80 margin-left: calc(50% + #{$timeline-item-content-margin-left} + #{$timeline-item-node-size});
81 }
82 }
83 #{$timeline-prefix}-item-folder {
84 margin-left: 50%;
85 }
86 #{$timeline-prefix}-item-right {
87 #{$timeline-prefix}-item-title {
88 margin: 0;
89 margin-top: 4px;
90 font-size: $timeline-item-title-font-size;
91 font-weight: $timeline-item-title-font-weight;
92 line-height: $font-lineheight-2;
93 overflow: hidden;
94 text-overflow: ellipsis;
95 white-space: nowrap;
96 color: $timeline-item-title-color;
97 text-align: right;
98 }
99
100 #{$timeline-prefix}-item-body {
101 margin: 0;
102 margin-top: 4px;
103 font-size: $timeline-item-body-font-size;
104 line-height: $font-lineheight-2;
105 color: $timeline-item-body-color;
106 text-align: right;
107 }
108
109 #{$timeline-prefix}-item-time {
110 margin: 0;
111 margin-top: $timeline-item-time-margin-top;
112 margin-bottom: $timeline-item-time-margin-bottom;
113 font-size: $timeline-item-time-font-size;
114 color: $timeline-item-time-color;
115 text-align: right;
116 }
117 }
118
119 #{$timeline-prefix}-item-right {
120 #{$timeline-prefix}-item-left-content {
121 display: inline-block;
122 position: relative;
123 #{$timeline-prefix}-item-title {
124 margin-top: 0;
125 }
126 }
127 #{$timeline-prefix}-item-content {
128 margin-left: calc(#{$timeline-item-content-margin-left} + #{$timeline-item-node-size});
129 position: absolute;
130 #{$timeline-prefix}-item-body {
131 margin-top: 4px;
132 color: $timeline-item-left-body-color;
133 }
134 }
135 }
136}
137
138#{$timeline-prefix}[dir='rtl'].#{$css-prefix}alternate {
139 #{$timeline-prefix}-item-left, #{$timeline-prefix}-item-right {
140 #{$timeline-prefix}-item-left-content {
141 width: 50%;
142 padding-left: $timeline-item-content-margin-left;
143 }
144 #{$timeline-prefix}-item-timeline {
145 margin-right: 50%;
146 }
147 #{$timeline-prefix}-item-content {
148 width: 50%;
149 margin-right: calc(50% + #{$timeline-item-content-margin-left} + #{$timeline-item-node-size});
150 }
151 }
152 #{$timeline-prefix}-item-folder {
153 margin-right: 50%;
154 }
155 #{$timeline-prefix}-item-right {
156 #{$timeline-prefix}-item-title {
157 margin: 0;
158 font-size: $timeline-item-title-font-size;
159 font-weight: $timeline-item-title-font-weight;
160 line-height: $font-lineheight-2;
161 overflow: hidden;
162 text-overflow: ellipsis;
163 white-space: nowrap;
164 color: $timeline-item-title-color;
165 text-align: left;
166 }
167
168 #{$timeline-prefix}-item-body {
169 margin: 0;
170 font-size: $timeline-item-body-font-size;
171 line-height: $font-lineheight-2;
172 color: $timeline-item-body-color;
173 text-align: left;
174 }
175
176 #{$timeline-prefix}-item-time {
177 margin: 0;
178 margin-top: $timeline-item-time-margin-top;
179 margin-bottom: $timeline-item-time-margin-bottom;
180 font-size: $timeline-item-time-font-size;
181 color: $timeline-item-time-color;
182 text-align: left;
183 }
184 #{$timeline-prefix}-item-left-content {
185 display: inline-block;
186 position: relative;
187 }
188 #{$timeline-prefix}-item-content {
189 margin-right: calc(#{$timeline-item-content-margin-left} + #{$timeline-item-node-size});
190 position: absolute;
191 #{$timeline-prefix}-item-body {
192 text-align: right;
193 }
194 }
195 }
196}
197
198#{$timeline-prefix}-item-last {
199 #{$timeline-prefix}-item-tail {
200 display: none;
201 }
202}
203
204#{$timeline-prefix}-item-has-left-content {
205 min-height: $s-12;
206}
207#{$timeline-prefix}-item-folder#{$timeline-prefix}-item-has-left-content {
208 min-height: auto;
209}