wickes-css2 2.98.0-develop.6 → 2.98.0-develop.8

package/src/page_product-details-with-global-search-v2.html

@@ -12,7 +12,6 @@ badge-text-color='gray'
 currentlyInStock=true
 pagePdp=true
 globalSearchV2="true"
-switch-vat=true
 }}
 {{#content "head" mode="append" pagePdp=true}}
 <link type="text/css" rel="stylesheet" href="./css/components/global-search.css">

package/src/scss/common/_scroll-disable.scss

@@ -1,8 +1,6 @@
-.scroll-disable,
-.slider-scroll-disable {
+.scroll-disable {
   position: fixed;
+  inset: 0;
   width: 100%;
   overflow: hidden;
-  top: 0;
-  inset: auto;
 }

package/src/scss/components/legal-info.scss

@@ -1,64 +1,3 @@
-@import '../helpers/helpers';
-
 .legal-info {
   margin-top: 40px;
-  border: 1px solid $gray;
-  border-radius: 4px;
-  padding: 16px;
-  position: relative;
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.5rem;
-
-  &__toggle {
-    margin-bottom: 0;
-    font-size: 1.125rem;
-    font-weight: 500;
-    line-height: 1.5rem;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    .icon-wrap {
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      &:after {
-        content: '+';
-        color: $blue;
-        font-size: 1.575rem;
-      }
-    }
-
-    &[aria-expanded='true'] {
-      .icon-wrap {
-        &:after {
-          content: '-';
-          font-size: 2.95rem;
-        }
-      }
-    }
-  }
-
-  .collapse-wrap {
-    margin-top: 16px;
-  }
-
-  .container {
-    padding: 0;
-  }
-}
-
-@include media-breakpoint-up(sm) {
-  .legal-info {
-    padding: 24px;
-  }
-}
-
-@include media-breakpoint-up(md) {
-  .legal-info {
-    padding: 24px 40px;
-  }
 }

package/src/scss/components/my-account/_saving-totaliser.scss

@@ -0,0 +1,175 @@
+.saving-totaliser {
+  background: $blue-dark;
+  padding: 16px;
+  color: $white;
+  margin-bottom: 40px;
+
+  .heading-1, .heading-2 {
+    text-align: left;
+  }
+
+  &__encourage {
+    margin-top: 8px;
+    display: flex;
+    justify-content: space-between;
+
+    .btn {
+      margin-top: 16px;
+    }
+  }
+
+  &__saving-icon.icon {
+    position: absolute;
+    top: 30px;
+    right: 26px;
+    width: 60px;
+    height: auto;
+    color: $blue-satin;
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &__saving-title {
+    @include heading-6;
+  }
+
+  &__cell {
+    background: rgba($white, .08);
+    padding: 16px;
+    flex: 1;
+    position: relative;
+
+    &-title {
+      margin-bottom: 4px;
+      color: rgba($white, .8);
+    }
+  }
+
+  &__title {
+    margin-bottom: 16px;
+  }
+
+  &__attencion {
+    margin-bottom: 4px;
+  }
+
+  &__wrapper, &__wrapper2 {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  &__wrapper {
+    margin-bottom: 16px;
+  }
+
+  &__divider {
+    width: 1px;
+    background: rgba($white, .8);
+  }
+
+  &__split-cell {
+    display: flex;
+    flex-direction: row;
+    gap: 16px;
+  }
+
+  &__semi-cell {
+    flex: 1;
+  }
+
+  &__center-cell {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &__note {
+    @include additional-text;
+    color: rgba($white, .8);
+  }
+}
+
+@include media-breakpoint-only(xs) {
+  .saving-totaliser {
+    &__saved {
+      width: 180px;
+    }
+
+    &--this-year-only {
+      .saving-totaliser__wrapper2 {
+        flex-direction: row;
+      }
+    }
+  }
+}
+
+@include media-breakpoint-up(sm) {
+  .saving-totaliser {
+    padding: 24px;
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .saving-totaliser {
+    &__saving-title {
+      @include heading-5;
+    }
+  }
+}
+
+@include media-breakpoint-between(sm, md) {
+  .saving-totaliser {
+    &__saved,
+    &__attencion {
+      margin-right: 130px;
+    }
+
+    &__wrapper2 {
+      flex-direction: row;
+    }
+
+    &--this-last-year {
+      .saving-totaliser__split-cell {
+        flex: 2.3;
+      }
+    }
+
+    &__saving-icon.icon {
+      position: absolute;
+      top: 37px;
+      right: 32px;
+      width: 93px;
+    }
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  .saving-totaliser {
+    &__saved,
+    &__attencion {
+      margin-right: 170px;
+    }
+
+    &__wrapper {
+      flex-direction: row;
+    }
+
+    &__wrapper2 {
+      flex-direction: column;
+      width: 364px;
+    }
+
+    &__saving-icon.icon {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      right: 36px;
+      width: 123px;
+    }
+  }
+}
+

package/src/scss/globals/_global-components.scss

@@ -4,7 +4,6 @@
 @import '../components/back-to-top';
 @import '../components/payments';
 @import '../components/popover-mini-basket';
-@import '../components/custom-slider';
 @import '../components/autocomplete';
 @import '../components/google_banner';
 @import '../components/smart-banner';

package/src/scss/helpers/_mixins.scss

@@ -148,14 +148,6 @@
   line-height: #{$line-height-px / 16}rem;
 }
 
-@mixin multiline-ellipsis($line-count: 1) {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  -webkit-box-orient: vertical;
-  display: -webkit-box;
-  -webkit-line-clamp: $line-count;
-}
-
 @mixin icon-wrap($width: 24px, $height: 24px, $font-size-px: 16) {
   width: $width;
   height: $height;

package/src/scss/helpers/_variables.scss

@@ -4,7 +4,6 @@
 $blue-dark: #0a3055;      // Base brand color for background
 $blue: #0277bd;           // CTAs
 $green: #67a509;          // Tick icons; Buttons in the checkout
-$polishedPine: #67a589;
 $green-dark: #487306;     // Active state of button-action
 
 // Additional colors

package/src/scss/homepage-main.scss

@@ -6,7 +6,6 @@
 
 // Base
 @import 'common/homepage-common';
-@import 'common/scroll-disable';
 
 @import 'globals/global-partials';
 

package/src/scss/main.scss

@@ -26,7 +26,6 @@
 @import 'components/payments';//deep dependence
 @import 'components/notifications';//deep dependence
 @import 'components/popover-mini-basket';//deep dependence
-@import 'components/custom-slider';
 @import 'components/lines-group';//deep dependence
 @import 'components/autocomplete';//deep dependence
 @import 'components/card';//deep dependence

package/src/scss/pages/my-account-v2.scss

@@ -5,6 +5,7 @@
 @import '../components/my-account/contacts';
 @import '../components/my-account/mobile-nav';
 @import '../components/my-account/active-orders';
+@import '../components/my-account/saving-totaliser';
 @import '../components/my-account/barcode';
 @import '../components/my-account/discount';
 @import '../components/my-account/clipboard-code';

package/src/scss/pages/page_track-my-order.scss

@@ -103,27 +103,6 @@
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
-
-    .icon-wrap {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      &:after {
-        content: '+';
-        color: $blue;
-        font-size: 1.575rem;
-      }
-    }
-
-    &[aria-expanded='true'] {
-      .icon-wrap {
-        &:after {
-          content: '-';
-          font-size: 2.95rem;
-        }
-      }
-    }
   }
 
   &__list {

package/src/scss/partials/_header-critical.scss

@@ -266,20 +266,6 @@
   padding-right: 0;
 }
 
-button.header-minicart__btn {
-  background: none;
-  border: 0;
-  box-shadow: none;
-  outline: none;
-  cursor: pointer;
-
-  &:hover {
-    .header-right__link-title {
-      text-decoration: underline;
-    }
-  }
-}
-
 .header-minicart__btn-icon {
   vertical-align: top;
 }

package/src/scss/partials/_header.scss

@@ -288,20 +288,6 @@
   padding-right: 0;
 }
 
-button.header-minicart__btn {
-  background: none;
-  border: 0;
-  box-shadow: none;
-  outline: none;
-  cursor: pointer;
-
-  &:hover {
-    .header-right__link-title {
-      text-decoration: underline;
-    }
-  }
-}
-
 .header-shop-list {
   .icon {
     color: $white;

package/src/sitemap.html

@@ -534,6 +534,7 @@
                         <li><span class="page-id">5.15</span><a href="page_my-account.html" target="_blank">My Account DIY</a></li>
                         <li><a href="page_my-account-installer.html" target="_blank">My Account Installer</a></li>
                         <li><a href="page_my-account-trade-pro.html" target="_blank">My Account TradePro</a></li>
+                        <li><a href="page_my-account-trade-pro-components.html" target="_blank">My Account TradePro Components</a></li>
                         <li><a href="page_personal-details.html" target="_blank">My Account Personal Details</a></li>
                         <li><a href="page_personal-details-installer.html" target="_blank">My Account Personal Details Installer</a></li>
                         <li><a href="page_default-store-page-empty.html" target="_blank">Default Store Page Empty</a></li>

package/src/components/mini-basket/mini-basket-empty.hbs

@@ -1,17 +0,0 @@
-<div class="custom-slider mini-basket d-none">
-  <div class="custom-slider__wrap">
-    <div class="custom-slider__header">
-      <span class="custom-slider__count">Your basket (0)</span>
-      <a href="#" type="button" class="icon-wrap close-popup">
-        <i class="far fa-times icon"></i>
-      </a>
-    </div>
-    <div class="custom-slider__empty">
-      <span class="icon-wrap icon-wrap--xl">
-        <i class="fas fa-shopping-basket"></i>
-      </span>
-      <p class="text">Your basket is currently empty.</p>
-      <button class="btn btn-primary close-popup">Continue Shopping</button>
-    </div>
-  </div>
-</div>

package/src/components/mini-basket/mini-basket.hbs

@@ -1,39 +0,0 @@
-<div class="custom-slider mini-basket d-none">
-  <div class="custom-slider__wrap custom-slider__wrap--scroll">
-    <div class="custom-slider__header">
-      <span class="custom-slider__count">Your basket (1)</span>
-      <button type="button" class="icon-wrap close-popup">
-        <i class="far fa-times icon"></i>
-      </button>
-    </div>
-    <ul class="products">
-      {{#each mini-basket.products}}
-        {{> mini-basket/product-item this switch-vat=true}}
-      {{/each}}
-    </ul>
-  </div>
-  <div class="custom-slider__footer footer-fixed">
-    <div class="mini-basket__total">
-      <button class="btn mini-basket__total-toggle" type="button" data-toggle="collapse" data-target="#checkout-details-accordion-3" aria-expanded="false" aria-controls="checkout-details-accordion-3">
-          <span class="mini-basket__wrap-total">
-            <span class="icon-wrap">
-              <i class="fas fa-chevron-down arrow-icon"></i>
-            </span>
-            <span class="text">Total:</span>
-          </span>
-        <span class="value">{{mini-basket.total.totalPrice.formattedValue}}</span>
-      </button>
-
-      {{> checkout_order-summary-new confirmationSummary=true head=true mod=true id=3 mobile=true hideApplyVoucher=true}}
-    </div>
-    <div class="custom-slider__ctas">
-      <a href="page_shopping-cart.html" class="btn btn_full btn-secondary">View Basket</a>
-      <button class="btn btn-action btn_full btn-checkout">
-        Checkout
-        <span class="icon-wrap ml-2">
-          <i class="fas fa-arrow-right"></i>
-        </span>
-      </button>
-    </div>
-  </div>
-</div>

package/src/components/mini-basket/product-item.hbs

@@ -1,22 +0,0 @@
-<li class="products__item">
-  <a class="products__image" href="page_product-details-with-global-search-v2.html">
-    <img class="product-img" src="{{src}}" alt="">
-  </a>
-  <div class="products__details">
-    <a href="#" class="title">{{title}}</a>
-    <p class="item">Click &amp; Collect: <span class="value">{{CC}}</span></p>
-    <p class="item">Qty: <span class="value">{{quantity.value}}</span></p>
-    {{#if switch-vat}}
-      <p class="price including-vat-inherit">
-        {{incVatPrice}}
-        <span class="inc">Inc.VAT</span>
-      </p>
-      <p class="price excluding-vat-inherit">
-        {{excVatPrice}}
-        <span class="inc">Exc.VAT</span>
-      </p>
-    {{else}}
-      <p class="price">{{price}}</p>
-    {{/if}}
-  </div>
-</li>

package/src/js/components/general/backdrop.js

@@ -1,23 +0,0 @@
-var Wick = Wick || {};
-
-Wick.Backdrop = (function () {
-  const el = {
-    modalBackdrop: 'modal-backdrop',
-    modalBackdropShow: 'show'
-  }
-
-  function show() {
-    if (!$(`.${el.modalBackdrop}`).length) {
-      $('body').append(`<div class="${el.modalBackdrop} ${el.modalBackdropShow}"></div>`);
-    }
-  }
-
-  function hide() {
-    $('body').find(`.${el.modalBackdrop}.${el.modalBackdropShow}`).remove();
-  }
-
-  return {
-    show,
-    hide,
-  };
-})();

package/src/js/components/general/cart-slider.js

@@ -1,16 +0,0 @@
-const cartSliderHTML = '<div class="custom-slider just-added d-none"></div>';
-
-createPopupSlider({
-  type: 'cart',
-  sliderSelector: '.custom-slider.just-added',
-  onAppendEvent: 'productAddedToCart',
-  onAppend: function (event, { showSlider, handleScroll, el }) {
-    if (!$('.custom-slider.just-added').length) {
-      $('body').append(cartSliderHTML);
-    }
-    const htmlContent = event.detail.html;
-    $(el.slider).append(htmlContent);
-    showSlider();
-    $(el.sliderWrap).on('scroll', _.debounce(() => handleScroll(el.sliderWrap), 100));
-  },
-});