wickes-css2 2.107.0-develop.5 → 2.107.0-develop.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wickes-css2",
-  "version": "2.107.0-develop.5",
+  "version": "2.107.0-develop.7",
   "description": "CSS and JS and page templates in use by Wickes",
   "main": "index.js",
   "scripts": {

package/src/data/data_quick-filter.json

@@ -6,7 +6,7 @@
       "values": [
         {
           "text": null,
-          "additionalData": "./img/quick-filters/bath1.svg",
+          "additionalData": "./img/quick-filters/bath4.svg",
           "url": "?filter=icon1",
           "selected": false
         },
@@ -221,8 +221,8 @@
       "displayText": "Select Size",
       "values": [
         {
-          "text": "Double ended baths",
-          "additionalData": "./img/quick-filters/bath1.svg",
+          "text": "15 minute Click & Collect",
+          "additionalData": "./img/quick-filters/bath4.svg",
           "url": "?size=double",
           "selected": false
         },

package/src/scss/components/_plp-filters.scss

@@ -261,6 +261,15 @@
   }
 }
 
+@include media-breakpoint-only(sm) {
+  .products-list-page {
+    .plp-filters {
+      width: 100vw;
+      margin-left: calc(50% - 50vw);
+    }
+  }
+}
+
 @include media-breakpoint-up(md) {
   .plp-filters {
     background: $gray-bg;

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

@@ -43,16 +43,24 @@ $quick-filter-shadow: rgba(0, 0, 0, 0.12);
       border-radius: 8px;
     }
 
-    &--selected {
-      color: $blue;
-      border-color: $blue;
-    }
-
     &:hover,
     &:focus,
     &:active {
       text-decoration: none;
       border-color: $blue;
+      color: $gray-dark;
+    }
+
+    &--selected {
+      color: $blue;
+      border-color: $blue;
+
+      &:hover,
+      &:focus,
+      &:active {
+        color: $blue-darker;
+        border-color: $blue-darker;
+      }
     }
   }
 
@@ -151,11 +159,23 @@ $quick-filter-shadow: rgba(0, 0, 0, 0.12);
       img {
         width: 58px;
         height: 58px;
+        border-radius: 0;
       }
 
-      &--selected img {
-        // prettier-ignore
-        filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(1821%) hue-rotate(188deg) brightness(95%) contrast(101%);
+      &--selected {
+        img {
+          // prettier-ignore
+          filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(1821%) hue-rotate(188deg) brightness(95%) contrast(101%);
+        }
+
+        &:hover,
+        &:focus,
+        &:active {
+          img {
+            // prettier-ignore
+            filter: brightness(0) saturate(100%) invert(17%) sepia(94%) saturate(1900%) hue-rotate(190deg) brightness(85%) contrast(105%);
+          }
+        }
       }
     }
   }
@@ -167,11 +187,23 @@ $quick-filter-shadow: rgba(0, 0, 0, 0.12);
       img {
         width: 58px;
         height: 58px;
+        border-radius: 0;
       }
 
-      &--selected img {
-        // prettier-ignore
-        filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(1821%) hue-rotate(188deg) brightness(95%) contrast(101%);
+      &--selected {
+        img {
+          // prettier-ignore
+          filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(1821%) hue-rotate(188deg) brightness(95%) contrast(101%);
+        }
+
+        &:hover,
+        &:focus,
+        &:active {
+          img {
+            // prettier-ignore
+            filter: brightness(0) saturate(100%) invert(17%) sepia(94%) saturate(1900%) hue-rotate(190deg) brightness(85%) contrast(105%);
+          }
+        }
       }
     }
   }

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

@@ -3,6 +3,12 @@
     padding: 20px 0 0;
   }
 
+  &.accordion {
+    &:first-child {
+      border-top: 1px solid $gray;
+    }
+  }
+
   &__facet-cta {
     background: transparent;
     border: 0;

package/src/scss/components/card-product-banner.scss

@@ -13,15 +13,6 @@
     padding: 0 5px;
     margin-bottom: 20px;
 
-    &::before {
-      content: '';
-      position: absolute;
-      top: -20px;
-      left: 5px;
-      width: calc(100% - 10px);
-      border-bottom: 1px solid #ccc;
-    }
-
     &::after {
       content: '';
       position: absolute;
@@ -107,7 +98,7 @@
   }
 
   .products-list-v2 {
-    .card-sponsor-product:nth-of-type(n+3) {
+    .card-sponsor-product:nth-of-type(n + 3) {
       .card {
         &:before {
           content: none;

package/src/scss/pages/page_product_search.scss

@@ -300,7 +300,7 @@
     margin-right: -5px;
     margin-left: -5px;
     margin-top: 0;
-    padding-top: 40px;
+    padding-top: 20px;
     overflow-x: hidden;
 
     &__badges {
@@ -312,16 +312,6 @@
       padding-left: 5px;
       padding-right: 5px;
       position: relative;
-
-      &:nth-of-type(1)::before,
-      &:nth-of-type(2)::before {
-        content: '';
-        position: absolute;
-        top: -20px;
-        left: 5px;
-        width: calc(100% - 10px);
-        border-bottom: 1px solid $gray;
-      }
     }
   }
 }
@@ -344,8 +334,8 @@
   .sort-products-list {
     &__section {
       @include make-col(6);
-      color: black;
-      border: none;
+      color: #000000;
+      border: 0;
 
       > .form-row {
         margin-bottom: 0;

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

@@ -256,7 +256,7 @@ $color-bar-radius: 3px;
     margin-right: -5px;
     margin-left: -5px;
     margin-top: 0;
-    padding-top: 40px;
+    padding-top: 20px;
     overflow-x: hidden;
   }
 
@@ -279,20 +279,6 @@ $color-bar-radius: 3px;
     padding: 3px 5px;
   }
 
-  .card {
-    &:nth-of-type(1)::before,
-    &:nth-of-type(2)::before {
-      @include media-breakpoint-down(sm) {
-        content: '';
-        position: absolute;
-        top: -20px;
-        left: 5px;
-        width: calc(100% - 10px);
-        border-bottom: 1px solid $gray;
-      }
-    }
-  }
-
   .card {
     @include media-breakpoint-down(sm) {
       margin-bottom: 20px;
@@ -300,24 +286,11 @@ $color-bar-radius: 3px;
       display: inline-block;
       vertical-align: top;
       max-width: 50%;
-      margin-right: -4px;
       padding-left: 5px;
       padding-right: 5px;
       width: 50%;
     }
 
-    &:nth-of-type(1)::before,
-    &:nth-of-type(2)::before {
-      @include media-breakpoint-down(sm) {
-        content: '';
-        position: absolute;
-        top: -20px;
-        left: 5px;
-        width: calc(100% - 10px);
-        border-bottom: 1px solid $gray;
-      }
-    }
-
     &__inner-v2.card__inner-v2.card__inner-v2 {
       padding-bottom: 0;
 

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

@@ -1,13 +1,11 @@
 @import '../helpers/helpers';
 
-
 .products-list-v2 {
-
   @include media-breakpoint-down(sm) {
     margin-right: -5px;
     margin-left: -5px;
     margin-top: 0;
-    padding-top: 40px;
+    padding-top: 20px;
     overflow-x: hidden;
   }
 
@@ -17,7 +15,7 @@
     font-size: 1rem;
 
     @include media-breakpoint-down(sm) {
-      font-size: .875rem;
+      font-size: 0.875rem;
     }
   }
 
@@ -31,28 +29,13 @@
   }
 
   .card {
-
     @include media-breakpoint-down(sm) {
       position: relative;
       display: inline-block;
       vertical-align: top;
       max-width: 50%;
-      margin-right: -4px;
       padding-left: 5px;
       padding-right: 5px;
-
-    }
-
-    &:nth-of-type(1)::before,
-    &:nth-of-type(2)::before {
-      @include media-breakpoint-down(sm) {
-        content: '';
-        position: absolute;
-        top: -20px;
-        left: 5px;
-        width: calc(100% - 10px);
-        border-bottom: 1px solid $gray;
-      }
     }
   }
 }