timeline.less
2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
@timeline-prefix-cls: ~"@{css-prefix}timeline";
@timeline-color: @border-color-split;
.@{timeline-prefix-cls} {
list-style: none;
margin: 0;
padding: 0;
&-item {
margin: 0 !important;
padding: 0 0 12px 0;
list-style: none;
position: relative;
&-tail {
height: 100%;
border-left: 2px solid @timeline-color;
position: absolute;
left: 5px;
top: 0;
}
&-pending &-tail {
display: none;
}
&-head {
width: 12px;
height: 12px;
background-color: #fff;
border-radius: 100px;
border: 2px solid transparent;
position: absolute;
&-blue {
border-color: @primary-color;
color: @primary-color;
}
&-red {
border-color: @error-color;
color: @error-color;
}
&-green {
border-color: @success-color;
color: @success-color;
}
}
&-head-custom {
width: 40px;
height: auto;
margin-top: 6px;
padding: 3px 0;
text-align: center;
line-height: 1;
border: 0;
border-radius: 0;
font-size: 14px;
position: absolute;
left: -14px;
.transform(translateY(-50%));
}
&-content {
padding: 1px 1px 10px 24px;
font-size: @font-size-base;
position: relative;
top: -5px;
}
&:last-child {
.@{timeline-prefix-cls}-item-tail {
display: none;
}
}
}
&&-pending &-item:nth-last-of-type(2) {
.@{timeline-prefix-cls}-item-tail {
border-left: 2px dotted @timeline-color;
}
.@{timeline-prefix-cls}-item-content {
min-height: 48px;
}
}
}