Cart

There are no notes for this item.

<div class="global-container">

    <header class="siteheader siteheader--simple" id="top">

        <div class="row">
            <div class="small-12 columns">
                <a href="https://modmore.com/" class="logo">
                    <svg role="img">
                        <use xlink:href="/svg/svg-symbols.svg#modmore-logo"></use>
                    </svg>
                    <span class="visually-hidden">modmore</span>
                </a>
            </div>
        </div>

    </header>

    <main class="wrapper checkout page-cart">
        <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>

        <div class="row">
            <div class="small-12 large-10 large-offset-1 column">

                <div class="cart-header">
                    <h1 class="cart-header__title">Cart</h1>
                    <form method="POST" action="cart.html" class="cart-header__checkout form">
                        <input type="hidden" name="checkout" value="1">
                        <button class="form-button form-button--small" type="submit">Checkout</button>
                    </form>
                </div>

                <div class="alert">
                    <p>Cart has been updated</p>
                </div>

                <form class="cart" action="" method="post">

                    <div class="cart-item">
                        <div class="cart-item__media medium-1">
                            <svg role="img" class="cart-item__icon">
                                <use xlink:href="../../svg/svg-symbols.svg#commerce"></use>
                            </svg>
                        </div>
                        <div class="cart-item__product small-6 medium-6">
                            <h3 class="cart-item__name">
                                <a href="#" title="Commerce">Commerce</a>
                            </h3>
                            <p class="cart-item__description">
                                Single license (Cyber Sale)
                            </p>
                            <button class="cart-item__remove" name="remove_item" value="283" title="Remove item">
                                <svg role="img" class="cart-item__remove-icon">
                                    <use xlink:href="../../svg/svg-symbols.svg#times"></use>
                                </svg>
                                <span>Remove product from cart</span>
                            </button>
                        </div>
                        <div class="cart-item__quantity small-6 medium-2">
                            <div class="cart-quantity">
                                <button class="cart-quantity__minus" title="Remove 1">-</button>
                                <input type="number" class="cart-quantity__input form__input-field" name="items[252]" value="1" id="item-0-quantity" min="1" step="1" max="42" aria-label="Quantity" title="Quantity">
                                <button class="cart-quantity__plus" title="Add 1">+</button>
                                <!--<button class="btn btn-sm cart-item__quantity-update hidden" type="submit">Update Cart</button>-->
                            </div>
                        </div>
                        <div class="cart-item__numbers small-6 medium-3">
                            <span class="cart-item__subtotal">€299.00</span>
                        </div>
                    </div><!-- /cart-item -->

                    <div class="cart-item">
                        <div class="cart-item__media small-3 medium-1">
                            <svg role="img" class="cart-item__icon">
                                <use xlink:href="../../svg/svg-symbols.svg#redactor"></use>
                            </svg>
                        </div>
                        <div class="cart-item__product small-6 medium-6">
                            <h3 class="cart-item__name">
                                <a href="#" title="Commerce">Redactor</a>
                            </h3>
                            <p class="cart-item__description">
                                Single license (Cyber Sale)
                            </p>
                            <button class="cart-item__remove" name="remove_item" value="283" title="Remove item">
                                <svg role="img" class="cart-item__remove-icon">
                                    <use xlink:href="../../svg/svg-symbols.svg#times"></use>
                                </svg>
                                <span>Remove product from cart</span>
                            </button>
                        </div>
                        <div class="cart-item__quantity small-6 medium-2">
                            <div class="cart-quantity">
                                <button class="cart-quantity__minus" title="Remove 1">-</button>
                                <input type="number" class="cart-quantity__input form__input-field" name="items[252]" value="5" id="item-0-quantity" min="1" step="1" max="42" aria-label="Quantity" title="Quantity">
                                <button class="cart-quantity__plus" title="Add 1">+</button>
                                <!--<button class="btn btn-sm cart-item__quantity-update hidden" type="submit">Update Cart</button>-->
                            </div>
                        </div>
                        <div class="cart-item__numbers small-6 medium-3">
                            <span class="cart-item__subtotal">€125.00</span>
                        </div>
                    </div><!-- /cart-item -->

                    <div class="cart-item">
                        <div class="cart-item__media medium-1">
                            <svg role="img" class="cart-item__icon">
                                <use xlink:href="../../svg/svg-symbols.svg#moregallery"></use>
                            </svg>
                        </div>
                        <div class="cart-item__product small-6 medium-6">
                            <h3 class="cart-item__name">
                                <a href="#" title="Commerce">MoreGallery</a>
                            </h3>
                            <p class="cart-item__description">
                                Single license (Cyber Sale)
                            </p>
                            <button class="cart-item__remove" name="remove_item" value="283" title="Remove item">
                                <svg role="img" class="cart-item__remove-icon">
                                    <use xlink:href="../../svg/svg-symbols.svg#times"></use>
                                </svg>
                                <span>Remove product from cart</span>
                            </button>
                        </div>
                        <div class="cart-item__quantity small-6 medium-2">
                            <div class="cart-quantity">
                                <button class="cart-quantity__minus" title="Remove 1">-</button>
                                <input type="number" class="cart-quantity__input form__input-field" name="items[252]" value="2" id="item-0-quantity" min="1" step="1" max="42" aria-label="Quantity" title="Quantity">
                                <button class="cart-quantity__plus" title="Add 1">+</button>
                                <!--<button class="btn btn-sm cart-item__quantity-update hidden" type="submit">Update Cart</button>-->
                            </div>
                        </div>
                        <div class="cart-item__numbers small-6 medium-3">
                            <span class="cart-item__subtotal">€50.00</span>
                        </div>
                    </div><!-- /cart-item -->

                </form>

                <div class="cart-footer">
                    <div class="small-12 medium-6 large-7 cart-coupon">

                        <input type="checkbox" id="coupon-checkbox" class="cart-coupon__checkbox">
                        <label for="coupon-checkbox" class="cart-coupon__label" data-link="coupon-form" data-link-focus="cart-coupon">Have a coupon code?</label>

                        <form method="post" action="" class="form cart-coupon__form" id="coupon-form">
                            <label for="cart-coupon" class="cart-coupon__form-label">Enter your coupon code</label>
                            <input type="text" name="coupon" id="cart-coupon" class="cart-coupon__input form-field--small" value="" placeholder="COUPON-123-ABC">
                            <input type="submit" class="form-button form-button--small cart-coupon__btn" value="Validate coupon">
                        </form>

                    </div>
                    <div class="small-12 medium-6 large-5 cart-totals">
                        <div class="order-summary__totals order-summary-totals order-summary-totals--large">
                            <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>
                        <form method="POST" action="cart.html" class="cart-footer__checkout form">
                            <input type="hidden" name="checkout" value="1">
                            <button class="form-button form-button--small" type="submit">Checkout</button>
                        </form>
                    </div>
                </div>

            </div>
        </div>

        <div class="row checkout-footer">
            <div class="small-12 column">
                <p class="checkout-footer__text">Made with &#9829;<br> Powered by <a href="#">Commerce</a></p>
            </div>
        </div>
    </main>

    <footer class="page-footer page-footer--simple">
        <div class="row">
            <div class="columns small-12 large-6">
                <p class="smallprint">© 2013 - 2020 modmore.</p>
                <p class="smallprint">KVK: 52454606 • VAT: NL001103641B07<br> Oenemastate 14, 8926PR, Leeuwarden, The Netherlands</p>
            </div>
            <div class="columns small-12 large-6 align-bottom">
                <nav>
                    <ul class="footer-nav-horiz">
                        <li>
                            <span>Change currency:</span>
                            <select title="Select a currency" aria-label="Select a currency" style="width: auto;" id="currencySelector" class="currency-selector">
                                <option value="EUR">EUR</option>
                                <option value="USD">USD</option>
                                <option value="GBP">GBP</option>
                                <option value="RUB">RUB</option>
                                <option value="CHF">CHF</option>
                                <option value="CAD">CAD</option>
                            </select>
                        </li>
                        <li><a href="#">Terms of Service</a></li>
                        <li><a href="#">Privacy &amp; Cookies</a></li>
                    </ul>
                </nav>

            </div>
        </div>
    </footer>
/* No context defined for this component. */
  • Content:
    // =============================================================================
    // Cart header
    // =============================================================================
    
    .cart-header {
    	display: flex;
    	justify-content: space-between;
    	margin-bottom: 2rem;
    }
    
    .cart-header__title {
    	margin: 0;
    }
    
    .cart-header__checkout {
    	margin: 0;
    }
    
    
    // =============================================================================
    // Cart
    // =============================================================================
    
    .cart {
    	margin: 2rem 0;
    }
    
    .cart-item {
    	position: relative;
    	display: flex;
    	flex-wrap: wrap;
    	border-radius: 4px;
    	margin: 1rem 0;
    	padding: 1rem;
    	background: $color-white;
    	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);
        transition: all ease 0.3s;
    
    	&:hover {
    		background: $color-grey-xlight;
    		border: 1px solid darken($color-grey-xlight-tint, 5%);
    		box-shadow: 8px 20px 30px rgba(39,44,49,.05), 1px 6px 12px rgba(39,44,49,.04);
    	}
    }
    
    .cart-item__product,
    .cart-item__quantity,
    .cart-item__numbers {
    	display: flex;
    	flex-direction: column;
    	align-items: flex-start;
    	justify-content: center;
    }
    
    .cart-item__media {
    	display: none;
    
    	@include mq(medium) {
    		display: flex;
    		flex-direction: column;
    		align-items: flex-start;
    		justify-content: center;
    	}
    }
    
    .cart-item__icon {
    	width: 100%;
    	height: 100%;
    	max-height: 60px;
    	max-width: 60px;
    	position: relative;
    	top: 5px;
    	color: $color-primary;
    
    	.cart-item:hover & {
    		opacity: 0;
    	}
    }
    
    .cart-item__product {
    	margin-bottom: 1rem;
    
    	@include mq(medium) {
    		margin-bottom: 0;
    	}
    }
    
    .cart-item__name {
    	margin: 0;
    	font-family: $font-family-body;
    	font-weight: bold;
    	font-size: 1.2rem;
    }
    
    .cart-item__description {
    	margin: 0;
    	color: $color-grey-base;
    }
    
    .cart-item__quantity {
    	align-items: flex-start;
    	order: 3;
    
    	@include mq(medium) {
    		align-items: center;
    		order: 3;
    	}
    }
    
    .cart-quantity {
    	display: flex;
    }
    
    .cart-quantity__minus,
    .cart-quantity__plus {
    	background: none;
    	border: 0;
    	color: $color-primary;
    }
    
    input[type=number].cart-quantity__input {
    	margin: 0;
    	text-align: center;
    }
    
    input[type=number].cart-quantity__input::-webkit-inner-spin-button,
    input[type=number].cart-quantity__input::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    
    .cart-item__numbers {
    	align-items: flex-end;
    	order: 2;
    
    	@include mq(medium) {
    		order: 4;
    	}
    }
    
    .cart-item__subtotal {
    	font-weight: bold;
    	font-size: 1.2rem;
    }
    
    .cart-item__remove {
    	border: 0;
    	background: transparent;
    	color: $color-error;
    	padding: 0;
    	margin: 0.5rem 0;
    
    	.cart-item__remove-icon {
    		width: 100%;
    		height: 100%;
    		max-width: 30px;
    		max-height: 30px;
    		display: none;
    	}
    
    	@include mq(medium) {
    		position: absolute;
    		left: 20px;
    		display: flex;
    		align-items: center;
    		justify-content: center;
    		height: 50px;
    		width: 50px;
    		border-radius: 100%;
    		border: 1px solid rgba(0,0,0,.1);
    		background: $color-white;
    		color: lighten($color-error, 5%);
    		margin: 0;
    		padding: 0;
    		cursor: pointer;
    		visibility: hidden;
    		opacity: 0;
    
    		&:hover {
    			color: $color-error;
    			border: 1px solid rgba(0,0,0,.2);
    			box-shadow: 8px 20px 30px rgba(39,44,49,.05), 1px 6px 12px rgba(39,44,49,.04);
    		}
    
    		span {
    			@include visually-hidden();
    		}
    
    		.cart-item__remove-icon {
    			display: block;
    		}
    
    		.cart-item:hover & {
    			visibility: visible;
    			opacity: 1;
    		}
    	}
    }
    
    
    
    // =============================================================================
    // Cart footer
    // =============================================================================
    .cart-footer {
    	display: flex;
    	flex-wrap: wrap;
    	margin-bottom: 2rem;
    }
    
    .cart-coupon {
    	margin-bottom: 1rem;
    	font-weight: bold;
    }
    
    .cart-footer__checkout {
    	display: flex;
    	justify-content: flex-end;
    	margin-top: 1rem;
    }
    
    
    
    // =============================================================================
    // Coupon
    // =============================================================================
    
    .cart-coupon__checkbox,
    .cart-coupon__form {
    	display: none;
    }
    .cart-coupon__label {
    	color: $color-primary;
    
    	&:hover {
    		text-decoration: underline;
    	}
    
    	&.is-active {
    		display: none;
    	}
    }
    
    .cart-coupon__form {
    	max-width: 400px;
    	border-radius: 4px;
    	margin: 0;
    	padding: 1rem;
    	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);
    
    	&.is-active {
    		display: block;
    	}
    }
    
    .cart-coupon__btn {
    	margin-top: 0.5rem;
    }
    
    
  • URL: /components/raw/cart/cart.scss
  • Filesystem Path: components/04-checkout/cart/cart.scss
  • Size: 4.5 KB