wickes-css2 2.105.0-develop.7 → 2.105.0-develop.8

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

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

package/src/scss/components/{_filter-modal.scss → kitchen/_filter-modal.scss}

@@ -1,6 +1,4 @@
 .filter-modal {
-  border-radius: 0;
-
   &__title {
     font-size: 1.125rem;
     font-style: normal;
@@ -16,27 +14,18 @@
     z-index: 10;
     box-shadow: none;
     border-bottom: 0;
-    transition: box-shadow 0.3s ease;
+    transition: box-shadow .3s ease;
     padding: 0;
   }
 
-  .modal-box__row,
-  .modal-box__columns,
-  .modal-dialog,
-  .modal-box__content {
-    height: 100%;
-  }
-
   .modal-dialog {
     width: 100%;
     max-width: 100%;
-    height: 100%;
     margin: 0;
   }
 
   .modal-content {
     width: 100%;
-    border-radius: 0;
   }
 
   .modal-box__content {
@@ -68,6 +57,7 @@
     width: 100%;
   }
 
+
   .modal-footer {
     justify-content: center;
     bottom: 0;
@@ -99,17 +89,6 @@
     right: 16px;
     top: 20px;
     opacity: 1;
-    font-weight: 700;
-    line-height: 1;
-    font-size: 1rem;
-    color: $warm-grey;
-    background-color: transparent;
-    border: 0;
-    -webkit-appearance: none;
-    position: absolute;
-    padding: 0;
-    margin: 0;
-    cursor: pointer;
   }
 
   .modal-footer {
@@ -157,7 +136,7 @@
     &[data-scroll-state='middle'],
     &[data-scroll-state='bottom'] {
       .modal-header {
-        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+        box-shadow: 0 0 15px rgba(0, 0, 0, .2);
         border-bottom: 0;
       }
     }
@@ -165,37 +144,7 @@
     &[data-scroll-state='middle'],
     &[data-scroll-state='top'] {
       .modal-footer {
-        box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05);
-      }
-    }
-  }
-}
-
-.products-list-page {
-  .filter-modal {
-    .modal-header {
-      .modal-box__inner-row {
-        .modal-box__inner-columns {
-          padding: 20px 16px 14px;
-        }
-      }
-    }
-  }
-
-  .filter-modal {
-    .modal-box__inner-columns {
-      margin: 0;
-
-      .accordion {
-        position: relative;
-        padding-top: 20px;
-        padding-bottom: 20px;
-
-        &:first-of-type {
-          &:before {
-            border-top: 0;
-          }
-        }
+        box-shadow: 0 -2px 4px rgba(0, 0, 0, .05);
       }
     }
   }

package/src/scss/components/{_plp-filters.scss → kitchen/_plp-filters.scss}

@@ -1,14 +1,8 @@
-.products-list-page {
-  .plp-filters {
-    margin-left: -15px;
-    margin-right: -15px;
-  }
-}
-
 .plp-filters {
+  width: 100%;
   position: sticky;
   top: 0;
-  z-index: $popover-under;
+  z-index: $popover;
 
   &__bar {
     &-mobile {
@@ -16,13 +10,13 @@
       border-top: 1px solid $gray;
       border-bottom: 1px solid $gray;
       background: $white;
-      transition: all 0.1s ease;
+      transition: all .1s ease;
     }
 
     &-stuck {
       border-top: 0;
       border-bottom: 0;
-      box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+      box-shadow: 0 0 15px rgba(0, 0, 0, .2);
     }
 
     .mobile-nav {
@@ -30,26 +24,14 @@
         @include make-col(6);
         position: relative;
         display: flex;
-        padding: 9px 12px 9px 18px;
+        padding: 9px 12px 9px 17px;
         align-items: center;
 
         &:first-of-type {
-          padding: 9px 12px 9px 20px;
-
-          .mobile-nav {
-            &__content {
-              padding-left: 12px;
-            }
-
-            &__icon {
-              font-size: 1rem;
-            }
-          }
-
           &:after {
             content: '';
             position: absolute;
-            right: -1px;
+            right: 0;
             top: 8px;
             height: calc(100% - 16px);
             border-right: 1px solid $gray;
@@ -65,20 +47,20 @@
       &__icon {
         display: flex;
         align-items: center;
-        font-size: 1.125rem;
+        font-size: 1.167rem;
         color: $blue-ocean-dark;
-        transform: translateY(0.5px);
+        transform: translateY(.5px);
       }
 
       &__title {
-        font-size: 0.875rem;
+        font-size: .875rem;
         font-weight: $headings-font-weight;
         line-height: 1.375rem;
         color: $blue-dark;
       }
 
       &__info {
-        font-size: 0.75rem;
+        font-size: .75rem;
         font-weight: $font-weight-normal;
         line-height: 1rem;
         color: $squant;
@@ -164,8 +146,8 @@
   }
 
   &__chevron {
-    font-size: 0.858rem;
-    transition: transform 0.2s ease;
+    font-size: .858rem;
+    transition: transform .2s ease;
     transform-origin: 50% 50%;
     margin-right: 8px;
   }
@@ -218,7 +200,7 @@
     display: block;
     min-width: 16px;
     height: 16px;
-    font-size: 0.75rem;
+    font-size: .75rem;
     margin-left: 4px;
 
     span {

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

@@ -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,58 @@
+.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: transform 0.7s cubic-bezier(0.46, -0.59, 0.4, 0.89), filter 0.7s 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

@@ -74,4 +74,12 @@
       color: inherit;
     }
   }
+
+  &--secondary {
+    background: $black-transparent40;
+
+    .icon {
+      color: $gray;
+    }
+  }
 }

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

@@ -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,6 +8,3 @@
 @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, 0.05); // #67a5090d
-$notification-warning-bg: rgba($orange, 0.05); // #ffc4390d
-$notification-error-bg: rgba($red, 0.05); // #cf000f0d
+$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, 0.2); // #00000033
-$state-overlay-pressed: rgba($black, 0.4); // #00000066
-$state-overlay-disabled: rgba($white, 0.6); // #ffffff99
+$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
+$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, 0.2); // 20% opacity
-$button-overlay-action-pressed: rgba($blue, 0.4); // 40% opacity
-$button-overlay-action-disabled: rgba($blue, 0.6); // 60% opacity
+$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, 0.2); // 20% opacity
-$checkout-overlay-action-pressed: rgba($green, 0.4); // 40% opacity
-$checkout-overlay-action-disabled: rgba($green, 0.6); // 60% opacity
+$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, 0.2); // 20% opacity
-$offer-overlay-action-pressed: rgba($red, 0.4); // 40% opacity
-$offer-overlay-action-disabled: rgba($red, 0.6); // 60% opacity
+$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