wickes-css2 2.93.0 → 2.94.0-develop.1

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

@@ -0,0 +1,116 @@
+.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

@@ -0,0 +1,215 @@
+.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);
+    }
+  }
+}

package/src/scss/components/my-account/_mobile-nav.scss

@@ -0,0 +1,130 @@
+.account-nav {
+  padding: 8px 0;
+
+  &--old-pages {
+    position: relative;
+
+    .accordion {
+      width: 100%;
+      position: absolute;
+    }
+  }
+
+  &__toggle {
+    padding: 0;
+    position: relative;
+  }
+
+  &__icon {
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 8px;
+
+    .icon {
+      font-size: 1rem;
+      color: $blue-satin;
+    }
+
+    .custom-icon {
+      width: auto;
+      font-size: .65rem;
+      height: auto;
+
+      path {
+        fill: $blue-satin;
+      }
+    }
+  }
+
+  &__list {
+    padding-left: 0;
+    list-style-type: none;
+    margin-bottom: 0;
+  }
+
+  &__link {
+    display: flex;
+    font-weight: 500;
+    font-size: .875rem;
+    line-height: 1.375rem;
+    color: $gray-dark;
+    text-decoration: none;
+    padding: 8px 16px;
+
+    &:hover,
+    &:focus {
+      color: $blue;
+      text-decoration: none;
+    }
+
+    .rewards {
+      width: 20px;
+      height: 20px;
+      border-radius: 50px;
+      background: $blue-dark;
+      color: $white;
+      margin-left: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: .75rem;
+      font-weight: 500;
+      line-height: 1rem;
+    }
+
+    &.active {
+      background: $ma-white;
+
+      &:hover,
+      &:focus {
+        background: $white;
+      }
+    }
+  }
+
+  .accordion {
+    &__header {
+      padding: 8px 8px 8px 16px;
+      display: flex;
+      align-items: center;
+
+      &-text {
+        font-weight: 500;
+        font-size: 1rem;
+        line-height: 1.5rem;
+        color: $gray-dark;
+      }
+
+      &-icon {
+        margin-left: auto;
+        position: relative;
+      }
+    }
+
+    &__content {
+      position: relative;
+      padding: 0;
+    }
+
+    &__holder {
+      padding: 0;
+      box-shadow: 0 0 8px rgba(0, 0, 0, .12);
+      background: $white;
+      border-radius: 4px;
+      z-index: 5;
+      width: 100%;
+      position: absolute;
+      top: 8px;
+      left: 0;
+    }
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  .account-nav {
+    display: none;
+  }
+}

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

@@ -0,0 +1,112 @@
+@import '../../helpers/helpers';
+
+.active-orders .order {
+  &-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0;
+
+    &__title {
+      margin-bottom: 0;
+      font-size: 1.125rem;
+      line-height: 1.5rem;
+    }
+
+    &__status {
+      background: rgba(2, 119, 189, .1);
+      padding: 4px 8px;
+      border-radius: 50px;
+      font-weight: 500;
+      display: flex;
+      align-items: center;
+
+      .icon {
+        font-size: 1rem;
+        height: auto;
+        color: $blue;
+        margin-right: 8px;
+      }
+    }
+  }
+
+  &-details {
+    margin-top: 8px;
+
+    &__summary {
+      display: flex;
+      align-items: baseline;
+    }
+
+    &__price {
+      margin-bottom: 0;
+      font-weight: 700;
+      font-size: 1.125rem;
+      line-height: 1.5rem;
+      color: $blue-dark;
+    }
+
+    &__vat {
+      margin-left: 5px;
+      line-height: 1rem;
+    }
+
+    &__count {
+      position: relative;
+      padding-left: 8px;
+      margin-left: 8px;
+      font-weight: 400;
+      font-size: .875rem;
+      line-height: 1.375rem;
+      color: $gray-dark;
+
+      &::before {
+        content: '';
+        height: 100%;
+        position: absolute;
+        max-height: 16px;
+        left: 0;
+        top: 50%;
+        width: 1px;
+        background: $gray;
+        transform: translateY(-50%);
+      }
+    }
+
+    &__date {
+      display: block;
+      margin-top: 4px;
+      font-weight: 400;
+      font-size: .875rem;
+      line-height: 1.375rem;
+      color: $gray-dark;
+    }
+  }
+}
+
+@include media-breakpoint-up(sm) {
+  .active-orders .order-details {
+    grid-area: orderDetails;
+    display: flex;
+    align-items: baseline;
+
+    &__date {
+      margin-left: 8px;
+      padding-left: 8px;
+      margin-top: 0;
+      position: relative;
+
+      &::before {
+        content: '';
+        height: 100%;
+        position: absolute;
+        max-height: 16px;
+        left: 0;
+        top: 50%;
+        width: 1px;
+        background: $gray;
+        transform: translateY(-50%);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,92 @@
+@import '../../helpers/helpers';
+
+.shipment-details {
+  margin-top: 12px;
+
+  .shipment {
+    display: flex;
+    margin-bottom: 12px;
+
+    &__icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: $blue-dark;
+      width: 32px;
+      height: 32px;
+      border-radius: 50px;
+
+      .icon {
+        color: $white;
+        font-size: 1rem;
+      }
+    }
+
+    &__content {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      margin-left: 8px;
+
+      & > *:not(:first-child) {
+        margin-top: 4px;
+      }
+    }
+
+    &__title,
+    &__info,
+    &__count {
+      font-size: .75rem;
+      line-height: 1rem;
+      color: $squant;
+    }
+
+    &__title {
+      font-weight: 700;
+      color: $gray-dark;
+      margin-bottom: 0;
+    }
+
+    .track-link {
+      text-decoration: none;
+      font-weight: 500;
+      font-size: .75rem;
+      line-height: 1rem;
+      color: $blue;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+@include media-breakpoint-up(sm) {
+  .shipment-details {
+    grid-area: shipment;
+
+    .shipment:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .shipment-details {
+    margin-top: 16px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 16px;
+
+    .shipment {
+      margin-bottom: 0;
+    }
+  }
+}
+
+@include media-breakpoint-up(xl) {
+  .shipment-details {
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-gap: 20px 16px;
+  }
+}

package/src/scss/emulation.scss

@@ -9,35 +9,11 @@
   }
 }
 
-[data-logged-in='true'] {
-  display: none;
-}
-
 [data-logged-in='false'] {
   visibility: hidden;
 }
 
 // sass-lint:disable no-important
-[data-is-logged-in='true'] {
-  [data-logged-in='true'] {
-    display: block;
-  }
-
-  [data-logged-in='false'] {
-    display: none !important;
-  }
-}
-
-[data-is-logged-in='false'] {
-  [data-logged-in='true'] {
-    display: none !important;
-  }
-
-  [data-logged-in='false'] {
-    visibility: visible;
-  }
-}
-
 .klarna-logo-img {
   height: 30px;
   width: 48px;

package/src/scss/helpers/_variables.scss

@@ -26,12 +26,14 @@ $gray-gradient: #e0e0e0;  // tabs gradient gray
 $gray-quill: #cececd;
 $gray-dim: #656565;
 $gray-matt: #515151;
+$squant: #666666;
 $error-bg: #fcf2f3;       // Error notification background colour
 $positive: #8dc63f;       // Positive colour
 $negative: #ed1c24;       // Negative colour
 $blue-badge: #019ee3;
-$pacific-depths: #004587; 
+$pacific-depths: #004587;
 $usp-icon-color: #1a77bc; // Usp icon color
+$pacific-depths: #004587;
 $line-through: #242424;
 $ma-white: #f4f9fe;
 $blue-satin: #99b5cf;