wickes-css2 2.113.0-develop.7 → 2.113.0-develop.9

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

@@ -0,0 +1,141 @@
+.suite-includes {
+  padding: 24px 16px;
+  margin-left: -15px;
+  margin-right: -15px;
+  border-top: 1px solid $gray;
+  border-bottom: 1px solid $gray;
+
+  &__header {
+    margin-bottom: 12px;
+  }
+
+  &__products {
+    display: none;
+  }
+
+  &__total {
+    margin-top: 8px;
+    margin-bottom: 12px;
+  }
+
+  &__price-container {
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+
+    margin-bottom: 12px;
+  }
+
+  &__old-price {
+    font-weight: 500;
+    font-size: 1rem;
+    line-height: 1.5rem;
+    color: $warm-grey;
+
+    & s {
+      text-decoration: line-through;
+      text-decoration-color: $gray-dark;
+    }
+  }
+
+  &__price {
+    font-weight: 700;
+    font-size: 2.125rem;
+    line-height: 2.25rem;
+    color: $blue-dark;
+
+    &--offer {
+      color: $red;
+    }
+  }
+
+  &__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;
+  }
+}
+
+@include media-breakpoint-up(sm) {
+  .suite-includes {
+    width: 100%;
+    margin-right: 0;
+    margin-left: 0;
+    border: 1px solid $gray;
+    border-radius: 4px;
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .suite-includes {
+    min-width: 345px;
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  .suite-includes {
+    padding: 24px;
+    min-width: 622px;
+
+    &__header {
+      margin-bottom: 16px;
+    }
+
+    & .image-accordion {
+      display: none;
+    }
+
+    &__products {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 16px;
+      padding-bottom: 16px;
+      border-bottom: 1px solid $gray;
+    }
+
+    &__info {
+      display: flex;
+      justify-content: space-between;
+      align-items: end;
+    }
+
+    &__total {
+      margin-top: 16px;
+    }
+
+    &__price-container {
+      margin-bottom: 0;
+    }
+
+    & .suite-product-card {
+      flex-basis: 278px;
+      padding-bottom: 0;
+      padding-top: 0;
+      border-bottom: 0;
+    }
+
+    &__button {
+      min-width: 120px;
+    }
+  }
+}
+
+@include media-breakpoint-up(xl) {
+  .suite-includes {
+    & .suite-product-card {
+      flex-basis: 336px;
+    }
+  }
+}

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

@@ -0,0 +1,98 @@
+.suite-product-card {
+  display: flex;
+  column-gap: 8px;
+
+  &:not(:first-child) {
+    padding-top: 8px;
+  }
+
+  &:not(:last-child) {
+    padding-bottom: 8px;
+    border-bottom: 1px solid $gray-light;
+  }
+
+  & img {
+    width: 60px;
+    height: 60px;
+  }
+
+  &__info {
+    width: 100%;
+  }
+
+  &__title {
+    margin-bottom: 8px;
+    font-weight: 500;
+    font-size: 0.75rem;
+    line-height: 1rem;
+
+    text-decoration: none;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+  }
+
+  &__old-price {
+    margin-bottom: 4px;
+    font-weight: 500;
+    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;
+    align-items: end;
+  }
+
+  &__price {
+    font-size: 1rem;
+    font-weight: 700;
+    line-height: 1.25rem;
+    color: $blue-dark;
+
+    &--red {
+      color: $red;
+    }
+  }
+
+  &__vat {
+    display: flex;
+    column-gap: 4px;
+    align-items: baseline;
+
+    &-text {
+      font-weight: 500;
+      font-size: 0.75rem;
+      line-height: 0.875rem;
+      color: $blue-dark;
+    }
+  }
+
+  &__quantity {
+    font-size: 0.75rem;
+    line-height: 1rem;
+    color: $squant;
+
+    & span {
+      color: $gray-dark;
+    }
+  }
+}
+
+@include media-breakpoint-up(xl) {
+  .suite-product-card {
+    &__title {
+      overflow: auto;
+      text-overflow: unset;
+      -webkit-line-clamp: unset;
+    }
+  }
+}

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/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,40 @@
     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;
+    }
+  }
+}
+
+@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,40 @@
     }
   }
 }
+
+.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;
+    }
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .pdp-price-container {
+    .pdp__badges-wrapper {
+      &:has(.pdp__badges--static) {
+        margin-right: -20px;
+        margin-left: -20px;
+      }
+    }
+  }
+}