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