<div class="page-wrapper checkout">
<header class="header">
<div class="header__wrapper">
<div class="container">
<div class="header__top">
<div class="header__top--logo">
<a class="logo " href="#" aria-label="Homepage">
<img class="logo__image " src="/images/logo/logo.svg" alt="Alpaca Logo">
</a>
</div>
</div>
</div>
</div>
</header>
<div class="container">
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-7 col-xl-8">
<div class="card card--checkout">
<div class="row checkout__row">
<div class="col-xs-12 col-lg-3">
<h6 class="heading heading--second-level">Contact gegevens</h6>
<p class="text-small">Zodat we je op de hoogte kunnen houden tijdens het bestelproces.</p>
</div>
<div class="col-xs-12 col-lg-9">
<div class="input ">
<span class="form-check" aria-label="form-check-qty1">
<svg class="icon brief-info__icon" role="img">
<title>USP Check</title>
<use xlink:href="/images/icons-sprite.svg#usp-check"></use>
</svg>
</span>
<label class="
label
bundle-option__label
" for="qty1">
Card Verification Number
</label>
<input class="input__field " id="qty1" name="qty1" type="number" placeholder="" min="0">
</div>
<div class="input ">
<span class="form-check" aria-label="form-check-qty1">
<svg class="icon brief-info__icon" role="img">
<title>USP Check</title>
<use xlink:href="/images/icons-sprite.svg#usp-check"></use>
</svg>
</span>
<label class="
label
bundle-option__label
" for="qty1">
Card Verification Number
</label>
<input class="input__field " id="qty1" name="qty1" type="number" placeholder="" min="0">
</div>
</div>
</div>
<div class="row checkout__row">
<div class="col-xs-12 col-lg-3">
<h6 class="heading heading--second-level">Aan wie?</h6>
<p class="text-small">Naar wie mogen we het pakketje sturen?</p>
</div>
<div class="col-xs-12 col-lg-9">
<div class="radio ">
<fieldset class="radio__fieldset" aria-labelledby="legend-id">
<legend class="radio__legend" id="legend-id">
Choose option
</legend>
<div class="radio__handler">
<input type="radio" id="id1" name="radio1" class="radio__field">
<label for="id1" class="radio__label">
<span class="radio__icon"></span>
Option one
</label>
</div>
<div class="radio__handler">
<input type="radio" id="id2" name="radio1" class="radio__field">
<label for="id2" class="radio__label">
<span class="radio__icon"></span>
Option two
</label>
</div>
<div class="radio__handler">
<input type="radio" id="id3" name="radio1" class="radio__field">
<label for="id3" class="radio__label">
<span class="radio__icon"></span>
Options three
</label>
</div>
</fieldset>
</div>
<div class="grid-container">
<div class="row">
<div class="col-xs-12 col-lg-6">
<div class="input ">
<span class="form-check" aria-label="form-check-qty1">
<svg class="icon brief-info__icon" role="img">
<title>USP Check</title>
<use xlink:href="/images/icons-sprite.svg#usp-check"></use>
</svg>
</span>
<label class="
label
bundle-option__label
" for="qty1">
Card Verification Number
</label>
<input class="input__field " id="qty1" name="qty1" type="number" placeholder="" min="0">
</div>
</div>
<div class="col-xs-12 col-lg-6">
<div class="input ">
<span class="form-check" aria-label="form-check-qty1">
<svg class="icon brief-info__icon" role="img">
<title>USP Check</title>
<use xlink:href="/images/icons-sprite.svg#usp-check"></use>
</svg>
</span>
<label class="
label
bundle-option__label
" for="qty1">
Card Verification Number
</label>
<input class="input__field " id="qty1" name="qty1" type="number" placeholder="" min="0">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row checkout__row">
<div class="col-xs-12 col-lg-3">
<h6 class="heading heading--second-level">Adres</h6>
<p class="text-small">Het factuur- en bezorgadres voor jouw bestelling.</p>
</div>
<div class="col-xs-12 col-lg-9">
<div class="radio ">
<fieldset class="radio__fieldset" aria-labelledby="legend-id">
<legend class="radio__legend" id="legend-id">
Choose option
</legend>
<div class="radio__handler">
<input type="radio" id="id1" name="radio1" class="radio__field">
<label for="id1" class="radio__label">
<span class="radio__icon"></span>
Option one
</label>
</div>
<div class="radio__handler">
<input type="radio" id="id2" name="radio1" class="radio__field">
<label for="id2" class="radio__label">
<span class="radio__icon"></span>
Option two
</label>
</div>
<div class="radio__handler">
<input type="radio" id="id3" name="radio1" class="radio__field">
<label for="id3" class="radio__label">
<span class="radio__icon"></span>
Options three
</label>
</div>
</fieldset>
</div>
<div class="grid-container">
<div class="row">
<div class="col-xs-12 col-lg-4">
<div class="input ">
<span class="form-check" aria-label="form-check-qty1">
<svg class="icon brief-info__icon" role="img">
<title>USP Check</title>
<use xlink:href="/images/icons-sprite.svg#usp-check"></use>
</svg>
</span>
<label class="
label
bundle-option__label
" for="qty1">
Card Verification Number
</label>
<input class="input__field " id="qty1" name="qty1" type="number" placeholder="" min="0">
</div>
</div>
<div class="col-xs-12 col-lg-4">
<div class="input ">
<span class="form-check" aria-label="form-check-qty1">
<svg class="icon brief-info__icon" role="img">
<title>USP Check</title>
<use xlink:href="/images/icons-sprite.svg#usp-check"></use>
</svg>
</span>
<label class="
label
bundle-option__label
" for="qty1">
Card Verification Number
</label>
<input class="input__field " id="qty1" name="qty1" type="number" placeholder="" min="0">
</div>
</div>
<div class="col-xs-12 col-lg-4">
<div class="input ">
<span class="form-check" aria-label="form-check-qty1">
<svg class="icon brief-info__icon" role="img">
<title>USP Check</title>
<use xlink:href="/images/icons-sprite.svg#usp-check"></use>
</svg>
</span>
<label class="
label
bundle-option__label
" for="qty1">
Card Verification Number
</label>
<input class="input__field " id="qty1" name="qty1" type="number" placeholder="" min="0">
</div>
</div>
</div>
</div>
<hr />
<div class="checkbox ">
<input type="checkbox" id="checkbox" name="checkbox-name" class="checkbox__field ">
<svg class="checkbox__icon ">
<use xlink:href="/images/icons-sprite.svg#checked"></use>
</svg>
<label for="checkbox" class="checkbox__label ">
1 x Sprite Yoga Strap 8 foot
</label>
</div>
<div class="checkbox ">
<input type="checkbox" id="checkbox" name="checkbox-name" class="checkbox__field ">
<svg class="checkbox__icon ">
<use xlink:href="/images/icons-sprite.svg#checked"></use>
</svg>
<label for="checkbox" class="checkbox__label ">
1 x Sprite Yoga Strap 8 foot
</label>
</div>
</div>
</div>
<div class="row checkout__row checkout__navigation">
<div class="col-xs-6">
<a href="#" class="checkout__arrow-link checkout__arrow-link--left">
<svg class="icon icons__single-icon" role="img">
<title>left</title>
<use xlink:href="/images/icons-sprite.svg#icon_arrow-left"></use>
</svg>
terug naar winkelmandje
</a>
</div>
<div class="col-xs-6">
<a href="#" class="checkout__arrow-link checkout__arrow-link--right">
volgende stap: verzendmethodes
<svg class="icon icons__single-icon" role="img">
<title>right</title>
<use xlink:href="/images/icons-sprite.svg#icon_arrow-right"></use>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-md-5 col-xl-4">
<div class="card card--checkout checkout__summary">
<h2 class="heading heading--first-level">Jouw bestelling</h2>
<div class="row checkout__summary--products">
<div class="col-xs-6">
1x Zwart Politieshirt
<span class="text-small">maat M</span>
</div>
<div class="col-xs-6 end-xs">
€37,95
</div>
</div>
<div class="row checkout__summary--subtotals">
<div class="col-xs-6">
Subtotaal
</div>
<div class="col-xs-6 end-xs">
€37,95
</div>
</div>
<div class="row checkout__summary--shipping">
<div class="col-xs-6">
Verzending
</div>
<div class="col-xs-6 end-xs">
Gratis
</div>
</div>
<div class="row checkout__summary--totals">
<div class="col-xs-6">
Totaalbedrag
</div>
<div class="col-xs-6 end-xs">
€37,95
</div>
</div>
<div class="row">
<button class="button button--fluid" type="button">
I am a button
</button>
</div>
<div class="row center-xs checkout__summary--shipping-options">
<a class="link--secondary" href="#">
verzenden of ophalen?
</a>
</div>
</div>
<div class="center-xs checkout__delivery-time">
<div class="lazyload-wrapper ">
<img class="image lazyload " src="" data-src="" alt="">
</div>
verwachte leverdatum: morgen (5 juli)
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-7 col-xl-8">
<div class="checkout__footer">
<div class="checkout__footer--image">
<svg class="icon " role="img">
<use xlink:href="/images/icons-sprite.svg#icon_ideal"></use>
</svg>
</div>
<div class="checkout__footer--image">
<svg class="icon " role="img">
<use xlink:href="/images/icons-sprite.svg#icon_mastercard"></use>
</svg>
</div>
<div class="checkout__footer--image">
<svg class="icon icon--horzontal" role="img">
<use xlink:href="/images/icons-sprite.svg#icon_thuiswinkel-waarborg"></use>
</svg>
</div>
<div class="checkout__footer--image">
<svg class="icon icon--horzontal-small" role="img">
<use xlink:href="/images/icons-sprite.svg#icon_kiyoh"></use>
</svg>
</div>
<div class="checkout__footer--image">
<svg class="icon " role="img">
<use xlink:href="/images/icons-sprite.svg#icon_post-nl"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="page-wrapper {{ class }}">
{{ render '@header--checkout' }}
<div class="container">
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-7 col-xl-8">
<div class="card card--checkout">
<div class="row checkout__row">
<div class="col-xs-12 col-lg-3">
<h6 class="heading heading--second-level">Contact gegevens</h6>
<p class="text-small">Zodat we je op de hoogte kunnen houden tijdens het bestelproces.</p>
</div>
<div class="col-xs-12 col-lg-9">
{{ render '@input' }}
{{ render '@input' }}
</div>
</div>
<div class="row checkout__row">
<div class="col-xs-12 col-lg-3">
<h6 class="heading heading--second-level">Aan wie?</h6>
<p class="text-small">Naar wie mogen we het pakketje sturen?</p>
</div>
<div class="col-xs-12 col-lg-9">
{{ render '@radio' }}
<div class="grid-container">
<div class="row">
<div class="col-xs-12 col-lg-6">
{{ render '@input' }}
</div>
<div class="col-xs-12 col-lg-6">
{{ render '@input' }}
</div>
</div>
</div>
</div>
</div>
<div class="row checkout__row">
<div class="col-xs-12 col-lg-3">
<h6 class="heading heading--second-level">Adres</h6>
<p class="text-small">Het factuur- en bezorgadres voor jouw bestelling.</p>
</div>
<div class="col-xs-12 col-lg-9">
{{ render '@radio' }}
<div class="grid-container">
<div class="row">
<div class="col-xs-12 col-lg-4">
{{ render '@input' }}
</div>
<div class="col-xs-12 col-lg-4">
{{ render '@input' }}
</div>
<div class="col-xs-12 col-lg-4">
{{ render '@input' }}
</div>
</div>
</div>
<hr/>
{{ render '@checkbox' }}
{{ render '@checkbox' }}
</div>
</div>
<div class="row checkout__row checkout__navigation">
<div class="col-xs-6">
<a href="#" class="checkout__arrow-link checkout__arrow-link--left">
{{ render '@icon' arrowLeft }}
terug naar winkelmandje
</a>
</div>
<div class="col-xs-6">
<a href="#" class="checkout__arrow-link checkout__arrow-link--right">
volgende stap: verzendmethodes
{{ render '@icon' arrowRight }}
</a>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-md-5 col-xl-4">
<div class="card card--checkout checkout__summary">
<h2 class="heading heading--first-level">Jouw bestelling</h2>
<div class="row checkout__summary--products">
<div class="col-xs-6">
1x Zwart Politieshirt
<span class="text-small">maat M</span>
</div>
<div class="col-xs-6 end-xs">
€37,95
</div>
</div>
<div class="row checkout__summary--subtotals">
<div class="col-xs-6">
Subtotaal
</div>
<div class="col-xs-6 end-xs">
€37,95
</div>
</div>
<div class="row checkout__summary--shipping">
<div class="col-xs-6">
Verzending
</div>
<div class="col-xs-6 end-xs">
Gratis
</div>
</div>
<div class="row checkout__summary--totals">
<div class="col-xs-6">
Totaalbedrag
</div>
<div class="col-xs-6 end-xs">
€37,95
</div>
</div>
<div class="row">
{{ render '@button--fluid' }}
</div>
<div class="row center-xs checkout__summary--shipping-options">
<a class="link--secondary" href="#">
verzenden of ophalen?
</a>
</div>
</div>
<div class="center-xs checkout__delivery-time">
{{ render '@image' postnl }} verwachte leverdatum: morgen (5 juli)
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-7 col-xl-8">
<div class="checkout__footer">
<div class="checkout__footer--image">
{{ render '@icon' ideal }}
</div>
<div class="checkout__footer--image">
{{ render '@icon' mastercard }}
</div>
<div class="checkout__footer--image">
{{ render '@icon' thuiswinkelwaarborg }}
</div>
<div class="checkout__footer--image">
{{ render '@icon' kiyoh }}
</div>
<div class="checkout__footer--image">
{{ render '@icon' postnl }}
</div>
</div>
</div>
</div>
</div>
</div>
{
"class": "checkout",
"arrowLeft": {
"id": "icon_arrow-left",
"title": "left",
"class": "icons__single-icon"
},
"arrowRight": {
"id": "icon_arrow-right",
"title": "right",
"class": "icons__single-icon"
},
"ideal": {
"id": "icon_ideal"
},
"mastercard": {
"id": "icon_mastercard"
},
"thuiswinkelwaarborg": {
"id": "icon_thuiswinkel-waarborg",
"class": "icon--horzontal"
},
"kiyoh": {
"id": "icon_kiyoh",
"class": "icon--horzontal-small"
},
"postnl": {
"id": "icon_post-nl"
}
}
@import 'checkout/checkout';
.checkout {
.container {
max-width: 1080px;
margin: 0 auto;
.header--checkout {
a.logo {
max-width: 100%;
margin-top: 1rem;
@include mq($screen__m) {
max-width: 381px;
}
.logo__image {
height: auto;
width: 100%;
}
}
}
.title-wrapper {
margin: 0;
}
}
}
//$input__field-border-radius : $form-elements-radius !default;
//$input__field-border : 1px solid $form-elements-border-color !default;
//
//.checkout-container {
// min-height: 50vh;
//}
//
//.authentication-wrapper {
// float: right;
// margin-top: -90px;
// position: relative;
// z-index: 1;
//
// @media (min-width: 768px) {
// .authentication-wrapper {
// width: 33.33333333%;
// text-align: right;
// }
// }
//
// .modal-custom .action-close {
// margin: 0;
// }
//
// .modal-header {
// margin: $spacer--1;
// }
//}
//
//.authentication-dropdown {
// background-color: #fff;
// border: 1px solid #aeaeae;
// position: absolute;
// text-align: left;
// top: 100%;
// transform: scale(1, 0);
// transform-origin: 0 0;
// transition: transform linear 0.1s, visibility 0s linear 0.1s;
// visibility: hidden;
// width: 30rem;
// right: 0;
// padding: $spacer--1;
//
// &._show {
// z-index: 100;
// transform: scale(1, 1);
// transition: transform linear 0.1s, visibility 0s linear 0s;
// visibility: visible;
// .opc-block-summary.checkout-summary {
// border: 0;
// padding: 0 $spacer--medium;
// margin: 0;
// }
// .opc-block-shipping-information {
// border-left: 0;
// border-right: 0;
// border-radius: 0;
// }
// }
//
// .login-popup-buttons {
// display: flex;
// }
//}
//
//.opc-wrapper {
// margin: 0 0 20px;
//
// @include mq($screen-l) {
// width: 66.66666667%;
// float: left;
// order: 1;
// padding-right: 30px;
// }
//}
//
//.opc-estimated-wrapper {
// background: #fff;
// border-bottom: 1px solid #ccc;
// border-top: 1px solid #ccc;
// margin: 0 0 15px;
// padding: 18px 15px;
// button {
// background: $form-select-background;
// border: 1px solid #e5d5d5;
// padding: $spacer--medium;
// }
// @include mq($screen-l) {
// display: none;
// }
//}
//
//.opc-sidebar {
// @include mq($screen-xs, $screen-l) {
// bottom: 0;
// min-width: 0;
// position: fixed;
// right: 0;
// top: 0;
// visibility: hidden;
// opacity: 0;
// transition: visibility 0s 0.3s, opacity 0.3s ease;
// left: 44px;
// z-index: 900;
// background-color: $white;
// }
//
// @include mq($screen-l) {
// width: 33.33333333%;
// float: right;
// order: 2;
// }
//
// &._show {
// visibility: visible;
// opacity: 1;
// }
//}
//
//.page-layout-checkout {
// background-color: $white;
//
// & .loading-mask {
// bottom: 0;
// left: 0;
// margin: auto;
// position: fixed;
// right: 0;
// top: 0;
// z-index: 1;
// background: rgba(255, 255, 255, 0.5);
// }
//
// & .abs-reset-list,
// & .opc,
// & .checkout-agreements-items {
// margin: 0;
// padding: 0;
// list-style: none;
// }
//
// & .field-tooltip {
// cursor: pointer;
// position: absolute;
// right: $spacer--05;
// top: 0;
// display: flex;
// flex-direction: column;
// justify-content: center;
// height: 40px;
//
// & .action-help {
// width: 25px;
// display: block;
// height: 25px;
//
// & svg {
// width: 100%;
// height: 100%;
// }
// }
// }
//
// & .action.primary {
// transition: $transition-base;
//
// &:hover {
// transition: $transition-base;
// }
// }
//
// & .blank.tig-postnl-field-group {
// display: flex;
// margin: 0;
// }
//}
//
//.checkout {
// .product-item-details {
// padding: 0 0 0 $spacer--2;
// font-family: $font-family-saira;
// }
//
// .details-qty {
// color: $gray;
// font-size: $font-size-base;
// margin: $spacer--05 0 0;
// }
//
// .subtotal {
// color: $gray;
// font-size: $font-size-base;
// }
//
// .product .options {
// font-size: 12px;
// color: $gray-font;
// margin: $spacer--05 0 0;
// cursor: pointer;
//
// &:focus,
// &:hover {
// color: $red;
// text-decoration: underline;
// }
// }
//
// .product .options .active {
// color: $red;
// text-decoration: underline;
// }
//
// .admin__control-fields {
// margin: $spacer--15 0;
// width: 100%;
// padding: 0;
// border: 0;
// }
//
// .note {
// color: $gray;
// }
//
// .checkout .select__field--native {
// border-radius: 3px;
// }
//}
//
//.step-content {
// & label,
// & span {
// font-family: $font-family-saira;
// }
//
// & .no-quotes-block {
// font-family: $font-family-saira;
// }
//
// .step-title {
// font-size: 16px;
// color: $red;
// }
//
// .input__field.flekto_nl_zip_input {
// opacity: 0.5;
// }
//}
//.address-autofill-nl-house-number label {
// width: 180px;
// display: block;
//}
//.checkout-summary {
// margin-top: $spacer--large;
// font-size: $font-size-medium;
//
// @include mq($screen-m) {
// margin-top: 0;
// }
//
// &__title {
// font-size: $font-size-medium;
// color: $red;
// margin: $spacer--15;
// }
//
// &__item {
// display: flex;
// justify-content: space-between;
// padding: $spacer--1 0;
//
// @include mq($screen-m) {
// padding: $spacer--1 0 $spacer--4;
// }
//
// @include mq($screen-l) {
// padding: $spacer--1 0;
// }
//
// &__size {
// font-size: $font-size-small;
// color: $black;
// }
//
// &:last-child {
// @include mq($screen-l) {
// border-bottom: $input__field-border;
// }
// }
// }
//
// &__items {
// margin: $spacer--3 $spacer--1 0;
//
// @include mq($screen-l) {
// margin: 0;
// }
// }
//}
//
//.checkout-shipping-method {
// margin: $spacer--2 0 0;
//}
//
//.shipping-information {
// margin-top: $spacer;
//
// &__title {
// display: flex;
// justify-content: space-between;
// }
//}
//
//.cart-totals {
// margin-top: $spacer;
// padding: $spacer 0;
// border-bottom: 1px solid $black;
//
// & .grand {
// font-size: large;
// font-weight: $font-weight-bold;
// }
//
// & .totals-tax {
// display: none;
// }
//}
//
//.cart-totals {
// margin-top: $spacer--1;
//}
//
//.opc {
// .actions-toolbar {
// margin: $spacer 0;
// display: flex;
// justify-content: flex-end;
//
// .primary {
// width: 100%;
//
// .button {
// width: 100%;
// max-width: 100%;
// @include mq($screen-l) {
// width: auto;
// }
// }
// }
//
// button {
// padding: 0 32px;
// }
// }
//}
//
//.opc-progress-bar {
// margin: $spacer--2 0;
// counter-reset: i;
// font-size: 0;
// padding: 0;
// font-family: "Saira";
//}
//
//.opc-progress-bar-item {
// margin: 0 0 10px;
// display: inline-block;
// position: relative;
// text-align: center;
// vertical-align: top;
// width: 50%;
//}
//
//.opc-progress-bar-item:before {
// background: #e4e4e4;
// top: 19px;
// content: '';
// height: 7px;
// left: 0;
// position: absolute;
// width: 100%;
//}
//
//.opc-progress-bar-item:first-child:before {
// border-radius: 6px 0 0 6px;
//}
//
//.opc-progress-bar-item:last-child:before {
// border-radius: 0 6px 6px 0;
//}
//
//.opc-progress-bar-item > span {
// display: inline-block;
// padding-top: 45px;
// width: 100%;
// word-wrap: break-word;
// color: #e4e4e4;
// font-weight: 300;
// font-size: $font-size-base;
//}
//
//.opc-progress-bar-item > span:before,
//.opc-progress-bar-item > span:after {
// background: #e4e4e4;
// height: 38px;
// margin-left: -19px;
// width: 38px;
// border-radius: 50%;
// content: '';
// left: 50%;
// position: absolute;
// top: 0;
//}
//
//.opc-progress-bar-item > span:after {
// background: #fff;
// height: 26px;
// margin-left: -13px;
// top: 6px;
// width: 26px;
// content: counter(i);
// counter-increment: i;
// color: #333;
// font-weight: 600;
// font-size: $font-size-base;
// font-family: $font-family-saira;
// display: flex;
// justify-content: center;
// align-items: center;
//}
//
//.opc-progress-bar-item._active:before {
// background: $red;
//}
//
//.opc-progress-bar-item._active > span {
// color: #333;
//}
//
//.opc-progress-bar-item._active > span:before {
// background: $red;
//}
//
//.opc-progress-bar-item._complete {
// cursor: pointer;
//}
//
//.opc-progress-bar-item._complete > span {
// color: #333;
//}
//
//._with-tooltip {
// position: relative;
//}
//
//.action-help {
//
// & + .field-tooltip-content {
// display: none;
// }
//
// &._active {
//
// & + .field-tooltip-content {
// display: block;
// left: unset;
// right: $spacer--2;
// top: -4px;
//
// @include mq($screen-m) {
// left: 38px;
// right: unset;
// top: -9px;
// }
// }
// }
//}
//
//@include mq($screen-l) {
// .opc-summary-wrapper .action-close {
// display: none;
// }
//}
//
//.field-tooltip-content {
// background: $white;
// border: 1px solid $red;
// border-radius: 4px;
// font-size: 14px;
// padding: 12px;
// width: 270px;
// display: none;
// left: 38px;
// position: absolute;
// text-transform: none;
// top: -9px;
// word-wrap: break-word;
// z-index: 2;
//}
//
//.checkout-index-index .scroll-top--wrapper {
// display: none;
//}
//
//.payment-method {
//
// & .payment-method-title {
// display: flex;
// justify-content: flex-start;
// align-items: center;
// padding: $spacer--1 0;
//
// & .radio {
// margin: 0;
// }
//
// & .label {
// display: flex;
// margin: 0 0 0 $spacer--1;
// align-items: center;
//
// & img {
// width: 50px;
// margin-right: $spacer--1;
// }
// }
// }
//
// & .payment-method-content {
// display: none;
// }
//}
//
//.modals-overlay {
// z-index: 899;
//}
//
//.modal-slide,
//.modal-popup {
// bottom: 0;
// left: 0;
// min-width: 0;
// position: fixed;
// right: 0;
// top: 0;
// visibility: hidden;
//}
//
//.modal-slide._show,
//.modal-popup._show {
// visibility: visible;
//}
//
//.modal-slide._show .modal-inner-wrap,
//.modal-popup._show .modal-inner-wrap {
// transform: translate(0, 0);
//}
//
//.modal-slide .modal-inner-wrap,
//.modal-popup .modal-inner-wrap {
// background-color: #fff;
// box-shadow: 0 0 12px 2px rgba(0, 0, 0, 0.35);
// opacity: 1;
// pointer-events: auto;
//}
//
//.modal-slide {
// left: 44px;
// z-index: 900;
//}
//
//.modal-slide._show .modal-inner-wrap {
// transform: translateX(0);
//}
//
//.modal-slide .modal-inner-wrap {
// height: 100%;
// overflow-y: auto;
// position: static;
// transform: translateX(100%);
// transition-duration: 0.3s;
// transition-property: transform, visibility;
// transition-timing-function: ease-in-out;
// width: auto;
//}
//
//.modal-slide._inner-scroll .modal-inner-wrap {
// overflow-y: visible;
// display: flex;
// flex-direction: column;
//}
//
//.modal-slide._inner-scroll .modal-header,
//.modal-slide._inner-scroll .modal-footer {
// flex-grow: 0;
// flex-shrink: 0;
//}
//
//.modal-slide._inner-scroll .modal-content {
// overflow-y: auto;
//}
//
//.modal-slide._inner-scroll .modal-footer {
// margin-top: auto;
//}
//
//.modal-slide .modal-header,
//.modal-slide .modal-content,
//.modal-slide .modal-footer {
// padding: 0 2.6rem 2.6rem;
//}
//
//.modal-slide .modal-header {
// padding-bottom: 2.1rem;
// padding-top: 2.1rem;
//}
//
//.modal-popup {
// z-index: 900;
// left: 0;
// overflow-y: auto;
//}
//
//.modal-popup._show .modal-inner-wrap {
// transform: translateY(0);
//}
//
//.modal-popup .modal-inner-wrap {
// width: 93%;
// margin: 5rem auto;
// display: flex;
// flex-direction: column;
// box-sizing: border-box;
// height: auto;
// left: 0;
// position: absolute;
// right: 0;
// transform: translateY(-200%);
// transition-duration: 0.2s;
// transition-property: transform, visibility;
// transition-timing-function: ease;
//
// @include mq($screen-m) {
// width: 75%;
// }
//}
//
//.modal-popup._inner-scroll {
// overflow-y: visible;
//}
//
//.modal-popup._inner-scroll .modal-inner-wrap {
// max-height: 90%;
//}
//
//.modal-popup._inner-scroll .modal-content {
// overflow-y: auto;
//}
//
//.modal-popup .modal-header,
//.modal-popup .modal-content,
//.modal-popup .modal-footer {
// padding-left: 1rem;
// padding-right: 1rem;
//
// @include mq($screen-m) {
// padding-left: 3rem;
// padding-right: 3rem;
// }
//}
//
//.modal-popup .modal-header,
//.modal-popup .modal-footer {
// flex-grow: 0;
// flex-shrink: 0;
//}
//
//.modal-popup .modal-header {
// padding-bottom: 1.2rem;
// padding-top: 3rem;
//}
//
//.modal-popup .modal-footer {
// margin-top: auto;
// padding-bottom: 3rem;
// padding-top: 3rem;
//}
//
//.modal-popup .modal-footer-actions {
// text-align: right;
//}
//
//.modal-custom .action-close,
//.modal-popup .action-close,
//.modal-slide .action-close {
// background-image: none;
// border: 0;
// box-shadow: none;
// line-height: inherit;
// margin: 0;
// padding: 0;
// text-shadow: none;
// font-weight: 400;
// text-decoration: none;
// position: absolute;
// right: 0;
// top: 0;
//}
//
//.modal-custom .action-close:focus,
//.modal-popup .action-close:focus,
//.modal-slide .action-close:focus,
//.modal-custom .action-close:active,
//.modal-popup .action-close:active,
//.modal-slide .action-close:active {
// background: none;
// border: none;
//}
//
//.modal-custom .action-close:hover,
//.modal-popup .action-close:hover,
//.modal-slide .action-close:hover {
// background: none;
// border: none;
//}
//
//.modal-custom .action-close.disabled,
//.modal-popup .action-close.disabled,
//.modal-slide .action-close.disabled,
//.modal-custom .action-close[disabled],
//.modal-popup .action-close[disabled],
//.modal-slide .action-close[disabled],
//fieldset[disabled] .modal-custom .action-close,
//fieldset[disabled] .modal-popup .action-close,
//fieldset[disabled] .modal-slide .action-close {
// cursor: not-allowed;
// pointer-events: none;
// opacity: 0.5;
//}
//
//.modal-custom .action-close > span,
//.modal-popup .action-close > span,
//.modal-slide .action-close > span {
// border: 0;
// clip: rect(0, 0, 0, 0);
// height: 1px;
// margin: -1px;
// overflow: hidden;
// padding: 0;
// position: absolute;
// width: 1px;
//}
//
//.modal-custom .action-close:before,
//.modal-popup .action-close:before,
//.modal-slide .action-close:before {
// font-size: 32px;
// line-height: 32px;
// color: #8f8f8f;
// margin: 0;
// vertical-align: top;
// display: inline-block;
// font-weight: normal;
// overflow: hidden;
// speak: none;
// text-align: center;
//}
//
//.modal-custom .action-close:hover:before,
//.modal-popup .action-close:hover:before,
//.modal-slide .action-close:hover:before {
// color: inherit;
//}
//
//.modal-custom .action-close:active:before,
//.modal-popup .action-close:active:before,
//.modal-slide .action-close:active:before {
// color: inherit;
//}
//
//.modal-custom .action-close:hover:before,
//.modal-popup .action-close:hover:before,
//.modal-slide .action-close:hover:before {
// color: #1a1a1a;
//}
//
//.modal-custom .action-close {
// margin: $spacer--15;
//}
//
//.modal-popup .modal-title {
// border-bottom: 1px solid #c1c1c1;
// font-weight: 300;
// padding-bottom: 10px;
// font-size: 26px;
// margin-bottom: 0;
// min-height: 1em;
// word-wrap: break-word;
//}
//
//.modal-popup .action-close {
// padding: 10px;
//}
//
//.modal-slide .action-close {
// padding: 1.1rem 2rem;
//}
//
//.modal-slide .page-main-actions {
// margin-bottom: -12.9rem;
// margin-top: 2.1rem;
//}
//
//.modals-overlay {
// background-color: rgba(51, 51, 51, 0.55);
// bottom: 0;
// left: 0;
// position: fixed;
// right: 0;
// top: 0;
//}
//
//body._has-modal-custom .modal-custom-overlay {
// background: rgba(0, 0, 0, 0.55);
// height: 100vh;
// left: 0;
// position: fixed;
// top: 0;
// width: 100vw;
// z-index: 899;
//}
//
//.checkout-payment-method .payment-method._active .payment-method-content {
// display: block;
//}
//
//.table-checkout-shipping-method {
// width: 100%;
// margin-bottom: $spacer--medium;
// .col {
// font-family: $font-family-saira;
// margin-right: $spacer--medium;
// }
// thead {
// display: none;
// }
// .shiptimize-choose-pickup button {
// height: $spacer--l;
// font-family: $font-family-saira;
// }
// .shiptimize-pickup__description {
// margin: 0;
// }
// .radio__label {
// width: $spacer--l;
// margin: 0;
// }
//}
//
//.modal-content img {
// max-height: 350px;
// width: auto;
// margin: 0 auto;
//}
//
//.field {
// &[name="shippingAddress.firstname"],
// &[name="shippingAddress.lastname"],
// &.address-autofill-nl-postcode,
// &.address-autofill-nl-house-number,
// &.address-autofill-nl-house-number-select,
// &[name="shippingAddress.city"],
// &[name="shippingAddress.postcode"],
// &[name="shippingAddress.street.0"],
// &[name="shippingAddress.street.1"],
// &[name="shippingAddress.street.2"],
// &[name="shippingAddress.street.3"] {
// float: left;
// width: 49%;
// display: flex;
// flex-direction: column;
// }
// &[name="shippingAddress.street.1"],
// &[name="shippingAddress.street.2"] {
// width: 24%;
// }
// &.address-autofill-nl-postcode,
// &.address-autofill-nl-house-number,
// &.address-autofill-nl-house-number-select {
// width: 100%;
// margin: 0;
// @include mq($screen-m) {
// width: 32%;
// }
// }
// &[name="shippingAddress.firstname"],
// &.address-autofill-nl-postcode,
// &[name="shippingAddress.postcode"],
// &[name="shippingAddress.country_id"],
// &[name="shippingAddress.street.0"] {
// margin-right: 1%;
// }
// &[name="shippingAddress.lastname"],
// &.address-autofill-nl-house-number,
// &.address-autofill-nl-house-number-select,
// &[name="shippingAddress.city"],
// &[name="shippingAddress.street.1"],
// &[name="shippingAddress.street.2"] {
// margin-left: 1%;
// }
//}
//span.button-service-point {
// text-decoration: underline;
// cursor: pointer;
//}
//.address-autofill-intl-input {
// margin-top: $spacer--3;
//
// label {
// span {
// font-weight: bold;
// }
// }
// input {
// &.input-text {
// &.postcodenl-autocomplete-address-input {
// border-radius: $form-elements-radius;
// padding: 10px;
// width: 100%;
// border: $input__field-border;
// box-shadow: none;
// &.postcodenl-autocomplete-address-input-blank {
// background: transparent;
// }
// }
// }
// }
//}
//.opc-block-summary.checkout-summary {
// padding: $spacer;
// border: $input__field-border;
// border-radius: $form-elements-radius;
//}
//.button--secondary[data-bind="click: cancelAddressEdit"] {
// background: transparent;
// color: $color-danger;
// margin-left: $spacer--medium;
//
// &:hover {
// background: transparent;
// color: $color-inverse;
// }
//}
//.payment-method-title.field.choice form .choice {
// display: grid;
// grid-template-columns: auto 1fr 1fr;
// grid-row-gap: $spacer--medium;
// align-items: center;
// margin-left: $spacer--medium;
// img.payment-icon {
// max-width: $spacer--semi-large;
// }
//}
//.opc-block-shipping-information {
// padding: $spacer;
// border: $input__field-border;
// border-radius: $form-elements-radius;
//
// .shipping-information {
// .ship-to,
// .ship-via {
// padding: $spacer;
// .shipping-information-title {
// display: flex;
// justify-content: space-between;
// font-weight: 600;
// button.action {
// width: auto;
// background: transparent;
// border: none;
// color: $color-primary;
// font-size: $font-size-small;
// }
// }
// .shipping-information-content {
// font-style: italic;
// }
// }
// }
//}
//.checkout-agreement.field.choice.required {
// display: flex;
// justify-content: flex-start;
// column-gap: $spacer;
// align-items: baseline;
// margin-top: $spacer--medium;
// label.label {
// display: flex;
// span {
// text-align: left;
// }
// button.action.action-show {
// background: transparent;
// border: none;
// }
// }
//}
There are no notes for this item.