app/assets/stylesheets/timeline.scss
.timeline {
list-style-type: none;
display: flex;
align-items: center;
justify-content: center;
}
.li {
transition: all 200ms ease-in;
height: 140px;
}
.timestamp
{
margin-bottom: 20px;
}
.status {
display: flex;
justify-content: center;
border-top: 2px solid #D6DCE0;
position: relative;
transition: all 200ms ease-in;
}
.status p {
margin-top: 10px;
}
.status:before {
content: "";
width: 25px;
height: 25px;
background-color: white;
border-radius: 25px;
border: 1px solid #ddd;
position: absolute;
top: -15px;
left: 8%;
transition: all 200ms ease-in;
}
.li.complete .status {
border-top: 2px solid #A90201;
}
.li.complete .status p {
}
.li.complete .status:before {
background-color: #A90201;
border: none;
transition: all 200ms ease-in;
}
@media (min-device-width: 320px) and (max-device-width: 700px) {
.timeline {
list-style-type: none;
display: block;
}
.li {
transition: all 200ms ease-in;
display: flex;
width: inherit;
}
.timestamp {
width: 100px;
}
}
.scrollable{
height: auto;
overflow-y: auto;
}