wickes-css2 2.113.0-develop.1 → 2.113.0-develop.11

package/src/scss/components/_heavy-banners.scss

@@ -0,0 +1,216 @@
+// Big & Bulky (Heavy) delivery banners component
+// Used on delivery details page for heavy/bulky orders
+// Mobile-first approach
+
+.delivery-block {
+  &__show-products {
+    display: inline-block;
+    margin-bottom: 20px;
+    font-size: 1rem;
+    color: $blue;
+    text-decoration: underline;
+
+    &:hover {
+      color: $blue-darker;
+    }
+  }
+
+  &__weight-banner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: $ma-white;
+    padding: 8px;
+    margin: 0 -15px;
+    gap: 8px;
+    border-bottom: 1px solid $blue-satin;
+
+    .banner-news + & {
+      margin-top: 20px;
+    }
+
+    &-content {
+      p {
+        @include font-size(12);
+        @include line-height(16);
+        color: $blue-ocean;
+        font-weight: 700;
+        margin: 0;
+        text-align: center;
+      }
+    }
+
+    &-icon {
+      flex-shrink: 0;
+      width: 32px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      i,
+      svg {
+        @include font-size(21);
+        color: $blue-satin;
+      }
+    }
+  }
+
+  // Outer wrapper for the whole banner section
+  &__heavy-banners-wrapper {
+    background: $white;
+    border: 1px solid $gray;
+    border-radius: 4px;
+    padding: 24px;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    overflow: hidden;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  &__heavy-banners-header {
+    margin-bottom: 0;
+  }
+
+  &__heavy-banners-title {
+    @include font-size(18);
+    @include line-height(24);
+    color: $gray-dark;
+    font-weight: 500;
+    margin: 0;
+  }
+
+  &__heavy-banners-terms {
+    @include font-size(12);
+    @include line-height(16);
+    color: $blue;
+    font-weight: 400;
+    text-decoration: underline;
+
+    &:hover {
+      color: $blue-darker;
+    }
+
+    // Mobile: T&C at bottom visible, desktop one hidden
+    &--mobile {
+      display: block;
+      margin-top: 16px;
+    }
+
+    &--desktop {
+      display: none;
+    }
+  }
+
+  &__heavy-banners-description {
+    @include font-size(14);
+    @include line-height(22);
+    color: $gray-dark;
+    font-weight: 400;
+    margin-top: 16px;
+    margin-bottom: 16px;
+  }
+
+  // Images container - matches Hybris class: delivery-block__heavy-banners
+  &__heavy-banners {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 8px 16px;
+    margin-bottom: 16px;
+
+    img {
+      flex: 0 1 calc(33.333% - 12px);
+      max-width: calc(33.333% - 12px);
+      height: auto;
+      object-fit: contain;
+    }
+  }
+
+  &__heavy-banners-contact {
+    display: flex;
+    align-items: center;
+    background: $ma-white;
+    padding: 8px;
+    border-radius: 4px;
+
+    &-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
+      flex-shrink: 0;
+      margin-right: 8px;
+    }
+
+    i,
+    svg {
+      @include font-size(21);
+      color: $blue-satin;
+    }
+
+    span {
+      @include font-size(12);
+      @include line-height(16);
+      color: $blue-ocean;
+      font-weight: 400;
+    }
+
+    a {
+      @include font-size(12);
+      @include line-height(16);
+      color: $blue-ocean;
+      font-weight: 400;
+      text-decoration: underline;
+
+      &:hover {
+        color: $blue-darker;
+      }
+    }
+  }
+}
+
+// Tablet and Desktop: all 5 in one row, T&C in header
+@include media-breakpoint-up(sm) {
+  .delivery-block {
+    &__weight-banner {
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .delivery-block {
+    &__heavy-banners-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    &__heavy-banners-terms {
+      &--mobile {
+        display: none;
+      }
+
+      &--desktop {
+        display: inline-block;
+      }
+    }
+
+    &__heavy-banners {
+      flex-wrap: nowrap;
+
+      img {
+        flex: 1;
+        min-width: 0;
+        max-width: 120px;
+        width: 100%;
+      }
+    }
+  }
+}

package/src/scss/components/_image-accordion.scss

@@ -0,0 +1,54 @@
+.image-accordion {
+  padding-bottom: 8px;
+  border-bottom: 1px solid $gray;
+
+  &__preview {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-bottom: 8px;
+
+    & img {
+      flex-basis: calc((100% - 40px) / 6);
+      min-width: 45px;
+    }
+  }
+
+  &__content {
+    margin-bottom: 8px;
+  }
+
+  &__header {
+    position: relative;
+    margin-bottom: 0;
+    padding-left: 32px;
+    color: $blue;
+    cursor: pointer;
+
+    font-size: 0.875rem;
+    line-height: 1.375rem;
+  }
+
+  &__icon {
+    position: absolute;
+    left: 0;
+    top: 0;
+    font-size: 18px;
+  }
+
+  &:not(.image-accordion--collapsed) {
+    .image-accordion__preview {
+      display: none;
+    }
+  }
+
+  &--collapsed {
+    & .image-accordion__header {
+      & > .image-accordion__icon {
+        & > .fa-angle-up {
+          transform: rotate(180deg);
+        }
+      }
+    }
+  }
+}

package/src/scss/components/_kitchen-card.scss

@@ -49,6 +49,7 @@
 
   &__title {
     margin-bottom: 0;
+    user-select: none;
   }
 
   &__parameters {

package/src/scss/components/_lines-group.scss

@@ -81,7 +81,7 @@
     }
   }
 
-  .collapsed {
+  & > .collapsed {
     .fa-angle-up {
       transform: rotate(180deg);
     }

package/src/scss/components/_package-card.scss

@@ -0,0 +1,63 @@
+.package-card {
+  display: grid;
+  grid-template-rows: subgrid;
+  grid-row: span 5;
+  gap: 0;
+
+  border: 1px solid $gray;
+  border-radius: 4px;
+
+  &.has-stickers-row {
+    grid-row: span 6;
+
+    .package-card__content {
+      grid-row: span 5;
+    }
+  }
+
+  &__image {
+    width: 100%;
+  }
+
+  &__content {
+    display: grid;
+    grid-template-rows: subgrid;
+    grid-row: span 4;
+    row-gap: 12px;
+    padding: 16px;
+  }
+
+  &__title {
+    margin-bottom: 0;
+  }
+
+  &__usp {
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+
+    margin-bottom: 0;
+    padding-left: 0;
+    list-style: none;
+
+    &-item {
+      display: flex;
+      align-items: baseline;
+      column-gap: 8px;
+    }
+  }
+
+  &__icon {
+    font-size: 1rem;
+    flex-shrink: 0;
+  }
+
+  &__price,
+  &__button {
+    align-self: end;
+  }
+
+  &__stickers {
+    min-width: 0;
+  }
+}

package/src/scss/components/_package-plp.scss

@@ -0,0 +1,88 @@
+.package-plp {
+  margin-bottom: 24px;
+
+  &__cards {
+    display: flex;
+    flex-direction: column;
+    row-gap: 16px;
+    margin-top: 16px;
+    margin-bottom: 32px;
+
+    .card-product-banner,
+    .card-sponsor-banner,
+    .card-bloomreach-media-banner {
+      flex: unset;
+      max-width: initial;
+      width: 100%;
+      margin-bottom: 0;
+      padding: 0;
+      grid-row: span 5;
+      align-self: start;
+
+      &.has-stickers-row {
+        grid-row: span 6;
+      }
+
+      &__link {
+        padding: 0;
+        display: block;
+        height: max-content;
+      }
+
+      &__picture {
+        display: block;
+      }
+
+      &__image {
+        display: block;
+        width: 100%;
+      }
+    }
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .package-plp {
+    &__container {
+      display: flex;
+      column-gap: 32px;
+    }
+
+    &__search-filter {
+      min-width: 210px;
+    }
+
+    &__content {
+      flex-basis: 100%;
+    }
+
+    &__cards {
+      row-gap: 24px;
+      margin-top: 24px;
+    }
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .package-plp {
+    margin-bottom: 40px;
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  .package-plp {
+    &__cards {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 24px;
+    }
+  }
+}
+
+@include media-breakpoint-up(xl) {
+  .package-plp {
+    &__cards {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+}

package/src/scss/components/_postcode-checker.scss

@@ -0,0 +1,115 @@
+.postcode-checker {
+  padding: 16px;
+  background-color: $white;
+  border: 1px solid $gray;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-areas:
+  "title"
+  "field"
+  "error"
+  "action";
+  gap: 8px 16px;
+
+  &__title {
+    grid-area: title;
+    margin-bottom: 8px;
+  }
+
+  &__field {
+    grid-area: field;
+  }
+
+  &__action {
+    grid-area: action;
+    margin-top: 8px;
+  }
+
+  &__input {
+    display: block;
+    width: 100%;
+    outline: none;
+  }
+
+  &__error {
+    grid-area: error;
+    display: none;
+    color: $red;
+    margin-bottom: 0;
+    line-height: 1rem;
+    font-size: 0.75rem;
+  }
+
+  &--error {
+    .postcode-checker__input {
+      border-color: $red;
+    }
+
+    .postcode-checker__error {
+      display: block;
+    }
+  }
+
+  &__button {
+    margin-top: 0;
+  }
+
+  &--mobile-only {
+    display: grid;
+  }
+
+  &--desktop-only {
+    display: none;
+  }
+}
+
+@include media-breakpoint-up(sm) {
+  .postcode-checker {
+    grid-template-columns: 1fr 1fr;
+    grid-template-areas:
+    "title  title"
+    "field  action"
+    "error  error";
+
+    &__action {
+      margin-top: 0;
+    }
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .postcode-checker {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+    "title"
+    "field"
+    "error"
+    "action";
+
+    &__action {
+      margin-top: 8px;
+    }
+
+    &--mobile-only {
+      display: none;
+    }
+
+    &--desktop-only {
+      display: grid;
+    }
+  }
+}
+
+@include media-breakpoint-up(xl) {
+  .postcode-checker {
+    grid-template-columns: 1fr 1fr;
+    grid-template-areas:
+    "title  title"
+    "field  action"
+    "error  error";
+
+    &__action {
+      margin-top: 0;
+    }
+  }
+}

package/src/scss/components/_price-badges-critical.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;

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;

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

@@ -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;

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

@@ -114,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;

package/src/scss/components/_sticky-element-appearance.scss

@@ -7,7 +7,9 @@
   opacity: 0;
   pointer-events: none;
   will-change: transform, opacity;
-  transition: transform 0.5s ease, opacity 0.5s ease;
+  transition:
+    transform 0.5s ease,
+    opacity 0.5s ease;
 
   &:not(.is-hidden) {
     transform: translateY(0);
@@ -18,7 +20,9 @@
   &.is-hidden {
     transform: translateY(100%);
     opacity: 0;
-    transition: transform 0.5s ease 0s, opacity 0.5s ease 5s;
+    transition:
+      transform 0.5s ease 0s,
+      opacity 0.5s ease 5s;
     pointer-events: none;
   }
 }