wickes-css2 2.94.0-develop.7 → 2.94.0-develop.8

package/src/scss/pages/page_checkout_delivery-new.scss

@@ -5,86 +5,18 @@
 @import '../components/marketing-preferences';
 
 .page_checkout-delivery-new {
-  .right-aside {
-    .summary {
-      .checkout-title__title {
-        color: $blue-ocean;
-        font-weight: 400;
-        line-height: 1.75rem;
-      }
-
-      &__aside {
-        padding: 12px 30px 0;
-
-        .checkout-info-wrap {
-          padding: 0;
-        }
-
-        .checkout-widget {
-          padding: 20px 0 0;
-
-          &__details {
-            padding-top: 20px;
-            font-size: 1rem;
-
-            .checkout-widget {
-              &__item {
-                display: flex;
-                justify-content: space-between;
-                font-size: 1rem;
-                line-height: 1.125rem;
-                font-weight: 400;
-                margin-bottom: 20px;
-                padding: 0;
-
-                &-bold {
-                  font-weight: 500;
-                  margin-bottom: 20px;
-                }
-
-                &-vat {
-                  font-size: .75rem;
-                  margin-top: -15px;
-                }
-              }
-
-
-              &__details-discount {
-                order: 1;
-              }
-            }
-          }
-
-          &__total {
-            border: 0;
-            display: flex;
-            justify-content: space-between;
-            margin-left: -25px;
-            margin-right: -25px;
-            margin-bottom: 0;
-            padding: 20px 25px;
-            color: #fff;
-            background-color: #0a3055;
-            font-size: 1.375rem;
-            line-height: 1.5rem;
-            font-weight: 400;
-          }
-        }
-      }
-
-      &__basked-id {
-        padding: 26px 0;
-        background: #f8f8f8;
-        text-align: center;
-        font-size: 1rem;
+  .summary {
+    .checkout-title__title {
+      color: $blue-ocean;
+      font-weight: 400;
+      line-height: 1.75rem;
+    }
 
-        .id-number {
-          font-weight: 700;
-        }
-      }
+    &__aside {
+      padding: 12px 30px 0;
 
-      .accordion__header-icon-small {
-        left: 85px;
+      .checkout-info-wrap {
+        padding: 0;
       }
     }
   }
@@ -469,20 +401,6 @@
         }
       }
     }
-
-    .right-aside {
-      .summary {
-        .checkout-widget {
-          &.checkout-widget_order-summary {
-            .checkout-widget__total {
-              font-weight: 400;
-              margin-left: -20px;
-              margin-right: -20px;
-            }
-          }
-        }
-      }
-    }
   }
 }
 
@@ -637,24 +555,6 @@
         }
       }
     }
-
-    .right-aside {
-      .summary {
-        .checkout-widget {
-          &.checkout-widget_order-summary {
-            .checkout-widget__total {
-              font-weight: 400;
-              margin-left: -30px;
-              margin-right: -30px;
-            }
-          }
-        }
-
-        .summary__basked-id {
-          margin-top: 13px;
-        }
-      }
-    }
   }
 }
 

package/src/scss/pages/page_shopping-cart-v2.scss

@@ -25,6 +25,10 @@
 
   .right-aside {
     margin-top: 0;
+
+    .voucher {
+      display: none;
+    }
   }
 
   .content {
@@ -80,7 +84,8 @@
 
   .summary {
     .checkout-widget_order-summary {
-      background-color: $gray-bg;
+      margin-left: -20px;
+      margin-right: -20px;
 
       .checkout-widget__details {
         flex-direction: column;
@@ -93,7 +98,6 @@
           &__item {
             &-bold {
               order: -5;
-              padding: 0;
             }
 
             &-vat {
@@ -139,29 +143,6 @@
         &__item {
           font-weight: 400;
           font-size: .875rem;
-          padding: 10px 0;
-          margin: 0;
-
-          &:nth-child(1) {
-            margin: 0;
-            padding: 0;
-          }
-
-          &:nth-child(2) {
-            margin: 0;
-            padding-bottom: 10px;
-          }
-
-          &:nth-child(3) {
-            margin: 0;
-            padding-bottom: 10px;
-          }
-
-          &:last-child {
-            margin: 0;
-            padding: 0;
-          }
-
 
           &:not(.checkout-widget__item-vat) {
             margin-top: 0;
@@ -172,8 +153,8 @@
           }
 
           &-vat {
-            margin: 0;
-            padding: 0 0 10px;
+            padding-bottom: 10px;
+            margin-bottom: 10px;
             color: $warm-grey;
             font-size: .75rem;
             border-bottom: 1px solid #eee;
@@ -199,7 +180,7 @@
 
         &__details {
           &-discount {
-            margin-top: 10px;
+            margin-top: 0;
           }
         }
 
@@ -221,54 +202,6 @@
     background-color: transparent;
     padding: 0;
     border: 0;
-
-    .voucher__btn {
-      max-width: 100%;
-      margin-top: 20px;
-      height: 40px;
-    }
-
-    .form-row__error {
-      font-weight: 400;
-    }
-
-    &.voucher-applied {
-      background: $white;
-      margin-bottom: 8px;
-      height: 40px;
-
-      .voucher-applied__inner {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        & .icon {
-          display: inline-block;
-          margin-top: 8px;
-
-          &__check {
-            width: 24px;
-            height: 24px;
-
-            i {
-              font-size: 24px;
-              line-height: 24px;
-            }
-          }
-        }
-
-        & .fa-check-circle {
-          font-size: 1rem;
-          margin-bottom: 0;
-        }
-
-        & h5 {
-          margin: 0;
-          margin-top: 8px;
-          font-size: .875rem;
-        }
-      }
-    }
   }
 }
 
@@ -360,6 +293,12 @@
       max-width: 100%;
       padding-right: 5px;
     }
+
+    .summary {
+      &__aside {
+        padding: 20px 20px 0;
+      }
+    }
   }
 }
 
@@ -377,17 +316,13 @@
         .checkout-voucher {
           padding: 0;
 
-          .form-row__error {
-            white-space: pre-line;
-          }
-
           form {
             display: flex;
             align-items: flex-start;
+            margin-bottom: 27px;
 
             .form-row {
-              max-width: 100%;
-              flex: 1;
+              @include make-col(7);
               margin-right: 0;
 
               &__field {
@@ -409,13 +344,27 @@
 
             .voucher__btn {
               margin-top: 0;
-              margin-left: 16px;
+              margin-left: 15px;
             }
 
             &.form_invalid {
               margin-bottom: 0;
             }
           }
+
+          &.voucher-applied {
+            background: $white;
+
+            & .fa-check-circle {
+              font-size: 2rem;
+              margin-bottom: 0;
+            }
+
+            & h3 {
+              font-size: 1.25rem;
+              margin-bottom: 0;
+            }
+          }
         }
       }
 
@@ -475,16 +424,6 @@
           display: flex;
         }
       }
-
-      .checkout-widget__item-bold {
-        margin: 10px 0;
-        padding: 5px 0;
-      }
-
-      .checkout-widget__item-vat {
-        padding-bottom: 10px;
-        margin-bottom: 10px;
-      }
     }
 
     .checkout-title {

package/build/js/page/basket/summary-mobile.js

@@ -1,17 +0,0 @@
-const summaryMobileEl = {
-  summaryAside: '.summary__aside',
-  backToTop : '#back-to-top',
-};
-
-export function addClassToSummaryAside(data) {
-  const payPalEnabled = data?.paymentInfos?.payPalEnabled;
-  const clickAndCollectOnly = data.clickAndCollectOnly;
-  const isPayPalAllowed = payPalEnabled && clickAndCollectOnly;
-  const $aside = $(summaryMobileEl.summaryAside);
-  const $backToTop = $(summaryMobileEl.backToTop);
-
-  if (isPayPalAllowed === false) {
-    $aside.addClass('single-button');
-    $backToTop.addClass('single-button');
-  }
-}

package/src/components/checkout-voucher-accordion.hbs

@@ -1,15 +0,0 @@
-<li class="checkout-widget__voucher-accordion">
-  <div
-      class="checkout-widget__voucher-toggle collapsed"
-      data-toggle="collapse"
-      data-target="#checkout-voucher-accordion-{{id}}"
-  >
-    Got a voucher?
-    <span class="checkout-widget__icon">
-            <i class="fal fa-angle-up fa-2x"></i>
-          </span>
-  </div>
-  <div class="collapse" id="checkout-voucher-accordion-{{id}}">
-    {{> checkout_voucher_large  id=id title=""}}
-  </div>
-</li>

package/src/components/summary-mobile-bar.hbs

@@ -1,17 +0,0 @@
-<div class="summary__mobile-bar">
-  <div class="summary__mobile-order collapsed"
-       data-toggle="collapse"
-       aria-expanded="false"
-       data-target="#checkout-summary-mobile-accordion-{{id}}">
-    <div class="summary__mobile-container container">
-      <span class="summary__mobile-bar-label">Order Summary</span>
-      <div class="summary__icon-container">
-        <span class="summary__mobile-bar-total">{{ total.value }}</span>
-        <span class="summary__icon summary__icon-up">
-          <i class="fal fa-angle-up fa-2x"></i>
-        </span>
-      </div>
-    </div>
-  </div>
-  {{> checkout-action container="true" hidePaypalEmail="true"}}
-</div>

package/src/js/page/basket/summary-mobile.js

@@ -1,17 +0,0 @@
-const summaryMobileEl = {
-  summaryAside: '.summary__aside',
-  backToTop : '#back-to-top',
-};
-
-export function addClassToSummaryAside(data) {
-  const payPalEnabled = data?.paymentInfos?.payPalEnabled;
-  const clickAndCollectOnly = data.clickAndCollectOnly;
-  const isPayPalAllowed = payPalEnabled && clickAndCollectOnly;
-  const $aside = $(summaryMobileEl.summaryAside);
-  const $backToTop = $(summaryMobileEl.backToTop);
-
-  if (isPayPalAllowed === false) {
-    $aside.addClass('single-button');
-    $backToTop.addClass('single-button');
-  }
-}