wickes-css2 2.111.0-why-not-add-refactor-fix.2 → 2.112.0-develop.1

package/src/scss/components/bloomreach/_reviews.scss

@@ -1,60 +0,0 @@
-.reviews {
-  display: flex;
-  align-items: center;
-  font-size: 0.75rem;
-  margin-bottom: 8px;
-
-  &-count {
-    @include font-size(12);
-    @include line-height(16);
-    color: $warm-grey;
-    display: inline-block;
-    margin-left: 3px;
-  }
-
-  .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;
-    }
-  }
-
-}
-
-.why-not-add {
-
-  .reviews {
-    margin-bottom: 7px;
-
-    .rating-bg {
-      .fa-star {
-        @include font-size(8.4);
-      }
-    }
-
-    .star-overlay {
-      & + .star-overlay {
-        margin-left: 3px;
-      }
-    }
-  }
-}

package/src/scss/components/bloomreach/_why-not-add-card.scss

@@ -1,212 +0,0 @@
-.why-not-add-card {
-  display: flex;
-  gap: 8px;
-  padding: 12px;
-  border: 1px solid $gray-border;
-  border-radius: 4px;
-  background-color: $white;
-
-  &__image {
-    display: block;
-    width: 68px;
-    height: 68px;
-    object-fit: cover;
-  }
-
-  &__content {
-    display: flex;
-    flex: 1 1 auto;
-    flex-direction: column;
-    gap: 2px;
-    min-width: 0;
-  }
-
-  &__title {
-    @include font-size(14);
-    @include line-height(22);
-
-    display: -webkit-box;
-    overflow: hidden;
-    color: $blue;
-    font-weight: 500;
-    text-decoration: none;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-
-    &:hover {
-      color: $blue-darker;
-      text-decoration: underline;
-    }
-  }
-
-  &__bottom {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-  }
-
-  &__price-wrap {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: baseline;
-    min-width: 0;
-    padding-right: 8px;
-    gap: 4px;
-  }
-
-  &__price {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: flex-end;
-    gap: 5px;
-  }
-
-  &__was-price {
-    @include font-size(14);
-    @include line-height(15);
-
-    color: $warm-grey;
-    font-weight: 500;
-    text-decoration: line-through;
-    white-space: nowrap;
-  }
-
-  &__regular-price,
-  &__sale-price {
-    @include font-size(18);
-    @include line-height(18);
-
-    color: $blue-dark;
-    font-weight: 700;
-    white-space: nowrap;
-  }
-
-  &__sale-price {
-    color: $red;
-  }
-
-  &__vat-label,
-  &__delivery {
-    @include font-size(12);
-    @include line-height(15);
-
-    color: $squant;
-  }
-
-  &__vat-label {
-    color: $blue-dark;
-    font-weight: $headings-font-weight;
-  }
-
-  &__delivery {
-    width: 100%;
-  }
-
-  .btn {
-    display: flex;
-    align-self: flex-end;
-    align-items: center;
-    justify-content: center;
-    min-width: 40px;
-    width: 40px;
-    height: 40px;
-    box-sizing: border-box;
-    border: 1px solid $green;
-    border-radius: 3px;
-    background-color: $green;
-    color: $white;
-    cursor: pointer;
-
-    &:hover {
-      background-color: $white;
-      color: $green;
-    }
-
-    &--loading {
-      background-color: $green;
-      color: $white;
-      pointer-events: none;
-    }
-  }
-
-  &__cta-icon {
-    font-size: 18px;
-  }
-
-  &__loader {
-    .loader-path {
-      stroke: $white;
-    }
-  }
-
-  &--skeleton {
-    display: grid;
-    grid-template-columns: 68px minmax(0, 1fr) 40px;
-    grid-template-rows: 14px 14px 12px 18px 15px;
-    gap: 6px 8px;
-    align-items: start;
-
-    .why-not-add-card {
-      &__image {
-        grid-column: 1;
-        grid-row: 1 / 6;
-        width: 68px;
-        height: 68px;
-      }
-
-      &__skeleton {
-        &-title {
-          grid-column: 2 / 4;
-          grid-row: 1;
-          width: 80%;
-          height: 14px;
-        }
-
-        &-title-short {
-          grid-column: 2 / 3;
-          grid-row: 2;
-          width: 55%;
-          height: 14px;
-        }
-
-        &-reviews {
-          grid-column: 2 / 3;
-          grid-row: 3;
-          width: 82px;
-          height: 12px;
-        }
-
-        &-price {
-          grid-column: 2 / 3;
-          grid-row: 4;
-          width: 64px;
-          height: 18px;
-        }
-
-        &-delivery {
-          grid-column: 2 / 3;
-          grid-row: 5;
-          width: 92px;
-          height: 12px;
-        }
-
-        &-cta {
-          grid-column: 3;
-          grid-row: 4 / 6;
-          align-self: end;
-          width: 40px;
-          height: 40px;
-          border-radius: 3px;
-        }
-      }
-    }
-  }
-}
-
-@media screen and (max-width: 375px) {
-  .why-not-add-card {
-    &__vat-label {
-      width: 100%;
-    }
-  }
-}

package/src/scss/components/bloomreach/_why-not-add.scss

@@ -1,143 +0,0 @@
-.why-not-add {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding: 21px 0 12px;
-  margin-bottom: -19px;
-
-  &__header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  &__title {
-    @include font-size(14);
-    @include line-height(22);
-
-    margin: 0;
-    font-weight: 700;
-  }
-
-  &__arrows {
-    display: flex;
-    align-items: center;
-    gap: 30px;
-  }
-
-  &__arrow {
-    @include font-size(24);
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 15px;
-    height: 24px;
-    padding: 0;
-    border: 0;
-    background: transparent;
-    color: $blue;
-    cursor: pointer;
-
-    &--disabled,
-    &.swiper-button-disabled {
-      color: $warm-grey;
-      cursor: default;
-      pointer-events: none;
-    }
-
-    &:focus {
-      outline: none;
-    }
-
-    &:focus-visible {
-      outline: 2px solid $blue;
-      outline-offset: 3px;
-    }
-  }
-
-  &__slider {
-    width: 100%;
-  }
-
-  &__slide {
-    height: auto;
-  }
-
-  &__pagination {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 6px;
-    min-height: 6px;
-  }
-
-  &__pagination-item {
-    cursor: pointer;
-    appearance: none;
-    display: block;
-    position: relative;
-    width: 6px;
-    height: 6px;
-    padding: 0;
-    border: 0;
-    border-radius: 8px;
-    background-color: $warm-grey;
-    line-height: 0;
-    transition-property: width, background-color;
-    transition-duration: 0.25s;
-    transition-timing-function: ease;
-    outline: none;
-
-    &:before {
-      content: '';
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      width: 200%;
-      height: 200%;
-      z-index: $dropdown-z-index;
-    }
-
-    &--active {
-      width: 24px;
-      background-color: $blue;
-      cursor: default;
-      z-index: $label-z-index;
-    }
-
-    &:focus {
-      outline: none;
-    }
-
-    &:focus-visible {
-      outline: 2px solid $blue;
-      outline-offset: 2px;
-    }
-  }
-
-  &--skeleton {
-    gap: 12px;
-
-    .why-not-add {
-      &__header {
-        min-height: 22px;
-      }
-
-      &__skeleton-title {
-        width: 112px;
-        height: 14px;
-      }
-
-      &__skeleton-cards {
-        width: 100%;
-        overflow: hidden;
-      }
-    }
-  }
-}
-
-[data-why-not-add-widget] + .pdp-price__quantity-calculator {
-  margin-top: 20px
-}