@patternfly/react-core 4.262.0 → 4.264.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 (102) hide show
  1. package/CHANGELOG.md +28 -0
  2. package/dist/esm/components/Button/Button.d.ts.map +1 -1
  3. package/dist/esm/components/Button/Button.js +1 -1
  4. package/dist/esm/components/Button/Button.js.map +1 -1
  5. package/dist/esm/components/NumberInput/NumberInput.d.ts +1 -1
  6. package/dist/esm/components/NumberInput/NumberInput.d.ts.map +1 -1
  7. package/dist/esm/components/NumberInput/NumberInput.js +0 -1
  8. package/dist/esm/components/NumberInput/NumberInput.js.map +1 -1
  9. package/dist/esm/components/Spinner/Spinner.d.ts +2 -0
  10. package/dist/esm/components/Spinner/Spinner.d.ts.map +1 -1
  11. package/dist/esm/components/Spinner/Spinner.js +2 -2
  12. package/dist/esm/components/Spinner/Spinner.js.map +1 -1
  13. package/dist/esm/components/Tabs/Tab.d.ts +4 -2
  14. package/dist/esm/components/Tabs/Tab.d.ts.map +1 -1
  15. package/dist/esm/components/Tabs/Tab.js +6 -7
  16. package/dist/esm/components/Tabs/Tab.js.map +1 -1
  17. package/dist/esm/components/Tabs/TabAction.d.ts +20 -0
  18. package/dist/esm/components/Tabs/TabAction.d.ts.map +1 -0
  19. package/dist/esm/components/Tabs/TabAction.js +17 -0
  20. package/dist/esm/components/Tabs/TabAction.js.map +1 -0
  21. package/dist/esm/components/Tabs/Tabs.d.ts +1 -1
  22. package/dist/esm/components/Tabs/Tabs.d.ts.map +1 -1
  23. package/dist/esm/components/Tabs/index.d.ts +1 -0
  24. package/dist/esm/components/Tabs/index.d.ts.map +1 -1
  25. package/dist/esm/components/Tabs/index.js +1 -0
  26. package/dist/esm/components/Tabs/index.js.map +1 -1
  27. package/dist/esm/helpers/Popper/Popper.d.ts.map +1 -1
  28. package/dist/esm/helpers/Popper/Popper.js +6 -3
  29. package/dist/esm/helpers/Popper/Popper.js.map +1 -1
  30. package/dist/js/components/Button/Button.d.ts.map +1 -1
  31. package/dist/js/components/Button/Button.js +1 -1
  32. package/dist/js/components/Button/Button.js.map +1 -1
  33. package/dist/js/components/NumberInput/NumberInput.d.ts +1 -1
  34. package/dist/js/components/NumberInput/NumberInput.d.ts.map +1 -1
  35. package/dist/js/components/NumberInput/NumberInput.js +0 -1
  36. package/dist/js/components/NumberInput/NumberInput.js.map +1 -1
  37. package/dist/js/components/Spinner/Spinner.d.ts +2 -0
  38. package/dist/js/components/Spinner/Spinner.d.ts.map +1 -1
  39. package/dist/js/components/Spinner/Spinner.js +2 -2
  40. package/dist/js/components/Spinner/Spinner.js.map +1 -1
  41. package/dist/js/components/Tabs/Tab.d.ts +4 -2
  42. package/dist/js/components/Tabs/Tab.d.ts.map +1 -1
  43. package/dist/js/components/Tabs/Tab.js +6 -7
  44. package/dist/js/components/Tabs/Tab.js.map +1 -1
  45. package/dist/js/components/Tabs/TabAction.d.ts +20 -0
  46. package/dist/js/components/Tabs/TabAction.d.ts.map +1 -0
  47. package/dist/js/components/Tabs/TabAction.js +20 -0
  48. package/dist/js/components/Tabs/TabAction.js.map +1 -0
  49. package/dist/js/components/Tabs/Tabs.d.ts +1 -1
  50. package/dist/js/components/Tabs/Tabs.d.ts.map +1 -1
  51. package/dist/js/components/Tabs/index.d.ts +1 -0
  52. package/dist/js/components/Tabs/index.d.ts.map +1 -1
  53. package/dist/js/components/Tabs/index.js +1 -0
  54. package/dist/js/components/Tabs/index.js.map +1 -1
  55. package/dist/js/helpers/Popper/Popper.d.ts.map +1 -1
  56. package/dist/js/helpers/Popper/Popper.js +6 -3
  57. package/dist/js/helpers/Popper/Popper.js.map +1 -1
  58. package/dist/styles/assets/pficon/pficon.scss +12 -0
  59. package/dist/styles/assets/pficon/pficon.woff +0 -0
  60. package/dist/styles/assets/pficon/pficon.woff2 +0 -0
  61. package/dist/styles/base-no-reset.css +10 -0
  62. package/dist/styles/base.css +10 -0
  63. package/dist/umd/react-core.min.css +1331 -1162
  64. package/dist/umd/react-core.min.js +2 -2
  65. package/package.json +6 -6
  66. package/src/components/Button/Button.tsx +1 -0
  67. package/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap +1 -1
  68. package/src/components/NumberInput/NumberInput.tsx +1 -2
  69. package/src/components/NumberInput/__tests__/NumberInput.test.tsx +4 -4
  70. package/src/components/NumberInput/examples/NumberInput.md +2 -0
  71. package/src/components/NumberInput/examples/NumberInputCustomStep.tsx +4 -4
  72. package/src/components/NumberInput/examples/NumberInputCustomStepAndThreshold.tsx +4 -5
  73. package/src/components/NumberInput/examples/NumberInputDefault.tsx +5 -5
  74. package/src/components/NumberInput/examples/NumberInputDisabled.tsx +5 -5
  75. package/src/components/NumberInput/examples/NumberInputUnit.tsx +10 -10
  76. package/src/components/NumberInput/examples/NumberInputUnitThreshold.tsx +16 -6
  77. package/src/components/NumberInput/examples/NumberInputVaryingSizes.tsx +11 -11
  78. package/src/components/NumberInput/examples/NumberInputWithStatus.tsx +5 -6
  79. package/src/components/Popover/__tests__/__snapshots__/Popover.test.tsx.snap +3 -1
  80. package/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap +3 -1
  81. package/src/components/Spinner/Spinner.tsx +4 -1
  82. package/src/components/Spinner/examples/Spinner.md +4 -0
  83. package/src/components/Spinner/examples/SpinnerInline.tsx +29 -0
  84. package/src/components/Tabs/Tab.tsx +17 -16
  85. package/src/components/Tabs/TabAction.tsx +57 -0
  86. package/src/components/Tabs/Tabs.tsx +1 -1
  87. package/src/components/Tabs/__tests__/Tab.test.tsx +10 -0
  88. package/src/components/Tabs/__tests__/__snapshots__/Tab.test.tsx.snap +45 -0
  89. package/src/components/Tabs/examples/Tabs.md +64 -20
  90. package/src/components/Tabs/examples/TabsHelp.tsx +61 -0
  91. package/src/components/Tabs/examples/TabsHelpAndClose.tsx +84 -0
  92. package/src/components/Tabs/index.ts +1 -0
  93. package/src/components/Tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap +3 -1
  94. package/src/demos/Tabs.md +0 -10
  95. package/src/demos/examples/DashboardWrapper.js +1 -0
  96. package/src/demos/examples/Tabs/ModalTabs.tsx +3 -3
  97. package/src/demos/examples/Tabs/NestedTabs.tsx +11 -3
  98. package/src/demos/examples/Tabs/NestedUnindentedTabs.tsx +25 -40
  99. package/src/demos/examples/Tabs/TabsAndTable.tsx +9 -52
  100. package/src/helpers/Popper/Popper.tsx +13 -3
  101. package/src/demos/examples/Tabs/GrayTabs.tsx +0 -152
  102. package/src/demos/examples/Tabs/TabsAndTablesAutoWidthTabs.tsx +0 -442
@@ -9697,6 +9697,327 @@ label.pf-c-input-group__text {
9697
9697
  --pf-c-input-group__text--BackgroundColor: transparent;
9698
9698
  }
9699
9699
 
9700
+ .pf-c-jump-links {
9701
+ --pf-c-jump-links__list--Display: flex;
9702
+ --pf-c-jump-links__list--Visibility: visible;
9703
+ --pf-c-jump-links__list--PaddingTop: 0;
9704
+ --pf-c-jump-links__list--PaddingRight: var(--pf-global--spacer--md);
9705
+ --pf-c-jump-links__list--PaddingBottom: 0;
9706
+ --pf-c-jump-links__list--PaddingLeft: var(--pf-global--spacer--md);
9707
+ --pf-c-jump-links--m-vertical__list--PaddingTop: var(--pf-global--spacer--md);
9708
+ --pf-c-jump-links--m-vertical__list--PaddingRight: 0;
9709
+ --pf-c-jump-links--m-vertical__list--PaddingBottom: var(--pf-global--spacer--md);
9710
+ --pf-c-jump-links--m-vertical__list--PaddingLeft: 0;
9711
+ --pf-c-jump-links__list--FlexDirection: row;
9712
+ --pf-c-jump-links--m-vertical__list--FlexDirection: column;
9713
+ --pf-c-jump-links__list--before--BorderColor: var(--pf-global--BorderColor--100);
9714
+ --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-global--BorderWidth--sm);
9715
+ --pf-c-jump-links__list--before--BorderRightWidth: 0;
9716
+ --pf-c-jump-links__list--before--BorderBottomWidth: 0;
9717
+ --pf-c-jump-links__list--before--BorderLeftWidth: 0;
9718
+ --pf-c-jump-links--m-vertical__list--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
9719
+ --pf-c-jump-links--m-vertical__list--before--BorderTopWidth: 0;
9720
+ --pf-c-jump-links__list__list--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
9721
+ --pf-c-jump-links__link--PaddingTop: var(--pf-global--spacer--md);
9722
+ --pf-c-jump-links__link--PaddingRight: var(--pf-global--spacer--md);
9723
+ --pf-c-jump-links__link--PaddingBottom: var(--pf-global--spacer--md);
9724
+ --pf-c-jump-links__link--PaddingLeft: var(--pf-global--spacer--md);
9725
+ --pf-c-jump-links__list__list__link--PaddingTop: var(--pf-global--spacer--sm);
9726
+ --pf-c-jump-links__list__list__link--PaddingLeft: var(--pf-global--spacer--lg);
9727
+ --pf-c-jump-links__list__list__link--PaddingBottom: var(--pf-global--spacer--sm);
9728
+ --pf-c-jump-links__link--OutlineOffset: calc(-1 * var(--pf-global--spacer--sm));
9729
+ --pf-c-jump-links__link--before--BorderTopWidth: 0;
9730
+ --pf-c-jump-links__link--before--BorderRightWidth: 0;
9731
+ --pf-c-jump-links__link--before--BorderBottomWidth: 0;
9732
+ --pf-c-jump-links__link--before--BorderLeftWidth: 0;
9733
+ --pf-c-jump-links__link--before--BorderColor: transparent;
9734
+ --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-global--BorderWidth--lg);
9735
+ --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: 0;
9736
+ --pf-c-jump-links__item--m-current__link--before--BorderColor: var(--pf-global--primary-color--100);
9737
+ --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth: 0;
9738
+ --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth: var(--pf-global--BorderWidth--lg);
9739
+ --pf-c-jump-links__link-text--Color: var(--pf-global--Color--200);
9740
+ --pf-c-jump-links__link--hover__link-text--Color: var(--pf-global--Color--100);
9741
+ --pf-c-jump-links__link--focus__link-text--Color: var(--pf-global--Color--100);
9742
+ --pf-c-jump-links__item--m-current__link-text--Color: var(--pf-global--Color--100);
9743
+ --pf-c-jump-links__label--MarginBottom: var(--pf-global--spacer--md);
9744
+ --pf-c-jump-links__label--Display: block;
9745
+ --pf-c-jump-links__label--Visibility: visible;
9746
+ --pf-c-jump-links__toggle--MarginTop: calc(-1 * var(--pf-global--spacer--form-element));
9747
+ --pf-c-jump-links__toggle--MarginBottom--base: calc(-1 * var(--pf-global--spacer--form-element));
9748
+ --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links__toggle--MarginBottom--base);
9749
+ --pf-c-jump-links--m-expanded__toggle--MarginBottom: calc(var(--pf-c-jump-links__toggle--MarginBottom--base) + var(--pf-global--spacer--md));
9750
+ --pf-c-jump-links__toggle--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
9751
+ --pf-c-jump-links__toggle--Display: none;
9752
+ --pf-c-jump-links__toggle--Visibility: hidden;
9753
+ --pf-c-jump-links__toggle-icon--Color: currentcolor;
9754
+ --pf-c-jump-links__toggle-icon--Transition: var(--pf-global--Transition);
9755
+ --pf-c-jump-links__toggle-icon--Rotate: 0;
9756
+ --pf-c-jump-links--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
9757
+ --pf-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
9758
+ --pf-c-jump-links__toggle-text--MarginLeft: var(--pf-global--spacer--md);
9759
+ --pf-c-jump-links__toggle-text--Color: var(--pf-global--Color--100);
9760
+ display: flex;
9761
+ }
9762
+
9763
+ .pf-c-jump-links.pf-m-center {
9764
+ justify-content: center;
9765
+ }
9766
+
9767
+ .pf-c-jump-links.pf-m-center .pf-c-jump-links__main {
9768
+ align-items: center;
9769
+ }
9770
+
9771
+ .pf-c-jump-links.pf-m-vertical, .pf-c-jump-links.pf-m-expandable {
9772
+ --pf-c-jump-links__list--PaddingTop: var(--pf-c-jump-links--m-vertical__list--PaddingTop);
9773
+ --pf-c-jump-links__list--PaddingRight: var(--pf-c-jump-links--m-vertical__list--PaddingRight);
9774
+ --pf-c-jump-links__list--PaddingBottom: var(--pf-c-jump-links--m-vertical__list--PaddingBottom);
9775
+ --pf-c-jump-links__list--PaddingLeft: var(--pf-c-jump-links--m-vertical__list--PaddingLeft);
9776
+ --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderTopWidth);
9777
+ --pf-c-jump-links__list--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderLeftWidth);
9778
+ --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth);
9779
+ --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth);
9780
+ --pf-c-jump-links__list--FlexDirection: var(--pf-c-jump-links--m-vertical__list--FlexDirection);
9781
+ flex-direction: column;
9782
+ }
9783
+
9784
+ .pf-c-jump-links.pf-m-expandable {
9785
+ --pf-c-jump-links__list--Display: none;
9786
+ --pf-c-jump-links__list--Visibility: hidden;
9787
+ --pf-c-jump-links__toggle--Display: block;
9788
+ --pf-c-jump-links__toggle--Visibility: visible;
9789
+ --pf-c-jump-links__label--Display: none;
9790
+ --pf-c-jump-links__label--Visibility: hidden;
9791
+ }
9792
+
9793
+ .pf-c-jump-links.pf-m-non-expandable {
9794
+ --pf-c-jump-links__list--Display: flex;
9795
+ --pf-c-jump-links__list--Visibility: visible;
9796
+ --pf-c-jump-links__toggle--Display: none;
9797
+ --pf-c-jump-links__toggle--Visibility: hidden;
9798
+ --pf-c-jump-links__label--Display: block;
9799
+ --pf-c-jump-links__label--Visibility: visible;
9800
+ }
9801
+
9802
+ @media (min-width: 576px) {
9803
+ .pf-c-jump-links.pf-m-expandable-on-sm {
9804
+ --pf-c-jump-links__list--Display: none;
9805
+ --pf-c-jump-links__list--Visibility: hidden;
9806
+ --pf-c-jump-links__toggle--Display: block;
9807
+ --pf-c-jump-links__toggle--Visibility: visible;
9808
+ --pf-c-jump-links__label--Display: none;
9809
+ --pf-c-jump-links__label--Visibility: hidden;
9810
+ }
9811
+
9812
+ .pf-c-jump-links.pf-m-non-expandable-on-sm {
9813
+ --pf-c-jump-links__list--Display: flex;
9814
+ --pf-c-jump-links__list--Visibility: visible;
9815
+ --pf-c-jump-links__toggle--Display: none;
9816
+ --pf-c-jump-links__toggle--Visibility: hidden;
9817
+ --pf-c-jump-links__label--Display: block;
9818
+ --pf-c-jump-links__label--Visibility: visible;
9819
+ }
9820
+ }
9821
+ @media (min-width: 768px) {
9822
+ .pf-c-jump-links.pf-m-expandable-on-md {
9823
+ --pf-c-jump-links__list--Display: none;
9824
+ --pf-c-jump-links__list--Visibility: hidden;
9825
+ --pf-c-jump-links__toggle--Display: block;
9826
+ --pf-c-jump-links__toggle--Visibility: visible;
9827
+ --pf-c-jump-links__label--Display: none;
9828
+ --pf-c-jump-links__label--Visibility: hidden;
9829
+ }
9830
+
9831
+ .pf-c-jump-links.pf-m-non-expandable-on-md {
9832
+ --pf-c-jump-links__list--Display: flex;
9833
+ --pf-c-jump-links__list--Visibility: visible;
9834
+ --pf-c-jump-links__toggle--Display: none;
9835
+ --pf-c-jump-links__toggle--Visibility: hidden;
9836
+ --pf-c-jump-links__label--Display: block;
9837
+ --pf-c-jump-links__label--Visibility: visible;
9838
+ }
9839
+ }
9840
+ @media (min-width: 992px) {
9841
+ .pf-c-jump-links.pf-m-expandable-on-lg {
9842
+ --pf-c-jump-links__list--Display: none;
9843
+ --pf-c-jump-links__list--Visibility: hidden;
9844
+ --pf-c-jump-links__toggle--Display: block;
9845
+ --pf-c-jump-links__toggle--Visibility: visible;
9846
+ --pf-c-jump-links__label--Display: none;
9847
+ --pf-c-jump-links__label--Visibility: hidden;
9848
+ }
9849
+
9850
+ .pf-c-jump-links.pf-m-non-expandable-on-lg {
9851
+ --pf-c-jump-links__list--Display: flex;
9852
+ --pf-c-jump-links__list--Visibility: visible;
9853
+ --pf-c-jump-links__toggle--Display: none;
9854
+ --pf-c-jump-links__toggle--Visibility: hidden;
9855
+ --pf-c-jump-links__label--Display: block;
9856
+ --pf-c-jump-links__label--Visibility: visible;
9857
+ }
9858
+ }
9859
+ @media (min-width: 1200px) {
9860
+ .pf-c-jump-links.pf-m-expandable-on-xl {
9861
+ --pf-c-jump-links__list--Display: none;
9862
+ --pf-c-jump-links__list--Visibility: hidden;
9863
+ --pf-c-jump-links__toggle--Display: block;
9864
+ --pf-c-jump-links__toggle--Visibility: visible;
9865
+ --pf-c-jump-links__label--Display: none;
9866
+ --pf-c-jump-links__label--Visibility: hidden;
9867
+ }
9868
+
9869
+ .pf-c-jump-links.pf-m-non-expandable-on-xl {
9870
+ --pf-c-jump-links__list--Display: flex;
9871
+ --pf-c-jump-links__list--Visibility: visible;
9872
+ --pf-c-jump-links__toggle--Display: none;
9873
+ --pf-c-jump-links__toggle--Visibility: hidden;
9874
+ --pf-c-jump-links__label--Display: block;
9875
+ --pf-c-jump-links__label--Visibility: visible;
9876
+ }
9877
+ }
9878
+ @media (min-width: 1450px) {
9879
+ .pf-c-jump-links.pf-m-expandable-on-2xl {
9880
+ --pf-c-jump-links__list--Display: none;
9881
+ --pf-c-jump-links__list--Visibility: hidden;
9882
+ --pf-c-jump-links__toggle--Display: block;
9883
+ --pf-c-jump-links__toggle--Visibility: visible;
9884
+ --pf-c-jump-links__label--Display: none;
9885
+ --pf-c-jump-links__label--Visibility: hidden;
9886
+ }
9887
+
9888
+ .pf-c-jump-links.pf-m-non-expandable-on-2xl {
9889
+ --pf-c-jump-links__list--Display: flex;
9890
+ --pf-c-jump-links__list--Visibility: visible;
9891
+ --pf-c-jump-links__toggle--Display: none;
9892
+ --pf-c-jump-links__toggle--Visibility: hidden;
9893
+ --pf-c-jump-links__label--Display: block;
9894
+ --pf-c-jump-links__label--Visibility: visible;
9895
+ }
9896
+ }
9897
+ .pf-c-jump-links.pf-m-expanded {
9898
+ --pf-c-jump-links__list--Display: flex;
9899
+ --pf-c-jump-links__list--Visibility: visible;
9900
+ --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links--m-expanded__toggle--MarginBottom);
9901
+ --pf-c-jump-links__toggle-icon--Rotate: var(--pf-c-jump-links--m-expanded__toggle-icon--Rotate);
9902
+ --pf-c-jump-links__toggle-icon--Color: var(--pf-c-jump-links--m-expanded__toggle-icon--Color);
9903
+ }
9904
+
9905
+ .pf-c-jump-links__list {
9906
+ position: relative;
9907
+ display: var(--pf-c-jump-links__list--Display);
9908
+ flex-direction: var(--pf-c-jump-links__list--FlexDirection);
9909
+ padding-top: var(--pf-c-jump-links__list--PaddingTop);
9910
+ padding-right: var(--pf-c-jump-links__list--PaddingRight);
9911
+ padding-bottom: var(--pf-c-jump-links__list--PaddingBottom);
9912
+ padding-left: var(--pf-c-jump-links__list--PaddingLeft);
9913
+ visibility: var(--pf-c-jump-links__list--Visibility);
9914
+ }
9915
+
9916
+ .pf-c-jump-links__list::before {
9917
+ position: absolute;
9918
+ top: 0;
9919
+ right: 0;
9920
+ bottom: 0;
9921
+ left: 0;
9922
+ pointer-events: none;
9923
+ content: "";
9924
+ border: solid var(--pf-c-jump-links__list--before--BorderColor);
9925
+ 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);
9926
+ }
9927
+
9928
+ .pf-c-jump-links__list .pf-c-jump-links__list {
9929
+ --pf-c-jump-links__list--PaddingTop: 0;
9930
+ --pf-c-jump-links__list--PaddingBottom: 0;
9931
+ --pf-c-jump-links__link--PaddingTop: var(--pf-c-jump-links__list__list__link--PaddingTop);
9932
+ --pf-c-jump-links__link--PaddingBottom: var(--pf-c-jump-links__list__list__link--PaddingBottom);
9933
+ --pf-c-jump-links__link--PaddingLeft: var(--pf-c-jump-links__list__list__link--PaddingLeft);
9934
+ margin-top: var(--pf-c-jump-links__list__list--MarginTop);
9935
+ }
9936
+
9937
+ .pf-c-jump-links__link {
9938
+ position: relative;
9939
+ display: flex;
9940
+ flex: 1;
9941
+ padding-top: var(--pf-c-jump-links__link--PaddingTop);
9942
+ padding-right: var(--pf-c-jump-links__link--PaddingRight);
9943
+ padding-bottom: var(--pf-c-jump-links__link--PaddingBottom);
9944
+ padding-left: var(--pf-c-jump-links__link--PaddingLeft);
9945
+ text-decoration: none;
9946
+ outline-offset: var(--pf-c-jump-links__link--OutlineOffset);
9947
+ }
9948
+
9949
+ .pf-c-jump-links__link:hover {
9950
+ --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--hover__link-text--Color);
9951
+ }
9952
+
9953
+ .pf-c-jump-links__link:focus {
9954
+ --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--focus__link-text--Color);
9955
+ }
9956
+
9957
+ .pf-c-jump-links__link::before {
9958
+ position: absolute;
9959
+ top: 0;
9960
+ right: 0;
9961
+ bottom: 0;
9962
+ left: 0;
9963
+ pointer-events: none;
9964
+ content: "";
9965
+ border-color: var(--pf-c-jump-links__link--before--BorderColor);
9966
+ border-style: solid;
9967
+ 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);
9968
+ }
9969
+
9970
+ .pf-c-jump-links__item {
9971
+ --pf-c-jump-links__list--before--BorderColor: transparent;
9972
+ }
9973
+
9974
+ .pf-c-jump-links__item.pf-m-current > .pf-c-jump-links__link {
9975
+ --pf-c-jump-links__link--before--BorderTopWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderTopWidth);
9976
+ --pf-c-jump-links__link--before--BorderLeftWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderLeftWidth);
9977
+ --pf-c-jump-links__link--before--BorderColor: var(--pf-c-jump-links__item--m-current__link--before--BorderColor);
9978
+ --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__item--m-current__link-text--Color);
9979
+ }
9980
+
9981
+ .pf-c-jump-links__link-text {
9982
+ color: var(--pf-c-jump-links__link-text--Color);
9983
+ }
9984
+
9985
+ .pf-c-jump-links__label {
9986
+ display: var(--pf-c-jump-links__label--Display);
9987
+ margin-bottom: var(--pf-c-jump-links__label--MarginBottom);
9988
+ visibility: var(--pf-c-jump-links__label--Visibility);
9989
+ }
9990
+
9991
+ .pf-c-jump-links__main {
9992
+ display: flex;
9993
+ flex-direction: column;
9994
+ }
9995
+
9996
+ .pf-c-jump-links__toggle {
9997
+ display: var(--pf-c-jump-links__toggle--Display);
9998
+ margin-top: var(--pf-c-jump-links__toggle--MarginTop);
9999
+ margin-bottom: var(--pf-c-jump-links__toggle--MarginBottom);
10000
+ margin-left: var(--pf-c-jump-links__toggle--MarginLeft);
10001
+ visibility: var(--pf-c-jump-links__toggle--Visibility);
10002
+ }
10003
+
10004
+ .pf-c-jump-links__toggle .pf-c-button {
10005
+ display: flex;
10006
+ align-items: center;
10007
+ }
10008
+
10009
+ .pf-c-jump-links__toggle-icon {
10010
+ display: inline-block;
10011
+ color: var(--pf-c-jump-links__toggle-icon--Color);
10012
+ transition: var(--pf-c-jump-links__toggle-icon--Transition);
10013
+ transform: rotate(var(--pf-c-jump-links__toggle-icon--Rotate));
10014
+ }
10015
+
10016
+ .pf-c-jump-links__toggle-text {
10017
+ margin-left: var(--pf-c-jump-links__toggle-text--MarginLeft);
10018
+ color: var(--pf-c-jump-links__toggle-text--Color);
10019
+ }
10020
+
9700
10021
  .pf-c-sidebar {
9701
10022
  --pf-c-sidebar--BackgroundColor: var(--pf-global--BackgroundColor--100);
9702
10023
  --pf-c-sidebar__main--FlexDirection: column;
@@ -9834,513 +10155,192 @@ label.pf-c-input-group__text {
9834
10155
 
9835
10156
  .pf-c-sidebar__content {
9836
10157
  flex-grow: 1;
9837
- background-color: var(--pf-c-sidebar__content--BackgroundColor);
9838
- }
9839
-
9840
- .pf-c-sidebar__content.pf-m-no-background {
9841
- --pf-c-sidebar__content--BackgroundColor: transparent;
9842
- }
9843
-
9844
- .pf-c-sidebar.pf-m-no-background,
9845
- .pf-c-sidebar__panel.pf-m-no-background,
9846
- .pf-c-sidebar__content.pf-m-no-background {
9847
- background-color: transparent;
9848
- }
9849
-
9850
- .pf-c-sidebar__panel.pf-m-width-default {
9851
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9852
- }
9853
-
9854
- .pf-c-sidebar__panel.pf-m-width-25 {
9855
- --pf-c-sidebar__panel--FlexBasis: 25%;
9856
- }
9857
-
9858
- .pf-c-sidebar__panel.pf-m-width-33 {
9859
- --pf-c-sidebar__panel--FlexBasis: 33%;
9860
- }
9861
-
9862
- .pf-c-sidebar__panel.pf-m-width-50 {
9863
- --pf-c-sidebar__panel--FlexBasis: 50%;
9864
- }
9865
-
9866
- .pf-c-sidebar__panel.pf-m-width-66 {
9867
- --pf-c-sidebar__panel--FlexBasis: 66%;
9868
- }
9869
-
9870
- .pf-c-sidebar__panel.pf-m-width-75 {
9871
- --pf-c-sidebar__panel--FlexBasis: 75%;
9872
- }
9873
-
9874
- .pf-c-sidebar__panel.pf-m-width-100 {
9875
- --pf-c-sidebar__panel--FlexBasis: 100%;
9876
- }
9877
-
9878
- @media (min-width: 576px) {
9879
- .pf-c-sidebar__panel.pf-m-width-default-on-sm {
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-sm {
9884
- --pf-c-sidebar__panel--FlexBasis: 25%;
9885
- }
9886
-
9887
- .pf-c-sidebar__panel.pf-m-width-33-on-sm {
9888
- --pf-c-sidebar__panel--FlexBasis: 33%;
9889
- }
9890
-
9891
- .pf-c-sidebar__panel.pf-m-width-50-on-sm {
9892
- --pf-c-sidebar__panel--FlexBasis: 50%;
9893
- }
9894
-
9895
- .pf-c-sidebar__panel.pf-m-width-66-on-sm {
9896
- --pf-c-sidebar__panel--FlexBasis: 66%;
9897
- }
9898
-
9899
- .pf-c-sidebar__panel.pf-m-width-75-on-sm {
9900
- --pf-c-sidebar__panel--FlexBasis: 75%;
9901
- }
9902
-
9903
- .pf-c-sidebar__panel.pf-m-width-100-on-sm {
9904
- --pf-c-sidebar__panel--FlexBasis: 100%;
9905
- }
9906
- }
9907
- @media (min-width: 768px) {
9908
- .pf-c-sidebar__panel.pf-m-width-default-on-md {
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-md {
9913
- --pf-c-sidebar__panel--FlexBasis: 25%;
9914
- }
9915
-
9916
- .pf-c-sidebar__panel.pf-m-width-33-on-md {
9917
- --pf-c-sidebar__panel--FlexBasis: 33%;
9918
- }
9919
-
9920
- .pf-c-sidebar__panel.pf-m-width-50-on-md {
9921
- --pf-c-sidebar__panel--FlexBasis: 50%;
9922
- }
9923
-
9924
- .pf-c-sidebar__panel.pf-m-width-66-on-md {
9925
- --pf-c-sidebar__panel--FlexBasis: 66%;
9926
- }
9927
-
9928
- .pf-c-sidebar__panel.pf-m-width-75-on-md {
9929
- --pf-c-sidebar__panel--FlexBasis: 75%;
9930
- }
9931
-
9932
- .pf-c-sidebar__panel.pf-m-width-100-on-md {
9933
- --pf-c-sidebar__panel--FlexBasis: 100%;
9934
- }
9935
- }
9936
- @media (min-width: 992px) {
9937
- .pf-c-sidebar__panel.pf-m-width-default-on-lg {
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-lg {
9942
- --pf-c-sidebar__panel--FlexBasis: 25%;
9943
- }
9944
-
9945
- .pf-c-sidebar__panel.pf-m-width-33-on-lg {
9946
- --pf-c-sidebar__panel--FlexBasis: 33%;
9947
- }
9948
-
9949
- .pf-c-sidebar__panel.pf-m-width-50-on-lg {
9950
- --pf-c-sidebar__panel--FlexBasis: 50%;
9951
- }
9952
-
9953
- .pf-c-sidebar__panel.pf-m-width-66-on-lg {
9954
- --pf-c-sidebar__panel--FlexBasis: 66%;
9955
- }
9956
-
9957
- .pf-c-sidebar__panel.pf-m-width-75-on-lg {
9958
- --pf-c-sidebar__panel--FlexBasis: 75%;
9959
- }
9960
-
9961
- .pf-c-sidebar__panel.pf-m-width-100-on-lg {
9962
- --pf-c-sidebar__panel--FlexBasis: 100%;
9963
- }
9964
- }
9965
- @media (min-width: 1200px) {
9966
- .pf-c-sidebar__panel.pf-m-width-default-on-xl {
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-xl {
9971
- --pf-c-sidebar__panel--FlexBasis: 25%;
9972
- }
9973
-
9974
- .pf-c-sidebar__panel.pf-m-width-33-on-xl {
9975
- --pf-c-sidebar__panel--FlexBasis: 33%;
9976
- }
9977
-
9978
- .pf-c-sidebar__panel.pf-m-width-50-on-xl {
9979
- --pf-c-sidebar__panel--FlexBasis: 50%;
9980
- }
9981
-
9982
- .pf-c-sidebar__panel.pf-m-width-66-on-xl {
9983
- --pf-c-sidebar__panel--FlexBasis: 66%;
9984
- }
9985
-
9986
- .pf-c-sidebar__panel.pf-m-width-75-on-xl {
9987
- --pf-c-sidebar__panel--FlexBasis: 75%;
9988
- }
9989
-
9990
- .pf-c-sidebar__panel.pf-m-width-100-on-xl {
9991
- --pf-c-sidebar__panel--FlexBasis: 100%;
9992
- }
9993
- }
9994
- @media (min-width: 1450px) {
9995
- .pf-c-sidebar__panel.pf-m-width-default-on-2xl {
9996
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9997
- }
9998
-
9999
- .pf-c-sidebar__panel.pf-m-width-25-on-2xl {
10000
- --pf-c-sidebar__panel--FlexBasis: 25%;
10001
- }
10002
-
10003
- .pf-c-sidebar__panel.pf-m-width-33-on-2xl {
10004
- --pf-c-sidebar__panel--FlexBasis: 33%;
10005
- }
10006
-
10007
- .pf-c-sidebar__panel.pf-m-width-50-on-2xl {
10008
- --pf-c-sidebar__panel--FlexBasis: 50%;
10009
- }
10010
-
10011
- .pf-c-sidebar__panel.pf-m-width-66-on-2xl {
10012
- --pf-c-sidebar__panel--FlexBasis: 66%;
10013
- }
10014
-
10015
- .pf-c-sidebar__panel.pf-m-width-75-on-2xl {
10016
- --pf-c-sidebar__panel--FlexBasis: 75%;
10017
- }
10018
-
10019
- .pf-c-sidebar__panel.pf-m-width-100-on-2xl {
10020
- --pf-c-sidebar__panel--FlexBasis: 100%;
10021
- }
10022
- }
10023
- .pf-c-jump-links {
10024
- --pf-c-jump-links__list--Display: flex;
10025
- --pf-c-jump-links__list--Visibility: visible;
10026
- --pf-c-jump-links__list--PaddingTop: 0;
10027
- --pf-c-jump-links__list--PaddingRight: var(--pf-global--spacer--md);
10028
- --pf-c-jump-links__list--PaddingBottom: 0;
10029
- --pf-c-jump-links__list--PaddingLeft: var(--pf-global--spacer--md);
10030
- --pf-c-jump-links--m-vertical__list--PaddingTop: var(--pf-global--spacer--md);
10031
- --pf-c-jump-links--m-vertical__list--PaddingRight: 0;
10032
- --pf-c-jump-links--m-vertical__list--PaddingBottom: var(--pf-global--spacer--md);
10033
- --pf-c-jump-links--m-vertical__list--PaddingLeft: 0;
10034
- --pf-c-jump-links__list--FlexDirection: row;
10035
- --pf-c-jump-links--m-vertical__list--FlexDirection: column;
10036
- --pf-c-jump-links__list--before--BorderColor: var(--pf-global--BorderColor--100);
10037
- --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-global--BorderWidth--sm);
10038
- --pf-c-jump-links__list--before--BorderRightWidth: 0;
10039
- --pf-c-jump-links__list--before--BorderBottomWidth: 0;
10040
- --pf-c-jump-links__list--before--BorderLeftWidth: 0;
10041
- --pf-c-jump-links--m-vertical__list--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
10042
- --pf-c-jump-links--m-vertical__list--before--BorderTopWidth: 0;
10043
- --pf-c-jump-links__list__list--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
10044
- --pf-c-jump-links__link--PaddingTop: var(--pf-global--spacer--md);
10045
- --pf-c-jump-links__link--PaddingRight: var(--pf-global--spacer--md);
10046
- --pf-c-jump-links__link--PaddingBottom: var(--pf-global--spacer--md);
10047
- --pf-c-jump-links__link--PaddingLeft: var(--pf-global--spacer--md);
10048
- --pf-c-jump-links__list__list__link--PaddingTop: var(--pf-global--spacer--sm);
10049
- --pf-c-jump-links__list__list__link--PaddingLeft: var(--pf-global--spacer--lg);
10050
- --pf-c-jump-links__list__list__link--PaddingBottom: var(--pf-global--spacer--sm);
10051
- --pf-c-jump-links__link--OutlineOffset: calc(-1 * var(--pf-global--spacer--sm));
10052
- --pf-c-jump-links__link--before--BorderTopWidth: 0;
10053
- --pf-c-jump-links__link--before--BorderRightWidth: 0;
10054
- --pf-c-jump-links__link--before--BorderBottomWidth: 0;
10055
- --pf-c-jump-links__link--before--BorderLeftWidth: 0;
10056
- --pf-c-jump-links__link--before--BorderColor: transparent;
10057
- --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-global--BorderWidth--lg);
10058
- --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: 0;
10059
- --pf-c-jump-links__item--m-current__link--before--BorderColor: var(--pf-global--primary-color--100);
10060
- --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth: 0;
10061
- --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth: var(--pf-global--BorderWidth--lg);
10062
- --pf-c-jump-links__link-text--Color: var(--pf-global--Color--200);
10063
- --pf-c-jump-links__link--hover__link-text--Color: var(--pf-global--Color--100);
10064
- --pf-c-jump-links__link--focus__link-text--Color: var(--pf-global--Color--100);
10065
- --pf-c-jump-links__item--m-current__link-text--Color: var(--pf-global--Color--100);
10066
- --pf-c-jump-links__label--MarginBottom: var(--pf-global--spacer--md);
10067
- --pf-c-jump-links__label--Display: block;
10068
- --pf-c-jump-links__label--Visibility: visible;
10069
- --pf-c-jump-links__toggle--MarginTop: calc(-1 * var(--pf-global--spacer--form-element));
10070
- --pf-c-jump-links__toggle--MarginBottom--base: calc(-1 * var(--pf-global--spacer--form-element));
10071
- --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links__toggle--MarginBottom--base);
10072
- --pf-c-jump-links--m-expanded__toggle--MarginBottom: calc(var(--pf-c-jump-links__toggle--MarginBottom--base) + var(--pf-global--spacer--md));
10073
- --pf-c-jump-links__toggle--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
10074
- --pf-c-jump-links__toggle--Display: none;
10075
- --pf-c-jump-links__toggle--Visibility: hidden;
10076
- --pf-c-jump-links__toggle-icon--Color: currentcolor;
10077
- --pf-c-jump-links__toggle-icon--Transition: var(--pf-global--Transition);
10078
- --pf-c-jump-links__toggle-icon--Rotate: 0;
10079
- --pf-c-jump-links--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
10080
- --pf-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
10081
- --pf-c-jump-links__toggle-text--MarginLeft: var(--pf-global--spacer--md);
10082
- --pf-c-jump-links__toggle-text--Color: var(--pf-global--Color--100);
10083
- display: flex;
10158
+ background-color: var(--pf-c-sidebar__content--BackgroundColor);
10084
10159
  }
10085
10160
 
10086
- .pf-c-jump-links.pf-m-center {
10087
- justify-content: center;
10161
+ .pf-c-sidebar__content.pf-m-no-background {
10162
+ --pf-c-sidebar__content--BackgroundColor: transparent;
10088
10163
  }
10089
10164
 
10090
- .pf-c-jump-links.pf-m-center .pf-c-jump-links__main {
10091
- align-items: center;
10165
+ .pf-c-sidebar.pf-m-no-background,
10166
+ .pf-c-sidebar__panel.pf-m-no-background,
10167
+ .pf-c-sidebar__content.pf-m-no-background {
10168
+ background-color: transparent;
10092
10169
  }
10093
10170
 
10094
- .pf-c-jump-links.pf-m-vertical, .pf-c-jump-links.pf-m-expandable {
10095
- --pf-c-jump-links__list--PaddingTop: var(--pf-c-jump-links--m-vertical__list--PaddingTop);
10096
- --pf-c-jump-links__list--PaddingRight: var(--pf-c-jump-links--m-vertical__list--PaddingRight);
10097
- --pf-c-jump-links__list--PaddingBottom: var(--pf-c-jump-links--m-vertical__list--PaddingBottom);
10098
- --pf-c-jump-links__list--PaddingLeft: var(--pf-c-jump-links--m-vertical__list--PaddingLeft);
10099
- --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderTopWidth);
10100
- --pf-c-jump-links__list--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderLeftWidth);
10101
- --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth);
10102
- --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth);
10103
- --pf-c-jump-links__list--FlexDirection: var(--pf-c-jump-links--m-vertical__list--FlexDirection);
10104
- flex-direction: column;
10171
+ .pf-c-sidebar__panel.pf-m-width-default {
10172
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10105
10173
  }
10106
10174
 
10107
- .pf-c-jump-links.pf-m-expandable {
10108
- --pf-c-jump-links__list--Display: none;
10109
- --pf-c-jump-links__list--Visibility: hidden;
10110
- --pf-c-jump-links__toggle--Display: block;
10111
- --pf-c-jump-links__toggle--Visibility: visible;
10112
- --pf-c-jump-links__label--Display: none;
10113
- --pf-c-jump-links__label--Visibility: hidden;
10175
+ .pf-c-sidebar__panel.pf-m-width-25 {
10176
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10114
10177
  }
10115
10178
 
10116
- .pf-c-jump-links.pf-m-non-expandable {
10117
- --pf-c-jump-links__list--Display: flex;
10118
- --pf-c-jump-links__list--Visibility: visible;
10119
- --pf-c-jump-links__toggle--Display: none;
10120
- --pf-c-jump-links__toggle--Visibility: hidden;
10121
- --pf-c-jump-links__label--Display: block;
10122
- --pf-c-jump-links__label--Visibility: visible;
10179
+ .pf-c-sidebar__panel.pf-m-width-33 {
10180
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10181
+ }
10182
+
10183
+ .pf-c-sidebar__panel.pf-m-width-50 {
10184
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10185
+ }
10186
+
10187
+ .pf-c-sidebar__panel.pf-m-width-66 {
10188
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10189
+ }
10190
+
10191
+ .pf-c-sidebar__panel.pf-m-width-75 {
10192
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10193
+ }
10194
+
10195
+ .pf-c-sidebar__panel.pf-m-width-100 {
10196
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10123
10197
  }
10124
10198
 
10125
10199
  @media (min-width: 576px) {
10126
- .pf-c-jump-links.pf-m-expandable-on-sm {
10127
- --pf-c-jump-links__list--Display: none;
10128
- --pf-c-jump-links__list--Visibility: hidden;
10129
- --pf-c-jump-links__toggle--Display: block;
10130
- --pf-c-jump-links__toggle--Visibility: visible;
10131
- --pf-c-jump-links__label--Display: none;
10132
- --pf-c-jump-links__label--Visibility: hidden;
10200
+ .pf-c-sidebar__panel.pf-m-width-default-on-sm {
10201
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10133
10202
  }
10134
10203
 
10135
- .pf-c-jump-links.pf-m-non-expandable-on-sm {
10136
- --pf-c-jump-links__list--Display: flex;
10137
- --pf-c-jump-links__list--Visibility: visible;
10138
- --pf-c-jump-links__toggle--Display: none;
10139
- --pf-c-jump-links__toggle--Visibility: hidden;
10140
- --pf-c-jump-links__label--Display: block;
10141
- --pf-c-jump-links__label--Visibility: visible;
10204
+ .pf-c-sidebar__panel.pf-m-width-25-on-sm {
10205
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10142
10206
  }
10143
- }
10144
- @media (min-width: 768px) {
10145
- .pf-c-jump-links.pf-m-expandable-on-md {
10146
- --pf-c-jump-links__list--Display: none;
10147
- --pf-c-jump-links__list--Visibility: hidden;
10148
- --pf-c-jump-links__toggle--Display: block;
10149
- --pf-c-jump-links__toggle--Visibility: visible;
10150
- --pf-c-jump-links__label--Display: none;
10151
- --pf-c-jump-links__label--Visibility: hidden;
10207
+
10208
+ .pf-c-sidebar__panel.pf-m-width-33-on-sm {
10209
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10152
10210
  }
10153
10211
 
10154
- .pf-c-jump-links.pf-m-non-expandable-on-md {
10155
- --pf-c-jump-links__list--Display: flex;
10156
- --pf-c-jump-links__list--Visibility: visible;
10157
- --pf-c-jump-links__toggle--Display: none;
10158
- --pf-c-jump-links__toggle--Visibility: hidden;
10159
- --pf-c-jump-links__label--Display: block;
10160
- --pf-c-jump-links__label--Visibility: visible;
10212
+ .pf-c-sidebar__panel.pf-m-width-50-on-sm {
10213
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10161
10214
  }
10162
- }
10163
- @media (min-width: 992px) {
10164
- .pf-c-jump-links.pf-m-expandable-on-lg {
10165
- --pf-c-jump-links__list--Display: none;
10166
- --pf-c-jump-links__list--Visibility: hidden;
10167
- --pf-c-jump-links__toggle--Display: block;
10168
- --pf-c-jump-links__toggle--Visibility: visible;
10169
- --pf-c-jump-links__label--Display: none;
10170
- --pf-c-jump-links__label--Visibility: hidden;
10215
+
10216
+ .pf-c-sidebar__panel.pf-m-width-66-on-sm {
10217
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10171
10218
  }
10172
10219
 
10173
- .pf-c-jump-links.pf-m-non-expandable-on-lg {
10174
- --pf-c-jump-links__list--Display: flex;
10175
- --pf-c-jump-links__list--Visibility: visible;
10176
- --pf-c-jump-links__toggle--Display: none;
10177
- --pf-c-jump-links__toggle--Visibility: hidden;
10178
- --pf-c-jump-links__label--Display: block;
10179
- --pf-c-jump-links__label--Visibility: visible;
10220
+ .pf-c-sidebar__panel.pf-m-width-75-on-sm {
10221
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10222
+ }
10223
+
10224
+ .pf-c-sidebar__panel.pf-m-width-100-on-sm {
10225
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10180
10226
  }
10181
10227
  }
10182
- @media (min-width: 1200px) {
10183
- .pf-c-jump-links.pf-m-expandable-on-xl {
10184
- --pf-c-jump-links__list--Display: none;
10185
- --pf-c-jump-links__list--Visibility: hidden;
10186
- --pf-c-jump-links__toggle--Display: block;
10187
- --pf-c-jump-links__toggle--Visibility: visible;
10188
- --pf-c-jump-links__label--Display: none;
10189
- --pf-c-jump-links__label--Visibility: hidden;
10228
+ @media (min-width: 768px) {
10229
+ .pf-c-sidebar__panel.pf-m-width-default-on-md {
10230
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10190
10231
  }
10191
10232
 
10192
- .pf-c-jump-links.pf-m-non-expandable-on-xl {
10193
- --pf-c-jump-links__list--Display: flex;
10194
- --pf-c-jump-links__list--Visibility: visible;
10195
- --pf-c-jump-links__toggle--Display: none;
10196
- --pf-c-jump-links__toggle--Visibility: hidden;
10197
- --pf-c-jump-links__label--Display: block;
10198
- --pf-c-jump-links__label--Visibility: visible;
10233
+ .pf-c-sidebar__panel.pf-m-width-25-on-md {
10234
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10199
10235
  }
10200
- }
10201
- @media (min-width: 1450px) {
10202
- .pf-c-jump-links.pf-m-expandable-on-2xl {
10203
- --pf-c-jump-links__list--Display: none;
10204
- --pf-c-jump-links__list--Visibility: hidden;
10205
- --pf-c-jump-links__toggle--Display: block;
10206
- --pf-c-jump-links__toggle--Visibility: visible;
10207
- --pf-c-jump-links__label--Display: none;
10208
- --pf-c-jump-links__label--Visibility: hidden;
10236
+
10237
+ .pf-c-sidebar__panel.pf-m-width-33-on-md {
10238
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10209
10239
  }
10210
10240
 
10211
- .pf-c-jump-links.pf-m-non-expandable-on-2xl {
10212
- --pf-c-jump-links__list--Display: flex;
10213
- --pf-c-jump-links__list--Visibility: visible;
10214
- --pf-c-jump-links__toggle--Display: none;
10215
- --pf-c-jump-links__toggle--Visibility: hidden;
10216
- --pf-c-jump-links__label--Display: block;
10217
- --pf-c-jump-links__label--Visibility: visible;
10241
+ .pf-c-sidebar__panel.pf-m-width-50-on-md {
10242
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10218
10243
  }
10219
- }
10220
- .pf-c-jump-links.pf-m-expanded {
10221
- --pf-c-jump-links__list--Display: flex;
10222
- --pf-c-jump-links__list--Visibility: visible;
10223
- --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links--m-expanded__toggle--MarginBottom);
10224
- --pf-c-jump-links__toggle-icon--Rotate: var(--pf-c-jump-links--m-expanded__toggle-icon--Rotate);
10225
- --pf-c-jump-links__toggle-icon--Color: var(--pf-c-jump-links--m-expanded__toggle-icon--Color);
10226
- }
10227
10244
 
10228
- .pf-c-jump-links__list {
10229
- position: relative;
10230
- display: var(--pf-c-jump-links__list--Display);
10231
- flex-direction: var(--pf-c-jump-links__list--FlexDirection);
10232
- padding-top: var(--pf-c-jump-links__list--PaddingTop);
10233
- padding-right: var(--pf-c-jump-links__list--PaddingRight);
10234
- padding-bottom: var(--pf-c-jump-links__list--PaddingBottom);
10235
- padding-left: var(--pf-c-jump-links__list--PaddingLeft);
10236
- visibility: var(--pf-c-jump-links__list--Visibility);
10237
- }
10245
+ .pf-c-sidebar__panel.pf-m-width-66-on-md {
10246
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10247
+ }
10238
10248
 
10239
- .pf-c-jump-links__list::before {
10240
- position: absolute;
10241
- top: 0;
10242
- right: 0;
10243
- bottom: 0;
10244
- left: 0;
10245
- pointer-events: none;
10246
- content: "";
10247
- border: solid var(--pf-c-jump-links__list--before--BorderColor);
10248
- 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);
10249
- }
10249
+ .pf-c-sidebar__panel.pf-m-width-75-on-md {
10250
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10251
+ }
10250
10252
 
10251
- .pf-c-jump-links__list .pf-c-jump-links__list {
10252
- --pf-c-jump-links__list--PaddingTop: 0;
10253
- --pf-c-jump-links__list--PaddingBottom: 0;
10254
- --pf-c-jump-links__link--PaddingTop: var(--pf-c-jump-links__list__list__link--PaddingTop);
10255
- --pf-c-jump-links__link--PaddingBottom: var(--pf-c-jump-links__list__list__link--PaddingBottom);
10256
- --pf-c-jump-links__link--PaddingLeft: var(--pf-c-jump-links__list__list__link--PaddingLeft);
10257
- margin-top: var(--pf-c-jump-links__list__list--MarginTop);
10253
+ .pf-c-sidebar__panel.pf-m-width-100-on-md {
10254
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10255
+ }
10258
10256
  }
10257
+ @media (min-width: 992px) {
10258
+ .pf-c-sidebar__panel.pf-m-width-default-on-lg {
10259
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10260
+ }
10259
10261
 
10260
- .pf-c-jump-links__link {
10261
- position: relative;
10262
- display: flex;
10263
- flex: 1;
10264
- padding-top: var(--pf-c-jump-links__link--PaddingTop);
10265
- padding-right: var(--pf-c-jump-links__link--PaddingRight);
10266
- padding-bottom: var(--pf-c-jump-links__link--PaddingBottom);
10267
- padding-left: var(--pf-c-jump-links__link--PaddingLeft);
10268
- text-decoration: none;
10269
- outline-offset: var(--pf-c-jump-links__link--OutlineOffset);
10270
- }
10262
+ .pf-c-sidebar__panel.pf-m-width-25-on-lg {
10263
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10264
+ }
10271
10265
 
10272
- .pf-c-jump-links__link:hover {
10273
- --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--hover__link-text--Color);
10274
- }
10266
+ .pf-c-sidebar__panel.pf-m-width-33-on-lg {
10267
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10268
+ }
10275
10269
 
10276
- .pf-c-jump-links__link:focus {
10277
- --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--focus__link-text--Color);
10278
- }
10270
+ .pf-c-sidebar__panel.pf-m-width-50-on-lg {
10271
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10272
+ }
10279
10273
 
10280
- .pf-c-jump-links__link::before {
10281
- position: absolute;
10282
- top: 0;
10283
- right: 0;
10284
- bottom: 0;
10285
- left: 0;
10286
- pointer-events: none;
10287
- content: "";
10288
- border-color: var(--pf-c-jump-links__link--before--BorderColor);
10289
- border-style: solid;
10290
- 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);
10291
- }
10274
+ .pf-c-sidebar__panel.pf-m-width-66-on-lg {
10275
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10276
+ }
10277
+
10278
+ .pf-c-sidebar__panel.pf-m-width-75-on-lg {
10279
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10280
+ }
10292
10281
 
10293
- .pf-c-jump-links__item {
10294
- --pf-c-jump-links__list--before--BorderColor: transparent;
10282
+ .pf-c-sidebar__panel.pf-m-width-100-on-lg {
10283
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10284
+ }
10295
10285
  }
10286
+ @media (min-width: 1200px) {
10287
+ .pf-c-sidebar__panel.pf-m-width-default-on-xl {
10288
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10289
+ }
10296
10290
 
10297
- .pf-c-jump-links__item.pf-m-current > .pf-c-jump-links__link {
10298
- --pf-c-jump-links__link--before--BorderTopWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderTopWidth);
10299
- --pf-c-jump-links__link--before--BorderLeftWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderLeftWidth);
10300
- --pf-c-jump-links__link--before--BorderColor: var(--pf-c-jump-links__item--m-current__link--before--BorderColor);
10301
- --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__item--m-current__link-text--Color);
10302
- }
10291
+ .pf-c-sidebar__panel.pf-m-width-25-on-xl {
10292
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10293
+ }
10303
10294
 
10304
- .pf-c-jump-links__link-text {
10305
- color: var(--pf-c-jump-links__link-text--Color);
10306
- }
10295
+ .pf-c-sidebar__panel.pf-m-width-33-on-xl {
10296
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10297
+ }
10307
10298
 
10308
- .pf-c-jump-links__label {
10309
- display: var(--pf-c-jump-links__label--Display);
10310
- margin-bottom: var(--pf-c-jump-links__label--MarginBottom);
10311
- visibility: var(--pf-c-jump-links__label--Visibility);
10312
- }
10299
+ .pf-c-sidebar__panel.pf-m-width-50-on-xl {
10300
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10301
+ }
10313
10302
 
10314
- .pf-c-jump-links__main {
10315
- display: flex;
10316
- flex-direction: column;
10317
- }
10303
+ .pf-c-sidebar__panel.pf-m-width-66-on-xl {
10304
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10305
+ }
10318
10306
 
10319
- .pf-c-jump-links__toggle {
10320
- display: var(--pf-c-jump-links__toggle--Display);
10321
- margin-top: var(--pf-c-jump-links__toggle--MarginTop);
10322
- margin-bottom: var(--pf-c-jump-links__toggle--MarginBottom);
10323
- margin-left: var(--pf-c-jump-links__toggle--MarginLeft);
10324
- visibility: var(--pf-c-jump-links__toggle--Visibility);
10325
- }
10307
+ .pf-c-sidebar__panel.pf-m-width-75-on-xl {
10308
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10309
+ }
10326
10310
 
10327
- .pf-c-jump-links__toggle .pf-c-button {
10328
- display: flex;
10329
- align-items: center;
10311
+ .pf-c-sidebar__panel.pf-m-width-100-on-xl {
10312
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10313
+ }
10330
10314
  }
10315
+ @media (min-width: 1450px) {
10316
+ .pf-c-sidebar__panel.pf-m-width-default-on-2xl {
10317
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10318
+ }
10331
10319
 
10332
- .pf-c-jump-links__toggle-icon {
10333
- display: inline-block;
10334
- color: var(--pf-c-jump-links__toggle-icon--Color);
10335
- transition: var(--pf-c-jump-links__toggle-icon--Transition);
10336
- transform: rotate(var(--pf-c-jump-links__toggle-icon--Rotate));
10337
- }
10320
+ .pf-c-sidebar__panel.pf-m-width-25-on-2xl {
10321
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10322
+ }
10338
10323
 
10339
- .pf-c-jump-links__toggle-text {
10340
- margin-left: var(--pf-c-jump-links__toggle-text--MarginLeft);
10341
- color: var(--pf-c-jump-links__toggle-text--Color);
10342
- }
10324
+ .pf-c-sidebar__panel.pf-m-width-33-on-2xl {
10325
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10326
+ }
10327
+
10328
+ .pf-c-sidebar__panel.pf-m-width-50-on-2xl {
10329
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10330
+ }
10343
10331
 
10332
+ .pf-c-sidebar__panel.pf-m-width-66-on-2xl {
10333
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10334
+ }
10335
+
10336
+ .pf-c-sidebar__panel.pf-m-width-75-on-2xl {
10337
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10338
+ }
10339
+
10340
+ .pf-c-sidebar__panel.pf-m-width-100-on-2xl {
10341
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10342
+ }
10343
+ }
10344
10344
  .pf-c-label {
10345
10345
  --pf-c-label--PaddingTop: var(--pf-global--spacer--xs);
10346
10346
  --pf-c-label--PaddingRight: var(--pf-global--spacer--sm);
@@ -16667,6 +16667,11 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
16667
16667
  }
16668
16668
 
16669
16669
  .pf-c-pagination {
16670
+ --pf-c-pagination--inset: 0;
16671
+ --pf-c-pagination--PaddingRight: var(--pf-c-pagination--inset);
16672
+ --pf-c-pagination--PaddingLeft: var(--pf-c-pagination--inset);
16673
+ --pf-c-pagination--m-page-insets--inset: var(--pf-global--spacer--md);
16674
+ --pf-c-pagination--m-page-insets--xl--inset: var(--pf-global--spacer--lg);
16670
16675
  --pf-c-pagination--child--MarginRight: var(--pf-global--spacer--lg);
16671
16676
  --pf-c-pagination--m-bottom--child--MarginRight: 0;
16672
16677
  --pf-c-pagination--m-bottom--child--md--MarginRight: var(--pf-global--spacer--lg);
@@ -16731,6 +16736,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
16731
16736
  flex-wrap: wrap;
16732
16737
  align-items: center;
16733
16738
  justify-content: flex-end;
16739
+ padding-right: var(--pf-c-pagination--PaddingRight);
16740
+ padding-left: var(--pf-c-pagination--PaddingLeft);
16734
16741
  }
16735
16742
 
16736
16743
  @media screen and (min-width: 768px) {
@@ -16754,6 +16761,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
16754
16761
  .pf-c-pagination {
16755
16762
  --pf-c-pagination--m-bottom--md--PaddingRight: var(--pf-c-pagination--m-bottom--xl--PaddingRight);
16756
16763
  --pf-c-pagination--m-bottom--md--PaddingLeft: var(--pf-c-pagination--m-bottom--xl--PaddingLeft);
16764
+ --pf-c-pagination__scroll-button--Width: var(--pf-c-pagination__scroll-button--xl--Width);
16765
+ --pf-c-pagination--m-page-insets--inset: var(--pf-c-pagination--m-page-insets--xl--inset);
16757
16766
  }
16758
16767
  }
16759
16768
  .pf-c-pagination > *:not(:last-child):not(.pf-c-pagination__total-items) {
@@ -16863,6 +16872,10 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
16863
16872
  --pf-c-pagination--child--MarginRight: var(--pf-c-pagination--m-compact--child--MarginRight);
16864
16873
  }
16865
16874
 
16875
+ .pf-c-pagination.pf-m-page-insets {
16876
+ --pf-c-pagination--inset: var(--pf-c-pagination--m-page-insets--inset);
16877
+ }
16878
+
16866
16879
  .pf-c-pagination__nav {
16867
16880
  display: var(--pf-c-pagination__nav--Display);
16868
16881
  justify-content: flex-end;
@@ -16922,6 +16935,30 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
16922
16935
  --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
16923
16936
  }
16924
16937
 
16938
+ .pf-c-pagination.pf-m-inset-none {
16939
+ --pf-c-pagination--inset: 0;
16940
+ }
16941
+
16942
+ .pf-c-pagination.pf-m-inset-sm {
16943
+ --pf-c-pagination--inset: var(--pf-global--spacer--sm);
16944
+ }
16945
+
16946
+ .pf-c-pagination.pf-m-inset-md {
16947
+ --pf-c-pagination--inset: var(--pf-global--spacer--md);
16948
+ }
16949
+
16950
+ .pf-c-pagination.pf-m-inset-lg {
16951
+ --pf-c-pagination--inset: var(--pf-global--spacer--lg);
16952
+ }
16953
+
16954
+ .pf-c-pagination.pf-m-inset-xl {
16955
+ --pf-c-pagination--inset: var(--pf-global--spacer--xl);
16956
+ }
16957
+
16958
+ .pf-c-pagination.pf-m-inset-2xl {
16959
+ --pf-c-pagination--inset: var(--pf-global--spacer--2xl);
16960
+ }
16961
+
16925
16962
  @media (min-width: 576px) {
16926
16963
  .pf-c-pagination.pf-m-display-summary-on-sm {
16927
16964
  --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-summary__nav--Display);
@@ -16940,6 +16977,30 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
16940
16977
  --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
16941
16978
  --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
16942
16979
  }
16980
+
16981
+ .pf-c-pagination.pf-m-inset-none-on-sm {
16982
+ --pf-c-pagination--inset: 0;
16983
+ }
16984
+
16985
+ .pf-c-pagination.pf-m-inset-sm-on-sm {
16986
+ --pf-c-pagination--inset: var(--pf-global--spacer--sm);
16987
+ }
16988
+
16989
+ .pf-c-pagination.pf-m-inset-md-on-sm {
16990
+ --pf-c-pagination--inset: var(--pf-global--spacer--md);
16991
+ }
16992
+
16993
+ .pf-c-pagination.pf-m-inset-lg-on-sm {
16994
+ --pf-c-pagination--inset: var(--pf-global--spacer--lg);
16995
+ }
16996
+
16997
+ .pf-c-pagination.pf-m-inset-xl-on-sm {
16998
+ --pf-c-pagination--inset: var(--pf-global--spacer--xl);
16999
+ }
17000
+
17001
+ .pf-c-pagination.pf-m-inset-2xl-on-sm {
17002
+ --pf-c-pagination--inset: var(--pf-global--spacer--2xl);
17003
+ }
16943
17004
  }
16944
17005
  @media (min-width: 768px) {
16945
17006
  .pf-c-pagination.pf-m-display-summary-on-md {
@@ -16959,6 +17020,30 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
16959
17020
  --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
16960
17021
  --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
16961
17022
  }
17023
+
17024
+ .pf-c-pagination.pf-m-inset-none-on-md {
17025
+ --pf-c-pagination--inset: 0;
17026
+ }
17027
+
17028
+ .pf-c-pagination.pf-m-inset-sm-on-md {
17029
+ --pf-c-pagination--inset: var(--pf-global--spacer--sm);
17030
+ }
17031
+
17032
+ .pf-c-pagination.pf-m-inset-md-on-md {
17033
+ --pf-c-pagination--inset: var(--pf-global--spacer--md);
17034
+ }
17035
+
17036
+ .pf-c-pagination.pf-m-inset-lg-on-md {
17037
+ --pf-c-pagination--inset: var(--pf-global--spacer--lg);
17038
+ }
17039
+
17040
+ .pf-c-pagination.pf-m-inset-xl-on-md {
17041
+ --pf-c-pagination--inset: var(--pf-global--spacer--xl);
17042
+ }
17043
+
17044
+ .pf-c-pagination.pf-m-inset-2xl-on-md {
17045
+ --pf-c-pagination--inset: var(--pf-global--spacer--2xl);
17046
+ }
16962
17047
  }
16963
17048
  @media (min-width: 992px) {
16964
17049
  .pf-c-pagination.pf-m-display-summary-on-lg {
@@ -16978,6 +17063,30 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
16978
17063
  --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
16979
17064
  --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
16980
17065
  }
17066
+
17067
+ .pf-c-pagination.pf-m-inset-none-on-lg {
17068
+ --pf-c-pagination--inset: 0;
17069
+ }
17070
+
17071
+ .pf-c-pagination.pf-m-inset-sm-on-lg {
17072
+ --pf-c-pagination--inset: var(--pf-global--spacer--sm);
17073
+ }
17074
+
17075
+ .pf-c-pagination.pf-m-inset-md-on-lg {
17076
+ --pf-c-pagination--inset: var(--pf-global--spacer--md);
17077
+ }
17078
+
17079
+ .pf-c-pagination.pf-m-inset-lg-on-lg {
17080
+ --pf-c-pagination--inset: var(--pf-global--spacer--lg);
17081
+ }
17082
+
17083
+ .pf-c-pagination.pf-m-inset-xl-on-lg {
17084
+ --pf-c-pagination--inset: var(--pf-global--spacer--xl);
17085
+ }
17086
+
17087
+ .pf-c-pagination.pf-m-inset-2xl-on-lg {
17088
+ --pf-c-pagination--inset: var(--pf-global--spacer--2xl);
17089
+ }
16981
17090
  }
16982
17091
  @media (min-width: 1200px) {
16983
17092
  .pf-c-pagination.pf-m-display-summary-on-xl {
@@ -16997,6 +17106,30 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
16997
17106
  --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
16998
17107
  --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
16999
17108
  }
17109
+
17110
+ .pf-c-pagination.pf-m-inset-none-on-xl {
17111
+ --pf-c-pagination--inset: 0;
17112
+ }
17113
+
17114
+ .pf-c-pagination.pf-m-inset-sm-on-xl {
17115
+ --pf-c-pagination--inset: var(--pf-global--spacer--sm);
17116
+ }
17117
+
17118
+ .pf-c-pagination.pf-m-inset-md-on-xl {
17119
+ --pf-c-pagination--inset: var(--pf-global--spacer--md);
17120
+ }
17121
+
17122
+ .pf-c-pagination.pf-m-inset-lg-on-xl {
17123
+ --pf-c-pagination--inset: var(--pf-global--spacer--lg);
17124
+ }
17125
+
17126
+ .pf-c-pagination.pf-m-inset-xl-on-xl {
17127
+ --pf-c-pagination--inset: var(--pf-global--spacer--xl);
17128
+ }
17129
+
17130
+ .pf-c-pagination.pf-m-inset-2xl-on-xl {
17131
+ --pf-c-pagination--inset: var(--pf-global--spacer--2xl);
17132
+ }
17000
17133
  }
17001
17134
  @media (min-width: 1450px) {
17002
17135
  .pf-c-pagination.pf-m-display-summary-on-2xl {
@@ -17016,6 +17149,30 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
17016
17149
  --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
17017
17150
  --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
17018
17151
  }
17152
+
17153
+ .pf-c-pagination.pf-m-inset-none-on-2xl {
17154
+ --pf-c-pagination--inset: 0;
17155
+ }
17156
+
17157
+ .pf-c-pagination.pf-m-inset-sm-on-2xl {
17158
+ --pf-c-pagination--inset: var(--pf-global--spacer--sm);
17159
+ }
17160
+
17161
+ .pf-c-pagination.pf-m-inset-md-on-2xl {
17162
+ --pf-c-pagination--inset: var(--pf-global--spacer--md);
17163
+ }
17164
+
17165
+ .pf-c-pagination.pf-m-inset-lg-on-2xl {
17166
+ --pf-c-pagination--inset: var(--pf-global--spacer--lg);
17167
+ }
17168
+
17169
+ .pf-c-pagination.pf-m-inset-xl-on-2xl {
17170
+ --pf-c-pagination--inset: var(--pf-global--spacer--xl);
17171
+ }
17172
+
17173
+ .pf-c-pagination.pf-m-inset-2xl-on-2xl {
17174
+ --pf-c-pagination--inset: var(--pf-global--spacer--2xl);
17175
+ }
17019
17176
  }
17020
17177
  :where(.pf-theme-dark) .pf-c-pagination {
17021
17178
  --pf-c-pagination--m-sticky--BackgroundColor: var(--pf-global--BackgroundColor--300);
@@ -18097,118 +18254,30 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18097
18254
  }
18098
18255
 
18099
18256
  .pf-c-radio__input:last-child {
18100
- margin-right: var(--pf-c-radio__input--last-child--MarginRight);
18101
- }
18102
-
18103
- .pf-c-radio__description {
18104
- grid-column: 2;
18105
- font-size: var(--pf-c-radio__description--FontSize);
18106
- color: var(--pf-c-radio__description--Color);
18107
- }
18108
-
18109
- .pf-c-radio__body {
18110
- grid-column: 2;
18111
- margin-top: var(--pf-c-radio__body--MarginTop);
18112
- }
18113
-
18114
- label.pf-c-radio, .pf-c-radio__label,
18115
- .pf-c-radio__input {
18116
- cursor: pointer;
18117
- }
18118
-
18119
- .pf-c-radio__label:disabled, .pf-c-radio__label.pf-m-disabled,
18120
- .pf-c-radio__input:disabled,
18121
- .pf-c-radio__input.pf-m-disabled {
18122
- --pf-c-radio__label--Color: var(--pf-c-radio__label--disabled--Color);
18123
- cursor: not-allowed;
18124
- }
18125
-
18126
- .pf-c-simple-list {
18127
- --pf-c-simple-list__item-link--PaddingTop: var(--pf-global--spacer--xs);
18128
- --pf-c-simple-list__item-link--PaddingRight: var(--pf-global--spacer--md);
18129
- --pf-c-simple-list__item-link--PaddingBottom: var(--pf-global--spacer--xs);
18130
- --pf-c-simple-list__item-link--PaddingLeft: var(--pf-global--spacer--md);
18131
- --pf-c-simple-list__item-link--BackgroundColor: var(--pf-global--BackgroundColor--100);
18132
- --pf-c-simple-list__item-link--Color: var(--pf-global--Color--100);
18133
- --pf-c-simple-list__item-link--FontSize: var(--pf-global--FontSize--sm);
18134
- --pf-c-simple-list__item-link--FontWeight: var(--pf-global--FontWeight--normal);
18135
- --pf-c-simple-list__item-link--m-current--Color: var(--pf-global--link--Color);
18136
- --pf-c-simple-list__item-link--m-current--BackgroundColor: var(--pf-global--BackgroundColor--200);
18137
- --pf-c-simple-list__item-link--m-current--FontWeight: var(--pf-global--FontWeight--normal);
18138
- --pf-c-simple-list__item-link--hover--Color: var(--pf-global--Color--100);
18139
- --pf-c-simple-list__item-link--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
18140
- --pf-c-simple-list__item-link--focus--Color: var(--pf-global--Color--100);
18141
- --pf-c-simple-list__item-link--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
18142
- --pf-c-simple-list__item-link--focus--FontWeight: var(--pf-global--FontWeight--normal);
18143
- --pf-c-simple-list__item-link--active--Color: var(--pf-global--Color--100);
18144
- --pf-c-simple-list__item-link--active--BackgroundColor: var(--pf-global--BackgroundColor--200);
18145
- --pf-c-simple-list__item-link--active--FontWeight: var(--pf-global--FontWeight--normal);
18146
- --pf-c-simple-list__title--PaddingTop: var(--pf-global--spacer--sm);
18147
- --pf-c-simple-list__title--PaddingRight: var(--pf-global--spacer--md);
18148
- --pf-c-simple-list__title--PaddingBottom: var(--pf-global--spacer--sm);
18149
- --pf-c-simple-list__title--PaddingLeft: var(--pf-global--spacer--md);
18150
- --pf-c-simple-list__title--FontSize: var(--pf-global--FontSize--sm);
18151
- --pf-c-simple-list__title--Color: var(--pf-global--Color--dark-200);
18152
- --pf-c-simple-list__title--FontWeight: var(--pf-global--FontWeight--semi-bold);
18153
- --pf-c-simple-list__section--section--MarginTop: var(--pf-global--spacer--sm);
18154
- }
18155
-
18156
- .pf-c-simple-list__item-link {
18157
- display: block;
18158
- width: 100%;
18159
- padding: var(--pf-c-simple-list__item-link--PaddingTop) var(--pf-c-simple-list__item-link--PaddingRight) var(--pf-c-simple-list__item-link--PaddingBottom) var(--pf-c-simple-list__item-link--PaddingLeft);
18160
- font-size: var(--pf-c-simple-list__item-link--FontSize);
18161
- font-weight: var(--pf-c-simple-list__item-link--FontWeight);
18162
- color: var(--pf-c-simple-list__item-link--Color);
18163
- text-align: left;
18164
- background-color: var(--pf-c-simple-list__item-link--BackgroundColor);
18165
- border: none;
18166
- }
18167
-
18168
- .pf-c-simple-list__item-link:hover {
18169
- text-decoration: none;
18170
- --pf-c-simple-list__item-link--BackgroundColor: var(--pf-c-simple-list__item-link--hover--BackgroundColor);
18171
- --pf-c-simple-list__item-link--Color: var(--pf-c-simple-list__item-link--hover--Color);
18172
- }
18173
-
18174
- .pf-c-simple-list__item-link:focus {
18175
- --pf-c-simple-list__item-link--FontWeight: var(--pf-c-simple-list__item-link--focus--FontWeight);
18176
- --pf-c-simple-list__item-link--BackgroundColor: var(--pf-c-simple-list__item-link--focus--BackgroundColor);
18177
- --pf-c-simple-list__item-link--Color: var(--pf-c-simple-list__item-link--focus--Color);
18178
- }
18179
-
18180
- .pf-c-simple-list__item-link:active {
18181
- --pf-c-simple-list__item-link--FontWeight: var(--pf-c-simple-list__item-link--active--FontWeight);
18182
- --pf-c-simple-list__item-link--BackgroundColor: var(--pf-c-simple-list__item-link--active--BackgroundColor);
18183
- --pf-c-simple-list__item-link--Color: var(--pf-c-simple-list__item-link--active--Color);
18184
- }
18185
-
18186
- .pf-c-simple-list__item-link.pf-m-current {
18187
- --pf-c-simple-list__item-link--FontWeight: var(--pf-c-simple-list__item-link--m-current--FontWeight);
18188
- --pf-c-simple-list__item-link--BackgroundColor: var(--pf-c-simple-list__item-link--m-current--BackgroundColor);
18189
- --pf-c-simple-list__item-link--Color: var(--pf-c-simple-list__item-link--m-current--Color);
18257
+ margin-right: var(--pf-c-radio__input--last-child--MarginRight);
18190
18258
  }
18191
18259
 
18192
- .pf-c-simple-list__title {
18193
- padding: var(--pf-c-simple-list__title--PaddingTop) var(--pf-c-simple-list__title--PaddingRight) var(--pf-c-simple-list__title--PaddingBottom) var(--pf-c-simple-list__title--PaddingLeft);
18194
- font-size: var(--pf-c-simple-list__title--FontSize);
18195
- font-weight: var(--pf-c-simple-list__title--FontWeight);
18196
- color: var(--pf-c-simple-list__title--Color);
18260
+ .pf-c-radio__description {
18261
+ grid-column: 2;
18262
+ font-size: var(--pf-c-radio__description--FontSize);
18263
+ color: var(--pf-c-radio__description--Color);
18197
18264
  }
18198
18265
 
18199
- .pf-c-simple-list__section + .pf-c-simple-list__section {
18200
- margin-top: var(--pf-c-simple-list__section--section--MarginTop);
18266
+ .pf-c-radio__body {
18267
+ grid-column: 2;
18268
+ margin-top: var(--pf-c-radio__body--MarginTop);
18201
18269
  }
18202
18270
 
18203
- :where(.pf-theme-dark) .pf-c-simple-list {
18204
- --pf-c-simple-list__item-link--m-current--Color: var(--pf-global--active-color--100);
18205
- --pf-c-simple-list__item-link--m-current--BackgroundColor: var(--pf-global--BackgroundColor--400);
18206
- --pf-c-simple-list__item-link--hover--Color: var(--pf-global--Color--100);
18207
- --pf-c-simple-list__item-link--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
18208
- --pf-c-simple-list__item-link--focus--Color: var(--pf-global--Color--100);
18209
- --pf-c-simple-list__item-link--focus--BackgroundColor: var(--pf-global--BackgroundColor--400);
18210
- --pf-c-simple-list__item-link--active--Color: var(--pf-global--Color--100);
18211
- --pf-c-simple-list__item-link--active--BackgroundColor: var(--pf-global--BackgroundColor--400);
18271
+ label.pf-c-radio, .pf-c-radio__label,
18272
+ .pf-c-radio__input {
18273
+ cursor: pointer;
18274
+ }
18275
+
18276
+ .pf-c-radio__label:disabled, .pf-c-radio__label.pf-m-disabled,
18277
+ .pf-c-radio__input:disabled,
18278
+ .pf-c-radio__input.pf-m-disabled {
18279
+ --pf-c-radio__label--Color: var(--pf-c-radio__label--disabled--Color);
18280
+ cursor: not-allowed;
18212
18281
  }
18213
18282
 
18214
18283
  .pf-c-select {
@@ -18486,374 +18555,658 @@ label.pf-c-radio, .pf-c-radio__label,
18486
18555
  --pf-c-select__toggle--before--BorderBottomWidth: var(--pf-c-select__toggle--m-expanded--before--BorderBottomWidth);
18487
18556
  }
18488
18557
 
18489
- .pf-c-select__toggle.pf-m-plain {
18490
- --pf-c-select__toggle-arrow--Color: var(--pf-c-select--m-plain__toggle-arrow--Color);
18558
+ .pf-c-select__toggle.pf-m-plain {
18559
+ --pf-c-select__toggle-arrow--Color: var(--pf-c-select--m-plain__toggle-arrow--Color);
18560
+ }
18561
+
18562
+ .pf-c-select__toggle.pf-m-plain::before {
18563
+ border-color: var(--pf-c-select__toggle--m-plain--before--BorderColor);
18564
+ }
18565
+
18566
+ .pf-c-select__toggle.pf-m-plain:hover, .pf-c-select__toggle.pf-m-plain:active, .pf-c-select__toggle.pf-m-plain.pf-m-active, .pf-c-select__toggle.pf-m-plain:focus, .pf-c-select.pf-m-expanded > .pf-c-select__toggle.pf-m-plain {
18567
+ --pf-c-select--m-plain__toggle-arrow--Color: var(--pf-c-select--m-plain--hover__toggle-arrow--Color);
18568
+ }
18569
+
18570
+ .pf-c-select__toggle.pf-m-typeahead {
18571
+ --pf-c-select__toggle--PaddingTop: 0;
18572
+ --pf-c-select__toggle--PaddingRight: 0;
18573
+ --pf-c-select__toggle--PaddingBottom: 0;
18574
+ }
18575
+
18576
+ .pf-c-select__toggle.pf-m-typeahead .pf-c-form-control {
18577
+ overflow: hidden;
18578
+ text-overflow: ellipsis;
18579
+ white-space: nowrap;
18580
+ --pf-c-form-control--invalid--BackgroundUrl: none;
18581
+ position: relative;
18582
+ height: auto;
18583
+ }
18584
+
18585
+ .pf-c-select__toggle .pf-c-select__toggle-clear {
18586
+ padding-right: var(--pf-c-select__toggle-clear--PaddingRight);
18587
+ padding-left: var(--pf-c-select__toggle-clear--PaddingLeft);
18588
+ margin-left: auto;
18589
+ }
18590
+
18591
+ .pf-c-select__toggle .pf-c-select__toggle-button {
18592
+ color: var(--pf-c-select__toggle-button--Color);
18593
+ }
18594
+
18595
+ .pf-c-select__toggle .pf-c-select__toggle-clear + .pf-c-select__toggle-button {
18596
+ padding-left: var(--pf-c-select__toggle-clear--toggle-button--PaddingLeft);
18597
+ }
18598
+
18599
+ .pf-c-select__toggle.pf-m-placeholder {
18600
+ --pf-c-select__toggle-text--Color: var(--pf-c-select__toggle--m-placeholder__toggle-text--Color);
18601
+ }
18602
+
18603
+ .pf-c-select__toggle-arrow {
18604
+ color: var(--pf-c-select__toggle-arrow--Color, inherit);
18605
+ }
18606
+
18607
+ * + .pf-c-select__toggle-arrow {
18608
+ margin-right: var(--pf-c-select__toggle-arrow--MarginRight);
18609
+ margin-left: var(--pf-c-select__toggle-arrow--MarginLeft);
18610
+ }
18611
+
18612
+ .pf-c-select.pf-m-top.pf-m-expanded .pf-c-select__toggle-arrow {
18613
+ transform: rotate(var(--pf-c-select__toggle-arrow--m-top--m-expanded__toggle-arrow--Rotate));
18614
+ }
18615
+
18616
+ .pf-c-select__toggle-text {
18617
+ overflow: hidden;
18618
+ text-overflow: ellipsis;
18619
+ white-space: nowrap;
18620
+ color: var(--pf-c-select__toggle-text--Color, inherit);
18621
+ }
18622
+
18623
+ .pf-c-select__toggle-wrapper {
18624
+ display: flex;
18625
+ flex: 1;
18626
+ flex-wrap: wrap;
18627
+ align-items: center;
18628
+ justify-content: flex-start;
18629
+ min-width: 0;
18630
+ max-width: var(--pf-c-select__toggle-wrapper--MaxWidth);
18631
+ white-space: normal;
18632
+ }
18633
+
18634
+ .pf-c-select__toggle-wrapper > :not(:last-child) {
18635
+ margin-right: var(--pf-c-select__toggle-wrapper--not-last-child--MarginRight);
18636
+ }
18637
+
18638
+ .pf-c-select__toggle-wrapper > .pf-c-form-control {
18639
+ margin-top: calc(-1 * var(--pf-c-select__toggle-wrapper--m-typeahead--PaddingTop));
18640
+ }
18641
+
18642
+ .pf-c-select__toggle-wrapper .pf-c-chip-group {
18643
+ margin-top: var(--pf-c-select__toggle-wrapper--c-chip-group--MarginTop);
18644
+ margin-bottom: var(--pf-c-select__toggle-wrapper--c-chip-group--MarginBottom);
18645
+ }
18646
+
18647
+ .pf-c-select__toggle-wrapper > .pf-c-select__toggle-typeahead:first-child {
18648
+ margin-left: calc(-1 * var(--pf-c-select__toggle--PaddingLeft));
18649
+ }
18650
+
18651
+ .pf-c-select__toggle-icon + .pf-c-select__toggle-text {
18652
+ margin-left: var(--pf-c-select__toggle-icon--toggle-text--MarginLeft);
18653
+ }
18654
+
18655
+ .pf-c-select__toggle-status-icon {
18656
+ margin-left: var(--pf-c-select__toggle-status-icon--MarginLeft);
18657
+ color: var(--pf-c-select__toggle-status-icon--Color);
18658
+ }
18659
+
18660
+ .pf-c-select__toggle-badge {
18661
+ display: flex;
18662
+ padding-left: var(--pf-c-select__toggle-badge--PaddingLeft);
18663
+ }
18664
+
18665
+ .pf-c-select__toggle-typeahead {
18666
+ flex-basis: var(--pf-c-select__toggle-typeahead--FlexBasis);
18667
+ flex-grow: 1;
18668
+ min-width: var(--pf-c-select__toggle-typeahead--MinWidth);
18669
+ flex-shrink: 0;
18670
+ }
18671
+
18672
+ .pf-c-select__toggle-typeahead.pf-c-form-control {
18673
+ background-color: var(--pf-c-select__toggle-typeahead--BackgroundColor);
18674
+ border-top: var(--pf-c-select__toggle-typeahead--BorderTop);
18675
+ border-right: var(--pf-c-select__toggle-typeahead--BorderRight);
18676
+ border-bottom-color: transparent;
18677
+ border-left: var(--pf-c-select__toggle-typeahead--BorderLeft);
18678
+ }
18679
+
18680
+ .pf-c-select__toggle-typeahead.pf-c-form-control:focus {
18681
+ padding-bottom: var(--pf-c-select__toggle-typeahead--focus--PaddingBottom);
18682
+ }
18683
+
18684
+ .pf-c-select__menu {
18685
+ position: absolute;
18686
+ top: var(--pf-c-select__menu--Top);
18687
+ z-index: var(--pf-c-select__menu--ZIndex);
18688
+ width: var(--pf-c-select__menu--Width);
18689
+ min-width: var(--pf-c-select__menu--MinWidth);
18690
+ padding-top: var(--pf-c-select__menu--PaddingTop);
18691
+ padding-bottom: var(--pf-c-select__menu--PaddingBottom);
18692
+ background-color: var(--pf-c-select__menu--BackgroundColor);
18693
+ background-clip: padding-box;
18694
+ box-shadow: var(--pf-c-select__menu--BoxShadow);
18695
+ }
18696
+
18697
+ .pf-c-select__menu.pf-m-align-right {
18698
+ right: 0;
18699
+ }
18700
+
18701
+ .pf-c-select.pf-m-top .pf-c-select__menu {
18702
+ top: 0;
18703
+ transform: translateY(var(--pf-c-select__menu--m-top--TranslateY));
18704
+ }
18705
+
18706
+ .pf-c-select__menu.pf-m-static {
18707
+ --pf-c-select__menu--m-top--TranslateY: 0;
18708
+ position: static;
18709
+ top: auto;
18710
+ right: auto;
18711
+ bottom: auto;
18712
+ left: auto;
18713
+ z-index: auto;
18714
+ min-width: min-content;
18715
+ }
18716
+
18717
+ .pf-c-select__menu-fieldset {
18718
+ border: 0;
18719
+ }
18720
+
18721
+ .pf-c-select__menu-wrapper {
18722
+ display: flex;
18723
+ }
18724
+
18725
+ .pf-c-select__menu-wrapper.pf-m-favorite .pf-c-select__menu-item.pf-m-favorite-action {
18726
+ --pf-c-select__menu-item--m-favorite-action--Color: var(--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--Color);
18727
+ --pf-c-select__menu-item--m-favorite-action--hover--Color: var(--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--hover--Color);
18728
+ --pf-c-select__menu-item--m-favorite-action--focus--Color: var(--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--focus--Color);
18729
+ }
18730
+
18731
+ .pf-c-select__menu-item {
18732
+ position: relative;
18733
+ width: var(--pf-c-select__menu-item--Width);
18734
+ padding: var(--pf-c-select__menu-item--PaddingTop) var(--pf-c-select__menu-item--PaddingRight) var(--pf-c-select__menu-item--PaddingBottom) var(--pf-c-select__menu-item--PaddingLeft);
18735
+ font-size: var(--pf-c-select__menu-item--FontSize);
18736
+ font-weight: var(--pf-c-select__menu-item--FontWeight);
18737
+ line-height: var(--pf-c-select__menu-item--LineHeight);
18738
+ color: var(--pf-c-select__menu-item--Color);
18739
+ text-align: left;
18740
+ white-space: nowrap;
18741
+ background-color: transparent;
18742
+ border: none;
18743
+ }
18744
+
18745
+ .pf-c-select__menu-item:hover, .pf-c-select__menu-item:focus, .pf-c-select__menu-item.pf-m-focus {
18746
+ --pf-c-select__menu-item--m-action--Color: var(--pf-c-select__menu-item--hover__menu-item--m-action--Color);
18747
+ text-decoration: none;
18748
+ }
18749
+
18750
+ .pf-c-select__menu-wrapper:hover, .pf-c-select__menu-item:hover {
18751
+ background-color: var(--pf-c-select__menu-item--hover--BackgroundColor);
18752
+ }
18753
+
18754
+ .pf-c-select__menu-wrapper:focus-within,
18755
+ .pf-c-select__menu-wrapper.pf-m-focus, .pf-c-select__menu-item:focus, .pf-c-select__menu-item.pf-m-focus {
18756
+ position: relative;
18757
+ background-color: var(--pf-c-select__menu-item--focus--BackgroundColor);
18758
+ }
18759
+
18760
+ .pf-c-select__menu-item.pf-m-link {
18761
+ --pf-c-select__menu-item--PaddingRight: 0;
18762
+ --pf-c-select__menu-item-main--PaddingRight: 0;
18763
+ --pf-c-select__menu-item-description--PaddingRight: 0;
18764
+ --pf-c-select__menu-item--Width: var(--pf-c-select__menu-item--m-link--Width);
18765
+ --pf-c-select__menu-item--hover--BackgroundColor: var(--pf-c-select__menu-item--m-link--hover--BackgroundColor);
18766
+ --pf-c-select__menu-item--focus--BackgroundColor: var(--pf-c-select__menu-item--m-link--focus--BackgroundColor);
18767
+ flex-grow: 1;
18768
+ }
18769
+
18770
+ .pf-c-select__menu-item.pf-m-action {
18771
+ --pf-c-select__menu-item--Color: var(--pf-c-select__menu-item--m-action--Color);
18772
+ --pf-c-select__menu-item--Width: var(--pf-c-select__menu-item--m-action--Width);
18773
+ --pf-c-select__menu-item--hover--BackgroundColor: var(--pf-c-select__menu-item--m-action--hover--BackgroundColor);
18774
+ --pf-c-select__menu-item--focus--BackgroundColor: var(--pf-c-select__menu-item--m-action--focus--BackgroundColor);
18775
+ display: flex;
18776
+ align-items: flex-start;
18777
+ font-size: var(--pf-c-select__menu-item--m-action--FontSize);
18778
+ }
18779
+
18780
+ .pf-c-select__menu-item.pf-m-action:hover {
18781
+ --pf-c-select__menu-item--m-action--Color: var(--pf-c-select__menu-item--m-action--hover--Color);
18491
18782
  }
18492
18783
 
18493
- .pf-c-select__toggle.pf-m-plain::before {
18494
- border-color: var(--pf-c-select__toggle--m-plain--before--BorderColor);
18784
+ .pf-c-select__menu-item.pf-m-action:focus {
18785
+ --pf-c-select__menu-item--m-action--Color: var(--pf-c-select__menu-item--m-action--focus--Color);
18495
18786
  }
18496
18787
 
18497
- .pf-c-select__toggle.pf-m-plain:hover, .pf-c-select__toggle.pf-m-plain:active, .pf-c-select__toggle.pf-m-plain.pf-m-active, .pf-c-select__toggle.pf-m-plain:focus, .pf-c-select.pf-m-expanded > .pf-c-select__toggle.pf-m-plain {
18498
- --pf-c-select--m-plain__toggle-arrow--Color: var(--pf-c-select--m-plain--hover__toggle-arrow--Color);
18788
+ .pf-c-select__menu-item.pf-m-action:disabled {
18789
+ --pf-c-select__menu-item--disabled--Color: var(--pf-c-select__menu-item--m-action--disabled--Color);
18499
18790
  }
18500
18791
 
18501
- .pf-c-select__toggle.pf-m-typeahead {
18502
- --pf-c-select__toggle--PaddingTop: 0;
18503
- --pf-c-select__toggle--PaddingRight: 0;
18504
- --pf-c-select__toggle--PaddingBottom: 0;
18792
+ .pf-c-select__menu-item.pf-m-favorite-action {
18793
+ --pf-c-select__menu-item--m-action--Color: var(--pf-c-select__menu-item--m-favorite-action--Color);
18794
+ --pf-c-select__menu-item--m-action--hover--Color: var(--pf-c-select__menu-item--m-favorite-action--hover--Color);
18795
+ --pf-c-select__menu-item--m-action--focus--Color: var(--pf-c-select__menu-item--m-favorite-action--focus--Color);
18505
18796
  }
18506
18797
 
18507
- .pf-c-select__toggle.pf-m-typeahead .pf-c-form-control {
18508
- overflow: hidden;
18509
- text-overflow: ellipsis;
18510
- white-space: nowrap;
18511
- --pf-c-form-control--invalid--BackgroundUrl: none;
18512
- position: relative;
18513
- height: auto;
18798
+ .pf-c-select__menu-item.pf-m-selected {
18799
+ --pf-c-select__menu-item--PaddingRight: var(--pf-c-select__menu-item--m-selected--PaddingRight);
18800
+ --pf-c-select__menu-item-main--PaddingRight: var(--pf-c-select__menu-item--m-selected__menu-item-main--PaddingRight);
18514
18801
  }
18515
18802
 
18516
- .pf-c-select__toggle .pf-c-select__toggle-clear {
18517
- padding-right: var(--pf-c-select__toggle-clear--PaddingRight);
18518
- padding-left: var(--pf-c-select__toggle-clear--PaddingLeft);
18519
- margin-left: auto;
18803
+ .pf-c-select__menu-item.pf-m-description {
18804
+ white-space: normal;
18520
18805
  }
18521
18806
 
18522
- .pf-c-select__toggle .pf-c-select__toggle-button {
18523
- color: var(--pf-c-select__toggle-button--Color);
18807
+ .pf-c-select__menu-item.pf-m-description:not(.pf-c-check) {
18808
+ --pf-c-select__menu-item--PaddingRight: 0;
18524
18809
  }
18525
18810
 
18526
- .pf-c-select__toggle .pf-c-select__toggle-clear + .pf-c-select__toggle-button {
18527
- padding-left: var(--pf-c-select__toggle-clear--toggle-button--PaddingLeft);
18811
+ .pf-c-select__menu-item.pf-m-description .pf-c-check__label {
18812
+ white-space: nowrap;
18528
18813
  }
18529
18814
 
18530
- .pf-c-select__toggle.pf-m-placeholder {
18531
- --pf-c-select__toggle-text--Color: var(--pf-c-select__toggle--m-placeholder__toggle-text--Color);
18815
+ .pf-c-select__menu-wrapper.pf-m-disabled, .pf-c-select__menu-item:disabled, .pf-c-select__menu-item.pf-m-disabled {
18816
+ --pf-c-select__menu-item-count--Color: var(--pf-c-select__menu-item--disabled__menu-item-count--Color);
18817
+ color: var(--pf-c-select__menu-item--disabled--Color);
18818
+ pointer-events: none;
18819
+ background-color: var(--pf-c-select__menu-item--disabled--BackgroundColor);
18532
18820
  }
18533
18821
 
18534
- .pf-c-select__toggle-arrow {
18535
- color: var(--pf-c-select__toggle-arrow--Color, inherit);
18822
+ .pf-c-select__menu-item.pf-c-check .pf-c-check__label {
18823
+ width: 100%;
18536
18824
  }
18537
18825
 
18538
- * + .pf-c-select__toggle-arrow {
18539
- margin-right: var(--pf-c-select__toggle-arrow--MarginRight);
18540
- margin-left: var(--pf-c-select__toggle-arrow--MarginLeft);
18826
+ .pf-c-select__menu-item.pf-m-load {
18827
+ --pf-c-select__menu-item--hover--BackgroundColor: transparent;
18828
+ --pf-c-select__menu-item--focus--BackgroundColor: transparent;
18829
+ --pf-c-select__menu-item--Color: var(--pf-c-select__menu-item--m-load--Color);
18541
18830
  }
18542
18831
 
18543
- .pf-c-select.pf-m-top.pf-m-expanded .pf-c-select__toggle-arrow {
18544
- transform: rotate(var(--pf-c-select__toggle-arrow--m-top--m-expanded__toggle-arrow--Rotate));
18832
+ .pf-c-select__list-item.pf-m-loading {
18833
+ padding-top: var(--pf-c-select__list-item--m-loading--PaddingTop);
18834
+ text-align: center;
18545
18835
  }
18546
18836
 
18547
- .pf-c-select__toggle-text {
18548
- overflow: hidden;
18549
- text-overflow: ellipsis;
18837
+ .pf-c-select__menu-item-main {
18838
+ position: relative;
18839
+ display: block;
18840
+ padding-right: var(--pf-c-select__menu-item-main--PaddingRight);
18550
18841
  white-space: nowrap;
18551
- color: var(--pf-c-select__toggle-text--Color, inherit);
18552
18842
  }
18553
18843
 
18554
- .pf-c-select__toggle-wrapper {
18844
+ .pf-c-select__menu-item-row {
18555
18845
  display: flex;
18556
- flex: 1;
18557
- flex-wrap: wrap;
18558
- align-items: center;
18559
- justify-content: flex-start;
18560
- min-width: 0;
18561
- max-width: var(--pf-c-select__toggle-wrapper--MaxWidth);
18562
- white-space: normal;
18563
18846
  }
18564
18847
 
18565
- .pf-c-select__toggle-wrapper > :not(:last-child) {
18566
- margin-right: var(--pf-c-select__toggle-wrapper--not-last-child--MarginRight);
18848
+ .pf-c-select__menu-item-text {
18849
+ flex-grow: 1;
18567
18850
  }
18568
18851
 
18569
- .pf-c-select__toggle-wrapper > .pf-c-form-control {
18570
- margin-top: calc(-1 * var(--pf-c-select__toggle-wrapper--m-typeahead--PaddingTop));
18852
+ .pf-c-select__menu-item-count {
18853
+ align-self: center;
18854
+ margin-left: var(--pf-c-select__menu-item-count--MarginLeft);
18855
+ font-size: var(--pf-c-select__menu-item-count--FontSize);
18856
+ color: var(--pf-c-select__menu-item-count--Color);
18571
18857
  }
18572
18858
 
18573
- .pf-c-select__toggle-wrapper .pf-c-chip-group {
18574
- margin-top: var(--pf-c-select__toggle-wrapper--c-chip-group--MarginTop);
18575
- margin-bottom: var(--pf-c-select__toggle-wrapper--c-chip-group--MarginBottom);
18859
+ .pf-c-select__menu-item-description {
18860
+ display: block;
18861
+ padding-right: var(--pf-c-select__menu-item-description--PaddingRight);
18862
+ font-size: var(--pf-c-select__menu-item-description--FontSize);
18863
+ color: var(--pf-c-select__menu-item-description--Color);
18576
18864
  }
18577
18865
 
18578
- .pf-c-select__toggle-wrapper > .pf-c-select__toggle-typeahead:first-child {
18579
- margin-left: calc(-1 * var(--pf-c-select__toggle--PaddingLeft));
18866
+ .pf-c-select__menu-item-icon {
18867
+ position: absolute;
18868
+ top: var(--pf-c-select__menu-item-icon--Top);
18869
+ right: var(--pf-c-select__menu-item-icon--Right);
18870
+ font-size: var(--pf-c-select__menu-item-icon--FontSize);
18871
+ color: var(--pf-c-select__menu-item-icon--Color);
18872
+ transform: translateY(var(--pf-c-select__menu-item-icon--TranslateY));
18580
18873
  }
18581
18874
 
18582
- .pf-c-select__toggle-icon + .pf-c-select__toggle-text {
18583
- margin-left: var(--pf-c-select__toggle-icon--toggle-text--MarginLeft);
18875
+ .pf-c-select__menu-item-action-icon {
18876
+ display: flex;
18877
+ align-items: center;
18878
+ min-height: var(--pf-c-select__menu-item-action-icon--MinHeight);
18584
18879
  }
18585
18880
 
18586
- .pf-c-select__toggle-status-icon {
18587
- margin-left: var(--pf-c-select__toggle-status-icon--MarginLeft);
18588
- color: var(--pf-c-select__toggle-status-icon--Color);
18881
+ .pf-c-select__menu-item--match {
18882
+ font-weight: var(--pf-c-select__menu-item--match--FontWeight);
18883
+ background-color: inherit;
18589
18884
  }
18590
18885
 
18591
- .pf-c-select__toggle-badge {
18592
- display: flex;
18593
- padding-left: var(--pf-c-select__toggle-badge--PaddingLeft);
18886
+ .pf-c-select__menu-group + .pf-c-select__menu-group {
18887
+ padding-top: var(--pf-c-select__menu-group--menu-group--PaddingTop);
18594
18888
  }
18595
18889
 
18596
- .pf-c-select__toggle-typeahead {
18597
- flex-basis: var(--pf-c-select__toggle-typeahead--FlexBasis);
18598
- flex-grow: 1;
18599
- min-width: var(--pf-c-select__toggle-typeahead--MinWidth);
18600
- flex-shrink: 0;
18890
+ .pf-c-select__menu-search {
18891
+ padding: var(--pf-c-select__menu-search--PaddingTop) var(--pf-c-select__menu-search--PaddingRight) var(--pf-c-select__menu-search--PaddingBottom) var(--pf-c-select__menu-search--PaddingLeft);
18601
18892
  }
18602
18893
 
18603
- .pf-c-select__toggle-typeahead.pf-c-form-control {
18604
- background-color: var(--pf-c-select__toggle-typeahead--BackgroundColor);
18605
- border-top: var(--pf-c-select__toggle-typeahead--BorderTop);
18606
- border-right: var(--pf-c-select__toggle-typeahead--BorderRight);
18607
- border-bottom-color: transparent;
18608
- border-left: var(--pf-c-select__toggle-typeahead--BorderLeft);
18894
+ .pf-c-select__menu-group-title {
18895
+ padding-top: var(--pf-c-select__menu-group-title--PaddingTop);
18896
+ padding-right: var(--pf-c-select__menu-group-title--PaddingRight);
18897
+ padding-bottom: var(--pf-c-select__menu-group-title--PaddingBottom);
18898
+ padding-left: var(--pf-c-select__menu-group-title--PaddingLeft);
18899
+ font-size: var(--pf-c-select__menu-group-title--FontSize);
18900
+ font-weight: var(--pf-c-select__menu-group-title--FontWeight);
18901
+ color: var(--pf-c-select__menu-group-title--Color);
18609
18902
  }
18610
18903
 
18611
- .pf-c-select__toggle-typeahead.pf-c-form-control:focus {
18612
- padding-bottom: var(--pf-c-select__toggle-typeahead--focus--PaddingBottom);
18904
+ .pf-c-select__menu-footer {
18905
+ padding: var(--pf-c-select__menu-footer--PaddingTop) var(--pf-c-select__menu-footer--PaddingRight) var(--pf-c-select__menu-footer--PaddingBottom) var(--pf-c-select__menu-footer--PaddingLeft);
18906
+ margin-top: var(--pf-c-select__menu-footer--MarginTop);
18907
+ margin-bottom: var(--pf-c-select__menu-footer--MarginBottom);
18908
+ box-shadow: var(--pf-c-select__menu-footer--BoxShadow);
18613
18909
  }
18614
18910
 
18615
- .pf-c-select__menu {
18616
- position: absolute;
18617
- top: var(--pf-c-select__menu--Top);
18618
- z-index: var(--pf-c-select__menu--ZIndex);
18619
- width: var(--pf-c-select__menu--Width);
18620
- min-width: var(--pf-c-select__menu--MinWidth);
18621
- padding-top: var(--pf-c-select__menu--PaddingTop);
18622
- padding-bottom: var(--pf-c-select__menu--PaddingBottom);
18623
- background-color: var(--pf-c-select__menu--BackgroundColor);
18624
- background-clip: padding-box;
18625
- box-shadow: var(--pf-c-select__menu--BoxShadow);
18911
+ :where(.pf-theme-dark) .pf-c-select {
18912
+ --pf-c-select__toggle--disabled--BackgroundColor: var(--pf-global--palette--black-500);
18913
+ --pf-c-select__toggle--BackgroundColor: var(--pf-global--BackgroundColor--400);
18914
+ --pf-c-select__toggle--before--BorderTopColor: transparent;
18915
+ --pf-c-select__toggle--before--BorderRightColor: transparent;
18916
+ --pf-c-select__toggle--before--BorderBottomColor: var(--pf-global--BorderColor--400);
18917
+ --pf-c-select__toggle--before--BorderLeftColor: transparent;
18918
+ --pf-c-select__menu--Top: 100%;
18919
+ --pf-c-select__menu--m-top--TranslateY: -100%;
18920
+ --pf-c-select__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
18921
+ --pf-c-select__menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
18626
18922
  }
18627
18923
 
18628
- .pf-c-select__menu.pf-m-align-right {
18629
- right: 0;
18924
+ :where(.pf-theme-dark) .pf-c-select__toggle:disabled, :where(.pf-theme-dark) .pf-c-select__toggle.pf-m-disabled {
18925
+ color: var(--pf-global--palette--black-100);
18630
18926
  }
18631
18927
 
18632
- .pf-c-select.pf-m-top .pf-c-select__menu {
18633
- top: 0;
18634
- transform: translateY(var(--pf-c-select__menu--m-top--TranslateY));
18928
+ .pf-c-simple-list {
18929
+ --pf-c-simple-list__item-link--PaddingTop: var(--pf-global--spacer--xs);
18930
+ --pf-c-simple-list__item-link--PaddingRight: var(--pf-global--spacer--md);
18931
+ --pf-c-simple-list__item-link--PaddingBottom: var(--pf-global--spacer--xs);
18932
+ --pf-c-simple-list__item-link--PaddingLeft: var(--pf-global--spacer--md);
18933
+ --pf-c-simple-list__item-link--BackgroundColor: var(--pf-global--BackgroundColor--100);
18934
+ --pf-c-simple-list__item-link--Color: var(--pf-global--Color--100);
18935
+ --pf-c-simple-list__item-link--FontSize: var(--pf-global--FontSize--sm);
18936
+ --pf-c-simple-list__item-link--FontWeight: var(--pf-global--FontWeight--normal);
18937
+ --pf-c-simple-list__item-link--m-current--Color: var(--pf-global--link--Color);
18938
+ --pf-c-simple-list__item-link--m-current--BackgroundColor: var(--pf-global--BackgroundColor--200);
18939
+ --pf-c-simple-list__item-link--m-current--FontWeight: var(--pf-global--FontWeight--normal);
18940
+ --pf-c-simple-list__item-link--hover--Color: var(--pf-global--Color--100);
18941
+ --pf-c-simple-list__item-link--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
18942
+ --pf-c-simple-list__item-link--focus--Color: var(--pf-global--Color--100);
18943
+ --pf-c-simple-list__item-link--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
18944
+ --pf-c-simple-list__item-link--focus--FontWeight: var(--pf-global--FontWeight--normal);
18945
+ --pf-c-simple-list__item-link--active--Color: var(--pf-global--Color--100);
18946
+ --pf-c-simple-list__item-link--active--BackgroundColor: var(--pf-global--BackgroundColor--200);
18947
+ --pf-c-simple-list__item-link--active--FontWeight: var(--pf-global--FontWeight--normal);
18948
+ --pf-c-simple-list__title--PaddingTop: var(--pf-global--spacer--sm);
18949
+ --pf-c-simple-list__title--PaddingRight: var(--pf-global--spacer--md);
18950
+ --pf-c-simple-list__title--PaddingBottom: var(--pf-global--spacer--sm);
18951
+ --pf-c-simple-list__title--PaddingLeft: var(--pf-global--spacer--md);
18952
+ --pf-c-simple-list__title--FontSize: var(--pf-global--FontSize--sm);
18953
+ --pf-c-simple-list__title--Color: var(--pf-global--Color--dark-200);
18954
+ --pf-c-simple-list__title--FontWeight: var(--pf-global--FontWeight--semi-bold);
18955
+ --pf-c-simple-list__section--section--MarginTop: var(--pf-global--spacer--sm);
18635
18956
  }
18636
18957
 
18637
- .pf-c-select__menu.pf-m-static {
18638
- --pf-c-select__menu--m-top--TranslateY: 0;
18639
- position: static;
18640
- top: auto;
18641
- right: auto;
18642
- bottom: auto;
18643
- left: auto;
18644
- z-index: auto;
18645
- min-width: min-content;
18958
+ .pf-c-simple-list__item-link {
18959
+ display: block;
18960
+ width: 100%;
18961
+ padding: var(--pf-c-simple-list__item-link--PaddingTop) var(--pf-c-simple-list__item-link--PaddingRight) var(--pf-c-simple-list__item-link--PaddingBottom) var(--pf-c-simple-list__item-link--PaddingLeft);
18962
+ font-size: var(--pf-c-simple-list__item-link--FontSize);
18963
+ font-weight: var(--pf-c-simple-list__item-link--FontWeight);
18964
+ color: var(--pf-c-simple-list__item-link--Color);
18965
+ text-align: left;
18966
+ background-color: var(--pf-c-simple-list__item-link--BackgroundColor);
18967
+ border: none;
18646
18968
  }
18647
18969
 
18648
- .pf-c-select__menu-fieldset {
18649
- border: 0;
18970
+ .pf-c-simple-list__item-link:hover {
18971
+ text-decoration: none;
18972
+ --pf-c-simple-list__item-link--BackgroundColor: var(--pf-c-simple-list__item-link--hover--BackgroundColor);
18973
+ --pf-c-simple-list__item-link--Color: var(--pf-c-simple-list__item-link--hover--Color);
18650
18974
  }
18651
18975
 
18652
- .pf-c-select__menu-wrapper {
18653
- display: flex;
18976
+ .pf-c-simple-list__item-link:focus {
18977
+ --pf-c-simple-list__item-link--FontWeight: var(--pf-c-simple-list__item-link--focus--FontWeight);
18978
+ --pf-c-simple-list__item-link--BackgroundColor: var(--pf-c-simple-list__item-link--focus--BackgroundColor);
18979
+ --pf-c-simple-list__item-link--Color: var(--pf-c-simple-list__item-link--focus--Color);
18654
18980
  }
18655
18981
 
18656
- .pf-c-select__menu-wrapper.pf-m-favorite .pf-c-select__menu-item.pf-m-favorite-action {
18657
- --pf-c-select__menu-item--m-favorite-action--Color: var(--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--Color);
18658
- --pf-c-select__menu-item--m-favorite-action--hover--Color: var(--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--hover--Color);
18659
- --pf-c-select__menu-item--m-favorite-action--focus--Color: var(--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--focus--Color);
18982
+ .pf-c-simple-list__item-link:active {
18983
+ --pf-c-simple-list__item-link--FontWeight: var(--pf-c-simple-list__item-link--active--FontWeight);
18984
+ --pf-c-simple-list__item-link--BackgroundColor: var(--pf-c-simple-list__item-link--active--BackgroundColor);
18985
+ --pf-c-simple-list__item-link--Color: var(--pf-c-simple-list__item-link--active--Color);
18986
+ }
18987
+
18988
+ .pf-c-simple-list__item-link.pf-m-current {
18989
+ --pf-c-simple-list__item-link--FontWeight: var(--pf-c-simple-list__item-link--m-current--FontWeight);
18990
+ --pf-c-simple-list__item-link--BackgroundColor: var(--pf-c-simple-list__item-link--m-current--BackgroundColor);
18991
+ --pf-c-simple-list__item-link--Color: var(--pf-c-simple-list__item-link--m-current--Color);
18660
18992
  }
18661
18993
 
18662
- .pf-c-select__menu-item {
18663
- position: relative;
18664
- width: var(--pf-c-select__menu-item--Width);
18665
- padding: var(--pf-c-select__menu-item--PaddingTop) var(--pf-c-select__menu-item--PaddingRight) var(--pf-c-select__menu-item--PaddingBottom) var(--pf-c-select__menu-item--PaddingLeft);
18666
- font-size: var(--pf-c-select__menu-item--FontSize);
18667
- font-weight: var(--pf-c-select__menu-item--FontWeight);
18668
- line-height: var(--pf-c-select__menu-item--LineHeight);
18669
- color: var(--pf-c-select__menu-item--Color);
18670
- text-align: left;
18671
- white-space: nowrap;
18672
- background-color: transparent;
18673
- border: none;
18994
+ .pf-c-simple-list__title {
18995
+ padding: var(--pf-c-simple-list__title--PaddingTop) var(--pf-c-simple-list__title--PaddingRight) var(--pf-c-simple-list__title--PaddingBottom) var(--pf-c-simple-list__title--PaddingLeft);
18996
+ font-size: var(--pf-c-simple-list__title--FontSize);
18997
+ font-weight: var(--pf-c-simple-list__title--FontWeight);
18998
+ color: var(--pf-c-simple-list__title--Color);
18674
18999
  }
18675
19000
 
18676
- .pf-c-select__menu-item:hover, .pf-c-select__menu-item:focus, .pf-c-select__menu-item.pf-m-focus {
18677
- --pf-c-select__menu-item--m-action--Color: var(--pf-c-select__menu-item--hover__menu-item--m-action--Color);
18678
- text-decoration: none;
19001
+ .pf-c-simple-list__section + .pf-c-simple-list__section {
19002
+ margin-top: var(--pf-c-simple-list__section--section--MarginTop);
18679
19003
  }
18680
19004
 
18681
- .pf-c-select__menu-wrapper:hover, .pf-c-select__menu-item:hover {
18682
- background-color: var(--pf-c-select__menu-item--hover--BackgroundColor);
19005
+ :where(.pf-theme-dark) .pf-c-simple-list {
19006
+ --pf-c-simple-list__item-link--m-current--Color: var(--pf-global--active-color--100);
19007
+ --pf-c-simple-list__item-link--m-current--BackgroundColor: var(--pf-global--BackgroundColor--400);
19008
+ --pf-c-simple-list__item-link--hover--Color: var(--pf-global--Color--100);
19009
+ --pf-c-simple-list__item-link--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
19010
+ --pf-c-simple-list__item-link--focus--Color: var(--pf-global--Color--100);
19011
+ --pf-c-simple-list__item-link--focus--BackgroundColor: var(--pf-global--BackgroundColor--400);
19012
+ --pf-c-simple-list__item-link--active--Color: var(--pf-global--Color--100);
19013
+ --pf-c-simple-list__item-link--active--BackgroundColor: var(--pf-global--BackgroundColor--400);
18683
19014
  }
18684
19015
 
18685
- .pf-c-select__menu-wrapper:focus-within,
18686
- .pf-c-select__menu-wrapper.pf-m-focus, .pf-c-select__menu-item:focus, .pf-c-select__menu-item.pf-m-focus {
19016
+ .pf-c-skeleton {
19017
+ --pf-c-skeleton--BackgroundColor: var(--pf-global--palette--black-150);
19018
+ --pf-c-skeleton--Width: auto;
19019
+ --pf-c-skeleton--Height: auto;
19020
+ --pf-c-skeleton--BorderRadius: var(--pf-global--BorderRadius--sm);
19021
+ --pf-c-skeleton--before--PaddingBottom: 0;
19022
+ --pf-c-skeleton--before--Height: auto;
19023
+ --pf-c-skeleton--before--Content: " ";
19024
+ --pf-c-skeleton--after--LinearGradientAngle: 90deg;
19025
+ --pf-c-skeleton--after--LinearGradientColorStop1: var(--pf-global--palette--black-150);
19026
+ --pf-c-skeleton--after--LinearGradientColorStop2: #ededed;
19027
+ --pf-c-skeleton--after--LinearGradientColorStop3: var(--pf-global--palette--black-150);
19028
+ --pf-c-skeleton--after--TranslateX: -100%;
19029
+ --pf-c-skeleton--after--AnimationName: pf-c-skeleton-loading;
19030
+ --pf-c-skeleton--after--AnimationDuration: 2s;
19031
+ --pf-c-skeleton--after--AnimationIterationCount: infinite;
19032
+ --pf-c-skeleton--after--AnimationTimingFunction: linear;
19033
+ --pf-c-skeleton--after--AnimationDelay: .5s;
19034
+ --pf-c-skeleton--m-circle--BorderRadius: var(--pf-global--BorderRadius--lg);
19035
+ --pf-c-skeleton--m-circle--before--PaddingBottom: 100%;
19036
+ --pf-c-skeleton--m-text-4xl--Height: calc(var(--pf-global--FontSize--4xl) * var(--pf-global--LineHeight--sm));
19037
+ --pf-c-skeleton--m-text-3xl--Height: calc(var(--pf-global--FontSize--3xl) * var(--pf-global--LineHeight--sm));
19038
+ --pf-c-skeleton--m-text-2xl--Height: calc(var(--pf-global--FontSize--2xl) * var(--pf-global--LineHeight--sm));
19039
+ --pf-c-skeleton--m-text-xl--Height: calc(var(--pf-global--FontSize--xl) * var(--pf-global--LineHeight--sm));
19040
+ --pf-c-skeleton--m-text-lg--Height: calc(var(--pf-global--FontSize--lg) * var(--pf-global--LineHeight--md));
19041
+ --pf-c-skeleton--m-text-md--Height: calc(var(--pf-global--FontSize--md) * var(--pf-global--LineHeight--md));
19042
+ --pf-c-skeleton--m-text-sm--Height: calc(var(--pf-global--FontSize--sm) * var(--pf-global--LineHeight--md));
19043
+ --pf-c-skeleton--m-width-sm--Width: 6.25rem;
19044
+ --pf-c-skeleton--m-width-md--Width: 12.5rem;
19045
+ --pf-c-skeleton--m-width-lg--Width: 18.75rem;
19046
+ --pf-c-skeleton--m-width-25--Width: 25%;
19047
+ --pf-c-skeleton--m-width-33--Width: calc(100% / 3);
19048
+ --pf-c-skeleton--m-width-50--Width: 50%;
19049
+ --pf-c-skeleton--m-width-66--Width: calc(100% / 3 * 2);
19050
+ --pf-c-skeleton--m-width-75--Width: 75%;
19051
+ --pf-c-skeleton--m-height-sm--Height: 6.25rem;
19052
+ --pf-c-skeleton--m-height-md--Height: 12.5rem;
19053
+ --pf-c-skeleton--m-height-lg--Height: 18.75rem;
19054
+ --pf-c-skeleton--m-height-25--Height: 25%;
19055
+ --pf-c-skeleton--m-height-33--Height: calc(100% / 3);
19056
+ --pf-c-skeleton--m-height-50--Height: 50%;
19057
+ --pf-c-skeleton--m-height-66--Height: calc(100% / 3 * 2);
19058
+ --pf-c-skeleton--m-height-75--Height: 75%;
19059
+ --pf-c-skeleton--m-height-100--Height: 100%;
18687
19060
  position: relative;
18688
- background-color: var(--pf-c-select__menu-item--focus--BackgroundColor);
19061
+ width: var(--pf-c-skeleton--Width);
19062
+ height: var(--pf-c-skeleton--Height);
19063
+ overflow: hidden;
19064
+ background-color: var(--pf-c-skeleton--BackgroundColor);
19065
+ border-radius: var(--pf-c-skeleton--BorderRadius);
19066
+ transform: translate(0);
18689
19067
  }
18690
19068
 
18691
- .pf-c-select__menu-item.pf-m-link {
18692
- --pf-c-select__menu-item--PaddingRight: 0;
18693
- --pf-c-select__menu-item-main--PaddingRight: 0;
18694
- --pf-c-select__menu-item-description--PaddingRight: 0;
18695
- --pf-c-select__menu-item--Width: var(--pf-c-select__menu-item--m-link--Width);
18696
- --pf-c-select__menu-item--hover--BackgroundColor: var(--pf-c-select__menu-item--m-link--hover--BackgroundColor);
18697
- --pf-c-select__menu-item--focus--BackgroundColor: var(--pf-c-select__menu-item--m-link--focus--BackgroundColor);
18698
- flex-grow: 1;
19069
+ .pf-c-skeleton::before {
19070
+ display: block;
19071
+ height: var(--pf-c-skeleton--before--Height);
19072
+ padding-bottom: var(--pf-c-skeleton--before--PaddingBottom);
19073
+ content: var(--pf-c-skeleton--before--Content);
18699
19074
  }
18700
19075
 
18701
- .pf-c-select__menu-item.pf-m-action {
18702
- --pf-c-select__menu-item--Color: var(--pf-c-select__menu-item--m-action--Color);
18703
- --pf-c-select__menu-item--Width: var(--pf-c-select__menu-item--m-action--Width);
18704
- --pf-c-select__menu-item--hover--BackgroundColor: var(--pf-c-select__menu-item--m-action--hover--BackgroundColor);
18705
- --pf-c-select__menu-item--focus--BackgroundColor: var(--pf-c-select__menu-item--m-action--focus--BackgroundColor);
18706
- display: flex;
18707
- align-items: flex-start;
18708
- font-size: var(--pf-c-select__menu-item--m-action--FontSize);
19076
+ .pf-c-skeleton::after {
19077
+ position: absolute;
19078
+ top: 0;
19079
+ right: 0;
19080
+ bottom: 0;
19081
+ left: 0;
19082
+ display: block;
19083
+ content: "";
19084
+ background: linear-gradient(var(--pf-c-skeleton--after--LinearGradientAngle), var(--pf-c-skeleton--after--LinearGradientColorStop1), var(--pf-c-skeleton--after--LinearGradientColorStop2), var(--pf-c-skeleton--after--LinearGradientColorStop3));
19085
+ transform: translate3d(var(--pf-c-skeleton--after--TranslateX), 0, 0);
19086
+ animation: var(--pf-c-skeleton--after--AnimationName) var(--pf-c-skeleton--after--AnimationDuration) var(--pf-c-skeleton--after--AnimationTimingFunction) var(--pf-c-skeleton--after--AnimationDelay) var(--pf-c-skeleton--after--AnimationIterationCount);
18709
19087
  }
18710
19088
 
18711
- .pf-c-select__menu-item.pf-m-action:hover {
18712
- --pf-c-select__menu-item--m-action--Color: var(--pf-c-select__menu-item--m-action--hover--Color);
19089
+ .pf-c-skeleton.pf-m-circle {
19090
+ --pf-c-skeleton--BorderRadius: var(--pf-c-skeleton--m-circle--BorderRadius);
18713
19091
  }
18714
19092
 
18715
- .pf-c-select__menu-item.pf-m-action:focus {
18716
- --pf-c-select__menu-item--m-action--Color: var(--pf-c-select__menu-item--m-action--focus--Color);
19093
+ .pf-c-skeleton.pf-m-square, .pf-c-skeleton.pf-m-circle {
19094
+ --pf-c-skeleton--before--Height: 0;
19095
+ --pf-c-skeleton--before--PaddingBottom: var(--pf-c-skeleton--m-circle--before--PaddingBottom);
18717
19096
  }
18718
19097
 
18719
- .pf-c-select__menu-item.pf-m-action:disabled {
18720
- --pf-c-select__menu-item--disabled--Color: var(--pf-c-select__menu-item--m-action--disabled--Color);
19098
+ .pf-c-skeleton.pf-m-width-sm {
19099
+ --pf-c-skeleton--Width: var(--pf-c-skeleton--m-width-sm--Width);
18721
19100
  }
18722
19101
 
18723
- .pf-c-select__menu-item.pf-m-favorite-action {
18724
- --pf-c-select__menu-item--m-action--Color: var(--pf-c-select__menu-item--m-favorite-action--Color);
18725
- --pf-c-select__menu-item--m-action--hover--Color: var(--pf-c-select__menu-item--m-favorite-action--hover--Color);
18726
- --pf-c-select__menu-item--m-action--focus--Color: var(--pf-c-select__menu-item--m-favorite-action--focus--Color);
19102
+ .pf-c-skeleton.pf-m-width-md {
19103
+ --pf-c-skeleton--Width: var(--pf-c-skeleton--m-width-md--Width);
18727
19104
  }
18728
19105
 
18729
- .pf-c-select__menu-item.pf-m-selected {
18730
- --pf-c-select__menu-item--PaddingRight: var(--pf-c-select__menu-item--m-selected--PaddingRight);
18731
- --pf-c-select__menu-item-main--PaddingRight: var(--pf-c-select__menu-item--m-selected__menu-item-main--PaddingRight);
19106
+ .pf-c-skeleton.pf-m-width-lg {
19107
+ --pf-c-skeleton--Width: var(--pf-c-skeleton--m-width-lg--Width);
18732
19108
  }
18733
19109
 
18734
- .pf-c-select__menu-item.pf-m-description {
18735
- white-space: normal;
19110
+ .pf-c-skeleton.pf-m-width-25 {
19111
+ --pf-c-skeleton--Width: var(--pf-c-skeleton--m-width-25--Width);
18736
19112
  }
18737
19113
 
18738
- .pf-c-select__menu-item.pf-m-description:not(.pf-c-check) {
18739
- --pf-c-select__menu-item--PaddingRight: 0;
19114
+ .pf-c-skeleton.pf-m-width-33 {
19115
+ --pf-c-skeleton--Width: var(--pf-c-skeleton--m-width-33--Width);
18740
19116
  }
18741
19117
 
18742
- .pf-c-select__menu-item.pf-m-description .pf-c-check__label {
18743
- white-space: nowrap;
19118
+ .pf-c-skeleton.pf-m-width-50 {
19119
+ --pf-c-skeleton--Width: var(--pf-c-skeleton--m-width-50--Width);
18744
19120
  }
18745
19121
 
18746
- .pf-c-select__menu-wrapper.pf-m-disabled, .pf-c-select__menu-item:disabled, .pf-c-select__menu-item.pf-m-disabled {
18747
- --pf-c-select__menu-item-count--Color: var(--pf-c-select__menu-item--disabled__menu-item-count--Color);
18748
- color: var(--pf-c-select__menu-item--disabled--Color);
18749
- pointer-events: none;
18750
- background-color: var(--pf-c-select__menu-item--disabled--BackgroundColor);
19122
+ .pf-c-skeleton.pf-m-width-66 {
19123
+ --pf-c-skeleton--Width: var(--pf-c-skeleton--m-width-66--Width);
18751
19124
  }
18752
19125
 
18753
- .pf-c-select__menu-item.pf-c-check .pf-c-check__label {
18754
- width: 100%;
19126
+ .pf-c-skeleton.pf-m-width-75 {
19127
+ --pf-c-skeleton--Width: var(--pf-c-skeleton--m-width-75--Width);
18755
19128
  }
18756
19129
 
18757
- .pf-c-select__menu-item.pf-m-load {
18758
- --pf-c-select__menu-item--hover--BackgroundColor: transparent;
18759
- --pf-c-select__menu-item--focus--BackgroundColor: transparent;
18760
- --pf-c-select__menu-item--Color: var(--pf-c-select__menu-item--m-load--Color);
19130
+ .pf-c-skeleton.pf-m-height-sm {
19131
+ --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-sm--Height);
18761
19132
  }
18762
19133
 
18763
- .pf-c-select__list-item.pf-m-loading {
18764
- padding-top: var(--pf-c-select__list-item--m-loading--PaddingTop);
18765
- text-align: center;
19134
+ .pf-c-skeleton.pf-m-height-md {
19135
+ --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-md--Height);
18766
19136
  }
18767
19137
 
18768
- .pf-c-select__menu-item-main {
18769
- position: relative;
18770
- display: block;
18771
- padding-right: var(--pf-c-select__menu-item-main--PaddingRight);
18772
- white-space: nowrap;
19138
+ .pf-c-skeleton.pf-m-height-lg {
19139
+ --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-lg--Height);
18773
19140
  }
18774
19141
 
18775
- .pf-c-select__menu-item-row {
18776
- display: flex;
19142
+ .pf-c-skeleton.pf-m-height-25 {
19143
+ --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-25--Height);
18777
19144
  }
18778
19145
 
18779
- .pf-c-select__menu-item-text {
18780
- flex-grow: 1;
19146
+ .pf-c-skeleton.pf-m-height-33 {
19147
+ --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-33--Height);
18781
19148
  }
18782
19149
 
18783
- .pf-c-select__menu-item-count {
18784
- align-self: center;
18785
- margin-left: var(--pf-c-select__menu-item-count--MarginLeft);
18786
- font-size: var(--pf-c-select__menu-item-count--FontSize);
18787
- color: var(--pf-c-select__menu-item-count--Color);
19150
+ .pf-c-skeleton.pf-m-height-50 {
19151
+ --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-50--Height);
18788
19152
  }
18789
19153
 
18790
- .pf-c-select__menu-item-description {
18791
- display: block;
18792
- padding-right: var(--pf-c-select__menu-item-description--PaddingRight);
18793
- font-size: var(--pf-c-select__menu-item-description--FontSize);
18794
- color: var(--pf-c-select__menu-item-description--Color);
19154
+ .pf-c-skeleton.pf-m-height-66 {
19155
+ --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-66--Height);
18795
19156
  }
18796
19157
 
18797
- .pf-c-select__menu-item-icon {
18798
- position: absolute;
18799
- top: var(--pf-c-select__menu-item-icon--Top);
18800
- right: var(--pf-c-select__menu-item-icon--Right);
18801
- font-size: var(--pf-c-select__menu-item-icon--FontSize);
18802
- color: var(--pf-c-select__menu-item-icon--Color);
18803
- transform: translateY(var(--pf-c-select__menu-item-icon--TranslateY));
19158
+ .pf-c-skeleton.pf-m-height-75 {
19159
+ --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-75--Height);
18804
19160
  }
18805
19161
 
18806
- .pf-c-select__menu-item-action-icon {
18807
- display: flex;
18808
- align-items: center;
18809
- min-height: var(--pf-c-select__menu-item-action-icon--MinHeight);
19162
+ .pf-c-skeleton.pf-m-height-100 {
19163
+ --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-100--Height);
18810
19164
  }
18811
19165
 
18812
- .pf-c-select__menu-item--match {
18813
- font-weight: var(--pf-c-select__menu-item--match--FontWeight);
18814
- background-color: inherit;
19166
+ .pf-c-skeleton.pf-m-text-4xl {
19167
+ --pf-c-skeleton--Height: var(--pf-c-skeleton--m-text-4xl--Height);
18815
19168
  }
18816
19169
 
18817
- .pf-c-select__menu-group + .pf-c-select__menu-group {
18818
- padding-top: var(--pf-c-select__menu-group--menu-group--PaddingTop);
19170
+ .pf-c-skeleton.pf-m-text-3xl {
19171
+ --pf-c-skeleton--Height: var(--pf-c-skeleton--m-text-3xl--Height);
18819
19172
  }
18820
19173
 
18821
- .pf-c-select__menu-search {
18822
- padding: var(--pf-c-select__menu-search--PaddingTop) var(--pf-c-select__menu-search--PaddingRight) var(--pf-c-select__menu-search--PaddingBottom) var(--pf-c-select__menu-search--PaddingLeft);
19174
+ .pf-c-skeleton.pf-m-text-2xl {
19175
+ --pf-c-skeleton--Height: var(--pf-c-skeleton--m-text-2xl--Height);
18823
19176
  }
18824
19177
 
18825
- .pf-c-select__menu-group-title {
18826
- padding-top: var(--pf-c-select__menu-group-title--PaddingTop);
18827
- padding-right: var(--pf-c-select__menu-group-title--PaddingRight);
18828
- padding-bottom: var(--pf-c-select__menu-group-title--PaddingBottom);
18829
- padding-left: var(--pf-c-select__menu-group-title--PaddingLeft);
18830
- font-size: var(--pf-c-select__menu-group-title--FontSize);
18831
- font-weight: var(--pf-c-select__menu-group-title--FontWeight);
18832
- color: var(--pf-c-select__menu-group-title--Color);
19178
+ .pf-c-skeleton.pf-m-text-xl {
19179
+ --pf-c-skeleton--Height: var(--pf-c-skeleton--m-text-xl--Height);
18833
19180
  }
18834
19181
 
18835
- .pf-c-select__menu-footer {
18836
- padding: var(--pf-c-select__menu-footer--PaddingTop) var(--pf-c-select__menu-footer--PaddingRight) var(--pf-c-select__menu-footer--PaddingBottom) var(--pf-c-select__menu-footer--PaddingLeft);
18837
- margin-top: var(--pf-c-select__menu-footer--MarginTop);
18838
- margin-bottom: var(--pf-c-select__menu-footer--MarginBottom);
18839
- box-shadow: var(--pf-c-select__menu-footer--BoxShadow);
19182
+ .pf-c-skeleton.pf-m-text-lg {
19183
+ --pf-c-skeleton--Height: var(--pf-c-skeleton--m-text-lg--Height);
19184
+ }
19185
+
19186
+ .pf-c-skeleton.pf-m-text-md {
19187
+ --pf-c-skeleton--Height: var(--pf-c-skeleton--m-text-md--Height);
18840
19188
  }
18841
19189
 
18842
- :where(.pf-theme-dark) .pf-c-select {
18843
- --pf-c-select__toggle--disabled--BackgroundColor: var(--pf-global--palette--black-500);
18844
- --pf-c-select__toggle--BackgroundColor: var(--pf-global--BackgroundColor--400);
18845
- --pf-c-select__toggle--before--BorderTopColor: transparent;
18846
- --pf-c-select__toggle--before--BorderRightColor: transparent;
18847
- --pf-c-select__toggle--before--BorderBottomColor: var(--pf-global--BorderColor--400);
18848
- --pf-c-select__toggle--before--BorderLeftColor: transparent;
18849
- --pf-c-select__menu--Top: 100%;
18850
- --pf-c-select__menu--m-top--TranslateY: -100%;
18851
- --pf-c-select__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
18852
- --pf-c-select__menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
19190
+ .pf-c-skeleton.pf-m-text-sm {
19191
+ --pf-c-skeleton--Height: var(--pf-c-skeleton--m-text-sm--Height);
18853
19192
  }
18854
19193
 
18855
- :where(.pf-theme-dark) .pf-c-select__toggle:disabled, :where(.pf-theme-dark) .pf-c-select__toggle.pf-m-disabled {
18856
- color: var(--pf-global--palette--black-100);
19194
+ @keyframes pf-c-skeleton-loading {
19195
+ 0% {
19196
+ transform: translateX(-100%);
19197
+ }
19198
+ 60% {
19199
+ transform: translateX(100%);
19200
+ }
19201
+ 100% {
19202
+ transform: translateX(100%);
19203
+ }
19204
+ }
19205
+ :where(.pf-theme-dark) .pf-c-skeleton {
19206
+ --pf-c-skeleton--BackgroundColor: var(--pf-global--palette--black-600);
19207
+ --pf-c-skeleton--after--LinearGradientColorStop1: var(--pf-global--palette--black-600);
19208
+ --pf-c-skeleton--after--LinearGradientColorStop2: var(--pf-global--palette--black-500);
19209
+ --pf-c-skeleton--after--LinearGradientColorStop3: var(--pf-global--palette--black-600);
18857
19210
  }
18858
19211
 
18859
19212
  .pf-c-skip-to-content {
@@ -18986,304 +19339,108 @@ label.pf-c-radio, .pf-c-radio__label,
18986
19339
  }
18987
19340
 
18988
19341
  .pf-c-slider__step.pf-m-active {
18989
- --pf-c-slider__step-tick--BackgroundColor: var(--pf-c-slider__step--m-active__slider-tick--BackgroundColor);
18990
- }
18991
-
18992
- .pf-c-slider__step:first-child {
18993
- --pf-c-slider__step-tick--TranslateX: var(--pf-c-slider__step--first-child__step-tick--TranslateX);
18994
- --pf-c-slider__step-label--TranslateX: var(--pf-c-slider__step--first-child__step-label--TranslateX);
18995
- }
18996
-
18997
- .pf-c-slider__step:last-child {
18998
- --pf-c-slider__step-tick--TranslateX: var(--pf-c-slider__step--last-child__step-tick--TranslateX);
18999
- --pf-c-slider__step-label--TranslateX: var(--pf-c-slider__step--last-child__step-label--TranslateX);
19000
- }
19001
-
19002
- .pf-c-slider__step-tick {
19003
- position: absolute;
19004
- top: var(--pf-c-slider__step-tick--Top);
19005
- left: 0;
19006
- width: var(--pf-c-slider__step-tick--Width);
19007
- height: var(--pf-c-slider__step-tick--Height);
19008
- background-color: var(--pf-c-slider__step-tick--BackgroundColor);
19009
- border-radius: var(--pf-c-slider__step-tick--BorderRadius);
19010
- transform: translateX(var(--pf-c-slider__step-tick--TranslateX));
19011
- }
19012
-
19013
- .pf-c-slider__step-label {
19014
- position: absolute;
19015
- top: var(--pf-c-slider__step-label--Top);
19016
- word-break: normal;
19017
- transform: translateX(var(--pf-c-slider__step-label--TranslateX));
19018
- }
19019
-
19020
- .pf-c-slider__thumb {
19021
- position: absolute;
19022
- top: var(--pf-c-slider__thumb--Top);
19023
- left: var(--pf-c-slider__thumb--Left);
19024
- width: var(--pf-c-slider__thumb--Width);
19025
- height: var(--pf-c-slider__thumb--Height);
19026
- cursor: pointer;
19027
- background-color: var(--pf-c-slider__thumb--BackgroundColor);
19028
- border-radius: var(--pf-c-slider__thumb--BorderRadius);
19029
- box-shadow: var(--pf-c-slider__thumb--BoxShadow);
19030
- transform: translate(var(--pf-c-slider__thumb--TranslateX), var(--pf-c-slider__thumb--TranslateY));
19031
- }
19032
-
19033
- .pf-c-slider__thumb::before {
19034
- position: absolute;
19035
- top: 50%;
19036
- left: 50%;
19037
- width: var(--pf-c-slider__thumb--before--Width);
19038
- height: var(--pf-c-slider__thumb--before--Height);
19039
- content: "";
19040
- border-radius: var(--pf-c-slider__thumb--before--BorderRadius);
19041
- transform: translate(var(--pf-c-slider__thumb--before--TranslateX), var(--pf-c-slider__thumb--before--TranslateY));
19042
- }
19043
-
19044
- .pf-c-slider__thumb:hover {
19045
- --pf-c-slider__thumb--BoxShadow: var(--pf-c-slider__thumb--hover--BoxShadow);
19046
- }
19047
-
19048
- .pf-c-slider__thumb:focus {
19049
- --pf-c-slider__thumb--BoxShadow: var(--pf-c-slider__thumb--focus--BoxShadow);
19050
- outline: 0;
19051
- }
19052
-
19053
- .pf-c-slider__thumb:active {
19054
- --pf-c-slider__thumb--BoxShadow: var(--pf-c-slider__thumb--active--BoxShadow);
19055
- }
19056
-
19057
- .pf-c-slider__value {
19058
- margin-left: var(--pf-c-slider__value--MarginLeft);
19059
- }
19060
-
19061
- .pf-c-slider__value.pf-m-floating {
19062
- --pf-c-slider__value--MarginLeft: 0;
19063
- position: absolute;
19064
- top: 0;
19065
- left: var(--pf-c-slider__value--m-floating--Left);
19066
- z-index: var(--pf-c-slider__value--m-floating--ZIndex);
19067
- transform: translate(var(--pf-c-slider__value--m-floating--TranslateX), var(--pf-c-slider__value--m-floating--TranslateY));
19068
- }
19069
-
19070
- .pf-c-slider__value.pf-m-floating .pf-c-input-group {
19071
- align-items: center;
19072
- }
19073
-
19074
- .pf-c-slider__value.pf-m-floating .pf-c-input-group__text {
19075
- position: absolute;
19076
- left: 100%;
19077
- }
19078
-
19079
- .pf-c-slider__value .pf-c-form-control {
19080
- width: var(--pf-c-slider__value--c-form-control--Width);
19081
- }
19082
-
19083
- .pf-c-slider__actions {
19084
- display: flex;
19085
- margin-right: var(--pf-c-slider__actions--MarginRight);
19086
- }
19087
-
19088
- .pf-c-slider__main ~ .pf-c-slider__actions {
19089
- --pf-c-slider__actions--MarginRight: 0;
19090
- margin-left: var(--pf-c-slider__main--actions--MarginLeft);
19091
- }
19092
-
19093
- .pf-c-skeleton {
19094
- --pf-c-skeleton--BackgroundColor: var(--pf-global--palette--black-150);
19095
- --pf-c-skeleton--Width: auto;
19096
- --pf-c-skeleton--Height: auto;
19097
- --pf-c-skeleton--BorderRadius: var(--pf-global--BorderRadius--sm);
19098
- --pf-c-skeleton--before--PaddingBottom: 0;
19099
- --pf-c-skeleton--before--Height: auto;
19100
- --pf-c-skeleton--before--Content: " ";
19101
- --pf-c-skeleton--after--LinearGradientAngle: 90deg;
19102
- --pf-c-skeleton--after--LinearGradientColorStop1: var(--pf-global--palette--black-150);
19103
- --pf-c-skeleton--after--LinearGradientColorStop2: #ededed;
19104
- --pf-c-skeleton--after--LinearGradientColorStop3: var(--pf-global--palette--black-150);
19105
- --pf-c-skeleton--after--TranslateX: -100%;
19106
- --pf-c-skeleton--after--AnimationName: pf-c-skeleton-loading;
19107
- --pf-c-skeleton--after--AnimationDuration: 2s;
19108
- --pf-c-skeleton--after--AnimationIterationCount: infinite;
19109
- --pf-c-skeleton--after--AnimationTimingFunction: linear;
19110
- --pf-c-skeleton--after--AnimationDelay: .5s;
19111
- --pf-c-skeleton--m-circle--BorderRadius: var(--pf-global--BorderRadius--lg);
19112
- --pf-c-skeleton--m-circle--before--PaddingBottom: 100%;
19113
- --pf-c-skeleton--m-text-4xl--Height: calc(var(--pf-global--FontSize--4xl) * var(--pf-global--LineHeight--sm));
19114
- --pf-c-skeleton--m-text-3xl--Height: calc(var(--pf-global--FontSize--3xl) * var(--pf-global--LineHeight--sm));
19115
- --pf-c-skeleton--m-text-2xl--Height: calc(var(--pf-global--FontSize--2xl) * var(--pf-global--LineHeight--sm));
19116
- --pf-c-skeleton--m-text-xl--Height: calc(var(--pf-global--FontSize--xl) * var(--pf-global--LineHeight--sm));
19117
- --pf-c-skeleton--m-text-lg--Height: calc(var(--pf-global--FontSize--lg) * var(--pf-global--LineHeight--md));
19118
- --pf-c-skeleton--m-text-md--Height: calc(var(--pf-global--FontSize--md) * var(--pf-global--LineHeight--md));
19119
- --pf-c-skeleton--m-text-sm--Height: calc(var(--pf-global--FontSize--sm) * var(--pf-global--LineHeight--md));
19120
- --pf-c-skeleton--m-width-sm--Width: 6.25rem;
19121
- --pf-c-skeleton--m-width-md--Width: 12.5rem;
19122
- --pf-c-skeleton--m-width-lg--Width: 18.75rem;
19123
- --pf-c-skeleton--m-width-25--Width: 25%;
19124
- --pf-c-skeleton--m-width-33--Width: calc(100% / 3);
19125
- --pf-c-skeleton--m-width-50--Width: 50%;
19126
- --pf-c-skeleton--m-width-66--Width: calc(100% / 3 * 2);
19127
- --pf-c-skeleton--m-width-75--Width: 75%;
19128
- --pf-c-skeleton--m-height-sm--Height: 6.25rem;
19129
- --pf-c-skeleton--m-height-md--Height: 12.5rem;
19130
- --pf-c-skeleton--m-height-lg--Height: 18.75rem;
19131
- --pf-c-skeleton--m-height-25--Height: 25%;
19132
- --pf-c-skeleton--m-height-33--Height: calc(100% / 3);
19133
- --pf-c-skeleton--m-height-50--Height: 50%;
19134
- --pf-c-skeleton--m-height-66--Height: calc(100% / 3 * 2);
19135
- --pf-c-skeleton--m-height-75--Height: 75%;
19136
- --pf-c-skeleton--m-height-100--Height: 100%;
19137
- position: relative;
19138
- width: var(--pf-c-skeleton--Width);
19139
- height: var(--pf-c-skeleton--Height);
19140
- overflow: hidden;
19141
- background-color: var(--pf-c-skeleton--BackgroundColor);
19142
- border-radius: var(--pf-c-skeleton--BorderRadius);
19143
- transform: translate(0);
19144
- }
19145
-
19146
- .pf-c-skeleton::before {
19147
- display: block;
19148
- height: var(--pf-c-skeleton--before--Height);
19149
- padding-bottom: var(--pf-c-skeleton--before--PaddingBottom);
19150
- content: var(--pf-c-skeleton--before--Content);
19151
- }
19152
-
19153
- .pf-c-skeleton::after {
19154
- position: absolute;
19155
- top: 0;
19156
- right: 0;
19157
- bottom: 0;
19158
- left: 0;
19159
- display: block;
19160
- content: "";
19161
- background: linear-gradient(var(--pf-c-skeleton--after--LinearGradientAngle), var(--pf-c-skeleton--after--LinearGradientColorStop1), var(--pf-c-skeleton--after--LinearGradientColorStop2), var(--pf-c-skeleton--after--LinearGradientColorStop3));
19162
- transform: translate3d(var(--pf-c-skeleton--after--TranslateX), 0, 0);
19163
- animation: var(--pf-c-skeleton--after--AnimationName) var(--pf-c-skeleton--after--AnimationDuration) var(--pf-c-skeleton--after--AnimationTimingFunction) var(--pf-c-skeleton--after--AnimationDelay) var(--pf-c-skeleton--after--AnimationIterationCount);
19164
- }
19165
-
19166
- .pf-c-skeleton.pf-m-circle {
19167
- --pf-c-skeleton--BorderRadius: var(--pf-c-skeleton--m-circle--BorderRadius);
19168
- }
19169
-
19170
- .pf-c-skeleton.pf-m-square, .pf-c-skeleton.pf-m-circle {
19171
- --pf-c-skeleton--before--Height: 0;
19172
- --pf-c-skeleton--before--PaddingBottom: var(--pf-c-skeleton--m-circle--before--PaddingBottom);
19173
- }
19174
-
19175
- .pf-c-skeleton.pf-m-width-sm {
19176
- --pf-c-skeleton--Width: var(--pf-c-skeleton--m-width-sm--Width);
19177
- }
19178
-
19179
- .pf-c-skeleton.pf-m-width-md {
19180
- --pf-c-skeleton--Width: var(--pf-c-skeleton--m-width-md--Width);
19181
- }
19182
-
19183
- .pf-c-skeleton.pf-m-width-lg {
19184
- --pf-c-skeleton--Width: var(--pf-c-skeleton--m-width-lg--Width);
19185
- }
19186
-
19187
- .pf-c-skeleton.pf-m-width-25 {
19188
- --pf-c-skeleton--Width: var(--pf-c-skeleton--m-width-25--Width);
19189
- }
19190
-
19191
- .pf-c-skeleton.pf-m-width-33 {
19192
- --pf-c-skeleton--Width: var(--pf-c-skeleton--m-width-33--Width);
19193
- }
19194
-
19195
- .pf-c-skeleton.pf-m-width-50 {
19196
- --pf-c-skeleton--Width: var(--pf-c-skeleton--m-width-50--Width);
19197
- }
19198
-
19199
- .pf-c-skeleton.pf-m-width-66 {
19200
- --pf-c-skeleton--Width: var(--pf-c-skeleton--m-width-66--Width);
19201
- }
19202
-
19203
- .pf-c-skeleton.pf-m-width-75 {
19204
- --pf-c-skeleton--Width: var(--pf-c-skeleton--m-width-75--Width);
19205
- }
19206
-
19207
- .pf-c-skeleton.pf-m-height-sm {
19208
- --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-sm--Height);
19209
- }
19210
-
19211
- .pf-c-skeleton.pf-m-height-md {
19212
- --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-md--Height);
19342
+ --pf-c-slider__step-tick--BackgroundColor: var(--pf-c-slider__step--m-active__slider-tick--BackgroundColor);
19213
19343
  }
19214
19344
 
19215
- .pf-c-skeleton.pf-m-height-lg {
19216
- --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-lg--Height);
19345
+ .pf-c-slider__step:first-child {
19346
+ --pf-c-slider__step-tick--TranslateX: var(--pf-c-slider__step--first-child__step-tick--TranslateX);
19347
+ --pf-c-slider__step-label--TranslateX: var(--pf-c-slider__step--first-child__step-label--TranslateX);
19217
19348
  }
19218
19349
 
19219
- .pf-c-skeleton.pf-m-height-25 {
19220
- --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-25--Height);
19350
+ .pf-c-slider__step:last-child {
19351
+ --pf-c-slider__step-tick--TranslateX: var(--pf-c-slider__step--last-child__step-tick--TranslateX);
19352
+ --pf-c-slider__step-label--TranslateX: var(--pf-c-slider__step--last-child__step-label--TranslateX);
19221
19353
  }
19222
19354
 
19223
- .pf-c-skeleton.pf-m-height-33 {
19224
- --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-33--Height);
19355
+ .pf-c-slider__step-tick {
19356
+ position: absolute;
19357
+ top: var(--pf-c-slider__step-tick--Top);
19358
+ left: 0;
19359
+ width: var(--pf-c-slider__step-tick--Width);
19360
+ height: var(--pf-c-slider__step-tick--Height);
19361
+ background-color: var(--pf-c-slider__step-tick--BackgroundColor);
19362
+ border-radius: var(--pf-c-slider__step-tick--BorderRadius);
19363
+ transform: translateX(var(--pf-c-slider__step-tick--TranslateX));
19225
19364
  }
19226
19365
 
19227
- .pf-c-skeleton.pf-m-height-50 {
19228
- --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-50--Height);
19366
+ .pf-c-slider__step-label {
19367
+ position: absolute;
19368
+ top: var(--pf-c-slider__step-label--Top);
19369
+ word-break: normal;
19370
+ transform: translateX(var(--pf-c-slider__step-label--TranslateX));
19229
19371
  }
19230
19372
 
19231
- .pf-c-skeleton.pf-m-height-66 {
19232
- --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-66--Height);
19373
+ .pf-c-slider__thumb {
19374
+ position: absolute;
19375
+ top: var(--pf-c-slider__thumb--Top);
19376
+ left: var(--pf-c-slider__thumb--Left);
19377
+ width: var(--pf-c-slider__thumb--Width);
19378
+ height: var(--pf-c-slider__thumb--Height);
19379
+ cursor: pointer;
19380
+ background-color: var(--pf-c-slider__thumb--BackgroundColor);
19381
+ border-radius: var(--pf-c-slider__thumb--BorderRadius);
19382
+ box-shadow: var(--pf-c-slider__thumb--BoxShadow);
19383
+ transform: translate(var(--pf-c-slider__thumb--TranslateX), var(--pf-c-slider__thumb--TranslateY));
19233
19384
  }
19234
19385
 
19235
- .pf-c-skeleton.pf-m-height-75 {
19236
- --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-75--Height);
19386
+ .pf-c-slider__thumb::before {
19387
+ position: absolute;
19388
+ top: 50%;
19389
+ left: 50%;
19390
+ width: var(--pf-c-slider__thumb--before--Width);
19391
+ height: var(--pf-c-slider__thumb--before--Height);
19392
+ content: "";
19393
+ border-radius: var(--pf-c-slider__thumb--before--BorderRadius);
19394
+ transform: translate(var(--pf-c-slider__thumb--before--TranslateX), var(--pf-c-slider__thumb--before--TranslateY));
19237
19395
  }
19238
19396
 
19239
- .pf-c-skeleton.pf-m-height-100 {
19240
- --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-100--Height);
19397
+ .pf-c-slider__thumb:hover {
19398
+ --pf-c-slider__thumb--BoxShadow: var(--pf-c-slider__thumb--hover--BoxShadow);
19241
19399
  }
19242
19400
 
19243
- .pf-c-skeleton.pf-m-text-4xl {
19244
- --pf-c-skeleton--Height: var(--pf-c-skeleton--m-text-4xl--Height);
19401
+ .pf-c-slider__thumb:focus {
19402
+ --pf-c-slider__thumb--BoxShadow: var(--pf-c-slider__thumb--focus--BoxShadow);
19403
+ outline: 0;
19245
19404
  }
19246
19405
 
19247
- .pf-c-skeleton.pf-m-text-3xl {
19248
- --pf-c-skeleton--Height: var(--pf-c-skeleton--m-text-3xl--Height);
19406
+ .pf-c-slider__thumb:active {
19407
+ --pf-c-slider__thumb--BoxShadow: var(--pf-c-slider__thumb--active--BoxShadow);
19249
19408
  }
19250
19409
 
19251
- .pf-c-skeleton.pf-m-text-2xl {
19252
- --pf-c-skeleton--Height: var(--pf-c-skeleton--m-text-2xl--Height);
19410
+ .pf-c-slider__value {
19411
+ margin-left: var(--pf-c-slider__value--MarginLeft);
19253
19412
  }
19254
19413
 
19255
- .pf-c-skeleton.pf-m-text-xl {
19256
- --pf-c-skeleton--Height: var(--pf-c-skeleton--m-text-xl--Height);
19414
+ .pf-c-slider__value.pf-m-floating {
19415
+ --pf-c-slider__value--MarginLeft: 0;
19416
+ position: absolute;
19417
+ top: 0;
19418
+ left: var(--pf-c-slider__value--m-floating--Left);
19419
+ z-index: var(--pf-c-slider__value--m-floating--ZIndex);
19420
+ transform: translate(var(--pf-c-slider__value--m-floating--TranslateX), var(--pf-c-slider__value--m-floating--TranslateY));
19257
19421
  }
19258
19422
 
19259
- .pf-c-skeleton.pf-m-text-lg {
19260
- --pf-c-skeleton--Height: var(--pf-c-skeleton--m-text-lg--Height);
19423
+ .pf-c-slider__value.pf-m-floating .pf-c-input-group {
19424
+ align-items: center;
19261
19425
  }
19262
19426
 
19263
- .pf-c-skeleton.pf-m-text-md {
19264
- --pf-c-skeleton--Height: var(--pf-c-skeleton--m-text-md--Height);
19427
+ .pf-c-slider__value.pf-m-floating .pf-c-input-group__text {
19428
+ position: absolute;
19429
+ left: 100%;
19265
19430
  }
19266
19431
 
19267
- .pf-c-skeleton.pf-m-text-sm {
19268
- --pf-c-skeleton--Height: var(--pf-c-skeleton--m-text-sm--Height);
19432
+ .pf-c-slider__value .pf-c-form-control {
19433
+ width: var(--pf-c-slider__value--c-form-control--Width);
19269
19434
  }
19270
19435
 
19271
- @keyframes pf-c-skeleton-loading {
19272
- 0% {
19273
- transform: translateX(-100%);
19274
- }
19275
- 60% {
19276
- transform: translateX(100%);
19277
- }
19278
- 100% {
19279
- transform: translateX(100%);
19280
- }
19436
+ .pf-c-slider__actions {
19437
+ display: flex;
19438
+ margin-right: var(--pf-c-slider__actions--MarginRight);
19281
19439
  }
19282
- :where(.pf-theme-dark) .pf-c-skeleton {
19283
- --pf-c-skeleton--BackgroundColor: var(--pf-global--palette--black-600);
19284
- --pf-c-skeleton--after--LinearGradientColorStop1: var(--pf-global--palette--black-600);
19285
- --pf-c-skeleton--after--LinearGradientColorStop2: var(--pf-global--palette--black-500);
19286
- --pf-c-skeleton--after--LinearGradientColorStop3: var(--pf-global--palette--black-600);
19440
+
19441
+ .pf-c-slider__main ~ .pf-c-slider__actions {
19442
+ --pf-c-slider__actions--MarginRight: 0;
19443
+ margin-left: var(--pf-c-slider__main--actions--MarginLeft);
19287
19444
  }
19288
19445
 
19289
19446
  .pf-c-spinner {
@@ -19708,7 +19865,6 @@ svg.pf-c-spinner.pf-m-xl {
19708
19865
  --pf-c-tabs__list--Display: flex;
19709
19866
  --pf-c-tabs__list--Visibility: visible;
19710
19867
  --pf-c-tabs__item--m-action--before--ZIndex: var(--pf-global--ZIndex--xs);
19711
- --pf-c-tabs__item--m-action__link--PaddingRight: var(--pf-global--spacer--sm);
19712
19868
  --pf-c-tabs__link--Color: var(--pf-global--Color--200);
19713
19869
  --pf-c-tabs__link--FontSize: var(--pf-global--FontSize--md);
19714
19870
  --pf-c-tabs__link--BackgroundColor: transparent;
@@ -19725,8 +19881,9 @@ svg.pf-c-spinner.pf-m-xl {
19725
19881
  --pf-c-tabs--m-vertical__link--PaddingBottom: var(--pf-global--spacer--md);
19726
19882
  --pf-c-tabs--m-box__link--BackgroundColor: var(--pf-global--BackgroundColor--200);
19727
19883
  --pf-c-tabs--m-box__link--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
19728
- --pf-c-tabs--m-box__item-close--c-button--disabled--BackgroundColor: var(--pf-global--palette--black-400);
19884
+ --pf-c-tabs--m-box__item-action--c-button--disabled--BackgroundColor: var(--pf-global--palette--black-400);
19729
19885
  --pf-c-tabs--m-secondary__link--FontSize: var(--pf-global--FontSize--sm);
19886
+ --pf-c-tabs__item--m-action__link--PaddingRight: var(--pf-global--spacer--xs);
19730
19887
  --pf-c-tabs__link--before--border-color--base: var(--pf-global--BorderColor--100);
19731
19888
  --pf-c-tabs__link--before--border-width--base: var(--pf-global--BorderWidth--sm);
19732
19889
  --pf-c-tabs__link--before--BorderTopColor: var(--pf-c-tabs__link--before--border-color--base);
@@ -19790,13 +19947,16 @@ svg.pf-c-spinner.pf-m-xl {
19790
19947
  --pf-c-tabs__toggle-button--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
19791
19948
  --pf-c-tabs--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
19792
19949
  --pf-c-tabs--m-expanded__toggle-icon--Rotate: 90deg;
19793
- --pf-c-tabs__item-close--c-button--FontSize: var(--pf-global--FontSize--xs);
19794
- --pf-c-tabs--m-secondary__item-close--c-button--FontSize: var(--pf-global--icon--FontSize--sm);
19795
- --pf-c-tabs__item-close--c-button--PaddingTop: var(--pf-global--spacer--sm);
19796
- --pf-c-tabs__item-close--c-button--PaddingBottom: var(--pf-global--spacer--sm);
19797
- --pf-c-tabs__item-close--c-button--PaddingLeft: var(--pf-global--spacer--sm);
19798
- --pf-c-tabs__item-close--c-button--OutlineOffset: -0.1875rem;
19799
- --pf-c-tabs__item-close-icon--MarginTop: 0.125rem;
19950
+ --pf-c-tabs__item-action--c-button--FontSize: var(--pf-global--FontSize--xs);
19951
+ --pf-c-tabs--m-secondary__item-action--c-button--FontSize: var(--pf-global--icon--FontSize--sm);
19952
+ --pf-c-tabs__item-action--c-button--PaddingTop: var(--pf-global--spacer--sm);
19953
+ --pf-c-tabs__item-action--c-button--PaddingRight: var(--pf-global--spacer--sm);
19954
+ --pf-c-tabs__item-action--c-button--PaddingBottom: var(--pf-global--spacer--sm);
19955
+ --pf-c-tabs__item-action--c-button--PaddingLeft: var(--pf-global--spacer--sm);
19956
+ --pf-c-tabs__item-action--last-child--c-button--PaddingRight: var(--pf-global--spacer--md);
19957
+ --pf-c-tabs__item-action--c-button--OutlineOffset: -0.1875rem;
19958
+ --pf-c-tabs__item-action-icon--MarginTop: 0.125rem;
19959
+ --pf-c-tabs__item-action--m-help--c-button--PaddingLeft: var(--pf-global--spacer--xs);
19800
19960
  --pf-c-tabs__add--before--BorderColor: var(--pf-c-tabs__link--before--border-color--base);
19801
19961
  --pf-c-tabs__add--before--BorderLeftWidth: var(--pf-c-tabs__link--before--border-width--base);
19802
19962
  --pf-c-tabs__add--c-button--FontSize: var(--pf-global--FontSize--sm);
@@ -19934,8 +20094,8 @@ svg.pf-c-spinner.pf-m-xl {
19934
20094
  --pf-c-tabs__link--disabled--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor);
19935
20095
  }
19936
20096
 
19937
- .pf-c-tabs.pf-m-box .pf-c-tabs__item-close .pf-c-button {
19938
- --pf-c-button--m-plain--disabled--Color: var(--pf-c-tabs--m-box__item-close--c-button--disabled--BackgroundColor);
20097
+ .pf-c-tabs.pf-m-box .pf-c-tabs__item-action .pf-c-button {
20098
+ --pf-c-button--m-plain--disabled--Color: var(--pf-c-tabs--m-box__item-action--c-button--disabled--BackgroundColor);
19939
20099
  }
19940
20100
 
19941
20101
  .pf-c-tabs.pf-m-vertical {
@@ -20133,7 +20293,7 @@ svg.pf-c-spinner.pf-m-xl {
20133
20293
 
20134
20294
  .pf-c-tabs.pf-m-secondary {
20135
20295
  --pf-c-tabs__link--FontSize: var(--pf-c-tabs--m-secondary__link--FontSize);
20136
- --pf-c-tabs__item-close--c-button--FontSize: var(--pf-c-tabs--m-secondary__item-close--c-button--FontSize);
20296
+ --pf-c-tabs__item-action--c-button--FontSize: var(--pf-c-tabs--m-secondary__item-action--c-button--FontSize);
20137
20297
  --pf-c-tabs__add--c-button--FontSize: var(--pf-c-tabs--m-secondary__add--c-button--FontSize);
20138
20298
  }
20139
20299
 
@@ -20353,21 +20513,30 @@ svg.pf-c-spinner.pf-m-xl {
20353
20513
  transform: rotate(var(--pf-c-tabs__link-toggle-icon--Rotate));
20354
20514
  }
20355
20515
 
20356
- .pf-c-tabs__item-close {
20516
+ .pf-c-tabs__item-action {
20357
20517
  display: flex;
20358
20518
  }
20359
20519
 
20360
- .pf-c-tabs__item-close .pf-c-button {
20361
- --pf-c-button--FontSize: var(--pf-c-tabs__item-close--c-button--FontSize);
20362
- --pf-c-button--PaddingTop: var(--pf-c-tabs__item-close--c-button--PaddingTop);
20363
- --pf-c-button--PaddingBottom: var(--pf-c-tabs__item-close--c-button--PaddingBottom);
20364
- --pf-c-button--PaddingLeft: var(--pf-c-tabs__item-close--c-button--PaddingLeft);
20365
- outline-offset: var(--pf-c-tabs__item-close--c-button--OutlineOffset);
20520
+ .pf-c-tabs__item-action .pf-c-button {
20521
+ --pf-c-button--FontSize: var(--pf-c-tabs__item-action--c-button--FontSize);
20522
+ --pf-c-button--PaddingTop: var(--pf-c-tabs__item-action--c-button--PaddingTop);
20523
+ --pf-c-button--PaddingRight: var(--pf-c-tabs__item-action--c-button--PaddingRight);
20524
+ --pf-c-button--PaddingBottom: var(--pf-c-tabs__item-action--c-button--PaddingBottom);
20525
+ --pf-c-button--PaddingLeft: var(--pf-c-tabs__item-action--c-button--PaddingLeft);
20526
+ outline-offset: var(--pf-c-tabs__item-action--c-button--OutlineOffset);
20527
+ }
20528
+
20529
+ .pf-c-tabs__item-action.pf-m-help {
20530
+ --pf-c-tabs__item-action--c-button--PaddingLeft: var(--pf-c-tabs__item-action--m-help--c-button--PaddingLeft);
20366
20531
  }
20367
20532
 
20368
- .pf-c-tabs__item-close-icon {
20533
+ .pf-c-tabs__item-action:last-child {
20534
+ --pf-c-tabs__item-action--c-button--PaddingRight: var(--pf-c-tabs__item-action--last-child--c-button--PaddingRight);
20535
+ }
20536
+
20537
+ .pf-c-tabs__item-action-icon {
20369
20538
  display: inline-block;
20370
- margin-top: var(--pf-c-tabs__item-close-icon--MarginTop);
20539
+ margin-top: var(--pf-c-tabs__item-action-icon--MarginTop);
20371
20540
  }
20372
20541
 
20373
20542
  .pf-c-tabs__scroll-button {
@@ -26404,75 +26573,6 @@ label.pf-c-tree-view__node-text {
26404
26573
  --pf-l-flex--spacer: var(--pf-l-flex--spacer--4xl);
26405
26574
  }
26406
26575
  }
26407
- .pf-l-gallery {
26408
- --pf-l-gallery--m-gutter--GridGap: var(--pf-global--gutter);
26409
- --pf-l-gallery--GridTemplateColumns--min: 250px;
26410
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
26411
- --pf-l-gallery--GridTemplateColumns--max: 1fr;
26412
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
26413
- --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
26414
- --pf-l-gallery--GridTemplateRows: auto;
26415
- display: grid;
26416
- grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
26417
- grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
26418
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
26419
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
26420
- }
26421
-
26422
- .pf-l-gallery.pf-m-gutter {
26423
- grid-gap: var(--pf-l-gallery--m-gutter--GridGap);
26424
- }
26425
-
26426
- @media (min-width: 576px) {
26427
- .pf-l-gallery {
26428
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min));
26429
- }
26430
- }
26431
- @media (min-width: 768px) {
26432
- .pf-l-gallery {
26433
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)));
26434
- }
26435
- }
26436
- @media (min-width: 992px) {
26437
- .pf-l-gallery {
26438
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))));
26439
- }
26440
- }
26441
- @media (min-width: 1200px) {
26442
- .pf-l-gallery {
26443
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)))));
26444
- }
26445
- }
26446
- @media (min-width: 1450px) {
26447
- .pf-l-gallery {
26448
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))))));
26449
- }
26450
- }
26451
- @media (min-width: 576px) {
26452
- .pf-l-gallery {
26453
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max));
26454
- }
26455
- }
26456
- @media (min-width: 768px) {
26457
- .pf-l-gallery {
26458
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)));
26459
- }
26460
- }
26461
- @media (min-width: 992px) {
26462
- .pf-l-gallery {
26463
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))));
26464
- }
26465
- }
26466
- @media (min-width: 1200px) {
26467
- .pf-l-gallery {
26468
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)))));
26469
- }
26470
- }
26471
- @media (min-width: 1450px) {
26472
- .pf-l-gallery {
26473
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))))));
26474
- }
26475
- }
26476
26576
  .pf-l-grid {
26477
26577
  --pf-l-grid--m-gutter--GridGap: var(--pf-global--gutter);
26478
26578
  --pf-l-grid__item--GridColumnStart: auto;
@@ -27687,6 +27787,75 @@ label.pf-c-tree-view__node-text {
27687
27787
  grid-gap: var(--pf-l-grid--m-gutter--GridGap);
27688
27788
  }
27689
27789
 
27790
+ .pf-l-gallery {
27791
+ --pf-l-gallery--m-gutter--GridGap: var(--pf-global--gutter);
27792
+ --pf-l-gallery--GridTemplateColumns--min: 250px;
27793
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
27794
+ --pf-l-gallery--GridTemplateColumns--max: 1fr;
27795
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
27796
+ --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
27797
+ --pf-l-gallery--GridTemplateRows: auto;
27798
+ display: grid;
27799
+ grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
27800
+ grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
27801
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
27802
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
27803
+ }
27804
+
27805
+ .pf-l-gallery.pf-m-gutter {
27806
+ grid-gap: var(--pf-l-gallery--m-gutter--GridGap);
27807
+ }
27808
+
27809
+ @media (min-width: 576px) {
27810
+ .pf-l-gallery {
27811
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min));
27812
+ }
27813
+ }
27814
+ @media (min-width: 768px) {
27815
+ .pf-l-gallery {
27816
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)));
27817
+ }
27818
+ }
27819
+ @media (min-width: 992px) {
27820
+ .pf-l-gallery {
27821
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))));
27822
+ }
27823
+ }
27824
+ @media (min-width: 1200px) {
27825
+ .pf-l-gallery {
27826
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)))));
27827
+ }
27828
+ }
27829
+ @media (min-width: 1450px) {
27830
+ .pf-l-gallery {
27831
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))))));
27832
+ }
27833
+ }
27834
+ @media (min-width: 576px) {
27835
+ .pf-l-gallery {
27836
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max));
27837
+ }
27838
+ }
27839
+ @media (min-width: 768px) {
27840
+ .pf-l-gallery {
27841
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)));
27842
+ }
27843
+ }
27844
+ @media (min-width: 992px) {
27845
+ .pf-l-gallery {
27846
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))));
27847
+ }
27848
+ }
27849
+ @media (min-width: 1200px) {
27850
+ .pf-l-gallery {
27851
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)))));
27852
+ }
27853
+ }
27854
+ @media (min-width: 1450px) {
27855
+ .pf-l-gallery {
27856
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))))));
27857
+ }
27858
+ }
27690
27859
  .pf-l-level {
27691
27860
  --pf-l-level--m-gutter--MarginRight: var(--pf-global--gutter);
27692
27861
  display: flex;