wickes-css2 2.106.0-develop.3 → 2.106.0-develop.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wickes-css2",
-  "version": "2.106.0-develop.3",
+  "version": "2.106.0-develop.4",
   "description": "CSS and JS and page templates in use by Wickes",
   "main": "index.js",
   "scripts": {
@@ -125,7 +125,7 @@
     "branches": [
       "alt-master",
       {
-        "name": "develop",
+        "name": "custom-tag/0.5.0-icons",
         "prerelease": "${name.replace(/^custom-tag\\//g, '')}"
       }
     ],

package/src/page_plp-with-paint.html

@@ -63,7 +63,7 @@
 {{/content}}
 {{#content "foot" mode="append"}}
 <script defer src="./js/page/plp.js"></script>
-<script defer src="./js/page/plp-img-v2.js"></script>
+
 <script defer src="./js/page/plp-cards-v2.js"></script>
 <script defer src="./js/search-filter.min.js"></script>
 {{/content}}

package/src/page_plp_v2-energy-efficiency.html

@@ -70,7 +70,7 @@
 
 <script defer src="./js/plp.bundle.min.js"></script>
 <script defer src="./js/energy-efficiency.min.js"></script>
-<script defer src="./js/page/plp-img-v2.js"></script>
+
 <script defer src="./js/page/plp-cards-v2.js"></script>
 <script defer src="./js/search-filter.min.js"></script>
 {{/content}}

package/src/page_plp_v2-favourite-products.html

@@ -69,7 +69,7 @@
     {{/content}}
     {{#content "foot" mode="append"}}
         <script defer src="./js/page/plp.js"></script>
-        <script defer src="./js/page/plp-img-v2.js"></script>
+
         <script defer src="./js/page/plp-cards-v2.js"></script>
         <script defer src="./js/plp-favourite-product.bundle.min.js"></script>
         <script defer src="./js/plp-filters.min.js"></script>

package/src/page_plp_v2-vat.html

@@ -66,7 +66,7 @@
     {{/content}}
     {{#content "foot" mode="append"}}
         <script defer src="./js/page/plp.js"></script>
-        <script defer src="./js/page/plp-img-v2.js"></script>
+
         <script defer src="./js/page/plp-cards-v2.js"></script>
         <script defer src="./js/search-filter.min.js"></script>
     {{/content}}

package/src/page_plp_v2.html

@@ -83,7 +83,7 @@
     {{#content "foot" mode="append"}}
     {{> kitchen/filter-modal isKitchenMode=false modalTitle="Filter by" }}
         <script defer src="./js/plp.bundle.min.js"></script>
-        <script defer src="./js/page/plp-img-v2.js"></script>
+
         <script defer src="./js/page/plp-cards-v2.js"></script>
         <script defer src="./js/search-filter.min.js"></script>
         <script defer src="./js/plp-filters.min.js"></script>

package/src/page_product_search-vat.html

@@ -60,7 +60,7 @@
 {{/content}}
 {{#content "foot" mode="append"}}
 <script defer src="./js/page/plp.js"></script>
-<script defer src="./js/page/plp-img-v2.js"></script>
+
 <script defer src="./js/page/plp-cards-v2.js"></script>
 <script defer src="./js/components/badge-cashback.js"></script>
 <script defer src="./js/search-filter.min.js"></script>

package/src/page_product_search.html

@@ -60,7 +60,7 @@
 {{/content}}
 {{#content "foot" mode="append"}}
 <script defer src="./js/page/plp.js"></script>
-<script defer src="./js/page/plp-img-v2.js"></script>
+
 <script defer src="./js/page/plp-cards-v2.js"></script>
 <script defer src="./js/components/badge-cashback.js"></script>
 <script defer src="./js/search-filter.min.js"></script>

package/src/page_search-results.html

@@ -72,7 +72,7 @@
 {{#content "foot" mode="append"}}
 <script defer src="./js/plp.bundle.min.js"></script>
 <script defer src="./js/energy-efficiency.min.js"></script>
-<script defer src="./js/page/plp-img-v2.js"></script>
+
 <script defer src="./js/page/plp-cards-v2.js"></script>
 <script defer src="./js/search-filter.min.js"></script>
 {{/content}}

package/src/scss/components/_custom-slider.scss

@@ -337,7 +337,7 @@
     transition: all 0.3s ease;
 
     &.footer-fixed {
-      box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, 0.08);
+      box-shadow: 0 -4px 12px 0 rgba(0, 0, 0, 0.08);
       position: fixed;
       width: 100%;
       left: 0;
@@ -408,7 +408,7 @@
     }
 
     .custom-slider__footer {
-      box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, 0.08);
+      box-shadow: 0 -4px 12px 0 rgba(0, 0, 0, 0.08);
       flex-direction: column;
     }
   }

package/src/scss/helpers/_variables.scss

@@ -33,7 +33,6 @@ $error-bg: #fcf2f3; // Error notification background colour
 $positive: #8dc63f; // Positive colour
 $negative: #ed1c24; // Negative colour
 $blue-badge: #019ee3;
-$pacific-depths: #004587;
 $usp-icon-color: #1a77bc; // Usp icon color
 $pacific-depths: #004587;
 $line-through: #242424;
@@ -47,10 +46,6 @@ $footer-gray: #f5f5f5;
 $footer-bullet: #c8c8c8;
 $footer-copyright: #626262;
 
-$footer-gray: #f5f5f5;
-$footer-bullet: #c8c8c8;
-$footer-copyright: #626262;
-
 $white: #fff;
 $black: #000;
 $black-lite: #111;
@@ -67,7 +62,6 @@ $blue-ocean: #003058;
 $blue-ocean-dark: #0a3054;
 $gray-middle: #aaa;
 $light-blue: #e6f1f8;
-
 // Colour block colours
 $moon-shadow: #658089;
 $fawn: #f0ddce;
@@ -111,7 +105,7 @@ $black-transparent75: rgba(0, 0, 0, 0.75);
 $black-transparent80: rgba(0, 0, 0, 0.8);
 $blue-transparent20: rgba(2, 119, 189, 0.2);
 $blue-transparent10: rgba(2, 119, 189, 0.1);
-$blue-transparent3: #0277bd52;
+$blue-transparent3: rgba(2, 119, 189, 0.32);
 $blue-transparent5: rgba(2, 119, 189, 0.05);
 $blue-transparent5-rgb: rgb(242, 248, 251);
 $dark-blue-transparent10: rgba(10, 48, 85, 0.1);
@@ -305,7 +299,7 @@ $btn-line-height-sm: $input-btn-line-height-sm !default;
 
 $btn-padding-y-lg: $input-btn-padding-y-lg !default;
 $btn-padding-x-lg: $input-btn-padding-x-lg !default;
-$btn-line-height-lg: $input-btn_line-height-lg !default;
+$btn-line-height-lg: $input-btn-line-height-lg !default;
 
 $btn-border-radius: $border-radius !default;
 $btn-border-radius-lg: $border-radius-lg !default;
@@ -385,8 +379,7 @@ $zindex-share: 1 !default;
 
 // This variable affects the `.h-*` and `.w-*` classes.
 $sizes: () !default;
-
-/* sass-lint:disable indentation */
+// sass-lint:disable indentation
 $sizes: map-merge(
   (
     25: 25%,
@@ -396,8 +389,7 @@ $sizes: map-merge(
   ),
   $sizes
 );
-/* sass-lint:enable indentation */
-
+// sass-lint:enable indentation
 // Spacing
 //
 // Control the default styling of most Bootstrap elements by modifying these
@@ -407,8 +399,7 @@ $sizes: map-merge(
 // stylelint-disable
 $spacer: 1rem !default;
 $spacers: () !default;
-
-/* sass-lint:disable indentation */
+// sass-lint:disable indentation
 $spacers: map-merge(
   (
     0: 0,
@@ -428,7 +419,7 @@ $spacers: map-merge(
   ),
   $spacers
 );
-/* sass-lint:enable indentation */
+// sass-lint:enable indentation
 
 // Bootstrap Printing checked
 $print-page-size: a3 !default;

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

@@ -303,6 +303,7 @@ $color-bar-radius: 3px;
       margin-right: -4px;
       padding-left: 5px;
       padding-right: 5px;
+      width: 50%;
     }
 
     &:nth-of-type(1)::before,
@@ -338,6 +339,27 @@ $color-bar-radius: 3px;
         align-items: center;
         justify-content: center;
         border-bottom: 1px solid $gray;
+        width: 100%;
+
+        @supports (aspect-ratio: 1 / 1) {
+          aspect-ratio: 1 / 1;
+        }
+
+        @supports not (aspect-ratio: 1 / 1) {
+          &:before {
+            content: '';
+            display: block;
+            padding-top: 100%;
+          }
+        }
+
+        .card__img-v2 {
+          position: absolute;
+          inset: 0;
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+        }
 
         @include media-breakpoint-down(sm) {
           border: 1px solid $gray;
@@ -367,6 +389,16 @@ $color-bar-radius: 3px;
     }
   }
 
+  .card-sponsor-product {
+    @include media-breakpoint-down(sm) {
+      width: 50%;
+
+      .card {
+        width: 100%;
+      }
+    }
+  }
+
   .product-card {
     & .card__inner-v2:hover {
       border: 1px solid $gray-dark;
@@ -586,8 +618,8 @@ $color-bar-radius: 3px;
   .sort-products-list {
     &__section {
       @include make-col(6);
-      color: black;
-      border: none;
+      color: $black;
+      border: 0;
 
       > .form-row {
         margin-bottom: 0;

package/build/js/page/plp-img-v2.js

@@ -1,25 +0,0 @@
-$(document).ready(function () {
-    
-    let imgWrap = $('.products-list-v2 .card__img-wrap');
-    let img = $('.products-list-v2 .card__img-v2');
-    
-    square();
-
-    img.height(function () {
-        if (Math.round($(this).height()) > Math.round($(this).width())) {
-            $(this).height('99.9%'); //fix for ie
-        } else if ((Math.round($(this).height()) < Math.round($(this).width()))){
-            $(this).width('99.9%'); // fix for ie
-        } else {
-            $(this).width('99.9%'); // fix for ie
-            $(this).height('99.9%'); // fix for ie
-        }
-    });
-
-    function square() {
-        let width = imgWrap.width();
-        imgWrap.height(width);
-    }
-
-    $(window).on('resize', square);
-});

package/src/js/page/plp-img-v2.js

@@ -1,25 +0,0 @@
-$(document).ready(function () {
-    
-    let imgWrap = $('.products-list-v2 .card__img-wrap');
-    let img = $('.products-list-v2 .card__img-v2');
-    
-    square();
-
-    img.height(function () {
-        if (Math.round($(this).height()) > Math.round($(this).width())) {
-            $(this).height('99.9%'); //fix for ie
-        } else if ((Math.round($(this).height()) < Math.round($(this).width()))){
-            $(this).width('99.9%'); // fix for ie
-        } else {
-            $(this).width('99.9%'); // fix for ie
-            $(this).height('99.9%'); // fix for ie
-        }
-    });
-
-    function square() {
-        let width = imgWrap.width();
-        imgWrap.height(width);
-    }
-
-    $(window).on('resize', square);
-});