@patternfly/react-styles 5.0.0-alpha.10 → 5.0.0-alpha.12

Sign up to get free protection for your applications and to get access to all the features.
Files changed (57) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/css/components/AboutModalBox/about-modal-box.css +2 -20
  3. package/css/components/AboutModalBox/about-modal-box.d.ts +0 -1
  4. package/css/components/AboutModalBox/about-modal-box.js +0 -1
  5. package/css/components/AboutModalBox/about-modal-box.mjs +0 -1
  6. package/css/components/BackgroundImage/background-image.css +1 -2
  7. package/css/components/Breadcrumb/breadcrumb.css +1 -5
  8. package/css/components/Breadcrumb/breadcrumb.d.ts +1 -2
  9. package/css/components/Breadcrumb/breadcrumb.js +1 -2
  10. package/css/components/Breadcrumb/breadcrumb.mjs +1 -2
  11. package/css/components/FormControl/form-control.css +164 -221
  12. package/css/components/FormControl/form-control.d.ts +10 -6
  13. package/css/components/FormControl/form-control.js +10 -6
  14. package/css/components/FormControl/form-control.mjs +10 -6
  15. package/css/components/Icon/icon.css +25 -24
  16. package/css/components/List/list.css +1 -1
  17. package/css/components/LogViewer/log-viewer.css +0 -3
  18. package/css/components/LogViewer/log-viewer.d.ts +0 -1
  19. package/css/components/LogViewer/log-viewer.js +0 -1
  20. package/css/components/LogViewer/log-viewer.mjs +0 -1
  21. package/css/components/MultipleFileUpload/multiple-file-upload.css +3 -3
  22. package/css/components/NotificationBadge/notification-badge.css +2 -2
  23. package/css/components/NumberInput/number-input.css +0 -1
  24. package/css/components/ProgressStepper/progress-stepper.css +1 -1
  25. package/css/components/ProgressStepper/progress-stepper.d.ts +1 -1
  26. package/css/components/ProgressStepper/progress-stepper.js +1 -1
  27. package/css/components/ProgressStepper/progress-stepper.mjs +1 -1
  28. package/css/components/TextInputGroup/text-input-group.css +1 -5
  29. package/css/components/Wizard/wizard.css +5 -5
  30. package/css/docs/components/Avatar/examples/Avatar.css +1 -1
  31. package/css/docs/components/NotificationBadge/examples/NotificationBadge.css +1 -1
  32. package/css/docs/components/TextInputGroup/examples/TextInputGroup.css +0 -13
  33. package/css/layouts/Flex/flex.css +678 -31
  34. package/css/layouts/Flex/flex.d.ts +148 -1
  35. package/css/layouts/Flex/flex.js +148 -1
  36. package/css/layouts/Flex/flex.mjs +148 -1
  37. package/package.json +3 -3
  38. package/css/components/SearchInput/search-input.css +0 -199
  39. package/css/components/SearchInput/search-input.d.ts +0 -24
  40. package/css/components/SearchInput/search-input.js +0 -25
  41. package/css/components/SearchInput/search-input.mjs +0 -23
  42. package/css/docs/components/FormControl/examples/FormControl.css +0 -5
  43. package/css/docs/components/FormControl/examples/FormControl.d.ts +0 -3
  44. package/css/docs/components/FormControl/examples/FormControl.js +0 -4
  45. package/css/docs/components/FormControl/examples/FormControl.mjs +0 -2
  46. package/css/docs/components/SearchInput/examples/SearchInput.css +0 -12
  47. package/css/docs/components/SearchInput/examples/SearchInput.d.ts +0 -3
  48. package/css/docs/components/SearchInput/examples/SearchInput.js +0 -4
  49. package/css/docs/components/SearchInput/examples/SearchInput.mjs +0 -2
  50. /package/css/components/{ChipGroup → Chip}/chip-group.css +0 -0
  51. /package/css/components/{ChipGroup → Chip}/chip-group.d.ts +0 -0
  52. /package/css/components/{ChipGroup → Chip}/chip-group.js +0 -0
  53. /package/css/components/{ChipGroup → Chip}/chip-group.mjs +0 -0
  54. /package/css/components/{LabelGroup → Label}/label-group.css +0 -0
  55. /package/css/components/{LabelGroup → Label}/label-group.d.ts +0 -0
  56. /package/css/components/{LabelGroup → Label}/label-group.js +0 -0
  57. /package/css/components/{LabelGroup → Label}/label-group.mjs +0 -0
@@ -5,8 +5,14 @@
5
5
  --pf-v5-l-flex--m-row--AlignItems: baseline;
6
6
  --pf-v5-l-flex--m-row-reverse--AlignItems: baseline;
7
7
  --pf-v5-l-flex--item--Order: 0;
8
- --pf-v5-l-flex--spacer-base: var(--pf-v5-global--spacer--md);
9
- --pf-v5-l-flex--spacer: var(--pf-v5-l-flex--spacer-base);
8
+ --pf-v5-l-flex--spacer--column--base: var(--pf-v5-global--spacer--lg);
9
+ --pf-v5-l-flex--spacer--row--base: var(--pf-v5-global--spacer--sm);
10
+ --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--spacer--row--base);
11
+ --pf-v5-l-flex--ColumnGap: 0;
12
+ --pf-v5-l-flex--m-gap--RowGap: var(--pf-v5-l-flex--spacer--row--base);
13
+ --pf-v5-l-flex--m-gap--ColumnGap: var(--pf-v5-l-flex--spacer--column--base);
14
+ --pf-v5-l-flex--m-row-gap--RowGap: var(--pf-v5-l-flex--spacer--row--base);
15
+ --pf-v5-l-flex--m-column-gap--ColumnGap: var(--pf-v5-l-flex--spacer--column--base);
10
16
  --pf-v5-l-flex--spacer--none: 0;
11
17
  --pf-v5-l-flex--spacer--xs: var(--pf-v5-global--spacer--xs);
12
18
  --pf-v5-l-flex--spacer--sm: var(--pf-v5-global--spacer--sm);
@@ -18,17 +24,16 @@
18
24
  --pf-v5-l-flex--spacer--4xl: var(--pf-v5-global--spacer--4xl);
19
25
  display: var(--pf-v5-l-flex--Display);
20
26
  flex-wrap: var(--pf-v5-l-flex--FlexWrap);
27
+ gap: var(--pf-v5-l-flex--RowGap) var(--pf-v5-l-flex--ColumnGap);
21
28
  align-items: var(--pf-v5-l-flex--AlignItems);
22
29
  }
23
- .pf-v5-l-flex:last-child {
24
- --pf-v5-l-flex--spacer: 0;
25
- }
26
30
 
27
31
  .pf-v5-l-flex > * {
28
- --pf-v5-l-flex--spacer: var(--pf-v5-l-flex--spacer-base);
32
+ --pf-v5-l-flex--spacer--column: var(--pf-v5-l-flex--spacer, var(--pf-v5-l-flex--spacer--column--base));
33
+ --pf-v5-l-flex--spacer--row: var(--pf-v5-l-flex--spacer, var(--pf-v5-l-flex--spacer--row--base));
29
34
  order: var(--pf-v5-l-flex--item--Order);
30
35
  max-width: 100%;
31
- margin-right: var(--pf-v5-l-flex--spacer);
36
+ margin-right: var(--pf-v5-l-flex--spacer--column);
32
37
  }
33
38
  @media screen and (min-width: 576px) {
34
39
  .pf-v5-l-flex > * {
@@ -66,32 +71,34 @@
66
71
  --pf-v5-l-flex--Display: inline-flex;
67
72
  }
68
73
  .pf-v5-l-flex.pf-m-column {
74
+ --pf-v5-l-flex--RowGap: 0;
75
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--spacer--column--base);
69
76
  flex-direction: column;
70
77
  align-items: normal;
71
78
  }
72
79
  .pf-v5-l-flex.pf-m-column > * {
73
- margin: 0 0 var(--pf-v5-l-flex--spacer) 0;
80
+ margin: 0 0 var(--pf-v5-l-flex--spacer--row) 0;
74
81
  }
75
82
  .pf-v5-l-flex.pf-m-column-reverse {
76
83
  flex-direction: column-reverse;
77
84
  align-items: normal;
78
85
  }
79
86
  .pf-v5-l-flex.pf-m-column-reverse > * {
80
- margin: var(--pf-v5-l-flex--spacer) 0 0 0;
87
+ margin: var(--pf-v5-l-flex--spacer--row) 0 0 0;
81
88
  }
82
89
  .pf-v5-l-flex.pf-m-row {
83
90
  flex-direction: row;
84
91
  align-items: var(--pf-v5-l-flex--m-row--AlignItems);
85
92
  }
86
93
  .pf-v5-l-flex.pf-m-row > * {
87
- margin: 0 var(--pf-v5-l-flex--spacer) 0 0;
94
+ margin: 0 var(--pf-v5-l-flex--spacer--column) 0 0;
88
95
  }
89
96
  .pf-v5-l-flex.pf-m-row-reverse {
90
97
  flex-direction: row-reverse;
91
98
  align-items: var(--pf-v5-l-flex--m-row-reverse--AlignItems);
92
99
  }
93
100
  .pf-v5-l-flex.pf-m-row-reverse > * {
94
- margin: 0 0 0 var(--pf-v5-l-flex--spacer);
101
+ margin: 0 0 0 var(--pf-v5-l-flex--spacer--column);
95
102
  }
96
103
  .pf-v5-l-flex.pf-m-wrap {
97
104
  flex-wrap: wrap;
@@ -210,32 +217,34 @@
210
217
  --pf-v5-l-flex--Display: inline-flex;
211
218
  }
212
219
  .pf-v5-l-flex.pf-m-column-on-sm {
220
+ --pf-v5-l-flex--RowGap: 0;
221
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--spacer--column--base);
213
222
  flex-direction: column;
214
223
  align-items: normal;
215
224
  }
216
225
  .pf-v5-l-flex.pf-m-column-on-sm > * {
217
- margin: 0 0 var(--pf-v5-l-flex--spacer) 0;
226
+ margin: 0 0 var(--pf-v5-l-flex--spacer--row) 0;
218
227
  }
219
228
  .pf-v5-l-flex.pf-m-column-reverse-on-sm {
220
229
  flex-direction: column-reverse;
221
230
  align-items: normal;
222
231
  }
223
232
  .pf-v5-l-flex.pf-m-column-reverse-on-sm > * {
224
- margin: var(--pf-v5-l-flex--spacer) 0 0 0;
233
+ margin: var(--pf-v5-l-flex--spacer--row) 0 0 0;
225
234
  }
226
235
  .pf-v5-l-flex.pf-m-row-on-sm {
227
236
  flex-direction: row;
228
237
  align-items: var(--pf-v5-l-flex--m-row--AlignItems);
229
238
  }
230
239
  .pf-v5-l-flex.pf-m-row-on-sm > * {
231
- margin: 0 var(--pf-v5-l-flex--spacer) 0 0;
240
+ margin: 0 var(--pf-v5-l-flex--spacer--column) 0 0;
232
241
  }
233
242
  .pf-v5-l-flex.pf-m-row-reverse-on-sm {
234
243
  flex-direction: row-reverse;
235
244
  align-items: var(--pf-v5-l-flex--m-row-reverse--AlignItems);
236
245
  }
237
246
  .pf-v5-l-flex.pf-m-row-reverse-on-sm > * {
238
- margin: 0 0 0 var(--pf-v5-l-flex--spacer);
247
+ margin: 0 0 0 var(--pf-v5-l-flex--spacer--column);
239
248
  }
240
249
  .pf-v5-l-flex.pf-m-wrap-on-sm {
241
250
  flex-wrap: wrap;
@@ -355,32 +364,34 @@
355
364
  --pf-v5-l-flex--Display: inline-flex;
356
365
  }
357
366
  .pf-v5-l-flex.pf-m-column-on-md {
367
+ --pf-v5-l-flex--RowGap: 0;
368
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--spacer--column--base);
358
369
  flex-direction: column;
359
370
  align-items: normal;
360
371
  }
361
372
  .pf-v5-l-flex.pf-m-column-on-md > * {
362
- margin: 0 0 var(--pf-v5-l-flex--spacer) 0;
373
+ margin: 0 0 var(--pf-v5-l-flex--spacer--row) 0;
363
374
  }
364
375
  .pf-v5-l-flex.pf-m-column-reverse-on-md {
365
376
  flex-direction: column-reverse;
366
377
  align-items: normal;
367
378
  }
368
379
  .pf-v5-l-flex.pf-m-column-reverse-on-md > * {
369
- margin: var(--pf-v5-l-flex--spacer) 0 0 0;
380
+ margin: var(--pf-v5-l-flex--spacer--row) 0 0 0;
370
381
  }
371
382
  .pf-v5-l-flex.pf-m-row-on-md {
372
383
  flex-direction: row;
373
384
  align-items: var(--pf-v5-l-flex--m-row--AlignItems);
374
385
  }
375
386
  .pf-v5-l-flex.pf-m-row-on-md > * {
376
- margin: 0 var(--pf-v5-l-flex--spacer) 0 0;
387
+ margin: 0 var(--pf-v5-l-flex--spacer--column) 0 0;
377
388
  }
378
389
  .pf-v5-l-flex.pf-m-row-reverse-on-md {
379
390
  flex-direction: row-reverse;
380
391
  align-items: var(--pf-v5-l-flex--m-row-reverse--AlignItems);
381
392
  }
382
393
  .pf-v5-l-flex.pf-m-row-reverse-on-md > * {
383
- margin: 0 0 0 var(--pf-v5-l-flex--spacer);
394
+ margin: 0 0 0 var(--pf-v5-l-flex--spacer--column);
384
395
  }
385
396
  .pf-v5-l-flex.pf-m-wrap-on-md {
386
397
  flex-wrap: wrap;
@@ -500,32 +511,34 @@
500
511
  --pf-v5-l-flex--Display: inline-flex;
501
512
  }
502
513
  .pf-v5-l-flex.pf-m-column-on-lg {
514
+ --pf-v5-l-flex--RowGap: 0;
515
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--spacer--column--base);
503
516
  flex-direction: column;
504
517
  align-items: normal;
505
518
  }
506
519
  .pf-v5-l-flex.pf-m-column-on-lg > * {
507
- margin: 0 0 var(--pf-v5-l-flex--spacer) 0;
520
+ margin: 0 0 var(--pf-v5-l-flex--spacer--row) 0;
508
521
  }
509
522
  .pf-v5-l-flex.pf-m-column-reverse-on-lg {
510
523
  flex-direction: column-reverse;
511
524
  align-items: normal;
512
525
  }
513
526
  .pf-v5-l-flex.pf-m-column-reverse-on-lg > * {
514
- margin: var(--pf-v5-l-flex--spacer) 0 0 0;
527
+ margin: var(--pf-v5-l-flex--spacer--row) 0 0 0;
515
528
  }
516
529
  .pf-v5-l-flex.pf-m-row-on-lg {
517
530
  flex-direction: row;
518
531
  align-items: var(--pf-v5-l-flex--m-row--AlignItems);
519
532
  }
520
533
  .pf-v5-l-flex.pf-m-row-on-lg > * {
521
- margin: 0 var(--pf-v5-l-flex--spacer) 0 0;
534
+ margin: 0 var(--pf-v5-l-flex--spacer--column) 0 0;
522
535
  }
523
536
  .pf-v5-l-flex.pf-m-row-reverse-on-lg {
524
537
  flex-direction: row-reverse;
525
538
  align-items: var(--pf-v5-l-flex--m-row-reverse--AlignItems);
526
539
  }
527
540
  .pf-v5-l-flex.pf-m-row-reverse-on-lg > * {
528
- margin: 0 0 0 var(--pf-v5-l-flex--spacer);
541
+ margin: 0 0 0 var(--pf-v5-l-flex--spacer--column);
529
542
  }
530
543
  .pf-v5-l-flex.pf-m-wrap-on-lg {
531
544
  flex-wrap: wrap;
@@ -645,32 +658,34 @@
645
658
  --pf-v5-l-flex--Display: inline-flex;
646
659
  }
647
660
  .pf-v5-l-flex.pf-m-column-on-xl {
661
+ --pf-v5-l-flex--RowGap: 0;
662
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--spacer--column--base);
648
663
  flex-direction: column;
649
664
  align-items: normal;
650
665
  }
651
666
  .pf-v5-l-flex.pf-m-column-on-xl > * {
652
- margin: 0 0 var(--pf-v5-l-flex--spacer) 0;
667
+ margin: 0 0 var(--pf-v5-l-flex--spacer--row) 0;
653
668
  }
654
669
  .pf-v5-l-flex.pf-m-column-reverse-on-xl {
655
670
  flex-direction: column-reverse;
656
671
  align-items: normal;
657
672
  }
658
673
  .pf-v5-l-flex.pf-m-column-reverse-on-xl > * {
659
- margin: var(--pf-v5-l-flex--spacer) 0 0 0;
674
+ margin: var(--pf-v5-l-flex--spacer--row) 0 0 0;
660
675
  }
661
676
  .pf-v5-l-flex.pf-m-row-on-xl {
662
677
  flex-direction: row;
663
678
  align-items: var(--pf-v5-l-flex--m-row--AlignItems);
664
679
  }
665
680
  .pf-v5-l-flex.pf-m-row-on-xl > * {
666
- margin: 0 var(--pf-v5-l-flex--spacer) 0 0;
681
+ margin: 0 var(--pf-v5-l-flex--spacer--column) 0 0;
667
682
  }
668
683
  .pf-v5-l-flex.pf-m-row-reverse-on-xl {
669
684
  flex-direction: row-reverse;
670
685
  align-items: var(--pf-v5-l-flex--m-row-reverse--AlignItems);
671
686
  }
672
687
  .pf-v5-l-flex.pf-m-row-reverse-on-xl > * {
673
- margin: 0 0 0 var(--pf-v5-l-flex--spacer);
688
+ margin: 0 0 0 var(--pf-v5-l-flex--spacer--column);
674
689
  }
675
690
  .pf-v5-l-flex.pf-m-wrap-on-xl {
676
691
  flex-wrap: wrap;
@@ -790,32 +805,34 @@
790
805
  --pf-v5-l-flex--Display: inline-flex;
791
806
  }
792
807
  .pf-v5-l-flex.pf-m-column-on-2xl {
808
+ --pf-v5-l-flex--RowGap: 0;
809
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--spacer--column--base);
793
810
  flex-direction: column;
794
811
  align-items: normal;
795
812
  }
796
813
  .pf-v5-l-flex.pf-m-column-on-2xl > * {
797
- margin: 0 0 var(--pf-v5-l-flex--spacer) 0;
814
+ margin: 0 0 var(--pf-v5-l-flex--spacer--row) 0;
798
815
  }
799
816
  .pf-v5-l-flex.pf-m-column-reverse-on-2xl {
800
817
  flex-direction: column-reverse;
801
818
  align-items: normal;
802
819
  }
803
820
  .pf-v5-l-flex.pf-m-column-reverse-on-2xl > * {
804
- margin: var(--pf-v5-l-flex--spacer) 0 0 0;
821
+ margin: var(--pf-v5-l-flex--spacer--row) 0 0 0;
805
822
  }
806
823
  .pf-v5-l-flex.pf-m-row-on-2xl {
807
824
  flex-direction: row;
808
825
  align-items: var(--pf-v5-l-flex--m-row--AlignItems);
809
826
  }
810
827
  .pf-v5-l-flex.pf-m-row-on-2xl > * {
811
- margin: 0 var(--pf-v5-l-flex--spacer) 0 0;
828
+ margin: 0 var(--pf-v5-l-flex--spacer--column) 0 0;
812
829
  }
813
830
  .pf-v5-l-flex.pf-m-row-reverse-on-2xl {
814
831
  flex-direction: row-reverse;
815
832
  align-items: var(--pf-v5-l-flex--m-row-reverse--AlignItems);
816
833
  }
817
834
  .pf-v5-l-flex.pf-m-row-reverse-on-2xl > * {
818
- margin: 0 0 0 var(--pf-v5-l-flex--spacer);
835
+ margin: 0 0 0 var(--pf-v5-l-flex--spacer--column);
819
836
  }
820
837
  .pf-v5-l-flex.pf-m-wrap-on-2xl {
821
838
  flex-wrap: wrap;
@@ -1594,4 +1611,634 @@
1594
1611
  .pf-v5-l-flex .pf-m-spacer-4xl-on-2xl:last-child {
1595
1612
  --pf-v5-l-flex--spacer: var(--pf-v5-l-flex--spacer--4xl);
1596
1613
  }
1614
+ }
1615
+ .pf-v5-l-flex.pf-m-gap-invalid spacer base {
1616
+ --pf-v5-l-flex--RowGap: ;
1617
+ --pf-v5-l-flex--ColumnGap: ;
1618
+ }
1619
+ .pf-v5-l-flex.pf-m-gap-none {
1620
+ --pf-v5-l-flex--RowGap: 0;
1621
+ --pf-v5-l-flex--ColumnGap: 0;
1622
+ }
1623
+ .pf-v5-l-flex.pf-m-gap-sm {
1624
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--sm);
1625
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--sm);
1626
+ }
1627
+ .pf-v5-l-flex.pf-m-gap-md {
1628
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--md);
1629
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--md);
1630
+ }
1631
+ .pf-v5-l-flex.pf-m-gap-lg {
1632
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--lg);
1633
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--lg);
1634
+ }
1635
+ .pf-v5-l-flex.pf-m-gap-xl {
1636
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--xl);
1637
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--xl);
1638
+ }
1639
+ .pf-v5-l-flex.pf-m-gap-2xl {
1640
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--2xl);
1641
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--2xl);
1642
+ }
1643
+ .pf-v5-l-flex.pf-m-gap-3xl {
1644
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--3xl);
1645
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--3xl);
1646
+ }
1647
+ .pf-v5-l-flex.pf-m-gap-4xl {
1648
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
1649
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
1650
+ }
1651
+ .pf-v5-l-flex:is(.pf-m-gap-invalid spacer base, .pf-m-gap-none, .pf-m-gap-sm, .pf-m-gap-md, .pf-m-gap-lg, .pf-m-gap-xl, .pf-m-gap-2xl, .pf-m-gap-3xl, .pf-m-gap-4xl) > * {
1652
+ --pf-v5-l-flex--spacer--row: 0;
1653
+ --pf-v5-l-flex--spacer--column: 0;
1654
+ }
1655
+ @media (min-width: 576px) {
1656
+ .pf-v5-l-flex.pf-m-gap-invalid spacer base-on-sm {
1657
+ --pf-v5-l-flex--RowGap: ;
1658
+ --pf-v5-l-flex--ColumnGap: ;
1659
+ }
1660
+ .pf-v5-l-flex.pf-m-gap-none-on-sm {
1661
+ --pf-v5-l-flex--RowGap: 0;
1662
+ --pf-v5-l-flex--ColumnGap: 0;
1663
+ }
1664
+ .pf-v5-l-flex.pf-m-gap-sm-on-sm {
1665
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--sm);
1666
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--sm);
1667
+ }
1668
+ .pf-v5-l-flex.pf-m-gap-md-on-sm {
1669
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--md);
1670
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--md);
1671
+ }
1672
+ .pf-v5-l-flex.pf-m-gap-lg-on-sm {
1673
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--lg);
1674
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--lg);
1675
+ }
1676
+ .pf-v5-l-flex.pf-m-gap-xl-on-sm {
1677
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--xl);
1678
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--xl);
1679
+ }
1680
+ .pf-v5-l-flex.pf-m-gap-2xl-on-sm {
1681
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--2xl);
1682
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--2xl);
1683
+ }
1684
+ .pf-v5-l-flex.pf-m-gap-3xl-on-sm {
1685
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--3xl);
1686
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--3xl);
1687
+ }
1688
+ .pf-v5-l-flex.pf-m-gap-4xl-on-sm {
1689
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
1690
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
1691
+ }
1692
+ .pf-v5-l-flex:is(.pf-m-gap-invalid spacer base-on-sm, .pf-m-gap-none-on-sm, .pf-m-gap-sm-on-sm, .pf-m-gap-md-on-sm, .pf-m-gap-lg-on-sm, .pf-m-gap-xl-on-sm, .pf-m-gap-2xl-on-sm, .pf-m-gap-3xl-on-sm, .pf-m-gap-4xl-on-sm) > * {
1693
+ --pf-v5-l-flex--spacer--row: 0;
1694
+ --pf-v5-l-flex--spacer--column: 0;
1695
+ }
1696
+ }
1697
+ @media (min-width: 768px) {
1698
+ .pf-v5-l-flex.pf-m-gap-invalid spacer base-on-md {
1699
+ --pf-v5-l-flex--RowGap: ;
1700
+ --pf-v5-l-flex--ColumnGap: ;
1701
+ }
1702
+ .pf-v5-l-flex.pf-m-gap-none-on-md {
1703
+ --pf-v5-l-flex--RowGap: 0;
1704
+ --pf-v5-l-flex--ColumnGap: 0;
1705
+ }
1706
+ .pf-v5-l-flex.pf-m-gap-sm-on-md {
1707
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--sm);
1708
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--sm);
1709
+ }
1710
+ .pf-v5-l-flex.pf-m-gap-md-on-md {
1711
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--md);
1712
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--md);
1713
+ }
1714
+ .pf-v5-l-flex.pf-m-gap-lg-on-md {
1715
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--lg);
1716
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--lg);
1717
+ }
1718
+ .pf-v5-l-flex.pf-m-gap-xl-on-md {
1719
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--xl);
1720
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--xl);
1721
+ }
1722
+ .pf-v5-l-flex.pf-m-gap-2xl-on-md {
1723
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--2xl);
1724
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--2xl);
1725
+ }
1726
+ .pf-v5-l-flex.pf-m-gap-3xl-on-md {
1727
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--3xl);
1728
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--3xl);
1729
+ }
1730
+ .pf-v5-l-flex.pf-m-gap-4xl-on-md {
1731
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
1732
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
1733
+ }
1734
+ .pf-v5-l-flex:is(.pf-m-gap-invalid spacer base-on-md, .pf-m-gap-none-on-md, .pf-m-gap-sm-on-md, .pf-m-gap-md-on-md, .pf-m-gap-lg-on-md, .pf-m-gap-xl-on-md, .pf-m-gap-2xl-on-md, .pf-m-gap-3xl-on-md, .pf-m-gap-4xl-on-md) > * {
1735
+ --pf-v5-l-flex--spacer--row: 0;
1736
+ --pf-v5-l-flex--spacer--column: 0;
1737
+ }
1738
+ }
1739
+ @media (min-width: 992px) {
1740
+ .pf-v5-l-flex.pf-m-gap-invalid spacer base-on-lg {
1741
+ --pf-v5-l-flex--RowGap: ;
1742
+ --pf-v5-l-flex--ColumnGap: ;
1743
+ }
1744
+ .pf-v5-l-flex.pf-m-gap-none-on-lg {
1745
+ --pf-v5-l-flex--RowGap: 0;
1746
+ --pf-v5-l-flex--ColumnGap: 0;
1747
+ }
1748
+ .pf-v5-l-flex.pf-m-gap-sm-on-lg {
1749
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--sm);
1750
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--sm);
1751
+ }
1752
+ .pf-v5-l-flex.pf-m-gap-md-on-lg {
1753
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--md);
1754
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--md);
1755
+ }
1756
+ .pf-v5-l-flex.pf-m-gap-lg-on-lg {
1757
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--lg);
1758
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--lg);
1759
+ }
1760
+ .pf-v5-l-flex.pf-m-gap-xl-on-lg {
1761
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--xl);
1762
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--xl);
1763
+ }
1764
+ .pf-v5-l-flex.pf-m-gap-2xl-on-lg {
1765
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--2xl);
1766
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--2xl);
1767
+ }
1768
+ .pf-v5-l-flex.pf-m-gap-3xl-on-lg {
1769
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--3xl);
1770
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--3xl);
1771
+ }
1772
+ .pf-v5-l-flex.pf-m-gap-4xl-on-lg {
1773
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
1774
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
1775
+ }
1776
+ .pf-v5-l-flex:is(.pf-m-gap-invalid spacer base-on-lg, .pf-m-gap-none-on-lg, .pf-m-gap-sm-on-lg, .pf-m-gap-md-on-lg, .pf-m-gap-lg-on-lg, .pf-m-gap-xl-on-lg, .pf-m-gap-2xl-on-lg, .pf-m-gap-3xl-on-lg, .pf-m-gap-4xl-on-lg) > * {
1777
+ --pf-v5-l-flex--spacer--row: 0;
1778
+ --pf-v5-l-flex--spacer--column: 0;
1779
+ }
1780
+ }
1781
+ @media (min-width: 1200px) {
1782
+ .pf-v5-l-flex.pf-m-gap-invalid spacer base-on-xl {
1783
+ --pf-v5-l-flex--RowGap: ;
1784
+ --pf-v5-l-flex--ColumnGap: ;
1785
+ }
1786
+ .pf-v5-l-flex.pf-m-gap-none-on-xl {
1787
+ --pf-v5-l-flex--RowGap: 0;
1788
+ --pf-v5-l-flex--ColumnGap: 0;
1789
+ }
1790
+ .pf-v5-l-flex.pf-m-gap-sm-on-xl {
1791
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--sm);
1792
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--sm);
1793
+ }
1794
+ .pf-v5-l-flex.pf-m-gap-md-on-xl {
1795
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--md);
1796
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--md);
1797
+ }
1798
+ .pf-v5-l-flex.pf-m-gap-lg-on-xl {
1799
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--lg);
1800
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--lg);
1801
+ }
1802
+ .pf-v5-l-flex.pf-m-gap-xl-on-xl {
1803
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--xl);
1804
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--xl);
1805
+ }
1806
+ .pf-v5-l-flex.pf-m-gap-2xl-on-xl {
1807
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--2xl);
1808
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--2xl);
1809
+ }
1810
+ .pf-v5-l-flex.pf-m-gap-3xl-on-xl {
1811
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--3xl);
1812
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--3xl);
1813
+ }
1814
+ .pf-v5-l-flex.pf-m-gap-4xl-on-xl {
1815
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
1816
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
1817
+ }
1818
+ .pf-v5-l-flex:is(.pf-m-gap-invalid spacer base-on-xl, .pf-m-gap-none-on-xl, .pf-m-gap-sm-on-xl, .pf-m-gap-md-on-xl, .pf-m-gap-lg-on-xl, .pf-m-gap-xl-on-xl, .pf-m-gap-2xl-on-xl, .pf-m-gap-3xl-on-xl, .pf-m-gap-4xl-on-xl) > * {
1819
+ --pf-v5-l-flex--spacer--row: 0;
1820
+ --pf-v5-l-flex--spacer--column: 0;
1821
+ }
1822
+ }
1823
+ @media (min-width: 1450px) {
1824
+ .pf-v5-l-flex.pf-m-gap-invalid spacer base-on-2xl {
1825
+ --pf-v5-l-flex--RowGap: ;
1826
+ --pf-v5-l-flex--ColumnGap: ;
1827
+ }
1828
+ .pf-v5-l-flex.pf-m-gap-none-on-2xl {
1829
+ --pf-v5-l-flex--RowGap: 0;
1830
+ --pf-v5-l-flex--ColumnGap: 0;
1831
+ }
1832
+ .pf-v5-l-flex.pf-m-gap-sm-on-2xl {
1833
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--sm);
1834
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--sm);
1835
+ }
1836
+ .pf-v5-l-flex.pf-m-gap-md-on-2xl {
1837
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--md);
1838
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--md);
1839
+ }
1840
+ .pf-v5-l-flex.pf-m-gap-lg-on-2xl {
1841
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--lg);
1842
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--lg);
1843
+ }
1844
+ .pf-v5-l-flex.pf-m-gap-xl-on-2xl {
1845
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--xl);
1846
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--xl);
1847
+ }
1848
+ .pf-v5-l-flex.pf-m-gap-2xl-on-2xl {
1849
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--2xl);
1850
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--2xl);
1851
+ }
1852
+ .pf-v5-l-flex.pf-m-gap-3xl-on-2xl {
1853
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--3xl);
1854
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--3xl);
1855
+ }
1856
+ .pf-v5-l-flex.pf-m-gap-4xl-on-2xl {
1857
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
1858
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
1859
+ }
1860
+ .pf-v5-l-flex:is(.pf-m-gap-invalid spacer base-on-2xl, .pf-m-gap-none-on-2xl, .pf-m-gap-sm-on-2xl, .pf-m-gap-md-on-2xl, .pf-m-gap-lg-on-2xl, .pf-m-gap-xl-on-2xl, .pf-m-gap-2xl-on-2xl, .pf-m-gap-3xl-on-2xl, .pf-m-gap-4xl-on-2xl) > * {
1861
+ --pf-v5-l-flex--spacer--row: 0;
1862
+ --pf-v5-l-flex--spacer--column: 0;
1863
+ }
1864
+ }
1865
+ .pf-v5-l-flex.pf-m-row-gap-invalid spacer base {
1866
+ --pf-v5-l-flex--RowGap: ;
1867
+ }
1868
+ .pf-v5-l-flex.pf-m-row-gap-none {
1869
+ --pf-v5-l-flex--RowGap: 0;
1870
+ }
1871
+ .pf-v5-l-flex.pf-m-row-gap-sm {
1872
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--sm);
1873
+ }
1874
+ .pf-v5-l-flex.pf-m-row-gap-md {
1875
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--md);
1876
+ }
1877
+ .pf-v5-l-flex.pf-m-row-gap-lg {
1878
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--lg);
1879
+ }
1880
+ .pf-v5-l-flex.pf-m-row-gap-xl {
1881
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--xl);
1882
+ }
1883
+ .pf-v5-l-flex.pf-m-row-gap-2xl {
1884
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--2xl);
1885
+ }
1886
+ .pf-v5-l-flex.pf-m-row-gap-3xl {
1887
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--3xl);
1888
+ }
1889
+ .pf-v5-l-flex.pf-m-row-gap-4xl {
1890
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
1891
+ }
1892
+ .pf-v5-l-flex:is(.pf-m-row-gap-invalid spacer base, .pf-m-row-gap-none, .pf-m-row-gap-sm, .pf-m-row-gap-md, .pf-m-row-gap-lg, .pf-m-row-gap-xl, .pf-m-row-gap-2xl, .pf-m-row-gap-3xl, .pf-m-row-gap-4xl) > * {
1893
+ --pf-v5-l-flex--spacer--row: 0;
1894
+ }
1895
+ @media (min-width: 576px) {
1896
+ .pf-v5-l-flex.pf-m-row-gap-invalid spacer base-on-sm {
1897
+ --pf-v5-l-flex--RowGap: ;
1898
+ }
1899
+ .pf-v5-l-flex.pf-m-row-gap-none-on-sm {
1900
+ --pf-v5-l-flex--RowGap: 0;
1901
+ }
1902
+ .pf-v5-l-flex.pf-m-row-gap-sm-on-sm {
1903
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--sm);
1904
+ }
1905
+ .pf-v5-l-flex.pf-m-row-gap-md-on-sm {
1906
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--md);
1907
+ }
1908
+ .pf-v5-l-flex.pf-m-row-gap-lg-on-sm {
1909
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--lg);
1910
+ }
1911
+ .pf-v5-l-flex.pf-m-row-gap-xl-on-sm {
1912
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--xl);
1913
+ }
1914
+ .pf-v5-l-flex.pf-m-row-gap-2xl-on-sm {
1915
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--2xl);
1916
+ }
1917
+ .pf-v5-l-flex.pf-m-row-gap-3xl-on-sm {
1918
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--3xl);
1919
+ }
1920
+ .pf-v5-l-flex.pf-m-row-gap-4xl-on-sm {
1921
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
1922
+ }
1923
+ .pf-v5-l-flex:is(.pf-m-row-gap-invalid spacer base-on-sm, .pf-m-row-gap-none-on-sm, .pf-m-row-gap-sm-on-sm, .pf-m-row-gap-md-on-sm, .pf-m-row-gap-lg-on-sm, .pf-m-row-gap-xl-on-sm, .pf-m-row-gap-2xl-on-sm, .pf-m-row-gap-3xl-on-sm, .pf-m-row-gap-4xl-on-sm) > * {
1924
+ --pf-v5-l-flex--spacer--row: 0;
1925
+ }
1926
+ }
1927
+ @media (min-width: 768px) {
1928
+ .pf-v5-l-flex.pf-m-row-gap-invalid spacer base-on-md {
1929
+ --pf-v5-l-flex--RowGap: ;
1930
+ }
1931
+ .pf-v5-l-flex.pf-m-row-gap-none-on-md {
1932
+ --pf-v5-l-flex--RowGap: 0;
1933
+ }
1934
+ .pf-v5-l-flex.pf-m-row-gap-sm-on-md {
1935
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--sm);
1936
+ }
1937
+ .pf-v5-l-flex.pf-m-row-gap-md-on-md {
1938
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--md);
1939
+ }
1940
+ .pf-v5-l-flex.pf-m-row-gap-lg-on-md {
1941
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--lg);
1942
+ }
1943
+ .pf-v5-l-flex.pf-m-row-gap-xl-on-md {
1944
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--xl);
1945
+ }
1946
+ .pf-v5-l-flex.pf-m-row-gap-2xl-on-md {
1947
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--2xl);
1948
+ }
1949
+ .pf-v5-l-flex.pf-m-row-gap-3xl-on-md {
1950
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--3xl);
1951
+ }
1952
+ .pf-v5-l-flex.pf-m-row-gap-4xl-on-md {
1953
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
1954
+ }
1955
+ .pf-v5-l-flex:is(.pf-m-row-gap-invalid spacer base-on-md, .pf-m-row-gap-none-on-md, .pf-m-row-gap-sm-on-md, .pf-m-row-gap-md-on-md, .pf-m-row-gap-lg-on-md, .pf-m-row-gap-xl-on-md, .pf-m-row-gap-2xl-on-md, .pf-m-row-gap-3xl-on-md, .pf-m-row-gap-4xl-on-md) > * {
1956
+ --pf-v5-l-flex--spacer--row: 0;
1957
+ }
1958
+ }
1959
+ @media (min-width: 992px) {
1960
+ .pf-v5-l-flex.pf-m-row-gap-invalid spacer base-on-lg {
1961
+ --pf-v5-l-flex--RowGap: ;
1962
+ }
1963
+ .pf-v5-l-flex.pf-m-row-gap-none-on-lg {
1964
+ --pf-v5-l-flex--RowGap: 0;
1965
+ }
1966
+ .pf-v5-l-flex.pf-m-row-gap-sm-on-lg {
1967
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--sm);
1968
+ }
1969
+ .pf-v5-l-flex.pf-m-row-gap-md-on-lg {
1970
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--md);
1971
+ }
1972
+ .pf-v5-l-flex.pf-m-row-gap-lg-on-lg {
1973
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--lg);
1974
+ }
1975
+ .pf-v5-l-flex.pf-m-row-gap-xl-on-lg {
1976
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--xl);
1977
+ }
1978
+ .pf-v5-l-flex.pf-m-row-gap-2xl-on-lg {
1979
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--2xl);
1980
+ }
1981
+ .pf-v5-l-flex.pf-m-row-gap-3xl-on-lg {
1982
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--3xl);
1983
+ }
1984
+ .pf-v5-l-flex.pf-m-row-gap-4xl-on-lg {
1985
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
1986
+ }
1987
+ .pf-v5-l-flex:is(.pf-m-row-gap-invalid spacer base-on-lg, .pf-m-row-gap-none-on-lg, .pf-m-row-gap-sm-on-lg, .pf-m-row-gap-md-on-lg, .pf-m-row-gap-lg-on-lg, .pf-m-row-gap-xl-on-lg, .pf-m-row-gap-2xl-on-lg, .pf-m-row-gap-3xl-on-lg, .pf-m-row-gap-4xl-on-lg) > * {
1988
+ --pf-v5-l-flex--spacer--row: 0;
1989
+ }
1990
+ }
1991
+ @media (min-width: 1200px) {
1992
+ .pf-v5-l-flex.pf-m-row-gap-invalid spacer base-on-xl {
1993
+ --pf-v5-l-flex--RowGap: ;
1994
+ }
1995
+ .pf-v5-l-flex.pf-m-row-gap-none-on-xl {
1996
+ --pf-v5-l-flex--RowGap: 0;
1997
+ }
1998
+ .pf-v5-l-flex.pf-m-row-gap-sm-on-xl {
1999
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--sm);
2000
+ }
2001
+ .pf-v5-l-flex.pf-m-row-gap-md-on-xl {
2002
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--md);
2003
+ }
2004
+ .pf-v5-l-flex.pf-m-row-gap-lg-on-xl {
2005
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--lg);
2006
+ }
2007
+ .pf-v5-l-flex.pf-m-row-gap-xl-on-xl {
2008
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--xl);
2009
+ }
2010
+ .pf-v5-l-flex.pf-m-row-gap-2xl-on-xl {
2011
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--2xl);
2012
+ }
2013
+ .pf-v5-l-flex.pf-m-row-gap-3xl-on-xl {
2014
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--3xl);
2015
+ }
2016
+ .pf-v5-l-flex.pf-m-row-gap-4xl-on-xl {
2017
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
2018
+ }
2019
+ .pf-v5-l-flex:is(.pf-m-row-gap-invalid spacer base-on-xl, .pf-m-row-gap-none-on-xl, .pf-m-row-gap-sm-on-xl, .pf-m-row-gap-md-on-xl, .pf-m-row-gap-lg-on-xl, .pf-m-row-gap-xl-on-xl, .pf-m-row-gap-2xl-on-xl, .pf-m-row-gap-3xl-on-xl, .pf-m-row-gap-4xl-on-xl) > * {
2020
+ --pf-v5-l-flex--spacer--row: 0;
2021
+ }
2022
+ }
2023
+ @media (min-width: 1450px) {
2024
+ .pf-v5-l-flex.pf-m-row-gap-invalid spacer base-on-2xl {
2025
+ --pf-v5-l-flex--RowGap: ;
2026
+ }
2027
+ .pf-v5-l-flex.pf-m-row-gap-none-on-2xl {
2028
+ --pf-v5-l-flex--RowGap: 0;
2029
+ }
2030
+ .pf-v5-l-flex.pf-m-row-gap-sm-on-2xl {
2031
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--sm);
2032
+ }
2033
+ .pf-v5-l-flex.pf-m-row-gap-md-on-2xl {
2034
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--md);
2035
+ }
2036
+ .pf-v5-l-flex.pf-m-row-gap-lg-on-2xl {
2037
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--lg);
2038
+ }
2039
+ .pf-v5-l-flex.pf-m-row-gap-xl-on-2xl {
2040
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--xl);
2041
+ }
2042
+ .pf-v5-l-flex.pf-m-row-gap-2xl-on-2xl {
2043
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--2xl);
2044
+ }
2045
+ .pf-v5-l-flex.pf-m-row-gap-3xl-on-2xl {
2046
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--3xl);
2047
+ }
2048
+ .pf-v5-l-flex.pf-m-row-gap-4xl-on-2xl {
2049
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
2050
+ }
2051
+ .pf-v5-l-flex:is(.pf-m-row-gap-invalid spacer base-on-2xl, .pf-m-row-gap-none-on-2xl, .pf-m-row-gap-sm-on-2xl, .pf-m-row-gap-md-on-2xl, .pf-m-row-gap-lg-on-2xl, .pf-m-row-gap-xl-on-2xl, .pf-m-row-gap-2xl-on-2xl, .pf-m-row-gap-3xl-on-2xl, .pf-m-row-gap-4xl-on-2xl) > * {
2052
+ --pf-v5-l-flex--spacer--row: 0;
2053
+ }
2054
+ }
2055
+ .pf-v5-l-flex.pf-m-column-gap-invalid spacer base {
2056
+ --pf-v5-l-flex--ColumnGap: ;
2057
+ }
2058
+ .pf-v5-l-flex.pf-m-column-gap-none {
2059
+ --pf-v5-l-flex--ColumnGap: 0;
2060
+ }
2061
+ .pf-v5-l-flex.pf-m-column-gap-sm {
2062
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--sm);
2063
+ }
2064
+ .pf-v5-l-flex.pf-m-column-gap-md {
2065
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--md);
2066
+ }
2067
+ .pf-v5-l-flex.pf-m-column-gap-lg {
2068
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--lg);
2069
+ }
2070
+ .pf-v5-l-flex.pf-m-column-gap-xl {
2071
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--xl);
2072
+ }
2073
+ .pf-v5-l-flex.pf-m-column-gap-2xl {
2074
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--2xl);
2075
+ }
2076
+ .pf-v5-l-flex.pf-m-column-gap-3xl {
2077
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--3xl);
2078
+ }
2079
+ .pf-v5-l-flex.pf-m-column-gap-4xl {
2080
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
2081
+ }
2082
+ .pf-v5-l-flex:is(.pf-m-column-gap-invalid spacer base, .pf-m-column-gap-none, .pf-m-column-gap-sm, .pf-m-column-gap-md, .pf-m-column-gap-lg, .pf-m-column-gap-xl, .pf-m-column-gap-2xl, .pf-m-column-gap-3xl, .pf-m-column-gap-4xl) > * {
2083
+ --pf-v5-l-flex--spacer--column: 0;
2084
+ }
2085
+ @media (min-width: 576px) {
2086
+ .pf-v5-l-flex.pf-m-column-gap-invalid spacer base-on-sm {
2087
+ --pf-v5-l-flex--ColumnGap: ;
2088
+ }
2089
+ .pf-v5-l-flex.pf-m-column-gap-none-on-sm {
2090
+ --pf-v5-l-flex--ColumnGap: 0;
2091
+ }
2092
+ .pf-v5-l-flex.pf-m-column-gap-sm-on-sm {
2093
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--sm);
2094
+ }
2095
+ .pf-v5-l-flex.pf-m-column-gap-md-on-sm {
2096
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--md);
2097
+ }
2098
+ .pf-v5-l-flex.pf-m-column-gap-lg-on-sm {
2099
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--lg);
2100
+ }
2101
+ .pf-v5-l-flex.pf-m-column-gap-xl-on-sm {
2102
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--xl);
2103
+ }
2104
+ .pf-v5-l-flex.pf-m-column-gap-2xl-on-sm {
2105
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--2xl);
2106
+ }
2107
+ .pf-v5-l-flex.pf-m-column-gap-3xl-on-sm {
2108
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--3xl);
2109
+ }
2110
+ .pf-v5-l-flex.pf-m-column-gap-4xl-on-sm {
2111
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
2112
+ }
2113
+ .pf-v5-l-flex:is(.pf-m-column-gap-invalid spacer base-on-sm, .pf-m-column-gap-none-on-sm, .pf-m-column-gap-sm-on-sm, .pf-m-column-gap-md-on-sm, .pf-m-column-gap-lg-on-sm, .pf-m-column-gap-xl-on-sm, .pf-m-column-gap-2xl-on-sm, .pf-m-column-gap-3xl-on-sm, .pf-m-column-gap-4xl-on-sm) > * {
2114
+ --pf-v5-l-flex--spacer--column: 0;
2115
+ }
2116
+ }
2117
+ @media (min-width: 768px) {
2118
+ .pf-v5-l-flex.pf-m-column-gap-invalid spacer base-on-md {
2119
+ --pf-v5-l-flex--ColumnGap: ;
2120
+ }
2121
+ .pf-v5-l-flex.pf-m-column-gap-none-on-md {
2122
+ --pf-v5-l-flex--ColumnGap: 0;
2123
+ }
2124
+ .pf-v5-l-flex.pf-m-column-gap-sm-on-md {
2125
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--sm);
2126
+ }
2127
+ .pf-v5-l-flex.pf-m-column-gap-md-on-md {
2128
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--md);
2129
+ }
2130
+ .pf-v5-l-flex.pf-m-column-gap-lg-on-md {
2131
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--lg);
2132
+ }
2133
+ .pf-v5-l-flex.pf-m-column-gap-xl-on-md {
2134
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--xl);
2135
+ }
2136
+ .pf-v5-l-flex.pf-m-column-gap-2xl-on-md {
2137
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--2xl);
2138
+ }
2139
+ .pf-v5-l-flex.pf-m-column-gap-3xl-on-md {
2140
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--3xl);
2141
+ }
2142
+ .pf-v5-l-flex.pf-m-column-gap-4xl-on-md {
2143
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
2144
+ }
2145
+ .pf-v5-l-flex:is(.pf-m-column-gap-invalid spacer base-on-md, .pf-m-column-gap-none-on-md, .pf-m-column-gap-sm-on-md, .pf-m-column-gap-md-on-md, .pf-m-column-gap-lg-on-md, .pf-m-column-gap-xl-on-md, .pf-m-column-gap-2xl-on-md, .pf-m-column-gap-3xl-on-md, .pf-m-column-gap-4xl-on-md) > * {
2146
+ --pf-v5-l-flex--spacer--column: 0;
2147
+ }
2148
+ }
2149
+ @media (min-width: 992px) {
2150
+ .pf-v5-l-flex.pf-m-column-gap-invalid spacer base-on-lg {
2151
+ --pf-v5-l-flex--ColumnGap: ;
2152
+ }
2153
+ .pf-v5-l-flex.pf-m-column-gap-none-on-lg {
2154
+ --pf-v5-l-flex--ColumnGap: 0;
2155
+ }
2156
+ .pf-v5-l-flex.pf-m-column-gap-sm-on-lg {
2157
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--sm);
2158
+ }
2159
+ .pf-v5-l-flex.pf-m-column-gap-md-on-lg {
2160
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--md);
2161
+ }
2162
+ .pf-v5-l-flex.pf-m-column-gap-lg-on-lg {
2163
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--lg);
2164
+ }
2165
+ .pf-v5-l-flex.pf-m-column-gap-xl-on-lg {
2166
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--xl);
2167
+ }
2168
+ .pf-v5-l-flex.pf-m-column-gap-2xl-on-lg {
2169
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--2xl);
2170
+ }
2171
+ .pf-v5-l-flex.pf-m-column-gap-3xl-on-lg {
2172
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--3xl);
2173
+ }
2174
+ .pf-v5-l-flex.pf-m-column-gap-4xl-on-lg {
2175
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
2176
+ }
2177
+ .pf-v5-l-flex:is(.pf-m-column-gap-invalid spacer base-on-lg, .pf-m-column-gap-none-on-lg, .pf-m-column-gap-sm-on-lg, .pf-m-column-gap-md-on-lg, .pf-m-column-gap-lg-on-lg, .pf-m-column-gap-xl-on-lg, .pf-m-column-gap-2xl-on-lg, .pf-m-column-gap-3xl-on-lg, .pf-m-column-gap-4xl-on-lg) > * {
2178
+ --pf-v5-l-flex--spacer--column: 0;
2179
+ }
2180
+ }
2181
+ @media (min-width: 1200px) {
2182
+ .pf-v5-l-flex.pf-m-column-gap-invalid spacer base-on-xl {
2183
+ --pf-v5-l-flex--ColumnGap: ;
2184
+ }
2185
+ .pf-v5-l-flex.pf-m-column-gap-none-on-xl {
2186
+ --pf-v5-l-flex--ColumnGap: 0;
2187
+ }
2188
+ .pf-v5-l-flex.pf-m-column-gap-sm-on-xl {
2189
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--sm);
2190
+ }
2191
+ .pf-v5-l-flex.pf-m-column-gap-md-on-xl {
2192
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--md);
2193
+ }
2194
+ .pf-v5-l-flex.pf-m-column-gap-lg-on-xl {
2195
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--lg);
2196
+ }
2197
+ .pf-v5-l-flex.pf-m-column-gap-xl-on-xl {
2198
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--xl);
2199
+ }
2200
+ .pf-v5-l-flex.pf-m-column-gap-2xl-on-xl {
2201
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--2xl);
2202
+ }
2203
+ .pf-v5-l-flex.pf-m-column-gap-3xl-on-xl {
2204
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--3xl);
2205
+ }
2206
+ .pf-v5-l-flex.pf-m-column-gap-4xl-on-xl {
2207
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
2208
+ }
2209
+ .pf-v5-l-flex:is(.pf-m-column-gap-invalid spacer base-on-xl, .pf-m-column-gap-none-on-xl, .pf-m-column-gap-sm-on-xl, .pf-m-column-gap-md-on-xl, .pf-m-column-gap-lg-on-xl, .pf-m-column-gap-xl-on-xl, .pf-m-column-gap-2xl-on-xl, .pf-m-column-gap-3xl-on-xl, .pf-m-column-gap-4xl-on-xl) > * {
2210
+ --pf-v5-l-flex--spacer--column: 0;
2211
+ }
2212
+ }
2213
+ @media (min-width: 1450px) {
2214
+ .pf-v5-l-flex.pf-m-column-gap-invalid spacer base-on-2xl {
2215
+ --pf-v5-l-flex--ColumnGap: ;
2216
+ }
2217
+ .pf-v5-l-flex.pf-m-column-gap-none-on-2xl {
2218
+ --pf-v5-l-flex--ColumnGap: 0;
2219
+ }
2220
+ .pf-v5-l-flex.pf-m-column-gap-sm-on-2xl {
2221
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--sm);
2222
+ }
2223
+ .pf-v5-l-flex.pf-m-column-gap-md-on-2xl {
2224
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--md);
2225
+ }
2226
+ .pf-v5-l-flex.pf-m-column-gap-lg-on-2xl {
2227
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--lg);
2228
+ }
2229
+ .pf-v5-l-flex.pf-m-column-gap-xl-on-2xl {
2230
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--xl);
2231
+ }
2232
+ .pf-v5-l-flex.pf-m-column-gap-2xl-on-2xl {
2233
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--2xl);
2234
+ }
2235
+ .pf-v5-l-flex.pf-m-column-gap-3xl-on-2xl {
2236
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--3xl);
2237
+ }
2238
+ .pf-v5-l-flex.pf-m-column-gap-4xl-on-2xl {
2239
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
2240
+ }
2241
+ .pf-v5-l-flex:is(.pf-m-column-gap-invalid spacer base-on-2xl, .pf-m-column-gap-none-on-2xl, .pf-m-column-gap-sm-on-2xl, .pf-m-column-gap-md-on-2xl, .pf-m-column-gap-lg-on-2xl, .pf-m-column-gap-xl-on-2xl, .pf-m-column-gap-2xl-on-2xl, .pf-m-column-gap-3xl-on-2xl, .pf-m-column-gap-4xl-on-2xl) > * {
2242
+ --pf-v5-l-flex--spacer--column: 0;
2243
+ }
1597
2244
  }