@patternfly/react-core 4.254.1 → 4.255.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 (30) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/esm/components/Alert/AlertIcon.js +1 -1
  3. package/dist/esm/components/Alert/AlertIcon.js.map +1 -1
  4. package/dist/esm/next/components/Dropdown/Dropdown.d.ts +6 -1
  5. package/dist/esm/next/components/Dropdown/Dropdown.d.ts.map +1 -1
  6. package/dist/esm/next/components/Dropdown/Dropdown.js +4 -2
  7. package/dist/esm/next/components/Dropdown/Dropdown.js.map +1 -1
  8. package/dist/esm/next/components/Dropdown/DropdownItem.d.ts +6 -1
  9. package/dist/esm/next/components/Dropdown/DropdownItem.d.ts.map +1 -1
  10. package/dist/esm/next/components/Dropdown/DropdownItem.js +4 -2
  11. package/dist/esm/next/components/Dropdown/DropdownItem.js.map +1 -1
  12. package/dist/js/components/Alert/AlertIcon.js +1 -1
  13. package/dist/js/components/Alert/AlertIcon.js.map +1 -1
  14. package/dist/js/next/components/Dropdown/Dropdown.d.ts +6 -1
  15. package/dist/js/next/components/Dropdown/Dropdown.d.ts.map +1 -1
  16. package/dist/js/next/components/Dropdown/Dropdown.js +4 -2
  17. package/dist/js/next/components/Dropdown/Dropdown.js.map +1 -1
  18. package/dist/js/next/components/Dropdown/DropdownItem.d.ts +6 -1
  19. package/dist/js/next/components/Dropdown/DropdownItem.d.ts.map +1 -1
  20. package/dist/js/next/components/Dropdown/DropdownItem.js +4 -2
  21. package/dist/js/next/components/Dropdown/DropdownItem.js.map +1 -1
  22. package/dist/umd/react-core.min.css +410 -410
  23. package/dist/umd/react-core.min.js +1 -1
  24. package/package.json +2 -2
  25. package/src/components/Alert/AlertIcon.tsx +2 -2
  26. package/src/components/Button/__tests__/Button.test.tsx +16 -7
  27. package/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap +36 -0
  28. package/src/components/Button/examples/ButtonProgress.tsx +15 -2
  29. package/src/next/components/Dropdown/Dropdown.tsx +10 -2
  30. package/src/next/components/Dropdown/DropdownItem.tsx +16 -6
@@ -9668,6 +9668,327 @@ 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
+
9671
9992
  .pf-c-sidebar {
9672
9993
  --pf-c-sidebar--BackgroundColor: var(--pf-global--BackgroundColor--100);
9673
9994
  --pf-c-sidebar__main--FlexDirection: column;
@@ -9867,451 +10188,130 @@ label.pf-c-input-group__text {
9867
10188
  --pf-c-sidebar__panel--FlexBasis: 66%;
9868
10189
  }
9869
10190
 
9870
- .pf-c-sidebar__panel.pf-m-width-75-on-sm {
9871
- --pf-c-sidebar__panel--FlexBasis: 75%;
9872
- }
9873
-
9874
- .pf-c-sidebar__panel.pf-m-width-100-on-sm {
9875
- --pf-c-sidebar__panel--FlexBasis: 100%;
9876
- }
9877
- }
9878
- @media (min-width: 768px) {
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;
10191
+ .pf-c-sidebar__panel.pf-m-width-75-on-sm {
10192
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10193
+ }
10194
+
10195
+ .pf-c-sidebar__panel.pf-m-width-100-on-sm {
10196
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10113
10197
  }
10114
10198
  }
10115
10199
  @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;
10200
+ .pf-c-sidebar__panel.pf-m-width-default-on-md {
10201
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10123
10202
  }
10124
10203
 
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;
10204
+ .pf-c-sidebar__panel.pf-m-width-25-on-md {
10205
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10132
10206
  }
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;
10207
+
10208
+ .pf-c-sidebar__panel.pf-m-width-33-on-md {
10209
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10142
10210
  }
10143
10211
 
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;
10212
+ .pf-c-sidebar__panel.pf-m-width-50-on-md {
10213
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10151
10214
  }
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;
10215
+
10216
+ .pf-c-sidebar__panel.pf-m-width-66-on-md {
10217
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10161
10218
  }
10162
10219
 
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;
10220
+ .pf-c-sidebar__panel.pf-m-width-75-on-md {
10221
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10222
+ }
10223
+
10224
+ .pf-c-sidebar__panel.pf-m-width-100-on-md {
10225
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10170
10226
  }
10171
10227
  }
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;
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);
10180
10231
  }
10181
10232
 
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;
10233
+ .pf-c-sidebar__panel.pf-m-width-25-on-lg {
10234
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10189
10235
  }
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
- }
10198
10236
 
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
- }
10237
+ .pf-c-sidebar__panel.pf-m-width-33-on-lg {
10238
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10239
+ }
10209
10240
 
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
- }
10241
+ .pf-c-sidebar__panel.pf-m-width-50-on-lg {
10242
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10243
+ }
10221
10244
 
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
- }
10245
+ .pf-c-sidebar__panel.pf-m-width-66-on-lg {
10246
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10247
+ }
10230
10248
 
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);
10241
- }
10249
+ .pf-c-sidebar__panel.pf-m-width-75-on-lg {
10250
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10251
+ }
10242
10252
 
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);
10253
+ .pf-c-sidebar__panel.pf-m-width-100-on-lg {
10254
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10255
+ }
10245
10256
  }
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
+ }
10246
10261
 
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
- }
10262
+ .pf-c-sidebar__panel.pf-m-width-25-on-xl {
10263
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10264
+ }
10250
10265
 
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
- }
10266
+ .pf-c-sidebar__panel.pf-m-width-33-on-xl {
10267
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10268
+ }
10263
10269
 
10264
- .pf-c-jump-links__item {
10265
- --pf-c-jump-links__list--before--BorderColor: transparent;
10266
- }
10270
+ .pf-c-sidebar__panel.pf-m-width-50-on-xl {
10271
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10272
+ }
10267
10273
 
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
- }
10274
+ .pf-c-sidebar__panel.pf-m-width-66-on-xl {
10275
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10276
+ }
10274
10277
 
10275
- .pf-c-jump-links__link-text {
10276
- color: var(--pf-c-jump-links__link-text--Color);
10277
- }
10278
+ .pf-c-sidebar__panel.pf-m-width-75-on-xl {
10279
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10280
+ }
10278
10281
 
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);
10282
+ .pf-c-sidebar__panel.pf-m-width-100-on-xl {
10283
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10284
+ }
10283
10285
  }
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
+ }
10284
10290
 
10285
- .pf-c-jump-links__main {
10286
- display: flex;
10287
- flex-direction: column;
10288
- }
10291
+ .pf-c-sidebar__panel.pf-m-width-25-on-2xl {
10292
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10293
+ }
10289
10294
 
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
- }
10295
+ .pf-c-sidebar__panel.pf-m-width-33-on-2xl {
10296
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10297
+ }
10297
10298
 
10298
- .pf-c-jump-links__toggle .pf-c-button {
10299
- display: flex;
10300
- align-items: center;
10301
- }
10299
+ .pf-c-sidebar__panel.pf-m-width-50-on-2xl {
10300
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10301
+ }
10302
10302
 
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
- }
10303
+ .pf-c-sidebar__panel.pf-m-width-66-on-2xl {
10304
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10305
+ }
10309
10306
 
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);
10313
- }
10307
+ .pf-c-sidebar__panel.pf-m-width-75-on-2xl {
10308
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10309
+ }
10314
10310
 
10311
+ .pf-c-sidebar__panel.pf-m-width-100-on-2xl {
10312
+ --pf-c-sidebar__panel--FlexBasis: 100%;
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);