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

package/src/scss/components/_sort-by.scss

@@ -0,0 +1,190 @@
+/* MOBILE */
+.mobile-nav__item--dropdown {
+  position: relative;
+  cursor: pointer;
+
+  &:hover,
+  &.is-open {
+    .sort__chevron {
+      color: $squant;
+    }
+  }
+
+  .sort__chevron {
+    position: absolute;
+    right: 22px;
+    color: $warm-grey;
+    font-size: 14px;
+    transition: transform 0.2s;
+  }
+
+  .sort-dd {
+    left: auto;
+    right: 4px;
+  }
+
+  .mobile-nav__dropdown {
+    position: absolute;
+    top: calc(100% + 8px);
+    right: 0;
+    min-width: 220px;
+    background: $white;
+    border-radius: 12px;
+    box-shadow: 0 0 8px 0 $black-transparent10;
+    padding: 8px 0;
+    z-index: 30;
+
+    &[hidden] {
+      display: none !important;
+    }
+  }
+
+  .mobile-nav__opt {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 14px;
+    background: none;
+    border: 0;
+    text-align: left;
+    cursor: pointer;
+    font-size: 1rem;
+    line-height: 22px;
+    color: $blue-dark;
+
+    &:hover {
+      background: $gray;
+    }
+  }
+
+  .mobile-nav__opt-check {
+    color: $blue;
+    opacity: 0;
+    width: 16px;
+  }
+
+  .mobile-nav__opt.is-active .mobile-nav__opt-check {
+    opacity: 1;
+  }
+}
+
+/* DESKTOP */
+.sort {
+  position: relative;
+
+  &--desktop {
+    display: none;
+    align-items: center;
+    gap: 12px;
+
+    .sort__label {
+      font-weight: 500;
+      color: $gray-dark;
+      font-size: 1rem;
+      margin-bottom: 0;
+    }
+
+    .sort-button {
+      position: relative;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      border: 1px solid $gray;
+      background: $white;
+      color: $gray-dark;
+      cursor: pointer;
+      border-radius: 3px;
+      padding: 8px 8px 8px 16px;
+      font-size: 1rem;
+      min-width: 210px;
+
+      &:focus {
+        outline: none;
+      }
+
+      &:focus-visible {
+        outline: 2px solid $blue;
+        outline-offset: 2px;
+      }
+    }
+
+    .sort__chevron {
+      position: absolute;
+      right: 14px;
+      color: $blue;
+      font-size: 12px;
+      transition: transform 0.2s;
+    }
+  }
+}
+
+/* COMMON */
+.sort.is-open .sort__chevron {
+  transform: rotate(180deg);
+}
+
+.sort-dd {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  min-width: 210px;
+  background: #fff;
+  padding: 4px 0;
+  z-index: 40;
+  box-shadow: 0 0 8px $black-transparent12;
+  border-radius: 4px;
+
+  &[hidden] {
+    display: none !important;
+  }
+}
+
+.sort-opt {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 16px 8px 12px;
+  background: none;
+  border: 0;
+  text-align: left;
+  cursor: pointer;
+  line-height: 24px;
+  color: $gray-dark;
+
+  &:hover {
+    background: $ma-white;
+  }
+}
+
+.sort-opt__check {
+  color: $blue;
+  opacity: 0;
+  width: 16px;
+}
+
+.sort-opt.is-active .sort-opt__check {
+  opacity: 1;
+}
+
+@include media-breakpoint-up(md) {
+  .sort--desktop {
+    display: flex;
+  }
+}
+
+@include media-breakpoint-up(sm) {
+  .mobile-nav__item--dropdown .sort-dd {
+    left: 0;
+    right: auto;
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .sort-opt {
+    font-size: 1rem;
+    line-height: 20px;
+    padding: 10px 16px 10px 12px;
+  }
+}

package/src/scss/components/checkout-chip.scss

@@ -38,7 +38,7 @@
     gap: 4px;
     cursor: pointer;
     user-select: none;
-    transition: border-color .2s;
+    transition: border-color 0.2s;
     width: 78px;
   }
 
@@ -62,4 +62,4 @@
   .checkout-chip__label {
     border: 1px solid $red;
   }
-}
+}

package/src/scss/components/checkout-payment-repayment-terms.scss

@@ -36,4 +36,4 @@
   &__divider {
     padding: 10px 0;
   }
-}
+}

package/src/scss/components/kitchen/_price-tooltip.scss

@@ -6,7 +6,7 @@
   .tooltip-inner {
     background: $white;
     color: $gray-dark;
-    padding: 8px 12px;
+    padding: 8px 12px !important;
     border-radius: 4px;
     font-weight: 400;
     font-size: .75rem;

package/src/scss/components/kitchen/_price.scss

@@ -5,7 +5,7 @@
 
   &__main {
     display: flex;
-    align-items: flex-end;
+    align-items: baseline;
     flex-wrap: wrap;
     gap: 8px 4px;
   }

package/src/scss/components/my-account/_barcode.scss

@@ -5,7 +5,7 @@
   border-radius: 4px;
   color: $gray-dark;
   position: relative;
-  font-size: .75rem;
+  font-size: 0.75rem;
   line-height: 1rem;
 
   &__discount {
@@ -13,6 +13,14 @@
     top: -8px;
     right: -8px;
 
+    &--text {
+      background: $red;
+      border-radius: 10px;
+      padding: 2px 8px;
+      color: $white;
+      font-weight: 700;
+    }
+
     img {
       border-radius: 40px;
       width: 100%;

package/src/scss/components/my-account/_cards-swap.scss

@@ -0,0 +1,60 @@
+.cards-swap {
+  position: relative;
+  width: 100%;
+  margin-bottom: 40px;
+
+  &__card {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    transform: translate(0, -16px) scale(0.9);
+    transform-origin: top;
+    height: inherit;
+    overflow: hidden;
+    filter: contrast(0.6) brightness(1.2);
+    z-index: 1;
+    transition-property: transform, filter;
+    transition-duration: 0.7s, 0.7s;
+    transition-timing-function: cubic-bezier(0.46, -0.59, 0.4, 0.89), linear;
+
+    &.active {
+      transform: translate(0, 0) scale(1);
+      filter: contrast(1) brightness(1);
+      z-index: 2;
+      height: auto;
+      overflow: visible;
+    }
+
+    &.static {
+      position: relative;
+    }
+  }
+
+  &__toggle {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    width: 23px;
+    height: 23px;
+    background: $white;
+    border-radius: 20px;
+    font-size: 12px;
+    font-weight: 700;
+    color: $blue-dark;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    line-height: 1.2;
+    cursor: pointer;
+  }
+}
+
+@include media-breakpoint-up(sm) {
+  .cards-swap {
+    &__card {
+      transform: translate(0, 16px) scale(0.9);
+      transform-origin: bottom;
+    }
+  }
+}

package/src/scss/components/my-account/_clipboard-code.scss

@@ -1,5 +1,5 @@
 .clipboard-code {
-  background: rgba(255, 255, 255, .08);
+  background: rgba(255, 255, 255, 0.08);
   border-radius: 4px;
   padding: 16px;
 
@@ -21,7 +21,7 @@
   .subtitle {
     display: inline-block;
     font-weight: 400;
-    font-size: .875rem;
+    font-size: 0.875rem;
     line-height: 1.375rem;
   }
 
@@ -61,7 +61,7 @@
 
   &__description {
     margin-top: 16px;
-    color: rgba(255, 255, 255, .8);
+    color: rgba(255, 255, 255, 0.8);
 
     p {
       font-size: 14px;
@@ -74,4 +74,12 @@
       color: inherit;
     }
   }
+
+  &--secondary {
+    background: $black-transparent40;
+
+    .icon {
+      color: $gray;
+    }
+  }
 }

package/src/scss/components/my-account/_discount.scss

@@ -1,5 +1,5 @@
 .discount {
-  background: rgba(255, 255, 255, .08);
+  background: rgba(255, 255, 255, 0.08);
   border-radius: 4px;
   padding: 16px;
 
@@ -21,7 +21,7 @@
   .subtitle {
     display: inline-block;
     font-weight: 400;
-    font-size: .875rem;
+    font-size: 0.875rem;
     line-height: 1.375rem;
   }
 
@@ -48,4 +48,14 @@
   &__code {
     margin-left: 8px;
   }
+
+  &--secondary {
+    background: $black-transparent40;
+
+    .discount__content {
+      .icon {
+        color: $gray;
+      }
+    }
+  }
 }

package/src/scss/globals/_global-components.scss

@@ -8,3 +8,6 @@
 @import '../components/autocomplete';
 @import '../components/smart-banner';
 @import '../components/snack-bar';
+@import '../components/filter-modal';
+@import '../components/plp-filters';
+@import '../components/sort-by';

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

@@ -1,120 +1,120 @@
 // --------------------------------------------------------------------------
 // Surfaces
 // --------------------------------------------------------------------------
-$surface-surf-primary:          $white;          // #ffffff
+$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-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
+$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
+$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
+$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
+$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
+$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
+$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
+$notification-success-bg: rgba($green, 0.05); // #67a5090d
+$notification-warning-bg: rgba($orange, 0.05); // #ffc4390d
+$notification-error-bg: rgba($red, 0.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
+$state-overlay-hover: rgba($black, 0.2); // #00000033
+$state-overlay-pressed: rgba($black, 0.4); // #00000066
+$state-overlay-disabled: rgba($white, 0.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
+$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
+$button-overlay-action-default: $blue; // #0277bd
+$button-overlay-action-hover: rgba($blue, 0.2); // 20% opacity
+$button-overlay-action-pressed: rgba($blue, 0.4); // 40% opacity
+$button-overlay-action-disabled: rgba($blue, 0.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
+$checkout-overlay-action-default: $green; // #67a509
+$checkout-overlay-action-hover: rgba($green, 0.2); // 20% opacity
+$checkout-overlay-action-pressed: rgba($green, 0.4); // 40% opacity
+$checkout-overlay-action-disabled: rgba($green, 0.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
+$offer-overlay-action-default: $red; // #cf000f
+$offer-overlay-action-hover: rgba($red, 0.2); // 20% opacity
+$offer-overlay-action-pressed: rgba($red, 0.4); // 40% opacity
+$offer-overlay-action-disabled: rgba($red, 0.6); // 60% opacity