wickes-css2 2.107.0-ripple.2 → 2.107.0-ripple.21

package/src/scss/components/_price-badges.scss

@@ -4,6 +4,16 @@
       width: 140px;
       padding: 0;
 
+      &.pdp__badges--static .pdp__badge {
+        min-width: auto;
+        padding: 4px 12px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: 0.875rem;
+        line-height: 1.375rem;
+      }
+
       &-cashback {
         width: auto;
         padding: 0 10px;
@@ -35,7 +45,6 @@
 
         & .products-list-v2__badge {
           background: $yellow;
-
         }
       }
 
@@ -70,7 +79,6 @@
       &-text-white {
         color: $white;
       }
-
     }
   }
 }

package/src/scss/components/_price-block-critical.scss

@@ -21,13 +21,13 @@
 
   .pdp-price__oos {
     border-top: 1px solid $gray;
-    margin-bottom: 8px;
+    margin-bottom: 12px;
   }
 
   .pdp-price__value_extended,
   .pdp-price__oos,
   .pdp-price__in-store-only {
-    padding: 10px 0;
+    padding: 12px 0;
 
     p {
       margin-bottom: 0;
@@ -69,6 +69,7 @@
   .pdp-price-sale__value .pdp-price__old-price {
     color: $warm-grey;
     font-weight: 500;
+    line-height: 1rem;
 
     s {
       text-decoration-color: $line-through;
@@ -120,6 +121,14 @@
     text-align: center;
   }
 
+  .pdp-price__control-holder {
+    flex-flow: wrap;
+
+    p {
+      width: 100%;
+    }
+  }
+
   .pdp-price__control-holder,
   .pdp-price__control-installation {
     padding-top: 20px;
@@ -178,7 +187,6 @@
           border-bottom-color: $red;
         }
       }
-
     }
   }
 

package/src/scss/components/_price-block.scss

@@ -15,7 +15,7 @@
   }
 
   .pdp-price__from {
-    font-size: .6em;
+    font-size: 0.6em;
     margin-right: 4px;
   }
 
@@ -32,18 +32,29 @@
 
   .pdp-price__oos {
     border-top: 1px solid $gray;
-    margin-bottom: 8px;
+    margin-bottom: 12px;
 
     & + .pdp-price__controls,
     &:last-child {
       margin-bottom: 0;
     }
+
+    .btn--notify-open {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 12px;
+
+      .fa-bell {
+        @include font-size(18);
+      }
+    }
   }
 
   .pdp-price__value_extended,
   .pdp-price__oos,
   .pdp-price__in-store-only {
-    padding: 10px 0;
+    padding: 12px 0;
 
     p {
       margin-bottom: 0;
@@ -103,6 +114,7 @@
   .pdp-price-sale__value .pdp-price__old-price {
     color: $warm-grey;
     font-weight: 500;
+    line-height: 1rem;
 
     s {
       text-decoration-color: $line-through;
@@ -250,7 +262,6 @@
           border-bottom-color: $red;
         }
       }
-
     }
   }
 

package/src/scss/components/_suite-includes.scss

@@ -28,8 +28,8 @@
 
   &__old-price {
     font-weight: 500;
-    font-size: 16px;
-    line-height: 1.5;
+    font-size: 1rem;
+    line-height: 1.5rem;
     color: $warm-grey;
 
     & s {
@@ -38,18 +38,33 @@
     }
   }
 
-  &__new-price {
+  &__price {
     font-weight: 700;
-    font-size: 34px;
-    line-height: 1.05;
-    color: $red;
+    font-size: 2.125rem;
+    line-height: 2.25rem;
+    color: $blue-dark;
+
+    &--offer {
+      color: $red;
+    }
   }
 
-  &__inc-vat {
-    margin-left: 8px;
-    font-weight: 500;
-    font-size: 16px;
-    color: $blue-dark;
+  &__vat {
+    display: flex;
+    column-gap: 8px;
+    align-items: end;
+
+    &-text {
+      font-weight: 500;
+      font-size: 1rem;
+      line-height: 1.5rem;
+      color: $blue-dark;
+    }
+  }
+
+  &__delivery {
+    font-size: 0.75rem;
+    line-height: 1rem;
   }
 }
 
@@ -60,22 +75,12 @@
     margin-left: 0;
     border: 1px solid $gray;
     border-radius: 4px;
-
-    & img {
-      width: 73px;
-      height: 73px;
-    }
   }
 }
 
 @include media-breakpoint-up(md) {
   .suite-includes {
     min-width: 345px;
-
-    & img {
-      width: 45px;
-      height: 45px;
-    }
   }
 }
 
@@ -84,9 +89,8 @@
     padding: 24px;
     min-width: 622px;
 
-    & img {
-      width: 60px;
-      height: 60px;
+    &__header {
+      margin-bottom: 16px;
     }
 
     & .image-accordion {
@@ -123,8 +127,7 @@
     }
 
     &__button {
-      max-width: fit-content;
-      height: 40px;
+      min-width: 120px;
     }
   }
 }

package/src/scss/components/_suite-product-card.scss

@@ -12,8 +12,8 @@
   }
 
   & img {
-    width: 51px;
-    height: 51px;
+    width: 60px;
+    height: 60px;
   }
 
   &__info {
@@ -21,9 +21,10 @@
   }
 
   &__title {
+    margin-bottom: 8px;
     font-weight: 500;
-    font-size: 12px;
-    line-height: 1.3;
+    font-size: 0.75rem;
+    line-height: 1rem;
 
     text-decoration: none;
     overflow: hidden;
@@ -33,42 +34,51 @@
     -webkit-line-clamp: 2;
   }
 
-  &__promotion {
-    display: block;
-    margin-top: 8px;
-    margin-bottom: 8px;
-
-    font-size: 12px;
+  &__old-price {
+    margin-bottom: 4px;
     font-weight: 500;
-    line-height: 1.3;
-    color: $red;
+    line-height: 0.875rem;
+    color: $warm-grey;
+
+    & s {
+      text-decoration: line-through;
+      text-decoration-color: $gray-dark;
+    }
   }
 
   &__price-qty {
     display: flex;
     justify-content: space-between;
-    margin-top: 8px;
+    align-items: end;
   }
 
   &__price {
-    font-size: 16px;
+    font-size: 1rem;
     font-weight: 700;
-    line-height: 1.25;
+    line-height: 1.25rem;
     color: $blue-dark;
+
+    &--red {
+      color: $red;
+    }
   }
 
-  &__inc-vat {
-    margin-left: 4px;
+  &__vat {
+    display: flex;
+    column-gap: 4px;
+    align-items: baseline;
 
-    font-weight: 500;
-    font-size: 12px;
-    line-height: 1.15;
-    color: $blue-dark;
+    &-text {
+      font-weight: 500;
+      font-size: 0.75rem;
+      line-height: 0.875rem;
+      color: $blue-dark;
+    }
   }
 
   &__quantity {
-    font-size: 12px;
-    line-height: 1.3;
+    font-size: 0.75rem;
+    line-height: 1rem;
     color: $squant;
 
     & span {

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

@@ -0,0 +1,34 @@
+.thumb-gallery {
+  position: relative;
+
+  .swiper-container-main {
+    aspect-ratio: 16 / 9;
+  }
+
+  .swiper-container-thumbs {
+    margin-top: 16px;
+    padding: 0 16px;
+  }
+
+  .swiper-slide-main,
+  .swiper-slide-thumbs {
+    aspect-ratio: 16 / 9;
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.thumb-gallery[data-length='1'] {
+  .swiper-container-thumbs {
+    display: none;
+  }
+}
+
+@include media-breakpoint-up(sm) {
+  .thumb-gallery {
+    .swiper-container-thumbs {
+      padding: 0;
+    }
+  }
+}

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

@@ -0,0 +1,192 @@
+.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%;
+  }
+
+  .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,
+  .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

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