wickes-css2 2.112.0-develop.4 → 2.112.0-develop.7

package/src/scss/components/bloomreach/_why-not-add-card.scss

@@ -0,0 +1,223 @@
+.why-not-add-card {
+  display: flex;
+  gap: 8px;
+  padding: 12px;
+  border: 1px solid $gray;
+  border-radius: 4px;
+  background-color: $white;
+
+  &__image {
+    display: block;
+    width: 68px;
+    height: 68px;
+    object-fit: cover;
+  }
+
+  &__content {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+  }
+
+  &__title {
+    @include font-size(14);
+    @include line-height(22);
+
+    display: -webkit-box;
+    overflow: hidden;
+    color: $blue;
+    font-weight: 500;
+    text-decoration: none;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+
+    &:hover {
+      color: $blue-darker;
+      text-decoration: underline;
+    }
+  }
+
+  &__bottom {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+  }
+
+  &__price-wrap {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    min-width: 0;
+    padding-right: 8px;
+    gap: 4px;
+  }
+
+  &__price {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: 5px;
+  }
+
+  &__was-price {
+    @include font-size(14);
+    @include line-height(15);
+
+    color: $warm-grey;
+    font-weight: 500;
+    text-decoration: line-through;
+    white-space: nowrap;
+  }
+
+  &__regular-price,
+  &__sale-price {
+    @include font-size(18);
+    @include line-height(18);
+
+    color: $blue-dark;
+    font-weight: 700;
+    white-space: nowrap;
+  }
+
+  &__sale-price {
+    color: $red;
+  }
+
+  &__vat-label,
+  &__delivery {
+    @include font-size(12);
+    @include line-height(15);
+
+    color: $squant;
+  }
+
+  &__vat-label {
+    color: $blue-dark;
+    font-weight: $headings-font-weight;
+  }
+
+  &__delivery {
+    width: 100%;
+  }
+
+  .btn {
+    display: flex;
+    align-self: flex-end;
+    align-items: center;
+    justify-content: center;
+    min-width: 40px;
+    width: 40px;
+    height: 40px;
+    box-sizing: border-box;
+    border: 1px solid $green;
+    border-radius: 3px;
+    background-color: $green;
+    color: $white;
+    cursor: pointer;
+
+    &:hover {
+      background-color: $white;
+      color: $green;
+    }
+
+    &--loading {
+      background-color: $green;
+      color: $white;
+      pointer-events: none;
+    }
+  }
+
+  &__cta-icon {
+    font-size: 18px;
+  }
+
+  &__loader {
+    .loader-path {
+      stroke: $white;
+    }
+  }
+
+  &--skeleton {
+    display: grid;
+    grid-template-columns: 68px minmax(0, 1fr) 40px;
+    grid-template-rows: 14px 14px 12px 18px 15px;
+    gap: 6px 8px;
+    align-items: start;
+
+    .why-not-add-card {
+      &__image {
+        grid-column: 1;
+        grid-row: 1 / 6;
+        width: 68px;
+        height: 68px;
+      }
+
+      &__skeleton {
+        &-title {
+          grid-column: 2 / 4;
+          grid-row: 1;
+          width: 80%;
+          height: 14px;
+        }
+
+        &-title-short {
+          grid-column: 2 / 3;
+          grid-row: 2;
+          width: 55%;
+          height: 14px;
+        }
+
+        &-reviews {
+          grid-column: 2 / 3;
+          grid-row: 3;
+          width: 82px;
+          height: 12px;
+        }
+
+        &-price {
+          grid-column: 2 / 3;
+          grid-row: 4;
+          width: 64px;
+          height: 18px;
+        }
+
+        &-delivery {
+          grid-column: 2 / 3;
+          grid-row: 5;
+          width: 92px;
+          height: 12px;
+        }
+
+        &-cta {
+          grid-column: 3;
+          grid-row: 4 / 6;
+          align-self: end;
+          width: 40px;
+          height: 40px;
+          border-radius: 3px;
+        }
+      }
+    }
+  }
+}
+
+@include media-breakpoint-down(sm) {
+  .why-not-add-card {
+    .btn {
+      &:hover {
+        background-color: $green;
+        color: $white;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 375px) {
+  .why-not-add-card {
+    &__vat-label {
+      width: 100%;
+    }
+  }
+}

package/src/scss/components/bloomreach/_why-not-add.scss

@@ -0,0 +1,143 @@
+.why-not-add {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 21px 0 12px;
+  margin-bottom: -19px;
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__title {
+    @include font-size(14);
+    @include line-height(22);
+
+    margin: 0;
+    font-weight: 700;
+  }
+
+  &__arrows {
+    display: flex;
+    align-items: center;
+    gap: 30px;
+  }
+
+  &__arrow {
+    @include font-size(24);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 15px;
+    height: 24px;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: $blue;
+    cursor: pointer;
+
+    &--disabled,
+    &.swiper-button-disabled {
+      color: $warm-grey;
+      cursor: default;
+      pointer-events: none;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible {
+      outline: 2px solid $blue;
+      outline-offset: 3px;
+    }
+  }
+
+  &__slider {
+    width: 100%;
+  }
+
+  &__slide {
+    height: auto;
+  }
+
+  &__pagination {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    min-height: 6px;
+  }
+
+  &__pagination-item {
+    cursor: pointer;
+    appearance: none;
+    display: block;
+    position: relative;
+    width: 6px;
+    height: 6px;
+    padding: 0;
+    border: 0;
+    border-radius: 8px;
+    background-color: $warm-grey;
+    line-height: 0;
+    transition-property: width, background-color;
+    transition-duration: 0.25s;
+    transition-timing-function: ease;
+    outline: none;
+
+    &:before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 200%;
+      height: 200%;
+      z-index: $dropdown-z-index;
+    }
+
+    &--active {
+      width: 24px;
+      background-color: $blue;
+      cursor: default;
+      z-index: $label-z-index;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible {
+      outline: 2px solid $blue;
+      outline-offset: 2px;
+    }
+  }
+
+  &--skeleton {
+    gap: 12px;
+
+    .why-not-add {
+      &__header {
+        min-height: 22px;
+      }
+
+      &__skeleton-title {
+        width: 112px;
+        height: 14px;
+      }
+
+      &__skeleton-cards {
+        width: 100%;
+        overflow: hidden;
+      }
+    }
+  }
+}
+
+[data-why-not-add-widget] + .pdp-price__quantity-calculator {
+  margin-top: 20px
+}

package/src/scss/components/global-search.scss

@@ -139,12 +139,6 @@
   padding: 0;
   min-height: 150px;
 
-  @include media-breakpoint-down(sm) {
-    &--has-tradepro-banner {
-      padding-top: 30px;
-    }
-  }
-
   a {
     color: $gray-dark;
     text-decoration: none;

package/src/scss/pages/page_product-details-critical.scss

@@ -180,8 +180,15 @@ $gray: #ccc;
     text-transform: none;
   }
 
+  &__badges-wrapper {
+    margin: -20px -20px -10px;
+    display: flex;
+    justify-content: flex-end;
+  }
+
   &__badges {
     @include badges;
+    position: relative;
   }
 
   &__badge {

package/src/scss/pages/page_product-details.scss

@@ -207,8 +207,15 @@
     text-transform: none;
   }
 
+  &__badges-wrapper {
+    margin: -20px -20px -10px;
+    display: flex;
+    justify-content: flex-end;
+  }
+
   &__badges {
     @include badges;
+    position: relative;
   }
 
   &__badge {

package/src/sitemap.html

@@ -230,30 +230,36 @@
                         </li>
                         <li>
                             <span class="page-id">2.27</span>
+                            <a href="page_product-details-with-why-not-add-single.html" target="_blank">
+                                Product details page - With Why Not Add single widget
+                            </a>
+                        </li>
+                        <li>
+                            <span class="page-id">2.28</span>
                             <a href="page_product-details-mfe-calculator.html" target="_blank">
                                 Product details page - With MFE calculator
                             </a>
                         </li>
                         <li>
-                            <span class="page-id">2.28</span>
+                            <span class="page-id">2.29</span>
                             <a href="page_product-details-cnc-success-notification.html" target="_blank">
                                 Product details page - C&C success notifications
                             </a>
                         </li>
                         <li>
-                            <span class="page-id">2.29</span>
+                            <span class="page-id">2.30</span>
                             <a href="page_product-details-cnc-error-notification.html" target="_blank">
                                 Product details page - C&C error notifications
                             </a>
                         </li>
                         <li>
-                            <span class="page-id">2.30</span>
+                            <span class="page-id">2.31</span>
                             <a href="page_product-details-cnc-success-notification-vat.html" target="_blank">
                                 Product details page VAT
                             </a>
                         </li>
                         <li>
-                            <span class="page-id">2.31</span>
+                            <span class="page-id">2.32</span>
                             <a href="page_product-details-paint-mixing.html" target="_blank">
                                 Product details page - Paint Mixing
                             </a>