wickes-css2 2.111.0-complete-your-project.6 → 2.111.0-develop.1

package/src/scss/components/bloomreach/_complete-card.scss

@@ -1,402 +0,0 @@
-.complete-card {
-  position: relative;
-  width: 100%;
-  max-width: 100%;
-  overflow: visible;
-  background-color: $white;
-  border: 1px dashed $gray;
-  border-radius: 4px;
-  padding: 12px;
-  margin-bottom: 8px;
-
-  &--selected {
-    border: 1px solid $blue;
-  }
-
-  &__select {
-    position: absolute;
-    top: -15px;
-    left: 0;
-    z-index: 2;
-
-    .chb ins .fa-check {
-      box-sizing: border-box;
-    }
-  }
-
-  &__inner {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    gap: 12px;
-    width: 100%;
-    min-width: 0;
-    max-width: 100%;
-  }
-
-  &__img {
-    width: 154px;
-    max-width: 100%;
-    max-height: 100%;
-
-    &-wrap {
-      flex: 0 0 154px;
-      width: 154px;
-      height: 154px;
-      min-width: 0;
-      max-width: 100%;
-      margin-bottom: 0;
-    }
-  }
-
-  &__content {
-    display: flex;
-    flex: 1 1 auto;
-    flex-direction: column;
-    min-width: 0;
-    max-width: 100%;
-    padding-top: 24px;
-    overflow: visible;
-  }
-
-  &__header,
-  &__options,
-  &__bottom {
-    width: 100%;
-    min-width: 0;
-    max-width: 100%;
-  }
-
-  &__header {
-    overflow: hidden;
-  }
-
-  &__options {
-    overflow: visible;
-  }
-
-  &__bottom {
-    flex: 1;
-  }
-
-  &__title {
-    @include font-size(12);
-    @include line-height(16);
-    @include clamp-text(2);
-    font-weight: 500;
-    margin-bottom: 8px;
-    text-decoration: none;
-
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-
-  &__reviews {
-    display: flex;
-    align-items: center;
-    font-size: 0.75rem;
-    margin-bottom: 8px;
-
-    &-count {
-      display: inline-block;
-      margin-left: 6px;
-    }
-
-    .rating-bg {
-      color: $gray;
-      position: relative;
-
-      .fa-star {
-        margin-right: 0;
-      }
-    }
-
-    .rating-overlay {
-      color: $yellow;
-      position: absolute;
-      left: 0;
-      top: 0;
-      display: flex;
-    }
-
-    .star-overlay {
-      display: inline-block;
-      overflow: hidden;
-
-      & + .star-overlay {
-        margin-left: 3.3px;
-      }
-    }
-  }
-
-  &__count-stepper {
-    margin-top: 0;
-    margin-bottom: 12px;
-
-    .quantity-label {
-      display: none;
-      margin-right: 12px;
-      font-weight: 700;
-    }
-
-    .tbx_quantity {
-      border: 0;
-    }
-  }
-
-  &__price {
-    @include font-size(18);
-    @include line-height(18);
-    display: flex;
-    align-items: baseline;
-    font-weight: 700;
-    color: $blue-dark;
-    margin-bottom: 4px;
-    flex-wrap: wrap;
-
-    &_from {
-      @include font-size(14);
-      @include line-height(16);
-      padding-right: 4px;
-      white-space: nowrap;
-    }
-
-    &_sale {
-      color: $red;
-
-      .complete-card {
-        &__price-value {
-          @include font-size(14);
-          font-weight: 500;
-          color: $warm-grey;
-          text-decoration: line-through;
-          padding-right: 4px;
-        }
-      }
-    }
-
-    &__sale-price,
-    &-value {
-      margin-right: 4px;
-    }
-  }
-
-  &__vat-label {
-    @include font-size(12);
-    @include line-height(16);
-    font-weight: 500;
-    color: $blue-dark;
-    align-self: flex-end;
-  }
-
-  &__delivery {
-    @include font-size(12);
-    @include line-height(16);
-    font-weight: 400;
-    color: $squant;
-    margin-bottom: 0;
-  }
-
-  &__badge {
-    @include font-size(12);
-    @include line-height(16);
-    font-weight: 700;
-    margin-bottom: 0;
-    position: absolute;
-    top: 0;
-    right: 0;
-    z-index: $label-z-index;
-    color: $white;
-    padding: 4px 10px;
-    text-align: center;
-  }
-
-  &--skeleton {
-    .complete-card {
-      &__img {
-        width: 154px;
-        height: 154px;
-
-        &-wrap {
-          flex: 0 0 154px;
-          width: 154px;
-          height: 154px;
-        }
-      }
-
-      &__skeleton {
-        &-title {
-          height: 14px;
-          width: 80%;
-          margin-bottom: 6px;
-        }
-
-        &-title-short {
-          height: 14px;
-          width: 50%;
-          margin-bottom: 12px;
-        }
-
-        &-reviews {
-          height: 12px;
-          width: 40%;
-          margin-bottom: 12px;
-        }
-
-        &-stepper {
-          height: 32px;
-          width: 90px;
-          margin-bottom: 12px;
-        }
-
-        &-price {
-          height: 22px;
-          width: 60%;
-          margin-bottom: 6px;
-        }
-
-        &-delivery {
-          height: 12px;
-          width: 50%;
-        }
-      }
-    }
-  }
-}
-
-@include media-breakpoint-up(sm) {
-  .complete-card {
-    &__img {
-      width: 200px;
-
-      &-wrap {
-        flex: 0 0 200px;
-        width: 200px;
-        height: 200px;
-      }
-    }
-
-    &--skeleton {
-      .complete-card {
-        &__img {
-          width: 200px;
-          height: 200px;
-
-          &-wrap {
-            flex: 0 0 200px;
-            width: 200px;
-            height: 200px;
-          }
-        }
-      }
-    }
-  }
-}
-
-@include media-breakpoint-up(lg) {
-  .complete-card {
-    padding: 16px;
-    margin-bottom: 0;
-
-    &__inner {
-      flex-direction: column;
-      gap: 0;
-    }
-
-    &__img {
-      width: 154px;
-
-      &-wrap {
-        flex: 0 0 auto;
-        width: 154px;
-        height: 154px;
-        margin: 0 auto 12px;
-      }
-    }
-
-    &__content {
-      width: 100%;
-      padding-top: 0;
-    }
-
-    &__title {
-      @include font-size(14);
-      @include line-height(22);
-      margin-bottom: 8px;
-    }
-
-    &__reviews {
-      @include font-size(14);
-      margin-bottom: 8px;
-    }
-
-    &__count-stepper {
-      margin-bottom: 12px;
-
-      .quantity-label {
-        display: inline-block;
-      }
-    }
-
-    &__price {
-      @include font-size(24);
-      @include line-height(24);
-      margin-bottom: 8px;
-
-      &_from {
-        @include font-size(16);
-        @include line-height(24);
-      }
-
-      &_sale {
-        .complete-card {
-          &__price-value {
-            @include font-size(14);
-            @include line-height(24);
-          }
-        }
-      }
-    }
-
-    &__delivery {
-      @include font-size(12);
-      @include line-height(16);
-    }
-
-    &--skeleton {
-      .complete-card {
-        &__img {
-          width: 154px;
-          height: 154px;
-
-          &-wrap {
-            flex: 0 0 auto;
-            width: 154px;
-            height: 154px;
-          }
-        }
-      }
-    }
-  }
-}
-
-@media screen and (max-width: 375px) {
-  .complete-card {
-    padding: 12px;
-
-    &__inner {
-      gap: 12px;
-    }
-
-    &__img {
-      width: 126px;
-
-      &-wrap {
-        flex: 0 0 126px;
-        width: 126px;
-        height: 126px;
-      }
-    }
-  }
-}

package/src/scss/components/bloomreach/_complete-your-project.scss

@@ -1,207 +0,0 @@
-.complete-widget {
-  background: $gray-bg;
-  padding: 16px;
-
-  &__price {
-    display: flex;
-    align-items: flex-end;
-  }
-
-  &__vat-label {
-    @include font-size(12);
-    @include line-height(16);
-    margin-left: 4px;
-    font-weight: 500;
-    white-space: nowrap;
-    color: $blue-dark;
-    margin-bottom: 1px;
-  }
-
-  &__title {
-    margin-bottom: 16px;
-  }
-
-  &__divider {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 8px 0;
-    color: $blue-dark;
-    font-size: 1.5rem;
-  }
-
-  &__summary {
-    border: 1px solid $gray;
-    padding: 16px;
-    border-radius: 4px;
-
-    &--skeleton {
-      .complete-widget__total {
-        flex-direction: column;
-        align-items: flex-start;
-        margin-bottom: 16px;
-      }
-
-      .complete-widget__skeleton {
-        &-label {
-          height: 14px;
-          width: 80px;
-          margin-bottom: 8px;
-        }
-
-        &-price {
-          height: 28px;
-          width: 120px;
-        }
-
-        &-cta {
-          height: 48px;
-          width: 100%;
-          border-radius: 4px;
-        }
-
-        &-offer {
-          height: 12px;
-          width: 60%;
-          margin-top: 12px;
-        }
-      }
-    }
-  }
-
-  &__offer {
-    @include font-size(12);
-    @include line-height(16);
-    font-weight: 400;
-    margin-bottom: 0;
-    color: $gray-dark;
-  }
-
-  &__cta {
-    padding: 16px 0;
-  }
-
-  &__total {
-    display: flex;
-    align-items: baseline;
-    flex-wrap: wrap;
-
-    &-sale {
-      .complete-widget {
-        &__price-value {
-          @include font-size(18);
-          line-height: normal;
-          font-weight: 500;
-          color: $warm-grey;
-          text-decoration: line-through;
-          padding-right: 7px;
-          margin-bottom: 1px;
-        }
-
-        &__sale-price {
-          @include font-size(24);
-          @include line-height(24);
-          font-weight: 700;
-          color: $red;
-        }
-      }
-    }
-  }
-
-  &__price-value {
-    @include font-size(24);
-    @include line-height(24);
-    font-weight: 700;
-    color: $blue-dark;
-  }
-
-  &__label {
-    @include font-size(14);
-    @include line-height(22);
-    font-weight: 500;
-    color: $gray-dark;
-    padding-right: 8px;
-    text-wrap-mode: nowrap;
-  }
-}
-
-@include media-breakpoint-up(lg) {
-  .complete-widget {
-    padding: 24px;
-
-    &__wrapper {
-      display: flex;
-      align-items: stretch;
-      gap: 8px;
-    }
-
-    &__divider {
-      flex-shrink: 0;
-      padding: 0 3px;
-      align-self: center;
-    }
-
-    &__summary {
-      display: flex;
-      flex-direction: column;
-      align-items: end;
-      border: 0;
-      padding: 24px 0 0;
-
-      &-wrapper {
-        display: flex;
-        align-items: flex-start;
-        margin-bottom: 14px;
-      }
-
-      &--skeleton {
-        .complete-widget__total {
-          flex-direction: row;
-          align-items: baseline;
-          margin-bottom: 0;
-          margin-right: 24px;
-        }
-
-        .complete-widget__skeleton {
-          &-label {
-            margin-bottom: 0;
-            margin-right: 8px;
-          }
-
-          &-cta {
-            width: 260px;
-          }
-        }
-      }
-    }
-
-    &__total:not(.complete-widget__total-sale) {
-      .complete-widget {
-        &__price-value {
-          @include font-size(34);
-          @include line-height(34);
-          font-weight: 700;
-        }
-      }
-    }
-
-    &__total-sale {
-      .complete-widget {
-        &__sale-price {
-          @include font-size(34);
-          @include line-height(34);
-          font-weight: 700;
-        }
-      }
-    }
-
-    &__total {
-      margin-right: 24px;
-    }
-
-    &__cta {
-      width: 260px;
-      padding: 0;
-    }
-  }
-}