@sc-360-v2/storefront-cms-library 0.1.99 → 0.2.0

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 (46) hide show
  1. package/dist/brand-basic-elements.scss +214 -0
  2. package/dist/brand.scss +43 -0
  3. package/dist/builder.js +1 -1
  4. package/dist/bulk-variant-picker.scss +1 -1
  5. package/dist/bundle-basic-elements.scss +421 -0
  6. package/dist/bundle.scss +42 -0
  7. package/dist/button.scss +189 -47
  8. package/dist/category.scss +42 -0
  9. package/dist/categoryWidget.scss +29 -0
  10. package/dist/container.scss +24 -3
  11. package/dist/editor-core.scss +86 -13
  12. package/dist/faq.scss +301 -78
  13. package/dist/gallery-slider-temp.scss +520 -432
  14. package/dist/grid.scss +27 -10
  15. package/dist/hotspot.scss +6 -10
  16. package/dist/htmlElement.js +1 -1
  17. package/dist/icons.js +1 -1
  18. package/dist/image-temp.scss +18 -8
  19. package/dist/index.js +1 -1
  20. package/dist/map.scss +5 -12
  21. package/dist/product-basic-elements.scss +7 -3
  22. package/dist/product-highlights.scss +4 -9
  23. package/dist/product-image.scss +4 -1
  24. package/dist/productDetails.scss +2 -1
  25. package/dist/repeater-embla-controls.scss +202 -0
  26. package/dist/repeater-item.scss +3 -1
  27. package/dist/repeater.scss +106 -9
  28. package/dist/section.scss +39 -17
  29. package/dist/stack.scss +53 -11
  30. package/dist/sub-category.scss +43 -0
  31. package/dist/tabs.scss +135 -0
  32. package/dist/text-temp.scss +1 -1
  33. package/dist/types/builder/elements/brand-image/index.d.ts +30 -0
  34. package/dist/types/builder/elements/tab/index.d.ts +25 -8
  35. package/dist/types/builder/enums/index.d.ts +37 -3
  36. package/dist/types/builder/index.d.ts +2 -1
  37. package/dist/types/builder/interfaces/global.d.ts +11 -0
  38. package/dist/types/builder/tools/element-edit/brandImage.d.ts +27 -0
  39. package/dist/types/builder/tools/element-edit/filters.d.ts +46 -0
  40. package/dist/types/builder/tools/element-edit/imageHotspot.d.ts +1 -1
  41. package/dist/types/builder/tools/element-edit/index.d.ts +3 -1
  42. package/dist/types/builder/tools/element-edit/repeater.d.ts +22 -2
  43. package/dist/types/builder/tools/element-edit/tabs.d.ts +259 -36
  44. package/dist/types/global/types.d.ts +1 -0
  45. package/dist/variant-picker.scss +3 -2
  46. package/package.json +1 -1
package/dist/brand-basic-elements.scss ADDED
@@ -0,0 +1,214 @@
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+
4
+ [data-div-type="element"] {
5
+ &[data-element-type="brandName"] {
6
+ // width: var(--_lt-wh);
7
+ // height: var(--_lt-ht);
8
+ // margin: var(--_lt-mn);
9
+ // padding: var(--_lt-pg);
10
+ // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
11
+ // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
12
+ width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
13
+ margin: var(--_ctm-lt-mn, --_tst-lt-mn);
14
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
15
+ // height: ;
16
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
17
+ // --_aspect-ratio: calc(
18
+ // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
19
+ // );
20
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
21
+
22
+ & > .wrapper {
23
+ width: 100%;
24
+ // height: 100%;
25
+ }
26
+ &[data-show-shadow="false"] {
27
+ --_show-shadow: none;
28
+ }
29
+ &[data-show-border="false"] {
30
+ --_show-border: none;
31
+ }
32
+ .text-element {
33
+ background: #6d96e4;
34
+ padding: 10px;
35
+ font-weight: 600;
36
+ color: rgba(75, 69, 70, 1);
37
+ cursor: pointer;
38
+ }
39
+ .text-element {
40
+ background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
41
+ padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
42
+ display: flex;
43
+ flex-direction: column;
44
+ --_sf-gp: 16px;
45
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
46
+ row-gap: var(--_sf-gp);
47
+ width: 100%;
48
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
49
+ border-color: var(--_show-border, var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr)));
50
+ border-style: var(--_show-border, var(--_ctm-dn-br-se, var(--_tst-dn-br-se)));
51
+ border-width: var(--_show-border, var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh)));
52
+ border-radius: var(--_ctm-dn-br-rs, var(--_tst-dn-br-rs));
53
+ box-shadow: var(
54
+ --_show-shadow,
55
+ var(--_ctm-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-dn-sw-br, var(--_tst-dn-sw-br))
56
+ var(--_ctm-dn-sw-sd, var(--_tst-dn-sw-sd)) var(--_ctm-dn-sw-cr, var(--_tst-dn-sw-cr))
57
+ );
58
+ color: var(--_ctm-dn-cr, var(--_tst-dn-dt-se-cr));
59
+ font-family: var(--_ctm-dn-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
60
+ font-size: var(--_ctm-dn-ft-se, var(--_tst-dn-dt-se-ft-se));
61
+ font-weight: var(--_ctm-dn-ft-wt, var(--_tst-dn-dt-se-ft-wt));
62
+ font-style: var(--_ctm-dn-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
63
+ text-align: var(--_ctm-dn-tt-an, var(--_tst-dn-dt-se-tt-an));
64
+ letter-spacing: var(-_ctm-dn-lr-sg, var(--_tst-dn-dt-se-lr-sg));
65
+ line-height: var(--_ctm-dn-le-ht, var(--_tst-dn-dt-se-le-ht));
66
+ text-decoration: var(--_sf-hr-tt-dn, var(--_ctm-dn-dt-se-ue, var(--_tst-dn-dt-se-le-ht)));
67
+ scale: var(--_ctm-dn-zm-ie);
68
+ &[data-flip-x="true"] {
69
+ transform: scaleX(-1);
70
+ }
71
+ &[data-flip-y="true"] {
72
+ transform: scaleY(-1);
73
+ }
74
+ }
75
+ }
76
+ &[data-element-type="brandDescription"] {
77
+ // width: var(--_lt-wh);
78
+ // height: var(--_lt-ht);
79
+ // margin: var(--_lt-mn);
80
+ // padding: var(--_lt-pg);
81
+ // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
82
+ // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
83
+ width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
84
+ margin: var(--_ctm-lt-mn, --_tst-lt-mn);
85
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
86
+ // height: ;
87
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
88
+ // --_aspect-ratio: calc(
89
+ // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
90
+ // );
91
+
92
+ & > .wrapper {
93
+ width: 100%;
94
+ // height: 100%;
95
+ }
96
+ &[data-show-shadow="false"] {
97
+ --_show-shadow: none;
98
+ }
99
+ &[data-show-border="false"] {
100
+ --_show-border: none;
101
+ }
102
+ .text-element {
103
+ background: #6d96e4;
104
+ padding: 10px;
105
+ font-weight: 600;
106
+ color: rgba(75, 69, 70, 1);
107
+ }
108
+ .text-element {
109
+ background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
110
+ padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
111
+ display: flex;
112
+ flex-direction: column;
113
+ --_sf-gp: 16px;
114
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
115
+ row-gap: var(--_sf-gp);
116
+ width: 100%;
117
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
118
+ border-color: var(--_show-border, var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr)));
119
+ border-style: var(--_show-border, var(--_ctm-dn-br-se, var(--_tst-dn-br-se)));
120
+ border-width: var(--_show-border, var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh)));
121
+ border-radius: var(--_ctm-dn-br-rs, var(--_tst-dn-br-rs));
122
+ box-shadow: var(
123
+ --_show-shadow,
124
+ var(--_ctm-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-dn-sw-br, var(--_tst-dn-sw-br))
125
+ var(--_ctm-dn-sw-sd, var(--_tst-dn-sw-sd)) var(--_ctm-dn-sw-cr, var(--_tst-dn-sw-cr))
126
+ );
127
+ color: var(--_ctm-dn-cr, var(--_tst-dn-dt-se-cr));
128
+ font-family: var(--_ctm-dn-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
129
+ font-size: var(--_ctm-dn-ft-se, var(--_tst-dn-dt-se-ft-se));
130
+ font-weight: var(--_ctm-dn-ft-wt, var(--_tst-dn-dt-se-ft-wt));
131
+ font-style: var(--_ctm-dn-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
132
+ text-align: var(--_ctm-dn-tt-an, var(--_tst-dn-dt-se-tt-an));
133
+ letter-spacing: var(-_ctm-dn-lr-sg, var(--_tst-dn-dt-se-lr-sg));
134
+ line-height: var(--_ctm-dn-le-ht, var(--_tst-dn-dt-se-le-ht));
135
+ text-decoration: var(--_sf-hr-tt-dn, var(--_ctm-dn-dt-se-ue, var(--_tst-dn-dt-se-le-ht)));
136
+ scale: var(--_ctm-dn-zm-ie);
137
+ &[data-flip-x="true"] {
138
+ transform: scaleX(-1);
139
+ }
140
+ &[data-flip-y="true"] {
141
+ transform: scaleY(-1);
142
+ }
143
+ }
144
+ }
145
+ &[data-element-type="brandCode"] {
146
+ // width: var(--_lt-wh);
147
+ // height: var(--_lt-ht);
148
+ // margin: var(--_lt-mn);
149
+ // padding: var(--_lt-pg);
150
+ // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
151
+ // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
152
+ width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
153
+ margin: var(--_ctm-lt-mn, --_tst-lt-mn);
154
+ height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
155
+ // height: ;
156
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
157
+ // --_aspect-ratio: calc(
158
+ // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
159
+ // );
160
+
161
+ & > .wrapper {
162
+ width: 100%;
163
+ // height: 100%;
164
+ }
165
+ &[data-show-shadow="false"] {
166
+ --_show-shadow: none;
167
+ }
168
+ &[data-show-border="false"] {
169
+ --_show-border: none;
170
+ }
171
+ .text-element {
172
+ background: #6d96e4;
173
+ padding: 10px;
174
+ font-weight: 600;
175
+ color: rgba(75, 69, 70, 1);
176
+ }
177
+ .text-element {
178
+ background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
179
+ padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
180
+ display: flex;
181
+ flex-direction: column;
182
+ --_sf-gp: 16px;
183
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
184
+ row-gap: var(--_sf-gp);
185
+ width: 100%;
186
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
187
+ border-color: var(--_show-border, var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr)));
188
+ border-style: var(--_show-border, var(--_ctm-dn-br-se, var(--_tst-dn-br-se)));
189
+ border-width: var(--_show-border, var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh)));
190
+ border-radius: var(--_ctm-dn-br-rs, var(--_tst-dn-br-rs));
191
+ box-shadow: var(
192
+ --_show-shadow,
193
+ var(--_ctm-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-dn-sw-br, var(--_tst-dn-sw-br))
194
+ var(--_ctm-dn-sw-sd, var(--_tst-dn-sw-sd)) var(--_ctm-dn-sw-cr, var(--_tst-dn-sw-cr))
195
+ );
196
+ color: var(--_ctm-dn-cr, var(--_tst-dn-dt-se-cr));
197
+ font-family: var(--_ctm-dn-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
198
+ font-size: var(--_ctm-dn-ft-se, var(--_tst-dn-dt-se-ft-se));
199
+ font-weight: var(--_ctm-dn-ft-wt, var(--_tst-dn-dt-se-ft-wt));
200
+ font-style: var(--_ctm-dn-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
201
+ text-align: var(--_ctm-dn-tt-an, var(--_tst-dn-dt-se-tt-an));
202
+ letter-spacing: var(-_ctm-dn-lr-sg, var(--_tst-dn-dt-se-lr-sg));
203
+ line-height: var(--_ctm-dn-le-ht, var(--_tst-dn-dt-se-le-ht));
204
+ text-decoration: var(--_sf-hr-tt-dn, var(--_ctm-dn-dt-se-ue, var(--_tst-dn-dt-se-le-ht)));
205
+ scale: var(--_ctm-dn-zm-ie);
206
+ &[data-flip-x="true"] {
207
+ transform: scaleX(-1);
208
+ }
209
+ &[data-flip-y="true"] {
210
+ transform: scaleY(-1);
211
+ }
212
+ }
213
+ }
214
+ }
package/dist/brand.scss ADDED
@@ -0,0 +1,43 @@
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+
4
+ $resizerId: "[data-cms-tool='cms-element-resizer']";
5
+ $resizeActive: '[data-cms-element-resizer="true"]';
6
+ [data-div-type="element"] {
7
+ &[data-element-type="brand"] {
8
+ // width: var(--_sf-con-nw-wh);
9
+ width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-bran-ele-nw-wh-vl, var(--_sf-nw-wh))));
10
+ // width: calc(1% * var(--_ctm-bran-ele-nw-wh-vl, auto));
11
+ // width: 100%;
12
+ // height: var(--_ctm-bran-lt-ht) !important;
13
+ height: auto;
14
+ margin: var(--_ctm-bran-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn));
15
+
16
+ background-color: var(--_ctm-bran-dn-bd-cr, var(--_tst-dn-bd-cr));
17
+ padding: var(--_ctm-bran-lt-pg, var(--_tst-lt-pg));
18
+
19
+ // height: 100%;
20
+ border-color: var(--_ctm-bran-dn-br-cr, var(--_tst-dn-br-cr));
21
+ border-style: var(--_ctm-bran-dn-br-se, var(--_tst-dn-br-se));
22
+ border-width: var(--_ctm-bran-dn-br-wh, var(--_tst-dn-br-wh));
23
+ border-radius: var(--_ctm-bran-dn-br-rs, var(--_tst-dn-br-rs));
24
+ box-shadow: var(
25
+ --_show-shadow,
26
+ var(--_ctm-bran-dn-sw-ae, var(--_tst-dn-sw-ae))
27
+ var(--_ctm-bran-dn-sw-br, var(--_tst-dn-sw-br))
28
+ var(--_ctm-bran-dn-sw-sd, var(--_tst-dn-sw-sd))
29
+ var(--_ctm-bran-dn-sw-cr, var(--_tst-dn-fq-wt-sw-cr))
30
+ );
31
+
32
+ // &:not(:has(#{$resizerId}#{$resizeActive})) {
33
+ // min-height: 100px !important;
34
+ // }
35
+
36
+ & > div {
37
+ &.wrapper {
38
+ width: 100%;
39
+ // grid-template-rows: max(var(--_ctm-bran-lt-ht), auto) !important;
40
+ }
41
+ }
42
+ }
43
+ }