Order Summary

There are no notes for this item.

<div class="order-summary">

    <div class="order-summary__header">
        <h3 class="order-summary__title">Order summary</h3>
        <a class="order-summary__edit" href="#">Edit</a>
    </div>

    <div class="order-summary__body">

        <div class="order-summary__item">
            <div class="order-summary__product">
                <h4 class="order-summary__product-name">1x Commerce</h4>
                <p class="order-summary__product-description">Single license (Cyber Sale)</p>
            </div>
            <div class="order-summary__numbers">
                <span class="order-summary__price">€299</span>
            </div>
        </div>

        <div class="order-summary__item">
            <div class="order-summary__product">
                <h4 class="order-summary__product-name">2x Redactor</h4>
                <p class="order-summary__product-description">Single license (Cyber Sale)</p>
            </div>
            <div class="order-summary__numbers">
                <span class="order-summary__price">€70</span>
            </div>
        </div>

    </div>

    <div class="order-summary__totals order-summary-totals">
        <div class="order-summary-totals__item order-summary-totals__item--subtotal">
            <span class="order-summary-totals__label">Subtotal:</span>
            <span class="order-summary-totals__value">€211.20</span>
        </div>
        <div class="order-summary-totals__item order-summary-totals__item--vat">
            <span class="order-summary-totals__label">VAT (20%):</span>
            <span class="order-summary-totals__value">€42.24</span>
        </div>
        <div class="order-summary-totals__item order-summary-totals__item--total">
            <span class="order-summary-totals__label">Total:</span>
            <span class="order-summary-totals__value">€253.44</span>
        </div>
    </div>

</div>
/* No context defined for this component. */
  • Content:
    /*------------------------------------*\
    	Order Summary
    \*------------------------------------*/
    
    .order-summary {
    	position: sticky;
    	top: 2rem;
    	background: $color-grey-xlight;
    	border: 1px solid $color-grey-light;
    	box-shadow: 0 0 3px rgba(39,44,49,.02), 0 5px 22px -6px rgba(39,44,49,.05);
    	border-radius: $radius;
    	padding: 1rem;
    	margin-top: 4rem;
    
    	@include mq(medium) {
    		margin-top: 0;
    	}
    }
    
    .order-summary__header {
    	display: flex;
    	justify-content: space-between;
    	align-items: center;
    }
    
    .order-summary__title {
    	margin: 0;
    	font-family: $font-family-body;
    	color: $color-text-base;
    }
    
    .order-summary__edit {
    	text-transform: uppercase;
    	border: 1px solid lighten($color-primary, 50%);
    	font-weight: bold;
    	font-size: 0.8rem;
    	line-height: 1;
    	padding: 4px 8px 3px 8px;
    	border-radius: $radius;
    
    	&:hover {
    		border-color: $color-primary;
    		text-decoration: none;
    	}
    }
    
    .order-summary__body {
    	margin: 1.5rem 0;
    }
    
    .order-summary__item {
    	display: flex;
    	justify-content: space-between;
    	border-bottom: 1px solid $color-grey-light;
    	padding: 0.6rem 0;
    }
    
    .order-summary__product-name {
    	margin: 0;
    	font-family: $font-family-body;
    	font-size: 1rem;
    	font-weight: bold;
    }
    
    .order-summary__product-description {
    	margin: 0;
    	font-size: 0.9rem;
    	color: $color-charcoal;
    }
    
    .order-summary__price {
    	font-weight: bold;
    }
    
    .order-summary-totals__item {
    	display: flex;
    	justify-content: space-between;
    	border-bottom: 1px solid $color-grey-mid;
    	font-size: 0.9rem;
    	padding: 0.3rem 0;
    
    	.order-summary-totals--large & {
    		font-size: 1rem;
    	}
    
    	&:last-child {
    		border-bottom: 0;
    	}
    }
    
    .order-summary-totals__item--total .order-summary-totals__label,
    .order-summary-totals__item--total .order-summary-totals__value {
    	font-weight: bold;
    }
    
  • URL: /components/raw/order-summary/order-summary.scss
  • Filesystem Path: components/02-components/order-summary/order-summary.scss
  • Size: 1.7 KB