No notes defined.
<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>
<div class="alert alert--warning">
<p>Something went wrong</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 ♥<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> Correspondence: Mark Hamstra, Tijnjedyk 19, Unit 8531, 8934 BT, 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 & Cookies</a></li>
</ul>
</nav>
</div>
</div>
</footer>
/* No context defined. */
// =============================================================================
// 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;
//}
//