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

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.
Files changed (106) hide show
  1. package/CHANGELOG.md +10 -0
  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 +3 -3
package/css/components/Drawer/drawer.css CHANGED
@@ -129,11 +129,11 @@
129
129
  }
130
130
  }
131
131
  .pf-v5-c-drawer.pf-m-inline > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v5-c-drawer.pf-m-static > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
132
- padding-left: var(--pf-v5-c-drawer--m-inline__panel--PaddingLeft);
132
+ padding-inline-start: var(--pf-v5-c-drawer--m-inline__panel--PaddingLeft);
133
133
  }
134
134
  .pf-v5-c-drawer.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
135
135
  order: 0;
136
- margin-right: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
136
+ margin-inline-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
137
137
  transform: translateX(-100%);
138
138
  }
139
139
  .pf-v5-c-drawer.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__content {
@@ -198,7 +198,10 @@
198
198
  --pf-v5-c-drawer__content--BackgroundColor: var(--pf-v5-c-drawer__content--m-light-200--BackgroundColor);
199
199
  }
200
200
  .pf-v5-c-drawer__content > .pf-v5-c-drawer__body {
201
- padding: var(--pf-v5-c-drawer__content--child--PaddingTop) var(--pf-v5-c-drawer__content--child--PaddingRight) var(--pf-v5-c-drawer__content--child--PaddingBottom) var(--pf-v5-c-drawer__content--child--PaddingLeft);
201
+ padding-block-start: var(--pf-v5-c-drawer__content--child--PaddingTop);
202
+ padding-block-end: var(--pf-v5-c-drawer__content--child--PaddingBottom);
203
+ padding-inline-start: var(--pf-v5-c-drawer__content--child--PaddingLeft);
204
+ padding-inline-end: var(--pf-v5-c-drawer__content--child--PaddingRight);
202
205
  }
203
206
 
204
207
  .pf-v5-c-drawer__panel {
@@ -216,8 +219,8 @@
216
219
  }
217
220
  .pf-v5-c-drawer__panel::after {
218
221
  position: absolute;
219
- top: 0;
220
- left: 0;
222
+ inset-block-start: 0;
223
+ inset-inline-start: 0;
221
224
  width: var(--pf-v5-c-drawer__panel--after--Width);
222
225
  height: 100%;
223
226
  content: "";
@@ -276,26 +279,32 @@
276
279
  grid-row: 1;
277
280
  grid-column: 2;
278
281
  align-self: baseline;
279
- margin-top: var(--pf-v5-c-drawer__actions--MarginTop);
280
- margin-right: var(--pf-v5-c-drawer__actions--MarginRight);
282
+ margin-block-start: var(--pf-v5-c-drawer__actions--MarginTop);
283
+ margin-inline-end: var(--pf-v5-c-drawer__actions--MarginRight);
281
284
  }
282
285
 
283
286
  .pf-v5-c-drawer__body {
284
- padding: var(--pf-v5-c-drawer--child--PaddingTop) var(--pf-v5-c-drawer--child--PaddingRight) var(--pf-v5-c-drawer--child--PaddingBottom) var(--pf-v5-c-drawer--child--PaddingLeft);
287
+ padding-block-start: var(--pf-v5-c-drawer--child--PaddingTop);
288
+ padding-block-end: var(--pf-v5-c-drawer--child--PaddingBottom);
289
+ padding-inline-start: var(--pf-v5-c-drawer--child--PaddingLeft);
290
+ padding-inline-end: var(--pf-v5-c-drawer--child--PaddingRight);
285
291
  }
286
292
  .pf-v5-c-drawer__body.pf-m-no-padding {
287
293
  padding: 0;
288
294
  }
289
295
  .pf-v5-c-drawer__body.pf-m-no-padding > .pf-v5-c-drawer__actions,
290
296
  .pf-v5-c-drawer__body.pf-m-no-padding > .pf-v5-c-drawer__head > .pf-v5-c-drawer__actions {
291
- margin-top: 0;
292
- margin-right: 0;
297
+ margin-block-start: 0;
298
+ margin-inline-end: 0;
293
299
  }
294
300
  .pf-v5-c-drawer__body.pf-m-padding {
295
- padding: var(--pf-v5-c-drawer--child--m-padding--PaddingTop) var(--pf-v5-c-drawer--child--m-padding--PaddingRight) var(--pf-v5-c-drawer--child--m-padding--PaddingBottom) var(--pf-v5-c-drawer--child--m-padding--PaddingLeft);
301
+ padding-block-start: var(--pf-v5-c-drawer--child--m-padding--PaddingTop);
302
+ padding-block-end: var(--pf-v5-c-drawer--child--m-padding--PaddingBottom);
303
+ padding-inline-start: var(--pf-v5-c-drawer--child--m-padding--PaddingLeft);
304
+ padding-inline-end: var(--pf-v5-c-drawer--child--m-padding--PaddingRight);
296
305
  }
297
306
  .pf-v5-c-drawer__body:not(.pf-m-no-padding) + * {
298
- padding-top: 0;
307
+ padding-block-start: 0;
299
308
  }
300
309
  .pf-v5-c-drawer__body:last-child {
301
310
  flex: 1 1;
@@ -332,19 +341,22 @@
332
341
  }
333
342
  .pf-v5-c-drawer__splitter::after {
334
343
  position: absolute;
335
- top: 0;
336
- right: 0;
337
- bottom: 0;
338
- left: 0;
344
+ inset-block-start: 0;
345
+ inset-block-end: 0;
346
+ inset-inline-start: 0;
347
+ inset-inline-end: 0;
339
348
  content: "";
340
349
  border: solid var(--pf-v5-c-drawer__splitter--after--BorderColor);
341
- border-width: var(--pf-v5-c-drawer__splitter--after--BorderTopWidth) var(--pf-v5-c-drawer__splitter--after--BorderRightWidth) var(--pf-v5-c-drawer__splitter--after--BorderBottomWidth) var(--pf-v5-c-drawer__splitter--after--BorderLeftWidth);
350
+ border-block-start-width: var(--pf-v5-c-drawer__splitter--after--BorderTopWidth);
351
+ border-block-end-width: var(--pf-v5-c-drawer__splitter--after--BorderBottomWidth);
352
+ border-inline-start-width: var(--pf-v5-c-drawer__splitter--after--BorderLeftWidth);
353
+ border-inline-end-width: var(--pf-v5-c-drawer__splitter--after--BorderRightWidth);
342
354
  }
343
355
 
344
356
  .pf-v5-c-drawer__splitter-handle {
345
357
  position: absolute;
346
- top: var(--pf-v5-c-drawer__splitter-handle--Top);
347
- left: var(--pf-v5-c-drawer__splitter-handle--Left);
358
+ inset-block-start: var(--pf-v5-c-drawer__splitter-handle--Top);
359
+ inset-inline-start: var(--pf-v5-c-drawer__splitter-handle--Left);
348
360
  transform: translate(-50%, -50%);
349
361
  }
350
362
  .pf-v5-c-drawer__splitter-handle::after {
@@ -354,7 +366,10 @@
354
366
  content: "";
355
367
  border-color: var(--pf-v5-c-drawer__splitter-handle--after--BorderColor);
356
368
  border-style: solid;
357
- border-width: var(--pf-v5-c-drawer__splitter-handle--after--BorderTopWidth) var(--pf-v5-c-drawer__splitter-handle--after--BorderRightWidth) var(--pf-v5-c-drawer__splitter-handle--after--BorderBottomWidth) var(--pf-v5-c-drawer__splitter-handle--after--BorderLeftWidth);
369
+ border-block-start-width: var(--pf-v5-c-drawer__splitter-handle--after--BorderTopWidth);
370
+ border-block-end-width: var(--pf-v5-c-drawer__splitter-handle--after--BorderBottomWidth);
371
+ border-inline-start-width: var(--pf-v5-c-drawer__splitter-handle--after--BorderLeftWidth);
372
+ border-inline-end-width: var(--pf-v5-c-drawer__splitter-handle--after--BorderRightWidth);
358
373
  }
359
374
 
360
375
  @media screen and (min-width: 768px) {
@@ -383,15 +398,15 @@
383
398
  --pf-v5-c-drawer--m-expanded__panel--BoxShadow: var(--pf-v5-c-drawer--m-expanded--m-panel-left__panel--BoxShadow);
384
399
  }
385
400
  .pf-v5-c-drawer.pf-m-panel-left.pf-m-inline > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v5-c-drawer.pf-m-panel-left.pf-m-static > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
386
- padding-right: var(--pf-v5-c-drawer--m-panel-left--m-inline__panel--PaddingRight);
387
- padding-left: 0;
401
+ padding-inline-start: 0;
402
+ padding-inline-end: var(--pf-v5-c-drawer--m-panel-left--m-inline__panel--PaddingRight);
388
403
  }
389
404
  .pf-v5-c-drawer.pf-m-panel-left.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
390
405
  transform: translateX(0);
391
406
  }
392
407
  .pf-v5-c-drawer.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel::after {
393
- right: 0;
394
- left: auto;
408
+ inset-inline-start: auto;
409
+ inset-inline-end: 0;
395
410
  }
396
411
  .pf-v5-c-drawer.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel.pf-m-resizable > .pf-v5-c-drawer__splitter {
397
412
  --pf-v5-c-drawer__splitter-handle--Left: var(--pf-v5-c-drawer--m-panel-left__splitter-handle--Left);
@@ -407,12 +422,12 @@
407
422
  min-height: var(--pf-v5-c-drawer--m-panel-bottom__panel--md--MinHeight);
408
423
  }
409
424
  .pf-v5-c-drawer.pf-m-panel-bottom.pf-m-inline > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v5-c-drawer.pf-m-panel-bottom.pf-m-static > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
410
- padding-top: var(--pf-v5-c-drawer--m-panel-bottom--m-inline__panel--PaddingTop);
411
- padding-left: 0;
425
+ padding-block-start: var(--pf-v5-c-drawer--m-panel-bottom--m-inline__panel--PaddingTop);
426
+ padding-inline-start: 0;
412
427
  }
413
428
  .pf-v5-c-drawer.pf-m-panel-bottom > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel::after {
414
- top: 0;
415
- left: auto;
429
+ inset-block-start: 0;
430
+ inset-inline-start: auto;
416
431
  width: 100%;
417
432
  height: var(--pf-v5-c-drawer--m-panel-bottom__panel--after--Height);
418
433
  }
@@ -546,41 +561,41 @@
546
561
  overflow-x: auto;
547
562
  }
548
563
  .pf-v5-c-drawer.pf-m-inline > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
549
- margin-left: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
564
+ margin-inline-start: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
550
565
  transform: translateX(100%);
551
566
  }
552
567
  .pf-v5-c-drawer.pf-m-inline.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
553
- margin-left: 0;
568
+ margin-inline-start: 0;
554
569
  transform: translateX(0);
555
570
  }
556
571
  .pf-v5-c-drawer.pf-m-inline > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel > .pf-v5-c-drawer__body > .pf-v5-c-drawer__head .pf-v5-c-drawer__close {
557
572
  display: unset;
558
573
  }
559
574
  .pf-v5-c-drawer.pf-m-inline.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
560
- margin-right: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
561
- margin-left: 0;
575
+ margin-inline-start: 0;
576
+ margin-inline-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
562
577
  transform: translateX(-100%);
563
578
  }
564
579
  .pf-v5-c-drawer.pf-m-inline.pf-m-panel-left.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
565
- margin-right: 0;
580
+ margin-inline-end: 0;
566
581
  transform: translateX(0);
567
582
  }
568
583
  .pf-v5-c-drawer.pf-m-inline.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel > .pf-v5-c-drawer__body > .pf-v5-c-drawer__head .pf-v5-c-drawer__close {
569
584
  display: unset;
570
585
  }
571
586
  .pf-v5-c-drawer.pf-m-inline.pf-m-panel-bottom > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
572
- margin-bottom: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
587
+ margin-block-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
573
588
  transform: translateY(100%);
574
589
  }
575
590
  .pf-v5-c-drawer.pf-m-inline.pf-m-panel-bottom.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
576
- margin-bottom: 0;
591
+ margin-block-end: 0;
577
592
  transform: translateY(0);
578
593
  }
579
594
  .pf-v5-c-drawer.pf-m-static > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
580
595
  transform: translateX(0);
581
596
  }
582
597
  .pf-v5-c-drawer.pf-m-static.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
583
- margin-right: 0;
598
+ margin-inline-end: 0;
584
599
  transform: translateX(0);
585
600
  }
586
601
  .pf-v5-c-drawer.pf-m-static.pf-m-panel-bottom > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
@@ -607,41 +622,41 @@
607
622
  overflow-x: auto;
608
623
  }
609
624
  .pf-v5-c-drawer.pf-m-inline-on-lg > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
610
- margin-left: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
625
+ margin-inline-start: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
611
626
  transform: translateX(100%);
612
627
  }
613
628
  .pf-v5-c-drawer.pf-m-inline-on-lg.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
614
- margin-left: 0;
629
+ margin-inline-start: 0;
615
630
  transform: translateX(0);
616
631
  }
617
632
  .pf-v5-c-drawer.pf-m-inline-on-lg > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel > .pf-v5-c-drawer__body > .pf-v5-c-drawer__head .pf-v5-c-drawer__close {
618
633
  display: unset;
619
634
  }
620
635
  .pf-v5-c-drawer.pf-m-inline-on-lg.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
621
- margin-right: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
622
- margin-left: 0;
636
+ margin-inline-start: 0;
637
+ margin-inline-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
623
638
  transform: translateX(-100%);
624
639
  }
625
640
  .pf-v5-c-drawer.pf-m-inline-on-lg.pf-m-panel-left.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
626
- margin-right: 0;
641
+ margin-inline-end: 0;
627
642
  transform: translateX(0);
628
643
  }
629
644
  .pf-v5-c-drawer.pf-m-inline-on-lg.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel > .pf-v5-c-drawer__body > .pf-v5-c-drawer__head .pf-v5-c-drawer__close {
630
645
  display: unset;
631
646
  }
632
647
  .pf-v5-c-drawer.pf-m-inline-on-lg.pf-m-panel-bottom > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
633
- margin-bottom: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
648
+ margin-block-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
634
649
  transform: translateY(100%);
635
650
  }
636
651
  .pf-v5-c-drawer.pf-m-inline-on-lg.pf-m-panel-bottom.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
637
- margin-bottom: 0;
652
+ margin-block-end: 0;
638
653
  transform: translateY(0);
639
654
  }
640
655
  .pf-v5-c-drawer.pf-m-static-on-lg > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
641
656
  transform: translateX(0);
642
657
  }
643
658
  .pf-v5-c-drawer.pf-m-static-on-lg.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
644
- margin-right: 0;
659
+ margin-inline-end: 0;
645
660
  transform: translateX(0);
646
661
  }
647
662
  .pf-v5-c-drawer.pf-m-static-on-lg.pf-m-panel-bottom > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
@@ -668,41 +683,41 @@
668
683
  overflow-x: auto;
669
684
  }
670
685
  .pf-v5-c-drawer.pf-m-inline-on-xl > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
671
- margin-left: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
686
+ margin-inline-start: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
672
687
  transform: translateX(100%);
673
688
  }
674
689
  .pf-v5-c-drawer.pf-m-inline-on-xl.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
675
- margin-left: 0;
690
+ margin-inline-start: 0;
676
691
  transform: translateX(0);
677
692
  }
678
693
  .pf-v5-c-drawer.pf-m-inline-on-xl > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel > .pf-v5-c-drawer__body > .pf-v5-c-drawer__head .pf-v5-c-drawer__close {
679
694
  display: unset;
680
695
  }
681
696
  .pf-v5-c-drawer.pf-m-inline-on-xl.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
682
- margin-right: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
683
- margin-left: 0;
697
+ margin-inline-start: 0;
698
+ margin-inline-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
684
699
  transform: translateX(-100%);
685
700
  }
686
701
  .pf-v5-c-drawer.pf-m-inline-on-xl.pf-m-panel-left.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
687
- margin-right: 0;
702
+ margin-inline-end: 0;
688
703
  transform: translateX(0);
689
704
  }
690
705
  .pf-v5-c-drawer.pf-m-inline-on-xl.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel > .pf-v5-c-drawer__body > .pf-v5-c-drawer__head .pf-v5-c-drawer__close {
691
706
  display: unset;
692
707
  }
693
708
  .pf-v5-c-drawer.pf-m-inline-on-xl.pf-m-panel-bottom > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
694
- margin-bottom: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
709
+ margin-block-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
695
710
  transform: translateY(100%);
696
711
  }
697
712
  .pf-v5-c-drawer.pf-m-inline-on-xl.pf-m-panel-bottom.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
698
- margin-bottom: 0;
713
+ margin-block-end: 0;
699
714
  transform: translateY(0);
700
715
  }
701
716
  .pf-v5-c-drawer.pf-m-static-on-xl > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
702
717
  transform: translateX(0);
703
718
  }
704
719
  .pf-v5-c-drawer.pf-m-static-on-xl.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
705
- margin-right: 0;
720
+ margin-inline-end: 0;
706
721
  transform: translateX(0);
707
722
  }
708
723
  .pf-v5-c-drawer.pf-m-static-on-xl.pf-m-panel-bottom > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
@@ -729,41 +744,41 @@
729
744
  overflow-x: auto;
730
745
  }
731
746
  .pf-v5-c-drawer.pf-m-inline-on-2xl > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
732
- margin-left: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
747
+ margin-inline-start: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
733
748
  transform: translateX(100%);
734
749
  }
735
750
  .pf-v5-c-drawer.pf-m-inline-on-2xl.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
736
- margin-left: 0;
751
+ margin-inline-start: 0;
737
752
  transform: translateX(0);
738
753
  }
739
754
  .pf-v5-c-drawer.pf-m-inline-on-2xl > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel > .pf-v5-c-drawer__body > .pf-v5-c-drawer__head .pf-v5-c-drawer__close {
740
755
  display: unset;
741
756
  }
742
757
  .pf-v5-c-drawer.pf-m-inline-on-2xl.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
743
- margin-right: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
744
- margin-left: 0;
758
+ margin-inline-start: 0;
759
+ margin-inline-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
745
760
  transform: translateX(-100%);
746
761
  }
747
762
  .pf-v5-c-drawer.pf-m-inline-on-2xl.pf-m-panel-left.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
748
- margin-right: 0;
763
+ margin-inline-end: 0;
749
764
  transform: translateX(0);
750
765
  }
751
766
  .pf-v5-c-drawer.pf-m-inline-on-2xl.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel > .pf-v5-c-drawer__body > .pf-v5-c-drawer__head .pf-v5-c-drawer__close {
752
767
  display: unset;
753
768
  }
754
769
  .pf-v5-c-drawer.pf-m-inline-on-2xl.pf-m-panel-bottom > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
755
- margin-bottom: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
770
+ margin-block-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
756
771
  transform: translateY(100%);
757
772
  }
758
773
  .pf-v5-c-drawer.pf-m-inline-on-2xl.pf-m-panel-bottom.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
759
- margin-bottom: 0;
774
+ margin-block-end: 0;
760
775
  transform: translateY(0);
761
776
  }
762
777
  .pf-v5-c-drawer.pf-m-static-on-2xl > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
763
778
  transform: translateX(0);
764
779
  }
765
780
  .pf-v5-c-drawer.pf-m-static-on-2xl.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
766
- margin-right: 0;
781
+ margin-inline-end: 0;
767
782
  transform: translateX(0);
768
783
  }
769
784
  .pf-v5-c-drawer.pf-m-static-on-2xl.pf-m-panel-bottom > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {