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

package/src/scss/helpers/_variables.scss

@@ -1,37 +1,37 @@
 //// Color scheme
 
 // Primary Brand Colors
-$blue-dark: #0a3055; // Base brand color for background
-$blue: #0277bd; // CTAs
-$green: #67a509; // Tick icons; Buttons in the checkout
+$blue-dark: #0a3055;      // Base brand color for background
+$blue: #0277bd;           // CTAs
+$green: #67a509;          // Tick icons; Buttons in the checkout
 $polishedPine: #67a589;
-$green-dark: #487306; // Active state of button-action
+$green-dark: #487306;     // Active state of button-action
 
 // Additional colors
-$green-light: #9acd32; // To denote 'new’; Only used as a background
+$green-light: #9acd32;    // To denote 'new’; Only used as a background
 $light-green-wa: #25d366; // WhatsApp background
-$yellow: #f7ca18; // Clearance; Only used as a background
-$orange: #ffc439; // Paypal background
-$red: #cf000f; // Offers
+$yellow: #f7ca18;         // Clearance; Only used as a background
+$orange: #ffc439;         // Paypal background
+$red: #cf000f;            // Offers
 $red-dark: #7c0009;
-$red-bg: #fdf2f3; // Equal to red-transparent for cases when rgba usage is prohibited
-$app-error: #cf100d; // For tradePro app notification error
-$gray-dark: #3e3e3e; // Body copy
+$red-bg: #fdf2f3;         // Equal to red-transparent for cases when rgba usage is prohibited
+$app-error: #cf100d;      // For tradePro app notification error
+$gray-dark: #3e3e3e;      // Body copy
 $gray-border: #d6d6d6;
-$gray: #ccc; // Key-lines - to separate content; Background colour; Card borders
-$gray-light: #eee; // Key-lines - to separate content; Background colour
+$gray: #ccc;              // Key-lines - to separate content; Background colour; Card borders
+$gray-light: #eee;        // Key-lines - to separate content; Background colour
 $gray-lighter: #f4f4f4;
 $gray-whiter: #f1f1f1;
-$gray-bg: #f8f8f8; // Menu background colour
-$gray-gradient: #e0e0e0; // tabs gradient gray
+$gray-bg: #f8f8f8;        // Menu background colour
+$gray-gradient: #e0e0e0;  // tabs gradient gray
 $gray-quill: #cececd;
 $gray-wait: #9d9d9c;
 $gray-dim: #656565;
 $gray-matt: #515151;
-$squant: #666;
-$error-bg: #fcf2f3; // Error notification background colour
-$positive: #8dc63f; // Positive colour
-$negative: #ed1c24; // Negative colour
+$squant: #666666;
+$error-bg: #fcf2f3;       // Error notification background colour
+$positive: #8dc63f;       // Positive colour
+$negative: #ed1c24;       // Negative colour
 $blue-badge: #019ee3;
 $pacific-depths: #004587;
 $usp-icon-color: #1a77bc; // Usp icon color
@@ -39,9 +39,9 @@ $pacific-depths: #004587;
 $line-through: #242424;
 $ma-white: #f4f9fe;
 $blue-satin: #99b5cf;
-$notification-success-bg: rgba(103, 165, 9, 0.05);
-$notification-failure-bg: rgba(207, 0, 15, 0.05);
-$notification-warn-bg: rgba(255, 196, 57, 0.05);
+$notification-success-bg: rgba(103, 165, 9, .05);;
+$notification-failure-bg: rgba(207, 0, 15, .05);;
+$notification-warn-bg: rgba(255, 196, 57, .05);;
 
 $footer-gray: #f5f5f5;
 $footer-bullet: #c8c8c8;
@@ -88,51 +88,47 @@ $peacock-plume: #417372;
 $victorian-white: #fefef6;
 
 // Semi-transparent colors
-$white-transparent30: rgba(255, 255, 255, 0.3);
-$white-transparent40: rgba(255, 255, 255, 0.4);
-$white-transparent80: rgba(255, 255, 255, 0.8);
-$white-transparent90: rgba(255, 255, 255, 0.9);
-$white-transparent20: rgba(216, 216, 216, 0.2);
-$gray-dark-transparent60: rgba(62, 62, 62, 0.6);
-$gray-dark-transparent75: rgba(65, 65, 65, 0.75);
-$gray-dark-transparent80: rgba(65, 65, 65, 0.8);
-$gray-dark-transparent90: rgba(65, 65, 65, 0.9);
+$white-transparent30: rgba(255, 255, 255, .3);
+$white-transparent40: rgba(255, 255, 255, .4);
+$white-transparent80: rgba(255, 255, 255, .8);
+$white-transparent90: rgba(255, 255, 255, .9);
+$white-transparent20: rgba(216, 216, 216, .2);
+$gray-dark-transparent60: rgba(62, 62, 62, .6);
+$gray-dark-transparent75: rgba(65, 65, 65, .75);
+$gray-dark-transparent80: rgba(65, 65, 65, .8);
+$gray-dark-transparent90: rgba(65, 65, 65, .9);
 $black-transparent0: rgba(0, 0, 0, 0);
-$black-transparent10: rgba(0, 0, 0, 0.1);
-$black-transparent12: rgba(0, 0, 0, 0.12);
-$black-transparent24: rgba(0, 0, 0, 0.24);
-$black-transparent20: rgba(0, 0, 0, 0.2);
-$black-transparent30: rgba(0, 0, 0, 0.3);
-$black-transparent35: rgba(0, 0, 0, 0.35);
-$black-transparent40: rgba(0, 0, 0, 0.4);
-$black-transparent50: rgba(0, 0, 0, 0.5);
-$black-transparent60: rgba(0, 0, 0, 0.6);
-$black-transparent75: rgba(0, 0, 0, 0.75);
-$black-transparent80: rgba(0, 0, 0, 0.8);
-$blue-transparent20: rgba(2, 119, 189, 0.2);
-$blue-transparent10: rgba(2, 119, 189, 0.1);
+$black-transparent10: rgba(0, 0, 0, .1);
+$black-transparent12: rgba(0, 0, 0, .12);
+$black-transparent24: rgba(0, 0, 0, .24);
+$black-transparent20: rgba(0, 0, 0, .2);
+$black-transparent30: rgba(0, 0, 0, .3);
+$black-transparent35: rgba(0, 0, 0, .35);
+$black-transparent40: rgba(0, 0, 0, .4);
+$black-transparent50: rgba(0, 0, 0, .5);
+$black-transparent60: rgba(0, 0, 0, .6);
+$black-transparent75: rgba(0, 0, 0, .75);
+$black-transparent80: rgba(0, 0, 0, .8);
+$blue-transparent20: rgba(2, 119, 189, .2);
+$blue-transparent10: rgba(2, 119, 189, .1);
 $blue-transparent3: #0277bd52;
-$blue-transparent5: rgba(2, 119, 189, 0.05);
+$blue-transparent5: rgba(2, 119, 189, .05);
 $blue-transparent5-rgb: rgb(242, 248, 251);
-$dark-blue-transparent10: rgba(10, 48, 85, 0.1);
-$red-transparent5: rgba(207, 0, 15, 0.05);
-$red-transparent10: rgba(207, 0, 15, 0.1);
-$yellow-transparent5: rgba(247, 202, 24, 0.05);
-$green-transparent5: rgba(103, 165, 9, 0.05);
-$gray-light-transparent35: rgba(204, 204, 204, 0.35);
+$dark-blue-transparent10: rgba(10, 48, 85, .1);
+$red-transparent5: rgba(207, 0, 15, .05);
+$red-transparent10: rgba(207, 0, 15, .1);
+$yellow-transparent5: rgba(247, 202, 24, .05);
+$green-transparent5: rgba(103, 165, 9, .05);
+$gray-light-transparent35: rgba(204, 204, 204, .35);
 $gray-light-transparent0: rgba(216, 216, 216, 0);
-$radial-black-gradient: radial-gradient(
-  ellipse closest-corner at 50% 50%,
-  $black 1%,
-  $black-transparent75 100%
-);
+$radial-black-gradient: radial-gradient(ellipse closest-corner at 50% 50%, $black 1%, $black-transparent75 100%);
 $shadow-gradient: linear-gradient(180deg, $black-transparent30 0%, $gray-light-transparent0 100%);
 
 //// Set bootstrap variables
 $body-color: $gray-dark;
 $font-family-base: 'Roboto', Helvetica, Arial, sans-serif;
-$font-size-base: 0.875rem;
-$font-size-13: 0.8125rem;
+$font-size-base: .875rem;
+$font-size-13: .8125rem;
 $line-height-base: 1.57142857;
 $modal-title-line-height: 2rem;
 $modal-header-padding: 1.25rem;
@@ -144,7 +140,7 @@ $tooltip-padding-y: 8px;
 $tooltip-padding-x: 10px;
 $tooltip-border-radius: 0;
 $tooltip-bg: $warm-grey;
-$tooltip-font-size: 0.75rem;
+$tooltip-font-size: .75rem;
 $tooltip-opacity: 1;
 
 $popover-body-padding-y: 0;
@@ -161,7 +157,7 @@ $btn-font-weight: 500;
 $btn-box-shadow: none;
 $btn-focus-box-shadow: none;
 $btn-active-box-shadow: none;
-$btn-disabled-opacity: 0.4;
+$btn-disabled-opacity: .4;
 $btn-padding-y: 8px;
 $btn-padding-x: 15px;
 $btn-line-height: $line-height-base;
@@ -175,7 +171,6 @@ $label-z-index: 2;
 $circle-z-index: -1;
 $main-nav-overlay: 9;
 $offer-banner: 10;
-$popover-under: 99;
 $popover: 100;
 $header: 101;
 $header-search: 102;
@@ -202,60 +197,49 @@ $brown-icon: #7b6406;
 $lemon-icon: #aeb277;
 
 //Bootstrap-extraction
-$font-weight-light: 300 !default;
-$font-weight-normal: 400 !default;
-$font-weight-bold: 700 !default;
-$font-weight-base: $font-weight-normal !default;
-$small-font-size: 80% !default;
-$font-size-lg: ($font-size-base * 1.25) !default;
-$font-size-sm: ($font-size-base * 0.875) !default;
-$body-bg: $white !default;
-$component-active-color: $white !default;
+$font-weight-light:           300 !default;
+$font-weight-normal:          400 !default;
+$font-weight-bold:            700 !default;
+$font-weight-base:            $font-weight-normal !default;
+$small-font-size:             80% !default;
+$font-size-lg:                ($font-size-base * 1.25) !default;
+$font-size-sm:                ($font-size-base * .875) !default;
+$body-bg:                   $white !default;
+$component-active-color:      $white !default;
 $spacer: 1rem !default;
-$headings-margin-bottom: calc($spacer / 2) !default;
-$paragraph-margin-bottom: 1rem !default;
-$dt-font-weight: $font-weight-bold !default;
-$link-hover-decoration: underline !default;
-$table-cell-padding: 0.75rem !default;
+$headings-margin-bottom:      calc($spacer / 2) !default;
+$paragraph-margin-bottom:   1rem !default;
+$dt-font-weight:              $font-weight-bold !default;
+$link-hover-decoration:     underline !default;
+$table-cell-padding:          .75rem !default;
 $gray-600: #6c757d !default;
-$text-muted: $gray-600 !default;
-$headings-font-family: inherit !default;
-$headings-font-weight: 500 !default;
-$headings-line-height: 1.2 !default;
-$headings-color: inherit !default;
-$h1-font-size: $font-size-base * 2.5 !default;
-$h2-font-size: $font-size-base * 2 !default;
-$h3-font-size: $font-size-base * 1.75 !default;
-$h4-font-size: $font-size-base * 1.5 !default;
-$h5-font-size: $font-size-base * 1.25 !default;
-$h6-font-size: $font-size-base !default;
-$lead-font-size: ($font-size-base * 1.25) !default;
-$lead-font-weight: 300 !default;
-$primary: $blue !default;
-$component-active-bg: $primary !default;
-$line-height-sm: 1.5 !default;
-$line-height-lg: 1.5 !default;
-$display-line-height: $headings-line-height !default;
-$hr-margin-y: $spacer !default;
-$hr-border-color: rgba($black, 0.1) !default;
-$border-width: 1px !default;
-$hr-border-width: $border-width !default;
-$enable-grid-classes: true !default;
-$grid-gutter-width: 30px !default;
-$container-max-widths: (
-  sm: 540px,
-  md: 720px,
-  lg: 960px,
-  xl: 1140px,
-) !default;
-$grid-breakpoints: (
-  xs: 0,
-  sm: 576px,
-  md: 768px,
-  lg: 992px,
-  xl: 1200px,
-) !default;
-$grid-columns: 12 !default;
+$text-muted:                  $gray-600 !default;
+$headings-font-family:        inherit !default;
+$headings-font-weight:        500 !default;
+$headings-line-height:        1.2 !default;
+$headings-color:              inherit !default;
+$h1-font-size:                $font-size-base * 2.5 !default;
+$h2-font-size:                $font-size-base * 2 !default;
+$h3-font-size:                $font-size-base * 1.75 !default;
+$h4-font-size:                $font-size-base * 1.5 !default;
+$h5-font-size:                $font-size-base * 1.25 !default;
+$h6-font-size:                $font-size-base !default;
+$lead-font-size:              ($font-size-base * 1.25) !default;
+$lead-font-weight:            300 !default;
+$primary:       $blue !default;
+$component-active-bg:         $primary !default;
+$line-height-sm:              1.5 !default;
+$line-height-lg:              1.5 !default;
+$display-line-height:         $headings-line-height !default;
+$hr-margin-y:                 $spacer !default;
+$hr-border-color:             rgba($black, .1) !default;
+$border-width:                1px !default;
+$hr-border-width:             $border-width !default;
+$enable-grid-classes:       true !default;
+$grid-gutter-width:           30px !default;
+$container-max-widths: (sm: 540px, md: 720px, lg: 960px, xl: 1140px) !default;
+$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) !default;
+$grid-columns:                12 !default;
 
 $gray-100: #f8f9fa !default;
 $gray-200: #e9ecef !default;
@@ -267,136 +251,126 @@ $gray-700: #495057 !default;
 $gray-800: #343a40 !default;
 $gray-900: #212529 !default;
 
-$input-btn-padding-y: 0.375rem !default;
-$input-btn-padding-x: 0.75rem !default;
-$input-btn-line-height: $line-height-base !default;
+$input-btn-padding-y:         .375rem !default;
+$input-btn-padding-x:         .75rem !default;
+$input-btn-line-height:       $line-height-base !default;
 
-$input-btn-focus-width: 0.2rem !default;
-$input-btn-focus-color: rgba($component-active-bg, 0.25) !default;
-$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
+$input-btn-focus-width:       .2rem !default;
+$input-btn-focus-color:       rgba($component-active-bg, .25) !default;
+$input-btn-focus-box-shadow:  0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
 
-$input-btn-padding-y-sm: 0.25rem !default;
-$input-btn-padding-x-sm: 0.5rem !default;
-$input-btn-line-height-sm: $line-height-sm !default;
+$input-btn-padding-y-sm:      .25rem !default;
+$input-btn-padding-x-sm:      .5rem !default;
+$input-btn-line-height-sm:    $line-height-sm !default;
 
-$input-btn-padding-y-lg: 0.5rem !default;
-$input-btn-padding-x-lg: 1rem !default;
-$input-btn-line-height-lg: $line-height-lg !default;
+$input-btn-padding-y-lg:      .5rem !default;
+$input-btn-padding-x-lg:      1rem !default;
+$input-btn-line-height-lg:    $line-height-lg !default;
 
-$input-btn-border-width: $border-width !default;
+$input-btn-border-width:      $border-width !default;
 
-$border-radius: 0.25rem !default;
-$border-radius-lg: 0.3rem !default;
-$border-radius-sm: 0.2rem !default;
+$border-radius:               .25rem !default;
+$border-radius-lg:            .3rem !default;
+$border-radius-sm:            .2rem !default;
 
-$enable-rounded: true !default;
-$enable-transitions: true !default;
-$enable-gradients: false !default;
+$enable-rounded:            true !default;
+$enable-transitions:        true !default;
+$enable-gradients:          false !default;
 
-$btn-border-width: $input-btn-border-width !default;
+$btn-border-width:            $input-btn-border-width !default;
 $theme-colors: () !default;
-$btn-link-disabled-color: $gray-600 !default;
-$btn-padding-y: $input-btn-padding-y !default;
-$btn-padding-x: $input-btn-padding-x !default;
+$btn-link-disabled-color:     $gray-600 !default;
+$btn-padding-y:               $input-btn-padding-y !default;
+$btn-padding-x:               $input-btn-padding-x !default;
 
-$btn-padding-y-sm: $input-btn-padding-y-sm !default;
-$btn-padding-x-sm: $input-btn-padding-x-sm !default;
-$btn-line-height-sm: $input-btn-line-height-sm !default;
+$btn-padding-y-sm:            $input-btn-padding-y-sm !default;
+$btn-padding-x-sm:            $input-btn-padding-x-sm !default;
+$btn-line-height-sm:          $input-btn-line-height-sm !default;
 
-$btn-padding-y-lg: $input-btn-padding-y-lg !default;
-$btn-padding-x-lg: $input-btn-padding-x-lg !default;
-$btn-line-height-lg: $input-btn_line-height-lg !default;
+$btn-padding-y-lg:            $input-btn-padding-y-lg !default;
+$btn-padding-x-lg:            $input-btn-padding-x-lg !default;
+$btn-line-height-lg:          $input-btn-line-height-lg !default;
 
-$btn-border-radius: $border-radius !default;
-$btn-border-radius-lg: $border-radius-lg !default;
-$btn-border-radius-sm: $border-radius-sm !default;
+$btn-border-radius:           $border-radius !default;
+$btn-border-radius-lg:        $border-radius-lg !default;
+$btn-border-radius-sm:        $border-radius-sm !default;
 
-$input-padding-y-sm: $input-btn-padding-y-sm !default;
-$input-padding-x-sm: $input-btn-padding-x-sm !default;
+$input-padding-y-sm:                    $input-btn-padding-y-sm !default;
+$input-padding-x-sm:                    $input-btn-padding-x-sm !default;
 
-$btn-block-spacing-y: 0.5rem !default;
+$btn-block-spacing-y:         .5rem !default;
 
-$transition-fade: opacity 0.15s linear !default;
-$transition-collapse: height 0.35s ease !default;
+$transition-fade:             opacity .15s linear !default;
+$transition-collapse:         height .35s ease !default;
 
 // Close
 
-$close-font-size: $font-size-base * 1.5 !default;
-$close-font-weight: $font-weight-bold !default;
-$close-color: $black !default;
-$close-text-shadow: 0 1px 0 $white !default;
+$close-font-size:                   $font-size-base * 1.5 !default;
+$close-font-weight:                 $font-weight-bold !default;
+$close-color:                       $black !default;
+$close-text-shadow:                 0 1px 0 $white !default;
 
 // Modal
 
-$zindex-modal-backdrop: 1040 !default;
-$zindex-modal: 1050 !default;
-$modal-inner-padding: 1rem !default;
-$modal-dialog-margin: 0.5rem !default;
+$zindex-modal-backdrop:             1040 !default;
+$zindex-modal:                      1050 !default;
+$modal-inner-padding:         1rem !default;
+$modal-dialog-margin:         .5rem !default;
 $modal-dialog-margin-y-sm-up: 1.75rem !default;
-$modal-title-line-height: $line-height-base !default;
-$modal-content-bg: $white !default;
-$modal-content-border-color: rgba($black, 0.2) !default;
-$modal-content-border-width: $border-width !default;
-$modal-content-box-shadow-xs: 0 0.25rem 0.5rem rgba($black, 0.5) !default;
-$modal-content-box-shadow-sm-up: 0 0.5rem 1rem rgba($black, 0.5) !default;
-$modal-backdrop-bg: $black !default;
-$modal-backdrop-opacity: 0.5 !default;
-$modal-header-border-color: $gray-200 !default;
-$modal-footer-border-color: $modal-header-border-color !default;
-$modal-header-border-width: $modal-content-border-width !default;
-$modal-footer-border-width: $modal-header-border-width !default;
-$modal-header-padding: 1rem !default;
-$modal-lg: 800px !default;
-$modal-md: 500px !default;
-$modal-sm: 300px !default;
-$modal-transition: transform 0.3s ease-out !default;
+$modal-title-line-height:           $line-height-base !default;
+$modal-content-bg:               $white !default;
+$modal-content-border-color:     rgba($black, .2) !default;
+$modal-content-border-width:     $border-width !default;
+$modal-content-box-shadow-xs:    0 .25rem .5rem rgba($black, .5) !default;
+$modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default;
+$modal-backdrop-bg:           $black !default;
+$modal-backdrop-opacity:      .5 !default;
+$modal-header-border-color:   $gray-200 !default;
+$modal-footer-border-color:   $modal-header-border-color !default;
+$modal-header-border-width:   $modal-content-border-width !default;
+$modal-footer-border-width:   $modal-header-border-width !default;
+$modal-header-padding:        1rem !default;
+$modal-lg:                          800px !default;
+$modal-md:                          500px !default;
+$modal-sm:                          300px !default;
+$modal-transition:                  transform .3s ease-out !default;
 
 // Popovers
 
-$zindex-popover: 1060 !default;
-$popover-font-size: $font-size-sm !default;
-$popover-bg: $white !default;
-$popover-max-width: 276px !default;
-$popover-border-width: $border-width !default;
-$popover-border-color: rgba($black, 0.2) !default;
-$popover-border-radius: $border-radius-lg !default;
-$popover-box-shadow: 0 0.25rem 0.5rem rgba($black, 0.2) !default;
-$popover-header-bg: darken($popover-bg, 3%) !default;
-$popover-header-color: $headings-color !default;
-$popover-header-padding-y: 0.5rem !default;
-$popover-header-padding-x: 0.75rem !default;
-$popover-body-color: $body-color !default;
-$popover-body-padding-y: $popover-header-padding-y !default;
-$popover-body-padding-x: $popover-header-padding-x !default;
-$popover-arrow-width: 1rem !default;
-$popover-arrow-height: 0.5rem !default;
-$popover-arrow-color: $popover-bg !default;
-$popover-arrow-outer-color: fade-in($popover-border-color, 0.05) !default;
-
-$border-color: $gray-300 !default;
-
-$zindex-dropdown: 1000 !default;
-$zindex-sticky: 1020 !default;
-$zindex-fixed: 1030 !default;
-$zindex-modal-backdrop: 1040 !default;
-$zindex-modal: 1050 !default;
-$zindex-tooltip: 1070 !default;
-$zindex-share: 1 !default;
+$zindex-popover:                    1060 !default;
+$popover-font-size:                 $font-size-sm !default;
+$popover-bg:                        $white !default;
+$popover-max-width:                 276px !default;
+$popover-border-width:              $border-width !default;
+$popover-border-color:              rgba($black, .2) !default;
+$popover-border-radius:             $border-radius-lg !default;
+$popover-box-shadow:                0 .25rem .5rem rgba($black, .2) !default;
+$popover-header-bg:                 darken($popover-bg, 3%) !default;
+$popover-header-color:              $headings-color !default;
+$popover-header-padding-y:          .5rem !default;
+$popover-header-padding-x:          .75rem !default;
+$popover-body-color:                $body-color !default;
+$popover-body-padding-y:            $popover-header-padding-y !default;
+$popover-body-padding-x:            $popover-header-padding-x !default;
+$popover-arrow-width:               1rem !default;
+$popover-arrow-height:              .5rem !default;
+$popover-arrow-color:               $popover-bg !default;
+$popover-arrow-outer-color:         fade-in($popover-border-color, .05) !default;
+
+
+$border-color:                $gray-300 !default;
+
+$zindex-dropdown:                   1000 !default;
+$zindex-sticky:                     1020 !default;
+$zindex-fixed:                      1030 !default;
+$zindex-modal-backdrop:             1040 !default;
+$zindex-modal:                      1050 !default;
+$zindex-tooltip:                    1070 !default;
+$zindex-share:                      1 !default;
 
 // This variable affects the `.h-*` and `.w-*` classes.
 $sizes: () !default;
-
-/* sass-lint:disable indentation */
-$sizes: map-merge(
-  (
-    25: 25%,
-    50: 50%,
-    75: 75%,
-    100: 100%,
-  ),
-  $sizes
-);
-/* sass-lint:enable indentation */
+$sizes: map-merge((25: 25%, 50: 50%, 75: 75%, 100: 100%), $sizes);
 
 // Spacing
 //
@@ -407,33 +381,13 @@ $sizes: map-merge(
 // stylelint-disable
 $spacer: 1rem !default;
 $spacers: () !default;
-
-/* sass-lint:disable indentation */
-$spacers: map-merge(
-  (
-    0: 0,
-    1: (
-      $spacer * 0.25,
-    ),
-    2: (
-      $spacer * 0.5,
-    ),
-    3: $spacer,
-    4: (
-      $spacer * 1.5,
-    ),
-    5: (
-      $spacer * 3,
-    ),
-  ),
-  $spacers
-);
-/* sass-lint:enable indentation */
+$spacers: map-merge((0: 0, 1: ($spacer * .25), 2: ($spacer * .5), 3: $spacer, 4: ($spacer * 1.5), 5: ($spacer * 3)), $spacers);
 
 // Bootstrap Printing checked
-$print-page-size: a3 !default;
-$print-body-min-width: map-get($grid-breakpoints, 'lg') !default;
-$enable-print-styles: true !default;
+$print-page-size:                   a3 !default;
+$print-body-min-width:              map-get($grid-breakpoints, 'lg') !default;
+$enable-print-styles:       true !default;
+
 
 //account-families
 $ac-border-radius: 10px;
@@ -449,4 +403,4 @@ $monza: #e30613;
 $downriver: #0c3153;
 $rose-pink: #ff858d;
 
-@import 'colors-semantic';
+@import 'colors-semantic';

package/src/scss/kitchen-plp-main.scss

@@ -24,3 +24,6 @@
 @import 'components/kitchen/filter-card';
 @import 'components/kitchen/swatches';
 @import 'components/kitchen/chips';
+@import 'components/kitchen/plp-filters';
+@import 'components/kitchen/filter-modal';
+@import 'components/kitchen/sort-by';