wickes-css2 2.93.0 → 2.94.0-develop.1

package/src/scss/my-account-main-v2.scss

@@ -0,0 +1,32 @@
+@import 'globals/global-imports';
+@import 'globals/global-partials';
+
+// Components
+@import 'components/request-pass';//checkout & my-acc + tradepro
+//@import 'components/popup-delivery';//checkout
+@import 'components/user-address';//checkout & my-acc + tradepro & components (recheck for modal-content class)
+@import 'components/order-header';//my-acc + tradepro
+//@import 'components/merge-basket-options';//checkout & components
+@import 'components/tables';//my-acc + tradepro
+//@import 'components/video';//iframe video(to be checked if is used)
+@import 'globals/global-components';
+@import 'components/modal-slider';//deep dependence
+@import 'components/product-card';//deep dependence
+@import 'components/your-details';//deep dependence
+@import 'components/map';//deep dependence
+@import 'components/aside-nav2';//deep dependence
+@import 'components/account-heading';//deep dependence
+@import 'components/card-store-locator';//deep dependence
+@import 'components/pagination';//deep dependence
+@import 'components/price-block';//deep dependence
+@import 'components/notifications';//deep dependence
+@import 'components/lines-group';//deep dependence
+@import 'components/card';//deep dependence
+@import 'components/accordion';//deep dependence
+@import 'components/order-line';//deep dependence
+@import 'components/clamp';//deep
+@import 'components/payment-transactions';
+@import 'components/_load-more.scss';
+
+// Pages
+@import 'pages/my-account-v2';

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

@@ -164,6 +164,45 @@ 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 {
@@ -180,3 +219,15 @@ 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-v2.scss

@@ -0,0 +1,570 @@
+@import '../helpers/helpers';
+@import '../components/my-account/consignment-info';
+@import '../components/my-account/shipment';
+@import '../components/my-account/order';
+@import '../components/my-account/menu';
+@import '../components/my-account/contacts';
+@import '../components/my-account/mobile-nav';
+
+.my-account {
+  margin: 0;
+  display: block;
+  padding: 0;
+
+  .notification {
+    &_general {
+      margin-bottom: 8px;
+      margin-top: 8px;
+    }
+
+    &_reminder {
+      margin: 0 0 1.5rem;
+    }
+
+    &_link {
+      color: $white;
+      text-decoration: none;
+      padding: 0 5px;
+
+      &:hover {
+        text-decoration: none;
+        color: $white;
+      }
+    }
+
+    &_info-message {
+      border: 0;
+      text-align: center;
+      margin: 0;
+      background: $virid-darker;
+      color: $white;
+      padding: 4px 5px;
+      font-size: .75rem;
+    }
+  }
+
+  .account-actions {
+    background: $gray-bg;
+    padding: 24px 0;
+
+    &__list {
+      list-style-type: none;
+      display: flex;
+      flex-direction: column;
+      background: $white;
+      padding: 16px;
+      margin-bottom: 0;
+    }
+
+    &__item {
+      & + .account-actions__item {
+        margin-top: 16px;
+      }
+    }
+
+    &__link {
+      text-decoration: none;
+      font-weight: 500;
+      color: $blue;
+      display: flex;
+      align-items: center;
+      transition: all .3s;
+
+      &:hover {
+        opacity: .7;
+        text-decoration: underline;
+      }
+
+      .icon {
+        width: 24px;
+        height: 24px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 8px;
+        font-size: 1rem;
+      }
+    }
+  }
+
+  .account-summary {
+    background: $ma-white;
+    padding: 24px 0;
+
+    &__wrapper {
+      background: $blue-dark;
+      border-radius: 4px;
+      color: $white;
+      padding: 16px;
+      width: 100%;
+    }
+  }
+
+  .discount,
+  .clipboard-code {
+    background: rgba(255, 255, 255, .08);
+    border-radius: 4px;
+    padding: 16px;
+
+    .title {
+      margin-bottom: 0;
+      font-weight: 700;
+      font-size: 1rem;
+      line-height: 1.25rem;
+    }
+
+    .subtitle {
+      display: inline-block;
+      font-weight: 400;
+      font-size: .875rem;
+      line-height: 1.375rem;
+    }
+  }
+
+  .discount {
+    margin-top: 16px;
+    padding-bottom: 26px;
+
+    &__content {
+      display: flex;
+
+      .subtitle {
+        margin: 4px 0 0;
+      }
+
+      .icon {
+        font-size: 1.44rem;
+        height: 18px;
+        margin: 6px 4px;
+        color: $blue-satin;
+      }
+    }
+
+    &__code {
+      margin-left: 8px;
+    }
+  }
+
+  .clipboard-code {
+    display: flex;
+    margin-top: 16px;
+
+    .icon {
+      width: 24px;
+      height: 25px;
+      margin: 4px;
+      color: $blue-satin;
+    }
+
+    &__content {
+      margin-left: 8px;
+    }
+
+    &__cta {
+      margin-top: 4px;
+      display: flex;
+      align-items: center;
+
+      .btn--icon {
+        padding: 4px;
+        margin-left: 4px;
+        border: 0;
+        border-radius: 0;
+        background: transparent;
+        display: inline-flex;
+
+        .icon-copy {
+          width: 14px;
+          height: auto;
+          color: $white;
+        }
+      }
+    }
+
+    &.trade-pro-id {
+      .icon path {
+        fill: $blue-satin;
+      }
+    }
+  }
+
+  .greetings {
+    word-break: break-all;
+
+    .title {
+      font-weight: 500;
+      font-size: 1.625rem;
+      line-height: 2.25rem;
+      margin-bottom: 0;
+      text-align: left;
+    }
+
+    .subtitle {
+      margin-top: 5px;
+      margin-bottom: 0;
+    }
+  }
+
+  .barcode {
+    margin-top: 16px;
+    padding: 12px;
+    background: $white;
+    border-radius: 4px;
+    color: $gray-dark;
+    position: relative;
+    font-size: .75rem;
+    line-height: 1rem;
+
+    &__discount {
+      position: absolute;
+      top: -8px;
+      right: -8px;
+
+      img {
+        border-radius: 40px;
+        width: 100%;
+        max-width: 58px;
+      }
+    }
+
+    &__content {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-bottom: 8px;
+
+      p {
+        margin-bottom: 0;
+        margin-left: 8px;
+        font-weight: 500;
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .custom-icon {
+        width: 13px;
+        height: auto;
+      }
+    }
+
+    &__image {
+      display: flex;
+
+      svg {
+        width: 100%;
+        height: auto;
+      }
+    }
+
+    &__code {
+      text-align: center;
+      margin-top: 8px;
+      margin-bottom: 0;
+    }
+  }
+
+  .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;
+
+      & + & {
+        margin-top: 16px;
+      }
+    }
+
+    .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;
+      }
+    }
+  }
+}
+
+@include media-breakpoint-up(sm) {
+  .my-account {
+    .account-actions {
+      padding-top: 32px;
+      padding-bottom: 32px;
+
+      &__list {
+        margin-top: 0;
+        margin-left: 10px;
+        padding: 0 0 0 16px;
+        background: transparent;
+        border-left: 1px solid $white;
+        justify-content: center;
+      }
+
+      &__link {
+        color: $white;
+        white-space: nowrap;
+      }
+    }
+
+    .account-summary {
+      padding-top: 32px;
+      padding-bottom: 32px;
+
+      &__wrapper {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: 3fr;
+        grid-gap: 16px;
+
+        .greetings {
+          grid-column: span 2;
+          display: flex;
+          justify-content: space-between;
+        }
+
+        .discount,
+        .clipboard-code {
+          margin-top: 0;
+        }
+
+        .discount {
+          grid-row: span 2;
+          padding-bottom: 16px;
+        }
+
+        .clipboard-code {
+          align-items: center;
+        }
+      }
+    }
+
+    .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;
+          }
+        }
+      }
+    }
+
+    .notification_info-message {
+      font-size: .875rem;
+    }
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .my-account {
+    .account-actions {
+      padding-top: 40px;
+      padding-bottom: 70px;
+    }
+
+    .account-summary__wrapper {
+      padding: 24px;
+    }
+
+    .active-orders__title {
+      font-size: 1.5rem;
+    }
+
+    .notification_general:not(.notification_info-message) {
+      margin-top: 16px;
+      margin-bottom: 16px;
+    }
+  }
+}
+
+@include media-breakpoint-only(md) {
+  .my-account {
+    .clipboard-code {
+      .icon {
+        font-size: 2rem;
+        height: auto;
+      }
+    }
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  .my-account {
+    .account-summary {
+      &__wrapper {
+        grid-template-columns: minmax(auto, 502px) repeat(2, minmax(auto, 223px));
+
+        .clipboard-code,
+        .discount {
+          padding-top: 20px;
+          padding-bottom: 20px;
+        }
+
+        .greetings {
+          grid-column: span 3;
+        }
+
+        .discount {
+          grid-row: initial;
+          flex-direction: row;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          .subtitle {
+            font-size: 1rem;
+          }
+        }
+      }
+    }
+
+    .barcode {
+      max-width: 155px;
+      height: auto;
+      margin-left: 24px;
+      padding: 12px;
+      margin-top: -4px;
+      margin-bottom: -4px;
+
+      &__content,
+      &__code {
+        display: none;
+      }
+
+      &__discount {
+        top: -12px;
+        right: -12px;
+      }
+    }
+
+    .clipboard-code.discount-code {
+      padding-right: 14px;
+    }
+
+    .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;
+      }
+    }
+  }
+}
+
+@include media-breakpoint-up(xl) {
+  .my-account {
+    .account-summary {
+      &__wrapper {
+        grid-template-columns: minmax(auto, 502px) 1fr 1fr;
+
+        .discount {
+          .icon {
+            font-size: 1.75rem;
+            height: 28px;
+            margin: auto 6px;
+          }
+        }
+
+        .clipboard-code .icon {
+          margin: auto 6px;
+          width: auto;
+          height: 32px;
+        }
+      }
+    }
+  }
+}

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

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

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

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