wickes-css2 2.105.0-develop.1 → 2.105.0-develop.2

package/build/js/page/klarna-modal-scroll-disable.js

@@ -2,8 +2,8 @@ var Wick = Wick || {};
 
 Wick.KlarnaModalScrollDisable = (function () {
     const $body = $('body'),
-      klarnaPopUp = 'klarna-osm-interstitial',
-      scrollDisableClass = 'overflow-hidden';
+          klarnaPopUp = 'klarna-osm-interstitial',
+          scrollDisableClass = 'overflow-hidden';
 
     window.addEventListener(klarnaPopUp, (e) => {
         let isKlarnaPopUpActive = e.detail.action === 'show';

package/build/js/page/online-exclusive.js

@@ -301,5 +301,4 @@ Wick.onlineExclusive = (function () {
             $('html, body').animate({scrollTop: dn}, 1000);
         });
     });
-
 })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wickes-css2",
-  "version": "2.105.0-develop.1",
+  "version": "2.105.0-develop.2",
   "description": "CSS and JS and page templates in use by Wickes",
   "main": "index.js",
   "scripts": {

package/src/components/date-selection.hbs

@@ -28,7 +28,18 @@
                       <div class="calendar__row">
                         <div class="calendar__row_days">
                     {{/if}}
-                          <span class="calendar__cell calendar__cell_cnt{{#if isInactive}} calendar__cell_inactive{{/if}}">{{day}}</span>
+                    <span class="calendar__cell calendar__cell_cnt{{#if isInactive}} calendar__cell_inactive{{/if}}{{#if (eq day '1')}}{{#unless isInactive}} calendar__cell_rapid{{/unless}}{{/if}}">
+                      {{#if (eq day '1')}}
+                        {{#unless isInactive}}
+                          {{day}}
+                          <span class="label-rapid">Rapid</span>
+                        {{else}}
+                          {{day}}
+                        {{/unless}}
+                      {{else}}
+                        {{day}}
+                      {{/if}}
+                    </span>
                     {{#if (eq (mod_inc @index 7) 0)}}
                         </div>
                       </div>
@@ -53,11 +64,19 @@
             </div>
         </div>
         <div class="delivery-time">
-            {{> delivery-types
-                title=titleDelivery
-                subtitle=subtitleDelivery
-                classImg=imgDelivery
-            }}
+          <div class="delivery-time__rapid-hint">
+            <span class="icon-wrap icon-wrap--large">
+              <i class="fas fa-shipping-fast icon"></i>
+            </span>
+          <p class="description">
+            Select todays’ day on the calendar to get Wickes Rapid delivery
+          </p>
+        </div>
+          {{> delivery-types
+              title=titleDelivery
+              subtitle=subtitleDelivery
+              classImg=imgDelivery
+          }}
         </div>
     </div>
 </div>

package/src/js/page/klarna-modal-scroll-disable.js

@@ -2,8 +2,8 @@ var Wick = Wick || {};
 
 Wick.KlarnaModalScrollDisable = (function () {
     const $body = $('body'),
-      klarnaPopUp = 'klarna-osm-interstitial',
-      scrollDisableClass = 'overflow-hidden';
+          klarnaPopUp = 'klarna-osm-interstitial',
+          scrollDisableClass = 'overflow-hidden';
 
     window.addEventListener(klarnaPopUp, (e) => {
         let isKlarnaPopUpActive = e.detail.action === 'show';

package/src/js/page/online-exclusive.js

@@ -301,5 +301,4 @@ Wick.onlineExclusive = (function () {
             $('html, body').animate({scrollTop: dn}, 1000);
         });
     });
-
 })();

package/src/scss/common/_common.scss

@@ -595,4 +595,9 @@ div .design-appointment {
   display: flex;
   align-items: center;
   justify-content: center;
+
+  &--large {
+    width: 48px;
+    height: 48px;
+  }
 }

package/src/scss/components/_custom-slider.scss

@@ -118,7 +118,7 @@
     .messages {
       display: flex;
       flex-direction: column;
-      border: none;
+      border: 0;
       background: none;
 
       &__text {
@@ -151,7 +151,7 @@
       justify-content: space-between;
       grid-gap: 8px;
       padding: 8px 0;
-      border: none;
+      border: 0;
 
       & + .products__item {
         border-top: 1px solid $gray-light;
@@ -184,7 +184,7 @@
           min-width: 24px;
           padding: 4px;
           background: 0 0;
-          border: none;
+          border: 0;
           display: flex;
           align-items: center;
           justify-content: center;
@@ -290,8 +290,8 @@
         }
 
         &[disabled] {
-          border: none;
-          opacity: 0.6;
+          border: 0;
+          opacity: .6;
         }
       }
     }
@@ -299,7 +299,7 @@
     .btn--remove,
     .btn--quantity {
       &:hover {
-        opacity: 0.7;
+        opacity: .7;
       }
     }
 
@@ -335,7 +335,7 @@
     transition: all .3s ease;
 
     &.footer-fixed {
-      box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, .08);
+      box-shadow: 0 -4px 12px 0 rgba(0, 0, 0, .08);
       position: fixed;
       width: 100%;
       left: 0;
@@ -406,7 +406,7 @@
     }
 
     .custom-slider__footer {
-      box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, .08);
+      box-shadow: 0 -4px 12px 0 rgba(0, 0, 0, .08);
       flex-direction: column;
     }
   }
@@ -436,7 +436,7 @@
           font-weight: 700;
         }
 
-        &[aria-expanded="true"] {
+        &[aria-expanded='true'] {
           .icon-wrap .arrow-icon {
             transform: rotate(180deg);
           }
@@ -534,7 +534,7 @@
               transform: rotate(180deg);
             }
 
-            &[aria-expanded="true"] {
+            &[aria-expanded='true'] {
               .icon {
                 transform: rotate(0);
               }

package/src/scss/components/_date-selection-add-new-styles.scss

@@ -142,6 +142,48 @@
       font-weight: 500;
       font-size: 1rem;
     }
+
+    &_rapid {
+      display: inline;
+      align-items: center;
+      position: relative;
+
+      &::after {
+        content: '';
+        position: relative;
+        display: block;
+        background: $ma-white;
+        border-radius: 50%;
+        width: 34px;
+        height: 34px;
+        top: -34px;
+        left: calc(50% - 34px / 2);
+        z-index: $circle-z-index;
+      }
+
+      .label-rapid {
+        @include font-size(10);
+        @include line-height(10);
+        border-radius: 30px;
+        border: 1px solid $white;
+        background: $pacific-depths;
+        position: absolute;
+        bottom: -8px;
+        left: 50%;
+        font-weight: 700;
+        transform: translate(-50%, 0);
+        padding: 2px 4px;
+        color: $white;
+        z-index: $label-z-index;
+        pointer-events: none;
+      }
+
+      &.calendar__cell_selected {
+        &::after {
+          background: $blue;
+        }
+      }
+    }
   }
 
   &.date-selection_selected {

package/src/scss/components/_date-selection.scss

@@ -29,6 +29,36 @@
       display: none;
     }
   }
+
+  &__rapid-hint {
+    border-top: 1px dashed $blue-dark;
+    display: flex;
+    padding: 24px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    align-self: stretch;
+
+    .description {
+      @include font-size(14);
+      @include line-height(22);
+      text-align: center;
+      font-weight: 400;
+      max-width: 226px;
+      margin-bottom: 0;
+    }
+
+    .icon {
+      font-size: 2rem;
+      height: auto;
+      color: $blue-satin;
+    }
+
+    .date-selection_selected & {
+      display: none;
+    }
+  }
 }
 
 .calendar {
@@ -81,6 +111,49 @@
       background: $blue;
       color: $white;
     }
+
+    &_rapid {
+      display: inline;
+      align-items: center;
+      position: relative;
+
+      &::after {
+        content: '';
+        position: relative;
+        display: block;
+        background: $ma-white;
+        border-radius: 50%;
+        width: 34px;
+        height: 34px;
+        top: -34px;
+        left: calc(50% - 34px / 2);
+        z-index: $circle-z-index;
+      }
+
+      .label-rapid {
+        @include font-size(10);
+        @include line-height(10);
+        border-radius: 30px;
+        border: 1px solid $white;
+        background: $pacific-depths;
+        position: absolute;
+        bottom: -8px;
+        left: 50%;
+        font-style: normal;
+        font-weight: 700;
+        transform: translate(-50%, 0);
+        padding: 2px 4px;
+        color: $white;
+        z-index: $label-z-index;
+        pointer-events: none;
+      }
+
+      &.calendar__cell_selected {
+        &:after {
+          background: $blue;
+        }
+      }
+    }
   }
 }
 
@@ -249,6 +322,12 @@
 
   .delivery-time {
     width: 100%;
+
+    &__rapid-hint {
+      border-top: 0;
+      background: $white;
+      height: 100%;
+    }
   }
 
   .date-selection {

package/src/scss/helpers/_variables.scss

@@ -167,6 +167,8 @@ $btn-focus-width: 0;
 
 //// z-indexes
 $filters: 8;
+$label-z-index: 2;
+$circle-z-index: -1;
 $main-nav-overlay: 9;
 $offer-banner: 10;
 $popover: 100;

package/src/scss/kitchen-plp-main.scss

@@ -27,4 +27,3 @@
 @import 'components/kitchen/plp-filters';
 @import 'components/kitchen/filter-modal';
 @import 'components/kitchen/sort-by';
-