@patternfly/react-core 4.227.8 → 4.227.9

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 (40) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/esm/components/Menu/MenuItem.d.ts +3 -1
  3. package/dist/esm/components/Menu/MenuItem.d.ts.map +1 -1
  4. package/dist/esm/components/Menu/MenuItem.js +2 -2
  5. package/dist/esm/components/Menu/MenuItem.js.map +1 -1
  6. package/dist/esm/components/MenuToggle/MenuToggle.d.ts +6 -12
  7. package/dist/esm/components/MenuToggle/MenuToggle.d.ts.map +1 -1
  8. package/dist/esm/components/MenuToggle/MenuToggle.js +12 -8
  9. package/dist/esm/components/MenuToggle/MenuToggle.js.map +1 -1
  10. package/dist/esm/components/TextInputGroup/TextInputGroup.d.ts +2 -0
  11. package/dist/esm/components/TextInputGroup/TextInputGroup.d.ts.map +1 -1
  12. package/dist/esm/components/TextInputGroup/TextInputGroup.js +2 -2
  13. package/dist/esm/components/TextInputGroup/TextInputGroup.js.map +1 -1
  14. package/dist/esm/components/TextInputGroup/TextInputGroupMain.d.ts +1 -1
  15. package/dist/esm/components/TextInputGroup/TextInputGroupMain.d.ts.map +1 -1
  16. package/dist/js/components/Menu/MenuItem.d.ts +3 -1
  17. package/dist/js/components/Menu/MenuItem.d.ts.map +1 -1
  18. package/dist/js/components/Menu/MenuItem.js +2 -2
  19. package/dist/js/components/Menu/MenuItem.js.map +1 -1
  20. package/dist/js/components/MenuToggle/MenuToggle.d.ts +6 -12
  21. package/dist/js/components/MenuToggle/MenuToggle.d.ts.map +1 -1
  22. package/dist/js/components/MenuToggle/MenuToggle.js +12 -8
  23. package/dist/js/components/MenuToggle/MenuToggle.js.map +1 -1
  24. package/dist/js/components/TextInputGroup/TextInputGroup.d.ts +2 -0
  25. package/dist/js/components/TextInputGroup/TextInputGroup.d.ts.map +1 -1
  26. package/dist/js/components/TextInputGroup/TextInputGroup.js +2 -2
  27. package/dist/js/components/TextInputGroup/TextInputGroup.js.map +1 -1
  28. package/dist/js/components/TextInputGroup/TextInputGroupMain.d.ts +1 -1
  29. package/dist/js/components/TextInputGroup/TextInputGroupMain.d.ts.map +1 -1
  30. package/dist/umd/react-core.css +815 -818
  31. package/dist/umd/react-core.js +17 -12
  32. package/dist/umd/react-core.min.css +15 -18
  33. package/dist/umd/react-core.min.js +5 -5
  34. package/package.json +6 -6
  35. package/src/components/Menu/MenuItem.tsx +4 -0
  36. package/src/components/MenuToggle/MenuToggle.tsx +63 -25
  37. package/src/components/TextInputGroup/TextInputGroup.tsx +9 -1
  38. package/src/components/TextInputGroup/TextInputGroupMain.tsx +1 -1
  39. package/src/demos/ComposableMenu/ComposableMenu.md +8 -0
  40. package/src/demos/ComposableMenu/examples/ComposableTypeaheadSelect.tsx +196 -0
package/dist/umd/react-core.css CHANGED
@@ -266,37 +266,6 @@
266
266
  --pf-c-accordion__toggle--active--BackgroundColor: var(--pf-global--BackgroundColor--300);
267
267
  }
268
268
 
269
- .pf-c-action-list {
270
- --pf-c-action-list--m-icon--spacer: 0;
271
- --pf-c-action-list--child--spacer-base: var(--pf-global--spacer--md);
272
- --pf-c-action-list--group--spacer-base: var(--pf-global--spacer--2xl);
273
- }
274
-
275
- .pf-c-action-list,
276
- .pf-c-action-list__group {
277
- --pf-c-action-list--child--spacer: var(--pf-c-action-list--child--spacer-base);
278
- --pf-c-action-list--group--spacer: var(--pf-c-action-list--group--spacer-base);
279
- display: flex;
280
- align-items: center;
281
- }
282
-
283
- .pf-c-action-list > * + *,
284
- .pf-c-action-list__group > * + * {
285
- margin-left: var(--pf-c-action-list--child--spacer);
286
- }
287
-
288
- .pf-c-action-list > * + .pf-c-action-list__group,
289
- .pf-c-action-list .pf-c-action-list__group + *,
290
- .pf-c-action-list__group > * + .pf-c-action-list__group,
291
- .pf-c-action-list__group .pf-c-action-list__group + * {
292
- margin-left: var(--pf-c-action-list--group--spacer);
293
- }
294
-
295
- .pf-c-action-list.pf-m-icons,
296
- .pf-c-action-list__group.pf-m-icons {
297
- --pf-c-action-list--child--spacer: var(--pf-c-action-list--m-icon--spacer);
298
- }
299
-
300
269
  .pf-c-alert {
301
270
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
302
271
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
@@ -529,6 +498,37 @@
529
498
  --pf-c-alert--m-inline--m-info--BackgroundColor: var(--pf-global--palette--black-600);
530
499
  }
531
500
 
501
+ .pf-c-action-list {
502
+ --pf-c-action-list--m-icon--spacer: 0;
503
+ --pf-c-action-list--child--spacer-base: var(--pf-global--spacer--md);
504
+ --pf-c-action-list--group--spacer-base: var(--pf-global--spacer--2xl);
505
+ }
506
+
507
+ .pf-c-action-list,
508
+ .pf-c-action-list__group {
509
+ --pf-c-action-list--child--spacer: var(--pf-c-action-list--child--spacer-base);
510
+ --pf-c-action-list--group--spacer: var(--pf-c-action-list--group--spacer-base);
511
+ display: flex;
512
+ align-items: center;
513
+ }
514
+
515
+ .pf-c-action-list > * + *,
516
+ .pf-c-action-list__group > * + * {
517
+ margin-left: var(--pf-c-action-list--child--spacer);
518
+ }
519
+
520
+ .pf-c-action-list > * + .pf-c-action-list__group,
521
+ .pf-c-action-list .pf-c-action-list__group + *,
522
+ .pf-c-action-list__group > * + .pf-c-action-list__group,
523
+ .pf-c-action-list__group .pf-c-action-list__group + * {
524
+ margin-left: var(--pf-c-action-list--group--spacer);
525
+ }
526
+
527
+ .pf-c-action-list.pf-m-icons,
528
+ .pf-c-action-list__group.pf-m-icons {
529
+ --pf-c-action-list--child--spacer: var(--pf-c-action-list--m-icon--spacer);
530
+ }
531
+
532
532
  .pf-c-app-launcher {
533
533
  --pf-c-app-launcher__menu--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
534
534
  --pf-c-app-launcher__menu--BoxShadow: var(--pf-global--BoxShadow--md);
@@ -587,8 +587,8 @@
587
587
  --pf-c-app-launcher__group-title--PaddingRight: var(--pf-c-app-launcher__menu-item--PaddingRight);
588
588
  --pf-c-app-launcher__group-title--PaddingBottom: var(--pf-c-app-launcher__menu-item--PaddingBottom);
589
589
  --pf-c-app-launcher__group-title--PaddingLeft: var(--pf-c-app-launcher__menu-item--PaddingLeft);
590
- --pf-c-app-launcher__group-title--FontSize: var(--pf-global--FontSize--sm);
591
- --pf-c-app-launcher__group-title--FontWeight: var(--pf-global--FontWeight--semi-bold);
590
+ --pf-c-app-launcher__group-title--FontSize: var(--pf-global--FontSize--xs);
591
+ --pf-c-app-launcher__group-title--FontWeight: var(--pf-global--FontWeight--normal);
592
592
  --pf-c-app-launcher__group-title--Color: var(--pf-global--Color--dark-200);
593
593
  --pf-c-app-launcher--c-divider--MarginTop: var(--pf-global--spacer--sm);
594
594
  --pf-c-app-launcher--c-divider--MarginBottom: var(--pf-global--spacer--sm);
@@ -766,8 +766,6 @@
766
766
  --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-global--Color--200);
767
767
  --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--Color: var(--pf-global--palette--gold-300);
768
768
  --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--hover--Color: var(--pf-global--palette--gold-100);
769
- --pf-c-app-launcher__group-title--FontSize: var(--pf-global--FontSize--xs);
770
- --pf-c-app-launcher__group-title--FontWeight: var(--pf-global--FontWeight--bold);
771
769
  }
772
770
 
773
771
  .pf-c-form-control {
@@ -3940,6 +3938,86 @@ label.pf-c-check, .pf-c-check__label,
3940
3938
  border-top: 1px solid var(--pf-global--BorderColor--300);
3941
3939
  }
3942
3940
 
3941
+ .pf-c-data-list {
3942
+ --pf-global--Color--100: var(--pf-global--Color--dark-100);
3943
+ --pf-global--Color--200: var(--pf-global--Color--dark-200);
3944
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
3945
+ --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
3946
+ --pf-global--link--Color: var(--pf-global--link--Color--dark);
3947
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
3948
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
3949
+ }
3950
+
3951
+ .pf-c-data-list__item-action {
3952
+ --pf-hidden-visible--visible--Visibility: visible;
3953
+ --pf-hidden-visible--hidden--Display: none;
3954
+ --pf-hidden-visible--hidden--Visibility: hidden;
3955
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
3956
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
3957
+ display: var(--pf-hidden-visible--Display);
3958
+ visibility: var(--pf-hidden-visible--Visibility);
3959
+ }
3960
+
3961
+ .pf-m-hidden.pf-c-data-list__item-action {
3962
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
3963
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
3964
+ }
3965
+
3966
+ @media screen and (min-width: 576px) {
3967
+ .pf-m-hidden-on-sm.pf-c-data-list__item-action {
3968
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
3969
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
3970
+ }
3971
+
3972
+ .pf-m-visible-on-sm.pf-c-data-list__item-action {
3973
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
3974
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
3975
+ }
3976
+ }
3977
+ @media screen and (min-width: 768px) {
3978
+ .pf-m-hidden-on-md.pf-c-data-list__item-action {
3979
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
3980
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
3981
+ }
3982
+
3983
+ .pf-m-visible-on-md.pf-c-data-list__item-action {
3984
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
3985
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
3986
+ }
3987
+ }
3988
+ @media screen and (min-width: 992px) {
3989
+ .pf-m-hidden-on-lg.pf-c-data-list__item-action {
3990
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
3991
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
3992
+ }
3993
+
3994
+ .pf-m-visible-on-lg.pf-c-data-list__item-action {
3995
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
3996
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
3997
+ }
3998
+ }
3999
+ @media screen and (min-width: 1200px) {
4000
+ .pf-m-hidden-on-xl.pf-c-data-list__item-action {
4001
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4002
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4003
+ }
4004
+
4005
+ .pf-m-visible-on-xl.pf-c-data-list__item-action {
4006
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4007
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4008
+ }
4009
+ }
4010
+ @media screen and (min-width: 1450px) {
4011
+ .pf-m-hidden-on-2xl.pf-c-data-list__item-action {
4012
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4013
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4014
+ }
4015
+
4016
+ .pf-m-visible-on-2xl.pf-c-data-list__item-action {
4017
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4018
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4019
+ }
4020
+ }
3943
4021
  @media screen and (min-width: 768px) {
3944
4022
  .pf-c-data-list:not([class*=pf-m-grid]) {
3945
4023
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
@@ -4417,359 +4495,449 @@ label.pf-c-check, .pf-c-check__label,
4417
4495
  }
4418
4496
  }
4419
4497
  .pf-c-data-list {
4420
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
4421
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
4422
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
4423
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
4424
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
4425
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
4426
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
4427
- }
4428
-
4429
- .pf-c-data-list__item-action {
4430
- --pf-hidden-visible--visible--Visibility: visible;
4431
- --pf-hidden-visible--hidden--Display: none;
4432
- --pf-hidden-visible--hidden--Visibility: hidden;
4433
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4434
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4435
- display: var(--pf-hidden-visible--Display);
4436
- visibility: var(--pf-hidden-visible--Visibility);
4437
- }
4438
-
4439
- .pf-m-hidden.pf-c-data-list__item-action {
4440
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4441
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4442
- }
4443
-
4444
- @media screen and (min-width: 576px) {
4445
- .pf-m-hidden-on-sm.pf-c-data-list__item-action {
4446
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4447
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4448
- }
4449
-
4450
- .pf-m-visible-on-sm.pf-c-data-list__item-action {
4451
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4452
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4453
- }
4454
- }
4455
- @media screen and (min-width: 768px) {
4456
- .pf-m-hidden-on-md.pf-c-data-list__item-action {
4457
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4458
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4459
- }
4460
-
4461
- .pf-m-visible-on-md.pf-c-data-list__item-action {
4462
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4463
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4464
- }
4465
- }
4466
- @media screen and (min-width: 992px) {
4467
- .pf-m-hidden-on-lg.pf-c-data-list__item-action {
4468
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4469
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4470
- }
4471
-
4472
- .pf-m-visible-on-lg.pf-c-data-list__item-action {
4473
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4474
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4475
- }
4476
- }
4477
- @media screen and (min-width: 1200px) {
4478
- .pf-m-hidden-on-xl.pf-c-data-list__item-action {
4479
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4480
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4481
- }
4482
-
4483
- .pf-m-visible-on-xl.pf-c-data-list__item-action {
4484
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4485
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4486
- }
4487
- }
4488
- @media screen and (min-width: 1450px) {
4489
- .pf-m-hidden-on-2xl.pf-c-data-list__item-action {
4490
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4491
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4492
- }
4493
-
4494
- .pf-m-visible-on-2xl.pf-c-data-list__item-action {
4495
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4496
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4497
- }
4498
- }
4499
- @media screen and (min-width: 768px) {
4500
- .pf-c-data-list:not([class*=pf-m-grid]) {
4501
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
4502
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
4503
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
4504
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
4505
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
4506
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
4507
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
4508
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
4509
- }
4510
- }
4511
- @media screen and (min-width: 768px) and (min-width: 1200px) {
4512
- .pf-c-data-list:not([class*=pf-m-grid]) {
4513
- --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
4514
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
4515
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
4516
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
4517
- }
4518
- }
4519
- @media screen and (min-width: 768px) {
4520
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__item-content {
4521
- display: flex;
4522
- flex-wrap: wrap;
4523
- flex-grow: 1;
4524
- padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
4525
- }
4526
- }
4527
- @media screen and (min-width: 768px) {
4528
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4529
- margin-right: var(--pf-c-data-list__cell--MarginRight);
4530
- }
4531
-
4532
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell + .pf-c-data-list__cell {
4533
- flex: 1;
4534
- order: initial;
4535
- }
4498
+ --pf-c-data-list--FontSize: 1em;
4499
+ --pf-c-data-list--LineHeight: var(--pf-global--LineHeight--md);
4500
+ --pf-c-data-list--BorderTopColor: var(--pf-global--BorderColor--300);
4501
+ --pf-c-data-list--BorderTopWidth: var(--pf-global--spacer--sm);
4502
+ --pf-c-data-list--sm--BorderTopWidth: var(--pf-global--BorderWidth--sm);
4503
+ --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);
4504
+ --pf-c-data-list__item--BackgroundColor: var(--pf-global--BackgroundColor--100);
4505
+ --pf-c-data-list__item--m-selected--ZIndex: var(--pf-global--ZIndex--xs);
4506
+ --pf-c-data-list__item--m-expanded--before--BackgroundColor: var(--pf-global--active-color--100);
4507
+ --pf-c-data-list__item--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
4508
+ --pf-c-data-list__item--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4509
+ --pf-c-data-list__item--m-selectable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
4510
+ --pf-c-data-list__item--m-selectable--hover--ZIndex: calc(var(--pf-c-data-list__item--m-selected--ZIndex) + 1);
4511
+ --pf-c-data-list__item--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4512
+ --pf-c-data-list__item--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4513
+ --pf-c-data-list__item--m-selectable--active--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4514
+ --pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor: var(--pf-global--active-color--300);
4515
+ --pf-c-data-list__item--BorderBottomColor: var(--pf-global--BorderColor--300);
4516
+ --pf-c-data-list__item--BorderBottomWidth: 0.5rem;
4517
+ --pf-c-data-list__item--m-selectable--hover--item--BorderTopColor: var(--pf-c-data-list__item--BorderBottomColor);
4518
+ --pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth: var(--pf-c-data-list__item--BorderBottomWidth);
4519
+ --pf-c-data-list__item--sm--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
4520
+ --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
4521
+ --pf-c-data-list__item--before--BackgroundColor: transparent;
4522
+ --pf-c-data-list__item--before--Width: var(--pf-global--BorderWidth--lg);
4523
+ --pf-c-data-list__item--before--Transition: var(--pf-global--Transition);
4524
+ --pf-c-data-list__item--before--Top: 0;
4525
+ --pf-c-data-list__item--before--sm--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
4526
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-global--spacer--md);
4527
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-global--spacer--md);
4528
+ --pf-c-data-list__item-row--xl--PaddingRight: var(--pf-global--spacer--lg);
4529
+ --pf-c-data-list__item-row--xl--PaddingLeft: var(--pf-global--spacer--lg);
4530
+ --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-global--spacer--lg);
4531
+ --pf-c-data-list__cell--PaddingTop: var(--pf-global--spacer--lg);
4532
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-global--spacer--lg);
4533
+ --pf-c-data-list__cell--MarginRight: var(--pf-global--spacer--xl);
4534
+ --pf-c-data-list__cell--md--PaddingBottom: 0;
4535
+ --pf-c-data-list__cell--m-icon--MarginRight: var(--pf-global--spacer--md);
4536
+ --pf-c-data-list__cell--cell--PaddingTop: 0;
4537
+ --pf-c-data-list__cell--cell--md--PaddingTop: var(--pf-global--spacer--lg);
4538
+ --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--lg);
4539
+ --pf-c-data-list--cell--MinWidth: initial;
4540
+ --pf-c-data-list--cell--Overflow: visible;
4541
+ --pf-c-data-list--cell--TextOverflow: clip;
4542
+ --pf-c-data-list--cell--WhiteSpace: normal;
4543
+ --pf-c-data-list--cell--WordBreak: normal;
4544
+ --pf-c-data-list--cell--m-truncate--MinWidth: 5ch;
4545
+ --pf-c-data-list__toggle--MarginLeft: calc(var(--pf-global--spacer--sm) * -1);
4546
+ --pf-c-data-list__toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
4547
+ --pf-c-data-list__toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
4548
+ --pf-c-data-list__toggle-icon--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
4549
+ --pf-c-data-list__toggle-icon--Transition: .2s ease-in 0s;
4550
+ --pf-c-data-list__toggle-icon--Rotate: 0;
4551
+ --pf-c-data-list__item--m-expanded__toggle-icon--Rotate: 90deg;
4552
+ --pf-c-data-list__item-draggable-button--PaddingLeft: var(--pf-global--spacer--md);
4553
+ --pf-c-data-list__item-draggable-button--PaddingRight: var(--pf-global--spacer--md);
4554
+ --pf-c-data-list__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--lg) * -1);
4555
+ --pf-c-data-list__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--lg) * -1);
4556
+ --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-global--spacer--lg);
4557
+ --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-global--spacer--lg);
4558
+ --pf-c-data-list__item-draggable-button--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
4559
+ --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-global--icon--Color--light);
4560
+ --pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color: var(--pf-global--disabled-color--200);
4561
+ --pf-c-data-list__item-draggable-button--hover__draggable-icon--Color: var(--pf-global--icon--Color--dark);
4562
+ --pf-c-data-list__item-draggable-button--focus__draggable-icon--Color: var(--pf-global--icon--Color--dark);
4563
+ --pf-c-data-list__item--m-ghost-row--after--BackgroundColor: var(--pf-global--BackgroundColor--100);
4564
+ --pf-c-data-list__item--m-ghost-row--after--Opacity: .6;
4565
+ --pf-c-data-list__item-control--PaddingTop: var(--pf-global--spacer--lg);
4566
+ --pf-c-data-list__item-control--PaddingBottom: var(--pf-global--spacer--lg);
4567
+ --pf-c-data-list__item-control--MarginRight: var(--pf-global--spacer--md);
4568
+ --pf-c-data-list__item-control--md--MarginRight: var(--pf-global--spacer--xl);
4569
+ --pf-c-data-list__item-control--not-last-child--MarginRight: var(--pf-global--spacer--md);
4570
+ --pf-c-data-list__check--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
4571
+ --pf-c-data-list__check--MarginTop: -0.0625rem;
4572
+ --pf-c-data-list__item-action--Display: flex;
4573
+ --pf-c-data-list__item-action--PaddingTop: var(--pf-global--spacer--lg);
4574
+ --pf-c-data-list__item-action--PaddingBottom: var(--pf-global--spacer--lg);
4575
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-global--spacer--md);
4576
+ --pf-c-data-list__item-action--md--MarginLeft: var(--pf-global--spacer--xl);
4577
+ --pf-c-data-list__item-action--not-last-child--MarginRight: var(--pf-global--spacer--md);
4578
+ --pf-c-data-list__item-action__action--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
4579
+ --pf-c-data-list__action--MarginTop: var(--pf-c-data-list__item-action__action--MarginTop);
4580
+ --pf-c-data-list__item-action__action--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
4581
+ --pf-c-data-list__expandable-content--BorderTopWidth: var(--pf-global--BorderWidth--sm);
4582
+ --pf-c-data-list__expandable-content--BorderTopColor: var(--pf-global--BorderColor--100);
4583
+ --pf-c-data-list__expandable-content--MarginRight: calc(var(--pf-c-data-list__expandable-content-body--PaddingRight) * -1);
4584
+ --pf-c-data-list__expandable-content--MarginLeft: calc(var(--pf-c-data-list__expandable-content-body--PaddingLeft) * -1);
4585
+ --pf-c-data-list__expandable-content--MaxHeight: 37.5rem;
4586
+ --pf-c-data-list__expandable-content--before--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
4587
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-global--spacer--md);
4588
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-global--spacer--md);
4589
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-global--spacer--md);
4590
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-global--spacer--md);
4591
+ --pf-c-data-list__expandable-content-body--md--PaddingTop: var(--pf-global--spacer--lg);
4592
+ --pf-c-data-list__expandable-content-body--xl--PaddingRight: var(--pf-global--spacer--lg);
4593
+ --pf-c-data-list__expandable-content-body--md--PaddingBottom: var(--pf-global--spacer--lg);
4594
+ --pf-c-data-list__expandable-content-body--xl--PaddingLeft: var(--pf-global--spacer--lg);
4595
+ --pf-c-data-list--m-compact--FontSize: var(--pf-global--FontSize--sm);
4596
+ --pf-c-data-list--m-compact--LineHeight: var(--pf-global--LineHeight--sm);
4597
+ --pf-c-data-list--m-compact__check--FontSize: var(--pf-global--FontSize--md);
4598
+ --pf-c-data-list--m-compact__cell--PaddingTop: var(--pf-global--spacer--sm);
4599
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-global--spacer--sm);
4600
+ --pf-c-data-list--m-compact__cell--md--PaddingBottom: 0;
4601
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: 0;
4602
+ --pf-c-data-list--m-compact__cell-cell--md--PaddingTop: var(--pf-global--spacer--sm);
4603
+ --pf-c-data-list--m-compact__cell--cell--MarginRight: var(--pf-global--spacer--md);
4604
+ --pf-c-data-list--m-compact__item-control--PaddingTop: var(--pf-global--spacer--sm);
4605
+ --pf-c-data-list--m-compact__item-control--PaddingBottom: var(--pf-global--spacer--sm);
4606
+ --pf-c-data-list--m-compact__item-control--MarginRight: var(--pf-global--spacer--md);
4607
+ --pf-c-data-list--m-compact__item-action--PaddingTop: var(--pf-global--spacer--sm);
4608
+ --pf-c-data-list--m-compact__item-action--PaddingBottom: var(--pf-global--spacer--sm);
4609
+ --pf-c-data-list--m-compact__item-action--MarginLeft: var(--pf-global--spacer--md);
4610
+ --pf-c-data-list--m-compact__item-action__action--MarginTop: calc(var(--pf-c-data-list--m-compact__item-action--PaddingTop) * -1);
4611
+ --pf-c-data-list--m-compact__item-action__action--MarginBottom: calc(var(--pf-c-data-list--m-compact__item-action--PaddingBottom) * -1);
4612
+ --pf-c-data-list--m-compact__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
4613
+ --pf-c-data-list--m-compact__item-content--PaddingBottom: var(--pf-global--spacer--sm);
4614
+ --pf-c-data-list--m-compact__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
4615
+ --pf-c-data-list--m-compact__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--sm) * -1);
4616
+ --pf-c-data-list--m-compact__item-draggable-button--PaddingTop: var(--pf-global--spacer--sm);
4617
+ --pf-c-data-list--m-compact__item-draggable-button--PaddingBottom: var(--pf-global--spacer--sm);
4618
+ --pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--sm);
4619
+ color: var(--pf-global--Color--100);
4620
+ font-size: var(--pf-c-data-list--FontSize);
4621
+ line-height: var(--pf-c-data-list--LineHeight);
4622
+ overflow-wrap: break-word;
4623
+ list-style-type: disc;
4624
+ border-top: var(--pf-c-data-list--BorderTopWidth) solid var(--pf-c-data-list--BorderTopColor);
4625
+ }
4536
4626
 
4537
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-align-right {
4538
- margin-left: auto;
4627
+ @media screen and (min-width: 576px) {
4628
+ .pf-c-data-list {
4629
+ --pf-c-data-list--BorderTopColor: var(--pf-c-data-list--sm--BorderTopColor);
4630
+ --pf-c-data-list--BorderTopWidth: var(--pf-c-data-list--sm--BorderTopWidth);
4539
4631
  }
4540
-
4541
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-no-fill {
4542
- flex: none;
4632
+ }
4633
+ @media screen and (min-width: 576px) {
4634
+ .pf-c-data-list {
4635
+ --pf-c-data-list__item--BorderBottomWidth: var(--pf-c-data-list__item--sm--BorderBottomWidth);
4636
+ --pf-c-data-list__item--BorderBottomColor: var(--pf-c-data-list__item--sm--BorderBottomColor);
4543
4637
  }
4544
-
4545
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-2 {
4546
- flex-grow: 2;
4638
+ }
4639
+ @media (min-width: 576px) {
4640
+ .pf-c-data-list {
4641
+ --pf-c-data-list__item--before--Top: var(--pf-c-data-list__item--before--sm--Top);
4547
4642
  }
4643
+ }
4644
+ .pf-c-data-list.pf-m-compact {
4645
+ --pf-c-data-list__check--FontSize: var(--pf-c-data-list--m-compact__check--FontSize);
4646
+ --pf-c-data-list__action--MarginTop: var(--pf-c-data-list--m-compact__action--MarginTop);
4647
+ --pf-c-data-list--FontSize: var(--pf-c-data-list--m-compact--FontSize);
4648
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list--m-compact__item-action--MarginLeft);
4649
+ --pf-c-data-list__item-action--PaddingTop: var(--pf-c-data-list--m-compact__item-action--PaddingTop);
4650
+ --pf-c-data-list__item-action--PaddingBottom: var(--pf-c-data-list--m-compact__item-action--PaddingBottom);
4651
+ --pf-c-data-list__item-action__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
4652
+ --pf-c-data-list__item-action__action--MarginBottom: var(--pf-c-data-list--m-compact__item-action__action--MarginBottom);
4653
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list--m-compact__item-control--MarginRight);
4654
+ --pf-c-data-list__item-control--PaddingTop: var(--pf-c-data-list--m-compact__item-control--PaddingTop);
4655
+ --pf-c-data-list__item-control--PaddingBottom: var(--pf-c-data-list--m-compact__item-control--PaddingBottom);
4656
+ --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-c-data-list--m-compact__item-content--PaddingBottom);
4657
+ --pf-c-data-list__item-draggable-button--MarginTop: var(--pf-c-data-list--m-compact__item-draggable-button--MarginTop);
4658
+ --pf-c-data-list__item-draggable-button--MarginBottom: var(--pf-c-data-list--m-compact__item-draggable-button--MarginBottom);
4659
+ --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingTop);
4660
+ --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingBottom);
4661
+ --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop);
4662
+ font-size: var(--pf-c-data-list--m-compact--FontSize);
4663
+ }
4548
4664
 
4549
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-3 {
4550
- flex-grow: 3;
4551
- }
4665
+ .pf-c-data-list.pf-m-compact .pf-c-data-list__cell {
4666
+ --pf-c-data-list__cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--PaddingTop);
4667
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--PaddingBottom);
4668
+ --pf-c-data-list__cell--MarginRight: var(--pf-c-data-list--m-compact__cell--cell--MarginRight);
4669
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--PaddingTop);
4670
+ }
4552
4671
 
4553
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-4 {
4554
- flex-grow: 4;
4555
- }
4672
+ .pf-c-data-list.pf-m-compact .pf-c-data-list__check {
4673
+ font-size: var(--pf-c-data-list--m-compact__check--FontSize);
4674
+ }
4556
4675
 
4557
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-5 {
4558
- flex-grow: 5;
4559
- }
4676
+ .pf-c-data-list.pf-m-drag-over {
4677
+ overflow-anchor: none;
4560
4678
  }
4561
- @media screen and (min-width: 768px) {
4562
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__expandable-content {
4563
- max-height: initial;
4564
- overflow-y: visible;
4565
- }
4679
+
4680
+ .pf-c-data-list.pf-m-truncate,
4681
+ .pf-c-data-list__item-row.pf-m-truncate,
4682
+ .pf-c-data-list__cell.pf-m-truncate,
4683
+ .pf-c-data-list__text.pf-m-truncate {
4684
+ --pf-c-data-list--cell--MinWidth: var(--pf-c-data-list--cell--m-truncate--MinWidth);
4685
+ --pf-c-data-list--cell--Overflow: hidden;
4686
+ --pf-c-data-list--cell--TextOverflow: ellipsis;
4687
+ --pf-c-data-list--cell--WhiteSpace: nowrap;
4566
4688
  }
4567
- @media screen and (min-width: 0) {
4568
- .pf-c-data-list.pf-m-grid-none {
4569
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
4570
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
4571
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
4572
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
4573
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
4574
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
4575
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
4576
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
4577
- }
4689
+
4690
+ .pf-c-data-list.pf-m-break-word,
4691
+ .pf-c-data-list__item-row.pf-m-break-word,
4692
+ .pf-c-data-list__cell.pf-m-break-word,
4693
+ .pf-c-data-list__text.pf-m-break-word {
4694
+ --pf-c-data-list--cell--WordBreak: break-word;
4578
4695
  }
4579
- @media screen and (min-width: 0) and (min-width: 1200px) {
4580
- .pf-c-data-list.pf-m-grid-none {
4581
- --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
4582
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
4583
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
4584
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
4585
- }
4696
+
4697
+ .pf-c-data-list.pf-m-nowrap,
4698
+ .pf-c-data-list__item-row.pf-m-nowrap,
4699
+ .pf-c-data-list__cell.pf-m-nowrap,
4700
+ .pf-c-data-list__text.pf-m-nowrap {
4701
+ --pf-c-data-list--cell--WhiteSpace: nowrap;
4586
4702
  }
4587
- @media screen and (min-width: 0) {
4588
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__item-content {
4589
- display: flex;
4590
- flex-wrap: wrap;
4591
- flex-grow: 1;
4592
- padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
4593
- }
4703
+
4704
+ .pf-c-data-list__item {
4705
+ position: relative;
4706
+ display: flex;
4707
+ flex-direction: column;
4708
+ background-color: var(--pf-c-data-list__item--BackgroundColor);
4709
+ border-bottom: var(--pf-c-data-list__item--BorderBottomWidth) solid var(--pf-c-data-list__item--BorderBottomColor);
4594
4710
  }
4595
- @media screen and (min-width: 0) {
4596
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4597
- margin-right: var(--pf-c-data-list__cell--MarginRight);
4598
- }
4599
4711
 
4600
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell + .pf-c-data-list__cell {
4601
- flex: 1;
4602
- order: initial;
4603
- }
4712
+ .pf-c-data-list__item::before {
4713
+ position: absolute;
4714
+ top: var(--pf-c-data-list__item--before--Top);
4715
+ bottom: 0;
4716
+ left: 0;
4717
+ width: var(--pf-c-data-list__item--before--Width);
4718
+ content: "";
4719
+ background-color: var(--pf-c-data-list__item--before--BackgroundColor);
4720
+ transition: var(--pf-c-data-list__item--before--Transition);
4721
+ }
4604
4722
 
4605
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-align-right {
4606
- margin-left: auto;
4607
- }
4723
+ .pf-c-data-list__item.pf-m-selectable {
4724
+ cursor: pointer;
4725
+ outline-offset: var(--pf-c-data-list__item--m-selectable--OutlineOffset);
4726
+ }
4608
4727
 
4609
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-no-fill {
4610
- flex: none;
4611
- }
4728
+ .pf-c-data-list__item.pf-m-selectable:hover, .pf-c-data-list__item.pf-m-selectable:focus {
4729
+ position: relative;
4730
+ z-index: var(--pf-c-data-list__item--m-selectable--hover--ZIndex);
4731
+ }
4732
+
4733
+ .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) {
4734
+ --pf-c-data-list__item--BorderBottomWidth: 0;
4735
+ }
4736
+
4737
+ .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 {
4738
+ 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);
4739
+ }
4740
+
4741
+ .pf-c-data-list__item.pf-m-selectable:hover {
4742
+ box-shadow: var(--pf-c-data-list__item--m-selectable--hover--BoxShadow);
4743
+ }
4744
+
4745
+ .pf-c-data-list__item.pf-m-selectable:focus {
4746
+ box-shadow: var(--pf-c-data-list__item--m-selectable--focus--BoxShadow);
4747
+ }
4748
+
4749
+ .pf-c-data-list__item.pf-m-selectable:active {
4750
+ box-shadow: var(--pf-c-data-list__item--m-selectable--active--BoxShadow);
4751
+ }
4752
+
4753
+ .pf-c-data-list__item.pf-m-selected {
4754
+ --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-selected--before--BackgroundColor);
4755
+ position: relative;
4756
+ z-index: var(--pf-c-data-list__item--m-selected--ZIndex);
4757
+ box-shadow: var(--pf-c-data-list__item--m-selected--BoxShadow);
4758
+ }
4759
+
4760
+ .pf-c-data-list__item.pf-m-ghost-row::after {
4761
+ position: absolute;
4762
+ top: 0;
4763
+ right: 0;
4764
+ bottom: 0;
4765
+ left: 0;
4766
+ content: "";
4767
+ background-color: var(--pf-c-data-list__item--m-ghost-row--after--BackgroundColor);
4768
+ opacity: var(--pf-c-data-list__item--m-ghost-row--after--Opacity);
4769
+ }
4770
+
4771
+ .pf-c-data-list__item.pf-m-expanded {
4772
+ --pf-c-data-list__toggle-icon--Rotate: var(--pf-c-data-list__item--m-expanded__toggle-icon--Rotate);
4773
+ --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--before--BackgroundColor);
4774
+ }
4775
+
4776
+ .pf-c-data-list__item.pf-m-expanded.pf-m-selectable:not(.pf-m-selected) {
4777
+ --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor);
4778
+ }
4612
4779
 
4613
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-2 {
4614
- flex-grow: 2;
4615
- }
4780
+ .pf-c-data-list__item-row {
4781
+ display: flex;
4782
+ flex-wrap: nowrap;
4783
+ padding-right: var(--pf-c-data-list__item-row--PaddingRight);
4784
+ padding-left: var(--pf-c-data-list__item-row--PaddingLeft);
4785
+ }
4616
4786
 
4617
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-3 {
4618
- flex-grow: 3;
4619
- }
4787
+ .pf-c-data-list__item-control {
4788
+ display: flex;
4789
+ flex-wrap: nowrap;
4790
+ padding-top: var(--pf-c-data-list__item-control--PaddingTop);
4791
+ padding-bottom: var(--pf-c-data-list__item-control--PaddingBottom);
4792
+ margin-right: var(--pf-c-data-list__item-control--MarginRight);
4793
+ }
4620
4794
 
4621
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-4 {
4622
- flex-grow: 4;
4623
- }
4795
+ .pf-c-data-list__item-control > *:not(:last-child) {
4796
+ margin-right: var(--pf-c-data-list__item-control--not-last-child--MarginRight);
4797
+ }
4624
4798
 
4625
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-5 {
4626
- flex-grow: 5;
4627
- }
4799
+ .pf-c-data-list__check {
4800
+ display: flex;
4801
+ align-items: center;
4802
+ align-self: flex-start;
4803
+ height: var(--pf-c-data-list__check--Height);
4804
+ margin-top: var(--pf-c-data-list__check--MarginTop);
4628
4805
  }
4629
- @media screen and (min-width: 0) {
4630
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__expandable-content {
4631
- max-height: initial;
4632
- overflow-y: visible;
4633
- }
4806
+
4807
+ .pf-c-data-list__check > input {
4808
+ cursor: pointer;
4634
4809
  }
4635
- @media screen and (min-width: 576px) {
4636
- .pf-c-data-list.pf-m-grid-sm {
4637
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
4638
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
4639
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
4640
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
4641
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
4642
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
4643
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
4644
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
4645
- }
4810
+
4811
+ .pf-c-data-list__item-draggable-button {
4812
+ display: flex;
4813
+ flex-direction: column;
4814
+ 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);
4815
+ 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);
4816
+ border: 0;
4646
4817
  }
4647
- @media screen and (min-width: 576px) and (min-width: 1200px) {
4648
- .pf-c-data-list.pf-m-grid-sm {
4649
- --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
4650
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
4651
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
4652
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
4653
- }
4818
+
4819
+ .pf-c-data-list__item-draggable-button:hover {
4820
+ --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--hover__draggable-icon--Color);
4821
+ cursor: grab;
4654
4822
  }
4655
- @media screen and (min-width: 576px) {
4656
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__item-content {
4657
- display: flex;
4658
- flex-wrap: wrap;
4659
- flex-grow: 1;
4660
- padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
4661
- }
4823
+
4824
+ .pf-c-data-list__item-draggable-button:focus {
4825
+ --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--focus__draggable-icon--Color);
4662
4826
  }
4663
- @media screen and (min-width: 576px) {
4664
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4665
- margin-right: var(--pf-c-data-list__cell--MarginRight);
4666
- }
4667
4827
 
4668
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell + .pf-c-data-list__cell {
4669
- flex: 1;
4670
- order: initial;
4671
- }
4828
+ .pf-c-data-list__item-draggable-button:active {
4829
+ cursor: grabbing;
4830
+ }
4672
4831
 
4673
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-align-right {
4674
- margin-left: auto;
4675
- }
4832
+ .pf-c-data-list__item-draggable-button.pf-m-disabled {
4833
+ --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color);
4834
+ pointer-events: none;
4835
+ }
4676
4836
 
4677
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-no-fill {
4678
- flex: none;
4679
- }
4837
+ .pf-c-data-list__item-draggable-button .pf-c-data-list__item-draggable-icon {
4838
+ color: var(--pf-c-data-list__item-draggable-button-icon--Color);
4839
+ }
4680
4840
 
4681
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-2 {
4682
- flex-grow: 2;
4683
- }
4841
+ .pf-c-data-list__item-action {
4842
+ --pf-hidden-visible--visible--Display: var(--pf-c-data-list__item-action--Display);
4843
+ align-items: flex-start;
4844
+ align-content: flex-start;
4845
+ padding-top: var(--pf-c-data-list__item-action--PaddingTop);
4846
+ padding-bottom: var(--pf-c-data-list__item-action--PaddingBottom);
4847
+ margin-left: var(--pf-c-data-list__item-action--MarginLeft);
4848
+ }
4684
4849
 
4685
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-3 {
4686
- flex-grow: 3;
4687
- }
4850
+ .pf-c-data-list__item-action > *:not(:last-child) {
4851
+ margin-right: var(--pf-c-data-list__item-action--not-last-child--MarginRight);
4852
+ }
4688
4853
 
4689
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-4 {
4690
- flex-grow: 4;
4691
- }
4854
+ .pf-c-data-list__item-action .pf-c-data-list__action {
4855
+ margin-top: var(--pf-c-data-list__action--MarginTop);
4856
+ margin-bottom: var(--pf-c-data-list__item-action__action--MarginBottom);
4857
+ }
4692
4858
 
4693
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-5 {
4694
- flex-grow: 5;
4695
- }
4859
+ .pf-c-data-list__toggle {
4860
+ margin: var(--pf-c-data-list__toggle--MarginTop) 0 var(--pf-c-data-list__toggle--MarginBottom) var(--pf-c-data-list__toggle--MarginLeft);
4696
4861
  }
4697
- @media screen and (min-width: 576px) {
4698
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__expandable-content {
4699
- max-height: initial;
4700
- overflow-y: visible;
4701
- }
4862
+
4863
+ .pf-c-data-list__toggle-icon {
4864
+ height: var(--pf-c-data-list__toggle-icon--Height);
4865
+ pointer-events: none;
4866
+ transition: var(--pf-c-data-list__toggle-icon--Transition);
4867
+ transform: rotate(var(--pf-c-data-list__toggle-icon--Rotate));
4702
4868
  }
4703
- @media screen and (min-width: 768px) {
4704
- .pf-c-data-list.pf-m-grid-md {
4705
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
4706
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
4707
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
4708
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
4709
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
4710
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
4711
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
4712
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
4713
- }
4869
+
4870
+ .pf-c-data-list__item-content {
4871
+ display: grid;
4872
+ width: 100%;
4873
+ grid-template-columns: auto 1fr;
4714
4874
  }
4715
- @media screen and (min-width: 768px) and (min-width: 1200px) {
4716
- .pf-c-data-list.pf-m-grid-md {
4717
- --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
4718
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
4719
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
4720
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
4721
- }
4875
+
4876
+ .pf-c-data-list__cell {
4877
+ flex: 1;
4878
+ grid-column: 1/-1;
4879
+ padding-top: var(--pf-c-data-list__cell--PaddingTop);
4880
+ padding-bottom: var(--pf-c-data-list__cell--PaddingBottom);
4722
4881
  }
4723
- @media screen and (min-width: 768px) {
4724
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__item-content {
4725
- display: flex;
4726
- flex-wrap: wrap;
4727
- flex-grow: 1;
4728
- padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
4729
- }
4882
+
4883
+ .pf-c-data-list__cell + .pf-c-data-list__cell {
4884
+ flex: 1 0 100%;
4885
+ order: 1;
4886
+ padding-top: var(--pf-c-data-list__cell--cell--PaddingTop);
4730
4887
  }
4731
- @media screen and (min-width: 768px) {
4732
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4733
- margin-right: var(--pf-c-data-list__cell--MarginRight);
4734
- }
4735
4888
 
4736
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell + .pf-c-data-list__cell {
4737
- flex: 1;
4738
- order: initial;
4739
- }
4889
+ .pf-c-data-list__cell.pf-m-icon {
4890
+ flex-grow: 0;
4891
+ margin-right: var(--pf-c-data-list__cell--m-icon--MarginRight);
4892
+ grid-column: 1/2;
4893
+ }
4740
4894
 
4741
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-align-right {
4742
- margin-left: auto;
4743
- }
4895
+ .pf-c-data-list__cell.pf-m-icon + .pf-c-data-list__cell {
4896
+ grid-column: 2/3;
4897
+ padding-top: var(--pf-c-data-list__cell--m-icon--cell--PaddingTop);
4898
+ }
4744
4899
 
4745
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-no-fill {
4746
- flex: none;
4747
- }
4900
+ .pf-c-data-list__cell.pf-m-align-right {
4901
+ margin-left: 0;
4902
+ }
4748
4903
 
4749
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-2 {
4750
- flex-grow: 2;
4751
- }
4904
+ .pf-c-data-list__text {
4905
+ display: inline-block;
4906
+ }
4752
4907
 
4753
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-3 {
4754
- flex-grow: 3;
4755
- }
4908
+ .pf-c-data-list__text,
4909
+ .pf-c-data-list__cell {
4910
+ min-width: var(--pf-c-data-list--cell--MinWidth);
4911
+ max-width: 100%;
4912
+ overflow: var(--pf-c-data-list--cell--Overflow);
4913
+ text-overflow: var(--pf-c-data-list--cell--TextOverflow);
4914
+ word-break: var(--pf-c-data-list--cell--WordBreak);
4915
+ white-space: var(--pf-c-data-list--cell--WhiteSpace);
4916
+ }
4756
4917
 
4757
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-4 {
4758
- flex-grow: 4;
4759
- }
4918
+ .pf-c-data-list__expandable-content {
4919
+ max-height: var(--pf-c-data-list__expandable-content--MaxHeight);
4920
+ overflow-y: auto;
4921
+ border-top: var(--pf-c-data-list__expandable-content--BorderTopWidth) solid var(--pf-c-data-list__expandable-content--BorderTopColor);
4922
+ }
4760
4923
 
4761
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-5 {
4762
- flex-grow: 5;
4763
- }
4924
+ .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body {
4925
+ 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);
4764
4926
  }
4765
- @media screen and (min-width: 768px) {
4766
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__expandable-content {
4767
- max-height: initial;
4768
- overflow-y: visible;
4769
- }
4927
+
4928
+ .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body.pf-m-no-padding {
4929
+ padding: 0;
4930
+ }
4931
+
4932
+ :where(.pf-theme-dark) .pf-c-data-list {
4933
+ --pf-c-data-list--BorderTopColor: var(--pf-global--BorderColor--100);
4934
+ --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);
4935
+ --pf-c-data-list__item--BorderBottomColor: var(--pf-global--BorderColor--100);
4936
+ --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
4770
4937
  }
4771
- @media screen and (min-width: 992px) {
4772
- .pf-c-data-list.pf-m-grid-lg {
4938
+
4939
+ @media screen and (min-width: 768px) {
4940
+ .pf-c-data-list:not([class*=pf-m-grid]) {
4773
4941
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
4774
4942
  --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
4775
4943
  --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
@@ -4780,64 +4948,64 @@ label.pf-c-check, .pf-c-check__label,
4780
4948
  --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
4781
4949
  }
4782
4950
  }
4783
- @media screen and (min-width: 992px) and (min-width: 1200px) {
4784
- .pf-c-data-list.pf-m-grid-lg {
4951
+ @media screen and (min-width: 768px) and (min-width: 1200px) {
4952
+ .pf-c-data-list:not([class*=pf-m-grid]) {
4785
4953
  --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
4786
4954
  --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
4787
4955
  --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
4788
4956
  --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
4789
4957
  }
4790
4958
  }
4791
- @media screen and (min-width: 992px) {
4792
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__item-content {
4959
+ @media screen and (min-width: 768px) {
4960
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__item-content {
4793
4961
  display: flex;
4794
4962
  flex-wrap: wrap;
4795
4963
  flex-grow: 1;
4796
4964
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
4797
4965
  }
4798
4966
  }
4799
- @media screen and (min-width: 992px) {
4800
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4967
+ @media screen and (min-width: 768px) {
4968
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4801
4969
  margin-right: var(--pf-c-data-list__cell--MarginRight);
4802
4970
  }
4803
4971
 
4804
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell + .pf-c-data-list__cell {
4972
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell + .pf-c-data-list__cell {
4805
4973
  flex: 1;
4806
4974
  order: initial;
4807
4975
  }
4808
4976
 
4809
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-align-right {
4977
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-align-right {
4810
4978
  margin-left: auto;
4811
4979
  }
4812
4980
 
4813
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-no-fill {
4981
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-no-fill {
4814
4982
  flex: none;
4815
4983
  }
4816
4984
 
4817
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-2 {
4985
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-2 {
4818
4986
  flex-grow: 2;
4819
4987
  }
4820
4988
 
4821
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-3 {
4989
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-3 {
4822
4990
  flex-grow: 3;
4823
4991
  }
4824
4992
 
4825
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-4 {
4993
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-4 {
4826
4994
  flex-grow: 4;
4827
4995
  }
4828
4996
 
4829
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-5 {
4997
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-5 {
4830
4998
  flex-grow: 5;
4831
4999
  }
4832
5000
  }
4833
- @media screen and (min-width: 992px) {
4834
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__expandable-content {
5001
+ @media screen and (min-width: 768px) {
5002
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__expandable-content {
4835
5003
  max-height: initial;
4836
5004
  overflow-y: visible;
4837
5005
  }
4838
5006
  }
4839
- @media screen and (min-width: 1200px) {
4840
- .pf-c-data-list.pf-m-grid-xl {
5007
+ @media screen and (min-width: 0) {
5008
+ .pf-c-data-list.pf-m-grid-none {
4841
5009
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
4842
5010
  --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
4843
5011
  --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
@@ -4848,64 +5016,64 @@ label.pf-c-check, .pf-c-check__label,
4848
5016
  --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
4849
5017
  }
4850
5018
  }
4851
- @media screen and (min-width: 1200px) and (min-width: 1200px) {
4852
- .pf-c-data-list.pf-m-grid-xl {
5019
+ @media screen and (min-width: 0) and (min-width: 1200px) {
5020
+ .pf-c-data-list.pf-m-grid-none {
4853
5021
  --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
4854
5022
  --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
4855
5023
  --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
4856
5024
  --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
4857
5025
  }
4858
5026
  }
4859
- @media screen and (min-width: 1200px) {
4860
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__item-content {
5027
+ @media screen and (min-width: 0) {
5028
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__item-content {
4861
5029
  display: flex;
4862
5030
  flex-wrap: wrap;
4863
5031
  flex-grow: 1;
4864
5032
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
4865
5033
  }
4866
5034
  }
4867
- @media screen and (min-width: 1200px) {
4868
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5035
+ @media screen and (min-width: 0) {
5036
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4869
5037
  margin-right: var(--pf-c-data-list__cell--MarginRight);
4870
5038
  }
4871
5039
 
4872
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell + .pf-c-data-list__cell {
5040
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell + .pf-c-data-list__cell {
4873
5041
  flex: 1;
4874
5042
  order: initial;
4875
5043
  }
4876
5044
 
4877
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-align-right {
5045
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-align-right {
4878
5046
  margin-left: auto;
4879
5047
  }
4880
5048
 
4881
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-no-fill {
5049
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-no-fill {
4882
5050
  flex: none;
4883
5051
  }
4884
5052
 
4885
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-2 {
5053
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-2 {
4886
5054
  flex-grow: 2;
4887
5055
  }
4888
5056
 
4889
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-3 {
5057
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-3 {
4890
5058
  flex-grow: 3;
4891
5059
  }
4892
5060
 
4893
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-4 {
5061
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-4 {
4894
5062
  flex-grow: 4;
4895
5063
  }
4896
5064
 
4897
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-5 {
5065
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-5 {
4898
5066
  flex-grow: 5;
4899
5067
  }
4900
5068
  }
4901
- @media screen and (min-width: 1200px) {
4902
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__expandable-content {
5069
+ @media screen and (min-width: 0) {
5070
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__expandable-content {
4903
5071
  max-height: initial;
4904
5072
  overflow-y: visible;
4905
5073
  }
4906
5074
  }
4907
- @media screen and (min-width: 1450px) {
4908
- .pf-c-data-list.pf-m-grid-2xl {
5075
+ @media screen and (min-width: 576px) {
5076
+ .pf-c-data-list.pf-m-grid-sm {
4909
5077
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
4910
5078
  --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
4911
5079
  --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
@@ -4916,504 +5084,334 @@ label.pf-c-check, .pf-c-check__label,
4916
5084
  --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
4917
5085
  }
4918
5086
  }
4919
- @media screen and (min-width: 1450px) and (min-width: 1200px) {
4920
- .pf-c-data-list.pf-m-grid-2xl {
5087
+ @media screen and (min-width: 576px) and (min-width: 1200px) {
5088
+ .pf-c-data-list.pf-m-grid-sm {
4921
5089
  --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
4922
5090
  --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
4923
5091
  --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
4924
5092
  --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
4925
5093
  }
4926
5094
  }
4927
- @media screen and (min-width: 1450px) {
4928
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__item-content {
5095
+ @media screen and (min-width: 576px) {
5096
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__item-content {
4929
5097
  display: flex;
4930
5098
  flex-wrap: wrap;
4931
5099
  flex-grow: 1;
4932
5100
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
4933
5101
  }
4934
5102
  }
4935
- @media screen and (min-width: 1450px) {
4936
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5103
+ @media screen and (min-width: 576px) {
5104
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4937
5105
  margin-right: var(--pf-c-data-list__cell--MarginRight);
4938
5106
  }
4939
5107
 
4940
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell + .pf-c-data-list__cell {
5108
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell + .pf-c-data-list__cell {
4941
5109
  flex: 1;
4942
- order: initial;
4943
- }
4944
-
4945
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-align-right {
4946
- margin-left: auto;
4947
- }
4948
-
4949
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-no-fill {
4950
- flex: none;
4951
- }
4952
-
4953
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-2 {
4954
- flex-grow: 2;
4955
- }
4956
-
4957
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-3 {
4958
- flex-grow: 3;
4959
- }
4960
-
4961
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-4 {
4962
- flex-grow: 4;
4963
- }
4964
-
4965
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-5 {
4966
- flex-grow: 5;
4967
- }
4968
- }
4969
- @media screen and (min-width: 1450px) {
4970
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__expandable-content {
4971
- max-height: initial;
4972
- overflow-y: visible;
4973
- }
4974
- }
4975
- .pf-c-data-list {
4976
- --pf-c-data-list--FontSize: 1em;
4977
- --pf-c-data-list--LineHeight: var(--pf-global--LineHeight--md);
4978
- --pf-c-data-list--BorderTopColor: var(--pf-global--BorderColor--300);
4979
- --pf-c-data-list--BorderTopWidth: var(--pf-global--spacer--sm);
4980
- --pf-c-data-list--sm--BorderTopWidth: var(--pf-global--BorderWidth--sm);
4981
- --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);
4982
- --pf-c-data-list__item--BackgroundColor: var(--pf-global--BackgroundColor--100);
4983
- --pf-c-data-list__item--m-selected--ZIndex: var(--pf-global--ZIndex--xs);
4984
- --pf-c-data-list__item--m-expanded--before--BackgroundColor: var(--pf-global--active-color--100);
4985
- --pf-c-data-list__item--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
4986
- --pf-c-data-list__item--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4987
- --pf-c-data-list__item--m-selectable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
4988
- --pf-c-data-list__item--m-selectable--hover--ZIndex: calc(var(--pf-c-data-list__item--m-selected--ZIndex) + 1);
4989
- --pf-c-data-list__item--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4990
- --pf-c-data-list__item--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4991
- --pf-c-data-list__item--m-selectable--active--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4992
- --pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor: var(--pf-global--active-color--300);
4993
- --pf-c-data-list__item--BorderBottomColor: var(--pf-global--BorderColor--300);
4994
- --pf-c-data-list__item--BorderBottomWidth: 0.5rem;
4995
- --pf-c-data-list__item--m-selectable--hover--item--BorderTopColor: var(--pf-c-data-list__item--BorderBottomColor);
4996
- --pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth: var(--pf-c-data-list__item--BorderBottomWidth);
4997
- --pf-c-data-list__item--sm--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
4998
- --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
4999
- --pf-c-data-list__item--before--BackgroundColor: transparent;
5000
- --pf-c-data-list__item--before--Width: var(--pf-global--BorderWidth--lg);
5001
- --pf-c-data-list__item--before--Transition: var(--pf-global--Transition);
5002
- --pf-c-data-list__item--before--Top: 0;
5003
- --pf-c-data-list__item--before--sm--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
5004
- --pf-c-data-list__item-row--PaddingRight: var(--pf-global--spacer--md);
5005
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-global--spacer--md);
5006
- --pf-c-data-list__item-row--xl--PaddingRight: var(--pf-global--spacer--lg);
5007
- --pf-c-data-list__item-row--xl--PaddingLeft: var(--pf-global--spacer--lg);
5008
- --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-global--spacer--lg);
5009
- --pf-c-data-list__cell--PaddingTop: var(--pf-global--spacer--lg);
5010
- --pf-c-data-list__cell--PaddingBottom: var(--pf-global--spacer--lg);
5011
- --pf-c-data-list__cell--MarginRight: var(--pf-global--spacer--xl);
5012
- --pf-c-data-list__cell--md--PaddingBottom: 0;
5013
- --pf-c-data-list__cell--m-icon--MarginRight: var(--pf-global--spacer--md);
5014
- --pf-c-data-list__cell--cell--PaddingTop: 0;
5015
- --pf-c-data-list__cell--cell--md--PaddingTop: var(--pf-global--spacer--lg);
5016
- --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--lg);
5017
- --pf-c-data-list--cell--MinWidth: initial;
5018
- --pf-c-data-list--cell--Overflow: visible;
5019
- --pf-c-data-list--cell--TextOverflow: clip;
5020
- --pf-c-data-list--cell--WhiteSpace: normal;
5021
- --pf-c-data-list--cell--WordBreak: normal;
5022
- --pf-c-data-list--cell--m-truncate--MinWidth: 5ch;
5023
- --pf-c-data-list__toggle--MarginLeft: calc(var(--pf-global--spacer--sm) * -1);
5024
- --pf-c-data-list__toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
5025
- --pf-c-data-list__toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
5026
- --pf-c-data-list__toggle-icon--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
5027
- --pf-c-data-list__toggle-icon--Transition: .2s ease-in 0s;
5028
- --pf-c-data-list__toggle-icon--Rotate: 0;
5029
- --pf-c-data-list__item--m-expanded__toggle-icon--Rotate: 90deg;
5030
- --pf-c-data-list__item-draggable-button--PaddingLeft: var(--pf-global--spacer--md);
5031
- --pf-c-data-list__item-draggable-button--PaddingRight: var(--pf-global--spacer--md);
5032
- --pf-c-data-list__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--lg) * -1);
5033
- --pf-c-data-list__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--lg) * -1);
5034
- --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-global--spacer--lg);
5035
- --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-global--spacer--lg);
5036
- --pf-c-data-list__item-draggable-button--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
5037
- --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-global--icon--Color--light);
5038
- --pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color: var(--pf-global--disabled-color--200);
5039
- --pf-c-data-list__item-draggable-button--hover__draggable-icon--Color: var(--pf-global--icon--Color--dark);
5040
- --pf-c-data-list__item-draggable-button--focus__draggable-icon--Color: var(--pf-global--icon--Color--dark);
5041
- --pf-c-data-list__item--m-ghost-row--after--BackgroundColor: var(--pf-global--BackgroundColor--100);
5042
- --pf-c-data-list__item--m-ghost-row--after--Opacity: .6;
5043
- --pf-c-data-list__item-control--PaddingTop: var(--pf-global--spacer--lg);
5044
- --pf-c-data-list__item-control--PaddingBottom: var(--pf-global--spacer--lg);
5045
- --pf-c-data-list__item-control--MarginRight: var(--pf-global--spacer--md);
5046
- --pf-c-data-list__item-control--md--MarginRight: var(--pf-global--spacer--xl);
5047
- --pf-c-data-list__item-control--not-last-child--MarginRight: var(--pf-global--spacer--md);
5048
- --pf-c-data-list__check--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
5049
- --pf-c-data-list__check--MarginTop: -0.0625rem;
5050
- --pf-c-data-list__item-action--Display: flex;
5051
- --pf-c-data-list__item-action--PaddingTop: var(--pf-global--spacer--lg);
5052
- --pf-c-data-list__item-action--PaddingBottom: var(--pf-global--spacer--lg);
5053
- --pf-c-data-list__item-action--MarginLeft: var(--pf-global--spacer--md);
5054
- --pf-c-data-list__item-action--md--MarginLeft: var(--pf-global--spacer--xl);
5055
- --pf-c-data-list__item-action--not-last-child--MarginRight: var(--pf-global--spacer--md);
5056
- --pf-c-data-list__item-action__action--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
5057
- --pf-c-data-list__action--MarginTop: var(--pf-c-data-list__item-action__action--MarginTop);
5058
- --pf-c-data-list__item-action__action--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
5059
- --pf-c-data-list__expandable-content--BorderTopWidth: var(--pf-global--BorderWidth--sm);
5060
- --pf-c-data-list__expandable-content--BorderTopColor: var(--pf-global--BorderColor--100);
5061
- --pf-c-data-list__expandable-content--MarginRight: calc(var(--pf-c-data-list__expandable-content-body--PaddingRight) * -1);
5062
- --pf-c-data-list__expandable-content--MarginLeft: calc(var(--pf-c-data-list__expandable-content-body--PaddingLeft) * -1);
5063
- --pf-c-data-list__expandable-content--MaxHeight: 37.5rem;
5064
- --pf-c-data-list__expandable-content--before--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
5065
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-global--spacer--md);
5066
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-global--spacer--md);
5067
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-global--spacer--md);
5068
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-global--spacer--md);
5069
- --pf-c-data-list__expandable-content-body--md--PaddingTop: var(--pf-global--spacer--lg);
5070
- --pf-c-data-list__expandable-content-body--xl--PaddingRight: var(--pf-global--spacer--lg);
5071
- --pf-c-data-list__expandable-content-body--md--PaddingBottom: var(--pf-global--spacer--lg);
5072
- --pf-c-data-list__expandable-content-body--xl--PaddingLeft: var(--pf-global--spacer--lg);
5073
- --pf-c-data-list--m-compact--FontSize: var(--pf-global--FontSize--sm);
5074
- --pf-c-data-list--m-compact--LineHeight: var(--pf-global--LineHeight--sm);
5075
- --pf-c-data-list--m-compact__check--FontSize: var(--pf-global--FontSize--md);
5076
- --pf-c-data-list--m-compact__cell--PaddingTop: var(--pf-global--spacer--sm);
5077
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-global--spacer--sm);
5078
- --pf-c-data-list--m-compact__cell--md--PaddingBottom: 0;
5079
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: 0;
5080
- --pf-c-data-list--m-compact__cell-cell--md--PaddingTop: var(--pf-global--spacer--sm);
5081
- --pf-c-data-list--m-compact__cell--cell--MarginRight: var(--pf-global--spacer--md);
5082
- --pf-c-data-list--m-compact__item-control--PaddingTop: var(--pf-global--spacer--sm);
5083
- --pf-c-data-list--m-compact__item-control--PaddingBottom: var(--pf-global--spacer--sm);
5084
- --pf-c-data-list--m-compact__item-control--MarginRight: var(--pf-global--spacer--md);
5085
- --pf-c-data-list--m-compact__item-action--PaddingTop: var(--pf-global--spacer--sm);
5086
- --pf-c-data-list--m-compact__item-action--PaddingBottom: var(--pf-global--spacer--sm);
5087
- --pf-c-data-list--m-compact__item-action--MarginLeft: var(--pf-global--spacer--md);
5088
- --pf-c-data-list--m-compact__item-action__action--MarginTop: calc(var(--pf-c-data-list--m-compact__item-action--PaddingTop) * -1);
5089
- --pf-c-data-list--m-compact__item-action__action--MarginBottom: calc(var(--pf-c-data-list--m-compact__item-action--PaddingBottom) * -1);
5090
- --pf-c-data-list--m-compact__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
5091
- --pf-c-data-list--m-compact__item-content--PaddingBottom: var(--pf-global--spacer--sm);
5092
- --pf-c-data-list--m-compact__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
5093
- --pf-c-data-list--m-compact__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--sm) * -1);
5094
- --pf-c-data-list--m-compact__item-draggable-button--PaddingTop: var(--pf-global--spacer--sm);
5095
- --pf-c-data-list--m-compact__item-draggable-button--PaddingBottom: var(--pf-global--spacer--sm);
5096
- --pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--sm);
5097
- color: var(--pf-global--Color--100);
5098
- font-size: var(--pf-c-data-list--FontSize);
5099
- line-height: var(--pf-c-data-list--LineHeight);
5100
- overflow-wrap: break-word;
5101
- list-style-type: disc;
5102
- border-top: var(--pf-c-data-list--BorderTopWidth) solid var(--pf-c-data-list--BorderTopColor);
5103
- }
5104
-
5105
- @media screen and (min-width: 576px) {
5106
- .pf-c-data-list {
5107
- --pf-c-data-list--BorderTopColor: var(--pf-c-data-list--sm--BorderTopColor);
5108
- --pf-c-data-list--BorderTopWidth: var(--pf-c-data-list--sm--BorderTopWidth);
5110
+ order: initial;
5109
5111
  }
5110
- }
5111
- @media screen and (min-width: 576px) {
5112
- .pf-c-data-list {
5113
- --pf-c-data-list__item--BorderBottomWidth: var(--pf-c-data-list__item--sm--BorderBottomWidth);
5114
- --pf-c-data-list__item--BorderBottomColor: var(--pf-c-data-list__item--sm--BorderBottomColor);
5112
+
5113
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-align-right {
5114
+ margin-left: auto;
5115
5115
  }
5116
- }
5117
- @media (min-width: 576px) {
5118
- .pf-c-data-list {
5119
- --pf-c-data-list__item--before--Top: var(--pf-c-data-list__item--before--sm--Top);
5116
+
5117
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-no-fill {
5118
+ flex: none;
5120
5119
  }
5121
- }
5122
- .pf-c-data-list.pf-m-compact {
5123
- --pf-c-data-list__check--FontSize: var(--pf-c-data-list--m-compact__check--FontSize);
5124
- --pf-c-data-list__action--MarginTop: var(--pf-c-data-list--m-compact__action--MarginTop);
5125
- --pf-c-data-list--FontSize: var(--pf-c-data-list--m-compact--FontSize);
5126
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list--m-compact__item-action--MarginLeft);
5127
- --pf-c-data-list__item-action--PaddingTop: var(--pf-c-data-list--m-compact__item-action--PaddingTop);
5128
- --pf-c-data-list__item-action--PaddingBottom: var(--pf-c-data-list--m-compact__item-action--PaddingBottom);
5129
- --pf-c-data-list__item-action__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
5130
- --pf-c-data-list__item-action__action--MarginBottom: var(--pf-c-data-list--m-compact__item-action__action--MarginBottom);
5131
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list--m-compact__item-control--MarginRight);
5132
- --pf-c-data-list__item-control--PaddingTop: var(--pf-c-data-list--m-compact__item-control--PaddingTop);
5133
- --pf-c-data-list__item-control--PaddingBottom: var(--pf-c-data-list--m-compact__item-control--PaddingBottom);
5134
- --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-c-data-list--m-compact__item-content--PaddingBottom);
5135
- --pf-c-data-list__item-draggable-button--MarginTop: var(--pf-c-data-list--m-compact__item-draggable-button--MarginTop);
5136
- --pf-c-data-list__item-draggable-button--MarginBottom: var(--pf-c-data-list--m-compact__item-draggable-button--MarginBottom);
5137
- --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingTop);
5138
- --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingBottom);
5139
- --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop);
5140
- font-size: var(--pf-c-data-list--m-compact--FontSize);
5141
- }
5142
5120
 
5143
- .pf-c-data-list.pf-m-compact .pf-c-data-list__cell {
5144
- --pf-c-data-list__cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--PaddingTop);
5145
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--PaddingBottom);
5146
- --pf-c-data-list__cell--MarginRight: var(--pf-c-data-list--m-compact__cell--cell--MarginRight);
5147
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--PaddingTop);
5148
- }
5121
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-2 {
5122
+ flex-grow: 2;
5123
+ }
5149
5124
 
5150
- .pf-c-data-list.pf-m-compact .pf-c-data-list__check {
5151
- font-size: var(--pf-c-data-list--m-compact__check--FontSize);
5152
- }
5125
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-3 {
5126
+ flex-grow: 3;
5127
+ }
5153
5128
 
5154
- .pf-c-data-list.pf-m-drag-over {
5155
- overflow-anchor: none;
5156
- }
5129
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-4 {
5130
+ flex-grow: 4;
5131
+ }
5157
5132
 
5158
- .pf-c-data-list.pf-m-truncate,
5159
- .pf-c-data-list__item-row.pf-m-truncate,
5160
- .pf-c-data-list__cell.pf-m-truncate,
5161
- .pf-c-data-list__text.pf-m-truncate {
5162
- --pf-c-data-list--cell--MinWidth: var(--pf-c-data-list--cell--m-truncate--MinWidth);
5163
- --pf-c-data-list--cell--Overflow: hidden;
5164
- --pf-c-data-list--cell--TextOverflow: ellipsis;
5165
- --pf-c-data-list--cell--WhiteSpace: nowrap;
5133
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-5 {
5134
+ flex-grow: 5;
5135
+ }
5166
5136
  }
5167
-
5168
- .pf-c-data-list.pf-m-break-word,
5169
- .pf-c-data-list__item-row.pf-m-break-word,
5170
- .pf-c-data-list__cell.pf-m-break-word,
5171
- .pf-c-data-list__text.pf-m-break-word {
5172
- --pf-c-data-list--cell--WordBreak: break-word;
5137
+ @media screen and (min-width: 576px) {
5138
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__expandable-content {
5139
+ max-height: initial;
5140
+ overflow-y: visible;
5141
+ }
5173
5142
  }
5174
-
5175
- .pf-c-data-list.pf-m-nowrap,
5176
- .pf-c-data-list__item-row.pf-m-nowrap,
5177
- .pf-c-data-list__cell.pf-m-nowrap,
5178
- .pf-c-data-list__text.pf-m-nowrap {
5179
- --pf-c-data-list--cell--WhiteSpace: nowrap;
5143
+ @media screen and (min-width: 768px) {
5144
+ .pf-c-data-list.pf-m-grid-md {
5145
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
5146
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
5147
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
5148
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
5149
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
5150
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
5151
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
5152
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
5153
+ }
5180
5154
  }
5181
-
5182
- .pf-c-data-list__item {
5183
- position: relative;
5184
- display: flex;
5185
- flex-direction: column;
5186
- background-color: var(--pf-c-data-list__item--BackgroundColor);
5187
- border-bottom: var(--pf-c-data-list__item--BorderBottomWidth) solid var(--pf-c-data-list__item--BorderBottomColor);
5155
+ @media screen and (min-width: 768px) and (min-width: 1200px) {
5156
+ .pf-c-data-list.pf-m-grid-md {
5157
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
5158
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
5159
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
5160
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
5161
+ }
5188
5162
  }
5189
-
5190
- .pf-c-data-list__item::before {
5191
- position: absolute;
5192
- top: var(--pf-c-data-list__item--before--Top);
5193
- bottom: 0;
5194
- left: 0;
5195
- width: var(--pf-c-data-list__item--before--Width);
5196
- content: "";
5197
- background-color: var(--pf-c-data-list__item--before--BackgroundColor);
5198
- transition: var(--pf-c-data-list__item--before--Transition);
5163
+ @media screen and (min-width: 768px) {
5164
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__item-content {
5165
+ display: flex;
5166
+ flex-wrap: wrap;
5167
+ flex-grow: 1;
5168
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
5169
+ }
5199
5170
  }
5171
+ @media screen and (min-width: 768px) {
5172
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5173
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
5174
+ }
5200
5175
 
5201
- .pf-c-data-list__item.pf-m-selectable {
5202
- cursor: pointer;
5203
- outline-offset: var(--pf-c-data-list__item--m-selectable--OutlineOffset);
5204
- }
5176
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell + .pf-c-data-list__cell {
5177
+ flex: 1;
5178
+ order: initial;
5179
+ }
5205
5180
 
5206
- .pf-c-data-list__item.pf-m-selectable:hover, .pf-c-data-list__item.pf-m-selectable:focus {
5207
- position: relative;
5208
- z-index: var(--pf-c-data-list__item--m-selectable--hover--ZIndex);
5209
- }
5181
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-align-right {
5182
+ margin-left: auto;
5183
+ }
5210
5184
 
5211
- .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) {
5212
- --pf-c-data-list__item--BorderBottomWidth: 0;
5213
- }
5185
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-no-fill {
5186
+ flex: none;
5187
+ }
5214
5188
 
5215
- .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 {
5216
- 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);
5217
- }
5189
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-2 {
5190
+ flex-grow: 2;
5191
+ }
5218
5192
 
5219
- .pf-c-data-list__item.pf-m-selectable:hover {
5220
- box-shadow: var(--pf-c-data-list__item--m-selectable--hover--BoxShadow);
5221
- }
5193
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-3 {
5194
+ flex-grow: 3;
5195
+ }
5222
5196
 
5223
- .pf-c-data-list__item.pf-m-selectable:focus {
5224
- box-shadow: var(--pf-c-data-list__item--m-selectable--focus--BoxShadow);
5225
- }
5197
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-4 {
5198
+ flex-grow: 4;
5199
+ }
5226
5200
 
5227
- .pf-c-data-list__item.pf-m-selectable:active {
5228
- box-shadow: var(--pf-c-data-list__item--m-selectable--active--BoxShadow);
5201
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-5 {
5202
+ flex-grow: 5;
5203
+ }
5229
5204
  }
5230
-
5231
- .pf-c-data-list__item.pf-m-selected {
5232
- --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-selected--before--BackgroundColor);
5233
- position: relative;
5234
- z-index: var(--pf-c-data-list__item--m-selected--ZIndex);
5235
- box-shadow: var(--pf-c-data-list__item--m-selected--BoxShadow);
5205
+ @media screen and (min-width: 768px) {
5206
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__expandable-content {
5207
+ max-height: initial;
5208
+ overflow-y: visible;
5209
+ }
5236
5210
  }
5237
-
5238
- .pf-c-data-list__item.pf-m-ghost-row::after {
5239
- position: absolute;
5240
- top: 0;
5241
- right: 0;
5242
- bottom: 0;
5243
- left: 0;
5244
- content: "";
5245
- background-color: var(--pf-c-data-list__item--m-ghost-row--after--BackgroundColor);
5246
- opacity: var(--pf-c-data-list__item--m-ghost-row--after--Opacity);
5211
+ @media screen and (min-width: 992px) {
5212
+ .pf-c-data-list.pf-m-grid-lg {
5213
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
5214
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
5215
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
5216
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
5217
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
5218
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
5219
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
5220
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
5221
+ }
5247
5222
  }
5248
-
5249
- .pf-c-data-list__item.pf-m-expanded {
5250
- --pf-c-data-list__toggle-icon--Rotate: var(--pf-c-data-list__item--m-expanded__toggle-icon--Rotate);
5251
- --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--before--BackgroundColor);
5223
+ @media screen and (min-width: 992px) and (min-width: 1200px) {
5224
+ .pf-c-data-list.pf-m-grid-lg {
5225
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
5226
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
5227
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
5228
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
5229
+ }
5252
5230
  }
5253
-
5254
- .pf-c-data-list__item.pf-m-expanded.pf-m-selectable:not(.pf-m-selected) {
5255
- --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor);
5231
+ @media screen and (min-width: 992px) {
5232
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__item-content {
5233
+ display: flex;
5234
+ flex-wrap: wrap;
5235
+ flex-grow: 1;
5236
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
5237
+ }
5256
5238
  }
5239
+ @media screen and (min-width: 992px) {
5240
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5241
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
5242
+ }
5257
5243
 
5258
- .pf-c-data-list__item-row {
5259
- display: flex;
5260
- flex-wrap: nowrap;
5261
- padding-right: var(--pf-c-data-list__item-row--PaddingRight);
5262
- padding-left: var(--pf-c-data-list__item-row--PaddingLeft);
5263
- }
5244
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell + .pf-c-data-list__cell {
5245
+ flex: 1;
5246
+ order: initial;
5247
+ }
5264
5248
 
5265
- .pf-c-data-list__item-control {
5266
- display: flex;
5267
- flex-wrap: nowrap;
5268
- padding-top: var(--pf-c-data-list__item-control--PaddingTop);
5269
- padding-bottom: var(--pf-c-data-list__item-control--PaddingBottom);
5270
- margin-right: var(--pf-c-data-list__item-control--MarginRight);
5271
- }
5249
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-align-right {
5250
+ margin-left: auto;
5251
+ }
5252
+
5253
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-no-fill {
5254
+ flex: none;
5255
+ }
5272
5256
 
5273
- .pf-c-data-list__item-control > *:not(:last-child) {
5274
- margin-right: var(--pf-c-data-list__item-control--not-last-child--MarginRight);
5275
- }
5257
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-2 {
5258
+ flex-grow: 2;
5259
+ }
5276
5260
 
5277
- .pf-c-data-list__check {
5278
- display: flex;
5279
- align-items: center;
5280
- align-self: flex-start;
5281
- height: var(--pf-c-data-list__check--Height);
5282
- margin-top: var(--pf-c-data-list__check--MarginTop);
5283
- }
5261
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-3 {
5262
+ flex-grow: 3;
5263
+ }
5284
5264
 
5285
- .pf-c-data-list__check > input {
5286
- cursor: pointer;
5287
- }
5265
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-4 {
5266
+ flex-grow: 4;
5267
+ }
5288
5268
 
5289
- .pf-c-data-list__item-draggable-button {
5290
- display: flex;
5291
- flex-direction: column;
5292
- 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);
5293
- 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);
5294
- border: 0;
5269
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-5 {
5270
+ flex-grow: 5;
5271
+ }
5295
5272
  }
5296
-
5297
- .pf-c-data-list__item-draggable-button:hover {
5298
- --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--hover__draggable-icon--Color);
5299
- cursor: grab;
5273
+ @media screen and (min-width: 992px) {
5274
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__expandable-content {
5275
+ max-height: initial;
5276
+ overflow-y: visible;
5277
+ }
5300
5278
  }
5301
-
5302
- .pf-c-data-list__item-draggable-button:focus {
5303
- --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--focus__draggable-icon--Color);
5279
+ @media screen and (min-width: 1200px) {
5280
+ .pf-c-data-list.pf-m-grid-xl {
5281
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
5282
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
5283
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
5284
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
5285
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
5286
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
5287
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
5288
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
5289
+ }
5304
5290
  }
5305
-
5306
- .pf-c-data-list__item-draggable-button:active {
5307
- cursor: grabbing;
5291
+ @media screen and (min-width: 1200px) and (min-width: 1200px) {
5292
+ .pf-c-data-list.pf-m-grid-xl {
5293
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
5294
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
5295
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
5296
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
5297
+ }
5308
5298
  }
5309
-
5310
- .pf-c-data-list__item-draggable-button.pf-m-disabled {
5311
- --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color);
5312
- pointer-events: none;
5299
+ @media screen and (min-width: 1200px) {
5300
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__item-content {
5301
+ display: flex;
5302
+ flex-wrap: wrap;
5303
+ flex-grow: 1;
5304
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
5305
+ }
5313
5306
  }
5307
+ @media screen and (min-width: 1200px) {
5308
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5309
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
5310
+ }
5314
5311
 
5315
- .pf-c-data-list__item-draggable-button .pf-c-data-list__item-draggable-icon {
5316
- color: var(--pf-c-data-list__item-draggable-button-icon--Color);
5317
- }
5312
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell + .pf-c-data-list__cell {
5313
+ flex: 1;
5314
+ order: initial;
5315
+ }
5318
5316
 
5319
- .pf-c-data-list__item-action {
5320
- --pf-hidden-visible--visible--Display: var(--pf-c-data-list__item-action--Display);
5321
- align-items: flex-start;
5322
- align-content: flex-start;
5323
- padding-top: var(--pf-c-data-list__item-action--PaddingTop);
5324
- padding-bottom: var(--pf-c-data-list__item-action--PaddingBottom);
5325
- margin-left: var(--pf-c-data-list__item-action--MarginLeft);
5326
- }
5317
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-align-right {
5318
+ margin-left: auto;
5319
+ }
5327
5320
 
5328
- .pf-c-data-list__item-action > *:not(:last-child) {
5329
- margin-right: var(--pf-c-data-list__item-action--not-last-child--MarginRight);
5330
- }
5321
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-no-fill {
5322
+ flex: none;
5323
+ }
5331
5324
 
5332
- .pf-c-data-list__item-action .pf-c-data-list__action {
5333
- margin-top: var(--pf-c-data-list__action--MarginTop);
5334
- margin-bottom: var(--pf-c-data-list__item-action__action--MarginBottom);
5335
- }
5325
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-2 {
5326
+ flex-grow: 2;
5327
+ }
5336
5328
 
5337
- .pf-c-data-list__toggle {
5338
- margin: var(--pf-c-data-list__toggle--MarginTop) 0 var(--pf-c-data-list__toggle--MarginBottom) var(--pf-c-data-list__toggle--MarginLeft);
5339
- }
5329
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-3 {
5330
+ flex-grow: 3;
5331
+ }
5340
5332
 
5341
- .pf-c-data-list__toggle-icon {
5342
- height: var(--pf-c-data-list__toggle-icon--Height);
5343
- pointer-events: none;
5344
- transition: var(--pf-c-data-list__toggle-icon--Transition);
5345
- transform: rotate(var(--pf-c-data-list__toggle-icon--Rotate));
5346
- }
5333
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-4 {
5334
+ flex-grow: 4;
5335
+ }
5347
5336
 
5348
- .pf-c-data-list__item-content {
5349
- display: grid;
5350
- width: 100%;
5351
- grid-template-columns: auto 1fr;
5337
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-5 {
5338
+ flex-grow: 5;
5339
+ }
5352
5340
  }
5353
-
5354
- .pf-c-data-list__cell {
5355
- flex: 1;
5356
- grid-column: 1/-1;
5357
- padding-top: var(--pf-c-data-list__cell--PaddingTop);
5358
- padding-bottom: var(--pf-c-data-list__cell--PaddingBottom);
5341
+ @media screen and (min-width: 1200px) {
5342
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__expandable-content {
5343
+ max-height: initial;
5344
+ overflow-y: visible;
5345
+ }
5359
5346
  }
5360
-
5361
- .pf-c-data-list__cell + .pf-c-data-list__cell {
5362
- flex: 1 0 100%;
5363
- order: 1;
5364
- padding-top: var(--pf-c-data-list__cell--cell--PaddingTop);
5347
+ @media screen and (min-width: 1450px) {
5348
+ .pf-c-data-list.pf-m-grid-2xl {
5349
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
5350
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
5351
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
5352
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
5353
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
5354
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
5355
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
5356
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
5357
+ }
5365
5358
  }
5366
-
5367
- .pf-c-data-list__cell.pf-m-icon {
5368
- flex-grow: 0;
5369
- margin-right: var(--pf-c-data-list__cell--m-icon--MarginRight);
5370
- grid-column: 1/2;
5359
+ @media screen and (min-width: 1450px) and (min-width: 1200px) {
5360
+ .pf-c-data-list.pf-m-grid-2xl {
5361
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
5362
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
5363
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
5364
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
5365
+ }
5371
5366
  }
5372
-
5373
- .pf-c-data-list__cell.pf-m-icon + .pf-c-data-list__cell {
5374
- grid-column: 2/3;
5375
- padding-top: var(--pf-c-data-list__cell--m-icon--cell--PaddingTop);
5367
+ @media screen and (min-width: 1450px) {
5368
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__item-content {
5369
+ display: flex;
5370
+ flex-wrap: wrap;
5371
+ flex-grow: 1;
5372
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
5373
+ }
5376
5374
  }
5375
+ @media screen and (min-width: 1450px) {
5376
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5377
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
5378
+ }
5377
5379
 
5378
- .pf-c-data-list__cell.pf-m-align-right {
5379
- margin-left: 0;
5380
- }
5380
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell + .pf-c-data-list__cell {
5381
+ flex: 1;
5382
+ order: initial;
5383
+ }
5381
5384
 
5382
- .pf-c-data-list__text {
5383
- display: inline-block;
5384
- }
5385
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-align-right {
5386
+ margin-left: auto;
5387
+ }
5385
5388
 
5386
- .pf-c-data-list__text,
5387
- .pf-c-data-list__cell {
5388
- min-width: var(--pf-c-data-list--cell--MinWidth);
5389
- max-width: 100%;
5390
- overflow: var(--pf-c-data-list--cell--Overflow);
5391
- text-overflow: var(--pf-c-data-list--cell--TextOverflow);
5392
- word-break: var(--pf-c-data-list--cell--WordBreak);
5393
- white-space: var(--pf-c-data-list--cell--WhiteSpace);
5394
- }
5389
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-no-fill {
5390
+ flex: none;
5391
+ }
5395
5392
 
5396
- .pf-c-data-list__expandable-content {
5397
- max-height: var(--pf-c-data-list__expandable-content--MaxHeight);
5398
- overflow-y: auto;
5399
- border-top: var(--pf-c-data-list__expandable-content--BorderTopWidth) solid var(--pf-c-data-list__expandable-content--BorderTopColor);
5400
- }
5393
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-2 {
5394
+ flex-grow: 2;
5395
+ }
5401
5396
 
5402
- .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body {
5403
- 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);
5404
- }
5397
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-3 {
5398
+ flex-grow: 3;
5399
+ }
5405
5400
 
5406
- .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body.pf-m-no-padding {
5407
- padding: 0;
5408
- }
5401
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-4 {
5402
+ flex-grow: 4;
5403
+ }
5409
5404
 
5410
- :where(.pf-theme-dark) .pf-c-data-list {
5411
- --pf-c-data-list--BorderTopColor: var(--pf-global--BorderColor--100);
5412
- --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);
5413
- --pf-c-data-list__item--BorderBottomColor: var(--pf-global--BorderColor--100);
5414
- --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
5405
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-5 {
5406
+ flex-grow: 5;
5407
+ }
5408
+ }
5409
+ @media screen and (min-width: 1450px) {
5410
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__expandable-content {
5411
+ max-height: initial;
5412
+ overflow-y: visible;
5413
+ }
5415
5414
  }
5416
-
5417
5415
  .pf-c-date-picker {
5418
5416
  --pf-c-date-picker--m-top__calendar--Top: 0;
5419
5417
  --pf-c-date-picker--m-top__calendar--TranslateY: calc(-100% - var(--pf-global--spacer--xs));
@@ -7348,8 +7346,8 @@ label.pf-c-check, .pf-c-check__label,
7348
7346
  --pf-c-dropdown__group-title--PaddingRight: var(--pf-c-dropdown__menu-item--PaddingRight);
7349
7347
  --pf-c-dropdown__group-title--PaddingBottom: var(--pf-c-dropdown__menu-item--PaddingBottom);
7350
7348
  --pf-c-dropdown__group-title--PaddingLeft: var(--pf-c-dropdown__menu-item--PaddingLeft);
7351
- --pf-c-dropdown__group-title--FontSize: var(--pf-global--FontSize--sm);
7352
- --pf-c-dropdown__group-title--FontWeight: var(--pf-global--FontWeight--semi-bold);
7349
+ --pf-c-dropdown__group-title--FontSize: var(--pf-global--FontSize--xs);
7350
+ --pf-c-dropdown__group-title--FontWeight: var(--pf-global--FontWeight--normal);
7353
7351
  --pf-c-dropdown__group-title--Color: var(--pf-global--Color--dark-200);
7354
7352
  --pf-c-dropdown__toggle-image--MarginTop: 0;
7355
7353
  --pf-c-dropdown__toggle-image--MarginBottom: 0;
@@ -7952,8 +7950,6 @@ label.pf-c-check, .pf-c-check__label,
7952
7950
  --pf-c-dropdown__menu--Top: 100%;
7953
7951
  --pf-c-dropdown--m-top__menu--TranslateY: -100%;
7954
7952
  --pf-c-dropdown__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
7955
- --pf-c-dropdown__group-title--FontSize: var(--pf-global--FontSize--xs);
7956
- --pf-c-dropdown__group-title--FontWeight: var(--pf-global--FontWeight--bold);
7957
7953
  }
7958
7954
 
7959
7955
  :where(.pf-theme-dark) .pf-c-dropdown__toggle:not(.pf-m-plain):disabled, :where(.pf-theme-dark) .pf-c-dropdown__toggle:not(.pf-m-plain).pf-m-disabled {
@@ -12022,8 +12018,8 @@ ul.pf-c-list {
12022
12018
  --pf-c-menu__group-title--PaddingTop: var(--pf-global--spacer--md);
12023
12019
  --pf-c-menu__group-title--PaddingRight: var(--pf-c-menu__item--PaddingRight);
12024
12020
  --pf-c-menu__group-title--PaddingLeft: var(--pf-c-menu__item--PaddingLeft);
12025
- --pf-c-menu__group-title--FontSize: var(--pf-global--FontSize--sm);
12026
- --pf-c-menu__group-title--FontWeight: var(--pf-global--FontWeight--bold);
12021
+ --pf-c-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
12022
+ --pf-c-menu__group-title--FontWeight: var(--pf-global--FontWeight--normal);
12027
12023
  --pf-c-menu__group-title--Color: var(--pf-global--Color--200);
12028
12024
  --pf-c-menu__item-description--FontSize: var(--pf-global--FontSize--xs);
12029
12025
  --pf-c-menu__item-description--Color: var(--pf-global--Color--200);
@@ -12573,8 +12569,6 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
12573
12569
  --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
12574
12570
  --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--400);
12575
12571
  --pf-c-menu__list-item--m-disabled__item--Color: var(--pf-global--Color--200);
12576
- --pf-c-menu__group-title--FontWeight: var(--pf-global--FontWeight--bold);
12577
- --pf-c-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
12578
12572
  }
12579
12573
 
12580
12574
  .pf-c-menu-toggle {
@@ -14952,8 +14946,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
14952
14946
  --pf-c-options-menu__group-title--PaddingRight: var(--pf-c-options-menu__menu-item--PaddingRight);
14953
14947
  --pf-c-options-menu__group-title--PaddingBottom: var(--pf-c-options-menu__menu-item--PaddingBottom);
14954
14948
  --pf-c-options-menu__group-title--PaddingLeft: var(--pf-c-options-menu__menu-item--PaddingLeft);
14955
- --pf-c-options-menu__group-title--FontSize: var(--pf-global--FontSize--sm);
14956
- --pf-c-options-menu__group-title--FontWeight: var(--pf-global--FontWeight--semi-bold);
14949
+ --pf-c-options-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
14950
+ --pf-c-options-menu__group-title--FontWeight: var(--pf-global--FontWeight--normal);
14957
14951
  --pf-c-options-menu__group-title--Color: var(--pf-global--Color--dark-200);
14958
14952
  --pf-c-options-menu--c-divider--MarginTop: var(--pf-global--spacer--sm);
14959
14953
  --pf-c-options-menu--c-divider--MarginBottom: var(--pf-global--spacer--sm);
@@ -15162,8 +15156,6 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
15162
15156
  --pf-c-options-menu__toggle--disabled--BackgroundColor: var(--pf-global--palette--black-500);
15163
15157
  --pf-c-options-menu__menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
15164
15158
  --pf-c-options-menu__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
15165
- --pf-c-options-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
15166
- --pf-c-options-menu__group-title--FontWeight: var(--pf-global--FontWeight--bold);
15167
15159
  --pf-c-options-menu__menu--Top: 100%;
15168
15160
  }
15169
15161
 
@@ -17920,8 +17912,8 @@ label.pf-c-radio, .pf-c-radio__label,
17920
17912
  --pf-c-select__menu-group-title--PaddingRight: var(--pf-c-select__menu-item--PaddingRight);
17921
17913
  --pf-c-select__menu-group-title--PaddingBottom: var(--pf-c-select__menu-item--PaddingBottom);
17922
17914
  --pf-c-select__menu-group-title--PaddingLeft: var(--pf-c-select__menu-item--PaddingLeft);
17923
- --pf-c-select__menu-group-title--FontSize: var(--pf-global--FontSize--sm);
17924
- --pf-c-select__menu-group-title--FontWeight: var(--pf-global--FontWeight--semi-bold);
17915
+ --pf-c-select__menu-group-title--FontSize: var(--pf-global--FontSize--xs);
17916
+ --pf-c-select__menu-group-title--FontWeight: var(--pf-global--FontWeight--normal);
17925
17917
  --pf-c-select__menu-group-title--Color: var(--pf-global--Color--dark-200);
17926
17918
  --pf-c-select__menu-item-count--MarginLeft: var(--pf-global--spacer--md);
17927
17919
  --pf-c-select__menu-item-count--FontSize: var(--pf-global--FontSize--sm);
@@ -19774,6 +19766,11 @@ svg.pf-c-spinner.pf-m-xl {
19774
19766
  --pf-c-tabs--inset: var(--pf-c-tabs--m-page-insets--inset);
19775
19767
  }
19776
19768
 
19769
+ .pf-c-tabs.pf-m-overflow,
19770
+ .pf-c-tabs.pf-m-overflow .pf-c-tabs__list {
19771
+ overflow: visible;
19772
+ }
19773
+
19777
19774
  .pf-c-tabs__toggle {
19778
19775
  display: var(--pf-c-tabs__toggle--Display);
19779
19776
  align-items: center;