wickes-css2 2.107.0-ripple.2 → 2.107.0-ripple.21

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

@@ -5,121 +5,55 @@
 .pdp {
   &__title {
     padding-bottom: 0;
-
-    @include media-breakpoint-only(md) {
-      padding-right: 0;
-    }
   }
 
   &__reviews_small {
     padding-bottom: 0;
     display: flex;
     align-items: baseline;
-
-    @include media-breakpoint-only(md) {
-      margin-top: 20px;
-      margin-bottom: 20px;
-      padding-left: 0;
-    }
-
-    @include media-breakpoint-up(lg) {
-      padding-left: 0;
-      padding-right: 10px;
-      margin-top: 20px;
-      margin-bottom: 20px;
-    }
-
-    @include media-breakpoint-down(sm) {
-      margin-top: 10px;
-      margin-bottom: 15px;
-      min-height: 47px;
-    }
+    margin-top: 10px;
+    margin-bottom: 15px;
+    min-height: 47px;
   }
 
   &__reviews-link-wrap {
     margin-right: $btn-padding-x;
   }
 
-  &__gallery {
-    @include media-breakpoint-up(md) {
-      grid-column-start: 1;
-      grid-row-start: 2;
-    }
-
-    @include media-breakpoint-up(lg) {
-      padding-right: 20px;
-      padding-bottom: 20px;
-    }
+  &__full-gallery {
+    margin: 0 -15px 20px;
   }
 
   &__description {
     padding-bottom: 0;
-
-    @include media-breakpoint-only(md) {
-      grid-column-start: 1;
-      grid-row-start: 3;
-      padding-right: 15px;
-    }
-
-    @include media-breakpoint-up(lg) {
-      grid-column-start: 2;
-      grid-row-start: 2;
-      padding-left: 10px;
-      padding-right: 10px;
-    }
-
-    @include media-breakpoint-down(sm) {
-      padding-bottom: 0;
-    }
   }
 
   &__aside {
     padding-bottom: 0;
+  }
 
-    @include media-breakpoint-only(md) {
-      grid-column-start: 2;
-      grid-row: 2 / span 2;
-      padding-left: 15px;
-    }
+  &__fulfilment {
+    margin-top: 10px;
 
-    @include media-breakpoint-up(lg) {
-      grid-column-start: 3;
-      grid-row: 1 / span 3;
-      padding-left: 20px;
+    &-mobile {
+      display: block;
     }
-  }
 
-  &__fulfilment {
-    margin-top: 30px;
+    &-desktop {
+      display: none;
+    }
   }
 
   &__similar {
-    @include media-breakpoint-down(md) {
-      display: none;
-    }
+    display: none;
   }
 
   &__info {
-    margin-bottom: 10px;
-    padding: 20px;
     background-color: $gray-light;
-
-    @include media-breakpoint-up(lg) {
-      grid-column: 1 / span 3;
-      grid-row: 5 / span 1;
-    }
-
-    @include media-breakpoint-down(md) {
-      padding: 30px 40px;
-      grid-column: 1 / span 3;
-      grid-row: 5 / span 1;
-      margin-bottom: 40px;
-    }
-
-    @include media-breakpoint-down(sm) {
-      padding: 20px 15px;
-      margin-bottom: 30px;
-    }
+    grid-column: 1 / span 3;
+    grid-row: 5 / span 1;
+    padding: 20px 15px;
+    margin-bottom: 30px;
   }
 
   &__quantity {
@@ -131,7 +65,7 @@
   }
 
   &__main {
-    padding-top: 40px;
+    padding-top: 10px;
 
     :where(ul, ol) {
       list-style: revert;
@@ -145,14 +79,6 @@
     .share-buttons__list {
       list-style: none;
     }
-
-    @include media-breakpoint-only(md) {
-      padding-top: 35px;
-    }
-
-    @include media-breakpoint-down(sm) {
-      padding-top: 10px;
-    }
   }
 
   &__recently-viewed {
@@ -168,14 +94,36 @@
   }
 
   &__suite-includes {
-    padding-bottom: 30px;
+    margin-bottom: 24px;
+  }
+
+  &--ripple {
+    & .pdp {
+      &__fulfilment {
+        margin-top: 0;
+        margin-bottom: 24px;
+      }
+
+      &__info {
+        margin-bottom: 24px;
+      }
+    }
+
+    & .seo-widgets {
+      padding-top: 0;
+    }
+  }
+
+  &__widget {
+    margin-top: 16px;
+    margin-bottom: 20px;
+    margin-left: -15px;
+    margin-right: -15px;
   }
 }
 
 .recently-viewed {
-  @include media-breakpoint-down(md) {
-    display: none;
-  }
+  display: none;
 }
 
 .review-star {
@@ -205,12 +153,8 @@
 }
 
 .product-main-info__description.product-main-info__description {
-  margin-bottom: 20px;
+  margin-bottom: 15px;
   position: relative;
-
-  @include media-breakpoint-down(md) {
-    margin-bottom: 15px;
-  }
 }
 
 .gallery_bordered {
@@ -222,11 +166,7 @@
 }
 
 .product-code-v2 {
-  margin-right: 15px;
-
-  @include media-breakpoint-down(sm) {
-    margin-right: 5px;
-  }
+  margin-right: 5px;
 }
 
 .review-star-average-v2 {
@@ -288,30 +228,181 @@
   margin-top: auto;
 }
 
+@include media-breakpoint-up(sm) {
+  .pdp {
+    &__full-gallery {
+      margin: 0 0 24px;
+    }
+
+    &__widget {
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+}
+
 @include media-breakpoint-up(md) {
   .pdp {
+    &__title {
+      padding-right: 0;
+    }
+
+    &__reviews_small {
+      margin-top: 20px;
+      margin-bottom: 20px;
+      padding-left: 0;
+    }
+
+    &__full-gallery {
+      grid-column: 1;
+      grid-row-start: 2;
+    }
+
+    &__full-description {
+      grid-column: 1;
+      grid-row-start: 3;
+    }
+
+    &__gallery {
+      grid-column-start: 1;
+      grid-row-start: 2;
+    }
+
+    &__description {
+      grid-column-start: 1;
+      grid-row-start: 3;
+      padding-right: 15px;
+    }
+
+    &__aside {
+      grid-column-start: 2;
+      grid-row: 2 / span 2;
+      padding-left: 15px;
+    }
+
     &__fulfilment {
       margin-top: 10px;
       margin-bottom: 5px;
       grid-column: 1 / span 4;
-      grid-row: 5 / span 1;
+      grid-row: 6 / span 1;
+
+      &-mobile {
+        display: none;
+      }
+
+      &-desktop {
+        display: block;
+      }
+    }
+
+    &__info {
+      padding: 30px 40px;
+      margin-bottom: 40px;
+    }
+
+    &__main {
+      padding-top: 35px;
     }
 
     &__suite-includes {
+      margin-bottom: 40px;
       grid-column: 1;
+    }
+
+    &__widget {
+      grid-column: 1 / span 4;
       grid-row: 4 / span 1;
+      margin-top: 20px;
+      margin-bottom: 10px;
     }
+
+    &__banner {
+      grid-column: 1 / span 4;
+      grid-row: 5 / span 1;
+    }
+
+    &--ripple {
+      & .pdp {
+        &__fulfilment {
+          margin-top: 0;
+          margin-bottom: 25px;
+        }
+
+        &__info {
+          margin-bottom: 40px;
+        }
+      }
+    }
+  }
+
+  .product-code-v2 {
+    margin-right: 15px;
   }
 }
 
 @include media-breakpoint-up(lg) {
   .pdp {
+    &__reviews_small {
+      padding-right: 10px;
+    }
+
+    &__gallery {
+      padding-right: 20px;
+      padding-bottom: 20px;
+    }
+
+    &__description {
+      grid-column-start: 2;
+      grid-row-start: 2;
+      padding-left: 10px;
+      padding-right: 10px;
+    }
+
+    &__full-gallery {
+      grid-column: 1 / span 2;
+    }
+
+    &__full-description {
+      grid-column: 1 / span 2;
+    }
+
+    &__aside {
+      grid-column-start: 3;
+      grid-row: 1 / span 3;
+      padding-left: 20px;
+    }
+
     &__fulfilment {
-      margin-top: 30px;
+      margin-top: 20px;
+    }
+
+    &__widget {
+      margin-bottom: 0;
+    }
+
+    &__similar {
+      display: block;
+    }
+
+    &__info {
+      padding: 20px;
+      margin-bottom: 10px;
+    }
+
+    &__main {
+      padding-top: 40px;
     }
 
     &__suite-includes {
       grid-column: 1 / span 2;
     }
   }
+
+  .recently-viewed {
+    display: block;
+  }
+
+  .product-main-info__description.product-main-info__description {
+    margin-bottom: 20px;
+  }
 }

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

@@ -127,8 +127,6 @@
   }
 
   &__suite-includes {
-    padding-bottom: 30px;
-
     @include media-breakpoint-up(md) {
       grid-column: 1;
       grid-row: 4 / span 1;

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

@@ -51,10 +51,17 @@ $color-bar-radius: 3px;
     margin-bottom: 20px;
     margin-top: 10px;
 
+    &__picture {
+      display: flex;
+    }
+
     &__image {
       display: block;
       max-width: 100%;
-      margin-bottom: 20px;
+    }
+
+    img.sponsor-top-banner__image {
+      width: 100%;
     }
   }
 

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

@@ -39,11 +39,18 @@
   }
 
   .sponsor-top-banner {
+    &__picture {
+      display: flex;
+    }
+
     &__image {
-      margin-bottom: 20px;
       display: block;
       max-width: 100%;
     }
+
+    img.sponsor-top-banner__image {
+      width: 100%;
+    }
   }
 }
 

package/src/scss/pages/page_shopping-cart-v2.scss

@@ -16,7 +16,6 @@
     @include make-col-ready;
   }
 
-
   &__main,
   .content,
   .right-aside {
@@ -102,6 +101,16 @@
           display: flex;
         }
 
+        &:has(.checkout-widget__item-delivery-cost-message) {
+          .checkout-widget__item-charity {
+            order: 0;
+          }
+
+          .checkout-widget__voucher-accordion {
+            order: 2;
+          }
+        }
+
         .checkout-widget {
           &__item {
             &-bold {
@@ -128,7 +137,6 @@
             }
           }
 
-
           &__details-discount {
             order: 1;
           }
@@ -151,7 +159,7 @@
       .checkout-widget {
         &__item {
           font-weight: 400;
-          font-size: .875rem;
+          font-size: 0.875rem;
           padding: 10px 0;
           margin: 0;
 
@@ -175,7 +183,6 @@
             padding: 0;
           }
 
-
           &:not(.checkout-widget__item-vat) {
             margin-top: 0;
           }
@@ -188,15 +195,34 @@
             margin: 0;
             padding: 0 0 10px;
             color: $warm-grey;
-            font-size: .75rem;
+            font-size: 0.75rem;
             border-bottom: 1px solid #eee;
           }
+
+          &-delivery:has(+ .checkout-widget__item-delivery-cost-message) {
+            padding-bottom: 0;
+          }
+
+          &-delivery-cost-message {
+            padding-top: 0;
+            margin-top: 4px !important;
+            margin-bottom: 0;
+            justify-content: flex-end;
+
+            #order-delivery-cost-message {
+              @include font-size(10);
+              @include line-height(12);
+
+              font-weight: 700;
+              color: $squant;
+            }
+          }
         }
 
         &__detail {
           &-name {
             font-weight: 400;
-            font-size: .875rem;
+            font-size: 0.875rem;
 
             .accordion__header-icon-small {
               left: 75px;
@@ -206,7 +232,7 @@
 
           &-value {
             color: $gray-dark;
-            font-size: .875rem;
+            font-size: 0.875rem;
           }
         }
 
@@ -276,7 +302,7 @@
         & h5 {
           margin: 0;
           margin-top: 8px;
-          font-size: .875rem;
+          font-size: 0.875rem;
         }
       }
     }
@@ -357,7 +383,6 @@
             }
           }
         }
-
       }
     }
   }
@@ -535,7 +560,6 @@
   }
 }
 
-
 @include media-breakpoint-up(xl) {
   .basket {
     .checkout-title {

package/src/scss/pages/page_store-locator.scss

@@ -7,16 +7,26 @@ h1 {
 
 .cards-store {
   &-list {
-    @include make-col-ready;
-    margin-bottom: 20px;
+    padding-right: 0;
+    padding-left: 0;
+    height: auto;
 
     &__actions {
-      margin: 0 auto;
+      margin: 24px auto 0;
     }
   }
 
   &-wrapper {
     padding-top: 40px;
+
+    .row {
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: 16px;
+      margin-right: 0;
+      margin-left: 0;
+      align-items: start;
+    }
   }
 }
 
@@ -40,10 +50,6 @@ h1 {
   padding-top: 20px;
 }
 
-.cards-store-list__actions {
-  margin: 0 auto;
-}
-
 .btn_store-near-me {
   @include button-full;
   margin-bottom: 20px;
@@ -52,25 +58,20 @@ h1 {
 @include media-breakpoint-down(sm) {
   .cards-store {
     &-list {
-      @include make-col-ready;
-      @include make-col(12);
-
       &__actions {
-        @include make-col-ready;
-        @include make-col(12);
+        width: 100%;
 
         .icon__eye {
-          svg {
-            vertical-align: -.45em;
-            height: 1.375rem;
-            width: 1.3125rem;
+          svg,
+          i {
+            vertical-align: -0.15em;
             margin-right: 5px;
           }
         }
       }
     }
 
-    &-list_open .cards-store-list:not(:nth-child(-n+3)) {
+    &-list_open .cards-store-list:not(:nth-child(-n + 3)) {
       display: block;
     }
   }
@@ -92,18 +93,28 @@ h1 {
   }
 }
 
-@include media-breakpoint-up(md) {
+@include media-breakpoint-up(sm) {
   .cards-store {
-    &-list {
-      @include make-col-ready;
-      @include make-col(4);
+    &-wrapper {
+      .row {
+        grid-template-columns: repeat(2, 1fr);
+      }
+    }
 
-      &__actions {
-        display: none;
+    &-list__actions {
+      margin: 24px 0 0;
+      display: flex;
+      justify-content: center;
+
+      .btn {
+        min-width: 148px;
+        width: auto;
       }
     }
   }
+}
 
+@include media-breakpoint-up(md) {
   .btn_store-near-me {
     display: none;
   }
@@ -111,9 +122,20 @@ h1 {
 
 @include media-breakpoint-up(lg) {
   .cards-store {
-    &-list {
-      @include make-col-ready;
-      @include make-col(3);
+    &-wrapper {
+      .row {
+        grid-template-columns: repeat(3, 1fr);
+      }
+    }
+  }
+}
+
+@include media-breakpoint-up(xl) {
+  .cards-store {
+    &-wrapper {
+      .row {
+        grid-template-columns: repeat(4, 1fr);
+      }
     }
   }
 }

package/src/scss/pdp-main-critical.scss

@@ -40,9 +40,9 @@
 @import 'components/price-block-critical';
 @import 'components/price-block-v2-critical';
 @import 'components/wisdom-critical';
-@import 'components/pdp-action-v2';
 @import 'components/clearpay';
 @import 'components/billie-online-messaging';
+@import 'components/thumb-gallery-critical';
 
 // Pages
 @import 'pages/page_product-details-critical';