wickes-css2 2.94.0-develop.13 → 2.94.0-develop.16

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

@@ -1,13 +1,20 @@
 @import '../helpers/helpers';
 
+$android-offset:   60px !default;
+$ios-notch-offset: 80px !default;
+
+body.summary-hidden .back-to-top {
+  bottom: 20px !important;
+  right: 16px !important;
+}
+
 .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 +72,285 @@
     }
   }
 
-  &-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 {
+    &__icon {
+      width: 16px;
+      height: 16px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
 
-    &__total {
-      margin-top: 0;
+    &__voucher-section {
+      margin-top: 1rem;
     }
 
-    &__accordion-wrap {
-      margin-bottom: 20px;
+    &__voucher-list {
+      list-style: none;
+      padding: 0;
     }
 
-    &.checkout-widget_order-summary {
-      padding: 20px 20px 0;
+    &__voucher-value {
+      font-weight: bold;
+    }
+  }
 
-      .checkout-widget {
-        &__details {
-          padding-top: 20px;
-          font-size: 1rem;
+  .summary__mobile-order.collapsed .summary__icon {
+    transform: rotate(0deg);
+  }
 
-          .checkout-widget__accordion-wrap {
-            .accordion__header-icon-small {
-              left: 85px;
-            }
-          }
-        }
+  .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;
+  }
 
-        &__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:nth-child(3) {
+    padding-top: 10px;
+  }
 
-          &-bold {
-            font-weight: 500;
-          }
+  .checkout-widget__item-free {
+    .icon {
+      margin-left: 5px;
+      margin-bottom: -2px;
+      vertical-align: bottom;
+      color: #67a589;
+    }
+  }
 
-          &-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;
-            }
-          }
+  .back-to-top.single-button {
+    bottom: 146px !important;
+  }
+}
 
-          &__accordion-wrap {
-            .checkout-widget__detail-value {
-              left: auto;
-              right: 0;
-              top: 0;
-            }
-          }
-        }
-      }
-    }
+@include media-breakpoint-up(md) {
+  body:has(.summary__aside.collapse.show) .back-to-top {
+    display: none !important;
   }
 }
 
 @include media-breakpoint-up(lg) {
   .summary {
     &__aside {
-      padding: 40px 30px 0;
+      padding: 20px 20px 0;
+      box-shadow: none;
     }
 
     & &__payment {
@@ -364,6 +416,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 +445,87 @@
     }
   }
 }
+
+@include media-breakpoint-down(md) {
+  .tp-app {
+    &.tp-android,
+    &.tp-ios:not(.tp-ios-notch) {
+      .summary--mobile {
+        .summary__mobile-bar,
+        .summary__aside {
+          bottom: $android-offset !important;
+        }
+      }
+
+      .summary__aside.collapse.show {
+        bottom: 177px + $android-offset !important;
+      }
+
+      .summary__aside.collapsing {
+        bottom: 177px + $android-offset !important;
+      }
+
+      .summary__aside.collapse.show.single-button,
+      .summary__aside.collapsing.single-button {
+        bottom: 125px + $android-offset !important;
+      }
+    }
+
+    &.tp-ios-notch {
+      .summary--mobile {
+        .summary__mobile-bar,
+        .summary__aside {
+          bottom: $ios-notch-offset !important;
+        }
+      }
+
+      .summary__aside.collapse.show {
+        bottom: 177px + $ios-notch-offset !important;
+      }
+
+      .summary__aside.collapsing {
+        bottom: 177px + $ios-notch-offset !important;
+      }
+
+      .summary__aside.collapse.show.single-button,
+      .summary__aside.collapsing.single-button {
+        bottom: 125px + $ios-notch-offset !important;
+      }
+    }
+  }
+}
+
+@include media-breakpoint-up(sm) {
+  .tp-app {
+    &.tp-android,
+    &.tp-ios:not(.tp-ios-notch) {
+      .summary__aside.collapse.show {
+        bottom: 182px + $android-offset !important;
+      }
+
+      .summary__aside.collapsing {
+        bottom: 182px + $android-offset !important;
+      }
+
+      .summary__aside.collapse.show.single-button,
+      .summary__aside.collapsing.single-button {
+        bottom: 130px + $android-offset !important;
+      }
+    }
+
+    &.tp-ios-notch {
+      .summary__aside.collapse.show {
+        bottom: 182px + $ios-notch-offset !important;
+      }
+
+      .summary__aside.collapsing {
+        bottom: 182px + $ios-notch-offset !important;
+      }
+
+      .summary__aside.collapse.show.single-button,
+      .summary__aside.collapsing.single-button {
+        bottom: 130px + $ios-notch-offset !important;
+      }
+    }
+  }
+}

package/src/scss/components/_sticky-element-appearance.scss

@@ -0,0 +1,25 @@
+[data-sticky-element] {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  transform: translateY(100%);
+  opacity: 0;
+  pointer-events: none;
+  will-change: transform, opacity;
+  transition: transform 0.5s ease, opacity 0.5s ease;
+
+  &:not(.is-hidden) {
+    transform: translateY(0);
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  &.is-hidden {
+    transform: translateY(100%);
+    opacity: 0;
+    transition: transform 0.5s ease 0s,
+    opacity   0.5s ease 5s;
+    pointer-events: none;
+  }
+}

package/src/scss/helpers/_variables.scss

@@ -173,6 +173,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/main.scss

@@ -86,6 +86,7 @@
 @import 'components/clearpay';
 @import 'components/clamp-content';
 @import 'components/error-frame';
+@import 'components/sticky-element-appearance';
 
 // Pages
 @import 'pages/contact-us';