@patternfly/react-core 4.227.7 → 4.227.8

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