The repo for Purrform's main BigCommerce store.
fix: focus styles (#53)
authored by
Rogerio Romao
and committed by
GitHub
afeca697
b6d943da
+522
-549
+2
-1
.gitignore
+2
-1
.gitignore
assets/js/custom.js
assets/js/custom.js
This is a binary file and will not be displayed.
+27
-29
assets/js/theme/global/modal.js
+27
-29
assets/js/theme/global/modal.js
···
1
-
import foundation from './foundation';
2
1
import * as focusTrap from 'focus-trap';
2
+
import foundation from './foundation';
3
3
4
4
const bodyActiveClass = 'has-activeModal';
5
5
const loadingOverlayClass = 'loadingOverlay';
···
41
41
function wrapModalBody(content) {
42
42
const $modalBody = $('<div>');
43
43
44
-
$modalBody
45
-
.addClass(modalBodyClass)
46
-
.html(content);
44
+
$modalBody.addClass(modalBodyClass).html(content);
47
45
48
46
return $modalBody;
49
47
}
···
98
96
* @param {string} [options.size]
99
97
*/
100
98
export class Modal {
101
-
constructor($modal, {
102
-
size = null,
103
-
} = {}) {
99
+
constructor($modal, { size = null } = {}) {
104
100
this.$modal = $modal;
105
101
this.$content = createModalContent(this.$modal);
106
102
this.$overlay = createLoadingOverlay(this.$modal);
···
119
115
120
116
/* STRF-2471 - Multiple Wish Lists - prevents double-firing
121
117
* of foundation.dropdown click.fndtn.dropdown event */
122
-
this.$modal.on('click', '.dropdown-menu-button', e => {
118
+
this.$modal.on('click', '.dropdown-menu-button', (e) => {
123
119
e.stopPropagation();
124
120
});
125
121
}
···
158
154
this.$modal.on(ModalEvents.opened, this.onModalOpened);
159
155
}
160
156
161
-
open({
162
-
size,
163
-
pending = true,
164
-
clearContent = true,
165
-
} = {}) {
157
+
open({ size, pending = true, clearContent = true } = {}) {
166
158
this.pending = pending;
167
159
168
160
if (size) {
···
200
192
}
201
193
202
194
setupFocusTrap() {
203
-
if (!this.$preModalFocusedEl) this.$preModalFocusedEl = $(document.activeElement);
195
+
if (!this.$preModalFocusedEl) {
196
+
this.$preModalFocusedEl = $(document.activeElement);
197
+
}
204
198
205
199
if (!this.focusTrap) {
206
200
this.focusTrap = focusTrap.createFocusTrap(this.$modal[0], {
···
208
202
returnFocusOnDeactivate: false,
209
203
allowOutsideClick: true,
210
204
fallbackFocus: () => {
211
-
const fallbackNode = this.$preModalFocusedEl && this.$preModalFocusedEl.length
212
-
? this.$preModalFocusedEl[0]
213
-
: $('[data-header-logo-link]')[0];
205
+
const fallbackNode =
206
+
this.$preModalFocusedEl &&
207
+
this.$preModalFocusedEl.length
208
+
? this.$preModalFocusedEl[0]
209
+
: $('[data-header-logo-link]')[0];
214
210
215
211
return fallbackNode;
216
212
},
···
224
220
onModalClose() {
225
221
$('body').removeClass(bodyActiveClass);
226
222
227
-
// this.clearContent();
223
+
// this.clearContent();
228
224
}
229
225
230
226
onModalClosed() {
···
264
260
export default function modalFactory(selector = '[data-reveal]', options = {}) {
265
261
const $modals = $(selector, options.$context);
266
262
267
-
return $modals.map((index, element) => {
268
-
const $modal = $(element);
269
-
const instanceKey = 'modalInstance';
270
-
const cachedModal = $modal.data(instanceKey);
263
+
return $modals
264
+
.map((index, element) => {
265
+
const $modal = $(element);
266
+
const instanceKey = 'modalInstance';
267
+
const cachedModal = $modal.data(instanceKey);
271
268
272
-
if (cachedModal instanceof Modal) {
273
-
return cachedModal;
274
-
}
269
+
if (cachedModal instanceof Modal) {
270
+
return cachedModal;
271
+
}
275
272
276
-
const modal = new Modal($modal, options);
273
+
const modal = new Modal($modal, options);
277
274
278
-
$modal.data(instanceKey, modal);
275
+
$modal.data(instanceKey, modal);
279
276
280
-
return modal;
281
-
}).toArray();
277
+
return modal;
278
+
})
279
+
.toArray();
282
280
}
283
281
284
282
/*
+10
-8
assets/scss/components/stencil/_login.scss
+10
-8
assets/scss/components/stencil/_login.scss
···
3
3
// =============================================================================
4
4
5
5
.login {
6
-
margin: spacing("double") auto spacing("double")*2;
6
+
margin: spacing('double') auto spacing('double') * 2;
7
7
max-width: remCalc(900px);
8
8
}
9
9
10
10
.login-row {
11
11
@include grid-row();
12
-
@include breakpoint("medium") {
13
-
margin-top: spacing("double")*2;
12
+
13
+
@include breakpoint('medium') {
14
+
margin-top: spacing('double') * 2;
14
15
}
15
16
}
16
17
17
18
.login-form {
18
19
@include grid-column(12);
19
20
20
-
@include breakpoint("medium") {
21
+
@include breakpoint('medium') {
21
22
@include grid-column(6);
22
23
23
-
margin-top: spacing("double");
24
+
margin-top: spacing('double');
24
25
}
25
26
}
26
27
27
28
.new-customer {
28
29
@include grid-column(12);
29
-
@include breakpoint("medium") {
30
+
31
+
@include breakpoint('medium') {
30
32
@include grid-column(6);
31
33
}
32
34
}
···
36
38
}
37
39
38
40
.new-customer-fact-list {
39
-
margin-left: spacing("double");
41
+
margin-left: spacing('double');
40
42
}
41
43
42
44
.new-customer-fact {
43
-
padding-left: spacing("half");
45
+
padding-left: spacing('half');
44
46
}
+1
-3
assets/scss/components/stencil/heroCarousel/_component.scss
+1
-3
assets/scss/components/stencil/heroCarousel/_component.scss
···
1
1
// HERO CAROUSEL
2
2
// -----------------------------------------------------------------------------
3
-
//
4
3
// Purpose: Imports the dependencies of the hero carousel component
5
-
//
6
4
// -----------------------------------------------------------------------------
7
5
8
-
@import "heroCarousel";
6
+
@import 'heroCarousel';
+19
-18
assets/scss/components/stencil/previewCart/_previewCart.scss
+19
-18
assets/scss/components/stencil/previewCart/_previewCart.scss
···
1
1
// =============================================================================
2
2
// PREVIEW CART (CSS)
3
3
// =============================================================================
4
-
//
5
4
// 1. Override server-generated inline-css
6
-
//
7
5
// -----------------------------------------------------------------------------
8
6
9
7
.previewCart {
10
8
@include grid-row;
11
9
12
-
@include breakpoint("medium") {
10
+
@include breakpoint('medium') {
13
11
.productView {
14
12
@include grid-column(9);
13
+
15
14
display: flex;
16
15
margin: 0;
17
16
padding-bottom: 0;
···
20
19
21
20
.productView-image {
22
21
@include grid-column(7);
22
+
23
23
display: flex;
24
24
flex-direction: column;
25
25
}
···
41
41
}
42
42
43
43
.previewCartCheckout {
44
-
background: container("fill", "dark");
45
-
padding: spacing("base");
44
+
background: container('fill', 'dark');
45
+
padding: spacing('base');
46
46
text-align: center;
47
47
48
-
@include breakpoint("medium") {
49
-
@include grid-column(3, $float:right);
50
-
padding: spacing("single");
48
+
@include breakpoint('medium') {
49
+
@include grid-column(3, $float: right);
50
+
51
+
padding: spacing('single');
51
52
}
52
53
53
54
.button {
···
56
57
width: 100%;
57
58
58
59
+ p {
59
-
margin-top: spacing("half");
60
+
margin-top: spacing('half');
60
61
}
61
62
62
63
&:not(:last-child) {
63
-
margin-bottom: spacing("half");
64
+
margin-bottom: spacing('half');
64
65
}
65
66
}
66
67
}
67
68
68
69
.previewCartCheckout-price {
69
70
display: block;
70
-
font-size: fontSize("largest");
71
+
font-size: fontSize('largest');
71
72
font-weight: bold;
72
73
text-align: center;
73
74
}
74
75
75
76
.previewCartCheckout-subtotal {
76
77
display: block;
77
-
margin-bottom: spacing("single");
78
-
margin-top: spacing("single");
78
+
margin-bottom: spacing('single');
79
+
margin-top: spacing('single');
79
80
}
80
81
81
82
.previewCartCheckout-acceleratedCheckoutButtons {
···
85
86
.previewCartCheckout-additionalCheckoutButtons {
86
87
p {
87
88
float: none !important; // 1
88
-
margin: spacing("third") 0;
89
+
margin: spacing('third') 0;
89
90
}
90
91
91
92
.CheckoutButton {
92
-
margin-bottom: spacing("base");
93
+
margin-bottom: spacing('base');
93
94
94
95
&:first-child {
95
-
margin-top: spacing("single");
96
+
margin-top: spacing('single');
96
97
}
97
98
98
99
&:last-child {
99
-
margin-bottom: spacing("single");
100
+
margin-bottom: spacing('single');
100
101
}
101
102
}
102
103
}
···
105
106
display: none;
106
107
text-align: center;
107
108
108
-
@include breakpoint("medium") {
109
+
@include breakpoint('medium') {
109
110
display: block;
110
111
}
111
112
}
+7
-10
assets/scss/components/stencil/productCarousel/_productCarousel.scss
+7
-10
assets/scss/components/stencil/productCarousel/_productCarousel.scss
···
1
1
// PRODUCT CAROUSEL
2
2
// -----------------------------------------------------------------------------
3
-
//
4
3
// Purpose: Styles the product carousel component, which basically adds extras to the
5
4
// vendor slick carousel, to specifically display product
6
-
//
7
5
// 1. If there's no JS layout the products out based on the grid.
8
-
//
9
6
// -----------------------------------------------------------------------------
10
7
11
8
.productCarousel {
12
-
@include grid-row(
13
-
$behavior: nest
14
-
); // 1
9
+
@include grid-row($behavior: nest); // 1
10
+
15
11
min-width: 100%;
16
12
position: relative;
17
13
width: 1px;
18
14
}
19
15
20
-
.productCarousel-slide { // 1
16
+
.productCarousel-slide {
17
+
// 1
21
18
@include grid-column(6);
22
19
23
-
@include breakpoint("small") {
20
+
@include breakpoint('small') {
24
21
width: grid-calc(4, $total-columns);
25
22
}
26
23
27
-
@include breakpoint("medium") {
24
+
@include breakpoint('medium') {
28
25
width: grid-calc(3, $total-columns);
29
26
}
30
27
31
-
@include breakpoint("large") {
28
+
@include breakpoint('large') {
32
29
width: grid-calc(2, $total-columns);
33
30
}
34
31
+11
-12
assets/scss/components/stencil/productReviews/_productReviews.scss
+11
-12
assets/scss/components/stencil/productReviews/_productReviews.scss
···
2
2
// PRODUCT REVIEWS (CSS)
3
3
// =============================================================================
4
4
5
-
6
5
// Review list
7
-
//
8
6
// 1. Kill extra display inline-block spacing
9
7
// -----------------------------------------------------------------------------
10
8
11
9
.productReviews-list {
12
-
@include u-listBullets("none");
13
-
@include grid-row($behavior: "nest");
10
+
@include u-listBullets('none');
11
+
@include grid-row($behavior: 'nest');
12
+
14
13
font-size: 0; // 1
15
14
}
16
-
17
15
18
16
// Review item
19
17
// -----------------------------------------------------------------------------
20
18
21
19
.productReview {
22
20
@include grid-column(12);
21
+
23
22
display: inline-block;
24
23
float: none;
25
-
font-size: fontSize("base");
24
+
font-size: fontSize('base');
26
25
vertical-align: top;
27
26
28
-
@include breakpoint("medium") {
27
+
@include breakpoint('medium') {
29
28
width: grid-calc(6, $total-columns);
30
29
}
31
30
32
-
@include breakpoint("large") {
31
+
@include breakpoint('large') {
33
32
width: grid-calc(4, $total-columns);
34
33
}
35
34
}
···
40
39
}
41
40
42
41
.productReview-author {
43
-
color: stencilColor("color-textSecondary");
44
-
margin-bottom: spacing("base");
42
+
color: stencilColor('color-textSecondary');
43
+
margin-bottom: spacing('base');
45
44
}
46
45
47
46
.productReview-rating {
48
47
display: inline-block;
49
-
margin-bottom: spacing("quarter");
48
+
margin-bottom: spacing('quarter');
50
49
}
51
50
52
51
.productReview-ratingNumber {
53
-
@include u-hidden("visually");
52
+
@include u-hidden('visually');
54
53
}
+76
-89
assets/scss/components/stencil/productView/_productView.scss
+76
-89
assets/scss/components/stencil/productView/_productView.scss
···
2
2
// PRODUCT VIEW (CSS)
3
3
// =============================================================================
4
4
5
-
6
5
// Container
7
6
// -----------------------------------------------------------------------------
8
7
9
8
.productView {
10
-
padding-top: spacing("base");
9
+
padding-top: spacing('base');
11
10
}
12
11
13
-
14
12
// Images
15
13
// -----------------------------------------------------------------------------
16
14
17
15
.productView-images {
18
-
margin-bottom: spacing("double");
16
+
margin-bottom: spacing('double');
19
17
}
20
18
21
19
.productView-image {
···
25
23
margin: auto;
26
24
position: relative;
27
25
28
-
@include breakpoint("medium") {
26
+
@include breakpoint('medium') {
29
27
min-height: 366px;
30
28
min-width: inherit;
31
29
}
32
30
33
31
+ .productView-thumbnails {
34
-
margin-top: spacing("half");
32
+
margin-top: spacing('half');
35
33
}
36
34
37
35
@media (min-width: $screen-xxsmall) and (max-width: $screen-medium) {
···
40
38
}
41
39
42
40
.productView-img-container {
41
+
@include lazy-loaded-padding('product_size');
43
42
44
-
@include lazy-loaded-padding("product_size");
45
43
margin: auto;
46
-
max-width: get-width(stencilString("product_size"));
44
+
max-width: get-width(stencilString('product_size'));
47
45
position: relative;
48
46
width: 100%;
49
47
50
48
img {
51
49
@include lazy-loaded-img;
52
-
/* Object-fit polyfill */
53
-
font-family: "object-fit: contain;";
50
+
54
51
height: 100%;
55
52
object-fit: contain;
56
53
width: 100%;
···
58
55
}
59
56
60
57
.productView-thumbnails {
61
-
@include u-listBullets("none");
62
-
@include grid-row($behavior: "nest");
58
+
@include u-listBullets('none');
59
+
@include grid-row($behavior: 'nest');
63
60
64
-
margin-left: -(spacing("quarter"));
65
-
margin-right: -(spacing("quarter"));
61
+
margin-left: -(spacing('quarter'));
62
+
margin-right: -(spacing('quarter'));
66
63
67
64
&[data-slick] {
68
65
opacity: 0;
···
87
84
88
85
img {
89
86
@include lazy-loaded-img;
90
-
/* Object-fit polyfill */
91
-
font-family: "object-fit: contain;";
87
+
92
88
margin: 0;
93
89
object-fit: contain;
94
90
position: relative;
95
-
width: get-width(stencilString("productview_thumb_size"));
91
+
width: get-width(stencilString('productview_thumb_size'));
96
92
}
97
93
}
98
94
99
95
.productView-thumbnail {
100
96
@include grid-column(3);
101
-
padding: spacing("quarter");
97
+
98
+
padding: spacing('quarter');
102
99
text-align: center;
103
100
104
-
@include breakpoint("large") {
101
+
@include breakpoint('large') {
105
102
width: 20%;
106
103
}
107
104
}
108
105
109
106
.productView-thumbnail-link {
110
-
border: container("border");
107
+
border: container('border');
111
108
box-sizing: content-box;
112
109
display: flex;
113
110
height: 67px;
···
115
112
max-width: 75px;
116
113
padding: 2px;
117
114
position: relative;
118
-
// width: 100%;
119
115
120
116
&:hover,
121
117
&.is-active {
122
-
border-color: color("greys", "darker");
118
+
border-color: color('greys', 'darker');
123
119
}
124
120
}
125
121
126
-
127
122
// Details
128
123
// -----------------------------------------------------------------------------
129
124
130
125
.productView-details {
131
-
padding-bottom: spacing("single") + spacing("third");
126
+
padding-bottom: spacing('single') + spacing('third');
132
127
}
133
-
134
128
135
129
// Details - Product details
136
130
// -----------------------------------------------------------------------------
137
131
138
132
.productView-product {
139
-
@include breakpoint("medium") {
140
-
border-bottom: container("border");
141
-
padding-bottom: spacing("single") + spacing("third");
133
+
@include breakpoint('medium') {
134
+
border-bottom: container('border');
135
+
padding-bottom: spacing('single') + spacing('third');
142
136
}
143
137
144
138
> :last-child {
···
147
141
}
148
142
149
143
.productView-title {
150
-
font-size: fontSize("small");
151
-
margin: -(spacing("half")) 0 spacing("quarter");
144
+
font-size: fontSize('small');
145
+
margin: -(spacing('half')) 0 spacing('quarter');
152
146
153
-
@include breakpoint("medium") {
154
-
margin-top: spacing("single");
147
+
@include breakpoint('medium') {
148
+
margin-top: spacing('single');
155
149
}
156
150
157
-
@include breakpoint("large") {
158
-
font-size: fontSize("largest");
151
+
@include breakpoint('large') {
152
+
font-size: fontSize('largest');
159
153
}
160
154
}
161
155
162
156
.productView-brand {
163
157
color: $productView-brand-link-color;
164
-
font-size: fontSize("smaller");
165
-
margin: 0 0 spacing("half");
158
+
font-size: fontSize('smaller');
159
+
margin: 0 0 spacing('half');
166
160
167
-
@include breakpoint("large") {
168
-
font-size: fontSize("small");
169
-
margin: -(spacing("eighth")) 0 spacing("base");
161
+
@include breakpoint('large') {
162
+
font-size: fontSize('small');
163
+
margin: -(spacing('eighth')) 0 spacing('base');
170
164
}
171
165
172
166
a {
···
182
176
// -----------------------------------------------------------------------------
183
177
184
178
.productView-price {
185
-
font-size: fontSize("smaller");
186
-
margin-bottom: spacing("third");
179
+
font-size: fontSize('smaller');
180
+
margin-bottom: spacing('third');
187
181
188
-
@include breakpoint("medium") {
189
-
font-size: fontSize("larger");
190
-
margin-bottom: spacing("base");
182
+
@include breakpoint('medium') {
183
+
font-size: fontSize('larger');
184
+
margin-bottom: spacing('base');
191
185
}
192
186
193
187
.price-section--saving {
194
-
font-size: fontSize("smaller");
188
+
font-size: fontSize('smaller');
195
189
}
196
190
197
191
abbr {
···
202
196
}
203
197
204
198
.productView-reviewLink {
205
-
color: stencilColor("color-textSecondary");
199
+
color: stencilColor('color-textSecondary');
206
200
display: inline-block;
207
-
margin-left: spacing("quarter");
201
+
margin-left: spacing('quarter');
208
202
vertical-align: middle;
209
203
210
204
&:hover {
211
-
color: stencilColor("color-textSecondary--hover");
205
+
color: stencilColor('color-textSecondary--hover');
212
206
}
213
207
214
208
&--new {
···
216
210
}
217
211
}
218
212
219
-
220
213
// Details - Product Information
221
214
// -----------------------------------------------------------------------------
222
215
223
216
.productView-info {
224
217
@include clearfix;
225
-
margin-top: spacing("half");
218
+
219
+
margin-top: spacing('half');
226
220
227
-
@include breakpoint("small") {
221
+
@include breakpoint('small') {
228
222
margin-top: 0;
229
223
}
230
224
231
225
> :first-child {
232
-
233
-
@include breakpoint("small") {
234
-
margin-top: spacing("single");
226
+
@include breakpoint('small') {
227
+
margin-top: spacing('single');
235
228
}
236
229
}
237
230
···
244
237
.productView-info-value {
245
238
float: left;
246
239
247
-
@include breakpoint("small") {
240
+
@include breakpoint('small') {
248
241
float: none;
249
242
}
250
243
}
251
244
252
245
.productView-info-name {
253
246
clear: both;
254
-
margin-bottom: spacing("eighth");
255
-
margin-right: spacing("quarter");
247
+
margin-bottom: spacing('eighth');
248
+
margin-right: spacing('quarter');
256
249
257
-
@include breakpoint("small") {
258
-
font-family: fontFamily("headingSans");
259
-
font-size: fontSize("smallest");
260
-
font-weight: fontWeight("normal");
250
+
@include breakpoint('small') {
251
+
font-family: fontFamily('headingSans');
252
+
font-size: fontSize('smallest');
253
+
font-weight: fontWeight('normal');
261
254
}
262
255
}
263
256
264
257
.productView-info-value {
265
-
margin-bottom: spacing("quarter");
258
+
margin-bottom: spacing('quarter');
266
259
267
-
@include breakpoint("small") {
268
-
margin-bottom: spacing("base");
260
+
@include breakpoint('small') {
261
+
margin-bottom: spacing('base');
269
262
}
270
263
}
271
-
272
264
273
265
// Details - Product options
274
266
// -----------------------------------------------------------------------------
275
-
//
276
267
// 1. Align the product options list item radios vertically.
277
268
// 2. Resetting font due to inline-block whitespace issue.
278
269
// 3. File upload button does not properly display in IE if font-size is 0
279
-
//
280
270
// -----------------------------------------------------------------------------
281
271
282
272
.productView-options {
283
273
@include clearfix;
284
-
margin-bottom: spacing("single");
274
+
275
+
margin-bottom: spacing('single');
285
276
text-align: center;
286
277
287
-
@include breakpoint("small") {
278
+
@include breakpoint('small') {
288
279
text-align: left;
289
280
}
290
281
291
-
.form-input[type="number"] {
292
-
@include breakpoint("small") {
282
+
.form-input[type='number'] {
283
+
@include breakpoint('small') {
293
284
width: grid-calc(2, $total-columns);
294
285
}
295
286
}
···
302
293
}
303
294
}
304
295
305
-
input[type="file"] {
306
-
font-size: fontSize("smallest"); // 3
296
+
input[type='file'] {
297
+
font-size: fontSize('smallest'); // 3
307
298
}
308
299
309
300
.form-field {
···
316
307
317
308
> .form-checkbox + .form-label {
318
309
display: inline-block;
319
-
margin-left: spacing("single");
310
+
margin-left: spacing('single');
320
311
width: auto;
321
312
322
-
@include breakpoint("small") {
313
+
@include breakpoint('small') {
323
314
margin-left: 0;
324
315
width: 100%;
325
316
}
···
341
332
margin-bottom: 1rem;
342
333
width: 100%;
343
334
344
-
@include breakpoint("small") {
335
+
@include breakpoint('small') {
345
336
padding: 0 remCalc(10);
346
337
width: 50%;
347
338
}
348
339
349
-
@include breakpoint("medium") {
350
-
padding-right: spacing("half");
340
+
@include breakpoint('medium') {
341
+
padding-right: spacing('half');
351
342
width: 50%;
352
343
}
353
344
354
-
@include breakpoint("large") {
345
+
@include breakpoint('large') {
355
346
display: inline-block;
356
347
margin-top: 1rem;
357
-
padding-right: spacing("half");
348
+
padding-right: spacing('half');
358
349
width: 50%;
359
350
}
360
351
···
365
356
}
366
357
367
358
.add-to-cart-wallet-buttons {
368
-
margin-top: spacing("half");
359
+
margin-top: spacing('half');
369
360
370
361
div[data-smart-button-container-id] {
371
362
line-height: 0;
···
378
369
}
379
370
380
371
button.show-more-button {
381
-
color: stencilColor("color-textSecondary");
372
+
color: stencilColor('color-textSecondary');
382
373
display: block;
383
-
margin-top: spacing("quarter");
384
-
padding: spacing("quarter") 0;
374
+
margin-top: spacing('quarter');
375
+
padding: spacing('quarter') 0;
385
376
text-align: center;
386
377
text-decoration: underline;
387
-
vertical-align: middle;
388
378
width: 100%;
389
379
390
380
&:hover {
391
-
color: stencilColor("color-textSecondary--hover");
381
+
color: stencilColor('color-textSecondary--hover');
392
382
}
393
383
}
394
384
}
395
385
}
396
-
397
386
398
387
// Product list (with images)
399
388
// -----------------------------------------------------------------------------
···
433
422
padding-left: $productOptions-list-item-content-paddingLeft;
434
423
}
435
424
436
-
437
425
// Share products
438
426
// -----------------------------------------------------------------------------
439
427
440
428
.shareProduct {
441
429
text-align: center;
442
430
}
443
-
444
431
445
432
// EasyZoom settings for zoomable product image
446
433
// -----------------------------------------------------------------------------
+3
-5
assets/scss/components/stencil/rating/_rating.scss
+3
-5
assets/scss/components/stencil/rating/_rating.scss
···
4
4
5
5
.icon--ratingEmpty {
6
6
svg {
7
-
fill: stencilColor("icon-ratingEmpty");
7
+
fill: stencilColor('icon-ratingEmpty');
8
8
}
9
9
}
10
10
11
11
.icon--ratingFull {
12
12
svg {
13
-
fill: stencilColor("icon-ratingFull");
13
+
fill: stencilColor('icon-ratingFull');
14
14
}
15
15
}
16
16
17
-
18
17
// Small rating
19
18
// -----------------------------------------------------------------------------
20
-
//
21
19
// 1. Vertically aligns stars to container. Icons are off by default.
22
20
// Icons are all vertically aligned to middle, however middle is not middle,
23
21
// and therefore need to be adjusted to actually sit at middle.
24
-
//
25
22
// -----------------------------------------------------------------------------
26
23
27
24
.rating--small {
···
29
26
30
27
.icon {
31
28
@include square(14px);
29
+
32
30
margin-top: -3px; // 1
33
31
}
34
32
}
+4
-4
assets/scss/components/stencil/ribbon/_ribbon.scss
+4
-4
assets/scss/components/stencil/ribbon/_ribbon.scss
···
1
1
// =============================================================================
2
2
// RIBBON (CSS)
3
3
// =============================================================================
4
-
//
5
4
// 1. A ribbon needs a container set to relative in order to position itself.
6
5
// 2. Top right text badge. Shows "On sale" as an example.
7
-
//
8
6
// -----------------------------------------------------------------------------
9
7
10
-
.has-ribbon { // 1
8
+
.has-ribbon {
9
+
// 1
11
10
position: relative;
12
11
}
13
12
14
-
.ribbon { // 2
13
+
.ribbon {
14
+
// 2
15
15
background-color: $ribbon-backgroundColor;
16
16
color: $ribbon-color;
17
17
cursor: $ribbon-cursor;
+19
-17
assets/scss/components/stencil/search/_search.scss
+19
-17
assets/scss/components/stencil/search/_search.scss
···
3
3
// =============================================================================
4
4
5
5
.search-suggestion {
6
-
margin-bottom: spacing("single") + spacing("third");
6
+
margin-bottom: spacing('single') + spacing('third');
7
7
8
8
> :last-child {
9
9
margin-bottom: 0;
···
16
16
}
17
17
18
18
.advancedSearch-form {
19
-
margin-bottom: spacing("double");
19
+
margin-bottom: spacing('double');
20
20
21
21
.form-row {
22
-
margin-bottom: -(spacing("single"));
22
+
margin-bottom: -(spacing('single'));
23
23
}
24
24
}
25
25
26
26
.quickSearchResults {
27
-
margin-top: spacing("single");
27
+
margin-top: spacing('single');
28
28
29
-
@include breakpoint("medium") {
29
+
@include breakpoint('medium') {
30
30
margin-top: 0;
31
31
}
32
32
33
33
.modal-close {
34
34
display: none;
35
35
36
-
@include breakpoint("medium") {
36
+
@include breakpoint('medium') {
37
37
display: block;
38
38
}
39
39
}
···
44
44
}
45
45
46
46
.advancedSearch-title {
47
-
margin: 0 0 spacing("single");
47
+
margin: 0 0 spacing('single');
48
48
text-transform: inherit;
49
49
}
50
50
···
54
54
55
55
input {
56
56
display: block;
57
-
padding-left: spacing("single");
57
+
padding-left: spacing('single');
58
58
59
-
@include breakpoint("small") {
59
+
@include breakpoint('small') {
60
60
display: inline;
61
61
width: 6rem;
62
62
}
63
63
}
64
64
65
65
span {
66
-
@include breakpoint("small") {
66
+
@include breakpoint('small') {
67
67
display: inline;
68
-
padding-left: spacing("single");
69
-
padding-right: spacing("single");
68
+
padding-left: spacing('single');
69
+
padding-right: spacing('single');
70
70
}
71
71
}
72
72
}
73
73
}
74
74
75
75
.category-suggestion-list {
76
-
@include grid-row($behavior: "nest");
76
+
@include grid-row($behavior: 'nest');
77
+
77
78
list-style-type: none;
78
79
}
79
80
80
81
.category-suggestion {
81
82
@include grid-column(4);
82
-
font-size: fontSize("smaller");
83
+
84
+
font-size: fontSize('smaller');
83
85
}
84
86
85
87
.search-refine {
86
-
margin-left: spacing("single");
88
+
margin-left: spacing('single');
87
89
}
88
90
89
91
.quickSearchMessage {
90
-
font-size: fontSize("largest");
91
-
margin: spacing("single") 0 0;
92
+
font-size: fontSize('largest');
93
+
margin: spacing('single') 0 0;
92
94
text-align: center;
93
95
}
94
96
+2
-4
assets/scss/components/stencil/textTruncate/_textTruncate.scss
+2
-4
assets/scss/components/stencil/textTruncate/_textTruncate.scss
···
2
2
// TEXT TRUNCATE (CSS)
3
3
// =============================================================================
4
4
5
-
6
5
// Text Truncate
7
6
// -----------------------------------------------------------------------------
8
-
//
9
7
// -----------------------------------------------------------------------------
10
8
.textTruncate {
11
-
padding-bottom: spacing("single");
9
+
padding-bottom: spacing('single');
12
10
position: relative;
13
11
transition: max-height 100ms ease-out;
14
12
}
···
23
21
}
24
22
25
23
.textTruncate-viewMore {
26
-
background-color: stencilColor("body-bg");
24
+
background-color: stencilColor('body-bg');
27
25
bottom: 0;
28
26
padding-top: 10px;
29
27
position: absolute;
+10
-6
assets/scss/components/stencil/videoGallery/_videoGallery.scss
+10
-6
assets/scss/components/stencil/videoGallery/_videoGallery.scss
···
4
4
5
5
.videoGallery-main {
6
6
@include flex-video-container();
7
+
7
8
margin-bottom: $videoGallery-spacing;
8
9
}
9
10
10
11
.videoGallery-list {
11
-
@include u-listBullets("none");
12
-
@include grid-row($behavior: "nest");
12
+
@include u-listBullets('none');
13
+
@include grid-row($behavior: 'nest');
14
+
13
15
font-size: 0;
14
16
}
15
17
16
18
.videoGallery-item {
17
19
@include grid-column(12);
20
+
18
21
display: inline-block;
19
22
float: none;
20
23
vertical-align: top;
21
24
22
-
@include breakpoint("medium") {
25
+
@include breakpoint('medium') {
23
26
width: grid-calc(6, $total-columns);
24
27
}
25
28
}
26
29
27
30
.video {
28
31
@include media;
32
+
29
33
display: block;
30
34
margin-bottom: $videoGallery-spacing;
31
35
opacity: 0.4;
32
36
text-decoration: none;
33
37
transition: opacity 100ms ease-out;
34
38
35
-
@include breakpoint("medium") {
39
+
@include breakpoint('medium') {
36
40
margin-bottom: $videoGallery-spacing;
37
41
}
38
42
39
43
&:hover,
40
44
&.is-active {
41
-
color: color("greys", "darker");
45
+
color: color('greys', 'darker');
42
46
opacity: 1;
43
47
}
44
48
}
···
54
58
}
55
59
56
60
.video-description {
57
-
font-size: fontSize("base");
61
+
font-size: fontSize('base');
58
62
margin-bottom: 0;
59
63
}
+5
-9
assets/scss/components/stencil/writeReview/_writeReview.scss
+5
-9
assets/scss/components/stencil/writeReview/_writeReview.scss
···
3
3
// =============================================================================
4
4
5
5
.writeReview-productDetails {
6
-
7
-
@include breakpoint("medium") {
6
+
@include breakpoint('medium') {
8
7
@include grid-column(6);
9
8
}
10
9
11
10
.product-brand {
12
-
color: color("greys", "light");
11
+
color: color('greys', 'light');
13
12
margin: 0;
14
13
}
15
14
···
18
17
}
19
18
}
20
19
21
-
22
20
.writeReview-form {
23
-
24
-
@include breakpoint("medium") {
21
+
@include breakpoint('medium') {
25
22
@include grid-column(6);
26
23
}
27
24
}
28
25
29
26
.writeReview-productImage-container {
27
+
@include lazy-loaded-padding('product_size');
30
28
31
-
@include lazy-loaded-padding("product_size");
32
29
position: relative;
33
30
34
31
img {
35
32
@include lazy-loaded-img;
36
-
/* Object-fit polyfill */
37
-
font-family: "object-fit: contain;";
33
+
38
34
height: 100%;
39
35
object-fit: contain;
40
36
}
+22
-36
assets/scss/components/vendor/slick/_slick.scss
+22
-36
assets/scss/components/vendor/slick/_slick.scss
···
1
1
// SLICK
2
2
// -----------------------------------------------------------------------------
3
-
//
4
3
// Purpose: These are the styles for the base Slick carousel
5
-
//
6
4
// -----------------------------------------------------------------------------
7
5
8
-
9
-
//
10
6
// Next and Previous buttons for all carousels
11
-
//
12
7
// Purpose: Override the plugin to give some Stencil styling to the js generated mark-up
13
-
//
14
8
// 1. Set the background again because the plugin sets the full background property on hover
15
9
// 2. Prevent screen flicker when CSS transition is applied
16
-
//
17
10
// -----------------------------------------------------------------------------
18
11
19
12
.slick-next,
20
13
.slick-prev {
21
14
@include carouselOpaqueBackgrounds($slick-arrow-bgColor);
15
+
22
16
border: 1px solid $slick-arrow-borderColor;
23
17
height: remCalc(61px);
24
18
margin-top: -(remCalc(15px));
···
38
32
&:hover,
39
33
&:focus {
40
34
@include carouselOpaqueBackgrounds($slick-arrow-bgColor); // 1
35
+
41
36
background-position: 50%;
42
37
background-repeat: no-repeat;
43
38
background-size: 100%;
···
47
42
.slick-next {
48
43
right: $slick-arrows-offset;
49
44
50
-
@include breakpoint("large") {
51
-
right: -(spacing("double") + spacing("quarter"));
45
+
@include breakpoint('large') {
46
+
right: -(spacing('double') + spacing('quarter'));
52
47
}
53
48
54
49
&::before {
55
-
@include carousel-arrow-color( $slick-arrow-color, "next");
50
+
@include carousel-arrow-color($slick-arrow-color, 'next');
56
51
}
57
52
58
53
&:hover {
59
54
&::before {
60
-
@include carousel-arrow-color( $slick-arrow-color-hover, "next");
55
+
@include carousel-arrow-color($slick-arrow-color-hover, 'next');
61
56
}
62
57
}
63
58
}
···
65
60
.slick-prev {
66
61
left: $slick-arrows-offset;
67
62
68
-
@include breakpoint("large") {
69
-
left: -(spacing("double") + spacing("quarter"));
63
+
@include breakpoint('large') {
64
+
left: -(spacing('double') + spacing('quarter'));
70
65
}
71
66
72
67
&::before {
73
-
@include carousel-arrow-color( $slick-arrow-color, "prev");
68
+
@include carousel-arrow-color($slick-arrow-color, 'prev');
74
69
}
75
70
76
71
&:hover {
77
72
&::before {
78
-
@include carousel-arrow-color( $slick-arrow-color-hover, "prev");
73
+
@include carousel-arrow-color($slick-arrow-color-hover, 'prev');
79
74
}
80
75
}
81
76
}
···
85
80
width: 100%;
86
81
}
87
82
88
-
89
-
//
90
83
// Carousel dots
91
-
//
92
84
// Purpose: Stencil overrides for the js generated carousel dots
93
-
//
94
85
// 2. Nesting depth due to plugin css
95
86
// -----------------------------------------------------------------------------
96
87
97
-
.slick-dots { // 2
88
+
.slick-dots {
89
+
// 2
98
90
margin: 0;
99
91
100
92
li {
101
93
@include square(32px);
94
+
102
95
margin: 0;
103
96
padding: remCalc(5px);
104
97
105
98
button,
106
99
button::before {
107
100
@include square(15px);
101
+
108
102
border-radius: 50%;
109
103
}
110
104
···
137
131
}
138
132
}
139
133
}
140
-
141
134
}
142
135
143
-
//
144
136
// Stencil override for product detail page thumbnail dots.
145
137
// -----------------------------------------------------------------------------
146
138
.productView .slick-dots {
147
139
position: relative;
148
140
}
149
141
150
-
151
-
//
152
142
// disabled carousel elements
153
143
// -----------------------------------------------------------------------------
154
144
.slick-disabled {
···
156
146
opacity: 0.1;
157
147
}
158
148
159
-
160
-
//
161
149
// Slick track
162
150
// -----------------------------------------------------------------------------
163
151
.slick-track {
···
165
153
perspective: 1000px; // 2
166
154
}
167
155
168
-
//
169
156
// iOS Safari fix https://github.com/kenwheeler/slick/issues/2834#issuecomment-389590661
170
157
// -----------------------------------------------------------------------------
171
158
div.slick-slider {
···
174
161
*width: 100%;
175
162
}
176
163
177
-
//
178
164
// iOS Safari fix https://github.com/kenwheeler/slick/issues/2156
179
165
// -----------------------------------------------------------------------------
180
166
.slick-slide .card-image,
···
182
168
-webkit-touch-callout: default;
183
169
}
184
170
185
-
//
186
171
// Carousel tooltips for buttons and bullets
187
172
// -----------------------------------------------------------------------------
188
173
189
174
.carousel-tooltip {
190
175
@include addFocusTooltip($attr: aria-label);
176
+
191
177
display: none;
192
178
height: 1px;
193
179
margin-top: 10px;
194
180
position: relative;
195
181
196
-
@include breakpoint("small") {
182
+
@include breakpoint('small') {
197
183
display: block;
198
184
}
199
185
···
250
236
}
251
237
}
252
238
253
-
//
254
239
// Carousel Play/Pause button
255
240
// -----------------------------------------------------------------------------
256
241
257
242
.carousel-play-pause-button {
258
243
@include carouselOpaqueBackgrounds($slick-play-pause-button-bgColor);
244
+
259
245
border: 1px solid $slick-play-pause-button-borderColor;
260
-
bottom: spacing("third");
246
+
bottom: spacing('third');
261
247
color: $slick-play-pause-button-color;
262
248
display: none;
263
249
font-size: 14px;
···
272
258
text-overflow: ellipsis;
273
259
transition: color 100ms ease-out;
274
260
white-space: nowrap;
275
-
z-index: zIndex("lowest");
261
+
z-index: zIndex('lowest');
276
262
277
-
@include breakpoint("small") {
263
+
@include breakpoint('small') {
278
264
font-size: 18px;
279
265
max-width: 150px;
280
266
}
281
267
282
-
@include breakpoint("medium") {
283
-
bottom: spacing("single");
268
+
@include breakpoint('medium') {
269
+
bottom: spacing('single');
284
270
left: 25px;
285
271
}
286
272
+21
-39
assets/scss/custom/components/_cards.scss
+21
-39
assets/scss/custom/components/_cards.scss
···
5
5
padding: 0.5rem;
6
6
border-radius: 10px;
7
7
margin-bottom: 25px;
8
+
8
9
* {
9
-
font-family: 'Filson Pro';
10
+
font-family: 'Filson Pro', sans-serif;
10
11
}
11
12
12
13
&:hover {
13
14
border: 1px solid $gold-color;
14
-
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1),
15
+
box-shadow:
16
+
0 2px 2px 0 rgba(0, 0, 0, 0.1),
15
17
0 3px 10px 0 rgba(0, 0, 0, 0.05);
16
18
17
-
/* .card-figcaption-button {
18
-
border-color: $secondary-color;
19
-
background-color: $secondary-color;
20
-
21
-
&.add-to-cart {
22
-
background-color: $nav-hover-text;
23
-
color: $white-color;
24
-
}
25
-
}*/
26
-
27
19
.card-button {
28
20
.button--secondary {
29
21
background-color: $secondary-color !important;
30
22
}
23
+
31
24
.add-to-cart {
32
25
background-color: $nav-hover-text !important;
33
26
color: $white-color !important;
27
+
34
28
svg {
35
29
path {
36
30
fill: white !important;
···
43
37
.card-figure {
44
38
overflow: hidden;
45
39
position: relative;
40
+
46
41
.card-img-container {
47
-
&:after {
42
+
&::after {
48
43
padding-bottom: 70%;
49
44
}
50
45
···
61
56
display: grid;
62
57
grid-template-rows: auto 85px auto;
63
58
64
-
// @include breakpoint('medium') {
65
-
// grid-template-rows: auto 55px auto;
66
-
// }
67
-
68
59
.card-text {
69
60
color: $text-color;
70
61
font-weight: 700;
···
85
76
86
77
.card-title {
87
78
margin-bottom: 0;
79
+
88
80
a {
89
81
color: $text-color;
90
82
}
91
83
}
92
84
93
85
.custom-fields {
94
-
//height: 5rem;
95
-
// border: 1px solid;
96
86
margin-bottom: 0;
97
87
font-size: 14px;
98
88
height: 3.8rem;
89
+
99
90
@include breakpoint('medium') {
100
91
height: 2.5rem;
101
92
}
···
110
101
margin-top: 1rem;
111
102
align-items: center;
112
103
justify-content: center;
113
-
grid-gap: 0.5rem;
104
+
gap: 0.5rem;
114
105
}
115
106
116
107
.form-field--increments {
···
122
113
padding: 1rem 2.2rem 1rem 0.7rem;
123
114
color: $white-color;
124
115
background-color: $nav-hover-text;
125
-
svg {
126
-
// fill: red;
127
-
}
116
+
128
117
@include breakpoint('medium') {
129
118
margin-top: 0;
130
119
background-color: transparent;
131
120
transition: all 0.15s ease;
132
121
color: $body-color;
122
+
133
123
&:hover {
134
124
background-color: $nav-hover-text;
135
125
color: $white-color;
···
141
131
.card-button {
142
132
width: 100%;
143
133
margin-top: 1rem;
134
+
144
135
.button--secondary {
145
-
// background-color: $secondary-color;
146
136
background-color: transparent;
147
137
transition: all 0.15s ease;
148
138
color: $body-color;
149
-
// border: 1px solid $input-field;
150
139
height: 75px;
151
-
152
-
// @include breakpoint('medium') {
153
-
// color: $body-color;
154
-
// &:hover {
155
-
// background-color: $gold-color !important;
156
-
// color: $white-color !important;
157
-
// }
158
-
// }
159
140
}
141
+
160
142
.add-to-cart {
161
143
border: 0;
162
144
display: flex;
163
-
grid-gap: 10px;
145
+
gap: 10px;
164
146
align-items: center;
165
147
justify-content: center;
166
148
text-align: center;
···
169
151
padding: 1rem 1.5rem;
170
152
background-color: $nav-hover-text;
171
153
color: $white-color;
154
+
172
155
svg {
173
-
// stroke: $white-color;
174
156
path {
175
157
fill: white;
176
158
}
177
159
}
178
-
/* background-image: url(https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/-right-icon.png);
179
-
background-position: 94% center;
180
-
background-repeat: no-repeat;*/
181
160
182
161
@include breakpoint('medium') {
183
162
margin-top: 0;
184
163
background-color: transparent;
185
164
color: $body-color;
165
+
186
166
svg {
187
167
path {
188
168
fill: #bd9b60;
···
202
182
}
203
183
204
184
h2 {
205
-
font-family: 'Filson Pro';
185
+
font-family: 'Filson Pro', sans-serif;
206
186
color: $headingColor;
207
187
font-weight: 700;
208
188
font-size: 28px;
189
+
209
190
@include breakpoint('medium') {
210
191
font-size: 40px;
211
192
}
212
193
}
194
+
213
195
.slick-list {
214
196
.card {
215
197
.card-body {
+19
-10
assets/scss/tools/_theme_focus.scss
+19
-10
assets/scss/tools/_theme_focus.scss
···
1
+
/* stylelint-disable declaration-no-important -- something overrides it if not using important, still debugging where it comes from */
1
2
// =============================================================================
2
3
// THEME FOCUS (global)
3
4
// =============================================================================
4
5
5
-
$outline-width: 2px;
6
-
$outline-style: solid;
7
-
$outline-color: #0f7fff;
8
-
$outline-offset: 1px;
6
+
$outline-width: 2px;
7
+
$outline-style: solid;
8
+
$outline-color: #333;
9
+
$outline-offset: 2px;
9
10
10
11
input,
11
12
button,
···
13
14
select,
14
15
details,
15
16
[href],
16
-
[tabindex]:not([tabindex="-1"]),
17
-
[contenteditable="true"] {
18
-
&:focus {
17
+
[tabindex]:not([tabindex='-1']),
18
+
[contenteditable='true'] {
19
+
&:focus:not(:focus-visible) {
20
+
outline: none;
21
+
}
22
+
23
+
&:focus-visible {
19
24
outline: $outline-width $outline-style $outline-color !important;
20
-
outline-offset: $outline-offset !important;
25
+
outline-offset: $outline-offset;
21
26
}
22
27
}
23
28
24
29
label {
25
-
input:focus + & {
30
+
input:focus:not(:focus-visible) + & {
31
+
outline: none;
32
+
}
33
+
34
+
input:focus-visible + & {
26
35
outline: $outline-width $outline-style $outline-color !important;
27
-
outline-offset: $outline-offset !important;
36
+
outline-offset: $outline-offset;
28
37
}
29
38
}
+1
-1
config.json
+1
-1
config.json
+1
stylelint.config.js
+1
stylelint.config.js
···
20
20
'media-feature-range-notation': null,
21
21
'selector-class-pattern': null,
22
22
'selector-id-pattern': null,
23
+
'scss/at-mixin-pattern': null,
23
24
'scss/dollar-variable-pattern': null,
24
25
'scss/at-mixin-argumentless-call-parentheses': null,
25
26
'scss/percent-placeholder-pattern': null,
+1
-11
templates/components/common/header.html
+1
-11
templates/components/common/header.html
···
1
-
2
-
<!-- UIkit CSS -->
3
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.15.14/dist/css/uikit.min.css" />
1
+
<!-- This gives us our font, Filson Pro -->
4
2
<link rel="stylesheet" href="https://use.typekit.net/drc3iaj.css">
5
3
6
-
<!-- UIkit JS -->
7
-
<script src="https://cdn.jsdelivr.net/npm/uikit@3.15.14/dist/js/uikit.min.js"></script>
8
-
<script src="https://cdn.jsdelivr.net/npm/uikit@3.15.14/dist/js/uikit-icons.min.js"></script>
9
-
10
4
<!-- CALL MOST RECENT JQUERY LIBRARY -->
11
5
<script src="https://code.jquery.com/jquery-3.6.2.min.js" integrity="sha256-2krYZKh//PcchRtd+H+VyyQoZ/e3EcrkxhM8ycwASPA=" crossorigin="anonymous"></script>
12
6
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
13
7
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
14
8
15
-
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
16
9
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.min.css">
17
-
18
-
19
-
<script src="{{cdn 'assets/js/custom.js'}}"></script>
20
10
21
11
22
12
<a href="#main-content" class="skip-to-main-link">{{lang 'header.skip_to_main'}}</a>
+246
-222
templates/pages/cart.html
+246
-222
templates/pages/cart.html
···
2
2
cart: true
3
3
---
4
4
{{inject 'cancelButtonText' (lang 'common.cancel')}} {{#partial "page"}}
5
-
{{inject 'invalidEntryMessage' (lang 'cart.invalid_entry_message')}}
6
-
{{inject 'cartId' cart_id}}
5
+
{{inject 'invalidEntryMessage' (lang 'cart.invalid_entry_message')}}
6
+
{{inject 'cartId' cart_id}}
7
7
8
-
<script type="module">
9
-
const jsContext = JSON.parse({{jsContext}});
10
-
const cheetahCentreProductId = 639;
11
-
const variantPrices = {
12
-
718: 0.50,
13
-
719: 1.00,
14
-
720: 2.00
15
-
};
8
+
<script type="module">
9
+
const jsContext = JSON.parse({{ jsContext }});
10
+
const cheetahCentreProductId = 639;
11
+
const variantPrices = {
12
+
718: 0.50,
13
+
719: 1.00,
14
+
720: 2.00
15
+
};
16
16
17
-
try {
18
-
const charityProduct = await fetch('/graphql', {
19
-
method: 'POST',
20
-
credentials: 'same-origin',
21
-
headers: {
22
-
'Content-Type': 'application/json',
23
-
'Authorization': 'Bearer {{ settings.storefront_api.token }}'
24
-
},
25
-
body: JSON.stringify({
26
-
query: `
17
+
try {
18
+
const charityProduct = await fetch('/graphql', {
19
+
method: 'POST',
20
+
credentials: 'same-origin',
21
+
headers: {
22
+
'Content-Type': 'application/json',
23
+
'Authorization': 'Bearer {{ settings.storefront_api.token }}'
24
+
},
25
+
body: JSON.stringify({
26
+
query: `
27
27
query site {
28
28
site {
29
29
product(entityId: ${cheetahCentreProductId}) {
···
58
58
`
59
59
})
60
60
})
61
-
.then(response => response.json())
62
-
.then(data => data.data.site.product);
61
+
.then(response => response.json())
62
+
.then(data => data.data.site.product);
63
63
64
-
if (charityProduct) {
65
-
const charitySection = document.querySelector('.charity-product');
64
+
if (charityProduct) {
65
+
const charitySection = document.querySelector('.charity-product');
66
66
67
-
const charityTitle = charitySection.querySelector('h4');
68
-
charityTitle.textContent = charityProduct.name;
67
+
const charityTitle = charitySection.querySelector('h4');
68
+
charityTitle.textContent = charityProduct.name;
69
69
70
-
const charityImage = charitySection.querySelector('img');
71
-
// charityImage.src = charityProduct.images.edges[0].node.url;
70
+
const charityImage = charitySection.querySelector('img');
71
+
// charityImage.src = charityProduct.images.edges[0].node.url;
72
72
73
-
const charityList = charitySection.querySelector('ul');
74
-
charityProduct.variants.edges.forEach((variant, i) => {
75
-
const listItem = document.createElement('li');
76
-
if (i === 0) {
77
-
listItem.classList.add('selected');
78
-
}
79
-
listItem.dataset.variantId = variant.node.entityId;
80
-
const price = variantPrices[variant.node.entityId];
81
-
listItem.textContent = `£${price.toFixed(2)}`;
82
-
listItem.addEventListener('click', () => {
83
-
const selected = charityList.querySelector('.selected');
84
-
if (selected) {
85
-
selected.classList.remove('selected');
73
+
const charityList = charitySection.querySelector('ul');
74
+
charityProduct.variants.edges.forEach((variant, i) => {
75
+
const listItem = document.createElement('li');
76
+
if (i === 0) {
77
+
listItem.classList.add('selected');
86
78
}
87
-
listItem.classList.add('selected');
79
+
listItem.dataset.variantId = variant.node.entityId;
80
+
const price = variantPrices[variant.node.entityId];
81
+
listItem.textContent = `£${price.toFixed(2)}`;
82
+
listItem.addEventListener('click', () => {
83
+
const selected = charityList.querySelector('.selected');
84
+
if (selected) {
85
+
selected.classList.remove('selected');
86
+
}
87
+
listItem.classList.add('selected');
88
+
});
89
+
charityList.appendChild(listItem);
88
90
});
89
-
charityList.appendChild(listItem);
90
-
});
91
91
92
-
charitySection.style.display = 'block';
93
-
const addToCartButton = document.getElementById('add-charity-product');
94
-
addToCartButton.addEventListener('click', async () => {
95
-
const selectedVariant = charityList.querySelector('.selected');
96
-
const variantId = Number(selectedVariant.dataset.variantId);
92
+
charitySection.style.display = 'block';
93
+
const addToCartButton = document.getElementById('add-charity-product');
94
+
addToCartButton.addEventListener('click', async () => {
95
+
const selectedVariant = charityList.querySelector('.selected');
96
+
const variantId = Number(selectedVariant.dataset.variantId);
97
97
98
-
addToCartButton.disabled = true;
99
-
addToCartButton.style.cursor = 'not-allowed';
100
-
addToCartButton.textContent = 'Adding...';
98
+
addToCartButton.disabled = true;
99
+
addToCartButton.style.cursor = 'not-allowed';
100
+
addToCartButton.textContent = 'Adding...';
101
101
102
-
const mutation = `
102
+
const mutation = `
103
103
mutation addCartLineItems($addCartLineItemsInput: AddCartLineItemsInput!) {
104
104
cart {
105
105
addCartLineItems(input: $addCartLineItemsInput) {
···
111
111
}
112
112
`;
113
113
114
-
const variables = {
115
-
addCartLineItemsInput: {
116
-
cartEntityId: jsContext.cartId,
117
-
data: {
118
-
lineItems: [
119
-
{
120
-
quantity: 1,
121
-
productEntityId: cheetahCentreProductId,
122
-
variantEntityId: variantId
114
+
const variables = {
115
+
addCartLineItemsInput: {
116
+
cartEntityId: jsContext.cartId,
117
+
data: {
118
+
lineItems: [
119
+
{
120
+
quantity: 1,
121
+
productEntityId: cheetahCentreProductId,
122
+
variantEntityId: variantId
123
+
}
124
+
]
125
+
}
123
126
}
124
-
]
125
-
}
127
+
};
128
+
129
+
const response = await fetch('/graphql', {
130
+
method: 'POST',
131
+
credentials: 'same-origin',
132
+
headers: {
133
+
'Content-Type': 'application/json',
134
+
'Authorization': 'Bearer {{ settings.storefront_api.token }}'
135
+
},
136
+
body: JSON.stringify({
137
+
query: mutation,
138
+
variables
139
+
})
140
+
});
141
+
142
+
if (response.ok) {
143
+
window.location.reload();
144
+
} else {
145
+
addToCartButton.disabled = false;
146
+
addToCartButton.style.cursor = 'pointer';
147
+
addToCartButton.textContent = 'Add to Cart';
148
+
console.error('Error adding charity product to cart', response);
126
149
}
127
-
};
128
-
129
-
const response = await fetch('/graphql', {
130
-
method: 'POST',
131
-
credentials: 'same-origin',
132
-
headers: {
133
-
'Content-Type': 'application/json',
134
-
'Authorization': 'Bearer {{ settings.storefront_api.token }}'
135
-
},
136
-
body: JSON.stringify({
137
-
query: mutation,
138
-
variables
139
-
})
140
150
});
151
+
}
152
+
} catch (e) {
153
+
console.error('Error getting charity product data', e);
154
+
}
155
+
</script>
141
156
142
-
if (response.ok) {
143
-
window.location.reload();
144
-
} else {
145
-
addToCartButton.disabled = false;
146
-
addToCartButton.style.cursor = 'pointer';
147
-
addToCartButton.textContent = 'Add to Cart';
148
-
console.error('Error adding charity product to cart', response);
149
-
}
150
-
});
151
-
}
152
-
} catch (e) {
153
-
console.error('Error getting charity product data', e);
154
-
}
155
-
</script>
157
+
<div class="container" style="padding: 0;">
158
+
<div class="page">
156
159
157
-
<div class="container" style="padding: 0;">
158
-
<div class="page">
160
+
<main style='color: #687D6A;' class="page-content" data-item-size="{{cart.items.length}}" data-cart
161
+
data-id="{{cart_id}}" data-customer-grp-id="{{customer_group_id}}">
162
+
{{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}
159
163
160
-
<main style='color: #687D6A;' class="page-content" data-item-size="{{cart.items.length}}" data-cart data-id="{{cart_id}}" data-customer-grp-id="{{customer_group_id}}">
161
-
{{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}
164
+
{{> components/cart/page-title}}
162
165
163
-
{{> components/cart/page-title}}
166
+
<section class="charity-product">
167
+
<h4></h4>
168
+
<div class="charity-container">
169
+
<div class="left">
170
+
<img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/cheetah-centre-logo-bw-1739357472050.png?t=1739357472"
171
+
alt="Ann Van Dyk Cheetah Centre logo" width="200">
172
+
<a href="/cheetah-sanctuary-donation">Learn more</a>
173
+
</div>
174
+
<div class="right">
175
+
<ul class="charity-variants"></ul>
176
+
<button id="add-charity-product">Add to Cart</button>
177
+
</div>
178
+
</div>
179
+
</section>
164
180
165
-
<section class="charity-product">
166
-
<h4></h4>
167
-
<div class="charity-container">
168
-
<div class="left">
169
-
<img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/cheetah-centre-logo-bw-1739357472050.png?t=1739357472" alt="Ann Van Dyk Cheetah Centre logo" width="200">
170
-
<a href="/cheetah-sanctuary-donation">Learn more</a>
171
-
</div>
172
-
<div class="right">
173
-
<ul class="charity-variants"></ul>
174
-
<button id="add-charity-product">Add to Cart</button>
181
+
<div data-cart-status>
182
+
{{> components/cart/status-messages}}
175
183
</div>
176
-
</div>
177
-
</section>
178
184
179
-
<div data-cart-status>
180
-
{{> components/cart/status-messages}}
181
-
</div>
182
-
183
-
{{#if cart.items.length}}
185
+
{{#if cart.items.length}}
184
186
185
-
<div class="loadingOverlay"></div>
187
+
<div class="loadingOverlay"></div>
186
188
187
-
<div data-cart-content>
188
-
{{> components/cart/content}}
189
-
</div>
189
+
<div data-cart-content>
190
+
{{> components/cart/content}}
191
+
</div>
190
192
191
-
<div data-cart-totals class="cart-totals-container cart-content-padding-right">
192
-
{{> components/cart/totals}}
193
-
</div>
193
+
<div data-cart-totals class="cart-totals-container cart-content-padding-right">
194
+
{{> components/cart/totals}}
195
+
</div>
194
196
195
197
196
-
{{#if cart.show_primary_checkout_button}}
197
-
<div class="cart-actions">
198
+
{{#if cart.show_primary_checkout_button}}
199
+
<div class="cart-actions">
198
200
199
-
<a class="button button--secondary" href="/all/">
200
-
<i class="icon" aria-hidden="true">
201
-
<svg>
202
-
<use href="#icon-chevron-left"></use>
203
-
</svg>
204
-
</i>
205
-
{{lang 'cart.added_to_cart.continue_shopping'}}
206
-
</a>
207
-
<a
208
-
id="do_checkout"
209
-
class="button button--primary ui-state-disabled"
210
-
href="{{urls.checkout.single_address}}"
211
-
title="{{lang 'cart.checkout.title'}}"
212
-
data-primary-checkout-now-action
213
-
>
214
-
{{lang 'cart.checkout.button'}}
215
-
</a>
216
-
{{#if cart.show_multiple_address_shipping}}
217
-
<a class="checkoutMultiple" href="{{urls.checkout.multiple_address}}">
218
-
{{lang 'cart.preview.checkout_multiple'}}
219
-
</a>
201
+
<a class="button button--secondary" href="/all/">
202
+
<i class="icon" aria-hidden="true">
203
+
<svg>
204
+
<use href="#icon-chevron-left"></use>
205
+
</svg>
206
+
</i>
207
+
{{lang 'cart.added_to_cart.continue_shopping'}}
208
+
</a>
209
+
<a id="do_checkout" class="button button--primary ui-state-disabled"
210
+
href="{{urls.checkout.single_address}}" title="{{lang 'cart.checkout.title'}}"
211
+
data-primary-checkout-now-action>
212
+
{{lang 'cart.checkout.button'}}
213
+
</a>
214
+
{{#if cart.show_multiple_address_shipping}}
215
+
<a class="checkoutMultiple" href="{{urls.checkout.multiple_address}}">
216
+
{{lang 'cart.preview.checkout_multiple'}}
217
+
</a>
218
+
{{/if}}
219
+
</div>
220
+
{{else}}
221
+
<div class="cart-actions">
222
+
<a class="button" href="{{urls.home}}"
223
+
title="{{lang 'cart.continue_shopping'}}">{{lang 'cart.continue_shopping'}}</a>
224
+
</div>
220
225
{{/if}}
221
-
</div>
222
-
{{else}}
223
-
<div class="cart-actions">
224
-
<a class="button" href="{{urls.home}}" title="{{lang 'cart.continue_shopping'}}">{{lang 'cart.continue_shopping'}}</a>
225
-
</div>
226
-
{{/if}}
227
226
228
-
{{#if cart.additional_checkout_buttons}}
229
-
<div class="cart-additionalCheckoutButtons">
230
-
{{#each cart.additional_checkout_buttons}}
231
-
{{{this}}}
232
-
{{/each}}
233
-
</div>
234
-
{{/if}}
235
-
{{else}}
236
-
<h3>{{lang 'cart.checkout.empty_cart'}}</h3>
237
-
{{{ remote_api_scripts }}}
238
-
{{/if}}
227
+
{{#if cart.additional_checkout_buttons}}
228
+
<div class="cart-additionalCheckoutButtons">
229
+
{{#each cart.additional_checkout_buttons}}
230
+
{{{this}}}
231
+
{{/each}}
232
+
</div>
233
+
{{/if}}
234
+
{{else}}
235
+
<h3>{{lang 'cart.checkout.empty_cart'}}</h3>
236
+
{{{ remote_api_scripts }}}
237
+
{{/if}}
239
238
240
-
</main>
241
-
<script src="https://code.jquery.com/jquery-3.6.2.min.js" integrity="sha256-2krYZKh//PcchRtd+H+VyyQoZ/e3EcrkxhM8ycwASPA=" crossorigin="anonymous"></script>
239
+
</main>
240
+
<script src="https://code.jquery.com/jquery-3.6.2.min.js"
241
+
integrity="sha256-2krYZKh//PcchRtd+H+VyyQoZ/e3EcrkxhM8ycwASPA=" crossorigin="anonymous"></script>
242
242
243
-
<div class="modal fade" id="redeem_point" tabindex="-1" aria-labelledby="redeem_point" style="display: none;" aria-hidden="true">
244
-
<div class="modal-dialog">
245
-
<div class="modal-content swal2-content">
246
-
<div class="swal2-icon swal2-warning swal2-icon-show" style="display: flex;">
247
-
<div class="swal2-icon-content">!</div>
243
+
<div class="modal fade" id="redeem_point" tabindex="-1" aria-labelledby="redeem_point"
244
+
style="display: none;" aria-hidden="true">
245
+
<div class="modal-dialog">
246
+
<div class="modal-content swal2-content">
247
+
<div class="swal2-icon swal2-warning swal2-icon-show" style="display: flex;">
248
+
<div class="swal2-icon-content">!</div>
249
+
</div>
250
+
<h4 style="text-align:center;margin-bottom:5px;" id="swal2-title">
251
+
</h2>
252
+
<button type="button" class="swal2-close"
253
+
onclick="document.getElementById('redeem_point').style.display='none';">x</button>
254
+
<div id="swal2-content" class="swal2-html-container uk-margin-small-bottom"
255
+
style="display: block;">Enter the points to redeem:</div>
256
+
<input type="number" class="uk-input uk-text-center" id="redeem" name="redeem" min="" max=""
257
+
value="" style="max-width:200px;">
248
258
</div>
249
-
<h4 style="text-align:center;margin-bottom:5px;" id="swal2-title"></h2>
250
-
<button type="button" class="swal2-close" onclick="document.getElementById('redeem_point').style.display='none';">x</button>
251
-
<div id="swal2-content" class="swal2-html-container uk-margin-small-bottom" style="display: block;">Enter the points to redeem:</div>
252
-
<input type="number" class="uk-input uk-text-center" id="redeem" name="redeem" min="" max="" value="" style="max-width:200px;">
253
-
</div>
254
-
<div class="swal2-footer">
255
-
<span style="display:none;" id="total_point"></span>
256
-
<a onclick="redeem_loyalty()" style="background-color: #BD9B60 !important; border-color: #BD9B60 !important; border-radius: 50px;font-weight: 500;font-size: 16px;" class="button button--primary">Redeem point </a>
257
-
<a onclick="document.getElementById('redeem_point').style.display='none';" style="background-color: #FFF !important; border-color: #BD9B60 !important; border-radius: 50px;font-weight: 500;font-size: 16px;color: #BD9B60;" class="button button--primary">Cancel</a>
259
+
<div class="swal2-footer">
260
+
<span style="display:none;" id="total_point"></span>
261
+
<a onclick="redeem_loyalty()"
262
+
style="background-color: #BD9B60 !important; border-color: #BD9B60 !important; border-radius: 50px;font-weight: 500;font-size: 16px;"
263
+
class="button button--primary">Redeem point </a>
264
+
<a onclick="document.getElementById('redeem_point').style.display='none';"
265
+
style="background-color: #FFF !important; border-color: #BD9B60 !important; border-radius: 50px;font-weight: 500;font-size: 16px;color: #BD9B60;"
266
+
class="button button--primary">Cancel</a>
267
+
</div>
258
268
</div>
259
269
</div>
260
-
</div>
261
270
262
-
<div class="modal fade" id="newsletter-box" tabindex="-1" aria-labelledby="redeem_point" style="text-align:center;display: none;box-shadow:0px 0px 39px 9px rgb(0 0 0 / 20%);border-radius:50px" aria-hidden="true">
263
-
<div class="modal-dialog">
264
-
<div class="modal-header swal2-header" style="background: #687d6a;">
265
-
<h2 style="color: #fff;">Claim your free shipping now</h2>
266
-
<button type="button" class="swal2-close" onclick="close_nl_box();">x</button>
267
-
</div>
268
-
<div class="modal-content swal2-content">
269
-
<div class="nl_success_wrapper" style="height: 96px;display:none">
270
-
<div class="coupon-message" style="font-size: 18px;padding: 40px 0;"></div>
271
-
<input id="nl_continue" class="button button--primary form-prefixPostfix-button--postfix" type="button" value="Continue">
271
+
<div class="modal fade" id="newsletter-box" tabindex="-1" aria-labelledby="redeem_point"
272
+
style="text-align:center;display: none;box-shadow:0px 0px 39px 9px rgb(0 0 0 / 20%);border-radius:50px"
273
+
aria-hidden="true">
274
+
<div class="modal-dialog">
275
+
<div class="modal-header swal2-header" style="background: #687d6a;">
276
+
<h2 style="color: #fff;">Claim your free shipping now</h2>
277
+
<button type="button" class="swal2-close" onclick="close_nl_box();">x</button>
272
278
</div>
273
-
<div class="newsletter-wrapper" style="margin: 0 auto;width: 100%;padding: 25px;">
274
-
<div class="">
275
-
<div class="" style="margin-bottom: 25px;">Subscribe to our newsletter to get free shipping! </div>
276
-
</div>
279
+
<div class="modal-content swal2-content">
280
+
<div class="nl_success_wrapper" style="height: 96px;display:none">
281
+
<div class="coupon-message" style="font-size: 18px;padding: 40px 0;"></div>
282
+
<input id="nl_continue" class="button button--primary form-prefixPostfix-button--postfix"
283
+
type="button" value="Continue">
284
+
</div>
285
+
<div class="newsletter-wrapper" style="margin: 0 auto;width: 100%;padding: 25px;">
286
+
<div class="">
287
+
<div class="" style="margin-bottom: 25px;">Subscribe to our newsletter to get free
288
+
shipping! </div>
289
+
</div>
277
290
278
-
<div class="form-section">
279
-
<form class="form" id="nl_form" style="margin: 0 auto;">
280
-
<input type="hidden" name="action" value="subscribe">
281
-
<input type="hidden" name="nl_first_name" value="bc">
282
-
<input type="hidden" name="authenticity_token" value="e0e91a6b4d5210710b76058e35a23605d327844d2838f440cf0501174cda7753">
283
-
<input type="hidden" name="check" value="1">
284
-
<input class="form-input" id="nl_email" name="nl_email" type="email" value="" placeholder="Your email address" style="border: 1px solid #687d6a;">
285
-
<input id="nl_cta" class="button button--primary form-prefixPostfix-button--postfix" type="button" value="Join Now">
291
+
<div class="form-section">
292
+
<form class="form" id="nl_form" style="margin: 0 auto;">
293
+
<input type="hidden" name="action" value="subscribe">
294
+
<input type="hidden" name="nl_first_name" value="bc">
295
+
<input type="hidden" name="authenticity_token"
296
+
value="e0e91a6b4d5210710b76058e35a23605d327844d2838f440cf0501174cda7753">
297
+
<input type="hidden" name="check" value="1">
298
+
<input class="form-input" id="nl_email" name="nl_email" type="email" value=""
299
+
placeholder="Your email address" style="border: 1px solid #687d6a;">
300
+
<input id="nl_cta" class="button button--primary form-prefixPostfix-button--postfix"
301
+
type="button" value="Join Now">
286
302
287
-
</form>
288
-
<p id="response_api" style="text-align: center;font-size:1.1rem;font-weight:400;color:#bd9b60;"></p>
289
-
</div>
303
+
</form>
304
+
<p id="response_api"
305
+
style="text-align: center;font-size:1.1rem;font-weight:400;color:#bd9b60;"></p>
306
+
</div>
307
+
</div>
290
308
</div>
291
-
</div>
292
-
<div class="swal2-footer" style="margin-bottom:25px;">
293
-
<div class="foot_data" style="width: 100%;margin: 0 auto;text-align: center;">
294
-
<div class="gdpr-field">
295
-
<input type="checkbox" id="gdpr_checkbox" name="gdpr_checkbox" class="gdpr-checkbox">
296
-
<span class="wcb-gdpr-message">I agree to the <a href="terms-conditions" target="_blank">Terms & Conditions</a> and <a href="privacy-policy" target="_blank">Privacy Policy</a>.</span>
309
+
<div class="swal2-footer" style="margin-bottom:25px;">
310
+
<div class="foot_data" style="width: 100%;margin: 0 auto;text-align: center;">
311
+
<div class="gdpr-field">
312
+
<input type="checkbox" id="gdpr_checkbox" name="gdpr_checkbox" class="gdpr-checkbox">
313
+
<span class="wcb-gdpr-message">I agree to the <a href="terms-conditions"
314
+
target="_blank">Terms & Conditions</a> and <a href="privacy-policy"
315
+
target="_blank">Privacy Policy</a>.</span>
316
+
</div>
317
+
<div class="footer-text">No spam email & you can unsubscribe at anytime. Maximum order
318
+
£100</div>
319
+
</div>
297
320
</div>
298
-
<div class="footer-text">No spam email & you can unsubscribe at anytime. Maximum order £100</div>
299
-
</div>
300
321
</div>
301
322
</div>
302
323
</div>
303
324
</div>
304
-
</div>
305
-
<div style="display:none" id="gift_wrap" class="coupon-box-small-icon-wrap coupon-box-small-icon-position-bottom-left coupon-box-small-icon-hidden-mobile">
306
-
<div class="coupon-box-small-icon-container">
307
-
<span id="gift_close" class="coupon-box-small-icon-close button_close_icons-cancel" title="Do not show again"></span>
308
-
<span id="gift_box" class="coupon-box-small-icon giftbox-gifbox-with-ribbon-on-top"></span>
325
+
<div style="display:none" id="gift_wrap"
326
+
class="coupon-box-small-icon-wrap coupon-box-small-icon-position-bottom-left coupon-box-small-icon-hidden-mobile">
327
+
<div class="coupon-box-small-icon-container">
328
+
<span id="gift_close" class="coupon-box-small-icon-close button_close_icons-cancel"
329
+
title="Do not show again"></span>
330
+
<span id="gift_box" class="coupon-box-small-icon giftbox-gifbox-with-ribbon-on-top"></span>
331
+
</div>
309
332
</div>
310
-
</div>
311
333
{{/partial}}
312
334
{{> layout/base}}
313
335
314
336
<style>
337
+
button.cart-remove {
338
+
display: flex;
339
+
}
340
+
315
341
.charity-product {
316
342
display: none;
317
343
max-width: 420px;
···
325
351
}
326
352
327
353
.charity-product h4 {
328
-
color:#687D6A;
354
+
color: #687D6A;
329
355
font-weight: 500;
330
356
}
331
357
···
335
361
align-items: center;
336
362
}
337
363
338
-
.charity-container .left,
339
-
.charity-container .right {
364
+
.charity-container .left,
365
+
.charity-container .right {
340
366
display: flex;
341
367
flex-direction: column;
342
368
}
343
369
344
370
.charity-container .left {
345
-
flex: 1;
371
+
flex: 1;
346
372
}
347
373
348
374
.charity-container .right {
···
391
417
#add-charity-product:hover {
392
418
background-color: #5c6e5d;
393
419
}
394
-
395
-
396
420
</style>