@patternfly/react-styles 5.0.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 +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
  }