@patternfly/react-core 4.224.10 → 4.224.11

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.
@@ -3939,86 +3939,6 @@ label.pf-c-check, .pf-c-check__label,
3939
3939
  border-top: 1px solid var(--pf-global--BorderColor--300);
3940
3940
  }
3941
3941
 
3942
- .pf-c-data-list {
3943
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
3944
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
3945
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
3946
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
3947
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
3948
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
3949
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
3950
- }
3951
-
3952
- .pf-c-data-list__item-action {
3953
- --pf-hidden-visible--visible--Visibility: visible;
3954
- --pf-hidden-visible--hidden--Display: none;
3955
- --pf-hidden-visible--hidden--Visibility: hidden;
3956
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
3957
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
3958
- display: var(--pf-hidden-visible--Display);
3959
- visibility: var(--pf-hidden-visible--Visibility);
3960
- }
3961
-
3962
- .pf-m-hidden.pf-c-data-list__item-action {
3963
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
3964
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
3965
- }
3966
-
3967
- @media screen and (min-width: 576px) {
3968
- .pf-m-hidden-on-sm.pf-c-data-list__item-action {
3969
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
3970
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
3971
- }
3972
-
3973
- .pf-m-visible-on-sm.pf-c-data-list__item-action {
3974
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
3975
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
3976
- }
3977
- }
3978
- @media screen and (min-width: 768px) {
3979
- .pf-m-hidden-on-md.pf-c-data-list__item-action {
3980
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
3981
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
3982
- }
3983
-
3984
- .pf-m-visible-on-md.pf-c-data-list__item-action {
3985
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
3986
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
3987
- }
3988
- }
3989
- @media screen and (min-width: 992px) {
3990
- .pf-m-hidden-on-lg.pf-c-data-list__item-action {
3991
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
3992
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
3993
- }
3994
-
3995
- .pf-m-visible-on-lg.pf-c-data-list__item-action {
3996
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
3997
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
3998
- }
3999
- }
4000
- @media screen and (min-width: 1200px) {
4001
- .pf-m-hidden-on-xl.pf-c-data-list__item-action {
4002
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4003
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4004
- }
4005
-
4006
- .pf-m-visible-on-xl.pf-c-data-list__item-action {
4007
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4008
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4009
- }
4010
- }
4011
- @media screen and (min-width: 1450px) {
4012
- .pf-m-hidden-on-2xl.pf-c-data-list__item-action {
4013
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4014
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4015
- }
4016
-
4017
- .pf-m-visible-on-2xl.pf-c-data-list__item-action {
4018
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4019
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4020
- }
4021
- }
4022
3942
  @media screen and (min-width: 768px) {
4023
3943
  .pf-c-data-list:not([class*=pf-m-grid]) {
4024
3944
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
@@ -4496,449 +4416,223 @@ label.pf-c-check, .pf-c-check__label,
4496
4416
  }
4497
4417
  }
4498
4418
  .pf-c-data-list {
4499
- --pf-c-data-list--FontSize: 1em;
4500
- --pf-c-data-list--LineHeight: var(--pf-global--LineHeight--md);
4501
- --pf-c-data-list--BorderTopColor: var(--pf-global--BorderColor--300);
4502
- --pf-c-data-list--BorderTopWidth: var(--pf-global--spacer--sm);
4503
- --pf-c-data-list--sm--BorderTopWidth: var(--pf-global--BorderWidth--sm);
4504
- --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);
4505
- --pf-c-data-list__item--BackgroundColor: var(--pf-global--BackgroundColor--100);
4506
- --pf-c-data-list__item--m-selected--ZIndex: var(--pf-global--ZIndex--xs);
4507
- --pf-c-data-list__item--m-expanded--before--BackgroundColor: var(--pf-global--active-color--100);
4508
- --pf-c-data-list__item--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
4509
- --pf-c-data-list__item--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4510
- --pf-c-data-list__item--m-selectable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
4511
- --pf-c-data-list__item--m-selectable--hover--ZIndex: calc(var(--pf-c-data-list__item--m-selected--ZIndex) + 1);
4512
- --pf-c-data-list__item--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4513
- --pf-c-data-list__item--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4514
- --pf-c-data-list__item--m-selectable--active--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4515
- --pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor: var(--pf-global--active-color--300);
4516
- --pf-c-data-list__item--BorderBottomColor: var(--pf-global--BorderColor--300);
4517
- --pf-c-data-list__item--BorderBottomWidth: 0.5rem;
4518
- --pf-c-data-list__item--m-selectable--hover--item--BorderTopColor: var(--pf-c-data-list__item--BorderBottomColor);
4519
- --pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth: var(--pf-c-data-list__item--BorderBottomWidth);
4520
- --pf-c-data-list__item--sm--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
4521
- --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
4522
- --pf-c-data-list__item--before--BackgroundColor: transparent;
4523
- --pf-c-data-list__item--before--Width: var(--pf-global--BorderWidth--lg);
4524
- --pf-c-data-list__item--before--Transition: var(--pf-global--Transition);
4525
- --pf-c-data-list__item--before--Top: 0;
4526
- --pf-c-data-list__item--before--sm--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
4527
- --pf-c-data-list__item-row--PaddingRight: var(--pf-global--spacer--md);
4528
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-global--spacer--md);
4529
- --pf-c-data-list__item-row--xl--PaddingRight: var(--pf-global--spacer--lg);
4530
- --pf-c-data-list__item-row--xl--PaddingLeft: var(--pf-global--spacer--lg);
4531
- --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-global--spacer--lg);
4532
- --pf-c-data-list__cell--PaddingTop: var(--pf-global--spacer--lg);
4533
- --pf-c-data-list__cell--PaddingBottom: var(--pf-global--spacer--lg);
4534
- --pf-c-data-list__cell--MarginRight: var(--pf-global--spacer--xl);
4535
- --pf-c-data-list__cell--md--PaddingBottom: 0;
4536
- --pf-c-data-list__cell--m-icon--MarginRight: var(--pf-global--spacer--md);
4537
- --pf-c-data-list__cell--cell--PaddingTop: 0;
4538
- --pf-c-data-list__cell--cell--md--PaddingTop: var(--pf-global--spacer--lg);
4539
- --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--lg);
4540
- --pf-c-data-list--cell--MinWidth: initial;
4541
- --pf-c-data-list--cell--Overflow: visible;
4542
- --pf-c-data-list--cell--TextOverflow: clip;
4543
- --pf-c-data-list--cell--WhiteSpace: normal;
4544
- --pf-c-data-list--cell--WordBreak: normal;
4545
- --pf-c-data-list--cell--m-truncate--MinWidth: 5ch;
4546
- --pf-c-data-list__toggle--MarginLeft: calc(var(--pf-global--spacer--sm) * -1);
4547
- --pf-c-data-list__toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
4548
- --pf-c-data-list__toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
4549
- --pf-c-data-list__toggle-icon--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
4550
- --pf-c-data-list__toggle-icon--Transition: .2s ease-in 0s;
4551
- --pf-c-data-list__toggle-icon--Rotate: 0;
4552
- --pf-c-data-list__item--m-expanded__toggle-icon--Rotate: 90deg;
4553
- --pf-c-data-list__item-draggable-button--PaddingLeft: var(--pf-global--spacer--md);
4554
- --pf-c-data-list__item-draggable-button--PaddingRight: var(--pf-global--spacer--md);
4555
- --pf-c-data-list__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--lg) * -1);
4556
- --pf-c-data-list__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--lg) * -1);
4557
- --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-global--spacer--lg);
4558
- --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-global--spacer--lg);
4559
- --pf-c-data-list__item-draggable-button--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
4560
- --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-global--icon--Color--light);
4561
- --pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color: var(--pf-global--disabled-color--200);
4562
- --pf-c-data-list__item-draggable-button--hover__draggable-icon--Color: var(--pf-global--icon--Color--dark);
4563
- --pf-c-data-list__item-draggable-button--focus__draggable-icon--Color: var(--pf-global--icon--Color--dark);
4564
- --pf-c-data-list__item--m-ghost-row--after--BackgroundColor: var(--pf-global--BackgroundColor--100);
4565
- --pf-c-data-list__item--m-ghost-row--after--Opacity: .6;
4566
- --pf-c-data-list__item-control--PaddingTop: var(--pf-global--spacer--lg);
4567
- --pf-c-data-list__item-control--PaddingBottom: var(--pf-global--spacer--lg);
4568
- --pf-c-data-list__item-control--MarginRight: var(--pf-global--spacer--md);
4569
- --pf-c-data-list__item-control--md--MarginRight: var(--pf-global--spacer--xl);
4570
- --pf-c-data-list__item-control--not-last-child--MarginRight: var(--pf-global--spacer--md);
4571
- --pf-c-data-list__check--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
4572
- --pf-c-data-list__check--MarginTop: -0.0625rem;
4573
- --pf-c-data-list__item-action--Display: flex;
4574
- --pf-c-data-list__item-action--PaddingTop: var(--pf-global--spacer--lg);
4575
- --pf-c-data-list__item-action--PaddingBottom: var(--pf-global--spacer--lg);
4576
- --pf-c-data-list__item-action--MarginLeft: var(--pf-global--spacer--md);
4577
- --pf-c-data-list__item-action--md--MarginLeft: var(--pf-global--spacer--xl);
4578
- --pf-c-data-list__item-action--not-last-child--MarginRight: var(--pf-global--spacer--md);
4579
- --pf-c-data-list__item-action__action--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
4580
- --pf-c-data-list__action--MarginTop: var(--pf-c-data-list__item-action__action--MarginTop);
4581
- --pf-c-data-list__item-action__action--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
4582
- --pf-c-data-list__expandable-content--BorderTopWidth: var(--pf-global--BorderWidth--sm);
4583
- --pf-c-data-list__expandable-content--BorderTopColor: var(--pf-global--BorderColor--100);
4584
- --pf-c-data-list__expandable-content--MarginRight: calc(var(--pf-c-data-list__expandable-content-body--PaddingRight) * -1);
4585
- --pf-c-data-list__expandable-content--MarginLeft: calc(var(--pf-c-data-list__expandable-content-body--PaddingLeft) * -1);
4586
- --pf-c-data-list__expandable-content--MaxHeight: 37.5rem;
4587
- --pf-c-data-list__expandable-content--before--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
4588
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-global--spacer--md);
4589
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-global--spacer--md);
4590
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-global--spacer--md);
4591
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-global--spacer--md);
4592
- --pf-c-data-list__expandable-content-body--md--PaddingTop: var(--pf-global--spacer--lg);
4593
- --pf-c-data-list__expandable-content-body--xl--PaddingRight: var(--pf-global--spacer--lg);
4594
- --pf-c-data-list__expandable-content-body--md--PaddingBottom: var(--pf-global--spacer--lg);
4595
- --pf-c-data-list__expandable-content-body--xl--PaddingLeft: var(--pf-global--spacer--lg);
4596
- --pf-c-data-list--m-compact--FontSize: var(--pf-global--FontSize--sm);
4597
- --pf-c-data-list--m-compact--LineHeight: var(--pf-global--LineHeight--sm);
4598
- --pf-c-data-list--m-compact__check--FontSize: var(--pf-global--FontSize--md);
4599
- --pf-c-data-list--m-compact__cell--PaddingTop: var(--pf-global--spacer--sm);
4600
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-global--spacer--sm);
4601
- --pf-c-data-list--m-compact__cell--md--PaddingBottom: 0;
4602
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: 0;
4603
- --pf-c-data-list--m-compact__cell-cell--md--PaddingTop: var(--pf-global--spacer--sm);
4604
- --pf-c-data-list--m-compact__cell--cell--MarginRight: var(--pf-global--spacer--md);
4605
- --pf-c-data-list--m-compact__item-control--PaddingTop: var(--pf-global--spacer--sm);
4606
- --pf-c-data-list--m-compact__item-control--PaddingBottom: var(--pf-global--spacer--sm);
4607
- --pf-c-data-list--m-compact__item-control--MarginRight: var(--pf-global--spacer--md);
4608
- --pf-c-data-list--m-compact__item-action--PaddingTop: var(--pf-global--spacer--sm);
4609
- --pf-c-data-list--m-compact__item-action--PaddingBottom: var(--pf-global--spacer--sm);
4610
- --pf-c-data-list--m-compact__item-action--MarginLeft: var(--pf-global--spacer--md);
4611
- --pf-c-data-list--m-compact__item-action__action--MarginTop: calc(var(--pf-c-data-list--m-compact__item-action--PaddingTop) * -1);
4612
- --pf-c-data-list--m-compact__item-action__action--MarginBottom: calc(var(--pf-c-data-list--m-compact__item-action--PaddingBottom) * -1);
4613
- --pf-c-data-list--m-compact__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
4614
- --pf-c-data-list--m-compact__item-content--PaddingBottom: var(--pf-global--spacer--sm);
4615
- --pf-c-data-list--m-compact__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
4616
- --pf-c-data-list--m-compact__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--sm) * -1);
4617
- --pf-c-data-list--m-compact__item-draggable-button--PaddingTop: var(--pf-global--spacer--sm);
4618
- --pf-c-data-list--m-compact__item-draggable-button--PaddingBottom: var(--pf-global--spacer--sm);
4619
- --pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--sm);
4620
- color: var(--pf-global--Color--100);
4621
- font-size: var(--pf-c-data-list--FontSize);
4622
- line-height: var(--pf-c-data-list--LineHeight);
4623
- overflow-wrap: break-word;
4624
- list-style-type: disc;
4625
- border-top: var(--pf-c-data-list--BorderTopWidth) solid var(--pf-c-data-list--BorderTopColor);
4419
+ --pf-global--Color--100: var(--pf-global--Color--dark-100);
4420
+ --pf-global--Color--200: var(--pf-global--Color--dark-200);
4421
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
4422
+ --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
4423
+ --pf-global--link--Color: var(--pf-global--link--Color--dark);
4424
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
4425
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
4626
4426
  }
4627
4427
 
4628
- @media screen and (min-width: 576px) {
4629
- .pf-c-data-list {
4630
- --pf-c-data-list--BorderTopColor: var(--pf-c-data-list--sm--BorderTopColor);
4631
- --pf-c-data-list--BorderTopWidth: var(--pf-c-data-list--sm--BorderTopWidth);
4632
- }
4428
+ .pf-c-data-list__item-action {
4429
+ --pf-hidden-visible--visible--Visibility: visible;
4430
+ --pf-hidden-visible--hidden--Display: none;
4431
+ --pf-hidden-visible--hidden--Visibility: hidden;
4432
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4433
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4434
+ display: var(--pf-hidden-visible--Display);
4435
+ visibility: var(--pf-hidden-visible--Visibility);
4436
+ }
4437
+
4438
+ .pf-m-hidden.pf-c-data-list__item-action {
4439
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4440
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4633
4441
  }
4442
+
4634
4443
  @media screen and (min-width: 576px) {
4635
- .pf-c-data-list {
4636
- --pf-c-data-list__item--BorderBottomWidth: var(--pf-c-data-list__item--sm--BorderBottomWidth);
4637
- --pf-c-data-list__item--BorderBottomColor: var(--pf-c-data-list__item--sm--BorderBottomColor);
4444
+ .pf-m-hidden-on-sm.pf-c-data-list__item-action {
4445
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4446
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4447
+ }
4448
+
4449
+ .pf-m-visible-on-sm.pf-c-data-list__item-action {
4450
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4451
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4638
4452
  }
4639
4453
  }
4640
- @media (min-width: 576px) {
4641
- .pf-c-data-list {
4642
- --pf-c-data-list__item--before--Top: var(--pf-c-data-list__item--before--sm--Top);
4454
+ @media screen and (min-width: 768px) {
4455
+ .pf-m-hidden-on-md.pf-c-data-list__item-action {
4456
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4457
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4458
+ }
4459
+
4460
+ .pf-m-visible-on-md.pf-c-data-list__item-action {
4461
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4462
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4643
4463
  }
4644
4464
  }
4645
- .pf-c-data-list.pf-m-compact {
4646
- --pf-c-data-list__check--FontSize: var(--pf-c-data-list--m-compact__check--FontSize);
4647
- --pf-c-data-list__action--MarginTop: var(--pf-c-data-list--m-compact__action--MarginTop);
4648
- --pf-c-data-list--FontSize: var(--pf-c-data-list--m-compact--FontSize);
4649
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list--m-compact__item-action--MarginLeft);
4650
- --pf-c-data-list__item-action--PaddingTop: var(--pf-c-data-list--m-compact__item-action--PaddingTop);
4651
- --pf-c-data-list__item-action--PaddingBottom: var(--pf-c-data-list--m-compact__item-action--PaddingBottom);
4652
- --pf-c-data-list__item-action__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
4653
- --pf-c-data-list__item-action__action--MarginBottom: var(--pf-c-data-list--m-compact__item-action__action--MarginBottom);
4654
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list--m-compact__item-control--MarginRight);
4655
- --pf-c-data-list__item-control--PaddingTop: var(--pf-c-data-list--m-compact__item-control--PaddingTop);
4656
- --pf-c-data-list__item-control--PaddingBottom: var(--pf-c-data-list--m-compact__item-control--PaddingBottom);
4657
- --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-c-data-list--m-compact__item-content--PaddingBottom);
4658
- --pf-c-data-list__item-draggable-button--MarginTop: var(--pf-c-data-list--m-compact__item-draggable-button--MarginTop);
4659
- --pf-c-data-list__item-draggable-button--MarginBottom: var(--pf-c-data-list--m-compact__item-draggable-button--MarginBottom);
4660
- --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingTop);
4661
- --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingBottom);
4662
- --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop);
4663
- font-size: var(--pf-c-data-list--m-compact--FontSize);
4664
- }
4465
+ @media screen and (min-width: 992px) {
4466
+ .pf-m-hidden-on-lg.pf-c-data-list__item-action {
4467
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4468
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4469
+ }
4665
4470
 
4666
- .pf-c-data-list.pf-m-compact .pf-c-data-list__cell {
4667
- --pf-c-data-list__cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--PaddingTop);
4668
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--PaddingBottom);
4669
- --pf-c-data-list__cell--MarginRight: var(--pf-c-data-list--m-compact__cell--cell--MarginRight);
4670
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--PaddingTop);
4471
+ .pf-m-visible-on-lg.pf-c-data-list__item-action {
4472
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4473
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4474
+ }
4671
4475
  }
4476
+ @media screen and (min-width: 1200px) {
4477
+ .pf-m-hidden-on-xl.pf-c-data-list__item-action {
4478
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4479
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4480
+ }
4672
4481
 
4673
- .pf-c-data-list.pf-m-compact .pf-c-data-list__check {
4674
- font-size: var(--pf-c-data-list--m-compact__check--FontSize);
4482
+ .pf-m-visible-on-xl.pf-c-data-list__item-action {
4483
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4484
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4485
+ }
4675
4486
  }
4487
+ @media screen and (min-width: 1450px) {
4488
+ .pf-m-hidden-on-2xl.pf-c-data-list__item-action {
4489
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4490
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4491
+ }
4676
4492
 
4677
- .pf-c-data-list.pf-m-drag-over {
4678
- overflow-anchor: none;
4493
+ .pf-m-visible-on-2xl.pf-c-data-list__item-action {
4494
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4495
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4496
+ }
4679
4497
  }
4680
-
4681
- .pf-c-data-list.pf-m-truncate,
4682
- .pf-c-data-list__item-row.pf-m-truncate,
4683
- .pf-c-data-list__cell.pf-m-truncate,
4684
- .pf-c-data-list__text.pf-m-truncate {
4685
- --pf-c-data-list--cell--MinWidth: var(--pf-c-data-list--cell--m-truncate--MinWidth);
4686
- --pf-c-data-list--cell--Overflow: hidden;
4687
- --pf-c-data-list--cell--TextOverflow: ellipsis;
4688
- --pf-c-data-list--cell--WhiteSpace: nowrap;
4498
+ @media screen and (min-width: 768px) {
4499
+ .pf-c-data-list:not([class*=pf-m-grid]) {
4500
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
4501
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
4502
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
4503
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
4504
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
4505
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
4506
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
4507
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
4508
+ }
4689
4509
  }
4690
-
4691
- .pf-c-data-list.pf-m-break-word,
4692
- .pf-c-data-list__item-row.pf-m-break-word,
4693
- .pf-c-data-list__cell.pf-m-break-word,
4694
- .pf-c-data-list__text.pf-m-break-word {
4695
- --pf-c-data-list--cell--WordBreak: break-word;
4510
+ @media screen and (min-width: 768px) and (min-width: 1200px) {
4511
+ .pf-c-data-list:not([class*=pf-m-grid]) {
4512
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
4513
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
4514
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
4515
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
4516
+ }
4696
4517
  }
4697
-
4698
- .pf-c-data-list.pf-m-nowrap,
4699
- .pf-c-data-list__item-row.pf-m-nowrap,
4700
- .pf-c-data-list__cell.pf-m-nowrap,
4701
- .pf-c-data-list__text.pf-m-nowrap {
4702
- --pf-c-data-list--cell--WhiteSpace: nowrap;
4518
+ @media screen and (min-width: 768px) {
4519
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__item-content {
4520
+ display: flex;
4521
+ flex-wrap: wrap;
4522
+ flex-grow: 1;
4523
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
4524
+ }
4703
4525
  }
4526
+ @media screen and (min-width: 768px) {
4527
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4528
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
4529
+ }
4704
4530
 
4705
- .pf-c-data-list__item {
4706
- position: relative;
4707
- display: flex;
4708
- flex-direction: column;
4709
- background-color: var(--pf-c-data-list__item--BackgroundColor);
4710
- border-bottom: var(--pf-c-data-list__item--BorderBottomWidth) solid var(--pf-c-data-list__item--BorderBottomColor);
4711
- }
4531
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell + .pf-c-data-list__cell {
4532
+ flex: 1;
4533
+ order: initial;
4534
+ }
4712
4535
 
4713
- .pf-c-data-list__item::before {
4714
- position: absolute;
4715
- top: var(--pf-c-data-list__item--before--Top);
4716
- bottom: 0;
4717
- left: 0;
4718
- width: var(--pf-c-data-list__item--before--Width);
4719
- content: "";
4720
- background-color: var(--pf-c-data-list__item--before--BackgroundColor);
4721
- transition: var(--pf-c-data-list__item--before--Transition);
4722
- }
4536
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-align-right {
4537
+ margin-left: auto;
4538
+ }
4723
4539
 
4724
- .pf-c-data-list__item.pf-m-selectable {
4725
- cursor: pointer;
4726
- outline-offset: var(--pf-c-data-list__item--m-selectable--OutlineOffset);
4727
- }
4540
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-no-fill {
4541
+ flex: none;
4542
+ }
4728
4543
 
4729
- .pf-c-data-list__item.pf-m-selectable:hover, .pf-c-data-list__item.pf-m-selectable:focus {
4730
- position: relative;
4731
- z-index: var(--pf-c-data-list__item--m-selectable--hover--ZIndex);
4732
- }
4544
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-2 {
4545
+ flex-grow: 2;
4546
+ }
4733
4547
 
4734
- .pf-c-data-list__item.pf-m-selectable:hover:not(.pf-m-selected):not(:last-child), .pf-c-data-list__item.pf-m-selectable:focus:not(.pf-m-selected):not(:last-child) {
4735
- --pf-c-data-list__item--BorderBottomWidth: 0;
4736
- }
4548
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-3 {
4549
+ flex-grow: 3;
4550
+ }
4737
4551
 
4738
- .pf-c-data-list__item.pf-m-selectable:hover:not(.pf-m-selected):not(:last-child) + .pf-c-data-list__item, .pf-c-data-list__item.pf-m-selectable:focus:not(.pf-m-selected):not(:last-child) + .pf-c-data-list__item {
4739
- border-top: var(--pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth) solid var(--pf-c-data-list__item--m-selectable--hover--item--BorderTopColor);
4740
- }
4552
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-4 {
4553
+ flex-grow: 4;
4554
+ }
4741
4555
 
4742
- .pf-c-data-list__item.pf-m-selectable:hover {
4743
- box-shadow: var(--pf-c-data-list__item--m-selectable--hover--BoxShadow);
4556
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-5 {
4557
+ flex-grow: 5;
4558
+ }
4744
4559
  }
4745
-
4746
- .pf-c-data-list__item.pf-m-selectable:focus {
4747
- box-shadow: var(--pf-c-data-list__item--m-selectable--focus--BoxShadow);
4560
+ @media screen and (min-width: 768px) {
4561
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__expandable-content {
4562
+ max-height: initial;
4563
+ overflow-y: visible;
4564
+ }
4748
4565
  }
4749
-
4750
- .pf-c-data-list__item.pf-m-selectable:active {
4751
- box-shadow: var(--pf-c-data-list__item--m-selectable--active--BoxShadow);
4566
+ @media screen and (min-width: 0) {
4567
+ .pf-c-data-list.pf-m-grid-none {
4568
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
4569
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
4570
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
4571
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
4572
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
4573
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
4574
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
4575
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
4576
+ }
4752
4577
  }
4753
-
4754
- .pf-c-data-list__item.pf-m-selected {
4755
- --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-selected--before--BackgroundColor);
4756
- position: relative;
4757
- z-index: var(--pf-c-data-list__item--m-selected--ZIndex);
4758
- box-shadow: var(--pf-c-data-list__item--m-selected--BoxShadow);
4578
+ @media screen and (min-width: 0) and (min-width: 1200px) {
4579
+ .pf-c-data-list.pf-m-grid-none {
4580
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
4581
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
4582
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
4583
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
4584
+ }
4759
4585
  }
4760
-
4761
- .pf-c-data-list__item.pf-m-ghost-row::after {
4762
- position: absolute;
4763
- top: 0;
4764
- right: 0;
4765
- bottom: 0;
4766
- left: 0;
4767
- content: "";
4768
- background-color: var(--pf-c-data-list__item--m-ghost-row--after--BackgroundColor);
4769
- opacity: var(--pf-c-data-list__item--m-ghost-row--after--Opacity);
4586
+ @media screen and (min-width: 0) {
4587
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__item-content {
4588
+ display: flex;
4589
+ flex-wrap: wrap;
4590
+ flex-grow: 1;
4591
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
4592
+ }
4770
4593
  }
4594
+ @media screen and (min-width: 0) {
4595
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4596
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
4597
+ }
4771
4598
 
4772
- .pf-c-data-list__item.pf-m-expanded {
4773
- --pf-c-data-list__toggle-icon--Rotate: var(--pf-c-data-list__item--m-expanded__toggle-icon--Rotate);
4774
- --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--before--BackgroundColor);
4775
- }
4599
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell + .pf-c-data-list__cell {
4600
+ flex: 1;
4601
+ order: initial;
4602
+ }
4776
4603
 
4777
- .pf-c-data-list__item.pf-m-expanded.pf-m-selectable:not(.pf-m-selected) {
4778
- --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor);
4779
- }
4604
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-align-right {
4605
+ margin-left: auto;
4606
+ }
4780
4607
 
4781
- .pf-c-data-list__item-row {
4782
- display: flex;
4783
- flex-wrap: nowrap;
4784
- padding-right: var(--pf-c-data-list__item-row--PaddingRight);
4785
- padding-left: var(--pf-c-data-list__item-row--PaddingLeft);
4786
- }
4608
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-no-fill {
4609
+ flex: none;
4610
+ }
4787
4611
 
4788
- .pf-c-data-list__item-control {
4789
- display: flex;
4790
- flex-wrap: nowrap;
4791
- padding-top: var(--pf-c-data-list__item-control--PaddingTop);
4792
- padding-bottom: var(--pf-c-data-list__item-control--PaddingBottom);
4793
- margin-right: var(--pf-c-data-list__item-control--MarginRight);
4794
- }
4612
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-2 {
4613
+ flex-grow: 2;
4614
+ }
4795
4615
 
4796
- .pf-c-data-list__item-control > *:not(:last-child) {
4797
- margin-right: var(--pf-c-data-list__item-control--not-last-child--MarginRight);
4798
- }
4616
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-3 {
4617
+ flex-grow: 3;
4618
+ }
4799
4619
 
4800
- .pf-c-data-list__check {
4801
- display: flex;
4802
- align-items: center;
4803
- align-self: flex-start;
4804
- height: var(--pf-c-data-list__check--Height);
4805
- margin-top: var(--pf-c-data-list__check--MarginTop);
4806
- }
4807
-
4808
- .pf-c-data-list__check > input {
4809
- cursor: pointer;
4810
- }
4811
-
4812
- .pf-c-data-list__item-draggable-button {
4813
- display: flex;
4814
- flex-direction: column;
4815
- padding: var(--pf-c-data-list__item-draggable-button--PaddingTop) var(--pf-c-data-list__item-draggable-button--PaddingRight) var(--pf-c-data-list__item-draggable-button--PaddingBottom) var(--pf-c-data-list__item-draggable-button--PaddingLeft);
4816
- margin: var(--pf-c-data-list__item-draggable-button--MarginTop) 0 var(--pf-c-data-list__item-draggable-button--MarginBottom) var(--pf-c-data-list__item-draggable-button--MarginLeft);
4817
- border: 0;
4818
- }
4819
-
4820
- .pf-c-data-list__item-draggable-button:hover {
4821
- --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--hover__draggable-icon--Color);
4822
- cursor: grab;
4823
- }
4824
-
4825
- .pf-c-data-list__item-draggable-button:focus {
4826
- --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--focus__draggable-icon--Color);
4827
- }
4828
-
4829
- .pf-c-data-list__item-draggable-button:active {
4830
- cursor: grabbing;
4831
- }
4832
-
4833
- .pf-c-data-list__item-draggable-button.pf-m-disabled {
4834
- --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color);
4835
- pointer-events: none;
4836
- }
4837
-
4838
- .pf-c-data-list__item-draggable-button .pf-c-data-list__item-draggable-icon {
4839
- color: var(--pf-c-data-list__item-draggable-button-icon--Color);
4840
- }
4841
-
4842
- .pf-c-data-list__item-action {
4843
- --pf-hidden-visible--visible--Display: var(--pf-c-data-list__item-action--Display);
4844
- align-items: flex-start;
4845
- align-content: flex-start;
4846
- padding-top: var(--pf-c-data-list__item-action--PaddingTop);
4847
- padding-bottom: var(--pf-c-data-list__item-action--PaddingBottom);
4848
- margin-left: var(--pf-c-data-list__item-action--MarginLeft);
4849
- }
4850
-
4851
- .pf-c-data-list__item-action > *:not(:last-child) {
4852
- margin-right: var(--pf-c-data-list__item-action--not-last-child--MarginRight);
4853
- }
4854
-
4855
- .pf-c-data-list__item-action .pf-c-data-list__action {
4856
- margin-top: var(--pf-c-data-list__action--MarginTop);
4857
- margin-bottom: var(--pf-c-data-list__item-action__action--MarginBottom);
4858
- }
4859
-
4860
- .pf-c-data-list__toggle {
4861
- margin: var(--pf-c-data-list__toggle--MarginTop) 0 var(--pf-c-data-list__toggle--MarginBottom) var(--pf-c-data-list__toggle--MarginLeft);
4862
- }
4863
-
4864
- .pf-c-data-list__toggle-icon {
4865
- height: var(--pf-c-data-list__toggle-icon--Height);
4866
- pointer-events: none;
4867
- transition: var(--pf-c-data-list__toggle-icon--Transition);
4868
- transform: rotate(var(--pf-c-data-list__toggle-icon--Rotate));
4869
- }
4870
-
4871
- .pf-c-data-list__item-content {
4872
- display: grid;
4873
- width: 100%;
4874
- grid-template-columns: auto 1fr;
4875
- }
4876
-
4877
- .pf-c-data-list__cell {
4878
- flex: 1;
4879
- grid-column: 1/-1;
4880
- padding-top: var(--pf-c-data-list__cell--PaddingTop);
4881
- padding-bottom: var(--pf-c-data-list__cell--PaddingBottom);
4882
- }
4883
-
4884
- .pf-c-data-list__cell + .pf-c-data-list__cell {
4885
- flex: 1 0 100%;
4886
- order: 1;
4887
- padding-top: var(--pf-c-data-list__cell--cell--PaddingTop);
4888
- }
4889
-
4890
- .pf-c-data-list__cell.pf-m-icon {
4891
- flex-grow: 0;
4892
- margin-right: var(--pf-c-data-list__cell--m-icon--MarginRight);
4893
- grid-column: 1/2;
4894
- }
4895
-
4896
- .pf-c-data-list__cell.pf-m-icon + .pf-c-data-list__cell {
4897
- grid-column: 2/3;
4898
- padding-top: var(--pf-c-data-list__cell--m-icon--cell--PaddingTop);
4899
- }
4900
-
4901
- .pf-c-data-list__cell.pf-m-align-right {
4902
- margin-left: 0;
4903
- }
4904
-
4905
- .pf-c-data-list__text {
4906
- display: inline-block;
4907
- }
4908
-
4909
- .pf-c-data-list__text,
4910
- .pf-c-data-list__cell {
4911
- min-width: var(--pf-c-data-list--cell--MinWidth);
4912
- max-width: 100%;
4913
- overflow: var(--pf-c-data-list--cell--Overflow);
4914
- text-overflow: var(--pf-c-data-list--cell--TextOverflow);
4915
- word-break: var(--pf-c-data-list--cell--WordBreak);
4916
- white-space: var(--pf-c-data-list--cell--WhiteSpace);
4917
- }
4918
-
4919
- .pf-c-data-list__expandable-content {
4920
- max-height: var(--pf-c-data-list__expandable-content--MaxHeight);
4921
- overflow-y: auto;
4922
- border-top: var(--pf-c-data-list__expandable-content--BorderTopWidth) solid var(--pf-c-data-list__expandable-content--BorderTopColor);
4923
- }
4924
-
4925
- .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body {
4926
- padding: var(--pf-c-data-list__expandable-content-body--PaddingTop) var(--pf-c-data-list__expandable-content-body--PaddingRight) var(--pf-c-data-list__expandable-content-body--PaddingBottom) var(--pf-c-data-list__expandable-content-body--PaddingLeft);
4927
- }
4620
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-4 {
4621
+ flex-grow: 4;
4622
+ }
4928
4623
 
4929
- .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body.pf-m-no-padding {
4930
- padding: 0;
4624
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-5 {
4625
+ flex-grow: 5;
4626
+ }
4931
4627
  }
4932
-
4933
- :where(.pf-theme-dark) .pf-c-data-list {
4934
- --pf-c-data-list--BorderTopColor: var(--pf-global--BorderColor--100);
4935
- --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);
4936
- --pf-c-data-list__item--BorderBottomColor: var(--pf-global--BorderColor--100);
4937
- --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
4628
+ @media screen and (min-width: 0) {
4629
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__expandable-content {
4630
+ max-height: initial;
4631
+ overflow-y: visible;
4632
+ }
4938
4633
  }
4939
-
4940
- @media screen and (min-width: 768px) {
4941
- .pf-c-data-list:not([class*=pf-m-grid]) {
4634
+ @media screen and (min-width: 576px) {
4635
+ .pf-c-data-list.pf-m-grid-sm {
4942
4636
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
4943
4637
  --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
4944
4638
  --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
@@ -4949,64 +4643,64 @@ label.pf-c-check, .pf-c-check__label,
4949
4643
  --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
4950
4644
  }
4951
4645
  }
4952
- @media screen and (min-width: 768px) and (min-width: 1200px) {
4953
- .pf-c-data-list:not([class*=pf-m-grid]) {
4646
+ @media screen and (min-width: 576px) and (min-width: 1200px) {
4647
+ .pf-c-data-list.pf-m-grid-sm {
4954
4648
  --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
4955
4649
  --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
4956
4650
  --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
4957
4651
  --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
4958
4652
  }
4959
4653
  }
4960
- @media screen and (min-width: 768px) {
4961
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__item-content {
4654
+ @media screen and (min-width: 576px) {
4655
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__item-content {
4962
4656
  display: flex;
4963
4657
  flex-wrap: wrap;
4964
4658
  flex-grow: 1;
4965
4659
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
4966
4660
  }
4967
4661
  }
4968
- @media screen and (min-width: 768px) {
4969
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4662
+ @media screen and (min-width: 576px) {
4663
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4970
4664
  margin-right: var(--pf-c-data-list__cell--MarginRight);
4971
4665
  }
4972
4666
 
4973
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell + .pf-c-data-list__cell {
4667
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell + .pf-c-data-list__cell {
4974
4668
  flex: 1;
4975
4669
  order: initial;
4976
4670
  }
4977
4671
 
4978
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-align-right {
4672
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-align-right {
4979
4673
  margin-left: auto;
4980
4674
  }
4981
4675
 
4982
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-no-fill {
4676
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-no-fill {
4983
4677
  flex: none;
4984
4678
  }
4985
4679
 
4986
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-2 {
4680
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-2 {
4987
4681
  flex-grow: 2;
4988
4682
  }
4989
4683
 
4990
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-3 {
4684
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-3 {
4991
4685
  flex-grow: 3;
4992
4686
  }
4993
4687
 
4994
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-4 {
4688
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-4 {
4995
4689
  flex-grow: 4;
4996
4690
  }
4997
4691
 
4998
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-5 {
4692
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-5 {
4999
4693
  flex-grow: 5;
5000
4694
  }
5001
4695
  }
5002
- @media screen and (min-width: 768px) {
5003
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__expandable-content {
4696
+ @media screen and (min-width: 576px) {
4697
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__expandable-content {
5004
4698
  max-height: initial;
5005
4699
  overflow-y: visible;
5006
4700
  }
5007
4701
  }
5008
- @media screen and (min-width: 0) {
5009
- .pf-c-data-list.pf-m-grid-none {
4702
+ @media screen and (min-width: 768px) {
4703
+ .pf-c-data-list.pf-m-grid-md {
5010
4704
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
5011
4705
  --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
5012
4706
  --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
@@ -5017,64 +4711,64 @@ label.pf-c-check, .pf-c-check__label,
5017
4711
  --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
5018
4712
  }
5019
4713
  }
5020
- @media screen and (min-width: 0) and (min-width: 1200px) {
5021
- .pf-c-data-list.pf-m-grid-none {
4714
+ @media screen and (min-width: 768px) and (min-width: 1200px) {
4715
+ .pf-c-data-list.pf-m-grid-md {
5022
4716
  --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
5023
4717
  --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
5024
4718
  --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
5025
4719
  --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
5026
4720
  }
5027
4721
  }
5028
- @media screen and (min-width: 0) {
5029
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__item-content {
4722
+ @media screen and (min-width: 768px) {
4723
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__item-content {
5030
4724
  display: flex;
5031
4725
  flex-wrap: wrap;
5032
4726
  flex-grow: 1;
5033
4727
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
5034
4728
  }
5035
4729
  }
5036
- @media screen and (min-width: 0) {
5037
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4730
+ @media screen and (min-width: 768px) {
4731
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5038
4732
  margin-right: var(--pf-c-data-list__cell--MarginRight);
5039
4733
  }
5040
4734
 
5041
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell + .pf-c-data-list__cell {
4735
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell + .pf-c-data-list__cell {
5042
4736
  flex: 1;
5043
4737
  order: initial;
5044
4738
  }
5045
4739
 
5046
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-align-right {
4740
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-align-right {
5047
4741
  margin-left: auto;
5048
4742
  }
5049
4743
 
5050
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-no-fill {
4744
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-no-fill {
5051
4745
  flex: none;
5052
4746
  }
5053
4747
 
5054
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-2 {
4748
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-2 {
5055
4749
  flex-grow: 2;
5056
4750
  }
5057
4751
 
5058
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-3 {
4752
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-3 {
5059
4753
  flex-grow: 3;
5060
4754
  }
5061
4755
 
5062
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-4 {
4756
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-4 {
5063
4757
  flex-grow: 4;
5064
4758
  }
5065
4759
 
5066
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-5 {
4760
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-5 {
5067
4761
  flex-grow: 5;
5068
4762
  }
5069
4763
  }
5070
- @media screen and (min-width: 0) {
5071
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__expandable-content {
4764
+ @media screen and (min-width: 768px) {
4765
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__expandable-content {
5072
4766
  max-height: initial;
5073
4767
  overflow-y: visible;
5074
4768
  }
5075
4769
  }
5076
- @media screen and (min-width: 576px) {
5077
- .pf-c-data-list.pf-m-grid-sm {
4770
+ @media screen and (min-width: 992px) {
4771
+ .pf-c-data-list.pf-m-grid-lg {
5078
4772
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
5079
4773
  --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
5080
4774
  --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
@@ -5085,64 +4779,64 @@ label.pf-c-check, .pf-c-check__label,
5085
4779
  --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
5086
4780
  }
5087
4781
  }
5088
- @media screen and (min-width: 576px) and (min-width: 1200px) {
5089
- .pf-c-data-list.pf-m-grid-sm {
4782
+ @media screen and (min-width: 992px) and (min-width: 1200px) {
4783
+ .pf-c-data-list.pf-m-grid-lg {
5090
4784
  --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
5091
4785
  --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
5092
4786
  --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
5093
4787
  --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
5094
4788
  }
5095
4789
  }
5096
- @media screen and (min-width: 576px) {
5097
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__item-content {
4790
+ @media screen and (min-width: 992px) {
4791
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__item-content {
5098
4792
  display: flex;
5099
4793
  flex-wrap: wrap;
5100
4794
  flex-grow: 1;
5101
4795
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
5102
4796
  }
5103
4797
  }
5104
- @media screen and (min-width: 576px) {
5105
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4798
+ @media screen and (min-width: 992px) {
4799
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5106
4800
  margin-right: var(--pf-c-data-list__cell--MarginRight);
5107
4801
  }
5108
4802
 
5109
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell + .pf-c-data-list__cell {
4803
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell + .pf-c-data-list__cell {
5110
4804
  flex: 1;
5111
4805
  order: initial;
5112
4806
  }
5113
4807
 
5114
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-align-right {
4808
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-align-right {
5115
4809
  margin-left: auto;
5116
4810
  }
5117
4811
 
5118
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-no-fill {
4812
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-no-fill {
5119
4813
  flex: none;
5120
4814
  }
5121
4815
 
5122
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-2 {
4816
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-2 {
5123
4817
  flex-grow: 2;
5124
4818
  }
5125
4819
 
5126
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-3 {
4820
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-3 {
5127
4821
  flex-grow: 3;
5128
4822
  }
5129
4823
 
5130
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-4 {
4824
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-4 {
5131
4825
  flex-grow: 4;
5132
4826
  }
5133
4827
 
5134
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-5 {
4828
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-5 {
5135
4829
  flex-grow: 5;
5136
4830
  }
5137
4831
  }
5138
- @media screen and (min-width: 576px) {
5139
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__expandable-content {
4832
+ @media screen and (min-width: 992px) {
4833
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__expandable-content {
5140
4834
  max-height: initial;
5141
4835
  overflow-y: visible;
5142
4836
  }
5143
4837
  }
5144
- @media screen and (min-width: 768px) {
5145
- .pf-c-data-list.pf-m-grid-md {
4838
+ @media screen and (min-width: 1200px) {
4839
+ .pf-c-data-list.pf-m-grid-xl {
5146
4840
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
5147
4841
  --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
5148
4842
  --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
@@ -5153,266 +4847,572 @@ label.pf-c-check, .pf-c-check__label,
5153
4847
  --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
5154
4848
  }
5155
4849
  }
5156
- @media screen and (min-width: 768px) and (min-width: 1200px) {
5157
- .pf-c-data-list.pf-m-grid-md {
4850
+ @media screen and (min-width: 1200px) and (min-width: 1200px) {
4851
+ .pf-c-data-list.pf-m-grid-xl {
5158
4852
  --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
5159
4853
  --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
5160
4854
  --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
5161
4855
  --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
5162
4856
  }
5163
4857
  }
5164
- @media screen and (min-width: 768px) {
5165
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__item-content {
4858
+ @media screen and (min-width: 1200px) {
4859
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__item-content {
5166
4860
  display: flex;
5167
4861
  flex-wrap: wrap;
5168
4862
  flex-grow: 1;
5169
4863
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
5170
4864
  }
5171
4865
  }
5172
- @media screen and (min-width: 768px) {
5173
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4866
+ @media screen and (min-width: 1200px) {
4867
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5174
4868
  margin-right: var(--pf-c-data-list__cell--MarginRight);
5175
4869
  }
5176
4870
 
5177
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell + .pf-c-data-list__cell {
4871
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell + .pf-c-data-list__cell {
5178
4872
  flex: 1;
5179
4873
  order: initial;
5180
4874
  }
5181
4875
 
5182
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-align-right {
4876
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-align-right {
5183
4877
  margin-left: auto;
5184
4878
  }
5185
4879
 
5186
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-no-fill {
4880
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-no-fill {
5187
4881
  flex: none;
5188
4882
  }
5189
4883
 
5190
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-2 {
4884
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-2 {
5191
4885
  flex-grow: 2;
5192
4886
  }
5193
4887
 
5194
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-3 {
4888
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-3 {
5195
4889
  flex-grow: 3;
5196
4890
  }
5197
4891
 
5198
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-4 {
4892
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-4 {
5199
4893
  flex-grow: 4;
5200
4894
  }
5201
4895
 
5202
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-5 {
4896
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-5 {
5203
4897
  flex-grow: 5;
5204
4898
  }
5205
4899
  }
5206
- @media screen and (min-width: 768px) {
5207
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__expandable-content {
4900
+ @media screen and (min-width: 1200px) {
4901
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__expandable-content {
4902
+ max-height: initial;
4903
+ overflow-y: visible;
4904
+ }
4905
+ }
4906
+ @media screen and (min-width: 1450px) {
4907
+ .pf-c-data-list.pf-m-grid-2xl {
4908
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
4909
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
4910
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
4911
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
4912
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
4913
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
4914
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
4915
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
4916
+ }
4917
+ }
4918
+ @media screen and (min-width: 1450px) and (min-width: 1200px) {
4919
+ .pf-c-data-list.pf-m-grid-2xl {
4920
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
4921
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
4922
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
4923
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
4924
+ }
4925
+ }
4926
+ @media screen and (min-width: 1450px) {
4927
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__item-content {
4928
+ display: flex;
4929
+ flex-wrap: wrap;
4930
+ flex-grow: 1;
4931
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
4932
+ }
4933
+ }
4934
+ @media screen and (min-width: 1450px) {
4935
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4936
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
4937
+ }
4938
+
4939
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell + .pf-c-data-list__cell {
4940
+ flex: 1;
4941
+ order: initial;
4942
+ }
4943
+
4944
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-align-right {
4945
+ margin-left: auto;
4946
+ }
4947
+
4948
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-no-fill {
4949
+ flex: none;
4950
+ }
4951
+
4952
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-2 {
4953
+ flex-grow: 2;
4954
+ }
4955
+
4956
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-3 {
4957
+ flex-grow: 3;
4958
+ }
4959
+
4960
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-4 {
4961
+ flex-grow: 4;
4962
+ }
4963
+
4964
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-5 {
4965
+ flex-grow: 5;
4966
+ }
4967
+ }
4968
+ @media screen and (min-width: 1450px) {
4969
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__expandable-content {
5208
4970
  max-height: initial;
5209
4971
  overflow-y: visible;
5210
4972
  }
5211
4973
  }
5212
- @media screen and (min-width: 992px) {
5213
- .pf-c-data-list.pf-m-grid-lg {
5214
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
5215
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
5216
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
5217
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
5218
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
5219
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
5220
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
5221
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
5222
- }
4974
+ .pf-c-data-list {
4975
+ --pf-c-data-list--FontSize: 1em;
4976
+ --pf-c-data-list--LineHeight: var(--pf-global--LineHeight--md);
4977
+ --pf-c-data-list--BorderTopColor: var(--pf-global--BorderColor--300);
4978
+ --pf-c-data-list--BorderTopWidth: var(--pf-global--spacer--sm);
4979
+ --pf-c-data-list--sm--BorderTopWidth: var(--pf-global--BorderWidth--sm);
4980
+ --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);
4981
+ --pf-c-data-list__item--BackgroundColor: var(--pf-global--BackgroundColor--100);
4982
+ --pf-c-data-list__item--m-selected--ZIndex: var(--pf-global--ZIndex--xs);
4983
+ --pf-c-data-list__item--m-expanded--before--BackgroundColor: var(--pf-global--active-color--100);
4984
+ --pf-c-data-list__item--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
4985
+ --pf-c-data-list__item--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4986
+ --pf-c-data-list__item--m-selectable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
4987
+ --pf-c-data-list__item--m-selectable--hover--ZIndex: calc(var(--pf-c-data-list__item--m-selected--ZIndex) + 1);
4988
+ --pf-c-data-list__item--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4989
+ --pf-c-data-list__item--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4990
+ --pf-c-data-list__item--m-selectable--active--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4991
+ --pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor: var(--pf-global--active-color--300);
4992
+ --pf-c-data-list__item--BorderBottomColor: var(--pf-global--BorderColor--300);
4993
+ --pf-c-data-list__item--BorderBottomWidth: 0.5rem;
4994
+ --pf-c-data-list__item--m-selectable--hover--item--BorderTopColor: var(--pf-c-data-list__item--BorderBottomColor);
4995
+ --pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth: var(--pf-c-data-list__item--BorderBottomWidth);
4996
+ --pf-c-data-list__item--sm--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
4997
+ --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
4998
+ --pf-c-data-list__item--before--BackgroundColor: transparent;
4999
+ --pf-c-data-list__item--before--Width: var(--pf-global--BorderWidth--lg);
5000
+ --pf-c-data-list__item--before--Transition: var(--pf-global--Transition);
5001
+ --pf-c-data-list__item--before--Top: 0;
5002
+ --pf-c-data-list__item--before--sm--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
5003
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-global--spacer--md);
5004
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-global--spacer--md);
5005
+ --pf-c-data-list__item-row--xl--PaddingRight: var(--pf-global--spacer--lg);
5006
+ --pf-c-data-list__item-row--xl--PaddingLeft: var(--pf-global--spacer--lg);
5007
+ --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-global--spacer--lg);
5008
+ --pf-c-data-list__cell--PaddingTop: var(--pf-global--spacer--lg);
5009
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-global--spacer--lg);
5010
+ --pf-c-data-list__cell--MarginRight: var(--pf-global--spacer--xl);
5011
+ --pf-c-data-list__cell--md--PaddingBottom: 0;
5012
+ --pf-c-data-list__cell--m-icon--MarginRight: var(--pf-global--spacer--md);
5013
+ --pf-c-data-list__cell--cell--PaddingTop: 0;
5014
+ --pf-c-data-list__cell--cell--md--PaddingTop: var(--pf-global--spacer--lg);
5015
+ --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--lg);
5016
+ --pf-c-data-list--cell--MinWidth: initial;
5017
+ --pf-c-data-list--cell--Overflow: visible;
5018
+ --pf-c-data-list--cell--TextOverflow: clip;
5019
+ --pf-c-data-list--cell--WhiteSpace: normal;
5020
+ --pf-c-data-list--cell--WordBreak: normal;
5021
+ --pf-c-data-list--cell--m-truncate--MinWidth: 5ch;
5022
+ --pf-c-data-list__toggle--MarginLeft: calc(var(--pf-global--spacer--sm) * -1);
5023
+ --pf-c-data-list__toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
5024
+ --pf-c-data-list__toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
5025
+ --pf-c-data-list__toggle-icon--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
5026
+ --pf-c-data-list__toggle-icon--Transition: .2s ease-in 0s;
5027
+ --pf-c-data-list__toggle-icon--Rotate: 0;
5028
+ --pf-c-data-list__item--m-expanded__toggle-icon--Rotate: 90deg;
5029
+ --pf-c-data-list__item-draggable-button--PaddingLeft: var(--pf-global--spacer--md);
5030
+ --pf-c-data-list__item-draggable-button--PaddingRight: var(--pf-global--spacer--md);
5031
+ --pf-c-data-list__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--lg) * -1);
5032
+ --pf-c-data-list__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--lg) * -1);
5033
+ --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-global--spacer--lg);
5034
+ --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-global--spacer--lg);
5035
+ --pf-c-data-list__item-draggable-button--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
5036
+ --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-global--icon--Color--light);
5037
+ --pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color: var(--pf-global--disabled-color--200);
5038
+ --pf-c-data-list__item-draggable-button--hover__draggable-icon--Color: var(--pf-global--icon--Color--dark);
5039
+ --pf-c-data-list__item-draggable-button--focus__draggable-icon--Color: var(--pf-global--icon--Color--dark);
5040
+ --pf-c-data-list__item--m-ghost-row--after--BackgroundColor: var(--pf-global--BackgroundColor--100);
5041
+ --pf-c-data-list__item--m-ghost-row--after--Opacity: .6;
5042
+ --pf-c-data-list__item-control--PaddingTop: var(--pf-global--spacer--lg);
5043
+ --pf-c-data-list__item-control--PaddingBottom: var(--pf-global--spacer--lg);
5044
+ --pf-c-data-list__item-control--MarginRight: var(--pf-global--spacer--md);
5045
+ --pf-c-data-list__item-control--md--MarginRight: var(--pf-global--spacer--xl);
5046
+ --pf-c-data-list__item-control--not-last-child--MarginRight: var(--pf-global--spacer--md);
5047
+ --pf-c-data-list__check--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
5048
+ --pf-c-data-list__check--MarginTop: -0.0625rem;
5049
+ --pf-c-data-list__item-action--Display: flex;
5050
+ --pf-c-data-list__item-action--PaddingTop: var(--pf-global--spacer--lg);
5051
+ --pf-c-data-list__item-action--PaddingBottom: var(--pf-global--spacer--lg);
5052
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-global--spacer--md);
5053
+ --pf-c-data-list__item-action--md--MarginLeft: var(--pf-global--spacer--xl);
5054
+ --pf-c-data-list__item-action--not-last-child--MarginRight: var(--pf-global--spacer--md);
5055
+ --pf-c-data-list__item-action__action--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
5056
+ --pf-c-data-list__action--MarginTop: var(--pf-c-data-list__item-action__action--MarginTop);
5057
+ --pf-c-data-list__item-action__action--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
5058
+ --pf-c-data-list__expandable-content--BorderTopWidth: var(--pf-global--BorderWidth--sm);
5059
+ --pf-c-data-list__expandable-content--BorderTopColor: var(--pf-global--BorderColor--100);
5060
+ --pf-c-data-list__expandable-content--MarginRight: calc(var(--pf-c-data-list__expandable-content-body--PaddingRight) * -1);
5061
+ --pf-c-data-list__expandable-content--MarginLeft: calc(var(--pf-c-data-list__expandable-content-body--PaddingLeft) * -1);
5062
+ --pf-c-data-list__expandable-content--MaxHeight: 37.5rem;
5063
+ --pf-c-data-list__expandable-content--before--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
5064
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-global--spacer--md);
5065
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-global--spacer--md);
5066
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-global--spacer--md);
5067
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-global--spacer--md);
5068
+ --pf-c-data-list__expandable-content-body--md--PaddingTop: var(--pf-global--spacer--lg);
5069
+ --pf-c-data-list__expandable-content-body--xl--PaddingRight: var(--pf-global--spacer--lg);
5070
+ --pf-c-data-list__expandable-content-body--md--PaddingBottom: var(--pf-global--spacer--lg);
5071
+ --pf-c-data-list__expandable-content-body--xl--PaddingLeft: var(--pf-global--spacer--lg);
5072
+ --pf-c-data-list--m-compact--FontSize: var(--pf-global--FontSize--sm);
5073
+ --pf-c-data-list--m-compact--LineHeight: var(--pf-global--LineHeight--sm);
5074
+ --pf-c-data-list--m-compact__check--FontSize: var(--pf-global--FontSize--md);
5075
+ --pf-c-data-list--m-compact__cell--PaddingTop: var(--pf-global--spacer--sm);
5076
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-global--spacer--sm);
5077
+ --pf-c-data-list--m-compact__cell--md--PaddingBottom: 0;
5078
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: 0;
5079
+ --pf-c-data-list--m-compact__cell-cell--md--PaddingTop: var(--pf-global--spacer--sm);
5080
+ --pf-c-data-list--m-compact__cell--cell--MarginRight: var(--pf-global--spacer--md);
5081
+ --pf-c-data-list--m-compact__item-control--PaddingTop: var(--pf-global--spacer--sm);
5082
+ --pf-c-data-list--m-compact__item-control--PaddingBottom: var(--pf-global--spacer--sm);
5083
+ --pf-c-data-list--m-compact__item-control--MarginRight: var(--pf-global--spacer--md);
5084
+ --pf-c-data-list--m-compact__item-action--PaddingTop: var(--pf-global--spacer--sm);
5085
+ --pf-c-data-list--m-compact__item-action--PaddingBottom: var(--pf-global--spacer--sm);
5086
+ --pf-c-data-list--m-compact__item-action--MarginLeft: var(--pf-global--spacer--md);
5087
+ --pf-c-data-list--m-compact__item-action__action--MarginTop: calc(var(--pf-c-data-list--m-compact__item-action--PaddingTop) * -1);
5088
+ --pf-c-data-list--m-compact__item-action__action--MarginBottom: calc(var(--pf-c-data-list--m-compact__item-action--PaddingBottom) * -1);
5089
+ --pf-c-data-list--m-compact__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
5090
+ --pf-c-data-list--m-compact__item-content--PaddingBottom: var(--pf-global--spacer--sm);
5091
+ --pf-c-data-list--m-compact__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
5092
+ --pf-c-data-list--m-compact__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--sm) * -1);
5093
+ --pf-c-data-list--m-compact__item-draggable-button--PaddingTop: var(--pf-global--spacer--sm);
5094
+ --pf-c-data-list--m-compact__item-draggable-button--PaddingBottom: var(--pf-global--spacer--sm);
5095
+ --pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--sm);
5096
+ color: var(--pf-global--Color--100);
5097
+ font-size: var(--pf-c-data-list--FontSize);
5098
+ line-height: var(--pf-c-data-list--LineHeight);
5099
+ overflow-wrap: break-word;
5100
+ list-style-type: disc;
5101
+ border-top: var(--pf-c-data-list--BorderTopWidth) solid var(--pf-c-data-list--BorderTopColor);
5102
+ }
5103
+
5104
+ @media screen and (min-width: 576px) {
5105
+ .pf-c-data-list {
5106
+ --pf-c-data-list--BorderTopColor: var(--pf-c-data-list--sm--BorderTopColor);
5107
+ --pf-c-data-list--BorderTopWidth: var(--pf-c-data-list--sm--BorderTopWidth);
5108
+ }
5109
+ }
5110
+ @media screen and (min-width: 576px) {
5111
+ .pf-c-data-list {
5112
+ --pf-c-data-list__item--BorderBottomWidth: var(--pf-c-data-list__item--sm--BorderBottomWidth);
5113
+ --pf-c-data-list__item--BorderBottomColor: var(--pf-c-data-list__item--sm--BorderBottomColor);
5114
+ }
5115
+ }
5116
+ @media (min-width: 576px) {
5117
+ .pf-c-data-list {
5118
+ --pf-c-data-list__item--before--Top: var(--pf-c-data-list__item--before--sm--Top);
5119
+ }
5120
+ }
5121
+ .pf-c-data-list.pf-m-compact {
5122
+ --pf-c-data-list__check--FontSize: var(--pf-c-data-list--m-compact__check--FontSize);
5123
+ --pf-c-data-list__action--MarginTop: var(--pf-c-data-list--m-compact__action--MarginTop);
5124
+ --pf-c-data-list--FontSize: var(--pf-c-data-list--m-compact--FontSize);
5125
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list--m-compact__item-action--MarginLeft);
5126
+ --pf-c-data-list__item-action--PaddingTop: var(--pf-c-data-list--m-compact__item-action--PaddingTop);
5127
+ --pf-c-data-list__item-action--PaddingBottom: var(--pf-c-data-list--m-compact__item-action--PaddingBottom);
5128
+ --pf-c-data-list__item-action__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
5129
+ --pf-c-data-list__item-action__action--MarginBottom: var(--pf-c-data-list--m-compact__item-action__action--MarginBottom);
5130
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list--m-compact__item-control--MarginRight);
5131
+ --pf-c-data-list__item-control--PaddingTop: var(--pf-c-data-list--m-compact__item-control--PaddingTop);
5132
+ --pf-c-data-list__item-control--PaddingBottom: var(--pf-c-data-list--m-compact__item-control--PaddingBottom);
5133
+ --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-c-data-list--m-compact__item-content--PaddingBottom);
5134
+ --pf-c-data-list__item-draggable-button--MarginTop: var(--pf-c-data-list--m-compact__item-draggable-button--MarginTop);
5135
+ --pf-c-data-list__item-draggable-button--MarginBottom: var(--pf-c-data-list--m-compact__item-draggable-button--MarginBottom);
5136
+ --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingTop);
5137
+ --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingBottom);
5138
+ --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop);
5139
+ font-size: var(--pf-c-data-list--m-compact--FontSize);
5140
+ }
5141
+
5142
+ .pf-c-data-list.pf-m-compact .pf-c-data-list__cell {
5143
+ --pf-c-data-list__cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--PaddingTop);
5144
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--PaddingBottom);
5145
+ --pf-c-data-list__cell--MarginRight: var(--pf-c-data-list--m-compact__cell--cell--MarginRight);
5146
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--PaddingTop);
5147
+ }
5148
+
5149
+ .pf-c-data-list.pf-m-compact .pf-c-data-list__check {
5150
+ font-size: var(--pf-c-data-list--m-compact__check--FontSize);
5151
+ }
5152
+
5153
+ .pf-c-data-list.pf-m-drag-over {
5154
+ overflow-anchor: none;
5155
+ }
5156
+
5157
+ .pf-c-data-list.pf-m-truncate,
5158
+ .pf-c-data-list__item-row.pf-m-truncate,
5159
+ .pf-c-data-list__cell.pf-m-truncate,
5160
+ .pf-c-data-list__text.pf-m-truncate {
5161
+ --pf-c-data-list--cell--MinWidth: var(--pf-c-data-list--cell--m-truncate--MinWidth);
5162
+ --pf-c-data-list--cell--Overflow: hidden;
5163
+ --pf-c-data-list--cell--TextOverflow: ellipsis;
5164
+ --pf-c-data-list--cell--WhiteSpace: nowrap;
5165
+ }
5166
+
5167
+ .pf-c-data-list.pf-m-break-word,
5168
+ .pf-c-data-list__item-row.pf-m-break-word,
5169
+ .pf-c-data-list__cell.pf-m-break-word,
5170
+ .pf-c-data-list__text.pf-m-break-word {
5171
+ --pf-c-data-list--cell--WordBreak: break-word;
5172
+ }
5173
+
5174
+ .pf-c-data-list.pf-m-nowrap,
5175
+ .pf-c-data-list__item-row.pf-m-nowrap,
5176
+ .pf-c-data-list__cell.pf-m-nowrap,
5177
+ .pf-c-data-list__text.pf-m-nowrap {
5178
+ --pf-c-data-list--cell--WhiteSpace: nowrap;
5179
+ }
5180
+
5181
+ .pf-c-data-list__item {
5182
+ position: relative;
5183
+ display: flex;
5184
+ flex-direction: column;
5185
+ background-color: var(--pf-c-data-list__item--BackgroundColor);
5186
+ border-bottom: var(--pf-c-data-list__item--BorderBottomWidth) solid var(--pf-c-data-list__item--BorderBottomColor);
5187
+ }
5188
+
5189
+ .pf-c-data-list__item::before {
5190
+ position: absolute;
5191
+ top: var(--pf-c-data-list__item--before--Top);
5192
+ bottom: 0;
5193
+ left: 0;
5194
+ width: var(--pf-c-data-list__item--before--Width);
5195
+ content: "";
5196
+ background-color: var(--pf-c-data-list__item--before--BackgroundColor);
5197
+ transition: var(--pf-c-data-list__item--before--Transition);
5198
+ }
5199
+
5200
+ .pf-c-data-list__item.pf-m-selectable {
5201
+ cursor: pointer;
5202
+ outline-offset: var(--pf-c-data-list__item--m-selectable--OutlineOffset);
5203
+ }
5204
+
5205
+ .pf-c-data-list__item.pf-m-selectable:hover, .pf-c-data-list__item.pf-m-selectable:focus {
5206
+ position: relative;
5207
+ z-index: var(--pf-c-data-list__item--m-selectable--hover--ZIndex);
5208
+ }
5209
+
5210
+ .pf-c-data-list__item.pf-m-selectable:hover:not(.pf-m-selected):not(:last-child), .pf-c-data-list__item.pf-m-selectable:focus:not(.pf-m-selected):not(:last-child) {
5211
+ --pf-c-data-list__item--BorderBottomWidth: 0;
5212
+ }
5213
+
5214
+ .pf-c-data-list__item.pf-m-selectable:hover:not(.pf-m-selected):not(:last-child) + .pf-c-data-list__item, .pf-c-data-list__item.pf-m-selectable:focus:not(.pf-m-selected):not(:last-child) + .pf-c-data-list__item {
5215
+ border-top: var(--pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth) solid var(--pf-c-data-list__item--m-selectable--hover--item--BorderTopColor);
5216
+ }
5217
+
5218
+ .pf-c-data-list__item.pf-m-selectable:hover {
5219
+ box-shadow: var(--pf-c-data-list__item--m-selectable--hover--BoxShadow);
5220
+ }
5221
+
5222
+ .pf-c-data-list__item.pf-m-selectable:focus {
5223
+ box-shadow: var(--pf-c-data-list__item--m-selectable--focus--BoxShadow);
5224
+ }
5225
+
5226
+ .pf-c-data-list__item.pf-m-selectable:active {
5227
+ box-shadow: var(--pf-c-data-list__item--m-selectable--active--BoxShadow);
5223
5228
  }
5224
- @media screen and (min-width: 992px) and (min-width: 1200px) {
5225
- .pf-c-data-list.pf-m-grid-lg {
5226
- --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
5227
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
5228
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
5229
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
5230
- }
5229
+
5230
+ .pf-c-data-list__item.pf-m-selected {
5231
+ --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-selected--before--BackgroundColor);
5232
+ position: relative;
5233
+ z-index: var(--pf-c-data-list__item--m-selected--ZIndex);
5234
+ box-shadow: var(--pf-c-data-list__item--m-selected--BoxShadow);
5231
5235
  }
5232
- @media screen and (min-width: 992px) {
5233
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__item-content {
5234
- display: flex;
5235
- flex-wrap: wrap;
5236
- flex-grow: 1;
5237
- padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
5238
- }
5236
+
5237
+ .pf-c-data-list__item.pf-m-ghost-row::after {
5238
+ position: absolute;
5239
+ top: 0;
5240
+ right: 0;
5241
+ bottom: 0;
5242
+ left: 0;
5243
+ content: "";
5244
+ background-color: var(--pf-c-data-list__item--m-ghost-row--after--BackgroundColor);
5245
+ opacity: var(--pf-c-data-list__item--m-ghost-row--after--Opacity);
5239
5246
  }
5240
- @media screen and (min-width: 992px) {
5241
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5242
- margin-right: var(--pf-c-data-list__cell--MarginRight);
5243
- }
5244
5247
 
5245
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell + .pf-c-data-list__cell {
5246
- flex: 1;
5247
- order: initial;
5248
- }
5248
+ .pf-c-data-list__item.pf-m-expanded {
5249
+ --pf-c-data-list__toggle-icon--Rotate: var(--pf-c-data-list__item--m-expanded__toggle-icon--Rotate);
5250
+ --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--before--BackgroundColor);
5251
+ }
5249
5252
 
5250
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-align-right {
5251
- margin-left: auto;
5252
- }
5253
+ .pf-c-data-list__item.pf-m-expanded.pf-m-selectable:not(.pf-m-selected) {
5254
+ --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor);
5255
+ }
5253
5256
 
5254
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-no-fill {
5255
- flex: none;
5256
- }
5257
+ .pf-c-data-list__item-row {
5258
+ display: flex;
5259
+ flex-wrap: nowrap;
5260
+ padding-right: var(--pf-c-data-list__item-row--PaddingRight);
5261
+ padding-left: var(--pf-c-data-list__item-row--PaddingLeft);
5262
+ }
5257
5263
 
5258
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-2 {
5259
- flex-grow: 2;
5260
- }
5264
+ .pf-c-data-list__item-control {
5265
+ display: flex;
5266
+ flex-wrap: nowrap;
5267
+ padding-top: var(--pf-c-data-list__item-control--PaddingTop);
5268
+ padding-bottom: var(--pf-c-data-list__item-control--PaddingBottom);
5269
+ margin-right: var(--pf-c-data-list__item-control--MarginRight);
5270
+ }
5261
5271
 
5262
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-3 {
5263
- flex-grow: 3;
5264
- }
5272
+ .pf-c-data-list__item-control > *:not(:last-child) {
5273
+ margin-right: var(--pf-c-data-list__item-control--not-last-child--MarginRight);
5274
+ }
5265
5275
 
5266
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-4 {
5267
- flex-grow: 4;
5268
- }
5276
+ .pf-c-data-list__check {
5277
+ display: flex;
5278
+ align-items: center;
5279
+ align-self: flex-start;
5280
+ height: var(--pf-c-data-list__check--Height);
5281
+ margin-top: var(--pf-c-data-list__check--MarginTop);
5282
+ }
5269
5283
 
5270
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-5 {
5271
- flex-grow: 5;
5272
- }
5284
+ .pf-c-data-list__check > input {
5285
+ cursor: pointer;
5273
5286
  }
5274
- @media screen and (min-width: 992px) {
5275
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__expandable-content {
5276
- max-height: initial;
5277
- overflow-y: visible;
5278
- }
5287
+
5288
+ .pf-c-data-list__item-draggable-button {
5289
+ display: flex;
5290
+ flex-direction: column;
5291
+ padding: var(--pf-c-data-list__item-draggable-button--PaddingTop) var(--pf-c-data-list__item-draggable-button--PaddingRight) var(--pf-c-data-list__item-draggable-button--PaddingBottom) var(--pf-c-data-list__item-draggable-button--PaddingLeft);
5292
+ margin: var(--pf-c-data-list__item-draggable-button--MarginTop) 0 var(--pf-c-data-list__item-draggable-button--MarginBottom) var(--pf-c-data-list__item-draggable-button--MarginLeft);
5293
+ border: 0;
5279
5294
  }
5280
- @media screen and (min-width: 1200px) {
5281
- .pf-c-data-list.pf-m-grid-xl {
5282
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
5283
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
5284
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
5285
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
5286
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
5287
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
5288
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
5289
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
5290
- }
5295
+
5296
+ .pf-c-data-list__item-draggable-button:hover {
5297
+ --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--hover__draggable-icon--Color);
5298
+ cursor: grab;
5291
5299
  }
5292
- @media screen and (min-width: 1200px) and (min-width: 1200px) {
5293
- .pf-c-data-list.pf-m-grid-xl {
5294
- --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
5295
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
5296
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
5297
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
5298
- }
5300
+
5301
+ .pf-c-data-list__item-draggable-button:focus {
5302
+ --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--focus__draggable-icon--Color);
5299
5303
  }
5300
- @media screen and (min-width: 1200px) {
5301
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__item-content {
5302
- display: flex;
5303
- flex-wrap: wrap;
5304
- flex-grow: 1;
5305
- padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
5306
- }
5304
+
5305
+ .pf-c-data-list__item-draggable-button:active {
5306
+ cursor: grabbing;
5307
5307
  }
5308
- @media screen and (min-width: 1200px) {
5309
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5310
- margin-right: var(--pf-c-data-list__cell--MarginRight);
5311
- }
5312
5308
 
5313
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell + .pf-c-data-list__cell {
5314
- flex: 1;
5315
- order: initial;
5316
- }
5309
+ .pf-c-data-list__item-draggable-button.pf-m-disabled {
5310
+ --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color);
5311
+ pointer-events: none;
5312
+ }
5317
5313
 
5318
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-align-right {
5319
- margin-left: auto;
5320
- }
5314
+ .pf-c-data-list__item-draggable-button .pf-c-data-list__item-draggable-icon {
5315
+ color: var(--pf-c-data-list__item-draggable-button-icon--Color);
5316
+ }
5321
5317
 
5322
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-no-fill {
5323
- flex: none;
5324
- }
5318
+ .pf-c-data-list__item-action {
5319
+ --pf-hidden-visible--visible--Display: var(--pf-c-data-list__item-action--Display);
5320
+ align-items: flex-start;
5321
+ align-content: flex-start;
5322
+ padding-top: var(--pf-c-data-list__item-action--PaddingTop);
5323
+ padding-bottom: var(--pf-c-data-list__item-action--PaddingBottom);
5324
+ margin-left: var(--pf-c-data-list__item-action--MarginLeft);
5325
+ }
5325
5326
 
5326
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-2 {
5327
- flex-grow: 2;
5328
- }
5327
+ .pf-c-data-list__item-action > *:not(:last-child) {
5328
+ margin-right: var(--pf-c-data-list__item-action--not-last-child--MarginRight);
5329
+ }
5329
5330
 
5330
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-3 {
5331
- flex-grow: 3;
5332
- }
5331
+ .pf-c-data-list__item-action .pf-c-data-list__action {
5332
+ margin-top: var(--pf-c-data-list__action--MarginTop);
5333
+ margin-bottom: var(--pf-c-data-list__item-action__action--MarginBottom);
5334
+ }
5333
5335
 
5334
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-4 {
5335
- flex-grow: 4;
5336
- }
5336
+ .pf-c-data-list__toggle {
5337
+ margin: var(--pf-c-data-list__toggle--MarginTop) 0 var(--pf-c-data-list__toggle--MarginBottom) var(--pf-c-data-list__toggle--MarginLeft);
5338
+ }
5337
5339
 
5338
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-5 {
5339
- flex-grow: 5;
5340
- }
5340
+ .pf-c-data-list__toggle-icon {
5341
+ height: var(--pf-c-data-list__toggle-icon--Height);
5342
+ pointer-events: none;
5343
+ transition: var(--pf-c-data-list__toggle-icon--Transition);
5344
+ transform: rotate(var(--pf-c-data-list__toggle-icon--Rotate));
5341
5345
  }
5342
- @media screen and (min-width: 1200px) {
5343
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__expandable-content {
5344
- max-height: initial;
5345
- overflow-y: visible;
5346
- }
5346
+
5347
+ .pf-c-data-list__item-content {
5348
+ display: grid;
5349
+ width: 100%;
5350
+ grid-template-columns: auto 1fr;
5347
5351
  }
5348
- @media screen and (min-width: 1450px) {
5349
- .pf-c-data-list.pf-m-grid-2xl {
5350
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
5351
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
5352
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
5353
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
5354
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
5355
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
5356
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
5357
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
5358
- }
5352
+
5353
+ .pf-c-data-list__cell {
5354
+ flex: 1;
5355
+ grid-column: 1/-1;
5356
+ padding-top: var(--pf-c-data-list__cell--PaddingTop);
5357
+ padding-bottom: var(--pf-c-data-list__cell--PaddingBottom);
5359
5358
  }
5360
- @media screen and (min-width: 1450px) and (min-width: 1200px) {
5361
- .pf-c-data-list.pf-m-grid-2xl {
5362
- --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
5363
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
5364
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
5365
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
5366
- }
5359
+
5360
+ .pf-c-data-list__cell + .pf-c-data-list__cell {
5361
+ flex: 1 0 100%;
5362
+ order: 1;
5363
+ padding-top: var(--pf-c-data-list__cell--cell--PaddingTop);
5367
5364
  }
5368
- @media screen and (min-width: 1450px) {
5369
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__item-content {
5370
- display: flex;
5371
- flex-wrap: wrap;
5372
- flex-grow: 1;
5373
- padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
5374
- }
5365
+
5366
+ .pf-c-data-list__cell.pf-m-icon {
5367
+ flex-grow: 0;
5368
+ margin-right: var(--pf-c-data-list__cell--m-icon--MarginRight);
5369
+ grid-column: 1/2;
5375
5370
  }
5376
- @media screen and (min-width: 1450px) {
5377
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5378
- margin-right: var(--pf-c-data-list__cell--MarginRight);
5379
- }
5380
5371
 
5381
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell + .pf-c-data-list__cell {
5382
- flex: 1;
5383
- order: initial;
5384
- }
5372
+ .pf-c-data-list__cell.pf-m-icon + .pf-c-data-list__cell {
5373
+ grid-column: 2/3;
5374
+ padding-top: var(--pf-c-data-list__cell--m-icon--cell--PaddingTop);
5375
+ }
5385
5376
 
5386
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-align-right {
5387
- margin-left: auto;
5388
- }
5377
+ .pf-c-data-list__cell.pf-m-align-right {
5378
+ margin-left: 0;
5379
+ }
5389
5380
 
5390
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-no-fill {
5391
- flex: none;
5392
- }
5381
+ .pf-c-data-list__text {
5382
+ display: inline-block;
5383
+ }
5393
5384
 
5394
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-2 {
5395
- flex-grow: 2;
5396
- }
5385
+ .pf-c-data-list__text,
5386
+ .pf-c-data-list__cell {
5387
+ min-width: var(--pf-c-data-list--cell--MinWidth);
5388
+ max-width: 100%;
5389
+ overflow: var(--pf-c-data-list--cell--Overflow);
5390
+ text-overflow: var(--pf-c-data-list--cell--TextOverflow);
5391
+ word-break: var(--pf-c-data-list--cell--WordBreak);
5392
+ white-space: var(--pf-c-data-list--cell--WhiteSpace);
5393
+ }
5397
5394
 
5398
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-3 {
5399
- flex-grow: 3;
5400
- }
5395
+ .pf-c-data-list__expandable-content {
5396
+ max-height: var(--pf-c-data-list__expandable-content--MaxHeight);
5397
+ overflow-y: auto;
5398
+ border-top: var(--pf-c-data-list__expandable-content--BorderTopWidth) solid var(--pf-c-data-list__expandable-content--BorderTopColor);
5399
+ }
5401
5400
 
5402
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-4 {
5403
- flex-grow: 4;
5404
- }
5401
+ .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body {
5402
+ padding: var(--pf-c-data-list__expandable-content-body--PaddingTop) var(--pf-c-data-list__expandable-content-body--PaddingRight) var(--pf-c-data-list__expandable-content-body--PaddingBottom) var(--pf-c-data-list__expandable-content-body--PaddingLeft);
5403
+ }
5405
5404
 
5406
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-5 {
5407
- flex-grow: 5;
5408
- }
5405
+ .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body.pf-m-no-padding {
5406
+ padding: 0;
5409
5407
  }
5410
- @media screen and (min-width: 1450px) {
5411
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__expandable-content {
5412
- max-height: initial;
5413
- overflow-y: visible;
5414
- }
5408
+
5409
+ :where(.pf-theme-dark) .pf-c-data-list {
5410
+ --pf-c-data-list--BorderTopColor: var(--pf-global--BorderColor--100);
5411
+ --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);
5412
+ --pf-c-data-list__item--BorderBottomColor: var(--pf-global--BorderColor--100);
5413
+ --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
5415
5414
  }
5415
+
5416
5416
  .pf-c-date-picker {
5417
5417
  --pf-c-date-picker--m-top__calendar--Top: 0;
5418
5418
  --pf-c-date-picker--m-top__calendar--TranslateY: calc(-100% - var(--pf-global--spacer--xs));
@@ -9233,208 +9233,529 @@ label.pf-c-check, .pf-c-check__label,
9233
9233
  --pf-c-helper-text--m-dynamic__item-text--Color: var(--pf-c-helper-text--m-dynamic--m-warning__item-text--Color);
9234
9234
  }
9235
9235
 
9236
- .pf-c-helper-text__item.pf-m-success {
9237
- --pf-c-helper-text__item-icon--Color: var(--pf-c-helper-text__item-icon--m-success--Color);
9238
- --pf-c-helper-text__item-text--Color: var(--pf-c-helper-text__item-text--m-success--Color);
9239
- --pf-c-helper-text--m-dynamic__item-icon--Color: var(--pf-c-helper-text--m-dynamic--m-success__item-icon--Color);
9240
- --pf-c-helper-text--m-dynamic__item-text--Color: var(--pf-c-helper-text--m-dynamic--m-success__item-text--Color);
9236
+ .pf-c-helper-text__item.pf-m-success {
9237
+ --pf-c-helper-text__item-icon--Color: var(--pf-c-helper-text__item-icon--m-success--Color);
9238
+ --pf-c-helper-text__item-text--Color: var(--pf-c-helper-text__item-text--m-success--Color);
9239
+ --pf-c-helper-text--m-dynamic__item-icon--Color: var(--pf-c-helper-text--m-dynamic--m-success__item-icon--Color);
9240
+ --pf-c-helper-text--m-dynamic__item-text--Color: var(--pf-c-helper-text--m-dynamic--m-success__item-text--Color);
9241
+ }
9242
+
9243
+ .pf-c-helper-text__item.pf-m-error {
9244
+ --pf-c-helper-text__item-icon--Color: var(--pf-c-helper-text__item-icon--m-error--Color);
9245
+ --pf-c-helper-text__item-text--Color: var(--pf-c-helper-text__item-text--m-error--Color);
9246
+ --pf-c-helper-text--m-dynamic__item-icon--Color: var(--pf-c-helper-text--m-dynamic--m-error__item-icon--Color);
9247
+ --pf-c-helper-text--m-dynamic__item-text--Color: var(--pf-c-helper-text--m-dynamic--m-error__item-text--Color);
9248
+ }
9249
+
9250
+ .pf-c-helper-text__item.pf-m-dynamic {
9251
+ --pf-c-helper-text__item-text--Color: var(--pf-c-helper-text--m-dynamic__item-text--Color);
9252
+ --pf-c-helper-text__item-icon--Color: var(--pf-c-helper-text--m-dynamic__item-icon--Color);
9253
+ }
9254
+
9255
+ .pf-c-helper-text__item-icon {
9256
+ margin-right: var(--pf-c-helper-text__item-icon--MarginRight);
9257
+ color: var(--pf-c-helper-text__item-icon--Color);
9258
+ }
9259
+
9260
+ .pf-c-helper-text__item-text {
9261
+ color: var(--pf-c-helper-text__item-text--Color);
9262
+ }
9263
+
9264
+ :where(.pf-theme-dark) .pf-c-helper-text {
9265
+ --pf-c-helper-text__item-text--m-success--Color: var(--pf-global--success-color--100);
9266
+ }
9267
+
9268
+ .pf-c-hint {
9269
+ --pf-c-hint--GridRowGap: var(--pf-global--spacer--md);
9270
+ --pf-c-hint--PaddingTop: var(--pf-global--spacer--lg);
9271
+ --pf-c-hint--PaddingRight: var(--pf-global--spacer--lg);
9272
+ --pf-c-hint--PaddingBottom: var(--pf-global--spacer--lg);
9273
+ --pf-c-hint--PaddingLeft: var(--pf-global--spacer--lg);
9274
+ --pf-c-hint--BackgroundColor: var(--pf-global--palette--blue-50);
9275
+ --pf-c-hint--BorderColor: var(--pf-global--palette--blue-100);
9276
+ --pf-c-hint--BorderWidth: var(--pf-global--BorderWidth--sm);
9277
+ --pf-c-hint--BoxShadow: var(--pf-global--BoxShadow--sm);
9278
+ --pf-c-hint--Color: var(--pf-global--Color--100);
9279
+ --pf-c-hint__title--FontSize: var(--pf-global--FontSize--lg);
9280
+ --pf-c-hint__body--FontSize: var(--pf-global--FontSize--md);
9281
+ --pf-c-hint__footer--child--MarginRight: var(--pf-global--spacer--md);
9282
+ --pf-c-hint__actions--MarginLeft: var(--pf-global--spacer--2xl);
9283
+ --pf-c-hint__actions--c-dropdown--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
9284
+ display: grid;
9285
+ grid-template-columns: 1fr auto;
9286
+ grid-row-gap: var(--pf-c-hint--GridRowGap);
9287
+ padding: var(--pf-c-hint--PaddingTop) var(--pf-c-hint--PaddingRight) var(--pf-c-hint--PaddingBottom) var(--pf-c-hint--PaddingLeft);
9288
+ color: var(--pf-c-hint--Color);
9289
+ background-color: var(--pf-c-hint--BackgroundColor);
9290
+ border: var(--pf-c-hint--BorderWidth) solid var(--pf-c-hint--BorderColor);
9291
+ box-shadow: var(--pf-c-hint--BoxShadow);
9292
+ }
9293
+
9294
+ .pf-c-hint .pf-c-button.pf-m-link.pf-m-inline {
9295
+ text-align: left;
9296
+ white-space: normal;
9297
+ }
9298
+
9299
+ .pf-c-hint__actions {
9300
+ display: inline-grid;
9301
+ grid-auto-flow: column;
9302
+ margin-left: var(--pf-c-hint__actions--MarginLeft);
9303
+ text-align: right;
9304
+ grid-column: 2;
9305
+ grid-row: 1;
9306
+ }
9307
+
9308
+ .pf-c-hint__actions .pf-c-dropdown .pf-c-dropdown__toggle.pf-m-plain {
9309
+ margin-top: var(--pf-c-hint__actions--c-dropdown--MarginTop);
9310
+ }
9311
+
9312
+ .pf-c-hint__actions + .pf-c-hint__body {
9313
+ grid-column: 1;
9314
+ }
9315
+
9316
+ .pf-c-hint__title {
9317
+ font-size: var(--pf-c-hint__title--FontSize);
9318
+ }
9319
+
9320
+ .pf-c-hint__body {
9321
+ grid-column: 1/-1;
9322
+ font-size: var(--pf-c-hint__body--FontSize);
9323
+ }
9324
+
9325
+ .pf-c-hint__footer {
9326
+ grid-column: 1/-1;
9327
+ }
9328
+
9329
+ .pf-c-hint__footer > :not(:last-child) {
9330
+ margin-right: var(--pf-c-hint__footer--child--MarginRight);
9331
+ }
9332
+
9333
+ :where(.pf-theme-dark) .pf-c-hint {
9334
+ --pf-c-hint--BackgroundColor: var(--pf-global--BackgroundColor--400);
9335
+ --pf-c-hint--BorderColor: var(--pf-global--BorderColor--300);
9336
+ }
9337
+
9338
+ .pf-c-input-group {
9339
+ --pf-global--Color--100: var(--pf-global--Color--dark-100);
9340
+ --pf-global--Color--200: var(--pf-global--Color--dark-200);
9341
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
9342
+ --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
9343
+ --pf-global--link--Color: var(--pf-global--link--Color--dark);
9344
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
9345
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
9346
+ }
9347
+
9348
+ .pf-c-input-group {
9349
+ --pf-c-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
9350
+ --pf-c-input-group--child--ZIndex: var(--pf-global--ZIndex--xs);
9351
+ --pf-c-input-group__text--FontSize: var(--pf-global--FontSize--md);
9352
+ --pf-c-input-group__text--PaddingRight: var(--pf-global--spacer--sm);
9353
+ --pf-c-input-group__text--PaddingLeft: var(--pf-global--spacer--sm);
9354
+ --pf-c-input-group__text--Color: var(--pf-global--Color--dark-200);
9355
+ --pf-c-input-group__text--BorderWidth: var(--pf-global--BorderWidth--sm);
9356
+ --pf-c-input-group__text--BorderTopColor: var(--pf-global--BorderColor--300);
9357
+ --pf-c-input-group__text--BorderRightColor: var(--pf-global--BorderColor--300);
9358
+ --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--200);
9359
+ --pf-c-input-group__text--BorderLeftColor: var(--pf-global--BorderColor--300);
9360
+ --pf-c-input-group__text--BackgroundColor: var(--pf-global--BackgroundColor--100);
9361
+ --pf-c-input-group__textarea--MinHeight: var(--pf-global--spacer--xl);
9362
+ --pf-c-input-group--c-form-control--invalid--ZIndex: var(--pf-global--ZIndex--xs);
9363
+ --pf-c-input-group--c-form-control--MarginRight: 0;
9364
+ color: var(--pf-global--Color--100);
9365
+ display: flex;
9366
+ width: 100%;
9367
+ background-color: var(--pf-c-input-group--BackgroundColor);
9368
+ }
9369
+
9370
+ .pf-c-input-group > * + * {
9371
+ margin-left: -1px;
9372
+ }
9373
+
9374
+ .pf-c-input-group > :focus,
9375
+ .pf-c-input-group > :focus-within {
9376
+ z-index: var(--pf-c-input-group--child--ZIndex);
9377
+ }
9378
+
9379
+ .pf-c-input-group .pf-c-form-control[aria-invalid=true]:not(:last-child) {
9380
+ margin-right: var(--pf-c-input-group--c-form-control--MarginRight);
9381
+ }
9382
+
9383
+ .pf-c-input-group input:not([type=checkbox]):not([type=radio]),
9384
+ .pf-c-input-group textarea {
9385
+ flex: 2;
9386
+ min-width: 0;
9387
+ }
9388
+
9389
+ .pf-c-input-group textarea {
9390
+ min-height: var(--pf-c-input-group__textarea--MinHeight);
9391
+ }
9392
+
9393
+ .pf-c-input-group__text {
9394
+ display: flex;
9395
+ align-items: center;
9396
+ padding-right: var(--pf-c-input-group__text--PaddingRight);
9397
+ padding-left: var(--pf-c-input-group__text--PaddingLeft);
9398
+ font-size: var(--pf-c-input-group__text--FontSize);
9399
+ color: var(--pf-c-input-group__text--Color);
9400
+ text-align: center;
9401
+ background-color: var(--pf-c-input-group__text--BackgroundColor);
9402
+ border: var(--pf-c-input-group__text--BorderWidth) solid;
9403
+ 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);
9404
+ }
9405
+
9406
+ label.pf-c-input-group__text {
9407
+ cursor: pointer;
9408
+ }
9409
+
9410
+ .pf-c-input-group__text.pf-m-plain {
9411
+ --pf-c-input-group__text--BorderWidth: 0;
9412
+ margin-left: 0;
9413
+ }
9414
+
9415
+ :where(.pf-theme-dark) .pf-c-input-group {
9416
+ --pf-c-input-group--BackgroundColor: transparent;
9417
+ --pf-c-input-group__text--BorderTopColor: transparent;
9418
+ --pf-c-input-group__text--BorderRightColor: transparent;
9419
+ --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
9420
+ --pf-c-input-group__text--BorderLeftColor: transparent;
9421
+ --pf-c-input-group__text--BackgroundColor: var(--pf-global--palette--black-600);
9422
+ }
9423
+
9424
+ :where(.pf-theme-dark) .pf-c-input-group > * + * {
9425
+ margin-left: 0;
9426
+ border-left: 1px solid var(--pf-global--palette--black-700);
9241
9427
  }
9242
9428
 
9243
- .pf-c-helper-text__item.pf-m-error {
9244
- --pf-c-helper-text__item-icon--Color: var(--pf-c-helper-text__item-icon--m-error--Color);
9245
- --pf-c-helper-text__item-text--Color: var(--pf-c-helper-text__item-text--m-error--Color);
9246
- --pf-c-helper-text--m-dynamic__item-icon--Color: var(--pf-c-helper-text--m-dynamic--m-error__item-icon--Color);
9247
- --pf-c-helper-text--m-dynamic__item-text--Color: var(--pf-c-helper-text--m-dynamic--m-error__item-text--Color);
9429
+ :where(.pf-theme-dark) .pf-c-input-group__text {
9430
+ --pf-c-input-group__text--BorderTopColor: transparent;
9431
+ --pf-c-input-group__text--BorderRightColor: transparent;
9432
+ --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
9433
+ --pf-c-input-group__text--BorderLeftColor: transparent;
9248
9434
  }
9249
9435
 
9250
- .pf-c-helper-text__item.pf-m-dynamic {
9251
- --pf-c-helper-text__item-text--Color: var(--pf-c-helper-text--m-dynamic__item-text--Color);
9252
- --pf-c-helper-text__item-icon--Color: var(--pf-c-helper-text--m-dynamic__item-icon--Color);
9436
+ :where(.pf-theme-dark) .pf-c-input-group__text.pf-m-plain {
9437
+ --pf-c-input-group__text--BackgroundColor: transparent;
9253
9438
  }
9254
9439
 
9255
- .pf-c-helper-text__item-icon {
9256
- margin-right: var(--pf-c-helper-text__item-icon--MarginRight);
9257
- color: var(--pf-c-helper-text__item-icon--Color);
9440
+ .pf-c-jump-links {
9441
+ --pf-c-jump-links__list--Display: flex;
9442
+ --pf-c-jump-links__list--Visibility: visible;
9443
+ --pf-c-jump-links__list--PaddingTop: 0;
9444
+ --pf-c-jump-links__list--PaddingRight: var(--pf-global--spacer--md);
9445
+ --pf-c-jump-links__list--PaddingBottom: 0;
9446
+ --pf-c-jump-links__list--PaddingLeft: var(--pf-global--spacer--md);
9447
+ --pf-c-jump-links--m-vertical__list--PaddingTop: var(--pf-global--spacer--md);
9448
+ --pf-c-jump-links--m-vertical__list--PaddingRight: 0;
9449
+ --pf-c-jump-links--m-vertical__list--PaddingBottom: var(--pf-global--spacer--md);
9450
+ --pf-c-jump-links--m-vertical__list--PaddingLeft: 0;
9451
+ --pf-c-jump-links__list--FlexDirection: row;
9452
+ --pf-c-jump-links--m-vertical__list--FlexDirection: column;
9453
+ --pf-c-jump-links__list--before--BorderColor: var(--pf-global--BorderColor--100);
9454
+ --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-global--BorderWidth--sm);
9455
+ --pf-c-jump-links__list--before--BorderRightWidth: 0;
9456
+ --pf-c-jump-links__list--before--BorderBottomWidth: 0;
9457
+ --pf-c-jump-links__list--before--BorderLeftWidth: 0;
9458
+ --pf-c-jump-links--m-vertical__list--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
9459
+ --pf-c-jump-links--m-vertical__list--before--BorderTopWidth: 0;
9460
+ --pf-c-jump-links__list__list--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
9461
+ --pf-c-jump-links__link--PaddingTop: var(--pf-global--spacer--md);
9462
+ --pf-c-jump-links__link--PaddingRight: var(--pf-global--spacer--md);
9463
+ --pf-c-jump-links__link--PaddingBottom: var(--pf-global--spacer--md);
9464
+ --pf-c-jump-links__link--PaddingLeft: var(--pf-global--spacer--md);
9465
+ --pf-c-jump-links__list__list__link--PaddingTop: var(--pf-global--spacer--sm);
9466
+ --pf-c-jump-links__list__list__link--PaddingLeft: var(--pf-global--spacer--lg);
9467
+ --pf-c-jump-links__list__list__link--PaddingBottom: var(--pf-global--spacer--sm);
9468
+ --pf-c-jump-links__link--OutlineOffset: calc(-1 * var(--pf-global--spacer--sm));
9469
+ --pf-c-jump-links__link--before--BorderTopWidth: 0;
9470
+ --pf-c-jump-links__link--before--BorderRightWidth: 0;
9471
+ --pf-c-jump-links__link--before--BorderBottomWidth: 0;
9472
+ --pf-c-jump-links__link--before--BorderLeftWidth: 0;
9473
+ --pf-c-jump-links__link--before--BorderColor: transparent;
9474
+ --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-global--BorderWidth--lg);
9475
+ --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: 0;
9476
+ --pf-c-jump-links__item--m-current__link--before--BorderColor: var(--pf-global--primary-color--100);
9477
+ --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth: 0;
9478
+ --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth: var(--pf-global--BorderWidth--lg);
9479
+ --pf-c-jump-links__link-text--Color: var(--pf-global--Color--200);
9480
+ --pf-c-jump-links__link--hover__link-text--Color: var(--pf-global--Color--100);
9481
+ --pf-c-jump-links__link--focus__link-text--Color: var(--pf-global--Color--100);
9482
+ --pf-c-jump-links__item--m-current__link-text--Color: var(--pf-global--Color--100);
9483
+ --pf-c-jump-links__label--MarginBottom: var(--pf-global--spacer--md);
9484
+ --pf-c-jump-links__label--Display: block;
9485
+ --pf-c-jump-links__label--Visibility: visible;
9486
+ --pf-c-jump-links__toggle--MarginTop: calc(-1 * var(--pf-global--spacer--form-element));
9487
+ --pf-c-jump-links__toggle--MarginBottom--base: calc(-1 * var(--pf-global--spacer--form-element));
9488
+ --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links__toggle--MarginBottom--base);
9489
+ --pf-c-jump-links--m-expanded__toggle--MarginBottom: calc(var(--pf-c-jump-links__toggle--MarginBottom--base) + var(--pf-global--spacer--md));
9490
+ --pf-c-jump-links__toggle--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
9491
+ --pf-c-jump-links__toggle--Display: none;
9492
+ --pf-c-jump-links__toggle--Visibility: hidden;
9493
+ --pf-c-jump-links__toggle-icon--Color: currentcolor;
9494
+ --pf-c-jump-links__toggle-icon--Transition: var(--pf-global--Transition);
9495
+ --pf-c-jump-links__toggle-icon--Rotate: 0;
9496
+ --pf-c-jump-links--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
9497
+ --pf-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
9498
+ --pf-c-jump-links__toggle-text--MarginLeft: var(--pf-global--spacer--md);
9499
+ --pf-c-jump-links__toggle-text--Color: var(--pf-global--Color--100);
9500
+ display: flex;
9258
9501
  }
9259
9502
 
9260
- .pf-c-helper-text__item-text {
9261
- color: var(--pf-c-helper-text__item-text--Color);
9503
+ .pf-c-jump-links.pf-m-center {
9504
+ justify-content: center;
9262
9505
  }
9263
9506
 
9264
- :where(.pf-theme-dark) .pf-c-helper-text {
9265
- --pf-c-helper-text__item-text--m-success--Color: var(--pf-global--success-color--100);
9507
+ .pf-c-jump-links.pf-m-center .pf-c-jump-links__main {
9508
+ align-items: center;
9266
9509
  }
9267
9510
 
9268
- .pf-c-hint {
9269
- --pf-c-hint--GridRowGap: var(--pf-global--spacer--md);
9270
- --pf-c-hint--PaddingTop: var(--pf-global--spacer--lg);
9271
- --pf-c-hint--PaddingRight: var(--pf-global--spacer--lg);
9272
- --pf-c-hint--PaddingBottom: var(--pf-global--spacer--lg);
9273
- --pf-c-hint--PaddingLeft: var(--pf-global--spacer--lg);
9274
- --pf-c-hint--BackgroundColor: var(--pf-global--palette--blue-50);
9275
- --pf-c-hint--BorderColor: var(--pf-global--palette--blue-100);
9276
- --pf-c-hint--BorderWidth: var(--pf-global--BorderWidth--sm);
9277
- --pf-c-hint--BoxShadow: var(--pf-global--BoxShadow--sm);
9278
- --pf-c-hint--Color: var(--pf-global--Color--100);
9279
- --pf-c-hint__title--FontSize: var(--pf-global--FontSize--lg);
9280
- --pf-c-hint__body--FontSize: var(--pf-global--FontSize--md);
9281
- --pf-c-hint__footer--child--MarginRight: var(--pf-global--spacer--md);
9282
- --pf-c-hint__actions--MarginLeft: var(--pf-global--spacer--2xl);
9283
- --pf-c-hint__actions--c-dropdown--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
9284
- display: grid;
9285
- grid-template-columns: 1fr auto;
9286
- grid-row-gap: var(--pf-c-hint--GridRowGap);
9287
- padding: var(--pf-c-hint--PaddingTop) var(--pf-c-hint--PaddingRight) var(--pf-c-hint--PaddingBottom) var(--pf-c-hint--PaddingLeft);
9288
- color: var(--pf-c-hint--Color);
9289
- background-color: var(--pf-c-hint--BackgroundColor);
9290
- border: var(--pf-c-hint--BorderWidth) solid var(--pf-c-hint--BorderColor);
9291
- box-shadow: var(--pf-c-hint--BoxShadow);
9511
+ .pf-c-jump-links.pf-m-vertical, .pf-c-jump-links.pf-m-expandable {
9512
+ --pf-c-jump-links__list--PaddingTop: var(--pf-c-jump-links--m-vertical__list--PaddingTop);
9513
+ --pf-c-jump-links__list--PaddingRight: var(--pf-c-jump-links--m-vertical__list--PaddingRight);
9514
+ --pf-c-jump-links__list--PaddingBottom: var(--pf-c-jump-links--m-vertical__list--PaddingBottom);
9515
+ --pf-c-jump-links__list--PaddingLeft: var(--pf-c-jump-links--m-vertical__list--PaddingLeft);
9516
+ --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderTopWidth);
9517
+ --pf-c-jump-links__list--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderLeftWidth);
9518
+ --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth);
9519
+ --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth);
9520
+ --pf-c-jump-links__list--FlexDirection: var(--pf-c-jump-links--m-vertical__list--FlexDirection);
9521
+ flex-direction: column;
9292
9522
  }
9293
9523
 
9294
- .pf-c-hint .pf-c-button.pf-m-link.pf-m-inline {
9295
- text-align: left;
9296
- white-space: normal;
9524
+ .pf-c-jump-links.pf-m-expandable {
9525
+ --pf-c-jump-links__list--Display: none;
9526
+ --pf-c-jump-links__list--Visibility: hidden;
9527
+ --pf-c-jump-links__toggle--Display: block;
9528
+ --pf-c-jump-links__toggle--Visibility: visible;
9529
+ --pf-c-jump-links__label--Display: none;
9530
+ --pf-c-jump-links__label--Visibility: hidden;
9297
9531
  }
9298
9532
 
9299
- .pf-c-hint__actions {
9300
- display: inline-grid;
9301
- grid-auto-flow: column;
9302
- margin-left: var(--pf-c-hint__actions--MarginLeft);
9303
- text-align: right;
9304
- grid-column: 2;
9305
- grid-row: 1;
9533
+ .pf-c-jump-links.pf-m-non-expandable {
9534
+ --pf-c-jump-links__list--Display: flex;
9535
+ --pf-c-jump-links__list--Visibility: visible;
9536
+ --pf-c-jump-links__toggle--Display: none;
9537
+ --pf-c-jump-links__toggle--Visibility: hidden;
9538
+ --pf-c-jump-links__label--Display: block;
9539
+ --pf-c-jump-links__label--Visibility: visible;
9306
9540
  }
9307
9541
 
9308
- .pf-c-hint__actions .pf-c-dropdown .pf-c-dropdown__toggle.pf-m-plain {
9309
- margin-top: var(--pf-c-hint__actions--c-dropdown--MarginTop);
9542
+ @media (min-width: 576px) {
9543
+ .pf-c-jump-links.pf-m-expandable-on-sm {
9544
+ --pf-c-jump-links__list--Display: none;
9545
+ --pf-c-jump-links__list--Visibility: hidden;
9546
+ --pf-c-jump-links__toggle--Display: block;
9547
+ --pf-c-jump-links__toggle--Visibility: visible;
9548
+ --pf-c-jump-links__label--Display: none;
9549
+ --pf-c-jump-links__label--Visibility: hidden;
9550
+ }
9551
+
9552
+ .pf-c-jump-links.pf-m-non-expandable-on-sm {
9553
+ --pf-c-jump-links__list--Display: flex;
9554
+ --pf-c-jump-links__list--Visibility: visible;
9555
+ --pf-c-jump-links__toggle--Display: none;
9556
+ --pf-c-jump-links__toggle--Visibility: hidden;
9557
+ --pf-c-jump-links__label--Display: block;
9558
+ --pf-c-jump-links__label--Visibility: visible;
9559
+ }
9310
9560
  }
9561
+ @media (min-width: 768px) {
9562
+ .pf-c-jump-links.pf-m-expandable-on-md {
9563
+ --pf-c-jump-links__list--Display: none;
9564
+ --pf-c-jump-links__list--Visibility: hidden;
9565
+ --pf-c-jump-links__toggle--Display: block;
9566
+ --pf-c-jump-links__toggle--Visibility: visible;
9567
+ --pf-c-jump-links__label--Display: none;
9568
+ --pf-c-jump-links__label--Visibility: hidden;
9569
+ }
9311
9570
 
9312
- .pf-c-hint__actions + .pf-c-hint__body {
9313
- grid-column: 1;
9571
+ .pf-c-jump-links.pf-m-non-expandable-on-md {
9572
+ --pf-c-jump-links__list--Display: flex;
9573
+ --pf-c-jump-links__list--Visibility: visible;
9574
+ --pf-c-jump-links__toggle--Display: none;
9575
+ --pf-c-jump-links__toggle--Visibility: hidden;
9576
+ --pf-c-jump-links__label--Display: block;
9577
+ --pf-c-jump-links__label--Visibility: visible;
9578
+ }
9314
9579
  }
9580
+ @media (min-width: 992px) {
9581
+ .pf-c-jump-links.pf-m-expandable-on-lg {
9582
+ --pf-c-jump-links__list--Display: none;
9583
+ --pf-c-jump-links__list--Visibility: hidden;
9584
+ --pf-c-jump-links__toggle--Display: block;
9585
+ --pf-c-jump-links__toggle--Visibility: visible;
9586
+ --pf-c-jump-links__label--Display: none;
9587
+ --pf-c-jump-links__label--Visibility: hidden;
9588
+ }
9315
9589
 
9316
- .pf-c-hint__title {
9317
- font-size: var(--pf-c-hint__title--FontSize);
9590
+ .pf-c-jump-links.pf-m-non-expandable-on-lg {
9591
+ --pf-c-jump-links__list--Display: flex;
9592
+ --pf-c-jump-links__list--Visibility: visible;
9593
+ --pf-c-jump-links__toggle--Display: none;
9594
+ --pf-c-jump-links__toggle--Visibility: hidden;
9595
+ --pf-c-jump-links__label--Display: block;
9596
+ --pf-c-jump-links__label--Visibility: visible;
9597
+ }
9318
9598
  }
9599
+ @media (min-width: 1200px) {
9600
+ .pf-c-jump-links.pf-m-expandable-on-xl {
9601
+ --pf-c-jump-links__list--Display: none;
9602
+ --pf-c-jump-links__list--Visibility: hidden;
9603
+ --pf-c-jump-links__toggle--Display: block;
9604
+ --pf-c-jump-links__toggle--Visibility: visible;
9605
+ --pf-c-jump-links__label--Display: none;
9606
+ --pf-c-jump-links__label--Visibility: hidden;
9607
+ }
9319
9608
 
9320
- .pf-c-hint__body {
9321
- grid-column: 1/-1;
9322
- font-size: var(--pf-c-hint__body--FontSize);
9609
+ .pf-c-jump-links.pf-m-non-expandable-on-xl {
9610
+ --pf-c-jump-links__list--Display: flex;
9611
+ --pf-c-jump-links__list--Visibility: visible;
9612
+ --pf-c-jump-links__toggle--Display: none;
9613
+ --pf-c-jump-links__toggle--Visibility: hidden;
9614
+ --pf-c-jump-links__label--Display: block;
9615
+ --pf-c-jump-links__label--Visibility: visible;
9616
+ }
9323
9617
  }
9618
+ @media (min-width: 1450px) {
9619
+ .pf-c-jump-links.pf-m-expandable-on-2xl {
9620
+ --pf-c-jump-links__list--Display: none;
9621
+ --pf-c-jump-links__list--Visibility: hidden;
9622
+ --pf-c-jump-links__toggle--Display: block;
9623
+ --pf-c-jump-links__toggle--Visibility: visible;
9624
+ --pf-c-jump-links__label--Display: none;
9625
+ --pf-c-jump-links__label--Visibility: hidden;
9626
+ }
9324
9627
 
9325
- .pf-c-hint__footer {
9326
- grid-column: 1/-1;
9628
+ .pf-c-jump-links.pf-m-non-expandable-on-2xl {
9629
+ --pf-c-jump-links__list--Display: flex;
9630
+ --pf-c-jump-links__list--Visibility: visible;
9631
+ --pf-c-jump-links__toggle--Display: none;
9632
+ --pf-c-jump-links__toggle--Visibility: hidden;
9633
+ --pf-c-jump-links__label--Display: block;
9634
+ --pf-c-jump-links__label--Visibility: visible;
9635
+ }
9636
+ }
9637
+ .pf-c-jump-links.pf-m-expanded {
9638
+ --pf-c-jump-links__list--Display: flex;
9639
+ --pf-c-jump-links__list--Visibility: visible;
9640
+ --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links--m-expanded__toggle--MarginBottom);
9641
+ --pf-c-jump-links__toggle-icon--Rotate: var(--pf-c-jump-links--m-expanded__toggle-icon--Rotate);
9642
+ --pf-c-jump-links__toggle-icon--Color: var(--pf-c-jump-links--m-expanded__toggle-icon--Color);
9327
9643
  }
9328
9644
 
9329
- .pf-c-hint__footer > :not(:last-child) {
9330
- margin-right: var(--pf-c-hint__footer--child--MarginRight);
9645
+ .pf-c-jump-links__list {
9646
+ position: relative;
9647
+ display: var(--pf-c-jump-links__list--Display);
9648
+ flex-direction: var(--pf-c-jump-links__list--FlexDirection);
9649
+ padding-top: var(--pf-c-jump-links__list--PaddingTop);
9650
+ padding-right: var(--pf-c-jump-links__list--PaddingRight);
9651
+ padding-bottom: var(--pf-c-jump-links__list--PaddingBottom);
9652
+ padding-left: var(--pf-c-jump-links__list--PaddingLeft);
9653
+ visibility: var(--pf-c-jump-links__list--Visibility);
9331
9654
  }
9332
9655
 
9333
- :where(.pf-theme-dark) .pf-c-hint {
9334
- --pf-c-hint--BackgroundColor: var(--pf-global--BackgroundColor--400);
9335
- --pf-c-hint--BorderColor: var(--pf-global--BorderColor--300);
9656
+ .pf-c-jump-links__list::before {
9657
+ position: absolute;
9658
+ top: 0;
9659
+ right: 0;
9660
+ bottom: 0;
9661
+ left: 0;
9662
+ pointer-events: none;
9663
+ content: "";
9664
+ border: solid var(--pf-c-jump-links__list--before--BorderColor);
9665
+ 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);
9336
9666
  }
9337
9667
 
9338
- .pf-c-input-group {
9339
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
9340
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
9341
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
9342
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
9343
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
9344
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
9345
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
9668
+ .pf-c-jump-links__list .pf-c-jump-links__list {
9669
+ --pf-c-jump-links__list--PaddingTop: 0;
9670
+ --pf-c-jump-links__list--PaddingBottom: 0;
9671
+ --pf-c-jump-links__link--PaddingTop: var(--pf-c-jump-links__list__list__link--PaddingTop);
9672
+ --pf-c-jump-links__link--PaddingBottom: var(--pf-c-jump-links__list__list__link--PaddingBottom);
9673
+ --pf-c-jump-links__link--PaddingLeft: var(--pf-c-jump-links__list__list__link--PaddingLeft);
9674
+ margin-top: var(--pf-c-jump-links__list__list--MarginTop);
9346
9675
  }
9347
9676
 
9348
- .pf-c-input-group {
9349
- --pf-c-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
9350
- --pf-c-input-group--child--ZIndex: var(--pf-global--ZIndex--xs);
9351
- --pf-c-input-group__text--FontSize: var(--pf-global--FontSize--md);
9352
- --pf-c-input-group__text--PaddingRight: var(--pf-global--spacer--sm);
9353
- --pf-c-input-group__text--PaddingLeft: var(--pf-global--spacer--sm);
9354
- --pf-c-input-group__text--Color: var(--pf-global--Color--dark-200);
9355
- --pf-c-input-group__text--BorderWidth: var(--pf-global--BorderWidth--sm);
9356
- --pf-c-input-group__text--BorderTopColor: var(--pf-global--BorderColor--300);
9357
- --pf-c-input-group__text--BorderRightColor: var(--pf-global--BorderColor--300);
9358
- --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--200);
9359
- --pf-c-input-group__text--BorderLeftColor: var(--pf-global--BorderColor--300);
9360
- --pf-c-input-group__text--BackgroundColor: var(--pf-global--BackgroundColor--100);
9361
- --pf-c-input-group__textarea--MinHeight: var(--pf-global--spacer--xl);
9362
- --pf-c-input-group--c-form-control--invalid--ZIndex: var(--pf-global--ZIndex--xs);
9363
- --pf-c-input-group--c-form-control--MarginRight: 0;
9364
- color: var(--pf-global--Color--100);
9677
+ .pf-c-jump-links__link {
9678
+ position: relative;
9365
9679
  display: flex;
9366
- width: 100%;
9367
- background-color: var(--pf-c-input-group--BackgroundColor);
9680
+ flex: 1;
9681
+ padding-top: var(--pf-c-jump-links__link--PaddingTop);
9682
+ padding-right: var(--pf-c-jump-links__link--PaddingRight);
9683
+ padding-bottom: var(--pf-c-jump-links__link--PaddingBottom);
9684
+ padding-left: var(--pf-c-jump-links__link--PaddingLeft);
9685
+ text-decoration: none;
9686
+ outline-offset: var(--pf-c-jump-links__link--OutlineOffset);
9368
9687
  }
9369
9688
 
9370
- .pf-c-input-group > * + * {
9371
- margin-left: -1px;
9689
+ .pf-c-jump-links__link:hover {
9690
+ --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--hover__link-text--Color);
9372
9691
  }
9373
9692
 
9374
- .pf-c-input-group > :focus,
9375
- .pf-c-input-group > :focus-within {
9376
- z-index: var(--pf-c-input-group--child--ZIndex);
9693
+ .pf-c-jump-links__link:focus {
9694
+ --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--focus__link-text--Color);
9377
9695
  }
9378
9696
 
9379
- .pf-c-input-group .pf-c-form-control[aria-invalid=true]:not(:last-child) {
9380
- margin-right: var(--pf-c-input-group--c-form-control--MarginRight);
9697
+ .pf-c-jump-links__link::before {
9698
+ position: absolute;
9699
+ top: 0;
9700
+ right: 0;
9701
+ bottom: 0;
9702
+ left: 0;
9703
+ pointer-events: none;
9704
+ content: "";
9705
+ border-color: var(--pf-c-jump-links__link--before--BorderColor);
9706
+ border-style: solid;
9707
+ 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);
9381
9708
  }
9382
9709
 
9383
- .pf-c-input-group input:not([type=checkbox]):not([type=radio]),
9384
- .pf-c-input-group textarea {
9385
- flex: 2;
9386
- min-width: 0;
9710
+ .pf-c-jump-links__item {
9711
+ --pf-c-jump-links__list--before--BorderColor: transparent;
9387
9712
  }
9388
9713
 
9389
- .pf-c-input-group textarea {
9390
- min-height: var(--pf-c-input-group__textarea--MinHeight);
9714
+ .pf-c-jump-links__item.pf-m-current > .pf-c-jump-links__link {
9715
+ --pf-c-jump-links__link--before--BorderTopWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderTopWidth);
9716
+ --pf-c-jump-links__link--before--BorderLeftWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderLeftWidth);
9717
+ --pf-c-jump-links__link--before--BorderColor: var(--pf-c-jump-links__item--m-current__link--before--BorderColor);
9718
+ --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__item--m-current__link-text--Color);
9391
9719
  }
9392
9720
 
9393
- .pf-c-input-group__text {
9394
- display: flex;
9395
- align-items: center;
9396
- padding-right: var(--pf-c-input-group__text--PaddingRight);
9397
- padding-left: var(--pf-c-input-group__text--PaddingLeft);
9398
- font-size: var(--pf-c-input-group__text--FontSize);
9399
- color: var(--pf-c-input-group__text--Color);
9400
- text-align: center;
9401
- background-color: var(--pf-c-input-group__text--BackgroundColor);
9402
- border: var(--pf-c-input-group__text--BorderWidth) solid;
9403
- 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);
9721
+ .pf-c-jump-links__link-text {
9722
+ color: var(--pf-c-jump-links__link-text--Color);
9404
9723
  }
9405
9724
 
9406
- label.pf-c-input-group__text {
9407
- cursor: pointer;
9725
+ .pf-c-jump-links__label {
9726
+ display: var(--pf-c-jump-links__label--Display);
9727
+ margin-bottom: var(--pf-c-jump-links__label--MarginBottom);
9728
+ visibility: var(--pf-c-jump-links__label--Visibility);
9408
9729
  }
9409
9730
 
9410
- .pf-c-input-group__text.pf-m-plain {
9411
- --pf-c-input-group__text--BorderWidth: 0;
9412
- margin-left: 0;
9731
+ .pf-c-jump-links__main {
9732
+ display: flex;
9733
+ flex-direction: column;
9413
9734
  }
9414
9735
 
9415
- :where(.pf-theme-dark) .pf-c-input-group {
9416
- --pf-c-input-group--BackgroundColor: transparent;
9417
- --pf-c-input-group__text--BorderTopColor: transparent;
9418
- --pf-c-input-group__text--BorderRightColor: transparent;
9419
- --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
9420
- --pf-c-input-group__text--BorderLeftColor: transparent;
9421
- --pf-c-input-group__text--BackgroundColor: var(--pf-global--palette--black-600);
9736
+ .pf-c-jump-links__toggle {
9737
+ display: var(--pf-c-jump-links__toggle--Display);
9738
+ margin-top: var(--pf-c-jump-links__toggle--MarginTop);
9739
+ margin-bottom: var(--pf-c-jump-links__toggle--MarginBottom);
9740
+ margin-left: var(--pf-c-jump-links__toggle--MarginLeft);
9741
+ visibility: var(--pf-c-jump-links__toggle--Visibility);
9422
9742
  }
9423
9743
 
9424
- :where(.pf-theme-dark) .pf-c-input-group > * + * {
9425
- margin-left: 0;
9426
- border-left: 1px solid var(--pf-global--palette--black-700);
9744
+ .pf-c-jump-links__toggle .pf-c-button {
9745
+ display: flex;
9746
+ align-items: center;
9427
9747
  }
9428
9748
 
9429
- :where(.pf-theme-dark) .pf-c-input-group__text {
9430
- --pf-c-input-group__text--BorderTopColor: transparent;
9431
- --pf-c-input-group__text--BorderRightColor: transparent;
9432
- --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
9433
- --pf-c-input-group__text--BorderLeftColor: transparent;
9749
+ .pf-c-jump-links__toggle-icon {
9750
+ display: inline-block;
9751
+ color: var(--pf-c-jump-links__toggle-icon--Color);
9752
+ transition: var(--pf-c-jump-links__toggle-icon--Transition);
9753
+ transform: rotate(var(--pf-c-jump-links__toggle-icon--Rotate));
9434
9754
  }
9435
9755
 
9436
- :where(.pf-theme-dark) .pf-c-input-group__text.pf-m-plain {
9437
- --pf-c-input-group__text--BackgroundColor: transparent;
9756
+ .pf-c-jump-links__toggle-text {
9757
+ margin-left: var(--pf-c-jump-links__toggle-text--MarginLeft);
9758
+ color: var(--pf-c-jump-links__toggle-text--Color);
9438
9759
  }
9439
9760
 
9440
9761
  .pf-c-sidebar {
@@ -9595,492 +9916,171 @@ label.pf-c-input-group__text {
9595
9916
  --pf-c-sidebar__panel--FlexBasis: 25%;
9596
9917
  }
9597
9918
 
9598
- .pf-c-sidebar__panel.pf-m-width-33 {
9599
- --pf-c-sidebar__panel--FlexBasis: 33%;
9600
- }
9601
-
9602
- .pf-c-sidebar__panel.pf-m-width-50 {
9603
- --pf-c-sidebar__panel--FlexBasis: 50%;
9604
- }
9605
-
9606
- .pf-c-sidebar__panel.pf-m-width-66 {
9607
- --pf-c-sidebar__panel--FlexBasis: 66%;
9608
- }
9609
-
9610
- .pf-c-sidebar__panel.pf-m-width-75 {
9611
- --pf-c-sidebar__panel--FlexBasis: 75%;
9612
- }
9613
-
9614
- .pf-c-sidebar__panel.pf-m-width-100 {
9615
- --pf-c-sidebar__panel--FlexBasis: 100%;
9616
- }
9617
-
9618
- @media (min-width: 576px) {
9619
- .pf-c-sidebar__panel.pf-m-width-default-on-sm {
9620
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9621
- }
9622
-
9623
- .pf-c-sidebar__panel.pf-m-width-25-on-sm {
9624
- --pf-c-sidebar__panel--FlexBasis: 25%;
9625
- }
9626
-
9627
- .pf-c-sidebar__panel.pf-m-width-33-on-sm {
9628
- --pf-c-sidebar__panel--FlexBasis: 33%;
9629
- }
9630
-
9631
- .pf-c-sidebar__panel.pf-m-width-50-on-sm {
9632
- --pf-c-sidebar__panel--FlexBasis: 50%;
9633
- }
9634
-
9635
- .pf-c-sidebar__panel.pf-m-width-66-on-sm {
9636
- --pf-c-sidebar__panel--FlexBasis: 66%;
9637
- }
9638
-
9639
- .pf-c-sidebar__panel.pf-m-width-75-on-sm {
9640
- --pf-c-sidebar__panel--FlexBasis: 75%;
9641
- }
9642
-
9643
- .pf-c-sidebar__panel.pf-m-width-100-on-sm {
9644
- --pf-c-sidebar__panel--FlexBasis: 100%;
9645
- }
9646
- }
9647
- @media (min-width: 768px) {
9648
- .pf-c-sidebar__panel.pf-m-width-default-on-md {
9649
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9650
- }
9651
-
9652
- .pf-c-sidebar__panel.pf-m-width-25-on-md {
9653
- --pf-c-sidebar__panel--FlexBasis: 25%;
9654
- }
9655
-
9656
- .pf-c-sidebar__panel.pf-m-width-33-on-md {
9657
- --pf-c-sidebar__panel--FlexBasis: 33%;
9658
- }
9659
-
9660
- .pf-c-sidebar__panel.pf-m-width-50-on-md {
9661
- --pf-c-sidebar__panel--FlexBasis: 50%;
9662
- }
9663
-
9664
- .pf-c-sidebar__panel.pf-m-width-66-on-md {
9665
- --pf-c-sidebar__panel--FlexBasis: 66%;
9666
- }
9667
-
9668
- .pf-c-sidebar__panel.pf-m-width-75-on-md {
9669
- --pf-c-sidebar__panel--FlexBasis: 75%;
9670
- }
9671
-
9672
- .pf-c-sidebar__panel.pf-m-width-100-on-md {
9673
- --pf-c-sidebar__panel--FlexBasis: 100%;
9674
- }
9675
- }
9676
- @media (min-width: 992px) {
9677
- .pf-c-sidebar__panel.pf-m-width-default-on-lg {
9678
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9679
- }
9680
-
9681
- .pf-c-sidebar__panel.pf-m-width-25-on-lg {
9682
- --pf-c-sidebar__panel--FlexBasis: 25%;
9683
- }
9684
-
9685
- .pf-c-sidebar__panel.pf-m-width-33-on-lg {
9686
- --pf-c-sidebar__panel--FlexBasis: 33%;
9687
- }
9688
-
9689
- .pf-c-sidebar__panel.pf-m-width-50-on-lg {
9690
- --pf-c-sidebar__panel--FlexBasis: 50%;
9691
- }
9919
+ .pf-c-sidebar__panel.pf-m-width-33 {
9920
+ --pf-c-sidebar__panel--FlexBasis: 33%;
9921
+ }
9692
9922
 
9693
- .pf-c-sidebar__panel.pf-m-width-66-on-lg {
9694
- --pf-c-sidebar__panel--FlexBasis: 66%;
9695
- }
9923
+ .pf-c-sidebar__panel.pf-m-width-50 {
9924
+ --pf-c-sidebar__panel--FlexBasis: 50%;
9925
+ }
9696
9926
 
9697
- .pf-c-sidebar__panel.pf-m-width-75-on-lg {
9698
- --pf-c-sidebar__panel--FlexBasis: 75%;
9699
- }
9927
+ .pf-c-sidebar__panel.pf-m-width-66 {
9928
+ --pf-c-sidebar__panel--FlexBasis: 66%;
9929
+ }
9700
9930
 
9701
- .pf-c-sidebar__panel.pf-m-width-100-on-lg {
9702
- --pf-c-sidebar__panel--FlexBasis: 100%;
9703
- }
9931
+ .pf-c-sidebar__panel.pf-m-width-75 {
9932
+ --pf-c-sidebar__panel--FlexBasis: 75%;
9704
9933
  }
9705
- @media (min-width: 1200px) {
9706
- .pf-c-sidebar__panel.pf-m-width-default-on-xl {
9934
+
9935
+ .pf-c-sidebar__panel.pf-m-width-100 {
9936
+ --pf-c-sidebar__panel--FlexBasis: 100%;
9937
+ }
9938
+
9939
+ @media (min-width: 576px) {
9940
+ .pf-c-sidebar__panel.pf-m-width-default-on-sm {
9707
9941
  --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9708
9942
  }
9709
9943
 
9710
- .pf-c-sidebar__panel.pf-m-width-25-on-xl {
9944
+ .pf-c-sidebar__panel.pf-m-width-25-on-sm {
9711
9945
  --pf-c-sidebar__panel--FlexBasis: 25%;
9712
9946
  }
9713
9947
 
9714
- .pf-c-sidebar__panel.pf-m-width-33-on-xl {
9948
+ .pf-c-sidebar__panel.pf-m-width-33-on-sm {
9715
9949
  --pf-c-sidebar__panel--FlexBasis: 33%;
9716
9950
  }
9717
9951
 
9718
- .pf-c-sidebar__panel.pf-m-width-50-on-xl {
9952
+ .pf-c-sidebar__panel.pf-m-width-50-on-sm {
9719
9953
  --pf-c-sidebar__panel--FlexBasis: 50%;
9720
9954
  }
9721
9955
 
9722
- .pf-c-sidebar__panel.pf-m-width-66-on-xl {
9956
+ .pf-c-sidebar__panel.pf-m-width-66-on-sm {
9723
9957
  --pf-c-sidebar__panel--FlexBasis: 66%;
9724
9958
  }
9725
9959
 
9726
- .pf-c-sidebar__panel.pf-m-width-75-on-xl {
9960
+ .pf-c-sidebar__panel.pf-m-width-75-on-sm {
9727
9961
  --pf-c-sidebar__panel--FlexBasis: 75%;
9728
9962
  }
9729
9963
 
9730
- .pf-c-sidebar__panel.pf-m-width-100-on-xl {
9964
+ .pf-c-sidebar__panel.pf-m-width-100-on-sm {
9731
9965
  --pf-c-sidebar__panel--FlexBasis: 100%;
9732
9966
  }
9733
9967
  }
9734
- @media (min-width: 1450px) {
9735
- .pf-c-sidebar__panel.pf-m-width-default-on-2xl {
9968
+ @media (min-width: 768px) {
9969
+ .pf-c-sidebar__panel.pf-m-width-default-on-md {
9736
9970
  --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9737
9971
  }
9738
9972
 
9739
- .pf-c-sidebar__panel.pf-m-width-25-on-2xl {
9973
+ .pf-c-sidebar__panel.pf-m-width-25-on-md {
9740
9974
  --pf-c-sidebar__panel--FlexBasis: 25%;
9741
9975
  }
9742
9976
 
9743
- .pf-c-sidebar__panel.pf-m-width-33-on-2xl {
9977
+ .pf-c-sidebar__panel.pf-m-width-33-on-md {
9744
9978
  --pf-c-sidebar__panel--FlexBasis: 33%;
9745
9979
  }
9746
9980
 
9747
- .pf-c-sidebar__panel.pf-m-width-50-on-2xl {
9981
+ .pf-c-sidebar__panel.pf-m-width-50-on-md {
9748
9982
  --pf-c-sidebar__panel--FlexBasis: 50%;
9749
9983
  }
9750
9984
 
9751
- .pf-c-sidebar__panel.pf-m-width-66-on-2xl {
9985
+ .pf-c-sidebar__panel.pf-m-width-66-on-md {
9752
9986
  --pf-c-sidebar__panel--FlexBasis: 66%;
9753
9987
  }
9754
9988
 
9755
- .pf-c-sidebar__panel.pf-m-width-75-on-2xl {
9989
+ .pf-c-sidebar__panel.pf-m-width-75-on-md {
9756
9990
  --pf-c-sidebar__panel--FlexBasis: 75%;
9757
9991
  }
9758
9992
 
9759
- .pf-c-sidebar__panel.pf-m-width-100-on-2xl {
9993
+ .pf-c-sidebar__panel.pf-m-width-100-on-md {
9760
9994
  --pf-c-sidebar__panel--FlexBasis: 100%;
9761
9995
  }
9762
9996
  }
9763
- .pf-c-jump-links {
9764
- --pf-c-jump-links__list--Display: flex;
9765
- --pf-c-jump-links__list--Visibility: visible;
9766
- --pf-c-jump-links__list--PaddingTop: 0;
9767
- --pf-c-jump-links__list--PaddingRight: var(--pf-global--spacer--md);
9768
- --pf-c-jump-links__list--PaddingBottom: 0;
9769
- --pf-c-jump-links__list--PaddingLeft: var(--pf-global--spacer--md);
9770
- --pf-c-jump-links--m-vertical__list--PaddingTop: var(--pf-global--spacer--md);
9771
- --pf-c-jump-links--m-vertical__list--PaddingRight: 0;
9772
- --pf-c-jump-links--m-vertical__list--PaddingBottom: var(--pf-global--spacer--md);
9773
- --pf-c-jump-links--m-vertical__list--PaddingLeft: 0;
9774
- --pf-c-jump-links__list--FlexDirection: row;
9775
- --pf-c-jump-links--m-vertical__list--FlexDirection: column;
9776
- --pf-c-jump-links__list--before--BorderColor: var(--pf-global--BorderColor--100);
9777
- --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-global--BorderWidth--sm);
9778
- --pf-c-jump-links__list--before--BorderRightWidth: 0;
9779
- --pf-c-jump-links__list--before--BorderBottomWidth: 0;
9780
- --pf-c-jump-links__list--before--BorderLeftWidth: 0;
9781
- --pf-c-jump-links--m-vertical__list--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
9782
- --pf-c-jump-links--m-vertical__list--before--BorderTopWidth: 0;
9783
- --pf-c-jump-links__list__list--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
9784
- --pf-c-jump-links__link--PaddingTop: var(--pf-global--spacer--md);
9785
- --pf-c-jump-links__link--PaddingRight: var(--pf-global--spacer--md);
9786
- --pf-c-jump-links__link--PaddingBottom: var(--pf-global--spacer--md);
9787
- --pf-c-jump-links__link--PaddingLeft: var(--pf-global--spacer--md);
9788
- --pf-c-jump-links__list__list__link--PaddingTop: var(--pf-global--spacer--sm);
9789
- --pf-c-jump-links__list__list__link--PaddingLeft: var(--pf-global--spacer--lg);
9790
- --pf-c-jump-links__list__list__link--PaddingBottom: var(--pf-global--spacer--sm);
9791
- --pf-c-jump-links__link--OutlineOffset: calc(-1 * var(--pf-global--spacer--sm));
9792
- --pf-c-jump-links__link--before--BorderTopWidth: 0;
9793
- --pf-c-jump-links__link--before--BorderRightWidth: 0;
9794
- --pf-c-jump-links__link--before--BorderBottomWidth: 0;
9795
- --pf-c-jump-links__link--before--BorderLeftWidth: 0;
9796
- --pf-c-jump-links__link--before--BorderColor: transparent;
9797
- --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-global--BorderWidth--lg);
9798
- --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: 0;
9799
- --pf-c-jump-links__item--m-current__link--before--BorderColor: var(--pf-global--primary-color--100);
9800
- --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth: 0;
9801
- --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth: var(--pf-global--BorderWidth--lg);
9802
- --pf-c-jump-links__link-text--Color: var(--pf-global--Color--200);
9803
- --pf-c-jump-links__link--hover__link-text--Color: var(--pf-global--Color--100);
9804
- --pf-c-jump-links__link--focus__link-text--Color: var(--pf-global--Color--100);
9805
- --pf-c-jump-links__item--m-current__link-text--Color: var(--pf-global--Color--100);
9806
- --pf-c-jump-links__label--MarginBottom: var(--pf-global--spacer--md);
9807
- --pf-c-jump-links__label--Display: block;
9808
- --pf-c-jump-links__label--Visibility: visible;
9809
- --pf-c-jump-links__toggle--MarginTop: calc(-1 * var(--pf-global--spacer--form-element));
9810
- --pf-c-jump-links__toggle--MarginBottom--base: calc(-1 * var(--pf-global--spacer--form-element));
9811
- --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links__toggle--MarginBottom--base);
9812
- --pf-c-jump-links--m-expanded__toggle--MarginBottom: calc(var(--pf-c-jump-links__toggle--MarginBottom--base) + var(--pf-global--spacer--md));
9813
- --pf-c-jump-links__toggle--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
9814
- --pf-c-jump-links__toggle--Display: none;
9815
- --pf-c-jump-links__toggle--Visibility: hidden;
9816
- --pf-c-jump-links__toggle-icon--Color: currentcolor;
9817
- --pf-c-jump-links__toggle-icon--Transition: var(--pf-global--Transition);
9818
- --pf-c-jump-links__toggle-icon--Rotate: 0;
9819
- --pf-c-jump-links--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
9820
- --pf-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
9821
- --pf-c-jump-links__toggle-text--MarginLeft: var(--pf-global--spacer--md);
9822
- --pf-c-jump-links__toggle-text--Color: var(--pf-global--Color--100);
9823
- display: flex;
9824
- }
9825
-
9826
- .pf-c-jump-links.pf-m-center {
9827
- justify-content: center;
9828
- }
9829
-
9830
- .pf-c-jump-links.pf-m-center .pf-c-jump-links__main {
9831
- align-items: center;
9832
- }
9833
-
9834
- .pf-c-jump-links.pf-m-vertical, .pf-c-jump-links.pf-m-expandable {
9835
- --pf-c-jump-links__list--PaddingTop: var(--pf-c-jump-links--m-vertical__list--PaddingTop);
9836
- --pf-c-jump-links__list--PaddingRight: var(--pf-c-jump-links--m-vertical__list--PaddingRight);
9837
- --pf-c-jump-links__list--PaddingBottom: var(--pf-c-jump-links--m-vertical__list--PaddingBottom);
9838
- --pf-c-jump-links__list--PaddingLeft: var(--pf-c-jump-links--m-vertical__list--PaddingLeft);
9839
- --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderTopWidth);
9840
- --pf-c-jump-links__list--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderLeftWidth);
9841
- --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth);
9842
- --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth);
9843
- --pf-c-jump-links__list--FlexDirection: var(--pf-c-jump-links--m-vertical__list--FlexDirection);
9844
- flex-direction: column;
9845
- }
9846
-
9847
- .pf-c-jump-links.pf-m-expandable {
9848
- --pf-c-jump-links__list--Display: none;
9849
- --pf-c-jump-links__list--Visibility: hidden;
9850
- --pf-c-jump-links__toggle--Display: block;
9851
- --pf-c-jump-links__toggle--Visibility: visible;
9852
- --pf-c-jump-links__label--Display: none;
9853
- --pf-c-jump-links__label--Visibility: hidden;
9854
- }
9855
-
9856
- .pf-c-jump-links.pf-m-non-expandable {
9857
- --pf-c-jump-links__list--Display: flex;
9858
- --pf-c-jump-links__list--Visibility: visible;
9859
- --pf-c-jump-links__toggle--Display: none;
9860
- --pf-c-jump-links__toggle--Visibility: hidden;
9861
- --pf-c-jump-links__label--Display: block;
9862
- --pf-c-jump-links__label--Visibility: visible;
9863
- }
9864
-
9865
- @media (min-width: 576px) {
9866
- .pf-c-jump-links.pf-m-expandable-on-sm {
9867
- --pf-c-jump-links__list--Display: none;
9868
- --pf-c-jump-links__list--Visibility: hidden;
9869
- --pf-c-jump-links__toggle--Display: block;
9870
- --pf-c-jump-links__toggle--Visibility: visible;
9871
- --pf-c-jump-links__label--Display: none;
9872
- --pf-c-jump-links__label--Visibility: hidden;
9873
- }
9874
-
9875
- .pf-c-jump-links.pf-m-non-expandable-on-sm {
9876
- --pf-c-jump-links__list--Display: flex;
9877
- --pf-c-jump-links__list--Visibility: visible;
9878
- --pf-c-jump-links__toggle--Display: none;
9879
- --pf-c-jump-links__toggle--Visibility: hidden;
9880
- --pf-c-jump-links__label--Display: block;
9881
- --pf-c-jump-links__label--Visibility: visible;
9882
- }
9883
- }
9884
- @media (min-width: 768px) {
9885
- .pf-c-jump-links.pf-m-expandable-on-md {
9886
- --pf-c-jump-links__list--Display: none;
9887
- --pf-c-jump-links__list--Visibility: hidden;
9888
- --pf-c-jump-links__toggle--Display: block;
9889
- --pf-c-jump-links__toggle--Visibility: visible;
9890
- --pf-c-jump-links__label--Display: none;
9891
- --pf-c-jump-links__label--Visibility: hidden;
9892
- }
9893
-
9894
- .pf-c-jump-links.pf-m-non-expandable-on-md {
9895
- --pf-c-jump-links__list--Display: flex;
9896
- --pf-c-jump-links__list--Visibility: visible;
9897
- --pf-c-jump-links__toggle--Display: none;
9898
- --pf-c-jump-links__toggle--Visibility: hidden;
9899
- --pf-c-jump-links__label--Display: block;
9900
- --pf-c-jump-links__label--Visibility: visible;
9901
- }
9902
- }
9903
9997
  @media (min-width: 992px) {
9904
- .pf-c-jump-links.pf-m-expandable-on-lg {
9905
- --pf-c-jump-links__list--Display: none;
9906
- --pf-c-jump-links__list--Visibility: hidden;
9907
- --pf-c-jump-links__toggle--Display: block;
9908
- --pf-c-jump-links__toggle--Visibility: visible;
9909
- --pf-c-jump-links__label--Display: none;
9910
- --pf-c-jump-links__label--Visibility: hidden;
9911
- }
9912
-
9913
- .pf-c-jump-links.pf-m-non-expandable-on-lg {
9914
- --pf-c-jump-links__list--Display: flex;
9915
- --pf-c-jump-links__list--Visibility: visible;
9916
- --pf-c-jump-links__toggle--Display: none;
9917
- --pf-c-jump-links__toggle--Visibility: hidden;
9918
- --pf-c-jump-links__label--Display: block;
9919
- --pf-c-jump-links__label--Visibility: visible;
9920
- }
9921
- }
9922
- @media (min-width: 1200px) {
9923
- .pf-c-jump-links.pf-m-expandable-on-xl {
9924
- --pf-c-jump-links__list--Display: none;
9925
- --pf-c-jump-links__list--Visibility: hidden;
9926
- --pf-c-jump-links__toggle--Display: block;
9927
- --pf-c-jump-links__toggle--Visibility: visible;
9928
- --pf-c-jump-links__label--Display: none;
9929
- --pf-c-jump-links__label--Visibility: hidden;
9998
+ .pf-c-sidebar__panel.pf-m-width-default-on-lg {
9999
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9930
10000
  }
9931
10001
 
9932
- .pf-c-jump-links.pf-m-non-expandable-on-xl {
9933
- --pf-c-jump-links__list--Display: flex;
9934
- --pf-c-jump-links__list--Visibility: visible;
9935
- --pf-c-jump-links__toggle--Display: none;
9936
- --pf-c-jump-links__toggle--Visibility: hidden;
9937
- --pf-c-jump-links__label--Display: block;
9938
- --pf-c-jump-links__label--Visibility: visible;
9939
- }
9940
- }
9941
- @media (min-width: 1450px) {
9942
- .pf-c-jump-links.pf-m-expandable-on-2xl {
9943
- --pf-c-jump-links__list--Display: none;
9944
- --pf-c-jump-links__list--Visibility: hidden;
9945
- --pf-c-jump-links__toggle--Display: block;
9946
- --pf-c-jump-links__toggle--Visibility: visible;
9947
- --pf-c-jump-links__label--Display: none;
9948
- --pf-c-jump-links__label--Visibility: hidden;
10002
+ .pf-c-sidebar__panel.pf-m-width-25-on-lg {
10003
+ --pf-c-sidebar__panel--FlexBasis: 25%;
9949
10004
  }
9950
10005
 
9951
- .pf-c-jump-links.pf-m-non-expandable-on-2xl {
9952
- --pf-c-jump-links__list--Display: flex;
9953
- --pf-c-jump-links__list--Visibility: visible;
9954
- --pf-c-jump-links__toggle--Display: none;
9955
- --pf-c-jump-links__toggle--Visibility: hidden;
9956
- --pf-c-jump-links__label--Display: block;
9957
- --pf-c-jump-links__label--Visibility: visible;
10006
+ .pf-c-sidebar__panel.pf-m-width-33-on-lg {
10007
+ --pf-c-sidebar__panel--FlexBasis: 33%;
9958
10008
  }
9959
- }
9960
- .pf-c-jump-links.pf-m-expanded {
9961
- --pf-c-jump-links__list--Display: flex;
9962
- --pf-c-jump-links__list--Visibility: visible;
9963
- --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links--m-expanded__toggle--MarginBottom);
9964
- --pf-c-jump-links__toggle-icon--Rotate: var(--pf-c-jump-links--m-expanded__toggle-icon--Rotate);
9965
- --pf-c-jump-links__toggle-icon--Color: var(--pf-c-jump-links--m-expanded__toggle-icon--Color);
9966
- }
9967
10009
 
9968
- .pf-c-jump-links__list {
9969
- position: relative;
9970
- display: var(--pf-c-jump-links__list--Display);
9971
- flex-direction: var(--pf-c-jump-links__list--FlexDirection);
9972
- padding-top: var(--pf-c-jump-links__list--PaddingTop);
9973
- padding-right: var(--pf-c-jump-links__list--PaddingRight);
9974
- padding-bottom: var(--pf-c-jump-links__list--PaddingBottom);
9975
- padding-left: var(--pf-c-jump-links__list--PaddingLeft);
9976
- visibility: var(--pf-c-jump-links__list--Visibility);
9977
- }
10010
+ .pf-c-sidebar__panel.pf-m-width-50-on-lg {
10011
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10012
+ }
9978
10013
 
9979
- .pf-c-jump-links__list::before {
9980
- position: absolute;
9981
- top: 0;
9982
- right: 0;
9983
- bottom: 0;
9984
- left: 0;
9985
- pointer-events: none;
9986
- content: "";
9987
- border: solid var(--pf-c-jump-links__list--before--BorderColor);
9988
- 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);
9989
- }
10014
+ .pf-c-sidebar__panel.pf-m-width-66-on-lg {
10015
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10016
+ }
9990
10017
 
9991
- .pf-c-jump-links__list .pf-c-jump-links__list {
9992
- --pf-c-jump-links__list--PaddingTop: 0;
9993
- --pf-c-jump-links__list--PaddingBottom: 0;
9994
- --pf-c-jump-links__link--PaddingTop: var(--pf-c-jump-links__list__list__link--PaddingTop);
9995
- --pf-c-jump-links__link--PaddingBottom: var(--pf-c-jump-links__list__list__link--PaddingBottom);
9996
- --pf-c-jump-links__link--PaddingLeft: var(--pf-c-jump-links__list__list__link--PaddingLeft);
9997
- margin-top: var(--pf-c-jump-links__list__list--MarginTop);
9998
- }
10018
+ .pf-c-sidebar__panel.pf-m-width-75-on-lg {
10019
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10020
+ }
9999
10021
 
10000
- .pf-c-jump-links__link {
10001
- position: relative;
10002
- display: flex;
10003
- flex: 1;
10004
- padding-top: var(--pf-c-jump-links__link--PaddingTop);
10005
- padding-right: var(--pf-c-jump-links__link--PaddingRight);
10006
- padding-bottom: var(--pf-c-jump-links__link--PaddingBottom);
10007
- padding-left: var(--pf-c-jump-links__link--PaddingLeft);
10008
- text-decoration: none;
10009
- outline-offset: var(--pf-c-jump-links__link--OutlineOffset);
10022
+ .pf-c-sidebar__panel.pf-m-width-100-on-lg {
10023
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10024
+ }
10010
10025
  }
10026
+ @media (min-width: 1200px) {
10027
+ .pf-c-sidebar__panel.pf-m-width-default-on-xl {
10028
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10029
+ }
10011
10030
 
10012
- .pf-c-jump-links__link:hover {
10013
- --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--hover__link-text--Color);
10014
- }
10031
+ .pf-c-sidebar__panel.pf-m-width-25-on-xl {
10032
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10033
+ }
10015
10034
 
10016
- .pf-c-jump-links__link:focus {
10017
- --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--focus__link-text--Color);
10018
- }
10035
+ .pf-c-sidebar__panel.pf-m-width-33-on-xl {
10036
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10037
+ }
10019
10038
 
10020
- .pf-c-jump-links__link::before {
10021
- position: absolute;
10022
- top: 0;
10023
- right: 0;
10024
- bottom: 0;
10025
- left: 0;
10026
- pointer-events: none;
10027
- content: "";
10028
- border-color: var(--pf-c-jump-links__link--before--BorderColor);
10029
- border-style: solid;
10030
- 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);
10031
- }
10039
+ .pf-c-sidebar__panel.pf-m-width-50-on-xl {
10040
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10041
+ }
10032
10042
 
10033
- .pf-c-jump-links__item {
10034
- --pf-c-jump-links__list--before--BorderColor: transparent;
10035
- }
10043
+ .pf-c-sidebar__panel.pf-m-width-66-on-xl {
10044
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10045
+ }
10036
10046
 
10037
- .pf-c-jump-links__item.pf-m-current > .pf-c-jump-links__link {
10038
- --pf-c-jump-links__link--before--BorderTopWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderTopWidth);
10039
- --pf-c-jump-links__link--before--BorderLeftWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderLeftWidth);
10040
- --pf-c-jump-links__link--before--BorderColor: var(--pf-c-jump-links__item--m-current__link--before--BorderColor);
10041
- --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__item--m-current__link-text--Color);
10042
- }
10047
+ .pf-c-sidebar__panel.pf-m-width-75-on-xl {
10048
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10049
+ }
10043
10050
 
10044
- .pf-c-jump-links__link-text {
10045
- color: var(--pf-c-jump-links__link-text--Color);
10051
+ .pf-c-sidebar__panel.pf-m-width-100-on-xl {
10052
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10053
+ }
10046
10054
  }
10055
+ @media (min-width: 1450px) {
10056
+ .pf-c-sidebar__panel.pf-m-width-default-on-2xl {
10057
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10058
+ }
10047
10059
 
10048
- .pf-c-jump-links__label {
10049
- display: var(--pf-c-jump-links__label--Display);
10050
- margin-bottom: var(--pf-c-jump-links__label--MarginBottom);
10051
- visibility: var(--pf-c-jump-links__label--Visibility);
10052
- }
10060
+ .pf-c-sidebar__panel.pf-m-width-25-on-2xl {
10061
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10062
+ }
10053
10063
 
10054
- .pf-c-jump-links__main {
10055
- display: flex;
10056
- flex-direction: column;
10057
- }
10064
+ .pf-c-sidebar__panel.pf-m-width-33-on-2xl {
10065
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10066
+ }
10058
10067
 
10059
- .pf-c-jump-links__toggle {
10060
- display: var(--pf-c-jump-links__toggle--Display);
10061
- margin-top: var(--pf-c-jump-links__toggle--MarginTop);
10062
- margin-bottom: var(--pf-c-jump-links__toggle--MarginBottom);
10063
- margin-left: var(--pf-c-jump-links__toggle--MarginLeft);
10064
- visibility: var(--pf-c-jump-links__toggle--Visibility);
10065
- }
10068
+ .pf-c-sidebar__panel.pf-m-width-50-on-2xl {
10069
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10070
+ }
10066
10071
 
10067
- .pf-c-jump-links__toggle .pf-c-button {
10068
- display: flex;
10069
- align-items: center;
10070
- }
10072
+ .pf-c-sidebar__panel.pf-m-width-66-on-2xl {
10073
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10074
+ }
10071
10075
 
10072
- .pf-c-jump-links__toggle-icon {
10073
- display: inline-block;
10074
- color: var(--pf-c-jump-links__toggle-icon--Color);
10075
- transition: var(--pf-c-jump-links__toggle-icon--Transition);
10076
- transform: rotate(var(--pf-c-jump-links__toggle-icon--Rotate));
10077
- }
10076
+ .pf-c-sidebar__panel.pf-m-width-75-on-2xl {
10077
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10078
+ }
10078
10079
 
10079
- .pf-c-jump-links__toggle-text {
10080
- margin-left: var(--pf-c-jump-links__toggle-text--MarginLeft);
10081
- color: var(--pf-c-jump-links__toggle-text--Color);
10080
+ .pf-c-sidebar__panel.pf-m-width-100-on-2xl {
10081
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10082
+ }
10082
10083
  }
10083
-
10084
10084
  .pf-c-label {
10085
10085
  --pf-c-label--PaddingTop: var(--pf-global--spacer--xs);
10086
10086
  --pf-c-label--PaddingRight: var(--pf-global--spacer--sm);
@@ -17764,208 +17764,6 @@ label.pf-c-radio, .pf-c-radio__label,
17764
17764
  cursor: not-allowed;
17765
17765
  }
17766
17766
 
17767
- .pf-c-search-input {
17768
- --pf-c-search-input__text--before--BorderWidth: var(--pf-global--BorderWidth--sm);
17769
- --pf-c-search-input__text--before--BorderColor: var(--pf-global--BorderColor--300);
17770
- --pf-c-search-input__text--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
17771
- --pf-c-search-input__text--after--BorderBottomColor: var(--pf-global--BorderColor--200);
17772
- --pf-c-search-input__bar--hover__text--after--BorderBottomColor: var(--pf-global--primary-color--100);
17773
- --pf-c-search-input__text--focus-within--after--BorderBottomWidth: var(--pf-global--BorderWidth--md);
17774
- --pf-c-search-input__text--focus-within--after--BorderBottomColor: var(--pf-global--primary-color--100);
17775
- --pf-c-search-input__text-input--PaddingTop: var(--pf-global--spacer--form-element);
17776
- --pf-c-search-input__text-input--PaddingRight: var(--pf-global--spacer--sm);
17777
- --pf-c-search-input__text-input--PaddingBottom: var(--pf-global--spacer--form-element);
17778
- --pf-c-search-input__text-input--PaddingLeft: var(--pf-global--spacer--xl);
17779
- --pf-c-search-input__text-input--MinWidth: 6ch;
17780
- --pf-c-search-input__text-input--m-hint--Color: var(--pf-global--Color--dark-200);
17781
- --pf-c-search-input__icon--Left: var(--pf-global--spacer--sm);
17782
- --pf-c-search-input__icon--Color: var(--pf-global--Color--200);
17783
- --pf-c-search-input__text--hover__icon--Color: var(--pf-global--Color--100);
17784
- --pf-c-search-input__icon--TranslateY: -50%;
17785
- --pf-c-search-input__utilities--MarginRight: var(--pf-global--spacer--sm);
17786
- --pf-c-search-input__utilities--MarginLeft: var(--pf-global--spacer--xs);
17787
- --pf-c-search-input__utilities--child--MarginLeft: var(--pf-global--spacer--xs);
17788
- --pf-c-search-input__utilities--c-button--PaddingRight: var(--pf-global--spacer--xs);
17789
- --pf-c-search-input__utilities--c-button--PaddingLeft: var(--pf-global--spacer--xs);
17790
- --pf-c-search-input__menu-body--PaddingTop: var(--pf-global--spacer--md);
17791
- --pf-c-search-input__menu-body--PaddingRight: var(--pf-global--spacer--md);
17792
- --pf-c-search-input__menu-body--PaddingBottom: var(--pf-global--spacer--md);
17793
- --pf-c-search-input__menu-body--PaddingLeft: var(--pf-global--spacer--md);
17794
- --pf-c-search-input__menu--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
17795
- --pf-c-search-input__menu--BoxShadow: var(--pf-global--BoxShadow--md);
17796
- --pf-c-search-input__menu--Top: calc(100% + var(--pf-global--spacer--xs));
17797
- --pf-c-search-input__menu--ZIndex: var(--pf-global--ZIndex--sm);
17798
- --pf-c-search-input--m-top__menu--Top: 0;
17799
- --pf-c-search-input--m-top__menu--TranslateY: calc(-100% - var(--pf-global--spacer--xs));
17800
- --pf-c-search-input__menu-list--PaddingTop: var(--pf-global--spacer--sm);
17801
- --pf-c-search-input__menu-list--PaddingBottom: var(--pf-global--spacer--sm);
17802
- --pf-c-search-input__menu-item--PaddingTop: var(--pf-global--spacer--sm);
17803
- --pf-c-search-input__menu-item--PaddingRight: var(--pf-global--spacer--md);
17804
- --pf-c-search-input__menu-item--PaddingBottom: var(--pf-global--spacer--sm);
17805
- --pf-c-search-input__menu-item--PaddingLeft: var(--pf-global--spacer--md);
17806
- --pf-c-search-input__menu-item--Color: var(--pf-global--Color--100);
17807
- --pf-c-search-input__menu-item--BackgroundColor: transparent;
17808
- --pf-c-search-input__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
17809
- --pf-c-search-input__menu-item--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
17810
- position: relative;
17811
- width: 100%;
17812
- }
17813
-
17814
- .pf-c-search-input__bar {
17815
- position: relative;
17816
- display: flex;
17817
- width: 100%;
17818
- }
17819
-
17820
- .pf-c-search-input__bar:hover {
17821
- --pf-c-search-input__text--after--BorderBottomColor: var(--pf-c-search-input__bar--hover__text--after--BorderBottomColor);
17822
- }
17823
-
17824
- .pf-c-search-input__text {
17825
- display: grid;
17826
- grid-template-columns: 1fr;
17827
- grid-template-areas: "text-input";
17828
- flex: 1;
17829
- }
17830
-
17831
- .pf-c-search-input__text::before, .pf-c-search-input__text::after {
17832
- position: absolute;
17833
- top: 0;
17834
- right: 0;
17835
- bottom: 0;
17836
- left: 0;
17837
- pointer-events: none;
17838
- content: "";
17839
- }
17840
-
17841
- .pf-c-search-input__text::before {
17842
- border: var(--pf-c-search-input__text--before--BorderWidth) solid var(--pf-c-search-input__text--before--BorderColor);
17843
- }
17844
-
17845
- .pf-c-search-input__text::after {
17846
- border-bottom: var(--pf-c-search-input__text--after--BorderBottomWidth) solid var(--pf-c-search-input__text--after--BorderBottomColor);
17847
- }
17848
-
17849
- .pf-c-search-input__text:hover, .pf-c-search-input__text:focus-within {
17850
- --pf-c-search-input__icon--Color: var(--pf-c-search-input__text--hover__icon--Color);
17851
- }
17852
-
17853
- .pf-c-search-input__text:focus-within {
17854
- --pf-c-search-input__text--after--BorderBottomWidth: var(--pf-c-search-input__text--focus-within--after--BorderBottomWidth);
17855
- --pf-c-search-input__text--after--BorderBottomColor: var(--pf-c-search-input__text--focus-within--after--BorderBottomColor);
17856
- }
17857
-
17858
- .pf-c-search-input__icon {
17859
- position: absolute;
17860
- top: 50%;
17861
- left: var(--pf-c-search-input__icon--Left);
17862
- color: var(--pf-c-search-input__icon--Color);
17863
- transform: translateY(var(--pf-c-search-input__icon--TranslateY));
17864
- }
17865
-
17866
- .pf-c-search-input__text-input {
17867
- overflow: hidden;
17868
- text-overflow: ellipsis;
17869
- white-space: nowrap;
17870
- position: relative;
17871
- width: 100%;
17872
- min-width: var(--pf-c-search-input__text-input--MinWidth);
17873
- padding: var(--pf-c-search-input__text-input--PaddingTop) var(--pf-c-search-input__text-input--PaddingRight) var(--pf-c-search-input__text-input--PaddingBottom) var(--pf-c-search-input__text-input--PaddingLeft);
17874
- border: 0;
17875
- }
17876
-
17877
- .pf-c-search-input__text-input, .pf-c-search-input__text-input.pf-m-hint {
17878
- grid-area: text-input;
17879
- }
17880
-
17881
- .pf-c-search-input__text-input.pf-m-hint {
17882
- color: var(--pf-c-search-input__text-input--m-hint--Color);
17883
- }
17884
-
17885
- .pf-c-search-input__utilities {
17886
- display: flex;
17887
- margin-right: var(--pf-c-search-input__utilities--MarginRight);
17888
- margin-left: var(--pf-c-search-input__utilities--MarginLeft);
17889
- }
17890
-
17891
- .pf-c-search-input__utilities > * + * {
17892
- margin-left: var(--pf-c-search-input__utilities--child--MarginLeft);
17893
- }
17894
-
17895
- .pf-c-search-input__utilities .pf-c-button {
17896
- --pf-c-button--PaddingRight: var(--pf-c-search-input__utilities--c-button--PaddingRight);
17897
- --pf-c-button--PaddingLeft: var(--pf-c-search-input__utilities--c-button--PaddingLeft);
17898
- }
17899
-
17900
- .pf-c-search-input__nav {
17901
- display: flex;
17902
- }
17903
-
17904
- .pf-c-search-input__count {
17905
- display: flex;
17906
- align-items: center;
17907
- }
17908
-
17909
- .pf-c-search-input__menu {
17910
- position: absolute;
17911
- top: var(--pf-c-search-input__menu--Top);
17912
- z-index: var(--pf-c-search-input__menu--ZIndex);
17913
- min-width: 100%;
17914
- background-color: var(--pf-c-search-input__menu--BackgroundColor);
17915
- background-clip: padding-box;
17916
- box-shadow: var(--pf-c-search-input__menu--BoxShadow);
17917
- }
17918
-
17919
- .pf-c-search-input.pf-m-top .pf-c-search-input__menu {
17920
- --pf-c-search-input__menu--Top: var(--pf-c-search-input--m-top__menu--Top);
17921
- transform: translateY(var(--pf-c-search-input--m-top__menu--TranslateY));
17922
- }
17923
-
17924
- .pf-c-search-input__menu-body {
17925
- padding: var(--pf-c-search-input__menu-body--PaddingTop) var(--pf-c-search-input__menu-body--PaddingRight) var(--pf-c-search-input__menu-body--PaddingBottom) var(--pf-c-search-input__menu-body--PaddingLeft);
17926
- }
17927
-
17928
- .pf-c-search-input__menu-list {
17929
- padding-top: var(--pf-c-search-input__menu-list--PaddingTop);
17930
- padding-bottom: var(--pf-c-search-input__menu-list--PaddingBottom);
17931
- }
17932
-
17933
- .pf-c-search-input__menu-item {
17934
- display: flex;
17935
- width: 100%;
17936
- min-width: 0;
17937
- padding-top: var(--pf-c-search-input__menu-item--PaddingTop);
17938
- padding-right: var(--pf-c-search-input__menu-item--PaddingRight);
17939
- padding-bottom: var(--pf-c-search-input__menu-item--PaddingBottom);
17940
- padding-left: var(--pf-c-search-input__menu-item--PaddingLeft);
17941
- color: var(--pf-c-search-input__menu-item--Color);
17942
- text-align: left;
17943
- background-color: var(--pf-c-search-input__menu-item--BackgroundColor);
17944
- border: none;
17945
- }
17946
-
17947
- .pf-c-search-input__menu-item:hover {
17948
- --pf-c-search-input__menu-item--BackgroundColor: var(--pf-c-search-input__menu-item--hover--BackgroundColor);
17949
- }
17950
-
17951
- .pf-c-search-input__menu-item:focus {
17952
- --pf-c-search-input__menu-item--BackgroundColor: var(--pf-c-search-input__menu-item--focus--BackgroundColor);
17953
- }
17954
-
17955
- .pf-c-search-input__menu-item-text {
17956
- flex-grow: 1;
17957
- }
17958
-
17959
- :where(.pf-theme-dark) .pf-c-search-input {
17960
- --pf-c-search-input__text--before--BorderColor: transparent;
17961
- --pf-c-search-input__text--after--BorderBottomColor: var(--pf-global--BorderColor--400);
17962
- background-color: var(--pf-global--BackgroundColor--400);
17963
- }
17964
-
17965
- :where(.pf-theme-dark) .pf-c-search-input__text::before {
17966
- border-bottom-color: var(--pf-global--BorderColor--400);
17967
- }
17968
-
17969
17767
  .pf-c-select {
17970
17768
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
17971
17769
  --pf-global--Color--200: var(--pf-global--Color--dark-200);