wickes-css2 2.94.0-develop.2 → 2.94.0-develop.21

package/src/scss/pages/page_my-orders.scss

@@ -0,0 +1,232 @@
+@import '../helpers/helpers';
+@import '../components/my-account/orders-nav';
+@import '../libs/flatpickr';
+@import '../components/loader';
+
+.my-orders {
+  padding-top: 0;
+
+  .notification {
+    &_info-message {
+      border: 0;
+      text-align: center;
+      margin: 0;
+      background: $virid-darker;
+      color: $white;
+      padding: 4px 5px;
+      font-size: .75rem;
+    }
+  }
+
+  &__wrap {
+    padding-top: 16px;
+  }
+
+  &__title {
+    margin-bottom: 0;
+    text-align: left;
+  }
+
+  .sort-orders {
+    margin-top: 16px;
+
+    .form-row {
+      padding: 0;
+      margin: 0;
+
+      &__label {
+        margin-bottom: 8px;
+        padding-right: 0;
+        padding-left: 0;
+      }
+
+      &__field {
+        padding-right: 0;
+        padding-left: 0;
+      }
+    }
+  }
+
+  .load-more-wrap {
+    margin-bottom: 0;
+    margin-top: 24px;
+
+    @media (hover: none) {
+      .btn-primary {
+        &:hover {
+          color: $white;
+          background-color: $blue;
+          border-color: $blue;
+        }
+
+        &:focus {
+          color: $blue;
+          background-color: $white;
+          border-color: $blue;
+        }
+      }
+    }
+  }
+
+  .active-orders {
+    &__item {
+      border-radius: 4px;
+      border: 1px solid $gray;
+
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+  }
+
+  .sort-orders .form-row__field select {
+    transition: all .3s;
+  }
+}
+
+.empty-orders {
+  margin-top: 24px;
+  padding: 40px 24px;
+  background: $ma-white;
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  &__title {
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 32px;
+    margin-bottom: 0;
+  }
+
+  &__image {
+    margin-top: 16px;
+  }
+
+  &__btn {
+    margin-top: 16px;
+  }
+}
+
+@include media-breakpoint-up(sm) {
+  .my-orders {
+    &__sorts {
+      margin-top: 24px;
+      display: flex;
+      justify-content: space-between;
+      grid-gap: 16px;
+    }
+
+    .flatpickr-datepicker,
+    .sort-orders {
+      margin-top: 0;
+    }
+
+    .flatpickr-datepicker {
+      width: 65%;
+    }
+
+    &__wrap {
+      padding-top: 24px;
+    }
+
+    .active-orders {
+      margin-top: 16px;
+    }
+
+    .notification_info-message {
+      font-size: .875rem;
+    }
+  }
+
+  .empty-orders {
+    &__title {
+      font-size: 24px;
+    }
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .my-orders {
+    padding-bottom: 70px;
+
+    .flatpickr-datepicker,
+    .sort-orders {
+      width: 100%;
+    }
+
+    &__wrap {
+      padding-top: 40px;
+    }
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  .my-orders {
+    &__sorts {
+      max-width: 580px;
+    }
+  }
+}
+
+@include media-breakpoint-up(xl) {
+  .my-orders {
+    &__header {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      align-items: center;
+    }
+
+    &__sorts {
+      margin-top: 0;
+      width: 100%;
+      max-width: 822px;
+      justify-content: flex-end;
+      margin-left: auto;
+    }
+
+    .nav-orders {
+      grid-column: span 2;
+    }
+
+    .flatpickr-datepicker__label {
+      flex-wrap: nowrap;
+      display: flex;
+      white-space: nowrap;
+      margin-bottom: 0;
+      margin-right: 16px;
+    }
+
+    .flatpickr-datepicker,
+    .sort-orders .form-row {
+      display: flex;
+      align-items: center;
+      flex-wrap: nowrap;
+      justify-content: flex-end;
+    }
+
+    .sort-orders {
+      flex: 80%;
+
+      .form-row__label {
+        width: auto;
+        white-space: nowrap;
+        margin-bottom: 0;
+        margin-right: 16px;
+      }
+    }
+
+    .flatpickr-datepicker__field,
+    .form-row__field {
+      width: 100%;
+      max-width: 282px;
+    }
+  }
+
+  .empty-orders {
+    margin-top: 40px;
+  }
+}

package/src/scss/pages/page_personal-details.scss

@@ -1,10 +1,28 @@
 @import '../helpers/helpers';
+@import '../components/notifications';
 
 .personal-details {
   padding-top: 0;
   padding-bottom: 40px;
 
+  .notification {
+    &_link {
+      color: $white;
+      text-decoration: none;
+      padding: 0 5px;
+
+      &:hover {
+        text-decoration: none;
+        color: $white;
+      }
+    }
+  }
+
   .globalMessages {
+    @include make-container;
+    @include make-container-max-widths;
+    @include make-col(12);
+
     .notification {
       margin-bottom: 8px;
       margin-top: 16px;
@@ -64,8 +82,8 @@
 
     &__value {
       margin-bottom: 0;
-      padding-top: 9px;
-      padding-bottom: 9px;
+      padding-top: 8px;
+      padding-bottom: 8px;
       font-size: .875rem;
       font-weight: 400;
       line-height: 1.375rem;
@@ -108,13 +126,18 @@
       }
 
       &__field {
-        .tbx:disabled {
+        .tbx.disabled {
           background: $gray-bg;
           color: $warm-grey;
           -webkit-text-fill-color: $warm-grey;
+          pointer-events: none;
         }
       }
     }
+
+    input[name='CSRFToken'] {
+      display: none;
+    }
   }
 }
 
@@ -192,7 +215,7 @@
     }
 
     .user-form {
-      max-width: 384px;
+      max-width: 390px;
 
       &__ctas {
         .btn_full {
@@ -231,9 +254,12 @@
     .globalMessages {
       .notification {
         margin-bottom: 24px;
-        margin-top: 0;
       }
     }
+
+    .notification_reminder {
+      margin-bottom: 16px;
+    }
   }
 }
 
@@ -245,5 +271,11 @@
     &__header {
       margin-top: 0;
     }
+
+    .globalMessages {
+      .notification {
+        margin-top: 0;
+      }
+    }
   }
 }

package/src/scss/pages/page_products-list-combined.scss

@@ -36,7 +36,6 @@ $color-bar-radius: 3px;
       font-weight: 500;
       line-height: 1.5;
       padding: 1em 1.25em;
-      border: 2px solid $blue;
       margin-bottom: 20px;
       text-align: center;
 

package/src/scss/pages/page_products-list.scss

@@ -31,7 +31,6 @@
       font-weight: 500;
       line-height: 1.5;
       padding: 1em 1.25em;
-      border: 2px solid $blue;
       margin-bottom: 20px;
       text-align: center;
 

package/src/scss/pages/page_shopping-cart-v2.scss

@@ -25,10 +25,6 @@
 
   .right-aside {
     margin-top: 0;
-
-    .voucher {
-      display: none;
-    }
   }
 
   .content {
@@ -78,14 +74,26 @@
 
   .voucher {
     .checkout-widget {
-      margin: 0;
+      margin-left: -15px;
+      margin-right: -15px;
+
+      &.checkout-voucher {
+        form {
+          .form-row {
+            padding-right: 0;
+
+            &__field {
+              margin-left: 30px;
+            }
+          }
+        }
+      }
     }
   }
 
   .summary {
     .checkout-widget_order-summary {
-      margin-left: -20px;
-      margin-right: -20px;
+      background-color: $gray-bg;
 
       .checkout-widget__details {
         flex-direction: column;
@@ -98,6 +106,7 @@
           &__item {
             &-bold {
               order: -5;
+              padding: 0;
             }
 
             &-vat {
@@ -137,12 +146,35 @@
 
     .checkout-widget_order-summary,
     .checkout-info-wrap.checkout-widget__details {
-      padding-top: 0;
+      padding: 0;
 
       .checkout-widget {
         &__item {
           font-weight: 400;
           font-size: .875rem;
+          padding: 10px 0;
+          margin: 0;
+
+          &:nth-child(1) {
+            margin: 0;
+            padding: 0;
+          }
+
+          &:nth-child(2) {
+            margin: 0;
+            padding-bottom: 10px;
+          }
+
+          &:nth-child(3) {
+            margin: 0;
+            padding-bottom: 10px;
+          }
+
+          &:last-child {
+            margin: 0;
+            padding: 0;
+          }
+
 
           &:not(.checkout-widget__item-vat) {
             margin-top: 0;
@@ -153,8 +185,8 @@
           }
 
           &-vat {
-            padding-bottom: 10px;
-            margin-bottom: 10px;
+            margin: 0;
+            padding: 0 0 10px;
             color: $warm-grey;
             font-size: .75rem;
             border-bottom: 1px solid #eee;
@@ -180,7 +212,7 @@
 
         &__details {
           &-discount {
-            margin-top: 0;
+            margin-top: 10px;
           }
         }
 
@@ -202,6 +234,53 @@
     background-color: transparent;
     padding: 0;
     border: 0;
+
+    .voucher__btn {
+      max-width: 100%;
+      margin-top: 20px;
+      height: 40px;
+    }
+
+    .form-row__error {
+      font-weight: 400;
+    }
+
+    &.voucher-applied {
+      background: $white;
+      margin-bottom: 8px;
+      height: 40px;
+
+      .voucher-applied__inner {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        & .icon {
+          display: inline-block;
+
+          &__check {
+            width: 24px;
+            height: 24px;
+
+            i {
+              font-size: 24px;
+              line-height: 24px;
+            }
+          }
+        }
+
+        & .fa-check-circle {
+          font-size: 1rem;
+          margin-bottom: 0;
+        }
+
+        & h5 {
+          margin: 0;
+          margin-top: 8px;
+          font-size: .875rem;
+        }
+      }
+    }
   }
 }
 
@@ -231,6 +310,20 @@
       }
     }
 
+    .voucher {
+      .checkout-widget {
+        &.checkout-voucher {
+          form {
+            .form-row {
+              &__field {
+                margin-left: 15px;
+              }
+            }
+          }
+        }
+      }
+    }
+
     .checkout-widget {
       &.checkout-voucher {
         form {
@@ -284,6 +377,20 @@
 
 @include media-breakpoint-up(md) {
   .basket {
+    .voucher {
+      .checkout-widget {
+        &.checkout-voucher {
+          form {
+            .form-row {
+              &__field {
+                margin-left: 30px;
+              }
+            }
+          }
+        }
+      }
+    }
+
     .right-aside {
       @include make-col(12);
     }
@@ -293,12 +400,6 @@
       max-width: 100%;
       padding-right: 5px;
     }
-
-    .summary {
-      &__aside {
-        padding: 20px 20px 0;
-      }
-    }
   }
 }
 
@@ -316,17 +417,22 @@
         .checkout-voucher {
           padding: 0;
 
+          .form-row__error {
+            white-space: pre-line;
+          }
+
           form {
             display: flex;
             align-items: flex-start;
-            margin-bottom: 27px;
 
             .form-row {
-              @include make-col(7);
+              max-width: 100%;
+              flex: 1;
               margin-right: 0;
 
               &__field {
                 margin-right: 0;
+                margin-left: 30px;
 
                 input {
                   &::placeholder {
@@ -344,27 +450,14 @@
 
             .voucher__btn {
               margin-top: 0;
-              margin-left: 15px;
+              margin-left: 16px;
+              margin-right: 15px;
             }
 
             &.form_invalid {
               margin-bottom: 0;
             }
           }
-
-          &.voucher-applied {
-            background: $white;
-
-            & .fa-check-circle {
-              font-size: 2rem;
-              margin-bottom: 0;
-            }
-
-            & h3 {
-              font-size: 1.25rem;
-              margin-bottom: 0;
-            }
-          }
         }
       }
 
@@ -424,6 +517,16 @@
           display: flex;
         }
       }
+
+      .checkout-widget__item-bold {
+        margin: 10px 0;
+        padding: 5px 0;
+      }
+
+      .checkout-widget__item-vat {
+        padding-bottom: 10px;
+        margin-bottom: 10px;
+      }
     }
 
     .checkout-title {

package/src/scss/pages/tradePro-signup.scss

@@ -148,6 +148,13 @@
     margin: 0;
     margin-bottom: 25px;
   }
+
+  .fill-remaining {
+    @include media-breakpoint-down(sm) {
+      margin-right: -15px;
+      width: auto;
+    }
+  }
 }
 
 .signup-tradepro {
@@ -349,3 +356,23 @@
     }
   }
 }
+
+.notification.fill-remaining {
+  margin: 0 16px 24px;
+
+  @include media-breakpoint-up(sm) {
+    margin: 0 0 24px;
+  }
+
+  &--local {
+    @include media-breakpoint-only(xs) {
+      margin-right: 0;
+      width: auto;
+    }
+
+    @include media-breakpoint-only(sm) {
+      margin-right: -15px;
+      width: auto;
+    }
+  }
+}

package/src/scss/partials/_header.scss

@@ -439,8 +439,13 @@
   &.user_desktop {
     .user__name {
       display: flex;
+      align-items: center;
       color: $blue-dark;
 
+      .btn__text {
+        display: flex;
+      }
+
       .custom-icon {
         width: 1.125rem;
         height: auto;

package/src/sitemap.html

@@ -536,6 +536,10 @@
                         <li><a href="page_my-account-trade-pro.html" target="_blank">My Account TradePro</a></li>
                         <li><a href="page_personal-details.html" target="_blank">My Account Personal Details</a></li>
                         <li><a href="page_personal-details-installer.html" target="_blank">My Account Personal Details Installer</a></li>
+                        <li><a href="page_default-store-page-empty.html" target="_blank">Default Store Page Empty</a></li>
+                        <li><a href="page_default-store-page.html" target="_blank">Default Store Page</a></li>
+                        <li><a href="page_my-orders.html" target="_blank">My Orders</a></li>
+                        <li><a href="page_my-orders-empty.html" target="_blank">My Orders Empty</a></li>
                     </ul>
                     <h3>Project list</h3>
                     <ul>
@@ -1063,6 +1067,8 @@
                             -
                             Payment Details Marketing Consent Error</a></li>
 
+                        <li><span class="page-id">9.26</span><a href="page_checkout_payment-details_with-card-loader.html"
+                                                                target="_blank">Checkout- Payment Details with card loader</a></li>
                     </ul>
 
                     <h3>App</h3>