@patternfly/react-core 4.227.8 → 4.228.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (89) hide show
  1. package/CHANGELOG.md +30 -0
  2. package/dist/esm/components/Menu/MenuItem.d.ts +3 -1
  3. package/dist/esm/components/Menu/MenuItem.d.ts.map +1 -1
  4. package/dist/esm/components/Menu/MenuItem.js +7 -5
  5. package/dist/esm/components/Menu/MenuItem.js.map +1 -1
  6. package/dist/esm/components/MenuToggle/MenuToggle.d.ts +6 -12
  7. package/dist/esm/components/MenuToggle/MenuToggle.d.ts.map +1 -1
  8. package/dist/esm/components/MenuToggle/MenuToggle.js +12 -8
  9. package/dist/esm/components/MenuToggle/MenuToggle.js.map +1 -1
  10. package/dist/esm/components/Nav/NavItem.d.ts.map +1 -1
  11. package/dist/esm/components/Nav/NavItem.js +5 -1
  12. package/dist/esm/components/Nav/NavItem.js.map +1 -1
  13. package/dist/esm/components/Tabs/OverflowTab.d.ts +16 -0
  14. package/dist/esm/components/Tabs/OverflowTab.d.ts.map +1 -0
  15. package/dist/esm/components/Tabs/OverflowTab.js +74 -0
  16. package/dist/esm/components/Tabs/OverflowTab.js.map +1 -0
  17. package/dist/esm/components/Tabs/Tabs.d.ts +12 -0
  18. package/dist/esm/components/Tabs/Tabs.d.ts.map +1 -1
  19. package/dist/esm/components/Tabs/Tabs.js +36 -13
  20. package/dist/esm/components/Tabs/Tabs.js.map +1 -1
  21. package/dist/esm/components/TextInputGroup/TextInputGroup.d.ts +2 -0
  22. package/dist/esm/components/TextInputGroup/TextInputGroup.d.ts.map +1 -1
  23. package/dist/esm/components/TextInputGroup/TextInputGroup.js +2 -2
  24. package/dist/esm/components/TextInputGroup/TextInputGroup.js.map +1 -1
  25. package/dist/esm/components/TextInputGroup/TextInputGroupMain.d.ts +1 -1
  26. package/dist/esm/components/TextInputGroup/TextInputGroupMain.d.ts.map +1 -1
  27. package/dist/esm/components/TreeView/TreeView.d.ts +2 -0
  28. package/dist/esm/components/TreeView/TreeView.d.ts.map +1 -1
  29. package/dist/esm/components/TreeView/TreeView.js +3 -3
  30. package/dist/esm/components/TreeView/TreeView.js.map +1 -1
  31. package/dist/esm/components/TreeView/TreeViewListItem.d.ts +2 -0
  32. package/dist/esm/components/TreeView/TreeViewListItem.d.ts.map +1 -1
  33. package/dist/esm/components/TreeView/TreeViewListItem.js +23 -14
  34. package/dist/esm/components/TreeView/TreeViewListItem.js.map +1 -1
  35. package/dist/js/components/Menu/MenuItem.d.ts +3 -1
  36. package/dist/js/components/Menu/MenuItem.d.ts.map +1 -1
  37. package/dist/js/components/Menu/MenuItem.js +7 -5
  38. package/dist/js/components/Menu/MenuItem.js.map +1 -1
  39. package/dist/js/components/MenuToggle/MenuToggle.d.ts +6 -12
  40. package/dist/js/components/MenuToggle/MenuToggle.d.ts.map +1 -1
  41. package/dist/js/components/MenuToggle/MenuToggle.js +12 -8
  42. package/dist/js/components/MenuToggle/MenuToggle.js.map +1 -1
  43. package/dist/js/components/Nav/NavItem.d.ts.map +1 -1
  44. package/dist/js/components/Nav/NavItem.js +5 -1
  45. package/dist/js/components/Nav/NavItem.js.map +1 -1
  46. package/dist/js/components/Tabs/OverflowTab.d.ts +16 -0
  47. package/dist/js/components/Tabs/OverflowTab.d.ts.map +1 -0
  48. package/dist/js/components/Tabs/OverflowTab.js +78 -0
  49. package/dist/js/components/Tabs/OverflowTab.js.map +1 -0
  50. package/dist/js/components/Tabs/Tabs.d.ts +12 -0
  51. package/dist/js/components/Tabs/Tabs.d.ts.map +1 -1
  52. package/dist/js/components/Tabs/Tabs.js +36 -13
  53. package/dist/js/components/Tabs/Tabs.js.map +1 -1
  54. package/dist/js/components/TextInputGroup/TextInputGroup.d.ts +2 -0
  55. package/dist/js/components/TextInputGroup/TextInputGroup.d.ts.map +1 -1
  56. package/dist/js/components/TextInputGroup/TextInputGroup.js +2 -2
  57. package/dist/js/components/TextInputGroup/TextInputGroup.js.map +1 -1
  58. package/dist/js/components/TextInputGroup/TextInputGroupMain.d.ts +1 -1
  59. package/dist/js/components/TextInputGroup/TextInputGroupMain.d.ts.map +1 -1
  60. package/dist/js/components/TreeView/TreeView.d.ts +2 -0
  61. package/dist/js/components/TreeView/TreeView.d.ts.map +1 -1
  62. package/dist/js/components/TreeView/TreeView.js +3 -3
  63. package/dist/js/components/TreeView/TreeView.js.map +1 -1
  64. package/dist/js/components/TreeView/TreeViewListItem.d.ts +2 -0
  65. package/dist/js/components/TreeView/TreeViewListItem.d.ts.map +1 -1
  66. package/dist/js/components/TreeView/TreeViewListItem.js +23 -14
  67. package/dist/js/components/TreeView/TreeViewListItem.js.map +1 -1
  68. package/dist/styles/base-no-reset.css +9 -0
  69. package/dist/styles/base.css +9 -0
  70. package/dist/umd/react-core.css +767 -777
  71. package/dist/umd/react-core.js +159 -52
  72. package/dist/umd/react-core.min.css +507 -517
  73. package/dist/umd/react-core.min.js +5 -5
  74. package/package.json +6 -6
  75. package/src/components/Menu/MenuItem.tsx +11 -5
  76. package/src/components/MenuToggle/MenuToggle.tsx +63 -25
  77. package/src/components/Nav/NavItem.tsx +6 -0
  78. package/src/components/Tabs/OverflowTab.tsx +141 -0
  79. package/src/components/Tabs/Tabs.tsx +72 -25
  80. package/src/components/Tabs/examples/Tabs.md +6 -1
  81. package/src/components/Tabs/examples/TabsHorizontalOverflow.tsx +67 -0
  82. package/src/components/TextInputGroup/TextInputGroup.tsx +9 -1
  83. package/src/components/TextInputGroup/TextInputGroupMain.tsx +1 -1
  84. package/src/components/TreeView/TreeView.tsx +5 -0
  85. package/src/components/TreeView/TreeViewListItem.tsx +31 -17
  86. package/src/components/TreeView/__tests__/__snapshots__/TreeView.test.tsx.snap +299 -299
  87. package/src/components/TreeView/examples/TreeView.md +125 -7
  88. package/src/demos/ComposableMenu/ComposableMenu.md +8 -0
  89. package/src/demos/ComposableMenu/examples/ComposableTypeaheadSelect.tsx +196 -0
@@ -587,8 +587,8 @@
587
587
  --pf-c-app-launcher__group-title--PaddingRight: var(--pf-c-app-launcher__menu-item--PaddingRight);
588
588
  --pf-c-app-launcher__group-title--PaddingBottom: var(--pf-c-app-launcher__menu-item--PaddingBottom);
589
589
  --pf-c-app-launcher__group-title--PaddingLeft: var(--pf-c-app-launcher__menu-item--PaddingLeft);
590
- --pf-c-app-launcher__group-title--FontSize: var(--pf-global--FontSize--sm);
591
- --pf-c-app-launcher__group-title--FontWeight: var(--pf-global--FontWeight--semi-bold);
590
+ --pf-c-app-launcher__group-title--FontSize: var(--pf-global--FontSize--xs);
591
+ --pf-c-app-launcher__group-title--FontWeight: var(--pf-global--FontWeight--normal);
592
592
  --pf-c-app-launcher__group-title--Color: var(--pf-global--Color--dark-200);
593
593
  --pf-c-app-launcher--c-divider--MarginTop: var(--pf-global--spacer--sm);
594
594
  --pf-c-app-launcher--c-divider--MarginBottom: var(--pf-global--spacer--sm);
@@ -766,8 +766,6 @@
766
766
  --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-global--Color--200);
767
767
  --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--Color: var(--pf-global--palette--gold-300);
768
768
  --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--hover--Color: var(--pf-global--palette--gold-100);
769
- --pf-c-app-launcher__group-title--FontSize: var(--pf-global--FontSize--xs);
770
- --pf-c-app-launcher__group-title--FontWeight: var(--pf-global--FontWeight--bold);
771
769
  }
772
770
 
773
771
  .pf-c-form-control {
@@ -7348,8 +7346,8 @@ label.pf-c-check, .pf-c-check__label,
7348
7346
  --pf-c-dropdown__group-title--PaddingRight: var(--pf-c-dropdown__menu-item--PaddingRight);
7349
7347
  --pf-c-dropdown__group-title--PaddingBottom: var(--pf-c-dropdown__menu-item--PaddingBottom);
7350
7348
  --pf-c-dropdown__group-title--PaddingLeft: var(--pf-c-dropdown__menu-item--PaddingLeft);
7351
- --pf-c-dropdown__group-title--FontSize: var(--pf-global--FontSize--sm);
7352
- --pf-c-dropdown__group-title--FontWeight: var(--pf-global--FontWeight--semi-bold);
7349
+ --pf-c-dropdown__group-title--FontSize: var(--pf-global--FontSize--xs);
7350
+ --pf-c-dropdown__group-title--FontWeight: var(--pf-global--FontWeight--normal);
7353
7351
  --pf-c-dropdown__group-title--Color: var(--pf-global--Color--dark-200);
7354
7352
  --pf-c-dropdown__toggle-image--MarginTop: 0;
7355
7353
  --pf-c-dropdown__toggle-image--MarginBottom: 0;
@@ -7952,8 +7950,6 @@ label.pf-c-check, .pf-c-check__label,
7952
7950
  --pf-c-dropdown__menu--Top: 100%;
7953
7951
  --pf-c-dropdown--m-top__menu--TranslateY: -100%;
7954
7952
  --pf-c-dropdown__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
7955
- --pf-c-dropdown__group-title--FontSize: var(--pf-global--FontSize--xs);
7956
- --pf-c-dropdown__group-title--FontWeight: var(--pf-global--FontWeight--bold);
7957
7953
  }
7958
7954
 
7959
7955
  :where(.pf-theme-dark) .pf-c-dropdown__toggle:not(.pf-m-plain):disabled, :where(.pf-theme-dark) .pf-c-dropdown__toggle:not(.pf-m-plain).pf-m-disabled {
@@ -9438,439 +9434,118 @@ label.pf-c-input-group__text {
9438
9434
  --pf-c-input-group__text--BackgroundColor: transparent;
9439
9435
  }
9440
9436
 
9441
- .pf-c-jump-links {
9442
- --pf-c-jump-links__list--Display: flex;
9443
- --pf-c-jump-links__list--Visibility: visible;
9444
- --pf-c-jump-links__list--PaddingTop: 0;
9445
- --pf-c-jump-links__list--PaddingRight: var(--pf-global--spacer--md);
9446
- --pf-c-jump-links__list--PaddingBottom: 0;
9447
- --pf-c-jump-links__list--PaddingLeft: var(--pf-global--spacer--md);
9448
- --pf-c-jump-links--m-vertical__list--PaddingTop: var(--pf-global--spacer--md);
9449
- --pf-c-jump-links--m-vertical__list--PaddingRight: 0;
9450
- --pf-c-jump-links--m-vertical__list--PaddingBottom: var(--pf-global--spacer--md);
9451
- --pf-c-jump-links--m-vertical__list--PaddingLeft: 0;
9452
- --pf-c-jump-links__list--FlexDirection: row;
9453
- --pf-c-jump-links--m-vertical__list--FlexDirection: column;
9454
- --pf-c-jump-links__list--before--BorderColor: var(--pf-global--BorderColor--100);
9455
- --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-global--BorderWidth--sm);
9456
- --pf-c-jump-links__list--before--BorderRightWidth: 0;
9457
- --pf-c-jump-links__list--before--BorderBottomWidth: 0;
9458
- --pf-c-jump-links__list--before--BorderLeftWidth: 0;
9459
- --pf-c-jump-links--m-vertical__list--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
9460
- --pf-c-jump-links--m-vertical__list--before--BorderTopWidth: 0;
9461
- --pf-c-jump-links__list__list--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
9462
- --pf-c-jump-links__link--PaddingTop: var(--pf-global--spacer--md);
9463
- --pf-c-jump-links__link--PaddingRight: var(--pf-global--spacer--md);
9464
- --pf-c-jump-links__link--PaddingBottom: var(--pf-global--spacer--md);
9465
- --pf-c-jump-links__link--PaddingLeft: var(--pf-global--spacer--md);
9466
- --pf-c-jump-links__list__list__link--PaddingTop: var(--pf-global--spacer--sm);
9467
- --pf-c-jump-links__list__list__link--PaddingLeft: var(--pf-global--spacer--lg);
9468
- --pf-c-jump-links__list__list__link--PaddingBottom: var(--pf-global--spacer--sm);
9469
- --pf-c-jump-links__link--OutlineOffset: calc(-1 * var(--pf-global--spacer--sm));
9470
- --pf-c-jump-links__link--before--BorderTopWidth: 0;
9471
- --pf-c-jump-links__link--before--BorderRightWidth: 0;
9472
- --pf-c-jump-links__link--before--BorderBottomWidth: 0;
9473
- --pf-c-jump-links__link--before--BorderLeftWidth: 0;
9474
- --pf-c-jump-links__link--before--BorderColor: transparent;
9475
- --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-global--BorderWidth--lg);
9476
- --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: 0;
9477
- --pf-c-jump-links__item--m-current__link--before--BorderColor: var(--pf-global--primary-color--100);
9478
- --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth: 0;
9479
- --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth: var(--pf-global--BorderWidth--lg);
9480
- --pf-c-jump-links__link-text--Color: var(--pf-global--Color--200);
9481
- --pf-c-jump-links__link--hover__link-text--Color: var(--pf-global--Color--100);
9482
- --pf-c-jump-links__link--focus__link-text--Color: var(--pf-global--Color--100);
9483
- --pf-c-jump-links__item--m-current__link-text--Color: var(--pf-global--Color--100);
9484
- --pf-c-jump-links__label--MarginBottom: var(--pf-global--spacer--md);
9485
- --pf-c-jump-links__label--Display: block;
9486
- --pf-c-jump-links__label--Visibility: visible;
9487
- --pf-c-jump-links__toggle--MarginTop: calc(-1 * var(--pf-global--spacer--form-element));
9488
- --pf-c-jump-links__toggle--MarginBottom--base: calc(-1 * var(--pf-global--spacer--form-element));
9489
- --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links__toggle--MarginBottom--base);
9490
- --pf-c-jump-links--m-expanded__toggle--MarginBottom: calc(var(--pf-c-jump-links__toggle--MarginBottom--base) + var(--pf-global--spacer--md));
9491
- --pf-c-jump-links__toggle--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
9492
- --pf-c-jump-links__toggle--Display: none;
9493
- --pf-c-jump-links__toggle--Visibility: hidden;
9494
- --pf-c-jump-links__toggle-icon--Color: currentcolor;
9495
- --pf-c-jump-links__toggle-icon--Transition: var(--pf-global--Transition);
9496
- --pf-c-jump-links__toggle-icon--Rotate: 0;
9497
- --pf-c-jump-links--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
9498
- --pf-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
9499
- --pf-c-jump-links__toggle-text--MarginLeft: var(--pf-global--spacer--md);
9500
- --pf-c-jump-links__toggle-text--Color: var(--pf-global--Color--100);
9501
- display: flex;
9502
- }
9503
-
9504
- .pf-c-jump-links.pf-m-center {
9505
- justify-content: center;
9437
+ .pf-c-sidebar {
9438
+ --pf-c-sidebar--BackgroundColor: var(--pf-global--BackgroundColor--100);
9439
+ --pf-c-sidebar__main--FlexDirection: column;
9440
+ --pf-c-sidebar__main--md--FlexDirection: row;
9441
+ --pf-c-sidebar__main--AlignItems: stretch;
9442
+ --pf-c-sidebar__main--md--AlignItems: start;
9443
+ --pf-c-sidebar__main--child--MarginTop: 0;
9444
+ --pf-c-sidebar__main--child--MarginLeft: 0;
9445
+ --pf-c-sidebar--m-gutter__main--Gap: var(--pf-global--spacer--md);
9446
+ --pf-c-sidebar--m-gutter__main--xl--Gap: var(--pf-global--spacer--lg);
9447
+ --pf-c-sidebar--m-panel-right__panel--Order: 0;
9448
+ --pf-c-sidebar--m-panel-right__panel--md--Order: 1;
9449
+ --pf-c-sidebar--m-stack__main--FlexDirection: column;
9450
+ --pf-c-sidebar--m-stack__main--AlignItems: stretch;
9451
+ --pf-c-sidebar--m-stack__panel--Position: sticky;
9452
+ --pf-c-sidebar--m-stack__panel--Top: 0;
9453
+ --pf-c-sidebar--m-stack__panel--BoxShadow: var(--pf-c-sidebar__panel--BoxShadow--base);
9454
+ --pf-c-sidebar--m-stack--m-panel-right__panel--Order: 0;
9455
+ --pf-c-sidebar--m-split__main--AlignItems: start;
9456
+ --pf-c-sidebar--m-split__main--FlexDirection: row;
9457
+ --pf-c-sidebar--m-split__panel--Position: static;
9458
+ --pf-c-sidebar--m-split__panel--Top: auto;
9459
+ --pf-c-sidebar--m-split--m-panel-right__panel--Order: 1;
9460
+ --pf-c-sidebar__panel--FlexBasis--base: auto;
9461
+ --pf-c-sidebar__panel--BoxShadow--base: 0 0.25rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
9462
+ --pf-c-sidebar__panel--BoxShadow: var(--pf-c-sidebar__panel--BoxShadow--base);
9463
+ --pf-c-sidebar__panel--Top: 0;
9464
+ --pf-c-sidebar__panel--md--Top: auto;
9465
+ --pf-c-sidebar__panel--Position: sticky;
9466
+ --pf-c-sidebar__panel--md--Position: static;
9467
+ --pf-c-sidebar__panel--FlexBasis-base: auto;
9468
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis-base);
9469
+ --pf-c-sidebar__panel--md--FlexBasis: 15.625rem;
9470
+ --pf-c-sidebar__panel--m-split--FlexBasis: 15.625rem;
9471
+ --pf-c-sidebar__panel--m-stack--FlexBasis: auto;
9472
+ --pf-c-sidebar__panel--ZIndex: var(--pf-global--ZIndex--xs);
9473
+ --pf-c-sidebar__panel--Order: 0;
9474
+ --pf-c-sidebar__panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
9475
+ --pf-c-sidebar__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
9476
+ --pf-c-sidebar__panel--m-sticky--Top: 0;
9477
+ --pf-c-sidebar__panel--m-sticky--Position: sticky;
9478
+ height: 100%;
9506
9479
  }
9507
9480
 
9508
- .pf-c-jump-links.pf-m-center .pf-c-jump-links__main {
9509
- align-items: center;
9481
+ @media (min-width: 768px) {
9482
+ .pf-c-sidebar {
9483
+ --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar__main--md--FlexDirection);
9484
+ --pf-c-sidebar__panel--BoxShadow: none;
9485
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--md--FlexBasis);
9486
+ --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar__main--md--AlignItems);
9487
+ --pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--md--Top);
9488
+ --pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--md--Position);
9489
+ }
9510
9490
  }
9511
-
9512
- .pf-c-jump-links.pf-m-vertical, .pf-c-jump-links.pf-m-expandable {
9513
- --pf-c-jump-links__list--PaddingTop: var(--pf-c-jump-links--m-vertical__list--PaddingTop);
9514
- --pf-c-jump-links__list--PaddingRight: var(--pf-c-jump-links--m-vertical__list--PaddingRight);
9515
- --pf-c-jump-links__list--PaddingBottom: var(--pf-c-jump-links--m-vertical__list--PaddingBottom);
9516
- --pf-c-jump-links__list--PaddingLeft: var(--pf-c-jump-links--m-vertical__list--PaddingLeft);
9517
- --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderTopWidth);
9518
- --pf-c-jump-links__list--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderLeftWidth);
9519
- --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth);
9520
- --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth);
9521
- --pf-c-jump-links__list--FlexDirection: var(--pf-c-jump-links--m-vertical__list--FlexDirection);
9522
- flex-direction: column;
9491
+ @media (min-width: 1200px) {
9492
+ .pf-c-sidebar {
9493
+ --pf-c-sidebar--m-gutter__main--Gap: var(--pf-c-sidebar--m-gutter__main--xl--Gap);
9494
+ }
9523
9495
  }
9524
-
9525
- .pf-c-jump-links.pf-m-expandable {
9526
- --pf-c-jump-links__list--Display: none;
9527
- --pf-c-jump-links__list--Visibility: hidden;
9528
- --pf-c-jump-links__toggle--Display: block;
9529
- --pf-c-jump-links__toggle--Visibility: visible;
9530
- --pf-c-jump-links__label--Display: none;
9531
- --pf-c-jump-links__label--Visibility: hidden;
9496
+ .pf-c-sidebar.pf-m-gutter {
9497
+ --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
9498
+ --pf-c-sidebar__main--child--MarginLeft: 0;
9532
9499
  }
9533
9500
 
9534
- .pf-c-jump-links.pf-m-non-expandable {
9535
- --pf-c-jump-links__list--Display: flex;
9536
- --pf-c-jump-links__list--Visibility: visible;
9537
- --pf-c-jump-links__toggle--Display: none;
9538
- --pf-c-jump-links__toggle--Visibility: hidden;
9539
- --pf-c-jump-links__label--Display: block;
9540
- --pf-c-jump-links__label--Visibility: visible;
9501
+ .pf-c-sidebar.pf-m-gutter > .pf-c-sidebar__main > * + * {
9502
+ margin-top: var(--pf-c-sidebar__main--child--MarginTop);
9503
+ margin-left: var(--pf-c-sidebar__main--child--MarginLeft);
9541
9504
  }
9542
9505
 
9543
- @media (min-width: 576px) {
9544
- .pf-c-jump-links.pf-m-expandable-on-sm {
9545
- --pf-c-jump-links__list--Display: none;
9546
- --pf-c-jump-links__list--Visibility: hidden;
9547
- --pf-c-jump-links__toggle--Display: block;
9548
- --pf-c-jump-links__toggle--Visibility: visible;
9549
- --pf-c-jump-links__label--Display: none;
9550
- --pf-c-jump-links__label--Visibility: hidden;
9551
- }
9552
-
9553
- .pf-c-jump-links.pf-m-non-expandable-on-sm {
9554
- --pf-c-jump-links__list--Display: flex;
9555
- --pf-c-jump-links__list--Visibility: visible;
9556
- --pf-c-jump-links__toggle--Display: none;
9557
- --pf-c-jump-links__toggle--Visibility: hidden;
9558
- --pf-c-jump-links__label--Display: block;
9559
- --pf-c-jump-links__label--Visibility: visible;
9506
+ @media (min-width: 768px) {
9507
+ .pf-c-sidebar.pf-m-gutter {
9508
+ --pf-c-sidebar__main--child--MarginTop: 0;
9509
+ --pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
9560
9510
  }
9561
9511
  }
9512
+ .pf-c-sidebar.pf-m-panel-right {
9513
+ --pf-c-sidebar__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--Order);
9514
+ }
9515
+
9562
9516
  @media (min-width: 768px) {
9563
- .pf-c-jump-links.pf-m-expandable-on-md {
9564
- --pf-c-jump-links__list--Display: none;
9565
- --pf-c-jump-links__list--Visibility: hidden;
9566
- --pf-c-jump-links__toggle--Display: block;
9567
- --pf-c-jump-links__toggle--Visibility: visible;
9568
- --pf-c-jump-links__label--Display: none;
9569
- --pf-c-jump-links__label--Visibility: hidden;
9517
+ .pf-c-sidebar.pf-m-panel-right {
9518
+ --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--md--Order);
9570
9519
  }
9520
+ }
9521
+ .pf-c-sidebar.pf-m-stack {
9522
+ --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-stack__main--FlexDirection);
9523
+ --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-stack__main--AlignItems);
9524
+ --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
9525
+ --pf-c-sidebar__main--child--MarginLeft: 0;
9526
+ --pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-stack__panel--Position);
9527
+ --pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-stack__panel--Top);
9528
+ --pf-c-sidebar__panel--BoxShadow: var(--pf-c-sidebar--m-stack__panel--BoxShadow);
9529
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-stack--FlexBasis);
9530
+ --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-stack--m-panel-right__panel--Order);
9531
+ }
9571
9532
 
9572
- .pf-c-jump-links.pf-m-non-expandable-on-md {
9573
- --pf-c-jump-links__list--Display: flex;
9574
- --pf-c-jump-links__list--Visibility: visible;
9575
- --pf-c-jump-links__toggle--Display: none;
9576
- --pf-c-jump-links__toggle--Visibility: hidden;
9577
- --pf-c-jump-links__label--Display: block;
9578
- --pf-c-jump-links__label--Visibility: visible;
9579
- }
9533
+ .pf-c-sidebar.pf-m-split {
9534
+ --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-split__main--FlexDirection);
9535
+ --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-split__main--AlignItems);
9536
+ --pf-c-sidebar__main--child--MarginTop: 0;
9537
+ --pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
9538
+ --pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-split__panel--Position);
9539
+ --pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-split__panel--Top);
9540
+ --pf-c-sidebar__panel--BoxShadow: none;
9541
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-split--FlexBasis);
9542
+ --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-split--m-panel-right__panel--Order);
9580
9543
  }
9581
- @media (min-width: 992px) {
9582
- .pf-c-jump-links.pf-m-expandable-on-lg {
9583
- --pf-c-jump-links__list--Display: none;
9584
- --pf-c-jump-links__list--Visibility: hidden;
9585
- --pf-c-jump-links__toggle--Display: block;
9586
- --pf-c-jump-links__toggle--Visibility: visible;
9587
- --pf-c-jump-links__label--Display: none;
9588
- --pf-c-jump-links__label--Visibility: hidden;
9589
- }
9590
9544
 
9591
- .pf-c-jump-links.pf-m-non-expandable-on-lg {
9592
- --pf-c-jump-links__list--Display: flex;
9593
- --pf-c-jump-links__list--Visibility: visible;
9594
- --pf-c-jump-links__toggle--Display: none;
9595
- --pf-c-jump-links__toggle--Visibility: hidden;
9596
- --pf-c-jump-links__label--Display: block;
9597
- --pf-c-jump-links__label--Visibility: visible;
9598
- }
9599
- }
9600
- @media (min-width: 1200px) {
9601
- .pf-c-jump-links.pf-m-expandable-on-xl {
9602
- --pf-c-jump-links__list--Display: none;
9603
- --pf-c-jump-links__list--Visibility: hidden;
9604
- --pf-c-jump-links__toggle--Display: block;
9605
- --pf-c-jump-links__toggle--Visibility: visible;
9606
- --pf-c-jump-links__label--Display: none;
9607
- --pf-c-jump-links__label--Visibility: hidden;
9608
- }
9609
-
9610
- .pf-c-jump-links.pf-m-non-expandable-on-xl {
9611
- --pf-c-jump-links__list--Display: flex;
9612
- --pf-c-jump-links__list--Visibility: visible;
9613
- --pf-c-jump-links__toggle--Display: none;
9614
- --pf-c-jump-links__toggle--Visibility: hidden;
9615
- --pf-c-jump-links__label--Display: block;
9616
- --pf-c-jump-links__label--Visibility: visible;
9617
- }
9618
- }
9619
- @media (min-width: 1450px) {
9620
- .pf-c-jump-links.pf-m-expandable-on-2xl {
9621
- --pf-c-jump-links__list--Display: none;
9622
- --pf-c-jump-links__list--Visibility: hidden;
9623
- --pf-c-jump-links__toggle--Display: block;
9624
- --pf-c-jump-links__toggle--Visibility: visible;
9625
- --pf-c-jump-links__label--Display: none;
9626
- --pf-c-jump-links__label--Visibility: hidden;
9627
- }
9628
-
9629
- .pf-c-jump-links.pf-m-non-expandable-on-2xl {
9630
- --pf-c-jump-links__list--Display: flex;
9631
- --pf-c-jump-links__list--Visibility: visible;
9632
- --pf-c-jump-links__toggle--Display: none;
9633
- --pf-c-jump-links__toggle--Visibility: hidden;
9634
- --pf-c-jump-links__label--Display: block;
9635
- --pf-c-jump-links__label--Visibility: visible;
9636
- }
9637
- }
9638
- .pf-c-jump-links.pf-m-expanded {
9639
- --pf-c-jump-links__list--Display: flex;
9640
- --pf-c-jump-links__list--Visibility: visible;
9641
- --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links--m-expanded__toggle--MarginBottom);
9642
- --pf-c-jump-links__toggle-icon--Rotate: var(--pf-c-jump-links--m-expanded__toggle-icon--Rotate);
9643
- --pf-c-jump-links__toggle-icon--Color: var(--pf-c-jump-links--m-expanded__toggle-icon--Color);
9644
- }
9645
-
9646
- .pf-c-jump-links__list {
9647
- position: relative;
9648
- display: var(--pf-c-jump-links__list--Display);
9649
- flex-direction: var(--pf-c-jump-links__list--FlexDirection);
9650
- padding-top: var(--pf-c-jump-links__list--PaddingTop);
9651
- padding-right: var(--pf-c-jump-links__list--PaddingRight);
9652
- padding-bottom: var(--pf-c-jump-links__list--PaddingBottom);
9653
- padding-left: var(--pf-c-jump-links__list--PaddingLeft);
9654
- visibility: var(--pf-c-jump-links__list--Visibility);
9655
- }
9656
-
9657
- .pf-c-jump-links__list::before {
9658
- position: absolute;
9659
- top: 0;
9660
- right: 0;
9661
- bottom: 0;
9662
- left: 0;
9663
- pointer-events: none;
9664
- content: "";
9665
- border: solid var(--pf-c-jump-links__list--before--BorderColor);
9666
- border-width: var(--pf-c-jump-links__list--before--BorderTopWidth) var(--pf-c-jump-links__list--before--BorderRightWidth) var(--pf-c-jump-links__list--before--BorderBottomWidth) var(--pf-c-jump-links__list--before--BorderLeftWidth);
9667
- }
9668
-
9669
- .pf-c-jump-links__list .pf-c-jump-links__list {
9670
- --pf-c-jump-links__list--PaddingTop: 0;
9671
- --pf-c-jump-links__list--PaddingBottom: 0;
9672
- --pf-c-jump-links__link--PaddingTop: var(--pf-c-jump-links__list__list__link--PaddingTop);
9673
- --pf-c-jump-links__link--PaddingBottom: var(--pf-c-jump-links__list__list__link--PaddingBottom);
9674
- --pf-c-jump-links__link--PaddingLeft: var(--pf-c-jump-links__list__list__link--PaddingLeft);
9675
- margin-top: var(--pf-c-jump-links__list__list--MarginTop);
9676
- }
9677
-
9678
- .pf-c-jump-links__link {
9679
- position: relative;
9680
- display: flex;
9681
- flex: 1;
9682
- padding-top: var(--pf-c-jump-links__link--PaddingTop);
9683
- padding-right: var(--pf-c-jump-links__link--PaddingRight);
9684
- padding-bottom: var(--pf-c-jump-links__link--PaddingBottom);
9685
- padding-left: var(--pf-c-jump-links__link--PaddingLeft);
9686
- text-decoration: none;
9687
- outline-offset: var(--pf-c-jump-links__link--OutlineOffset);
9688
- }
9689
-
9690
- .pf-c-jump-links__link:hover {
9691
- --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--hover__link-text--Color);
9692
- }
9693
-
9694
- .pf-c-jump-links__link:focus {
9695
- --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--focus__link-text--Color);
9696
- }
9697
-
9698
- .pf-c-jump-links__link::before {
9699
- position: absolute;
9700
- top: 0;
9701
- right: 0;
9702
- bottom: 0;
9703
- left: 0;
9704
- pointer-events: none;
9705
- content: "";
9706
- border-color: var(--pf-c-jump-links__link--before--BorderColor);
9707
- border-style: solid;
9708
- border-width: var(--pf-c-jump-links__link--before--BorderTopWidth) var(--pf-c-jump-links__link--before--BorderRightWidth) var(--pf-c-jump-links__link--before--BorderBottomWidth) var(--pf-c-jump-links__link--before--BorderLeftWidth);
9709
- }
9710
-
9711
- .pf-c-jump-links__item {
9712
- --pf-c-jump-links__list--before--BorderColor: transparent;
9713
- }
9714
-
9715
- .pf-c-jump-links__item.pf-m-current > .pf-c-jump-links__link {
9716
- --pf-c-jump-links__link--before--BorderTopWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderTopWidth);
9717
- --pf-c-jump-links__link--before--BorderLeftWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderLeftWidth);
9718
- --pf-c-jump-links__link--before--BorderColor: var(--pf-c-jump-links__item--m-current__link--before--BorderColor);
9719
- --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__item--m-current__link-text--Color);
9720
- }
9721
-
9722
- .pf-c-jump-links__link-text {
9723
- color: var(--pf-c-jump-links__link-text--Color);
9724
- }
9725
-
9726
- .pf-c-jump-links__label {
9727
- display: var(--pf-c-jump-links__label--Display);
9728
- margin-bottom: var(--pf-c-jump-links__label--MarginBottom);
9729
- visibility: var(--pf-c-jump-links__label--Visibility);
9730
- }
9731
-
9732
- .pf-c-jump-links__main {
9733
- display: flex;
9734
- flex-direction: column;
9735
- }
9736
-
9737
- .pf-c-jump-links__toggle {
9738
- display: var(--pf-c-jump-links__toggle--Display);
9739
- margin-top: var(--pf-c-jump-links__toggle--MarginTop);
9740
- margin-bottom: var(--pf-c-jump-links__toggle--MarginBottom);
9741
- margin-left: var(--pf-c-jump-links__toggle--MarginLeft);
9742
- visibility: var(--pf-c-jump-links__toggle--Visibility);
9743
- }
9744
-
9745
- .pf-c-jump-links__toggle .pf-c-button {
9746
- display: flex;
9747
- align-items: center;
9748
- }
9749
-
9750
- .pf-c-jump-links__toggle-icon {
9751
- display: inline-block;
9752
- color: var(--pf-c-jump-links__toggle-icon--Color);
9753
- transition: var(--pf-c-jump-links__toggle-icon--Transition);
9754
- transform: rotate(var(--pf-c-jump-links__toggle-icon--Rotate));
9755
- }
9756
-
9757
- .pf-c-jump-links__toggle-text {
9758
- margin-left: var(--pf-c-jump-links__toggle-text--MarginLeft);
9759
- color: var(--pf-c-jump-links__toggle-text--Color);
9760
- }
9761
-
9762
- .pf-c-sidebar {
9763
- --pf-c-sidebar--BackgroundColor: var(--pf-global--BackgroundColor--100);
9764
- --pf-c-sidebar__main--FlexDirection: column;
9765
- --pf-c-sidebar__main--md--FlexDirection: row;
9766
- --pf-c-sidebar__main--AlignItems: stretch;
9767
- --pf-c-sidebar__main--md--AlignItems: start;
9768
- --pf-c-sidebar__main--child--MarginTop: 0;
9769
- --pf-c-sidebar__main--child--MarginLeft: 0;
9770
- --pf-c-sidebar--m-gutter__main--Gap: var(--pf-global--spacer--md);
9771
- --pf-c-sidebar--m-gutter__main--xl--Gap: var(--pf-global--spacer--lg);
9772
- --pf-c-sidebar--m-panel-right__panel--Order: 0;
9773
- --pf-c-sidebar--m-panel-right__panel--md--Order: 1;
9774
- --pf-c-sidebar--m-stack__main--FlexDirection: column;
9775
- --pf-c-sidebar--m-stack__main--AlignItems: stretch;
9776
- --pf-c-sidebar--m-stack__panel--Position: sticky;
9777
- --pf-c-sidebar--m-stack__panel--Top: 0;
9778
- --pf-c-sidebar--m-stack__panel--BoxShadow: var(--pf-c-sidebar__panel--BoxShadow--base);
9779
- --pf-c-sidebar--m-stack--m-panel-right__panel--Order: 0;
9780
- --pf-c-sidebar--m-split__main--AlignItems: start;
9781
- --pf-c-sidebar--m-split__main--FlexDirection: row;
9782
- --pf-c-sidebar--m-split__panel--Position: static;
9783
- --pf-c-sidebar--m-split__panel--Top: auto;
9784
- --pf-c-sidebar--m-split--m-panel-right__panel--Order: 1;
9785
- --pf-c-sidebar__panel--FlexBasis--base: auto;
9786
- --pf-c-sidebar__panel--BoxShadow--base: 0 0.25rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
9787
- --pf-c-sidebar__panel--BoxShadow: var(--pf-c-sidebar__panel--BoxShadow--base);
9788
- --pf-c-sidebar__panel--Top: 0;
9789
- --pf-c-sidebar__panel--md--Top: auto;
9790
- --pf-c-sidebar__panel--Position: sticky;
9791
- --pf-c-sidebar__panel--md--Position: static;
9792
- --pf-c-sidebar__panel--FlexBasis-base: auto;
9793
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis-base);
9794
- --pf-c-sidebar__panel--md--FlexBasis: 15.625rem;
9795
- --pf-c-sidebar__panel--m-split--FlexBasis: 15.625rem;
9796
- --pf-c-sidebar__panel--m-stack--FlexBasis: auto;
9797
- --pf-c-sidebar__panel--ZIndex: var(--pf-global--ZIndex--xs);
9798
- --pf-c-sidebar__panel--Order: 0;
9799
- --pf-c-sidebar__panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
9800
- --pf-c-sidebar__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
9801
- --pf-c-sidebar__panel--m-sticky--Top: 0;
9802
- --pf-c-sidebar__panel--m-sticky--Position: sticky;
9803
- height: 100%;
9804
- }
9805
-
9806
- @media (min-width: 768px) {
9807
- .pf-c-sidebar {
9808
- --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar__main--md--FlexDirection);
9809
- --pf-c-sidebar__panel--BoxShadow: none;
9810
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--md--FlexBasis);
9811
- --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar__main--md--AlignItems);
9812
- --pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--md--Top);
9813
- --pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--md--Position);
9814
- }
9815
- }
9816
- @media (min-width: 1200px) {
9817
- .pf-c-sidebar {
9818
- --pf-c-sidebar--m-gutter__main--Gap: var(--pf-c-sidebar--m-gutter__main--xl--Gap);
9819
- }
9820
- }
9821
- .pf-c-sidebar.pf-m-gutter {
9822
- --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
9823
- --pf-c-sidebar__main--child--MarginLeft: 0;
9824
- }
9825
-
9826
- .pf-c-sidebar.pf-m-gutter > .pf-c-sidebar__main > * + * {
9827
- margin-top: var(--pf-c-sidebar__main--child--MarginTop);
9828
- margin-left: var(--pf-c-sidebar__main--child--MarginLeft);
9829
- }
9830
-
9831
- @media (min-width: 768px) {
9832
- .pf-c-sidebar.pf-m-gutter {
9833
- --pf-c-sidebar__main--child--MarginTop: 0;
9834
- --pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
9835
- }
9836
- }
9837
- .pf-c-sidebar.pf-m-panel-right {
9838
- --pf-c-sidebar__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--Order);
9839
- }
9840
-
9841
- @media (min-width: 768px) {
9842
- .pf-c-sidebar.pf-m-panel-right {
9843
- --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--md--Order);
9844
- }
9845
- }
9846
- .pf-c-sidebar.pf-m-stack {
9847
- --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-stack__main--FlexDirection);
9848
- --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-stack__main--AlignItems);
9849
- --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
9850
- --pf-c-sidebar__main--child--MarginLeft: 0;
9851
- --pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-stack__panel--Position);
9852
- --pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-stack__panel--Top);
9853
- --pf-c-sidebar__panel--BoxShadow: var(--pf-c-sidebar--m-stack__panel--BoxShadow);
9854
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-stack--FlexBasis);
9855
- --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-stack--m-panel-right__panel--Order);
9856
- }
9857
-
9858
- .pf-c-sidebar.pf-m-split {
9859
- --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-split__main--FlexDirection);
9860
- --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-split__main--AlignItems);
9861
- --pf-c-sidebar__main--child--MarginTop: 0;
9862
- --pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
9863
- --pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-split__panel--Position);
9864
- --pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-split__panel--Top);
9865
- --pf-c-sidebar__panel--BoxShadow: none;
9866
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-split--FlexBasis);
9867
- --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-split--m-panel-right__panel--Order);
9868
- }
9869
-
9870
- .pf-c-sidebar__main {
9871
- display: flex;
9872
- flex-direction: var(--pf-c-sidebar__main--FlexDirection);
9873
- align-items: var(--pf-c-sidebar__main--AlignItems);
9545
+ .pf-c-sidebar__main {
9546
+ display: flex;
9547
+ flex-direction: var(--pf-c-sidebar__main--FlexDirection);
9548
+ align-items: var(--pf-c-sidebar__main--AlignItems);
9874
9549
  }
9875
9550
 
9876
9551
  .pf-c-sidebar__panel {
@@ -9983,105 +9658,426 @@ label.pf-c-input-group__text {
9983
9658
  --pf-c-sidebar__panel--FlexBasis: 50%;
9984
9659
  }
9985
9660
 
9986
- .pf-c-sidebar__panel.pf-m-width-66-on-md {
9987
- --pf-c-sidebar__panel--FlexBasis: 66%;
9661
+ .pf-c-sidebar__panel.pf-m-width-66-on-md {
9662
+ --pf-c-sidebar__panel--FlexBasis: 66%;
9663
+ }
9664
+
9665
+ .pf-c-sidebar__panel.pf-m-width-75-on-md {
9666
+ --pf-c-sidebar__panel--FlexBasis: 75%;
9667
+ }
9668
+
9669
+ .pf-c-sidebar__panel.pf-m-width-100-on-md {
9670
+ --pf-c-sidebar__panel--FlexBasis: 100%;
9671
+ }
9672
+ }
9673
+ @media (min-width: 992px) {
9674
+ .pf-c-sidebar__panel.pf-m-width-default-on-lg {
9675
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9676
+ }
9677
+
9678
+ .pf-c-sidebar__panel.pf-m-width-25-on-lg {
9679
+ --pf-c-sidebar__panel--FlexBasis: 25%;
9680
+ }
9681
+
9682
+ .pf-c-sidebar__panel.pf-m-width-33-on-lg {
9683
+ --pf-c-sidebar__panel--FlexBasis: 33%;
9684
+ }
9685
+
9686
+ .pf-c-sidebar__panel.pf-m-width-50-on-lg {
9687
+ --pf-c-sidebar__panel--FlexBasis: 50%;
9688
+ }
9689
+
9690
+ .pf-c-sidebar__panel.pf-m-width-66-on-lg {
9691
+ --pf-c-sidebar__panel--FlexBasis: 66%;
9692
+ }
9693
+
9694
+ .pf-c-sidebar__panel.pf-m-width-75-on-lg {
9695
+ --pf-c-sidebar__panel--FlexBasis: 75%;
9696
+ }
9697
+
9698
+ .pf-c-sidebar__panel.pf-m-width-100-on-lg {
9699
+ --pf-c-sidebar__panel--FlexBasis: 100%;
9700
+ }
9701
+ }
9702
+ @media (min-width: 1200px) {
9703
+ .pf-c-sidebar__panel.pf-m-width-default-on-xl {
9704
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9705
+ }
9706
+
9707
+ .pf-c-sidebar__panel.pf-m-width-25-on-xl {
9708
+ --pf-c-sidebar__panel--FlexBasis: 25%;
9709
+ }
9710
+
9711
+ .pf-c-sidebar__panel.pf-m-width-33-on-xl {
9712
+ --pf-c-sidebar__panel--FlexBasis: 33%;
9713
+ }
9714
+
9715
+ .pf-c-sidebar__panel.pf-m-width-50-on-xl {
9716
+ --pf-c-sidebar__panel--FlexBasis: 50%;
9717
+ }
9718
+
9719
+ .pf-c-sidebar__panel.pf-m-width-66-on-xl {
9720
+ --pf-c-sidebar__panel--FlexBasis: 66%;
9721
+ }
9722
+
9723
+ .pf-c-sidebar__panel.pf-m-width-75-on-xl {
9724
+ --pf-c-sidebar__panel--FlexBasis: 75%;
9725
+ }
9726
+
9727
+ .pf-c-sidebar__panel.pf-m-width-100-on-xl {
9728
+ --pf-c-sidebar__panel--FlexBasis: 100%;
9729
+ }
9730
+ }
9731
+ @media (min-width: 1450px) {
9732
+ .pf-c-sidebar__panel.pf-m-width-default-on-2xl {
9733
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9734
+ }
9735
+
9736
+ .pf-c-sidebar__panel.pf-m-width-25-on-2xl {
9737
+ --pf-c-sidebar__panel--FlexBasis: 25%;
9738
+ }
9739
+
9740
+ .pf-c-sidebar__panel.pf-m-width-33-on-2xl {
9741
+ --pf-c-sidebar__panel--FlexBasis: 33%;
9742
+ }
9743
+
9744
+ .pf-c-sidebar__panel.pf-m-width-50-on-2xl {
9745
+ --pf-c-sidebar__panel--FlexBasis: 50%;
9746
+ }
9747
+
9748
+ .pf-c-sidebar__panel.pf-m-width-66-on-2xl {
9749
+ --pf-c-sidebar__panel--FlexBasis: 66%;
9750
+ }
9751
+
9752
+ .pf-c-sidebar__panel.pf-m-width-75-on-2xl {
9753
+ --pf-c-sidebar__panel--FlexBasis: 75%;
9754
+ }
9755
+
9756
+ .pf-c-sidebar__panel.pf-m-width-100-on-2xl {
9757
+ --pf-c-sidebar__panel--FlexBasis: 100%;
9758
+ }
9759
+ }
9760
+ .pf-c-jump-links {
9761
+ --pf-c-jump-links__list--Display: flex;
9762
+ --pf-c-jump-links__list--Visibility: visible;
9763
+ --pf-c-jump-links__list--PaddingTop: 0;
9764
+ --pf-c-jump-links__list--PaddingRight: var(--pf-global--spacer--md);
9765
+ --pf-c-jump-links__list--PaddingBottom: 0;
9766
+ --pf-c-jump-links__list--PaddingLeft: var(--pf-global--spacer--md);
9767
+ --pf-c-jump-links--m-vertical__list--PaddingTop: var(--pf-global--spacer--md);
9768
+ --pf-c-jump-links--m-vertical__list--PaddingRight: 0;
9769
+ --pf-c-jump-links--m-vertical__list--PaddingBottom: var(--pf-global--spacer--md);
9770
+ --pf-c-jump-links--m-vertical__list--PaddingLeft: 0;
9771
+ --pf-c-jump-links__list--FlexDirection: row;
9772
+ --pf-c-jump-links--m-vertical__list--FlexDirection: column;
9773
+ --pf-c-jump-links__list--before--BorderColor: var(--pf-global--BorderColor--100);
9774
+ --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-global--BorderWidth--sm);
9775
+ --pf-c-jump-links__list--before--BorderRightWidth: 0;
9776
+ --pf-c-jump-links__list--before--BorderBottomWidth: 0;
9777
+ --pf-c-jump-links__list--before--BorderLeftWidth: 0;
9778
+ --pf-c-jump-links--m-vertical__list--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
9779
+ --pf-c-jump-links--m-vertical__list--before--BorderTopWidth: 0;
9780
+ --pf-c-jump-links__list__list--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
9781
+ --pf-c-jump-links__link--PaddingTop: var(--pf-global--spacer--md);
9782
+ --pf-c-jump-links__link--PaddingRight: var(--pf-global--spacer--md);
9783
+ --pf-c-jump-links__link--PaddingBottom: var(--pf-global--spacer--md);
9784
+ --pf-c-jump-links__link--PaddingLeft: var(--pf-global--spacer--md);
9785
+ --pf-c-jump-links__list__list__link--PaddingTop: var(--pf-global--spacer--sm);
9786
+ --pf-c-jump-links__list__list__link--PaddingLeft: var(--pf-global--spacer--lg);
9787
+ --pf-c-jump-links__list__list__link--PaddingBottom: var(--pf-global--spacer--sm);
9788
+ --pf-c-jump-links__link--OutlineOffset: calc(-1 * var(--pf-global--spacer--sm));
9789
+ --pf-c-jump-links__link--before--BorderTopWidth: 0;
9790
+ --pf-c-jump-links__link--before--BorderRightWidth: 0;
9791
+ --pf-c-jump-links__link--before--BorderBottomWidth: 0;
9792
+ --pf-c-jump-links__link--before--BorderLeftWidth: 0;
9793
+ --pf-c-jump-links__link--before--BorderColor: transparent;
9794
+ --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-global--BorderWidth--lg);
9795
+ --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: 0;
9796
+ --pf-c-jump-links__item--m-current__link--before--BorderColor: var(--pf-global--primary-color--100);
9797
+ --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth: 0;
9798
+ --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth: var(--pf-global--BorderWidth--lg);
9799
+ --pf-c-jump-links__link-text--Color: var(--pf-global--Color--200);
9800
+ --pf-c-jump-links__link--hover__link-text--Color: var(--pf-global--Color--100);
9801
+ --pf-c-jump-links__link--focus__link-text--Color: var(--pf-global--Color--100);
9802
+ --pf-c-jump-links__item--m-current__link-text--Color: var(--pf-global--Color--100);
9803
+ --pf-c-jump-links__label--MarginBottom: var(--pf-global--spacer--md);
9804
+ --pf-c-jump-links__label--Display: block;
9805
+ --pf-c-jump-links__label--Visibility: visible;
9806
+ --pf-c-jump-links__toggle--MarginTop: calc(-1 * var(--pf-global--spacer--form-element));
9807
+ --pf-c-jump-links__toggle--MarginBottom--base: calc(-1 * var(--pf-global--spacer--form-element));
9808
+ --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links__toggle--MarginBottom--base);
9809
+ --pf-c-jump-links--m-expanded__toggle--MarginBottom: calc(var(--pf-c-jump-links__toggle--MarginBottom--base) + var(--pf-global--spacer--md));
9810
+ --pf-c-jump-links__toggle--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
9811
+ --pf-c-jump-links__toggle--Display: none;
9812
+ --pf-c-jump-links__toggle--Visibility: hidden;
9813
+ --pf-c-jump-links__toggle-icon--Color: currentcolor;
9814
+ --pf-c-jump-links__toggle-icon--Transition: var(--pf-global--Transition);
9815
+ --pf-c-jump-links__toggle-icon--Rotate: 0;
9816
+ --pf-c-jump-links--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
9817
+ --pf-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
9818
+ --pf-c-jump-links__toggle-text--MarginLeft: var(--pf-global--spacer--md);
9819
+ --pf-c-jump-links__toggle-text--Color: var(--pf-global--Color--100);
9820
+ display: flex;
9821
+ }
9822
+
9823
+ .pf-c-jump-links.pf-m-center {
9824
+ justify-content: center;
9825
+ }
9826
+
9827
+ .pf-c-jump-links.pf-m-center .pf-c-jump-links__main {
9828
+ align-items: center;
9829
+ }
9830
+
9831
+ .pf-c-jump-links.pf-m-vertical, .pf-c-jump-links.pf-m-expandable {
9832
+ --pf-c-jump-links__list--PaddingTop: var(--pf-c-jump-links--m-vertical__list--PaddingTop);
9833
+ --pf-c-jump-links__list--PaddingRight: var(--pf-c-jump-links--m-vertical__list--PaddingRight);
9834
+ --pf-c-jump-links__list--PaddingBottom: var(--pf-c-jump-links--m-vertical__list--PaddingBottom);
9835
+ --pf-c-jump-links__list--PaddingLeft: var(--pf-c-jump-links--m-vertical__list--PaddingLeft);
9836
+ --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderTopWidth);
9837
+ --pf-c-jump-links__list--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderLeftWidth);
9838
+ --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth);
9839
+ --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth);
9840
+ --pf-c-jump-links__list--FlexDirection: var(--pf-c-jump-links--m-vertical__list--FlexDirection);
9841
+ flex-direction: column;
9842
+ }
9843
+
9844
+ .pf-c-jump-links.pf-m-expandable {
9845
+ --pf-c-jump-links__list--Display: none;
9846
+ --pf-c-jump-links__list--Visibility: hidden;
9847
+ --pf-c-jump-links__toggle--Display: block;
9848
+ --pf-c-jump-links__toggle--Visibility: visible;
9849
+ --pf-c-jump-links__label--Display: none;
9850
+ --pf-c-jump-links__label--Visibility: hidden;
9851
+ }
9852
+
9853
+ .pf-c-jump-links.pf-m-non-expandable {
9854
+ --pf-c-jump-links__list--Display: flex;
9855
+ --pf-c-jump-links__list--Visibility: visible;
9856
+ --pf-c-jump-links__toggle--Display: none;
9857
+ --pf-c-jump-links__toggle--Visibility: hidden;
9858
+ --pf-c-jump-links__label--Display: block;
9859
+ --pf-c-jump-links__label--Visibility: visible;
9860
+ }
9861
+
9862
+ @media (min-width: 576px) {
9863
+ .pf-c-jump-links.pf-m-expandable-on-sm {
9864
+ --pf-c-jump-links__list--Display: none;
9865
+ --pf-c-jump-links__list--Visibility: hidden;
9866
+ --pf-c-jump-links__toggle--Display: block;
9867
+ --pf-c-jump-links__toggle--Visibility: visible;
9868
+ --pf-c-jump-links__label--Display: none;
9869
+ --pf-c-jump-links__label--Visibility: hidden;
9870
+ }
9871
+
9872
+ .pf-c-jump-links.pf-m-non-expandable-on-sm {
9873
+ --pf-c-jump-links__list--Display: flex;
9874
+ --pf-c-jump-links__list--Visibility: visible;
9875
+ --pf-c-jump-links__toggle--Display: none;
9876
+ --pf-c-jump-links__toggle--Visibility: hidden;
9877
+ --pf-c-jump-links__label--Display: block;
9878
+ --pf-c-jump-links__label--Visibility: visible;
9988
9879
  }
9989
-
9990
- .pf-c-sidebar__panel.pf-m-width-75-on-md {
9991
- --pf-c-sidebar__panel--FlexBasis: 75%;
9880
+ }
9881
+ @media (min-width: 768px) {
9882
+ .pf-c-jump-links.pf-m-expandable-on-md {
9883
+ --pf-c-jump-links__list--Display: none;
9884
+ --pf-c-jump-links__list--Visibility: hidden;
9885
+ --pf-c-jump-links__toggle--Display: block;
9886
+ --pf-c-jump-links__toggle--Visibility: visible;
9887
+ --pf-c-jump-links__label--Display: none;
9888
+ --pf-c-jump-links__label--Visibility: hidden;
9992
9889
  }
9993
9890
 
9994
- .pf-c-sidebar__panel.pf-m-width-100-on-md {
9995
- --pf-c-sidebar__panel--FlexBasis: 100%;
9891
+ .pf-c-jump-links.pf-m-non-expandable-on-md {
9892
+ --pf-c-jump-links__list--Display: flex;
9893
+ --pf-c-jump-links__list--Visibility: visible;
9894
+ --pf-c-jump-links__toggle--Display: none;
9895
+ --pf-c-jump-links__toggle--Visibility: hidden;
9896
+ --pf-c-jump-links__label--Display: block;
9897
+ --pf-c-jump-links__label--Visibility: visible;
9996
9898
  }
9997
9899
  }
9998
9900
  @media (min-width: 992px) {
9999
- .pf-c-sidebar__panel.pf-m-width-default-on-lg {
10000
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9901
+ .pf-c-jump-links.pf-m-expandable-on-lg {
9902
+ --pf-c-jump-links__list--Display: none;
9903
+ --pf-c-jump-links__list--Visibility: hidden;
9904
+ --pf-c-jump-links__toggle--Display: block;
9905
+ --pf-c-jump-links__toggle--Visibility: visible;
9906
+ --pf-c-jump-links__label--Display: none;
9907
+ --pf-c-jump-links__label--Visibility: hidden;
10001
9908
  }
10002
9909
 
10003
- .pf-c-sidebar__panel.pf-m-width-25-on-lg {
10004
- --pf-c-sidebar__panel--FlexBasis: 25%;
9910
+ .pf-c-jump-links.pf-m-non-expandable-on-lg {
9911
+ --pf-c-jump-links__list--Display: flex;
9912
+ --pf-c-jump-links__list--Visibility: visible;
9913
+ --pf-c-jump-links__toggle--Display: none;
9914
+ --pf-c-jump-links__toggle--Visibility: hidden;
9915
+ --pf-c-jump-links__label--Display: block;
9916
+ --pf-c-jump-links__label--Visibility: visible;
10005
9917
  }
10006
-
10007
- .pf-c-sidebar__panel.pf-m-width-33-on-lg {
10008
- --pf-c-sidebar__panel--FlexBasis: 33%;
9918
+ }
9919
+ @media (min-width: 1200px) {
9920
+ .pf-c-jump-links.pf-m-expandable-on-xl {
9921
+ --pf-c-jump-links__list--Display: none;
9922
+ --pf-c-jump-links__list--Visibility: hidden;
9923
+ --pf-c-jump-links__toggle--Display: block;
9924
+ --pf-c-jump-links__toggle--Visibility: visible;
9925
+ --pf-c-jump-links__label--Display: none;
9926
+ --pf-c-jump-links__label--Visibility: hidden;
10009
9927
  }
10010
9928
 
10011
- .pf-c-sidebar__panel.pf-m-width-50-on-lg {
10012
- --pf-c-sidebar__panel--FlexBasis: 50%;
9929
+ .pf-c-jump-links.pf-m-non-expandable-on-xl {
9930
+ --pf-c-jump-links__list--Display: flex;
9931
+ --pf-c-jump-links__list--Visibility: visible;
9932
+ --pf-c-jump-links__toggle--Display: none;
9933
+ --pf-c-jump-links__toggle--Visibility: hidden;
9934
+ --pf-c-jump-links__label--Display: block;
9935
+ --pf-c-jump-links__label--Visibility: visible;
10013
9936
  }
10014
-
10015
- .pf-c-sidebar__panel.pf-m-width-66-on-lg {
10016
- --pf-c-sidebar__panel--FlexBasis: 66%;
9937
+ }
9938
+ @media (min-width: 1450px) {
9939
+ .pf-c-jump-links.pf-m-expandable-on-2xl {
9940
+ --pf-c-jump-links__list--Display: none;
9941
+ --pf-c-jump-links__list--Visibility: hidden;
9942
+ --pf-c-jump-links__toggle--Display: block;
9943
+ --pf-c-jump-links__toggle--Visibility: visible;
9944
+ --pf-c-jump-links__label--Display: none;
9945
+ --pf-c-jump-links__label--Visibility: hidden;
10017
9946
  }
10018
9947
 
10019
- .pf-c-sidebar__panel.pf-m-width-75-on-lg {
10020
- --pf-c-sidebar__panel--FlexBasis: 75%;
9948
+ .pf-c-jump-links.pf-m-non-expandable-on-2xl {
9949
+ --pf-c-jump-links__list--Display: flex;
9950
+ --pf-c-jump-links__list--Visibility: visible;
9951
+ --pf-c-jump-links__toggle--Display: none;
9952
+ --pf-c-jump-links__toggle--Visibility: hidden;
9953
+ --pf-c-jump-links__label--Display: block;
9954
+ --pf-c-jump-links__label--Visibility: visible;
10021
9955
  }
9956
+ }
9957
+ .pf-c-jump-links.pf-m-expanded {
9958
+ --pf-c-jump-links__list--Display: flex;
9959
+ --pf-c-jump-links__list--Visibility: visible;
9960
+ --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links--m-expanded__toggle--MarginBottom);
9961
+ --pf-c-jump-links__toggle-icon--Rotate: var(--pf-c-jump-links--m-expanded__toggle-icon--Rotate);
9962
+ --pf-c-jump-links__toggle-icon--Color: var(--pf-c-jump-links--m-expanded__toggle-icon--Color);
9963
+ }
10022
9964
 
10023
- .pf-c-sidebar__panel.pf-m-width-100-on-lg {
10024
- --pf-c-sidebar__panel--FlexBasis: 100%;
10025
- }
9965
+ .pf-c-jump-links__list {
9966
+ position: relative;
9967
+ display: var(--pf-c-jump-links__list--Display);
9968
+ flex-direction: var(--pf-c-jump-links__list--FlexDirection);
9969
+ padding-top: var(--pf-c-jump-links__list--PaddingTop);
9970
+ padding-right: var(--pf-c-jump-links__list--PaddingRight);
9971
+ padding-bottom: var(--pf-c-jump-links__list--PaddingBottom);
9972
+ padding-left: var(--pf-c-jump-links__list--PaddingLeft);
9973
+ visibility: var(--pf-c-jump-links__list--Visibility);
10026
9974
  }
10027
- @media (min-width: 1200px) {
10028
- .pf-c-sidebar__panel.pf-m-width-default-on-xl {
10029
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10030
- }
10031
9975
 
10032
- .pf-c-sidebar__panel.pf-m-width-25-on-xl {
10033
- --pf-c-sidebar__panel--FlexBasis: 25%;
10034
- }
9976
+ .pf-c-jump-links__list::before {
9977
+ position: absolute;
9978
+ top: 0;
9979
+ right: 0;
9980
+ bottom: 0;
9981
+ left: 0;
9982
+ pointer-events: none;
9983
+ content: "";
9984
+ border: solid var(--pf-c-jump-links__list--before--BorderColor);
9985
+ border-width: var(--pf-c-jump-links__list--before--BorderTopWidth) var(--pf-c-jump-links__list--before--BorderRightWidth) var(--pf-c-jump-links__list--before--BorderBottomWidth) var(--pf-c-jump-links__list--before--BorderLeftWidth);
9986
+ }
10035
9987
 
10036
- .pf-c-sidebar__panel.pf-m-width-33-on-xl {
10037
- --pf-c-sidebar__panel--FlexBasis: 33%;
10038
- }
9988
+ .pf-c-jump-links__list .pf-c-jump-links__list {
9989
+ --pf-c-jump-links__list--PaddingTop: 0;
9990
+ --pf-c-jump-links__list--PaddingBottom: 0;
9991
+ --pf-c-jump-links__link--PaddingTop: var(--pf-c-jump-links__list__list__link--PaddingTop);
9992
+ --pf-c-jump-links__link--PaddingBottom: var(--pf-c-jump-links__list__list__link--PaddingBottom);
9993
+ --pf-c-jump-links__link--PaddingLeft: var(--pf-c-jump-links__list__list__link--PaddingLeft);
9994
+ margin-top: var(--pf-c-jump-links__list__list--MarginTop);
9995
+ }
10039
9996
 
10040
- .pf-c-sidebar__panel.pf-m-width-50-on-xl {
10041
- --pf-c-sidebar__panel--FlexBasis: 50%;
10042
- }
9997
+ .pf-c-jump-links__link {
9998
+ position: relative;
9999
+ display: flex;
10000
+ flex: 1;
10001
+ padding-top: var(--pf-c-jump-links__link--PaddingTop);
10002
+ padding-right: var(--pf-c-jump-links__link--PaddingRight);
10003
+ padding-bottom: var(--pf-c-jump-links__link--PaddingBottom);
10004
+ padding-left: var(--pf-c-jump-links__link--PaddingLeft);
10005
+ text-decoration: none;
10006
+ outline-offset: var(--pf-c-jump-links__link--OutlineOffset);
10007
+ }
10043
10008
 
10044
- .pf-c-sidebar__panel.pf-m-width-66-on-xl {
10045
- --pf-c-sidebar__panel--FlexBasis: 66%;
10046
- }
10009
+ .pf-c-jump-links__link:hover {
10010
+ --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--hover__link-text--Color);
10011
+ }
10047
10012
 
10048
- .pf-c-sidebar__panel.pf-m-width-75-on-xl {
10049
- --pf-c-sidebar__panel--FlexBasis: 75%;
10050
- }
10013
+ .pf-c-jump-links__link:focus {
10014
+ --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--focus__link-text--Color);
10015
+ }
10051
10016
 
10052
- .pf-c-sidebar__panel.pf-m-width-100-on-xl {
10053
- --pf-c-sidebar__panel--FlexBasis: 100%;
10054
- }
10017
+ .pf-c-jump-links__link::before {
10018
+ position: absolute;
10019
+ top: 0;
10020
+ right: 0;
10021
+ bottom: 0;
10022
+ left: 0;
10023
+ pointer-events: none;
10024
+ content: "";
10025
+ border-color: var(--pf-c-jump-links__link--before--BorderColor);
10026
+ border-style: solid;
10027
+ border-width: var(--pf-c-jump-links__link--before--BorderTopWidth) var(--pf-c-jump-links__link--before--BorderRightWidth) var(--pf-c-jump-links__link--before--BorderBottomWidth) var(--pf-c-jump-links__link--before--BorderLeftWidth);
10055
10028
  }
10056
- @media (min-width: 1450px) {
10057
- .pf-c-sidebar__panel.pf-m-width-default-on-2xl {
10058
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10059
- }
10060
10029
 
10061
- .pf-c-sidebar__panel.pf-m-width-25-on-2xl {
10062
- --pf-c-sidebar__panel--FlexBasis: 25%;
10063
- }
10030
+ .pf-c-jump-links__item {
10031
+ --pf-c-jump-links__list--before--BorderColor: transparent;
10032
+ }
10064
10033
 
10065
- .pf-c-sidebar__panel.pf-m-width-33-on-2xl {
10066
- --pf-c-sidebar__panel--FlexBasis: 33%;
10067
- }
10034
+ .pf-c-jump-links__item.pf-m-current > .pf-c-jump-links__link {
10035
+ --pf-c-jump-links__link--before--BorderTopWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderTopWidth);
10036
+ --pf-c-jump-links__link--before--BorderLeftWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderLeftWidth);
10037
+ --pf-c-jump-links__link--before--BorderColor: var(--pf-c-jump-links__item--m-current__link--before--BorderColor);
10038
+ --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__item--m-current__link-text--Color);
10039
+ }
10068
10040
 
10069
- .pf-c-sidebar__panel.pf-m-width-50-on-2xl {
10070
- --pf-c-sidebar__panel--FlexBasis: 50%;
10071
- }
10041
+ .pf-c-jump-links__link-text {
10042
+ color: var(--pf-c-jump-links__link-text--Color);
10043
+ }
10072
10044
 
10073
- .pf-c-sidebar__panel.pf-m-width-66-on-2xl {
10074
- --pf-c-sidebar__panel--FlexBasis: 66%;
10075
- }
10045
+ .pf-c-jump-links__label {
10046
+ display: var(--pf-c-jump-links__label--Display);
10047
+ margin-bottom: var(--pf-c-jump-links__label--MarginBottom);
10048
+ visibility: var(--pf-c-jump-links__label--Visibility);
10049
+ }
10076
10050
 
10077
- .pf-c-sidebar__panel.pf-m-width-75-on-2xl {
10078
- --pf-c-sidebar__panel--FlexBasis: 75%;
10079
- }
10051
+ .pf-c-jump-links__main {
10052
+ display: flex;
10053
+ flex-direction: column;
10054
+ }
10080
10055
 
10081
- .pf-c-sidebar__panel.pf-m-width-100-on-2xl {
10082
- --pf-c-sidebar__panel--FlexBasis: 100%;
10083
- }
10056
+ .pf-c-jump-links__toggle {
10057
+ display: var(--pf-c-jump-links__toggle--Display);
10058
+ margin-top: var(--pf-c-jump-links__toggle--MarginTop);
10059
+ margin-bottom: var(--pf-c-jump-links__toggle--MarginBottom);
10060
+ margin-left: var(--pf-c-jump-links__toggle--MarginLeft);
10061
+ visibility: var(--pf-c-jump-links__toggle--Visibility);
10062
+ }
10063
+
10064
+ .pf-c-jump-links__toggle .pf-c-button {
10065
+ display: flex;
10066
+ align-items: center;
10067
+ }
10068
+
10069
+ .pf-c-jump-links__toggle-icon {
10070
+ display: inline-block;
10071
+ color: var(--pf-c-jump-links__toggle-icon--Color);
10072
+ transition: var(--pf-c-jump-links__toggle-icon--Transition);
10073
+ transform: rotate(var(--pf-c-jump-links__toggle-icon--Rotate));
10084
10074
  }
10075
+
10076
+ .pf-c-jump-links__toggle-text {
10077
+ margin-left: var(--pf-c-jump-links__toggle-text--MarginLeft);
10078
+ color: var(--pf-c-jump-links__toggle-text--Color);
10079
+ }
10080
+
10085
10081
  .pf-c-label {
10086
10082
  --pf-c-label--PaddingTop: var(--pf-global--spacer--xs);
10087
10083
  --pf-c-label--PaddingRight: var(--pf-global--spacer--sm);
@@ -12022,8 +12018,8 @@ ul.pf-c-list {
12022
12018
  --pf-c-menu__group-title--PaddingTop: var(--pf-global--spacer--md);
12023
12019
  --pf-c-menu__group-title--PaddingRight: var(--pf-c-menu__item--PaddingRight);
12024
12020
  --pf-c-menu__group-title--PaddingLeft: var(--pf-c-menu__item--PaddingLeft);
12025
- --pf-c-menu__group-title--FontSize: var(--pf-global--FontSize--sm);
12026
- --pf-c-menu__group-title--FontWeight: var(--pf-global--FontWeight--bold);
12021
+ --pf-c-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
12022
+ --pf-c-menu__group-title--FontWeight: var(--pf-global--FontWeight--normal);
12027
12023
  --pf-c-menu__group-title--Color: var(--pf-global--Color--200);
12028
12024
  --pf-c-menu__item-description--FontSize: var(--pf-global--FontSize--xs);
12029
12025
  --pf-c-menu__item-description--Color: var(--pf-global--Color--200);
@@ -12573,8 +12569,6 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
12573
12569
  --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
12574
12570
  --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--400);
12575
12571
  --pf-c-menu__list-item--m-disabled__item--Color: var(--pf-global--Color--200);
12576
- --pf-c-menu__group-title--FontWeight: var(--pf-global--FontWeight--bold);
12577
- --pf-c-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
12578
12572
  }
12579
12573
 
12580
12574
  .pf-c-menu-toggle {
@@ -14952,8 +14946,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
14952
14946
  --pf-c-options-menu__group-title--PaddingRight: var(--pf-c-options-menu__menu-item--PaddingRight);
14953
14947
  --pf-c-options-menu__group-title--PaddingBottom: var(--pf-c-options-menu__menu-item--PaddingBottom);
14954
14948
  --pf-c-options-menu__group-title--PaddingLeft: var(--pf-c-options-menu__menu-item--PaddingLeft);
14955
- --pf-c-options-menu__group-title--FontSize: var(--pf-global--FontSize--sm);
14956
- --pf-c-options-menu__group-title--FontWeight: var(--pf-global--FontWeight--semi-bold);
14949
+ --pf-c-options-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
14950
+ --pf-c-options-menu__group-title--FontWeight: var(--pf-global--FontWeight--normal);
14957
14951
  --pf-c-options-menu__group-title--Color: var(--pf-global--Color--dark-200);
14958
14952
  --pf-c-options-menu--c-divider--MarginTop: var(--pf-global--spacer--sm);
14959
14953
  --pf-c-options-menu--c-divider--MarginBottom: var(--pf-global--spacer--sm);
@@ -15162,8 +15156,6 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
15162
15156
  --pf-c-options-menu__toggle--disabled--BackgroundColor: var(--pf-global--palette--black-500);
15163
15157
  --pf-c-options-menu__menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
15164
15158
  --pf-c-options-menu__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
15165
- --pf-c-options-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
15166
- --pf-c-options-menu__group-title--FontWeight: var(--pf-global--FontWeight--bold);
15167
15159
  --pf-c-options-menu__menu--Top: 100%;
15168
15160
  }
15169
15161
 
@@ -17920,8 +17912,8 @@ label.pf-c-radio, .pf-c-radio__label,
17920
17912
  --pf-c-select__menu-group-title--PaddingRight: var(--pf-c-select__menu-item--PaddingRight);
17921
17913
  --pf-c-select__menu-group-title--PaddingBottom: var(--pf-c-select__menu-item--PaddingBottom);
17922
17914
  --pf-c-select__menu-group-title--PaddingLeft: var(--pf-c-select__menu-item--PaddingLeft);
17923
- --pf-c-select__menu-group-title--FontSize: var(--pf-global--FontSize--sm);
17924
- --pf-c-select__menu-group-title--FontWeight: var(--pf-global--FontWeight--semi-bold);
17915
+ --pf-c-select__menu-group-title--FontSize: var(--pf-global--FontSize--xs);
17916
+ --pf-c-select__menu-group-title--FontWeight: var(--pf-global--FontWeight--normal);
17925
17917
  --pf-c-select__menu-group-title--Color: var(--pf-global--Color--dark-200);
17926
17918
  --pf-c-select__menu-item-count--MarginLeft: var(--pf-global--spacer--md);
17927
17919
  --pf-c-select__menu-item-count--FontSize: var(--pf-global--FontSize--sm);
@@ -19774,6 +19766,11 @@ svg.pf-c-spinner.pf-m-xl {
19774
19766
  --pf-c-tabs--inset: var(--pf-c-tabs--m-page-insets--inset);
19775
19767
  }
19776
19768
 
19769
+ .pf-c-tabs.pf-m-overflow,
19770
+ .pf-c-tabs.pf-m-overflow .pf-c-tabs__list {
19771
+ overflow: visible;
19772
+ }
19773
+
19777
19774
  .pf-c-tabs__toggle {
19778
19775
  display: var(--pf-c-tabs__toggle--Display);
19779
19776
  align-items: center;
@@ -22775,23 +22772,16 @@ svg.pf-c-spinner.pf-m-xl {
22775
22772
  --pf-c-badge--m-read--BackgroundColor: var(--pf-c-tree-view__node-count--c-badge--m-read--BackgroundColor);
22776
22773
  }
22777
22774
 
22778
- .pf-c-tree-view__node.pf-m-selectable .pf-c-tree-view__node-toggle {
22779
- --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--Color--base);
22780
- }
22781
-
22782
- .pf-c-tree-view__node:hover,
22783
- .pf-c-tree-view__node .pf-c-tree-view__node-toggle:hover {
22784
- --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--hover__icon--Color);
22775
+ .pf-c-tree-view__node:not(.pf-m-selectable):hover, .pf-c-tree-view__node.pf-m-selectable .pf-c-tree-view__node-toggle:hover {
22776
+ --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--hover--Color);
22785
22777
  }
22786
22778
 
22787
- .pf-c-tree-view__node:focus,
22788
- .pf-c-tree-view__node .pf-c-tree-view__node-toggle:focus {
22789
- --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--focus__icon--Color);
22779
+ .pf-c-tree-view__node:not(.pf-m-selectable):focus, .pf-c-tree-view__node.pf-m-selectable .pf-c-tree-view__node-toggle:focus {
22780
+ --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--focus--Color);
22790
22781
  }
22791
22782
 
22792
- .pf-c-tree-view__node:active,
22793
- .pf-c-tree-view__node .pf-c-tree-view__node-toggle:active {
22794
- --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--active__icon--Color);
22783
+ .pf-c-tree-view__node:not(.pf-m-selectable):active, .pf-c-tree-view__node.pf-m-selectable .pf-c-tree-view__node-toggle:active {
22784
+ --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--active--Color);
22795
22785
  }
22796
22786
 
22797
22787
  .pf-c-tree-view__node-container {