@patternfly/react-core 4.252.2 → 4.253.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/esm/components/ClipboardCopy/ClipboardCopy.d.ts +6 -1
  3. package/dist/esm/components/ClipboardCopy/ClipboardCopy.d.ts.map +1 -1
  4. package/dist/esm/components/ClipboardCopy/ClipboardCopy.js +5 -3
  5. package/dist/esm/components/ClipboardCopy/ClipboardCopy.js.map +1 -1
  6. package/dist/esm/components/Wizard/WizardNav.d.ts +2 -1
  7. package/dist/esm/components/Wizard/WizardNav.d.ts.map +1 -1
  8. package/dist/esm/components/Wizard/WizardNav.js +4 -2
  9. package/dist/esm/components/Wizard/WizardNav.js.map +1 -1
  10. package/dist/esm/components/Wizard/WizardNavItem.d.ts +2 -1
  11. package/dist/esm/components/Wizard/WizardNavItem.d.ts.map +1 -1
  12. package/dist/esm/components/Wizard/WizardNavItem.js +4 -2
  13. package/dist/esm/components/Wizard/WizardNavItem.js.map +1 -1
  14. package/dist/js/components/ClipboardCopy/ClipboardCopy.d.ts +6 -1
  15. package/dist/js/components/ClipboardCopy/ClipboardCopy.d.ts.map +1 -1
  16. package/dist/js/components/ClipboardCopy/ClipboardCopy.js +5 -3
  17. package/dist/js/components/ClipboardCopy/ClipboardCopy.js.map +1 -1
  18. package/dist/js/components/Wizard/WizardNav.d.ts +2 -1
  19. package/dist/js/components/Wizard/WizardNav.d.ts.map +1 -1
  20. package/dist/js/components/Wizard/WizardNav.js +4 -2
  21. package/dist/js/components/Wizard/WizardNav.js.map +1 -1
  22. package/dist/js/components/Wizard/WizardNavItem.d.ts +2 -1
  23. package/dist/js/components/Wizard/WizardNavItem.d.ts.map +1 -1
  24. package/dist/js/components/Wizard/WizardNavItem.js +4 -2
  25. package/dist/js/components/Wizard/WizardNavItem.js.map +1 -1
  26. package/dist/umd/react-core.min.css +404 -404
  27. package/dist/umd/react-core.min.js +2 -2
  28. package/package.json +2 -2
  29. package/src/components/ClipboardCopy/ClipboardCopy.tsx +11 -2
  30. package/src/components/ClipboardCopy/__tests__/Generated/__snapshots__/ClipboardCopy.test.tsx.snap +2 -0
  31. package/src/components/ClipboardCopy/examples/ClipboardCopy.md +1 -0
  32. package/src/components/Wizard/WizardNav.tsx +8 -2
  33. package/src/components/Wizard/WizardNavItem.tsx +6 -1
  34. package/src/components/Wizard/__tests__/Generated/__snapshots__/WizardNav.test.tsx.snap +3 -0
  35. package/src/components/Wizard/__tests__/Generated/__snapshots__/WizardNavItem.test.tsx.snap +3 -0
  36. package/src/components/Wizard/__tests__/__snapshots__/Wizard.test.tsx.snap +48 -0
  37. package/src/components/Wizard/examples/Wizard.md +5 -4
@@ -9668,327 +9668,6 @@ label.pf-c-input-group__text {
9668
9668
  --pf-c-input-group__text--BackgroundColor: transparent;
9669
9669
  }
9670
9670
 
9671
- .pf-c-jump-links {
9672
- --pf-c-jump-links__list--Display: flex;
9673
- --pf-c-jump-links__list--Visibility: visible;
9674
- --pf-c-jump-links__list--PaddingTop: 0;
9675
- --pf-c-jump-links__list--PaddingRight: var(--pf-global--spacer--md);
9676
- --pf-c-jump-links__list--PaddingBottom: 0;
9677
- --pf-c-jump-links__list--PaddingLeft: var(--pf-global--spacer--md);
9678
- --pf-c-jump-links--m-vertical__list--PaddingTop: var(--pf-global--spacer--md);
9679
- --pf-c-jump-links--m-vertical__list--PaddingRight: 0;
9680
- --pf-c-jump-links--m-vertical__list--PaddingBottom: var(--pf-global--spacer--md);
9681
- --pf-c-jump-links--m-vertical__list--PaddingLeft: 0;
9682
- --pf-c-jump-links__list--FlexDirection: row;
9683
- --pf-c-jump-links--m-vertical__list--FlexDirection: column;
9684
- --pf-c-jump-links__list--before--BorderColor: var(--pf-global--BorderColor--100);
9685
- --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-global--BorderWidth--sm);
9686
- --pf-c-jump-links__list--before--BorderRightWidth: 0;
9687
- --pf-c-jump-links__list--before--BorderBottomWidth: 0;
9688
- --pf-c-jump-links__list--before--BorderLeftWidth: 0;
9689
- --pf-c-jump-links--m-vertical__list--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
9690
- --pf-c-jump-links--m-vertical__list--before--BorderTopWidth: 0;
9691
- --pf-c-jump-links__list__list--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
9692
- --pf-c-jump-links__link--PaddingTop: var(--pf-global--spacer--md);
9693
- --pf-c-jump-links__link--PaddingRight: var(--pf-global--spacer--md);
9694
- --pf-c-jump-links__link--PaddingBottom: var(--pf-global--spacer--md);
9695
- --pf-c-jump-links__link--PaddingLeft: var(--pf-global--spacer--md);
9696
- --pf-c-jump-links__list__list__link--PaddingTop: var(--pf-global--spacer--sm);
9697
- --pf-c-jump-links__list__list__link--PaddingLeft: var(--pf-global--spacer--lg);
9698
- --pf-c-jump-links__list__list__link--PaddingBottom: var(--pf-global--spacer--sm);
9699
- --pf-c-jump-links__link--OutlineOffset: calc(-1 * var(--pf-global--spacer--sm));
9700
- --pf-c-jump-links__link--before--BorderTopWidth: 0;
9701
- --pf-c-jump-links__link--before--BorderRightWidth: 0;
9702
- --pf-c-jump-links__link--before--BorderBottomWidth: 0;
9703
- --pf-c-jump-links__link--before--BorderLeftWidth: 0;
9704
- --pf-c-jump-links__link--before--BorderColor: transparent;
9705
- --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-global--BorderWidth--lg);
9706
- --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: 0;
9707
- --pf-c-jump-links__item--m-current__link--before--BorderColor: var(--pf-global--primary-color--100);
9708
- --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth: 0;
9709
- --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth: var(--pf-global--BorderWidth--lg);
9710
- --pf-c-jump-links__link-text--Color: var(--pf-global--Color--200);
9711
- --pf-c-jump-links__link--hover__link-text--Color: var(--pf-global--Color--100);
9712
- --pf-c-jump-links__link--focus__link-text--Color: var(--pf-global--Color--100);
9713
- --pf-c-jump-links__item--m-current__link-text--Color: var(--pf-global--Color--100);
9714
- --pf-c-jump-links__label--MarginBottom: var(--pf-global--spacer--md);
9715
- --pf-c-jump-links__label--Display: block;
9716
- --pf-c-jump-links__label--Visibility: visible;
9717
- --pf-c-jump-links__toggle--MarginTop: calc(-1 * var(--pf-global--spacer--form-element));
9718
- --pf-c-jump-links__toggle--MarginBottom--base: calc(-1 * var(--pf-global--spacer--form-element));
9719
- --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links__toggle--MarginBottom--base);
9720
- --pf-c-jump-links--m-expanded__toggle--MarginBottom: calc(var(--pf-c-jump-links__toggle--MarginBottom--base) + var(--pf-global--spacer--md));
9721
- --pf-c-jump-links__toggle--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
9722
- --pf-c-jump-links__toggle--Display: none;
9723
- --pf-c-jump-links__toggle--Visibility: hidden;
9724
- --pf-c-jump-links__toggle-icon--Color: currentcolor;
9725
- --pf-c-jump-links__toggle-icon--Transition: var(--pf-global--Transition);
9726
- --pf-c-jump-links__toggle-icon--Rotate: 0;
9727
- --pf-c-jump-links--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
9728
- --pf-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
9729
- --pf-c-jump-links__toggle-text--MarginLeft: var(--pf-global--spacer--md);
9730
- --pf-c-jump-links__toggle-text--Color: var(--pf-global--Color--100);
9731
- display: flex;
9732
- }
9733
-
9734
- .pf-c-jump-links.pf-m-center {
9735
- justify-content: center;
9736
- }
9737
-
9738
- .pf-c-jump-links.pf-m-center .pf-c-jump-links__main {
9739
- align-items: center;
9740
- }
9741
-
9742
- .pf-c-jump-links.pf-m-vertical, .pf-c-jump-links.pf-m-expandable {
9743
- --pf-c-jump-links__list--PaddingTop: var(--pf-c-jump-links--m-vertical__list--PaddingTop);
9744
- --pf-c-jump-links__list--PaddingRight: var(--pf-c-jump-links--m-vertical__list--PaddingRight);
9745
- --pf-c-jump-links__list--PaddingBottom: var(--pf-c-jump-links--m-vertical__list--PaddingBottom);
9746
- --pf-c-jump-links__list--PaddingLeft: var(--pf-c-jump-links--m-vertical__list--PaddingLeft);
9747
- --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderTopWidth);
9748
- --pf-c-jump-links__list--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderLeftWidth);
9749
- --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth);
9750
- --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth);
9751
- --pf-c-jump-links__list--FlexDirection: var(--pf-c-jump-links--m-vertical__list--FlexDirection);
9752
- flex-direction: column;
9753
- }
9754
-
9755
- .pf-c-jump-links.pf-m-expandable {
9756
- --pf-c-jump-links__list--Display: none;
9757
- --pf-c-jump-links__list--Visibility: hidden;
9758
- --pf-c-jump-links__toggle--Display: block;
9759
- --pf-c-jump-links__toggle--Visibility: visible;
9760
- --pf-c-jump-links__label--Display: none;
9761
- --pf-c-jump-links__label--Visibility: hidden;
9762
- }
9763
-
9764
- .pf-c-jump-links.pf-m-non-expandable {
9765
- --pf-c-jump-links__list--Display: flex;
9766
- --pf-c-jump-links__list--Visibility: visible;
9767
- --pf-c-jump-links__toggle--Display: none;
9768
- --pf-c-jump-links__toggle--Visibility: hidden;
9769
- --pf-c-jump-links__label--Display: block;
9770
- --pf-c-jump-links__label--Visibility: visible;
9771
- }
9772
-
9773
- @media (min-width: 576px) {
9774
- .pf-c-jump-links.pf-m-expandable-on-sm {
9775
- --pf-c-jump-links__list--Display: none;
9776
- --pf-c-jump-links__list--Visibility: hidden;
9777
- --pf-c-jump-links__toggle--Display: block;
9778
- --pf-c-jump-links__toggle--Visibility: visible;
9779
- --pf-c-jump-links__label--Display: none;
9780
- --pf-c-jump-links__label--Visibility: hidden;
9781
- }
9782
-
9783
- .pf-c-jump-links.pf-m-non-expandable-on-sm {
9784
- --pf-c-jump-links__list--Display: flex;
9785
- --pf-c-jump-links__list--Visibility: visible;
9786
- --pf-c-jump-links__toggle--Display: none;
9787
- --pf-c-jump-links__toggle--Visibility: hidden;
9788
- --pf-c-jump-links__label--Display: block;
9789
- --pf-c-jump-links__label--Visibility: visible;
9790
- }
9791
- }
9792
- @media (min-width: 768px) {
9793
- .pf-c-jump-links.pf-m-expandable-on-md {
9794
- --pf-c-jump-links__list--Display: none;
9795
- --pf-c-jump-links__list--Visibility: hidden;
9796
- --pf-c-jump-links__toggle--Display: block;
9797
- --pf-c-jump-links__toggle--Visibility: visible;
9798
- --pf-c-jump-links__label--Display: none;
9799
- --pf-c-jump-links__label--Visibility: hidden;
9800
- }
9801
-
9802
- .pf-c-jump-links.pf-m-non-expandable-on-md {
9803
- --pf-c-jump-links__list--Display: flex;
9804
- --pf-c-jump-links__list--Visibility: visible;
9805
- --pf-c-jump-links__toggle--Display: none;
9806
- --pf-c-jump-links__toggle--Visibility: hidden;
9807
- --pf-c-jump-links__label--Display: block;
9808
- --pf-c-jump-links__label--Visibility: visible;
9809
- }
9810
- }
9811
- @media (min-width: 992px) {
9812
- .pf-c-jump-links.pf-m-expandable-on-lg {
9813
- --pf-c-jump-links__list--Display: none;
9814
- --pf-c-jump-links__list--Visibility: hidden;
9815
- --pf-c-jump-links__toggle--Display: block;
9816
- --pf-c-jump-links__toggle--Visibility: visible;
9817
- --pf-c-jump-links__label--Display: none;
9818
- --pf-c-jump-links__label--Visibility: hidden;
9819
- }
9820
-
9821
- .pf-c-jump-links.pf-m-non-expandable-on-lg {
9822
- --pf-c-jump-links__list--Display: flex;
9823
- --pf-c-jump-links__list--Visibility: visible;
9824
- --pf-c-jump-links__toggle--Display: none;
9825
- --pf-c-jump-links__toggle--Visibility: hidden;
9826
- --pf-c-jump-links__label--Display: block;
9827
- --pf-c-jump-links__label--Visibility: visible;
9828
- }
9829
- }
9830
- @media (min-width: 1200px) {
9831
- .pf-c-jump-links.pf-m-expandable-on-xl {
9832
- --pf-c-jump-links__list--Display: none;
9833
- --pf-c-jump-links__list--Visibility: hidden;
9834
- --pf-c-jump-links__toggle--Display: block;
9835
- --pf-c-jump-links__toggle--Visibility: visible;
9836
- --pf-c-jump-links__label--Display: none;
9837
- --pf-c-jump-links__label--Visibility: hidden;
9838
- }
9839
-
9840
- .pf-c-jump-links.pf-m-non-expandable-on-xl {
9841
- --pf-c-jump-links__list--Display: flex;
9842
- --pf-c-jump-links__list--Visibility: visible;
9843
- --pf-c-jump-links__toggle--Display: none;
9844
- --pf-c-jump-links__toggle--Visibility: hidden;
9845
- --pf-c-jump-links__label--Display: block;
9846
- --pf-c-jump-links__label--Visibility: visible;
9847
- }
9848
- }
9849
- @media (min-width: 1450px) {
9850
- .pf-c-jump-links.pf-m-expandable-on-2xl {
9851
- --pf-c-jump-links__list--Display: none;
9852
- --pf-c-jump-links__list--Visibility: hidden;
9853
- --pf-c-jump-links__toggle--Display: block;
9854
- --pf-c-jump-links__toggle--Visibility: visible;
9855
- --pf-c-jump-links__label--Display: none;
9856
- --pf-c-jump-links__label--Visibility: hidden;
9857
- }
9858
-
9859
- .pf-c-jump-links.pf-m-non-expandable-on-2xl {
9860
- --pf-c-jump-links__list--Display: flex;
9861
- --pf-c-jump-links__list--Visibility: visible;
9862
- --pf-c-jump-links__toggle--Display: none;
9863
- --pf-c-jump-links__toggle--Visibility: hidden;
9864
- --pf-c-jump-links__label--Display: block;
9865
- --pf-c-jump-links__label--Visibility: visible;
9866
- }
9867
- }
9868
- .pf-c-jump-links.pf-m-expanded {
9869
- --pf-c-jump-links__list--Display: flex;
9870
- --pf-c-jump-links__list--Visibility: visible;
9871
- --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links--m-expanded__toggle--MarginBottom);
9872
- --pf-c-jump-links__toggle-icon--Rotate: var(--pf-c-jump-links--m-expanded__toggle-icon--Rotate);
9873
- --pf-c-jump-links__toggle-icon--Color: var(--pf-c-jump-links--m-expanded__toggle-icon--Color);
9874
- }
9875
-
9876
- .pf-c-jump-links__list {
9877
- position: relative;
9878
- display: var(--pf-c-jump-links__list--Display);
9879
- flex-direction: var(--pf-c-jump-links__list--FlexDirection);
9880
- padding-top: var(--pf-c-jump-links__list--PaddingTop);
9881
- padding-right: var(--pf-c-jump-links__list--PaddingRight);
9882
- padding-bottom: var(--pf-c-jump-links__list--PaddingBottom);
9883
- padding-left: var(--pf-c-jump-links__list--PaddingLeft);
9884
- visibility: var(--pf-c-jump-links__list--Visibility);
9885
- }
9886
-
9887
- .pf-c-jump-links__list::before {
9888
- position: absolute;
9889
- top: 0;
9890
- right: 0;
9891
- bottom: 0;
9892
- left: 0;
9893
- pointer-events: none;
9894
- content: "";
9895
- border: solid var(--pf-c-jump-links__list--before--BorderColor);
9896
- 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);
9897
- }
9898
-
9899
- .pf-c-jump-links__list .pf-c-jump-links__list {
9900
- --pf-c-jump-links__list--PaddingTop: 0;
9901
- --pf-c-jump-links__list--PaddingBottom: 0;
9902
- --pf-c-jump-links__link--PaddingTop: var(--pf-c-jump-links__list__list__link--PaddingTop);
9903
- --pf-c-jump-links__link--PaddingBottom: var(--pf-c-jump-links__list__list__link--PaddingBottom);
9904
- --pf-c-jump-links__link--PaddingLeft: var(--pf-c-jump-links__list__list__link--PaddingLeft);
9905
- margin-top: var(--pf-c-jump-links__list__list--MarginTop);
9906
- }
9907
-
9908
- .pf-c-jump-links__link {
9909
- position: relative;
9910
- display: flex;
9911
- flex: 1;
9912
- padding-top: var(--pf-c-jump-links__link--PaddingTop);
9913
- padding-right: var(--pf-c-jump-links__link--PaddingRight);
9914
- padding-bottom: var(--pf-c-jump-links__link--PaddingBottom);
9915
- padding-left: var(--pf-c-jump-links__link--PaddingLeft);
9916
- text-decoration: none;
9917
- outline-offset: var(--pf-c-jump-links__link--OutlineOffset);
9918
- }
9919
-
9920
- .pf-c-jump-links__link:hover {
9921
- --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--hover__link-text--Color);
9922
- }
9923
-
9924
- .pf-c-jump-links__link:focus {
9925
- --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--focus__link-text--Color);
9926
- }
9927
-
9928
- .pf-c-jump-links__link::before {
9929
- position: absolute;
9930
- top: 0;
9931
- right: 0;
9932
- bottom: 0;
9933
- left: 0;
9934
- pointer-events: none;
9935
- content: "";
9936
- border-color: var(--pf-c-jump-links__link--before--BorderColor);
9937
- border-style: solid;
9938
- 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);
9939
- }
9940
-
9941
- .pf-c-jump-links__item {
9942
- --pf-c-jump-links__list--before--BorderColor: transparent;
9943
- }
9944
-
9945
- .pf-c-jump-links__item.pf-m-current > .pf-c-jump-links__link {
9946
- --pf-c-jump-links__link--before--BorderTopWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderTopWidth);
9947
- --pf-c-jump-links__link--before--BorderLeftWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderLeftWidth);
9948
- --pf-c-jump-links__link--before--BorderColor: var(--pf-c-jump-links__item--m-current__link--before--BorderColor);
9949
- --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__item--m-current__link-text--Color);
9950
- }
9951
-
9952
- .pf-c-jump-links__link-text {
9953
- color: var(--pf-c-jump-links__link-text--Color);
9954
- }
9955
-
9956
- .pf-c-jump-links__label {
9957
- display: var(--pf-c-jump-links__label--Display);
9958
- margin-bottom: var(--pf-c-jump-links__label--MarginBottom);
9959
- visibility: var(--pf-c-jump-links__label--Visibility);
9960
- }
9961
-
9962
- .pf-c-jump-links__main {
9963
- display: flex;
9964
- flex-direction: column;
9965
- }
9966
-
9967
- .pf-c-jump-links__toggle {
9968
- display: var(--pf-c-jump-links__toggle--Display);
9969
- margin-top: var(--pf-c-jump-links__toggle--MarginTop);
9970
- margin-bottom: var(--pf-c-jump-links__toggle--MarginBottom);
9971
- margin-left: var(--pf-c-jump-links__toggle--MarginLeft);
9972
- visibility: var(--pf-c-jump-links__toggle--Visibility);
9973
- }
9974
-
9975
- .pf-c-jump-links__toggle .pf-c-button {
9976
- display: flex;
9977
- align-items: center;
9978
- }
9979
-
9980
- .pf-c-jump-links__toggle-icon {
9981
- display: inline-block;
9982
- color: var(--pf-c-jump-links__toggle-icon--Color);
9983
- transition: var(--pf-c-jump-links__toggle-icon--Transition);
9984
- transform: rotate(var(--pf-c-jump-links__toggle-icon--Rotate));
9985
- }
9986
-
9987
- .pf-c-jump-links__toggle-text {
9988
- margin-left: var(--pf-c-jump-links__toggle-text--MarginLeft);
9989
- color: var(--pf-c-jump-links__toggle-text--Color);
9990
- }
9991
-
9992
9671
  .pf-c-sidebar {
9993
9672
  --pf-c-sidebar--BackgroundColor: var(--pf-global--BackgroundColor--100);
9994
9673
  --pf-c-sidebar__main--FlexDirection: column;
@@ -10197,121 +9876,442 @@ label.pf-c-input-group__text {
10197
9876
  }
10198
9877
  }
10199
9878
  @media (min-width: 768px) {
10200
- .pf-c-sidebar__panel.pf-m-width-default-on-md {
10201
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10202
- }
10203
-
10204
- .pf-c-sidebar__panel.pf-m-width-25-on-md {
10205
- --pf-c-sidebar__panel--FlexBasis: 25%;
9879
+ .pf-c-sidebar__panel.pf-m-width-default-on-md {
9880
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9881
+ }
9882
+
9883
+ .pf-c-sidebar__panel.pf-m-width-25-on-md {
9884
+ --pf-c-sidebar__panel--FlexBasis: 25%;
9885
+ }
9886
+
9887
+ .pf-c-sidebar__panel.pf-m-width-33-on-md {
9888
+ --pf-c-sidebar__panel--FlexBasis: 33%;
9889
+ }
9890
+
9891
+ .pf-c-sidebar__panel.pf-m-width-50-on-md {
9892
+ --pf-c-sidebar__panel--FlexBasis: 50%;
9893
+ }
9894
+
9895
+ .pf-c-sidebar__panel.pf-m-width-66-on-md {
9896
+ --pf-c-sidebar__panel--FlexBasis: 66%;
9897
+ }
9898
+
9899
+ .pf-c-sidebar__panel.pf-m-width-75-on-md {
9900
+ --pf-c-sidebar__panel--FlexBasis: 75%;
9901
+ }
9902
+
9903
+ .pf-c-sidebar__panel.pf-m-width-100-on-md {
9904
+ --pf-c-sidebar__panel--FlexBasis: 100%;
9905
+ }
9906
+ }
9907
+ @media (min-width: 992px) {
9908
+ .pf-c-sidebar__panel.pf-m-width-default-on-lg {
9909
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9910
+ }
9911
+
9912
+ .pf-c-sidebar__panel.pf-m-width-25-on-lg {
9913
+ --pf-c-sidebar__panel--FlexBasis: 25%;
9914
+ }
9915
+
9916
+ .pf-c-sidebar__panel.pf-m-width-33-on-lg {
9917
+ --pf-c-sidebar__panel--FlexBasis: 33%;
9918
+ }
9919
+
9920
+ .pf-c-sidebar__panel.pf-m-width-50-on-lg {
9921
+ --pf-c-sidebar__panel--FlexBasis: 50%;
9922
+ }
9923
+
9924
+ .pf-c-sidebar__panel.pf-m-width-66-on-lg {
9925
+ --pf-c-sidebar__panel--FlexBasis: 66%;
9926
+ }
9927
+
9928
+ .pf-c-sidebar__panel.pf-m-width-75-on-lg {
9929
+ --pf-c-sidebar__panel--FlexBasis: 75%;
9930
+ }
9931
+
9932
+ .pf-c-sidebar__panel.pf-m-width-100-on-lg {
9933
+ --pf-c-sidebar__panel--FlexBasis: 100%;
9934
+ }
9935
+ }
9936
+ @media (min-width: 1200px) {
9937
+ .pf-c-sidebar__panel.pf-m-width-default-on-xl {
9938
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9939
+ }
9940
+
9941
+ .pf-c-sidebar__panel.pf-m-width-25-on-xl {
9942
+ --pf-c-sidebar__panel--FlexBasis: 25%;
9943
+ }
9944
+
9945
+ .pf-c-sidebar__panel.pf-m-width-33-on-xl {
9946
+ --pf-c-sidebar__panel--FlexBasis: 33%;
9947
+ }
9948
+
9949
+ .pf-c-sidebar__panel.pf-m-width-50-on-xl {
9950
+ --pf-c-sidebar__panel--FlexBasis: 50%;
9951
+ }
9952
+
9953
+ .pf-c-sidebar__panel.pf-m-width-66-on-xl {
9954
+ --pf-c-sidebar__panel--FlexBasis: 66%;
9955
+ }
9956
+
9957
+ .pf-c-sidebar__panel.pf-m-width-75-on-xl {
9958
+ --pf-c-sidebar__panel--FlexBasis: 75%;
9959
+ }
9960
+
9961
+ .pf-c-sidebar__panel.pf-m-width-100-on-xl {
9962
+ --pf-c-sidebar__panel--FlexBasis: 100%;
9963
+ }
9964
+ }
9965
+ @media (min-width: 1450px) {
9966
+ .pf-c-sidebar__panel.pf-m-width-default-on-2xl {
9967
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9968
+ }
9969
+
9970
+ .pf-c-sidebar__panel.pf-m-width-25-on-2xl {
9971
+ --pf-c-sidebar__panel--FlexBasis: 25%;
9972
+ }
9973
+
9974
+ .pf-c-sidebar__panel.pf-m-width-33-on-2xl {
9975
+ --pf-c-sidebar__panel--FlexBasis: 33%;
9976
+ }
9977
+
9978
+ .pf-c-sidebar__panel.pf-m-width-50-on-2xl {
9979
+ --pf-c-sidebar__panel--FlexBasis: 50%;
9980
+ }
9981
+
9982
+ .pf-c-sidebar__panel.pf-m-width-66-on-2xl {
9983
+ --pf-c-sidebar__panel--FlexBasis: 66%;
9984
+ }
9985
+
9986
+ .pf-c-sidebar__panel.pf-m-width-75-on-2xl {
9987
+ --pf-c-sidebar__panel--FlexBasis: 75%;
9988
+ }
9989
+
9990
+ .pf-c-sidebar__panel.pf-m-width-100-on-2xl {
9991
+ --pf-c-sidebar__panel--FlexBasis: 100%;
9992
+ }
9993
+ }
9994
+ .pf-c-jump-links {
9995
+ --pf-c-jump-links__list--Display: flex;
9996
+ --pf-c-jump-links__list--Visibility: visible;
9997
+ --pf-c-jump-links__list--PaddingTop: 0;
9998
+ --pf-c-jump-links__list--PaddingRight: var(--pf-global--spacer--md);
9999
+ --pf-c-jump-links__list--PaddingBottom: 0;
10000
+ --pf-c-jump-links__list--PaddingLeft: var(--pf-global--spacer--md);
10001
+ --pf-c-jump-links--m-vertical__list--PaddingTop: var(--pf-global--spacer--md);
10002
+ --pf-c-jump-links--m-vertical__list--PaddingRight: 0;
10003
+ --pf-c-jump-links--m-vertical__list--PaddingBottom: var(--pf-global--spacer--md);
10004
+ --pf-c-jump-links--m-vertical__list--PaddingLeft: 0;
10005
+ --pf-c-jump-links__list--FlexDirection: row;
10006
+ --pf-c-jump-links--m-vertical__list--FlexDirection: column;
10007
+ --pf-c-jump-links__list--before--BorderColor: var(--pf-global--BorderColor--100);
10008
+ --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-global--BorderWidth--sm);
10009
+ --pf-c-jump-links__list--before--BorderRightWidth: 0;
10010
+ --pf-c-jump-links__list--before--BorderBottomWidth: 0;
10011
+ --pf-c-jump-links__list--before--BorderLeftWidth: 0;
10012
+ --pf-c-jump-links--m-vertical__list--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
10013
+ --pf-c-jump-links--m-vertical__list--before--BorderTopWidth: 0;
10014
+ --pf-c-jump-links__list__list--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
10015
+ --pf-c-jump-links__link--PaddingTop: var(--pf-global--spacer--md);
10016
+ --pf-c-jump-links__link--PaddingRight: var(--pf-global--spacer--md);
10017
+ --pf-c-jump-links__link--PaddingBottom: var(--pf-global--spacer--md);
10018
+ --pf-c-jump-links__link--PaddingLeft: var(--pf-global--spacer--md);
10019
+ --pf-c-jump-links__list__list__link--PaddingTop: var(--pf-global--spacer--sm);
10020
+ --pf-c-jump-links__list__list__link--PaddingLeft: var(--pf-global--spacer--lg);
10021
+ --pf-c-jump-links__list__list__link--PaddingBottom: var(--pf-global--spacer--sm);
10022
+ --pf-c-jump-links__link--OutlineOffset: calc(-1 * var(--pf-global--spacer--sm));
10023
+ --pf-c-jump-links__link--before--BorderTopWidth: 0;
10024
+ --pf-c-jump-links__link--before--BorderRightWidth: 0;
10025
+ --pf-c-jump-links__link--before--BorderBottomWidth: 0;
10026
+ --pf-c-jump-links__link--before--BorderLeftWidth: 0;
10027
+ --pf-c-jump-links__link--before--BorderColor: transparent;
10028
+ --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-global--BorderWidth--lg);
10029
+ --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: 0;
10030
+ --pf-c-jump-links__item--m-current__link--before--BorderColor: var(--pf-global--primary-color--100);
10031
+ --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth: 0;
10032
+ --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth: var(--pf-global--BorderWidth--lg);
10033
+ --pf-c-jump-links__link-text--Color: var(--pf-global--Color--200);
10034
+ --pf-c-jump-links__link--hover__link-text--Color: var(--pf-global--Color--100);
10035
+ --pf-c-jump-links__link--focus__link-text--Color: var(--pf-global--Color--100);
10036
+ --pf-c-jump-links__item--m-current__link-text--Color: var(--pf-global--Color--100);
10037
+ --pf-c-jump-links__label--MarginBottom: var(--pf-global--spacer--md);
10038
+ --pf-c-jump-links__label--Display: block;
10039
+ --pf-c-jump-links__label--Visibility: visible;
10040
+ --pf-c-jump-links__toggle--MarginTop: calc(-1 * var(--pf-global--spacer--form-element));
10041
+ --pf-c-jump-links__toggle--MarginBottom--base: calc(-1 * var(--pf-global--spacer--form-element));
10042
+ --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links__toggle--MarginBottom--base);
10043
+ --pf-c-jump-links--m-expanded__toggle--MarginBottom: calc(var(--pf-c-jump-links__toggle--MarginBottom--base) + var(--pf-global--spacer--md));
10044
+ --pf-c-jump-links__toggle--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
10045
+ --pf-c-jump-links__toggle--Display: none;
10046
+ --pf-c-jump-links__toggle--Visibility: hidden;
10047
+ --pf-c-jump-links__toggle-icon--Color: currentcolor;
10048
+ --pf-c-jump-links__toggle-icon--Transition: var(--pf-global--Transition);
10049
+ --pf-c-jump-links__toggle-icon--Rotate: 0;
10050
+ --pf-c-jump-links--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
10051
+ --pf-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
10052
+ --pf-c-jump-links__toggle-text--MarginLeft: var(--pf-global--spacer--md);
10053
+ --pf-c-jump-links__toggle-text--Color: var(--pf-global--Color--100);
10054
+ display: flex;
10055
+ }
10056
+
10057
+ .pf-c-jump-links.pf-m-center {
10058
+ justify-content: center;
10059
+ }
10060
+
10061
+ .pf-c-jump-links.pf-m-center .pf-c-jump-links__main {
10062
+ align-items: center;
10063
+ }
10064
+
10065
+ .pf-c-jump-links.pf-m-vertical, .pf-c-jump-links.pf-m-expandable {
10066
+ --pf-c-jump-links__list--PaddingTop: var(--pf-c-jump-links--m-vertical__list--PaddingTop);
10067
+ --pf-c-jump-links__list--PaddingRight: var(--pf-c-jump-links--m-vertical__list--PaddingRight);
10068
+ --pf-c-jump-links__list--PaddingBottom: var(--pf-c-jump-links--m-vertical__list--PaddingBottom);
10069
+ --pf-c-jump-links__list--PaddingLeft: var(--pf-c-jump-links--m-vertical__list--PaddingLeft);
10070
+ --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderTopWidth);
10071
+ --pf-c-jump-links__list--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderLeftWidth);
10072
+ --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth);
10073
+ --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth);
10074
+ --pf-c-jump-links__list--FlexDirection: var(--pf-c-jump-links--m-vertical__list--FlexDirection);
10075
+ flex-direction: column;
10076
+ }
10077
+
10078
+ .pf-c-jump-links.pf-m-expandable {
10079
+ --pf-c-jump-links__list--Display: none;
10080
+ --pf-c-jump-links__list--Visibility: hidden;
10081
+ --pf-c-jump-links__toggle--Display: block;
10082
+ --pf-c-jump-links__toggle--Visibility: visible;
10083
+ --pf-c-jump-links__label--Display: none;
10084
+ --pf-c-jump-links__label--Visibility: hidden;
10085
+ }
10086
+
10087
+ .pf-c-jump-links.pf-m-non-expandable {
10088
+ --pf-c-jump-links__list--Display: flex;
10089
+ --pf-c-jump-links__list--Visibility: visible;
10090
+ --pf-c-jump-links__toggle--Display: none;
10091
+ --pf-c-jump-links__toggle--Visibility: hidden;
10092
+ --pf-c-jump-links__label--Display: block;
10093
+ --pf-c-jump-links__label--Visibility: visible;
10094
+ }
10095
+
10096
+ @media (min-width: 576px) {
10097
+ .pf-c-jump-links.pf-m-expandable-on-sm {
10098
+ --pf-c-jump-links__list--Display: none;
10099
+ --pf-c-jump-links__list--Visibility: hidden;
10100
+ --pf-c-jump-links__toggle--Display: block;
10101
+ --pf-c-jump-links__toggle--Visibility: visible;
10102
+ --pf-c-jump-links__label--Display: none;
10103
+ --pf-c-jump-links__label--Visibility: hidden;
10104
+ }
10105
+
10106
+ .pf-c-jump-links.pf-m-non-expandable-on-sm {
10107
+ --pf-c-jump-links__list--Display: flex;
10108
+ --pf-c-jump-links__list--Visibility: visible;
10109
+ --pf-c-jump-links__toggle--Display: none;
10110
+ --pf-c-jump-links__toggle--Visibility: hidden;
10111
+ --pf-c-jump-links__label--Display: block;
10112
+ --pf-c-jump-links__label--Visibility: visible;
10113
+ }
10114
+ }
10115
+ @media (min-width: 768px) {
10116
+ .pf-c-jump-links.pf-m-expandable-on-md {
10117
+ --pf-c-jump-links__list--Display: none;
10118
+ --pf-c-jump-links__list--Visibility: hidden;
10119
+ --pf-c-jump-links__toggle--Display: block;
10120
+ --pf-c-jump-links__toggle--Visibility: visible;
10121
+ --pf-c-jump-links__label--Display: none;
10122
+ --pf-c-jump-links__label--Visibility: hidden;
10206
10123
  }
10207
10124
 
10208
- .pf-c-sidebar__panel.pf-m-width-33-on-md {
10209
- --pf-c-sidebar__panel--FlexBasis: 33%;
10125
+ .pf-c-jump-links.pf-m-non-expandable-on-md {
10126
+ --pf-c-jump-links__list--Display: flex;
10127
+ --pf-c-jump-links__list--Visibility: visible;
10128
+ --pf-c-jump-links__toggle--Display: none;
10129
+ --pf-c-jump-links__toggle--Visibility: hidden;
10130
+ --pf-c-jump-links__label--Display: block;
10131
+ --pf-c-jump-links__label--Visibility: visible;
10210
10132
  }
10211
-
10212
- .pf-c-sidebar__panel.pf-m-width-50-on-md {
10213
- --pf-c-sidebar__panel--FlexBasis: 50%;
10133
+ }
10134
+ @media (min-width: 992px) {
10135
+ .pf-c-jump-links.pf-m-expandable-on-lg {
10136
+ --pf-c-jump-links__list--Display: none;
10137
+ --pf-c-jump-links__list--Visibility: hidden;
10138
+ --pf-c-jump-links__toggle--Display: block;
10139
+ --pf-c-jump-links__toggle--Visibility: visible;
10140
+ --pf-c-jump-links__label--Display: none;
10141
+ --pf-c-jump-links__label--Visibility: hidden;
10214
10142
  }
10215
10143
 
10216
- .pf-c-sidebar__panel.pf-m-width-66-on-md {
10217
- --pf-c-sidebar__panel--FlexBasis: 66%;
10144
+ .pf-c-jump-links.pf-m-non-expandable-on-lg {
10145
+ --pf-c-jump-links__list--Display: flex;
10146
+ --pf-c-jump-links__list--Visibility: visible;
10147
+ --pf-c-jump-links__toggle--Display: none;
10148
+ --pf-c-jump-links__toggle--Visibility: hidden;
10149
+ --pf-c-jump-links__label--Display: block;
10150
+ --pf-c-jump-links__label--Visibility: visible;
10218
10151
  }
10219
-
10220
- .pf-c-sidebar__panel.pf-m-width-75-on-md {
10221
- --pf-c-sidebar__panel--FlexBasis: 75%;
10152
+ }
10153
+ @media (min-width: 1200px) {
10154
+ .pf-c-jump-links.pf-m-expandable-on-xl {
10155
+ --pf-c-jump-links__list--Display: none;
10156
+ --pf-c-jump-links__list--Visibility: hidden;
10157
+ --pf-c-jump-links__toggle--Display: block;
10158
+ --pf-c-jump-links__toggle--Visibility: visible;
10159
+ --pf-c-jump-links__label--Display: none;
10160
+ --pf-c-jump-links__label--Visibility: hidden;
10222
10161
  }
10223
10162
 
10224
- .pf-c-sidebar__panel.pf-m-width-100-on-md {
10225
- --pf-c-sidebar__panel--FlexBasis: 100%;
10163
+ .pf-c-jump-links.pf-m-non-expandable-on-xl {
10164
+ --pf-c-jump-links__list--Display: flex;
10165
+ --pf-c-jump-links__list--Visibility: visible;
10166
+ --pf-c-jump-links__toggle--Display: none;
10167
+ --pf-c-jump-links__toggle--Visibility: hidden;
10168
+ --pf-c-jump-links__label--Display: block;
10169
+ --pf-c-jump-links__label--Visibility: visible;
10226
10170
  }
10227
10171
  }
10228
- @media (min-width: 992px) {
10229
- .pf-c-sidebar__panel.pf-m-width-default-on-lg {
10230
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10231
- }
10232
-
10233
- .pf-c-sidebar__panel.pf-m-width-25-on-lg {
10234
- --pf-c-sidebar__panel--FlexBasis: 25%;
10172
+ @media (min-width: 1450px) {
10173
+ .pf-c-jump-links.pf-m-expandable-on-2xl {
10174
+ --pf-c-jump-links__list--Display: none;
10175
+ --pf-c-jump-links__list--Visibility: hidden;
10176
+ --pf-c-jump-links__toggle--Display: block;
10177
+ --pf-c-jump-links__toggle--Visibility: visible;
10178
+ --pf-c-jump-links__label--Display: none;
10179
+ --pf-c-jump-links__label--Visibility: hidden;
10235
10180
  }
10236
10181
 
10237
- .pf-c-sidebar__panel.pf-m-width-33-on-lg {
10238
- --pf-c-sidebar__panel--FlexBasis: 33%;
10182
+ .pf-c-jump-links.pf-m-non-expandable-on-2xl {
10183
+ --pf-c-jump-links__list--Display: flex;
10184
+ --pf-c-jump-links__list--Visibility: visible;
10185
+ --pf-c-jump-links__toggle--Display: none;
10186
+ --pf-c-jump-links__toggle--Visibility: hidden;
10187
+ --pf-c-jump-links__label--Display: block;
10188
+ --pf-c-jump-links__label--Visibility: visible;
10239
10189
  }
10190
+ }
10191
+ .pf-c-jump-links.pf-m-expanded {
10192
+ --pf-c-jump-links__list--Display: flex;
10193
+ --pf-c-jump-links__list--Visibility: visible;
10194
+ --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links--m-expanded__toggle--MarginBottom);
10195
+ --pf-c-jump-links__toggle-icon--Rotate: var(--pf-c-jump-links--m-expanded__toggle-icon--Rotate);
10196
+ --pf-c-jump-links__toggle-icon--Color: var(--pf-c-jump-links--m-expanded__toggle-icon--Color);
10197
+ }
10240
10198
 
10241
- .pf-c-sidebar__panel.pf-m-width-50-on-lg {
10242
- --pf-c-sidebar__panel--FlexBasis: 50%;
10243
- }
10199
+ .pf-c-jump-links__list {
10200
+ position: relative;
10201
+ display: var(--pf-c-jump-links__list--Display);
10202
+ flex-direction: var(--pf-c-jump-links__list--FlexDirection);
10203
+ padding-top: var(--pf-c-jump-links__list--PaddingTop);
10204
+ padding-right: var(--pf-c-jump-links__list--PaddingRight);
10205
+ padding-bottom: var(--pf-c-jump-links__list--PaddingBottom);
10206
+ padding-left: var(--pf-c-jump-links__list--PaddingLeft);
10207
+ visibility: var(--pf-c-jump-links__list--Visibility);
10208
+ }
10244
10209
 
10245
- .pf-c-sidebar__panel.pf-m-width-66-on-lg {
10246
- --pf-c-sidebar__panel--FlexBasis: 66%;
10247
- }
10210
+ .pf-c-jump-links__list::before {
10211
+ position: absolute;
10212
+ top: 0;
10213
+ right: 0;
10214
+ bottom: 0;
10215
+ left: 0;
10216
+ pointer-events: none;
10217
+ content: "";
10218
+ border: solid var(--pf-c-jump-links__list--before--BorderColor);
10219
+ 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);
10220
+ }
10248
10221
 
10249
- .pf-c-sidebar__panel.pf-m-width-75-on-lg {
10250
- --pf-c-sidebar__panel--FlexBasis: 75%;
10251
- }
10222
+ .pf-c-jump-links__list .pf-c-jump-links__list {
10223
+ --pf-c-jump-links__list--PaddingTop: 0;
10224
+ --pf-c-jump-links__list--PaddingBottom: 0;
10225
+ --pf-c-jump-links__link--PaddingTop: var(--pf-c-jump-links__list__list__link--PaddingTop);
10226
+ --pf-c-jump-links__link--PaddingBottom: var(--pf-c-jump-links__list__list__link--PaddingBottom);
10227
+ --pf-c-jump-links__link--PaddingLeft: var(--pf-c-jump-links__list__list__link--PaddingLeft);
10228
+ margin-top: var(--pf-c-jump-links__list__list--MarginTop);
10229
+ }
10252
10230
 
10253
- .pf-c-sidebar__panel.pf-m-width-100-on-lg {
10254
- --pf-c-sidebar__panel--FlexBasis: 100%;
10255
- }
10231
+ .pf-c-jump-links__link {
10232
+ position: relative;
10233
+ display: flex;
10234
+ flex: 1;
10235
+ padding-top: var(--pf-c-jump-links__link--PaddingTop);
10236
+ padding-right: var(--pf-c-jump-links__link--PaddingRight);
10237
+ padding-bottom: var(--pf-c-jump-links__link--PaddingBottom);
10238
+ padding-left: var(--pf-c-jump-links__link--PaddingLeft);
10239
+ text-decoration: none;
10240
+ outline-offset: var(--pf-c-jump-links__link--OutlineOffset);
10256
10241
  }
10257
- @media (min-width: 1200px) {
10258
- .pf-c-sidebar__panel.pf-m-width-default-on-xl {
10259
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10260
- }
10261
10242
 
10262
- .pf-c-sidebar__panel.pf-m-width-25-on-xl {
10263
- --pf-c-sidebar__panel--FlexBasis: 25%;
10264
- }
10243
+ .pf-c-jump-links__link:hover {
10244
+ --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--hover__link-text--Color);
10245
+ }
10265
10246
 
10266
- .pf-c-sidebar__panel.pf-m-width-33-on-xl {
10267
- --pf-c-sidebar__panel--FlexBasis: 33%;
10268
- }
10247
+ .pf-c-jump-links__link:focus {
10248
+ --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--focus__link-text--Color);
10249
+ }
10269
10250
 
10270
- .pf-c-sidebar__panel.pf-m-width-50-on-xl {
10271
- --pf-c-sidebar__panel--FlexBasis: 50%;
10272
- }
10251
+ .pf-c-jump-links__link::before {
10252
+ position: absolute;
10253
+ top: 0;
10254
+ right: 0;
10255
+ bottom: 0;
10256
+ left: 0;
10257
+ pointer-events: none;
10258
+ content: "";
10259
+ border-color: var(--pf-c-jump-links__link--before--BorderColor);
10260
+ border-style: solid;
10261
+ 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);
10262
+ }
10273
10263
 
10274
- .pf-c-sidebar__panel.pf-m-width-66-on-xl {
10275
- --pf-c-sidebar__panel--FlexBasis: 66%;
10276
- }
10264
+ .pf-c-jump-links__item {
10265
+ --pf-c-jump-links__list--before--BorderColor: transparent;
10266
+ }
10277
10267
 
10278
- .pf-c-sidebar__panel.pf-m-width-75-on-xl {
10279
- --pf-c-sidebar__panel--FlexBasis: 75%;
10280
- }
10268
+ .pf-c-jump-links__item.pf-m-current > .pf-c-jump-links__link {
10269
+ --pf-c-jump-links__link--before--BorderTopWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderTopWidth);
10270
+ --pf-c-jump-links__link--before--BorderLeftWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderLeftWidth);
10271
+ --pf-c-jump-links__link--before--BorderColor: var(--pf-c-jump-links__item--m-current__link--before--BorderColor);
10272
+ --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__item--m-current__link-text--Color);
10273
+ }
10281
10274
 
10282
- .pf-c-sidebar__panel.pf-m-width-100-on-xl {
10283
- --pf-c-sidebar__panel--FlexBasis: 100%;
10284
- }
10275
+ .pf-c-jump-links__link-text {
10276
+ color: var(--pf-c-jump-links__link-text--Color);
10285
10277
  }
10286
- @media (min-width: 1450px) {
10287
- .pf-c-sidebar__panel.pf-m-width-default-on-2xl {
10288
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10289
- }
10290
10278
 
10291
- .pf-c-sidebar__panel.pf-m-width-25-on-2xl {
10292
- --pf-c-sidebar__panel--FlexBasis: 25%;
10293
- }
10279
+ .pf-c-jump-links__label {
10280
+ display: var(--pf-c-jump-links__label--Display);
10281
+ margin-bottom: var(--pf-c-jump-links__label--MarginBottom);
10282
+ visibility: var(--pf-c-jump-links__label--Visibility);
10283
+ }
10294
10284
 
10295
- .pf-c-sidebar__panel.pf-m-width-33-on-2xl {
10296
- --pf-c-sidebar__panel--FlexBasis: 33%;
10297
- }
10285
+ .pf-c-jump-links__main {
10286
+ display: flex;
10287
+ flex-direction: column;
10288
+ }
10298
10289
 
10299
- .pf-c-sidebar__panel.pf-m-width-50-on-2xl {
10300
- --pf-c-sidebar__panel--FlexBasis: 50%;
10301
- }
10290
+ .pf-c-jump-links__toggle {
10291
+ display: var(--pf-c-jump-links__toggle--Display);
10292
+ margin-top: var(--pf-c-jump-links__toggle--MarginTop);
10293
+ margin-bottom: var(--pf-c-jump-links__toggle--MarginBottom);
10294
+ margin-left: var(--pf-c-jump-links__toggle--MarginLeft);
10295
+ visibility: var(--pf-c-jump-links__toggle--Visibility);
10296
+ }
10302
10297
 
10303
- .pf-c-sidebar__panel.pf-m-width-66-on-2xl {
10304
- --pf-c-sidebar__panel--FlexBasis: 66%;
10305
- }
10298
+ .pf-c-jump-links__toggle .pf-c-button {
10299
+ display: flex;
10300
+ align-items: center;
10301
+ }
10306
10302
 
10307
- .pf-c-sidebar__panel.pf-m-width-75-on-2xl {
10308
- --pf-c-sidebar__panel--FlexBasis: 75%;
10309
- }
10303
+ .pf-c-jump-links__toggle-icon {
10304
+ display: inline-block;
10305
+ color: var(--pf-c-jump-links__toggle-icon--Color);
10306
+ transition: var(--pf-c-jump-links__toggle-icon--Transition);
10307
+ transform: rotate(var(--pf-c-jump-links__toggle-icon--Rotate));
10308
+ }
10310
10309
 
10311
- .pf-c-sidebar__panel.pf-m-width-100-on-2xl {
10312
- --pf-c-sidebar__panel--FlexBasis: 100%;
10313
- }
10310
+ .pf-c-jump-links__toggle-text {
10311
+ margin-left: var(--pf-c-jump-links__toggle-text--MarginLeft);
10312
+ color: var(--pf-c-jump-links__toggle-text--Color);
10314
10313
  }
10314
+
10315
10315
  .pf-c-label {
10316
10316
  --pf-c-label--PaddingTop: var(--pf-global--spacer--xs);
10317
10317
  --pf-c-label--PaddingRight: var(--pf-global--spacer--sm);