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

Sign up to get free protection for your applications and to get access to all the features.
Files changed (106) hide show
  1. package/CHANGELOG.md +4 -2
  2. package/css/components/AboutModalBox/about-modal-box.css +20 -13
  3. package/css/components/Accordion/accordion.css +30 -20
  4. package/css/components/ActionList/action-list.css +2 -2
  5. package/css/components/Alert/alert-group.css +7 -4
  6. package/css/components/Alert/alert.css +16 -13
  7. package/css/components/AppLauncher/app-launcher.css +32 -23
  8. package/css/components/BackToTop/back-to-top.css +2 -2
  9. package/css/components/Backdrop/backdrop.css +2 -2
  10. package/css/components/BackgroundImage/background-image.css +2 -2
  11. package/css/components/Badge/badge.css +2 -2
  12. package/css/components/Banner/banner.css +5 -2
  13. package/css/components/Breadcrumb/breadcrumb.css +6 -3
  14. package/css/components/Button/button.css +23 -17
  15. package/css/components/CalendarMonth/calendar-month.css +21 -15
  16. package/css/components/Card/card.css +21 -16
  17. package/css/components/Check/check.css +2 -2
  18. package/css/components/Chip/chip-group.css +6 -6
  19. package/css/components/Chip/chip.css +16 -9
  20. package/css/components/Chip/chip.d.ts +1 -0
  21. package/css/components/Chip/chip.js +1 -0
  22. package/css/components/Chip/chip.mjs +1 -0
  23. package/css/components/ClipboardCopy/clipboard-copy.css +16 -10
  24. package/css/components/CodeBlock/code-block.css +6 -3
  25. package/css/components/CodeEditor/code-editor.css +31 -22
  26. package/css/components/Content/content.css +33 -30
  27. package/css/components/ContextSelector/context-selector.css +41 -26
  28. package/css/components/DataList/data-list-grid.css +21 -49
  29. package/css/components/DataList/data-list.css +66 -84
  30. package/css/components/DatePicker/date-picker.css +8 -8
  31. package/css/components/DescriptionList/description-list.css +8 -5
  32. package/css/components/DragDrop/drag-drop.css +8 -8
  33. package/css/components/Drawer/drawer.css +75 -60
  34. package/css/components/Dropdown/dropdown.css +75 -66
  35. package/css/components/DualListSelector/dual-list-selector.css +20 -14
  36. package/css/components/EmptyState/empty-state.css +7 -4
  37. package/css/components/ExpandableSection/expandable-section.css +13 -10
  38. package/css/components/FileUpload/file-upload.css +9 -15
  39. package/css/components/Form/form.css +50 -50
  40. package/css/components/FormControl/form-control.css +21 -11
  41. package/css/components/HelperText/helper-text.css +1 -1
  42. package/css/components/Hint/hint.css +9 -6
  43. package/css/components/Icon/icon.css +1 -1
  44. package/css/components/InlineEdit/inline-edit.css +4 -4
  45. package/css/components/InputGroup/input-group.css +12 -6
  46. package/css/components/JumpLinks/jump-links.css +24 -24
  47. package/css/components/Label/label-group.css +13 -10
  48. package/css/components/Label/label.css +9 -9
  49. package/css/components/List/list.css +9 -9
  50. package/css/components/LogViewer/log-viewer.css +14 -14
  51. package/css/components/Login/login.css +36 -27
  52. package/css/components/Masthead/masthead.css +19 -22
  53. package/css/components/Menu/menu.css +69 -66
  54. package/css/components/MenuToggle/menu-toggle.css +41 -29
  55. package/css/components/ModalBox/modal-box.css +19 -19
  56. package/css/components/MultipleFileUpload/multiple-file-upload.css +11 -8
  57. package/css/components/Nav/nav.css +100 -93
  58. package/css/components/NotificationBadge/notification-badge.css +13 -7
  59. package/css/components/NotificationDrawer/notification-drawer.css +28 -19
  60. package/css/components/NumberInput/number-input.css +3 -3
  61. package/css/components/OptionsMenu/options-menu.css +43 -31
  62. package/css/components/OverflowMenu/overflow-menu.css +2 -2
  63. package/css/components/Page/page.css +119 -65
  64. package/css/components/Pagination/pagination.css +24 -18
  65. package/css/components/Panel/panel.css +13 -7
  66. package/css/components/Popover/popover.css +24 -21
  67. package/css/components/Progress/progress.css +7 -7
  68. package/css/components/ProgressStepper/progress-stepper.css +26 -20
  69. package/css/components/Radio/radio.css +4 -5
  70. package/css/components/Select/select.css +56 -47
  71. package/css/components/Sidebar/sidebar.css +11 -5
  72. package/css/components/SimpleList/simple-list.css +10 -4
  73. package/css/components/Skeleton/skeleton.css +2 -5
  74. package/css/components/SkipToContent/skip-to-content.css +3 -3
  75. package/css/components/Slider/slider.css +17 -20
  76. package/css/components/Switch/switch.css +5 -5
  77. package/css/components/TabContent/tab-content.css +4 -1
  78. package/css/components/Table/table-grid.css +256 -219
  79. package/css/components/Table/table-scrollable.css +2 -2
  80. package/css/components/Table/table-tree-view.css +107 -104
  81. package/css/components/Table/table.css +87 -69
  82. package/css/components/Tabs/tabs.css +66 -48
  83. package/css/components/TextInputGroup/text-input-group.css +15 -15
  84. package/css/components/Tile/tile.css +10 -10
  85. package/css/components/ToggleGroup/toggle-group.css +14 -11
  86. package/css/components/Toolbar/toolbar.css +44 -41
  87. package/css/components/Tooltip/tooltip.css +19 -16
  88. package/css/components/TreeView/tree-view.css +42 -27
  89. package/css/components/Wizard/wizard.css +47 -35
  90. package/css/docs/components/Button/examples/Button.css +2 -2
  91. package/css/docs/components/DragDrop/examples/DragDrop.css +2 -2
  92. package/css/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
  93. package/css/docs/components/LogViewer/examples/LogViewer.css +2 -2
  94. package/css/docs/components/ModalBox/examples/ModalBox.css +2 -2
  95. package/css/docs/components/Nav/examples/Navigation.css +2 -2
  96. package/css/docs/components/Popover/examples/Popover.css +2 -2
  97. package/css/docs/components/Select/deprecated/Select.css +3 -3
  98. package/css/docs/components/Table/examples/Table.css +2 -2
  99. package/css/docs/components/TextInputGroup/examples/TextInputGroup.css +1 -1
  100. package/css/docs/components/Tile/examples/Tile.css +1 -1
  101. package/css/docs/demos/Card/examples/Card.css +3 -3
  102. package/css/docs/utilities/BoxShadow/examples/box-shadow.css +5 -5
  103. package/css/layouts/Flex/flex.css +115 -43
  104. package/css/utilities/Accessibility/accessibility.css +12 -12
  105. package/css/utilities/Spacing/spacing.css +720 -960
  106. package/package.json +4 -8
package/css/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;