]>
Commit | Line | Data |
---|---|---|
31f18b77 FG |
1 | /* |
2 | * Component: Timeline | |
3 | * ------------------- | |
4 | */ | |
5 | ||
6 | .timeline { | |
7 | position: relative; | |
8 | margin: 0 0 30px 0; | |
9 | padding: 0; | |
10 | list-style: none; | |
11 | ||
12 | // The line | |
13 | &:before { | |
14 | content: ''; | |
15 | position: absolute; | |
16 | top: 0; | |
17 | bottom: 0; | |
18 | width: 4px; | |
19 | background: #ddd; | |
20 | left: 31px; | |
21 | margin: 0; | |
22 | .border-radius(2px); | |
23 | } | |
24 | ||
25 | > li { | |
26 | position: relative; | |
27 | margin-right: 10px; | |
28 | margin-bottom: 15px; | |
29 | .clearfix(); | |
30 | ||
31 | // The content | |
32 | > .timeline-item { | |
33 | .box-shadow(@box-boxshadow); | |
34 | .border-radius(@box-border-radius); | |
35 | margin-top: 0; | |
36 | background: #fff; | |
37 | color: #444; | |
38 | margin-left: 60px; | |
39 | margin-right: 15px; | |
40 | padding: 0; | |
41 | position: relative; | |
42 | ||
43 | // The time and header | |
44 | > .time { | |
45 | color: #999; | |
46 | float: right; | |
47 | padding: 10px; | |
48 | font-size: 12px; | |
49 | } | |
50 | > .timeline-header { | |
51 | margin: 0; | |
52 | color: #555; | |
53 | border-bottom: 1px solid @box-border-color; | |
54 | padding: 10px; | |
55 | font-size: 16px; | |
56 | line-height: 1.1; | |
57 | > a { | |
58 | font-weight: 600; | |
59 | } | |
60 | } | |
61 | // Item body and footer | |
62 | > .timeline-body, > .timeline-footer { | |
63 | padding: 10px; | |
64 | } | |
65 | ||
66 | } | |
67 | ||
68 | // The icons | |
69 | > .fa, | |
70 | > .glyphicon, | |
71 | > .ion { | |
72 | width: 30px; | |
73 | height: 30px; | |
74 | font-size: 15px; | |
75 | line-height: 30px; | |
76 | position: absolute; | |
77 | color: #666; | |
78 | background: @gray; | |
79 | border-radius: 50%; | |
80 | text-align: center; | |
81 | left: 18px; | |
82 | top: 0; | |
83 | } | |
84 | } | |
85 | ||
86 | // Time label | |
87 | > .time-label { | |
88 | > span { | |
89 | font-weight: 600; | |
90 | padding: 5px; | |
91 | display: inline-block; | |
92 | background-color: #fff; | |
93 | ||
94 | .border-radius(4px); | |
95 | } | |
96 | } | |
97 | } | |
98 | ||
99 | .timeline-inverse { | |
100 | > li { | |
101 | > .timeline-item { | |
102 | background: #f0f0f0; | |
103 | border: 1px solid #ddd; | |
104 | .box-shadow(none); | |
105 | > .timeline-header { | |
106 | border-bottom-color: #ddd; | |
107 | } | |
108 | } | |
109 | } | |
110 | } |