@zanichelli/albe-web-components 7.3.6 → 7.3.7

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,1617 +0,0 @@
1
- /* stylelint-disable-next-line import-notation */
2
- @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,700;1,700&display=swap");
3
- @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");
4
- :root {
5
- --myz-blue: #0056c1;
6
- --myz-blue-dark: #003476;
7
- --myz-blue-light: #1973e1;
8
- --myz-blue-lighter: #e1f0ff;
9
- --myz-red: #e2001a;
10
- --myz-red-dark: #80000f;
11
- --myz-red-light: #ff808e;
12
- --accent: #add2ff;
13
- --accent-dark: #78b5ff;
14
- --accent-light: #d0e9ff;
15
- --accent-lighter: #ebf4ff;
16
- --bg-grey-050: #f6f6f6;
17
- --bg-grey-200: #e6e6e6;
18
- --bg-grey-700: #676b6f;
19
- --bg-grey-800: #424548;
20
- --bg-grey-900: #333333;
21
- --bg-white: #ffffff;
22
- --bg-neutral-100: #e8ebee;
23
- --bg-neutral-150: #d9dee3;
24
- --bg-neutral-200: #cad1d8;
25
- --bg-neutral-300: #aeb8c2;
26
- --bg-neutral-400: #919eac;
27
- --bg-neutral-500: #738596;
28
- --bg-neutral-600: #5c6b7a;
29
- --bg-neutral-700: #46525d;
30
- --bg-neutral-800: #303840;
31
- --status-error-red: #dc3122;
32
- --status-error-red-dark: #7e0a00;
33
- --status-error-red-light: #ff9c9c;
34
- --status-error-red-lighter: #fdefee;
35
- --status-warning-yellow: #f6bb3b;
36
- --status-warning-yellow-dark: #85641a;
37
- --status-warning-yellow-light: #fee17f;
38
- --status-warning-yellow-lighter: #fbf4e6;
39
- --status-success-green: #417505;
40
- --status-success-green-dark: #233a00;
41
- --status-success-green-light: #95d150;
42
- --status-success-green-lighter: #effce0;
43
- --text-grey-800: #424548;
44
- --text-grey-700: #676b6f;
45
- --text-grey-200: #e6e6e6;
46
- --text-grey-050: #f6f6f6;
47
- --text-white: #ffffff;
48
- }
49
-
50
- :root {
51
- --border-base: 2px;
52
- --border-size-small: 1px;
53
- --radius-base: 4px;
54
- --border-radius-base: 4px;
55
- --border-radius-min: 0;
56
- --border-radius-max: 100%;
57
- }
58
-
59
- :root {
60
- --shadow-inset-2: inset 0 2px 4px 0 rgba(66, 69, 72, 0.35);
61
- --shadow-inset-4: inset 0 4px 8px 0 rgba(66, 69, 72, 0.35);
62
- --shadow-0: 0 0 0 0 rgba(66, 69, 72, 0.40);
63
- --shadow-1: 0 1px 2px 0 rgba(66, 69, 72, 0.40);
64
- --shadow-2: 0 2px 4px 0 rgba(66, 69, 72, 0.40);
65
- --shadow-3: 0 3px 6px 0 rgba(66, 69, 72, 0.40);
66
- --shadow-4: 0 4px 8px 0 rgba(66, 69, 72, 0.40);
67
- --shadow-6: 0 6px 12px 0 rgba(66, 69, 72, 0.40);
68
- --shadow-8: 0 8px 16px 0 rgba(66, 69, 72, 0.40);
69
- --shadow-12: 0 12px 24px 0 rgba(66, 69, 72, 0.35);
70
- --shadow-16: 0 16px 32px 0 rgba(66, 69, 72, 0.35);
71
- --shadow-24: 0 24px 48px 0 rgba(66, 69, 72, 0.35);
72
- }
73
-
74
- :root {
75
- --basex1: var(--space-unit);
76
- --basex2: calc(var(--space-unit) * 2);
77
- --basex3: calc(var(--space-unit) * 3);
78
- --basex4: calc(var(--space-unit) * 4);
79
- --basex5: calc(var(--space-unit) * 5);
80
- --basex6: calc(var(--space-unit) * 6);
81
- --basex7: calc(var(--space-unit) * 7);
82
- --basex8: calc(var(--space-unit) * 8);
83
- --half-x1: calc(var(--space-unit) * .5);
84
- --half-x3: calc(var(--space-unit) * 1.5);
85
- --half-x5: calc(var(--space-unit) * 2.5);
86
- --half-x7: calc(var(--space-unit) * 3.5);
87
- --half-x9: calc(var(--space-unit) * 4.5);
88
- --half-x11: calc(var(--space-unit) * 5.5);
89
- --half-x13: calc(var(--space-unit) * 6.5);
90
- --half-x14: calc(var(--space-unit) * 7.5);
91
- }
92
-
93
- /* Backward compatibility classes.
94
- This is the old `global-text.css` file from `design-system` repo.
95
- New tokens and classes are defined in `typography` file. */
96
- :root {
97
- --dashboard-font: var(--font-family-sans);
98
- }
99
-
100
- .t-weight-lt {
101
- font-weight: var(--font-lt);
102
- }
103
-
104
- .t-weight-rg {
105
- font-weight: var(--font-rg);
106
- }
107
-
108
- .t-weight-sb {
109
- font-weight: var(--font-sb);
110
- }
111
-
112
- .t-align-center {
113
- text-align: center;
114
- }
115
-
116
- .t-color-light {
117
- color: var(--text-grey-medium);
118
- fill: var(--text-grey-medium);
119
- }
120
-
121
- .caption-01 {
122
- color: var(--text-grey-800);
123
- fill: var(--text-grey-800);
124
- font-family: var(--font-family-sans);
125
- font-weight: var(--font-rg);
126
- font-size: var(--font-size-1);
127
- line-height: 16px;
128
- }
129
-
130
- .helper-text-01 {
131
- color: var(--text-grey-800);
132
- fill: var(--text-grey-800);
133
- font-family: var(--font-family-sans);
134
- font-weight: var(--font-rg);
135
- font-style: italic;
136
- font-size: var(--font-size-1);
137
- line-height: 16px;
138
- }
139
-
140
- .body-short-01 {
141
- color: var(--text-grey-800);
142
- fill: var(--text-grey-800);
143
- font-family: var(--font-family-sans);
144
- font-weight: var(--font-rg);
145
- font-size: var(--font-size-2);
146
- line-height: 20px;
147
- }
148
-
149
- .body-short-02 {
150
- color: var(--text-grey-800);
151
- fill: var(--text-grey-800);
152
- font-family: var(--font-family-sans);
153
- font-weight: var(--font-rg);
154
- font-size: var(--font-size-3);
155
- line-height: 24px;
156
- }
157
-
158
- .body-long-01 {
159
- color: var(--text-grey-800);
160
- fill: var(--text-grey-800);
161
- font-family: var(--font-family-sans);
162
- font-weight: var(--font-rg);
163
- font-size: var(--font-size-2);
164
- line-height: 20px;
165
- }
166
-
167
- .body-long-02 {
168
- color: var(--text-grey-800);
169
- fill: var(--text-grey-800);
170
- font-family: var(--font-family-sans);
171
- font-weight: var(--font-sb);
172
- font-size: var(--font-size-3);
173
- line-height: 24px;
174
- }
175
-
176
- .heading-01 {
177
- color: var(--text-grey-800);
178
- fill: var(--text-grey-800);
179
- font-family: var(--font-family-sans);
180
- font-weight: var(--font-sb);
181
- font-size: var(--font-size-2);
182
- line-height: 20px;
183
- }
184
-
185
- .heading-02 {
186
- color: var(--text-grey-800);
187
- fill: var(--text-grey-800);
188
- font-family: var(--font-family-sans);
189
- font-weight: var(--font-sb);
190
- font-size: var(--font-size-3);
191
- line-height: 24px;
192
- }
193
-
194
- .heading-03 {
195
- color: var(--text-grey-800);
196
- fill: var(--text-grey-800);
197
- font-family: var(--font-family-sans);
198
- font-weight: var(--font-sb);
199
- font-size: var(--font-size-5);
200
- line-height: 24px;
201
- }
202
-
203
- .heading-04 {
204
- color: var(--text-grey-800);
205
- fill: var(--text-grey-800);
206
- font-family: var(--font-family-sans);
207
- font-weight: var(--font-sb);
208
- font-size: var(--font-size-7);
209
- line-height: 36px;
210
- }
211
-
212
- .heading-05 {
213
- color: var(--text-grey-800);
214
- fill: var(--text-grey-800);
215
- font-family: var(--font-family-sans);
216
- font-weight: var(--font-sb);
217
- font-size: var(--font-size-8);
218
- line-height: 40px;
219
- }
220
-
221
- .expressive-heading-04 {
222
- color: var(--text-grey-800);
223
- fill: var(--text-grey-800);
224
- font-family: var(--font-family-sans);
225
- font-weight: var(--font-rg);
226
- font-size: var(--font-size-8);
227
- line-height: 40px;
228
- }
229
-
230
- @media only screen and (max-width: 767px) {
231
- .expressive-heading-04 {
232
- font-size: var(--font-size-7);
233
- line-height: 36px;
234
- }
235
- }
236
- .expressive-heading-05 {
237
- color: var(--text-grey-800);
238
- fill: var(--text-grey-800);
239
- font-family: var(--font-family-sans);
240
- font-weight: var(--font-rg);
241
- font-size: var(--font-size-11);
242
- line-height: 56px;
243
- }
244
-
245
- @media only screen and (max-width: 1024px) {
246
- .expressive-heading-05 {
247
- font-size: 36px;
248
- line-height: 44px;
249
- }
250
- }
251
- @media only screen and (max-width: 767px) {
252
- .expressive-heading-05 {
253
- font-size: var(--font-size-8);
254
- line-height: 40px;
255
- }
256
- }
257
- .expressive-paragraph-01 {
258
- color: var(--text-grey-800);
259
- fill: var(--text-grey-800);
260
- font-family: var(--font-family-sans);
261
- font-weight: var(--font-lt);
262
- font-size: var(--font-size-8);
263
- line-height: 40px;
264
- }
265
-
266
- @media only screen and (max-width: 767px) {
267
- .expressive-paragraph-01 {
268
- font-size: var(--font-size-6);
269
- line-height: 32px;
270
- }
271
- }
272
- .quotation-01 {
273
- color: var(--text-grey-800);
274
- fill: var(--text-grey-800);
275
- font-family: var(--font-family-sans);
276
- font-weight: var(--font-lt);
277
- font-size: var(--font-size-8);
278
- line-height: 40px;
279
- }
280
-
281
- @media only screen and (max-width: 767px) {
282
- .quotation-01 {
283
- font-size: var(--font-size-5);
284
- line-height: 28px;
285
- }
286
- }
287
- .quotation-02 {
288
- color: var(--text-grey-800);
289
- fill: var(--text-grey-800);
290
- font-family: var(--font-family-sans);
291
- font-weight: var(--font-lt);
292
- font-size: var(--font-size-13);
293
- line-height: 72px;
294
- }
295
-
296
- @media only screen and (max-width: 1024px) {
297
- .quotation-02 {
298
- font-size: 36px;
299
- line-height: 44px;
300
- }
301
- }
302
- @media only screen and (max-width: 767px) {
303
- .quotation-02 {
304
- font-size: var(--font-size-8);
305
- line-height: 40px;
306
- }
307
- }
308
- .display-01 {
309
- color: var(--text-grey-800);
310
- fill: var(--text-grey-800);
311
- font-family: var(--font-family-sans);
312
- font-weight: var(--font-lt);
313
- font-size: var(--font-size-15);
314
- line-height: 88px;
315
- }
316
-
317
- @media only screen and (max-width: 767px) {
318
- .display-01 {
319
- font-size: var(--font-size-10);
320
- line-height: 52px;
321
- }
322
- }
323
- .display-02 {
324
- color: var(--text-grey-800);
325
- fill: var(--text-grey-800);
326
- font-family: var(--font-family-sans);
327
- font-weight: var(--font-sb);
328
- font-size: var(--font-size-15);
329
- line-height: 88px;
330
- }
331
-
332
- @media only screen and (max-width: 767px) {
333
- .display-02 {
334
- font-size: var(--font-size-10);
335
- line-height: 52px;
336
- }
337
- }
338
- .display-03 {
339
- color: var(--text-grey-800);
340
- fill: var(--text-grey-800);
341
- font-family: var(--font-family-sans);
342
- font-weight: var(--font-lt);
343
- font-size: 156px;
344
- line-height: 164px;
345
- }
346
-
347
- @media only screen and (max-width: 1024px) {
348
- .display-03 {
349
- font-size: var(--font-size-14);
350
- line-height: 80px;
351
- }
352
- }
353
- @media only screen and (max-width: 767px) {
354
- .display-03 {
355
- font-size: var(--font-size-10);
356
- line-height: 52px;
357
- }
358
- }
359
- .display-04 {
360
- color: var(--text-grey-800);
361
- fill: var(--text-grey-800);
362
- font-family: var(--font-family-sans);
363
- font-weight: var(--font-sb);
364
- font-size: 156px;
365
- line-height: 164px;
366
- }
367
-
368
- @media only screen and (max-width: 1024px) {
369
- .display-04 {
370
- font-size: var(--font-size-14);
371
- line-height: 80px;
372
- }
373
- }
374
- @media only screen and (max-width: 767px) {
375
- .display-04 {
376
- font-size: var(--font-size-10);
377
- line-height: 52px;
378
- }
379
- }
380
- :root {
381
- --gray950: #121212;
382
- --gray900: #292929;
383
- --gray800: #3D3D3D;
384
- --gray700: #525252;
385
- --gray600: #666666;
386
- --gray500: #9B9B9B;
387
- --gray400: #ADADAD;
388
- --gray300: #C2C2C2;
389
- --gray200: #D6D6D6;
390
- --gray100: #EBEBEB;
391
- --gray50: #F6F6F6;
392
- }
393
-
394
- :root {
395
- --blue950: #001229;
396
- --blue900: #001F46;
397
- --blue800: #002C63;
398
- --blue700: #003981;
399
- --blue600: #0047A0;
400
- --blue500: #0056C1;
401
- --blue400: #2E76CE;
402
- --blue300: #5893DB;
403
- --blue200: #82B0E7;
404
- --blue100: #ACCDF3;
405
- --blue50: #D6EAFF;
406
- }
407
-
408
- :root {
409
- --green950: #19200A;
410
- --green900: #22330A;
411
- --green800: #2B4808;
412
- --green700: #355D06;
413
- --green600: #407305;
414
- --green500: #568818;
415
- --green400: #6F9D2F;
416
- --green300: #8AB14A;
417
- --green200: #A6C66B;
418
- --green100: #C3DA92;
419
- --green50: #EFFCE0;
420
- }
421
-
422
- :root {
423
- --yellow950: #33280F;
424
- --yellow900: #5C4615;
425
- --yellow800: #85641A;
426
- --yellow700: #AB8125;
427
- --yellow600: #D09E30;
428
- --yellow500: #F6BB3B;
429
- --yellow400: #F9C852;
430
- --yellow300: #FBD468;
431
- --yellow200: #FEE17F;
432
- --yellow150: #ffde72;
433
- --yellow100: #FFEA91;
434
- --yellow50: #FBF4E6;
435
- }
436
-
437
- :root {
438
- --red950: #2A0005;
439
- --red900: #4C0009;
440
- --red800: #6F000D;
441
- --red700: #940111;
442
- --red600: #BA0115;
443
- --red500: #E2011A;
444
- --red400: #EB4F60;
445
- --red300: #EB4F60;
446
- --red200: #F49DA7;
447
- --red100: #F49DA7;
448
- --red50: #FDEFEE;
449
- }
450
-
451
- :root {
452
- --avatar-C01: #99005B;
453
- --avatar-C02: #B01300;
454
- --avatar-C03: #E62200;
455
- --avatar-C04: #7C4000;
456
- --avatar-C05: #C25600;
457
- --avatar-C06: #6E6D6D;
458
- --avatar-C07: #667D00;
459
- --avatar-C08: #008741;
460
- --avatar-C09: #00612F;
461
- --avatar-C10: #007D8A;
462
- --avatar-C11: #007DB3;
463
- --avatar-C12: #00548C;
464
- --avatar-C13: #0028B1;
465
- --avatar-C14: #00019C;
466
- --avatar-C15: #6400EE;
467
- --avatar-C16: #5F3FFF;
468
- --avatar-C17: #8B00A5;
469
- --avatar-C18: #B200FF;
470
- --avatar-C19: #C700D6;
471
- }
472
-
473
- :root {
474
- --color-error-default: #DC3122;
475
- --color-success-default: #417505;
476
- --color-warning-default: #F6BB3B;
477
- --color-black: #000000;
478
- --color-white: #FFFFFF;
479
- }
480
-
481
- :root {
482
- /* font-family */
483
- --font-family-sans: "IBM Plex Sans", sans-serif;
484
- /* font-weight */
485
- --font-lt: 300;
486
- --font-rg: 400;
487
- --font-sb: 600;
488
- --font-bd: 700;
489
- /* font-size type scale */
490
- --font-size-1: 0.75rem; /* 12px */
491
- --font-size-2: 0.875rem; /* 14px */
492
- --font-size-3: 1rem; /* assuming 16px */
493
- --font-size-4: 1.125rem; /* 18px */
494
- --font-size-5: 1.25rem; /* 20px */
495
- --font-size-6: 1.5rem; /* 24px */
496
- --font-size-7: 1.75rem; /* 28px */
497
- --font-size-8: 2rem; /* 32px */
498
- --font-size-9: 2.25rem; /* 36px */
499
- --font-size-10: 2.625rem; /* 42px */
500
- --font-size-11: 3rem; /* 48px */
501
- --font-size-12: 3.375rem; /* 54px */
502
- --font-size-13: 3.75rem; /* 60px */
503
- --font-size-14: 4.25rem; /* 68px */
504
- --font-size-15: 4.75rem; /* 76px */
505
- --font-size-16: 5.25rem; /* 84px */
506
- --font-size-17: 5.75rem; /* 92px */
507
- }
508
-
509
- /* Typography classes */
510
- .heading-1,
511
- .heading-1-sb,
512
- .heading-1-lt {
513
- font-size: var(--font-size-8);
514
- font-weight: var(--font-rg);
515
- line-height: 1.25;
516
- letter-spacing: 0;
517
- }
518
-
519
- .heading-2,
520
- .heading-2-sb,
521
- .heading-2-lt {
522
- font-size: var(--font-size-7);
523
- font-weight: var(--font-rg);
524
- line-height: 1.28;
525
- letter-spacing: 0;
526
- }
527
-
528
- @media (max-width: 1151px) {
529
- .heading-1,
530
- .heading-1-sb,
531
- .heading-1-lt {
532
- font-size: var(--font-size-7);
533
- line-height: 1.28;
534
- }
535
- .heading-2,
536
- .heading-2-sb,
537
- .heading-2-lt {
538
- font-size: var(--font-size-6);
539
- line-height: 1.33;
540
- }
541
- }
542
- .heading-3,
543
- .heading-3-sb,
544
- .heading-3-lt {
545
- font-size: var(--font-size-6);
546
- font-weight: var(--font-rg);
547
- line-height: 1.33;
548
- letter-spacing: 0;
549
- }
550
-
551
- .heading-4,
552
- .heading-4-sb,
553
- .heading-4-lt {
554
- font-size: var(--font-size-5);
555
- font-weight: var(--font-rg);
556
- line-height: 1.4;
557
- letter-spacing: 0;
558
- }
559
-
560
- .body-1,
561
- .body-1-sb {
562
- font-size: var(--font-size-5);
563
- font-weight: var(--font-rg);
564
- line-height: 1.4;
565
- letter-spacing: 0;
566
- }
567
-
568
- .body-2,
569
- .body-2-sb {
570
- font-size: var(--font-size-4);
571
- font-weight: var(--font-rg);
572
- line-height: 1.5;
573
- letter-spacing: 0;
574
- }
575
-
576
- .body-3,
577
- .body-3-sb {
578
- font-size: var(--font-size-3);
579
- font-weight: var(--font-rg);
580
- line-height: 1.5;
581
- letter-spacing: 0;
582
- }
583
-
584
- .body-4,
585
- .body-4-sb {
586
- font-size: var(--font-size-2);
587
- font-weight: var(--font-rg);
588
- line-height: 1.4;
589
- letter-spacing: 0.16px;
590
- }
591
-
592
- .body-5,
593
- .body-5-sb {
594
- font-size: var(--font-size-1);
595
- font-weight: var(--font-rg);
596
- line-height: 1.33;
597
- letter-spacing: 0.32px;
598
- }
599
-
600
- .interactive-1,
601
- .interactive-1-sb {
602
- font-size: var(--font-size-3);
603
- font-weight: var(--font-rg);
604
- line-height: 1.5;
605
- letter-spacing: 0;
606
- }
607
-
608
- .interactive-2,
609
- .interactive-2-sb {
610
- font-size: var(--font-size-2);
611
- font-weight: var(--font-rg);
612
- line-height: 1.4;
613
- letter-spacing: 0.16px;
614
- }
615
-
616
- .interactive-3,
617
- .interactive-3-sb {
618
- font-size: var(--font-size-1);
619
- font-weight: var(--font-rg);
620
- line-height: 1.33;
621
- letter-spacing: 0.32px;
622
- }
623
-
624
- .helper,
625
- .helper-sb {
626
- font-size: var(--font-size-1);
627
- font-weight: var(--font-rg);
628
- font-style: italic;
629
- line-height: 1.33;
630
- letter-spacing: 0.32px;
631
- }
632
-
633
- /* font-weight variants */
634
- .heading-1-lt,
635
- .heading-2-lt,
636
- .heading-3-lt,
637
- .heading-4-lt {
638
- font-weight: var(--font-lt);
639
- }
640
-
641
- .heading-1-sb,
642
- .heading-2-sb,
643
- .heading-3-sb,
644
- .heading-4-sb,
645
- .body-1-sb,
646
- .body-2-sb,
647
- .body-3-sb,
648
- .body-4-sb,
649
- .body-5-sb,
650
- .interactive-1-sb,
651
- .interactive-2-sb,
652
- .interactive-3-sb,
653
- .helper-sb {
654
- font-weight: var(--font-sb);
655
- }
656
-
657
- :root {
658
- --space-unit: 8px;
659
- }
660
-
661
- :root {
662
- --shadow-color-base: rgba(66, 69, 72, 0.35);
663
- --shadow-inset-2: inset 0 2px 4px 0 var(--shadow-color-base);
664
- --shadow-inset-4: inset 0 4px 8px 0 var(--shadow-color-base);
665
- --shadow-0: 0 0 0 0 var(--shadow-color-base);
666
- --shadow-1: 0 1px 2px 0 var(--shadow-color-base);
667
- --shadow-2: 0 2px 4px 0 var(--shadow-color-base);
668
- --shadow-3: 0 3px 6px 0 var(--shadow-color-base);
669
- --shadow-4: 0 4px 8px 0 var(--shadow-color-base);
670
- --shadow-6: 0 6px 12px 0 var(--shadow-color-base);
671
- --shadow-8: 0 8px 16px 0 var(--shadow-color-base);
672
- --shadow-12: 0 12px 24px 0 var(--shadow-color-base);
673
- --shadow-16: 0 16px 32px 0 var(--shadow-color-base);
674
- --shadow-24: 0 24px 48px 0 var(--shadow-color-base);
675
- }
676
-
677
- :root {
678
- --border-no-radius: 0;
679
- --border-size-small: 1px;
680
- --border-size-medium: 2px;
681
- --border-size-large: 4px;
682
- --border-radius-small: 2px;
683
- --border-radius: 4px;
684
- }
685
-
686
- :root {
687
- --grid-mobile-viewport: 768px;
688
- --grid-mobile-column: 4;
689
- --grid-mobile-margin: 16px;
690
- --grid-mobile-gutter: 16px;
691
- --grid-tablet-viewport: 768px;
692
- --grid-tablet-column: 8;
693
- --grid-tablet-margin: 24px;
694
- --grid-tablet-gutter: 24px;
695
- --grid-desktop-viewport: 1152px;
696
- --grid-desktop-column: 12;
697
- --grid-desktop-margin: 24px;
698
- --grid-desktop-gutter: 24px;
699
- --grid-wide-viewport: 1366px;
700
- --grid-wide-column: 12;
701
- --grid-wide-margin: 32px;
702
- --grid-wide-gutter: 32px;
703
- --page-max-width: 1366px;
704
- /* These variables automatically adapt to the viewport size,
705
- that apps don't have to worry about updating the value manually. */
706
- --grid-margin: var(--grid-mobile-margin);
707
- --grid-gutter: var(--grid-mobile-gutter);
708
- --grid-columns: var(--grid-mobile-column);
709
- }
710
-
711
- @media (min-width: 768px) and (max-width: 1151px) {
712
- :root {
713
- --grid-margin: var(--grid-tablet-margin);
714
- --grid-gutter: var(--grid-tablet-gutter);
715
- --grid-columns: var(--grid-tablet-column);
716
- }
717
- }
718
- @media (min-width: 1152px) and (max-width: 1365px) {
719
- :root {
720
- --grid-margin: var(--grid-desktop-margin);
721
- --grid-gutter: var(--grid-desktop-gutter);
722
- --grid-columns: var(--grid-desktop-column);
723
- }
724
- }
725
- @media (min-width: 1366px) {
726
- :root {
727
- --grid-margin: var(--grid-wide-margin);
728
- --grid-gutter: var(--grid-wide-gutter);
729
- --grid-columns: var(--grid-wide-column);
730
- }
731
- }
732
- .z-grid {
733
- display: grid;
734
- grid-template-columns: repeat(var(--grid-columns), 1fr);
735
- width: 100%;
736
- column-gap: var(--grid-gutter);
737
- /*
738
- .-col-start-1 is intentionally left out
739
- */
740
- /*
741
- .col-end-1 is intentionally left out
742
- */
743
- /*
744
- This means "end this column where column 5 start",
745
- which is the same as saying "end this column where column 4 end"
746
- */
747
- }
748
- .z-grid .col-full {
749
- grid-column: 1/-1;
750
- }
751
- .z-grid .col-1 {
752
- grid-column: span 1;
753
- }
754
- .z-grid .col-2 {
755
- grid-column: span 2;
756
- }
757
- .z-grid .col-3 {
758
- grid-column: span 3;
759
- }
760
- .z-grid .col-4,
761
- .z-grid .col-5,
762
- .z-grid .col-6,
763
- .z-grid .col-7,
764
- .z-grid .col-8,
765
- .z-grid .col-9,
766
- .z-grid .col-10,
767
- .z-grid .col-11,
768
- .z-grid .col-12 {
769
- grid-column: span 4;
770
- }
771
- .z-grid .col-start-1 {
772
- grid-column-start: 1;
773
- }
774
- .z-grid .col-start-2 {
775
- grid-column-start: 2;
776
- }
777
- .z-grid .col-start-3 {
778
- grid-column-start: 3;
779
- }
780
- .z-grid .col-start-4,
781
- .z-grid .col-start-5,
782
- .z-grid .col-start-6,
783
- .z-grid .col-start-7,
784
- .z-grid .col-start-8,
785
- .z-grid .col-start-9,
786
- .z-grid .col-start-10,
787
- .z-grid .col-start-11,
788
- .z-grid .col-start-12 {
789
- grid-column-start: 4;
790
- }
791
- .z-grid .-col-start-2 {
792
- grid-column-start: -2;
793
- }
794
- .z-grid .-col-start-3 {
795
- grid-column-start: -3;
796
- }
797
- .z-grid .-col-start-4 {
798
- grid-column-start: -4;
799
- }
800
- .z-grid .-col-start-5,
801
- .z-grid .-col-start-6,
802
- .z-grid .-col-start-7,
803
- .z-grid .-col-start-8,
804
- .z-grid .-col-start-9,
805
- .z-grid .-col-start-10,
806
- .z-grid .-col-start-11,
807
- .z-grid .-col-start-12,
808
- .z-grid .-col-start-13 {
809
- grid-column-start: -5;
810
- }
811
- .z-grid .col-end-last {
812
- grid-column-end: -1;
813
- }
814
- .z-grid .col-end-2 {
815
- grid-column-end: 2;
816
- }
817
- .z-grid .col-end-3 {
818
- grid-column-end: 3;
819
- }
820
- .z-grid .col-end-4 {
821
- grid-column-end: 4;
822
- }
823
- .z-grid .col-end-5,
824
- .z-grid .col-end-6,
825
- .z-grid .col-end-7,
826
- .z-grid .col-end-8,
827
- .z-grid .col-end-9,
828
- .z-grid .col-end-10,
829
- .z-grid .col-end-11,
830
- .z-grid .col-end-12,
831
- .z-grid .col-end-13 {
832
- grid-column-end: 5;
833
- }
834
- .z-grid .-col-end-1 {
835
- grid-column-end: -1;
836
- }
837
- .z-grid .-col-end-2 {
838
- grid-column-end: -2;
839
- }
840
- .z-grid .-col-end-3 {
841
- grid-column-end: -3;
842
- }
843
- .z-grid .-col-end-4,
844
- .z-grid .-col-end-5,
845
- .z-grid .-col-end-6,
846
- .z-grid .-col-end-7,
847
- .z-grid .-col-end-8,
848
- .z-grid .-col-end-9,
849
- .z-grid .-col-end-10,
850
- .z-grid .-col-end-11,
851
- .z-grid .-col-end-12 {
852
- grid-column-end: -4;
853
- }
854
- @media (max-width: 767px) {
855
- .z-grid .mobile-col-full {
856
- grid-column: 1/-1;
857
- }
858
- .z-grid .mobile-col-1 {
859
- grid-column: span 1;
860
- }
861
- .z-grid .mobile-col-2 {
862
- grid-column: span 2;
863
- }
864
- .z-grid .mobile-col-3 {
865
- grid-column: span 3;
866
- }
867
- .z-grid .mobile-col-4 {
868
- grid-column: span 4;
869
- }
870
- }
871
- @media (min-width: 768px) {
872
- .z-grid .col-5 {
873
- grid-column: span 5;
874
- }
875
- .z-grid .col-6 {
876
- grid-column: span 6;
877
- }
878
- .z-grid .col-7 {
879
- grid-column: span 7;
880
- }
881
- .z-grid .col-8,
882
- .z-grid .col-9,
883
- .z-grid .col-10,
884
- .z-grid .col-11,
885
- .z-grid .col-12 {
886
- grid-column: span 8;
887
- }
888
- .z-grid .col-start-5 {
889
- grid-column-start: 5;
890
- }
891
- .z-grid .col-start-6 {
892
- grid-column-start: 6;
893
- }
894
- .z-grid .col-start-7 {
895
- grid-column-start: 7;
896
- }
897
- .z-grid .col-start-8,
898
- .z-grid .col-start-9,
899
- .z-grid .col-start-10,
900
- .z-grid .col-start-11,
901
- .z-grid .col-start-12 {
902
- grid-column-start: 8;
903
- }
904
- .z-grid .-col-start-6 {
905
- grid-column-start: -6;
906
- }
907
- .z-grid .-col-start-7 {
908
- grid-column-start: -7;
909
- }
910
- .z-grid .-col-start-8 {
911
- grid-column-start: -8;
912
- }
913
- .z-grid .-col-start-9,
914
- .z-grid .-col-start-10,
915
- .z-grid .-col-start-11,
916
- .z-grid .-col-start-12,
917
- .z-grid .-col-start-13 {
918
- grid-column-start: -9;
919
- }
920
- .z-grid .col-end-6 {
921
- grid-column-end: 6;
922
- }
923
- .z-grid .col-end-7 {
924
- grid-column-end: 7;
925
- }
926
- .z-grid .col-end-8 {
927
- grid-column-end: 8;
928
- }
929
- .z-grid .col-end-9,
930
- .z-grid .col-end-10,
931
- .z-grid .col-end-11,
932
- .z-grid .col-end-12,
933
- .z-grid .col-end-13 {
934
- grid-column-end: 9;
935
- }
936
- .z-grid .-col-end-5 {
937
- grid-column-end: -5;
938
- }
939
- .z-grid .-col-end-6 {
940
- grid-column-end: -6;
941
- }
942
- .z-grid .-col-end-7 {
943
- grid-column-end: -7;
944
- }
945
- .z-grid .-col-end-8,
946
- .z-grid .-col-end-9,
947
- .z-grid .-col-end-10,
948
- .z-grid .-col-end-11,
949
- .z-grid .-col-end-12 {
950
- grid-column-end: -8;
951
- }
952
- }
953
- @media (min-width: 768px) and (max-width: 1151px) {
954
- .z-grid .tablet-col-full {
955
- grid-column: 1/-1;
956
- }
957
- .z-grid .tablet-col-1 {
958
- grid-column: span 1;
959
- }
960
- .z-grid .tablet-col-2 {
961
- grid-column: span 2;
962
- }
963
- .z-grid .tablet-col-3 {
964
- grid-column: span 3;
965
- }
966
- .z-grid .tablet-col-4 {
967
- grid-column: span 4;
968
- }
969
- .z-grid .tablet-col-5 {
970
- grid-column: span 5;
971
- }
972
- .z-grid .tablet-col-6 {
973
- grid-column: span 6;
974
- }
975
- .z-grid .tablet-col-7 {
976
- grid-column: span 7;
977
- }
978
- .z-grid .tablet-col-8 {
979
- grid-column: span 8;
980
- }
981
- .z-grid .tablet-col-start-1 {
982
- grid-column-start: 1;
983
- }
984
- .z-grid .tablet-col-start-2 {
985
- grid-column-start: 2;
986
- }
987
- .z-grid .tablet-col-start-3 {
988
- grid-column-start: 3;
989
- }
990
- .z-grid .tablet-col-start-4 {
991
- grid-column-start: 4;
992
- }
993
- .z-grid .tablet-col-start-5 {
994
- grid-column-start: 5;
995
- }
996
- .z-grid .tablet-col-start-6 {
997
- grid-column-start: 6;
998
- }
999
- .z-grid .tablet-col-start-7 {
1000
- grid-column-start: 7;
1001
- }
1002
- .z-grid .tablet-col-start-8 {
1003
- grid-column-start: 8;
1004
- }
1005
- .z-grid .-tablet-col-start-2 {
1006
- grid-column-start: -2;
1007
- }
1008
- .z-grid .-tablet-col-start-3 {
1009
- grid-column-start: -3;
1010
- }
1011
- .z-grid .-tablet-col-start-4 {
1012
- grid-column-start: -4;
1013
- }
1014
- .z-grid .-tablet-col-start-5 {
1015
- grid-column-start: -5;
1016
- }
1017
- .z-grid .-tablet-col-start-6 {
1018
- grid-column-start: -6;
1019
- }
1020
- .z-grid .-tablet-col-start-7 {
1021
- grid-column-start: -7;
1022
- }
1023
- .z-grid .-tablet-col-start-8 {
1024
- grid-column-start: -8;
1025
- }
1026
- .z-grid .tablet-col-end-2 {
1027
- grid-column-end: 2;
1028
- }
1029
- .z-grid .tablet-col-end-3 {
1030
- grid-column-end: 3;
1031
- }
1032
- .z-grid .tablet-col-end-4 {
1033
- grid-column-end: 4;
1034
- }
1035
- .z-grid .tablet-col-end-6 {
1036
- grid-column-end: 6;
1037
- }
1038
- .z-grid .tablet-col-end-7 {
1039
- grid-column-end: 7;
1040
- }
1041
- .z-grid .tablet-col-end-8 {
1042
- grid-column-end: 8;
1043
- }
1044
- .z-grid .tablet-col-end-last {
1045
- grid-column-end: -1;
1046
- }
1047
- .z-grid .-tablet-col-end-1 {
1048
- grid-column-end: -1;
1049
- }
1050
- .z-grid .-tablet-col-end-2 {
1051
- grid-column-end: -2;
1052
- }
1053
- .z-grid .-tablet-col-end-3 {
1054
- grid-column-end: -3;
1055
- }
1056
- .z-grid .-tablet-col-end-4 {
1057
- grid-column-end: -4;
1058
- }
1059
- .z-grid .-tablet-col-end-5 {
1060
- grid-column-end: -5;
1061
- }
1062
- .z-grid .-tablet-col-end-6 {
1063
- grid-column-end: -6;
1064
- }
1065
- .z-grid .-tablet-col-end-7 {
1066
- grid-column-end: -7;
1067
- }
1068
- .z-grid .-tablet-col-end-8 {
1069
- grid-column-end: -8;
1070
- }
1071
- }
1072
- @media (min-width: 1152px) {
1073
- .z-grid .col-9 {
1074
- grid-column: span 9;
1075
- }
1076
- .z-grid .col-10 {
1077
- grid-column: span 10;
1078
- }
1079
- .z-grid .col-11 {
1080
- grid-column: span 11;
1081
- }
1082
- .z-grid .col-12 {
1083
- grid-column: span 12;
1084
- }
1085
- .z-grid .col-start-9 {
1086
- grid-column-start: 9;
1087
- }
1088
- .z-grid .col-start-10 {
1089
- grid-column-start: 10;
1090
- }
1091
- .z-grid .col-start-11 {
1092
- grid-column-start: 11;
1093
- }
1094
- .z-grid .col-start-12 {
1095
- grid-column-start: 12;
1096
- }
1097
- .z-grid .-col-start-10 {
1098
- grid-column-start: -10;
1099
- }
1100
- .z-grid .-col-start-11 {
1101
- grid-column-start: -11;
1102
- }
1103
- .z-grid .-col-start-12 {
1104
- grid-column-start: -12;
1105
- }
1106
- .z-grid .-col-start-13 {
1107
- grid-column-start: -13;
1108
- }
1109
- .z-grid .col-end-10 {
1110
- grid-column-end: 10;
1111
- }
1112
- .z-grid .col-end-11 {
1113
- grid-column-end: 11;
1114
- }
1115
- .z-grid .col-end-12 {
1116
- grid-column-end: 12;
1117
- }
1118
- .z-grid .col-end-13 {
1119
- grid-column-end: 13;
1120
- }
1121
- .z-grid .-col-end-9 {
1122
- grid-column-end: -9;
1123
- }
1124
- .z-grid .-col-end-10 {
1125
- grid-column-end: -10;
1126
- }
1127
- .z-grid .-col-end-11 {
1128
- grid-column-end: -11;
1129
- }
1130
- .z-grid .-col-end-12 {
1131
- grid-column-end: -12;
1132
- }
1133
- }
1134
- @media (min-width: 1152px) and (max-width: 1365px) {
1135
- .z-grid .desktop-col-full {
1136
- grid-column: 1/-1;
1137
- }
1138
- .z-grid .desktop-col-1 {
1139
- grid-column: span 1;
1140
- }
1141
- .z-grid .desktop-col-2 {
1142
- grid-column: span 2;
1143
- }
1144
- .z-grid .desktop-col-3 {
1145
- grid-column: span 3;
1146
- }
1147
- .z-grid .desktop-col-4 {
1148
- grid-column: span 4;
1149
- }
1150
- .z-grid .desktop-col-5 {
1151
- grid-column: span 5;
1152
- }
1153
- .z-grid .desktop-col-6 {
1154
- grid-column: span 6;
1155
- }
1156
- .z-grid .desktop-col-7 {
1157
- grid-column: span 7;
1158
- }
1159
- .z-grid .desktop-col-8 {
1160
- grid-column: span 8;
1161
- }
1162
- .z-grid .desktop-col-9 {
1163
- grid-column: span 9;
1164
- }
1165
- .z-grid .desktop-col-10 {
1166
- grid-column: span 10;
1167
- }
1168
- .z-grid .desktop-col-11 {
1169
- grid-column: span 11;
1170
- }
1171
- .z-grid .desktop-col-12 {
1172
- grid-column: span 12;
1173
- }
1174
- .z-grid .desktop-col-start-1 {
1175
- grid-column-start: 1;
1176
- }
1177
- .z-grid .desktop-col-start-2 {
1178
- grid-column-start: 2;
1179
- }
1180
- .z-grid .desktop-col-start-3 {
1181
- grid-column-start: 3;
1182
- }
1183
- .z-grid .desktop-col-start-4 {
1184
- grid-column-start: 4;
1185
- }
1186
- .z-grid .desktop-col-start-5 {
1187
- grid-column-start: 5;
1188
- }
1189
- .z-grid .desktop-col-start-6 {
1190
- grid-column-start: 6;
1191
- }
1192
- .z-grid .desktop-col-start-7 {
1193
- grid-column-start: 7;
1194
- }
1195
- .z-grid .desktop-col-start-8 {
1196
- grid-column-start: 8;
1197
- }
1198
- .z-grid .desktop-col-start-9 {
1199
- grid-column-start: 9;
1200
- }
1201
- .z-grid .desktop-col-start-10 {
1202
- grid-column-start: 10;
1203
- }
1204
- .z-grid .desktop-col-start-11 {
1205
- grid-column-start: 11;
1206
- }
1207
- .z-grid .desktop-col-start-12 {
1208
- grid-column-start: 12;
1209
- }
1210
- .z-grid .-desktop-col-start-2 {
1211
- grid-column-start: -2;
1212
- }
1213
- .z-grid .-desktop-col-start-3 {
1214
- grid-column-start: -3;
1215
- }
1216
- .z-grid .-desktop-col-start-4 {
1217
- grid-column-start: -4;
1218
- }
1219
- .z-grid .-desktop-col-start-5 {
1220
- grid-column-start: -5;
1221
- }
1222
- .z-grid .-desktop-col-start-6 {
1223
- grid-column-start: -6;
1224
- }
1225
- .z-grid .-desktop-col-start-7 {
1226
- grid-column-start: -7;
1227
- }
1228
- .z-grid .-desktop-col-start-8 {
1229
- grid-column-start: -8;
1230
- }
1231
- .z-grid .-desktop-col-start-9 {
1232
- grid-column-start: -9;
1233
- }
1234
- .z-grid .-desktop-col-start-10 {
1235
- grid-column-start: -10;
1236
- }
1237
- .z-grid .-desktop-col-start-11 {
1238
- grid-column-start: -11;
1239
- }
1240
- .z-grid .-desktop-col-start-12 {
1241
- grid-column-start: -12;
1242
- }
1243
- .z-grid .desktop-col-end-2 {
1244
- grid-column-end: 2;
1245
- }
1246
- .z-grid .desktop-col-end-3 {
1247
- grid-column-end: 3;
1248
- }
1249
- .z-grid .desktop-col-end-4 {
1250
- grid-column-end: 4;
1251
- }
1252
- .z-grid .desktop-col-end-6 {
1253
- grid-column-end: 6;
1254
- }
1255
- .z-grid .desktop-col-end-7 {
1256
- grid-column-end: 7;
1257
- }
1258
- .z-grid .desktop-col-end-8 {
1259
- grid-column-end: 8;
1260
- }
1261
- .z-grid .desktop-col-end-9 {
1262
- grid-column-end: 9;
1263
- }
1264
- .z-grid .desktop-col-end-10 {
1265
- grid-column-end: 10;
1266
- }
1267
- .z-grid .desktop-col-end-11 {
1268
- grid-column-end: 11;
1269
- }
1270
- .z-grid .desktop-col-end-12 {
1271
- grid-column-end: 12;
1272
- }
1273
- .z-grid .desktop-col-end-last {
1274
- grid-column-end: -1;
1275
- }
1276
- .z-grid .-desktop-col-end-1 {
1277
- grid-column-end: -1;
1278
- }
1279
- .z-grid .-desktop-col-end-2 {
1280
- grid-column-end: -2;
1281
- }
1282
- .z-grid .-desktop-col-end-3 {
1283
- grid-column-end: -3;
1284
- }
1285
- .z-grid .-desktop-col-end-4 {
1286
- grid-column-end: -4;
1287
- }
1288
- .z-grid .-desktop-col-end-5 {
1289
- grid-column-end: -5;
1290
- }
1291
- .z-grid .-desktop-col-end-6 {
1292
- grid-column-end: -6;
1293
- }
1294
- .z-grid .-desktop-col-end-7 {
1295
- grid-column-end: -7;
1296
- }
1297
- .z-grid .-desktop-col-end-8 {
1298
- grid-column-end: -8;
1299
- }
1300
- .z-grid .-desktop-col-end-9 {
1301
- grid-column-end: -9;
1302
- }
1303
- .z-grid .-desktop-col-end-10 {
1304
- grid-column-end: -10;
1305
- }
1306
- .z-grid .-desktop-col-end-11 {
1307
- grid-column-end: -11;
1308
- }
1309
- .z-grid .-desktop-col-end-12 {
1310
- grid-column-end: -12;
1311
- }
1312
- }
1313
- @media (min-width: 1366px) {
1314
- .z-grid .wide-col-full {
1315
- grid-column: 1/-1;
1316
- }
1317
- .z-grid .wide-col-1 {
1318
- grid-column: span 1;
1319
- }
1320
- .z-grid .wide-col-2 {
1321
- grid-column: span 2;
1322
- }
1323
- .z-grid .wide-col-3 {
1324
- grid-column: span 3;
1325
- }
1326
- .z-grid .wide-col-4 {
1327
- grid-column: span 4;
1328
- }
1329
- .z-grid .wide-col-5 {
1330
- grid-column: span 5;
1331
- }
1332
- .z-grid .wide-col-6 {
1333
- grid-column: span 6;
1334
- }
1335
- .z-grid .wide-col-7 {
1336
- grid-column: span 7;
1337
- }
1338
- .z-grid .wide-col-8 {
1339
- grid-column: span 8;
1340
- }
1341
- .z-grid .wide-col-9 {
1342
- grid-column: span 9;
1343
- }
1344
- .z-grid .wide-col-10 {
1345
- grid-column: span 10;
1346
- }
1347
- .z-grid .wide-col-11 {
1348
- grid-column: span 11;
1349
- }
1350
- .z-grid .wide-col-12 {
1351
- grid-column: span 12;
1352
- }
1353
- .z-grid .wide-col-start-1 {
1354
- grid-column-start: 1;
1355
- }
1356
- .z-grid .wide-col-start-2 {
1357
- grid-column-start: 2;
1358
- }
1359
- .z-grid .wide-col-start-3 {
1360
- grid-column-start: 3;
1361
- }
1362
- .z-grid .wide-col-start-4 {
1363
- grid-column-start: 4;
1364
- }
1365
- .z-grid .wide-col-start-5 {
1366
- grid-column-start: 5;
1367
- }
1368
- .z-grid .wide-col-start-6 {
1369
- grid-column-start: 6;
1370
- }
1371
- .z-grid .wide-col-start-7 {
1372
- grid-column-start: 7;
1373
- }
1374
- .z-grid .wide-col-start-8 {
1375
- grid-column-start: 8;
1376
- }
1377
- .z-grid .wide-col-start-9 {
1378
- grid-column-start: 9;
1379
- }
1380
- .z-grid .wide-col-start-10 {
1381
- grid-column-start: 10;
1382
- }
1383
- .z-grid .wide-col-start-11 {
1384
- grid-column-start: 11;
1385
- }
1386
- .z-grid .wide-col-start-12 {
1387
- grid-column-start: 12;
1388
- }
1389
- .z-grid .-wide-col-start-2 {
1390
- grid-column-start: -2;
1391
- }
1392
- .z-grid .-wide-col-start-3 {
1393
- grid-column-start: -3;
1394
- }
1395
- .z-grid .-wide-col-start-4 {
1396
- grid-column-start: -4;
1397
- }
1398
- .z-grid .-wide-col-start-5 {
1399
- grid-column-start: -5;
1400
- }
1401
- .z-grid .-wide-col-start-6 {
1402
- grid-column-start: -6;
1403
- }
1404
- .z-grid .-wide-col-start-7 {
1405
- grid-column-start: -7;
1406
- }
1407
- .z-grid .-wide-col-start-8 {
1408
- grid-column-start: -8;
1409
- }
1410
- .z-grid .-wide-col-start-9 {
1411
- grid-column-start: -9;
1412
- }
1413
- .z-grid .-wide-col-start-10 {
1414
- grid-column-start: -10;
1415
- }
1416
- .z-grid .-wide-col-start-11 {
1417
- grid-column-start: -11;
1418
- }
1419
- .z-grid .-wide-col-start-12 {
1420
- grid-column-start: -12;
1421
- }
1422
- .z-grid .wide-col-end-2 {
1423
- grid-column-end: 2;
1424
- }
1425
- .z-grid .wide-col-end-3 {
1426
- grid-column-end: 3;
1427
- }
1428
- .z-grid .wide-col-end-4 {
1429
- grid-column-end: 4;
1430
- }
1431
- .z-grid .wide-col-end-6 {
1432
- grid-column-end: 6;
1433
- }
1434
- .z-grid .wide-col-end-7 {
1435
- grid-column-end: 7;
1436
- }
1437
- .z-grid .wide-col-end-8 {
1438
- grid-column-end: 8;
1439
- }
1440
- .z-grid .wide-col-end-9 {
1441
- grid-column-end: 9;
1442
- }
1443
- .z-grid .wide-col-end-10 {
1444
- grid-column-end: 10;
1445
- }
1446
- .z-grid .wide-col-end-11 {
1447
- grid-column-end: 11;
1448
- }
1449
- .z-grid .wide-col-end-12 {
1450
- grid-column-end: 12;
1451
- }
1452
- .z-grid .wide-col-end-last {
1453
- grid-column-end: -1;
1454
- }
1455
- .z-grid .-wide-col-end-1 {
1456
- grid-column-end: -1;
1457
- }
1458
- .z-grid .-wide-col-end-2 {
1459
- grid-column-end: -2;
1460
- }
1461
- .z-grid .-wide-col-end-3 {
1462
- grid-column-end: -3;
1463
- }
1464
- .z-grid .-wide-col-end-4 {
1465
- grid-column-end: -4;
1466
- }
1467
- .z-grid .-wide-col-end-5 {
1468
- grid-column-end: -5;
1469
- }
1470
- .z-grid .-wide-col-end-6 {
1471
- grid-column-end: -6;
1472
- }
1473
- .z-grid .-wide-col-end-7 {
1474
- grid-column-end: -7;
1475
- }
1476
- .z-grid .-wide-col-end-8 {
1477
- grid-column-end: -8;
1478
- }
1479
- .z-grid .-wide-col-end-9 {
1480
- grid-column-end: -9;
1481
- }
1482
- .z-grid .-wide-col-end-10 {
1483
- grid-column-end: -10;
1484
- }
1485
- .z-grid .-wide-col-end-11 {
1486
- grid-column-end: -11;
1487
- }
1488
- .z-grid .-wide-col-end-12 {
1489
- grid-column-end: -12;
1490
- }
1491
- }
1492
-
1493
- /*# sourceMappingURL=tokens.css.map */
1494
-
1495
- :root {
1496
- --color-background: var(--gray50);
1497
- --color-primary01: var(--blue500);
1498
- --color-primary02: var(--blue500);
1499
- --color-primary03: var(--blue50);
1500
- --color-secondary01: var(--blue500);
1501
- --color-secondary02: var(--red500);
1502
- --color-secondary03: var(--red500);
1503
- --color-danger01: var(--color-error-default);
1504
- --color-danger02: var(--color-error-default);
1505
- --color-error01: var(--color-error-default);
1506
- --color-error02: var(--red800);
1507
- --color-error-inverse: var(--red50);
1508
- --color-text-error: var(--color-error-default);
1509
- --color-success01: var(--color-success-default);
1510
- --color-success02: var(--green800);
1511
- --color-text-success: var(--color-success-default);
1512
- --color-success-inverse: var(--green50);
1513
- --color-warning01: var(--color-warning-default);
1514
- --color-warning02: var(--yellow800);
1515
- --color-text-warning: var(--color-warning-default);
1516
- --color-warning-inverse: var(--yellow50);
1517
- --color-surface01: var(--color-white);
1518
- --color-surface02: var(--gray50);
1519
- --color-surface03: var(--gray200);
1520
- --color-surface04: var(--gray700);
1521
- --color-surface05: var(--gray800);
1522
- --color-text01: var(--gray800);
1523
- --color-text02: var(--gray800);
1524
- --color-text03: var(--gray300);
1525
- --color-text04: var(--color-white);
1526
- --color-text05: var(--gray600);
1527
- --color-text-inverse: var(--color-white);
1528
- --color-icon01: var(--blue500);
1529
- --color-icon02: var(--gray800);
1530
- --color-icon03: var(--color-white);
1531
- --color-input-field01: var(--color-white);
1532
- --color-input-field02: var(--color-white);
1533
- --color-hover-primary: var(--blue800);
1534
- --color-hover-primary-text: var(--color-black);
1535
- --color-hover-secondary: var(--blue800);
1536
- --color-hover-tertiary: var(--blue800);
1537
- --color-hover-surface: var(--gray50);
1538
- --color-hover-light: var(--blue400);
1539
- --color-hover-danger: var(--red800);
1540
- --color-active-primary: var(--blue800);
1541
- --color-active-secondary: var(--blue800);
1542
- --color-active-tertiary: var(--blue800);
1543
- --color-active-surface: var(--gray300);
1544
- --color-active-light: var(--blue400);
1545
- --color-pressed-primary: var(--blue400);
1546
- --color-pressed-secondary: var(--red400);
1547
- --color-selected-surface: var(--gray300);
1548
- --color-selected-light: var(--gray300);
1549
- --color-highlight: var(--blue400);
1550
- --color-ghost01: var(--gray300);
1551
- --color-ghost02: var(--gray500);
1552
- --color-disabled01: var(--gray200);
1553
- --color-disabled02: var(--gray700);
1554
- --color-disabled03: var(--gray500);
1555
- --shadow-focus-primary: 0 0 0 1px var(--color-white),
1556
- 0 0 4px 3px var(--color-highlight);
1557
- --color-link-primary: var(--blue500);
1558
- --color-hover-link: var(--blue800);
1559
- --color-active-link: var(--blue800);
1560
- --color-pressed-link: var(--blue400);
1561
- --color-visited-link: var(--blue800);
1562
- --color-inverse-link: var(--color-white);
1563
- --color-inverse-hover-link: var(--color-white);
1564
- --color-inverse-active-link: var(--color-white);
1565
- --color-inverse-pressed-link: var(--color-white);
1566
- --color-inverse-visited-link: var(--gray300);
1567
- }
1568
-
1569
- /*# sourceMappingURL=default.css.map */
1570
-
1571
- .theme-black-yellow {
1572
- --color-primary01: var(--gray950);
1573
- --color-primary02: var(--gray950);
1574
- --color-primary03: var(--gray100);
1575
- --color-secondary01: var(--yellow500);
1576
- --color-secondary02: var(--yellow500);
1577
- --color-secondary03: var(--yellow500);
1578
- --color-text01: var(--gray950);
1579
- --color-text-inverse: var(--color-white);
1580
- --color-icon01: var(--gray950);
1581
- --color-active-primary: var(--gray800);
1582
- --color-pressed-primary: var(--gray800);
1583
- --color-hover-primary: var(--gray800);
1584
- --color-hover-secondary: var(--gray950);
1585
- --color-hover-tertiary: var(--gray950);
1586
- --color-hover-primary-text: var(--gray950);
1587
- --color-hover-light: var(--yellow500);
1588
- --color-background: var(--color-white);
1589
- --color-hover-surface: var(--gray50);
1590
- }
1591
-
1592
- /*# sourceMappingURL=black-yellow.css.map */
1593
-
1594
- .theme-dark {
1595
- --color-surface01: var(--gray800);
1596
- --color-primary01: var(--color-white);
1597
- --color-primary02: var(--gray800);
1598
- --color-hover-primary: var(--color-primary01);
1599
- --color-pressed-primary: var(--color-primary01);
1600
- --color-text02: var(--color-white);
1601
- --color-text-inverse: var(--gray800);
1602
- --color-link-primary: var(--color-white);
1603
- --color-hover-link: var(--color-link-primary);
1604
- --color-active-link: var(--color-link-primary);
1605
- --color-pressed-link: var(--color-link-primary);
1606
- --color-visited-link: var(--color-link-primary);
1607
- --color-error02: #ffc1bd;
1608
- --color-text-error: #ffc1bd;
1609
- --color-success02: #a8e168;
1610
- --color-text-success: #a8e168;
1611
- --color-warning02: #f7ca6a;
1612
- --color-text-warning: #f7ca6a;
1613
- background: var(--color-surface01);
1614
- }
1615
-
1616
- /*# sourceMappingURL=dark-default.css.map */
1617
-