Vertical Timeline Style for Groups (SCSS)
Turns the blocks inside a Group with the class "wpide-timeline" into a vertical timeline with a line and a dot for each step, for histories, roadmaps and processes.
Opens WPIDE on
Code
$timeline-color: #2271b1;
$timeline-line: 2px;
$timeline-dot: 14px;
$timeline-indent: 2rem;
.wpide-timeline {
position: relative;
padding-left: $timeline-indent !important;
&::before {
content: "";
position: absolute;
top: .4em;
bottom: .4em;
left: calc(#{$timeline-dot} / 2 - #{$timeline-line} / 2);
width: $timeline-line;
background: rgba($timeline-color, .3);
}
> * {
position: relative;
margin-bottom: 1.75rem;
&::before {
content: "";
position: absolute;
top: .35em;
left: -$timeline-indent;
width: $timeline-dot;
height: $timeline-dot;
border-radius: 50%;
background: $timeline-color;
box-shadow: 0 0 0 4px rgba($timeline-color, .15);
}
}
}Notes
Put one Group (or heading + paragraph pair wrapped in a Group) per step inside the timeline Group.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.