wickes-css2 2.113.0-develop.5 → 2.113.0-develop.6

package/src/scss/components/_heavy-banners.scss

@@ -0,0 +1,216 @@
+// Big & Bulky (Heavy) delivery banners component
+// Used on delivery details page for heavy/bulky orders
+// Mobile-first approach
+
+.delivery-block {
+  &__show-products {
+    display: inline-block;
+    margin-bottom: 20px;
+    font-size: 1rem;
+    color: $blue;
+    text-decoration: underline;
+
+    &:hover {
+      color: $blue-darker;
+    }
+  }
+
+  &__weight-banner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: $ma-white;
+    padding: 8px;
+    margin: 0 -15px;
+    gap: 8px;
+    border-bottom: 1px solid $blue-satin;
+
+    .banner-news + & {
+      margin-top: 20px;
+    }
+
+    &-content {
+      p {
+        @include font-size(12);
+        @include line-height(16);
+        color: $blue-ocean;
+        font-weight: 700;
+        margin: 0;
+        text-align: center;
+      }
+    }
+
+    &-icon {
+      flex-shrink: 0;
+      width: 32px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      i,
+      svg {
+        @include font-size(21);
+        color: $blue-satin;
+      }
+    }
+  }
+
+  // Outer wrapper for the whole banner section
+  &__heavy-banners-wrapper {
+    background: $white;
+    border: 1px solid $gray;
+    border-radius: 4px;
+    padding: 24px;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    overflow: hidden;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  &__heavy-banners-header {
+    margin-bottom: 0;
+  }
+
+  &__heavy-banners-title {
+    @include font-size(18);
+    @include line-height(24);
+    color: $gray-dark;
+    font-weight: 500;
+    margin: 0;
+  }
+
+  &__heavy-banners-terms {
+    @include font-size(12);
+    @include line-height(16);
+    color: $blue;
+    font-weight: 400;
+    text-decoration: underline;
+
+    &:hover {
+      color: $blue-darker;
+    }
+
+    // Mobile: T&C at bottom visible, desktop one hidden
+    &--mobile {
+      display: block;
+      margin-top: 16px;
+    }
+
+    &--desktop {
+      display: none;
+    }
+  }
+
+  &__heavy-banners-description {
+    @include font-size(14);
+    @include line-height(22);
+    color: $gray-dark;
+    font-weight: 400;
+    margin-top: 16px;
+    margin-bottom: 16px;
+  }
+
+  // Images container - matches Hybris class: delivery-block__heavy-banners
+  &__heavy-banners {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 8px 16px;
+    margin-bottom: 16px;
+
+    img {
+      flex: 0 1 calc(33.333% - 12px);
+      max-width: calc(33.333% - 12px);
+      height: auto;
+      object-fit: contain;
+    }
+  }
+
+  &__heavy-banners-contact {
+    display: flex;
+    align-items: center;
+    background: $ma-white;
+    padding: 8px;
+    border-radius: 4px;
+
+    &-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
+      flex-shrink: 0;
+      margin-right: 8px;
+    }
+
+    i,
+    svg {
+      @include font-size(21);
+      color: $blue-satin;
+    }
+
+    span {
+      @include font-size(12);
+      @include line-height(16);
+      color: $blue-ocean;
+      font-weight: 400;
+    }
+
+    a {
+      @include font-size(12);
+      @include line-height(16);
+      color: $blue-ocean;
+      font-weight: 400;
+      text-decoration: underline;
+
+      &:hover {
+        color: $blue-darker;
+      }
+    }
+  }
+}
+
+// Tablet and Desktop: all 5 in one row, T&C in header
+@include media-breakpoint-up(sm) {
+  .delivery-block {
+    &__weight-banner {
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .delivery-block {
+    &__heavy-banners-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    &__heavy-banners-terms {
+      &--mobile {
+        display: none;
+      }
+
+      &--desktop {
+        display: inline-block;
+      }
+    }
+
+    &__heavy-banners {
+      flex-wrap: nowrap;
+
+      img {
+        flex: 1;
+        min-width: 0;
+        max-width: 120px;
+        width: 100%;
+      }
+    }
+  }
+}

package/src/scss/main.scss

@@ -94,6 +94,7 @@
 @import 'components/checkout-chip';
 @import 'components/checkout-payment-repayment-terms';
 @import 'components/checkout-voucher-remove-modal';
+@import 'components/heavy-banners';
 
 // Pages
 @import 'pages/contact-us';

package/src/scss/pages/page_checkout_delivery-new.scss

@@ -258,6 +258,10 @@
   .checkout-order {
     display: block;
     margin: 0;
+
+    .delivery-block__heavy-banners-wrapper {
+      margin-top: 0;
+    }
   }
 
   .content,

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>