@sc-360-v2/storefront-cms-library 0.2.99 → 0.3.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.
@@ -1,10 +1,3 @@
1
- @use "sass:map";
2
- @use "sass:list";
3
- @use "./functions.scss" as *;
4
- @function ctm-var($base) {
5
- @return unquote("var(--_ctm-mob-#{$base}, var(--_ctm-tab-#{$base}, var(--_ctm-#{$base})))");
6
- }
7
-
8
1
  [data-div-type="element"] {
9
2
  &[data-element-type="quickLinks"] {
10
3
  // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
@@ -14,11 +7,11 @@
14
7
  1% *
15
8
  var(
16
9
  --_ctm-mob-ele-nw-wh-vl,
17
- var(--_ctm-tab-ele-nw-wh-vl, var(var(--_ctm-ele-nw-wh-vl), var(--_sf-nw-wh)))
10
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
18
11
  )
19
12
  )
20
13
  );
21
- margin: var(--_ctm-mob-lt-mn, var(var(--_ctm-tab-lt-mn), var(--_ctm-lt-mn)));
14
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
22
15
  // aspect-ratio: 1 / var(--_sf-aspect-ratio);
23
16
  --_aspect-ratio: calc(
24
17
  1 *
@@ -102,25 +95,18 @@
102
95
 
103
96
  &[data-widget-border="true"] {
104
97
  .quick__links__container {
105
- background-color: ctm-var(dn-qk-ls-wt-dn-bd-cr);
106
- border-width: ctm-var(dn-qk-ls-wt-dn-br-wh);
107
- border-color: ctm-var(dn-qk-ls-wt-dn-br-cr);
108
- border-style: ctm-var(dn-qk-ls-wt-dn-br-se);
109
- border-radius: ctm-var(dn-qk-ls-wt-dn-br-rs);
110
- box-shadow: ctm-var(dn-qk-ls-wt-dn-sw-ae) ctm-var(dn-qk-ls-wt-dn-sw-br)
111
- ctm-var(dn-qk-ls-wt-dn-sw-sd) ctm-var(dn-qk-ls-wt-dn-sw-cr);
112
- // border-color: var(
113
- // --_ctm-mob-dn-qk-ls-wt-dn-br-cr,
114
- // var(--_ctm-tab-dn-qk-ls-wt-dn-br-cr, var(--_ctm-dn-qk-ls-wt-dn-br-cr))
115
- // );
116
- // border-style: var(
117
- // --_ctm-mob-dn-qk-ls-wt-dn-br-se,
118
- // var(--_ctm-tab-dn-qk-ls-wt-dn-br-se, var(--_ctm-dn-qk-ls-wt-dn-br-se))
119
- // );
120
- // border-width: var(
121
- // --_ctm-mob-dn-qk-ls-wt-dn-br-wh,
122
- // var(--_ctm-tab-dn-qk-ls-wt-dn-br-wh, var(--_ctm-dn-qk-ls-wt-dn-br-wh))
123
- // );
98
+ border-color: var(
99
+ --_ctm-mob-dn-qk-ls-wt-dn-br-cr,
100
+ var(--_ctm-tab-dn-qk-ls-wt-dn-br-cr, var(--_ctm-dn-qk-ls-wt-dn-br-cr))
101
+ );
102
+ border-style: var(
103
+ --_ctm-mob-dn-qk-ls-wt-dn-br-se,
104
+ var(--_ctm-tab-dn-qk-ls-wt-dn-br-se, var(--_ctm-dn-qk-ls-wt-dn-br-se))
105
+ );
106
+ border-width: var(
107
+ --_ctm-mob-dn-qk-ls-wt-dn-br-wh,
108
+ var(--_ctm-tab-dn-qk-ls-wt-dn-br-wh, var(--_ctm-dn-qk-ls-wt-dn-br-wh))
109
+ );
124
110
  }
125
111
  }
126
112
 
@@ -167,43 +153,38 @@
167
153
  var(--_ctm-tab-dn-qk-ls-wt-lt-wt-tt-ad-im-sg, var(--_ctm-dn-qk-ls-wt-lt-wt-tt-ad-im-sg))
168
154
  );
169
155
  padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
170
- // background-color: var(
171
- // --_ctm-mob-dn-qk-ls-wt-dn-bd-cr,
172
- // var(--_ctm-tab-dn-qk-ls-wt-dn-bd-cr, var(--_ctm-dn-qk-ls-wt-dn-bd-cr))
173
- // );
156
+ background-color: var(
157
+ --_ctm-mob-dn-qk-ls-wt-dn-bd-cr,
158
+ var(--_ctm-tab-dn-qk-ls-wt-dn-bd-cr, var(--_ctm-dn-qk-ls-wt-dn-bd-cr))
159
+ );
174
160
  display: flex;
175
161
  // flex-direction: var(--_sf-fd-bn);
176
162
  justify-content: var(--_sf-jc, center);
177
- // box-shadow: var(
178
- // --_show-shadow,
179
- // var(
180
- // --_ctm-mob-dn-qk-ls-wt-dn-sw-ae,
181
- // var(--_ctm-tab-dn-qk-ls-wt-dn-sw-ae, var(--_ctm-dn-qk-ls-wt-dn-sw-ae))
182
- // )
183
- // var(
184
- // --_ctm-mob-dn-qk-ls-wt-dn-sw-br,
185
- // var(--_ctm-tab-dn-qk-ls-wt-dn-sw-br, var(--_ctm-dn-qk-ls-wt-dn-sw-br))
186
- // )
187
- // var(
188
- // --_ctm-mob-dn-qk-ls-wt-dn-sw-sd,
189
- // var(--_ctm-tab-dn-qk-ls-wt-dn-sw-sd, var(--_ctm-dn-qk-ls-wt-dn-sw-sd))
190
- // )
191
- // var(
192
- // --_ctm-mob-dn-qk-ls-wt-dn-sw-cr,
193
- // var(--_ctm-tab-dn-qk-ls-wt-dn-sw-cr, var(--_ctm-dn-qk-ls-wt-dn-sw-cr))
194
- // )
195
- // );
163
+ box-shadow: var(
164
+ --_show-shadow,
165
+ var(
166
+ --_ctm-mob-dn-qk-ls-wt-dn-sw-ae,
167
+ var(--_ctm-tab-dn-qk-ls-wt-dn-sw-ae, var(--_ctm-dn-qk-ls-wt-dn-sw-ae))
168
+ )
169
+ var(
170
+ --_ctm-mob-dn-qk-ls-wt-dn-sw-br,
171
+ var(--_ctm-tab-dn-qk-ls-wt-dn-sw-br, var(--_ctm-dn-qk-ls-wt-dn-sw-br))
172
+ )
173
+ var(
174
+ --_ctm-mob-dn-qk-ls-wt-dn-sw-sd,
175
+ var(--_ctm-tab-dn-qk-ls-wt-dn-sw-sd, var(--_ctm-dn-qk-ls-wt-dn-sw-sd))
176
+ )
177
+ var(
178
+ --_ctm-mob-dn-qk-ls-wt-dn-sw-cr,
179
+ var(--_ctm-tab-dn-qk-ls-wt-dn-sw-cr, var(--_ctm-dn-qk-ls-wt-dn-sw-cr))
180
+ )
181
+ );
196
182
  width: 100%;
197
183
  height: auto;
198
- // border-radius: var(
199
- // --_ctm-mob-dn-qk-ls-wt-dn-br-rs,
200
- // var(--_ctm-tab-dn-qk-ls-wt-dn-br-rs, var(--_ctm-dn-qk-ls-wt-dn-br-rs))
201
- // );
202
- background-color: ctm-var(dn-qk-ls-wt-dn-bd-cr);
203
-
204
- border-radius: ctm-var(dn-qk-ls-wt-dn-br-rs);
205
- box-shadow: ctm-var(dn-qk-ls-wt-dn-sw-ae) ctm-var(dn-qk-ls-wt-dn-sw-br)
206
- ctm-var(dn-qk-ls-wt-dn-sw-sd) ctm-var(dn-qk-ls-wt-dn-sw-cr);
184
+ border-radius: var(
185
+ --_ctm-mob-dn-qk-ls-wt-dn-br-rs,
186
+ var(--_ctm-tab-dn-qk-ls-wt-dn-br-rs, var(--_ctm-dn-qk-ls-wt-dn-br-rs))
187
+ );
207
188
 
208
189
  .header__container {
209
190
  display: flex;
@@ -250,142 +231,118 @@
250
231
  )
251
232
  );
252
233
  h3 {
253
- font-family: ctm-var(dn-qk-ls-wt-dn-ft-fy);
254
- font-size: ctm-var(dn-qk-ls-wt-dn-ft-se);
255
- color: ctm-var(dn-qk-ls-wt-dn-cr);
256
- font-weight: ctm-var(dn-qk-ls-wt-dn-ft-wt);
257
- font-style: ctm-var(dn-qk-ls-wt-dn-ft-se-ic);
258
- text-decoration: ctm-var(dn-qk-ls-wt-dn-ue);
259
- text-align: ctm-var(dn-qk-ls-wt-dn-tt-an);
260
- letter-spacing: ctm-var(dn-qk-ls-wt-dn-lr-sg);
261
- line-height: ctm-var(dn-qk-ls-wt-dn-le-ht);
262
- // color: var(
263
- // --_ctm-mob-dn-qk-ls-wt-dn-cr,
264
- // var(--_ctm-tab-dn-qk-ls-wt-dn-cr, var(--_ctm-dn-qk-ls-wt-dn-cr))
265
- // );
266
- // font-family: var(
267
- // --_sf-hr-ff,
268
- // var(
269
- // --_ctm-mob-dn-qk-ls-wt-dn-ft-fy,
270
- // var(--_ctm-tab-dn-qk-ls-wt-dn-ft-fy, var(--_ctm-dn-qk-ls-wt-dn-ft-fy))
271
- // )
272
- // );
273
- // font-size: var(
274
- // --_ctm-mob-dn-qk-ls-wt-dn-ft-se,
275
- // var(--_ctm-tab-dn-qk-ls-wt-dn-ft-se, var(--_ctm-dn-qk-ls-wt-dn-ft-se))
276
- // );
277
- // font-weight: var(
278
- // --_ctm-mob-dn-qk-ls-wt-dn-ft-wt,
279
- // var(--_ctm-tab-dn-qk-ls-wt-dn-ft-wt, var(--_ctm-dn-qk-ls-wt-dn-ft-wt))
280
- // );
281
- // font-style: var(
282
- // --_ctm-mob-dn-qk-ls-wt-dn-ft-se-ic,
283
- // var(--_ctm-tab-dn-qk-ls-wt-dn-ft-se-ic, var(--_ctm-dn-qk-ls-wt-dn-ft-se-ic))
284
- // );
285
- // text-align: var(
286
- // --_ctm-mob-dn-qk-ls-wt-dn-tt-an,
287
- // var(--_ctm-tab-dn-qk-ls-wt-dn-tt-an, var(--_ctm-dn-qk-ls-wt-dn-tt-an))
288
- // );
289
- // letter-spacing: var(
290
- // --_ctm-mob-dn-qk-ls-wt-dn-lr-sg,
291
- // var(--_ctm-tab-dn-qk-ls-wt-dn-lr-sg, var(--_ctm-dn-qk-ls-wt-dn-lr-sg))
292
- // );
293
- // line-height: var(
294
- // --_ctm-mob-dn-qk-ls-wt-dn-le-ht,
295
- // var(--_ctm-tab-dn-qk-ls-wt-dn-le-ht, var(--_ctm-dn-qk-ls-wt-dn-le-ht))
296
- // );
297
- // text-decoration: var(
298
- // --_ctm-mob-dn-qk-ls-wt-dn-ue,
299
- // var(--_ctm-tab-dn-qk-ls-wt-dn-ue, var(--_ctm-dn-qk-ls-wt-dn-ue))
300
- // );
234
+ color: var(
235
+ --_ctm-mob-dn-qk-ls-wt-dn-cr,
236
+ var(--_ctm-tab-dn-qk-ls-wt-dn-cr, var(--_ctm-dn-qk-ls-wt-dn-cr))
237
+ );
238
+ font-family: var(
239
+ --_sf-hr-ff,
240
+ var(
241
+ --_ctm-mob-dn-qk-ls-wt-dn-ft-fy,
242
+ var(--_ctm-tab-dn-qk-ls-wt-dn-ft-fy, var(--_ctm-dn-qk-ls-wt-dn-ft-fy))
243
+ )
244
+ );
245
+ font-size: var(
246
+ --_ctm-mob-dn-qk-ls-wt-dn-ft-se,
247
+ var(--_ctm-tab-dn-qk-ls-wt-dn-ft-se, var(--_ctm-dn-qk-ls-wt-dn-ft-se))
248
+ );
249
+ font-weight: var(
250
+ --_ctm-mob-dn-qk-ls-wt-dn-ft-wt,
251
+ var(--_ctm-tab-dn-qk-ls-wt-dn-ft-wt, var(--_ctm-dn-qk-ls-wt-dn-ft-wt))
252
+ );
253
+ font-style: var(
254
+ --_ctm-mob-dn-qk-ls-wt-dn-ft-se-ic,
255
+ var(--_ctm-tab-dn-qk-ls-wt-dn-ft-se-ic, var(--_ctm-dn-qk-ls-wt-dn-ft-se-ic))
256
+ );
257
+ text-align: var(
258
+ --_ctm-mob-dn-qk-ls-wt-dn-tt-an,
259
+ var(--_ctm-tab-dn-qk-ls-wt-dn-tt-an, var(--_ctm-dn-qk-ls-wt-dn-tt-an))
260
+ );
261
+ letter-spacing: var(
262
+ --_ctm-mob-dn-qk-ls-wt-dn-lr-sg,
263
+ var(--_ctm-tab-dn-qk-ls-wt-dn-lr-sg, var(--_ctm-dn-qk-ls-wt-dn-lr-sg))
264
+ );
265
+ line-height: var(
266
+ --_ctm-mob-dn-qk-ls-wt-dn-le-ht,
267
+ var(--_ctm-tab-dn-qk-ls-wt-dn-le-ht, var(--_ctm-dn-qk-ls-wt-dn-le-ht))
268
+ );
269
+ text-decoration: var(
270
+ --_ctm-mob-dn-qk-ls-wt-dn-ue,
271
+ var(--_ctm-tab-dn-qk-ls-wt-dn-ue, var(--_ctm-dn-qk-ls-wt-dn-ue))
272
+ );
301
273
  }
302
274
 
303
275
  p {
304
- font-family: ctm-var(-dn-qk-ls-wt-dn-ft-fy-dc);
305
- font-size: ctm-var(dn-qk-ls-wt-dn-ft-se-dc);
306
- color: ctm-var(dn-qk-ls-wt-dn-cr-dc);
307
- font-weight: ctm-var(dn-qk-ls-wt-dn-ft-wt-dc);
308
- font-style: ctm-var(dn-qk-ls-wt-dn-ft-se-ic-dc);
309
- text-decoration: ctm-var(dn-qk-ls-wt-dn-ue-dc);
310
- text-align: ctm-var(dn-qk-ls-wt-dn-tt-an-dc);
311
- letter-spacing: ctm-var(dn-qk-ls-wt-dn-lr-sg-dc);
312
- line-height: ctm-var(dn-qk-ls-wt-dn-le-ht-dc);
313
- // color: var(
314
- // --_ctm-mob-dn-qk-ls-wt-dn-cr-dc,
315
- // var(--_ctm-tab-dn-qk-ls-wt-dn-cr-dc, var(--_ctm-dn-qk-ls-wt-dn-cr-dc))
316
- // );
317
- // font-family: var(
318
- // --_sf-hr-ff,
319
- // var(
320
- // --_ctm-mob-dn-qk-ls-wt-dn-ft-fy-dc,
321
- // var(--_ctm-tab-dn-qk-ls-wt-dn-ft-fy-dc, var(--_ctm-dn-qk-ls-wt-dn-ft-fy-dc))
322
- // )
323
- // );
324
- // font-size: var(
325
- // --_ctm-mob-dn-qk-ls-wt-dn-ft-se-dc,
326
- // var(--_ctm-tab-dn-qk-ls-wt-dn-ft-se-dc, var(--_ctm-dn-qk-ls-wt-dn-ft-se-dc))
327
- // );
328
- // font-weight: var(
329
- // --_ctm-mob-dn-qk-ls-wt-dn-ft-wt-dc,
330
- // var(--_ctm-tab-dn-qk-ls-wt-dn-ft-wt-dc, var(--_ctm-dn-qk-ls-wt-dn-ft-wt-dc))
331
- // );
332
- // font-style: var(
333
- // --_ctm-mob-dn-qk-ls-wt-dn-ft-se-ic-dc,
334
- // var(--_ctm-tab-dn-qk-ls-wt-dn-ft-se-ic-dc, var(--_ctm-dn-qk-ls-wt-dn-ft-se-ic-dc))
335
- // );
336
- // text-align: var(
337
- // --_ctm-mob-dn-qk-ls-wt-dn-tt-an-dc,
338
- // var(--_ctm-tab-dn-qk-ls-wt-dn-tt-an-dc, var(--_ctm-dn-qk-ls-wt-dn-tt-an-dc))
339
- // );
340
- // letter-spacing: var(
341
- // --_ctm-mob-dn-qk-ls-wt-dn-lr-sg-dc,
342
- // var(--_ctm-tab-dn-qk-ls-wt-dn-lr-sg-dc, var(--_ctm-dn-qk-ls-wt-dn-lr-sg-dc))
343
- // );
344
- // line-height: var(
345
- // --_ctm-mob-dn-qk-ls-wt-dn-le-ht-dc,
346
- // var(--_ctm-tab-dn-qk-ls-wt-dn-le-ht-dc, var(--_ctm-dn-qk-ls-wt-dn-le-ht-dc))
347
- // );
348
- // text-decoration: var(
349
- // --_ctm-mob-dn-qk-ls-wt-dn-ue-dc,
350
- // var(--_ctm-tab-dn-qk-ls-wt-dn-ue-dc, var(--_ctm-dn-qk-ls-wt-dn-ue-dc))
351
- // );
276
+ color: var(
277
+ --_ctm-mob-dn-qk-ls-wt-dn-cr-dc,
278
+ var(--_ctm-tab-dn-qk-ls-wt-dn-cr-dc, var(--_ctm-dn-qk-ls-wt-dn-cr-dc))
279
+ );
280
+ font-family: var(
281
+ --_sf-hr-ff,
282
+ var(
283
+ --_ctm-mob-dn-qk-ls-wt-dn-ft-fy-dc,
284
+ var(--_ctm-tab-dn-qk-ls-wt-dn-ft-fy-dc, var(--_ctm-dn-qk-ls-wt-dn-ft-fy-dc))
285
+ )
286
+ );
287
+ font-size: var(
288
+ --_ctm-mob-dn-qk-ls-wt-dn-ft-se-dc,
289
+ var(--_ctm-tab-dn-qk-ls-wt-dn-ft-se-dc, var(--_ctm-dn-qk-ls-wt-dn-ft-se-dc))
290
+ );
291
+ font-weight: var(
292
+ --_ctm-mob-dn-qk-ls-wt-dn-ft-wt-dc,
293
+ var(--_ctm-tab-dn-qk-ls-wt-dn-ft-wt-dc, var(--_ctm-dn-qk-ls-wt-dn-ft-wt-dc))
294
+ );
295
+ font-style: var(
296
+ --_ctm-mob-dn-qk-ls-wt-dn-ft-se-ic-dc,
297
+ var(--_ctm-tab-dn-qk-ls-wt-dn-ft-se-ic-dc, var(--_ctm-dn-qk-ls-wt-dn-ft-se-ic-dc))
298
+ );
299
+ text-align: var(
300
+ --_ctm-mob-dn-qk-ls-wt-dn-tt-an-dc,
301
+ var(--_ctm-tab-dn-qk-ls-wt-dn-tt-an-dc, var(--_ctm-dn-qk-ls-wt-dn-tt-an-dc))
302
+ );
303
+ letter-spacing: var(
304
+ --_ctm-mob-dn-qk-ls-wt-dn-lr-sg-dc,
305
+ var(--_ctm-tab-dn-qk-ls-wt-dn-lr-sg-dc, var(--_ctm-dn-qk-ls-wt-dn-lr-sg-dc))
306
+ );
307
+ line-height: var(
308
+ --_ctm-mob-dn-qk-ls-wt-dn-le-ht-dc,
309
+ var(--_ctm-tab-dn-qk-ls-wt-dn-le-ht-dc, var(--_ctm-dn-qk-ls-wt-dn-le-ht-dc))
310
+ );
311
+ text-decoration: var(
312
+ --_ctm-mob-dn-qk-ls-wt-dn-ue-dc,
313
+ var(--_ctm-tab-dn-qk-ls-wt-dn-ue-dc, var(--_ctm-dn-qk-ls-wt-dn-ue-dc))
314
+ );
352
315
  }
353
316
  }
354
317
 
355
318
  .items__container {
356
319
  .links__item {
357
- display: block;
358
- font-family: ctm-var(dn-im-se-ft-fy);
359
- font-size: ctm-var(dn-im-se-ft-se);
360
- color: ctm-var(dn-im-se-cr);
361
- font-weight: ctm-var(dn-im-se-ft-wt);
362
- font-style: ctm-var(dn-im-se-ft-se-ic);
363
- text-decoration: ctm-var(dn-im-se-ue);
364
- text-align: ctm-var(dn-im-se-tt-an);
365
- letter-spacing: ctm-var(dn-im-se-lr-sg);
366
- line-height: ctm-var(dn-im-se-le-ht);
367
- background-color: ctm-var(dn-im-se-bd-cr);
368
- border-width: ctm-var(dn-im-se-br-wh);
369
- border-color: ctm-var(dn-im-se-br-cr);
370
- border-style: ctm-var(dn-im-se-br-se);
371
- border-radius: ctm-var(dn-im-se-br-rs);
372
- box-shadow: ctm-var(dn-im-se-sw-ae) ctm-var(dn-im-se-sw-br) ctm-var(dn-im-se-sw-sd)
373
- ctm-var(dn-im-se-sw-cr);
374
- padding: 2px 8px;
375
- width: fit-content;
320
+ background-color: var(
321
+ --_ctm-mob-dn-im-se-bd-cr,
322
+ var(--_ctm-tab-dn-im-se-bd-cr, var(--_ctm-dn-im-se-bd-cr))
323
+ );
324
+ box-shadow: var(
325
+ --_show-shadow,
326
+ var(
327
+ --_ctm-mob-dn-im-se-sw-ae,
328
+ var(--_ctm-tab-dn-im-se-sw-ae, var(--_ctm-dn-im-se-sw-ae))
329
+ )
330
+ var(
331
+ --_ctm-mob-dn-im-se-sw-br,
332
+ var(--_ctm-tab-dn-im-se-sw-br, var(--_ctm-dn-im-se-sw-br))
333
+ )
334
+ var(
335
+ --_ctm-mob-dn-im-se-sw-sd,
336
+ var(--_ctm-tab-dn-im-se-sw-sd, var(--_ctm-dn-im-se-sw-sd))
337
+ )
338
+ var(
339
+ --_ctm-mob-dn-im-se-sw-cr,
340
+ var(--_ctm-tab-dn-im-se-sw-cr, var(--_ctm-dn-im-se-sw-cr))
341
+ )
342
+ );
376
343
  }
377
344
  .dropdown__container {
378
- .est__dropdown__main {
379
- .est__dropdown {
380
- .est__dropdown__button,
381
- .list {
382
- width: var(
383
- --_ctm-mob-lt-dn-wh,
384
- var(--_ctm-tab-dn-wh, var(--_ctm-lt-dn-wh))
385
- ) !important;
386
- }
387
- }
388
- }
345
+ width: var(--_ctm-mob-lt-dn-wh, var(--_ctm-tab-dn-wh, var(--_ctm-lt-dn-wh)));
389
346
  }
390
347
  }
391
348
  }
package/dist/quotes.scss CHANGED
@@ -71,7 +71,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
71
71
  flex-direction: column;
72
72
  align-items: flex-start;
73
73
  align-self: stretch;
74
- width: 349px;
75
74
 
76
75
  .heading_wrapper {
77
76
  display: flex;
@@ -17,7 +17,6 @@
17
17
  width: 100%;
18
18
  height: 100%;
19
19
  padding: var(--_ctm-mob-repe-lt-pg, var(--_ctm-tab-repe-lt-pg, var(--_ctm-repe-lt-pg)));
20
- //margin: var(--_ctm-mob-repe-lt-mn, var(--_ctm-tab-repe-lt-mn, var(--_ctm-repe-lt-mn)));
21
20
 
22
21
  background-color: var(
23
22
  --_ctm-mob-repe-dn-bd-cr,
package/dist/section.scss CHANGED
@@ -50,17 +50,43 @@ section {
50
50
  );
51
51
  box-shadow: var(
52
52
  --_hide-section-shadow,
53
- prepareMediaVariable(--_ctm-sec-dn-sw-ae) prepareMediaVariable(--_ctm-sec-dn-sw-b)
54
- prepareMediaVariable(--_ctm-sec-dn-sw-sd) prepareMediaVariable(--_ctm-sec-dn-sw-cr)
53
+ var(--_ctm-mob-sec-dn-sw-ae, var(--_ctm-tab-sec-dn-sw-ae, var(--_ctm-sec-dn-sw-ae)))
54
+ var(--_ctm-mob-sec-dn-sw-br, var(--_ctm-tab-sec-dn-sw-br, var(--_ctm-sec-dn-sw-br)))
55
+ var(--_ctm-mob-sec-dn-sw-sd, var(--_ctm-tab-sec-dn-sw-sd, var(--_ctm-sec-dn-sw-sd)))
56
+ var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-sec-dn-sw-cr)))
55
57
  );
56
- background-color: prepareMediaVariable(--_ctm-sec-dn-bd-cr);
57
- background-image: prepareMediaVariable(--_ctm-sec-dn-bd-ie);
58
- background-attachment: prepareMediaVariable(--_ctm-sec-dn-bd-at);
59
- background-position: prepareMediaVariable(--_ctm-sec-dn-bd-pn);
60
- background-position-y: prepareMediaVariable(--_ctm-sec-dn-bd-pn-y);
61
- background-repeat: prepareMediaVariable(--_ctm-sec-dn-bd-rt);
62
- background-size: prepareMediaVariable(--_ctm-sec-dn-bd-se);
63
- border-radius: prepareMediaVariable(--_ctm-sec-dn-br-rs) !important;
58
+ background-color: var(
59
+ --_ctm-mob-sec-dn-bd-cr,
60
+ var(--_ctm-tab-sec-dn-bd-cr, var(--_ctm-sec-dn-bd-cr))
61
+ );
62
+ background-image: var(
63
+ --_ctm-mob-sec-dn-bd-ie,
64
+ var(--_ctm-tab-sec-dn-bd-ie, var(--_ctm-sec-dn-bd-ie))
65
+ );
66
+ background-attachment: var(
67
+ --_ctm-mob-sec-dn-bd-at,
68
+ var(--_ctm-tab-sec-dn-bd-at, var(--_ctm-sec-dn-bd-at))
69
+ );
70
+ background-position: var(
71
+ --_ctm-mob-sec-dn-bd-pn,
72
+ var(--_ctm-tab-sec-dn-bd-pn, var(--_ctm-sec-dn-bd-pn))
73
+ );
74
+ background-position-y: var(
75
+ --_ctm-mob-sec-dn-bd-pn-y,
76
+ var(--_ctm-tab-sec-dn-bd-pn-y, var(--_ctm-sec-dn-bd-pn-y))
77
+ );
78
+ background-repeat: var(
79
+ --_ctm-mob-sec-dn-bd-rt,
80
+ var(--_ctm-tab-sec-dn-bd-rt, var(--_ctm-sec-dn-bd-rt))
81
+ );
82
+ background-size: var(
83
+ --_ctm-mob-sec-dn-bd-se,
84
+ var(--_ctm-tab-sec-dn-bd-se, var(--_ctm-sec-dn-bd-se))
85
+ );
86
+ border-radius: var(
87
+ --_ctm-mob-sec-dn-br-rs,
88
+ var(--_ctm-tab-sec-dn-br-rs, var(--_ctm-sec-dn-br-rs))
89
+ ) !important;
64
90
  &[data-show-shadow="false"] {
65
91
  --_hide-section-shadow: none;
66
92
  }
@@ -82,22 +108,40 @@ section {
82
108
  // --_hide-section-border,
83
109
  // var(--_ctm-mob-sec-dn-br-cr, var(--_ctm-tab-sec-dn-br-cr, var(--_ctm-sec-dn-br-cr)))
84
110
  // );
85
- border-color: var(--_hide-section-border, prepareMediaVariable(--_ctm-sec-dn-br-cr));
86
- border-style: var(--_hide-section-border, prepareMediaVariable(--_ctm-sec-dn-br-se));
87
- border-width: var(--_hide-section-border, prepareMediaVariable(--_ctm-sec-dn-br-wh));
88
- border-radius: var(--_hide-section-border, prepareMediaVariable(--_ctm-sec-dn-br-rs));
111
+ border-color: var(
112
+ --_hide-section-border,
113
+ var(--_ctm-mob-sec-dn-br-cr, var(--_ctm-tab-sec-dn-br-cr, var(--_ctm-sec-dn-br-cr)))
114
+ );
115
+ border-style: var(
116
+ --_hide-section-border,
117
+ var(--_ctm-mob-sec-dn-br-se, var(--_ctm-tab-sec-dn-br-se, var(--_ctm-sec-dn-br-se)))
118
+ );
119
+ border-width: var(
120
+ --_hide-section-border,
121
+ var(--_ctm-mob-sec-dn-br-wh, var(--_ctm-tab-sec-dn-br-wh, var(--_ctm-sec-dn-br-wh)))
122
+ );
123
+ border-radius: var(
124
+ --_ctm-mob-sec-dn-br-rs,
125
+ var(--_ctm-tab-sec-dn-br-rs, var(--_ctm-sec-dn-br-rs))
126
+ );
89
127
  }
90
128
  &[data-div-type="cms-section-wrapper"] {
91
129
  // max-width: var(--_sf-wp-mx-wt);
92
- max-width: prepareMediaVariable(--_ctm-sec-lt-wh);
130
+ max-width: var(--_ctm-mob-sec-lt-wh, var(--_ctm-tab-sec-lt-wh, var(--_ctm-sec-lt-wh)));
93
131
  margin-inline: auto;
94
132
  position: var(--_p-relative);
95
133
  width: 100%;
96
134
  // padding-inline: 10px;
97
135
  // padding-block: 10px;
98
- padding: prepareMediaVariable(--_ctm-sec-lt-pg);
99
- column-gap: prepareMediaVariable(--_ctm-sec-lt-cn-gp);
100
- row-gap: prepareMediaVariable(--_ctm-sec-lt-rw-gp);
136
+ padding: var(--_ctm-mob-sec-lt-pg, var(--_ctm-tab-sec-lt-pg, var(--_ctm-sec-lt-pg)));
137
+ column-gap: var(
138
+ --_ctm-mob-sec-lt-cn-gp,
139
+ var(--_ctm-tab-sec-lt-cn-gp, var(--_ctm-sec-lt-cn-gp))
140
+ );
141
+ row-gap: var(
142
+ --_ctm-mob-sec-lt-rw-gp,
143
+ var(--_ctm-tab-sec-lt-rw-gp, var(--_ctm-sec-lt-rw-gp))
144
+ );
101
145
  }
102
146
  }
103
147
  }
@@ -106,11 +150,6 @@ div[data-div-type="element"] {
106
150
  position: var(--_p-relative);
107
151
  & > .wrapper {
108
152
  grid-area: 1/1/2/2 !important;
109
-
110
- a {
111
- color: inherit;
112
- text-decoration: none;
113
- }
114
153
  }
115
154
  &[data-view-state="full"] {
116
155
  width: auto;
@@ -138,23 +177,33 @@ div[data-div-type="element"] {
138
177
  &:is([data-element-type="stack"]) {
139
178
  width: max(
140
179
  0.5px,
141
- calc(#{prepareMediaVariable(--_ctm-sta-ele-nw-wh-vl)} / 100) *
142
- (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
180
+ calc(
181
+ var(
182
+ --_ctm-mob-sta-ele-nw-wh-vl,
183
+ var(--_ctm-tab-sta-ele-nw-wh-vl, var(--_ctm-sta-ele-nw-wh-vl))
184
+ ) / 100
185
+ ) * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
143
186
  );
144
187
  }
145
188
  &:is([data-element-type="container"]) {
146
189
  width: max(
147
190
  0.5px,
148
- calc(#{prepareMediaVariable(--_ctm-con-ele-nw-wh-vl)} / 100) *
149
- (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
191
+ calc(
192
+ var(
193
+ --_ctm-mob-con-ele-nw-wh-vl,
194
+ var(--_ctm-tab-con-ele-nw-wh-vl, var(--_ctm-con-ele-nw-wh-vl))
195
+ ) / 100
196
+ ) * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
150
197
  );
151
198
  }
152
199
 
153
200
  &:not([data-element-type="container"], [data-element-type="stack"]) {
154
201
  width: max(
155
202
  0.5px,
156
- calc(#{prepareMediaVariable(--_ctm-ele-nw-wh-vl)} / 100) *
157
- (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
203
+ calc(
204
+ var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl))) /
205
+ 100
206
+ ) * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
158
207
  );
159
208
  }
160
209
  }