@patternfly/react-core 4.237.11 → 4.239.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 (75) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/esm/components/SearchInput/SearchInput.d.ts +10 -0
  3. package/dist/esm/components/SearchInput/SearchInput.d.ts.map +1 -1
  4. package/dist/esm/components/SearchInput/SearchInput.js +48 -6
  5. package/dist/esm/components/SearchInput/SearchInput.js.map +1 -1
  6. package/dist/esm/next/components/Dropdown/Dropdown.d.ts +25 -0
  7. package/dist/esm/next/components/Dropdown/Dropdown.d.ts.map +1 -0
  8. package/dist/esm/next/components/Dropdown/Dropdown.js +59 -0
  9. package/dist/esm/next/components/Dropdown/Dropdown.js.map +1 -0
  10. package/dist/esm/next/components/Dropdown/DropdownGroup.d.ts +12 -0
  11. package/dist/esm/next/components/Dropdown/DropdownGroup.d.ts.map +1 -0
  12. package/dist/esm/next/components/Dropdown/DropdownGroup.js +10 -0
  13. package/dist/esm/next/components/Dropdown/DropdownGroup.js.map +1 -0
  14. package/dist/esm/next/components/Dropdown/DropdownItem.d.ts +12 -0
  15. package/dist/esm/next/components/Dropdown/DropdownItem.d.ts.map +1 -0
  16. package/dist/esm/next/components/Dropdown/DropdownItem.js +10 -0
  17. package/dist/esm/next/components/Dropdown/DropdownItem.js.map +1 -0
  18. package/dist/esm/next/components/Dropdown/DropdownList.d.ts +10 -0
  19. package/dist/esm/next/components/Dropdown/DropdownList.d.ts.map +1 -0
  20. package/dist/esm/next/components/Dropdown/DropdownList.js +10 -0
  21. package/dist/esm/next/components/Dropdown/DropdownList.js.map +1 -0
  22. package/dist/esm/next/components/Dropdown/index.d.ts +5 -0
  23. package/dist/esm/next/components/Dropdown/index.d.ts.map +1 -0
  24. package/dist/esm/next/components/Dropdown/index.js +5 -0
  25. package/dist/esm/next/components/Dropdown/index.js.map +1 -0
  26. package/dist/esm/next/components/index.d.ts +1 -0
  27. package/dist/esm/next/components/index.d.ts.map +1 -1
  28. package/dist/esm/next/components/index.js +1 -0
  29. package/dist/esm/next/components/index.js.map +1 -1
  30. package/dist/js/components/SearchInput/SearchInput.d.ts +10 -0
  31. package/dist/js/components/SearchInput/SearchInput.d.ts.map +1 -1
  32. package/dist/js/components/SearchInput/SearchInput.js +48 -6
  33. package/dist/js/components/SearchInput/SearchInput.js.map +1 -1
  34. package/dist/js/next/components/Dropdown/Dropdown.d.ts +25 -0
  35. package/dist/js/next/components/Dropdown/Dropdown.d.ts.map +1 -0
  36. package/dist/js/next/components/Dropdown/Dropdown.js +63 -0
  37. package/dist/js/next/components/Dropdown/Dropdown.js.map +1 -0
  38. package/dist/js/next/components/Dropdown/DropdownGroup.d.ts +12 -0
  39. package/dist/js/next/components/Dropdown/DropdownGroup.d.ts.map +1 -0
  40. package/dist/js/next/components/Dropdown/DropdownGroup.js +14 -0
  41. package/dist/js/next/components/Dropdown/DropdownGroup.js.map +1 -0
  42. package/dist/js/next/components/Dropdown/DropdownItem.d.ts +12 -0
  43. package/dist/js/next/components/Dropdown/DropdownItem.d.ts.map +1 -0
  44. package/dist/js/next/components/Dropdown/DropdownItem.js +14 -0
  45. package/dist/js/next/components/Dropdown/DropdownItem.js.map +1 -0
  46. package/dist/js/next/components/Dropdown/DropdownList.d.ts +10 -0
  47. package/dist/js/next/components/Dropdown/DropdownList.d.ts.map +1 -0
  48. package/dist/js/next/components/Dropdown/DropdownList.js +14 -0
  49. package/dist/js/next/components/Dropdown/DropdownList.js.map +1 -0
  50. package/dist/js/next/components/Dropdown/index.d.ts +5 -0
  51. package/dist/js/next/components/Dropdown/index.d.ts.map +1 -0
  52. package/dist/js/next/components/Dropdown/index.js +8 -0
  53. package/dist/js/next/components/Dropdown/index.js.map +1 -0
  54. package/dist/js/next/components/index.d.ts +1 -0
  55. package/dist/js/next/components/index.d.ts.map +1 -1
  56. package/dist/js/next/components/index.js +1 -0
  57. package/dist/js/next/components/index.js.map +1 -1
  58. package/dist/umd/react-core.min.css +1262 -1262
  59. package/dist/umd/react-core.min.js +1 -1
  60. package/package.json +5 -5
  61. package/src/components/SearchInput/SearchInput.tsx +73 -7
  62. package/src/components/SearchInput/__tests__/SearchInput.test.tsx +82 -0
  63. package/src/components/SearchInput/examples/SearchInput.md +6 -1
  64. package/src/components/SearchInput/examples/SearchInputWithExpandable.tsx +25 -0
  65. package/src/next/components/Dropdown/Dropdown.tsx +115 -0
  66. package/src/next/components/Dropdown/DropdownGroup.tsx +25 -0
  67. package/src/next/components/Dropdown/DropdownItem.tsx +24 -0
  68. package/src/next/components/Dropdown/DropdownList.tsx +21 -0
  69. package/src/next/components/Dropdown/examples/Dropdown.md +31 -0
  70. package/src/next/components/Dropdown/examples/DropdownBasic.tsx +54 -0
  71. package/src/next/components/Dropdown/examples/DropdownWithDescriptions.tsx +60 -0
  72. package/src/next/components/Dropdown/examples/DropdownWithGroups.tsx +65 -0
  73. package/src/next/components/Dropdown/examples/DropdownWithKebabToggle.tsx +62 -0
  74. package/src/next/components/Dropdown/index.ts +4 -0
  75. package/src/next/components/index.ts +1 -0
package/dist/umd/react-core.min.css CHANGED
@@ -3989,86 +3989,6 @@ 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
- }
4072
3992
  @media screen and (min-width: 768px) {
4073
3993
  .pf-c-data-list:not([class*=pf-m-grid]) {
4074
3994
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
@@ -4545,507 +4465,562 @@ label.pf-c-check, .pf-c-check__label,
4545
4465
  overflow-y: visible;
4546
4466
  }
4547
4467
  }
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);
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;
4676
4488
  }
4677
4489
 
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
- }
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);
4683
4494
  }
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
- }
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);
4689
4498
  }
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
- }
4694
- }
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);
4499
+
4500
+ .pf-c-date-picker__input .pf-c-form-control {
4501
+ width: var(--pf-c-date-picker__input--c-form-control--Width);
4714
4502
  }
4715
4503
 
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);
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);
4721
4512
  }
4722
4513
 
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);
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);
4725
4517
  }
4726
4518
 
4727
- .pf-c-data-list.pf-m-drag-over {
4728
- overflow-anchor: none;
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));
4729
4522
  }
4730
4523
 
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;
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%;
4739
4527
  }
4740
4528
 
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;
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);
4746
4574
  }
4747
4575
 
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;
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
+ }
4753
4580
  }
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);
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);
4761
4583
  }
4762
4584
 
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);
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
+ }
4772
4589
  }
4773
-
4774
- .pf-c-data-list__item.pf-m-selectable {
4775
- cursor: pointer;
4776
- outline-offset: var(--pf-c-data-list__item--m-selectable--OutlineOffset);
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
+ }
4777
4594
  }
4778
-
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);
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
+ }
4782
4599
  }
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;
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
+ }
4786
4604
  }
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);
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
+ }
4790
4609
  }
4791
-
4792
- .pf-c-data-list__item.pf-m-selectable:hover {
4793
- box-shadow: var(--pf-c-data-list__item--m-selectable--hover--BoxShadow);
4610
+ .pf-c-description-list.pf-m-inline-grid {
4611
+ display: inline-grid;
4794
4612
  }
4795
4613
 
4796
- .pf-c-data-list__item.pf-m-selectable:focus {
4797
- box-shadow: var(--pf-c-data-list__item--m-selectable--focus--BoxShadow);
4614
+ .pf-c-description-list.pf-m-auto-column-widths {
4615
+ --pf-c-description-list--GridTemplateColumns--width: minmax(8ch, max-content);
4798
4616
  }
4799
4617
 
4800
- .pf-c-data-list__item.pf-m-selectable:active {
4801
- box-shadow: var(--pf-c-data-list__item--m-selectable--active--BoxShadow);
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);
4802
4621
  }
4803
4622
 
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);
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
+ }
4809
4627
  }
4810
-
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);
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
+ }
4632
+ }
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
+ }
4637
+ }
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
+ }
4642
+ }
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
+ }
4647
+ }
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);
4820
4651
  }
4821
4652
 
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);
4653
+ .pf-c-description-list.pf-m-fluid {
4654
+ --pf-c-description-list--m-horizontal__term--width: fit-content(20ch);
4825
4655
  }
4826
4656
 
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);
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);
4829
4661
  }
4830
4662
 
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);
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;
4836
4672
  }
4837
4673
 
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);
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);
4844
4676
  }
4845
4677
 
4846
- .pf-c-data-list__item-control > *:not(:last-child) {
4847
- margin-right: var(--pf-c-data-list__item-control--not-last-child--MarginRight);
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);
4848
4680
  }
4849
4681
 
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);
4856
- }
4857
-
4858
- .pf-c-data-list__check > input {
4859
- cursor: pointer;
4860
- }
4861
-
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;
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);
4868
4685
  }
4869
4686
 
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;
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;
4873
4696
  }
4874
4697
 
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);
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;
4877
4703
  }
4878
4704
 
4879
- .pf-c-data-list__item-draggable-button:active {
4880
- cursor: grabbing;
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);
4881
4710
  }
4882
4711
 
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;
4712
+ .pf-c-description-list__term .pf-c-description-list__text {
4713
+ display: inline;
4886
4714
  }
4887
4715
 
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);
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);
4890
4721
  }
4891
4722
 
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);
4723
+ .pf-c-description-list__description {
4724
+ font-size: var(--pf-c-description-list__description--FontSize, inherit);
4899
4725
  }
4900
4726
 
4901
- .pf-c-data-list__item-action > *:not(:last-child) {
4902
- margin-right: var(--pf-c-data-list__item-action--not-last-child--MarginRight);
4727
+ .pf-c-description-list__text {
4728
+ min-width: 0;
4903
4729
  }
4904
4730
 
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);
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);
4908
4738
  }
4909
4739
 
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);
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);
4912
4742
  }
4913
4743
 
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));
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);
4919
4746
  }
4920
4747
 
4921
- .pf-c-data-list__item-content {
4922
- display: grid;
4923
- width: 100%;
4924
- grid-template-columns: auto 1fr;
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);
4925
4750
  }
4926
4751
 
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);
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);
4932
4754
  }
4933
4755
 
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);
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);
4938
4758
  }
4939
4759
 
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;
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);
4944
4763
  }
4945
4764
 
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);
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);
4949
4768
  }
4950
4769
 
4951
- .pf-c-data-list__cell.pf-m-align-right {
4952
- margin-left: 0;
4953
- }
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
+ }
4954
4774
 
4955
- .pf-c-data-list__text {
4956
- display: inline-block;
4957
- }
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
+ }
4958
4778
 
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
- }
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
+ }
4968
4782
 
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
- }
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
+ }
4974
4787
 
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);
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
+ }
4977
4792
  }
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
+ }
4978
4797
 
4979
- .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body.pf-m-no-padding {
4980
- padding: 0;
4981
- }
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
+ }
4982
4801
 
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
- }
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
+ }
4989
4805
 
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);
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);
5000
4809
  }
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);
4810
+
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);
5008
4814
  }
5009
4815
  }
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);
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);
5016
4819
  }
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);
4820
+
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);
5021
4823
  }
5022
4824
 
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;
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);
5026
4827
  }
5027
4828
 
5028
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-align-right {
5029
- margin-left: auto;
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);
5030
4832
  }
5031
4833
 
5032
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-no-fill {
5033
- flex: none;
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);
4837
+ }
4838
+ }
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);
5034
4842
  }
5035
4843
 
5036
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-2 {
5037
- flex-grow: 2;
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);
5038
4846
  }
5039
4847
 
5040
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-3 {
5041
- flex-grow: 3;
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);
5042
4850
  }
5043
4851
 
5044
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-4 {
5045
- flex-grow: 4;
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);
5046
4855
  }
5047
4856
 
5048
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-5 {
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;
5013
+ }
5014
+
5015
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-3 {
5016
+ flex-grow: 3;
5017
+ }
5018
+
5019
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-4 {
5020
+ flex-grow: 4;
5021
+ }
5022
+
5023
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-5 {
5049
5024
  flex-grow: 5;
5050
5025
  }
5051
5026
  }
@@ -5463,423 +5438,448 @@ label.pf-c-check, .pf-c-check__label,
5463
5438
  overflow-y: visible;
5464
5439
  }
5465
5440
  }
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;
5486
- }
5487
-
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);
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);
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);
5572
5569
  }
5573
5570
 
5574
5571
  @media screen and (min-width: 576px) {
5575
- .pf-c-description-list {
5576
- --pf-c-description-list__term--Display: var(--pf-c-description-list__term--sm--Display);
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);
5577
5575
  }
5578
5576
  }
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);
5577
+ @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);
5581
+ }
5581
5582
  }
5582
-
5583
5583
  @media (min-width: 576px) {
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));
5584
+ .pf-c-data-list {
5585
+ --pf-c-data-list__item--before--Top: var(--pf-c-data-list__item--before--sm--Top);
5586
5586
  }
5587
5587
  }
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
- }
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);
5592
5607
  }
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
- }
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);
5597
5614
  }
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
- }
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);
5602
5618
  }
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
- }
5619
+
5620
+ .pf-c-data-list.pf-m-drag-over {
5621
+ overflow-anchor: none;
5607
5622
  }
5608
- .pf-c-description-list.pf-m-inline-grid {
5609
- display: inline-grid;
5623
+
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;
5610
5632
  }
5611
5633
 
5612
- .pf-c-description-list.pf-m-auto-column-widths {
5613
- --pf-c-description-list--GridTemplateColumns--width: minmax(8ch, max-content);
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;
5614
5639
  }
5615
5640
 
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);
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;
5619
5646
  }
5620
5647
 
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
- }
5625
- }
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
- }
5630
- }
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
- }
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);
5635
5654
  }
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
- }
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);
5640
5665
  }
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
- }
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);
5645
5670
  }
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);
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);
5649
5675
  }
5650
5676
 
5651
- .pf-c-description-list.pf-m-fluid {
5652
- --pf-c-description-list--m-horizontal__term--width: fit-content(20ch);
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;
5653
5679
  }
5654
5680
 
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);
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);
5659
5683
  }
5660
5684
 
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;
5685
+ .pf-c-data-list__item.pf-m-selectable:hover {
5686
+ box-shadow: var(--pf-c-data-list__item--m-selectable--hover--BoxShadow);
5670
5687
  }
5671
5688
 
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);
5689
+ .pf-c-data-list__item.pf-m-selectable:focus {
5690
+ box-shadow: var(--pf-c-data-list__item--m-selectable--focus--BoxShadow);
5674
5691
  }
5675
5692
 
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);
5693
+ .pf-c-data-list__item.pf-m-selectable:active {
5694
+ box-shadow: var(--pf-c-data-list__item--m-selectable--active--BoxShadow);
5678
5695
  }
5679
5696
 
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);
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);
5683
5702
  }
5684
5703
 
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;
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);
5694
5713
  }
5695
5714
 
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;
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);
5701
5718
  }
5702
5719
 
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);
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);
5708
5722
  }
5709
5723
 
5710
- .pf-c-description-list__term .pf-c-description-list__text {
5711
- display: inline;
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);
5712
5729
  }
5713
5730
 
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);
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);
5719
5737
  }
5720
5738
 
5721
- .pf-c-description-list__description {
5722
- font-size: var(--pf-c-description-list__description--FontSize, inherit);
5739
+ .pf-c-data-list__item-control > *:not(:last-child) {
5740
+ margin-right: var(--pf-c-data-list__item-control--not-last-child--MarginRight);
5723
5741
  }
5724
5742
 
5725
- .pf-c-description-list__text {
5726
- min-width: 0;
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);
5727
5749
  }
5728
5750
 
5729
- .pf-c-description-list__text.pf-m-help-text {
5730
- text-decoration: underline;
5751
+ .pf-c-data-list__check > input {
5731
5752
  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);
5736
5753
  }
5737
5754
 
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);
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;
5740
5761
  }
5741
5762
 
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);
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;
5744
5766
  }
5745
5767
 
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);
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);
5748
5770
  }
5749
5771
 
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);
5772
+ .pf-c-data-list__item-draggable-button:active {
5773
+ cursor: grabbing;
5752
5774
  }
5753
5775
 
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);
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;
5756
5779
  }
5757
5780
 
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);
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);
5761
5783
  }
5762
5784
 
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);
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);
5766
5792
  }
5767
5793
 
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
- }
5772
-
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
- }
5794
+ .pf-c-data-list__item-action > *:not(:last-child) {
5795
+ margin-right: var(--pf-c-data-list__item-action--not-last-child--MarginRight);
5790
5796
  }
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
5797
 
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
- }
5803
-
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
- }
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);
5801
+ }
5808
5802
 
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
- }
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);
5813
5805
  }
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
- }
5818
5806
 
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
- }
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));
5812
+ }
5822
5813
 
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
- }
5814
+ .pf-c-data-list__item-content {
5815
+ display: grid;
5816
+ width: 100%;
5817
+ grid-template-columns: auto 1fr;
5818
+ }
5826
5819
 
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
- }
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
+ }
5831
5826
 
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
- }
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);
5836
5831
  }
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
- }
5841
5832
 
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
- }
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;
5837
+ }
5845
5838
 
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
- }
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
+ }
5849
5843
 
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
- }
5844
+ .pf-c-data-list__cell.pf-m-align-right {
5845
+ margin-left: 0;
5846
+ }
5854
5847
 
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
- }
5848
+ .pf-c-data-list__text {
5849
+ display: inline-block;
5859
5850
  }
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
- }
5864
5851
 
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
- }
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);
5860
+ }
5868
5861
 
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
- }
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
+ }
5872
5867
 
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
- }
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
+ }
5877
5871
 
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
- }
5872
+ .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body.pf-m-no-padding {
5873
+ padding: 0;
5874
+ }
5875
+
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);
5882
5881
  }
5882
+
5883
5883
  .pf-c-divider {
5884
5884
  --pf-hidden-visible--visible--Visibility: visible;
5885
5885
  --pf-hidden-visible--hidden--Display: none;
@@ -8391,237 +8391,90 @@ label.pf-c-check, .pf-c-check__label,
8391
8391
  --pf-c-empty-state--PaddingTop: var(--pf-c-empty-state--m-xs--PaddingTop);
8392
8392
  --pf-c-empty-state--PaddingRight: var(--pf-c-empty-state--m-xs--PaddingRight);
8393
8393
  --pf-c-empty-state--PaddingBottom: var(--pf-c-empty-state--m-xs--PaddingBottom);
8394
- --pf-c-empty-state--PaddingLeft: var(--pf-c-empty-state--m-xs--PaddingLeft);
8395
- --pf-c-empty-state__content--MaxWidth: var(--pf-c-empty-state--m-xs__content--MaxWidth);
8396
- --pf-c-empty-state__icon--MarginBottom: var(--pf-c-empty-state--m-xs__icon--MarginBottom);
8397
- --pf-c-empty-state__body--MarginTop: var(--pf-c-empty-state--m-xs__body--MarginTop);
8398
- --pf-c-empty-state__primary--MarginTop: var(--pf-c-empty-state--m-xs__primary--MarginTop);
8399
- --pf-c-empty-state__secondary--MarginTop: var(--pf-c-empty-state--m-xs__secondary--MarginTop);
8400
- }
8401
-
8402
- .pf-c-empty-state.pf-m-xs .pf-c-empty-state__body {
8403
- font-size: var(--pf-c-empty-state--m-xs__body--FontSize);
8404
- }
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);
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;
8394
+ --pf-c-empty-state--PaddingLeft: var(--pf-c-empty-state--m-xs--PaddingLeft);
8395
+ --pf-c-empty-state__content--MaxWidth: var(--pf-c-empty-state--m-xs__content--MaxWidth);
8396
+ --pf-c-empty-state__icon--MarginBottom: var(--pf-c-empty-state--m-xs__icon--MarginBottom);
8397
+ --pf-c-empty-state__body--MarginTop: var(--pf-c-empty-state--m-xs__body--MarginTop);
8398
+ --pf-c-empty-state__primary--MarginTop: var(--pf-c-empty-state--m-xs__primary--MarginTop);
8399
+ --pf-c-empty-state__secondary--MarginTop: var(--pf-c-empty-state--m-xs__secondary--MarginTop);
8528
8400
  }
8529
8401
 
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);
8402
+ .pf-c-empty-state.pf-m-xs .pf-c-empty-state__body {
8403
+ font-size: var(--pf-c-empty-state--m-xs__body--FontSize);
8532
8404
  }
8533
8405
 
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);
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);
8545
8408
  }
8546
8409
 
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);
8410
+ .pf-c-empty-state.pf-m-sm {
8411
+ --pf-c-empty-state__content--MaxWidth: var(--pf-c-empty-state--m-sm__content--MaxWidth);
8555
8412
  }
8556
8413
 
8557
- .pf-c-expandable-section.pf-m-indented {
8558
- --pf-c-expandable-section__content--PaddingLeft: var(--pf-c-expandable-section--m-indented__content--PaddingLeft);
8414
+ .pf-c-empty-state.pf-m-lg {
8415
+ --pf-c-empty-state__content--MaxWidth: var(--pf-c-empty-state--m-lg__content--MaxWidth);
8559
8416
  }
8560
8417
 
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;
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);
8567
8423
  }
8568
8424
 
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;
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);
8574
8427
  }
8575
8428
 
8576
- .pf-c-expandable-section.pf-m-detached {
8577
- --pf-c-expandable-section--m-truncate__toggle--MarginTop: 0;
8429
+ .pf-c-empty-state.pf-m-full-height {
8430
+ height: 100%;
8578
8431
  }
8579
8432
 
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;
8433
+ .pf-c-empty-state__content {
8434
+ max-width: var(--pf-c-empty-state__content--MaxWidth);
8586
8435
  }
8587
8436
 
8588
- .pf-c-expandable-section__toggle:hover {
8589
- --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--hover--Color);
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);
8590
8439
  }
8591
8440
 
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);
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);
8594
8445
  }
8595
8446
 
8596
- .pf-c-expandable-section__toggle:focus {
8597
- --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--focus--Color);
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);
8598
8450
  }
8599
8451
 
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));
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);
8605
8455
  }
8606
8456
 
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);
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);
8609
8460
  }
8610
8461
 
8611
- .pf-c-expandable-section__toggle-text {
8612
- margin-left: var(--pf-c-expandable-section__toggle-text--MarginLeft);
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);
8613
8468
  }
8614
8469
 
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);
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);
8621
8474
  }
8622
8475
 
8623
- .pf-m-overpass-font .pf-c-expandable-section__toggle {
8624
- font-weight: var(--pf-global--FontWeight--semi-bold);
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);
8625
8478
  }
8626
8479
 
8627
8480
  .pf-c-file-upload {
@@ -9256,12 +9109,159 @@ label.pf-c-check, .pf-c-check__label,
9256
9109
  --pf-c-form__field-group-header--PaddingTop: 0;
9257
9110
  }
9258
9111
 
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);
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);
9249
+ }
9250
+
9251
+ .pf-c-expandable-section__toggle-text {
9252
+ margin-left: var(--pf-c-expandable-section__toggle-text--MarginLeft);
9261
9253
  }
9262
9254
 
9263
- :where(.pf-theme-dark) .pf-c-form {
9264
- --pf-c-form__helper-text--m-success--Color: var(--pf-global--success-color--100);
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);
9261
+ }
9262
+
9263
+ .pf-m-overpass-font .pf-c-expandable-section__toggle {
9264
+ font-weight: var(--pf-global--FontWeight--semi-bold);
9265
9265
  }
9266
9266
 
9267
9267
  .pf-c-helper-text {
@@ -18847,20 +18847,6 @@ 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
-
18864
18850
  .pf-c-slider {
18865
18851
  --pf-c-slider--value: 0;
18866
18852
  --pf-c-slider__rail--PaddingTop: var(--pf-global--spacer--md);
@@ -19080,6 +19066,59 @@ label.pf-c-radio, .pf-c-radio__label,
19080
19066
  margin-left: var(--pf-c-slider__main--actions--MarginLeft);
19081
19067
  }
19082
19068
 
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
+
19083
19122
  .pf-c-spinner {
19084
19123
  --pf-c-spinner--diameter: var(--pf-global--icon--FontSize--xl);
19085
19124
  --pf-c-spinner--Width: var(--pf-c-spinner--diameter);
@@ -19255,220 +19294,60 @@ svg.pf-c-spinner {
19255
19294
  --pf-c-spinner--m-xl--diameter: var(--pf-global--icon--FontSize--xl);
19256
19295
  animation: pf-c-spinner-animation-rotate calc(var(--pf-c-spinner--AnimationDuration) * 2) var(--pf-c-spinner--AnimationTimingFunction) infinite;
19257
19296
  }
19258
-
19259
- svg.pf-c-spinner.pf-m-sm {
19260
- --pf-c-spinner--diameter: var(--pf-c-spinner--m-sm--diameter);
19261
- }
19262
-
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);
19297
+
19298
+ svg.pf-c-spinner.pf-m-sm {
19299
+ --pf-c-spinner--diameter: var(--pf-c-spinner--m-sm--diameter);
19431
19300
  }
19432
19301
 
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);
19302
+ svg.pf-c-spinner.pf-m-md {
19303
+ --pf-c-spinner--diameter: var(--pf-c-spinner--m-md--diameter);
19445
19304
  }
19446
19305
 
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);
19306
+ svg.pf-c-spinner.pf-m-lg {
19307
+ --pf-c-spinner--diameter: var(--pf-c-spinner--m-lg--diameter);
19456
19308
  }
19457
19309
 
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;
19310
+ svg.pf-c-spinner.pf-m-xl {
19311
+ --pf-c-spinner--diameter: var(--pf-c-spinner--m-xl--diameter);
19463
19312
  }
19464
19313
 
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;
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);
19470
19324
  }
19471
19325
 
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
+ }
19472
19351
  .pf-c-tabs {
19473
19352
  --pf-c-tabs--inset: 0;
19474
19353
  --pf-c-tabs--Width: auto;
@@ -20439,43 +20318,164 @@ svg.pf-c-spinner.pf-m-xl {
20439
20318
  --pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
20440
20319
  }
20441
20320
 
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);
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;
20456
20364
  }
20457
20365
 
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
- }
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;
20465
20369
  }
20466
- .pf-c-tab-content.pf-m-light-300 {
20467
- background-color: var(--pf-c-tab-content--m-light-300);
20370
+
20371
+ .pf-c-switch.pf-m-reverse .pf-c-switch__label {
20372
+ grid-column: 1;
20468
20373
  }
20469
20374
 
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);
20375
+ .pf-c-switch__input {
20376
+ position: absolute;
20377
+ cursor: pointer;
20378
+ opacity: 0;
20472
20379
  }
20473
20380
 
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);
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);
20440
+ }
20441
+
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);
20454
+ }
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);
20465
+ }
20466
+
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;
20472
+ }
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;
20479
20479
  }
20480
20480
 
20481
20481
  .pf-c-content {