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

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

@@ -2,12 +2,11 @@
 
 .summary {
   &__aside {
-    padding: 20px 20px 0;
+    padding: 15px;
     background: $gray-bg;
-
-    & .btn-checkout {
-      margin-bottom: 10px;
-    }
+    margin: 0 auto;
+    z-index: $summary-aside;
+    box-shadow: 4px 4px 16px rgba(0, 0, 0, .25);
 
     & .form-row__col-btn {
       padding-right: 0;
@@ -65,240 +64,270 @@
     }
   }
 
-  &-large {
-    order: -1;
-
-    .summary__aside {
-      //border: 1px solid $border-grey;
-
-      .checkout-widget_order-summary.checkout-widget-large {
-        display: block;
-        padding-top: 0;
-        margin-bottom: 0;
-      }
-    }
+  &__mobile-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
   }
 
-  &__basked-id {
-    margin-top: 13px;
-    padding: 26px 0;
-    background: $gray-bg;
-    text-align: center;
-    font-size: 1rem;
+  &__icon-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+  }
 
-    .id-number {
-      font-weight: bold;
-    }
+  &__mobile-bar-total,
+  &__mobile-bar-label {
+    font-weight: 400;
+    font-size: 1.125rem;
+    line-height: 1.25rem;
   }
 
-  &__email {
-    &-info {
-      padding: 26px 30px;
-      background: $gray-bg;
+  &__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;
+      }
     }
   }
 
-  &__accordion {
-    display: inline-block;
-    //padding-bottom: 0;
-    font-weight: 500;
-    color: $blue;
-    padding-bottom: 15px;
-
-    &.collapsed .icon {
-      transform: rotate(180deg);
+  .checkout-widget {
+    &__voucher-accordion {
+      margin-top: 10px;
     }
 
-    //&:not(.collapsed) {
-    //  padding-bottom: 15px;
-    //}
+    &__voucher-toggle {
+      margin-bottom: 8px;
+      cursor: pointer;
+      display: flex;
+      justify-content: space-between;
+      color: $blue;
+      font-size: .875rem;
 
-    & + .summary {
-      &__aside {
-        padding-top: 20px;
-      }
-    }
-
-    &.collapsed + .summary {
-      &__aside {
-        padding-top: 0;
+      &.collapsed {
+        margin-bottom: 0;
 
-        .checkout-widget__details {
-          opacity: 0;
+        .checkout-widget__icon {
+          transform: rotate(180deg);
         }
       }
     }
-  }
 
-  .checkout-widget {
-
-    &__total {
-      margin-top: 0;
+    &__icon {
+      width: 16px;
+      height: 16px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
 
-    &__accordion-wrap {
-      margin-bottom: 20px;
+    &__voucher-section {
+      margin-top: 1rem;
     }
 
-    &.checkout-widget_order-summary {
-      padding: 20px 20px 0;
+    &__voucher-list {
+      list-style: none;
+      padding: 0;
+    }
 
-      .checkout-widget {
-        &__details {
-          padding-top: 20px;
-          font-size: 1rem;
+    &__voucher-value {
+      font-weight: bold;
+    }
+  }
 
-          .checkout-widget__accordion-wrap {
-            .accordion__header-icon-small {
-              left: 85px;
-            }
-          }
-        }
+  .summary__mobile-order.collapsed .summary__icon {
+    transform: rotate(0deg);
+  }
 
-        &__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 {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 1rem;
+    line-height: 1.25rem;
+    margin: 10px 0;
+    padding: 5px 0;
+  }
 
-          &-bold {
-            font-weight: 500;
-          }
+  .checkout-widget__item:nth-child(3) {
+    padding-top: 10px;
+  }
 
-          &-vat {
-            font-size: .75rem;
-            margin-top: -15px;
-          }
+  .checkout-widget__item-bold {
+    font-weight: 500;
+    margin: 0;
+  }
 
-          &-hide {
-            display: none;
-          }
+  .checkout-widget__item-vat {
+    font-size: .875rem;
+    margin: 0;
+    padding: 0;
+  }
 
-          &-free {
-            color: $blue;
+  .checkout-widget__item-value {
+    text-align: right;
+  }
 
-            & .icon {
-              margin-left: 5px;
-              margin-bottom: -2px;
-              vertical-align: bottom;
-              color: $green;
-            }
-          }
+  .checkout-widget__item-cc, .checkout-widget__item-delivery {
+    font-size: 1rem;
+    margin-top: 5px;
+  }
 
-          &-deficit {
-            display: block;
-            text-align: center;
-            color: #0277bd;
+  .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;
+  }
 
-            .bold {
-              font-weight: 500;
-            }
-          }
-        }
+  &__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;
+  }
 
-        &-deficit {
-          display: block;
-          text-align: center;
-          color: #0277bd;
+  &__aside.collapse {
+    height: 0;
+  }
 
-          .bold {
-            font-weight: 500;
-          }
-        }
+  &__aside.collapse.show {
+    bottom: 177px;
+    height: auto;
 
-        &__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;
-        }
-      }
+    &.single-button {
+      bottom: 125px;
     }
+  }
 
-    &.checkout-widget-large {
-      .checkout-info-wrap {
-        padding-top: 0;
-      }
+  &__aside.collapsing {
+    bottom: 177px;
+    height: auto;
+
+    &.single-button {
+      bottom: 125px;
     }
   }
 
-  &--payways {
-    .checkout-widget {
-      margin-bottom: 16px;
-    }
+  &__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;
   }
 }
 
 @include media-breakpoint-up(sm) {
   .summary {
-    &-large {
-      .footer-checkout-holder {
-        justify-content: center;
+    &__aside.collapse.show {
+      bottom: 182px;
+      height: auto;
+
+      &.single-button {
+        bottom: 130px;
       }
     }
 
-    .checkout-widget {
-      &.checkout-widget_order-summary {
-        padding: 20px 0 0;
+    &__aside.collapsing {
+      bottom: 182px;
 
-        .checkout-widget {
-          &__total {
-            margin-left: -20px;
-            margin-right: -20px;
-          }
-        }
+      &.single-button {
+        bottom: 130px;
       }
     }
   }
-}
 
-@include media-breakpoint-up(md) {
-  .summary__klarna {
-    margin: 0 -20px;
+  .back-to-top {
+    bottom: 198px !important;
   }
-}
-
-@include media-breakpoint-only(md) {
-  .summary {
-    .checkout-widget {
-      &.checkout-widget_order-summary {
-        .checkout-widget {
-          &__item {
-            &-deficit {
-              text-align: left;
-            }
-          }
 
-          &__accordion-wrap {
-            .checkout-widget__detail-value {
-              left: auto;
-              right: 0;
-              top: 0;
-            }
-          }
-        }
-      }
-    }
+  .back-to-top.single-button {
+    bottom: 146px !important;
   }
 }
 
 @include media-breakpoint-up(lg) {
   .summary {
     &__aside {
-      padding: 40px 30px 0;
+      padding: 20px 20px 0;
+      box-shadow: none;
     }
 
     & &__payment {
@@ -364,6 +393,21 @@
     }
   }
 
+  .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 {
@@ -378,3 +422,50 @@
     }
   }
 }
+
+@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: 560px;
+        height: 707px;
       }
     }
   }
@@ -296,7 +296,7 @@
   .checkout-payment-details-v2 {
     .checkout-payment-details {
       .hop-iframe__wrapper {
-        height: 560px;
+        height: 536px;
       }
     }
   }

package/src/scss/helpers/_variables.scss

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