wickes-css2 2.94.0-order-summary.18 → 2.94.0-preprod.2

package/src/page_payment-details_with_google-pay.html

@@ -1,4 +1,4 @@
-{{#extend "checkout" pageClass="page_checkout-delivery-new page_checkout-confirmation-new" title="Checkout - Payment details with Google Pay" isAsideSticky="true"}}
+{{#extend "checkout" pageClass="page_checkout-delivery-new page_checkout-confirmation-new page_checkout" title="Checkout - Payment details with Google Pay" isAsideSticky="true"}}
 {{#content "steps"}}
 {{> steps-three-steps active-step-index="2"}}
 {{/content}}

package/src/page_tradePro-signup.html

@@ -25,7 +25,7 @@ text="Sorry, your TradePro application has already been submitted with this info
 {{> aside-nav2 trade-pages page-name="Wickes TradePro"}}
 {{/content}}
 {{#content "main"}}
-{{> partner-signup-form }}
+{{> partner-signup-form fill-remaining=true}}
 <div class="component container divider-desk pl-0 pr-0">
   <div class="row">
     <div class="col-12">

package/src/scss/components/_marketing-preferences.scss

@@ -21,7 +21,7 @@
   }
 
   &__content {
-    font-size: 0.75rem;
+    font-size: .75rem;
     line-height: 1rem;
 
     p {

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

@@ -1,5 +1,8 @@
 @import '../helpers/helpers';
 
+$android-offset:   60px !default;
+$ios-notch-offset: 80px !default;
+
 body.summary-hidden .back-to-top {
   bottom: 20px !important;
   right: 16px !important;
@@ -337,6 +340,12 @@ body.summary-hidden .back-to-top {
   }
 }
 
+@include media-breakpoint-up(md) {
+  body:has(.summary__aside.collapse.show) .back-to-top {
+    display: none !important;
+  }
+}
+
 @include media-breakpoint-up(lg) {
   .summary {
     &__aside {
@@ -436,3 +445,87 @@ body.summary-hidden .back-to-top {
     }
   }
 }
+
+@include media-breakpoint-down(md) {
+  .tp-app {
+    &.tp-android,
+    &.tp-ios:not(.tp-ios-notch) {
+      .summary--mobile {
+        .summary__mobile-bar,
+        .summary__aside {
+          bottom: $android-offset !important;
+        }
+      }
+
+      .summary__aside.collapse.show {
+        bottom: 177px + $android-offset !important;
+      }
+
+      .summary__aside.collapsing {
+        bottom: 177px + $android-offset !important;
+      }
+
+      .summary__aside.collapse.show.single-button,
+      .summary__aside.collapsing.single-button {
+        bottom: 125px + $android-offset !important;
+      }
+    }
+
+    &.tp-ios-notch {
+      .summary--mobile {
+        .summary__mobile-bar,
+        .summary__aside {
+          bottom: $ios-notch-offset !important;
+        }
+      }
+
+      .summary__aside.collapse.show {
+        bottom: 177px + $ios-notch-offset !important;
+      }
+
+      .summary__aside.collapsing {
+        bottom: 177px + $ios-notch-offset !important;
+      }
+
+      .summary__aside.collapse.show.single-button,
+      .summary__aside.collapsing.single-button {
+        bottom: 125px + $ios-notch-offset !important;
+      }
+    }
+  }
+}
+
+@include media-breakpoint-up(sm) {
+  .tp-app {
+    &.tp-android,
+    &.tp-ios:not(.tp-ios-notch) {
+      .summary__aside.collapse.show {
+        bottom: 182px + $android-offset !important;
+      }
+
+      .summary__aside.collapsing {
+        bottom: 182px + $android-offset !important;
+      }
+
+      .summary__aside.collapse.show.single-button,
+      .summary__aside.collapsing.single-button {
+        bottom: 130px + $android-offset !important;
+      }
+    }
+
+    &.tp-ios-notch {
+      .summary__aside.collapse.show {
+        bottom: 182px + $ios-notch-offset !important;
+      }
+
+      .summary__aside.collapsing {
+        bottom: 182px + $ios-notch-offset !important;
+      }
+
+      .summary__aside.collapse.show.single-button,
+      .summary__aside.collapsing.single-button {
+        bottom: 130px + $ios-notch-offset !important;
+      }
+    }
+  }
+}

package/src/scss/components/my-account/_active-orders.scss

@@ -0,0 +1,263 @@
+@import '../../helpers/helpers';
+
+.active-orders {
+  margin-top: 24px;
+
+  &__title {
+    font-weight: 500;
+    font-size: 1.25rem;
+    line-height: 1rem;
+    color: $blue-dark;
+    margin-bottom: 0;
+  }
+
+  &__item {
+    margin-top: 16px;
+    padding: 16px;
+    background: $white;
+    border-radius: 4px;
+  }
+
+  .view-more {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-top: 12px;
+    border-top: 1px solid $gray;
+
+    .link {
+      font-weight: 500;
+      font-size: .875rem;
+      line-height: 1.375rem;
+      text-align: center;
+      color: $blue;
+      text-decoration: none;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      span:hover {
+        text-decoration: underline;
+      }
+
+      .icon {
+        margin-left: 8px;
+        font-size: 1rem;
+      }
+    }
+  }
+
+  .btn--all-orders {
+    margin-top: 16px;
+  }
+
+  .tooltip {
+    filter: drop-shadow(0 0 8px rgba(0, 0, 0, .12));
+    position: absolute;
+
+    .tooltip-inner {
+      background: $white;
+      color: $gray-dark;
+      padding: 8px 16px !important;
+      border-radius: 4px;
+      font-weight: 400;
+      font-size: .75rem;
+      line-height: 1rem;
+    }
+
+    .arrow:before {
+      border-top-color: $white;
+    }
+  }
+}
+
+.order {
+  &-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0;
+
+    &__title {
+      margin-bottom: 0;
+      font-size: 1.125rem;
+      line-height: 1.5rem;
+    }
+  }
+
+  &-status {
+    background: rgba(2, 119, 189, .1);
+    padding: 2px 8px;
+    border-radius: 50px;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+
+    .icon {
+      font-size: 1rem;
+      height: auto;
+      color: $blue;
+      margin-right: 8px;
+    }
+
+    &.completed {
+      background: rgba(103, 165, 9, .1);
+
+      .icon {
+        color: $green;
+      }
+    }
+
+    &.cancelled {
+      background: rgba(207, 0, 15, .1);
+
+      .icon {
+        color: $red;
+      }
+    }
+  }
+
+  &-details {
+    margin-top: 8px;
+
+    &__summary {
+      display: flex;
+      align-items: baseline;
+    }
+
+    &__price {
+      margin-bottom: 0;
+      font-weight: 700;
+      font-size: 1.125rem;
+      line-height: 1.5rem;
+      color: $blue-dark;
+    }
+
+    &__vat {
+      margin-left: 5px;
+      line-height: 1rem;
+    }
+
+    &__count {
+      position: relative;
+      padding-left: 8px;
+      margin-left: 8px;
+      font-weight: 400;
+      font-size: .875rem;
+      line-height: 1.375rem;
+      color: $gray-dark;
+
+      &::before {
+        content: '';
+        height: 100%;
+        position: absolute;
+        max-height: 16px;
+        left: 0;
+        top: 50%;
+        width: 1px;
+        background: $gray;
+        transform: translateY(-50%);
+      }
+    }
+
+    &__date {
+      display: block;
+      margin-top: 4px;
+      font-weight: 400;
+      font-size: .875rem;
+      line-height: 1.375rem;
+      color: $gray-dark;
+    }
+  }
+}
+
+@include media-breakpoint-up(sm) {
+  .active-orders {
+    &__header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .btn--all-orders {
+        margin-top: 0;
+        max-width: 125px;
+      }
+    }
+
+    &__item {
+      display: grid;
+      grid-template-areas:
+      'header viewMore'
+      'orderDetails orderDetails'
+      'consignmentInfo consignmentInfo'
+      'shipment shipment';
+
+      .order-header {
+        flex-direction: row-reverse;
+        justify-content: flex-end;
+        grid-area: header;
+
+        &__title {
+          margin-left: 16px;
+          font-weight: 700;
+        }
+      }
+
+      .view-more {
+        grid-area: viewMore;
+        justify-content: flex-end;
+        border-top: 0;
+        padding: 0;
+
+        .link .icon {
+          margin-left: 13px;
+        }
+      }
+    }
+  }
+
+  .order-details {
+    grid-area: orderDetails;
+    display: flex;
+    align-items: baseline;
+
+    &__date {
+      margin-left: 8px;
+      padding-left: 8px;
+      margin-top: 0;
+      position: relative;
+
+      &::before {
+        content: '';
+        height: 100%;
+        position: absolute;
+        max-height: 16px;
+        left: 0;
+        top: 50%;
+        width: 1px;
+        background: $gray;
+        transform: translateY(-50%);
+      }
+    }
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .active-orders__title {
+    font-size: 1.5rem;
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  .active-orders {
+    &__item {
+      padding: 24px;
+      grid-template-areas:
+      'header consignmentInfo viewMore'
+      'orderDetails orderDetails orderDetails'
+      'shipment shipment shipment';
+      grid-template-columns: auto auto 1fr;
+      align-items: center;
+    }
+  }
+}

package/src/scss/components/my-account/_orders-nav.scss

@@ -0,0 +1,61 @@
+.nav-orders {
+  margin-top: 24px;
+
+  .account-nav {
+    padding: 0;
+
+    .accordion__header-text {
+      color: $blue;
+    }
+
+    .accordion__header-text,
+    .account-nav__link {
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 22px;
+    }
+  }
+
+  &__wrap {
+    list-style-type: none;
+    padding: 0;
+    margin-bottom: 0;
+    display: flex;
+    align-items: center;
+    border-bottom: 2px solid $gray;
+
+    .link {
+      text-decoration: none;
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 22px;
+      color: $gray-dark;
+      transition: all .3s;
+
+      &:hover {
+        color: $blue;
+      }
+    }
+  }
+
+  &__item {
+    padding: 7px 12px;
+    position: relative;
+
+    &.active {
+      .link {
+        color: $blue;
+        pointer-events: none;
+      }
+
+      &::after {
+        content: '';
+        border-bottom: 2px solid $blue;
+        position: absolute;
+        bottom: -2px;
+        left: 0;
+        width: 100%;
+      }
+    }
+  }
+}

package/src/scss/helpers/_variables.scss

@@ -24,6 +24,7 @@ $gray-whiter: #f1f1f1;
 $gray-bg: #f8f8f8;        // Menu background colour
 $gray-gradient: #e0e0e0;  // tabs gradient gray
 $gray-quill: #cececd;
+$gray-wait: #9d9d9c;
 $gray-dim: #656565;
 $gray-matt: #515151;
 $squant: #666666;

package/src/scss/libs/flatpickr.scss

@@ -0,0 +1,235 @@
+@import '../helpers/helpers';
+
+.flatpickr-datepicker {
+  margin-top: 16px;
+
+  &__label {
+    font-size: 1rem;
+    font-weight: 500;
+    line-height: 1.5rem;
+    margin-bottom: 8px;
+    display: flex;
+    align-items: center;
+
+    .icon-info {
+      cursor: pointer;
+      margin-left: 8px;
+    }
+
+    .tooltip {
+      filter: drop-shadow(0 0 8px rgba(0, 0, 0, .12));
+      position: absolute;
+
+      .tooltip-inner {
+        background: $white;
+        color: $gray-dark;
+        padding: 8px 16px !important;
+        border-radius: 4px;
+        font-weight: 400;
+        font-size: .75rem;
+        line-height: 1rem;
+      }
+
+      .arrow:before {
+        border-top-color: $white;
+      }
+    }
+  }
+
+  &__field {
+    border-radius: 3px;
+    border: 1px solid $gray;
+    padding: 7px 8px 7px 16px;
+    display: flex;
+    align-items: center;
+    max-width: 100%;
+    position: relative;
+    transition: all .3s;
+
+    &.active,
+    &:hover {
+      border-color: $blue;
+    }
+  }
+
+  .icon-wrap {
+    cursor: pointer;
+    width: 24px;
+    height: 24px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    &--cross {
+      cursor: pointer;
+      display: none;
+    }
+
+    & + .icon-wrap {
+      margin-left: 8px;
+    }
+  }
+
+  .icon-calendar {
+    font-size: 1rem;
+    color: $blue;
+  }
+
+  .flatpickr {
+    &-input {
+      padding: 0;
+      border: none;
+      font-size: 1rem;
+      font-weight: 400;
+      line-height: 1.5rem;
+      outline: none;
+      width: 100%;
+    }
+
+    &-calendar {
+      &:before,
+      &:after {
+        content: none;
+      }
+
+      &.static {
+        left: 0;
+        width: 100%;
+
+        &.open {
+          margin-top: 4px;
+          padding: 16px;
+          border-radius: 3px;
+          box-shadow: 0 0 15px 0 rgba(0, 0, 0, .20);
+        }
+      }
+    }
+
+    &-monthSelect-months {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+      margin: 12px 0 0;
+      grid-gap: 8px;
+      justify-items: center;
+      align-items: center;
+    }
+
+    &-monthSelect-month {
+      margin: 0;
+      width: 100%;
+      font-size: .875rem;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 1.375rem;
+      padding: 4px;
+      border-radius: 999px;
+      max-width: 78px;
+      color: $gray-dark;
+
+      &.selected {
+        background: $blue;
+        border-color: $blue;
+        color: $white;
+
+        &:hover {
+          border-color: $blue;
+          background: $blue;
+          color: $gray-dark;
+        }
+      }
+
+      &:not(.flatpickr-disabled):hover {
+        border-color: $blue;
+        background: transparent;
+      }
+
+      &.flatpickr-disabled {
+        color: $gray-wait;
+        pointer-events: none;
+
+        &:hover {
+          border: none;
+        }
+      }
+
+      &.today {
+        border-color: transparent;
+
+        &:hover {
+          border-color: $blue;
+          background: transparent;
+          color: initial;
+        }
+      }
+    }
+
+    &-current-month {
+      padding-top: 0;
+      height: auto;
+
+      input.cur-year {
+        padding-left: 0;
+        font-size: 0.875rem;
+        font-weight: 500;
+        line-height: 1.375rem;
+        text-align: center;
+      }
+    }
+
+    &-prev-month.flatpickr-disabled,
+    &-next-month.flatpickr-disabled {
+      display: block;
+      opacity: .6;
+      pointer-events: none;
+    }
+
+    &-months {
+      .flatpickr-prev-month,
+      .flatpickr-next-month {
+        position: relative;
+        display: flex;
+        align-items: center;
+        height: auto;
+        padding: 0;
+
+        svg path {
+          fill: $blue;
+        }
+      }
+
+      .flatpickr-month {
+        height: 100%;
+
+        .flatpickr-current-month {
+          width: 100%;
+          left: auto;
+          position: relative;
+        }
+      }
+    }
+
+    &-current-month {
+      .numInputWrapper {
+        &:hover {
+          background: transparent;
+        }
+
+        .arrowUp,
+        .arrowDown {
+          content: none;
+          display: none;
+        }
+      }
+    }
+
+    &-wrapper {
+      flex: 1;
+      position: initial;
+      width: 100%;
+    }
+
+    &-rContainer {
+      width: 100%;
+    }
+  }
+}