wickes-css2 2.106.0-develop.4 → 2.106.0-es-2951-release-improve.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wickes-css2",
-  "version": "2.106.0-develop.4",
+  "version": "2.106.0-es-2951-release-improve.1",
   "description": "CSS and JS and page templates in use by Wickes",
   "main": "index.js",
   "scripts": {
@@ -125,37 +125,14 @@
     "branches": [
       "alt-master",
       {
-        "name": "custom-tag/0.5.0-icons",
+        "name": "custom-tag/es-2951-release-improve",
         "prerelease": "${name.replace(/^custom-tag\\//g, '')}"
       }
     ],
     "plugins": [
       "@semantic-release/commit-analyzer",
       "@semantic-release/release-notes-generator",
-      [
-        "@semantic-release/gitlab",
-        {
-          "gitlabUrl": "https://gitlab.com",
-          "assets": [
-            {
-              "path": "build/css/*",
-              "label": "CSS distribution"
-            },
-            {
-              "path": "build/img/*",
-              "label": "IMG distribution"
-            },
-            {
-              "path": "build/js/*",
-              "label": "JS distribution"
-            },
-            {
-              "path": "src/*",
-              "label": "Template distribution"
-            }
-          ]
-        }
-      ],
+      "@semantic-release/gitlab",
       "@semantic-release/npm"
     ]
   }

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

@@ -0,0 +1,25 @@
+$(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/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: 0 -4px 12px 0 rgba(0, 0, 0, 0.08);
+      box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, 0.08);
       position: fixed;
       width: 100%;
       left: 0;
@@ -408,7 +408,7 @@
     }
 
     .custom-slider__footer {
-      box-shadow: 0 -4px 12px 0 rgba(0, 0, 0, 0.08);
+      box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, 0.08);
       flex-direction: column;
     }
   }

package/src/scss/components/_search-filter.scss

@@ -45,6 +45,9 @@
   .accordions {
     overflow: auto;
     max-height: calc(100vh - 137px);
+    // prevents Top Facets from being bold
+    will-change: transform;
+    transform: translate3d(0, 0, 0);
   }
 
   &_mobile {

package/src/scss/helpers/_variables.scss

@@ -33,6 +33,7 @@ $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;
@@ -46,6 +47,10 @@ $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;
@@ -62,6 +67,7 @@ $blue-ocean: #003058;
 $blue-ocean-dark: #0a3054;
 $gray-middle: #aaa;
 $light-blue: #e6f1f8;
+
 // Colour block colours
 $moon-shadow: #658089;
 $fawn: #f0ddce;
@@ -105,7 +111,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: rgba(2, 119, 189, 0.32);
+$blue-transparent3: #0277bd52;
 $blue-transparent5: rgba(2, 119, 189, 0.05);
 $blue-transparent5-rgb: rgb(242, 248, 251);
 $dark-blue-transparent10: rgba(10, 48, 85, 0.1);
@@ -299,7 +305,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;
@@ -379,7 +385,8 @@ $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%,
@@ -389,7 +396,8 @@ $sizes: map-merge(
   ),
   $sizes
 );
-// sass-lint:enable indentation
+/* sass-lint:enable indentation */
+
 // Spacing
 //
 // Control the default styling of most Bootstrap elements by modifying these
@@ -399,7 +407,8 @@ $sizes: map-merge(
 // stylelint-disable
 $spacer: 1rem !default;
 $spacers: () !default;
-// sass-lint:disable indentation
+
+/* sass-lint:disable indentation */
 $spacers: map-merge(
   (
     0: 0,
@@ -419,7 +428,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,7 +303,6 @@ $color-bar-radius: 3px;
       margin-right: -4px;
       padding-left: 5px;
       padding-right: 5px;
-      width: 50%;
     }
 
     &:nth-of-type(1)::before,
@@ -339,27 +338,6 @@ $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;
@@ -389,16 +367,6 @@ $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;
@@ -618,8 +586,8 @@ $color-bar-radius: 3px;
   .sort-products-list {
     &__section {
       @include make-col(6);
-      color: $black;
-      border: 0;
+      color: black;
+      border: none;
 
       > .form-row {
         margin-bottom: 0;

package/build/css/account-families-main.css

@@ -1 +0,0 @@
-.prewrap{white-space:pre-wrap}.no-prewrap{white-space:nowrap}.prewrap-btn .btn{white-space:pre-wrap}.d-md-show-down{display:none}@media (max-width:767.98px){.d-md-show-down{display:block}}.clearboth{clear:both}.full-height{height:100%!important}.tooltip-inner{border-radius:0;max-width:280px!important;padding:4px!important;color:#fff;text-align:center;background-color:#8b8b8b}.my-account-ba .acc-icon.acc-icon{line-height:1.5rem;padding-top:5px}.my-account-ba .acc-icon.acc-icon+.table__content-heading.table__content-heading{flex:0 0 100%;max-width:100%}.my-account-ba .table__content-info{line-height:1.5rem}.my-account-ba .table__content-heading.table__content-heading{padding-top:5px;padding-bottom:3px;line-height:1.5rem}.page-create-business-account .account-heading__title{text-transform:none}.account-hub .globalMessages,.page-create-business-account .globalMessages,.page-edit-business-account .globalMessages,.page_my-account_new .globalMessages{width:100%}.account-hub .account-heading__content,.page-create-business-account .account-heading__content,.page-edit-business-account .account-heading__content{border:0}.page-create-business-account .content,.page-edit-business-account .content{padding-left:0;padding-right:0}.account-form__top-action{margin:0 15px 40px}.account-form__section{margin-bottom:40px;padding:15px;border-radius:10px;background:rgba(2,119,189,.1)}.account-form__group{padding:15px 0;border-radius:10px;background:#fff}.account-form [data-finder]+[data-manually]{padding-top:10px}.account-form .form-row{margin-bottom:10px}.account-form .form-row .tbx:read-only{background:rgba(2,119,189,.1);border-color:transparent}.account-form .form-row:last-of-type{margin-bottom:0}.account-form__warning{margin-top:0;margin-bottom:20px;font-size:1rem;font-weight:400}.account-form__title{margin:20px 0;font-size:1.25rem;color:#0a3055}.account-form__title:first-child{margin-top:0}.account-form__actions{padding:0 15px}.account-form__actions .btn{margin-bottom:10px}.account-form__actions .btn:last-child{margin-bottom:0}@media (min-width:576px){.my-account-ba .acc-icon.acc-icon{padding-top:10px}.my-account-ba .table__content-heading.table__content-heading{padding-top:10px;padding-bottom:0}.page-create-business-account .account-heading,.page-edit-business-account .account-heading{padding-left:0}.account-form .form-row,.account-hub .container,.page-create-business-account .container,.page-edit-business-account .container,.page_my-account_new .container{padding-left:0;padding-right:0}.account-form .form-row{margin-left:0;margin-right:0}.account-form__actions{padding:0}.account-form__top-action{margin-left:0;margin-right:0}}@media (min-width:768px){.page-create-business-account .account-heading__content{margin-bottom:15px}.account-form__top-action{margin-left:15px;margin-right:15px}.account-form__actions{display:flex;flex-direction:row-reverse;column-gap:10px}.account-form__actions .btn{margin-bottom:0}}@media (min-width:992px){.account-hub .content,.page-create-business-account .content,.page-edit-business-account .content{padding-left:15px;padding-right:15px}.page-create-business-account .account-heading__content{margin-bottom:10px}.account-form__actions{padding:0}.account-form__top-action{margin-left:0;margin-right:0}}.account-hub__empty .header,.account-hub__members .header{margin-bottom:20px;padding:0;font-size:1.5rem;font-weight:300;line-height:32px;word-break:break-word}.account-hub__empty .btn-edit .btn-icon,.account-hub__members .btn-edit .btn-icon{margin-right:8px;font-size:1rem}.account-hub__empty .description,.account-hub__members .description{margin:45px 0 20px;text-align:center;font-weight:500;font-size:1.25rem}.account-hub__empty .add-member,.account-hub__members .add-member{display:flex;justify-content:center}.account-hub__empty .add-member .btn,.account-hub__members .add-member .btn{padding-left:25px;padding-right:25px}.account-hub-modal .modal-dialog-centered{justify-content:center}.account-hub-modal .modal-box__inner-row{margin-left:0;margin-right:0}.account-hub-modal .modal-box__inner-columns{flex:0 0 100%;max-width:100%;padding-top:15px;padding-bottom:15px}.account-hub-modal .modal-box__inner-columns .title{margin-bottom:10px}.account-hub-modal .modal-box__inner-columns .description{margin-bottom:20px;font-size:1rem}.account-hub-modal .modal-box__inner-columns .strong{font-weight:500}.account-hub-modal .modal-box__inner-columns .actions{display:flex;width:100%;column-gap:10px}.account-hub-modal .modal-box__inner-columns .actions .btn{padding:8px}.account-hub__control .control__actions{display:flex;flex-wrap:wrap;gap:10px;width:100%}.account-hub__control .control__actions .btn-edit{flex:0 0 100%;max-width:100%}.account-hub__control .control__actions .btn-add,.account-hub__control .control__actions .btn-remove{max-width:calc(50% - 5px);padding-left:5px;padding-right:5px}.account-hub__control .control__sort{width:100%;margin-top:30px}.account-hub__control .control__sort .sort-order-by{flex-wrap:nowrap}.account-hub__control .control__sort .form-row{padding:0;margin:0}.account-hub__control .control__sort .form-row__label{padding-left:0;padding-right:10px;white-space:nowrap}.account-hub__control .control__sort .form-row__field{max-width:100%;padding:0}.account-hub__list{padding-top:30px}.account-hub__actions{margin-top:10px}.account-hub__actions .account-hub__remove{display:none}.account-hub__load{display:flex;justify-content:center;margin-bottom:10px}.account-hub__remove{flex-wrap:wrap;gap:10px;width:100%}.account-hub__remove .btn{max-width:calc(50% - 5px);padding-left:5px;padding-right:5px}.account-hub-remove .account-hub__remove{display:flex}.account-hub-remove .control__actions{display:none}@media (min-width:576px){.account-hub__control .control__actions{flex-wrap:nowrap}.account-hub__control .control__actions .btn-edit{flex:0 0 41.66667%;max-width:41.66667%}}@media (min-width:768px){.account-hub__empty .header,.account-hub__members .header{font-size:1.875rem;line-height:46px;text-align:center}.account-hub-modal .modal-box__columns{flex:0 0 100%;max-width:100%;width:540px}.account-hub__control .control__actions .btn-edit{flex:0 0 50%;max-width:50%}}@media (min-width:992px){.account-hub__empty .header,.account-hub__members .header{text-align:left}}.member-card{position:relative;margin-bottom:10px;padding:15px;background:rgba(2,119,189,.1);border-radius:10px}.member-card.member-card-admin{background:rgba(10,48,85,.1)}.member-card.member-card-admin .member-card__footer{justify-content:flex-end}.member-card.member-card-select{display:flex;background:rgba(2,119,189,.1)}.member-card.member-card-select .member-card__select{display:flex;flex-wrap:wrap;margin-right:10px}.member-card.member-card-select .member-card__name{max-width:100%}.member-card.member-card-select .member-card__email{margin-bottom:0}.member-card.member-card-select .member-card__footer{display:none}.member-card__email,.member-card__name{font-size:1.125rem;font-weight:500;line-height:1.5rem;color:#0a3055;margin-bottom:20px;word-break:break-word}.member-card__name{max-width:80%}.member-card__footer{display:flex;align-items:center;justify-content:space-between}.member-card__date{font-weight:400;font-size:1rem;line-height:1.5rem;margin:0}.member-card__label{position:absolute;right:0;top:0;display:inline-block;padding:4px 17px;border-radius:0 10px 0 16px;background:#0a3055;color:#fff;font-size:.75rem;line-height:1rem;font-weight:500;max-width:max-content}.member-card:last-of-type{margin-bottom:0}@media (min-width:576px){.member-card__name{max-width:90%}}@media (min-width:768px){.member-card__label{font-size:.875rem;padding:8px 30px}.member-card__footer{align-items:flex-end}.member-card__name{max-width:85%}.member-card__email{margin-bottom:10px}.member-card{padding:20px}}.page_add-members .account-heading__title{text-transform:none}.add-members{margin-bottom:40px;padding:15px;margin-left:-15px;margin-right:-15px;border-radius:10px;background:rgba(2,119,189,.1)}.add-members .new-member-form,.add-members .new-member-list{padding:15px;border-radius:10px;background:#fff}.add-members .new-member-form{margin-bottom:10px}.add-members .new-member-form-error .form-row__info.form-row__info{display:block}.add-members .new-member-form-error .form-row .tbx{border-color:#cf000f}.add-members .new-member-form-error .form-row .tbx:focus{border-color:#0277bd}.add-members .new-member-form__btn-add{display:flex;justify-content:center;align-items:center;transition:none}.add-members .new-member-form__btn-add .btn-icon{margin-right:8px;font-size:1rem}.add-members .new-member-form .form-row__info{display:none;padding-left:0;margin:8px 0 0;color:#cf000f}.add-members .new-member-form .form-row__field,.add-members .new-member-form .form-row__label{padding-left:0;padding-right:0}.add-members .new-member-list__title{margin-bottom:20px;font-size:1.25rem;line-height:2rem;color:#0a3055}.add-members .new-member-list__empty{padding:25px;color:#ccc;border:1px dashed #ccc;text-align:center}.add-members .new-member-list__empty .title{margin-bottom:5px;font-size:1.5rem;line-height:1.5rem;font-weight:500}.add-members .new-member-list__empty .description{margin-bottom:0;font-size:1rem;line-height:1.5rem}.add-members .member-field{display:flex;column-gap:10px;margin-bottom:20px}.add-members .member-field:last-of-type{margin-bottom:0}.add-members .member-field .btn-remove{height:-moz-fit-content;height:fit-content}.add-members .member-field .form-row{flex:1;margin:0;padding:0}.add-members .member-field .form-row__label{display:none}.add-members .member-field .form-row__field{padding-left:0;padding-right:0;margin-left:0;margin-right:0}.add-members .member-field .form-row .tbx{font-size:.875rem}.add-members .member-field .form-row .tbx:read-only{background:rgba(2,119,189,.1);border-color:transparent}.add-members__actions{padding:0}.add-members__actions .btn{margin-bottom:10px}.add-members__actions .btn:last-child{margin-bottom:0}@media (min-width:576px){.add-members__actions{margin-left:-15px;margin-right:-15px;display:flex;flex-direction:row-reverse;column-gap:10px;padding:0}.add-members__actions .btn{margin-bottom:0}.page_add-members .account-heading{padding-left:0}}@media (min-width:768px){.add-members .new-member-form{display:flex;align-items:flex-end;column-gap:20px}.add-members .new-member-form .form-row{width:100%;margin:0}.add-members .new-member-form__btn-add{flex:0 0 50%;max-width:215px;height:-moz-fit-content;height:fit-content}.add-members .new-member-form-error .form-row__info.form-row__info{display:block}.add-members .new-member-form-error .new-member-form__btn-add{margin-bottom:24px}.add-members__actions{margin-left:0;margin-right:0}.add-members__actions .btn{margin-bottom:0}}@media (min-width:992px){.add-members{margin-left:0;margin-right:0}}