@sc-360-v2/storefront-cms-library 0.2.59 → 0.2.61

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 (34) hide show
  1. package/dist/brand.scss +2 -2
  2. package/dist/breadcrumbs.scss +1 -1
  3. package/dist/builder.js +1 -1
  4. package/dist/bulk-variant-picker.scss +5 -5
  5. package/dist/category.scss +2 -2
  6. package/dist/code-temp.scss +4 -1
  7. package/dist/container.scss +1 -0
  8. package/dist/embed-temp.scss +0 -2
  9. package/dist/gallery-slider-temp.scss +13 -0
  10. package/dist/icons.js +1 -1
  11. package/dist/image-temp.scss +6 -4
  12. package/dist/index.js +1 -1
  13. package/dist/login.scss +554 -0
  14. package/dist/menu.scss +0 -1
  15. package/dist/product-image.scss +6 -4
  16. package/dist/product-options.scss +548 -17
  17. package/dist/product-price.scss +10 -4
  18. package/dist/sub-category.scss +1 -1
  19. package/dist/types/builder/elements/login/index.d.ts +27 -0
  20. package/dist/types/builder/elements/reset-password/index.d.ts +27 -0
  21. package/dist/types/builder/enums/index.d.ts +2 -0
  22. package/dist/types/builder/index.d.ts +3 -1
  23. package/dist/types/builder/tools/commonProperties.d.ts +24 -0
  24. package/dist/types/builder/tools/element-edit/code.d.ts +3 -1
  25. package/dist/types/builder/tools/element-edit/common.d.ts +7 -0
  26. package/dist/types/builder/tools/element-edit/embed.d.ts +3 -1
  27. package/dist/types/builder/tools/element-edit/index.d.ts +3 -1
  28. package/dist/types/builder/tools/element-edit/login.d.ts +15 -0
  29. package/dist/types/builder/tools/element-edit/productOptions.d.ts +14 -4
  30. package/dist/types/builder/tools/element-edit/resetPassword.d.ts +15 -0
  31. package/dist/types/builder/tools/element-edit/variantPicker.d.ts +1 -1
  32. package/dist/variant-picker.scss +230 -49
  33. package/dist/widget.scss +1 -0
  34. package/package.json +1 -1
@@ -0,0 +1,554 @@
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+
4
+ [data-div-type="element"] {
5
+ &[data-element-type="login"],
6
+ &[data-element-type="resetPassword"] {
7
+ width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
8
+ height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
9
+ margin: var(--_ctm-lt-mn, --_tst-lt-mn);
10
+ aspect-ratio: 1 / var(--_sf-aspect-ratio);
11
+ position: relative;
12
+
13
+ & > .wrapper {
14
+ display: flex;
15
+ align-items: center;
16
+ justify-content: center;
17
+ width: 100%;
18
+ height: 100%;
19
+ }
20
+
21
+ // & form {
22
+ // width: 100%;
23
+ // height: 100%;
24
+ // }
25
+
26
+ &[data-widget-border="true"] {
27
+ .search-wrapper {
28
+ border-color: var(--_ctm-dn-sh-br-br-cr, var(--_tst-dn-sh-br-br-cr));
29
+ border-style: var(--_ctm-dn-sh-br-br-se, var(--_tst-dn-sh-br-br-se));
30
+ border-width: var(--_ctm-dn-sh-br-br-wh, var(--_tst-dn-sh-br-br-wh));
31
+ }
32
+ }
33
+
34
+ &[data-widget-shadow="false"] {
35
+ --_show-shadow: none;
36
+ }
37
+
38
+ &[data-show-shadow="false"] {
39
+ --_show-shadow: none;
40
+ }
41
+
42
+ .auth-container {
43
+ .logn__main__div {
44
+ height: var(--_height-100-dvh);
45
+ max-height: var(--_height-100-dvh);
46
+ overflow: clip;
47
+ width: 100%;
48
+ position: var(--_p-relative);
49
+
50
+ & > div {
51
+ &.loader {
52
+ position: var(--_p-absolute);
53
+ z-index: var(--_higher-zIndex);
54
+ background: var(--_base-white);
55
+ border-radius: 50%;
56
+ display: var(--_d-flex);
57
+ align-items: center;
58
+ justify-content: center;
59
+ --_sf-in-sz: 1.2;
60
+ width: calc(var(--_sf-img-sz) * var(--_sf-in-sz));
61
+ height: calc(var(--_sf-img-sz) * var(--_sf-in-sz));
62
+ --_sf-img-sz: 80px;
63
+
64
+ left: 50%;
65
+ top: 50%;
66
+ transform: translate(-50%, -50%);
67
+ overflow: clip;
68
+
69
+ &::before {
70
+ animation: shine 1.5s infinite;
71
+ background: linear-gradient(
72
+ to right,
73
+ rgba(255, 255, 255, 0) 0%,
74
+ rgba(255, 255, 255, 0.8) 100%
75
+ );
76
+ content: "";
77
+ display: block;
78
+ height: 90px;
79
+ left: -80%;
80
+ position: absolute;
81
+ top: 0px;
82
+ transform: skewX(-45deg);
83
+ width: 70%;
84
+ z-index: 2;
85
+ }
86
+
87
+ & > img {
88
+ // z-index: 3;
89
+ width: var(--_sf-img-sz);
90
+ height: var(--_sf-img-sz);
91
+ }
92
+ }
93
+ &.wrapper {
94
+ display: var(--_d-grid);
95
+ --_col-count: 2;
96
+ --_col-gap: 0px;
97
+ grid-template-columns: getRepeatColWidth(--_col-count, --_col-gap);
98
+
99
+ & > div {
100
+ width: 100%;
101
+ &.left__div {
102
+ display: var(--_d-flex);
103
+ background: var(--_sf-bg-img) no-repeat 0 0 / cover var(--_gray-900);
104
+ background-size: 75%;
105
+ height: 100%;
106
+ align-items: center;
107
+ img {
108
+ width: 100%;
109
+ object-fit: cover;
110
+ }
111
+
112
+ & > div {
113
+ &.left__box__parent {
114
+ max-width: 65%;
115
+ margin-inline: auto;
116
+ display: var(--_d-flex);
117
+ flex-direction: column;
118
+ --_sf-gp: var(--_gap-24);
119
+ gap: calc(var(--_sf-gp) * 1.25);
120
+
121
+ & > div {
122
+ &.box {
123
+ display: var(--_d-flex);
124
+ color: var(--_base-white);
125
+ --_sf-img-size: 50px;
126
+ // --_sf-gp: var(--_gap-24);
127
+ gap: var(--_sf-gp);
128
+
129
+ &::before {
130
+ content: "";
131
+ background: var(--_sf-img) no-repeat center center / cover;
132
+ width: var(--_sf-img-size);
133
+ height: var(--_sf-img-size);
134
+ }
135
+
136
+ & > div {
137
+ display: var(--_d-flex);
138
+ flex-direction: column;
139
+ row-gap: calc(var(--_sf-gp) * 0.5);
140
+ align-items: flex-start;
141
+ flex: 0 0 calc(100% - var(--_sf-img-size) - var(--_sf-gp));
142
+
143
+ & > p {
144
+ color: var(--_base-white);
145
+ margin: 0;
146
+
147
+ &.title {
148
+ font-weight: var(--_fw-400);
149
+ font-size: var(--_fs-24);
150
+ }
151
+ &.desc {
152
+ font-size: var(--_fs-16);
153
+ line-height: 1.6;
154
+ }
155
+ }
156
+ }
157
+ }
158
+ }
159
+ }
160
+ }
161
+ }
162
+ }
163
+ }
164
+ }
165
+ }
166
+
167
+ // General Container Styles
168
+ .loginContainer {
169
+ display: flex;
170
+ justify-content: center;
171
+ align-items: center;
172
+ }
173
+
174
+ // Login Box
175
+ .loginBox {
176
+ width: 100%;
177
+ }
178
+
179
+ // Title Styles
180
+ .title {
181
+ // text-align: center;
182
+ color: var(--_gray-900);
183
+ font-size: 24px;
184
+ margin-bottom: 8px;
185
+ }
186
+ .desc {
187
+ font-size: 14px;
188
+ color: var(--_gray-500);
189
+ }
190
+ .sso_verify {
191
+ border: 1px solid red;
192
+ }
193
+
194
+ .form_fields {
195
+ margin-top: 36px;
196
+ }
197
+
198
+ // Form Group (For Email and Password)
199
+ .field__group {
200
+ // margin-bottom: 16px;
201
+ position: relative;
202
+ .input__label {
203
+ display: flex;
204
+ align-items: center;
205
+ gap: 4px;
206
+ margin-bottom: 4px;
207
+ }
208
+ .input__field {
209
+ position: relative;
210
+ svg {
211
+ width: 20px;
212
+ height: 20px;
213
+ }
214
+ .placeholder_icon_start {
215
+ position: absolute;
216
+ z-index: 10;
217
+ top: 9px;
218
+ left: 10px;
219
+ }
220
+ .placeholder_icon_end {
221
+ position: absolute;
222
+ right: 10px;
223
+ z-index: 10;
224
+ top: 50%;
225
+ transform: translateY(-50%);
226
+ }
227
+
228
+ input {
229
+ padding-left: 38px;
230
+ }
231
+ }
232
+ .view__icon {
233
+ position: absolute;
234
+ right: 10px;
235
+ top: 35px;
236
+ svg {
237
+ width: 18px;
238
+ height: 18px;
239
+ }
240
+ }
241
+ }
242
+
243
+ // Input Field Styles
244
+ .inputField {
245
+ width: 100%;
246
+ padding: 10px;
247
+ border-radius: 6px;
248
+ border: 1px solid var(--_gray-300) !important;
249
+ font-size: 14px;
250
+ transition:
251
+ background-color 0.2s,
252
+ color 0.2s,
253
+ border-color 0.2s,
254
+ box-shadow 0.2s;
255
+ &:focus {
256
+ box-shadow:
257
+ 0px 1px 2px rgba(16, 24, 40, 0.02),
258
+ 0px 0px 0px 2px var(--_primary-100) !important;
259
+ border: 1px solid var(--_primary-300) !important;
260
+ }
261
+ }
262
+
263
+ // Invalid Input Field
264
+ .invalid {
265
+ border-color: var(--_error-300) !important;
266
+ outline: 2px solid #fee4e2;
267
+ }
268
+
269
+ // Error Text Styles
270
+ .errorText {
271
+ display: flex;
272
+ align-items: center;
273
+ gap: 4px;
274
+ font-size: 12px;
275
+ color: red;
276
+ svg {
277
+ display: flex;
278
+ width: 13px;
279
+ height: 13px;
280
+ path {
281
+ stroke: var(--_error-500);
282
+ }
283
+ }
284
+ }
285
+
286
+ // Submit Button
287
+ .submitButton {
288
+ width: 100%;
289
+ padding: 12px;
290
+ background-color: var(--_primary-500);
291
+ color: #fff;
292
+ border-radius: 6px;
293
+ border: none;
294
+ cursor: pointer;
295
+ margin-top: 16px;
296
+ display: flex;
297
+ align-items: center;
298
+ justify-content: center;
299
+ &:has(svg) {
300
+ gap: 8px;
301
+ }
302
+ svg {
303
+ display: flex;
304
+ path {
305
+ stroke: var(--_base-white);
306
+ }
307
+ }
308
+
309
+ &:disabled {
310
+ background-color: var(--_primary-100);
311
+ cursor: not-allowed;
312
+ }
313
+ }
314
+ .mt__32 {
315
+ margin-top: 32px !important;
316
+ }
317
+ .mt__48 {
318
+ margin-top: 48px !important;
319
+ }
320
+
321
+ // Loading Icon
322
+ .loadingIcon {
323
+ margin-left: 8px;
324
+ }
325
+
326
+ // Forgot Password Section
327
+ .forgotPassword {
328
+ display: flex;
329
+ align-items: center;
330
+ justify-content: space-between;
331
+ margin-top: 20px;
332
+ .remember_block {
333
+ display: flex;
334
+ align-items: center;
335
+ gap: 6px;
336
+ }
337
+ }
338
+ .flex_center {
339
+ display: flex;
340
+ justify-content: center;
341
+ align-items: center;
342
+ gap: 8px;
343
+ font-weight: 600;
344
+ margin-top: 20px;
345
+ width: 100%;
346
+ color: var(--_primary-400);
347
+ svg {
348
+ display: flex;
349
+ path {
350
+ stroke: var(--_primary-400);
351
+ }
352
+ }
353
+ }
354
+
355
+ .psw__contain {
356
+ margin-bottom: 24px;
357
+ .psw_status {
358
+ display: flex;
359
+ align-items: center;
360
+ justify-content: space-between;
361
+ .step {
362
+ width: 20%;
363
+ height: 3px;
364
+ border-radius: 4px;
365
+ background-color: var(--_gray-300);
366
+ &.active {
367
+ background-color: var(--_success-600);
368
+ }
369
+ }
370
+ }
371
+ .psw_content {
372
+ background-color: var(--_gray-50);
373
+ padding: 16px;
374
+ border-radius: 6px !important;
375
+ height: 100px;
376
+ overflow-y: auto;
377
+ margin-top: 20px;
378
+ .title {
379
+ font-size: 14px;
380
+ font-weight: 600;
381
+ color: var(--_gray-700);
382
+ margin-bottom: 16px;
383
+ }
384
+ ul {
385
+ li {
386
+ color: var(--_gray-700);
387
+ font-size: 14px;
388
+ & > span {
389
+ display: inline-flex;
390
+ }
391
+ &:not(:last-child) {
392
+ margin-bottom: 8px;
393
+ }
394
+ }
395
+ }
396
+ }
397
+ }
398
+
399
+ // password reset successfully
400
+ .reset_password_success {
401
+ display: flex;
402
+ justify-content: center;
403
+ flex-direction: column;
404
+ align-items: center;
405
+
406
+ // .rounded_icon {
407
+ // @extend .element__center;
408
+ // width: 40px;
409
+ // height: 40px;
410
+ // background-color: var(--_gray-200);
411
+ // border-radius: 50%;
412
+ // margin-bottom: 24px;
413
+ // }
414
+ }
415
+
416
+ // Forgot Password Button
417
+ .forgotPasswordButton {
418
+ background: none;
419
+ border: none;
420
+ color: var(--_primary-400);
421
+
422
+ font-weight: 600;
423
+ cursor: pointer;
424
+ font-size: 14px;
425
+ padding: 8px 16px;
426
+ border-radius: 6px;
427
+ &:hover {
428
+ background-color: var(--_primary-25);
429
+ color: var(--_primary-700);
430
+ }
431
+ }
432
+
433
+ @keyframes shine {
434
+ 100% {
435
+ left: 125%;
436
+ }
437
+ }
438
+
439
+ .reset_password {
440
+ form {
441
+ label {
442
+ display: block;
443
+ margin-bottom: 4px;
444
+ }
445
+ .formGroup {
446
+ &:not(:last-child) {
447
+ margin-bottom: 16px;
448
+ }
449
+ }
450
+ .to_be_filled {
451
+ display: grid;
452
+ grid-template-columns: 50% 50%;
453
+ gap: 4px;
454
+ margin-top: 10px;
455
+ margin-bottom: 16px;
456
+ li {
457
+ padding: 4px 10px;
458
+ background-color: var(--_gray-100);
459
+ color: var(--_gray-700);
460
+ border-radius: 40px;
461
+ display: flex;
462
+ align-items: center;
463
+ gap: 5px;
464
+ font-size: 12px;
465
+ &.active {
466
+ background-color: var(--_success-50);
467
+ color: var(--_success-700);
468
+ svg {
469
+ path {
470
+ stroke: var(--_success-700);
471
+ }
472
+ }
473
+ }
474
+
475
+ button {
476
+ svg {
477
+ path {
478
+ stroke: var(--_gray-500);
479
+ }
480
+ }
481
+ }
482
+ }
483
+ }
484
+ }
485
+
486
+ .to_be_filled {
487
+ display: flex;
488
+ }
489
+ .error {
490
+ color: var(--_error-500);
491
+ &::first-letter {
492
+ text-transform: uppercase;
493
+ }
494
+ }
495
+ }
496
+
497
+ // common styles
498
+ .btn__primary {
499
+ border-radius: 6px;
500
+ width: 100%;
501
+ height: 48px;
502
+ font-weight: 600;
503
+ color: var(--_base-white);
504
+ background-color: var(--_primary-500);
505
+ margin-top: 48px;
506
+ font-size: 16px;
507
+ display: flex;
508
+ justify-content: center;
509
+ align-items: center;
510
+ gap: 8px;
511
+ & > span {
512
+ display: flex;
513
+ svg {
514
+ path {
515
+ stroke: var(--_base-white);
516
+ }
517
+ }
518
+ }
519
+ }
520
+ .section__title {
521
+ font-size: 24px;
522
+ font-weight: 600;
523
+ margin-bottom: 8px;
524
+ color: var(--_gray-900);
525
+ }
526
+ .section__desc {
527
+ font-size: 14px;
528
+ color: var(--_gray-500);
529
+ }
530
+ .text__center {
531
+ text-align: center;
532
+ }
533
+
534
+ // .rounded__fill {
535
+ // @extend .element__center;
536
+ // width: 60px;
537
+ // height: 60px;
538
+ // background-color: var(--_success-50);
539
+ // border-radius: 50%;
540
+ // margin-bottom: 24px;
541
+ // svg {
542
+ // width: 26px;
543
+ // height: 26px;
544
+ // path {
545
+ // stroke: var(--_success-600);
546
+ // }
547
+ // }
548
+ // &.remove__bg {
549
+ // background-color: transparent;
550
+ // }
551
+ // }
552
+ }
553
+ }
554
+ }
package/dist/menu.scss CHANGED
@@ -10,7 +10,6 @@
10
10
  1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
11
11
  );
12
12
 
13
- background-color: green !important;
14
13
  & > .wrapper {
15
14
  width: 100%;
16
15
  height: 100%;
@@ -30,10 +30,12 @@
30
30
  --_show-shadow: none;
31
31
  }
32
32
  .text-element {
33
- background: #6d96e4;
34
- padding: 10px;
35
- font-weight: 600;
36
- color: rgba(75, 69, 70, 1);
33
+ // background: #6d96e4;
34
+ // padding: 10px;
35
+ // font-weight: 600;
36
+ // color: rgba(75, 69, 70, 1);
37
+ width: 100%;
38
+ height: auto;
37
39
  }
38
40
  .gallery-slider-element {
39
41
  --text-high-contrast-rgb-value: 49, 49, 49;