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 |
|
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 | }
|