wickes-css2 2.94.0-develop.7 → 2.94.0-develop.8

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

@@ -2,11 +2,12 @@
 
 .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;
@@ -64,270 +65,240 @@
     }
   }
 
-  &__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;
 
-  &__mobile-bar-total,
-  &__mobile-bar-label {
-    font-weight: 400;
-    font-size: 1.125rem;
-    line-height: 1.25rem;
+      .checkout-widget_order-summary.checkout-widget-large {
+        display: block;
+        padding-top: 0;
+        margin-bottom: 0;
+      }
+    }
   }
 
-  &__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;
-      }
+  &__basked-id {
+    margin-top: 13px;
+    padding: 26px 0;
+    background: $gray-bg;
+    text-align: center;
+    font-size: 1rem;
+
+    .id-number {
+      font-weight: bold;
     }
   }
 
-  .checkout-widget {
-    &__voucher-accordion {
-      margin-top: 10px;
+  &__email {
+    &-info {
+      padding: 26px 30px;
+      background: $gray-bg;
     }
+  }
 
-    &__voucher-toggle {
-      margin-bottom: 8px;
-      cursor: pointer;
-      display: flex;
-      justify-content: space-between;
-      color: $blue;
-      font-size: .875rem;
+  &__accordion {
+    display: inline-block;
+    //padding-bottom: 0;
+    font-weight: 500;
+    color: $blue;
+    padding-bottom: 15px;
 
-      &.collapsed {
-        margin-bottom: 0;
+    &.collapsed .icon {
+      transform: rotate(180deg);
+    }
 
-        .checkout-widget__icon {
-          transform: rotate(180deg);
-        }
+    //&:not(.collapsed) {
+    //  padding-bottom: 15px;
+    //}
+
+    & + .summary {
+      &__aside {
+        padding-top: 20px;
       }
     }
 
-    &__icon {
-      width: 16px;
-      height: 16px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
+    &.collapsed + .summary {
+      &__aside {
+        padding-top: 0;
 
-    &__voucher-section {
-      margin-top: 1rem;
+        .checkout-widget__details {
+          opacity: 0;
+        }
+      }
     }
+  }
 
-    &__voucher-list {
-      list-style: none;
-      padding: 0;
+  .checkout-widget {
+
+    &__total {
+      margin-top: 0;
     }
 
-    &__voucher-value {
-      font-weight: bold;
+    &__accordion-wrap {
+      margin-bottom: 20px;
     }
-  }
 
-  .summary__mobile-order.collapsed .summary__icon {
-    transform: rotate(0deg);
-  }
+    &.checkout-widget_order-summary {
+      padding: 20px 20px 0;
 
-  .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 {
+        &__details {
+          padding-top: 20px;
+          font-size: 1rem;
 
-  .checkout-widget__item:nth-child(3) {
-    padding-top: 10px;
-  }
+          .checkout-widget__accordion-wrap {
+            .accordion__header-icon-small {
+              left: 85px;
+            }
+          }
+        }
 
-  .checkout-widget__item-bold {
-    font-weight: 500;
-    margin: 0;
-  }
+        &__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-vat {
-    font-size: .875rem;
-    margin: 0;
-    padding: 0;
-  }
+          &-bold {
+            font-weight: 500;
+          }
 
-  .checkout-widget__item-value {
-    text-align: right;
-  }
+          &-vat {
+            font-size: .75rem;
+            margin-top: -15px;
+          }
 
-  .checkout-widget__item-cc, .checkout-widget__item-delivery {
-    font-size: 1rem;
-    margin-top: 5px;
-  }
+          &-hide {
+            display: none;
+          }
 
-  .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;
-  }
+          &-free {
+            color: $blue;
 
-  &__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;
-  }
+            & .icon {
+              margin-left: 5px;
+              margin-bottom: -2px;
+              vertical-align: bottom;
+              color: $green;
+            }
+          }
 
-  &__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;
-    }
-  }
+        &-deficit {
+          display: block;
+          text-align: center;
+          color: #0277bd;
 
-  &__aside.collapsing {
-    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.show {
-    height: 0;
-  }
-
-  .collapsing {
-    height: 0;
-    overflow: hidden;
-    transition: height .3s ease-in-out;
-  }
-
-  .collapse.show {
-    height: auto;
-    transition: height .3s ease-in-out;
+    &.checkout-widget-large {
+      .checkout-info-wrap {
+        padding-top: 0;
+      }
+    }
   }
-}
-
-.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 {
@@ -393,21 +364,6 @@
     }
   }
 
-  .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 {
@@ -422,50 +378,3 @@
     }
   }
 }
-
-@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;
-        }
-      }
-    }
-  }
-}
-
-
-@include media-breakpoint-only(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/checkout-payment-details-v2.scss

@@ -286,7 +286,7 @@
   .checkout-payment-details-v2 {
     .checkout-payment-details {
       .hop-iframe__wrapper {
-        height: 707px;
+        height: 710px;
       }
     }
   }
@@ -296,7 +296,7 @@
   .checkout-payment-details-v2 {
     .checkout-payment-details {
       .hop-iframe__wrapper {
-        height: 536px;
+        height: 555px;
       }
     }
   }

package/src/scss/helpers/_variables.scss

@@ -172,8 +172,6 @@ $nav: 100;
 $nav-mobile: 101;
 $back-to-top: 1000;
 $cookies-policy: 1001;
-$summary-aside: 1001;
-$summary-mobile-bar: 1002;
 $offer-banner-stuck: 1030;
 
 $deep-red: #8a424f;

package/src/scss/pages/_checkout-widget.scss

@@ -1,4 +1,5 @@
 .checkout-widget {
+  padding: 20px;
   background-color: $gray-bg;
   margin-bottom: 20px;
 
@@ -82,14 +83,8 @@
     margin-bottom: 0;
     list-style-type: none;
 
-    & > li:last-child {
-      margin: 0;
-    }
-
-    & > .checkout-widget__accordion-wrap {
-      &.checkout-widget__details-discount {
-        margin-top: 8px;
-      }
+    & > li:not(:first-of-type) {
+      margin-top: 5px;
     }
 
     .checkout-widget__details-hidden {
@@ -431,7 +426,7 @@
       text-align: center;
       width: 100%;
       color: $green;
-      font-size: 1rem;
+      font-size: 4rem;
       margin-bottom: 10px;
     }
   }
@@ -520,6 +515,10 @@
     padding-right: 0;
   }
 
+  &-hide {
+    display: none;
+  }
+
   input {
     text-transform: uppercase;
 
@@ -530,43 +529,31 @@
 }
 
 .voucher {
-  margin-bottom: 10px;
-
-  .checkout-widget.checkout-voucher {
-    &-hide {
-      display: none;
-    }
+  .checkout-widget {
+    margin-left: -15px;
+    margin-right: -15px;
+  }
+}
 
-    form {
-      display: flex;
-      justify-content: space-between;
-      width: 100%;
+@include media-breakpoint-up(sm) {
+  .voucher {
+    .checkout-widget {
+      margin: 0 0 20px;
 
-      .form-row {
-        width: 100%;
-        margin-right: 16px;
-        margin-bottom: 0;
-        padding-right: 0;
+      form {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
 
-        &__field {
-          margin-right: 0;
+        .form-row {
+          @include make-col(6);
+          margin-bottom: 0;
         }
       }
-
-      .voucher__btn {
-        margin-top: 0;
-      }
     }
   }
 }
 
-.voucher {
-  .checkout-widget {
-    margin-left: -15px;
-    margin-right: -15px;
-  }
-}
-
 @include media-breakpoint-up(md) {
   .checkout-widget {
     .accordion {
@@ -639,14 +626,6 @@
   }
 }
 
-@include media-breakpoint-up(lg) {
-  .checkout-voucher {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-}
-
 @include media-breakpoint-down(md) {
   .checkout-widget {
     &__secure {
@@ -719,6 +698,7 @@
     }
 
     &_order-summary {
+      padding: 20px 30px;
 
       .accordion__header-text {
         margin-left: 4px;
@@ -753,6 +733,12 @@
 
 @include media-breakpoint-down(xs) {
   .checkout-widget {
+    &_order-summary {
+      padding: 20px 45px;
+      margin-left: -15px;
+      margin-right: -15px;
+    }
+
     &__payment-wrapper {
       margin-left: -30px;
       margin-right: -25px;
@@ -787,6 +773,12 @@
       padding-bottom: 20px;
     }
 
+    &__detail-name_accordion + .checkout-widget__details-hidden + span {
+      right: auto;
+      left: 0;
+      top: 20px;
+    }
+
     &__detail-name,
     &__detail-value:not(.checkout-widget__details-hidden) {
       display: block;