wickes-css2 2.113.0-develop.2 → 2.113.0-develop.21

package/src/scss/components/_thumb-gallery.scss

@@ -0,0 +1,200 @@
+.thumb-gallery {
+  position: relative;
+  user-select: none;
+
+  &__next-btn,
+  &__prev-btn {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 1;
+    background: rgba($black, 0.3);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: $white;
+    font-size: 18px;
+    cursor: pointer;
+  }
+
+  &__next-btn {
+    right: 16px;
+  }
+
+  &__prev-btn {
+    left: 16px;
+  }
+
+  .swiper-container-main {
+    aspect-ratio: 16 / 9;
+  }
+
+  .swiper-slide-main,
+  .swiper-slide-thumbs {
+    aspect-ratio: 16 / 9;
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+  }
+
+  &--missing-image {
+    .swiper-slide-main,
+    .swiper-slide-thumbs {
+      object-fit: contain;
+    }
+  }
+
+  .swiper-container-thumbs {
+    margin-top: 16px;
+    padding: 0 16px;
+
+    &__next-btn,
+    &__prev-btn {
+      position: absolute;
+      top: 0;
+      width: 24px;
+      height: 100%;
+      z-index: 1;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: $blue;
+      font-size: 12px;
+      cursor: pointer;
+
+      svg {
+        position: relative;
+        z-index: 1;
+        width: 24px;
+        height: 24px;
+      }
+    }
+
+    &__next-btn {
+      right: 16px;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: -16px;
+        bottom: 0;
+        width: 71px;
+        background: linear-gradient(270deg, $white 37%, transparent 100%);
+        pointer-events: none;
+      }
+    }
+
+    &__prev-btn {
+      left: 16px;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: -16px;
+        bottom: 0;
+        width: 71px;
+        background: linear-gradient(90deg, $white 37%, transparent 100%);
+        pointer-events: none;
+      }
+    }
+
+    .swiper-true-active {
+      position: relative;
+      pointer-events: none;
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba($white, 0.6);
+        border: 2px solid $blue;
+      }
+    }
+
+    .thumb-gallery__slide-wrapper {
+      max-width: 105px;
+    }
+  }
+
+  .swiper-slide-thumbs {
+    cursor: pointer;
+  }
+}
+
+.thumb-gallery[data-length='1'] {
+  .thumb-gallery__next-btn,
+  .thumb-gallery__prev-btn,
+  .swiper-container-thumbs__next-btn,
+  .swiper-container-thumbs__prev-btn,
+  .swiper-pagination {
+    display: none;
+  }
+}
+
+@include media-breakpoint-up(sm) {
+  .thumb-gallery {
+    .swiper-container-thumbs {
+      padding: 0;
+
+      &__next-btn {
+        right: 0;
+
+        &::before {
+          right: 0;
+          background: linear-gradient(270deg, $white 25%, transparent 100%);
+        }
+      }
+
+      &__prev-btn {
+        left: 0;
+
+        &::before {
+          left: 0;
+          background: linear-gradient(90deg, $white 25%, transparent 100%);
+        }
+      }
+    }
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  .thumb-gallery {
+    &__next-btn,
+    &__prev-btn {
+      width: 40px;
+      height: 40px;
+    }
+
+    .swiper-container-thumbs {
+      &__next-btn,
+      &__prev-btn {
+        width: 48px;
+
+        svg {
+          width: 38px;
+          height: 38px;
+        }
+      }
+
+      &__next-btn {
+        &::before {
+          background: linear-gradient(270deg, $white 25%, rgba(255, 255, 255, 0) 100%);
+        }
+      }
+
+      &__prev-btn {
+        &::before {
+          background: linear-gradient(90deg, $white 25%, rgba(255, 255, 255, 0) 100%);
+        }
+      }
+    }
+  }
+}

package/src/scss/components/bloomreach/_bloomreach.scss

@@ -1,3 +1,4 @@
+@import 'card-shared';
 @import 'complete-your-project';
 @import 'complete-card';
 @import 'complete-card-dropdown';

package/src/scss/components/bloomreach/_card-shared.scss

@@ -0,0 +1,24 @@
+@mixin bloomreach-card-badge {
+  @include font-size(12);
+  @include line-height(16);
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: $label-z-index;
+  padding: 4px 10px;
+  border-top-right-radius: $border-radius-sm;
+  font-weight: 700;
+  text-align: center;
+}
+
+@include media-breakpoint-down(sm) {
+  .why-not-add-card-wrapper .why-not-add-card,
+  .complete-widget {
+    .btn {
+      &:hover {
+        background-color: $green;
+        color: $white;
+      }
+    }
+  }
+}

package/src/scss/components/bloomreach/_complete-card.scss

@@ -167,17 +167,9 @@
   }
 
   &__badge {
-    @include font-size(12);
-    @include line-height(16);
-    font-weight: 700;
+    @include bloomreach-card-badge;
     margin-bottom: 0;
-    position: absolute;
-    top: 0;
-    right: 0;
-    z-index: $label-z-index;
     color: $white;
-    padding: 4px 10px;
-    text-align: center;
   }
 
   &--skeleton {

package/src/scss/components/bloomreach/_reviews.scss

@@ -37,11 +37,9 @@
       margin-left: 3.3px;
     }
   }
-
 }
 
 .why-not-add {
-
   .reviews {
     margin-bottom: 7px;
 

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,39 @@
       }
     }
   }
+
+  &--dont-forget {
+    padding: 0;
+    margin-bottom: 0;
+
+    .why-not-add {
+      &__title {
+        @include font-size(16);
+        @include line-height(24);
+
+        font-weight: 500;
+      }
+    }
+  }
 }
 
-[data-why-not-add-widget] + .pdp-price__quantity-calculator {
-  margin-top: 20px
-}
+@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,
+[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/energy-efficiency.scss

@@ -80,7 +80,8 @@
 
     &:before {
       content: '';
-      background: $white url('../../img/energy-efficiency/energy-marker.svg') no-repeat center / cover;
+      background: $white url('../../img/energy-efficiency/energy-marker.svg') no-repeat center /
+        cover;
       width: 9px;
       height: 100%;
       position: absolute;
@@ -310,7 +311,6 @@
   }
 }
 
-
 @media print {
   .energy-efficiency {
     display: none !important;

package/src/scss/components/global-search.scss

@@ -409,7 +409,10 @@
     left: 50%;
     transform: translate(-50%, 0);
     border-radius: 10px;
-    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
+    box-shadow:
+      0 1px 5px rgba(0, 0, 0, 0.12),
+      0 2px 2px rgba(0, 0, 0, 0.14),
+      0 3px 1px -2px rgba(0, 0, 0, 0.2);
     padding: 15px;
 
     &--has-tradepro-banner {
@@ -572,7 +575,8 @@
   }
 
   .global-search__body-head {
-    .nav-item:nth-of-type(2), #content-page-tab {
+    .nav-item:nth-of-type(2),
+    #content-page-tab {
       display: none;
     }
   }

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;