No notes defined.
<div class="row">
<div class="small-12 column">
<ol class="checkout-progress">
<li class="checkout-progress__item checkout-progress__item--done">
<a href="#" class="checkout-progress__link">
<div class="checkout-progress__indictator">
<span>
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#tick"></use>
</svg>
</span>
</div>
<p class="checkout-progress__label">Cart</p>
</a>
</li>
<li class="checkout-progress__item checkout-progress__item--done">
<a href="#" class="checkout-progress__link">
<div class="checkout-progress__indictator">
<span>
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#tick"></use>
</svg>
</span>
</div>
<p class="checkout-progress__label">Login/Register</p>
</a>
</li>
<li class="checkout-progress__item checkout-progress__item--active">
<div class="checkout-progress__indictator"><span></span></div>
<p class="checkout-progress__label">Address</p>
</li>
<li class="checkout-progress__item">
<div class="checkout-progress__indictator"><span></span></div>
<p class="checkout-progress__label">Payment</p>
</li>
<li class="checkout-progress__item">
<div class="checkout-progress__indictator"><span></span></div>
<p class="checkout-progress__label">Success</p>
</li>
</ol>
</div>
</div>
/* No context defined. */
/*------------------------------------*\
Checkout Progress
\*------------------------------------*/
.checkout-progress {
position: relative;
list-style: none;
margin: 3rem auto;
padding: 0;
width: 100%;
max-width: 920px;
display: flex;
flex-direction: column;
justify-content: flex-start;
@include mq(medium) {
flex-direction: row;
align-items: center;
justify-content: space-between;
&:before {
content:'';
position: absolute;
top: 25px;
left: 4%;
height: 2px;
width: 92%;
background: $color-grey-xlight-tint;
z-index: 1;
}
}
}
.checkout-progress__item {
position: relative;
z-index: 2;
margin: 0;
color: $color-charcoal;
}
.checkout-progress__link {
color: $color-primary;
}
.checkout-progress__indictator {
margin: 0 auto 0.5rem auto;
width: 40px;
height: 40px;
border-radius: 100%;
border: 2px solid $color-grey-xlight-tint;
background-color: $color-white;
box-shadow: 0px 0px 0px 5px $color-white;
@include mq(medium) {
width: 50px;
height: 50px;
}
}
.checkout-progress__indictator span {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
color: $color-white;
svg {
width: 20px;
height: 20px;
margin-left: -2px;
}
@include mq(medium) {
width: 50px;
height: 50px;
svg {
width: 25px;
height: 25px;
margin-left: -3px;
}
}
}
.checkout-progress__label {
text-transform: uppercase;
text-align: center;
font-size: 0.8rem;
font-weight: 600;
color: inherit;
}
.checkout-progress__item--done {
.checkout-progress__indictator {
background-color: $color-primary;
border-color: $color-primary;
}
}
.checkout-progress__item--active {
color: $color-charcoal;
.checkout-progress__indictator {
background-color: $color-grey-xlight-tint;
border-color: $color-grey-xlight-tint;
}
}