wickes-css2 2.94.0-develop.5 → 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 (45) 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_checkout_payment-details_with-card-loader.html +56 -0
  35. package/src/page_shopping-cart-v2.html +6 -16
  36. package/src/scss/barclays-paypage-combined-minified.css +1 -1
  37. package/src/scss/barclays-paypage-combined.css +9 -15
  38. package/src/scss/components/_checkout-action.scss +132 -6
  39. package/src/scss/components/_order-summary.scss +271 -180
  40. package/src/scss/components/checkout-payment-details-v2.scss +2 -2
  41. package/src/scss/helpers/_variables.scss +2 -0
  42. package/src/scss/pages/_checkout-widget.scss +45 -37
  43. package/src/scss/pages/page_checkout_delivery-new.scss +110 -10
  44. package/src/scss/pages/page_shopping-cart-v2.scss +93 -32
  45. package/src/sitemap.html +2 -0
@@ -200,7 +200,7 @@ label.labelError {
200
200
  }
201
201
 
202
202
  #expiryMonth, #expiryYear, #startMonth, #startYear {
203
- width: 70px;
203
+ width: 80px;
204
204
  padding: 8px;
205
205
  }
206
206
 
@@ -254,16 +254,6 @@ label.labelError {
254
254
  position: relative;
255
255
  }
256
256
 
257
- #cscSection:after {
258
- content: "";
259
- width: 38%;
260
- height: 51px;
261
- display: block;
262
- position: absolute;
263
- bottom: -15px;
264
- right: 125px;
265
- }
266
-
267
257
  #newCardLink {
268
258
  float: right;
269
259
  }
@@ -891,13 +881,13 @@ input.inputError {
891
881
  }
892
882
 
893
883
  #expirySection {
894
- width: 150px;
884
+ width: 170px;
895
885
  white-space: nowrap;
896
886
  margin-right: 16px
897
887
  }
898
888
 
899
889
  #cscSection {
900
- width: 100px
890
+ width: 112px
901
891
  }
902
892
 
903
893
  #paymentDetailsPanel {
@@ -937,7 +927,7 @@ input.inputError {
937
927
  height: 40px;
938
928
  box-shadow: none;
939
929
  margin-bottom: 5px;
940
- width: 90%;
930
+ width: 80%;
941
931
  }
942
932
 
943
933
  #cscSection {
@@ -949,7 +939,7 @@ input.inputError {
949
939
  white-space: normal;
950
940
  width: max-content;
951
941
  max-width: 100vw;
952
- right: 166px;
942
+ right: 186px;
953
943
  position: relative;
954
944
  }
955
945
 
@@ -1079,6 +1069,10 @@ input.inputError {
1079
1069
  position: relative;
1080
1070
  top: 3px;
1081
1071
  }
1072
+
1073
+ .submitButton {
1074
+ margin-top: 20px;
1075
+ }
1082
1076
  }
1083
1077
 
1084
1078
  @media (max-width: 265px) {
@@ -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 {