wickes-css2 2.94.0-develop.6 → 2.94.0-ic-298-mega-nav.1

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

@@ -1,570 +0,0 @@
-@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;
-        }
-      }
-    }
-  }
-}