wickes-css2 2.113.0 → 2.116.0

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

@@ -167,6 +167,8 @@
   }
 }
 
-[data-why-not-add-widget] + .pdp-price__quantity-calculator {
+[data-why-not-add-widget] + .pdp-price__quantity-calculator,
+[data-similar-products-widget] + .pdp-price__klarna-payment,
+[data-similar-products-widget] + .pdp-price__billie-payment {
   margin-top: 20px;
 }

package/src/scss/components/checkout-payment-details-v2.scss

@@ -2,10 +2,27 @@
 @import '../components/tooltip';
 @import '../components/gift-cards';
 
+
+body main {
+  padding: 24px 0 40px;
+};
+
 .checkout-payment-details-v2 {
   .checkout-payment-details {
     margin: 0;
 
+    &__payment-method {
+      .checkout-payment-details__row:first-child {
+        .checkout-payment-details__descr:first-child {
+          margin-bottom: 24px;
+
+          &::after {
+            display: none;
+          }
+        }
+      }
+    }
+
     .warning-required {
       margin: 16px 0;
     }
@@ -96,6 +113,10 @@
         padding-right: 0;
       }
 
+      &.giftcard-row {
+        margin-bottom: 0;
+      }
+
       &.first-name {
         flex: 0 0 100%;
         margin-top: 16px;
@@ -132,7 +153,17 @@
     }
 
     &__card-details {
-      margin: 20px 0 0;
+      margin-bottom: 0;
+    }
+
+    .checkout-payment-details__card-details:not(form) {
+      &::before {
+        display: block;
+        margin: 24px 0;
+        content: '';
+        height: 1px;
+        background: $gray;
+      }
     }
 
     &__title {
@@ -140,6 +171,7 @@
       font-weight: 400;
       font-size: 1.25rem;
       line-height: 2rem;
+      margin-bottom: 16px;
     }
 
     &__descr {
@@ -166,6 +198,10 @@
       .form-row__col-terms {
         @include make-col(12);
         margin: 0;
+
+        p {
+          margin: 0;
+        }
       }
     }
 
@@ -181,8 +217,8 @@
     &__klarna {
       .klarna-info {
         background: $white;
-        margin-bottom: 32px;
-        padding: 20px;
+        margin-bottom: 24px;
+        padding: 0 20px;
 
         &__header {
           display: flex;
@@ -235,8 +271,8 @@
     &__billie {
       .billie-info {
         background: $white;
-        margin-bottom: 20px;
-        padding: 20px;
+        margin: 24px 0;
+        padding: 0 24px;
 
         &__header {
           display: flex;
@@ -378,7 +414,7 @@
     }
 
     &__clearpay {
-      padding-bottom: 24px;
+      margin-bottom: 24px;
 
       .clearpay-widget {
         max-width: 360px;
@@ -393,21 +429,12 @@
             flex: 0 0 50%;
             max-width: 50%;
           }
-
-          &::after {
-            position: absolute;
-            content: '';
-            height: 2px;
-            background: $gray-light;
-            left: 15px;
-            right: 15px;
-          }
         }
       }
     }
 
     .js-billie-repayment-terms {
-      margin-bottom: 20px;
+      margin-bottom: 24px;
 
       &--has-selection {
         margin-bottom: 0;
@@ -485,6 +512,7 @@
     .checkout-payment-details {
       &__title {
         font-size: 1.5rem;
+        margin-bottom: 24px;
       }
 
       &__descr {
@@ -522,10 +550,6 @@
           text-align: left;
         }
       }
-
-      &__clearpay {
-        padding-bottom: 32px;
-      }
     }
   }
 }

package/src/scss/components/checkout-payment-repayment-terms.scss

@@ -1,7 +1,6 @@
 @import '../helpers/variables';
 
 .repayment-terms {
-  background: $gray-bg;
   display: flex;
   flex-direction: column;
   gap: 16px;

package/src/scss/components/kitchen/_price.scss

@@ -10,6 +10,16 @@
     gap: 8px 4px;
   }
 
+  &__vat {
+    display: flex;
+    column-gap: 4px;
+    align-items: end;
+
+    & .price-vat {
+      line-height: 0.875rem;
+    }
+  }
+
   &__item {
     font-size: 2.125rem;
     font-weight: 700;

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

@@ -0,0 +1,46 @@
+.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;
+
+    &--green {
+      background: $green-light;
+    }
+
+    &--yellow {
+      background: $yellow;
+    }
+
+    &--blue {
+      background: $blue-badge;
+    }
+
+    &--blue-dark {
+      background: $pacific-depths;
+    }
+
+    &--red {
+      background: $red;
+    }
+
+    &--text-gray {
+      color: $gray-dark;
+    }
+
+    &--text-white {
+      color: $white;
+    }
+  }
+
+  &--right {
+    justify-content: flex-end;
+  }
+}

package/src/scss/components/price-block-v2-critical.scss

@@ -3,6 +3,27 @@
 .pdp-price-container {
   position: relative;
 
+  .pdp__badges-wrapper {
+    &:has(.pdp__badges--static) {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: end;
+      gap: 8px;
+      margin: -20px 0 10px;
+      background: none;
+    }
+
+    .pdp__badges {
+      &--static {
+        position: static;
+        width: fit-content;
+        max-width: 100%;
+        min-width: auto;
+        margin-right: 0;
+      }
+    }
+  }
+
   &__badges.pdp-price-container__badges {
     @include price-block-badge;
 
@@ -67,3 +88,44 @@
     padding-bottom: $btn-padding-y;
   }
 }
+
+.pdp--ripple {
+  .pdp-price {
+    &__value {
+      margin-bottom: 16px;
+    }
+
+    &__message-wrapper {
+      display: flex;
+      flex-direction: column;
+      row-gap: 8px;
+      padding: 12px 0;
+      margin: 16px 0;
+      border-bottom: 1px solid $gray;
+      border-top: 1px solid $gray;
+    }
+
+    &__delivery-message {
+      font-weight: 500;
+    }
+
+    &__control-holder {
+      padding-top: 0;
+    }
+
+    & .main-price__vat {
+      color: $blue-dark;
+    }
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .pdp-price-container {
+    .pdp__badges-wrapper {
+      &:has(.pdp__badges--static) {
+        margin-right: -20px;
+        margin-left: -20px;
+      }
+    }
+  }
+}

package/src/scss/components/price-block-v2.scss

@@ -3,6 +3,27 @@
 .pdp-price-container {
   position: relative;
 
+  .pdp__badges-wrapper {
+    &:has(.pdp__badges--static) {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: end;
+      gap: 8px;
+      margin: -20px 0 10px;
+      background: none;
+    }
+
+    .pdp__badges {
+      &--static {
+        position: static;
+        width: fit-content;
+        max-width: 100%;
+        min-width: auto;
+        margin-right: 0;
+      }
+    }
+  }
+
   &__badges.pdp-price-container__badges {
     @include price-block-badge;
 
@@ -104,3 +125,44 @@
     }
   }
 }
+
+.pdp--ripple {
+  .pdp-price {
+    &__value {
+      margin-bottom: 16px;
+    }
+
+    &__message-wrapper {
+      display: flex;
+      flex-direction: column;
+      row-gap: 8px;
+      padding: 12px 0;
+      margin: 16px 0;
+      border-bottom: 1px solid $gray;
+      border-top: 1px solid $gray;
+    }
+
+    &__delivery-message {
+      font-weight: 500;
+    }
+
+    &__control-holder {
+      padding-top: 0;
+    }
+
+    & .main-price__vat {
+      color: $blue-dark;
+    }
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .pdp-price-container {
+    .pdp__badges-wrapper {
+      &:has(.pdp__badges--static) {
+        margin-right: -20px;
+        margin-left: -20px;
+      }
+    }
+  }
+}

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

@@ -4,61 +4,26 @@
   border: 1px solid $gray;
   width: 100%;
   max-width: 100%;
-  margin: 0 15px 30px;
-  padding: 15px 0;
+  padding: 16px;
 
   .product-oos-inner {
-    padding: 0 50px;
-
-    .order-line:first-of-type {
-      border-top: 0;
+    .row {
+      margin: 0;
     }
 
-    .order-line__info {
-      a {
-        color: $blue;
-        text-decoration: underline;
-      }
+    .content {
+      padding: 0;
 
-      a:hover {
-        color: $blue-dark;
+      & > p:last-child {
+        margin-bottom: 0;
       }
     }
-
-    p {
-      display: inline-block;
-      margin-right: 20px;
-    }
-
-    .fa-question-circle {
-      color: $blue;
-      font-size: 1.2rem;
-      display: inline-block;
-    }
-
-    .btn {
-      color: $white;
-      position: absolute;
-      bottom: 15px;
-      width: calc(100% - 30px);
-    }
-
-    .btn-notify {
-      bottom: 70px;
-
-      &:focus {
-        color: $blue-dark;
-      }
-    }
-
-    .btn:hover {
-      color: inherit;
-    }
   }
 }
 
 .component-date-selection {
   padding-top: 0;
+  padding-bottom: 16px;
 }
 
 .delivery-details__payment-details {
@@ -202,10 +167,18 @@
 }
 
 @include media-breakpoint-up(md) {
+  .delivery-details-product-oos {
+    padding: 24px;
+  }
+
   .delivery-details__payment-details_mobile {
     display: none;
   }
 
+  .component-date-selection {
+    padding-bottom: 24px;
+  }
+
   .delivery-details-option {
     &__contact-details {
       .your-contact-details {
@@ -281,56 +254,7 @@
   }
 }
 
-@include media-breakpoint-down(lg) {
-  .delivery-details-product-oos {
-    .product-oos-inner {
-      padding: 0 30px;
-
-      .content {
-        width: 100%;
-        flex: 100%;
-        max-width: 100%;
-
-        p {
-          width: calc(90% - 20px);
-          float: left;
-        }
-
-        .icon-info-component {
-          float: right;
-          width: 10%;
-          text-align: center;
-          margin-top: 5px;
-        }
-
-        .order-line:first-of-type {
-          clear: both;
-        }
-      }
-
-      .right-aside {
-        width: 100%;
-        flex: 100%;
-        max-width: 100%;
-        text-align: center;
-
-        .btn {
-          position: relative;
-          bottom: auto;
-          max-width: 280px;
-        }
-      }
-    }
-  }
-}
-
 @include media-breakpoint-down(md) {
-  .delivery-details-product-oos {
-    border: 0;
-    border-top: 2px solid $gray;
-    padding-top: 20px;
-  }
-
   .delivery-details-option {
     &__delivery-info {
       flex-direction: column;
@@ -359,18 +283,6 @@
 }
 
 @include media-breakpoint-down(sm) {
-  .delivery-details-product-oos {
-    .product-oos-inner {
-      .btn-notify {
-        margin-bottom: 1rem;
-      }
-    }
-  }
-
-  .component-date-selection {
-    padding-bottom: 20px;
-  }
-
   .delivery-details__payment-details {
     display: none;
   }