Created
November 30, 2016 06:45
-
-
Save raphaelkross/29a88f325b53d13ccf6c3aaa75664cb3 to your computer and use it in GitHub Desktop.
Vertical Flow
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<ul class="StepProgress"> | |
<li class="StepProgress-item is-done"><strong>Award an entry</strong> | |
Little Text</li> | |
<li class="StepProgress-item is-done"><strong>Award an entry</strong> | |
Little Text | |
<div class="StepProgress-actions"> | |
<a href="#" class="btn pdf">PDF</a> | |
<a href="#" class="btn xml">XML</a> | |
</div> | |
</li> | |
<li class="StepProgress-item"><strong>Award an entry</strong> | |
<li class="StepProgress-item"><strong>Award an entry</strong> | |
</ul> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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:first-child::before { | |
top: 10px; | |
} | |
&-item { | |
position: relative; | |
counter-increment: list; | |
line-height: 1; | |
display: flex; | |
flex-direction: column; | |
height: 32px; /* 55px (2 lines height) - 23px (or spacing) */ | |
justify-content: center; | |
&:not(:last-child) { | |
padding-bottom: 23px; | |
} | |
&::before { | |
display: inline-block; | |
content: ''; | |
position: absolute; | |
left: -30px; | |
height: 100%; | |
width: 10px; | |
} | |
&::after { | |
content: ''; | |
display: inline-block; | |
position: absolute; | |
top: 0; | |
left: -45px; | |
width: 28px; | |
height: 28px; | |
border: 2px solid #d1d9e3; | |
border-radius: 50%; | |
background-color: #d1d9e3; | |
} | |
&.is-done { | |
&::before { | |
border-left: 2px solid #c99252; | |
} | |
&::after { | |
content: "✔"; | |
font-size: 14px; | |
line-height: 28px; | |
color: #FFF; | |
text-align: center; | |
border: 2px solid #c99252; | |
background-color: #c99252; | |
} | |
} | |
&.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; | |
} | |
} | |
.StepProgress-actions { | |
position: absolute; | |
right: 0; | |
top: 50%; | |
transform: translateY(-50%); | |
} | |
.StepProgress-actions .xml { | |
margin-left: 10px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment