@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,510 +0,0 @@
1
- .table__wrapper {
2
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg, var(--_tst-lt-pg))));
3
-
4
- // background-color: var(
5
- // --_ctm-mob-dn-te-wt-bd-cr,
6
- // var(--_ctm-tab-dn-te-wt-bd-cr, var(--_ctm-dn-te-wt-bd-cr, var(--_tst-dn-te-wt-bd-cr)))
7
- // );
8
-
9
- height: 100%;
10
-
11
- border-radius: var(
12
- --_ctm-mob-dn-te-wt-br-rs,
13
- var(--_ctm-tab-dn-te-wt-br-rs, var(--_ctm-dn-te-wt-br-rs, var(--_tst-dn-te-wt-br-rs)))
14
- );
15
-
16
- box-shadow: var(
17
- --_show-shadow,
18
- var(--_ctm-mob-dn-te-wt-sw-ae, var(--_ctm-tab-dn-te-wt-sw-ae, var(--_ctm-dn-te-wt-sw-ae)))
19
- var(--_ctm-mob-dn-te-wt-sw-br, var(--_ctm-tab-dn-te-wt-sw-br, var(--_ctm-dn-te-wt-sw-br)))
20
- var(--_ctm-mob-dn-te-wt-sw-sd, var(--_ctm-tab-dn-te-wt-sw-sd, var(--_ctm-dn-te-wt-sw-sd)))
21
- var(--_ctm-mob-dn-te-wt-sw-cr, var(--_ctm-tab-dn-te-wt-sw-cr, var(--_ctm-dn-te-wt-sw-cr)))
22
- );
23
-
24
- width: 100%;
25
-
26
- &[data-header-divider="true"] {
27
- thead tr th {
28
- border-bottom: 1px solid
29
- var(
30
- --_ctm-mob-dn-rw-ad-hr-ds-hr-dr,
31
- var(--_ctm-tab-dn-rw-ad-hr-ds-hr-dr, var(--_ctm-dn-rw-ad-hr-ds-hr-dr))
32
- );
33
- }
34
- }
35
- &[data-row-divider="true"] {
36
- tbody tr td {
37
- border-bottom: 1px solid
38
- var(
39
- --_ctm-mob-dn-rw-ad-hr-ds-rw-dr,
40
- var(--_ctm-tab-dn-rw-ad-hr-ds-rw-dr, var(--_ctm-dn-rw-ad-hr-ds-rw-dr))
41
- );
42
- }
43
- }
44
- &[data-column-divider="true"] {
45
- tbody tr td,
46
- thead tr th {
47
- border-right: 1px solid
48
- var(
49
- --_ctm-mob-dn-rw-ad-hr-ds-cn-dr,
50
- var(--_ctm-tab-dn-rw-ad-hr-ds-cn-dr, var(--_ctm-dn-rw-ad-hr-ds-cn-dr))
51
- );
52
- }
53
-
54
- tbody tr td:last-child,
55
- thead tr th:last-child {
56
- border-right: none;
57
- }
58
- }
59
- &[data-show-more-rows="onScroll"] {
60
- .table__container {
61
- overflow-y: auto;
62
-
63
- &::-webkit-scrollbar {
64
- width: var(
65
- --_ctm-mob-dn-sl-br-sl-br-wh,
66
- var(--_ctm-tab-dn-sl-br-sl-br-wh, var(--_ctm-dn-sl-br-sl-br-wh))
67
- );
68
- }
69
-
70
- &::-webkit-scrollbar-track {
71
- background-color: var(--_base-white);
72
- }
73
-
74
- &::-webkit-scrollbar-thumb {
75
- background-color: var(
76
- --_ctm-mob-dn-sl-br-sl-br-cr,
77
- var(--_ctm-tab-dn-sl-br-sl-br-cr, var(--_ctm-dn-sl-br-sl-br-cr))
78
- );
79
- }
80
-
81
- // // Scrollbar thumb when hovered
82
- // &::-webkit-scrollbar-thumb:hover {
83
- // background-color: #555; // Darker color when hovering over the thumb
84
- // }
85
-
86
- // // For Firefox, using scrollbar-width and scrollbar-color
87
- // scrollbar-width: thin; // Thin scrollbar
88
- // scrollbar-color: #888 #f1f1f1; // Thumb and track colors
89
- }
90
- }
91
-
92
- &[data-alternative-row-colors="true"] {
93
- tbody .tbody__row__divider:nth-child(odd) {
94
- background-color: #f76b6b;
95
- }
96
- }
97
-
98
- .table__container {
99
- background-color: var(
100
- --_ctm-mob-dn-te-bd-cr,
101
- var(--_ctm-tab-dn-te-bd-cr, var(--_ctm-dn-te-bd-cr))
102
- );
103
-
104
- border-radius: var(
105
- --_ctm-mob-dn-te-br-rs,
106
- var(--_ctm-tab-dn-te-br-rs, var(--_ctm-dn-te-br-rs))
107
- );
108
-
109
- box-shadow: var(
110
- --_show-table-shadow,
111
- var(--_ctm-mob-dn-te-sw-ae, var(--_ctm-tab-dn-te-sw-ae, var(--_ctm-dn-te-sw-ae)))
112
- var(--_ctm-mob-dn-te-sw-br, var(--_ctm-tab-dn-te-sw-br, var(--_ctm-dn-te-sw-br)))
113
- var(--_ctm-mob-dn-te-sw-sd, var(--_ctm-tab-dn-te-sw-sd, var(--_ctm-dn-te-sw-sd)))
114
- var(--_ctm-mob-dn-te-sw-cr, var(--_ctm-tab-dn-te-sw-cr, var(--_ctm-dn-te-sw-cr)))
115
- );
116
- }
117
-
118
- h3 {
119
- text-align: center;
120
- width: 100%;
121
- margin-bottom: 10px;
122
- }
123
- table {
124
- border-collapse: collapse;
125
- // border: none;
126
- width: 100%;
127
- // height: 100%;
128
- text-align: var(--_ctm-mob-lt-ct-at, var(--_ctm-tab-lt-ct-at, var(--_ctm-lt-ct-at)));
129
-
130
- th,
131
- td {
132
- border: none;
133
- }
134
- thead {
135
- background-color: var(
136
- --_ctm-mob-dn-te-hr-bd-cr,
137
- var(--_ctm-tab-dn-te-hr-bd-cr, var(--_ctm-dn-te-hr-bd-cr))
138
- );
139
-
140
- .thead__row__divider {
141
- height: var(--_ctm-mob-lt-hr-ht, var(--_ctm-tab-lt-hr-ht, var(--_ctm-lt-hr-ht)));
142
-
143
- .th__col__divider {
144
- padding: var(
145
- --_ctm-mob-lt-hr-cl-pg,
146
- var(--_ctm-tab-lt-hr-cl-pg, var(--_ctm-lt-hr-cl-pg))
147
- );
148
-
149
- color: var(--_ctm-mob-dn-hr-tt-cr, var(--_ctm-tab-dn-hr-tt-cr, var(--_ctm-dn-hr-tt-cr)));
150
-
151
- font-family: var(
152
- --_ctm-mob-dn-hr-tt-ft-fy,
153
- var(--_ctm-tab-dn-hr-tt-ft-fy, var(--_ctm-dn-hr-tt-ft-fy))
154
- ),
155
- sans-serif;
156
-
157
- font-size: var(
158
- --_ctm-mob-dn-hr-tt-ft-se,
159
- var(--_ctm-tab-dn-hr-tt-ft-se, var(--_ctm-dn-hr-tt-ft-se))
160
- );
161
-
162
- font-weight: var(
163
- --_ctm-mob-dn-hr-tt-ft-wt,
164
- var(--_ctm-tab-dn-hr-tt-ft-wt, var(--_ctm-dn-hr-tt-ft-wt))
165
- );
166
-
167
- text-decoration: var(
168
- --_ctm-mob-dn-hr-tt-ue,
169
- var(--_ctm-tab-dn-hr-tt-ue, var(--_ctm-dn-hr-tt-ue))
170
- );
171
-
172
- font-style: var(
173
- --_ctm-mob-dn-hr-tt-ft-se-ic,
174
- var(--_ctm-tab-dn-hr-tt-ft-se-ic, var(--_ctm-dn-hr-tt-ft-se-ic))
175
- );
176
-
177
- text-align: var(
178
- --_ctm-mob-dn-hr-tt-tt-an,
179
- var(--_ctm-tab-dn-hr-tt-tt-an, var(--_ctm-dn-hr-tt-tt-an))
180
- );
181
-
182
- letter-spacing: var(
183
- --_ctm-mob-dn-hr-tt-lr-sg,
184
- var(--_ctm-tab-dn-hr-tt-lr-sg, var(--_ctm-dn-hr-tt-lr-sg))
185
- );
186
-
187
- line-height: var(
188
- --_ctm-mob-dn-hr-tt-le-ht,
189
- var(--_ctm-tab-dn-hr-tt-le-ht, var(--_ctm-dn-hr-tt-le-ht))
190
- );
191
- }
192
- }
193
- }
194
- tbody {
195
- .tbody__row__divider {
196
- background-color: var(
197
- --_ctm-mob-dn-te-rw-bd-cr,
198
- var(--_ctm-tab-dn-te-rw-bd-cr, var(--_ctm-dn-te-rw-bd-cr))
199
- );
200
-
201
- height: var(--_ctm-mob-lt-rw-ht, var(--_ctm-tab-lt-rw-ht, var(--_ctm-lt-rw-ht)));
202
-
203
- .td__col__divider {
204
- padding: var(
205
- --_ctm-mob-lt-rw-cl-pg,
206
- var(--_ctm-tab-lt-rw-cl-pg, var(--_ctm-lt-rw-cl-pg))
207
- );
208
-
209
- color: var(
210
- --_sf-hr-fc,
211
- var(--_ctm-mob-dn-rw-tt-cr, var(--_ctm-tab-dn-rw-tt-cr, var(--_ctm-dn-rw-tt-cr)))
212
- );
213
-
214
- font-family: var(
215
- --_sf-hr-ff,
216
- var(
217
- --_ctm-mob-dn-rw-tt-ft-fy,
218
- var(--_ctm-tab-dn-rw-tt-ft-fy, var(--_ctm-dn-rw-tt-ft-fy))
219
- )
220
- ),
221
- sans-serif;
222
-
223
- font-size: var(
224
- --_sf-hr-fs,
225
- var(
226
- --_ctm-mob-dn-rw-tt-ft-se,
227
- var(--_ctm-tab-dn-rw-tt-ft-se, var(--_ctm-dn-rw-tt-ft-se))
228
- )
229
- );
230
-
231
- text-decoration: var(
232
- --_ctm-mob-dn-rw-tt-ue,
233
- var(--_ctm-tab-dn-rw-tt-ue, var(--_ctm-dn-rw-tt-ue))
234
- );
235
-
236
- font-weight: var(
237
- --_sf-hr-fw,
238
- var(
239
- --_ctm-mob-dn-rw-tt-ft-wt,
240
- var(--_ctm-tab-dn-rw-tt-ft-wt, var(--_ctm-dn-rw-tt-ft-wt))
241
- )
242
- );
243
-
244
- font-style: var(
245
- --_sf-hr-ft,
246
- var(
247
- --_ctm-mob-dn-rw-tt-ft-se-ic,
248
- var(--_ctm-tab-dn-rw-tt-ft-se-ic, var(--_ctm-dn-rw-tt-ft-se-ic))
249
- )
250
- );
251
-
252
- text-align: var(
253
- --_sf-hr-ta,
254
- var(
255
- --_ctm-mob-dn-rw-tt-tt-an,
256
- var(--_ctm-tab-dn-rw-tt-tt-an, var(--_ctm-dn-rw-tt-tt-an))
257
- )
258
- );
259
-
260
- letter-spacing: var(
261
- --_sf-hr-ls,
262
- var(
263
- --_ctm-mob-dn-rw-tt-lr-sg,
264
- var(--_ctm-tab-dn-rw-tt-lr-sg, var(--_ctm-dn-rw-tt-lr-sg))
265
- )
266
- );
267
-
268
- line-height: var(
269
- --_sf-hr-lh,
270
- var(
271
- --_ctm-mob-dn-rw-tt-le-ht,
272
- var(--_ctm-tab-dn-rw-tt-le-ht, var(--_ctm-dn-rw-tt-le-ht))
273
- )
274
- );
275
- }
276
- }
277
- }
278
- }
279
-
280
- .pagination {
281
- display: var(--_d-flex);
282
- align-items: var(--_align-center);
283
- justify-content: var(--_ctm-mob-lt-pn-at, var(--_ctm-tab-lt-pn-at, var(--_ctm-lt-pn-at)));
284
- margin-top: 10px;
285
- background-color: var(
286
- --_sf-bd-cr,
287
- var(
288
- --_ctm-mob-dn-pn-dt-se-bd-cr,
289
- var(--_ctm-tab-dn-pn-dt-se-bd-cr, var(--_ctm-dn-pn-dt-se-bd-cr))
290
- )
291
- );
292
- &.pagination__center {
293
- justify-content: var(justify-center);
294
- }
295
-
296
- button {
297
- svg {
298
- width: var(--_width-18);
299
- height: var(--_height-18);
300
- path {
301
- stroke: var(--_gray-500);
302
- // stroke: var(--_ctm-dn-pn-in-c1, var(--_tst-dn-pn-in-c1));
303
- }
304
- }
305
- }
306
- span {
307
- float: left;
308
- padding: var(--_pd-8) var(--_pd-16);
309
- text-decoration: none;
310
- span {
311
- // color: var(--_sf-hr-fc, var(--_ctm-dn-pn-bn-cr, var(--_tst-dn-pn-bn-cr)));
312
- // font-size: var(--_sf-hr-fs, var(--_ctm-dn-pn-ft-se, var(--_tst-dn-pn-ft-se)));
313
- // font-family: var(--_sf-hr-ff, var(--_ctm-dn-pn-ft-fy, var(--_tst-dn-pn-ft-fy))),
314
- // sans-serif;
315
- // font-weight: var(--_sf-hr-fw, var(--_ctm-dn-pn-ft-wt, var(--_tst-dn-pn-ft-wt)));
316
- // font-style: var(--_sf-hr-ft, var(--_ctm-dn-pn-ft-se-ic, var(--_tst-dn-pn-ft-se-ic)));
317
- // text-align: var(--_sf-hr-ta, var(--_ctm-dn-pn-tt-an, var(--_tst-dn-pn-tt-an)));
318
- // letter-spacing: var(--_sf-hr-ls, var(--_ctm-dn-pn-lr-sg, var(--_tst-dn-pn-lr-sg)));
319
- // line-height: var(--_sf-hr-lh, var(--_ctm-dn-pn-le-ht, var(--_tst-dn-pn-le-ht)));
320
- }
321
- &.active:hover {
322
- &hover {
323
- --_sf-hr-fc: var(--_ctm-dn-pn-hr-se-cr, var(--_tst-dn-pn-hr-se-cr));
324
- --_sf-hr-ff: var(--_ctm-dn-pn-hr-se-ft-fy, var(--_tst-dn-pn-hr-se-ft-fy));
325
- --_sf-hr-fs: var(--_ctm-dn-pn-hr-se-ft-se, var(--_tst-dn-pn-hr-se-ft-se));
326
- --_sf-hr-fw: var(--_ctm-dn-pn-hr-se-ft-wt, var(--_tst-dn-pn-hr-se-ft-wt));
327
- --_sf-hr-ft: var(--_ctm-dn-pn-hr-se-ft-se-ic, var(--_tst-dn-pn-hr-se-ft-se-ic));
328
- --_sf-hr-ta: var(--_ctm-dn-pn-hr-se-tt-an, var(--_tst-dn-pn-hr-se-tt-an));
329
- --_sf-hr-ls: var(--_ctm-dn-pn-hr-se-lr-sg, var(--_tst-dn-pn-hr-se-lr-sg));
330
- --_sf-hr-lh: var(--_ctm-dn-pn-hr-se-le-ht, var(--_tst-dn-pn-hr-se-le-ht));
331
- }
332
- }
333
- &.active {
334
- color: var(
335
- --_sf-hr-fc,
336
- var(--_ctm-mob-dn-pn-dt-se-cr, var(--_ctm-tab-dn-pn-dt-se-cr, var(--_ctm-dn-pn-dt-se-cr)))
337
- );
338
-
339
- font-family: var(
340
- --_sf-hr-ff,
341
- var(
342
- --_ctm-mob-dn-pn-dt-se-ft-fy,
343
- var(--_ctm-tab-dn-pn-dt-se-ft-fy, var(--_ctm-dn-pn-dt-se-ft-fy))
344
- )
345
- ),
346
- sans-serif;
347
-
348
- font-size: var(
349
- --_sf-hr-fs,
350
- var(
351
- --_ctm-mob-dn-pn-dt-se-ft-se,
352
- var(--_ctm-tab-dn-pn-dt-se-ft-se, var(--_ctm-dn-pn-dt-se-ft-se))
353
- )
354
- );
355
-
356
- text-decoration: var(
357
- --_sf-hr-td,
358
- var(--_ctm-mob-dn-pn-dt-se-ue, var(--_ctm-tab-dn-pn-dt-se-ue, var(--_ctm-dn-pn-dt-se-ue)))
359
- );
360
-
361
- font-weight: var(
362
- --_sf-hr-fw,
363
- var(
364
- --_ctm-mob-dn-pn-dt-se-ft-wt,
365
- var(--_ctm-tab-dn-pn-dt-se-ft-wt, var(--_ctm-dn-pn-dt-se-ft-wt))
366
- )
367
- );
368
-
369
- font-style: var(
370
- --_sf-hr-ft,
371
- var(
372
- --_ctm-mob-dn-pn-dt-se-ft-se-ic,
373
- var(--_ctm-tab-dn-pn-dt-se-ft-se-ic, var(--_ctm-dn-pn-dt-se-ft-se-ic))
374
- )
375
- );
376
-
377
- text-align: var(
378
- --_sf-hr-ta,
379
- var(
380
- --_ctm-mob-dn-pn-dt-se-tt-an,
381
- var(--_ctm-tab-dn-pn-dt-se-tt-an, var(--_ctm-dn-pn-dt-se-tt-an))
382
- )
383
- );
384
-
385
- letter-spacing: var(
386
- --_sf-hr-ls,
387
- var(
388
- --_ctm-mob-dn-pn-dt-se-lr-sg,
389
- var(--_ctm-tab-dn-pn-dt-se-lr-sg, var(--_ctm-dn-pn-dt-se-lr-sg))
390
- )
391
- );
392
-
393
- line-height: var(
394
- --_sf-hr-lh,
395
- var(
396
- --_ctm-mob-dn-pn-dt-se-le-ht,
397
- var(--_ctm-tab-dn-pn-dt-se-le-ht, var(--_ctm-dn-pn-dt-se-le-ht))
398
- )
399
- );
400
- }
401
- }
402
- .pagination__arrows {
403
- color: var(
404
- --_sf-hr-fc,
405
- var(--_ctm-mob-dn-pn-in-c1, var(--_ctm-tab-dn-pn-in-c1, var(--_ctm-dn-pn-in-c1)))
406
- );
407
-
408
- font-size: var(
409
- --_sf-hr-fs,
410
- var(--_ctm-mob-dn-pn-in-se, var(--_ctm-tab-dn-pn-in-se, var(--_ctm-dn-pn-in-se)))
411
- );
412
- }
413
- }
414
-
415
- .load__more {
416
- margin: 10px;
417
- background-color: var(
418
- --_sf-hr-bd-cr,
419
- var(
420
- --_ctm-mob-dn-ld-me-bn-bd-cr,
421
- var(--_ctm-tab-dn-ld-me-bn-bd-cr, var(--_ctm-dn-ld-me-bn-bd-cr))
422
- )
423
- );
424
- border-radius: var(
425
- --_sf-hr-br-br,
426
- var(
427
- --_ctm-mob-dn-ld-me-bn-br-rs,
428
- var(--_ctm-tab-dn-ld-me-bn-br-rs, var(--_ctm-dn-ld-me-bn-br-rs))
429
- )
430
- );
431
-
432
- h3 {
433
- color: var(
434
- --_sf-hr-fc,
435
- var(--_ctm-mob-dn-ld-me-bn-cr, var(--_ctm-tab-dn-ld-me-bn-cr, var(--_ctm-dn-ld-me-bn-cr)))
436
- );
437
- font-family: var(
438
- --_sf-hr-ff,
439
- var(
440
- --_ctm-mob-dn-ld-me-bn-ft-fy,
441
- var(--_ctm-tab-dn-ld-me-bn-ft-fy, var(--_ctm-dn-ld-me-bn-ft-fy))
442
- )
443
- ),
444
- sans-serif;
445
- font-size: var(
446
- --_sf-hr-fs,
447
- var(
448
- --_ctm-mob-dn-ld-me-bn-ft-se,
449
- var(--_ctm-tab-dn-ld-me-bn-ft-se, var(--_ctm-dn-ld-me-bn-ft-se))
450
- )
451
- );
452
-
453
- text-decoration: var(
454
- --_ctm-mob-dn-ld-me-bn-ue,
455
- var(--_ctm-tab-dn-ld-me-bn-ue, var(--_ctm-dn-ld-me-bn-ue))
456
- );
457
-
458
- font-weight: var(
459
- --_sf-hr-fw,
460
- var(
461
- --_ctm-mob-dn-ld-me-bn-ft-wt,
462
- var(--_ctm-tab-dn-ld-me-bn-ft-wt, var(--_ctm-dn-ld-me-bn-ft-wt))
463
- )
464
- );
465
-
466
- font-style: var(
467
- --_sf-hr-ft,
468
- var(
469
- --_ctm-mob-dn-ld-me-bn-ft-se-ic,
470
- var(--_ctm-tab-dn-ld-me-bn-ft-se-ic, var(--_ctm-dn-ld-me-bn-ft-se-ic))
471
- )
472
- );
473
-
474
- text-align: var(
475
- --_sf-hr-ta,
476
- var(
477
- --_ctm-mob-dn-ld-me-bn-tt-an,
478
- var(--_ctm-tab-dn-ld-me-bn-tt-an, var(--_ctm-dn-ld-me-bn-tt-an))
479
- )
480
- );
481
-
482
- letter-spacing: var(
483
- --_sf-hr-ls,
484
- var(
485
- --_ctm-mob-dn-ld-me-bn-lr-sg,
486
- var(--_ctm-tab-dn-ld-me-bn-lr-sg, var(--_ctm-dn-ld-me-bn-lr-sg))
487
- )
488
- );
489
-
490
- line-height: var(
491
- --_sf-hr-lh,
492
- var(
493
- --_ctm-mob-dn-ld-me-bn-le-ht,
494
- var(--_ctm-tab-dn-ld-me-bn-le-ht, var(--_ctm-dn-ld-me-bn-le-ht))
495
- )
496
- );
497
- }
498
- // background-color: var(--_primary-400);
499
- // border: 1px solid var(--_primary-400);
500
- // border-radius: var(--_br-6);
501
- // padding: var(--_pd-8) var(--_pd-12);
502
- // color: var(---base-whiet);
503
- // display: inline-block;
504
- // color: var(--_base-white);
505
- // margin: 0 auto;
506
- // width: 150px;
507
- // text-align: center;
508
- // margin-top: 20px;
509
- }
510
- }