@volvo-cars/css 1.30.0 → 1.32.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.
@@ -0,0 +1,2093 @@
1
+ ## Classes
2
+ These are the classes that are available in Volvo Cars CSS.
3
+ Comma separated {} groups identify available prefixes for that class.
4
+ Use breakpoint prefixes md:,lg:,xl: for responsive design and use the associated aria-attribute for state prefixes like selected: or checked:.
5
+ Utility classes may be combined with other classes and include the CSS rules they apply to help you understand their purpose.Other classes may not be combined with each other.
6
+
7
+
8
+ ### Layer: blocks
9
+
10
+ .backdrop
11
+
12
+ .backdrop:opacity-0
13
+
14
+ .icon-button-filled
15
+
16
+ .icon-button-outlined
17
+
18
+ .icon-button-clear
19
+
20
+ .toggle-group-button
21
+
22
+ .spinner
23
+
24
+ .dialog
25
+
26
+ .dialog-large
27
+
28
+ .dialog-small
29
+
30
+ .sheet
31
+
32
+ .dialog__close
33
+
34
+ .radio
35
+
36
+ .checkbox
37
+
38
+ .wordmark
39
+
40
+ .icon-sprite
41
+
42
+ .icon-mask
43
+
44
+ .img
45
+
46
+ .label
47
+
48
+ .input
49
+
50
+ .link-inline
51
+
52
+ .link-underlined
53
+
54
+ .link-plain
55
+
56
+ .pagination-dots
57
+
58
+ .range
59
+
60
+ .statement-signature
61
+
62
+ .switch
63
+
64
+ .tap-area
65
+
66
+ .tooltip
67
+
68
+ .skeleton
69
+
70
+ .toast-message
71
+
72
+ .inline-message
73
+
74
+
75
+ ### Layer: layout
76
+
77
+ .button-filled
78
+
79
+ .button-outlined
80
+
81
+ .button-text
82
+
83
+ .heading-1
84
+
85
+ .heading-2
86
+
87
+ .heading-3
88
+
89
+ .input-floating-label
90
+
91
+ .list
92
+
93
+ .statement-1
94
+
95
+ .statement-2
96
+
97
+ .statement-3
98
+
99
+ .button-group
100
+
101
+ .container-xs
102
+
103
+ .container-sm
104
+
105
+ .container-md
106
+
107
+ .container-lg
108
+
109
+ .container
110
+
111
+ .container-xl
112
+
113
+ .container-max
114
+
115
+ .max-w-prose
116
+
117
+ .reel
118
+
119
+ .reel-indicators
120
+
121
+ .stack-4
122
+
123
+ .stack-8
124
+
125
+ .stack-16
126
+
127
+ .stack-24
128
+
129
+ .stack-32
130
+
131
+ .stack-48
132
+
133
+ .stack-64
134
+
135
+ .stack-s
136
+
137
+ .stack-m
138
+
139
+ .stack-l
140
+
141
+ .stack-text
142
+
143
+ .layout-4-5
144
+
145
+ .layout-5-4
146
+
147
+ .layout-6-4
148
+
149
+ .layout-4-6
150
+
151
+
152
+ ### Layer: utilities
153
+
154
+ .{lg,md,xl}:w-16
155
+ width: 1rem
156
+
157
+ .{lg,md,xl}:w-24
158
+ width: 1.5rem
159
+
160
+ .{lg,md,xl}:w-32
161
+ width: 2rem
162
+
163
+ .{lg,md,xl}:w-40
164
+ width: 2.5rem
165
+
166
+ .{lg,md,xl}:w-48
167
+ width: 3rem
168
+
169
+ .{lg,md}:font-20
170
+ font-size: var(--v-font-20-size)
171
+ line-height: var(--v-font-20-lineheight)
172
+
173
+ .{lg,md}:font-16
174
+ font-size: var(--v-font-16-size)
175
+ line-height: var(--v-font-16-lineheight)
176
+
177
+ .micro
178
+ font-size: var(--v-font-12-size)
179
+ line-height: var(--v-font-12-lineheight)
180
+ letter-spacing: .02em
181
+
182
+ .font-medium
183
+ font-weight: 500
184
+
185
+ .{lg,md}:font-24
186
+ font-size: var(--v-font-24-size)
187
+ line-height: var(--v-font-24-lineheight)
188
+
189
+ .{lg,md}:font-14
190
+ font-size: var(--v-font-14-size)
191
+ line-height: var(--v-font-14-lineheight)
192
+
193
+ .fade-in
194
+ animation: v-fade-in var(--v-transition-notable)
195
+
196
+ .fade-out
197
+ animation: v-fade-out var(--v-transition-notable)
198
+
199
+ .{lg,md,xl}:aspect-1/1
200
+ aspect-ratio: 1
201
+
202
+ .{lg,md,xl}:aspect-4/5
203
+ aspect-ratio: 4 / 5
204
+
205
+ .{lg,md,xl}:aspect-2/3
206
+ aspect-ratio: 2 / 3
207
+
208
+ .{lg,md,xl}:aspect-9/16
209
+ aspect-ratio: 9 / 16
210
+
211
+ .{lg,md,xl}:aspect-4/3
212
+ aspect-ratio: 4 / 3
213
+
214
+ .{lg,md,xl}:aspect-3/2
215
+ aspect-ratio: 3 / 2
216
+
217
+ .{lg,md,xl}:aspect-16/9
218
+ aspect-ratio: 16 / 9
219
+
220
+ .{lg,md,xl}:aspect-21/9
221
+ aspect-ratio: 21 / 9
222
+
223
+ .{lg,md,xl}:basis-auto
224
+ flex-basis: auto
225
+
226
+ .{lg,md,xl}:basis-0
227
+ flex-basis: 0
228
+
229
+ .{lg,md,xl}:basis-8
230
+ flex-basis: .5rem
231
+
232
+ .{lg,md,xl}:basis-16
233
+ flex-basis: 1rem
234
+
235
+ .{lg,md,xl}:basis-24
236
+ flex-basis: 1.5rem
237
+
238
+ .{lg,md,xl}:basis-32
239
+ flex-basis: 2rem
240
+
241
+ .{lg,md,xl}:basis-40
242
+ flex-basis: 2.5rem
243
+
244
+ .{lg,md,xl}:basis-48
245
+ flex-basis: 3rem
246
+
247
+ .{lg,md,xl}:basis-64
248
+ flex-basis: 4rem
249
+
250
+ .{lg,md,xl}:basis-1/2
251
+ flex-basis: 50%
252
+
253
+ .{lg,md,xl}:basis-full
254
+ flex-basis: 100%
255
+
256
+ .{lg,md,xl}:basis-xs
257
+ flex-basis: var(--v-size-grid-xs)
258
+
259
+ .{lg,md,xl}:basis-sm
260
+ flex-basis: var(--v-size-grid-sm)
261
+
262
+ .{lg,md,xl}:basis-md
263
+ flex-basis: var(--v-size-grid-md)
264
+
265
+ .{lg,md,xl}:basis-lg
266
+ flex-basis: var(--v-size-grid-lg)
267
+
268
+ .{lg,md,xl}:basis-xl
269
+ flex-basis: var(--v-size-grid-xl)
270
+
271
+ .bg-inherit
272
+ background-color: inherit
273
+
274
+ .bg-transparent
275
+ background-color: #0000
276
+
277
+ .bg-always-black
278
+ --background-color: var(--v-color-always-black)
279
+ background-color: var(--background-color)
280
+
281
+ .bg-always-white
282
+ --background-color: var(--v-color-always-white)
283
+ background-color: var(--background-color)
284
+
285
+ .bg-primary
286
+ --background-color: var(--v-color-background-primary)
287
+ background-color: var(--background-color)
288
+
289
+ .bg-secondary
290
+ --background-color: var(--v-color-background-secondary)
291
+ background-color: var(--background-color)
292
+
293
+ .{checked,current,selected}:bg-surface-neutral
294
+ --background-color: var(--v-color-surface-neutral)
295
+ background-color: var(--background-color)
296
+
297
+ .bg-surface-accent-blue
298
+ --background-color: var(--v-color-surface-accent-blue)
299
+ background-color: var(--background-color)
300
+
301
+ .bg-surface-feedback-green
302
+ --background-color: var(--v-color-surface-feedback-green)
303
+ background-color: var(--background-color)
304
+
305
+ .bg-surface-feedback-orange
306
+ --background-color: var(--v-color-surface-feedback-orange)
307
+ background-color: var(--background-color)
308
+
309
+ .bg-surface-feedback-red
310
+ --background-color: var(--v-color-surface-feedback-red)
311
+ background-color: var(--background-color)
312
+
313
+ .bg-feedback-gray
314
+ --background-color: var(--v-color-background-feedback-gray)
315
+ background-color: var(--background-color)
316
+
317
+ .bg-feedback-green
318
+ --background-color: var(--v-color-background-feedback-green)
319
+ background-color: var(--background-color)
320
+
321
+ .bg-feedback-orange
322
+ --background-color: var(--v-color-background-feedback-orange)
323
+ background-color: var(--background-color)
324
+
325
+ .bg-feedback-red
326
+ --background-color: var(--v-color-background-feedback-red)
327
+ background-color: var(--background-color)
328
+
329
+ .border-0
330
+ border-width: 0
331
+
332
+ .{checkbox-checked,checked,link-current,radio-checked,selected,tab-selected}:border
333
+ border-width: 1px
334
+
335
+ .{checkbox-checked,checked,link-current,radio-checked,selected,tab-selected}:border-2
336
+ border-width: 2px
337
+
338
+ .border-t-0
339
+ border-top-width: 0
340
+
341
+ .border-t
342
+ border-top-width: 1px
343
+
344
+ .border-t-2
345
+ border-top-width: 2px
346
+
347
+ .border-r-0
348
+ border-inline-end-width: 0
349
+
350
+ .border-r
351
+ border-inline-end-width: 1px
352
+
353
+ .border-r-2
354
+ border-inline-end-width: 2px
355
+
356
+ .border-b-0
357
+ border-bottom-width: 0
358
+
359
+ .border-b
360
+ border-bottom-width: 1px
361
+
362
+ .border-b-2
363
+ border-bottom-width: 2px
364
+
365
+ .border-l-0
366
+ border-inline-start-width: 0
367
+
368
+ .border-l
369
+ border-inline-start-width: 1px
370
+
371
+ .border-l-2
372
+ border-inline-start-width: 2px
373
+
374
+ .border-x-0
375
+ border-inline-width: 0
376
+
377
+ .border-x
378
+ border-inline-width: 1px
379
+
380
+ .border-x-2
381
+ border-inline-width: 2px
382
+
383
+ .border-y-0
384
+ border-block-width: 0
385
+
386
+ .border-y
387
+ border-block-width: 1px
388
+
389
+ .border-y-2
390
+ border-block-width: 2px
391
+
392
+ .border-ornament
393
+ --_border-color: var(--v-color-ornament-primary)
394
+
395
+ .border-always-black
396
+ --_border-color: var(--v-color-always-black)
397
+
398
+ .border-always-white
399
+ --_border-color: var(--v-color-always-white)
400
+
401
+ .{button-expanded,checkbox-checked,checked,current,expanded,hover,link-current,open,radio-checked,selected,tab-selected}:border-primary
402
+ --_border-color: var(--v-color-foreground-primary)
403
+
404
+ .border-secondary
405
+ --_border-color: var(--v-color-foreground-secondary)
406
+
407
+ .border-tertiary
408
+ --_border-color: var(--v-color-foreground-tertiary)
409
+
410
+ .{button-expanded,checkbox-checked,checked,current,expanded,focus,link-current,radio-checked,selected,tab-selected}:border-accent-blue
411
+ --_border-color: var(--v-color-foreground-accent-blue)
412
+
413
+ .border-feedback-green
414
+ --_border-color: var(--v-color-foreground-feedback-green)
415
+
416
+ .border-feedback-orange
417
+ --_border-color: var(--v-color-foreground-feedback-orange)
418
+
419
+ .border-feedback-red
420
+ --_border-color: var(--v-color-foreground-feedback-red)
421
+
422
+ .border-transparent
423
+ --_border-color: transparent
424
+
425
+ .border-inherit
426
+ --_border-color: inherit
427
+
428
+ .{checked,selected}:border-ring
429
+ box-shadow: inset 0 0 0 1px var(--_border-color, var(--v-color-ornament-primary))
430
+
431
+ .{checked,selected}:border-ring-2
432
+ box-shadow: inset 0 0 0 2px var(--_border-color, var(--v-color-ornament-primary))
433
+
434
+ .rounded-none
435
+ border-radius: 0
436
+
437
+ .rounded
438
+ border-radius: var(--v-radius-sm)
439
+
440
+ .rounded-sm
441
+ border-radius: var(--v-radius-sm)
442
+
443
+ .rounded-md
444
+ border-radius: var(--v-radius-md)
445
+
446
+ .rounded-lg
447
+ border-radius: var(--v-radius-lg)
448
+
449
+ .rounded-full
450
+ border-radius: var(--v-radius-full)
451
+
452
+ .rounded-t
453
+ border-start-start-radius: var(--v-radius-sm)
454
+ border-start-end-radius: var(--v-radius-sm)
455
+
456
+ .rounded-t-sm
457
+ border-start-start-radius: var(--v-radius-sm)
458
+ border-start-end-radius: var(--v-radius-sm)
459
+
460
+ .rounded-t-md
461
+ border-start-start-radius: var(--v-radius-md)
462
+ border-start-end-radius: var(--v-radius-md)
463
+
464
+ .rounded-t-lg
465
+ border-start-start-radius: var(--v-radius-lg)
466
+ border-start-end-radius: var(--v-radius-lg)
467
+
468
+ .rounded-t-full
469
+ border-start-start-radius: var(--v-radius-full)
470
+ border-start-end-radius: var(--v-radius-full)
471
+
472
+ .rounded-e
473
+ border-start-end-radius: var(--v-radius-sm)
474
+ border-end-end-radius: var(--v-radius-sm)
475
+
476
+ .rounded-e-sm
477
+ border-start-end-radius: var(--v-radius-sm)
478
+ border-end-end-radius: var(--v-radius-sm)
479
+
480
+ .rounded-e-md
481
+ border-start-end-radius: var(--v-radius-md)
482
+ border-end-end-radius: var(--v-radius-md)
483
+
484
+ .rounded-e-lg
485
+ border-start-end-radius: var(--v-radius-lg)
486
+ border-end-end-radius: var(--v-radius-lg)
487
+
488
+ .rounded-e-full
489
+ border-start-end-radius: var(--v-radius-full)
490
+ border-end-end-radius: var(--v-radius-full)
491
+
492
+ .rounded-b
493
+ border-end-end-radius: var(--v-radius-sm)
494
+ border-end-start-radius: var(--v-radius-sm)
495
+
496
+ .rounded-b-sm
497
+ border-end-end-radius: var(--v-radius-sm)
498
+ border-end-start-radius: var(--v-radius-sm)
499
+
500
+ .rounded-b-md
501
+ border-end-end-radius: var(--v-radius-md)
502
+ border-end-start-radius: var(--v-radius-md)
503
+
504
+ .rounded-b-lg
505
+ border-end-end-radius: var(--v-radius-lg)
506
+ border-end-start-radius: var(--v-radius-lg)
507
+
508
+ .rounded-b-full
509
+ border-end-end-radius: var(--v-radius-full)
510
+ border-end-start-radius: var(--v-radius-full)
511
+
512
+ .rounded-s
513
+ border-start-start-radius: var(--v-radius-sm)
514
+ border-end-start-radius: var(--v-radius-sm)
515
+
516
+ .rounded-s-sm
517
+ border-start-start-radius: var(--v-radius-sm)
518
+ border-end-start-radius: var(--v-radius-sm)
519
+
520
+ .rounded-s-md
521
+ border-start-start-radius: var(--v-radius-md)
522
+ border-end-start-radius: var(--v-radius-md)
523
+
524
+ .rounded-s-lg
525
+ border-start-start-radius: var(--v-radius-lg)
526
+ border-end-start-radius: var(--v-radius-lg)
527
+
528
+ .rounded-s-full
529
+ border-start-start-radius: var(--v-radius-full)
530
+ border-end-start-radius: var(--v-radius-full)
531
+
532
+ .contain-none
533
+ contain: none
534
+
535
+ .contain-content
536
+ contain: content
537
+
538
+ .{lg,md,xl}:flow-root
539
+ --_display-inner: flow-root
540
+ display: var(--_display-outer) var(--_display-inner)
541
+
542
+ .{lg,md,xl}:block
543
+ --_display-outer: block
544
+ display: var(--_display-outer) var(--_display-inner)
545
+ --_display-outer:
546
+ display: block
547
+
548
+ .{lg,md,xl}:inline
549
+ --_display-outer: inline
550
+ display: var(--_display-outer) var(--_display-inner)
551
+
552
+ .{lg,md,xl}:contents
553
+ display: contents
554
+
555
+ .{lg,md,xl}:flex
556
+ --_display-inner: flex
557
+ display: var(--_display-outer) flex
558
+
559
+ .{lg,md,xl}:flex-row
560
+ --_display-inner: flex
561
+ display: var(--_display-outer) flex
562
+ flex-direction: row
563
+
564
+ .{lg,md,xl}:flex-col
565
+ --_display-inner: flex
566
+ display: var(--_display-outer) flex
567
+ flex-direction: column
568
+
569
+ .{lg,md,xl}:flex-row-reverse
570
+ --_display-inner: flex
571
+ display: var(--_display-outer) flex
572
+ flex-direction: row-reverse
573
+
574
+ .{lg,md,xl}:flex-col-reverse
575
+ --_display-inner: flex
576
+ display: var(--_display-outer) flex
577
+ flex-direction: column-reverse
578
+
579
+ .{lg,md,xl}:flex-wrap
580
+ flex-wrap: wrap
581
+
582
+ .{lg,md,xl}:flex-nowrap
583
+ flex-wrap: nowrap
584
+
585
+ .{lg,md,xl}:flex-grow
586
+ flex-grow: 1
587
+
588
+ .{lg,md,xl}:flex-grow-0
589
+ flex-grow: 0
590
+
591
+ .{lg,md,xl}:flex-shrink
592
+ flex-shrink: 1
593
+
594
+ .{lg,md,xl}:flex-shrink-0
595
+ flex-shrink: 0
596
+
597
+ .{lg,md,xl}:items-start
598
+ align-items: flex-start
599
+
600
+ .{lg,md,xl}:items-end
601
+ align-items: flex-end
602
+
603
+ .{lg,md,xl}:items-center
604
+ align-items: center
605
+
606
+ .{lg,md,xl}:items-stretch
607
+ align-items: stretch
608
+
609
+ .{lg,md,xl}:self-start
610
+ align-self: flex-start
611
+ align-self: start
612
+
613
+ .{lg,md,xl}:self-end
614
+ align-self: flex-end
615
+
616
+ .{lg,md,xl}:self-center
617
+ align-self: center
618
+
619
+ .{lg,md,xl}:self-stretch
620
+ align-self: stretch
621
+
622
+ .{lg,md,xl}:justify-start
623
+ justify-content: flex-start
624
+
625
+ .{lg,md,xl}:justify-end
626
+ justify-content: flex-end
627
+
628
+ .{lg,md,xl}:justify-around
629
+ justify-content: space-around
630
+
631
+ .{lg,md,xl}:justify-between
632
+ justify-content: space-between
633
+
634
+ .{lg,md,xl}:justify-evenly
635
+ justify-content: space-evenly
636
+
637
+ .{lg,md,xl}:justify-center
638
+ justify-content: center
639
+
640
+ .font-light
641
+ font-weight: 300
642
+
643
+ .{lg,md,xl}:gap-0
644
+ gap: 0
645
+
646
+ .{lg,md,xl}:gap-y-0
647
+ row-gap: 0
648
+
649
+ .{lg,md,xl}:gap-x-0
650
+ column-gap: 0
651
+
652
+ .{lg,md,xl}:gap-4
653
+ gap: .25rem
654
+
655
+ .{lg,md,xl}:gap-y-4
656
+ row-gap: .25rem
657
+
658
+ .{lg,md,xl}:gap-x-4
659
+ column-gap: .25rem
660
+
661
+ .{lg,md,xl}:gap-8
662
+ gap: .5rem
663
+
664
+ .{lg,md,xl}:gap-y-8
665
+ row-gap: .5rem
666
+
667
+ .{lg,md,xl}:gap-x-8
668
+ column-gap: .5rem
669
+
670
+ .{lg,md,xl}:gap-16
671
+ gap: 1rem
672
+
673
+ .{lg,md,xl}:gap-y-16
674
+ row-gap: 1rem
675
+
676
+ .{lg,md,xl}:gap-x-16
677
+ column-gap: 1rem
678
+
679
+ .{lg,md,xl}:gap-24
680
+ gap: 1.5rem
681
+
682
+ .{lg,md,xl}:gap-y-24
683
+ row-gap: 1.5rem
684
+
685
+ .{lg,md,xl}:gap-x-24
686
+ column-gap: 1.5rem
687
+
688
+ .{lg,md,xl}:gap-32
689
+ gap: 2rem
690
+
691
+ .{lg,md,xl}:gap-y-32
692
+ row-gap: 2rem
693
+
694
+ .{lg,md,xl}:gap-x-32
695
+ column-gap: 2rem
696
+
697
+ .{lg,md,xl}:gap-48
698
+ gap: 3rem
699
+
700
+ .{lg,md,xl}:gap-y-48
701
+ row-gap: 3rem
702
+
703
+ .{lg,md,xl}:gap-x-48
704
+ column-gap: 3rem
705
+
706
+ .{lg,md,xl}:gap-64
707
+ gap: 4rem
708
+
709
+ .{lg,md,xl}:gap-y-64
710
+ row-gap: 4rem
711
+
712
+ .{lg,md,xl}:gap-x-64
713
+ column-gap: 4rem
714
+
715
+ .{lg,md,xl}:gap-y-l
716
+ row-gap: var(--v-space-l)
717
+
718
+ .{lg,md,xl}:gap-y-m
719
+ row-gap: var(--v-space-m)
720
+
721
+ .{lg,md,xl}:gap-y-s
722
+ row-gap: var(--v-space-s)
723
+
724
+ .{lg,md,xl}:gap-x-gutter
725
+ column-gap: var(--v-space-gutter)
726
+
727
+ .{lg,md,xl}:grid
728
+ --_display-inner: grid
729
+ display: var(--_display-outer) grid
730
+
731
+ .{lg,md,xl}:grid-cols-2
732
+ --_display-inner: grid
733
+ display: var(--_display-outer) grid
734
+ grid-template-columns: repeat(2, minmax(0, 1fr))
735
+
736
+ .{lg,md,xl}:grid-cols-3
737
+ --_display-inner: grid
738
+ display: var(--_display-outer) grid
739
+ grid-template-columns: repeat(3, minmax(0, 1fr))
740
+
741
+ .{lg,md,xl}:grid-cols-4
742
+ --_display-inner: grid
743
+ display: var(--_display-outer) grid
744
+ grid-template-columns: repeat(4, minmax(0, 1fr))
745
+
746
+ .{lg,md,xl}:h-0
747
+ height: 0
748
+
749
+ .{lg,md,xl}:h-8
750
+ height: .5rem
751
+
752
+ .{lg,md,xl}:h-16
753
+ height: 1rem
754
+
755
+ .{lg,md,xl}:h-24
756
+ height: 1.5rem
757
+
758
+ .{lg,md,xl}:h-32
759
+ height: 2rem
760
+
761
+ .{lg,md,xl}:h-40
762
+ height: 2.5rem
763
+
764
+ .{lg,md,xl}:h-48
765
+ height: 3rem
766
+
767
+ .{lg,md,xl}:h-64
768
+ height: 4rem
769
+
770
+ .h-1lh
771
+ height: 1lh
772
+
773
+ .{lg,md,xl}:h-full
774
+ height: 100%
775
+
776
+ .{lg,md,xl}:h-fit
777
+ height: fit-content
778
+
779
+ .{lg,md,xl}:min-h-0
780
+ min-height: 0
781
+
782
+ .{lg,md,xl}:min-h-8
783
+ min-height: .5rem
784
+
785
+ .{lg,md,xl}:min-h-16
786
+ min-height: 1rem
787
+
788
+ .{lg,md,xl}:min-h-24
789
+ min-height: 1.5rem
790
+
791
+ .{lg,md,xl}:min-h-32
792
+ min-height: 2rem
793
+
794
+ .{lg,md,xl}:min-h-40
795
+ min-height: 2.5rem
796
+
797
+ .{lg,md,xl}:min-h-48
798
+ min-height: 3rem
799
+
800
+ .{lg,md,xl}:min-h-64
801
+ min-height: 4rem
802
+
803
+ .{lg,md,xl}:min-h-full
804
+ min-height: 100%
805
+
806
+ .{lg,md,xl}:min-h-fit
807
+ min-height: fit-content
808
+
809
+ .{lg,md,xl}:max-h-0
810
+ max-height: 0
811
+
812
+ .{lg,md,xl}:max-h-8
813
+ max-height: .5rem
814
+
815
+ .{lg,md,xl}:max-h-16
816
+ max-height: 1rem
817
+
818
+ .{lg,md,xl}:max-h-24
819
+ max-height: 1.5rem
820
+
821
+ .{lg,md,xl}:max-h-32
822
+ max-height: 2rem
823
+
824
+ .{lg,md,xl}:max-h-40
825
+ max-height: 2.5rem
826
+
827
+ .{lg,md,xl}:max-h-48
828
+ max-height: 3rem
829
+
830
+ .{lg,md,xl}:max-h-64
831
+ max-height: 4rem
832
+
833
+ .{lg,md,xl}:max-h-full
834
+ max-height: 100%
835
+
836
+ .{lg,md,xl}:max-h-fit
837
+ max-height: fit-content
838
+
839
+ .{empty,lg,lg:until-xl,md,md:until-lg,md:until-xl,until-lg,until-md,until-xl,xl}:hidden
840
+ display: none
841
+
842
+ .hyphens
843
+ hyphens: auto
844
+
845
+ .end-0
846
+ inset-inline-end: 0
847
+
848
+ .start-0
849
+ inset-inline-start: 0
850
+
851
+ .top-0
852
+ top: 0
853
+
854
+ .bottom-0
855
+ bottom: 0
856
+
857
+ .end-4
858
+ inset-inline-end: .25rem
859
+
860
+ .start-4
861
+ inset-inline-start: .25rem
862
+
863
+ .top-4
864
+ top: .25rem
865
+
866
+ .bottom-4
867
+ bottom: .25rem
868
+
869
+ .end-8
870
+ inset-inline-end: .5rem
871
+
872
+ .start-8
873
+ inset-inline-start: .5rem
874
+
875
+ .top-8
876
+ top: .5rem
877
+
878
+ .bottom-8
879
+ bottom: .5rem
880
+
881
+ .end-16
882
+ inset-inline-end: 1rem
883
+
884
+ .start-16
885
+ inset-inline-start: 1rem
886
+
887
+ .top-16
888
+ top: 1rem
889
+
890
+ .bottom-16
891
+ bottom: 1rem
892
+
893
+ .end-24
894
+ inset-inline-end: 1.5rem
895
+
896
+ .start-24
897
+ inset-inline-start: 1.5rem
898
+
899
+ .top-24
900
+ top: 1.5rem
901
+
902
+ .bottom-24
903
+ bottom: 1.5rem
904
+
905
+ .end-32
906
+ inset-inline-end: 2rem
907
+
908
+ .start-32
909
+ inset-inline-start: 2rem
910
+
911
+ .top-32
912
+ top: 2rem
913
+
914
+ .bottom-32
915
+ bottom: 2rem
916
+
917
+ .end-48
918
+ inset-inline-end: 3rem
919
+
920
+ .start-48
921
+ inset-inline-start: 3rem
922
+
923
+ .top-48
924
+ top: 3rem
925
+
926
+ .bottom-48
927
+ bottom: 3rem
928
+
929
+ .end-64
930
+ inset-inline-end: 4rem
931
+
932
+ .start-64
933
+ inset-inline-start: 4rem
934
+
935
+ .top-64
936
+ top: 4rem
937
+
938
+ .bottom-64
939
+ bottom: 4rem
940
+
941
+ .end-1/2
942
+ inset-inline-end: 50%
943
+
944
+ .start-1/2
945
+ inset-inline-start: 50%
946
+
947
+ .end-full
948
+ inset-inline-end: 100%
949
+
950
+ .start-full
951
+ inset-inline-start: 100%
952
+
953
+ .end-auto
954
+ inset-inline-end: auto
955
+
956
+ .start-auto
957
+ inset-inline-start: auto
958
+
959
+ .top-1/2
960
+ top: 50%
961
+
962
+ .bottom-1/2
963
+ bottom: 50%
964
+
965
+ .top-full
966
+ top: 100%
967
+
968
+ .bottom-full
969
+ bottom: 100%
970
+
971
+ .top-auto
972
+ top: auto
973
+
974
+ .bottom-auto
975
+ bottom: auto
976
+
977
+ .{lg,md,xl}:m-auto
978
+ margin: auto
979
+
980
+ .{lg,md,xl}:my-auto
981
+ margin-top: auto
982
+ margin-bottom: auto
983
+
984
+ .{lg,md,xl}:mt-auto
985
+ margin-top: auto
986
+
987
+ .{lg,md,xl}:mb-auto
988
+ margin-bottom: auto
989
+
990
+ .{lg,md,xl}:mx-auto
991
+ margin-inline-end: auto
992
+ margin-inline-start: auto
993
+
994
+ .{lg,md,xl}:mr-auto
995
+ margin-inline-end: auto
996
+
997
+ .{lg,md,xl}:ml-auto
998
+ margin-inline-start: auto
999
+
1000
+ .{lg,md,xl}:m-0
1001
+ margin: 0
1002
+
1003
+ .{lg,md,xl}:my-0
1004
+ margin-top: 0
1005
+ margin-bottom: 0
1006
+
1007
+ .{lg,md,xl}:mt-0
1008
+ margin-top: 0
1009
+
1010
+ .{lg,md,xl}:mb-0
1011
+ margin-bottom: 0
1012
+
1013
+ .{lg,md,xl}:mx-0
1014
+ margin-inline-end: 0
1015
+ margin-inline-start: 0
1016
+
1017
+ .{lg,md,xl}:mr-0
1018
+ margin-inline-end: 0
1019
+
1020
+ .{lg,md,xl}:ml-0
1021
+ margin-inline-start: 0
1022
+
1023
+ .{lg,md,xl}:m-2
1024
+ margin: .125rem
1025
+
1026
+ .{lg,md,xl}:-m-2
1027
+ margin: -.125rem
1028
+
1029
+ .{lg,md,xl}:my-2
1030
+ margin-top: .125rem
1031
+ margin-bottom: .125rem
1032
+
1033
+ .{lg,md,xl}:mt-2
1034
+ margin-top: .125rem
1035
+
1036
+ .{lg,md,xl}:mb-2
1037
+ margin-bottom: .125rem
1038
+
1039
+ .{lg,md,xl}:-my-2
1040
+ margin-top: -.125rem
1041
+ margin-bottom: -.125rem
1042
+
1043
+ .{lg,md,xl}:-mt-2
1044
+ margin-top: -.125rem
1045
+
1046
+ .{lg,md,xl}:-mb-2
1047
+ margin-bottom: -.125rem
1048
+
1049
+ .{lg,md,xl}:mx-2
1050
+ margin-inline-end: .125rem
1051
+ margin-inline-start: .125rem
1052
+
1053
+ .{lg,md,xl}:mr-2
1054
+ margin-inline-end: .125rem
1055
+
1056
+ .{lg,md,xl}:ml-2
1057
+ margin-inline-start: .125rem
1058
+
1059
+ .{lg,md,xl}:-mx-2
1060
+ margin-inline-end: -.125rem
1061
+ margin-inline-start: -.125rem
1062
+
1063
+ .{lg,md,xl}:-mr-2
1064
+ margin-inline-end: -.125rem
1065
+
1066
+ .{lg,md,xl}:-ml-2
1067
+ margin-inline-start: -.125rem
1068
+
1069
+ .{lg,md,xl}:m-4
1070
+ margin: .25rem
1071
+
1072
+ .{lg,md,xl}:-m-4
1073
+ margin: -.25rem
1074
+
1075
+ .{lg,md,xl}:my-4
1076
+ margin-top: .25rem
1077
+ margin-bottom: .25rem
1078
+
1079
+ .{lg,md,xl}:mt-4
1080
+ margin-top: .25rem
1081
+
1082
+ .{lg,md,xl}:mb-4
1083
+ margin-bottom: .25rem
1084
+
1085
+ .{lg,md,xl}:-my-4
1086
+ margin-top: -.25rem
1087
+ margin-bottom: -.25rem
1088
+
1089
+ .{lg,md,xl}:-mt-4
1090
+ margin-top: -.25rem
1091
+
1092
+ .{lg,md,xl}:-mb-4
1093
+ margin-bottom: -.25rem
1094
+
1095
+ .{lg,md,xl}:mx-4
1096
+ margin-inline-end: .25rem
1097
+ margin-inline-start: .25rem
1098
+
1099
+ .{lg,md,xl}:mr-4
1100
+ margin-inline-end: .25rem
1101
+
1102
+ .{lg,md,xl}:ml-4
1103
+ margin-inline-start: .25rem
1104
+
1105
+ .{lg,md,xl}:-mx-4
1106
+ margin-inline-end: -.25rem
1107
+ margin-inline-start: -.25rem
1108
+
1109
+ .{lg,md,xl}:-mr-4
1110
+ margin-inline-end: -.25rem
1111
+
1112
+ .{lg,md,xl}:-ml-4
1113
+ margin-inline-start: -.25rem
1114
+
1115
+ .{lg,md,xl}:m-8
1116
+ margin: .5rem
1117
+
1118
+ .{lg,md,xl}:-m-8
1119
+ margin: -.5rem
1120
+
1121
+ .{lg,md,xl}:my-8
1122
+ margin-top: .5rem
1123
+ margin-bottom: .5rem
1124
+
1125
+ .{lg,md,xl}:mt-8
1126
+ margin-top: .5rem
1127
+
1128
+ .{lg,md,xl}:mb-8
1129
+ margin-bottom: .5rem
1130
+
1131
+ .{lg,md,xl}:-my-8
1132
+ margin-top: -.5rem
1133
+ margin-bottom: -.5rem
1134
+
1135
+ .{lg,md,xl}:-mt-8
1136
+ margin-top: -.5rem
1137
+
1138
+ .{lg,md,xl}:-mb-8
1139
+ margin-bottom: -.5rem
1140
+
1141
+ .{lg,md,xl}:mx-8
1142
+ margin-inline-end: .5rem
1143
+ margin-inline-start: .5rem
1144
+
1145
+ .{lg,md,xl}:mr-8
1146
+ margin-inline-end: .5rem
1147
+
1148
+ .{lg,md,xl}:ml-8
1149
+ margin-inline-start: .5rem
1150
+
1151
+ .{lg,md,xl}:-mx-8
1152
+ margin-inline-end: -.5rem
1153
+ margin-inline-start: -.5rem
1154
+
1155
+ .{lg,md,xl}:-mr-8
1156
+ margin-inline-end: -.5rem
1157
+
1158
+ .{lg,md,xl}:-ml-8
1159
+ margin-inline-start: -.5rem
1160
+
1161
+ .{lg,md,xl}:m-16
1162
+ margin: 1rem
1163
+
1164
+ .{lg,md,xl}:-m-16
1165
+ margin: -1rem
1166
+
1167
+ .{lg,md,xl}:my-16
1168
+ margin-top: 1rem
1169
+ margin-bottom: 1rem
1170
+
1171
+ .{lg,md,xl}:mt-16
1172
+ margin-top: 1rem
1173
+
1174
+ .{lg,md,xl}:mb-16
1175
+ margin-bottom: 1rem
1176
+
1177
+ .{lg,md,xl}:-my-16
1178
+ margin-top: -1rem
1179
+ margin-bottom: -1rem
1180
+
1181
+ .{lg,md,xl}:-mt-16
1182
+ margin-top: -1rem
1183
+
1184
+ .{lg,md,xl}:-mb-16
1185
+ margin-bottom: -1rem
1186
+
1187
+ .{lg,md,xl}:mx-16
1188
+ margin-inline-end: 1rem
1189
+ margin-inline-start: 1rem
1190
+
1191
+ .{lg,md,xl}:mr-16
1192
+ margin-inline-end: 1rem
1193
+
1194
+ .{lg,md,xl}:ml-16
1195
+ margin-inline-start: 1rem
1196
+
1197
+ .{lg,md,xl}:-mx-16
1198
+ margin-inline-end: -1rem
1199
+ margin-inline-start: -1rem
1200
+
1201
+ .{lg,md,xl}:-mr-16
1202
+ margin-inline-end: -1rem
1203
+
1204
+ .{lg,md,xl}:-ml-16
1205
+ margin-inline-start: -1rem
1206
+
1207
+ .{lg,md,xl}:m-24
1208
+ margin: 1.5rem
1209
+
1210
+ .{lg,md,xl}:-m-24
1211
+ margin: -1.5rem
1212
+
1213
+ .{lg,md,xl}:my-24
1214
+ margin-top: 1.5rem
1215
+ margin-bottom: 1.5rem
1216
+
1217
+ .{lg,md,xl}:mt-24
1218
+ margin-top: 1.5rem
1219
+
1220
+ .{lg,md,xl}:mb-24
1221
+ margin-bottom: 1.5rem
1222
+
1223
+ .{lg,md,xl}:-my-24
1224
+ margin-top: -1.5rem
1225
+ margin-bottom: -1.5rem
1226
+
1227
+ .{lg,md,xl}:-mt-24
1228
+ margin-top: -1.5rem
1229
+
1230
+ .{lg,md,xl}:-mb-24
1231
+ margin-bottom: -1.5rem
1232
+
1233
+ .{lg,md,xl}:mx-24
1234
+ margin-inline-end: 1.5rem
1235
+ margin-inline-start: 1.5rem
1236
+
1237
+ .{lg,md,xl}:mr-24
1238
+ margin-inline-end: 1.5rem
1239
+
1240
+ .{lg,md,xl}:ml-24
1241
+ margin-inline-start: 1.5rem
1242
+
1243
+ .{lg,md,xl}:-mx-24
1244
+ margin-inline-end: -1.5rem
1245
+ margin-inline-start: -1.5rem
1246
+
1247
+ .{lg,md,xl}:-mr-24
1248
+ margin-inline-end: -1.5rem
1249
+
1250
+ .{lg,md,xl}:-ml-24
1251
+ margin-inline-start: -1.5rem
1252
+
1253
+ .{lg,md,xl}:m-32
1254
+ margin: 2rem
1255
+
1256
+ .{lg,md,xl}:-m-32
1257
+ margin: -2rem
1258
+
1259
+ .{lg,md,xl}:my-32
1260
+ margin-top: 2rem
1261
+ margin-bottom: 2rem
1262
+
1263
+ .{lg,md,xl}:mt-32
1264
+ margin-top: 2rem
1265
+
1266
+ .{lg,md,xl}:mb-32
1267
+ margin-bottom: 2rem
1268
+
1269
+ .{lg,md,xl}:-my-32
1270
+ margin-top: -2rem
1271
+ margin-bottom: -2rem
1272
+
1273
+ .{lg,md,xl}:-mt-32
1274
+ margin-top: -2rem
1275
+
1276
+ .{lg,md,xl}:-mb-32
1277
+ margin-bottom: -2rem
1278
+
1279
+ .{lg,md,xl}:mx-32
1280
+ margin-inline-end: 2rem
1281
+ margin-inline-start: 2rem
1282
+
1283
+ .{lg,md,xl}:mr-32
1284
+ margin-inline-end: 2rem
1285
+
1286
+ .{lg,md,xl}:ml-32
1287
+ margin-inline-start: 2rem
1288
+
1289
+ .{lg,md,xl}:-mx-32
1290
+ margin-inline-end: -2rem
1291
+ margin-inline-start: -2rem
1292
+
1293
+ .{lg,md,xl}:-mr-32
1294
+ margin-inline-end: -2rem
1295
+
1296
+ .{lg,md,xl}:-ml-32
1297
+ margin-inline-start: -2rem
1298
+
1299
+ .{lg,md,xl}:m-48
1300
+ margin: 3rem
1301
+
1302
+ .{lg,md,xl}:-m-48
1303
+ margin: -3rem
1304
+
1305
+ .{lg,md,xl}:my-48
1306
+ margin-top: 3rem
1307
+ margin-bottom: 3rem
1308
+
1309
+ .{lg,md,xl}:mt-48
1310
+ margin-top: 3rem
1311
+
1312
+ .{lg,md,xl}:mb-48
1313
+ margin-bottom: 3rem
1314
+
1315
+ .{lg,md,xl}:-my-48
1316
+ margin-top: -3rem
1317
+ margin-bottom: -3rem
1318
+
1319
+ .{lg,md,xl}:-mt-48
1320
+ margin-top: -3rem
1321
+
1322
+ .{lg,md,xl}:-mb-48
1323
+ margin-bottom: -3rem
1324
+
1325
+ .{lg,md,xl}:mx-48
1326
+ margin-inline-end: 3rem
1327
+ margin-inline-start: 3rem
1328
+
1329
+ .{lg,md,xl}:mr-48
1330
+ margin-inline-end: 3rem
1331
+
1332
+ .{lg,md,xl}:ml-48
1333
+ margin-inline-start: 3rem
1334
+
1335
+ .{lg,md,xl}:-mx-48
1336
+ margin-inline-end: -3rem
1337
+ margin-inline-start: -3rem
1338
+
1339
+ .{lg,md,xl}:-mr-48
1340
+ margin-inline-end: -3rem
1341
+
1342
+ .{lg,md,xl}:-ml-48
1343
+ margin-inline-start: -3rem
1344
+
1345
+ .{lg,md,xl}:m-64
1346
+ margin: 4rem
1347
+
1348
+ .{lg,md,xl}:-m-64
1349
+ margin: -4rem
1350
+
1351
+ .{lg,md,xl}:my-64
1352
+ margin-top: 4rem
1353
+ margin-bottom: 4rem
1354
+
1355
+ .{lg,md,xl}:mt-64
1356
+ margin-top: 4rem
1357
+
1358
+ .{lg,md,xl}:mb-64
1359
+ margin-bottom: 4rem
1360
+
1361
+ .{lg,md,xl}:-my-64
1362
+ margin-top: -4rem
1363
+ margin-bottom: -4rem
1364
+
1365
+ .{lg,md,xl}:-mt-64
1366
+ margin-top: -4rem
1367
+
1368
+ .{lg,md,xl}:-mb-64
1369
+ margin-bottom: -4rem
1370
+
1371
+ .{lg,md,xl}:mx-64
1372
+ margin-inline-end: 4rem
1373
+ margin-inline-start: 4rem
1374
+
1375
+ .{lg,md,xl}:mr-64
1376
+ margin-inline-end: 4rem
1377
+
1378
+ .{lg,md,xl}:ml-64
1379
+ margin-inline-start: 4rem
1380
+
1381
+ .{lg,md,xl}:-mx-64
1382
+ margin-inline-end: -4rem
1383
+ margin-inline-start: -4rem
1384
+
1385
+ .{lg,md,xl}:-mr-64
1386
+ margin-inline-end: -4rem
1387
+
1388
+ .{lg,md,xl}:-ml-64
1389
+ margin-inline-start: -4rem
1390
+
1391
+ .{lg,md,xl}:my-l
1392
+ margin-top: var(--v-space-l)
1393
+ margin-bottom: var(--v-space-l)
1394
+
1395
+ .{lg,md,xl}:mt-l
1396
+ margin-top: var(--v-space-l)
1397
+
1398
+ .{lg,md,xl}:mb-l
1399
+ margin-bottom: var(--v-space-l)
1400
+
1401
+ .{lg,md,xl}:my-m
1402
+ margin-top: var(--v-space-m)
1403
+ margin-bottom: var(--v-space-m)
1404
+
1405
+ .{lg,md,xl}:mt-m
1406
+ margin-top: var(--v-space-m)
1407
+
1408
+ .{lg,md,xl}:mb-m
1409
+ margin-bottom: var(--v-space-m)
1410
+
1411
+ .{lg,md,xl}:my-s
1412
+ margin-top: var(--v-space-s)
1413
+ margin-bottom: var(--v-space-s)
1414
+
1415
+ .{lg,md,xl}:mt-s
1416
+ margin-top: var(--v-space-s)
1417
+
1418
+ .{lg,md,xl}:mb-s
1419
+ margin-bottom: var(--v-space-s)
1420
+
1421
+ .{lg,md,xl}:mx-pagemargin
1422
+ margin-inline-end: var(--v-space-pagemargin)
1423
+ margin-inline-start: var(--v-space-pagemargin)
1424
+
1425
+ .{lg,md,xl}:mr-pagemargin
1426
+ margin-inline-end: var(--v-space-pagemargin)
1427
+
1428
+ .{lg,md,xl}:ml-pagemargin
1429
+ margin-inline-start: var(--v-space-pagemargin)
1430
+
1431
+ .object-fill
1432
+ object-fit: fill
1433
+
1434
+ .object-cover
1435
+ object-fit: cover
1436
+
1437
+ .object-contain
1438
+ object-fit: contain
1439
+
1440
+ .{lg,md,xl}:overflow-auto
1441
+ overflow: auto
1442
+
1443
+ .{lg,md,xl}:overflow-hidden
1444
+ overflow: hidden
1445
+
1446
+ .{lg,md,xl}:overflow-visible
1447
+ overflow: visible
1448
+
1449
+ .{lg,md,xl}:overflow-clip
1450
+ overflow: clip
1451
+
1452
+ .{lg,md,xl}:overflow-x-auto
1453
+ overflow-x: auto
1454
+
1455
+ .{lg,md,xl}:overflow-x-hidden
1456
+ overflow-x: hidden
1457
+
1458
+ .{lg,md,xl}:overflow-x-visible
1459
+ overflow-x: visible
1460
+
1461
+ .{lg,md,xl}:overflow-x-clip
1462
+ overflow-x: clip
1463
+
1464
+ .{lg,md,xl}:overflow-y-auto
1465
+ overflow-y: auto
1466
+
1467
+ .{lg,md,xl}:overflow-y-hidden
1468
+ overflow-y: hidden
1469
+
1470
+ .{lg,md,xl}:overflow-y-visible
1471
+ overflow-y: visible
1472
+
1473
+ .{lg,md,xl}:overflow-y-clip
1474
+ overflow-y: clip
1475
+
1476
+ .{lg,md,xl}:p-0
1477
+ padding: 0
1478
+
1479
+ .{lg,md,xl}:py-0
1480
+ padding-top: 0
1481
+ padding-bottom: 0
1482
+
1483
+ .{lg,md,xl}:pt-0
1484
+ padding-top: 0
1485
+
1486
+ .{lg,md,xl}:pb-0
1487
+ padding-bottom: 0
1488
+
1489
+ .{lg,md,xl}:px-0
1490
+ padding-inline-end: 0
1491
+ padding-inline-start: 0
1492
+
1493
+ .{lg,md,xl}:pr-0
1494
+ padding-inline-end: 0
1495
+
1496
+ .{lg,md,xl}:pl-0
1497
+ padding-inline-start: 0
1498
+
1499
+ .{lg,md,xl}:p-2
1500
+ padding: .125rem
1501
+
1502
+ .{lg,md,xl}:py-2
1503
+ padding-top: .125rem
1504
+ padding-bottom: .125rem
1505
+
1506
+ .{lg,md,xl}:pt-2
1507
+ padding-top: .125rem
1508
+
1509
+ .{lg,md,xl}:pb-2
1510
+ padding-bottom: .125rem
1511
+
1512
+ .{lg,md,xl}:px-2
1513
+ padding-inline-end: .125rem
1514
+ padding-inline-start: .125rem
1515
+
1516
+ .{lg,md,xl}:pr-2
1517
+ padding-inline-end: .125rem
1518
+
1519
+ .{lg,md,xl}:pl-2
1520
+ padding-inline-start: .125rem
1521
+
1522
+ .{lg,md,xl}:p-4
1523
+ padding: .25rem
1524
+
1525
+ .{lg,md,xl}:py-4
1526
+ padding-top: .25rem
1527
+ padding-bottom: .25rem
1528
+
1529
+ .{lg,md,xl}:pt-4
1530
+ padding-top: .25rem
1531
+
1532
+ .{lg,md,xl}:pb-4
1533
+ padding-bottom: .25rem
1534
+
1535
+ .{lg,md,xl}:px-4
1536
+ padding-inline-end: .25rem
1537
+ padding-inline-start: .25rem
1538
+
1539
+ .{lg,md,xl}:pr-4
1540
+ padding-inline-end: .25rem
1541
+
1542
+ .{lg,md,xl}:pl-4
1543
+ padding-inline-start: .25rem
1544
+
1545
+ .{lg,md,xl}:p-8
1546
+ padding: .5rem
1547
+
1548
+ .{lg,md,xl}:py-8
1549
+ padding-top: .5rem
1550
+ padding-bottom: .5rem
1551
+
1552
+ .{lg,md,xl}:pt-8
1553
+ padding-top: .5rem
1554
+
1555
+ .{lg,md,xl}:pb-8
1556
+ padding-bottom: .5rem
1557
+
1558
+ .{lg,md,xl}:px-8
1559
+ padding-inline-end: .5rem
1560
+ padding-inline-start: .5rem
1561
+
1562
+ .{lg,md,xl}:pr-8
1563
+ padding-inline-end: .5rem
1564
+
1565
+ .{lg,md,xl}:pl-8
1566
+ padding-inline-start: .5rem
1567
+
1568
+ .{lg,md,xl}:p-16
1569
+ padding: 1rem
1570
+
1571
+ .{lg,md,xl}:py-16
1572
+ padding-top: 1rem
1573
+ padding-bottom: 1rem
1574
+
1575
+ .{lg,md,xl}:pt-16
1576
+ padding-top: 1rem
1577
+
1578
+ .{lg,md,xl}:pb-16
1579
+ padding-bottom: 1rem
1580
+
1581
+ .{lg,md,xl}:px-16
1582
+ padding-inline-end: 1rem
1583
+ padding-inline-start: 1rem
1584
+
1585
+ .{lg,md,xl}:pr-16
1586
+ padding-inline-end: 1rem
1587
+
1588
+ .{lg,md,xl}:pl-16
1589
+ padding-inline-start: 1rem
1590
+
1591
+ .{lg,md,xl}:p-24
1592
+ padding: 1.5rem
1593
+
1594
+ .{lg,md,xl}:py-24
1595
+ padding-top: 1.5rem
1596
+ padding-bottom: 1.5rem
1597
+
1598
+ .{lg,md,xl}:pt-24
1599
+ padding-top: 1.5rem
1600
+
1601
+ .{lg,md,xl}:pb-24
1602
+ padding-bottom: 1.5rem
1603
+
1604
+ .{lg,md,xl}:px-24
1605
+ padding-inline-end: 1.5rem
1606
+ padding-inline-start: 1.5rem
1607
+
1608
+ .{lg,md,xl}:pr-24
1609
+ padding-inline-end: 1.5rem
1610
+
1611
+ .{lg,md,xl}:pl-24
1612
+ padding-inline-start: 1.5rem
1613
+
1614
+ .{lg,md,xl}:p-32
1615
+ padding: 2rem
1616
+
1617
+ .{lg,md,xl}:py-32
1618
+ padding-top: 2rem
1619
+ padding-bottom: 2rem
1620
+
1621
+ .{lg,md,xl}:pt-32
1622
+ padding-top: 2rem
1623
+
1624
+ .{lg,md,xl}:pb-32
1625
+ padding-bottom: 2rem
1626
+
1627
+ .{lg,md,xl}:px-32
1628
+ padding-inline-end: 2rem
1629
+ padding-inline-start: 2rem
1630
+
1631
+ .{lg,md,xl}:pr-32
1632
+ padding-inline-end: 2rem
1633
+
1634
+ .{lg,md,xl}:pl-32
1635
+ padding-inline-start: 2rem
1636
+
1637
+ .{lg,md,xl}:p-48
1638
+ padding: 3rem
1639
+
1640
+ .{lg,md,xl}:py-48
1641
+ padding-top: 3rem
1642
+ padding-bottom: 3rem
1643
+
1644
+ .{lg,md,xl}:pt-48
1645
+ padding-top: 3rem
1646
+
1647
+ .{lg,md,xl}:pb-48
1648
+ padding-bottom: 3rem
1649
+
1650
+ .{lg,md,xl}:px-48
1651
+ padding-inline-end: 3rem
1652
+ padding-inline-start: 3rem
1653
+
1654
+ .{lg,md,xl}:pr-48
1655
+ padding-inline-end: 3rem
1656
+
1657
+ .{lg,md,xl}:pl-48
1658
+ padding-inline-start: 3rem
1659
+
1660
+ .{lg,md,xl}:p-64
1661
+ padding: 4rem
1662
+
1663
+ .{lg,md,xl}:py-64
1664
+ padding-top: 4rem
1665
+ padding-bottom: 4rem
1666
+
1667
+ .{lg,md,xl}:pt-64
1668
+ padding-top: 4rem
1669
+
1670
+ .{lg,md,xl}:pb-64
1671
+ padding-bottom: 4rem
1672
+
1673
+ .{lg,md,xl}:px-64
1674
+ padding-inline-end: 4rem
1675
+ padding-inline-start: 4rem
1676
+
1677
+ .{lg,md,xl}:pr-64
1678
+ padding-inline-end: 4rem
1679
+
1680
+ .{lg,md,xl}:pl-64
1681
+ padding-inline-start: 4rem
1682
+
1683
+ .{lg,md,xl}:py-l
1684
+ padding-top: var(--v-space-l)
1685
+ padding-bottom: var(--v-space-l)
1686
+
1687
+ .{lg,md,xl}:pt-l
1688
+ padding-top: var(--v-space-l)
1689
+
1690
+ .{lg,md,xl}:pb-l
1691
+ padding-bottom: var(--v-space-l)
1692
+
1693
+ .{lg,md,xl}:py-m
1694
+ padding-top: var(--v-space-m)
1695
+ padding-bottom: var(--v-space-m)
1696
+
1697
+ .{lg,md,xl}:pt-m
1698
+ padding-top: var(--v-space-m)
1699
+
1700
+ .{lg,md,xl}:pb-m
1701
+ padding-bottom: var(--v-space-m)
1702
+
1703
+ .{lg,md,xl}:py-s
1704
+ padding-top: var(--v-space-s)
1705
+ padding-bottom: var(--v-space-s)
1706
+
1707
+ .{lg,md,xl}:pt-s
1708
+ padding-top: var(--v-space-s)
1709
+
1710
+ .{lg,md,xl}:pb-s
1711
+ padding-bottom: var(--v-space-s)
1712
+
1713
+ .{lg,md,xl}:px-pagemargin
1714
+ padding-inline-end: var(--v-space-pagemargin)
1715
+ padding-inline-start: var(--v-space-pagemargin)
1716
+
1717
+ .{lg,md,xl}:pr-pagemargin
1718
+ padding-inline-end: var(--v-space-pagemargin)
1719
+
1720
+ .{lg,md,xl}:pl-pagemargin
1721
+ padding-inline-start: var(--v-space-pagemargin)
1722
+
1723
+ .static
1724
+ position: static
1725
+
1726
+ .fixed
1727
+ position: fixed
1728
+
1729
+ .absolute
1730
+ position: absolute
1731
+
1732
+ .relative
1733
+ position: relative
1734
+
1735
+ .sticky
1736
+ position: sticky
1737
+
1738
+ .rotate-0
1739
+ rotate: none
1740
+
1741
+ .rotate-90
1742
+ rotate: 90deg
1743
+
1744
+ .{button-expanded,details-open}:rotate-180
1745
+ rotate: 180deg
1746
+
1747
+ .-rotate-90
1748
+ rotate: -90deg
1749
+
1750
+ .active:scale-pressed
1751
+ scale: .96
1752
+
1753
+ .scale-96
1754
+ scale: .96
1755
+
1756
+ .scale-100
1757
+ scale: 1
1758
+
1759
+ .{button-hover,hover,link-hover}:scale-zoomed
1760
+ scale: 1.1
1761
+
1762
+ .scale-110
1763
+ scale: 1.1
1764
+
1765
+ .scrollbar-none
1766
+
1767
+
1768
+ .snap-start
1769
+ scroll-snap-align: start
1770
+
1771
+ .snap-end
1772
+ scroll-snap-align: end
1773
+
1774
+ .snap-center
1775
+ scroll-snap-align: center
1776
+
1777
+ .snap-y
1778
+ scroll-snap-type: y mandatory
1779
+
1780
+ .snap-x
1781
+ scroll-snap-type: x mandatory
1782
+
1783
+ .{lg,md,xl}:text-start
1784
+ text-align: start
1785
+
1786
+ .{lg,md,xl}:text-end
1787
+ text-align: end
1788
+
1789
+ .{lg,md,xl}:text-center
1790
+ text-align: center
1791
+
1792
+ .text-inherit
1793
+ color: inherit
1794
+
1795
+ .text-always-black
1796
+ --color: var(--v-color-always-black)
1797
+ color: var(--v-color-always-black)
1798
+
1799
+ .text-always-white
1800
+ --color: var(--v-color-always-white)
1801
+ color: var(--v-color-always-white)
1802
+
1803
+ .{checked,current,selected}:text-inverted
1804
+ --color: var(--v-color-foreground-inverted)
1805
+ color: var(--v-color-foreground-inverted)
1806
+
1807
+ .{checked,current,hover,lg,md,selected,xl}:text-primary
1808
+ --color: var(--v-color-foreground-primary)
1809
+ color: var(--v-color-foreground-primary)
1810
+
1811
+ .{lg,md,xl}:text-secondary
1812
+ --color: var(--v-color-foreground-secondary)
1813
+ color: var(--v-color-foreground-secondary)
1814
+
1815
+ .text-accent-blue
1816
+ --color: var(--v-color-foreground-accent-blue)
1817
+ color: var(--v-color-foreground-accent-blue)
1818
+
1819
+ .text-feedback-green
1820
+ --color: var(--v-color-foreground-feedback-green)
1821
+ color: var(--v-color-foreground-feedback-green)
1822
+
1823
+ .text-feedback-orange
1824
+ --color: var(--v-color-foreground-feedback-orange)
1825
+ color: var(--v-color-foreground-feedback-orange)
1826
+
1827
+ .text-feedback-red
1828
+ --color: var(--v-color-foreground-feedback-red)
1829
+ color: var(--v-color-foreground-feedback-red)
1830
+
1831
+ .uppercase
1832
+ text-transform: uppercase
1833
+
1834
+ .capitalize
1835
+ text-transform: capitalize
1836
+
1837
+ .truncate
1838
+ text-overflow: ellipsis
1839
+ white-space: nowrap
1840
+ overflow: hidden
1841
+
1842
+ .text-balance
1843
+ text-wrap: balance
1844
+
1845
+ .text-wrap
1846
+ text-wrap: wrap
1847
+
1848
+ .transition-colors
1849
+ transition: color, background-color, border-color, box-shadow, text-decoration-color, fill, stroke
1850
+ transition-duration: var(--_v-transition-speed-default)
1851
+
1852
+ .transition-opacity
1853
+ transition: opacity
1854
+ transition-duration: var(--_v-transition-speed-default)
1855
+
1856
+ .transition-transform
1857
+ transition: transform, scale, rotate, translate, skew
1858
+ transition-duration: var(--_v-transition-speed-default)
1859
+
1860
+ .transition-none
1861
+ transition: none
1862
+
1863
+ .translate-x-0
1864
+ --translate-x: 0px
1865
+ --translate-y: 0px
1866
+ translate: calc(var(--translate-x) * var(--_v-setting-text-direction)) var(--translate-y)
1867
+
1868
+ .translate-y-0
1869
+ --translate-x: 0px
1870
+ --translate-y: 0px
1871
+ translate: calc(var(--translate-x) * var(--_v-setting-text-direction)) var(--translate-y)
1872
+
1873
+ .translate-x-1/2
1874
+ --translate-x: 0px
1875
+ --translate-y: 0px
1876
+ translate: calc(var(--translate-x) * var(--_v-setting-text-direction)) var(--translate-y)
1877
+ --translate-x: 50%
1878
+
1879
+ .translate-y-1/2
1880
+ --translate-x: 0px
1881
+ --translate-y: 0px
1882
+ translate: calc(var(--translate-x) * var(--_v-setting-text-direction)) var(--translate-y)
1883
+ --translate-y: 50%
1884
+
1885
+ .-translate-x-1/2
1886
+ --translate-x: 0px
1887
+ --translate-y: 0px
1888
+ translate: calc(var(--translate-x) * var(--_v-setting-text-direction)) var(--translate-y)
1889
+ --translate-x: -50%
1890
+
1891
+ .-translate-y-1/2
1892
+ --translate-x: 0px
1893
+ --translate-y: 0px
1894
+ translate: calc(var(--translate-x) * var(--_v-setting-text-direction)) var(--translate-y)
1895
+ --translate-y: -50%
1896
+
1897
+ .translate-x-full
1898
+ --translate-x: 0px
1899
+ --translate-y: 0px
1900
+ translate: calc(var(--translate-x) * var(--_v-setting-text-direction)) var(--translate-y)
1901
+ --translate-x: 100%
1902
+
1903
+ .translate-y-full
1904
+ --translate-x: 0px
1905
+ --translate-y: 0px
1906
+ translate: calc(var(--translate-x) * var(--_v-setting-text-direction)) var(--translate-y)
1907
+ --translate-y: 100%
1908
+
1909
+ .-translate-x-full
1910
+ --translate-x: 0px
1911
+ --translate-y: 0px
1912
+ translate: calc(var(--translate-x) * var(--_v-setting-text-direction)) var(--translate-y)
1913
+ --translate-x: -100%
1914
+
1915
+ .-translate-y-full
1916
+ --translate-x: 0px
1917
+ --translate-y: 0px
1918
+ translate: calc(var(--translate-x) * var(--_v-setting-text-direction)) var(--translate-y)
1919
+ --translate-y: -100%
1920
+
1921
+ .whitespace-normal
1922
+ white-space: normal
1923
+
1924
+ .whitespace-nowrap
1925
+ white-space: nowrap
1926
+
1927
+ .whitespace-pre-line
1928
+ white-space: pre-line
1929
+
1930
+ .whitespace-break-spaces
1931
+ white-space: break-spaces
1932
+
1933
+ .sr-only
1934
+ clip: rect(0, 0, 0, 0)
1935
+ white-space: nowrap
1936
+ border-width: 0
1937
+ width: 1px
1938
+ height: 1px
1939
+ margin: -1px
1940
+ padding: 0
1941
+ position: absolute
1942
+ overflow: hidden
1943
+
1944
+ .{empty,lg,lg:until-xl,md,md:until-lg,md:until-xl,until-lg,until-md,until-xl,xl}:invisible
1945
+ visibility: hidden
1946
+
1947
+ .{lg,md,xl}:w-0
1948
+ width: 0
1949
+
1950
+ .{lg,md,xl}:w-8
1951
+ width: .5rem
1952
+
1953
+ .{lg,md,xl}:w-64
1954
+ width: 4rem
1955
+
1956
+ .{lg,md,xl}:w-1/2
1957
+ width: 50%
1958
+
1959
+ .{lg,md,xl}:w-full
1960
+ width: 100%
1961
+
1962
+ .{lg,md,xl}:w-min
1963
+ width: min-content
1964
+
1965
+ .{lg,md,xl}:w-fit
1966
+ width: fit-content
1967
+
1968
+ .{lg,md,xl}:min-w-0
1969
+ min-width: 0
1970
+
1971
+ .{lg,md,xl}:min-w-fit
1972
+ min-width: fit-content
1973
+
1974
+ .{lg,md,xl}:min-w-min
1975
+ min-width: min-content
1976
+
1977
+ .{lg,md,xl}:max-w-1/2
1978
+ max-width: 50%
1979
+
1980
+ .{lg,md,xl}:max-w-full
1981
+ max-width: 100%
1982
+
1983
+ .{lg,md,xl}:max-w-fit
1984
+ max-width: fit-content
1985
+
1986
+ .{lg,md,xl}:max-w-min
1987
+ max-width: min-content
1988
+
1989
+ .w-xs
1990
+ width: var(--v-size-grid-xs)
1991
+
1992
+ .w-sm
1993
+ width: var(--v-size-grid-sm)
1994
+
1995
+ .w-md
1996
+ width: var(--v-size-grid-md)
1997
+
1998
+ .w-lg
1999
+ width: var(--v-size-grid-lg)
2000
+
2001
+ .w-xl
2002
+ width: var(--v-size-grid-xl)
2003
+
2004
+ .z-spinner
2005
+ z-index: var(--v-index-spinner)
2006
+
2007
+ .z-overlay
2008
+ z-index: var(--v-index-overlay)
2009
+
2010
+ .z-navigation
2011
+ z-index: var(--v-index-navigation)
2012
+
2013
+ .z-default
2014
+ z-index: var(--v-index-default)
2015
+
2016
+ .z-deep
2017
+ z-index: var(--v-index-deep)
2018
+
2019
+
2020
+ ## Design tokens
2021
+ When writing CSS, use these CSS custom properties for relevant properties. Don't use custom fonts, spacing or colors outside of these values.
2022
+
2023
+ --v-transition-default--v-transition-micro--v-transition-notable--v-space-2: Fixed 2px spacing
2024
+ --v-space-4: Fixed 4px spacing
2025
+ --v-space-8: Fixed 8px spacing
2026
+ --v-space-16: Fixed 16px spacing
2027
+ --v-space-24: Fixed 24px spacing
2028
+ --v-space-32: Fixed 32px spacing
2029
+ --v-space-48: Fixed 48px spacing
2030
+ --v-space-64: Fixed 64px spacing
2031
+ --v-space-l: Fluid spacing between 64px-96px.
2032
+ --v-space-m: Fluid spacing between 48px-64px.
2033
+ --v-space-s: Fluid spacing between 32px-48px.
2034
+ --v-space-pagemargin: The fluid outer horizontal margins of the main page container.
2035
+ 375 - 24px
2036
+ 768 - 24px
2037
+ 1280 - 28px
2038
+ 1680 - 128px
2039
+ --v-space-gutter: The horizontal gap between grid columns. Fluid between 16px-24px.
2040
+ --v-size-grid-column: The width of a single grid column.
2041
+ --v-size-grid-maxwidth: The maximum width of the 12 column grid.
2042
+ --v-size-pagemax: The maximum width a page is allowed to grow to.
2043
+ --v-size-grid-xs: Width based on the colspan of the grid for the current viewport size (4 / 6 / 4)
2044
+ --v-size-grid-sm: Width based on the colspan of the grid for the current viewport size (6 / 8 / 6)
2045
+ --v-size-grid-md: Width based on the colspan of the grid for the current viewport size (8 / 10 / 8)
2046
+ --v-size-grid-lg: Width based on the colspan of the grid for the current viewport size (8 / 10 / 12)
2047
+ --v-size-grid-xl: Width based on the colspan of the grid for the current viewport size (8 / 12 / 12)
2048
+ --v-size-grid-max: Width based on the maximum extent of a `max` container
2049
+ --v-size-contentmax: The maximum width a block of content should be allowed to grow to while maintaining readability
2050
+ https://baymard.com/blog/line-length-readability
2051
+ --v-radius-sm--v-radius-md--v-radius-lg--v-radius-4: TODO: Remove these values when the migration is complete
2052
+ --v-radius-full--v-index-spinner--v-index-overlay--v-index-navigation--v-index-default--v-index-deep--v-grid-columns: The total number of grid columns at the current breakpoint.
2053
+ --v-font-sans-family--v-font-broad-family--v-font-mono-family--v-font-regular-weight--v-font-emphasis-weight--v-font-24-size--v-font-24-lineheight--v-font-24--v-font-20-size--v-font-20-lineheight--v-font-20--v-font-16-size--v-font-16-lineheight--v-font-16--v-font-14-size--v-font-14-lineheight--v-font-14--v-font-12-size--v-font-12-lineheight--v-font-12--v-font-heading-1-lineheight--v-font-heading-1-size-min--v-font-heading-1-size-max--v-font-heading-1-size--v-font-heading-1--v-font-heading-2-lineheight--v-font-heading-2-size-min--v-font-heading-2-size-max--v-font-heading-2-size--v-font-heading-2--v-font-heading-3-lineheight--v-font-heading-3-size-min--v-font-heading-3-size-max--v-font-heading-3-size--v-font-heading-3--v-font-statement-1-lineheight--v-font-statement-1-size-min--v-font-statement-1-size-max--v-font-statement-1-size--v-font-statement-1--v-font-statement-2-lineheight--v-font-statement-2-size-min--v-font-statement-2-size-max--v-font-statement-2-size--v-font-statement-2--v-font-statement-3-lineheight--v-font-statement-3-size-min--v-font-statement-3-size-max--v-font-statement-3-size--v-font-statement-3--v-font-statement-signature-lineheight--v-font-statement-signature-size-min--v-font-statement-signature-size-max--v-font-statement-signature-size--v-font-statement-signature--v-color-always-black: Always black regardless of colour mode.
2054
+ --v-color-always-white: Always white regardless of color mode.
2055
+ --v-color-background-feedback-gray: Use as a background color to indicate informational messages.
2056
+ --v-color-background-feedback-green: Use as a background color to highlight successful and positive states.
2057
+ --v-color-background-feedback-orange: Use as a background color to highlight warnings, invalid or missing data, and states that require caution.
2058
+ --v-color-background-feedback-red: Use as a background color to highlight errors, invalid data, and destructive states.
2059
+ --v-color-background-primary: Use as a primary background color.
2060
+ --v-color-background-secondary: Use as a secondary background color for elevated sections.
2061
+ --v-color-foreground-accent-blue: For use in links and as a border in emphasized selected states.
2062
+ --v-color-foreground-feedback-green: Use as a foreground or border color to highlight successful states and positive actions.
2063
+ --v-color-foreground-feedback-orange: Use as a foreground or border color to highlight warnings, invalid or missing data, and actions that require caution.
2064
+ --v-color-foreground-feedback-red: Use as a foreground or border color to highlight errors, invalid data, and destructive actions.
2065
+ --v-color-foreground-inverted: The inverse of the primary foreground color. For use on filled surfaces.
2066
+ --v-color-foreground-primary: Use for primary text, icons and borders.
2067
+ --v-color-foreground-secondary: Use for secondary text, icons and borders.
2068
+ --v-color-foreground-tertiary: The lightest possible foreground color acceptable for UI fills. Should not be used for body text.
2069
+ --v-color-ornament-primary: Use for strokes or dividers to visually group or separate elements.
2070
+ --v-color-ornament-scrim: Used as a backdrop that usually sits behind a Side sheet or Dialog component.
2071
+ --v-color-state-accent-blue-medium: Use for state layers with foreground/accent/blue.
2072
+ --v-color-state-accent-blue-strong: Use for state layers with foreground/accent/blue.
2073
+ --v-color-state-accent-blue-subtle: Use for state layers with foreground/accent/blue.
2074
+ --v-color-state-always-black-medium: Use for state layers with an always/black foreground color.
2075
+ --v-color-state-always-black-strong: Use for state layers with an always/black foreground color.
2076
+ --v-color-state-always-black-subtle: Use for state layers with an always/black foreground color.
2077
+ --v-color-state-always-white-medium: Use for state layers with an always/white foreground color.
2078
+ --v-color-state-always-white-strong: Use for state layers with an always/white foreground color.
2079
+ --v-color-state-always-white-subtle: Use for state layers with an always/white foreground color.
2080
+ --v-color-state-feedback-red-medium: Use for state layers with foreground/feedback/red.
2081
+ --v-color-state-feedback-red-strong: Use for state layers with foreground/feedback/red.
2082
+ --v-color-state-feedback-red-subtle: Use for state layers with foreground/feedback/red.
2083
+ --v-color-state-inverted-medium: Use for state layers with foreground/inverted.
2084
+ --v-color-state-inverted-strong: Use for state layers with foreground/inverted.
2085
+ --v-color-state-inverted-subtle: Use for state layers with foreground/inverted.
2086
+ --v-color-state-primary-medium: Use for state layers with foreground/primary.
2087
+ --v-color-state-primary-strong: Use for state layers with foreground/primary.
2088
+ --v-color-state-primary-subtle: Use for state layers with foreground/primary.
2089
+ --v-color-surface-accent-blue: Used as an emphasized surface fill for UI elements like buttons and form controls.
2090
+ --v-color-surface-feedback-green: Used as a surface fill for UI elements like buttons and form controls to signify positive actions. Combine with Always White foreground color.
2091
+ --v-color-surface-feedback-orange: [Deprecated]
2092
+ --v-color-surface-feedback-red: Used as a surface fill for UI elements like buttons and form controls to signify destructive actions. Combine with Always White foreground color.
2093
+ --v-color-surface-neutral: Used as a surface fill for UI elements like buttons and form controls. Combine with Foreground / Inverted foreground color.