wickes-css2 2.105.0-develop.2 → 2.105.0-develop.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (168) hide show
  1. package/Readme.md +3 -2
  2. package/build/css/category-main.css +1 -1
  3. package/build/css/homepage-main.css +1 -1
  4. package/build/css/kitchen-plp-main.css +1 -1
  5. package/build/css/main.css +1 -1
  6. package/build/css/my-account-main-v2.css +1 -1
  7. package/build/css/my-account-main.css +1 -1
  8. package/build/css/pages/page_product_search.css +1 -1
  9. package/build/css/pages/page_products-list-combined.css +1 -1
  10. package/build/css/pages/page_products-list.css +1 -1
  11. package/build/css/pdp-main-before-combine.css +1 -1
  12. package/build/css/pdp-main-non-critical.css +1 -1
  13. package/build/css/pdp-main.css +1 -1
  14. package/build/css/plp-main.css +1 -1
  15. package/build/css/store-locator-main.css +1 -1
  16. package/build/js/account-members.min.js +1 -1
  17. package/build/js/basket.min.js +2 -2
  18. package/build/js/bundle.min.js +1 -1
  19. package/build/js/checkout.min.js +2 -2
  20. package/build/js/emulation.min.js +12122 -11594
  21. package/build/js/general.bundle.min.js +1 -1
  22. package/build/js/kitchen/kitchen-plp.min.js +1 -9
  23. package/build/js/merged-checkout.min.js +2 -2
  24. package/build/js/mini-basket-slider.min.js +1 -1
  25. package/build/js/page/basket/basket-update-cart-action.js +59 -56
  26. package/build/js/page/basket/basket-update-cart.js +27 -27
  27. package/build/js/page/basket/basket-utils.js +40 -33
  28. package/build/js/page/basket/mini-basket-total.js +70 -66
  29. package/build/js/page/basket/quantity-change-handler.js +73 -55
  30. package/build/js/page/basket/update-quantity-operation.js +39 -30
  31. package/build/js/page/basket/update-quantity.js +62 -62
  32. package/build/js/page/basket-v2.js +362 -229
  33. package/build/js/page/billie-business-type.js +27 -27
  34. package/build/js/page/checkout-payment-details.js +301 -299
  35. package/build/js/page/components/discounts.js +39 -36
  36. package/build/js/page/components/mini-basket-slider.js +604 -545
  37. package/build/js/page/filters/desktop-nav.js +64 -0
  38. package/build/js/page/filters/mobile-nav.js +93 -0
  39. package/build/js/page/filters/plp-filters-chips.js +92 -0
  40. package/build/js/page/filters/plp-filters-mobile.js +150 -0
  41. package/build/js/page/filters/plp-filters-panel.js +123 -0
  42. package/build/js/page/filters/plp-filters-utils.js +66 -0
  43. package/build/js/page/filters/plp-filters.js +256 -0
  44. package/build/js/page/filters/sort-by.js +172 -0
  45. package/build/js/page/klarna-modal-scroll-disable.js +4 -4
  46. package/build/js/page/online-exclusive.js +28 -30
  47. package/build/js/page/search-filter.js +62 -0
  48. package/build/js/page/utils/helpers.js +14 -9
  49. package/build/js/page/utils/show-more-less.js +273 -0
  50. package/build/js/pdp.bundle.min.js +1 -1
  51. package/build/js/plp-filters.min.js +9 -0
  52. package/build/js/plp.bundle.min.js +1 -1
  53. package/build/js/project-list.min.js +1 -1
  54. package/build/js/search-filter.min.js +1 -0
  55. package/package.json +5 -3
  56. package/src/components/accordion.hbs +2 -2
  57. package/src/components/generate-project-id.hbs +1 -1
  58. package/src/components/kitchen/dropdown.hbs +6 -3
  59. package/src/components/kitchen/filter-modal-content-kitchen.hbs +10 -0
  60. package/src/components/kitchen/filter-modal.hbs +10 -13
  61. package/src/components/kitchen/plp-filters.hbs +3 -1
  62. package/src/components/kitchen/sort-by.hbs +1 -1
  63. package/src/components/search-filter-modal-content.hbs +102 -0
  64. package/src/components/search-filter.hbs +121 -112
  65. package/src/components/shopping-list-with-share-list-v2.hbs +28 -10
  66. package/src/components/shopping-list.hbs +5 -5
  67. package/src/data/data_plp_load-more.json +1 -1
  68. package/src/elements/btn.hbs +7 -0
  69. package/src/js/components/general/accordion.js +38 -29
  70. package/src/js/components/general/cart-slider.js +19 -16
  71. package/src/js/components/general/create-popup-slider.js +168 -173
  72. package/src/js/emulation/big-wins.js +1081 -904
  73. package/src/js/emulation/billie-modal.js +23 -19
  74. package/src/js/emulation/checkout-payment-details.js +47 -38
  75. package/src/js/emulation/custom-slider-emulation.js +17 -13
  76. package/src/js/emulation/filters-emulation.js +164 -0
  77. package/src/js/emulation/forms.js +360 -323
  78. package/src/js/emulation/mini-basket-data.js +1051 -923
  79. package/src/js/emulation/paymentLoader.js +17 -17
  80. package/src/js/emulation/pdf-file-loader.js +89 -91
  81. package/src/js/emulation/popover-mini-basket.js +246 -239
  82. package/src/js/emulation/product-counter.js +50 -0
  83. package/src/js/emulation/project-list-pdp.js +321 -316
  84. package/src/js/emulation/repayment-toggle.js +23 -24
  85. package/src/js/emulation/reset-filter-desktop.js +5 -0
  86. package/src/js/emulation/selectable.js +22 -18
  87. package/src/js/emulation/wismo-details.js +23 -31
  88. package/src/js/page/basket/basket-update-cart-action.js +59 -56
  89. package/src/js/page/basket/basket-update-cart.js +27 -27
  90. package/src/js/page/basket/basket-utils.js +40 -33
  91. package/src/js/page/basket/mini-basket-total.js +70 -66
  92. package/src/js/page/basket/quantity-change-handler.js +73 -55
  93. package/src/js/page/basket/update-quantity-operation.js +39 -30
  94. package/src/js/page/basket/update-quantity.js +62 -62
  95. package/src/js/page/basket-v2.js +362 -229
  96. package/src/js/page/billie-business-type.js +27 -27
  97. package/src/js/page/checkout-payment-details.js +301 -299
  98. package/src/js/page/components/discounts.js +39 -36
  99. package/src/js/page/components/mini-basket-slider.js +604 -545
  100. package/src/js/page/filters/desktop-nav.js +64 -0
  101. package/src/js/page/filters/mobile-nav.js +93 -0
  102. package/src/js/page/filters/plp-filters-chips.js +92 -0
  103. package/src/js/page/filters/plp-filters-mobile.js +150 -0
  104. package/src/js/page/filters/plp-filters-panel.js +123 -0
  105. package/src/js/page/filters/plp-filters-utils.js +66 -0
  106. package/src/js/page/filters/plp-filters.js +256 -0
  107. package/src/js/page/filters/sort-by.js +172 -0
  108. package/src/js/page/klarna-modal-scroll-disable.js +4 -4
  109. package/src/js/page/online-exclusive.js +28 -30
  110. package/src/js/page/search-filter.js +62 -0
  111. package/src/js/page/utils/helpers.js +14 -9
  112. package/src/js/page/utils/show-more-less.js +273 -0
  113. package/src/page_empty-shared-project-list-bicester-hub.html +3 -0
  114. package/src/page_kitchen-plp.html +2 -2
  115. package/src/page_my-shopping-list-hide-download.html +1 -1
  116. package/src/page_plp-with-paint.html +2 -7
  117. package/src/page_plp.html +2 -7
  118. package/src/page_plp_v2-energy-efficiency.html +1 -6
  119. package/src/page_plp_v2-favourite-products.html +6 -7
  120. package/src/page_plp_v2-vat.html +2 -7
  121. package/src/page_plp_v2.html +22 -9
  122. package/src/page_product_search-vat.html +2 -7
  123. package/src/page_product_search.html +2 -7
  124. package/src/page_project-list-with-new-share-popup-android.html +15 -0
  125. package/src/page_project-list-with-new-share-popup-ios.html +15 -0
  126. package/src/page_project-list-with-new-share-popup.html +1 -0
  127. package/src/page_search-results.html +2 -7
  128. package/src/page_shared-project-list-bicester-hub.html +1 -0
  129. package/src/scss/common/_common.scss +5 -4
  130. package/src/scss/components/_accordion.scss +1 -3
  131. package/src/scss/components/_custom-slider.scss +15 -14
  132. package/src/scss/components/_date-selection-add-new-styles.scss +6 -7
  133. package/src/scss/components/_date-selection.scss +1 -1
  134. package/src/scss/components/{kitchen/_filter-modal.scss → _filter-modal.scss} +55 -4
  135. package/src/scss/components/{kitchen/_plp-filters.scss → _plp-filters.scss} +31 -13
  136. package/src/scss/components/_popover-mini-basket.scss +3 -3
  137. package/src/scss/components/_search-filter.scss +95 -15
  138. package/src/scss/components/_shared-shopping-list.scss +22 -0
  139. package/src/scss/components/_shopping-list.scss +18 -8
  140. package/src/scss/components/_sort-by.scss +190 -0
  141. package/src/scss/components/checkout-chip.scss +2 -2
  142. package/src/scss/components/checkout-payment-repayment-terms.scss +1 -1
  143. package/src/scss/globals/_global-components.scss +3 -0
  144. package/src/scss/helpers/_colors-semantic.scss +68 -68
  145. package/src/scss/helpers/_variables.scss +242 -196
  146. package/src/scss/kitchen-plp-main.scss +0 -3
  147. package/src/scss/main.scss +65 -65
  148. package/src/scss/pages/page_product-details-v2.scss +1 -4
  149. package/src/scss/pages/page_product_search.scss +9 -1
  150. package/src/scss/pages/page_products-list-combined.scss +28 -24
  151. package/src/scss/pages/page_products-list.scss +8 -0
  152. package/src/scss/pages/tradePro-rewards.scss +2 -3
  153. package/src/sitemap.html +9 -1
  154. package/build/js/page/accordion.js +0 -35
  155. package/build/js/page/kitchen/plp-filters-chips.js +0 -90
  156. package/build/js/page/kitchen/plp-filters-mobile.js +0 -72
  157. package/build/js/page/kitchen/plp-filters-panel.js +0 -119
  158. package/build/js/page/kitchen/plp-filters-utils.js +0 -65
  159. package/build/js/page/kitchen/plp-filters.js +0 -205
  160. package/build/js/page/kitchen/sort-by.js +0 -157
  161. package/src/js/components/general/search-filter.js +0 -21
  162. package/src/js/page/accordion.js +0 -35
  163. package/src/js/page/kitchen/plp-filters-chips.js +0 -90
  164. package/src/js/page/kitchen/plp-filters-mobile.js +0 -72
  165. package/src/js/page/kitchen/plp-filters-panel.js +0 -119
  166. package/src/js/page/kitchen/plp-filters-utils.js +0 -65
  167. package/src/js/page/kitchen/plp-filters.js +0 -205
  168. package/src/js/page/kitchen/sort-by.js +0 -157
@@ -1,37 +1,37 @@
1
1
  //// Color scheme
2
2
 
3
3
  // Primary Brand Colors
4
- $blue-dark: #0a3055; // Base brand color for background
5
- $blue: #0277bd; // CTAs
6
- $green: #67a509; // Tick icons; Buttons in the checkout
4
+ $blue-dark: #0a3055; // Base brand color for background
5
+ $blue: #0277bd; // CTAs
6
+ $green: #67a509; // Tick icons; Buttons in the checkout
7
7
  $polishedPine: #67a589;
8
- $green-dark: #487306; // Active state of button-action
8
+ $green-dark: #487306; // Active state of button-action
9
9
 
10
10
  // Additional colors
11
- $green-light: #9acd32; // To denote 'new’; Only used as a background
11
+ $green-light: #9acd32; // To denote 'new’; Only used as a background
12
12
  $light-green-wa: #25d366; // WhatsApp background
13
- $yellow: #f7ca18; // Clearance; Only used as a background
14
- $orange: #ffc439; // Paypal background
15
- $red: #cf000f; // Offers
13
+ $yellow: #f7ca18; // Clearance; Only used as a background
14
+ $orange: #ffc439; // Paypal background
15
+ $red: #cf000f; // Offers
16
16
  $red-dark: #7c0009;
17
- $red-bg: #fdf2f3; // Equal to red-transparent for cases when rgba usage is prohibited
18
- $app-error: #cf100d; // For tradePro app notification error
19
- $gray-dark: #3e3e3e; // Body copy
17
+ $red-bg: #fdf2f3; // Equal to red-transparent for cases when rgba usage is prohibited
18
+ $app-error: #cf100d; // For tradePro app notification error
19
+ $gray-dark: #3e3e3e; // Body copy
20
20
  $gray-border: #d6d6d6;
21
- $gray: #ccc; // Key-lines - to separate content; Background colour; Card borders
22
- $gray-light: #eee; // Key-lines - to separate content; Background colour
21
+ $gray: #ccc; // Key-lines - to separate content; Background colour; Card borders
22
+ $gray-light: #eee; // Key-lines - to separate content; Background colour
23
23
  $gray-lighter: #f4f4f4;
24
24
  $gray-whiter: #f1f1f1;
25
- $gray-bg: #f8f8f8; // Menu background colour
26
- $gray-gradient: #e0e0e0; // tabs gradient gray
25
+ $gray-bg: #f8f8f8; // Menu background colour
26
+ $gray-gradient: #e0e0e0; // tabs gradient gray
27
27
  $gray-quill: #cececd;
28
28
  $gray-wait: #9d9d9c;
29
29
  $gray-dim: #656565;
30
30
  $gray-matt: #515151;
31
- $squant: #666666;
32
- $error-bg: #fcf2f3; // Error notification background colour
33
- $positive: #8dc63f; // Positive colour
34
- $negative: #ed1c24; // Negative colour
31
+ $squant: #666;
32
+ $error-bg: #fcf2f3; // Error notification background colour
33
+ $positive: #8dc63f; // Positive colour
34
+ $negative: #ed1c24; // Negative colour
35
35
  $blue-badge: #019ee3;
36
36
  $pacific-depths: #004587;
37
37
  $usp-icon-color: #1a77bc; // Usp icon color
@@ -39,9 +39,9 @@ $pacific-depths: #004587;
39
39
  $line-through: #242424;
40
40
  $ma-white: #f4f9fe;
41
41
  $blue-satin: #99b5cf;
42
- $notification-success-bg: rgba(103, 165, 9, .05);;
43
- $notification-failure-bg: rgba(207, 0, 15, .05);;
44
- $notification-warn-bg: rgba(255, 196, 57, .05);;
42
+ $notification-success-bg: rgba(103, 165, 9, 0.05);
43
+ $notification-failure-bg: rgba(207, 0, 15, 0.05);
44
+ $notification-warn-bg: rgba(255, 196, 57, 0.05);
45
45
 
46
46
  $footer-gray: #f5f5f5;
47
47
  $footer-bullet: #c8c8c8;
@@ -88,47 +88,51 @@ $peacock-plume: #417372;
88
88
  $victorian-white: #fefef6;
89
89
 
90
90
  // Semi-transparent colors
91
- $white-transparent30: rgba(255, 255, 255, .3);
92
- $white-transparent40: rgba(255, 255, 255, .4);
93
- $white-transparent80: rgba(255, 255, 255, .8);
94
- $white-transparent90: rgba(255, 255, 255, .9);
95
- $white-transparent20: rgba(216, 216, 216, .2);
96
- $gray-dark-transparent60: rgba(62, 62, 62, .6);
97
- $gray-dark-transparent75: rgba(65, 65, 65, .75);
98
- $gray-dark-transparent80: rgba(65, 65, 65, .8);
99
- $gray-dark-transparent90: rgba(65, 65, 65, .9);
91
+ $white-transparent30: rgba(255, 255, 255, 0.3);
92
+ $white-transparent40: rgba(255, 255, 255, 0.4);
93
+ $white-transparent80: rgba(255, 255, 255, 0.8);
94
+ $white-transparent90: rgba(255, 255, 255, 0.9);
95
+ $white-transparent20: rgba(216, 216, 216, 0.2);
96
+ $gray-dark-transparent60: rgba(62, 62, 62, 0.6);
97
+ $gray-dark-transparent75: rgba(65, 65, 65, 0.75);
98
+ $gray-dark-transparent80: rgba(65, 65, 65, 0.8);
99
+ $gray-dark-transparent90: rgba(65, 65, 65, 0.9);
100
100
  $black-transparent0: rgba(0, 0, 0, 0);
101
- $black-transparent10: rgba(0, 0, 0, .1);
102
- $black-transparent12: rgba(0, 0, 0, .12);
103
- $black-transparent24: rgba(0, 0, 0, .24);
104
- $black-transparent20: rgba(0, 0, 0, .2);
105
- $black-transparent30: rgba(0, 0, 0, .3);
106
- $black-transparent35: rgba(0, 0, 0, .35);
107
- $black-transparent40: rgba(0, 0, 0, .4);
108
- $black-transparent50: rgba(0, 0, 0, .5);
109
- $black-transparent60: rgba(0, 0, 0, .6);
110
- $black-transparent75: rgba(0, 0, 0, .75);
111
- $black-transparent80: rgba(0, 0, 0, .8);
112
- $blue-transparent20: rgba(2, 119, 189, .2);
113
- $blue-transparent10: rgba(2, 119, 189, .1);
101
+ $black-transparent10: rgba(0, 0, 0, 0.1);
102
+ $black-transparent12: rgba(0, 0, 0, 0.12);
103
+ $black-transparent24: rgba(0, 0, 0, 0.24);
104
+ $black-transparent20: rgba(0, 0, 0, 0.2);
105
+ $black-transparent30: rgba(0, 0, 0, 0.3);
106
+ $black-transparent35: rgba(0, 0, 0, 0.35);
107
+ $black-transparent40: rgba(0, 0, 0, 0.4);
108
+ $black-transparent50: rgba(0, 0, 0, 0.5);
109
+ $black-transparent60: rgba(0, 0, 0, 0.6);
110
+ $black-transparent75: rgba(0, 0, 0, 0.75);
111
+ $black-transparent80: rgba(0, 0, 0, 0.8);
112
+ $blue-transparent20: rgba(2, 119, 189, 0.2);
113
+ $blue-transparent10: rgba(2, 119, 189, 0.1);
114
114
  $blue-transparent3: #0277bd52;
115
- $blue-transparent5: rgba(2, 119, 189, .05);
115
+ $blue-transparent5: rgba(2, 119, 189, 0.05);
116
116
  $blue-transparent5-rgb: rgb(242, 248, 251);
117
- $dark-blue-transparent10: rgba(10, 48, 85, .1);
118
- $red-transparent5: rgba(207, 0, 15, .05);
119
- $red-transparent10: rgba(207, 0, 15, .1);
120
- $yellow-transparent5: rgba(247, 202, 24, .05);
121
- $green-transparent5: rgba(103, 165, 9, .05);
122
- $gray-light-transparent35: rgba(204, 204, 204, .35);
117
+ $dark-blue-transparent10: rgba(10, 48, 85, 0.1);
118
+ $red-transparent5: rgba(207, 0, 15, 0.05);
119
+ $red-transparent10: rgba(207, 0, 15, 0.1);
120
+ $yellow-transparent5: rgba(247, 202, 24, 0.05);
121
+ $green-transparent5: rgba(103, 165, 9, 0.05);
122
+ $gray-light-transparent35: rgba(204, 204, 204, 0.35);
123
123
  $gray-light-transparent0: rgba(216, 216, 216, 0);
124
- $radial-black-gradient: radial-gradient(ellipse closest-corner at 50% 50%, $black 1%, $black-transparent75 100%);
124
+ $radial-black-gradient: radial-gradient(
125
+ ellipse closest-corner at 50% 50%,
126
+ $black 1%,
127
+ $black-transparent75 100%
128
+ );
125
129
  $shadow-gradient: linear-gradient(180deg, $black-transparent30 0%, $gray-light-transparent0 100%);
126
130
 
127
131
  //// Set bootstrap variables
128
132
  $body-color: $gray-dark;
129
133
  $font-family-base: 'Roboto', Helvetica, Arial, sans-serif;
130
- $font-size-base: .875rem;
131
- $font-size-13: .8125rem;
134
+ $font-size-base: 0.875rem;
135
+ $font-size-13: 0.8125rem;
132
136
  $line-height-base: 1.57142857;
133
137
  $modal-title-line-height: 2rem;
134
138
  $modal-header-padding: 1.25rem;
@@ -140,7 +144,7 @@ $tooltip-padding-y: 8px;
140
144
  $tooltip-padding-x: 10px;
141
145
  $tooltip-border-radius: 0;
142
146
  $tooltip-bg: $warm-grey;
143
- $tooltip-font-size: .75rem;
147
+ $tooltip-font-size: 0.75rem;
144
148
  $tooltip-opacity: 1;
145
149
 
146
150
  $popover-body-padding-y: 0;
@@ -157,7 +161,7 @@ $btn-font-weight: 500;
157
161
  $btn-box-shadow: none;
158
162
  $btn-focus-box-shadow: none;
159
163
  $btn-active-box-shadow: none;
160
- $btn-disabled-opacity: .4;
164
+ $btn-disabled-opacity: 0.4;
161
165
  $btn-padding-y: 8px;
162
166
  $btn-padding-x: 15px;
163
167
  $btn-line-height: $line-height-base;
@@ -171,6 +175,7 @@ $label-z-index: 2;
171
175
  $circle-z-index: -1;
172
176
  $main-nav-overlay: 9;
173
177
  $offer-banner: 10;
178
+ $popover-under: 99;
174
179
  $popover: 100;
175
180
  $header: 101;
176
181
  $header-search: 102;
@@ -197,49 +202,60 @@ $brown-icon: #7b6406;
197
202
  $lemon-icon: #aeb277;
198
203
 
199
204
  //Bootstrap-extraction
200
- $font-weight-light: 300 !default;
201
- $font-weight-normal: 400 !default;
202
- $font-weight-bold: 700 !default;
203
- $font-weight-base: $font-weight-normal !default;
204
- $small-font-size: 80% !default;
205
- $font-size-lg: ($font-size-base * 1.25) !default;
206
- $font-size-sm: ($font-size-base * .875) !default;
207
- $body-bg: $white !default;
208
- $component-active-color: $white !default;
205
+ $font-weight-light: 300 !default;
206
+ $font-weight-normal: 400 !default;
207
+ $font-weight-bold: 700 !default;
208
+ $font-weight-base: $font-weight-normal !default;
209
+ $small-font-size: 80% !default;
210
+ $font-size-lg: ($font-size-base * 1.25) !default;
211
+ $font-size-sm: ($font-size-base * 0.875) !default;
212
+ $body-bg: $white !default;
213
+ $component-active-color: $white !default;
209
214
  $spacer: 1rem !default;
210
- $headings-margin-bottom: calc($spacer / 2) !default;
211
- $paragraph-margin-bottom: 1rem !default;
212
- $dt-font-weight: $font-weight-bold !default;
213
- $link-hover-decoration: underline !default;
214
- $table-cell-padding: .75rem !default;
215
+ $headings-margin-bottom: calc($spacer / 2) !default;
216
+ $paragraph-margin-bottom: 1rem !default;
217
+ $dt-font-weight: $font-weight-bold !default;
218
+ $link-hover-decoration: underline !default;
219
+ $table-cell-padding: 0.75rem !default;
215
220
  $gray-600: #6c757d !default;
216
- $text-muted: $gray-600 !default;
217
- $headings-font-family: inherit !default;
218
- $headings-font-weight: 500 !default;
219
- $headings-line-height: 1.2 !default;
220
- $headings-color: inherit !default;
221
- $h1-font-size: $font-size-base * 2.5 !default;
222
- $h2-font-size: $font-size-base * 2 !default;
223
- $h3-font-size: $font-size-base * 1.75 !default;
224
- $h4-font-size: $font-size-base * 1.5 !default;
225
- $h5-font-size: $font-size-base * 1.25 !default;
226
- $h6-font-size: $font-size-base !default;
227
- $lead-font-size: ($font-size-base * 1.25) !default;
228
- $lead-font-weight: 300 !default;
229
- $primary: $blue !default;
230
- $component-active-bg: $primary !default;
231
- $line-height-sm: 1.5 !default;
232
- $line-height-lg: 1.5 !default;
233
- $display-line-height: $headings-line-height !default;
234
- $hr-margin-y: $spacer !default;
235
- $hr-border-color: rgba($black, .1) !default;
236
- $border-width: 1px !default;
237
- $hr-border-width: $border-width !default;
238
- $enable-grid-classes: true !default;
239
- $grid-gutter-width: 30px !default;
240
- $container-max-widths: (sm: 540px, md: 720px, lg: 960px, xl: 1140px) !default;
241
- $grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) !default;
242
- $grid-columns: 12 !default;
221
+ $text-muted: $gray-600 !default;
222
+ $headings-font-family: inherit !default;
223
+ $headings-font-weight: 500 !default;
224
+ $headings-line-height: 1.2 !default;
225
+ $headings-color: inherit !default;
226
+ $h1-font-size: $font-size-base * 2.5 !default;
227
+ $h2-font-size: $font-size-base * 2 !default;
228
+ $h3-font-size: $font-size-base * 1.75 !default;
229
+ $h4-font-size: $font-size-base * 1.5 !default;
230
+ $h5-font-size: $font-size-base * 1.25 !default;
231
+ $h6-font-size: $font-size-base !default;
232
+ $lead-font-size: ($font-size-base * 1.25) !default;
233
+ $lead-font-weight: 300 !default;
234
+ $primary: $blue !default;
235
+ $component-active-bg: $primary !default;
236
+ $line-height-sm: 1.5 !default;
237
+ $line-height-lg: 1.5 !default;
238
+ $display-line-height: $headings-line-height !default;
239
+ $hr-margin-y: $spacer !default;
240
+ $hr-border-color: rgba($black, 0.1) !default;
241
+ $border-width: 1px !default;
242
+ $hr-border-width: $border-width !default;
243
+ $enable-grid-classes: true !default;
244
+ $grid-gutter-width: 30px !default;
245
+ $container-max-widths: (
246
+ sm: 540px,
247
+ md: 720px,
248
+ lg: 960px,
249
+ xl: 1140px,
250
+ ) !default;
251
+ $grid-breakpoints: (
252
+ xs: 0,
253
+ sm: 576px,
254
+ md: 768px,
255
+ lg: 992px,
256
+ xl: 1200px,
257
+ ) !default;
258
+ $grid-columns: 12 !default;
243
259
 
244
260
  $gray-100: #f8f9fa !default;
245
261
  $gray-200: #e9ecef !default;
@@ -251,126 +267,136 @@ $gray-700: #495057 !default;
251
267
  $gray-800: #343a40 !default;
252
268
  $gray-900: #212529 !default;
253
269
 
254
- $input-btn-padding-y: .375rem !default;
255
- $input-btn-padding-x: .75rem !default;
256
- $input-btn-line-height: $line-height-base !default;
270
+ $input-btn-padding-y: 0.375rem !default;
271
+ $input-btn-padding-x: 0.75rem !default;
272
+ $input-btn-line-height: $line-height-base !default;
257
273
 
258
- $input-btn-focus-width: .2rem !default;
259
- $input-btn-focus-color: rgba($component-active-bg, .25) !default;
260
- $input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
274
+ $input-btn-focus-width: 0.2rem !default;
275
+ $input-btn-focus-color: rgba($component-active-bg, 0.25) !default;
276
+ $input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
261
277
 
262
- $input-btn-padding-y-sm: .25rem !default;
263
- $input-btn-padding-x-sm: .5rem !default;
264
- $input-btn-line-height-sm: $line-height-sm !default;
278
+ $input-btn-padding-y-sm: 0.25rem !default;
279
+ $input-btn-padding-x-sm: 0.5rem !default;
280
+ $input-btn-line-height-sm: $line-height-sm !default;
265
281
 
266
- $input-btn-padding-y-lg: .5rem !default;
267
- $input-btn-padding-x-lg: 1rem !default;
268
- $input-btn-line-height-lg: $line-height-lg !default;
282
+ $input-btn-padding-y-lg: 0.5rem !default;
283
+ $input-btn-padding-x-lg: 1rem !default;
284
+ $input-btn-line-height-lg: $line-height-lg !default;
269
285
 
270
- $input-btn-border-width: $border-width !default;
286
+ $input-btn-border-width: $border-width !default;
271
287
 
272
- $border-radius: .25rem !default;
273
- $border-radius-lg: .3rem !default;
274
- $border-radius-sm: .2rem !default;
288
+ $border-radius: 0.25rem !default;
289
+ $border-radius-lg: 0.3rem !default;
290
+ $border-radius-sm: 0.2rem !default;
275
291
 
276
- $enable-rounded: true !default;
277
- $enable-transitions: true !default;
278
- $enable-gradients: false !default;
292
+ $enable-rounded: true !default;
293
+ $enable-transitions: true !default;
294
+ $enable-gradients: false !default;
279
295
 
280
- $btn-border-width: $input-btn-border-width !default;
296
+ $btn-border-width: $input-btn-border-width !default;
281
297
  $theme-colors: () !default;
282
- $btn-link-disabled-color: $gray-600 !default;
283
- $btn-padding-y: $input-btn-padding-y !default;
284
- $btn-padding-x: $input-btn-padding-x !default;
298
+ $btn-link-disabled-color: $gray-600 !default;
299
+ $btn-padding-y: $input-btn-padding-y !default;
300
+ $btn-padding-x: $input-btn-padding-x !default;
285
301
 
286
- $btn-padding-y-sm: $input-btn-padding-y-sm !default;
287
- $btn-padding-x-sm: $input-btn-padding-x-sm !default;
288
- $btn-line-height-sm: $input-btn-line-height-sm !default;
302
+ $btn-padding-y-sm: $input-btn-padding-y-sm !default;
303
+ $btn-padding-x-sm: $input-btn-padding-x-sm !default;
304
+ $btn-line-height-sm: $input-btn-line-height-sm !default;
289
305
 
290
- $btn-padding-y-lg: $input-btn-padding-y-lg !default;
291
- $btn-padding-x-lg: $input-btn-padding-x-lg !default;
292
- $btn-line-height-lg: $input-btn-line-height-lg !default;
306
+ $btn-padding-y-lg: $input-btn-padding-y-lg !default;
307
+ $btn-padding-x-lg: $input-btn-padding-x-lg !default;
308
+ $btn-line-height-lg: $input-btn_line-height-lg !default;
293
309
 
294
- $btn-border-radius: $border-radius !default;
295
- $btn-border-radius-lg: $border-radius-lg !default;
296
- $btn-border-radius-sm: $border-radius-sm !default;
310
+ $btn-border-radius: $border-radius !default;
311
+ $btn-border-radius-lg: $border-radius-lg !default;
312
+ $btn-border-radius-sm: $border-radius-sm !default;
297
313
 
298
- $input-padding-y-sm: $input-btn-padding-y-sm !default;
299
- $input-padding-x-sm: $input-btn-padding-x-sm !default;
314
+ $input-padding-y-sm: $input-btn-padding-y-sm !default;
315
+ $input-padding-x-sm: $input-btn-padding-x-sm !default;
300
316
 
301
- $btn-block-spacing-y: .5rem !default;
317
+ $btn-block-spacing-y: 0.5rem !default;
302
318
 
303
- $transition-fade: opacity .15s linear !default;
304
- $transition-collapse: height .35s ease !default;
319
+ $transition-fade: opacity 0.15s linear !default;
320
+ $transition-collapse: height 0.35s ease !default;
305
321
 
306
322
  // Close
307
323
 
308
- $close-font-size: $font-size-base * 1.5 !default;
309
- $close-font-weight: $font-weight-bold !default;
310
- $close-color: $black !default;
311
- $close-text-shadow: 0 1px 0 $white !default;
324
+ $close-font-size: $font-size-base * 1.5 !default;
325
+ $close-font-weight: $font-weight-bold !default;
326
+ $close-color: $black !default;
327
+ $close-text-shadow: 0 1px 0 $white !default;
312
328
 
313
329
  // Modal
314
330
 
315
- $zindex-modal-backdrop: 1040 !default;
316
- $zindex-modal: 1050 !default;
317
- $modal-inner-padding: 1rem !default;
318
- $modal-dialog-margin: .5rem !default;
331
+ $zindex-modal-backdrop: 1040 !default;
332
+ $zindex-modal: 1050 !default;
333
+ $modal-inner-padding: 1rem !default;
334
+ $modal-dialog-margin: 0.5rem !default;
319
335
  $modal-dialog-margin-y-sm-up: 1.75rem !default;
320
- $modal-title-line-height: $line-height-base !default;
321
- $modal-content-bg: $white !default;
322
- $modal-content-border-color: rgba($black, .2) !default;
323
- $modal-content-border-width: $border-width !default;
324
- $modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !default;
325
- $modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default;
326
- $modal-backdrop-bg: $black !default;
327
- $modal-backdrop-opacity: .5 !default;
328
- $modal-header-border-color: $gray-200 !default;
329
- $modal-footer-border-color: $modal-header-border-color !default;
330
- $modal-header-border-width: $modal-content-border-width !default;
331
- $modal-footer-border-width: $modal-header-border-width !default;
332
- $modal-header-padding: 1rem !default;
333
- $modal-lg: 800px !default;
334
- $modal-md: 500px !default;
335
- $modal-sm: 300px !default;
336
- $modal-transition: transform .3s ease-out !default;
336
+ $modal-title-line-height: $line-height-base !default;
337
+ $modal-content-bg: $white !default;
338
+ $modal-content-border-color: rgba($black, 0.2) !default;
339
+ $modal-content-border-width: $border-width !default;
340
+ $modal-content-box-shadow-xs: 0 0.25rem 0.5rem rgba($black, 0.5) !default;
341
+ $modal-content-box-shadow-sm-up: 0 0.5rem 1rem rgba($black, 0.5) !default;
342
+ $modal-backdrop-bg: $black !default;
343
+ $modal-backdrop-opacity: 0.5 !default;
344
+ $modal-header-border-color: $gray-200 !default;
345
+ $modal-footer-border-color: $modal-header-border-color !default;
346
+ $modal-header-border-width: $modal-content-border-width !default;
347
+ $modal-footer-border-width: $modal-header-border-width !default;
348
+ $modal-header-padding: 1rem !default;
349
+ $modal-lg: 800px !default;
350
+ $modal-md: 500px !default;
351
+ $modal-sm: 300px !default;
352
+ $modal-transition: transform 0.3s ease-out !default;
337
353
 
338
354
  // Popovers
339
355
 
340
- $zindex-popover: 1060 !default;
341
- $popover-font-size: $font-size-sm !default;
342
- $popover-bg: $white !default;
343
- $popover-max-width: 276px !default;
344
- $popover-border-width: $border-width !default;
345
- $popover-border-color: rgba($black, .2) !default;
346
- $popover-border-radius: $border-radius-lg !default;
347
- $popover-box-shadow: 0 .25rem .5rem rgba($black, .2) !default;
348
- $popover-header-bg: darken($popover-bg, 3%) !default;
349
- $popover-header-color: $headings-color !default;
350
- $popover-header-padding-y: .5rem !default;
351
- $popover-header-padding-x: .75rem !default;
352
- $popover-body-color: $body-color !default;
353
- $popover-body-padding-y: $popover-header-padding-y !default;
354
- $popover-body-padding-x: $popover-header-padding-x !default;
355
- $popover-arrow-width: 1rem !default;
356
- $popover-arrow-height: .5rem !default;
357
- $popover-arrow-color: $popover-bg !default;
358
- $popover-arrow-outer-color: fade-in($popover-border-color, .05) !default;
359
-
360
-
361
- $border-color: $gray-300 !default;
362
-
363
- $zindex-dropdown: 1000 !default;
364
- $zindex-sticky: 1020 !default;
365
- $zindex-fixed: 1030 !default;
366
- $zindex-modal-backdrop: 1040 !default;
367
- $zindex-modal: 1050 !default;
368
- $zindex-tooltip: 1070 !default;
369
- $zindex-share: 1 !default;
356
+ $zindex-popover: 1060 !default;
357
+ $popover-font-size: $font-size-sm !default;
358
+ $popover-bg: $white !default;
359
+ $popover-max-width: 276px !default;
360
+ $popover-border-width: $border-width !default;
361
+ $popover-border-color: rgba($black, 0.2) !default;
362
+ $popover-border-radius: $border-radius-lg !default;
363
+ $popover-box-shadow: 0 0.25rem 0.5rem rgba($black, 0.2) !default;
364
+ $popover-header-bg: darken($popover-bg, 3%) !default;
365
+ $popover-header-color: $headings-color !default;
366
+ $popover-header-padding-y: 0.5rem !default;
367
+ $popover-header-padding-x: 0.75rem !default;
368
+ $popover-body-color: $body-color !default;
369
+ $popover-body-padding-y: $popover-header-padding-y !default;
370
+ $popover-body-padding-x: $popover-header-padding-x !default;
371
+ $popover-arrow-width: 1rem !default;
372
+ $popover-arrow-height: 0.5rem !default;
373
+ $popover-arrow-color: $popover-bg !default;
374
+ $popover-arrow-outer-color: fade-in($popover-border-color, 0.05) !default;
375
+
376
+ $border-color: $gray-300 !default;
377
+
378
+ $zindex-dropdown: 1000 !default;
379
+ $zindex-sticky: 1020 !default;
380
+ $zindex-fixed: 1030 !default;
381
+ $zindex-modal-backdrop: 1040 !default;
382
+ $zindex-modal: 1050 !default;
383
+ $zindex-tooltip: 1070 !default;
384
+ $zindex-share: 1 !default;
370
385
 
371
386
  // This variable affects the `.h-*` and `.w-*` classes.
372
387
  $sizes: () !default;
373
- $sizes: map-merge((25: 25%, 50: 50%, 75: 75%, 100: 100%), $sizes);
388
+
389
+ /* sass-lint:disable indentation */
390
+ $sizes: map-merge(
391
+ (
392
+ 25: 25%,
393
+ 50: 50%,
394
+ 75: 75%,
395
+ 100: 100%,
396
+ ),
397
+ $sizes
398
+ );
399
+ /* sass-lint:enable indentation */
374
400
 
375
401
  // Spacing
376
402
  //
@@ -381,13 +407,33 @@ $sizes: map-merge((25: 25%, 50: 50%, 75: 75%, 100: 100%), $sizes);
381
407
  // stylelint-disable
382
408
  $spacer: 1rem !default;
383
409
  $spacers: () !default;
384
- $spacers: map-merge((0: 0, 1: ($spacer * .25), 2: ($spacer * .5), 3: $spacer, 4: ($spacer * 1.5), 5: ($spacer * 3)), $spacers);
385
410
 
386
- // Bootstrap Printing checked
387
- $print-page-size: a3 !default;
388
- $print-body-min-width: map-get($grid-breakpoints, 'lg') !default;
389
- $enable-print-styles: true !default;
411
+ /* sass-lint:disable indentation */
412
+ $spacers: map-merge(
413
+ (
414
+ 0: 0,
415
+ 1: (
416
+ $spacer * 0.25,
417
+ ),
418
+ 2: (
419
+ $spacer * 0.5,
420
+ ),
421
+ 3: $spacer,
422
+ 4: (
423
+ $spacer * 1.5,
424
+ ),
425
+ 5: (
426
+ $spacer * 3,
427
+ ),
428
+ ),
429
+ $spacers
430
+ );
431
+ /* sass-lint:enable indentation */
390
432
 
433
+ // Bootstrap Printing checked
434
+ $print-page-size: a3 !default;
435
+ $print-body-min-width: map-get($grid-breakpoints, 'lg') !default;
436
+ $enable-print-styles: true !default;
391
437
 
392
438
  //account-families
393
439
  $ac-border-radius: 10px;
@@ -403,4 +449,4 @@ $monza: #e30613;
403
449
  $downriver: #0c3153;
404
450
  $rose-pink: #ff858d;
405
451
 
406
- @import 'colors-semantic';
452
+ @import 'colors-semantic';
@@ -24,6 +24,3 @@
24
24
  @import 'components/kitchen/filter-card';
25
25
  @import 'components/kitchen/swatches';
26
26
  @import 'components/kitchen/chips';
27
- @import 'components/kitchen/plp-filters';
28
- @import 'components/kitchen/filter-modal';
29
- @import 'components/kitchen/sort-by';