@sc-360-v2/storefront-cms-library 0.1.98 → 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 (52) 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 +88 -10
  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/index.d.ts +30 -0
  34. package/dist/types/builder/elements/brand-image/index.d.ts +30 -0
  35. package/dist/types/builder/elements/bundle/index.d.ts +30 -0
  36. package/dist/types/builder/elements/tab/index.d.ts +25 -8
  37. package/dist/types/builder/enums/index.d.ts +56 -3
  38. package/dist/types/builder/index.d.ts +4 -1
  39. package/dist/types/builder/interfaces/global.d.ts +11 -0
  40. package/dist/types/builder/tools/element-edit/brand.d.ts +17 -0
  41. package/dist/types/builder/tools/element-edit/brandImage.d.ts +27 -0
  42. package/dist/types/builder/tools/element-edit/bundle.d.ts +17 -0
  43. package/dist/types/builder/tools/element-edit/category.d.ts +17 -0
  44. package/dist/types/builder/tools/element-edit/filters.d.ts +46 -0
  45. package/dist/types/builder/tools/element-edit/imageHotspot.d.ts +1 -1
  46. package/dist/types/builder/tools/element-edit/index.d.ts +7 -1
  47. package/dist/types/builder/tools/element-edit/repeater.d.ts +22 -2
  48. package/dist/types/builder/tools/element-edit/subCategory.d.ts +17 -0
  49. package/dist/types/builder/tools/element-edit/tabs.d.ts +259 -36
  50. package/dist/types/global/types.d.ts +1 -0
  51. package/dist/variant-picker.scss +3 -2
  52. package/package.json +1 -1
package/dist/bulk-variant-picker.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  @use "sass:map";
2
2
  @use "sass:list";
3
- @import "./functions.scss";
3
+ @use "./functions.scss";
4
4
  [data-div-type="element"] {
5
5
  &[data-element-type="bulkVariantPicker"] {
6
6
  // width: var(--_lt-wh);
package/dist/bundle-basic-elements.scss ADDED
@@ -0,0 +1,421 @@
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+
4
+ [data-div-type="element"] {
5
+ &[data-element-type="bundleName"] {
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="bundleDescription"] {
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="bundleBrand"] {
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
+ &[data-element-type="bundleCode"] {
215
+ // width: var(--_lt-wh);
216
+ // height: var(--_lt-ht);
217
+ // margin: var(--_lt-mn);
218
+ // padding: var(--_lt-pg);
219
+ // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
220
+ // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
221
+ width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
222
+ margin: var(--_ctm-lt-mn, --_tst-lt-mn);
223
+ height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
224
+ // height: ;
225
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
226
+ // --_aspect-ratio: calc(
227
+ // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
228
+ // );
229
+
230
+ & > .wrapper {
231
+ width: 100%;
232
+ // height: 100%;
233
+ }
234
+ &[data-show-shadow="false"] {
235
+ --_show-shadow: none;
236
+ }
237
+ &[data-show-border="false"] {
238
+ --_show-border: none;
239
+ }
240
+ .text-element {
241
+ background: #6d96e4;
242
+ padding: 10px;
243
+ font-weight: 600;
244
+ color: rgba(75, 69, 70, 1);
245
+ }
246
+ .text-element {
247
+ background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
248
+ padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
249
+ display: flex;
250
+ flex-direction: column;
251
+ --_sf-gp: 16px;
252
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
253
+ row-gap: var(--_sf-gp);
254
+ width: 100%;
255
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
256
+ border-color: var(--_show-border, var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr)));
257
+ border-style: var(--_show-border, var(--_ctm-dn-br-se, var(--_tst-dn-br-se)));
258
+ border-width: var(--_show-border, var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh)));
259
+ border-radius: var(--_ctm-dn-br-rs, var(--_tst-dn-br-rs));
260
+ box-shadow: var(
261
+ --_show-shadow,
262
+ var(--_ctm-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-dn-sw-br, var(--_tst-dn-sw-br))
263
+ var(--_ctm-dn-sw-sd, var(--_tst-dn-sw-sd)) var(--_ctm-dn-sw-cr, var(--_tst-dn-sw-cr))
264
+ );
265
+ color: var(--_ctm-dn-cr, var(--_tst-dn-dt-se-cr));
266
+ font-family: var(--_ctm-dn-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
267
+ font-size: var(--_ctm-dn-ft-se, var(--_tst-dn-dt-se-ft-se));
268
+ font-weight: var(--_ctm-dn-ft-wt, var(--_tst-dn-dt-se-ft-wt));
269
+ font-style: var(--_ctm-dn-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
270
+ text-align: var(--_ctm-dn-tt-an, var(--_tst-dn-dt-se-tt-an));
271
+ letter-spacing: var(-_ctm-dn-lr-sg, var(--_tst-dn-dt-se-lr-sg));
272
+ line-height: var(--_ctm-dn-le-ht, var(--_tst-dn-dt-se-le-ht));
273
+ text-decoration: var(--_sf-hr-tt-dn, var(--_ctm-dn-dt-se-ue, var(--_tst-dn-dt-se-le-ht)));
274
+ scale: var(--_ctm-dn-zm-ie);
275
+ &[data-flip-x="true"] {
276
+ transform: scaleX(-1);
277
+ }
278
+ &[data-flip-y="true"] {
279
+ transform: scaleY(-1);
280
+ }
281
+ }
282
+ }
283
+ &[data-element-type="bundleReview"] {
284
+ // width: var(--_lt-wh);
285
+ // height: var(--_lt-ht);
286
+ // margin: var(--_lt-mn);
287
+ // padding: var(--_lt-pg);
288
+ // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
289
+ // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
290
+ width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
291
+ margin: var(--_ctm-lt-mn, --_tst-lt-mn);
292
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
293
+ // height: ;
294
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
295
+ // --_aspect-ratio: calc(
296
+ // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
297
+ // );
298
+
299
+ & > .wrapper {
300
+ width: 100%;
301
+ // height: 100%;
302
+ }
303
+ &[data-show-shadow="false"] {
304
+ --_show-shadow: none;
305
+ }
306
+ &[data-show-border="false"] {
307
+ --_show-border: none;
308
+ }
309
+ .text-element {
310
+ background: #6d96e4;
311
+ padding: 10px;
312
+ font-weight: 600;
313
+ color: rgba(75, 69, 70, 1);
314
+ }
315
+ .text-element {
316
+ background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
317
+ padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
318
+ display: flex;
319
+ flex-direction: column;
320
+ --_sf-gp: 16px;
321
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
322
+ row-gap: var(--_sf-gp);
323
+ width: 100%;
324
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
325
+ border-color: var(--_show-border, var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr)));
326
+ border-style: var(--_show-border, var(--_ctm-dn-br-se, var(--_tst-dn-br-se)));
327
+ border-width: var(--_show-border, var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh)));
328
+ border-radius: var(--_ctm-dn-br-rs, var(--_tst-dn-br-rs));
329
+ box-shadow: var(
330
+ --_show-shadow,
331
+ var(--_ctm-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-dn-sw-br, var(--_tst-dn-sw-br))
332
+ var(--_ctm-dn-sw-sd, var(--_tst-dn-sw-sd)) var(--_ctm-dn-sw-cr, var(--_tst-dn-sw-cr))
333
+ );
334
+ color: var(--_ctm-dn-cr, var(--_tst-dn-dt-se-cr));
335
+ font-family: var(--_ctm-dn-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
336
+ font-size: var(--_ctm-dn-ft-se, var(--_tst-dn-dt-se-ft-se));
337
+ font-weight: var(--_ctm-dn-ft-wt, var(--_tst-dn-dt-se-ft-wt));
338
+ font-style: var(--_ctm-dn-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
339
+ text-align: var(--_ctm-dn-tt-an, var(--_tst-dn-dt-se-tt-an));
340
+ letter-spacing: var(-_ctm-dn-lr-sg, var(--_tst-dn-dt-se-lr-sg));
341
+ line-height: var(--_ctm-dn-le-ht, var(--_tst-dn-dt-se-le-ht));
342
+ text-decoration: var(--_sf-hr-tt-dn, var(--_ctm-dn-dt-se-ue, var(--_tst-dn-dt-se-le-ht)));
343
+ scale: var(--_ctm-dn-zm-ie);
344
+ &[data-flip-x="true"] {
345
+ transform: scaleX(-1);
346
+ }
347
+ &[data-flip-y="true"] {
348
+ transform: scaleY(-1);
349
+ }
350
+ }
351
+ }
352
+ &[data-element-type="bundleRating"] {
353
+ // width: var(--_lt-wh);
354
+ // height: var(--_lt-ht);
355
+ // margin: var(--_lt-mn);
356
+ // padding: var(--_lt-pg);
357
+ // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
358
+ // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
359
+ width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
360
+ margin: var(--_ctm-lt-mn, --_tst-lt-mn);
361
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
362
+ // height: ;
363
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
364
+ // --_aspect-ratio: calc(
365
+ // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
366
+ // );
367
+
368
+ & > .wrapper {
369
+ width: 100%;
370
+ // height: 100%;
371
+ }
372
+ &[data-show-shadow="false"] {
373
+ --_show-shadow: none;
374
+ }
375
+ &[data-show-border="false"] {
376
+ --_show-border: none;
377
+ }
378
+ .text-element {
379
+ background: #6d96e4;
380
+ padding: 10px;
381
+ font-weight: 600;
382
+ color: rgba(75, 69, 70, 1);
383
+ }
384
+ .text-element {
385
+ background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
386
+ padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
387
+ display: flex;
388
+ flex-direction: column;
389
+ --_sf-gp: 16px;
390
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
391
+ row-gap: var(--_sf-gp);
392
+ width: 100%;
393
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
394
+ border-color: var(--_show-border, var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr)));
395
+ border-style: var(--_show-border, var(--_ctm-dn-br-se, var(--_tst-dn-br-se)));
396
+ border-width: var(--_show-border, var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh)));
397
+ border-radius: var(--_ctm-dn-br-rs, var(--_tst-dn-br-rs));
398
+ box-shadow: var(
399
+ --_show-shadow,
400
+ var(--_ctm-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-dn-sw-br, var(--_tst-dn-sw-br))
401
+ var(--_ctm-dn-sw-sd, var(--_tst-dn-sw-sd)) var(--_ctm-dn-sw-cr, var(--_tst-dn-sw-cr))
402
+ );
403
+ color: var(--_ctm-dn-cr, var(--_tst-dn-dt-se-cr));
404
+ font-family: var(--_ctm-dn-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
405
+ font-size: var(--_ctm-dn-ft-se, var(--_tst-dn-dt-se-ft-se));
406
+ font-weight: var(--_ctm-dn-ft-wt, var(--_tst-dn-dt-se-ft-wt));
407
+ font-style: var(--_ctm-dn-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
408
+ text-align: var(--_ctm-dn-tt-an, var(--_tst-dn-dt-se-tt-an));
409
+ letter-spacing: var(-_ctm-dn-lr-sg, var(--_tst-dn-dt-se-lr-sg));
410
+ line-height: var(--_ctm-dn-le-ht, var(--_tst-dn-dt-se-le-ht));
411
+ text-decoration: var(--_sf-hr-tt-dn, var(--_ctm-dn-dt-se-ue, var(--_tst-dn-dt-se-le-ht)));
412
+ scale: var(--_ctm-dn-zm-ie);
413
+ &[data-flip-x="true"] {
414
+ transform: scaleX(-1);
415
+ }
416
+ &[data-flip-y="true"] {
417
+ transform: scaleY(-1);
418
+ }
419
+ }
420
+ }
421
+ }
package/dist/bundle.scss ADDED
@@ -0,0 +1,42 @@
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="bundle"] {
8
+ // width: var(--_sf-con-nw-wh);
9
+ width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-bun-ele-nw-wh-vl, var(--_sf-nw-wh))));
10
+ // width: calc(1% * var(--_ctm-bun-ele-nw-wh-vl, auto));
11
+ // width: 100%;
12
+ // height: var(--_ctm-bun-lt-ht) !important;
13
+ height: auto;
14
+ margin: var(--_ctm-bun-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn));
15
+
16
+ background-color: var(--_ctm-bun-dn-bd-cr, var(--_tst-dn-bd-cr));
17
+ padding: var(--_ctm-bun-lt-pg, var(--_tst-lt-pg));
18
+
19
+ // height: 100%;
20
+ border-color: var(--_ctm-bun-dn-br-cr, var(--_tst-dn-br-cr));
21
+ border-style: var(--_ctm-bun-dn-br-se, var(--_tst-dn-br-se));
22
+ border-width: var(--_ctm-bun-dn-br-wh, var(--_tst-dn-br-wh));
23
+ border-radius: var(--_ctm-bun-dn-br-rs, var(--_tst-dn-br-rs));
24
+ box-shadow: var(
25
+ --_show-shadow,
26
+ var(--_ctm-bun-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-bun-dn-sw-br, var(--_tst-dn-sw-br))
27
+ var(--_ctm-bun-dn-sw-sd, var(--_tst-dn-sw-sd))
28
+ var(--_ctm-bun-dn-sw-cr, var(--_tst-dn-fq-wt-sw-cr))
29
+ );
30
+
31
+ // &:not(:has(#{$resizerId}#{$resizeActive})) {
32
+ // min-height: 100px !important;
33
+ // }
34
+
35
+ & > div {
36
+ &.wrapper {
37
+ width: 100%;
38
+ // grid-template-rows: max(var(--_ctm-bun-lt-ht), auto) !important;
39
+ }
40
+ }
41
+ }
42
+ }