@patternfly/react-core 4.224.11 → 4.224.14

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