@patternfly/react-core 4.254.1 → 4.255.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/esm/next/components/Dropdown/Dropdown.d.ts +6 -1
  3. package/dist/esm/next/components/Dropdown/Dropdown.d.ts.map +1 -1
  4. package/dist/esm/next/components/Dropdown/Dropdown.js +4 -2
  5. package/dist/esm/next/components/Dropdown/Dropdown.js.map +1 -1
  6. package/dist/esm/next/components/Dropdown/DropdownItem.d.ts +6 -1
  7. package/dist/esm/next/components/Dropdown/DropdownItem.d.ts.map +1 -1
  8. package/dist/esm/next/components/Dropdown/DropdownItem.js +4 -2
  9. package/dist/esm/next/components/Dropdown/DropdownItem.js.map +1 -1
  10. package/dist/js/next/components/Dropdown/Dropdown.d.ts +6 -1
  11. package/dist/js/next/components/Dropdown/Dropdown.d.ts.map +1 -1
  12. package/dist/js/next/components/Dropdown/Dropdown.js +4 -2
  13. package/dist/js/next/components/Dropdown/Dropdown.js.map +1 -1
  14. package/dist/js/next/components/Dropdown/DropdownItem.d.ts +6 -1
  15. package/dist/js/next/components/Dropdown/DropdownItem.d.ts.map +1 -1
  16. package/dist/js/next/components/Dropdown/DropdownItem.js +4 -2
  17. package/dist/js/next/components/Dropdown/DropdownItem.js.map +1 -1
  18. package/dist/umd/react-core.min.css +1315 -1315
  19. package/package.json +2 -2
  20. package/src/next/components/Dropdown/Dropdown.tsx +10 -2
  21. package/src/next/components/Dropdown/DropdownItem.tsx +16 -6
package/dist/umd/react-core.min.css CHANGED
@@ -4000,86 +4000,6 @@ 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
- }
4083
4003
  @media screen and (min-width: 768px) {
4084
4004
  .pf-c-data-list:not([class*=pf-m-grid]) {
4085
4005
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
@@ -4557,449 +4477,359 @@ label.pf-c-check, .pf-c-check__label,
4557
4477
  }
4558
4478
  }
4559
4479
  .pf-c-data-list {
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);
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);
4687
4487
  }
4688
4488
 
4689
- @media screen and (min-width: 576px) {
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);
4693
- }
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);
4694
4502
  }
4503
+
4695
4504
  @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);
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);
4699
4513
  }
4700
4514
  }
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);
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);
4519
+ }
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);
4704
4524
  }
4705
4525
  }
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
- }
4726
-
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);
4732
- }
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
+ }
4733
4531
 
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);
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
+ }
4736
4536
  }
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
+ }
4737
4542
 
4738
- .pf-c-data-list.pf-m-drag-over {
4739
- overflow-anchor: none;
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
+ }
4740
4547
  }
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
+ }
4741
4553
 
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;
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
+ }
4750
4558
  }
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;
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
+ }
4757
4570
  }
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;
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
+ }
4764
4578
  }
4765
-
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);
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
+ }
4772
4586
  }
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
+ }
4773
4591
 
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
- }
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
+ }
4784
4596
 
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
- }
4597
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-align-right {
4598
+ margin-left: auto;
4599
+ }
4789
4600
 
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
- }
4601
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-no-fill {
4602
+ flex: none;
4603
+ }
4794
4604
 
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
- }
4605
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-2 {
4606
+ flex-grow: 2;
4607
+ }
4798
4608
 
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
- }
4609
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-3 {
4610
+ flex-grow: 3;
4611
+ }
4802
4612
 
4803
- .pf-c-data-list__item.pf-m-selectable:hover {
4804
- box-shadow: var(--pf-c-data-list__item--m-selectable--hover--BoxShadow);
4805
- }
4613
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-4 {
4614
+ flex-grow: 4;
4615
+ }
4806
4616
 
4807
- .pf-c-data-list__item.pf-m-selectable:focus {
4808
- box-shadow: var(--pf-c-data-list__item--m-selectable--focus--BoxShadow);
4617
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-5 {
4618
+ flex-grow: 5;
4619
+ }
4809
4620
  }
4810
-
4811
- .pf-c-data-list__item.pf-m-selectable:active {
4812
- box-shadow: var(--pf-c-data-list__item--m-selectable--active--BoxShadow);
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
+ }
4813
4626
  }
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);
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
+ }
4820
4638
  }
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);
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
+ }
4831
4646
  }
4832
-
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);
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
+ }
4836
4654
  }
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
+ }
4837
4659
 
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
- }
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
+ }
4841
4664
 
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
- }
4665
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-align-right {
4666
+ margin-left: auto;
4667
+ }
4848
4668
 
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
- }
4669
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-no-fill {
4670
+ flex: none;
4671
+ }
4856
4672
 
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
- }
4673
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-2 {
4674
+ flex-grow: 2;
4675
+ }
4860
4676
 
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
- }
4677
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-3 {
4678
+ flex-grow: 3;
4679
+ }
4868
4680
 
4869
- .pf-c-data-list__check > input {
4870
- cursor: pointer;
4871
- }
4681
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-4 {
4682
+ flex-grow: 4;
4683
+ }
4872
4684
 
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;
4685
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-5 {
4686
+ flex-grow: 5;
4687
+ }
4879
4688
  }
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;
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
+ }
4884
4694
  }
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);
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
+ }
4888
4706
  }
4889
-
4890
- .pf-c-data-list__item-draggable-button:active {
4891
- cursor: grabbing;
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
+ }
4892
4714
  }
4893
-
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;
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
+ }
4897
4722
  }
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
+ }
4898
4727
 
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
- }
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
+ }
4902
4732
 
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
- }
4733
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-align-right {
4734
+ margin-left: auto;
4735
+ }
4911
4736
 
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
- }
4737
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-no-fill {
4738
+ flex: none;
4739
+ }
4915
4740
 
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
- }
4741
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-2 {
4742
+ flex-grow: 2;
4743
+ }
4920
4744
 
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
- }
4745
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-3 {
4746
+ flex-grow: 3;
4747
+ }
4924
4748
 
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));
4930
- }
4749
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-4 {
4750
+ flex-grow: 4;
4751
+ }
4931
4752
 
4932
- .pf-c-data-list__item-content {
4933
- display: grid;
4934
- width: 100%;
4935
- grid-template-columns: auto 1fr;
4753
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-5 {
4754
+ flex-grow: 5;
4755
+ }
4936
4756
  }
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);
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
+ }
4943
4762
  }
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);
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
+ }
4949
4774
  }
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;
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
+ }
4955
4782
  }
4956
-
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);
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
+ }
4960
4790
  }
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
+ }
4961
4795
 
4962
- .pf-c-data-list__cell.pf-m-align-right {
4963
- margin-left: 0;
4964
- }
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
+ }
4965
4800
 
4966
- .pf-c-data-list__text {
4967
- display: inline-block;
4968
- }
4801
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-align-right {
4802
+ margin-left: auto;
4803
+ }
4969
4804
 
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
- }
4805
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-no-fill {
4806
+ flex: none;
4807
+ }
4979
4808
 
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
- }
4809
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-2 {
4810
+ flex-grow: 2;
4811
+ }
4985
4812
 
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
- }
4813
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-3 {
4814
+ flex-grow: 3;
4815
+ }
4989
4816
 
4990
- .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body.pf-m-no-padding {
4991
- padding: 0;
4992
- }
4817
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-4 {
4818
+ flex-grow: 4;
4819
+ }
4993
4820
 
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);
4821
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-5 {
4822
+ flex-grow: 5;
4823
+ }
4999
4824
  }
5000
-
5001
4825
  @media screen and (min-width: 768px) {
5002
- .pf-c-data-list:not([class*=pf-m-grid]) {
4826
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__expandable-content {
4827
+ max-height: initial;
4828
+ overflow-y: visible;
4829
+ }
4830
+ }
4831
+ @media screen and (min-width: 992px) {
4832
+ .pf-c-data-list.pf-m-grid-lg {
5003
4833
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
5004
4834
  --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
5005
4835
  --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
@@ -5010,64 +4840,64 @@ label.pf-c-check, .pf-c-check__label,
5010
4840
  --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
5011
4841
  }
5012
4842
  }
5013
- @media screen and (min-width: 768px) and (min-width: 1200px) {
5014
- .pf-c-data-list:not([class*=pf-m-grid]) {
4843
+ @media screen and (min-width: 992px) and (min-width: 1200px) {
4844
+ .pf-c-data-list.pf-m-grid-lg {
5015
4845
  --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
5016
4846
  --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
5017
4847
  --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
5018
4848
  --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
5019
4849
  }
5020
4850
  }
5021
- @media screen and (min-width: 768px) {
5022
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__item-content {
4851
+ @media screen and (min-width: 992px) {
4852
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__item-content {
5023
4853
  display: flex;
5024
4854
  flex-wrap: wrap;
5025
4855
  flex-grow: 1;
5026
4856
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
5027
4857
  }
5028
4858
  }
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) {
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) {
5031
4861
  margin-right: var(--pf-c-data-list__cell--MarginRight);
5032
4862
  }
5033
4863
 
5034
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell + .pf-c-data-list__cell {
4864
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell + .pf-c-data-list__cell {
5035
4865
  flex: 1;
5036
4866
  order: initial;
5037
4867
  }
5038
4868
 
5039
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-align-right {
4869
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-align-right {
5040
4870
  margin-left: auto;
5041
4871
  }
5042
4872
 
5043
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-no-fill {
4873
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-no-fill {
5044
4874
  flex: none;
5045
4875
  }
5046
4876
 
5047
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-2 {
4877
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-2 {
5048
4878
  flex-grow: 2;
5049
4879
  }
5050
4880
 
5051
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-3 {
4881
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-3 {
5052
4882
  flex-grow: 3;
5053
4883
  }
5054
4884
 
5055
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-4 {
4885
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-4 {
5056
4886
  flex-grow: 4;
5057
4887
  }
5058
4888
 
5059
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-5 {
4889
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-5 {
5060
4890
  flex-grow: 5;
5061
4891
  }
5062
4892
  }
5063
- @media screen and (min-width: 768px) {
5064
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__expandable-content {
4893
+ @media screen and (min-width: 992px) {
4894
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__expandable-content {
5065
4895
  max-height: initial;
5066
4896
  overflow-y: visible;
5067
4897
  }
5068
4898
  }
5069
- @media screen and (min-width: 0) {
5070
- .pf-c-data-list.pf-m-grid-none {
4899
+ @media screen and (min-width: 1200px) {
4900
+ .pf-c-data-list.pf-m-grid-xl {
5071
4901
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
5072
4902
  --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
5073
4903
  --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
@@ -5078,64 +4908,64 @@ label.pf-c-check, .pf-c-check__label,
5078
4908
  --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
5079
4909
  }
5080
4910
  }
5081
- @media screen and (min-width: 0) and (min-width: 1200px) {
5082
- .pf-c-data-list.pf-m-grid-none {
4911
+ @media screen and (min-width: 1200px) and (min-width: 1200px) {
4912
+ .pf-c-data-list.pf-m-grid-xl {
5083
4913
  --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
5084
4914
  --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
5085
4915
  --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
5086
4916
  --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
5087
4917
  }
5088
4918
  }
5089
- @media screen and (min-width: 0) {
5090
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__item-content {
4919
+ @media screen and (min-width: 1200px) {
4920
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__item-content {
5091
4921
  display: flex;
5092
4922
  flex-wrap: wrap;
5093
4923
  flex-grow: 1;
5094
4924
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
5095
4925
  }
5096
4926
  }
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) {
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) {
5099
4929
  margin-right: var(--pf-c-data-list__cell--MarginRight);
5100
4930
  }
5101
4931
 
5102
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell + .pf-c-data-list__cell {
4932
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell + .pf-c-data-list__cell {
5103
4933
  flex: 1;
5104
4934
  order: initial;
5105
4935
  }
5106
4936
 
5107
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-align-right {
4937
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-align-right {
5108
4938
  margin-left: auto;
5109
4939
  }
5110
4940
 
5111
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-no-fill {
4941
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-no-fill {
5112
4942
  flex: none;
5113
4943
  }
5114
4944
 
5115
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-2 {
4945
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-2 {
5116
4946
  flex-grow: 2;
5117
4947
  }
5118
4948
 
5119
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-3 {
4949
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-3 {
5120
4950
  flex-grow: 3;
5121
4951
  }
5122
4952
 
5123
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-4 {
4953
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-4 {
5124
4954
  flex-grow: 4;
5125
4955
  }
5126
4956
 
5127
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-5 {
4957
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-5 {
5128
4958
  flex-grow: 5;
5129
4959
  }
5130
4960
  }
5131
- @media screen and (min-width: 0) {
5132
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__expandable-content {
4961
+ @media screen and (min-width: 1200px) {
4962
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__expandable-content {
5133
4963
  max-height: initial;
5134
4964
  overflow-y: visible;
5135
4965
  }
5136
4966
  }
5137
- @media screen and (min-width: 576px) {
5138
- .pf-c-data-list.pf-m-grid-sm {
4967
+ @media screen and (min-width: 1450px) {
4968
+ .pf-c-data-list.pf-m-grid-2xl {
5139
4969
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
5140
4970
  --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
5141
4971
  --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
@@ -5146,334 +4976,504 @@ label.pf-c-check, .pf-c-check__label,
5146
4976
  --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
5147
4977
  }
5148
4978
  }
5149
- @media screen and (min-width: 576px) and (min-width: 1200px) {
5150
- .pf-c-data-list.pf-m-grid-sm {
4979
+ @media screen and (min-width: 1450px) and (min-width: 1200px) {
4980
+ .pf-c-data-list.pf-m-grid-2xl {
5151
4981
  --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
5152
4982
  --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
5153
4983
  --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
5154
4984
  --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
5155
4985
  }
5156
4986
  }
5157
- @media screen and (min-width: 576px) {
5158
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__item-content {
4987
+ @media screen and (min-width: 1450px) {
4988
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__item-content {
5159
4989
  display: flex;
5160
4990
  flex-wrap: wrap;
5161
4991
  flex-grow: 1;
5162
4992
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
5163
4993
  }
5164
4994
  }
5165
- @media screen and (min-width: 576px) {
5166
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
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) {
5167
4997
  margin-right: var(--pf-c-data-list__cell--MarginRight);
5168
4998
  }
5169
4999
 
5170
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell + .pf-c-data-list__cell {
5000
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell + .pf-c-data-list__cell {
5171
5001
  flex: 1;
5172
5002
  order: initial;
5173
5003
  }
5174
5004
 
5175
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-align-right {
5005
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-align-right {
5176
5006
  margin-left: auto;
5177
5007
  }
5178
5008
 
5179
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-no-fill {
5009
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-no-fill {
5180
5010
  flex: none;
5181
5011
  }
5182
5012
 
5183
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-2 {
5013
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-2 {
5184
5014
  flex-grow: 2;
5185
5015
  }
5186
5016
 
5187
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-3 {
5017
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-3 {
5188
5018
  flex-grow: 3;
5189
5019
  }
5190
5020
 
5191
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-4 {
5021
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-4 {
5192
5022
  flex-grow: 4;
5193
5023
  }
5194
5024
 
5195
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-5 {
5025
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-5 {
5196
5026
  flex-grow: 5;
5197
5027
  }
5198
5028
  }
5199
- @media screen and (min-width: 576px) {
5200
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__expandable-content {
5029
+ @media screen and (min-width: 1450px) {
5030
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__expandable-content {
5201
5031
  max-height: initial;
5202
5032
  overflow-y: visible;
5203
5033
  }
5204
5034
  }
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
- }
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);
5216
5163
  }
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);
5164
+
5165
+ @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);
5223
5169
  }
5224
5170
  }
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);
5171
+ @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);
5231
5175
  }
5232
5176
  }
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);
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);
5236
5180
  }
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
+ }
5237
5202
 
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
- }
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
+ }
5242
5209
 
5243
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-align-right {
5244
- margin-left: auto;
5245
- }
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
+ }
5213
+
5214
+ .pf-c-data-list.pf-m-drag-over {
5215
+ overflow-anchor: none;
5216
+ }
5217
+
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
+ }
5227
+
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
+ }
5234
+
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;
5240
+ }
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);
5248
+ }
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);
5259
+ }
5246
5260
 
5247
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-no-fill {
5248
- flex: none;
5249
- }
5261
+ .pf-c-data-list__item.pf-m-selectable {
5262
+ cursor: pointer;
5263
+ outline-offset: var(--pf-c-data-list__item--m-selectable--OutlineOffset);
5264
+ }
5250
5265
 
5251
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-2 {
5252
- flex-grow: 2;
5253
- }
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);
5269
+ }
5254
5270
 
5255
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-3 {
5256
- flex-grow: 3;
5257
- }
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
+ }
5258
5274
 
5259
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-4 {
5260
- flex-grow: 4;
5261
- }
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
+ }
5262
5278
 
5263
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-5 {
5264
- flex-grow: 5;
5265
- }
5279
+ .pf-c-data-list__item.pf-m-selectable:hover {
5280
+ box-shadow: var(--pf-c-data-list__item--m-selectable--hover--BoxShadow);
5266
5281
  }
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
- }
5282
+
5283
+ .pf-c-data-list__item.pf-m-selectable:focus {
5284
+ box-shadow: var(--pf-c-data-list__item--m-selectable--focus--BoxShadow);
5272
5285
  }
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
- }
5286
+
5287
+ .pf-c-data-list__item.pf-m-selectable:active {
5288
+ box-shadow: var(--pf-c-data-list__item--m-selectable--active--BoxShadow);
5284
5289
  }
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
- }
5290
+
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);
5292
5296
  }
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
- }
5297
+
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);
5300
5307
  }
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
5308
 
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
- }
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);
5312
+ }
5310
5313
 
5311
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-align-right {
5312
- margin-left: auto;
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);
5316
+ }
5314
5317
 
5315
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-no-fill {
5316
- flex: none;
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);
5323
+ }
5318
5324
 
5319
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-2 {
5320
- flex-grow: 2;
5321
- }
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
+ }
5322
5332
 
5323
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-3 {
5324
- flex-grow: 3;
5325
- }
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
+ }
5326
5336
 
5327
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-4 {
5328
- flex-grow: 4;
5329
- }
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
+ }
5330
5344
 
5331
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-5 {
5332
- flex-grow: 5;
5333
- }
5345
+ .pf-c-data-list__check > input {
5346
+ cursor: pointer;
5334
5347
  }
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
- }
5348
+
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;
5340
5355
  }
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
- }
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;
5352
5360
  }
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
- }
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);
5360
5364
  }
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
- }
5365
+
5366
+ .pf-c-data-list__item-draggable-button:active {
5367
+ cursor: grabbing;
5368
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
- }
5373
5369
 
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
- }
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;
5373
+ }
5378
5374
 
5379
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-align-right {
5380
- margin-left: auto;
5381
- }
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
+ }
5382
5378
 
5383
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-no-fill {
5384
- flex: none;
5385
- }
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
+ }
5386
5387
 
5387
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-2 {
5388
- flex-grow: 2;
5389
- }
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
+ }
5390
5391
 
5391
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-3 {
5392
- flex-grow: 3;
5393
- }
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
+ }
5394
5396
 
5395
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-4 {
5396
- flex-grow: 4;
5397
- }
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
+ }
5398
5400
 
5399
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-5 {
5400
- flex-grow: 5;
5401
- }
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));
5402
5406
  }
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
- }
5407
+
5408
+ .pf-c-data-list__item-content {
5409
+ display: grid;
5410
+ width: 100%;
5411
+ grid-template-columns: auto 1fr;
5408
5412
  }
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
- }
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);
5420
5419
  }
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
- }
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);
5428
5425
  }
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
- }
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;
5436
5431
  }
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
- }
5441
5432
 
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
- }
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);
5436
+ }
5446
5437
 
5447
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-align-right {
5448
- margin-left: auto;
5449
- }
5438
+ .pf-c-data-list__cell.pf-m-align-right {
5439
+ margin-left: 0;
5440
+ }
5450
5441
 
5451
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-no-fill {
5452
- flex: none;
5453
- }
5442
+ .pf-c-data-list__text {
5443
+ display: inline-block;
5444
+ }
5454
5445
 
5455
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-2 {
5456
- flex-grow: 2;
5457
- }
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
+ }
5458
5455
 
5459
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-3 {
5460
- flex-grow: 3;
5461
- }
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
+ }
5462
5461
 
5463
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-4 {
5464
- flex-grow: 4;
5465
- }
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
+ }
5466
5465
 
5467
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-5 {
5468
- flex-grow: 5;
5469
- }
5466
+ .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body.pf-m-no-padding {
5467
+ padding: 0;
5470
5468
  }
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
- }
5469
+
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);
5476
5475
  }
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));
@@ -9276,6 +9276,76 @@ label.pf-c-check, .pf-c-check__label,
9276
9276
  --pf-c-form__helper-text--m-success--Color: var(--pf-global--success-color--100);
9277
9277
  }
9278
9278
 
9279
+ .pf-c-hint {
9280
+ --pf-c-hint--GridRowGap: var(--pf-global--spacer--md);
9281
+ --pf-c-hint--PaddingTop: var(--pf-global--spacer--lg);
9282
+ --pf-c-hint--PaddingRight: var(--pf-global--spacer--lg);
9283
+ --pf-c-hint--PaddingBottom: var(--pf-global--spacer--lg);
9284
+ --pf-c-hint--PaddingLeft: var(--pf-global--spacer--lg);
9285
+ --pf-c-hint--BackgroundColor: var(--pf-global--palette--blue-50);
9286
+ --pf-c-hint--BorderColor: var(--pf-global--palette--blue-100);
9287
+ --pf-c-hint--BorderWidth: var(--pf-global--BorderWidth--sm);
9288
+ --pf-c-hint--BoxShadow: var(--pf-global--BoxShadow--sm);
9289
+ --pf-c-hint--Color: var(--pf-global--Color--100);
9290
+ --pf-c-hint__title--FontSize: var(--pf-global--FontSize--lg);
9291
+ --pf-c-hint__body--FontSize: var(--pf-global--FontSize--md);
9292
+ --pf-c-hint__footer--child--MarginRight: var(--pf-global--spacer--md);
9293
+ --pf-c-hint__actions--MarginLeft: var(--pf-global--spacer--2xl);
9294
+ --pf-c-hint__actions--c-dropdown--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
9295
+ display: grid;
9296
+ grid-template-columns: 1fr auto;
9297
+ grid-row-gap: var(--pf-c-hint--GridRowGap);
9298
+ padding: var(--pf-c-hint--PaddingTop) var(--pf-c-hint--PaddingRight) var(--pf-c-hint--PaddingBottom) var(--pf-c-hint--PaddingLeft);
9299
+ color: var(--pf-c-hint--Color);
9300
+ background-color: var(--pf-c-hint--BackgroundColor);
9301
+ border: var(--pf-c-hint--BorderWidth) solid var(--pf-c-hint--BorderColor);
9302
+ box-shadow: var(--pf-c-hint--BoxShadow);
9303
+ }
9304
+
9305
+ .pf-c-hint .pf-c-button.pf-m-link.pf-m-inline {
9306
+ text-align: left;
9307
+ white-space: normal;
9308
+ }
9309
+
9310
+ .pf-c-hint__actions {
9311
+ display: inline-grid;
9312
+ grid-auto-flow: column;
9313
+ margin-left: var(--pf-c-hint__actions--MarginLeft);
9314
+ text-align: right;
9315
+ grid-column: 2;
9316
+ grid-row: 1;
9317
+ }
9318
+
9319
+ .pf-c-hint__actions .pf-c-dropdown .pf-c-dropdown__toggle.pf-m-plain {
9320
+ margin-top: var(--pf-c-hint__actions--c-dropdown--MarginTop);
9321
+ }
9322
+
9323
+ .pf-c-hint__actions + .pf-c-hint__body {
9324
+ grid-column: 1;
9325
+ }
9326
+
9327
+ .pf-c-hint__title {
9328
+ font-size: var(--pf-c-hint__title--FontSize);
9329
+ }
9330
+
9331
+ .pf-c-hint__body {
9332
+ grid-column: 1/-1;
9333
+ font-size: var(--pf-c-hint__body--FontSize);
9334
+ }
9335
+
9336
+ .pf-c-hint__footer {
9337
+ grid-column: 1/-1;
9338
+ }
9339
+
9340
+ .pf-c-hint__footer > :not(:last-child) {
9341
+ margin-right: var(--pf-c-hint__footer--child--MarginRight);
9342
+ }
9343
+
9344
+ :where(.pf-theme-dark) .pf-c-hint {
9345
+ --pf-c-hint--BackgroundColor: var(--pf-global--BackgroundColor--400);
9346
+ --pf-c-hint--BorderColor: var(--pf-global--BorderColor--300);
9347
+ }
9348
+
9279
9349
  .pf-c-helper-text {
9280
9350
  --pf-c-helper-text--Gap: var(--pf-global--spacer--xs);
9281
9351
  --pf-c-helper-text--FontSize: var(--pf-global--FontSize--sm);
@@ -9351,80 +9421,10 @@ label.pf-c-check, .pf-c-check__label,
9351
9421
  color: var(--pf-c-helper-text__item-text--Color);
9352
9422
  }
9353
9423
 
9354
- :where(.pf-theme-dark) .pf-c-helper-text {
9355
- --pf-c-helper-text__item-text--m-success--Color: var(--pf-global--success-color--100);
9356
- }
9357
-
9358
- .pf-c-hint {
9359
- --pf-c-hint--GridRowGap: var(--pf-global--spacer--md);
9360
- --pf-c-hint--PaddingTop: var(--pf-global--spacer--lg);
9361
- --pf-c-hint--PaddingRight: var(--pf-global--spacer--lg);
9362
- --pf-c-hint--PaddingBottom: var(--pf-global--spacer--lg);
9363
- --pf-c-hint--PaddingLeft: var(--pf-global--spacer--lg);
9364
- --pf-c-hint--BackgroundColor: var(--pf-global--palette--blue-50);
9365
- --pf-c-hint--BorderColor: var(--pf-global--palette--blue-100);
9366
- --pf-c-hint--BorderWidth: var(--pf-global--BorderWidth--sm);
9367
- --pf-c-hint--BoxShadow: var(--pf-global--BoxShadow--sm);
9368
- --pf-c-hint--Color: var(--pf-global--Color--100);
9369
- --pf-c-hint__title--FontSize: var(--pf-global--FontSize--lg);
9370
- --pf-c-hint__body--FontSize: var(--pf-global--FontSize--md);
9371
- --pf-c-hint__footer--child--MarginRight: var(--pf-global--spacer--md);
9372
- --pf-c-hint__actions--MarginLeft: var(--pf-global--spacer--2xl);
9373
- --pf-c-hint__actions--c-dropdown--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
9374
- display: grid;
9375
- grid-template-columns: 1fr auto;
9376
- grid-row-gap: var(--pf-c-hint--GridRowGap);
9377
- padding: var(--pf-c-hint--PaddingTop) var(--pf-c-hint--PaddingRight) var(--pf-c-hint--PaddingBottom) var(--pf-c-hint--PaddingLeft);
9378
- color: var(--pf-c-hint--Color);
9379
- background-color: var(--pf-c-hint--BackgroundColor);
9380
- border: var(--pf-c-hint--BorderWidth) solid var(--pf-c-hint--BorderColor);
9381
- box-shadow: var(--pf-c-hint--BoxShadow);
9382
- }
9383
-
9384
- .pf-c-hint .pf-c-button.pf-m-link.pf-m-inline {
9385
- text-align: left;
9386
- white-space: normal;
9387
- }
9388
-
9389
- .pf-c-hint__actions {
9390
- display: inline-grid;
9391
- grid-auto-flow: column;
9392
- margin-left: var(--pf-c-hint__actions--MarginLeft);
9393
- text-align: right;
9394
- grid-column: 2;
9395
- grid-row: 1;
9396
- }
9397
-
9398
- .pf-c-hint__actions .pf-c-dropdown .pf-c-dropdown__toggle.pf-m-plain {
9399
- margin-top: var(--pf-c-hint__actions--c-dropdown--MarginTop);
9400
- }
9401
-
9402
- .pf-c-hint__actions + .pf-c-hint__body {
9403
- grid-column: 1;
9404
- }
9405
-
9406
- .pf-c-hint__title {
9407
- font-size: var(--pf-c-hint__title--FontSize);
9408
- }
9409
-
9410
- .pf-c-hint__body {
9411
- grid-column: 1/-1;
9412
- font-size: var(--pf-c-hint__body--FontSize);
9413
- }
9414
-
9415
- .pf-c-hint__footer {
9416
- grid-column: 1/-1;
9417
- }
9418
-
9419
- .pf-c-hint__footer > :not(:last-child) {
9420
- margin-right: var(--pf-c-hint__footer--child--MarginRight);
9421
- }
9422
-
9423
- :where(.pf-theme-dark) .pf-c-hint {
9424
- --pf-c-hint--BackgroundColor: var(--pf-global--BackgroundColor--400);
9425
- --pf-c-hint--BorderColor: var(--pf-global--BorderColor--300);
9426
- }
9427
-
9424
+ :where(.pf-theme-dark) .pf-c-helper-text {
9425
+ --pf-c-helper-text__item-text--m-success--Color: var(--pf-global--success-color--100);
9426
+ }
9427
+
9428
9428
  .pf-c-icon {
9429
9429
  --pf-c-icon--Width: var(--pf-global--icon--FontSize--md);
9430
9430
  --pf-c-icon--Height: var(--pf-global--icon--FontSize--md);
@@ -9525,147 +9525,468 @@ label.pf-c-check, .pf-c-check__label,
9525
9525
  --pf-c-icon__content--FontSize: var(--pf-c-icon--m-lg--content--FontSize);
9526
9526
  }
9527
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);
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;
9771
+ }
9772
+
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
+ }
9782
+
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
+ }
9531
9791
  }
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
+ }
9532
9801
 
9533
- .pf-c-icon__content {
9534
- color: var(--pf-c-icon__content--Color);
9535
- opacity: var(--pf-c-icon__content--Opacity, 1);
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
+ }
9536
9810
  }
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
+ }
9537
9820
 
9538
- .pf-c-icon__content.pf-m-danger {
9539
- --pf-c-icon__content--Color: var(--pf-c-icon__content--m-danger--Color);
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
+ }
9540
9829
  }
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
+ }
9541
9839
 
9542
- .pf-c-icon__content.pf-m-warning {
9543
- --pf-c-icon__content--Color: var(--pf-c-icon__content--m-warning--Color);
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
+ }
9544
9848
  }
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
+ }
9545
9858
 
9546
- .pf-c-icon__content.pf-m-success {
9547
- --pf-c-icon__content--Color: var(--pf-c-icon__content--m-success--Color);
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
+ }
9548
9867
  }
9549
-
9550
- .pf-c-icon__content.pf-m-info {
9551
- --pf-c-icon__content--Color: var(--pf-c-icon__content--m-info--Color);
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);
9552
9874
  }
9553
9875
 
9554
- .pf-c-icon__content.pf-m-default {
9555
- --pf-c-icon__content--Color: var(--pf-c-icon__content--m-default--Color);
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);
9556
9885
  }
9557
9886
 
9558
- .pf-c-icon__progress {
9887
+ .pf-c-jump-links__list::before {
9559
9888
  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)));
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);
9563
9897
  }
9564
9898
 
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);
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);
9573
9906
  }
9574
9907
 
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);
9908
+ .pf-c-jump-links__link {
9909
+ position: relative;
9592
9910
  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;
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);
9603
9918
  }
9604
9919
 
9605
- .pf-c-input-group > :focus,
9606
- .pf-c-input-group > :focus-within {
9607
- z-index: var(--pf-c-input-group--child--ZIndex);
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);
9608
9922
  }
9609
9923
 
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);
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);
9612
9926
  }
9613
9927
 
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;
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);
9618
9939
  }
9619
9940
 
9620
- .pf-c-input-group textarea {
9621
- min-height: var(--pf-c-input-group__textarea--MinHeight);
9941
+ .pf-c-jump-links__item {
9942
+ --pf-c-jump-links__list--before--BorderColor: transparent;
9622
9943
  }
9623
9944
 
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);
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);
9635
9950
  }
9636
9951
 
9637
- label.pf-c-input-group__text {
9638
- cursor: pointer;
9952
+ .pf-c-jump-links__link-text {
9953
+ color: var(--pf-c-jump-links__link-text--Color);
9639
9954
  }
9640
9955
 
9641
- .pf-c-input-group__text.pf-m-plain {
9642
- --pf-c-input-group__text--BorderWidth: 0;
9643
- margin-left: 0;
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);
9644
9960
  }
9645
9961
 
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);
9962
+ .pf-c-jump-links__main {
9963
+ display: flex;
9964
+ flex-direction: column;
9653
9965
  }
9654
9966
 
9655
- :where(.pf-theme-dark) .pf-c-input-group > * + * {
9656
- margin-left: 0;
9657
- border-left: 1px solid var(--pf-global--palette--black-700);
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);
9658
9973
  }
9659
9974
 
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;
9975
+ .pf-c-jump-links__toggle .pf-c-button {
9976
+ display: flex;
9977
+ align-items: center;
9665
9978
  }
9666
9979
 
9667
- :where(.pf-theme-dark) .pf-c-input-group__text.pf-m-plain {
9668
- --pf-c-input-group__text--BackgroundColor: transparent;
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));
9985
+ }
9986
+
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);
9669
9990
  }
9670
9991
 
9671
9992
  .pf-c-sidebar {
@@ -9867,451 +10188,130 @@ label.pf-c-input-group__text {
9867
10188
  --pf-c-sidebar__panel--FlexBasis: 66%;
9868
10189
  }
9869
10190
 
9870
- .pf-c-sidebar__panel.pf-m-width-75-on-sm {
9871
- --pf-c-sidebar__panel--FlexBasis: 75%;
9872
- }
9873
-
9874
- .pf-c-sidebar__panel.pf-m-width-100-on-sm {
9875
- --pf-c-sidebar__panel--FlexBasis: 100%;
9876
- }
9877
- }
9878
- @media (min-width: 768px) {
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;
10191
+ .pf-c-sidebar__panel.pf-m-width-75-on-sm {
10192
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10193
+ }
10194
+
10195
+ .pf-c-sidebar__panel.pf-m-width-100-on-sm {
10196
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10113
10197
  }
10114
10198
  }
10115
10199
  @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;
10200
+ .pf-c-sidebar__panel.pf-m-width-default-on-md {
10201
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10123
10202
  }
10124
10203
 
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;
10204
+ .pf-c-sidebar__panel.pf-m-width-25-on-md {
10205
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10132
10206
  }
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;
10207
+
10208
+ .pf-c-sidebar__panel.pf-m-width-33-on-md {
10209
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10142
10210
  }
10143
10211
 
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;
10212
+ .pf-c-sidebar__panel.pf-m-width-50-on-md {
10213
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10151
10214
  }
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;
10215
+
10216
+ .pf-c-sidebar__panel.pf-m-width-66-on-md {
10217
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10161
10218
  }
10162
10219
 
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;
10220
+ .pf-c-sidebar__panel.pf-m-width-75-on-md {
10221
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10222
+ }
10223
+
10224
+ .pf-c-sidebar__panel.pf-m-width-100-on-md {
10225
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10170
10226
  }
10171
10227
  }
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;
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);
10180
10231
  }
10181
10232
 
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;
10233
+ .pf-c-sidebar__panel.pf-m-width-25-on-lg {
10234
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10189
10235
  }
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
- }
10198
10236
 
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
- }
10237
+ .pf-c-sidebar__panel.pf-m-width-33-on-lg {
10238
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10239
+ }
10209
10240
 
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
- }
10241
+ .pf-c-sidebar__panel.pf-m-width-50-on-lg {
10242
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10243
+ }
10221
10244
 
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
- }
10245
+ .pf-c-sidebar__panel.pf-m-width-66-on-lg {
10246
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10247
+ }
10230
10248
 
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);
10241
- }
10249
+ .pf-c-sidebar__panel.pf-m-width-75-on-lg {
10250
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10251
+ }
10242
10252
 
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);
10253
+ .pf-c-sidebar__panel.pf-m-width-100-on-lg {
10254
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10255
+ }
10245
10256
  }
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
+ }
10246
10261
 
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
- }
10262
+ .pf-c-sidebar__panel.pf-m-width-25-on-xl {
10263
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10264
+ }
10250
10265
 
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
- }
10266
+ .pf-c-sidebar__panel.pf-m-width-33-on-xl {
10267
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10268
+ }
10263
10269
 
10264
- .pf-c-jump-links__item {
10265
- --pf-c-jump-links__list--before--BorderColor: transparent;
10266
- }
10270
+ .pf-c-sidebar__panel.pf-m-width-50-on-xl {
10271
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10272
+ }
10267
10273
 
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
- }
10274
+ .pf-c-sidebar__panel.pf-m-width-66-on-xl {
10275
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10276
+ }
10274
10277
 
10275
- .pf-c-jump-links__link-text {
10276
- color: var(--pf-c-jump-links__link-text--Color);
10277
- }
10278
+ .pf-c-sidebar__panel.pf-m-width-75-on-xl {
10279
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10280
+ }
10278
10281
 
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);
10282
+ .pf-c-sidebar__panel.pf-m-width-100-on-xl {
10283
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10284
+ }
10283
10285
  }
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
+ }
10284
10290
 
10285
- .pf-c-jump-links__main {
10286
- display: flex;
10287
- flex-direction: column;
10288
- }
10291
+ .pf-c-sidebar__panel.pf-m-width-25-on-2xl {
10292
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10293
+ }
10289
10294
 
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
- }
10295
+ .pf-c-sidebar__panel.pf-m-width-33-on-2xl {
10296
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10297
+ }
10297
10298
 
10298
- .pf-c-jump-links__toggle .pf-c-button {
10299
- display: flex;
10300
- align-items: center;
10301
- }
10299
+ .pf-c-sidebar__panel.pf-m-width-50-on-2xl {
10300
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10301
+ }
10302
10302
 
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
- }
10303
+ .pf-c-sidebar__panel.pf-m-width-66-on-2xl {
10304
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10305
+ }
10309
10306
 
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);
10313
- }
10307
+ .pf-c-sidebar__panel.pf-m-width-75-on-2xl {
10308
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10309
+ }
10314
10310
 
10311
+ .pf-c-sidebar__panel.pf-m-width-100-on-2xl {
10312
+ --pf-c-sidebar__panel--FlexBasis: 100%;
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);