@patternfly/react-core 4.251.0 → 4.251.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/umd/react-core.min.css +966 -966
  3. package/package.json +2 -2
  4. package/src/components/SkipToContent/examples/SkipToContent.md +1 -103
  5. package/src/components/SkipToContent/examples/SkipToContentBasic.tsx +128 -0
  6. package/src/components/TextInput/examples/TextInput.md +8 -231
  7. package/src/components/TextInput/examples/TextInputBasic.tsx +7 -0
  8. package/src/components/TextInput/examples/TextInputDisabled.tsx +6 -0
  9. package/src/components/TextInput/examples/TextInputIcon.tsx +39 -0
  10. package/src/components/TextInput/examples/TextInputIconSprite.tsx +63 -0
  11. package/src/components/TextInput/examples/TextInputInvalid.tsx +16 -0
  12. package/src/components/TextInput/examples/TextInputLeftTruncated.tsx +17 -0
  13. package/src/components/TextInput/examples/TextInputReadOnly.tsx +25 -0
  14. package/src/components/TextInput/examples/TextInputSelectUsingRef.tsx +16 -0
package/dist/umd/react-core.min.css CHANGED
@@ -3435,6 +3435,89 @@ label.pf-c-check, .pf-c-check__label,
3435
3435
  --pf-c-chip--m-draggable--BackgroundColor: var(--pf-global--palette--black-600);
3436
3436
  }
3437
3437
 
3438
+ .pf-c-chip-group {
3439
+ --pf-global--Color--100: var(--pf-global--Color--dark-100);
3440
+ --pf-global--Color--200: var(--pf-global--Color--dark-200);
3441
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
3442
+ --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
3443
+ --pf-global--link--Color: var(--pf-global--link--Color--dark);
3444
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
3445
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
3446
+ }
3447
+
3448
+ .pf-c-chip-group {
3449
+ color: var(--pf-global--Color--100);
3450
+ --pf-c-chip-group__list--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
3451
+ --pf-c-chip-group__list--MarginRight: calc(var(--pf-global--spacer--xs) * -1);
3452
+ --pf-c-chip-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
3453
+ --pf-c-chip-group--m-category--PaddingRight: var(--pf-global--spacer--xs);
3454
+ --pf-c-chip-group--m-category--PaddingBottom: var(--pf-global--spacer--xs);
3455
+ --pf-c-chip-group--m-category--PaddingLeft: var(--pf-global--spacer--sm);
3456
+ --pf-c-chip-group--m-category--BorderRadius: var(--pf-global--BorderRadius--sm);
3457
+ --pf-c-chip-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--200);
3458
+ --pf-c-chip-group__label--MarginRight: var(--pf-global--spacer--sm);
3459
+ --pf-c-chip-group__label--FontSize: var(--pf-global--FontSize--sm);
3460
+ --pf-c-chip-group__label--MaxWidth: 18ch;
3461
+ --pf-c-chip-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
3462
+ --pf-c-chip-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
3463
+ --pf-c-chip-group__list-item--MarginRight: var(--pf-global--spacer--xs);
3464
+ --pf-c-chip-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
3465
+ max-width: 100%;
3466
+ }
3467
+
3468
+ .pf-c-chip-group.pf-m-category {
3469
+ padding-top: var(--pf-c-chip-group--m-category--PaddingTop);
3470
+ padding-right: var(--pf-c-chip-group--m-category--PaddingRight);
3471
+ padding-bottom: var(--pf-c-chip-group--m-category--PaddingBottom);
3472
+ padding-left: var(--pf-c-chip-group--m-category--PaddingLeft);
3473
+ background-color: var(--pf-c-chip-group--m-category--BackgroundColor);
3474
+ border-radius: var(--pf-c-chip-group--m-category--BorderRadius);
3475
+ }
3476
+
3477
+ .pf-c-chip-group__main {
3478
+ display: flex;
3479
+ flex: 1;
3480
+ flex-wrap: wrap;
3481
+ align-items: baseline;
3482
+ min-width: 0;
3483
+ }
3484
+
3485
+ .pf-c-chip-group__list {
3486
+ margin-right: var(--pf-c-chip-group__list--MarginRight);
3487
+ margin-bottom: var(--pf-c-chip-group__list--MarginBottom);
3488
+ }
3489
+
3490
+ .pf-c-chip-group,
3491
+ .pf-c-chip-group__list {
3492
+ display: inline-flex;
3493
+ flex-wrap: wrap;
3494
+ align-items: center;
3495
+ min-width: 0;
3496
+ }
3497
+
3498
+ .pf-c-chip-group__list-item {
3499
+ display: inline-flex;
3500
+ min-width: 0;
3501
+ margin-right: var(--pf-c-chip-group__list-item--MarginRight);
3502
+ margin-bottom: var(--pf-c-chip-group__list-item--MarginBottom);
3503
+ }
3504
+
3505
+ .pf-c-chip-group__label {
3506
+ overflow: hidden;
3507
+ text-overflow: ellipsis;
3508
+ white-space: nowrap;
3509
+ max-width: var(--pf-c-chip-group__label--MaxWidth);
3510
+ margin-right: var(--pf-c-chip-group__label--MarginRight);
3511
+ font-size: var(--pf-c-chip-group__label--FontSize);
3512
+ }
3513
+
3514
+ .pf-c-chip-group__close {
3515
+ display: flex;
3516
+ align-self: flex-start;
3517
+ margin-top: var(--pf-c-chip-group__close--MarginTop);
3518
+ margin-bottom: var(--pf-c-chip-group__close--MarginBottom);
3519
+ }
3520
+
3438
3521
  .pf-c-clipboard-copy {
3439
3522
  --pf-c-clipboard-copy__toggle-icon--Transition: .2s ease-in 0s;
3440
3523
  --pf-c-clipboard-copy--m-expanded__toggle-icon--Rotate: 90deg;
@@ -3545,44 +3628,6 @@ label.pf-c-check, .pf-c-check__label,
3545
3628
  border: 0;
3546
3629
  }
3547
3630
 
3548
- .pf-c-code-block {
3549
- --pf-c-code-block--BackgroundColor: var(--pf-global--BackgroundColor--200);
3550
- --pf-c-code-block__header--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
3551
- --pf-c-code-block__header--BorderBottomColor: var(--pf-global--BorderColor--100);
3552
- --pf-c-code-block__content--PaddingTop: var(--pf-global--spacer--md);
3553
- --pf-c-code-block__content--PaddingRight: var(--pf-global--spacer--md);
3554
- --pf-c-code-block__content--PaddingBottom: var(--pf-global--spacer--md);
3555
- --pf-c-code-block__content--PaddingLeft: var(--pf-global--spacer--md);
3556
- --pf-c-code-block__pre--FontFamily: var(--pf-global--FontFamily--monospace);
3557
- --pf-c-code-block__pre--FontSize: var(--pf-global--FontSize--sm);
3558
- background-color: var(--pf-c-code-block--BackgroundColor);
3559
- }
3560
-
3561
- .pf-c-code-block__header {
3562
- display: flex;
3563
- border-bottom: var(--pf-c-code-block__header--BorderBottomWidth) solid var(--pf-c-code-block__header--BorderBottomColor);
3564
- }
3565
-
3566
- .pf-c-code-block__actions {
3567
- display: flex;
3568
- margin-left: auto;
3569
- }
3570
-
3571
- .pf-c-code-block__content {
3572
- padding: var(--pf-c-code-block__content--PaddingTop) var(--pf-c-code-block__content--PaddingRight) var(--pf-c-code-block__content--PaddingBottom) var(--pf-c-code-block__content--PaddingLeft);
3573
- }
3574
-
3575
- .pf-c-code-block__pre {
3576
- font-family: var(--pf-c-code-block__pre--FontFamily);
3577
- font-size: var(--pf-c-code-block__pre--FontSize);
3578
- overflow-wrap: break-word;
3579
- white-space: pre-wrap;
3580
- }
3581
-
3582
- .pf-c-code-block__code {
3583
- font-family: var(--pf-c-code-block__code--FontFamily, inherit);
3584
- }
3585
-
3586
3631
  .pf-c-context-selector__menu {
3587
3632
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
3588
3633
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
@@ -3917,6 +3962,44 @@ label.pf-c-check, .pf-c-check__label,
3917
3962
  border-top: 1px solid var(--pf-global--BorderColor--300);
3918
3963
  }
3919
3964
 
3965
+ .pf-c-code-block {
3966
+ --pf-c-code-block--BackgroundColor: var(--pf-global--BackgroundColor--200);
3967
+ --pf-c-code-block__header--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
3968
+ --pf-c-code-block__header--BorderBottomColor: var(--pf-global--BorderColor--100);
3969
+ --pf-c-code-block__content--PaddingTop: var(--pf-global--spacer--md);
3970
+ --pf-c-code-block__content--PaddingRight: var(--pf-global--spacer--md);
3971
+ --pf-c-code-block__content--PaddingBottom: var(--pf-global--spacer--md);
3972
+ --pf-c-code-block__content--PaddingLeft: var(--pf-global--spacer--md);
3973
+ --pf-c-code-block__pre--FontFamily: var(--pf-global--FontFamily--monospace);
3974
+ --pf-c-code-block__pre--FontSize: var(--pf-global--FontSize--sm);
3975
+ background-color: var(--pf-c-code-block--BackgroundColor);
3976
+ }
3977
+
3978
+ .pf-c-code-block__header {
3979
+ display: flex;
3980
+ border-bottom: var(--pf-c-code-block__header--BorderBottomWidth) solid var(--pf-c-code-block__header--BorderBottomColor);
3981
+ }
3982
+
3983
+ .pf-c-code-block__actions {
3984
+ display: flex;
3985
+ margin-left: auto;
3986
+ }
3987
+
3988
+ .pf-c-code-block__content {
3989
+ padding: var(--pf-c-code-block__content--PaddingTop) var(--pf-c-code-block__content--PaddingRight) var(--pf-c-code-block__content--PaddingBottom) var(--pf-c-code-block__content--PaddingLeft);
3990
+ }
3991
+
3992
+ .pf-c-code-block__pre {
3993
+ font-family: var(--pf-c-code-block__pre--FontFamily);
3994
+ font-size: var(--pf-c-code-block__pre--FontSize);
3995
+ overflow-wrap: break-word;
3996
+ white-space: pre-wrap;
3997
+ }
3998
+
3999
+ .pf-c-code-block__code {
4000
+ font-family: var(--pf-c-code-block__code--FontFamily, inherit);
4001
+ }
4002
+
3920
4003
  .pf-c-data-list {
3921
4004
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
3922
4005
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
@@ -4915,89 +4998,6 @@ label.pf-c-check, .pf-c-check__label,
4915
4998
  --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
4916
4999
  }
4917
5000
 
4918
- .pf-c-chip-group {
4919
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
4920
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
4921
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
4922
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
4923
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
4924
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
4925
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
4926
- }
4927
-
4928
- .pf-c-chip-group {
4929
- color: var(--pf-global--Color--100);
4930
- --pf-c-chip-group__list--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
4931
- --pf-c-chip-group__list--MarginRight: calc(var(--pf-global--spacer--xs) * -1);
4932
- --pf-c-chip-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
4933
- --pf-c-chip-group--m-category--PaddingRight: var(--pf-global--spacer--xs);
4934
- --pf-c-chip-group--m-category--PaddingBottom: var(--pf-global--spacer--xs);
4935
- --pf-c-chip-group--m-category--PaddingLeft: var(--pf-global--spacer--sm);
4936
- --pf-c-chip-group--m-category--BorderRadius: var(--pf-global--BorderRadius--sm);
4937
- --pf-c-chip-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--200);
4938
- --pf-c-chip-group__label--MarginRight: var(--pf-global--spacer--sm);
4939
- --pf-c-chip-group__label--FontSize: var(--pf-global--FontSize--sm);
4940
- --pf-c-chip-group__label--MaxWidth: 18ch;
4941
- --pf-c-chip-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
4942
- --pf-c-chip-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
4943
- --pf-c-chip-group__list-item--MarginRight: var(--pf-global--spacer--xs);
4944
- --pf-c-chip-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
4945
- max-width: 100%;
4946
- }
4947
-
4948
- .pf-c-chip-group.pf-m-category {
4949
- padding-top: var(--pf-c-chip-group--m-category--PaddingTop);
4950
- padding-right: var(--pf-c-chip-group--m-category--PaddingRight);
4951
- padding-bottom: var(--pf-c-chip-group--m-category--PaddingBottom);
4952
- padding-left: var(--pf-c-chip-group--m-category--PaddingLeft);
4953
- background-color: var(--pf-c-chip-group--m-category--BackgroundColor);
4954
- border-radius: var(--pf-c-chip-group--m-category--BorderRadius);
4955
- }
4956
-
4957
- .pf-c-chip-group__main {
4958
- display: flex;
4959
- flex: 1;
4960
- flex-wrap: wrap;
4961
- align-items: baseline;
4962
- min-width: 0;
4963
- }
4964
-
4965
- .pf-c-chip-group__list {
4966
- margin-right: var(--pf-c-chip-group__list--MarginRight);
4967
- margin-bottom: var(--pf-c-chip-group__list--MarginBottom);
4968
- }
4969
-
4970
- .pf-c-chip-group,
4971
- .pf-c-chip-group__list {
4972
- display: inline-flex;
4973
- flex-wrap: wrap;
4974
- align-items: center;
4975
- min-width: 0;
4976
- }
4977
-
4978
- .pf-c-chip-group__list-item {
4979
- display: inline-flex;
4980
- min-width: 0;
4981
- margin-right: var(--pf-c-chip-group__list-item--MarginRight);
4982
- margin-bottom: var(--pf-c-chip-group__list-item--MarginBottom);
4983
- }
4984
-
4985
- .pf-c-chip-group__label {
4986
- overflow: hidden;
4987
- text-overflow: ellipsis;
4988
- white-space: nowrap;
4989
- max-width: var(--pf-c-chip-group__label--MaxWidth);
4990
- margin-right: var(--pf-c-chip-group__label--MarginRight);
4991
- font-size: var(--pf-c-chip-group__label--FontSize);
4992
- }
4993
-
4994
- .pf-c-chip-group__close {
4995
- display: flex;
4996
- align-self: flex-start;
4997
- margin-top: var(--pf-c-chip-group__close--MarginTop);
4998
- margin-bottom: var(--pf-c-chip-group__close--MarginBottom);
4999
- }
5000
-
5001
5001
  @media screen and (min-width: 768px) {
5002
5002
  .pf-c-data-list:not([class*=pf-m-grid]) {
5003
5003
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
@@ -22838,1094 +22838,1094 @@ svg.pf-c-spinner.pf-m-xl {
22838
22838
  font-size: var(--pf-c-number-input__icon--FontSize);
22839
22839
  }
22840
22840
 
22841
- .pf-c-wizard__header {
22842
- --pf-global--Color--100: var(--pf-global--Color--light-100);
22843
- --pf-global--Color--200: var(--pf-global--Color--light-200);
22844
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
22845
- --pf-global--primary-color--100: var(--pf-global--primary-color--light-100);
22846
- --pf-global--link--Color: var(--pf-global--link--Color--light);
22847
- --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
22848
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
22849
- }
22850
-
22851
- .pf-c-wizard__header .pf-c-card {
22852
- --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
22853
- }
22854
-
22855
- .pf-c-wizard__header .pf-c-button {
22856
- --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
22857
- --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
22858
- --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
22859
- --pf-c-button--m-primary--active--Color: var(--pf-global--primary-color--dark-100);
22860
- --pf-c-button--m-primary--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
22861
- --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
22862
- --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
22863
- --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
22864
- --pf-c-button--m-secondary--Color: var(--pf-global--Color--light-100);
22865
- --pf-c-button--m-secondary--hover--Color: var(--pf-global--Color--light-100);
22866
- --pf-c-button--m-secondary--focus--Color: var(--pf-global--Color--light-100);
22867
- --pf-c-button--m-secondary--active--Color: var(--pf-global--Color--light-100);
22868
- --pf-c-button--m-secondary--BorderColor: var(--pf-global--Color--light-100);
22869
- --pf-c-button--m-secondary--hover--BorderColor: var(--pf-global--Color--light-100);
22870
- --pf-c-button--m-secondary--focus--BorderColor: var(--pf-global--Color--light-100);
22871
- --pf-c-button--m-secondary--active--BorderColor: var(--pf-global--Color--light-100);
22841
+ .pf-c-tree-view {
22842
+ --pf-c-tree-view--PaddingTop: var(--pf-global--spacer--sm);
22843
+ --pf-c-tree-view--PaddingBottom: var(--pf-global--spacer--sm);
22844
+ --pf-c-tree-view__node--indent--base: calc(var(--pf-global--spacer--md) * 2 + var(--pf-c-tree-view__node-toggle-icon--MinWidth));
22845
+ --pf-c-tree-view__node--nested-indent--base: calc(var(--pf-c-tree-view__node--indent--base) - var(--pf-global--spacer--md));
22846
+ --pf-c-tree-view__node--PaddingTop--base: var(--pf-global--spacer--sm);
22847
+ --pf-c-tree-view__node--PaddingTop: var(--pf-c-tree-view__node--PaddingTop--base);
22848
+ --pf-c-tree-view__node--PaddingRight: var(--pf-global--spacer--sm);
22849
+ --pf-c-tree-view__node--PaddingBottom: var(--pf-global--spacer--sm);
22850
+ --pf-c-tree-view__node--PaddingLeft: var(--pf-c-tree-view__node--indent--base);
22851
+ --pf-c-tree-view__node--Color: var(--pf-global--Color--100);
22852
+ --pf-c-tree-view__node--m-current--Color: var(--pf-global--link--Color);
22853
+ --pf-c-tree-view__node--m-current--FontWeight: var(--pf-global--FontWeight--bold);
22854
+ --pf-c-tree-view__node-container--Display: contents;
22855
+ --pf-c-tree-view__node-content--RowGap: var(--pf-global--spacer--sm);
22856
+ --pf-c-tree-view__node-content--Overflow: visible;
22857
+ --pf-c-tree-view__node--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
22858
+ --pf-c-tree-view__node--focus--BackgroundColor: var(--pf-global--palette--black-200);
22859
+ --pf-c-tree-view__list-item__list-item__node-toggle--Top: var(--pf-c-tree-view__node--PaddingTop--base);
22860
+ --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
22861
+ --pf-c-tree-view__list-item__list-item__node-toggle--TranslateX: -100%;
22862
+ --pf-c-tree-view__node-toggle--Position: absolute;
22863
+ --pf-c-tree-view__node-toggle--Color--base: var(--pf-global--Color--200);
22864
+ --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--Color--base);
22865
+ --pf-c-tree-view__node-toggle--hover--Color: var(--pf-global--Color--100);
22866
+ --pf-c-tree-view__node-toggle--focus--Color: var(--pf-global--Color--100);
22867
+ --pf-c-tree-view__node-toggle--active--Color: var(--pf-global--Color--100);
22868
+ --pf-c-tree-view__list-item--m-expanded__node-toggle--Color: var(--pf-global--Color--100);
22869
+ --pf-c-tree-view__node-toggle-icon--MinWidth: var(--pf-global--FontSize--md);
22870
+ --pf-c-tree-view__node-toggle-icon--Transition: transform var(--pf-global--TransitionDuration) var(--pf-global--TimingFunction);
22871
+ --pf-c-tree-view__node-toggle-button--PaddingTop: var(--pf-global--spacer--form-element);
22872
+ --pf-c-tree-view__node-toggle-button--PaddingRight: var(--pf-global--spacer--md);
22873
+ --pf-c-tree-view__node-toggle-button--PaddingBottom: var(--pf-global--spacer--form-element);
22874
+ --pf-c-tree-view__node-toggle-button--PaddingLeft: var(--pf-global--spacer--md);
22875
+ --pf-c-tree-view__node-toggle-button--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
22876
+ --pf-c-tree-view__node-toggle-button--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
22877
+ --pf-c-tree-view__node-check--MarginRight: var(--pf-global--spacer--sm);
22878
+ --pf-c-tree-view__node-count--MarginLeft: var(--pf-global--spacer--sm);
22879
+ --pf-c-tree-view__node-count--c-badge--m-read--BackgroundColor: var(--pf-global--disabled-color--200);
22880
+ --pf-c-tree-view__search--PaddingTop: var(--pf-global--spacer--sm);
22881
+ --pf-c-tree-view__search--PaddingRight: var(--pf-global--spacer--sm);
22882
+ --pf-c-tree-view__search--PaddingBottom: var(--pf-global--spacer--sm);
22883
+ --pf-c-tree-view__search--PaddingLeft: var(--pf-global--spacer--sm);
22884
+ --pf-c-tree-view__node-icon--PaddingRight: var(--pf-global--spacer--sm);
22885
+ --pf-c-tree-view__node-icon--Color: var(--pf-global--icon--Color--light);
22886
+ --pf-c-tree-view__node-toggle-icon--base--Rotate: 0;
22887
+ --pf-c-tree-view__node-toggle-icon--Rotate: var(--pf-c-tree-view__node-toggle-icon--base--Rotate);
22888
+ --pf-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate: 90deg;
22889
+ --pf-c-tree-view__node-text--max-lines: 1;
22890
+ --pf-c-tree-view__node-title--FontWeight: var(--pf-global--FontWeight--bold);
22891
+ --pf-c-tree-view__action--MarginLeft: var(--pf-global--spacer--md);
22892
+ --pf-c-tree-view__action--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
22893
+ --pf-c-tree-view__action--Color: var(--pf-global--icon--Color--light);
22894
+ --pf-c-tree-view__action--hover--Color: var(--pf-global--icon--Color--dark);
22895
+ --pf-c-tree-view__action--focus--Color: var(--pf-global--icon--Color--dark);
22896
+ --pf-c-tree-view--m-guides--guide--Left: var(--pf-c-tree-view--m-guides--guide-left--base);
22897
+ --pf-c-tree-view--m-guides--guide-color--base: var(--pf-global--BorderColor--100);
22898
+ --pf-c-tree-view--m-guides--guide-width--base: var(--pf-global--BorderWidth--sm);
22899
+ --pf-c-tree-view--m-guides--guide-left--base: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-guides__list-node--guide-width--base));
22900
+ --pf-c-tree-view--m-guides--guide-left--base--offset: calc(var(--pf-c-tree-view__list-item__list-item__node-toggle--Left) + var(--pf-c-tree-view__node-toggle-icon--MinWidth) / 2);
22901
+ --pf-c-tree-view--m-guides__list-node--guide-width--base: var(--pf-global--spacer--lg);
22902
+ --pf-c-tree-view--m-guides__list-item--before--Top: 0;
22903
+ --pf-c-tree-view--m-guides__list-item--before--Width: var(--pf-c-tree-view--m-guides--guide-width--base);
22904
+ --pf-c-tree-view--m-guides__list-item--before--Height: 100%;
22905
+ --pf-c-tree-view--m-guides__list-item--before--BackgroundColor: var(--pf-c-tree-view--m-guides--guide-color--base);
22906
+ --pf-c-tree-view--m-guides__list-item--last-child--before--Top: var(--pf-c-tree-view--m-guides__node--before--Top);
22907
+ --pf-c-tree-view--m-guides__list-item--last-child--before--Height: var(--pf-c-tree-view--m-guides__list-item--last-child--before--Top);
22908
+ --pf-c-tree-view--m-guides__list-item--ZIndex: var(--pf-global--ZIndex--xs);
22909
+ --pf-c-tree-view--m-guides__node--before--Width: 1rem;
22910
+ --pf-c-tree-view--m-guides__node--before--Height: var(--pf-c-tree-view--m-guides--guide-width--base);
22911
+ --pf-c-tree-view--m-guides__node--before--Top: 1.125rem;
22912
+ --pf-c-tree-view--m-guides__node--before--BackgroundColor: var(--pf-c-tree-view--m-guides--guide-color--base);
22913
+ --pf-c-tree-view--m-compact--base-border--Left--offset: var(--pf-global--spacer--md);
22914
+ --pf-c-tree-view--m-compact--base-border--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--base-border--Left--offset));
22915
+ --pf-c-tree-view--m-compact__node--indent--base: var(--pf-c-tree-view__node--indent--base);
22916
+ --pf-c-tree-view--m-compact__node--nested-indent--base: var(--pf-global--spacer--lg);
22917
+ --pf-c-tree-view--m-compact--border--Left: var(--pf-c-tree-view--m-compact--base-border--Left);
22918
+ --pf-c-tree-view--m-compact__node--PaddingTop: 0;
22919
+ --pf-c-tree-view--m-compact__node--PaddingBottom: 0;
22920
+ --pf-c-tree-view--m-compact__node--nested--PaddingTop: var(--pf-global--spacer--sm);
22921
+ --pf-c-tree-view--m-compact__node--nested--PaddingBottom: var(--pf-global--spacer--sm);
22922
+ --pf-c-tree-view--m-compact__list-item__list-item__node-toggle--Top: calc(var(--pf-c-tree-view--m-compact__node-container--PaddingTop));
22923
+ --pf-c-tree-view--m-compact__list-item--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
22924
+ --pf-c-tree-view--m-compact__list-item--BorderBottomColor: var(--pf-global--BorderColor--100);
22925
+ --pf-c-tree-view--m-compact__list-item--before--Top: 0;
22926
+ --pf-c-tree-view--m-compact__list-item--last-child--before--Height: var(--pf-c-tree-view--m-compact__node--before--Top);
22927
+ --pf-c-tree-view--m-compact__list-item--nested--before--Top: calc(var(--pf-c-tree-view__node--PaddingTop--base) * -1);
22928
+ --pf-c-tree-view--m-compact__list-item--nested--last-child--before--Height: calc(var(--pf-c-tree-view--m-compact__node--before--Top) + var(--pf-c-tree-view__node--PaddingTop--base));
22929
+ --pf-c-tree-view--m-compact__node--PaddingLeft: var(--pf-c-tree-view--m-compact__node--indent--base);
22930
+ --pf-c-tree-view--m-compact__node--before--Top: calc(var(--pf-c-tree-view--m-compact__node-container--PaddingTop) + var(--pf-c-tree-view--m-compact__node--nested--PaddingTop) + 0.25rem);
22931
+ --pf-c-tree-view--m-compact__node--level-2--PaddingLeft: var(--pf-c-tree-view--m-compact__node--indent--base);
22932
+ --pf-c-tree-view--m-compact__node-toggle--nested--MarginRight: calc(var(--pf-c-tree-view__node-toggle-button--PaddingLeft) * -.5);
22933
+ --pf-c-tree-view--m-compact__node-toggle--nested--MarginLeft: calc(var(--pf-c-tree-view__node-toggle-button--PaddingLeft) * -1.5);
22934
+ --pf-c-tree-view--m-compact__node-container--Display: flex;
22935
+ --pf-c-tree-view--m-compact__node-container--PaddingBottom--base: var(--pf-global--spacer--lg);
22936
+ --pf-c-tree-view--m-compact__node-container--PaddingTop: var(--pf-global--spacer--lg);
22937
+ --pf-c-tree-view--m-compact__node-container--PaddingRight: var(--pf-global--spacer--lg);
22938
+ --pf-c-tree-view--m-compact__node-container--PaddingBottom: var(--pf-c-tree-view--m-compact__node-container--PaddingBottom--base);
22939
+ --pf-c-tree-view--m-compact__node-container--PaddingLeft: var(--pf-global--spacer--xs);
22940
+ --pf-c-tree-view--m-compact__node-container--nested--PaddingTop: var(--pf-global--spacer--md);
22941
+ --pf-c-tree-view--m-compact__node-container--nested--PaddingRight: var(--pf-global--spacer--lg);
22942
+ --pf-c-tree-view--m-compact__node-container--nested--PaddingBottom: var(--pf-global--spacer--md);
22943
+ --pf-c-tree-view--m-compact__node-container--nested--PaddingLeft: var(--pf-global--spacer--lg);
22944
+ --pf-c-tree-view--m-compact__node-container--nested--BackgroundColor: var(--pf-global--BackgroundColor--200);
22945
+ --pf-c-tree-view--m-compact__list-item--m-expanded__node-container--PaddingBottom: 0;
22946
+ --pf-c-tree-view--m-no-background__node-container--BackgroundColor: transparent;
22947
+ --pf-c-tree-view--m-compact--m-no-background--base-border--Left--offset: var(--pf-global--spacer--sm);
22948
+ --pf-c-tree-view--m-compact--m-no-background--base-border--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--m-no-background--base-border--Left--offset));
22949
+ --pf-c-tree-view--m-compact--m-no-background__node--indent--base: var(--pf-c-tree-view__node--indent--base);
22950
+ --pf-c-tree-view--m-compact--m-no-background__node--nested-indent--base: var(--pf-global--spacer--2xl);
22951
+ --pf-c-tree-view--m-compact--m-no-background__node--nested--PaddingTop: 0;
22952
+ --pf-c-tree-view--m-compact--m-no-background__node--nested--PaddingBottom: 0;
22953
+ --pf-c-tree-view--m-compact--m-no-background__node--before--Top: calc(var(--pf-c-tree-view--m-compact__node-container--nested--PaddingTop) + var(--pf-c-tree-view--m-compact__node--nested--PaddingTop) + 0.25rem);
22954
+ padding-top: var(--pf-c-tree-view--PaddingTop);
22955
+ padding-bottom: var(--pf-c-tree-view--PaddingBottom);
22872
22956
  }
22873
22957
 
22874
- .pf-c-wizard {
22875
- --pf-c-wizard--Height: 100%;
22876
- --pf-c-modal-box--c-wizard--FlexBasis: 47.625rem;
22877
- --pf-c-wizard__header--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
22878
- --pf-c-wizard__header--ZIndex: var(--pf-global--ZIndex--md);
22879
- --pf-c-wizard__header--PaddingTop: var(--pf-global--spacer--lg);
22880
- --pf-c-wizard__header--PaddingRight: var(--pf-global--spacer--md);
22881
- --pf-c-wizard__header--PaddingBottom: var(--pf-global--spacer--lg);
22882
- --pf-c-wizard__header--PaddingLeft: var(--pf-global--spacer--md);
22883
- --pf-c-wizard__header--lg--PaddingRight: var(--pf-global--spacer--md);
22884
- --pf-c-wizard__header--lg--PaddingLeft: var(--pf-global--spacer--md);
22885
- --pf-c-wizard__header--xl--PaddingRight: var(--pf-global--spacer--lg);
22886
- --pf-c-wizard__header--xl--PaddingLeft: var(--pf-global--spacer--lg);
22887
- --pf-c-wizard__close--Top: calc(var(--pf-global--spacer--lg) - var(--pf-global--spacer--form-element));
22888
- --pf-c-wizard__close--Right: 0;
22889
- --pf-c-wizard__close--xl--Right: var(--pf-global--spacer--lg);
22890
- --pf-c-wizard__close--FontSize: var(--pf-global--FontSize--xl);
22891
- --pf-c-wizard__title--PaddingRight: var(--pf-global--spacer--2xl);
22892
- --pf-c-wizard__description--PaddingTop: var(--pf-global--spacer--sm);
22893
- --pf-c-wizard__description--Color: var(--pf-global--Color--light-200);
22894
- --pf-c-wizard__nav-link--Color: var(--pf-global--Color--100);
22895
- --pf-c-wizard__nav-link--TextDecoration: var(--pf-global--link--TextDecoration);
22896
- --pf-c-wizard__nav-link--hover--Color: var(--pf-global--link--Color);
22897
- --pf-c-wizard__nav-link--focus--Color: var(--pf-global--link--Color);
22898
- --pf-c-wizard__nav-link--m-current--Color: var(--pf-global--link--Color);
22899
- --pf-c-wizard__nav-link--m-current--FontWeight: var(--pf-global--FontWeight--normal);
22900
- --pf-c-wizard__nav-link--m-disabled--Color: var(--pf-global--Color--dark-200);
22901
- --pf-c-wizard__nav-list__nav-list__nav-link--m-current--FontWeight: var(--pf-global--FontWeight--normal);
22902
- --pf-c-wizard__nav-link-toggle--PaddingRight: var(--pf-global--spacer--sm);
22903
- --pf-c-wizard__nav-link-toggle--PaddingLeft: var(--pf-global--spacer--sm);
22904
- --pf-c-wizard__nav-link-toggle--Color: var(--pf-global--Color--200);
22905
- --pf-c-wizard__nav-link--hover__nav-link-toggle-icon--Color: var(--pf-global--Color--100);
22906
- --pf-c-wizard__nav-link--focus__nav-link-toggle-icon--Color: var(--pf-global--Color--100);
22907
- --pf-c-wizard__nav-link-toggle-icon--Transition: var(--pf-global--Transition);
22908
- --pf-c-wizard__nav-link-toggle-icon--Rotate: 0;
22909
- --pf-c-wizard__nav-item--m-expanded__link-toggle-icon--Rotate: 90deg;
22910
- --pf-c-wizard__nav-link--before--Width: 1.5rem;
22911
- --pf-c-wizard__nav-link--before--Height: 1.5rem;
22912
- --pf-c-wizard__nav-link--before--Top: 0;
22913
- --pf-c-wizard__nav-link--before--BackgroundColor: var(--pf-global--BackgroundColor--200);
22914
- --pf-c-wizard__nav-link--before--BorderRadius: var(--pf-global--BorderRadius--lg);
22915
- --pf-c-wizard__nav-link--before--Color: var(--pf-global--Color--100);
22916
- --pf-c-wizard__nav-link--before--FontSize: var(--pf-global--FontSize--sm);
22917
- --pf-c-wizard__nav-link--before--TranslateX: calc(-100% - var(--pf-global--spacer--sm));
22918
- --pf-c-wizard__nav-link--m-current--before--BackgroundColor: var(--pf-global--active-color--100);
22919
- --pf-c-wizard__nav-link--m-current--before--Color: var(--pf-global--Color--light-100);
22920
- --pf-c-wizard__nav-link--m-disabled--before--BackgroundColor: transparent;
22921
- --pf-c-wizard__nav-link--m-disabled--before--Color: var(--pf-global--Color--dark-200);
22922
- --pf-c-wizard__toggle--BackgroundColor: var(--pf-global--BackgroundColor--100);
22923
- --pf-c-wizard__toggle--ZIndex: var(--pf-global--ZIndex--md);
22924
- --pf-c-wizard__toggle--BoxShadow: var(--pf-global--BoxShadow--md-bottom);
22925
- --pf-c-wizard__toggle--PaddingTop: var(--pf-global--spacer--lg);
22926
- --pf-c-wizard__toggle--PaddingRight: var(--pf-global--spacer--md);
22927
- --pf-c-wizard__toggle--PaddingBottom: var(--pf-global--spacer--lg);
22928
- --pf-c-wizard__toggle--PaddingLeft: calc(var(--pf-global--spacer--md) + var(--pf-c-wizard__nav-link--before--Width) + var(--pf-global--spacer--sm));
22929
- --pf-c-wizard__toggle--m-expanded--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
22930
- --pf-c-wizard__toggle--m-expanded--BorderBottomColor: var(--pf-global--BorderColor--100);
22931
- --pf-c-wizard--m-in-page__toggle--xl--PaddingLeft: calc(var(--pf-global--spacer--xl) + var(--pf-c-wizard__nav-link--before--Width) + var(--pf-global--spacer--sm));
22932
- --pf-c-wizard__toggle-num--before--Top: 0;
22933
- --pf-c-wizard__toggle-list-item--not-last-child--MarginRight: var(--pf-global--spacer--sm);
22934
- --pf-c-wizard__toggle-list-item--MarginBottom: var(--pf-global--spacer--xs);
22935
- --pf-c-wizard__toggle-list--MarginRight: var(--pf-global--spacer--sm);
22936
- --pf-c-wizard__toggle-list--MarginBottom: calc(var(--pf-c-wizard__toggle-list-item--MarginBottom) * -1);
22937
- --pf-c-wizard__toggle-separator--MarginLeft: var(--pf-global--spacer--sm);
22938
- --pf-c-wizard__toggle-separator--Color: var(--pf-global--BorderColor--200);
22939
- --pf-c-wizard__toggle-icon--LineHeight: var(--pf-global--LineHeight--md);
22940
- --pf-c-wizard__toggle--m-expanded__toggle-icon--Rotate: 180deg;
22941
- --pf-c-wizard__nav--ZIndex: var(--pf-global--ZIndex--sm);
22942
- --pf-c-wizard__nav--BackgroundColor: var(--pf-global--BackgroundColor--100);
22943
- --pf-c-wizard__nav--BoxShadow: var(--pf-global--BoxShadow--md-bottom);
22944
- --pf-c-wizard__nav--Width: 100%;
22945
- --pf-c-wizard__nav--lg--Width: 15.625rem;
22946
- --pf-c-wizard__nav--lg--BorderRightWidth: var(--pf-global--BorderWidth--sm);
22947
- --pf-c-wizard__nav--lg--BorderRightColor: var(--pf-global--BorderColor--100);
22948
- --pf-c-wizard__nav-list--PaddingTop: var(--pf-global--spacer--lg);
22949
- --pf-c-wizard__nav-list--PaddingRight: var(--pf-global--spacer--md);
22950
- --pf-c-wizard__nav-list--PaddingBottom: var(--pf-global--spacer--lg);
22951
- --pf-c-wizard__nav-list--PaddingLeft: calc(var(--pf-global--spacer--md) + var(--pf-c-wizard__nav-link--before--Width) + var(--pf-global--spacer--sm));
22952
- --pf-c-wizard__nav-list--lg--PaddingTop: var(--pf-global--spacer--md);
22953
- --pf-c-wizard__nav-list--lg--PaddingRight: var(--pf-global--spacer--md);
22954
- --pf-c-wizard__nav-list--lg--PaddingBottom: var(--pf-global--spacer--md);
22955
- --pf-c-wizard__nav-list--xl--PaddingTop: var(--pf-global--spacer--lg);
22956
- --pf-c-wizard__nav-list--xl--PaddingRight: var(--pf-global--spacer--lg);
22957
- --pf-c-wizard__nav-list--xl--PaddingBottom: var(--pf-global--spacer--lg);
22958
- --pf-c-wizard__nav-list--xl--PaddingLeft: calc(var(--pf-global--spacer--lg) + var(--pf-c-wizard__nav-link--before--Width) + var(--pf-global--spacer--sm));
22959
- --pf-c-wizard__nav-list--nested--MarginLeft: var(--pf-global--spacer--md);
22960
- --pf-c-wizard__nav-list--nested--MarginTop: var(--pf-global--spacer--md);
22961
- --pf-c-wizard__nav-item--MarginTop: var(--pf-global--spacer--md);
22962
- --pf-c-wizard__outer-wrap--BackgroundColor: var(--pf-global--BackgroundColor--100);
22963
- --pf-c-wizard__outer-wrap--lg--PaddingLeft: var(--pf-c-wizard__nav--Width);
22964
- --pf-c-wizard__outer-wrap--MinHeight: 15.625rem;
22965
- --pf-c-wizard__main--ZIndex: var(--pf-global--ZIndex--xs);
22966
- --pf-c-wizard__main-body--PaddingTop: var(--pf-global--spacer--md);
22967
- --pf-c-wizard__main-body--PaddingRight: var(--pf-global--spacer--md);
22968
- --pf-c-wizard__main-body--PaddingBottom: var(--pf-global--spacer--md);
22969
- --pf-c-wizard__main-body--PaddingLeft: var(--pf-global--spacer--md);
22970
- --pf-c-wizard__main-body--xl--PaddingTop: var(--pf-global--spacer--lg);
22971
- --pf-c-wizard__main-body--xl--PaddingRight: var(--pf-global--spacer--lg);
22972
- --pf-c-wizard__main-body--xl--PaddingBottom: var(--pf-global--spacer--lg);
22973
- --pf-c-wizard__main-body--xl--PaddingLeft: var(--pf-global--spacer--lg);
22974
- --pf-c-wizard__footer--BackgroundColor: var(--pf-global--BackgroundColor--100);
22975
- --pf-c-wizard__footer--ZIndex: var(--pf-global--ZIndex--sm);
22976
- --pf-c-wizard__footer--PaddingTop: var(--pf-global--spacer--md);
22977
- --pf-c-wizard__footer--PaddingRight: var(--pf-global--spacer--md);
22978
- --pf-c-wizard__footer--PaddingBottom: var(--pf-global--spacer--sm);
22979
- --pf-c-wizard__footer--PaddingLeft: var(--pf-global--spacer--md);
22980
- --pf-c-wizard__footer--xl--PaddingTop: var(--pf-global--spacer--lg);
22981
- --pf-c-wizard__footer--xl--PaddingRight: var(--pf-global--spacer--lg);
22982
- --pf-c-wizard__footer--xl--PaddingBottom: var(--pf-global--spacer--md);
22983
- --pf-c-wizard__footer--xl--PaddingLeft: var(--pf-global--spacer--lg);
22984
- --pf-c-wizard__footer--BoxShadow: var(--pf-global--BoxShadow--sm-top);
22985
- --pf-c-wizard__footer--child--MarginRight: var(--pf-global--spacer--md);
22986
- --pf-c-wizard__footer--child--MarginBottom: var(--pf-global--spacer--sm);
22987
- --pf-c-wizard__footer-cancel--MarginLeft: calc(var(--pf-global--spacer--2xl) - var(--pf-c-wizard__footer--child--MarginRight));
22958
+ .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item, .pf-c-tree-view.pf-m-guides .pf-c-tree-view__list-item {
22988
22959
  position: relative;
22989
- display: flex;
22990
- flex-direction: column;
22991
- height: var(--pf-c-wizard--Height);
22992
- }
22993
-
22994
- @media screen and (min-width: 992px) {
22995
- .pf-c-wizard {
22996
- --pf-c-wizard__header--PaddingRight: var(--pf-c-wizard__header--lg--PaddingRight);
22997
- --pf-c-wizard__header--PaddingLeft: var(--pf-c-wizard__header--lg--PaddingLeft);
22998
- }
22999
- }
23000
- @media screen and (min-width: 1200px) {
23001
- .pf-c-wizard {
23002
- --pf-c-wizard__header--PaddingRight: var(--pf-c-wizard__header--xl--PaddingRight);
23003
- --pf-c-wizard__header--PaddingLeft: var(--pf-c-wizard__header--xl--PaddingLeft);
23004
- }
23005
- }
23006
- @media screen and (min-width: 1200px) {
23007
- .pf-c-wizard {
23008
- --pf-c-wizard__close--Right: var(--pf-c-wizard__close--xl--Right);
23009
- }
23010
- }
23011
- @media screen and (min-width: 992px) {
23012
- .pf-c-wizard {
23013
- --pf-c-wizard__nav--Width: var(--pf-c-wizard__nav--lg--Width);
23014
- --pf-c-wizard__nav--BoxShadow: none;
23015
- }
23016
- }
23017
- @media screen and (min-width: 992px) {
23018
- .pf-c-wizard {
23019
- --pf-c-wizard__nav-list--PaddingTop: var(--pf-c-wizard__nav-list--lg--PaddingTop);
23020
- --pf-c-wizard__nav-list--PaddingRight: var(--pf-c-wizard__nav-list--lg--PaddingRight);
23021
- --pf-c-wizard__nav-list--PaddingBottom: var(--pf-c-wizard__nav-list--lg--PaddingBottom);
23022
- }
23023
- }
23024
- @media screen and (min-width: 1200px) {
23025
- .pf-c-wizard {
23026
- --pf-c-wizard__nav-list--PaddingTop: var(--pf-c-wizard__nav-list--xl--PaddingTop);
23027
- --pf-c-wizard__nav-list--PaddingRight: var(--pf-c-wizard__nav-list--xl--PaddingRight);
23028
- --pf-c-wizard__nav-list--PaddingBottom: var(--pf-c-wizard__nav-list--xl--PaddingBottom);
23029
- --pf-c-wizard__nav-list--PaddingLeft: var(--pf-c-wizard__nav-list--xl--PaddingLeft);
23030
- }
23031
- }
23032
- @media screen and (min-width: 1200px) {
23033
- .pf-c-wizard {
23034
- --pf-c-wizard__main-body--PaddingTop: var(--pf-c-wizard__main-body--xl--PaddingTop);
23035
- --pf-c-wizard__main-body--PaddingRight: var(--pf-c-wizard__main-body--xl--PaddingRight);
23036
- --pf-c-wizard__main-body--PaddingBottom: var(--pf-c-wizard__main-body--xl--PaddingBottom);
23037
- --pf-c-wizard__main-body--PaddingLeft: var(--pf-c-wizard__main-body--xl--PaddingLeft);
23038
- }
23039
- }
23040
- @media screen and (min-width: 1200px) {
23041
- .pf-c-wizard {
23042
- --pf-c-wizard__footer--PaddingTop: var(--pf-c-wizard__footer--xl--PaddingTop);
23043
- --pf-c-wizard__footer--PaddingRight: var(--pf-c-wizard__footer--xl--PaddingRight);
23044
- --pf-c-wizard__footer--PaddingBottom: var(--pf-c-wizard__footer--xl--PaddingBottom);
23045
- --pf-c-wizard__footer--PaddingLeft: var(--pf-c-wizard__footer--xl--PaddingLeft);
23046
- }
23047
- }
23048
- .pf-c-modal-box .pf-c-wizard {
23049
- flex: 1 1 var(--pf-c-modal-box--c-wizard--FlexBasis);
23050
- min-height: 0;
23051
22960
  }
23052
22961
 
23053
- .pf-c-wizard > :not(.pf-c-wizard__outer-wrap):not(.pf-c-drawer) {
23054
- flex-shrink: 0;
23055
- }
23056
-
23057
- .pf-c-wizard.pf-m-finished {
23058
- --pf-c-wizard__outer-wrap--lg--PaddingLeft: 0;
23059
- }
23060
-
23061
- .pf-c-wizard.pf-m-finished .pf-c-wizard__nav,
23062
- .pf-c-wizard.pf-m-finished .pf-c-wizard__footer,
23063
- .pf-c-wizard.pf-m-finished .pf-c-wizard__toggle {
23064
- display: none;
23065
- visibility: hidden;
22962
+ .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item::before,
22963
+ .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__node::before, .pf-c-tree-view.pf-m-guides .pf-c-tree-view__list-item .pf-c-tree-view__list-item::before,
22964
+ .pf-c-tree-view.pf-m-guides .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__node::before {
22965
+ position: absolute;
22966
+ left: var(--pf-c-tree-view--m-guides--guide--Left);
22967
+ content: "";
23066
22968
  }
23067
22969
 
23068
- .pf-c-wizard__header {
23069
- color: var(--pf-global--Color--100);
23070
- position: relative;
23071
- z-index: var(--pf-c-wizard__header--ZIndex);
23072
- padding: var(--pf-c-wizard__header--PaddingTop) var(--pf-c-wizard__header--PaddingRight) var(--pf-c-wizard__header--PaddingBottom) var(--pf-c-wizard__header--PaddingLeft);
23073
- background-color: var(--pf-c-wizard__header--BackgroundColor);
22970
+ .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item::before, .pf-c-tree-view.pf-m-guides .pf-c-tree-view__list-item .pf-c-tree-view__list-item::before {
22971
+ top: var(--pf-c-tree-view--m-guides__list-item--before--Top);
22972
+ z-index: var(--pf-c-tree-view--m-guides__list-item--ZIndex);
22973
+ width: var(--pf-c-tree-view--m-guides__list-item--before--Width);
22974
+ height: var(--pf-c-tree-view--m-guides__list-item--before--Height);
22975
+ background-color: var(--pf-c-tree-view--m-guides__list-item--before--BackgroundColor);
23074
22976
  }
23075
22977
 
23076
- .pf-c-wizard__header .pf-c-wizard__close {
23077
- position: absolute;
23078
- top: var(--pf-c-wizard__close--Top);
23079
- right: var(--pf-c-wizard__close--Right);
23080
- font-size: var(--pf-c-wizard__close--FontSize);
22978
+ .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__node::before, .pf-c-tree-view.pf-m-guides .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__node::before {
22979
+ top: var(--pf-c-tree-view--m-guides__node--before--Top);
22980
+ width: var(--pf-c-tree-view--m-guides__node--before--Width);
22981
+ height: var(--pf-c-tree-view--m-guides__node--before--Height);
22982
+ background-color: var(--pf-c-tree-view--m-guides__node--before--BackgroundColor);
23081
22983
  }
23082
22984
 
23083
- .pf-c-wizard__title {
23084
- padding-right: var(--pf-c-wizard__title--PaddingRight);
23085
- word-wrap: break-word;
22985
+ .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item:last-child::before, .pf-c-tree-view.pf-m-guides .pf-c-tree-view__list-item .pf-c-tree-view__list-item:last-child::before {
22986
+ height: var(--pf-c-tree-view--m-guides__list-item--last-child--before--Height);
23086
22987
  }
23087
22988
 
23088
- .pf-c-wizard__description {
23089
- display: none;
23090
- padding-top: var(--pf-c-wizard__description--PaddingTop);
23091
- color: var(--pf-c-wizard__description--Color);
23092
- visibility: hidden;
22989
+ .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item, .pf-c-tree-view.pf-m-guides .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
22990
+ --pf-c-tree-view--m-guides--guide--Left: var(--pf-c-tree-view--m-guides--border--nested--Left);
23093
22991
  }
23094
22992
 
23095
- @media screen and (min-width: 992px) {
23096
- .pf-c-wizard__description {
23097
- display: block;
23098
- visibility: visible;
23099
- }
23100
- }
23101
- .pf-c-wizard__toggle {
23102
- position: relative;
23103
- z-index: var(--pf-c-wizard__toggle--ZIndex);
23104
- display: flex;
23105
- justify-content: space-between;
23106
- width: 100%;
23107
- padding: var(--pf-c-wizard__toggle--PaddingTop) var(--pf-c-wizard__toggle--PaddingRight) var(--pf-c-wizard__toggle--PaddingBottom) var(--pf-c-wizard__toggle--PaddingLeft);
23108
- background-color: var(--pf-c-wizard__toggle--BackgroundColor);
23109
- border: 0;
23110
- box-shadow: var(--pf-c-wizard__toggle--BoxShadow);
22993
+ .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item:last-child, .pf-c-tree-view.pf-m-guides .pf-c-tree-view__list-item:last-child {
22994
+ --pf-c-tree-view--m-compact__list-item--BorderBottomWidth: 0;
23111
22995
  }
23112
22996
 
23113
- @media screen and (min-width: 992px) {
23114
- .pf-c-wizard__toggle {
23115
- display: none;
23116
- visibility: hidden;
23117
- }
23118
- }
23119
- .pf-c-wizard__toggle.pf-m-expanded {
23120
- --pf-c-wizard__toggle--BoxShadow: none;
23121
- border-bottom: var(--pf-c-wizard__toggle--m-expanded--BorderBottomWidth) solid var(--pf-c-wizard__toggle--m-expanded--BorderBottomColor);
22997
+ .pf-c-tree-view.pf-m-compact {
22998
+ --pf-c-tree-view__node--PaddingTop: var(--pf-c-tree-view--m-compact__node--PaddingTop);
22999
+ --pf-c-tree-view__node--PaddingBottom: var(--pf-c-tree-view--m-compact__node--PaddingBottom);
23000
+ --pf-c-tree-view__node-container--Display: var(--pf-c-tree-view--m-compact__node-container--Display);
23001
+ --pf-c-tree-view__node--hover--BackgroundColor: transparent;
23002
+ --pf-c-tree-view__node--focus--BackgroundColor: transparent;
23003
+ --pf-c-tree-view__list-item__list-item__node-toggle--Top: var(--pf-c-tree-view--m-compact__list-item__list-item__node-toggle--Top);
23122
23004
  }
23123
23005
 
23124
- .pf-c-wizard__toggle.pf-m-expanded .pf-c-wizard__toggle-icon {
23125
- transform: rotate(var(--pf-c-wizard__toggle--m-expanded__toggle-icon--Rotate));
23006
+ .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item {
23007
+ border-bottom: var(--pf-c-tree-view--m-compact__list-item--BorderBottomWidth) solid var(--pf-c-tree-view--m-compact__list-item--BorderBottomColor);
23126
23008
  }
23127
23009
 
23128
- .pf-c-wizard__toggle-list {
23129
- position: relative;
23130
- display: flex;
23131
- flex-wrap: wrap;
23132
- align-items: baseline;
23133
- margin-right: var(--pf-c-wizard__toggle-list--MarginRight);
23134
- margin-bottom: var(--pf-c-wizard__toggle-list--MarginBottom);
23135
- list-style: none;
23010
+ .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item.pf-m-expanded {
23011
+ --pf-c-tree-view--m-compact__node-container--PaddingBottom: var(--pf-c-tree-view--m-compact__list-item--m-expanded__node-container--PaddingBottom);
23136
23012
  }
23137
23013
 
23138
- .pf-c-wizard__toggle-list-item {
23139
- margin-bottom: var(--pf-c-wizard__toggle-list-item--MarginBottom);
23140
- text-align: left;
23141
- word-break: break-word;
23014
+ .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
23015
+ --pf-c-tree-view__node--PaddingTop: var(--pf-c-tree-view--m-compact__node--nested--PaddingTop);
23016
+ --pf-c-tree-view__node--PaddingBottom: var(--pf-c-tree-view--m-compact__node--nested--PaddingBottom);
23017
+ --pf-c-tree-view__node-toggle--Position: static;
23018
+ --pf-c-tree-view__node--PaddingLeft: var(--pf-c-tree-view--m-compact__node--level-2--PaddingLeft);
23019
+ --pf-c-tree-view__list-item__list-item__node-toggle--TranslateX: 0;
23020
+ --pf-c-tree-view--m-compact__list-item--BorderBottomWidth: 0;
23021
+ --pf-c-tree-view--m-compact__node-container--PaddingBottom: var(--pf-c-tree-view--m-compact__node-container--PaddingBottom--base);
23142
23022
  }
23143
23023
 
23144
- .pf-c-wizard__toggle-list-item:not(:last-child) {
23145
- margin-right: var(--pf-c-wizard__toggle-list-item--not-last-child--MarginRight);
23024
+ .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item::before,
23025
+ .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__node::before {
23026
+ left: var(--pf-c-tree-view--m-compact--border--Left);
23146
23027
  }
23147
23028
 
23148
- .pf-c-wizard__toggle-num {
23149
- --pf-c-wizard__nav-link--before--Top: var(--pf-c-wizard__toggle-num--before--Top);
23029
+ .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item::before {
23030
+ top: var(--pf-c-tree-view--m-compact__list-item--before--Top);
23150
23031
  }
23151
23032
 
23152
- .pf-c-wizard__toggle-separator {
23153
- margin-left: var(--pf-c-wizard__toggle-separator--MarginLeft);
23154
- color: var(--pf-c-wizard__toggle-separator--Color);
23033
+ .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__node::before {
23034
+ top: var(--pf-c-tree-view--m-compact__node--before--Top);
23155
23035
  }
23156
23036
 
23157
- .pf-c-wizard__toggle-icon {
23158
- line-height: var(--pf-c-wizard__toggle-icon--LineHeight);
23037
+ .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item:last-child::before {
23038
+ height: var(--pf-c-tree-view--m-compact__list-item--last-child--before--Height);
23159
23039
  }
23160
23040
 
23161
- .pf-c-wizard__outer-wrap {
23162
- position: relative;
23163
- display: flex;
23164
- flex-direction: column;
23165
- flex-grow: 1;
23166
- min-height: var(--pf-c-wizard__outer-wrap--MinHeight);
23167
- background-color: var(--pf-c-wizard__outer-wrap--BackgroundColor);
23041
+ .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
23042
+ --pf-c-tree-view__node--PaddingLeft: var(--pf-c-tree-view--m-compact__node--PaddingLeft);
23043
+ --pf-c-tree-view--m-compact--border--Left: var(--pf-c-tree-view--m-compact--border--nested--Left);
23044
+ --pf-c-tree-view--m-compact__list-item--before--Top: var(--pf-c-tree-view--m-compact__list-item--nested--before--Top);
23045
+ --pf-c-tree-view--m-compact__list-item--last-child--before--Height: var(--pf-c-tree-view--m-compact__list-item--nested--last-child--before--Height);
23168
23046
  }
23169
23047
 
23170
- @media screen and (min-width: 992px) {
23171
- .pf-c-wizard__outer-wrap {
23172
- padding-left: var(--pf-c-wizard__outer-wrap--lg--PaddingLeft);
23173
- }
23048
+ .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__node-container {
23049
+ padding: var(--pf-c-tree-view--m-compact__node-container--nested--PaddingTop) var(--pf-c-tree-view--m-compact__node-container--nested--PaddingRight) var(--pf-c-tree-view--m-compact__node-container--nested--PaddingBottom) var(--pf-c-tree-view--m-compact__node-container--nested--PaddingLeft);
23050
+ background-color: var(--pf-c-tree-view--m-compact__node-container--nested--BackgroundColor);
23174
23051
  }
23175
- .pf-c-wizard__inner-wrap {
23176
- position: relative;
23177
- display: flex;
23178
- flex-direction: column;
23179
- flex-grow: 1;
23180
- min-height: 0;
23052
+
23053
+ .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__node-toggle {
23054
+ margin-right: var(--pf-c-tree-view--m-compact__node-toggle--nested--MarginRight);
23055
+ margin-left: var(--pf-c-tree-view--m-compact__node-toggle--nested--MarginLeft);
23181
23056
  }
23182
23057
 
23183
- @media screen and (min-width: 992px) {
23184
- .pf-c-wizard__inner-wrap {
23185
- position: static;
23186
- }
23058
+ .pf-c-tree-view.pf-m-compact .pf-c-tree-view__node-container {
23059
+ padding: var(--pf-c-tree-view--m-compact__node-container--PaddingTop) var(--pf-c-tree-view--m-compact__node-container--PaddingRight) var(--pf-c-tree-view--m-compact__node-container--PaddingBottom) var(--pf-c-tree-view--m-compact__node-container--PaddingLeft);
23187
23060
  }
23188
- .pf-c-wizard__nav {
23189
- position: absolute;
23190
- top: 0;
23191
- left: 0;
23192
- z-index: var(--pf-c-wizard__nav--ZIndex);
23193
- display: none;
23194
- width: var(--pf-c-wizard__nav--Width);
23195
- max-height: 100%;
23196
- overflow-y: auto;
23197
- -webkit-overflow-scrolling: touch;
23198
- visibility: hidden;
23199
- background-color: var(--pf-c-wizard__nav--BackgroundColor);
23200
- box-shadow: var(--pf-c-wizard__nav--BoxShadow);
23061
+
23062
+ .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item:not([aria-expanded]) > .pf-c-tree-view__content > .pf-c-tree-view__node,
23063
+ .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item:not([aria-expanded]) > .pf-c-tree-view__content > .pf-c-tree-view__node > .pf-c-tree-view__node-container {
23064
+ cursor: default;
23201
23065
  }
23202
23066
 
23203
- .pf-c-wizard__nav.pf-m-expanded {
23204
- display: block;
23205
- visibility: visible;
23067
+ .pf-c-tree-view.pf-m-compact.pf-m-no-background {
23068
+ --pf-c-tree-view--m-compact__node--before--Top: var(--pf-c-tree-view--m-compact--m-no-background__node--before--Top);
23206
23069
  }
23207
23070
 
23208
- @media screen and (min-width: 992px) {
23209
- .pf-c-wizard__nav {
23210
- display: block;
23211
- height: 100%;
23212
- visibility: visible;
23213
- border-right: var(--pf-c-wizard__nav--lg--BorderRightWidth) solid var(--pf-c-wizard__nav--lg--BorderRightColor);
23214
- }
23071
+ .pf-c-tree-view.pf-m-compact.pf-m-no-background .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
23072
+ --pf-c-tree-view__node--PaddingTop: var(--pf-c-tree-view--m-compact--m-no-background__node--nested--PaddingTop);
23073
+ --pf-c-tree-view__node--PaddingBottom: var(--pf-c-tree-view--m-compact--m-no-background__node--nested--PaddingBottom);
23215
23074
  }
23216
- .pf-c-wizard__nav-list {
23217
- padding-top: var(--pf-c-wizard__nav-list--PaddingTop);
23218
- padding-right: var(--pf-c-wizard__nav-list--PaddingRight);
23219
- padding-bottom: var(--pf-c-wizard__nav-list--PaddingBottom);
23220
- padding-left: var(--pf-c-wizard__nav-list--PaddingLeft);
23221
- list-style: none;
23222
- counter-reset: wizard-nav-count;
23075
+
23076
+ .pf-c-tree-view.pf-m-compact.pf-m-no-background .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
23077
+ --pf-c-tree-view--m-compact--border--Left: var(--pf-c-tree-view--m-compact--m-no-background--border--nested--Left);
23078
+ --pf-c-tree-view__node--PaddingLeft: var(--pf-c-tree-view--m-compact--m-no-background__node--PaddingLeft);
23223
23079
  }
23224
23080
 
23225
- .pf-c-wizard__nav-list .pf-c-wizard__nav-list {
23226
- padding: 0;
23227
- margin-top: var(--pf-c-wizard__nav-list--nested--MarginTop);
23228
- margin-left: var(--pf-c-wizard__nav-list--nested--MarginLeft);
23081
+ .pf-c-tree-view.pf-m-no-background {
23082
+ --pf-c-tree-view--m-compact__node-container--nested--BackgroundColor: var(--pf-c-tree-view--m-no-background__node-container--BackgroundColor);
23229
23083
  }
23230
23084
 
23231
- .pf-c-wizard__nav-list .pf-c-wizard__nav-list .pf-c-wizard__nav-link::before {
23232
- content: none;
23085
+ .pf-c-tree-view__node-toggle-icon {
23086
+ display: inline-block;
23087
+ min-width: var(--pf-c-tree-view__node-toggle-icon--MinWidth);
23088
+ text-align: center;
23089
+ transition: var(--pf-c-tree-view__node-toggle-icon--Transition);
23090
+ transform: rotate(var(--pf-c-tree-view__node-toggle-icon--Rotate));
23233
23091
  }
23234
23092
 
23235
- .pf-c-wizard__nav-list .pf-c-wizard__nav-list .pf-c-wizard__nav-link.pf-m-current {
23236
- font-weight: var(--pf-c-wizard__nav-list__nav-list__nav-link--m-current--FontWeight);
23093
+ .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
23094
+ --pf-c-tree-view__node-toggle-icon--Rotate: var(--pf-c-tree-view__node-toggle-icon--base--Rotate);
23095
+ --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--Color--base);
23237
23096
  }
23238
23097
 
23239
- .pf-c-wizard__nav-item + .pf-c-wizard__nav-item {
23240
- margin-top: var(--pf-c-wizard__nav-item--MarginTop);
23098
+ .pf-c-tree-view__list-item.pf-m-expanded {
23099
+ --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__list-item--m-expanded__node-toggle--Color);
23100
+ --pf-c-tree-view__node-toggle-icon--Rotate: var(--pf-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate);
23241
23101
  }
23242
23102
 
23243
- .pf-c-wizard__nav-item.pf-m-expandable > .pf-c-wizard__nav-link {
23103
+ .pf-c-tree-view__node,
23104
+ .pf-c-tree-view__node-container {
23105
+ flex: 1 1;
23106
+ align-items: flex-start;
23107
+ min-width: 0;
23108
+ text-align: left;
23109
+ cursor: pointer;
23110
+ border: 0;
23111
+ }
23112
+
23113
+ .pf-c-tree-view__node {
23114
+ position: relative;
23244
23115
  display: flex;
23116
+ padding: var(--pf-c-tree-view__node--PaddingTop) var(--pf-c-tree-view__node--PaddingRight) var(--pf-c-tree-view__node--PaddingBottom) var(--pf-c-tree-view__node--PaddingLeft);
23117
+ color: var(--pf-c-tree-view__node--Color);
23245
23118
  }
23246
23119
 
23247
- .pf-c-wizard__nav-item.pf-m-expandable > .pf-c-wizard__nav-list {
23248
- display: none;
23249
- visibility: hidden;
23120
+ .pf-c-tree-view__node.pf-m-current {
23121
+ --pf-c-tree-view__node--Color: var(--pf-c-tree-view__node--m-current--Color);
23122
+ font-weight: var(--pf-c-tree-view__node--m-current--FontWeight);
23250
23123
  }
23251
23124
 
23252
- .pf-c-wizard__nav-item.pf-m-expanded > .pf-c-wizard__nav-list {
23253
- display: block;
23254
- visibility: visible;
23125
+ .pf-c-tree-view__node:focus {
23126
+ background-color: var(--pf-c-tree-view__node--focus--BackgroundColor);
23255
23127
  }
23256
23128
 
23257
- .pf-c-wizard__nav-item.pf-m-expanded > .pf-c-wizard__nav-link {
23258
- --pf-c-wizard__nav-link-toggle-icon--Rotate: var(--pf-c-wizard__nav-item--m-expanded__link-toggle-icon--Rotate);
23129
+ .pf-c-tree-view__node .pf-c-tree-view__node-count {
23130
+ margin-left: var(--pf-c-tree-view__node-count--MarginLeft);
23259
23131
  }
23260
23132
 
23261
- .pf-c-wizard__nav-link {
23262
- position: relative;
23263
- display: inline-block;
23264
- width: 100%;
23265
- color: var(--pf-c-wizard__nav-link--Color);
23266
- text-align: left;
23267
- text-decoration: var(--pf-c-wizard__nav-link--TextDecoration);
23268
- word-break: break-word;
23269
- border: 0;
23133
+ .pf-c-tree-view__node .pf-c-tree-view__node-count .pf-c-badge.pf-m-read {
23134
+ --pf-c-badge--m-read--BackgroundColor: var(--pf-c-tree-view__node-count--c-badge--m-read--BackgroundColor);
23270
23135
  }
23271
23136
 
23272
- .pf-c-wizard__toggle-num, .pf-c-wizard__nav-link::before {
23273
- position: absolute;
23274
- top: var(--pf-c-wizard__nav-link--before--Top);
23275
- left: 0;
23276
- display: inline-flex;
23277
- align-items: center;
23278
- justify-content: center;
23279
- width: var(--pf-c-wizard__nav-link--before--Width);
23280
- height: var(--pf-c-wizard__nav-link--before--Height);
23281
- font-size: var(--pf-c-wizard__nav-link--before--FontSize);
23282
- line-height: 1;
23283
- color: var(--pf-c-wizard__nav-link--before--Color);
23284
- background-color: var(--pf-c-wizard__nav-link--before--BackgroundColor);
23285
- border-radius: var(--pf-c-wizard__nav-link--before--BorderRadius);
23286
- transform: translateX(var(--pf-c-wizard__nav-link--before--TranslateX));
23137
+ .pf-c-tree-view__node:not(.pf-m-selectable):hover, .pf-c-tree-view__node.pf-m-selectable .pf-c-tree-view__node-toggle:hover {
23138
+ --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--hover--Color);
23287
23139
  }
23288
23140
 
23289
- .pf-c-wizard__nav-link::before {
23290
- top: 0;
23291
- content: counter(wizard-nav-count);
23292
- counter-increment: wizard-nav-count;
23141
+ .pf-c-tree-view__node:not(.pf-m-selectable):focus, .pf-c-tree-view__node.pf-m-selectable .pf-c-tree-view__node-toggle:focus {
23142
+ --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--focus--Color);
23293
23143
  }
23294
23144
 
23295
- .pf-c-wizard__nav-link:hover {
23296
- --pf-c-wizard__nav-link--Color: var(--pf-c-wizard__nav-link--hover--Color);
23297
- --pf-c-wizard__nav-link-toggle--Color: var(--pf-c-wizard__nav-link--hover__nav-link-toggle-icon--Color);
23145
+ .pf-c-tree-view__node:not(.pf-m-selectable):active, .pf-c-tree-view__node.pf-m-selectable .pf-c-tree-view__node-toggle:active {
23146
+ --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--active--Color);
23298
23147
  }
23299
23148
 
23300
- .pf-c-wizard__nav-link:focus {
23301
- --pf-c-wizard__nav-link--Color: var(--pf-c-wizard__nav-link--focus--Color);
23302
- --pf-c-wizard__nav-link-toggle--Color: var(--pf-c-wizard__nav-link--focus__nav-link-toggle-icon--Color);
23149
+ .pf-c-tree-view__node-container {
23150
+ display: var(--pf-c-tree-view__node-container--Display);
23151
+ flex-grow: 1;
23303
23152
  }
23304
23153
 
23305
- .pf-c-wizard__nav-link.pf-m-current {
23306
- --pf-c-wizard__nav-link--Color: var(--pf-c-wizard__nav-link--m-current--Color);
23307
- font-weight: var(--pf-c-wizard__nav-link--m-current--FontWeight);
23154
+ .pf-c-tree-view__node-content {
23155
+ display: flex;
23156
+ flex-direction: column;
23157
+ overflow: var(--pf-c-tree-view__node-content--Overflow);
23308
23158
  }
23309
23159
 
23310
- .pf-c-wizard__toggle-num, .pf-c-wizard__nav-link.pf-m-current::before {
23311
- --pf-c-wizard__nav-link--before--BackgroundColor: var(--pf-c-wizard__nav-link--m-current--before--BackgroundColor);
23312
- --pf-c-wizard__nav-link--before--Color: var(--pf-c-wizard__nav-link--m-current--before--Color);
23160
+ .pf-c-tree-view__node-content > * + * {
23161
+ margin-top: var(--pf-c-tree-view__node-content--RowGap);
23313
23162
  }
23314
23163
 
23315
- .pf-c-wizard__nav-link:disabled, .pf-c-wizard__nav-link.pf-m-disabled {
23316
- --pf-c-wizard__nav-link--Color: var(--pf-c-wizard__nav-link--m-disabled--Color);
23317
- pointer-events: none;
23164
+ .pf-c-tree-view__node-check {
23165
+ margin-right: var(--pf-c-tree-view__node-check--MarginRight);
23318
23166
  }
23319
23167
 
23320
- .pf-c-wizard__nav-link:disabled::before, .pf-c-wizard__nav-link.pf-m-disabled::before {
23321
- --pf-c-wizard__nav-link--before--BackgroundColor: var(--pf-c-wizard__nav-link--m-disabled--before--BackgroundColor);
23322
- --pf-c-wizard__nav-link--before--Color: var(--pf-c-wizard__nav-link--m-disabled--before--Color);
23168
+ .pf-c-tree-view__node-toggle {
23169
+ position: var(--pf-c-tree-view__node-toggle--Position);
23170
+ top: var(--pf-c-tree-view__list-item__list-item__node-toggle--Top);
23171
+ left: var(--pf-c-tree-view__list-item__list-item__node-toggle--Left);
23172
+ display: inline-flex;
23173
+ align-items: center;
23174
+ justify-content: center;
23175
+ padding: var(--pf-c-tree-view__node-toggle-button--PaddingTop) var(--pf-c-tree-view__node-toggle-button--PaddingRight) var(--pf-c-tree-view__node-toggle-button--PaddingBottom) var(--pf-c-tree-view__node-toggle-button--PaddingLeft);
23176
+ margin-top: var(--pf-c-tree-view__node-toggle-button--MarginTop);
23177
+ margin-bottom: var(--pf-c-tree-view__node-toggle-button--MarginBottom);
23178
+ color: var(--pf-c-tree-view__node-toggle--Color);
23179
+ border: 0;
23180
+ transform: translateX(var(--pf-c-tree-view__list-item__list-item__node-toggle--TranslateX));
23181
+ }
23182
+
23183
+ .pf-c-tree-view__node-title.pf-m-truncate,
23184
+ .pf-c-tree-view__node-text.pf-m-truncate {
23185
+ --pf-c-tree-view__node-content--Overflow: hidden;
23186
+ overflow: hidden;
23187
+ text-overflow: ellipsis;
23188
+ white-space: nowrap;
23323
23189
  }
23324
23190
 
23325
- .pf-c-wizard__nav-link-text {
23326
- flex-grow: 1;
23191
+ .pf-c-tree-view.pf-m-truncate .pf-c-tree-view__node-title,
23192
+ .pf-c-tree-view.pf-m-truncate .pf-c-tree-view__node-text {
23193
+ --pf-c-tree-view__node-content--Overflow: hidden;
23194
+ overflow: hidden;
23195
+ text-overflow: ellipsis;
23196
+ white-space: nowrap;
23327
23197
  }
23328
23198
 
23329
- .pf-c-wizard__nav-link-toggle {
23330
- padding-right: var(--pf-c-wizard__nav-link-toggle--PaddingRight);
23331
- padding-left: var(--pf-c-wizard__nav-link-toggle--PaddingLeft);
23332
- color: var(--pf-c-wizard__nav-link-toggle--Color);
23199
+ .pf-c-tree-view__node-text {
23200
+ font-weight: inherit;
23201
+ color: inherit;
23202
+ text-align: left;
23203
+ border: 0;
23333
23204
  }
23334
23205
 
23335
- .pf-c-wizard__nav-link-toggle-icon {
23336
- display: inline-block;
23337
- transition: var(--pf-c-wizard__nav-link-toggle-icon--Transition);
23338
- transform: rotate(var(--pf-c-wizard__nav-link-toggle-icon--Rotate));
23206
+ label.pf-c-tree-view__node-text {
23207
+ cursor: pointer;
23339
23208
  }
23340
23209
 
23341
- .pf-c-wizard__main {
23342
- z-index: var(--pf-c-wizard__main--ZIndex);
23343
- flex: 1 1 auto;
23344
- overflow-x: hidden;
23345
- overflow-y: auto;
23346
- word-break: break-word;
23210
+ .pf-c-tree-view__node-title {
23211
+ font-weight: var(--pf-c-tree-view__node-title--FontWeight);
23347
23212
  }
23348
23213
 
23349
- .pf-c-wizard__main-body {
23350
- padding: var(--pf-c-wizard__main-body--PaddingTop) var(--pf-c-wizard__main-body--PaddingRight) var(--pf-c-wizard__main-body--PaddingBottom) var(--pf-c-wizard__main-body--PaddingLeft);
23214
+ .pf-c-tree-view__search {
23215
+ padding: var(--pf-c-tree-view__search--PaddingTop) var(--pf-c-tree-view__search--PaddingRight) var(--pf-c-tree-view__search--PaddingBottom) var(--pf-c-tree-view__search--PaddingLeft);
23351
23216
  }
23352
23217
 
23353
- .pf-c-wizard__main-body.pf-m-no-padding {
23354
- padding: 0;
23218
+ .pf-c-tree-view__node-icon {
23219
+ padding-right: var(--pf-c-tree-view__node-icon--PaddingRight);
23220
+ color: var(--pf-c-tree-view__node-icon--Color);
23355
23221
  }
23356
23222
 
23357
- .pf-c-wizard__footer {
23358
- position: relative;
23359
- z-index: var(--pf-c-wizard__footer--ZIndex);
23223
+ .pf-c-tree-view__content {
23360
23224
  display: flex;
23361
- flex-wrap: wrap;
23362
- flex-shrink: 0;
23363
- padding: var(--pf-c-wizard__footer--PaddingTop) var(--pf-c-wizard__footer--PaddingRight) var(--pf-c-wizard__footer--PaddingBottom) var(--pf-c-wizard__footer--PaddingLeft);
23364
- background-color: var(--pf-c-wizard__footer--BackgroundColor);
23225
+ align-items: center;
23365
23226
  }
23366
23227
 
23367
- .pf-c-wizard__footer > * {
23368
- margin-bottom: var(--pf-c-wizard__footer--child--MarginBottom);
23228
+ .pf-c-tree-view__content:hover,
23229
+ .pf-c-tree-view__content:focus-within {
23230
+ background-color: var(--pf-c-tree-view__node--hover--BackgroundColor);
23369
23231
  }
23370
23232
 
23371
- .pf-c-wizard__footer > *:not(:last-child) {
23372
- margin-right: var(--pf-c-wizard__footer--child--MarginRight);
23233
+ .pf-c-tree-view__action {
23234
+ margin-left: var(--pf-c-tree-view__action--MarginLeft);
23235
+ color: var(--pf-c-tree-view__action--Color);
23236
+ border: 0;
23373
23237
  }
23374
23238
 
23375
- .pf-c-page__main-wizard .pf-c-wizard__footer, .pf-c-modal-box .pf-c-wizard__footer, .pf-c-drawer > .pf-c-wizard__footer {
23376
- box-shadow: var(--pf-c-wizard__footer--BoxShadow);
23239
+ .pf-c-tree-view__action:hover {
23240
+ --pf-c-tree-view__action--Color: var(--pf-c-tree-view__action--hover--Color);
23377
23241
  }
23378
23242
 
23379
- .pf-c-wizard__footer-cancel {
23380
- margin-left: var(--pf-c-wizard__footer-cancel--MarginLeft);
23243
+ .pf-c-tree-view__action:focus {
23244
+ --pf-c-tree-view__action--Color: var(--pf-c-tree-view__action--focus--Color);
23245
+ background-color: var(--pf-c-tree-view__action--focus--BackgroundColor);
23381
23246
  }
23382
23247
 
23383
- :where(.pf-theme-dark) .pf-c-wizard__header {
23384
- --pf-global--Color--100: #e0e0e0;
23385
- --pf-global--Color--200: #aaabac;
23386
- --pf-global--BorderColor--100: #444548;
23387
- --pf-global--primary-color--100: #1fa7f8;
23388
- --pf-global--link--Color: #1fa7f8;
23389
- --pf-global--link--Color--hover: #73bcf7;
23390
- --pf-global--BackgroundColor--100: #1b1d21;
23248
+ .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
23249
+ --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
23250
+ --pf-c-tree-view__node--PaddingLeft: calc(var(--pf-c-tree-view__node--nested-indent--base) * 1 + var(--pf-c-tree-view__node--indent--base));
23251
+ --pf-c-tree-view--m-guides--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-guides--guide-left--base--offset));
23391
23252
  }
23392
23253
 
23393
- :where(.pf-theme-dark) .pf-c-wizard__header .pf-c-card {
23394
- --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
23254
+ .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
23255
+ --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
23256
+ --pf-c-tree-view__node--PaddingLeft: calc(var(--pf-c-tree-view__node--nested-indent--base) * 2 + var(--pf-c-tree-view__node--indent--base));
23257
+ --pf-c-tree-view--m-guides--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-guides--guide-left--base--offset));
23258
+ --pf-c-tree-view--m-compact__node--PaddingLeft: calc(var(--pf-c-tree-view--m-compact__node--nested-indent--base) * 1 + var(--pf-c-tree-view--m-compact__node--indent--base));
23259
+ --pf-c-tree-view--m-compact--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--base-border--Left--offset));
23260
+ --pf-c-tree-view--m-compact--m-no-background__node--PaddingLeft: calc(var(--pf-c-tree-view--m-compact--m-no-background__node--nested-indent--base) * 1 + var(--pf-c-tree-view--m-compact--m-no-background__node--indent--base));
23261
+ --pf-c-tree-view--m-compact--m-no-background--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--m-no-background--base-border--Left--offset));
23395
23262
  }
23396
23263
 
23397
- :where(.pf-theme-dark) .pf-c-wizard__header .pf-c-button {
23398
- --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
23399
- --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
23400
- --pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
23401
- --pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100);
23402
- --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
23403
- --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
23404
- --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
23405
- --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
23406
- --pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
23407
- --pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
23408
- --pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
23409
- --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
23264
+ .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
23265
+ --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
23266
+ --pf-c-tree-view__node--PaddingLeft: calc(var(--pf-c-tree-view__node--nested-indent--base) * 3 + var(--pf-c-tree-view__node--indent--base));
23267
+ --pf-c-tree-view--m-guides--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-guides--guide-left--base--offset));
23268
+ --pf-c-tree-view--m-compact__node--PaddingLeft: calc(var(--pf-c-tree-view--m-compact__node--nested-indent--base) * 2 + var(--pf-c-tree-view--m-compact__node--indent--base));
23269
+ --pf-c-tree-view--m-compact--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--base-border--Left--offset));
23270
+ --pf-c-tree-view--m-compact--m-no-background__node--PaddingLeft: calc(var(--pf-c-tree-view--m-compact--m-no-background__node--nested-indent--base) * 2 + var(--pf-c-tree-view--m-compact--m-no-background__node--indent--base));
23271
+ --pf-c-tree-view--m-compact--m-no-background--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--m-no-background--base-border--Left--offset));
23410
23272
  }
23411
23273
 
23412
- :where(.pf-theme-dark) .pf-c-wizard {
23413
- --pf-c-wizard__header--BackgroundColor: var(--pf-global--palette--black-1000);
23414
- --pf-c-wizard__nav-link--before--BackgroundColor: var(--pf-global--palette--black-500);
23415
- --pf-c-wizard__nav-link--m-disabled--Color: var(--pf-global--disabled-color--300);
23416
- --pf-c-wizard__nav-link--m-disabled--before--Color: var(--pf-global--disabled-color--300);
23274
+ .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
23275
+ --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
23276
+ --pf-c-tree-view__node--PaddingLeft: calc(var(--pf-c-tree-view__node--nested-indent--base) * 4 + var(--pf-c-tree-view__node--indent--base));
23277
+ --pf-c-tree-view--m-guides--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-guides--guide-left--base--offset));
23278
+ --pf-c-tree-view--m-compact__node--PaddingLeft: calc(var(--pf-c-tree-view--m-compact__node--nested-indent--base) * 3 + var(--pf-c-tree-view--m-compact__node--indent--base));
23279
+ --pf-c-tree-view--m-compact--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--base-border--Left--offset));
23280
+ --pf-c-tree-view--m-compact--m-no-background__node--PaddingLeft: calc(var(--pf-c-tree-view--m-compact--m-no-background__node--nested-indent--base) * 3 + var(--pf-c-tree-view--m-compact--m-no-background__node--indent--base));
23281
+ --pf-c-tree-view--m-compact--m-no-background--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--m-no-background--base-border--Left--offset));
23417
23282
  }
23418
23283
 
23419
- :where(.pf-theme-dark) .pf-c-wizard__header {
23420
- color: var(--pf-global--Color--100);
23284
+ .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
23285
+ --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
23286
+ --pf-c-tree-view__node--PaddingLeft: calc(var(--pf-c-tree-view__node--nested-indent--base) * 5 + var(--pf-c-tree-view__node--indent--base));
23287
+ --pf-c-tree-view--m-guides--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-guides--guide-left--base--offset));
23288
+ --pf-c-tree-view--m-compact__node--PaddingLeft: calc(var(--pf-c-tree-view--m-compact__node--nested-indent--base) * 4 + var(--pf-c-tree-view--m-compact__node--indent--base));
23289
+ --pf-c-tree-view--m-compact--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--base-border--Left--offset));
23290
+ --pf-c-tree-view--m-compact--m-no-background__node--PaddingLeft: calc(var(--pf-c-tree-view--m-compact--m-no-background__node--nested-indent--base) * 4 + var(--pf-c-tree-view--m-compact--m-no-background__node--indent--base));
23291
+ --pf-c-tree-view--m-compact--m-no-background--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--m-no-background--base-border--Left--offset));
23421
23292
  }
23422
23293
 
23423
- .pf-c-tree-view {
23424
- --pf-c-tree-view--PaddingTop: var(--pf-global--spacer--sm);
23425
- --pf-c-tree-view--PaddingBottom: var(--pf-global--spacer--sm);
23426
- --pf-c-tree-view__node--indent--base: calc(var(--pf-global--spacer--md) * 2 + var(--pf-c-tree-view__node-toggle-icon--MinWidth));
23427
- --pf-c-tree-view__node--nested-indent--base: calc(var(--pf-c-tree-view__node--indent--base) - var(--pf-global--spacer--md));
23428
- --pf-c-tree-view__node--PaddingTop--base: var(--pf-global--spacer--sm);
23429
- --pf-c-tree-view__node--PaddingTop: var(--pf-c-tree-view__node--PaddingTop--base);
23430
- --pf-c-tree-view__node--PaddingRight: var(--pf-global--spacer--sm);
23431
- --pf-c-tree-view__node--PaddingBottom: var(--pf-global--spacer--sm);
23432
- --pf-c-tree-view__node--PaddingLeft: var(--pf-c-tree-view__node--indent--base);
23433
- --pf-c-tree-view__node--Color: var(--pf-global--Color--100);
23434
- --pf-c-tree-view__node--m-current--Color: var(--pf-global--link--Color);
23435
- --pf-c-tree-view__node--m-current--FontWeight: var(--pf-global--FontWeight--bold);
23436
- --pf-c-tree-view__node-container--Display: contents;
23437
- --pf-c-tree-view__node-content--RowGap: var(--pf-global--spacer--sm);
23438
- --pf-c-tree-view__node-content--Overflow: visible;
23439
- --pf-c-tree-view__node--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
23440
- --pf-c-tree-view__node--focus--BackgroundColor: var(--pf-global--palette--black-200);
23441
- --pf-c-tree-view__list-item__list-item__node-toggle--Top: var(--pf-c-tree-view__node--PaddingTop--base);
23294
+ .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
23442
23295
  --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
23443
- --pf-c-tree-view__list-item__list-item__node-toggle--TranslateX: -100%;
23444
- --pf-c-tree-view__node-toggle--Position: absolute;
23445
- --pf-c-tree-view__node-toggle--Color--base: var(--pf-global--Color--200);
23446
- --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--Color--base);
23447
- --pf-c-tree-view__node-toggle--hover--Color: var(--pf-global--Color--100);
23448
- --pf-c-tree-view__node-toggle--focus--Color: var(--pf-global--Color--100);
23449
- --pf-c-tree-view__node-toggle--active--Color: var(--pf-global--Color--100);
23450
- --pf-c-tree-view__list-item--m-expanded__node-toggle--Color: var(--pf-global--Color--100);
23451
- --pf-c-tree-view__node-toggle-icon--MinWidth: var(--pf-global--FontSize--md);
23452
- --pf-c-tree-view__node-toggle-icon--Transition: transform var(--pf-global--TransitionDuration) var(--pf-global--TimingFunction);
23453
- --pf-c-tree-view__node-toggle-button--PaddingTop: var(--pf-global--spacer--form-element);
23454
- --pf-c-tree-view__node-toggle-button--PaddingRight: var(--pf-global--spacer--md);
23455
- --pf-c-tree-view__node-toggle-button--PaddingBottom: var(--pf-global--spacer--form-element);
23456
- --pf-c-tree-view__node-toggle-button--PaddingLeft: var(--pf-global--spacer--md);
23457
- --pf-c-tree-view__node-toggle-button--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
23458
- --pf-c-tree-view__node-toggle-button--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
23459
- --pf-c-tree-view__node-check--MarginRight: var(--pf-global--spacer--sm);
23460
- --pf-c-tree-view__node-count--MarginLeft: var(--pf-global--spacer--sm);
23461
- --pf-c-tree-view__node-count--c-badge--m-read--BackgroundColor: var(--pf-global--disabled-color--200);
23462
- --pf-c-tree-view__search--PaddingTop: var(--pf-global--spacer--sm);
23463
- --pf-c-tree-view__search--PaddingRight: var(--pf-global--spacer--sm);
23464
- --pf-c-tree-view__search--PaddingBottom: var(--pf-global--spacer--sm);
23465
- --pf-c-tree-view__search--PaddingLeft: var(--pf-global--spacer--sm);
23466
- --pf-c-tree-view__node-icon--PaddingRight: var(--pf-global--spacer--sm);
23467
- --pf-c-tree-view__node-icon--Color: var(--pf-global--icon--Color--light);
23468
- --pf-c-tree-view__node-toggle-icon--base--Rotate: 0;
23469
- --pf-c-tree-view__node-toggle-icon--Rotate: var(--pf-c-tree-view__node-toggle-icon--base--Rotate);
23470
- --pf-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate: 90deg;
23471
- --pf-c-tree-view__node-text--max-lines: 1;
23472
- --pf-c-tree-view__node-title--FontWeight: var(--pf-global--FontWeight--bold);
23473
- --pf-c-tree-view__action--MarginLeft: var(--pf-global--spacer--md);
23474
- --pf-c-tree-view__action--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
23475
- --pf-c-tree-view__action--Color: var(--pf-global--icon--Color--light);
23476
- --pf-c-tree-view__action--hover--Color: var(--pf-global--icon--Color--dark);
23477
- --pf-c-tree-view__action--focus--Color: var(--pf-global--icon--Color--dark);
23478
- --pf-c-tree-view--m-guides--guide--Left: var(--pf-c-tree-view--m-guides--guide-left--base);
23479
- --pf-c-tree-view--m-guides--guide-color--base: var(--pf-global--BorderColor--100);
23480
- --pf-c-tree-view--m-guides--guide-width--base: var(--pf-global--BorderWidth--sm);
23481
- --pf-c-tree-view--m-guides--guide-left--base: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-guides__list-node--guide-width--base));
23482
- --pf-c-tree-view--m-guides--guide-left--base--offset: calc(var(--pf-c-tree-view__list-item__list-item__node-toggle--Left) + var(--pf-c-tree-view__node-toggle-icon--MinWidth) / 2);
23483
- --pf-c-tree-view--m-guides__list-node--guide-width--base: var(--pf-global--spacer--lg);
23484
- --pf-c-tree-view--m-guides__list-item--before--Top: 0;
23485
- --pf-c-tree-view--m-guides__list-item--before--Width: var(--pf-c-tree-view--m-guides--guide-width--base);
23486
- --pf-c-tree-view--m-guides__list-item--before--Height: 100%;
23487
- --pf-c-tree-view--m-guides__list-item--before--BackgroundColor: var(--pf-c-tree-view--m-guides--guide-color--base);
23488
- --pf-c-tree-view--m-guides__list-item--last-child--before--Top: var(--pf-c-tree-view--m-guides__node--before--Top);
23489
- --pf-c-tree-view--m-guides__list-item--last-child--before--Height: var(--pf-c-tree-view--m-guides__list-item--last-child--before--Top);
23490
- --pf-c-tree-view--m-guides__list-item--ZIndex: var(--pf-global--ZIndex--xs);
23491
- --pf-c-tree-view--m-guides__node--before--Width: 1rem;
23492
- --pf-c-tree-view--m-guides__node--before--Height: var(--pf-c-tree-view--m-guides--guide-width--base);
23493
- --pf-c-tree-view--m-guides__node--before--Top: 1.125rem;
23494
- --pf-c-tree-view--m-guides__node--before--BackgroundColor: var(--pf-c-tree-view--m-guides--guide-color--base);
23495
- --pf-c-tree-view--m-compact--base-border--Left--offset: var(--pf-global--spacer--md);
23496
- --pf-c-tree-view--m-compact--base-border--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--base-border--Left--offset));
23497
- --pf-c-tree-view--m-compact__node--indent--base: var(--pf-c-tree-view__node--indent--base);
23498
- --pf-c-tree-view--m-compact__node--nested-indent--base: var(--pf-global--spacer--lg);
23499
- --pf-c-tree-view--m-compact--border--Left: var(--pf-c-tree-view--m-compact--base-border--Left);
23500
- --pf-c-tree-view--m-compact__node--PaddingTop: 0;
23501
- --pf-c-tree-view--m-compact__node--PaddingBottom: 0;
23502
- --pf-c-tree-view--m-compact__node--nested--PaddingTop: var(--pf-global--spacer--sm);
23503
- --pf-c-tree-view--m-compact__node--nested--PaddingBottom: var(--pf-global--spacer--sm);
23504
- --pf-c-tree-view--m-compact__list-item__list-item__node-toggle--Top: calc(var(--pf-c-tree-view--m-compact__node-container--PaddingTop));
23505
- --pf-c-tree-view--m-compact__list-item--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
23506
- --pf-c-tree-view--m-compact__list-item--BorderBottomColor: var(--pf-global--BorderColor--100);
23507
- --pf-c-tree-view--m-compact__list-item--before--Top: 0;
23508
- --pf-c-tree-view--m-compact__list-item--last-child--before--Height: var(--pf-c-tree-view--m-compact__node--before--Top);
23509
- --pf-c-tree-view--m-compact__list-item--nested--before--Top: calc(var(--pf-c-tree-view__node--PaddingTop--base) * -1);
23510
- --pf-c-tree-view--m-compact__list-item--nested--last-child--before--Height: calc(var(--pf-c-tree-view--m-compact__node--before--Top) + var(--pf-c-tree-view__node--PaddingTop--base));
23511
- --pf-c-tree-view--m-compact__node--PaddingLeft: var(--pf-c-tree-view--m-compact__node--indent--base);
23512
- --pf-c-tree-view--m-compact__node--before--Top: calc(var(--pf-c-tree-view--m-compact__node-container--PaddingTop) + var(--pf-c-tree-view--m-compact__node--nested--PaddingTop) + 0.25rem);
23513
- --pf-c-tree-view--m-compact__node--level-2--PaddingLeft: var(--pf-c-tree-view--m-compact__node--indent--base);
23514
- --pf-c-tree-view--m-compact__node-toggle--nested--MarginRight: calc(var(--pf-c-tree-view__node-toggle-button--PaddingLeft) * -.5);
23515
- --pf-c-tree-view--m-compact__node-toggle--nested--MarginLeft: calc(var(--pf-c-tree-view__node-toggle-button--PaddingLeft) * -1.5);
23516
- --pf-c-tree-view--m-compact__node-container--Display: flex;
23517
- --pf-c-tree-view--m-compact__node-container--PaddingBottom--base: var(--pf-global--spacer--lg);
23518
- --pf-c-tree-view--m-compact__node-container--PaddingTop: var(--pf-global--spacer--lg);
23519
- --pf-c-tree-view--m-compact__node-container--PaddingRight: var(--pf-global--spacer--lg);
23520
- --pf-c-tree-view--m-compact__node-container--PaddingBottom: var(--pf-c-tree-view--m-compact__node-container--PaddingBottom--base);
23521
- --pf-c-tree-view--m-compact__node-container--PaddingLeft: var(--pf-global--spacer--xs);
23522
- --pf-c-tree-view--m-compact__node-container--nested--PaddingTop: var(--pf-global--spacer--md);
23523
- --pf-c-tree-view--m-compact__node-container--nested--PaddingRight: var(--pf-global--spacer--lg);
23524
- --pf-c-tree-view--m-compact__node-container--nested--PaddingBottom: var(--pf-global--spacer--md);
23525
- --pf-c-tree-view--m-compact__node-container--nested--PaddingLeft: var(--pf-global--spacer--lg);
23526
- --pf-c-tree-view--m-compact__node-container--nested--BackgroundColor: var(--pf-global--BackgroundColor--200);
23527
- --pf-c-tree-view--m-compact__list-item--m-expanded__node-container--PaddingBottom: 0;
23528
- --pf-c-tree-view--m-no-background__node-container--BackgroundColor: transparent;
23529
- --pf-c-tree-view--m-compact--m-no-background--base-border--Left--offset: var(--pf-global--spacer--sm);
23530
- --pf-c-tree-view--m-compact--m-no-background--base-border--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--m-no-background--base-border--Left--offset));
23531
- --pf-c-tree-view--m-compact--m-no-background__node--indent--base: var(--pf-c-tree-view__node--indent--base);
23532
- --pf-c-tree-view--m-compact--m-no-background__node--nested-indent--base: var(--pf-global--spacer--2xl);
23533
- --pf-c-tree-view--m-compact--m-no-background__node--nested--PaddingTop: 0;
23534
- --pf-c-tree-view--m-compact--m-no-background__node--nested--PaddingBottom: 0;
23535
- --pf-c-tree-view--m-compact--m-no-background__node--before--Top: calc(var(--pf-c-tree-view--m-compact__node-container--nested--PaddingTop) + var(--pf-c-tree-view--m-compact__node--nested--PaddingTop) + 0.25rem);
23536
- padding-top: var(--pf-c-tree-view--PaddingTop);
23537
- padding-bottom: var(--pf-c-tree-view--PaddingBottom);
23296
+ --pf-c-tree-view__node--PaddingLeft: calc(var(--pf-c-tree-view__node--nested-indent--base) * 6 + var(--pf-c-tree-view__node--indent--base));
23297
+ --pf-c-tree-view--m-guides--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-guides--guide-left--base--offset));
23298
+ --pf-c-tree-view--m-compact__node--PaddingLeft: calc(var(--pf-c-tree-view--m-compact__node--nested-indent--base) * 5 + var(--pf-c-tree-view--m-compact__node--indent--base));
23299
+ --pf-c-tree-view--m-compact--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--base-border--Left--offset));
23300
+ --pf-c-tree-view--m-compact--m-no-background__node--PaddingLeft: calc(var(--pf-c-tree-view--m-compact--m-no-background__node--nested-indent--base) * 5 + var(--pf-c-tree-view--m-compact--m-no-background__node--indent--base));
23301
+ --pf-c-tree-view--m-compact--m-no-background--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--m-no-background--base-border--Left--offset));
23538
23302
  }
23539
23303
 
23540
- .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item, .pf-c-tree-view.pf-m-guides .pf-c-tree-view__list-item {
23541
- position: relative;
23304
+ .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
23305
+ --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
23306
+ --pf-c-tree-view__node--PaddingLeft: calc(var(--pf-c-tree-view__node--nested-indent--base) * 7 + var(--pf-c-tree-view__node--indent--base));
23307
+ --pf-c-tree-view--m-guides--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-guides--guide-left--base--offset));
23308
+ --pf-c-tree-view--m-compact__node--PaddingLeft: calc(var(--pf-c-tree-view--m-compact__node--nested-indent--base) * 6 + var(--pf-c-tree-view--m-compact__node--indent--base));
23309
+ --pf-c-tree-view--m-compact--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--base-border--Left--offset));
23310
+ --pf-c-tree-view--m-compact--m-no-background__node--PaddingLeft: calc(var(--pf-c-tree-view--m-compact--m-no-background__node--nested-indent--base) * 6 + var(--pf-c-tree-view--m-compact--m-no-background__node--indent--base));
23311
+ --pf-c-tree-view--m-compact--m-no-background--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--m-no-background--base-border--Left--offset));
23542
23312
  }
23543
23313
 
23544
- .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item::before,
23545
- .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__node::before, .pf-c-tree-view.pf-m-guides .pf-c-tree-view__list-item .pf-c-tree-view__list-item::before,
23546
- .pf-c-tree-view.pf-m-guides .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__node::before {
23547
- position: absolute;
23548
- left: var(--pf-c-tree-view--m-guides--guide--Left);
23549
- content: "";
23314
+ .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
23315
+ --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
23316
+ --pf-c-tree-view__node--PaddingLeft: calc(var(--pf-c-tree-view__node--nested-indent--base) * 8 + var(--pf-c-tree-view__node--indent--base));
23317
+ --pf-c-tree-view--m-guides--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-guides--guide-left--base--offset));
23318
+ --pf-c-tree-view--m-compact__node--PaddingLeft: calc(var(--pf-c-tree-view--m-compact__node--nested-indent--base) * 7 + var(--pf-c-tree-view--m-compact__node--indent--base));
23319
+ --pf-c-tree-view--m-compact--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--base-border--Left--offset));
23320
+ --pf-c-tree-view--m-compact--m-no-background__node--PaddingLeft: calc(var(--pf-c-tree-view--m-compact--m-no-background__node--nested-indent--base) * 7 + var(--pf-c-tree-view--m-compact--m-no-background__node--indent--base));
23321
+ --pf-c-tree-view--m-compact--m-no-background--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--m-no-background--base-border--Left--offset));
23550
23322
  }
23551
23323
 
23552
- .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item::before, .pf-c-tree-view.pf-m-guides .pf-c-tree-view__list-item .pf-c-tree-view__list-item::before {
23553
- top: var(--pf-c-tree-view--m-guides__list-item--before--Top);
23554
- z-index: var(--pf-c-tree-view--m-guides__list-item--ZIndex);
23555
- width: var(--pf-c-tree-view--m-guides__list-item--before--Width);
23556
- height: var(--pf-c-tree-view--m-guides__list-item--before--Height);
23557
- background-color: var(--pf-c-tree-view--m-guides__list-item--before--BackgroundColor);
23324
+ .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
23325
+ --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
23326
+ --pf-c-tree-view__node--PaddingLeft: calc(var(--pf-c-tree-view__node--nested-indent--base) * 9 + var(--pf-c-tree-view__node--indent--base));
23327
+ --pf-c-tree-view--m-guides--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-guides--guide-left--base--offset));
23328
+ --pf-c-tree-view--m-compact__node--PaddingLeft: calc(var(--pf-c-tree-view--m-compact__node--nested-indent--base) * 8 + var(--pf-c-tree-view--m-compact__node--indent--base));
23329
+ --pf-c-tree-view--m-compact--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--base-border--Left--offset));
23330
+ --pf-c-tree-view--m-compact--m-no-background__node--PaddingLeft: calc(var(--pf-c-tree-view--m-compact--m-no-background__node--nested-indent--base) * 8 + var(--pf-c-tree-view--m-compact--m-no-background__node--indent--base));
23331
+ --pf-c-tree-view--m-compact--m-no-background--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--m-no-background--base-border--Left--offset));
23558
23332
  }
23559
23333
 
23560
- .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__node::before, .pf-c-tree-view.pf-m-guides .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__node::before {
23561
- top: var(--pf-c-tree-view--m-guides__node--before--Top);
23562
- width: var(--pf-c-tree-view--m-guides__node--before--Width);
23563
- height: var(--pf-c-tree-view--m-guides__node--before--Height);
23564
- background-color: var(--pf-c-tree-view--m-guides__node--before--BackgroundColor);
23334
+ .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
23335
+ --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
23336
+ --pf-c-tree-view__node--PaddingLeft: calc(var(--pf-c-tree-view__node--nested-indent--base) * 10 + var(--pf-c-tree-view__node--indent--base));
23337
+ --pf-c-tree-view--m-guides--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-guides--guide-left--base--offset));
23338
+ --pf-c-tree-view--m-compact__node--PaddingLeft: calc(var(--pf-c-tree-view--m-compact__node--nested-indent--base) * 9 + var(--pf-c-tree-view--m-compact__node--indent--base));
23339
+ --pf-c-tree-view--m-compact--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--base-border--Left--offset));
23340
+ --pf-c-tree-view--m-compact--m-no-background__node--PaddingLeft: calc(var(--pf-c-tree-view--m-compact--m-no-background__node--nested-indent--base) * 9 + var(--pf-c-tree-view--m-compact--m-no-background__node--indent--base));
23341
+ --pf-c-tree-view--m-compact--m-no-background--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--m-no-background--base-border--Left--offset));
23565
23342
  }
23566
23343
 
23567
- .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item:last-child::before, .pf-c-tree-view.pf-m-guides .pf-c-tree-view__list-item .pf-c-tree-view__list-item:last-child::before {
23568
- height: var(--pf-c-tree-view--m-guides__list-item--last-child--before--Height);
23344
+ :where(.pf-theme-dark) .pf-c-tree-view {
23345
+ --pf-c-tree-view__node--hover--BackgroundColor: var(--pf-global--BackgroundColor--300);
23346
+ --pf-c-tree-view__node--focus--BackgroundColor: var(--pf-global--BackgroundColor--300);
23569
23347
  }
23570
23348
 
23571
- .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item, .pf-c-tree-view.pf-m-guides .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
23572
- --pf-c-tree-view--m-guides--guide--Left: var(--pf-c-tree-view--m-guides--border--nested--Left);
23349
+ .pf-c-wizard__header {
23350
+ --pf-global--Color--100: var(--pf-global--Color--light-100);
23351
+ --pf-global--Color--200: var(--pf-global--Color--light-200);
23352
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
23353
+ --pf-global--primary-color--100: var(--pf-global--primary-color--light-100);
23354
+ --pf-global--link--Color: var(--pf-global--link--Color--light);
23355
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
23356
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
23357
+ }
23358
+
23359
+ .pf-c-wizard__header .pf-c-card {
23360
+ --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
23361
+ }
23362
+
23363
+ .pf-c-wizard__header .pf-c-button {
23364
+ --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
23365
+ --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
23366
+ --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
23367
+ --pf-c-button--m-primary--active--Color: var(--pf-global--primary-color--dark-100);
23368
+ --pf-c-button--m-primary--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
23369
+ --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
23370
+ --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
23371
+ --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
23372
+ --pf-c-button--m-secondary--Color: var(--pf-global--Color--light-100);
23373
+ --pf-c-button--m-secondary--hover--Color: var(--pf-global--Color--light-100);
23374
+ --pf-c-button--m-secondary--focus--Color: var(--pf-global--Color--light-100);
23375
+ --pf-c-button--m-secondary--active--Color: var(--pf-global--Color--light-100);
23376
+ --pf-c-button--m-secondary--BorderColor: var(--pf-global--Color--light-100);
23377
+ --pf-c-button--m-secondary--hover--BorderColor: var(--pf-global--Color--light-100);
23378
+ --pf-c-button--m-secondary--focus--BorderColor: var(--pf-global--Color--light-100);
23379
+ --pf-c-button--m-secondary--active--BorderColor: var(--pf-global--Color--light-100);
23380
+ }
23381
+
23382
+ .pf-c-wizard {
23383
+ --pf-c-wizard--Height: 100%;
23384
+ --pf-c-modal-box--c-wizard--FlexBasis: 47.625rem;
23385
+ --pf-c-wizard__header--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
23386
+ --pf-c-wizard__header--ZIndex: var(--pf-global--ZIndex--md);
23387
+ --pf-c-wizard__header--PaddingTop: var(--pf-global--spacer--lg);
23388
+ --pf-c-wizard__header--PaddingRight: var(--pf-global--spacer--md);
23389
+ --pf-c-wizard__header--PaddingBottom: var(--pf-global--spacer--lg);
23390
+ --pf-c-wizard__header--PaddingLeft: var(--pf-global--spacer--md);
23391
+ --pf-c-wizard__header--lg--PaddingRight: var(--pf-global--spacer--md);
23392
+ --pf-c-wizard__header--lg--PaddingLeft: var(--pf-global--spacer--md);
23393
+ --pf-c-wizard__header--xl--PaddingRight: var(--pf-global--spacer--lg);
23394
+ --pf-c-wizard__header--xl--PaddingLeft: var(--pf-global--spacer--lg);
23395
+ --pf-c-wizard__close--Top: calc(var(--pf-global--spacer--lg) - var(--pf-global--spacer--form-element));
23396
+ --pf-c-wizard__close--Right: 0;
23397
+ --pf-c-wizard__close--xl--Right: var(--pf-global--spacer--lg);
23398
+ --pf-c-wizard__close--FontSize: var(--pf-global--FontSize--xl);
23399
+ --pf-c-wizard__title--PaddingRight: var(--pf-global--spacer--2xl);
23400
+ --pf-c-wizard__description--PaddingTop: var(--pf-global--spacer--sm);
23401
+ --pf-c-wizard__description--Color: var(--pf-global--Color--light-200);
23402
+ --pf-c-wizard__nav-link--Color: var(--pf-global--Color--100);
23403
+ --pf-c-wizard__nav-link--TextDecoration: var(--pf-global--link--TextDecoration);
23404
+ --pf-c-wizard__nav-link--hover--Color: var(--pf-global--link--Color);
23405
+ --pf-c-wizard__nav-link--focus--Color: var(--pf-global--link--Color);
23406
+ --pf-c-wizard__nav-link--m-current--Color: var(--pf-global--link--Color);
23407
+ --pf-c-wizard__nav-link--m-current--FontWeight: var(--pf-global--FontWeight--normal);
23408
+ --pf-c-wizard__nav-link--m-disabled--Color: var(--pf-global--Color--dark-200);
23409
+ --pf-c-wizard__nav-list__nav-list__nav-link--m-current--FontWeight: var(--pf-global--FontWeight--normal);
23410
+ --pf-c-wizard__nav-link-toggle--PaddingRight: var(--pf-global--spacer--sm);
23411
+ --pf-c-wizard__nav-link-toggle--PaddingLeft: var(--pf-global--spacer--sm);
23412
+ --pf-c-wizard__nav-link-toggle--Color: var(--pf-global--Color--200);
23413
+ --pf-c-wizard__nav-link--hover__nav-link-toggle-icon--Color: var(--pf-global--Color--100);
23414
+ --pf-c-wizard__nav-link--focus__nav-link-toggle-icon--Color: var(--pf-global--Color--100);
23415
+ --pf-c-wizard__nav-link-toggle-icon--Transition: var(--pf-global--Transition);
23416
+ --pf-c-wizard__nav-link-toggle-icon--Rotate: 0;
23417
+ --pf-c-wizard__nav-item--m-expanded__link-toggle-icon--Rotate: 90deg;
23418
+ --pf-c-wizard__nav-link--before--Width: 1.5rem;
23419
+ --pf-c-wizard__nav-link--before--Height: 1.5rem;
23420
+ --pf-c-wizard__nav-link--before--Top: 0;
23421
+ --pf-c-wizard__nav-link--before--BackgroundColor: var(--pf-global--BackgroundColor--200);
23422
+ --pf-c-wizard__nav-link--before--BorderRadius: var(--pf-global--BorderRadius--lg);
23423
+ --pf-c-wizard__nav-link--before--Color: var(--pf-global--Color--100);
23424
+ --pf-c-wizard__nav-link--before--FontSize: var(--pf-global--FontSize--sm);
23425
+ --pf-c-wizard__nav-link--before--TranslateX: calc(-100% - var(--pf-global--spacer--sm));
23426
+ --pf-c-wizard__nav-link--m-current--before--BackgroundColor: var(--pf-global--active-color--100);
23427
+ --pf-c-wizard__nav-link--m-current--before--Color: var(--pf-global--Color--light-100);
23428
+ --pf-c-wizard__nav-link--m-disabled--before--BackgroundColor: transparent;
23429
+ --pf-c-wizard__nav-link--m-disabled--before--Color: var(--pf-global--Color--dark-200);
23430
+ --pf-c-wizard__toggle--BackgroundColor: var(--pf-global--BackgroundColor--100);
23431
+ --pf-c-wizard__toggle--ZIndex: var(--pf-global--ZIndex--md);
23432
+ --pf-c-wizard__toggle--BoxShadow: var(--pf-global--BoxShadow--md-bottom);
23433
+ --pf-c-wizard__toggle--PaddingTop: var(--pf-global--spacer--lg);
23434
+ --pf-c-wizard__toggle--PaddingRight: var(--pf-global--spacer--md);
23435
+ --pf-c-wizard__toggle--PaddingBottom: var(--pf-global--spacer--lg);
23436
+ --pf-c-wizard__toggle--PaddingLeft: calc(var(--pf-global--spacer--md) + var(--pf-c-wizard__nav-link--before--Width) + var(--pf-global--spacer--sm));
23437
+ --pf-c-wizard__toggle--m-expanded--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
23438
+ --pf-c-wizard__toggle--m-expanded--BorderBottomColor: var(--pf-global--BorderColor--100);
23439
+ --pf-c-wizard--m-in-page__toggle--xl--PaddingLeft: calc(var(--pf-global--spacer--xl) + var(--pf-c-wizard__nav-link--before--Width) + var(--pf-global--spacer--sm));
23440
+ --pf-c-wizard__toggle-num--before--Top: 0;
23441
+ --pf-c-wizard__toggle-list-item--not-last-child--MarginRight: var(--pf-global--spacer--sm);
23442
+ --pf-c-wizard__toggle-list-item--MarginBottom: var(--pf-global--spacer--xs);
23443
+ --pf-c-wizard__toggle-list--MarginRight: var(--pf-global--spacer--sm);
23444
+ --pf-c-wizard__toggle-list--MarginBottom: calc(var(--pf-c-wizard__toggle-list-item--MarginBottom) * -1);
23445
+ --pf-c-wizard__toggle-separator--MarginLeft: var(--pf-global--spacer--sm);
23446
+ --pf-c-wizard__toggle-separator--Color: var(--pf-global--BorderColor--200);
23447
+ --pf-c-wizard__toggle-icon--LineHeight: var(--pf-global--LineHeight--md);
23448
+ --pf-c-wizard__toggle--m-expanded__toggle-icon--Rotate: 180deg;
23449
+ --pf-c-wizard__nav--ZIndex: var(--pf-global--ZIndex--sm);
23450
+ --pf-c-wizard__nav--BackgroundColor: var(--pf-global--BackgroundColor--100);
23451
+ --pf-c-wizard__nav--BoxShadow: var(--pf-global--BoxShadow--md-bottom);
23452
+ --pf-c-wizard__nav--Width: 100%;
23453
+ --pf-c-wizard__nav--lg--Width: 15.625rem;
23454
+ --pf-c-wizard__nav--lg--BorderRightWidth: var(--pf-global--BorderWidth--sm);
23455
+ --pf-c-wizard__nav--lg--BorderRightColor: var(--pf-global--BorderColor--100);
23456
+ --pf-c-wizard__nav-list--PaddingTop: var(--pf-global--spacer--lg);
23457
+ --pf-c-wizard__nav-list--PaddingRight: var(--pf-global--spacer--md);
23458
+ --pf-c-wizard__nav-list--PaddingBottom: var(--pf-global--spacer--lg);
23459
+ --pf-c-wizard__nav-list--PaddingLeft: calc(var(--pf-global--spacer--md) + var(--pf-c-wizard__nav-link--before--Width) + var(--pf-global--spacer--sm));
23460
+ --pf-c-wizard__nav-list--lg--PaddingTop: var(--pf-global--spacer--md);
23461
+ --pf-c-wizard__nav-list--lg--PaddingRight: var(--pf-global--spacer--md);
23462
+ --pf-c-wizard__nav-list--lg--PaddingBottom: var(--pf-global--spacer--md);
23463
+ --pf-c-wizard__nav-list--xl--PaddingTop: var(--pf-global--spacer--lg);
23464
+ --pf-c-wizard__nav-list--xl--PaddingRight: var(--pf-global--spacer--lg);
23465
+ --pf-c-wizard__nav-list--xl--PaddingBottom: var(--pf-global--spacer--lg);
23466
+ --pf-c-wizard__nav-list--xl--PaddingLeft: calc(var(--pf-global--spacer--lg) + var(--pf-c-wizard__nav-link--before--Width) + var(--pf-global--spacer--sm));
23467
+ --pf-c-wizard__nav-list--nested--MarginLeft: var(--pf-global--spacer--md);
23468
+ --pf-c-wizard__nav-list--nested--MarginTop: var(--pf-global--spacer--md);
23469
+ --pf-c-wizard__nav-item--MarginTop: var(--pf-global--spacer--md);
23470
+ --pf-c-wizard__outer-wrap--BackgroundColor: var(--pf-global--BackgroundColor--100);
23471
+ --pf-c-wizard__outer-wrap--lg--PaddingLeft: var(--pf-c-wizard__nav--Width);
23472
+ --pf-c-wizard__outer-wrap--MinHeight: 15.625rem;
23473
+ --pf-c-wizard__main--ZIndex: var(--pf-global--ZIndex--xs);
23474
+ --pf-c-wizard__main-body--PaddingTop: var(--pf-global--spacer--md);
23475
+ --pf-c-wizard__main-body--PaddingRight: var(--pf-global--spacer--md);
23476
+ --pf-c-wizard__main-body--PaddingBottom: var(--pf-global--spacer--md);
23477
+ --pf-c-wizard__main-body--PaddingLeft: var(--pf-global--spacer--md);
23478
+ --pf-c-wizard__main-body--xl--PaddingTop: var(--pf-global--spacer--lg);
23479
+ --pf-c-wizard__main-body--xl--PaddingRight: var(--pf-global--spacer--lg);
23480
+ --pf-c-wizard__main-body--xl--PaddingBottom: var(--pf-global--spacer--lg);
23481
+ --pf-c-wizard__main-body--xl--PaddingLeft: var(--pf-global--spacer--lg);
23482
+ --pf-c-wizard__footer--BackgroundColor: var(--pf-global--BackgroundColor--100);
23483
+ --pf-c-wizard__footer--ZIndex: var(--pf-global--ZIndex--sm);
23484
+ --pf-c-wizard__footer--PaddingTop: var(--pf-global--spacer--md);
23485
+ --pf-c-wizard__footer--PaddingRight: var(--pf-global--spacer--md);
23486
+ --pf-c-wizard__footer--PaddingBottom: var(--pf-global--spacer--sm);
23487
+ --pf-c-wizard__footer--PaddingLeft: var(--pf-global--spacer--md);
23488
+ --pf-c-wizard__footer--xl--PaddingTop: var(--pf-global--spacer--lg);
23489
+ --pf-c-wizard__footer--xl--PaddingRight: var(--pf-global--spacer--lg);
23490
+ --pf-c-wizard__footer--xl--PaddingBottom: var(--pf-global--spacer--md);
23491
+ --pf-c-wizard__footer--xl--PaddingLeft: var(--pf-global--spacer--lg);
23492
+ --pf-c-wizard__footer--BoxShadow: var(--pf-global--BoxShadow--sm-top);
23493
+ --pf-c-wizard__footer--child--MarginRight: var(--pf-global--spacer--md);
23494
+ --pf-c-wizard__footer--child--MarginBottom: var(--pf-global--spacer--sm);
23495
+ --pf-c-wizard__footer-cancel--MarginLeft: calc(var(--pf-global--spacer--2xl) - var(--pf-c-wizard__footer--child--MarginRight));
23496
+ position: relative;
23497
+ display: flex;
23498
+ flex-direction: column;
23499
+ height: var(--pf-c-wizard--Height);
23500
+ }
23501
+
23502
+ @media screen and (min-width: 992px) {
23503
+ .pf-c-wizard {
23504
+ --pf-c-wizard__header--PaddingRight: var(--pf-c-wizard__header--lg--PaddingRight);
23505
+ --pf-c-wizard__header--PaddingLeft: var(--pf-c-wizard__header--lg--PaddingLeft);
23506
+ }
23507
+ }
23508
+ @media screen and (min-width: 1200px) {
23509
+ .pf-c-wizard {
23510
+ --pf-c-wizard__header--PaddingRight: var(--pf-c-wizard__header--xl--PaddingRight);
23511
+ --pf-c-wizard__header--PaddingLeft: var(--pf-c-wizard__header--xl--PaddingLeft);
23512
+ }
23513
+ }
23514
+ @media screen and (min-width: 1200px) {
23515
+ .pf-c-wizard {
23516
+ --pf-c-wizard__close--Right: var(--pf-c-wizard__close--xl--Right);
23517
+ }
23518
+ }
23519
+ @media screen and (min-width: 992px) {
23520
+ .pf-c-wizard {
23521
+ --pf-c-wizard__nav--Width: var(--pf-c-wizard__nav--lg--Width);
23522
+ --pf-c-wizard__nav--BoxShadow: none;
23523
+ }
23524
+ }
23525
+ @media screen and (min-width: 992px) {
23526
+ .pf-c-wizard {
23527
+ --pf-c-wizard__nav-list--PaddingTop: var(--pf-c-wizard__nav-list--lg--PaddingTop);
23528
+ --pf-c-wizard__nav-list--PaddingRight: var(--pf-c-wizard__nav-list--lg--PaddingRight);
23529
+ --pf-c-wizard__nav-list--PaddingBottom: var(--pf-c-wizard__nav-list--lg--PaddingBottom);
23530
+ }
23531
+ }
23532
+ @media screen and (min-width: 1200px) {
23533
+ .pf-c-wizard {
23534
+ --pf-c-wizard__nav-list--PaddingTop: var(--pf-c-wizard__nav-list--xl--PaddingTop);
23535
+ --pf-c-wizard__nav-list--PaddingRight: var(--pf-c-wizard__nav-list--xl--PaddingRight);
23536
+ --pf-c-wizard__nav-list--PaddingBottom: var(--pf-c-wizard__nav-list--xl--PaddingBottom);
23537
+ --pf-c-wizard__nav-list--PaddingLeft: var(--pf-c-wizard__nav-list--xl--PaddingLeft);
23538
+ }
23539
+ }
23540
+ @media screen and (min-width: 1200px) {
23541
+ .pf-c-wizard {
23542
+ --pf-c-wizard__main-body--PaddingTop: var(--pf-c-wizard__main-body--xl--PaddingTop);
23543
+ --pf-c-wizard__main-body--PaddingRight: var(--pf-c-wizard__main-body--xl--PaddingRight);
23544
+ --pf-c-wizard__main-body--PaddingBottom: var(--pf-c-wizard__main-body--xl--PaddingBottom);
23545
+ --pf-c-wizard__main-body--PaddingLeft: var(--pf-c-wizard__main-body--xl--PaddingLeft);
23546
+ }
23573
23547
  }
23574
-
23575
- .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item:last-child, .pf-c-tree-view.pf-m-guides .pf-c-tree-view__list-item:last-child {
23576
- --pf-c-tree-view--m-compact__list-item--BorderBottomWidth: 0;
23548
+ @media screen and (min-width: 1200px) {
23549
+ .pf-c-wizard {
23550
+ --pf-c-wizard__footer--PaddingTop: var(--pf-c-wizard__footer--xl--PaddingTop);
23551
+ --pf-c-wizard__footer--PaddingRight: var(--pf-c-wizard__footer--xl--PaddingRight);
23552
+ --pf-c-wizard__footer--PaddingBottom: var(--pf-c-wizard__footer--xl--PaddingBottom);
23553
+ --pf-c-wizard__footer--PaddingLeft: var(--pf-c-wizard__footer--xl--PaddingLeft);
23554
+ }
23577
23555
  }
23578
-
23579
- .pf-c-tree-view.pf-m-compact {
23580
- --pf-c-tree-view__node--PaddingTop: var(--pf-c-tree-view--m-compact__node--PaddingTop);
23581
- --pf-c-tree-view__node--PaddingBottom: var(--pf-c-tree-view--m-compact__node--PaddingBottom);
23582
- --pf-c-tree-view__node-container--Display: var(--pf-c-tree-view--m-compact__node-container--Display);
23583
- --pf-c-tree-view__node--hover--BackgroundColor: transparent;
23584
- --pf-c-tree-view__node--focus--BackgroundColor: transparent;
23585
- --pf-c-tree-view__list-item__list-item__node-toggle--Top: var(--pf-c-tree-view--m-compact__list-item__list-item__node-toggle--Top);
23556
+ .pf-c-modal-box .pf-c-wizard {
23557
+ flex: 1 1 var(--pf-c-modal-box--c-wizard--FlexBasis);
23558
+ min-height: 0;
23586
23559
  }
23587
23560
 
23588
- .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item {
23589
- border-bottom: var(--pf-c-tree-view--m-compact__list-item--BorderBottomWidth) solid var(--pf-c-tree-view--m-compact__list-item--BorderBottomColor);
23561
+ .pf-c-wizard > :not(.pf-c-wizard__outer-wrap):not(.pf-c-drawer) {
23562
+ flex-shrink: 0;
23590
23563
  }
23591
23564
 
23592
- .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item.pf-m-expanded {
23593
- --pf-c-tree-view--m-compact__node-container--PaddingBottom: var(--pf-c-tree-view--m-compact__list-item--m-expanded__node-container--PaddingBottom);
23565
+ .pf-c-wizard.pf-m-finished {
23566
+ --pf-c-wizard__outer-wrap--lg--PaddingLeft: 0;
23594
23567
  }
23595
23568
 
23596
- .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
23597
- --pf-c-tree-view__node--PaddingTop: var(--pf-c-tree-view--m-compact__node--nested--PaddingTop);
23598
- --pf-c-tree-view__node--PaddingBottom: var(--pf-c-tree-view--m-compact__node--nested--PaddingBottom);
23599
- --pf-c-tree-view__node-toggle--Position: static;
23600
- --pf-c-tree-view__node--PaddingLeft: var(--pf-c-tree-view--m-compact__node--level-2--PaddingLeft);
23601
- --pf-c-tree-view__list-item__list-item__node-toggle--TranslateX: 0;
23602
- --pf-c-tree-view--m-compact__list-item--BorderBottomWidth: 0;
23603
- --pf-c-tree-view--m-compact__node-container--PaddingBottom: var(--pf-c-tree-view--m-compact__node-container--PaddingBottom--base);
23569
+ .pf-c-wizard.pf-m-finished .pf-c-wizard__nav,
23570
+ .pf-c-wizard.pf-m-finished .pf-c-wizard__footer,
23571
+ .pf-c-wizard.pf-m-finished .pf-c-wizard__toggle {
23572
+ display: none;
23573
+ visibility: hidden;
23604
23574
  }
23605
23575
 
23606
- .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item::before,
23607
- .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__node::before {
23608
- left: var(--pf-c-tree-view--m-compact--border--Left);
23576
+ .pf-c-wizard__header {
23577
+ color: var(--pf-global--Color--100);
23578
+ position: relative;
23579
+ z-index: var(--pf-c-wizard__header--ZIndex);
23580
+ padding: var(--pf-c-wizard__header--PaddingTop) var(--pf-c-wizard__header--PaddingRight) var(--pf-c-wizard__header--PaddingBottom) var(--pf-c-wizard__header--PaddingLeft);
23581
+ background-color: var(--pf-c-wizard__header--BackgroundColor);
23609
23582
  }
23610
23583
 
23611
- .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item::before {
23612
- top: var(--pf-c-tree-view--m-compact__list-item--before--Top);
23584
+ .pf-c-wizard__header .pf-c-wizard__close {
23585
+ position: absolute;
23586
+ top: var(--pf-c-wizard__close--Top);
23587
+ right: var(--pf-c-wizard__close--Right);
23588
+ font-size: var(--pf-c-wizard__close--FontSize);
23613
23589
  }
23614
23590
 
23615
- .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__node::before {
23616
- top: var(--pf-c-tree-view--m-compact__node--before--Top);
23591
+ .pf-c-wizard__title {
23592
+ padding-right: var(--pf-c-wizard__title--PaddingRight);
23593
+ word-wrap: break-word;
23617
23594
  }
23618
23595
 
23619
- .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item:last-child::before {
23620
- height: var(--pf-c-tree-view--m-compact__list-item--last-child--before--Height);
23596
+ .pf-c-wizard__description {
23597
+ display: none;
23598
+ padding-top: var(--pf-c-wizard__description--PaddingTop);
23599
+ color: var(--pf-c-wizard__description--Color);
23600
+ visibility: hidden;
23621
23601
  }
23622
23602
 
23623
- .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
23624
- --pf-c-tree-view__node--PaddingLeft: var(--pf-c-tree-view--m-compact__node--PaddingLeft);
23625
- --pf-c-tree-view--m-compact--border--Left: var(--pf-c-tree-view--m-compact--border--nested--Left);
23626
- --pf-c-tree-view--m-compact__list-item--before--Top: var(--pf-c-tree-view--m-compact__list-item--nested--before--Top);
23627
- --pf-c-tree-view--m-compact__list-item--last-child--before--Height: var(--pf-c-tree-view--m-compact__list-item--nested--last-child--before--Height);
23603
+ @media screen and (min-width: 992px) {
23604
+ .pf-c-wizard__description {
23605
+ display: block;
23606
+ visibility: visible;
23607
+ }
23628
23608
  }
23629
-
23630
- .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__node-container {
23631
- padding: var(--pf-c-tree-view--m-compact__node-container--nested--PaddingTop) var(--pf-c-tree-view--m-compact__node-container--nested--PaddingRight) var(--pf-c-tree-view--m-compact__node-container--nested--PaddingBottom) var(--pf-c-tree-view--m-compact__node-container--nested--PaddingLeft);
23632
- background-color: var(--pf-c-tree-view--m-compact__node-container--nested--BackgroundColor);
23609
+ .pf-c-wizard__toggle {
23610
+ position: relative;
23611
+ z-index: var(--pf-c-wizard__toggle--ZIndex);
23612
+ display: flex;
23613
+ justify-content: space-between;
23614
+ width: 100%;
23615
+ padding: var(--pf-c-wizard__toggle--PaddingTop) var(--pf-c-wizard__toggle--PaddingRight) var(--pf-c-wizard__toggle--PaddingBottom) var(--pf-c-wizard__toggle--PaddingLeft);
23616
+ background-color: var(--pf-c-wizard__toggle--BackgroundColor);
23617
+ border: 0;
23618
+ box-shadow: var(--pf-c-wizard__toggle--BoxShadow);
23633
23619
  }
23634
23620
 
23635
- .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__node-toggle {
23636
- margin-right: var(--pf-c-tree-view--m-compact__node-toggle--nested--MarginRight);
23637
- margin-left: var(--pf-c-tree-view--m-compact__node-toggle--nested--MarginLeft);
23621
+ @media screen and (min-width: 992px) {
23622
+ .pf-c-wizard__toggle {
23623
+ display: none;
23624
+ visibility: hidden;
23625
+ }
23638
23626
  }
23639
-
23640
- .pf-c-tree-view.pf-m-compact .pf-c-tree-view__node-container {
23641
- padding: var(--pf-c-tree-view--m-compact__node-container--PaddingTop) var(--pf-c-tree-view--m-compact__node-container--PaddingRight) var(--pf-c-tree-view--m-compact__node-container--PaddingBottom) var(--pf-c-tree-view--m-compact__node-container--PaddingLeft);
23627
+ .pf-c-wizard__toggle.pf-m-expanded {
23628
+ --pf-c-wizard__toggle--BoxShadow: none;
23629
+ border-bottom: var(--pf-c-wizard__toggle--m-expanded--BorderBottomWidth) solid var(--pf-c-wizard__toggle--m-expanded--BorderBottomColor);
23642
23630
  }
23643
23631
 
23644
- .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item:not([aria-expanded]) > .pf-c-tree-view__content > .pf-c-tree-view__node,
23645
- .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item:not([aria-expanded]) > .pf-c-tree-view__content > .pf-c-tree-view__node > .pf-c-tree-view__node-container {
23646
- cursor: default;
23632
+ .pf-c-wizard__toggle.pf-m-expanded .pf-c-wizard__toggle-icon {
23633
+ transform: rotate(var(--pf-c-wizard__toggle--m-expanded__toggle-icon--Rotate));
23647
23634
  }
23648
23635
 
23649
- .pf-c-tree-view.pf-m-compact.pf-m-no-background {
23650
- --pf-c-tree-view--m-compact__node--before--Top: var(--pf-c-tree-view--m-compact--m-no-background__node--before--Top);
23636
+ .pf-c-wizard__toggle-list {
23637
+ position: relative;
23638
+ display: flex;
23639
+ flex-wrap: wrap;
23640
+ align-items: baseline;
23641
+ margin-right: var(--pf-c-wizard__toggle-list--MarginRight);
23642
+ margin-bottom: var(--pf-c-wizard__toggle-list--MarginBottom);
23643
+ list-style: none;
23651
23644
  }
23652
23645
 
23653
- .pf-c-tree-view.pf-m-compact.pf-m-no-background .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
23654
- --pf-c-tree-view__node--PaddingTop: var(--pf-c-tree-view--m-compact--m-no-background__node--nested--PaddingTop);
23655
- --pf-c-tree-view__node--PaddingBottom: var(--pf-c-tree-view--m-compact--m-no-background__node--nested--PaddingBottom);
23646
+ .pf-c-wizard__toggle-list-item {
23647
+ margin-bottom: var(--pf-c-wizard__toggle-list-item--MarginBottom);
23648
+ text-align: left;
23649
+ word-break: break-word;
23656
23650
  }
23657
23651
 
23658
- .pf-c-tree-view.pf-m-compact.pf-m-no-background .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
23659
- --pf-c-tree-view--m-compact--border--Left: var(--pf-c-tree-view--m-compact--m-no-background--border--nested--Left);
23660
- --pf-c-tree-view__node--PaddingLeft: var(--pf-c-tree-view--m-compact--m-no-background__node--PaddingLeft);
23652
+ .pf-c-wizard__toggle-list-item:not(:last-child) {
23653
+ margin-right: var(--pf-c-wizard__toggle-list-item--not-last-child--MarginRight);
23661
23654
  }
23662
23655
 
23663
- .pf-c-tree-view.pf-m-no-background {
23664
- --pf-c-tree-view--m-compact__node-container--nested--BackgroundColor: var(--pf-c-tree-view--m-no-background__node-container--BackgroundColor);
23656
+ .pf-c-wizard__toggle-num {
23657
+ --pf-c-wizard__nav-link--before--Top: var(--pf-c-wizard__toggle-num--before--Top);
23665
23658
  }
23666
23659
 
23667
- .pf-c-tree-view__node-toggle-icon {
23668
- display: inline-block;
23669
- min-width: var(--pf-c-tree-view__node-toggle-icon--MinWidth);
23670
- text-align: center;
23671
- transition: var(--pf-c-tree-view__node-toggle-icon--Transition);
23672
- transform: rotate(var(--pf-c-tree-view__node-toggle-icon--Rotate));
23660
+ .pf-c-wizard__toggle-separator {
23661
+ margin-left: var(--pf-c-wizard__toggle-separator--MarginLeft);
23662
+ color: var(--pf-c-wizard__toggle-separator--Color);
23673
23663
  }
23674
23664
 
23675
- .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
23676
- --pf-c-tree-view__node-toggle-icon--Rotate: var(--pf-c-tree-view__node-toggle-icon--base--Rotate);
23677
- --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--Color--base);
23665
+ .pf-c-wizard__toggle-icon {
23666
+ line-height: var(--pf-c-wizard__toggle-icon--LineHeight);
23678
23667
  }
23679
23668
 
23680
- .pf-c-tree-view__list-item.pf-m-expanded {
23681
- --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__list-item--m-expanded__node-toggle--Color);
23682
- --pf-c-tree-view__node-toggle-icon--Rotate: var(--pf-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate);
23669
+ .pf-c-wizard__outer-wrap {
23670
+ position: relative;
23671
+ display: flex;
23672
+ flex-direction: column;
23673
+ flex-grow: 1;
23674
+ min-height: var(--pf-c-wizard__outer-wrap--MinHeight);
23675
+ background-color: var(--pf-c-wizard__outer-wrap--BackgroundColor);
23683
23676
  }
23684
23677
 
23685
- .pf-c-tree-view__node,
23686
- .pf-c-tree-view__node-container {
23687
- flex: 1 1;
23688
- align-items: flex-start;
23689
- min-width: 0;
23690
- text-align: left;
23691
- cursor: pointer;
23692
- border: 0;
23678
+ @media screen and (min-width: 992px) {
23679
+ .pf-c-wizard__outer-wrap {
23680
+ padding-left: var(--pf-c-wizard__outer-wrap--lg--PaddingLeft);
23681
+ }
23693
23682
  }
23694
-
23695
- .pf-c-tree-view__node {
23683
+ .pf-c-wizard__inner-wrap {
23696
23684
  position: relative;
23697
23685
  display: flex;
23698
- padding: var(--pf-c-tree-view__node--PaddingTop) var(--pf-c-tree-view__node--PaddingRight) var(--pf-c-tree-view__node--PaddingBottom) var(--pf-c-tree-view__node--PaddingLeft);
23699
- color: var(--pf-c-tree-view__node--Color);
23686
+ flex-direction: column;
23687
+ flex-grow: 1;
23688
+ min-height: 0;
23700
23689
  }
23701
23690
 
23702
- .pf-c-tree-view__node.pf-m-current {
23703
- --pf-c-tree-view__node--Color: var(--pf-c-tree-view__node--m-current--Color);
23704
- font-weight: var(--pf-c-tree-view__node--m-current--FontWeight);
23691
+ @media screen and (min-width: 992px) {
23692
+ .pf-c-wizard__inner-wrap {
23693
+ position: static;
23694
+ }
23695
+ }
23696
+ .pf-c-wizard__nav {
23697
+ position: absolute;
23698
+ top: 0;
23699
+ left: 0;
23700
+ z-index: var(--pf-c-wizard__nav--ZIndex);
23701
+ display: none;
23702
+ width: var(--pf-c-wizard__nav--Width);
23703
+ max-height: 100%;
23704
+ overflow-y: auto;
23705
+ -webkit-overflow-scrolling: touch;
23706
+ visibility: hidden;
23707
+ background-color: var(--pf-c-wizard__nav--BackgroundColor);
23708
+ box-shadow: var(--pf-c-wizard__nav--BoxShadow);
23705
23709
  }
23706
23710
 
23707
- .pf-c-tree-view__node:focus {
23708
- background-color: var(--pf-c-tree-view__node--focus--BackgroundColor);
23711
+ .pf-c-wizard__nav.pf-m-expanded {
23712
+ display: block;
23713
+ visibility: visible;
23709
23714
  }
23710
23715
 
23711
- .pf-c-tree-view__node .pf-c-tree-view__node-count {
23712
- margin-left: var(--pf-c-tree-view__node-count--MarginLeft);
23716
+ @media screen and (min-width: 992px) {
23717
+ .pf-c-wizard__nav {
23718
+ display: block;
23719
+ height: 100%;
23720
+ visibility: visible;
23721
+ border-right: var(--pf-c-wizard__nav--lg--BorderRightWidth) solid var(--pf-c-wizard__nav--lg--BorderRightColor);
23722
+ }
23723
+ }
23724
+ .pf-c-wizard__nav-list {
23725
+ padding-top: var(--pf-c-wizard__nav-list--PaddingTop);
23726
+ padding-right: var(--pf-c-wizard__nav-list--PaddingRight);
23727
+ padding-bottom: var(--pf-c-wizard__nav-list--PaddingBottom);
23728
+ padding-left: var(--pf-c-wizard__nav-list--PaddingLeft);
23729
+ list-style: none;
23730
+ counter-reset: wizard-nav-count;
23713
23731
  }
23714
23732
 
23715
- .pf-c-tree-view__node .pf-c-tree-view__node-count .pf-c-badge.pf-m-read {
23716
- --pf-c-badge--m-read--BackgroundColor: var(--pf-c-tree-view__node-count--c-badge--m-read--BackgroundColor);
23733
+ .pf-c-wizard__nav-list .pf-c-wizard__nav-list {
23734
+ padding: 0;
23735
+ margin-top: var(--pf-c-wizard__nav-list--nested--MarginTop);
23736
+ margin-left: var(--pf-c-wizard__nav-list--nested--MarginLeft);
23717
23737
  }
23718
23738
 
23719
- .pf-c-tree-view__node:not(.pf-m-selectable):hover, .pf-c-tree-view__node.pf-m-selectable .pf-c-tree-view__node-toggle:hover {
23720
- --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--hover--Color);
23739
+ .pf-c-wizard__nav-list .pf-c-wizard__nav-list .pf-c-wizard__nav-link::before {
23740
+ content: none;
23721
23741
  }
23722
23742
 
23723
- .pf-c-tree-view__node:not(.pf-m-selectable):focus, .pf-c-tree-view__node.pf-m-selectable .pf-c-tree-view__node-toggle:focus {
23724
- --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--focus--Color);
23743
+ .pf-c-wizard__nav-list .pf-c-wizard__nav-list .pf-c-wizard__nav-link.pf-m-current {
23744
+ font-weight: var(--pf-c-wizard__nav-list__nav-list__nav-link--m-current--FontWeight);
23725
23745
  }
23726
23746
 
23727
- .pf-c-tree-view__node:not(.pf-m-selectable):active, .pf-c-tree-view__node.pf-m-selectable .pf-c-tree-view__node-toggle:active {
23728
- --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--active--Color);
23747
+ .pf-c-wizard__nav-item + .pf-c-wizard__nav-item {
23748
+ margin-top: var(--pf-c-wizard__nav-item--MarginTop);
23729
23749
  }
23730
23750
 
23731
- .pf-c-tree-view__node-container {
23732
- display: var(--pf-c-tree-view__node-container--Display);
23733
- flex-grow: 1;
23751
+ .pf-c-wizard__nav-item.pf-m-expandable > .pf-c-wizard__nav-link {
23752
+ display: flex;
23753
+ }
23754
+
23755
+ .pf-c-wizard__nav-item.pf-m-expandable > .pf-c-wizard__nav-list {
23756
+ display: none;
23757
+ visibility: hidden;
23734
23758
  }
23735
23759
 
23736
- .pf-c-tree-view__node-content {
23737
- display: flex;
23738
- flex-direction: column;
23739
- overflow: var(--pf-c-tree-view__node-content--Overflow);
23760
+ .pf-c-wizard__nav-item.pf-m-expanded > .pf-c-wizard__nav-list {
23761
+ display: block;
23762
+ visibility: visible;
23740
23763
  }
23741
23764
 
23742
- .pf-c-tree-view__node-content > * + * {
23743
- margin-top: var(--pf-c-tree-view__node-content--RowGap);
23765
+ .pf-c-wizard__nav-item.pf-m-expanded > .pf-c-wizard__nav-link {
23766
+ --pf-c-wizard__nav-link-toggle-icon--Rotate: var(--pf-c-wizard__nav-item--m-expanded__link-toggle-icon--Rotate);
23744
23767
  }
23745
23768
 
23746
- .pf-c-tree-view__node-check {
23747
- margin-right: var(--pf-c-tree-view__node-check--MarginRight);
23769
+ .pf-c-wizard__nav-link {
23770
+ position: relative;
23771
+ display: inline-block;
23772
+ width: 100%;
23773
+ color: var(--pf-c-wizard__nav-link--Color);
23774
+ text-align: left;
23775
+ text-decoration: var(--pf-c-wizard__nav-link--TextDecoration);
23776
+ word-break: break-word;
23777
+ border: 0;
23748
23778
  }
23749
23779
 
23750
- .pf-c-tree-view__node-toggle {
23751
- position: var(--pf-c-tree-view__node-toggle--Position);
23752
- top: var(--pf-c-tree-view__list-item__list-item__node-toggle--Top);
23753
- left: var(--pf-c-tree-view__list-item__list-item__node-toggle--Left);
23780
+ .pf-c-wizard__toggle-num, .pf-c-wizard__nav-link::before {
23781
+ position: absolute;
23782
+ top: var(--pf-c-wizard__nav-link--before--Top);
23783
+ left: 0;
23754
23784
  display: inline-flex;
23755
23785
  align-items: center;
23756
23786
  justify-content: center;
23757
- padding: var(--pf-c-tree-view__node-toggle-button--PaddingTop) var(--pf-c-tree-view__node-toggle-button--PaddingRight) var(--pf-c-tree-view__node-toggle-button--PaddingBottom) var(--pf-c-tree-view__node-toggle-button--PaddingLeft);
23758
- margin-top: var(--pf-c-tree-view__node-toggle-button--MarginTop);
23759
- margin-bottom: var(--pf-c-tree-view__node-toggle-button--MarginBottom);
23760
- color: var(--pf-c-tree-view__node-toggle--Color);
23761
- border: 0;
23762
- transform: translateX(var(--pf-c-tree-view__list-item__list-item__node-toggle--TranslateX));
23787
+ width: var(--pf-c-wizard__nav-link--before--Width);
23788
+ height: var(--pf-c-wizard__nav-link--before--Height);
23789
+ font-size: var(--pf-c-wizard__nav-link--before--FontSize);
23790
+ line-height: 1;
23791
+ color: var(--pf-c-wizard__nav-link--before--Color);
23792
+ background-color: var(--pf-c-wizard__nav-link--before--BackgroundColor);
23793
+ border-radius: var(--pf-c-wizard__nav-link--before--BorderRadius);
23794
+ transform: translateX(var(--pf-c-wizard__nav-link--before--TranslateX));
23763
23795
  }
23764
23796
 
23765
- .pf-c-tree-view__node-title.pf-m-truncate,
23766
- .pf-c-tree-view__node-text.pf-m-truncate {
23767
- --pf-c-tree-view__node-content--Overflow: hidden;
23768
- overflow: hidden;
23769
- text-overflow: ellipsis;
23770
- white-space: nowrap;
23797
+ .pf-c-wizard__nav-link::before {
23798
+ top: 0;
23799
+ content: counter(wizard-nav-count);
23800
+ counter-increment: wizard-nav-count;
23771
23801
  }
23772
23802
 
23773
- .pf-c-tree-view.pf-m-truncate .pf-c-tree-view__node-title,
23774
- .pf-c-tree-view.pf-m-truncate .pf-c-tree-view__node-text {
23775
- --pf-c-tree-view__node-content--Overflow: hidden;
23776
- overflow: hidden;
23777
- text-overflow: ellipsis;
23778
- white-space: nowrap;
23803
+ .pf-c-wizard__nav-link:hover {
23804
+ --pf-c-wizard__nav-link--Color: var(--pf-c-wizard__nav-link--hover--Color);
23805
+ --pf-c-wizard__nav-link-toggle--Color: var(--pf-c-wizard__nav-link--hover__nav-link-toggle-icon--Color);
23779
23806
  }
23780
23807
 
23781
- .pf-c-tree-view__node-text {
23782
- font-weight: inherit;
23783
- color: inherit;
23784
- text-align: left;
23785
- border: 0;
23808
+ .pf-c-wizard__nav-link:focus {
23809
+ --pf-c-wizard__nav-link--Color: var(--pf-c-wizard__nav-link--focus--Color);
23810
+ --pf-c-wizard__nav-link-toggle--Color: var(--pf-c-wizard__nav-link--focus__nav-link-toggle-icon--Color);
23786
23811
  }
23787
23812
 
23788
- label.pf-c-tree-view__node-text {
23789
- cursor: pointer;
23813
+ .pf-c-wizard__nav-link.pf-m-current {
23814
+ --pf-c-wizard__nav-link--Color: var(--pf-c-wizard__nav-link--m-current--Color);
23815
+ font-weight: var(--pf-c-wizard__nav-link--m-current--FontWeight);
23790
23816
  }
23791
23817
 
23792
- .pf-c-tree-view__node-title {
23793
- font-weight: var(--pf-c-tree-view__node-title--FontWeight);
23818
+ .pf-c-wizard__toggle-num, .pf-c-wizard__nav-link.pf-m-current::before {
23819
+ --pf-c-wizard__nav-link--before--BackgroundColor: var(--pf-c-wizard__nav-link--m-current--before--BackgroundColor);
23820
+ --pf-c-wizard__nav-link--before--Color: var(--pf-c-wizard__nav-link--m-current--before--Color);
23794
23821
  }
23795
23822
 
23796
- .pf-c-tree-view__search {
23797
- padding: var(--pf-c-tree-view__search--PaddingTop) var(--pf-c-tree-view__search--PaddingRight) var(--pf-c-tree-view__search--PaddingBottom) var(--pf-c-tree-view__search--PaddingLeft);
23823
+ .pf-c-wizard__nav-link:disabled, .pf-c-wizard__nav-link.pf-m-disabled {
23824
+ --pf-c-wizard__nav-link--Color: var(--pf-c-wizard__nav-link--m-disabled--Color);
23825
+ pointer-events: none;
23798
23826
  }
23799
23827
 
23800
- .pf-c-tree-view__node-icon {
23801
- padding-right: var(--pf-c-tree-view__node-icon--PaddingRight);
23802
- color: var(--pf-c-tree-view__node-icon--Color);
23828
+ .pf-c-wizard__nav-link:disabled::before, .pf-c-wizard__nav-link.pf-m-disabled::before {
23829
+ --pf-c-wizard__nav-link--before--BackgroundColor: var(--pf-c-wizard__nav-link--m-disabled--before--BackgroundColor);
23830
+ --pf-c-wizard__nav-link--before--Color: var(--pf-c-wizard__nav-link--m-disabled--before--Color);
23803
23831
  }
23804
23832
 
23805
- .pf-c-tree-view__content {
23806
- display: flex;
23807
- align-items: center;
23833
+ .pf-c-wizard__nav-link-text {
23834
+ flex-grow: 1;
23808
23835
  }
23809
23836
 
23810
- .pf-c-tree-view__content:hover,
23811
- .pf-c-tree-view__content:focus-within {
23812
- background-color: var(--pf-c-tree-view__node--hover--BackgroundColor);
23837
+ .pf-c-wizard__nav-link-toggle {
23838
+ padding-right: var(--pf-c-wizard__nav-link-toggle--PaddingRight);
23839
+ padding-left: var(--pf-c-wizard__nav-link-toggle--PaddingLeft);
23840
+ color: var(--pf-c-wizard__nav-link-toggle--Color);
23813
23841
  }
23814
23842
 
23815
- .pf-c-tree-view__action {
23816
- margin-left: var(--pf-c-tree-view__action--MarginLeft);
23817
- color: var(--pf-c-tree-view__action--Color);
23818
- border: 0;
23843
+ .pf-c-wizard__nav-link-toggle-icon {
23844
+ display: inline-block;
23845
+ transition: var(--pf-c-wizard__nav-link-toggle-icon--Transition);
23846
+ transform: rotate(var(--pf-c-wizard__nav-link-toggle-icon--Rotate));
23819
23847
  }
23820
23848
 
23821
- .pf-c-tree-view__action:hover {
23822
- --pf-c-tree-view__action--Color: var(--pf-c-tree-view__action--hover--Color);
23849
+ .pf-c-wizard__main {
23850
+ z-index: var(--pf-c-wizard__main--ZIndex);
23851
+ flex: 1 1 auto;
23852
+ overflow-x: hidden;
23853
+ overflow-y: auto;
23854
+ word-break: break-word;
23823
23855
  }
23824
23856
 
23825
- .pf-c-tree-view__action:focus {
23826
- --pf-c-tree-view__action--Color: var(--pf-c-tree-view__action--focus--Color);
23827
- background-color: var(--pf-c-tree-view__action--focus--BackgroundColor);
23857
+ .pf-c-wizard__main-body {
23858
+ padding: var(--pf-c-wizard__main-body--PaddingTop) var(--pf-c-wizard__main-body--PaddingRight) var(--pf-c-wizard__main-body--PaddingBottom) var(--pf-c-wizard__main-body--PaddingLeft);
23828
23859
  }
23829
23860
 
23830
- .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
23831
- --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
23832
- --pf-c-tree-view__node--PaddingLeft: calc(var(--pf-c-tree-view__node--nested-indent--base) * 1 + var(--pf-c-tree-view__node--indent--base));
23833
- --pf-c-tree-view--m-guides--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-guides--guide-left--base--offset));
23861
+ .pf-c-wizard__main-body.pf-m-no-padding {
23862
+ padding: 0;
23834
23863
  }
23835
23864
 
23836
- .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
23837
- --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
23838
- --pf-c-tree-view__node--PaddingLeft: calc(var(--pf-c-tree-view__node--nested-indent--base) * 2 + var(--pf-c-tree-view__node--indent--base));
23839
- --pf-c-tree-view--m-guides--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-guides--guide-left--base--offset));
23840
- --pf-c-tree-view--m-compact__node--PaddingLeft: calc(var(--pf-c-tree-view--m-compact__node--nested-indent--base) * 1 + var(--pf-c-tree-view--m-compact__node--indent--base));
23841
- --pf-c-tree-view--m-compact--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--base-border--Left--offset));
23842
- --pf-c-tree-view--m-compact--m-no-background__node--PaddingLeft: calc(var(--pf-c-tree-view--m-compact--m-no-background__node--nested-indent--base) * 1 + var(--pf-c-tree-view--m-compact--m-no-background__node--indent--base));
23843
- --pf-c-tree-view--m-compact--m-no-background--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--m-no-background--base-border--Left--offset));
23865
+ .pf-c-wizard__footer {
23866
+ position: relative;
23867
+ z-index: var(--pf-c-wizard__footer--ZIndex);
23868
+ display: flex;
23869
+ flex-wrap: wrap;
23870
+ flex-shrink: 0;
23871
+ padding: var(--pf-c-wizard__footer--PaddingTop) var(--pf-c-wizard__footer--PaddingRight) var(--pf-c-wizard__footer--PaddingBottom) var(--pf-c-wizard__footer--PaddingLeft);
23872
+ background-color: var(--pf-c-wizard__footer--BackgroundColor);
23844
23873
  }
23845
23874
 
23846
- .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
23847
- --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
23848
- --pf-c-tree-view__node--PaddingLeft: calc(var(--pf-c-tree-view__node--nested-indent--base) * 3 + var(--pf-c-tree-view__node--indent--base));
23849
- --pf-c-tree-view--m-guides--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-guides--guide-left--base--offset));
23850
- --pf-c-tree-view--m-compact__node--PaddingLeft: calc(var(--pf-c-tree-view--m-compact__node--nested-indent--base) * 2 + var(--pf-c-tree-view--m-compact__node--indent--base));
23851
- --pf-c-tree-view--m-compact--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--base-border--Left--offset));
23852
- --pf-c-tree-view--m-compact--m-no-background__node--PaddingLeft: calc(var(--pf-c-tree-view--m-compact--m-no-background__node--nested-indent--base) * 2 + var(--pf-c-tree-view--m-compact--m-no-background__node--indent--base));
23853
- --pf-c-tree-view--m-compact--m-no-background--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--m-no-background--base-border--Left--offset));
23875
+ .pf-c-wizard__footer > * {
23876
+ margin-bottom: var(--pf-c-wizard__footer--child--MarginBottom);
23854
23877
  }
23855
23878
 
23856
- .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
23857
- --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
23858
- --pf-c-tree-view__node--PaddingLeft: calc(var(--pf-c-tree-view__node--nested-indent--base) * 4 + var(--pf-c-tree-view__node--indent--base));
23859
- --pf-c-tree-view--m-guides--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-guides--guide-left--base--offset));
23860
- --pf-c-tree-view--m-compact__node--PaddingLeft: calc(var(--pf-c-tree-view--m-compact__node--nested-indent--base) * 3 + var(--pf-c-tree-view--m-compact__node--indent--base));
23861
- --pf-c-tree-view--m-compact--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--base-border--Left--offset));
23862
- --pf-c-tree-view--m-compact--m-no-background__node--PaddingLeft: calc(var(--pf-c-tree-view--m-compact--m-no-background__node--nested-indent--base) * 3 + var(--pf-c-tree-view--m-compact--m-no-background__node--indent--base));
23863
- --pf-c-tree-view--m-compact--m-no-background--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--m-no-background--base-border--Left--offset));
23879
+ .pf-c-wizard__footer > *:not(:last-child) {
23880
+ margin-right: var(--pf-c-wizard__footer--child--MarginRight);
23864
23881
  }
23865
23882
 
23866
- .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
23867
- --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
23868
- --pf-c-tree-view__node--PaddingLeft: calc(var(--pf-c-tree-view__node--nested-indent--base) * 5 + var(--pf-c-tree-view__node--indent--base));
23869
- --pf-c-tree-view--m-guides--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-guides--guide-left--base--offset));
23870
- --pf-c-tree-view--m-compact__node--PaddingLeft: calc(var(--pf-c-tree-view--m-compact__node--nested-indent--base) * 4 + var(--pf-c-tree-view--m-compact__node--indent--base));
23871
- --pf-c-tree-view--m-compact--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--base-border--Left--offset));
23872
- --pf-c-tree-view--m-compact--m-no-background__node--PaddingLeft: calc(var(--pf-c-tree-view--m-compact--m-no-background__node--nested-indent--base) * 4 + var(--pf-c-tree-view--m-compact--m-no-background__node--indent--base));
23873
- --pf-c-tree-view--m-compact--m-no-background--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--m-no-background--base-border--Left--offset));
23883
+ .pf-c-page__main-wizard .pf-c-wizard__footer, .pf-c-modal-box .pf-c-wizard__footer, .pf-c-drawer > .pf-c-wizard__footer {
23884
+ box-shadow: var(--pf-c-wizard__footer--BoxShadow);
23874
23885
  }
23875
23886
 
23876
- .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
23877
- --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
23878
- --pf-c-tree-view__node--PaddingLeft: calc(var(--pf-c-tree-view__node--nested-indent--base) * 6 + var(--pf-c-tree-view__node--indent--base));
23879
- --pf-c-tree-view--m-guides--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-guides--guide-left--base--offset));
23880
- --pf-c-tree-view--m-compact__node--PaddingLeft: calc(var(--pf-c-tree-view--m-compact__node--nested-indent--base) * 5 + var(--pf-c-tree-view--m-compact__node--indent--base));
23881
- --pf-c-tree-view--m-compact--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--base-border--Left--offset));
23882
- --pf-c-tree-view--m-compact--m-no-background__node--PaddingLeft: calc(var(--pf-c-tree-view--m-compact--m-no-background__node--nested-indent--base) * 5 + var(--pf-c-tree-view--m-compact--m-no-background__node--indent--base));
23883
- --pf-c-tree-view--m-compact--m-no-background--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--m-no-background--base-border--Left--offset));
23887
+ .pf-c-wizard__footer-cancel {
23888
+ margin-left: var(--pf-c-wizard__footer-cancel--MarginLeft);
23884
23889
  }
23885
23890
 
23886
- .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
23887
- --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
23888
- --pf-c-tree-view__node--PaddingLeft: calc(var(--pf-c-tree-view__node--nested-indent--base) * 7 + var(--pf-c-tree-view__node--indent--base));
23889
- --pf-c-tree-view--m-guides--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-guides--guide-left--base--offset));
23890
- --pf-c-tree-view--m-compact__node--PaddingLeft: calc(var(--pf-c-tree-view--m-compact__node--nested-indent--base) * 6 + var(--pf-c-tree-view--m-compact__node--indent--base));
23891
- --pf-c-tree-view--m-compact--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--base-border--Left--offset));
23892
- --pf-c-tree-view--m-compact--m-no-background__node--PaddingLeft: calc(var(--pf-c-tree-view--m-compact--m-no-background__node--nested-indent--base) * 6 + var(--pf-c-tree-view--m-compact--m-no-background__node--indent--base));
23893
- --pf-c-tree-view--m-compact--m-no-background--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--m-no-background--base-border--Left--offset));
23891
+ :where(.pf-theme-dark) .pf-c-wizard__header {
23892
+ --pf-global--Color--100: #e0e0e0;
23893
+ --pf-global--Color--200: #aaabac;
23894
+ --pf-global--BorderColor--100: #444548;
23895
+ --pf-global--primary-color--100: #1fa7f8;
23896
+ --pf-global--link--Color: #1fa7f8;
23897
+ --pf-global--link--Color--hover: #73bcf7;
23898
+ --pf-global--BackgroundColor--100: #1b1d21;
23894
23899
  }
23895
23900
 
23896
- .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
23897
- --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
23898
- --pf-c-tree-view__node--PaddingLeft: calc(var(--pf-c-tree-view__node--nested-indent--base) * 8 + var(--pf-c-tree-view__node--indent--base));
23899
- --pf-c-tree-view--m-guides--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-guides--guide-left--base--offset));
23900
- --pf-c-tree-view--m-compact__node--PaddingLeft: calc(var(--pf-c-tree-view--m-compact__node--nested-indent--base) * 7 + var(--pf-c-tree-view--m-compact__node--indent--base));
23901
- --pf-c-tree-view--m-compact--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--base-border--Left--offset));
23902
- --pf-c-tree-view--m-compact--m-no-background__node--PaddingLeft: calc(var(--pf-c-tree-view--m-compact--m-no-background__node--nested-indent--base) * 7 + var(--pf-c-tree-view--m-compact--m-no-background__node--indent--base));
23903
- --pf-c-tree-view--m-compact--m-no-background--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--m-no-background--base-border--Left--offset));
23901
+ :where(.pf-theme-dark) .pf-c-wizard__header .pf-c-card {
23902
+ --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
23904
23903
  }
23905
23904
 
23906
- .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
23907
- --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
23908
- --pf-c-tree-view__node--PaddingLeft: calc(var(--pf-c-tree-view__node--nested-indent--base) * 9 + var(--pf-c-tree-view__node--indent--base));
23909
- --pf-c-tree-view--m-guides--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-guides--guide-left--base--offset));
23910
- --pf-c-tree-view--m-compact__node--PaddingLeft: calc(var(--pf-c-tree-view--m-compact__node--nested-indent--base) * 8 + var(--pf-c-tree-view--m-compact__node--indent--base));
23911
- --pf-c-tree-view--m-compact--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--base-border--Left--offset));
23912
- --pf-c-tree-view--m-compact--m-no-background__node--PaddingLeft: calc(var(--pf-c-tree-view--m-compact--m-no-background__node--nested-indent--base) * 8 + var(--pf-c-tree-view--m-compact--m-no-background__node--indent--base));
23913
- --pf-c-tree-view--m-compact--m-no-background--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--m-no-background--base-border--Left--offset));
23905
+ :where(.pf-theme-dark) .pf-c-wizard__header .pf-c-button {
23906
+ --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
23907
+ --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
23908
+ --pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
23909
+ --pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100);
23910
+ --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
23911
+ --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
23912
+ --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
23913
+ --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
23914
+ --pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
23915
+ --pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
23916
+ --pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
23917
+ --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
23914
23918
  }
23915
23919
 
23916
- .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
23917
- --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
23918
- --pf-c-tree-view__node--PaddingLeft: calc(var(--pf-c-tree-view__node--nested-indent--base) * 10 + var(--pf-c-tree-view__node--indent--base));
23919
- --pf-c-tree-view--m-guides--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-guides--guide-left--base--offset));
23920
- --pf-c-tree-view--m-compact__node--PaddingLeft: calc(var(--pf-c-tree-view--m-compact__node--nested-indent--base) * 9 + var(--pf-c-tree-view--m-compact__node--indent--base));
23921
- --pf-c-tree-view--m-compact--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--base-border--Left--offset));
23922
- --pf-c-tree-view--m-compact--m-no-background__node--PaddingLeft: calc(var(--pf-c-tree-view--m-compact--m-no-background__node--nested-indent--base) * 9 + var(--pf-c-tree-view--m-compact--m-no-background__node--indent--base));
23923
- --pf-c-tree-view--m-compact--m-no-background--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--m-no-background--base-border--Left--offset));
23920
+ :where(.pf-theme-dark) .pf-c-wizard {
23921
+ --pf-c-wizard__header--BackgroundColor: var(--pf-global--palette--black-1000);
23922
+ --pf-c-wizard__nav-link--before--BackgroundColor: var(--pf-global--palette--black-500);
23923
+ --pf-c-wizard__nav-link--m-disabled--Color: var(--pf-global--disabled-color--300);
23924
+ --pf-c-wizard__nav-link--m-disabled--before--Color: var(--pf-global--disabled-color--300);
23924
23925
  }
23925
23926
 
23926
- :where(.pf-theme-dark) .pf-c-tree-view {
23927
- --pf-c-tree-view__node--hover--BackgroundColor: var(--pf-global--BackgroundColor--300);
23928
- --pf-c-tree-view__node--focus--BackgroundColor: var(--pf-global--BackgroundColor--300);
23927
+ :where(.pf-theme-dark) .pf-c-wizard__header {
23928
+ color: var(--pf-global--Color--100);
23929
23929
  }
23930
23930
 
23931
23931
  .pf-c-draggable {