@patternfly/react-core 4.242.6 → 4.242.8

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 (32) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/dist/esm/components/Breadcrumb/Breadcrumb.js.map +1 -1
  3. package/dist/esm/components/Menu/Menu.d.ts.map +1 -1
  4. package/dist/esm/components/Menu/Menu.js +1 -1
  5. package/dist/esm/components/Menu/Menu.js.map +1 -1
  6. package/dist/esm/components/Select/Select.d.ts.map +1 -1
  7. package/dist/esm/components/Select/Select.js +4 -1
  8. package/dist/esm/components/Select/Select.js.map +1 -1
  9. package/dist/js/components/Breadcrumb/Breadcrumb.js.map +1 -1
  10. package/dist/js/components/Menu/Menu.d.ts.map +1 -1
  11. package/dist/js/components/Menu/Menu.js +1 -1
  12. package/dist/js/components/Menu/Menu.js.map +1 -1
  13. package/dist/js/components/Select/Select.d.ts.map +1 -1
  14. package/dist/js/components/Select/Select.js +4 -1
  15. package/dist/js/components/Select/Select.js.map +1 -1
  16. package/dist/umd/react-core.min.css +703 -703
  17. package/dist/umd/react-core.min.js +2 -2
  18. package/package.json +2 -2
  19. package/src/components/Breadcrumb/Breadcrumb.tsx +1 -1
  20. package/src/components/Menu/Menu.tsx +3 -1
  21. package/src/components/Select/Select.tsx +7 -1
  22. package/src/demos/ComposableMenu/examples/ComposableActionsMenu.tsx +1 -1
  23. package/src/demos/ComposableMenu/examples/ComposableApplicationLauncher.tsx +3 -1
  24. package/src/demos/ComposableMenu/examples/ComposableContextSelector.tsx +3 -1
  25. package/src/demos/ComposableMenu/examples/ComposableDrilldownMenu.tsx +1 -1
  26. package/src/demos/ComposableMenu/examples/ComposableDropdwnVariants.tsx +3 -1
  27. package/src/demos/ComposableMenu/examples/ComposableFlyout.tsx +1 -1
  28. package/src/demos/ComposableMenu/examples/ComposableOptionsMenuVariants.tsx +3 -1
  29. package/src/demos/ComposableMenu/examples/ComposableSimpleCheckboxSelect.tsx +1 -1
  30. package/src/demos/ComposableMenu/examples/ComposableSimpleDropdown.tsx +1 -1
  31. package/src/demos/ComposableMenu/examples/ComposableSimpleSelect.tsx +1 -1
  32. package/src/demos/ComposableMenu/examples/ComposableTreeViewMenu.tsx +1 -1
@@ -9840,329 +9840,469 @@ label.pf-c-input-group__text {
9840
9840
  color: var(--pf-c-jump-links__toggle-text--Color);
9841
9841
  }
9842
9842
 
9843
- .pf-c-sidebar {
9844
- --pf-c-sidebar--BackgroundColor: var(--pf-global--BackgroundColor--100);
9845
- --pf-c-sidebar__main--FlexDirection: column;
9846
- --pf-c-sidebar__main--md--FlexDirection: row;
9847
- --pf-c-sidebar__main--AlignItems: stretch;
9848
- --pf-c-sidebar__main--md--AlignItems: start;
9849
- --pf-c-sidebar__main--child--MarginTop: 0;
9850
- --pf-c-sidebar__main--child--MarginLeft: 0;
9851
- --pf-c-sidebar--m-gutter__main--Gap: var(--pf-global--spacer--md);
9852
- --pf-c-sidebar--m-gutter__main--xl--Gap: var(--pf-global--spacer--lg);
9853
- --pf-c-sidebar--m-panel-right__panel--Order: 0;
9854
- --pf-c-sidebar--m-panel-right__panel--md--Order: 1;
9855
- --pf-c-sidebar--m-stack__main--FlexDirection: column;
9856
- --pf-c-sidebar--m-stack__main--AlignItems: stretch;
9857
- --pf-c-sidebar--m-stack__panel--Position: sticky;
9858
- --pf-c-sidebar--m-stack__panel--Top: 0;
9859
- --pf-c-sidebar--m-stack__panel--BoxShadow: var(--pf-c-sidebar__panel--BoxShadow--base);
9860
- --pf-c-sidebar--m-stack--m-panel-right__panel--Order: 0;
9861
- --pf-c-sidebar--m-split__main--AlignItems: start;
9862
- --pf-c-sidebar--m-split__main--FlexDirection: row;
9863
- --pf-c-sidebar--m-split__panel--Position: static;
9864
- --pf-c-sidebar--m-split__panel--Top: auto;
9865
- --pf-c-sidebar--m-split--m-panel-right__panel--Order: 1;
9866
- --pf-c-sidebar__panel--FlexBasis--base: auto;
9867
- --pf-c-sidebar__panel--BoxShadow--base: 0 0.25rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
9868
- --pf-c-sidebar__panel--BoxShadow: var(--pf-c-sidebar__panel--BoxShadow--base);
9869
- --pf-c-sidebar__panel--Top: 0;
9870
- --pf-c-sidebar__panel--md--Top: auto;
9871
- --pf-c-sidebar__panel--Position: sticky;
9872
- --pf-c-sidebar__panel--md--Position: static;
9873
- --pf-c-sidebar__panel--FlexBasis-base: auto;
9874
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis-base);
9875
- --pf-c-sidebar__panel--md--FlexBasis: 15.625rem;
9876
- --pf-c-sidebar__panel--m-split--FlexBasis: 15.625rem;
9877
- --pf-c-sidebar__panel--m-stack--FlexBasis: auto;
9878
- --pf-c-sidebar__panel--ZIndex: var(--pf-global--ZIndex--xs);
9879
- --pf-c-sidebar__panel--Order: 0;
9880
- --pf-c-sidebar__panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
9881
- --pf-c-sidebar__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
9882
- --pf-c-sidebar__panel--m-sticky--Top: 0;
9883
- --pf-c-sidebar__panel--m-sticky--Position: sticky;
9884
- height: 100%;
9843
+ .pf-c-label {
9844
+ --pf-c-label--PaddingTop: var(--pf-global--spacer--xs);
9845
+ --pf-c-label--PaddingRight: var(--pf-global--spacer--sm);
9846
+ --pf-c-label--PaddingBottom: var(--pf-global--spacer--xs);
9847
+ --pf-c-label--PaddingLeft: var(--pf-global--spacer--sm);
9848
+ --pf-c-label--BorderRadius: var(--pf-global--BorderRadius--lg);
9849
+ --pf-c-label--BackgroundColor: var(--pf-global--palette--black-150);
9850
+ --pf-c-label--Color: var(--pf-global--Color--100);
9851
+ --pf-c-label--FontSize: var(--pf-global--FontSize--sm);
9852
+ --pf-c-label__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
9853
+ --pf-c-label__content--before--BorderColor: var(--pf-global--BorderColor--100);
9854
+ --pf-c-label--m-outline--BackgroundColor: var(--pf-global--BackgroundColor--100);
9855
+ --pf-c-label--m-outline__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
9856
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-global--BorderColor--100);
9857
+ --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
9858
+ --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
9859
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--200);
9860
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--200);
9861
+ --pf-c-label--m-outline__content--link--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
9862
+ --pf-c-label--m-outline__content--link--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
9863
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
9864
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
9865
+ --pf-c-label--m-blue--BackgroundColor: var(--pf-global--palette--blue-50);
9866
+ --pf-c-label--m-blue__icon--Color: var(--pf-global--primary-color--100);
9867
+ --pf-c-label--m-blue__content--Color: var(--pf-global--info-color--200);
9868
+ --pf-c-label--m-blue__content--before--BorderColor: var(--pf-global--palette--blue-100);
9869
+ --pf-c-label--m-blue__content--link--hover--before--BorderColor: var(--pf-global--primary-color--100);
9870
+ --pf-c-label--m-blue__content--link--focus--before--BorderColor: var(--pf-global--primary-color--100);
9871
+ --pf-c-label--m-outline--m-blue__content--Color: var(--pf-global--primary-color--100);
9872
+ --pf-c-label--m-outline--m-blue__content--before--BorderColor: var(--pf-global--BorderColor--100);
9873
+ --pf-c-label--m-outline--m-blue__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
9874
+ --pf-c-label--m-outline--m-blue__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
9875
+ --pf-c-label--m-green--BackgroundColor: var(--pf-global--palette--green-50);
9876
+ --pf-c-label--m-green__icon--Color: var(--pf-global--success-color--100);
9877
+ --pf-c-label--m-green__content--Color: var(--pf-global--success-color--200);
9878
+ --pf-c-label--m-green__content--before--BorderColor: var(--pf-global--palette--green-100);
9879
+ --pf-c-label--m-green__content--link--hover--before--BorderColor: var(--pf-global--success-color--100);
9880
+ --pf-c-label--m-green__content--link--focus--before--BorderColor: var(--pf-global--success-color--100);
9881
+ --pf-c-label--m-outline--m-green__content--Color: var(--pf-global--success-color--100);
9882
+ --pf-c-label--m-outline--m-green__content--before--BorderColor: var(--pf-global--BorderColor--100);
9883
+ --pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
9884
+ --pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
9885
+ --pf-c-label--m-orange--BackgroundColor: var(--pf-global--palette--orange-50);
9886
+ --pf-c-label--m-orange__icon--Color: var(--pf-global--palette--orange-300);
9887
+ --pf-c-label--m-orange__content--Color: var(--pf-global--palette--orange-700);
9888
+ --pf-c-label--m-orange__content--before--BorderColor: var(--pf-global--palette--orange-100);
9889
+ --pf-c-label--m-orange__content--link--hover--before--BorderColor: var(--pf-global--palette--orange-300);
9890
+ --pf-c-label--m-orange__content--link--focus--before--BorderColor: var(--pf-global--palette--orange-300);
9891
+ --pf-c-label--m-outline--m-orange__content--Color: var(--pf-global--palette--orange-500);
9892
+ --pf-c-label--m-outline--m-orange__content--before--BorderColor: var(--pf-global--BorderColor--100);
9893
+ --pf-c-label--m-outline--m-orange__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
9894
+ --pf-c-label--m-outline--m-orange__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
9895
+ --pf-c-label--m-red--BackgroundColor: var(--pf-global--palette--red-50);
9896
+ --pf-c-label--m-red__icon--Color: var(--pf-global--danger-color--100);
9897
+ --pf-c-label--m-red__content--Color: var(--pf-global--palette--red-300);
9898
+ --pf-c-label--m-red__content--before--BorderColor: var(--pf-global--palette--red-100);
9899
+ --pf-c-label--m-red__content--link--hover--before--BorderColor: var(--pf-global--danger-color--100);
9900
+ --pf-c-label--m-red__content--link--focus--before--BorderColor: var(--pf-global--danger-color--100);
9901
+ --pf-c-label--m-outline--m-red__content--Color: var(--pf-global--danger-color--100);
9902
+ --pf-c-label--m-outline--m-red__content--before--BorderColor: var(--pf-global--BorderColor--100);
9903
+ --pf-c-label--m-outline--m-red__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
9904
+ --pf-c-label--m-outline--m-red__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
9905
+ --pf-c-label--m-purple--BackgroundColor: var(--pf-global--palette--purple-50);
9906
+ --pf-c-label--m-purple__icon--Color: var(--pf-global--palette--purple-500);
9907
+ --pf-c-label--m-purple__content--Color: var(--pf-global--palette--purple-700);
9908
+ --pf-c-label--m-purple__content--before--BorderColor: var(--pf-global--palette--purple-100);
9909
+ --pf-c-label--m-purple__content--link--hover--before--BorderColor: var(--pf-global--palette--purple-500);
9910
+ --pf-c-label--m-purple__content--link--focus--before--BorderColor: var(--pf-global--palette--purple-500);
9911
+ --pf-c-label--m-outline--m-purple__content--Color: var(--pf-global--palette--purple-500);
9912
+ --pf-c-label--m-outline--m-purple__content--before--BorderColor: var(--pf-global--BorderColor--100);
9913
+ --pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
9914
+ --pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
9915
+ --pf-c-label--m-cyan--BackgroundColor: var(--pf-global--palette--cyan-50);
9916
+ --pf-c-label--m-cyan__icon--Color: var(--pf-global--default-color--200);
9917
+ --pf-c-label--m-cyan__content--Color: var(--pf-global--default-color--300);
9918
+ --pf-c-label--m-cyan__content--before--BorderColor: var(--pf-global--palette--cyan-100);
9919
+ --pf-c-label--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--default-color--200);
9920
+ --pf-c-label--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--default-color--200);
9921
+ --pf-c-label--m-outline--m-cyan__content--Color: var(--pf-global--palette--cyan-400);
9922
+ --pf-c-label--m-outline--m-cyan__content--before--BorderColor: var(--pf-global--BorderColor--100);
9923
+ --pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
9924
+ --pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
9925
+ --pf-c-label--m-gold--BackgroundColor: var(--pf-global--palette--gold-50);
9926
+ --pf-c-label--m-gold__icon--Color: var(--pf-global--palette--gold-400);
9927
+ --pf-c-label--m-gold__content--Color: var(--pf-global--palette--gold-700);
9928
+ --pf-c-label--m-gold__content--before--BorderColor: var(--pf-global--palette--gold-100);
9929
+ --pf-c-label--m-gold__content--link--hover--before--BorderColor: var(--pf-global--palette--gold-300);
9930
+ --pf-c-label--m-gold__content--link--focus--before--BorderColor: var(--pf-global--palette--gold-300);
9931
+ --pf-c-label--m-outline--m-gold__content--Color: var(--pf-global--palette--gold-600);
9932
+ --pf-c-label--m-outline--m-gold__content--before--BorderColor: var(--pf-global--BorderColor--100);
9933
+ --pf-c-label--m-outline--m-gold__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
9934
+ --pf-c-label--m-outline--m-gold__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
9935
+ --pf-c-label--m-overflow__content--Color: var(--pf-global--link--Color);
9936
+ --pf-c-label--m-overflow__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
9937
+ --pf-c-label--m-overflow__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
9938
+ --pf-c-label--m-overflow__content--before--BorderColor: var(--pf-global--BorderColor--300);
9939
+ --pf-c-label--m-overflow__content--link--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
9940
+ --pf-c-label--m-overflow__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--300);
9941
+ --pf-c-label--m-overflow__content--link--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
9942
+ --pf-c-label--m-overflow__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--300);
9943
+ --pf-c-label--m-compact--PaddingTop: 0;
9944
+ --pf-c-label--m-compact--PaddingRight: var(--pf-global--spacer--sm);
9945
+ --pf-c-label--m-compact--PaddingBottom: 0;
9946
+ --pf-c-label--m-compact--PaddingLeft: var(--pf-global--spacer--sm);
9947
+ --pf-c-label--m-compact--FontSize: var(--pf-global--FontSize--xs);
9948
+ --pf-c-label--m-compact--m-editable--TextDecorationOffset: 0.0625rem;
9949
+ --pf-c-label__content--Color: var(--pf-global--Color--100);
9950
+ --pf-c-label__content--MaxWidth: 100%;
9951
+ --pf-c-label--m-outline__content--Color: var(--pf-global--Color--100);
9952
+ --pf-c-label--m-editable__content--MaxWidth: 16ch;
9953
+ --pf-c-label__text--MaxWidth: 16ch;
9954
+ --pf-c-label__icon--Color: var(--pf-global--Color--100);
9955
+ --pf-c-label__icon--MarginRight: var(--pf-global--spacer--xs);
9956
+ --pf-c-label__c-button--FontSize: var(--pf-global--FontSize--xs);
9957
+ --pf-c-label__c-button--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
9958
+ --pf-c-label__c-button--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
9959
+ --pf-c-label__c-button--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
9960
+ --pf-c-label__c-button--MarginLeft: var(--pf-global--spacer--xs);
9961
+ --pf-c-label__c-button--PaddingTop: var(--pf-global--spacer--xs);
9962
+ --pf-c-label__c-button--PaddingRight: var(--pf-global--spacer--sm);
9963
+ --pf-c-label__c-button--PaddingBottom: var(--pf-global--spacer--xs);
9964
+ --pf-c-label__c-button--PaddingLeft: var(--pf-global--spacer--sm);
9965
+ --pf-c-label--m-editable--Cursor: pointer;
9966
+ --pf-c-label--m-editable--TextDecoration: underline;
9967
+ --pf-c-label--m-editable--TextDecorationStyle: dashed;
9968
+ --pf-c-label--m-editable--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
9969
+ --pf-c-label--m-editable--TextDecorationOffset: 0.25rem;
9970
+ --pf-c-label--m-editable--TextDecorationColor: var(--pf-global--BorderColor--200);
9971
+ --pf-c-label--m-editable--hover--TextDecorationColor: var(--pf-global--Color--100);
9972
+ --pf-c-label--m-editable--focus--TextDecorationColor: var(--pf-global--Color--100);
9973
+ --pf-c-label--m-editable__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
9974
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-global--BorderColor--100);
9975
+ --pf-c-label--m-editable__content--hover--before--BorderWidth: var(--pf-global--BorderWidth--sm);
9976
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-global--BorderColor--100);
9977
+ --pf-c-label--m-editable__content--focus--before--BorderWidth: var(--pf-global--BorderWidth--sm);
9978
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-global--BorderColor--100);
9979
+ --pf-c-label--m-editable--m-editable-active--Cursor: auto;
9980
+ --pf-c-label--m-editable--m-editable-active--TextDecoration: none;
9981
+ --pf-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
9982
+ --pf-c-label--m-editable--m-editable-active__content--before--BorderWidth: 0;
9983
+ --pf-c-label--m-editable--m-editable-active__content--before--BorderColor: transparent;
9984
+ position: relative;
9985
+ padding: var(--pf-c-label--PaddingTop) var(--pf-c-label--PaddingRight) var(--pf-c-label--PaddingBottom) var(--pf-c-label--PaddingLeft);
9986
+ font-size: var(--pf-c-label--FontSize);
9987
+ color: var(--pf-c-label--Color);
9988
+ white-space: nowrap;
9989
+ background-color: var(--pf-c-label--BackgroundColor);
9990
+ border: 0;
9991
+ border-radius: var(--pf-c-label--BorderRadius);
9885
9992
  }
9886
9993
 
9887
- @media (min-width: 768px) {
9888
- .pf-c-sidebar {
9889
- --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar__main--md--FlexDirection);
9890
- --pf-c-sidebar__panel--BoxShadow: none;
9891
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--md--FlexBasis);
9892
- --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar__main--md--AlignItems);
9893
- --pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--md--Top);
9894
- --pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--md--Position);
9895
- }
9896
- }
9897
- @media (min-width: 1200px) {
9898
- .pf-c-sidebar {
9899
- --pf-c-sidebar--m-gutter__main--Gap: var(--pf-c-sidebar--m-gutter__main--xl--Gap);
9900
- }
9901
- }
9902
- .pf-c-sidebar.pf-m-gutter {
9903
- --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
9904
- --pf-c-sidebar__main--child--MarginLeft: 0;
9994
+ .pf-c-label.pf-m-compact {
9995
+ --pf-c-label--PaddingTop: var(--pf-c-label--m-compact--PaddingTop);
9996
+ --pf-c-label--PaddingRight: var(--pf-c-label--m-compact--PaddingRight);
9997
+ --pf-c-label--PaddingBottom: var(--pf-c-label--m-compact--PaddingBottom);
9998
+ --pf-c-label--PaddingLeft: var(--pf-c-label--m-compact--PaddingLeft);
9999
+ --pf-c-label--FontSize: var(--pf-c-label--m-compact--FontSize);
10000
+ --pf-c-label--m-editable--TextDecorationOffset: var(--pf-c-label--m-compact--m-editable--TextDecorationOffset);
9905
10001
  }
9906
10002
 
9907
- .pf-c-sidebar.pf-m-gutter > .pf-c-sidebar__main > * + * {
9908
- margin-top: var(--pf-c-sidebar__main--child--MarginTop);
9909
- margin-left: var(--pf-c-sidebar__main--child--MarginLeft);
10003
+ .pf-c-label.pf-m-blue {
10004
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-blue--BackgroundColor);
10005
+ --pf-c-label__icon--Color: var(--pf-c-label--m-blue__icon--Color);
10006
+ --pf-c-label__content--Color: var(--pf-c-label--m-blue__content--Color);
10007
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
10008
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-blue__content--link--hover--before--BorderColor);
10009
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-blue__content--link--focus--before--BorderColor);
10010
+ --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-blue__content--Color);
10011
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--before--BorderColor);
10012
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--link--hover--before--BorderColor);
10013
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--link--focus--before--BorderColor);
10014
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
10015
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
10016
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
9910
10017
  }
9911
10018
 
9912
- @media (min-width: 768px) {
9913
- .pf-c-sidebar.pf-m-gutter {
9914
- --pf-c-sidebar__main--child--MarginTop: 0;
9915
- --pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
9916
- }
9917
- }
9918
- .pf-c-sidebar.pf-m-panel-right {
9919
- --pf-c-sidebar__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--Order);
10019
+ .pf-c-label.pf-m-green {
10020
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-green--BackgroundColor);
10021
+ --pf-c-label__icon--Color: var(--pf-c-label--m-green__icon--Color);
10022
+ --pf-c-label__content--Color: var(--pf-c-label--m-green__content--Color);
10023
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
10024
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-green__content--link--hover--before--BorderColor);
10025
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-green__content--link--focus--before--BorderColor);
10026
+ --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-green__content--Color);
10027
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--before--BorderColor);
10028
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor);
10029
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor);
10030
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
10031
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
10032
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
9920
10033
  }
9921
10034
 
9922
- @media (min-width: 768px) {
9923
- .pf-c-sidebar.pf-m-panel-right {
9924
- --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--md--Order);
9925
- }
10035
+ .pf-c-label.pf-m-orange {
10036
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-orange--BackgroundColor);
10037
+ --pf-c-label__icon--Color: var(--pf-c-label--m-orange__icon--Color);
10038
+ --pf-c-label__content--Color: var(--pf-c-label--m-orange__content--Color);
10039
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
10040
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-orange__content--link--hover--before--BorderColor);
10041
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-orange__content--link--focus--before--BorderColor);
10042
+ --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-orange__content--Color);
10043
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--before--BorderColor);
10044
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--link--hover--before--BorderColor);
10045
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--link--focus--before--BorderColor);
10046
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
10047
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
10048
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
9926
10049
  }
9927
- .pf-c-sidebar.pf-m-stack {
9928
- --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-stack__main--FlexDirection);
9929
- --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-stack__main--AlignItems);
9930
- --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
9931
- --pf-c-sidebar__main--child--MarginLeft: 0;
9932
- --pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-stack__panel--Position);
9933
- --pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-stack__panel--Top);
9934
- --pf-c-sidebar__panel--BoxShadow: var(--pf-c-sidebar--m-stack__panel--BoxShadow);
9935
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-stack--FlexBasis);
9936
- --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-stack--m-panel-right__panel--Order);
10050
+
10051
+ .pf-c-label.pf-m-red {
10052
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-red--BackgroundColor);
10053
+ --pf-c-label__icon--Color: var(--pf-c-label--m-red__icon--Color);
10054
+ --pf-c-label__content--Color: var(--pf-c-label--m-red__content--Color);
10055
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
10056
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-red__content--link--hover--before--BorderColor);
10057
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-red__content--link--focus--before--BorderColor);
10058
+ --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-red__content--Color);
10059
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--before--BorderColor);
10060
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--link--hover--before--BorderColor);
10061
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--link--focus--before--BorderColor);
10062
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
10063
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
10064
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
9937
10065
  }
9938
10066
 
9939
- .pf-c-sidebar.pf-m-split {
9940
- --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-split__main--FlexDirection);
9941
- --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-split__main--AlignItems);
9942
- --pf-c-sidebar__main--child--MarginTop: 0;
9943
- --pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
9944
- --pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-split__panel--Position);
9945
- --pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-split__panel--Top);
9946
- --pf-c-sidebar__panel--BoxShadow: none;
9947
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-split--FlexBasis);
9948
- --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-split--m-panel-right__panel--Order);
10067
+ .pf-c-label.pf-m-purple {
10068
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-purple--BackgroundColor);
10069
+ --pf-c-label__icon--Color: var(--pf-c-label--m-purple__icon--Color);
10070
+ --pf-c-label__content--Color: var(--pf-c-label--m-purple__content--Color);
10071
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
10072
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-purple__content--link--hover--before--BorderColor);
10073
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-purple__content--link--focus--before--BorderColor);
10074
+ --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-purple__content--Color);
10075
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--before--BorderColor);
10076
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor);
10077
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor);
10078
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
10079
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
10080
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
9949
10081
  }
9950
10082
 
9951
- .pf-c-sidebar__main {
9952
- display: flex;
9953
- flex-direction: var(--pf-c-sidebar__main--FlexDirection);
9954
- align-items: var(--pf-c-sidebar__main--AlignItems);
10083
+ .pf-c-label.pf-m-cyan {
10084
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-cyan--BackgroundColor);
10085
+ --pf-c-label__icon--Color: var(--pf-c-label--m-cyan__icon--Color);
10086
+ --pf-c-label__content--Color: var(--pf-c-label--m-cyan__content--Color);
10087
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
10088
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-cyan__content--link--hover--before--BorderColor);
10089
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-cyan__content--link--focus--before--BorderColor);
10090
+ --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-cyan__content--Color);
10091
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--before--BorderColor);
10092
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor);
10093
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor);
10094
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
10095
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
10096
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
9955
10097
  }
9956
10098
 
9957
- .pf-c-sidebar__panel {
9958
- position: var(--pf-c-sidebar__panel--Position);
9959
- top: var(--pf-c-sidebar__panel--Top);
9960
- z-index: var(--pf-c-sidebar__panel--ZIndex);
9961
- flex-shrink: 0;
9962
- flex-basis: var(--pf-c-sidebar__panel--FlexBasis);
9963
- order: var(--pf-c-sidebar__panel--Order);
9964
- background-color: var(--pf-c-sidebar__panel--BackgroundColor);
9965
- box-shadow: var(--pf-c-sidebar__panel--BoxShadow);
10099
+ .pf-c-label.pf-m-gold {
10100
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-gold--BackgroundColor);
10101
+ --pf-c-label__icon--Color: var(--pf-c-label--m-gold__icon--Color);
10102
+ --pf-c-label__content--Color: var(--pf-c-label--m-gold__content--Color);
10103
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
10104
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-gold__content--link--hover--before--BorderColor);
10105
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-gold__content--link--focus--before--BorderColor);
10106
+ --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-gold__content--Color);
10107
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--before--BorderColor);
10108
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--link--hover--before--BorderColor);
10109
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--link--focus--before--BorderColor);
10110
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
10111
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
10112
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
9966
10113
  }
9967
10114
 
9968
- .pf-c-sidebar__panel.pf-m-sticky {
9969
- --pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--m-sticky--Position);
9970
- --pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--m-sticky--Top);
10115
+ .pf-c-label.pf-m-outline {
10116
+ --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color);
10117
+ --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--before--BorderWidth);
10118
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
10119
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-outline--BackgroundColor);
10120
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
10121
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
10122
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
9971
10123
  }
9972
10124
 
9973
- .pf-c-sidebar__panel.pf-m-static {
9974
- --pf-c-sidebar__panel--Position: static;
9975
- --pf-c-sidebar__panel--Top: auto;
10125
+ .pf-c-label.pf-m-overflow:hover,
10126
+ .pf-c-label.pf-m-add:hover, .pf-c-label.pf-m-outline a.pf-c-label__content:hover,
10127
+ .pf-c-label.pf-m-outline button.pf-c-label__content:hover {
10128
+ --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--link--hover--before--BorderWidth);
10129
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--link--hover--before--BorderColor);
9976
10130
  }
9977
10131
 
9978
- .pf-c-sidebar__content {
9979
- flex-grow: 1;
9980
- background-color: var(--pf-c-sidebar__content--BackgroundColor);
10132
+ .pf-c-label.pf-m-overflow:focus,
10133
+ .pf-c-label.pf-m-add:focus, .pf-c-label.pf-m-outline a.pf-c-label__content:focus,
10134
+ .pf-c-label.pf-m-outline button.pf-c-label__content:focus {
10135
+ --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--link--focus--before--BorderWidth);
10136
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--link--focus--before--BorderColor);
9981
10137
  }
9982
10138
 
9983
- .pf-c-sidebar__content.pf-m-no-background {
9984
- --pf-c-sidebar__content--BackgroundColor: transparent;
10139
+ .pf-c-label.pf-m-editable {
10140
+ text-decoration: var(--pf-c-label--m-editable--TextDecoration);
10141
+ cursor: var(--pf-c-label--m-editable--Cursor);
10142
+ text-decoration-style: var(--pf-c-label--m-editable--TextDecorationStyle);
10143
+ text-decoration-thickness: var(--pf-c-label--m-editable--TextDecorationThickness);
10144
+ text-underline-offset: var(--pf-c-label--m-editable--TextDecorationOffset);
10145
+ text-decoration-color: var(--pf-c-label--m-editable--TextDecorationColor);
10146
+ --pf-c-label__content--MaxWidth: var(--pf-c-label--m-editable__content--MaxWidth);
10147
+ --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
10148
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-editable__content--before--BorderColor);
10149
+ --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-c-label--m-editable__content--hover--before--BorderWidth);
10150
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-editable__content--hover--before--BorderColor);
10151
+ --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-c-label--m-editable__content--focus--before--BorderWidth);
10152
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-editable__content--focus--before--BorderColor);
10153
+ --pf-c-label--m-outline__content--link--hover--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
10154
+ --pf-c-label--m-outline__content--link--focus--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
9985
10155
  }
9986
10156
 
9987
- .pf-c-sidebar.pf-m-no-background,
9988
- .pf-c-sidebar__panel.pf-m-no-background,
9989
- .pf-c-sidebar__content.pf-m-no-background {
9990
- background-color: transparent;
10157
+ .pf-c-label.pf-m-editable:hover {
10158
+ --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--hover--TextDecorationColor);
9991
10159
  }
9992
10160
 
9993
- .pf-c-sidebar__panel.pf-m-width-default {
9994
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10161
+ .pf-c-label.pf-m-editable:focus {
10162
+ --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--focus--TextDecorationColor);
9995
10163
  }
9996
10164
 
9997
- .pf-c-sidebar__panel.pf-m-width-25 {
9998
- --pf-c-sidebar__panel--FlexBasis: 25%;
10165
+ .pf-c-label.pf-m-editable-active {
10166
+ --pf-c-label--m-editable--Cursor: var(--pf-c-label--m-editable--m-editable-active--Cursor);
10167
+ --pf-c-label--m-editable--TextDecoration: var(--pf-c-label--m-editable--m-editable-active--TextDecoration);
10168
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-editable--m-editable-active--BackgroundColor);
9999
10169
  }
10000
10170
 
10001
- .pf-c-sidebar__panel.pf-m-width-33 {
10002
- --pf-c-sidebar__panel--FlexBasis: 33%;
10171
+ .pf-c-label.pf-m-editable-active .pf-c-button {
10172
+ visibility: hidden;
10003
10173
  }
10004
10174
 
10005
- .pf-c-sidebar__panel.pf-m-width-50 {
10006
- --pf-c-sidebar__panel--FlexBasis: 50%;
10175
+ .pf-c-label .pf-c-button {
10176
+ --pf-c-button--FontSize: var(--pf-c-label__c-button--FontSize);
10177
+ --pf-c-button--PaddingTop: var(--pf-c-label__c-button--PaddingTop);
10178
+ --pf-c-button--PaddingRight: var(--pf-c-label__c-button--PaddingRight);
10179
+ --pf-c-button--PaddingBottom: var(--pf-c-label__c-button--PaddingBottom);
10180
+ --pf-c-button--PaddingLeft: var(--pf-c-label__c-button--PaddingLeft);
10181
+ margin-top: var(--pf-c-label__c-button--MarginTop);
10182
+ margin-right: var(--pf-c-label__c-button--MarginRight);
10183
+ margin-bottom: var(--pf-c-label__c-button--MarginBottom);
10184
+ margin-left: var(--pf-c-label__c-button--MarginLeft);
10007
10185
  }
10008
10186
 
10009
- .pf-c-sidebar__panel.pf-m-width-66 {
10010
- --pf-c-sidebar__panel--FlexBasis: 66%;
10187
+ .pf-c-label.pf-m-overflow, .pf-c-label.pf-m-add {
10188
+ --pf-c-label__content--Color: var(--pf-c-label--m-overflow__content--Color);
10189
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-overflow__content--BackgroundColor);
10190
+ --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-overflow__content--before--BorderWidth);
10191
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-overflow__content--before--BorderColor);
10192
+ --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-c-label--m-overflow__content--link--hover--before--BorderWidth);
10193
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-overflow__content--link--hover--before--BorderColor);
10194
+ --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-c-label--m-overflow__content--link--focus--before--BorderWidth);
10195
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-overflow__content--link--focus--before--BorderColor);
10011
10196
  }
10012
10197
 
10013
- .pf-c-sidebar__panel.pf-m-width-75 {
10014
- --pf-c-sidebar__panel--FlexBasis: 75%;
10198
+ .pf-c-label,
10199
+ .pf-c-label__content {
10200
+ display: inline-flex;
10201
+ align-items: center;
10015
10202
  }
10016
10203
 
10017
- .pf-c-sidebar__panel.pf-m-width-100 {
10018
- --pf-c-sidebar__panel--FlexBasis: 100%;
10204
+ .pf-c-label__text {
10205
+ overflow: hidden;
10206
+ text-overflow: ellipsis;
10207
+ white-space: nowrap;
10208
+ max-width: var(--pf-c-label__text--MaxWidth);
10019
10209
  }
10020
10210
 
10021
- @media (min-width: 576px) {
10022
- .pf-c-sidebar__panel.pf-m-width-default-on-sm {
10023
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10024
- }
10025
-
10026
- .pf-c-sidebar__panel.pf-m-width-25-on-sm {
10027
- --pf-c-sidebar__panel--FlexBasis: 25%;
10028
- }
10029
-
10030
- .pf-c-sidebar__panel.pf-m-width-33-on-sm {
10031
- --pf-c-sidebar__panel--FlexBasis: 33%;
10032
- }
10033
-
10034
- .pf-c-sidebar__panel.pf-m-width-50-on-sm {
10035
- --pf-c-sidebar__panel--FlexBasis: 50%;
10036
- }
10037
-
10038
- .pf-c-sidebar__panel.pf-m-width-66-on-sm {
10039
- --pf-c-sidebar__panel--FlexBasis: 66%;
10040
- }
10041
-
10042
- .pf-c-sidebar__panel.pf-m-width-75-on-sm {
10043
- --pf-c-sidebar__panel--FlexBasis: 75%;
10044
- }
10045
-
10046
- .pf-c-sidebar__panel.pf-m-width-100-on-sm {
10047
- --pf-c-sidebar__panel--FlexBasis: 100%;
10048
- }
10211
+ .pf-c-label__content {
10212
+ overflow: hidden;
10213
+ text-overflow: ellipsis;
10214
+ white-space: nowrap;
10215
+ max-width: var(--pf-c-label__content--MaxWidth);
10216
+ color: var(--pf-c-label__content--Color);
10217
+ border-width: 0;
10049
10218
  }
10050
- @media (min-width: 768px) {
10051
- .pf-c-sidebar__panel.pf-m-width-default-on-md {
10052
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10053
- }
10054
-
10055
- .pf-c-sidebar__panel.pf-m-width-25-on-md {
10056
- --pf-c-sidebar__panel--FlexBasis: 25%;
10057
- }
10058
-
10059
- .pf-c-sidebar__panel.pf-m-width-33-on-md {
10060
- --pf-c-sidebar__panel--FlexBasis: 33%;
10061
- }
10062
-
10063
- .pf-c-sidebar__panel.pf-m-width-50-on-md {
10064
- --pf-c-sidebar__panel--FlexBasis: 50%;
10065
- }
10066
-
10067
- .pf-c-sidebar__panel.pf-m-width-66-on-md {
10068
- --pf-c-sidebar__panel--FlexBasis: 66%;
10069
- }
10070
-
10071
- .pf-c-sidebar__panel.pf-m-width-75-on-md {
10072
- --pf-c-sidebar__panel--FlexBasis: 75%;
10073
- }
10074
10219
 
10075
- .pf-c-sidebar__panel.pf-m-width-100-on-md {
10076
- --pf-c-sidebar__panel--FlexBasis: 100%;
10077
- }
10220
+ .pf-c-label__content::before {
10221
+ position: absolute;
10222
+ top: 0;
10223
+ right: 0;
10224
+ bottom: 0;
10225
+ left: 0;
10226
+ pointer-events: none;
10227
+ content: "";
10228
+ border: var(--pf-c-label__content--before--BorderWidth) solid var(--pf-c-label__content--before--BorderColor);
10229
+ border-radius: var(--pf-c-label--BorderRadius);
10078
10230
  }
10079
- @media (min-width: 992px) {
10080
- .pf-c-sidebar__panel.pf-m-width-default-on-lg {
10081
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10082
- }
10083
-
10084
- .pf-c-sidebar__panel.pf-m-width-25-on-lg {
10085
- --pf-c-sidebar__panel--FlexBasis: 25%;
10086
- }
10087
-
10088
- .pf-c-sidebar__panel.pf-m-width-33-on-lg {
10089
- --pf-c-sidebar__panel--FlexBasis: 33%;
10090
- }
10091
-
10092
- .pf-c-sidebar__panel.pf-m-width-50-on-lg {
10093
- --pf-c-sidebar__panel--FlexBasis: 50%;
10094
- }
10095
-
10096
- .pf-c-sidebar__panel.pf-m-width-66-on-lg {
10097
- --pf-c-sidebar__panel--FlexBasis: 66%;
10098
- }
10099
-
10100
- .pf-c-sidebar__panel.pf-m-width-75-on-lg {
10101
- --pf-c-sidebar__panel--FlexBasis: 75%;
10102
- }
10103
10231
 
10104
- .pf-c-sidebar__panel.pf-m-width-100-on-lg {
10105
- --pf-c-sidebar__panel--FlexBasis: 100%;
10106
- }
10232
+ a.pf-c-label__content,
10233
+ button.pf-c-label__content {
10234
+ cursor: pointer;
10235
+ border: none;
10107
10236
  }
10108
- @media (min-width: 1200px) {
10109
- .pf-c-sidebar__panel.pf-m-width-default-on-xl {
10110
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10111
- }
10112
-
10113
- .pf-c-sidebar__panel.pf-m-width-25-on-xl {
10114
- --pf-c-sidebar__panel--FlexBasis: 25%;
10115
- }
10116
10237
 
10117
- .pf-c-sidebar__panel.pf-m-width-33-on-xl {
10118
- --pf-c-sidebar__panel--FlexBasis: 33%;
10119
- }
10238
+ a.pf-c-label__content, a.pf-c-label__content:hover, a.pf-c-label__content:focus,
10239
+ button.pf-c-label__content,
10240
+ button.pf-c-label__content:hover,
10241
+ button.pf-c-label__content:focus {
10242
+ text-decoration: none;
10243
+ }
10120
10244
 
10121
- .pf-c-sidebar__panel.pf-m-width-50-on-xl {
10122
- --pf-c-sidebar__panel--FlexBasis: 50%;
10123
- }
10245
+ a.pf-c-label__content:hover,
10246
+ button.pf-c-label__content:hover {
10247
+ --pf-c-label__content--before--BorderWidth: var(--pf-c-label__content--link--hover--before--BorderWidth);
10248
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label__content--link--hover--before--BorderColor);
10249
+ }
10124
10250
 
10125
- .pf-c-sidebar__panel.pf-m-width-66-on-xl {
10126
- --pf-c-sidebar__panel--FlexBasis: 66%;
10127
- }
10251
+ a.pf-c-label__content:focus,
10252
+ button.pf-c-label__content:focus {
10253
+ --pf-c-label__content--before--BorderWidth: var(--pf-c-label__content--link--focus--before--BorderWidth);
10254
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label__content--link--focus--before--BorderColor);
10255
+ }
10128
10256
 
10129
- .pf-c-sidebar__panel.pf-m-width-75-on-xl {
10130
- --pf-c-sidebar__panel--FlexBasis: 75%;
10131
- }
10257
+ .pf-c-label__icon {
10258
+ margin-right: var(--pf-c-label__icon--MarginRight);
10259
+ color: var(--pf-c-label__icon--Color);
10260
+ }
10132
10261
 
10133
- .pf-c-sidebar__panel.pf-m-width-100-on-xl {
10134
- --pf-c-sidebar__panel--FlexBasis: 100%;
10135
- }
10262
+ :where(.pf-theme-dark) .pf-c-label {
10263
+ --pf-c-label--BackgroundColor: var(--pf-global--BackgroundColor--300);
10264
+ --pf-c-label--m-blue--BackgroundColor: var(--pf-global--BackgroundColor--300);
10265
+ --pf-c-label--m-green--BackgroundColor: var(--pf-global--BackgroundColor--300);
10266
+ --pf-c-label--m-orange--BackgroundColor: var(--pf-global--BackgroundColor--300);
10267
+ --pf-c-label--m-red--BackgroundColor: var(--pf-global--BackgroundColor--300);
10268
+ --pf-c-label--m-purple--BackgroundColor: var(--pf-global--BackgroundColor--300);
10269
+ --pf-c-label--m-cyan--BackgroundColor: var(--pf-global--BackgroundColor--300);
10270
+ --pf-c-label__content--before--BorderWidth: 0;
10271
+ --pf-c-label__content--before--BorderColor: transparent;
10272
+ --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10273
+ --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10274
+ --pf-c-label--m-blue__content--Color: var(--pf-global--primary-color--100);
10275
+ --pf-c-label--m-outline--m-blue__content--before--BorderColor: var(--pf-global--active-color--200);
10276
+ --pf-c-label--m-outline--m-blue__content--link--hover--before--BorderColor: var(--pf-global--active-color--200);
10277
+ --pf-c-label--m-outline--m-blue__content--link--focus--before--BorderColor: var(--pf-global--active-color--200);
10278
+ --pf-c-label--m-green__content--Color: var(--pf-global--success-color--100);
10279
+ --pf-c-label--m-outline--m-green__content--before--BorderColor: var(--pf-global--palette--green-100);
10280
+ --pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor: var(--pf-global--palette--green-100);
10281
+ --pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor: var(--pf-global--palette--green-100);
10282
+ --pf-c-label--m-orange__content--Color: var(--pf-global--palette--orange-300);
10283
+ --pf-c-label--m-outline--m-orange__content--Color: var(--pf-global--palette--orange-300);
10284
+ --pf-c-label--m-outline--m-orange__content--before--BorderColor: var(--pf-global--palette--gold-100);
10285
+ --pf-c-label--m-outline--m-orange__content--link--hover--before--BorderColor: var(--pf-global--palette--gold-100);
10286
+ --pf-c-label--m-outline--m-orange__content--link--focus--before--BorderColor: var(--pf-global--palette--gold-100);
10287
+ --pf-c-label--m-red__content--Color: var(--pf-global--danger-color--100);
10288
+ --pf-c-label--m-outline--m-red__content--before--BorderColor: var(--pf-global--danger-color--100);
10289
+ --pf-c-label--m-outline--m-red__content--link--hover--before--BorderColor: var(--pf-global--danger-color--100);
10290
+ --pf-c-label--m-outline--m-red__content--link--focus--before--BorderColor: var(--pf-global--danger-color--100);
10291
+ --pf-c-label--m-purple__content--Color: var(--pf-global--palette--purple-300);
10292
+ --pf-c-label--m-purple__icon--Color: var(--pf-global--palette--purple-300);
10293
+ --pf-c-label--m-purple__content--link--hover--before--BorderColor: var(--pf-global--palette--purple-300);
10294
+ --pf-c-label--m-purple__content--link--focus--before--BorderColor: var(--pf-global--palette--purple-300);
10295
+ --pf-c-label--m-outline--m-purple__content--before--BorderColor: var(--pf-global--palette--purple-100);
10296
+ --pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor: var(--pf-global--palette--purple-100);
10297
+ --pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor: var(--pf-global--palette--purple-100);
10298
+ --pf-c-label--m-outline--m-purple__content--Color: var(--pf-global--palette--purple-300);
10299
+ --pf-c-label--m-cyan__content--Color: var(--pf-global--default-color--200);
10300
+ --pf-c-label--m-outline--m-cyan__content--Color: var(--pf-global--default-color--200);
10301
+ --pf-c-label--m-outline--m-cyan__content--before--BorderColor: var(--pf-global--palette--cyan-100);
10302
+ --pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--palette--cyan-100);
10303
+ --pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--palette--cyan-100);
10136
10304
  }
10137
- @media (min-width: 1450px) {
10138
- .pf-c-sidebar__panel.pf-m-width-default-on-2xl {
10139
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10140
- }
10141
-
10142
- .pf-c-sidebar__panel.pf-m-width-25-on-2xl {
10143
- --pf-c-sidebar__panel--FlexBasis: 25%;
10144
- }
10145
-
10146
- .pf-c-sidebar__panel.pf-m-width-33-on-2xl {
10147
- --pf-c-sidebar__panel--FlexBasis: 33%;
10148
- }
10149
-
10150
- .pf-c-sidebar__panel.pf-m-width-50-on-2xl {
10151
- --pf-c-sidebar__panel--FlexBasis: 50%;
10152
- }
10153
-
10154
- .pf-c-sidebar__panel.pf-m-width-66-on-2xl {
10155
- --pf-c-sidebar__panel--FlexBasis: 66%;
10156
- }
10157
-
10158
- .pf-c-sidebar__panel.pf-m-width-75-on-2xl {
10159
- --pf-c-sidebar__panel--FlexBasis: 75%;
10160
- }
10161
10305
 
10162
- .pf-c-sidebar__panel.pf-m-width-100-on-2xl {
10163
- --pf-c-sidebar__panel--FlexBasis: 100%;
10164
- }
10165
- }
10166
10306
  .pf-c-label-group {
10167
10307
  --pf-c-label-group__list--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
10168
10308
  --pf-c-label-group__list--MarginRight: calc(var(--pf-global--spacer--xs) * -1);
@@ -10393,469 +10533,329 @@ ul.pf-c-list {
10393
10533
  --pf-c-list--m-bordered--li--BorderBottomWidth: 0;
10394
10534
  }
10395
10535
 
10396
- .pf-c-label {
10397
- --pf-c-label--PaddingTop: var(--pf-global--spacer--xs);
10398
- --pf-c-label--PaddingRight: var(--pf-global--spacer--sm);
10399
- --pf-c-label--PaddingBottom: var(--pf-global--spacer--xs);
10400
- --pf-c-label--PaddingLeft: var(--pf-global--spacer--sm);
10401
- --pf-c-label--BorderRadius: var(--pf-global--BorderRadius--lg);
10402
- --pf-c-label--BackgroundColor: var(--pf-global--palette--black-150);
10403
- --pf-c-label--Color: var(--pf-global--Color--100);
10404
- --pf-c-label--FontSize: var(--pf-global--FontSize--sm);
10405
- --pf-c-label__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10406
- --pf-c-label__content--before--BorderColor: var(--pf-global--BorderColor--100);
10407
- --pf-c-label--m-outline--BackgroundColor: var(--pf-global--BackgroundColor--100);
10408
- --pf-c-label--m-outline__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10409
- --pf-c-label--m-outline__content--before--BorderColor: var(--pf-global--BorderColor--100);
10410
- --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
10411
- --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
10412
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--200);
10413
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--200);
10414
- --pf-c-label--m-outline__content--link--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
10415
- --pf-c-label--m-outline__content--link--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
10416
- --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10417
- --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10418
- --pf-c-label--m-blue--BackgroundColor: var(--pf-global--palette--blue-50);
10419
- --pf-c-label--m-blue__icon--Color: var(--pf-global--primary-color--100);
10420
- --pf-c-label--m-blue__content--Color: var(--pf-global--info-color--200);
10421
- --pf-c-label--m-blue__content--before--BorderColor: var(--pf-global--palette--blue-100);
10422
- --pf-c-label--m-blue__content--link--hover--before--BorderColor: var(--pf-global--primary-color--100);
10423
- --pf-c-label--m-blue__content--link--focus--before--BorderColor: var(--pf-global--primary-color--100);
10424
- --pf-c-label--m-outline--m-blue__content--Color: var(--pf-global--primary-color--100);
10425
- --pf-c-label--m-outline--m-blue__content--before--BorderColor: var(--pf-global--BorderColor--100);
10426
- --pf-c-label--m-outline--m-blue__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10427
- --pf-c-label--m-outline--m-blue__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10428
- --pf-c-label--m-green--BackgroundColor: var(--pf-global--palette--green-50);
10429
- --pf-c-label--m-green__icon--Color: var(--pf-global--success-color--100);
10430
- --pf-c-label--m-green__content--Color: var(--pf-global--success-color--200);
10431
- --pf-c-label--m-green__content--before--BorderColor: var(--pf-global--palette--green-100);
10432
- --pf-c-label--m-green__content--link--hover--before--BorderColor: var(--pf-global--success-color--100);
10433
- --pf-c-label--m-green__content--link--focus--before--BorderColor: var(--pf-global--success-color--100);
10434
- --pf-c-label--m-outline--m-green__content--Color: var(--pf-global--success-color--100);
10435
- --pf-c-label--m-outline--m-green__content--before--BorderColor: var(--pf-global--BorderColor--100);
10436
- --pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10437
- --pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10438
- --pf-c-label--m-orange--BackgroundColor: var(--pf-global--palette--orange-50);
10439
- --pf-c-label--m-orange__icon--Color: var(--pf-global--palette--orange-300);
10440
- --pf-c-label--m-orange__content--Color: var(--pf-global--palette--orange-700);
10441
- --pf-c-label--m-orange__content--before--BorderColor: var(--pf-global--palette--orange-100);
10442
- --pf-c-label--m-orange__content--link--hover--before--BorderColor: var(--pf-global--palette--orange-300);
10443
- --pf-c-label--m-orange__content--link--focus--before--BorderColor: var(--pf-global--palette--orange-300);
10444
- --pf-c-label--m-outline--m-orange__content--Color: var(--pf-global--palette--orange-500);
10445
- --pf-c-label--m-outline--m-orange__content--before--BorderColor: var(--pf-global--BorderColor--100);
10446
- --pf-c-label--m-outline--m-orange__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10447
- --pf-c-label--m-outline--m-orange__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10448
- --pf-c-label--m-red--BackgroundColor: var(--pf-global--palette--red-50);
10449
- --pf-c-label--m-red__icon--Color: var(--pf-global--danger-color--100);
10450
- --pf-c-label--m-red__content--Color: var(--pf-global--palette--red-300);
10451
- --pf-c-label--m-red__content--before--BorderColor: var(--pf-global--palette--red-100);
10452
- --pf-c-label--m-red__content--link--hover--before--BorderColor: var(--pf-global--danger-color--100);
10453
- --pf-c-label--m-red__content--link--focus--before--BorderColor: var(--pf-global--danger-color--100);
10454
- --pf-c-label--m-outline--m-red__content--Color: var(--pf-global--danger-color--100);
10455
- --pf-c-label--m-outline--m-red__content--before--BorderColor: var(--pf-global--BorderColor--100);
10456
- --pf-c-label--m-outline--m-red__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10457
- --pf-c-label--m-outline--m-red__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10458
- --pf-c-label--m-purple--BackgroundColor: var(--pf-global--palette--purple-50);
10459
- --pf-c-label--m-purple__icon--Color: var(--pf-global--palette--purple-500);
10460
- --pf-c-label--m-purple__content--Color: var(--pf-global--palette--purple-700);
10461
- --pf-c-label--m-purple__content--before--BorderColor: var(--pf-global--palette--purple-100);
10462
- --pf-c-label--m-purple__content--link--hover--before--BorderColor: var(--pf-global--palette--purple-500);
10463
- --pf-c-label--m-purple__content--link--focus--before--BorderColor: var(--pf-global--palette--purple-500);
10464
- --pf-c-label--m-outline--m-purple__content--Color: var(--pf-global--palette--purple-500);
10465
- --pf-c-label--m-outline--m-purple__content--before--BorderColor: var(--pf-global--BorderColor--100);
10466
- --pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10467
- --pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10468
- --pf-c-label--m-cyan--BackgroundColor: var(--pf-global--palette--cyan-50);
10469
- --pf-c-label--m-cyan__icon--Color: var(--pf-global--default-color--200);
10470
- --pf-c-label--m-cyan__content--Color: var(--pf-global--default-color--300);
10471
- --pf-c-label--m-cyan__content--before--BorderColor: var(--pf-global--palette--cyan-100);
10472
- --pf-c-label--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--default-color--200);
10473
- --pf-c-label--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--default-color--200);
10474
- --pf-c-label--m-outline--m-cyan__content--Color: var(--pf-global--palette--cyan-400);
10475
- --pf-c-label--m-outline--m-cyan__content--before--BorderColor: var(--pf-global--BorderColor--100);
10476
- --pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10477
- --pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10478
- --pf-c-label--m-gold--BackgroundColor: var(--pf-global--palette--gold-50);
10479
- --pf-c-label--m-gold__icon--Color: var(--pf-global--palette--gold-400);
10480
- --pf-c-label--m-gold__content--Color: var(--pf-global--palette--gold-700);
10481
- --pf-c-label--m-gold__content--before--BorderColor: var(--pf-global--palette--gold-100);
10482
- --pf-c-label--m-gold__content--link--hover--before--BorderColor: var(--pf-global--palette--gold-300);
10483
- --pf-c-label--m-gold__content--link--focus--before--BorderColor: var(--pf-global--palette--gold-300);
10484
- --pf-c-label--m-outline--m-gold__content--Color: var(--pf-global--palette--gold-600);
10485
- --pf-c-label--m-outline--m-gold__content--before--BorderColor: var(--pf-global--BorderColor--100);
10486
- --pf-c-label--m-outline--m-gold__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10487
- --pf-c-label--m-outline--m-gold__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10488
- --pf-c-label--m-overflow__content--Color: var(--pf-global--link--Color);
10489
- --pf-c-label--m-overflow__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
10490
- --pf-c-label--m-overflow__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10491
- --pf-c-label--m-overflow__content--before--BorderColor: var(--pf-global--BorderColor--300);
10492
- --pf-c-label--m-overflow__content--link--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
10493
- --pf-c-label--m-overflow__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--300);
10494
- --pf-c-label--m-overflow__content--link--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
10495
- --pf-c-label--m-overflow__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--300);
10496
- --pf-c-label--m-compact--PaddingTop: 0;
10497
- --pf-c-label--m-compact--PaddingRight: var(--pf-global--spacer--sm);
10498
- --pf-c-label--m-compact--PaddingBottom: 0;
10499
- --pf-c-label--m-compact--PaddingLeft: var(--pf-global--spacer--sm);
10500
- --pf-c-label--m-compact--FontSize: var(--pf-global--FontSize--xs);
10501
- --pf-c-label--m-compact--m-editable--TextDecorationOffset: 0.0625rem;
10502
- --pf-c-label__content--Color: var(--pf-global--Color--100);
10503
- --pf-c-label__content--MaxWidth: 100%;
10504
- --pf-c-label--m-outline__content--Color: var(--pf-global--Color--100);
10505
- --pf-c-label--m-editable__content--MaxWidth: 16ch;
10506
- --pf-c-label__text--MaxWidth: 16ch;
10507
- --pf-c-label__icon--Color: var(--pf-global--Color--100);
10508
- --pf-c-label__icon--MarginRight: var(--pf-global--spacer--xs);
10509
- --pf-c-label__c-button--FontSize: var(--pf-global--FontSize--xs);
10510
- --pf-c-label__c-button--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
10511
- --pf-c-label__c-button--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
10512
- --pf-c-label__c-button--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
10513
- --pf-c-label__c-button--MarginLeft: var(--pf-global--spacer--xs);
10514
- --pf-c-label__c-button--PaddingTop: var(--pf-global--spacer--xs);
10515
- --pf-c-label__c-button--PaddingRight: var(--pf-global--spacer--sm);
10516
- --pf-c-label__c-button--PaddingBottom: var(--pf-global--spacer--xs);
10517
- --pf-c-label__c-button--PaddingLeft: var(--pf-global--spacer--sm);
10518
- --pf-c-label--m-editable--Cursor: pointer;
10519
- --pf-c-label--m-editable--TextDecoration: underline;
10520
- --pf-c-label--m-editable--TextDecorationStyle: dashed;
10521
- --pf-c-label--m-editable--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
10522
- --pf-c-label--m-editable--TextDecorationOffset: 0.25rem;
10523
- --pf-c-label--m-editable--TextDecorationColor: var(--pf-global--BorderColor--200);
10524
- --pf-c-label--m-editable--hover--TextDecorationColor: var(--pf-global--Color--100);
10525
- --pf-c-label--m-editable--focus--TextDecorationColor: var(--pf-global--Color--100);
10526
- --pf-c-label--m-editable__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10527
- --pf-c-label--m-editable__content--before--BorderColor: var(--pf-global--BorderColor--100);
10528
- --pf-c-label--m-editable__content--hover--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10529
- --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10530
- --pf-c-label--m-editable__content--focus--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10531
- --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10532
- --pf-c-label--m-editable--m-editable-active--Cursor: auto;
10533
- --pf-c-label--m-editable--m-editable-active--TextDecoration: none;
10534
- --pf-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
10535
- --pf-c-label--m-editable--m-editable-active__content--before--BorderWidth: 0;
10536
- --pf-c-label--m-editable--m-editable-active__content--before--BorderColor: transparent;
10537
- position: relative;
10538
- padding: var(--pf-c-label--PaddingTop) var(--pf-c-label--PaddingRight) var(--pf-c-label--PaddingBottom) var(--pf-c-label--PaddingLeft);
10539
- font-size: var(--pf-c-label--FontSize);
10540
- color: var(--pf-c-label--Color);
10541
- white-space: nowrap;
10542
- background-color: var(--pf-c-label--BackgroundColor);
10543
- border: 0;
10544
- border-radius: var(--pf-c-label--BorderRadius);
10536
+ .pf-c-sidebar {
10537
+ --pf-c-sidebar--BackgroundColor: var(--pf-global--BackgroundColor--100);
10538
+ --pf-c-sidebar__main--FlexDirection: column;
10539
+ --pf-c-sidebar__main--md--FlexDirection: row;
10540
+ --pf-c-sidebar__main--AlignItems: stretch;
10541
+ --pf-c-sidebar__main--md--AlignItems: start;
10542
+ --pf-c-sidebar__main--child--MarginTop: 0;
10543
+ --pf-c-sidebar__main--child--MarginLeft: 0;
10544
+ --pf-c-sidebar--m-gutter__main--Gap: var(--pf-global--spacer--md);
10545
+ --pf-c-sidebar--m-gutter__main--xl--Gap: var(--pf-global--spacer--lg);
10546
+ --pf-c-sidebar--m-panel-right__panel--Order: 0;
10547
+ --pf-c-sidebar--m-panel-right__panel--md--Order: 1;
10548
+ --pf-c-sidebar--m-stack__main--FlexDirection: column;
10549
+ --pf-c-sidebar--m-stack__main--AlignItems: stretch;
10550
+ --pf-c-sidebar--m-stack__panel--Position: sticky;
10551
+ --pf-c-sidebar--m-stack__panel--Top: 0;
10552
+ --pf-c-sidebar--m-stack__panel--BoxShadow: var(--pf-c-sidebar__panel--BoxShadow--base);
10553
+ --pf-c-sidebar--m-stack--m-panel-right__panel--Order: 0;
10554
+ --pf-c-sidebar--m-split__main--AlignItems: start;
10555
+ --pf-c-sidebar--m-split__main--FlexDirection: row;
10556
+ --pf-c-sidebar--m-split__panel--Position: static;
10557
+ --pf-c-sidebar--m-split__panel--Top: auto;
10558
+ --pf-c-sidebar--m-split--m-panel-right__panel--Order: 1;
10559
+ --pf-c-sidebar__panel--FlexBasis--base: auto;
10560
+ --pf-c-sidebar__panel--BoxShadow--base: 0 0.25rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
10561
+ --pf-c-sidebar__panel--BoxShadow: var(--pf-c-sidebar__panel--BoxShadow--base);
10562
+ --pf-c-sidebar__panel--Top: 0;
10563
+ --pf-c-sidebar__panel--md--Top: auto;
10564
+ --pf-c-sidebar__panel--Position: sticky;
10565
+ --pf-c-sidebar__panel--md--Position: static;
10566
+ --pf-c-sidebar__panel--FlexBasis-base: auto;
10567
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis-base);
10568
+ --pf-c-sidebar__panel--md--FlexBasis: 15.625rem;
10569
+ --pf-c-sidebar__panel--m-split--FlexBasis: 15.625rem;
10570
+ --pf-c-sidebar__panel--m-stack--FlexBasis: auto;
10571
+ --pf-c-sidebar__panel--ZIndex: var(--pf-global--ZIndex--xs);
10572
+ --pf-c-sidebar__panel--Order: 0;
10573
+ --pf-c-sidebar__panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
10574
+ --pf-c-sidebar__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
10575
+ --pf-c-sidebar__panel--m-sticky--Top: 0;
10576
+ --pf-c-sidebar__panel--m-sticky--Position: sticky;
10577
+ height: 100%;
10578
+ }
10579
+
10580
+ @media (min-width: 768px) {
10581
+ .pf-c-sidebar {
10582
+ --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar__main--md--FlexDirection);
10583
+ --pf-c-sidebar__panel--BoxShadow: none;
10584
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--md--FlexBasis);
10585
+ --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar__main--md--AlignItems);
10586
+ --pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--md--Top);
10587
+ --pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--md--Position);
10588
+ }
10589
+ }
10590
+ @media (min-width: 1200px) {
10591
+ .pf-c-sidebar {
10592
+ --pf-c-sidebar--m-gutter__main--Gap: var(--pf-c-sidebar--m-gutter__main--xl--Gap);
10593
+ }
10594
+ }
10595
+ .pf-c-sidebar.pf-m-gutter {
10596
+ --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
10597
+ --pf-c-sidebar__main--child--MarginLeft: 0;
10598
+ }
10599
+
10600
+ .pf-c-sidebar.pf-m-gutter > .pf-c-sidebar__main > * + * {
10601
+ margin-top: var(--pf-c-sidebar__main--child--MarginTop);
10602
+ margin-left: var(--pf-c-sidebar__main--child--MarginLeft);
10545
10603
  }
10546
10604
 
10547
- .pf-c-label.pf-m-compact {
10548
- --pf-c-label--PaddingTop: var(--pf-c-label--m-compact--PaddingTop);
10549
- --pf-c-label--PaddingRight: var(--pf-c-label--m-compact--PaddingRight);
10550
- --pf-c-label--PaddingBottom: var(--pf-c-label--m-compact--PaddingBottom);
10551
- --pf-c-label--PaddingLeft: var(--pf-c-label--m-compact--PaddingLeft);
10552
- --pf-c-label--FontSize: var(--pf-c-label--m-compact--FontSize);
10553
- --pf-c-label--m-editable--TextDecorationOffset: var(--pf-c-label--m-compact--m-editable--TextDecorationOffset);
10605
+ @media (min-width: 768px) {
10606
+ .pf-c-sidebar.pf-m-gutter {
10607
+ --pf-c-sidebar__main--child--MarginTop: 0;
10608
+ --pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
10609
+ }
10610
+ }
10611
+ .pf-c-sidebar.pf-m-panel-right {
10612
+ --pf-c-sidebar__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--Order);
10554
10613
  }
10555
10614
 
10556
- .pf-c-label.pf-m-blue {
10557
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-blue--BackgroundColor);
10558
- --pf-c-label__icon--Color: var(--pf-c-label--m-blue__icon--Color);
10559
- --pf-c-label__content--Color: var(--pf-c-label--m-blue__content--Color);
10560
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
10561
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-blue__content--link--hover--before--BorderColor);
10562
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-blue__content--link--focus--before--BorderColor);
10563
- --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-blue__content--Color);
10564
- --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--before--BorderColor);
10565
- --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--link--hover--before--BorderColor);
10566
- --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--link--focus--before--BorderColor);
10567
- --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
10568
- --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
10569
- --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
10615
+ @media (min-width: 768px) {
10616
+ .pf-c-sidebar.pf-m-panel-right {
10617
+ --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--md--Order);
10618
+ }
10619
+ }
10620
+ .pf-c-sidebar.pf-m-stack {
10621
+ --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-stack__main--FlexDirection);
10622
+ --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-stack__main--AlignItems);
10623
+ --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
10624
+ --pf-c-sidebar__main--child--MarginLeft: 0;
10625
+ --pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-stack__panel--Position);
10626
+ --pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-stack__panel--Top);
10627
+ --pf-c-sidebar__panel--BoxShadow: var(--pf-c-sidebar--m-stack__panel--BoxShadow);
10628
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-stack--FlexBasis);
10629
+ --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-stack--m-panel-right__panel--Order);
10570
10630
  }
10571
10631
 
10572
- .pf-c-label.pf-m-green {
10573
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-green--BackgroundColor);
10574
- --pf-c-label__icon--Color: var(--pf-c-label--m-green__icon--Color);
10575
- --pf-c-label__content--Color: var(--pf-c-label--m-green__content--Color);
10576
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
10577
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-green__content--link--hover--before--BorderColor);
10578
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-green__content--link--focus--before--BorderColor);
10579
- --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-green__content--Color);
10580
- --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--before--BorderColor);
10581
- --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor);
10582
- --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor);
10583
- --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
10584
- --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
10585
- --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
10632
+ .pf-c-sidebar.pf-m-split {
10633
+ --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-split__main--FlexDirection);
10634
+ --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-split__main--AlignItems);
10635
+ --pf-c-sidebar__main--child--MarginTop: 0;
10636
+ --pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
10637
+ --pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-split__panel--Position);
10638
+ --pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-split__panel--Top);
10639
+ --pf-c-sidebar__panel--BoxShadow: none;
10640
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-split--FlexBasis);
10641
+ --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-split--m-panel-right__panel--Order);
10586
10642
  }
10587
10643
 
10588
- .pf-c-label.pf-m-orange {
10589
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-orange--BackgroundColor);
10590
- --pf-c-label__icon--Color: var(--pf-c-label--m-orange__icon--Color);
10591
- --pf-c-label__content--Color: var(--pf-c-label--m-orange__content--Color);
10592
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
10593
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-orange__content--link--hover--before--BorderColor);
10594
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-orange__content--link--focus--before--BorderColor);
10595
- --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-orange__content--Color);
10596
- --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--before--BorderColor);
10597
- --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--link--hover--before--BorderColor);
10598
- --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--link--focus--before--BorderColor);
10599
- --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
10600
- --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
10601
- --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
10644
+ .pf-c-sidebar__main {
10645
+ display: flex;
10646
+ flex-direction: var(--pf-c-sidebar__main--FlexDirection);
10647
+ align-items: var(--pf-c-sidebar__main--AlignItems);
10602
10648
  }
10603
10649
 
10604
- .pf-c-label.pf-m-red {
10605
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-red--BackgroundColor);
10606
- --pf-c-label__icon--Color: var(--pf-c-label--m-red__icon--Color);
10607
- --pf-c-label__content--Color: var(--pf-c-label--m-red__content--Color);
10608
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
10609
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-red__content--link--hover--before--BorderColor);
10610
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-red__content--link--focus--before--BorderColor);
10611
- --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-red__content--Color);
10612
- --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--before--BorderColor);
10613
- --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--link--hover--before--BorderColor);
10614
- --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--link--focus--before--BorderColor);
10615
- --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
10616
- --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
10617
- --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
10650
+ .pf-c-sidebar__panel {
10651
+ position: var(--pf-c-sidebar__panel--Position);
10652
+ top: var(--pf-c-sidebar__panel--Top);
10653
+ z-index: var(--pf-c-sidebar__panel--ZIndex);
10654
+ flex-shrink: 0;
10655
+ flex-basis: var(--pf-c-sidebar__panel--FlexBasis);
10656
+ order: var(--pf-c-sidebar__panel--Order);
10657
+ background-color: var(--pf-c-sidebar__panel--BackgroundColor);
10658
+ box-shadow: var(--pf-c-sidebar__panel--BoxShadow);
10618
10659
  }
10619
10660
 
10620
- .pf-c-label.pf-m-purple {
10621
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-purple--BackgroundColor);
10622
- --pf-c-label__icon--Color: var(--pf-c-label--m-purple__icon--Color);
10623
- --pf-c-label__content--Color: var(--pf-c-label--m-purple__content--Color);
10624
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
10625
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-purple__content--link--hover--before--BorderColor);
10626
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-purple__content--link--focus--before--BorderColor);
10627
- --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-purple__content--Color);
10628
- --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--before--BorderColor);
10629
- --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor);
10630
- --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor);
10631
- --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
10632
- --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
10633
- --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
10661
+ .pf-c-sidebar__panel.pf-m-sticky {
10662
+ --pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--m-sticky--Position);
10663
+ --pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--m-sticky--Top);
10634
10664
  }
10635
10665
 
10636
- .pf-c-label.pf-m-cyan {
10637
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-cyan--BackgroundColor);
10638
- --pf-c-label__icon--Color: var(--pf-c-label--m-cyan__icon--Color);
10639
- --pf-c-label__content--Color: var(--pf-c-label--m-cyan__content--Color);
10640
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
10641
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-cyan__content--link--hover--before--BorderColor);
10642
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-cyan__content--link--focus--before--BorderColor);
10643
- --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-cyan__content--Color);
10644
- --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--before--BorderColor);
10645
- --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor);
10646
- --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor);
10647
- --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
10648
- --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
10649
- --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
10666
+ .pf-c-sidebar__panel.pf-m-static {
10667
+ --pf-c-sidebar__panel--Position: static;
10668
+ --pf-c-sidebar__panel--Top: auto;
10650
10669
  }
10651
10670
 
10652
- .pf-c-label.pf-m-gold {
10653
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-gold--BackgroundColor);
10654
- --pf-c-label__icon--Color: var(--pf-c-label--m-gold__icon--Color);
10655
- --pf-c-label__content--Color: var(--pf-c-label--m-gold__content--Color);
10656
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
10657
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-gold__content--link--hover--before--BorderColor);
10658
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-gold__content--link--focus--before--BorderColor);
10659
- --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-gold__content--Color);
10660
- --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--before--BorderColor);
10661
- --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--link--hover--before--BorderColor);
10662
- --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--link--focus--before--BorderColor);
10663
- --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
10664
- --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
10665
- --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
10671
+ .pf-c-sidebar__content {
10672
+ flex-grow: 1;
10673
+ background-color: var(--pf-c-sidebar__content--BackgroundColor);
10666
10674
  }
10667
10675
 
10668
- .pf-c-label.pf-m-outline {
10669
- --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color);
10670
- --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--before--BorderWidth);
10671
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
10672
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-outline--BackgroundColor);
10673
- --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
10674
- --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
10675
- --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
10676
+ .pf-c-sidebar__content.pf-m-no-background {
10677
+ --pf-c-sidebar__content--BackgroundColor: transparent;
10678
+ }
10679
+
10680
+ .pf-c-sidebar.pf-m-no-background,
10681
+ .pf-c-sidebar__panel.pf-m-no-background,
10682
+ .pf-c-sidebar__content.pf-m-no-background {
10683
+ background-color: transparent;
10684
+ }
10685
+
10686
+ .pf-c-sidebar__panel.pf-m-width-default {
10687
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10688
+ }
10689
+
10690
+ .pf-c-sidebar__panel.pf-m-width-25 {
10691
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10692
+ }
10693
+
10694
+ .pf-c-sidebar__panel.pf-m-width-33 {
10695
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10696
+ }
10697
+
10698
+ .pf-c-sidebar__panel.pf-m-width-50 {
10699
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10700
+ }
10701
+
10702
+ .pf-c-sidebar__panel.pf-m-width-66 {
10703
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10704
+ }
10705
+
10706
+ .pf-c-sidebar__panel.pf-m-width-75 {
10707
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10708
+ }
10709
+
10710
+ .pf-c-sidebar__panel.pf-m-width-100 {
10711
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10712
+ }
10713
+
10714
+ @media (min-width: 576px) {
10715
+ .pf-c-sidebar__panel.pf-m-width-default-on-sm {
10716
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10717
+ }
10718
+
10719
+ .pf-c-sidebar__panel.pf-m-width-25-on-sm {
10720
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10721
+ }
10722
+
10723
+ .pf-c-sidebar__panel.pf-m-width-33-on-sm {
10724
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10725
+ }
10726
+
10727
+ .pf-c-sidebar__panel.pf-m-width-50-on-sm {
10728
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10729
+ }
10730
+
10731
+ .pf-c-sidebar__panel.pf-m-width-66-on-sm {
10732
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10733
+ }
10734
+
10735
+ .pf-c-sidebar__panel.pf-m-width-75-on-sm {
10736
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10737
+ }
10738
+
10739
+ .pf-c-sidebar__panel.pf-m-width-100-on-sm {
10740
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10741
+ }
10676
10742
  }
10743
+ @media (min-width: 768px) {
10744
+ .pf-c-sidebar__panel.pf-m-width-default-on-md {
10745
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10746
+ }
10747
+
10748
+ .pf-c-sidebar__panel.pf-m-width-25-on-md {
10749
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10750
+ }
10751
+
10752
+ .pf-c-sidebar__panel.pf-m-width-33-on-md {
10753
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10754
+ }
10755
+
10756
+ .pf-c-sidebar__panel.pf-m-width-50-on-md {
10757
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10758
+ }
10759
+
10760
+ .pf-c-sidebar__panel.pf-m-width-66-on-md {
10761
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10762
+ }
10677
10763
 
10678
- .pf-c-label.pf-m-overflow:hover,
10679
- .pf-c-label.pf-m-add:hover, .pf-c-label.pf-m-outline a.pf-c-label__content:hover,
10680
- .pf-c-label.pf-m-outline button.pf-c-label__content:hover {
10681
- --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--link--hover--before--BorderWidth);
10682
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--link--hover--before--BorderColor);
10683
- }
10764
+ .pf-c-sidebar__panel.pf-m-width-75-on-md {
10765
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10766
+ }
10684
10767
 
10685
- .pf-c-label.pf-m-overflow:focus,
10686
- .pf-c-label.pf-m-add:focus, .pf-c-label.pf-m-outline a.pf-c-label__content:focus,
10687
- .pf-c-label.pf-m-outline button.pf-c-label__content:focus {
10688
- --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--link--focus--before--BorderWidth);
10689
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--link--focus--before--BorderColor);
10768
+ .pf-c-sidebar__panel.pf-m-width-100-on-md {
10769
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10770
+ }
10690
10771
  }
10772
+ @media (min-width: 992px) {
10773
+ .pf-c-sidebar__panel.pf-m-width-default-on-lg {
10774
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10775
+ }
10691
10776
 
10692
- .pf-c-label.pf-m-editable {
10693
- text-decoration: var(--pf-c-label--m-editable--TextDecoration);
10694
- cursor: var(--pf-c-label--m-editable--Cursor);
10695
- text-decoration-style: var(--pf-c-label--m-editable--TextDecorationStyle);
10696
- text-decoration-thickness: var(--pf-c-label--m-editable--TextDecorationThickness);
10697
- text-underline-offset: var(--pf-c-label--m-editable--TextDecorationOffset);
10698
- text-decoration-color: var(--pf-c-label--m-editable--TextDecorationColor);
10699
- --pf-c-label__content--MaxWidth: var(--pf-c-label--m-editable__content--MaxWidth);
10700
- --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
10701
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-editable__content--before--BorderColor);
10702
- --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-c-label--m-editable__content--hover--before--BorderWidth);
10703
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-editable__content--hover--before--BorderColor);
10704
- --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-c-label--m-editable__content--focus--before--BorderWidth);
10705
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-editable__content--focus--before--BorderColor);
10706
- --pf-c-label--m-outline__content--link--hover--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
10707
- --pf-c-label--m-outline__content--link--focus--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
10708
- }
10777
+ .pf-c-sidebar__panel.pf-m-width-25-on-lg {
10778
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10779
+ }
10709
10780
 
10710
- .pf-c-label.pf-m-editable:hover {
10711
- --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--hover--TextDecorationColor);
10712
- }
10781
+ .pf-c-sidebar__panel.pf-m-width-33-on-lg {
10782
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10783
+ }
10713
10784
 
10714
- .pf-c-label.pf-m-editable:focus {
10715
- --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--focus--TextDecorationColor);
10716
- }
10785
+ .pf-c-sidebar__panel.pf-m-width-50-on-lg {
10786
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10787
+ }
10717
10788
 
10718
- .pf-c-label.pf-m-editable-active {
10719
- --pf-c-label--m-editable--Cursor: var(--pf-c-label--m-editable--m-editable-active--Cursor);
10720
- --pf-c-label--m-editable--TextDecoration: var(--pf-c-label--m-editable--m-editable-active--TextDecoration);
10721
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-editable--m-editable-active--BackgroundColor);
10722
- }
10789
+ .pf-c-sidebar__panel.pf-m-width-66-on-lg {
10790
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10791
+ }
10723
10792
 
10724
- .pf-c-label.pf-m-editable-active .pf-c-button {
10725
- visibility: hidden;
10726
- }
10793
+ .pf-c-sidebar__panel.pf-m-width-75-on-lg {
10794
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10795
+ }
10727
10796
 
10728
- .pf-c-label .pf-c-button {
10729
- --pf-c-button--FontSize: var(--pf-c-label__c-button--FontSize);
10730
- --pf-c-button--PaddingTop: var(--pf-c-label__c-button--PaddingTop);
10731
- --pf-c-button--PaddingRight: var(--pf-c-label__c-button--PaddingRight);
10732
- --pf-c-button--PaddingBottom: var(--pf-c-label__c-button--PaddingBottom);
10733
- --pf-c-button--PaddingLeft: var(--pf-c-label__c-button--PaddingLeft);
10734
- margin-top: var(--pf-c-label__c-button--MarginTop);
10735
- margin-right: var(--pf-c-label__c-button--MarginRight);
10736
- margin-bottom: var(--pf-c-label__c-button--MarginBottom);
10737
- margin-left: var(--pf-c-label__c-button--MarginLeft);
10797
+ .pf-c-sidebar__panel.pf-m-width-100-on-lg {
10798
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10799
+ }
10738
10800
  }
10801
+ @media (min-width: 1200px) {
10802
+ .pf-c-sidebar__panel.pf-m-width-default-on-xl {
10803
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10804
+ }
10739
10805
 
10740
- .pf-c-label.pf-m-overflow, .pf-c-label.pf-m-add {
10741
- --pf-c-label__content--Color: var(--pf-c-label--m-overflow__content--Color);
10742
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-overflow__content--BackgroundColor);
10743
- --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-overflow__content--before--BorderWidth);
10744
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-overflow__content--before--BorderColor);
10745
- --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-c-label--m-overflow__content--link--hover--before--BorderWidth);
10746
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-overflow__content--link--hover--before--BorderColor);
10747
- --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-c-label--m-overflow__content--link--focus--before--BorderWidth);
10748
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-overflow__content--link--focus--before--BorderColor);
10749
- }
10806
+ .pf-c-sidebar__panel.pf-m-width-25-on-xl {
10807
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10808
+ }
10750
10809
 
10751
- .pf-c-label,
10752
- .pf-c-label__content {
10753
- display: inline-flex;
10754
- align-items: center;
10755
- }
10810
+ .pf-c-sidebar__panel.pf-m-width-33-on-xl {
10811
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10812
+ }
10756
10813
 
10757
- .pf-c-label__text {
10758
- overflow: hidden;
10759
- text-overflow: ellipsis;
10760
- white-space: nowrap;
10761
- max-width: var(--pf-c-label__text--MaxWidth);
10762
- }
10814
+ .pf-c-sidebar__panel.pf-m-width-50-on-xl {
10815
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10816
+ }
10763
10817
 
10764
- .pf-c-label__content {
10765
- overflow: hidden;
10766
- text-overflow: ellipsis;
10767
- white-space: nowrap;
10768
- max-width: var(--pf-c-label__content--MaxWidth);
10769
- color: var(--pf-c-label__content--Color);
10770
- border-width: 0;
10771
- }
10818
+ .pf-c-sidebar__panel.pf-m-width-66-on-xl {
10819
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10820
+ }
10772
10821
 
10773
- .pf-c-label__content::before {
10774
- position: absolute;
10775
- top: 0;
10776
- right: 0;
10777
- bottom: 0;
10778
- left: 0;
10779
- pointer-events: none;
10780
- content: "";
10781
- border: var(--pf-c-label__content--before--BorderWidth) solid var(--pf-c-label__content--before--BorderColor);
10782
- border-radius: var(--pf-c-label--BorderRadius);
10783
- }
10822
+ .pf-c-sidebar__panel.pf-m-width-75-on-xl {
10823
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10824
+ }
10784
10825
 
10785
- a.pf-c-label__content,
10786
- button.pf-c-label__content {
10787
- cursor: pointer;
10788
- border: none;
10826
+ .pf-c-sidebar__panel.pf-m-width-100-on-xl {
10827
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10828
+ }
10789
10829
  }
10830
+ @media (min-width: 1450px) {
10831
+ .pf-c-sidebar__panel.pf-m-width-default-on-2xl {
10832
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10833
+ }
10790
10834
 
10791
- a.pf-c-label__content, a.pf-c-label__content:hover, a.pf-c-label__content:focus,
10792
- button.pf-c-label__content,
10793
- button.pf-c-label__content:hover,
10794
- button.pf-c-label__content:focus {
10795
- text-decoration: none;
10796
- }
10835
+ .pf-c-sidebar__panel.pf-m-width-25-on-2xl {
10836
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10837
+ }
10797
10838
 
10798
- a.pf-c-label__content:hover,
10799
- button.pf-c-label__content:hover {
10800
- --pf-c-label__content--before--BorderWidth: var(--pf-c-label__content--link--hover--before--BorderWidth);
10801
- --pf-c-label__content--before--BorderColor: var(--pf-c-label__content--link--hover--before--BorderColor);
10802
- }
10839
+ .pf-c-sidebar__panel.pf-m-width-33-on-2xl {
10840
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10841
+ }
10803
10842
 
10804
- a.pf-c-label__content:focus,
10805
- button.pf-c-label__content:focus {
10806
- --pf-c-label__content--before--BorderWidth: var(--pf-c-label__content--link--focus--before--BorderWidth);
10807
- --pf-c-label__content--before--BorderColor: var(--pf-c-label__content--link--focus--before--BorderColor);
10808
- }
10843
+ .pf-c-sidebar__panel.pf-m-width-50-on-2xl {
10844
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10845
+ }
10809
10846
 
10810
- .pf-c-label__icon {
10811
- margin-right: var(--pf-c-label__icon--MarginRight);
10812
- color: var(--pf-c-label__icon--Color);
10813
- }
10847
+ .pf-c-sidebar__panel.pf-m-width-66-on-2xl {
10848
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10849
+ }
10814
10850
 
10815
- :where(.pf-theme-dark) .pf-c-label {
10816
- --pf-c-label--BackgroundColor: var(--pf-global--BackgroundColor--300);
10817
- --pf-c-label--m-blue--BackgroundColor: var(--pf-global--BackgroundColor--300);
10818
- --pf-c-label--m-green--BackgroundColor: var(--pf-global--BackgroundColor--300);
10819
- --pf-c-label--m-orange--BackgroundColor: var(--pf-global--BackgroundColor--300);
10820
- --pf-c-label--m-red--BackgroundColor: var(--pf-global--BackgroundColor--300);
10821
- --pf-c-label--m-purple--BackgroundColor: var(--pf-global--BackgroundColor--300);
10822
- --pf-c-label--m-cyan--BackgroundColor: var(--pf-global--BackgroundColor--300);
10823
- --pf-c-label__content--before--BorderWidth: 0;
10824
- --pf-c-label__content--before--BorderColor: transparent;
10825
- --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10826
- --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10827
- --pf-c-label--m-blue__content--Color: var(--pf-global--primary-color--100);
10828
- --pf-c-label--m-outline--m-blue__content--before--BorderColor: var(--pf-global--active-color--200);
10829
- --pf-c-label--m-outline--m-blue__content--link--hover--before--BorderColor: var(--pf-global--active-color--200);
10830
- --pf-c-label--m-outline--m-blue__content--link--focus--before--BorderColor: var(--pf-global--active-color--200);
10831
- --pf-c-label--m-green__content--Color: var(--pf-global--success-color--100);
10832
- --pf-c-label--m-outline--m-green__content--before--BorderColor: var(--pf-global--palette--green-100);
10833
- --pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor: var(--pf-global--palette--green-100);
10834
- --pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor: var(--pf-global--palette--green-100);
10835
- --pf-c-label--m-orange__content--Color: var(--pf-global--palette--orange-300);
10836
- --pf-c-label--m-outline--m-orange__content--Color: var(--pf-global--palette--orange-300);
10837
- --pf-c-label--m-outline--m-orange__content--before--BorderColor: var(--pf-global--palette--gold-100);
10838
- --pf-c-label--m-outline--m-orange__content--link--hover--before--BorderColor: var(--pf-global--palette--gold-100);
10839
- --pf-c-label--m-outline--m-orange__content--link--focus--before--BorderColor: var(--pf-global--palette--gold-100);
10840
- --pf-c-label--m-red__content--Color: var(--pf-global--danger-color--100);
10841
- --pf-c-label--m-outline--m-red__content--before--BorderColor: var(--pf-global--danger-color--100);
10842
- --pf-c-label--m-outline--m-red__content--link--hover--before--BorderColor: var(--pf-global--danger-color--100);
10843
- --pf-c-label--m-outline--m-red__content--link--focus--before--BorderColor: var(--pf-global--danger-color--100);
10844
- --pf-c-label--m-purple__content--Color: var(--pf-global--palette--purple-300);
10845
- --pf-c-label--m-purple__icon--Color: var(--pf-global--palette--purple-300);
10846
- --pf-c-label--m-purple__content--link--hover--before--BorderColor: var(--pf-global--palette--purple-300);
10847
- --pf-c-label--m-purple__content--link--focus--before--BorderColor: var(--pf-global--palette--purple-300);
10848
- --pf-c-label--m-outline--m-purple__content--before--BorderColor: var(--pf-global--palette--purple-100);
10849
- --pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor: var(--pf-global--palette--purple-100);
10850
- --pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor: var(--pf-global--palette--purple-100);
10851
- --pf-c-label--m-outline--m-purple__content--Color: var(--pf-global--palette--purple-300);
10852
- --pf-c-label--m-cyan__content--Color: var(--pf-global--default-color--200);
10853
- --pf-c-label--m-outline--m-cyan__content--Color: var(--pf-global--default-color--200);
10854
- --pf-c-label--m-outline--m-cyan__content--before--BorderColor: var(--pf-global--palette--cyan-100);
10855
- --pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--palette--cyan-100);
10856
- --pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--palette--cyan-100);
10857
- }
10851
+ .pf-c-sidebar__panel.pf-m-width-75-on-2xl {
10852
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10853
+ }
10858
10854
 
10855
+ .pf-c-sidebar__panel.pf-m-width-100-on-2xl {
10856
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10857
+ }
10858
+ }
10859
10859
  .pf-c-login__footer, .pf-c-login__header {
10860
10860
  --pf-global--Color--100: var(--pf-global--Color--light-100);
10861
10861
  --pf-global--Color--200: var(--pf-global--Color--light-200);
@@ -27477,18 +27477,6 @@ label.pf-c-tree-view__node-text {
27477
27477
  grid-gap: var(--pf-l-grid--m-gutter--GridGap);
27478
27478
  }
27479
27479
 
27480
- .pf-l-level {
27481
- --pf-l-level--m-gutter--MarginRight: var(--pf-global--gutter);
27482
- display: flex;
27483
- flex-wrap: wrap;
27484
- align-items: center;
27485
- justify-content: space-between;
27486
- }
27487
-
27488
- .pf-l-level.pf-m-gutter > *:not(:last-child) {
27489
- margin-right: var(--pf-l-level--m-gutter--MarginRight);
27490
- }
27491
-
27492
27480
  .pf-l-split {
27493
27481
  --pf-l-split--m-gutter--MarginRight: var(--pf-global--gutter);
27494
27482
  display: flex;
@@ -27508,6 +27496,18 @@ label.pf-c-tree-view__node-text {
27508
27496
  margin-right: var(--pf-l-split--m-gutter--MarginRight);
27509
27497
  }
27510
27498
 
27499
+ .pf-l-level {
27500
+ --pf-l-level--m-gutter--MarginRight: var(--pf-global--gutter);
27501
+ display: flex;
27502
+ flex-wrap: wrap;
27503
+ align-items: center;
27504
+ justify-content: space-between;
27505
+ }
27506
+
27507
+ .pf-l-level.pf-m-gutter > *:not(:last-child) {
27508
+ margin-right: var(--pf-l-level--m-gutter--MarginRight);
27509
+ }
27510
+
27511
27511
  .pf-l-stack {
27512
27512
  --pf-l-stack--m-gutter--MarginBottom: var(--pf-global--gutter);
27513
27513
  display: flex;