@sc-360-v2/storefront-cms-library 0.4.39 → 0.4.42

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 (28) hide show
  1. package/dist/add-order.scss +10 -6
  2. package/dist/add-products-tab.scss +33 -25
  3. package/dist/builder.js +1 -1
  4. package/dist/bundleDetails.scss +231 -0
  5. package/dist/cart-summary.scss +93 -14
  6. package/dist/dropdownTemplate.scss +21 -12
  7. package/dist/embroider-template-1-v2.scss +81 -0
  8. package/dist/filters.scss +1 -1
  9. package/dist/language-selector.scss +29 -19
  10. package/dist/my-templates.scss +190 -42
  11. package/dist/myTemplates.scss +339 -233
  12. package/dist/order-status.scss +158 -64
  13. package/dist/product-image.scss +3 -3
  14. package/dist/productDetails.scss +1 -1
  15. package/dist/repeater-grid-toggle.scss +2 -2
  16. package/dist/search.scss +53 -36
  17. package/dist/stockStatus.scss +64 -0
  18. package/dist/types/builder/enums/index.d.ts +1 -0
  19. package/dist/types/builder/tools/element-edit/bundleDetails.d.ts +227 -0
  20. package/dist/types/builder/tools/element-edit/cartSummary.d.ts +218 -0
  21. package/dist/types/builder/tools/element-edit/iconInstace.d.ts +6 -0
  22. package/dist/types/builder/tools/element-edit/index.d.ts +2 -1
  23. package/dist/types/builder/tools/element-edit/orderStatus.d.ts +68 -30
  24. package/dist/types/builder/tools/element-edit/productActions.d.ts +1 -0
  25. package/dist/types/builder/tools/element-edit/stockStatus.d.ts +15 -0
  26. package/dist/website.js +1 -1
  27. package/dist/widget.scss +1 -0
  28. package/package.json +1 -1
package/dist/language-selector.scss CHANGED
@@ -422,10 +422,6 @@
422
422
 
423
423
  width: 100%;
424
424
 
425
- &.open .list {
426
- display: flex;
427
- animation: slideDown 0.8s ease-in-out;
428
- }
429
425
  .dropdown__button__wrapper {
430
426
  width: 100%;
431
427
  padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
@@ -452,10 +448,10 @@
452
448
  right: 0;
453
449
  transition: transform 0.4s ease-in-out;
454
450
  display: flex;
455
- &.open {
451
+ &.rotate__180 {
456
452
  transform: rotate(180deg);
457
453
  }
458
- &.close {
454
+ &.rotate__0 {
459
455
  transform: rotate(0deg);
460
456
  }
461
457
  width: prepareMediaVariable(--_ctm-dn-te-in-in-se);
@@ -475,8 +471,6 @@
475
471
  }
476
472
 
477
473
  .list {
478
- animation: slideDown 0.8s ease-in-out;
479
- display: none;
480
474
  flex-direction: column;
481
475
  border: 1px solid var(--_gray-200);
482
476
  border-radius: 6px;
@@ -514,6 +508,14 @@
514
508
  // border-radius: 4px;
515
509
  // }
516
510
  }
511
+ &.show__panel {
512
+ animation: slideUp 0.4s ease-in-out;
513
+ }
514
+
515
+ &.hide__panel {
516
+ animation: slideDown 0.4s ease-in-out;
517
+ pointer-events: none;
518
+ }
517
519
  }
518
520
  }
519
521
  }
@@ -522,23 +524,31 @@
522
524
  }
523
525
 
524
526
  @keyframes slideUp {
525
- 0% {
526
- transform: translateY(0px);
527
- opacity: 1;
528
- }
529
- 100% {
530
- transform: translateY(20px);
527
+ from {
528
+ transform: translateY(10px);
531
529
  opacity: 0;
530
+ visibility: hidden;
531
+ pointer-events: none;
532
+ }
533
+ to {
534
+ transform: translateY(0);
535
+ opacity: 1;
536
+ visibility: visible;
537
+ pointer-events: auto;
532
538
  }
533
539
  }
534
540
 
535
541
  @keyframes slideDown {
536
- 0% {
537
- transform: translateY(20px);
538
- opacity: 0;
542
+ from {
543
+ transform: translateY(10);
544
+ opacity: 1;
545
+ visibility: visible;
546
+ pointer-events: auto;
539
547
  }
540
- 100% {
548
+ to {
541
549
  transform: translateY(0px);
542
- opacity: 1;
550
+ opacity: 0;
551
+ visibility: hidden;
552
+ pointer-events: none;
543
553
  }
544
554
  }
package/dist/my-templates.scss CHANGED
@@ -66,10 +66,10 @@ $defaultValues: (
66
66
  display: flex;
67
67
  justify-content: space-between;
68
68
  align-items: center;
69
- margin-bottom: 24px;
70
- h2 {
71
- font-size: 24px;
72
- }
69
+ margin-bottom: 16px;
70
+ // h2 {
71
+ // font-size: 24px;
72
+ // }
73
73
  .back_to_cart {
74
74
  color: var(--_thm-cs-tt-ls-as);
75
75
  &:hover {
@@ -86,8 +86,8 @@ $defaultValues: (
86
86
  .template_col_left {
87
87
  // width: calc(100% - 400px);
88
88
  width: var(--_width, 100%);
89
- height: 400px;
90
- background-color: var(--_base-white);
89
+ // min-height: 400px;
90
+ // background-color: var(--_base-white);
91
91
  .wishlist-modal {
92
92
  display: flex;
93
93
  flex-direction: column;
@@ -103,15 +103,15 @@ $defaultValues: (
103
103
  .form-group {
104
104
  display: flex;
105
105
  flex-direction: column;
106
- gap: 8px;
106
+ gap: 6px;
107
107
  max-width: 500px;
108
108
 
109
- label {
110
- display: block;
111
- font-size: 0.875rem;
112
- font-weight: 500;
113
- color: #374151;
114
- }
109
+ // label {
110
+ // display: block;
111
+ // font-size: 0.875rem;
112
+ // font-weight: 500;
113
+ // color: #374151;
114
+ // }
115
115
 
116
116
  .primary_text_label {
117
117
  font-weight: 700;
@@ -120,17 +120,18 @@ $defaultValues: (
120
120
  input[type="radio"],
121
121
  textarea {
122
122
  width: 100%;
123
- padding: 0.5rem 0.75rem;
124
- font-size: 0.875rem;
125
- border: 1px solid #d1d5db;
126
- border-radius: 0.375rem;
123
+ padding: 12px 14px;
124
+ // font-size: 0.875rem;
125
+ font-size: var(--_thm-ty-p1-ft-se);
126
+ border: 1px solid var(--_thm-cs-be-se-3);
127
+ border-radius: 6px;
127
128
  outline: none;
128
129
  box-sizing: border-box;
129
130
  transition: all 0.2s;
130
131
 
131
132
  &:focus {
132
- border-color: #2563eb;
133
- // box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
133
+ border: 1px solid var(--_thm-cs-at-py);
134
+ outline: 2px solid color-mix(in srgb, color 50%, transparent);
134
135
  }
135
136
 
136
137
  &[type="radio"] {
@@ -138,7 +139,7 @@ $defaultValues: (
138
139
  height: fit-content;
139
140
  }
140
141
  &::placeholder {
141
- color: var(--_gray-500);
142
+ color: var(--_thm-ty-p2-tt-cr);
142
143
  }
143
144
  }
144
145
 
@@ -156,10 +157,10 @@ $defaultValues: (
156
157
  width: fit-content;
157
158
 
158
159
  span {
159
- color: var(--_gray-500);
160
+ color: var(--_thm-ty-p2-tt-cr);
160
161
 
161
162
  span {
162
- color: var(--_gray-900);
163
+ color: var(--_thm-ty-p1-tt-cr);
163
164
  font-weight: 500;
164
165
  }
165
166
  }
@@ -175,7 +176,7 @@ $defaultValues: (
175
176
  display: flex;
176
177
  flex-direction: column;
177
178
  align-items: flex-start;
178
- margin-left: 20px;
179
+ margin-left: 36px;
179
180
  margin-top: 6px;
180
181
  gap: 6px;
181
182
 
@@ -187,18 +188,159 @@ $defaultValues: (
187
188
  }
188
189
 
189
190
  span {
190
- font-size: 0.875rem;
191
- font-weight: 600;
192
- color: var(--_gray-900);
191
+ // font-size: 0.875rem;
192
+ // font-weight: 600;
193
+ // color: var(--_gray-900);
194
+ color: var(--_thm-ty-p1-tt-cr);
195
+ font-family: var(--_thm-ty-p1-ft-fy);
196
+ font-size: var(--_thm-ty-p2-ft-se);
197
+ font-weight: var(--_thm-ty-p1-bd);
193
198
  margin-left: -15px;
194
199
  }
195
200
  }
196
201
  }
197
202
  input[type="text"] {
198
203
  height: 40px;
199
- border: 1px solid var(--_gray-300);
204
+ border: 1px solid var(--_thm-cs-be-se-3);
205
+ font-size: var(--_thm-ty-p1-ft-se);
200
206
  border-radius: 6px;
201
- padding-inline: 16px;
207
+ padding: 12px 14px;
208
+ &:focus {
209
+ border: 1px solid var(--_thm-cs-at-py);
210
+ outline: 2px solid color-mix(in srgb, color 50%, transparent);
211
+ }
212
+ }
213
+ }
214
+ }
215
+ .employee-row-wrapper {
216
+ display: flex;
217
+ flex-direction: column;
218
+ gap: 12px;
219
+ .employee-row {
220
+ display: flex;
221
+ align-items: center;
222
+ justify-content: space-between;
223
+ gap: 16px;
224
+
225
+ .employee_first_col {
226
+ display: flex;
227
+ width: 100%;
228
+ gap: 16px;
229
+ align-items: center;
230
+ .dropdown {
231
+ display: flex;
232
+ flex-direction: column;
233
+ gap: 6px;
234
+ }
235
+
236
+ // .dropdown {
237
+ // flex: 1;
238
+ // display: flex;
239
+ // flex-direction: column;
240
+ // gap: 8px;
241
+ // max-width: 400px;
242
+
243
+ // .quick-order-product-dropdown-section {
244
+ // &:focus {
245
+ // &:focus {
246
+ // border-color: #2563eb;
247
+ // box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
248
+ // }
249
+ // }
250
+
251
+ // .dropdown-input-section {
252
+ // // padding: 0.5rem;
253
+
254
+ // .input-field {
255
+ // border: none;
256
+ // box-shadow: none;
257
+ // padding: 0px;
258
+ // }
259
+
260
+ // .dropdown-menu {
261
+ // top: 40px;
262
+ // }
263
+ // }
264
+ // }
265
+ // }
266
+
267
+ .checkbox-wrapper {
268
+ display: flex;
269
+ align-items: center;
270
+ flex-direction: column;
271
+ gap: 0.5rem;
272
+ white-space: nowrap;
273
+ align-self: stretch;
274
+ align-items: flex-start;
275
+
276
+ .checkbox-container {
277
+ display: flex;
278
+ width: 3.5rem;
279
+ align-items: center;
280
+ flex: 1 1 auto;
281
+ justify-content: center;
282
+
283
+ input[type="checkbox"] {
284
+ width: 16px;
285
+ height: 16px;
286
+ border: 1px solid #d0d5dd;
287
+ border-radius: 4px;
288
+ position: relative;
289
+ background-color: #fff;
290
+ transition: all 0.2s ease;
291
+
292
+ &::after {
293
+ content: "";
294
+ position: absolute;
295
+ display: none;
296
+ left: 5px;
297
+ top: 0.5px;
298
+ width: 5px;
299
+ height: 10px;
300
+ border: solid #fff;
301
+ border-width: 0 2px 2px 0;
302
+ transform: rotate(45deg);
303
+ }
304
+ }
305
+ }
306
+ }
307
+ }
308
+
309
+ .delete-icon-wrapper {
310
+ display: flex;
311
+ align-items: center;
312
+ flex-direction: column;
313
+ gap: 0.5rem;
314
+ white-space: nowrap;
315
+ align-self: stretch;
316
+ align-items: flex-start;
317
+ // margin-left: 130px;
318
+
319
+ .delete-icon-container {
320
+ display: flex;
321
+ width: 100%;
322
+ align-items: center;
323
+ flex: 1 1 auto;
324
+ justify-content: center;
325
+
326
+ .delete-icon {
327
+ cursor: pointer;
328
+ display: flex;
329
+ svg {
330
+ width: 24px;
331
+ height: 24px;
332
+ path {
333
+ stroke: #6b7280; // gray-500
334
+ }
335
+
336
+ &:hover {
337
+ path {
338
+ stroke: #ef4444;
339
+ }
340
+ }
341
+ }
342
+ }
343
+ }
202
344
  }
203
345
  }
204
346
  }
@@ -211,7 +353,7 @@ $defaultValues: (
211
353
  // padding: 16px 24px;
212
354
  // border-top: 1px solid var(--_gray-200);
213
355
  gap: 12px;
214
- margin-block: 24px;
356
+ margin-top: 24px;
215
357
  padding-bottom: 24px;
216
358
  button {
217
359
  padding: 12px 16px;
@@ -255,18 +397,19 @@ $defaultValues: (
255
397
  // width: 400px;
256
398
  width: var(--_width-400, 100%);
257
399
  height: fit-content;
258
- background-color: var(--_base-white);
400
+ // background-color: var(--_base-white);
259
401
  overflow: hidden;
260
402
  .template_summary_wrapper {
261
- border: 1px solid var(--_gray-300);
403
+ border: 1px solid var(--_thm-cs-be-se-3);
262
404
  border-radius: 4px;
263
405
  width: 100%;
264
406
  .template_summary_header {
265
407
  padding: 12px 16px;
266
- border-bottom: 1px solid var(--_gray-300);
408
+ border-bottom: 1px solid var(--_thm-cs-be-se-3);
267
409
  font-size: 16px;
268
410
  font-weight: 600;
269
- background-color: #f5f5f5;
411
+ background-color: var(--_thm-cs-be-se-2);
412
+ color: var(--_thm-ty-p1-tt-cr);
270
413
  }
271
414
  .template_summary_body {
272
415
  .template_summary_items {
@@ -283,29 +426,34 @@ $defaultValues: (
283
426
  gap: 16px;
284
427
  .template_summary_item_pro_info {
285
428
  h5 {
286
- font-size: 16px;
287
- font-weight: 600;
288
- color: var(--_gray-900);
429
+ font-size: var(--_thm-ty-p1-ft-se);
430
+ font-weight: var(--_thm-ty-p1-ft-wt);
431
+ color: var(--_thm-ty-p1-tt-cr);
289
432
  }
290
433
  .template_summary_item_pro_qty {
291
- color: var(--_gray-500);
292
- font-size: 12px;
434
+ color: var(--_thm-ty-p3-cr);
435
+ font-size: var(--_thm-ty-p3-ft-se);
293
436
  span {
294
437
  display: block;
295
438
  }
296
439
  .qty {
297
- color: var(--_gray-900);
440
+ color: var(--_thm-ty-p1-tt-cr);
298
441
  }
299
442
  }
300
443
  }
301
444
  }
302
445
  .template_summary_item_detail_price {
303
- font-size: 16px;
304
- font-weight: 600;
305
- color: var(--_gray-900);
446
+ font-size: var(--_thm-ty-p1-ft-se);
447
+ font-weight: var(--_thm-ty-p1-ft-wt);
448
+ color: var(--_thm-ty-p1-tt-cr);
306
449
  white-space: nowrap;
307
450
  }
308
451
  }
452
+ .no_data_selected_text {
453
+ color: var(--_thm-ty-p1-tt-cr);
454
+ font-size: var(--_thm-ty-p1-ft-se);
455
+ font-weight: var(--_thm-ty-p1-ft-wt);
456
+ }
309
457
  }
310
458
  }
311
459
  }