wickes-css2 2.98.0-billie.1 → 2.98.0-develop.2

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

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

package/src/scss/components/_donation-cart-new.scss

@@ -0,0 +1,192 @@
+.donation-cart-new {
+  &__cost {
+    font-weight: 500;
+    font-size: .875rem;
+    line-height: 1rem;
+    display: flex;
+    align-items: center;
+    margin-top: 12px;
+    height: 24px;
+
+    &-hide {
+      display: none;
+    }
+  }
+
+  .order-item__remove {
+    position: static;
+    margin-left: auto;
+    display: block;
+
+    .btn__text {
+      display: inline-block;
+      width: 1em;
+      text-align: center;
+    }
+
+    i.fas {
+      display: inline-block;
+      width: 1em;
+    }
+  }
+
+  &__price-value,
+  &__price {
+    display: inline-block;
+    line-height: 1rem;
+    font-weight: 400;
+    font-size: .750rem;
+  }
+
+  &__description {
+    font-weight: 500;
+    font-size: .875rem;
+    margin-bottom: 12px;
+  }
+
+  &__value {
+    min-width: 14px;
+    margin-left: -3px;
+  }
+
+  &__currency,
+  &__value {
+    font-size: .750rem;
+  }
+
+  &__divider {
+    border: none;
+    border-top: 1px solid $gray;
+    margin: 16px 0;
+  }
+
+  &__charity-info {
+    color: $squant;
+    font-weight: 400;
+    font-size: .75rem;
+    line-height: 1rem;
+    margin: 0;
+  }
+
+  &__holder {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  &__btn {
+    width: 58px;
+    height: 36px;
+    margin-bottom: 0;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:nth-of-type(odd),
+    &:nth-of-type(even) {
+      margin-left: 0;
+    }
+
+    &:last-of-type {
+      margin-right: 0;
+    }
+
+    &.btn-secondary {
+      color: $black;
+      border-color: $gray;
+
+      &:hover {
+        color: $white;
+        border-color: $blue;
+      }
+    }
+
+    &.btn-selected {
+      color: $white;
+      border-color: $blue;
+      background: $blue;
+      pointer-events: none;
+    }
+  }
+}
+
+@include media-breakpoint-up(sm) {
+  .donation-cart-new {
+    &__btn {
+      width: 52px;
+      height: 36px;
+      margin-bottom: 0;
+    }
+
+    &__description {
+      font-weight: 700;
+      font-size: .875rem;
+      margin-bottom: 12px;
+    }
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .donation-cart-new {
+    justify-content: space-between;
+
+    &:not(.donation-cart__hide) {
+      display: flex;
+    }
+
+    &__definition {
+      max-width: 50%;
+    }
+
+    &__details {
+      width: 100%;
+    }
+
+    &__definition {
+      padding-right: 15px;
+    }
+
+    &__btn {
+      width: 56px;
+      height: 36px;
+      margin-bottom: 0;
+    }
+
+    .order-item__remove {
+      position: static;
+      margin-left: auto;
+      display: block;
+    }
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  .donation-cart-new {
+    &__holder {
+      width: 588px;
+    }
+
+    &__btn {
+      width: 56px;
+      height: 36px;
+      margin-bottom: 0;
+    }
+  }
+}
+
+@include media-breakpoint-up(xl) {
+  .donation-cart-new {
+    &__holder {
+      width: 100%;
+    }
+  }
+}
+
+@media (min-width: 350px) and (max-width: 575px) {
+  .donation-cart-new {
+    &__btn {
+      width: 72px;
+    }
+  }
+}

package/src/scss/components/_payments-v2.scss

@@ -52,14 +52,6 @@
 }
 
 @include media-breakpoint-up(sm) {
-  .payways {
-    max-width: 100%;
-    flex-direction: column;
-    justify-content: center;
-  }
-}
-
-@include media-breakpoint-up(md) {
   .payways {
     max-width: 100%;
     flex-direction: row;

package/src/scss/components/checkout-payment-details-v2.scss

@@ -125,73 +125,6 @@
       }
     }
 
-    &__billie {
-      .billie-info {
-        background: $white;
-        margin-bottom: 20px;
-        padding: 20px;
-
-        &__header {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          margin-bottom: 20px;
-          padding-bottom: 20px;
-          border-bottom: 1px solid $gray;
-
-          &_title {
-            margin: 0;
-            font-size: 1rem;
-            font-weight: 500;
-            line-height: 1.5rem;
-          }
-        }
-
-        &__list {
-          padding: 0;
-          margin: 0;
-          list-style-type: none;
-          border-bottom: 1px solid $gray;
-
-          &_item {
-            font-size: 0.875rem;
-            font-weight: 400;
-            line-height: 1.375rem;
-            height: 30px;
-            display: flex;
-            align-items: center;
-
-            .fa-check {
-              margin-right: 10px;
-            }
-
-            &:last-child {
-              margin-bottom: 15px;
-            }
-          }
-        }
-
-        &__learn-more {
-          display: flex;
-          align-items: center;
-          border-bottom: 1px solid $gray;
-        }
-
-        &__accept-info {
-          margin-top: 15px;
-          margin-bottom: 10px;
-          color: $warm-grey;
-          font-weight: 400;
-          font-size: 0.75rem;
-          line-height: 1rem;
-        }
-
-        &__link {
-          color: $black;
-        }
-      }
-    }
-
     .apple {
       &-logo {
         height: 28px;

package/src/scss/components/loader.scss

@@ -25,7 +25,6 @@
 
     .paypal-checkout-logo,
     .klarna-checkout-logo,
-    .billie-checkout-logo,
     .clearpay-checkout-logo {
       margin-bottom: 25px;
     }
@@ -114,13 +113,6 @@
   margin-bottom: 20px;
 }
 
-.billie-spinner-logo {
-  display: block;
-  background: url('../img/billie-spinner.svg') no-repeat;
-  height: 38px;
-  width: 111px;
-}
-
 .apple-spinner-logo {
   height: 58px;
   width: 136px;

package/src/scss/components/my-account/_active-orders.scss

@@ -171,7 +171,6 @@
       'header viewMore'
       'orderDetails orderDetails'
       'consignmentInfo consignmentInfo'
-      'paymentStatus paymentStatus'
       'shipment shipment';
 
       .order-header {
@@ -237,7 +236,6 @@
       grid-template-areas:
       'header consignmentInfo viewMore'
       'orderDetails orderDetails orderDetails'
-      'paymentStatus paymentStatus paymentStatus'
       'shipment shipment shipment';
       grid-template-columns: auto auto 1fr;
       align-items: center;

package/src/scss/pages/_checkout-confirmation-new.scss

@@ -253,8 +253,7 @@
         &__klarna,
         &__apple,
         &__google,
-        &__clearpay,
-        &__billie {
+        &__clearpay {
           display: flex;
           flex-direction: column;
         }
@@ -274,8 +273,7 @@
         }
 
         &__klarna,
-        &__clearpay,
-        &__billie {
+        &__clearpay {
           margin-bottom: 0;
         }
       }
@@ -327,16 +325,11 @@
           &__klarna,
           &__apple,
           &__google,
-          &__clearpay,
-          &__billie {
+          &__clearpay {
             flex-direction: row;
             justify-content: space-between;
           }
 
-          &__billie {
-            align-items: center;
-          }
-
           &__paypal,
           &__apple,
           &__google {