wickes-css2 2.94.0-billie.3 → 2.94.0-develop.10

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

@@ -1,10 +1,10 @@
 @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';
+@import '../components/my-account/active-orders';
 
 .my-account {
   margin: 0;
@@ -265,81 +265,6 @@
       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) {
@@ -395,50 +320,6 @@
       }
     }
 
-    .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;
     }
@@ -456,10 +337,6 @@
       padding: 24px;
     }
 
-    .active-orders__title {
-      font-size: 1.5rem;
-    }
-
     .notification_general:not(.notification_info-message) {
       margin-top: 16px;
       margin-bottom: 16px;
@@ -530,18 +407,6 @@
     .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;
-      }
-    }
   }
 }
 

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

@@ -5,86 +5,18 @@
 @import '../components/marketing-preferences';
 
 .page_checkout-delivery-new {
-  .right-aside {
-    .summary {
-      .checkout-title__title {
-        color: $blue-ocean;
-        font-weight: 400;
-        line-height: 1.75rem;
-      }
-
-      &__aside {
-        padding: 12px 30px 0;
-
-        .checkout-info-wrap {
-          padding: 0;
-        }
-
-        .checkout-widget {
-          padding: 20px 0 0;
-
-          &__details {
-            padding-top: 20px;
-            font-size: 1rem;
-
-            .checkout-widget {
-              &__item {
-                display: flex;
-                justify-content: space-between;
-                font-size: 1rem;
-                line-height: 1.125rem;
-                font-weight: 400;
-                margin-bottom: 20px;
-                padding: 0;
-
-                &-bold {
-                  font-weight: 500;
-                  margin-bottom: 20px;
-                }
-
-                &-vat {
-                  font-size: .75rem;
-                  margin-top: -15px;
-                }
-              }
-
-
-              &__details-discount {
-                order: 1;
-              }
-            }
-          }
-
-          &__total {
-            border: 0;
-            display: flex;
-            justify-content: space-between;
-            margin-left: -25px;
-            margin-right: -25px;
-            margin-bottom: 0;
-            padding: 20px 25px;
-            color: #fff;
-            background-color: #0a3055;
-            font-size: 1.375rem;
-            line-height: 1.5rem;
-            font-weight: 400;
-          }
-        }
-      }
-
-      &__basked-id {
-        padding: 26px 0;
-        background: #f8f8f8;
-        text-align: center;
-        font-size: 1rem;
+  .summary {
+    .checkout-title__title {
+      color: $blue-ocean;
+      font-weight: 400;
+      line-height: 1.75rem;
+    }
 
-        .id-number {
-          font-weight: 700;
-        }
-      }
+    &__aside {
+      padding: 12px 30px 0;
 
-      .accordion__header-icon-small {
-        left: 85px;
+      .checkout-info-wrap {
+        padding: 0;
       }
     }
   }
@@ -469,20 +401,6 @@
         }
       }
     }
-
-    .right-aside {
-      .summary {
-        .checkout-widget {
-          &.checkout-widget_order-summary {
-            .checkout-widget__total {
-              font-weight: 400;
-              margin-left: -20px;
-              margin-right: -20px;
-            }
-          }
-        }
-      }
-    }
   }
 }
 
@@ -637,24 +555,6 @@
         }
       }
     }
-
-    .right-aside {
-      .summary {
-        .checkout-widget {
-          &.checkout-widget_order-summary {
-            .checkout-widget__total {
-              font-weight: 400;
-              margin-left: -30px;
-              margin-right: -30px;
-            }
-          }
-        }
-
-        .summary__basked-id {
-          margin-top: 13px;
-        }
-      }
-    }
   }
 }
 

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_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;