@patternfly/react-core 4.232.13 → 4.233.0

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 (48) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/esm/components/ExpandableSection/ExpandableSection.d.ts +17 -3
  3. package/dist/esm/components/ExpandableSection/ExpandableSection.d.ts.map +1 -1
  4. package/dist/esm/components/ExpandableSection/ExpandableSection.js +39 -8
  5. package/dist/esm/components/ExpandableSection/ExpandableSection.js.map +1 -1
  6. package/dist/esm/components/ExpandableSection/ExpandableSectionToggle.d.ts +2 -0
  7. package/dist/esm/components/ExpandableSection/ExpandableSectionToggle.d.ts.map +1 -1
  8. package/dist/esm/components/ExpandableSection/ExpandableSectionToggle.js +4 -4
  9. package/dist/esm/components/ExpandableSection/ExpandableSectionToggle.js.map +1 -1
  10. package/dist/esm/components/InputGroup/InputGroup.d.ts.map +1 -1
  11. package/dist/esm/components/InputGroup/InputGroup.js +5 -3
  12. package/dist/esm/components/InputGroup/InputGroup.js.map +1 -1
  13. package/dist/esm/components/NumberInput/NumberInput.d.ts +5 -0
  14. package/dist/esm/components/NumberInput/NumberInput.d.ts.map +1 -1
  15. package/dist/esm/components/NumberInput/NumberInput.js +5 -4
  16. package/dist/esm/components/NumberInput/NumberInput.js.map +1 -1
  17. package/dist/js/components/ExpandableSection/ExpandableSection.d.ts +17 -3
  18. package/dist/js/components/ExpandableSection/ExpandableSection.d.ts.map +1 -1
  19. package/dist/js/components/ExpandableSection/ExpandableSection.js +40 -9
  20. package/dist/js/components/ExpandableSection/ExpandableSection.js.map +1 -1
  21. package/dist/js/components/ExpandableSection/ExpandableSectionToggle.d.ts +2 -0
  22. package/dist/js/components/ExpandableSection/ExpandableSectionToggle.d.ts.map +1 -1
  23. package/dist/js/components/ExpandableSection/ExpandableSectionToggle.js +4 -4
  24. package/dist/js/components/ExpandableSection/ExpandableSectionToggle.js.map +1 -1
  25. package/dist/js/components/InputGroup/InputGroup.d.ts.map +1 -1
  26. package/dist/js/components/InputGroup/InputGroup.js +5 -3
  27. package/dist/js/components/InputGroup/InputGroup.js.map +1 -1
  28. package/dist/js/components/NumberInput/NumberInput.d.ts +5 -0
  29. package/dist/js/components/NumberInput/NumberInput.d.ts.map +1 -1
  30. package/dist/js/components/NumberInput/NumberInput.js +4 -3
  31. package/dist/js/components/NumberInput/NumberInput.js.map +1 -1
  32. package/dist/umd/react-core.css +69 -69
  33. package/dist/umd/react-core.js +56 -18
  34. package/dist/umd/react-core.min.css +921 -921
  35. package/dist/umd/react-core.min.js +5 -5
  36. package/package.json +6 -6
  37. package/src/components/ExpandableSection/ExpandableSection.tsx +73 -19
  38. package/src/components/ExpandableSection/ExpandableSectionToggle.tsx +15 -9
  39. package/src/components/ExpandableSection/__tests__/ExpandableSection.test.tsx +27 -1
  40. package/src/components/ExpandableSection/examples/ExpandableSection.md +7 -0
  41. package/src/components/ExpandableSection/examples/ExpandableSectionTruncateExpansion.tsx +27 -0
  42. package/src/components/InputGroup/InputGroup.tsx +5 -3
  43. package/src/components/InputGroup/__tests__/InputGroup.test.tsx +30 -0
  44. package/src/components/NumberInput/NumberInput.tsx +14 -8
  45. package/src/components/NumberInput/__tests__/NumberInput.test.tsx +16 -0
  46. package/src/components/NumberInput/__tests__/__snapshots__/NumberInput.test.tsx.snap +292 -18
  47. package/src/components/NumberInput/examples/NumberInput.md +5 -0
  48. package/src/components/NumberInput/examples/WithStatus.tsx +59 -0
package/dist/umd/react-core.min.css CHANGED
@@ -3976,86 +3976,6 @@ label.pf-c-check, .pf-c-check__label,
3976
3976
  border-top: 1px solid var(--pf-global--BorderColor--300);
3977
3977
  }
3978
3978
 
3979
- .pf-c-data-list {
3980
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
3981
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
3982
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
3983
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
3984
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
3985
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
3986
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
3987
- }
3988
-
3989
- .pf-c-data-list__item-action {
3990
- --pf-hidden-visible--visible--Visibility: visible;
3991
- --pf-hidden-visible--hidden--Display: none;
3992
- --pf-hidden-visible--hidden--Visibility: hidden;
3993
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
3994
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
3995
- display: var(--pf-hidden-visible--Display);
3996
- visibility: var(--pf-hidden-visible--Visibility);
3997
- }
3998
-
3999
- .pf-m-hidden.pf-c-data-list__item-action {
4000
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4001
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4002
- }
4003
-
4004
- @media screen and (min-width: 576px) {
4005
- .pf-m-hidden-on-sm.pf-c-data-list__item-action {
4006
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4007
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4008
- }
4009
-
4010
- .pf-m-visible-on-sm.pf-c-data-list__item-action {
4011
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4012
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4013
- }
4014
- }
4015
- @media screen and (min-width: 768px) {
4016
- .pf-m-hidden-on-md.pf-c-data-list__item-action {
4017
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4018
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4019
- }
4020
-
4021
- .pf-m-visible-on-md.pf-c-data-list__item-action {
4022
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4023
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4024
- }
4025
- }
4026
- @media screen and (min-width: 992px) {
4027
- .pf-m-hidden-on-lg.pf-c-data-list__item-action {
4028
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4029
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4030
- }
4031
-
4032
- .pf-m-visible-on-lg.pf-c-data-list__item-action {
4033
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4034
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4035
- }
4036
- }
4037
- @media screen and (min-width: 1200px) {
4038
- .pf-m-hidden-on-xl.pf-c-data-list__item-action {
4039
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4040
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4041
- }
4042
-
4043
- .pf-m-visible-on-xl.pf-c-data-list__item-action {
4044
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4045
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4046
- }
4047
- }
4048
- @media screen and (min-width: 1450px) {
4049
- .pf-m-hidden-on-2xl.pf-c-data-list__item-action {
4050
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4051
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4052
- }
4053
-
4054
- .pf-m-visible-on-2xl.pf-c-data-list__item-action {
4055
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4056
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4057
- }
4058
- }
4059
3979
  @media screen and (min-width: 768px) {
4060
3980
  .pf-c-data-list:not([class*=pf-m-grid]) {
4061
3981
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
@@ -4533,449 +4453,359 @@ label.pf-c-check, .pf-c-check__label,
4533
4453
  }
4534
4454
  }
4535
4455
  .pf-c-data-list {
4536
- --pf-c-data-list--FontSize: 1em;
4537
- --pf-c-data-list--LineHeight: var(--pf-global--LineHeight--md);
4538
- --pf-c-data-list--BorderTopColor: var(--pf-global--BorderColor--300);
4539
- --pf-c-data-list--BorderTopWidth: var(--pf-global--spacer--sm);
4540
- --pf-c-data-list--sm--BorderTopWidth: var(--pf-global--BorderWidth--sm);
4541
- --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);
4542
- --pf-c-data-list__item--BackgroundColor: var(--pf-global--BackgroundColor--100);
4543
- --pf-c-data-list__item--m-selected--ZIndex: var(--pf-global--ZIndex--xs);
4544
- --pf-c-data-list__item--m-expanded--before--BackgroundColor: var(--pf-global--active-color--100);
4545
- --pf-c-data-list__item--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
4546
- --pf-c-data-list__item--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4547
- --pf-c-data-list__item--m-selectable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
4548
- --pf-c-data-list__item--m-selectable--hover--ZIndex: calc(var(--pf-c-data-list__item--m-selected--ZIndex) + 1);
4549
- --pf-c-data-list__item--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4550
- --pf-c-data-list__item--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4551
- --pf-c-data-list__item--m-selectable--active--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4552
- --pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor: var(--pf-global--active-color--300);
4553
- --pf-c-data-list__item--BorderBottomColor: var(--pf-global--BorderColor--300);
4554
- --pf-c-data-list__item--BorderBottomWidth: 0.5rem;
4555
- --pf-c-data-list__item--m-selectable--hover--item--BorderTopColor: var(--pf-c-data-list__item--BorderBottomColor);
4556
- --pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth: var(--pf-c-data-list__item--BorderBottomWidth);
4557
- --pf-c-data-list__item--sm--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
4558
- --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
4559
- --pf-c-data-list__item--before--BackgroundColor: transparent;
4560
- --pf-c-data-list__item--before--Width: var(--pf-global--BorderWidth--lg);
4561
- --pf-c-data-list__item--before--Transition: var(--pf-global--Transition);
4562
- --pf-c-data-list__item--before--Top: 0;
4563
- --pf-c-data-list__item--before--sm--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
4564
- --pf-c-data-list__item-row--PaddingRight: var(--pf-global--spacer--md);
4565
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-global--spacer--md);
4566
- --pf-c-data-list__item-row--xl--PaddingRight: var(--pf-global--spacer--lg);
4567
- --pf-c-data-list__item-row--xl--PaddingLeft: var(--pf-global--spacer--lg);
4568
- --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-global--spacer--lg);
4569
- --pf-c-data-list__cell--PaddingTop: var(--pf-global--spacer--lg);
4570
- --pf-c-data-list__cell--PaddingBottom: var(--pf-global--spacer--lg);
4571
- --pf-c-data-list__cell--MarginRight: var(--pf-global--spacer--xl);
4572
- --pf-c-data-list__cell--md--PaddingBottom: 0;
4573
- --pf-c-data-list__cell--m-icon--MarginRight: var(--pf-global--spacer--md);
4574
- --pf-c-data-list__cell--cell--PaddingTop: 0;
4575
- --pf-c-data-list__cell--cell--md--PaddingTop: var(--pf-global--spacer--lg);
4576
- --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--lg);
4577
- --pf-c-data-list--cell--MinWidth: initial;
4578
- --pf-c-data-list--cell--Overflow: visible;
4579
- --pf-c-data-list--cell--TextOverflow: clip;
4580
- --pf-c-data-list--cell--WhiteSpace: normal;
4581
- --pf-c-data-list--cell--WordBreak: normal;
4582
- --pf-c-data-list--cell--m-truncate--MinWidth: 5ch;
4583
- --pf-c-data-list__toggle--MarginLeft: calc(var(--pf-global--spacer--sm) * -1);
4584
- --pf-c-data-list__toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
4585
- --pf-c-data-list__toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
4586
- --pf-c-data-list__toggle-icon--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
4587
- --pf-c-data-list__toggle-icon--Transition: .2s ease-in 0s;
4588
- --pf-c-data-list__toggle-icon--Rotate: 0;
4589
- --pf-c-data-list__item--m-expanded__toggle-icon--Rotate: 90deg;
4590
- --pf-c-data-list__item-draggable-button--PaddingLeft: var(--pf-global--spacer--md);
4591
- --pf-c-data-list__item-draggable-button--PaddingRight: var(--pf-global--spacer--md);
4592
- --pf-c-data-list__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--lg) * -1);
4593
- --pf-c-data-list__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--lg) * -1);
4594
- --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-global--spacer--lg);
4595
- --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-global--spacer--lg);
4596
- --pf-c-data-list__item-draggable-button--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
4597
- --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-global--icon--Color--light);
4598
- --pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color: var(--pf-global--disabled-color--200);
4599
- --pf-c-data-list__item-draggable-button--hover__draggable-icon--Color: var(--pf-global--icon--Color--dark);
4600
- --pf-c-data-list__item-draggable-button--focus__draggable-icon--Color: var(--pf-global--icon--Color--dark);
4601
- --pf-c-data-list__item--m-ghost-row--after--BackgroundColor: var(--pf-global--BackgroundColor--100);
4602
- --pf-c-data-list__item--m-ghost-row--after--Opacity: .6;
4603
- --pf-c-data-list__item-control--PaddingTop: var(--pf-global--spacer--lg);
4604
- --pf-c-data-list__item-control--PaddingBottom: var(--pf-global--spacer--lg);
4605
- --pf-c-data-list__item-control--MarginRight: var(--pf-global--spacer--md);
4606
- --pf-c-data-list__item-control--md--MarginRight: var(--pf-global--spacer--xl);
4607
- --pf-c-data-list__item-control--not-last-child--MarginRight: var(--pf-global--spacer--md);
4608
- --pf-c-data-list__check--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
4609
- --pf-c-data-list__check--MarginTop: -0.0625rem;
4610
- --pf-c-data-list__item-action--Display: flex;
4611
- --pf-c-data-list__item-action--PaddingTop: var(--pf-global--spacer--lg);
4612
- --pf-c-data-list__item-action--PaddingBottom: var(--pf-global--spacer--lg);
4613
- --pf-c-data-list__item-action--MarginLeft: var(--pf-global--spacer--md);
4614
- --pf-c-data-list__item-action--md--MarginLeft: var(--pf-global--spacer--xl);
4615
- --pf-c-data-list__item-action--not-last-child--MarginRight: var(--pf-global--spacer--md);
4616
- --pf-c-data-list__item-action__action--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
4617
- --pf-c-data-list__action--MarginTop: var(--pf-c-data-list__item-action__action--MarginTop);
4618
- --pf-c-data-list__item-action__action--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
4619
- --pf-c-data-list__expandable-content--BorderTopWidth: var(--pf-global--BorderWidth--sm);
4620
- --pf-c-data-list__expandable-content--BorderTopColor: var(--pf-global--BorderColor--100);
4621
- --pf-c-data-list__expandable-content--MarginRight: calc(var(--pf-c-data-list__expandable-content-body--PaddingRight) * -1);
4622
- --pf-c-data-list__expandable-content--MarginLeft: calc(var(--pf-c-data-list__expandable-content-body--PaddingLeft) * -1);
4623
- --pf-c-data-list__expandable-content--MaxHeight: 37.5rem;
4624
- --pf-c-data-list__expandable-content--before--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
4625
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-global--spacer--md);
4626
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-global--spacer--md);
4627
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-global--spacer--md);
4628
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-global--spacer--md);
4629
- --pf-c-data-list__expandable-content-body--md--PaddingTop: var(--pf-global--spacer--lg);
4630
- --pf-c-data-list__expandable-content-body--xl--PaddingRight: var(--pf-global--spacer--lg);
4631
- --pf-c-data-list__expandable-content-body--md--PaddingBottom: var(--pf-global--spacer--lg);
4632
- --pf-c-data-list__expandable-content-body--xl--PaddingLeft: var(--pf-global--spacer--lg);
4633
- --pf-c-data-list--m-compact--FontSize: var(--pf-global--FontSize--sm);
4634
- --pf-c-data-list--m-compact--LineHeight: var(--pf-global--LineHeight--sm);
4635
- --pf-c-data-list--m-compact__check--FontSize: var(--pf-global--FontSize--md);
4636
- --pf-c-data-list--m-compact__cell--PaddingTop: var(--pf-global--spacer--sm);
4637
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-global--spacer--sm);
4638
- --pf-c-data-list--m-compact__cell--md--PaddingBottom: 0;
4639
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: 0;
4640
- --pf-c-data-list--m-compact__cell-cell--md--PaddingTop: var(--pf-global--spacer--sm);
4641
- --pf-c-data-list--m-compact__cell--cell--MarginRight: var(--pf-global--spacer--md);
4642
- --pf-c-data-list--m-compact__item-control--PaddingTop: var(--pf-global--spacer--sm);
4643
- --pf-c-data-list--m-compact__item-control--PaddingBottom: var(--pf-global--spacer--sm);
4644
- --pf-c-data-list--m-compact__item-control--MarginRight: var(--pf-global--spacer--md);
4645
- --pf-c-data-list--m-compact__item-action--PaddingTop: var(--pf-global--spacer--sm);
4646
- --pf-c-data-list--m-compact__item-action--PaddingBottom: var(--pf-global--spacer--sm);
4647
- --pf-c-data-list--m-compact__item-action--MarginLeft: var(--pf-global--spacer--md);
4648
- --pf-c-data-list--m-compact__item-action__action--MarginTop: calc(var(--pf-c-data-list--m-compact__item-action--PaddingTop) * -1);
4649
- --pf-c-data-list--m-compact__item-action__action--MarginBottom: calc(var(--pf-c-data-list--m-compact__item-action--PaddingBottom) * -1);
4650
- --pf-c-data-list--m-compact__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
4651
- --pf-c-data-list--m-compact__item-content--PaddingBottom: var(--pf-global--spacer--sm);
4652
- --pf-c-data-list--m-compact__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
4653
- --pf-c-data-list--m-compact__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--sm) * -1);
4654
- --pf-c-data-list--m-compact__item-draggable-button--PaddingTop: var(--pf-global--spacer--sm);
4655
- --pf-c-data-list--m-compact__item-draggable-button--PaddingBottom: var(--pf-global--spacer--sm);
4656
- --pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--sm);
4657
- color: var(--pf-global--Color--100);
4658
- font-size: var(--pf-c-data-list--FontSize);
4659
- line-height: var(--pf-c-data-list--LineHeight);
4660
- overflow-wrap: break-word;
4661
- list-style-type: disc;
4662
- border-top: var(--pf-c-data-list--BorderTopWidth) solid var(--pf-c-data-list--BorderTopColor);
4456
+ --pf-global--Color--100: var(--pf-global--Color--dark-100);
4457
+ --pf-global--Color--200: var(--pf-global--Color--dark-200);
4458
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
4459
+ --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
4460
+ --pf-global--link--Color: var(--pf-global--link--Color--dark);
4461
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
4462
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
4663
4463
  }
4664
4464
 
4665
- @media screen and (min-width: 576px) {
4666
- .pf-c-data-list {
4667
- --pf-c-data-list--BorderTopColor: var(--pf-c-data-list--sm--BorderTopColor);
4668
- --pf-c-data-list--BorderTopWidth: var(--pf-c-data-list--sm--BorderTopWidth);
4669
- }
4465
+ .pf-c-data-list__item-action {
4466
+ --pf-hidden-visible--visible--Visibility: visible;
4467
+ --pf-hidden-visible--hidden--Display: none;
4468
+ --pf-hidden-visible--hidden--Visibility: hidden;
4469
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4470
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4471
+ display: var(--pf-hidden-visible--Display);
4472
+ visibility: var(--pf-hidden-visible--Visibility);
4473
+ }
4474
+
4475
+ .pf-m-hidden.pf-c-data-list__item-action {
4476
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4477
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4670
4478
  }
4479
+
4671
4480
  @media screen and (min-width: 576px) {
4672
- .pf-c-data-list {
4673
- --pf-c-data-list__item--BorderBottomWidth: var(--pf-c-data-list__item--sm--BorderBottomWidth);
4674
- --pf-c-data-list__item--BorderBottomColor: var(--pf-c-data-list__item--sm--BorderBottomColor);
4481
+ .pf-m-hidden-on-sm.pf-c-data-list__item-action {
4482
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4483
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4484
+ }
4485
+
4486
+ .pf-m-visible-on-sm.pf-c-data-list__item-action {
4487
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4488
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4675
4489
  }
4676
4490
  }
4677
- @media (min-width: 576px) {
4678
- .pf-c-data-list {
4679
- --pf-c-data-list__item--before--Top: var(--pf-c-data-list__item--before--sm--Top);
4491
+ @media screen and (min-width: 768px) {
4492
+ .pf-m-hidden-on-md.pf-c-data-list__item-action {
4493
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4494
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4495
+ }
4496
+
4497
+ .pf-m-visible-on-md.pf-c-data-list__item-action {
4498
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4499
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4680
4500
  }
4681
4501
  }
4682
- .pf-c-data-list.pf-m-compact {
4683
- --pf-c-data-list__check--FontSize: var(--pf-c-data-list--m-compact__check--FontSize);
4684
- --pf-c-data-list__action--MarginTop: var(--pf-c-data-list--m-compact__action--MarginTop);
4685
- --pf-c-data-list--FontSize: var(--pf-c-data-list--m-compact--FontSize);
4686
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list--m-compact__item-action--MarginLeft);
4687
- --pf-c-data-list__item-action--PaddingTop: var(--pf-c-data-list--m-compact__item-action--PaddingTop);
4688
- --pf-c-data-list__item-action--PaddingBottom: var(--pf-c-data-list--m-compact__item-action--PaddingBottom);
4689
- --pf-c-data-list__item-action__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
4690
- --pf-c-data-list__item-action__action--MarginBottom: var(--pf-c-data-list--m-compact__item-action__action--MarginBottom);
4691
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list--m-compact__item-control--MarginRight);
4692
- --pf-c-data-list__item-control--PaddingTop: var(--pf-c-data-list--m-compact__item-control--PaddingTop);
4693
- --pf-c-data-list__item-control--PaddingBottom: var(--pf-c-data-list--m-compact__item-control--PaddingBottom);
4694
- --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-c-data-list--m-compact__item-content--PaddingBottom);
4695
- --pf-c-data-list__item-draggable-button--MarginTop: var(--pf-c-data-list--m-compact__item-draggable-button--MarginTop);
4696
- --pf-c-data-list__item-draggable-button--MarginBottom: var(--pf-c-data-list--m-compact__item-draggable-button--MarginBottom);
4697
- --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingTop);
4698
- --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingBottom);
4699
- --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop);
4700
- font-size: var(--pf-c-data-list--m-compact--FontSize);
4701
- }
4702
-
4703
- .pf-c-data-list.pf-m-compact .pf-c-data-list__cell {
4704
- --pf-c-data-list__cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--PaddingTop);
4705
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--PaddingBottom);
4706
- --pf-c-data-list__cell--MarginRight: var(--pf-c-data-list--m-compact__cell--cell--MarginRight);
4707
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--PaddingTop);
4708
- }
4709
-
4710
- .pf-c-data-list.pf-m-compact .pf-c-data-list__check {
4711
- font-size: var(--pf-c-data-list--m-compact__check--FontSize);
4712
- }
4502
+ @media screen and (min-width: 992px) {
4503
+ .pf-m-hidden-on-lg.pf-c-data-list__item-action {
4504
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4505
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4506
+ }
4713
4507
 
4714
- .pf-c-data-list.pf-m-drag-over {
4715
- overflow-anchor: none;
4508
+ .pf-m-visible-on-lg.pf-c-data-list__item-action {
4509
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4510
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4511
+ }
4716
4512
  }
4513
+ @media screen and (min-width: 1200px) {
4514
+ .pf-m-hidden-on-xl.pf-c-data-list__item-action {
4515
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4516
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4517
+ }
4717
4518
 
4718
- .pf-c-data-list.pf-m-truncate,
4719
- .pf-c-data-list__item-row.pf-m-truncate,
4720
- .pf-c-data-list__cell.pf-m-truncate,
4721
- .pf-c-data-list__text.pf-m-truncate {
4722
- --pf-c-data-list--cell--MinWidth: var(--pf-c-data-list--cell--m-truncate--MinWidth);
4723
- --pf-c-data-list--cell--Overflow: hidden;
4724
- --pf-c-data-list--cell--TextOverflow: ellipsis;
4725
- --pf-c-data-list--cell--WhiteSpace: nowrap;
4519
+ .pf-m-visible-on-xl.pf-c-data-list__item-action {
4520
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4521
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4522
+ }
4726
4523
  }
4524
+ @media screen and (min-width: 1450px) {
4525
+ .pf-m-hidden-on-2xl.pf-c-data-list__item-action {
4526
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4527
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4528
+ }
4727
4529
 
4728
- .pf-c-data-list.pf-m-break-word,
4729
- .pf-c-data-list__item-row.pf-m-break-word,
4730
- .pf-c-data-list__cell.pf-m-break-word,
4731
- .pf-c-data-list__text.pf-m-break-word {
4732
- --pf-c-data-list--cell--WordBreak: break-word;
4530
+ .pf-m-visible-on-2xl.pf-c-data-list__item-action {
4531
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4532
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4533
+ }
4733
4534
  }
4734
-
4735
- .pf-c-data-list.pf-m-nowrap,
4736
- .pf-c-data-list__item-row.pf-m-nowrap,
4737
- .pf-c-data-list__cell.pf-m-nowrap,
4738
- .pf-c-data-list__text.pf-m-nowrap {
4739
- --pf-c-data-list--cell--WhiteSpace: nowrap;
4535
+ @media screen and (min-width: 768px) {
4536
+ .pf-c-data-list:not([class*=pf-m-grid]) {
4537
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
4538
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
4539
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
4540
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
4541
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
4542
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
4543
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
4544
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
4545
+ }
4740
4546
  }
4741
-
4742
- .pf-c-data-list__item {
4743
- position: relative;
4744
- display: flex;
4745
- flex-direction: column;
4746
- background-color: var(--pf-c-data-list__item--BackgroundColor);
4747
- border-bottom: var(--pf-c-data-list__item--BorderBottomWidth) solid var(--pf-c-data-list__item--BorderBottomColor);
4547
+ @media screen and (min-width: 768px) and (min-width: 1200px) {
4548
+ .pf-c-data-list:not([class*=pf-m-grid]) {
4549
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
4550
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
4551
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
4552
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
4553
+ }
4748
4554
  }
4749
-
4750
- .pf-c-data-list__item::before {
4751
- position: absolute;
4752
- top: var(--pf-c-data-list__item--before--Top);
4753
- bottom: 0;
4754
- left: 0;
4755
- width: var(--pf-c-data-list__item--before--Width);
4756
- content: "";
4757
- background-color: var(--pf-c-data-list__item--before--BackgroundColor);
4758
- transition: var(--pf-c-data-list__item--before--Transition);
4555
+ @media screen and (min-width: 768px) {
4556
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__item-content {
4557
+ display: flex;
4558
+ flex-wrap: wrap;
4559
+ flex-grow: 1;
4560
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
4561
+ }
4759
4562
  }
4563
+ @media screen and (min-width: 768px) {
4564
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4565
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
4566
+ }
4760
4567
 
4761
- .pf-c-data-list__item.pf-m-selectable {
4762
- cursor: pointer;
4763
- outline-offset: var(--pf-c-data-list__item--m-selectable--OutlineOffset);
4764
- }
4568
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell + .pf-c-data-list__cell {
4569
+ flex: 1;
4570
+ order: initial;
4571
+ }
4765
4572
 
4766
- .pf-c-data-list__item.pf-m-selectable:hover, .pf-c-data-list__item.pf-m-selectable:focus {
4767
- position: relative;
4768
- z-index: var(--pf-c-data-list__item--m-selectable--hover--ZIndex);
4769
- }
4573
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-align-right {
4574
+ margin-left: auto;
4575
+ }
4770
4576
 
4771
- .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) {
4772
- --pf-c-data-list__item--BorderBottomWidth: 0;
4773
- }
4577
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-no-fill {
4578
+ flex: none;
4579
+ }
4774
4580
 
4775
- .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 {
4776
- 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);
4777
- }
4581
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-2 {
4582
+ flex-grow: 2;
4583
+ }
4778
4584
 
4779
- .pf-c-data-list__item.pf-m-selectable:hover {
4780
- box-shadow: var(--pf-c-data-list__item--m-selectable--hover--BoxShadow);
4781
- }
4585
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-3 {
4586
+ flex-grow: 3;
4587
+ }
4782
4588
 
4783
- .pf-c-data-list__item.pf-m-selectable:focus {
4784
- box-shadow: var(--pf-c-data-list__item--m-selectable--focus--BoxShadow);
4785
- }
4589
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-4 {
4590
+ flex-grow: 4;
4591
+ }
4786
4592
 
4787
- .pf-c-data-list__item.pf-m-selectable:active {
4788
- box-shadow: var(--pf-c-data-list__item--m-selectable--active--BoxShadow);
4593
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-5 {
4594
+ flex-grow: 5;
4595
+ }
4789
4596
  }
4790
-
4791
- .pf-c-data-list__item.pf-m-selected {
4792
- --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-selected--before--BackgroundColor);
4793
- position: relative;
4794
- z-index: var(--pf-c-data-list__item--m-selected--ZIndex);
4795
- box-shadow: var(--pf-c-data-list__item--m-selected--BoxShadow);
4597
+ @media screen and (min-width: 768px) {
4598
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__expandable-content {
4599
+ max-height: initial;
4600
+ overflow-y: visible;
4601
+ }
4796
4602
  }
4797
-
4798
- .pf-c-data-list__item.pf-m-ghost-row::after {
4799
- position: absolute;
4800
- top: 0;
4801
- right: 0;
4802
- bottom: 0;
4803
- left: 0;
4804
- content: "";
4805
- background-color: var(--pf-c-data-list__item--m-ghost-row--after--BackgroundColor);
4806
- opacity: var(--pf-c-data-list__item--m-ghost-row--after--Opacity);
4603
+ @media screen and (min-width: 0) {
4604
+ .pf-c-data-list.pf-m-grid-none {
4605
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
4606
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
4607
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
4608
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
4609
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
4610
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
4611
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
4612
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
4613
+ }
4807
4614
  }
4808
-
4809
- .pf-c-data-list__item.pf-m-expanded {
4810
- --pf-c-data-list__toggle-icon--Rotate: var(--pf-c-data-list__item--m-expanded__toggle-icon--Rotate);
4811
- --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--before--BackgroundColor);
4615
+ @media screen and (min-width: 0) and (min-width: 1200px) {
4616
+ .pf-c-data-list.pf-m-grid-none {
4617
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
4618
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
4619
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
4620
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
4621
+ }
4812
4622
  }
4813
-
4814
- .pf-c-data-list__item.pf-m-expanded.pf-m-selectable:not(.pf-m-selected) {
4815
- --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor);
4623
+ @media screen and (min-width: 0) {
4624
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__item-content {
4625
+ display: flex;
4626
+ flex-wrap: wrap;
4627
+ flex-grow: 1;
4628
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
4629
+ }
4816
4630
  }
4631
+ @media screen and (min-width: 0) {
4632
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4633
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
4634
+ }
4817
4635
 
4818
- .pf-c-data-list__item-row {
4819
- display: flex;
4820
- flex-wrap: nowrap;
4821
- padding-right: var(--pf-c-data-list__item-row--PaddingRight);
4822
- padding-left: var(--pf-c-data-list__item-row--PaddingLeft);
4823
- }
4636
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell + .pf-c-data-list__cell {
4637
+ flex: 1;
4638
+ order: initial;
4639
+ }
4824
4640
 
4825
- .pf-c-data-list__item-control {
4826
- display: flex;
4827
- flex-wrap: nowrap;
4828
- padding-top: var(--pf-c-data-list__item-control--PaddingTop);
4829
- padding-bottom: var(--pf-c-data-list__item-control--PaddingBottom);
4830
- margin-right: var(--pf-c-data-list__item-control--MarginRight);
4831
- }
4641
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-align-right {
4642
+ margin-left: auto;
4643
+ }
4832
4644
 
4833
- .pf-c-data-list__item-control > *:not(:last-child) {
4834
- margin-right: var(--pf-c-data-list__item-control--not-last-child--MarginRight);
4835
- }
4645
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-no-fill {
4646
+ flex: none;
4647
+ }
4836
4648
 
4837
- .pf-c-data-list__check {
4838
- display: flex;
4839
- align-items: center;
4840
- align-self: flex-start;
4841
- height: var(--pf-c-data-list__check--Height);
4842
- margin-top: var(--pf-c-data-list__check--MarginTop);
4843
- }
4649
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-2 {
4650
+ flex-grow: 2;
4651
+ }
4844
4652
 
4845
- .pf-c-data-list__check > input {
4846
- cursor: pointer;
4847
- }
4653
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-3 {
4654
+ flex-grow: 3;
4655
+ }
4848
4656
 
4849
- .pf-c-data-list__item-draggable-button {
4850
- display: flex;
4851
- flex-direction: column;
4852
- 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);
4853
- 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);
4854
- border: 0;
4855
- }
4657
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-4 {
4658
+ flex-grow: 4;
4659
+ }
4856
4660
 
4857
- .pf-c-data-list__item-draggable-button:hover {
4858
- --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--hover__draggable-icon--Color);
4859
- cursor: grab;
4661
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-5 {
4662
+ flex-grow: 5;
4663
+ }
4860
4664
  }
4861
-
4862
- .pf-c-data-list__item-draggable-button:focus {
4863
- --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--focus__draggable-icon--Color);
4665
+ @media screen and (min-width: 0) {
4666
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__expandable-content {
4667
+ max-height: initial;
4668
+ overflow-y: visible;
4669
+ }
4864
4670
  }
4865
-
4866
- .pf-c-data-list__item-draggable-button:active {
4867
- cursor: grabbing;
4671
+ @media screen and (min-width: 576px) {
4672
+ .pf-c-data-list.pf-m-grid-sm {
4673
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
4674
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
4675
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
4676
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
4677
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
4678
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
4679
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
4680
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
4681
+ }
4868
4682
  }
4869
-
4870
- .pf-c-data-list__item-draggable-button.pf-m-disabled {
4871
- --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color);
4872
- pointer-events: none;
4683
+ @media screen and (min-width: 576px) and (min-width: 1200px) {
4684
+ .pf-c-data-list.pf-m-grid-sm {
4685
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
4686
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
4687
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
4688
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
4689
+ }
4873
4690
  }
4874
-
4875
- .pf-c-data-list__item-draggable-button .pf-c-data-list__item-draggable-icon {
4876
- color: var(--pf-c-data-list__item-draggable-button-icon--Color);
4691
+ @media screen and (min-width: 576px) {
4692
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__item-content {
4693
+ display: flex;
4694
+ flex-wrap: wrap;
4695
+ flex-grow: 1;
4696
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
4697
+ }
4877
4698
  }
4699
+ @media screen and (min-width: 576px) {
4700
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4701
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
4702
+ }
4878
4703
 
4879
- .pf-c-data-list__item-action {
4880
- --pf-hidden-visible--visible--Display: var(--pf-c-data-list__item-action--Display);
4881
- align-items: flex-start;
4882
- align-content: flex-start;
4883
- padding-top: var(--pf-c-data-list__item-action--PaddingTop);
4884
- padding-bottom: var(--pf-c-data-list__item-action--PaddingBottom);
4885
- margin-left: var(--pf-c-data-list__item-action--MarginLeft);
4886
- }
4704
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell + .pf-c-data-list__cell {
4705
+ flex: 1;
4706
+ order: initial;
4707
+ }
4887
4708
 
4888
- .pf-c-data-list__item-action > *:not(:last-child) {
4889
- margin-right: var(--pf-c-data-list__item-action--not-last-child--MarginRight);
4890
- }
4709
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-align-right {
4710
+ margin-left: auto;
4711
+ }
4891
4712
 
4892
- .pf-c-data-list__item-action .pf-c-data-list__action {
4893
- margin-top: var(--pf-c-data-list__action--MarginTop);
4894
- margin-bottom: var(--pf-c-data-list__item-action__action--MarginBottom);
4895
- }
4713
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-no-fill {
4714
+ flex: none;
4715
+ }
4896
4716
 
4897
- .pf-c-data-list__toggle {
4898
- margin: var(--pf-c-data-list__toggle--MarginTop) 0 var(--pf-c-data-list__toggle--MarginBottom) var(--pf-c-data-list__toggle--MarginLeft);
4899
- }
4717
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-2 {
4718
+ flex-grow: 2;
4719
+ }
4900
4720
 
4901
- .pf-c-data-list__toggle-icon {
4902
- height: var(--pf-c-data-list__toggle-icon--Height);
4903
- pointer-events: none;
4904
- transition: var(--pf-c-data-list__toggle-icon--Transition);
4905
- transform: rotate(var(--pf-c-data-list__toggle-icon--Rotate));
4906
- }
4721
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-3 {
4722
+ flex-grow: 3;
4723
+ }
4907
4724
 
4908
- .pf-c-data-list__item-content {
4909
- display: grid;
4910
- width: 100%;
4911
- grid-template-columns: auto 1fr;
4912
- }
4725
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-4 {
4726
+ flex-grow: 4;
4727
+ }
4913
4728
 
4914
- .pf-c-data-list__cell {
4915
- flex: 1;
4916
- grid-column: 1/-1;
4917
- padding-top: var(--pf-c-data-list__cell--PaddingTop);
4918
- padding-bottom: var(--pf-c-data-list__cell--PaddingBottom);
4729
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-5 {
4730
+ flex-grow: 5;
4731
+ }
4919
4732
  }
4920
-
4921
- .pf-c-data-list__cell + .pf-c-data-list__cell {
4922
- flex: 1 0 100%;
4923
- order: 1;
4924
- padding-top: var(--pf-c-data-list__cell--cell--PaddingTop);
4733
+ @media screen and (min-width: 576px) {
4734
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__expandable-content {
4735
+ max-height: initial;
4736
+ overflow-y: visible;
4737
+ }
4925
4738
  }
4926
-
4927
- .pf-c-data-list__cell.pf-m-icon {
4928
- flex-grow: 0;
4929
- margin-right: var(--pf-c-data-list__cell--m-icon--MarginRight);
4930
- grid-column: 1/2;
4739
+ @media screen and (min-width: 768px) {
4740
+ .pf-c-data-list.pf-m-grid-md {
4741
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
4742
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
4743
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
4744
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
4745
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
4746
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
4747
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
4748
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
4749
+ }
4931
4750
  }
4932
-
4933
- .pf-c-data-list__cell.pf-m-icon + .pf-c-data-list__cell {
4934
- grid-column: 2/3;
4935
- padding-top: var(--pf-c-data-list__cell--m-icon--cell--PaddingTop);
4751
+ @media screen and (min-width: 768px) and (min-width: 1200px) {
4752
+ .pf-c-data-list.pf-m-grid-md {
4753
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
4754
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
4755
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
4756
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
4757
+ }
4936
4758
  }
4937
-
4938
- .pf-c-data-list__cell.pf-m-align-right {
4939
- margin-left: 0;
4759
+ @media screen and (min-width: 768px) {
4760
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__item-content {
4761
+ display: flex;
4762
+ flex-wrap: wrap;
4763
+ flex-grow: 1;
4764
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
4765
+ }
4940
4766
  }
4767
+ @media screen and (min-width: 768px) {
4768
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4769
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
4770
+ }
4941
4771
 
4942
- .pf-c-data-list__text {
4943
- display: inline-block;
4944
- }
4772
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell + .pf-c-data-list__cell {
4773
+ flex: 1;
4774
+ order: initial;
4775
+ }
4945
4776
 
4946
- .pf-c-data-list__text,
4947
- .pf-c-data-list__cell {
4948
- min-width: var(--pf-c-data-list--cell--MinWidth);
4949
- max-width: 100%;
4950
- overflow: var(--pf-c-data-list--cell--Overflow);
4951
- text-overflow: var(--pf-c-data-list--cell--TextOverflow);
4952
- word-break: var(--pf-c-data-list--cell--WordBreak);
4953
- white-space: var(--pf-c-data-list--cell--WhiteSpace);
4954
- }
4777
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-align-right {
4778
+ margin-left: auto;
4779
+ }
4955
4780
 
4956
- .pf-c-data-list__expandable-content {
4957
- max-height: var(--pf-c-data-list__expandable-content--MaxHeight);
4958
- overflow-y: auto;
4959
- border-top: var(--pf-c-data-list__expandable-content--BorderTopWidth) solid var(--pf-c-data-list__expandable-content--BorderTopColor);
4960
- }
4781
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-no-fill {
4782
+ flex: none;
4783
+ }
4961
4784
 
4962
- .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body {
4963
- 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);
4964
- }
4785
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-2 {
4786
+ flex-grow: 2;
4787
+ }
4965
4788
 
4966
- .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body.pf-m-no-padding {
4967
- padding: 0;
4968
- }
4789
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-3 {
4790
+ flex-grow: 3;
4791
+ }
4969
4792
 
4970
- :where(.pf-theme-dark) .pf-c-data-list {
4971
- --pf-c-data-list--BorderTopColor: var(--pf-global--BorderColor--100);
4972
- --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);
4973
- --pf-c-data-list__item--BorderBottomColor: var(--pf-global--BorderColor--100);
4974
- --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
4975
- }
4793
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-4 {
4794
+ flex-grow: 4;
4795
+ }
4976
4796
 
4797
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-5 {
4798
+ flex-grow: 5;
4799
+ }
4800
+ }
4977
4801
  @media screen and (min-width: 768px) {
4978
- .pf-c-data-list:not([class*=pf-m-grid]) {
4802
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__expandable-content {
4803
+ max-height: initial;
4804
+ overflow-y: visible;
4805
+ }
4806
+ }
4807
+ @media screen and (min-width: 992px) {
4808
+ .pf-c-data-list.pf-m-grid-lg {
4979
4809
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
4980
4810
  --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
4981
4811
  --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
@@ -4986,64 +4816,64 @@ label.pf-c-check, .pf-c-check__label,
4986
4816
  --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
4987
4817
  }
4988
4818
  }
4989
- @media screen and (min-width: 768px) and (min-width: 1200px) {
4990
- .pf-c-data-list:not([class*=pf-m-grid]) {
4819
+ @media screen and (min-width: 992px) and (min-width: 1200px) {
4820
+ .pf-c-data-list.pf-m-grid-lg {
4991
4821
  --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
4992
4822
  --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
4993
4823
  --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
4994
4824
  --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
4995
4825
  }
4996
4826
  }
4997
- @media screen and (min-width: 768px) {
4998
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__item-content {
4827
+ @media screen and (min-width: 992px) {
4828
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__item-content {
4999
4829
  display: flex;
5000
4830
  flex-wrap: wrap;
5001
4831
  flex-grow: 1;
5002
4832
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
5003
4833
  }
5004
4834
  }
5005
- @media screen and (min-width: 768px) {
5006
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4835
+ @media screen and (min-width: 992px) {
4836
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5007
4837
  margin-right: var(--pf-c-data-list__cell--MarginRight);
5008
4838
  }
5009
4839
 
5010
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell + .pf-c-data-list__cell {
4840
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell + .pf-c-data-list__cell {
5011
4841
  flex: 1;
5012
4842
  order: initial;
5013
4843
  }
5014
4844
 
5015
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-align-right {
4845
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-align-right {
5016
4846
  margin-left: auto;
5017
4847
  }
5018
4848
 
5019
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-no-fill {
4849
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-no-fill {
5020
4850
  flex: none;
5021
4851
  }
5022
4852
 
5023
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-2 {
4853
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-2 {
5024
4854
  flex-grow: 2;
5025
4855
  }
5026
4856
 
5027
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-3 {
4857
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-3 {
5028
4858
  flex-grow: 3;
5029
4859
  }
5030
4860
 
5031
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-4 {
4861
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-4 {
5032
4862
  flex-grow: 4;
5033
4863
  }
5034
4864
 
5035
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-5 {
4865
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-5 {
5036
4866
  flex-grow: 5;
5037
4867
  }
5038
4868
  }
5039
- @media screen and (min-width: 768px) {
5040
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__expandable-content {
4869
+ @media screen and (min-width: 992px) {
4870
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__expandable-content {
5041
4871
  max-height: initial;
5042
4872
  overflow-y: visible;
5043
4873
  }
5044
4874
  }
5045
- @media screen and (min-width: 0) {
5046
- .pf-c-data-list.pf-m-grid-none {
4875
+ @media screen and (min-width: 1200px) {
4876
+ .pf-c-data-list.pf-m-grid-xl {
5047
4877
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
5048
4878
  --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
5049
4879
  --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
@@ -5054,64 +4884,64 @@ label.pf-c-check, .pf-c-check__label,
5054
4884
  --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
5055
4885
  }
5056
4886
  }
5057
- @media screen and (min-width: 0) and (min-width: 1200px) {
5058
- .pf-c-data-list.pf-m-grid-none {
4887
+ @media screen and (min-width: 1200px) and (min-width: 1200px) {
4888
+ .pf-c-data-list.pf-m-grid-xl {
5059
4889
  --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
5060
4890
  --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
5061
4891
  --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
5062
4892
  --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
5063
4893
  }
5064
4894
  }
5065
- @media screen and (min-width: 0) {
5066
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__item-content {
4895
+ @media screen and (min-width: 1200px) {
4896
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__item-content {
5067
4897
  display: flex;
5068
4898
  flex-wrap: wrap;
5069
4899
  flex-grow: 1;
5070
4900
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
5071
4901
  }
5072
4902
  }
5073
- @media screen and (min-width: 0) {
5074
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4903
+ @media screen and (min-width: 1200px) {
4904
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5075
4905
  margin-right: var(--pf-c-data-list__cell--MarginRight);
5076
4906
  }
5077
4907
 
5078
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell + .pf-c-data-list__cell {
4908
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell + .pf-c-data-list__cell {
5079
4909
  flex: 1;
5080
4910
  order: initial;
5081
4911
  }
5082
4912
 
5083
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-align-right {
4913
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-align-right {
5084
4914
  margin-left: auto;
5085
4915
  }
5086
4916
 
5087
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-no-fill {
4917
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-no-fill {
5088
4918
  flex: none;
5089
4919
  }
5090
4920
 
5091
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-2 {
4921
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-2 {
5092
4922
  flex-grow: 2;
5093
4923
  }
5094
4924
 
5095
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-3 {
4925
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-3 {
5096
4926
  flex-grow: 3;
5097
4927
  }
5098
4928
 
5099
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-4 {
4929
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-4 {
5100
4930
  flex-grow: 4;
5101
4931
  }
5102
4932
 
5103
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-5 {
4933
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-5 {
5104
4934
  flex-grow: 5;
5105
4935
  }
5106
4936
  }
5107
- @media screen and (min-width: 0) {
5108
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__expandable-content {
4937
+ @media screen and (min-width: 1200px) {
4938
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__expandable-content {
5109
4939
  max-height: initial;
5110
4940
  overflow-y: visible;
5111
4941
  }
5112
4942
  }
5113
- @media screen and (min-width: 576px) {
5114
- .pf-c-data-list.pf-m-grid-sm {
4943
+ @media screen and (min-width: 1450px) {
4944
+ .pf-c-data-list.pf-m-grid-2xl {
5115
4945
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
5116
4946
  --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
5117
4947
  --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
@@ -5122,334 +4952,504 @@ label.pf-c-check, .pf-c-check__label,
5122
4952
  --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
5123
4953
  }
5124
4954
  }
5125
- @media screen and (min-width: 576px) and (min-width: 1200px) {
5126
- .pf-c-data-list.pf-m-grid-sm {
4955
+ @media screen and (min-width: 1450px) and (min-width: 1200px) {
4956
+ .pf-c-data-list.pf-m-grid-2xl {
5127
4957
  --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
5128
4958
  --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
5129
4959
  --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
5130
4960
  --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
5131
4961
  }
5132
4962
  }
5133
- @media screen and (min-width: 576px) {
5134
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__item-content {
4963
+ @media screen and (min-width: 1450px) {
4964
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__item-content {
5135
4965
  display: flex;
5136
4966
  flex-wrap: wrap;
5137
4967
  flex-grow: 1;
5138
4968
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
5139
4969
  }
5140
4970
  }
5141
- @media screen and (min-width: 576px) {
5142
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4971
+ @media screen and (min-width: 1450px) {
4972
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5143
4973
  margin-right: var(--pf-c-data-list__cell--MarginRight);
5144
4974
  }
5145
4975
 
5146
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell + .pf-c-data-list__cell {
4976
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell + .pf-c-data-list__cell {
5147
4977
  flex: 1;
5148
4978
  order: initial;
5149
4979
  }
5150
4980
 
5151
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-align-right {
4981
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-align-right {
5152
4982
  margin-left: auto;
5153
4983
  }
5154
4984
 
5155
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-no-fill {
4985
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-no-fill {
5156
4986
  flex: none;
5157
4987
  }
5158
4988
 
5159
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-2 {
4989
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-2 {
5160
4990
  flex-grow: 2;
5161
4991
  }
5162
4992
 
5163
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-3 {
4993
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-3 {
5164
4994
  flex-grow: 3;
5165
4995
  }
5166
4996
 
5167
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-4 {
4997
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-4 {
5168
4998
  flex-grow: 4;
5169
4999
  }
5170
5000
 
5171
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-5 {
5001
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-5 {
5172
5002
  flex-grow: 5;
5173
5003
  }
5174
5004
  }
5175
- @media screen and (min-width: 576px) {
5176
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__expandable-content {
5005
+ @media screen and (min-width: 1450px) {
5006
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__expandable-content {
5177
5007
  max-height: initial;
5178
5008
  overflow-y: visible;
5179
5009
  }
5180
5010
  }
5181
- @media screen and (min-width: 768px) {
5182
- .pf-c-data-list.pf-m-grid-md {
5183
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
5184
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
5185
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
5186
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
5187
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
5188
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
5189
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
5190
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
5011
+ .pf-c-data-list {
5012
+ --pf-c-data-list--FontSize: 1em;
5013
+ --pf-c-data-list--LineHeight: var(--pf-global--LineHeight--md);
5014
+ --pf-c-data-list--BorderTopColor: var(--pf-global--BorderColor--300);
5015
+ --pf-c-data-list--BorderTopWidth: var(--pf-global--spacer--sm);
5016
+ --pf-c-data-list--sm--BorderTopWidth: var(--pf-global--BorderWidth--sm);
5017
+ --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);
5018
+ --pf-c-data-list__item--BackgroundColor: var(--pf-global--BackgroundColor--100);
5019
+ --pf-c-data-list__item--m-selected--ZIndex: var(--pf-global--ZIndex--xs);
5020
+ --pf-c-data-list__item--m-expanded--before--BackgroundColor: var(--pf-global--active-color--100);
5021
+ --pf-c-data-list__item--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
5022
+ --pf-c-data-list__item--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
5023
+ --pf-c-data-list__item--m-selectable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
5024
+ --pf-c-data-list__item--m-selectable--hover--ZIndex: calc(var(--pf-c-data-list__item--m-selected--ZIndex) + 1);
5025
+ --pf-c-data-list__item--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
5026
+ --pf-c-data-list__item--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
5027
+ --pf-c-data-list__item--m-selectable--active--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
5028
+ --pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor: var(--pf-global--active-color--300);
5029
+ --pf-c-data-list__item--BorderBottomColor: var(--pf-global--BorderColor--300);
5030
+ --pf-c-data-list__item--BorderBottomWidth: 0.5rem;
5031
+ --pf-c-data-list__item--m-selectable--hover--item--BorderTopColor: var(--pf-c-data-list__item--BorderBottomColor);
5032
+ --pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth: var(--pf-c-data-list__item--BorderBottomWidth);
5033
+ --pf-c-data-list__item--sm--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
5034
+ --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
5035
+ --pf-c-data-list__item--before--BackgroundColor: transparent;
5036
+ --pf-c-data-list__item--before--Width: var(--pf-global--BorderWidth--lg);
5037
+ --pf-c-data-list__item--before--Transition: var(--pf-global--Transition);
5038
+ --pf-c-data-list__item--before--Top: 0;
5039
+ --pf-c-data-list__item--before--sm--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
5040
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-global--spacer--md);
5041
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-global--spacer--md);
5042
+ --pf-c-data-list__item-row--xl--PaddingRight: var(--pf-global--spacer--lg);
5043
+ --pf-c-data-list__item-row--xl--PaddingLeft: var(--pf-global--spacer--lg);
5044
+ --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-global--spacer--lg);
5045
+ --pf-c-data-list__cell--PaddingTop: var(--pf-global--spacer--lg);
5046
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-global--spacer--lg);
5047
+ --pf-c-data-list__cell--MarginRight: var(--pf-global--spacer--xl);
5048
+ --pf-c-data-list__cell--md--PaddingBottom: 0;
5049
+ --pf-c-data-list__cell--m-icon--MarginRight: var(--pf-global--spacer--md);
5050
+ --pf-c-data-list__cell--cell--PaddingTop: 0;
5051
+ --pf-c-data-list__cell--cell--md--PaddingTop: var(--pf-global--spacer--lg);
5052
+ --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--lg);
5053
+ --pf-c-data-list--cell--MinWidth: initial;
5054
+ --pf-c-data-list--cell--Overflow: visible;
5055
+ --pf-c-data-list--cell--TextOverflow: clip;
5056
+ --pf-c-data-list--cell--WhiteSpace: normal;
5057
+ --pf-c-data-list--cell--WordBreak: normal;
5058
+ --pf-c-data-list--cell--m-truncate--MinWidth: 5ch;
5059
+ --pf-c-data-list__toggle--MarginLeft: calc(var(--pf-global--spacer--sm) * -1);
5060
+ --pf-c-data-list__toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
5061
+ --pf-c-data-list__toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
5062
+ --pf-c-data-list__toggle-icon--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
5063
+ --pf-c-data-list__toggle-icon--Transition: .2s ease-in 0s;
5064
+ --pf-c-data-list__toggle-icon--Rotate: 0;
5065
+ --pf-c-data-list__item--m-expanded__toggle-icon--Rotate: 90deg;
5066
+ --pf-c-data-list__item-draggable-button--PaddingLeft: var(--pf-global--spacer--md);
5067
+ --pf-c-data-list__item-draggable-button--PaddingRight: var(--pf-global--spacer--md);
5068
+ --pf-c-data-list__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--lg) * -1);
5069
+ --pf-c-data-list__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--lg) * -1);
5070
+ --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-global--spacer--lg);
5071
+ --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-global--spacer--lg);
5072
+ --pf-c-data-list__item-draggable-button--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
5073
+ --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-global--icon--Color--light);
5074
+ --pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color: var(--pf-global--disabled-color--200);
5075
+ --pf-c-data-list__item-draggable-button--hover__draggable-icon--Color: var(--pf-global--icon--Color--dark);
5076
+ --pf-c-data-list__item-draggable-button--focus__draggable-icon--Color: var(--pf-global--icon--Color--dark);
5077
+ --pf-c-data-list__item--m-ghost-row--after--BackgroundColor: var(--pf-global--BackgroundColor--100);
5078
+ --pf-c-data-list__item--m-ghost-row--after--Opacity: .6;
5079
+ --pf-c-data-list__item-control--PaddingTop: var(--pf-global--spacer--lg);
5080
+ --pf-c-data-list__item-control--PaddingBottom: var(--pf-global--spacer--lg);
5081
+ --pf-c-data-list__item-control--MarginRight: var(--pf-global--spacer--md);
5082
+ --pf-c-data-list__item-control--md--MarginRight: var(--pf-global--spacer--xl);
5083
+ --pf-c-data-list__item-control--not-last-child--MarginRight: var(--pf-global--spacer--md);
5084
+ --pf-c-data-list__check--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
5085
+ --pf-c-data-list__check--MarginTop: -0.0625rem;
5086
+ --pf-c-data-list__item-action--Display: flex;
5087
+ --pf-c-data-list__item-action--PaddingTop: var(--pf-global--spacer--lg);
5088
+ --pf-c-data-list__item-action--PaddingBottom: var(--pf-global--spacer--lg);
5089
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-global--spacer--md);
5090
+ --pf-c-data-list__item-action--md--MarginLeft: var(--pf-global--spacer--xl);
5091
+ --pf-c-data-list__item-action--not-last-child--MarginRight: var(--pf-global--spacer--md);
5092
+ --pf-c-data-list__item-action__action--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
5093
+ --pf-c-data-list__action--MarginTop: var(--pf-c-data-list__item-action__action--MarginTop);
5094
+ --pf-c-data-list__item-action__action--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
5095
+ --pf-c-data-list__expandable-content--BorderTopWidth: var(--pf-global--BorderWidth--sm);
5096
+ --pf-c-data-list__expandable-content--BorderTopColor: var(--pf-global--BorderColor--100);
5097
+ --pf-c-data-list__expandable-content--MarginRight: calc(var(--pf-c-data-list__expandable-content-body--PaddingRight) * -1);
5098
+ --pf-c-data-list__expandable-content--MarginLeft: calc(var(--pf-c-data-list__expandable-content-body--PaddingLeft) * -1);
5099
+ --pf-c-data-list__expandable-content--MaxHeight: 37.5rem;
5100
+ --pf-c-data-list__expandable-content--before--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
5101
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-global--spacer--md);
5102
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-global--spacer--md);
5103
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-global--spacer--md);
5104
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-global--spacer--md);
5105
+ --pf-c-data-list__expandable-content-body--md--PaddingTop: var(--pf-global--spacer--lg);
5106
+ --pf-c-data-list__expandable-content-body--xl--PaddingRight: var(--pf-global--spacer--lg);
5107
+ --pf-c-data-list__expandable-content-body--md--PaddingBottom: var(--pf-global--spacer--lg);
5108
+ --pf-c-data-list__expandable-content-body--xl--PaddingLeft: var(--pf-global--spacer--lg);
5109
+ --pf-c-data-list--m-compact--FontSize: var(--pf-global--FontSize--sm);
5110
+ --pf-c-data-list--m-compact--LineHeight: var(--pf-global--LineHeight--sm);
5111
+ --pf-c-data-list--m-compact__check--FontSize: var(--pf-global--FontSize--md);
5112
+ --pf-c-data-list--m-compact__cell--PaddingTop: var(--pf-global--spacer--sm);
5113
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-global--spacer--sm);
5114
+ --pf-c-data-list--m-compact__cell--md--PaddingBottom: 0;
5115
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: 0;
5116
+ --pf-c-data-list--m-compact__cell-cell--md--PaddingTop: var(--pf-global--spacer--sm);
5117
+ --pf-c-data-list--m-compact__cell--cell--MarginRight: var(--pf-global--spacer--md);
5118
+ --pf-c-data-list--m-compact__item-control--PaddingTop: var(--pf-global--spacer--sm);
5119
+ --pf-c-data-list--m-compact__item-control--PaddingBottom: var(--pf-global--spacer--sm);
5120
+ --pf-c-data-list--m-compact__item-control--MarginRight: var(--pf-global--spacer--md);
5121
+ --pf-c-data-list--m-compact__item-action--PaddingTop: var(--pf-global--spacer--sm);
5122
+ --pf-c-data-list--m-compact__item-action--PaddingBottom: var(--pf-global--spacer--sm);
5123
+ --pf-c-data-list--m-compact__item-action--MarginLeft: var(--pf-global--spacer--md);
5124
+ --pf-c-data-list--m-compact__item-action__action--MarginTop: calc(var(--pf-c-data-list--m-compact__item-action--PaddingTop) * -1);
5125
+ --pf-c-data-list--m-compact__item-action__action--MarginBottom: calc(var(--pf-c-data-list--m-compact__item-action--PaddingBottom) * -1);
5126
+ --pf-c-data-list--m-compact__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
5127
+ --pf-c-data-list--m-compact__item-content--PaddingBottom: var(--pf-global--spacer--sm);
5128
+ --pf-c-data-list--m-compact__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
5129
+ --pf-c-data-list--m-compact__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--sm) * -1);
5130
+ --pf-c-data-list--m-compact__item-draggable-button--PaddingTop: var(--pf-global--spacer--sm);
5131
+ --pf-c-data-list--m-compact__item-draggable-button--PaddingBottom: var(--pf-global--spacer--sm);
5132
+ --pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--sm);
5133
+ color: var(--pf-global--Color--100);
5134
+ font-size: var(--pf-c-data-list--FontSize);
5135
+ line-height: var(--pf-c-data-list--LineHeight);
5136
+ overflow-wrap: break-word;
5137
+ list-style-type: disc;
5138
+ border-top: var(--pf-c-data-list--BorderTopWidth) solid var(--pf-c-data-list--BorderTopColor);
5139
+ }
5140
+
5141
+ @media screen and (min-width: 576px) {
5142
+ .pf-c-data-list {
5143
+ --pf-c-data-list--BorderTopColor: var(--pf-c-data-list--sm--BorderTopColor);
5144
+ --pf-c-data-list--BorderTopWidth: var(--pf-c-data-list--sm--BorderTopWidth);
5191
5145
  }
5192
5146
  }
5193
- @media screen and (min-width: 768px) and (min-width: 1200px) {
5194
- .pf-c-data-list.pf-m-grid-md {
5195
- --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
5196
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
5197
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
5198
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
5147
+ @media screen and (min-width: 576px) {
5148
+ .pf-c-data-list {
5149
+ --pf-c-data-list__item--BorderBottomWidth: var(--pf-c-data-list__item--sm--BorderBottomWidth);
5150
+ --pf-c-data-list__item--BorderBottomColor: var(--pf-c-data-list__item--sm--BorderBottomColor);
5199
5151
  }
5200
5152
  }
5201
- @media screen and (min-width: 768px) {
5202
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__item-content {
5203
- display: flex;
5204
- flex-wrap: wrap;
5205
- flex-grow: 1;
5206
- padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
5153
+ @media (min-width: 576px) {
5154
+ .pf-c-data-list {
5155
+ --pf-c-data-list__item--before--Top: var(--pf-c-data-list__item--before--sm--Top);
5207
5156
  }
5208
5157
  }
5209
- @media screen and (min-width: 768px) {
5210
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5211
- margin-right: var(--pf-c-data-list__cell--MarginRight);
5212
- }
5158
+ .pf-c-data-list.pf-m-compact {
5159
+ --pf-c-data-list__check--FontSize: var(--pf-c-data-list--m-compact__check--FontSize);
5160
+ --pf-c-data-list__action--MarginTop: var(--pf-c-data-list--m-compact__action--MarginTop);
5161
+ --pf-c-data-list--FontSize: var(--pf-c-data-list--m-compact--FontSize);
5162
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list--m-compact__item-action--MarginLeft);
5163
+ --pf-c-data-list__item-action--PaddingTop: var(--pf-c-data-list--m-compact__item-action--PaddingTop);
5164
+ --pf-c-data-list__item-action--PaddingBottom: var(--pf-c-data-list--m-compact__item-action--PaddingBottom);
5165
+ --pf-c-data-list__item-action__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
5166
+ --pf-c-data-list__item-action__action--MarginBottom: var(--pf-c-data-list--m-compact__item-action__action--MarginBottom);
5167
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list--m-compact__item-control--MarginRight);
5168
+ --pf-c-data-list__item-control--PaddingTop: var(--pf-c-data-list--m-compact__item-control--PaddingTop);
5169
+ --pf-c-data-list__item-control--PaddingBottom: var(--pf-c-data-list--m-compact__item-control--PaddingBottom);
5170
+ --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-c-data-list--m-compact__item-content--PaddingBottom);
5171
+ --pf-c-data-list__item-draggable-button--MarginTop: var(--pf-c-data-list--m-compact__item-draggable-button--MarginTop);
5172
+ --pf-c-data-list__item-draggable-button--MarginBottom: var(--pf-c-data-list--m-compact__item-draggable-button--MarginBottom);
5173
+ --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingTop);
5174
+ --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingBottom);
5175
+ --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop);
5176
+ font-size: var(--pf-c-data-list--m-compact--FontSize);
5177
+ }
5178
+
5179
+ .pf-c-data-list.pf-m-compact .pf-c-data-list__cell {
5180
+ --pf-c-data-list__cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--PaddingTop);
5181
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--PaddingBottom);
5182
+ --pf-c-data-list__cell--MarginRight: var(--pf-c-data-list--m-compact__cell--cell--MarginRight);
5183
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--PaddingTop);
5184
+ }
5185
+
5186
+ .pf-c-data-list.pf-m-compact .pf-c-data-list__check {
5187
+ font-size: var(--pf-c-data-list--m-compact__check--FontSize);
5188
+ }
5189
+
5190
+ .pf-c-data-list.pf-m-drag-over {
5191
+ overflow-anchor: none;
5192
+ }
5193
+
5194
+ .pf-c-data-list.pf-m-truncate,
5195
+ .pf-c-data-list__item-row.pf-m-truncate,
5196
+ .pf-c-data-list__cell.pf-m-truncate,
5197
+ .pf-c-data-list__text.pf-m-truncate {
5198
+ --pf-c-data-list--cell--MinWidth: var(--pf-c-data-list--cell--m-truncate--MinWidth);
5199
+ --pf-c-data-list--cell--Overflow: hidden;
5200
+ --pf-c-data-list--cell--TextOverflow: ellipsis;
5201
+ --pf-c-data-list--cell--WhiteSpace: nowrap;
5202
+ }
5203
+
5204
+ .pf-c-data-list.pf-m-break-word,
5205
+ .pf-c-data-list__item-row.pf-m-break-word,
5206
+ .pf-c-data-list__cell.pf-m-break-word,
5207
+ .pf-c-data-list__text.pf-m-break-word {
5208
+ --pf-c-data-list--cell--WordBreak: break-word;
5209
+ }
5210
+
5211
+ .pf-c-data-list.pf-m-nowrap,
5212
+ .pf-c-data-list__item-row.pf-m-nowrap,
5213
+ .pf-c-data-list__cell.pf-m-nowrap,
5214
+ .pf-c-data-list__text.pf-m-nowrap {
5215
+ --pf-c-data-list--cell--WhiteSpace: nowrap;
5216
+ }
5213
5217
 
5214
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell + .pf-c-data-list__cell {
5215
- flex: 1;
5216
- order: initial;
5217
- }
5218
+ .pf-c-data-list__item {
5219
+ position: relative;
5220
+ display: flex;
5221
+ flex-direction: column;
5222
+ background-color: var(--pf-c-data-list__item--BackgroundColor);
5223
+ border-bottom: var(--pf-c-data-list__item--BorderBottomWidth) solid var(--pf-c-data-list__item--BorderBottomColor);
5224
+ }
5218
5225
 
5219
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-align-right {
5220
- margin-left: auto;
5221
- }
5226
+ .pf-c-data-list__item::before {
5227
+ position: absolute;
5228
+ top: var(--pf-c-data-list__item--before--Top);
5229
+ bottom: 0;
5230
+ left: 0;
5231
+ width: var(--pf-c-data-list__item--before--Width);
5232
+ content: "";
5233
+ background-color: var(--pf-c-data-list__item--before--BackgroundColor);
5234
+ transition: var(--pf-c-data-list__item--before--Transition);
5235
+ }
5222
5236
 
5223
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-no-fill {
5224
- flex: none;
5225
- }
5237
+ .pf-c-data-list__item.pf-m-selectable {
5238
+ cursor: pointer;
5239
+ outline-offset: var(--pf-c-data-list__item--m-selectable--OutlineOffset);
5240
+ }
5226
5241
 
5227
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-2 {
5228
- flex-grow: 2;
5229
- }
5242
+ .pf-c-data-list__item.pf-m-selectable:hover, .pf-c-data-list__item.pf-m-selectable:focus {
5243
+ position: relative;
5244
+ z-index: var(--pf-c-data-list__item--m-selectable--hover--ZIndex);
5245
+ }
5230
5246
 
5231
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-3 {
5232
- flex-grow: 3;
5233
- }
5247
+ .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) {
5248
+ --pf-c-data-list__item--BorderBottomWidth: 0;
5249
+ }
5234
5250
 
5235
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-4 {
5236
- flex-grow: 4;
5237
- }
5251
+ .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 {
5252
+ 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);
5253
+ }
5238
5254
 
5239
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-5 {
5240
- flex-grow: 5;
5241
- }
5255
+ .pf-c-data-list__item.pf-m-selectable:hover {
5256
+ box-shadow: var(--pf-c-data-list__item--m-selectable--hover--BoxShadow);
5242
5257
  }
5243
- @media screen and (min-width: 768px) {
5244
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__expandable-content {
5245
- max-height: initial;
5246
- overflow-y: visible;
5247
- }
5258
+
5259
+ .pf-c-data-list__item.pf-m-selectable:focus {
5260
+ box-shadow: var(--pf-c-data-list__item--m-selectable--focus--BoxShadow);
5248
5261
  }
5249
- @media screen and (min-width: 992px) {
5250
- .pf-c-data-list.pf-m-grid-lg {
5251
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
5252
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
5253
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
5254
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
5255
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
5256
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
5257
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
5258
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
5259
- }
5262
+
5263
+ .pf-c-data-list__item.pf-m-selectable:active {
5264
+ box-shadow: var(--pf-c-data-list__item--m-selectable--active--BoxShadow);
5260
5265
  }
5261
- @media screen and (min-width: 992px) and (min-width: 1200px) {
5262
- .pf-c-data-list.pf-m-grid-lg {
5263
- --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
5264
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
5265
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
5266
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
5267
- }
5266
+
5267
+ .pf-c-data-list__item.pf-m-selected {
5268
+ --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-selected--before--BackgroundColor);
5269
+ position: relative;
5270
+ z-index: var(--pf-c-data-list__item--m-selected--ZIndex);
5271
+ box-shadow: var(--pf-c-data-list__item--m-selected--BoxShadow);
5268
5272
  }
5269
- @media screen and (min-width: 992px) {
5270
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__item-content {
5271
- display: flex;
5272
- flex-wrap: wrap;
5273
- flex-grow: 1;
5274
- padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
5275
- }
5273
+
5274
+ .pf-c-data-list__item.pf-m-ghost-row::after {
5275
+ position: absolute;
5276
+ top: 0;
5277
+ right: 0;
5278
+ bottom: 0;
5279
+ left: 0;
5280
+ content: "";
5281
+ background-color: var(--pf-c-data-list__item--m-ghost-row--after--BackgroundColor);
5282
+ opacity: var(--pf-c-data-list__item--m-ghost-row--after--Opacity);
5276
5283
  }
5277
- @media screen and (min-width: 992px) {
5278
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5279
- margin-right: var(--pf-c-data-list__cell--MarginRight);
5280
- }
5281
5284
 
5282
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell + .pf-c-data-list__cell {
5283
- flex: 1;
5284
- order: initial;
5285
- }
5285
+ .pf-c-data-list__item.pf-m-expanded {
5286
+ --pf-c-data-list__toggle-icon--Rotate: var(--pf-c-data-list__item--m-expanded__toggle-icon--Rotate);
5287
+ --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--before--BackgroundColor);
5288
+ }
5286
5289
 
5287
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-align-right {
5288
- margin-left: auto;
5289
- }
5290
+ .pf-c-data-list__item.pf-m-expanded.pf-m-selectable:not(.pf-m-selected) {
5291
+ --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor);
5292
+ }
5290
5293
 
5291
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-no-fill {
5292
- flex: none;
5293
- }
5294
+ .pf-c-data-list__item-row {
5295
+ display: flex;
5296
+ flex-wrap: nowrap;
5297
+ padding-right: var(--pf-c-data-list__item-row--PaddingRight);
5298
+ padding-left: var(--pf-c-data-list__item-row--PaddingLeft);
5299
+ }
5294
5300
 
5295
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-2 {
5296
- flex-grow: 2;
5297
- }
5301
+ .pf-c-data-list__item-control {
5302
+ display: flex;
5303
+ flex-wrap: nowrap;
5304
+ padding-top: var(--pf-c-data-list__item-control--PaddingTop);
5305
+ padding-bottom: var(--pf-c-data-list__item-control--PaddingBottom);
5306
+ margin-right: var(--pf-c-data-list__item-control--MarginRight);
5307
+ }
5298
5308
 
5299
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-3 {
5300
- flex-grow: 3;
5301
- }
5309
+ .pf-c-data-list__item-control > *:not(:last-child) {
5310
+ margin-right: var(--pf-c-data-list__item-control--not-last-child--MarginRight);
5311
+ }
5302
5312
 
5303
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-4 {
5304
- flex-grow: 4;
5305
- }
5313
+ .pf-c-data-list__check {
5314
+ display: flex;
5315
+ align-items: center;
5316
+ align-self: flex-start;
5317
+ height: var(--pf-c-data-list__check--Height);
5318
+ margin-top: var(--pf-c-data-list__check--MarginTop);
5319
+ }
5306
5320
 
5307
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-5 {
5308
- flex-grow: 5;
5309
- }
5321
+ .pf-c-data-list__check > input {
5322
+ cursor: pointer;
5310
5323
  }
5311
- @media screen and (min-width: 992px) {
5312
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__expandable-content {
5313
- max-height: initial;
5314
- overflow-y: visible;
5315
- }
5324
+
5325
+ .pf-c-data-list__item-draggable-button {
5326
+ display: flex;
5327
+ flex-direction: column;
5328
+ 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);
5329
+ 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);
5330
+ border: 0;
5316
5331
  }
5317
- @media screen and (min-width: 1200px) {
5318
- .pf-c-data-list.pf-m-grid-xl {
5319
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
5320
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
5321
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
5322
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
5323
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
5324
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
5325
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
5326
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
5327
- }
5332
+
5333
+ .pf-c-data-list__item-draggable-button:hover {
5334
+ --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--hover__draggable-icon--Color);
5335
+ cursor: grab;
5328
5336
  }
5329
- @media screen and (min-width: 1200px) and (min-width: 1200px) {
5330
- .pf-c-data-list.pf-m-grid-xl {
5331
- --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
5332
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
5333
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
5334
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
5335
- }
5337
+
5338
+ .pf-c-data-list__item-draggable-button:focus {
5339
+ --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--focus__draggable-icon--Color);
5336
5340
  }
5337
- @media screen and (min-width: 1200px) {
5338
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__item-content {
5339
- display: flex;
5340
- flex-wrap: wrap;
5341
- flex-grow: 1;
5342
- padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
5343
- }
5341
+
5342
+ .pf-c-data-list__item-draggable-button:active {
5343
+ cursor: grabbing;
5344
5344
  }
5345
- @media screen and (min-width: 1200px) {
5346
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5347
- margin-right: var(--pf-c-data-list__cell--MarginRight);
5348
- }
5349
5345
 
5350
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell + .pf-c-data-list__cell {
5351
- flex: 1;
5352
- order: initial;
5353
- }
5346
+ .pf-c-data-list__item-draggable-button.pf-m-disabled {
5347
+ --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color);
5348
+ pointer-events: none;
5349
+ }
5354
5350
 
5355
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-align-right {
5356
- margin-left: auto;
5357
- }
5351
+ .pf-c-data-list__item-draggable-button .pf-c-data-list__item-draggable-icon {
5352
+ color: var(--pf-c-data-list__item-draggable-button-icon--Color);
5353
+ }
5358
5354
 
5359
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-no-fill {
5360
- flex: none;
5361
- }
5355
+ .pf-c-data-list__item-action {
5356
+ --pf-hidden-visible--visible--Display: var(--pf-c-data-list__item-action--Display);
5357
+ align-items: flex-start;
5358
+ align-content: flex-start;
5359
+ padding-top: var(--pf-c-data-list__item-action--PaddingTop);
5360
+ padding-bottom: var(--pf-c-data-list__item-action--PaddingBottom);
5361
+ margin-left: var(--pf-c-data-list__item-action--MarginLeft);
5362
+ }
5362
5363
 
5363
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-2 {
5364
- flex-grow: 2;
5365
- }
5364
+ .pf-c-data-list__item-action > *:not(:last-child) {
5365
+ margin-right: var(--pf-c-data-list__item-action--not-last-child--MarginRight);
5366
+ }
5366
5367
 
5367
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-3 {
5368
- flex-grow: 3;
5369
- }
5368
+ .pf-c-data-list__item-action .pf-c-data-list__action {
5369
+ margin-top: var(--pf-c-data-list__action--MarginTop);
5370
+ margin-bottom: var(--pf-c-data-list__item-action__action--MarginBottom);
5371
+ }
5370
5372
 
5371
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-4 {
5372
- flex-grow: 4;
5373
- }
5373
+ .pf-c-data-list__toggle {
5374
+ margin: var(--pf-c-data-list__toggle--MarginTop) 0 var(--pf-c-data-list__toggle--MarginBottom) var(--pf-c-data-list__toggle--MarginLeft);
5375
+ }
5374
5376
 
5375
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-5 {
5376
- flex-grow: 5;
5377
- }
5377
+ .pf-c-data-list__toggle-icon {
5378
+ height: var(--pf-c-data-list__toggle-icon--Height);
5379
+ pointer-events: none;
5380
+ transition: var(--pf-c-data-list__toggle-icon--Transition);
5381
+ transform: rotate(var(--pf-c-data-list__toggle-icon--Rotate));
5378
5382
  }
5379
- @media screen and (min-width: 1200px) {
5380
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__expandable-content {
5381
- max-height: initial;
5382
- overflow-y: visible;
5383
- }
5383
+
5384
+ .pf-c-data-list__item-content {
5385
+ display: grid;
5386
+ width: 100%;
5387
+ grid-template-columns: auto 1fr;
5384
5388
  }
5385
- @media screen and (min-width: 1450px) {
5386
- .pf-c-data-list.pf-m-grid-2xl {
5387
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
5388
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
5389
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
5390
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
5391
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
5392
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
5393
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
5394
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
5395
- }
5389
+
5390
+ .pf-c-data-list__cell {
5391
+ flex: 1;
5392
+ grid-column: 1/-1;
5393
+ padding-top: var(--pf-c-data-list__cell--PaddingTop);
5394
+ padding-bottom: var(--pf-c-data-list__cell--PaddingBottom);
5396
5395
  }
5397
- @media screen and (min-width: 1450px) and (min-width: 1200px) {
5398
- .pf-c-data-list.pf-m-grid-2xl {
5399
- --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
5400
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
5401
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
5402
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
5403
- }
5396
+
5397
+ .pf-c-data-list__cell + .pf-c-data-list__cell {
5398
+ flex: 1 0 100%;
5399
+ order: 1;
5400
+ padding-top: var(--pf-c-data-list__cell--cell--PaddingTop);
5404
5401
  }
5405
- @media screen and (min-width: 1450px) {
5406
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__item-content {
5407
- display: flex;
5408
- flex-wrap: wrap;
5409
- flex-grow: 1;
5410
- padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
5411
- }
5402
+
5403
+ .pf-c-data-list__cell.pf-m-icon {
5404
+ flex-grow: 0;
5405
+ margin-right: var(--pf-c-data-list__cell--m-icon--MarginRight);
5406
+ grid-column: 1/2;
5412
5407
  }
5413
- @media screen and (min-width: 1450px) {
5414
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5415
- margin-right: var(--pf-c-data-list__cell--MarginRight);
5416
- }
5417
5408
 
5418
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell + .pf-c-data-list__cell {
5419
- flex: 1;
5420
- order: initial;
5421
- }
5409
+ .pf-c-data-list__cell.pf-m-icon + .pf-c-data-list__cell {
5410
+ grid-column: 2/3;
5411
+ padding-top: var(--pf-c-data-list__cell--m-icon--cell--PaddingTop);
5412
+ }
5422
5413
 
5423
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-align-right {
5424
- margin-left: auto;
5425
- }
5414
+ .pf-c-data-list__cell.pf-m-align-right {
5415
+ margin-left: 0;
5416
+ }
5426
5417
 
5427
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-no-fill {
5428
- flex: none;
5429
- }
5418
+ .pf-c-data-list__text {
5419
+ display: inline-block;
5420
+ }
5430
5421
 
5431
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-2 {
5432
- flex-grow: 2;
5433
- }
5422
+ .pf-c-data-list__text,
5423
+ .pf-c-data-list__cell {
5424
+ min-width: var(--pf-c-data-list--cell--MinWidth);
5425
+ max-width: 100%;
5426
+ overflow: var(--pf-c-data-list--cell--Overflow);
5427
+ text-overflow: var(--pf-c-data-list--cell--TextOverflow);
5428
+ word-break: var(--pf-c-data-list--cell--WordBreak);
5429
+ white-space: var(--pf-c-data-list--cell--WhiteSpace);
5430
+ }
5434
5431
 
5435
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-3 {
5436
- flex-grow: 3;
5437
- }
5432
+ .pf-c-data-list__expandable-content {
5433
+ max-height: var(--pf-c-data-list__expandable-content--MaxHeight);
5434
+ overflow-y: auto;
5435
+ border-top: var(--pf-c-data-list__expandable-content--BorderTopWidth) solid var(--pf-c-data-list__expandable-content--BorderTopColor);
5436
+ }
5438
5437
 
5439
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-4 {
5440
- flex-grow: 4;
5441
- }
5438
+ .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body {
5439
+ 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);
5440
+ }
5442
5441
 
5443
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-5 {
5444
- flex-grow: 5;
5445
- }
5442
+ .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body.pf-m-no-padding {
5443
+ padding: 0;
5446
5444
  }
5447
- @media screen and (min-width: 1450px) {
5448
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__expandable-content {
5449
- max-height: initial;
5450
- overflow-y: visible;
5451
- }
5445
+
5446
+ :where(.pf-theme-dark) .pf-c-data-list {
5447
+ --pf-c-data-list--BorderTopColor: var(--pf-global--BorderColor--100);
5448
+ --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);
5449
+ --pf-c-data-list__item--BorderBottomColor: var(--pf-global--BorderColor--100);
5450
+ --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
5452
5451
  }
5452
+
5453
5453
  .pf-c-date-picker {
5454
5454
  --pf-c-date-picker--m-top__calendar--Top: 0;
5455
5455
  --pf-c-date-picker--m-top__calendar--TranslateY: calc(-100% - var(--pf-global--spacer--xs));
@@ -8386,82 +8386,225 @@ label.pf-c-check, .pf-c-check__label,
8386
8386
  --pf-c-empty-state__secondary--MarginTop: var(--pf-c-empty-state--m-xs__secondary--MarginTop);
8387
8387
  }
8388
8388
 
8389
- .pf-c-empty-state.pf-m-xs .pf-c-empty-state__body {
8390
- font-size: var(--pf-c-empty-state--m-xs__body--FontSize);
8389
+ .pf-c-empty-state.pf-m-xs .pf-c-empty-state__body {
8390
+ font-size: var(--pf-c-empty-state--m-xs__body--FontSize);
8391
+ }
8392
+
8393
+ .pf-c-empty-state.pf-m-xs .pf-c-button {
8394
+ --pf-c-button--FontSize: var(--pf-c-empty-state--m-xs--button--FontSize);
8395
+ }
8396
+
8397
+ .pf-c-empty-state.pf-m-sm {
8398
+ --pf-c-empty-state__content--MaxWidth: var(--pf-c-empty-state--m-sm__content--MaxWidth);
8399
+ }
8400
+
8401
+ .pf-c-empty-state.pf-m-lg {
8402
+ --pf-c-empty-state__content--MaxWidth: var(--pf-c-empty-state--m-lg__content--MaxWidth);
8403
+ }
8404
+
8405
+ .pf-c-empty-state.pf-m-xl {
8406
+ --pf-c-empty-state__body--MarginTop: var(--pf-c-empty-state--m-xl__body--MarginTop);
8407
+ --pf-c-empty-state__icon--MarginBottom: var(--pf-c-empty-state--m-xl__icon--MarginBottom);
8408
+ --pf-c-empty-state__icon--FontSize: var(--pf-c-empty-state--m-xl__icon--FontSize);
8409
+ --pf-c-empty-state--c-button__secondary--MarginTop: var(--pf-c-empty-state--m-xl--c-button__secondary--MarginTop);
8410
+ }
8411
+
8412
+ .pf-c-empty-state.pf-m-xl .pf-c-empty-state__body {
8413
+ font-size: var(--pf-c-empty-state--m-xl__body--FontSize);
8414
+ }
8415
+
8416
+ .pf-c-empty-state.pf-m-full-height {
8417
+ height: 100%;
8418
+ }
8419
+
8420
+ .pf-c-empty-state__content {
8421
+ max-width: var(--pf-c-empty-state__content--MaxWidth);
8422
+ }
8423
+
8424
+ .pf-c-empty-state__content > .pf-c-title.pf-m-lg {
8425
+ font-size: var(--pf-c-empty-state__content--c-title--m-lg--FontSize);
8426
+ }
8427
+
8428
+ .pf-c-empty-state__icon {
8429
+ margin-bottom: var(--pf-c-empty-state__icon--MarginBottom);
8430
+ font-size: var(--pf-c-empty-state__icon--FontSize);
8431
+ color: var(--pf-c-empty-state__icon--Color);
8432
+ }
8433
+
8434
+ .pf-c-empty-state__body {
8435
+ margin-top: var(--pf-c-empty-state__body--MarginTop);
8436
+ color: var(--pf-c-empty-state__body--Color);
8437
+ }
8438
+
8439
+ .pf-c-empty-state__content > .pf-c-button.pf-m-primary,
8440
+ .pf-c-empty-state__primary {
8441
+ margin-top: var(--pf-c-empty-state__primary--MarginTop);
8442
+ }
8443
+
8444
+ .pf-c-empty-state__content > .pf-c-button.pf-m-primary + .pf-c-empty-state__secondary,
8445
+ .pf-c-empty-state__primary + .pf-c-empty-state__secondary {
8446
+ margin-top: var(--pf-c-empty-state__primary--secondary--MarginTop);
8447
+ }
8448
+
8449
+ .pf-c-empty-state__secondary {
8450
+ display: flex;
8451
+ flex-wrap: wrap;
8452
+ justify-content: center;
8453
+ margin-top: var(--pf-c-empty-state__secondary--MarginTop);
8454
+ margin-bottom: var(--pf-c-empty-state__secondary--MarginBottom);
8455
+ }
8456
+
8457
+ .pf-c-empty-state__secondary > * {
8458
+ margin-right: var(--pf-c-empty-state__secondary--child--MarginRight);
8459
+ margin-bottom: var(--pf-c-empty-state__secondary--child--MarginBottom);
8460
+ margin-left: var(--pf-c-empty-state__secondary--child--MarginLeft);
8461
+ }
8462
+
8463
+ .pf-m-overpass-font .pf-c-empty-state .pf-c-empty-state__content > .pf-c-title.pf-m-lg {
8464
+ font-size: var(--pf-global--FontSize--lg);
8465
+ }
8466
+
8467
+ .pf-c-expandable-section {
8468
+ --pf-c-expandable-section__toggle--PaddingTop: var(--pf-global--spacer--form-element);
8469
+ --pf-c-expandable-section__toggle--PaddingRight: var(--pf-global--spacer--md);
8470
+ --pf-c-expandable-section__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
8471
+ --pf-c-expandable-section__toggle--PaddingLeft: 0;
8472
+ --pf-c-expandable-section__toggle--MarginTop: 0;
8473
+ --pf-c-expandable-section__toggle--Color: var(--pf-global--link--Color);
8474
+ --pf-c-expandable-section__toggle--hover--Color: var(--pf-global--link--Color--hover);
8475
+ --pf-c-expandable-section__toggle--active--Color: var(--pf-global--link--Color--hover);
8476
+ --pf-c-expandable-section__toggle--focus--Color: var(--pf-global--link--Color--hover);
8477
+ --pf-c-expandable-section__toggle--m-expanded--Color: var(--pf-global--link--Color--hover);
8478
+ --pf-c-expandable-section__toggle-icon--MinWidth: 1em;
8479
+ --pf-c-expandable-section__toggle-icon--Color: var(--pf-global--Color--100);
8480
+ --pf-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
8481
+ --pf-c-expandable-section__toggle-icon--Rotate: 0;
8482
+ --pf-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
8483
+ --pf-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
8484
+ --pf-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
8485
+ --pf-c-expandable-section__toggle-text--MarginLeft: calc(var(--pf-global--spacer--xs) + var(--pf-global--spacer--sm));
8486
+ --pf-c-expandable-section__content--MarginTop: var(--pf-global--spacer--md);
8487
+ --pf-c-expandable-section__content--MaxWidth: auto;
8488
+ --pf-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
8489
+ --pf-c-expandable-section--m-display-lg--BoxShadow: var(--pf-global--BoxShadow--md);
8490
+ --pf-c-expandable-section--m-display-lg__toggle--PaddingTop: var(--pf-global--spacer--md);
8491
+ --pf-c-expandable-section--m-display-lg__toggle--PaddingRight: var(--pf-global--spacer--md);
8492
+ --pf-c-expandable-section--m-display-lg__toggle--PaddingBottom: var(--pf-global--spacer--md);
8493
+ --pf-c-expandable-section--m-display-lg__toggle--PaddingLeft: var(--pf-global--spacer--md);
8494
+ --pf-c-expandable-section--m-display-lg__content--MarginTop: 0;
8495
+ --pf-c-expandable-section--m-display-lg__content--PaddingRight: var(--pf-global--spacer--lg);
8496
+ --pf-c-expandable-section--m-display-lg__content--PaddingBottom: var(--pf-global--spacer--lg);
8497
+ --pf-c-expandable-section--m-display-lg__content--PaddingLeft: var(--pf-global--spacer--lg);
8498
+ --pf-c-expandable-section--m-display-lg--after--BackgroundColor: transparent;
8499
+ --pf-c-expandable-section--m-display-lg--after--Width: var(--pf-global--BorderWidth--lg);
8500
+ --pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor: var(--pf-global--primary-color--100);
8501
+ --pf-c-expandable-section--m-indented__content--PaddingLeft: calc(var(--pf-c-expandable-section__toggle-text--MarginLeft) + var(--pf-c-expandable-section__toggle-icon--MinWidth));
8502
+ --pf-c-expandable-section--m-truncate__content--LineClamp: 3;
8503
+ --pf-c-expandable-section--m-truncate__toggle--MarginTop: var(--pf-global--spacer--xs);
8504
+ }
8505
+
8506
+ .pf-c-expandable-section.pf-m-expanded {
8507
+ --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--m-expanded--Color);
8508
+ --pf-c-expandable-section__toggle-icon--Rotate: var(--pf-c-expandable-section--m-expanded__toggle-icon--Rotate);
8509
+ --pf-c-expandable-section__toggle-icon--m-expand-top--Rotate: var(--pf-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate);
8510
+ --pf-c-expandable-section--m-display-lg--after--BackgroundColor: var(--pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor);
8511
+ }
8512
+
8513
+ .pf-c-expandable-section.pf-m-detached, .pf-c-expandable-section.pf-m-truncate {
8514
+ --pf-c-expandable-section__content--MarginTop: 0;
8391
8515
  }
8392
8516
 
8393
- .pf-c-empty-state.pf-m-xs .pf-c-button {
8394
- --pf-c-button--FontSize: var(--pf-c-empty-state--m-xs--button--FontSize);
8517
+ .pf-c-expandable-section.pf-m-limit-width {
8518
+ --pf-c-expandable-section__content--MaxWidth: var(--pf-c-expandable-section--m-limit-width__content--MaxWidth);
8395
8519
  }
8396
8520
 
8397
- .pf-c-empty-state.pf-m-sm {
8398
- --pf-c-empty-state__content--MaxWidth: var(--pf-c-empty-state--m-sm__content--MaxWidth);
8521
+ .pf-c-expandable-section.pf-m-display-lg {
8522
+ --pf-c-expandable-section__toggle--PaddingTop: var(--pf-c-expandable-section--m-display-lg__toggle--PaddingTop);
8523
+ --pf-c-expandable-section__toggle--PaddingRight: var(--pf-c-expandable-section--m-display-lg__toggle--PaddingRight);
8524
+ --pf-c-expandable-section__toggle--PaddingBottom: var(--pf-c-expandable-section--m-display-lg__toggle--PaddingBottom);
8525
+ --pf-c-expandable-section__toggle--PaddingLeft: var(--pf-c-expandable-section--m-display-lg__toggle--PaddingLeft);
8526
+ --pf-c-expandable-section__content--PaddingRight: var(--pf-c-expandable-section--m-display-lg__content--PaddingRight);
8527
+ --pf-c-expandable-section__content--PaddingBottom: var(--pf-c-expandable-section--m-display-lg__content--PaddingBottom);
8528
+ --pf-c-expandable-section__content--PaddingLeft: var(--pf-c-expandable-section--m-display-lg__content--PaddingLeft);
8529
+ --pf-c-expandable-section__content--MarginTop: var(--pf-c-expandable-section--m-display-lg__content--MarginTop);
8530
+ position: relative;
8531
+ box-shadow: var(--pf-c-expandable-section--m-display-lg--BoxShadow);
8399
8532
  }
8400
8533
 
8401
- .pf-c-empty-state.pf-m-lg {
8402
- --pf-c-empty-state__content--MaxWidth: var(--pf-c-empty-state--m-lg__content--MaxWidth);
8534
+ .pf-c-expandable-section.pf-m-display-lg::after {
8535
+ position: absolute;
8536
+ top: 0;
8537
+ bottom: 0;
8538
+ left: 0;
8539
+ width: var(--pf-c-expandable-section--m-display-lg--after--Width);
8540
+ content: "";
8541
+ background-color: var(--pf-c-expandable-section--m-display-lg--after--BackgroundColor);
8403
8542
  }
8404
8543
 
8405
- .pf-c-empty-state.pf-m-xl {
8406
- --pf-c-empty-state__body--MarginTop: var(--pf-c-empty-state--m-xl__body--MarginTop);
8407
- --pf-c-empty-state__icon--MarginBottom: var(--pf-c-empty-state--m-xl__icon--MarginBottom);
8408
- --pf-c-empty-state__icon--FontSize: var(--pf-c-empty-state--m-xl__icon--FontSize);
8409
- --pf-c-empty-state--c-button__secondary--MarginTop: var(--pf-c-empty-state--m-xl--c-button__secondary--MarginTop);
8544
+ .pf-c-expandable-section.pf-m-indented {
8545
+ --pf-c-expandable-section__content--PaddingLeft: var(--pf-c-expandable-section--m-indented__content--PaddingLeft);
8410
8546
  }
8411
8547
 
8412
- .pf-c-empty-state.pf-m-xl .pf-c-empty-state__body {
8413
- font-size: var(--pf-c-empty-state--m-xl__body--FontSize);
8548
+ .pf-c-expandable-section.pf-m-truncate {
8549
+ --pf-c-expandable-section__toggle--MarginTop: var(--pf-c-expandable-section--m-truncate__toggle--MarginTop);
8550
+ --pf-c-expandable-section__toggle--PaddingTop: 0;
8551
+ --pf-c-expandable-section__toggle--PaddingRight: 0;
8552
+ --pf-c-expandable-section__toggle--PaddingBottom: 0;
8553
+ --pf-c-expandable-section__toggle-text--MarginLeft: 0;
8414
8554
  }
8415
8555
 
8416
- .pf-c-empty-state.pf-m-full-height {
8417
- height: 100%;
8556
+ .pf-c-expandable-section.pf-m-truncate:not(.pf-m-expanded) .pf-c-expandable-section__content {
8557
+ display: -webkit-box;
8558
+ -webkit-box-orient: vertical;
8559
+ -webkit-line-clamp: var(--pf-c-expandable-section--m-truncate__content--LineClamp);
8560
+ overflow: hidden;
8418
8561
  }
8419
8562
 
8420
- .pf-c-empty-state__content {
8421
- max-width: var(--pf-c-empty-state__content--MaxWidth);
8563
+ .pf-c-expandable-section__toggle {
8564
+ display: flex;
8565
+ padding: var(--pf-c-expandable-section__toggle--PaddingTop) var(--pf-c-expandable-section__toggle--PaddingRight) var(--pf-c-expandable-section__toggle--PaddingBottom) var(--pf-c-expandable-section__toggle--PaddingLeft);
8566
+ margin-top: var(--pf-c-expandable-section__toggle--MarginTop);
8567
+ color: var(--pf-c-expandable-section__toggle--Color);
8568
+ border: none;
8422
8569
  }
8423
8570
 
8424
- .pf-c-empty-state__content > .pf-c-title.pf-m-lg {
8425
- font-size: var(--pf-c-empty-state__content--c-title--m-lg--FontSize);
8571
+ .pf-c-expandable-section__toggle:hover {
8572
+ --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--hover--Color);
8426
8573
  }
8427
8574
 
8428
- .pf-c-empty-state__icon {
8429
- margin-bottom: var(--pf-c-empty-state__icon--MarginBottom);
8430
- font-size: var(--pf-c-empty-state__icon--FontSize);
8431
- color: var(--pf-c-empty-state__icon--Color);
8575
+ .pf-c-expandable-section__toggle:active, .pf-c-expandable-section__toggle.pf-m-active {
8576
+ --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--active--Color);
8432
8577
  }
8433
8578
 
8434
- .pf-c-empty-state__body {
8435
- margin-top: var(--pf-c-empty-state__body--MarginTop);
8436
- color: var(--pf-c-empty-state__body--Color);
8579
+ .pf-c-expandable-section__toggle:focus {
8580
+ --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--focus--Color);
8437
8581
  }
8438
8582
 
8439
- .pf-c-empty-state__content > .pf-c-button.pf-m-primary,
8440
- .pf-c-empty-state__primary {
8441
- margin-top: var(--pf-c-empty-state__primary--MarginTop);
8583
+ .pf-c-expandable-section__toggle-icon {
8584
+ min-width: var(--pf-c-expandable-section__toggle-icon--MinWidth);
8585
+ color: var(--pf-c-expandable-section__toggle-icon--Color);
8586
+ transition: var(--pf-c-expandable-section__toggle-icon--Transition);
8587
+ transform: rotate(var(--pf-c-expandable-section__toggle-icon--Rotate));
8442
8588
  }
8443
8589
 
8444
- .pf-c-empty-state__content > .pf-c-button.pf-m-primary + .pf-c-empty-state__secondary,
8445
- .pf-c-empty-state__primary + .pf-c-empty-state__secondary {
8446
- margin-top: var(--pf-c-empty-state__primary--secondary--MarginTop);
8590
+ .pf-c-expandable-section__toggle-icon.pf-m-expand-top {
8591
+ --pf-c-expandable-section__toggle-icon--Rotate: var(--pf-c-expandable-section__toggle-icon--m-expand-top--Rotate);
8447
8592
  }
8448
8593
 
8449
- .pf-c-empty-state__secondary {
8450
- display: flex;
8451
- flex-wrap: wrap;
8452
- justify-content: center;
8453
- margin-top: var(--pf-c-empty-state__secondary--MarginTop);
8454
- margin-bottom: var(--pf-c-empty-state__secondary--MarginBottom);
8594
+ .pf-c-expandable-section__toggle-text {
8595
+ margin-left: var(--pf-c-expandable-section__toggle-text--MarginLeft);
8455
8596
  }
8456
8597
 
8457
- .pf-c-empty-state__secondary > * {
8458
- margin-right: var(--pf-c-empty-state__secondary--child--MarginRight);
8459
- margin-bottom: var(--pf-c-empty-state__secondary--child--MarginBottom);
8460
- margin-left: var(--pf-c-empty-state__secondary--child--MarginLeft);
8598
+ .pf-c-expandable-section__content {
8599
+ max-width: var(--pf-c-expandable-section__content--MaxWidth);
8600
+ padding-right: var(--pf-c-expandable-section__content--PaddingRight);
8601
+ padding-bottom: var(--pf-c-expandable-section__content--PaddingBottom);
8602
+ padding-left: var(--pf-c-expandable-section__content--PaddingLeft);
8603
+ margin-top: var(--pf-c-expandable-section__content--MarginTop);
8461
8604
  }
8462
8605
 
8463
- .pf-m-overpass-font .pf-c-empty-state .pf-c-empty-state__content > .pf-c-title.pf-m-lg {
8464
- font-size: var(--pf-global--FontSize--lg);
8606
+ .pf-m-overpass-font .pf-c-expandable-section__toggle {
8607
+ font-weight: var(--pf-global--FontWeight--semi-bold);
8465
8608
  }
8466
8609
 
8467
8610
  .pf-c-file-upload {
@@ -9104,149 +9247,6 @@ label.pf-c-check, .pf-c-check__label,
9104
9247
  --pf-c-form__helper-text--m-success--Color: var(--pf-global--success-color--100);
9105
9248
  }
9106
9249
 
9107
- .pf-c-expandable-section {
9108
- --pf-c-expandable-section__toggle--PaddingTop: var(--pf-global--spacer--form-element);
9109
- --pf-c-expandable-section__toggle--PaddingRight: var(--pf-global--spacer--md);
9110
- --pf-c-expandable-section__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
9111
- --pf-c-expandable-section__toggle--PaddingLeft: 0;
9112
- --pf-c-expandable-section__toggle--MarginTop: 0;
9113
- --pf-c-expandable-section__toggle--Color: var(--pf-global--link--Color);
9114
- --pf-c-expandable-section__toggle--hover--Color: var(--pf-global--link--Color--hover);
9115
- --pf-c-expandable-section__toggle--active--Color: var(--pf-global--link--Color--hover);
9116
- --pf-c-expandable-section__toggle--focus--Color: var(--pf-global--link--Color--hover);
9117
- --pf-c-expandable-section__toggle--m-expanded--Color: var(--pf-global--link--Color--hover);
9118
- --pf-c-expandable-section__toggle-icon--MinWidth: 1em;
9119
- --pf-c-expandable-section__toggle-icon--Color: var(--pf-global--Color--100);
9120
- --pf-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
9121
- --pf-c-expandable-section__toggle-icon--Rotate: 0;
9122
- --pf-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
9123
- --pf-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
9124
- --pf-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
9125
- --pf-c-expandable-section__toggle-text--MarginLeft: calc(var(--pf-global--spacer--xs) + var(--pf-global--spacer--sm));
9126
- --pf-c-expandable-section__content--MarginTop: var(--pf-global--spacer--md);
9127
- --pf-c-expandable-section__content--MaxWidth: auto;
9128
- --pf-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
9129
- --pf-c-expandable-section--m-display-lg--BoxShadow: var(--pf-global--BoxShadow--md);
9130
- --pf-c-expandable-section--m-display-lg__toggle--PaddingTop: var(--pf-global--spacer--md);
9131
- --pf-c-expandable-section--m-display-lg__toggle--PaddingRight: var(--pf-global--spacer--md);
9132
- --pf-c-expandable-section--m-display-lg__toggle--PaddingBottom: var(--pf-global--spacer--md);
9133
- --pf-c-expandable-section--m-display-lg__toggle--PaddingLeft: var(--pf-global--spacer--md);
9134
- --pf-c-expandable-section--m-display-lg__content--MarginTop: 0;
9135
- --pf-c-expandable-section--m-display-lg__content--PaddingRight: var(--pf-global--spacer--lg);
9136
- --pf-c-expandable-section--m-display-lg__content--PaddingBottom: var(--pf-global--spacer--lg);
9137
- --pf-c-expandable-section--m-display-lg__content--PaddingLeft: var(--pf-global--spacer--lg);
9138
- --pf-c-expandable-section--m-display-lg--after--BackgroundColor: transparent;
9139
- --pf-c-expandable-section--m-display-lg--after--Width: var(--pf-global--BorderWidth--lg);
9140
- --pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor: var(--pf-global--primary-color--100);
9141
- --pf-c-expandable-section--m-indented__content--PaddingLeft: calc(var(--pf-c-expandable-section__toggle-text--MarginLeft) + var(--pf-c-expandable-section__toggle-icon--MinWidth));
9142
- --pf-c-expandable-section--m-truncate__content--LineClamp: 3;
9143
- --pf-c-expandable-section--m-truncate__toggle--MarginTop: var(--pf-global--spacer--xs);
9144
- }
9145
-
9146
- .pf-c-expandable-section.pf-m-expanded {
9147
- --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--m-expanded--Color);
9148
- --pf-c-expandable-section__toggle-icon--Rotate: var(--pf-c-expandable-section--m-expanded__toggle-icon--Rotate);
9149
- --pf-c-expandable-section__toggle-icon--m-expand-top--Rotate: var(--pf-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate);
9150
- --pf-c-expandable-section--m-display-lg--after--BackgroundColor: var(--pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor);
9151
- }
9152
-
9153
- .pf-c-expandable-section.pf-m-detached, .pf-c-expandable-section.pf-m-truncate {
9154
- --pf-c-expandable-section__content--MarginTop: 0;
9155
- }
9156
-
9157
- .pf-c-expandable-section.pf-m-limit-width {
9158
- --pf-c-expandable-section__content--MaxWidth: var(--pf-c-expandable-section--m-limit-width__content--MaxWidth);
9159
- }
9160
-
9161
- .pf-c-expandable-section.pf-m-display-lg {
9162
- --pf-c-expandable-section__toggle--PaddingTop: var(--pf-c-expandable-section--m-display-lg__toggle--PaddingTop);
9163
- --pf-c-expandable-section__toggle--PaddingRight: var(--pf-c-expandable-section--m-display-lg__toggle--PaddingRight);
9164
- --pf-c-expandable-section__toggle--PaddingBottom: var(--pf-c-expandable-section--m-display-lg__toggle--PaddingBottom);
9165
- --pf-c-expandable-section__toggle--PaddingLeft: var(--pf-c-expandable-section--m-display-lg__toggle--PaddingLeft);
9166
- --pf-c-expandable-section__content--PaddingRight: var(--pf-c-expandable-section--m-display-lg__content--PaddingRight);
9167
- --pf-c-expandable-section__content--PaddingBottom: var(--pf-c-expandable-section--m-display-lg__content--PaddingBottom);
9168
- --pf-c-expandable-section__content--PaddingLeft: var(--pf-c-expandable-section--m-display-lg__content--PaddingLeft);
9169
- --pf-c-expandable-section__content--MarginTop: var(--pf-c-expandable-section--m-display-lg__content--MarginTop);
9170
- position: relative;
9171
- box-shadow: var(--pf-c-expandable-section--m-display-lg--BoxShadow);
9172
- }
9173
-
9174
- .pf-c-expandable-section.pf-m-display-lg::after {
9175
- position: absolute;
9176
- top: 0;
9177
- bottom: 0;
9178
- left: 0;
9179
- width: var(--pf-c-expandable-section--m-display-lg--after--Width);
9180
- content: "";
9181
- background-color: var(--pf-c-expandable-section--m-display-lg--after--BackgroundColor);
9182
- }
9183
-
9184
- .pf-c-expandable-section.pf-m-indented {
9185
- --pf-c-expandable-section__content--PaddingLeft: var(--pf-c-expandable-section--m-indented__content--PaddingLeft);
9186
- }
9187
-
9188
- .pf-c-expandable-section.pf-m-truncate {
9189
- --pf-c-expandable-section__toggle--MarginTop: var(--pf-c-expandable-section--m-truncate__toggle--MarginTop);
9190
- --pf-c-expandable-section__toggle--PaddingTop: 0;
9191
- --pf-c-expandable-section__toggle--PaddingRight: 0;
9192
- --pf-c-expandable-section__toggle--PaddingBottom: 0;
9193
- --pf-c-expandable-section__toggle-text--MarginLeft: 0;
9194
- }
9195
-
9196
- .pf-c-expandable-section.pf-m-truncate:not(.pf-m-expanded) .pf-c-expandable-section__content {
9197
- display: -webkit-box;
9198
- -webkit-box-orient: vertical;
9199
- -webkit-line-clamp: var(--pf-c-expandable-section--m-truncate__content--LineClamp);
9200
- overflow: hidden;
9201
- }
9202
-
9203
- .pf-c-expandable-section__toggle {
9204
- display: flex;
9205
- padding: var(--pf-c-expandable-section__toggle--PaddingTop) var(--pf-c-expandable-section__toggle--PaddingRight) var(--pf-c-expandable-section__toggle--PaddingBottom) var(--pf-c-expandable-section__toggle--PaddingLeft);
9206
- margin-top: var(--pf-c-expandable-section__toggle--MarginTop);
9207
- color: var(--pf-c-expandable-section__toggle--Color);
9208
- border: none;
9209
- }
9210
-
9211
- .pf-c-expandable-section__toggle:hover {
9212
- --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--hover--Color);
9213
- }
9214
-
9215
- .pf-c-expandable-section__toggle:active, .pf-c-expandable-section__toggle.pf-m-active {
9216
- --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--active--Color);
9217
- }
9218
-
9219
- .pf-c-expandable-section__toggle:focus {
9220
- --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--focus--Color);
9221
- }
9222
-
9223
- .pf-c-expandable-section__toggle-icon {
9224
- min-width: var(--pf-c-expandable-section__toggle-icon--MinWidth);
9225
- color: var(--pf-c-expandable-section__toggle-icon--Color);
9226
- transition: var(--pf-c-expandable-section__toggle-icon--Transition);
9227
- transform: rotate(var(--pf-c-expandable-section__toggle-icon--Rotate));
9228
- }
9229
-
9230
- .pf-c-expandable-section__toggle-icon.pf-m-expand-top {
9231
- --pf-c-expandable-section__toggle-icon--Rotate: var(--pf-c-expandable-section__toggle-icon--m-expand-top--Rotate);
9232
- }
9233
-
9234
- .pf-c-expandable-section__toggle-text {
9235
- margin-left: var(--pf-c-expandable-section__toggle-text--MarginLeft);
9236
- }
9237
-
9238
- .pf-c-expandable-section__content {
9239
- max-width: var(--pf-c-expandable-section__content--MaxWidth);
9240
- padding-right: var(--pf-c-expandable-section__content--PaddingRight);
9241
- padding-bottom: var(--pf-c-expandable-section__content--PaddingBottom);
9242
- padding-left: var(--pf-c-expandable-section__content--PaddingLeft);
9243
- margin-top: var(--pf-c-expandable-section__content--MarginTop);
9244
- }
9245
-
9246
- .pf-m-overpass-font .pf-c-expandable-section__toggle {
9247
- font-weight: var(--pf-global--FontWeight--semi-bold);
9248
- }
9249
-
9250
9250
  .pf-c-helper-text {
9251
9251
  --pf-c-helper-text--Gap: var(--pf-global--spacer--xs);
9252
9252
  --pf-c-helper-text--FontSize: var(--pf-global--FontSize--sm);