wickes-css2 2.94.0-billie.3 → 2.94.0-develop.10

package/src/scss/components/_order-summary.scss

@@ -1,17 +1,13 @@
 @import '../helpers/helpers';
 
-body.summary-hidden .back-to-top {
-  bottom: 20px !important;
-  right: 16px !important;
-}
-
 .summary {
   &__aside {
-    padding: 15px;
+    padding: 20px 20px 0;
     background: $gray-bg;
-    margin: 0 auto;
-    z-index: $summary-aside;
-    box-shadow: 4px 4px 16px rgba(0, 0, 0, .25);
+
+    & .btn-checkout {
+      margin-bottom: 10px;
+    }
 
     & .form-row__col-btn {
       padding-right: 0;
@@ -69,279 +65,240 @@ body.summary-hidden .back-to-top {
     }
   }
 
-  &__mobile-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
+  &-large {
+    order: -1;
 
-  &__icon-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 10px;
+    .summary__aside {
+      //border: 1px solid $border-grey;
+
+      .checkout-widget_order-summary.checkout-widget-large {
+        display: block;
+        padding-top: 0;
+        margin-bottom: 0;
+      }
+    }
   }
 
-  &__mobile-bar-total,
-  &__mobile-bar-label {
-    font-weight: 400;
-    font-size: 1.125rem;
-    line-height: 1.25rem;
+  &__basked-id {
+    margin-top: 13px;
+    padding: 26px 0;
+    background: $gray-bg;
+    text-align: center;
+    font-size: 1rem;
+
+    .id-number {
+      font-weight: bold;
+    }
   }
 
-  &__icon {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    width: 24px;
-    height: 24px;
-    transition: transform .3s ease;
-    transform: rotate(180deg);
-
-    &-up,
-    &-down {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 16px;
-      height: 16px;
-
-      i {
-        font-size: 16px;
-        line-height: 16px;
-        display: inline-block;
-        margin: auto;
-      }
+  &__email {
+    &-info {
+      padding: 26px 30px;
+      background: $gray-bg;
     }
   }
 
-  .checkout-widget {
-    &__voucher-accordion {
-      margin-top: 10px;
+  &__accordion {
+    display: inline-block;
+    //padding-bottom: 0;
+    font-weight: 500;
+    color: $blue;
+    padding-bottom: 15px;
+
+    &.collapsed .icon {
+      transform: rotate(180deg);
     }
 
-    &__voucher-toggle {
-      margin-bottom: 8px;
-      cursor: pointer;
-      display: flex;
-      justify-content: space-between;
-      color: $blue;
-      font-size: .875rem;
+    //&:not(.collapsed) {
+    //  padding-bottom: 15px;
+    //}
 
-      &.collapsed {
-        margin-bottom: 0;
+    & + .summary {
+      &__aside {
+        padding-top: 20px;
+      }
+    }
 
-        .checkout-widget__icon {
-          transform: rotate(180deg);
+    &.collapsed + .summary {
+      &__aside {
+        padding-top: 0;
+
+        .checkout-widget__details {
+          opacity: 0;
         }
       }
     }
+  }
 
-    &__icon {
-      width: 16px;
-      height: 16px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
+  .checkout-widget {
 
-    &__voucher-section {
-      margin-top: 1rem;
+    &__total {
+      margin-top: 0;
     }
 
-    &__voucher-list {
-      list-style: none;
-      padding: 0;
+    &__accordion-wrap {
+      margin-bottom: 20px;
     }
 
-    &__voucher-value {
-      font-weight: bold;
-    }
-  }
+    &.checkout-widget_order-summary {
+      padding: 20px 20px 0;
 
-  .summary__mobile-order.collapsed .summary__icon {
-    transform: rotate(0deg);
-  }
+      .checkout-widget {
+        &__details {
+          padding-top: 20px;
+          font-size: 1rem;
 
-  .checkout-widget__item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 1rem;
-    line-height: 1.25rem;
-    margin: 10px 0;
-    padding: 5px 0;
-  }
+          .checkout-widget__accordion-wrap {
+            .accordion__header-icon-small {
+              left: 85px;
+            }
+          }
+        }
 
-  .checkout-widget__item:nth-child(3) {
-    padding-top: 10px;
-  }
+        &__item {
+          display: flex;
+          justify-content: space-between;
+          font-size: 1rem;
+          line-height: 1.125rem;
+          font-weight: 400;
+          margin-bottom: 20px;
+
+          &-value {
+            text-align: right;
+          }
 
-  .checkout-widget__item-free {
-    .icon {
-      margin-left: 5px;
-      margin-bottom: -2px;
-      vertical-align: bottom;
-      color: #67a589;
-    }
-  }
+          &-bold {
+            font-weight: 500;
+          }
 
-  .checkout-widget__item-bold {
-    font-weight: 500;
-    margin: 0;
-  }
+          &-vat {
+            font-size: .75rem;
+            margin-top: -15px;
+          }
 
-  .checkout-widget__item-vat {
-    font-size: .875rem;
-    margin: 0;
-    padding: 0;
-  }
+          &-hide {
+            display: none;
+          }
 
-  .checkout-widget__item-value {
-    text-align: right;
-  }
+          &-free {
+            color: $blue;
 
-  .checkout-widget__item-cc, .checkout-widget__item-delivery {
-    font-size: 1rem;
-    margin-top: 5px;
-  }
+            & .icon {
+              margin-left: 5px;
+              margin-bottom: -2px;
+              vertical-align: bottom;
+              color: $green;
+            }
+          }
 
-  .checkout-widget__total {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 15px 0;
-    margin-bottom: 20px;
-    font-weight: 500;
-    font-size: 1.25rem;
-    color: $white;
-    background-color: $blue-dark;
-  }
+          &-deficit {
+            display: block;
+            text-align: center;
+            color: #0277bd;
 
-  &__aside.collapse,
-  &__aside.collapsing {
-    position: fixed !important;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    overflow: hidden;
-    display: block !important;
-    transition: height .3s ease-in-out;
-    max-height: calc(100vh - 177px);
-    overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
-  }
+            .bold {
+              font-weight: 500;
+            }
+          }
+        }
 
-  &__aside.collapse {
-    height: 0;
-  }
+        &-deficit {
+          display: block;
+          text-align: center;
+          color: #0277bd;
 
-  &__aside.collapse.show {
-    bottom: 177px;
-    height: auto;
+          .bold {
+            font-weight: 500;
+          }
+        }
 
-    &.single-button {
-      bottom: 125px;
+        &__total {
+          border: 0;
+          display: flex;
+          justify-content: space-between;
+          margin-left: -25px;
+          margin-right: -25px;
+          margin-bottom: 0;
+          padding: 20px 25px;
+          color: #fff;
+          background-color: $blue-dark;
+          font-size: 1.375rem;
+          line-height: 1.5rem;
+        }
+      }
     }
-  }
 
-  &__aside.collapsing {
-    bottom: 177px;
-    height: auto;
-
-    &.single-button {
-      bottom: 125px;
+    &.checkout-widget-large {
+      .checkout-info-wrap {
+        padding-top: 0;
+      }
     }
   }
 
-  &__aside.collapsing.show {
-    height: 0;
-  }
-
-  .collapsing {
-    height: 0;
-    overflow: hidden;
-    transition: height .3s ease-in-out;
-  }
-
-  .collapse.show {
-    height: auto;
-    transition: height .3s ease-in-out;
-  }
-}
-
-.summary__mobile-bar {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: $summary-mobile-bar;
-  transition: transform .3s ease;
-}
-
-.summary__mobile-order {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background-color: $blue-dark;
-  padding: 20px 0;
-  height: 44px;
-  cursor: pointer;
-  color: $white;
-  transition: transform .3s ease;
-}
-
-.back-to-top {
-  bottom: 193px !important;
-}
-
-.back-to-top.single-button {
-  bottom: 141px !important;
-}
-
-.summary:not(.summary--mobile) {
-  .summary__aside {
-    padding: 20px 20px 0;
-    background: $gray-bg;
-    max-width: none;
-    box-shadow: none;
+  &--payways {
+    .checkout-widget {
+      margin-bottom: 16px;
+    }
   }
 }
 
 @include media-breakpoint-up(sm) {
   .summary {
-    &__aside.collapse.show {
-      bottom: 182px;
-      height: auto;
-
-      &.single-button {
-        bottom: 130px;
+    &-large {
+      .footer-checkout-holder {
+        justify-content: center;
       }
     }
 
-    &__aside.collapsing {
-      bottom: 182px;
+    .checkout-widget {
+      &.checkout-widget_order-summary {
+        padding: 20px 0 0;
 
-      &.single-button {
-        bottom: 130px;
+        .checkout-widget {
+          &__total {
+            margin-left: -20px;
+            margin-right: -20px;
+          }
+        }
       }
     }
   }
+}
 
-  .back-to-top {
-    bottom: 198px !important;
+@include media-breakpoint-up(md) {
+  .summary__klarna {
+    margin: 0 -20px;
   }
+}
+
+@include media-breakpoint-only(md) {
+  .summary {
+    .checkout-widget {
+      &.checkout-widget_order-summary {
+        .checkout-widget {
+          &__item {
+            &-deficit {
+              text-align: left;
+            }
+          }
 
-  .back-to-top.single-button {
-    bottom: 146px !important;
+          &__accordion-wrap {
+            .checkout-widget__detail-value {
+              left: auto;
+              right: 0;
+              top: 0;
+            }
+          }
+        }
+      }
+    }
   }
 }
 
 @include media-breakpoint-up(lg) {
   .summary {
     &__aside {
-      padding: 20px 20px 0;
-      box-shadow: none;
+      padding: 40px 30px 0;
     }
 
     & &__payment {
@@ -407,21 +364,6 @@ body.summary-hidden .back-to-top {
     }
   }
 
-  .checkout-action__wrapper {
-    position: static;
-    box-shadow: none;
-  }
-
-  .back-to-top {
-    right: 48px !important;
-    bottom: 24px !important;
-  }
-
-  .back-to-top.single-button {
-    right: 48px !important;
-    bottom: 24px !important;
-  }
-
   .basket {
     .summary {
       & .summary__payment {
@@ -436,26 +378,3 @@ body.summary-hidden .back-to-top {
     }
   }
 }
-
-@include media-breakpoint-down(md) {
-  .tp-app {
-    &.tp-android,
-    &.tp-ios:not(.tp-ios-notch) {
-      .summary--mobile {
-        .summary__mobile-bar,
-        .summary__aside {
-          bottom: 60px !important;
-        }
-      }
-    }
-
-    &.tp-ios-notch {
-      .summary--mobile {
-        .summary__mobile-bar,
-        .summary__aside {
-          bottom: 80px !important;
-        }
-      }
-    }
-  }
-}

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;