wickes-css2 2.98.0-develop.7 → 2.98.0-develop.9

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

@@ -1,541 +0,0 @@
-@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;
-      border: none;
-      background: none;
-
-      &__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;
-      border: none;
-
-      & + .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;
-        margin-bottom: 0;
-      }
-
-      .item {
-        font-size: .75rem;
-        font-weight: 400;
-        line-height: 1rem;
-        color: $squant;
-
-        .value {
-          color: $gray-dark;
-          margin-left: 0;
-          font-weight: 400;
-        }
-
-        & + .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;
-        }
-      }
-
-      &.product-card__content {
-        margin-top: 0;
-        padding: 0;
-      }
-    }
-
-    &.popover-mini-basket__cards-holder {
-      .card {
-        margin-bottom: 0;
-
-        & + .card {
-          border-top: 1px solid $gray-light;
-        }
-      }
-    }
-  }
-
-  &__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;
-
-      &--scroll {
-        margin-bottom: 120px;
-      }
-    }
-
-    .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;
-
-        &--scroll {
-          margin-bottom: 132px;
-        }
-      }
-    }
-  }
-}
-
-@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;
-    }
-  }
-}