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

package/src/page_my-account-installer.html

@@ -1,93 +0,0 @@
-{{#extend "my-account-v2"
-  customIconUserClass=my_account.installer.icons.installer
-  dataBreadcrumbs=my_account.installer.breadcrumbs
-  pageClass="page_my-account_new"
-  title=my_account.installer.title
-  pageMyAcc=true
-  myAccV2=true
-  isLoggedIn=true
-  mainClass="my-account"
-  switch-vat=true
-}}
-{{#content "heading"}}
-{{> notifications
-    notification-page.info-message
-    text=my_account.installer.bannerText
-    }}
-{{/content}}
-{{#content "main"}}
-<div class="container">
-  <div class="row">
-    <div class="col-12">
-      {{> my-account/mobile-nav my-account-menu-new
-          customIcon=true
-          menu=my_account.installer.menu
-          active-index=0
-          page-name=my_account.installer.menu.[0].title
-          }}
-    </div>
-  </div>
-</div>
-<div class="account-summary">
-  <div class="container">
-    <div class="row">
-      <div class="col-12">
-        <div class="account-summary__wrapper">
-          {{> my-account/greetings
-              name=my_account.user.name
-              subtitle=my_account.user.email
-          }}
-          {{> my-account/discount
-              discountSrc=my_account.installer.discount
-              installer=true
-              title="In-store discount"
-              code=my_account.discount
-              customIcon=my_account.installer.icons.installer
-          }}
-          {{> my-account/clipboard-code-card
-              mod="trade-pro-id"
-              customIcon=my_account.installer.icons.installer
-              title="TradePro ID"
-              code=my_account.tradeProId
-          }}
-          {{> my-account/clipboard-code-card
-              mod="discount-code"
-              icon="fas fa-badge-percent"
-              title="Online discount code"
-              code=my_account.installer.discountCode
-          }}
-        </div>
-        {{> my-account/active-orders/list-orders
-            switch-vat=true
-            title=my_account.installer.activeOrders.sectionTitle
-            linkText='View all orders'
-            orders=my_account.installer.activeOrders.orderList
-        }}
-      </div>
-    </div>
-  </div>
-</div>
-<div class="container">
-  <div class="row">
-    <div class="col-12">
-      {{> my-account/menu-items
-          items=my_account.installer.menu
-          }}
-    </div>
-  </div>
-</div>
-<div class="account-actions">
-  <div class="container">
-    <div class="row">
-      <div class="col-12">
-        {{> my-account/user-account-actions mod="d-sm-none"}}
-        {{> my-account/contact-us contacts=my_account.contacts}}
-      </div>
-    </div>
-  </div>
-</div>
-{{/content}}
-{{#content "foot" mode="append"}}
-<script defer src="./js/my-account.min.js"></script>
-{{/content}}
-{{/extend}}

package/src/page_my-account-trade-pro.html

@@ -1,91 +0,0 @@
-{{#extend
-  "my-account-v2"
-  iconUserClass=my_account.tradepro.icons.tradeproID
-  dataBreadcrumbs=my_account.tradepro.breadcrumbs
-  pageClass="page_my-account_new"
-  title=my_account.tradepro.title
-  pageMyAcc=true
-  myAccV2=true
-  isLoggedIn=true
-  mainClass="my-account"
-  switch-vat=true
-}}
-{{#content "heading"}}
-{{> notifications
-    notification-page.info-message
-    text=my_account.tradepro.bannerText
-    }}
-{{/content}}
-{{#content "main"}}
-<div class="container">
-  <div class="row">
-    <div class="col-12">
-      {{> my-account/mobile-nav my-account-menu-new
-          menu=my_account.tradepro.menu
-          active-index=0
-          page-name=my_account.tradepro.menu.[0].title
-          }}
-    </div>
-  </div>
-</div>
-<div class="account-summary">
-  <div class="container">
-    <div class="row">
-      <div class="col-12">
-        <div class="account-summary__wrapper">
-          {{> my-account/greetings
-              name=my_account.user.name
-              subtitle=my_account.user.email
-          }}
-          {{> my-account/discount
-              discountSrc=my_account.tradepro.discount
-              title="In-store discount"
-              code=my_account.discount
-          }}
-          {{> my-account/clipboard-code-card
-              mod="trade-pro-id"
-              icon=my_account.tradepro.icons.tradeproID
-              title="TradePro ID"
-              code=my_account.tradeProId
-          }}
-          {{> my-account/clipboard-code-card
-              mod="discount-code"
-              icon="fas fa-badge-percent"
-              title="Online discount code"
-              code=my_account.tradepro.discountCode
-          }}
-        </div>
-        {{> my-account/active-orders/list-orders
-            switch-vat=true
-            title=my_account.tradepro.activeOrders.sectionTitle
-            linkText='View all orders'
-            orders=my_account.tradepro.activeOrders.orderList
-        }}
-      </div>
-    </div>
-  </div>
-</div>
-<div class="container">
-  <div class="row">
-    <div class="col-12">
-      {{> my-account/menu-items
-          items=my_account.tradepro.menu
-          }}
-    </div>
-  </div>
-</div>
-<div class="account-actions">
-  <div class="container">
-    <div class="row">
-      <div class="col-12">
-        {{> my-account/user-account-actions mod="d-sm-none"}}
-        {{> my-account/contact-us contacts=my_account.contacts}}
-      </div>
-    </div>
-  </div>
-</div>
-{{/content}}
-{{#content "foot" mode="append"}}
-<script defer src="./js/my-account.min.js"></script>
-{{/content}}
-{{/extend}}

package/src/page_personal-details-installer.html

@@ -1,62 +0,0 @@
-{{#extend "my-account-v2"
-  customIconUserClass=my_account.installer.icons.installer
-  dataBreadcrumbs=personal_details.installer.breadcrumbs
-  pageClass="page_my-account_new"
-  title="My Account Installer"
-  pageMyAcc=true
-  myAccV2=true
-  isLoggedIn=true
-  mainClass="personal-details"
-}}
-{{#content "head" mode="append"}}
-<link type="text/css" rel="stylesheet" href="./css/pages/page_personal-details.css">
-{{/content}}
-{{#content "notification"}}
-<div class="globalMessages">
-</div>
-{{/content}}
-{{#content "main"}}
-<div class="container">
-  <div class="row">
-    <div class="col-12">
-      {{> my-account/mobile-nav
-      mod
-      menu=my_account.diy.menu
-      active-index=2
-      page-name="Personal Details"
-      }}
-      <div class="personal-details__header">
-        <h1 class="personal-details__title">Personal Details</h1>
-        <a href="./page_my-account_change-password.html" class="btn btn_full btn-outline-primary btn__change-password">
-          <i class="fas fa-key icon"></i>
-          Change Password
-        </a>
-      </div>
-    </div>
-    <div class="col-12">
-      {{> my-account/personal-details
-          details=personal_details.installer.currentData
-      }}
-      {{> my-account/personal-details-form
-          isInstaller=true
-          fields=personal_details.installer.fields
-          buttons=personal_details.buttons
-      }}
-    </div>
-  </div>
-</div>
-
-{{/content}}
-{{#content "foot" mode="append"}}
-{{> my-account/leave-modal
-personal_details.reset-popup
-id="leave-popup"
-}}
-{{> my-account/leave-modal
-personal_details.leave-popup
-id="change-password-popup"
-}}
-<script defer src="./js/my-account.min.js"></script>
-<script defer src="./js/personal-details.min.js"></script>
-{{/content}}
-{{/extend}}

package/src/page_personal-details.html

@@ -1,60 +0,0 @@
-{{#extend "my-account-v2"
-  dataBreadcrumbs=personal_details.diy.breadcrumbs
-  pageClass="page_my-account_new"
-  title="My Account DIY"
-  pageMyAcc=true
-  myAccV2=true
-  isLoggedIn=true
-  mainClass="personal-details"
-}}
-{{#content "head" mode="append"}}
-<link type="text/css" rel="stylesheet" href="./css/pages/page_personal-details.css">
-{{/content}}
-{{#content "notification"}}
-<div class="globalMessages">
-</div>
-{{/content}}
-{{#content "main"}}
-<div class="container">
-  <div class="row">
-    <div class="col-12">
-      {{> my-account/mobile-nav
-          mod
-          menu=my_account.diy.menu
-          active-index=2
-          page-name="Personal Details"
-          }}
-      <div class="personal-details__header">
-        <h1 class="personal-details__title">Personal Details</h1>
-        <a href="./page_my-account_change-password.html" class="btn btn_full btn-outline-primary btn__change-password">
-          <i class="fas fa-key icon"></i>
-          Change Password
-        </a>
-      </div>
-    </div>
-    <div class="col-12">
-      {{> my-account/personal-details
-          details=personal_details.diy.currentData
-      }}
-      {{> my-account/personal-details-form
-          fields=personal_details.diy.fields
-          buttons=personal_details.buttons
-      }}
-    </div>
-  </div>
-</div>
-
-{{/content}}
-{{#content "foot" mode="append"}}
-{{> my-account/leave-modal
-    personal_details.reset-popup
-    id="leave-popup"
-}}
-{{> my-account/leave-modal
-    personal_details.leave-popup
-    id="change-password-popup"
-}}
-<script defer src="./js/my-account.min.js"></script>
-<script defer src="./js/personal-details.min.js"></script>
-{{/content}}
-{{/extend}}

package/src/scss/components/my-account/_consignment-info.scss

@@ -1,46 +0,0 @@
-@import '../../helpers/helpers';
-
-.consignment-info {
-  display: flex;
-  align-items: center;
-  margin-top: 12px;
-  margin-bottom: 0;
-  font-weight: 400;
-  font-size: .75rem;
-  line-height: 1rem;
-  color: $gray-dark;
-
-  &__text {
-    margin-bottom: 0;
-  }
-
-  .icon-info-component {
-    cursor: pointer;
-    font-size: .675rem;
-    width: 16px;
-    height: 16px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-  }
-}
-
-@include media-breakpoint-up(sm) {
-  .consignment-info {
-    grid-area: consignmentInfo;
-  }
-}
-
-@include media-breakpoint-up(md) {
-  .consignment-info {
-    margin-top: 16px;
-  }
-}
-
-@include media-breakpoint-up(lg) {
-  .consignment-info {
-    margin-top: 0;
-    margin-left: 16px;
-    font-size: .875rem;
-  }
-}

package/src/scss/components/my-account/_contacts.scss

@@ -1,116 +0,0 @@
-.contacts {
-  display: flex;
-  flex-direction: column;
-  margin-top: 16px;
-
-  &__item {
-    background: $white;
-    padding: 16px;
-    border-radius: 4px;
-
-    & + & {
-      margin-top: 16px;
-    }
-  }
-
-  &__header {
-    display: flex;
-    align-items: center;
-  }
-
-  &__icon {
-    width: 32px;
-    height: 32px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .icon {
-      color: $blue-satin;
-      font-size: 1.35rem;
-      height: auto;
-    }
-  }
-
-  &__title {
-    font-size: 1.125rem;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 1.5rem;
-    margin-left: 12px;
-    margin-bottom: 0;
-  }
-
-  &__description {
-    font-size: .875rem;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 1.375rem;
-    margin-top: 8px;
-    margin-bottom: 0;
-  }
-
-  &__links {
-    list-style-type: none;
-    padding-left: 0;
-    margin-top: 16px;
-    margin-bottom: 0;
-
-    .link {
-      font-weight: 500;
-    }
-
-    li + li {
-      margin-top: 16px;
-    }
-  }
-
-  .btn {
-    margin-top: 16px;
-  }
-}
-
-@include media-breakpoint-up(sm) {
-  .contacts {
-    margin-top: 0;
-  }
-}
-
-@include media-breakpoint-up(md) {
-  .contacts {
-    flex-direction: row;
-    grid-gap: 24px;
-
-    &__item {
-      flex: 1;
-      justify-content: space-between;
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-
-      & + & {
-        margin-top: 0;
-      }
-    }
-
-    &__description {
-      margin-top: 16px;
-      margin-bottom: auto;
-    }
-
-    &__icon {
-      width: 48px;
-      height: 48px;
-
-      .icon {
-        font-size: 2rem;
-      }
-    }
-  }
-};
-
-@include media-breakpoint-up(lg) {
-  .contacts__item {
-    padding: 24px;
-  }
-}

package/src/scss/components/my-account/_menu.scss

@@ -1,215 +0,0 @@
-.menu {
-  display: flex;
-  padding-top: 24px;
-  padding-bottom: 24px;
-  margin-right: -15px;
-  margin-left: -15px;
-
-  &__list {
-    padding-left: 0;
-    list-style-type: none;
-    margin-bottom: 0;
-    width: 100%;
-  }
-
-  &__header {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    padding: 12px 0;
-  }
-
-  &__title {
-    display: flex;
-    align-items: center;
-    margin-bottom: 0;
-    font-size: 1.125rem;
-    font-weight: 500;
-    line-height: 1.375rem;
-    margin-left: 8px;
-  }
-
-  &__total {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: $blue-dark;
-    color: $white;
-    border-radius: 50px;
-    width: 18px;
-    height: 18px;
-    font-size: .75rem;
-    font-weight: 500;
-    line-height: 1rem;
-    margin-left: 10px;
-  }
-
-  &__description {
-    margin-bottom: 0;
-    display: none;
-  }
-
-  &__item {
-    position: relative;
-
-    & + & {
-      &:before {
-        content: '';
-        border-top: 1px solid $gray;
-        position: absolute;
-        top: 0;
-        left: 50%;
-        width: calc(100% - 30px);
-        transform: translate(-50%, -50%);
-      }
-    }
-  }
-
-  &__link {
-    padding: 0 15px;
-    color: $blue-dark;
-    display: flex;
-    align-items: center;
-    text-decoration: none;
-
-    &:hover {
-      text-decoration: none;
-    }
-
-    &:focus {
-      background: $ma-white;
-    }
-
-    .icon {
-      color: $blue-satin;
-      font-size: 1.6rem;
-
-      &-arrow {
-        font-size: 1.6rem;
-        color: $blue;
-      }
-    }
-  }
-
-  &__icon {
-    width: 32px;
-    height: 32px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &--arrow {
-      margin-left: auto;
-    }
-  }
-}
-
-@include media-breakpoint-up(sm) {
-  .menu {
-    padding-top: 32px;
-    padding-bottom: 32px;
-    margin: 0;
-
-    &__header {
-      padding-right: 8px;
-      padding-left: 8px;
-    }
-
-    &__item {
-      & + & {
-        &:before {
-          width: 100%;
-        }
-      }
-    }
-
-    &__link {
-      padding-right: 0;
-      padding-left: 0;
-    }
-  }
-}
-
-@include media-breakpoint-up(md) {
-  .menu {
-    &__header {
-      padding: 0;
-    }
-
-    &__list {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      grid-auto-rows: 1fr;
-      grid-gap: 24px;
-    }
-
-    &__item {
-      padding: 0;
-      display: flex;
-
-      & + & {
-        border-top: 0;
-
-        &:before {
-          content: none;
-        }
-      }
-    }
-
-    &__link {
-      padding: 24px;
-      flex-direction: column;
-      align-items: flex-start;
-      position: relative;
-      border: 1px solid $gray;
-      border-radius: 4px;
-      width: 100%;
-
-      &:focus {
-        background: initial;
-      }
-
-      &:focus,
-      &:hover {
-        border-color: $blue;
-        color: $blue-dark;
-      }
-    }
-
-    &__description {
-      display: block;
-      margin-top: 16px;
-      font-size: .875rem;
-      font-weight: 400;
-      line-height: 1.375rem;
-      color: $gray-dark;
-    }
-
-    &__icon {
-      width: 48px;
-      height: 48px;
-
-      .icon {
-        font-size: 2rem;
-        height: auto;
-      }
-    }
-
-    &__total {
-      min-width: 24px;
-      height: 24px;
-    }
-  }
-}
-
-@include media-breakpoint-up(lg) {
-  .menu {
-    padding-top: 40px;
-    padding-bottom: 40px;
-
-    &__list {
-      grid-template-columns: repeat(3, 1fr);
-    }
-  }
-}