wickes-css2 2.103.0-IC-976-pre-commit-lint.5 → 2.103.0-IC-976-pre-commit-lint.8

package/src/scss/category-main.scss

@@ -13,10 +13,8 @@
 @import 'globals/global-components';
 @import 'components/accordion';
 @import 'components/aside-nav2';
-@import 'components/banner';
-//fully is used on prototype, and some styles are used in prod, needs check
-@import 'components/legal-info';
-//present on proto, on prod it is just <p> needs check
+@import 'components/banner';//fully is used on prototype, and some styles are used in prod, needs check
+@import 'components/legal-info';//present on proto, on prod it is just <p> needs check
 @import 'components/clamp';
 @import 'components/long-banner';
 
@@ -197,7 +195,6 @@
 .full-height {
   height: 100% !important;
 }
-
 //card output end
 
 //product card output start
@@ -212,7 +209,6 @@
     color: $blue;
   }
 }
-
 //product card output end
 
 //banner info output start
@@ -384,7 +380,6 @@
     }
   }
 }
-
 //banner info output end
 
 //notification output start
@@ -497,7 +492,6 @@
     }
   }
 }
-
 //notification output end
 
 @include media-breakpoint-up(lg) {

package/src/scss/common/_cat-common.scss

@@ -232,5 +232,4 @@ main {
     }
   }
 }
-
 //minified common styles end

package/src/scss/common/_plp-common.scss

@@ -239,5 +239,4 @@ main {
   width: 100%;
   overflow: hidden;
 }
-
 //minified common styles end

package/src/scss/components/_billie-modal.scss

@@ -78,7 +78,7 @@
     margin: 0 16px;
   }
 
-  .modal-box__header .close {
+  .modal-box__header .close  {
     right: 23px;
     top: 8px;
   }
@@ -129,7 +129,7 @@
       height: auto;
     }
 
-    .modal-box__header .close {
+    .modal-box__header .close  {
       right: 8px;
       top: 8px;
     }

package/src/scss/components/_card.scss

@@ -322,7 +322,6 @@
     padding: 10px;
     background: $white;
   }
-
   @include media-breakpoint-down(sm) {
     width: 100%;
   }

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

@@ -105,7 +105,7 @@
     .messages {
       display: flex;
       flex-direction: column;
-      border: 0;
+      border: none;
       background: none;
 
       &__text {
@@ -138,7 +138,7 @@
       justify-content: space-between;
       grid-gap: 8px;
       padding: 8px 0;
-      border: 0;
+      border: none;
 
       & + .products__item {
         border-top: 1px solid $gray-light;
@@ -229,7 +229,7 @@
     transition: all .3s ease;
 
     &.footer-fixed {
-      box-shadow: 0 -4px 12px 0 rgba(0, 0, 0, .08);
+      box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, .08);
       position: fixed;
       width: 100%;
       left: 0;
@@ -300,7 +300,7 @@
     }
 
     .custom-slider__footer {
-      box-shadow: 0 -4px 12px 0 rgba(0, 0, 0, .08);
+      box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, .08);
       flex-direction: column;
     }
   }
@@ -330,7 +330,7 @@
           font-weight: 700;
         }
 
-        &[aria-expanded='true'] {
+        &[aria-expanded="true"] {
           .icon-wrap .arrow-icon {
             transform: rotate(180deg);
           }
@@ -428,7 +428,7 @@
               transform: rotate(180deg);
             }
 
-            &[aria-expanded='true'] {
+            &[aria-expanded="true"] {
               .icon {
                 transform: rotate(0);
               }

package/src/scss/components/_find-a-store.scss

@@ -75,7 +75,6 @@
     }
   }
 }
-
 @include media-breakpoint-up(md) {
   .forms-locator {
     .form-row__label,

package/src/scss/components/_gallery-pdp-critical.scss

@@ -14,7 +14,7 @@
     position: absolute;
     color: $white;
     z-index: 2;
-    bottom: 95px; //TODO: move go gallery
+    bottom: 95px;  //TODO: move go gallery
     right: 15px;
     background-color: $gray-dark-transparent60;
     border-radius: 3px;
@@ -31,7 +31,7 @@
     position: absolute;
     color: $white;
     z-index: 2;
-    bottom: 15px; //TODO: move go gallery
+    bottom: 15px;  //TODO: move go gallery
     right: 15px;
     background-color: $gray-dark-transparent60;
     border-radius: 3px;

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

@@ -122,11 +122,11 @@
   .kitchen-cards {
     grid-template-columns: repeat(2, 1fr);
     gap: 24px;
-  }
+  }  
 }
 
 @include media-breakpoint-up(lg) {
   .kitchen-cards {
     grid-template-columns: repeat(3, 1fr);
-  }
+  }  
 }

package/src/scss/components/_notifications-critical.scss

@@ -10,7 +10,7 @@
     top: 7px;
     font-size: 1rem;
   }
-
+ 
 
   &__close {
     position: absolute;
@@ -24,5 +24,5 @@
       color: $white;
     }
   }
-
+ 
 }

package/src/scss/components/_offer-banner.scss

@@ -23,7 +23,6 @@
       color: $white;
       text-decoration: none;
     }
-
     // TODO: remove this styles (old layout for offer banner support) (1688) end
 
     strong {

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 {

package/src/scss/components/_page-overlay.scss

@@ -74,7 +74,7 @@
     }
 
     .form-row {
-      @include media-breakpoint-down(md) {
+      @include media-breakpoint-down (md) {
         padding: 0;
       }
     }

package/src/scss/components/_price-block.scss

@@ -160,7 +160,6 @@
       top: 2px;
     }
   }
-
   //custom dots for list items
 
   .pdp-price__availability,

package/src/scss/components/_price.scss

@@ -60,7 +60,7 @@
   &__additional-text {
     color: $squant;
     font-size: .75rem;
-    line-height: 1rem;
+    line-height: 1rem; 
   }
 
   &--offer {

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

@@ -76,6 +76,7 @@
   }
 
 
+
   &__slider-holder {
     @include media-breakpoint-only(lg) {
       width: 610px;

package/src/scss/components/_recommended.scss

@@ -13,6 +13,7 @@
   font-weight: 500;
 
 
+
   &-block {
     margin: 2px 0 15px 15px;
 

package/src/scss/components/_rewards.scss

@@ -28,7 +28,7 @@
   }
 
   &__description {
-    font-size: .875rem;
+    font-size:  .875rem;
     margin-bottom: 12px;
   }
 

package/src/scss/components/_share-list-modal.scss

@@ -76,7 +76,7 @@
       justify-content: flex-start;
 
       .socials__item {
-        margin: 0 10px 0 0;
+        margin:  0 10px 0 0;
 
         .whatsapp-icon {
           vertical-align: middle;

package/src/scss/components/_shopping-list-note.scss

@@ -147,7 +147,7 @@
     align-items: center;
 
     .btn-edit-note {
-      width: calc(100% / 2 - 10px);
+      width: calc(100%/2 - 10px);
     }
 
     .btn-remove-note {

package/src/scss/components/_steps-three.scss

@@ -99,7 +99,7 @@
 $itemQuantity: 3;
 
 @while $itemQuantity >= 0 {
-  [data-active-step-index='#{$itemQuantity}'] {
+  [data-active-step-index='#{$itemQuantity}']  {
     @for $i from 0 through $itemQuantity {
       [data-step-index='#{$i}'] {
         .step {

package/src/scss/components/_steps.scss

@@ -107,7 +107,7 @@
       &.steps-instore {
         &::before {
           left: -70px;
-        }
+        }  
       }
     }
   }
@@ -185,7 +185,7 @@
 $itemQuantity: 4;
 
 @while $itemQuantity >= 0 {
-  [data-active-step-index='#{$itemQuantity}'] {
+  [data-active-step-index='#{$itemQuantity}']  {
     @for $i from 0 through $itemQuantity {
       [data-step-index='#{$i}'] {
         font-weight: 400;

package/src/scss/components/_tc-generic.scss

@@ -64,7 +64,7 @@
       display: inline-block;
     }
 
-    & .tc__wastage__detail-accordion {
+    &  .tc__wastage__detail-accordion {
       font-weight: 500;
       padding-right: 3px;
     }

package/src/scss/components/_thank-you-modal.scss

@@ -22,9 +22,7 @@
       font-weight: 500;
       margin-bottom: 2rem;
 
-      p {
-        margin: 0
-      }
+      p {margin: 0}
     }
 
     .btn {

package/src/scss/components/_ti-total-area.scss

@@ -66,7 +66,7 @@
       display: inline-block;
     }
 
-    & .ti-total-area__detail-accordion {
+    &  .ti-total-area__detail-accordion {
       font-weight: 500;
       padding-right: 3px;
     }

package/src/scss/components/_user-address-delivery.scss

@@ -136,5 +136,5 @@
         }
       }
     }
-  }
+  } 
 }

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

@@ -63,7 +63,7 @@
   &__additional-text {
     color: $squant;
     font-size: .75rem;
-    line-height: 1rem;
+    line-height: 1rem; 
   }
 
   &--offer {

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

@@ -115,9 +115,7 @@
       }
     }
   }
-}
-
-;
+};
 
 @include media-breakpoint-up(lg) {
   .contacts__item {

package/src/scss/components/special-opening-schedule-v2.scss

@@ -3,7 +3,7 @@
 .special-opening-schedule-item.schedule-item {
   flex-direction: row;
 
-  &__reason {
+  &__reason  {
     @include make-col(1, 3);
     font-weight: 400;
     padding: 0 15px;
@@ -24,7 +24,7 @@
     white-space: nowrap;
   }
 
-  &__addition-info {
+  &__addition-info  {
     font-weight: 500;
     padding: 0 15px;
     margin: 5px 0;
@@ -35,7 +35,7 @@
 
 .store-locator {
   .special-opening-schedule-item.schedule-item {
-    &__reason {
+    &__reason  {
       display: none;
     }
 

package/src/scss/components/special-opening-schedule.scss

@@ -6,7 +6,7 @@
   line-height: 2;
   padding: 5px 0;
 
-  &__reason {
+  &__reason  {
     font-weight: 700;
     padding: 0 15px;
   }
@@ -28,7 +28,7 @@
     }
   }
 
-  &__addition-info {
+  &__addition-info  {
     font-weight: 500;
     padding: 0 15px;
     margin: 5px 0;

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