There are no notes for this item.

<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 for this component. */
  • Content:
    /*------------------------------------*\
    	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;
    	}
    }
    
  • URL: /components/raw/checkout-progress/checkout-progress.scss
  • Filesystem Path: components/02-components/checkout-progress/checkout-progress.scss
  • Size: 1.8 KB