@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
@@ -84,19 +84,17 @@
84
84
  display: flex;
85
85
  flex-grow: 1;
86
86
  flex-wrap: wrap;
87
- padding-bottom: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
87
+ padding-block-end: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
88
88
  }
89
- }
90
- @media screen and (min-width: 768px) {
91
89
  .pf-v5-c-data-list:not([class*=pf-m-grid]) .pf-v5-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
92
- margin-right: var(--pf-v5-c-data-list__cell--MarginRight);
90
+ margin-inline-end: var(--pf-v5-c-data-list__cell--MarginRight);
93
91
  }
94
92
  .pf-v5-c-data-list:not([class*=pf-m-grid]) .pf-v5-c-data-list__cell + .pf-v5-c-data-list__cell {
95
93
  flex: 1;
96
94
  order: initial;
97
95
  }
98
96
  .pf-v5-c-data-list:not([class*=pf-m-grid]) .pf-v5-c-data-list__cell.pf-m-align-right {
99
- margin-left: auto;
97
+ margin-inline-start: auto;
100
98
  }
101
99
  .pf-v5-c-data-list:not([class*=pf-m-grid]) .pf-v5-c-data-list__cell.pf-m-no-fill {
102
100
  flex: none;
@@ -113,8 +111,6 @@
113
111
  .pf-v5-c-data-list:not([class*=pf-m-grid]) .pf-v5-c-data-list__cell.pf-m-flex-5 {
114
112
  flex-grow: 5;
115
113
  }
116
- }
117
- @media screen and (min-width: 768px) {
118
114
  .pf-v5-c-data-list:not([class*=pf-m-grid]) .pf-v5-c-data-list__expandable-content {
119
115
  max-height: initial;
120
116
  overflow-y: visible;
@@ -146,19 +142,17 @@
146
142
  display: flex;
147
143
  flex-grow: 1;
148
144
  flex-wrap: wrap;
149
- padding-bottom: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
145
+ padding-block-end: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
150
146
  }
151
- }
152
- @media screen and (min-width: 0) {
153
147
  .pf-v5-c-data-list.pf-m-grid-none .pf-v5-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
154
- margin-right: var(--pf-v5-c-data-list__cell--MarginRight);
148
+ margin-inline-end: var(--pf-v5-c-data-list__cell--MarginRight);
155
149
  }
156
150
  .pf-v5-c-data-list.pf-m-grid-none .pf-v5-c-data-list__cell + .pf-v5-c-data-list__cell {
157
151
  flex: 1;
158
152
  order: initial;
159
153
  }
160
154
  .pf-v5-c-data-list.pf-m-grid-none .pf-v5-c-data-list__cell.pf-m-align-right {
161
- margin-left: auto;
155
+ margin-inline-start: auto;
162
156
  }
163
157
  .pf-v5-c-data-list.pf-m-grid-none .pf-v5-c-data-list__cell.pf-m-no-fill {
164
158
  flex: none;
@@ -175,8 +169,6 @@
175
169
  .pf-v5-c-data-list.pf-m-grid-none .pf-v5-c-data-list__cell.pf-m-flex-5 {
176
170
  flex-grow: 5;
177
171
  }
178
- }
179
- @media screen and (min-width: 0) {
180
172
  .pf-v5-c-data-list.pf-m-grid-none .pf-v5-c-data-list__expandable-content {
181
173
  max-height: initial;
182
174
  overflow-y: visible;
@@ -208,19 +200,17 @@
208
200
  display: flex;
209
201
  flex-grow: 1;
210
202
  flex-wrap: wrap;
211
- padding-bottom: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
203
+ padding-block-end: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
212
204
  }
213
- }
214
- @media screen and (min-width: 576px) {
215
205
  .pf-v5-c-data-list.pf-m-grid-sm .pf-v5-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
216
- margin-right: var(--pf-v5-c-data-list__cell--MarginRight);
206
+ margin-inline-end: var(--pf-v5-c-data-list__cell--MarginRight);
217
207
  }
218
208
  .pf-v5-c-data-list.pf-m-grid-sm .pf-v5-c-data-list__cell + .pf-v5-c-data-list__cell {
219
209
  flex: 1;
220
210
  order: initial;
221
211
  }
222
212
  .pf-v5-c-data-list.pf-m-grid-sm .pf-v5-c-data-list__cell.pf-m-align-right {
223
- margin-left: auto;
213
+ margin-inline-start: auto;
224
214
  }
225
215
  .pf-v5-c-data-list.pf-m-grid-sm .pf-v5-c-data-list__cell.pf-m-no-fill {
226
216
  flex: none;
@@ -237,8 +227,6 @@
237
227
  .pf-v5-c-data-list.pf-m-grid-sm .pf-v5-c-data-list__cell.pf-m-flex-5 {
238
228
  flex-grow: 5;
239
229
  }
240
- }
241
- @media screen and (min-width: 576px) {
242
230
  .pf-v5-c-data-list.pf-m-grid-sm .pf-v5-c-data-list__expandable-content {
243
231
  max-height: initial;
244
232
  overflow-y: visible;
@@ -270,19 +258,17 @@
270
258
  display: flex;
271
259
  flex-grow: 1;
272
260
  flex-wrap: wrap;
273
- padding-bottom: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
261
+ padding-block-end: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
274
262
  }
275
- }
276
- @media screen and (min-width: 768px) {
277
263
  .pf-v5-c-data-list.pf-m-grid-md .pf-v5-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
278
- margin-right: var(--pf-v5-c-data-list__cell--MarginRight);
264
+ margin-inline-end: var(--pf-v5-c-data-list__cell--MarginRight);
279
265
  }
280
266
  .pf-v5-c-data-list.pf-m-grid-md .pf-v5-c-data-list__cell + .pf-v5-c-data-list__cell {
281
267
  flex: 1;
282
268
  order: initial;
283
269
  }
284
270
  .pf-v5-c-data-list.pf-m-grid-md .pf-v5-c-data-list__cell.pf-m-align-right {
285
- margin-left: auto;
271
+ margin-inline-start: auto;
286
272
  }
287
273
  .pf-v5-c-data-list.pf-m-grid-md .pf-v5-c-data-list__cell.pf-m-no-fill {
288
274
  flex: none;
@@ -299,8 +285,6 @@
299
285
  .pf-v5-c-data-list.pf-m-grid-md .pf-v5-c-data-list__cell.pf-m-flex-5 {
300
286
  flex-grow: 5;
301
287
  }
302
- }
303
- @media screen and (min-width: 768px) {
304
288
  .pf-v5-c-data-list.pf-m-grid-md .pf-v5-c-data-list__expandable-content {
305
289
  max-height: initial;
306
290
  overflow-y: visible;
@@ -332,19 +316,17 @@
332
316
  display: flex;
333
317
  flex-grow: 1;
334
318
  flex-wrap: wrap;
335
- padding-bottom: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
319
+ padding-block-end: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
336
320
  }
337
- }
338
- @media screen and (min-width: 992px) {
339
321
  .pf-v5-c-data-list.pf-m-grid-lg .pf-v5-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
340
- margin-right: var(--pf-v5-c-data-list__cell--MarginRight);
322
+ margin-inline-end: var(--pf-v5-c-data-list__cell--MarginRight);
341
323
  }
342
324
  .pf-v5-c-data-list.pf-m-grid-lg .pf-v5-c-data-list__cell + .pf-v5-c-data-list__cell {
343
325
  flex: 1;
344
326
  order: initial;
345
327
  }
346
328
  .pf-v5-c-data-list.pf-m-grid-lg .pf-v5-c-data-list__cell.pf-m-align-right {
347
- margin-left: auto;
329
+ margin-inline-start: auto;
348
330
  }
349
331
  .pf-v5-c-data-list.pf-m-grid-lg .pf-v5-c-data-list__cell.pf-m-no-fill {
350
332
  flex: none;
@@ -361,8 +343,6 @@
361
343
  .pf-v5-c-data-list.pf-m-grid-lg .pf-v5-c-data-list__cell.pf-m-flex-5 {
362
344
  flex-grow: 5;
363
345
  }
364
- }
365
- @media screen and (min-width: 992px) {
366
346
  .pf-v5-c-data-list.pf-m-grid-lg .pf-v5-c-data-list__expandable-content {
367
347
  max-height: initial;
368
348
  overflow-y: visible;
@@ -394,19 +374,17 @@
394
374
  display: flex;
395
375
  flex-grow: 1;
396
376
  flex-wrap: wrap;
397
- padding-bottom: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
377
+ padding-block-end: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
398
378
  }
399
- }
400
- @media screen and (min-width: 1200px) {
401
379
  .pf-v5-c-data-list.pf-m-grid-xl .pf-v5-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
402
- margin-right: var(--pf-v5-c-data-list__cell--MarginRight);
380
+ margin-inline-end: var(--pf-v5-c-data-list__cell--MarginRight);
403
381
  }
404
382
  .pf-v5-c-data-list.pf-m-grid-xl .pf-v5-c-data-list__cell + .pf-v5-c-data-list__cell {
405
383
  flex: 1;
406
384
  order: initial;
407
385
  }
408
386
  .pf-v5-c-data-list.pf-m-grid-xl .pf-v5-c-data-list__cell.pf-m-align-right {
409
- margin-left: auto;
387
+ margin-inline-start: auto;
410
388
  }
411
389
  .pf-v5-c-data-list.pf-m-grid-xl .pf-v5-c-data-list__cell.pf-m-no-fill {
412
390
  flex: none;
@@ -423,8 +401,6 @@
423
401
  .pf-v5-c-data-list.pf-m-grid-xl .pf-v5-c-data-list__cell.pf-m-flex-5 {
424
402
  flex-grow: 5;
425
403
  }
426
- }
427
- @media screen and (min-width: 1200px) {
428
404
  .pf-v5-c-data-list.pf-m-grid-xl .pf-v5-c-data-list__expandable-content {
429
405
  max-height: initial;
430
406
  overflow-y: visible;
@@ -456,19 +432,17 @@
456
432
  display: flex;
457
433
  flex-grow: 1;
458
434
  flex-wrap: wrap;
459
- padding-bottom: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
435
+ padding-block-end: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
460
436
  }
461
- }
462
- @media screen and (min-width: 1450px) {
463
437
  .pf-v5-c-data-list.pf-m-grid-2xl .pf-v5-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
464
- margin-right: var(--pf-v5-c-data-list__cell--MarginRight);
438
+ margin-inline-end: var(--pf-v5-c-data-list__cell--MarginRight);
465
439
  }
466
440
  .pf-v5-c-data-list.pf-m-grid-2xl .pf-v5-c-data-list__cell + .pf-v5-c-data-list__cell {
467
441
  flex: 1;
468
442
  order: initial;
469
443
  }
470
444
  .pf-v5-c-data-list.pf-m-grid-2xl .pf-v5-c-data-list__cell.pf-m-align-right {
471
- margin-left: auto;
445
+ margin-inline-start: auto;
472
446
  }
473
447
  .pf-v5-c-data-list.pf-m-grid-2xl .pf-v5-c-data-list__cell.pf-m-no-fill {
474
448
  flex: none;
@@ -485,8 +459,6 @@
485
459
  .pf-v5-c-data-list.pf-m-grid-2xl .pf-v5-c-data-list__cell.pf-m-flex-5 {
486
460
  flex-grow: 5;
487
461
  }
488
- }
489
- @media screen and (min-width: 1450px) {
490
462
  .pf-v5-c-data-list.pf-m-grid-2xl .pf-v5-c-data-list__expandable-content {
491
463
  max-height: initial;
492
464
  overflow-y: visible;
@@ -618,7 +590,7 @@
618
590
  font-size: var(--pf-v5-c-data-list--FontSize);
619
591
  line-height: var(--pf-v5-c-data-list--LineHeight);
620
592
  overflow-wrap: break-word;
621
- border-top: var(--pf-v5-c-data-list--BorderTopWidth) solid var(--pf-v5-c-data-list--BorderTopColor);
593
+ border-block-start: var(--pf-v5-c-data-list--BorderTopWidth) solid var(--pf-v5-c-data-list--BorderTopColor);
622
594
  }
623
595
  @media screen and (min-width: 576px) {
624
596
  .pf-v5-c-data-list {
@@ -697,13 +669,13 @@
697
669
  display: flex;
698
670
  flex-direction: column;
699
671
  background-color: var(--pf-v5-c-data-list__item--BackgroundColor);
700
- border-bottom: var(--pf-v5-c-data-list__item--BorderBottomWidth) solid var(--pf-v5-c-data-list__item--BorderBottomColor);
672
+ border-block-end: var(--pf-v5-c-data-list__item--BorderBottomWidth) solid var(--pf-v5-c-data-list__item--BorderBottomColor);
701
673
  }
702
674
  .pf-v5-c-data-list__item::before {
703
675
  position: absolute;
704
- top: var(--pf-v5-c-data-list__item--before--Top);
705
- bottom: 0;
706
- left: 0;
676
+ inset-block-start: var(--pf-v5-c-data-list__item--before--Top);
677
+ inset-block-end: 0;
678
+ inset-inline-start: 0;
707
679
  width: var(--pf-v5-c-data-list__item--before--Width);
708
680
  content: "";
709
681
  background-color: var(--pf-v5-c-data-list__item--before--BackgroundColor);
@@ -721,7 +693,7 @@
721
693
  --pf-v5-c-data-list__item--BorderBottomWidth: 0;
722
694
  }
723
695
  .pf-v5-c-data-list__item.pf-m-clickable:hover:not(.pf-m-selected):not(:last-child) + .pf-v5-c-data-list__item, .pf-v5-c-data-list__item.pf-m-clickable:focus:not(.pf-m-selected):not(:last-child) + .pf-v5-c-data-list__item {
724
- border-top: var(--pf-v5-c-data-list__item--m-clickable--hover--item--BorderTopWidth) solid var(--pf-v5-c-data-list__item--m-clickable--hover--item--BorderTopColor);
696
+ border-block-start: var(--pf-v5-c-data-list__item--m-clickable--hover--item--BorderTopWidth) solid var(--pf-v5-c-data-list__item--m-clickable--hover--item--BorderTopColor);
725
697
  }
726
698
  .pf-v5-c-data-list__item.pf-m-clickable:hover {
727
699
  box-shadow: var(--pf-v5-c-data-list__item--m-clickable--hover--BoxShadow);
@@ -740,10 +712,10 @@
740
712
  }
741
713
  .pf-v5-c-data-list__item.pf-m-ghost-row::after {
742
714
  position: absolute;
743
- top: 0;
744
- right: 0;
745
- bottom: 0;
746
- left: 0;
715
+ inset-block-start: 0;
716
+ inset-block-end: 0;
717
+ inset-inline-start: 0;
718
+ inset-inline-end: 0;
747
719
  content: "";
748
720
  background-color: var(--pf-v5-c-data-list__item--m-ghost-row--after--BackgroundColor);
749
721
  opacity: var(--pf-v5-c-data-list__item--m-ghost-row--after--Opacity);
@@ -755,19 +727,19 @@
755
727
  .pf-v5-c-data-list__item-row {
756
728
  display: flex;
757
729
  flex-wrap: nowrap;
758
- padding-right: var(--pf-v5-c-data-list__item-row--PaddingRight);
759
- padding-left: var(--pf-v5-c-data-list__item-row--PaddingLeft);
730
+ padding-inline-start: var(--pf-v5-c-data-list__item-row--PaddingLeft);
731
+ padding-inline-end: var(--pf-v5-c-data-list__item-row--PaddingRight);
760
732
  }
761
733
 
762
734
  .pf-v5-c-data-list__item-control {
763
735
  display: flex;
764
736
  flex-wrap: nowrap;
765
- padding-top: var(--pf-v5-c-data-list__item-control--PaddingTop);
766
- padding-bottom: var(--pf-v5-c-data-list__item-control--PaddingBottom);
767
- margin-right: var(--pf-v5-c-data-list__item-control--MarginRight);
737
+ padding-block-start: var(--pf-v5-c-data-list__item-control--PaddingTop);
738
+ padding-block-end: var(--pf-v5-c-data-list__item-control--PaddingBottom);
739
+ margin-inline-end: var(--pf-v5-c-data-list__item-control--MarginRight);
768
740
  }
769
741
  .pf-v5-c-data-list__item-control > *:not(:last-child) {
770
- margin-right: var(--pf-v5-c-data-list__item-control--not-last-child--MarginRight);
742
+ margin-inline-end: var(--pf-v5-c-data-list__item-control--not-last-child--MarginRight);
771
743
  }
772
744
 
773
745
  .pf-v5-c-data-list__check {
@@ -775,7 +747,7 @@
775
747
  align-items: center;
776
748
  align-self: flex-start;
777
749
  height: var(--pf-v5-c-data-list__check--Height);
778
- margin-top: var(--pf-v5-c-data-list__check--MarginTop);
750
+ margin-block-start: var(--pf-v5-c-data-list__check--MarginTop);
779
751
  }
780
752
  .pf-v5-c-data-list__check > input {
781
753
  cursor: pointer;
@@ -784,8 +756,13 @@
784
756
  .pf-v5-c-data-list__item-draggable-button {
785
757
  display: flex;
786
758
  flex-direction: column;
787
- padding: var(--pf-v5-c-data-list__item-draggable-button--PaddingTop) var(--pf-v5-c-data-list__item-draggable-button--PaddingRight) var(--pf-v5-c-data-list__item-draggable-button--PaddingBottom) var(--pf-v5-c-data-list__item-draggable-button--PaddingLeft);
788
- margin: var(--pf-v5-c-data-list__item-draggable-button--MarginTop) 0 var(--pf-v5-c-data-list__item-draggable-button--MarginBottom) var(--pf-v5-c-data-list__item-draggable-button--MarginLeft);
759
+ padding-block-start: var(--pf-v5-c-data-list__item-draggable-button--PaddingTop);
760
+ padding-block-end: var(--pf-v5-c-data-list__item-draggable-button--PaddingBottom);
761
+ padding-inline-start: var(--pf-v5-c-data-list__item-draggable-button--PaddingLeft);
762
+ padding-inline-end: var(--pf-v5-c-data-list__item-draggable-button--PaddingRight);
763
+ margin-block-start: var(--pf-v5-c-data-list__item-draggable-button--MarginTop);
764
+ margin-block-end: var(--pf-v5-c-data-list__item-draggable-button--MarginBottom);
765
+ margin-inline-start: var(--pf-v5-c-data-list__item-draggable-button--MarginLeft);
789
766
  background-color: var(--pf-v5-c-data-list__item-draggable-button--BackgroundColor);
790
767
  border: 0;
791
768
  }
@@ -811,20 +788,22 @@
811
788
  --pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-data-list__item-action--Display);
812
789
  align-content: flex-start;
813
790
  align-items: flex-start;
814
- padding-top: var(--pf-v5-c-data-list__item-action--PaddingTop);
815
- padding-bottom: var(--pf-v5-c-data-list__item-action--PaddingBottom);
816
- margin-left: var(--pf-v5-c-data-list__item-action--MarginLeft);
791
+ padding-block-start: var(--pf-v5-c-data-list__item-action--PaddingTop);
792
+ padding-block-end: var(--pf-v5-c-data-list__item-action--PaddingBottom);
793
+ margin-inline-start: var(--pf-v5-c-data-list__item-action--MarginLeft);
817
794
  }
818
795
  .pf-v5-c-data-list__item-action > *:not(:last-child) {
819
- margin-right: var(--pf-v5-c-data-list__item-action--not-last-child--MarginRight);
796
+ margin-inline-end: var(--pf-v5-c-data-list__item-action--not-last-child--MarginRight);
820
797
  }
821
798
  .pf-v5-c-data-list__item-action .pf-v5-c-data-list__action {
822
- margin-top: var(--pf-v5-c-data-list__action--MarginTop);
823
- margin-bottom: var(--pf-v5-c-data-list__item-action__action--MarginBottom);
799
+ margin-block-start: var(--pf-v5-c-data-list__action--MarginTop);
800
+ margin-block-end: var(--pf-v5-c-data-list__item-action__action--MarginBottom);
824
801
  }
825
802
 
826
803
  .pf-v5-c-data-list__toggle {
827
- margin: var(--pf-v5-c-data-list__toggle--MarginTop) 0 var(--pf-v5-c-data-list__toggle--MarginBottom) var(--pf-v5-c-data-list__toggle--MarginLeft);
804
+ margin-block-start: var(--pf-v5-c-data-list__toggle--MarginTop);
805
+ margin-block-end: var(--pf-v5-c-data-list__toggle--MarginBottom);
806
+ margin-inline-start: var(--pf-v5-c-data-list__toggle--MarginLeft);
828
807
  }
829
808
 
830
809
  .pf-v5-c-data-list__toggle-icon {
@@ -843,25 +822,25 @@
843
822
  .pf-v5-c-data-list__cell {
844
823
  flex: 1;
845
824
  grid-column: 1/-1;
846
- padding-top: var(--pf-v5-c-data-list__cell--PaddingTop);
847
- padding-bottom: var(--pf-v5-c-data-list__cell--PaddingBottom);
825
+ padding-block-start: var(--pf-v5-c-data-list__cell--PaddingTop);
826
+ padding-block-end: var(--pf-v5-c-data-list__cell--PaddingBottom);
848
827
  }
849
828
  .pf-v5-c-data-list__cell + .pf-v5-c-data-list__cell {
850
829
  flex: 1 0 100%;
851
830
  order: 1;
852
- padding-top: var(--pf-v5-c-data-list__cell--cell--PaddingTop);
831
+ padding-block-start: var(--pf-v5-c-data-list__cell--cell--PaddingTop);
853
832
  }
854
833
  .pf-v5-c-data-list__cell.pf-m-icon {
855
834
  flex-grow: 0;
856
835
  grid-column: 1/2;
857
- margin-right: var(--pf-v5-c-data-list__cell--m-icon--MarginRight);
836
+ margin-inline-end: var(--pf-v5-c-data-list__cell--m-icon--MarginRight);
858
837
  }
859
838
  .pf-v5-c-data-list__cell.pf-m-icon + .pf-v5-c-data-list__cell {
860
839
  grid-column: 2/3;
861
- padding-top: var(--pf-v5-c-data-list__cell--m-icon--cell--PaddingTop);
840
+ padding-block-start: var(--pf-v5-c-data-list__cell--m-icon--cell--PaddingTop);
862
841
  }
863
842
  .pf-v5-c-data-list__cell.pf-m-align-right {
864
- margin-left: 0;
843
+ margin-inline-start: 0;
865
844
  }
866
845
 
867
846
  .pf-v5-c-data-list__text {
@@ -883,13 +862,16 @@
883
862
  overflow-y: auto;
884
863
  }
885
864
  .pf-v5-c-data-list__expandable-content .pf-v5-c-data-list__expandable-content-body {
886
- padding: var(--pf-v5-c-data-list__expandable-content-body--PaddingTop) var(--pf-v5-c-data-list__expandable-content-body--PaddingRight) var(--pf-v5-c-data-list__expandable-content-body--PaddingBottom) var(--pf-v5-c-data-list__expandable-content-body--PaddingLeft);
865
+ padding-block-start: var(--pf-v5-c-data-list__expandable-content-body--PaddingTop);
866
+ padding-block-end: var(--pf-v5-c-data-list__expandable-content-body--PaddingBottom);
867
+ padding-inline-start: var(--pf-v5-c-data-list__expandable-content-body--PaddingLeft);
868
+ padding-inline-end: var(--pf-v5-c-data-list__expandable-content-body--PaddingRight);
887
869
  }
888
870
  .pf-v5-c-data-list__expandable-content .pf-v5-c-data-list__expandable-content-body > .pf-v5-c-data-list {
889
- margin-left: var(--pf-v5-c-data-list--MarginLeft);
871
+ margin-inline-start: var(--pf-v5-c-data-list--MarginLeft);
890
872
  }
891
873
  .pf-v5-c-data-list__expandable-content .pf-v5-c-data-list__expandable-content-body .pf-v5-c-data-list__item:last-child {
892
- border-bottom: 0;
874
+ border-block-end: 0;
893
875
  }
894
876
  .pf-v5-c-data-list__expandable-content .pf-v5-c-data-list__expandable-content-body .pf-v5-c-data-list__item-row {
895
877
  --pf-v5-c-data-list__item-row--PaddingLeft: 0;
@@ -18,7 +18,7 @@
18
18
  }
19
19
 
20
20
  .pf-v5-c-date-picker__helper-text {
21
- margin-top: var(--pf-v5-c-date-picker__helper-text--MarginTop);
21
+ margin-block-start: var(--pf-v5-c-date-picker__helper-text--MarginTop);
22
22
  }
23
23
 
24
24
  .pf-v5-c-date-picker__input .pf-v5-c-form-control {
@@ -27,9 +27,9 @@
27
27
 
28
28
  .pf-v5-c-date-picker__calendar {
29
29
  position: absolute;
30
- top: var(--pf-v5-c-date-picker__calendar--Top);
31
- right: var(--pf-v5-c-date-picker__calendar--Right);
32
- left: var(--pf-v5-c-date-picker__calendar--Left);
30
+ inset-block-start: var(--pf-v5-c-date-picker__calendar--Top);
31
+ inset-inline-start: var(--pf-v5-c-date-picker__calendar--Left);
32
+ inset-inline-end: var(--pf-v5-c-date-picker__calendar--Right);
33
33
  z-index: var(--pf-v5-c-date-picker__calendar--ZIndex);
34
34
  background-color: var(--pf-v5-c-date-picker__calendar--BackgroundColor);
35
35
  box-shadow: var(--pf-v5-c-date-picker__calendar--BoxShadow);
@@ -45,10 +45,10 @@
45
45
  .pf-v5-c-date-picker__calendar.pf-m-static {
46
46
  --pf-v5-c-date-picker--m-top__calendar--TranslateY: 0;
47
47
  position: static;
48
- top: auto;
49
- right: auto;
50
- bottom: auto;
51
- left: auto;
48
+ inset-block-start: auto;
49
+ inset-block-end: auto;
50
+ inset-inline-start: auto;
51
+ inset-inline-end: auto;
52
52
  z-index: auto;
53
53
  min-width: min-content;
54
54
  }
@@ -122,13 +122,13 @@
122
122
  .pf-v5-c-description-list.pf-m-fill-columns {
123
123
  display: block;
124
124
  column-count: var(--pf-v5-c-description-list--GridTemplateColumns--count);
125
- margin-bottom: calc(var(--pf-v5-c-description-list--RowGap) * -1);
125
+ margin-block-end: calc(var(--pf-v5-c-description-list--RowGap) * -1);
126
126
  }
127
127
  .pf-v5-c-description-list.pf-m-fill-columns .pf-v5-c-description-list__group,
128
128
  .pf-v5-c-description-list.pf-m-fill-columns > .pf-v5-c-card {
129
129
  display: inline-grid;
130
130
  width: 100%;
131
- margin-bottom: var(--pf-v5-c-description-list--RowGap);
131
+ margin-block-end: var(--pf-v5-c-description-list--RowGap);
132
132
  break-inside: avoid;
133
133
  page-break-inside: avoid;
134
134
  -webkit-column-break-inside: avoid;
@@ -142,7 +142,10 @@
142
142
  }
143
143
  .pf-v5-c-description-list > .pf-v5-c-card {
144
144
  align-self: stretch;
145
- padding: var(--pf-v5-c-card--first-child--PaddingTop) var(--pf-v5-c-card--child--PaddingRight) var(--pf-v5-c-card--child--PaddingBottom) var(--pf-v5-c-card--child--PaddingLeft);
145
+ padding-block-start: var(--pf-v5-c-card--first-child--PaddingTop);
146
+ padding-block-end: var(--pf-v5-c-card--child--PaddingBottom);
147
+ padding-inline-start: var(--pf-v5-c-card--child--PaddingLeft);
148
+ padding-inline-end: var(--pf-v5-c-card--child--PaddingRight);
146
149
  }
147
150
 
148
151
  .pf-v5-c-description-list__group,
@@ -159,7 +162,7 @@
159
162
  .pf-v5-c-description-list__term,
160
163
  .pf-v5-c-description-list__description {
161
164
  min-width: 0;
162
- text-align: left;
165
+ text-align: start;
163
166
  overflow-wrap: break-word;
164
167
  }
165
168
 
@@ -176,7 +179,7 @@
176
179
  .pf-v5-c-description-list__term-icon {
177
180
  flex-shrink: 0;
178
181
  min-width: var(--pf-v5-c-description-list__term-icon--MinWidth);
179
- margin-right: var(--pf-v5-c-description-list__term-icon--MarginRight);
182
+ margin-inline-end: var(--pf-v5-c-description-list__term-icon--MarginRight);
180
183
  color: var(--pf-v5-c-description-list__term-icon--Color);
181
184
  }
182
185
 
@@ -16,10 +16,10 @@
16
16
  }
17
17
  .pf-v5-c-draggable.pf-m-dragging::after {
18
18
  position: absolute;
19
- top: 0;
20
- right: 0;
21
- bottom: 0;
22
- left: 0;
19
+ inset-block-start: 0;
20
+ inset-block-end: 0;
21
+ inset-inline-start: 0;
22
+ inset-inline-end: 0;
23
23
  content: "";
24
24
  border: var(--pf-v5-c-draggable--m-dragging--after--BorderWidth) solid var(--pf-v5-c-draggable--m-dragging--after--BorderColor);
25
25
  }
@@ -41,10 +41,10 @@
41
41
  }
42
42
  .pf-v5-c-droppable::before, .pf-v5-c-droppable::after {
43
43
  position: absolute;
44
- top: 0;
45
- right: 0;
46
- bottom: 0;
47
- left: 0;
44
+ inset-block-start: 0;
45
+ inset-block-end: 0;
46
+ inset-inline-start: 0;
47
+ inset-inline-end: 0;
48
48
  pointer-events: none;
49
49
  content: "";
50
50
  }