@sc-360-v2/storefront-cms-library 0.4.38 → 0.4.41

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 (38) hide show
  1. package/dist/add-order.scss +10 -6
  2. package/dist/add-products-tab.scss +33 -25
  3. package/dist/allocations.scss +1 -0
  4. package/dist/builder.js +1 -1
  5. package/dist/bundleDetails.scss +6 -2
  6. package/dist/buy-for-tab.scss +7 -1
  7. package/dist/buyForHeaders.scss +119 -3
  8. package/dist/cart-summary.scss +93 -14
  9. package/dist/colorpicker_v2.scss +52 -0
  10. package/dist/coupon.scss +126 -110
  11. package/dist/dropdownTemplate.scss +21 -12
  12. package/dist/embroider-template-1-v2.scss +37 -2
  13. package/dist/filters.scss +100 -83
  14. package/dist/functions.js +1 -1
  15. package/dist/language-selector.scss +50 -22
  16. package/dist/multi-select-dropdown.scss +9 -0
  17. package/dist/my-templates.scss +190 -42
  18. package/dist/myTemplates.scss +339 -233
  19. package/dist/order-status.scss +158 -64
  20. package/dist/product-image.scss +3 -3
  21. package/dist/productDetails.scss +1 -1
  22. package/dist/repeater-grid-toggle.scss +2 -2
  23. package/dist/search.scss +4 -1
  24. package/dist/static-global.scss +2 -1
  25. package/dist/stockStatus.scss +64 -0
  26. package/dist/types/builder/enums/index.d.ts +1 -0
  27. package/dist/types/builder/tools/element-edit/cartSummary.d.ts +218 -0
  28. package/dist/types/builder/tools/element-edit/index.d.ts +2 -1
  29. package/dist/types/builder/tools/element-edit/language-menu.d.ts +1 -6
  30. package/dist/types/builder/tools/element-edit/orderStatus.d.ts +68 -30
  31. package/dist/types/builder/tools/element-edit/productActions.d.ts +1 -0
  32. package/dist/types/builder/tools/element-edit/stockStatus.d.ts +15 -0
  33. package/dist/types/builder/tools/element-edit/userElements.d.ts +1 -6
  34. package/dist/user-elements.scss +1 -0
  35. package/dist/variant-picker.scss +3 -3
  36. package/dist/website.js +1 -1
  37. package/dist/widget.scss +1 -0
  38. package/package.json +1 -1
package/dist/myTemplates.scss CHANGED
@@ -1,55 +1,118 @@
1
1
  @use "sass:map";
2
2
  @use "sass:list";
3
+ @import "./functions.scss";
4
+
5
+ $defaultValues: (
6
+ --_flex-box: getListOfResponsive(flex, block),
7
+ --_width: getListOfResponsive(calc(100% - 400px), 100%),
8
+ --_width-400: getListOfResponsive(400px, 100%),
9
+ );
3
10
 
4
11
  [data-div-type="element"] {
5
12
  &[data-element-type="myTemplates"] {
13
+ width: 100% !important;
14
+
15
+ & > .wrapper {
16
+ }
17
+ &[data-show-shadow="false"] {
18
+ --_show-shadow: none;
19
+ }
20
+
21
+ // .accordion-element {
22
+ // background-color: var(
23
+ // --_ctm-mob-dn-fq-wt-bd-cr,
24
+ // var(--_ctm-tab-dn-fq-wt-bd-cr, var(--_ctm-dn-fq-wt-bd-cr))
25
+ // );
26
+ // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
27
+ // display: flex;
28
+ // flex-direction: column;
29
+ // --_sf-gp: var(
30
+ // --_ctm-mob-lt-im-sg,
31
+ // var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
32
+ // );
33
+ // --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
34
+ // row-gap: var(--_sf-gp);
35
+ // width: 100%;
36
+ // // height: 100%;
37
+ // border-color: var(
38
+ // --_ctm-mob-dn-fq-wt-br-cr,
39
+ // var(--_ctm-tab-dn-fq-wt-br-cr, var(--_ctm-dn-fq-wt-br-cr))
40
+ // );
41
+ // border-style: var(
42
+ // --_ctm-mob-dn-fq-wt-br-se,
43
+ // var(--_ctm-tab-dn-fq-wt-br-se, var(--_ctm-dn-fq-wt-br-se))
44
+ // );
45
+ // border-width: var(
46
+ // --_ctm-mob-dn-fq-wt-br-wh,
47
+ // var(--_ctm-tab-dn-fq-wt-br-wh, var(--_ctm-dn-fq-wt-br-wh))
48
+ // );
49
+ // border-radius: var(
50
+ // --_ctm-mob-dn-fq-wt-br-rs,
51
+ // var(--_ctm-tab-dn-fq-wt-br-rs, var(--_ctm-dn-fq-wt-br-rs))
52
+ // );
53
+ // box-shadow: var(
54
+ // --_show-shadow,
55
+ // var(--_ctm-mob-dn-fq-wt-sw-ae, var(--_ctm-tab-dn-fq-wt-sw-ae, var(--_ctm-dn-fq-wt-sw-ae)))
56
+ // var(--_ctm-mob-dn-fq-wt-sw-br, var(--_ctm-tab-dn-fq-wt-sw-br, var(--_ctm-dn-fq-wt-sw-br)))
57
+ // var(--_ctm-mob-dn-fq-wt-sw-sd, var(--_ctm-tab-dn-fq-wt-sw-sd, var(--_ctm-dn-fq-wt-sw-sd)))
58
+ // var(--_ctm-mob-dn-fq-wt-sw-cr, var(--_ctm-tab-dn-fq-wt-sw-cr, var(--_ctm-dn-fq-wt-sw-cr)))
59
+ // );
60
+ // }
61
+ }
62
+
63
+ .template_wrapper {
6
64
  width: 100%;
7
- .template_wrapper {
65
+ .template_section {
8
66
  width: 100%;
9
- .template_section {
10
- width: 100%;
11
- display: flex;
12
- justify-content: space-between;
13
- align-items: center;
14
- margin-bottom: 24px;
15
- h2 {
16
- font-size: 24px;
17
- }
18
- .back_to_cart {
19
- color: var(--_primary-400);
20
- &:hover {
21
- text-decoration: underline;
22
- }
67
+ display: flex;
68
+ justify-content: space-between;
69
+ align-items: center;
70
+ margin-bottom: 16px;
71
+ // h2 {
72
+ // font-size: 24px;
73
+ // }
74
+ .back_to_cart {
75
+ color: var(--_thm-cs-tt-ls-as);
76
+ &:hover {
77
+ text-decoration: underline;
23
78
  }
24
79
  }
25
- .template_body {
26
- display: flex;
27
- gap: 60px;
28
- justify-content: space-between;
29
- .template_col_left {
80
+ }
81
+ .template_body {
82
+ @include prepareMediaQueries($defaultValues);
83
+ display: var(--_flex-box, flex);
84
+ // display: flex;
85
+ gap: 60px;
86
+ justify-content: space-between;
87
+ .template_col_left {
88
+ // width: calc(100% - 400px);
89
+ width: var(--_width, 100%);
90
+ // min-height: 400px;
91
+ // background-color: var(--_base-white);
92
+ .wishlist-modal {
93
+ display: flex;
94
+ flex-direction: column;
30
95
  width: 100%;
31
- height: 400px;
32
- background-color: var(--_gray-100);
33
96
 
34
- .wishlist-modal {
97
+ .wishlist-modal-section {
98
+ // padding: 16px 24px 24px 24px;
99
+ gap: 16px !important;
100
+ overflow-x: hidden;
35
101
  display: flex;
36
102
  flex-direction: column;
37
- // gap: 1rem; //cart template modal issue
38
- // padding: 10px 16px;
39
- width: 100%;
40
- overflow-y: auto;
41
103
 
42
104
  .form-group {
43
105
  display: flex;
44
106
  flex-direction: column;
45
- gap: 8px;
107
+ gap: 6px;
108
+ max-width: 500px;
46
109
 
47
- label {
48
- display: block;
49
- font-size: 0.875rem;
50
- font-weight: 500;
51
- color: #374151;
52
- }
110
+ // label {
111
+ // display: block;
112
+ // font-size: 0.875rem;
113
+ // font-weight: 500;
114
+ // color: #374151;
115
+ // }
53
116
 
54
117
  .primary_text_label {
55
118
  font-weight: 700;
@@ -58,23 +121,27 @@
58
121
  input[type="radio"],
59
122
  textarea {
60
123
  width: 100%;
61
- padding: 0.5rem 0.75rem;
62
- font-size: 0.875rem;
63
- border: 1px solid #d1d5db;
64
- border-radius: 0.375rem;
124
+ padding: 12px 14px;
125
+ // font-size: 0.875rem;
126
+ font-size: var(--_thm-ty-p1-ft-se);
127
+ border: 1px solid var(--_thm-cs-be-se-3);
128
+ border-radius: 6px;
65
129
  outline: none;
66
130
  box-sizing: border-box;
67
131
  transition: all 0.2s;
68
132
 
69
133
  &:focus {
70
- border-color: #2563eb;
71
- // box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
134
+ border: 1px solid var(--_thm-cs-at-py);
135
+ outline: 2px solid color-mix(in srgb, color 50%, transparent);
72
136
  }
73
137
 
74
138
  &[type="radio"] {
75
139
  width: fit-content;
76
140
  height: fit-content;
77
141
  }
142
+ &::placeholder {
143
+ color: var(--_thm-ty-p2-tt-cr);
144
+ }
78
145
  }
79
146
 
80
147
  .radio-group {
@@ -91,10 +158,10 @@
91
158
  width: fit-content;
92
159
 
93
160
  span {
94
- color: var(--_gray-500);
161
+ color: var(--_thm-ty-p2-tt-cr);
95
162
 
96
163
  span {
97
- color: var(--_gray-900);
164
+ color: var(--_thm-ty-p1-tt-cr);
98
165
  font-weight: 500;
99
166
  }
100
167
  }
@@ -110,7 +177,7 @@
110
177
  display: flex;
111
178
  flex-direction: column;
112
179
  align-items: flex-start;
113
- margin-left: 20px;
180
+ margin-left: 36px;
114
181
  margin-top: 6px;
115
182
  gap: 6px;
116
183
 
@@ -122,232 +189,271 @@
122
189
  }
123
190
 
124
191
  span {
125
- font-size: 0.875rem;
126
- font-weight: 600;
127
- color: var(--_gray-900);
192
+ // font-size: 0.875rem;
193
+ // font-weight: 600;
194
+ // color: var(--_gray-900);
195
+ color: var(--_thm-ty-p1-tt-cr);
196
+ font-family: var(--_thm-ty-p1-ft-fy);
197
+ font-size: var(--_thm-ty-p2-ft-se);
198
+ font-weight: var(--_thm-ty-p1-bd);
128
199
  margin-left: -15px;
129
200
  }
130
201
  }
131
202
  }
203
+ input[type="text"] {
204
+ height: 40px;
205
+ border: 1px solid var(--_thm-cs-be-se-3);
206
+ font-size: var(--_thm-ty-p1-ft-se);
207
+ border-radius: 6px;
208
+ padding: 12px 14px;
209
+ &:focus {
210
+ border: 1px solid var(--_thm-cs-at-py);
211
+ outline: 2px solid color-mix(in srgb, color 50%, transparent);
212
+ }
213
+ }
214
+ }
215
+ }
216
+ .employee-row-wrapper {
217
+ display: flex;
218
+ flex-direction: column;
219
+ gap: 12px;
220
+ .employee-row {
221
+ display: flex;
222
+ align-items: center;
223
+ justify-content: space-between;
224
+ gap: 16px;
132
225
 
133
- .employee-row-wrapper {
226
+ .employee_first_col {
134
227
  display: flex;
135
- flex-direction: column;
136
- gap: 12px;
137
- .employee-row {
228
+ width: 100%;
229
+ gap: 16px;
230
+ align-items: center;
231
+ .dropdown {
138
232
  display: flex;
139
- align-items: center;
140
- gap: 1rem;
233
+ flex-direction: column;
234
+ gap: 6px;
235
+ }
141
236
 
142
- .dropdown {
143
- display: flex;
144
- flex-direction: column;
145
- gap: 6px;
146
- }
237
+ // .dropdown {
238
+ // flex: 1;
239
+ // display: flex;
240
+ // flex-direction: column;
241
+ // gap: 8px;
242
+ // max-width: 400px;
243
+
244
+ // .quick-order-product-dropdown-section {
245
+ // &:focus {
246
+ // &:focus {
247
+ // border-color: #2563eb;
248
+ // box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
249
+ // }
250
+ // }
251
+
252
+ // .dropdown-input-section {
253
+ // // padding: 0.5rem;
254
+
255
+ // .input-field {
256
+ // border: none;
257
+ // box-shadow: none;
258
+ // padding: 0px;
259
+ // }
260
+
261
+ // .dropdown-menu {
262
+ // top: 40px;
263
+ // }
264
+ // }
265
+ // }
266
+ // }
267
+
268
+ .checkbox-wrapper {
269
+ display: flex;
270
+ align-items: center;
271
+ flex-direction: column;
272
+ gap: 0.5rem;
273
+ white-space: nowrap;
274
+ align-self: stretch;
275
+ align-items: flex-start;
147
276
 
148
- // .dropdown {
149
- // flex: 1;
150
- // display: flex;
151
- // flex-direction: column;
152
- // gap: 8px;
153
- // max-width: 400px;
154
-
155
- // .quick-order-product-dropdown-section {
156
- // &:focus {
157
- // &:focus {
158
- // border-color: #2563eb;
159
- // box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
160
- // }
161
- // }
162
-
163
- // .dropdown-input-section {
164
- // // padding: 0.5rem;
165
-
166
- // .input-field {
167
- // border: none;
168
- // box-shadow: none;
169
- // padding: 0px;
170
- // }
171
-
172
- // .dropdown-menu {
173
- // top: 40px;
174
- // }
175
- // }
176
- // }
177
- // }
178
-
179
- .checkbox-wrapper {
277
+ .checkbox-container {
180
278
  display: flex;
279
+ width: 3.5rem;
181
280
  align-items: center;
182
- flex-direction: column;
183
- gap: 0.5rem;
184
- white-space: nowrap;
185
- align-self: stretch;
186
- align-items: flex-start;
187
-
188
- .checkbox-container {
189
- display: flex;
190
- width: 3.5rem;
191
- align-items: center;
192
- flex: 1 1 auto;
193
- justify-content: center;
194
-
195
- input[type="checkbox"] {
196
- width: 20px;
197
- height: 20px;
198
- border: 1px solid #d0d5dd;
199
- border-radius: 4px;
200
- position: relative;
201
- background-color: #fff;
202
- transition: all 0.2s ease;
203
-
204
- &::after {
205
- content: "";
206
- position: absolute;
207
- display: none;
208
- left: 5px;
209
- top: 0.5px;
210
- width: 5px;
211
- height: 10px;
212
- border: solid #fff;
213
- border-width: 0 2px 2px 0;
214
- transform: rotate(45deg);
215
- }
281
+ flex: 1 1 auto;
282
+ justify-content: center;
283
+
284
+ input[type="checkbox"] {
285
+ width: 16px;
286
+ height: 16px;
287
+ border: 1px solid #d0d5dd;
288
+ border-radius: 4px;
289
+ position: relative;
290
+ background-color: #fff;
291
+ transition: all 0.2s ease;
292
+
293
+ &::after {
294
+ content: "";
295
+ position: absolute;
296
+ display: none;
297
+ left: 5px;
298
+ top: 0.5px;
299
+ width: 5px;
300
+ height: 10px;
301
+ border: solid #fff;
302
+ border-width: 0 2px 2px 0;
303
+ transform: rotate(45deg);
216
304
  }
217
305
  }
218
306
  }
307
+ }
308
+ }
309
+
310
+ .delete-icon-wrapper {
311
+ display: flex;
312
+ align-items: center;
313
+ flex-direction: column;
314
+ gap: 0.5rem;
315
+ white-space: nowrap;
316
+ align-self: stretch;
317
+ align-items: flex-start;
318
+ // margin-left: 130px;
219
319
 
220
- .delete-icon-wrapper {
320
+ .delete-icon-container {
321
+ display: flex;
322
+ width: 100%;
323
+ align-items: center;
324
+ flex: 1 1 auto;
325
+ justify-content: center;
326
+
327
+ .delete-icon {
328
+ cursor: pointer;
221
329
  display: flex;
222
- align-items: center;
223
- flex-direction: column;
224
- gap: 0.5rem;
225
- white-space: nowrap;
226
- align-self: stretch;
227
- align-items: flex-start;
228
- margin-left: 130px;
229
-
230
- .delete-icon-container {
231
- display: flex;
232
- width: 100%;
233
- align-items: center;
234
- flex: 1 1 auto;
235
- justify-content: center;
236
-
237
- .delete-icon {
238
- cursor: pointer;
239
- display: flex;
240
- svg {
241
- width: 24px;
242
- height: 24px;
243
- path {
244
- stroke: #6b7280; // gray-500
245
- }
246
-
247
- &:hover {
248
- path {
249
- stroke: #ef4444;
250
- }
251
- }
330
+ svg {
331
+ width: 24px;
332
+ height: 24px;
333
+ path {
334
+ stroke: #6b7280; // gray-500
335
+ }
336
+
337
+ &:hover {
338
+ path {
339
+ stroke: #ef4444;
252
340
  }
253
341
  }
254
342
  }
255
343
  }
256
344
  }
257
345
  }
346
+ }
347
+ }
348
+ .action-buttons {
349
+ display: flex;
350
+ gap: 1rem;
351
+ align-items: center;
352
+ // justify-content: flex-end;
353
+ flex: 1 1 auto;
354
+ // padding: 16px 24px;
355
+ // border-top: 1px solid var(--_gray-200);
356
+ gap: 12px;
357
+ margin-top: 24px;
358
+ padding-bottom: 24px;
359
+ button {
360
+ padding: 12px 16px;
361
+ border-radius: 6px;
362
+ }
363
+ .create-btn {
364
+ display: flex;
365
+ justify-content: center;
366
+ align-items: center;
367
+ gap: 8px;
368
+ background-color: var(--_thm-py-bs-dt-se-bd-cr);
369
+ color: var(--_thm-py-bs-dt-se-tt-cr);
370
+ &.disabled {
371
+ opacity: 0.5;
372
+ pointer-events: none;
373
+ }
374
+ .loader {
375
+ animation: rotate-icon 1s linear infinite;
376
+ display: inline-block;
377
+ transform-origin: center;
258
378
 
259
- .action-buttons {
260
- display: flex;
261
- gap: 1rem;
262
- align-items: flex-end;
263
- justify-content: flex-end;
264
- flex: 1 1 auto;
265
-
266
- .create-btn {
267
- background-color: #243dc6;
268
- color: #fff;
269
- padding: 12px 24px;
270
- border-radius: 0.375rem;
271
- border: none;
272
- cursor: pointer;
273
- line-height: 24px;
274
- font-weight: 500;
275
-
276
- &:hover {
277
- background-color: #1d4ed8;
278
- }
379
+ svg path {
380
+ stroke: var(--_primary-200);
279
381
  }
382
+ }
280
383
 
281
- .discard-btn {
282
- background: none;
283
- border: none;
284
- padding: 8px 16px;
285
- color: var(--_gray-600);
286
- font-size: 16px;
287
- cursor: pointer;
288
- line-height: 24px;
289
- border-radius: 6px;
290
-
291
- &:hover {
292
- background-color: var(--_gray-50);
293
- color: var(--_gray-900);
294
- }
295
- }
384
+ &:hover {
385
+ background-color: var(--_thm-py-bs-hr-se-bd-cr);
386
+ color: var(--_thm-py-bs-hr-se-tt-cr);
296
387
  }
297
388
  }
298
- }
299
- .template_col_right {
300
- width: 400px;
301
- height: fit-content;
302
- background-color: var(--_base-white);
303
- .template_summary_wrapper {
304
- border: 1px solid var(--_gray-300);
305
- border-radius: 4px;
306
- width: 350px;
307
- .template_summary_header {
308
- padding: 12px 16px;
309
- border-bottom: 1px solid var(--_gray-300);
310
- font-size: 16px;
311
- font-weight: 600;
312
- background-color: #f5f5f5;
389
+ .discard-btn {
390
+ &:hover {
391
+ background-color: var(--_gray-50);
392
+ color: var(--_gray-900);
313
393
  }
314
- .template_summary_body {
315
- .template_summary_items {
316
- padding: 16px;
394
+ }
395
+ }
396
+ }
397
+ .template_col_right {
398
+ // width: 400px;
399
+ width: var(--_width-400, 100%);
400
+ height: fit-content;
401
+ // background-color: var(--_base-white);
402
+ overflow: hidden;
403
+ .template_summary_wrapper {
404
+ border: 1px solid var(--_thm-cs-be-se-3);
405
+ border-radius: 4px;
406
+ width: 100%;
407
+ .template_summary_header {
408
+ padding: 12px 16px;
409
+ border-bottom: 1px solid var(--_thm-cs-be-se-3);
410
+ font-size: 16px;
411
+ font-weight: 600;
412
+ background-color: var(--_thm-cs-be-se-2);
413
+ color: var(--_thm-ty-p1-tt-cr);
414
+ }
415
+ .template_summary_body {
416
+ .template_summary_items {
417
+ padding: 16px;
418
+ display: flex;
419
+ flex-direction: column;
420
+ gap: 8px;
421
+ .template_summary_item {
317
422
  display: flex;
318
- flex-direction: column;
319
- gap: 8px;
320
- .template_summary_item {
423
+ justify-content: space-between;
424
+ gap: 16px;
425
+ .template_summary_item_details {
321
426
  display: flex;
322
- justify-content: space-between;
323
427
  gap: 16px;
324
- .template_summary_item_details {
325
- display: flex;
326
- gap: 16px;
327
- .template_summary_item_pro_info {
328
- h5 {
329
- font-size: 16px;
330
- font-weight: 600;
331
- color: var(--_gray-900);
428
+ .template_summary_item_pro_info {
429
+ h5 {
430
+ font-size: var(--_thm-ty-p1-ft-se);
431
+ font-weight: var(--_thm-ty-p1-ft-wt);
432
+ color: var(--_thm-ty-p1-tt-cr);
433
+ }
434
+ .template_summary_item_pro_qty {
435
+ color: var(--_thm-ty-p3-cr);
436
+ font-size: var(--_thm-ty-p3-ft-se);
437
+ span {
438
+ display: block;
332
439
  }
333
- .template_summary_item_pro_qty {
334
- color: var(--_gray-500);
335
- font-size: 12px;
336
- span {
337
- display: block;
338
- }
339
- .qty {
340
- color: var(--_gray-900);
341
- }
440
+ .qty {
441
+ color: var(--_thm-ty-p1-tt-cr);
342
442
  }
343
443
  }
344
444
  }
345
- .template_summary_item_detail_price {
346
- font-size: 16px;
347
- font-weight: 600;
348
- color: var(--_gray-900);
349
- }
350
445
  }
446
+ .template_summary_item_detail_price {
447
+ font-size: var(--_thm-ty-p1-ft-se);
448
+ font-weight: var(--_thm-ty-p1-ft-wt);
449
+ color: var(--_thm-ty-p1-tt-cr);
450
+ white-space: nowrap;
451
+ }
452
+ }
453
+ .no_data_selected_text {
454
+ color: var(--_thm-ty-p1-tt-cr);
455
+ font-size: var(--_thm-ty-p1-ft-se);
456
+ font-weight: var(--_thm-ty-p1-ft-wt);
351
457
  }
352
458
  }
353
459
  }