@sc-360-v2/storefront-cms-library 0.5.42 → 0.5.44

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 (19) hide show
  1. package/dist/builder.js +1 -1
  2. package/dist/faq.scss +46 -0
  3. package/dist/form-preview.scss +28 -3
  4. package/dist/layouter-item.scss +1 -0
  5. package/dist/layouter.scss +5 -0
  6. package/dist/map.scss +55 -4
  7. package/dist/profile.scss +210 -174
  8. package/dist/quick-links.scss +39 -6
  9. package/dist/repeater-item.scss +1 -0
  10. package/dist/repeater.scss +6 -3
  11. package/dist/rfqs.scss +822 -736
  12. package/dist/search.scss +236 -1
  13. package/dist/types/builder/tools/element-edit/profile.d.ts +16 -1
  14. package/dist/types/builder/tools/element-edit/quickLinks.d.ts +6 -0
  15. package/dist/types/builder/tools/element-edit/rfqs.d.ts +45 -1
  16. package/dist/types/builder/tools/element-edit/search.d.ts +20 -1
  17. package/dist/types/website/enums/feature-restrictions.d.ts +5 -1
  18. package/dist/website.js +1 -1
  19. package/package.json +1 -1
package/dist/rfqs.scss CHANGED
@@ -1,736 +1,822 @@
1
- @use "sass:map";
2
- @use "sass:list";
3
- @use "./functions.scss" as *;
4
-
5
- $resizerId: "[data-cms-tool='cms-element-resizer']";
6
- $resizeActive: '[data-cms-element-resizer="true"]';
7
- [data-div-type="element"] {
8
- &[data-element-type="rfqs"] {
9
- width: var(
10
- --_sf-el-wh-st-mx,
11
- calc(
12
- 1% *
13
- var(
14
- --_ctm-mob-ele-nw-wh-vl,
15
- var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
16
- )
17
- )
18
- );
19
- margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
20
-
21
- & > div {
22
- &.wrapper {
23
- width: 100%;
24
- &[data-divider-type="true"] .metric_item {
25
- border: 0px !important;
26
- border-top: 2px solid var(--_primary-100) !important;
27
- .quotes_wrapper {
28
- border: 0px !important;
29
- }
30
- }
31
- }
32
- }
33
- .embla__container {
34
- grid-template-columns: max-content !important;
35
- grid-auto-columns: max-content !important;
36
-
37
- .embla__slide {
38
- width: max-content !important;
39
- }
40
- }
41
-
42
- .rfqs_wrapper {
43
- display: flex;
44
- flex-direction: column;
45
- align-items: flex-start;
46
- align-self: stretch;
47
- // border-radius: 4px;
48
- // border: 1px solid var(--_primary-100);
49
- // background: #fff;
50
- width: 349px;
51
- font-family: prepareMediaVariable(--_ctm-dn-wt-se-ft-fy);
52
- font-size: prepareMediaVariable(--_ctm-dn-wt-se-ft-se);
53
- color: prepareMediaVariable(--_ctm-dn-wt-se-cr);
54
- font-weight: prepareMediaVariable(--_ctm-dn-wt-se-ft-wt);
55
- font-style: prepareMediaVariable(--_ctm-dn-wt-se-ft-se-ic);
56
- text-decoration: prepareMediaVariable(--_ctm-dn-wt-se-ue);
57
- text-align: prepareMediaVariable(--_ctm-dn-wt-se-tt-an);
58
- letter-spacing: prepareMediaVariable(--_ctm-dn-wt-se-lr-sg);
59
- line-height: prepareMediaVariable(--_ctm-dn-wt-se-le-ht);
60
- background-color: prepareMediaVariable(--_ctm-dn-wt-se-bd-cr);
61
- border-width: prepareMediaVariable(--_ctm-dn-wt-se-br-wh);
62
- border-color: prepareMediaVariable(--_ctm-dn-wt-se-br-cr);
63
- border-style: prepareMediaVariable(--_ctm-dn-wt-se-br-se);
64
- border-radius: prepareMediaVariable(--_ctm-dn-wt-se-br-rs);
65
- box-shadow: prepareMediaVariable(--_ctm-dn-wt-se-sw-ae)
66
- prepareMediaVariable(--_ctm-dn-wt-se-sw-br) prepareMediaVariable(--_ctm-dn-wt-se-sw-sd)
67
- prepareMediaVariable(--_ctm-dn-wt-se-sw-cr);
68
- .rfqs_card {
69
- display: flex;
70
- flex-direction: column;
71
- align-items: flex-start;
72
- align-self: stretch;
73
- width: 349px;
74
- .heading_wrapper {
75
- display: flex;
76
- padding: 16px;
77
- align-items: center;
78
- gap: 8px;
79
- align-self: stretch;
80
- //border-bottom: 1px solid var(--_gray-200);
81
-
82
- .heading {
83
- // color: var(--_gray-900);
84
- // font-size: 20px;
85
- // font-weight: 600;
86
- // line-height: 30px;
87
- font-family: prepareMediaVariable(--_ctm-dn-wt-se-ft-fy);
88
- font-size: prepareMediaVariable(--_ctm-dn-wt-se-ft-se);
89
- color: prepareMediaVariable(--_ctm-dn-wt-se-cr);
90
- font-weight: prepareMediaVariable(--_ctm-dn-wt-se-ft-wt);
91
- font-style: prepareMediaVariable(--_ctm-dn-wt-se-ft-se-ic);
92
- text-decoration: prepareMediaVariable(--_ctm-dn-wt-se-ue);
93
- text-align: prepareMediaVariable(--_ctm-dn-wt-se-tt-an);
94
- letter-spacing: prepareMediaVariable(--_ctm-dn-wt-se-lr-sg);
95
- line-height: prepareMediaVariable(--_ctm-dn-wt-se-le-ht);
96
- }
97
- }
98
-
99
- .metric_item {
100
- display: flex;
101
- flex-direction: column;
102
- align-items: center;
103
- flex: 1 0 0;
104
- align-self: stretch;
105
- //border-radius: 0px 0px 6px 6px;
106
-
107
- background-color: prepareMediaVariable(--_ctm-dn-im-se-bd-cr);
108
- border-width: prepareMediaVariable(--_ctm-dn-im-se-br-wh);
109
- border-color: prepareMediaVariable(--_ctm-dn-im-se-br-cr);
110
- border-style: prepareMediaVariable(--_ctm-dn-im-se-br-se);
111
- border-radius: prepareMediaVariable(--_ctm-dn-im-se-br-rs);
112
- box-shadow: prepareMediaVariable(--_ctm-dn-im-se-sw-ae)
113
- prepareMediaVariable(--_ctm-dn-im-se-sw-br) prepareMediaVariable(--_ctm-dn-im-se-sw-sd)
114
- prepareMediaVariable(--_ctm-dn-im-se-sw-cr);
115
-
116
- .content {
117
- display: flex;
118
- padding: 12px 16px;
119
- flex-direction: column;
120
- justify-content: center;
121
- align-items: flex-start;
122
- gap: 12px;
123
- flex: 1 0 0;
124
- align-self: stretch;
125
- font-family: prepareMediaVariable(--_ctm-dn-im-se-ft-fy);
126
- font-size: prepareMediaVariable(--_ctm-dn-im-se-ft-se);
127
- color: prepareMediaVariable(--_ctm-dn-im-se-cr);
128
- font-weight: prepareMediaVariable(--_ctm-dn-im-se-ft-wt);
129
- font-style: prepareMediaVariable(--_ctm-dn-im-se-ft-se-ic);
130
- text-decoration: prepareMediaVariable(--_ctm-dn-im-se-ue);
131
- text-align: prepareMediaVariable(--_ctm-dn-im-se-tt-an);
132
- letter-spacing: prepareMediaVariable(--_ctm-dn-im-se-lr-sg);
133
- line-height: prepareMediaVariable(--_ctm-dn-im-se-le-ht);
134
-
135
- .metric_wrapper {
136
- display: flex;
137
- align-items: center;
138
- gap: 16px;
139
- flex: 1 0 0;
140
- align-self: stretch;
141
-
142
- .rfq_id {
143
- flex: 1 0 0;
144
- // color: var(--_gray-900);
145
- // font-size: 14px;
146
- // font-weight: 600;
147
- // line-height: 20px;
148
- font-family: prepareMediaVariable(--_ctm-dn-rq-id-ft-fy);
149
- font-size: prepareMediaVariable(--_ctm-dn-rq-id-ft-se);
150
- color: prepareMediaVariable(--_ctm-dn-rq-id-cr);
151
- font-weight: prepareMediaVariable(--_ctm-dn-rq-id-ft-wt);
152
- font-style: prepareMediaVariable(--_ctm-dn-rq-id-ft-se-ic);
153
- text-decoration: prepareMediaVariable(--_ctm-dn-rq-id-ue);
154
- text-align: prepareMediaVariable(--_ctm-dn-rq-id-tt-an);
155
- letter-spacing: prepareMediaVariable(--_ctm-dn-rq-id-lr-sg);
156
- line-height: prepareMediaVariable(--_ctm-dn-rq-id-le-ht);
157
- background-color: prepareMediaVariable(--_ctm-dn-rq-id-bd-cr);
158
- border-width: prepareMediaVariable(--_ctm-dn-rq-id-br-wh);
159
- border-color: prepareMediaVariable(--_ctm-dn-rq-id-br-cr);
160
- border-style: prepareMediaVariable(--_ctm-dn-rq-id-br-se);
161
- border-radius: prepareMediaVariable(--_ctm-dn-rq-id-br-rs);
162
- box-shadow: prepareMediaVariable(--_ctm-dn-rq-id-sw-ae)
163
- prepareMediaVariable(--_ctm-dn-rq-id-sw-br)
164
- prepareMediaVariable(--_ctm-dn-rq-id-sw-sd)
165
- prepareMediaVariable(--_ctm-dn-rq-id-sw-cr);
166
- }
167
-
168
- .status_badge {
169
- display: flex;
170
- padding: 2px 8px 2px 6px;
171
- align-items: center;
172
- gap: 4px;
173
- // border-radius: 16px;
174
- // background: #fff4ed;
175
- mix-blend-mode: multiply;
176
- background-color: prepareMediaVariable(--_ctm-dn-rq-ss-bd-cr);
177
- border-width: prepareMediaVariable(--_ctm-dn-rq-ss-br-wh);
178
- border-color: prepareMediaVariable(--_ctm-dn-rq-ss-br-cr);
179
- border-style: prepareMediaVariable(--_ctm-dn-rq-ss-br-se);
180
- border-radius: prepareMediaVariable(--_ctm-dn-rq-ss-br-rs);
181
- box-shadow: prepareMediaVariable(--_ctm-dn-rq-ss-sw-ae)
182
- prepareMediaVariable(--_ctm-dn-rq-ss-sw-br)
183
- prepareMediaVariable(--_ctm-dn-rq-ss-sw-sd)
184
- prepareMediaVariable(--_ctm-dn-rq-ss-sw-cr);
185
-
186
- .rfq_status {
187
- // color: #b93815;
188
- // text-align: center;
189
- // font-size: 12px;
190
- // line-height: 18px;
191
- font-family: prepareMediaVariable(--_ctm-dn-rq-ss-ft-fy);
192
- font-size: prepareMediaVariable(--_ctm-dn-rq-ss-ft-se);
193
- color: prepareMediaVariable(--_ctm-dn-rq-ss-cr);
194
- font-weight: prepareMediaVariable(--_ctm-dn-rq-ss-ft-wt);
195
- font-style: prepareMediaVariable(--_ctm-dn-rq-ss-ft-se-ic);
196
- text-decoration: prepareMediaVariable(--_ctm-dn-rq-ss-ue);
197
- text-align: prepareMediaVariable(--_ctm-dn-rq-ss-tt-an);
198
- letter-spacing: prepareMediaVariable(--_ctm-dn-rq-ss-lr-sg);
199
- line-height: prepareMediaVariable(--_ctm-dn-rq-ss-le-ht);
200
- }
201
- }
202
-
203
- .rfq_updated_date {
204
- flex: 1 0 0;
205
- // color: var(--_gray-700);
206
- // font-size: 12px;
207
- // font-weight: 400;
208
- // line-height: 18px;
209
-
210
- font-family: prepareMediaVariable(--_ctm-dn-rd-on-ft-fy);
211
- font-size: prepareMediaVariable(--_ctm-dn-rd-on-ft-se);
212
- color: prepareMediaVariable(--_ctm-dn-rd-on-cr);
213
- font-weight: prepareMediaVariable(--_ctm-dn-rd-on-ft-wt);
214
- font-style: prepareMediaVariable(--_ctm-dn-rd-on-ft-se-ic);
215
- text-decoration: prepareMediaVariable(--_ctm-dn-rd-on-ue);
216
- text-align: prepareMediaVariable(--_ctm-dn-rd-on-tt-an);
217
- letter-spacing: prepareMediaVariable(--_ctm-dn-rd-on-lr-sg);
218
- line-height: prepareMediaVariable(--_ctm-dn-rd-on-le-ht);
219
- background-color: prepareMediaVariable(--_ctm-dn-rd-on-bd-cr);
220
- border-width: prepareMediaVariable(--_ctm-dn-rd-on-br-wh);
221
- border-color: prepareMediaVariable(--_ctm-dn-rd-on-br-cr);
222
- border-style: prepareMediaVariable(--_ctm-dn-rd-on-br-se);
223
- border-radius: prepareMediaVariable(--_ctm-dn-rd-on-br-rs);
224
- box-shadow: prepareMediaVariable(--_ctm-dn-rd-on-sw-ae)
225
- prepareMediaVariable(--_ctm-dn-rd-on-sw-br)
226
- prepareMediaVariable(--_ctm-dn-rd-on-sw-sd)
227
- prepareMediaVariable(--_ctm-dn-rd-on-sw-cr);
228
- }
229
-
230
- .rfqs_amount {
231
- // color: var(--_gray-900);
232
- // text-align: right;
233
- // font-size: 14px;
234
- // font-weight: 600;
235
- // line-height: 20px;
236
-
237
- font-family: prepareMediaVariable(--_ctm-dn-rq-id-ft-fy);
238
- font-size: prepareMediaVariable(--_ctm-dn-rq-id-ft-se);
239
- color: prepareMediaVariable(--_ctm-dn-rq-id-cr);
240
- font-weight: prepareMediaVariable(--_ctm-dn-rq-id-ft-wt);
241
- font-style: prepareMediaVariable(--_ctm-dn-rq-id-ft-se-ic);
242
- text-decoration: prepareMediaVariable(--_ctm-dn-rq-id-ue);
243
- text-align: prepareMediaVariable(--_ctm-dn-rq-id-tt-an);
244
- letter-spacing: prepareMediaVariable(--_ctm-dn-rq-id-lr-sg);
245
- line-height: prepareMediaVariable(--_ctm-dn-rq-id-le-ht);
246
- background-color: prepareMediaVariable(--_ctm-dn-rq-id-bd-cr);
247
- border-width: prepareMediaVariable(--_ctm-dn-rq-id-br-wh);
248
- border-color: prepareMediaVariable(--_ctm-dn-rq-id-br-cr);
249
- border-style: prepareMediaVariable(--_ctm-dn-rq-id-br-se);
250
- border-radius: prepareMediaVariable(--_ctm-dn-rq-id-br-rs);
251
- box-shadow: prepareMediaVariable(--_ctm-dn-rq-id-sw-ae)
252
- prepareMediaVariable(--_ctm-dn-rq-id-sw-br)
253
- prepareMediaVariable(--_ctm-dn-rq-id-sw-sd)
254
- prepareMediaVariable(--_ctm-dn-rq-id-sw-cr);
255
- }
256
- }
257
- .rfq_action {
258
- display: flex;
259
- align-items: center;
260
- gap: 16px;
261
- flex: 1 0 0;
262
- align-self: stretch;
263
- font-size: 14px;
264
- }
265
- }
266
- }
267
- }
268
- }
269
-
270
- .embla {
271
- width: 100%;
272
- height: auto;
273
- position: relative;
274
- display: flex;
275
- flex-direction: column;
276
- // overflow: hidden;
277
-
278
- .embla__viewport {
279
- width: 100%;
280
- height: 100%;
281
- position: relative;
282
- display: flex;
283
- flex-direction: column;
284
-
285
- overflow: hidden;
286
-
287
- .embla__container {
288
- width: 100%;
289
- height: 100%;
290
- display: grid;
291
- grid-template-rows: 100%;
292
-
293
- grid-template-columns: repeat(
294
- var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
295
- calc(
296
- 100% /
297
- var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
298
- )
299
- );
300
-
301
- grid-auto-flow: column;
302
- gap: var(--_ctm-mob-lt-sg-bn-is, var(--_ctm-tab-lt-sg-bn-is, var(--_ctm-lt-sg-bn-is)));
303
-
304
- &[data-control-type="Bottom"][data-slider-control="Arrows"] {
305
- height: calc(100% - calc(prepareMediaVariable(--_ctm-dn-pn-as-aw-se) + 10px));
306
- }
307
-
308
- &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
309
- height: calc(
310
- 100% - calc(
311
- var(
312
- --_ctm-mob-dn-pn-le-le-ht,
313
- var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
314
- ) +
315
- 20px
316
- )
317
- );
318
- }
319
-
320
- &[data-control-type="Bottom"][data-slider-control="Dots"] {
321
- height: calc(
322
- 100% - calc(
323
- var(
324
- --_ctm-mob-dn-pn-ds-dt-se,
325
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
326
- ) +
327
- 20px
328
- )
329
- );
330
- }
331
-
332
- .embla__slide {
333
- width: 100%;
334
- height: 100%;
335
- }
336
- }
337
- }
338
- &:not([data-display-style="Column"]) {
339
- .embla__container {
340
- grid-auto-columns: calc(
341
- 100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
342
- );
343
- }
344
- }
345
-
346
- &[data-display-style="Grid"][data-scroll-direction="Vertical"] {
347
- // overflow: unset;
348
-
349
- .embla__viewport {
350
- overflow: unset;
351
- height: 80%;
352
- flex-grow: 1;
353
- &:not([data-is-builder-type="true"]) {
354
- height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
355
- }
356
-
357
- .embla__container {
358
- overflow: unset;
359
- height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
360
- // min-height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
361
-
362
- grid-template-columns: repeat(var(--_ctm-lt-is-pr-rw), 1fr);
363
- grid-template-rows: unset;
364
-
365
- grid-auto-flow: row;
366
-
367
- &[data-overflow-hidden="true"] {
368
- overflow: hidden;
369
- }
370
- }
371
- }
372
- }
373
-
374
- &[data-display-style="Grid"][data-scroll-direction="Horizontal"] {
375
- .embla__viewport {
376
- .embla__container {
377
- grid-template-rows: repeat(
378
- var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn))),
379
- calc(
380
- 100% /
381
- var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn)))
382
- )
383
- );
384
- }
385
- }
386
- }
387
-
388
- &[data-display-style="Rows"] {
389
- // overflow: unset;
390
-
391
- .embla__viewport {
392
- overflow: unset;
393
- height: 80%;
394
- flex-grow: 1;
395
-
396
- &:not([data-is-builder-type="true"]) {
397
- height: var(--_ctm-height);
398
- }
399
-
400
- .embla__container {
401
- overflow: hidden;
402
- height: var(--_ctm-height);
403
- // min-height: var(--_ctm-height);
404
-
405
- grid-template-columns: repeat(
406
- var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))),
407
- 1fr
408
- );
409
- grid-template-rows: unset;
410
- grid-auto-flow: row;
411
- }
412
- }
413
- }
414
-
415
- &[data-display-style="Column"] {
416
- // overflow: unset;
417
-
418
- .embla__viewport {
419
- .embla__container {
420
- display: flex;
421
- .embla__slide {
422
- width: unset;
423
- height: 100%;
424
- aspect-ratio: 1 / 2;
425
- }
426
- }
427
- }
428
- }
429
-
430
- .arrow-navigation {
431
- display: flex;
432
- position: absolute;
433
- top: 50%;
434
- left: 50%;
435
- width: 100%;
436
- justify-content: space-between;
437
- transform: translate(-50%, -50%);
438
- // padding-left: 20px;
439
- &[data-control-type="Side"] {
440
- .left-button,
441
- .right-button {
442
- background-color: transparent;
443
- }
444
- }
445
- &[data-background-shape="Round"] {
446
- .left-button,
447
- .right-button {
448
- background-color: #f2f5f5;
449
- box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
450
- }
451
- }
452
- &[data-control-type="Bottom-Overflow"] {
453
- transform: translateX(-50%);
454
- width: 100%;
455
- justify-content: center;
456
- gap: 12px;
457
- top: unset;
458
- bottom: 6px;
459
- }
460
- &[data-control-type="Bottom"] {
461
- transform: unset;
462
- position: static;
463
- width: 100%;
464
- justify-content: center;
465
- gap: 12px;
466
- margin-top: 10px;
467
- }
468
- &[data-control-type="Top"] {
469
- top: 0px;
470
- position: absolute;
471
- /* right: 0px; */
472
- justify-content: end;
473
- width: 170px;
474
- transform: unset;
475
- gap: 12px;
476
- margin-top: 10px;
477
- }
478
- .left-button {
479
- padding: 10px;
480
- border-radius: 50%;
481
- border: none;
482
- width: prepareMediaVariable(--_ctm-dn-pn-as-aw-se);
483
- height: prepareMediaVariable(--_ctm-dn-pn-as-aw-se);
484
- display: flex;
485
- align-items: center;
486
- justify-content: center;
487
- cursor: pointer;
488
- outline: none;
489
- margin-left: 12px;
490
- &:disabled {
491
- & svg {
492
- path {
493
- stroke: rgb(192, 192, 192);
494
- }
495
- }
496
- }
497
- }
498
- .right-button {
499
- border-radius: 50%;
500
- border: none;
501
- width: prepareMediaVariable(--_ctm-dn-pn-as-aw-se);
502
- height: prepareMediaVariable(--_ctm-dn-pn-as-aw-se);
503
-
504
- display: flex;
505
- align-items: center;
506
- justify-content: center;
507
- cursor: pointer;
508
- outline: none;
509
- margin-right: 12px;
510
- padding: 10px;
511
-
512
- &:disabled {
513
- & svg {
514
- path {
515
- stroke: rgb(192, 192, 192);
516
- }
517
- }
518
- }
519
- }
520
- .icon {
521
- display: flex;
522
-
523
- svg {
524
- width: calc(prepareMediaVariable(--_ctm-dn-pn-as-aw-se) * 0.5);
525
- height: calc(prepareMediaVariable(--_ctm-dn-pn-as-aw-se) * 0.5);
526
-
527
- path {
528
- stroke: prepareMediaVariable(--_ctm-dn-pn-as-aw-cr);
529
- }
530
- }
531
- }
532
- }
533
-
534
- &[data-control-type="Side"] {
535
- .embla__viewport {
536
- width: calc(100% - 120px);
537
- margin-inline: auto;
538
- }
539
- .left-button {
540
- position: absolute;
541
- left: 0;
542
- top: 50%;
543
- transform: translateY(-50%);
544
- }
545
- .right-button {
546
- position: absolute;
547
-
548
- right: 0;
549
- top: 50%;
550
- transform: translateY(-50%);
551
- }
552
- }
553
-
554
- &[data-thumbnail-placement="top"] {
555
- flex-direction: column-reverse;
556
- }
557
- &[data-thumbnail-placement="bottom"] {
558
- flex-direction: column;
559
- }
560
- &[data-thumbnail-placement="left"] {
561
- flex-direction: row-reverse;
562
-
563
- .embla__thumbs {
564
- width: var(--_ctm-lt-tl-se);
565
- height: 100%;
566
-
567
- & .embla__thumbs__container {
568
- flex-direction: column;
569
- height: 100%;
570
- }
571
- }
572
- }
573
- &[data-thumbnail-placement="right"] {
574
- flex-direction: row;
575
- .embla__thumbs {
576
- width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
577
-
578
- height: 100%;
579
-
580
- & .embla__thumbs__container {
581
- flex-direction: column;
582
- height: 100%;
583
- }
584
- }
585
- }
586
- .embla__dots {
587
- display: flex;
588
- flex-wrap: wrap;
589
- justify-content: center;
590
- align-items: center;
591
- margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
592
- gap: 6px;
593
-
594
- &[data-control-type="Bottom-Overflow"] {
595
- position: absolute;
596
- bottom: 10px;
597
- left: 50%;
598
- transform: translateX(-50%);
599
- width: 75%;
600
- }
601
- .embla__dot {
602
- -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
603
- -webkit-appearance: none;
604
- appearance: none;
605
- background-color: var(
606
- --_ctm-mob-dn-pn-ds-or-dt-cr,
607
- var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-dn-pn-ds-or-dt-cr))
608
- );
609
-
610
- touch-action: manipulation;
611
- display: inline-flex;
612
- text-decoration: none;
613
- cursor: pointer;
614
- border: 0;
615
- padding: 0;
616
- margin: 0;
617
- // width: 0.6rem;
618
- // height: 0.6rem;
619
- width: var(
620
- --_ctm-mob-dn-pn-ds-dt-se,
621
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
622
- );
623
- height: var(
624
- --_ctm-mob-dn-pn-ds-dt-se,
625
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
626
- );
627
-
628
- display: flex;
629
- align-items: center;
630
- justify-content: center;
631
- border-radius: 50%;
632
- }
633
- .embla__dot:after {
634
- // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
635
- width: var(
636
- --_ctm-mob-dn-pn-ds-dt-se,
637
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
638
- );
639
- height: var(
640
- --_ctm-mob-dn-pn-ds-dt-se,
641
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
642
- );
643
-
644
- border-radius: 50%;
645
- display: flex;
646
- align-items: center;
647
- content: "";
648
- }
649
- .embla__dot--selected:after {
650
- box-shadow: inset 0 0 0 1px var(--text-body);
651
- background-color: var(
652
- --_ctm-mob-dn-pn-ds-ct-dt-cr,
653
- var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr))
654
- );
655
- }
656
- &[data-slider-control="Pagination Line"] {
657
- .embla__dot {
658
- width: var(
659
- --_ctm-mob-dn-pn-le-le-wh,
660
- var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
661
- );
662
- height: var(
663
- --_ctm-mob-dn-pn-le-le-ht,
664
- var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
665
- );
666
- background-color: var(
667
- --_ctm-mob-dn-pn-le-or-le-cr,
668
- var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr))
669
- );
670
- border-radius: 6px;
671
- }
672
-
673
- .embla__dot--selected:after {
674
- box-shadow: inset 0 0 0 1px var(--text-body);
675
- border-radius: 6px;
676
- width: var(
677
- --_ctm-mob-dn-pn-le-le-wh,
678
- var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
679
- );
680
- height: var(
681
- --_ctm-mob-dn-pn-le-le-ht,
682
- var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
683
- );
684
- background-color: var(
685
- --_ctm-mob-dn-pn-le-ct-le-cr,
686
- var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr))
687
- );
688
- }
689
- }
690
- }
691
-
692
- .embla__thumbs {
693
- width: 100%;
694
- height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
695
-
696
- position: relative;
697
- display: grid;
698
- grid-template-columns: 1fr;
699
- overflow: hidden;
700
- // margin: 10px;
701
- padding: 10px;
702
-
703
- .embla__thumbs__viewport {
704
- width: 100%;
705
- height: 100%;
706
- position: relative;
707
- display: flex;
708
- flex-direction: column;
709
-
710
- overflow: hidden;
711
- }
712
- .embla__thumbs__container {
713
- display: flex;
714
- flex-direction: row;
715
- margin-left: calc(var(--thumbs-slide-spacing) * -1);
716
- gap: var(--_ctm-mob-lt-tl-sg, var(--_ctm-tab-lt-tl-sg, var(--_ctm-lt-tl-sg)));
717
-
718
- width: 100%;
719
- // justify-content: center;
720
- // height: 200px;
721
-
722
- .embla__thumbs__slide {
723
- min-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
724
- max-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
725
- height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
726
-
727
- & img {
728
- width: 100%;
729
- height: 100%;
730
- }
731
- }
732
- }
733
- }
734
- }
735
- }
736
- }
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+ @use "./functions.scss" as *;
4
+
5
+ $resizerId: "[data-cms-tool='cms-element-resizer']";
6
+ $resizeActive: '[data-cms-element-resizer="true"]';
7
+ [data-div-type="element"] {
8
+ &[data-element-type="rfqs"] {
9
+ width: var(
10
+ --_sf-el-wh-st-mx,
11
+ calc(
12
+ 1% *
13
+ var(
14
+ --_ctm-mob-ele-nw-wh-vl,
15
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
16
+ )
17
+ )
18
+ );
19
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
20
+
21
+ & > div {
22
+ &.wrapper {
23
+ width: 100%;
24
+ &[data-divider-type="true"] .metric_item {
25
+ border: 0px !important;
26
+ border-top: 2px solid var(--_primary-100) !important;
27
+ .quotes_wrapper {
28
+ border: 0px !important;
29
+ }
30
+ }
31
+ }
32
+ }
33
+ .embla__container {
34
+ grid-template-columns: max-content !important;
35
+ grid-auto-columns: max-content !important;
36
+
37
+ .embla__slide {
38
+ width: max-content !important;
39
+ }
40
+ }
41
+
42
+ .rfqs_wrapper {
43
+ display: flex;
44
+ flex-direction: column;
45
+ align-items: flex-start;
46
+ align-self: stretch;
47
+ // border-radius: 4px;
48
+ // border: 1px solid var(--_primary-100);
49
+ // background: #fff;
50
+ width: 349px;
51
+ font-family: prepareMediaVariable(--_ctm-dn-wt-se-ft-fy);
52
+ font-size: prepareMediaVariable(--_ctm-dn-wt-se-ft-se);
53
+ color: prepareMediaVariable(--_ctm-dn-wt-se-cr);
54
+ font-weight: prepareMediaVariable(--_ctm-dn-wt-se-ft-wt);
55
+ font-style: prepareMediaVariable(--_ctm-dn-wt-se-ft-se-ic);
56
+ text-decoration: prepareMediaVariable(--_ctm-dn-wt-se-ue);
57
+ text-align: prepareMediaVariable(--_ctm-dn-wt-se-tt-an);
58
+ letter-spacing: prepareMediaVariable(--_ctm-dn-wt-se-lr-sg);
59
+ line-height: prepareMediaVariable(--_ctm-dn-wt-se-le-ht);
60
+ background-color: prepareMediaVariable(--_ctm-dn-wt-se-bd-cr);
61
+ border-width: prepareMediaVariable(--_ctm-dn-wt-se-br-wh);
62
+ border-color: prepareMediaVariable(--_ctm-dn-wt-se-br-cr);
63
+ border-style: prepareMediaVariable(--_ctm-dn-wt-se-br-se);
64
+ border-radius: prepareMediaVariable(--_ctm-dn-wt-se-br-rs);
65
+ box-shadow: prepareMediaVariable(--_ctm-dn-wt-se-sw-ae)
66
+ prepareMediaVariable(--_ctm-dn-wt-se-sw-br) prepareMediaVariable(--_ctm-dn-wt-se-sw-sd)
67
+ prepareMediaVariable(--_ctm-dn-wt-se-sw-cr);
68
+ .rfqs_card {
69
+ display: flex;
70
+ flex-direction: column;
71
+ align-items: flex-start;
72
+ align-self: stretch;
73
+ width: 349px;
74
+ .heading_wrapper {
75
+ display: flex;
76
+ padding: 16px;
77
+ align-items: center;
78
+ gap: 8px;
79
+ align-self: stretch;
80
+ //border-bottom: 1px solid var(--_gray-200);
81
+
82
+ .heading {
83
+ // color: var(--_gray-900);
84
+ // font-size: 20px;
85
+ // font-weight: 600;
86
+ // line-height: 30px;
87
+ font-family: prepareMediaVariable(--_ctm-dn-wt-se-ft-fy);
88
+ font-size: prepareMediaVariable(--_ctm-dn-wt-se-ft-se);
89
+ color: prepareMediaVariable(--_ctm-dn-wt-se-cr);
90
+ font-weight: prepareMediaVariable(--_ctm-dn-wt-se-ft-wt);
91
+ font-style: prepareMediaVariable(--_ctm-dn-wt-se-ft-se-ic);
92
+ text-decoration: prepareMediaVariable(--_ctm-dn-wt-se-ue);
93
+ text-align: prepareMediaVariable(--_ctm-dn-wt-se-tt-an);
94
+ letter-spacing: prepareMediaVariable(--_ctm-dn-wt-se-lr-sg);
95
+ line-height: prepareMediaVariable(--_ctm-dn-wt-se-le-ht);
96
+ }
97
+ }
98
+
99
+ .metric_item {
100
+ display: flex;
101
+ flex-direction: column;
102
+ align-items: center;
103
+ flex: 1 0 0;
104
+ align-self: stretch;
105
+ //border-radius: 0px 0px 6px 6px;
106
+
107
+ background-color: prepareMediaVariable(--_ctm-dn-im-se-bd-cr);
108
+ border-width: prepareMediaVariable(--_ctm-dn-im-se-br-wh);
109
+ border-color: prepareMediaVariable(--_ctm-dn-im-se-br-cr);
110
+ border-style: prepareMediaVariable(--_ctm-dn-im-se-br-se);
111
+ border-radius: prepareMediaVariable(--_ctm-dn-im-se-br-rs);
112
+ box-shadow: prepareMediaVariable(--_ctm-dn-im-se-sw-ae)
113
+ prepareMediaVariable(--_ctm-dn-im-se-sw-br) prepareMediaVariable(--_ctm-dn-im-se-sw-sd)
114
+ prepareMediaVariable(--_ctm-dn-im-se-sw-cr);
115
+
116
+ .content {
117
+ display: flex;
118
+ padding: 12px 16px;
119
+ flex-direction: column;
120
+ justify-content: center;
121
+ align-items: flex-start;
122
+ gap: 12px;
123
+ flex: 1 0 0;
124
+ align-self: stretch;
125
+ font-family: prepareMediaVariable(--_ctm-dn-im-se-ft-fy);
126
+ font-size: prepareMediaVariable(--_ctm-dn-im-se-ft-se);
127
+ color: prepareMediaVariable(--_ctm-dn-im-se-cr);
128
+ font-weight: prepareMediaVariable(--_ctm-dn-im-se-ft-wt);
129
+ font-style: prepareMediaVariable(--_ctm-dn-im-se-ft-se-ic);
130
+ text-decoration: prepareMediaVariable(--_ctm-dn-im-se-ue);
131
+ text-align: prepareMediaVariable(--_ctm-dn-im-se-tt-an);
132
+ letter-spacing: prepareMediaVariable(--_ctm-dn-im-se-lr-sg);
133
+ line-height: prepareMediaVariable(--_ctm-dn-im-se-le-ht);
134
+
135
+ .metric_wrapper {
136
+ display: flex;
137
+ align-items: center;
138
+ gap: 16px;
139
+ flex: 1 0 0;
140
+ align-self: stretch;
141
+
142
+ .rfq_id {
143
+ flex: 1 0 0;
144
+ // color: var(--_gray-900);
145
+ // font-size: 14px;
146
+ // font-weight: 600;
147
+ // line-height: 20px;
148
+ font-family: prepareMediaVariable(--_ctm-dn-rq-id-ft-fy);
149
+ font-size: prepareMediaVariable(--_ctm-dn-rq-id-ft-se);
150
+ color: prepareMediaVariable(--_ctm-dn-rq-id-cr);
151
+ font-weight: prepareMediaVariable(--_ctm-dn-rq-id-ft-wt);
152
+ font-style: prepareMediaVariable(--_ctm-dn-rq-id-ft-se-ic);
153
+ text-decoration: prepareMediaVariable(--_ctm-dn-rq-id-ue);
154
+ text-align: prepareMediaVariable(--_ctm-dn-rq-id-tt-an);
155
+ letter-spacing: prepareMediaVariable(--_ctm-dn-rq-id-lr-sg);
156
+ line-height: prepareMediaVariable(--_ctm-dn-rq-id-le-ht);
157
+ background-color: prepareMediaVariable(--_ctm-dn-rq-id-bd-cr);
158
+ border-width: prepareMediaVariable(--_ctm-dn-rq-id-br-wh);
159
+ border-color: prepareMediaVariable(--_ctm-dn-rq-id-br-cr);
160
+ border-style: prepareMediaVariable(--_ctm-dn-rq-id-br-se);
161
+ border-radius: prepareMediaVariable(--_ctm-dn-rq-id-br-rs);
162
+ box-shadow: prepareMediaVariable(--_ctm-dn-rq-id-sw-ae)
163
+ prepareMediaVariable(--_ctm-dn-rq-id-sw-br)
164
+ prepareMediaVariable(--_ctm-dn-rq-id-sw-sd)
165
+ prepareMediaVariable(--_ctm-dn-rq-id-sw-cr);
166
+ }
167
+
168
+ .status_badge {
169
+ display: flex;
170
+ padding: 2px 8px 2px 6px;
171
+ align-items: center;
172
+ gap: 4px;
173
+ // border-radius: 16px;
174
+ // background: #fff4ed;
175
+ mix-blend-mode: multiply;
176
+ background-color: prepareMediaVariable(--_ctm-dn-rq-ss-bd-cr);
177
+ border-width: prepareMediaVariable(--_ctm-dn-rq-ss-br-wh);
178
+ border-color: prepareMediaVariable(--_ctm-dn-rq-ss-br-cr);
179
+ border-style: prepareMediaVariable(--_ctm-dn-rq-ss-br-se);
180
+ border-radius: prepareMediaVariable(--_ctm-dn-rq-ss-br-rs);
181
+ box-shadow: prepareMediaVariable(--_ctm-dn-rq-ss-sw-ae)
182
+ prepareMediaVariable(--_ctm-dn-rq-ss-sw-br)
183
+ prepareMediaVariable(--_ctm-dn-rq-ss-sw-sd)
184
+ prepareMediaVariable(--_ctm-dn-rq-ss-sw-cr);
185
+
186
+ .rfq_status {
187
+ // color: #b93815;
188
+ // text-align: center;
189
+ // font-size: 12px;
190
+ // line-height: 18px;
191
+ font-family: prepareMediaVariable(--_ctm-dn-rq-ss-ft-fy);
192
+ font-size: prepareMediaVariable(--_ctm-dn-rq-ss-ft-se);
193
+ color: prepareMediaVariable(--_ctm-dn-rq-ss-cr);
194
+ font-weight: prepareMediaVariable(--_ctm-dn-rq-ss-ft-wt);
195
+ font-style: prepareMediaVariable(--_ctm-dn-rq-ss-ft-se-ic);
196
+ text-decoration: prepareMediaVariable(--_ctm-dn-rq-ss-ue);
197
+ text-align: prepareMediaVariable(--_ctm-dn-rq-ss-tt-an);
198
+ letter-spacing: prepareMediaVariable(--_ctm-dn-rq-ss-lr-sg);
199
+ line-height: prepareMediaVariable(--_ctm-dn-rq-ss-le-ht);
200
+ }
201
+ }
202
+
203
+ .rfq_updated_date {
204
+ flex: 1 0 0;
205
+ // color: var(--_gray-700);
206
+ // font-size: 12px;
207
+ // font-weight: 400;
208
+ // line-height: 18px;
209
+
210
+ font-family: prepareMediaVariable(--_ctm-dn-rd-on-ft-fy);
211
+ font-size: prepareMediaVariable(--_ctm-dn-rd-on-ft-se);
212
+ color: prepareMediaVariable(--_ctm-dn-rd-on-cr);
213
+ font-weight: prepareMediaVariable(--_ctm-dn-rd-on-ft-wt);
214
+ font-style: prepareMediaVariable(--_ctm-dn-rd-on-ft-se-ic);
215
+ text-decoration: prepareMediaVariable(--_ctm-dn-rd-on-ue);
216
+ text-align: prepareMediaVariable(--_ctm-dn-rd-on-tt-an);
217
+ letter-spacing: prepareMediaVariable(--_ctm-dn-rd-on-lr-sg);
218
+ line-height: prepareMediaVariable(--_ctm-dn-rd-on-le-ht);
219
+ background-color: prepareMediaVariable(--_ctm-dn-rd-on-bd-cr);
220
+ border-width: prepareMediaVariable(--_ctm-dn-rd-on-br-wh);
221
+ border-color: prepareMediaVariable(--_ctm-dn-rd-on-br-cr);
222
+ border-style: prepareMediaVariable(--_ctm-dn-rd-on-br-se);
223
+ border-radius: prepareMediaVariable(--_ctm-dn-rd-on-br-rs);
224
+ box-shadow: prepareMediaVariable(--_ctm-dn-rd-on-sw-ae)
225
+ prepareMediaVariable(--_ctm-dn-rd-on-sw-br)
226
+ prepareMediaVariable(--_ctm-dn-rd-on-sw-sd)
227
+ prepareMediaVariable(--_ctm-dn-rd-on-sw-cr);
228
+ }
229
+
230
+ .rfqs_amount {
231
+ // color: var(--_gray-900);
232
+ // text-align: right;
233
+ // font-size: 14px;
234
+ // font-weight: 600;
235
+ // line-height: 20px;
236
+
237
+ font-family: prepareMediaVariable(--_ctm-dn-rq-id-ft-fy);
238
+ font-size: prepareMediaVariable(--_ctm-dn-rq-id-ft-se);
239
+ color: prepareMediaVariable(--_ctm-dn-rq-id-cr);
240
+ font-weight: prepareMediaVariable(--_ctm-dn-rq-id-ft-wt);
241
+ font-style: prepareMediaVariable(--_ctm-dn-rq-id-ft-se-ic);
242
+ text-decoration: prepareMediaVariable(--_ctm-dn-rq-id-ue);
243
+ text-align: prepareMediaVariable(--_ctm-dn-rq-id-tt-an);
244
+ letter-spacing: prepareMediaVariable(--_ctm-dn-rq-id-lr-sg);
245
+ line-height: prepareMediaVariable(--_ctm-dn-rq-id-le-ht);
246
+ background-color: prepareMediaVariable(--_ctm-dn-rq-id-bd-cr);
247
+ border-width: prepareMediaVariable(--_ctm-dn-rq-id-br-wh);
248
+ border-color: prepareMediaVariable(--_ctm-dn-rq-id-br-cr);
249
+ border-style: prepareMediaVariable(--_ctm-dn-rq-id-br-se);
250
+ border-radius: prepareMediaVariable(--_ctm-dn-rq-id-br-rs);
251
+ box-shadow: prepareMediaVariable(--_ctm-dn-rq-id-sw-ae)
252
+ prepareMediaVariable(--_ctm-dn-rq-id-sw-br)
253
+ prepareMediaVariable(--_ctm-dn-rq-id-sw-sd)
254
+ prepareMediaVariable(--_ctm-dn-rq-id-sw-cr);
255
+ }
256
+ }
257
+ .rfq_action {
258
+ display: flex;
259
+ align-items: center;
260
+ gap: 16px;
261
+ flex: 1 0 0;
262
+ align-self: stretch;
263
+ font-size: 14px;
264
+ .rfq_send span svg {
265
+ path {
266
+ stroke: var(
267
+ --_ctm-mob-dn-in-as-sd-me-in-in-cr,
268
+ var(--_ctm-tab-dn-in-as-sd-me-in-in-cr, var(--_ctm-dn-in-as-sd-me-in-in-cr))
269
+ );
270
+ }
271
+
272
+ width: var(
273
+ --_ctm-mob-dn-in-as-sd-me-in-in-se,
274
+ var(--_ctm-tab-dn-in-as-sd-me-in-in-se, var(--_ctm-dn-in-as-sd-me-in-in-se))
275
+ );
276
+ height: var(
277
+ --_ctm-mob-dn-in-as-sd-me-in-in-se,
278
+ var(--_ctm-tab-dn-in-as-sd-me-in-in-se, var(--_ctm-dn-in-as-sd-me-in-in-se))
279
+ );
280
+ }
281
+ .rfq_download span svg {
282
+ path {
283
+ stroke: var(
284
+ --_ctm-mob-dn-in-as-dd-in-in-cr,
285
+ var(--_ctm-tab-dn-in-as-dd-in-in-cr, var(--_ctm-dn-in-as-dd-in-in-cr))
286
+ );
287
+ }
288
+
289
+ width: var(
290
+ --_ctm-mob-dn-in-as-dd-in-in-se,
291
+ var(--_ctm-tab-dn-in-as-dd-in-in-se, var(--_ctm-dn-in-as-dd-in-in-se))
292
+ );
293
+ height: var(
294
+ --_ctm-mob-dn-in-as-dd-in-in-se,
295
+ var(--_ctm-tab-dn-in-as-dd-in-in-se, var(--_ctm-dn-in-as-dd-in-in-se))
296
+ );
297
+ }
298
+ .rfq_print span svg {
299
+ path {
300
+ stroke: var(
301
+ --_ctm-mob-dn-in-as-pt-in-in-cr,
302
+ var(--_ctm-tab-dn-in-as-pt-in-in-cr, var(--_ctm-dn-in-as-pt-in-in-cr))
303
+ );
304
+ }
305
+
306
+ width: var(
307
+ --_ctm-mob-dn-in-as-pt-in-in-se,
308
+ var(--_ctm-tab-dn-in-as-pt-in-in-se, var(--_ctm-dn-in-as-pt-in-in-se))
309
+ );
310
+ height: var(
311
+ --_ctm-mob-dn-in-as-pt-in-in-se,
312
+ var(--_ctm-tab-dn-in-as-pt-in-in-se, var(--_ctm-dn-in-as-pt-in-in-se))
313
+ );
314
+ }
315
+ .rfq_view span svg {
316
+ path {
317
+ stroke: var(
318
+ --_ctm-mob-dn-in-as-vw-in-in-cr,
319
+ var(--_ctm-tab-dn-in-as-vw-in-in-cr, var(--_ctm-dn-in-as-vw-in-in-cr))
320
+ );
321
+ }
322
+
323
+ width: var(
324
+ --_ctm-mob-dn-in-as-vw-in-in-se,
325
+ var(--_ctm-tab-dn-in-as-vw-in-in-se, var(--_ctm-dn-in-as-vw-in-in-se))
326
+ );
327
+ height: var(
328
+ --_ctm-mob-dn-in-as-vw-in-in-se,
329
+ var(--_ctm-tab-dn-in-as-vw-in-in-se, var(--_ctm-dn-in-as-vw-in-in-se))
330
+ );
331
+ }
332
+ .rfq_cancel span svg {
333
+ path {
334
+ stroke: var(
335
+ --_ctm-mob-dn-in-as-cl-in-in-cr,
336
+ var(--_ctm-tab-dn-in-as-cl-in-in-cr, var(--_ctm-dn-in-as-cl-in-in-cr))
337
+ );
338
+ }
339
+
340
+ width: var(
341
+ --_ctm-mob-dn-in-as-cl-in-in-se,
342
+ var(--_ctm-tab-dn-in-as-cl-in-in-se, var(--_ctm-dn-in-as-cl-in-in-se))
343
+ );
344
+ height: var(
345
+ --_ctm-mob-dn-in-as-cl-in-in-se,
346
+ var(--_ctm-tab-dn-in-as-cl-in-in-se, var(--_ctm-dn-in-as-cl-in-in-se))
347
+ );
348
+ }
349
+ }
350
+ }
351
+ }
352
+ }
353
+ }
354
+
355
+ .embla {
356
+ width: 100%;
357
+ height: auto;
358
+ position: relative;
359
+ display: flex;
360
+ flex-direction: column;
361
+ // overflow: hidden;
362
+
363
+ .embla__viewport {
364
+ width: 100%;
365
+ height: 100%;
366
+ position: relative;
367
+ display: flex;
368
+ flex-direction: column;
369
+
370
+ overflow: hidden;
371
+
372
+ .embla__container {
373
+ width: 100%;
374
+ height: 100%;
375
+ display: grid;
376
+ grid-template-rows: 100%;
377
+
378
+ grid-template-columns: repeat(
379
+ var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
380
+ calc(
381
+ 100% /
382
+ var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
383
+ )
384
+ );
385
+
386
+ grid-auto-flow: column;
387
+ gap: var(--_ctm-mob-lt-sg-bn-is, var(--_ctm-tab-lt-sg-bn-is, var(--_ctm-lt-sg-bn-is)));
388
+
389
+ &[data-control-type="Bottom"][data-slider-control="Arrows"] {
390
+ height: calc(100% - calc(prepareMediaVariable(--_ctm-dn-pn-as-aw-se) + 10px));
391
+ }
392
+
393
+ &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
394
+ height: calc(
395
+ 100% - calc(
396
+ var(
397
+ --_ctm-mob-dn-pn-le-le-ht,
398
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
399
+ ) +
400
+ 20px
401
+ )
402
+ );
403
+ }
404
+
405
+ &[data-control-type="Bottom"][data-slider-control="Dots"] {
406
+ height: calc(
407
+ 100% - calc(
408
+ var(
409
+ --_ctm-mob-dn-pn-ds-dt-se,
410
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
411
+ ) +
412
+ 20px
413
+ )
414
+ );
415
+ }
416
+
417
+ .embla__slide {
418
+ width: 100%;
419
+ height: 100%;
420
+ }
421
+ }
422
+ }
423
+ &:not([data-display-style="Column"]) {
424
+ .embla__container {
425
+ grid-auto-columns: calc(
426
+ 100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
427
+ );
428
+ }
429
+ }
430
+
431
+ &[data-display-style="Grid"][data-scroll-direction="Vertical"] {
432
+ // overflow: unset;
433
+
434
+ .embla__viewport {
435
+ overflow: unset;
436
+ height: 80%;
437
+ flex-grow: 1;
438
+ &:not([data-is-builder-type="true"]) {
439
+ height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
440
+ }
441
+
442
+ .embla__container {
443
+ overflow: unset;
444
+ height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
445
+ // min-height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
446
+
447
+ grid-template-columns: repeat(var(--_ctm-lt-is-pr-rw), 1fr);
448
+ grid-template-rows: unset;
449
+
450
+ grid-auto-flow: row;
451
+
452
+ &[data-overflow-hidden="true"] {
453
+ overflow: hidden;
454
+ }
455
+ }
456
+ }
457
+ }
458
+
459
+ &[data-display-style="Grid"][data-scroll-direction="Horizontal"] {
460
+ .embla__viewport {
461
+ .embla__container {
462
+ grid-template-rows: repeat(
463
+ var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn))),
464
+ calc(
465
+ 100% /
466
+ var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn)))
467
+ )
468
+ );
469
+ }
470
+ }
471
+ }
472
+
473
+ &[data-display-style="Rows"] {
474
+ // overflow: unset;
475
+
476
+ .embla__viewport {
477
+ overflow: unset;
478
+ height: 80%;
479
+ flex-grow: 1;
480
+
481
+ &:not([data-is-builder-type="true"]) {
482
+ height: var(--_ctm-height);
483
+ }
484
+
485
+ .embla__container {
486
+ overflow: hidden;
487
+ height: var(--_ctm-height);
488
+ // min-height: var(--_ctm-height);
489
+
490
+ grid-template-columns: repeat(
491
+ var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))),
492
+ 1fr
493
+ );
494
+ grid-template-rows: unset;
495
+ grid-auto-flow: row;
496
+ }
497
+ }
498
+ }
499
+
500
+ &[data-display-style="Column"] {
501
+ // overflow: unset;
502
+
503
+ .embla__viewport {
504
+ .embla__container {
505
+ display: flex;
506
+ .embla__slide {
507
+ width: unset;
508
+ height: 100%;
509
+ aspect-ratio: 1 / 2;
510
+ }
511
+ }
512
+ }
513
+ }
514
+
515
+ .arrow-navigation {
516
+ display: flex;
517
+ position: absolute;
518
+ top: 50%;
519
+ left: 50%;
520
+ width: 100%;
521
+ justify-content: space-between;
522
+ transform: translate(-50%, -50%);
523
+ // padding-left: 20px;
524
+ &[data-control-type="Side"] {
525
+ .left-button,
526
+ .right-button {
527
+ background-color: transparent;
528
+ }
529
+ }
530
+ &[data-background-shape="Round"] {
531
+ .left-button,
532
+ .right-button {
533
+ // background-color: #f2f5f5;
534
+ background-color: prepareMediaVariable(--_ctm-dn-pn-as-bd-cr);
535
+ box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
536
+ }
537
+ }
538
+ &[data-control-type="Bottom-Overflow"] {
539
+ transform: translateX(-50%);
540
+ width: 100%;
541
+ justify-content: center;
542
+ gap: 12px;
543
+ top: unset;
544
+ bottom: 6px;
545
+ }
546
+ &[data-control-type="Bottom"] {
547
+ transform: unset;
548
+ position: static;
549
+ width: 100%;
550
+ justify-content: center;
551
+ gap: 12px;
552
+ margin-top: 10px;
553
+ }
554
+ &[data-control-type="Top"] {
555
+ top: 0px;
556
+ position: absolute;
557
+ /* right: 0px; */
558
+ justify-content: end;
559
+ width: 170px;
560
+ transform: unset;
561
+ gap: 12px;
562
+ margin-top: 10px;
563
+ }
564
+ .left-button {
565
+ padding: 10px;
566
+ border-radius: 50%;
567
+ border: none;
568
+ width: prepareMediaVariable(--_ctm-dn-pn-as-aw-se);
569
+ height: prepareMediaVariable(--_ctm-dn-pn-as-aw-se);
570
+ display: flex;
571
+ align-items: center;
572
+ justify-content: center;
573
+ cursor: pointer;
574
+ outline: none;
575
+ margin-left: 12px;
576
+ &:disabled {
577
+ & svg {
578
+ path {
579
+ stroke: rgb(192, 192, 192);
580
+ }
581
+ }
582
+ }
583
+ }
584
+ .right-button {
585
+ border-radius: 50%;
586
+ border: none;
587
+ width: prepareMediaVariable(--_ctm-dn-pn-as-aw-se);
588
+ height: prepareMediaVariable(--_ctm-dn-pn-as-aw-se);
589
+
590
+ display: flex;
591
+ align-items: center;
592
+ justify-content: center;
593
+ cursor: pointer;
594
+ outline: none;
595
+ margin-right: 12px;
596
+ padding: 10px;
597
+
598
+ &:disabled {
599
+ & svg {
600
+ path {
601
+ stroke: rgb(192, 192, 192);
602
+ }
603
+ }
604
+ }
605
+ }
606
+ .icon {
607
+ display: flex;
608
+
609
+ svg {
610
+ width: calc(prepareMediaVariable(--_ctm-dn-pn-as-aw-se) * 0.5);
611
+ height: calc(prepareMediaVariable(--_ctm-dn-pn-as-aw-se) * 0.5);
612
+
613
+ path {
614
+ stroke: prepareMediaVariable(--_ctm-dn-pn-as-aw-cr);
615
+ }
616
+ }
617
+ }
618
+ }
619
+
620
+ &[data-control-type="Side"] {
621
+ .embla__viewport {
622
+ width: calc(100% - 120px);
623
+ margin-inline: auto;
624
+ }
625
+ .left-button {
626
+ position: absolute;
627
+ left: 0;
628
+ top: 50%;
629
+ transform: translateY(-50%);
630
+ }
631
+ .right-button {
632
+ position: absolute;
633
+
634
+ right: 0;
635
+ top: 50%;
636
+ transform: translateY(-50%);
637
+ }
638
+ }
639
+
640
+ &[data-thumbnail-placement="top"] {
641
+ flex-direction: column-reverse;
642
+ }
643
+ &[data-thumbnail-placement="bottom"] {
644
+ flex-direction: column;
645
+ }
646
+ &[data-thumbnail-placement="left"] {
647
+ flex-direction: row-reverse;
648
+
649
+ .embla__thumbs {
650
+ width: var(--_ctm-lt-tl-se);
651
+ height: 100%;
652
+
653
+ & .embla__thumbs__container {
654
+ flex-direction: column;
655
+ height: 100%;
656
+ }
657
+ }
658
+ }
659
+ &[data-thumbnail-placement="right"] {
660
+ flex-direction: row;
661
+ .embla__thumbs {
662
+ width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
663
+
664
+ height: 100%;
665
+
666
+ & .embla__thumbs__container {
667
+ flex-direction: column;
668
+ height: 100%;
669
+ }
670
+ }
671
+ }
672
+ .embla__dots {
673
+ display: flex;
674
+ flex-wrap: wrap;
675
+ justify-content: center;
676
+ align-items: center;
677
+ margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
678
+ gap: 6px;
679
+
680
+ &[data-control-type="Bottom-Overflow"] {
681
+ position: absolute;
682
+ bottom: 10px;
683
+ left: 50%;
684
+ transform: translateX(-50%);
685
+ width: 75%;
686
+ }
687
+ .embla__dot {
688
+ -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
689
+ -webkit-appearance: none;
690
+ appearance: none;
691
+ background-color: var(
692
+ --_ctm-mob-dn-pn-ds-or-dt-cr,
693
+ var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-dn-pn-ds-or-dt-cr))
694
+ );
695
+
696
+ touch-action: manipulation;
697
+ display: inline-flex;
698
+ text-decoration: none;
699
+ cursor: pointer;
700
+ border: 0;
701
+ padding: 0;
702
+ margin: 0;
703
+ // width: 0.6rem;
704
+ // height: 0.6rem;
705
+ width: var(
706
+ --_ctm-mob-dn-pn-ds-dt-se,
707
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
708
+ );
709
+ height: var(
710
+ --_ctm-mob-dn-pn-ds-dt-se,
711
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
712
+ );
713
+
714
+ display: flex;
715
+ align-items: center;
716
+ justify-content: center;
717
+ border-radius: 50%;
718
+ }
719
+ .embla__dot:after {
720
+ // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
721
+ width: var(
722
+ --_ctm-mob-dn-pn-ds-dt-se,
723
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
724
+ );
725
+ height: var(
726
+ --_ctm-mob-dn-pn-ds-dt-se,
727
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
728
+ );
729
+
730
+ border-radius: 50%;
731
+ display: flex;
732
+ align-items: center;
733
+ content: "";
734
+ }
735
+ .embla__dot--selected:after {
736
+ box-shadow: inset 0 0 0 1px var(--text-body);
737
+ background-color: var(
738
+ --_ctm-mob-dn-pn-ds-ct-dt-cr,
739
+ var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr))
740
+ );
741
+ }
742
+ &[data-slider-control="Pagination Line"] {
743
+ .embla__dot {
744
+ width: var(
745
+ --_ctm-mob-dn-pn-le-le-wh,
746
+ var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
747
+ );
748
+ height: var(
749
+ --_ctm-mob-dn-pn-le-le-ht,
750
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
751
+ );
752
+ background-color: var(
753
+ --_ctm-mob-dn-pn-le-or-le-cr,
754
+ var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr))
755
+ );
756
+ border-radius: 6px;
757
+ }
758
+
759
+ .embla__dot--selected:after {
760
+ box-shadow: inset 0 0 0 1px var(--text-body);
761
+ border-radius: 6px;
762
+ width: var(
763
+ --_ctm-mob-dn-pn-le-le-wh,
764
+ var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
765
+ );
766
+ height: var(
767
+ --_ctm-mob-dn-pn-le-le-ht,
768
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
769
+ );
770
+ background-color: var(
771
+ --_ctm-mob-dn-pn-le-ct-le-cr,
772
+ var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr))
773
+ );
774
+ }
775
+ }
776
+ }
777
+
778
+ .embla__thumbs {
779
+ width: 100%;
780
+ height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
781
+
782
+ position: relative;
783
+ display: grid;
784
+ grid-template-columns: 1fr;
785
+ overflow: hidden;
786
+ // margin: 10px;
787
+ padding: 10px;
788
+
789
+ .embla__thumbs__viewport {
790
+ width: 100%;
791
+ height: 100%;
792
+ position: relative;
793
+ display: flex;
794
+ flex-direction: column;
795
+
796
+ overflow: hidden;
797
+ }
798
+ .embla__thumbs__container {
799
+ display: flex;
800
+ flex-direction: row;
801
+ margin-left: calc(var(--thumbs-slide-spacing) * -1);
802
+ gap: var(--_ctm-mob-lt-tl-sg, var(--_ctm-tab-lt-tl-sg, var(--_ctm-lt-tl-sg)));
803
+
804
+ width: 100%;
805
+ // justify-content: center;
806
+ // height: 200px;
807
+
808
+ .embla__thumbs__slide {
809
+ min-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
810
+ max-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
811
+ height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
812
+
813
+ & img {
814
+ width: 100%;
815
+ height: 100%;
816
+ }
817
+ }
818
+ }
819
+ }
820
+ }
821
+ }
822
+ }