@patternfly/react-core 4.233.0 → 4.233.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2590,6 +2590,10 @@ button.pf-c-breadcrumb__link {
2590
2590
  --pf-c-button--m-tertiary--focus--Color: var(--pf-global--palette--black-100);
2591
2591
  --pf-c-button--m-tertiary--active--after--BorderColor: var(--pf-global--BorderColor--100);
2592
2592
  --pf-c-button--m-tertiary--active--Color: var(--pf-global--palette--black-100);
2593
+ --pf-c-button--m-warning--Color: var(--pf-global--palette--black-900);
2594
+ --pf-c-button--m-warning--hover--Color: var(--pf-global--palette--black-900);
2595
+ --pf-c-button--m-warning--focus--Color: var(--pf-global--palette--black-900);
2596
+ --pf-c-button--m-warning--active--Color: var(--pf-global--palette--black-900);
2593
2597
  --pf-c-button--m-warning--hover--BackgroundColor: var(--pf-global--warning-color--200);
2594
2598
  --pf-c-button--m-warning--focus--BackgroundColor: var(--pf-global--warning-color--200);
2595
2599
  --pf-c-button--m-warning--active--BackgroundColor: var(--pf-global--warning-color--200);
@@ -3976,6 +3980,86 @@ label.pf-c-check, .pf-c-check__label,
3976
3980
  border-top: 1px solid var(--pf-global--BorderColor--300);
3977
3981
  }
3978
3982
 
3983
+ .pf-c-data-list {
3984
+ --pf-global--Color--100: var(--pf-global--Color--dark-100);
3985
+ --pf-global--Color--200: var(--pf-global--Color--dark-200);
3986
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
3987
+ --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
3988
+ --pf-global--link--Color: var(--pf-global--link--Color--dark);
3989
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
3990
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
3991
+ }
3992
+
3993
+ .pf-c-data-list__item-action {
3994
+ --pf-hidden-visible--visible--Visibility: visible;
3995
+ --pf-hidden-visible--hidden--Display: none;
3996
+ --pf-hidden-visible--hidden--Visibility: hidden;
3997
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
3998
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
3999
+ display: var(--pf-hidden-visible--Display);
4000
+ visibility: var(--pf-hidden-visible--Visibility);
4001
+ }
4002
+
4003
+ .pf-m-hidden.pf-c-data-list__item-action {
4004
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4005
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4006
+ }
4007
+
4008
+ @media screen and (min-width: 576px) {
4009
+ .pf-m-hidden-on-sm.pf-c-data-list__item-action {
4010
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4011
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4012
+ }
4013
+
4014
+ .pf-m-visible-on-sm.pf-c-data-list__item-action {
4015
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4016
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4017
+ }
4018
+ }
4019
+ @media screen and (min-width: 768px) {
4020
+ .pf-m-hidden-on-md.pf-c-data-list__item-action {
4021
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4022
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4023
+ }
4024
+
4025
+ .pf-m-visible-on-md.pf-c-data-list__item-action {
4026
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4027
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4028
+ }
4029
+ }
4030
+ @media screen and (min-width: 992px) {
4031
+ .pf-m-hidden-on-lg.pf-c-data-list__item-action {
4032
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4033
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4034
+ }
4035
+
4036
+ .pf-m-visible-on-lg.pf-c-data-list__item-action {
4037
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4038
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4039
+ }
4040
+ }
4041
+ @media screen and (min-width: 1200px) {
4042
+ .pf-m-hidden-on-xl.pf-c-data-list__item-action {
4043
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4044
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4045
+ }
4046
+
4047
+ .pf-m-visible-on-xl.pf-c-data-list__item-action {
4048
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4049
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4050
+ }
4051
+ }
4052
+ @media screen and (min-width: 1450px) {
4053
+ .pf-m-hidden-on-2xl.pf-c-data-list__item-action {
4054
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4055
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4056
+ }
4057
+
4058
+ .pf-m-visible-on-2xl.pf-c-data-list__item-action {
4059
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4060
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4061
+ }
4062
+ }
3979
4063
  @media screen and (min-width: 768px) {
3980
4064
  .pf-c-data-list:not([class*=pf-m-grid]) {
3981
4065
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
@@ -4453,223 +4537,449 @@ label.pf-c-check, .pf-c-check__label,
4453
4537
  }
4454
4538
  }
4455
4539
  .pf-c-data-list {
4456
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
4457
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
4458
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
4459
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
4460
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
4461
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
4462
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
4463
- }
4464
-
4465
- .pf-c-data-list__item-action {
4466
- --pf-hidden-visible--visible--Visibility: visible;
4467
- --pf-hidden-visible--hidden--Display: none;
4468
- --pf-hidden-visible--hidden--Visibility: hidden;
4469
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4470
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4471
- display: var(--pf-hidden-visible--Display);
4472
- visibility: var(--pf-hidden-visible--Visibility);
4473
- }
4474
-
4475
- .pf-m-hidden.pf-c-data-list__item-action {
4476
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4477
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4540
+ --pf-c-data-list--FontSize: 1em;
4541
+ --pf-c-data-list--LineHeight: var(--pf-global--LineHeight--md);
4542
+ --pf-c-data-list--BorderTopColor: var(--pf-global--BorderColor--300);
4543
+ --pf-c-data-list--BorderTopWidth: var(--pf-global--spacer--sm);
4544
+ --pf-c-data-list--sm--BorderTopWidth: var(--pf-global--BorderWidth--sm);
4545
+ --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);
4546
+ --pf-c-data-list__item--BackgroundColor: var(--pf-global--BackgroundColor--100);
4547
+ --pf-c-data-list__item--m-selected--ZIndex: var(--pf-global--ZIndex--xs);
4548
+ --pf-c-data-list__item--m-expanded--before--BackgroundColor: var(--pf-global--active-color--100);
4549
+ --pf-c-data-list__item--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
4550
+ --pf-c-data-list__item--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4551
+ --pf-c-data-list__item--m-selectable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
4552
+ --pf-c-data-list__item--m-selectable--hover--ZIndex: calc(var(--pf-c-data-list__item--m-selected--ZIndex) + 1);
4553
+ --pf-c-data-list__item--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4554
+ --pf-c-data-list__item--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4555
+ --pf-c-data-list__item--m-selectable--active--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4556
+ --pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor: var(--pf-global--active-color--300);
4557
+ --pf-c-data-list__item--BorderBottomColor: var(--pf-global--BorderColor--300);
4558
+ --pf-c-data-list__item--BorderBottomWidth: 0.5rem;
4559
+ --pf-c-data-list__item--m-selectable--hover--item--BorderTopColor: var(--pf-c-data-list__item--BorderBottomColor);
4560
+ --pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth: var(--pf-c-data-list__item--BorderBottomWidth);
4561
+ --pf-c-data-list__item--sm--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
4562
+ --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
4563
+ --pf-c-data-list__item--before--BackgroundColor: transparent;
4564
+ --pf-c-data-list__item--before--Width: var(--pf-global--BorderWidth--lg);
4565
+ --pf-c-data-list__item--before--Transition: var(--pf-global--Transition);
4566
+ --pf-c-data-list__item--before--Top: 0;
4567
+ --pf-c-data-list__item--before--sm--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
4568
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-global--spacer--md);
4569
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-global--spacer--md);
4570
+ --pf-c-data-list__item-row--xl--PaddingRight: var(--pf-global--spacer--lg);
4571
+ --pf-c-data-list__item-row--xl--PaddingLeft: var(--pf-global--spacer--lg);
4572
+ --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-global--spacer--lg);
4573
+ --pf-c-data-list__cell--PaddingTop: var(--pf-global--spacer--lg);
4574
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-global--spacer--lg);
4575
+ --pf-c-data-list__cell--MarginRight: var(--pf-global--spacer--xl);
4576
+ --pf-c-data-list__cell--md--PaddingBottom: 0;
4577
+ --pf-c-data-list__cell--m-icon--MarginRight: var(--pf-global--spacer--md);
4578
+ --pf-c-data-list__cell--cell--PaddingTop: 0;
4579
+ --pf-c-data-list__cell--cell--md--PaddingTop: var(--pf-global--spacer--lg);
4580
+ --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--lg);
4581
+ --pf-c-data-list--cell--MinWidth: initial;
4582
+ --pf-c-data-list--cell--Overflow: visible;
4583
+ --pf-c-data-list--cell--TextOverflow: clip;
4584
+ --pf-c-data-list--cell--WhiteSpace: normal;
4585
+ --pf-c-data-list--cell--WordBreak: normal;
4586
+ --pf-c-data-list--cell--m-truncate--MinWidth: 5ch;
4587
+ --pf-c-data-list__toggle--MarginLeft: calc(var(--pf-global--spacer--sm) * -1);
4588
+ --pf-c-data-list__toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
4589
+ --pf-c-data-list__toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
4590
+ --pf-c-data-list__toggle-icon--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
4591
+ --pf-c-data-list__toggle-icon--Transition: .2s ease-in 0s;
4592
+ --pf-c-data-list__toggle-icon--Rotate: 0;
4593
+ --pf-c-data-list__item--m-expanded__toggle-icon--Rotate: 90deg;
4594
+ --pf-c-data-list__item-draggable-button--PaddingLeft: var(--pf-global--spacer--md);
4595
+ --pf-c-data-list__item-draggable-button--PaddingRight: var(--pf-global--spacer--md);
4596
+ --pf-c-data-list__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--lg) * -1);
4597
+ --pf-c-data-list__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--lg) * -1);
4598
+ --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-global--spacer--lg);
4599
+ --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-global--spacer--lg);
4600
+ --pf-c-data-list__item-draggable-button--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
4601
+ --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-global--icon--Color--light);
4602
+ --pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color: var(--pf-global--disabled-color--200);
4603
+ --pf-c-data-list__item-draggable-button--hover__draggable-icon--Color: var(--pf-global--icon--Color--dark);
4604
+ --pf-c-data-list__item-draggable-button--focus__draggable-icon--Color: var(--pf-global--icon--Color--dark);
4605
+ --pf-c-data-list__item--m-ghost-row--after--BackgroundColor: var(--pf-global--BackgroundColor--100);
4606
+ --pf-c-data-list__item--m-ghost-row--after--Opacity: .6;
4607
+ --pf-c-data-list__item-control--PaddingTop: var(--pf-global--spacer--lg);
4608
+ --pf-c-data-list__item-control--PaddingBottom: var(--pf-global--spacer--lg);
4609
+ --pf-c-data-list__item-control--MarginRight: var(--pf-global--spacer--md);
4610
+ --pf-c-data-list__item-control--md--MarginRight: var(--pf-global--spacer--xl);
4611
+ --pf-c-data-list__item-control--not-last-child--MarginRight: var(--pf-global--spacer--md);
4612
+ --pf-c-data-list__check--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
4613
+ --pf-c-data-list__check--MarginTop: -0.0625rem;
4614
+ --pf-c-data-list__item-action--Display: flex;
4615
+ --pf-c-data-list__item-action--PaddingTop: var(--pf-global--spacer--lg);
4616
+ --pf-c-data-list__item-action--PaddingBottom: var(--pf-global--spacer--lg);
4617
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-global--spacer--md);
4618
+ --pf-c-data-list__item-action--md--MarginLeft: var(--pf-global--spacer--xl);
4619
+ --pf-c-data-list__item-action--not-last-child--MarginRight: var(--pf-global--spacer--md);
4620
+ --pf-c-data-list__item-action__action--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
4621
+ --pf-c-data-list__action--MarginTop: var(--pf-c-data-list__item-action__action--MarginTop);
4622
+ --pf-c-data-list__item-action__action--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
4623
+ --pf-c-data-list__expandable-content--BorderTopWidth: var(--pf-global--BorderWidth--sm);
4624
+ --pf-c-data-list__expandable-content--BorderTopColor: var(--pf-global--BorderColor--100);
4625
+ --pf-c-data-list__expandable-content--MarginRight: calc(var(--pf-c-data-list__expandable-content-body--PaddingRight) * -1);
4626
+ --pf-c-data-list__expandable-content--MarginLeft: calc(var(--pf-c-data-list__expandable-content-body--PaddingLeft) * -1);
4627
+ --pf-c-data-list__expandable-content--MaxHeight: 37.5rem;
4628
+ --pf-c-data-list__expandable-content--before--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
4629
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-global--spacer--md);
4630
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-global--spacer--md);
4631
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-global--spacer--md);
4632
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-global--spacer--md);
4633
+ --pf-c-data-list__expandable-content-body--md--PaddingTop: var(--pf-global--spacer--lg);
4634
+ --pf-c-data-list__expandable-content-body--xl--PaddingRight: var(--pf-global--spacer--lg);
4635
+ --pf-c-data-list__expandable-content-body--md--PaddingBottom: var(--pf-global--spacer--lg);
4636
+ --pf-c-data-list__expandable-content-body--xl--PaddingLeft: var(--pf-global--spacer--lg);
4637
+ --pf-c-data-list--m-compact--FontSize: var(--pf-global--FontSize--sm);
4638
+ --pf-c-data-list--m-compact--LineHeight: var(--pf-global--LineHeight--sm);
4639
+ --pf-c-data-list--m-compact__check--FontSize: var(--pf-global--FontSize--md);
4640
+ --pf-c-data-list--m-compact__cell--PaddingTop: var(--pf-global--spacer--sm);
4641
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-global--spacer--sm);
4642
+ --pf-c-data-list--m-compact__cell--md--PaddingBottom: 0;
4643
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: 0;
4644
+ --pf-c-data-list--m-compact__cell-cell--md--PaddingTop: var(--pf-global--spacer--sm);
4645
+ --pf-c-data-list--m-compact__cell--cell--MarginRight: var(--pf-global--spacer--md);
4646
+ --pf-c-data-list--m-compact__item-control--PaddingTop: var(--pf-global--spacer--sm);
4647
+ --pf-c-data-list--m-compact__item-control--PaddingBottom: var(--pf-global--spacer--sm);
4648
+ --pf-c-data-list--m-compact__item-control--MarginRight: var(--pf-global--spacer--md);
4649
+ --pf-c-data-list--m-compact__item-action--PaddingTop: var(--pf-global--spacer--sm);
4650
+ --pf-c-data-list--m-compact__item-action--PaddingBottom: var(--pf-global--spacer--sm);
4651
+ --pf-c-data-list--m-compact__item-action--MarginLeft: var(--pf-global--spacer--md);
4652
+ --pf-c-data-list--m-compact__item-action__action--MarginTop: calc(var(--pf-c-data-list--m-compact__item-action--PaddingTop) * -1);
4653
+ --pf-c-data-list--m-compact__item-action__action--MarginBottom: calc(var(--pf-c-data-list--m-compact__item-action--PaddingBottom) * -1);
4654
+ --pf-c-data-list--m-compact__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
4655
+ --pf-c-data-list--m-compact__item-content--PaddingBottom: var(--pf-global--spacer--sm);
4656
+ --pf-c-data-list--m-compact__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
4657
+ --pf-c-data-list--m-compact__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--sm) * -1);
4658
+ --pf-c-data-list--m-compact__item-draggable-button--PaddingTop: var(--pf-global--spacer--sm);
4659
+ --pf-c-data-list--m-compact__item-draggable-button--PaddingBottom: var(--pf-global--spacer--sm);
4660
+ --pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--sm);
4661
+ color: var(--pf-global--Color--100);
4662
+ font-size: var(--pf-c-data-list--FontSize);
4663
+ line-height: var(--pf-c-data-list--LineHeight);
4664
+ overflow-wrap: break-word;
4665
+ list-style-type: disc;
4666
+ border-top: var(--pf-c-data-list--BorderTopWidth) solid var(--pf-c-data-list--BorderTopColor);
4478
4667
  }
4479
4668
 
4480
4669
  @media screen and (min-width: 576px) {
4481
- .pf-m-hidden-on-sm.pf-c-data-list__item-action {
4482
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4483
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4484
- }
4485
-
4486
- .pf-m-visible-on-sm.pf-c-data-list__item-action {
4487
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4488
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4670
+ .pf-c-data-list {
4671
+ --pf-c-data-list--BorderTopColor: var(--pf-c-data-list--sm--BorderTopColor);
4672
+ --pf-c-data-list--BorderTopWidth: var(--pf-c-data-list--sm--BorderTopWidth);
4489
4673
  }
4490
4674
  }
4491
- @media screen and (min-width: 768px) {
4492
- .pf-m-hidden-on-md.pf-c-data-list__item-action {
4493
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4494
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4675
+ @media screen and (min-width: 576px) {
4676
+ .pf-c-data-list {
4677
+ --pf-c-data-list__item--BorderBottomWidth: var(--pf-c-data-list__item--sm--BorderBottomWidth);
4678
+ --pf-c-data-list__item--BorderBottomColor: var(--pf-c-data-list__item--sm--BorderBottomColor);
4495
4679
  }
4496
-
4497
- .pf-m-visible-on-md.pf-c-data-list__item-action {
4498
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4499
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4680
+ }
4681
+ @media (min-width: 576px) {
4682
+ .pf-c-data-list {
4683
+ --pf-c-data-list__item--before--Top: var(--pf-c-data-list__item--before--sm--Top);
4500
4684
  }
4501
4685
  }
4502
- @media screen and (min-width: 992px) {
4503
- .pf-m-hidden-on-lg.pf-c-data-list__item-action {
4504
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4505
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4506
- }
4686
+ .pf-c-data-list.pf-m-compact {
4687
+ --pf-c-data-list__check--FontSize: var(--pf-c-data-list--m-compact__check--FontSize);
4688
+ --pf-c-data-list__action--MarginTop: var(--pf-c-data-list--m-compact__action--MarginTop);
4689
+ --pf-c-data-list--FontSize: var(--pf-c-data-list--m-compact--FontSize);
4690
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list--m-compact__item-action--MarginLeft);
4691
+ --pf-c-data-list__item-action--PaddingTop: var(--pf-c-data-list--m-compact__item-action--PaddingTop);
4692
+ --pf-c-data-list__item-action--PaddingBottom: var(--pf-c-data-list--m-compact__item-action--PaddingBottom);
4693
+ --pf-c-data-list__item-action__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
4694
+ --pf-c-data-list__item-action__action--MarginBottom: var(--pf-c-data-list--m-compact__item-action__action--MarginBottom);
4695
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list--m-compact__item-control--MarginRight);
4696
+ --pf-c-data-list__item-control--PaddingTop: var(--pf-c-data-list--m-compact__item-control--PaddingTop);
4697
+ --pf-c-data-list__item-control--PaddingBottom: var(--pf-c-data-list--m-compact__item-control--PaddingBottom);
4698
+ --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-c-data-list--m-compact__item-content--PaddingBottom);
4699
+ --pf-c-data-list__item-draggable-button--MarginTop: var(--pf-c-data-list--m-compact__item-draggable-button--MarginTop);
4700
+ --pf-c-data-list__item-draggable-button--MarginBottom: var(--pf-c-data-list--m-compact__item-draggable-button--MarginBottom);
4701
+ --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingTop);
4702
+ --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingBottom);
4703
+ --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop);
4704
+ font-size: var(--pf-c-data-list--m-compact--FontSize);
4705
+ }
4507
4706
 
4508
- .pf-m-visible-on-lg.pf-c-data-list__item-action {
4509
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4510
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4511
- }
4707
+ .pf-c-data-list.pf-m-compact .pf-c-data-list__cell {
4708
+ --pf-c-data-list__cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--PaddingTop);
4709
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--PaddingBottom);
4710
+ --pf-c-data-list__cell--MarginRight: var(--pf-c-data-list--m-compact__cell--cell--MarginRight);
4711
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--PaddingTop);
4512
4712
  }
4513
- @media screen and (min-width: 1200px) {
4514
- .pf-m-hidden-on-xl.pf-c-data-list__item-action {
4515
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4516
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4517
- }
4518
4713
 
4519
- .pf-m-visible-on-xl.pf-c-data-list__item-action {
4520
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4521
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4522
- }
4714
+ .pf-c-data-list.pf-m-compact .pf-c-data-list__check {
4715
+ font-size: var(--pf-c-data-list--m-compact__check--FontSize);
4523
4716
  }
4524
- @media screen and (min-width: 1450px) {
4525
- .pf-m-hidden-on-2xl.pf-c-data-list__item-action {
4526
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4527
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4528
- }
4529
4717
 
4530
- .pf-m-visible-on-2xl.pf-c-data-list__item-action {
4531
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4532
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4533
- }
4718
+ .pf-c-data-list.pf-m-drag-over {
4719
+ overflow-anchor: none;
4534
4720
  }
4535
- @media screen and (min-width: 768px) {
4536
- .pf-c-data-list:not([class*=pf-m-grid]) {
4537
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
4538
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
4539
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
4540
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
4541
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
4542
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
4543
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
4544
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
4545
- }
4721
+
4722
+ .pf-c-data-list.pf-m-truncate,
4723
+ .pf-c-data-list__item-row.pf-m-truncate,
4724
+ .pf-c-data-list__cell.pf-m-truncate,
4725
+ .pf-c-data-list__text.pf-m-truncate {
4726
+ --pf-c-data-list--cell--MinWidth: var(--pf-c-data-list--cell--m-truncate--MinWidth);
4727
+ --pf-c-data-list--cell--Overflow: hidden;
4728
+ --pf-c-data-list--cell--TextOverflow: ellipsis;
4729
+ --pf-c-data-list--cell--WhiteSpace: nowrap;
4546
4730
  }
4547
- @media screen and (min-width: 768px) and (min-width: 1200px) {
4548
- .pf-c-data-list:not([class*=pf-m-grid]) {
4549
- --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
4550
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
4551
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
4552
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
4553
- }
4731
+
4732
+ .pf-c-data-list.pf-m-break-word,
4733
+ .pf-c-data-list__item-row.pf-m-break-word,
4734
+ .pf-c-data-list__cell.pf-m-break-word,
4735
+ .pf-c-data-list__text.pf-m-break-word {
4736
+ --pf-c-data-list--cell--WordBreak: break-word;
4554
4737
  }
4555
- @media screen and (min-width: 768px) {
4556
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__item-content {
4557
- display: flex;
4558
- flex-wrap: wrap;
4559
- flex-grow: 1;
4560
- padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
4561
- }
4738
+
4739
+ .pf-c-data-list.pf-m-nowrap,
4740
+ .pf-c-data-list__item-row.pf-m-nowrap,
4741
+ .pf-c-data-list__cell.pf-m-nowrap,
4742
+ .pf-c-data-list__text.pf-m-nowrap {
4743
+ --pf-c-data-list--cell--WhiteSpace: nowrap;
4562
4744
  }
4563
- @media screen and (min-width: 768px) {
4564
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4565
- margin-right: var(--pf-c-data-list__cell--MarginRight);
4566
- }
4567
4745
 
4568
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell + .pf-c-data-list__cell {
4569
- flex: 1;
4570
- order: initial;
4571
- }
4746
+ .pf-c-data-list__item {
4747
+ position: relative;
4748
+ display: flex;
4749
+ flex-direction: column;
4750
+ background-color: var(--pf-c-data-list__item--BackgroundColor);
4751
+ border-bottom: var(--pf-c-data-list__item--BorderBottomWidth) solid var(--pf-c-data-list__item--BorderBottomColor);
4752
+ }
4572
4753
 
4573
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-align-right {
4574
- margin-left: auto;
4575
- }
4754
+ .pf-c-data-list__item::before {
4755
+ position: absolute;
4756
+ top: var(--pf-c-data-list__item--before--Top);
4757
+ bottom: 0;
4758
+ left: 0;
4759
+ width: var(--pf-c-data-list__item--before--Width);
4760
+ content: "";
4761
+ background-color: var(--pf-c-data-list__item--before--BackgroundColor);
4762
+ transition: var(--pf-c-data-list__item--before--Transition);
4763
+ }
4576
4764
 
4577
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-no-fill {
4578
- flex: none;
4579
- }
4765
+ .pf-c-data-list__item.pf-m-selectable {
4766
+ cursor: pointer;
4767
+ outline-offset: var(--pf-c-data-list__item--m-selectable--OutlineOffset);
4768
+ }
4580
4769
 
4581
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-2 {
4582
- flex-grow: 2;
4583
- }
4770
+ .pf-c-data-list__item.pf-m-selectable:hover, .pf-c-data-list__item.pf-m-selectable:focus {
4771
+ position: relative;
4772
+ z-index: var(--pf-c-data-list__item--m-selectable--hover--ZIndex);
4773
+ }
4584
4774
 
4585
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-3 {
4586
- flex-grow: 3;
4587
- }
4775
+ .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) {
4776
+ --pf-c-data-list__item--BorderBottomWidth: 0;
4777
+ }
4588
4778
 
4589
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-4 {
4590
- flex-grow: 4;
4591
- }
4779
+ .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 {
4780
+ 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);
4781
+ }
4592
4782
 
4593
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-5 {
4594
- flex-grow: 5;
4595
- }
4783
+ .pf-c-data-list__item.pf-m-selectable:hover {
4784
+ box-shadow: var(--pf-c-data-list__item--m-selectable--hover--BoxShadow);
4596
4785
  }
4597
- @media screen and (min-width: 768px) {
4598
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__expandable-content {
4599
- max-height: initial;
4600
- overflow-y: visible;
4601
- }
4786
+
4787
+ .pf-c-data-list__item.pf-m-selectable:focus {
4788
+ box-shadow: var(--pf-c-data-list__item--m-selectable--focus--BoxShadow);
4602
4789
  }
4603
- @media screen and (min-width: 0) {
4604
- .pf-c-data-list.pf-m-grid-none {
4605
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
4606
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
4607
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
4608
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
4609
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
4610
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
4611
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
4612
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
4613
- }
4790
+
4791
+ .pf-c-data-list__item.pf-m-selectable:active {
4792
+ box-shadow: var(--pf-c-data-list__item--m-selectable--active--BoxShadow);
4614
4793
  }
4615
- @media screen and (min-width: 0) and (min-width: 1200px) {
4616
- .pf-c-data-list.pf-m-grid-none {
4617
- --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
4618
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
4619
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
4620
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
4621
- }
4794
+
4795
+ .pf-c-data-list__item.pf-m-selected {
4796
+ --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-selected--before--BackgroundColor);
4797
+ position: relative;
4798
+ z-index: var(--pf-c-data-list__item--m-selected--ZIndex);
4799
+ box-shadow: var(--pf-c-data-list__item--m-selected--BoxShadow);
4622
4800
  }
4623
- @media screen and (min-width: 0) {
4624
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__item-content {
4625
- display: flex;
4626
- flex-wrap: wrap;
4627
- flex-grow: 1;
4628
- padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
4629
- }
4801
+
4802
+ .pf-c-data-list__item.pf-m-ghost-row::after {
4803
+ position: absolute;
4804
+ top: 0;
4805
+ right: 0;
4806
+ bottom: 0;
4807
+ left: 0;
4808
+ content: "";
4809
+ background-color: var(--pf-c-data-list__item--m-ghost-row--after--BackgroundColor);
4810
+ opacity: var(--pf-c-data-list__item--m-ghost-row--after--Opacity);
4630
4811
  }
4631
- @media screen and (min-width: 0) {
4632
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4633
- margin-right: var(--pf-c-data-list__cell--MarginRight);
4634
- }
4635
4812
 
4636
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell + .pf-c-data-list__cell {
4637
- flex: 1;
4638
- order: initial;
4639
- }
4813
+ .pf-c-data-list__item.pf-m-expanded {
4814
+ --pf-c-data-list__toggle-icon--Rotate: var(--pf-c-data-list__item--m-expanded__toggle-icon--Rotate);
4815
+ --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--before--BackgroundColor);
4816
+ }
4640
4817
 
4641
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-align-right {
4642
- margin-left: auto;
4643
- }
4818
+ .pf-c-data-list__item.pf-m-expanded.pf-m-selectable:not(.pf-m-selected) {
4819
+ --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor);
4820
+ }
4644
4821
 
4645
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-no-fill {
4646
- flex: none;
4647
- }
4822
+ .pf-c-data-list__item-row {
4823
+ display: flex;
4824
+ flex-wrap: nowrap;
4825
+ padding-right: var(--pf-c-data-list__item-row--PaddingRight);
4826
+ padding-left: var(--pf-c-data-list__item-row--PaddingLeft);
4827
+ }
4648
4828
 
4649
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-2 {
4650
- flex-grow: 2;
4651
- }
4829
+ .pf-c-data-list__item-control {
4830
+ display: flex;
4831
+ flex-wrap: nowrap;
4832
+ padding-top: var(--pf-c-data-list__item-control--PaddingTop);
4833
+ padding-bottom: var(--pf-c-data-list__item-control--PaddingBottom);
4834
+ margin-right: var(--pf-c-data-list__item-control--MarginRight);
4835
+ }
4652
4836
 
4653
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-3 {
4654
- flex-grow: 3;
4655
- }
4837
+ .pf-c-data-list__item-control > *:not(:last-child) {
4838
+ margin-right: var(--pf-c-data-list__item-control--not-last-child--MarginRight);
4839
+ }
4656
4840
 
4657
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-4 {
4658
- flex-grow: 4;
4659
- }
4841
+ .pf-c-data-list__check {
4842
+ display: flex;
4843
+ align-items: center;
4844
+ align-self: flex-start;
4845
+ height: var(--pf-c-data-list__check--Height);
4846
+ margin-top: var(--pf-c-data-list__check--MarginTop);
4847
+ }
4660
4848
 
4661
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-5 {
4662
- flex-grow: 5;
4663
- }
4849
+ .pf-c-data-list__check > input {
4850
+ cursor: pointer;
4664
4851
  }
4665
- @media screen and (min-width: 0) {
4666
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__expandable-content {
4667
- max-height: initial;
4668
- overflow-y: visible;
4669
- }
4852
+
4853
+ .pf-c-data-list__item-draggable-button {
4854
+ display: flex;
4855
+ flex-direction: column;
4856
+ 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);
4857
+ 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);
4858
+ border: 0;
4670
4859
  }
4671
- @media screen and (min-width: 576px) {
4672
- .pf-c-data-list.pf-m-grid-sm {
4860
+
4861
+ .pf-c-data-list__item-draggable-button:hover {
4862
+ --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--hover__draggable-icon--Color);
4863
+ cursor: grab;
4864
+ }
4865
+
4866
+ .pf-c-data-list__item-draggable-button:focus {
4867
+ --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--focus__draggable-icon--Color);
4868
+ }
4869
+
4870
+ .pf-c-data-list__item-draggable-button:active {
4871
+ cursor: grabbing;
4872
+ }
4873
+
4874
+ .pf-c-data-list__item-draggable-button.pf-m-disabled {
4875
+ --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color);
4876
+ pointer-events: none;
4877
+ }
4878
+
4879
+ .pf-c-data-list__item-draggable-button .pf-c-data-list__item-draggable-icon {
4880
+ color: var(--pf-c-data-list__item-draggable-button-icon--Color);
4881
+ }
4882
+
4883
+ .pf-c-data-list__item-action {
4884
+ --pf-hidden-visible--visible--Display: var(--pf-c-data-list__item-action--Display);
4885
+ align-items: flex-start;
4886
+ align-content: flex-start;
4887
+ padding-top: var(--pf-c-data-list__item-action--PaddingTop);
4888
+ padding-bottom: var(--pf-c-data-list__item-action--PaddingBottom);
4889
+ margin-left: var(--pf-c-data-list__item-action--MarginLeft);
4890
+ }
4891
+
4892
+ .pf-c-data-list__item-action > *:not(:last-child) {
4893
+ margin-right: var(--pf-c-data-list__item-action--not-last-child--MarginRight);
4894
+ }
4895
+
4896
+ .pf-c-data-list__item-action .pf-c-data-list__action {
4897
+ margin-top: var(--pf-c-data-list__action--MarginTop);
4898
+ margin-bottom: var(--pf-c-data-list__item-action__action--MarginBottom);
4899
+ }
4900
+
4901
+ .pf-c-data-list__toggle {
4902
+ margin: var(--pf-c-data-list__toggle--MarginTop) 0 var(--pf-c-data-list__toggle--MarginBottom) var(--pf-c-data-list__toggle--MarginLeft);
4903
+ }
4904
+
4905
+ .pf-c-data-list__toggle-icon {
4906
+ height: var(--pf-c-data-list__toggle-icon--Height);
4907
+ pointer-events: none;
4908
+ transition: var(--pf-c-data-list__toggle-icon--Transition);
4909
+ transform: rotate(var(--pf-c-data-list__toggle-icon--Rotate));
4910
+ }
4911
+
4912
+ .pf-c-data-list__item-content {
4913
+ display: grid;
4914
+ width: 100%;
4915
+ grid-template-columns: auto 1fr;
4916
+ }
4917
+
4918
+ .pf-c-data-list__cell {
4919
+ flex: 1;
4920
+ grid-column: 1/-1;
4921
+ padding-top: var(--pf-c-data-list__cell--PaddingTop);
4922
+ padding-bottom: var(--pf-c-data-list__cell--PaddingBottom);
4923
+ }
4924
+
4925
+ .pf-c-data-list__cell + .pf-c-data-list__cell {
4926
+ flex: 1 0 100%;
4927
+ order: 1;
4928
+ padding-top: var(--pf-c-data-list__cell--cell--PaddingTop);
4929
+ }
4930
+
4931
+ .pf-c-data-list__cell.pf-m-icon {
4932
+ flex-grow: 0;
4933
+ margin-right: var(--pf-c-data-list__cell--m-icon--MarginRight);
4934
+ grid-column: 1/2;
4935
+ }
4936
+
4937
+ .pf-c-data-list__cell.pf-m-icon + .pf-c-data-list__cell {
4938
+ grid-column: 2/3;
4939
+ padding-top: var(--pf-c-data-list__cell--m-icon--cell--PaddingTop);
4940
+ }
4941
+
4942
+ .pf-c-data-list__cell.pf-m-align-right {
4943
+ margin-left: 0;
4944
+ }
4945
+
4946
+ .pf-c-data-list__text {
4947
+ display: inline-block;
4948
+ }
4949
+
4950
+ .pf-c-data-list__text,
4951
+ .pf-c-data-list__cell {
4952
+ min-width: var(--pf-c-data-list--cell--MinWidth);
4953
+ max-width: 100%;
4954
+ overflow: var(--pf-c-data-list--cell--Overflow);
4955
+ text-overflow: var(--pf-c-data-list--cell--TextOverflow);
4956
+ word-break: var(--pf-c-data-list--cell--WordBreak);
4957
+ white-space: var(--pf-c-data-list--cell--WhiteSpace);
4958
+ }
4959
+
4960
+ .pf-c-data-list__expandable-content {
4961
+ max-height: var(--pf-c-data-list__expandable-content--MaxHeight);
4962
+ overflow-y: auto;
4963
+ border-top: var(--pf-c-data-list__expandable-content--BorderTopWidth) solid var(--pf-c-data-list__expandable-content--BorderTopColor);
4964
+ }
4965
+
4966
+ .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body {
4967
+ 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);
4968
+ }
4969
+
4970
+ .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body.pf-m-no-padding {
4971
+ padding: 0;
4972
+ }
4973
+
4974
+ :where(.pf-theme-dark) .pf-c-data-list {
4975
+ --pf-c-data-list--BorderTopColor: var(--pf-global--BorderColor--100);
4976
+ --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);
4977
+ --pf-c-data-list__item--BorderBottomColor: var(--pf-global--BorderColor--100);
4978
+ --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
4979
+ }
4980
+
4981
+ @media screen and (min-width: 768px) {
4982
+ .pf-c-data-list:not([class*=pf-m-grid]) {
4673
4983
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
4674
4984
  --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
4675
4985
  --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
@@ -4680,64 +4990,64 @@ label.pf-c-check, .pf-c-check__label,
4680
4990
  --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
4681
4991
  }
4682
4992
  }
4683
- @media screen and (min-width: 576px) and (min-width: 1200px) {
4684
- .pf-c-data-list.pf-m-grid-sm {
4993
+ @media screen and (min-width: 768px) and (min-width: 1200px) {
4994
+ .pf-c-data-list:not([class*=pf-m-grid]) {
4685
4995
  --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
4686
4996
  --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
4687
4997
  --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
4688
4998
  --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
4689
4999
  }
4690
5000
  }
4691
- @media screen and (min-width: 576px) {
4692
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__item-content {
5001
+ @media screen and (min-width: 768px) {
5002
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__item-content {
4693
5003
  display: flex;
4694
5004
  flex-wrap: wrap;
4695
5005
  flex-grow: 1;
4696
5006
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
4697
5007
  }
4698
5008
  }
4699
- @media screen and (min-width: 576px) {
4700
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5009
+ @media screen and (min-width: 768px) {
5010
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4701
5011
  margin-right: var(--pf-c-data-list__cell--MarginRight);
4702
5012
  }
4703
5013
 
4704
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell + .pf-c-data-list__cell {
5014
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell + .pf-c-data-list__cell {
4705
5015
  flex: 1;
4706
5016
  order: initial;
4707
5017
  }
4708
5018
 
4709
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-align-right {
5019
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-align-right {
4710
5020
  margin-left: auto;
4711
5021
  }
4712
5022
 
4713
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-no-fill {
5023
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-no-fill {
4714
5024
  flex: none;
4715
5025
  }
4716
5026
 
4717
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-2 {
5027
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-2 {
4718
5028
  flex-grow: 2;
4719
5029
  }
4720
5030
 
4721
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-3 {
5031
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-3 {
4722
5032
  flex-grow: 3;
4723
5033
  }
4724
5034
 
4725
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-4 {
5035
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-4 {
4726
5036
  flex-grow: 4;
4727
5037
  }
4728
5038
 
4729
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-5 {
5039
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-5 {
4730
5040
  flex-grow: 5;
4731
5041
  }
4732
5042
  }
4733
- @media screen and (min-width: 576px) {
4734
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__expandable-content {
5043
+ @media screen and (min-width: 768px) {
5044
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__expandable-content {
4735
5045
  max-height: initial;
4736
5046
  overflow-y: visible;
4737
5047
  }
4738
5048
  }
4739
- @media screen and (min-width: 768px) {
4740
- .pf-c-data-list.pf-m-grid-md {
5049
+ @media screen and (min-width: 0) {
5050
+ .pf-c-data-list.pf-m-grid-none {
4741
5051
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
4742
5052
  --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
4743
5053
  --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
@@ -4748,64 +5058,64 @@ label.pf-c-check, .pf-c-check__label,
4748
5058
  --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
4749
5059
  }
4750
5060
  }
4751
- @media screen and (min-width: 768px) and (min-width: 1200px) {
4752
- .pf-c-data-list.pf-m-grid-md {
5061
+ @media screen and (min-width: 0) and (min-width: 1200px) {
5062
+ .pf-c-data-list.pf-m-grid-none {
4753
5063
  --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
4754
5064
  --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
4755
5065
  --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
4756
5066
  --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
4757
5067
  }
4758
5068
  }
4759
- @media screen and (min-width: 768px) {
4760
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__item-content {
5069
+ @media screen and (min-width: 0) {
5070
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__item-content {
4761
5071
  display: flex;
4762
5072
  flex-wrap: wrap;
4763
5073
  flex-grow: 1;
4764
5074
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
4765
5075
  }
4766
5076
  }
4767
- @media screen and (min-width: 768px) {
4768
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5077
+ @media screen and (min-width: 0) {
5078
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4769
5079
  margin-right: var(--pf-c-data-list__cell--MarginRight);
4770
5080
  }
4771
5081
 
4772
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell + .pf-c-data-list__cell {
5082
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell + .pf-c-data-list__cell {
4773
5083
  flex: 1;
4774
5084
  order: initial;
4775
5085
  }
4776
5086
 
4777
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-align-right {
5087
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-align-right {
4778
5088
  margin-left: auto;
4779
5089
  }
4780
5090
 
4781
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-no-fill {
5091
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-no-fill {
4782
5092
  flex: none;
4783
5093
  }
4784
5094
 
4785
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-2 {
5095
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-2 {
4786
5096
  flex-grow: 2;
4787
5097
  }
4788
5098
 
4789
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-3 {
5099
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-3 {
4790
5100
  flex-grow: 3;
4791
5101
  }
4792
5102
 
4793
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-4 {
5103
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-4 {
4794
5104
  flex-grow: 4;
4795
5105
  }
4796
5106
 
4797
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-5 {
5107
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-5 {
4798
5108
  flex-grow: 5;
4799
5109
  }
4800
5110
  }
4801
- @media screen and (min-width: 768px) {
4802
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__expandable-content {
5111
+ @media screen and (min-width: 0) {
5112
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__expandable-content {
4803
5113
  max-height: initial;
4804
5114
  overflow-y: visible;
4805
5115
  }
4806
5116
  }
4807
- @media screen and (min-width: 992px) {
4808
- .pf-c-data-list.pf-m-grid-lg {
5117
+ @media screen and (min-width: 576px) {
5118
+ .pf-c-data-list.pf-m-grid-sm {
4809
5119
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
4810
5120
  --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
4811
5121
  --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
@@ -4816,64 +5126,64 @@ label.pf-c-check, .pf-c-check__label,
4816
5126
  --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
4817
5127
  }
4818
5128
  }
4819
- @media screen and (min-width: 992px) and (min-width: 1200px) {
4820
- .pf-c-data-list.pf-m-grid-lg {
5129
+ @media screen and (min-width: 576px) and (min-width: 1200px) {
5130
+ .pf-c-data-list.pf-m-grid-sm {
4821
5131
  --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
4822
5132
  --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
4823
5133
  --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
4824
5134
  --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
4825
5135
  }
4826
5136
  }
4827
- @media screen and (min-width: 992px) {
4828
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__item-content {
5137
+ @media screen and (min-width: 576px) {
5138
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__item-content {
4829
5139
  display: flex;
4830
5140
  flex-wrap: wrap;
4831
5141
  flex-grow: 1;
4832
5142
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
4833
5143
  }
4834
5144
  }
4835
- @media screen and (min-width: 992px) {
4836
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5145
+ @media screen and (min-width: 576px) {
5146
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4837
5147
  margin-right: var(--pf-c-data-list__cell--MarginRight);
4838
5148
  }
4839
5149
 
4840
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell + .pf-c-data-list__cell {
5150
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell + .pf-c-data-list__cell {
4841
5151
  flex: 1;
4842
5152
  order: initial;
4843
5153
  }
4844
5154
 
4845
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-align-right {
5155
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-align-right {
4846
5156
  margin-left: auto;
4847
5157
  }
4848
5158
 
4849
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-no-fill {
5159
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-no-fill {
4850
5160
  flex: none;
4851
5161
  }
4852
5162
 
4853
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-2 {
5163
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-2 {
4854
5164
  flex-grow: 2;
4855
5165
  }
4856
5166
 
4857
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-3 {
5167
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-3 {
4858
5168
  flex-grow: 3;
4859
5169
  }
4860
5170
 
4861
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-4 {
5171
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-4 {
4862
5172
  flex-grow: 4;
4863
5173
  }
4864
5174
 
4865
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-5 {
5175
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-5 {
4866
5176
  flex-grow: 5;
4867
5177
  }
4868
5178
  }
4869
- @media screen and (min-width: 992px) {
4870
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__expandable-content {
5179
+ @media screen and (min-width: 576px) {
5180
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__expandable-content {
4871
5181
  max-height: initial;
4872
5182
  overflow-y: visible;
4873
5183
  }
4874
5184
  }
4875
- @media screen and (min-width: 1200px) {
4876
- .pf-c-data-list.pf-m-grid-xl {
5185
+ @media screen and (min-width: 768px) {
5186
+ .pf-c-data-list.pf-m-grid-md {
4877
5187
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
4878
5188
  --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
4879
5189
  --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
@@ -4884,64 +5194,64 @@ label.pf-c-check, .pf-c-check__label,
4884
5194
  --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
4885
5195
  }
4886
5196
  }
4887
- @media screen and (min-width: 1200px) and (min-width: 1200px) {
4888
- .pf-c-data-list.pf-m-grid-xl {
5197
+ @media screen and (min-width: 768px) and (min-width: 1200px) {
5198
+ .pf-c-data-list.pf-m-grid-md {
4889
5199
  --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
4890
5200
  --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
4891
5201
  --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
4892
5202
  --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
4893
5203
  }
4894
5204
  }
4895
- @media screen and (min-width: 1200px) {
4896
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__item-content {
5205
+ @media screen and (min-width: 768px) {
5206
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__item-content {
4897
5207
  display: flex;
4898
5208
  flex-wrap: wrap;
4899
5209
  flex-grow: 1;
4900
5210
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
4901
5211
  }
4902
5212
  }
4903
- @media screen and (min-width: 1200px) {
4904
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5213
+ @media screen and (min-width: 768px) {
5214
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4905
5215
  margin-right: var(--pf-c-data-list__cell--MarginRight);
4906
5216
  }
4907
5217
 
4908
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell + .pf-c-data-list__cell {
5218
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell + .pf-c-data-list__cell {
4909
5219
  flex: 1;
4910
5220
  order: initial;
4911
5221
  }
4912
5222
 
4913
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-align-right {
5223
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-align-right {
4914
5224
  margin-left: auto;
4915
5225
  }
4916
5226
 
4917
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-no-fill {
5227
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-no-fill {
4918
5228
  flex: none;
4919
5229
  }
4920
5230
 
4921
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-2 {
5231
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-2 {
4922
5232
  flex-grow: 2;
4923
5233
  }
4924
5234
 
4925
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-3 {
5235
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-3 {
4926
5236
  flex-grow: 3;
4927
5237
  }
4928
5238
 
4929
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-4 {
5239
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-4 {
4930
5240
  flex-grow: 4;
4931
5241
  }
4932
5242
 
4933
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-5 {
5243
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-5 {
4934
5244
  flex-grow: 5;
4935
5245
  }
4936
5246
  }
4937
- @media screen and (min-width: 1200px) {
4938
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__expandable-content {
5247
+ @media screen and (min-width: 768px) {
5248
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__expandable-content {
4939
5249
  max-height: initial;
4940
5250
  overflow-y: visible;
4941
5251
  }
4942
5252
  }
4943
- @media screen and (min-width: 1450px) {
4944
- .pf-c-data-list.pf-m-grid-2xl {
5253
+ @media screen and (min-width: 992px) {
5254
+ .pf-c-data-list.pf-m-grid-lg {
4945
5255
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
4946
5256
  --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
4947
5257
  --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
@@ -4952,504 +5262,198 @@ label.pf-c-check, .pf-c-check__label,
4952
5262
  --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
4953
5263
  }
4954
5264
  }
4955
- @media screen and (min-width: 1450px) and (min-width: 1200px) {
4956
- .pf-c-data-list.pf-m-grid-2xl {
5265
+ @media screen and (min-width: 992px) and (min-width: 1200px) {
5266
+ .pf-c-data-list.pf-m-grid-lg {
4957
5267
  --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
4958
5268
  --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
4959
5269
  --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
4960
5270
  --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
4961
5271
  }
4962
5272
  }
4963
- @media screen and (min-width: 1450px) {
4964
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__item-content {
5273
+ @media screen and (min-width: 992px) {
5274
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__item-content {
4965
5275
  display: flex;
4966
5276
  flex-wrap: wrap;
4967
5277
  flex-grow: 1;
4968
5278
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
4969
- }
4970
- }
4971
- @media screen and (min-width: 1450px) {
4972
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4973
- margin-right: var(--pf-c-data-list__cell--MarginRight);
4974
- }
4975
-
4976
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell + .pf-c-data-list__cell {
4977
- flex: 1;
4978
- order: initial;
4979
- }
4980
-
4981
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-align-right {
4982
- margin-left: auto;
4983
- }
4984
-
4985
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-no-fill {
4986
- flex: none;
4987
- }
4988
-
4989
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-2 {
4990
- flex-grow: 2;
4991
- }
4992
-
4993
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-3 {
4994
- flex-grow: 3;
4995
- }
4996
-
4997
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-4 {
4998
- flex-grow: 4;
4999
- }
5000
-
5001
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-5 {
5002
- flex-grow: 5;
5003
- }
5004
- }
5005
- @media screen and (min-width: 1450px) {
5006
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__expandable-content {
5007
- max-height: initial;
5008
- overflow-y: visible;
5009
- }
5010
- }
5011
- .pf-c-data-list {
5012
- --pf-c-data-list--FontSize: 1em;
5013
- --pf-c-data-list--LineHeight: var(--pf-global--LineHeight--md);
5014
- --pf-c-data-list--BorderTopColor: var(--pf-global--BorderColor--300);
5015
- --pf-c-data-list--BorderTopWidth: var(--pf-global--spacer--sm);
5016
- --pf-c-data-list--sm--BorderTopWidth: var(--pf-global--BorderWidth--sm);
5017
- --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);
5018
- --pf-c-data-list__item--BackgroundColor: var(--pf-global--BackgroundColor--100);
5019
- --pf-c-data-list__item--m-selected--ZIndex: var(--pf-global--ZIndex--xs);
5020
- --pf-c-data-list__item--m-expanded--before--BackgroundColor: var(--pf-global--active-color--100);
5021
- --pf-c-data-list__item--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
5022
- --pf-c-data-list__item--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
5023
- --pf-c-data-list__item--m-selectable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
5024
- --pf-c-data-list__item--m-selectable--hover--ZIndex: calc(var(--pf-c-data-list__item--m-selected--ZIndex) + 1);
5025
- --pf-c-data-list__item--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
5026
- --pf-c-data-list__item--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
5027
- --pf-c-data-list__item--m-selectable--active--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
5028
- --pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor: var(--pf-global--active-color--300);
5029
- --pf-c-data-list__item--BorderBottomColor: var(--pf-global--BorderColor--300);
5030
- --pf-c-data-list__item--BorderBottomWidth: 0.5rem;
5031
- --pf-c-data-list__item--m-selectable--hover--item--BorderTopColor: var(--pf-c-data-list__item--BorderBottomColor);
5032
- --pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth: var(--pf-c-data-list__item--BorderBottomWidth);
5033
- --pf-c-data-list__item--sm--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
5034
- --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
5035
- --pf-c-data-list__item--before--BackgroundColor: transparent;
5036
- --pf-c-data-list__item--before--Width: var(--pf-global--BorderWidth--lg);
5037
- --pf-c-data-list__item--before--Transition: var(--pf-global--Transition);
5038
- --pf-c-data-list__item--before--Top: 0;
5039
- --pf-c-data-list__item--before--sm--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
5040
- --pf-c-data-list__item-row--PaddingRight: var(--pf-global--spacer--md);
5041
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-global--spacer--md);
5042
- --pf-c-data-list__item-row--xl--PaddingRight: var(--pf-global--spacer--lg);
5043
- --pf-c-data-list__item-row--xl--PaddingLeft: var(--pf-global--spacer--lg);
5044
- --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-global--spacer--lg);
5045
- --pf-c-data-list__cell--PaddingTop: var(--pf-global--spacer--lg);
5046
- --pf-c-data-list__cell--PaddingBottom: var(--pf-global--spacer--lg);
5047
- --pf-c-data-list__cell--MarginRight: var(--pf-global--spacer--xl);
5048
- --pf-c-data-list__cell--md--PaddingBottom: 0;
5049
- --pf-c-data-list__cell--m-icon--MarginRight: var(--pf-global--spacer--md);
5050
- --pf-c-data-list__cell--cell--PaddingTop: 0;
5051
- --pf-c-data-list__cell--cell--md--PaddingTop: var(--pf-global--spacer--lg);
5052
- --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--lg);
5053
- --pf-c-data-list--cell--MinWidth: initial;
5054
- --pf-c-data-list--cell--Overflow: visible;
5055
- --pf-c-data-list--cell--TextOverflow: clip;
5056
- --pf-c-data-list--cell--WhiteSpace: normal;
5057
- --pf-c-data-list--cell--WordBreak: normal;
5058
- --pf-c-data-list--cell--m-truncate--MinWidth: 5ch;
5059
- --pf-c-data-list__toggle--MarginLeft: calc(var(--pf-global--spacer--sm) * -1);
5060
- --pf-c-data-list__toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
5061
- --pf-c-data-list__toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
5062
- --pf-c-data-list__toggle-icon--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
5063
- --pf-c-data-list__toggle-icon--Transition: .2s ease-in 0s;
5064
- --pf-c-data-list__toggle-icon--Rotate: 0;
5065
- --pf-c-data-list__item--m-expanded__toggle-icon--Rotate: 90deg;
5066
- --pf-c-data-list__item-draggable-button--PaddingLeft: var(--pf-global--spacer--md);
5067
- --pf-c-data-list__item-draggable-button--PaddingRight: var(--pf-global--spacer--md);
5068
- --pf-c-data-list__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--lg) * -1);
5069
- --pf-c-data-list__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--lg) * -1);
5070
- --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-global--spacer--lg);
5071
- --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-global--spacer--lg);
5072
- --pf-c-data-list__item-draggable-button--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
5073
- --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-global--icon--Color--light);
5074
- --pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color: var(--pf-global--disabled-color--200);
5075
- --pf-c-data-list__item-draggable-button--hover__draggable-icon--Color: var(--pf-global--icon--Color--dark);
5076
- --pf-c-data-list__item-draggable-button--focus__draggable-icon--Color: var(--pf-global--icon--Color--dark);
5077
- --pf-c-data-list__item--m-ghost-row--after--BackgroundColor: var(--pf-global--BackgroundColor--100);
5078
- --pf-c-data-list__item--m-ghost-row--after--Opacity: .6;
5079
- --pf-c-data-list__item-control--PaddingTop: var(--pf-global--spacer--lg);
5080
- --pf-c-data-list__item-control--PaddingBottom: var(--pf-global--spacer--lg);
5081
- --pf-c-data-list__item-control--MarginRight: var(--pf-global--spacer--md);
5082
- --pf-c-data-list__item-control--md--MarginRight: var(--pf-global--spacer--xl);
5083
- --pf-c-data-list__item-control--not-last-child--MarginRight: var(--pf-global--spacer--md);
5084
- --pf-c-data-list__check--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
5085
- --pf-c-data-list__check--MarginTop: -0.0625rem;
5086
- --pf-c-data-list__item-action--Display: flex;
5087
- --pf-c-data-list__item-action--PaddingTop: var(--pf-global--spacer--lg);
5088
- --pf-c-data-list__item-action--PaddingBottom: var(--pf-global--spacer--lg);
5089
- --pf-c-data-list__item-action--MarginLeft: var(--pf-global--spacer--md);
5090
- --pf-c-data-list__item-action--md--MarginLeft: var(--pf-global--spacer--xl);
5091
- --pf-c-data-list__item-action--not-last-child--MarginRight: var(--pf-global--spacer--md);
5092
- --pf-c-data-list__item-action__action--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
5093
- --pf-c-data-list__action--MarginTop: var(--pf-c-data-list__item-action__action--MarginTop);
5094
- --pf-c-data-list__item-action__action--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
5095
- --pf-c-data-list__expandable-content--BorderTopWidth: var(--pf-global--BorderWidth--sm);
5096
- --pf-c-data-list__expandable-content--BorderTopColor: var(--pf-global--BorderColor--100);
5097
- --pf-c-data-list__expandable-content--MarginRight: calc(var(--pf-c-data-list__expandable-content-body--PaddingRight) * -1);
5098
- --pf-c-data-list__expandable-content--MarginLeft: calc(var(--pf-c-data-list__expandable-content-body--PaddingLeft) * -1);
5099
- --pf-c-data-list__expandable-content--MaxHeight: 37.5rem;
5100
- --pf-c-data-list__expandable-content--before--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
5101
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-global--spacer--md);
5102
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-global--spacer--md);
5103
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-global--spacer--md);
5104
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-global--spacer--md);
5105
- --pf-c-data-list__expandable-content-body--md--PaddingTop: var(--pf-global--spacer--lg);
5106
- --pf-c-data-list__expandable-content-body--xl--PaddingRight: var(--pf-global--spacer--lg);
5107
- --pf-c-data-list__expandable-content-body--md--PaddingBottom: var(--pf-global--spacer--lg);
5108
- --pf-c-data-list__expandable-content-body--xl--PaddingLeft: var(--pf-global--spacer--lg);
5109
- --pf-c-data-list--m-compact--FontSize: var(--pf-global--FontSize--sm);
5110
- --pf-c-data-list--m-compact--LineHeight: var(--pf-global--LineHeight--sm);
5111
- --pf-c-data-list--m-compact__check--FontSize: var(--pf-global--FontSize--md);
5112
- --pf-c-data-list--m-compact__cell--PaddingTop: var(--pf-global--spacer--sm);
5113
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-global--spacer--sm);
5114
- --pf-c-data-list--m-compact__cell--md--PaddingBottom: 0;
5115
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: 0;
5116
- --pf-c-data-list--m-compact__cell-cell--md--PaddingTop: var(--pf-global--spacer--sm);
5117
- --pf-c-data-list--m-compact__cell--cell--MarginRight: var(--pf-global--spacer--md);
5118
- --pf-c-data-list--m-compact__item-control--PaddingTop: var(--pf-global--spacer--sm);
5119
- --pf-c-data-list--m-compact__item-control--PaddingBottom: var(--pf-global--spacer--sm);
5120
- --pf-c-data-list--m-compact__item-control--MarginRight: var(--pf-global--spacer--md);
5121
- --pf-c-data-list--m-compact__item-action--PaddingTop: var(--pf-global--spacer--sm);
5122
- --pf-c-data-list--m-compact__item-action--PaddingBottom: var(--pf-global--spacer--sm);
5123
- --pf-c-data-list--m-compact__item-action--MarginLeft: var(--pf-global--spacer--md);
5124
- --pf-c-data-list--m-compact__item-action__action--MarginTop: calc(var(--pf-c-data-list--m-compact__item-action--PaddingTop) * -1);
5125
- --pf-c-data-list--m-compact__item-action__action--MarginBottom: calc(var(--pf-c-data-list--m-compact__item-action--PaddingBottom) * -1);
5126
- --pf-c-data-list--m-compact__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
5127
- --pf-c-data-list--m-compact__item-content--PaddingBottom: var(--pf-global--spacer--sm);
5128
- --pf-c-data-list--m-compact__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
5129
- --pf-c-data-list--m-compact__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--sm) * -1);
5130
- --pf-c-data-list--m-compact__item-draggable-button--PaddingTop: var(--pf-global--spacer--sm);
5131
- --pf-c-data-list--m-compact__item-draggable-button--PaddingBottom: var(--pf-global--spacer--sm);
5132
- --pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--sm);
5133
- color: var(--pf-global--Color--100);
5134
- font-size: var(--pf-c-data-list--FontSize);
5135
- line-height: var(--pf-c-data-list--LineHeight);
5136
- overflow-wrap: break-word;
5137
- list-style-type: disc;
5138
- border-top: var(--pf-c-data-list--BorderTopWidth) solid var(--pf-c-data-list--BorderTopColor);
5139
- }
5140
-
5141
- @media screen and (min-width: 576px) {
5142
- .pf-c-data-list {
5143
- --pf-c-data-list--BorderTopColor: var(--pf-c-data-list--sm--BorderTopColor);
5144
- --pf-c-data-list--BorderTopWidth: var(--pf-c-data-list--sm--BorderTopWidth);
5145
- }
5146
- }
5147
- @media screen and (min-width: 576px) {
5148
- .pf-c-data-list {
5149
- --pf-c-data-list__item--BorderBottomWidth: var(--pf-c-data-list__item--sm--BorderBottomWidth);
5150
- --pf-c-data-list__item--BorderBottomColor: var(--pf-c-data-list__item--sm--BorderBottomColor);
5151
- }
5152
- }
5153
- @media (min-width: 576px) {
5154
- .pf-c-data-list {
5155
- --pf-c-data-list__item--before--Top: var(--pf-c-data-list__item--before--sm--Top);
5156
- }
5157
- }
5158
- .pf-c-data-list.pf-m-compact {
5159
- --pf-c-data-list__check--FontSize: var(--pf-c-data-list--m-compact__check--FontSize);
5160
- --pf-c-data-list__action--MarginTop: var(--pf-c-data-list--m-compact__action--MarginTop);
5161
- --pf-c-data-list--FontSize: var(--pf-c-data-list--m-compact--FontSize);
5162
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list--m-compact__item-action--MarginLeft);
5163
- --pf-c-data-list__item-action--PaddingTop: var(--pf-c-data-list--m-compact__item-action--PaddingTop);
5164
- --pf-c-data-list__item-action--PaddingBottom: var(--pf-c-data-list--m-compact__item-action--PaddingBottom);
5165
- --pf-c-data-list__item-action__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
5166
- --pf-c-data-list__item-action__action--MarginBottom: var(--pf-c-data-list--m-compact__item-action__action--MarginBottom);
5167
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list--m-compact__item-control--MarginRight);
5168
- --pf-c-data-list__item-control--PaddingTop: var(--pf-c-data-list--m-compact__item-control--PaddingTop);
5169
- --pf-c-data-list__item-control--PaddingBottom: var(--pf-c-data-list--m-compact__item-control--PaddingBottom);
5170
- --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-c-data-list--m-compact__item-content--PaddingBottom);
5171
- --pf-c-data-list__item-draggable-button--MarginTop: var(--pf-c-data-list--m-compact__item-draggable-button--MarginTop);
5172
- --pf-c-data-list__item-draggable-button--MarginBottom: var(--pf-c-data-list--m-compact__item-draggable-button--MarginBottom);
5173
- --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingTop);
5174
- --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingBottom);
5175
- --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop);
5176
- font-size: var(--pf-c-data-list--m-compact--FontSize);
5177
- }
5178
-
5179
- .pf-c-data-list.pf-m-compact .pf-c-data-list__cell {
5180
- --pf-c-data-list__cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--PaddingTop);
5181
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--PaddingBottom);
5182
- --pf-c-data-list__cell--MarginRight: var(--pf-c-data-list--m-compact__cell--cell--MarginRight);
5183
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--PaddingTop);
5184
- }
5185
-
5186
- .pf-c-data-list.pf-m-compact .pf-c-data-list__check {
5187
- font-size: var(--pf-c-data-list--m-compact__check--FontSize);
5188
- }
5189
-
5190
- .pf-c-data-list.pf-m-drag-over {
5191
- overflow-anchor: none;
5192
- }
5193
-
5194
- .pf-c-data-list.pf-m-truncate,
5195
- .pf-c-data-list__item-row.pf-m-truncate,
5196
- .pf-c-data-list__cell.pf-m-truncate,
5197
- .pf-c-data-list__text.pf-m-truncate {
5198
- --pf-c-data-list--cell--MinWidth: var(--pf-c-data-list--cell--m-truncate--MinWidth);
5199
- --pf-c-data-list--cell--Overflow: hidden;
5200
- --pf-c-data-list--cell--TextOverflow: ellipsis;
5201
- --pf-c-data-list--cell--WhiteSpace: nowrap;
5202
- }
5203
-
5204
- .pf-c-data-list.pf-m-break-word,
5205
- .pf-c-data-list__item-row.pf-m-break-word,
5206
- .pf-c-data-list__cell.pf-m-break-word,
5207
- .pf-c-data-list__text.pf-m-break-word {
5208
- --pf-c-data-list--cell--WordBreak: break-word;
5209
- }
5210
-
5211
- .pf-c-data-list.pf-m-nowrap,
5212
- .pf-c-data-list__item-row.pf-m-nowrap,
5213
- .pf-c-data-list__cell.pf-m-nowrap,
5214
- .pf-c-data-list__text.pf-m-nowrap {
5215
- --pf-c-data-list--cell--WhiteSpace: nowrap;
5216
- }
5217
-
5218
- .pf-c-data-list__item {
5219
- position: relative;
5220
- display: flex;
5221
- flex-direction: column;
5222
- background-color: var(--pf-c-data-list__item--BackgroundColor);
5223
- border-bottom: var(--pf-c-data-list__item--BorderBottomWidth) solid var(--pf-c-data-list__item--BorderBottomColor);
5224
- }
5225
-
5226
- .pf-c-data-list__item::before {
5227
- position: absolute;
5228
- top: var(--pf-c-data-list__item--before--Top);
5229
- bottom: 0;
5230
- left: 0;
5231
- width: var(--pf-c-data-list__item--before--Width);
5232
- content: "";
5233
- background-color: var(--pf-c-data-list__item--before--BackgroundColor);
5234
- transition: var(--pf-c-data-list__item--before--Transition);
5235
- }
5236
-
5237
- .pf-c-data-list__item.pf-m-selectable {
5238
- cursor: pointer;
5239
- outline-offset: var(--pf-c-data-list__item--m-selectable--OutlineOffset);
5240
- }
5241
-
5242
- .pf-c-data-list__item.pf-m-selectable:hover, .pf-c-data-list__item.pf-m-selectable:focus {
5243
- position: relative;
5244
- z-index: var(--pf-c-data-list__item--m-selectable--hover--ZIndex);
5245
- }
5246
-
5247
- .pf-c-data-list__item.pf-m-selectable:hover:not(.pf-m-selected):not(:last-child), .pf-c-data-list__item.pf-m-selectable:focus:not(.pf-m-selected):not(:last-child) {
5248
- --pf-c-data-list__item--BorderBottomWidth: 0;
5249
- }
5250
-
5251
- .pf-c-data-list__item.pf-m-selectable:hover:not(.pf-m-selected):not(:last-child) + .pf-c-data-list__item, .pf-c-data-list__item.pf-m-selectable:focus:not(.pf-m-selected):not(:last-child) + .pf-c-data-list__item {
5252
- border-top: var(--pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth) solid var(--pf-c-data-list__item--m-selectable--hover--item--BorderTopColor);
5253
- }
5254
-
5255
- .pf-c-data-list__item.pf-m-selectable:hover {
5256
- box-shadow: var(--pf-c-data-list__item--m-selectable--hover--BoxShadow);
5257
- }
5258
-
5259
- .pf-c-data-list__item.pf-m-selectable:focus {
5260
- box-shadow: var(--pf-c-data-list__item--m-selectable--focus--BoxShadow);
5261
- }
5262
-
5263
- .pf-c-data-list__item.pf-m-selectable:active {
5264
- box-shadow: var(--pf-c-data-list__item--m-selectable--active--BoxShadow);
5265
- }
5266
-
5267
- .pf-c-data-list__item.pf-m-selected {
5268
- --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-selected--before--BackgroundColor);
5269
- position: relative;
5270
- z-index: var(--pf-c-data-list__item--m-selected--ZIndex);
5271
- box-shadow: var(--pf-c-data-list__item--m-selected--BoxShadow);
5272
- }
5273
-
5274
- .pf-c-data-list__item.pf-m-ghost-row::after {
5275
- position: absolute;
5276
- top: 0;
5277
- right: 0;
5278
- bottom: 0;
5279
- left: 0;
5280
- content: "";
5281
- background-color: var(--pf-c-data-list__item--m-ghost-row--after--BackgroundColor);
5282
- opacity: var(--pf-c-data-list__item--m-ghost-row--after--Opacity);
5279
+ }
5283
5280
  }
5281
+ @media screen and (min-width: 992px) {
5282
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5283
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
5284
+ }
5284
5285
 
5285
- .pf-c-data-list__item.pf-m-expanded {
5286
- --pf-c-data-list__toggle-icon--Rotate: var(--pf-c-data-list__item--m-expanded__toggle-icon--Rotate);
5287
- --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--before--BackgroundColor);
5288
- }
5286
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell + .pf-c-data-list__cell {
5287
+ flex: 1;
5288
+ order: initial;
5289
+ }
5289
5290
 
5290
- .pf-c-data-list__item.pf-m-expanded.pf-m-selectable:not(.pf-m-selected) {
5291
- --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor);
5292
- }
5291
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-align-right {
5292
+ margin-left: auto;
5293
+ }
5293
5294
 
5294
- .pf-c-data-list__item-row {
5295
- display: flex;
5296
- flex-wrap: nowrap;
5297
- padding-right: var(--pf-c-data-list__item-row--PaddingRight);
5298
- padding-left: var(--pf-c-data-list__item-row--PaddingLeft);
5299
- }
5295
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-no-fill {
5296
+ flex: none;
5297
+ }
5300
5298
 
5301
- .pf-c-data-list__item-control {
5302
- display: flex;
5303
- flex-wrap: nowrap;
5304
- padding-top: var(--pf-c-data-list__item-control--PaddingTop);
5305
- padding-bottom: var(--pf-c-data-list__item-control--PaddingBottom);
5306
- margin-right: var(--pf-c-data-list__item-control--MarginRight);
5307
- }
5299
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-2 {
5300
+ flex-grow: 2;
5301
+ }
5308
5302
 
5309
- .pf-c-data-list__item-control > *:not(:last-child) {
5310
- margin-right: var(--pf-c-data-list__item-control--not-last-child--MarginRight);
5311
- }
5303
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-3 {
5304
+ flex-grow: 3;
5305
+ }
5312
5306
 
5313
- .pf-c-data-list__check {
5314
- display: flex;
5315
- align-items: center;
5316
- align-self: flex-start;
5317
- height: var(--pf-c-data-list__check--Height);
5318
- margin-top: var(--pf-c-data-list__check--MarginTop);
5319
- }
5307
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-4 {
5308
+ flex-grow: 4;
5309
+ }
5320
5310
 
5321
- .pf-c-data-list__check > input {
5322
- cursor: pointer;
5311
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-5 {
5312
+ flex-grow: 5;
5313
+ }
5323
5314
  }
5324
-
5325
- .pf-c-data-list__item-draggable-button {
5326
- display: flex;
5327
- flex-direction: column;
5328
- padding: var(--pf-c-data-list__item-draggable-button--PaddingTop) var(--pf-c-data-list__item-draggable-button--PaddingRight) var(--pf-c-data-list__item-draggable-button--PaddingBottom) var(--pf-c-data-list__item-draggable-button--PaddingLeft);
5329
- margin: var(--pf-c-data-list__item-draggable-button--MarginTop) 0 var(--pf-c-data-list__item-draggable-button--MarginBottom) var(--pf-c-data-list__item-draggable-button--MarginLeft);
5330
- border: 0;
5315
+ @media screen and (min-width: 992px) {
5316
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__expandable-content {
5317
+ max-height: initial;
5318
+ overflow-y: visible;
5319
+ }
5331
5320
  }
5332
-
5333
- .pf-c-data-list__item-draggable-button:hover {
5334
- --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--hover__draggable-icon--Color);
5335
- cursor: grab;
5321
+ @media screen and (min-width: 1200px) {
5322
+ .pf-c-data-list.pf-m-grid-xl {
5323
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
5324
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
5325
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
5326
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
5327
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
5328
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
5329
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
5330
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
5331
+ }
5336
5332
  }
5337
-
5338
- .pf-c-data-list__item-draggable-button:focus {
5339
- --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--focus__draggable-icon--Color);
5333
+ @media screen and (min-width: 1200px) and (min-width: 1200px) {
5334
+ .pf-c-data-list.pf-m-grid-xl {
5335
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
5336
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
5337
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
5338
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
5339
+ }
5340
5340
  }
5341
-
5342
- .pf-c-data-list__item-draggable-button:active {
5343
- cursor: grabbing;
5341
+ @media screen and (min-width: 1200px) {
5342
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__item-content {
5343
+ display: flex;
5344
+ flex-wrap: wrap;
5345
+ flex-grow: 1;
5346
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
5347
+ }
5344
5348
  }
5349
+ @media screen and (min-width: 1200px) {
5350
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5351
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
5352
+ }
5345
5353
 
5346
- .pf-c-data-list__item-draggable-button.pf-m-disabled {
5347
- --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color);
5348
- pointer-events: none;
5349
- }
5354
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell + .pf-c-data-list__cell {
5355
+ flex: 1;
5356
+ order: initial;
5357
+ }
5350
5358
 
5351
- .pf-c-data-list__item-draggable-button .pf-c-data-list__item-draggable-icon {
5352
- color: var(--pf-c-data-list__item-draggable-button-icon--Color);
5353
- }
5359
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-align-right {
5360
+ margin-left: auto;
5361
+ }
5354
5362
 
5355
- .pf-c-data-list__item-action {
5356
- --pf-hidden-visible--visible--Display: var(--pf-c-data-list__item-action--Display);
5357
- align-items: flex-start;
5358
- align-content: flex-start;
5359
- padding-top: var(--pf-c-data-list__item-action--PaddingTop);
5360
- padding-bottom: var(--pf-c-data-list__item-action--PaddingBottom);
5361
- margin-left: var(--pf-c-data-list__item-action--MarginLeft);
5362
- }
5363
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-no-fill {
5364
+ flex: none;
5365
+ }
5363
5366
 
5364
- .pf-c-data-list__item-action > *:not(:last-child) {
5365
- margin-right: var(--pf-c-data-list__item-action--not-last-child--MarginRight);
5366
- }
5367
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-2 {
5368
+ flex-grow: 2;
5369
+ }
5367
5370
 
5368
- .pf-c-data-list__item-action .pf-c-data-list__action {
5369
- margin-top: var(--pf-c-data-list__action--MarginTop);
5370
- margin-bottom: var(--pf-c-data-list__item-action__action--MarginBottom);
5371
- }
5371
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-3 {
5372
+ flex-grow: 3;
5373
+ }
5372
5374
 
5373
- .pf-c-data-list__toggle {
5374
- margin: var(--pf-c-data-list__toggle--MarginTop) 0 var(--pf-c-data-list__toggle--MarginBottom) var(--pf-c-data-list__toggle--MarginLeft);
5375
- }
5375
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-4 {
5376
+ flex-grow: 4;
5377
+ }
5376
5378
 
5377
- .pf-c-data-list__toggle-icon {
5378
- height: var(--pf-c-data-list__toggle-icon--Height);
5379
- pointer-events: none;
5380
- transition: var(--pf-c-data-list__toggle-icon--Transition);
5381
- transform: rotate(var(--pf-c-data-list__toggle-icon--Rotate));
5379
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-5 {
5380
+ flex-grow: 5;
5381
+ }
5382
5382
  }
5383
-
5384
- .pf-c-data-list__item-content {
5385
- display: grid;
5386
- width: 100%;
5387
- grid-template-columns: auto 1fr;
5383
+ @media screen and (min-width: 1200px) {
5384
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__expandable-content {
5385
+ max-height: initial;
5386
+ overflow-y: visible;
5387
+ }
5388
5388
  }
5389
-
5390
- .pf-c-data-list__cell {
5391
- flex: 1;
5392
- grid-column: 1/-1;
5393
- padding-top: var(--pf-c-data-list__cell--PaddingTop);
5394
- padding-bottom: var(--pf-c-data-list__cell--PaddingBottom);
5389
+ @media screen and (min-width: 1450px) {
5390
+ .pf-c-data-list.pf-m-grid-2xl {
5391
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
5392
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
5393
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
5394
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
5395
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
5396
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
5397
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
5398
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
5399
+ }
5395
5400
  }
5396
-
5397
- .pf-c-data-list__cell + .pf-c-data-list__cell {
5398
- flex: 1 0 100%;
5399
- order: 1;
5400
- padding-top: var(--pf-c-data-list__cell--cell--PaddingTop);
5401
+ @media screen and (min-width: 1450px) and (min-width: 1200px) {
5402
+ .pf-c-data-list.pf-m-grid-2xl {
5403
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
5404
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
5405
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
5406
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
5407
+ }
5401
5408
  }
5402
-
5403
- .pf-c-data-list__cell.pf-m-icon {
5404
- flex-grow: 0;
5405
- margin-right: var(--pf-c-data-list__cell--m-icon--MarginRight);
5406
- grid-column: 1/2;
5409
+ @media screen and (min-width: 1450px) {
5410
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__item-content {
5411
+ display: flex;
5412
+ flex-wrap: wrap;
5413
+ flex-grow: 1;
5414
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
5415
+ }
5407
5416
  }
5417
+ @media screen and (min-width: 1450px) {
5418
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5419
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
5420
+ }
5408
5421
 
5409
- .pf-c-data-list__cell.pf-m-icon + .pf-c-data-list__cell {
5410
- grid-column: 2/3;
5411
- padding-top: var(--pf-c-data-list__cell--m-icon--cell--PaddingTop);
5412
- }
5422
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell + .pf-c-data-list__cell {
5423
+ flex: 1;
5424
+ order: initial;
5425
+ }
5413
5426
 
5414
- .pf-c-data-list__cell.pf-m-align-right {
5415
- margin-left: 0;
5416
- }
5427
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-align-right {
5428
+ margin-left: auto;
5429
+ }
5417
5430
 
5418
- .pf-c-data-list__text {
5419
- display: inline-block;
5420
- }
5431
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-no-fill {
5432
+ flex: none;
5433
+ }
5421
5434
 
5422
- .pf-c-data-list__text,
5423
- .pf-c-data-list__cell {
5424
- min-width: var(--pf-c-data-list--cell--MinWidth);
5425
- max-width: 100%;
5426
- overflow: var(--pf-c-data-list--cell--Overflow);
5427
- text-overflow: var(--pf-c-data-list--cell--TextOverflow);
5428
- word-break: var(--pf-c-data-list--cell--WordBreak);
5429
- white-space: var(--pf-c-data-list--cell--WhiteSpace);
5430
- }
5435
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-2 {
5436
+ flex-grow: 2;
5437
+ }
5431
5438
 
5432
- .pf-c-data-list__expandable-content {
5433
- max-height: var(--pf-c-data-list__expandable-content--MaxHeight);
5434
- overflow-y: auto;
5435
- border-top: var(--pf-c-data-list__expandable-content--BorderTopWidth) solid var(--pf-c-data-list__expandable-content--BorderTopColor);
5436
- }
5439
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-3 {
5440
+ flex-grow: 3;
5441
+ }
5437
5442
 
5438
- .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body {
5439
- padding: var(--pf-c-data-list__expandable-content-body--PaddingTop) var(--pf-c-data-list__expandable-content-body--PaddingRight) var(--pf-c-data-list__expandable-content-body--PaddingBottom) var(--pf-c-data-list__expandable-content-body--PaddingLeft);
5440
- }
5443
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-4 {
5444
+ flex-grow: 4;
5445
+ }
5441
5446
 
5442
- .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body.pf-m-no-padding {
5443
- padding: 0;
5447
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-5 {
5448
+ flex-grow: 5;
5449
+ }
5444
5450
  }
5445
-
5446
- :where(.pf-theme-dark) .pf-c-data-list {
5447
- --pf-c-data-list--BorderTopColor: var(--pf-global--BorderColor--100);
5448
- --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);
5449
- --pf-c-data-list__item--BorderBottomColor: var(--pf-global--BorderColor--100);
5450
- --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
5451
+ @media screen and (min-width: 1450px) {
5452
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__expandable-content {
5453
+ max-height: initial;
5454
+ overflow-y: visible;
5455
+ }
5451
5456
  }
5452
-
5453
5457
  .pf-c-date-picker {
5454
5458
  --pf-c-date-picker--m-top__calendar--Top: 0;
5455
5459
  --pf-c-date-picker--m-top__calendar--TranslateY: calc(-100% - var(--pf-global--spacer--xs));
@@ -8560,6 +8564,10 @@ label.pf-c-check, .pf-c-check__label,
8560
8564
  overflow: hidden;
8561
8565
  }
8562
8566
 
8567
+ .pf-c-expandable-section.pf-m-detached {
8568
+ --pf-c-expandable-section--m-truncate__toggle--MarginTop: 0;
8569
+ }
8570
+
8563
8571
  .pf-c-expandable-section__toggle {
8564
8572
  display: flex;
8565
8573
  padding: var(--pf-c-expandable-section__toggle--PaddingTop) var(--pf-c-expandable-section__toggle--PaddingRight) var(--pf-c-expandable-section__toggle--PaddingBottom) var(--pf-c-expandable-section__toggle--PaddingLeft);
@@ -16752,254 +16760,48 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
16752
16760
  --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-full--c-options-menu--Visibility);
16753
16761
  --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
16754
16762
  --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
16755
- }
16756
- }
16757
- @media (min-width: 1200px) {
16758
- .pf-c-pagination.pf-m-display-summary-on-xl {
16759
- --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-summary__nav--Display);
16760
- --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-summary__nav--Visibility);
16761
- --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-summary--c-options-menu--Display);
16762
- --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-summary--c-options-menu--Visibility);
16763
- --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-summary__total-items--Display);
16764
- --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-summary__total-items--Visibility);
16765
- }
16766
-
16767
- .pf-c-pagination.pf-m-display-full-on-xl {
16768
- --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-full__nav--Display);
16769
- --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-full__nav--Visibility);
16770
- --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-full--c-options-menu--Display);
16771
- --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-full--c-options-menu--Visibility);
16772
- --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
16773
- --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
16774
- }
16775
- }
16776
- @media (min-width: 1450px) {
16777
- .pf-c-pagination.pf-m-display-summary-on-2xl {
16778
- --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-summary__nav--Display);
16779
- --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-summary__nav--Visibility);
16780
- --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-summary--c-options-menu--Display);
16781
- --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-summary--c-options-menu--Visibility);
16782
- --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-summary__total-items--Display);
16783
- --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-summary__total-items--Visibility);
16784
- }
16785
-
16786
- .pf-c-pagination.pf-m-display-full-on-2xl {
16787
- --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-full__nav--Display);
16788
- --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-full__nav--Visibility);
16789
- --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-full--c-options-menu--Display);
16790
- --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-full--c-options-menu--Visibility);
16791
- --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
16792
- --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
16793
- }
16794
- }
16795
- :where(.pf-theme-dark) .pf-c-pagination {
16796
- --pf-c-pagination--m-sticky--BackgroundColor: var(--pf-global--BackgroundColor--300);
16797
- }
16798
-
16799
- .pf-c-popover {
16800
- --pf-c-popover--FontSize: var(--pf-global--FontSize--sm);
16801
- --pf-c-popover--MinWidth: calc(var(--pf-c-popover__content--PaddingLeft) + var(--pf-c-popover__content--PaddingRight) + 18.75rem);
16802
- --pf-c-popover--MaxWidth: calc(var(--pf-c-popover__content--PaddingLeft) + var(--pf-c-popover__content--PaddingRight) + 18.75rem);
16803
- --pf-c-popover--BoxShadow: var(--pf-global--BoxShadow--lg);
16804
- --pf-c-popover--m-danger__title-icon--Color: var(--pf-global--danger-color--100);
16805
- --pf-c-popover--m-warning__title-icon--Color: var(--pf-global--warning-color--100);
16806
- --pf-c-popover--m-success__title-icon--Color: var(--pf-global--success-color--100);
16807
- --pf-c-popover--m-info__title-icon--Color: var(--pf-global--info-color--100);
16808
- --pf-c-popover--m-default__title-icon--Color: var(--pf-global--default-color--200);
16809
- --pf-c-popover--m-danger__title-text--Color: var(--pf-global--danger-color--200);
16810
- --pf-c-popover--m-warning__title-text--Color: var(--pf-global--warning-color--200);
16811
- --pf-c-popover--m-success__title-text--Color: var(--pf-global--success-color--200);
16812
- --pf-c-popover--m-info__title-text--Color: var(--pf-global--info-color--200);
16813
- --pf-c-popover--m-default__title-text--Color: var(--pf-global--default-color--300);
16814
- --pf-c-popover__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
16815
- --pf-c-popover__content--PaddingTop: var(--pf-global--spacer--md);
16816
- --pf-c-popover__content--PaddingRight: var(--pf-global--spacer--md);
16817
- --pf-c-popover__content--PaddingBottom: var(--pf-global--spacer--md);
16818
- --pf-c-popover__content--PaddingLeft: var(--pf-global--spacer--md);
16819
- --pf-c-popover__arrow--Width: var(--pf-global--arrow--width-lg);
16820
- --pf-c-popover__arrow--Height: var(--pf-global--arrow--width-lg);
16821
- --pf-c-popover__arrow--BoxShadow: var(--pf-global--BoxShadow--lg);
16822
- --pf-c-popover__arrow--BackgroundColor: var(--pf-global--BackgroundColor--100);
16823
- --pf-c-popover__arrow--m-top--TranslateX: -50%;
16824
- --pf-c-popover__arrow--m-top--TranslateY: 50%;
16825
- --pf-c-popover__arrow--m-top--Rotate: 45deg;
16826
- --pf-c-popover__arrow--m-right--TranslateX: -50%;
16827
- --pf-c-popover__arrow--m-right--TranslateY: -50%;
16828
- --pf-c-popover__arrow--m-right--Rotate: 45deg;
16829
- --pf-c-popover__arrow--m-bottom--TranslateX: -50%;
16830
- --pf-c-popover__arrow--m-bottom--TranslateY: -50%;
16831
- --pf-c-popover__arrow--m-bottom--Rotate: 45deg;
16832
- --pf-c-popover__arrow--m-left--TranslateX: 50%;
16833
- --pf-c-popover__arrow--m-left--TranslateY: -50%;
16834
- --pf-c-popover__arrow--m-left--Rotate: 45deg;
16835
- --pf-c-popover--c-button--MarginLeft: var(--pf-global--spacer--sm);
16836
- --pf-c-popover--c-button--Top: calc(var(--pf-c-popover__content--PaddingTop) - var(--pf-global--spacer--form-element));
16837
- --pf-c-popover--c-button--Right: calc(var(--pf-c-popover__content--PaddingRight) - var(--pf-global--spacer--md));
16838
- --pf-c-popover--c-button--sibling--PaddingRight: var(--pf-global--spacer--2xl);
16839
- --pf-c-popover--c-title--MarginBottom: var(--pf-global--spacer--sm);
16840
- --pf-c-popover__title--MarginBottom: var(--pf-global--spacer--sm);
16841
- --pf-c-popover__title--LineHeight: var(--pf-global--LineHeight--md);
16842
- --pf-c-popover__title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
16843
- --pf-c-popover__title--FontSize: var(--pf-global--FontSize--md);
16844
- --pf-c-popover__title-icon--MarginRight: var(--pf-global--spacer--sm);
16845
- --pf-c-popover__title-icon--Color: var(--pf-global--Color--100);
16846
- --pf-c-popover__footer--MarginTop: var(--pf-global--spacer--md);
16847
- position: relative;
16848
- min-width: var(--pf-c-popover--MinWidth);
16849
- max-width: var(--pf-c-popover--MaxWidth);
16850
- font-size: var(--pf-c-popover--FontSize);
16851
- box-shadow: var(--pf-c-popover--BoxShadow);
16852
- }
16853
-
16854
- .pf-c-popover.pf-m-no-padding {
16855
- --pf-c-popover__content--PaddingTop: 0px;
16856
- --pf-c-popover__content--PaddingRight: 0px;
16857
- --pf-c-popover__content--PaddingBottom: 0px;
16858
- --pf-c-popover__content--PaddingLeft: 0px;
16859
- }
16860
-
16861
- .pf-c-popover.pf-m-width-auto {
16862
- --pf-c-popover--MinWidth: auto;
16863
- --pf-c-popover--MaxWidth: none;
16864
- }
16865
-
16866
- .pf-c-popover.pf-m-top .pf-c-popover__arrow, .pf-c-popover.pf-m-top-left .pf-c-popover__arrow, .pf-c-popover.pf-m-top-right .pf-c-popover__arrow {
16867
- bottom: 0;
16868
- left: 50%;
16869
- transform: translateX(var(--pf-c-popover__arrow--m-top--TranslateX)) translateY(var(--pf-c-popover__arrow--m-top--TranslateY)) rotate(var(--pf-c-popover__arrow--m-top--Rotate));
16870
- }
16871
-
16872
- .pf-c-popover.pf-m-bottom .pf-c-popover__arrow, .pf-c-popover.pf-m-bottom-left .pf-c-popover__arrow, .pf-c-popover.pf-m-bottom-right .pf-c-popover__arrow {
16873
- top: 0;
16874
- left: 50%;
16875
- transform: translateX(var(--pf-c-popover__arrow--m-bottom--TranslateX)) translateY(var(--pf-c-popover__arrow--m-bottom--TranslateY)) rotate(var(--pf-c-popover__arrow--m-bottom--Rotate));
16876
- }
16877
-
16878
- .pf-c-popover.pf-m-left .pf-c-popover__arrow, .pf-c-popover.pf-m-left-top .pf-c-popover__arrow, .pf-c-popover.pf-m-left-bottom .pf-c-popover__arrow {
16879
- top: 50%;
16880
- right: 0;
16881
- transform: translateX(var(--pf-c-popover__arrow--m-left--TranslateX)) translateY(var(--pf-c-popover__arrow--m-left--TranslateY)) rotate(var(--pf-c-popover__arrow--m-left--Rotate));
16882
- }
16883
-
16884
- .pf-c-popover.pf-m-right .pf-c-popover__arrow, .pf-c-popover.pf-m-right-top .pf-c-popover__arrow, .pf-c-popover.pf-m-right-bottom .pf-c-popover__arrow {
16885
- top: 50%;
16886
- left: 0;
16887
- transform: translateX(var(--pf-c-popover__arrow--m-right--TranslateX)) translateY(var(--pf-c-popover__arrow--m-right--TranslateY)) rotate(var(--pf-c-popover__arrow--m-right--Rotate));
16888
- }
16889
-
16890
- .pf-c-popover.pf-m-left-top .pf-c-popover__arrow, .pf-c-popover.pf-m-right-top .pf-c-popover__arrow {
16891
- top: var(--pf-c-popover__arrow--Height);
16892
- }
16893
-
16894
- .pf-c-popover.pf-m-left-bottom .pf-c-popover__arrow, .pf-c-popover.pf-m-right-bottom .pf-c-popover__arrow {
16895
- top: auto;
16896
- bottom: 0;
16897
- }
16898
-
16899
- .pf-c-popover.pf-m-top-left .pf-c-popover__arrow, .pf-c-popover.pf-m-bottom-left .pf-c-popover__arrow {
16900
- left: var(--pf-c-popover__arrow--Width);
16901
- }
16902
-
16903
- .pf-c-popover.pf-m-top-right .pf-c-popover__arrow, .pf-c-popover.pf-m-bottom-right .pf-c-popover__arrow {
16904
- right: 0;
16905
- left: auto;
16906
- }
16907
-
16908
- .pf-c-popover.pf-m-danger {
16909
- --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-danger__title-icon--Color);
16910
- --pf-c-popover__title-text--Color: var(--pf-c-popover--m-danger__title-text--Color);
16911
- }
16912
-
16913
- .pf-c-popover.pf-m-warning {
16914
- --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-warning__title-icon--Color);
16915
- --pf-c-popover__title-text--Color: var(--pf-c-popover--m-warning__title-text--Color);
16916
- }
16917
-
16918
- .pf-c-popover.pf-m-success {
16919
- --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-success__title-icon--Color);
16920
- --pf-c-popover__title-text--Color: var(--pf-c-popover--m-success__title-text--Color);
16921
- }
16922
-
16923
- .pf-c-popover.pf-m-default {
16924
- --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-default__title-icon--Color);
16925
- --pf-c-popover__title-text--Color: var(--pf-c-popover--m-default__title-text--Color);
16926
- }
16927
-
16928
- .pf-c-popover.pf-m-info {
16929
- --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-info__title-icon--Color);
16930
- --pf-c-popover__title-text--Color: var(--pf-c-popover--m-info__title-text--Color);
16931
- }
16932
-
16933
- .pf-c-popover__content {
16934
- position: relative;
16935
- padding: var(--pf-c-popover__content--PaddingTop) var(--pf-c-popover__content--PaddingRight) var(--pf-c-popover__content--PaddingBottom) var(--pf-c-popover__content--PaddingLeft);
16936
- background-color: var(--pf-c-popover__content--BackgroundColor);
16937
- }
16938
-
16939
- .pf-c-popover__content > .pf-c-title {
16940
- margin-bottom: var(--pf-c-popover--c-title--MarginBottom);
16941
- }
16942
-
16943
- .pf-c-popover__content > .pf-c-button {
16944
- position: absolute;
16945
- top: var(--pf-c-popover--c-button--Top);
16946
- right: var(--pf-c-popover--c-button--Right);
16947
- }
16948
-
16949
- .pf-c-popover__content > .pf-c-button + * {
16950
- padding-right: var(--pf-c-popover--c-button--sibling--PaddingRight);
16951
- }
16952
-
16953
- .pf-c-popover__arrow {
16954
- position: absolute;
16955
- width: var(--pf-c-popover__arrow--Width);
16956
- height: var(--pf-c-popover__arrow--Height);
16957
- pointer-events: none;
16958
- background-color: var(--pf-c-popover__arrow--BackgroundColor);
16959
- box-shadow: var(--pf-c-popover__arrow--BoxShadow);
16960
- }
16961
-
16962
- .pf-c-popover__title {
16963
- flex: 0 0 auto;
16964
- margin-bottom: var(--pf-c-popover__title--MarginBottom);
16965
- font-family: var(--pf-c-popover__title--FontFamily);
16966
- font-size: var(--pf-c-popover__title--FontSize);
16967
- line-height: var(--pf-c-popover__title--LineHeight);
16968
- }
16969
-
16970
- .pf-c-popover__title.pf-m-icon {
16971
- display: flex;
16972
- }
16973
-
16974
- .pf-c-popover__title-icon {
16975
- margin-right: var(--pf-c-popover__title-icon--MarginRight);
16976
- color: var(--pf-c-popover__title-icon--Color);
16977
- }
16978
-
16979
- .pf-c-popover__title-text {
16980
- color: var(--pf-c-popover__title-text--Color, inherit);
16981
- }
16982
-
16983
- .pf-c-popover__body {
16984
- word-wrap: break-word;
16763
+ }
16985
16764
  }
16765
+ @media (min-width: 1200px) {
16766
+ .pf-c-pagination.pf-m-display-summary-on-xl {
16767
+ --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-summary__nav--Display);
16768
+ --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-summary__nav--Visibility);
16769
+ --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-summary--c-options-menu--Display);
16770
+ --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-summary--c-options-menu--Visibility);
16771
+ --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-summary__total-items--Display);
16772
+ --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-summary__total-items--Visibility);
16773
+ }
16986
16774
 
16987
- .pf-c-popover__footer {
16988
- margin-top: var(--pf-c-popover__footer--MarginTop);
16775
+ .pf-c-pagination.pf-m-display-full-on-xl {
16776
+ --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-full__nav--Display);
16777
+ --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-full__nav--Visibility);
16778
+ --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-full--c-options-menu--Display);
16779
+ --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-full--c-options-menu--Visibility);
16780
+ --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
16781
+ --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
16782
+ }
16989
16783
  }
16784
+ @media (min-width: 1450px) {
16785
+ .pf-c-pagination.pf-m-display-summary-on-2xl {
16786
+ --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-summary__nav--Display);
16787
+ --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-summary__nav--Visibility);
16788
+ --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-summary--c-options-menu--Display);
16789
+ --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-summary--c-options-menu--Visibility);
16790
+ --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-summary__total-items--Display);
16791
+ --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-summary__total-items--Visibility);
16792
+ }
16990
16793
 
16991
- :where(.pf-theme-dark) .pf-c-popover {
16992
- --pf-c-popover--BoxShadow: none;
16993
- --pf-c-popover__arrow--BoxShadow: none;
16994
- --pf-c-popover__arrow--BackgroundColor: var(--pf-c-popover__content--BackgroundColor);
16995
- --pf-c-popover--m-default__title-text--Color: var(--pf-global--default-color--200);
16996
- --pf-c-popover--m-info__title-text--Color: var(--pf-global--info-color--100);
16997
- --pf-c-popover--m-success__title-text--Color: var(--pf-global--success-color--100);
16794
+ .pf-c-pagination.pf-m-display-full-on-2xl {
16795
+ --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-full__nav--Display);
16796
+ --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-full__nav--Visibility);
16797
+ --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-full--c-options-menu--Display);
16798
+ --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-full--c-options-menu--Visibility);
16799
+ --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
16800
+ --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
16801
+ }
16998
16802
  }
16999
-
17000
- :where(.pf-theme-dark) .pf-c-popover,
17001
- :where(.pf-theme-dark) .pf-c-popover .pf-c-popover__arrow {
17002
- border: 4px solid var(--pf-global--BorderColor--400);
16803
+ :where(.pf-theme-dark) .pf-c-pagination {
16804
+ --pf-c-pagination--m-sticky--BackgroundColor: var(--pf-global--BackgroundColor--300);
17003
16805
  }
17004
16806
 
17005
16807
  .pf-c-progress {
@@ -17888,6 +17690,212 @@ label.pf-c-radio, .pf-c-radio__label,
17888
17690
  cursor: not-allowed;
17889
17691
  }
17890
17692
 
17693
+ .pf-c-popover {
17694
+ --pf-c-popover--FontSize: var(--pf-global--FontSize--sm);
17695
+ --pf-c-popover--MinWidth: calc(var(--pf-c-popover__content--PaddingLeft) + var(--pf-c-popover__content--PaddingRight) + 18.75rem);
17696
+ --pf-c-popover--MaxWidth: calc(var(--pf-c-popover__content--PaddingLeft) + var(--pf-c-popover__content--PaddingRight) + 18.75rem);
17697
+ --pf-c-popover--BoxShadow: var(--pf-global--BoxShadow--lg);
17698
+ --pf-c-popover--m-danger__title-icon--Color: var(--pf-global--danger-color--100);
17699
+ --pf-c-popover--m-warning__title-icon--Color: var(--pf-global--warning-color--100);
17700
+ --pf-c-popover--m-success__title-icon--Color: var(--pf-global--success-color--100);
17701
+ --pf-c-popover--m-info__title-icon--Color: var(--pf-global--info-color--100);
17702
+ --pf-c-popover--m-default__title-icon--Color: var(--pf-global--default-color--200);
17703
+ --pf-c-popover--m-danger__title-text--Color: var(--pf-global--danger-color--200);
17704
+ --pf-c-popover--m-warning__title-text--Color: var(--pf-global--warning-color--200);
17705
+ --pf-c-popover--m-success__title-text--Color: var(--pf-global--success-color--200);
17706
+ --pf-c-popover--m-info__title-text--Color: var(--pf-global--info-color--200);
17707
+ --pf-c-popover--m-default__title-text--Color: var(--pf-global--default-color--300);
17708
+ --pf-c-popover__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
17709
+ --pf-c-popover__content--PaddingTop: var(--pf-global--spacer--md);
17710
+ --pf-c-popover__content--PaddingRight: var(--pf-global--spacer--md);
17711
+ --pf-c-popover__content--PaddingBottom: var(--pf-global--spacer--md);
17712
+ --pf-c-popover__content--PaddingLeft: var(--pf-global--spacer--md);
17713
+ --pf-c-popover__arrow--Width: var(--pf-global--arrow--width-lg);
17714
+ --pf-c-popover__arrow--Height: var(--pf-global--arrow--width-lg);
17715
+ --pf-c-popover__arrow--BoxShadow: var(--pf-global--BoxShadow--lg);
17716
+ --pf-c-popover__arrow--BackgroundColor: var(--pf-global--BackgroundColor--100);
17717
+ --pf-c-popover__arrow--m-top--TranslateX: -50%;
17718
+ --pf-c-popover__arrow--m-top--TranslateY: 50%;
17719
+ --pf-c-popover__arrow--m-top--Rotate: 45deg;
17720
+ --pf-c-popover__arrow--m-right--TranslateX: -50%;
17721
+ --pf-c-popover__arrow--m-right--TranslateY: -50%;
17722
+ --pf-c-popover__arrow--m-right--Rotate: 45deg;
17723
+ --pf-c-popover__arrow--m-bottom--TranslateX: -50%;
17724
+ --pf-c-popover__arrow--m-bottom--TranslateY: -50%;
17725
+ --pf-c-popover__arrow--m-bottom--Rotate: 45deg;
17726
+ --pf-c-popover__arrow--m-left--TranslateX: 50%;
17727
+ --pf-c-popover__arrow--m-left--TranslateY: -50%;
17728
+ --pf-c-popover__arrow--m-left--Rotate: 45deg;
17729
+ --pf-c-popover--c-button--MarginLeft: var(--pf-global--spacer--sm);
17730
+ --pf-c-popover--c-button--Top: calc(var(--pf-c-popover__content--PaddingTop) - var(--pf-global--spacer--form-element));
17731
+ --pf-c-popover--c-button--Right: calc(var(--pf-c-popover__content--PaddingRight) - var(--pf-global--spacer--md));
17732
+ --pf-c-popover--c-button--sibling--PaddingRight: var(--pf-global--spacer--2xl);
17733
+ --pf-c-popover--c-title--MarginBottom: var(--pf-global--spacer--sm);
17734
+ --pf-c-popover__title--MarginBottom: var(--pf-global--spacer--sm);
17735
+ --pf-c-popover__title--LineHeight: var(--pf-global--LineHeight--md);
17736
+ --pf-c-popover__title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
17737
+ --pf-c-popover__title--FontSize: var(--pf-global--FontSize--md);
17738
+ --pf-c-popover__title-icon--MarginRight: var(--pf-global--spacer--sm);
17739
+ --pf-c-popover__title-icon--Color: var(--pf-global--Color--100);
17740
+ --pf-c-popover__footer--MarginTop: var(--pf-global--spacer--md);
17741
+ position: relative;
17742
+ min-width: var(--pf-c-popover--MinWidth);
17743
+ max-width: var(--pf-c-popover--MaxWidth);
17744
+ font-size: var(--pf-c-popover--FontSize);
17745
+ box-shadow: var(--pf-c-popover--BoxShadow);
17746
+ }
17747
+
17748
+ .pf-c-popover.pf-m-no-padding {
17749
+ --pf-c-popover__content--PaddingTop: 0px;
17750
+ --pf-c-popover__content--PaddingRight: 0px;
17751
+ --pf-c-popover__content--PaddingBottom: 0px;
17752
+ --pf-c-popover__content--PaddingLeft: 0px;
17753
+ }
17754
+
17755
+ .pf-c-popover.pf-m-width-auto {
17756
+ --pf-c-popover--MinWidth: auto;
17757
+ --pf-c-popover--MaxWidth: none;
17758
+ }
17759
+
17760
+ .pf-c-popover.pf-m-top .pf-c-popover__arrow, .pf-c-popover.pf-m-top-left .pf-c-popover__arrow, .pf-c-popover.pf-m-top-right .pf-c-popover__arrow {
17761
+ bottom: 0;
17762
+ left: 50%;
17763
+ transform: translateX(var(--pf-c-popover__arrow--m-top--TranslateX)) translateY(var(--pf-c-popover__arrow--m-top--TranslateY)) rotate(var(--pf-c-popover__arrow--m-top--Rotate));
17764
+ }
17765
+
17766
+ .pf-c-popover.pf-m-bottom .pf-c-popover__arrow, .pf-c-popover.pf-m-bottom-left .pf-c-popover__arrow, .pf-c-popover.pf-m-bottom-right .pf-c-popover__arrow {
17767
+ top: 0;
17768
+ left: 50%;
17769
+ transform: translateX(var(--pf-c-popover__arrow--m-bottom--TranslateX)) translateY(var(--pf-c-popover__arrow--m-bottom--TranslateY)) rotate(var(--pf-c-popover__arrow--m-bottom--Rotate));
17770
+ }
17771
+
17772
+ .pf-c-popover.pf-m-left .pf-c-popover__arrow, .pf-c-popover.pf-m-left-top .pf-c-popover__arrow, .pf-c-popover.pf-m-left-bottom .pf-c-popover__arrow {
17773
+ top: 50%;
17774
+ right: 0;
17775
+ transform: translateX(var(--pf-c-popover__arrow--m-left--TranslateX)) translateY(var(--pf-c-popover__arrow--m-left--TranslateY)) rotate(var(--pf-c-popover__arrow--m-left--Rotate));
17776
+ }
17777
+
17778
+ .pf-c-popover.pf-m-right .pf-c-popover__arrow, .pf-c-popover.pf-m-right-top .pf-c-popover__arrow, .pf-c-popover.pf-m-right-bottom .pf-c-popover__arrow {
17779
+ top: 50%;
17780
+ left: 0;
17781
+ transform: translateX(var(--pf-c-popover__arrow--m-right--TranslateX)) translateY(var(--pf-c-popover__arrow--m-right--TranslateY)) rotate(var(--pf-c-popover__arrow--m-right--Rotate));
17782
+ }
17783
+
17784
+ .pf-c-popover.pf-m-left-top .pf-c-popover__arrow, .pf-c-popover.pf-m-right-top .pf-c-popover__arrow {
17785
+ top: var(--pf-c-popover__arrow--Height);
17786
+ }
17787
+
17788
+ .pf-c-popover.pf-m-left-bottom .pf-c-popover__arrow, .pf-c-popover.pf-m-right-bottom .pf-c-popover__arrow {
17789
+ top: auto;
17790
+ bottom: 0;
17791
+ }
17792
+
17793
+ .pf-c-popover.pf-m-top-left .pf-c-popover__arrow, .pf-c-popover.pf-m-bottom-left .pf-c-popover__arrow {
17794
+ left: var(--pf-c-popover__arrow--Width);
17795
+ }
17796
+
17797
+ .pf-c-popover.pf-m-top-right .pf-c-popover__arrow, .pf-c-popover.pf-m-bottom-right .pf-c-popover__arrow {
17798
+ right: 0;
17799
+ left: auto;
17800
+ }
17801
+
17802
+ .pf-c-popover.pf-m-danger {
17803
+ --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-danger__title-icon--Color);
17804
+ --pf-c-popover__title-text--Color: var(--pf-c-popover--m-danger__title-text--Color);
17805
+ }
17806
+
17807
+ .pf-c-popover.pf-m-warning {
17808
+ --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-warning__title-icon--Color);
17809
+ --pf-c-popover__title-text--Color: var(--pf-c-popover--m-warning__title-text--Color);
17810
+ }
17811
+
17812
+ .pf-c-popover.pf-m-success {
17813
+ --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-success__title-icon--Color);
17814
+ --pf-c-popover__title-text--Color: var(--pf-c-popover--m-success__title-text--Color);
17815
+ }
17816
+
17817
+ .pf-c-popover.pf-m-default {
17818
+ --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-default__title-icon--Color);
17819
+ --pf-c-popover__title-text--Color: var(--pf-c-popover--m-default__title-text--Color);
17820
+ }
17821
+
17822
+ .pf-c-popover.pf-m-info {
17823
+ --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-info__title-icon--Color);
17824
+ --pf-c-popover__title-text--Color: var(--pf-c-popover--m-info__title-text--Color);
17825
+ }
17826
+
17827
+ .pf-c-popover__content {
17828
+ position: relative;
17829
+ padding: var(--pf-c-popover__content--PaddingTop) var(--pf-c-popover__content--PaddingRight) var(--pf-c-popover__content--PaddingBottom) var(--pf-c-popover__content--PaddingLeft);
17830
+ background-color: var(--pf-c-popover__content--BackgroundColor);
17831
+ }
17832
+
17833
+ .pf-c-popover__content > .pf-c-title {
17834
+ margin-bottom: var(--pf-c-popover--c-title--MarginBottom);
17835
+ }
17836
+
17837
+ .pf-c-popover__content > .pf-c-button {
17838
+ position: absolute;
17839
+ top: var(--pf-c-popover--c-button--Top);
17840
+ right: var(--pf-c-popover--c-button--Right);
17841
+ }
17842
+
17843
+ .pf-c-popover__content > .pf-c-button + * {
17844
+ padding-right: var(--pf-c-popover--c-button--sibling--PaddingRight);
17845
+ }
17846
+
17847
+ .pf-c-popover__arrow {
17848
+ position: absolute;
17849
+ width: var(--pf-c-popover__arrow--Width);
17850
+ height: var(--pf-c-popover__arrow--Height);
17851
+ pointer-events: none;
17852
+ background-color: var(--pf-c-popover__arrow--BackgroundColor);
17853
+ box-shadow: var(--pf-c-popover__arrow--BoxShadow);
17854
+ }
17855
+
17856
+ .pf-c-popover__title {
17857
+ flex: 0 0 auto;
17858
+ margin-bottom: var(--pf-c-popover__title--MarginBottom);
17859
+ font-family: var(--pf-c-popover__title--FontFamily);
17860
+ font-size: var(--pf-c-popover__title--FontSize);
17861
+ line-height: var(--pf-c-popover__title--LineHeight);
17862
+ }
17863
+
17864
+ .pf-c-popover__title.pf-m-icon {
17865
+ display: flex;
17866
+ }
17867
+
17868
+ .pf-c-popover__title-icon {
17869
+ margin-right: var(--pf-c-popover__title-icon--MarginRight);
17870
+ color: var(--pf-c-popover__title-icon--Color);
17871
+ }
17872
+
17873
+ .pf-c-popover__title-text {
17874
+ color: var(--pf-c-popover__title-text--Color, inherit);
17875
+ }
17876
+
17877
+ .pf-c-popover__body {
17878
+ word-wrap: break-word;
17879
+ }
17880
+
17881
+ .pf-c-popover__footer {
17882
+ margin-top: var(--pf-c-popover__footer--MarginTop);
17883
+ }
17884
+
17885
+ :where(.pf-theme-dark) .pf-c-popover {
17886
+ --pf-c-popover--BoxShadow: none;
17887
+ --pf-c-popover__arrow--BoxShadow: none;
17888
+ --pf-c-popover__arrow--BackgroundColor: var(--pf-c-popover__content--BackgroundColor);
17889
+ --pf-c-popover--m-default__title-text--Color: var(--pf-global--default-color--200);
17890
+ --pf-c-popover--m-info__title-text--Color: var(--pf-global--info-color--100);
17891
+ --pf-c-popover--m-success__title-text--Color: var(--pf-global--success-color--100);
17892
+ }
17893
+
17894
+ :where(.pf-theme-dark) .pf-c-popover,
17895
+ :where(.pf-theme-dark) .pf-c-popover .pf-c-popover__arrow {
17896
+ border: 4px solid var(--pf-global--BorderColor--400);
17897
+ }
17898
+
17891
17899
  .pf-c-select {
17892
17900
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
17893
17901
  --pf-global--Color--200: var(--pf-global--Color--dark-200);