wickes-css2 2.109.0-test.1 → 2.110.0

package/src/scss/components/_notify-me-modal.scss

@@ -0,0 +1,139 @@
+.modal-notify-me {
+  .modal-dialog {
+    height: 100%;
+    margin: 0 auto;
+    max-width: 100%;
+  }
+
+  &.modal-box_wide {
+    .modal-box__columns {
+      max-width: 520px;
+      padding: 0;
+    }
+  }
+
+  .modal-box__inner-row {
+    margin: 0;
+
+    .modal-box__inner-columns {
+      padding: 0;
+      max-width: 100%;
+      flex: 0 0 100%;
+    }
+  }
+
+  .modal-header {
+    padding: 16px 35px 16px 24px;
+
+    .modal-title {
+      @include font-size(18);
+      @include line-height(24);
+      color: $gray-dark;
+      font-weight: 700;
+      display: flex;
+      align-items: center;
+      gap: 14px;
+
+      .icon-wrap {
+        width: 40px;
+        height: 40px;
+      }
+
+      .icon {
+        @include font-size(30);
+        color: $blue;
+        height: auto;
+      }
+    }
+
+    .close {
+      opacity: 1;
+      outline: 0;
+      right: 10px;
+    }
+
+    &:after {
+      left: 0;
+      right: 0;
+    }
+  }
+
+  .modal-body {
+    padding: 24px;
+
+    .form-row__label {
+      margin-bottom: 8px;
+    }
+
+    .notify-me-form {
+      &__note {
+        @include font-size(12);
+        @include line-height(16);
+        color: $squant;
+        font-weight: 400;
+        margin-bottom: 0;
+      }
+
+      &__ctas {
+        margin-top: 40px;
+        display: flex;
+        gap: 16px;
+
+        & > div {
+          display: contents;
+        }
+      }
+    }
+
+    .notify-me-result {
+      display: flex;
+      align-items: center;
+      gap: 15px;
+
+      &__img {
+        width: 64px;
+        height: 64px;
+        object-fit: cover;
+      }
+
+      &__title {
+        @include font-size(14);
+        @include line-height(22);
+        font-weight: 700;
+      }
+
+      & + .btn--notify-close {
+        margin-top: 40px;
+      }
+    }
+  }
+}
+
+@include media-breakpoint-down(xl) {
+  .modal-notify-me {
+    height: auto;
+    margin: 40px 16px 0;
+
+    &.modal-box_full .modal-box__inner-row {
+      margin: 0;
+    }
+
+    .modal-body {
+      .form-row {
+        padding: 0;
+        margin: 0 0 16px;
+      }
+
+      .form-row__label,
+      .form-row__field,
+      .form-row__error {
+        padding: 0;
+      }
+    }
+
+    .modal-body .notify-me-form__ctas,
+    .notify-me-result .btn--notify-close {
+      margin-top: 32px;
+    }
+  }
+}

package/src/scss/components/_order-summary.scss

@@ -1,6 +1,6 @@
 @import '../helpers/helpers';
 
-$android-offset:   60px !default;
+$android-offset: 60px !default;
 $ios-notch-offset: 80px !default;
 
 .summary {
@@ -9,7 +9,7 @@ $ios-notch-offset: 80px !default;
     background: $gray-bg;
     margin: 0 auto;
     z-index: $summary-aside;
-    box-shadow: 4px 4px 16px rgba(0, 0, 0, .25);
+    box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.25);
 
     & .form-row__col-btn {
       padding-right: 0;
@@ -55,7 +55,7 @@ $ios-notch-offset: 80px !default;
 
     &-message {
       padding-bottom: 20px;
-      font-size: .75rem;
+      font-size: 0.75rem;
     }
 
     &-main {
@@ -93,7 +93,7 @@ $ios-notch-offset: 80px !default;
     align-items: center;
     width: 24px;
     height: 24px;
-    transition: transform .3s ease;
+    transition: transform 0.3s ease;
     transform: rotate(180deg);
 
     &-up,
@@ -149,7 +149,7 @@ $ios-notch-offset: 80px !default;
   }
 
   .checkout-widget__item-vat {
-    font-size: .875rem;
+    font-size: 0.875rem;
     margin: 0;
     padding: 0;
   }
@@ -158,11 +158,25 @@ $ios-notch-offset: 80px !default;
     text-align: right;
   }
 
-  .checkout-widget__item-cc, .checkout-widget__item-delivery {
+  .checkout-widget__item-cc,
+  .checkout-widget__item-delivery {
     font-size: 1rem;
     margin-top: 5px;
   }
 
+  .checkout-widget__item-delivery-cost-message {
+    margin-top: 4px;
+    justify-content: flex-end;
+
+    #order-delivery-cost-message {
+      @include font-size(10);
+      @include line-height(12);
+
+      font-weight: 700;
+      color: $squant;
+    }
+  }
+
   .checkout-widget__total {
     display: flex;
     justify-content: space-between;
@@ -183,7 +197,7 @@ $ios-notch-offset: 80px !default;
     right: 0;
     overflow: hidden;
     display: block !important;
-    transition: height .3s ease-in-out;
+    transition: height 0.3s ease-in-out;
     max-height: calc(100vh - 177px);
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
@@ -218,12 +232,12 @@ $ios-notch-offset: 80px !default;
   .collapsing {
     height: 0;
     overflow: hidden;
-    transition: height .3s ease-in-out;
+    transition: height 0.3s ease-in-out;
   }
 
   .collapse.show {
     height: auto;
-    transition: height .3s ease-in-out;
+    transition: height 0.3s ease-in-out;
   }
 }
 
@@ -233,7 +247,7 @@ $ios-notch-offset: 80px !default;
   left: 0;
   right: 0;
   z-index: $summary-mobile-bar;
-  transition: transform .3s ease;
+  transition: transform 0.3s ease;
 }
 
 .summary__mobile-order {
@@ -245,7 +259,7 @@ $ios-notch-offset: 80px !default;
   height: 44px;
   cursor: pointer;
   color: $white;
-  transition: transform .3s ease;
+  transition: transform 0.3s ease;
 }
 
 .summary:not(.summary--mobile) {
@@ -316,7 +330,6 @@ $ios-notch-offset: 80px !default;
           display: none;
         }
       }
-
     }
 
     .checkout-widget.checkout-widget_order-summary {

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

@@ -21,13 +21,13 @@
 
   .pdp-price__oos {
     border-top: 1px solid $gray;
-    margin-bottom: 8px;
+    margin-bottom: 12px;
   }
 
   .pdp-price__value_extended,
   .pdp-price__oos,
   .pdp-price__in-store-only {
-    padding: 10px 0;
+    padding: 12px 0;
 
     p {
       margin-bottom: 0;

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

@@ -15,7 +15,7 @@
   }
 
   .pdp-price__from {
-    font-size: .6em;
+    font-size: 0.6em;
     margin-right: 4px;
   }
 
@@ -32,18 +32,29 @@
 
   .pdp-price__oos {
     border-top: 1px solid $gray;
-    margin-bottom: 8px;
+    margin-bottom: 12px;
 
     & + .pdp-price__controls,
     &:last-child {
       margin-bottom: 0;
     }
+
+    .btn--notify-open {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 12px;
+
+      .fa-bell {
+        @include font-size(18);
+      }
+    }
   }
 
   .pdp-price__value_extended,
   .pdp-price__oos,
   .pdp-price__in-store-only {
-    padding: 10px 0;
+    padding: 12px 0;
 
     p {
       margin-bottom: 0;
@@ -250,7 +261,6 @@
           border-bottom-color: $red;
         }
       }
-
     }
   }
 

package/src/scss/components/card-product-banner.scss

@@ -1,42 +1,23 @@
 @import '../helpers/helpers';
 
-.card-product-banner {
+.card-bloomreach-media-banner {
+  padding: 0 15px;
+}
+
+.card-product-banner,
+.card-bloomreach-media-banner {
   @include make-col(4);
   margin-bottom: 30px;
 
-  @include media-breakpoint-down(md) {
-    @include make-col(6);
-  }
-
-  @include media-breakpoint-down(sm) {
-    position: relative;
-    padding: 0 5px;
-    margin-bottom: 20px;
-
-    &::after {
-      content: '';
-      position: absolute;
-      bottom: 0;
-      left: 5px;
-      width: calc(100% - 10px);
-      border-bottom: 1px solid #ccc;
-    }
-  }
-
   &__link {
     display: inline-block;
     width: 100%;
     height: 100%;
     padding: 0 15px;
-
-    @include media-breakpoint-down(sm) {
-      display: inline-block;
-      padding: 0;
-      width: 100%;
-    }
   }
 
-  &__image {
+  &__image,
+  img {
     display: inline-block;
     width: 100%;
   }
@@ -86,6 +67,11 @@
 }
 
 @include media-breakpoint-down(md) {
+  .card-product-banner,
+  .card-bloomreach-media-banner {
+    @include make-col(6);
+  }
+
   .products-list {
     .card-sponsor-product,
     .card-sponsor-banner {
@@ -109,6 +95,28 @@
 }
 
 @include media-breakpoint-down(sm) {
+  .card-product-banner,
+  .card-bloomreach-media-banner {
+    position: relative;
+    padding: 0 5px;
+    margin-bottom: 20px;
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 5px;
+      width: calc(100% - 10px);
+      border-bottom: 1px solid #ccc;
+    }
+
+    &__link {
+      display: inline-block;
+      width: 100%;
+      padding: 0;
+    }
+  }
+
   .products-list {
     .product-card__sponsored {
       margin-right: auto;

package/src/scss/components/special-opening-schedule-v2.scss

@@ -3,7 +3,7 @@
 .special-opening-schedule-item.schedule-item {
   flex-direction: row;
 
-  &__reason  {
+  &__reason {
     @include make-col(1, 3);
     font-weight: 400;
     padding: 0 15px;
@@ -24,7 +24,7 @@
     white-space: nowrap;
   }
 
-  &__addition-info  {
+  &__addition-info {
     font-weight: 500;
     padding: 0 15px;
     margin: 5px 0;
@@ -35,10 +35,6 @@
 
 .store-locator {
   .special-opening-schedule-item.schedule-item {
-    &__reason  {
-      display: none;
-    }
-
     &__data-time {
       @include make-col(12);
     }

package/src/scss/components/special-opening-schedule.scss

@@ -5,10 +5,12 @@
   flex-direction: column;
   line-height: 2;
   padding: 5px 0;
+  position: relative;
 
-  &__reason  {
+  &__reason {
     font-weight: 700;
-    padding: 0 15px;
+    padding: 0 0 0 15px;
+    line-height: 24px;
   }
 
   &__data-time {
@@ -17,7 +19,10 @@
   }
 
   &__time {
-    text-transform: uppercase;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 0;
 
     @include media-breakpoint-up(sm) {
       white-space: nowrap;
@@ -28,7 +33,7 @@
     }
   }
 
-  &__addition-info  {
+  &__addition-info {
     font-weight: 500;
     padding: 0 15px;
     margin: 5px 0;
@@ -36,3 +41,11 @@
     font-size: 12px;
   }
 }
+
+@include media-breakpoint-up(xl) {
+  .special-opening-schedule-item.schedule-item {
+    &__reason {
+      min-width: 106px;
+    }
+  }
+}

package/src/scss/emulation.scss

@@ -57,12 +57,6 @@
   max-width: 0.625rem;
 }
 
-@include media-breakpoint-down(sm) {
-  .cards-store-list:not(:nth-child(-n + 4)) {
-    display: none;
-  }
-}
-
 .pdp-price__quantity-calculator,
 .calculator-hub-wrapper {
   min-height: 38px;

package/src/scss/helpers/_CTAs.scss

@@ -47,6 +47,16 @@
   }
 }
 
+@mixin button-outline-primary {
+  &:active,
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active {
+    color: $white;
+    background-color: $blue-darker;
+    border-color: $blue-darker;
+  }
+}
+
 @mixin button-secondary {
   background-color: $white;
   border-color: $blue;
@@ -217,7 +227,7 @@
     bottom: 0;
     border-radius: 34px;
     background-color: $gray;
-    transition: .4s;
+    transition: 0.4s;
 
     &:before {
       position: absolute;
@@ -228,7 +238,7 @@
       bottom: 4px;
       border-radius: 50%;
       background-color: $white;
-      transition: .4s;
+      transition: 0.4s;
     }
   }
 
@@ -381,7 +391,7 @@
   width: 100%;
   max-width: 110px;
   height: 110px;
-  transition: all .3s;
+  transition: all 0.3s;
   padding: 10px;
 
   svg {
@@ -396,7 +406,7 @@
     color: $blue-dark;
     margin-bottom: 0;
     font-weight: 400;
-    font-size: .75rem;
+    font-size: 0.75rem;
     line-height: 1rem;
     margin-top: 10px;
   }
@@ -438,6 +448,6 @@
   &:disabled,
   &[disabled] {
     pointer-events: none;
-    opacity: .4;
+    opacity: 0.4;
   }
 }

package/src/scss/pages/page_checkout_delivery-new.scss

@@ -49,6 +49,23 @@
                   font-size: 0.75rem;
                   margin-top: -15px;
                 }
+
+                &-delivery:has(+ .checkout-widget__item-delivery-cost-message) {
+                  margin-bottom: 0;
+                }
+
+                &-delivery-cost-message {
+                  margin-top: 4px;
+                  justify-content: flex-end;
+
+                  #order-delivery-cost-message {
+                    @include font-size(10);
+                    @include line-height(12);
+
+                    font-weight: 700;
+                    color: $squant;
+                  }
+                }
               }
 
               &__details-discount {
@@ -474,6 +491,25 @@
   }
 }
 
+.tooltip {
+  filter: drop-shadow(0 0 8px $black-transparent12);
+  position: absolute;
+
+  .tooltip-inner {
+    background: $white;
+    color: $gray-dark;
+    padding: 8px 16px !important;
+    border-radius: 4px;
+    font-weight: 400;
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+
+  .arrow:before {
+    border-bottom-color: $white;
+  }
+}
+
 @include media-breakpoint-up(sm) {
   .page_checkout-delivery-new {
     .add-contact-details {

package/src/scss/pages/page_products-list-combined.scss

@@ -51,10 +51,17 @@ $color-bar-radius: 3px;
     margin-bottom: 20px;
     margin-top: 10px;
 
+    &__picture {
+      display: flex;
+    }
+
     &__image {
       display: block;
       max-width: 100%;
-      margin-bottom: 20px;
+    }
+
+    img.sponsor-top-banner__image {
+      width: 100%;
     }
   }
 

package/src/scss/pages/page_products-list.scss

@@ -39,11 +39,18 @@
   }
 
   .sponsor-top-banner {
+    &__picture {
+      display: flex;
+    }
+
     &__image {
-      margin-bottom: 20px;
       display: block;
       max-width: 100%;
     }
+
+    img.sponsor-top-banner__image {
+      width: 100%;
+    }
   }
 }