wickes-css2 2.105.0-develop.3 → 2.105.0-develop.5

package/src/scss/main.scss

@@ -3,76 +3,76 @@
 @import 'common/vat-toggle';
 
 // Components
-@import 'components/request-pass';//checkout & my-acc + tradepro
-@import 'components/popup-delivery';//checkout
-@import 'components/user-address';//checkout & my-acc + tradepro & components (recheck for modal-content class)
-@import 'components/order-header';//my-acc + tradepro
-@import 'components/merge-basket-options';//checkout & components
-@import 'components/tables';//my-acc + tradepro
-@import 'components/video';//iframe video(to be checked if is used)
+@import 'components/request-pass'; //checkout & my-acc + tradepro
+@import 'components/popup-delivery'; //checkout
+@import 'components/user-address'; //checkout & my-acc + tradepro & components (recheck for modal-content class)
+@import 'components/order-header'; //my-acc + tradepro
+@import 'components/merge-basket-options'; //checkout & components
+@import 'components/tables'; //my-acc + tradepro
+@import 'components/video'; //iframe video(to be checked if is used)
 
-@import 'components/modal-slider';//deep dependence
-@import 'components/product-card';//deep dependence
-@import 'components/product-card-preview';//deep dependence
-@import 'components/your-details';//deep dependence
-@import 'components/map';//deep dependence
-@import 'components/aside-nav2';//deep dependence
-@import 'components/account-heading';//deep dependence
-@import 'components/card-store-locator';//deep dependence
-@import 'components/offer-banner';//deep dependence
-@import 'components/pagination';//deep dependence
-@import 'components/price-block';//deep dependence
-@import 'components/back-to-top';//deep dependence
-@import 'components/payments';//deep dependence
-@import 'components/notifications';//deep dependence
-@import 'components/popover-mini-basket';//deep dependence
+@import 'components/modal-slider'; //deep dependence
+@import 'components/product-card'; //deep dependence
+@import 'components/product-card-preview'; //deep dependence
+@import 'components/your-details'; //deep dependence
+@import 'components/map'; //deep dependence
+@import 'components/aside-nav2'; //deep dependence
+@import 'components/account-heading'; //deep dependence
+@import 'components/card-store-locator'; //deep dependence
+@import 'components/offer-banner'; //deep dependence
+@import 'components/pagination'; //deep dependence
+@import 'components/price-block'; //deep dependence
+@import 'components/back-to-top'; //deep dependence
+@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
-@import 'components/accordion';//deep dependence
-@import 'components/order-line';//deep dependence
-@import 'components/clamp';//deep
-@import 'components/cookies-policy';//deep dependence
+@import 'components/lines-group'; //deep dependence
+@import 'components/autocomplete'; //deep dependence
+@import 'components/card'; //deep dependence
+@import 'components/accordion'; //deep dependence
+@import 'components/order-line'; //deep dependence
+@import 'components/clamp'; //deep
+@import 'components/cookies-policy'; //deep dependence
 @import 'components/snack-bar';
 //used in many pages
 
-@import 'components/card-slider';// pdp, home, top-rated
-@import 'components/pagination__shopping-list';//only shopping list
-@import 'components/search-filter';//plp & product-search & search result
-@import 'components/category-tree';//product-search & plp
-@import 'components/steps';//checkout & in-store & tradePro
-@import 'components/steps-three';//checkout progress bar for three steps
-@import 'components/modal-box';//pdp & checkout & kitchen-claims
-@import 'components/legal-info';//plp + product search + search result
-@import 'components/card-store-collect';//pdp + shopping list
-@import 'components/click-and-collect-modal';// pdp + shopping list
-@import 'components/find-a-store';//store locator + components
-@import 'components/page-overlay';//homepage & pdp + checkout
-@import 'components/not-logged-in-message';//pdp + shopping list
-@import 'components/order-line-shop-list';//shopping list
-@import 'components/share-list-modal';//shopping list
-@import 'components/shopping-list';//shopping list
-@import 'components/shopping-list-note';//shopping list
-@import 'components/project-list-total';//shopping list
-@import 'components/counter-list';//shopping list
-@import 'components/shared-shopping-list';//shopping list
-@import 'components/price-badges';//plp + pdp + product search + badges
-@import 'components/loader';//installer + checkout + loader page
-@import 'components/trade-pro-extras';//only tp
-@import 'components/payment-transactions';//wismo-asm + my-acc-asm
-@import 'components/wismo-info-banner';//only wismo
-@import 'components/charity-donations';//shopping cart
-@import 'components/donation-cart';//shopping cart charity
-@import 'components/checkout-loader-modal';//checkout
-@import 'components/range-card';//range cards
-@import 'components/finance';//partially not used(finance class)
-@import 'components/tc-generic';//tiling calculator
-@import 'components/tc-generic-floor';//tiling calculator
-@import 'components/next-steps';//tiling calculator
-@import 'components/card-color-slider';//range cards
-@import 'components/gallery';//range cards
-@import 'components/tabs';//range cards
+@import 'components/card-slider'; // pdp, home, top-rated
+@import 'components/pagination__shopping-list'; //only shopping list
+@import 'components/search-filter'; //plp & product-search & search result
+@import 'components/category-tree'; //product-search & plp
+@import 'components/steps'; //checkout & in-store & tradePro
+@import 'components/steps-three'; //checkout progress bar for three steps
+@import 'components/modal-box'; //pdp & checkout & kitchen-claims
+@import 'components/legal-info'; //plp + product search + search result
+@import 'components/card-store-collect'; //pdp + shopping list
+@import 'components/click-and-collect-modal'; // pdp + shopping list
+@import 'components/find-a-store'; //store locator + components
+@import 'components/page-overlay'; //homepage & pdp + checkout
+@import 'components/not-logged-in-message'; //pdp + shopping list
+@import 'components/order-line-shop-list'; //shopping list
+@import 'components/share-list-modal'; //shopping list
+@import 'components/shopping-list'; //shopping list
+@import 'components/shopping-list-note'; //shopping list
+@import 'components/project-list-total'; //shopping list
+@import 'components/counter-list'; //shopping list
+@import 'components/shared-shopping-list'; //shopping list
+@import 'components/price-badges'; //plp + pdp + product search + badges
+@import 'components/loader'; //installer + checkout + loader page
+@import 'components/trade-pro-extras'; //only tp
+@import 'components/payment-transactions'; //wismo-asm + my-acc-asm
+@import 'components/wismo-info-banner'; //only wismo
+@import 'components/charity-donations'; //shopping cart
+@import 'components/donation-cart'; //shopping cart charity
+@import 'components/checkout-loader-modal'; //checkout
+@import 'components/range-card'; //range cards
+@import 'components/finance'; //partially not used(finance class)
+@import 'components/tc-generic'; //tiling calculator
+@import 'components/tc-generic-floor'; //tiling calculator
+@import 'components/next-steps'; //tiling calculator
+@import 'components/card-color-slider'; //range cards
+@import 'components/gallery'; //range cards
+@import 'components/tabs'; //range cards
 @import 'components/order-summary'; //checkout
 @import 'components/checkout-action'; //checkout
 @import 'components/checkout-header'; //checkout

package/src/scss/pages/page_product-details-v2.scss

@@ -41,7 +41,6 @@
   }
 
   &__gallery {
-
     @include media-breakpoint-up(md) {
       grid-column-start: 1;
       grid-row-start: 2;
@@ -170,11 +169,9 @@
 }
 
 .recently-viewed {
-
   @include media-breakpoint-down(md) {
     display: none;
   }
-
 }
 
 .review-star {
@@ -229,7 +226,7 @@
 }
 
 .review-star-average-v2 {
-  font-size: .875rem;
+  font-size: 0.875rem;
   vertical-align: 15%;
 }
 

package/src/scss/pages/page_product_search.scss

@@ -304,7 +304,7 @@
     overflow-x: hidden;
 
     &__badges {
-      font-size: .875rem;
+      font-size: 0.875rem;
     }
 
     .card {
@@ -344,9 +344,17 @@
   .sort-products-list {
     &__section {
       @include make-col(6);
+      color: black;
+      border: none;
+
+      > .form-row {
+        margin-bottom: 0;
+      }
     }
 
     &__pagination {
+      margin-top: 20px;
+
       .pagination {
         &:not(.pagination_tablet) {
           display: none;

package/src/scss/pages/page_products-list-combined.scss

@@ -66,8 +66,8 @@ $color-bar-radius: 3px;
 }
 
 .sort-products-list {
-  @include make-row;
-  justify-content: space-between;
+  display: flex;
+  justify-content: flex-end;
   align-items: center;
 
   .open-filters-btn {
@@ -95,7 +95,8 @@ $color-bar-radius: 3px;
 
   &__total {
     font-weight: 700;
-    padding-left: 15px;
+    font-size: 0.875rem;
+    line-height: 22px;
   }
 }
 
@@ -251,7 +252,6 @@ $color-bar-radius: 3px;
 }
 
 .products-list-v2 {
-
   @include media-breakpoint-down(sm) {
     margin-right: -5px;
     margin-left: -5px;
@@ -266,7 +266,7 @@ $color-bar-radius: 3px;
     font-size: 1rem;
 
     @include media-breakpoint-down(sm) {
-      font-size: .875rem;
+      font-size: 0.875rem;
     }
   }
 
@@ -357,7 +357,6 @@ $color-bar-radius: 3px;
         @include media-breakpoint-down(sm) {
           padding-left: 0;
           padding-right: 0;
-
         }
       }
 
@@ -403,7 +402,7 @@ $color-bar-radius: 3px;
       & .product-card__title.product-card__title-v2 {
         @include clamp-text(3);
         margin-top: 5px;
-        font-size: .875rem;
+        font-size: 0.875rem;
         font-weight: 700;
         line-height: 18px;
 
@@ -439,7 +438,6 @@ $color-bar-radius: 3px;
     &__price-value.product-card__price-value.product-card__price-value {
       font-size: 1.5rem;
 
-
       @media screen and (max-width: 321px) {
         font-size: 1.125rem;
       }
@@ -453,7 +451,7 @@ $color-bar-radius: 3px;
     }
 
     .product-rating.product-rating-v2 {
-      font-size: .875rem;
+      font-size: 0.875rem;
 
       .fa-star {
         margin-right: 0;
@@ -483,7 +481,6 @@ $color-bar-radius: 3px;
           &-sqm {
             color: $red;
           }
-
         }
       }
 
@@ -503,7 +500,7 @@ $color-bar-radius: 3px;
         text-align: left;
         width: 100%;
         margin-right: 0;
-        font-size: .875rem;
+        font-size: 0.875rem;
         font-weight: 500;
         line-height: 14px;
         color: $blue-dark;
@@ -589,9 +586,17 @@ $color-bar-radius: 3px;
   .sort-products-list {
     &__section {
       @include make-col(6);
+      color: black;
+      border: none;
+
+      > .form-row {
+        margin-bottom: 0;
+      }
     }
 
     &__pagination {
+      margin-top: 20px;
+
       .pagination {
         &:not(.pagination_tablet) {
           display: none;
@@ -696,7 +701,7 @@ $color-bar-radius: 3px;
 
         &-active {
           transform: rotateX(180deg) scale(1.25);
-          transition: .4s;
+          transition: 0.4s;
           transform-style: preserve-3d;
           box-shadow: -1px 0 5px -1px $black;
         }
@@ -773,12 +778,11 @@ $color-bar-radius: 3px;
 
   .srp-injected {
     &__content {
-      padding: 1.25em .75em;
+      padding: 1.25em 0.75em;
     }
   }
 }
 
-
 //minified notification component styles start
 .notification {
   padding: 8px 40px;
@@ -797,7 +801,7 @@ $color-bar-radius: 3px;
     position: absolute;
     right: 8px;
     top: 8px;
-    font-size: .875rem;
+    font-size: 0.875rem;
     color: $warm-grey;
     cursor: pointer;
 
@@ -810,7 +814,7 @@ $color-bar-radius: 3px;
     position: absolute;
     right: 8px;
     top: 8px;
-    font-size: .875rem;
+    font-size: 0.875rem;
     color: $warm-grey;
     cursor: pointer;
   }
@@ -889,6 +893,7 @@ $color-bar-radius: 3px;
     }
   }
 }
+
 //minified notification component styles end
 
 //minified autocomplete component styles start
@@ -973,6 +978,7 @@ $color-bar-radius: 3px;
     }
   }
 }
+
 //minified autocomplete component styles end
 
 //minified card component styles start
@@ -1043,7 +1049,6 @@ $color-bar-radius: 3px;
     }
 
     .card__img {
-
       @include media-breakpoint-down(sm) {
         padding-top: 15px;
         padding-bottom: 10px;
@@ -1086,7 +1091,7 @@ $color-bar-radius: 3px;
 
     &_ends {
       background-color: $gray-dark-transparent75;
-      font-size: .75rem;
+      font-size: 0.75rem;
       font-weight: 500;
       line-height: 14px;
     }
@@ -1133,6 +1138,7 @@ $color-bar-radius: 3px;
   max-width: 100%;
   width: 100%;
 }
+
 //minified card component styles end
 
 //minified product-card component styles start
@@ -1187,7 +1193,7 @@ $color-bar-radius: 3px;
 .product-card__reviews,
 .filter__reviews {
   color: $warm-grey;
-  font-size: .75rem;
+  font-size: 0.75rem;
   line-height: 16px;
   margin-top: 10px;
 
@@ -1226,11 +1232,10 @@ $color-bar-radius: 3px;
       }
     }
   }
-
 }
 
 .filter__reviews {
-  font-size: .875rem;
+  font-size: 0.875rem;
   margin: 0;
   transform: translateY(3px);
 
@@ -1255,9 +1260,7 @@ $color-bar-radius: 3px;
 
 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   .product-card__reviews {
-
     .product-rating {
-
       .rating-bg {
         display: block;
       }
@@ -1296,7 +1299,7 @@ $color-bar-radius: 3px;
   line-height: 36px;
 
   .product-card__price-from {
-    font-size: .7em;
+    font-size: 0.7em;
     margin-right: 4px;
   }
 
@@ -1325,6 +1328,7 @@ $color-bar-radius: 3px;
     text-decoration-color: $line-through;
   }
 }
+
 //minified product-card component styles end
 
 @include media-breakpoint-down(sm) {

package/src/scss/pages/page_products-list.scss

@@ -235,9 +235,17 @@
   .sort-products-list {
     &__section {
       @include make-col(6);
+      color: black;
+      border: none;
+
+      > .form-row {
+        margin-bottom: 0;
+      }
     }
 
     &__pagination {
+      margin-top: 20px;
+
       .pagination {
         &:not(.pagination_tablet) {
           display: none;

package/src/scss/pages/tradePro-rewards.scss

@@ -7,7 +7,7 @@ $voucher-cell-height-lg: 246px;
 $voucher-cell-height-xl: 296px;
 
 .text-start {
-  text-align: left;
+  text-align: left !important;
 }
 
 .page_tradePro-rewards {
@@ -131,7 +131,7 @@ $voucher-cell-height-xl: 296px;
       color: $white;
       display: block;
       padding: 4px;
-      font-size: .75rem;
+      font-size: 0.75rem;
       font-weight: 500;
     }
 
@@ -168,7 +168,7 @@ $voucher-cell-height-xl: 296px;
 
       &-text {
         font-weight: 400;
-        font-size: .875rem;
+        font-size: 0.875rem;
       }
 
       &-button {
@@ -191,7 +191,6 @@ $voucher-cell-height-xl: 296px;
   }
 }
 
-
 @include media-breakpoint-up(md) {
   .page_tradePro-rewards {
     .voucher {

package/build/js/page/accordion.js

@@ -1,35 +0,0 @@
-var Wick = Wick || {};
-Wick.Accordion = (function(){
-  var $accordion = $('.accordion'),
-    accordionToggler = '.accordion__header',
-    accordionIcon = '.accordion__action',
-    accordionContent = '.accordion__content',
-    collapsed = 'accordion_collapsed',
-    $asideAccordion = $('.aside-accordion .js-toggle-aside-accordion');
-  var bindEvents = function (index, element) {
-    var $acc = $(element);
-
-    var accordionTrigger = $acc.attr('data-action-element') === 'icon' ? accordionIcon : accordionToggler
-    $acc.find(accordionTrigger).on('click', function(){
-      $acc.toggleClass(collapsed);
-      $acc.children(accordionContent).slideToggle(200);
-    });
-  };
-
-  var init = function () {
-    $accordion.each(bindEvents);
-
-    $asideAccordion.click(function() {
-      if (window.matchMedia("(min-width: 992px)").matches) {
-        if ($(this).text().toLowerCase() != 'useful links') {
-          $(this).closest('.aside-nav2__holder')
-            .toggleClass('is-active')
-            .find('.aside-nav2__list')
-            .slideToggle(250);
-        }
-      }
-    });
-  }
-
-  init();
-})();

package/build/js/page/kitchen/plp-filters-chips.js

@@ -1,90 +0,0 @@
-var Wick = window.Wick || {}
-
-Wick.PLPChips = {
-  GROUP: '.plp-filters__group',
-  TOGGLE: '.plp-filters__toggle',
-  INPUTS: '.filter-card__checkbox, .swatch__checkbox, .checkbox__input',
-  CHIPS_WRAP_SEL: '.plp-selected',
-  BADGE_CLASS: 'plp-filters__badge',
-
-  renderGroupCounters (rootWrapper) {
-    rootWrapper.find(Wick.PLPChips.GROUP).each((_, el) => {
-      const group = $(el)
-      const name = group.attr('data-filter') || ''
-      const count = Wick.PLPFilters.appliedState[name] ? Wick.PLPFilters.appliedState[name].size : 0
-      const btn = group.find(Wick.PLPChips.TOGGLE)
-      const badgeSpan = btn.find(`.${Wick.PLPChips.BADGE_CLASS} span`)
-      if (count > 0) {
-        badgeSpan.text(count).css('display', 'flex')
-      } else {
-        badgeSpan.text('').hide()
-      }
-    })
-  },
-
-  renderChips (rootWrapper) {
-    const wrap = rootWrapper.find(Wick.PLPChips.CHIPS_WRAP_SEL)
-    if (!wrap.length) {
-      return
-    }
-
-    const list = wrap.find('.plp-selected__list');
-    let clearAllBtn = wrap.find('.plp-selected__clear-all');
-
-    list.empty();
-
-    const total = Wick.PLPFilters.totalApplied()
-    wrap.find('.plp-selected__clear-all').prop('hidden', total === 0)
-
-    if (total === 0) {
-      wrap.hide();
-      if (clearAllBtn.length) {
-        clearAllBtn.remove();
-      }
-      return;
-    }
-
-    Object.keys(Wick.PLPFilters.appliedState).forEach((group) => {
-      Wick.PLPFilters.appliedState[group].forEach((value) => {
-        list.append(
-          `<button type="button" class="pf-chip" data-group="${group}" data-value="${value}">
-            <span class="pf-chip__text">${value}</span>
-            <i class="fa fa-times pf-chip__close" aria-hidden="true"></i>
-            <span class="sr-only">Remove ${value} from ${group}</span>
-        </button>`
-        );
-      });
-    });
-
-    if (clearAllBtn.length) {
-      clearAllBtn.prop('hidden', false);
-      clearAllBtn.appendTo(list);
-    } else {
-      clearAllBtn = $(`
-      <button type="button" class="plp-selected__clear-all btn btn-secondary">
-        <i class="fa fa-times" aria-hidden="true"></i><span>Clear all</span>
-      </button>
-    `);
-      list.append(clearAllBtn);
-    }
-  },
-
-  bindChipActions (rootWrapper) {
-    // remove one chip
-    rootWrapper.on('click', '.pf-chip', (e) => {
-      e.preventDefault()
-      const chip = $(e.target).closest('.pf-chip')
-      const groupDomName = chip.data('group')
-      const valueOriginal = chip.data('value')
-      
-      Wick.PLPFilters.removeFromApplied(groupDomName, valueOriginal)
-      Wick.PLPFilters.writeStateToURL(Wick.PLPFilters.appliedState, false)
-    })
-
-    // clear all
-    rootWrapper.on('click', '.plp-selected__clear-all', (e) => {
-      e.preventDefault()
-      Wick.PLPFilters.writeStateToURL({}, false)
-    })
-  }
-}

package/build/js/page/kitchen/plp-filters-mobile.js

@@ -1,72 +0,0 @@
-var Wick = window.Wick || {};
-
-Wick.PLPFiltersMobile = {
-  ROOT_WRAPPER: ".page-KitchenPLPPage",
-  INPUTS: '.filter-card__checkbox, .swatch__checkbox, .checkbox__input',
-
-  MODAL_SEL: '#filterModal',
-  MODAL_VIEW_BTN: '#filterModal .btn.btn-primary',
-  MODAL_CLEAR_BTN: '#filterModal .btn.btn-secondary',
-  $ACCORDION: '.accordion',
-  $ACCORDION_CONTENT: '.accordion__content',
-  ACCORDION_COLLAPSED: 'accordion_collapsed',
-
-  // update mobile counter
-  updateMobileFilterInfo() {
-    const info = $('.mobile-nav__item[data-target="#filterModal"] .mobile-nav__info');
-    if (!info.length) {
-      return;
-    }
-
-    const total = Wick.PLPFilters.totalApplied();
-    if (total > 0) {
-      const label = total === 1 ? 'filter' : 'filters';
-      info.text(`${total} ${label} applied`);
-    } else {
-      info.text('No filters applied');
-    }
-  },
-
-  hideAccordions() {
-    $(Wick.PLPFiltersMobile.$ACCORDION).addClass(Wick.PLPFiltersMobile.ACCORDION_COLLAPSED);
-    $(Wick.PLPFiltersMobile.$ACCORDION_CONTENT).hide();
-  },
-
-  init() {
-    // two-way binding for input between desktop and modal
-    $(document).on('change', Wick.PLPFiltersMobile.INPUTS, function () {
-      const inp = $(this);
-      const name = inp.attr('name');
-      if (!name) {
-        return;
-      }
-      Wick.PLPUtils.syncTwinInputsByName(name, inp.prop('checked'), inp);
-    });
-
-    // when the modal is opened — synchronize its checkboxes with state
-    $(document).on('shown.bs.modal', Wick.PLPFiltersMobile.MODAL_SEL, function () {
-      Wick.PLPFilters.setDOMFromState($(this), Wick.PLPFilters.appliedState);
-    });
-
-    $(document).on('hide.bs.modal', Wick.PLPFiltersMobile.MODAL_SEL, function () {
-      Wick.PLPFiltersMobile.hideAccordions()
-    });
-
-    // mobile "View results" button in modal
-    $(document).on('click', Wick.PLPFiltersMobile.MODAL_VIEW_BTN, function (e) {
-      e.preventDefault();
-      const scope = $(Wick.PLPFiltersMobile.ROOT_WRAPPER).add($(Wick.PLPFiltersMobile.MODAL_SEL));
-      Wick.PLPFilters.applyFromScopes(scope, true);
-    });
-
-    // mobile "Clear all" button in modal
-    $(document).on('click', Wick.PLPFiltersMobile.MODAL_CLEAR_BTN, function (e) {
-      e.preventDefault();
-      Wick.PLPFilters.appliedState = {};
-      Wick.PLPFilters.writeStateToURL(Wick.PLPFilters.appliedState, false);
-      $(document).find(Wick.PLPFiltersMobile.INPUTS + ':checked').prop('checked', false);
-      Wick.PLPFilters.updateSelectedUI($(Wick.PLPFiltersMobile.ROOT_WRAPPER));
-      $(document).trigger('filters:cleared', {state: Wick.PLPFilters.exportState()});
-    });
-  }
-}