@patternfly/react-table 4.52.0 → 4.52.4

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.
@@ -12616,6 +12616,7 @@ button.pf-c-breadcrumb__link {
12616
12616
  --pf-c-expandable-section__toggle--active--Color: var(--pf-global--link--Color--hover);
12617
12617
  --pf-c-expandable-section__toggle--focus--Color: var(--pf-global--link--Color--hover);
12618
12618
  --pf-c-expandable-section__toggle--m-expanded--Color: var(--pf-global--link--Color--hover);
12619
+ --pf-c-expandable-section__toggle-icon--MinWidth: 1em;
12619
12620
  --pf-c-expandable-section__toggle-icon--Color: var(--pf-global--Color--100);
12620
12621
  --pf-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
12621
12622
  --pf-c-expandable-section__toggle-icon--Rotate: 0;
@@ -12638,6 +12639,7 @@ button.pf-c-breadcrumb__link {
12638
12639
  --pf-c-expandable-section--m-display-lg--after--BackgroundColor: transparent;
12639
12640
  --pf-c-expandable-section--m-display-lg--after--Width: var(--pf-global--BorderWidth--lg);
12640
12641
  --pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor: var(--pf-global--primary-color--100);
12642
+ --pf-c-expandable-section--m-indented__content--PaddingLeft: calc(var(--pf-c-expandable-section__toggle-text--MarginLeft) + var(--pf-c-expandable-section__toggle-icon--MinWidth));
12641
12643
  }
12642
12644
 
12643
12645
  .pf-c-expandable-section.pf-m-expanded {
@@ -12678,6 +12680,10 @@ button.pf-c-breadcrumb__link {
12678
12680
  background-color: var(--pf-c-expandable-section--m-display-lg--after--BackgroundColor);
12679
12681
  }
12680
12682
 
12683
+ .pf-c-expandable-section.pf-m-indented {
12684
+ --pf-c-expandable-section__content--PaddingLeft: var(--pf-c-expandable-section--m-indented__content--PaddingLeft);
12685
+ }
12686
+
12681
12687
  .pf-c-expandable-section__toggle {
12682
12688
  display: flex;
12683
12689
  padding: var(--pf-c-expandable-section__toggle--PaddingTop) var(--pf-c-expandable-section__toggle--PaddingRight) var(--pf-c-expandable-section__toggle--PaddingBottom) var(--pf-c-expandable-section__toggle--PaddingLeft);
@@ -12698,6 +12704,7 @@ button.pf-c-breadcrumb__link {
12698
12704
  }
12699
12705
 
12700
12706
  .pf-c-expandable-section__toggle-icon {
12707
+ min-width: var(--pf-c-expandable-section__toggle-icon--MinWidth);
12701
12708
  color: var(--pf-c-expandable-section__toggle-icon--Color);
12702
12709
  transition: var(--pf-c-expandable-section__toggle-icon--Transition);
12703
12710
  transform: rotate(var(--pf-c-expandable-section__toggle-icon--Rotate));
@@ -13753,6 +13760,7 @@ label.pf-c-input-group__text {
13753
13760
  --pf-c-label--m-compact--PaddingBottom: 0;
13754
13761
  --pf-c-label--m-compact--PaddingLeft: var(--pf-global--spacer--sm);
13755
13762
  --pf-c-label--m-compact--FontSize: var(--pf-global--FontSize--xs);
13763
+ --pf-c-label--m-compact--m-editable--TextDecorationOffset: 0.0625rem;
13756
13764
  --pf-c-label__content--Color: var(--pf-global--Color--100);
13757
13765
  --pf-c-label--m-outline__content--Color: var(--pf-global--Color--100);
13758
13766
  --pf-c-label__text--MaxWidth: 16ch;
@@ -13767,6 +13775,18 @@ label.pf-c-input-group__text {
13767
13775
  --pf-c-label__c-button--PaddingRight: var(--pf-global--spacer--sm);
13768
13776
  --pf-c-label__c-button--PaddingBottom: var(--pf-global--spacer--xs);
13769
13777
  --pf-c-label__c-button--PaddingLeft: var(--pf-global--spacer--sm);
13778
+ --pf-c-label__editable-text--MaxWidth: 16ch;
13779
+ --pf-c-label__editable-text--BorderWidth: 0;
13780
+ --pf-c-label--m-editable--Cursor: pointer;
13781
+ --pf-c-label--m-editable--TextDecoration: underline;
13782
+ --pf-c-label--m-editable--TextDecorationStyle: dashed;
13783
+ --pf-c-label--m-editable--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
13784
+ --pf-c-label--m-editable--TextDecorationOffset: 0.25rem;
13785
+ --pf-c-label--m-editable--TextDecorationColor: var(--pf-global--BorderColor--200);
13786
+ --pf-c-label--m-editable--hover--TextDecorationColor: var(--pf-global--Color--100);
13787
+ --pf-c-label--m-editable--focus--TextDecorationColor: var(--pf-global--Color--100);
13788
+ --pf-c-label--m-editable--m-editable-active--Cursor: auto;
13789
+ --pf-c-label--m-editable--m-editable-active--TextDecoration: none;
13770
13790
  --pf-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
13771
13791
  --pf-c-label--m-editable--m-editable-active__content--before--BorderWidth: 0;
13772
13792
  --pf-c-label--m-editable--m-editable-active__content--before--BorderColor: transparent;
@@ -13786,6 +13806,7 @@ label.pf-c-input-group__text {
13786
13806
  --pf-c-label--PaddingBottom: var(--pf-c-label--m-compact--PaddingBottom);
13787
13807
  --pf-c-label--PaddingLeft: var(--pf-c-label--m-compact--PaddingLeft);
13788
13808
  --pf-c-label--FontSize: var(--pf-c-label--m-compact--FontSize);
13809
+ --pf-c-label--m-editable--TextDecorationOffset: var(--pf-c-label--m-compact--m-editable--TextDecorationOffset);
13789
13810
  }
13790
13811
 
13791
13812
  .pf-c-label.pf-m-blue {
@@ -13885,7 +13906,26 @@ label.pf-c-input-group__text {
13885
13906
  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--link--focus--before--BorderColor);
13886
13907
  }
13887
13908
 
13909
+ .pf-c-label.pf-m-editable {
13910
+ text-decoration: var(--pf-c-label--m-editable--TextDecoration);
13911
+ cursor: var(--pf-c-label--m-editable--Cursor);
13912
+ text-decoration-style: var(--pf-c-label--m-editable--TextDecorationStyle);
13913
+ text-decoration-thickness: var(--pf-c-label--m-editable--TextDecorationThickness);
13914
+ text-underline-offset: var(--pf-c-label--m-editable--TextDecorationOffset);
13915
+ text-decoration-color: var(--pf-c-label--m-editable--TextDecorationColor);
13916
+ }
13917
+
13918
+ .pf-c-label.pf-m-editable:hover {
13919
+ --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--hover--TextDecorationColor);
13920
+ }
13921
+
13922
+ .pf-c-label.pf-m-editable:focus {
13923
+ --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--focus--TextDecorationColor);
13924
+ }
13925
+
13888
13926
  .pf-c-label.pf-m-editable-active {
13927
+ --pf-c-label--m-editable--Cursor: var(--pf-c-label--m-editable--m-editable-active--Cursor);
13928
+ --pf-c-label--m-editable--TextDecoration: var(--pf-c-label--m-editable--m-editable-active--TextDecoration);
13889
13929
  --pf-c-label--BackgroundColor: var(--pf-c-label--m-editable--m-editable-active--BackgroundColor);
13890
13930
  --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-editable--m-editable-active__content--before--BorderWidth);
13891
13931
  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-editable--m-editable-active__content--before--BorderColor);
@@ -13895,6 +13935,14 @@ label.pf-c-input-group__text {
13895
13935
  visibility: hidden;
13896
13936
  }
13897
13937
 
13938
+ .pf-c-label .pf-c-label__editable-text {
13939
+ overflow: hidden;
13940
+ text-overflow: ellipsis;
13941
+ white-space: nowrap;
13942
+ max-width: var(--pf-c-label__editable-text--MaxWidth);
13943
+ border-width: var(--pf-c-label__editable-text--BorderWidth);
13944
+ }
13945
+
13898
13946
  .pf-c-label .pf-c-button {
13899
13947
  --pf-c-button--FontSize: var(--pf-c-label__c-button--FontSize);
13900
13948
  --pf-c-button--PaddingTop: var(--pf-c-label__c-button--PaddingTop);
@@ -24303,1014 +24351,1014 @@ label.pf-c-radio, .pf-c-radio__label,
24303
24351
  font-size: var(--pf-c-number-input__icon--FontSize);
24304
24352
  }
24305
24353
 
24306
- .pf-c-tree-view {
24307
- --pf-c-tree-view--PaddingTop: var(--pf-global--spacer--sm);
24308
- --pf-c-tree-view--PaddingBottom: var(--pf-global--spacer--sm);
24309
- --pf-c-tree-view__node--indent--base: calc(var(--pf-global--spacer--md) * 2 + var(--pf-c-tree-view__node-toggle-icon--MinWidth));
24310
- --pf-c-tree-view__node--nested-indent--base: calc(var(--pf-c-tree-view__node--indent--base) - var(--pf-global--spacer--md));
24311
- --pf-c-tree-view__node--PaddingTop--base: var(--pf-global--spacer--sm);
24312
- --pf-c-tree-view__node--PaddingTop: var(--pf-c-tree-view__node--PaddingTop--base);
24313
- --pf-c-tree-view__node--PaddingRight: var(--pf-global--spacer--sm);
24314
- --pf-c-tree-view__node--PaddingBottom: var(--pf-global--spacer--sm);
24315
- --pf-c-tree-view__node--PaddingLeft: var(--pf-c-tree-view__node--indent--base);
24316
- --pf-c-tree-view__node--Color: var(--pf-global--Color--100);
24317
- --pf-c-tree-view__node--m-current--Color: var(--pf-global--link--Color);
24318
- --pf-c-tree-view__node--m-current--FontWeight: var(--pf-global--FontWeight--bold);
24319
- --pf-c-tree-view__node-container--Display: contents;
24320
- --pf-c-tree-view__node-content--RowGap: var(--pf-global--spacer--sm);
24321
- --pf-c-tree-view__node-content--Overflow: visible;
24322
- --pf-c-tree-view__node--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
24323
- --pf-c-tree-view__node--focus--BackgroundColor: var(--pf-global--palette--black-200);
24324
- --pf-c-tree-view__list-item__list-item__node-toggle--Top: var(--pf-c-tree-view__node--PaddingTop--base);
24325
- --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
24326
- --pf-c-tree-view__list-item__list-item__node-toggle--TranslateX: -100%;
24327
- --pf-c-tree-view__node-toggle--Position: absolute;
24328
- --pf-c-tree-view__node-toggle-icon--MinWidth: var(--pf-global--FontSize--md);
24329
- --pf-c-tree-view__node-toggle-icon--Transition: var(--pf-global--Transition);
24330
- --pf-c-tree-view__node-toggle-button--PaddingTop: var(--pf-global--spacer--form-element);
24331
- --pf-c-tree-view__node-toggle-button--PaddingRight: var(--pf-global--spacer--md);
24332
- --pf-c-tree-view__node-toggle-button--PaddingBottom: var(--pf-global--spacer--form-element);
24333
- --pf-c-tree-view__node-toggle-button--PaddingLeft: var(--pf-global--spacer--md);
24334
- --pf-c-tree-view__node-toggle-button--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
24335
- --pf-c-tree-view__node-toggle-button--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
24336
- --pf-c-tree-view__node-check--MarginRight: var(--pf-global--spacer--sm);
24337
- --pf-c-tree-view__node-count--MarginLeft: var(--pf-global--spacer--sm);
24338
- --pf-c-tree-view__node-count--c-badge--m-read--BackgroundColor: var(--pf-global--disabled-color--200);
24339
- --pf-c-tree-view__search--PaddingTop: var(--pf-global--spacer--sm);
24340
- --pf-c-tree-view__search--PaddingRight: var(--pf-global--spacer--sm);
24341
- --pf-c-tree-view__search--PaddingBottom: var(--pf-global--spacer--sm);
24342
- --pf-c-tree-view__search--PaddingLeft: var(--pf-global--spacer--sm);
24343
- --pf-c-tree-view__node-icon--PaddingRight: var(--pf-global--spacer--sm);
24344
- --pf-c-tree-view__node-icon--Color: var(--pf-global--icon--Color--light);
24345
- --pf-c-tree-view__node-toggle-icon--base--Rotate: 0;
24346
- --pf-c-tree-view__node-toggle-icon--Rotate: var(--pf-c-tree-view__node-toggle-icon--base--Rotate);
24347
- --pf-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate: 90deg;
24348
- --pf-c-tree-view__node-text--max-lines: 1;
24349
- --pf-c-tree-view__node-title--FontWeight: var(--pf-global--FontWeight--bold);
24350
- --pf-c-tree-view__action--MarginLeft: var(--pf-global--spacer--md);
24351
- --pf-c-tree-view__action--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
24352
- --pf-c-tree-view__action--Color: var(--pf-global--icon--Color--light);
24353
- --pf-c-tree-view__action--hover--Color: var(--pf-global--icon--Color--dark);
24354
- --pf-c-tree-view__action--focus--Color: var(--pf-global--icon--Color--dark);
24355
- --pf-c-tree-view--m-guides--guide--Left: var(--pf-c-tree-view--m-guides--guide-left--base);
24356
- --pf-c-tree-view--m-guides--guide-color--base: var(--pf-global--BorderColor--100);
24357
- --pf-c-tree-view--m-guides--guide-width--base: var(--pf-global--BorderWidth--sm);
24358
- --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));
24359
- --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);
24360
- --pf-c-tree-view--m-guides__list-node--guide-width--base: var(--pf-global--spacer--lg);
24361
- --pf-c-tree-view--m-guides__list-item--before--Top: 0;
24362
- --pf-c-tree-view--m-guides__list-item--before--Width: var(--pf-c-tree-view--m-guides--guide-width--base);
24363
- --pf-c-tree-view--m-guides__list-item--before--Height: 100%;
24364
- --pf-c-tree-view--m-guides__list-item--before--BackgroundColor: var(--pf-c-tree-view--m-guides--guide-color--base);
24365
- --pf-c-tree-view--m-guides__list-item--last-child--before--Top: var(--pf-c-tree-view--m-guides__node--before--Top);
24366
- --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);
24367
- --pf-c-tree-view--m-guides__node--before--Width: 1rem;
24368
- --pf-c-tree-view--m-guides__node--before--Height: var(--pf-c-tree-view--m-guides--guide-width--base);
24369
- --pf-c-tree-view--m-guides__node--before--Top: 1.125rem;
24370
- --pf-c-tree-view--m-guides__node--before--BackgroundColor: var(--pf-c-tree-view--m-guides--guide-color--base);
24371
- --pf-c-tree-view--m-compact--base-border--Left--offset: var(--pf-global--spacer--md);
24372
- --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));
24373
- --pf-c-tree-view--m-compact__node--indent--base: var(--pf-c-tree-view__node--indent--base);
24374
- --pf-c-tree-view--m-compact__node--nested-indent--base: var(--pf-global--spacer--lg);
24375
- --pf-c-tree-view--m-compact--border--Left: var(--pf-c-tree-view--m-compact--base-border--Left);
24376
- --pf-c-tree-view--m-compact__node--PaddingTop: 0;
24377
- --pf-c-tree-view--m-compact__node--PaddingBottom: 0;
24378
- --pf-c-tree-view--m-compact__node--nested--PaddingTop: var(--pf-global--spacer--sm);
24379
- --pf-c-tree-view--m-compact__node--nested--PaddingBottom: var(--pf-global--spacer--sm);
24380
- --pf-c-tree-view--m-compact__list-item__list-item__node-toggle--Top: calc(var(--pf-c-tree-view--m-compact__node-container--PaddingTop));
24381
- --pf-c-tree-view--m-compact__list-item--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
24382
- --pf-c-tree-view--m-compact__list-item--BorderBottomColor: var(--pf-global--BorderColor--100);
24383
- --pf-c-tree-view--m-compact__list-item--before--Top: 0;
24384
- --pf-c-tree-view--m-compact__list-item--last-child--before--Height: var(--pf-c-tree-view--m-compact__node--before--Top);
24385
- --pf-c-tree-view--m-compact__list-item--nested--before--Top: calc(var(--pf-c-tree-view__node--PaddingTop--base) * -1);
24386
- --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));
24387
- --pf-c-tree-view--m-compact__node--PaddingLeft: var(--pf-c-tree-view--m-compact__node--indent--base);
24388
- --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);
24389
- --pf-c-tree-view--m-compact__node--level-2--PaddingLeft: var(--pf-c-tree-view--m-compact__node--indent--base);
24390
- --pf-c-tree-view--m-compact__node-toggle--nested--MarginRight: calc(var(--pf-c-tree-view__node-toggle-button--PaddingLeft) * -.5);
24391
- --pf-c-tree-view--m-compact__node-toggle--nested--MarginLeft: calc(var(--pf-c-tree-view__node-toggle-button--PaddingLeft) * -1.5);
24392
- --pf-c-tree-view--m-compact__node-container--Display: flex;
24393
- --pf-c-tree-view--m-compact__node-container--PaddingBottom--base: var(--pf-global--spacer--lg);
24394
- --pf-c-tree-view--m-compact__node-container--PaddingTop: var(--pf-global--spacer--lg);
24395
- --pf-c-tree-view--m-compact__node-container--PaddingRight: var(--pf-global--spacer--lg);
24396
- --pf-c-tree-view--m-compact__node-container--PaddingBottom: var(--pf-c-tree-view--m-compact__node-container--PaddingBottom--base);
24397
- --pf-c-tree-view--m-compact__node-container--PaddingLeft: var(--pf-global--spacer--xs);
24398
- --pf-c-tree-view--m-compact__node-container--nested--PaddingTop: var(--pf-global--spacer--md);
24399
- --pf-c-tree-view--m-compact__node-container--nested--PaddingRight: var(--pf-global--spacer--lg);
24400
- --pf-c-tree-view--m-compact__node-container--nested--PaddingBottom: var(--pf-global--spacer--md);
24401
- --pf-c-tree-view--m-compact__node-container--nested--PaddingLeft: var(--pf-global--spacer--lg);
24402
- --pf-c-tree-view--m-compact__node-container--nested--BackgroundColor: var(--pf-global--BackgroundColor--200);
24403
- --pf-c-tree-view--m-compact__list-item--m-expanded__node-container--PaddingBottom: 0;
24404
- --pf-c-tree-view--m-no-background__node-container--BackgroundColor: transparent;
24405
- --pf-c-tree-view--m-compact--m-no-background--base-border--Left--offset: var(--pf-global--spacer--sm);
24406
- --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));
24407
- --pf-c-tree-view--m-compact--m-no-background__node--indent--base: var(--pf-c-tree-view__node--indent--base);
24408
- --pf-c-tree-view--m-compact--m-no-background__node--nested-indent--base: var(--pf-global--spacer--2xl);
24409
- --pf-c-tree-view--m-compact--m-no-background__node--nested--PaddingTop: 0;
24410
- --pf-c-tree-view--m-compact--m-no-background__node--nested--PaddingBottom: 0;
24411
- --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);
24412
- padding-top: var(--pf-c-tree-view--PaddingTop);
24413
- padding-bottom: var(--pf-c-tree-view--PaddingBottom);
24414
- }
24415
-
24416
- .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 {
24417
- position: relative;
24418
- }
24419
-
24420
- .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item::before,
24421
- .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,
24422
- .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 {
24423
- position: absolute;
24424
- left: var(--pf-c-tree-view--m-guides--guide--Left);
24425
- content: "";
24426
- }
24427
-
24428
- .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 {
24429
- top: var(--pf-c-tree-view--m-guides__list-item--before--Top);
24430
- width: var(--pf-c-tree-view--m-guides__list-item--before--Width);
24431
- height: var(--pf-c-tree-view--m-guides__list-item--before--Height);
24432
- background-color: var(--pf-c-tree-view--m-guides__list-item--before--BackgroundColor);
24433
- }
24434
-
24435
- .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 {
24436
- top: var(--pf-c-tree-view--m-guides__node--before--Top);
24437
- width: var(--pf-c-tree-view--m-guides__node--before--Width);
24438
- height: var(--pf-c-tree-view--m-guides__node--before--Height);
24439
- background-color: var(--pf-c-tree-view--m-guides__node--before--BackgroundColor);
24440
- }
24441
-
24442
- .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 {
24443
- height: var(--pf-c-tree-view--m-guides__list-item--last-child--before--Height);
24444
- }
24445
-
24446
- .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 {
24447
- --pf-c-tree-view--m-guides--guide--Left: var(--pf-c-tree-view--m-guides--border--nested--Left);
24448
- }
24449
-
24450
- .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 {
24451
- --pf-c-tree-view--m-compact__list-item--BorderBottomWidth: 0;
24452
- }
24453
-
24454
- .pf-c-tree-view.pf-m-compact {
24455
- --pf-c-tree-view__node--PaddingTop: var(--pf-c-tree-view--m-compact__node--PaddingTop);
24456
- --pf-c-tree-view__node--PaddingBottom: var(--pf-c-tree-view--m-compact__node--PaddingBottom);
24457
- --pf-c-tree-view__node-container--Display: var(--pf-c-tree-view--m-compact__node-container--Display);
24458
- --pf-c-tree-view__node--hover--BackgroundColor: transparent;
24459
- --pf-c-tree-view__node--focus--BackgroundColor: transparent;
24460
- --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);
24461
- }
24462
-
24463
- .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item {
24464
- border-bottom: var(--pf-c-tree-view--m-compact__list-item--BorderBottomWidth) solid var(--pf-c-tree-view--m-compact__list-item--BorderBottomColor);
24465
- }
24466
-
24467
- .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item.pf-m-expanded {
24468
- --pf-c-tree-view--m-compact__node-container--PaddingBottom: var(--pf-c-tree-view--m-compact__list-item--m-expanded__node-container--PaddingBottom);
24469
- }
24470
-
24471
- .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
24472
- --pf-c-tree-view__node--PaddingTop: var(--pf-c-tree-view--m-compact__node--nested--PaddingTop);
24473
- --pf-c-tree-view__node--PaddingBottom: var(--pf-c-tree-view--m-compact__node--nested--PaddingBottom);
24474
- --pf-c-tree-view__node-toggle--Position: static;
24475
- --pf-c-tree-view__node--PaddingLeft: var(--pf-c-tree-view--m-compact__node--level-2--PaddingLeft);
24476
- --pf-c-tree-view__list-item__list-item__node-toggle--TranslateX: 0;
24477
- --pf-c-tree-view--m-compact__list-item--BorderBottomWidth: 0;
24478
- --pf-c-tree-view--m-compact__node-container--PaddingBottom: var(--pf-c-tree-view--m-compact__node-container--PaddingBottom--base);
24479
- }
24480
-
24481
- .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item::before,
24482
- .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 {
24483
- left: var(--pf-c-tree-view--m-compact--border--Left);
24484
- }
24485
-
24486
- .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item::before {
24487
- top: var(--pf-c-tree-view--m-compact__list-item--before--Top);
24488
- }
24489
-
24490
- .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 {
24491
- top: var(--pf-c-tree-view--m-compact__node--before--Top);
24492
- }
24493
-
24494
- .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item:last-child::before {
24495
- height: var(--pf-c-tree-view--m-compact__list-item--last-child--before--Height);
24496
- }
24497
-
24498
- .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 {
24499
- --pf-c-tree-view__node--PaddingLeft: var(--pf-c-tree-view--m-compact__node--PaddingLeft);
24500
- --pf-c-tree-view--m-compact--border--Left: var(--pf-c-tree-view--m-compact--border--nested--Left);
24501
- --pf-c-tree-view--m-compact__list-item--before--Top: var(--pf-c-tree-view--m-compact__list-item--nested--before--Top);
24502
- --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);
24503
- }
24504
-
24505
- .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 {
24506
- 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);
24507
- background-color: var(--pf-c-tree-view--m-compact__node-container--nested--BackgroundColor);
24508
- }
24509
-
24510
- .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 {
24511
- margin-right: var(--pf-c-tree-view--m-compact__node-toggle--nested--MarginRight);
24512
- margin-left: var(--pf-c-tree-view--m-compact__node-toggle--nested--MarginLeft);
24513
- }
24514
-
24515
- .pf-c-tree-view.pf-m-compact .pf-c-tree-view__node-container {
24516
- 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);
24354
+ .pf-c-wizard__header {
24355
+ --pf-global--Color--100: var(--pf-global--Color--light-100);
24356
+ --pf-global--Color--200: var(--pf-global--Color--light-200);
24357
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
24358
+ --pf-global--primary-color--100: var(--pf-global--primary-color--light-100);
24359
+ --pf-global--link--Color: var(--pf-global--link--Color--light);
24360
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
24361
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
24517
24362
  }
24518
24363
 
24519
- .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,
24520
- .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 {
24521
- cursor: default;
24364
+ .pf-c-wizard__header .pf-c-card {
24365
+ --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
24522
24366
  }
24523
24367
 
24524
- .pf-c-tree-view.pf-m-compact.pf-m-no-background {
24525
- --pf-c-tree-view--m-compact__node--before--Top: var(--pf-c-tree-view--m-compact--m-no-background__node--before--Top);
24368
+ .pf-c-wizard__header .pf-c-button {
24369
+ --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
24370
+ --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
24371
+ --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
24372
+ --pf-c-button--m-primary--active--Color: var(--pf-global--primary-color--dark-100);
24373
+ --pf-c-button--m-primary--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
24374
+ --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
24375
+ --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
24376
+ --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
24377
+ --pf-c-button--m-secondary--Color: var(--pf-global--Color--light-100);
24378
+ --pf-c-button--m-secondary--hover--Color: var(--pf-global--Color--light-100);
24379
+ --pf-c-button--m-secondary--focus--Color: var(--pf-global--Color--light-100);
24380
+ --pf-c-button--m-secondary--active--Color: var(--pf-global--Color--light-100);
24381
+ --pf-c-button--m-secondary--BorderColor: var(--pf-global--Color--light-100);
24382
+ --pf-c-button--m-secondary--hover--BorderColor: var(--pf-global--Color--light-100);
24383
+ --pf-c-button--m-secondary--focus--BorderColor: var(--pf-global--Color--light-100);
24384
+ --pf-c-button--m-secondary--active--BorderColor: var(--pf-global--Color--light-100);
24526
24385
  }
24527
24386
 
24528
- .pf-c-tree-view.pf-m-compact.pf-m-no-background .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
24529
- --pf-c-tree-view__node--PaddingTop: var(--pf-c-tree-view--m-compact--m-no-background__node--nested--PaddingTop);
24530
- --pf-c-tree-view__node--PaddingBottom: var(--pf-c-tree-view--m-compact--m-no-background__node--nested--PaddingBottom);
24387
+ .pf-c-wizard {
24388
+ --pf-c-wizard--Height: 100%;
24389
+ --pf-c-modal-box--c-wizard--FlexBasis: 47.625rem;
24390
+ --pf-c-wizard__header--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
24391
+ --pf-c-wizard__header--ZIndex: var(--pf-global--ZIndex--md);
24392
+ --pf-c-wizard__header--PaddingTop: var(--pf-global--spacer--lg);
24393
+ --pf-c-wizard__header--PaddingRight: var(--pf-global--spacer--md);
24394
+ --pf-c-wizard__header--PaddingBottom: var(--pf-global--spacer--lg);
24395
+ --pf-c-wizard__header--PaddingLeft: var(--pf-global--spacer--md);
24396
+ --pf-c-wizard__header--lg--PaddingRight: var(--pf-global--spacer--md);
24397
+ --pf-c-wizard__header--lg--PaddingLeft: var(--pf-global--spacer--md);
24398
+ --pf-c-wizard__header--xl--PaddingRight: var(--pf-global--spacer--lg);
24399
+ --pf-c-wizard__header--xl--PaddingLeft: var(--pf-global--spacer--lg);
24400
+ --pf-c-wizard__close--Top: calc(var(--pf-global--spacer--lg) - var(--pf-global--spacer--form-element));
24401
+ --pf-c-wizard__close--Right: 0;
24402
+ --pf-c-wizard__close--xl--Right: var(--pf-global--spacer--lg);
24403
+ --pf-c-wizard__close--FontSize: var(--pf-global--FontSize--xl);
24404
+ --pf-c-wizard__title--PaddingRight: var(--pf-global--spacer--2xl);
24405
+ --pf-c-wizard__description--PaddingTop: var(--pf-global--spacer--sm);
24406
+ --pf-c-wizard__description--Color: var(--pf-global--Color--light-200);
24407
+ --pf-c-wizard__nav-link--Color: var(--pf-global--Color--100);
24408
+ --pf-c-wizard__nav-link--TextDecoration: var(--pf-global--link--TextDecoration);
24409
+ --pf-c-wizard__nav-link--hover--Color: var(--pf-global--link--Color);
24410
+ --pf-c-wizard__nav-link--focus--Color: var(--pf-global--link--Color);
24411
+ --pf-c-wizard__nav-link--m-current--Color: var(--pf-global--link--Color);
24412
+ --pf-c-wizard__nav-link--m-current--FontWeight: var(--pf-global--FontWeight--normal);
24413
+ --pf-c-wizard__nav-link--m-disabled--Color: var(--pf-global--Color--dark-200);
24414
+ --pf-c-wizard__nav-list__nav-list__nav-link--m-current--FontWeight: var(--pf-global--FontWeight--normal);
24415
+ --pf-c-wizard__nav-link-toggle--PaddingRight: var(--pf-global--spacer--sm);
24416
+ --pf-c-wizard__nav-link-toggle--PaddingLeft: var(--pf-global--spacer--sm);
24417
+ --pf-c-wizard__nav-link-toggle--Color: var(--pf-global--Color--200);
24418
+ --pf-c-wizard__nav-link--hover__nav-link-toggle-icon--Color: var(--pf-global--Color--100);
24419
+ --pf-c-wizard__nav-link--focus__nav-link-toggle-icon--Color: var(--pf-global--Color--100);
24420
+ --pf-c-wizard__nav-link-toggle-icon--Transition: var(--pf-global--Transition);
24421
+ --pf-c-wizard__nav-link-toggle-icon--Rotate: 0;
24422
+ --pf-c-wizard__nav-item--m-expanded__link-toggle-icon--Rotate: 90deg;
24423
+ --pf-c-wizard__nav-link--before--Width: 1.5rem;
24424
+ --pf-c-wizard__nav-link--before--Height: 1.5rem;
24425
+ --pf-c-wizard__nav-link--before--Top: 0;
24426
+ --pf-c-wizard__nav-link--before--BackgroundColor: var(--pf-global--BackgroundColor--200);
24427
+ --pf-c-wizard__nav-link--before--BorderRadius: var(--pf-global--BorderRadius--lg);
24428
+ --pf-c-wizard__nav-link--before--Color: var(--pf-global--Color--100);
24429
+ --pf-c-wizard__nav-link--before--FontSize: var(--pf-global--FontSize--sm);
24430
+ --pf-c-wizard__nav-link--before--TranslateX: calc(-100% - var(--pf-global--spacer--sm));
24431
+ --pf-c-wizard__nav-link--m-current--before--BackgroundColor: var(--pf-global--active-color--100);
24432
+ --pf-c-wizard__nav-link--m-current--before--Color: var(--pf-global--Color--light-100);
24433
+ --pf-c-wizard__nav-link--m-disabled--before--BackgroundColor: transparent;
24434
+ --pf-c-wizard__nav-link--m-disabled--before--Color: var(--pf-global--Color--dark-200);
24435
+ --pf-c-wizard__toggle--BackgroundColor: var(--pf-global--BackgroundColor--100);
24436
+ --pf-c-wizard__toggle--ZIndex: var(--pf-global--ZIndex--md);
24437
+ --pf-c-wizard__toggle--BoxShadow: var(--pf-global--BoxShadow--md-bottom);
24438
+ --pf-c-wizard__toggle--PaddingTop: var(--pf-global--spacer--lg);
24439
+ --pf-c-wizard__toggle--PaddingRight: var(--pf-global--spacer--md);
24440
+ --pf-c-wizard__toggle--PaddingBottom: var(--pf-global--spacer--lg);
24441
+ --pf-c-wizard__toggle--PaddingLeft: calc(var(--pf-global--spacer--md) + var(--pf-c-wizard__nav-link--before--Width) + var(--pf-global--spacer--sm));
24442
+ --pf-c-wizard__toggle--m-expanded--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
24443
+ --pf-c-wizard__toggle--m-expanded--BorderBottomColor: var(--pf-global--BorderColor--100);
24444
+ --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));
24445
+ --pf-c-wizard__toggle-num--before--Top: 0;
24446
+ --pf-c-wizard__toggle-list-item--not-last-child--MarginRight: var(--pf-global--spacer--sm);
24447
+ --pf-c-wizard__toggle-list-item--MarginBottom: var(--pf-global--spacer--xs);
24448
+ --pf-c-wizard__toggle-list--MarginRight: var(--pf-global--spacer--sm);
24449
+ --pf-c-wizard__toggle-list--MarginBottom: calc(var(--pf-c-wizard__toggle-list-item--MarginBottom) * -1);
24450
+ --pf-c-wizard__toggle-separator--MarginLeft: var(--pf-global--spacer--sm);
24451
+ --pf-c-wizard__toggle-separator--Color: var(--pf-global--BorderColor--200);
24452
+ --pf-c-wizard__toggle-icon--LineHeight: var(--pf-global--LineHeight--md);
24453
+ --pf-c-wizard__toggle--m-expanded__toggle-icon--Rotate: 180deg;
24454
+ --pf-c-wizard__nav--ZIndex: var(--pf-global--ZIndex--sm);
24455
+ --pf-c-wizard__nav--BackgroundColor: var(--pf-global--BackgroundColor--100);
24456
+ --pf-c-wizard__nav--BoxShadow: var(--pf-global--BoxShadow--md-bottom);
24457
+ --pf-c-wizard__nav--Width: 100%;
24458
+ --pf-c-wizard__nav--lg--Width: 15.625rem;
24459
+ --pf-c-wizard__nav--lg--BorderRightWidth: var(--pf-global--BorderWidth--sm);
24460
+ --pf-c-wizard__nav--lg--BorderRightColor: var(--pf-global--BorderColor--100);
24461
+ --pf-c-wizard__nav-list--PaddingTop: var(--pf-global--spacer--lg);
24462
+ --pf-c-wizard__nav-list--PaddingRight: var(--pf-global--spacer--md);
24463
+ --pf-c-wizard__nav-list--PaddingBottom: var(--pf-global--spacer--lg);
24464
+ --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));
24465
+ --pf-c-wizard__nav-list--lg--PaddingTop: var(--pf-global--spacer--md);
24466
+ --pf-c-wizard__nav-list--lg--PaddingRight: var(--pf-global--spacer--md);
24467
+ --pf-c-wizard__nav-list--lg--PaddingBottom: var(--pf-global--spacer--md);
24468
+ --pf-c-wizard__nav-list--xl--PaddingTop: var(--pf-global--spacer--lg);
24469
+ --pf-c-wizard__nav-list--xl--PaddingRight: var(--pf-global--spacer--lg);
24470
+ --pf-c-wizard__nav-list--xl--PaddingBottom: var(--pf-global--spacer--lg);
24471
+ --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));
24472
+ --pf-c-wizard__nav-list--nested--MarginLeft: var(--pf-global--spacer--md);
24473
+ --pf-c-wizard__nav-list--nested--MarginTop: var(--pf-global--spacer--md);
24474
+ --pf-c-wizard__nav-item--MarginTop: var(--pf-global--spacer--md);
24475
+ --pf-c-wizard__outer-wrap--BackgroundColor: var(--pf-global--BackgroundColor--100);
24476
+ --pf-c-wizard__outer-wrap--lg--PaddingLeft: var(--pf-c-wizard__nav--Width);
24477
+ --pf-c-wizard__outer-wrap--MinHeight: 15.625rem;
24478
+ --pf-c-wizard__main--ZIndex: var(--pf-global--ZIndex--xs);
24479
+ --pf-c-wizard__main-body--PaddingTop: var(--pf-global--spacer--md);
24480
+ --pf-c-wizard__main-body--PaddingRight: var(--pf-global--spacer--md);
24481
+ --pf-c-wizard__main-body--PaddingBottom: var(--pf-global--spacer--md);
24482
+ --pf-c-wizard__main-body--PaddingLeft: var(--pf-global--spacer--md);
24483
+ --pf-c-wizard__main-body--xl--PaddingTop: var(--pf-global--spacer--lg);
24484
+ --pf-c-wizard__main-body--xl--PaddingRight: var(--pf-global--spacer--lg);
24485
+ --pf-c-wizard__main-body--xl--PaddingBottom: var(--pf-global--spacer--lg);
24486
+ --pf-c-wizard__main-body--xl--PaddingLeft: var(--pf-global--spacer--lg);
24487
+ --pf-c-wizard__footer--BackgroundColor: var(--pf-global--BackgroundColor--100);
24488
+ --pf-c-wizard__footer--ZIndex: var(--pf-global--ZIndex--sm);
24489
+ --pf-c-wizard__footer--PaddingTop: var(--pf-global--spacer--md);
24490
+ --pf-c-wizard__footer--PaddingRight: var(--pf-global--spacer--md);
24491
+ --pf-c-wizard__footer--PaddingBottom: var(--pf-global--spacer--sm);
24492
+ --pf-c-wizard__footer--PaddingLeft: var(--pf-global--spacer--md);
24493
+ --pf-c-wizard__footer--xl--PaddingTop: var(--pf-global--spacer--lg);
24494
+ --pf-c-wizard__footer--xl--PaddingRight: var(--pf-global--spacer--lg);
24495
+ --pf-c-wizard__footer--xl--PaddingBottom: var(--pf-global--spacer--md);
24496
+ --pf-c-wizard__footer--xl--PaddingLeft: var(--pf-global--spacer--lg);
24497
+ --pf-c-wizard__footer--BoxShadow: var(--pf-global--BoxShadow--sm-top);
24498
+ --pf-c-wizard__footer--child--MarginRight: var(--pf-global--spacer--md);
24499
+ --pf-c-wizard__footer--child--MarginBottom: var(--pf-global--spacer--sm);
24500
+ --pf-c-wizard__footer-cancel--MarginLeft: calc(var(--pf-global--spacer--2xl) - var(--pf-c-wizard__footer--child--MarginRight));
24501
+ position: relative;
24502
+ display: flex;
24503
+ flex-direction: column;
24504
+ height: var(--pf-c-wizard--Height);
24531
24505
  }
24532
24506
 
24533
- .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 {
24534
- --pf-c-tree-view--m-compact--border--Left: var(--pf-c-tree-view--m-compact--m-no-background--border--nested--Left);
24535
- --pf-c-tree-view__node--PaddingLeft: var(--pf-c-tree-view--m-compact--m-no-background__node--PaddingLeft);
24507
+ @media screen and (min-width: 992px) {
24508
+ .pf-c-wizard {
24509
+ --pf-c-wizard__header--PaddingRight: var(--pf-c-wizard__header--lg--PaddingRight);
24510
+ --pf-c-wizard__header--PaddingLeft: var(--pf-c-wizard__header--lg--PaddingLeft);
24511
+ }
24536
24512
  }
24537
-
24538
- .pf-c-tree-view.pf-m-no-background {
24539
- --pf-c-tree-view--m-compact__node-container--nested--BackgroundColor: var(--pf-c-tree-view--m-no-background__node-container--BackgroundColor);
24513
+ @media screen and (min-width: 1200px) {
24514
+ .pf-c-wizard {
24515
+ --pf-c-wizard__header--PaddingRight: var(--pf-c-wizard__header--xl--PaddingRight);
24516
+ --pf-c-wizard__header--PaddingLeft: var(--pf-c-wizard__header--xl--PaddingLeft);
24517
+ }
24540
24518
  }
24541
-
24542
- .pf-c-tree-view__node-toggle-icon {
24543
- display: inline-block;
24544
- min-width: var(--pf-c-tree-view__node-toggle-icon--MinWidth);
24545
- text-align: center;
24546
- transition: var(--pf-c-tree-view__node-toggle-icon--Transition);
24547
- transform: rotate(var(--pf-c-tree-view__node-toggle-icon--Rotate));
24519
+ @media screen and (min-width: 1200px) {
24520
+ .pf-c-wizard {
24521
+ --pf-c-wizard__close--Right: var(--pf-c-wizard__close--xl--Right);
24522
+ }
24548
24523
  }
24549
-
24550
- .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
24551
- --pf-c-tree-view__node-toggle-icon--Rotate: var(--pf-c-tree-view__node-toggle-icon--base--Rotate);
24524
+ @media screen and (min-width: 992px) {
24525
+ .pf-c-wizard {
24526
+ --pf-c-wizard__nav--Width: var(--pf-c-wizard__nav--lg--Width);
24527
+ --pf-c-wizard__nav--BoxShadow: none;
24528
+ }
24552
24529
  }
24553
-
24554
- .pf-c-tree-view__list-item.pf-m-expanded {
24555
- --pf-c-tree-view__node-toggle-icon--Rotate: var(--pf-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate);
24530
+ @media screen and (min-width: 992px) {
24531
+ .pf-c-wizard {
24532
+ --pf-c-wizard__nav-list--PaddingTop: var(--pf-c-wizard__nav-list--lg--PaddingTop);
24533
+ --pf-c-wizard__nav-list--PaddingRight: var(--pf-c-wizard__nav-list--lg--PaddingRight);
24534
+ --pf-c-wizard__nav-list--PaddingBottom: var(--pf-c-wizard__nav-list--lg--PaddingBottom);
24535
+ }
24556
24536
  }
24557
-
24558
- .pf-c-tree-view__node,
24559
- .pf-c-tree-view__node-container {
24560
- flex: 1 1;
24561
- align-items: flex-start;
24562
- min-width: 0;
24563
- text-align: left;
24564
- cursor: pointer;
24565
- border: 0;
24537
+ @media screen and (min-width: 1200px) {
24538
+ .pf-c-wizard {
24539
+ --pf-c-wizard__nav-list--PaddingTop: var(--pf-c-wizard__nav-list--xl--PaddingTop);
24540
+ --pf-c-wizard__nav-list--PaddingRight: var(--pf-c-wizard__nav-list--xl--PaddingRight);
24541
+ --pf-c-wizard__nav-list--PaddingBottom: var(--pf-c-wizard__nav-list--xl--PaddingBottom);
24542
+ --pf-c-wizard__nav-list--PaddingLeft: var(--pf-c-wizard__nav-list--xl--PaddingLeft);
24543
+ }
24566
24544
  }
24567
-
24568
- .pf-c-tree-view__node {
24569
- position: relative;
24570
- display: flex;
24571
- 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);
24572
- color: var(--pf-c-tree-view__node--Color);
24545
+ @media screen and (min-width: 1200px) {
24546
+ .pf-c-wizard {
24547
+ --pf-c-wizard__main-body--PaddingTop: var(--pf-c-wizard__main-body--xl--PaddingTop);
24548
+ --pf-c-wizard__main-body--PaddingRight: var(--pf-c-wizard__main-body--xl--PaddingRight);
24549
+ --pf-c-wizard__main-body--PaddingBottom: var(--pf-c-wizard__main-body--xl--PaddingBottom);
24550
+ --pf-c-wizard__main-body--PaddingLeft: var(--pf-c-wizard__main-body--xl--PaddingLeft);
24551
+ }
24573
24552
  }
24574
-
24575
- .pf-c-tree-view__node.pf-m-current {
24576
- --pf-c-tree-view__node--Color: var(--pf-c-tree-view__node--m-current--Color);
24577
- font-weight: var(--pf-c-tree-view__node--m-current--FontWeight);
24553
+ @media screen and (min-width: 1200px) {
24554
+ .pf-c-wizard {
24555
+ --pf-c-wizard__footer--PaddingTop: var(--pf-c-wizard__footer--xl--PaddingTop);
24556
+ --pf-c-wizard__footer--PaddingRight: var(--pf-c-wizard__footer--xl--PaddingRight);
24557
+ --pf-c-wizard__footer--PaddingBottom: var(--pf-c-wizard__footer--xl--PaddingBottom);
24558
+ --pf-c-wizard__footer--PaddingLeft: var(--pf-c-wizard__footer--xl--PaddingLeft);
24559
+ }
24560
+ }
24561
+ .pf-c-modal-box .pf-c-wizard {
24562
+ flex: 1 1 var(--pf-c-modal-box--c-wizard--FlexBasis);
24563
+ min-height: 0;
24578
24564
  }
24579
24565
 
24580
- .pf-c-tree-view__node:focus {
24581
- background-color: var(--pf-c-tree-view__node--focus--BackgroundColor);
24566
+ .pf-c-wizard > *:not(.pf-c-wizard__outer-wrap) {
24567
+ flex-shrink: 0;
24582
24568
  }
24583
24569
 
24584
- .pf-c-tree-view__node .pf-c-tree-view__node-count {
24585
- margin-left: var(--pf-c-tree-view__node-count--MarginLeft);
24570
+ .pf-c-wizard.pf-m-finished {
24571
+ --pf-c-wizard__outer-wrap--lg--PaddingLeft: 0;
24586
24572
  }
24587
24573
 
24588
- .pf-c-tree-view__node .pf-c-tree-view__node-count .pf-c-badge.pf-m-read {
24589
- --pf-c-badge--m-read--BackgroundColor: var(--pf-c-tree-view__node-count--c-badge--m-read--BackgroundColor);
24574
+ .pf-c-wizard.pf-m-finished .pf-c-wizard__nav,
24575
+ .pf-c-wizard.pf-m-finished .pf-c-wizard__footer,
24576
+ .pf-c-wizard.pf-m-finished .pf-c-wizard__toggle {
24577
+ display: none;
24578
+ visibility: hidden;
24590
24579
  }
24591
24580
 
24592
- .pf-c-tree-view__node-container {
24593
- display: var(--pf-c-tree-view__node-container--Display);
24594
- flex-grow: 1;
24581
+ .pf-c-wizard__header {
24582
+ color: var(--pf-global--Color--100);
24583
+ position: relative;
24584
+ z-index: var(--pf-c-wizard__header--ZIndex);
24585
+ 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);
24586
+ background-color: var(--pf-c-wizard__header--BackgroundColor);
24595
24587
  }
24596
24588
 
24597
- .pf-c-tree-view__node-content {
24598
- display: flex;
24599
- flex-direction: column;
24600
- overflow: var(--pf-c-tree-view__node-content--Overflow);
24589
+ .pf-c-wizard__header .pf-c-wizard__close {
24590
+ position: absolute;
24591
+ top: var(--pf-c-wizard__close--Top);
24592
+ right: var(--pf-c-wizard__close--Right);
24593
+ font-size: var(--pf-c-wizard__close--FontSize);
24601
24594
  }
24602
24595
 
24603
- .pf-c-tree-view__node-content > * + * {
24604
- margin-top: var(--pf-c-tree-view__node-content--RowGap);
24596
+ .pf-c-wizard__title {
24597
+ padding-right: var(--pf-c-wizard__title--PaddingRight);
24598
+ word-wrap: break-word;
24605
24599
  }
24606
24600
 
24607
- .pf-c-tree-view__node-check {
24608
- margin-right: var(--pf-c-tree-view__node-check--MarginRight);
24601
+ .pf-c-wizard__description {
24602
+ display: none;
24603
+ padding-top: var(--pf-c-wizard__description--PaddingTop);
24604
+ color: var(--pf-c-wizard__description--Color);
24605
+ visibility: hidden;
24609
24606
  }
24610
24607
 
24611
- .pf-c-tree-view__node-toggle {
24612
- position: var(--pf-c-tree-view__node-toggle--Position);
24613
- top: var(--pf-c-tree-view__list-item__list-item__node-toggle--Top);
24614
- left: var(--pf-c-tree-view__list-item__list-item__node-toggle--Left);
24615
- display: inline-flex;
24616
- align-items: center;
24617
- justify-content: center;
24618
- 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);
24619
- margin-top: var(--pf-c-tree-view__node-toggle-button--MarginTop);
24620
- margin-bottom: var(--pf-c-tree-view__node-toggle-button--MarginBottom);
24608
+ @media screen and (min-width: 992px) {
24609
+ .pf-c-wizard__description {
24610
+ display: block;
24611
+ visibility: visible;
24612
+ }
24613
+ }
24614
+ .pf-c-wizard__toggle {
24615
+ position: relative;
24616
+ z-index: var(--pf-c-wizard__toggle--ZIndex);
24617
+ display: flex;
24618
+ justify-content: space-between;
24619
+ width: 100%;
24620
+ 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);
24621
+ background-color: var(--pf-c-wizard__toggle--BackgroundColor);
24621
24622
  border: 0;
24622
- transform: translateX(var(--pf-c-tree-view__list-item__list-item__node-toggle--TranslateX));
24623
+ box-shadow: var(--pf-c-wizard__toggle--BoxShadow);
24623
24624
  }
24624
24625
 
24625
- .pf-c-tree-view__node-title.pf-m-truncate,
24626
- .pf-c-tree-view__node-text.pf-m-truncate {
24627
- --pf-c-tree-view__node-content--Overflow: hidden;
24628
- overflow: hidden;
24629
- text-overflow: ellipsis;
24630
- white-space: nowrap;
24626
+ @media screen and (min-width: 992px) {
24627
+ .pf-c-wizard__toggle {
24628
+ display: none;
24629
+ visibility: hidden;
24630
+ }
24631
24631
  }
24632
-
24633
- .pf-c-tree-view.pf-m-truncate .pf-c-tree-view__node-title,
24634
- .pf-c-tree-view.pf-m-truncate .pf-c-tree-view__node-text {
24635
- --pf-c-tree-view__node-content--Overflow: hidden;
24636
- overflow: hidden;
24637
- text-overflow: ellipsis;
24638
- white-space: nowrap;
24632
+ .pf-c-wizard__toggle.pf-m-expanded {
24633
+ --pf-c-wizard__toggle--BoxShadow: none;
24634
+ border-bottom: var(--pf-c-wizard__toggle--m-expanded--BorderBottomWidth) solid var(--pf-c-wizard__toggle--m-expanded--BorderBottomColor);
24639
24635
  }
24640
24636
 
24641
- .pf-c-tree-view__node-title {
24642
- font-weight: var(--pf-c-tree-view__node-title--FontWeight);
24637
+ .pf-c-wizard__toggle.pf-m-expanded .pf-c-wizard__toggle-icon {
24638
+ transform: rotate(var(--pf-c-wizard__toggle--m-expanded__toggle-icon--Rotate));
24643
24639
  }
24644
24640
 
24645
- .pf-c-tree-view__search {
24646
- 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);
24641
+ .pf-c-wizard__toggle-list {
24642
+ position: relative;
24643
+ display: flex;
24644
+ flex-wrap: wrap;
24645
+ align-items: baseline;
24646
+ margin-right: var(--pf-c-wizard__toggle-list--MarginRight);
24647
+ margin-bottom: var(--pf-c-wizard__toggle-list--MarginBottom);
24648
+ list-style: none;
24647
24649
  }
24648
24650
 
24649
- .pf-c-tree-view__node-icon {
24650
- padding-right: var(--pf-c-tree-view__node-icon--PaddingRight);
24651
- color: var(--pf-c-tree-view__node-icon--Color);
24651
+ .pf-c-wizard__toggle-list-item {
24652
+ margin-bottom: var(--pf-c-wizard__toggle-list-item--MarginBottom);
24653
+ text-align: left;
24654
+ word-break: break-word;
24652
24655
  }
24653
24656
 
24654
- .pf-c-tree-view__content {
24655
- display: flex;
24656
- align-items: center;
24657
+ .pf-c-wizard__toggle-list-item:not(:last-child) {
24658
+ margin-right: var(--pf-c-wizard__toggle-list-item--not-last-child--MarginRight);
24657
24659
  }
24658
24660
 
24659
- .pf-c-tree-view__content:hover,
24660
- .pf-c-tree-view__content:focus-within {
24661
- background-color: var(--pf-c-tree-view__node--hover--BackgroundColor);
24661
+ .pf-c-wizard__toggle-num {
24662
+ --pf-c-wizard__nav-link--before--Top: var(--pf-c-wizard__toggle-num--before--Top);
24662
24663
  }
24663
24664
 
24664
- .pf-c-tree-view__action {
24665
- margin-left: var(--pf-c-tree-view__action--MarginLeft);
24666
- color: var(--pf-c-tree-view__action--Color);
24667
- border: 0;
24665
+ .pf-c-wizard__toggle-separator {
24666
+ margin-left: var(--pf-c-wizard__toggle-separator--MarginLeft);
24667
+ color: var(--pf-c-wizard__toggle-separator--Color);
24668
24668
  }
24669
24669
 
24670
- .pf-c-tree-view__action:hover {
24671
- --pf-c-tree-view__action--Color: var(--pf-c-tree-view__action--hover--Color);
24670
+ .pf-c-wizard__toggle-icon {
24671
+ line-height: var(--pf-c-wizard__toggle-icon--LineHeight);
24672
24672
  }
24673
24673
 
24674
- .pf-c-tree-view__action:focus {
24675
- --pf-c-tree-view__action--Color: var(--pf-c-tree-view__action--focus--Color);
24676
- background-color: var(--pf-c-tree-view__action--focus--BackgroundColor);
24674
+ .pf-c-wizard__outer-wrap {
24675
+ position: relative;
24676
+ display: flex;
24677
+ flex-direction: column;
24678
+ flex-grow: 1;
24679
+ min-height: var(--pf-c-wizard__outer-wrap--MinHeight);
24680
+ background-color: var(--pf-c-wizard__outer-wrap--BackgroundColor);
24677
24681
  }
24678
24682
 
24679
- .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
24680
- --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
24681
- --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));
24682
- --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));
24683
+ @media screen and (min-width: 992px) {
24684
+ .pf-c-wizard__outer-wrap {
24685
+ padding-left: var(--pf-c-wizard__outer-wrap--lg--PaddingLeft);
24686
+ }
24687
+ }
24688
+ .pf-c-wizard__inner-wrap {
24689
+ position: relative;
24690
+ display: flex;
24691
+ flex-direction: column;
24692
+ flex-grow: 1;
24693
+ min-height: 0;
24683
24694
  }
24684
24695
 
24685
- .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
24686
- --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
24687
- --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));
24688
- --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));
24689
- --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));
24690
- --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));
24691
- --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));
24692
- --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));
24696
+ @media screen and (min-width: 992px) {
24697
+ .pf-c-wizard__inner-wrap {
24698
+ position: static;
24699
+ }
24700
+ }
24701
+ .pf-c-wizard__nav {
24702
+ position: absolute;
24703
+ top: 0;
24704
+ left: 0;
24705
+ z-index: var(--pf-c-wizard__nav--ZIndex);
24706
+ display: none;
24707
+ width: var(--pf-c-wizard__nav--Width);
24708
+ max-height: 100%;
24709
+ overflow-y: auto;
24710
+ -webkit-overflow-scrolling: touch;
24711
+ visibility: hidden;
24712
+ background-color: var(--pf-c-wizard__nav--BackgroundColor);
24713
+ box-shadow: var(--pf-c-wizard__nav--BoxShadow);
24693
24714
  }
24694
24715
 
24695
- .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
24696
- --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
24697
- --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));
24698
- --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));
24699
- --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));
24700
- --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));
24701
- --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));
24702
- --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));
24716
+ .pf-c-wizard__nav.pf-m-expanded {
24717
+ display: block;
24718
+ visibility: visible;
24703
24719
  }
24704
24720
 
24705
- .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 {
24706
- --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
24707
- --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));
24708
- --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));
24709
- --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));
24710
- --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));
24711
- --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));
24712
- --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));
24721
+ @media screen and (min-width: 992px) {
24722
+ .pf-c-wizard__nav {
24723
+ display: block;
24724
+ height: 100%;
24725
+ visibility: visible;
24726
+ border-right: var(--pf-c-wizard__nav--lg--BorderRightWidth) solid var(--pf-c-wizard__nav--lg--BorderRightColor);
24727
+ }
24728
+ }
24729
+ .pf-c-wizard__nav-list {
24730
+ padding-top: var(--pf-c-wizard__nav-list--PaddingTop);
24731
+ padding-right: var(--pf-c-wizard__nav-list--PaddingRight);
24732
+ padding-bottom: var(--pf-c-wizard__nav-list--PaddingBottom);
24733
+ padding-left: var(--pf-c-wizard__nav-list--PaddingLeft);
24734
+ list-style: none;
24735
+ counter-reset: wizard-nav-count;
24713
24736
  }
24714
24737
 
24715
- .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 {
24716
- --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
24717
- --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));
24718
- --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));
24719
- --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));
24720
- --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));
24721
- --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));
24722
- --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));
24738
+ .pf-c-wizard__nav-list .pf-c-wizard__nav-list {
24739
+ padding: 0;
24740
+ margin-top: var(--pf-c-wizard__nav-list--nested--MarginTop);
24741
+ margin-left: var(--pf-c-wizard__nav-list--nested--MarginLeft);
24723
24742
  }
24724
24743
 
24725
- .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 {
24726
- --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
24727
- --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));
24728
- --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));
24729
- --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));
24730
- --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));
24731
- --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));
24732
- --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));
24744
+ .pf-c-wizard__nav-list .pf-c-wizard__nav-list .pf-c-wizard__nav-link::before {
24745
+ content: none;
24733
24746
  }
24734
24747
 
24735
- .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 {
24736
- --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
24737
- --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));
24738
- --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));
24739
- --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));
24740
- --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));
24741
- --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));
24742
- --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));
24748
+ .pf-c-wizard__nav-list .pf-c-wizard__nav-list .pf-c-wizard__nav-link.pf-m-current {
24749
+ font-weight: var(--pf-c-wizard__nav-list__nav-list__nav-link--m-current--FontWeight);
24743
24750
  }
24744
24751
 
24745
- .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 {
24746
- --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
24747
- --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));
24748
- --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));
24749
- --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));
24750
- --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));
24751
- --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));
24752
- --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));
24752
+ .pf-c-wizard__nav-item + .pf-c-wizard__nav-item {
24753
+ margin-top: var(--pf-c-wizard__nav-item--MarginTop);
24753
24754
  }
24754
24755
 
24755
- .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 {
24756
- --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
24757
- --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));
24758
- --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));
24759
- --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));
24760
- --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));
24761
- --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));
24762
- --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));
24756
+ .pf-c-wizard__nav-item.pf-m-expandable > .pf-c-wizard__nav-link {
24757
+ display: flex;
24763
24758
  }
24764
24759
 
24765
- .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 {
24766
- --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
24767
- --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));
24768
- --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));
24769
- --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));
24770
- --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));
24771
- --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));
24772
- --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));
24760
+ .pf-c-wizard__nav-item.pf-m-expandable > .pf-c-wizard__nav-list {
24761
+ display: none;
24762
+ visibility: hidden;
24773
24763
  }
24774
24764
 
24775
- .pf-c-wizard__header {
24776
- --pf-global--Color--100: var(--pf-global--Color--light-100);
24777
- --pf-global--Color--200: var(--pf-global--Color--light-200);
24778
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
24779
- --pf-global--primary-color--100: var(--pf-global--primary-color--light-100);
24780
- --pf-global--link--Color: var(--pf-global--link--Color--light);
24781
- --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
24782
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
24765
+ .pf-c-wizard__nav-item.pf-m-expanded > .pf-c-wizard__nav-list {
24766
+ display: block;
24767
+ visibility: visible;
24783
24768
  }
24784
24769
 
24785
- .pf-c-wizard__header .pf-c-card {
24786
- --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
24770
+ .pf-c-wizard__nav-item.pf-m-expanded > .pf-c-wizard__nav-link {
24771
+ --pf-c-wizard__nav-link-toggle-icon--Rotate: var(--pf-c-wizard__nav-item--m-expanded__link-toggle-icon--Rotate);
24787
24772
  }
24788
24773
 
24789
- .pf-c-wizard__header .pf-c-button {
24790
- --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
24791
- --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
24792
- --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
24793
- --pf-c-button--m-primary--active--Color: var(--pf-global--primary-color--dark-100);
24794
- --pf-c-button--m-primary--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
24795
- --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
24796
- --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
24797
- --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
24798
- --pf-c-button--m-secondary--Color: var(--pf-global--Color--light-100);
24799
- --pf-c-button--m-secondary--hover--Color: var(--pf-global--Color--light-100);
24800
- --pf-c-button--m-secondary--focus--Color: var(--pf-global--Color--light-100);
24801
- --pf-c-button--m-secondary--active--Color: var(--pf-global--Color--light-100);
24802
- --pf-c-button--m-secondary--BorderColor: var(--pf-global--Color--light-100);
24803
- --pf-c-button--m-secondary--hover--BorderColor: var(--pf-global--Color--light-100);
24804
- --pf-c-button--m-secondary--focus--BorderColor: var(--pf-global--Color--light-100);
24805
- --pf-c-button--m-secondary--active--BorderColor: var(--pf-global--Color--light-100);
24774
+ .pf-c-wizard__nav-link {
24775
+ position: relative;
24776
+ display: inline-block;
24777
+ width: 100%;
24778
+ color: var(--pf-c-wizard__nav-link--Color);
24779
+ text-align: left;
24780
+ text-decoration: var(--pf-c-wizard__nav-link--TextDecoration);
24781
+ word-break: break-word;
24782
+ border: 0;
24806
24783
  }
24807
24784
 
24808
- .pf-c-wizard {
24809
- --pf-c-wizard--Height: 100%;
24810
- --pf-c-modal-box--c-wizard--FlexBasis: 47.625rem;
24811
- --pf-c-wizard__header--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
24812
- --pf-c-wizard__header--ZIndex: var(--pf-global--ZIndex--md);
24813
- --pf-c-wizard__header--PaddingTop: var(--pf-global--spacer--lg);
24814
- --pf-c-wizard__header--PaddingRight: var(--pf-global--spacer--md);
24815
- --pf-c-wizard__header--PaddingBottom: var(--pf-global--spacer--lg);
24816
- --pf-c-wizard__header--PaddingLeft: var(--pf-global--spacer--md);
24817
- --pf-c-wizard__header--lg--PaddingRight: var(--pf-global--spacer--md);
24818
- --pf-c-wizard__header--lg--PaddingLeft: var(--pf-global--spacer--md);
24819
- --pf-c-wizard__header--xl--PaddingRight: var(--pf-global--spacer--lg);
24820
- --pf-c-wizard__header--xl--PaddingLeft: var(--pf-global--spacer--lg);
24821
- --pf-c-wizard__close--Top: calc(var(--pf-global--spacer--lg) - var(--pf-global--spacer--form-element));
24822
- --pf-c-wizard__close--Right: 0;
24823
- --pf-c-wizard__close--xl--Right: var(--pf-global--spacer--lg);
24824
- --pf-c-wizard__close--FontSize: var(--pf-global--FontSize--xl);
24825
- --pf-c-wizard__title--PaddingRight: var(--pf-global--spacer--2xl);
24826
- --pf-c-wizard__description--PaddingTop: var(--pf-global--spacer--sm);
24827
- --pf-c-wizard__description--Color: var(--pf-global--Color--light-200);
24828
- --pf-c-wizard__nav-link--Color: var(--pf-global--Color--100);
24829
- --pf-c-wizard__nav-link--TextDecoration: var(--pf-global--link--TextDecoration);
24830
- --pf-c-wizard__nav-link--hover--Color: var(--pf-global--link--Color);
24831
- --pf-c-wizard__nav-link--focus--Color: var(--pf-global--link--Color);
24832
- --pf-c-wizard__nav-link--m-current--Color: var(--pf-global--link--Color);
24833
- --pf-c-wizard__nav-link--m-current--FontWeight: var(--pf-global--FontWeight--normal);
24834
- --pf-c-wizard__nav-link--m-disabled--Color: var(--pf-global--Color--dark-200);
24835
- --pf-c-wizard__nav-list__nav-list__nav-link--m-current--FontWeight: var(--pf-global--FontWeight--normal);
24836
- --pf-c-wizard__nav-link-toggle--PaddingRight: var(--pf-global--spacer--sm);
24837
- --pf-c-wizard__nav-link-toggle--PaddingLeft: var(--pf-global--spacer--sm);
24838
- --pf-c-wizard__nav-link-toggle--Color: var(--pf-global--Color--200);
24839
- --pf-c-wizard__nav-link--hover__nav-link-toggle-icon--Color: var(--pf-global--Color--100);
24840
- --pf-c-wizard__nav-link--focus__nav-link-toggle-icon--Color: var(--pf-global--Color--100);
24841
- --pf-c-wizard__nav-link-toggle-icon--Transition: var(--pf-global--Transition);
24842
- --pf-c-wizard__nav-link-toggle-icon--Rotate: 0;
24843
- --pf-c-wizard__nav-item--m-expanded__link-toggle-icon--Rotate: 90deg;
24844
- --pf-c-wizard__nav-link--before--Width: 1.5rem;
24845
- --pf-c-wizard__nav-link--before--Height: 1.5rem;
24846
- --pf-c-wizard__nav-link--before--Top: 0;
24847
- --pf-c-wizard__nav-link--before--BackgroundColor: var(--pf-global--BackgroundColor--200);
24848
- --pf-c-wizard__nav-link--before--BorderRadius: var(--pf-global--BorderRadius--lg);
24849
- --pf-c-wizard__nav-link--before--Color: var(--pf-global--Color--100);
24850
- --pf-c-wizard__nav-link--before--FontSize: var(--pf-global--FontSize--sm);
24851
- --pf-c-wizard__nav-link--before--TranslateX: calc(-100% - var(--pf-global--spacer--sm));
24852
- --pf-c-wizard__nav-link--m-current--before--BackgroundColor: var(--pf-global--active-color--100);
24853
- --pf-c-wizard__nav-link--m-current--before--Color: var(--pf-global--Color--light-100);
24854
- --pf-c-wizard__nav-link--m-disabled--before--BackgroundColor: transparent;
24855
- --pf-c-wizard__nav-link--m-disabled--before--Color: var(--pf-global--Color--dark-200);
24856
- --pf-c-wizard__toggle--BackgroundColor: var(--pf-global--BackgroundColor--100);
24857
- --pf-c-wizard__toggle--ZIndex: var(--pf-global--ZIndex--md);
24858
- --pf-c-wizard__toggle--BoxShadow: var(--pf-global--BoxShadow--md-bottom);
24859
- --pf-c-wizard__toggle--PaddingTop: var(--pf-global--spacer--lg);
24860
- --pf-c-wizard__toggle--PaddingRight: var(--pf-global--spacer--md);
24861
- --pf-c-wizard__toggle--PaddingBottom: var(--pf-global--spacer--lg);
24862
- --pf-c-wizard__toggle--PaddingLeft: calc(var(--pf-global--spacer--md) + var(--pf-c-wizard__nav-link--before--Width) + var(--pf-global--spacer--sm));
24863
- --pf-c-wizard__toggle--m-expanded--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
24864
- --pf-c-wizard__toggle--m-expanded--BorderBottomColor: var(--pf-global--BorderColor--100);
24865
- --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));
24866
- --pf-c-wizard__toggle-num--before--Top: 0;
24867
- --pf-c-wizard__toggle-list-item--not-last-child--MarginRight: var(--pf-global--spacer--sm);
24868
- --pf-c-wizard__toggle-list-item--MarginBottom: var(--pf-global--spacer--xs);
24869
- --pf-c-wizard__toggle-list--MarginRight: var(--pf-global--spacer--sm);
24870
- --pf-c-wizard__toggle-list--MarginBottom: calc(var(--pf-c-wizard__toggle-list-item--MarginBottom) * -1);
24871
- --pf-c-wizard__toggle-separator--MarginLeft: var(--pf-global--spacer--sm);
24872
- --pf-c-wizard__toggle-separator--Color: var(--pf-global--BorderColor--200);
24873
- --pf-c-wizard__toggle-icon--LineHeight: var(--pf-global--LineHeight--md);
24874
- --pf-c-wizard__toggle--m-expanded__toggle-icon--Rotate: 180deg;
24875
- --pf-c-wizard__nav--ZIndex: var(--pf-global--ZIndex--sm);
24876
- --pf-c-wizard__nav--BackgroundColor: var(--pf-global--BackgroundColor--100);
24877
- --pf-c-wizard__nav--BoxShadow: var(--pf-global--BoxShadow--md-bottom);
24878
- --pf-c-wizard__nav--Width: 100%;
24879
- --pf-c-wizard__nav--lg--Width: 15.625rem;
24880
- --pf-c-wizard__nav--lg--BorderRightWidth: var(--pf-global--BorderWidth--sm);
24881
- --pf-c-wizard__nav--lg--BorderRightColor: var(--pf-global--BorderColor--100);
24882
- --pf-c-wizard__nav-list--PaddingTop: var(--pf-global--spacer--lg);
24883
- --pf-c-wizard__nav-list--PaddingRight: var(--pf-global--spacer--md);
24884
- --pf-c-wizard__nav-list--PaddingBottom: var(--pf-global--spacer--lg);
24885
- --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));
24886
- --pf-c-wizard__nav-list--lg--PaddingTop: var(--pf-global--spacer--md);
24887
- --pf-c-wizard__nav-list--lg--PaddingRight: var(--pf-global--spacer--md);
24888
- --pf-c-wizard__nav-list--lg--PaddingBottom: var(--pf-global--spacer--md);
24889
- --pf-c-wizard__nav-list--xl--PaddingTop: var(--pf-global--spacer--lg);
24890
- --pf-c-wizard__nav-list--xl--PaddingRight: var(--pf-global--spacer--lg);
24891
- --pf-c-wizard__nav-list--xl--PaddingBottom: var(--pf-global--spacer--lg);
24892
- --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));
24893
- --pf-c-wizard__nav-list--nested--MarginLeft: var(--pf-global--spacer--md);
24894
- --pf-c-wizard__nav-list--nested--MarginTop: var(--pf-global--spacer--md);
24895
- --pf-c-wizard__nav-item--MarginTop: var(--pf-global--spacer--md);
24896
- --pf-c-wizard__outer-wrap--BackgroundColor: var(--pf-global--BackgroundColor--100);
24897
- --pf-c-wizard__outer-wrap--lg--PaddingLeft: var(--pf-c-wizard__nav--Width);
24898
- --pf-c-wizard__outer-wrap--MinHeight: 15.625rem;
24899
- --pf-c-wizard__main--ZIndex: var(--pf-global--ZIndex--xs);
24900
- --pf-c-wizard__main-body--PaddingTop: var(--pf-global--spacer--md);
24901
- --pf-c-wizard__main-body--PaddingRight: var(--pf-global--spacer--md);
24902
- --pf-c-wizard__main-body--PaddingBottom: var(--pf-global--spacer--md);
24903
- --pf-c-wizard__main-body--PaddingLeft: var(--pf-global--spacer--md);
24904
- --pf-c-wizard__main-body--xl--PaddingTop: var(--pf-global--spacer--lg);
24905
- --pf-c-wizard__main-body--xl--PaddingRight: var(--pf-global--spacer--lg);
24906
- --pf-c-wizard__main-body--xl--PaddingBottom: var(--pf-global--spacer--lg);
24907
- --pf-c-wizard__main-body--xl--PaddingLeft: var(--pf-global--spacer--lg);
24908
- --pf-c-wizard__footer--BackgroundColor: var(--pf-global--BackgroundColor--100);
24909
- --pf-c-wizard__footer--ZIndex: var(--pf-global--ZIndex--sm);
24910
- --pf-c-wizard__footer--PaddingTop: var(--pf-global--spacer--md);
24911
- --pf-c-wizard__footer--PaddingRight: var(--pf-global--spacer--md);
24912
- --pf-c-wizard__footer--PaddingBottom: var(--pf-global--spacer--sm);
24913
- --pf-c-wizard__footer--PaddingLeft: var(--pf-global--spacer--md);
24914
- --pf-c-wizard__footer--xl--PaddingTop: var(--pf-global--spacer--lg);
24915
- --pf-c-wizard__footer--xl--PaddingRight: var(--pf-global--spacer--lg);
24916
- --pf-c-wizard__footer--xl--PaddingBottom: var(--pf-global--spacer--md);
24917
- --pf-c-wizard__footer--xl--PaddingLeft: var(--pf-global--spacer--lg);
24918
- --pf-c-wizard__footer--BoxShadow: var(--pf-global--BoxShadow--sm-top);
24919
- --pf-c-wizard__footer--child--MarginRight: var(--pf-global--spacer--md);
24920
- --pf-c-wizard__footer--child--MarginBottom: var(--pf-global--spacer--sm);
24921
- --pf-c-wizard__footer-cancel--MarginLeft: calc(var(--pf-global--spacer--2xl) - var(--pf-c-wizard__footer--child--MarginRight));
24922
- position: relative;
24923
- display: flex;
24924
- flex-direction: column;
24925
- height: var(--pf-c-wizard--Height);
24785
+ .pf-c-wizard__toggle-num, .pf-c-wizard__nav-link::before {
24786
+ position: absolute;
24787
+ top: var(--pf-c-wizard__nav-link--before--Top);
24788
+ left: 0;
24789
+ display: inline-flex;
24790
+ align-items: center;
24791
+ justify-content: center;
24792
+ width: var(--pf-c-wizard__nav-link--before--Width);
24793
+ height: var(--pf-c-wizard__nav-link--before--Height);
24794
+ font-size: var(--pf-c-wizard__nav-link--before--FontSize);
24795
+ line-height: 1;
24796
+ color: var(--pf-c-wizard__nav-link--before--Color);
24797
+ background-color: var(--pf-c-wizard__nav-link--before--BackgroundColor);
24798
+ border-radius: var(--pf-c-wizard__nav-link--before--BorderRadius);
24799
+ transform: translateX(var(--pf-c-wizard__nav-link--before--TranslateX));
24926
24800
  }
24927
24801
 
24928
- @media screen and (min-width: 992px) {
24929
- .pf-c-wizard {
24930
- --pf-c-wizard__header--PaddingRight: var(--pf-c-wizard__header--lg--PaddingRight);
24931
- --pf-c-wizard__header--PaddingLeft: var(--pf-c-wizard__header--lg--PaddingLeft);
24932
- }
24802
+ .pf-c-wizard__nav-link::before {
24803
+ top: 0;
24804
+ content: counter(wizard-nav-count);
24805
+ counter-increment: wizard-nav-count;
24933
24806
  }
24934
- @media screen and (min-width: 1200px) {
24935
- .pf-c-wizard {
24936
- --pf-c-wizard__header--PaddingRight: var(--pf-c-wizard__header--xl--PaddingRight);
24937
- --pf-c-wizard__header--PaddingLeft: var(--pf-c-wizard__header--xl--PaddingLeft);
24938
- }
24807
+
24808
+ .pf-c-wizard__nav-link:hover {
24809
+ --pf-c-wizard__nav-link--Color: var(--pf-c-wizard__nav-link--hover--Color);
24810
+ --pf-c-wizard__nav-link-toggle--Color: var(--pf-c-wizard__nav-link--hover__nav-link-toggle-icon--Color);
24939
24811
  }
24940
- @media screen and (min-width: 1200px) {
24941
- .pf-c-wizard {
24942
- --pf-c-wizard__close--Right: var(--pf-c-wizard__close--xl--Right);
24943
- }
24812
+
24813
+ .pf-c-wizard__nav-link:focus {
24814
+ --pf-c-wizard__nav-link--Color: var(--pf-c-wizard__nav-link--focus--Color);
24815
+ --pf-c-wizard__nav-link-toggle--Color: var(--pf-c-wizard__nav-link--focus__nav-link-toggle-icon--Color);
24944
24816
  }
24945
- @media screen and (min-width: 992px) {
24946
- .pf-c-wizard {
24947
- --pf-c-wizard__nav--Width: var(--pf-c-wizard__nav--lg--Width);
24948
- --pf-c-wizard__nav--BoxShadow: none;
24949
- }
24817
+
24818
+ .pf-c-wizard__nav-link.pf-m-current {
24819
+ --pf-c-wizard__nav-link--Color: var(--pf-c-wizard__nav-link--m-current--Color);
24820
+ font-weight: var(--pf-c-wizard__nav-link--m-current--FontWeight);
24950
24821
  }
24951
- @media screen and (min-width: 992px) {
24952
- .pf-c-wizard {
24953
- --pf-c-wizard__nav-list--PaddingTop: var(--pf-c-wizard__nav-list--lg--PaddingTop);
24954
- --pf-c-wizard__nav-list--PaddingRight: var(--pf-c-wizard__nav-list--lg--PaddingRight);
24955
- --pf-c-wizard__nav-list--PaddingBottom: var(--pf-c-wizard__nav-list--lg--PaddingBottom);
24956
- }
24822
+
24823
+ .pf-c-wizard__toggle-num, .pf-c-wizard__nav-link.pf-m-current::before {
24824
+ --pf-c-wizard__nav-link--before--BackgroundColor: var(--pf-c-wizard__nav-link--m-current--before--BackgroundColor);
24825
+ --pf-c-wizard__nav-link--before--Color: var(--pf-c-wizard__nav-link--m-current--before--Color);
24957
24826
  }
24958
- @media screen and (min-width: 1200px) {
24959
- .pf-c-wizard {
24960
- --pf-c-wizard__nav-list--PaddingTop: var(--pf-c-wizard__nav-list--xl--PaddingTop);
24961
- --pf-c-wizard__nav-list--PaddingRight: var(--pf-c-wizard__nav-list--xl--PaddingRight);
24962
- --pf-c-wizard__nav-list--PaddingBottom: var(--pf-c-wizard__nav-list--xl--PaddingBottom);
24963
- --pf-c-wizard__nav-list--PaddingLeft: var(--pf-c-wizard__nav-list--xl--PaddingLeft);
24964
- }
24827
+
24828
+ .pf-c-wizard__nav-link:disabled, .pf-c-wizard__nav-link.pf-m-disabled {
24829
+ --pf-c-wizard__nav-link--Color: var(--pf-c-wizard__nav-link--m-disabled--Color);
24830
+ pointer-events: none;
24965
24831
  }
24966
- @media screen and (min-width: 1200px) {
24967
- .pf-c-wizard {
24968
- --pf-c-wizard__main-body--PaddingTop: var(--pf-c-wizard__main-body--xl--PaddingTop);
24969
- --pf-c-wizard__main-body--PaddingRight: var(--pf-c-wizard__main-body--xl--PaddingRight);
24970
- --pf-c-wizard__main-body--PaddingBottom: var(--pf-c-wizard__main-body--xl--PaddingBottom);
24971
- --pf-c-wizard__main-body--PaddingLeft: var(--pf-c-wizard__main-body--xl--PaddingLeft);
24972
- }
24832
+
24833
+ .pf-c-wizard__nav-link:disabled::before, .pf-c-wizard__nav-link.pf-m-disabled::before {
24834
+ --pf-c-wizard__nav-link--before--BackgroundColor: var(--pf-c-wizard__nav-link--m-disabled--before--BackgroundColor);
24835
+ --pf-c-wizard__nav-link--before--Color: var(--pf-c-wizard__nav-link--m-disabled--before--Color);
24973
24836
  }
24974
- @media screen and (min-width: 1200px) {
24975
- .pf-c-wizard {
24976
- --pf-c-wizard__footer--PaddingTop: var(--pf-c-wizard__footer--xl--PaddingTop);
24977
- --pf-c-wizard__footer--PaddingRight: var(--pf-c-wizard__footer--xl--PaddingRight);
24978
- --pf-c-wizard__footer--PaddingBottom: var(--pf-c-wizard__footer--xl--PaddingBottom);
24979
- --pf-c-wizard__footer--PaddingLeft: var(--pf-c-wizard__footer--xl--PaddingLeft);
24980
- }
24837
+
24838
+ .pf-c-wizard__nav-link-text {
24839
+ flex-grow: 1;
24840
+ }
24841
+
24842
+ .pf-c-wizard__nav-link-toggle {
24843
+ padding-right: var(--pf-c-wizard__nav-link-toggle--PaddingRight);
24844
+ padding-left: var(--pf-c-wizard__nav-link-toggle--PaddingLeft);
24845
+ color: var(--pf-c-wizard__nav-link-toggle--Color);
24846
+ }
24847
+
24848
+ .pf-c-wizard__nav-link-toggle-icon {
24849
+ display: inline-block;
24850
+ transition: var(--pf-c-wizard__nav-link-toggle-icon--Transition);
24851
+ transform: rotate(var(--pf-c-wizard__nav-link-toggle-icon--Rotate));
24852
+ }
24853
+
24854
+ .pf-c-wizard__main {
24855
+ z-index: var(--pf-c-wizard__main--ZIndex);
24856
+ flex: 1 1 auto;
24857
+ overflow-x: hidden;
24858
+ overflow-y: auto;
24859
+ word-break: break-word;
24860
+ }
24861
+
24862
+ .pf-c-wizard__main-body {
24863
+ 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);
24864
+ }
24865
+
24866
+ .pf-c-wizard__main-body.pf-m-no-padding {
24867
+ padding: 0;
24868
+ }
24869
+
24870
+ .pf-c-wizard__footer {
24871
+ z-index: var(--pf-c-wizard__footer--ZIndex);
24872
+ display: flex;
24873
+ flex-wrap: wrap;
24874
+ flex-shrink: 0;
24875
+ 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);
24876
+ background-color: var(--pf-c-wizard__footer--BackgroundColor);
24877
+ }
24878
+
24879
+ .pf-c-wizard__footer > * {
24880
+ margin-bottom: var(--pf-c-wizard__footer--child--MarginBottom);
24881
+ }
24882
+
24883
+ .pf-c-wizard__footer > *:not(:last-child) {
24884
+ margin-right: var(--pf-c-wizard__footer--child--MarginRight);
24885
+ }
24886
+
24887
+ .pf-c-page__main-wizard .pf-c-wizard__footer, .pf-c-modal-box .pf-c-wizard__footer {
24888
+ box-shadow: var(--pf-c-wizard__footer--BoxShadow);
24889
+ }
24890
+
24891
+ .pf-c-wizard__footer-cancel {
24892
+ margin-left: var(--pf-c-wizard__footer-cancel--MarginLeft);
24893
+ }
24894
+
24895
+ .pf-c-tree-view {
24896
+ --pf-c-tree-view--PaddingTop: var(--pf-global--spacer--sm);
24897
+ --pf-c-tree-view--PaddingBottom: var(--pf-global--spacer--sm);
24898
+ --pf-c-tree-view__node--indent--base: calc(var(--pf-global--spacer--md) * 2 + var(--pf-c-tree-view__node-toggle-icon--MinWidth));
24899
+ --pf-c-tree-view__node--nested-indent--base: calc(var(--pf-c-tree-view__node--indent--base) - var(--pf-global--spacer--md));
24900
+ --pf-c-tree-view__node--PaddingTop--base: var(--pf-global--spacer--sm);
24901
+ --pf-c-tree-view__node--PaddingTop: var(--pf-c-tree-view__node--PaddingTop--base);
24902
+ --pf-c-tree-view__node--PaddingRight: var(--pf-global--spacer--sm);
24903
+ --pf-c-tree-view__node--PaddingBottom: var(--pf-global--spacer--sm);
24904
+ --pf-c-tree-view__node--PaddingLeft: var(--pf-c-tree-view__node--indent--base);
24905
+ --pf-c-tree-view__node--Color: var(--pf-global--Color--100);
24906
+ --pf-c-tree-view__node--m-current--Color: var(--pf-global--link--Color);
24907
+ --pf-c-tree-view__node--m-current--FontWeight: var(--pf-global--FontWeight--bold);
24908
+ --pf-c-tree-view__node-container--Display: contents;
24909
+ --pf-c-tree-view__node-content--RowGap: var(--pf-global--spacer--sm);
24910
+ --pf-c-tree-view__node-content--Overflow: visible;
24911
+ --pf-c-tree-view__node--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
24912
+ --pf-c-tree-view__node--focus--BackgroundColor: var(--pf-global--palette--black-200);
24913
+ --pf-c-tree-view__list-item__list-item__node-toggle--Top: var(--pf-c-tree-view__node--PaddingTop--base);
24914
+ --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
24915
+ --pf-c-tree-view__list-item__list-item__node-toggle--TranslateX: -100%;
24916
+ --pf-c-tree-view__node-toggle--Position: absolute;
24917
+ --pf-c-tree-view__node-toggle-icon--MinWidth: var(--pf-global--FontSize--md);
24918
+ --pf-c-tree-view__node-toggle-icon--Transition: var(--pf-global--Transition);
24919
+ --pf-c-tree-view__node-toggle-button--PaddingTop: var(--pf-global--spacer--form-element);
24920
+ --pf-c-tree-view__node-toggle-button--PaddingRight: var(--pf-global--spacer--md);
24921
+ --pf-c-tree-view__node-toggle-button--PaddingBottom: var(--pf-global--spacer--form-element);
24922
+ --pf-c-tree-view__node-toggle-button--PaddingLeft: var(--pf-global--spacer--md);
24923
+ --pf-c-tree-view__node-toggle-button--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
24924
+ --pf-c-tree-view__node-toggle-button--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
24925
+ --pf-c-tree-view__node-check--MarginRight: var(--pf-global--spacer--sm);
24926
+ --pf-c-tree-view__node-count--MarginLeft: var(--pf-global--spacer--sm);
24927
+ --pf-c-tree-view__node-count--c-badge--m-read--BackgroundColor: var(--pf-global--disabled-color--200);
24928
+ --pf-c-tree-view__search--PaddingTop: var(--pf-global--spacer--sm);
24929
+ --pf-c-tree-view__search--PaddingRight: var(--pf-global--spacer--sm);
24930
+ --pf-c-tree-view__search--PaddingBottom: var(--pf-global--spacer--sm);
24931
+ --pf-c-tree-view__search--PaddingLeft: var(--pf-global--spacer--sm);
24932
+ --pf-c-tree-view__node-icon--PaddingRight: var(--pf-global--spacer--sm);
24933
+ --pf-c-tree-view__node-icon--Color: var(--pf-global--icon--Color--light);
24934
+ --pf-c-tree-view__node-toggle-icon--base--Rotate: 0;
24935
+ --pf-c-tree-view__node-toggle-icon--Rotate: var(--pf-c-tree-view__node-toggle-icon--base--Rotate);
24936
+ --pf-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate: 90deg;
24937
+ --pf-c-tree-view__node-text--max-lines: 1;
24938
+ --pf-c-tree-view__node-title--FontWeight: var(--pf-global--FontWeight--bold);
24939
+ --pf-c-tree-view__action--MarginLeft: var(--pf-global--spacer--md);
24940
+ --pf-c-tree-view__action--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
24941
+ --pf-c-tree-view__action--Color: var(--pf-global--icon--Color--light);
24942
+ --pf-c-tree-view__action--hover--Color: var(--pf-global--icon--Color--dark);
24943
+ --pf-c-tree-view__action--focus--Color: var(--pf-global--icon--Color--dark);
24944
+ --pf-c-tree-view--m-guides--guide--Left: var(--pf-c-tree-view--m-guides--guide-left--base);
24945
+ --pf-c-tree-view--m-guides--guide-color--base: var(--pf-global--BorderColor--100);
24946
+ --pf-c-tree-view--m-guides--guide-width--base: var(--pf-global--BorderWidth--sm);
24947
+ --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));
24948
+ --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);
24949
+ --pf-c-tree-view--m-guides__list-node--guide-width--base: var(--pf-global--spacer--lg);
24950
+ --pf-c-tree-view--m-guides__list-item--before--Top: 0;
24951
+ --pf-c-tree-view--m-guides__list-item--before--Width: var(--pf-c-tree-view--m-guides--guide-width--base);
24952
+ --pf-c-tree-view--m-guides__list-item--before--Height: 100%;
24953
+ --pf-c-tree-view--m-guides__list-item--before--BackgroundColor: var(--pf-c-tree-view--m-guides--guide-color--base);
24954
+ --pf-c-tree-view--m-guides__list-item--last-child--before--Top: var(--pf-c-tree-view--m-guides__node--before--Top);
24955
+ --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);
24956
+ --pf-c-tree-view--m-guides__node--before--Width: 1rem;
24957
+ --pf-c-tree-view--m-guides__node--before--Height: var(--pf-c-tree-view--m-guides--guide-width--base);
24958
+ --pf-c-tree-view--m-guides__node--before--Top: 1.125rem;
24959
+ --pf-c-tree-view--m-guides__node--before--BackgroundColor: var(--pf-c-tree-view--m-guides--guide-color--base);
24960
+ --pf-c-tree-view--m-compact--base-border--Left--offset: var(--pf-global--spacer--md);
24961
+ --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));
24962
+ --pf-c-tree-view--m-compact__node--indent--base: var(--pf-c-tree-view__node--indent--base);
24963
+ --pf-c-tree-view--m-compact__node--nested-indent--base: var(--pf-global--spacer--lg);
24964
+ --pf-c-tree-view--m-compact--border--Left: var(--pf-c-tree-view--m-compact--base-border--Left);
24965
+ --pf-c-tree-view--m-compact__node--PaddingTop: 0;
24966
+ --pf-c-tree-view--m-compact__node--PaddingBottom: 0;
24967
+ --pf-c-tree-view--m-compact__node--nested--PaddingTop: var(--pf-global--spacer--sm);
24968
+ --pf-c-tree-view--m-compact__node--nested--PaddingBottom: var(--pf-global--spacer--sm);
24969
+ --pf-c-tree-view--m-compact__list-item__list-item__node-toggle--Top: calc(var(--pf-c-tree-view--m-compact__node-container--PaddingTop));
24970
+ --pf-c-tree-view--m-compact__list-item--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
24971
+ --pf-c-tree-view--m-compact__list-item--BorderBottomColor: var(--pf-global--BorderColor--100);
24972
+ --pf-c-tree-view--m-compact__list-item--before--Top: 0;
24973
+ --pf-c-tree-view--m-compact__list-item--last-child--before--Height: var(--pf-c-tree-view--m-compact__node--before--Top);
24974
+ --pf-c-tree-view--m-compact__list-item--nested--before--Top: calc(var(--pf-c-tree-view__node--PaddingTop--base) * -1);
24975
+ --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));
24976
+ --pf-c-tree-view--m-compact__node--PaddingLeft: var(--pf-c-tree-view--m-compact__node--indent--base);
24977
+ --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);
24978
+ --pf-c-tree-view--m-compact__node--level-2--PaddingLeft: var(--pf-c-tree-view--m-compact__node--indent--base);
24979
+ --pf-c-tree-view--m-compact__node-toggle--nested--MarginRight: calc(var(--pf-c-tree-view__node-toggle-button--PaddingLeft) * -.5);
24980
+ --pf-c-tree-view--m-compact__node-toggle--nested--MarginLeft: calc(var(--pf-c-tree-view__node-toggle-button--PaddingLeft) * -1.5);
24981
+ --pf-c-tree-view--m-compact__node-container--Display: flex;
24982
+ --pf-c-tree-view--m-compact__node-container--PaddingBottom--base: var(--pf-global--spacer--lg);
24983
+ --pf-c-tree-view--m-compact__node-container--PaddingTop: var(--pf-global--spacer--lg);
24984
+ --pf-c-tree-view--m-compact__node-container--PaddingRight: var(--pf-global--spacer--lg);
24985
+ --pf-c-tree-view--m-compact__node-container--PaddingBottom: var(--pf-c-tree-view--m-compact__node-container--PaddingBottom--base);
24986
+ --pf-c-tree-view--m-compact__node-container--PaddingLeft: var(--pf-global--spacer--xs);
24987
+ --pf-c-tree-view--m-compact__node-container--nested--PaddingTop: var(--pf-global--spacer--md);
24988
+ --pf-c-tree-view--m-compact__node-container--nested--PaddingRight: var(--pf-global--spacer--lg);
24989
+ --pf-c-tree-view--m-compact__node-container--nested--PaddingBottom: var(--pf-global--spacer--md);
24990
+ --pf-c-tree-view--m-compact__node-container--nested--PaddingLeft: var(--pf-global--spacer--lg);
24991
+ --pf-c-tree-view--m-compact__node-container--nested--BackgroundColor: var(--pf-global--BackgroundColor--200);
24992
+ --pf-c-tree-view--m-compact__list-item--m-expanded__node-container--PaddingBottom: 0;
24993
+ --pf-c-tree-view--m-no-background__node-container--BackgroundColor: transparent;
24994
+ --pf-c-tree-view--m-compact--m-no-background--base-border--Left--offset: var(--pf-global--spacer--sm);
24995
+ --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));
24996
+ --pf-c-tree-view--m-compact--m-no-background__node--indent--base: var(--pf-c-tree-view__node--indent--base);
24997
+ --pf-c-tree-view--m-compact--m-no-background__node--nested-indent--base: var(--pf-global--spacer--2xl);
24998
+ --pf-c-tree-view--m-compact--m-no-background__node--nested--PaddingTop: 0;
24999
+ --pf-c-tree-view--m-compact--m-no-background__node--nested--PaddingBottom: 0;
25000
+ --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);
25001
+ padding-top: var(--pf-c-tree-view--PaddingTop);
25002
+ padding-bottom: var(--pf-c-tree-view--PaddingBottom);
24981
25003
  }
24982
- .pf-c-modal-box .pf-c-wizard {
24983
- flex: 1 1 var(--pf-c-modal-box--c-wizard--FlexBasis);
24984
- min-height: 0;
25004
+
25005
+ .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 {
25006
+ position: relative;
24985
25007
  }
24986
25008
 
24987
- .pf-c-wizard > *:not(.pf-c-wizard__outer-wrap) {
24988
- flex-shrink: 0;
25009
+ .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item::before,
25010
+ .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,
25011
+ .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 {
25012
+ position: absolute;
25013
+ left: var(--pf-c-tree-view--m-guides--guide--Left);
25014
+ content: "";
24989
25015
  }
24990
25016
 
24991
- .pf-c-wizard.pf-m-finished {
24992
- --pf-c-wizard__outer-wrap--lg--PaddingLeft: 0;
25017
+ .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 {
25018
+ top: var(--pf-c-tree-view--m-guides__list-item--before--Top);
25019
+ width: var(--pf-c-tree-view--m-guides__list-item--before--Width);
25020
+ height: var(--pf-c-tree-view--m-guides__list-item--before--Height);
25021
+ background-color: var(--pf-c-tree-view--m-guides__list-item--before--BackgroundColor);
24993
25022
  }
24994
25023
 
24995
- .pf-c-wizard.pf-m-finished .pf-c-wizard__nav,
24996
- .pf-c-wizard.pf-m-finished .pf-c-wizard__footer,
24997
- .pf-c-wizard.pf-m-finished .pf-c-wizard__toggle {
24998
- display: none;
24999
- visibility: hidden;
25024
+ .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 {
25025
+ top: var(--pf-c-tree-view--m-guides__node--before--Top);
25026
+ width: var(--pf-c-tree-view--m-guides__node--before--Width);
25027
+ height: var(--pf-c-tree-view--m-guides__node--before--Height);
25028
+ background-color: var(--pf-c-tree-view--m-guides__node--before--BackgroundColor);
25000
25029
  }
25001
25030
 
25002
- .pf-c-wizard__header {
25003
- color: var(--pf-global--Color--100);
25004
- position: relative;
25005
- z-index: var(--pf-c-wizard__header--ZIndex);
25006
- 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);
25007
- background-color: var(--pf-c-wizard__header--BackgroundColor);
25031
+ .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 {
25032
+ height: var(--pf-c-tree-view--m-guides__list-item--last-child--before--Height);
25008
25033
  }
25009
25034
 
25010
- .pf-c-wizard__header .pf-c-wizard__close {
25011
- position: absolute;
25012
- top: var(--pf-c-wizard__close--Top);
25013
- right: var(--pf-c-wizard__close--Right);
25014
- font-size: var(--pf-c-wizard__close--FontSize);
25035
+ .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 {
25036
+ --pf-c-tree-view--m-guides--guide--Left: var(--pf-c-tree-view--m-guides--border--nested--Left);
25015
25037
  }
25016
25038
 
25017
- .pf-c-wizard__title {
25018
- padding-right: var(--pf-c-wizard__title--PaddingRight);
25019
- word-wrap: break-word;
25039
+ .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 {
25040
+ --pf-c-tree-view--m-compact__list-item--BorderBottomWidth: 0;
25020
25041
  }
25021
25042
 
25022
- .pf-c-wizard__description {
25023
- display: none;
25024
- padding-top: var(--pf-c-wizard__description--PaddingTop);
25025
- color: var(--pf-c-wizard__description--Color);
25026
- visibility: hidden;
25043
+ .pf-c-tree-view.pf-m-compact {
25044
+ --pf-c-tree-view__node--PaddingTop: var(--pf-c-tree-view--m-compact__node--PaddingTop);
25045
+ --pf-c-tree-view__node--PaddingBottom: var(--pf-c-tree-view--m-compact__node--PaddingBottom);
25046
+ --pf-c-tree-view__node-container--Display: var(--pf-c-tree-view--m-compact__node-container--Display);
25047
+ --pf-c-tree-view__node--hover--BackgroundColor: transparent;
25048
+ --pf-c-tree-view__node--focus--BackgroundColor: transparent;
25049
+ --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);
25027
25050
  }
25028
25051
 
25029
- @media screen and (min-width: 992px) {
25030
- .pf-c-wizard__description {
25031
- display: block;
25032
- visibility: visible;
25033
- }
25052
+ .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item {
25053
+ border-bottom: var(--pf-c-tree-view--m-compact__list-item--BorderBottomWidth) solid var(--pf-c-tree-view--m-compact__list-item--BorderBottomColor);
25034
25054
  }
25035
- .pf-c-wizard__toggle {
25036
- position: relative;
25037
- z-index: var(--pf-c-wizard__toggle--ZIndex);
25038
- display: flex;
25039
- justify-content: space-between;
25040
- width: 100%;
25041
- 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);
25042
- background-color: var(--pf-c-wizard__toggle--BackgroundColor);
25043
- border: 0;
25044
- box-shadow: var(--pf-c-wizard__toggle--BoxShadow);
25055
+
25056
+ .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item.pf-m-expanded {
25057
+ --pf-c-tree-view--m-compact__node-container--PaddingBottom: var(--pf-c-tree-view--m-compact__list-item--m-expanded__node-container--PaddingBottom);
25045
25058
  }
25046
25059
 
25047
- @media screen and (min-width: 992px) {
25048
- .pf-c-wizard__toggle {
25049
- display: none;
25050
- visibility: hidden;
25051
- }
25060
+ .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
25061
+ --pf-c-tree-view__node--PaddingTop: var(--pf-c-tree-view--m-compact__node--nested--PaddingTop);
25062
+ --pf-c-tree-view__node--PaddingBottom: var(--pf-c-tree-view--m-compact__node--nested--PaddingBottom);
25063
+ --pf-c-tree-view__node-toggle--Position: static;
25064
+ --pf-c-tree-view__node--PaddingLeft: var(--pf-c-tree-view--m-compact__node--level-2--PaddingLeft);
25065
+ --pf-c-tree-view__list-item__list-item__node-toggle--TranslateX: 0;
25066
+ --pf-c-tree-view--m-compact__list-item--BorderBottomWidth: 0;
25067
+ --pf-c-tree-view--m-compact__node-container--PaddingBottom: var(--pf-c-tree-view--m-compact__node-container--PaddingBottom--base);
25052
25068
  }
25053
- .pf-c-wizard__toggle.pf-m-expanded {
25054
- --pf-c-wizard__toggle--BoxShadow: none;
25055
- border-bottom: var(--pf-c-wizard__toggle--m-expanded--BorderBottomWidth) solid var(--pf-c-wizard__toggle--m-expanded--BorderBottomColor);
25069
+
25070
+ .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item::before,
25071
+ .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 {
25072
+ left: var(--pf-c-tree-view--m-compact--border--Left);
25056
25073
  }
25057
25074
 
25058
- .pf-c-wizard__toggle.pf-m-expanded .pf-c-wizard__toggle-icon {
25059
- transform: rotate(var(--pf-c-wizard__toggle--m-expanded__toggle-icon--Rotate));
25075
+ .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item::before {
25076
+ top: var(--pf-c-tree-view--m-compact__list-item--before--Top);
25060
25077
  }
25061
25078
 
25062
- .pf-c-wizard__toggle-list {
25063
- position: relative;
25064
- display: flex;
25065
- flex-wrap: wrap;
25066
- align-items: baseline;
25067
- margin-right: var(--pf-c-wizard__toggle-list--MarginRight);
25068
- margin-bottom: var(--pf-c-wizard__toggle-list--MarginBottom);
25069
- list-style: none;
25079
+ .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 {
25080
+ top: var(--pf-c-tree-view--m-compact__node--before--Top);
25070
25081
  }
25071
25082
 
25072
- .pf-c-wizard__toggle-list-item {
25073
- margin-bottom: var(--pf-c-wizard__toggle-list-item--MarginBottom);
25074
- text-align: left;
25075
- word-break: break-word;
25083
+ .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item:last-child::before {
25084
+ height: var(--pf-c-tree-view--m-compact__list-item--last-child--before--Height);
25076
25085
  }
25077
25086
 
25078
- .pf-c-wizard__toggle-list-item:not(:last-child) {
25079
- margin-right: var(--pf-c-wizard__toggle-list-item--not-last-child--MarginRight);
25087
+ .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 {
25088
+ --pf-c-tree-view__node--PaddingLeft: var(--pf-c-tree-view--m-compact__node--PaddingLeft);
25089
+ --pf-c-tree-view--m-compact--border--Left: var(--pf-c-tree-view--m-compact--border--nested--Left);
25090
+ --pf-c-tree-view--m-compact__list-item--before--Top: var(--pf-c-tree-view--m-compact__list-item--nested--before--Top);
25091
+ --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);
25080
25092
  }
25081
25093
 
25082
- .pf-c-wizard__toggle-num {
25083
- --pf-c-wizard__nav-link--before--Top: var(--pf-c-wizard__toggle-num--before--Top);
25094
+ .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 {
25095
+ 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);
25096
+ background-color: var(--pf-c-tree-view--m-compact__node-container--nested--BackgroundColor);
25084
25097
  }
25085
25098
 
25086
- .pf-c-wizard__toggle-separator {
25087
- margin-left: var(--pf-c-wizard__toggle-separator--MarginLeft);
25088
- color: var(--pf-c-wizard__toggle-separator--Color);
25099
+ .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 {
25100
+ margin-right: var(--pf-c-tree-view--m-compact__node-toggle--nested--MarginRight);
25101
+ margin-left: var(--pf-c-tree-view--m-compact__node-toggle--nested--MarginLeft);
25089
25102
  }
25090
25103
 
25091
- .pf-c-wizard__toggle-icon {
25092
- line-height: var(--pf-c-wizard__toggle-icon--LineHeight);
25104
+ .pf-c-tree-view.pf-m-compact .pf-c-tree-view__node-container {
25105
+ 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);
25093
25106
  }
25094
25107
 
25095
- .pf-c-wizard__outer-wrap {
25096
- position: relative;
25097
- display: flex;
25098
- flex-direction: column;
25099
- flex-grow: 1;
25100
- min-height: var(--pf-c-wizard__outer-wrap--MinHeight);
25101
- background-color: var(--pf-c-wizard__outer-wrap--BackgroundColor);
25108
+ .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,
25109
+ .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 {
25110
+ cursor: default;
25102
25111
  }
25103
25112
 
25104
- @media screen and (min-width: 992px) {
25105
- .pf-c-wizard__outer-wrap {
25106
- padding-left: var(--pf-c-wizard__outer-wrap--lg--PaddingLeft);
25107
- }
25113
+ .pf-c-tree-view.pf-m-compact.pf-m-no-background {
25114
+ --pf-c-tree-view--m-compact__node--before--Top: var(--pf-c-tree-view--m-compact--m-no-background__node--before--Top);
25108
25115
  }
25109
- .pf-c-wizard__inner-wrap {
25110
- position: relative;
25111
- display: flex;
25112
- flex-direction: column;
25113
- flex-grow: 1;
25114
- min-height: 0;
25116
+
25117
+ .pf-c-tree-view.pf-m-compact.pf-m-no-background .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
25118
+ --pf-c-tree-view__node--PaddingTop: var(--pf-c-tree-view--m-compact--m-no-background__node--nested--PaddingTop);
25119
+ --pf-c-tree-view__node--PaddingBottom: var(--pf-c-tree-view--m-compact--m-no-background__node--nested--PaddingBottom);
25115
25120
  }
25116
25121
 
25117
- @media screen and (min-width: 992px) {
25118
- .pf-c-wizard__inner-wrap {
25119
- position: static;
25120
- }
25122
+ .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 {
25123
+ --pf-c-tree-view--m-compact--border--Left: var(--pf-c-tree-view--m-compact--m-no-background--border--nested--Left);
25124
+ --pf-c-tree-view__node--PaddingLeft: var(--pf-c-tree-view--m-compact--m-no-background__node--PaddingLeft);
25121
25125
  }
25122
- .pf-c-wizard__nav {
25123
- position: absolute;
25124
- top: 0;
25125
- left: 0;
25126
- z-index: var(--pf-c-wizard__nav--ZIndex);
25127
- display: none;
25128
- width: var(--pf-c-wizard__nav--Width);
25129
- max-height: 100%;
25130
- overflow-y: auto;
25131
- -webkit-overflow-scrolling: touch;
25132
- visibility: hidden;
25133
- background-color: var(--pf-c-wizard__nav--BackgroundColor);
25134
- box-shadow: var(--pf-c-wizard__nav--BoxShadow);
25126
+
25127
+ .pf-c-tree-view.pf-m-no-background {
25128
+ --pf-c-tree-view--m-compact__node-container--nested--BackgroundColor: var(--pf-c-tree-view--m-no-background__node-container--BackgroundColor);
25135
25129
  }
25136
25130
 
25137
- .pf-c-wizard__nav.pf-m-expanded {
25138
- display: block;
25139
- visibility: visible;
25131
+ .pf-c-tree-view__node-toggle-icon {
25132
+ display: inline-block;
25133
+ min-width: var(--pf-c-tree-view__node-toggle-icon--MinWidth);
25134
+ text-align: center;
25135
+ transition: var(--pf-c-tree-view__node-toggle-icon--Transition);
25136
+ transform: rotate(var(--pf-c-tree-view__node-toggle-icon--Rotate));
25140
25137
  }
25141
25138
 
25142
- @media screen and (min-width: 992px) {
25143
- .pf-c-wizard__nav {
25144
- display: block;
25145
- height: 100%;
25146
- visibility: visible;
25147
- border-right: var(--pf-c-wizard__nav--lg--BorderRightWidth) solid var(--pf-c-wizard__nav--lg--BorderRightColor);
25148
- }
25139
+ .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
25140
+ --pf-c-tree-view__node-toggle-icon--Rotate: var(--pf-c-tree-view__node-toggle-icon--base--Rotate);
25149
25141
  }
25150
- .pf-c-wizard__nav-list {
25151
- padding-top: var(--pf-c-wizard__nav-list--PaddingTop);
25152
- padding-right: var(--pf-c-wizard__nav-list--PaddingRight);
25153
- padding-bottom: var(--pf-c-wizard__nav-list--PaddingBottom);
25154
- padding-left: var(--pf-c-wizard__nav-list--PaddingLeft);
25155
- list-style: none;
25156
- counter-reset: wizard-nav-count;
25142
+
25143
+ .pf-c-tree-view__list-item.pf-m-expanded {
25144
+ --pf-c-tree-view__node-toggle-icon--Rotate: var(--pf-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate);
25157
25145
  }
25158
25146
 
25159
- .pf-c-wizard__nav-list .pf-c-wizard__nav-list {
25160
- padding: 0;
25161
- margin-top: var(--pf-c-wizard__nav-list--nested--MarginTop);
25162
- margin-left: var(--pf-c-wizard__nav-list--nested--MarginLeft);
25147
+ .pf-c-tree-view__node,
25148
+ .pf-c-tree-view__node-container {
25149
+ flex: 1 1;
25150
+ align-items: flex-start;
25151
+ min-width: 0;
25152
+ text-align: left;
25153
+ cursor: pointer;
25154
+ border: 0;
25163
25155
  }
25164
25156
 
25165
- .pf-c-wizard__nav-list .pf-c-wizard__nav-list .pf-c-wizard__nav-link::before {
25166
- content: none;
25157
+ .pf-c-tree-view__node {
25158
+ position: relative;
25159
+ display: flex;
25160
+ 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);
25161
+ color: var(--pf-c-tree-view__node--Color);
25167
25162
  }
25168
25163
 
25169
- .pf-c-wizard__nav-list .pf-c-wizard__nav-list .pf-c-wizard__nav-link.pf-m-current {
25170
- font-weight: var(--pf-c-wizard__nav-list__nav-list__nav-link--m-current--FontWeight);
25164
+ .pf-c-tree-view__node.pf-m-current {
25165
+ --pf-c-tree-view__node--Color: var(--pf-c-tree-view__node--m-current--Color);
25166
+ font-weight: var(--pf-c-tree-view__node--m-current--FontWeight);
25171
25167
  }
25172
25168
 
25173
- .pf-c-wizard__nav-item + .pf-c-wizard__nav-item {
25174
- margin-top: var(--pf-c-wizard__nav-item--MarginTop);
25169
+ .pf-c-tree-view__node:focus {
25170
+ background-color: var(--pf-c-tree-view__node--focus--BackgroundColor);
25175
25171
  }
25176
25172
 
25177
- .pf-c-wizard__nav-item.pf-m-expandable > .pf-c-wizard__nav-link {
25178
- display: flex;
25173
+ .pf-c-tree-view__node .pf-c-tree-view__node-count {
25174
+ margin-left: var(--pf-c-tree-view__node-count--MarginLeft);
25179
25175
  }
25180
25176
 
25181
- .pf-c-wizard__nav-item.pf-m-expandable > .pf-c-wizard__nav-list {
25182
- display: none;
25183
- visibility: hidden;
25177
+ .pf-c-tree-view__node .pf-c-tree-view__node-count .pf-c-badge.pf-m-read {
25178
+ --pf-c-badge--m-read--BackgroundColor: var(--pf-c-tree-view__node-count--c-badge--m-read--BackgroundColor);
25184
25179
  }
25185
25180
 
25186
- .pf-c-wizard__nav-item.pf-m-expanded > .pf-c-wizard__nav-list {
25187
- display: block;
25188
- visibility: visible;
25181
+ .pf-c-tree-view__node-container {
25182
+ display: var(--pf-c-tree-view__node-container--Display);
25183
+ flex-grow: 1;
25189
25184
  }
25190
25185
 
25191
- .pf-c-wizard__nav-item.pf-m-expanded > .pf-c-wizard__nav-link {
25192
- --pf-c-wizard__nav-link-toggle-icon--Rotate: var(--pf-c-wizard__nav-item--m-expanded__link-toggle-icon--Rotate);
25186
+ .pf-c-tree-view__node-content {
25187
+ display: flex;
25188
+ flex-direction: column;
25189
+ overflow: var(--pf-c-tree-view__node-content--Overflow);
25193
25190
  }
25194
25191
 
25195
- .pf-c-wizard__nav-link {
25196
- position: relative;
25197
- display: inline-block;
25198
- width: 100%;
25199
- color: var(--pf-c-wizard__nav-link--Color);
25200
- text-align: left;
25201
- text-decoration: var(--pf-c-wizard__nav-link--TextDecoration);
25202
- word-break: break-word;
25203
- border: 0;
25192
+ .pf-c-tree-view__node-content > * + * {
25193
+ margin-top: var(--pf-c-tree-view__node-content--RowGap);
25204
25194
  }
25205
25195
 
25206
- .pf-c-wizard__toggle-num, .pf-c-wizard__nav-link::before {
25207
- position: absolute;
25208
- top: var(--pf-c-wizard__nav-link--before--Top);
25209
- left: 0;
25196
+ .pf-c-tree-view__node-check {
25197
+ margin-right: var(--pf-c-tree-view__node-check--MarginRight);
25198
+ }
25199
+
25200
+ .pf-c-tree-view__node-toggle {
25201
+ position: var(--pf-c-tree-view__node-toggle--Position);
25202
+ top: var(--pf-c-tree-view__list-item__list-item__node-toggle--Top);
25203
+ left: var(--pf-c-tree-view__list-item__list-item__node-toggle--Left);
25210
25204
  display: inline-flex;
25211
25205
  align-items: center;
25212
25206
  justify-content: center;
25213
- width: var(--pf-c-wizard__nav-link--before--Width);
25214
- height: var(--pf-c-wizard__nav-link--before--Height);
25215
- font-size: var(--pf-c-wizard__nav-link--before--FontSize);
25216
- line-height: 1;
25217
- color: var(--pf-c-wizard__nav-link--before--Color);
25218
- background-color: var(--pf-c-wizard__nav-link--before--BackgroundColor);
25219
- border-radius: var(--pf-c-wizard__nav-link--before--BorderRadius);
25220
- transform: translateX(var(--pf-c-wizard__nav-link--before--TranslateX));
25207
+ 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);
25208
+ margin-top: var(--pf-c-tree-view__node-toggle-button--MarginTop);
25209
+ margin-bottom: var(--pf-c-tree-view__node-toggle-button--MarginBottom);
25210
+ border: 0;
25211
+ transform: translateX(var(--pf-c-tree-view__list-item__list-item__node-toggle--TranslateX));
25221
25212
  }
25222
25213
 
25223
- .pf-c-wizard__nav-link::before {
25224
- top: 0;
25225
- content: counter(wizard-nav-count);
25226
- counter-increment: wizard-nav-count;
25214
+ .pf-c-tree-view__node-title.pf-m-truncate,
25215
+ .pf-c-tree-view__node-text.pf-m-truncate {
25216
+ --pf-c-tree-view__node-content--Overflow: hidden;
25217
+ overflow: hidden;
25218
+ text-overflow: ellipsis;
25219
+ white-space: nowrap;
25227
25220
  }
25228
25221
 
25229
- .pf-c-wizard__nav-link:hover {
25230
- --pf-c-wizard__nav-link--Color: var(--pf-c-wizard__nav-link--hover--Color);
25231
- --pf-c-wizard__nav-link-toggle--Color: var(--pf-c-wizard__nav-link--hover__nav-link-toggle-icon--Color);
25222
+ .pf-c-tree-view.pf-m-truncate .pf-c-tree-view__node-title,
25223
+ .pf-c-tree-view.pf-m-truncate .pf-c-tree-view__node-text {
25224
+ --pf-c-tree-view__node-content--Overflow: hidden;
25225
+ overflow: hidden;
25226
+ text-overflow: ellipsis;
25227
+ white-space: nowrap;
25232
25228
  }
25233
25229
 
25234
- .pf-c-wizard__nav-link:focus {
25235
- --pf-c-wizard__nav-link--Color: var(--pf-c-wizard__nav-link--focus--Color);
25236
- --pf-c-wizard__nav-link-toggle--Color: var(--pf-c-wizard__nav-link--focus__nav-link-toggle-icon--Color);
25230
+ .pf-c-tree-view__node-title {
25231
+ font-weight: var(--pf-c-tree-view__node-title--FontWeight);
25237
25232
  }
25238
25233
 
25239
- .pf-c-wizard__nav-link.pf-m-current {
25240
- --pf-c-wizard__nav-link--Color: var(--pf-c-wizard__nav-link--m-current--Color);
25241
- font-weight: var(--pf-c-wizard__nav-link--m-current--FontWeight);
25234
+ .pf-c-tree-view__search {
25235
+ 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);
25242
25236
  }
25243
25237
 
25244
- .pf-c-wizard__toggle-num, .pf-c-wizard__nav-link.pf-m-current::before {
25245
- --pf-c-wizard__nav-link--before--BackgroundColor: var(--pf-c-wizard__nav-link--m-current--before--BackgroundColor);
25246
- --pf-c-wizard__nav-link--before--Color: var(--pf-c-wizard__nav-link--m-current--before--Color);
25238
+ .pf-c-tree-view__node-icon {
25239
+ padding-right: var(--pf-c-tree-view__node-icon--PaddingRight);
25240
+ color: var(--pf-c-tree-view__node-icon--Color);
25247
25241
  }
25248
25242
 
25249
- .pf-c-wizard__nav-link:disabled, .pf-c-wizard__nav-link.pf-m-disabled {
25250
- --pf-c-wizard__nav-link--Color: var(--pf-c-wizard__nav-link--m-disabled--Color);
25251
- pointer-events: none;
25243
+ .pf-c-tree-view__content {
25244
+ display: flex;
25245
+ align-items: center;
25252
25246
  }
25253
25247
 
25254
- .pf-c-wizard__nav-link:disabled::before, .pf-c-wizard__nav-link.pf-m-disabled::before {
25255
- --pf-c-wizard__nav-link--before--BackgroundColor: var(--pf-c-wizard__nav-link--m-disabled--before--BackgroundColor);
25256
- --pf-c-wizard__nav-link--before--Color: var(--pf-c-wizard__nav-link--m-disabled--before--Color);
25248
+ .pf-c-tree-view__content:hover,
25249
+ .pf-c-tree-view__content:focus-within {
25250
+ background-color: var(--pf-c-tree-view__node--hover--BackgroundColor);
25257
25251
  }
25258
25252
 
25259
- .pf-c-wizard__nav-link-text {
25260
- flex-grow: 1;
25253
+ .pf-c-tree-view__action {
25254
+ margin-left: var(--pf-c-tree-view__action--MarginLeft);
25255
+ color: var(--pf-c-tree-view__action--Color);
25256
+ border: 0;
25261
25257
  }
25262
25258
 
25263
- .pf-c-wizard__nav-link-toggle {
25264
- padding-right: var(--pf-c-wizard__nav-link-toggle--PaddingRight);
25265
- padding-left: var(--pf-c-wizard__nav-link-toggle--PaddingLeft);
25266
- color: var(--pf-c-wizard__nav-link-toggle--Color);
25259
+ .pf-c-tree-view__action:hover {
25260
+ --pf-c-tree-view__action--Color: var(--pf-c-tree-view__action--hover--Color);
25267
25261
  }
25268
25262
 
25269
- .pf-c-wizard__nav-link-toggle-icon {
25270
- display: inline-block;
25271
- transition: var(--pf-c-wizard__nav-link-toggle-icon--Transition);
25272
- transform: rotate(var(--pf-c-wizard__nav-link-toggle-icon--Rotate));
25263
+ .pf-c-tree-view__action:focus {
25264
+ --pf-c-tree-view__action--Color: var(--pf-c-tree-view__action--focus--Color);
25265
+ background-color: var(--pf-c-tree-view__action--focus--BackgroundColor);
25273
25266
  }
25274
25267
 
25275
- .pf-c-wizard__main {
25276
- z-index: var(--pf-c-wizard__main--ZIndex);
25277
- flex: 1 1 auto;
25278
- overflow-x: hidden;
25279
- overflow-y: auto;
25280
- word-break: break-word;
25268
+ .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
25269
+ --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
25270
+ --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));
25271
+ --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));
25281
25272
  }
25282
25273
 
25283
- .pf-c-wizard__main-body {
25284
- 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);
25274
+ .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
25275
+ --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
25276
+ --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));
25277
+ --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));
25278
+ --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));
25279
+ --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));
25280
+ --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));
25281
+ --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));
25285
25282
  }
25286
25283
 
25287
- .pf-c-wizard__main-body.pf-m-no-padding {
25288
- padding: 0;
25284
+ .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
25285
+ --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
25286
+ --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));
25287
+ --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));
25288
+ --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));
25289
+ --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));
25290
+ --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));
25291
+ --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));
25289
25292
  }
25290
25293
 
25291
- .pf-c-wizard__footer {
25292
- z-index: var(--pf-c-wizard__footer--ZIndex);
25293
- display: flex;
25294
- flex-wrap: wrap;
25295
- flex-shrink: 0;
25296
- 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);
25297
- background-color: var(--pf-c-wizard__footer--BackgroundColor);
25294
+ .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 {
25295
+ --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
25296
+ --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));
25297
+ --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));
25298
+ --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));
25299
+ --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));
25300
+ --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));
25301
+ --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));
25298
25302
  }
25299
25303
 
25300
- .pf-c-wizard__footer > * {
25301
- margin-bottom: var(--pf-c-wizard__footer--child--MarginBottom);
25304
+ .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 {
25305
+ --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
25306
+ --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));
25307
+ --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));
25308
+ --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));
25309
+ --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));
25310
+ --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));
25311
+ --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));
25302
25312
  }
25303
25313
 
25304
- .pf-c-wizard__footer > *:not(:last-child) {
25305
- margin-right: var(--pf-c-wizard__footer--child--MarginRight);
25314
+ .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 {
25315
+ --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
25316
+ --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));
25317
+ --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));
25318
+ --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));
25319
+ --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));
25320
+ --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));
25321
+ --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));
25306
25322
  }
25307
25323
 
25308
- .pf-c-page__main-wizard .pf-c-wizard__footer, .pf-c-modal-box .pf-c-wizard__footer {
25309
- box-shadow: var(--pf-c-wizard__footer--BoxShadow);
25324
+ .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 {
25325
+ --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
25326
+ --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));
25327
+ --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));
25328
+ --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));
25329
+ --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));
25330
+ --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));
25331
+ --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));
25310
25332
  }
25311
25333
 
25312
- .pf-c-wizard__footer-cancel {
25313
- margin-left: var(--pf-c-wizard__footer-cancel--MarginLeft);
25334
+ .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 {
25335
+ --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
25336
+ --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));
25337
+ --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));
25338
+ --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));
25339
+ --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));
25340
+ --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));
25341
+ --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));
25342
+ }
25343
+
25344
+ .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 {
25345
+ --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
25346
+ --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));
25347
+ --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));
25348
+ --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));
25349
+ --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));
25350
+ --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));
25351
+ --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));
25352
+ }
25353
+
25354
+ .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 {
25355
+ --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
25356
+ --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));
25357
+ --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));
25358
+ --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));
25359
+ --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));
25360
+ --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));
25361
+ --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));
25314
25362
  }
25315
25363
 
25316
25364
  .pf-c-draggable {