wickes-css2 2.107.0-ripple.2 → 2.107.0-ripple.21

package/src/scss/components/_notifications.scss

@@ -15,7 +15,7 @@
     position: absolute;
     right: 8px;
     top: 8px;
-    font-size: .875rem;
+    font-size: 0.875rem;
     color: $warm-grey;
     cursor: pointer;
 
@@ -28,7 +28,7 @@
     position: absolute;
     right: 8px;
     top: 8px;
-    font-size: .875rem;
+    font-size: 0.875rem;
     color: $warm-grey;
     cursor: pointer;
   }
@@ -130,14 +130,14 @@
 
     .title {
       font-weight: 500;
-      font-size: .875rem;
+      font-size: 0.875rem;
       line-height: 1.5rem;
       margin-bottom: 0;
     }
 
     .description {
       font-weight: 400;
-      font-size: .875rem;
+      font-size: 0.875rem;
       line-height: 1.375rem;
       margin-bottom: 0;
     }
@@ -149,7 +149,7 @@
     min-height: 0;
     max-height: 0;
     overflow: hidden;
-    transition: max-height .15s ease-out;
+    transition: max-height 0.15s ease-out;
 
     .notification-item {
       margin: 0;
@@ -186,3 +186,84 @@
     cursor: pointer;
   }
 }
+
+.toast-container {
+  background-color: $white;
+  position: fixed;
+  left: 50%;
+  bottom: 48px;
+  z-index: $zindex-modal;
+  max-width: 640px;
+  transform: translate(-50%, calc(100% + 48px));
+  animation: toast-slide-up 0.25s ease-out forwards;
+}
+
+.toast {
+  @include font-size(14);
+  @include line-height(22);
+
+  display: flex;
+  align-items: center;
+  min-height: 48px;
+  margin-bottom: 0 !important;
+  padding: 8px;
+  border: 5px solid $white;
+  box-shadow: none;
+  font-weight: 500;
+
+  .notification__icon {
+    @include font-size(16);
+
+    position: static;
+    display: flex;
+    flex: 0 0 24px;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    margin-right: 8px;
+    transform: none;
+  }
+
+  &.notification_success {
+    background-color: rgba($green, 0.05);
+
+    .notification__icon {
+      color: $green;
+    }
+  }
+
+  &.notification_warning {
+    background-color: rgba($orange, 0.05);
+
+    .notification__icon {
+      color: $yellow;
+    }
+  }
+
+  &.notification_error {
+    background-color: rgba($red, 0.05);
+
+    .notification__icon {
+      color: $red;
+    }
+  }
+}
+
+@keyframes toast-slide-up {
+  from {
+    transform: translate(-50%, calc(100% + 48px));
+  }
+
+  to {
+    transform: translate(-50%, 0);
+  }
+}
+
+@include media-breakpoint-down(sm) {
+  .toast-container {
+    bottom: 48px;
+    width: max-content;
+    max-width: calc(100% - 32px);
+  }
+}

package/src/scss/components/_notify-me-modal.scss

@@ -0,0 +1,139 @@
+.modal-notify-me {
+  .modal-dialog {
+    height: 100%;
+    margin: 0 auto;
+    max-width: 100%;
+  }
+
+  &.modal-box_wide {
+    .modal-box__columns {
+      max-width: 520px;
+      padding: 0;
+    }
+  }
+
+  .modal-box__inner-row {
+    margin: 0;
+
+    .modal-box__inner-columns {
+      padding: 0;
+      max-width: 100%;
+      flex: 0 0 100%;
+    }
+  }
+
+  .modal-header {
+    padding: 16px 35px 16px 24px;
+
+    .modal-title {
+      @include font-size(18);
+      @include line-height(24);
+      color: $gray-dark;
+      font-weight: 700;
+      display: flex;
+      align-items: center;
+      gap: 14px;
+
+      .icon-wrap {
+        width: 40px;
+        height: 40px;
+      }
+
+      .icon {
+        @include font-size(30);
+        color: $blue;
+        height: auto;
+      }
+    }
+
+    .close {
+      opacity: 1;
+      outline: 0;
+      right: 10px;
+    }
+
+    &:after {
+      left: 0;
+      right: 0;
+    }
+  }
+
+  .modal-body {
+    padding: 24px;
+
+    .form-row__label {
+      margin-bottom: 8px;
+    }
+
+    .notify-me-form {
+      &__note {
+        @include font-size(12);
+        @include line-height(16);
+        color: $squant;
+        font-weight: 400;
+        margin-bottom: 0;
+      }
+
+      &__ctas {
+        margin-top: 40px;
+        display: flex;
+        gap: 16px;
+
+        & > div {
+          display: contents;
+        }
+      }
+    }
+
+    .notify-me-result {
+      display: flex;
+      align-items: center;
+      gap: 15px;
+
+      &__img {
+        width: 64px;
+        height: 64px;
+        object-fit: cover;
+      }
+
+      &__title {
+        @include font-size(14);
+        @include line-height(22);
+        font-weight: 700;
+      }
+
+      & + .btn--notify-close {
+        margin-top: 40px;
+      }
+    }
+  }
+}
+
+@include media-breakpoint-down(xl) {
+  .modal-notify-me {
+    height: auto;
+    margin: 40px 16px 0;
+
+    &.modal-box_full .modal-box__inner-row {
+      margin: 0;
+    }
+
+    .modal-body {
+      .form-row {
+        padding: 0;
+        margin: 0 0 16px;
+      }
+
+      .form-row__label,
+      .form-row__field,
+      .form-row__error {
+        padding: 0;
+      }
+    }
+
+    .modal-body .notify-me-form__ctas,
+    .notify-me-result .btn--notify-close {
+      margin-top: 32px;
+    }
+  }
+}

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

@@ -1,6 +1,6 @@
 @import '../helpers/helpers';
 
-$android-offset:   60px !default;
+$android-offset: 60px !default;
 $ios-notch-offset: 80px !default;
 
 .summary {
@@ -9,7 +9,7 @@ $ios-notch-offset: 80px !default;
     background: $gray-bg;
     margin: 0 auto;
     z-index: $summary-aside;
-    box-shadow: 4px 4px 16px rgba(0, 0, 0, .25);
+    box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.25);
 
     & .form-row__col-btn {
       padding-right: 0;
@@ -55,7 +55,7 @@ $ios-notch-offset: 80px !default;
 
     &-message {
       padding-bottom: 20px;
-      font-size: .75rem;
+      font-size: 0.75rem;
     }
 
     &-main {
@@ -93,7 +93,7 @@ $ios-notch-offset: 80px !default;
     align-items: center;
     width: 24px;
     height: 24px;
-    transition: transform .3s ease;
+    transition: transform 0.3s ease;
     transform: rotate(180deg);
 
     &-up,
@@ -149,7 +149,7 @@ $ios-notch-offset: 80px !default;
   }
 
   .checkout-widget__item-vat {
-    font-size: .875rem;
+    font-size: 0.875rem;
     margin: 0;
     padding: 0;
   }
@@ -158,11 +158,25 @@ $ios-notch-offset: 80px !default;
     text-align: right;
   }
 
-  .checkout-widget__item-cc, .checkout-widget__item-delivery {
+  .checkout-widget__item-cc,
+  .checkout-widget__item-delivery {
     font-size: 1rem;
     margin-top: 5px;
   }
 
+  .checkout-widget__item-delivery-cost-message {
+    margin-top: 4px;
+    justify-content: flex-end;
+
+    #order-delivery-cost-message {
+      @include font-size(10);
+      @include line-height(12);
+
+      font-weight: 700;
+      color: $squant;
+    }
+  }
+
   .checkout-widget__total {
     display: flex;
     justify-content: space-between;
@@ -183,7 +197,7 @@ $ios-notch-offset: 80px !default;
     right: 0;
     overflow: hidden;
     display: block !important;
-    transition: height .3s ease-in-out;
+    transition: height 0.3s ease-in-out;
     max-height: calc(100vh - 177px);
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
@@ -218,12 +232,12 @@ $ios-notch-offset: 80px !default;
   .collapsing {
     height: 0;
     overflow: hidden;
-    transition: height .3s ease-in-out;
+    transition: height 0.3s ease-in-out;
   }
 
   .collapse.show {
     height: auto;
-    transition: height .3s ease-in-out;
+    transition: height 0.3s ease-in-out;
   }
 }
 
@@ -233,7 +247,7 @@ $ios-notch-offset: 80px !default;
   left: 0;
   right: 0;
   z-index: $summary-mobile-bar;
-  transition: transform .3s ease;
+  transition: transform 0.3s ease;
 }
 
 .summary__mobile-order {
@@ -245,7 +259,7 @@ $ios-notch-offset: 80px !default;
   height: 44px;
   cursor: pointer;
   color: $white;
-  transition: transform .3s ease;
+  transition: transform 0.3s ease;
 }
 
 .summary:not(.summary--mobile) {
@@ -316,7 +330,6 @@ $ios-notch-offset: 80px !default;
           display: none;
         }
       }
-
     }
 
     .checkout-widget.checkout-widget_order-summary {

package/src/scss/components/_package-card.scss

@@ -0,0 +1,63 @@
+.package-card {
+  display: grid;
+  grid-template-rows: subgrid;
+  grid-row: span 5;
+  gap: 0;
+
+  border: 1px solid $gray;
+  border-radius: 4px;
+
+  &.has-stickers-row {
+    grid-row: span 6;
+
+    .package-card__content {
+      grid-row: span 5;
+    }
+  }
+
+  &__image {
+    width: 100%;
+  }
+
+  &__content {
+    display: grid;
+    grid-template-rows: subgrid;
+    grid-row: span 4;
+    row-gap: 12px;
+    padding: 16px;
+  }
+
+  &__title {
+    margin-bottom: 0;
+  }
+
+  &__usp {
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+
+    margin-bottom: 0;
+    padding-left: 0;
+    list-style: none;
+
+    &-item {
+      display: flex;
+      align-items: baseline;
+      column-gap: 8px;
+    }
+  }
+
+  &__icon {
+    font-size: 1rem;
+    flex-shrink: 0;
+  }
+
+  &__price,
+  &__button {
+    align-self: end;
+  }
+
+  &__stickers {
+    min-width: 0;
+  }
+}

package/src/scss/components/_package-plp.scss

@@ -0,0 +1,88 @@
+.package-plp {
+  margin-bottom: 24px;
+
+  &__cards {
+    display: flex;
+    flex-direction: column;
+    row-gap: 16px;
+    margin-top: 16px;
+    margin-bottom: 32px;
+
+    .card-product-banner,
+    .card-sponsor-banner,
+    .card-bloomreach-media-banner {
+      flex: unset;
+      max-width: initial;
+      width: 100%;
+      margin-bottom: 0;
+      padding: 0;
+      grid-row: span 5;
+      align-self: start;
+
+      &.has-stickers-row {
+        grid-row: span 6;
+      }
+
+      &__link {
+        padding: 0;
+        display: block;
+        height: max-content;
+      }
+
+      &__picture {
+        display: block;
+      }
+
+      &__image {
+        display: block;
+        width: 100%;
+      }
+    }
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .package-plp {
+    &__container {
+      display: flex;
+      column-gap: 32px;
+    }
+
+    &__search-filter {
+      min-width: 210px;
+    }
+
+    &__content {
+      flex-basis: 100%;
+    }
+
+    &__cards {
+      row-gap: 24px;
+      margin-top: 24px;
+    }
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .package-plp {
+    margin-bottom: 40px;
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  .package-plp {
+    &__cards {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 24px;
+    }
+  }
+}
+
+@include media-breakpoint-up(xl) {
+  .package-plp {
+    &__cards {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+}

package/src/scss/components/_pdp-action-v2-critical.scss

@@ -12,6 +12,18 @@
   }
 }
 
+.pdp--ripple {
+  .pdp__fulfilment {
+    display: block;
+  }
+
+  .pdp__aside {
+    .pdp__fulfilment {
+      display: none;
+    }
+  }
+}
+
 @include media-breakpoint-up(md) {
   .pdp {
     &__fulfilment {

package/src/scss/components/_pdp-action-v2.scss

@@ -12,6 +12,18 @@
   }
 }
 
+.pdp--ripple {
+  .pdp__fulfilment {
+    display: block;
+  }
+
+  .pdp__aside {
+    .pdp__fulfilment {
+      display: none;
+    }
+  }
+}
+
 @include media-breakpoint-up(md) {
   .pdp {
     &__fulfilment {

package/src/scss/components/_postcode-checker.scss

@@ -0,0 +1,115 @@
+.postcode-checker {
+  padding: 16px;
+  background-color: $white;
+  border: 1px solid $gray;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-areas:
+  "title"
+  "field"
+  "error"
+  "action";
+  gap: 8px 16px;
+
+  &__title {
+    grid-area: title;
+    margin-bottom: 8px;
+  }
+
+  &__field {
+    grid-area: field;
+  }
+
+  &__action {
+    grid-area: action;
+    margin-top: 8px;
+  }
+
+  &__input {
+    display: block;
+    width: 100%;
+    outline: none;
+  }
+
+  &__error {
+    grid-area: error;
+    display: none;
+    color: $red;
+    margin-bottom: 0;
+    line-height: 1rem;
+    font-size: .75rem;
+  }
+
+  &--error {
+    .postcode-checker__input {
+      border-color: $red;
+    }
+
+    .postcode-checker__error {
+      display: block;
+    }
+  }
+
+  &__button {
+    margin-top: 0;
+  }
+
+  &--mobile-only {
+    display: grid;
+  }
+
+  &--desktop-only {
+    display: none;
+  }
+}
+
+@include media-breakpoint-up(sm) {
+  .postcode-checker {
+    grid-template-columns: 1fr 1fr;
+    grid-template-areas:
+    "title  title"
+    "field  action"
+    "error  error";
+
+    &__action {
+      margin-top: 0;
+    }
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .postcode-checker {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+    "title"
+    "field"
+    "error"
+    "action";
+
+    &__action {
+      margin-top: 8px;
+    }
+
+    &--mobile-only {
+      display: none;
+    }
+
+    &--desktop-only {
+      display: grid;
+    }
+  }
+}
+
+@include media-breakpoint-up(xl) {
+  .postcode-checker {
+    grid-template-columns: 1fr 1fr;
+    grid-template-areas:
+    "title  title"
+    "field  action"
+    "error  error";
+
+    &__action {
+      margin-top: 0;
+    }
+  }
+}

package/src/scss/components/_price-badges-critical.scss

@@ -4,6 +4,16 @@
       width: 140px;
       padding: 0;
 
+      &.pdp__badges--static .pdp__badge {
+        min-width: auto;
+        padding: 4px 12px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: 0.875rem;
+        line-height: 1.375rem;
+      }
+
       &-cashback {
         width: auto;
         padding: 0 10px;
@@ -35,7 +45,6 @@
 
         & .products-list-v2__badge {
           background: $yellow;
-
         }
       }