wickes-css2 2.98.0-develop.3 → 2.98.0-develop.5

package/src/scss/components/_custom-slider.scss

@@ -0,0 +1,512 @@
+@import '../helpers/helpers';
+
+.custom-slider {
+  height: 100%;
+  margin-bottom: 0;
+  border-radius: 0;
+  position: fixed;
+  background-color: $white;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, .2);
+  transition: transform .4s ease, opacity .4s ease;
+  opacity: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  z-index: 1041;
+
+  &__wrap {
+    padding: 8px 16px 0;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+
+    &--scroll {
+      margin-bottom: 72px;
+    }
+  }
+
+  &.bottom-to-top {
+    bottom: 0;
+    left: 0;
+    right: 0;
+    transform: translateY(100%);
+  }
+
+  &.right-to-left {
+    top: 0;
+    bottom: 0;
+    right: 0;
+    transform: translateX(100%);
+  }
+
+  &.show {
+    transform: translateY(0) translateX(0);
+    opacity: 1;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .link {
+      display: flex;
+      align-items: center;
+      font-weight: 500;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+
+      .icon-wrap {
+        font-size: 1.2rem;
+        margin-right: 8px;
+      }
+    }
+
+    .close-popup {
+      cursor: pointer;
+      font-size: 1rem;
+    }
+
+    .icon-wrap.close-popup {
+      color: $warm-grey;
+      background: none;
+      border: 0;
+      outline: none;
+    }
+  }
+
+  &__message {
+    margin-top: 8px;
+    display: flex;
+
+    .icon-wrap {
+      font-size: 1rem;
+      margin-right: 8px;
+
+      &.success {
+        color: $green;
+      }
+
+      &.warning {
+        color: $orange;
+      }
+
+      &.error {
+        color: $app-error;
+      }
+    }
+
+    .messages {
+      display: flex;
+      flex-direction: column;
+
+      &__text {
+        font-size: 1rem;
+        font-weight: 500;
+        line-height: 1.5rem;
+        margin-bottom: 0;
+      }
+
+      &__notice {
+        margin-top: 4px;
+        font-size: .75rem;
+        font-weight: 400;
+        line-height: 1rem;
+        color: $squant;
+      }
+    }
+  }
+
+  .products {
+    margin-top: 8px;
+    margin-bottom: 0;
+    padding-left: 0;
+    list-style-type: none;
+
+    &__item {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+      justify-content: space-between;
+      grid-gap: 8px;
+      padding: 8px 0;
+
+      & + .products__item {
+        border-top: 1px solid $gray-light;
+      }
+    }
+
+    &__image {
+      width: 100%;
+      height: auto;
+      max-width: 64px;
+
+      .product-img {
+        width: 100%;
+        height: auto;
+      }
+    }
+
+    &__details {
+      flex: 1;
+
+      .item,
+      .price {
+        margin-bottom: 0;
+      }
+
+      .title {
+        font-size: .875rem;
+        font-weight: 500;
+        line-height: 1.375rem;
+        text-decoration: none;
+      }
+
+      .item {
+        font-size: .75rem;
+        font-weight: 400;
+        line-height: 1rem;
+        color: $squant;
+
+        .value {
+          color: $gray-dark;
+        }
+
+        & + .item {
+          margin-top: 4px;
+        }
+      }
+
+      .price {
+        @include font-size(18);
+        @include line-height(24);
+        margin-top: 8px;
+        font-weight: 700;
+        color: $blue-dark;
+
+        .inc {
+          @include font-size(12);
+          @include line-height(16);
+          font-weight: 500;
+        }
+      }
+    }
+  }
+
+  &__footer {
+    margin-top: auto;
+    display: flex;
+    grid-gap: 16px;
+    padding: 16px;
+    background: $white;
+    transition: all .3s ease;
+
+    &.footer-fixed {
+      box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, .08);
+      position: fixed;
+      width: 100%;
+      left: 0;
+      bottom: 0;
+      transform: none;
+    }
+  }
+
+  &__ctas {
+    display: flex;
+    grid-gap: 16px;
+
+    .btn-checkout {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  &__content {
+    margin-top: 16px;
+  }
+
+  .icon-wrap {
+    @include icon-wrap;
+
+    &--xl {
+      width: 124px;
+      height: 124px;
+      font-size: 5rem;
+      color: $blue-satin;
+    }
+  }
+
+  &__count {
+    @include font-size(18);
+    @include line-height(24);
+    font-weight: 700;
+  }
+
+  &__empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+
+    .text {
+      @include font-size(16);
+      @include line-height(24);
+      margin-top: 16px;
+      margin-bottom: 0;
+      font-weight: 400;
+    }
+
+    .close-popup {
+      margin-top: 24px;
+    }
+  }
+
+  &.mini-basket {
+    .custom-slider__wrap {
+      padding-top: 16px;
+    }
+
+    .custom-slider__footer {
+      box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, .08);
+      flex-direction: column;
+    }
+  }
+
+  .mini-basket {
+    &__total {
+      display: flex;
+      flex-direction: column;
+
+      &-toggle {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        background: transparent;
+        padding: 0;
+
+        .text {
+          @include font-size(14);
+          @include line-height(22);
+          font-weight: 500;
+        }
+
+        .value {
+          @include font-size(18);
+          @include line-height(24);
+          font-weight: 700;
+        }
+
+        &[aria-expanded="true"] {
+          .icon-wrap .arrow-icon {
+            transform: rotate(180deg);
+          }
+        }
+      }
+
+      &-collapse {
+        padding-left: 32px;
+      }
+
+      .checkout-widget {
+        &__details {
+          padding-left: 32px;
+          margin-bottom: 0;
+          list-style-type: none;
+        }
+
+        &__item {
+          @include font-size(14);
+          @include line-height(22);
+          font-weight: 400;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          &:first-child {
+            padding-top: 16px;
+          }
+
+          &-value {
+            font-weight: 500;
+          }
+
+          & + .checkout-widget__item:not(.checkout-widget__item-vat) {
+            margin-top: 16px;
+          }
+
+          &-vat {
+            @include font-size(12);
+            @include line-height(16);
+            font-weight: 400;
+            color: $squant;
+            padding-bottom: 16px;
+            margin-top: 4px;
+            margin-bottom: 16px;
+            border-bottom: 1px solid $gray-light;
+          }
+
+          &-free {
+            align-items: center;
+            justify-content: flex-start;
+
+            span {
+              display: flex;
+              align-items: center;
+
+              .icon {
+                margin-left: 10px;
+                color: $polishedPine;
+              }
+            }
+          }
+        }
+
+        &__details-discount {
+          margin-top: 16px;
+          display: grid;
+          grid-template-columns: 1fr auto;
+
+          .checkout-widget__detail-name {
+            cursor: pointer;
+          }
+
+          .checkout-widget__detail-value {
+            grid-column: 2;
+            grid-row: 1;
+            margin-left: auto;
+            font-weight: 500;
+          }
+
+          .checkout-widget__details-hidden {
+            padding-left: 15px;
+            font-size: .75rem;
+            line-height: 1rem;
+            list-style-type: disc;
+            font-weight: 400;
+            color: $gray-dark;
+          }
+
+          .checkout-widget__detail-name {
+            .icon {
+              color: $blue;
+              font-size: 1rem;
+              transition: all .3s ease;
+              transform: rotate(180deg);
+            }
+
+            &[aria-expanded="true"] {
+              .icon {
+                transform: rotate(0);
+              }
+            }
+          }
+
+          .checkout-widget__voucher-remove {
+            display: none;
+          }
+        }
+      }
+    }
+
+    &__wrap-total {
+      display: flex;
+      align-items: center;
+
+      .icon-wrap {
+        color: $warm-grey;
+        margin-right: 8px;
+      }
+    }
+  }
+}
+
+@include media-breakpoint-up(sm) {
+  .custom-slider {
+    &__wrap {
+      padding: 24px 24px 0;
+      margin: 0 auto;
+
+      &--scroll {
+        margin-bottom: 88px;
+      }
+    }
+
+    .products {
+      margin-top: 12px;
+
+      &__details .title {
+        @include multiline-ellipsis();
+      }
+
+      &__item {
+        padding: 12px 0;
+        grid-gap: 12px;
+      }
+
+      &__image {
+        max-width: 94px;
+      }
+    }
+
+    &__footer {
+      padding: 24px;
+    }
+
+    &__content {
+      margin-top: 24px;
+    }
+
+    &.mini-basket {
+      .custom-slider__wrap {
+        padding-top: 24px;
+      }
+    }
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .custom-slider {
+    &__header {
+      position: relative;
+
+      .link.close-popup {
+        display: none;
+      }
+
+      .icon-wrap.close-popup {
+        position: absolute;
+        right: 0;
+        top: 0;
+      }
+    }
+
+    &__message {
+      margin-top: 0;
+
+      .message__text {
+        max-width: 90%;
+      }
+    }
+
+    &__wrap {
+      width: 500px;
+      position: relative;
+    }
+  }
+}
+
+@include media-breakpoint-up(xl) {
+  .custom-slider {
+    &__wrap {
+      width: 600px;
+    }
+  }
+}

package/src/scss/components/legal-info.scss

@@ -1,3 +1,64 @@
+@import '../helpers/helpers';
+
 .legal-info {
   margin-top: 40px;
+  border: 1px solid $gray;
+  border-radius: 4px;
+  padding: 16px;
+  position: relative;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5rem;
+
+  &__toggle {
+    margin-bottom: 0;
+    font-size: 1.125rem;
+    font-weight: 500;
+    line-height: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .icon-wrap {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &:after {
+        content: '+';
+        color: $blue;
+        font-size: 1.575rem;
+      }
+    }
+
+    &[aria-expanded='true'] {
+      .icon-wrap {
+        &:after {
+          content: '-';
+          font-size: 2.95rem;
+        }
+      }
+    }
+  }
+
+  .collapse-wrap {
+    margin-top: 16px;
+  }
+
+  .container {
+    padding: 0;
+  }
+}
+
+@include media-breakpoint-up(sm) {
+  .legal-info {
+    padding: 24px;
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .legal-info {
+    padding: 24px 40px;
+  }
 }

package/src/scss/globals/_global-components.scss

@@ -4,6 +4,7 @@
 @import '../components/back-to-top';
 @import '../components/payments';
 @import '../components/popover-mini-basket';
+@import '../components/custom-slider';
 @import '../components/autocomplete';
 @import '../components/google_banner';
 @import '../components/smart-banner';

package/src/scss/helpers/_mixins.scss

@@ -148,6 +148,14 @@
   line-height: #{$line-height-px / 16}rem;
 }
 
+@mixin multiline-ellipsis($line-count: 1) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  -webkit-line-clamp: $line-count;
+}
+
 @mixin icon-wrap($width: 24px, $height: 24px, $font-size-px: 16) {
   width: $width;
   height: $height;

package/src/scss/helpers/_variables.scss

@@ -4,6 +4,7 @@
 $blue-dark: #0a3055;      // Base brand color for background
 $blue: #0277bd;           // CTAs
 $green: #67a509;          // Tick icons; Buttons in the checkout
+$polishedPine: #67a589;
 $green-dark: #487306;     // Active state of button-action
 
 // Additional colors

package/src/scss/homepage-main.scss

@@ -6,6 +6,7 @@
 
 // Base
 @import 'common/homepage-common';
+@import 'common/scroll-disable';
 
 @import 'globals/global-partials';
 

package/src/scss/main.scss

@@ -26,6 +26,7 @@
 @import 'components/payments';//deep dependence
 @import 'components/notifications';//deep dependence
 @import 'components/popover-mini-basket';//deep dependence
+@import 'components/custom-slider';
 @import 'components/lines-group';//deep dependence
 @import 'components/autocomplete';//deep dependence
 @import 'components/card';//deep dependence

package/src/scss/partials/_header-critical.scss

@@ -266,6 +266,20 @@
   padding-right: 0;
 }
 
+button.header-minicart__btn {
+  background: none;
+  border: 0;
+  box-shadow: none;
+  outline: none;
+  cursor: pointer;
+
+  &:hover {
+    .header-right__link-title {
+      text-decoration: underline;
+    }
+  }
+}
+
 .header-minicart__btn-icon {
   vertical-align: top;
 }

package/src/scss/partials/_header.scss

@@ -288,6 +288,20 @@
   padding-right: 0;
 }
 
+button.header-minicart__btn {
+  background: none;
+  border: 0;
+  box-shadow: none;
+  outline: none;
+  cursor: pointer;
+
+  &:hover {
+    .header-right__link-title {
+      text-decoration: underline;
+    }
+  }
+}
+
 .header-shop-list {
   .icon {
     color: $white;