wickes-css2 2.113.0-ripple.7 → 2.113.0

package/src/page_product-details-suite-includes.html

@@ -1,122 +0,0 @@
-{{#extend "base" pageClass="page-product-details" title="Product details page suite includes "
-          isDiscount=true
-          isExcludingDelivery=true
-          isCashback=false
-          isQuantity=true
-          isSize=false
-          klarna-placement=true
-          clearpay-placement=true
-          hourly-delivery=true
-          isStaticBadges=true
-          badges=pdp-price-badges.rippleBadges.greenRed
-          step3=true
-          currentlyInStock=true
-          pagePdp=true
-          package=true
-          postcodeChecker=false
-}}
-    {{#content "head" mode="append" pagePdp=true}}
-    {{/content}}
-    {{#content "body"}}
-        <main class="pdp__main">
-            <div class="container">
-                <div class="pdp pdp--ripple">
-                    <div class="pdp__title">
-                        <h1 class="pdp__heading">Bosch PSB 1800 LI-2 18V Li-Ion Cordless Combi Drill Example with long
-                            title in two raws
-                        </h1>
-                        <div class="pdp__reviews_small">
-                            <span class="product-code product-code-v2">Product code: <strong id="product-code-val">236334</strong></span>
-                            <div class="product-card__reviews review-star">
-                                <div class="product-rating product-rating-v2">
-                                    <div class="rating-bg">
-                                        <i class="fa fa-star" aria-hidden="true"></i>
-                                        <i class="fa fa-star" aria-hidden="true"></i>
-                                        <i class="fa fa-star" aria-hidden="true"></i>
-                                        <i class="fa fa-star" aria-hidden="true"></i>
-                                        <i class="fa fa-star" aria-hidden="true"></i>
-                                        <div class="rating-overlay"
-                                             data-rating="{{#if review-rating}}{{review-rating}}{{else}}0{{/if}}">
-                                            <i class="fa fa-star" aria-hidden="true"></i>
-                                            <i class="fa fa-star ml-1" aria-hidden="true"></i>
-                                            <i class="fa fa-star ml-1" aria-hidden="true"></i>
-                                            <i class="fa fa-star ml-1" aria-hidden="true"></i>
-                                            <i class="fa fa-star ml-1" aria-hidden="true"></i>
-                                        </div>
-                                    </div>
-                                </div>
-                                <span class="review-star-average review-star-average-v2">(4.6)</span>
-                            </div>
-                            <span class="pdp__reviews-link-wrap"><a href="#" data-link="#pdp-reviews" id="open-review">82 reviews</a></span>
-                        </div>
-                    </div>
-
-                    <div class="pdp__full-gallery">
-                        {{> thumb-gallery }}
-                    </div>
-
-                    <div class="pdp__aside">
-                        {{> price-block-v2 isProductSaved=false isUserLogedOut=false
-                        price=ripple-pdp.price was_price=ripple-pdp.was_price}}
-                    </div>
-
-                    <div class="pdp__full-description">
-                        {{> product-main-info-v2 currentlyInStock=false hideShareButton=true}}
-                    </div>
-
-                    <div class="pdp__suite-includes">
-                        {{> suite-includes products=ripple-pdp.suite-products-promo was_price=ripple-pdp.was_price price=ripple-pdp.price }}
-                    </div>
-                    {{> fulfilment-accordions}}
-                </div>
-            </div>
-            <div class="container container-info">
-                <div class="pdp pdp--ripple">
-                    <div class="pdp__info">
-                        {{> pdp-info-v2 floor=true }}
-                    </div>
-                </div>
-            </div>
-            <div class="pdp--ripple">
-                {{> seo-widgets title="Related category" }}
-            </div>
-        </main>
-    {{/content}}
-    {{#content "foot" mode="append"}}
-        <script type="text/html" id="mini-basket-popup">
-                {{> popover-mini-basket mod="popover-mini-basket_just-added" products=mini-basket.just-added just-added=true}}
-        </script>
-        <script defer src="./js/page/pdp.js"></script>
-        {{> click-and-collect-modal}}
-        {{> thank-you-modal}}
-    {{/content}}
-{{/extend}}
-<!--<script defer src="./js/page/ti.js"></script>-->
-<script type="module" defer src="./js/page/installation/fi.js"></script>
-<script defer src="./js/page/ripple/thumb-gallery.js" onload="Wick.ThumbGallery.init('[products/wickes/GPID_5000143102_00, products/wickes/GPID_5000143102_01, products/wickes/GPID_5000143102_02, products/wickes/GPID_5000143102_03, products/wickes/GPID_5000088246_00, products/wickes/GPID_5000088246_01, products/wickes/GPID_5000088246_02, products/wickes/GPID_5000088246_03, products/wickes/GPID_5000088246_04, products/wickes/GPID_5000088246_05, products/wickes/GPID_5000088246_06, products/wickes/GPID_1100209019_00, products/wickes/GPID_1100209019_01, products/wickes/GPID_1100209019_02, products/wickes/GPID_1100209019_03, products/wickes/GPID_1100209019_04, products/wickes/GPID_1100209019_05]')"></script>
-<script defer src="./js/postcode-checker.min.js"></script>
-<script>
-    if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
-        $(document).ready(function () {
-            $('.modal').on('scroll', function () {
-                $(':focus').blur();
-            });
-        });
-    }
-
-    $(document).ready(function () {
-
-        $('#info-details').toggleClass('accordion_collapsed');
-        $('#details-content').css('display', 'block');
-
-        $('#open-review').on('click', function () {
-            $('#info-review').toggleClass('accordion_collapsed');
-            $('#review-content').css('display', 'block');
-        });
-
-        $('.ti__next ti__next3 .btn').on('click', function () {
-           alert('Click');
-        });
-    })
-</script>
-

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

@@ -1,54 +0,0 @@
-.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/_package-card.scss

@@ -1,63 +0,0 @@
-.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

@@ -1,88 +0,0 @@
-.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

@@ -1,115 +0,0 @@
-.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: .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/_suite-includes.scss

@@ -1,141 +0,0 @@
-.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

@@ -1,98 +0,0 @@
-.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

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