css vertical form steps indicator? - css

Question

I'm trying to create a vertical form steps indicator using css.
I found this https://codepen.io/erwinquita/pen/ZWzVRE which works fine in the codepen but when I try to copy the code from there and use it in my html page, the green circles do not show up!
I even copied the code and pasted it in jsfiddle but the same issue accrued.
this is the code:
.wrapper {
width: 330px;
font-family: 'Helvetica';
font-size: 14px;
border: 1px solid #CCC;
}
.StepProgress {
position: relative;
padding-left: 45px;
list-style: none;
&::before {
display: inline-block;
content: '';
position: absolute;
top: 0;
left: 15px;
width: 10px;
height: 100%;
border-left: 2px solid #CCC;
}
&-item {
position: relative;
counter-increment: list;
&:not(:last-child) {
padding-bottom: 20px;
}
&::before {
display: inline-block;
content: '';
position: absolute;
left: -30px;
height: 100%;
width: 10px;
}
&::after {
content: '';
display: inline-block;
position: absolute;
top: 0;
left: -37px;
width: 12px;
height: 12px;
border: 2px solid #CCC;
border-radius: 50%;
background-color: #FFF;
}
&.is-done {
&::before {
border-left: 2px solid green;
}
&::after {
content: "✔";
font-size: 10px;
color: #FFF;
text-align: center;
border: 2px solid green;
background-color: green;
}
}
&.current {
&::before {
border-left: 2px solid green;
}
&::after {
content: counter(list);
padding-top: 1px;
width: 19px;
height: 18px;
top: -4px;
left: -40px;
font-size: 14px;
text-align: center;
color: green;
border: 2px solid green;
background-color: white;
}
}
}
strong {
display: block;
}
}
<div class="wrapper">
<ul class="StepProgress">
<li class="StepProgress-item is-done"><strong>Post a contest</strong></li>
<li class="StepProgress-item is-done"><strong>Award an entry</strong>
Got more entries that you love? Buy more entries anytime! Just hover on your favorite entry and click the Buy button
</li>
<li class="StepProgress-item current"><strong>Post a contest</strong></li>
<li class="StepProgress-item"><strong>Handover</strong></li>
<li class="StepProgress-item"><strong>Provide feedback</strong></li>
</ul>
</div>
I don't understand what I am missing.
could someone please advice on this issue?

Answer 1

In the codepen link you've provided, LESS CSS Preprocessor has been used. That's why you couldn't replicate the same code with jsfiddle or your local instance. Simply, the CSS isn't working in your case, you are viewing the plain html because when you use the css preprocessor, browser can't render it directly.
If you want this code to work in jsfiddle, then you have to select SCSS as the language in the dropdown menu named as css in the css box. Here's the link that shows it is working: https://jsfiddle.net/9k67r0eg/1/
And if you want to use it in your local browser, then you may want to compile it. Check it here: http://lesscss.org/
However, the LESS can be converted to pure css also. Here's the converted code which you can use directly:
.wrapper {
width: 330px;
font-family: 'Helvetica';
font-size: 14px;
border: 1px solid #CCC;
}
.StepProgress {
position: relative;
padding-left: 45px;
list-style: none;
}
.StepProgress::before {
display: inline-block;
content: '';
position: absolute;
top: 0;
left: 15px;
width: 10px;
height: 100%;
border-left: 2px solid #CCC;
}
.StepProgress-item {
position: relative;
counter-increment: list;
}
.StepProgress-item:not(:last-child) {
padding-bottom: 20px;
}
.StepProgress-item::before {
display: inline-block;
content: '';
position: absolute;
left: -30px;
height: 100%;
width: 10px;
}
.StepProgress-item::after {
content: '';
display: inline-block;
position: absolute;
top: 0;
left: -37px;
width: 12px;
height: 12px;
border: 2px solid #CCC;
border-radius: 50%;
background-color: #FFF;
}
.StepProgress-item.is-done::before {
border-left: 2px solid green;
}
.StepProgress-item.is-done::after {
content: "✔";
font-size: 10px;
color: #FFF;
text-align: center;
border: 2px solid green;
background-color: green;
}
.StepProgress-item.current::before {
border-left: 2px solid green;
}
.StepProgress-item.current::after {
content: counter(list);
padding-top: 1px;
width: 19px;
height: 18px;
top: -4px;
left: -40px;
font-size: 14px;
text-align: center;
color: green;
border: 2px solid green;
background-color: white;
}
.StepProgress strong {
display: block;
}
<div class="wrapper">
<ul class="StepProgress">
<li class="StepProgress-item is-done"><strong>Post a contest</strong></li>
<li class="StepProgress-item is-done"><strong>Award an entry</strong> Got more entries that you love? Buy more entries anytime! Just hover on your favorite entry and click the Buy button
</li>
<li class="StepProgress-item current"><strong>Post a contest</strong></li>
<li class="StepProgress-item"><strong>Handover</strong></li>
<li class="StepProgress-item"><strong>Provide feedback</strong></li>
</ul>
</div>