codecheck
148 строк · 3.0 Кб
1// core
2.p-timeline {
3display: flex;
4flex-grow: 1;
5flex-direction: column;
6}
7
8.p-timeline-left .p-timeline-event-opposite {
9text-align: right;
10}
11
12.p-timeline-left .p-timeline-event-content {
13text-align: left;
14}
15
16.p-timeline-right .p-timeline-event {
17flex-direction: row-reverse;
18}
19
20.p-timeline-right .p-timeline-event-opposite {
21text-align: left;
22}
23
24.p-timeline-right .p-timeline-event-content {
25text-align: right;
26}
27
28.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) {
29flex-direction: row-reverse;
30}
31
32.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite {
33text-align: right;
34}
35
36.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content {
37text-align: left;
38}
39
40.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite {
41text-align: left;
42}
43
44.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content {
45text-align: right;
46}
47
48.p-timeline-event {
49display: flex;
50position: relative;
51min-height: 70px;
52}
53
54.p-timeline-event:last-child {
55min-height: 0;
56}
57
58.p-timeline-event-opposite {
59flex: 1;
60padding: 0 1rem;
61}
62
63.p-timeline-event-content {
64flex: 1;
65padding: 0 1rem;
66}
67
68.p-timeline-event-separator {
69flex: 0;
70display: flex;
71align-items: center;
72flex-direction: column;
73}
74
75.p-timeline-event-marker {
76display: flex;
77align-self: baseline;
78}
79
80.p-timeline-event-connector {
81flex-grow: 1;
82}
83
84.p-timeline-horizontal {
85flex-direction: row;
86}
87
88.p-timeline-horizontal .p-timeline-event {
89flex-direction: column;
90flex: 1;
91}
92
93.p-timeline-horizontal .p-timeline-event:last-child {
94flex: 0;
95}
96
97.p-timeline-horizontal .p-timeline-event-separator {
98flex-direction: row;
99}
100
101.p-timeline-horizontal .p-timeline-event-connector {
102width: 100%;
103}
104
105.p-timeline-bottom .p-timeline-event {
106flex-direction: column-reverse;
107}
108
109.p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) {
110flex-direction: column-reverse;
111}
112
113// theme
114.p-timeline {
115.p-timeline-event-marker {
116border: $timelineEventMarkerBorder;
117border-radius: $timelineEventMarkerBorderRadius;
118width: $timelineEventMarkerWidth;
119height: $timelineEventMarkerHeight;
120background-color: $timelineEventMarkerBackground;
121}
122
123.p-timeline-event-connector {
124background-color: $timelineEventColor;
125}
126
127&.p-timeline-vertical {
128.p-timeline-event-opposite,
129.p-timeline-event-content {
130padding: $timelineVerticalEventContentPadding;
131}
132
133.p-timeline-event-connector {
134width: $timelineEventConnectorSize;
135}
136}
137
138&.p-timeline-horizontal {
139.p-timeline-event-opposite,
140.p-timeline-event-content {
141padding: $timelineHorizontalEventContentPadding;
142}
143
144.p-timeline-event-connector {
145height: $timelineEventConnectorSize;
146}
147}
148}
149
150
151
152