wickes-css2 2.113.0-develop.7 → 2.113.0-develop.8

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

@@ -5,88 +5,31 @@
 .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;
-    }
-
-    @include media-breakpoint-up(lg) {
-      grid-column-start: 3;
-      grid-row: 1 / span 3;
-      padding-left: 20px;
-    }
   }
 
   &__fulfilment {
@@ -102,32 +45,15 @@
   }
 
   &__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 {
@@ -139,7 +65,7 @@
   }
 
   &__main {
-    padding-top: 40px;
+    padding-top: 10px;
 
     :where(ul, ol) {
       list-style: revert;
@@ -153,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 {
@@ -175,6 +93,27 @@
     overflow: hidden;
   }
 
+  &__suite-includes {
+    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;
@@ -184,9 +123,7 @@
 }
 
 .recently-viewed {
-  @include media-breakpoint-down(md) {
-    display: none;
-  }
+  display: none;
 }
 
 .review-star {
@@ -216,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 {
@@ -233,11 +166,7 @@
 }
 
 .product-code-v2 {
-  margin-right: 15px;
-
-  @include media-breakpoint-down(sm) {
-    margin-right: 5px;
-  }
+  margin-right: 5px;
 }
 
 .review-star-average-v2 {
@@ -301,6 +230,10 @@
 
 @include media-breakpoint-up(sm) {
   .pdp {
+    &__full-gallery {
+      margin: 0 0 24px;
+    }
+
     &__widget {
       margin-left: 0;
       margin-right: 0;
@@ -310,11 +243,48 @@
 
 @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;
@@ -325,17 +295,83 @@
       }
     }
 
+    &__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: 20px;
     }
@@ -343,5 +379,30 @@
     &__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

@@ -126,6 +126,17 @@
     }
   }
 
+  &__suite-includes {
+    @include media-breakpoint-up(md) {
+      grid-column: 1;
+      grid-row: 4 / span 1;
+    }
+
+    @include media-breakpoint-up(lg) {
+      grid-column: 1 / span 2;
+    }
+  }
+
   &__tabs {
     padding-bottom: 40px;
 

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

@@ -42,6 +42,7 @@
 @import 'components/wisdom-critical';
 @import 'components/clearpay';
 @import 'components/billie-online-messaging';
+@import 'components/thumb-gallery-critical';
 
 // Pages
 @import 'pages/page_product-details-critical';

package/src/scss/pdp-main.scss

@@ -80,6 +80,12 @@
 @import 'components/billie-online-messaging';
 @import 'components/billie-modal';
 @import 'components/input-counter';
+@import 'components/suite-includes';
+@import 'components/suite-product-card';
+@import 'components/image-accordion';
+@import 'components/thumb-gallery';
+@import 'components/postcode-checker';
+
 @import 'components/notify-me-modal';
 @import 'components/bloomreach/bloomreach';
 

package/src/scss/plp-main.scss

@@ -28,6 +28,11 @@
 @import 'components/card-product-banner';
 @import 'components/shop-colour';
 @import 'components/quick-filter';
+@import 'components/package-plp';
+@import 'components/package-card';
+@import 'components/kitchen/price';
+@import 'components/kitchen/strip-stickers';
+@import 'components/price-block-v2-critical';
 
 // Pages
 @import 'pages/page_products-list-combined';

package/src/sitemap.html

@@ -1295,6 +1295,18 @@
                         <li><span class="page-id">9</span><a href="page_plp_v2-quick-filter_textOnly_5.html" target="_blank">PLP Quick filter - Text Only (5 variants)</a></li>
                         <li><span class="page-id">10</span><a href="page_plp_v2-quick-filter_textOnly_9.html" target="_blank">PLP Quick filter - Text Only (9 variants)</a></li>
                     </ul>
+                    <h3>Ripple</h3>
+                    <ul>
+                        <li><span class="page-id">1</span><a href="page_product-details-suite-includes.html" target="_blank">PDP - with This suite includes</a></li>
+                        <li><span class="page-id">2</span><a href="page_product-details-suite-includes-vat.html" target="_blank">PDP - with This suite includes VAT</a></li>
+                        <li><span class="page-id">3</span><a href="page_product-details-ripple-gallery.html" target="_blank">PDP - gallery with 5 images</a></li>
+                        <li><span class="page-id">4</span><a href="page_product-details-suite-includes-banners.html" target="_blank">PDP - with Banners</a></li>
+                        <li><span class="page-id">5</span><a href="page_product-details-suite-includes-klarna.html" target="_blank">PDP - with Klarna</a></li>
+                        <li><span class="page-id">6</span><a href="page_product-details-suite-includes-billie.html" target="_blank">PDP - with Billie</a></li>
+                        <li><span class="page-id">7</span><a href="page_bathroom-plp.html" target="_blank">PLP - bathroom</a></li>
+                        <li><span class="page-id">8</span><a href="page_bathroom-plp-vat.html" target="_blank">PLP - bathroom VAT</a></li>
+                        <li><span class="page-id">9</span><a href="page_bathroom-plp-without-load-more.html" target="_blank">PLP - without Load more</a></li>
+                    </ul>
                 </div>
             </div>
         </div>
@@ -1307,6 +1319,7 @@
                 <li><a href="CTAs.html" target="_blank">Call to action</a></li>
                 <li><a href="notifications.html" target="_blank">Notifications</a></li>
                 <li><a href="badges.html" target="_blank">Badges</a></li>
+                <li><a href="badges-ripple.html" target="_blank">Badges static</a></li>
                 <li><a href="loader-page.html" target="_blank">Loader</a></li>
             </ul>
         </div>

package/build/css/components/kitchen/strip-stickers.css

@@ -1 +0,0 @@
-.strip-stickers{display:flex;flex-wrap:wrap;gap:8px}.strip-stickers .strip-sticker{padding:4px 12px;font-size:.875rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strip-stickers--right{justify-content:flex-end}

package/build/css/components/strip-stickers.css

@@ -1 +0,0 @@
-.strip-stickers{display:flex;flex-wrap:wrap;gap:8px}.strip-stickers .strip-sticker{padding:4px 12px;font-size:.875rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strip-stickers--right{justify-content:flex-end}

package/src/scss/components/kitchen/strip-stickers.scss

@@ -1,18 +0,0 @@
-.strip-stickers {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-
-  .strip-sticker {
-    padding: 4px 12px;
-    font-size: 0.875rem;
-    font-weight: 500;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  &--right {
-    justify-content: flex-end;
-  }
-}

package/src/scss/components/strip-stickers.scss

@@ -1,18 +0,0 @@
-.strip-stickers {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-
-  .strip-sticker {
-    padding: 4px 12px;
-    font-size: 0.875rem;
-    font-weight: 500;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  &--right {
-    justify-content: flex-end;
-  }
-}