Stepper example

Using flex box makes it easy.

by bejnar

HTML

<div class="container">
	
	<div class="step complete">
		<div class="dotline">
			<div class="nonline"></div>
			<div class="dot">12</div>
			<div class="line"></div>
		</div>
		<div class="text">Step instructions</div>
	</div>
	
	<div class="step">
		<div class="dotline">
			<div class="completed line"></div>
			<div class="dot">2</div>
			<div class="line"></div>
		</div>
		<div class="text">Step instructions that are 
		really long compared to the others.</div>
	</div>
	
	<div class="step">
		<div class="dotline">
			<div class="line"></div>
			<div class="dot">3</div>
			<div class="nonline"></div>
		</div>
		<div class="text">Step instructions</div>
	</div>

</div>

SCSS

.container {
	display: flex;
}
.step {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	text-align: center;
	width: 100%;
}

.dotline {
	display: flex;
}

.dot {
	background-color: gray;
	border-radius: 100%;
	min-width: 40px;
	min-height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	margin-right: 6px;
	margin-left: 6px;
}

.line {
	border-top: 2px solid gray;
	width: 100%;
	margin-top: 20px;
}

.nonline {
	width: 100%;
}

.text {
	padding-right: 40px;
	padding-left: 40px;
}


.complete {
	.dot {
		background-color: orange;
	}
	.line {
		border-top: 2px solid orange;
	}
}

.completed.line {
	border-top: 2px solid orange;
}