wickes-css2 2.117.0-develop.2 → 2.117.0-develop.3

package/src/page_checkout_sign-in.html

@@ -1,53 +0,0 @@
-{{#extend "checkout" pageClass="page_checkout" title="Checkout - Sign in" fullWidth=true}}
- {{#content "steps"}}
-    {{> steps active-step-index="0" }}
- {{/content}}
-
-{{#content "main"}}
-<div class="checkout-sign-in">
-  <form class="checkout-sign-in__inner" novalidate>
-    <h3 class="checkout-sign-in__header">Secure checkout</h3>
-    Welcome to Wickes secure checkout, please enter your details below
-    <div class="warning-required">Required fields</div>
-    {{> form-row type="email" id="checkout-email" label="Email address" required="true"}}
-    <h5>Do you have a password?</h5>
-    <div>If you sign in, it will be quicker for you to complete your order</div>
-    <div class="checkout-sign-in__checkbox-wrap">
-      {{> radiobutton label="No, checkout as guest" name="sign-in-password" id="sign-in-check-1" checked="true" value="guest"}}
-    </div>
-    <div class="checkout-sign-in__checkbox-wrap">
-      {{> radiobutton label="Yes, my password is..." name="sign-in-password" id="sign-in-check-password-switch" value="logged-in"}}
-      <div class="checkout-sign-in__password-wrap" id="checkout-sign-in-password" style="display: none">
-        {{> form-row type="password" id="password" label="Password" label-hidden="true" required="true"}}
-        <a href="#" id="checkout-sign-in-forgot-link" class="link-secondary" data-toggle="modal" data-target="#modal-request-pass">Forgot your password?</a>
-      </div>
-    </div>
-
-    <div class="form-row form-row__action">
-      <div class="form-row__col-btn">
-        <button class="btn btn-primary checkout-sign-in__btn" id="checkout-sign-in-submit">
-          <span class="btn__text">Continue</span>
-        </button>
-      </div>
-    </div>
-  </form>
-</div>
-{{/content}}
-
-{{#content "foot" mode="append"}}
-<script defer src="./js/page/checkout-sign-in.js"></script>
-
-{{#extend "modal" id="modal-request-pass" title="Forgotten password" fullWidth=true}}
-  {{#content "body"}}
-    {{#extend "request-pass" id="form-forgotten-password-popup" button-text="Request your new password"}}
-      {{#content "info-top"}}
-        Please enter the email address for your Wickes account.<br />
-        A link to change your password will be emailed to you.
-      {{/content}}
-    {{/extend}}
-  {{/content}}
-{{/extend}}
-
-{{/content}}
-
-{{/extend}}

package/src/page_in-store_MVP_order-summary.html

@@ -1,19 +0,0 @@
-{{#extend "instore-checkout" pageClass="page_in-store_order-summary" title="In Store Checkout" logout=true isAsideSticky="true"}}
-{{#content "head" mode="append"}}
-<link type="text/css" rel="stylesheet" href="./css/pages/page_in-store_MVP_order-summary.css">
-{{/content}}
-{{#content "steps"}}
-{{> steps active-step-index="3" }}
-{{/content}}
-
-{{#content "main"}}
-
-{{/content}}
-{{#content "aside"}}
-{{> checkout_order-summary label="Subtotal: " submit=true }}
-{{/content}}
-{{#content "foot" mode="append"}}
-{{> in-store-terms-and-conditions-modal}}
-<script defer src="./js/page/instore-checkout.js"></script>
-{{/content}}
-{{/extend}}

package/src/page_in-store_payment-checkout.html

@@ -1,35 +0,0 @@
-{{#extend "instore-checkout" pageClass="page_checkout-payment-details" title="In Store Checkout" logout=true isAsideSticky="true"}}
-  {{#content "steps"}}
-    {{> steps active-step-index="3" }}
-  {{/content}}
-
-  {{#content "main"}}
-    <form class="checkout-payment-details__payment-method form-bg">
-
-      <div class="row">
-
-        <div class="in-store-checkout__wrapper">
-          <div class="in-store-checkout__title">Please scan the barcode at the till</div>
-          <div class="barcode__wrapper border">
-            <img src="./img/barcode.png" class="barcode__img img-fluid">
-
-            <div class="barcode__order-total">Web order total: £59.94</div>
-          </div>
-        </div>
-
-      </div>
-
-      {{> checkout-in-store-customer-details actionBlock="true" }}
-
-    </form>
-  {{/content}}
-  {{#content "aside"}}
-    {{> checkout_order-summary label="Total: "}}
-    {{> checkout_delivery }}
-    {{> checkout_supplier-delivery }}
-    {{> checkout_click-and-collect }}
-  {{/content}}
-  {{#content "foot" mode="append"}}
-    <script defer src="./js/page/instore-checkout.js"></script>
-  {{/content}}
-{{/extend}}

package/src/page_in-store_sign-in.html

@@ -1,30 +0,0 @@
-{{#extend "instore-checkout" pageClass="page_checkout" title="In Store - Sign in" fullWidth=true}}
- {{#content "steps"}}
-    {{> steps active-step-index="0" }}
- {{/content}}
-
-{{#content "main"}}
-<div class="checkout-sign-in">
-  <form class="checkout-sign-in__inner" novalidate>
-    <h3 class="checkout-sign-in__header">Secure checkout</h3>
-    Welcome to Wickes secure checkout, please enter your details below
-    <div class="warning-required">Required fields</div>
-    {{> form-row type="email" id="checkout-email" label="Customer's email address" required="true"}}
-
-    <div class="form-row form-row__action no-border">
-      <div class="form-row__col-btn">
-        <button class="btn btn-primary checkout-sign-in__btn" id="checkout-sign-in-submit">
-          <span class="btn__text">Continue</span>
-        </button>
-      </div>
-    </div>
-  </form>
-</div>
-{{/content}}
-
-{{#content "foot" mode="append"}}
-<script defer src="./js/page/checkout-sign-in.js"></script>
-
-{{/content}}
-
-{{/extend}}

package/src/page_instore_progress_bar.html

@@ -1,30 +0,0 @@
-{{#extend "checkout" pageClass="page_checkout-payment-details_guest" title="Checkout - Payment Details - Guest" isAsideSticky="true"}}
-  {{#content "steps"}}
-    {{> steps active-step-index="3" instore="true"}}
-  {{/content}}
-
-  {{#content "main"}}
-    {{> checkout-payment-details_guest }}
-    {{#extend "lines-group" name="Products delivered by Wickes" id=136589003 collapsed=false}}
-      {{#content "content"}}
-        {{#each page_shopping-cart.linesCollection}}
-          {{>order-line mod="order-line_shrink"}}
-        {{/each}}
-      {{/content}}
-    {{/extend}}
-  {{/content}}
-  {{#content "aside"}}
-      {{> checkout_order-summary label="Total: "}}
-      {{> checkout_delivery }}
-      {{> checkout_supplier-delivery }}
-      {{> checkout_click-and-collect }}
-  {{/content}}
-  {{#content "foot" mode="append"}}
-{{> checkout-voucher-remove-modal
-    shopping-cart-v2.checkout.voucher-remove-popup
-    id="voucher-remove-popup"
-}}
-    <script defer src="./js/page/checkout-payment-details.js"></script>
-    {{> checkout-terms-and-conditions-modal }}
-  {{/content}}
-{{/extend}}

package/src/page_new-checkout-forgot-password.html

@@ -1,45 +0,0 @@
-{{#extend "base" pageClass="checkout-forgotten-password" title="Forgotten password" banner="true" footerCheckoutNew="true"}}
-  {{#content "head" mode="append"}}
-    <link type="text/css" rel="stylesheet" href="./css/pages/page_new-checkout-forgot.css">
-  {{/content}}
-  {{#content "body"}}
-    <main class="container forgotten-password">
-      <h1 class="forgotten-password-header">Forgotten password</h1>
-
-      {{> notifications notification-page.success-fogotten-password withCloseBtn="true"}}
-
-      <div class="form-wrapper">
-        <div class="form-wrapper__block">
-            <form class="new-checkout-form">
-                <h3 class="new-checkout-form__header">Please enter the email for your account.</h3>
-  
-                <div class="new-checkout-form__info">
-                    A link to change your password will be emailed to you.
-                </div>
-  
-                {{> form-row type="email" id="email" label="Email address" required=true }}
-  
-                <div class="new-checkout-form__submit-block">
-                  <button class="btn btn-primary btn_full">
-                    <span class="btn__text">
-                        Request My Password
-                    </span>
-                  </button>
-                </div>
-  
-                <div class="new-checkout-form__info">
-                    For further assistance please <a href="mailto:customerservices@wickes.co.uk"">click here</a> to send an email to our customer services.
-                </div>
-  
-                <div class="warning-required">
-                    Required Field
-                </div>
-  
-            </form>
-        </div>
-      </div>
-
-
-    </main>
-  {{/content}}
-{{/extend}}

package/src/page_new-checkout-form-login-guest.html

@@ -1,105 +0,0 @@
-{{#extend "checkout-new" pageClass="new-checkout-login-guest" title="Checkout - Guest Login Wickes" fullWidth=true}}
- {{#content "steps"}}
-   {{> steps-three-steps active-step-index="0"}}
- {{/content}}
-
-{{#content "main"}}
-
-
-<div class="container">
-    <div class="form-wrapper">
-      <div class="form-wrapper__block">
-          <form class="new-checkout-form">
-              <h3 class="new-checkout-form__header">Wickes Login</h3>
-  
-              <div class="new-checkout-form__info">
-                Please enter your Wickes account email and password to login.                
-              </div>
-  
-              {{> form-row type="email" id="email" label="Email address" required=true }}
-
-              {{> form-row type="password" id="password" label="Password" required="true"}}
-  
-              <div class="new-checkout-form__submit-block">
-                <button class="btn btn-primary btn_full">
-                  <span class="btn__text">
-                    Continue
-                  </span>
-                </button>
-              </div>
-
-              <div class="question-block">
-                <div class="warning-required">
-                    Required Field
-                </div>
-
-                <a href="#" class="link-secondary forgot-link" data-toggle="modal" data-target="#modal-fogot-pass">
-                  Forgotten password
-                </a>                  
-              </div>
-  
-              <div class="btn-guest-checkout-back">
-                <a href="page_new-checkout-form-login-wickes.html" class="btn btn-secondary btn_full">
-                  <i class="fas fa-angle-left"></i>
-                  <span class="btn__text">
-                      Checkout as guest instead
-                  </span>
-                </a>
-              </div>
-  
-          </form>
-      </div>
-    </div>
-</div>
-  
-
-
-{{/content}}
-
-{{#content "foot" mode="append"}}
-<script defer src="./js/page/checkout-sign-in.js"></script>
-
-{{#extend "modal" id="modal-fogot-pass" title="Forgotten password" fullWidth=true}}
-  {{#content "body"}}
-
-  <form class="request-pass" action="#" id="checkout-form-forgotten-password-popup">
-    <div class="component">
-      <div class="request-pass__info">
-        Please add your email address, to either login if you have an existing Wickes account or checkout as a Wickes guest.</div>
-        <div class="form-row" data-row-required="" data-form-field="">
-          <label class="form-row__label form-row__label_required" for="email">Email address</label>
-          <div class="form-row__field">
-            <input type="email" class="tbx" value="" id="email" name="email">
-          </div>
-        </div>
-        <div class="form-row form-row__action">
-          <div class="form-row__col-btn">
-            <button class="btn btn-primary btn_full">
-              <span class="btn__text">Request your new password</span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </form>
-
-    <div class="modal-reset-wrap">
-      <div class="modal-reset-block">
-          <div class="modal-reset-icon">
-              <div class="modal-reset-icon__wrap">
-                  <i class="fas fa-check"></i>          
-              </div>
-          </div>
-          <div class="modal-reset-text">
-            If an account with your e-mail address exists, we'll send you an email containing your new password in the next few minutes
-          </div>
-      </div>
-    </div>
-
-
-  {{/content}}
-{{/extend}}
-
-
-{{/content}}
-
-{{/extend}}

package/src/page_new-checkout-form-login-wickes.html

@@ -1,48 +0,0 @@
-{{#extend "checkout-new" pageClass="new-checkout-login-wickes" title="Checkout - Login Wickes" fullWidth=true}}
- {{#content "steps"}}
-    {{> steps active-step-index="0" }}
- {{/content}}
-
-{{#content "main"}}
-
-
-<div class="container">
-  <div class="form-wrapper">
-    <div class="form-wrapper__block">
-        <form class="new-checkout-form">
-            <h3 class="new-checkout-form__header">Login or Guest Checkout?</h3>
-
-            <div class="new-checkout-form__info">
-              Please add your email address, to either login if you have an existing Wickes account or checkout as a Wickes guest.
-            </div>
-
-            {{> form-row type="email" id="email" label="Email address" required=true }}
-
-            <div class="new-checkout-form__submit-block">
-
-              <button class="btn btn-primary btn_full btn-guest-checkout">
-                <span class="btn__text">
-                  Checkout as a guest
-                </span>
-              </button>
-
-              <a class="btn btn-secondary btn_full" href="page_new-checkout-form-login-guest.html">
-                <span class="btn__text">
-                  I have an account, Login
-                </span>
-              </a>
-            </div>
-
-
-            <div class="warning-required">
-                Required Field
-            </div>
-
-        </form>
-    </div>
-  </div>
-</div>
-
-{{/content}}
-
-{{/extend}}

package/src/scss/components/_steps.scss

@@ -1,207 +0,0 @@
-.steps-block {
-  @include make-col(12);
-  @include make-col-ready;
-  margin-bottom: 35px;
-}
-
-.steps-wrap {
-  display: flex;
-  justify-content: space-between;
-  margin: 0;
-  padding: 0;
-  list-style-type: none;
-  font-size: 1.125rem;
-  line-height: 1.3125rem;
-
-  &__item {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-
-    &::before {
-      content: '';
-      width: 50px;
-      height: 3px;
-      background: $gray;
-      position: absolute;
-      top: 50%;
-      left: -80px;
-    }
-
-    &:first-child::before {
-      content: none;
-    }
-
-    &-icon {
-      padding: 10px;
-      border-radius: 50%;
-      border: 3px solid $gray-bg;
-      background-color: $white;
-      width: 50px;
-      height: 50px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      .icon-element {
-        position: relative;
-        height: 15px;
-        width: 15px;
-        color: $blue-ocean;
-      }
-    }
-
-    &-text {
-      display: none;
-    }
-  }
-}
-
-@include media-breakpoint-up(md) {
-  .steps-block {
-    margin: 20px 0 40px;
-  }
-
-  .steps-wrap {
-    display: flex;
-    justify-content: space-between;
-    padding: 0 0 30px;
-
-    &__item {
-      &-icon {
-        margin-right: 10px;
-        width: 66px;
-        height: 66px;
-
-        .icon-element {
-          height: 20px;
-          width: 20px;
-        }
-      }
-
-      &::before {
-        width: 20px;
-        left: -25px;
-      }
-
-      &-text {
-        display: flex;
-      }
-    }
-  }
-}
-
-@include media-breakpoint-up(lg) {
-  .steps-wrap {
-    &__item {
-      &-icon {
-        margin-right: 20px;
-      }
-
-      &::before {
-        content: '';
-        width: 50px;
-        left: -80px;
-      }
-
-      &.steps-instore {
-        &::before {
-          left: -70px;
-        }
-      }
-    }
-  }
-}
-
-@include media-breakpoint-up(xl) {
-  .steps-wrap {
-    padding-left: 100px;
-    padding-right: 100px;
-  }
-}
-
-@include media-breakpoint-only(xs) {
-  .steps-wrap {
-    &__item {
-      &::before {
-        width: 20px;
-        left: -55px;
-      }
-    }
-  }
-}
-
-@media (min-width: 320px) and (max-width: 340px) {
-  .steps-wrap {
-    &__item {
-      &::before {
-        width: 20px;
-        left: -25px;
-      }
-    }
-  }
-}
-
-@media (min-width: 340px) and (max-width: 360px) {
-  .steps-wrap {
-    &__item {
-      &::before {
-        left: -25px;
-      }
-    }
-  }
-}
-
-@media (min-width: 360px) and (max-width: 380px) {
-  .steps-wrap {
-    &__item {
-      &::before {
-        left: -34px;
-      }
-    }
-  }
-}
-
-@media (min-width: 380px) and (max-width: 425px) {
-  .steps-wrap {
-    &__item {
-      &::before {
-        left: -40px;
-      }
-    }
-  }
-}
-
-@media (min-width: 425px) and (max-width: 465px) {
-  .steps-wrap {
-    &__item {
-      &::before {
-        left: -40px;
-      }
-    }
-  }
-}
-
-$itemQuantity: 4;
-
-@while $itemQuantity >= 0 {
-  [data-active-step-index='#{$itemQuantity}'] {
-    @for $i from 0 through $itemQuantity {
-      [data-step-index='#{$i}'] {
-        font-weight: 400;
-        color: $gray-dark;
-
-        .steps-wrap__item-icon {
-          border-color: $blue-ocean;
-        }
-
-        @include media-breakpoint-down(sm) {
-          .steps-wrap__item-icon .icon-element {
-            color: $blue-ocean;
-          }
-        }
-      }
-    }
-  }
-  $itemQuantity: $itemQuantity - 1;
-}

package/src/scss/pages/_checkout_your-details.scss

@@ -1,48 +0,0 @@
-.checkout-your-details {
-  .form-row__action {
-    &_custom {
-      &::before {
-        height: 0;
-      }
-    }
-    @include media-breakpoint-down(sm) {
-      margin-top: 20px;
-    }
-  }
-
-  .row-tel {
-    margin-bottom: 30px;
-  }
-
-  .form-row__col-btn {
-    @include make-col-ready;
-
-    @include media-breakpoint-down(sm) {
-      @include make-col(12);
-      text-align: center;
-    }
-    @include media-breakpoint-up(md) {
-      @include make-col(6);
-    }
-  }
-
-  .edit-address {
-    line-height: 2.25rem;
-    font-weight: 500;
-    @include media-breakpoint-down(sm) {
-      margin-top: 20px;
-    }
-  }
-
-  &__finded-address {
-    margin-bottom: 10px;
-  }
-
-  @include media-breakpoint-down(sm) {
-    .icon-info {
-      width: 40px;
-      height: 40px;
-      line-height: 40px;
-    }
-  }
-}

package/src/scss/pages/page_in-store_MVP_order-summary-submitted.scss

@@ -1,14 +0,0 @@
-@import '../helpers/helpers';
-
-.in-store_order-summary-sub {
-  .page-header {
-    &::before {
-      content: none;
-    }
-
-    &__next-steps {
-      font-size: 1.5em;
-      text-align: center;
-    }
-  }
-}