@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/ContextSelector/context-selector.css CHANGED
@@ -143,10 +143,10 @@
143
143
  align-self: stretch;
144
144
  }
145
145
  .pf-v5-c-context-selector.pf-m-full-height .pf-v5-c-context-selector__toggle::before {
146
- border-top-width: var(--pf-v5-c-context-selector--m-full-height__toggle--before--BorderTopWidth);
146
+ border-block-start-width: var(--pf-v5-c-context-selector--m-full-height__toggle--before--BorderTopWidth);
147
147
  }
148
148
  .pf-v5-c-context-selector.pf-m-full-height:hover .pf-v5-c-context-selector__toggle::before {
149
- border-bottom-width: var(--pf-v5-c-context-selector--m-full-height__toggle--hover--BorderBottomWidth);
149
+ border-block-end-width: var(--pf-v5-c-context-selector--m-full-height__toggle--hover--BorderBottomWidth);
150
150
  }
151
151
  .pf-v5-c-context-selector.pf-m-large {
152
152
  --pf-v5-c-context-selector__toggle--PaddingTop: var(--pf-v5-c-context-selector--m-large__toggle--PaddingTop);
@@ -176,7 +176,10 @@
176
176
  column-gap: var(--pf-v5-c-context-selector__toggle--ColumnGap);
177
177
  align-items: center;
178
178
  width: 100%;
179
- padding: var(--pf-v5-c-context-selector__toggle--PaddingTop) var(--pf-v5-c-context-selector__toggle--PaddingRight) var(--pf-v5-c-context-selector__toggle--PaddingBottom) var(--pf-v5-c-context-selector__toggle--PaddingLeft);
179
+ padding-block-start: var(--pf-v5-c-context-selector__toggle--PaddingTop);
180
+ padding-block-end: var(--pf-v5-c-context-selector__toggle--PaddingBottom);
181
+ padding-inline-start: var(--pf-v5-c-context-selector__toggle--PaddingLeft);
182
+ padding-inline-end: var(--pf-v5-c-context-selector__toggle--PaddingRight);
180
183
  color: var(--pf-v5-c-context-selector__toggle--Color);
181
184
  white-space: nowrap;
182
185
  cursor: pointer;
@@ -185,25 +188,28 @@
185
188
  }
186
189
  .pf-v5-c-context-selector__toggle::before {
187
190
  position: absolute;
188
- top: 0;
189
- right: 0;
190
- bottom: 0;
191
- left: 0;
191
+ inset-block-start: 0;
192
+ inset-block-end: 0;
193
+ inset-inline-start: 0;
194
+ inset-inline-end: 0;
192
195
  content: "";
193
196
  border: var(--pf-v5-c-context-selector__toggle--BorderWidth) solid;
194
- border-color: var(--pf-v5-c-context-selector__toggle--BorderTopColor) var(--pf-v5-c-context-selector__toggle--BorderRightColor) var(--pf-v5-c-context-selector__toggle--BorderBottomColor) var(--pf-v5-c-context-selector__toggle--BorderLeftColor);
197
+ border-block-start-color: var(--pf-v5-c-context-selector__toggle--BorderTopColor);
198
+ border-block-end-color: var(--pf-v5-c-context-selector__toggle--BorderBottomColor);
199
+ border-inline-start-color: var(--pf-v5-c-context-selector__toggle--BorderLeftColor);
200
+ border-inline-end-color: var(--pf-v5-c-context-selector__toggle--BorderRightColor);
195
201
  }
196
202
  .pf-v5-c-context-selector__toggle:hover::before {
197
203
  --pf-v5-c-context-selector__toggle--BorderBottomColor: var(--pf-v5-c-context-selector__toggle--hover--BorderBottomColor);
198
- border-bottom-width: var(--pf-v5-c-context-selector__toggle--hover--BorderBottomWidth);
204
+ border-block-end-width: var(--pf-v5-c-context-selector__toggle--hover--BorderBottomWidth);
199
205
  }
200
206
  .pf-v5-c-context-selector__toggle:active::before, .pf-v5-c-context-selector__toggle.pf-m-active::before, .pf-v5-c-context-selector__toggle:focus-within::before {
201
207
  --pf-v5-c-context-selector__toggle--BorderBottomColor: var(--pf-v5-c-context-selector__toggle--active--BorderBottomColor);
202
- border-bottom-width: var(--pf-v5-c-context-selector__toggle--active--BorderBottomWidth);
208
+ border-block-end-width: var(--pf-v5-c-context-selector__toggle--active--BorderBottomWidth);
203
209
  }
204
210
  .pf-m-expanded > .pf-v5-c-context-selector__toggle::before {
205
211
  --pf-v5-c-context-selector__toggle--BorderBottomColor: var(--pf-v5-c-context-selector__toggle--expanded--BorderBottomColor);
206
- border-bottom-width: var(--pf-v5-c-context-selector__toggle--expanded--BorderBottomWidth);
212
+ border-block-end-width: var(--pf-v5-c-context-selector__toggle--expanded--BorderBottomWidth);
207
213
  }
208
214
  .pf-v5-c-context-selector__toggle.pf-m-plain {
209
215
  --pf-v5-c-context-selector__toggle--PaddingRight: var(--pf-v5-c-context-selector__toggle--m-plain--PaddingRight);
@@ -237,19 +243,19 @@
237
243
  font-size: var(--pf-v5-c-context-selector__toggle-text--FontSize);
238
244
  font-weight: var(--pf-v5-c-context-selector__toggle-text--FontWeight);
239
245
  line-height: var(--pf-v5-c-context-selector__toggle-text--LineHeight);
240
- text-align: left;
246
+ text-align: start;
241
247
  }
242
248
 
243
249
  .pf-v5-c-context-selector__toggle-icon {
244
- padding-right: var(--pf-v5-c-context-selector__toggle-icon--PaddingRight);
245
- padding-left: var(--pf-v5-c-context-selector__toggle-icon--PaddingLeft);
250
+ padding-inline-start: var(--pf-v5-c-context-selector__toggle-icon--PaddingLeft);
251
+ padding-inline-end: var(--pf-v5-c-context-selector__toggle-icon--PaddingRight);
246
252
  color: var(--pf-v5-c-context-selector__toggle-icon--Color, inherit);
247
253
  }
248
254
 
249
255
  .pf-v5-c-context-selector__menu {
250
256
  color: var(--pf-v5-global--Color--100);
251
257
  position: absolute;
252
- top: var(--pf-v5-c-context-selector__menu--Top);
258
+ inset-block-start: var(--pf-v5-c-context-selector__menu--Top);
253
259
  z-index: var(--pf-v5-c-context-selector__menu--ZIndex);
254
260
  min-width: 100%;
255
261
  background-color: var(--pf-v5-c-context-selector__menu--BackgroundColor);
@@ -258,29 +264,35 @@
258
264
  }
259
265
  .pf-v5-c-context-selector__menu.pf-m-static {
260
266
  position: static;
261
- top: auto;
262
- right: auto;
263
- bottom: auto;
264
- left: auto;
267
+ inset-block-start: auto;
268
+ inset-block-end: auto;
269
+ inset-inline-start: auto;
270
+ inset-inline-end: auto;
265
271
  z-index: auto;
266
272
  min-width: min-content;
267
273
  }
268
274
 
269
275
  .pf-v5-c-context-selector__menu-search {
270
276
  position: relative;
271
- padding: var(--pf-v5-c-context-selector__menu-search--PaddingTop) var(--pf-v5-c-context-selector__menu-search--PaddingRight) var(--pf-v5-c-context-selector__menu-search--PaddingBottom) var(--pf-v5-c-context-selector__menu-search--PaddingLeft);
272
- border-bottom: var(--pf-v5-c-context-selector__menu-search--BorderBottomWidth) solid var(--pf-v5-c-context-selector__menu-search--BorderBottomColor);
277
+ padding-block-start: var(--pf-v5-c-context-selector__menu-search--PaddingTop);
278
+ padding-block-end: var(--pf-v5-c-context-selector__menu-search--PaddingBottom);
279
+ padding-inline-start: var(--pf-v5-c-context-selector__menu-search--PaddingLeft);
280
+ padding-inline-end: var(--pf-v5-c-context-selector__menu-search--PaddingRight);
281
+ border-block-end: var(--pf-v5-c-context-selector__menu-search--BorderBottomWidth) solid var(--pf-v5-c-context-selector__menu-search--BorderBottomColor);
273
282
  }
274
283
 
275
284
  .pf-v5-c-context-selector__menu-footer {
276
- padding: var(--pf-v5-c-context-selector__menu-footer--PaddingTop) var(--pf-v5-c-context-selector__menu-footer--PaddingRight) var(--pf-v5-c-context-selector__menu-footer--PaddingBottom) var(--pf-v5-c-context-selector__menu-footer--PaddingLeft);
285
+ padding-block-start: var(--pf-v5-c-context-selector__menu-footer--PaddingTop);
286
+ padding-block-end: var(--pf-v5-c-context-selector__menu-footer--PaddingBottom);
287
+ padding-inline-start: var(--pf-v5-c-context-selector__menu-footer--PaddingLeft);
288
+ padding-inline-end: var(--pf-v5-c-context-selector__menu-footer--PaddingRight);
277
289
  box-shadow: var(--pf-v5-c-context-selector__menu-footer--BoxShadow);
278
290
  }
279
291
 
280
292
  .pf-v5-c-context-selector__menu-list {
281
293
  max-height: var(--pf-v5-c-context-selector__menu-list--MaxHeight);
282
- padding-top: var(--pf-v5-c-context-selector__menu-list--PaddingTop);
283
- padding-bottom: var(--pf-v5-c-context-selector__menu-list--PaddingBottom);
294
+ padding-block-start: var(--pf-v5-c-context-selector__menu-list--PaddingTop);
295
+ padding-block-end: var(--pf-v5-c-context-selector__menu-list--PaddingBottom);
284
296
  overflow-y: auto;
285
297
  }
286
298
 
@@ -288,7 +300,10 @@
288
300
  display: flex;
289
301
  align-items: center;
290
302
  width: 100%;
291
- padding: var(--pf-v5-c-context-selector__menu-list-item--PaddingTop) var(--pf-v5-c-context-selector__menu-list-item--PaddingRight) var(--pf-v5-c-context-selector__menu-list-item--PaddingBottom) var(--pf-v5-c-context-selector__menu-list-item--PaddingLeft);
303
+ padding-block-start: var(--pf-v5-c-context-selector__menu-list-item--PaddingTop);
304
+ padding-block-end: var(--pf-v5-c-context-selector__menu-list-item--PaddingBottom);
305
+ padding-inline-start: var(--pf-v5-c-context-selector__menu-list-item--PaddingLeft);
306
+ padding-inline-end: var(--pf-v5-c-context-selector__menu-list-item--PaddingRight);
292
307
  color: var(--pf-v5-c-context-selector__menu-list-item--Color);
293
308
  white-space: nowrap;
294
309
  background-color: var(--pf-v5-c-context-selector__menu-list-item--BackgroundColor);
@@ -317,5 +332,5 @@
317
332
  background: var(--pf-v5-global--BackgroundColor--300);
318
333
  }
319
334
  :where(.pf-v5-theme-dark) .pf-v5-c-context-selector__menu-footer {
320
- border-top: 1px solid var(--pf-v5-global--BorderColor--300);
335
+ border-block-start: 1px solid var(--pf-v5-global--BorderColor--300);
321
336
  }
package/css/components/DataList/data-list-grid.css CHANGED
@@ -23,19 +23,17 @@
23
23
  display: flex;
24
24
  flex-grow: 1;
25
25
  flex-wrap: wrap;
26
- padding-bottom: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
26
+ padding-block-end: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
27
27
  }
28
- }
29
- @media screen and (min-width: 768px) {
30
28
  .pf-v5-c-data-list:not([class*=pf-m-grid]) .pf-v5-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
31
- margin-right: var(--pf-v5-c-data-list__cell--MarginRight);
29
+ margin-inline-end: var(--pf-v5-c-data-list__cell--MarginRight);
32
30
  }
33
31
  .pf-v5-c-data-list:not([class*=pf-m-grid]) .pf-v5-c-data-list__cell + .pf-v5-c-data-list__cell {
34
32
  flex: 1;
35
33
  order: initial;
36
34
  }
37
35
  .pf-v5-c-data-list:not([class*=pf-m-grid]) .pf-v5-c-data-list__cell.pf-m-align-right {
38
- margin-left: auto;
36
+ margin-inline-start: auto;
39
37
  }
40
38
  .pf-v5-c-data-list:not([class*=pf-m-grid]) .pf-v5-c-data-list__cell.pf-m-no-fill {
41
39
  flex: none;
@@ -52,8 +50,6 @@
52
50
  .pf-v5-c-data-list:not([class*=pf-m-grid]) .pf-v5-c-data-list__cell.pf-m-flex-5 {
53
51
  flex-grow: 5;
54
52
  }
55
- }
56
- @media screen and (min-width: 768px) {
57
53
  .pf-v5-c-data-list:not([class*=pf-m-grid]) .pf-v5-c-data-list__expandable-content {
58
54
  max-height: initial;
59
55
  overflow-y: visible;
@@ -85,19 +81,17 @@
85
81
  display: flex;
86
82
  flex-grow: 1;
87
83
  flex-wrap: wrap;
88
- padding-bottom: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
84
+ padding-block-end: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
89
85
  }
90
- }
91
- @media screen and (min-width: 0) {
92
86
  .pf-v5-c-data-list.pf-m-grid-none .pf-v5-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
93
- margin-right: var(--pf-v5-c-data-list__cell--MarginRight);
87
+ margin-inline-end: var(--pf-v5-c-data-list__cell--MarginRight);
94
88
  }
95
89
  .pf-v5-c-data-list.pf-m-grid-none .pf-v5-c-data-list__cell + .pf-v5-c-data-list__cell {
96
90
  flex: 1;
97
91
  order: initial;
98
92
  }
99
93
  .pf-v5-c-data-list.pf-m-grid-none .pf-v5-c-data-list__cell.pf-m-align-right {
100
- margin-left: auto;
94
+ margin-inline-start: auto;
101
95
  }
102
96
  .pf-v5-c-data-list.pf-m-grid-none .pf-v5-c-data-list__cell.pf-m-no-fill {
103
97
  flex: none;
@@ -114,8 +108,6 @@
114
108
  .pf-v5-c-data-list.pf-m-grid-none .pf-v5-c-data-list__cell.pf-m-flex-5 {
115
109
  flex-grow: 5;
116
110
  }
117
- }
118
- @media screen and (min-width: 0) {
119
111
  .pf-v5-c-data-list.pf-m-grid-none .pf-v5-c-data-list__expandable-content {
120
112
  max-height: initial;
121
113
  overflow-y: visible;
@@ -147,19 +139,17 @@
147
139
  display: flex;
148
140
  flex-grow: 1;
149
141
  flex-wrap: wrap;
150
- padding-bottom: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
142
+ padding-block-end: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
151
143
  }
152
- }
153
- @media screen and (min-width: 576px) {
154
144
  .pf-v5-c-data-list.pf-m-grid-sm .pf-v5-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
155
- margin-right: var(--pf-v5-c-data-list__cell--MarginRight);
145
+ margin-inline-end: var(--pf-v5-c-data-list__cell--MarginRight);
156
146
  }
157
147
  .pf-v5-c-data-list.pf-m-grid-sm .pf-v5-c-data-list__cell + .pf-v5-c-data-list__cell {
158
148
  flex: 1;
159
149
  order: initial;
160
150
  }
161
151
  .pf-v5-c-data-list.pf-m-grid-sm .pf-v5-c-data-list__cell.pf-m-align-right {
162
- margin-left: auto;
152
+ margin-inline-start: auto;
163
153
  }
164
154
  .pf-v5-c-data-list.pf-m-grid-sm .pf-v5-c-data-list__cell.pf-m-no-fill {
165
155
  flex: none;
@@ -176,8 +166,6 @@
176
166
  .pf-v5-c-data-list.pf-m-grid-sm .pf-v5-c-data-list__cell.pf-m-flex-5 {
177
167
  flex-grow: 5;
178
168
  }
179
- }
180
- @media screen and (min-width: 576px) {
181
169
  .pf-v5-c-data-list.pf-m-grid-sm .pf-v5-c-data-list__expandable-content {
182
170
  max-height: initial;
183
171
  overflow-y: visible;
@@ -209,19 +197,17 @@
209
197
  display: flex;
210
198
  flex-grow: 1;
211
199
  flex-wrap: wrap;
212
- padding-bottom: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
200
+ padding-block-end: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
213
201
  }
214
- }
215
- @media screen and (min-width: 768px) {
216
202
  .pf-v5-c-data-list.pf-m-grid-md .pf-v5-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
217
- margin-right: var(--pf-v5-c-data-list__cell--MarginRight);
203
+ margin-inline-end: var(--pf-v5-c-data-list__cell--MarginRight);
218
204
  }
219
205
  .pf-v5-c-data-list.pf-m-grid-md .pf-v5-c-data-list__cell + .pf-v5-c-data-list__cell {
220
206
  flex: 1;
221
207
  order: initial;
222
208
  }
223
209
  .pf-v5-c-data-list.pf-m-grid-md .pf-v5-c-data-list__cell.pf-m-align-right {
224
- margin-left: auto;
210
+ margin-inline-start: auto;
225
211
  }
226
212
  .pf-v5-c-data-list.pf-m-grid-md .pf-v5-c-data-list__cell.pf-m-no-fill {
227
213
  flex: none;
@@ -238,8 +224,6 @@
238
224
  .pf-v5-c-data-list.pf-m-grid-md .pf-v5-c-data-list__cell.pf-m-flex-5 {
239
225
  flex-grow: 5;
240
226
  }
241
- }
242
- @media screen and (min-width: 768px) {
243
227
  .pf-v5-c-data-list.pf-m-grid-md .pf-v5-c-data-list__expandable-content {
244
228
  max-height: initial;
245
229
  overflow-y: visible;
@@ -271,19 +255,17 @@
271
255
  display: flex;
272
256
  flex-grow: 1;
273
257
  flex-wrap: wrap;
274
- padding-bottom: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
258
+ padding-block-end: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
275
259
  }
276
- }
277
- @media screen and (min-width: 992px) {
278
260
  .pf-v5-c-data-list.pf-m-grid-lg .pf-v5-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
279
- margin-right: var(--pf-v5-c-data-list__cell--MarginRight);
261
+ margin-inline-end: var(--pf-v5-c-data-list__cell--MarginRight);
280
262
  }
281
263
  .pf-v5-c-data-list.pf-m-grid-lg .pf-v5-c-data-list__cell + .pf-v5-c-data-list__cell {
282
264
  flex: 1;
283
265
  order: initial;
284
266
  }
285
267
  .pf-v5-c-data-list.pf-m-grid-lg .pf-v5-c-data-list__cell.pf-m-align-right {
286
- margin-left: auto;
268
+ margin-inline-start: auto;
287
269
  }
288
270
  .pf-v5-c-data-list.pf-m-grid-lg .pf-v5-c-data-list__cell.pf-m-no-fill {
289
271
  flex: none;
@@ -300,8 +282,6 @@
300
282
  .pf-v5-c-data-list.pf-m-grid-lg .pf-v5-c-data-list__cell.pf-m-flex-5 {
301
283
  flex-grow: 5;
302
284
  }
303
- }
304
- @media screen and (min-width: 992px) {
305
285
  .pf-v5-c-data-list.pf-m-grid-lg .pf-v5-c-data-list__expandable-content {
306
286
  max-height: initial;
307
287
  overflow-y: visible;
@@ -333,19 +313,17 @@
333
313
  display: flex;
334
314
  flex-grow: 1;
335
315
  flex-wrap: wrap;
336
- padding-bottom: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
316
+ padding-block-end: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
337
317
  }
338
- }
339
- @media screen and (min-width: 1200px) {
340
318
  .pf-v5-c-data-list.pf-m-grid-xl .pf-v5-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
341
- margin-right: var(--pf-v5-c-data-list__cell--MarginRight);
319
+ margin-inline-end: var(--pf-v5-c-data-list__cell--MarginRight);
342
320
  }
343
321
  .pf-v5-c-data-list.pf-m-grid-xl .pf-v5-c-data-list__cell + .pf-v5-c-data-list__cell {
344
322
  flex: 1;
345
323
  order: initial;
346
324
  }
347
325
  .pf-v5-c-data-list.pf-m-grid-xl .pf-v5-c-data-list__cell.pf-m-align-right {
348
- margin-left: auto;
326
+ margin-inline-start: auto;
349
327
  }
350
328
  .pf-v5-c-data-list.pf-m-grid-xl .pf-v5-c-data-list__cell.pf-m-no-fill {
351
329
  flex: none;
@@ -362,8 +340,6 @@
362
340
  .pf-v5-c-data-list.pf-m-grid-xl .pf-v5-c-data-list__cell.pf-m-flex-5 {
363
341
  flex-grow: 5;
364
342
  }
365
- }
366
- @media screen and (min-width: 1200px) {
367
343
  .pf-v5-c-data-list.pf-m-grid-xl .pf-v5-c-data-list__expandable-content {
368
344
  max-height: initial;
369
345
  overflow-y: visible;
@@ -395,19 +371,17 @@
395
371
  display: flex;
396
372
  flex-grow: 1;
397
373
  flex-wrap: wrap;
398
- padding-bottom: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
374
+ padding-block-end: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
399
375
  }
400
- }
401
- @media screen and (min-width: 1450px) {
402
376
  .pf-v5-c-data-list.pf-m-grid-2xl .pf-v5-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
403
- margin-right: var(--pf-v5-c-data-list__cell--MarginRight);
377
+ margin-inline-end: var(--pf-v5-c-data-list__cell--MarginRight);
404
378
  }
405
379
  .pf-v5-c-data-list.pf-m-grid-2xl .pf-v5-c-data-list__cell + .pf-v5-c-data-list__cell {
406
380
  flex: 1;
407
381
  order: initial;
408
382
  }
409
383
  .pf-v5-c-data-list.pf-m-grid-2xl .pf-v5-c-data-list__cell.pf-m-align-right {
410
- margin-left: auto;
384
+ margin-inline-start: auto;
411
385
  }
412
386
  .pf-v5-c-data-list.pf-m-grid-2xl .pf-v5-c-data-list__cell.pf-m-no-fill {
413
387
  flex: none;
@@ -424,8 +398,6 @@
424
398
  .pf-v5-c-data-list.pf-m-grid-2xl .pf-v5-c-data-list__cell.pf-m-flex-5 {
425
399
  flex-grow: 5;
426
400
  }
427
- }
428
- @media screen and (min-width: 1450px) {
429
401
  .pf-v5-c-data-list.pf-m-grid-2xl .pf-v5-c-data-list__expandable-content {
430
402
  max-height: initial;
431
403
  overflow-y: visible;