@sc-360-v2/storefront-cms-library 0.4.51 → 0.4.52

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/allocationDetails.scss +2253 -2247
  2. package/dist/builder.js +1 -1
  3. package/dist/cart-details.scss +3207 -3207
  4. package/dist/cart.scss +271 -269
  5. package/dist/cartAttributes.scss +932 -935
  6. package/dist/checkout.scss +6496 -6460
  7. package/dist/dropdownTemplate.scss +4 -1
  8. package/dist/filters.scss +36 -4
  9. package/dist/functions.scss +91 -1
  10. package/dist/icon-list.scss +277 -268
  11. package/dist/language-selector.scss +702 -528
  12. package/dist/layouter.scss +307 -294
  13. package/dist/login.scss +1605 -1473
  14. package/dist/menu-v2.scss +752 -730
  15. package/dist/my-templates.scss +464 -463
  16. package/dist/myTemplates.scss +5 -5
  17. package/dist/order-status.scss +1877 -1856
  18. package/dist/product-image-allocation.scss +1365 -0
  19. package/dist/product-image.scss +2 -1
  20. package/dist/product-sizechart.scss +1826 -1826
  21. package/dist/profile.scss +23 -20
  22. package/dist/repeater-embla-controls.scss +6 -0
  23. package/dist/repeater.scss +920 -915
  24. package/dist/search.scss +361 -296
  25. package/dist/static-global.scss +5 -0
  26. package/dist/types/builder/tools/element-edit/bundle.d.ts +13 -2
  27. package/dist/types/builder/tools/element-edit/cart.d.ts +1 -0
  28. package/dist/types/builder/tools/element-edit/common.d.ts +5 -0
  29. package/dist/types/builder/tools/element-edit/icon-list.d.ts +17 -0
  30. package/dist/types/builder/tools/element-edit/language-menu.d.ts +1 -0
  31. package/dist/types/builder/tools/element-edit/login.d.ts +1 -0
  32. package/dist/types/builder/tools/element-edit/orderStatus.d.ts +39 -0
  33. package/dist/types/builder/tools/element-edit/repeater.d.ts +2 -0
  34. package/dist/types/builder/tools/element-edit/resetPassword.d.ts +2 -1
  35. package/dist/types/builder/tools/element-edit/search.d.ts +28 -0
  36. package/dist/types/builder/tools/element-edit/userElements.d.ts +48 -88
  37. package/dist/user-elements.scss +2555 -2471
  38. package/package.json +1 -1
package/dist/my-templates.scss CHANGED
@@ -1,463 +1,464 @@
1
- @use "sass:map";
2
- @use "sass:list";
3
- @import "./functions.scss";
4
- $defaultValues: (
5
- --_flex-box: getListOfResponsive(flex, block),
6
- --_width: getListOfResponsive(calc(100% - 400px), 100%),
7
- --_width-400: getListOfResponsive(400px, 100%),
8
- );
9
-
10
- [data-div-type="element"] {
11
- &[data-element-type="myTemplates"] {
12
- width: 100% !important;
13
-
14
- & > .wrapper {
15
- }
16
- &[data-show-shadow="false"] {
17
- --_show-shadow: none;
18
- }
19
-
20
- // .accordion-element {
21
- // background-color: var(
22
- // --_ctm-mob-dn-fq-wt-bd-cr,
23
- // var(--_ctm-tab-dn-fq-wt-bd-cr, var(--_ctm-dn-fq-wt-bd-cr))
24
- // );
25
- // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
26
- // display: flex;
27
- // flex-direction: column;
28
- // --_sf-gp: var(
29
- // --_ctm-mob-lt-im-sg,
30
- // var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
31
- // );
32
- // --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
33
- // row-gap: var(--_sf-gp);
34
- // width: 100%;
35
- // // height: 100%;
36
- // border-color: var(
37
- // --_ctm-mob-dn-fq-wt-br-cr,
38
- // var(--_ctm-tab-dn-fq-wt-br-cr, var(--_ctm-dn-fq-wt-br-cr))
39
- // );
40
- // border-style: var(
41
- // --_ctm-mob-dn-fq-wt-br-se,
42
- // var(--_ctm-tab-dn-fq-wt-br-se, var(--_ctm-dn-fq-wt-br-se))
43
- // );
44
- // border-width: var(
45
- // --_ctm-mob-dn-fq-wt-br-wh,
46
- // var(--_ctm-tab-dn-fq-wt-br-wh, var(--_ctm-dn-fq-wt-br-wh))
47
- // );
48
- // border-radius: var(
49
- // --_ctm-mob-dn-fq-wt-br-rs,
50
- // var(--_ctm-tab-dn-fq-wt-br-rs, var(--_ctm-dn-fq-wt-br-rs))
51
- // );
52
- // box-shadow: var(
53
- // --_show-shadow,
54
- // var(--_ctm-mob-dn-fq-wt-sw-ae, var(--_ctm-tab-dn-fq-wt-sw-ae, var(--_ctm-dn-fq-wt-sw-ae)))
55
- // var(--_ctm-mob-dn-fq-wt-sw-br, var(--_ctm-tab-dn-fq-wt-sw-br, var(--_ctm-dn-fq-wt-sw-br)))
56
- // var(--_ctm-mob-dn-fq-wt-sw-sd, var(--_ctm-tab-dn-fq-wt-sw-sd, var(--_ctm-dn-fq-wt-sw-sd)))
57
- // var(--_ctm-mob-dn-fq-wt-sw-cr, var(--_ctm-tab-dn-fq-wt-sw-cr, var(--_ctm-dn-fq-wt-sw-cr)))
58
- // );
59
- // }
60
- }
61
-
62
- .template_wrapper {
63
- width: 100%;
64
- .template_section {
65
- width: 100%;
66
- display: flex;
67
- justify-content: space-between;
68
- align-items: center;
69
- margin-bottom: 16px;
70
- // h2 {
71
- // font-size: 24px;
72
- // }
73
- .back_to_cart {
74
- color: var(--_thm-cs-tt-ls-as);
75
- &:hover {
76
- text-decoration: underline;
77
- }
78
- }
79
- }
80
- .template_body {
81
- @include prepareMediaQueries($defaultValues);
82
- display: var(--_flex-box, flex);
83
- // display: flex;
84
- gap: 60px;
85
- justify-content: space-between;
86
- .template_col_left {
87
- // width: calc(100% - 400px);
88
- width: var(--_width, 100%);
89
- // min-height: 400px;
90
- // background-color: var(--_base-white);
91
- .wishlist-modal {
92
- display: flex;
93
- flex-direction: column;
94
- width: 100%;
95
-
96
- .wishlist-modal-section {
97
- // padding: 16px 24px 24px 24px;
98
- gap: 16px !important;
99
- overflow-x: hidden;
100
- display: flex;
101
- flex-direction: column;
102
-
103
- .form-group {
104
- display: flex;
105
- flex-direction: column;
106
- gap: 6px;
107
- max-width: 500px;
108
-
109
- // label {
110
- // display: block;
111
- // font-size: 0.875rem;
112
- // font-weight: 500;
113
- // color: #374151;
114
- // }
115
-
116
- .primary_text_label {
117
- font-weight: 700;
118
- }
119
-
120
- input[type="radio"],
121
- textarea {
122
- width: 100%;
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;
128
- outline: none;
129
- box-sizing: border-box;
130
- transition: all 0.2s;
131
-
132
- &:focus {
133
- border: 1px solid var(--_thm-cs-at-py);
134
- outline: 2px solid color-mix(in srgb, color 50%, transparent);
135
- }
136
-
137
- &[type="radio"] {
138
- width: fit-content;
139
- height: fit-content;
140
- }
141
- &::placeholder {
142
- color: var(--_thm-ty-p2-tt-cr);
143
- }
144
- }
145
-
146
- .radio-group {
147
- display: flex;
148
- flex-direction: column;
149
- gap: 12px;
150
- font-weight: normal;
151
-
152
- .radio-label {
153
- display: inline-flex;
154
- align-items: center;
155
- gap: 8px;
156
- cursor: pointer;
157
- width: fit-content;
158
-
159
- span {
160
- color: var(--_thm-ty-p2-tt-cr);
161
-
162
- span {
163
- color: var(--_thm-ty-p1-tt-cr);
164
- font-weight: 500;
165
- }
166
- }
167
- }
168
- }
169
-
170
- textarea {
171
- min-height: 100px;
172
- resize: vertical;
173
- }
174
-
175
- .global-can-edit {
176
- display: flex;
177
- flex-direction: column;
178
- align-items: flex-start;
179
- margin-left: 36px;
180
- margin-top: 6px;
181
- gap: 6px;
182
-
183
- input[type="checkbox"] {
184
- margin: 0;
185
- width: 16px;
186
- height: 16px;
187
- cursor: pointer;
188
- }
189
-
190
- span {
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);
198
- margin-left: -15px;
199
- }
200
- }
201
- }
202
- input[type="text"] {
203
- height: 40px;
204
- border: 1px solid var(--_thm-cs-be-se-3);
205
- font-size: var(--_thm-ty-p1-ft-se);
206
- border-radius: 6px;
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
- }
344
- }
345
- }
346
- }
347
- .action-buttons {
348
- display: flex;
349
- gap: 1rem;
350
- align-items: center;
351
- // justify-content: flex-end;
352
- flex: 1 1 auto;
353
- // padding: 16px 24px;
354
- // border-top: 1px solid var(--_gray-200);
355
- gap: 12px;
356
- margin-top: 24px;
357
- padding-bottom: 24px;
358
- button {
359
- padding: 12px 16px;
360
- border-radius: 6px;
361
- }
362
- .create-btn {
363
- display: flex;
364
- justify-content: center;
365
- align-items: center;
366
- gap: 8px;
367
- background-color: var(--_thm-py-bs-dt-se-bd-cr);
368
- color: var(--_thm-py-bs-dt-se-tt-cr);
369
- &.disabled {
370
- opacity: 0.5;
371
- pointer-events: none;
372
- }
373
- .loader {
374
- animation: rotate-icon 1s linear infinite;
375
- display: inline-block;
376
- transform-origin: center;
377
-
378
- svg path {
379
- stroke: var(--_primary-200);
380
- }
381
- }
382
-
383
- &:hover {
384
- background-color: var(--_thm-py-bs-hr-se-bd-cr);
385
- color: var(--_thm-py-bs-hr-se-tt-cr);
386
- }
387
- }
388
- .discard-btn {
389
- &:hover {
390
- background-color: var(--_gray-50);
391
- color: var(--_gray-900);
392
- }
393
- }
394
- }
395
- }
396
- .template_col_right {
397
- // width: 400px;
398
- width: var(--_width-400, 100%);
399
- height: fit-content;
400
- // background-color: var(--_base-white);
401
- overflow: hidden;
402
- .template_summary_wrapper {
403
- border: 1px solid var(--_thm-cs-be-se-3);
404
- border-radius: 4px;
405
- width: 100%;
406
- .template_summary_header {
407
- padding: 12px 16px;
408
- border-bottom: 1px solid var(--_thm-cs-be-se-3);
409
- font-size: 16px;
410
- font-weight: 600;
411
- background-color: var(--_thm-cs-be-se-2);
412
- color: var(--_thm-ty-p1-tt-cr);
413
- }
414
- .template_summary_body {
415
- .template_summary_items {
416
- padding: 16px;
417
- display: flex;
418
- flex-direction: column;
419
- gap: 8px;
420
- .template_summary_item {
421
- display: flex;
422
- justify-content: space-between;
423
- gap: 16px;
424
- .template_summary_item_details {
425
- display: flex;
426
- gap: 16px;
427
- .template_summary_item_pro_info {
428
- h5 {
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);
432
- }
433
- .template_summary_item_pro_qty {
434
- color: var(--_thm-ty-p3-cr);
435
- font-size: var(--_thm-ty-p3-ft-se);
436
- span {
437
- display: block;
438
- }
439
- .qty {
440
- color: var(--_thm-ty-p1-tt-cr);
441
- }
442
- }
443
- }
444
- }
445
- .template_summary_item_detail_price {
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);
449
- white-space: nowrap;
450
- }
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
- }
457
- }
458
- }
459
- }
460
- }
461
- }
462
- }
463
- }
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+ @import "./functions.scss";
4
+ $defaultValues: (
5
+ --_flex-box: getListOfResponsive(flex, block),
6
+ --_width: getListOfResponsive(calc(100% - 400px), 100%),
7
+ --_width-400: getListOfResponsive(400px, 100%),
8
+ );
9
+
10
+ [data-div-type="element"] {
11
+ &[data-element-type="myTemplates"] {
12
+ width: 100% !important;
13
+
14
+ & > .wrapper {
15
+ }
16
+ &[data-show-shadow="false"] {
17
+ --_show-shadow: none;
18
+ }
19
+
20
+ // .accordion-element {
21
+ // background-color: var(
22
+ // --_ctm-mob-dn-fq-wt-bd-cr,
23
+ // var(--_ctm-tab-dn-fq-wt-bd-cr, var(--_ctm-dn-fq-wt-bd-cr))
24
+ // );
25
+ // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
26
+ // display: flex;
27
+ // flex-direction: column;
28
+ // --_sf-gp: var(
29
+ // --_ctm-mob-lt-im-sg,
30
+ // var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
31
+ // );
32
+ // --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
33
+ // row-gap: var(--_sf-gp);
34
+ // width: 100%;
35
+ // // height: 100%;
36
+ // border-color: var(
37
+ // --_ctm-mob-dn-fq-wt-br-cr,
38
+ // var(--_ctm-tab-dn-fq-wt-br-cr, var(--_ctm-dn-fq-wt-br-cr))
39
+ // );
40
+ // border-style: var(
41
+ // --_ctm-mob-dn-fq-wt-br-se,
42
+ // var(--_ctm-tab-dn-fq-wt-br-se, var(--_ctm-dn-fq-wt-br-se))
43
+ // );
44
+ // border-width: var(
45
+ // --_ctm-mob-dn-fq-wt-br-wh,
46
+ // var(--_ctm-tab-dn-fq-wt-br-wh, var(--_ctm-dn-fq-wt-br-wh))
47
+ // );
48
+ // border-radius: var(
49
+ // --_ctm-mob-dn-fq-wt-br-rs,
50
+ // var(--_ctm-tab-dn-fq-wt-br-rs, var(--_ctm-dn-fq-wt-br-rs))
51
+ // );
52
+ // box-shadow: var(
53
+ // --_show-shadow,
54
+ // var(--_ctm-mob-dn-fq-wt-sw-ae, var(--_ctm-tab-dn-fq-wt-sw-ae, var(--_ctm-dn-fq-wt-sw-ae)))
55
+ // var(--_ctm-mob-dn-fq-wt-sw-br, var(--_ctm-tab-dn-fq-wt-sw-br, var(--_ctm-dn-fq-wt-sw-br)))
56
+ // var(--_ctm-mob-dn-fq-wt-sw-sd, var(--_ctm-tab-dn-fq-wt-sw-sd, var(--_ctm-dn-fq-wt-sw-sd)))
57
+ // var(--_ctm-mob-dn-fq-wt-sw-cr, var(--_ctm-tab-dn-fq-wt-sw-cr, var(--_ctm-dn-fq-wt-sw-cr)))
58
+ // );
59
+ // }
60
+ }
61
+
62
+ .template_wrapper {
63
+ width: 100%;
64
+ .template_section {
65
+ width: 100%;
66
+ display: flex;
67
+ justify-content: space-between;
68
+ align-items: center;
69
+ margin-bottom: 16px;
70
+ // h2 {
71
+ // font-size: 24px;
72
+ // }
73
+ .back_to_cart {
74
+ color: var(--_thm-cs-tt-ls-as);
75
+ &:hover {
76
+ text-decoration: underline;
77
+ }
78
+ }
79
+ }
80
+ .template_body {
81
+ @include prepareMediaQueries($defaultValues);
82
+ display: var(--_flex-box, flex);
83
+ // display: flex;
84
+ gap: 60px;
85
+ justify-content: space-between;
86
+ .template_col_left {
87
+ // width: calc(100% - 400px);
88
+ width: var(--_width, 100%);
89
+ // min-height: 400px;
90
+ // background-color: var(--_base-white);
91
+ .wishlist-modal {
92
+ display: flex;
93
+ flex-direction: column;
94
+ width: 100%;
95
+
96
+ .wishlist-modal-section {
97
+ // padding: 16px 24px 24px 24px;
98
+ gap: 16px !important;
99
+ overflow-x: hidden;
100
+ display: flex;
101
+ flex-direction: column;
102
+
103
+ .form-group {
104
+ display: flex;
105
+ flex-direction: column;
106
+ gap: 6px;
107
+ max-width: 500px;
108
+
109
+ // label {
110
+ // display: block;
111
+ // font-size: 0.875rem;
112
+ // font-weight: 500;
113
+ // color: #374151;
114
+ // }
115
+
116
+ .primary_text_label {
117
+ font-weight: 700;
118
+ }
119
+
120
+ input[type="radio"],
121
+ textarea {
122
+ width: 100%;
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;
128
+ outline: none;
129
+ box-sizing: border-box;
130
+ transition: all 0.2s;
131
+
132
+ &:focus {
133
+ border: 1px solid var(--_primary-300);
134
+ // outline: 1px solid color-mix(in srgb, var(--_primary-300) 50%, transparent);
135
+ }
136
+
137
+ &[type="radio"] {
138
+ width: fit-content;
139
+ height: fit-content;
140
+ }
141
+ &::placeholder {
142
+ color: var(--_thm-ty-p2-tt-cr);
143
+ }
144
+ }
145
+
146
+ .radio-group {
147
+ display: flex;
148
+ flex-direction: column;
149
+ gap: 12px;
150
+ font-weight: normal;
151
+
152
+ .radio-label {
153
+ display: inline-flex;
154
+ align-items: center;
155
+ gap: 8px;
156
+ cursor: pointer;
157
+ width: fit-content;
158
+
159
+ span {
160
+ color: var(--_thm-ty-p2-tt-cr);
161
+
162
+ span {
163
+ color: var(--_thm-ty-p1-tt-cr);
164
+ font-weight: 500;
165
+ }
166
+ }
167
+ }
168
+ }
169
+
170
+ textarea {
171
+ min-height: 100px;
172
+ resize: vertical;
173
+ }
174
+
175
+ .global-can-edit {
176
+ display: flex;
177
+ flex-direction: column;
178
+ align-items: flex-start;
179
+ margin-left: 36px;
180
+ margin-top: 6px;
181
+ gap: 6px;
182
+
183
+ input[type="checkbox"] {
184
+ margin: 0;
185
+ width: 16px;
186
+ height: 16px;
187
+ cursor: pointer;
188
+ }
189
+
190
+ span {
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);
198
+ margin-left: -15px;
199
+ }
200
+ }
201
+ }
202
+ input[type="text"] {
203
+ height: 40px;
204
+ border: 1px solid var(--_thm-cs-be-se-3);
205
+ font-size: var(--_thm-ty-p1-ft-se);
206
+ border-radius: 6px;
207
+ padding: 12px 14px;
208
+ transition: all 0.2s ease;
209
+ &:focus {
210
+ border: 1px solid var(--_primary-300);
211
+ // outline: 1px solid color-mix(in srgb, var(--_primary-300) 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;
225
+
226
+ .employee_first_col {
227
+ display: flex;
228
+ width: 100%;
229
+ gap: 16px;
230
+ align-items: center;
231
+ .dropdown {
232
+ display: flex;
233
+ flex-direction: column;
234
+ gap: 6px;
235
+ }
236
+
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;
276
+
277
+ .checkbox-container {
278
+ display: flex;
279
+ width: 3.5rem;
280
+ align-items: center;
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);
304
+ }
305
+ }
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;
319
+
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;
329
+ display: flex;
330
+ svg {
331
+ width: 24px;
332
+ height: 24px;
333
+ path {
334
+ stroke: #6b7280; // gray-500
335
+ }
336
+
337
+ &:hover {
338
+ path {
339
+ stroke: #ef4444;
340
+ }
341
+ }
342
+ }
343
+ }
344
+ }
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;
378
+
379
+ svg path {
380
+ stroke: var(--_primary-200);
381
+ }
382
+ }
383
+
384
+ &:hover {
385
+ background-color: var(--_thm-py-bs-hr-se-bd-cr);
386
+ color: var(--_thm-py-bs-hr-se-tt-cr);
387
+ }
388
+ }
389
+ .discard-btn {
390
+ &:hover {
391
+ background-color: var(--_gray-50);
392
+ color: var(--_gray-900);
393
+ }
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 {
422
+ display: flex;
423
+ justify-content: space-between;
424
+ gap: 16px;
425
+ .template_summary_item_details {
426
+ display: flex;
427
+ gap: 16px;
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;
439
+ }
440
+ .qty {
441
+ color: var(--_thm-ty-p1-tt-cr);
442
+ }
443
+ }
444
+ }
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);
457
+ }
458
+ }
459
+ }
460
+ }
461
+ }
462
+ }
463
+ }
464
+ }