modmore component library

Order Summary: Success

No notes defined.

<div class="order-summary">

    <div class="order-summary__header">
        <h3 class="order-summary__title">Your order summary</h3>
    </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. */
  • Content: 
    /*------------------------------------*\
	Order Summary
\*------------------------------------*/

.order-summary {
	background: $color-grey-xlight;
	border: 1px solid $color-grey-xlight-tint;
	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;
	background: white;

	&: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-xlight-tint;
	font-size: 0.9rem;
	padding: 5px 0 3px;

	.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