wickes-css2 2.103.0-develop.1 → 2.103.0-develop.10

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

@@ -80,6 +80,19 @@
     }
   }
 
+  &__notifications {
+    &:has(.notification) {
+      margin-top: 16px;
+    }
+
+    .notification:only-child {
+      @include font-size(14);
+      @include line-height(24);
+      margin-bottom: 0;
+      border-width: 1px;
+    }
+  }
+
   &__message {
     margin-top: 8px;
     display: flex;
@@ -159,6 +172,32 @@
     &__details {
       flex: 1;
 
+      &-header {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        grid-gap: 8px;
+
+        .btn--remove {
+          min-width: 24px;
+          padding: 4px;
+          background: 0 0;
+          border: none;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          .remove-icon {
+            color: $blue;
+            font-size: 1rem;
+          }
+        }
+      }
+
+      &-body {
+        margin-top: 4px;
+      }
+
       .item,
       .price {
         margin-bottom: 0;
@@ -190,8 +229,8 @@
       }
 
       .price {
-        @include font-size(18);
-        @include line-height(24);
+        @include font-size(16);
+        @include line-height(20);
         margin-top: 8px;
         font-weight: 700;
         color: $blue-dark;
@@ -201,23 +240,88 @@
           @include line-height(16);
           font-weight: 500;
         }
+
+        .product-card__price-value {
+          font-size: inherit;
+          line-height: inherit;
+        }
       }
 
       &.product-card__content {
         margin-top: 0;
         padding: 0;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+      }
+    }
+
+    &__quantity-control {
+      display: flex;
+      align-items: center;
+      margin-top: 8px;
+
+      .quantity {
+        margin-bottom: 0;
+        min-width: 40px;
+        text-align: center;
+        padding: 0 5px;
+
+        .product-card__quantity-value {
+          margin: 0;
+          font-weight: 400;
+        }
+      }
+
+      .btn--quantity {
+        background: none;
+        padding: 0;
+        width: 24px;
+        min-height: 24px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+
+        .quantity-cta-icon {
+          font-size: 1.35rem;
+          color: $blue;
+        }
+
+        &[disabled] {
+          border: none;
+          opacity: 0.6;
+        }
+      }
+    }
+
+    .btn--remove,
+    .btn--quantity {
+      &:hover {
+        opacity: 0.7;
       }
     }
 
     &.popover-mini-basket__cards-holder {
       .card {
         margin-bottom: 0;
+        display: flex;
 
         & + .card {
           border-top: 1px solid $gray-light;
         }
       }
     }
+
+    &__offers {
+      margin-top: 4px;
+
+      .products__promo {
+        @include font-size(12);
+        @include line-height(16);
+        color: $red;
+        font-weight: 400;
+      }
+    }
   }
 
   &__footer {
@@ -324,7 +428,7 @@
           font-weight: 500;
         }
 
-        .value {
+        &-value {
           @include font-size(18);
           @include line-height(24);
           font-weight: 700;
@@ -454,6 +558,30 @@
   }
 }
 
+@include media-breakpoint-up(sm) {
+  .custom-slider {
+    .products__details {
+      .price {
+        @include font-size(18);
+        @include line-height(24);
+
+        .inc {
+          @include font-size(12);
+          @include line-height(16);
+          font-weight: 500;
+        }
+      }
+
+      &-footer {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-top: auto;
+      }
+    }
+  }
+}
+
 @include media-breakpoint-up(sm) {
   .custom-slider {
     &__wrap {

package/src/scss/components/_popover-mini-basket.scss

@@ -173,10 +173,6 @@
         .card__img {
           border: 0;
         }
-
-        .product-card__content {
-          height: auto;
-        }
       }
     }
   }

package/src/scss/emulation.scss

@@ -29,7 +29,7 @@
 
     &__address {
       .fa-map-marker-alt {
-        max-width: .75rem;
+        max-width: 0.75rem;
       }
     }
   }
@@ -54,11 +54,11 @@
 }
 
 .offer-banner__link-arrow {
-  max-width: .625rem;
+  max-width: 0.625rem;
 }
 
 @include media-breakpoint-down(sm) {
-  .cards-store-list:not(:nth-child(-n+4)) {
+  .cards-store-list:not(:nth-child(-n + 4)) {
     display: none;
   }
 }

package/src/scss/helpers/_colors-semantic.scss

@@ -0,0 +1,120 @@
+// --------------------------------------------------------------------------
+// Surfaces
+// --------------------------------------------------------------------------
+$surface-surf-primary:          $white;          // #ffffff
+
+// --------------------------------------------------------------------------
+// Containers
+// --------------------------------------------------------------------------
+$container-cont-01:             $white;          // #ffffff
+$container-cont-02:             $gray-bg;        // #f8f8f8
+$container-cont-03:             $gray-light;     // #eeeeee
+$container-cont-04:             $warm-grey;      // #8b8b8b
+
+$container-cont-brand:          $blue-dark;      // #0a3055
+$container-cont-brand-light:    $ma-white;       // #f4f9fe
+$container-cont-action:         $blue;           // #0277bd
+$container-cont-checkout:       $green;          // #67a509
+$container-cont-offer:          $red;            // #cf000f
+
+// --------------------------------------------------------------------------
+// Borders
+// --------------------------------------------------------------------------
+$border-brand:      $blue-dark;     // #0a3055
+$border-bold:       $gray-dark;     // #3e3e3e
+$border-default:    $gray;          // #cccccc
+$border-secondary:  $gray-light;    // #eeeeee
+$border-focus:      $blue;          // #0277bd
+$border-error:      $red;           // #cf000f
+$border-inverted:   $white;         // #ffffff
+
+// --------------------------------------------------------------------------
+// Text
+// --------------------------------------------------------------------------
+$text-body:         $gray-dark;     // #3e3e3e
+$text-secondary:    $squant;        // #666666
+$text-tertiary:     $warm-grey;     // #8b8b8b
+$text-quinary:      $gray-wait;     // #9d9d9c
+$text-inverted:     $white;         // #ffffff
+$text-brand:        $blue-dark;     // #0a3055
+$text-link:         $blue;          // #0277bd
+$text-offer:        $red;           // #cf000f
+$text-success:      $green;         // #67a509
+$text-error:        $red;           // #cf000f
+
+// --------------------------------------------------------------------------
+// Icons
+// --------------------------------------------------------------------------
+$icon-brand:        $blue-dark;     // #0a3055
+$icon-primary:      $gray-dark;     // #3e3e3e
+$icon-secondary:    $warm-grey;     // #8b8b8b
+$icon-tertiary:     $gray;          // #cccccc
+$icon-inverted:     $white;         // #ffffff
+$icon-action:       $blue;          // #0277bd
+$icon-checkout:     $green;         // #67a509
+$icon-success:      $green;         // #67a509
+$icon-warning:      $orange;        // #ffc439
+$icon-error:        $red;           // #cf000f
+$icon-brand-light:  $blue-satin;    // #99b5cf
+
+// --------------------------------------------------------------------------
+// Labels / Badges
+// --------------------------------------------------------------------------
+$label-offer:       $red;           // #cf000f
+$label-new:         $green-light;   // #9acd32
+$label-clearance:   $yellow;        // #f7ca18
+
+// --------------------------------------------------------------------------
+// Logos
+// --------------------------------------------------------------------------
+$logo-main:         $pacific-depths; // #004587
+$logo-stroke-text:  $white;          // #ffffff
+$logo-tradepro:     $gray-wait;      // #9d9d9c
+
+// --------------------------------------------------------------------------
+// Notifications
+// --------------------------------------------------------------------------
+$notification-success-bg:  rgba($green, .05);   // #67a5090d
+$notification-warning-bg:  rgba($orange, .05);  // #ffc4390d
+$notification-error-bg:    rgba($red, .05);     // #cf000f0d
+
+// --------------------------------------------------------------------------
+// State overlays (generic)
+// --------------------------------------------------------------------------
+$state-overlay-hover:      rgba($black, .2);    // #00000033
+$state-overlay-pressed:    rgba($black, .4);    // #00000066
+$state-overlay-disabled:   rgba($white, .6);    // #ffffff99
+
+// --------------------------------------------------------------------------
+// Additional (brand / payments / design usage)
+// --------------------------------------------------------------------------
+$additional-design-appointment:  #2d8093;
+$additional-review-star-pdp:     #f7941d;
+$additional-paypal:              $orange;            // #ffc439
+$additional-klarna:              #ffb3c7;
+$additional-finance:             $virid-darker;      // #205c56
+$additional-events:              $virid-darkest;     // #00857c
+
+// --------------------------------------------------------------------------
+// Button overlays (primary action = blue)
+// --------------------------------------------------------------------------
+$button-overlay-action-default:   $blue;              // #0277bd
+$button-overlay-action-hover:     rgba($blue, .2);    // 20% opacity
+$button-overlay-action-pressed:   rgba($blue, .4);    // 40% opacity
+$button-overlay-action-disabled:  rgba($blue, .6);    // 60% opacity
+
+// --------------------------------------------------------------------------
+// Checkout overlays (success / checkout = green)
+// --------------------------------------------------------------------------
+$checkout-overlay-action-default:  $green;             // #67a509
+$checkout-overlay-action-hover:    rgba($green, .2);   // 20% opacity
+$checkout-overlay-action-pressed:  rgba($green, .4);   // 40% opacity
+$checkout-overlay-action-disabled: rgba($green, .6);   // 60% opacity
+
+// --------------------------------------------------------------------------
+// Offer overlays (error / offer = red)
+// --------------------------------------------------------------------------
+$offer-overlay-action-default:     $red;               // #cf000f
+$offer-overlay-action-hover:       rgba($red, .2);     // 20% opacity
+$offer-overlay-action-pressed:     rgba($red, .4);     // 40% opacity
+$offer-overlay-action-disabled:    rgba($red, .6);     // 60% opacity

package/src/scss/helpers/_variables.scss

@@ -400,3 +400,5 @@ $christine: #ec6608;
 $monza: #e30613;
 $downriver: #0c3153;
 $rose-pink: #ff858d;
+
+@import 'colors-semantic';

package/src/scss/pages/_facets.scss

@@ -0,0 +1,86 @@
+@import '../helpers/variables';
+@import '../helpers/helpers';
+
+.category-seo-config {
+
+  .legal-info {
+    > div {
+      a {
+        color: $blue;
+      }
+
+      p {
+        font-weight: 400;
+        line-height: 24px;
+      }
+
+      h3 {
+        font-weight: 500;
+        font-size: 1.25rem;
+        line-height: 32px;
+        color: inherit;
+      }
+
+      h4 {
+        font-weight: 500;
+        font-size: 1.125rem;
+        line-height: 24px;
+        color: inherit;
+      }
+    }
+  }
+
+  .page-header {
+    p {
+      line-height: 24px;
+      font-weight: 400;
+    }
+
+    h1 {
+      font-weight: 500;
+      font-size: 1.625rem;
+      line-height: 36px;
+    }
+
+    &__title {
+      font-weight: 500;
+      font-size: 1.625rem;
+      line-height: 36px;
+      text-align: left;
+      color: inherit;
+    }
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .category-seo-config {
+    .page-header {
+
+      h1 {
+        line-height: 46px;
+        font-size: 2.125rem;
+      }
+
+      &__title {
+        font-size: 2.125rem;
+        line-height: 46px;
+        text-align: center;
+      }
+    }
+
+    .legal-info {
+      > div {
+        h3 {
+          font-size: 1.5rem;
+          line-height: 32px;
+        }
+
+        h4 {
+          font-size: 1.125rem;
+          line-height: 24px;
+          font-weight: 700;
+        }
+      }
+    }
+  }
+}

package/src/scss/plp-main.scss

@@ -30,3 +30,4 @@
 
 // Pages
 @import 'pages/page_products-list-combined';
+@import 'pages/facets';

package/src/js/components/general/mini-basket-slider.js

@@ -1,8 +0,0 @@
-createPopupSlider({
-  type: 'miniBasket',
-  sliderSelector: '.custom-slider.mini-basket',
-  onAppendEvent: 'showMiniBasket',
-  onAppend: function (event, { showSlider }) {
-    showSlider();
-  },
-});