@patternfly/react-styles 5.1.0 → 5.1.1-prerelease.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (106) hide show
  1. package/CHANGELOG.md +4 -2
  2. package/css/components/AboutModalBox/about-modal-box.css +20 -13
  3. package/css/components/Accordion/accordion.css +30 -20
  4. package/css/components/ActionList/action-list.css +2 -2
  5. package/css/components/Alert/alert-group.css +7 -4
  6. package/css/components/Alert/alert.css +16 -13
  7. package/css/components/AppLauncher/app-launcher.css +32 -23
  8. package/css/components/BackToTop/back-to-top.css +2 -2
  9. package/css/components/Backdrop/backdrop.css +2 -2
  10. package/css/components/BackgroundImage/background-image.css +2 -2
  11. package/css/components/Badge/badge.css +2 -2
  12. package/css/components/Banner/banner.css +5 -2
  13. package/css/components/Breadcrumb/breadcrumb.css +6 -3
  14. package/css/components/Button/button.css +23 -17
  15. package/css/components/CalendarMonth/calendar-month.css +21 -15
  16. package/css/components/Card/card.css +21 -16
  17. package/css/components/Check/check.css +2 -2
  18. package/css/components/Chip/chip-group.css +6 -6
  19. package/css/components/Chip/chip.css +16 -9
  20. package/css/components/Chip/chip.d.ts +1 -0
  21. package/css/components/Chip/chip.js +1 -0
  22. package/css/components/Chip/chip.mjs +1 -0
  23. package/css/components/ClipboardCopy/clipboard-copy.css +16 -10
  24. package/css/components/CodeBlock/code-block.css +6 -3
  25. package/css/components/CodeEditor/code-editor.css +31 -22
  26. package/css/components/Content/content.css +33 -30
  27. package/css/components/ContextSelector/context-selector.css +41 -26
  28. package/css/components/DataList/data-list-grid.css +21 -49
  29. package/css/components/DataList/data-list.css +66 -84
  30. package/css/components/DatePicker/date-picker.css +8 -8
  31. package/css/components/DescriptionList/description-list.css +8 -5
  32. package/css/components/DragDrop/drag-drop.css +8 -8
  33. package/css/components/Drawer/drawer.css +75 -60
  34. package/css/components/Dropdown/dropdown.css +75 -66
  35. package/css/components/DualListSelector/dual-list-selector.css +20 -14
  36. package/css/components/EmptyState/empty-state.css +7 -4
  37. package/css/components/ExpandableSection/expandable-section.css +13 -10
  38. package/css/components/FileUpload/file-upload.css +9 -15
  39. package/css/components/Form/form.css +50 -50
  40. package/css/components/FormControl/form-control.css +21 -11
  41. package/css/components/HelperText/helper-text.css +1 -1
  42. package/css/components/Hint/hint.css +9 -6
  43. package/css/components/Icon/icon.css +1 -1
  44. package/css/components/InlineEdit/inline-edit.css +4 -4
  45. package/css/components/InputGroup/input-group.css +12 -6
  46. package/css/components/JumpLinks/jump-links.css +24 -24
  47. package/css/components/Label/label-group.css +13 -10
  48. package/css/components/Label/label.css +9 -9
  49. package/css/components/List/list.css +9 -9
  50. package/css/components/LogViewer/log-viewer.css +14 -14
  51. package/css/components/Login/login.css +36 -27
  52. package/css/components/Masthead/masthead.css +19 -22
  53. package/css/components/Menu/menu.css +69 -66
  54. package/css/components/MenuToggle/menu-toggle.css +41 -29
  55. package/css/components/ModalBox/modal-box.css +19 -19
  56. package/css/components/MultipleFileUpload/multiple-file-upload.css +11 -8
  57. package/css/components/Nav/nav.css +100 -93
  58. package/css/components/NotificationBadge/notification-badge.css +13 -7
  59. package/css/components/NotificationDrawer/notification-drawer.css +28 -19
  60. package/css/components/NumberInput/number-input.css +3 -3
  61. package/css/components/OptionsMenu/options-menu.css +43 -31
  62. package/css/components/OverflowMenu/overflow-menu.css +2 -2
  63. package/css/components/Page/page.css +119 -65
  64. package/css/components/Pagination/pagination.css +24 -18
  65. package/css/components/Panel/panel.css +13 -7
  66. package/css/components/Popover/popover.css +24 -21
  67. package/css/components/Progress/progress.css +7 -7
  68. package/css/components/ProgressStepper/progress-stepper.css +26 -20
  69. package/css/components/Radio/radio.css +4 -5
  70. package/css/components/Select/select.css +56 -47
  71. package/css/components/Sidebar/sidebar.css +11 -5
  72. package/css/components/SimpleList/simple-list.css +10 -4
  73. package/css/components/Skeleton/skeleton.css +2 -5
  74. package/css/components/SkipToContent/skip-to-content.css +3 -3
  75. package/css/components/Slider/slider.css +17 -20
  76. package/css/components/Switch/switch.css +5 -5
  77. package/css/components/TabContent/tab-content.css +4 -1
  78. package/css/components/Table/table-grid.css +256 -219
  79. package/css/components/Table/table-scrollable.css +2 -2
  80. package/css/components/Table/table-tree-view.css +107 -104
  81. package/css/components/Table/table.css +87 -69
  82. package/css/components/Tabs/tabs.css +66 -48
  83. package/css/components/TextInputGroup/text-input-group.css +15 -15
  84. package/css/components/Tile/tile.css +10 -10
  85. package/css/components/ToggleGroup/toggle-group.css +14 -11
  86. package/css/components/Toolbar/toolbar.css +44 -41
  87. package/css/components/Tooltip/tooltip.css +19 -16
  88. package/css/components/TreeView/tree-view.css +42 -27
  89. package/css/components/Wizard/wizard.css +47 -35
  90. package/css/docs/components/Button/examples/Button.css +2 -2
  91. package/css/docs/components/DragDrop/examples/DragDrop.css +2 -2
  92. package/css/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
  93. package/css/docs/components/LogViewer/examples/LogViewer.css +2 -2
  94. package/css/docs/components/ModalBox/examples/ModalBox.css +2 -2
  95. package/css/docs/components/Nav/examples/Navigation.css +2 -2
  96. package/css/docs/components/Popover/examples/Popover.css +2 -2
  97. package/css/docs/components/Select/deprecated/Select.css +3 -3
  98. package/css/docs/components/Table/examples/Table.css +2 -2
  99. package/css/docs/components/TextInputGroup/examples/TextInputGroup.css +1 -1
  100. package/css/docs/components/Tile/examples/Tile.css +1 -1
  101. package/css/docs/demos/Card/examples/Card.css +3 -3
  102. package/css/docs/utilities/BoxShadow/examples/box-shadow.css +5 -5
  103. package/css/layouts/Flex/flex.css +115 -43
  104. package/css/utilities/Accessibility/accessibility.css +12 -12
  105. package/css/utilities/Spacing/spacing.css +720 -960
  106. package/package.json +4 -8
package/css/layouts/Flex/flex.css CHANGED
@@ -34,7 +34,7 @@
34
34
  --pf-v5-l-flex--spacer--row: var(--pf-v5-l-flex--spacer, var(--pf-v5-l-flex--spacer--row--base));
35
35
  order: var(--pf-v5-l-flex--item--Order);
36
36
  max-width: 100%;
37
- margin-right: var(--pf-v5-l-flex--spacer--column);
37
+ margin-inline-end: var(--pf-v5-l-flex--spacer--column);
38
38
  }
39
39
  @media screen and (min-width: 576px) {
40
40
  .pf-v5-l-flex > * {
@@ -78,28 +78,40 @@
78
78
  align-items: normal;
79
79
  }
80
80
  .pf-v5-l-flex.pf-m-column > * {
81
- margin: 0 0 var(--pf-v5-l-flex--spacer--row) 0;
81
+ margin-block-start: 0;
82
+ margin-block-end: var(--pf-v5-l-flex--spacer--row);
83
+ margin-inline-start: 0;
84
+ margin-inline-end: 0;
82
85
  }
83
86
  .pf-v5-l-flex.pf-m-column-reverse {
84
87
  flex-direction: column-reverse;
85
88
  align-items: normal;
86
89
  }
87
90
  .pf-v5-l-flex.pf-m-column-reverse > * {
88
- margin: var(--pf-v5-l-flex--spacer--row) 0 0 0;
91
+ margin-block-start: var(--pf-v5-l-flex--spacer--row);
92
+ margin-block-end: 0;
93
+ margin-inline-start: 0;
94
+ margin-inline-end: 0;
89
95
  }
90
96
  .pf-v5-l-flex.pf-m-row {
91
97
  flex-direction: row;
92
98
  align-items: var(--pf-v5-l-flex--m-row--AlignItems);
93
99
  }
94
100
  .pf-v5-l-flex.pf-m-row > * {
95
- margin: 0 var(--pf-v5-l-flex--spacer--column) 0 0;
101
+ margin-block-start: 0;
102
+ margin-block-end: 0;
103
+ margin-inline-start: 0;
104
+ margin-inline-end: var(--pf-v5-l-flex--spacer--column);
96
105
  }
97
106
  .pf-v5-l-flex.pf-m-row-reverse {
98
107
  flex-direction: row-reverse;
99
108
  align-items: var(--pf-v5-l-flex--m-row-reverse--AlignItems);
100
109
  }
101
110
  .pf-v5-l-flex.pf-m-row-reverse > * {
102
- margin: 0 0 0 var(--pf-v5-l-flex--spacer--column);
111
+ margin-block-start: 0;
112
+ margin-block-end: 0;
113
+ margin-inline-start: var(--pf-v5-l-flex--spacer--column);
114
+ margin-inline-end: 0;
103
115
  }
104
116
  .pf-v5-l-flex.pf-m-wrap {
105
117
  flex-wrap: wrap;
@@ -162,10 +174,10 @@
162
174
  align-content: space-around;
163
175
  }
164
176
  .pf-v5-l-flex > .pf-m-align-right {
165
- margin-left: auto;
177
+ margin-inline-start: auto;
166
178
  }
167
179
  .pf-v5-l-flex > .pf-m-align-left {
168
- margin-left: 0;
180
+ margin-inline-start: 0;
169
181
  }
170
182
  .pf-v5-l-flex > .pf-m-grow {
171
183
  flex-grow: 1;
@@ -175,7 +187,7 @@
175
187
  }
176
188
  .pf-v5-l-flex > .pf-m-full-width {
177
189
  width: 100%;
178
- margin-right: 0;
190
+ margin-inline-end: 0;
179
191
  }
180
192
  .pf-v5-l-flex > .pf-m-flex-1 {
181
193
  flex: 1 0 0;
@@ -224,28 +236,40 @@
224
236
  align-items: normal;
225
237
  }
226
238
  .pf-v5-l-flex.pf-m-column-on-sm > * {
227
- margin: 0 0 var(--pf-v5-l-flex--spacer--row) 0;
239
+ margin-block-start: 0;
240
+ margin-block-end: var(--pf-v5-l-flex--spacer--row);
241
+ margin-inline-start: 0;
242
+ margin-inline-end: 0;
228
243
  }
229
244
  .pf-v5-l-flex.pf-m-column-reverse-on-sm {
230
245
  flex-direction: column-reverse;
231
246
  align-items: normal;
232
247
  }
233
248
  .pf-v5-l-flex.pf-m-column-reverse-on-sm > * {
234
- margin: var(--pf-v5-l-flex--spacer--row) 0 0 0;
249
+ margin-block-start: var(--pf-v5-l-flex--spacer--row);
250
+ margin-block-end: 0;
251
+ margin-inline-start: 0;
252
+ margin-inline-end: 0;
235
253
  }
236
254
  .pf-v5-l-flex.pf-m-row-on-sm {
237
255
  flex-direction: row;
238
256
  align-items: var(--pf-v5-l-flex--m-row--AlignItems);
239
257
  }
240
258
  .pf-v5-l-flex.pf-m-row-on-sm > * {
241
- margin: 0 var(--pf-v5-l-flex--spacer--column) 0 0;
259
+ margin-block-start: 0;
260
+ margin-block-end: 0;
261
+ margin-inline-start: 0;
262
+ margin-inline-end: var(--pf-v5-l-flex--spacer--column);
242
263
  }
243
264
  .pf-v5-l-flex.pf-m-row-reverse-on-sm {
244
265
  flex-direction: row-reverse;
245
266
  align-items: var(--pf-v5-l-flex--m-row-reverse--AlignItems);
246
267
  }
247
268
  .pf-v5-l-flex.pf-m-row-reverse-on-sm > * {
248
- margin: 0 0 0 var(--pf-v5-l-flex--spacer--column);
269
+ margin-block-start: 0;
270
+ margin-block-end: 0;
271
+ margin-inline-start: var(--pf-v5-l-flex--spacer--column);
272
+ margin-inline-end: 0;
249
273
  }
250
274
  .pf-v5-l-flex.pf-m-wrap-on-sm {
251
275
  flex-wrap: wrap;
@@ -308,10 +332,10 @@
308
332
  align-content: space-around;
309
333
  }
310
334
  .pf-v5-l-flex > .pf-m-align-right-on-sm {
311
- margin-left: auto;
335
+ margin-inline-start: auto;
312
336
  }
313
337
  .pf-v5-l-flex > .pf-m-align-left-on-sm {
314
- margin-left: 0;
338
+ margin-inline-start: 0;
315
339
  }
316
340
  .pf-v5-l-flex > .pf-m-grow-on-sm {
317
341
  flex-grow: 1;
@@ -321,7 +345,7 @@
321
345
  }
322
346
  .pf-v5-l-flex > .pf-m-full-width-on-sm {
323
347
  width: 100%;
324
- margin-right: 0;
348
+ margin-inline-end: 0;
325
349
  }
326
350
  .pf-v5-l-flex > .pf-m-flex-1-on-sm {
327
351
  flex: 1 0 0;
@@ -371,28 +395,40 @@
371
395
  align-items: normal;
372
396
  }
373
397
  .pf-v5-l-flex.pf-m-column-on-md > * {
374
- margin: 0 0 var(--pf-v5-l-flex--spacer--row) 0;
398
+ margin-block-start: 0;
399
+ margin-block-end: var(--pf-v5-l-flex--spacer--row);
400
+ margin-inline-start: 0;
401
+ margin-inline-end: 0;
375
402
  }
376
403
  .pf-v5-l-flex.pf-m-column-reverse-on-md {
377
404
  flex-direction: column-reverse;
378
405
  align-items: normal;
379
406
  }
380
407
  .pf-v5-l-flex.pf-m-column-reverse-on-md > * {
381
- margin: var(--pf-v5-l-flex--spacer--row) 0 0 0;
408
+ margin-block-start: var(--pf-v5-l-flex--spacer--row);
409
+ margin-block-end: 0;
410
+ margin-inline-start: 0;
411
+ margin-inline-end: 0;
382
412
  }
383
413
  .pf-v5-l-flex.pf-m-row-on-md {
384
414
  flex-direction: row;
385
415
  align-items: var(--pf-v5-l-flex--m-row--AlignItems);
386
416
  }
387
417
  .pf-v5-l-flex.pf-m-row-on-md > * {
388
- margin: 0 var(--pf-v5-l-flex--spacer--column) 0 0;
418
+ margin-block-start: 0;
419
+ margin-block-end: 0;
420
+ margin-inline-start: 0;
421
+ margin-inline-end: var(--pf-v5-l-flex--spacer--column);
389
422
  }
390
423
  .pf-v5-l-flex.pf-m-row-reverse-on-md {
391
424
  flex-direction: row-reverse;
392
425
  align-items: var(--pf-v5-l-flex--m-row-reverse--AlignItems);
393
426
  }
394
427
  .pf-v5-l-flex.pf-m-row-reverse-on-md > * {
395
- margin: 0 0 0 var(--pf-v5-l-flex--spacer--column);
428
+ margin-block-start: 0;
429
+ margin-block-end: 0;
430
+ margin-inline-start: var(--pf-v5-l-flex--spacer--column);
431
+ margin-inline-end: 0;
396
432
  }
397
433
  .pf-v5-l-flex.pf-m-wrap-on-md {
398
434
  flex-wrap: wrap;
@@ -455,10 +491,10 @@
455
491
  align-content: space-around;
456
492
  }
457
493
  .pf-v5-l-flex > .pf-m-align-right-on-md {
458
- margin-left: auto;
494
+ margin-inline-start: auto;
459
495
  }
460
496
  .pf-v5-l-flex > .pf-m-align-left-on-md {
461
- margin-left: 0;
497
+ margin-inline-start: 0;
462
498
  }
463
499
  .pf-v5-l-flex > .pf-m-grow-on-md {
464
500
  flex-grow: 1;
@@ -468,7 +504,7 @@
468
504
  }
469
505
  .pf-v5-l-flex > .pf-m-full-width-on-md {
470
506
  width: 100%;
471
- margin-right: 0;
507
+ margin-inline-end: 0;
472
508
  }
473
509
  .pf-v5-l-flex > .pf-m-flex-1-on-md {
474
510
  flex: 1 0 0;
@@ -518,28 +554,40 @@
518
554
  align-items: normal;
519
555
  }
520
556
  .pf-v5-l-flex.pf-m-column-on-lg > * {
521
- margin: 0 0 var(--pf-v5-l-flex--spacer--row) 0;
557
+ margin-block-start: 0;
558
+ margin-block-end: var(--pf-v5-l-flex--spacer--row);
559
+ margin-inline-start: 0;
560
+ margin-inline-end: 0;
522
561
  }
523
562
  .pf-v5-l-flex.pf-m-column-reverse-on-lg {
524
563
  flex-direction: column-reverse;
525
564
  align-items: normal;
526
565
  }
527
566
  .pf-v5-l-flex.pf-m-column-reverse-on-lg > * {
528
- margin: var(--pf-v5-l-flex--spacer--row) 0 0 0;
567
+ margin-block-start: var(--pf-v5-l-flex--spacer--row);
568
+ margin-block-end: 0;
569
+ margin-inline-start: 0;
570
+ margin-inline-end: 0;
529
571
  }
530
572
  .pf-v5-l-flex.pf-m-row-on-lg {
531
573
  flex-direction: row;
532
574
  align-items: var(--pf-v5-l-flex--m-row--AlignItems);
533
575
  }
534
576
  .pf-v5-l-flex.pf-m-row-on-lg > * {
535
- margin: 0 var(--pf-v5-l-flex--spacer--column) 0 0;
577
+ margin-block-start: 0;
578
+ margin-block-end: 0;
579
+ margin-inline-start: 0;
580
+ margin-inline-end: var(--pf-v5-l-flex--spacer--column);
536
581
  }
537
582
  .pf-v5-l-flex.pf-m-row-reverse-on-lg {
538
583
  flex-direction: row-reverse;
539
584
  align-items: var(--pf-v5-l-flex--m-row-reverse--AlignItems);
540
585
  }
541
586
  .pf-v5-l-flex.pf-m-row-reverse-on-lg > * {
542
- margin: 0 0 0 var(--pf-v5-l-flex--spacer--column);
587
+ margin-block-start: 0;
588
+ margin-block-end: 0;
589
+ margin-inline-start: var(--pf-v5-l-flex--spacer--column);
590
+ margin-inline-end: 0;
543
591
  }
544
592
  .pf-v5-l-flex.pf-m-wrap-on-lg {
545
593
  flex-wrap: wrap;
@@ -602,10 +650,10 @@
602
650
  align-content: space-around;
603
651
  }
604
652
  .pf-v5-l-flex > .pf-m-align-right-on-lg {
605
- margin-left: auto;
653
+ margin-inline-start: auto;
606
654
  }
607
655
  .pf-v5-l-flex > .pf-m-align-left-on-lg {
608
- margin-left: 0;
656
+ margin-inline-start: 0;
609
657
  }
610
658
  .pf-v5-l-flex > .pf-m-grow-on-lg {
611
659
  flex-grow: 1;
@@ -615,7 +663,7 @@
615
663
  }
616
664
  .pf-v5-l-flex > .pf-m-full-width-on-lg {
617
665
  width: 100%;
618
- margin-right: 0;
666
+ margin-inline-end: 0;
619
667
  }
620
668
  .pf-v5-l-flex > .pf-m-flex-1-on-lg {
621
669
  flex: 1 0 0;
@@ -665,28 +713,40 @@
665
713
  align-items: normal;
666
714
  }
667
715
  .pf-v5-l-flex.pf-m-column-on-xl > * {
668
- margin: 0 0 var(--pf-v5-l-flex--spacer--row) 0;
716
+ margin-block-start: 0;
717
+ margin-block-end: var(--pf-v5-l-flex--spacer--row);
718
+ margin-inline-start: 0;
719
+ margin-inline-end: 0;
669
720
  }
670
721
  .pf-v5-l-flex.pf-m-column-reverse-on-xl {
671
722
  flex-direction: column-reverse;
672
723
  align-items: normal;
673
724
  }
674
725
  .pf-v5-l-flex.pf-m-column-reverse-on-xl > * {
675
- margin: var(--pf-v5-l-flex--spacer--row) 0 0 0;
726
+ margin-block-start: var(--pf-v5-l-flex--spacer--row);
727
+ margin-block-end: 0;
728
+ margin-inline-start: 0;
729
+ margin-inline-end: 0;
676
730
  }
677
731
  .pf-v5-l-flex.pf-m-row-on-xl {
678
732
  flex-direction: row;
679
733
  align-items: var(--pf-v5-l-flex--m-row--AlignItems);
680
734
  }
681
735
  .pf-v5-l-flex.pf-m-row-on-xl > * {
682
- margin: 0 var(--pf-v5-l-flex--spacer--column) 0 0;
736
+ margin-block-start: 0;
737
+ margin-block-end: 0;
738
+ margin-inline-start: 0;
739
+ margin-inline-end: var(--pf-v5-l-flex--spacer--column);
683
740
  }
684
741
  .pf-v5-l-flex.pf-m-row-reverse-on-xl {
685
742
  flex-direction: row-reverse;
686
743
  align-items: var(--pf-v5-l-flex--m-row-reverse--AlignItems);
687
744
  }
688
745
  .pf-v5-l-flex.pf-m-row-reverse-on-xl > * {
689
- margin: 0 0 0 var(--pf-v5-l-flex--spacer--column);
746
+ margin-block-start: 0;
747
+ margin-block-end: 0;
748
+ margin-inline-start: var(--pf-v5-l-flex--spacer--column);
749
+ margin-inline-end: 0;
690
750
  }
691
751
  .pf-v5-l-flex.pf-m-wrap-on-xl {
692
752
  flex-wrap: wrap;
@@ -749,10 +809,10 @@
749
809
  align-content: space-around;
750
810
  }
751
811
  .pf-v5-l-flex > .pf-m-align-right-on-xl {
752
- margin-left: auto;
812
+ margin-inline-start: auto;
753
813
  }
754
814
  .pf-v5-l-flex > .pf-m-align-left-on-xl {
755
- margin-left: 0;
815
+ margin-inline-start: 0;
756
816
  }
757
817
  .pf-v5-l-flex > .pf-m-grow-on-xl {
758
818
  flex-grow: 1;
@@ -762,7 +822,7 @@
762
822
  }
763
823
  .pf-v5-l-flex > .pf-m-full-width-on-xl {
764
824
  width: 100%;
765
- margin-right: 0;
825
+ margin-inline-end: 0;
766
826
  }
767
827
  .pf-v5-l-flex > .pf-m-flex-1-on-xl {
768
828
  flex: 1 0 0;
@@ -812,28 +872,40 @@
812
872
  align-items: normal;
813
873
  }
814
874
  .pf-v5-l-flex.pf-m-column-on-2xl > * {
815
- margin: 0 0 var(--pf-v5-l-flex--spacer--row) 0;
875
+ margin-block-start: 0;
876
+ margin-block-end: var(--pf-v5-l-flex--spacer--row);
877
+ margin-inline-start: 0;
878
+ margin-inline-end: 0;
816
879
  }
817
880
  .pf-v5-l-flex.pf-m-column-reverse-on-2xl {
818
881
  flex-direction: column-reverse;
819
882
  align-items: normal;
820
883
  }
821
884
  .pf-v5-l-flex.pf-m-column-reverse-on-2xl > * {
822
- margin: var(--pf-v5-l-flex--spacer--row) 0 0 0;
885
+ margin-block-start: var(--pf-v5-l-flex--spacer--row);
886
+ margin-block-end: 0;
887
+ margin-inline-start: 0;
888
+ margin-inline-end: 0;
823
889
  }
824
890
  .pf-v5-l-flex.pf-m-row-on-2xl {
825
891
  flex-direction: row;
826
892
  align-items: var(--pf-v5-l-flex--m-row--AlignItems);
827
893
  }
828
894
  .pf-v5-l-flex.pf-m-row-on-2xl > * {
829
- margin: 0 var(--pf-v5-l-flex--spacer--column) 0 0;
895
+ margin-block-start: 0;
896
+ margin-block-end: 0;
897
+ margin-inline-start: 0;
898
+ margin-inline-end: var(--pf-v5-l-flex--spacer--column);
830
899
  }
831
900
  .pf-v5-l-flex.pf-m-row-reverse-on-2xl {
832
901
  flex-direction: row-reverse;
833
902
  align-items: var(--pf-v5-l-flex--m-row-reverse--AlignItems);
834
903
  }
835
904
  .pf-v5-l-flex.pf-m-row-reverse-on-2xl > * {
836
- margin: 0 0 0 var(--pf-v5-l-flex--spacer--column);
905
+ margin-block-start: 0;
906
+ margin-block-end: 0;
907
+ margin-inline-start: var(--pf-v5-l-flex--spacer--column);
908
+ margin-inline-end: 0;
837
909
  }
838
910
  .pf-v5-l-flex.pf-m-wrap-on-2xl {
839
911
  flex-wrap: wrap;
@@ -896,10 +968,10 @@
896
968
  align-content: space-around;
897
969
  }
898
970
  .pf-v5-l-flex > .pf-m-align-right-on-2xl {
899
- margin-left: auto;
971
+ margin-inline-start: auto;
900
972
  }
901
973
  .pf-v5-l-flex > .pf-m-align-left-on-2xl {
902
- margin-left: 0;
974
+ margin-inline-start: 0;
903
975
  }
904
976
  .pf-v5-l-flex > .pf-m-grow-on-2xl {
905
977
  flex-grow: 1;
@@ -909,7 +981,7 @@
909
981
  }
910
982
  .pf-v5-l-flex > .pf-m-full-width-on-2xl {
911
983
  width: 100%;
912
- margin-right: 0;
984
+ margin-inline-end: 0;
913
985
  }
914
986
  .pf-v5-l-flex > .pf-m-flex-1-on-2xl {
915
987
  flex: 1 0 0;
package/css/utilities/Accessibility/accessibility.css CHANGED
@@ -1,7 +1,7 @@
1
1
  .pf-v5-u-screen-reader {
2
2
  position: fixed;
3
- top: 0;
4
- left: 0;
3
+ inset-block-start: 0;
4
+ inset-inline-start: 0;
5
5
  overflow: hidden;
6
6
  clip: rect(0, 0, 0, 0);
7
7
  white-space: nowrap;
@@ -23,8 +23,8 @@
23
23
  @media screen and (min-width: 576px) {
24
24
  .pf-v5-u-screen-reader-on-sm {
25
25
  position: fixed;
26
- top: 0;
27
- left: 0;
26
+ inset-block-start: 0;
27
+ inset-inline-start: 0;
28
28
  overflow: hidden;
29
29
  clip: rect(0, 0, 0, 0);
30
30
  white-space: nowrap;
@@ -51,8 +51,8 @@
51
51
  @media screen and (min-width: 768px) {
52
52
  .pf-v5-u-screen-reader-on-md {
53
53
  position: fixed;
54
- top: 0;
55
- left: 0;
54
+ inset-block-start: 0;
55
+ inset-inline-start: 0;
56
56
  overflow: hidden;
57
57
  clip: rect(0, 0, 0, 0);
58
58
  white-space: nowrap;
@@ -79,8 +79,8 @@
79
79
  @media screen and (min-width: 992px) {
80
80
  .pf-v5-u-screen-reader-on-lg {
81
81
  position: fixed;
82
- top: 0;
83
- left: 0;
82
+ inset-block-start: 0;
83
+ inset-inline-start: 0;
84
84
  overflow: hidden;
85
85
  clip: rect(0, 0, 0, 0);
86
86
  white-space: nowrap;
@@ -107,8 +107,8 @@
107
107
  @media screen and (min-width: 1200px) {
108
108
  .pf-v5-u-screen-reader-on-xl {
109
109
  position: fixed;
110
- top: 0;
111
- left: 0;
110
+ inset-block-start: 0;
111
+ inset-inline-start: 0;
112
112
  overflow: hidden;
113
113
  clip: rect(0, 0, 0, 0);
114
114
  white-space: nowrap;
@@ -135,8 +135,8 @@
135
135
  @media screen and (min-width: 1450px) {
136
136
  .pf-v5-u-screen-reader-on-2xl {
137
137
  position: fixed;
138
- top: 0;
139
- left: 0;
138
+ inset-block-start: 0;
139
+ inset-inline-start: 0;
140
140
  overflow: hidden;
141
141
  clip: rect(0, 0, 0, 0);
142
142
  white-space: nowrap;