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

package/src/scss/components/_big-wins.scss

@@ -536,6 +536,7 @@
       margin-bottom: 15px;
 
       .store {
+        &__act,
         &__count {
           display: none;
         }
@@ -637,6 +638,12 @@
 
     .stock__store {
       padding-bottom: 40px;
+
+      .store__act {
+        padding-top: 7px;
+        position: absolute;
+        color: $blue;
+      }
     }
 
     .stock__tabs {
@@ -874,7 +881,7 @@
     }
 
     &_cell {
-      border: 1px solid $gray-light;
+      border: 2px solid $gray-light;
 
       &:nth-child(2n+1) {
         padding-left: 20px;

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

@@ -16,10 +16,6 @@
     }
   }
 
-  &__annotation {
-    font-size: .75rem;
-  }
-
   .delivery-date::after {
     border: 0;
   }
@@ -29,6 +25,7 @@
     border: 0;
 
     &__head {
+      padding: 0 30px;
       margin-bottom: 20px;
 
       &-wisdom {
@@ -148,78 +145,27 @@
     border: 0;
 
     .delivery-types {
-      padding: 0 0 10px;
+      padding: 0;
       margin: 0;
       background: initial;
 
       &__inner {
-        .btn + .btn {
-          margin-top: 15px;
+        .btn {
+          margin-bottom: 20px;
         }
-      }
-    }
-  }
-}
-
-.delivery-btn {
-  background-color: $blue;
-  color: $white;
-  pointer-events: none;
-
-  &:not(:disabled):not(.disabled) {
-    cursor: default;
-  }
-
-  &__content {
-    display: flex;
-    flex-direction: column;
-
-    .title {
-      font-size: 1rem;
-      font-weight: 700;
-      line-height: 20px;
-      margin-bottom: 0;
-    }
-
-    .subtitle {
-      margin-top: 2px;
-      font-size: .875rem;
-      font-weight: 400;
-      line-height: 22px;
-      text-wrap: auto;
-    }
-
-    & + .delivery-btn__image {
-      margin-left: 5px;
-    }
-  }
 
-  &__image {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 41px;
-    height: 41px;
-    flex-shrink: 0;
-
-    .svg-inline--fa.fa-shipping-fast {
-      font-size: 1.7rem;
-      height: auto;
+        .delivery-type__action-btn-primary {
+          background-color: $blue;
+          border-color: $blue;
+          color: $white;
+          pointer-events: none;
+          cursor: default !important;
+        }
+      }
     }
   }
 }
 
-.delivery-container {
-  .btn.btn_full {
-    display: flex;
-    padding: 16px 20px;
-    align-items: center;
-    justify-content: center;
-    border: 0;
-    border-radius: 0;
-  }
-}
-
 @include media-breakpoint-up(sm) {
   .date-selection {
     .calendar {
@@ -235,6 +181,7 @@
     .delivery-date,
     .delivery-time {
       height: auto;
+      //min-height: 362px;
     }
 
     .calendar {
@@ -259,18 +206,12 @@
   }
 }
 
-@include media-breakpoint-up(lg) {
-  .date-selection.date-selection_selected {
-    .delivery-types {
-      padding: 0;
-    }
-  }
-}
-
-@include media-breakpoint-only(lg) {
-  .delivery-container {
-    .btn.btn_full {
-      padding: 10px;
+@include media-breakpoint-up(xl) {
+  .date-selection {
+    .calendar {
+      &__head {
+        padding: 0 25px;
+      }
     }
   }
 }

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/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;
-  }
-}