src/resources/scss/components/_timeline.scss
.timeline {
display: block;
position: relative;
@include clearfix;
}
.timeline-item {
display: block;
padding-left: 20px;
position: relative;
&:before {
background-color: darken(#F7F7F7, 20);
bottom: 0;
content: "";
left: 4px;
position: absolute;
top: 0;
width: 2px;
z-index: z-index(content);
}
&:after {
background-color: theme-color(light);
border: 2px solid darken(#F7F7F7, 20);
border-radius: 50%;
content: "";
height: 10px;
left: 0;
position: absolute;
top: 3px;
width: 10px;
z-index: z-index(content) + 1;
}
&:first-of-type:before {
top: 5px;
}
&:not(:first-of-type) {
margin-top: 25px;
&:before {
top: -25px;
}
&:last-of-type:before {
bottom: auto;
height: 30px;
}
}
.timeline-compact > &:not(:first-of-type) {
margin-top: 10px;
&:before {
top: -10px;
}
&:last-of-type:before {
bottom: auto;
height: 15px;
}
}
.timeline-compact &-center-point,
&-center-point {
&:after {
top: 50%;
transform: translateY(-50%);
}
&:first-of-type:before {
top: 50%;
}
&:last-of-type:before {
bottom: 50% !important;
height: auto !important;
}
}
}