@sc-360-v2/storefront-cms-library 0.3.63 → 0.3.65

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.
@@ -0,0 +1,459 @@
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+
4
+ [data-div-type="element"] {
5
+ &[data-element-type="optionBar"] {
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: 50%;
12
+ // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
13
+ width: var(
14
+ --_sf-el-wh-st-mx,
15
+ calc(
16
+ 1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
17
+ )
18
+ );
19
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
20
+
21
+ // height: clamp(var(--_ctm-lt-ht, 50px), 100px, auto) !important;
22
+ // height: var(--_ctm-lt-ht);
23
+ // height: ;
24
+ // height: auto;
25
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
26
+ // --_aspect-ratio: calc(
27
+ // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
28
+ // );
29
+
30
+ // &[data-element-sub-child="true"] {
31
+ // // width: max(var(--_sf-nw-wh, var(--_tst-lt-wh)));
32
+ // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
33
+ // }
34
+
35
+ & > .wrapper {
36
+ // width: 100%;
37
+ // height: 100%;
38
+ }
39
+ &[data-show-shadow="false"] {
40
+ --_show-shadow: none;
41
+ }
42
+
43
+ .accordion-element {
44
+ background-color: var(
45
+ --_ctm-mob-dn-fq-wt-bd-cr,
46
+ var(--_ctm-tab-dn-fq-wt-bd-cr, var(--_ctm-dn-fq-wt-bd-cr))
47
+ );
48
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
49
+ display: flex;
50
+ flex-direction: column;
51
+ --_sf-gp: var(
52
+ --_ctm-mob-lt-im-sg,
53
+ var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
54
+ );
55
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
56
+ row-gap: var(--_sf-gp);
57
+ width: 100%;
58
+ // height: 100%;
59
+ border-color: var(
60
+ --_ctm-mob-dn-fq-wt-br-cr,
61
+ var(--_ctm-tab-dn-fq-wt-br-cr, var(--_ctm-dn-fq-wt-br-cr))
62
+ );
63
+ border-style: var(
64
+ --_ctm-mob-dn-fq-wt-br-se,
65
+ var(--_ctm-tab-dn-fq-wt-br-se, var(--_ctm-dn-fq-wt-br-se))
66
+ );
67
+ border-width: var(
68
+ --_ctm-mob-dn-fq-wt-br-wh,
69
+ var(--_ctm-tab-dn-fq-wt-br-wh, var(--_ctm-dn-fq-wt-br-wh))
70
+ );
71
+ border-radius: var(
72
+ --_ctm-mob-dn-fq-wt-br-rs,
73
+ var(--_ctm-tab-dn-fq-wt-br-rs, var(--_ctm-dn-fq-wt-br-rs))
74
+ );
75
+ box-shadow: var(
76
+ --_show-shadow,
77
+ var(--_ctm-mob-dn-fq-wt-sw-ae, var(--_ctm-tab-dn-fq-wt-sw-ae, var(--_ctm-dn-fq-wt-sw-ae)))
78
+ var(--_ctm-mob-dn-fq-wt-sw-br, var(--_ctm-tab-dn-fq-wt-sw-br, var(--_ctm-dn-fq-wt-sw-br)))
79
+ var(--_ctm-mob-dn-fq-wt-sw-sd, var(--_ctm-tab-dn-fq-wt-sw-sd, var(--_ctm-dn-fq-wt-sw-sd)))
80
+ var(--_ctm-mob-dn-fq-wt-sw-cr, var(--_ctm-tab-dn-fq-wt-sw-cr, var(--_ctm-dn-fq-wt-sw-cr)))
81
+ );
82
+
83
+ &[data-divider-show="true"] {
84
+ --_sf-dvdr: var(
85
+ --_ctm-mob-dn-dr-dr-wh,
86
+ var(--_ctm-tab-dn-dr-dr-wh, var(--_ctm-dn-dr-dr-wh, 1px))
87
+ )
88
+ var(--_ctm-mob-dn-dr-br-se, var(--_ctm-tab-dn-dr-br-se, var(--_ctm-dn-dr-br-se, solid)))
89
+ var(--_ctm-dn-dr-br-cr, var(--_tst-dn-dr-bd-cr));
90
+ --_sf-dvdr-gap: var(--_sf-gp);
91
+ }
92
+ &[data-icon-position="Left"] {
93
+ --_sf-fd: row-reverse;
94
+ --_sf-jc: flex-end;
95
+ }
96
+ &[data-show-icon="false"] {
97
+ --_sf-show-icon-ff: none;
98
+ }
99
+ &[data-divider-show="true"] {
100
+ // .accordion-item:not(:last-child) {
101
+ // border-bottom: var(
102
+ // --_ctm-mob-dn-dr-dr-wh,
103
+ // var(--_ctm-tab-dn-dr-dr-wh, var(--_ctm-dn-dr-dr-wh))
104
+ // )
105
+ // var(--_ctm-mob-dn-dr-br-se, var(--_ctm-tab-dn-dr-br-se, var(--_ctm-dn-dr-br-se)))
106
+ // var(--_ctm-mob-dn-dr-br-cr, var(--_ctm-tab-dn-dr-br-cr, var(--_ctm-dn-dr-br-cr)));
107
+ // }
108
+ }
109
+ }
110
+
111
+ .accordion-item {
112
+ width: 100%;
113
+ display: grid;
114
+ overflow: clip;
115
+ // height: 30px;
116
+
117
+ // padding-block: var(--_ctm-lt-im-vl-pg, var(--_tst-lt-im-vl-pg));
118
+ // padding-inline: var(
119
+ // --_ctm-mob-lt-im-hl-pg,
120
+ // var(--_ctm-tab-lt-im-hl-pg, var(--_ctm-lt-im-hl-pg))
121
+ // );
122
+
123
+ grid-template-rows: var(
124
+ --_self-active-gtr,
125
+ minmax(
126
+ var(
127
+ --_ctm-mob-dn-cd-an-im-in-se,
128
+ var(--_ctm-tab-dn-cd-an-im-in-se, var(--_ctm-dn-cd-an-im-in-se, 50px))
129
+ ),
130
+ auto
131
+ )
132
+ 0px
133
+ );
134
+ // transition: grid-template-rows 0.45s ease-in-out;
135
+
136
+ --_sf-pd-cd: var(--_sf-dvdr-gap);
137
+ // updated css
138
+ border-color: var(
139
+ --_ctm-mob-dn-cd-an-im-br-cr,
140
+ var(--_ctm-tab-dn-cd-an-im-br-cr, var(--_ctm-dn-cd-an-im-br-cr))
141
+ );
142
+ border-style: var(
143
+ --_ctm-mob-dn-cd-an-im-br-se,
144
+ var(--_ctm-tab-dn-cd-an-im-br-se, var(--_ctm-dn-cd-an-im-br-se))
145
+ );
146
+ border-width: var(
147
+ --_ctm-mob-dn-cd-an-im-br-wh,
148
+ var(--_ctm-tab-dn-cd-an-im-br-wh, var(--_ctm-dn-cd-an-im-br-wh))
149
+ );
150
+ border-radius: var(
151
+ --_ctm-mob-dn-cd-an-im-br-rs,
152
+ var(--_ctm-tab-dn-cd-an-im-br-rs, var(--_ctm-dn-cd-an-im-br-rs))
153
+ );
154
+ box-shadow: var(
155
+ --_show-shadow,
156
+ var(
157
+ --_ctm-mob-dn-cd-an-im-sw-ae,
158
+ var(--_ctm-tab-dn-cd-an-im-sw-ae, var(--_ctm-dn-cd-an-im-sw-ae))
159
+ )
160
+ var(
161
+ --_ctm-mob-dn-cd-an-im-sw-br,
162
+ var(--_ctm-tab-dn-cd-an-im-sw-br, var(--_ctm-dn-cd-an-im-sw-br))
163
+ )
164
+ var(
165
+ --_ctm-mob-dn-cd-an-im-sw-sd,
166
+ var(--_ctm-tab-dn-cd-an-im-sw-sd, var(--_ctm-dn-cd-an-im-sw-sd))
167
+ )
168
+ var(
169
+ --_ctm-mob-dn-cd-an-im-sw-sd,
170
+ var(--_ctm-tab-dn-cd-an-im-sw-sd, var(--_ctm-dn-cd-an-im-sw-sd))
171
+ )
172
+ );
173
+
174
+ // &:not(:last-of-type) {
175
+ // &::after {
176
+ // content: "";
177
+ // height: var(--_ctm-dn-dr-dr-wh, 1px);
178
+ // background-color: var(--_ctm-dn-dr-br-cr, var(--_tst-dn-dr-bd-cr));
179
+
180
+ // // border-block-end: var(--_sf-dvdr);
181
+ // }
182
+ // }
183
+
184
+ .accordion-title {
185
+ display: flex;
186
+ flex-direction: var(--_sf-fd, row);
187
+ align-content: center;
188
+ gap: var(--_sf-cd-gp);
189
+ align-items: center;
190
+ justify-content: var(--_sf-jc, space-between);
191
+ cursor: pointer;
192
+ // padding-block-end: var(--_sf-dc-pd, var(--_sf-pd-cd));
193
+ background-color: var(
194
+ --_ctm-mob-dn-cd-an-im-bd-cr,
195
+ var(--_ctm-tab-dn-cd-an-im-bd-cr, var(--_ctm-dn-cd-an-im-bd-cr))
196
+ );
197
+
198
+ p {
199
+ // padding-inline: var(--_sf-cd-gp);
200
+ color: var(
201
+ --_ctm-mob-dn-cd-an-im-cr,
202
+ var(--_ctm-tab-dn-cd-an-im-cr, var(--_ctm-dn-cd-an-im-cr))
203
+ );
204
+ font-family: var(
205
+ --_ctm-mob-dn-cd-an-im-ft-fy,
206
+ var(--_ctm-tab-dn-cd-an-im-ft-fy, var(--_ctm-dn-cd-an-im-ft-fy))
207
+ ),
208
+ sans-serif;
209
+ font-size: var(
210
+ --_ctm-mob-dn-cd-an-im-ft-se,
211
+ var(--_ctm-tab-dn-cd-an-im-ft-se, var(--_ctm-dn-cd-an-im-ft-se))
212
+ );
213
+ font-weight: var(
214
+ --_ctm-mob-dn-cd-an-im-ft-wt,
215
+ var(--_ctm-tab-dn-cd-an-im-ft-wt, var(--_ctm-dn-cd-an-im-ft-wt))
216
+ );
217
+ font-style: var(
218
+ --_ctm-mob-dn-cd-an-im-ft-se-ic,
219
+ var(--_ctm-tab-dn-cd-an-im-ft-se-ic, var(--_ctm-dn-cd-an-im-ft-se-ic))
220
+ );
221
+ text-align: var(
222
+ --_ctm-mob-dn-cd-an-im-tt-an,
223
+ var(--_ctm-tab-dn-cd-an-im-tt-an, var(--_ctm-dn-cd-an-im-tt-an))
224
+ );
225
+ letter-spacing: var(
226
+ --_ctm-mob-dn-cd-an-im-lr-sg,
227
+ var(--_ctm-tab-dn-cd-an-im-lr-sg, var(--_ctm-dn-cd-an-im-lr-sg))
228
+ );
229
+ line-height: var(
230
+ --_ctm-mob-dn-cd-an-im-le-ht,
231
+ var(--_ctm-tab-dn-cd-an-im-le-ht, var(--_ctm-dn-cd-an-im-le-ht-dc))
232
+ );
233
+ text-decoration: var(
234
+ --_ctm-mob-dn-cd-an-im-ue,
235
+ var(--_ctm-tab-dn-cd-an-im-ue, var(--_ctm-dn-cd-an-im-ue))
236
+ );
237
+ }
238
+ .icon {
239
+ display: var(--_sf-show-icon-ff, flex);
240
+ svg {
241
+ width: var(
242
+ --_ctm-mab-dn-cd-an-im-in-se,
243
+ var(--_ctm-tab-dn-cd-an-im-in-se, var(--_ctm-dn-cd-an-im-in-se))
244
+ );
245
+ height: var(
246
+ --_ctm-mob-dn-cd-an-im-in-se,
247
+ var(--_ctm-tab-dn-cd-an-im-in-se, var(--_ctm-dn-cd-an-im-in-se))
248
+ );
249
+ path {
250
+ stroke: var(
251
+ --_ctm-mob-dn-cd-an-im-in-c1,
252
+ var(--_ctm-tab-dn-cd-an-im-in-c1, var(--_ctm-dn-cd-an-im-in-c1))
253
+ );
254
+ }
255
+ }
256
+ }
257
+ }
258
+ .accordion-description {
259
+ display: none;
260
+ }
261
+ // .accordion-description {
262
+ // // margin-block-start: calc(-1 * var(--_sf-dc-mb));
263
+ // padding-block-end: var(--_sf-dc-pd-bt);
264
+ // p {
265
+ // color: var(--_ctm-dn-cd-an-im-cr-dc, var(--_tst-dn-cd-an-im-cr-dc));
266
+ // font-family: var(--_ctm-dn-cd-an-im-ft-fy-dc, var(--_tst-dn-cd-an-im-ft-fy-dc)),
267
+ // sans-serif;
268
+ // font-size: var(--_ctm-dn-cd-an-im-ft-se-dc, var(--_tst-dn-cd-an-im-ft-se-dc));
269
+ // font-weight: var(--_ctm-dn-cd-an-im-ft-wt-dc, var(--_tst-dn-cd-an-im-ft-wt-dc));
270
+ // font-style: var(--_ctm-dn-cd-an-im-ft-se-ic-dc, var(--_tst-dn-cd-an-im-ft-se-ic-dc));
271
+ // text-align: var(--_ctm-dn-cd-an-im-tt-an-dc, var(--_tst-dn-cd-an-im-tt-an-dc));
272
+ // letter-spacing: var(--_ctm-dn-cd-an-im-lr-sg-dc, var(--_tst-dn-cd-an-im-lr-sg-dc));
273
+ // line-height: var(--_ctm-dn-cd-an-im-le-ht-dc, var(--_tst-dn-cd-an-im-le-ht-dc));
274
+ // }
275
+ // }
276
+
277
+ &[data-state="open"] {
278
+ // overflow: inherit;
279
+ // height: auto;
280
+ gap: var(
281
+ --_ctm-mob-lt-te-ad-dn-sg,
282
+ var(--_ctm-tab-lt-te-ad-dn-sg, var(--_ctm-lt-te-ad-dn-sg))
283
+ );
284
+
285
+ --_self-active-gtr: minmax(
286
+ var(
287
+ --_ctm-mob-dn-cd-an-im-in-se,
288
+ var(--_ctm-tab-dn-cd-an-im-in-se, var(--_ctm-dn-cd-an-im-in-se))
289
+ ),
290
+ auto
291
+ )
292
+ minmax(50px, auto);
293
+
294
+ --_sf-dc-pd: var(--_sf-dvdr-gap, var(--_sf-cd-gp));
295
+ --_sf-dc-mb: var(--_sf-cd-gp);
296
+ --_sf-tt-pd: 0px;
297
+ --_sf-dc-pd-bt: var(--_sf-dvdr-gap, 0px);
298
+
299
+ border-color: var(
300
+ --_ctm-mob-dn-ed-an-im-br-cr,
301
+ var(--_ctm-tab-dn-ed-an-im-br-cr, var(--_ctm-dn-ed-an-im-br-cr))
302
+ );
303
+ border-style: var(
304
+ --_ctm-mob-dn-ed-an-im-br-se,
305
+ var(--_ctm-tab-dn-ed-an-im-br-se, var(--_ctm-dn-ed-an-im-br-se))
306
+ );
307
+ border-width: var(
308
+ --_ctm-mob-dn-ed-an-im-br-wh,
309
+ var(--_ctm-tab-dn-ed-an-im-br-wh, var(--_ctm-dn-ed-an-im-br-wh))
310
+ );
311
+ border-radius: var(
312
+ --_ctm-mob-dn-ed-an-im-br-rs,
313
+ var(--_ctm-tab-dn-ed-an-im-br-rs, var(--_ctm-dn-ed-an-im-br-rs))
314
+ );
315
+ box-shadow: var(
316
+ --_show-shadow,
317
+ var(
318
+ --_ctm-mob-dn-ed-an-im-sw-ae,
319
+ var(--_ctm-tab-dn-ed-an-im-sw-ae, var(--_ctm-dn-ed-an-im-sw-ae))
320
+ )
321
+ var(
322
+ --_ctm-mob-dn-ed-an-im-sw-br,
323
+ var(--_ctm-tab-dn-ed-an-im-sw-br, var(--_ctm-dn-ed-an-im-sw-br))
324
+ )
325
+ var(
326
+ --_ctm-mob-dn-ed-an-im-sw-sd,
327
+ var(--_ctm-tab-dn-ed-an-im-sw-sd, var(--_ctm-dn-ed-an-im-sw-sd))
328
+ )
329
+ var(
330
+ --_ctm-mob-dn-ed-an-im-sw-cr,
331
+ var(--_ctm-tab-dn-ed-an-im-sw-cr, var(--_ctm-dn-ed-an-im-sw-cr))
332
+ )
333
+ );
334
+ .accordion-title {
335
+ display: flex;
336
+ flex-direction: var(--_sf-fd, row);
337
+ align-content: center;
338
+ gap: var(--_sf-cd-gp);
339
+ align-items: center;
340
+ justify-content: var(--_sf-jc, space-between);
341
+ cursor: pointer;
342
+ // padding-block-end: var(--_sf-dc-pd, var(--_sf-pd-cd));
343
+ background-color: var(
344
+ --_ctm-mob-dn-ed-an-im-bd-cr,
345
+ var(--_ctm-tab-dn-ed-an-im-bd-cr, var(--_ctm-dn-ed-an-im-bd-cr))
346
+ );
347
+
348
+ color: var(
349
+ --_ctm-mob-dn-ed-an-im-cr,
350
+ var(--_ctm-tab-dn-ed-an-im-cr, var(--_ctm-dn-ed-an-im-cr))
351
+ );
352
+ font-family: var(
353
+ --_ctm-mob-dn-ed-an-im-ft-fy,
354
+ var(--_ctm-tab-dn-ed-an-im-ft-fy, var(--_ctm-dn-ed-an-im-ft-fy))
355
+ ),
356
+ sans-serif;
357
+ font-size: var(
358
+ --_ctm-mob-dn-ed-an-im-ft-se,
359
+ var(--_ctm-tab-dn-ed-an-im-ft-se, var(--_ctm-dn-ed-an-im-ft-se))
360
+ );
361
+ font-weight: var(
362
+ --_ctm-mob-dn-ed-an-im-ft-wt,
363
+ var(--_ctm-tab-dn-ed-an-im-ft-wt, var(--_ctm-dn-ed-an-im-ft-wt))
364
+ );
365
+ font-style: var(
366
+ --_ctm-mob-dn-ed-an-im-ft-se-ic,
367
+ var(--_tst-tab-dn-ed-an-im-ft-se-ic, var(--_tst-dn-ed-an-im-ft-se-ic))
368
+ );
369
+ text-align: var(
370
+ --_ctm-mob-dn-ed-an-im-tt-an,
371
+ var(--_ctm-tab-dn-ed-an-im-tt-anvvar(--_ctm-dn-ed-an-im-tt-an))
372
+ );
373
+ letter-spacing: var(
374
+ --_ctm-mob-dn-ed-an-im-lr-sg,
375
+ var(--_ctm-tab-dn-ed-an-im-lr-sg, var(--_ctm-dn-ed-an-im-lr-sg))
376
+ );
377
+ line-height: var(
378
+ --_ctm-mob-dn-ed-an-im-le-ht,
379
+ var(--_ctm-tab-dn-ed-an-im-le-ht, var(--_ctm-dn-ed-an-im-le-ht))
380
+ );
381
+ // text-decoration: var(
382
+ // --_ctm-dn-ed-an-im-lh,
383
+ // var(--_ctm-dn-ed-an-im-ue),
384
+ // var(--_tst-dn-cd-an-im-lh)
385
+ // );
386
+ text-decoration: var(
387
+ --_ctm-mob-dn-ed-an-im-ue,
388
+ var(--_ctm-tab-dn-ed-an-im-ue, var(--_ctm-dn-ed-an-im-ue))
389
+ );
390
+ .icon {
391
+ display: var(--_sf-show-icon-ff, flex);
392
+ svg {
393
+ width: var(
394
+ --_ctm-mob-dn-ed-an-im-in-se,
395
+ var(--_ctm-tab-dn-ed-an-im-in-se, var(--_ctm-dn-ed-an-im-in-se))
396
+ );
397
+ height: var(
398
+ --_ctm-mob-dn-ed-an-im-in-se,
399
+ var(--_ctm-tab-dn-ed-an-im-in-se, var(--_ctm-dn-ed-an-im-in-se))
400
+ );
401
+ path {
402
+ stroke: var(
403
+ --_ctm-mob-dn-ed-an-im-in-c1,
404
+ var(--_ctm-tab-dn-ed-an-im-in-c1, var(--_ctm-dn-ed-an-im-in-c1))
405
+ );
406
+ }
407
+ }
408
+ }
409
+ }
410
+ .accordion-description {
411
+ display: block;
412
+ // padding-block-end: var(--_sf-dc-pd-bt);
413
+ background-color: var(
414
+ --_ctm-mob-dn-ed-an-im-bd-cr-dc,
415
+ var(--_ctm-tab-dn-ed-an-im-bd-cr-dc, var(--_ctm-dn-ed-an-im-bd-cr-dc))
416
+ );
417
+
418
+ color: var(
419
+ --_ctm-mob-dn-ed-an-im-cr-dc,
420
+ var(--_ctm-tab-dn-ed-an-im-cr-dc, var(--_ctm-dn-ed-an-im-cr-dc))
421
+ );
422
+ font-family: var(
423
+ --_ctm-mob-dn-ed-an-im-ft-fy-dc,
424
+ var(--_ctm-tab-dn-ed-an-im-ft-fy-dc, var(--_ctm-dn-ed-an-im-ft-fy-dc))
425
+ ),
426
+ sans-serif;
427
+ font-size: var(
428
+ --_ctm-mob-dn-ed-an-im-ft-se-dc,
429
+ var(--_ctm-tab-dn-ed-an-im-ft-se-dc, var(--_ctm-dn-ed-an-im-ft-se-dc))
430
+ );
431
+ font-weight: var(
432
+ --_ctm-mob-dn-ed-an-im-ft-wt-dc,
433
+ var(--_ctm-tab-dn-ed-an-im-ft-wt-dc, var(--_ctm-dn-ed-an-im-ft-wt-dc))
434
+ );
435
+ font-style: var(
436
+ --_ctm-mob-dn-ed-an-im-ft-se-ic-dc,
437
+ var(--_ctm-tab-dn-ed-an-im-ft-se-ic-dc, var(--_ctm-dn-ed-an-im-ft-se-ic-dc))
438
+ );
439
+ text-align: var(
440
+ --_ctm-mob-dn-ed-an-im-tt-an-dc,
441
+ var(--_ctm-tab-dn-ed-an-im-tt-an-dc, var(--_ctm-dn-ed-an-im-tt-an-dc))
442
+ );
443
+ letter-spacing: var(
444
+ --_ctm-mob-dn-ed-an-im-lr-sg-dc,
445
+ var(--_ctm-tab-dn-ed-an-im-lr-sg-dc, var(--_ctm-dn-ed-an-im-lr-sg-dc))
446
+ );
447
+ line-height: var(
448
+ --_ctm-mob-dn-ed-an-im-le-ht-dc,
449
+ var(--_ctm-tab-dn-ed-an-im-le-ht-dc, var(--_ctm-dn-ed-an-im-le-ht-dc))
450
+ );
451
+ text-decoration: var(
452
+ --_ctm-mob-dn-ed-an-im-ue-dc,
453
+ var(--_ctm-tab-dn-ed-an-im-ue-dc, var(--_ctm-dn-ed-an-im-ue-dc))
454
+ );
455
+ }
456
+ }
457
+ }
458
+ }
459
+ }
@@ -0,0 +1,84 @@
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+
4
+ [data-div-type="element"] {
5
+ &[data-element-type="myTemplates"] {
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: 50%;
12
+ // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
13
+ width: var(
14
+ --_sf-el-wh-st-mx,
15
+ calc(
16
+ 1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
17
+ )
18
+ );
19
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
20
+
21
+ // height: clamp(var(--_ctm-lt-ht, 50px), 100px, auto) !important;
22
+ // height: var(--_ctm-lt-ht);
23
+ // height: ;
24
+ // height: auto;
25
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
26
+ // --_aspect-ratio: calc(
27
+ // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
28
+ // );
29
+
30
+ // &[data-element-sub-child="true"] {
31
+ // // width: max(var(--_sf-nw-wh, var(--_tst-lt-wh)));
32
+ // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
33
+ // }
34
+
35
+ & > .wrapper {
36
+ // width: 100%;
37
+ // height: 100%;
38
+ }
39
+ &[data-show-shadow="false"] {
40
+ --_show-shadow: none;
41
+ }
42
+
43
+ .accordion-element {
44
+ background-color: var(
45
+ --_ctm-mob-dn-fq-wt-bd-cr,
46
+ var(--_ctm-tab-dn-fq-wt-bd-cr, var(--_ctm-dn-fq-wt-bd-cr))
47
+ );
48
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
49
+ display: flex;
50
+ flex-direction: column;
51
+ --_sf-gp: var(
52
+ --_ctm-mob-lt-im-sg,
53
+ var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
54
+ );
55
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
56
+ row-gap: var(--_sf-gp);
57
+ width: 100%;
58
+ // height: 100%;
59
+ border-color: var(
60
+ --_ctm-mob-dn-fq-wt-br-cr,
61
+ var(--_ctm-tab-dn-fq-wt-br-cr, var(--_ctm-dn-fq-wt-br-cr))
62
+ );
63
+ border-style: var(
64
+ --_ctm-mob-dn-fq-wt-br-se,
65
+ var(--_ctm-tab-dn-fq-wt-br-se, var(--_ctm-dn-fq-wt-br-se))
66
+ );
67
+ border-width: var(
68
+ --_ctm-mob-dn-fq-wt-br-wh,
69
+ var(--_ctm-tab-dn-fq-wt-br-wh, var(--_ctm-dn-fq-wt-br-wh))
70
+ );
71
+ border-radius: var(
72
+ --_ctm-mob-dn-fq-wt-br-rs,
73
+ var(--_ctm-tab-dn-fq-wt-br-rs, var(--_ctm-dn-fq-wt-br-rs))
74
+ );
75
+ box-shadow: var(
76
+ --_show-shadow,
77
+ var(--_ctm-mob-dn-fq-wt-sw-ae, var(--_ctm-tab-dn-fq-wt-sw-ae, var(--_ctm-dn-fq-wt-sw-ae)))
78
+ var(--_ctm-mob-dn-fq-wt-sw-br, var(--_ctm-tab-dn-fq-wt-sw-br, var(--_ctm-dn-fq-wt-sw-br)))
79
+ var(--_ctm-mob-dn-fq-wt-sw-sd, var(--_ctm-tab-dn-fq-wt-sw-sd, var(--_ctm-dn-fq-wt-sw-sd)))
80
+ var(--_ctm-mob-dn-fq-wt-sw-cr, var(--_ctm-tab-dn-fq-wt-sw-cr, var(--_ctm-dn-fq-wt-sw-cr)))
81
+ );
82
+ }
83
+ }
84
+ }
@@ -120,7 +120,7 @@
120
120
  grid-template-columns: repeat(2, 1fr);
121
121
  gap: 24px 38px;
122
122
  padding-right: 12px;
123
- margin-top: 24px;
123
+ padding-top: 24px;
124
124
  .cart_item-card {
125
125
  display: flex;
126
126
  gap: 12px;