@patternfly/react-core 4.239.0 → 4.240.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/dist/umd/react-core.min.css +1251 -1251
  3. package/package.json +5 -5
package/dist/umd/react-core.min.css CHANGED
@@ -3989,6 +3989,86 @@ label.pf-c-check, .pf-c-check__label,
3989
3989
  border-top: 1px solid var(--pf-global--BorderColor--300);
3990
3990
  }
3991
3991
 
3992
+ .pf-c-data-list {
3993
+ --pf-global--Color--100: var(--pf-global--Color--dark-100);
3994
+ --pf-global--Color--200: var(--pf-global--Color--dark-200);
3995
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
3996
+ --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
3997
+ --pf-global--link--Color: var(--pf-global--link--Color--dark);
3998
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
3999
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
4000
+ }
4001
+
4002
+ .pf-c-data-list__item-action {
4003
+ --pf-hidden-visible--visible--Visibility: visible;
4004
+ --pf-hidden-visible--hidden--Display: none;
4005
+ --pf-hidden-visible--hidden--Visibility: hidden;
4006
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4007
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4008
+ display: var(--pf-hidden-visible--Display);
4009
+ visibility: var(--pf-hidden-visible--Visibility);
4010
+ }
4011
+
4012
+ .pf-m-hidden.pf-c-data-list__item-action {
4013
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4014
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4015
+ }
4016
+
4017
+ @media screen and (min-width: 576px) {
4018
+ .pf-m-hidden-on-sm.pf-c-data-list__item-action {
4019
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4020
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4021
+ }
4022
+
4023
+ .pf-m-visible-on-sm.pf-c-data-list__item-action {
4024
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4025
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4026
+ }
4027
+ }
4028
+ @media screen and (min-width: 768px) {
4029
+ .pf-m-hidden-on-md.pf-c-data-list__item-action {
4030
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4031
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4032
+ }
4033
+
4034
+ .pf-m-visible-on-md.pf-c-data-list__item-action {
4035
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4036
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4037
+ }
4038
+ }
4039
+ @media screen and (min-width: 992px) {
4040
+ .pf-m-hidden-on-lg.pf-c-data-list__item-action {
4041
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4042
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4043
+ }
4044
+
4045
+ .pf-m-visible-on-lg.pf-c-data-list__item-action {
4046
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4047
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4048
+ }
4049
+ }
4050
+ @media screen and (min-width: 1200px) {
4051
+ .pf-m-hidden-on-xl.pf-c-data-list__item-action {
4052
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4053
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4054
+ }
4055
+
4056
+ .pf-m-visible-on-xl.pf-c-data-list__item-action {
4057
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4058
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4059
+ }
4060
+ }
4061
+ @media screen and (min-width: 1450px) {
4062
+ .pf-m-hidden-on-2xl.pf-c-data-list__item-action {
4063
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4064
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4065
+ }
4066
+
4067
+ .pf-m-visible-on-2xl.pf-c-data-list__item-action {
4068
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4069
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4070
+ }
4071
+ }
3992
4072
  @media screen and (min-width: 768px) {
3993
4073
  .pf-c-data-list:not([class*=pf-m-grid]) {
3994
4074
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
@@ -4465,551 +4545,496 @@ label.pf-c-check, .pf-c-check__label,
4465
4545
  overflow-y: visible;
4466
4546
  }
4467
4547
  }
4468
- .pf-c-date-picker {
4469
- --pf-c-date-picker--m-top__calendar--Top: 0;
4470
- --pf-c-date-picker--m-top__calendar--TranslateY: calc(-100% - var(--pf-global--spacer--xs));
4471
- --pf-c-date-picker__helper-text--MarginTop: var(--pf-global--spacer--xs);
4472
- --pf-c-date-picker__helper-text--FontSize: var(--pf-global--FontSize--sm);
4473
- --pf-c-date-picker__helper-text--Color: var(--pf-global--Color--100);
4474
- --pf-c-date-picker__helper-text--m-error--Color: var(--pf-global--danger-color--100);
4475
- --pf-c-date-picker__input--c-form-control--Width: calc(var(--pf-c-date-picker__input--c-form-control--width-chars) * 1ch + var(--pf-c-date-picker__input--c-form-control--width-base));
4476
- --pf-c-date-picker__input--c-form-control--width-base: calc(var(--pf-global--spacer--xl) + var(--pf-global--spacer--sm));
4477
- --pf-c-date-picker__input--c-form-control--width-chars: 10;
4478
- --pf-c-date-picker__calendar--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
4479
- --pf-c-date-picker__calendar--BoxShadow: var(--pf-global--BoxShadow--md);
4480
- --pf-c-date-picker__calendar--ZIndex: var(--pf-global--ZIndex--sm);
4481
- --pf-c-date-picker__calendar--Top: calc(100% + var(--pf-global--spacer--xs));
4482
- --pf-c-date-picker__calendar--Right: auto;
4483
- --pf-c-date-picker__calendar--Left: 0;
4484
- --pf-c-date-picker__calendar--m-align-right--Right: 0;
4485
- --pf-c-date-picker__calendar--m-align-right--Left: auto;
4486
- position: relative;
4487
- display: inline-block;
4548
+ .pf-c-data-list {
4549
+ --pf-c-data-list--FontSize: 1em;
4550
+ --pf-c-data-list--LineHeight: var(--pf-global--LineHeight--md);
4551
+ --pf-c-data-list--BorderTopColor: var(--pf-global--BorderColor--300);
4552
+ --pf-c-data-list--BorderTopWidth: var(--pf-global--spacer--sm);
4553
+ --pf-c-data-list--sm--BorderTopWidth: var(--pf-global--BorderWidth--sm);
4554
+ --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);
4555
+ --pf-c-data-list__item--BackgroundColor: var(--pf-global--BackgroundColor--100);
4556
+ --pf-c-data-list__item--m-selected--ZIndex: var(--pf-global--ZIndex--xs);
4557
+ --pf-c-data-list__item--m-expanded--before--BackgroundColor: var(--pf-global--active-color--100);
4558
+ --pf-c-data-list__item--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
4559
+ --pf-c-data-list__item--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4560
+ --pf-c-data-list__item--m-selectable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
4561
+ --pf-c-data-list__item--m-selectable--hover--ZIndex: calc(var(--pf-c-data-list__item--m-selected--ZIndex) + 1);
4562
+ --pf-c-data-list__item--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4563
+ --pf-c-data-list__item--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4564
+ --pf-c-data-list__item--m-selectable--active--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4565
+ --pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor: var(--pf-global--active-color--300);
4566
+ --pf-c-data-list__item--BorderBottomColor: var(--pf-global--BorderColor--300);
4567
+ --pf-c-data-list__item--BorderBottomWidth: 0.5rem;
4568
+ --pf-c-data-list__item--m-selectable--hover--item--BorderTopColor: var(--pf-c-data-list__item--BorderBottomColor);
4569
+ --pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth: var(--pf-c-data-list__item--BorderBottomWidth);
4570
+ --pf-c-data-list__item--sm--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
4571
+ --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
4572
+ --pf-c-data-list__item--before--BackgroundColor: transparent;
4573
+ --pf-c-data-list__item--before--Width: var(--pf-global--BorderWidth--lg);
4574
+ --pf-c-data-list__item--before--Transition: var(--pf-global--Transition);
4575
+ --pf-c-data-list__item--before--Top: 0;
4576
+ --pf-c-data-list__item--before--sm--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
4577
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-global--spacer--md);
4578
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-global--spacer--md);
4579
+ --pf-c-data-list__item-row--xl--PaddingRight: var(--pf-global--spacer--lg);
4580
+ --pf-c-data-list__item-row--xl--PaddingLeft: var(--pf-global--spacer--lg);
4581
+ --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-global--spacer--lg);
4582
+ --pf-c-data-list__cell--PaddingTop: var(--pf-global--spacer--lg);
4583
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-global--spacer--lg);
4584
+ --pf-c-data-list__cell--MarginRight: var(--pf-global--spacer--xl);
4585
+ --pf-c-data-list__cell--md--PaddingBottom: 0;
4586
+ --pf-c-data-list__cell--m-icon--MarginRight: var(--pf-global--spacer--md);
4587
+ --pf-c-data-list__cell--cell--PaddingTop: 0;
4588
+ --pf-c-data-list__cell--cell--md--PaddingTop: var(--pf-global--spacer--lg);
4589
+ --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--lg);
4590
+ --pf-c-data-list--cell--MinWidth: initial;
4591
+ --pf-c-data-list--cell--Overflow: visible;
4592
+ --pf-c-data-list--cell--TextOverflow: clip;
4593
+ --pf-c-data-list--cell--WhiteSpace: normal;
4594
+ --pf-c-data-list--cell--WordBreak: normal;
4595
+ --pf-c-data-list--cell--m-truncate--MinWidth: 5ch;
4596
+ --pf-c-data-list__toggle--MarginLeft: calc(var(--pf-global--spacer--sm) * -1);
4597
+ --pf-c-data-list__toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
4598
+ --pf-c-data-list__toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
4599
+ --pf-c-data-list__toggle-icon--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
4600
+ --pf-c-data-list__toggle-icon--Transition: .2s ease-in 0s;
4601
+ --pf-c-data-list__toggle-icon--Rotate: 0;
4602
+ --pf-c-data-list__item--m-expanded__toggle-icon--Rotate: 90deg;
4603
+ --pf-c-data-list__item-draggable-button--PaddingLeft: var(--pf-global--spacer--md);
4604
+ --pf-c-data-list__item-draggable-button--PaddingRight: var(--pf-global--spacer--md);
4605
+ --pf-c-data-list__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--lg) * -1);
4606
+ --pf-c-data-list__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--lg) * -1);
4607
+ --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-global--spacer--lg);
4608
+ --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-global--spacer--lg);
4609
+ --pf-c-data-list__item-draggable-button--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
4610
+ --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-global--icon--Color--light);
4611
+ --pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color: var(--pf-global--disabled-color--200);
4612
+ --pf-c-data-list__item-draggable-button--hover__draggable-icon--Color: var(--pf-global--icon--Color--dark);
4613
+ --pf-c-data-list__item-draggable-button--focus__draggable-icon--Color: var(--pf-global--icon--Color--dark);
4614
+ --pf-c-data-list__item--m-ghost-row--after--BackgroundColor: var(--pf-global--BackgroundColor--100);
4615
+ --pf-c-data-list__item--m-ghost-row--after--Opacity: .6;
4616
+ --pf-c-data-list__item-control--PaddingTop: var(--pf-global--spacer--lg);
4617
+ --pf-c-data-list__item-control--PaddingBottom: var(--pf-global--spacer--lg);
4618
+ --pf-c-data-list__item-control--MarginRight: var(--pf-global--spacer--md);
4619
+ --pf-c-data-list__item-control--md--MarginRight: var(--pf-global--spacer--xl);
4620
+ --pf-c-data-list__item-control--not-last-child--MarginRight: var(--pf-global--spacer--md);
4621
+ --pf-c-data-list__check--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
4622
+ --pf-c-data-list__check--MarginTop: -0.0625rem;
4623
+ --pf-c-data-list__item-action--Display: flex;
4624
+ --pf-c-data-list__item-action--PaddingTop: var(--pf-global--spacer--lg);
4625
+ --pf-c-data-list__item-action--PaddingBottom: var(--pf-global--spacer--lg);
4626
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-global--spacer--md);
4627
+ --pf-c-data-list__item-action--md--MarginLeft: var(--pf-global--spacer--xl);
4628
+ --pf-c-data-list__item-action--not-last-child--MarginRight: var(--pf-global--spacer--md);
4629
+ --pf-c-data-list__item-action__action--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
4630
+ --pf-c-data-list__action--MarginTop: var(--pf-c-data-list__item-action__action--MarginTop);
4631
+ --pf-c-data-list__item-action__action--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
4632
+ --pf-c-data-list__expandable-content--BorderTopWidth: var(--pf-global--BorderWidth--sm);
4633
+ --pf-c-data-list__expandable-content--BorderTopColor: var(--pf-global--BorderColor--100);
4634
+ --pf-c-data-list__expandable-content--MarginRight: calc(var(--pf-c-data-list__expandable-content-body--PaddingRight) * -1);
4635
+ --pf-c-data-list__expandable-content--MarginLeft: calc(var(--pf-c-data-list__expandable-content-body--PaddingLeft) * -1);
4636
+ --pf-c-data-list__expandable-content--MaxHeight: 37.5rem;
4637
+ --pf-c-data-list__expandable-content--before--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
4638
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-global--spacer--md);
4639
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-global--spacer--md);
4640
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-global--spacer--md);
4641
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-global--spacer--md);
4642
+ --pf-c-data-list__expandable-content-body--md--PaddingTop: var(--pf-global--spacer--lg);
4643
+ --pf-c-data-list__expandable-content-body--xl--PaddingRight: var(--pf-global--spacer--lg);
4644
+ --pf-c-data-list__expandable-content-body--md--PaddingBottom: var(--pf-global--spacer--lg);
4645
+ --pf-c-data-list__expandable-content-body--xl--PaddingLeft: var(--pf-global--spacer--lg);
4646
+ --pf-c-data-list--m-compact--FontSize: var(--pf-global--FontSize--sm);
4647
+ --pf-c-data-list--m-compact--LineHeight: var(--pf-global--LineHeight--sm);
4648
+ --pf-c-data-list--m-compact__check--FontSize: var(--pf-global--FontSize--md);
4649
+ --pf-c-data-list--m-compact__cell--PaddingTop: var(--pf-global--spacer--sm);
4650
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-global--spacer--sm);
4651
+ --pf-c-data-list--m-compact__cell--md--PaddingBottom: 0;
4652
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: 0;
4653
+ --pf-c-data-list--m-compact__cell-cell--md--PaddingTop: var(--pf-global--spacer--sm);
4654
+ --pf-c-data-list--m-compact__cell--cell--MarginRight: var(--pf-global--spacer--md);
4655
+ --pf-c-data-list--m-compact__item-control--PaddingTop: var(--pf-global--spacer--sm);
4656
+ --pf-c-data-list--m-compact__item-control--PaddingBottom: var(--pf-global--spacer--sm);
4657
+ --pf-c-data-list--m-compact__item-control--MarginRight: var(--pf-global--spacer--md);
4658
+ --pf-c-data-list--m-compact__item-action--PaddingTop: var(--pf-global--spacer--sm);
4659
+ --pf-c-data-list--m-compact__item-action--PaddingBottom: var(--pf-global--spacer--sm);
4660
+ --pf-c-data-list--m-compact__item-action--MarginLeft: var(--pf-global--spacer--md);
4661
+ --pf-c-data-list--m-compact__item-action__action--MarginTop: calc(var(--pf-c-data-list--m-compact__item-action--PaddingTop) * -1);
4662
+ --pf-c-data-list--m-compact__item-action__action--MarginBottom: calc(var(--pf-c-data-list--m-compact__item-action--PaddingBottom) * -1);
4663
+ --pf-c-data-list--m-compact__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
4664
+ --pf-c-data-list--m-compact__item-content--PaddingBottom: var(--pf-global--spacer--sm);
4665
+ --pf-c-data-list--m-compact__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
4666
+ --pf-c-data-list--m-compact__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--sm) * -1);
4667
+ --pf-c-data-list--m-compact__item-draggable-button--PaddingTop: var(--pf-global--spacer--sm);
4668
+ --pf-c-data-list--m-compact__item-draggable-button--PaddingBottom: var(--pf-global--spacer--sm);
4669
+ --pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--sm);
4670
+ color: var(--pf-global--Color--100);
4671
+ font-size: var(--pf-c-data-list--FontSize);
4672
+ line-height: var(--pf-c-data-list--LineHeight);
4673
+ overflow-wrap: break-word;
4674
+ list-style-type: disc;
4675
+ border-top: var(--pf-c-data-list--BorderTopWidth) solid var(--pf-c-data-list--BorderTopColor);
4488
4676
  }
4489
4677
 
4490
- .pf-c-date-picker__helper-text {
4491
- margin-top: var(--pf-c-date-picker__helper-text--MarginTop);
4492
- font-size: var(--pf-c-date-picker__helper-text--FontSize);
4493
- color: var(--pf-c-date-picker__helper-text--Color);
4678
+ @media screen and (min-width: 576px) {
4679
+ .pf-c-data-list {
4680
+ --pf-c-data-list--BorderTopColor: var(--pf-c-data-list--sm--BorderTopColor);
4681
+ --pf-c-data-list--BorderTopWidth: var(--pf-c-data-list--sm--BorderTopWidth);
4682
+ }
4494
4683
  }
4495
-
4496
- .pf-c-date-picker__helper-text.pf-m-error {
4497
- --pf-c-date-picker__helper-text--Color: var(--pf-c-date-picker__helper-text--m-error--Color);
4684
+ @media screen and (min-width: 576px) {
4685
+ .pf-c-data-list {
4686
+ --pf-c-data-list__item--BorderBottomWidth: var(--pf-c-data-list__item--sm--BorderBottomWidth);
4687
+ --pf-c-data-list__item--BorderBottomColor: var(--pf-c-data-list__item--sm--BorderBottomColor);
4688
+ }
4498
4689
  }
4499
-
4500
- .pf-c-date-picker__input .pf-c-form-control {
4501
- width: var(--pf-c-date-picker__input--c-form-control--Width);
4690
+ @media (min-width: 576px) {
4691
+ .pf-c-data-list {
4692
+ --pf-c-data-list__item--before--Top: var(--pf-c-data-list__item--before--sm--Top);
4693
+ }
4502
4694
  }
4503
-
4504
- .pf-c-date-picker__calendar {
4505
- position: absolute;
4506
- top: var(--pf-c-date-picker__calendar--Top);
4507
- right: var(--pf-c-date-picker__calendar--Right);
4508
- left: var(--pf-c-date-picker__calendar--Left);
4509
- z-index: var(--pf-c-date-picker__calendar--ZIndex);
4510
- background-color: var(--pf-c-date-picker__calendar--BackgroundColor);
4511
- box-shadow: var(--pf-c-date-picker__calendar--BoxShadow);
4695
+ .pf-c-data-list.pf-m-compact {
4696
+ --pf-c-data-list__check--FontSize: var(--pf-c-data-list--m-compact__check--FontSize);
4697
+ --pf-c-data-list__action--MarginTop: var(--pf-c-data-list--m-compact__action--MarginTop);
4698
+ --pf-c-data-list--FontSize: var(--pf-c-data-list--m-compact--FontSize);
4699
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list--m-compact__item-action--MarginLeft);
4700
+ --pf-c-data-list__item-action--PaddingTop: var(--pf-c-data-list--m-compact__item-action--PaddingTop);
4701
+ --pf-c-data-list__item-action--PaddingBottom: var(--pf-c-data-list--m-compact__item-action--PaddingBottom);
4702
+ --pf-c-data-list__item-action__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
4703
+ --pf-c-data-list__item-action__action--MarginBottom: var(--pf-c-data-list--m-compact__item-action__action--MarginBottom);
4704
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list--m-compact__item-control--MarginRight);
4705
+ --pf-c-data-list__item-control--PaddingTop: var(--pf-c-data-list--m-compact__item-control--PaddingTop);
4706
+ --pf-c-data-list__item-control--PaddingBottom: var(--pf-c-data-list--m-compact__item-control--PaddingBottom);
4707
+ --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-c-data-list--m-compact__item-content--PaddingBottom);
4708
+ --pf-c-data-list__item-draggable-button--MarginTop: var(--pf-c-data-list--m-compact__item-draggable-button--MarginTop);
4709
+ --pf-c-data-list__item-draggable-button--MarginBottom: var(--pf-c-data-list--m-compact__item-draggable-button--MarginBottom);
4710
+ --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingTop);
4711
+ --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingBottom);
4712
+ --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop);
4713
+ font-size: var(--pf-c-data-list--m-compact--FontSize);
4512
4714
  }
4513
4715
 
4514
- .pf-c-date-picker__calendar.pf-m-align-right {
4515
- --pf-c-date-picker__calendar--Right: var(--pf-c-date-picker__calendar--m-align-right--Right);
4516
- --pf-c-date-picker__calendar--Left: var(--pf-c-date-picker__calendar--m-align-right--Left);
4716
+ .pf-c-data-list.pf-m-compact .pf-c-data-list__cell {
4717
+ --pf-c-data-list__cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--PaddingTop);
4718
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--PaddingBottom);
4719
+ --pf-c-data-list__cell--MarginRight: var(--pf-c-data-list--m-compact__cell--cell--MarginRight);
4720
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--PaddingTop);
4517
4721
  }
4518
4722
 
4519
- .pf-c-date-picker.pf-m-top .pf-c-date-picker__calendar {
4520
- --pf-c-date-picker__calendar--Top: var(--pf-c-date-picker--m-top__calendar--Top);
4521
- transform: translateY(var(--pf-c-date-picker--m-top__calendar--TranslateY));
4723
+ .pf-c-data-list.pf-m-compact .pf-c-data-list__check {
4724
+ font-size: var(--pf-c-data-list--m-compact__check--FontSize);
4522
4725
  }
4523
4726
 
4524
- :where(.pf-theme-dark) .pf-c-date-picker {
4525
- --pf-c-date-picker__calendar--BackgroundColor: var(--pf-global--BackgroundColor--300);
4526
- --pf-c-date-picker__calendar--Top: 100%;
4727
+ .pf-c-data-list.pf-m-drag-over {
4728
+ overflow-anchor: none;
4527
4729
  }
4528
4730
 
4529
- .pf-c-description-list {
4530
- --pf-c-description-list--RowGap: var(--pf-global--gutter--md);
4531
- --pf-c-description-list--ColumnGap: var(--pf-global--spacer--lg);
4532
- --pf-c-description-list--GridTemplateColumns--count: 1;
4533
- --pf-c-description-list--GridTemplateColumns--width: 1fr;
4534
- --pf-c-description-list--GridTemplateColumns--min: 0;
4535
- --pf-c-description-list--GridTemplateColumns: repeat(var(--pf-c-description-list--GridTemplateColumns--count), var(--pf-c-description-list--GridTemplateColumns--width));
4536
- --pf-c-description-list__group--RowGap: var(--pf-global--spacer--sm);
4537
- --pf-c-description-list__group--ColumnGap: var(--pf-global--spacer--sm);
4538
- --pf-c-description-list__group--GridTemplateColumns: auto;
4539
- --pf-c-description-list__group--GridTemplateRows: auto 1fr;
4540
- --pf-c-description-list__group--GridColumn: auto;
4541
- --pf-c-description-list--m-compact--RowGap: var(--pf-global--gutter);
4542
- --pf-c-description-list--m-compact--ColumnGap: var(--pf-global--spacer--sm);
4543
- --pf-c-description-list__term--Display: inline;
4544
- --pf-c-description-list__term--sm--Display: flex;
4545
- --pf-c-description-list__term--FontWeight: var(--pf-global--FontWeight--bold);
4546
- --pf-c-description-list__term--FontSize: var(--pf-global--FontSize--sm);
4547
- --pf-c-description-list__term--LineHeight: var(--pf-global--LineHeight--sm);
4548
- --pf-c-description-list__term-icon--MinWidth: var(--pf-global--icon--FontSize--sm);
4549
- --pf-c-description-list__term-icon--MarginRight: var(--pf-global--spacer--sm);
4550
- --pf-c-description-list__term-icon--Color: var(--pf-global--icon--Color--light);
4551
- --pf-c-description-list--m-vertical__group--GridTemplateColumns: repeat(var(--pf-c-description-list--GridTemplateColumns--count));
4552
- --pf-c-description-list--m-vertical__group--GridTemplateRows: auto 1fr;
4553
- --pf-c-description-list--m-horizontal__term--width: 12ch;
4554
- --pf-c-description-list--m-horizontal__description--width: minmax(10ch, auto);
4555
- --pf-c-description-list--m-horizontal__group--GridTemplateColumns: var(--pf-c-description-list__term--width) var(--pf-c-description-list--m-horizontal__description--width);
4556
- --pf-c-description-list--m-horizontal__group--GridTemplateRows: auto;
4557
- --pf-c-description-list--m-1-col--GridTemplateColumns--count: 1;
4558
- --pf-c-description-list--m-2-col--GridTemplateColumns--count: 2;
4559
- --pf-c-description-list--m-3-col--GridTemplateColumns--count: 3;
4560
- --pf-c-description-list--m-auto-fit--GridTemplateColumns--min: 15.625rem;
4561
- --pf-c-description-list--m-auto-fit--GridTemplateColumns--minmax--min: var(--pf-c-description-list--m-auto-fit--GridTemplateColumns--min);
4562
- --pf-c-description-list__text--m-help-text--TextDecorationColor: var(--pf-global--BorderColor--200);
4563
- --pf-c-description-list__text--m-help-text--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
4564
- --pf-c-description-list__text--m-help-text--TextDecorationOffset: 0.25rem;
4565
- --pf-c-description-list__text--m-help-text--hover--TextDecorationColor: var(--pf-global--Color--100);
4566
- --pf-c-description-list__text--m-help-text--focus--TextDecorationColor: var(--pf-global--Color--100);
4567
- --pf-c-description-list--m-display-lg__description--FontSize: var(--pf-global--FontSize--lg);
4568
- --pf-c-description-list--m-display-2xl__description--FontSize: var(--pf-global--FontSize--2xl);
4569
- display: grid;
4570
- align-items: baseline;
4571
- row-gap: var(--pf-c-description-list--RowGap);
4572
- column-gap: var(--pf-c-description-list--ColumnGap);
4573
- grid-template-columns: var(--pf-c-description-list--GridTemplateColumns);
4731
+ .pf-c-data-list.pf-m-truncate,
4732
+ .pf-c-data-list__item-row.pf-m-truncate,
4733
+ .pf-c-data-list__cell.pf-m-truncate,
4734
+ .pf-c-data-list__text.pf-m-truncate {
4735
+ --pf-c-data-list--cell--MinWidth: var(--pf-c-data-list--cell--m-truncate--MinWidth);
4736
+ --pf-c-data-list--cell--Overflow: hidden;
4737
+ --pf-c-data-list--cell--TextOverflow: ellipsis;
4738
+ --pf-c-data-list--cell--WhiteSpace: nowrap;
4574
4739
  }
4575
4740
 
4576
- @media screen and (min-width: 576px) {
4577
- .pf-c-description-list {
4578
- --pf-c-description-list__term--Display: var(--pf-c-description-list__term--sm--Display);
4579
- }
4580
- }
4581
- .pf-c-description-list[class*=pf-m-horizontal] {
4582
- --pf-c-description-list__term--width: var(--pf-c-description-list--m-horizontal__term--width);
4741
+ .pf-c-data-list.pf-m-break-word,
4742
+ .pf-c-data-list__item-row.pf-m-break-word,
4743
+ .pf-c-data-list__cell.pf-m-break-word,
4744
+ .pf-c-data-list__text.pf-m-break-word {
4745
+ --pf-c-data-list--cell--WordBreak: break-word;
4583
4746
  }
4584
4747
 
4585
- @media (min-width: 576px) {
4586
- .pf-c-description-list[class*=pf-m-horizontal] {
4587
- --pf-c-description-list__term--width: var(--pf-c-description-list--m-horizontal__term--width-on-sm, var(--pf-c-description-list--m-horizontal__term--width));
4588
- }
4589
- }
4590
- @media (min-width: 768px) {
4591
- .pf-c-description-list[class*=pf-m-horizontal] {
4592
- --pf-c-description-list__term--width: var(--pf-c-description-list--m-horizontal__term--width-on-md, var(--pf-c-description-list--m-horizontal__term--width-on-sm, var(--pf-c-description-list--m-horizontal__term--width)));
4593
- }
4594
- }
4595
- @media (min-width: 992px) {
4596
- .pf-c-description-list[class*=pf-m-horizontal] {
4597
- --pf-c-description-list__term--width: var(--pf-c-description-list--m-horizontal__term--width-on-lg, var(--pf-c-description-list--m-horizontal__term--width-on-md, var(--pf-c-description-list--m-horizontal__term--width-on-sm, var(--pf-c-description-list--m-horizontal__term--width))));
4598
- }
4599
- }
4600
- @media (min-width: 1200px) {
4601
- .pf-c-description-list[class*=pf-m-horizontal] {
4602
- --pf-c-description-list__term--width: var(--pf-c-description-list--m-horizontal__term--width-on-xl, var(--pf-c-description-list--m-horizontal__term--width-on-lg, var(--pf-c-description-list--m-horizontal__term--width-on-md, var(--pf-c-description-list--m-horizontal__term--width-on-sm, var(--pf-c-description-list--m-horizontal__term--width)))));
4603
- }
4604
- }
4605
- @media (min-width: 1450px) {
4606
- .pf-c-description-list[class*=pf-m-horizontal] {
4607
- --pf-c-description-list__term--width: var(--pf-c-description-list--m-horizontal__term--width-on-2xl, var(--pf-c-description-list--m-horizontal__term--width-on-xl, var(--pf-c-description-list--m-horizontal__term--width-on-lg, var(--pf-c-description-list--m-horizontal__term--width-on-md, var(--pf-c-description-list--m-horizontal__term--width-on-sm, var(--pf-c-description-list--m-horizontal__term--width))))));
4608
- }
4748
+ .pf-c-data-list.pf-m-nowrap,
4749
+ .pf-c-data-list__item-row.pf-m-nowrap,
4750
+ .pf-c-data-list__cell.pf-m-nowrap,
4751
+ .pf-c-data-list__text.pf-m-nowrap {
4752
+ --pf-c-data-list--cell--WhiteSpace: nowrap;
4609
4753
  }
4610
- .pf-c-description-list.pf-m-inline-grid {
4611
- display: inline-grid;
4754
+
4755
+ .pf-c-data-list__item {
4756
+ position: relative;
4757
+ display: flex;
4758
+ flex-direction: column;
4759
+ background-color: var(--pf-c-data-list__item--BackgroundColor);
4760
+ border-bottom: var(--pf-c-data-list__item--BorderBottomWidth) solid var(--pf-c-data-list__item--BorderBottomColor);
4612
4761
  }
4613
4762
 
4614
- .pf-c-description-list.pf-m-auto-column-widths {
4615
- --pf-c-description-list--GridTemplateColumns--width: minmax(8ch, max-content);
4763
+ .pf-c-data-list__item::before {
4764
+ position: absolute;
4765
+ top: var(--pf-c-data-list__item--before--Top);
4766
+ bottom: 0;
4767
+ left: 0;
4768
+ width: var(--pf-c-data-list__item--before--Width);
4769
+ content: "";
4770
+ background-color: var(--pf-c-data-list__item--before--BackgroundColor);
4771
+ transition: var(--pf-c-data-list__item--before--Transition);
4616
4772
  }
4617
4773
 
4618
- .pf-c-description-list.pf-m-auto-fit {
4619
- grid-template-columns: repeat(auto-fit, minmax(var(--pf-c-description-list--m-auto-fit--GridTemplateColumns--minmax--min), 1fr));
4620
- --pf-c-description-list--GridTemplateColumns--minmax--min: var(--pf-c-description-list--GridTemplateColumns--min);
4774
+ .pf-c-data-list__item.pf-m-selectable {
4775
+ cursor: pointer;
4776
+ outline-offset: var(--pf-c-data-list__item--m-selectable--OutlineOffset);
4621
4777
  }
4622
4778
 
4623
- @media (min-width: 576px) {
4624
- .pf-c-description-list.pf-m-auto-fit {
4625
- --pf-c-description-list--GridTemplateColumns--minmax--min: var(--pf-c-description-list--GridTemplateColumns--min-on-sm, var(--pf-c-description-list--GridTemplateColumns--min));
4626
- }
4779
+ .pf-c-data-list__item.pf-m-selectable:hover, .pf-c-data-list__item.pf-m-selectable:focus {
4780
+ position: relative;
4781
+ z-index: var(--pf-c-data-list__item--m-selectable--hover--ZIndex);
4627
4782
  }
4628
- @media (min-width: 768px) {
4629
- .pf-c-description-list.pf-m-auto-fit {
4630
- --pf-c-description-list--GridTemplateColumns--minmax--min: var(--pf-c-description-list--GridTemplateColumns--min-on-md, var(--pf-c-description-list--GridTemplateColumns--min-on-sm, var(--pf-c-description-list--GridTemplateColumns--min)));
4631
- }
4783
+
4784
+ .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) {
4785
+ --pf-c-data-list__item--BorderBottomWidth: 0;
4632
4786
  }
4633
- @media (min-width: 992px) {
4634
- .pf-c-description-list.pf-m-auto-fit {
4635
- --pf-c-description-list--GridTemplateColumns--minmax--min: var(--pf-c-description-list--GridTemplateColumns--min-on-lg, var(--pf-c-description-list--GridTemplateColumns--min-on-md, var(--pf-c-description-list--GridTemplateColumns--min-on-sm, var(--pf-c-description-list--GridTemplateColumns--min))));
4636
- }
4787
+
4788
+ .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 {
4789
+ 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);
4637
4790
  }
4638
- @media (min-width: 1200px) {
4639
- .pf-c-description-list.pf-m-auto-fit {
4640
- --pf-c-description-list--GridTemplateColumns--minmax--min: var(--pf-c-description-list--GridTemplateColumns--min-on-xl, var(--pf-c-description-list--GridTemplateColumns--min-on-lg, var(--pf-c-description-list--GridTemplateColumns--min-on-md, var(--pf-c-description-list--GridTemplateColumns--min-on-sm, var(--pf-c-description-list--GridTemplateColumns--min)))));
4641
- }
4791
+
4792
+ .pf-c-data-list__item.pf-m-selectable:hover {
4793
+ box-shadow: var(--pf-c-data-list__item--m-selectable--hover--BoxShadow);
4642
4794
  }
4643
- @media (min-width: 1450px) {
4644
- .pf-c-description-list.pf-m-auto-fit {
4645
- --pf-c-description-list--GridTemplateColumns--minmax--min: var(--pf-c-description-list--GridTemplateColumns--min-on-2xl, var(--pf-c-description-list--GridTemplateColumns--min-on-xl, var(--pf-c-description-list--GridTemplateColumns--min-on-lg, var(--pf-c-description-list--GridTemplateColumns--min-on-md, var(--pf-c-description-list--GridTemplateColumns--min-on-sm, var(--pf-c-description-list--GridTemplateColumns--min))))));
4646
- }
4795
+
4796
+ .pf-c-data-list__item.pf-m-selectable:focus {
4797
+ box-shadow: var(--pf-c-data-list__item--m-selectable--focus--BoxShadow);
4647
4798
  }
4648
- .pf-c-description-list.pf-m-compact {
4649
- --pf-c-description-list--RowGap: var(--pf-c-description-list--m-compact--RowGap);
4650
- --pf-c-description-list--ColumnGap: var(--pf-c-description-list--m-compact--ColumnGap);
4799
+
4800
+ .pf-c-data-list__item.pf-m-selectable:active {
4801
+ box-shadow: var(--pf-c-data-list__item--m-selectable--active--BoxShadow);
4651
4802
  }
4652
4803
 
4653
- .pf-c-description-list.pf-m-fluid {
4654
- --pf-c-description-list--m-horizontal__term--width: fit-content(20ch);
4804
+ .pf-c-data-list__item.pf-m-selected {
4805
+ --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-selected--before--BackgroundColor);
4806
+ position: relative;
4807
+ z-index: var(--pf-c-data-list__item--m-selected--ZIndex);
4808
+ box-shadow: var(--pf-c-data-list__item--m-selected--BoxShadow);
4655
4809
  }
4656
4810
 
4657
- .pf-c-description-list.pf-m-fill-columns {
4658
- display: block;
4659
- column-count: var(--pf-c-description-list--GridTemplateColumns--count);
4660
- margin-bottom: calc(var(--pf-c-description-list--RowGap) * -1);
4811
+ .pf-c-data-list__item.pf-m-ghost-row::after {
4812
+ position: absolute;
4813
+ top: 0;
4814
+ right: 0;
4815
+ bottom: 0;
4816
+ left: 0;
4817
+ content: "";
4818
+ background-color: var(--pf-c-data-list__item--m-ghost-row--after--BackgroundColor);
4819
+ opacity: var(--pf-c-data-list__item--m-ghost-row--after--Opacity);
4661
4820
  }
4662
4821
 
4663
- .pf-c-description-list.pf-m-fill-columns .pf-c-description-list__group,
4664
- .pf-c-description-list.pf-m-fill-columns > .pf-c-card {
4665
- display: inline-grid;
4666
- width: 100%;
4667
- margin-bottom: var(--pf-c-description-list--RowGap);
4668
- break-inside: avoid;
4669
- page-break-inside: avoid;
4670
- -webkit-column-break-inside: avoid;
4671
- -moz-column-break-inside: avoid;
4822
+ .pf-c-data-list__item.pf-m-expanded {
4823
+ --pf-c-data-list__toggle-icon--Rotate: var(--pf-c-data-list__item--m-expanded__toggle-icon--Rotate);
4824
+ --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--before--BackgroundColor);
4672
4825
  }
4673
4826
 
4674
- .pf-c-description-list.pf-m-display-lg {
4675
- --pf-c-description-list__description--FontSize: var(--pf-c-description-list--m-display-lg__description--FontSize);
4827
+ .pf-c-data-list__item.pf-m-expanded.pf-m-selectable:not(.pf-m-selected) {
4828
+ --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor);
4676
4829
  }
4677
4830
 
4678
- .pf-c-description-list.pf-m-display-2xl {
4679
- --pf-c-description-list__description--FontSize: var(--pf-c-description-list--m-display-2xl__description--FontSize);
4831
+ .pf-c-data-list__item-row {
4832
+ display: flex;
4833
+ flex-wrap: nowrap;
4834
+ padding-right: var(--pf-c-data-list__item-row--PaddingRight);
4835
+ padding-left: var(--pf-c-data-list__item-row--PaddingLeft);
4680
4836
  }
4681
4837
 
4682
- .pf-c-description-list > .pf-c-card {
4683
- align-self: stretch;
4684
- padding: var(--pf-c-card--first-child--PaddingTop) var(--pf-c-card--child--PaddingRight) var(--pf-c-card--child--PaddingBottom) var(--pf-c-card--child--PaddingLeft);
4838
+ .pf-c-data-list__item-control {
4839
+ display: flex;
4840
+ flex-wrap: nowrap;
4841
+ padding-top: var(--pf-c-data-list__item-control--PaddingTop);
4842
+ padding-bottom: var(--pf-c-data-list__item-control--PaddingBottom);
4843
+ margin-right: var(--pf-c-data-list__item-control--MarginRight);
4685
4844
  }
4686
4845
 
4687
- .pf-c-description-list__group,
4688
- .pf-c-description-list > .pf-c-card {
4689
- display: grid;
4690
- grid-column: var(--pf-c-description-list__group--GridColumn);
4691
- row-gap: var(--pf-c-description-list__group--RowGap);
4692
- column-gap: var(--pf-c-description-list__group--ColumnGap);
4693
- grid-template-columns: var(--pf-c-description-list__group--GridTemplateColumns);
4694
- grid-template-rows: var(--pf-c-description-list__group--GridTemplateRows);
4695
- align-items: baseline;
4846
+ .pf-c-data-list__item-control > *:not(:last-child) {
4847
+ margin-right: var(--pf-c-data-list__item-control--not-last-child--MarginRight);
4696
4848
  }
4697
4849
 
4698
- .pf-c-description-list__term,
4699
- .pf-c-description-list__description {
4700
- min-width: 0;
4701
- text-align: left;
4702
- overflow-wrap: break-word;
4850
+ .pf-c-data-list__check {
4851
+ display: flex;
4852
+ align-items: center;
4853
+ align-self: flex-start;
4854
+ height: var(--pf-c-data-list__check--Height);
4855
+ margin-top: var(--pf-c-data-list__check--MarginTop);
4703
4856
  }
4704
4857
 
4705
- .pf-c-description-list__term {
4706
- display: var(--pf-c-description-list__term--Display);
4707
- font-size: var(--pf-c-description-list__term--FontSize);
4708
- font-weight: var(--pf-c-description-list__term--FontWeight);
4709
- line-height: var(--pf-c-description-list__term--LineHeight);
4858
+ .pf-c-data-list__check > input {
4859
+ cursor: pointer;
4710
4860
  }
4711
4861
 
4712
- .pf-c-description-list__term .pf-c-description-list__text {
4713
- display: inline;
4862
+ .pf-c-data-list__item-draggable-button {
4863
+ display: flex;
4864
+ flex-direction: column;
4865
+ 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);
4866
+ 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);
4867
+ border: 0;
4714
4868
  }
4715
4869
 
4716
- .pf-c-description-list__term-icon {
4717
- flex-shrink: 0;
4718
- min-width: var(--pf-c-description-list__term-icon--MinWidth);
4719
- margin-right: var(--pf-c-description-list__term-icon--MarginRight);
4720
- color: var(--pf-c-description-list__term-icon--Color);
4870
+ .pf-c-data-list__item-draggable-button:hover {
4871
+ --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--hover__draggable-icon--Color);
4872
+ cursor: grab;
4721
4873
  }
4722
4874
 
4723
- .pf-c-description-list__description {
4724
- font-size: var(--pf-c-description-list__description--FontSize, inherit);
4875
+ .pf-c-data-list__item-draggable-button:focus {
4876
+ --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--focus__draggable-icon--Color);
4725
4877
  }
4726
4878
 
4727
- .pf-c-description-list__text {
4728
- min-width: 0;
4879
+ .pf-c-data-list__item-draggable-button:active {
4880
+ cursor: grabbing;
4729
4881
  }
4730
4882
 
4731
- .pf-c-description-list__text.pf-m-help-text {
4732
- text-decoration: underline;
4733
- cursor: pointer;
4734
- text-decoration-style: dashed;
4735
- text-decoration-thickness: var(--pf-c-description-list__text--m-help-text--TextDecorationThickness);
4736
- text-underline-offset: var(--pf-c-description-list__text--m-help-text--TextDecorationOffset);
4737
- text-decoration-color: var(--pf-c-description-list__text--m-help-text--TextDecorationColor);
4883
+ .pf-c-data-list__item-draggable-button.pf-m-disabled {
4884
+ --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color);
4885
+ pointer-events: none;
4738
4886
  }
4739
4887
 
4740
- .pf-c-description-list__text.pf-m-help-text:hover {
4741
- --pf-c-description-list__text--m-help-text--TextDecorationColor: var(--pf-c-description-list__text--m-help-text--hover--TextDecorationColor);
4888
+ .pf-c-data-list__item-draggable-button .pf-c-data-list__item-draggable-icon {
4889
+ color: var(--pf-c-data-list__item-draggable-button-icon--Color);
4742
4890
  }
4743
4891
 
4744
- .pf-c-description-list__text.pf-m-help-text:focus {
4745
- --pf-c-description-list__text--m-help-text--TextDecorationColor: var(--pf-c-description-list__text--m-help-text--focus--TextDecorationColor);
4892
+ .pf-c-data-list__item-action {
4893
+ --pf-hidden-visible--visible--Display: var(--pf-c-data-list__item-action--Display);
4894
+ align-items: flex-start;
4895
+ align-content: flex-start;
4896
+ padding-top: var(--pf-c-data-list__item-action--PaddingTop);
4897
+ padding-bottom: var(--pf-c-data-list__item-action--PaddingBottom);
4898
+ margin-left: var(--pf-c-data-list__item-action--MarginLeft);
4746
4899
  }
4747
4900
 
4748
- .pf-c-description-list.pf-m-1-col {
4749
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-1-col--GridTemplateColumns--count);
4901
+ .pf-c-data-list__item-action > *:not(:last-child) {
4902
+ margin-right: var(--pf-c-data-list__item-action--not-last-child--MarginRight);
4750
4903
  }
4751
4904
 
4752
- .pf-c-description-list.pf-m-2-col {
4753
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-2-col--GridTemplateColumns--count);
4905
+ .pf-c-data-list__item-action .pf-c-data-list__action {
4906
+ margin-top: var(--pf-c-data-list__action--MarginTop);
4907
+ margin-bottom: var(--pf-c-data-list__item-action__action--MarginBottom);
4754
4908
  }
4755
4909
 
4756
- .pf-c-description-list.pf-m-3-col {
4757
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-3-col--GridTemplateColumns--count);
4910
+ .pf-c-data-list__toggle {
4911
+ margin: var(--pf-c-data-list__toggle--MarginTop) 0 var(--pf-c-data-list__toggle--MarginBottom) var(--pf-c-data-list__toggle--MarginLeft);
4758
4912
  }
4759
4913
 
4760
- .pf-c-description-list.pf-m-horizontal {
4761
- --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
4762
- --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
4914
+ .pf-c-data-list__toggle-icon {
4915
+ height: var(--pf-c-data-list__toggle-icon--Height);
4916
+ pointer-events: none;
4917
+ transition: var(--pf-c-data-list__toggle-icon--Transition);
4918
+ transform: rotate(var(--pf-c-data-list__toggle-icon--Rotate));
4763
4919
  }
4764
4920
 
4765
- .pf-c-description-list.pf-m-vertical {
4766
- --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
4767
- --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
4921
+ .pf-c-data-list__item-content {
4922
+ display: grid;
4923
+ width: 100%;
4924
+ grid-template-columns: auto 1fr;
4768
4925
  }
4769
4926
 
4770
- @media (min-width: 576px) {
4771
- .pf-c-description-list.pf-m-1-col-on-sm {
4772
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-1-col--GridTemplateColumns--count);
4773
- }
4927
+ .pf-c-data-list__cell {
4928
+ flex: 1;
4929
+ grid-column: 1/-1;
4930
+ padding-top: var(--pf-c-data-list__cell--PaddingTop);
4931
+ padding-bottom: var(--pf-c-data-list__cell--PaddingBottom);
4932
+ }
4774
4933
 
4775
- .pf-c-description-list.pf-m-2-col-on-sm {
4776
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-2-col--GridTemplateColumns--count);
4777
- }
4934
+ .pf-c-data-list__cell + .pf-c-data-list__cell {
4935
+ flex: 1 0 100%;
4936
+ order: 1;
4937
+ padding-top: var(--pf-c-data-list__cell--cell--PaddingTop);
4938
+ }
4778
4939
 
4779
- .pf-c-description-list.pf-m-3-col-on-sm {
4780
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-3-col--GridTemplateColumns--count);
4781
- }
4940
+ .pf-c-data-list__cell.pf-m-icon {
4941
+ flex-grow: 0;
4942
+ margin-right: var(--pf-c-data-list__cell--m-icon--MarginRight);
4943
+ grid-column: 1/2;
4944
+ }
4782
4945
 
4783
- .pf-c-description-list.pf-m-horizontal-on-sm {
4784
- --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
4785
- --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
4786
- }
4946
+ .pf-c-data-list__cell.pf-m-icon + .pf-c-data-list__cell {
4947
+ grid-column: 2/3;
4948
+ padding-top: var(--pf-c-data-list__cell--m-icon--cell--PaddingTop);
4949
+ }
4787
4950
 
4788
- .pf-c-description-list.pf-m-vertical-on-sm {
4789
- --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
4790
- --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
4791
- }
4951
+ .pf-c-data-list__cell.pf-m-align-right {
4952
+ margin-left: 0;
4792
4953
  }
4793
- @media (min-width: 768px) {
4794
- .pf-c-description-list.pf-m-1-col-on-md {
4795
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-1-col--GridTemplateColumns--count);
4796
- }
4797
4954
 
4798
- .pf-c-description-list.pf-m-2-col-on-md {
4799
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-2-col--GridTemplateColumns--count);
4800
- }
4955
+ .pf-c-data-list__text {
4956
+ display: inline-block;
4957
+ }
4801
4958
 
4802
- .pf-c-description-list.pf-m-3-col-on-md {
4803
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-3-col--GridTemplateColumns--count);
4804
- }
4959
+ .pf-c-data-list__text,
4960
+ .pf-c-data-list__cell {
4961
+ min-width: var(--pf-c-data-list--cell--MinWidth);
4962
+ max-width: 100%;
4963
+ overflow: var(--pf-c-data-list--cell--Overflow);
4964
+ text-overflow: var(--pf-c-data-list--cell--TextOverflow);
4965
+ word-break: var(--pf-c-data-list--cell--WordBreak);
4966
+ white-space: var(--pf-c-data-list--cell--WhiteSpace);
4967
+ }
4805
4968
 
4806
- .pf-c-description-list.pf-m-horizontal-on-md {
4807
- --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
4808
- --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
4809
- }
4969
+ .pf-c-data-list__expandable-content {
4970
+ max-height: var(--pf-c-data-list__expandable-content--MaxHeight);
4971
+ overflow-y: auto;
4972
+ border-top: var(--pf-c-data-list__expandable-content--BorderTopWidth) solid var(--pf-c-data-list__expandable-content--BorderTopColor);
4973
+ }
4810
4974
 
4811
- .pf-c-description-list.pf-m-vertical-on-md {
4812
- --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
4813
- --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
4814
- }
4975
+ .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body {
4976
+ 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);
4815
4977
  }
4816
- @media (min-width: 992px) {
4817
- .pf-c-description-list.pf-m-1-col-on-lg {
4818
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-1-col--GridTemplateColumns--count);
4819
- }
4820
4978
 
4821
- .pf-c-description-list.pf-m-2-col-on-lg {
4822
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-2-col--GridTemplateColumns--count);
4823
- }
4979
+ .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body.pf-m-no-padding {
4980
+ padding: 0;
4981
+ }
4824
4982
 
4825
- .pf-c-description-list.pf-m-3-col-on-lg {
4826
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-3-col--GridTemplateColumns--count);
4827
- }
4983
+ :where(.pf-theme-dark) .pf-c-data-list {
4984
+ --pf-c-data-list--BorderTopColor: var(--pf-global--BorderColor--100);
4985
+ --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);
4986
+ --pf-c-data-list__item--BorderBottomColor: var(--pf-global--BorderColor--100);
4987
+ --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
4988
+ }
4828
4989
 
4829
- .pf-c-description-list.pf-m-horizontal-on-lg {
4830
- --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
4831
- --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
4990
+ @media screen and (min-width: 768px) {
4991
+ .pf-c-data-list:not([class*=pf-m-grid]) {
4992
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
4993
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
4994
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
4995
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
4996
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
4997
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
4998
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
4999
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
4832
5000
  }
4833
-
4834
- .pf-c-description-list.pf-m-vertical-on-lg {
4835
- --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
4836
- --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
5001
+ }
5002
+ @media screen and (min-width: 768px) and (min-width: 1200px) {
5003
+ .pf-c-data-list:not([class*=pf-m-grid]) {
5004
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
5005
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
5006
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
5007
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
4837
5008
  }
4838
5009
  }
4839
- @media (min-width: 1200px) {
4840
- .pf-c-description-list.pf-m-1-col-on-xl {
4841
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-1-col--GridTemplateColumns--count);
5010
+ @media screen and (min-width: 768px) {
5011
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__item-content {
5012
+ display: flex;
5013
+ flex-wrap: wrap;
5014
+ flex-grow: 1;
5015
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
5016
+ }
5017
+ }
5018
+ @media screen and (min-width: 768px) {
5019
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5020
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
4842
5021
  }
4843
5022
 
4844
- .pf-c-description-list.pf-m-2-col-on-xl {
4845
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-2-col--GridTemplateColumns--count);
5023
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell + .pf-c-data-list__cell {
5024
+ flex: 1;
5025
+ order: initial;
4846
5026
  }
4847
5027
 
4848
- .pf-c-description-list.pf-m-3-col-on-xl {
4849
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-3-col--GridTemplateColumns--count);
5028
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-align-right {
5029
+ margin-left: auto;
4850
5030
  }
4851
5031
 
4852
- .pf-c-description-list.pf-m-horizontal-on-xl {
4853
- --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
4854
- --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
5032
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-no-fill {
5033
+ flex: none;
4855
5034
  }
4856
5035
 
4857
- .pf-c-description-list.pf-m-vertical-on-xl {
4858
- --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
4859
- --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
4860
- }
4861
- }
4862
- @media (min-width: 1450px) {
4863
- .pf-c-description-list.pf-m-1-col-on-2xl {
4864
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-1-col--GridTemplateColumns--count);
4865
- }
4866
-
4867
- .pf-c-description-list.pf-m-2-col-on-2xl {
4868
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-2-col--GridTemplateColumns--count);
4869
- }
4870
-
4871
- .pf-c-description-list.pf-m-3-col-on-2xl {
4872
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-3-col--GridTemplateColumns--count);
4873
- }
4874
-
4875
- .pf-c-description-list.pf-m-horizontal-on-2xl {
4876
- --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
4877
- --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
4878
- }
4879
-
4880
- .pf-c-description-list.pf-m-vertical-on-2xl {
4881
- --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
4882
- --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
4883
- }
4884
- }
4885
- .pf-c-data-list {
4886
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
4887
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
4888
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
4889
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
4890
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
4891
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
4892
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
4893
- }
4894
-
4895
- .pf-c-data-list__item-action {
4896
- --pf-hidden-visible--visible--Visibility: visible;
4897
- --pf-hidden-visible--hidden--Display: none;
4898
- --pf-hidden-visible--hidden--Visibility: hidden;
4899
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4900
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4901
- display: var(--pf-hidden-visible--Display);
4902
- visibility: var(--pf-hidden-visible--Visibility);
4903
- }
4904
-
4905
- .pf-m-hidden.pf-c-data-list__item-action {
4906
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4907
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4908
- }
4909
-
4910
- @media screen and (min-width: 576px) {
4911
- .pf-m-hidden-on-sm.pf-c-data-list__item-action {
4912
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4913
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4914
- }
4915
-
4916
- .pf-m-visible-on-sm.pf-c-data-list__item-action {
4917
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4918
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4919
- }
4920
- }
4921
- @media screen and (min-width: 768px) {
4922
- .pf-m-hidden-on-md.pf-c-data-list__item-action {
4923
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4924
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4925
- }
4926
-
4927
- .pf-m-visible-on-md.pf-c-data-list__item-action {
4928
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4929
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4930
- }
4931
- }
4932
- @media screen and (min-width: 992px) {
4933
- .pf-m-hidden-on-lg.pf-c-data-list__item-action {
4934
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4935
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4936
- }
4937
-
4938
- .pf-m-visible-on-lg.pf-c-data-list__item-action {
4939
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4940
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4941
- }
4942
- }
4943
- @media screen and (min-width: 1200px) {
4944
- .pf-m-hidden-on-xl.pf-c-data-list__item-action {
4945
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4946
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4947
- }
4948
-
4949
- .pf-m-visible-on-xl.pf-c-data-list__item-action {
4950
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4951
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4952
- }
4953
- }
4954
- @media screen and (min-width: 1450px) {
4955
- .pf-m-hidden-on-2xl.pf-c-data-list__item-action {
4956
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4957
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4958
- }
4959
-
4960
- .pf-m-visible-on-2xl.pf-c-data-list__item-action {
4961
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4962
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4963
- }
4964
- }
4965
- @media screen and (min-width: 768px) {
4966
- .pf-c-data-list:not([class*=pf-m-grid]) {
4967
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
4968
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
4969
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
4970
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
4971
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
4972
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
4973
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
4974
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
4975
- }
4976
- }
4977
- @media screen and (min-width: 768px) and (min-width: 1200px) {
4978
- .pf-c-data-list:not([class*=pf-m-grid]) {
4979
- --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
4980
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
4981
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
4982
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
4983
- }
4984
- }
4985
- @media screen and (min-width: 768px) {
4986
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__item-content {
4987
- display: flex;
4988
- flex-wrap: wrap;
4989
- flex-grow: 1;
4990
- padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
4991
- }
4992
- }
4993
- @media screen and (min-width: 768px) {
4994
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4995
- margin-right: var(--pf-c-data-list__cell--MarginRight);
4996
- }
4997
-
4998
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell + .pf-c-data-list__cell {
4999
- flex: 1;
5000
- order: initial;
5001
- }
5002
-
5003
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-align-right {
5004
- margin-left: auto;
5005
- }
5006
-
5007
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-no-fill {
5008
- flex: none;
5009
- }
5010
-
5011
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-2 {
5012
- flex-grow: 2;
5036
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-2 {
5037
+ flex-grow: 2;
5013
5038
  }
5014
5039
 
5015
5040
  .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-3 {
@@ -5438,448 +5463,423 @@ label.pf-c-check, .pf-c-check__label,
5438
5463
  overflow-y: visible;
5439
5464
  }
5440
5465
  }
5441
- .pf-c-data-list {
5442
- --pf-c-data-list--FontSize: 1em;
5443
- --pf-c-data-list--LineHeight: var(--pf-global--LineHeight--md);
5444
- --pf-c-data-list--BorderTopColor: var(--pf-global--BorderColor--300);
5445
- --pf-c-data-list--BorderTopWidth: var(--pf-global--spacer--sm);
5446
- --pf-c-data-list--sm--BorderTopWidth: var(--pf-global--BorderWidth--sm);
5447
- --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);
5448
- --pf-c-data-list__item--BackgroundColor: var(--pf-global--BackgroundColor--100);
5449
- --pf-c-data-list__item--m-selected--ZIndex: var(--pf-global--ZIndex--xs);
5450
- --pf-c-data-list__item--m-expanded--before--BackgroundColor: var(--pf-global--active-color--100);
5451
- --pf-c-data-list__item--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
5452
- --pf-c-data-list__item--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
5453
- --pf-c-data-list__item--m-selectable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
5454
- --pf-c-data-list__item--m-selectable--hover--ZIndex: calc(var(--pf-c-data-list__item--m-selected--ZIndex) + 1);
5455
- --pf-c-data-list__item--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
5456
- --pf-c-data-list__item--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
5457
- --pf-c-data-list__item--m-selectable--active--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
5458
- --pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor: var(--pf-global--active-color--300);
5459
- --pf-c-data-list__item--BorderBottomColor: var(--pf-global--BorderColor--300);
5460
- --pf-c-data-list__item--BorderBottomWidth: 0.5rem;
5461
- --pf-c-data-list__item--m-selectable--hover--item--BorderTopColor: var(--pf-c-data-list__item--BorderBottomColor);
5462
- --pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth: var(--pf-c-data-list__item--BorderBottomWidth);
5463
- --pf-c-data-list__item--sm--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
5464
- --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
5465
- --pf-c-data-list__item--before--BackgroundColor: transparent;
5466
- --pf-c-data-list__item--before--Width: var(--pf-global--BorderWidth--lg);
5467
- --pf-c-data-list__item--before--Transition: var(--pf-global--Transition);
5468
- --pf-c-data-list__item--before--Top: 0;
5469
- --pf-c-data-list__item--before--sm--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
5470
- --pf-c-data-list__item-row--PaddingRight: var(--pf-global--spacer--md);
5471
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-global--spacer--md);
5472
- --pf-c-data-list__item-row--xl--PaddingRight: var(--pf-global--spacer--lg);
5473
- --pf-c-data-list__item-row--xl--PaddingLeft: var(--pf-global--spacer--lg);
5474
- --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-global--spacer--lg);
5475
- --pf-c-data-list__cell--PaddingTop: var(--pf-global--spacer--lg);
5476
- --pf-c-data-list__cell--PaddingBottom: var(--pf-global--spacer--lg);
5477
- --pf-c-data-list__cell--MarginRight: var(--pf-global--spacer--xl);
5478
- --pf-c-data-list__cell--md--PaddingBottom: 0;
5479
- --pf-c-data-list__cell--m-icon--MarginRight: var(--pf-global--spacer--md);
5480
- --pf-c-data-list__cell--cell--PaddingTop: 0;
5481
- --pf-c-data-list__cell--cell--md--PaddingTop: var(--pf-global--spacer--lg);
5482
- --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--lg);
5483
- --pf-c-data-list--cell--MinWidth: initial;
5484
- --pf-c-data-list--cell--Overflow: visible;
5485
- --pf-c-data-list--cell--TextOverflow: clip;
5486
- --pf-c-data-list--cell--WhiteSpace: normal;
5487
- --pf-c-data-list--cell--WordBreak: normal;
5488
- --pf-c-data-list--cell--m-truncate--MinWidth: 5ch;
5489
- --pf-c-data-list__toggle--MarginLeft: calc(var(--pf-global--spacer--sm) * -1);
5490
- --pf-c-data-list__toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
5491
- --pf-c-data-list__toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
5492
- --pf-c-data-list__toggle-icon--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
5493
- --pf-c-data-list__toggle-icon--Transition: .2s ease-in 0s;
5494
- --pf-c-data-list__toggle-icon--Rotate: 0;
5495
- --pf-c-data-list__item--m-expanded__toggle-icon--Rotate: 90deg;
5496
- --pf-c-data-list__item-draggable-button--PaddingLeft: var(--pf-global--spacer--md);
5497
- --pf-c-data-list__item-draggable-button--PaddingRight: var(--pf-global--spacer--md);
5498
- --pf-c-data-list__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--lg) * -1);
5499
- --pf-c-data-list__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--lg) * -1);
5500
- --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-global--spacer--lg);
5501
- --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-global--spacer--lg);
5502
- --pf-c-data-list__item-draggable-button--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
5503
- --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-global--icon--Color--light);
5504
- --pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color: var(--pf-global--disabled-color--200);
5505
- --pf-c-data-list__item-draggable-button--hover__draggable-icon--Color: var(--pf-global--icon--Color--dark);
5506
- --pf-c-data-list__item-draggable-button--focus__draggable-icon--Color: var(--pf-global--icon--Color--dark);
5507
- --pf-c-data-list__item--m-ghost-row--after--BackgroundColor: var(--pf-global--BackgroundColor--100);
5508
- --pf-c-data-list__item--m-ghost-row--after--Opacity: .6;
5509
- --pf-c-data-list__item-control--PaddingTop: var(--pf-global--spacer--lg);
5510
- --pf-c-data-list__item-control--PaddingBottom: var(--pf-global--spacer--lg);
5511
- --pf-c-data-list__item-control--MarginRight: var(--pf-global--spacer--md);
5512
- --pf-c-data-list__item-control--md--MarginRight: var(--pf-global--spacer--xl);
5513
- --pf-c-data-list__item-control--not-last-child--MarginRight: var(--pf-global--spacer--md);
5514
- --pf-c-data-list__check--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
5515
- --pf-c-data-list__check--MarginTop: -0.0625rem;
5516
- --pf-c-data-list__item-action--Display: flex;
5517
- --pf-c-data-list__item-action--PaddingTop: var(--pf-global--spacer--lg);
5518
- --pf-c-data-list__item-action--PaddingBottom: var(--pf-global--spacer--lg);
5519
- --pf-c-data-list__item-action--MarginLeft: var(--pf-global--spacer--md);
5520
- --pf-c-data-list__item-action--md--MarginLeft: var(--pf-global--spacer--xl);
5521
- --pf-c-data-list__item-action--not-last-child--MarginRight: var(--pf-global--spacer--md);
5522
- --pf-c-data-list__item-action__action--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
5523
- --pf-c-data-list__action--MarginTop: var(--pf-c-data-list__item-action__action--MarginTop);
5524
- --pf-c-data-list__item-action__action--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
5525
- --pf-c-data-list__expandable-content--BorderTopWidth: var(--pf-global--BorderWidth--sm);
5526
- --pf-c-data-list__expandable-content--BorderTopColor: var(--pf-global--BorderColor--100);
5527
- --pf-c-data-list__expandable-content--MarginRight: calc(var(--pf-c-data-list__expandable-content-body--PaddingRight) * -1);
5528
- --pf-c-data-list__expandable-content--MarginLeft: calc(var(--pf-c-data-list__expandable-content-body--PaddingLeft) * -1);
5529
- --pf-c-data-list__expandable-content--MaxHeight: 37.5rem;
5530
- --pf-c-data-list__expandable-content--before--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
5531
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-global--spacer--md);
5532
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-global--spacer--md);
5533
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-global--spacer--md);
5534
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-global--spacer--md);
5535
- --pf-c-data-list__expandable-content-body--md--PaddingTop: var(--pf-global--spacer--lg);
5536
- --pf-c-data-list__expandable-content-body--xl--PaddingRight: var(--pf-global--spacer--lg);
5537
- --pf-c-data-list__expandable-content-body--md--PaddingBottom: var(--pf-global--spacer--lg);
5538
- --pf-c-data-list__expandable-content-body--xl--PaddingLeft: var(--pf-global--spacer--lg);
5539
- --pf-c-data-list--m-compact--FontSize: var(--pf-global--FontSize--sm);
5540
- --pf-c-data-list--m-compact--LineHeight: var(--pf-global--LineHeight--sm);
5541
- --pf-c-data-list--m-compact__check--FontSize: var(--pf-global--FontSize--md);
5542
- --pf-c-data-list--m-compact__cell--PaddingTop: var(--pf-global--spacer--sm);
5543
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-global--spacer--sm);
5544
- --pf-c-data-list--m-compact__cell--md--PaddingBottom: 0;
5545
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: 0;
5546
- --pf-c-data-list--m-compact__cell-cell--md--PaddingTop: var(--pf-global--spacer--sm);
5547
- --pf-c-data-list--m-compact__cell--cell--MarginRight: var(--pf-global--spacer--md);
5548
- --pf-c-data-list--m-compact__item-control--PaddingTop: var(--pf-global--spacer--sm);
5549
- --pf-c-data-list--m-compact__item-control--PaddingBottom: var(--pf-global--spacer--sm);
5550
- --pf-c-data-list--m-compact__item-control--MarginRight: var(--pf-global--spacer--md);
5551
- --pf-c-data-list--m-compact__item-action--PaddingTop: var(--pf-global--spacer--sm);
5552
- --pf-c-data-list--m-compact__item-action--PaddingBottom: var(--pf-global--spacer--sm);
5553
- --pf-c-data-list--m-compact__item-action--MarginLeft: var(--pf-global--spacer--md);
5554
- --pf-c-data-list--m-compact__item-action__action--MarginTop: calc(var(--pf-c-data-list--m-compact__item-action--PaddingTop) * -1);
5555
- --pf-c-data-list--m-compact__item-action__action--MarginBottom: calc(var(--pf-c-data-list--m-compact__item-action--PaddingBottom) * -1);
5556
- --pf-c-data-list--m-compact__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
5557
- --pf-c-data-list--m-compact__item-content--PaddingBottom: var(--pf-global--spacer--sm);
5558
- --pf-c-data-list--m-compact__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
5559
- --pf-c-data-list--m-compact__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--sm) * -1);
5560
- --pf-c-data-list--m-compact__item-draggable-button--PaddingTop: var(--pf-global--spacer--sm);
5561
- --pf-c-data-list--m-compact__item-draggable-button--PaddingBottom: var(--pf-global--spacer--sm);
5562
- --pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--sm);
5563
- color: var(--pf-global--Color--100);
5564
- font-size: var(--pf-c-data-list--FontSize);
5565
- line-height: var(--pf-c-data-list--LineHeight);
5566
- overflow-wrap: break-word;
5567
- list-style-type: disc;
5568
- border-top: var(--pf-c-data-list--BorderTopWidth) solid var(--pf-c-data-list--BorderTopColor);
5466
+ .pf-c-date-picker {
5467
+ --pf-c-date-picker--m-top__calendar--Top: 0;
5468
+ --pf-c-date-picker--m-top__calendar--TranslateY: calc(-100% - var(--pf-global--spacer--xs));
5469
+ --pf-c-date-picker__helper-text--MarginTop: var(--pf-global--spacer--xs);
5470
+ --pf-c-date-picker__helper-text--FontSize: var(--pf-global--FontSize--sm);
5471
+ --pf-c-date-picker__helper-text--Color: var(--pf-global--Color--100);
5472
+ --pf-c-date-picker__helper-text--m-error--Color: var(--pf-global--danger-color--100);
5473
+ --pf-c-date-picker__input--c-form-control--Width: calc(var(--pf-c-date-picker__input--c-form-control--width-chars) * 1ch + var(--pf-c-date-picker__input--c-form-control--width-base));
5474
+ --pf-c-date-picker__input--c-form-control--width-base: calc(var(--pf-global--spacer--xl) + var(--pf-global--spacer--sm));
5475
+ --pf-c-date-picker__input--c-form-control--width-chars: 10;
5476
+ --pf-c-date-picker__calendar--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
5477
+ --pf-c-date-picker__calendar--BoxShadow: var(--pf-global--BoxShadow--md);
5478
+ --pf-c-date-picker__calendar--ZIndex: var(--pf-global--ZIndex--sm);
5479
+ --pf-c-date-picker__calendar--Top: calc(100% + var(--pf-global--spacer--xs));
5480
+ --pf-c-date-picker__calendar--Right: auto;
5481
+ --pf-c-date-picker__calendar--Left: 0;
5482
+ --pf-c-date-picker__calendar--m-align-right--Right: 0;
5483
+ --pf-c-date-picker__calendar--m-align-right--Left: auto;
5484
+ position: relative;
5485
+ display: inline-block;
5569
5486
  }
5570
5487
 
5571
- @media screen and (min-width: 576px) {
5572
- .pf-c-data-list {
5573
- --pf-c-data-list--BorderTopColor: var(--pf-c-data-list--sm--BorderTopColor);
5574
- --pf-c-data-list--BorderTopWidth: var(--pf-c-data-list--sm--BorderTopWidth);
5575
- }
5488
+ .pf-c-date-picker__helper-text {
5489
+ margin-top: var(--pf-c-date-picker__helper-text--MarginTop);
5490
+ font-size: var(--pf-c-date-picker__helper-text--FontSize);
5491
+ color: var(--pf-c-date-picker__helper-text--Color);
5576
5492
  }
5493
+
5494
+ .pf-c-date-picker__helper-text.pf-m-error {
5495
+ --pf-c-date-picker__helper-text--Color: var(--pf-c-date-picker__helper-text--m-error--Color);
5496
+ }
5497
+
5498
+ .pf-c-date-picker__input .pf-c-form-control {
5499
+ width: var(--pf-c-date-picker__input--c-form-control--Width);
5500
+ }
5501
+
5502
+ .pf-c-date-picker__calendar {
5503
+ position: absolute;
5504
+ top: var(--pf-c-date-picker__calendar--Top);
5505
+ right: var(--pf-c-date-picker__calendar--Right);
5506
+ left: var(--pf-c-date-picker__calendar--Left);
5507
+ z-index: var(--pf-c-date-picker__calendar--ZIndex);
5508
+ background-color: var(--pf-c-date-picker__calendar--BackgroundColor);
5509
+ box-shadow: var(--pf-c-date-picker__calendar--BoxShadow);
5510
+ }
5511
+
5512
+ .pf-c-date-picker__calendar.pf-m-align-right {
5513
+ --pf-c-date-picker__calendar--Right: var(--pf-c-date-picker__calendar--m-align-right--Right);
5514
+ --pf-c-date-picker__calendar--Left: var(--pf-c-date-picker__calendar--m-align-right--Left);
5515
+ }
5516
+
5517
+ .pf-c-date-picker.pf-m-top .pf-c-date-picker__calendar {
5518
+ --pf-c-date-picker__calendar--Top: var(--pf-c-date-picker--m-top__calendar--Top);
5519
+ transform: translateY(var(--pf-c-date-picker--m-top__calendar--TranslateY));
5520
+ }
5521
+
5522
+ :where(.pf-theme-dark) .pf-c-date-picker {
5523
+ --pf-c-date-picker__calendar--BackgroundColor: var(--pf-global--BackgroundColor--300);
5524
+ --pf-c-date-picker__calendar--Top: 100%;
5525
+ }
5526
+
5527
+ .pf-c-description-list {
5528
+ --pf-c-description-list--RowGap: var(--pf-global--gutter--md);
5529
+ --pf-c-description-list--ColumnGap: var(--pf-global--spacer--lg);
5530
+ --pf-c-description-list--GridTemplateColumns--count: 1;
5531
+ --pf-c-description-list--GridTemplateColumns--width: 1fr;
5532
+ --pf-c-description-list--GridTemplateColumns--min: 0;
5533
+ --pf-c-description-list--GridTemplateColumns: repeat(var(--pf-c-description-list--GridTemplateColumns--count), var(--pf-c-description-list--GridTemplateColumns--width));
5534
+ --pf-c-description-list__group--RowGap: var(--pf-global--spacer--sm);
5535
+ --pf-c-description-list__group--ColumnGap: var(--pf-global--spacer--sm);
5536
+ --pf-c-description-list__group--GridTemplateColumns: auto;
5537
+ --pf-c-description-list__group--GridTemplateRows: auto 1fr;
5538
+ --pf-c-description-list__group--GridColumn: auto;
5539
+ --pf-c-description-list--m-compact--RowGap: var(--pf-global--gutter);
5540
+ --pf-c-description-list--m-compact--ColumnGap: var(--pf-global--spacer--sm);
5541
+ --pf-c-description-list__term--Display: inline;
5542
+ --pf-c-description-list__term--sm--Display: flex;
5543
+ --pf-c-description-list__term--FontWeight: var(--pf-global--FontWeight--bold);
5544
+ --pf-c-description-list__term--FontSize: var(--pf-global--FontSize--sm);
5545
+ --pf-c-description-list__term--LineHeight: var(--pf-global--LineHeight--sm);
5546
+ --pf-c-description-list__term-icon--MinWidth: var(--pf-global--icon--FontSize--sm);
5547
+ --pf-c-description-list__term-icon--MarginRight: var(--pf-global--spacer--sm);
5548
+ --pf-c-description-list__term-icon--Color: var(--pf-global--icon--Color--light);
5549
+ --pf-c-description-list--m-vertical__group--GridTemplateColumns: repeat(var(--pf-c-description-list--GridTemplateColumns--count));
5550
+ --pf-c-description-list--m-vertical__group--GridTemplateRows: auto 1fr;
5551
+ --pf-c-description-list--m-horizontal__term--width: 12ch;
5552
+ --pf-c-description-list--m-horizontal__description--width: minmax(10ch, auto);
5553
+ --pf-c-description-list--m-horizontal__group--GridTemplateColumns: var(--pf-c-description-list__term--width) var(--pf-c-description-list--m-horizontal__description--width);
5554
+ --pf-c-description-list--m-horizontal__group--GridTemplateRows: auto;
5555
+ --pf-c-description-list--m-1-col--GridTemplateColumns--count: 1;
5556
+ --pf-c-description-list--m-2-col--GridTemplateColumns--count: 2;
5557
+ --pf-c-description-list--m-3-col--GridTemplateColumns--count: 3;
5558
+ --pf-c-description-list--m-auto-fit--GridTemplateColumns--min: 15.625rem;
5559
+ --pf-c-description-list--m-auto-fit--GridTemplateColumns--minmax--min: var(--pf-c-description-list--m-auto-fit--GridTemplateColumns--min);
5560
+ --pf-c-description-list__text--m-help-text--TextDecorationColor: var(--pf-global--BorderColor--200);
5561
+ --pf-c-description-list__text--m-help-text--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
5562
+ --pf-c-description-list__text--m-help-text--TextDecorationOffset: 0.25rem;
5563
+ --pf-c-description-list__text--m-help-text--hover--TextDecorationColor: var(--pf-global--Color--100);
5564
+ --pf-c-description-list__text--m-help-text--focus--TextDecorationColor: var(--pf-global--Color--100);
5565
+ --pf-c-description-list--m-display-lg__description--FontSize: var(--pf-global--FontSize--lg);
5566
+ --pf-c-description-list--m-display-2xl__description--FontSize: var(--pf-global--FontSize--2xl);
5567
+ display: grid;
5568
+ align-items: baseline;
5569
+ row-gap: var(--pf-c-description-list--RowGap);
5570
+ column-gap: var(--pf-c-description-list--ColumnGap);
5571
+ grid-template-columns: var(--pf-c-description-list--GridTemplateColumns);
5572
+ }
5573
+
5577
5574
  @media screen and (min-width: 576px) {
5578
- .pf-c-data-list {
5579
- --pf-c-data-list__item--BorderBottomWidth: var(--pf-c-data-list__item--sm--BorderBottomWidth);
5580
- --pf-c-data-list__item--BorderBottomColor: var(--pf-c-data-list__item--sm--BorderBottomColor);
5575
+ .pf-c-description-list {
5576
+ --pf-c-description-list__term--Display: var(--pf-c-description-list__term--sm--Display);
5581
5577
  }
5582
5578
  }
5579
+ .pf-c-description-list[class*=pf-m-horizontal] {
5580
+ --pf-c-description-list__term--width: var(--pf-c-description-list--m-horizontal__term--width);
5581
+ }
5582
+
5583
5583
  @media (min-width: 576px) {
5584
- .pf-c-data-list {
5585
- --pf-c-data-list__item--before--Top: var(--pf-c-data-list__item--before--sm--Top);
5584
+ .pf-c-description-list[class*=pf-m-horizontal] {
5585
+ --pf-c-description-list__term--width: var(--pf-c-description-list--m-horizontal__term--width-on-sm, var(--pf-c-description-list--m-horizontal__term--width));
5586
5586
  }
5587
5587
  }
5588
- .pf-c-data-list.pf-m-compact {
5589
- --pf-c-data-list__check--FontSize: var(--pf-c-data-list--m-compact__check--FontSize);
5590
- --pf-c-data-list__action--MarginTop: var(--pf-c-data-list--m-compact__action--MarginTop);
5591
- --pf-c-data-list--FontSize: var(--pf-c-data-list--m-compact--FontSize);
5592
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list--m-compact__item-action--MarginLeft);
5593
- --pf-c-data-list__item-action--PaddingTop: var(--pf-c-data-list--m-compact__item-action--PaddingTop);
5594
- --pf-c-data-list__item-action--PaddingBottom: var(--pf-c-data-list--m-compact__item-action--PaddingBottom);
5595
- --pf-c-data-list__item-action__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
5596
- --pf-c-data-list__item-action__action--MarginBottom: var(--pf-c-data-list--m-compact__item-action__action--MarginBottom);
5597
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list--m-compact__item-control--MarginRight);
5598
- --pf-c-data-list__item-control--PaddingTop: var(--pf-c-data-list--m-compact__item-control--PaddingTop);
5599
- --pf-c-data-list__item-control--PaddingBottom: var(--pf-c-data-list--m-compact__item-control--PaddingBottom);
5600
- --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-c-data-list--m-compact__item-content--PaddingBottom);
5601
- --pf-c-data-list__item-draggable-button--MarginTop: var(--pf-c-data-list--m-compact__item-draggable-button--MarginTop);
5602
- --pf-c-data-list__item-draggable-button--MarginBottom: var(--pf-c-data-list--m-compact__item-draggable-button--MarginBottom);
5603
- --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingTop);
5604
- --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingBottom);
5605
- --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop);
5606
- font-size: var(--pf-c-data-list--m-compact--FontSize);
5588
+ @media (min-width: 768px) {
5589
+ .pf-c-description-list[class*=pf-m-horizontal] {
5590
+ --pf-c-description-list__term--width: var(--pf-c-description-list--m-horizontal__term--width-on-md, var(--pf-c-description-list--m-horizontal__term--width-on-sm, var(--pf-c-description-list--m-horizontal__term--width)));
5591
+ }
5607
5592
  }
5608
-
5609
- .pf-c-data-list.pf-m-compact .pf-c-data-list__cell {
5610
- --pf-c-data-list__cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--PaddingTop);
5611
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--PaddingBottom);
5612
- --pf-c-data-list__cell--MarginRight: var(--pf-c-data-list--m-compact__cell--cell--MarginRight);
5613
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--PaddingTop);
5593
+ @media (min-width: 992px) {
5594
+ .pf-c-description-list[class*=pf-m-horizontal] {
5595
+ --pf-c-description-list__term--width: var(--pf-c-description-list--m-horizontal__term--width-on-lg, var(--pf-c-description-list--m-horizontal__term--width-on-md, var(--pf-c-description-list--m-horizontal__term--width-on-sm, var(--pf-c-description-list--m-horizontal__term--width))));
5596
+ }
5614
5597
  }
5615
-
5616
- .pf-c-data-list.pf-m-compact .pf-c-data-list__check {
5617
- font-size: var(--pf-c-data-list--m-compact__check--FontSize);
5598
+ @media (min-width: 1200px) {
5599
+ .pf-c-description-list[class*=pf-m-horizontal] {
5600
+ --pf-c-description-list__term--width: var(--pf-c-description-list--m-horizontal__term--width-on-xl, var(--pf-c-description-list--m-horizontal__term--width-on-lg, var(--pf-c-description-list--m-horizontal__term--width-on-md, var(--pf-c-description-list--m-horizontal__term--width-on-sm, var(--pf-c-description-list--m-horizontal__term--width)))));
5601
+ }
5618
5602
  }
5619
-
5620
- .pf-c-data-list.pf-m-drag-over {
5621
- overflow-anchor: none;
5603
+ @media (min-width: 1450px) {
5604
+ .pf-c-description-list[class*=pf-m-horizontal] {
5605
+ --pf-c-description-list__term--width: var(--pf-c-description-list--m-horizontal__term--width-on-2xl, var(--pf-c-description-list--m-horizontal__term--width-on-xl, var(--pf-c-description-list--m-horizontal__term--width-on-lg, var(--pf-c-description-list--m-horizontal__term--width-on-md, var(--pf-c-description-list--m-horizontal__term--width-on-sm, var(--pf-c-description-list--m-horizontal__term--width))))));
5606
+ }
5607
+ }
5608
+ .pf-c-description-list.pf-m-inline-grid {
5609
+ display: inline-grid;
5622
5610
  }
5623
5611
 
5624
- .pf-c-data-list.pf-m-truncate,
5625
- .pf-c-data-list__item-row.pf-m-truncate,
5626
- .pf-c-data-list__cell.pf-m-truncate,
5627
- .pf-c-data-list__text.pf-m-truncate {
5628
- --pf-c-data-list--cell--MinWidth: var(--pf-c-data-list--cell--m-truncate--MinWidth);
5629
- --pf-c-data-list--cell--Overflow: hidden;
5630
- --pf-c-data-list--cell--TextOverflow: ellipsis;
5631
- --pf-c-data-list--cell--WhiteSpace: nowrap;
5612
+ .pf-c-description-list.pf-m-auto-column-widths {
5613
+ --pf-c-description-list--GridTemplateColumns--width: minmax(8ch, max-content);
5632
5614
  }
5633
5615
 
5634
- .pf-c-data-list.pf-m-break-word,
5635
- .pf-c-data-list__item-row.pf-m-break-word,
5636
- .pf-c-data-list__cell.pf-m-break-word,
5637
- .pf-c-data-list__text.pf-m-break-word {
5638
- --pf-c-data-list--cell--WordBreak: break-word;
5616
+ .pf-c-description-list.pf-m-auto-fit {
5617
+ grid-template-columns: repeat(auto-fit, minmax(var(--pf-c-description-list--m-auto-fit--GridTemplateColumns--minmax--min), 1fr));
5618
+ --pf-c-description-list--GridTemplateColumns--minmax--min: var(--pf-c-description-list--GridTemplateColumns--min);
5639
5619
  }
5640
5620
 
5641
- .pf-c-data-list.pf-m-nowrap,
5642
- .pf-c-data-list__item-row.pf-m-nowrap,
5643
- .pf-c-data-list__cell.pf-m-nowrap,
5644
- .pf-c-data-list__text.pf-m-nowrap {
5645
- --pf-c-data-list--cell--WhiteSpace: nowrap;
5621
+ @media (min-width: 576px) {
5622
+ .pf-c-description-list.pf-m-auto-fit {
5623
+ --pf-c-description-list--GridTemplateColumns--minmax--min: var(--pf-c-description-list--GridTemplateColumns--min-on-sm, var(--pf-c-description-list--GridTemplateColumns--min));
5624
+ }
5646
5625
  }
5647
-
5648
- .pf-c-data-list__item {
5649
- position: relative;
5650
- display: flex;
5651
- flex-direction: column;
5652
- background-color: var(--pf-c-data-list__item--BackgroundColor);
5653
- border-bottom: var(--pf-c-data-list__item--BorderBottomWidth) solid var(--pf-c-data-list__item--BorderBottomColor);
5626
+ @media (min-width: 768px) {
5627
+ .pf-c-description-list.pf-m-auto-fit {
5628
+ --pf-c-description-list--GridTemplateColumns--minmax--min: var(--pf-c-description-list--GridTemplateColumns--min-on-md, var(--pf-c-description-list--GridTemplateColumns--min-on-sm, var(--pf-c-description-list--GridTemplateColumns--min)));
5629
+ }
5654
5630
  }
5655
-
5656
- .pf-c-data-list__item::before {
5657
- position: absolute;
5658
- top: var(--pf-c-data-list__item--before--Top);
5659
- bottom: 0;
5660
- left: 0;
5661
- width: var(--pf-c-data-list__item--before--Width);
5662
- content: "";
5663
- background-color: var(--pf-c-data-list__item--before--BackgroundColor);
5664
- transition: var(--pf-c-data-list__item--before--Transition);
5631
+ @media (min-width: 992px) {
5632
+ .pf-c-description-list.pf-m-auto-fit {
5633
+ --pf-c-description-list--GridTemplateColumns--minmax--min: var(--pf-c-description-list--GridTemplateColumns--min-on-lg, var(--pf-c-description-list--GridTemplateColumns--min-on-md, var(--pf-c-description-list--GridTemplateColumns--min-on-sm, var(--pf-c-description-list--GridTemplateColumns--min))));
5634
+ }
5665
5635
  }
5666
-
5667
- .pf-c-data-list__item.pf-m-selectable {
5668
- cursor: pointer;
5669
- outline-offset: var(--pf-c-data-list__item--m-selectable--OutlineOffset);
5636
+ @media (min-width: 1200px) {
5637
+ .pf-c-description-list.pf-m-auto-fit {
5638
+ --pf-c-description-list--GridTemplateColumns--minmax--min: var(--pf-c-description-list--GridTemplateColumns--min-on-xl, var(--pf-c-description-list--GridTemplateColumns--min-on-lg, var(--pf-c-description-list--GridTemplateColumns--min-on-md, var(--pf-c-description-list--GridTemplateColumns--min-on-sm, var(--pf-c-description-list--GridTemplateColumns--min)))));
5639
+ }
5670
5640
  }
5671
-
5672
- .pf-c-data-list__item.pf-m-selectable:hover, .pf-c-data-list__item.pf-m-selectable:focus {
5673
- position: relative;
5674
- z-index: var(--pf-c-data-list__item--m-selectable--hover--ZIndex);
5641
+ @media (min-width: 1450px) {
5642
+ .pf-c-description-list.pf-m-auto-fit {
5643
+ --pf-c-description-list--GridTemplateColumns--minmax--min: var(--pf-c-description-list--GridTemplateColumns--min-on-2xl, var(--pf-c-description-list--GridTemplateColumns--min-on-xl, var(--pf-c-description-list--GridTemplateColumns--min-on-lg, var(--pf-c-description-list--GridTemplateColumns--min-on-md, var(--pf-c-description-list--GridTemplateColumns--min-on-sm, var(--pf-c-description-list--GridTemplateColumns--min))))));
5644
+ }
5645
+ }
5646
+ .pf-c-description-list.pf-m-compact {
5647
+ --pf-c-description-list--RowGap: var(--pf-c-description-list--m-compact--RowGap);
5648
+ --pf-c-description-list--ColumnGap: var(--pf-c-description-list--m-compact--ColumnGap);
5675
5649
  }
5676
5650
 
5677
- .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) {
5678
- --pf-c-data-list__item--BorderBottomWidth: 0;
5651
+ .pf-c-description-list.pf-m-fluid {
5652
+ --pf-c-description-list--m-horizontal__term--width: fit-content(20ch);
5679
5653
  }
5680
5654
 
5681
- .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 {
5682
- 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);
5655
+ .pf-c-description-list.pf-m-fill-columns {
5656
+ display: block;
5657
+ column-count: var(--pf-c-description-list--GridTemplateColumns--count);
5658
+ margin-bottom: calc(var(--pf-c-description-list--RowGap) * -1);
5683
5659
  }
5684
5660
 
5685
- .pf-c-data-list__item.pf-m-selectable:hover {
5686
- box-shadow: var(--pf-c-data-list__item--m-selectable--hover--BoxShadow);
5661
+ .pf-c-description-list.pf-m-fill-columns .pf-c-description-list__group,
5662
+ .pf-c-description-list.pf-m-fill-columns > .pf-c-card {
5663
+ display: inline-grid;
5664
+ width: 100%;
5665
+ margin-bottom: var(--pf-c-description-list--RowGap);
5666
+ break-inside: avoid;
5667
+ page-break-inside: avoid;
5668
+ -webkit-column-break-inside: avoid;
5669
+ -moz-column-break-inside: avoid;
5687
5670
  }
5688
5671
 
5689
- .pf-c-data-list__item.pf-m-selectable:focus {
5690
- box-shadow: var(--pf-c-data-list__item--m-selectable--focus--BoxShadow);
5672
+ .pf-c-description-list.pf-m-display-lg {
5673
+ --pf-c-description-list__description--FontSize: var(--pf-c-description-list--m-display-lg__description--FontSize);
5691
5674
  }
5692
5675
 
5693
- .pf-c-data-list__item.pf-m-selectable:active {
5694
- box-shadow: var(--pf-c-data-list__item--m-selectable--active--BoxShadow);
5676
+ .pf-c-description-list.pf-m-display-2xl {
5677
+ --pf-c-description-list__description--FontSize: var(--pf-c-description-list--m-display-2xl__description--FontSize);
5695
5678
  }
5696
5679
 
5697
- .pf-c-data-list__item.pf-m-selected {
5698
- --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-selected--before--BackgroundColor);
5699
- position: relative;
5700
- z-index: var(--pf-c-data-list__item--m-selected--ZIndex);
5701
- box-shadow: var(--pf-c-data-list__item--m-selected--BoxShadow);
5680
+ .pf-c-description-list > .pf-c-card {
5681
+ align-self: stretch;
5682
+ padding: var(--pf-c-card--first-child--PaddingTop) var(--pf-c-card--child--PaddingRight) var(--pf-c-card--child--PaddingBottom) var(--pf-c-card--child--PaddingLeft);
5702
5683
  }
5703
5684
 
5704
- .pf-c-data-list__item.pf-m-ghost-row::after {
5705
- position: absolute;
5706
- top: 0;
5707
- right: 0;
5708
- bottom: 0;
5709
- left: 0;
5710
- content: "";
5711
- background-color: var(--pf-c-data-list__item--m-ghost-row--after--BackgroundColor);
5712
- opacity: var(--pf-c-data-list__item--m-ghost-row--after--Opacity);
5685
+ .pf-c-description-list__group,
5686
+ .pf-c-description-list > .pf-c-card {
5687
+ display: grid;
5688
+ grid-column: var(--pf-c-description-list__group--GridColumn);
5689
+ row-gap: var(--pf-c-description-list__group--RowGap);
5690
+ column-gap: var(--pf-c-description-list__group--ColumnGap);
5691
+ grid-template-columns: var(--pf-c-description-list__group--GridTemplateColumns);
5692
+ grid-template-rows: var(--pf-c-description-list__group--GridTemplateRows);
5693
+ align-items: baseline;
5713
5694
  }
5714
5695
 
5715
- .pf-c-data-list__item.pf-m-expanded {
5716
- --pf-c-data-list__toggle-icon--Rotate: var(--pf-c-data-list__item--m-expanded__toggle-icon--Rotate);
5717
- --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--before--BackgroundColor);
5696
+ .pf-c-description-list__term,
5697
+ .pf-c-description-list__description {
5698
+ min-width: 0;
5699
+ text-align: left;
5700
+ overflow-wrap: break-word;
5718
5701
  }
5719
5702
 
5720
- .pf-c-data-list__item.pf-m-expanded.pf-m-selectable:not(.pf-m-selected) {
5721
- --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor);
5703
+ .pf-c-description-list__term {
5704
+ display: var(--pf-c-description-list__term--Display);
5705
+ font-size: var(--pf-c-description-list__term--FontSize);
5706
+ font-weight: var(--pf-c-description-list__term--FontWeight);
5707
+ line-height: var(--pf-c-description-list__term--LineHeight);
5722
5708
  }
5723
5709
 
5724
- .pf-c-data-list__item-row {
5725
- display: flex;
5726
- flex-wrap: nowrap;
5727
- padding-right: var(--pf-c-data-list__item-row--PaddingRight);
5728
- padding-left: var(--pf-c-data-list__item-row--PaddingLeft);
5710
+ .pf-c-description-list__term .pf-c-description-list__text {
5711
+ display: inline;
5729
5712
  }
5730
5713
 
5731
- .pf-c-data-list__item-control {
5732
- display: flex;
5733
- flex-wrap: nowrap;
5734
- padding-top: var(--pf-c-data-list__item-control--PaddingTop);
5735
- padding-bottom: var(--pf-c-data-list__item-control--PaddingBottom);
5736
- margin-right: var(--pf-c-data-list__item-control--MarginRight);
5714
+ .pf-c-description-list__term-icon {
5715
+ flex-shrink: 0;
5716
+ min-width: var(--pf-c-description-list__term-icon--MinWidth);
5717
+ margin-right: var(--pf-c-description-list__term-icon--MarginRight);
5718
+ color: var(--pf-c-description-list__term-icon--Color);
5737
5719
  }
5738
5720
 
5739
- .pf-c-data-list__item-control > *:not(:last-child) {
5740
- margin-right: var(--pf-c-data-list__item-control--not-last-child--MarginRight);
5721
+ .pf-c-description-list__description {
5722
+ font-size: var(--pf-c-description-list__description--FontSize, inherit);
5741
5723
  }
5742
5724
 
5743
- .pf-c-data-list__check {
5744
- display: flex;
5745
- align-items: center;
5746
- align-self: flex-start;
5747
- height: var(--pf-c-data-list__check--Height);
5748
- margin-top: var(--pf-c-data-list__check--MarginTop);
5725
+ .pf-c-description-list__text {
5726
+ min-width: 0;
5749
5727
  }
5750
5728
 
5751
- .pf-c-data-list__check > input {
5729
+ .pf-c-description-list__text.pf-m-help-text {
5730
+ text-decoration: underline;
5752
5731
  cursor: pointer;
5732
+ text-decoration-style: dashed;
5733
+ text-decoration-thickness: var(--pf-c-description-list__text--m-help-text--TextDecorationThickness);
5734
+ text-underline-offset: var(--pf-c-description-list__text--m-help-text--TextDecorationOffset);
5735
+ text-decoration-color: var(--pf-c-description-list__text--m-help-text--TextDecorationColor);
5753
5736
  }
5754
5737
 
5755
- .pf-c-data-list__item-draggable-button {
5756
- display: flex;
5757
- flex-direction: column;
5758
- 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);
5759
- 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);
5760
- border: 0;
5738
+ .pf-c-description-list__text.pf-m-help-text:hover {
5739
+ --pf-c-description-list__text--m-help-text--TextDecorationColor: var(--pf-c-description-list__text--m-help-text--hover--TextDecorationColor);
5761
5740
  }
5762
5741
 
5763
- .pf-c-data-list__item-draggable-button:hover {
5764
- --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--hover__draggable-icon--Color);
5765
- cursor: grab;
5742
+ .pf-c-description-list__text.pf-m-help-text:focus {
5743
+ --pf-c-description-list__text--m-help-text--TextDecorationColor: var(--pf-c-description-list__text--m-help-text--focus--TextDecorationColor);
5766
5744
  }
5767
5745
 
5768
- .pf-c-data-list__item-draggable-button:focus {
5769
- --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--focus__draggable-icon--Color);
5746
+ .pf-c-description-list.pf-m-1-col {
5747
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-1-col--GridTemplateColumns--count);
5770
5748
  }
5771
5749
 
5772
- .pf-c-data-list__item-draggable-button:active {
5773
- cursor: grabbing;
5750
+ .pf-c-description-list.pf-m-2-col {
5751
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-2-col--GridTemplateColumns--count);
5774
5752
  }
5775
5753
 
5776
- .pf-c-data-list__item-draggable-button.pf-m-disabled {
5777
- --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color);
5778
- pointer-events: none;
5754
+ .pf-c-description-list.pf-m-3-col {
5755
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-3-col--GridTemplateColumns--count);
5779
5756
  }
5780
5757
 
5781
- .pf-c-data-list__item-draggable-button .pf-c-data-list__item-draggable-icon {
5782
- color: var(--pf-c-data-list__item-draggable-button-icon--Color);
5758
+ .pf-c-description-list.pf-m-horizontal {
5759
+ --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
5760
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
5783
5761
  }
5784
5762
 
5785
- .pf-c-data-list__item-action {
5786
- --pf-hidden-visible--visible--Display: var(--pf-c-data-list__item-action--Display);
5787
- align-items: flex-start;
5788
- align-content: flex-start;
5789
- padding-top: var(--pf-c-data-list__item-action--PaddingTop);
5790
- padding-bottom: var(--pf-c-data-list__item-action--PaddingBottom);
5791
- margin-left: var(--pf-c-data-list__item-action--MarginLeft);
5763
+ .pf-c-description-list.pf-m-vertical {
5764
+ --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
5765
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
5792
5766
  }
5793
5767
 
5794
- .pf-c-data-list__item-action > *:not(:last-child) {
5795
- margin-right: var(--pf-c-data-list__item-action--not-last-child--MarginRight);
5796
- }
5768
+ @media (min-width: 576px) {
5769
+ .pf-c-description-list.pf-m-1-col-on-sm {
5770
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-1-col--GridTemplateColumns--count);
5771
+ }
5797
5772
 
5798
- .pf-c-data-list__item-action .pf-c-data-list__action {
5799
- margin-top: var(--pf-c-data-list__action--MarginTop);
5800
- margin-bottom: var(--pf-c-data-list__item-action__action--MarginBottom);
5773
+ .pf-c-description-list.pf-m-2-col-on-sm {
5774
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-2-col--GridTemplateColumns--count);
5775
+ }
5776
+
5777
+ .pf-c-description-list.pf-m-3-col-on-sm {
5778
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-3-col--GridTemplateColumns--count);
5779
+ }
5780
+
5781
+ .pf-c-description-list.pf-m-horizontal-on-sm {
5782
+ --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
5783
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
5784
+ }
5785
+
5786
+ .pf-c-description-list.pf-m-vertical-on-sm {
5787
+ --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
5788
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
5789
+ }
5801
5790
  }
5791
+ @media (min-width: 768px) {
5792
+ .pf-c-description-list.pf-m-1-col-on-md {
5793
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-1-col--GridTemplateColumns--count);
5794
+ }
5795
+
5796
+ .pf-c-description-list.pf-m-2-col-on-md {
5797
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-2-col--GridTemplateColumns--count);
5798
+ }
5799
+
5800
+ .pf-c-description-list.pf-m-3-col-on-md {
5801
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-3-col--GridTemplateColumns--count);
5802
+ }
5802
5803
 
5803
- .pf-c-data-list__toggle {
5804
- margin: var(--pf-c-data-list__toggle--MarginTop) 0 var(--pf-c-data-list__toggle--MarginBottom) var(--pf-c-data-list__toggle--MarginLeft);
5805
- }
5804
+ .pf-c-description-list.pf-m-horizontal-on-md {
5805
+ --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
5806
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
5807
+ }
5806
5808
 
5807
- .pf-c-data-list__toggle-icon {
5808
- height: var(--pf-c-data-list__toggle-icon--Height);
5809
- pointer-events: none;
5810
- transition: var(--pf-c-data-list__toggle-icon--Transition);
5811
- transform: rotate(var(--pf-c-data-list__toggle-icon--Rotate));
5809
+ .pf-c-description-list.pf-m-vertical-on-md {
5810
+ --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
5811
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
5812
+ }
5812
5813
  }
5814
+ @media (min-width: 992px) {
5815
+ .pf-c-description-list.pf-m-1-col-on-lg {
5816
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-1-col--GridTemplateColumns--count);
5817
+ }
5813
5818
 
5814
- .pf-c-data-list__item-content {
5815
- display: grid;
5816
- width: 100%;
5817
- grid-template-columns: auto 1fr;
5818
- }
5819
+ .pf-c-description-list.pf-m-2-col-on-lg {
5820
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-2-col--GridTemplateColumns--count);
5821
+ }
5819
5822
 
5820
- .pf-c-data-list__cell {
5821
- flex: 1;
5822
- grid-column: 1/-1;
5823
- padding-top: var(--pf-c-data-list__cell--PaddingTop);
5824
- padding-bottom: var(--pf-c-data-list__cell--PaddingBottom);
5825
- }
5823
+ .pf-c-description-list.pf-m-3-col-on-lg {
5824
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-3-col--GridTemplateColumns--count);
5825
+ }
5826
5826
 
5827
- .pf-c-data-list__cell + .pf-c-data-list__cell {
5828
- flex: 1 0 100%;
5829
- order: 1;
5830
- padding-top: var(--pf-c-data-list__cell--cell--PaddingTop);
5831
- }
5827
+ .pf-c-description-list.pf-m-horizontal-on-lg {
5828
+ --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
5829
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
5830
+ }
5832
5831
 
5833
- .pf-c-data-list__cell.pf-m-icon {
5834
- flex-grow: 0;
5835
- margin-right: var(--pf-c-data-list__cell--m-icon--MarginRight);
5836
- grid-column: 1/2;
5832
+ .pf-c-description-list.pf-m-vertical-on-lg {
5833
+ --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
5834
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
5835
+ }
5837
5836
  }
5837
+ @media (min-width: 1200px) {
5838
+ .pf-c-description-list.pf-m-1-col-on-xl {
5839
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-1-col--GridTemplateColumns--count);
5840
+ }
5838
5841
 
5839
- .pf-c-data-list__cell.pf-m-icon + .pf-c-data-list__cell {
5840
- grid-column: 2/3;
5841
- padding-top: var(--pf-c-data-list__cell--m-icon--cell--PaddingTop);
5842
- }
5842
+ .pf-c-description-list.pf-m-2-col-on-xl {
5843
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-2-col--GridTemplateColumns--count);
5844
+ }
5843
5845
 
5844
- .pf-c-data-list__cell.pf-m-align-right {
5845
- margin-left: 0;
5846
- }
5846
+ .pf-c-description-list.pf-m-3-col-on-xl {
5847
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-3-col--GridTemplateColumns--count);
5848
+ }
5847
5849
 
5848
- .pf-c-data-list__text {
5849
- display: inline-block;
5850
- }
5850
+ .pf-c-description-list.pf-m-horizontal-on-xl {
5851
+ --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
5852
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
5853
+ }
5851
5854
 
5852
- .pf-c-data-list__text,
5853
- .pf-c-data-list__cell {
5854
- min-width: var(--pf-c-data-list--cell--MinWidth);
5855
- max-width: 100%;
5856
- overflow: var(--pf-c-data-list--cell--Overflow);
5857
- text-overflow: var(--pf-c-data-list--cell--TextOverflow);
5858
- word-break: var(--pf-c-data-list--cell--WordBreak);
5859
- white-space: var(--pf-c-data-list--cell--WhiteSpace);
5855
+ .pf-c-description-list.pf-m-vertical-on-xl {
5856
+ --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
5857
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
5858
+ }
5860
5859
  }
5860
+ @media (min-width: 1450px) {
5861
+ .pf-c-description-list.pf-m-1-col-on-2xl {
5862
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-1-col--GridTemplateColumns--count);
5863
+ }
5861
5864
 
5862
- .pf-c-data-list__expandable-content {
5863
- max-height: var(--pf-c-data-list__expandable-content--MaxHeight);
5864
- overflow-y: auto;
5865
- border-top: var(--pf-c-data-list__expandable-content--BorderTopWidth) solid var(--pf-c-data-list__expandable-content--BorderTopColor);
5866
- }
5865
+ .pf-c-description-list.pf-m-2-col-on-2xl {
5866
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-2-col--GridTemplateColumns--count);
5867
+ }
5867
5868
 
5868
- .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body {
5869
- 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);
5870
- }
5869
+ .pf-c-description-list.pf-m-3-col-on-2xl {
5870
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-3-col--GridTemplateColumns--count);
5871
+ }
5871
5872
 
5872
- .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body.pf-m-no-padding {
5873
- padding: 0;
5874
- }
5873
+ .pf-c-description-list.pf-m-horizontal-on-2xl {
5874
+ --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
5875
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
5876
+ }
5875
5877
 
5876
- :where(.pf-theme-dark) .pf-c-data-list {
5877
- --pf-c-data-list--BorderTopColor: var(--pf-global--BorderColor--100);
5878
- --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);
5879
- --pf-c-data-list__item--BorderBottomColor: var(--pf-global--BorderColor--100);
5880
- --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
5878
+ .pf-c-description-list.pf-m-vertical-on-2xl {
5879
+ --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
5880
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
5881
+ }
5881
5882
  }
5882
-
5883
5883
  .pf-c-divider {
5884
5884
  --pf-hidden-visible--visible--Visibility: visible;
5885
5885
  --pf-hidden-visible--hidden--Display: none;
@@ -8403,78 +8403,225 @@ label.pf-c-check, .pf-c-check__label,
8403
8403
  font-size: var(--pf-c-empty-state--m-xs__body--FontSize);
8404
8404
  }
8405
8405
 
8406
- .pf-c-empty-state.pf-m-xs .pf-c-button {
8407
- --pf-c-button--FontSize: var(--pf-c-empty-state--m-xs--button--FontSize);
8406
+ .pf-c-empty-state.pf-m-xs .pf-c-button {
8407
+ --pf-c-button--FontSize: var(--pf-c-empty-state--m-xs--button--FontSize);
8408
+ }
8409
+
8410
+ .pf-c-empty-state.pf-m-sm {
8411
+ --pf-c-empty-state__content--MaxWidth: var(--pf-c-empty-state--m-sm__content--MaxWidth);
8412
+ }
8413
+
8414
+ .pf-c-empty-state.pf-m-lg {
8415
+ --pf-c-empty-state__content--MaxWidth: var(--pf-c-empty-state--m-lg__content--MaxWidth);
8416
+ }
8417
+
8418
+ .pf-c-empty-state.pf-m-xl {
8419
+ --pf-c-empty-state__body--MarginTop: var(--pf-c-empty-state--m-xl__body--MarginTop);
8420
+ --pf-c-empty-state__icon--MarginBottom: var(--pf-c-empty-state--m-xl__icon--MarginBottom);
8421
+ --pf-c-empty-state__icon--FontSize: var(--pf-c-empty-state--m-xl__icon--FontSize);
8422
+ --pf-c-empty-state--c-button__secondary--MarginTop: var(--pf-c-empty-state--m-xl--c-button__secondary--MarginTop);
8423
+ }
8424
+
8425
+ .pf-c-empty-state.pf-m-xl .pf-c-empty-state__body {
8426
+ font-size: var(--pf-c-empty-state--m-xl__body--FontSize);
8427
+ }
8428
+
8429
+ .pf-c-empty-state.pf-m-full-height {
8430
+ height: 100%;
8431
+ }
8432
+
8433
+ .pf-c-empty-state__content {
8434
+ max-width: var(--pf-c-empty-state__content--MaxWidth);
8435
+ }
8436
+
8437
+ .pf-c-empty-state__content > .pf-c-title.pf-m-lg {
8438
+ font-size: var(--pf-c-empty-state__content--c-title--m-lg--FontSize);
8439
+ }
8440
+
8441
+ .pf-c-empty-state__icon {
8442
+ margin-bottom: var(--pf-c-empty-state__icon--MarginBottom);
8443
+ font-size: var(--pf-c-empty-state__icon--FontSize);
8444
+ color: var(--pf-c-empty-state__icon--Color);
8445
+ }
8446
+
8447
+ .pf-c-empty-state__body {
8448
+ margin-top: var(--pf-c-empty-state__body--MarginTop);
8449
+ color: var(--pf-c-empty-state__body--Color);
8450
+ }
8451
+
8452
+ .pf-c-empty-state__content > .pf-c-button.pf-m-primary,
8453
+ .pf-c-empty-state__primary {
8454
+ margin-top: var(--pf-c-empty-state__primary--MarginTop);
8455
+ }
8456
+
8457
+ .pf-c-empty-state__content > .pf-c-button.pf-m-primary + .pf-c-empty-state__secondary,
8458
+ .pf-c-empty-state__primary + .pf-c-empty-state__secondary {
8459
+ margin-top: var(--pf-c-empty-state__primary--secondary--MarginTop);
8460
+ }
8461
+
8462
+ .pf-c-empty-state__secondary {
8463
+ display: flex;
8464
+ flex-wrap: wrap;
8465
+ justify-content: center;
8466
+ margin-top: var(--pf-c-empty-state__secondary--MarginTop);
8467
+ margin-bottom: var(--pf-c-empty-state__secondary--MarginBottom);
8468
+ }
8469
+
8470
+ .pf-c-empty-state__secondary > * {
8471
+ margin-right: var(--pf-c-empty-state__secondary--child--MarginRight);
8472
+ margin-bottom: var(--pf-c-empty-state__secondary--child--MarginBottom);
8473
+ margin-left: var(--pf-c-empty-state__secondary--child--MarginLeft);
8474
+ }
8475
+
8476
+ .pf-m-overpass-font .pf-c-empty-state .pf-c-empty-state__content > .pf-c-title.pf-m-lg {
8477
+ font-size: var(--pf-global--FontSize--lg);
8478
+ }
8479
+
8480
+ .pf-c-expandable-section {
8481
+ --pf-c-expandable-section__toggle--PaddingTop: var(--pf-global--spacer--form-element);
8482
+ --pf-c-expandable-section__toggle--PaddingRight: var(--pf-global--spacer--md);
8483
+ --pf-c-expandable-section__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
8484
+ --pf-c-expandable-section__toggle--PaddingLeft: 0;
8485
+ --pf-c-expandable-section__toggle--MarginTop: 0;
8486
+ --pf-c-expandable-section__toggle--Color: var(--pf-global--link--Color);
8487
+ --pf-c-expandable-section__toggle--hover--Color: var(--pf-global--link--Color--hover);
8488
+ --pf-c-expandable-section__toggle--active--Color: var(--pf-global--link--Color--hover);
8489
+ --pf-c-expandable-section__toggle--focus--Color: var(--pf-global--link--Color--hover);
8490
+ --pf-c-expandable-section__toggle--m-expanded--Color: var(--pf-global--link--Color--hover);
8491
+ --pf-c-expandable-section__toggle-icon--MinWidth: 1em;
8492
+ --pf-c-expandable-section__toggle-icon--Color: var(--pf-global--Color--100);
8493
+ --pf-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
8494
+ --pf-c-expandable-section__toggle-icon--Rotate: 0;
8495
+ --pf-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
8496
+ --pf-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
8497
+ --pf-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
8498
+ --pf-c-expandable-section__toggle-text--MarginLeft: calc(var(--pf-global--spacer--xs) + var(--pf-global--spacer--sm));
8499
+ --pf-c-expandable-section__content--MarginTop: var(--pf-global--spacer--md);
8500
+ --pf-c-expandable-section__content--MaxWidth: auto;
8501
+ --pf-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
8502
+ --pf-c-expandable-section--m-display-lg--BoxShadow: var(--pf-global--BoxShadow--md);
8503
+ --pf-c-expandable-section--m-display-lg__toggle--PaddingTop: var(--pf-global--spacer--md);
8504
+ --pf-c-expandable-section--m-display-lg__toggle--PaddingRight: var(--pf-global--spacer--md);
8505
+ --pf-c-expandable-section--m-display-lg__toggle--PaddingBottom: var(--pf-global--spacer--md);
8506
+ --pf-c-expandable-section--m-display-lg__toggle--PaddingLeft: var(--pf-global--spacer--md);
8507
+ --pf-c-expandable-section--m-display-lg__content--MarginTop: 0;
8508
+ --pf-c-expandable-section--m-display-lg__content--PaddingRight: var(--pf-global--spacer--lg);
8509
+ --pf-c-expandable-section--m-display-lg__content--PaddingBottom: var(--pf-global--spacer--lg);
8510
+ --pf-c-expandable-section--m-display-lg__content--PaddingLeft: var(--pf-global--spacer--lg);
8511
+ --pf-c-expandable-section--m-display-lg--after--BackgroundColor: transparent;
8512
+ --pf-c-expandable-section--m-display-lg--after--Width: var(--pf-global--BorderWidth--lg);
8513
+ --pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor: var(--pf-global--primary-color--100);
8514
+ --pf-c-expandable-section--m-indented__content--PaddingLeft: calc(var(--pf-c-expandable-section__toggle-text--MarginLeft) + var(--pf-c-expandable-section__toggle-icon--MinWidth));
8515
+ --pf-c-expandable-section--m-truncate__content--LineClamp: 3;
8516
+ --pf-c-expandable-section--m-truncate__toggle--MarginTop: var(--pf-global--spacer--xs);
8517
+ }
8518
+
8519
+ .pf-c-expandable-section.pf-m-expanded {
8520
+ --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--m-expanded--Color);
8521
+ --pf-c-expandable-section__toggle-icon--Rotate: var(--pf-c-expandable-section--m-expanded__toggle-icon--Rotate);
8522
+ --pf-c-expandable-section__toggle-icon--m-expand-top--Rotate: var(--pf-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate);
8523
+ --pf-c-expandable-section--m-display-lg--after--BackgroundColor: var(--pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor);
8524
+ }
8525
+
8526
+ .pf-c-expandable-section.pf-m-detached, .pf-c-expandable-section.pf-m-truncate {
8527
+ --pf-c-expandable-section__content--MarginTop: 0;
8528
+ }
8529
+
8530
+ .pf-c-expandable-section.pf-m-limit-width {
8531
+ --pf-c-expandable-section__content--MaxWidth: var(--pf-c-expandable-section--m-limit-width__content--MaxWidth);
8532
+ }
8533
+
8534
+ .pf-c-expandable-section.pf-m-display-lg {
8535
+ --pf-c-expandable-section__toggle--PaddingTop: var(--pf-c-expandable-section--m-display-lg__toggle--PaddingTop);
8536
+ --pf-c-expandable-section__toggle--PaddingRight: var(--pf-c-expandable-section--m-display-lg__toggle--PaddingRight);
8537
+ --pf-c-expandable-section__toggle--PaddingBottom: var(--pf-c-expandable-section--m-display-lg__toggle--PaddingBottom);
8538
+ --pf-c-expandable-section__toggle--PaddingLeft: var(--pf-c-expandable-section--m-display-lg__toggle--PaddingLeft);
8539
+ --pf-c-expandable-section__content--PaddingRight: var(--pf-c-expandable-section--m-display-lg__content--PaddingRight);
8540
+ --pf-c-expandable-section__content--PaddingBottom: var(--pf-c-expandable-section--m-display-lg__content--PaddingBottom);
8541
+ --pf-c-expandable-section__content--PaddingLeft: var(--pf-c-expandable-section--m-display-lg__content--PaddingLeft);
8542
+ --pf-c-expandable-section__content--MarginTop: var(--pf-c-expandable-section--m-display-lg__content--MarginTop);
8543
+ position: relative;
8544
+ box-shadow: var(--pf-c-expandable-section--m-display-lg--BoxShadow);
8408
8545
  }
8409
8546
 
8410
- .pf-c-empty-state.pf-m-sm {
8411
- --pf-c-empty-state__content--MaxWidth: var(--pf-c-empty-state--m-sm__content--MaxWidth);
8547
+ .pf-c-expandable-section.pf-m-display-lg::after {
8548
+ position: absolute;
8549
+ top: 0;
8550
+ bottom: 0;
8551
+ left: 0;
8552
+ width: var(--pf-c-expandable-section--m-display-lg--after--Width);
8553
+ content: "";
8554
+ background-color: var(--pf-c-expandable-section--m-display-lg--after--BackgroundColor);
8412
8555
  }
8413
8556
 
8414
- .pf-c-empty-state.pf-m-lg {
8415
- --pf-c-empty-state__content--MaxWidth: var(--pf-c-empty-state--m-lg__content--MaxWidth);
8557
+ .pf-c-expandable-section.pf-m-indented {
8558
+ --pf-c-expandable-section__content--PaddingLeft: var(--pf-c-expandable-section--m-indented__content--PaddingLeft);
8416
8559
  }
8417
8560
 
8418
- .pf-c-empty-state.pf-m-xl {
8419
- --pf-c-empty-state__body--MarginTop: var(--pf-c-empty-state--m-xl__body--MarginTop);
8420
- --pf-c-empty-state__icon--MarginBottom: var(--pf-c-empty-state--m-xl__icon--MarginBottom);
8421
- --pf-c-empty-state__icon--FontSize: var(--pf-c-empty-state--m-xl__icon--FontSize);
8422
- --pf-c-empty-state--c-button__secondary--MarginTop: var(--pf-c-empty-state--m-xl--c-button__secondary--MarginTop);
8561
+ .pf-c-expandable-section.pf-m-truncate {
8562
+ --pf-c-expandable-section__toggle--MarginTop: var(--pf-c-expandable-section--m-truncate__toggle--MarginTop);
8563
+ --pf-c-expandable-section__toggle--PaddingTop: 0;
8564
+ --pf-c-expandable-section__toggle--PaddingRight: 0;
8565
+ --pf-c-expandable-section__toggle--PaddingBottom: 0;
8566
+ --pf-c-expandable-section__toggle-text--MarginLeft: 0;
8423
8567
  }
8424
8568
 
8425
- .pf-c-empty-state.pf-m-xl .pf-c-empty-state__body {
8426
- font-size: var(--pf-c-empty-state--m-xl__body--FontSize);
8569
+ .pf-c-expandable-section.pf-m-truncate:not(.pf-m-expanded) .pf-c-expandable-section__content {
8570
+ display: -webkit-box;
8571
+ -webkit-box-orient: vertical;
8572
+ -webkit-line-clamp: var(--pf-c-expandable-section--m-truncate__content--LineClamp);
8573
+ overflow: hidden;
8427
8574
  }
8428
8575
 
8429
- .pf-c-empty-state.pf-m-full-height {
8430
- height: 100%;
8576
+ .pf-c-expandable-section.pf-m-detached {
8577
+ --pf-c-expandable-section--m-truncate__toggle--MarginTop: 0;
8431
8578
  }
8432
8579
 
8433
- .pf-c-empty-state__content {
8434
- max-width: var(--pf-c-empty-state__content--MaxWidth);
8580
+ .pf-c-expandable-section__toggle {
8581
+ display: flex;
8582
+ 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);
8583
+ margin-top: var(--pf-c-expandable-section__toggle--MarginTop);
8584
+ color: var(--pf-c-expandable-section__toggle--Color);
8585
+ border: none;
8435
8586
  }
8436
8587
 
8437
- .pf-c-empty-state__content > .pf-c-title.pf-m-lg {
8438
- font-size: var(--pf-c-empty-state__content--c-title--m-lg--FontSize);
8588
+ .pf-c-expandable-section__toggle:hover {
8589
+ --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--hover--Color);
8439
8590
  }
8440
8591
 
8441
- .pf-c-empty-state__icon {
8442
- margin-bottom: var(--pf-c-empty-state__icon--MarginBottom);
8443
- font-size: var(--pf-c-empty-state__icon--FontSize);
8444
- color: var(--pf-c-empty-state__icon--Color);
8592
+ .pf-c-expandable-section__toggle:active, .pf-c-expandable-section__toggle.pf-m-active {
8593
+ --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--active--Color);
8445
8594
  }
8446
8595
 
8447
- .pf-c-empty-state__body {
8448
- margin-top: var(--pf-c-empty-state__body--MarginTop);
8449
- color: var(--pf-c-empty-state__body--Color);
8596
+ .pf-c-expandable-section__toggle:focus {
8597
+ --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--focus--Color);
8450
8598
  }
8451
8599
 
8452
- .pf-c-empty-state__content > .pf-c-button.pf-m-primary,
8453
- .pf-c-empty-state__primary {
8454
- margin-top: var(--pf-c-empty-state__primary--MarginTop);
8600
+ .pf-c-expandable-section__toggle-icon {
8601
+ min-width: var(--pf-c-expandable-section__toggle-icon--MinWidth);
8602
+ color: var(--pf-c-expandable-section__toggle-icon--Color);
8603
+ transition: var(--pf-c-expandable-section__toggle-icon--Transition);
8604
+ transform: rotate(var(--pf-c-expandable-section__toggle-icon--Rotate));
8455
8605
  }
8456
8606
 
8457
- .pf-c-empty-state__content > .pf-c-button.pf-m-primary + .pf-c-empty-state__secondary,
8458
- .pf-c-empty-state__primary + .pf-c-empty-state__secondary {
8459
- margin-top: var(--pf-c-empty-state__primary--secondary--MarginTop);
8607
+ .pf-c-expandable-section__toggle-icon.pf-m-expand-top {
8608
+ --pf-c-expandable-section__toggle-icon--Rotate: var(--pf-c-expandable-section__toggle-icon--m-expand-top--Rotate);
8460
8609
  }
8461
8610
 
8462
- .pf-c-empty-state__secondary {
8463
- display: flex;
8464
- flex-wrap: wrap;
8465
- justify-content: center;
8466
- margin-top: var(--pf-c-empty-state__secondary--MarginTop);
8467
- margin-bottom: var(--pf-c-empty-state__secondary--MarginBottom);
8611
+ .pf-c-expandable-section__toggle-text {
8612
+ margin-left: var(--pf-c-expandable-section__toggle-text--MarginLeft);
8468
8613
  }
8469
8614
 
8470
- .pf-c-empty-state__secondary > * {
8471
- margin-right: var(--pf-c-empty-state__secondary--child--MarginRight);
8472
- margin-bottom: var(--pf-c-empty-state__secondary--child--MarginBottom);
8473
- margin-left: var(--pf-c-empty-state__secondary--child--MarginLeft);
8615
+ .pf-c-expandable-section__content {
8616
+ max-width: var(--pf-c-expandable-section__content--MaxWidth);
8617
+ padding-right: var(--pf-c-expandable-section__content--PaddingRight);
8618
+ padding-bottom: var(--pf-c-expandable-section__content--PaddingBottom);
8619
+ padding-left: var(--pf-c-expandable-section__content--PaddingLeft);
8620
+ margin-top: var(--pf-c-expandable-section__content--MarginTop);
8474
8621
  }
8475
8622
 
8476
- .pf-m-overpass-font .pf-c-empty-state .pf-c-empty-state__content > .pf-c-title.pf-m-lg {
8477
- font-size: var(--pf-global--FontSize--lg);
8623
+ .pf-m-overpass-font .pf-c-expandable-section__toggle {
8624
+ font-weight: var(--pf-global--FontWeight--semi-bold);
8478
8625
  }
8479
8626
 
8480
8627
  .pf-c-file-upload {
@@ -9097,171 +9244,24 @@ label.pf-c-check, .pf-c-check__label,
9097
9244
  }
9098
9245
 
9099
9246
  .pf-c-form__field-group-body {
9100
- grid-column: var(--pf-c-form__field-group-body--GridColumn);
9101
- display: grid;
9102
- gap: var(--pf-c-form__field-group-body--Gap);
9103
- padding-top: var(--pf-c-form__field-group-body--PaddingTop);
9104
- padding-bottom: var(--pf-c-form__field-group-body--PaddingBottom);
9105
- }
9106
-
9107
- .pf-c-form__field-group-body > .pf-c-form__field-group:first-child {
9108
- --pf-c-form__field-group-toggle--PaddingTop: 0;
9109
- --pf-c-form__field-group-header--PaddingTop: 0;
9110
- }
9111
-
9112
- .pf-c-form__field-group-body > .pf-c-form__field-group:last-child {
9113
- margin-bottom: var(--pf-c-form__field-group-body__field-group--last-child--MarginBottom);
9114
- }
9115
-
9116
- :where(.pf-theme-dark) .pf-c-form {
9117
- --pf-c-form__helper-text--m-success--Color: var(--pf-global--success-color--100);
9118
- }
9119
-
9120
- .pf-c-expandable-section {
9121
- --pf-c-expandable-section__toggle--PaddingTop: var(--pf-global--spacer--form-element);
9122
- --pf-c-expandable-section__toggle--PaddingRight: var(--pf-global--spacer--md);
9123
- --pf-c-expandable-section__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
9124
- --pf-c-expandable-section__toggle--PaddingLeft: 0;
9125
- --pf-c-expandable-section__toggle--MarginTop: 0;
9126
- --pf-c-expandable-section__toggle--Color: var(--pf-global--link--Color);
9127
- --pf-c-expandable-section__toggle--hover--Color: var(--pf-global--link--Color--hover);
9128
- --pf-c-expandable-section__toggle--active--Color: var(--pf-global--link--Color--hover);
9129
- --pf-c-expandable-section__toggle--focus--Color: var(--pf-global--link--Color--hover);
9130
- --pf-c-expandable-section__toggle--m-expanded--Color: var(--pf-global--link--Color--hover);
9131
- --pf-c-expandable-section__toggle-icon--MinWidth: 1em;
9132
- --pf-c-expandable-section__toggle-icon--Color: var(--pf-global--Color--100);
9133
- --pf-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
9134
- --pf-c-expandable-section__toggle-icon--Rotate: 0;
9135
- --pf-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
9136
- --pf-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
9137
- --pf-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
9138
- --pf-c-expandable-section__toggle-text--MarginLeft: calc(var(--pf-global--spacer--xs) + var(--pf-global--spacer--sm));
9139
- --pf-c-expandable-section__content--MarginTop: var(--pf-global--spacer--md);
9140
- --pf-c-expandable-section__content--MaxWidth: auto;
9141
- --pf-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
9142
- --pf-c-expandable-section--m-display-lg--BoxShadow: var(--pf-global--BoxShadow--md);
9143
- --pf-c-expandable-section--m-display-lg__toggle--PaddingTop: var(--pf-global--spacer--md);
9144
- --pf-c-expandable-section--m-display-lg__toggle--PaddingRight: var(--pf-global--spacer--md);
9145
- --pf-c-expandable-section--m-display-lg__toggle--PaddingBottom: var(--pf-global--spacer--md);
9146
- --pf-c-expandable-section--m-display-lg__toggle--PaddingLeft: var(--pf-global--spacer--md);
9147
- --pf-c-expandable-section--m-display-lg__content--MarginTop: 0;
9148
- --pf-c-expandable-section--m-display-lg__content--PaddingRight: var(--pf-global--spacer--lg);
9149
- --pf-c-expandable-section--m-display-lg__content--PaddingBottom: var(--pf-global--spacer--lg);
9150
- --pf-c-expandable-section--m-display-lg__content--PaddingLeft: var(--pf-global--spacer--lg);
9151
- --pf-c-expandable-section--m-display-lg--after--BackgroundColor: transparent;
9152
- --pf-c-expandable-section--m-display-lg--after--Width: var(--pf-global--BorderWidth--lg);
9153
- --pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor: var(--pf-global--primary-color--100);
9154
- --pf-c-expandable-section--m-indented__content--PaddingLeft: calc(var(--pf-c-expandable-section__toggle-text--MarginLeft) + var(--pf-c-expandable-section__toggle-icon--MinWidth));
9155
- --pf-c-expandable-section--m-truncate__content--LineClamp: 3;
9156
- --pf-c-expandable-section--m-truncate__toggle--MarginTop: var(--pf-global--spacer--xs);
9157
- }
9158
-
9159
- .pf-c-expandable-section.pf-m-expanded {
9160
- --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--m-expanded--Color);
9161
- --pf-c-expandable-section__toggle-icon--Rotate: var(--pf-c-expandable-section--m-expanded__toggle-icon--Rotate);
9162
- --pf-c-expandable-section__toggle-icon--m-expand-top--Rotate: var(--pf-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate);
9163
- --pf-c-expandable-section--m-display-lg--after--BackgroundColor: var(--pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor);
9164
- }
9165
-
9166
- .pf-c-expandable-section.pf-m-detached, .pf-c-expandable-section.pf-m-truncate {
9167
- --pf-c-expandable-section__content--MarginTop: 0;
9168
- }
9169
-
9170
- .pf-c-expandable-section.pf-m-limit-width {
9171
- --pf-c-expandable-section__content--MaxWidth: var(--pf-c-expandable-section--m-limit-width__content--MaxWidth);
9172
- }
9173
-
9174
- .pf-c-expandable-section.pf-m-display-lg {
9175
- --pf-c-expandable-section__toggle--PaddingTop: var(--pf-c-expandable-section--m-display-lg__toggle--PaddingTop);
9176
- --pf-c-expandable-section__toggle--PaddingRight: var(--pf-c-expandable-section--m-display-lg__toggle--PaddingRight);
9177
- --pf-c-expandable-section__toggle--PaddingBottom: var(--pf-c-expandable-section--m-display-lg__toggle--PaddingBottom);
9178
- --pf-c-expandable-section__toggle--PaddingLeft: var(--pf-c-expandable-section--m-display-lg__toggle--PaddingLeft);
9179
- --pf-c-expandable-section__content--PaddingRight: var(--pf-c-expandable-section--m-display-lg__content--PaddingRight);
9180
- --pf-c-expandable-section__content--PaddingBottom: var(--pf-c-expandable-section--m-display-lg__content--PaddingBottom);
9181
- --pf-c-expandable-section__content--PaddingLeft: var(--pf-c-expandable-section--m-display-lg__content--PaddingLeft);
9182
- --pf-c-expandable-section__content--MarginTop: var(--pf-c-expandable-section--m-display-lg__content--MarginTop);
9183
- position: relative;
9184
- box-shadow: var(--pf-c-expandable-section--m-display-lg--BoxShadow);
9185
- }
9186
-
9187
- .pf-c-expandable-section.pf-m-display-lg::after {
9188
- position: absolute;
9189
- top: 0;
9190
- bottom: 0;
9191
- left: 0;
9192
- width: var(--pf-c-expandable-section--m-display-lg--after--Width);
9193
- content: "";
9194
- background-color: var(--pf-c-expandable-section--m-display-lg--after--BackgroundColor);
9195
- }
9196
-
9197
- .pf-c-expandable-section.pf-m-indented {
9198
- --pf-c-expandable-section__content--PaddingLeft: var(--pf-c-expandable-section--m-indented__content--PaddingLeft);
9199
- }
9200
-
9201
- .pf-c-expandable-section.pf-m-truncate {
9202
- --pf-c-expandable-section__toggle--MarginTop: var(--pf-c-expandable-section--m-truncate__toggle--MarginTop);
9203
- --pf-c-expandable-section__toggle--PaddingTop: 0;
9204
- --pf-c-expandable-section__toggle--PaddingRight: 0;
9205
- --pf-c-expandable-section__toggle--PaddingBottom: 0;
9206
- --pf-c-expandable-section__toggle-text--MarginLeft: 0;
9207
- }
9208
-
9209
- .pf-c-expandable-section.pf-m-truncate:not(.pf-m-expanded) .pf-c-expandable-section__content {
9210
- display: -webkit-box;
9211
- -webkit-box-orient: vertical;
9212
- -webkit-line-clamp: var(--pf-c-expandable-section--m-truncate__content--LineClamp);
9213
- overflow: hidden;
9214
- }
9215
-
9216
- .pf-c-expandable-section.pf-m-detached {
9217
- --pf-c-expandable-section--m-truncate__toggle--MarginTop: 0;
9218
- }
9219
-
9220
- .pf-c-expandable-section__toggle {
9221
- display: flex;
9222
- 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);
9223
- margin-top: var(--pf-c-expandable-section__toggle--MarginTop);
9224
- color: var(--pf-c-expandable-section__toggle--Color);
9225
- border: none;
9226
- }
9227
-
9228
- .pf-c-expandable-section__toggle:hover {
9229
- --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--hover--Color);
9230
- }
9231
-
9232
- .pf-c-expandable-section__toggle:active, .pf-c-expandable-section__toggle.pf-m-active {
9233
- --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--active--Color);
9234
- }
9235
-
9236
- .pf-c-expandable-section__toggle:focus {
9237
- --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--focus--Color);
9238
- }
9239
-
9240
- .pf-c-expandable-section__toggle-icon {
9241
- min-width: var(--pf-c-expandable-section__toggle-icon--MinWidth);
9242
- color: var(--pf-c-expandable-section__toggle-icon--Color);
9243
- transition: var(--pf-c-expandable-section__toggle-icon--Transition);
9244
- transform: rotate(var(--pf-c-expandable-section__toggle-icon--Rotate));
9245
- }
9246
-
9247
- .pf-c-expandable-section__toggle-icon.pf-m-expand-top {
9248
- --pf-c-expandable-section__toggle-icon--Rotate: var(--pf-c-expandable-section__toggle-icon--m-expand-top--Rotate);
9247
+ grid-column: var(--pf-c-form__field-group-body--GridColumn);
9248
+ display: grid;
9249
+ gap: var(--pf-c-form__field-group-body--Gap);
9250
+ padding-top: var(--pf-c-form__field-group-body--PaddingTop);
9251
+ padding-bottom: var(--pf-c-form__field-group-body--PaddingBottom);
9249
9252
  }
9250
9253
 
9251
- .pf-c-expandable-section__toggle-text {
9252
- margin-left: var(--pf-c-expandable-section__toggle-text--MarginLeft);
9254
+ .pf-c-form__field-group-body > .pf-c-form__field-group:first-child {
9255
+ --pf-c-form__field-group-toggle--PaddingTop: 0;
9256
+ --pf-c-form__field-group-header--PaddingTop: 0;
9253
9257
  }
9254
9258
 
9255
- .pf-c-expandable-section__content {
9256
- max-width: var(--pf-c-expandable-section__content--MaxWidth);
9257
- padding-right: var(--pf-c-expandable-section__content--PaddingRight);
9258
- padding-bottom: var(--pf-c-expandable-section__content--PaddingBottom);
9259
- padding-left: var(--pf-c-expandable-section__content--PaddingLeft);
9260
- margin-top: var(--pf-c-expandable-section__content--MarginTop);
9259
+ .pf-c-form__field-group-body > .pf-c-form__field-group:last-child {
9260
+ margin-bottom: var(--pf-c-form__field-group-body__field-group--last-child--MarginBottom);
9261
9261
  }
9262
9262
 
9263
- .pf-m-overpass-font .pf-c-expandable-section__toggle {
9264
- font-weight: var(--pf-global--FontWeight--semi-bold);
9263
+ :where(.pf-theme-dark) .pf-c-form {
9264
+ --pf-c-form__helper-text--m-success--Color: var(--pf-global--success-color--100);
9265
9265
  }
9266
9266
 
9267
9267
  .pf-c-helper-text {
@@ -18847,6 +18847,20 @@ label.pf-c-radio, .pf-c-radio__label,
18847
18847
  --pf-c-skeleton--after--LinearGradientColorStop3: var(--pf-global--palette--black-600);
18848
18848
  }
18849
18849
 
18850
+ .pf-c-skip-to-content {
18851
+ --pf-c-skip-to-content--Top: var(--pf-global--spacer--md);
18852
+ --pf-c-skip-to-content--ZIndex: var(--pf-global--ZIndex--2xl);
18853
+ --pf-c-skip-to-content--focus--Left: var(--pf-global--spacer--md);
18854
+ position: absolute;
18855
+ top: var(--pf-c-skip-to-content--Top);
18856
+ left: -300%;
18857
+ z-index: var(--pf-c-skip-to-content--ZIndex);
18858
+ }
18859
+
18860
+ .pf-c-skip-to-content:focus {
18861
+ left: var(--pf-c-skip-to-content--focus--Left);
18862
+ }
18863
+
18850
18864
  .pf-c-slider {
18851
18865
  --pf-c-slider--value: 0;
18852
18866
  --pf-c-slider__rail--PaddingTop: var(--pf-global--spacer--md);
@@ -19066,59 +19080,6 @@ label.pf-c-radio, .pf-c-radio__label,
19066
19080
  margin-left: var(--pf-c-slider__main--actions--MarginLeft);
19067
19081
  }
19068
19082
 
19069
- .pf-c-skip-to-content {
19070
- --pf-c-skip-to-content--Top: var(--pf-global--spacer--md);
19071
- --pf-c-skip-to-content--ZIndex: var(--pf-global--ZIndex--2xl);
19072
- --pf-c-skip-to-content--focus--Left: var(--pf-global--spacer--md);
19073
- position: absolute;
19074
- top: var(--pf-c-skip-to-content--Top);
19075
- left: -300%;
19076
- z-index: var(--pf-c-skip-to-content--ZIndex);
19077
- }
19078
-
19079
- .pf-c-skip-to-content:focus {
19080
- left: var(--pf-c-skip-to-content--focus--Left);
19081
- }
19082
-
19083
- .pf-c-tab-content {
19084
- --pf-c-tab-content__body--PaddingTop: 0;
19085
- --pf-c-tab-content__body--PaddingRight: 0;
19086
- --pf-c-tab-content__body--PaddingBottom: 0;
19087
- --pf-c-tab-content__body--PaddingLeft: 0;
19088
- --pf-c-tab-content__body--m-padding--PaddingTop: var(--pf-global--spacer--md);
19089
- --pf-c-tab-content__body--m-padding--PaddingRight: var(--pf-global--spacer--md);
19090
- --pf-c-tab-content__body--m-padding--PaddingBottom: var(--pf-global--spacer--md);
19091
- --pf-c-tab-content__body--m-padding--PaddingLeft: var(--pf-global--spacer--md);
19092
- --pf-c-tab-content__body--m-padding--xl--PaddingTop: var(--pf-global--spacer--lg);
19093
- --pf-c-tab-content__body--m-padding--xl--PaddingRight: var(--pf-global--spacer--lg);
19094
- --pf-c-tab-content__body--m-padding--xl--PaddingBottom: var(--pf-global--spacer--lg);
19095
- --pf-c-tab-content__body--m-padding--xl--PaddingLeft: var(--pf-global--spacer--lg);
19096
- --pf-c-tab-content--m-light-300: var(--pf-global--BackgroundColor--light-300);
19097
- }
19098
-
19099
- @media screen and (min-width: 1200px) {
19100
- .pf-c-tab-content {
19101
- --pf-c-tab-content__body--m-padding--PaddingTop: var(--pf-c-tab-content__body--m-padding--xl--PaddingTop);
19102
- --pf-c-tab-content__body--m-padding--PaddingRight: var(--pf-c-tab-content__body--m-padding--xl--PaddingRight);
19103
- --pf-c-tab-content__body--m-padding--PaddingBottom: var(--pf-c-tab-content__body--m-padding--xl--PaddingBottom);
19104
- --pf-c-tab-content__body--m-padding--PaddingLeft: var(--pf-c-tab-content__body--m-padding--xl--PaddingLeft);
19105
- }
19106
- }
19107
- .pf-c-tab-content.pf-m-light-300 {
19108
- background-color: var(--pf-c-tab-content--m-light-300);
19109
- }
19110
-
19111
- .pf-c-tab-content__body {
19112
- padding: var(--pf-c-tab-content__body--PaddingTop) var(--pf-c-tab-content__body--PaddingRight) var(--pf-c-tab-content__body--PaddingBottom) var(--pf-c-tab-content__body--PaddingLeft);
19113
- }
19114
-
19115
- .pf-c-tab-content__body.pf-m-padding {
19116
- --pf-c-tab-content__body--PaddingTop: var(--pf-c-tab-content__body--m-padding--PaddingTop);
19117
- --pf-c-tab-content__body--PaddingRight: var(--pf-c-tab-content__body--m-padding--PaddingRight);
19118
- --pf-c-tab-content__body--PaddingBottom: var(--pf-c-tab-content__body--m-padding--PaddingBottom);
19119
- --pf-c-tab-content__body--PaddingLeft: var(--pf-c-tab-content__body--m-padding--PaddingLeft);
19120
- }
19121
-
19122
19083
  .pf-c-spinner {
19123
19084
  --pf-c-spinner--diameter: var(--pf-global--icon--FontSize--xl);
19124
19085
  --pf-c-spinner--Width: var(--pf-c-spinner--diameter);
@@ -19299,55 +19260,215 @@ svg.pf-c-spinner.pf-m-sm {
19299
19260
  --pf-c-spinner--diameter: var(--pf-c-spinner--m-sm--diameter);
19300
19261
  }
19301
19262
 
19302
- svg.pf-c-spinner.pf-m-md {
19303
- --pf-c-spinner--diameter: var(--pf-c-spinner--m-md--diameter);
19263
+ svg.pf-c-spinner.pf-m-md {
19264
+ --pf-c-spinner--diameter: var(--pf-c-spinner--m-md--diameter);
19265
+ }
19266
+
19267
+ svg.pf-c-spinner.pf-m-lg {
19268
+ --pf-c-spinner--diameter: var(--pf-c-spinner--m-lg--diameter);
19269
+ }
19270
+
19271
+ svg.pf-c-spinner.pf-m-xl {
19272
+ --pf-c-spinner--diameter: var(--pf-c-spinner--m-xl--diameter);
19273
+ }
19274
+
19275
+ .pf-c-spinner__path {
19276
+ width: 100%;
19277
+ height: 100%;
19278
+ transform-origin: 50% 50%;
19279
+ animation: pf-c-spinner-animation-dash var(--pf-c-spinner--AnimationDuration) var(--pf-c-spinner__path--AnimationTimingFunction) infinite;
19280
+ stroke: var(--pf-c-spinner--Color);
19281
+ stroke-linecap: round;
19282
+ stroke-dasharray: 283;
19283
+ stroke-dashoffset: 280;
19284
+ stroke-width: var(--pf-c-spinner--stroke-width);
19285
+ }
19286
+
19287
+ @keyframes pf-c-spinner-animation-rotate {
19288
+ 0% {
19289
+ transform: rotate(0deg);
19290
+ }
19291
+ 100% {
19292
+ transform: rotate(360deg);
19293
+ }
19294
+ }
19295
+ @keyframes pf-c-spinner-animation-dash {
19296
+ 0% {
19297
+ stroke-dashoffset: 280;
19298
+ transform: rotate(0);
19299
+ }
19300
+ 15% {
19301
+ stroke-width: calc(var(--pf-c-spinner__path--StrokeWidth) - 4);
19302
+ }
19303
+ 40% {
19304
+ stroke-dashoffset: 150;
19305
+ stroke-dasharray: 220;
19306
+ }
19307
+ 100% {
19308
+ stroke-dashoffset: 280;
19309
+ transform: rotate(720deg);
19310
+ }
19311
+ }
19312
+ .pf-c-switch {
19313
+ --pf-c-switch--FontSize: var(--pf-global--FontSize--md);
19314
+ --pf-c-switch__label--PaddingLeft: var(--pf-global--spacer--md);
19315
+ --pf-c-switch--ColumnGap: var(--pf-c-switch__label--PaddingLeft);
19316
+ --pf-c-switch__toggle-icon--FontSize: calc(var(--pf-c-switch--FontSize) * .625);
19317
+ --pf-c-switch__toggle-icon--Color: var(--pf-global--Color--light-100);
19318
+ --pf-c-switch__toggle-icon--Left: calc(var(--pf-c-switch--FontSize) * .4);
19319
+ --pf-c-switch__toggle-icon--Offset: 0.125rem;
19320
+ --pf-c-switch--LineHeight: var(--pf-global--LineHeight--md);
19321
+ --pf-c-switch--Height: auto;
19322
+ --pf-c-switch__input--checked__toggle--BackgroundColor: var(--pf-global--primary-color--100);
19323
+ --pf-c-switch__input--checked__toggle--before--TranslateX: calc(100% + var(--pf-c-switch__toggle-icon--Offset));
19324
+ --pf-c-switch__input--checked__label--Color: var(--pf-global--Color--dark-100);
19325
+ --pf-c-switch__input--not-checked__label--Color: var(--pf-global--disabled-color--100);
19326
+ --pf-c-switch__input--disabled__label--Color: var(--pf-global--disabled-color--100);
19327
+ --pf-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-global--disabled-color--200);
19328
+ --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--palette--black-150);
19329
+ --pf-c-switch__input--focus__toggle--OutlineWidth: var(--pf-global--BorderWidth--md);
19330
+ --pf-c-switch__input--focus__toggle--OutlineOffset: var(--pf-global--spacer--sm);
19331
+ --pf-c-switch__input--focus__toggle--OutlineColor: var(--pf-global--primary-color--100);
19332
+ --pf-c-switch__toggle--Height: calc(var(--pf-c-switch--FontSize) * var(--pf-c-switch--LineHeight));
19333
+ --pf-c-switch__toggle--BackgroundColor: var(--pf-global--palette--black-500);
19334
+ --pf-c-switch__toggle--BorderRadius: var(--pf-c-switch__toggle--Height);
19335
+ --pf-c-switch__toggle--before--Width: calc(var(--pf-c-switch--FontSize) - var(--pf-c-switch__toggle-icon--Offset));
19336
+ --pf-c-switch__toggle--before--Height: var(--pf-c-switch__toggle--before--Width);
19337
+ --pf-c-switch__toggle--before--Top: calc((var(--pf-c-switch__toggle--Height) - var(--pf-c-switch__toggle--before--Height)) / 2);
19338
+ --pf-c-switch__toggle--before--Left: var(--pf-c-switch__toggle--before--Top);
19339
+ --pf-c-switch__toggle--before--BackgroundColor: var(--pf-global--BackgroundColor--100);
19340
+ --pf-c-switch__toggle--before--BorderRadius: var(--pf-global--BorderRadius--lg);
19341
+ --pf-c-switch__toggle--before--BoxShadow: var(--pf-global--BoxShadow--md);
19342
+ --pf-c-switch__toggle--before--Transition: transform .25s ease 0s;
19343
+ --pf-c-switch__toggle--Width: calc(var(--pf-c-switch__toggle--Height) + var(--pf-c-switch__toggle-icon--Offset) + var(--pf-c-switch__toggle--before--Width));
19344
+ --pf-c-switch__label--Color: var(--pf-global--Color--dark-100);
19345
+ position: relative;
19346
+ display: inline-grid;
19347
+ grid-template-columns: auto;
19348
+ grid-auto-columns: 1fr;
19349
+ column-gap: var(--pf-c-switch--ColumnGap);
19350
+ height: var(--pf-c-switch--Height);
19351
+ font-size: var(--pf-c-switch--FontSize);
19352
+ line-height: var(--pf-c-switch--LineHeight);
19353
+ vertical-align: middle;
19354
+ cursor: pointer;
19355
+ }
19356
+
19357
+ .pf-c-switch.pf-m-reverse .pf-c-switch__label,
19358
+ .pf-c-switch.pf-m-reverse .pf-c-switch__toggle {
19359
+ grid-row: 1;
19360
+ }
19361
+
19362
+ .pf-c-switch.pf-m-reverse .pf-c-switch__label {
19363
+ grid-column: 1;
19364
+ }
19365
+
19366
+ .pf-c-switch__input {
19367
+ position: absolute;
19368
+ cursor: pointer;
19369
+ opacity: 0;
19370
+ }
19371
+
19372
+ .pf-c-switch__input:focus ~ .pf-c-switch__toggle {
19373
+ outline: var(--pf-c-switch__input--focus__toggle--OutlineWidth) solid var(--pf-c-switch__input--focus__toggle--OutlineColor);
19374
+ outline-offset: var(--pf-c-switch__input--focus__toggle--OutlineOffset);
19375
+ }
19376
+
19377
+ .pf-c-switch__input:checked ~ .pf-c-switch__label {
19378
+ color: var(--pf-c-switch__input--checked__label--Color);
19379
+ }
19380
+
19381
+ .pf-c-switch__input:checked ~ .pf-c-switch__toggle {
19382
+ background-color: var(--pf-c-switch__input--checked__toggle--BackgroundColor);
19383
+ }
19384
+
19385
+ .pf-c-switch__input:checked ~ .pf-c-switch__toggle::before {
19386
+ transform: translateX(var(--pf-c-switch__input--checked__toggle--before--TranslateX));
19387
+ }
19388
+
19389
+ .pf-c-switch__input:checked ~ .pf-m-off {
19390
+ display: none;
19391
+ }
19392
+
19393
+ .pf-c-switch__input:not(:checked) ~ .pf-c-switch__label {
19394
+ color: var(--pf-c-switch__input--not-checked__label--Color);
19395
+ }
19396
+
19397
+ .pf-c-switch__input:not(:checked) ~ .pf-c-switch__toggle .pf-c-switch__toggle-icon {
19398
+ display: none;
19399
+ visibility: hidden;
19400
+ }
19401
+
19402
+ .pf-c-switch__input:not(:checked) ~ .pf-m-on {
19403
+ display: none;
19404
+ }
19405
+
19406
+ .pf-c-switch__input:disabled {
19407
+ cursor: not-allowed;
19408
+ }
19409
+
19410
+ .pf-c-switch__input:disabled ~ .pf-c-switch__label {
19411
+ color: var(--pf-c-switch__input--disabled__label--Color);
19412
+ cursor: not-allowed;
19413
+ }
19414
+
19415
+ .pf-c-switch__input:disabled ~ .pf-c-switch__toggle {
19416
+ cursor: not-allowed;
19417
+ background-color: var(--pf-c-switch__input--disabled__toggle--BackgroundColor);
19418
+ }
19419
+
19420
+ .pf-c-switch__input:disabled ~ .pf-c-switch__toggle::before {
19421
+ background-color: var(--pf-c-switch__input--disabled__toggle--before--BackgroundColor);
19422
+ }
19423
+
19424
+ .pf-c-switch__toggle {
19425
+ position: relative;
19426
+ display: inline-block;
19427
+ width: var(--pf-c-switch__toggle--Width);
19428
+ height: var(--pf-c-switch__toggle--Height);
19429
+ background-color: var(--pf-c-switch__toggle--BackgroundColor);
19430
+ border-radius: var(--pf-c-switch__toggle--BorderRadius);
19431
+ }
19432
+
19433
+ .pf-c-switch__toggle::before {
19434
+ position: absolute;
19435
+ top: var(--pf-c-switch__toggle--before--Top);
19436
+ left: var(--pf-c-switch__toggle--before--Left);
19437
+ display: block;
19438
+ width: var(--pf-c-switch__toggle--before--Width);
19439
+ height: var(--pf-c-switch__toggle--before--Height);
19440
+ content: "";
19441
+ background-color: var(--pf-c-switch__toggle--before--BackgroundColor);
19442
+ border-radius: var(--pf-c-switch__toggle--before--BorderRadius);
19443
+ box-shadow: var(--pf-c-switch__toggle--before--BoxShadow);
19444
+ transition: var(--pf-c-switch__toggle--before--Transition);
19304
19445
  }
19305
19446
 
19306
- svg.pf-c-spinner.pf-m-lg {
19307
- --pf-c-spinner--diameter: var(--pf-c-spinner--m-lg--diameter);
19447
+ .pf-c-switch__toggle-icon {
19448
+ position: absolute;
19449
+ top: 0;
19450
+ bottom: 0;
19451
+ left: var(--pf-c-switch__toggle-icon--Left);
19452
+ display: flex;
19453
+ align-items: center;
19454
+ font-size: var(--pf-c-switch__toggle-icon--FontSize);
19455
+ color: var(--pf-c-switch__toggle-icon--Color);
19308
19456
  }
19309
19457
 
19310
- svg.pf-c-spinner.pf-m-xl {
19311
- --pf-c-spinner--diameter: var(--pf-c-spinner--m-xl--diameter);
19458
+ .pf-c-switch__label {
19459
+ display: inline-block;
19460
+ grid-column: 2;
19461
+ color: var(--pf-c-switch__label--Color);
19462
+ vertical-align: top;
19312
19463
  }
19313
19464
 
19314
- .pf-c-spinner__path {
19315
- width: 100%;
19316
- height: 100%;
19317
- transform-origin: 50% 50%;
19318
- animation: pf-c-spinner-animation-dash var(--pf-c-spinner--AnimationDuration) var(--pf-c-spinner__path--AnimationTimingFunction) infinite;
19319
- stroke: var(--pf-c-spinner--Color);
19320
- stroke-linecap: round;
19321
- stroke-dasharray: 283;
19322
- stroke-dashoffset: 280;
19323
- stroke-width: var(--pf-c-spinner--stroke-width);
19465
+ :where(.pf-theme-dark) .pf-c-switch {
19466
+ --pf-c-switch__toggle-icon--Color: var(--pf-global--BackgroundColor--100);
19467
+ --pf-c-switch__input--not-checked__label--Color: var(--pf-global--Color--100);
19468
+ --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--disabled-color--100);
19469
+ --pf-c-switch__toggle--before--BoxShadow: none;
19324
19470
  }
19325
19471
 
19326
- @keyframes pf-c-spinner-animation-rotate {
19327
- 0% {
19328
- transform: rotate(0deg);
19329
- }
19330
- 100% {
19331
- transform: rotate(360deg);
19332
- }
19333
- }
19334
- @keyframes pf-c-spinner-animation-dash {
19335
- 0% {
19336
- stroke-dashoffset: 280;
19337
- transform: rotate(0);
19338
- }
19339
- 15% {
19340
- stroke-width: calc(var(--pf-c-spinner__path--StrokeWidth) - 4);
19341
- }
19342
- 40% {
19343
- stroke-dashoffset: 150;
19344
- stroke-dasharray: 220;
19345
- }
19346
- 100% {
19347
- stroke-dashoffset: 280;
19348
- transform: rotate(720deg);
19349
- }
19350
- }
19351
19472
  .pf-c-tabs {
19352
19473
  --pf-c-tabs--inset: 0;
19353
19474
  --pf-c-tabs--Width: auto;
@@ -20318,164 +20439,43 @@ svg.pf-c-spinner.pf-m-xl {
20318
20439
  --pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
20319
20440
  }
20320
20441
 
20321
- .pf-c-switch {
20322
- --pf-c-switch--FontSize: var(--pf-global--FontSize--md);
20323
- --pf-c-switch__label--PaddingLeft: var(--pf-global--spacer--md);
20324
- --pf-c-switch--ColumnGap: var(--pf-c-switch__label--PaddingLeft);
20325
- --pf-c-switch__toggle-icon--FontSize: calc(var(--pf-c-switch--FontSize) * .625);
20326
- --pf-c-switch__toggle-icon--Color: var(--pf-global--Color--light-100);
20327
- --pf-c-switch__toggle-icon--Left: calc(var(--pf-c-switch--FontSize) * .4);
20328
- --pf-c-switch__toggle-icon--Offset: 0.125rem;
20329
- --pf-c-switch--LineHeight: var(--pf-global--LineHeight--md);
20330
- --pf-c-switch--Height: auto;
20331
- --pf-c-switch__input--checked__toggle--BackgroundColor: var(--pf-global--primary-color--100);
20332
- --pf-c-switch__input--checked__toggle--before--TranslateX: calc(100% + var(--pf-c-switch__toggle-icon--Offset));
20333
- --pf-c-switch__input--checked__label--Color: var(--pf-global--Color--dark-100);
20334
- --pf-c-switch__input--not-checked__label--Color: var(--pf-global--disabled-color--100);
20335
- --pf-c-switch__input--disabled__label--Color: var(--pf-global--disabled-color--100);
20336
- --pf-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-global--disabled-color--200);
20337
- --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--palette--black-150);
20338
- --pf-c-switch__input--focus__toggle--OutlineWidth: var(--pf-global--BorderWidth--md);
20339
- --pf-c-switch__input--focus__toggle--OutlineOffset: var(--pf-global--spacer--sm);
20340
- --pf-c-switch__input--focus__toggle--OutlineColor: var(--pf-global--primary-color--100);
20341
- --pf-c-switch__toggle--Height: calc(var(--pf-c-switch--FontSize) * var(--pf-c-switch--LineHeight));
20342
- --pf-c-switch__toggle--BackgroundColor: var(--pf-global--palette--black-500);
20343
- --pf-c-switch__toggle--BorderRadius: var(--pf-c-switch__toggle--Height);
20344
- --pf-c-switch__toggle--before--Width: calc(var(--pf-c-switch--FontSize) - var(--pf-c-switch__toggle-icon--Offset));
20345
- --pf-c-switch__toggle--before--Height: var(--pf-c-switch__toggle--before--Width);
20346
- --pf-c-switch__toggle--before--Top: calc((var(--pf-c-switch__toggle--Height) - var(--pf-c-switch__toggle--before--Height)) / 2);
20347
- --pf-c-switch__toggle--before--Left: var(--pf-c-switch__toggle--before--Top);
20348
- --pf-c-switch__toggle--before--BackgroundColor: var(--pf-global--BackgroundColor--100);
20349
- --pf-c-switch__toggle--before--BorderRadius: var(--pf-global--BorderRadius--lg);
20350
- --pf-c-switch__toggle--before--BoxShadow: var(--pf-global--BoxShadow--md);
20351
- --pf-c-switch__toggle--before--Transition: transform .25s ease 0s;
20352
- --pf-c-switch__toggle--Width: calc(var(--pf-c-switch__toggle--Height) + var(--pf-c-switch__toggle-icon--Offset) + var(--pf-c-switch__toggle--before--Width));
20353
- --pf-c-switch__label--Color: var(--pf-global--Color--dark-100);
20354
- position: relative;
20355
- display: inline-grid;
20356
- grid-template-columns: auto;
20357
- grid-auto-columns: 1fr;
20358
- column-gap: var(--pf-c-switch--ColumnGap);
20359
- height: var(--pf-c-switch--Height);
20360
- font-size: var(--pf-c-switch--FontSize);
20361
- line-height: var(--pf-c-switch--LineHeight);
20362
- vertical-align: middle;
20363
- cursor: pointer;
20364
- }
20365
-
20366
- .pf-c-switch.pf-m-reverse .pf-c-switch__label,
20367
- .pf-c-switch.pf-m-reverse .pf-c-switch__toggle {
20368
- grid-row: 1;
20369
- }
20370
-
20371
- .pf-c-switch.pf-m-reverse .pf-c-switch__label {
20372
- grid-column: 1;
20373
- }
20374
-
20375
- .pf-c-switch__input {
20376
- position: absolute;
20377
- cursor: pointer;
20378
- opacity: 0;
20379
- }
20380
-
20381
- .pf-c-switch__input:focus ~ .pf-c-switch__toggle {
20382
- outline: var(--pf-c-switch__input--focus__toggle--OutlineWidth) solid var(--pf-c-switch__input--focus__toggle--OutlineColor);
20383
- outline-offset: var(--pf-c-switch__input--focus__toggle--OutlineOffset);
20384
- }
20385
-
20386
- .pf-c-switch__input:checked ~ .pf-c-switch__label {
20387
- color: var(--pf-c-switch__input--checked__label--Color);
20388
- }
20389
-
20390
- .pf-c-switch__input:checked ~ .pf-c-switch__toggle {
20391
- background-color: var(--pf-c-switch__input--checked__toggle--BackgroundColor);
20392
- }
20393
-
20394
- .pf-c-switch__input:checked ~ .pf-c-switch__toggle::before {
20395
- transform: translateX(var(--pf-c-switch__input--checked__toggle--before--TranslateX));
20396
- }
20397
-
20398
- .pf-c-switch__input:checked ~ .pf-m-off {
20399
- display: none;
20400
- }
20401
-
20402
- .pf-c-switch__input:not(:checked) ~ .pf-c-switch__label {
20403
- color: var(--pf-c-switch__input--not-checked__label--Color);
20404
- }
20405
-
20406
- .pf-c-switch__input:not(:checked) ~ .pf-c-switch__toggle .pf-c-switch__toggle-icon {
20407
- display: none;
20408
- visibility: hidden;
20409
- }
20410
-
20411
- .pf-c-switch__input:not(:checked) ~ .pf-m-on {
20412
- display: none;
20413
- }
20414
-
20415
- .pf-c-switch__input:disabled {
20416
- cursor: not-allowed;
20417
- }
20418
-
20419
- .pf-c-switch__input:disabled ~ .pf-c-switch__label {
20420
- color: var(--pf-c-switch__input--disabled__label--Color);
20421
- cursor: not-allowed;
20422
- }
20423
-
20424
- .pf-c-switch__input:disabled ~ .pf-c-switch__toggle {
20425
- cursor: not-allowed;
20426
- background-color: var(--pf-c-switch__input--disabled__toggle--BackgroundColor);
20427
- }
20428
-
20429
- .pf-c-switch__input:disabled ~ .pf-c-switch__toggle::before {
20430
- background-color: var(--pf-c-switch__input--disabled__toggle--before--BackgroundColor);
20431
- }
20432
-
20433
- .pf-c-switch__toggle {
20434
- position: relative;
20435
- display: inline-block;
20436
- width: var(--pf-c-switch__toggle--Width);
20437
- height: var(--pf-c-switch__toggle--Height);
20438
- background-color: var(--pf-c-switch__toggle--BackgroundColor);
20439
- border-radius: var(--pf-c-switch__toggle--BorderRadius);
20442
+ .pf-c-tab-content {
20443
+ --pf-c-tab-content__body--PaddingTop: 0;
20444
+ --pf-c-tab-content__body--PaddingRight: 0;
20445
+ --pf-c-tab-content__body--PaddingBottom: 0;
20446
+ --pf-c-tab-content__body--PaddingLeft: 0;
20447
+ --pf-c-tab-content__body--m-padding--PaddingTop: var(--pf-global--spacer--md);
20448
+ --pf-c-tab-content__body--m-padding--PaddingRight: var(--pf-global--spacer--md);
20449
+ --pf-c-tab-content__body--m-padding--PaddingBottom: var(--pf-global--spacer--md);
20450
+ --pf-c-tab-content__body--m-padding--PaddingLeft: var(--pf-global--spacer--md);
20451
+ --pf-c-tab-content__body--m-padding--xl--PaddingTop: var(--pf-global--spacer--lg);
20452
+ --pf-c-tab-content__body--m-padding--xl--PaddingRight: var(--pf-global--spacer--lg);
20453
+ --pf-c-tab-content__body--m-padding--xl--PaddingBottom: var(--pf-global--spacer--lg);
20454
+ --pf-c-tab-content__body--m-padding--xl--PaddingLeft: var(--pf-global--spacer--lg);
20455
+ --pf-c-tab-content--m-light-300: var(--pf-global--BackgroundColor--light-300);
20440
20456
  }
20441
20457
 
20442
- .pf-c-switch__toggle::before {
20443
- position: absolute;
20444
- top: var(--pf-c-switch__toggle--before--Top);
20445
- left: var(--pf-c-switch__toggle--before--Left);
20446
- display: block;
20447
- width: var(--pf-c-switch__toggle--before--Width);
20448
- height: var(--pf-c-switch__toggle--before--Height);
20449
- content: "";
20450
- background-color: var(--pf-c-switch__toggle--before--BackgroundColor);
20451
- border-radius: var(--pf-c-switch__toggle--before--BorderRadius);
20452
- box-shadow: var(--pf-c-switch__toggle--before--BoxShadow);
20453
- transition: var(--pf-c-switch__toggle--before--Transition);
20458
+ @media screen and (min-width: 1200px) {
20459
+ .pf-c-tab-content {
20460
+ --pf-c-tab-content__body--m-padding--PaddingTop: var(--pf-c-tab-content__body--m-padding--xl--PaddingTop);
20461
+ --pf-c-tab-content__body--m-padding--PaddingRight: var(--pf-c-tab-content__body--m-padding--xl--PaddingRight);
20462
+ --pf-c-tab-content__body--m-padding--PaddingBottom: var(--pf-c-tab-content__body--m-padding--xl--PaddingBottom);
20463
+ --pf-c-tab-content__body--m-padding--PaddingLeft: var(--pf-c-tab-content__body--m-padding--xl--PaddingLeft);
20464
+ }
20454
20465
  }
20455
-
20456
- .pf-c-switch__toggle-icon {
20457
- position: absolute;
20458
- top: 0;
20459
- bottom: 0;
20460
- left: var(--pf-c-switch__toggle-icon--Left);
20461
- display: flex;
20462
- align-items: center;
20463
- font-size: var(--pf-c-switch__toggle-icon--FontSize);
20464
- color: var(--pf-c-switch__toggle-icon--Color);
20466
+ .pf-c-tab-content.pf-m-light-300 {
20467
+ background-color: var(--pf-c-tab-content--m-light-300);
20465
20468
  }
20466
20469
 
20467
- .pf-c-switch__label {
20468
- display: inline-block;
20469
- grid-column: 2;
20470
- color: var(--pf-c-switch__label--Color);
20471
- vertical-align: top;
20470
+ .pf-c-tab-content__body {
20471
+ padding: var(--pf-c-tab-content__body--PaddingTop) var(--pf-c-tab-content__body--PaddingRight) var(--pf-c-tab-content__body--PaddingBottom) var(--pf-c-tab-content__body--PaddingLeft);
20472
20472
  }
20473
20473
 
20474
- :where(.pf-theme-dark) .pf-c-switch {
20475
- --pf-c-switch__toggle-icon--Color: var(--pf-global--BackgroundColor--100);
20476
- --pf-c-switch__input--not-checked__label--Color: var(--pf-global--Color--100);
20477
- --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--disabled-color--100);
20478
- --pf-c-switch__toggle--before--BoxShadow: none;
20474
+ .pf-c-tab-content__body.pf-m-padding {
20475
+ --pf-c-tab-content__body--PaddingTop: var(--pf-c-tab-content__body--m-padding--PaddingTop);
20476
+ --pf-c-tab-content__body--PaddingRight: var(--pf-c-tab-content__body--m-padding--PaddingRight);
20477
+ --pf-c-tab-content__body--PaddingBottom: var(--pf-c-tab-content__body--m-padding--PaddingBottom);
20478
+ --pf-c-tab-content__body--PaddingLeft: var(--pf-c-tab-content__body--m-padding--PaddingLeft);
20479
20479
  }
20480
20480
 
20481
20481
  .pf-c-content {