@patternfly/react-table 4.61.17 → 4.61.21

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 (18) hide show
  1. package/CHANGELOG.md +41 -0
  2. package/dist/esm/components/TableComposable/TableComposable.d.ts +1 -1
  3. package/dist/esm/components/TableComposable/TableComposable.d.ts.map +1 -1
  4. package/dist/esm/components/TableComposable/TableComposable.js +4 -12
  5. package/dist/esm/components/TableComposable/TableComposable.js.map +1 -1
  6. package/dist/js/components/TableComposable/TableComposable.d.ts +1 -1
  7. package/dist/js/components/TableComposable/TableComposable.d.ts.map +1 -1
  8. package/dist/js/components/TableComposable/TableComposable.js +4 -12
  9. package/dist/js/components/TableComposable/TableComposable.js.map +1 -1
  10. package/dist/umd/react-table.css +76 -8
  11. package/dist/umd/react-table.js +5 -13
  12. package/dist/umd/react-table.min.css +759 -691
  13. package/dist/umd/react-table.min.js +6 -6
  14. package/package.json +6 -6
  15. package/src/components/TableComposable/TableComposable.tsx +2 -9
  16. package/src/components/TableComposable/examples/ComposableTableNestedExpandable.tsx +1 -5
  17. package/src/components/TableComposable/examples/ComposableTableNestedHeaders.tsx +1 -5
  18. package/src/demos/Table.md +2 -2
package/dist/umd/react-table.min.css CHANGED
@@ -1297,6 +1297,8 @@
1297
1297
  --pf-c-table__tree-view-main--nested-indent--base: calc(var(--pf-c-table__tree-view-main--indent--base) - var(--pf-global--spacer--md));
1298
1298
  --pf-c-table__tree-view-main--PaddingLeft: var(--pf-c-table__tree-view-main--indent--base);
1299
1299
  --pf-c-table__tree-view-main--MarginLeft: calc(var(--pf-c-table--cell--PaddingLeft) * -1);
1300
+ --pf-c-table__tree-view-main--c-table__check--PaddingRight: var(--pf-global--spacer--sm);
1301
+ --pf-c-table__tree-view-main--c-table__check--PaddingLeft: var(--pf-global--spacer--sm);
1300
1302
  --pf-c-table__tree-view-main--c-table__check--MarginRight: var(--pf-global--spacer--sm);
1301
1303
  --pf-c-table__tree-view-icon--MinWidth: var(--pf-global--FontSize--md);
1302
1304
  --pf-c-table__tree-view-icon--MarginRight: var(--pf-global--spacer--sm);
@@ -1371,6 +1373,12 @@
1371
1373
  margin-right: var(--pf-c-table__tree-view-main--c-table__check--MarginRight);
1372
1374
  }
1373
1375
 
1376
+ .pf-c-table__tree-view-main > .pf-c-table__check label {
1377
+ padding-right: var(--pf-c-table__tree-view-main--c-table__check--PaddingRight);
1378
+ padding-left: var(--pf-c-table__tree-view-main--c-table__check--PaddingLeft);
1379
+ margin: 0 calc(var(--pf-c-table__tree-view-main--c-table__check--MarginRight) * -1) 0 0;
1380
+ }
1381
+
1374
1382
  .pf-c-table__tree-view-text {
1375
1383
  display: flex;
1376
1384
  }
@@ -9451,6 +9459,86 @@ button.pf-c-breadcrumb__link {
9451
9459
  pointer-events: none;
9452
9460
  }
9453
9461
 
9462
+ .pf-c-data-list {
9463
+ --pf-global--Color--100: var(--pf-global--Color--dark-100);
9464
+ --pf-global--Color--200: var(--pf-global--Color--dark-200);
9465
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
9466
+ --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
9467
+ --pf-global--link--Color: var(--pf-global--link--Color--dark);
9468
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
9469
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
9470
+ }
9471
+
9472
+ .pf-c-data-list__item-action {
9473
+ --pf-hidden-visible--visible--Visibility: visible;
9474
+ --pf-hidden-visible--hidden--Display: none;
9475
+ --pf-hidden-visible--hidden--Visibility: hidden;
9476
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
9477
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
9478
+ display: var(--pf-hidden-visible--Display);
9479
+ visibility: var(--pf-hidden-visible--Visibility);
9480
+ }
9481
+
9482
+ .pf-m-hidden.pf-c-data-list__item-action {
9483
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
9484
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
9485
+ }
9486
+
9487
+ @media screen and (min-width: 576px) {
9488
+ .pf-m-hidden-on-sm.pf-c-data-list__item-action {
9489
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
9490
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
9491
+ }
9492
+
9493
+ .pf-m-visible-on-sm.pf-c-data-list__item-action {
9494
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
9495
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
9496
+ }
9497
+ }
9498
+ @media screen and (min-width: 768px) {
9499
+ .pf-m-hidden-on-md.pf-c-data-list__item-action {
9500
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
9501
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
9502
+ }
9503
+
9504
+ .pf-m-visible-on-md.pf-c-data-list__item-action {
9505
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
9506
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
9507
+ }
9508
+ }
9509
+ @media screen and (min-width: 992px) {
9510
+ .pf-m-hidden-on-lg.pf-c-data-list__item-action {
9511
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
9512
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
9513
+ }
9514
+
9515
+ .pf-m-visible-on-lg.pf-c-data-list__item-action {
9516
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
9517
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
9518
+ }
9519
+ }
9520
+ @media screen and (min-width: 1200px) {
9521
+ .pf-m-hidden-on-xl.pf-c-data-list__item-action {
9522
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
9523
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
9524
+ }
9525
+
9526
+ .pf-m-visible-on-xl.pf-c-data-list__item-action {
9527
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
9528
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
9529
+ }
9530
+ }
9531
+ @media screen and (min-width: 1450px) {
9532
+ .pf-m-hidden-on-2xl.pf-c-data-list__item-action {
9533
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
9534
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
9535
+ }
9536
+
9537
+ .pf-m-visible-on-2xl.pf-c-data-list__item-action {
9538
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
9539
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
9540
+ }
9541
+ }
9454
9542
  @media screen and (min-width: 768px) {
9455
9543
  .pf-c-data-list:not([class*=pf-m-grid]) {
9456
9544
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
@@ -9928,223 +10016,442 @@ button.pf-c-breadcrumb__link {
9928
10016
  }
9929
10017
  }
9930
10018
  .pf-c-data-list {
9931
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
9932
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
9933
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
9934
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
9935
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
9936
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
9937
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
9938
- }
9939
-
9940
- .pf-c-data-list__item-action {
9941
- --pf-hidden-visible--visible--Visibility: visible;
9942
- --pf-hidden-visible--hidden--Display: none;
9943
- --pf-hidden-visible--hidden--Visibility: hidden;
9944
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
9945
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
9946
- display: var(--pf-hidden-visible--Display);
9947
- visibility: var(--pf-hidden-visible--Visibility);
9948
- }
9949
-
9950
- .pf-m-hidden.pf-c-data-list__item-action {
9951
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
9952
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
10019
+ --pf-c-data-list--FontSize: 1em;
10020
+ --pf-c-data-list--LineHeight: var(--pf-global--LineHeight--md);
10021
+ --pf-c-data-list--BorderTopColor: var(--pf-global--BorderColor--300);
10022
+ --pf-c-data-list--BorderTopWidth: var(--pf-global--spacer--sm);
10023
+ --pf-c-data-list--sm--BorderTopWidth: var(--pf-global--BorderWidth--sm);
10024
+ --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);
10025
+ --pf-c-data-list__item--BackgroundColor: var(--pf-global--BackgroundColor--100);
10026
+ --pf-c-data-list__item--m-selected--ZIndex: var(--pf-global--ZIndex--xs);
10027
+ --pf-c-data-list__item--m-expanded--before--BackgroundColor: var(--pf-global--active-color--100);
10028
+ --pf-c-data-list__item--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
10029
+ --pf-c-data-list__item--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
10030
+ --pf-c-data-list__item--m-selectable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
10031
+ --pf-c-data-list__item--m-selectable--hover--ZIndex: calc(var(--pf-c-data-list__item--m-selected--ZIndex) + 1);
10032
+ --pf-c-data-list__item--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
10033
+ --pf-c-data-list__item--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
10034
+ --pf-c-data-list__item--m-selectable--active--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
10035
+ --pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor: var(--pf-global--active-color--300);
10036
+ --pf-c-data-list__item--BorderBottomColor: var(--pf-global--BorderColor--300);
10037
+ --pf-c-data-list__item--BorderBottomWidth: 0.5rem;
10038
+ --pf-c-data-list__item--m-selectable--hover--item--BorderTopColor: var(--pf-c-data-list__item--BorderBottomColor);
10039
+ --pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth: var(--pf-c-data-list__item--BorderBottomWidth);
10040
+ --pf-c-data-list__item--sm--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
10041
+ --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
10042
+ --pf-c-data-list__item--before--BackgroundColor: transparent;
10043
+ --pf-c-data-list__item--before--Width: var(--pf-global--BorderWidth--lg);
10044
+ --pf-c-data-list__item--before--Transition: var(--pf-global--Transition);
10045
+ --pf-c-data-list__item--before--Top: 0;
10046
+ --pf-c-data-list__item--before--sm--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
10047
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-global--spacer--md);
10048
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-global--spacer--md);
10049
+ --pf-c-data-list__item-row--xl--PaddingRight: var(--pf-global--spacer--lg);
10050
+ --pf-c-data-list__item-row--xl--PaddingLeft: var(--pf-global--spacer--lg);
10051
+ --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-global--spacer--lg);
10052
+ --pf-c-data-list__cell--PaddingTop: var(--pf-global--spacer--lg);
10053
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-global--spacer--lg);
10054
+ --pf-c-data-list__cell--MarginRight: var(--pf-global--spacer--xl);
10055
+ --pf-c-data-list__cell--md--PaddingBottom: 0;
10056
+ --pf-c-data-list__cell--m-icon--MarginRight: var(--pf-global--spacer--md);
10057
+ --pf-c-data-list__cell--cell--PaddingTop: 0;
10058
+ --pf-c-data-list__cell--cell--md--PaddingTop: var(--pf-global--spacer--lg);
10059
+ --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--lg);
10060
+ --pf-c-data-list--cell--MinWidth: initial;
10061
+ --pf-c-data-list--cell--Overflow: visible;
10062
+ --pf-c-data-list--cell--TextOverflow: clip;
10063
+ --pf-c-data-list--cell--WhiteSpace: normal;
10064
+ --pf-c-data-list--cell--WordBreak: normal;
10065
+ --pf-c-data-list--cell--m-truncate--MinWidth: 5ch;
10066
+ --pf-c-data-list__toggle--MarginLeft: calc(var(--pf-global--spacer--sm) * -1);
10067
+ --pf-c-data-list__toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
10068
+ --pf-c-data-list__toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
10069
+ --pf-c-data-list__toggle-icon--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
10070
+ --pf-c-data-list__toggle-icon--Transition: .2s ease-in 0s;
10071
+ --pf-c-data-list__toggle-icon--Rotate: 0;
10072
+ --pf-c-data-list__item--m-expanded__toggle-icon--Rotate: 90deg;
10073
+ --pf-c-data-list__item-draggable-button--PaddingLeft: var(--pf-global--spacer--md);
10074
+ --pf-c-data-list__item-draggable-button--PaddingRight: var(--pf-global--spacer--md);
10075
+ --pf-c-data-list__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--lg) * -1);
10076
+ --pf-c-data-list__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--lg) * -1);
10077
+ --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-global--spacer--lg);
10078
+ --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-global--spacer--lg);
10079
+ --pf-c-data-list__item-draggable-button--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
10080
+ --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-global--icon--Color--light);
10081
+ --pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color: var(--pf-global--disabled-color--200);
10082
+ --pf-c-data-list__item-draggable-button--hover__draggable-icon--Color: var(--pf-global--icon--Color--dark);
10083
+ --pf-c-data-list__item-draggable-button--focus__draggable-icon--Color: var(--pf-global--icon--Color--dark);
10084
+ --pf-c-data-list__item--m-ghost-row--after--BackgroundColor: var(--pf-global--BackgroundColor--100);
10085
+ --pf-c-data-list__item--m-ghost-row--after--Opacity: .6;
10086
+ --pf-c-data-list__item-control--PaddingTop: var(--pf-global--spacer--lg);
10087
+ --pf-c-data-list__item-control--PaddingBottom: var(--pf-global--spacer--lg);
10088
+ --pf-c-data-list__item-control--MarginRight: var(--pf-global--spacer--md);
10089
+ --pf-c-data-list__item-control--md--MarginRight: var(--pf-global--spacer--xl);
10090
+ --pf-c-data-list__item-control--not-last-child--MarginRight: var(--pf-global--spacer--md);
10091
+ --pf-c-data-list__check--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
10092
+ --pf-c-data-list__check--MarginTop: -0.0625rem;
10093
+ --pf-c-data-list__item-action--Display: flex;
10094
+ --pf-c-data-list__item-action--PaddingTop: var(--pf-global--spacer--lg);
10095
+ --pf-c-data-list__item-action--PaddingBottom: var(--pf-global--spacer--lg);
10096
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-global--spacer--md);
10097
+ --pf-c-data-list__item-action--md--MarginLeft: var(--pf-global--spacer--xl);
10098
+ --pf-c-data-list__item-action--not-last-child--MarginRight: var(--pf-global--spacer--md);
10099
+ --pf-c-data-list__item-action__action--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
10100
+ --pf-c-data-list__action--MarginTop: var(--pf-c-data-list__item-action__action--MarginTop);
10101
+ --pf-c-data-list__item-action__action--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
10102
+ --pf-c-data-list__expandable-content--BorderTopWidth: var(--pf-global--BorderWidth--sm);
10103
+ --pf-c-data-list__expandable-content--BorderTopColor: var(--pf-global--BorderColor--100);
10104
+ --pf-c-data-list__expandable-content--MarginRight: calc(var(--pf-c-data-list__expandable-content-body--PaddingRight) * -1);
10105
+ --pf-c-data-list__expandable-content--MarginLeft: calc(var(--pf-c-data-list__expandable-content-body--PaddingLeft) * -1);
10106
+ --pf-c-data-list__expandable-content--MaxHeight: 37.5rem;
10107
+ --pf-c-data-list__expandable-content--before--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
10108
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-global--spacer--md);
10109
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-global--spacer--md);
10110
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-global--spacer--md);
10111
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-global--spacer--md);
10112
+ --pf-c-data-list__expandable-content-body--md--PaddingTop: var(--pf-global--spacer--lg);
10113
+ --pf-c-data-list__expandable-content-body--xl--PaddingRight: var(--pf-global--spacer--lg);
10114
+ --pf-c-data-list__expandable-content-body--md--PaddingBottom: var(--pf-global--spacer--lg);
10115
+ --pf-c-data-list__expandable-content-body--xl--PaddingLeft: var(--pf-global--spacer--lg);
10116
+ --pf-c-data-list--m-compact--FontSize: var(--pf-global--FontSize--sm);
10117
+ --pf-c-data-list--m-compact--LineHeight: var(--pf-global--LineHeight--sm);
10118
+ --pf-c-data-list--m-compact__check--FontSize: var(--pf-global--FontSize--md);
10119
+ --pf-c-data-list--m-compact__cell--PaddingTop: var(--pf-global--spacer--sm);
10120
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-global--spacer--sm);
10121
+ --pf-c-data-list--m-compact__cell--md--PaddingBottom: 0;
10122
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: 0;
10123
+ --pf-c-data-list--m-compact__cell-cell--md--PaddingTop: var(--pf-global--spacer--sm);
10124
+ --pf-c-data-list--m-compact__cell--cell--MarginRight: var(--pf-global--spacer--md);
10125
+ --pf-c-data-list--m-compact__item-control--PaddingTop: var(--pf-global--spacer--sm);
10126
+ --pf-c-data-list--m-compact__item-control--PaddingBottom: var(--pf-global--spacer--sm);
10127
+ --pf-c-data-list--m-compact__item-control--MarginRight: var(--pf-global--spacer--md);
10128
+ --pf-c-data-list--m-compact__item-action--PaddingTop: var(--pf-global--spacer--sm);
10129
+ --pf-c-data-list--m-compact__item-action--PaddingBottom: var(--pf-global--spacer--sm);
10130
+ --pf-c-data-list--m-compact__item-action--MarginLeft: var(--pf-global--spacer--md);
10131
+ --pf-c-data-list--m-compact__item-action__action--MarginTop: calc(var(--pf-c-data-list--m-compact__item-action--PaddingTop) * -1);
10132
+ --pf-c-data-list--m-compact__item-action__action--MarginBottom: calc(var(--pf-c-data-list--m-compact__item-action--PaddingBottom) * -1);
10133
+ --pf-c-data-list--m-compact__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
10134
+ --pf-c-data-list--m-compact__item-content--PaddingBottom: var(--pf-global--spacer--sm);
10135
+ --pf-c-data-list--m-compact__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
10136
+ --pf-c-data-list--m-compact__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--sm) * -1);
10137
+ --pf-c-data-list--m-compact__item-draggable-button--PaddingTop: var(--pf-global--spacer--sm);
10138
+ --pf-c-data-list--m-compact__item-draggable-button--PaddingBottom: var(--pf-global--spacer--sm);
10139
+ --pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--sm);
10140
+ color: var(--pf-global--Color--100);
10141
+ font-size: var(--pf-c-data-list--FontSize);
10142
+ line-height: var(--pf-c-data-list--LineHeight);
10143
+ overflow-wrap: break-word;
10144
+ list-style-type: disc;
10145
+ border-top: var(--pf-c-data-list--BorderTopWidth) solid var(--pf-c-data-list--BorderTopColor);
9953
10146
  }
9954
10147
 
9955
10148
  @media screen and (min-width: 576px) {
9956
- .pf-m-hidden-on-sm.pf-c-data-list__item-action {
9957
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
9958
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
9959
- }
9960
-
9961
- .pf-m-visible-on-sm.pf-c-data-list__item-action {
9962
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
9963
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
10149
+ .pf-c-data-list {
10150
+ --pf-c-data-list--BorderTopColor: var(--pf-c-data-list--sm--BorderTopColor);
10151
+ --pf-c-data-list--BorderTopWidth: var(--pf-c-data-list--sm--BorderTopWidth);
9964
10152
  }
9965
10153
  }
9966
- @media screen and (min-width: 768px) {
9967
- .pf-m-hidden-on-md.pf-c-data-list__item-action {
9968
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
9969
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
9970
- }
9971
-
9972
- .pf-m-visible-on-md.pf-c-data-list__item-action {
9973
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
9974
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
10154
+ @media screen and (min-width: 576px) {
10155
+ .pf-c-data-list {
10156
+ --pf-c-data-list__item--BorderBottomWidth: var(--pf-c-data-list__item--sm--BorderBottomWidth);
10157
+ --pf-c-data-list__item--BorderBottomColor: var(--pf-c-data-list__item--sm--BorderBottomColor);
9975
10158
  }
9976
10159
  }
9977
- @media screen and (min-width: 992px) {
9978
- .pf-m-hidden-on-lg.pf-c-data-list__item-action {
9979
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
9980
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
9981
- }
9982
-
9983
- .pf-m-visible-on-lg.pf-c-data-list__item-action {
9984
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
9985
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
10160
+ @media (min-width: 576px) {
10161
+ .pf-c-data-list {
10162
+ --pf-c-data-list__item--before--Top: var(--pf-c-data-list__item--before--sm--Top);
9986
10163
  }
9987
10164
  }
9988
- @media screen and (min-width: 1200px) {
9989
- .pf-m-hidden-on-xl.pf-c-data-list__item-action {
9990
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
9991
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
9992
- }
10165
+ .pf-c-data-list.pf-m-compact {
10166
+ --pf-c-data-list__check--FontSize: var(--pf-c-data-list--m-compact__check--FontSize);
10167
+ --pf-c-data-list__action--MarginTop: var(--pf-c-data-list--m-compact__action--MarginTop);
10168
+ --pf-c-data-list--FontSize: var(--pf-c-data-list--m-compact--FontSize);
10169
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list--m-compact__item-action--MarginLeft);
10170
+ --pf-c-data-list__item-action--PaddingTop: var(--pf-c-data-list--m-compact__item-action--PaddingTop);
10171
+ --pf-c-data-list__item-action--PaddingBottom: var(--pf-c-data-list--m-compact__item-action--PaddingBottom);
10172
+ --pf-c-data-list__item-action__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
10173
+ --pf-c-data-list__item-action__action--MarginBottom: var(--pf-c-data-list--m-compact__item-action__action--MarginBottom);
10174
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list--m-compact__item-control--MarginRight);
10175
+ --pf-c-data-list__item-control--PaddingTop: var(--pf-c-data-list--m-compact__item-control--PaddingTop);
10176
+ --pf-c-data-list__item-control--PaddingBottom: var(--pf-c-data-list--m-compact__item-control--PaddingBottom);
10177
+ --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-c-data-list--m-compact__item-content--PaddingBottom);
10178
+ --pf-c-data-list__item-draggable-button--MarginTop: var(--pf-c-data-list--m-compact__item-draggable-button--MarginTop);
10179
+ --pf-c-data-list__item-draggable-button--MarginBottom: var(--pf-c-data-list--m-compact__item-draggable-button--MarginBottom);
10180
+ --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingTop);
10181
+ --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingBottom);
10182
+ --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop);
10183
+ font-size: var(--pf-c-data-list--m-compact--FontSize);
10184
+ }
9993
10185
 
9994
- .pf-m-visible-on-xl.pf-c-data-list__item-action {
9995
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
9996
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
9997
- }
10186
+ .pf-c-data-list.pf-m-compact .pf-c-data-list__cell {
10187
+ --pf-c-data-list__cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--PaddingTop);
10188
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--PaddingBottom);
10189
+ --pf-c-data-list__cell--MarginRight: var(--pf-c-data-list--m-compact__cell--cell--MarginRight);
10190
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--PaddingTop);
9998
10191
  }
9999
- @media screen and (min-width: 1450px) {
10000
- .pf-m-hidden-on-2xl.pf-c-data-list__item-action {
10001
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
10002
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
10003
- }
10004
10192
 
10005
- .pf-m-visible-on-2xl.pf-c-data-list__item-action {
10006
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
10007
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
10008
- }
10193
+ .pf-c-data-list.pf-m-compact .pf-c-data-list__check {
10194
+ font-size: var(--pf-c-data-list--m-compact__check--FontSize);
10009
10195
  }
10010
- @media screen and (min-width: 768px) {
10011
- .pf-c-data-list:not([class*=pf-m-grid]) {
10012
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
10013
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
10014
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
10015
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
10016
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
10017
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
10018
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
10019
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
10020
- }
10196
+
10197
+ .pf-c-data-list.pf-m-drag-over {
10198
+ overflow-anchor: none;
10021
10199
  }
10022
- @media screen and (min-width: 768px) and (min-width: 1200px) {
10023
- .pf-c-data-list:not([class*=pf-m-grid]) {
10024
- --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
10025
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
10026
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
10027
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
10028
- }
10200
+
10201
+ .pf-c-data-list.pf-m-truncate,
10202
+ .pf-c-data-list__item-row.pf-m-truncate,
10203
+ .pf-c-data-list__cell.pf-m-truncate,
10204
+ .pf-c-data-list__text.pf-m-truncate {
10205
+ --pf-c-data-list--cell--MinWidth: var(--pf-c-data-list--cell--m-truncate--MinWidth);
10206
+ --pf-c-data-list--cell--Overflow: hidden;
10207
+ --pf-c-data-list--cell--TextOverflow: ellipsis;
10208
+ --pf-c-data-list--cell--WhiteSpace: nowrap;
10029
10209
  }
10030
- @media screen and (min-width: 768px) {
10031
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__item-content {
10032
- display: flex;
10033
- flex-wrap: wrap;
10034
- flex-grow: 1;
10035
- padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
10036
- }
10210
+
10211
+ .pf-c-data-list.pf-m-break-word,
10212
+ .pf-c-data-list__item-row.pf-m-break-word,
10213
+ .pf-c-data-list__cell.pf-m-break-word,
10214
+ .pf-c-data-list__text.pf-m-break-word {
10215
+ --pf-c-data-list--cell--WordBreak: break-word;
10037
10216
  }
10038
- @media screen and (min-width: 768px) {
10039
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
10040
- margin-right: var(--pf-c-data-list__cell--MarginRight);
10041
- }
10042
10217
 
10043
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell + .pf-c-data-list__cell {
10044
- flex: 1;
10045
- order: initial;
10046
- }
10218
+ .pf-c-data-list.pf-m-nowrap,
10219
+ .pf-c-data-list__item-row.pf-m-nowrap,
10220
+ .pf-c-data-list__cell.pf-m-nowrap,
10221
+ .pf-c-data-list__text.pf-m-nowrap {
10222
+ --pf-c-data-list--cell--WhiteSpace: nowrap;
10223
+ }
10047
10224
 
10048
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-align-right {
10049
- margin-left: auto;
10050
- }
10225
+ .pf-c-data-list__item {
10226
+ position: relative;
10227
+ display: flex;
10228
+ flex-direction: column;
10229
+ background-color: var(--pf-c-data-list__item--BackgroundColor);
10230
+ border-bottom: var(--pf-c-data-list__item--BorderBottomWidth) solid var(--pf-c-data-list__item--BorderBottomColor);
10231
+ }
10051
10232
 
10052
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-no-fill {
10053
- flex: none;
10054
- }
10233
+ .pf-c-data-list__item::before {
10234
+ position: absolute;
10235
+ top: var(--pf-c-data-list__item--before--Top);
10236
+ bottom: 0;
10237
+ left: 0;
10238
+ width: var(--pf-c-data-list__item--before--Width);
10239
+ content: "";
10240
+ background-color: var(--pf-c-data-list__item--before--BackgroundColor);
10241
+ transition: var(--pf-c-data-list__item--before--Transition);
10242
+ }
10055
10243
 
10056
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-2 {
10057
- flex-grow: 2;
10058
- }
10244
+ .pf-c-data-list__item.pf-m-selectable {
10245
+ cursor: pointer;
10246
+ outline-offset: var(--pf-c-data-list__item--m-selectable--OutlineOffset);
10247
+ }
10059
10248
 
10060
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-3 {
10061
- flex-grow: 3;
10062
- }
10249
+ .pf-c-data-list__item.pf-m-selectable:hover, .pf-c-data-list__item.pf-m-selectable:focus {
10250
+ position: relative;
10251
+ z-index: var(--pf-c-data-list__item--m-selectable--hover--ZIndex);
10252
+ }
10063
10253
 
10064
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-4 {
10065
- flex-grow: 4;
10066
- }
10254
+ .pf-c-data-list__item.pf-m-selectable:hover:not(.pf-m-selected):not(:last-child), .pf-c-data-list__item.pf-m-selectable:focus:not(.pf-m-selected):not(:last-child) {
10255
+ --pf-c-data-list__item--BorderBottomWidth: 0;
10256
+ }
10067
10257
 
10068
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-5 {
10069
- flex-grow: 5;
10070
- }
10258
+ .pf-c-data-list__item.pf-m-selectable:hover:not(.pf-m-selected):not(:last-child) + .pf-c-data-list__item, .pf-c-data-list__item.pf-m-selectable:focus:not(.pf-m-selected):not(:last-child) + .pf-c-data-list__item {
10259
+ border-top: var(--pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth) solid var(--pf-c-data-list__item--m-selectable--hover--item--BorderTopColor);
10071
10260
  }
10072
- @media screen and (min-width: 768px) {
10073
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__expandable-content {
10074
- max-height: initial;
10075
- overflow-y: visible;
10076
- }
10261
+
10262
+ .pf-c-data-list__item.pf-m-selectable:hover {
10263
+ box-shadow: var(--pf-c-data-list__item--m-selectable--hover--BoxShadow);
10077
10264
  }
10078
- @media screen and (min-width: 0) {
10079
- .pf-c-data-list.pf-m-grid-none {
10080
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
10081
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
10082
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
10083
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
10084
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
10085
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
10086
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
10087
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
10088
- }
10265
+
10266
+ .pf-c-data-list__item.pf-m-selectable:focus {
10267
+ box-shadow: var(--pf-c-data-list__item--m-selectable--focus--BoxShadow);
10089
10268
  }
10090
- @media screen and (min-width: 0) and (min-width: 1200px) {
10091
- .pf-c-data-list.pf-m-grid-none {
10092
- --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
10093
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
10094
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
10095
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
10096
- }
10269
+
10270
+ .pf-c-data-list__item.pf-m-selectable:active {
10271
+ box-shadow: var(--pf-c-data-list__item--m-selectable--active--BoxShadow);
10097
10272
  }
10098
- @media screen and (min-width: 0) {
10099
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__item-content {
10100
- display: flex;
10101
- flex-wrap: wrap;
10102
- flex-grow: 1;
10103
- padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
10104
- }
10273
+
10274
+ .pf-c-data-list__item.pf-m-selected {
10275
+ --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-selected--before--BackgroundColor);
10276
+ position: relative;
10277
+ z-index: var(--pf-c-data-list__item--m-selected--ZIndex);
10278
+ box-shadow: var(--pf-c-data-list__item--m-selected--BoxShadow);
10105
10279
  }
10106
- @media screen and (min-width: 0) {
10107
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
10108
- margin-right: var(--pf-c-data-list__cell--MarginRight);
10109
- }
10110
10280
 
10111
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell + .pf-c-data-list__cell {
10112
- flex: 1;
10113
- order: initial;
10114
- }
10281
+ .pf-c-data-list__item.pf-m-ghost-row::after {
10282
+ position: absolute;
10283
+ top: 0;
10284
+ right: 0;
10285
+ bottom: 0;
10286
+ left: 0;
10287
+ content: "";
10288
+ background-color: var(--pf-c-data-list__item--m-ghost-row--after--BackgroundColor);
10289
+ opacity: var(--pf-c-data-list__item--m-ghost-row--after--Opacity);
10290
+ }
10115
10291
 
10116
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-align-right {
10117
- margin-left: auto;
10118
- }
10292
+ .pf-c-data-list__item.pf-m-expanded {
10293
+ --pf-c-data-list__toggle-icon--Rotate: var(--pf-c-data-list__item--m-expanded__toggle-icon--Rotate);
10294
+ --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--before--BackgroundColor);
10295
+ }
10119
10296
 
10120
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-no-fill {
10121
- flex: none;
10122
- }
10297
+ .pf-c-data-list__item.pf-m-expanded.pf-m-selectable:not(.pf-m-selected) {
10298
+ --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor);
10299
+ }
10123
10300
 
10124
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-2 {
10125
- flex-grow: 2;
10126
- }
10301
+ .pf-c-data-list__item-row {
10302
+ display: flex;
10303
+ flex-wrap: nowrap;
10304
+ padding-right: var(--pf-c-data-list__item-row--PaddingRight);
10305
+ padding-left: var(--pf-c-data-list__item-row--PaddingLeft);
10306
+ }
10127
10307
 
10128
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-3 {
10129
- flex-grow: 3;
10130
- }
10308
+ .pf-c-data-list__item-control {
10309
+ display: flex;
10310
+ flex-wrap: nowrap;
10311
+ padding-top: var(--pf-c-data-list__item-control--PaddingTop);
10312
+ padding-bottom: var(--pf-c-data-list__item-control--PaddingBottom);
10313
+ margin-right: var(--pf-c-data-list__item-control--MarginRight);
10314
+ }
10131
10315
 
10132
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-4 {
10133
- flex-grow: 4;
10134
- }
10316
+ .pf-c-data-list__item-control > *:not(:last-child) {
10317
+ margin-right: var(--pf-c-data-list__item-control--not-last-child--MarginRight);
10318
+ }
10135
10319
 
10136
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-5 {
10137
- flex-grow: 5;
10138
- }
10320
+ .pf-c-data-list__check {
10321
+ display: flex;
10322
+ align-items: center;
10323
+ align-self: flex-start;
10324
+ height: var(--pf-c-data-list__check--Height);
10325
+ margin-top: var(--pf-c-data-list__check--MarginTop);
10139
10326
  }
10140
- @media screen and (min-width: 0) {
10141
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__expandable-content {
10142
- max-height: initial;
10143
- overflow-y: visible;
10144
- }
10327
+
10328
+ .pf-c-data-list__check > input {
10329
+ cursor: pointer;
10145
10330
  }
10146
- @media screen and (min-width: 576px) {
10147
- .pf-c-data-list.pf-m-grid-sm {
10331
+
10332
+ .pf-c-data-list__item-draggable-button {
10333
+ display: flex;
10334
+ flex-direction: column;
10335
+ padding: var(--pf-c-data-list__item-draggable-button--PaddingTop) var(--pf-c-data-list__item-draggable-button--PaddingRight) var(--pf-c-data-list__item-draggable-button--PaddingBottom) var(--pf-c-data-list__item-draggable-button--PaddingLeft);
10336
+ margin: var(--pf-c-data-list__item-draggable-button--MarginTop) 0 var(--pf-c-data-list__item-draggable-button--MarginBottom) var(--pf-c-data-list__item-draggable-button--MarginLeft);
10337
+ border: 0;
10338
+ }
10339
+
10340
+ .pf-c-data-list__item-draggable-button:hover {
10341
+ --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--hover__draggable-icon--Color);
10342
+ cursor: grab;
10343
+ }
10344
+
10345
+ .pf-c-data-list__item-draggable-button:focus {
10346
+ --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--focus__draggable-icon--Color);
10347
+ }
10348
+
10349
+ .pf-c-data-list__item-draggable-button:active {
10350
+ cursor: grabbing;
10351
+ }
10352
+
10353
+ .pf-c-data-list__item-draggable-button.pf-m-disabled {
10354
+ --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color);
10355
+ pointer-events: none;
10356
+ }
10357
+
10358
+ .pf-c-data-list__item-draggable-button .pf-c-data-list__item-draggable-icon {
10359
+ color: var(--pf-c-data-list__item-draggable-button-icon--Color);
10360
+ }
10361
+
10362
+ .pf-c-data-list__item-action {
10363
+ --pf-hidden-visible--visible--Display: var(--pf-c-data-list__item-action--Display);
10364
+ align-items: flex-start;
10365
+ align-content: flex-start;
10366
+ padding-top: var(--pf-c-data-list__item-action--PaddingTop);
10367
+ padding-bottom: var(--pf-c-data-list__item-action--PaddingBottom);
10368
+ margin-left: var(--pf-c-data-list__item-action--MarginLeft);
10369
+ }
10370
+
10371
+ .pf-c-data-list__item-action > *:not(:last-child) {
10372
+ margin-right: var(--pf-c-data-list__item-action--not-last-child--MarginRight);
10373
+ }
10374
+
10375
+ .pf-c-data-list__item-action .pf-c-data-list__action {
10376
+ margin-top: var(--pf-c-data-list__action--MarginTop);
10377
+ margin-bottom: var(--pf-c-data-list__item-action__action--MarginBottom);
10378
+ }
10379
+
10380
+ .pf-c-data-list__toggle {
10381
+ margin: var(--pf-c-data-list__toggle--MarginTop) 0 var(--pf-c-data-list__toggle--MarginBottom) var(--pf-c-data-list__toggle--MarginLeft);
10382
+ }
10383
+
10384
+ .pf-c-data-list__toggle-icon {
10385
+ height: var(--pf-c-data-list__toggle-icon--Height);
10386
+ pointer-events: none;
10387
+ transition: var(--pf-c-data-list__toggle-icon--Transition);
10388
+ transform: rotate(var(--pf-c-data-list__toggle-icon--Rotate));
10389
+ }
10390
+
10391
+ .pf-c-data-list__item-content {
10392
+ display: grid;
10393
+ width: 100%;
10394
+ grid-template-columns: auto 1fr;
10395
+ }
10396
+
10397
+ .pf-c-data-list__cell {
10398
+ flex: 1;
10399
+ grid-column: 1/-1;
10400
+ padding-top: var(--pf-c-data-list__cell--PaddingTop);
10401
+ padding-bottom: var(--pf-c-data-list__cell--PaddingBottom);
10402
+ }
10403
+
10404
+ .pf-c-data-list__cell + .pf-c-data-list__cell {
10405
+ flex: 1 0 100%;
10406
+ order: 1;
10407
+ padding-top: var(--pf-c-data-list__cell--cell--PaddingTop);
10408
+ }
10409
+
10410
+ .pf-c-data-list__cell.pf-m-icon {
10411
+ flex-grow: 0;
10412
+ margin-right: var(--pf-c-data-list__cell--m-icon--MarginRight);
10413
+ grid-column: 1/2;
10414
+ }
10415
+
10416
+ .pf-c-data-list__cell.pf-m-icon + .pf-c-data-list__cell {
10417
+ grid-column: 2/3;
10418
+ padding-top: var(--pf-c-data-list__cell--m-icon--cell--PaddingTop);
10419
+ }
10420
+
10421
+ .pf-c-data-list__cell.pf-m-align-right {
10422
+ margin-left: 0;
10423
+ }
10424
+
10425
+ .pf-c-data-list__text {
10426
+ display: inline-block;
10427
+ }
10428
+
10429
+ .pf-c-data-list__text,
10430
+ .pf-c-data-list__cell {
10431
+ min-width: var(--pf-c-data-list--cell--MinWidth);
10432
+ max-width: 100%;
10433
+ overflow: var(--pf-c-data-list--cell--Overflow);
10434
+ text-overflow: var(--pf-c-data-list--cell--TextOverflow);
10435
+ word-break: var(--pf-c-data-list--cell--WordBreak);
10436
+ white-space: var(--pf-c-data-list--cell--WhiteSpace);
10437
+ }
10438
+
10439
+ .pf-c-data-list__expandable-content {
10440
+ max-height: var(--pf-c-data-list__expandable-content--MaxHeight);
10441
+ overflow-y: auto;
10442
+ border-top: var(--pf-c-data-list__expandable-content--BorderTopWidth) solid var(--pf-c-data-list__expandable-content--BorderTopColor);
10443
+ }
10444
+
10445
+ .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body {
10446
+ padding: var(--pf-c-data-list__expandable-content-body--PaddingTop) var(--pf-c-data-list__expandable-content-body--PaddingRight) var(--pf-c-data-list__expandable-content-body--PaddingBottom) var(--pf-c-data-list__expandable-content-body--PaddingLeft);
10447
+ }
10448
+
10449
+ .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body.pf-m-no-padding {
10450
+ padding: 0;
10451
+ }
10452
+
10453
+ @media screen and (min-width: 768px) {
10454
+ .pf-c-data-list:not([class*=pf-m-grid]) {
10148
10455
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
10149
10456
  --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
10150
10457
  --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
@@ -10155,64 +10462,64 @@ button.pf-c-breadcrumb__link {
10155
10462
  --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
10156
10463
  }
10157
10464
  }
10158
- @media screen and (min-width: 576px) and (min-width: 1200px) {
10159
- .pf-c-data-list.pf-m-grid-sm {
10465
+ @media screen and (min-width: 768px) and (min-width: 1200px) {
10466
+ .pf-c-data-list:not([class*=pf-m-grid]) {
10160
10467
  --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
10161
10468
  --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
10162
10469
  --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
10163
10470
  --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
10164
10471
  }
10165
10472
  }
10166
- @media screen and (min-width: 576px) {
10167
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__item-content {
10473
+ @media screen and (min-width: 768px) {
10474
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__item-content {
10168
10475
  display: flex;
10169
10476
  flex-wrap: wrap;
10170
10477
  flex-grow: 1;
10171
10478
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
10172
10479
  }
10173
10480
  }
10174
- @media screen and (min-width: 576px) {
10175
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
10481
+ @media screen and (min-width: 768px) {
10482
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
10176
10483
  margin-right: var(--pf-c-data-list__cell--MarginRight);
10177
10484
  }
10178
10485
 
10179
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell + .pf-c-data-list__cell {
10486
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell + .pf-c-data-list__cell {
10180
10487
  flex: 1;
10181
10488
  order: initial;
10182
10489
  }
10183
10490
 
10184
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-align-right {
10491
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-align-right {
10185
10492
  margin-left: auto;
10186
10493
  }
10187
10494
 
10188
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-no-fill {
10495
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-no-fill {
10189
10496
  flex: none;
10190
10497
  }
10191
10498
 
10192
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-2 {
10499
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-2 {
10193
10500
  flex-grow: 2;
10194
10501
  }
10195
10502
 
10196
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-3 {
10503
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-3 {
10197
10504
  flex-grow: 3;
10198
10505
  }
10199
10506
 
10200
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-4 {
10507
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-4 {
10201
10508
  flex-grow: 4;
10202
10509
  }
10203
10510
 
10204
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-5 {
10511
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-5 {
10205
10512
  flex-grow: 5;
10206
10513
  }
10207
10514
  }
10208
- @media screen and (min-width: 576px) {
10209
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__expandable-content {
10515
+ @media screen and (min-width: 768px) {
10516
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__expandable-content {
10210
10517
  max-height: initial;
10211
10518
  overflow-y: visible;
10212
10519
  }
10213
10520
  }
10214
- @media screen and (min-width: 768px) {
10215
- .pf-c-data-list.pf-m-grid-md {
10521
+ @media screen and (min-width: 0) {
10522
+ .pf-c-data-list.pf-m-grid-none {
10216
10523
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
10217
10524
  --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
10218
10525
  --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
@@ -10223,64 +10530,64 @@ button.pf-c-breadcrumb__link {
10223
10530
  --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
10224
10531
  }
10225
10532
  }
10226
- @media screen and (min-width: 768px) and (min-width: 1200px) {
10227
- .pf-c-data-list.pf-m-grid-md {
10533
+ @media screen and (min-width: 0) and (min-width: 1200px) {
10534
+ .pf-c-data-list.pf-m-grid-none {
10228
10535
  --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
10229
10536
  --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
10230
10537
  --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
10231
10538
  --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
10232
10539
  }
10233
10540
  }
10234
- @media screen and (min-width: 768px) {
10235
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__item-content {
10541
+ @media screen and (min-width: 0) {
10542
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__item-content {
10236
10543
  display: flex;
10237
10544
  flex-wrap: wrap;
10238
10545
  flex-grow: 1;
10239
10546
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
10240
10547
  }
10241
10548
  }
10242
- @media screen and (min-width: 768px) {
10243
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
10549
+ @media screen and (min-width: 0) {
10550
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
10244
10551
  margin-right: var(--pf-c-data-list__cell--MarginRight);
10245
10552
  }
10246
10553
 
10247
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell + .pf-c-data-list__cell {
10554
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell + .pf-c-data-list__cell {
10248
10555
  flex: 1;
10249
10556
  order: initial;
10250
10557
  }
10251
10558
 
10252
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-align-right {
10559
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-align-right {
10253
10560
  margin-left: auto;
10254
10561
  }
10255
10562
 
10256
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-no-fill {
10563
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-no-fill {
10257
10564
  flex: none;
10258
10565
  }
10259
10566
 
10260
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-2 {
10567
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-2 {
10261
10568
  flex-grow: 2;
10262
10569
  }
10263
10570
 
10264
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-3 {
10571
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-3 {
10265
10572
  flex-grow: 3;
10266
10573
  }
10267
10574
 
10268
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-4 {
10575
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-4 {
10269
10576
  flex-grow: 4;
10270
10577
  }
10271
10578
 
10272
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-5 {
10579
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-5 {
10273
10580
  flex-grow: 5;
10274
10581
  }
10275
10582
  }
10276
- @media screen and (min-width: 768px) {
10277
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__expandable-content {
10583
+ @media screen and (min-width: 0) {
10584
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__expandable-content {
10278
10585
  max-height: initial;
10279
10586
  overflow-y: visible;
10280
10587
  }
10281
10588
  }
10282
- @media screen and (min-width: 992px) {
10283
- .pf-c-data-list.pf-m-grid-lg {
10589
+ @media screen and (min-width: 576px) {
10590
+ .pf-c-data-list.pf-m-grid-sm {
10284
10591
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
10285
10592
  --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
10286
10593
  --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
@@ -10291,64 +10598,64 @@ button.pf-c-breadcrumb__link {
10291
10598
  --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
10292
10599
  }
10293
10600
  }
10294
- @media screen and (min-width: 992px) and (min-width: 1200px) {
10295
- .pf-c-data-list.pf-m-grid-lg {
10601
+ @media screen and (min-width: 576px) and (min-width: 1200px) {
10602
+ .pf-c-data-list.pf-m-grid-sm {
10296
10603
  --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
10297
10604
  --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
10298
10605
  --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
10299
10606
  --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
10300
10607
  }
10301
10608
  }
10302
- @media screen and (min-width: 992px) {
10303
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__item-content {
10609
+ @media screen and (min-width: 576px) {
10610
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__item-content {
10304
10611
  display: flex;
10305
10612
  flex-wrap: wrap;
10306
10613
  flex-grow: 1;
10307
10614
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
10308
10615
  }
10309
10616
  }
10310
- @media screen and (min-width: 992px) {
10311
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
10617
+ @media screen and (min-width: 576px) {
10618
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
10312
10619
  margin-right: var(--pf-c-data-list__cell--MarginRight);
10313
10620
  }
10314
10621
 
10315
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell + .pf-c-data-list__cell {
10622
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell + .pf-c-data-list__cell {
10316
10623
  flex: 1;
10317
10624
  order: initial;
10318
10625
  }
10319
10626
 
10320
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-align-right {
10627
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-align-right {
10321
10628
  margin-left: auto;
10322
10629
  }
10323
10630
 
10324
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-no-fill {
10631
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-no-fill {
10325
10632
  flex: none;
10326
10633
  }
10327
10634
 
10328
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-2 {
10635
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-2 {
10329
10636
  flex-grow: 2;
10330
10637
  }
10331
10638
 
10332
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-3 {
10639
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-3 {
10333
10640
  flex-grow: 3;
10334
10641
  }
10335
10642
 
10336
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-4 {
10643
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-4 {
10337
10644
  flex-grow: 4;
10338
10645
  }
10339
10646
 
10340
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-5 {
10647
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-5 {
10341
10648
  flex-grow: 5;
10342
10649
  }
10343
10650
  }
10344
- @media screen and (min-width: 992px) {
10345
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__expandable-content {
10651
+ @media screen and (min-width: 576px) {
10652
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__expandable-content {
10346
10653
  max-height: initial;
10347
10654
  overflow-y: visible;
10348
10655
  }
10349
10656
  }
10350
- @media screen and (min-width: 1200px) {
10351
- .pf-c-data-list.pf-m-grid-xl {
10657
+ @media screen and (min-width: 768px) {
10658
+ .pf-c-data-list.pf-m-grid-md {
10352
10659
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
10353
10660
  --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
10354
10661
  --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
@@ -10359,64 +10666,64 @@ button.pf-c-breadcrumb__link {
10359
10666
  --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
10360
10667
  }
10361
10668
  }
10362
- @media screen and (min-width: 1200px) and (min-width: 1200px) {
10363
- .pf-c-data-list.pf-m-grid-xl {
10669
+ @media screen and (min-width: 768px) and (min-width: 1200px) {
10670
+ .pf-c-data-list.pf-m-grid-md {
10364
10671
  --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
10365
10672
  --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
10366
10673
  --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
10367
10674
  --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
10368
10675
  }
10369
10676
  }
10370
- @media screen and (min-width: 1200px) {
10371
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__item-content {
10677
+ @media screen and (min-width: 768px) {
10678
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__item-content {
10372
10679
  display: flex;
10373
10680
  flex-wrap: wrap;
10374
10681
  flex-grow: 1;
10375
10682
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
10376
10683
  }
10377
10684
  }
10378
- @media screen and (min-width: 1200px) {
10379
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
10685
+ @media screen and (min-width: 768px) {
10686
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
10380
10687
  margin-right: var(--pf-c-data-list__cell--MarginRight);
10381
10688
  }
10382
10689
 
10383
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell + .pf-c-data-list__cell {
10690
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell + .pf-c-data-list__cell {
10384
10691
  flex: 1;
10385
10692
  order: initial;
10386
10693
  }
10387
10694
 
10388
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-align-right {
10695
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-align-right {
10389
10696
  margin-left: auto;
10390
10697
  }
10391
10698
 
10392
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-no-fill {
10699
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-no-fill {
10393
10700
  flex: none;
10394
10701
  }
10395
10702
 
10396
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-2 {
10703
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-2 {
10397
10704
  flex-grow: 2;
10398
10705
  }
10399
10706
 
10400
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-3 {
10707
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-3 {
10401
10708
  flex-grow: 3;
10402
10709
  }
10403
10710
 
10404
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-4 {
10711
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-4 {
10405
10712
  flex-grow: 4;
10406
10713
  }
10407
10714
 
10408
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-5 {
10715
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-5 {
10409
10716
  flex-grow: 5;
10410
10717
  }
10411
10718
  }
10412
- @media screen and (min-width: 1200px) {
10413
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__expandable-content {
10719
+ @media screen and (min-width: 768px) {
10720
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__expandable-content {
10414
10721
  max-height: initial;
10415
10722
  overflow-y: visible;
10416
10723
  }
10417
10724
  }
10418
- @media screen and (min-width: 1450px) {
10419
- .pf-c-data-list.pf-m-grid-2xl {
10725
+ @media screen and (min-width: 992px) {
10726
+ .pf-c-data-list.pf-m-grid-lg {
10420
10727
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
10421
10728
  --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
10422
10729
  --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
@@ -10427,497 +10734,198 @@ button.pf-c-breadcrumb__link {
10427
10734
  --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
10428
10735
  }
10429
10736
  }
10430
- @media screen and (min-width: 1450px) and (min-width: 1200px) {
10431
- .pf-c-data-list.pf-m-grid-2xl {
10737
+ @media screen and (min-width: 992px) and (min-width: 1200px) {
10738
+ .pf-c-data-list.pf-m-grid-lg {
10432
10739
  --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
10433
10740
  --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
10434
10741
  --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
10435
10742
  --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
10436
10743
  }
10437
10744
  }
10438
- @media screen and (min-width: 1450px) {
10439
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__item-content {
10745
+ @media screen and (min-width: 992px) {
10746
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__item-content {
10440
10747
  display: flex;
10441
10748
  flex-wrap: wrap;
10442
10749
  flex-grow: 1;
10443
10750
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
10444
10751
  }
10445
10752
  }
10446
- @media screen and (min-width: 1450px) {
10447
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
10753
+ @media screen and (min-width: 992px) {
10754
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
10448
10755
  margin-right: var(--pf-c-data-list__cell--MarginRight);
10449
10756
  }
10450
10757
 
10451
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell + .pf-c-data-list__cell {
10758
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell + .pf-c-data-list__cell {
10452
10759
  flex: 1;
10453
10760
  order: initial;
10454
10761
  }
10455
10762
 
10456
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-align-right {
10763
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-align-right {
10457
10764
  margin-left: auto;
10458
10765
  }
10459
10766
 
10460
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-no-fill {
10767
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-no-fill {
10461
10768
  flex: none;
10462
10769
  }
10463
10770
 
10464
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-2 {
10771
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-2 {
10465
10772
  flex-grow: 2;
10466
10773
  }
10467
10774
 
10468
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-3 {
10775
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-3 {
10469
10776
  flex-grow: 3;
10470
10777
  }
10471
10778
 
10472
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-4 {
10473
- flex-grow: 4;
10474
- }
10475
-
10476
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-5 {
10477
- flex-grow: 5;
10478
- }
10479
- }
10480
- @media screen and (min-width: 1450px) {
10481
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__expandable-content {
10482
- max-height: initial;
10483
- overflow-y: visible;
10484
- }
10485
- }
10486
- .pf-c-data-list {
10487
- --pf-c-data-list--FontSize: 1em;
10488
- --pf-c-data-list--LineHeight: var(--pf-global--LineHeight--md);
10489
- --pf-c-data-list--BorderTopColor: var(--pf-global--BorderColor--300);
10490
- --pf-c-data-list--BorderTopWidth: var(--pf-global--spacer--sm);
10491
- --pf-c-data-list--sm--BorderTopWidth: var(--pf-global--BorderWidth--sm);
10492
- --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);
10493
- --pf-c-data-list__item--BackgroundColor: var(--pf-global--BackgroundColor--100);
10494
- --pf-c-data-list__item--m-selected--ZIndex: var(--pf-global--ZIndex--xs);
10495
- --pf-c-data-list__item--m-expanded--before--BackgroundColor: var(--pf-global--active-color--100);
10496
- --pf-c-data-list__item--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
10497
- --pf-c-data-list__item--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
10498
- --pf-c-data-list__item--m-selectable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
10499
- --pf-c-data-list__item--m-selectable--hover--ZIndex: calc(var(--pf-c-data-list__item--m-selected--ZIndex) + 1);
10500
- --pf-c-data-list__item--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
10501
- --pf-c-data-list__item--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
10502
- --pf-c-data-list__item--m-selectable--active--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
10503
- --pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor: var(--pf-global--active-color--300);
10504
- --pf-c-data-list__item--BorderBottomColor: var(--pf-global--BorderColor--300);
10505
- --pf-c-data-list__item--BorderBottomWidth: 0.5rem;
10506
- --pf-c-data-list__item--m-selectable--hover--item--BorderTopColor: var(--pf-c-data-list__item--BorderBottomColor);
10507
- --pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth: var(--pf-c-data-list__item--BorderBottomWidth);
10508
- --pf-c-data-list__item--sm--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
10509
- --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
10510
- --pf-c-data-list__item--before--BackgroundColor: transparent;
10511
- --pf-c-data-list__item--before--Width: var(--pf-global--BorderWidth--lg);
10512
- --pf-c-data-list__item--before--Transition: var(--pf-global--Transition);
10513
- --pf-c-data-list__item--before--Top: 0;
10514
- --pf-c-data-list__item--before--sm--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
10515
- --pf-c-data-list__item-row--PaddingRight: var(--pf-global--spacer--md);
10516
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-global--spacer--md);
10517
- --pf-c-data-list__item-row--xl--PaddingRight: var(--pf-global--spacer--lg);
10518
- --pf-c-data-list__item-row--xl--PaddingLeft: var(--pf-global--spacer--lg);
10519
- --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-global--spacer--lg);
10520
- --pf-c-data-list__cell--PaddingTop: var(--pf-global--spacer--lg);
10521
- --pf-c-data-list__cell--PaddingBottom: var(--pf-global--spacer--lg);
10522
- --pf-c-data-list__cell--MarginRight: var(--pf-global--spacer--xl);
10523
- --pf-c-data-list__cell--md--PaddingBottom: 0;
10524
- --pf-c-data-list__cell--m-icon--MarginRight: var(--pf-global--spacer--md);
10525
- --pf-c-data-list__cell--cell--PaddingTop: 0;
10526
- --pf-c-data-list__cell--cell--md--PaddingTop: var(--pf-global--spacer--lg);
10527
- --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--lg);
10528
- --pf-c-data-list--cell--MinWidth: initial;
10529
- --pf-c-data-list--cell--Overflow: visible;
10530
- --pf-c-data-list--cell--TextOverflow: clip;
10531
- --pf-c-data-list--cell--WhiteSpace: normal;
10532
- --pf-c-data-list--cell--WordBreak: normal;
10533
- --pf-c-data-list--cell--m-truncate--MinWidth: 5ch;
10534
- --pf-c-data-list__toggle--MarginLeft: calc(var(--pf-global--spacer--sm) * -1);
10535
- --pf-c-data-list__toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
10536
- --pf-c-data-list__toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
10537
- --pf-c-data-list__toggle-icon--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
10538
- --pf-c-data-list__toggle-icon--Transition: .2s ease-in 0s;
10539
- --pf-c-data-list__toggle-icon--Rotate: 0;
10540
- --pf-c-data-list__item--m-expanded__toggle-icon--Rotate: 90deg;
10541
- --pf-c-data-list__item-draggable-button--PaddingLeft: var(--pf-global--spacer--md);
10542
- --pf-c-data-list__item-draggable-button--PaddingRight: var(--pf-global--spacer--md);
10543
- --pf-c-data-list__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--lg) * -1);
10544
- --pf-c-data-list__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--lg) * -1);
10545
- --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-global--spacer--lg);
10546
- --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-global--spacer--lg);
10547
- --pf-c-data-list__item-draggable-button--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
10548
- --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-global--icon--Color--light);
10549
- --pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color: var(--pf-global--disabled-color--200);
10550
- --pf-c-data-list__item-draggable-button--hover__draggable-icon--Color: var(--pf-global--icon--Color--dark);
10551
- --pf-c-data-list__item-draggable-button--focus__draggable-icon--Color: var(--pf-global--icon--Color--dark);
10552
- --pf-c-data-list__item--m-ghost-row--after--BackgroundColor: var(--pf-global--BackgroundColor--100);
10553
- --pf-c-data-list__item--m-ghost-row--after--Opacity: .6;
10554
- --pf-c-data-list__item-control--PaddingTop: var(--pf-global--spacer--lg);
10555
- --pf-c-data-list__item-control--PaddingBottom: var(--pf-global--spacer--lg);
10556
- --pf-c-data-list__item-control--MarginRight: var(--pf-global--spacer--md);
10557
- --pf-c-data-list__item-control--md--MarginRight: var(--pf-global--spacer--xl);
10558
- --pf-c-data-list__item-control--not-last-child--MarginRight: var(--pf-global--spacer--md);
10559
- --pf-c-data-list__check--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
10560
- --pf-c-data-list__check--MarginTop: -0.0625rem;
10561
- --pf-c-data-list__item-action--Display: flex;
10562
- --pf-c-data-list__item-action--PaddingTop: var(--pf-global--spacer--lg);
10563
- --pf-c-data-list__item-action--PaddingBottom: var(--pf-global--spacer--lg);
10564
- --pf-c-data-list__item-action--MarginLeft: var(--pf-global--spacer--md);
10565
- --pf-c-data-list__item-action--md--MarginLeft: var(--pf-global--spacer--xl);
10566
- --pf-c-data-list__item-action--not-last-child--MarginRight: var(--pf-global--spacer--md);
10567
- --pf-c-data-list__item-action__action--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
10568
- --pf-c-data-list__action--MarginTop: var(--pf-c-data-list__item-action__action--MarginTop);
10569
- --pf-c-data-list__item-action__action--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
10570
- --pf-c-data-list__expandable-content--BorderTopWidth: var(--pf-global--BorderWidth--sm);
10571
- --pf-c-data-list__expandable-content--BorderTopColor: var(--pf-global--BorderColor--100);
10572
- --pf-c-data-list__expandable-content--MarginRight: calc(var(--pf-c-data-list__expandable-content-body--PaddingRight) * -1);
10573
- --pf-c-data-list__expandable-content--MarginLeft: calc(var(--pf-c-data-list__expandable-content-body--PaddingLeft) * -1);
10574
- --pf-c-data-list__expandable-content--MaxHeight: 37.5rem;
10575
- --pf-c-data-list__expandable-content--before--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
10576
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-global--spacer--md);
10577
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-global--spacer--md);
10578
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-global--spacer--md);
10579
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-global--spacer--md);
10580
- --pf-c-data-list__expandable-content-body--md--PaddingTop: var(--pf-global--spacer--lg);
10581
- --pf-c-data-list__expandable-content-body--xl--PaddingRight: var(--pf-global--spacer--lg);
10582
- --pf-c-data-list__expandable-content-body--md--PaddingBottom: var(--pf-global--spacer--lg);
10583
- --pf-c-data-list__expandable-content-body--xl--PaddingLeft: var(--pf-global--spacer--lg);
10584
- --pf-c-data-list--m-compact--FontSize: var(--pf-global--FontSize--sm);
10585
- --pf-c-data-list--m-compact--LineHeight: var(--pf-global--LineHeight--sm);
10586
- --pf-c-data-list--m-compact__check--FontSize: var(--pf-global--FontSize--md);
10587
- --pf-c-data-list--m-compact__cell--PaddingTop: var(--pf-global--spacer--sm);
10588
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-global--spacer--sm);
10589
- --pf-c-data-list--m-compact__cell--md--PaddingBottom: 0;
10590
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: 0;
10591
- --pf-c-data-list--m-compact__cell-cell--md--PaddingTop: var(--pf-global--spacer--sm);
10592
- --pf-c-data-list--m-compact__cell--cell--MarginRight: var(--pf-global--spacer--md);
10593
- --pf-c-data-list--m-compact__item-control--PaddingTop: var(--pf-global--spacer--sm);
10594
- --pf-c-data-list--m-compact__item-control--PaddingBottom: var(--pf-global--spacer--sm);
10595
- --pf-c-data-list--m-compact__item-control--MarginRight: var(--pf-global--spacer--md);
10596
- --pf-c-data-list--m-compact__item-action--PaddingTop: var(--pf-global--spacer--sm);
10597
- --pf-c-data-list--m-compact__item-action--PaddingBottom: var(--pf-global--spacer--sm);
10598
- --pf-c-data-list--m-compact__item-action--MarginLeft: var(--pf-global--spacer--md);
10599
- --pf-c-data-list--m-compact__item-action__action--MarginTop: calc(var(--pf-c-data-list--m-compact__item-action--PaddingTop) * -1);
10600
- --pf-c-data-list--m-compact__item-action__action--MarginBottom: calc(var(--pf-c-data-list--m-compact__item-action--PaddingBottom) * -1);
10601
- --pf-c-data-list--m-compact__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
10602
- --pf-c-data-list--m-compact__item-content--PaddingBottom: var(--pf-global--spacer--sm);
10603
- --pf-c-data-list--m-compact__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
10604
- --pf-c-data-list--m-compact__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--sm) * -1);
10605
- --pf-c-data-list--m-compact__item-draggable-button--PaddingTop: var(--pf-global--spacer--sm);
10606
- --pf-c-data-list--m-compact__item-draggable-button--PaddingBottom: var(--pf-global--spacer--sm);
10607
- --pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--sm);
10608
- color: var(--pf-global--Color--100);
10609
- font-size: var(--pf-c-data-list--FontSize);
10610
- line-height: var(--pf-c-data-list--LineHeight);
10611
- overflow-wrap: break-word;
10612
- list-style-type: disc;
10613
- border-top: var(--pf-c-data-list--BorderTopWidth) solid var(--pf-c-data-list--BorderTopColor);
10614
- }
10615
-
10616
- @media screen and (min-width: 576px) {
10617
- .pf-c-data-list {
10618
- --pf-c-data-list--BorderTopColor: var(--pf-c-data-list--sm--BorderTopColor);
10619
- --pf-c-data-list--BorderTopWidth: var(--pf-c-data-list--sm--BorderTopWidth);
10620
- }
10621
- }
10622
- @media screen and (min-width: 576px) {
10623
- .pf-c-data-list {
10624
- --pf-c-data-list__item--BorderBottomWidth: var(--pf-c-data-list__item--sm--BorderBottomWidth);
10625
- --pf-c-data-list__item--BorderBottomColor: var(--pf-c-data-list__item--sm--BorderBottomColor);
10626
- }
10627
- }
10628
- @media (min-width: 576px) {
10629
- .pf-c-data-list {
10630
- --pf-c-data-list__item--before--Top: var(--pf-c-data-list__item--before--sm--Top);
10631
- }
10632
- }
10633
- .pf-c-data-list.pf-m-compact {
10634
- --pf-c-data-list__check--FontSize: var(--pf-c-data-list--m-compact__check--FontSize);
10635
- --pf-c-data-list__action--MarginTop: var(--pf-c-data-list--m-compact__action--MarginTop);
10636
- --pf-c-data-list--FontSize: var(--pf-c-data-list--m-compact--FontSize);
10637
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list--m-compact__item-action--MarginLeft);
10638
- --pf-c-data-list__item-action--PaddingTop: var(--pf-c-data-list--m-compact__item-action--PaddingTop);
10639
- --pf-c-data-list__item-action--PaddingBottom: var(--pf-c-data-list--m-compact__item-action--PaddingBottom);
10640
- --pf-c-data-list__item-action__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
10641
- --pf-c-data-list__item-action__action--MarginBottom: var(--pf-c-data-list--m-compact__item-action__action--MarginBottom);
10642
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list--m-compact__item-control--MarginRight);
10643
- --pf-c-data-list__item-control--PaddingTop: var(--pf-c-data-list--m-compact__item-control--PaddingTop);
10644
- --pf-c-data-list__item-control--PaddingBottom: var(--pf-c-data-list--m-compact__item-control--PaddingBottom);
10645
- --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-c-data-list--m-compact__item-content--PaddingBottom);
10646
- --pf-c-data-list__item-draggable-button--MarginTop: var(--pf-c-data-list--m-compact__item-draggable-button--MarginTop);
10647
- --pf-c-data-list__item-draggable-button--MarginBottom: var(--pf-c-data-list--m-compact__item-draggable-button--MarginBottom);
10648
- --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingTop);
10649
- --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingBottom);
10650
- --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop);
10651
- font-size: var(--pf-c-data-list--m-compact--FontSize);
10652
- }
10653
-
10654
- .pf-c-data-list.pf-m-compact .pf-c-data-list__cell {
10655
- --pf-c-data-list__cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--PaddingTop);
10656
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--PaddingBottom);
10657
- --pf-c-data-list__cell--MarginRight: var(--pf-c-data-list--m-compact__cell--cell--MarginRight);
10658
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--PaddingTop);
10659
- }
10660
-
10661
- .pf-c-data-list.pf-m-compact .pf-c-data-list__check {
10662
- font-size: var(--pf-c-data-list--m-compact__check--FontSize);
10663
- }
10664
-
10665
- .pf-c-data-list.pf-m-drag-over {
10666
- overflow-anchor: none;
10667
- }
10668
-
10669
- .pf-c-data-list.pf-m-truncate,
10670
- .pf-c-data-list__item-row.pf-m-truncate,
10671
- .pf-c-data-list__cell.pf-m-truncate,
10672
- .pf-c-data-list__text.pf-m-truncate {
10673
- --pf-c-data-list--cell--MinWidth: var(--pf-c-data-list--cell--m-truncate--MinWidth);
10674
- --pf-c-data-list--cell--Overflow: hidden;
10675
- --pf-c-data-list--cell--TextOverflow: ellipsis;
10676
- --pf-c-data-list--cell--WhiteSpace: nowrap;
10677
- }
10678
-
10679
- .pf-c-data-list.pf-m-break-word,
10680
- .pf-c-data-list__item-row.pf-m-break-word,
10681
- .pf-c-data-list__cell.pf-m-break-word,
10682
- .pf-c-data-list__text.pf-m-break-word {
10683
- --pf-c-data-list--cell--WordBreak: break-word;
10684
- }
10685
-
10686
- .pf-c-data-list.pf-m-nowrap,
10687
- .pf-c-data-list__item-row.pf-m-nowrap,
10688
- .pf-c-data-list__cell.pf-m-nowrap,
10689
- .pf-c-data-list__text.pf-m-nowrap {
10690
- --pf-c-data-list--cell--WhiteSpace: nowrap;
10691
- }
10692
-
10693
- .pf-c-data-list__item {
10694
- position: relative;
10695
- display: flex;
10696
- flex-direction: column;
10697
- background-color: var(--pf-c-data-list__item--BackgroundColor);
10698
- border-bottom: var(--pf-c-data-list__item--BorderBottomWidth) solid var(--pf-c-data-list__item--BorderBottomColor);
10699
- }
10700
-
10701
- .pf-c-data-list__item::before {
10702
- position: absolute;
10703
- top: var(--pf-c-data-list__item--before--Top);
10704
- bottom: 0;
10705
- left: 0;
10706
- width: var(--pf-c-data-list__item--before--Width);
10707
- content: "";
10708
- background-color: var(--pf-c-data-list__item--before--BackgroundColor);
10709
- transition: var(--pf-c-data-list__item--before--Transition);
10710
- }
10711
-
10712
- .pf-c-data-list__item.pf-m-selectable {
10713
- cursor: pointer;
10714
- outline-offset: var(--pf-c-data-list__item--m-selectable--OutlineOffset);
10715
- }
10716
-
10717
- .pf-c-data-list__item.pf-m-selectable:hover, .pf-c-data-list__item.pf-m-selectable:focus {
10718
- position: relative;
10719
- z-index: var(--pf-c-data-list__item--m-selectable--hover--ZIndex);
10720
- }
10721
-
10722
- .pf-c-data-list__item.pf-m-selectable:hover:not(.pf-m-selected):not(:last-child), .pf-c-data-list__item.pf-m-selectable:focus:not(.pf-m-selected):not(:last-child) {
10723
- --pf-c-data-list__item--BorderBottomWidth: 0;
10724
- }
10725
-
10726
- .pf-c-data-list__item.pf-m-selectable:hover:not(.pf-m-selected):not(:last-child) + .pf-c-data-list__item, .pf-c-data-list__item.pf-m-selectable:focus:not(.pf-m-selected):not(:last-child) + .pf-c-data-list__item {
10727
- border-top: var(--pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth) solid var(--pf-c-data-list__item--m-selectable--hover--item--BorderTopColor);
10728
- }
10729
-
10730
- .pf-c-data-list__item.pf-m-selectable:hover {
10731
- box-shadow: var(--pf-c-data-list__item--m-selectable--hover--BoxShadow);
10732
- }
10733
-
10734
- .pf-c-data-list__item.pf-m-selectable:focus {
10735
- box-shadow: var(--pf-c-data-list__item--m-selectable--focus--BoxShadow);
10736
- }
10737
-
10738
- .pf-c-data-list__item.pf-m-selectable:active {
10739
- box-shadow: var(--pf-c-data-list__item--m-selectable--active--BoxShadow);
10740
- }
10741
-
10742
- .pf-c-data-list__item.pf-m-selected {
10743
- --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-selected--before--BackgroundColor);
10744
- position: relative;
10745
- z-index: var(--pf-c-data-list__item--m-selected--ZIndex);
10746
- box-shadow: var(--pf-c-data-list__item--m-selected--BoxShadow);
10747
- }
10748
-
10749
- .pf-c-data-list__item.pf-m-ghost-row::after {
10750
- position: absolute;
10751
- top: 0;
10752
- right: 0;
10753
- bottom: 0;
10754
- left: 0;
10755
- content: "";
10756
- background-color: var(--pf-c-data-list__item--m-ghost-row--after--BackgroundColor);
10757
- opacity: var(--pf-c-data-list__item--m-ghost-row--after--Opacity);
10758
- }
10759
-
10760
- .pf-c-data-list__item.pf-m-expanded {
10761
- --pf-c-data-list__toggle-icon--Rotate: var(--pf-c-data-list__item--m-expanded__toggle-icon--Rotate);
10762
- --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--before--BackgroundColor);
10763
- }
10764
-
10765
- .pf-c-data-list__item.pf-m-expanded.pf-m-selectable:not(.pf-m-selected) {
10766
- --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor);
10767
- }
10768
-
10769
- .pf-c-data-list__item-row {
10770
- display: flex;
10771
- flex-wrap: nowrap;
10772
- padding-right: var(--pf-c-data-list__item-row--PaddingRight);
10773
- padding-left: var(--pf-c-data-list__item-row--PaddingLeft);
10774
- }
10775
-
10776
- .pf-c-data-list__item-control {
10777
- display: flex;
10778
- flex-wrap: nowrap;
10779
- padding-top: var(--pf-c-data-list__item-control--PaddingTop);
10780
- padding-bottom: var(--pf-c-data-list__item-control--PaddingBottom);
10781
- margin-right: var(--pf-c-data-list__item-control--MarginRight);
10782
- }
10783
-
10784
- .pf-c-data-list__item-control > *:not(:last-child) {
10785
- margin-right: var(--pf-c-data-list__item-control--not-last-child--MarginRight);
10786
- }
10787
-
10788
- .pf-c-data-list__check {
10789
- display: flex;
10790
- align-items: center;
10791
- align-self: flex-start;
10792
- height: var(--pf-c-data-list__check--Height);
10793
- margin-top: var(--pf-c-data-list__check--MarginTop);
10794
- }
10795
-
10796
- .pf-c-data-list__check > input {
10797
- cursor: pointer;
10798
- }
10779
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-4 {
10780
+ flex-grow: 4;
10781
+ }
10799
10782
 
10800
- .pf-c-data-list__item-draggable-button {
10801
- display: flex;
10802
- flex-direction: column;
10803
- padding: var(--pf-c-data-list__item-draggable-button--PaddingTop) var(--pf-c-data-list__item-draggable-button--PaddingRight) var(--pf-c-data-list__item-draggable-button--PaddingBottom) var(--pf-c-data-list__item-draggable-button--PaddingLeft);
10804
- margin: var(--pf-c-data-list__item-draggable-button--MarginTop) 0 var(--pf-c-data-list__item-draggable-button--MarginBottom) var(--pf-c-data-list__item-draggable-button--MarginLeft);
10805
- border: 0;
10783
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-5 {
10784
+ flex-grow: 5;
10785
+ }
10806
10786
  }
10807
-
10808
- .pf-c-data-list__item-draggable-button:hover {
10809
- --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--hover__draggable-icon--Color);
10810
- cursor: grab;
10787
+ @media screen and (min-width: 992px) {
10788
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__expandable-content {
10789
+ max-height: initial;
10790
+ overflow-y: visible;
10791
+ }
10811
10792
  }
10812
-
10813
- .pf-c-data-list__item-draggable-button:focus {
10814
- --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--focus__draggable-icon--Color);
10793
+ @media screen and (min-width: 1200px) {
10794
+ .pf-c-data-list.pf-m-grid-xl {
10795
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
10796
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
10797
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
10798
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
10799
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
10800
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
10801
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
10802
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
10803
+ }
10815
10804
  }
10816
-
10817
- .pf-c-data-list__item-draggable-button:active {
10818
- cursor: grabbing;
10805
+ @media screen and (min-width: 1200px) and (min-width: 1200px) {
10806
+ .pf-c-data-list.pf-m-grid-xl {
10807
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
10808
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
10809
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
10810
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
10811
+ }
10819
10812
  }
10820
-
10821
- .pf-c-data-list__item-draggable-button.pf-m-disabled {
10822
- --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color);
10823
- pointer-events: none;
10813
+ @media screen and (min-width: 1200px) {
10814
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__item-content {
10815
+ display: flex;
10816
+ flex-wrap: wrap;
10817
+ flex-grow: 1;
10818
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
10819
+ }
10824
10820
  }
10821
+ @media screen and (min-width: 1200px) {
10822
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
10823
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
10824
+ }
10825
10825
 
10826
- .pf-c-data-list__item-draggable-button .pf-c-data-list__item-draggable-icon {
10827
- color: var(--pf-c-data-list__item-draggable-button-icon--Color);
10828
- }
10826
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell + .pf-c-data-list__cell {
10827
+ flex: 1;
10828
+ order: initial;
10829
+ }
10829
10830
 
10830
- .pf-c-data-list__item-action {
10831
- --pf-hidden-visible--visible--Display: var(--pf-c-data-list__item-action--Display);
10832
- align-items: flex-start;
10833
- align-content: flex-start;
10834
- padding-top: var(--pf-c-data-list__item-action--PaddingTop);
10835
- padding-bottom: var(--pf-c-data-list__item-action--PaddingBottom);
10836
- margin-left: var(--pf-c-data-list__item-action--MarginLeft);
10837
- }
10831
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-align-right {
10832
+ margin-left: auto;
10833
+ }
10838
10834
 
10839
- .pf-c-data-list__item-action > *:not(:last-child) {
10840
- margin-right: var(--pf-c-data-list__item-action--not-last-child--MarginRight);
10841
- }
10835
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-no-fill {
10836
+ flex: none;
10837
+ }
10842
10838
 
10843
- .pf-c-data-list__item-action .pf-c-data-list__action {
10844
- margin-top: var(--pf-c-data-list__action--MarginTop);
10845
- margin-bottom: var(--pf-c-data-list__item-action__action--MarginBottom);
10846
- }
10839
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-2 {
10840
+ flex-grow: 2;
10841
+ }
10847
10842
 
10848
- .pf-c-data-list__toggle {
10849
- margin: var(--pf-c-data-list__toggle--MarginTop) 0 var(--pf-c-data-list__toggle--MarginBottom) var(--pf-c-data-list__toggle--MarginLeft);
10850
- }
10843
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-3 {
10844
+ flex-grow: 3;
10845
+ }
10851
10846
 
10852
- .pf-c-data-list__toggle-icon {
10853
- height: var(--pf-c-data-list__toggle-icon--Height);
10854
- pointer-events: none;
10855
- transition: var(--pf-c-data-list__toggle-icon--Transition);
10856
- transform: rotate(var(--pf-c-data-list__toggle-icon--Rotate));
10857
- }
10847
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-4 {
10848
+ flex-grow: 4;
10849
+ }
10858
10850
 
10859
- .pf-c-data-list__item-content {
10860
- display: grid;
10861
- width: 100%;
10862
- grid-template-columns: auto 1fr;
10851
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-5 {
10852
+ flex-grow: 5;
10853
+ }
10863
10854
  }
10864
-
10865
- .pf-c-data-list__cell {
10866
- flex: 1;
10867
- grid-column: 1/-1;
10868
- padding-top: var(--pf-c-data-list__cell--PaddingTop);
10869
- padding-bottom: var(--pf-c-data-list__cell--PaddingBottom);
10855
+ @media screen and (min-width: 1200px) {
10856
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__expandable-content {
10857
+ max-height: initial;
10858
+ overflow-y: visible;
10859
+ }
10870
10860
  }
10871
-
10872
- .pf-c-data-list__cell + .pf-c-data-list__cell {
10873
- flex: 1 0 100%;
10874
- order: 1;
10875
- padding-top: var(--pf-c-data-list__cell--cell--PaddingTop);
10861
+ @media screen and (min-width: 1450px) {
10862
+ .pf-c-data-list.pf-m-grid-2xl {
10863
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
10864
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
10865
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
10866
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
10867
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
10868
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
10869
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
10870
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
10871
+ }
10876
10872
  }
10877
-
10878
- .pf-c-data-list__cell.pf-m-icon {
10879
- flex-grow: 0;
10880
- margin-right: var(--pf-c-data-list__cell--m-icon--MarginRight);
10881
- grid-column: 1/2;
10873
+ @media screen and (min-width: 1450px) and (min-width: 1200px) {
10874
+ .pf-c-data-list.pf-m-grid-2xl {
10875
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
10876
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
10877
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
10878
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
10879
+ }
10882
10880
  }
10883
-
10884
- .pf-c-data-list__cell.pf-m-icon + .pf-c-data-list__cell {
10885
- grid-column: 2/3;
10886
- padding-top: var(--pf-c-data-list__cell--m-icon--cell--PaddingTop);
10881
+ @media screen and (min-width: 1450px) {
10882
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__item-content {
10883
+ display: flex;
10884
+ flex-wrap: wrap;
10885
+ flex-grow: 1;
10886
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
10887
+ }
10887
10888
  }
10889
+ @media screen and (min-width: 1450px) {
10890
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
10891
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
10892
+ }
10888
10893
 
10889
- .pf-c-data-list__cell.pf-m-align-right {
10890
- margin-left: 0;
10891
- }
10894
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell + .pf-c-data-list__cell {
10895
+ flex: 1;
10896
+ order: initial;
10897
+ }
10892
10898
 
10893
- .pf-c-data-list__text {
10894
- display: inline-block;
10895
- }
10899
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-align-right {
10900
+ margin-left: auto;
10901
+ }
10896
10902
 
10897
- .pf-c-data-list__text,
10898
- .pf-c-data-list__cell {
10899
- min-width: var(--pf-c-data-list--cell--MinWidth);
10900
- max-width: 100%;
10901
- overflow: var(--pf-c-data-list--cell--Overflow);
10902
- text-overflow: var(--pf-c-data-list--cell--TextOverflow);
10903
- word-break: var(--pf-c-data-list--cell--WordBreak);
10904
- white-space: var(--pf-c-data-list--cell--WhiteSpace);
10905
- }
10903
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-no-fill {
10904
+ flex: none;
10905
+ }
10906
10906
 
10907
- .pf-c-data-list__expandable-content {
10908
- max-height: var(--pf-c-data-list__expandable-content--MaxHeight);
10909
- overflow-y: auto;
10910
- border-top: var(--pf-c-data-list__expandable-content--BorderTopWidth) solid var(--pf-c-data-list__expandable-content--BorderTopColor);
10911
- }
10907
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-2 {
10908
+ flex-grow: 2;
10909
+ }
10912
10910
 
10913
- .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body {
10914
- padding: var(--pf-c-data-list__expandable-content-body--PaddingTop) var(--pf-c-data-list__expandable-content-body--PaddingRight) var(--pf-c-data-list__expandable-content-body--PaddingBottom) var(--pf-c-data-list__expandable-content-body--PaddingLeft);
10915
- }
10911
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-3 {
10912
+ flex-grow: 3;
10913
+ }
10916
10914
 
10917
- .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body.pf-m-no-padding {
10918
- padding: 0;
10919
- }
10915
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-4 {
10916
+ flex-grow: 4;
10917
+ }
10920
10918
 
10919
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-5 {
10920
+ flex-grow: 5;
10921
+ }
10922
+ }
10923
+ @media screen and (min-width: 1450px) {
10924
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__expandable-content {
10925
+ max-height: initial;
10926
+ overflow-y: visible;
10927
+ }
10928
+ }
10921
10929
  .pf-c-date-picker {
10922
10930
  --pf-c-date-picker--m-top__calendar--Top: 0;
10923
10931
  --pf-c-date-picker--m-top__calendar--TranslateY: calc(-100% - var(--pf-global--spacer--xs));
@@ -19055,6 +19063,15 @@ ul.pf-c-list {
19055
19063
  flex: 1 0 auto;
19056
19064
  }
19057
19065
 
19066
+ .pf-c-pagination__nav-page-select .pf-c-form-control {
19067
+ appearance: textfield;
19068
+ }
19069
+
19070
+ .pf-c-pagination__nav-page-select .pf-c-form-control::-webkit-inner-spin-button, .pf-c-pagination__nav-page-select .pf-c-form-control::-webkit-outer-spin-button {
19071
+ appearance: none;
19072
+ margin: 0;
19073
+ }
19074
+
19058
19075
  .pf-c-pagination {
19059
19076
  --pf-c-pagination--child--MarginRight: var(--pf-global--spacer--lg);
19060
19077
  --pf-c-pagination--m-bottom--child--MarginRight: 0;
@@ -19083,7 +19100,7 @@ ul.pf-c-list {
19083
19100
  --pf-c-pagination__nav-page-select--PaddingLeft: var(--pf-global--spacer--md);
19084
19101
  --pf-c-pagination__nav-page-select--PaddingRight: var(--pf-global--spacer--md);
19085
19102
  --pf-c-pagination__nav-page-select--child--MarginRight: var(--pf-global--spacer--xs);
19086
- --pf-c-pagination__nav-page-select--c-form-control--width-base: 3.5ch;
19103
+ --pf-c-pagination__nav-page-select--c-form-control--width-base: calc(var(--pf-global--spacer--sm) * 2 + var(--pf-global--BorderWidth--sm) * 2);
19087
19104
  --pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;
19088
19105
  --pf-c-pagination__nav-page-select--c-form-control--Width: calc(var(--pf-c-pagination__nav-page-select--c-form-control--width-base) + (var(--pf-c-pagination__nav-page-select--c-form-control--width-chars) * 1ch));
19089
19106
  --pf-c-pagination__total-items--Display: block;
@@ -19964,6 +19981,10 @@ ul.pf-c-list {
19964
19981
  --pf-c-progress-stepper__step-icon--Color: var(--pf-global--info-color--100);
19965
19982
  }
19966
19983
 
19984
+ .pf-c-progress-stepper__step:last-child {
19985
+ --pf-c-progress-stepper__step-main--MarginBottom: 0;
19986
+ }
19987
+
19967
19988
  .pf-c-progress-stepper__step-connector {
19968
19989
  position: relative;
19969
19990
  display: flex;
@@ -24440,10 +24461,19 @@ label.pf-c-radio, .pf-c-radio__label,
24440
24461
  --pf-c-toolbar--spacer: 0;
24441
24462
  }
24442
24463
 
24464
+ .pf-c-number-input .pf-c-form-control {
24465
+ appearance: textfield;
24466
+ }
24467
+
24468
+ .pf-c-number-input .pf-c-form-control::-webkit-inner-spin-button, .pf-c-number-input .pf-c-form-control::-webkit-outer-spin-button {
24469
+ appearance: none;
24470
+ margin: 0;
24471
+ }
24472
+
24443
24473
  .pf-c-number-input {
24444
24474
  --pf-c-number-input__unit--c-input-group--MarginLeft: var(--pf-global--spacer--sm);
24445
24475
  --pf-c-number-input__icon--FontSize: var(--pf-global--FontSize--xs);
24446
- --pf-c-number-input--c-form-control--width-base: calc(var(--pf-global--spacer--sm) * 2);
24476
+ --pf-c-number-input--c-form-control--width-base: calc(var(--pf-global--spacer--sm) * 2 + var(--pf-global--BorderWidth--sm) * 2);
24447
24477
  --pf-c-number-input--c-form-control--width-chars: 4;
24448
24478
  --pf-c-number-input--c-form-control--Width: calc(var(--pf-c-number-input--c-form-control--width-base) + var(--pf-c-number-input--c-form-control--width-chars) * 1ch);
24449
24479
  display: inline-flex;
@@ -24454,12 +24484,6 @@ label.pf-c-radio, .pf-c-radio__label,
24454
24484
  display: inline-flex;
24455
24485
  width: var(--pf-c-number-input--c-form-control--Width);
24456
24486
  text-align: right;
24457
- -moz-appearance: textfield;
24458
- }
24459
-
24460
- .pf-c-number-input .pf-c-form-control::-webkit-outer-spin-button, .pf-c-number-input .pf-c-form-control::-webkit-inner-spin-button {
24461
- -webkit-appearance: none;
24462
- margin: 0;
24463
24487
  }
24464
24488
 
24465
24489
  .pf-c-input-group + .pf-c-number-input__unit,
@@ -25562,6 +25586,7 @@ label.pf-c-radio, .pf-c-radio__label,
25562
25586
  --pf-c-text-input-group__text-input--PaddingLeft: var(--pf-global--spacer--sm);
25563
25587
  --pf-c-text-input-group__text-input--MinWidth: 12ch;
25564
25588
  --pf-c-text-input-group__text-input--m-hint--Color: var(--pf-global--Color--dark-200);
25589
+ --pf-c-text-input-group--placeholder--Color: var(--pf-global--Color--dark-200);
25565
25590
  --pf-c-text-input-group__icon--Left: var(--pf-global--spacer--sm);
25566
25591
  --pf-c-text-input-group__icon--Color: var(--pf-global--Color--200);
25567
25592
  --pf-c-text-input-group__text--hover__icon--Color: var(--pf-global--Color--100);
@@ -25683,6 +25708,10 @@ label.pf-c-radio, .pf-c-radio__label,
25683
25708
  color: var(--pf-c-text-input-group__text-input--m-hint--Color);
25684
25709
  }
25685
25710
 
25711
+ .pf-c-text-input-group__text-input::placeholder {
25712
+ color: var(--pf-c-text-input-group--placeholder--Color);
25713
+ }
25714
+
25686
25715
  .pf-c-text-input-group__utilities {
25687
25716
  display: flex;
25688
25717
  align-items: center;
@@ -29227,6 +29256,20 @@ label.pf-c-radio, .pf-c-radio__label,
29227
29256
  --pf-c-alert-group--m-toast--Right: var(--pf-global--spacer--xl);
29228
29257
  --pf-c-alert-group--m-toast--MaxWidth: 37.5rem;
29229
29258
  --pf-c-alert-group--m-toast--ZIndex: var(--pf-global--ZIndex--2xl);
29259
+ --pf-c-alert-group__overflow-button--BorderWidth: 0;
29260
+ --pf-c-alert-group__overflow-button--PaddingTop: var(--pf-global--spacer--lg);
29261
+ --pf-c-alert-group__overflow-button--PaddingRight: var(--pf-global--spacer--md);
29262
+ --pf-c-alert-group__overflow-button--PaddingBottom: var(--pf-global--spacer--lg);
29263
+ --pf-c-alert-group__overflow-button--PaddingLeft: var(--pf-global--spacer--md);
29264
+ --pf-c-alert-group__overflow-button--Color: var(--pf-global--link--Color);
29265
+ --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-global--BoxShadow--lg);
29266
+ --pf-c-alert-group__overflow-button--BackgroundColor: var(--pf-global--BackgroundColor--100);
29267
+ --pf-c-alert-group__overflow-button--hover--Color: var(--pf-global--link--Color--hover);
29268
+ --pf-c-alert-group__overflow-button--hover--BoxShadow: var(--pf-global--BoxShadow--lg), var(--pf-global--BoxShadow--lg-bottom);
29269
+ --pf-c-alert-group__overflow-button--focus--Color: var(--pf-global--link--Color--hover);
29270
+ --pf-c-alert-group__overflow-button--focus--BoxShadow: var(--pf-global--BoxShadow--lg), var(--pf-global--BoxShadow--lg-bottom);
29271
+ --pf-c-alert-group__overflow-button--active--Color: var(--pf-global--link--Color--hover);
29272
+ --pf-c-alert-group__overflow-button--active--BoxShadow: var(--pf-global--BoxShadow--lg), var(--pf-global--BoxShadow--lg-bottom);
29230
29273
  }
29231
29274
 
29232
29275
  .pf-c-alert-group > * + * {
@@ -29242,6 +29285,31 @@ label.pf-c-radio, .pf-c-radio__label,
29242
29285
  max-width: var(--pf-c-alert-group--m-toast--MaxWidth);
29243
29286
  }
29244
29287
 
29288
+ .pf-c-alert-group__overflow-button {
29289
+ position: relative;
29290
+ width: 100%;
29291
+ padding: var(--pf-c-alert-group__overflow-button--PaddingTop) var(--pf-c-alert-group__overflow-button--PaddingRight) var(--pf-c-alert-group__overflow-button--PaddingBottom) var(--pf-c-alert-group__overflow-button--PaddingLeft);
29292
+ color: var(--pf-c-alert-group__overflow-button--Color);
29293
+ background-color: var(--pf-c-alert-group__overflow-button--BackgroundColor);
29294
+ border-width: var(--pf-c-alert-group__overflow-button--BorderWidth);
29295
+ box-shadow: var(--pf-c-alert-group__overflow-button--BoxShadow);
29296
+ }
29297
+
29298
+ .pf-c-alert-group__overflow-button:hover {
29299
+ --pf-c-alert-group__overflow-button--Color: var(--pf-c-alert-group__overflow-button--hover--Color);
29300
+ --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-c-alert-group__overflow-button--hover--BoxShadow);
29301
+ }
29302
+
29303
+ .pf-c-alert-group__overflow-button:focus {
29304
+ --pf-c-alert-group__overflow-button--Color: var(--pf-c-alert-group__overflow-button--focus--Color);
29305
+ --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-c-alert-group__overflow-button--focus--BoxShadow);
29306
+ }
29307
+
29308
+ .pf-c-alert-group__overflow-button:active {
29309
+ --pf-c-alert-group__overflow-button--Color: var(--pf-c-alert-group__overflow-button--active--Color);
29310
+ --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-c-alert-group__overflow-button--active--BoxShadow);
29311
+ }
29312
+
29245
29313
  .pf-c-about-modal-box {
29246
29314
  --pf-global--Color--100: var(--pf-global--Color--light-100);
29247
29315
  --pf-global--Color--200: var(--pf-global--Color--light-200);