wickes-css2 2.93.0 → 2.94.0-develop.1

package/src/partials/main-nav.hbs

@@ -15,9 +15,17 @@
       <div class="main-nav__button">
         <a href="./page_my-account.html" class="nav-button">
           <span class="nav-button__icon">
+            {{#ifCond iconUserClass '||' customIconUserClass}}
+              {{#if customIconUserClass}}
+                {{{customIconUserClass}}}
+              {{else}}
+                <i class="{{iconUserClass}} icon"></i>
+              {{/if}}
+            {{else}}
               <i class="fas fa-user"></i>
+            {{/ifCond}}
           </span>
-          <span class="nav-button__text">Hi, Christopher</span>
+          <span class="nav-button__text">Hi Christopher</span>
         </a>
       </div>
       <div class="main-nav__button">
@@ -26,13 +34,13 @@
           <span class="nav-button__text">My Account</span>
           <span class="rewards-counter">0</span>
         </a>
-      </div> 
+      </div>
       <div class="main-nav__button">
         <a href="./page_my-account.html" class="nav-button">
           <span class="nav-button__icon"></span>
           <span class="nav-button__text">Address Book</span>
         </a>
-      </div> 
+      </div>
       <div class="main-nav__button">
         <a href="./page_my-account_order-history.html" class="nav-button">
           <span class="nav-button__icon"></span>
@@ -63,7 +71,7 @@
           <span class="nav-button__icon"></span>
           <span class="nav-button__text">My TradePro Account</span>
         </a>
-      </div> 
+      </div>
       <div class="main-nav__button">
         <a href="./page_my-account_order-history.html" class="nav-button">
           <span class="nav-button__icon"></span>
@@ -81,13 +89,13 @@
           <span class="nav-button__icon"></span>
           <span class="nav-button__text">Order History</span>
         </a>
-      </div>     
+      </div>
       <div class="main-nav__button">
         <a href="./page_my-account.html" class="nav-button">
           <span class="nav-button__icon"></span>
           <span class="nav-button__text">TradePro Discount Code</span>
         </a>
-      </div> 
+      </div>
       <div class="main-nav__button">
         <a href="./page_my-account.html" class="nav-button">
           <span class="nav-button__icon"></span>
@@ -116,7 +124,7 @@
           <span class="nav-button__icon"></span>
           <span class="nav-button__text">My TradePro Account</span>
         </a>
-      </div> 
+      </div>
       <div class="main-nav__button">
         <a href="./page_my-account_order-history.html" class="nav-button">
           <span class="nav-button__icon"></span>
@@ -134,13 +142,13 @@
           <span class="nav-button__icon"></span>
           <span class="nav-button__text">Order History</span>
         </a>
-      </div>     
+      </div>
       <div class="main-nav__button">
         <a href="./page_my-account.html" class="nav-button">
           <span class="nav-button__icon"></span>
           <span class="nav-button__text">TradePro Discount Code</span>
         </a>
-      </div> 
+      </div>
       <div class="main-nav__button">
         <a href="./page_my-account.html" class="nav-button">
           <span class="nav-button__icon"></span>

package/src/scss/components/_aside-nav2.scss

@@ -178,3 +178,21 @@ $item: 7;
   }
   $item: $item - 1;
 }
+
+$item: 9;
+@while $item >= 0 {
+  .account-nav[data-active-index='#{$item}'] [data-index='#{$item}'] {
+    background: $ma-white;
+
+    &:hover,
+    &:focus {
+      background: $white;
+    }
+
+    a {
+      color: $gray-dark;
+    }
+
+  }
+  $item: $item - 1;
+}

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

@@ -16,6 +16,10 @@
     }
   }
 
+  &__annotation {
+    font-size: .75rem;
+  }
+
   .delivery-date::after {
     border: 0;
   }
@@ -25,7 +29,6 @@
     border: 0;
 
     &__head {
-      padding: 0 30px;
       margin-bottom: 20px;
 
       &-wisdom {
@@ -145,27 +148,78 @@
     border: 0;
 
     .delivery-types {
-      padding: 0;
+      padding: 0 0 10px;
       margin: 0;
       background: initial;
 
       &__inner {
-        .btn {
-          margin-bottom: 20px;
-        }
-
-        .delivery-type__action-btn-primary {
-          background-color: $blue;
-          border-color: $blue;
-          color: $white;
-          pointer-events: none;
-          cursor: default !important;
+        .btn + .btn {
+          margin-top: 15px;
         }
       }
     }
   }
 }
 
+.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-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 {
@@ -181,7 +235,6 @@
     .delivery-date,
     .delivery-time {
       height: auto;
-      //min-height: 362px;
     }
 
     .calendar {
@@ -206,12 +259,18 @@
   }
 }
 
-@include media-breakpoint-up(xl) {
-  .date-selection {
-    .calendar {
-      &__head {
-        padding: 0 25px;
-      }
+@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;
     }
   }
 }

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

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

@@ -0,0 +1,46 @@
+@import '../../helpers/helpers';
+
+.consignment-info {
+  display: flex;
+  align-items: center;
+  margin-top: 12px;
+  margin-bottom: 0;
+  font-weight: 400;
+  font-size: .75rem;
+  line-height: 1rem;
+  color: $gray-dark;
+
+  &__text {
+    margin-bottom: 0;
+  }
+
+  .icon-info-component {
+    cursor: pointer;
+    font-size: .675rem;
+    width: 16px;
+    height: 16px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+@include media-breakpoint-up(sm) {
+  .consignment-info {
+    grid-area: consignmentInfo;
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .consignment-info {
+    margin-top: 16px;
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  .consignment-info {
+    margin-top: 0;
+    margin-left: 16px;
+    font-size: .875rem;
+  }
+}