wickes-css2 2.94.0-develop.6 → 2.94.0-develop.7

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 (41) hide show
  1. package/build/css/components/checkout-payment-details-v2.css +1 -1
  2. package/build/css/main.css +1 -1
  3. package/build/css/pages/checkout-new.css +1 -1
  4. package/build/css/pages/checkout.css +1 -1
  5. package/build/css/pages/page_checkout_delivery-new.css +1 -1
  6. package/build/css/pages/page_shopping-cart-v2.css +1 -1
  7. package/build/css/pdp-main-non-critical.css +1 -1
  8. package/build/js/basket.min.js +2 -2
  9. package/build/js/bundle.min.js +1 -1
  10. package/build/js/checkout.min.js +2 -2
  11. package/build/js/emulation.min.js +3 -3
  12. package/build/js/general.bundle.min.js +1 -1
  13. package/build/js/merged-checkout.min.js +2 -2
  14. package/build/js/page/basket/summary-mobile.js +17 -0
  15. package/build/js/page/components/order-summary.js +9 -1
  16. package/build/js/page/components/voucher.js +1 -1
  17. package/build/js/pdp.bundle.min.js +1 -1
  18. package/build/js/plp.bundle.min.js +1 -1
  19. package/build/js/project-list.min.js +1 -1
  20. package/package.json +1 -1
  21. package/src/components/checkout-action.hbs +14 -11
  22. package/src/components/checkout-voucher-accordion.hbs +15 -0
  23. package/src/components/checkout_order-summary-new.hbs +4 -2
  24. package/src/components/checkout_voucher_large.hbs +20 -16
  25. package/src/components/order-summary.hbs +91 -56
  26. package/src/components/summary-mobile-bar.hbs +17 -0
  27. package/src/js/components/general/is-trade-pro.js +21 -1
  28. package/src/js/components/general/switchVat.js +2 -1
  29. package/src/js/emulation/basket-data.js +3 -3
  30. package/src/js/page/basket/summary-mobile.js +17 -0
  31. package/src/js/page/components/order-summary.js +9 -1
  32. package/src/js/page/components/voucher.js +1 -1
  33. package/src/layouts/basket-new.hbs +1 -1
  34. package/src/page_shopping-cart-v2.html +6 -16
  35. package/src/scss/components/_checkout-action.scss +132 -6
  36. package/src/scss/components/_order-summary.scss +271 -180
  37. package/src/scss/components/checkout-payment-details-v2.scss +2 -2
  38. package/src/scss/helpers/_variables.scss +2 -0
  39. package/src/scss/pages/_checkout-widget.scss +45 -37
  40. package/src/scss/pages/page_checkout_delivery-new.scss +110 -10
  41. package/src/scss/pages/page_shopping-cart-v2.scss +93 -32
@@ -1,16 +1,45 @@
1
1
  @import '../helpers/helpers';
2
2
 
3
3
  .checkout-action {
4
- margin-top: 5px;
5
- padding-bottom: 20px;
6
- border-bottom: 1px solid $gray;
4
+ padding: 15px 15px 24px;
5
+
6
+ .btn-checkout {
7
+ .checkout-text--mixed {
8
+ display: none;
9
+ }
10
+
11
+ .checkout-text--collect {
12
+ display: inline;
13
+ }
14
+ }
15
+
16
+ &:not(:has(.checkout-widget__basket-block)) {
17
+ .btn-checkout {
18
+ .checkout-text--mixed {
19
+ display: inline;
20
+ }
21
+
22
+ .checkout-text--collect {
23
+ display: none;
24
+ }
25
+ }
26
+ }
27
+
28
+ &:not(:has(.checkout-widget__basket-block)) {
29
+ .btn-checkout {
30
+ margin-bottom: 0;
31
+ }
32
+ }
7
33
 
8
34
  & .btn-checkout {
9
35
  display: flex;
10
36
  justify-content: center;
11
37
  align-items: center;
12
- height: 40px;
13
- margin-bottom: 20px;
38
+ height: 42px;
39
+ margin-bottom: 10px;
40
+ font-weight: 500;
41
+ font-size: 16px;
42
+ line-height: 1.5rem;
14
43
 
15
44
  .icon {
16
45
  padding-left: 5px;
@@ -27,18 +56,21 @@
27
56
 
28
57
  & .paypal-button {
29
58
  padding-top: 0;
59
+ height: 42px;
30
60
  }
31
61
 
32
62
  & .paypal-button-text {
33
63
  padding-left: 3px;
34
- font-size: .875rem;
64
+ font-size: 1rem;
35
65
  font-weight: 500;
66
+ line-height: 1rem;
36
67
  }
37
68
  }
38
69
  }
39
70
 
40
71
  &__wrapper {
41
72
  order: -2;
73
+ background-color: $white;
42
74
 
43
75
  &.large {
44
76
  order: inherit;
@@ -51,6 +83,30 @@
51
83
  &.mounted {
52
84
  display: none;
53
85
  }
86
+
87
+ &.mobile {
88
+ display: block;
89
+ position: static;
90
+ order: 1;
91
+
92
+ .checkout-action {
93
+ margin-top: 20px;
94
+ padding: 0;
95
+ padding-bottom: 20px;
96
+
97
+ .btn-checkout {
98
+ margin-bottom: 20px;
99
+ }
100
+
101
+ &:not(:has(.checkout-widget__basket-block)) {
102
+ padding-bottom: 0;
103
+
104
+ .btn-checkout {
105
+ margin-bottom: 0;
106
+ }
107
+ }
108
+ }
109
+ }
54
110
  }
55
111
 
56
112
  &__large {
@@ -93,6 +149,66 @@
93
149
  }
94
150
  }
95
151
 
152
+ @include media-breakpoint-up(sm) {
153
+
154
+ .checkout-action {
155
+ margin-top: 0;
156
+ padding: 0;
157
+ border-bottom: 0;
158
+
159
+ &__wrapper {
160
+ padding: 20px 0 24px;
161
+ background-color: $white;
162
+ order: -2;
163
+
164
+ &.large {
165
+ order: inherit;
166
+
167
+ .checkout-action {
168
+ margin-top: 20px;
169
+ }
170
+ }
171
+
172
+ &.mounted {
173
+ display: none;
174
+ }
175
+
176
+ &.mobile {
177
+ display: block;
178
+ position: static;
179
+ order: 1;
180
+ padding: 0;
181
+
182
+ .checkout-action {
183
+ margin-top: 20px;
184
+ padding: 0;
185
+ padding-bottom: 20px;
186
+
187
+ .btn-checkout {
188
+ margin-bottom: 20px;
189
+ }
190
+
191
+ &:not(:has(.checkout-widget__basket-block)) {
192
+ padding-bottom: 0;
193
+
194
+ .btn-checkout {
195
+ margin-bottom: 0;
196
+ }
197
+ }
198
+ }
199
+ }
200
+ }
201
+ }
202
+
203
+ .checkout-action .btn-checkout {
204
+ margin-bottom: 10px;
205
+ }
206
+
207
+ .checkout-action--single .btn-checkout {
208
+ margin-bottom: 0;
209
+ }
210
+ }
211
+
96
212
  @include media-breakpoint-up(md) {
97
213
  .checkout-action {
98
214
  .pay-pal_wrap {
@@ -105,8 +221,13 @@
105
221
 
106
222
  @include media-breakpoint-up(lg) {
107
223
  .checkout-action {
224
+ margin-top: 5px;
225
+ padding-bottom: 20px;
226
+ border-bottom: 1px solid $gray;
227
+
108
228
  &__wrapper {
109
229
  order: inherit;
230
+ position: static;
110
231
 
111
232
  &.large {
112
233
  order: -2;
@@ -115,6 +236,7 @@
115
236
 
116
237
  &.mounted {
117
238
  display: block;
239
+ padding: 0;
118
240
  padding-top: 15px;
119
241
  background: $white;
120
242
 
@@ -122,6 +244,10 @@
122
244
  border-bottom: 0;
123
245
  }
124
246
  }
247
+
248
+ &.mobile {
249
+ display: none;
250
+ }
125
251
  }
126
252
 
127
253
  &__large {