@sc-360-v2/storefront-cms-library 0.2.90 → 0.2.92

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.
@@ -1,583 +0,0 @@
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(
13
- --_sf-el-wh-st-mx,
14
- calc(
15
- 1% *
16
- var(
17
- --_ctm-mob-ele-nw-wh-vl,
18
- var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
19
- )
20
- )
21
- );
22
- margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
23
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
24
- // height: ;
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
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
30
-
31
- & > .wrapper {
32
- width: 100%;
33
- // height: 100%;
34
- }
35
- &[data-show-shadow="false"] {
36
- --_show-shadow: none;
37
- }
38
- &[data-show-border="false"] {
39
- --_show-border: none;
40
- }
41
- .text-element {
42
- background: #6d96e4;
43
- padding: 10px;
44
- font-weight: 600;
45
- color: rgba(75, 69, 70, 1);
46
- cursor: pointer;
47
- }
48
- .text-element {
49
- background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
50
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
51
- display: flex;
52
- flex-direction: column;
53
- --_sf-gp: 16px;
54
- --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
55
- row-gap: var(--_sf-gp);
56
- width: 100%;
57
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
58
- border-color: var(
59
- --_show-border,
60
- var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
61
- );
62
- border-style: var(
63
- --_show-border,
64
- var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
65
- );
66
- border-width: var(
67
- --_show-border,
68
- var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
69
- );
70
- border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
71
- box-shadow: var(
72
- --_show-shadow,
73
- var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
74
- var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
75
- var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
76
- var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
77
- );
78
- color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
79
- font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy))),
80
- sans-serif;
81
- font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
82
- font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
83
- font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
84
- text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
85
- letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
86
- line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
87
- text-decoration: var(
88
- --_sf-hr-tt-dn,
89
- var(
90
- --_ctm-mob-dn-dt-se-ue,
91
- var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
92
- )
93
- );
94
- scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
95
- &[data-flip-x="true"] {
96
- transform: scaleX(-1);
97
- }
98
- &[data-flip-y="true"] {
99
- transform: scaleY(-1);
100
- }
101
- }
102
- }
103
- &[data-element-type="bundleDescription"] {
104
- // width: var(--_lt-wh);
105
- // height: var(--_lt-ht);
106
- // margin: var(--_lt-mn);
107
- // padding: var(--_lt-pg);
108
- // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
109
- // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
110
- width: var(
111
- --_sf-el-wh-st-mx,
112
- calc(
113
- 1% *
114
- var(
115
- --_ctm-mob-ele-nw-wh-vl,
116
- var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
117
- )
118
- )
119
- );
120
- margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
121
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
122
- // height: ;
123
- // aspect-ratio: 1 / var(--_sf-aspect-ratio);
124
- // --_aspect-ratio: calc(
125
- // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
126
- // );
127
-
128
- & > .wrapper {
129
- width: 100%;
130
- // height: 100%;
131
- }
132
- &[data-show-shadow="false"] {
133
- --_show-shadow: none;
134
- }
135
- &[data-show-border="false"] {
136
- --_show-border: none;
137
- }
138
- .text-element {
139
- background: #6d96e4;
140
- padding: 10px;
141
- font-weight: 600;
142
- color: rgba(75, 69, 70, 1);
143
- }
144
- .text-element {
145
- background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
146
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
147
- display: flex;
148
- flex-direction: column;
149
- --_sf-gp: 16px;
150
- --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
151
- row-gap: var(--_sf-gp);
152
- width: 100%;
153
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
154
- border-color: var(
155
- --_show-border,
156
- var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
157
- );
158
- border-style: var(
159
- --_show-border,
160
- var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
161
- );
162
- border-width: var(
163
- --_show-border,
164
- var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
165
- );
166
- border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
167
- box-shadow: var(
168
- --_show-shadow,
169
- var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
170
- var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
171
- var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
172
- var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
173
- );
174
- color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
175
- font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy))),
176
- sans-serif;
177
- font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
178
- font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
179
- font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
180
- text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
181
- letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
182
- line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
183
- text-decoration: var(
184
- --_sf-hr-tt-dn,
185
- var(
186
- --_ctm-mob-dn-dt-se-ue,
187
- var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
188
- )
189
- );
190
- scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
191
- &[data-flip-x="true"] {
192
- transform: scaleX(-1);
193
- }
194
- &[data-flip-y="true"] {
195
- transform: scaleY(-1);
196
- }
197
- }
198
- }
199
- &[data-element-type="bundleBrand"] {
200
- // width: var(--_lt-wh);
201
- // height: var(--_lt-ht);
202
- // margin: var(--_lt-mn);
203
- // padding: var(--_lt-pg);
204
- // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
205
- // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
206
- width: var(
207
- --_sf-el-wh-st-mx,
208
- calc(
209
- 1% *
210
- var(
211
- --_ctm-mob-ele-nw-wh-vl,
212
- var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
213
- )
214
- )
215
- );
216
- margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
217
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
218
- // height: ;
219
- // aspect-ratio: 1 / var(--_sf-aspect-ratio);
220
- // --_aspect-ratio: calc(
221
- // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
222
- // );
223
-
224
- & > .wrapper {
225
- width: 100%;
226
- // height: 100%;
227
- }
228
- &[data-show-shadow="false"] {
229
- --_show-shadow: none;
230
- }
231
- &[data-show-border="false"] {
232
- --_show-border: none;
233
- }
234
- .text-element {
235
- background: #6d96e4;
236
- padding: 10px;
237
- font-weight: 600;
238
- color: rgba(75, 69, 70, 1);
239
- }
240
- .text-element {
241
- background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
242
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
243
- display: flex;
244
- flex-direction: column;
245
- --_sf-gp: 16px;
246
- --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
247
- row-gap: var(--_sf-gp);
248
- width: 100%;
249
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
250
- border-color: var(
251
- --_show-border,
252
- var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
253
- );
254
- border-style: var(
255
- --_show-border,
256
- var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
257
- );
258
- border-width: var(
259
- --_show-border,
260
- var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
261
- );
262
- border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
263
- box-shadow: var(
264
- --_show-shadow,
265
- var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
266
- var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
267
- var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
268
- var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
269
- );
270
- color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
271
- font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy))),
272
- sans-serif;
273
- font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
274
- font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
275
- font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
276
- text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
277
- letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
278
- line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
279
- text-decoration: var(
280
- --_sf-hr-tt-dn,
281
- var(
282
- --_ctm-mob-dn-dt-se-ue,
283
- var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
284
- )
285
- );
286
- scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
287
- &[data-flip-x="true"] {
288
- transform: scaleX(-1);
289
- }
290
- &[data-flip-y="true"] {
291
- transform: scaleY(-1);
292
- }
293
- }
294
- }
295
- &[data-element-type="bundleCode"] {
296
- // width: var(--_lt-wh);
297
- // height: var(--_lt-ht);
298
- // margin: var(--_lt-mn);
299
- // padding: var(--_lt-pg);
300
- // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
301
- // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
302
- width: var(
303
- --_sf-el-wh-st-mx,
304
- calc(
305
- 1% *
306
- var(
307
- --_ctm-mob-ele-nw-wh-vl,
308
- var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
309
- )
310
- )
311
- );
312
- margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
313
- height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
314
- // height: ;
315
- // aspect-ratio: 1 / var(--_sf-aspect-ratio);
316
- // --_aspect-ratio: calc(
317
- // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
318
- // );
319
-
320
- & > .wrapper {
321
- width: 100%;
322
- // height: 100%;
323
- }
324
- &[data-show-shadow="false"] {
325
- --_show-shadow: none;
326
- }
327
- &[data-show-border="false"] {
328
- --_show-border: none;
329
- }
330
- .text-element {
331
- background: #6d96e4;
332
- padding: 10px;
333
- font-weight: 600;
334
- color: rgba(75, 69, 70, 1);
335
- }
336
- .text-element {
337
- background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
338
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
339
- display: flex;
340
- flex-direction: column;
341
- --_sf-gp: 16px;
342
- --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
343
- row-gap: var(--_sf-gp);
344
- width: 100%;
345
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
346
- border-color: var(
347
- --_show-border,
348
- var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
349
- );
350
- border-style: var(
351
- --_show-border,
352
- var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
353
- );
354
- border-width: var(
355
- --_show-border,
356
- var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
357
- );
358
- border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
359
- box-shadow: var(
360
- --_show-shadow,
361
- var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
362
- var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
363
- var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
364
- var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
365
- );
366
- color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
367
- font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy))),
368
- sans-serif;
369
- font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
370
- font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
371
- font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
372
- text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
373
- letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
374
- line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
375
- text-decoration: var(
376
- --_sf-hr-tt-dn,
377
- var(
378
- --_ctm-mob-dn-dt-se-ue,
379
- var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
380
- )
381
- );
382
- scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
383
- &[data-flip-x="true"] {
384
- transform: scaleX(-1);
385
- }
386
- &[data-flip-y="true"] {
387
- transform: scaleY(-1);
388
- }
389
- }
390
- }
391
- &[data-element-type="bundleReview"] {
392
- // width: var(--_lt-wh);
393
- // height: var(--_lt-ht);
394
- // margin: var(--_lt-mn);
395
- // padding: var(--_lt-pg);
396
- // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
397
- // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
398
- width: var(
399
- --_sf-el-wh-st-mx,
400
- calc(
401
- 1% *
402
- var(
403
- --_ctm-mob-ele-nw-wh-vl,
404
- var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
405
- )
406
- )
407
- );
408
- margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
409
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
410
- // height: ;
411
- // aspect-ratio: 1 / var(--_sf-aspect-ratio);
412
- // --_aspect-ratio: calc(
413
- // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
414
- // );
415
-
416
- & > .wrapper {
417
- width: 100%;
418
- // height: 100%;
419
- }
420
- &[data-show-shadow="false"] {
421
- --_show-shadow: none;
422
- }
423
- &[data-show-border="false"] {
424
- --_show-border: none;
425
- }
426
- .text-element {
427
- background: #6d96e4;
428
- padding: 10px;
429
- font-weight: 600;
430
- color: rgba(75, 69, 70, 1);
431
- }
432
- .text-element {
433
- background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
434
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
435
- display: flex;
436
- flex-direction: column;
437
- --_sf-gp: 16px;
438
- --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
439
- row-gap: var(--_sf-gp);
440
- width: 100%;
441
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
442
- border-color: var(
443
- --_show-border,
444
- var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
445
- );
446
- border-style: var(
447
- --_show-border,
448
- var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
449
- );
450
- border-width: var(
451
- --_show-border,
452
- var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
453
- );
454
- border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
455
- box-shadow: var(
456
- --_show-shadow,
457
- var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
458
- var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
459
- var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
460
- var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
461
- );
462
- color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
463
- font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy))),
464
- sans-serif;
465
- font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
466
- font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
467
- font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
468
- text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
469
- letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
470
- line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
471
- text-decoration: var(
472
- --_sf-hr-tt-dn,
473
- var(
474
- --_ctm-mob-dn-dt-se-ue,
475
- var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
476
- )
477
- );
478
- scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
479
- &[data-flip-x="true"] {
480
- transform: scaleX(-1);
481
- }
482
- &[data-flip-y="true"] {
483
- transform: scaleY(-1);
484
- }
485
- }
486
- }
487
- &[data-element-type="bundleRating"] {
488
- // width: var(--_lt-wh);
489
- // height: var(--_lt-ht);
490
- // margin: var(--_lt-mn);
491
- // padding: var(--_lt-pg);
492
- // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
493
- // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
494
- width: var(
495
- --_sf-el-wh-st-mx,
496
- calc(
497
- 1% *
498
- var(
499
- --_ctm-mob-ele-nw-wh-vl,
500
- var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
501
- )
502
- )
503
- );
504
- margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
505
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
506
- // height: ;
507
- // aspect-ratio: 1 / var(--_sf-aspect-ratio);
508
- // --_aspect-ratio: calc(
509
- // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
510
- // );
511
-
512
- & > .wrapper {
513
- width: 100%;
514
- // height: 100%;
515
- }
516
- &[data-show-shadow="false"] {
517
- --_show-shadow: none;
518
- }
519
- &[data-show-border="false"] {
520
- --_show-border: none;
521
- }
522
- .text-element {
523
- background: #6d96e4;
524
- padding: 10px;
525
- font-weight: 600;
526
- color: rgba(75, 69, 70, 1);
527
- }
528
- .text-element {
529
- background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
530
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
531
- display: flex;
532
- flex-direction: column;
533
- --_sf-gp: 16px;
534
- --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
535
- row-gap: var(--_sf-gp);
536
- width: 100%;
537
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
538
- border-color: var(
539
- --_show-border,
540
- var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
541
- );
542
- border-style: var(
543
- --_show-border,
544
- var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
545
- );
546
- border-width: var(
547
- --_show-border,
548
- var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
549
- );
550
- border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
551
- box-shadow: var(
552
- --_show-shadow,
553
- var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
554
- var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
555
- var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
556
- var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
557
- );
558
- color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
559
- font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy))),
560
- sans-serif;
561
- font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
562
- font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
563
- font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
564
- text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
565
- letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
566
- line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
567
- text-decoration: var(
568
- --_sf-hr-tt-dn,
569
- var(
570
- --_ctm-mob-dn-dt-se-ue,
571
- var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
572
- )
573
- );
574
- scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
575
- &[data-flip-x="true"] {
576
- transform: scaleX(-1);
577
- }
578
- &[data-flip-y="true"] {
579
- transform: scaleY(-1);
580
- }
581
- }
582
- }
583
- }