wickes-css2 2.94.0-develop.6 → 2.94.0-ic-298-mega-nav.1

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

@@ -4,16 +4,20 @@
   &.date-selection_selected {
     border: 1px solid $gray;
   }
+
+  &__inner {
+    @include make-row;
+  }
 }
 
 .delivery-date {
-  width: 100%;
+  @include make-col-ready;
   height: 324px;
 }
 
 .delivery-time {
-  position: relative;
-  background: $white;
+  @include make-col-ready;
+  height: 324px;
 
   &__no-selection {
     @include heading-4;
@@ -29,11 +33,15 @@
       display: none;
     }
   }
+
+  &__show-calendar {
+    display: none;
+  }
 }
 
 .calendar {
   height: 100%;
-  padding: 20px;
+  padding: 20px 20px 10px;
   border: 1px solid $gray;
   text-align: center;
 
@@ -49,6 +57,7 @@
   &__row {
     display: flex;
     justify-content: space-between;
+    padding: 6px 20px;
 
     &_names {
       margin-bottom: 10px;
@@ -58,7 +67,7 @@
 
   &__cell {
     width: 14.2857%;
-    height: 34px;
+    height: 38px;
     line-height: 2.375rem;
 
     &_cnt {
@@ -84,8 +93,10 @@
   }
 }
 
+.delivery-selection,
 .delivery-types {
   display: none;
+  height: 304px;
   background: $blue-transparent5;
   margin: 10px 10px 10px -20px;
 }
@@ -103,6 +114,10 @@
     display: block;
   }
 
+  &__inner {
+    height: 74%;
+  }
+
   &__name {
     @include heading-5;
     display: inline-block;
@@ -171,6 +186,16 @@
     }
   }
 
+  &::after,
+  &::before {
+    display: inline-block;
+    position: absolute;
+    content: '';
+    width: 1px;
+    height: 100%;
+    background: $blue-transparent5-rgb;
+  }
+
   &::after {
     top: 0;
     right: -1px;
@@ -196,16 +221,46 @@
   }
 }
 
-.calendar__row {
-  display: block;
+.delivery-selection {
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
 
-  &:not(&_names):not(:last-child) {
-    padding-bottom: 6px;
+
+  &__date,
+  &__time {
+    font-weight: 500;
+    font-size: 1.125rem;
+    line-height: 1.5rem;
+  }
+
+  &-show {
+    display: flex;
+  }
+
+
+  &-mobile {
+    display: none;
+    margin-bottom: 8px;
+  }
+
+  &__show-calendar {
+    display: none;
   }
+}
+
+.calendar__row {
+  display: block;
+  padding: 6px 0 0;
 
   &_days,
   &_names {
     display: flex;
+    padding: 0 10px;
+  }
+
+  &_days {
+    padding-bottom: 6px;
   }
 
   &_extended {
@@ -231,13 +286,18 @@
   }
 }
 
-@include media-breakpoint-up(md) {
-  .date-selection__inner {
-    grid-gap: 10px;
-  }
-
+@include media-breakpoint-up(lg) {
   .delivery-date {
-    width: 100%;
+    @include make-col(5, 9);
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      right: 15px;
+      bottom: 0;
+      border: .5px solid $gray;
+    }
 
     .date-selection_selected & {
       &::after {
@@ -248,29 +308,94 @@
   }
 
   .delivery-time {
-    width: 100%;
+    @include make-col(4, 9);
+  }
+
+  .calendar {
+    border-right: 0;
+
+    &__row {
+      &_names {
+        padding-top: 1px;
+        padding-bottom: 1px;
+      }
+    }
+  }
+
+  .delivery-types {
+    padding-right: 20px;
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .delivery-selection-mobile,
+  .calendar__row_extended {
+    // sass-lint:disable no-important
+    display: none !important;
   }
 
+}
+
+@include media-breakpoint-only(md) {
   .date-selection {
-    .delivery-time {
-      background: initial;
+    &_selected {
+      .shown-time {
+        .date-selection__inner {
+          .delivery-date {
+            display: none;
+          }
+
+          .delivery-time {
+            display: block;
+          }
+        }
+      }
     }
+  }
 
-    &__inner {
-      display: flex;
+  .delivery-selection,
+  .delivery-time {
+    &__show-calendar {
+      display: block;
+      position: absolute;
+      font-size: .875rem;
+      line-height: 1rem;
     }
   }
-}
 
-@include media-breakpoint-only(lg) {
-  .delivery-date,
   .delivery-time {
-    max-width: 50%;
-    flex: 1 1 50%;
+    &__show-calendar {
+      bottom: 20px;
+      right: 20px;
+    }
+  }
+
+  .delivery-selection {
+    &__show-calendar {
+      bottom: 40px;
+    }
   }
 }
 
 @include media-breakpoint-down(md) {
+  .delivery-date {
+    @include make-col(12);
+
+    .date-selection_time-visible & {
+      display: none;
+    }
+  }
+
+  .delivery-time {
+    @include make-col(12);
+    display: none;
+
+    .date-selection_time-visible & {
+      display: block;
+    }
+  }
+
+  .delivery-selection,
   .delivery-types {
     margin: 10px;
   }
@@ -282,19 +407,22 @@
 
 @include media-breakpoint-down(sm) {
   .delivery-date {
-    @include make-col(12);
     height: 271px;
   }
 
   .delivery-time {
-    @include make-col(12);
-    height: auto;
+    height: 330px;
+  }
 
-    .date-selection_time-visible & {
-      display: block;
+  .calendar {
+    padding: 10px 0 0;
+
+    &__month {
+      margin-bottom: 8px;
     }
   }
 
+  .delivery-selection,
   .delivery-types {
     height: auto;
     margin: -3px 7px 7px;
@@ -309,6 +437,11 @@
       padding-top: 10px;
     }
 
+    &__inner {
+      height: 80%;
+      padding-bottom: 10px;
+    }
+
     &__slot {
       justify-content: space-between;
     }
@@ -330,6 +463,34 @@
     }
   }
 
+  .delivery-selection {
+    &-mobile {
+      position: relative;
+      padding: 5px 0;
+      margin-bottom: 17px;
+
+      &::after {
+        content: '';
+        position: relative;
+        display: block;
+        width: 100%;
+        height: 1px;
+        bottom: -13px;
+        background: $white;
+        border-bottom: 1px solid $gray;
+      }
+    }
+
+    &__date,
+    &__time {
+      font-weight: 400;
+    }
+
+    &__caption {
+      display: block;
+    }
+  }
+
   .calendar__row {
     &_extended {
       overflow-y: inherit;
@@ -340,6 +501,12 @@
         }
       }
     }
+
+    &_days,
+    &_names {
+      padding-left: 20px;
+      padding-right: 20px;
+    }
   }
 
   .delivery {
@@ -357,11 +524,29 @@
         text-align: left;
       }
     }
+
+    &-selection {
+      .delivery-selection {
+        display: none;
+      }
+    }
   }
 
   .rbn {
     text-align: left;
   }
+
+  .date-selection_time-visible {
+    .date-selection__inner {
+      .delivery-date {
+        display: block;
+      }
+
+      .delivery-time {
+        display: none;
+      }
+    }
+  }
 }
 
 @include media-breakpoint-down(xs) {

package/src/scss/components/_order-item-cc.scss

@@ -98,6 +98,12 @@
     }
   }
 
+  & .store {
+    &__act {
+      display: none;
+    }
+  }
+
   &__store-info {
     @include make-col(12);
     margin-top: 15px;

package/src/scss/components/checkout-payment-details-v2.scss

@@ -286,7 +286,7 @@
   .checkout-payment-details-v2 {
     .checkout-payment-details {
       .hop-iframe__wrapper {
-        height: 710px;
+        height: 560px;
       }
     }
   }
@@ -296,7 +296,7 @@
   .checkout-payment-details-v2 {
     .checkout-payment-details {
       .hop-iframe__wrapper {
-        height: 555px;
+        height: 560px;
       }
     }
   }

package/src/scss/emulation.scss

@@ -9,11 +9,35 @@
   }
 }
 
+[data-logged-in='true'] {
+  display: none;
+}
+
 [data-logged-in='false'] {
   visibility: hidden;
 }
 
 // sass-lint:disable no-important
+[data-is-logged-in='true'] {
+  [data-logged-in='true'] {
+    display: block;
+  }
+
+  [data-logged-in='false'] {
+    display: none !important;
+  }
+}
+
+[data-is-logged-in='false'] {
+  [data-logged-in='true'] {
+    display: none !important;
+  }
+
+  [data-logged-in='false'] {
+    visibility: visible;
+  }
+}
+
 .klarna-logo-img {
   height: 30px;
   width: 48px;

package/src/scss/helpers/_variables.scss

@@ -26,14 +26,12 @@ $gray-gradient: #e0e0e0;  // tabs gradient gray
 $gray-quill: #cececd;
 $gray-dim: #656565;
 $gray-matt: #515151;
-$squant: #666666;
 $error-bg: #fcf2f3;       // Error notification background colour
 $positive: #8dc63f;       // Positive colour
 $negative: #ed1c24;       // Negative colour
 $blue-badge: #019ee3;
-$pacific-depths: #004587;
+$pacific-depths: #004587; 
 $usp-icon-color: #1a77bc; // Usp icon color
-$pacific-depths: #004587;
 $line-through: #242424;
 $ma-white: #f4f9fe;
 $blue-satin: #99b5cf;

package/src/scss/pages/_my-account_new.scss

@@ -638,6 +638,10 @@
     align-items: center;
     padding: 17px 0 15px 10px;
 
+    &__act {
+      display: none;
+    }
+
     &__info {
       align-self: flex-start;
     }
@@ -755,6 +759,7 @@
       margin-bottom: 15px;
 
       .store {
+        &__act,
         &__count {
           display: none;
         }
@@ -855,6 +860,12 @@
 
     .stock__store {
       padding-bottom: 40px;
+
+      .store__act {
+        padding-top: 7px;
+        position: absolute;
+        color: $blue;
+      }
     }
 
     .stock__tabs {
@@ -1106,7 +1117,7 @@
     }
 
     &_cell {
-      border: 1px solid $gray-light;
+      border: 2px solid $gray-light;
 
       &:nth-child(2n+1) {
         padding-left: 20px;

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

@@ -164,45 +164,6 @@ body {
   }
 }
 
-.banner-news {
-  background: $pacific-depths;
-  color: $white;
-  margin: 0 -15px;
-  padding: 5px 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  &__content {
-    text-align: center;
-
-    .description {
-      margin-top: 5px;
-      font-size: 14px;
-      font-weight: 400;
-      line-height: 22px;
-    }
-
-    & + .banner-news__image {
-      margin-left: 5px;
-    }
-  }
-
-  .banner-news__image {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    width: 41px;
-    height: 41px;
-
-    .svg-inline--fa.fa-shipping-fast {
-      font-size: 1.7rem;
-      height: auto;
-    }
-  }
-}
-
 @include media-breakpoint-down(sm) {
   .checkout-voucher {
     .form-row__error {
@@ -219,15 +180,3 @@ body {
     }
   }
 }
-
-@include media-breakpoint-up(sm) {
-  .banner-news {
-    margin: 0;
-  }
-}
-
-@include media-breakpoint-up(md) {
-  .banner-news {
-    padding: 8px 30px;
-  }
-}

package/src/scss/pages/my-account.scss

@@ -8,7 +8,6 @@
 @import 'my-account_change-password';
 @import 'my-account_order-history';
 @import 'my-account_new';
-@import '../components/my-account/mobile-nav';
 
 .left-aside {
   @include media-breakpoint-down(md) {

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

@@ -9,7 +9,6 @@
     .checkout-title__title {
       color: $blue-ocean;
       font-weight: 400;
-      line-height: 1.75rem;
     }
 
     &__aside {
@@ -568,7 +567,7 @@
       }
 
       &__wrapper {
-        padding: 25px 15px;
+        padding: 25px 20px 20px;
         margin: 0 -15px;
       }
 

package/src/scss/pages/page_paint-mixing-error.scss

@@ -14,4 +14,4 @@ html {
   & > .hybris-class {
     flex: 1;
   }
-}
+}

package/src/scss/partials/_header.scss

@@ -286,22 +286,6 @@
   padding-right: 0;
 }
 
-.header-shop-list {
-  .icon {
-    color: $white;
-  }
-
-  .custom-icon {
-    path {
-      fill: $white;
-    }
-  }
-
-  .icon-user {
-    font-size: 1.1875rem;
-  }
-}
-
 .header-minicart__btn-icon {
   vertical-align: top;
 }
@@ -439,26 +423,7 @@
   &.user_desktop {
     .user__name {
       display: flex;
-      align-items: center;
       color: $blue-dark;
-
-      .btn__text {
-        display: flex;
-      }
-
-      .custom-icon {
-        width: 1.125rem;
-        height: auto;
-
-        path {
-          fill: $blue-dark;
-        }
-      }
-
-      .icon-user {
-        width: auto;
-        font-size: 1rem;
-      }
     }
 
     .icon-logout {

package/src/scss/partials/_main-nav.scss

@@ -215,6 +215,11 @@
     opacity: 0;
     animation: fade-in .5s ease-in-out forwards;
 
+    .main-nav[data-ssr='true'] &:not(.slide-in):not(.slide-in-l2r) {
+      opacity: 1;
+      animation: none;
+    } 
+
     &_order-line {
       color: $blue;
     }
@@ -793,10 +798,6 @@
         svg {
           width: auto;
           height: 16px;
-
-          path {
-            fill: $blue-dark;
-          }
         }
       }
 
@@ -882,8 +883,8 @@
           margin-right: 0;
         }
 
-        &:hover,
-        &:focus,
+        &:hover, 
+        &:focus, 
         &:active,
         .is-hovered & {
           color: $blue-dark;
@@ -947,6 +948,10 @@
       padding: 0;
       gap: 30px;
 
+      &-banner {
+        display: none;
+      }
+
       &__label {
         margin-bottom: 10px;
         padding: 0 10px;