@patternfly/react-core 4.261.0 → 4.262.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 (7) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/umd/react-core.min.css +1044 -1044
  3. package/package.json +2 -2
  4. package/src/components/Menu/examples/Menu.md +2 -2
  5. package/src/components/Menu/examples/{MenuFilteringWithTextInput.tsx → MenuFilteringWithSearchInput.tsx} +3 -4
  6. package/src/demos/ComposableMenu/examples/ComposableApplicationLauncher.tsx +2 -7
  7. package/src/demos/ComposableMenu/examples/ComposableContextSelector.tsx +3 -3
package/dist/umd/react-core.min.css CHANGED
@@ -9697,327 +9697,6 @@ 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
-
10021
9700
  .pf-c-sidebar {
10022
9701
  --pf-c-sidebar--BackgroundColor: var(--pf-global--BackgroundColor--100);
10023
9702
  --pf-c-sidebar__main--FlexDirection: column;
@@ -10221,126 +9900,447 @@ label.pf-c-input-group__text {
10221
9900
  --pf-c-sidebar__panel--FlexBasis: 75%;
10222
9901
  }
10223
9902
 
10224
- .pf-c-sidebar__panel.pf-m-width-100-on-sm {
10225
- --pf-c-sidebar__panel--FlexBasis: 100%;
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;
10084
+ }
10085
+
10086
+ .pf-c-jump-links.pf-m-center {
10087
+ justify-content: center;
10088
+ }
10089
+
10090
+ .pf-c-jump-links.pf-m-center .pf-c-jump-links__main {
10091
+ align-items: center;
10092
+ }
10093
+
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;
10105
+ }
10106
+
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;
10114
+ }
10115
+
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;
10123
+ }
10124
+
10125
+ @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;
10133
+ }
10134
+
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;
10226
10142
  }
10227
10143
  }
10228
10144
  @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);
10231
- }
10232
-
10233
- .pf-c-sidebar__panel.pf-m-width-25-on-md {
10234
- --pf-c-sidebar__panel--FlexBasis: 25%;
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;
10235
10152
  }
10236
10153
 
10237
- .pf-c-sidebar__panel.pf-m-width-33-on-md {
10238
- --pf-c-sidebar__panel--FlexBasis: 33%;
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;
10239
10161
  }
10240
-
10241
- .pf-c-sidebar__panel.pf-m-width-50-on-md {
10242
- --pf-c-sidebar__panel--FlexBasis: 50%;
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;
10243
10171
  }
10244
10172
 
10245
- .pf-c-sidebar__panel.pf-m-width-66-on-md {
10246
- --pf-c-sidebar__panel--FlexBasis: 66%;
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;
10247
10180
  }
10248
-
10249
- .pf-c-sidebar__panel.pf-m-width-75-on-md {
10250
- --pf-c-sidebar__panel--FlexBasis: 75%;
10181
+ }
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;
10251
10190
  }
10252
10191
 
10253
- .pf-c-sidebar__panel.pf-m-width-100-on-md {
10254
- --pf-c-sidebar__panel--FlexBasis: 100%;
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;
10255
10199
  }
10256
10200
  }
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
- }
10261
-
10262
- .pf-c-sidebar__panel.pf-m-width-25-on-lg {
10263
- --pf-c-sidebar__panel--FlexBasis: 25%;
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;
10264
10209
  }
10265
10210
 
10266
- .pf-c-sidebar__panel.pf-m-width-33-on-lg {
10267
- --pf-c-sidebar__panel--FlexBasis: 33%;
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;
10268
10218
  }
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
+ }
10269
10227
 
10270
- .pf-c-sidebar__panel.pf-m-width-50-on-lg {
10271
- --pf-c-sidebar__panel--FlexBasis: 50%;
10272
- }
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
+ }
10273
10238
 
10274
- .pf-c-sidebar__panel.pf-m-width-66-on-lg {
10275
- --pf-c-sidebar__panel--FlexBasis: 66%;
10276
- }
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
+ }
10277
10250
 
10278
- .pf-c-sidebar__panel.pf-m-width-75-on-lg {
10279
- --pf-c-sidebar__panel--FlexBasis: 75%;
10280
- }
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);
10258
+ }
10281
10259
 
10282
- .pf-c-sidebar__panel.pf-m-width-100-on-lg {
10283
- --pf-c-sidebar__panel--FlexBasis: 100%;
10284
- }
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);
10285
10270
  }
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
- }
10290
10271
 
10291
- .pf-c-sidebar__panel.pf-m-width-25-on-xl {
10292
- --pf-c-sidebar__panel--FlexBasis: 25%;
10293
- }
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
+ }
10294
10275
 
10295
- .pf-c-sidebar__panel.pf-m-width-33-on-xl {
10296
- --pf-c-sidebar__panel--FlexBasis: 33%;
10297
- }
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
+ }
10298
10279
 
10299
- .pf-c-sidebar__panel.pf-m-width-50-on-xl {
10300
- --pf-c-sidebar__panel--FlexBasis: 50%;
10301
- }
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
+ }
10302
10292
 
10303
- .pf-c-sidebar__panel.pf-m-width-66-on-xl {
10304
- --pf-c-sidebar__panel--FlexBasis: 66%;
10305
- }
10293
+ .pf-c-jump-links__item {
10294
+ --pf-c-jump-links__list--before--BorderColor: transparent;
10295
+ }
10306
10296
 
10307
- .pf-c-sidebar__panel.pf-m-width-75-on-xl {
10308
- --pf-c-sidebar__panel--FlexBasis: 75%;
10309
- }
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
+ }
10310
10303
 
10311
- .pf-c-sidebar__panel.pf-m-width-100-on-xl {
10312
- --pf-c-sidebar__panel--FlexBasis: 100%;
10313
- }
10304
+ .pf-c-jump-links__link-text {
10305
+ color: var(--pf-c-jump-links__link-text--Color);
10314
10306
  }
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
- }
10319
10307
 
10320
- .pf-c-sidebar__panel.pf-m-width-25-on-2xl {
10321
- --pf-c-sidebar__panel--FlexBasis: 25%;
10322
- }
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
+ }
10323
10313
 
10324
- .pf-c-sidebar__panel.pf-m-width-33-on-2xl {
10325
- --pf-c-sidebar__panel--FlexBasis: 33%;
10326
- }
10314
+ .pf-c-jump-links__main {
10315
+ display: flex;
10316
+ flex-direction: column;
10317
+ }
10327
10318
 
10328
- .pf-c-sidebar__panel.pf-m-width-50-on-2xl {
10329
- --pf-c-sidebar__panel--FlexBasis: 50%;
10330
- }
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
+ }
10331
10326
 
10332
- .pf-c-sidebar__panel.pf-m-width-66-on-2xl {
10333
- --pf-c-sidebar__panel--FlexBasis: 66%;
10334
- }
10327
+ .pf-c-jump-links__toggle .pf-c-button {
10328
+ display: flex;
10329
+ align-items: center;
10330
+ }
10335
10331
 
10336
- .pf-c-sidebar__panel.pf-m-width-75-on-2xl {
10337
- --pf-c-sidebar__panel--FlexBasis: 75%;
10338
- }
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
+ }
10339
10338
 
10340
- .pf-c-sidebar__panel.pf-m-width-100-on-2xl {
10341
- --pf-c-sidebar__panel--FlexBasis: 100%;
10342
- }
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);
10343
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);
@@ -18123,6 +18123,94 @@ label.pf-c-radio, .pf-c-radio__label,
18123
18123
  cursor: not-allowed;
18124
18124
  }
18125
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);
18190
+ }
18191
+
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);
18197
+ }
18198
+
18199
+ .pf-c-simple-list__section + .pf-c-simple-list__section {
18200
+ margin-top: var(--pf-c-simple-list__section--section--MarginTop);
18201
+ }
18202
+
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);
18212
+ }
18213
+
18126
18214
  .pf-c-select {
18127
18215
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
18128
18216
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
@@ -18257,799 +18345,515 @@ label.pf-c-radio, .pf-c-radio__label,
18257
18345
  --pf-c-select__menu-item-icon--Color: var(--pf-global--active-color--100);
18258
18346
  --pf-c-select__menu-item-icon--FontSize: var(--pf-global--icon--FontSize--sm);
18259
18347
  --pf-c-select__menu-item-icon--Right: var(--pf-global--spacer--md);
18260
- --pf-c-select__menu-item-icon--Top: 50%;
18261
- --pf-c-select__menu-item-icon--TranslateY: -50%;
18262
- --pf-c-select__menu-item-action-icon--MinHeight: calc(var(--pf-c-select__menu-item--FontSize) * var(--pf-c-select__menu-item--LineHeight));
18263
- --pf-c-select__menu-item--match--FontWeight: var(--pf-global--FontWeight--bold);
18264
- --pf-c-select__menu-search--PaddingTop: var(--pf-global--spacer--sm);
18265
- --pf-c-select__menu-search--PaddingRight: var(--pf-c-select__menu-item--PaddingRight);
18266
- --pf-c-select__menu-search--PaddingBottom: var(--pf-global--spacer--md);
18267
- --pf-c-select__menu-search--PaddingLeft: var(--pf-c-select__menu-item--PaddingLeft);
18268
- --pf-c-select__menu-group--menu-group--PaddingTop: var(--pf-global--spacer--sm);
18269
- --pf-c-select__menu-group-title--PaddingTop: var(--pf-c-select__menu-item--PaddingTop);
18270
- --pf-c-select__menu-group-title--PaddingRight: var(--pf-c-select__menu-item--PaddingRight);
18271
- --pf-c-select__menu-group-title--PaddingBottom: var(--pf-c-select__menu-item--PaddingBottom);
18272
- --pf-c-select__menu-group-title--PaddingLeft: var(--pf-c-select__menu-item--PaddingLeft);
18273
- --pf-c-select__menu-group-title--FontSize: var(--pf-global--FontSize--xs);
18274
- --pf-c-select__menu-group-title--FontWeight: var(--pf-global--FontWeight--normal);
18275
- --pf-c-select__menu-group-title--Color: var(--pf-global--Color--dark-200);
18276
- --pf-c-select__menu-item-count--MarginLeft: var(--pf-global--spacer--md);
18277
- --pf-c-select__menu-item-count--FontSize: var(--pf-global--FontSize--sm);
18278
- --pf-c-select__menu-item-count--Color: var(--pf-global--Color--200);
18279
- --pf-c-select__menu-item--disabled__menu-item-count--Color: var(--pf-global--Color--dark-200);
18280
- --pf-c-select__menu-item-description--FontSize: var(--pf-global--FontSize--xs);
18281
- --pf-c-select__menu-item-description--Color: var(--pf-global--Color--200);
18282
- --pf-c-select__menu-item-description--PaddingRight: var(--pf-c-select__menu-item--PaddingRight);
18283
- --pf-c-select__menu-item-main--PaddingRight: var(--pf-c-select__menu-item--PaddingRight);
18284
- --pf-c-select__menu-item--m-selected__menu-item-main--PaddingRight: var(--pf-c-select__menu-item--m-selected--PaddingRight);
18285
- --pf-c-select__menu-footer--BoxShadow: var(--pf-global--BoxShadow--sm-top);
18286
- --pf-c-select__menu-footer--PaddingTop: var(--pf-global--spacer--md);
18287
- --pf-c-select__menu-footer--PaddingRight: var(--pf-global--spacer--md);
18288
- --pf-c-select__menu-footer--PaddingBottom: var(--pf-global--spacer--md);
18289
- --pf-c-select__menu-footer--PaddingLeft: var(--pf-global--spacer--md);
18290
- --pf-c-select__menu-footer--MarginTop: var(--pf-global--spacer--sm);
18291
- --pf-c-select__menu-footer--MarginBottom: calc(var(--pf-global--spacer--sm) * -1);
18292
- --pf-c-select-menu--c-divider--MarginTop: var(--pf-global--spacer--sm);
18293
- --pf-c-select-menu--c-divider--MarginBottom: var(--pf-global--spacer--sm);
18294
- position: relative;
18295
- display: inline-block;
18296
- width: 100%;
18297
- }
18298
-
18299
- .pf-c-select .pf-c-divider {
18300
- margin-top: var(--pf-c-select-menu--c-divider--MarginTop);
18301
- margin-bottom: var(--pf-c-select-menu--c-divider--MarginBottom);
18302
- }
18303
-
18304
- .pf-c-select .pf-c-divider:last-child {
18305
- --pf-c-select-menu--c-divider--MarginBottom: 0;
18306
- }
18307
-
18308
- .pf-c-select.pf-m-invalid {
18309
- --pf-c-select__toggle--before--BorderBottomColor: var(--pf-c-select--m-invalid__toggle--before--BorderBottomColor);
18310
- --pf-c-select__toggle--before--BorderBottomWidth: var(--pf-c-select--m-invalid__toggle--before--BorderBottomWidth);
18311
- --pf-c-select__toggle--hover--before--BorderBottomColor: var(--pf-c-select--m-invalid__toggle--hover--before--BorderBottomColor);
18312
- --pf-c-select__toggle--focus--before--BorderBottomColor: var(--pf-c-select--m-invalid__toggle--focus--before--BorderBottomColor);
18313
- --pf-c-select__toggle--active--before--BorderBottomColor: var(--pf-c-select--m-invalid__toggle--active--before--BorderBottomColor);
18314
- --pf-c-select__toggle--m-expanded--before--BorderBottomColor: var(--pf-c-select--m-invalid__toggle--m-expanded--before--BorderBottomColor);
18315
- --pf-c-select__toggle-status-icon--Color: var(--pf-c-select--m-invalid__toggle-status-icon--Color);
18316
- }
18317
-
18318
- .pf-c-select.pf-m-success {
18319
- --pf-c-select__toggle--before--BorderBottomColor: var(--pf-c-select--m-success__toggle--before--BorderBottomColor);
18320
- --pf-c-select__toggle--before--BorderBottomWidth: var(--pf-c-select--m-success__toggle--before--BorderBottomWidth);
18321
- --pf-c-select__toggle--hover--before--BorderBottomColor: var(--pf-c-select--m-success__toggle--hover--before--BorderBottomColor);
18322
- --pf-c-select__toggle--focus--before--BorderBottomColor: var(--pf-c-select--m-success__toggle--focus--before--BorderBottomColor);
18323
- --pf-c-select__toggle--active--before--BorderBottomColor: var(--pf-c-select--m-success__toggle--active--before--BorderBottomColor);
18324
- --pf-c-select__toggle--m-expanded--before--BorderBottomColor: var(--pf-c-select--m-success__toggle--m-expanded--before--BorderBottomColor);
18325
- --pf-c-select__toggle-status-icon--Color: var(--pf-c-select--m-success__toggle-status-icon--Color);
18326
- }
18327
-
18328
- .pf-c-select.pf-m-warning {
18329
- --pf-c-select__toggle--before--BorderBottomColor: var(--pf-c-select--m-warning__toggle--before--BorderBottomColor);
18330
- --pf-c-select__toggle--before--BorderBottomWidth: var(--pf-c-select--m-warning__toggle--before--BorderBottomWidth);
18331
- --pf-c-select__toggle--hover--before--BorderBottomColor: var(--pf-c-select--m-warning__toggle--hover--before--BorderBottomColor);
18332
- --pf-c-select__toggle--focus--before--BorderBottomColor: var(--pf-c-select--m-warning__toggle--focus--before--BorderBottomColor);
18333
- --pf-c-select__toggle--active--before--BorderBottomColor: var(--pf-c-select--m-warning__toggle--active--before--BorderBottomColor);
18334
- --pf-c-select__toggle--m-expanded--before--BorderBottomColor: var(--pf-c-select--m-warning__toggle--m-expanded--before--BorderBottomColor);
18335
- --pf-c-select__toggle-status-icon--Color: var(--pf-c-select--m-warning__toggle-status-icon--Color);
18336
- }
18337
-
18338
- .pf-c-select__menu-search + .pf-c-divider {
18339
- --pf-c-select-menu--c-divider--MarginTop: 0;
18340
- }
18341
-
18342
- .pf-c-select__toggle {
18343
- position: relative;
18344
- display: flex;
18345
- align-items: center;
18346
- justify-content: space-between;
18347
- width: 100%;
18348
- min-width: var(--pf-c-select__toggle--MinWidth);
18349
- padding: var(--pf-c-select__toggle--PaddingTop) var(--pf-c-select__toggle--PaddingRight) var(--pf-c-select__toggle--PaddingBottom) var(--pf-c-select__toggle--PaddingLeft);
18350
- font-size: var(--pf-c-select__toggle--FontSize);
18351
- font-weight: var(--pf-c-select__toggle--FontWeight);
18352
- line-height: var(--pf-c-select__toggle--LineHeight);
18353
- color: var(--pf-c-select__toggle--Color);
18354
- white-space: nowrap;
18355
- cursor: pointer;
18356
- background-color: var(--pf-c-select__toggle--BackgroundColor);
18357
- border: none;
18358
- }
18359
-
18360
- .pf-c-select__toggle.pf-m-disabled, .pf-c-select__toggle:disabled {
18361
- --pf-c-select__toggle--BackgroundColor: var(--pf-c-select__toggle--disabled--BackgroundColor);
18362
- pointer-events: none;
18363
- }
18364
-
18365
- .pf-c-select__toggle.pf-m-disabled::before, .pf-c-select__toggle:disabled::before {
18366
- border: 0;
18367
- }
18368
-
18369
- .pf-c-select__toggle::before {
18370
- --pf-c-select__toggle--before--BorderWidth-base: var(--pf-c-select__toggle--before--BorderTopWidth) var(--pf-c-select__toggle--before--BorderRightWidth) var(--pf-c-select__toggle--before--BorderBottomWidth) var(--pf-c-select__toggle--before--BorderLeftWidth);
18371
- position: absolute;
18372
- top: 0;
18373
- right: 0;
18374
- bottom: 0;
18375
- left: 0;
18376
- content: "";
18377
- border-color: var(--pf-c-select__toggle--before--BorderTopColor) var(--pf-c-select__toggle--before--BorderRightColor) var(--pf-c-select__toggle--before--BorderBottomColor) var(--pf-c-select__toggle--before--BorderLeftColor);
18378
- border-style: solid;
18379
- border-width: var(--pf-c-select__toggle--before--BorderWidth, var(--pf-c-select__toggle--before--BorderWidth-base));
18380
- }
18381
-
18382
- .pf-c-select__toggle:hover {
18383
- --pf-c-select__toggle--before--BorderBottomColor: var(--pf-c-select__toggle--hover--before--BorderBottomColor);
18384
- }
18385
-
18386
- .pf-c-select__toggle:focus, .pf-c-select__toggle:focus-within {
18387
- --pf-c-select__toggle--before--BorderBottomColor: var(--pf-c-select__toggle--focus--before--BorderBottomColor);
18388
- --pf-c-select__toggle--before--BorderBottomWidth: var(--pf-c-select__toggle--focus--before--BorderBottomWidth);
18389
- }
18390
-
18391
- .pf-c-select__toggle:active, .pf-c-select__toggle.pf-m-active {
18392
- --pf-c-select__toggle--before--BorderBottomColor: var(--pf-c-select__toggle--active--before--BorderBottomColor);
18393
- --pf-c-select__toggle--before--BorderBottomWidth: var(--pf-c-select__toggle--active--before--BorderBottomWidth);
18394
- }
18395
-
18396
- .pf-m-expanded > .pf-c-select__toggle {
18397
- --pf-c-select__toggle--before--BorderBottomColor: var(--pf-c-select__toggle--m-expanded--before--BorderBottomColor);
18398
- --pf-c-select__toggle--before--BorderBottomWidth: var(--pf-c-select__toggle--m-expanded--before--BorderBottomWidth);
18399
- }
18400
-
18401
- .pf-c-select__toggle.pf-m-plain {
18402
- --pf-c-select__toggle-arrow--Color: var(--pf-c-select--m-plain__toggle-arrow--Color);
18403
- }
18404
-
18405
- .pf-c-select__toggle.pf-m-plain::before {
18406
- border-color: var(--pf-c-select__toggle--m-plain--before--BorderColor);
18407
- }
18408
-
18409
- .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 {
18410
- --pf-c-select--m-plain__toggle-arrow--Color: var(--pf-c-select--m-plain--hover__toggle-arrow--Color);
18411
- }
18412
-
18413
- .pf-c-select__toggle.pf-m-typeahead {
18414
- --pf-c-select__toggle--PaddingTop: 0;
18415
- --pf-c-select__toggle--PaddingRight: 0;
18416
- --pf-c-select__toggle--PaddingBottom: 0;
18417
- }
18418
-
18419
- .pf-c-select__toggle.pf-m-typeahead .pf-c-form-control {
18420
- overflow: hidden;
18421
- text-overflow: ellipsis;
18422
- white-space: nowrap;
18423
- --pf-c-form-control--invalid--BackgroundUrl: none;
18348
+ --pf-c-select__menu-item-icon--Top: 50%;
18349
+ --pf-c-select__menu-item-icon--TranslateY: -50%;
18350
+ --pf-c-select__menu-item-action-icon--MinHeight: calc(var(--pf-c-select__menu-item--FontSize) * var(--pf-c-select__menu-item--LineHeight));
18351
+ --pf-c-select__menu-item--match--FontWeight: var(--pf-global--FontWeight--bold);
18352
+ --pf-c-select__menu-search--PaddingTop: var(--pf-global--spacer--sm);
18353
+ --pf-c-select__menu-search--PaddingRight: var(--pf-c-select__menu-item--PaddingRight);
18354
+ --pf-c-select__menu-search--PaddingBottom: var(--pf-global--spacer--md);
18355
+ --pf-c-select__menu-search--PaddingLeft: var(--pf-c-select__menu-item--PaddingLeft);
18356
+ --pf-c-select__menu-group--menu-group--PaddingTop: var(--pf-global--spacer--sm);
18357
+ --pf-c-select__menu-group-title--PaddingTop: var(--pf-c-select__menu-item--PaddingTop);
18358
+ --pf-c-select__menu-group-title--PaddingRight: var(--pf-c-select__menu-item--PaddingRight);
18359
+ --pf-c-select__menu-group-title--PaddingBottom: var(--pf-c-select__menu-item--PaddingBottom);
18360
+ --pf-c-select__menu-group-title--PaddingLeft: var(--pf-c-select__menu-item--PaddingLeft);
18361
+ --pf-c-select__menu-group-title--FontSize: var(--pf-global--FontSize--xs);
18362
+ --pf-c-select__menu-group-title--FontWeight: var(--pf-global--FontWeight--normal);
18363
+ --pf-c-select__menu-group-title--Color: var(--pf-global--Color--dark-200);
18364
+ --pf-c-select__menu-item-count--MarginLeft: var(--pf-global--spacer--md);
18365
+ --pf-c-select__menu-item-count--FontSize: var(--pf-global--FontSize--sm);
18366
+ --pf-c-select__menu-item-count--Color: var(--pf-global--Color--200);
18367
+ --pf-c-select__menu-item--disabled__menu-item-count--Color: var(--pf-global--Color--dark-200);
18368
+ --pf-c-select__menu-item-description--FontSize: var(--pf-global--FontSize--xs);
18369
+ --pf-c-select__menu-item-description--Color: var(--pf-global--Color--200);
18370
+ --pf-c-select__menu-item-description--PaddingRight: var(--pf-c-select__menu-item--PaddingRight);
18371
+ --pf-c-select__menu-item-main--PaddingRight: var(--pf-c-select__menu-item--PaddingRight);
18372
+ --pf-c-select__menu-item--m-selected__menu-item-main--PaddingRight: var(--pf-c-select__menu-item--m-selected--PaddingRight);
18373
+ --pf-c-select__menu-footer--BoxShadow: var(--pf-global--BoxShadow--sm-top);
18374
+ --pf-c-select__menu-footer--PaddingTop: var(--pf-global--spacer--md);
18375
+ --pf-c-select__menu-footer--PaddingRight: var(--pf-global--spacer--md);
18376
+ --pf-c-select__menu-footer--PaddingBottom: var(--pf-global--spacer--md);
18377
+ --pf-c-select__menu-footer--PaddingLeft: var(--pf-global--spacer--md);
18378
+ --pf-c-select__menu-footer--MarginTop: var(--pf-global--spacer--sm);
18379
+ --pf-c-select__menu-footer--MarginBottom: calc(var(--pf-global--spacer--sm) * -1);
18380
+ --pf-c-select-menu--c-divider--MarginTop: var(--pf-global--spacer--sm);
18381
+ --pf-c-select-menu--c-divider--MarginBottom: var(--pf-global--spacer--sm);
18424
18382
  position: relative;
18425
- height: auto;
18426
- }
18427
-
18428
- .pf-c-select__toggle .pf-c-select__toggle-clear {
18429
- padding-right: var(--pf-c-select__toggle-clear--PaddingRight);
18430
- padding-left: var(--pf-c-select__toggle-clear--PaddingLeft);
18431
- margin-left: auto;
18432
- }
18433
-
18434
- .pf-c-select__toggle .pf-c-select__toggle-button {
18435
- color: var(--pf-c-select__toggle-button--Color);
18383
+ display: inline-block;
18384
+ width: 100%;
18436
18385
  }
18437
18386
 
18438
- .pf-c-select__toggle .pf-c-select__toggle-clear + .pf-c-select__toggle-button {
18439
- padding-left: var(--pf-c-select__toggle-clear--toggle-button--PaddingLeft);
18387
+ .pf-c-select .pf-c-divider {
18388
+ margin-top: var(--pf-c-select-menu--c-divider--MarginTop);
18389
+ margin-bottom: var(--pf-c-select-menu--c-divider--MarginBottom);
18440
18390
  }
18441
18391
 
18442
- .pf-c-select__toggle.pf-m-placeholder {
18443
- --pf-c-select__toggle-text--Color: var(--pf-c-select__toggle--m-placeholder__toggle-text--Color);
18392
+ .pf-c-select .pf-c-divider:last-child {
18393
+ --pf-c-select-menu--c-divider--MarginBottom: 0;
18444
18394
  }
18445
18395
 
18446
- .pf-c-select__toggle-arrow {
18447
- color: var(--pf-c-select__toggle-arrow--Color, inherit);
18396
+ .pf-c-select.pf-m-invalid {
18397
+ --pf-c-select__toggle--before--BorderBottomColor: var(--pf-c-select--m-invalid__toggle--before--BorderBottomColor);
18398
+ --pf-c-select__toggle--before--BorderBottomWidth: var(--pf-c-select--m-invalid__toggle--before--BorderBottomWidth);
18399
+ --pf-c-select__toggle--hover--before--BorderBottomColor: var(--pf-c-select--m-invalid__toggle--hover--before--BorderBottomColor);
18400
+ --pf-c-select__toggle--focus--before--BorderBottomColor: var(--pf-c-select--m-invalid__toggle--focus--before--BorderBottomColor);
18401
+ --pf-c-select__toggle--active--before--BorderBottomColor: var(--pf-c-select--m-invalid__toggle--active--before--BorderBottomColor);
18402
+ --pf-c-select__toggle--m-expanded--before--BorderBottomColor: var(--pf-c-select--m-invalid__toggle--m-expanded--before--BorderBottomColor);
18403
+ --pf-c-select__toggle-status-icon--Color: var(--pf-c-select--m-invalid__toggle-status-icon--Color);
18448
18404
  }
18449
18405
 
18450
- * + .pf-c-select__toggle-arrow {
18451
- margin-right: var(--pf-c-select__toggle-arrow--MarginRight);
18452
- margin-left: var(--pf-c-select__toggle-arrow--MarginLeft);
18406
+ .pf-c-select.pf-m-success {
18407
+ --pf-c-select__toggle--before--BorderBottomColor: var(--pf-c-select--m-success__toggle--before--BorderBottomColor);
18408
+ --pf-c-select__toggle--before--BorderBottomWidth: var(--pf-c-select--m-success__toggle--before--BorderBottomWidth);
18409
+ --pf-c-select__toggle--hover--before--BorderBottomColor: var(--pf-c-select--m-success__toggle--hover--before--BorderBottomColor);
18410
+ --pf-c-select__toggle--focus--before--BorderBottomColor: var(--pf-c-select--m-success__toggle--focus--before--BorderBottomColor);
18411
+ --pf-c-select__toggle--active--before--BorderBottomColor: var(--pf-c-select--m-success__toggle--active--before--BorderBottomColor);
18412
+ --pf-c-select__toggle--m-expanded--before--BorderBottomColor: var(--pf-c-select--m-success__toggle--m-expanded--before--BorderBottomColor);
18413
+ --pf-c-select__toggle-status-icon--Color: var(--pf-c-select--m-success__toggle-status-icon--Color);
18453
18414
  }
18454
18415
 
18455
- .pf-c-select.pf-m-top.pf-m-expanded .pf-c-select__toggle-arrow {
18456
- transform: rotate(var(--pf-c-select__toggle-arrow--m-top--m-expanded__toggle-arrow--Rotate));
18416
+ .pf-c-select.pf-m-warning {
18417
+ --pf-c-select__toggle--before--BorderBottomColor: var(--pf-c-select--m-warning__toggle--before--BorderBottomColor);
18418
+ --pf-c-select__toggle--before--BorderBottomWidth: var(--pf-c-select--m-warning__toggle--before--BorderBottomWidth);
18419
+ --pf-c-select__toggle--hover--before--BorderBottomColor: var(--pf-c-select--m-warning__toggle--hover--before--BorderBottomColor);
18420
+ --pf-c-select__toggle--focus--before--BorderBottomColor: var(--pf-c-select--m-warning__toggle--focus--before--BorderBottomColor);
18421
+ --pf-c-select__toggle--active--before--BorderBottomColor: var(--pf-c-select--m-warning__toggle--active--before--BorderBottomColor);
18422
+ --pf-c-select__toggle--m-expanded--before--BorderBottomColor: var(--pf-c-select--m-warning__toggle--m-expanded--before--BorderBottomColor);
18423
+ --pf-c-select__toggle-status-icon--Color: var(--pf-c-select--m-warning__toggle-status-icon--Color);
18457
18424
  }
18458
18425
 
18459
- .pf-c-select__toggle-text {
18460
- overflow: hidden;
18461
- text-overflow: ellipsis;
18462
- white-space: nowrap;
18463
- color: var(--pf-c-select__toggle-text--Color, inherit);
18426
+ .pf-c-select__menu-search + .pf-c-divider {
18427
+ --pf-c-select-menu--c-divider--MarginTop: 0;
18464
18428
  }
18465
18429
 
18466
- .pf-c-select__toggle-wrapper {
18430
+ .pf-c-select__toggle {
18431
+ position: relative;
18467
18432
  display: flex;
18468
- flex: 1;
18469
- flex-wrap: wrap;
18470
18433
  align-items: center;
18471
- justify-content: flex-start;
18472
- min-width: 0;
18473
- max-width: var(--pf-c-select__toggle-wrapper--MaxWidth);
18474
- white-space: normal;
18475
- }
18476
-
18477
- .pf-c-select__toggle-wrapper > :not(:last-child) {
18478
- margin-right: var(--pf-c-select__toggle-wrapper--not-last-child--MarginRight);
18479
- }
18480
-
18481
- .pf-c-select__toggle-wrapper > .pf-c-form-control {
18482
- margin-top: calc(-1 * var(--pf-c-select__toggle-wrapper--m-typeahead--PaddingTop));
18483
- }
18484
-
18485
- .pf-c-select__toggle-wrapper .pf-c-chip-group {
18486
- margin-top: var(--pf-c-select__toggle-wrapper--c-chip-group--MarginTop);
18487
- margin-bottom: var(--pf-c-select__toggle-wrapper--c-chip-group--MarginBottom);
18488
- }
18489
-
18490
- .pf-c-select__toggle-wrapper > .pf-c-select__toggle-typeahead:first-child {
18491
- margin-left: calc(-1 * var(--pf-c-select__toggle--PaddingLeft));
18492
- }
18493
-
18494
- .pf-c-select__toggle-icon + .pf-c-select__toggle-text {
18495
- margin-left: var(--pf-c-select__toggle-icon--toggle-text--MarginLeft);
18496
- }
18497
-
18498
- .pf-c-select__toggle-status-icon {
18499
- margin-left: var(--pf-c-select__toggle-status-icon--MarginLeft);
18500
- color: var(--pf-c-select__toggle-status-icon--Color);
18501
- }
18502
-
18503
- .pf-c-select__toggle-badge {
18504
- display: flex;
18505
- padding-left: var(--pf-c-select__toggle-badge--PaddingLeft);
18506
- }
18507
-
18508
- .pf-c-select__toggle-typeahead {
18509
- flex-basis: var(--pf-c-select__toggle-typeahead--FlexBasis);
18510
- flex-grow: 1;
18511
- min-width: var(--pf-c-select__toggle-typeahead--MinWidth);
18512
- flex-shrink: 0;
18513
- }
18514
-
18515
- .pf-c-select__toggle-typeahead.pf-c-form-control {
18516
- background-color: var(--pf-c-select__toggle-typeahead--BackgroundColor);
18517
- border-top: var(--pf-c-select__toggle-typeahead--BorderTop);
18518
- border-right: var(--pf-c-select__toggle-typeahead--BorderRight);
18519
- border-bottom-color: transparent;
18520
- border-left: var(--pf-c-select__toggle-typeahead--BorderLeft);
18521
- }
18522
-
18523
- .pf-c-select__toggle-typeahead.pf-c-form-control:focus {
18524
- padding-bottom: var(--pf-c-select__toggle-typeahead--focus--PaddingBottom);
18525
- }
18526
-
18527
- .pf-c-select__menu {
18528
- position: absolute;
18529
- top: var(--pf-c-select__menu--Top);
18530
- z-index: var(--pf-c-select__menu--ZIndex);
18531
- width: var(--pf-c-select__menu--Width);
18532
- min-width: var(--pf-c-select__menu--MinWidth);
18533
- padding-top: var(--pf-c-select__menu--PaddingTop);
18534
- padding-bottom: var(--pf-c-select__menu--PaddingBottom);
18535
- background-color: var(--pf-c-select__menu--BackgroundColor);
18536
- background-clip: padding-box;
18537
- box-shadow: var(--pf-c-select__menu--BoxShadow);
18538
- }
18539
-
18540
- .pf-c-select__menu.pf-m-align-right {
18541
- right: 0;
18542
- }
18543
-
18544
- .pf-c-select.pf-m-top .pf-c-select__menu {
18545
- top: 0;
18546
- transform: translateY(var(--pf-c-select__menu--m-top--TranslateY));
18547
- }
18548
-
18549
- .pf-c-select__menu.pf-m-static {
18550
- --pf-c-select__menu--m-top--TranslateY: 0;
18551
- position: static;
18552
- top: auto;
18553
- right: auto;
18554
- bottom: auto;
18555
- left: auto;
18556
- z-index: auto;
18557
- min-width: min-content;
18558
- }
18559
-
18560
- .pf-c-select__menu-fieldset {
18561
- border: 0;
18562
- }
18563
-
18564
- .pf-c-select__menu-wrapper {
18565
- display: flex;
18566
- }
18567
-
18568
- .pf-c-select__menu-wrapper.pf-m-favorite .pf-c-select__menu-item.pf-m-favorite-action {
18569
- --pf-c-select__menu-item--m-favorite-action--Color: var(--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--Color);
18570
- --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);
18571
- --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);
18572
- }
18573
-
18574
- .pf-c-select__menu-item {
18575
- position: relative;
18576
- width: var(--pf-c-select__menu-item--Width);
18577
- 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);
18578
- font-size: var(--pf-c-select__menu-item--FontSize);
18579
- font-weight: var(--pf-c-select__menu-item--FontWeight);
18580
- line-height: var(--pf-c-select__menu-item--LineHeight);
18581
- color: var(--pf-c-select__menu-item--Color);
18582
- text-align: left;
18434
+ justify-content: space-between;
18435
+ width: 100%;
18436
+ min-width: var(--pf-c-select__toggle--MinWidth);
18437
+ padding: var(--pf-c-select__toggle--PaddingTop) var(--pf-c-select__toggle--PaddingRight) var(--pf-c-select__toggle--PaddingBottom) var(--pf-c-select__toggle--PaddingLeft);
18438
+ font-size: var(--pf-c-select__toggle--FontSize);
18439
+ font-weight: var(--pf-c-select__toggle--FontWeight);
18440
+ line-height: var(--pf-c-select__toggle--LineHeight);
18441
+ color: var(--pf-c-select__toggle--Color);
18583
18442
  white-space: nowrap;
18584
- background-color: transparent;
18443
+ cursor: pointer;
18444
+ background-color: var(--pf-c-select__toggle--BackgroundColor);
18585
18445
  border: none;
18586
18446
  }
18587
18447
 
18588
- .pf-c-select__menu-item:hover, .pf-c-select__menu-item:focus, .pf-c-select__menu-item.pf-m-focus {
18589
- --pf-c-select__menu-item--m-action--Color: var(--pf-c-select__menu-item--hover__menu-item--m-action--Color);
18590
- text-decoration: none;
18591
- }
18592
-
18593
- .pf-c-select__menu-wrapper:hover, .pf-c-select__menu-item:hover {
18594
- background-color: var(--pf-c-select__menu-item--hover--BackgroundColor);
18595
- }
18596
-
18597
- .pf-c-select__menu-wrapper:focus-within,
18598
- .pf-c-select__menu-wrapper.pf-m-focus, .pf-c-select__menu-item:focus, .pf-c-select__menu-item.pf-m-focus {
18599
- position: relative;
18600
- background-color: var(--pf-c-select__menu-item--focus--BackgroundColor);
18601
- }
18602
-
18603
- .pf-c-select__menu-item.pf-m-link {
18604
- --pf-c-select__menu-item--PaddingRight: 0;
18605
- --pf-c-select__menu-item-main--PaddingRight: 0;
18606
- --pf-c-select__menu-item-description--PaddingRight: 0;
18607
- --pf-c-select__menu-item--Width: var(--pf-c-select__menu-item--m-link--Width);
18608
- --pf-c-select__menu-item--hover--BackgroundColor: var(--pf-c-select__menu-item--m-link--hover--BackgroundColor);
18609
- --pf-c-select__menu-item--focus--BackgroundColor: var(--pf-c-select__menu-item--m-link--focus--BackgroundColor);
18610
- flex-grow: 1;
18611
- }
18612
-
18613
- .pf-c-select__menu-item.pf-m-action {
18614
- --pf-c-select__menu-item--Color: var(--pf-c-select__menu-item--m-action--Color);
18615
- --pf-c-select__menu-item--Width: var(--pf-c-select__menu-item--m-action--Width);
18616
- --pf-c-select__menu-item--hover--BackgroundColor: var(--pf-c-select__menu-item--m-action--hover--BackgroundColor);
18617
- --pf-c-select__menu-item--focus--BackgroundColor: var(--pf-c-select__menu-item--m-action--focus--BackgroundColor);
18618
- display: flex;
18619
- align-items: flex-start;
18620
- font-size: var(--pf-c-select__menu-item--m-action--FontSize);
18448
+ .pf-c-select__toggle.pf-m-disabled, .pf-c-select__toggle:disabled {
18449
+ --pf-c-select__toggle--BackgroundColor: var(--pf-c-select__toggle--disabled--BackgroundColor);
18450
+ pointer-events: none;
18621
18451
  }
18622
18452
 
18623
- .pf-c-select__menu-item.pf-m-action:hover {
18624
- --pf-c-select__menu-item--m-action--Color: var(--pf-c-select__menu-item--m-action--hover--Color);
18453
+ .pf-c-select__toggle.pf-m-disabled::before, .pf-c-select__toggle:disabled::before {
18454
+ border: 0;
18625
18455
  }
18626
18456
 
18627
- .pf-c-select__menu-item.pf-m-action:focus {
18628
- --pf-c-select__menu-item--m-action--Color: var(--pf-c-select__menu-item--m-action--focus--Color);
18457
+ .pf-c-select__toggle::before {
18458
+ --pf-c-select__toggle--before--BorderWidth-base: var(--pf-c-select__toggle--before--BorderTopWidth) var(--pf-c-select__toggle--before--BorderRightWidth) var(--pf-c-select__toggle--before--BorderBottomWidth) var(--pf-c-select__toggle--before--BorderLeftWidth);
18459
+ position: absolute;
18460
+ top: 0;
18461
+ right: 0;
18462
+ bottom: 0;
18463
+ left: 0;
18464
+ content: "";
18465
+ border-color: var(--pf-c-select__toggle--before--BorderTopColor) var(--pf-c-select__toggle--before--BorderRightColor) var(--pf-c-select__toggle--before--BorderBottomColor) var(--pf-c-select__toggle--before--BorderLeftColor);
18466
+ border-style: solid;
18467
+ border-width: var(--pf-c-select__toggle--before--BorderWidth, var(--pf-c-select__toggle--before--BorderWidth-base));
18629
18468
  }
18630
18469
 
18631
- .pf-c-select__menu-item.pf-m-action:disabled {
18632
- --pf-c-select__menu-item--disabled--Color: var(--pf-c-select__menu-item--m-action--disabled--Color);
18470
+ .pf-c-select__toggle:hover {
18471
+ --pf-c-select__toggle--before--BorderBottomColor: var(--pf-c-select__toggle--hover--before--BorderBottomColor);
18633
18472
  }
18634
18473
 
18635
- .pf-c-select__menu-item.pf-m-favorite-action {
18636
- --pf-c-select__menu-item--m-action--Color: var(--pf-c-select__menu-item--m-favorite-action--Color);
18637
- --pf-c-select__menu-item--m-action--hover--Color: var(--pf-c-select__menu-item--m-favorite-action--hover--Color);
18638
- --pf-c-select__menu-item--m-action--focus--Color: var(--pf-c-select__menu-item--m-favorite-action--focus--Color);
18474
+ .pf-c-select__toggle:focus, .pf-c-select__toggle:focus-within {
18475
+ --pf-c-select__toggle--before--BorderBottomColor: var(--pf-c-select__toggle--focus--before--BorderBottomColor);
18476
+ --pf-c-select__toggle--before--BorderBottomWidth: var(--pf-c-select__toggle--focus--before--BorderBottomWidth);
18639
18477
  }
18640
18478
 
18641
- .pf-c-select__menu-item.pf-m-selected {
18642
- --pf-c-select__menu-item--PaddingRight: var(--pf-c-select__menu-item--m-selected--PaddingRight);
18643
- --pf-c-select__menu-item-main--PaddingRight: var(--pf-c-select__menu-item--m-selected__menu-item-main--PaddingRight);
18479
+ .pf-c-select__toggle:active, .pf-c-select__toggle.pf-m-active {
18480
+ --pf-c-select__toggle--before--BorderBottomColor: var(--pf-c-select__toggle--active--before--BorderBottomColor);
18481
+ --pf-c-select__toggle--before--BorderBottomWidth: var(--pf-c-select__toggle--active--before--BorderBottomWidth);
18644
18482
  }
18645
18483
 
18646
- .pf-c-select__menu-item.pf-m-description {
18647
- white-space: normal;
18484
+ .pf-m-expanded > .pf-c-select__toggle {
18485
+ --pf-c-select__toggle--before--BorderBottomColor: var(--pf-c-select__toggle--m-expanded--before--BorderBottomColor);
18486
+ --pf-c-select__toggle--before--BorderBottomWidth: var(--pf-c-select__toggle--m-expanded--before--BorderBottomWidth);
18648
18487
  }
18649
18488
 
18650
- .pf-c-select__menu-item.pf-m-description:not(.pf-c-check) {
18651
- --pf-c-select__menu-item--PaddingRight: 0;
18489
+ .pf-c-select__toggle.pf-m-plain {
18490
+ --pf-c-select__toggle-arrow--Color: var(--pf-c-select--m-plain__toggle-arrow--Color);
18652
18491
  }
18653
18492
 
18654
- .pf-c-select__menu-item.pf-m-description .pf-c-check__label {
18655
- white-space: nowrap;
18493
+ .pf-c-select__toggle.pf-m-plain::before {
18494
+ border-color: var(--pf-c-select__toggle--m-plain--before--BorderColor);
18656
18495
  }
18657
18496
 
18658
- .pf-c-select__menu-wrapper.pf-m-disabled, .pf-c-select__menu-item:disabled, .pf-c-select__menu-item.pf-m-disabled {
18659
- --pf-c-select__menu-item-count--Color: var(--pf-c-select__menu-item--disabled__menu-item-count--Color);
18660
- color: var(--pf-c-select__menu-item--disabled--Color);
18661
- pointer-events: none;
18662
- background-color: var(--pf-c-select__menu-item--disabled--BackgroundColor);
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);
18663
18499
  }
18664
18500
 
18665
- .pf-c-select__menu-item.pf-c-check .pf-c-check__label {
18666
- width: 100%;
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;
18667
18505
  }
18668
18506
 
18669
- .pf-c-select__menu-item.pf-m-load {
18670
- --pf-c-select__menu-item--hover--BackgroundColor: transparent;
18671
- --pf-c-select__menu-item--focus--BackgroundColor: transparent;
18672
- --pf-c-select__menu-item--Color: var(--pf-c-select__menu-item--m-load--Color);
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;
18673
18514
  }
18674
18515
 
18675
- .pf-c-select__list-item.pf-m-loading {
18676
- padding-top: var(--pf-c-select__list-item--m-loading--PaddingTop);
18677
- text-align: center;
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;
18678
18520
  }
18679
18521
 
18680
- .pf-c-select__menu-item-main {
18681
- position: relative;
18682
- display: block;
18683
- padding-right: var(--pf-c-select__menu-item-main--PaddingRight);
18684
- white-space: nowrap;
18522
+ .pf-c-select__toggle .pf-c-select__toggle-button {
18523
+ color: var(--pf-c-select__toggle-button--Color);
18685
18524
  }
18686
18525
 
18687
- .pf-c-select__menu-item-row {
18688
- display: flex;
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);
18689
18528
  }
18690
18529
 
18691
- .pf-c-select__menu-item-text {
18692
- flex-grow: 1;
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);
18693
18532
  }
18694
18533
 
18695
- .pf-c-select__menu-item-count {
18696
- align-self: center;
18697
- margin-left: var(--pf-c-select__menu-item-count--MarginLeft);
18698
- font-size: var(--pf-c-select__menu-item-count--FontSize);
18699
- color: var(--pf-c-select__menu-item-count--Color);
18534
+ .pf-c-select__toggle-arrow {
18535
+ color: var(--pf-c-select__toggle-arrow--Color, inherit);
18700
18536
  }
18701
18537
 
18702
- .pf-c-select__menu-item-description {
18703
- display: block;
18704
- padding-right: var(--pf-c-select__menu-item-description--PaddingRight);
18705
- font-size: var(--pf-c-select__menu-item-description--FontSize);
18706
- color: var(--pf-c-select__menu-item-description--Color);
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);
18707
18541
  }
18708
18542
 
18709
- .pf-c-select__menu-item-icon {
18710
- position: absolute;
18711
- top: var(--pf-c-select__menu-item-icon--Top);
18712
- right: var(--pf-c-select__menu-item-icon--Right);
18713
- font-size: var(--pf-c-select__menu-item-icon--FontSize);
18714
- color: var(--pf-c-select__menu-item-icon--Color);
18715
- transform: translateY(var(--pf-c-select__menu-item-icon--TranslateY));
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));
18716
18545
  }
18717
18546
 
18718
- .pf-c-select__menu-item-action-icon {
18547
+ .pf-c-select__toggle-text {
18548
+ overflow: hidden;
18549
+ text-overflow: ellipsis;
18550
+ white-space: nowrap;
18551
+ color: var(--pf-c-select__toggle-text--Color, inherit);
18552
+ }
18553
+
18554
+ .pf-c-select__toggle-wrapper {
18719
18555
  display: flex;
18556
+ flex: 1;
18557
+ flex-wrap: wrap;
18720
18558
  align-items: center;
18721
- min-height: var(--pf-c-select__menu-item-action-icon--MinHeight);
18559
+ justify-content: flex-start;
18560
+ min-width: 0;
18561
+ max-width: var(--pf-c-select__toggle-wrapper--MaxWidth);
18562
+ white-space: normal;
18722
18563
  }
18723
18564
 
18724
- .pf-c-select__menu-item--match {
18725
- font-weight: var(--pf-c-select__menu-item--match--FontWeight);
18726
- background-color: inherit;
18565
+ .pf-c-select__toggle-wrapper > :not(:last-child) {
18566
+ margin-right: var(--pf-c-select__toggle-wrapper--not-last-child--MarginRight);
18727
18567
  }
18728
18568
 
18729
- .pf-c-select__menu-group + .pf-c-select__menu-group {
18730
- padding-top: var(--pf-c-select__menu-group--menu-group--PaddingTop);
18569
+ .pf-c-select__toggle-wrapper > .pf-c-form-control {
18570
+ margin-top: calc(-1 * var(--pf-c-select__toggle-wrapper--m-typeahead--PaddingTop));
18731
18571
  }
18732
18572
 
18733
- .pf-c-select__menu-search {
18734
- 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);
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);
18735
18576
  }
18736
18577
 
18737
- .pf-c-select__menu-group-title {
18738
- padding-top: var(--pf-c-select__menu-group-title--PaddingTop);
18739
- padding-right: var(--pf-c-select__menu-group-title--PaddingRight);
18740
- padding-bottom: var(--pf-c-select__menu-group-title--PaddingBottom);
18741
- padding-left: var(--pf-c-select__menu-group-title--PaddingLeft);
18742
- font-size: var(--pf-c-select__menu-group-title--FontSize);
18743
- font-weight: var(--pf-c-select__menu-group-title--FontWeight);
18744
- color: var(--pf-c-select__menu-group-title--Color);
18578
+ .pf-c-select__toggle-wrapper > .pf-c-select__toggle-typeahead:first-child {
18579
+ margin-left: calc(-1 * var(--pf-c-select__toggle--PaddingLeft));
18745
18580
  }
18746
18581
 
18747
- .pf-c-select__menu-footer {
18748
- 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);
18749
- margin-top: var(--pf-c-select__menu-footer--MarginTop);
18750
- margin-bottom: var(--pf-c-select__menu-footer--MarginBottom);
18751
- box-shadow: var(--pf-c-select__menu-footer--BoxShadow);
18582
+ .pf-c-select__toggle-icon + .pf-c-select__toggle-text {
18583
+ margin-left: var(--pf-c-select__toggle-icon--toggle-text--MarginLeft);
18752
18584
  }
18753
18585
 
18754
- :where(.pf-theme-dark) .pf-c-select {
18755
- --pf-c-select__toggle--disabled--BackgroundColor: var(--pf-global--palette--black-500);
18756
- --pf-c-select__toggle--BackgroundColor: var(--pf-global--BackgroundColor--400);
18757
- --pf-c-select__toggle--before--BorderTopColor: transparent;
18758
- --pf-c-select__toggle--before--BorderRightColor: transparent;
18759
- --pf-c-select__toggle--before--BorderBottomColor: var(--pf-global--BorderColor--400);
18760
- --pf-c-select__toggle--before--BorderLeftColor: transparent;
18761
- --pf-c-select__menu--Top: 100%;
18762
- --pf-c-select__menu--m-top--TranslateY: -100%;
18763
- --pf-c-select__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
18764
- --pf-c-select__menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
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);
18765
18589
  }
18766
18590
 
18767
- :where(.pf-theme-dark) .pf-c-select__toggle:disabled, :where(.pf-theme-dark) .pf-c-select__toggle.pf-m-disabled {
18768
- color: var(--pf-global--palette--black-100);
18591
+ .pf-c-select__toggle-badge {
18592
+ display: flex;
18593
+ padding-left: var(--pf-c-select__toggle-badge--PaddingLeft);
18769
18594
  }
18770
18595
 
18771
- .pf-c-simple-list {
18772
- --pf-c-simple-list__item-link--PaddingTop: var(--pf-global--spacer--xs);
18773
- --pf-c-simple-list__item-link--PaddingRight: var(--pf-global--spacer--md);
18774
- --pf-c-simple-list__item-link--PaddingBottom: var(--pf-global--spacer--xs);
18775
- --pf-c-simple-list__item-link--PaddingLeft: var(--pf-global--spacer--md);
18776
- --pf-c-simple-list__item-link--BackgroundColor: var(--pf-global--BackgroundColor--100);
18777
- --pf-c-simple-list__item-link--Color: var(--pf-global--Color--100);
18778
- --pf-c-simple-list__item-link--FontSize: var(--pf-global--FontSize--sm);
18779
- --pf-c-simple-list__item-link--FontWeight: var(--pf-global--FontWeight--normal);
18780
- --pf-c-simple-list__item-link--m-current--Color: var(--pf-global--link--Color);
18781
- --pf-c-simple-list__item-link--m-current--BackgroundColor: var(--pf-global--BackgroundColor--200);
18782
- --pf-c-simple-list__item-link--m-current--FontWeight: var(--pf-global--FontWeight--normal);
18783
- --pf-c-simple-list__item-link--hover--Color: var(--pf-global--Color--100);
18784
- --pf-c-simple-list__item-link--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
18785
- --pf-c-simple-list__item-link--focus--Color: var(--pf-global--Color--100);
18786
- --pf-c-simple-list__item-link--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
18787
- --pf-c-simple-list__item-link--focus--FontWeight: var(--pf-global--FontWeight--normal);
18788
- --pf-c-simple-list__item-link--active--Color: var(--pf-global--Color--100);
18789
- --pf-c-simple-list__item-link--active--BackgroundColor: var(--pf-global--BackgroundColor--200);
18790
- --pf-c-simple-list__item-link--active--FontWeight: var(--pf-global--FontWeight--normal);
18791
- --pf-c-simple-list__title--PaddingTop: var(--pf-global--spacer--sm);
18792
- --pf-c-simple-list__title--PaddingRight: var(--pf-global--spacer--md);
18793
- --pf-c-simple-list__title--PaddingBottom: var(--pf-global--spacer--sm);
18794
- --pf-c-simple-list__title--PaddingLeft: var(--pf-global--spacer--md);
18795
- --pf-c-simple-list__title--FontSize: var(--pf-global--FontSize--sm);
18796
- --pf-c-simple-list__title--Color: var(--pf-global--Color--dark-200);
18797
- --pf-c-simple-list__title--FontWeight: var(--pf-global--FontWeight--semi-bold);
18798
- --pf-c-simple-list__section--section--MarginTop: var(--pf-global--spacer--sm);
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;
18799
18601
  }
18800
18602
 
18801
- .pf-c-simple-list__item-link {
18802
- display: block;
18803
- width: 100%;
18804
- 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);
18805
- font-size: var(--pf-c-simple-list__item-link--FontSize);
18806
- font-weight: var(--pf-c-simple-list__item-link--FontWeight);
18807
- color: var(--pf-c-simple-list__item-link--Color);
18808
- text-align: left;
18809
- background-color: var(--pf-c-simple-list__item-link--BackgroundColor);
18810
- border: none;
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);
18811
18609
  }
18812
18610
 
18813
- .pf-c-simple-list__item-link:hover {
18814
- text-decoration: none;
18815
- --pf-c-simple-list__item-link--BackgroundColor: var(--pf-c-simple-list__item-link--hover--BackgroundColor);
18816
- --pf-c-simple-list__item-link--Color: var(--pf-c-simple-list__item-link--hover--Color);
18611
+ .pf-c-select__toggle-typeahead.pf-c-form-control:focus {
18612
+ padding-bottom: var(--pf-c-select__toggle-typeahead--focus--PaddingBottom);
18817
18613
  }
18818
18614
 
18819
- .pf-c-simple-list__item-link:focus {
18820
- --pf-c-simple-list__item-link--FontWeight: var(--pf-c-simple-list__item-link--focus--FontWeight);
18821
- --pf-c-simple-list__item-link--BackgroundColor: var(--pf-c-simple-list__item-link--focus--BackgroundColor);
18822
- --pf-c-simple-list__item-link--Color: var(--pf-c-simple-list__item-link--focus--Color);
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);
18626
+ }
18627
+
18628
+ .pf-c-select__menu.pf-m-align-right {
18629
+ right: 0;
18823
18630
  }
18824
18631
 
18825
- .pf-c-simple-list__item-link:active {
18826
- --pf-c-simple-list__item-link--FontWeight: var(--pf-c-simple-list__item-link--active--FontWeight);
18827
- --pf-c-simple-list__item-link--BackgroundColor: var(--pf-c-simple-list__item-link--active--BackgroundColor);
18828
- --pf-c-simple-list__item-link--Color: var(--pf-c-simple-list__item-link--active--Color);
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));
18829
18635
  }
18830
18636
 
18831
- .pf-c-simple-list__item-link.pf-m-current {
18832
- --pf-c-simple-list__item-link--FontWeight: var(--pf-c-simple-list__item-link--m-current--FontWeight);
18833
- --pf-c-simple-list__item-link--BackgroundColor: var(--pf-c-simple-list__item-link--m-current--BackgroundColor);
18834
- --pf-c-simple-list__item-link--Color: var(--pf-c-simple-list__item-link--m-current--Color);
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;
18835
18646
  }
18836
18647
 
18837
- .pf-c-simple-list__title {
18838
- 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);
18839
- font-size: var(--pf-c-simple-list__title--FontSize);
18840
- font-weight: var(--pf-c-simple-list__title--FontWeight);
18841
- color: var(--pf-c-simple-list__title--Color);
18648
+ .pf-c-select__menu-fieldset {
18649
+ border: 0;
18842
18650
  }
18843
18651
 
18844
- .pf-c-simple-list__section + .pf-c-simple-list__section {
18845
- margin-top: var(--pf-c-simple-list__section--section--MarginTop);
18652
+ .pf-c-select__menu-wrapper {
18653
+ display: flex;
18846
18654
  }
18847
18655
 
18848
- :where(.pf-theme-dark) .pf-c-simple-list {
18849
- --pf-c-simple-list__item-link--m-current--Color: var(--pf-global--active-color--100);
18850
- --pf-c-simple-list__item-link--m-current--BackgroundColor: var(--pf-global--BackgroundColor--400);
18851
- --pf-c-simple-list__item-link--hover--Color: var(--pf-global--Color--100);
18852
- --pf-c-simple-list__item-link--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
18853
- --pf-c-simple-list__item-link--focus--Color: var(--pf-global--Color--100);
18854
- --pf-c-simple-list__item-link--focus--BackgroundColor: var(--pf-global--BackgroundColor--400);
18855
- --pf-c-simple-list__item-link--active--Color: var(--pf-global--Color--100);
18856
- --pf-c-simple-list__item-link--active--BackgroundColor: var(--pf-global--BackgroundColor--400);
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);
18857
18660
  }
18858
18661
 
18859
- .pf-c-skeleton {
18860
- --pf-c-skeleton--BackgroundColor: var(--pf-global--palette--black-150);
18861
- --pf-c-skeleton--Width: auto;
18862
- --pf-c-skeleton--Height: auto;
18863
- --pf-c-skeleton--BorderRadius: var(--pf-global--BorderRadius--sm);
18864
- --pf-c-skeleton--before--PaddingBottom: 0;
18865
- --pf-c-skeleton--before--Height: auto;
18866
- --pf-c-skeleton--before--Content: " ";
18867
- --pf-c-skeleton--after--LinearGradientAngle: 90deg;
18868
- --pf-c-skeleton--after--LinearGradientColorStop1: var(--pf-global--palette--black-150);
18869
- --pf-c-skeleton--after--LinearGradientColorStop2: #ededed;
18870
- --pf-c-skeleton--after--LinearGradientColorStop3: var(--pf-global--palette--black-150);
18871
- --pf-c-skeleton--after--TranslateX: -100%;
18872
- --pf-c-skeleton--after--AnimationName: pf-c-skeleton-loading;
18873
- --pf-c-skeleton--after--AnimationDuration: 2s;
18874
- --pf-c-skeleton--after--AnimationIterationCount: infinite;
18875
- --pf-c-skeleton--after--AnimationTimingFunction: linear;
18876
- --pf-c-skeleton--after--AnimationDelay: .5s;
18877
- --pf-c-skeleton--m-circle--BorderRadius: var(--pf-global--BorderRadius--lg);
18878
- --pf-c-skeleton--m-circle--before--PaddingBottom: 100%;
18879
- --pf-c-skeleton--m-text-4xl--Height: calc(var(--pf-global--FontSize--4xl) * var(--pf-global--LineHeight--sm));
18880
- --pf-c-skeleton--m-text-3xl--Height: calc(var(--pf-global--FontSize--3xl) * var(--pf-global--LineHeight--sm));
18881
- --pf-c-skeleton--m-text-2xl--Height: calc(var(--pf-global--FontSize--2xl) * var(--pf-global--LineHeight--sm));
18882
- --pf-c-skeleton--m-text-xl--Height: calc(var(--pf-global--FontSize--xl) * var(--pf-global--LineHeight--sm));
18883
- --pf-c-skeleton--m-text-lg--Height: calc(var(--pf-global--FontSize--lg) * var(--pf-global--LineHeight--md));
18884
- --pf-c-skeleton--m-text-md--Height: calc(var(--pf-global--FontSize--md) * var(--pf-global--LineHeight--md));
18885
- --pf-c-skeleton--m-text-sm--Height: calc(var(--pf-global--FontSize--sm) * var(--pf-global--LineHeight--md));
18886
- --pf-c-skeleton--m-width-sm--Width: 6.25rem;
18887
- --pf-c-skeleton--m-width-md--Width: 12.5rem;
18888
- --pf-c-skeleton--m-width-lg--Width: 18.75rem;
18889
- --pf-c-skeleton--m-width-25--Width: 25%;
18890
- --pf-c-skeleton--m-width-33--Width: calc(100% / 3);
18891
- --pf-c-skeleton--m-width-50--Width: 50%;
18892
- --pf-c-skeleton--m-width-66--Width: calc(100% / 3 * 2);
18893
- --pf-c-skeleton--m-width-75--Width: 75%;
18894
- --pf-c-skeleton--m-height-sm--Height: 6.25rem;
18895
- --pf-c-skeleton--m-height-md--Height: 12.5rem;
18896
- --pf-c-skeleton--m-height-lg--Height: 18.75rem;
18897
- --pf-c-skeleton--m-height-25--Height: 25%;
18898
- --pf-c-skeleton--m-height-33--Height: calc(100% / 3);
18899
- --pf-c-skeleton--m-height-50--Height: 50%;
18900
- --pf-c-skeleton--m-height-66--Height: calc(100% / 3 * 2);
18901
- --pf-c-skeleton--m-height-75--Height: 75%;
18902
- --pf-c-skeleton--m-height-100--Height: 100%;
18662
+ .pf-c-select__menu-item {
18903
18663
  position: relative;
18904
- width: var(--pf-c-skeleton--Width);
18905
- height: var(--pf-c-skeleton--Height);
18906
- overflow: hidden;
18907
- background-color: var(--pf-c-skeleton--BackgroundColor);
18908
- border-radius: var(--pf-c-skeleton--BorderRadius);
18909
- transform: translate(0);
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;
18910
18674
  }
18911
18675
 
18912
- .pf-c-skeleton::before {
18913
- display: block;
18914
- height: var(--pf-c-skeleton--before--Height);
18915
- padding-bottom: var(--pf-c-skeleton--before--PaddingBottom);
18916
- content: var(--pf-c-skeleton--before--Content);
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;
18917
18679
  }
18918
18680
 
18919
- .pf-c-skeleton::after {
18920
- position: absolute;
18921
- top: 0;
18922
- right: 0;
18923
- bottom: 0;
18924
- left: 0;
18925
- display: block;
18926
- content: "";
18927
- 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));
18928
- transform: translate3d(var(--pf-c-skeleton--after--TranslateX), 0, 0);
18929
- 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);
18681
+ .pf-c-select__menu-wrapper:hover, .pf-c-select__menu-item:hover {
18682
+ background-color: var(--pf-c-select__menu-item--hover--BackgroundColor);
18930
18683
  }
18931
18684
 
18932
- .pf-c-skeleton.pf-m-circle {
18933
- --pf-c-skeleton--BorderRadius: var(--pf-c-skeleton--m-circle--BorderRadius);
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 {
18687
+ position: relative;
18688
+ background-color: var(--pf-c-select__menu-item--focus--BackgroundColor);
18934
18689
  }
18935
18690
 
18936
- .pf-c-skeleton.pf-m-square, .pf-c-skeleton.pf-m-circle {
18937
- --pf-c-skeleton--before--Height: 0;
18938
- --pf-c-skeleton--before--PaddingBottom: var(--pf-c-skeleton--m-circle--before--PaddingBottom);
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;
18939
18699
  }
18940
18700
 
18941
- .pf-c-skeleton.pf-m-width-sm {
18942
- --pf-c-skeleton--Width: var(--pf-c-skeleton--m-width-sm--Width);
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);
18943
18709
  }
18944
18710
 
18945
- .pf-c-skeleton.pf-m-width-md {
18946
- --pf-c-skeleton--Width: var(--pf-c-skeleton--m-width-md--Width);
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);
18947
18713
  }
18948
18714
 
18949
- .pf-c-skeleton.pf-m-width-lg {
18950
- --pf-c-skeleton--Width: var(--pf-c-skeleton--m-width-lg--Width);
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);
18951
18717
  }
18952
18718
 
18953
- .pf-c-skeleton.pf-m-width-25 {
18954
- --pf-c-skeleton--Width: var(--pf-c-skeleton--m-width-25--Width);
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);
18955
18721
  }
18956
18722
 
18957
- .pf-c-skeleton.pf-m-width-33 {
18958
- --pf-c-skeleton--Width: var(--pf-c-skeleton--m-width-33--Width);
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);
18959
18727
  }
18960
18728
 
18961
- .pf-c-skeleton.pf-m-width-50 {
18962
- --pf-c-skeleton--Width: var(--pf-c-skeleton--m-width-50--Width);
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);
18963
18732
  }
18964
18733
 
18965
- .pf-c-skeleton.pf-m-width-66 {
18966
- --pf-c-skeleton--Width: var(--pf-c-skeleton--m-width-66--Width);
18734
+ .pf-c-select__menu-item.pf-m-description {
18735
+ white-space: normal;
18967
18736
  }
18968
18737
 
18969
- .pf-c-skeleton.pf-m-width-75 {
18970
- --pf-c-skeleton--Width: var(--pf-c-skeleton--m-width-75--Width);
18738
+ .pf-c-select__menu-item.pf-m-description:not(.pf-c-check) {
18739
+ --pf-c-select__menu-item--PaddingRight: 0;
18971
18740
  }
18972
18741
 
18973
- .pf-c-skeleton.pf-m-height-sm {
18974
- --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-sm--Height);
18742
+ .pf-c-select__menu-item.pf-m-description .pf-c-check__label {
18743
+ white-space: nowrap;
18975
18744
  }
18976
18745
 
18977
- .pf-c-skeleton.pf-m-height-md {
18978
- --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-md--Height);
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);
18979
18751
  }
18980
18752
 
18981
- .pf-c-skeleton.pf-m-height-lg {
18982
- --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-lg--Height);
18753
+ .pf-c-select__menu-item.pf-c-check .pf-c-check__label {
18754
+ width: 100%;
18983
18755
  }
18984
18756
 
18985
- .pf-c-skeleton.pf-m-height-25 {
18986
- --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-25--Height);
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);
18987
18761
  }
18988
18762
 
18989
- .pf-c-skeleton.pf-m-height-33 {
18990
- --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-33--Height);
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;
18991
18766
  }
18992
18767
 
18993
- .pf-c-skeleton.pf-m-height-50 {
18994
- --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-50--Height);
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;
18995
18773
  }
18996
18774
 
18997
- .pf-c-skeleton.pf-m-height-66 {
18998
- --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-66--Height);
18775
+ .pf-c-select__menu-item-row {
18776
+ display: flex;
18999
18777
  }
19000
18778
 
19001
- .pf-c-skeleton.pf-m-height-75 {
19002
- --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-75--Height);
18779
+ .pf-c-select__menu-item-text {
18780
+ flex-grow: 1;
19003
18781
  }
19004
18782
 
19005
- .pf-c-skeleton.pf-m-height-100 {
19006
- --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-100--Height);
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);
19007
18788
  }
19008
18789
 
19009
- .pf-c-skeleton.pf-m-text-4xl {
19010
- --pf-c-skeleton--Height: var(--pf-c-skeleton--m-text-4xl--Height);
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);
19011
18795
  }
19012
18796
 
19013
- .pf-c-skeleton.pf-m-text-3xl {
19014
- --pf-c-skeleton--Height: var(--pf-c-skeleton--m-text-3xl--Height);
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));
18804
+ }
18805
+
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);
19015
18810
  }
19016
18811
 
19017
- .pf-c-skeleton.pf-m-text-2xl {
19018
- --pf-c-skeleton--Height: var(--pf-c-skeleton--m-text-2xl--Height);
18812
+ .pf-c-select__menu-item--match {
18813
+ font-weight: var(--pf-c-select__menu-item--match--FontWeight);
18814
+ background-color: inherit;
19019
18815
  }
19020
18816
 
19021
- .pf-c-skeleton.pf-m-text-xl {
19022
- --pf-c-skeleton--Height: var(--pf-c-skeleton--m-text-xl--Height);
18817
+ .pf-c-select__menu-group + .pf-c-select__menu-group {
18818
+ padding-top: var(--pf-c-select__menu-group--menu-group--PaddingTop);
19023
18819
  }
19024
18820
 
19025
- .pf-c-skeleton.pf-m-text-lg {
19026
- --pf-c-skeleton--Height: var(--pf-c-skeleton--m-text-lg--Height);
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);
19027
18823
  }
19028
18824
 
19029
- .pf-c-skeleton.pf-m-text-md {
19030
- --pf-c-skeleton--Height: var(--pf-c-skeleton--m-text-md--Height);
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);
19031
18833
  }
19032
18834
 
19033
- .pf-c-skeleton.pf-m-text-sm {
19034
- --pf-c-skeleton--Height: var(--pf-c-skeleton--m-text-sm--Height);
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);
19035
18840
  }
19036
18841
 
19037
- @keyframes pf-c-skeleton-loading {
19038
- 0% {
19039
- transform: translateX(-100%);
19040
- }
19041
- 60% {
19042
- transform: translateX(100%);
19043
- }
19044
- 100% {
19045
- transform: translateX(100%);
19046
- }
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);
19047
18853
  }
19048
- :where(.pf-theme-dark) .pf-c-skeleton {
19049
- --pf-c-skeleton--BackgroundColor: var(--pf-global--palette--black-600);
19050
- --pf-c-skeleton--after--LinearGradientColorStop1: var(--pf-global--palette--black-600);
19051
- --pf-c-skeleton--after--LinearGradientColorStop2: var(--pf-global--palette--black-500);
19052
- --pf-c-skeleton--after--LinearGradientColorStop3: var(--pf-global--palette--black-600);
18854
+
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);
19053
18857
  }
19054
18858
 
19055
18859
  .pf-c-skip-to-content {
@@ -19286,6 +19090,202 @@ label.pf-c-radio, .pf-c-radio__label,
19286
19090
  margin-left: var(--pf-c-slider__main--actions--MarginLeft);
19287
19091
  }
19288
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);
19213
+ }
19214
+
19215
+ .pf-c-skeleton.pf-m-height-lg {
19216
+ --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-lg--Height);
19217
+ }
19218
+
19219
+ .pf-c-skeleton.pf-m-height-25 {
19220
+ --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-25--Height);
19221
+ }
19222
+
19223
+ .pf-c-skeleton.pf-m-height-33 {
19224
+ --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-33--Height);
19225
+ }
19226
+
19227
+ .pf-c-skeleton.pf-m-height-50 {
19228
+ --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-50--Height);
19229
+ }
19230
+
19231
+ .pf-c-skeleton.pf-m-height-66 {
19232
+ --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-66--Height);
19233
+ }
19234
+
19235
+ .pf-c-skeleton.pf-m-height-75 {
19236
+ --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-75--Height);
19237
+ }
19238
+
19239
+ .pf-c-skeleton.pf-m-height-100 {
19240
+ --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-100--Height);
19241
+ }
19242
+
19243
+ .pf-c-skeleton.pf-m-text-4xl {
19244
+ --pf-c-skeleton--Height: var(--pf-c-skeleton--m-text-4xl--Height);
19245
+ }
19246
+
19247
+ .pf-c-skeleton.pf-m-text-3xl {
19248
+ --pf-c-skeleton--Height: var(--pf-c-skeleton--m-text-3xl--Height);
19249
+ }
19250
+
19251
+ .pf-c-skeleton.pf-m-text-2xl {
19252
+ --pf-c-skeleton--Height: var(--pf-c-skeleton--m-text-2xl--Height);
19253
+ }
19254
+
19255
+ .pf-c-skeleton.pf-m-text-xl {
19256
+ --pf-c-skeleton--Height: var(--pf-c-skeleton--m-text-xl--Height);
19257
+ }
19258
+
19259
+ .pf-c-skeleton.pf-m-text-lg {
19260
+ --pf-c-skeleton--Height: var(--pf-c-skeleton--m-text-lg--Height);
19261
+ }
19262
+
19263
+ .pf-c-skeleton.pf-m-text-md {
19264
+ --pf-c-skeleton--Height: var(--pf-c-skeleton--m-text-md--Height);
19265
+ }
19266
+
19267
+ .pf-c-skeleton.pf-m-text-sm {
19268
+ --pf-c-skeleton--Height: var(--pf-c-skeleton--m-text-sm--Height);
19269
+ }
19270
+
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
+ }
19281
+ }
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);
19287
+ }
19288
+
19289
19289
  .pf-c-spinner {
19290
19290
  --pf-c-spinner--diameter: var(--pf-global--icon--FontSize--xl);
19291
19291
  --pf-c-spinner--Width: var(--pf-c-spinner--diameter);