wickes-css2 2.112.0-develop.1 → 2.112.0-dont-forget-widget.1

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

@@ -0,0 +1,212 @@
+.why-not-add-card {
+  display: flex;
+  gap: 8px;
+  padding: 12px;
+  border: 1px solid $gray-border;
+  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;
+        }
+      }
+    }
+  }
+}
+
+@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/card-store-locator-v2.scss

@@ -90,7 +90,6 @@
   }
 
   &__address {
-
     padding: 0;
 
     .store-locator-details & {

package/src/scss/components/card_v2.scss

@@ -46,7 +46,6 @@
         @include media-breakpoint-down(sm) {
           padding-left: 0;
           padding-right: 0;
-
         }
       }
 
@@ -58,7 +57,6 @@
   }
 
   .product-card {
-
     & .card__inner-v2:hover {
       border: 1px solid $gray-dark;
 
@@ -93,7 +91,7 @@
       & .product-card__title.product-card__title-v2 {
         @include clamp-text(3);
         margin-top: 5px;
-        font-size: .875rem;
+        font-size: 0.875rem;
         font-weight: 700;
         line-height: 18px;
 
@@ -129,7 +127,6 @@
     &__price-value.product-card__price-value.product-card__price-value {
       font-size: 1.5rem;
 
-
       @media screen and (max-width: 321px) {
         font-size: 1.125rem;
       }
@@ -143,7 +140,7 @@
     }
 
     .product-rating.product-rating-v2 {
-      font-size: .875rem;
+      font-size: 0.875rem;
 
       .fa-star {
         margin-right: 0;
@@ -173,7 +170,6 @@
           &-sqm {
             color: $red;
           }
-
         }
       }
 
@@ -193,7 +189,7 @@
         text-align: left;
         width: 100%;
         margin-right: 0;
-        font-size: .875rem;
+        font-size: 0.875rem;
         font-weight: 500;
         line-height: 14px;
         color: $blue-dark;

package/src/scss/components/checkout-loader-modal.scss

@@ -4,7 +4,6 @@
   display: none;
 }
 
-
 @include media-breakpoint-down(sm) {
   .preloader {
     display: block;

package/src/scss/components/energy-efficiency.scss

@@ -71,7 +71,7 @@
   width: 45px;
   position: relative;
   height: 25px;
-  clip-path: polygon(0% 0%, calc(100% - .87em) 0%, 100% 50%, calc(100% - .87em) 100%, 0% 100%);
+  clip-path: polygon(0% 0%, calc(100% - 0.87em) 0%, 100% 50%, calc(100% - 0.87em) 100%, 0% 100%);
   background-color: $gray;
   padding-right: 10px;
 
@@ -86,11 +86,11 @@
       position: absolute;
       left: 0;
       top: 0;
-      border-radius: .5px 0 0 .5px;
+      border-radius: 0.5px 0 0 0.5px;
     }
 
     .energy-label-text {
-      -webkit-text-stroke: .5px $black;
+      -webkit-text-stroke: 0.5px $black;
     }
   }
 
@@ -100,7 +100,7 @@
 
   &__multiple {
     padding-left: 3px;
-    letter-spacing: -.3px;
+    letter-spacing: -0.3px;
   }
 
   &-text {
@@ -135,7 +135,7 @@
     border: 1px solid $black;
     clip-path: polygon(0 0, 73% 0, 100% 50%, 73% 100%, 0 100%);
     background: $black;
-    border-radius: .5px;
+    border-radius: 0.5px;
   }
 
   &--c-auto:not(:disabled):not(.disabled) {
@@ -194,7 +194,7 @@
     border: 0;
 
     @include media-breakpoint-up(md) {
-      box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .4);
+      box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.4);
     }
   }
 

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

@@ -88,15 +88,15 @@
 
         svg.svg-inline--fa {
           color: $white;
-          width: .96em;
+          width: 0.96em;
           height: auto;
         }
       }
 
       &:hover,
       &:focus {
-        opacity: .8;
-        transition: .3s all;
+        opacity: 0.8;
+        transition: 0.3s all;
       }
     }
   }
@@ -151,8 +151,8 @@
 
     &:hover,
     &:focus {
-      opacity: .8;
-      transition: all .3s;
+      opacity: 0.8;
+      transition: all 0.3s;
       color: $blue;
     }
   }
@@ -293,7 +293,7 @@
     }
 
     p {
-      font-size: .75rem;
+      font-size: 0.75rem;
       margin-bottom: 0;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -337,7 +337,7 @@
 
 #contentPages {
   p {
-    font-size: .875rem;
+    font-size: 0.875rem;
   }
 }
 
@@ -415,7 +415,7 @@
     left: 50%;
     transform: translate(-50%, 0);
     border-radius: 10px;
-    box-shadow: 0 1px 5px rgba(0, 0, 0, .12), 0 2px 2px rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2);
+    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
     padding: 15px;
 
     &--has-tradepro-banner {
@@ -587,10 +587,10 @@
 .search_reviews {
   color: $warm-grey;
   line-height: 16px;
-  font-size: .75rem;
+  font-size: 0.75rem;
   margin: 0;
   transform: translateY(3px);
-  margin-right: .5em;
+  margin-right: 0.5em;
 
   .product-rating {
     display: flex;
@@ -606,7 +606,7 @@
       .fa-star {
         display: block;
         margin-right: 2px;
-        font-size: .88em;
+        font-size: 0.88em;
       }
     }
 
@@ -632,19 +632,19 @@
 }
 
 .search-price {
-  font-size: .875rem;
+  font-size: 0.875rem;
   color: $blue-dark;
   font-weight: 700;
   display: flex;
   margin-left: auto;
 
   &__old-price {
-    font-size: .625rem;
+    font-size: 0.625rem;
     color: $warm-grey;
     font-weight: 500;
     line-height: 1.375rem;
     margin-right: 4px;
-    margin-top: .1rem;
+    margin-top: 0.1rem;
   }
 
   &__new-price {

package/src/scss/components/kitchen/_chips.scss

@@ -41,7 +41,7 @@
   border: 0;
   border-radius: 4px;
   font-weight: 400;
-  font-size: .875rem;
+  font-size: 0.875rem;
   line-height: 24px;
   cursor: pointer;
   white-space: nowrap;
@@ -54,7 +54,7 @@
 
   &:active,
   &:focus,
-  &:focus-visible, {
+  &:focus-visible {
     .pf-chip__close {
       color: $gray-dark;
     }
@@ -77,7 +77,7 @@
     color: $warm-grey;
     line-height: 1;
     pointer-events: none;
-    font-size: .911rem;
+    font-size: 0.911rem;
   }
 }
 
@@ -109,12 +109,13 @@
     outline-offset: 2px;
   }
 
-  .fa, .fas, .far {
-    font-size: .75rem;
+  .fa,
+  .fas,
+  .far {
+    font-size: 0.75rem;
   }
 }
 
-
 @include media-breakpoint-up(md) {
   .plp-selected {
     &.desktop {

package/src/scss/components/kitchen/_filter-card.scss

@@ -71,7 +71,7 @@
     color: $white;
     font-size: 12px;
     opacity: 0;
-    transition: opacity .15s ease-in-out;
+    transition: opacity 0.15s ease-in-out;
   }
 }
 

package/src/scss/components/kitchen/_sort-by.scss

@@ -15,7 +15,7 @@
     right: 22px;
     color: $warm-grey;
     font-size: 12px;
-    transition: transform .2s;
+    transition: transform 0.2s;
   }
 
   .sort-dd {
@@ -114,7 +114,7 @@
       right: 14px;
       color: $blue;
       font-size: 12px;
-      transition: transform .2s;
+      transition: transform 0.2s;
     }
   }
 }
@@ -168,7 +168,6 @@
   opacity: 1;
 }
 
-
 @include media-breakpoint-up(md) {
   .sort--desktop {
     display: flex;

package/src/scss/components/kitchen/strip-stickers.scss

@@ -5,7 +5,7 @@
 
   .strip-sticker {
     padding: 4px 12px;
-    font-size: .875rem;
+    font-size: 0.875rem;
     font-weight: 500;
     white-space: nowrap;
     overflow: hidden;

package/src/scss/components/loader.scss

@@ -36,7 +36,7 @@
       display: inline-block;
       box-sizing: content-box;
       opacity: 1;
-      animation: spin .7s infinite linear;
+      animation: spin 0.7s infinite linear;
       border: 8px solid $black-transparent20;
       border-top-color: $white;
       border-radius: 100%;
@@ -133,7 +133,7 @@
   z-index: 2;
   width: 100%;
   height: 100%;
-  background: rgba(255, 255, 255, .5);
+  background: rgba(255, 255, 255, 0.5);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -161,7 +161,7 @@
   &--full-page {
     z-index: 150;
     position: fixed;
-    background: rgba(255, 255, 255, .8);
+    background: rgba(255, 255, 255, 0.8);
 
     .loader-container {
       width: calc(100% - 40px);
@@ -200,14 +200,13 @@
       text-align: center;
       font-style: normal;
       font-weight: 500;
-      font-size: .75rem;
+      font-size: 0.75rem;
       line-height: 16px;
       margin-bottom: 0;
     }
   }
 }
 
-
 @keyframes rotate {
   to {
     transform: rotate(360deg);
@@ -236,7 +235,7 @@
   flex-direction: column;
   z-index: 101;
   position: fixed;
-  background: rgba(255, 255, 255, .8);
+  background: rgba(255, 255, 255, 0.8);
 
   h2 {
     margin-top: 25px;