@sc-360-v2/storefront-cms-library 0.5.43 → 0.5.45

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 (23) hide show
  1. package/dist/builder.js +1 -1
  2. package/dist/faq.scss +46 -0
  3. package/dist/fb-dropdown.scss +135 -125
  4. package/dist/form-preview.scss +28 -3
  5. package/dist/hotspot.scss +375 -109
  6. package/dist/map.scss +55 -4
  7. package/dist/profile.scss +210 -174
  8. package/dist/quick-links.scss +39 -6
  9. package/dist/rfqs.scss +822 -736
  10. package/dist/search.scss +236 -1
  11. package/dist/types/builder/tools/element-edit/createForm.d.ts +3 -1
  12. package/dist/types/builder/tools/element-edit/faq.d.ts +8 -1
  13. package/dist/types/builder/tools/element-edit/imageHotspot.d.ts +16 -5
  14. package/dist/types/builder/tools/element-edit/profile.d.ts +7 -1
  15. package/dist/types/builder/tools/element-edit/quickLinks.d.ts +6 -0
  16. package/dist/types/builder/tools/element-edit/rfqs.d.ts +45 -1
  17. package/dist/types/builder/tools/element-edit/search.d.ts +20 -1
  18. package/dist/types/builder/tools/element-edit/uomSelector.d.ts +5 -0
  19. package/dist/types/upload-media/types.d.ts +2 -1
  20. package/dist/uom-selector.scss +60 -2
  21. package/dist/uploadMedia.js +1 -1
  22. package/dist/volume-pricing.scss +0 -1
  23. package/package.json +1 -1
package/dist/faq.scss CHANGED
@@ -299,6 +299,29 @@
299
299
  }
300
300
  }
301
301
  }
302
+ .accordion-items {
303
+ display: flex;
304
+ gap: 8px;
305
+ .icon {
306
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
307
+ svg {
308
+ width: var(
309
+ --_ctm-mob-dn-io-in-in-se,
310
+ var(--_ctm-tab-dn-io-in-in-se, var(--_ctm-dn-io-in-in-se))
311
+ );
312
+ height: var(
313
+ --_ctm-mob-dn-io-in-in-se,
314
+ var(--_ctm-tab-dn-io-in-in-se, var(--_ctm-dn-io-in-in-se))
315
+ );
316
+ path {
317
+ stroke: var(
318
+ --_ctm-mob-dn-io-in-in-c1,
319
+ var(--_ctm-tab-dn-io-in-in-c1, var(--_ctm-dn-io-in-in-c1))
320
+ );
321
+ }
322
+ }
323
+ }
324
+ }
302
325
  }
303
326
  .accordion-description {
304
327
  display: none;
@@ -461,6 +484,29 @@
461
484
  }
462
485
  }
463
486
  }
487
+ .accordion-items {
488
+ display: flex;
489
+ gap: 8px;
490
+ .icon {
491
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
492
+ svg {
493
+ width: var(
494
+ --_ctm-mob-dn-io-in-in-se,
495
+ var(--_ctm-tab-dn-io-in-in-se, var(--_ctm-dn-io-in-in-se))
496
+ );
497
+ height: var(
498
+ --_ctm-mob-dn-io-in-in-se,
499
+ var(--_ctm-tab-dn-io-in-in-se, var(--_ctm-dn-io-in-in-se))
500
+ );
501
+ path {
502
+ stroke: var(
503
+ --_ctm-mob-dn-io-in-in-c1,
504
+ var(--_ctm-tab-dn-io-in-in-c1, var(--_ctm-dn-io-in-in-c1))
505
+ );
506
+ }
507
+ }
508
+ }
509
+ }
464
510
  }
465
511
  .accordion-description {
466
512
  display: block;
package/dist/fb-dropdown.scss CHANGED
@@ -1,125 +1,135 @@
1
- .fb_dropdown_main {
2
- position: relative;
3
- width: 100%;
4
- }
5
-
6
- .fb_dropdown_label {
7
- width: 100%;
8
- height: 40px;
9
- border: 1px solid var(--_gray-300);
10
- border-radius: 6px;
11
- background: var(--_base-white);
12
- cursor: pointer;
13
- padding: 0 12px;
14
- display: flex;
15
- align-items: center;
16
- justify-content: space-between;
17
- transition: border 0.2s ease;
18
-
19
- &:focus,
20
- &:focus-within {
21
- border-color: var(--_primary-300);
22
- box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
23
- outline: none;
24
- }
25
-
26
- &.disabled {
27
- cursor: not-allowed;
28
- background: var(--_gray-100);
29
- color: var(--_gray-400);
30
- }
31
-
32
- .fb_dropdown_text {
33
- color: var(--_gray-800);
34
- white-space: nowrap;
35
- overflow: hidden;
36
- text-overflow: ellipsis;
37
- max-width: 90%;
38
- }
39
-
40
- .fb_dropdown_icon {
41
- display: flex;
42
- transition: transform 300ms ease;
43
-
44
- svg {
45
- width: 16px;
46
- height: 16px;
47
- }
48
-
49
- &.open {
50
- transform: rotate(180deg);
51
- }
52
- }
53
- }
54
-
55
- .fb_dropdown_panel {
56
- position: absolute;
57
- width: 100%;
58
- background-color: var(--_base-white);
59
- border: 1px solid var(--_gray-300);
60
- border-radius: 6px;
61
- margin-top: 4px;
62
- z-index: 10;
63
- max-height: 200px;
64
- overflow-y: auto;
65
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
66
-
67
- &.drop-up {
68
- bottom: 44px;
69
- top: auto;
70
- margin-top: 0;
71
- margin-bottom: 4px;
72
- }
73
-
74
- &.drop-down {
75
- top: 100%;
76
- }
77
-
78
- ul {
79
- list-style: none;
80
- padding: 4px;
81
- margin: 0;
82
- display: flex;
83
- flex-direction: column;
84
- gap: 2px;
85
-
86
- li {
87
- padding: 0;
88
- }
89
-
90
- .dropdown_option {
91
- display: flex;
92
- align-items: center;
93
- gap: 8px;
94
- padding: 8px 12px;
95
- font-size: 14px;
96
- color: var(--_gray-700);
97
- cursor: pointer;
98
- transition: background 0.2s;
99
- border-radius: 4px;
100
-
101
- input[type="checkbox"] {
102
- margin: 0;
103
- pointer-events: none;
104
- }
105
-
106
- &:hover {
107
- background-color: var(--_primary-50);
108
- color: var(--_primary-500);
109
- }
110
-
111
- &.selected {
112
- background-color: var(--_primary-25);
113
- color: var(--_primary-700);
114
- font-weight: 500;
115
- }
116
- }
117
- }
118
- }
119
-
120
- .empty-options {
121
- padding: 10px 12px;
122
- color: var(--_gray-500);
123
- font-size: 14px;
124
- text-align: center;
125
- }
1
+ .react-grid-item {
2
+ position: inherit !important;
3
+ transform: inherit !important;
4
+ width: 100% !important;
5
+ height: fit-content !important;
6
+ padding-bottom: 16px !important;
7
+ .grid-item {
8
+ margin-bottom: 0px !important;
9
+ }
10
+ }
11
+ .fb_dropdown_main {
12
+ position: relative;
13
+ width: 100%;
14
+ }
15
+
16
+ .fb_dropdown_label {
17
+ width: 100%;
18
+ height: 40px;
19
+ border: 1px solid var(--_gray-300);
20
+ border-radius: 6px;
21
+ background: var(--_base-white);
22
+ cursor: pointer;
23
+ padding: 0 12px;
24
+ display: flex;
25
+ align-items: center;
26
+ justify-content: space-between;
27
+ transition: border 0.2s ease;
28
+
29
+ &:focus,
30
+ &:focus-within {
31
+ border-color: var(--_primary-300);
32
+ box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
33
+ outline: none;
34
+ }
35
+
36
+ &.disabled {
37
+ cursor: not-allowed;
38
+ background: var(--_gray-100);
39
+ color: var(--_gray-400);
40
+ }
41
+
42
+ .fb_dropdown_text {
43
+ color: var(--_gray-800);
44
+ white-space: nowrap;
45
+ overflow: hidden;
46
+ text-overflow: ellipsis;
47
+ max-width: 90%;
48
+ }
49
+
50
+ .fb_dropdown_icon {
51
+ display: flex;
52
+ transition: transform 300ms ease;
53
+
54
+ svg {
55
+ width: 16px;
56
+ height: 16px;
57
+ }
58
+
59
+ &.open {
60
+ transform: rotate(180deg);
61
+ }
62
+ }
63
+ }
64
+
65
+ .fb_dropdown_panel {
66
+ position: absolute;
67
+ width: 100%;
68
+ background-color: var(--_base-white);
69
+ border: 1px solid var(--_gray-300);
70
+ border-radius: 6px;
71
+ margin-top: 4px;
72
+ z-index: 10;
73
+ max-height: 200px;
74
+ overflow-y: auto;
75
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
76
+
77
+ &.drop-up {
78
+ bottom: 44px;
79
+ top: auto;
80
+ margin-top: 0;
81
+ margin-bottom: 4px;
82
+ }
83
+
84
+ &.drop-down {
85
+ top: 100%;
86
+ }
87
+
88
+ ul {
89
+ list-style: none;
90
+ padding: 4px;
91
+ margin: 0;
92
+ display: flex;
93
+ flex-direction: column;
94
+ gap: 2px;
95
+
96
+ li {
97
+ padding: 0;
98
+ }
99
+
100
+ .dropdown_option {
101
+ display: flex;
102
+ align-items: center;
103
+ gap: 8px;
104
+ padding: 8px 12px;
105
+ font-size: 14px;
106
+ color: var(--_gray-700);
107
+ cursor: pointer;
108
+ transition: background 0.2s;
109
+ border-radius: 4px;
110
+
111
+ input[type="checkbox"] {
112
+ margin: 0;
113
+ pointer-events: none;
114
+ }
115
+
116
+ &:hover {
117
+ background-color: var(--_primary-50);
118
+ color: var(--_primary-500);
119
+ }
120
+
121
+ &.selected {
122
+ background-color: var(--_primary-25);
123
+ color: var(--_primary-700);
124
+ font-weight: 500;
125
+ }
126
+ }
127
+ }
128
+ }
129
+
130
+ .empty-options {
131
+ padding: 10px 12px;
132
+ color: var(--_gray-500);
133
+ font-size: 14px;
134
+ text-align: center;
135
+ }
package/dist/form-preview.scss CHANGED
@@ -12,11 +12,36 @@
12
12
  align-items: center;
13
13
  justify-content: center;
14
14
  padding: 20px;
15
- height: 100%;
15
+ // height: 100%;
16
16
  width: 100%;
17
- border-radius: 5px;
18
17
  text-align: center;
19
- background-color: #ffffff;
18
+ background-color: var(
19
+ --_ctm-mob-dn-fm-cr-bd-cr,
20
+ var(--_ctm-tab-dn-fm-cr-bd-cr, var(--_ctm-dn-fm-cr-bd-cr))
21
+ );
22
+ border-color: var(
23
+ --_ctm-mob-dn-fm-cr-br-cr,
24
+ var(--_ctm-tab-dn-fm-cr-br-cr, var(--_ctm-dn-fm-cr-br-cr))
25
+ );
26
+ border-style: var(
27
+ --_ctm-mob-dn-fm-cr-br-se,
28
+ var(--_ctm-tab-dn-fm-cr-br-se, var(--_ctm-dn-fm-cr-br-se))
29
+ );
30
+ border-width: var(
31
+ --_ctm-mob-dn-fm-cr-br-wh,
32
+ var(--_ctm-tab-dn-fm-cr-br-wh, var(--_ctm-dn-fm-cr-br-wh))
33
+ );
34
+ border-radius: var(
35
+ --_ctm-mob-dn-fm-cr-br-rs,
36
+ var(--_ctm-tab-dn-fm-cr-br-rs, var(--_ctm-dn-fm-cr-br-rs))
37
+ );
38
+ box-shadow: var(
39
+ --_ctm-mob-dn-fm-cr-sw-ae,
40
+ var(--_ctm-tab-dn-fm-cr-sw-ae, var(--_ctm-dn-fm-cr-sw-ae))
41
+ )
42
+ var(--_ctm-mob-dn-fm-cr-sw-br, var(--_ctm-tab-dn-fm-cr-sw-br, var(--_ctm-dn-fm-cr-sw-br)))
43
+ var(--_ctm-mob-dn-fm-cr-sw-sd, var(--_ctm-tab-dn-fm-cr-sw-sd, var(--_ctm-dn-fm-cr-sw-sd)))
44
+ var(--_ctm-mob-dn-fm-cr-sw-cr, var(--_ctm-tab-dn-fm-cr-sw-cr, var(--_ctm-dn-fm-cr-sw-cr)));
20
45
 
21
46
  .icon-container {
22
47
  margin-bottom: 10px;