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

package/src/scss/components/bloomreach/_why-not-add-card.scss

@@ -1,10 +1,14 @@
-.why-not-add-card {
-  display: flex;
-  gap: 8px;
+.why-not-add-card-wrapper {
   padding: 12px;
   border: 1px solid $gray;
   border-radius: 4px;
   background-color: $white;
+  position: relative;
+}
+
+.why-not-add-card {
+  display: flex;
+  gap: 8px;
 
   &__image {
     display: block;
@@ -129,10 +133,6 @@
     }
   }
 
-  &__cta-icon {
-    font-size: 18px;
-  }
-
   &__loader {
     .loader-path {
       stroke: $white;
@@ -201,23 +201,150 @@
       }
     }
   }
-}
 
-@include media-breakpoint-down(sm) {
-  .why-not-add-card {
+  &__badge {
+    @include bloomreach-card-badge;
+    max-width: calc(100% - 52px);
+    white-space: normal;
+  }
+
+  &__error {
+    @include font-size(14);
+    @include line-height(22);
+
+    margin-top: 8px;
+    width: 100%;
+    background: rgba($red, 0.05);
+    padding: 8px 10px;
+    column-gap: 17px;
+    display: flex;
+    align-items: center;
+    font-weight: 500;
+
+    .icon {
+      height: 16px;
+      font-size: 16px;
+      color: $red;
+    }
+  }
+
+  &--added {
     .btn {
+      opacity: 0.4;
+      pointer-events: none;
+      cursor: default;
+
       &:hover {
         background-color: $green;
         color: $white;
       }
     }
   }
+
+  &--failed {
+    .btn {
+      opacity: 0.4;
+      pointer-events: none;
+      cursor: default;
+    }
+  }
+
+  &__cta {
+    .button__icon--success {
+      margin-right: 0;
+    }
+
+    &--success,
+    &--error {
+      opacity: 1;
+      pointer-events: none;
+    }
+
+    &--success {
+      background-color: $green;
+      border-color: $green;
+      color: $white;
+    }
+
+    &--error {
+      background-color: $gray;
+      border-color: $gray;
+      color: $white;
+    }
+  }
+}
+
+.why-not-add--dont-forget {
+  margin-top: 4px;
+
+  .why-not-add-card {
+    .why-not-add-card__image {
+      width: 124px;
+      height: 124px;
+    }
+  }
+
+  .why-not-add-card {
+    &__badge + .why-not-add-card__image,
+    &__badge ~ .why-not-add-card__content {
+      margin-top: 16px;
+    }
+
+    &__bottom {
+      flex-grow: 1;
+    }
+  }
+}
+
+[data-dont-forget-widget] {
+  .why-not-add-card {
+    &--added {
+      .btn {
+        opacity: 0.6;
+
+        .button__icon--success {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+}
+
+@include media-breakpoint-up(sm) {
+  .why-not-add--dont-forget {
+    margin-top: 0;
+
+    .why-not-add-card {
+      &__badge + .why-not-add-card__image {
+        margin-top: 0;
+      }
+    }
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .why-not-add--dont-forget {
+    margin-top: 12px;
+  }
 }
 
 @media screen and (max-width: 375px) {
+  .why-not-add--dont-forget {
+    .why-not-add-card {
+      .why-not-add-card__image {
+        width: 68px;
+        height: 68px;
+      }
+    }
+  }
+
   .why-not-add-card {
     &__vat-label {
       width: 100%;
     }
+
+    &__error {
+      @include font-size(12);
+    }
   }
 }

package/src/scss/components/bloomreach/_why-not-add.scss

@@ -136,8 +136,37 @@
       }
     }
   }
+
+  &--dont-forget {
+    padding: 0;
+    margin-bottom: 0;
+
+    .why-not-add {
+      &__title {
+        @include font-size(16);
+        @include line-height(24);
+
+        font-weight: 500;
+      }
+    }
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .why-not-add {
+    &--dont-forget {
+      .why-not-add {
+        &__title {
+          @include font-size(18);
+          @include line-height(22);
+
+          font-weight: 700;
+        }
+      }
+    }
+  }
 }
 
 [data-why-not-add-widget] + .pdp-price__quantity-calculator {
-  margin-top: 20px
-}
+  margin-top: 20px;
+}

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>