Template:Timeline/styles.css
From wikilawschool.net. Wiki Law School does not provide legal advice. For educational purposes only.
.timeline {
width: 100%;
height: 412px;
padding: 20px;
position:relative;
box-sizing: border-box;
background: #c8ccd1;
overflow: auto;
display: flex;
}
.timieline-title {
font-size: 1.5em;
font-weight: bold;
}
.timeline-content {
max-width: 300px;
height: 125px;
padding: 20px;
flex-shrink: 0;
flex-grow: 0;
align-self: flex-start;
background: #FFF;
position: relative;
border-radius: 10px;
margin-right: 10px;
box-shadow: 0px 0px 2px 2px rgba(0,0,0, 0.2);
}
.timeline-content:before {
position: absolute;
width: calc(100% + 14px);
height: 4px;
top: calc(100% + 10px);
background: #FFF;
content: "";
left: -7px;
border-radius: 5px;
}
.timeline-content:after {
position: absolute;
width: 4px;
height: 25px;
top: 100%;
left: calc(50% - 10px);
background: #FFF;
content: "";
}
.timeline-period {
position: absolute;
top: calc(100% + 25px);
background: #FFF;
padding: 10px;
width: 100px;
text-align:center;
border-radius: 10px;
left: calc(50% - 70px);
box-shadow: 0px 0px 2px 2px rgba(0,0,0, 0.2);
}
.timeline-period:before {
width: 15px;
height: 15px;
background: #FFF;
border-radius: 50%;
content: "";
position: absolute;
top: -20px;
left: calc(50% - 5.5px);
z-index: 2;
}
.timeline-content:nth-child(even) {
align-self: flex-end;
}
.timeline-content:nth-child(even):before {
top: -15px;
}
.timeline-content:nth-child(even):after {
top: -25px;
}
.timeline-content:nth-child(even) .timeline-period {
bottom: 115.25%;
top: unset;
}
.timeline-content:nth-child(even) .timeline-period:before {
top: calc(100% + 5px);
}