wickes-css2 2.113.0-develop.1 → 2.113.0-develop.11

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/pages/page_top-rated.scss

@@ -13,7 +13,7 @@
       &::after {
         content: '';
         position: absolute;
-        left: calc(50% - 200px/2);
+        left: calc(50% - 200px / 2);
         bottom: 30px;
         width: 200px;
         height: 8px;
@@ -144,7 +144,7 @@
       background-color: $gray-light;
       position: absolute;
       top: -330px;
-      left: calc(50% - 310px/2);
+      left: calc(50% - 310px / 2);
       z-index: 5;
 
       &-number {
@@ -163,8 +163,8 @@
         width: 235px;
         height: 115px;
         position: absolute;
-        top: calc(50% - 115px/2);
-        left: calc(50% - 235px/2);
+        top: calc(50% - 115px / 2);
+        left: calc(50% - 235px / 2);
 
         .review-name {
           margin-top: 20px;
@@ -175,7 +175,9 @@
       &-wrap {
         opacity: 0;
         visibility: hidden;
-        transition: 0.55s opacity, 0.55s visibility;
+        transition:
+          0.55s opacity,
+          0.55s visibility;
 
         &.show {
           opacity: 1;
@@ -234,7 +236,11 @@
               bottom: 0;
               right: 0;
               margin: 0 5px;
-              background: linear-gradient(180deg, $black-transparent35 0% , $white-transparent20 100%);
+              background: linear-gradient(
+                180deg,
+                $black-transparent35 0%,
+                $white-transparent20 100%
+              );
               z-index: 2;
             }
 
@@ -251,7 +257,7 @@
             position: absolute;
             width: 105px;
             top: 10px;
-            left: calc(50% - 105px/2);
+            left: calc(50% - 105px / 2);
             text-align: center;
             z-index: 4;
 
@@ -270,11 +276,11 @@
           }
         }
 
-        &:nth-of-type(4n+3) .product-number {
+        &:nth-of-type(4n + 3) .product-number {
           right: 15px;
         }
 
-        &:nth-of-type(4n+1) .product-number {
+        &:nth-of-type(4n + 1) .product-number {
           left: 15px;
         }
       }
@@ -338,7 +344,11 @@
               left: 0;
               bottom: 0;
               right: 0;
-              background: linear-gradient(180deg, $black-transparent35 0% , $white-transparent20 100%);
+              background: linear-gradient(
+                180deg,
+                $black-transparent35 0%,
+                $white-transparent20 100%
+              );
               z-index: 2;
             }
 
@@ -356,7 +366,7 @@
             position: absolute;
             width: 105px;
             top: 10px;
-            left: calc(50% - 105px/2);
+            left: calc(50% - 105px / 2);
             z-index: 4;
             text-align: center;
 
@@ -395,7 +405,9 @@
       z-index: 10;
       opacity: 0;
       visibility: hidden;
-      transition: 0.55s opacity, 0.55s visibility;
+      transition:
+        0.55s opacity,
+        0.55s visibility;
       text-decoration: none;
 
       &-link {
@@ -448,7 +460,7 @@
           position: relative;
           height: 53px;
           width: 53px;
-          top: calc(50% - 53px/2);
+          top: calc(50% - 53px / 2);
         }
       }
     }
@@ -535,7 +547,7 @@
 
       &:not(:last-child) {
         &::after {
-          left: calc(50% - 555px/2);
+          left: calc(50% - 555px / 2);
           bottom: 36px;
           width: 555px;
         }
@@ -569,8 +581,8 @@
         height: 350px;
         width: 350px;
         border: 10px solid $white;
-        left: calc(50% - 350px/2);
-        top: calc(50% - 350px/2);
+        left: calc(50% - 350px / 2);
+        top: calc(50% - 350px / 2);
 
         &-text {
           font-size: 1.25rem;
@@ -606,7 +618,7 @@
             &-star-rate {
               width: 200px;
               top: 20px;
-              left: calc(50% - 200px/2);
+              left: calc(50% - 200px / 2);
 
               &__img {
                 width: 70%;
@@ -618,15 +630,15 @@
             }
           }
 
-          &:nth-of-type(4n+3) .product-number {
+          &:nth-of-type(4n + 3) .product-number {
             right: 30px;
           }
 
-          &:nth-of-type(4n+1) .product-number {
+          &:nth-of-type(4n + 1) .product-number {
             left: 30px;
           }
 
-          &:nth-of-type(n+4) {
+          &:nth-of-type(n + 4) {
             & .product-star-rate,
             & .product-number {
               top: auto;
@@ -634,7 +646,11 @@
             }
 
             & .product-img::after {
-              background: linear-gradient(180deg, $white-transparent20 0, $black-transparent35 100%);
+              background: linear-gradient(
+                180deg,
+                $white-transparent20 0,
+                $black-transparent35 100%
+              );
             }
           }
         }
@@ -665,7 +681,7 @@
             &-star-rate {
               width: 200px;
               top: 20px;
-              left: calc(50% - 200px/2);
+              left: calc(50% - 200px / 2);
 
               &__img {
                 width: 70%;
@@ -748,7 +764,6 @@
 
 @include media-breakpoint-only(md) {
   .top-rated-page {
-
     .great-quality {
       &-block {
         .card-slider {

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

@@ -1192,6 +1192,8 @@
                                                                 target="_blank">Checkout- Payment Details with card loader</a></li>
                         <li><span class="page-id">9.11</span><a href="page_checkout_premium-delivery-details.html"
                                                               target="_blank">Checkout - Premium Delivery Details</a></li>
+                        <li><span class="page-id">9.11</span><a href="page_checkout_big-bulky-delivery-details.html"
+                                                              target="_blank">Checkout - Big & Bulky Delivery Details</a></li>
                     </ul>
 
                     <h3>App</h3>
@@ -1293,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>
@@ -1305,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}