wickes-css2 2.98.0-develop.2 → 2.98.0-develop.4

package/src/scss/components/_charity-donations.scss

@@ -113,166 +113,238 @@
       max-width: 100%;
     }
   }
-}
 
-.charity-donation-new {
-  background-color: $gray-bg;
-  padding: 16px;
+  &.charity-multiple {
+    .checkout-info-wrap {
+      padding: 15px;
+    }
 
-  &__wrapper {
-    display: flex;
-    flex-direction: column;
-  }
+    .title {
+      margin-bottom: 15px;
+    }
 
-  &__top {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    flex-wrap: wrap;
-  }
+    .definition {
+      font-size: .75rem;
+      font-weight: 400;
+      line-height: 14px;
+      margin-bottom: 25px;
+    }
 
-  &__header {
-    display: flex;
-    gap: 12px;
-  }
+    .descr {
+      margin-top: -10px;
+    }
 
-  &__right {
-    flex-shrink: 0;
-  }
+    .checkout-order {
+      &__img {
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+          object-position: top;
+        }
+      }
+    }
 
-  &__image {
-    width: 64px;
-  }
+    .donation-cart {
+      &__definition {
+        display: none;
+      }
+    }
 
-  &__title {
-    width: 100%;
-    font-size: .875rem;
-    font-weight: 500;
-    line-height: 1.375rem;
-    margin-bottom: 12px;
+    &.charity-added {
+      .checkout-order {
+        &__charity {
+          border-bottom: 1px solid $gray;
+          padding-bottom: 15px;
+        }
+      }
+    }
   }
+}
 
-  &__description {
-    width: 100%;
-    font-size: 0.75rem;
-    font-weight: 400;
-    line-height: 1rem;
-    margin-bottom: 16px;
-  }
+@include media-breakpoint-up(sm) {
+  .charity-new {
+    .checkout-order {
+      &__img {
+        img {
+          max-width: 155px;
+          max-height: 42px;
+          width: 155px;
+          height: 42px;
+        }
 
-  &__message {
-    font-size: 0.75rem;
-    line-height: 1rem;
-  }
+        .image {
+          width: 155px;
+        }
+      }
 
-  &__body {
-    width: 100%;
-  }
-}
+      &__info-wrap {
+        padding-top: 0;
+      }
 
-@include media-breakpoint-up(sm) {
-  .charity-donation-new {
-    &__title {
-      width: 100%;
-      font-weight: 500;
-      font-size: 1rem;
-      line-height: 1.5rem;
-    }
+      .price-wrap {
+        align-items: center;
 
-    &__description {
-      width: 100%;
-      margin: 0;
-    }
+        label {
+          margin-top: 0;
+        }
+      }
 
-    &__message {
-      display: block;
-    }
+      .title-wrap {
+        max-width: 100%;
+        display: flex;
+        flex-direction: column;
+
+        .title {
+          order: 1;
+        }
+
+        .descr {
+          order: 2;
+        }
 
-    &__image {
-      width: 100px;
+        .definition {
+          order: 3;
+        }
+      }
     }
 
-    &__body {
-      margin-top: 16px;
+    &.charity-multiple {
+      .checkout-order {
+        &__img {
+          max-width: 184px;
+
+          img {
+            max-height: initial;
+            max-width: 100%;
+          }
+        }
+
+        &__info-wrap {
+          align-items: flex-start;
+        }
+      }
+
+      .price-wrap {
+        margin-top: 6px;
+
+        .order-item {
+          &__remove {
+            margin-top: 0;
+          }
+        }
+      }
+
+      .title-wrap {
+        .descr {
+          margin-bottom: 20px;
+        }
+      }
     }
   }
 }
 
 @include media-breakpoint-up(md) {
-  .charity-donation-new {
-    &__title {
-      width: 100%;
-    }
+  .charity-new {
+    .checkout-order {
+      &__info-wrap {
+        padding-left: 15px;
+      }
 
-    &__body {
-      margin-top: 16px;
-      width: 668px;
+      .title-wrap {
+        max-width: 50%;
+      }
     }
 
-    &__description {
-      width: 488px;
-      margin-top: -25px;
-    }
+    &.charity-multiple {
+      .checkout-info-wrap {
+        padding-bottom: 20px;
+      }
 
-    &__message {
-      display: block;
+      .donation-cart {
+        &__definition {
+          display: block;
+        }
+      }
+
+      .definition.definition,
+      & p:last-of-type {
+        margin-bottom: 0;
+      }
     }
 
-    &__image {
-      width: 124px;
+    &.charity-multiple.charity-added {
+      .checkout-order {
+        .title-wrap {
+          max-width: none;
+        }
+
+        &__charity {
+          display: grid;
+          grid-template-columns: 1fr 1fr;
+
+          .definition {
+            display: none;
+          }
+        }
+      }
+
+      .title-wrap {
+        .descr {
+          margin-bottom: 0;
+        }
+      }
     }
   }
 }
 
 @include media-breakpoint-up(lg) {
-  .charity-donation-new {
-    &__cost {
-      height: 24px;
-    }
-
-    &__title {
-      width: 100%;
-      margin-bottom: 8px;
-    }
-
-    &__body {
-      margin-top: 16px;
-      width: 588px;
+  .charity-new {
+    .checkout-order {
+      .title-wrap {
+        max-width: 50%;
+      }
     }
+  }
 
-    &__message {
-      margin: 0;
-      display: block;
+  .charity {
+    &__msg {
+      margin-bottom: 0;
+      max-width: 50%;
     }
   }
 }
 
 @include media-breakpoint-up(xl) {
-  .charity-donation-new {
-    padding: 24px;
-
-    &__title {
-      width: 100%;
-      margin-bottom: 8px;
-    }
+  .charity-new {
+    &.charity-multiple {
+      .checkout-order {
+        .title-wrap {
+          @include make-col(7);
+        }
 
-    &__body {
-      margin-top: 15px;
-      width: 747px;
+        &__info-wrap {
+          @include make-col(5);
+        }
+      }
     }
 
-    &__description {
-      width: 100%;
-      margin-top: -30px;
-    }
+    &.charity-multiple.charity-added {
+      .checkout-order {
+        &__info-wrap {
+          max-width: none;
+        }
 
-    &__message {
-      margin-left: 3px;
-      display: inline;
+        &__charity {
+          grid-template-columns: 7fr 5fr;
+        }
+      }
     }
+  }
 
-    &__image {
-      width: 124px;
+  .charity {
+    &__msg {
+      max-width: 100%;
     }
   }
 }

package/src/scss/components/_leave-modal.scss

@@ -30,7 +30,7 @@
 
     .modal-title {
       @include font-size(18);
-      @include line-height(32);
+      @include line-height(24);
       margin-left: 15px;
       font-weight: 500;
     }
@@ -41,9 +41,13 @@
 
     .description {
       @include font-size(16);
-      @include line-height(32);
+      @include line-height(24);
       margin-bottom: 0;
       font-weight: 400;
+
+      .new-email {
+        font-weight: 700;
+      }
     }
 
     .actions {

package/src/scss/components/_price-block-critical.scss

@@ -14,14 +14,14 @@
     }
   }
 
-  .pdp-price__value,
   .pdp-price__oos,
   .pdp-price__in-store-only {
     border-bottom: 1px solid $gray;
   }
 
-  .pdp-price__value {
-    padding-bottom: 10px;
+  .pdp-price__oos {
+    border-top: 1px solid $gray;
+    margin-bottom: 8px;
   }
 
   .pdp-price__value_extended,

package/src/scss/components/_price-block.scss

@@ -25,14 +25,19 @@
     background: $gray-bg;
   }
 
-  .pdp-price__value,
   .pdp-price__oos,
   .pdp-price__in-store-only {
     border-bottom: 1px solid $gray;
   }
 
-  .pdp-price__value {
-    padding-bottom: 10px;
+  .pdp-price__oos {
+    border-top: 1px solid $gray;
+    margin-bottom: 8px;
+
+    & + .pdp-price__controls,
+    &:last-child {
+      margin-bottom: 0;
+    }
   }
 
   .pdp-price__value_extended,

package/src/scss/components/legal-info.scss

@@ -1,3 +1,64 @@
+@import '../helpers/helpers';
+
 .legal-info {
   margin-top: 40px;
+  border: 1px solid $gray;
+  border-radius: 4px;
+  padding: 16px;
+  position: relative;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5rem;
+
+  &__toggle {
+    margin-bottom: 0;
+    font-size: 1.125rem;
+    font-weight: 500;
+    line-height: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .icon-wrap {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &:after {
+        content: '+';
+        color: $blue;
+        font-size: 1.575rem;
+      }
+    }
+
+    &[aria-expanded='true'] {
+      .icon-wrap {
+        &:after {
+          content: '-';
+          font-size: 2.95rem;
+        }
+      }
+    }
+  }
+
+  .collapse-wrap {
+    margin-top: 16px;
+  }
+
+  .container {
+    padding: 0;
+  }
+}
+
+@include media-breakpoint-up(sm) {
+  .legal-info {
+    padding: 24px;
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .legal-info {
+    padding: 24px 40px;
+  }
 }

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

@@ -0,0 +1,58 @@
+.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;
+
+    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-bottom: 0;
+  }
+}

package/src/scss/components/my-account/_clipboard-code.scss

@@ -0,0 +1,77 @@
+.clipboard-code {
+  background: rgba(255, 255, 255, .08);
+  border-radius: 4px;
+  padding: 16px;
+
+  .icon-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+  }
+
+  .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;
+  }
+
+  .icon {
+    color: $blue-satin;
+    font-size: 1.35rem;
+  }
+
+  .custom-icon path {
+    fill: $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;
+      }
+    }
+  }
+
+  &__description {
+    margin-top: 16px;
+    color: rgba(255, 255, 255, .80);
+
+    p {
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 22px;
+      margin-bottom: 0;
+    }
+
+    .link {
+      color: inherit;
+    }
+  }
+}

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

@@ -0,0 +1,51 @@
+.discount {
+  background: rgba(255, 255, 255, .08);
+  border-radius: 4px;
+  padding: 16px;
+
+  .icon-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+  }
+
+  .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;
+  }
+
+  &__content {
+    display: flex;
+
+    .subtitle {
+      margin: 4px 0 0;
+    }
+
+    .icon {
+      font-size: 1.44rem;
+      height: 18px;
+      color: $blue-satin;
+    }
+  }
+
+  .barcode__image {
+    svg {
+      margin: 8px 0;
+    }
+  }
+
+  &__code {
+    margin-left: 8px;
+  }
+}

package/src/scss/emulation.scss

@@ -10,7 +10,7 @@
 }
 
 [data-logged-in='false'] {
-  visibility: hidden;
+  display: none;
 }
 
 // sass-lint:disable no-important

package/src/scss/helpers/_mixins.scss

@@ -147,3 +147,12 @@
 @mixin line-height($line-height-px) {
   line-height: #{$line-height-px / 16}rem;
 }
+
+@mixin icon-wrap($width: 24px, $height: 24px, $font-size-px: 16) {
+  width: $width;
+  height: $height;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: #{$font-size-px / 16}rem;
+}

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

@@ -6,7 +6,6 @@
 @import 'checkout-confirmation-new';
 @import '../components/checkout_order';
 @import '../components/payments-checkout';
-@import "../components/donation-cart-new";
 @import 'checkout-tradepro';
 
 @import 'checkout-sign-in';