File: /home/demo/public_html/leakdetection/assets/scss/elements/_roadmap.scss
.one-roadmap-bar {
display: inline-block;
width: 15px;
height: 100%;
position: absolute;
top: 0;
left: 0;
align-self: flex-start;
border-radius: 50em;
&:before,
&:after {
content: '';
display: inline-block;
position: absolute;
top: 0;
background: var(--color-primary);
transition: transform 0.45s cubic-bezier(0.23, 1, 0.320, 1);
}
&:before {
width: 100%;
height: 15px;
border-radius: 50em;
}
&:after {
width: 2px;
height: 100%;
left: 6px;
transform-origin: top center;
}
}
.one-roadmap-info {
h6,
p {
margin: 0;
line-height: 1.5em;
letter-spacing: normal;
color: inherit;
}
h6 {
margin-bottom: 0.25em;
font-size: 15px;
}
p {
font-size: 16px;
}
}
.one-roadmap-mark {
display: inline-flex;
width: 32px;
height: 32px;
margin-left: auto;
align-items: center;
justify-content: center;
border: 2px solid;
border-radius: 50em;
font-size: 30px;
opacity: 0.43;
}
.one-roadmap-item {
display: flex;
position: relative;
padding-bottom: 1em;
padding-left: 30px;
flex-flow: row wrap;
align-items: center;
color: #000;
&:last-of-type {
padding-bottom: 0;
.one-roadmap-bar {
&:after {
content: none;
}
}
}
}
.one-roadmap-item-checked {
.one-roadmap-bar,
.one-roadmap-info {
opacity: 0.6;
}
.one-roadmap-mark {
opacity: 1;
}
}
.one-roadmap {
padding: 45px 40px 45px 60px;
&:before {
content: '';
display: inline-block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border: 1px solid;
opacity: 0.3;
}
&[data-custom-animations=true] {
.one-roadmap-item {
opacity: 0;
}
.one-roadmap-bar {
&:before,
&:after {
transform: scale(0);
}
}
}
&.ca-initvalues-applied {
.one-roadmap-item {
@for $i from 0 to 10 {
&:nth-child(#{$i}) {
.one-roadmap-bar {
&:before {
transition-delay: ($i / 3.8) + s;
}
&:after {
transition-delay: ($i / 3.55) + s;
}
}
}
}
}
.one-roadmap-bar {
&:before,
&:after {
transform: scale(1);
}
}
}
}