wickes-css2 2.113.0 → 2.117.0-develop.1

package/src/scss/components/_pdf-preview-modal.scss

@@ -0,0 +1,122 @@
+.pdf-preview {
+  &__heading {
+    font-size: 1rem;
+    padding: 10px 0;
+
+    .pdf-preview__icon {
+      font-size: 1.25rem;
+      color: $blue;
+      margin-right: 10px;
+    }
+  }
+
+  &__controls {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 8px 0;
+    border-top: 1px solid $gray-light;
+
+    .btn {
+      margin: 0 4px;
+
+      // The global button-secondary mixin styles :focus like :hover, so a tapped
+      // button stays filled. Keep the filled look for keyboard focus only.
+      &:focus:not(:focus-visible) {
+        color: $blue;
+        background-color: $white;
+        border-color: $blue;
+        box-shadow: none;
+      }
+
+      // Touch screens keep :hover on the last tapped element; drop it where
+      // there is no real hover. :active still gives feedback while pressed.
+      @media (hover: none) {
+        &:hover {
+          color: $blue;
+          background-color: $white;
+          border-color: $blue;
+        }
+      }
+    }
+  }
+
+  &__pages {
+    display: inline-flex;
+    align-items: center;
+    margin: 0 8px;
+    font-size: 0.875rem;
+  }
+
+  &__page-input {
+    width: 50px;
+    margin-right: 4px;
+    padding: 2px 4px;
+    border: 1px solid $gray;
+    border-radius: 3px;
+    text-align: center;
+  }
+
+  // Scrolling, page stacking and the spacing around the pages come from the
+  // PdfPreview library; only the decoration is set here. The background makes
+  // the gutter visible, so it reads as the edge of the preview.
+  &__viewer {
+    height: 50vh;
+    background: $gray-light;
+  }
+
+  &__info {
+    margin-top: 1rem;
+    text-align: center;
+  }
+
+  &__actions {
+    padding: 0 30px;
+
+    .btn {
+      width: 100%;
+
+      &:last-of-type {
+        margin-top: 1rem;
+      }
+    }
+  }
+
+  &__page {
+    background: $white;
+    box-shadow: 0 2px 8px $black-transparent20;
+  }
+
+  // sass-lint:disable no-important
+  .modal-header {
+    .modal-title {
+      margin-bottom: 0 !important;
+    }
+  }
+}
+
+.id-pdf-preview {
+  padding-bottom: 10px;
+}
+
+// Only the preview area breaks out of the modal's content column; the heading
+// and the navigation above it keep the default width. Row margin and column
+// gutter are both zeroed so the preview sits flush with the popup edges. The
+// border sits here rather than on the controls so it spans the whole popup.
+.id-pdf-preview-pages {
+  border: 1px solid $gray-light;
+
+  .modal-box__inner-row {
+    margin: 0;
+  }
+
+  .modal-box__inner-columns {
+    @include make-col(12);
+
+    padding: 0;
+  }
+}
+
+.id-pdf-preview-actions {
+  padding-bottom: 30px;
+}

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/_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,35 @@
+.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%;
+  }
+
+  &--missing-image {
+    .swiper-slide-main,
+    .swiper-slide-thumbs {
+      object-fit: contain;
+    }
+  }
+}
+
+@include media-breakpoint-up(sm) {
+  .thumb-gallery {
+    .swiper-container-thumbs {
+      padding: 0;
+    }
+  }
+}