wickes-css2 2.113.0-develop.2 → 2.113.0-develop.21

package/src/scss/components/kitchen/_strip-stickers.scss

@@ -0,0 +1,46 @@
+.strip-stickers {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+
+  .strip-sticker {
+    padding: 4px 12px;
+    font-size: 0.875rem;
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &--green {
+      background: $green-light;
+    }
+
+    &--yellow {
+      background: $yellow;
+    }
+
+    &--blue {
+      background: $blue-badge;
+    }
+
+    &--blue-dark {
+      background: $pacific-depths;
+    }
+
+    &--red {
+      background: $red;
+    }
+
+    &--text-gray {
+      color: $gray-dark;
+    }
+
+    &--text-white {
+      color: $white;
+    }
+  }
+
+  &--right {
+    justify-content: flex-end;
+  }
+}

package/src/scss/components/my-account/_active-orders.scss

@@ -168,11 +168,11 @@
     &__item {
       display: grid;
       grid-template-areas:
-      'header viewMore'
-      'orderDetails orderDetails'
-      'consignmentInfo consignmentInfo'
-      'paymentStatus paymentStatus'
-      'shipment shipment';
+        'header viewMore'
+        'orderDetails orderDetails'
+        'consignmentInfo consignmentInfo'
+        'paymentStatus paymentStatus'
+        'shipment shipment';
 
       .order-header {
         flex-direction: row-reverse;
@@ -235,10 +235,10 @@
     &__item {
       padding: 24px;
       grid-template-areas:
-      'header consignmentInfo viewMore'
-      'orderDetails orderDetails orderDetails'
-      'paymentStatus paymentStatus paymentStatus'
-      'shipment shipment shipment';
+        'header consignmentInfo viewMore'
+        'orderDetails orderDetails orderDetails'
+        'paymentStatus paymentStatus paymentStatus'
+        'shipment shipment shipment';
       grid-template-columns: auto auto 1fr;
       align-items: center;
     }

package/src/scss/components/price-block-v2-critical.scss

@@ -3,6 +3,27 @@
 .pdp-price-container {
   position: relative;
 
+  .pdp__badges-wrapper {
+    &:has(.pdp__badges--static) {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: end;
+      gap: 8px;
+      margin: -20px 0 10px;
+      background: none;
+    }
+
+    .pdp__badges {
+      &--static {
+        position: static;
+        width: fit-content;
+        max-width: 100%;
+        min-width: auto;
+        margin-right: 0;
+      }
+    }
+  }
+
   &__badges.pdp-price-container__badges {
     @include price-block-badge;
 
@@ -67,3 +88,44 @@
     padding-bottom: $btn-padding-y;
   }
 }
+
+.pdp--ripple {
+  .pdp-price {
+    &__value {
+      margin-bottom: 16px;
+    }
+
+    &__message-wrapper {
+      display: flex;
+      flex-direction: column;
+      row-gap: 8px;
+      padding: 12px 0;
+      margin: 16px 0;
+      border-bottom: 1px solid $gray;
+      border-top: 1px solid $gray;
+    }
+
+    &__delivery-message {
+      font-weight: 500;
+    }
+
+    &__control-holder {
+      padding-top: 0;
+    }
+
+    & .main-price__vat {
+      color: $blue-dark;
+    }
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .pdp-price-container {
+    .pdp__badges-wrapper {
+      &:has(.pdp__badges--static) {
+        margin-right: -20px;
+        margin-left: -20px;
+      }
+    }
+  }
+}

package/src/scss/components/price-block-v2.scss

@@ -3,6 +3,27 @@
 .pdp-price-container {
   position: relative;
 
+  .pdp__badges-wrapper {
+    &:has(.pdp__badges--static) {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: end;
+      gap: 8px;
+      margin: -20px 0 10px;
+      background: none;
+    }
+
+    .pdp__badges {
+      &--static {
+        position: static;
+        width: fit-content;
+        max-width: 100%;
+        min-width: auto;
+        margin-right: 0;
+      }
+    }
+  }
+
   &__badges.pdp-price-container__badges {
     @include price-block-badge;
 
@@ -104,3 +125,44 @@
     }
   }
 }
+
+.pdp--ripple {
+  .pdp-price {
+    &__value {
+      margin-bottom: 16px;
+    }
+
+    &__message-wrapper {
+      display: flex;
+      flex-direction: column;
+      row-gap: 8px;
+      padding: 12px 0;
+      margin: 16px 0;
+      border-bottom: 1px solid $gray;
+      border-top: 1px solid $gray;
+    }
+
+    &__delivery-message {
+      font-weight: 500;
+    }
+
+    &__control-holder {
+      padding-top: 0;
+    }
+
+    & .main-price__vat {
+      color: $blue-dark;
+    }
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .pdp-price-container {
+    .pdp__badges-wrapper {
+      &:has(.pdp__badges--static) {
+        margin-right: -20px;
+        margin-left: -20px;
+      }
+    }
+  }
+}

package/src/scss/helpers/helpers-pdp-critical/_helpers-critical-pdp.scss

@@ -26,11 +26,12 @@
   }
 }
 
-@function str-replace($string, $search, $replace: "") {
+@function str-replace($string, $search, $replace: '') {
   $index: str-index($string, $search);
 
   @if $index {
-    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+    @return str-slice($string, 1, $index - 1) + $replace +
+      str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
   }
 
   @return $string;
@@ -50,19 +51,19 @@
   }
 }
 
-@function color($key: "blue") {
+@function color($key: 'blue') {
   @return map-get($colors, $key);
 }
 
-@function theme-color($key: "primary") {
+@function theme-color($key: 'primary') {
   @return map-get($theme-colors, $key);
 }
 
-@function gray($key: "100") {
+@function gray($key: '100') {
   @return map-get($grays, $key);
 }
 
-@function theme-color-level($color-name: "primary", $level: 0) {
+@function theme-color-level($color-name: 'primary', $level: 0) {
   $color: theme-color($color-name);
   $color-base: if($level > 0, #000, #fff);
   $level: abs($level);
@@ -72,7 +73,11 @@
 //functions import
 
 //mixins import
-@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
+@function breakpoint-next(
+  $name,
+  $breakpoints: $grid-breakpoints,
+  $breakpoint-names: map-keys($breakpoints)
+) {
   $n: index($breakpoint-names, $name);
   @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
 }
@@ -88,7 +93,7 @@
 }
 
 @function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
-  @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
+  @return if(breakpoint-min($name, $breakpoints) == null, '', '-#{$name}');
 }
 // sass-lint:enable-all
 

package/src/scss/libs/_bootstrap-extracted.scss

@@ -120,22 +120,27 @@ h1,
 .h1 {
   font-size: $h1-font-size;
 }
+
 h2,
 .h2 {
   font-size: $h2-font-size;
 }
+
 h3,
 .h3 {
   font-size: $h3-font-size;
 }
+
 h4,
 .h4 {
   font-size: $h4-font-size;
 }
+
 h5,
 .h5 {
   font-size: $h5-font-size;
 }
+
 h6,
 .h6 {
   font-size: $h6-font-size;

package/src/scss/main.scss

@@ -94,6 +94,7 @@
 @import 'components/checkout-chip';
 @import 'components/checkout-payment-repayment-terms';
 @import 'components/checkout-voucher-remove-modal';
+@import 'components/heavy-banners';
 
 // Pages
 @import 'pages/contact-us';

package/src/scss/pages/_checkout_delivery-details.scss

@@ -4,61 +4,26 @@
   border: 1px solid $gray;
   width: 100%;
   max-width: 100%;
-  margin: 0 15px 30px;
-  padding: 15px 0;
+  padding: 16px;
 
   .product-oos-inner {
-    padding: 0 50px;
-
-    .order-line:first-of-type {
-      border-top: 0;
+    .row {
+      margin: 0;
     }
 
-    .order-line__info {
-      a {
-        color: $blue;
-        text-decoration: underline;
-      }
+    .content {
+      padding: 0;
 
-      a:hover {
-        color: $blue-dark;
+      & > p:last-child {
+        margin-bottom: 0;
       }
     }
-
-    p {
-      display: inline-block;
-      margin-right: 20px;
-    }
-
-    .fa-question-circle {
-      color: $blue;
-      font-size: 1.2rem;
-      display: inline-block;
-    }
-
-    .btn {
-      color: $white;
-      position: absolute;
-      bottom: 15px;
-      width: calc(100% - 30px);
-    }
-
-    .btn-notify {
-      bottom: 70px;
-
-      &:focus {
-        color: $blue-dark;
-      }
-    }
-
-    .btn:hover {
-      color: inherit;
-    }
   }
 }
 
 .component-date-selection {
   padding-top: 0;
+  padding-bottom: 16px;
 }
 
 .delivery-details__payment-details {
@@ -202,10 +167,18 @@
 }
 
 @include media-breakpoint-up(md) {
+  .delivery-details-product-oos {
+    padding: 24px;
+  }
+
   .delivery-details__payment-details_mobile {
     display: none;
   }
 
+  .component-date-selection {
+    padding-bottom: 24px;
+  }
+
   .delivery-details-option {
     &__contact-details {
       .your-contact-details {
@@ -281,56 +254,7 @@
   }
 }
 
-@include media-breakpoint-down(lg) {
-  .delivery-details-product-oos {
-    .product-oos-inner {
-      padding: 0 30px;
-
-      .content {
-        width: 100%;
-        flex: 100%;
-        max-width: 100%;
-
-        p {
-          width: calc(90% - 20px);
-          float: left;
-        }
-
-        .icon-info-component {
-          float: right;
-          width: 10%;
-          text-align: center;
-          margin-top: 5px;
-        }
-
-        .order-line:first-of-type {
-          clear: both;
-        }
-      }
-
-      .right-aside {
-        width: 100%;
-        flex: 100%;
-        max-width: 100%;
-        text-align: center;
-
-        .btn {
-          position: relative;
-          bottom: auto;
-          max-width: 280px;
-        }
-      }
-    }
-  }
-}
-
 @include media-breakpoint-down(md) {
-  .delivery-details-product-oos {
-    border: 0;
-    border-top: 2px solid $gray;
-    padding-top: 20px;
-  }
-
   .delivery-details-option {
     &__delivery-info {
       flex-direction: column;
@@ -359,18 +283,6 @@
 }
 
 @include media-breakpoint-down(sm) {
-  .delivery-details-product-oos {
-    .product-oos-inner {
-      .btn-notify {
-        margin-bottom: 1rem;
-      }
-    }
-  }
-
-  .component-date-selection {
-    padding-bottom: 20px;
-  }
-
   .delivery-details__payment-details {
     display: none;
   }

package/src/scss/pages/iframe-paypage.scss

@@ -2,7 +2,9 @@
 
 @font-face {
   font-family: Roboto;
-  src: url('../fonts/Roboto-Regular.woff2') format("woff2"), url('../fonts/Roboto-Regular.woff') format("woff");
+  src:
+    url('../fonts/Roboto-Regular.woff2') format('woff2'),
+    url('../fonts/Roboto-Regular.woff') format('woff');
   font-weight: 500;
   font-style: normal;
 }
@@ -294,7 +296,7 @@ label.labelError {
 
 #expiryYearLabel:after {
   font-size: 16px;
-  content: "/";
+  content: '/';
 }
 
 #issue {
@@ -318,7 +320,7 @@ label.labelError {
 }
 
 #cscSection:after {
-  content: "";
+  content: '';
   width: 38%;
   height: 51px;
   display: block;
@@ -341,11 +343,7 @@ label.labelError {
   border-color: #626d75;
   background-color: #eee !important;
   background-image: linear-gradient(bottom, #f5a30d, #ffd786 82%) !important;
-  background-image: -ms-linear-gradient(
-    bottom,
-    #f5a30d 0,
-    #ffd786 82%
-  ) !important;
+  background-image: -ms-linear-gradient(bottom, #f5a30d 0, #ffd786 82%) !important;
   background-image: -webkit-gradient(
     linear,
     left bottom,
@@ -853,7 +851,7 @@ span#amount {
 }
 
 #confirmCheck2Label:after {
-  content: "";
+  content: '';
   width: 15px;
   height: 15px;
   position: relative;
@@ -894,7 +892,7 @@ textarea {
 }
 
 #cardNumberHelpPanel:before {
-  content: "*";
+  content: '*';
   display: block;
 }
 
@@ -915,7 +913,7 @@ textarea {
   position: relative;
 }
 
-input[type="radio"] {
+input[type='radio'] {
   margin: 1em 0.25em;
 }