@patternfly/react-core 4.253.1 → 4.254.1

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 (51) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/dist/esm/components/ClipboardCopy/ClipboardCopy.d.ts +1 -1
  3. package/dist/esm/components/ClipboardCopy/ClipboardCopy.d.ts.map +1 -1
  4. package/dist/esm/components/ClipboardCopy/ClipboardCopy.js +13 -32
  5. package/dist/esm/components/ClipboardCopy/ClipboardCopy.js.map +1 -1
  6. package/dist/esm/components/ClipboardCopy/ClipboardCopyButton.d.ts +2 -0
  7. package/dist/esm/components/ClipboardCopy/ClipboardCopyButton.d.ts.map +1 -1
  8. package/dist/esm/components/ClipboardCopy/ClipboardCopyButton.js +2 -2
  9. package/dist/esm/components/ClipboardCopy/ClipboardCopyButton.js.map +1 -1
  10. package/dist/esm/components/DualListSelector/DualListSelector.d.ts.map +1 -1
  11. package/dist/esm/components/DualListSelector/DualListSelector.js +10 -2
  12. package/dist/esm/components/DualListSelector/DualListSelector.js.map +1 -1
  13. package/dist/esm/components/Menu/MenuItem.d.ts +3 -1
  14. package/dist/esm/components/Menu/MenuItem.d.ts.map +1 -1
  15. package/dist/esm/components/Menu/MenuItem.js +2 -2
  16. package/dist/esm/components/Menu/MenuItem.js.map +1 -1
  17. package/dist/esm/components/Tooltip/Tooltip.d.ts +2 -0
  18. package/dist/esm/components/Tooltip/Tooltip.d.ts.map +1 -1
  19. package/dist/esm/components/Tooltip/Tooltip.js +19 -2
  20. package/dist/esm/components/Tooltip/Tooltip.js.map +1 -1
  21. package/dist/js/components/ClipboardCopy/ClipboardCopy.d.ts +1 -1
  22. package/dist/js/components/ClipboardCopy/ClipboardCopy.d.ts.map +1 -1
  23. package/dist/js/components/ClipboardCopy/ClipboardCopy.js +13 -32
  24. package/dist/js/components/ClipboardCopy/ClipboardCopy.js.map +1 -1
  25. package/dist/js/components/ClipboardCopy/ClipboardCopyButton.d.ts +2 -0
  26. package/dist/js/components/ClipboardCopy/ClipboardCopyButton.d.ts.map +1 -1
  27. package/dist/js/components/ClipboardCopy/ClipboardCopyButton.js +2 -2
  28. package/dist/js/components/ClipboardCopy/ClipboardCopyButton.js.map +1 -1
  29. package/dist/js/components/DualListSelector/DualListSelector.d.ts.map +1 -1
  30. package/dist/js/components/DualListSelector/DualListSelector.js +10 -2
  31. package/dist/js/components/DualListSelector/DualListSelector.js.map +1 -1
  32. package/dist/js/components/Menu/MenuItem.d.ts +3 -1
  33. package/dist/js/components/Menu/MenuItem.d.ts.map +1 -1
  34. package/dist/js/components/Menu/MenuItem.js +2 -2
  35. package/dist/js/components/Menu/MenuItem.js.map +1 -1
  36. package/dist/js/components/Tooltip/Tooltip.d.ts +2 -0
  37. package/dist/js/components/Tooltip/Tooltip.d.ts.map +1 -1
  38. package/dist/js/components/Tooltip/Tooltip.js +19 -2
  39. package/dist/js/components/Tooltip/Tooltip.js.map +1 -1
  40. package/dist/umd/react-core.min.css +1271 -1271
  41. package/dist/umd/react-core.min.js +2 -2
  42. package/package.json +2 -2
  43. package/src/components/ClipboardCopy/ClipboardCopy.tsx +16 -31
  44. package/src/components/ClipboardCopy/ClipboardCopyButton.tsx +4 -0
  45. package/src/components/CodeBlock/examples/CodeBlockBasic.tsx +3 -8
  46. package/src/components/CodeBlock/examples/CodeBlockExpandable.tsx +3 -8
  47. package/src/components/DualListSelector/DualListSelector.tsx +10 -2
  48. package/src/components/Menu/MenuItem.tsx +4 -0
  49. package/src/components/Menu/examples/Menu.md +5 -0
  50. package/src/components/Menu/examples/MenuDangerMenuItem.tsx +28 -0
  51. package/src/components/Tooltip/Tooltip.tsx +24 -1
package/dist/umd/react-core.min.css CHANGED
@@ -4000,6 +4000,86 @@ label.pf-c-check, .pf-c-check__label,
4000
4000
  border-top: 1px solid var(--pf-global--BorderColor--300);
4001
4001
  }
4002
4002
 
4003
+ .pf-c-data-list {
4004
+ --pf-global--Color--100: var(--pf-global--Color--dark-100);
4005
+ --pf-global--Color--200: var(--pf-global--Color--dark-200);
4006
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
4007
+ --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
4008
+ --pf-global--link--Color: var(--pf-global--link--Color--dark);
4009
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
4010
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
4011
+ }
4012
+
4013
+ .pf-c-data-list__item-action {
4014
+ --pf-hidden-visible--visible--Visibility: visible;
4015
+ --pf-hidden-visible--hidden--Display: none;
4016
+ --pf-hidden-visible--hidden--Visibility: hidden;
4017
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4018
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4019
+ display: var(--pf-hidden-visible--Display);
4020
+ visibility: var(--pf-hidden-visible--Visibility);
4021
+ }
4022
+
4023
+ .pf-m-hidden.pf-c-data-list__item-action {
4024
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4025
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4026
+ }
4027
+
4028
+ @media screen and (min-width: 576px) {
4029
+ .pf-m-hidden-on-sm.pf-c-data-list__item-action {
4030
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4031
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4032
+ }
4033
+
4034
+ .pf-m-visible-on-sm.pf-c-data-list__item-action {
4035
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4036
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4037
+ }
4038
+ }
4039
+ @media screen and (min-width: 768px) {
4040
+ .pf-m-hidden-on-md.pf-c-data-list__item-action {
4041
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4042
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4043
+ }
4044
+
4045
+ .pf-m-visible-on-md.pf-c-data-list__item-action {
4046
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4047
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4048
+ }
4049
+ }
4050
+ @media screen and (min-width: 992px) {
4051
+ .pf-m-hidden-on-lg.pf-c-data-list__item-action {
4052
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4053
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4054
+ }
4055
+
4056
+ .pf-m-visible-on-lg.pf-c-data-list__item-action {
4057
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4058
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4059
+ }
4060
+ }
4061
+ @media screen and (min-width: 1200px) {
4062
+ .pf-m-hidden-on-xl.pf-c-data-list__item-action {
4063
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4064
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4065
+ }
4066
+
4067
+ .pf-m-visible-on-xl.pf-c-data-list__item-action {
4068
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4069
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4070
+ }
4071
+ }
4072
+ @media screen and (min-width: 1450px) {
4073
+ .pf-m-hidden-on-2xl.pf-c-data-list__item-action {
4074
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4075
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4076
+ }
4077
+
4078
+ .pf-m-visible-on-2xl.pf-c-data-list__item-action {
4079
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4080
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4081
+ }
4082
+ }
4003
4083
  @media screen and (min-width: 768px) {
4004
4084
  .pf-c-data-list:not([class*=pf-m-grid]) {
4005
4085
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
@@ -4477,359 +4557,449 @@ label.pf-c-check, .pf-c-check__label,
4477
4557
  }
4478
4558
  }
4479
4559
  .pf-c-data-list {
4480
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
4481
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
4482
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
4483
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
4484
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
4485
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
4486
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
4487
- }
4488
-
4489
- .pf-c-data-list__item-action {
4490
- --pf-hidden-visible--visible--Visibility: visible;
4491
- --pf-hidden-visible--hidden--Display: none;
4492
- --pf-hidden-visible--hidden--Visibility: hidden;
4493
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4494
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4495
- display: var(--pf-hidden-visible--Display);
4496
- visibility: var(--pf-hidden-visible--Visibility);
4497
- }
4498
-
4499
- .pf-m-hidden.pf-c-data-list__item-action {
4500
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4501
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4560
+ --pf-c-data-list--FontSize: 1em;
4561
+ --pf-c-data-list--LineHeight: var(--pf-global--LineHeight--md);
4562
+ --pf-c-data-list--BorderTopColor: var(--pf-global--BorderColor--300);
4563
+ --pf-c-data-list--BorderTopWidth: var(--pf-global--spacer--sm);
4564
+ --pf-c-data-list--sm--BorderTopWidth: var(--pf-global--BorderWidth--sm);
4565
+ --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);
4566
+ --pf-c-data-list__item--BackgroundColor: var(--pf-global--BackgroundColor--100);
4567
+ --pf-c-data-list__item--m-selected--ZIndex: var(--pf-global--ZIndex--xs);
4568
+ --pf-c-data-list__item--m-expanded--before--BackgroundColor: var(--pf-global--active-color--100);
4569
+ --pf-c-data-list__item--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
4570
+ --pf-c-data-list__item--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4571
+ --pf-c-data-list__item--m-selectable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
4572
+ --pf-c-data-list__item--m-selectable--hover--ZIndex: calc(var(--pf-c-data-list__item--m-selected--ZIndex) + 1);
4573
+ --pf-c-data-list__item--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4574
+ --pf-c-data-list__item--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4575
+ --pf-c-data-list__item--m-selectable--active--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4576
+ --pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor: var(--pf-global--active-color--300);
4577
+ --pf-c-data-list__item--BorderBottomColor: var(--pf-global--BorderColor--300);
4578
+ --pf-c-data-list__item--BorderBottomWidth: 0.5rem;
4579
+ --pf-c-data-list__item--m-selectable--hover--item--BorderTopColor: var(--pf-c-data-list__item--BorderBottomColor);
4580
+ --pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth: var(--pf-c-data-list__item--BorderBottomWidth);
4581
+ --pf-c-data-list__item--sm--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
4582
+ --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
4583
+ --pf-c-data-list__item--before--BackgroundColor: transparent;
4584
+ --pf-c-data-list__item--before--Width: var(--pf-global--BorderWidth--lg);
4585
+ --pf-c-data-list__item--before--Transition: var(--pf-global--Transition);
4586
+ --pf-c-data-list__item--before--Top: 0;
4587
+ --pf-c-data-list__item--before--sm--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
4588
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-global--spacer--md);
4589
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-global--spacer--md);
4590
+ --pf-c-data-list__item-row--xl--PaddingRight: var(--pf-global--spacer--lg);
4591
+ --pf-c-data-list__item-row--xl--PaddingLeft: var(--pf-global--spacer--lg);
4592
+ --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-global--spacer--lg);
4593
+ --pf-c-data-list__cell--PaddingTop: var(--pf-global--spacer--lg);
4594
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-global--spacer--lg);
4595
+ --pf-c-data-list__cell--MarginRight: var(--pf-global--spacer--xl);
4596
+ --pf-c-data-list__cell--md--PaddingBottom: 0;
4597
+ --pf-c-data-list__cell--m-icon--MarginRight: var(--pf-global--spacer--md);
4598
+ --pf-c-data-list__cell--cell--PaddingTop: 0;
4599
+ --pf-c-data-list__cell--cell--md--PaddingTop: var(--pf-global--spacer--lg);
4600
+ --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--lg);
4601
+ --pf-c-data-list--cell--MinWidth: initial;
4602
+ --pf-c-data-list--cell--Overflow: visible;
4603
+ --pf-c-data-list--cell--TextOverflow: clip;
4604
+ --pf-c-data-list--cell--WhiteSpace: normal;
4605
+ --pf-c-data-list--cell--WordBreak: normal;
4606
+ --pf-c-data-list--cell--m-truncate--MinWidth: 5ch;
4607
+ --pf-c-data-list__toggle--MarginLeft: calc(var(--pf-global--spacer--sm) * -1);
4608
+ --pf-c-data-list__toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
4609
+ --pf-c-data-list__toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
4610
+ --pf-c-data-list__toggle-icon--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
4611
+ --pf-c-data-list__toggle-icon--Transition: .2s ease-in 0s;
4612
+ --pf-c-data-list__toggle-icon--Rotate: 0;
4613
+ --pf-c-data-list__item--m-expanded__toggle-icon--Rotate: 90deg;
4614
+ --pf-c-data-list__item-draggable-button--PaddingLeft: var(--pf-global--spacer--md);
4615
+ --pf-c-data-list__item-draggable-button--PaddingRight: var(--pf-global--spacer--md);
4616
+ --pf-c-data-list__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--lg) * -1);
4617
+ --pf-c-data-list__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--lg) * -1);
4618
+ --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-global--spacer--lg);
4619
+ --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-global--spacer--lg);
4620
+ --pf-c-data-list__item-draggable-button--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
4621
+ --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-global--icon--Color--light);
4622
+ --pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color: var(--pf-global--disabled-color--200);
4623
+ --pf-c-data-list__item-draggable-button--hover__draggable-icon--Color: var(--pf-global--icon--Color--dark);
4624
+ --pf-c-data-list__item-draggable-button--focus__draggable-icon--Color: var(--pf-global--icon--Color--dark);
4625
+ --pf-c-data-list__item--m-ghost-row--after--BackgroundColor: var(--pf-global--BackgroundColor--100);
4626
+ --pf-c-data-list__item--m-ghost-row--after--Opacity: .6;
4627
+ --pf-c-data-list__item-control--PaddingTop: var(--pf-global--spacer--lg);
4628
+ --pf-c-data-list__item-control--PaddingBottom: var(--pf-global--spacer--lg);
4629
+ --pf-c-data-list__item-control--MarginRight: var(--pf-global--spacer--md);
4630
+ --pf-c-data-list__item-control--md--MarginRight: var(--pf-global--spacer--xl);
4631
+ --pf-c-data-list__item-control--not-last-child--MarginRight: var(--pf-global--spacer--md);
4632
+ --pf-c-data-list__check--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
4633
+ --pf-c-data-list__check--MarginTop: -0.0625rem;
4634
+ --pf-c-data-list__item-action--Display: flex;
4635
+ --pf-c-data-list__item-action--PaddingTop: var(--pf-global--spacer--lg);
4636
+ --pf-c-data-list__item-action--PaddingBottom: var(--pf-global--spacer--lg);
4637
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-global--spacer--md);
4638
+ --pf-c-data-list__item-action--md--MarginLeft: var(--pf-global--spacer--xl);
4639
+ --pf-c-data-list__item-action--not-last-child--MarginRight: var(--pf-global--spacer--md);
4640
+ --pf-c-data-list__item-action__action--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
4641
+ --pf-c-data-list__action--MarginTop: var(--pf-c-data-list__item-action__action--MarginTop);
4642
+ --pf-c-data-list__item-action__action--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
4643
+ --pf-c-data-list__expandable-content--BorderTopWidth: var(--pf-global--BorderWidth--sm);
4644
+ --pf-c-data-list__expandable-content--BorderTopColor: var(--pf-global--BorderColor--100);
4645
+ --pf-c-data-list__expandable-content--MarginRight: calc(var(--pf-c-data-list__expandable-content-body--PaddingRight) * -1);
4646
+ --pf-c-data-list__expandable-content--MarginLeft: calc(var(--pf-c-data-list__expandable-content-body--PaddingLeft) * -1);
4647
+ --pf-c-data-list__expandable-content--MaxHeight: 37.5rem;
4648
+ --pf-c-data-list__expandable-content--before--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
4649
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-global--spacer--md);
4650
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-global--spacer--md);
4651
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-global--spacer--md);
4652
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-global--spacer--md);
4653
+ --pf-c-data-list__expandable-content-body--md--PaddingTop: var(--pf-global--spacer--lg);
4654
+ --pf-c-data-list__expandable-content-body--xl--PaddingRight: var(--pf-global--spacer--lg);
4655
+ --pf-c-data-list__expandable-content-body--md--PaddingBottom: var(--pf-global--spacer--lg);
4656
+ --pf-c-data-list__expandable-content-body--xl--PaddingLeft: var(--pf-global--spacer--lg);
4657
+ --pf-c-data-list--m-compact--FontSize: var(--pf-global--FontSize--sm);
4658
+ --pf-c-data-list--m-compact--LineHeight: var(--pf-global--LineHeight--sm);
4659
+ --pf-c-data-list--m-compact__check--FontSize: var(--pf-global--FontSize--md);
4660
+ --pf-c-data-list--m-compact__cell--PaddingTop: var(--pf-global--spacer--sm);
4661
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-global--spacer--sm);
4662
+ --pf-c-data-list--m-compact__cell--md--PaddingBottom: 0;
4663
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: 0;
4664
+ --pf-c-data-list--m-compact__cell-cell--md--PaddingTop: var(--pf-global--spacer--sm);
4665
+ --pf-c-data-list--m-compact__cell--cell--MarginRight: var(--pf-global--spacer--md);
4666
+ --pf-c-data-list--m-compact__item-control--PaddingTop: var(--pf-global--spacer--sm);
4667
+ --pf-c-data-list--m-compact__item-control--PaddingBottom: var(--pf-global--spacer--sm);
4668
+ --pf-c-data-list--m-compact__item-control--MarginRight: var(--pf-global--spacer--md);
4669
+ --pf-c-data-list--m-compact__item-action--PaddingTop: var(--pf-global--spacer--sm);
4670
+ --pf-c-data-list--m-compact__item-action--PaddingBottom: var(--pf-global--spacer--sm);
4671
+ --pf-c-data-list--m-compact__item-action--MarginLeft: var(--pf-global--spacer--md);
4672
+ --pf-c-data-list--m-compact__item-action__action--MarginTop: calc(var(--pf-c-data-list--m-compact__item-action--PaddingTop) * -1);
4673
+ --pf-c-data-list--m-compact__item-action__action--MarginBottom: calc(var(--pf-c-data-list--m-compact__item-action--PaddingBottom) * -1);
4674
+ --pf-c-data-list--m-compact__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
4675
+ --pf-c-data-list--m-compact__item-content--PaddingBottom: var(--pf-global--spacer--sm);
4676
+ --pf-c-data-list--m-compact__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
4677
+ --pf-c-data-list--m-compact__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--sm) * -1);
4678
+ --pf-c-data-list--m-compact__item-draggable-button--PaddingTop: var(--pf-global--spacer--sm);
4679
+ --pf-c-data-list--m-compact__item-draggable-button--PaddingBottom: var(--pf-global--spacer--sm);
4680
+ --pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--sm);
4681
+ color: var(--pf-global--Color--100);
4682
+ font-size: var(--pf-c-data-list--FontSize);
4683
+ line-height: var(--pf-c-data-list--LineHeight);
4684
+ overflow-wrap: break-word;
4685
+ list-style-type: disc;
4686
+ border-top: var(--pf-c-data-list--BorderTopWidth) solid var(--pf-c-data-list--BorderTopColor);
4502
4687
  }
4503
4688
 
4504
4689
  @media screen and (min-width: 576px) {
4505
- .pf-m-hidden-on-sm.pf-c-data-list__item-action {
4506
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4507
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4508
- }
4509
-
4510
- .pf-m-visible-on-sm.pf-c-data-list__item-action {
4511
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4512
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4690
+ .pf-c-data-list {
4691
+ --pf-c-data-list--BorderTopColor: var(--pf-c-data-list--sm--BorderTopColor);
4692
+ --pf-c-data-list--BorderTopWidth: var(--pf-c-data-list--sm--BorderTopWidth);
4513
4693
  }
4514
4694
  }
4515
- @media screen and (min-width: 768px) {
4516
- .pf-m-hidden-on-md.pf-c-data-list__item-action {
4517
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4518
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4695
+ @media screen and (min-width: 576px) {
4696
+ .pf-c-data-list {
4697
+ --pf-c-data-list__item--BorderBottomWidth: var(--pf-c-data-list__item--sm--BorderBottomWidth);
4698
+ --pf-c-data-list__item--BorderBottomColor: var(--pf-c-data-list__item--sm--BorderBottomColor);
4519
4699
  }
4520
-
4521
- .pf-m-visible-on-md.pf-c-data-list__item-action {
4522
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4523
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4700
+ }
4701
+ @media (min-width: 576px) {
4702
+ .pf-c-data-list {
4703
+ --pf-c-data-list__item--before--Top: var(--pf-c-data-list__item--before--sm--Top);
4524
4704
  }
4525
4705
  }
4526
- @media screen and (min-width: 992px) {
4527
- .pf-m-hidden-on-lg.pf-c-data-list__item-action {
4528
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4529
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4530
- }
4706
+ .pf-c-data-list.pf-m-compact {
4707
+ --pf-c-data-list__check--FontSize: var(--pf-c-data-list--m-compact__check--FontSize);
4708
+ --pf-c-data-list__action--MarginTop: var(--pf-c-data-list--m-compact__action--MarginTop);
4709
+ --pf-c-data-list--FontSize: var(--pf-c-data-list--m-compact--FontSize);
4710
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list--m-compact__item-action--MarginLeft);
4711
+ --pf-c-data-list__item-action--PaddingTop: var(--pf-c-data-list--m-compact__item-action--PaddingTop);
4712
+ --pf-c-data-list__item-action--PaddingBottom: var(--pf-c-data-list--m-compact__item-action--PaddingBottom);
4713
+ --pf-c-data-list__item-action__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
4714
+ --pf-c-data-list__item-action__action--MarginBottom: var(--pf-c-data-list--m-compact__item-action__action--MarginBottom);
4715
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list--m-compact__item-control--MarginRight);
4716
+ --pf-c-data-list__item-control--PaddingTop: var(--pf-c-data-list--m-compact__item-control--PaddingTop);
4717
+ --pf-c-data-list__item-control--PaddingBottom: var(--pf-c-data-list--m-compact__item-control--PaddingBottom);
4718
+ --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-c-data-list--m-compact__item-content--PaddingBottom);
4719
+ --pf-c-data-list__item-draggable-button--MarginTop: var(--pf-c-data-list--m-compact__item-draggable-button--MarginTop);
4720
+ --pf-c-data-list__item-draggable-button--MarginBottom: var(--pf-c-data-list--m-compact__item-draggable-button--MarginBottom);
4721
+ --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingTop);
4722
+ --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingBottom);
4723
+ --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop);
4724
+ font-size: var(--pf-c-data-list--m-compact--FontSize);
4725
+ }
4531
4726
 
4532
- .pf-m-visible-on-lg.pf-c-data-list__item-action {
4533
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4534
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4535
- }
4727
+ .pf-c-data-list.pf-m-compact .pf-c-data-list__cell {
4728
+ --pf-c-data-list__cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--PaddingTop);
4729
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--PaddingBottom);
4730
+ --pf-c-data-list__cell--MarginRight: var(--pf-c-data-list--m-compact__cell--cell--MarginRight);
4731
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--PaddingTop);
4536
4732
  }
4537
- @media screen and (min-width: 1200px) {
4538
- .pf-m-hidden-on-xl.pf-c-data-list__item-action {
4539
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4540
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4541
- }
4542
4733
 
4543
- .pf-m-visible-on-xl.pf-c-data-list__item-action {
4544
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4545
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4546
- }
4734
+ .pf-c-data-list.pf-m-compact .pf-c-data-list__check {
4735
+ font-size: var(--pf-c-data-list--m-compact__check--FontSize);
4547
4736
  }
4548
- @media screen and (min-width: 1450px) {
4549
- .pf-m-hidden-on-2xl.pf-c-data-list__item-action {
4550
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4551
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4552
- }
4553
4737
 
4554
- .pf-m-visible-on-2xl.pf-c-data-list__item-action {
4555
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4556
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4557
- }
4738
+ .pf-c-data-list.pf-m-drag-over {
4739
+ overflow-anchor: none;
4558
4740
  }
4559
- @media screen and (min-width: 768px) {
4560
- .pf-c-data-list:not([class*=pf-m-grid]) {
4561
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
4562
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
4563
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
4564
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
4565
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
4566
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
4567
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
4568
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
4569
- }
4741
+
4742
+ .pf-c-data-list.pf-m-truncate,
4743
+ .pf-c-data-list__item-row.pf-m-truncate,
4744
+ .pf-c-data-list__cell.pf-m-truncate,
4745
+ .pf-c-data-list__text.pf-m-truncate {
4746
+ --pf-c-data-list--cell--MinWidth: var(--pf-c-data-list--cell--m-truncate--MinWidth);
4747
+ --pf-c-data-list--cell--Overflow: hidden;
4748
+ --pf-c-data-list--cell--TextOverflow: ellipsis;
4749
+ --pf-c-data-list--cell--WhiteSpace: nowrap;
4570
4750
  }
4571
- @media screen and (min-width: 768px) and (min-width: 1200px) {
4572
- .pf-c-data-list:not([class*=pf-m-grid]) {
4573
- --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
4574
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
4575
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
4576
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
4577
- }
4751
+
4752
+ .pf-c-data-list.pf-m-break-word,
4753
+ .pf-c-data-list__item-row.pf-m-break-word,
4754
+ .pf-c-data-list__cell.pf-m-break-word,
4755
+ .pf-c-data-list__text.pf-m-break-word {
4756
+ --pf-c-data-list--cell--WordBreak: break-word;
4578
4757
  }
4579
- @media screen and (min-width: 768px) {
4580
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__item-content {
4581
- display: flex;
4582
- flex-wrap: wrap;
4583
- flex-grow: 1;
4584
- padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
4585
- }
4758
+
4759
+ .pf-c-data-list.pf-m-nowrap,
4760
+ .pf-c-data-list__item-row.pf-m-nowrap,
4761
+ .pf-c-data-list__cell.pf-m-nowrap,
4762
+ .pf-c-data-list__text.pf-m-nowrap {
4763
+ --pf-c-data-list--cell--WhiteSpace: nowrap;
4586
4764
  }
4587
- @media screen and (min-width: 768px) {
4588
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4589
- margin-right: var(--pf-c-data-list__cell--MarginRight);
4590
- }
4591
4765
 
4592
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell + .pf-c-data-list__cell {
4593
- flex: 1;
4594
- order: initial;
4595
- }
4766
+ .pf-c-data-list__item {
4767
+ position: relative;
4768
+ display: flex;
4769
+ flex-direction: column;
4770
+ background-color: var(--pf-c-data-list__item--BackgroundColor);
4771
+ border-bottom: var(--pf-c-data-list__item--BorderBottomWidth) solid var(--pf-c-data-list__item--BorderBottomColor);
4772
+ }
4596
4773
 
4597
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-align-right {
4598
- margin-left: auto;
4599
- }
4774
+ .pf-c-data-list__item::before {
4775
+ position: absolute;
4776
+ top: var(--pf-c-data-list__item--before--Top);
4777
+ bottom: 0;
4778
+ left: 0;
4779
+ width: var(--pf-c-data-list__item--before--Width);
4780
+ content: "";
4781
+ background-color: var(--pf-c-data-list__item--before--BackgroundColor);
4782
+ transition: var(--pf-c-data-list__item--before--Transition);
4783
+ }
4600
4784
 
4601
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-no-fill {
4602
- flex: none;
4603
- }
4785
+ .pf-c-data-list__item.pf-m-selectable {
4786
+ cursor: pointer;
4787
+ outline-offset: var(--pf-c-data-list__item--m-selectable--OutlineOffset);
4788
+ }
4604
4789
 
4605
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-2 {
4606
- flex-grow: 2;
4607
- }
4790
+ .pf-c-data-list__item.pf-m-selectable:hover, .pf-c-data-list__item.pf-m-selectable:focus {
4791
+ position: relative;
4792
+ z-index: var(--pf-c-data-list__item--m-selectable--hover--ZIndex);
4793
+ }
4608
4794
 
4609
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-3 {
4610
- flex-grow: 3;
4611
- }
4795
+ .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) {
4796
+ --pf-c-data-list__item--BorderBottomWidth: 0;
4797
+ }
4612
4798
 
4613
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-4 {
4614
- flex-grow: 4;
4615
- }
4799
+ .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 {
4800
+ 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);
4801
+ }
4616
4802
 
4617
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-5 {
4618
- flex-grow: 5;
4619
- }
4803
+ .pf-c-data-list__item.pf-m-selectable:hover {
4804
+ box-shadow: var(--pf-c-data-list__item--m-selectable--hover--BoxShadow);
4620
4805
  }
4621
- @media screen and (min-width: 768px) {
4622
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__expandable-content {
4623
- max-height: initial;
4624
- overflow-y: visible;
4625
- }
4806
+
4807
+ .pf-c-data-list__item.pf-m-selectable:focus {
4808
+ box-shadow: var(--pf-c-data-list__item--m-selectable--focus--BoxShadow);
4626
4809
  }
4627
- @media screen and (min-width: 0) {
4628
- .pf-c-data-list.pf-m-grid-none {
4629
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
4630
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
4631
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
4632
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
4633
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
4634
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
4635
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
4636
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
4637
- }
4810
+
4811
+ .pf-c-data-list__item.pf-m-selectable:active {
4812
+ box-shadow: var(--pf-c-data-list__item--m-selectable--active--BoxShadow);
4638
4813
  }
4639
- @media screen and (min-width: 0) and (min-width: 1200px) {
4640
- .pf-c-data-list.pf-m-grid-none {
4641
- --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
4642
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
4643
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
4644
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
4645
- }
4814
+
4815
+ .pf-c-data-list__item.pf-m-selected {
4816
+ --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-selected--before--BackgroundColor);
4817
+ position: relative;
4818
+ z-index: var(--pf-c-data-list__item--m-selected--ZIndex);
4819
+ box-shadow: var(--pf-c-data-list__item--m-selected--BoxShadow);
4646
4820
  }
4647
- @media screen and (min-width: 0) {
4648
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__item-content {
4649
- display: flex;
4650
- flex-wrap: wrap;
4651
- flex-grow: 1;
4652
- padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
4653
- }
4821
+
4822
+ .pf-c-data-list__item.pf-m-ghost-row::after {
4823
+ position: absolute;
4824
+ top: 0;
4825
+ right: 0;
4826
+ bottom: 0;
4827
+ left: 0;
4828
+ content: "";
4829
+ background-color: var(--pf-c-data-list__item--m-ghost-row--after--BackgroundColor);
4830
+ opacity: var(--pf-c-data-list__item--m-ghost-row--after--Opacity);
4654
4831
  }
4655
- @media screen and (min-width: 0) {
4656
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4657
- margin-right: var(--pf-c-data-list__cell--MarginRight);
4658
- }
4659
4832
 
4660
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell + .pf-c-data-list__cell {
4661
- flex: 1;
4662
- order: initial;
4663
- }
4833
+ .pf-c-data-list__item.pf-m-expanded {
4834
+ --pf-c-data-list__toggle-icon--Rotate: var(--pf-c-data-list__item--m-expanded__toggle-icon--Rotate);
4835
+ --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--before--BackgroundColor);
4836
+ }
4664
4837
 
4665
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-align-right {
4666
- margin-left: auto;
4667
- }
4838
+ .pf-c-data-list__item.pf-m-expanded.pf-m-selectable:not(.pf-m-selected) {
4839
+ --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor);
4840
+ }
4668
4841
 
4669
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-no-fill {
4670
- flex: none;
4671
- }
4842
+ .pf-c-data-list__item-row {
4843
+ display: flex;
4844
+ flex-wrap: nowrap;
4845
+ padding-right: var(--pf-c-data-list__item-row--PaddingRight);
4846
+ padding-left: var(--pf-c-data-list__item-row--PaddingLeft);
4847
+ }
4672
4848
 
4673
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-2 {
4674
- flex-grow: 2;
4675
- }
4849
+ .pf-c-data-list__item-control {
4850
+ display: flex;
4851
+ flex-wrap: nowrap;
4852
+ padding-top: var(--pf-c-data-list__item-control--PaddingTop);
4853
+ padding-bottom: var(--pf-c-data-list__item-control--PaddingBottom);
4854
+ margin-right: var(--pf-c-data-list__item-control--MarginRight);
4855
+ }
4676
4856
 
4677
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-3 {
4678
- flex-grow: 3;
4679
- }
4857
+ .pf-c-data-list__item-control > *:not(:last-child) {
4858
+ margin-right: var(--pf-c-data-list__item-control--not-last-child--MarginRight);
4859
+ }
4680
4860
 
4681
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-4 {
4682
- flex-grow: 4;
4683
- }
4861
+ .pf-c-data-list__check {
4862
+ display: flex;
4863
+ align-items: center;
4864
+ align-self: flex-start;
4865
+ height: var(--pf-c-data-list__check--Height);
4866
+ margin-top: var(--pf-c-data-list__check--MarginTop);
4867
+ }
4684
4868
 
4685
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-5 {
4686
- flex-grow: 5;
4687
- }
4869
+ .pf-c-data-list__check > input {
4870
+ cursor: pointer;
4688
4871
  }
4689
- @media screen and (min-width: 0) {
4690
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__expandable-content {
4691
- max-height: initial;
4692
- overflow-y: visible;
4693
- }
4872
+
4873
+ .pf-c-data-list__item-draggable-button {
4874
+ display: flex;
4875
+ flex-direction: column;
4876
+ 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);
4877
+ 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);
4878
+ border: 0;
4694
4879
  }
4695
- @media screen and (min-width: 576px) {
4696
- .pf-c-data-list.pf-m-grid-sm {
4697
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
4698
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
4699
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
4700
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
4701
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
4702
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
4703
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
4704
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
4705
- }
4880
+
4881
+ .pf-c-data-list__item-draggable-button:hover {
4882
+ --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--hover__draggable-icon--Color);
4883
+ cursor: grab;
4706
4884
  }
4707
- @media screen and (min-width: 576px) and (min-width: 1200px) {
4708
- .pf-c-data-list.pf-m-grid-sm {
4709
- --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
4710
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
4711
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
4712
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
4713
- }
4885
+
4886
+ .pf-c-data-list__item-draggable-button:focus {
4887
+ --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--focus__draggable-icon--Color);
4714
4888
  }
4715
- @media screen and (min-width: 576px) {
4716
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__item-content {
4717
- display: flex;
4718
- flex-wrap: wrap;
4719
- flex-grow: 1;
4720
- padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
4721
- }
4889
+
4890
+ .pf-c-data-list__item-draggable-button:active {
4891
+ cursor: grabbing;
4722
4892
  }
4723
- @media screen and (min-width: 576px) {
4724
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4725
- margin-right: var(--pf-c-data-list__cell--MarginRight);
4726
- }
4727
4893
 
4728
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell + .pf-c-data-list__cell {
4729
- flex: 1;
4730
- order: initial;
4731
- }
4894
+ .pf-c-data-list__item-draggable-button.pf-m-disabled {
4895
+ --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color);
4896
+ pointer-events: none;
4897
+ }
4732
4898
 
4733
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-align-right {
4734
- margin-left: auto;
4735
- }
4899
+ .pf-c-data-list__item-draggable-button .pf-c-data-list__item-draggable-icon {
4900
+ color: var(--pf-c-data-list__item-draggable-button-icon--Color);
4901
+ }
4736
4902
 
4737
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-no-fill {
4738
- flex: none;
4739
- }
4903
+ .pf-c-data-list__item-action {
4904
+ --pf-hidden-visible--visible--Display: var(--pf-c-data-list__item-action--Display);
4905
+ align-items: flex-start;
4906
+ align-content: flex-start;
4907
+ padding-top: var(--pf-c-data-list__item-action--PaddingTop);
4908
+ padding-bottom: var(--pf-c-data-list__item-action--PaddingBottom);
4909
+ margin-left: var(--pf-c-data-list__item-action--MarginLeft);
4910
+ }
4740
4911
 
4741
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-2 {
4742
- flex-grow: 2;
4743
- }
4912
+ .pf-c-data-list__item-action > *:not(:last-child) {
4913
+ margin-right: var(--pf-c-data-list__item-action--not-last-child--MarginRight);
4914
+ }
4744
4915
 
4745
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-3 {
4746
- flex-grow: 3;
4747
- }
4916
+ .pf-c-data-list__item-action .pf-c-data-list__action {
4917
+ margin-top: var(--pf-c-data-list__action--MarginTop);
4918
+ margin-bottom: var(--pf-c-data-list__item-action__action--MarginBottom);
4919
+ }
4748
4920
 
4749
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-4 {
4750
- flex-grow: 4;
4751
- }
4921
+ .pf-c-data-list__toggle {
4922
+ margin: var(--pf-c-data-list__toggle--MarginTop) 0 var(--pf-c-data-list__toggle--MarginBottom) var(--pf-c-data-list__toggle--MarginLeft);
4923
+ }
4752
4924
 
4753
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-5 {
4754
- flex-grow: 5;
4755
- }
4925
+ .pf-c-data-list__toggle-icon {
4926
+ height: var(--pf-c-data-list__toggle-icon--Height);
4927
+ pointer-events: none;
4928
+ transition: var(--pf-c-data-list__toggle-icon--Transition);
4929
+ transform: rotate(var(--pf-c-data-list__toggle-icon--Rotate));
4756
4930
  }
4757
- @media screen and (min-width: 576px) {
4758
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__expandable-content {
4759
- max-height: initial;
4760
- overflow-y: visible;
4761
- }
4931
+
4932
+ .pf-c-data-list__item-content {
4933
+ display: grid;
4934
+ width: 100%;
4935
+ grid-template-columns: auto 1fr;
4762
4936
  }
4763
- @media screen and (min-width: 768px) {
4764
- .pf-c-data-list.pf-m-grid-md {
4765
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
4766
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
4767
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
4768
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
4769
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
4770
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
4771
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
4772
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
4773
- }
4937
+
4938
+ .pf-c-data-list__cell {
4939
+ flex: 1;
4940
+ grid-column: 1/-1;
4941
+ padding-top: var(--pf-c-data-list__cell--PaddingTop);
4942
+ padding-bottom: var(--pf-c-data-list__cell--PaddingBottom);
4774
4943
  }
4775
- @media screen and (min-width: 768px) and (min-width: 1200px) {
4776
- .pf-c-data-list.pf-m-grid-md {
4777
- --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
4778
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
4779
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
4780
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
4781
- }
4944
+
4945
+ .pf-c-data-list__cell + .pf-c-data-list__cell {
4946
+ flex: 1 0 100%;
4947
+ order: 1;
4948
+ padding-top: var(--pf-c-data-list__cell--cell--PaddingTop);
4782
4949
  }
4783
- @media screen and (min-width: 768px) {
4784
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__item-content {
4785
- display: flex;
4786
- flex-wrap: wrap;
4787
- flex-grow: 1;
4788
- padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
4789
- }
4950
+
4951
+ .pf-c-data-list__cell.pf-m-icon {
4952
+ flex-grow: 0;
4953
+ margin-right: var(--pf-c-data-list__cell--m-icon--MarginRight);
4954
+ grid-column: 1/2;
4790
4955
  }
4791
- @media screen and (min-width: 768px) {
4792
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4793
- margin-right: var(--pf-c-data-list__cell--MarginRight);
4794
- }
4795
4956
 
4796
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell + .pf-c-data-list__cell {
4797
- flex: 1;
4798
- order: initial;
4799
- }
4957
+ .pf-c-data-list__cell.pf-m-icon + .pf-c-data-list__cell {
4958
+ grid-column: 2/3;
4959
+ padding-top: var(--pf-c-data-list__cell--m-icon--cell--PaddingTop);
4960
+ }
4800
4961
 
4801
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-align-right {
4802
- margin-left: auto;
4803
- }
4962
+ .pf-c-data-list__cell.pf-m-align-right {
4963
+ margin-left: 0;
4964
+ }
4804
4965
 
4805
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-no-fill {
4806
- flex: none;
4807
- }
4966
+ .pf-c-data-list__text {
4967
+ display: inline-block;
4968
+ }
4808
4969
 
4809
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-2 {
4810
- flex-grow: 2;
4811
- }
4970
+ .pf-c-data-list__text,
4971
+ .pf-c-data-list__cell {
4972
+ min-width: var(--pf-c-data-list--cell--MinWidth);
4973
+ max-width: 100%;
4974
+ overflow: var(--pf-c-data-list--cell--Overflow);
4975
+ text-overflow: var(--pf-c-data-list--cell--TextOverflow);
4976
+ word-break: var(--pf-c-data-list--cell--WordBreak);
4977
+ white-space: var(--pf-c-data-list--cell--WhiteSpace);
4978
+ }
4812
4979
 
4813
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-3 {
4814
- flex-grow: 3;
4815
- }
4980
+ .pf-c-data-list__expandable-content {
4981
+ max-height: var(--pf-c-data-list__expandable-content--MaxHeight);
4982
+ overflow-y: auto;
4983
+ border-top: var(--pf-c-data-list__expandable-content--BorderTopWidth) solid var(--pf-c-data-list__expandable-content--BorderTopColor);
4984
+ }
4816
4985
 
4817
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-4 {
4818
- flex-grow: 4;
4819
- }
4986
+ .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body {
4987
+ 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);
4988
+ }
4820
4989
 
4821
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-5 {
4822
- flex-grow: 5;
4823
- }
4990
+ .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body.pf-m-no-padding {
4991
+ padding: 0;
4824
4992
  }
4825
- @media screen and (min-width: 768px) {
4826
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__expandable-content {
4827
- max-height: initial;
4828
- overflow-y: visible;
4829
- }
4993
+
4994
+ :where(.pf-theme-dark) .pf-c-data-list {
4995
+ --pf-c-data-list--BorderTopColor: var(--pf-global--BorderColor--100);
4996
+ --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);
4997
+ --pf-c-data-list__item--BorderBottomColor: var(--pf-global--BorderColor--100);
4998
+ --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
4830
4999
  }
4831
- @media screen and (min-width: 992px) {
4832
- .pf-c-data-list.pf-m-grid-lg {
5000
+
5001
+ @media screen and (min-width: 768px) {
5002
+ .pf-c-data-list:not([class*=pf-m-grid]) {
4833
5003
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
4834
5004
  --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
4835
5005
  --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
@@ -4840,64 +5010,64 @@ label.pf-c-check, .pf-c-check__label,
4840
5010
  --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
4841
5011
  }
4842
5012
  }
4843
- @media screen and (min-width: 992px) and (min-width: 1200px) {
4844
- .pf-c-data-list.pf-m-grid-lg {
5013
+ @media screen and (min-width: 768px) and (min-width: 1200px) {
5014
+ .pf-c-data-list:not([class*=pf-m-grid]) {
4845
5015
  --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
4846
5016
  --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
4847
5017
  --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
4848
5018
  --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
4849
5019
  }
4850
5020
  }
4851
- @media screen and (min-width: 992px) {
4852
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__item-content {
5021
+ @media screen and (min-width: 768px) {
5022
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__item-content {
4853
5023
  display: flex;
4854
5024
  flex-wrap: wrap;
4855
5025
  flex-grow: 1;
4856
5026
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
4857
5027
  }
4858
5028
  }
4859
- @media screen and (min-width: 992px) {
4860
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5029
+ @media screen and (min-width: 768px) {
5030
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4861
5031
  margin-right: var(--pf-c-data-list__cell--MarginRight);
4862
5032
  }
4863
5033
 
4864
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell + .pf-c-data-list__cell {
5034
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell + .pf-c-data-list__cell {
4865
5035
  flex: 1;
4866
5036
  order: initial;
4867
5037
  }
4868
5038
 
4869
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-align-right {
5039
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-align-right {
4870
5040
  margin-left: auto;
4871
5041
  }
4872
5042
 
4873
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-no-fill {
5043
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-no-fill {
4874
5044
  flex: none;
4875
5045
  }
4876
5046
 
4877
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-2 {
5047
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-2 {
4878
5048
  flex-grow: 2;
4879
5049
  }
4880
5050
 
4881
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-3 {
5051
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-3 {
4882
5052
  flex-grow: 3;
4883
5053
  }
4884
5054
 
4885
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-4 {
5055
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-4 {
4886
5056
  flex-grow: 4;
4887
5057
  }
4888
5058
 
4889
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-5 {
5059
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-5 {
4890
5060
  flex-grow: 5;
4891
5061
  }
4892
5062
  }
4893
- @media screen and (min-width: 992px) {
4894
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__expandable-content {
5063
+ @media screen and (min-width: 768px) {
5064
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__expandable-content {
4895
5065
  max-height: initial;
4896
5066
  overflow-y: visible;
4897
5067
  }
4898
5068
  }
4899
- @media screen and (min-width: 1200px) {
4900
- .pf-c-data-list.pf-m-grid-xl {
5069
+ @media screen and (min-width: 0) {
5070
+ .pf-c-data-list.pf-m-grid-none {
4901
5071
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
4902
5072
  --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
4903
5073
  --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
@@ -4908,64 +5078,64 @@ label.pf-c-check, .pf-c-check__label,
4908
5078
  --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
4909
5079
  }
4910
5080
  }
4911
- @media screen and (min-width: 1200px) and (min-width: 1200px) {
4912
- .pf-c-data-list.pf-m-grid-xl {
5081
+ @media screen and (min-width: 0) and (min-width: 1200px) {
5082
+ .pf-c-data-list.pf-m-grid-none {
4913
5083
  --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
4914
5084
  --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
4915
5085
  --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
4916
5086
  --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
4917
5087
  }
4918
5088
  }
4919
- @media screen and (min-width: 1200px) {
4920
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__item-content {
5089
+ @media screen and (min-width: 0) {
5090
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__item-content {
4921
5091
  display: flex;
4922
5092
  flex-wrap: wrap;
4923
5093
  flex-grow: 1;
4924
5094
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
4925
5095
  }
4926
5096
  }
4927
- @media screen and (min-width: 1200px) {
4928
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5097
+ @media screen and (min-width: 0) {
5098
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4929
5099
  margin-right: var(--pf-c-data-list__cell--MarginRight);
4930
5100
  }
4931
5101
 
4932
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell + .pf-c-data-list__cell {
5102
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell + .pf-c-data-list__cell {
4933
5103
  flex: 1;
4934
5104
  order: initial;
4935
5105
  }
4936
5106
 
4937
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-align-right {
5107
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-align-right {
4938
5108
  margin-left: auto;
4939
5109
  }
4940
5110
 
4941
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-no-fill {
5111
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-no-fill {
4942
5112
  flex: none;
4943
5113
  }
4944
5114
 
4945
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-2 {
5115
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-2 {
4946
5116
  flex-grow: 2;
4947
5117
  }
4948
5118
 
4949
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-3 {
5119
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-3 {
4950
5120
  flex-grow: 3;
4951
5121
  }
4952
5122
 
4953
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-4 {
5123
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-4 {
4954
5124
  flex-grow: 4;
4955
5125
  }
4956
5126
 
4957
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-5 {
5127
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-5 {
4958
5128
  flex-grow: 5;
4959
5129
  }
4960
5130
  }
4961
- @media screen and (min-width: 1200px) {
4962
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__expandable-content {
5131
+ @media screen and (min-width: 0) {
5132
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__expandable-content {
4963
5133
  max-height: initial;
4964
5134
  overflow-y: visible;
4965
5135
  }
4966
5136
  }
4967
- @media screen and (min-width: 1450px) {
4968
- .pf-c-data-list.pf-m-grid-2xl {
5137
+ @media screen and (min-width: 576px) {
5138
+ .pf-c-data-list.pf-m-grid-sm {
4969
5139
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
4970
5140
  --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
4971
5141
  --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
@@ -4976,504 +5146,334 @@ label.pf-c-check, .pf-c-check__label,
4976
5146
  --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
4977
5147
  }
4978
5148
  }
4979
- @media screen and (min-width: 1450px) and (min-width: 1200px) {
4980
- .pf-c-data-list.pf-m-grid-2xl {
5149
+ @media screen and (min-width: 576px) and (min-width: 1200px) {
5150
+ .pf-c-data-list.pf-m-grid-sm {
4981
5151
  --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
4982
5152
  --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
4983
5153
  --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
4984
5154
  --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
4985
5155
  }
4986
5156
  }
4987
- @media screen and (min-width: 1450px) {
4988
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__item-content {
4989
- display: flex;
4990
- flex-wrap: wrap;
4991
- flex-grow: 1;
4992
- padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
4993
- }
4994
- }
4995
- @media screen and (min-width: 1450px) {
4996
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4997
- margin-right: var(--pf-c-data-list__cell--MarginRight);
4998
- }
4999
-
5000
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell + .pf-c-data-list__cell {
5001
- flex: 1;
5002
- order: initial;
5003
- }
5004
-
5005
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-align-right {
5006
- margin-left: auto;
5007
- }
5008
-
5009
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-no-fill {
5010
- flex: none;
5011
- }
5012
-
5013
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-2 {
5014
- flex-grow: 2;
5015
- }
5016
-
5017
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-3 {
5018
- flex-grow: 3;
5019
- }
5020
-
5021
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-4 {
5022
- flex-grow: 4;
5023
- }
5024
-
5025
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-5 {
5026
- flex-grow: 5;
5027
- }
5028
- }
5029
- @media screen and (min-width: 1450px) {
5030
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__expandable-content {
5031
- max-height: initial;
5032
- overflow-y: visible;
5033
- }
5034
- }
5035
- .pf-c-data-list {
5036
- --pf-c-data-list--FontSize: 1em;
5037
- --pf-c-data-list--LineHeight: var(--pf-global--LineHeight--md);
5038
- --pf-c-data-list--BorderTopColor: var(--pf-global--BorderColor--300);
5039
- --pf-c-data-list--BorderTopWidth: var(--pf-global--spacer--sm);
5040
- --pf-c-data-list--sm--BorderTopWidth: var(--pf-global--BorderWidth--sm);
5041
- --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);
5042
- --pf-c-data-list__item--BackgroundColor: var(--pf-global--BackgroundColor--100);
5043
- --pf-c-data-list__item--m-selected--ZIndex: var(--pf-global--ZIndex--xs);
5044
- --pf-c-data-list__item--m-expanded--before--BackgroundColor: var(--pf-global--active-color--100);
5045
- --pf-c-data-list__item--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
5046
- --pf-c-data-list__item--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
5047
- --pf-c-data-list__item--m-selectable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
5048
- --pf-c-data-list__item--m-selectable--hover--ZIndex: calc(var(--pf-c-data-list__item--m-selected--ZIndex) + 1);
5049
- --pf-c-data-list__item--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
5050
- --pf-c-data-list__item--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
5051
- --pf-c-data-list__item--m-selectable--active--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
5052
- --pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor: var(--pf-global--active-color--300);
5053
- --pf-c-data-list__item--BorderBottomColor: var(--pf-global--BorderColor--300);
5054
- --pf-c-data-list__item--BorderBottomWidth: 0.5rem;
5055
- --pf-c-data-list__item--m-selectable--hover--item--BorderTopColor: var(--pf-c-data-list__item--BorderBottomColor);
5056
- --pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth: var(--pf-c-data-list__item--BorderBottomWidth);
5057
- --pf-c-data-list__item--sm--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
5058
- --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
5059
- --pf-c-data-list__item--before--BackgroundColor: transparent;
5060
- --pf-c-data-list__item--before--Width: var(--pf-global--BorderWidth--lg);
5061
- --pf-c-data-list__item--before--Transition: var(--pf-global--Transition);
5062
- --pf-c-data-list__item--before--Top: 0;
5063
- --pf-c-data-list__item--before--sm--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
5064
- --pf-c-data-list__item-row--PaddingRight: var(--pf-global--spacer--md);
5065
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-global--spacer--md);
5066
- --pf-c-data-list__item-row--xl--PaddingRight: var(--pf-global--spacer--lg);
5067
- --pf-c-data-list__item-row--xl--PaddingLeft: var(--pf-global--spacer--lg);
5068
- --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-global--spacer--lg);
5069
- --pf-c-data-list__cell--PaddingTop: var(--pf-global--spacer--lg);
5070
- --pf-c-data-list__cell--PaddingBottom: var(--pf-global--spacer--lg);
5071
- --pf-c-data-list__cell--MarginRight: var(--pf-global--spacer--xl);
5072
- --pf-c-data-list__cell--md--PaddingBottom: 0;
5073
- --pf-c-data-list__cell--m-icon--MarginRight: var(--pf-global--spacer--md);
5074
- --pf-c-data-list__cell--cell--PaddingTop: 0;
5075
- --pf-c-data-list__cell--cell--md--PaddingTop: var(--pf-global--spacer--lg);
5076
- --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--lg);
5077
- --pf-c-data-list--cell--MinWidth: initial;
5078
- --pf-c-data-list--cell--Overflow: visible;
5079
- --pf-c-data-list--cell--TextOverflow: clip;
5080
- --pf-c-data-list--cell--WhiteSpace: normal;
5081
- --pf-c-data-list--cell--WordBreak: normal;
5082
- --pf-c-data-list--cell--m-truncate--MinWidth: 5ch;
5083
- --pf-c-data-list__toggle--MarginLeft: calc(var(--pf-global--spacer--sm) * -1);
5084
- --pf-c-data-list__toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
5085
- --pf-c-data-list__toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
5086
- --pf-c-data-list__toggle-icon--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
5087
- --pf-c-data-list__toggle-icon--Transition: .2s ease-in 0s;
5088
- --pf-c-data-list__toggle-icon--Rotate: 0;
5089
- --pf-c-data-list__item--m-expanded__toggle-icon--Rotate: 90deg;
5090
- --pf-c-data-list__item-draggable-button--PaddingLeft: var(--pf-global--spacer--md);
5091
- --pf-c-data-list__item-draggable-button--PaddingRight: var(--pf-global--spacer--md);
5092
- --pf-c-data-list__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--lg) * -1);
5093
- --pf-c-data-list__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--lg) * -1);
5094
- --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-global--spacer--lg);
5095
- --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-global--spacer--lg);
5096
- --pf-c-data-list__item-draggable-button--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
5097
- --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-global--icon--Color--light);
5098
- --pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color: var(--pf-global--disabled-color--200);
5099
- --pf-c-data-list__item-draggable-button--hover__draggable-icon--Color: var(--pf-global--icon--Color--dark);
5100
- --pf-c-data-list__item-draggable-button--focus__draggable-icon--Color: var(--pf-global--icon--Color--dark);
5101
- --pf-c-data-list__item--m-ghost-row--after--BackgroundColor: var(--pf-global--BackgroundColor--100);
5102
- --pf-c-data-list__item--m-ghost-row--after--Opacity: .6;
5103
- --pf-c-data-list__item-control--PaddingTop: var(--pf-global--spacer--lg);
5104
- --pf-c-data-list__item-control--PaddingBottom: var(--pf-global--spacer--lg);
5105
- --pf-c-data-list__item-control--MarginRight: var(--pf-global--spacer--md);
5106
- --pf-c-data-list__item-control--md--MarginRight: var(--pf-global--spacer--xl);
5107
- --pf-c-data-list__item-control--not-last-child--MarginRight: var(--pf-global--spacer--md);
5108
- --pf-c-data-list__check--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
5109
- --pf-c-data-list__check--MarginTop: -0.0625rem;
5110
- --pf-c-data-list__item-action--Display: flex;
5111
- --pf-c-data-list__item-action--PaddingTop: var(--pf-global--spacer--lg);
5112
- --pf-c-data-list__item-action--PaddingBottom: var(--pf-global--spacer--lg);
5113
- --pf-c-data-list__item-action--MarginLeft: var(--pf-global--spacer--md);
5114
- --pf-c-data-list__item-action--md--MarginLeft: var(--pf-global--spacer--xl);
5115
- --pf-c-data-list__item-action--not-last-child--MarginRight: var(--pf-global--spacer--md);
5116
- --pf-c-data-list__item-action__action--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
5117
- --pf-c-data-list__action--MarginTop: var(--pf-c-data-list__item-action__action--MarginTop);
5118
- --pf-c-data-list__item-action__action--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
5119
- --pf-c-data-list__expandable-content--BorderTopWidth: var(--pf-global--BorderWidth--sm);
5120
- --pf-c-data-list__expandable-content--BorderTopColor: var(--pf-global--BorderColor--100);
5121
- --pf-c-data-list__expandable-content--MarginRight: calc(var(--pf-c-data-list__expandable-content-body--PaddingRight) * -1);
5122
- --pf-c-data-list__expandable-content--MarginLeft: calc(var(--pf-c-data-list__expandable-content-body--PaddingLeft) * -1);
5123
- --pf-c-data-list__expandable-content--MaxHeight: 37.5rem;
5124
- --pf-c-data-list__expandable-content--before--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
5125
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-global--spacer--md);
5126
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-global--spacer--md);
5127
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-global--spacer--md);
5128
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-global--spacer--md);
5129
- --pf-c-data-list__expandable-content-body--md--PaddingTop: var(--pf-global--spacer--lg);
5130
- --pf-c-data-list__expandable-content-body--xl--PaddingRight: var(--pf-global--spacer--lg);
5131
- --pf-c-data-list__expandable-content-body--md--PaddingBottom: var(--pf-global--spacer--lg);
5132
- --pf-c-data-list__expandable-content-body--xl--PaddingLeft: var(--pf-global--spacer--lg);
5133
- --pf-c-data-list--m-compact--FontSize: var(--pf-global--FontSize--sm);
5134
- --pf-c-data-list--m-compact--LineHeight: var(--pf-global--LineHeight--sm);
5135
- --pf-c-data-list--m-compact__check--FontSize: var(--pf-global--FontSize--md);
5136
- --pf-c-data-list--m-compact__cell--PaddingTop: var(--pf-global--spacer--sm);
5137
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-global--spacer--sm);
5138
- --pf-c-data-list--m-compact__cell--md--PaddingBottom: 0;
5139
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: 0;
5140
- --pf-c-data-list--m-compact__cell-cell--md--PaddingTop: var(--pf-global--spacer--sm);
5141
- --pf-c-data-list--m-compact__cell--cell--MarginRight: var(--pf-global--spacer--md);
5142
- --pf-c-data-list--m-compact__item-control--PaddingTop: var(--pf-global--spacer--sm);
5143
- --pf-c-data-list--m-compact__item-control--PaddingBottom: var(--pf-global--spacer--sm);
5144
- --pf-c-data-list--m-compact__item-control--MarginRight: var(--pf-global--spacer--md);
5145
- --pf-c-data-list--m-compact__item-action--PaddingTop: var(--pf-global--spacer--sm);
5146
- --pf-c-data-list--m-compact__item-action--PaddingBottom: var(--pf-global--spacer--sm);
5147
- --pf-c-data-list--m-compact__item-action--MarginLeft: var(--pf-global--spacer--md);
5148
- --pf-c-data-list--m-compact__item-action__action--MarginTop: calc(var(--pf-c-data-list--m-compact__item-action--PaddingTop) * -1);
5149
- --pf-c-data-list--m-compact__item-action__action--MarginBottom: calc(var(--pf-c-data-list--m-compact__item-action--PaddingBottom) * -1);
5150
- --pf-c-data-list--m-compact__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
5151
- --pf-c-data-list--m-compact__item-content--PaddingBottom: var(--pf-global--spacer--sm);
5152
- --pf-c-data-list--m-compact__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
5153
- --pf-c-data-list--m-compact__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--sm) * -1);
5154
- --pf-c-data-list--m-compact__item-draggable-button--PaddingTop: var(--pf-global--spacer--sm);
5155
- --pf-c-data-list--m-compact__item-draggable-button--PaddingBottom: var(--pf-global--spacer--sm);
5156
- --pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--sm);
5157
- color: var(--pf-global--Color--100);
5158
- font-size: var(--pf-c-data-list--FontSize);
5159
- line-height: var(--pf-c-data-list--LineHeight);
5160
- overflow-wrap: break-word;
5161
- list-style-type: disc;
5162
- border-top: var(--pf-c-data-list--BorderTopWidth) solid var(--pf-c-data-list--BorderTopColor);
5163
- }
5164
-
5165
5157
  @media screen and (min-width: 576px) {
5166
- .pf-c-data-list {
5167
- --pf-c-data-list--BorderTopColor: var(--pf-c-data-list--sm--BorderTopColor);
5168
- --pf-c-data-list--BorderTopWidth: var(--pf-c-data-list--sm--BorderTopWidth);
5158
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__item-content {
5159
+ display: flex;
5160
+ flex-wrap: wrap;
5161
+ flex-grow: 1;
5162
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
5169
5163
  }
5170
5164
  }
5171
5165
  @media screen and (min-width: 576px) {
5172
- .pf-c-data-list {
5173
- --pf-c-data-list__item--BorderBottomWidth: var(--pf-c-data-list__item--sm--BorderBottomWidth);
5174
- --pf-c-data-list__item--BorderBottomColor: var(--pf-c-data-list__item--sm--BorderBottomColor);
5166
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5167
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
5175
5168
  }
5176
- }
5177
- @media (min-width: 576px) {
5178
- .pf-c-data-list {
5179
- --pf-c-data-list__item--before--Top: var(--pf-c-data-list__item--before--sm--Top);
5169
+
5170
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell + .pf-c-data-list__cell {
5171
+ flex: 1;
5172
+ order: initial;
5180
5173
  }
5181
- }
5182
- .pf-c-data-list.pf-m-compact {
5183
- --pf-c-data-list__check--FontSize: var(--pf-c-data-list--m-compact__check--FontSize);
5184
- --pf-c-data-list__action--MarginTop: var(--pf-c-data-list--m-compact__action--MarginTop);
5185
- --pf-c-data-list--FontSize: var(--pf-c-data-list--m-compact--FontSize);
5186
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list--m-compact__item-action--MarginLeft);
5187
- --pf-c-data-list__item-action--PaddingTop: var(--pf-c-data-list--m-compact__item-action--PaddingTop);
5188
- --pf-c-data-list__item-action--PaddingBottom: var(--pf-c-data-list--m-compact__item-action--PaddingBottom);
5189
- --pf-c-data-list__item-action__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
5190
- --pf-c-data-list__item-action__action--MarginBottom: var(--pf-c-data-list--m-compact__item-action__action--MarginBottom);
5191
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list--m-compact__item-control--MarginRight);
5192
- --pf-c-data-list__item-control--PaddingTop: var(--pf-c-data-list--m-compact__item-control--PaddingTop);
5193
- --pf-c-data-list__item-control--PaddingBottom: var(--pf-c-data-list--m-compact__item-control--PaddingBottom);
5194
- --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-c-data-list--m-compact__item-content--PaddingBottom);
5195
- --pf-c-data-list__item-draggable-button--MarginTop: var(--pf-c-data-list--m-compact__item-draggable-button--MarginTop);
5196
- --pf-c-data-list__item-draggable-button--MarginBottom: var(--pf-c-data-list--m-compact__item-draggable-button--MarginBottom);
5197
- --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingTop);
5198
- --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingBottom);
5199
- --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop);
5200
- font-size: var(--pf-c-data-list--m-compact--FontSize);
5201
- }
5202
5174
 
5203
- .pf-c-data-list.pf-m-compact .pf-c-data-list__cell {
5204
- --pf-c-data-list__cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--PaddingTop);
5205
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--PaddingBottom);
5206
- --pf-c-data-list__cell--MarginRight: var(--pf-c-data-list--m-compact__cell--cell--MarginRight);
5207
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--PaddingTop);
5208
- }
5175
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-align-right {
5176
+ margin-left: auto;
5177
+ }
5209
5178
 
5210
- .pf-c-data-list.pf-m-compact .pf-c-data-list__check {
5211
- font-size: var(--pf-c-data-list--m-compact__check--FontSize);
5212
- }
5179
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-no-fill {
5180
+ flex: none;
5181
+ }
5213
5182
 
5214
- .pf-c-data-list.pf-m-drag-over {
5215
- overflow-anchor: none;
5216
- }
5183
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-2 {
5184
+ flex-grow: 2;
5185
+ }
5217
5186
 
5218
- .pf-c-data-list.pf-m-truncate,
5219
- .pf-c-data-list__item-row.pf-m-truncate,
5220
- .pf-c-data-list__cell.pf-m-truncate,
5221
- .pf-c-data-list__text.pf-m-truncate {
5222
- --pf-c-data-list--cell--MinWidth: var(--pf-c-data-list--cell--m-truncate--MinWidth);
5223
- --pf-c-data-list--cell--Overflow: hidden;
5224
- --pf-c-data-list--cell--TextOverflow: ellipsis;
5225
- --pf-c-data-list--cell--WhiteSpace: nowrap;
5226
- }
5187
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-3 {
5188
+ flex-grow: 3;
5189
+ }
5227
5190
 
5228
- .pf-c-data-list.pf-m-break-word,
5229
- .pf-c-data-list__item-row.pf-m-break-word,
5230
- .pf-c-data-list__cell.pf-m-break-word,
5231
- .pf-c-data-list__text.pf-m-break-word {
5232
- --pf-c-data-list--cell--WordBreak: break-word;
5233
- }
5191
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-4 {
5192
+ flex-grow: 4;
5193
+ }
5234
5194
 
5235
- .pf-c-data-list.pf-m-nowrap,
5236
- .pf-c-data-list__item-row.pf-m-nowrap,
5237
- .pf-c-data-list__cell.pf-m-nowrap,
5238
- .pf-c-data-list__text.pf-m-nowrap {
5239
- --pf-c-data-list--cell--WhiteSpace: nowrap;
5195
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-5 {
5196
+ flex-grow: 5;
5197
+ }
5240
5198
  }
5241
-
5242
- .pf-c-data-list__item {
5243
- position: relative;
5244
- display: flex;
5245
- flex-direction: column;
5246
- background-color: var(--pf-c-data-list__item--BackgroundColor);
5247
- border-bottom: var(--pf-c-data-list__item--BorderBottomWidth) solid var(--pf-c-data-list__item--BorderBottomColor);
5199
+ @media screen and (min-width: 576px) {
5200
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__expandable-content {
5201
+ max-height: initial;
5202
+ overflow-y: visible;
5203
+ }
5248
5204
  }
5249
-
5250
- .pf-c-data-list__item::before {
5251
- position: absolute;
5252
- top: var(--pf-c-data-list__item--before--Top);
5253
- bottom: 0;
5254
- left: 0;
5255
- width: var(--pf-c-data-list__item--before--Width);
5256
- content: "";
5257
- background-color: var(--pf-c-data-list__item--before--BackgroundColor);
5258
- transition: var(--pf-c-data-list__item--before--Transition);
5205
+ @media screen and (min-width: 768px) {
5206
+ .pf-c-data-list.pf-m-grid-md {
5207
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
5208
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
5209
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
5210
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
5211
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
5212
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
5213
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
5214
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
5215
+ }
5259
5216
  }
5260
-
5261
- .pf-c-data-list__item.pf-m-selectable {
5262
- cursor: pointer;
5263
- outline-offset: var(--pf-c-data-list__item--m-selectable--OutlineOffset);
5217
+ @media screen and (min-width: 768px) and (min-width: 1200px) {
5218
+ .pf-c-data-list.pf-m-grid-md {
5219
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
5220
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
5221
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
5222
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
5223
+ }
5264
5224
  }
5265
-
5266
- .pf-c-data-list__item.pf-m-selectable:hover, .pf-c-data-list__item.pf-m-selectable:focus {
5267
- position: relative;
5268
- z-index: var(--pf-c-data-list__item--m-selectable--hover--ZIndex);
5225
+ @media screen and (min-width: 768px) {
5226
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__item-content {
5227
+ display: flex;
5228
+ flex-wrap: wrap;
5229
+ flex-grow: 1;
5230
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
5231
+ }
5269
5232
  }
5233
+ @media screen and (min-width: 768px) {
5234
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5235
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
5236
+ }
5270
5237
 
5271
- .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) {
5272
- --pf-c-data-list__item--BorderBottomWidth: 0;
5273
- }
5238
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell + .pf-c-data-list__cell {
5239
+ flex: 1;
5240
+ order: initial;
5241
+ }
5274
5242
 
5275
- .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 {
5276
- 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);
5277
- }
5243
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-align-right {
5244
+ margin-left: auto;
5245
+ }
5278
5246
 
5279
- .pf-c-data-list__item.pf-m-selectable:hover {
5280
- box-shadow: var(--pf-c-data-list__item--m-selectable--hover--BoxShadow);
5281
- }
5247
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-no-fill {
5248
+ flex: none;
5249
+ }
5282
5250
 
5283
- .pf-c-data-list__item.pf-m-selectable:focus {
5284
- box-shadow: var(--pf-c-data-list__item--m-selectable--focus--BoxShadow);
5285
- }
5251
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-2 {
5252
+ flex-grow: 2;
5253
+ }
5286
5254
 
5287
- .pf-c-data-list__item.pf-m-selectable:active {
5288
- box-shadow: var(--pf-c-data-list__item--m-selectable--active--BoxShadow);
5289
- }
5255
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-3 {
5256
+ flex-grow: 3;
5257
+ }
5290
5258
 
5291
- .pf-c-data-list__item.pf-m-selected {
5292
- --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-selected--before--BackgroundColor);
5293
- position: relative;
5294
- z-index: var(--pf-c-data-list__item--m-selected--ZIndex);
5295
- box-shadow: var(--pf-c-data-list__item--m-selected--BoxShadow);
5296
- }
5259
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-4 {
5260
+ flex-grow: 4;
5261
+ }
5297
5262
 
5298
- .pf-c-data-list__item.pf-m-ghost-row::after {
5299
- position: absolute;
5300
- top: 0;
5301
- right: 0;
5302
- bottom: 0;
5303
- left: 0;
5304
- content: "";
5305
- background-color: var(--pf-c-data-list__item--m-ghost-row--after--BackgroundColor);
5306
- opacity: var(--pf-c-data-list__item--m-ghost-row--after--Opacity);
5263
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-5 {
5264
+ flex-grow: 5;
5265
+ }
5307
5266
  }
5308
-
5309
- .pf-c-data-list__item.pf-m-expanded {
5310
- --pf-c-data-list__toggle-icon--Rotate: var(--pf-c-data-list__item--m-expanded__toggle-icon--Rotate);
5311
- --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--before--BackgroundColor);
5267
+ @media screen and (min-width: 768px) {
5268
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__expandable-content {
5269
+ max-height: initial;
5270
+ overflow-y: visible;
5271
+ }
5312
5272
  }
5313
-
5314
- .pf-c-data-list__item.pf-m-expanded.pf-m-selectable:not(.pf-m-selected) {
5315
- --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor);
5273
+ @media screen and (min-width: 992px) {
5274
+ .pf-c-data-list.pf-m-grid-lg {
5275
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
5276
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
5277
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
5278
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
5279
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
5280
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
5281
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
5282
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
5283
+ }
5316
5284
  }
5317
-
5318
- .pf-c-data-list__item-row {
5319
- display: flex;
5320
- flex-wrap: nowrap;
5321
- padding-right: var(--pf-c-data-list__item-row--PaddingRight);
5322
- padding-left: var(--pf-c-data-list__item-row--PaddingLeft);
5285
+ @media screen and (min-width: 992px) and (min-width: 1200px) {
5286
+ .pf-c-data-list.pf-m-grid-lg {
5287
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
5288
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
5289
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
5290
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
5291
+ }
5292
+ }
5293
+ @media screen and (min-width: 992px) {
5294
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__item-content {
5295
+ display: flex;
5296
+ flex-wrap: wrap;
5297
+ flex-grow: 1;
5298
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
5299
+ }
5323
5300
  }
5301
+ @media screen and (min-width: 992px) {
5302
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5303
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
5304
+ }
5305
+
5306
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell + .pf-c-data-list__cell {
5307
+ flex: 1;
5308
+ order: initial;
5309
+ }
5310
+
5311
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-align-right {
5312
+ margin-left: auto;
5313
+ }
5324
5314
 
5325
- .pf-c-data-list__item-control {
5326
- display: flex;
5327
- flex-wrap: nowrap;
5328
- padding-top: var(--pf-c-data-list__item-control--PaddingTop);
5329
- padding-bottom: var(--pf-c-data-list__item-control--PaddingBottom);
5330
- margin-right: var(--pf-c-data-list__item-control--MarginRight);
5331
- }
5315
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-no-fill {
5316
+ flex: none;
5317
+ }
5332
5318
 
5333
- .pf-c-data-list__item-control > *:not(:last-child) {
5334
- margin-right: var(--pf-c-data-list__item-control--not-last-child--MarginRight);
5335
- }
5319
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-2 {
5320
+ flex-grow: 2;
5321
+ }
5336
5322
 
5337
- .pf-c-data-list__check {
5338
- display: flex;
5339
- align-items: center;
5340
- align-self: flex-start;
5341
- height: var(--pf-c-data-list__check--Height);
5342
- margin-top: var(--pf-c-data-list__check--MarginTop);
5343
- }
5323
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-3 {
5324
+ flex-grow: 3;
5325
+ }
5344
5326
 
5345
- .pf-c-data-list__check > input {
5346
- cursor: pointer;
5347
- }
5327
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-4 {
5328
+ flex-grow: 4;
5329
+ }
5348
5330
 
5349
- .pf-c-data-list__item-draggable-button {
5350
- display: flex;
5351
- flex-direction: column;
5352
- 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);
5353
- 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);
5354
- border: 0;
5331
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-5 {
5332
+ flex-grow: 5;
5333
+ }
5355
5334
  }
5356
-
5357
- .pf-c-data-list__item-draggable-button:hover {
5358
- --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--hover__draggable-icon--Color);
5359
- cursor: grab;
5335
+ @media screen and (min-width: 992px) {
5336
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__expandable-content {
5337
+ max-height: initial;
5338
+ overflow-y: visible;
5339
+ }
5360
5340
  }
5361
-
5362
- .pf-c-data-list__item-draggable-button:focus {
5363
- --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--focus__draggable-icon--Color);
5341
+ @media screen and (min-width: 1200px) {
5342
+ .pf-c-data-list.pf-m-grid-xl {
5343
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
5344
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
5345
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
5346
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
5347
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
5348
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
5349
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
5350
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
5351
+ }
5364
5352
  }
5365
-
5366
- .pf-c-data-list__item-draggable-button:active {
5367
- cursor: grabbing;
5353
+ @media screen and (min-width: 1200px) and (min-width: 1200px) {
5354
+ .pf-c-data-list.pf-m-grid-xl {
5355
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
5356
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
5357
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
5358
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
5359
+ }
5368
5360
  }
5369
-
5370
- .pf-c-data-list__item-draggable-button.pf-m-disabled {
5371
- --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color);
5372
- pointer-events: none;
5361
+ @media screen and (min-width: 1200px) {
5362
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__item-content {
5363
+ display: flex;
5364
+ flex-wrap: wrap;
5365
+ flex-grow: 1;
5366
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
5367
+ }
5373
5368
  }
5369
+ @media screen and (min-width: 1200px) {
5370
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5371
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
5372
+ }
5374
5373
 
5375
- .pf-c-data-list__item-draggable-button .pf-c-data-list__item-draggable-icon {
5376
- color: var(--pf-c-data-list__item-draggable-button-icon--Color);
5377
- }
5374
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell + .pf-c-data-list__cell {
5375
+ flex: 1;
5376
+ order: initial;
5377
+ }
5378
5378
 
5379
- .pf-c-data-list__item-action {
5380
- --pf-hidden-visible--visible--Display: var(--pf-c-data-list__item-action--Display);
5381
- align-items: flex-start;
5382
- align-content: flex-start;
5383
- padding-top: var(--pf-c-data-list__item-action--PaddingTop);
5384
- padding-bottom: var(--pf-c-data-list__item-action--PaddingBottom);
5385
- margin-left: var(--pf-c-data-list__item-action--MarginLeft);
5386
- }
5379
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-align-right {
5380
+ margin-left: auto;
5381
+ }
5387
5382
 
5388
- .pf-c-data-list__item-action > *:not(:last-child) {
5389
- margin-right: var(--pf-c-data-list__item-action--not-last-child--MarginRight);
5390
- }
5383
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-no-fill {
5384
+ flex: none;
5385
+ }
5391
5386
 
5392
- .pf-c-data-list__item-action .pf-c-data-list__action {
5393
- margin-top: var(--pf-c-data-list__action--MarginTop);
5394
- margin-bottom: var(--pf-c-data-list__item-action__action--MarginBottom);
5395
- }
5387
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-2 {
5388
+ flex-grow: 2;
5389
+ }
5396
5390
 
5397
- .pf-c-data-list__toggle {
5398
- margin: var(--pf-c-data-list__toggle--MarginTop) 0 var(--pf-c-data-list__toggle--MarginBottom) var(--pf-c-data-list__toggle--MarginLeft);
5399
- }
5391
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-3 {
5392
+ flex-grow: 3;
5393
+ }
5400
5394
 
5401
- .pf-c-data-list__toggle-icon {
5402
- height: var(--pf-c-data-list__toggle-icon--Height);
5403
- pointer-events: none;
5404
- transition: var(--pf-c-data-list__toggle-icon--Transition);
5405
- transform: rotate(var(--pf-c-data-list__toggle-icon--Rotate));
5406
- }
5395
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-4 {
5396
+ flex-grow: 4;
5397
+ }
5407
5398
 
5408
- .pf-c-data-list__item-content {
5409
- display: grid;
5410
- width: 100%;
5411
- grid-template-columns: auto 1fr;
5399
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-5 {
5400
+ flex-grow: 5;
5401
+ }
5412
5402
  }
5413
-
5414
- .pf-c-data-list__cell {
5415
- flex: 1;
5416
- grid-column: 1/-1;
5417
- padding-top: var(--pf-c-data-list__cell--PaddingTop);
5418
- padding-bottom: var(--pf-c-data-list__cell--PaddingBottom);
5403
+ @media screen and (min-width: 1200px) {
5404
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__expandable-content {
5405
+ max-height: initial;
5406
+ overflow-y: visible;
5407
+ }
5419
5408
  }
5420
-
5421
- .pf-c-data-list__cell + .pf-c-data-list__cell {
5422
- flex: 1 0 100%;
5423
- order: 1;
5424
- padding-top: var(--pf-c-data-list__cell--cell--PaddingTop);
5409
+ @media screen and (min-width: 1450px) {
5410
+ .pf-c-data-list.pf-m-grid-2xl {
5411
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
5412
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
5413
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
5414
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
5415
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
5416
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
5417
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
5418
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
5419
+ }
5425
5420
  }
5426
-
5427
- .pf-c-data-list__cell.pf-m-icon {
5428
- flex-grow: 0;
5429
- margin-right: var(--pf-c-data-list__cell--m-icon--MarginRight);
5430
- grid-column: 1/2;
5421
+ @media screen and (min-width: 1450px) and (min-width: 1200px) {
5422
+ .pf-c-data-list.pf-m-grid-2xl {
5423
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
5424
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
5425
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
5426
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
5427
+ }
5431
5428
  }
5432
-
5433
- .pf-c-data-list__cell.pf-m-icon + .pf-c-data-list__cell {
5434
- grid-column: 2/3;
5435
- padding-top: var(--pf-c-data-list__cell--m-icon--cell--PaddingTop);
5429
+ @media screen and (min-width: 1450px) {
5430
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__item-content {
5431
+ display: flex;
5432
+ flex-wrap: wrap;
5433
+ flex-grow: 1;
5434
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
5435
+ }
5436
5436
  }
5437
+ @media screen and (min-width: 1450px) {
5438
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5439
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
5440
+ }
5437
5441
 
5438
- .pf-c-data-list__cell.pf-m-align-right {
5439
- margin-left: 0;
5440
- }
5442
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell + .pf-c-data-list__cell {
5443
+ flex: 1;
5444
+ order: initial;
5445
+ }
5441
5446
 
5442
- .pf-c-data-list__text {
5443
- display: inline-block;
5444
- }
5447
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-align-right {
5448
+ margin-left: auto;
5449
+ }
5445
5450
 
5446
- .pf-c-data-list__text,
5447
- .pf-c-data-list__cell {
5448
- min-width: var(--pf-c-data-list--cell--MinWidth);
5449
- max-width: 100%;
5450
- overflow: var(--pf-c-data-list--cell--Overflow);
5451
- text-overflow: var(--pf-c-data-list--cell--TextOverflow);
5452
- word-break: var(--pf-c-data-list--cell--WordBreak);
5453
- white-space: var(--pf-c-data-list--cell--WhiteSpace);
5454
- }
5451
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-no-fill {
5452
+ flex: none;
5453
+ }
5455
5454
 
5456
- .pf-c-data-list__expandable-content {
5457
- max-height: var(--pf-c-data-list__expandable-content--MaxHeight);
5458
- overflow-y: auto;
5459
- border-top: var(--pf-c-data-list__expandable-content--BorderTopWidth) solid var(--pf-c-data-list__expandable-content--BorderTopColor);
5460
- }
5455
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-2 {
5456
+ flex-grow: 2;
5457
+ }
5461
5458
 
5462
- .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body {
5463
- 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);
5464
- }
5459
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-3 {
5460
+ flex-grow: 3;
5461
+ }
5465
5462
 
5466
- .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body.pf-m-no-padding {
5467
- padding: 0;
5468
- }
5463
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-4 {
5464
+ flex-grow: 4;
5465
+ }
5469
5466
 
5470
- :where(.pf-theme-dark) .pf-c-data-list {
5471
- --pf-c-data-list--BorderTopColor: var(--pf-global--BorderColor--100);
5472
- --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);
5473
- --pf-c-data-list__item--BorderBottomColor: var(--pf-global--BorderColor--100);
5474
- --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
5467
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-5 {
5468
+ flex-grow: 5;
5469
+ }
5470
+ }
5471
+ @media screen and (min-width: 1450px) {
5472
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__expandable-content {
5473
+ max-height: initial;
5474
+ overflow-y: visible;
5475
+ }
5475
5476
  }
5476
-
5477
5477
  .pf-c-date-picker {
5478
5478
  --pf-c-date-picker--m-top__calendar--Top: 0;
5479
5479
  --pf-c-date-picker--m-top__calendar--TranslateY: calc(-100% - var(--pf-global--spacer--xs));
@@ -9512,481 +9512,160 @@ label.pf-c-check, .pf-c-check__label,
9512
9512
 
9513
9513
  .pf-c-icon__content.pf-m-sm,
9514
9514
  .pf-c-icon__progress.pf-m-sm {
9515
- --pf-c-icon__content--FontSize: var(--pf-c-icon--m-sm--content--FontSize);
9516
- }
9517
-
9518
- .pf-c-icon__content.pf-m-md,
9519
- .pf-c-icon__progress.pf-m-md {
9520
- --pf-c-icon__content--FontSize: var(--pf-c-icon--m-md--content--FontSize);
9521
- }
9522
-
9523
- .pf-c-icon__content.pf-m-lg,
9524
- .pf-c-icon__progress.pf-m-lg {
9525
- --pf-c-icon__content--FontSize: var(--pf-c-icon--m-lg--content--FontSize);
9526
- }
9527
-
9528
- .pf-c-icon__content.pf-m-xl,
9529
- .pf-c-icon__progress.pf-m-xl {
9530
- --pf-c-icon__content--FontSize: var(--pf-c-icon--m-xl--content--FontSize);
9531
- }
9532
-
9533
- .pf-c-icon__content {
9534
- color: var(--pf-c-icon__content--Color);
9535
- opacity: var(--pf-c-icon__content--Opacity, 1);
9536
- }
9537
-
9538
- .pf-c-icon__content.pf-m-danger {
9539
- --pf-c-icon__content--Color: var(--pf-c-icon__content--m-danger--Color);
9540
- }
9541
-
9542
- .pf-c-icon__content.pf-m-warning {
9543
- --pf-c-icon__content--Color: var(--pf-c-icon__content--m-warning--Color);
9544
- }
9545
-
9546
- .pf-c-icon__content.pf-m-success {
9547
- --pf-c-icon__content--Color: var(--pf-c-icon__content--m-success--Color);
9548
- }
9549
-
9550
- .pf-c-icon__content.pf-m-info {
9551
- --pf-c-icon__content--Color: var(--pf-c-icon__content--m-info--Color);
9552
- }
9553
-
9554
- .pf-c-icon__content.pf-m-default {
9555
- --pf-c-icon__content--Color: var(--pf-c-icon__content--m-default--Color);
9556
- }
9557
-
9558
- .pf-c-icon__progress {
9559
- position: absolute;
9560
- top: calc(50% + 0.5 * var(--pf-c-icon__content--svg--VerticalAlign));
9561
- opacity: var(--pf-c-icon__progress--Opacity, 0);
9562
- transform: translateY(calc(-50% - 0.5 * var(--pf-c-icon__content--svg--VerticalAlign)));
9563
- }
9564
-
9565
- .pf-c-input-group {
9566
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
9567
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
9568
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
9569
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
9570
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
9571
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
9572
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
9573
- }
9574
-
9575
- .pf-c-input-group {
9576
- --pf-c-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
9577
- --pf-c-input-group--child--ZIndex: var(--pf-global--ZIndex--xs);
9578
- --pf-c-input-group__text--FontSize: var(--pf-global--FontSize--md);
9579
- --pf-c-input-group__text--PaddingRight: var(--pf-global--spacer--sm);
9580
- --pf-c-input-group__text--PaddingLeft: var(--pf-global--spacer--sm);
9581
- --pf-c-input-group__text--Color: var(--pf-global--Color--dark-200);
9582
- --pf-c-input-group__text--BorderWidth: var(--pf-global--BorderWidth--sm);
9583
- --pf-c-input-group__text--BorderTopColor: var(--pf-global--BorderColor--300);
9584
- --pf-c-input-group__text--BorderRightColor: var(--pf-global--BorderColor--300);
9585
- --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--200);
9586
- --pf-c-input-group__text--BorderLeftColor: var(--pf-global--BorderColor--300);
9587
- --pf-c-input-group__text--BackgroundColor: var(--pf-global--BackgroundColor--100);
9588
- --pf-c-input-group__textarea--MinHeight: var(--pf-global--spacer--xl);
9589
- --pf-c-input-group--c-form-control--invalid--ZIndex: var(--pf-global--ZIndex--xs);
9590
- --pf-c-input-group--c-form-control--MarginRight: 0;
9591
- color: var(--pf-global--Color--100);
9592
- display: flex;
9593
- width: 100%;
9594
- background-color: var(--pf-c-input-group--BackgroundColor);
9595
- }
9596
-
9597
- .pf-c-input-group.pf-m-plain {
9598
- --pf-c-input-group--BackgroundColor: transparent;
9599
- }
9600
-
9601
- .pf-c-input-group > * + * {
9602
- margin-left: -1px;
9603
- }
9604
-
9605
- .pf-c-input-group > :focus,
9606
- .pf-c-input-group > :focus-within {
9607
- z-index: var(--pf-c-input-group--child--ZIndex);
9608
- }
9609
-
9610
- .pf-c-input-group .pf-c-form-control[aria-invalid=true]:not(:last-child) {
9611
- margin-right: var(--pf-c-input-group--c-form-control--MarginRight);
9612
- }
9613
-
9614
- .pf-c-input-group input:not([type=checkbox]):not([type=radio]),
9615
- .pf-c-input-group textarea {
9616
- flex: 2;
9617
- min-width: 0;
9618
- }
9619
-
9620
- .pf-c-input-group textarea {
9621
- min-height: var(--pf-c-input-group__textarea--MinHeight);
9622
- }
9623
-
9624
- .pf-c-input-group__text {
9625
- display: flex;
9626
- align-items: center;
9627
- padding-right: var(--pf-c-input-group__text--PaddingRight);
9628
- padding-left: var(--pf-c-input-group__text--PaddingLeft);
9629
- font-size: var(--pf-c-input-group__text--FontSize);
9630
- color: var(--pf-c-input-group__text--Color);
9631
- text-align: center;
9632
- background-color: var(--pf-c-input-group__text--BackgroundColor);
9633
- border: var(--pf-c-input-group__text--BorderWidth) solid;
9634
- border-color: var(--pf-c-input-group__text--BorderTopColor) var(--pf-c-input-group__text--BorderRightColor) var(--pf-c-input-group__text--BorderBottomColor) var(--pf-c-input-group__text--BorderLeftColor);
9635
- }
9636
-
9637
- label.pf-c-input-group__text {
9638
- cursor: pointer;
9639
- }
9640
-
9641
- .pf-c-input-group__text.pf-m-plain {
9642
- --pf-c-input-group__text--BorderWidth: 0;
9643
- margin-left: 0;
9644
- }
9645
-
9646
- :where(.pf-theme-dark) .pf-c-input-group {
9647
- --pf-c-input-group--BackgroundColor: transparent;
9648
- --pf-c-input-group__text--BorderTopColor: transparent;
9649
- --pf-c-input-group__text--BorderRightColor: transparent;
9650
- --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
9651
- --pf-c-input-group__text--BorderLeftColor: transparent;
9652
- --pf-c-input-group__text--BackgroundColor: var(--pf-global--palette--black-600);
9653
- }
9654
-
9655
- :where(.pf-theme-dark) .pf-c-input-group > * + * {
9656
- margin-left: 0;
9657
- border-left: 1px solid var(--pf-global--palette--black-700);
9658
- }
9659
-
9660
- :where(.pf-theme-dark) .pf-c-input-group__text {
9661
- --pf-c-input-group__text--BorderTopColor: transparent;
9662
- --pf-c-input-group__text--BorderRightColor: transparent;
9663
- --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
9664
- --pf-c-input-group__text--BorderLeftColor: transparent;
9665
- }
9666
-
9667
- :where(.pf-theme-dark) .pf-c-input-group__text.pf-m-plain {
9668
- --pf-c-input-group__text--BackgroundColor: transparent;
9669
- }
9670
-
9671
- .pf-c-jump-links {
9672
- --pf-c-jump-links__list--Display: flex;
9673
- --pf-c-jump-links__list--Visibility: visible;
9674
- --pf-c-jump-links__list--PaddingTop: 0;
9675
- --pf-c-jump-links__list--PaddingRight: var(--pf-global--spacer--md);
9676
- --pf-c-jump-links__list--PaddingBottom: 0;
9677
- --pf-c-jump-links__list--PaddingLeft: var(--pf-global--spacer--md);
9678
- --pf-c-jump-links--m-vertical__list--PaddingTop: var(--pf-global--spacer--md);
9679
- --pf-c-jump-links--m-vertical__list--PaddingRight: 0;
9680
- --pf-c-jump-links--m-vertical__list--PaddingBottom: var(--pf-global--spacer--md);
9681
- --pf-c-jump-links--m-vertical__list--PaddingLeft: 0;
9682
- --pf-c-jump-links__list--FlexDirection: row;
9683
- --pf-c-jump-links--m-vertical__list--FlexDirection: column;
9684
- --pf-c-jump-links__list--before--BorderColor: var(--pf-global--BorderColor--100);
9685
- --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-global--BorderWidth--sm);
9686
- --pf-c-jump-links__list--before--BorderRightWidth: 0;
9687
- --pf-c-jump-links__list--before--BorderBottomWidth: 0;
9688
- --pf-c-jump-links__list--before--BorderLeftWidth: 0;
9689
- --pf-c-jump-links--m-vertical__list--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
9690
- --pf-c-jump-links--m-vertical__list--before--BorderTopWidth: 0;
9691
- --pf-c-jump-links__list__list--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
9692
- --pf-c-jump-links__link--PaddingTop: var(--pf-global--spacer--md);
9693
- --pf-c-jump-links__link--PaddingRight: var(--pf-global--spacer--md);
9694
- --pf-c-jump-links__link--PaddingBottom: var(--pf-global--spacer--md);
9695
- --pf-c-jump-links__link--PaddingLeft: var(--pf-global--spacer--md);
9696
- --pf-c-jump-links__list__list__link--PaddingTop: var(--pf-global--spacer--sm);
9697
- --pf-c-jump-links__list__list__link--PaddingLeft: var(--pf-global--spacer--lg);
9698
- --pf-c-jump-links__list__list__link--PaddingBottom: var(--pf-global--spacer--sm);
9699
- --pf-c-jump-links__link--OutlineOffset: calc(-1 * var(--pf-global--spacer--sm));
9700
- --pf-c-jump-links__link--before--BorderTopWidth: 0;
9701
- --pf-c-jump-links__link--before--BorderRightWidth: 0;
9702
- --pf-c-jump-links__link--before--BorderBottomWidth: 0;
9703
- --pf-c-jump-links__link--before--BorderLeftWidth: 0;
9704
- --pf-c-jump-links__link--before--BorderColor: transparent;
9705
- --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-global--BorderWidth--lg);
9706
- --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: 0;
9707
- --pf-c-jump-links__item--m-current__link--before--BorderColor: var(--pf-global--primary-color--100);
9708
- --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth: 0;
9709
- --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth: var(--pf-global--BorderWidth--lg);
9710
- --pf-c-jump-links__link-text--Color: var(--pf-global--Color--200);
9711
- --pf-c-jump-links__link--hover__link-text--Color: var(--pf-global--Color--100);
9712
- --pf-c-jump-links__link--focus__link-text--Color: var(--pf-global--Color--100);
9713
- --pf-c-jump-links__item--m-current__link-text--Color: var(--pf-global--Color--100);
9714
- --pf-c-jump-links__label--MarginBottom: var(--pf-global--spacer--md);
9715
- --pf-c-jump-links__label--Display: block;
9716
- --pf-c-jump-links__label--Visibility: visible;
9717
- --pf-c-jump-links__toggle--MarginTop: calc(-1 * var(--pf-global--spacer--form-element));
9718
- --pf-c-jump-links__toggle--MarginBottom--base: calc(-1 * var(--pf-global--spacer--form-element));
9719
- --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links__toggle--MarginBottom--base);
9720
- --pf-c-jump-links--m-expanded__toggle--MarginBottom: calc(var(--pf-c-jump-links__toggle--MarginBottom--base) + var(--pf-global--spacer--md));
9721
- --pf-c-jump-links__toggle--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
9722
- --pf-c-jump-links__toggle--Display: none;
9723
- --pf-c-jump-links__toggle--Visibility: hidden;
9724
- --pf-c-jump-links__toggle-icon--Color: currentcolor;
9725
- --pf-c-jump-links__toggle-icon--Transition: var(--pf-global--Transition);
9726
- --pf-c-jump-links__toggle-icon--Rotate: 0;
9727
- --pf-c-jump-links--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
9728
- --pf-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
9729
- --pf-c-jump-links__toggle-text--MarginLeft: var(--pf-global--spacer--md);
9730
- --pf-c-jump-links__toggle-text--Color: var(--pf-global--Color--100);
9731
- display: flex;
9732
- }
9733
-
9734
- .pf-c-jump-links.pf-m-center {
9735
- justify-content: center;
9736
- }
9737
-
9738
- .pf-c-jump-links.pf-m-center .pf-c-jump-links__main {
9739
- align-items: center;
9740
- }
9741
-
9742
- .pf-c-jump-links.pf-m-vertical, .pf-c-jump-links.pf-m-expandable {
9743
- --pf-c-jump-links__list--PaddingTop: var(--pf-c-jump-links--m-vertical__list--PaddingTop);
9744
- --pf-c-jump-links__list--PaddingRight: var(--pf-c-jump-links--m-vertical__list--PaddingRight);
9745
- --pf-c-jump-links__list--PaddingBottom: var(--pf-c-jump-links--m-vertical__list--PaddingBottom);
9746
- --pf-c-jump-links__list--PaddingLeft: var(--pf-c-jump-links--m-vertical__list--PaddingLeft);
9747
- --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderTopWidth);
9748
- --pf-c-jump-links__list--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderLeftWidth);
9749
- --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth);
9750
- --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth);
9751
- --pf-c-jump-links__list--FlexDirection: var(--pf-c-jump-links--m-vertical__list--FlexDirection);
9752
- flex-direction: column;
9753
- }
9754
-
9755
- .pf-c-jump-links.pf-m-expandable {
9756
- --pf-c-jump-links__list--Display: none;
9757
- --pf-c-jump-links__list--Visibility: hidden;
9758
- --pf-c-jump-links__toggle--Display: block;
9759
- --pf-c-jump-links__toggle--Visibility: visible;
9760
- --pf-c-jump-links__label--Display: none;
9761
- --pf-c-jump-links__label--Visibility: hidden;
9762
- }
9763
-
9764
- .pf-c-jump-links.pf-m-non-expandable {
9765
- --pf-c-jump-links__list--Display: flex;
9766
- --pf-c-jump-links__list--Visibility: visible;
9767
- --pf-c-jump-links__toggle--Display: none;
9768
- --pf-c-jump-links__toggle--Visibility: hidden;
9769
- --pf-c-jump-links__label--Display: block;
9770
- --pf-c-jump-links__label--Visibility: visible;
9515
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-sm--content--FontSize);
9771
9516
  }
9772
9517
 
9773
- @media (min-width: 576px) {
9774
- .pf-c-jump-links.pf-m-expandable-on-sm {
9775
- --pf-c-jump-links__list--Display: none;
9776
- --pf-c-jump-links__list--Visibility: hidden;
9777
- --pf-c-jump-links__toggle--Display: block;
9778
- --pf-c-jump-links__toggle--Visibility: visible;
9779
- --pf-c-jump-links__label--Display: none;
9780
- --pf-c-jump-links__label--Visibility: hidden;
9781
- }
9518
+ .pf-c-icon__content.pf-m-md,
9519
+ .pf-c-icon__progress.pf-m-md {
9520
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-md--content--FontSize);
9521
+ }
9782
9522
 
9783
- .pf-c-jump-links.pf-m-non-expandable-on-sm {
9784
- --pf-c-jump-links__list--Display: flex;
9785
- --pf-c-jump-links__list--Visibility: visible;
9786
- --pf-c-jump-links__toggle--Display: none;
9787
- --pf-c-jump-links__toggle--Visibility: hidden;
9788
- --pf-c-jump-links__label--Display: block;
9789
- --pf-c-jump-links__label--Visibility: visible;
9790
- }
9523
+ .pf-c-icon__content.pf-m-lg,
9524
+ .pf-c-icon__progress.pf-m-lg {
9525
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-lg--content--FontSize);
9791
9526
  }
9792
- @media (min-width: 768px) {
9793
- .pf-c-jump-links.pf-m-expandable-on-md {
9794
- --pf-c-jump-links__list--Display: none;
9795
- --pf-c-jump-links__list--Visibility: hidden;
9796
- --pf-c-jump-links__toggle--Display: block;
9797
- --pf-c-jump-links__toggle--Visibility: visible;
9798
- --pf-c-jump-links__label--Display: none;
9799
- --pf-c-jump-links__label--Visibility: hidden;
9800
- }
9801
9527
 
9802
- .pf-c-jump-links.pf-m-non-expandable-on-md {
9803
- --pf-c-jump-links__list--Display: flex;
9804
- --pf-c-jump-links__list--Visibility: visible;
9805
- --pf-c-jump-links__toggle--Display: none;
9806
- --pf-c-jump-links__toggle--Visibility: hidden;
9807
- --pf-c-jump-links__label--Display: block;
9808
- --pf-c-jump-links__label--Visibility: visible;
9809
- }
9528
+ .pf-c-icon__content.pf-m-xl,
9529
+ .pf-c-icon__progress.pf-m-xl {
9530
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-xl--content--FontSize);
9810
9531
  }
9811
- @media (min-width: 992px) {
9812
- .pf-c-jump-links.pf-m-expandable-on-lg {
9813
- --pf-c-jump-links__list--Display: none;
9814
- --pf-c-jump-links__list--Visibility: hidden;
9815
- --pf-c-jump-links__toggle--Display: block;
9816
- --pf-c-jump-links__toggle--Visibility: visible;
9817
- --pf-c-jump-links__label--Display: none;
9818
- --pf-c-jump-links__label--Visibility: hidden;
9819
- }
9820
9532
 
9821
- .pf-c-jump-links.pf-m-non-expandable-on-lg {
9822
- --pf-c-jump-links__list--Display: flex;
9823
- --pf-c-jump-links__list--Visibility: visible;
9824
- --pf-c-jump-links__toggle--Display: none;
9825
- --pf-c-jump-links__toggle--Visibility: hidden;
9826
- --pf-c-jump-links__label--Display: block;
9827
- --pf-c-jump-links__label--Visibility: visible;
9828
- }
9533
+ .pf-c-icon__content {
9534
+ color: var(--pf-c-icon__content--Color);
9535
+ opacity: var(--pf-c-icon__content--Opacity, 1);
9829
9536
  }
9830
- @media (min-width: 1200px) {
9831
- .pf-c-jump-links.pf-m-expandable-on-xl {
9832
- --pf-c-jump-links__list--Display: none;
9833
- --pf-c-jump-links__list--Visibility: hidden;
9834
- --pf-c-jump-links__toggle--Display: block;
9835
- --pf-c-jump-links__toggle--Visibility: visible;
9836
- --pf-c-jump-links__label--Display: none;
9837
- --pf-c-jump-links__label--Visibility: hidden;
9838
- }
9839
9537
 
9840
- .pf-c-jump-links.pf-m-non-expandable-on-xl {
9841
- --pf-c-jump-links__list--Display: flex;
9842
- --pf-c-jump-links__list--Visibility: visible;
9843
- --pf-c-jump-links__toggle--Display: none;
9844
- --pf-c-jump-links__toggle--Visibility: hidden;
9845
- --pf-c-jump-links__label--Display: block;
9846
- --pf-c-jump-links__label--Visibility: visible;
9847
- }
9538
+ .pf-c-icon__content.pf-m-danger {
9539
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-danger--Color);
9848
9540
  }
9849
- @media (min-width: 1450px) {
9850
- .pf-c-jump-links.pf-m-expandable-on-2xl {
9851
- --pf-c-jump-links__list--Display: none;
9852
- --pf-c-jump-links__list--Visibility: hidden;
9853
- --pf-c-jump-links__toggle--Display: block;
9854
- --pf-c-jump-links__toggle--Visibility: visible;
9855
- --pf-c-jump-links__label--Display: none;
9856
- --pf-c-jump-links__label--Visibility: hidden;
9857
- }
9858
9541
 
9859
- .pf-c-jump-links.pf-m-non-expandable-on-2xl {
9860
- --pf-c-jump-links__list--Display: flex;
9861
- --pf-c-jump-links__list--Visibility: visible;
9862
- --pf-c-jump-links__toggle--Display: none;
9863
- --pf-c-jump-links__toggle--Visibility: hidden;
9864
- --pf-c-jump-links__label--Display: block;
9865
- --pf-c-jump-links__label--Visibility: visible;
9866
- }
9542
+ .pf-c-icon__content.pf-m-warning {
9543
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-warning--Color);
9867
9544
  }
9868
- .pf-c-jump-links.pf-m-expanded {
9869
- --pf-c-jump-links__list--Display: flex;
9870
- --pf-c-jump-links__list--Visibility: visible;
9871
- --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links--m-expanded__toggle--MarginBottom);
9872
- --pf-c-jump-links__toggle-icon--Rotate: var(--pf-c-jump-links--m-expanded__toggle-icon--Rotate);
9873
- --pf-c-jump-links__toggle-icon--Color: var(--pf-c-jump-links--m-expanded__toggle-icon--Color);
9545
+
9546
+ .pf-c-icon__content.pf-m-success {
9547
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-success--Color);
9874
9548
  }
9875
9549
 
9876
- .pf-c-jump-links__list {
9877
- position: relative;
9878
- display: var(--pf-c-jump-links__list--Display);
9879
- flex-direction: var(--pf-c-jump-links__list--FlexDirection);
9880
- padding-top: var(--pf-c-jump-links__list--PaddingTop);
9881
- padding-right: var(--pf-c-jump-links__list--PaddingRight);
9882
- padding-bottom: var(--pf-c-jump-links__list--PaddingBottom);
9883
- padding-left: var(--pf-c-jump-links__list--PaddingLeft);
9884
- visibility: var(--pf-c-jump-links__list--Visibility);
9550
+ .pf-c-icon__content.pf-m-info {
9551
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-info--Color);
9885
9552
  }
9886
9553
 
9887
- .pf-c-jump-links__list::before {
9554
+ .pf-c-icon__content.pf-m-default {
9555
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-default--Color);
9556
+ }
9557
+
9558
+ .pf-c-icon__progress {
9888
9559
  position: absolute;
9889
- top: 0;
9890
- right: 0;
9891
- bottom: 0;
9892
- left: 0;
9893
- pointer-events: none;
9894
- content: "";
9895
- border: solid var(--pf-c-jump-links__list--before--BorderColor);
9896
- border-width: var(--pf-c-jump-links__list--before--BorderTopWidth) var(--pf-c-jump-links__list--before--BorderRightWidth) var(--pf-c-jump-links__list--before--BorderBottomWidth) var(--pf-c-jump-links__list--before--BorderLeftWidth);
9560
+ top: calc(50% + 0.5 * var(--pf-c-icon__content--svg--VerticalAlign));
9561
+ opacity: var(--pf-c-icon__progress--Opacity, 0);
9562
+ transform: translateY(calc(-50% - 0.5 * var(--pf-c-icon__content--svg--VerticalAlign)));
9897
9563
  }
9898
9564
 
9899
- .pf-c-jump-links__list .pf-c-jump-links__list {
9900
- --pf-c-jump-links__list--PaddingTop: 0;
9901
- --pf-c-jump-links__list--PaddingBottom: 0;
9902
- --pf-c-jump-links__link--PaddingTop: var(--pf-c-jump-links__list__list__link--PaddingTop);
9903
- --pf-c-jump-links__link--PaddingBottom: var(--pf-c-jump-links__list__list__link--PaddingBottom);
9904
- --pf-c-jump-links__link--PaddingLeft: var(--pf-c-jump-links__list__list__link--PaddingLeft);
9905
- margin-top: var(--pf-c-jump-links__list__list--MarginTop);
9565
+ .pf-c-input-group {
9566
+ --pf-global--Color--100: var(--pf-global--Color--dark-100);
9567
+ --pf-global--Color--200: var(--pf-global--Color--dark-200);
9568
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
9569
+ --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
9570
+ --pf-global--link--Color: var(--pf-global--link--Color--dark);
9571
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
9572
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
9906
9573
  }
9907
9574
 
9908
- .pf-c-jump-links__link {
9909
- position: relative;
9575
+ .pf-c-input-group {
9576
+ --pf-c-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
9577
+ --pf-c-input-group--child--ZIndex: var(--pf-global--ZIndex--xs);
9578
+ --pf-c-input-group__text--FontSize: var(--pf-global--FontSize--md);
9579
+ --pf-c-input-group__text--PaddingRight: var(--pf-global--spacer--sm);
9580
+ --pf-c-input-group__text--PaddingLeft: var(--pf-global--spacer--sm);
9581
+ --pf-c-input-group__text--Color: var(--pf-global--Color--dark-200);
9582
+ --pf-c-input-group__text--BorderWidth: var(--pf-global--BorderWidth--sm);
9583
+ --pf-c-input-group__text--BorderTopColor: var(--pf-global--BorderColor--300);
9584
+ --pf-c-input-group__text--BorderRightColor: var(--pf-global--BorderColor--300);
9585
+ --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--200);
9586
+ --pf-c-input-group__text--BorderLeftColor: var(--pf-global--BorderColor--300);
9587
+ --pf-c-input-group__text--BackgroundColor: var(--pf-global--BackgroundColor--100);
9588
+ --pf-c-input-group__textarea--MinHeight: var(--pf-global--spacer--xl);
9589
+ --pf-c-input-group--c-form-control--invalid--ZIndex: var(--pf-global--ZIndex--xs);
9590
+ --pf-c-input-group--c-form-control--MarginRight: 0;
9591
+ color: var(--pf-global--Color--100);
9910
9592
  display: flex;
9911
- flex: 1;
9912
- padding-top: var(--pf-c-jump-links__link--PaddingTop);
9913
- padding-right: var(--pf-c-jump-links__link--PaddingRight);
9914
- padding-bottom: var(--pf-c-jump-links__link--PaddingBottom);
9915
- padding-left: var(--pf-c-jump-links__link--PaddingLeft);
9916
- text-decoration: none;
9917
- outline-offset: var(--pf-c-jump-links__link--OutlineOffset);
9593
+ width: 100%;
9594
+ background-color: var(--pf-c-input-group--BackgroundColor);
9918
9595
  }
9919
9596
 
9920
- .pf-c-jump-links__link:hover {
9921
- --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--hover__link-text--Color);
9597
+ .pf-c-input-group.pf-m-plain {
9598
+ --pf-c-input-group--BackgroundColor: transparent;
9922
9599
  }
9923
9600
 
9924
- .pf-c-jump-links__link:focus {
9925
- --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--focus__link-text--Color);
9601
+ .pf-c-input-group > * + * {
9602
+ margin-left: -1px;
9926
9603
  }
9927
9604
 
9928
- .pf-c-jump-links__link::before {
9929
- position: absolute;
9930
- top: 0;
9931
- right: 0;
9932
- bottom: 0;
9933
- left: 0;
9934
- pointer-events: none;
9935
- content: "";
9936
- border-color: var(--pf-c-jump-links__link--before--BorderColor);
9937
- border-style: solid;
9938
- border-width: var(--pf-c-jump-links__link--before--BorderTopWidth) var(--pf-c-jump-links__link--before--BorderRightWidth) var(--pf-c-jump-links__link--before--BorderBottomWidth) var(--pf-c-jump-links__link--before--BorderLeftWidth);
9605
+ .pf-c-input-group > :focus,
9606
+ .pf-c-input-group > :focus-within {
9607
+ z-index: var(--pf-c-input-group--child--ZIndex);
9939
9608
  }
9940
9609
 
9941
- .pf-c-jump-links__item {
9942
- --pf-c-jump-links__list--before--BorderColor: transparent;
9610
+ .pf-c-input-group .pf-c-form-control[aria-invalid=true]:not(:last-child) {
9611
+ margin-right: var(--pf-c-input-group--c-form-control--MarginRight);
9943
9612
  }
9944
9613
 
9945
- .pf-c-jump-links__item.pf-m-current > .pf-c-jump-links__link {
9946
- --pf-c-jump-links__link--before--BorderTopWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderTopWidth);
9947
- --pf-c-jump-links__link--before--BorderLeftWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderLeftWidth);
9948
- --pf-c-jump-links__link--before--BorderColor: var(--pf-c-jump-links__item--m-current__link--before--BorderColor);
9949
- --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__item--m-current__link-text--Color);
9614
+ .pf-c-input-group input:not([type=checkbox]):not([type=radio]),
9615
+ .pf-c-input-group textarea {
9616
+ flex: 2;
9617
+ min-width: 0;
9950
9618
  }
9951
9619
 
9952
- .pf-c-jump-links__link-text {
9953
- color: var(--pf-c-jump-links__link-text--Color);
9620
+ .pf-c-input-group textarea {
9621
+ min-height: var(--pf-c-input-group__textarea--MinHeight);
9954
9622
  }
9955
9623
 
9956
- .pf-c-jump-links__label {
9957
- display: var(--pf-c-jump-links__label--Display);
9958
- margin-bottom: var(--pf-c-jump-links__label--MarginBottom);
9959
- visibility: var(--pf-c-jump-links__label--Visibility);
9624
+ .pf-c-input-group__text {
9625
+ display: flex;
9626
+ align-items: center;
9627
+ padding-right: var(--pf-c-input-group__text--PaddingRight);
9628
+ padding-left: var(--pf-c-input-group__text--PaddingLeft);
9629
+ font-size: var(--pf-c-input-group__text--FontSize);
9630
+ color: var(--pf-c-input-group__text--Color);
9631
+ text-align: center;
9632
+ background-color: var(--pf-c-input-group__text--BackgroundColor);
9633
+ border: var(--pf-c-input-group__text--BorderWidth) solid;
9634
+ border-color: var(--pf-c-input-group__text--BorderTopColor) var(--pf-c-input-group__text--BorderRightColor) var(--pf-c-input-group__text--BorderBottomColor) var(--pf-c-input-group__text--BorderLeftColor);
9960
9635
  }
9961
9636
 
9962
- .pf-c-jump-links__main {
9963
- display: flex;
9964
- flex-direction: column;
9637
+ label.pf-c-input-group__text {
9638
+ cursor: pointer;
9965
9639
  }
9966
9640
 
9967
- .pf-c-jump-links__toggle {
9968
- display: var(--pf-c-jump-links__toggle--Display);
9969
- margin-top: var(--pf-c-jump-links__toggle--MarginTop);
9970
- margin-bottom: var(--pf-c-jump-links__toggle--MarginBottom);
9971
- margin-left: var(--pf-c-jump-links__toggle--MarginLeft);
9972
- visibility: var(--pf-c-jump-links__toggle--Visibility);
9641
+ .pf-c-input-group__text.pf-m-plain {
9642
+ --pf-c-input-group__text--BorderWidth: 0;
9643
+ margin-left: 0;
9644
+ }
9645
+
9646
+ :where(.pf-theme-dark) .pf-c-input-group {
9647
+ --pf-c-input-group--BackgroundColor: transparent;
9648
+ --pf-c-input-group__text--BorderTopColor: transparent;
9649
+ --pf-c-input-group__text--BorderRightColor: transparent;
9650
+ --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
9651
+ --pf-c-input-group__text--BorderLeftColor: transparent;
9652
+ --pf-c-input-group__text--BackgroundColor: var(--pf-global--palette--black-600);
9973
9653
  }
9974
9654
 
9975
- .pf-c-jump-links__toggle .pf-c-button {
9976
- display: flex;
9977
- align-items: center;
9655
+ :where(.pf-theme-dark) .pf-c-input-group > * + * {
9656
+ margin-left: 0;
9657
+ border-left: 1px solid var(--pf-global--palette--black-700);
9978
9658
  }
9979
9659
 
9980
- .pf-c-jump-links__toggle-icon {
9981
- display: inline-block;
9982
- color: var(--pf-c-jump-links__toggle-icon--Color);
9983
- transition: var(--pf-c-jump-links__toggle-icon--Transition);
9984
- transform: rotate(var(--pf-c-jump-links__toggle-icon--Rotate));
9660
+ :where(.pf-theme-dark) .pf-c-input-group__text {
9661
+ --pf-c-input-group__text--BorderTopColor: transparent;
9662
+ --pf-c-input-group__text--BorderRightColor: transparent;
9663
+ --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
9664
+ --pf-c-input-group__text--BorderLeftColor: transparent;
9985
9665
  }
9986
9666
 
9987
- .pf-c-jump-links__toggle-text {
9988
- margin-left: var(--pf-c-jump-links__toggle-text--MarginLeft);
9989
- color: var(--pf-c-jump-links__toggle-text--Color);
9667
+ :where(.pf-theme-dark) .pf-c-input-group__text.pf-m-plain {
9668
+ --pf-c-input-group__text--BackgroundColor: transparent;
9990
9669
  }
9991
9670
 
9992
9671
  .pf-c-sidebar {
@@ -10197,121 +9876,442 @@ label.pf-c-input-group__text {
10197
9876
  }
10198
9877
  }
10199
9878
  @media (min-width: 768px) {
10200
- .pf-c-sidebar__panel.pf-m-width-default-on-md {
10201
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10202
- }
10203
-
10204
- .pf-c-sidebar__panel.pf-m-width-25-on-md {
10205
- --pf-c-sidebar__panel--FlexBasis: 25%;
9879
+ .pf-c-sidebar__panel.pf-m-width-default-on-md {
9880
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9881
+ }
9882
+
9883
+ .pf-c-sidebar__panel.pf-m-width-25-on-md {
9884
+ --pf-c-sidebar__panel--FlexBasis: 25%;
9885
+ }
9886
+
9887
+ .pf-c-sidebar__panel.pf-m-width-33-on-md {
9888
+ --pf-c-sidebar__panel--FlexBasis: 33%;
9889
+ }
9890
+
9891
+ .pf-c-sidebar__panel.pf-m-width-50-on-md {
9892
+ --pf-c-sidebar__panel--FlexBasis: 50%;
9893
+ }
9894
+
9895
+ .pf-c-sidebar__panel.pf-m-width-66-on-md {
9896
+ --pf-c-sidebar__panel--FlexBasis: 66%;
9897
+ }
9898
+
9899
+ .pf-c-sidebar__panel.pf-m-width-75-on-md {
9900
+ --pf-c-sidebar__panel--FlexBasis: 75%;
9901
+ }
9902
+
9903
+ .pf-c-sidebar__panel.pf-m-width-100-on-md {
9904
+ --pf-c-sidebar__panel--FlexBasis: 100%;
9905
+ }
9906
+ }
9907
+ @media (min-width: 992px) {
9908
+ .pf-c-sidebar__panel.pf-m-width-default-on-lg {
9909
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9910
+ }
9911
+
9912
+ .pf-c-sidebar__panel.pf-m-width-25-on-lg {
9913
+ --pf-c-sidebar__panel--FlexBasis: 25%;
9914
+ }
9915
+
9916
+ .pf-c-sidebar__panel.pf-m-width-33-on-lg {
9917
+ --pf-c-sidebar__panel--FlexBasis: 33%;
9918
+ }
9919
+
9920
+ .pf-c-sidebar__panel.pf-m-width-50-on-lg {
9921
+ --pf-c-sidebar__panel--FlexBasis: 50%;
9922
+ }
9923
+
9924
+ .pf-c-sidebar__panel.pf-m-width-66-on-lg {
9925
+ --pf-c-sidebar__panel--FlexBasis: 66%;
9926
+ }
9927
+
9928
+ .pf-c-sidebar__panel.pf-m-width-75-on-lg {
9929
+ --pf-c-sidebar__panel--FlexBasis: 75%;
9930
+ }
9931
+
9932
+ .pf-c-sidebar__panel.pf-m-width-100-on-lg {
9933
+ --pf-c-sidebar__panel--FlexBasis: 100%;
9934
+ }
9935
+ }
9936
+ @media (min-width: 1200px) {
9937
+ .pf-c-sidebar__panel.pf-m-width-default-on-xl {
9938
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9939
+ }
9940
+
9941
+ .pf-c-sidebar__panel.pf-m-width-25-on-xl {
9942
+ --pf-c-sidebar__panel--FlexBasis: 25%;
9943
+ }
9944
+
9945
+ .pf-c-sidebar__panel.pf-m-width-33-on-xl {
9946
+ --pf-c-sidebar__panel--FlexBasis: 33%;
9947
+ }
9948
+
9949
+ .pf-c-sidebar__panel.pf-m-width-50-on-xl {
9950
+ --pf-c-sidebar__panel--FlexBasis: 50%;
9951
+ }
9952
+
9953
+ .pf-c-sidebar__panel.pf-m-width-66-on-xl {
9954
+ --pf-c-sidebar__panel--FlexBasis: 66%;
9955
+ }
9956
+
9957
+ .pf-c-sidebar__panel.pf-m-width-75-on-xl {
9958
+ --pf-c-sidebar__panel--FlexBasis: 75%;
9959
+ }
9960
+
9961
+ .pf-c-sidebar__panel.pf-m-width-100-on-xl {
9962
+ --pf-c-sidebar__panel--FlexBasis: 100%;
9963
+ }
9964
+ }
9965
+ @media (min-width: 1450px) {
9966
+ .pf-c-sidebar__panel.pf-m-width-default-on-2xl {
9967
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9968
+ }
9969
+
9970
+ .pf-c-sidebar__panel.pf-m-width-25-on-2xl {
9971
+ --pf-c-sidebar__panel--FlexBasis: 25%;
9972
+ }
9973
+
9974
+ .pf-c-sidebar__panel.pf-m-width-33-on-2xl {
9975
+ --pf-c-sidebar__panel--FlexBasis: 33%;
9976
+ }
9977
+
9978
+ .pf-c-sidebar__panel.pf-m-width-50-on-2xl {
9979
+ --pf-c-sidebar__panel--FlexBasis: 50%;
9980
+ }
9981
+
9982
+ .pf-c-sidebar__panel.pf-m-width-66-on-2xl {
9983
+ --pf-c-sidebar__panel--FlexBasis: 66%;
9984
+ }
9985
+
9986
+ .pf-c-sidebar__panel.pf-m-width-75-on-2xl {
9987
+ --pf-c-sidebar__panel--FlexBasis: 75%;
9988
+ }
9989
+
9990
+ .pf-c-sidebar__panel.pf-m-width-100-on-2xl {
9991
+ --pf-c-sidebar__panel--FlexBasis: 100%;
9992
+ }
9993
+ }
9994
+ .pf-c-jump-links {
9995
+ --pf-c-jump-links__list--Display: flex;
9996
+ --pf-c-jump-links__list--Visibility: visible;
9997
+ --pf-c-jump-links__list--PaddingTop: 0;
9998
+ --pf-c-jump-links__list--PaddingRight: var(--pf-global--spacer--md);
9999
+ --pf-c-jump-links__list--PaddingBottom: 0;
10000
+ --pf-c-jump-links__list--PaddingLeft: var(--pf-global--spacer--md);
10001
+ --pf-c-jump-links--m-vertical__list--PaddingTop: var(--pf-global--spacer--md);
10002
+ --pf-c-jump-links--m-vertical__list--PaddingRight: 0;
10003
+ --pf-c-jump-links--m-vertical__list--PaddingBottom: var(--pf-global--spacer--md);
10004
+ --pf-c-jump-links--m-vertical__list--PaddingLeft: 0;
10005
+ --pf-c-jump-links__list--FlexDirection: row;
10006
+ --pf-c-jump-links--m-vertical__list--FlexDirection: column;
10007
+ --pf-c-jump-links__list--before--BorderColor: var(--pf-global--BorderColor--100);
10008
+ --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-global--BorderWidth--sm);
10009
+ --pf-c-jump-links__list--before--BorderRightWidth: 0;
10010
+ --pf-c-jump-links__list--before--BorderBottomWidth: 0;
10011
+ --pf-c-jump-links__list--before--BorderLeftWidth: 0;
10012
+ --pf-c-jump-links--m-vertical__list--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
10013
+ --pf-c-jump-links--m-vertical__list--before--BorderTopWidth: 0;
10014
+ --pf-c-jump-links__list__list--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
10015
+ --pf-c-jump-links__link--PaddingTop: var(--pf-global--spacer--md);
10016
+ --pf-c-jump-links__link--PaddingRight: var(--pf-global--spacer--md);
10017
+ --pf-c-jump-links__link--PaddingBottom: var(--pf-global--spacer--md);
10018
+ --pf-c-jump-links__link--PaddingLeft: var(--pf-global--spacer--md);
10019
+ --pf-c-jump-links__list__list__link--PaddingTop: var(--pf-global--spacer--sm);
10020
+ --pf-c-jump-links__list__list__link--PaddingLeft: var(--pf-global--spacer--lg);
10021
+ --pf-c-jump-links__list__list__link--PaddingBottom: var(--pf-global--spacer--sm);
10022
+ --pf-c-jump-links__link--OutlineOffset: calc(-1 * var(--pf-global--spacer--sm));
10023
+ --pf-c-jump-links__link--before--BorderTopWidth: 0;
10024
+ --pf-c-jump-links__link--before--BorderRightWidth: 0;
10025
+ --pf-c-jump-links__link--before--BorderBottomWidth: 0;
10026
+ --pf-c-jump-links__link--before--BorderLeftWidth: 0;
10027
+ --pf-c-jump-links__link--before--BorderColor: transparent;
10028
+ --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-global--BorderWidth--lg);
10029
+ --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: 0;
10030
+ --pf-c-jump-links__item--m-current__link--before--BorderColor: var(--pf-global--primary-color--100);
10031
+ --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth: 0;
10032
+ --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth: var(--pf-global--BorderWidth--lg);
10033
+ --pf-c-jump-links__link-text--Color: var(--pf-global--Color--200);
10034
+ --pf-c-jump-links__link--hover__link-text--Color: var(--pf-global--Color--100);
10035
+ --pf-c-jump-links__link--focus__link-text--Color: var(--pf-global--Color--100);
10036
+ --pf-c-jump-links__item--m-current__link-text--Color: var(--pf-global--Color--100);
10037
+ --pf-c-jump-links__label--MarginBottom: var(--pf-global--spacer--md);
10038
+ --pf-c-jump-links__label--Display: block;
10039
+ --pf-c-jump-links__label--Visibility: visible;
10040
+ --pf-c-jump-links__toggle--MarginTop: calc(-1 * var(--pf-global--spacer--form-element));
10041
+ --pf-c-jump-links__toggle--MarginBottom--base: calc(-1 * var(--pf-global--spacer--form-element));
10042
+ --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links__toggle--MarginBottom--base);
10043
+ --pf-c-jump-links--m-expanded__toggle--MarginBottom: calc(var(--pf-c-jump-links__toggle--MarginBottom--base) + var(--pf-global--spacer--md));
10044
+ --pf-c-jump-links__toggle--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
10045
+ --pf-c-jump-links__toggle--Display: none;
10046
+ --pf-c-jump-links__toggle--Visibility: hidden;
10047
+ --pf-c-jump-links__toggle-icon--Color: currentcolor;
10048
+ --pf-c-jump-links__toggle-icon--Transition: var(--pf-global--Transition);
10049
+ --pf-c-jump-links__toggle-icon--Rotate: 0;
10050
+ --pf-c-jump-links--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
10051
+ --pf-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
10052
+ --pf-c-jump-links__toggle-text--MarginLeft: var(--pf-global--spacer--md);
10053
+ --pf-c-jump-links__toggle-text--Color: var(--pf-global--Color--100);
10054
+ display: flex;
10055
+ }
10056
+
10057
+ .pf-c-jump-links.pf-m-center {
10058
+ justify-content: center;
10059
+ }
10060
+
10061
+ .pf-c-jump-links.pf-m-center .pf-c-jump-links__main {
10062
+ align-items: center;
10063
+ }
10064
+
10065
+ .pf-c-jump-links.pf-m-vertical, .pf-c-jump-links.pf-m-expandable {
10066
+ --pf-c-jump-links__list--PaddingTop: var(--pf-c-jump-links--m-vertical__list--PaddingTop);
10067
+ --pf-c-jump-links__list--PaddingRight: var(--pf-c-jump-links--m-vertical__list--PaddingRight);
10068
+ --pf-c-jump-links__list--PaddingBottom: var(--pf-c-jump-links--m-vertical__list--PaddingBottom);
10069
+ --pf-c-jump-links__list--PaddingLeft: var(--pf-c-jump-links--m-vertical__list--PaddingLeft);
10070
+ --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderTopWidth);
10071
+ --pf-c-jump-links__list--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderLeftWidth);
10072
+ --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth);
10073
+ --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth);
10074
+ --pf-c-jump-links__list--FlexDirection: var(--pf-c-jump-links--m-vertical__list--FlexDirection);
10075
+ flex-direction: column;
10076
+ }
10077
+
10078
+ .pf-c-jump-links.pf-m-expandable {
10079
+ --pf-c-jump-links__list--Display: none;
10080
+ --pf-c-jump-links__list--Visibility: hidden;
10081
+ --pf-c-jump-links__toggle--Display: block;
10082
+ --pf-c-jump-links__toggle--Visibility: visible;
10083
+ --pf-c-jump-links__label--Display: none;
10084
+ --pf-c-jump-links__label--Visibility: hidden;
10085
+ }
10086
+
10087
+ .pf-c-jump-links.pf-m-non-expandable {
10088
+ --pf-c-jump-links__list--Display: flex;
10089
+ --pf-c-jump-links__list--Visibility: visible;
10090
+ --pf-c-jump-links__toggle--Display: none;
10091
+ --pf-c-jump-links__toggle--Visibility: hidden;
10092
+ --pf-c-jump-links__label--Display: block;
10093
+ --pf-c-jump-links__label--Visibility: visible;
10094
+ }
10095
+
10096
+ @media (min-width: 576px) {
10097
+ .pf-c-jump-links.pf-m-expandable-on-sm {
10098
+ --pf-c-jump-links__list--Display: none;
10099
+ --pf-c-jump-links__list--Visibility: hidden;
10100
+ --pf-c-jump-links__toggle--Display: block;
10101
+ --pf-c-jump-links__toggle--Visibility: visible;
10102
+ --pf-c-jump-links__label--Display: none;
10103
+ --pf-c-jump-links__label--Visibility: hidden;
10104
+ }
10105
+
10106
+ .pf-c-jump-links.pf-m-non-expandable-on-sm {
10107
+ --pf-c-jump-links__list--Display: flex;
10108
+ --pf-c-jump-links__list--Visibility: visible;
10109
+ --pf-c-jump-links__toggle--Display: none;
10110
+ --pf-c-jump-links__toggle--Visibility: hidden;
10111
+ --pf-c-jump-links__label--Display: block;
10112
+ --pf-c-jump-links__label--Visibility: visible;
10113
+ }
10114
+ }
10115
+ @media (min-width: 768px) {
10116
+ .pf-c-jump-links.pf-m-expandable-on-md {
10117
+ --pf-c-jump-links__list--Display: none;
10118
+ --pf-c-jump-links__list--Visibility: hidden;
10119
+ --pf-c-jump-links__toggle--Display: block;
10120
+ --pf-c-jump-links__toggle--Visibility: visible;
10121
+ --pf-c-jump-links__label--Display: none;
10122
+ --pf-c-jump-links__label--Visibility: hidden;
10206
10123
  }
10207
10124
 
10208
- .pf-c-sidebar__panel.pf-m-width-33-on-md {
10209
- --pf-c-sidebar__panel--FlexBasis: 33%;
10125
+ .pf-c-jump-links.pf-m-non-expandable-on-md {
10126
+ --pf-c-jump-links__list--Display: flex;
10127
+ --pf-c-jump-links__list--Visibility: visible;
10128
+ --pf-c-jump-links__toggle--Display: none;
10129
+ --pf-c-jump-links__toggle--Visibility: hidden;
10130
+ --pf-c-jump-links__label--Display: block;
10131
+ --pf-c-jump-links__label--Visibility: visible;
10210
10132
  }
10211
-
10212
- .pf-c-sidebar__panel.pf-m-width-50-on-md {
10213
- --pf-c-sidebar__panel--FlexBasis: 50%;
10133
+ }
10134
+ @media (min-width: 992px) {
10135
+ .pf-c-jump-links.pf-m-expandable-on-lg {
10136
+ --pf-c-jump-links__list--Display: none;
10137
+ --pf-c-jump-links__list--Visibility: hidden;
10138
+ --pf-c-jump-links__toggle--Display: block;
10139
+ --pf-c-jump-links__toggle--Visibility: visible;
10140
+ --pf-c-jump-links__label--Display: none;
10141
+ --pf-c-jump-links__label--Visibility: hidden;
10214
10142
  }
10215
10143
 
10216
- .pf-c-sidebar__panel.pf-m-width-66-on-md {
10217
- --pf-c-sidebar__panel--FlexBasis: 66%;
10144
+ .pf-c-jump-links.pf-m-non-expandable-on-lg {
10145
+ --pf-c-jump-links__list--Display: flex;
10146
+ --pf-c-jump-links__list--Visibility: visible;
10147
+ --pf-c-jump-links__toggle--Display: none;
10148
+ --pf-c-jump-links__toggle--Visibility: hidden;
10149
+ --pf-c-jump-links__label--Display: block;
10150
+ --pf-c-jump-links__label--Visibility: visible;
10218
10151
  }
10219
-
10220
- .pf-c-sidebar__panel.pf-m-width-75-on-md {
10221
- --pf-c-sidebar__panel--FlexBasis: 75%;
10152
+ }
10153
+ @media (min-width: 1200px) {
10154
+ .pf-c-jump-links.pf-m-expandable-on-xl {
10155
+ --pf-c-jump-links__list--Display: none;
10156
+ --pf-c-jump-links__list--Visibility: hidden;
10157
+ --pf-c-jump-links__toggle--Display: block;
10158
+ --pf-c-jump-links__toggle--Visibility: visible;
10159
+ --pf-c-jump-links__label--Display: none;
10160
+ --pf-c-jump-links__label--Visibility: hidden;
10222
10161
  }
10223
10162
 
10224
- .pf-c-sidebar__panel.pf-m-width-100-on-md {
10225
- --pf-c-sidebar__panel--FlexBasis: 100%;
10163
+ .pf-c-jump-links.pf-m-non-expandable-on-xl {
10164
+ --pf-c-jump-links__list--Display: flex;
10165
+ --pf-c-jump-links__list--Visibility: visible;
10166
+ --pf-c-jump-links__toggle--Display: none;
10167
+ --pf-c-jump-links__toggle--Visibility: hidden;
10168
+ --pf-c-jump-links__label--Display: block;
10169
+ --pf-c-jump-links__label--Visibility: visible;
10226
10170
  }
10227
10171
  }
10228
- @media (min-width: 992px) {
10229
- .pf-c-sidebar__panel.pf-m-width-default-on-lg {
10230
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10231
- }
10232
-
10233
- .pf-c-sidebar__panel.pf-m-width-25-on-lg {
10234
- --pf-c-sidebar__panel--FlexBasis: 25%;
10172
+ @media (min-width: 1450px) {
10173
+ .pf-c-jump-links.pf-m-expandable-on-2xl {
10174
+ --pf-c-jump-links__list--Display: none;
10175
+ --pf-c-jump-links__list--Visibility: hidden;
10176
+ --pf-c-jump-links__toggle--Display: block;
10177
+ --pf-c-jump-links__toggle--Visibility: visible;
10178
+ --pf-c-jump-links__label--Display: none;
10179
+ --pf-c-jump-links__label--Visibility: hidden;
10235
10180
  }
10236
10181
 
10237
- .pf-c-sidebar__panel.pf-m-width-33-on-lg {
10238
- --pf-c-sidebar__panel--FlexBasis: 33%;
10182
+ .pf-c-jump-links.pf-m-non-expandable-on-2xl {
10183
+ --pf-c-jump-links__list--Display: flex;
10184
+ --pf-c-jump-links__list--Visibility: visible;
10185
+ --pf-c-jump-links__toggle--Display: none;
10186
+ --pf-c-jump-links__toggle--Visibility: hidden;
10187
+ --pf-c-jump-links__label--Display: block;
10188
+ --pf-c-jump-links__label--Visibility: visible;
10239
10189
  }
10190
+ }
10191
+ .pf-c-jump-links.pf-m-expanded {
10192
+ --pf-c-jump-links__list--Display: flex;
10193
+ --pf-c-jump-links__list--Visibility: visible;
10194
+ --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links--m-expanded__toggle--MarginBottom);
10195
+ --pf-c-jump-links__toggle-icon--Rotate: var(--pf-c-jump-links--m-expanded__toggle-icon--Rotate);
10196
+ --pf-c-jump-links__toggle-icon--Color: var(--pf-c-jump-links--m-expanded__toggle-icon--Color);
10197
+ }
10240
10198
 
10241
- .pf-c-sidebar__panel.pf-m-width-50-on-lg {
10242
- --pf-c-sidebar__panel--FlexBasis: 50%;
10243
- }
10199
+ .pf-c-jump-links__list {
10200
+ position: relative;
10201
+ display: var(--pf-c-jump-links__list--Display);
10202
+ flex-direction: var(--pf-c-jump-links__list--FlexDirection);
10203
+ padding-top: var(--pf-c-jump-links__list--PaddingTop);
10204
+ padding-right: var(--pf-c-jump-links__list--PaddingRight);
10205
+ padding-bottom: var(--pf-c-jump-links__list--PaddingBottom);
10206
+ padding-left: var(--pf-c-jump-links__list--PaddingLeft);
10207
+ visibility: var(--pf-c-jump-links__list--Visibility);
10208
+ }
10244
10209
 
10245
- .pf-c-sidebar__panel.pf-m-width-66-on-lg {
10246
- --pf-c-sidebar__panel--FlexBasis: 66%;
10247
- }
10210
+ .pf-c-jump-links__list::before {
10211
+ position: absolute;
10212
+ top: 0;
10213
+ right: 0;
10214
+ bottom: 0;
10215
+ left: 0;
10216
+ pointer-events: none;
10217
+ content: "";
10218
+ border: solid var(--pf-c-jump-links__list--before--BorderColor);
10219
+ border-width: var(--pf-c-jump-links__list--before--BorderTopWidth) var(--pf-c-jump-links__list--before--BorderRightWidth) var(--pf-c-jump-links__list--before--BorderBottomWidth) var(--pf-c-jump-links__list--before--BorderLeftWidth);
10220
+ }
10248
10221
 
10249
- .pf-c-sidebar__panel.pf-m-width-75-on-lg {
10250
- --pf-c-sidebar__panel--FlexBasis: 75%;
10251
- }
10222
+ .pf-c-jump-links__list .pf-c-jump-links__list {
10223
+ --pf-c-jump-links__list--PaddingTop: 0;
10224
+ --pf-c-jump-links__list--PaddingBottom: 0;
10225
+ --pf-c-jump-links__link--PaddingTop: var(--pf-c-jump-links__list__list__link--PaddingTop);
10226
+ --pf-c-jump-links__link--PaddingBottom: var(--pf-c-jump-links__list__list__link--PaddingBottom);
10227
+ --pf-c-jump-links__link--PaddingLeft: var(--pf-c-jump-links__list__list__link--PaddingLeft);
10228
+ margin-top: var(--pf-c-jump-links__list__list--MarginTop);
10229
+ }
10252
10230
 
10253
- .pf-c-sidebar__panel.pf-m-width-100-on-lg {
10254
- --pf-c-sidebar__panel--FlexBasis: 100%;
10255
- }
10231
+ .pf-c-jump-links__link {
10232
+ position: relative;
10233
+ display: flex;
10234
+ flex: 1;
10235
+ padding-top: var(--pf-c-jump-links__link--PaddingTop);
10236
+ padding-right: var(--pf-c-jump-links__link--PaddingRight);
10237
+ padding-bottom: var(--pf-c-jump-links__link--PaddingBottom);
10238
+ padding-left: var(--pf-c-jump-links__link--PaddingLeft);
10239
+ text-decoration: none;
10240
+ outline-offset: var(--pf-c-jump-links__link--OutlineOffset);
10256
10241
  }
10257
- @media (min-width: 1200px) {
10258
- .pf-c-sidebar__panel.pf-m-width-default-on-xl {
10259
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10260
- }
10261
10242
 
10262
- .pf-c-sidebar__panel.pf-m-width-25-on-xl {
10263
- --pf-c-sidebar__panel--FlexBasis: 25%;
10264
- }
10243
+ .pf-c-jump-links__link:hover {
10244
+ --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--hover__link-text--Color);
10245
+ }
10265
10246
 
10266
- .pf-c-sidebar__panel.pf-m-width-33-on-xl {
10267
- --pf-c-sidebar__panel--FlexBasis: 33%;
10268
- }
10247
+ .pf-c-jump-links__link:focus {
10248
+ --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--focus__link-text--Color);
10249
+ }
10269
10250
 
10270
- .pf-c-sidebar__panel.pf-m-width-50-on-xl {
10271
- --pf-c-sidebar__panel--FlexBasis: 50%;
10272
- }
10251
+ .pf-c-jump-links__link::before {
10252
+ position: absolute;
10253
+ top: 0;
10254
+ right: 0;
10255
+ bottom: 0;
10256
+ left: 0;
10257
+ pointer-events: none;
10258
+ content: "";
10259
+ border-color: var(--pf-c-jump-links__link--before--BorderColor);
10260
+ border-style: solid;
10261
+ border-width: var(--pf-c-jump-links__link--before--BorderTopWidth) var(--pf-c-jump-links__link--before--BorderRightWidth) var(--pf-c-jump-links__link--before--BorderBottomWidth) var(--pf-c-jump-links__link--before--BorderLeftWidth);
10262
+ }
10273
10263
 
10274
- .pf-c-sidebar__panel.pf-m-width-66-on-xl {
10275
- --pf-c-sidebar__panel--FlexBasis: 66%;
10276
- }
10264
+ .pf-c-jump-links__item {
10265
+ --pf-c-jump-links__list--before--BorderColor: transparent;
10266
+ }
10277
10267
 
10278
- .pf-c-sidebar__panel.pf-m-width-75-on-xl {
10279
- --pf-c-sidebar__panel--FlexBasis: 75%;
10280
- }
10268
+ .pf-c-jump-links__item.pf-m-current > .pf-c-jump-links__link {
10269
+ --pf-c-jump-links__link--before--BorderTopWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderTopWidth);
10270
+ --pf-c-jump-links__link--before--BorderLeftWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderLeftWidth);
10271
+ --pf-c-jump-links__link--before--BorderColor: var(--pf-c-jump-links__item--m-current__link--before--BorderColor);
10272
+ --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__item--m-current__link-text--Color);
10273
+ }
10281
10274
 
10282
- .pf-c-sidebar__panel.pf-m-width-100-on-xl {
10283
- --pf-c-sidebar__panel--FlexBasis: 100%;
10284
- }
10275
+ .pf-c-jump-links__link-text {
10276
+ color: var(--pf-c-jump-links__link-text--Color);
10285
10277
  }
10286
- @media (min-width: 1450px) {
10287
- .pf-c-sidebar__panel.pf-m-width-default-on-2xl {
10288
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10289
- }
10290
10278
 
10291
- .pf-c-sidebar__panel.pf-m-width-25-on-2xl {
10292
- --pf-c-sidebar__panel--FlexBasis: 25%;
10293
- }
10279
+ .pf-c-jump-links__label {
10280
+ display: var(--pf-c-jump-links__label--Display);
10281
+ margin-bottom: var(--pf-c-jump-links__label--MarginBottom);
10282
+ visibility: var(--pf-c-jump-links__label--Visibility);
10283
+ }
10294
10284
 
10295
- .pf-c-sidebar__panel.pf-m-width-33-on-2xl {
10296
- --pf-c-sidebar__panel--FlexBasis: 33%;
10297
- }
10285
+ .pf-c-jump-links__main {
10286
+ display: flex;
10287
+ flex-direction: column;
10288
+ }
10298
10289
 
10299
- .pf-c-sidebar__panel.pf-m-width-50-on-2xl {
10300
- --pf-c-sidebar__panel--FlexBasis: 50%;
10301
- }
10290
+ .pf-c-jump-links__toggle {
10291
+ display: var(--pf-c-jump-links__toggle--Display);
10292
+ margin-top: var(--pf-c-jump-links__toggle--MarginTop);
10293
+ margin-bottom: var(--pf-c-jump-links__toggle--MarginBottom);
10294
+ margin-left: var(--pf-c-jump-links__toggle--MarginLeft);
10295
+ visibility: var(--pf-c-jump-links__toggle--Visibility);
10296
+ }
10302
10297
 
10303
- .pf-c-sidebar__panel.pf-m-width-66-on-2xl {
10304
- --pf-c-sidebar__panel--FlexBasis: 66%;
10305
- }
10298
+ .pf-c-jump-links__toggle .pf-c-button {
10299
+ display: flex;
10300
+ align-items: center;
10301
+ }
10306
10302
 
10307
- .pf-c-sidebar__panel.pf-m-width-75-on-2xl {
10308
- --pf-c-sidebar__panel--FlexBasis: 75%;
10309
- }
10303
+ .pf-c-jump-links__toggle-icon {
10304
+ display: inline-block;
10305
+ color: var(--pf-c-jump-links__toggle-icon--Color);
10306
+ transition: var(--pf-c-jump-links__toggle-icon--Transition);
10307
+ transform: rotate(var(--pf-c-jump-links__toggle-icon--Rotate));
10308
+ }
10310
10309
 
10311
- .pf-c-sidebar__panel.pf-m-width-100-on-2xl {
10312
- --pf-c-sidebar__panel--FlexBasis: 100%;
10313
- }
10310
+ .pf-c-jump-links__toggle-text {
10311
+ margin-left: var(--pf-c-jump-links__toggle-text--MarginLeft);
10312
+ color: var(--pf-c-jump-links__toggle-text--Color);
10314
10313
  }
10314
+
10315
10315
  .pf-c-label {
10316
10316
  --pf-c-label--PaddingTop: var(--pf-global--spacer--xs);
10317
10317
  --pf-c-label--PaddingRight: var(--pf-global--spacer--sm);