@sc-360-v2/storefront-cms-library 0.2.97 → 0.2.99

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.
@@ -122,48 +122,48 @@
122
122
  }
123
123
  }
124
124
 
125
- .swatch__item:hover {
126
- --_sf-hr-bd-cr: var(
127
- --_ctm-mob-dn-on-ve-se-hr-se-bd-cr,
128
- var(--_ctm-tab-dn-on-ve-se-hr-se-bd-cr, var(--_ctm-dn-on-ve-se-hr-se-bd-cr))
129
- );
130
- --_sf-hr-br-cr: var(
131
- --_ctm-mob-dn-on-ve-se-hr-se-br-cr,
132
- var(--_ctm-tab-dn-on-ve-se-hr-se-br-cr, var(--_ctm-dn-on-ve-se-hr-se-br-cr))
133
- );
134
- --_sf-hr-br-se: var(
135
- --_ctm-mob-dn-on-ve-se-hr-se-br-se,
136
- var(--_ctm-tab-dn-on-ve-se-hr-se-br-se, var(--_ctm-dn-on-ve-se-hr-se-br-se))
137
- );
138
- --_sf-hr-br-wh: var(
139
- --_ctm-mob-dn-on-ve-se-hr-se-br-wh,
140
- var(--_ctm-tab-dn-on-ve-se-hr-se-br-wh, var(--_ctm-dn-on-ve-se-hr-se-br-wh))
141
- );
142
- --_sf-hr-br-bs: var(
143
- --_ctm-mob-dn-on-ve-se-hr-se-br-rs,
144
- var(--_ctm-tab-dn-on-ve-se-hr-se-br-rs, var(--_ctm-dn-on-ve-se-hr-se-br-rs))
145
- );
146
- --_sf-hr-bx-sw: var(
147
- --_show-shadow,
148
- var(
149
- --_ctm-mob-dn-on-ve-se-hr-se-sw-ae,
150
- var(--_ctm-tab-dn-on-ve-se-hr-se-sw-ae, var(--_ctm-dn-on-ve-se-hr-se-sw-ae))
151
- )
152
- var(
153
- --_ctm-mob-dn-on-ve-se-hr-se-sw-br,
154
- var(--_ctm-tab-dn-on-ve-se-hr-se-sw-br, var(--_ctm-dn-on-ve-se-hr-se-sw-br))
155
- )
156
- var(
157
- --_ctm-mob-dn-on-ve-se-hr-se-sw-sd,
158
- var(--_ctm-tab-dn-on-ve-se-hr-se-sw-sd, var(--_ctm-dn-on-ve-se-hr-se-sw-sd))
159
- )
160
- var(
161
- --_ctm-mob-dn-on-ve-se-hr-se-sw-cr,
162
- var(--_ctm-tab-dn-on-ve-se-hr-se-sw-cr, var(--_ctm-dn-on-ve-se-hr-se-sw-cr))
163
- )
164
- );
165
- }
166
- .swatch__item[data-is-selected="true"] {
125
+ // .swatch__item:hover {
126
+ // --_sf-hr-bd-cr: var(
127
+ // --_ctm-mob-dn-on-ve-se-hr-se-bd-cr,
128
+ // var(--_ctm-tab-dn-on-ve-se-hr-se-bd-cr, var(--_ctm-dn-on-ve-se-hr-se-bd-cr))
129
+ // );
130
+ // --_sf-hr-br-cr: var(
131
+ // --_ctm-mob-dn-on-ve-se-hr-se-br-cr,
132
+ // var(--_ctm-tab-dn-on-ve-se-hr-se-br-cr, var(--_ctm-dn-on-ve-se-hr-se-br-cr))
133
+ // );
134
+ // --_sf-hr-br-se: var(
135
+ // --_ctm-mob-dn-on-ve-se-hr-se-br-se,
136
+ // var(--_ctm-tab-dn-on-ve-se-hr-se-br-se, var(--_ctm-dn-on-ve-se-hr-se-br-se))
137
+ // );
138
+ // --_sf-hr-br-wh: var(
139
+ // --_ctm-mob-dn-on-ve-se-hr-se-br-wh,
140
+ // var(--_ctm-tab-dn-on-ve-se-hr-se-br-wh, var(--_ctm-dn-on-ve-se-hr-se-br-wh))
141
+ // );
142
+ // --_sf-hr-br-bs: var(
143
+ // --_ctm-mob-dn-on-ve-se-hr-se-br-rs,
144
+ // var(--_ctm-tab-dn-on-ve-se-hr-se-br-rs, var(--_ctm-dn-on-ve-se-hr-se-br-rs))
145
+ // );
146
+ // --_sf-hr-bx-sw: var(
147
+ // --_show-shadow,
148
+ // var(
149
+ // --_ctm-mob-dn-on-ve-se-hr-se-sw-ae,
150
+ // var(--_ctm-tab-dn-on-ve-se-hr-se-sw-ae, var(--_ctm-dn-on-ve-se-hr-se-sw-ae))
151
+ // )
152
+ // var(
153
+ // --_ctm-mob-dn-on-ve-se-hr-se-sw-br,
154
+ // var(--_ctm-tab-dn-on-ve-se-hr-se-sw-br, var(--_ctm-dn-on-ve-se-hr-se-sw-br))
155
+ // )
156
+ // var(
157
+ // --_ctm-mob-dn-on-ve-se-hr-se-sw-sd,
158
+ // var(--_ctm-tab-dn-on-ve-se-hr-se-sw-sd, var(--_ctm-dn-on-ve-se-hr-se-sw-sd))
159
+ // )
160
+ // var(
161
+ // --_ctm-mob-dn-on-ve-se-hr-se-sw-cr,
162
+ // var(--_ctm-tab-dn-on-ve-se-hr-se-sw-cr, var(--_ctm-dn-on-ve-se-hr-se-sw-cr))
163
+ // )
164
+ // );
165
+ // }
166
+ .selected {
167
167
  --_sf-hr-bd-cr: var(
168
168
  --_ctm-mob-dn-on-ve-se-sd-se-bd-cr,
169
169
  var(--_ctm-tab-dn-on-ve-se-sd-se-bd-cr, var(--_ctm-dn-on-ve-se-sd-se-bd-cr))
@@ -312,40 +312,40 @@
312
312
  // border-radius: 50%;
313
313
  }
314
314
 
315
- &:hover {
316
- &[data-background-shape-hover="circle"] {
317
- border-radius: 50%;
318
- }
319
- &[data-background-shape-hover="square"] {
320
- border-radius: 5px;
321
- }
322
- &[data-background-shape-hover="capsule"] {
323
- border-radius: 80%;
324
- width: calc(
325
- var(--_ctm-mob-lt-sh-im-se, var(--_ctm-tab-lt-sh-im-se, var(--_ctm-lt-sh-im-se))) +
326
- 8px
327
- );
328
- }
329
-
330
- &[data-swatch-shape-hover="circle"] {
331
- & div {
332
- border-radius: 50%;
333
- }
334
- // border-radius: 50%;
335
- }
336
-
337
- &[data-swatch-shape-hover="square"] {
338
- & div {
339
- border-radius: 0%;
340
- }
341
- }
342
- &[data-swatch-shape-hover="capsule"] {
343
- & div {
344
- border-radius: 50%;
345
- }
346
- // border-radius: 50%;
347
- }
348
- }
315
+ // &:hover {
316
+ // &[data-background-shape-hover="circle"] {
317
+ // border-radius: 50%;
318
+ // }
319
+ // &[data-background-shape-hover="square"] {
320
+ // border-radius: 5px;
321
+ // }
322
+ // &[data-background-shape-hover="capsule"] {
323
+ // border-radius: 80%;
324
+ // width: calc(
325
+ // var(--_ctm-mob-lt-sh-im-se, var(--_ctm-tab-lt-sh-im-se, var(--_ctm-lt-sh-im-se))) +
326
+ // 8px
327
+ // );
328
+ // }
329
+
330
+ // &[data-swatch-shape-hover="circle"] {
331
+ // & div {
332
+ // border-radius: 50%;
333
+ // }
334
+ // // border-radius: 50%;
335
+ // }
336
+
337
+ // &[data-swatch-shape-hover="square"] {
338
+ // & div {
339
+ // border-radius: 0%;
340
+ // }
341
+ // }
342
+ // &[data-swatch-shape-hover="capsule"] {
343
+ // & div {
344
+ // border-radius: 50%;
345
+ // }
346
+ // // border-radius: 50%;
347
+ // }
348
+ // }
349
349
 
350
350
  &[data-is-selected="true"] {
351
351
  &[data-background-shape-selected="circle"] {
@@ -383,6 +383,48 @@
383
383
  }
384
384
  }
385
385
 
386
+ .product-select-image {
387
+ height: 100%;
388
+ width: 100%;
389
+ object-fit: contain;
390
+ }
391
+
392
+ .disabled {
393
+ cursor: not-allowed;
394
+ opacity: 0.4;
395
+
396
+ &[data-swatch-type="Swatch image"] {
397
+ position: relative;
398
+ overflow: hidden;
399
+ &::after {
400
+ content: "";
401
+ width: 172%;
402
+ height: 1px;
403
+ position: absolute;
404
+ background: #f00;
405
+ left: -14px;
406
+ transform: rotate(48deg);
407
+ /* -webkit-transform: rotate(48deg); */
408
+ -moz-transform: rotate(48deg);
409
+ top: 14px;
410
+ box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
411
+ }
412
+ &::before {
413
+ content: "";
414
+ width: 164%;
415
+ height: 1px;
416
+ position: absolute;
417
+ background: #f00;
418
+ left: -14px;
419
+ transform: rotate(-48deg);
420
+ -webkit-transform: rotate(-48deg);
421
+ -moz-transform: rotate(-48deg);
422
+ top: 14px;
423
+ box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
424
+ }
425
+ }
426
+ }
427
+
386
428
  //Dropdown
387
429
  .est__dropdown__main {
388
430
  position: relative;
@@ -1,3 +1,10 @@
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
+
1
8
  [data-div-type="element"] {
2
9
  &[data-element-type="quickLinks"] {
3
10
  // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
@@ -7,11 +14,11 @@
7
14
  1% *
8
15
  var(
9
16
  --_ctm-mob-ele-nw-wh-vl,
10
- var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
17
+ var(--_ctm-tab-ele-nw-wh-vl, var(var(--_ctm-ele-nw-wh-vl), var(--_sf-nw-wh)))
11
18
  )
12
19
  )
13
20
  );
14
- margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
21
+ margin: var(--_ctm-mob-lt-mn, var(var(--_ctm-tab-lt-mn), var(--_ctm-lt-mn)));
15
22
  // aspect-ratio: 1 / var(--_sf-aspect-ratio);
16
23
  --_aspect-ratio: calc(
17
24
  1 *
@@ -95,18 +102,25 @@
95
102
 
96
103
  &[data-widget-border="true"] {
97
104
  .quick__links__container {
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
- );
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
+ // );
110
124
  }
111
125
  }
112
126
 
@@ -153,38 +167,43 @@
153
167
  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))
154
168
  );
155
169
  padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
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
- );
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
+ // );
160
174
  display: flex;
161
175
  // flex-direction: var(--_sf-fd-bn);
162
176
  justify-content: var(--_sf-jc, center);
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
- );
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
+ // );
182
196
  width: 100%;
183
197
  height: auto;
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
- );
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);
188
207
 
189
208
  .header__container {
190
209
  display: flex;
@@ -231,118 +250,142 @@
231
250
  )
232
251
  );
233
252
  h3 {
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
- );
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
+ // );
273
301
  }
274
302
 
275
303
  p {
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
- );
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
+ // );
315
352
  }
316
353
  }
317
354
 
318
355
  .items__container {
319
356
  .links__item {
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
- );
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;
343
376
  }
344
377
  .dropdown__container {
345
- width: var(--_ctm-mob-lt-dn-wh, var(--_ctm-tab-dn-wh, var(--_ctm-lt-dn-wh)));
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
+ }
346
389
  }
347
390
  }
348
391
  }
package/dist/quotes.scss CHANGED
@@ -71,6 +71,7 @@ $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;
74
75
 
75
76
  .heading_wrapper {
76
77
  display: flex;
@@ -17,6 +17,7 @@
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)));
20
21
 
21
22
  background-color: var(
22
23
  --_ctm-mob-repe-dn-bd-cr,