@patternfly/react-core 4.242.7 → 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 (29) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/esm/components/Menu/Menu.d.ts.map +1 -1
  3. package/dist/esm/components/Menu/Menu.js +1 -1
  4. package/dist/esm/components/Menu/Menu.js.map +1 -1
  5. package/dist/esm/components/Select/Select.d.ts.map +1 -1
  6. package/dist/esm/components/Select/Select.js +4 -1
  7. package/dist/esm/components/Select/Select.js.map +1 -1
  8. package/dist/js/components/Menu/Menu.d.ts.map +1 -1
  9. package/dist/js/components/Menu/Menu.js +1 -1
  10. package/dist/js/components/Menu/Menu.js.map +1 -1
  11. package/dist/js/components/Select/Select.d.ts.map +1 -1
  12. package/dist/js/components/Select/Select.js +4 -1
  13. package/dist/js/components/Select/Select.js.map +1 -1
  14. package/dist/umd/react-core.min.css +937 -937
  15. package/dist/umd/react-core.min.js +2 -2
  16. package/package.json +2 -2
  17. package/src/components/Menu/Menu.tsx +3 -1
  18. package/src/components/Select/Select.tsx +7 -1
  19. package/src/demos/ComposableMenu/examples/ComposableActionsMenu.tsx +1 -1
  20. package/src/demos/ComposableMenu/examples/ComposableApplicationLauncher.tsx +3 -1
  21. package/src/demos/ComposableMenu/examples/ComposableContextSelector.tsx +3 -1
  22. package/src/demos/ComposableMenu/examples/ComposableDrilldownMenu.tsx +1 -1
  23. package/src/demos/ComposableMenu/examples/ComposableDropdwnVariants.tsx +3 -1
  24. package/src/demos/ComposableMenu/examples/ComposableFlyout.tsx +1 -1
  25. package/src/demos/ComposableMenu/examples/ComposableOptionsMenuVariants.tsx +3 -1
  26. package/src/demos/ComposableMenu/examples/ComposableSimpleCheckboxSelect.tsx +1 -1
  27. package/src/demos/ComposableMenu/examples/ComposableSimpleDropdown.tsx +1 -1
  28. package/src/demos/ComposableMenu/examples/ComposableSimpleSelect.tsx +1 -1
  29. package/src/demos/ComposableMenu/examples/ComposableTreeViewMenu.tsx +1 -1
@@ -9840,1022 +9840,1022 @@ 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
- }
9926
- }
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);
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);
9937
10049
  }
9938
10050
 
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);
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);
9949
10065
  }
9950
10066
 
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);
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);
9955
10081
  }
9956
10082
 
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);
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);
9966
10097
  }
9967
10098
 
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);
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);
9971
10113
  }
9972
10114
 
9973
- .pf-c-sidebar__panel.pf-m-static {
9974
- --pf-c-sidebar__panel--Position: static;
9975
- --pf-c-sidebar__panel--Top: auto;
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);
9976
10123
  }
9977
10124
 
9978
- .pf-c-sidebar__content {
9979
- flex-grow: 1;
9980
- background-color: var(--pf-c-sidebar__content--BackgroundColor);
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);
9981
10130
  }
9982
10131
 
9983
- .pf-c-sidebar__content.pf-m-no-background {
9984
- --pf-c-sidebar__content--BackgroundColor: transparent;
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);
9985
10137
  }
9986
10138
 
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;
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);
9991
10155
  }
9992
10156
 
9993
- .pf-c-sidebar__panel.pf-m-width-default {
9994
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10157
+ .pf-c-label.pf-m-editable:hover {
10158
+ --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--hover--TextDecorationColor);
9995
10159
  }
9996
10160
 
9997
- .pf-c-sidebar__panel.pf-m-width-25 {
9998
- --pf-c-sidebar__panel--FlexBasis: 25%;
10161
+ .pf-c-label.pf-m-editable:focus {
10162
+ --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--focus--TextDecorationColor);
9999
10163
  }
10000
10164
 
10001
- .pf-c-sidebar__panel.pf-m-width-33 {
10002
- --pf-c-sidebar__panel--FlexBasis: 33%;
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);
10003
10169
  }
10004
10170
 
10005
- .pf-c-sidebar__panel.pf-m-width-50 {
10006
- --pf-c-sidebar__panel--FlexBasis: 50%;
10171
+ .pf-c-label.pf-m-editable-active .pf-c-button {
10172
+ visibility: hidden;
10007
10173
  }
10008
10174
 
10009
- .pf-c-sidebar__panel.pf-m-width-66 {
10010
- --pf-c-sidebar__panel--FlexBasis: 66%;
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);
10011
10185
  }
10012
10186
 
10013
- .pf-c-sidebar__panel.pf-m-width-75 {
10014
- --pf-c-sidebar__panel--FlexBasis: 75%;
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);
10015
10196
  }
10016
10197
 
10017
- .pf-c-sidebar__panel.pf-m-width-100 {
10018
- --pf-c-sidebar__panel--FlexBasis: 100%;
10198
+ .pf-c-label,
10199
+ .pf-c-label__content {
10200
+ display: inline-flex;
10201
+ align-items: center;
10019
10202
  }
10020
10203
 
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
- }
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);
10209
+ }
10025
10210
 
10026
- .pf-c-sidebar__panel.pf-m-width-25-on-sm {
10027
- --pf-c-sidebar__panel--FlexBasis: 25%;
10028
- }
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;
10218
+ }
10029
10219
 
10030
- .pf-c-sidebar__panel.pf-m-width-33-on-sm {
10031
- --pf-c-sidebar__panel--FlexBasis: 33%;
10032
- }
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);
10230
+ }
10033
10231
 
10034
- .pf-c-sidebar__panel.pf-m-width-50-on-sm {
10035
- --pf-c-sidebar__panel--FlexBasis: 50%;
10036
- }
10232
+ a.pf-c-label__content,
10233
+ button.pf-c-label__content {
10234
+ cursor: pointer;
10235
+ border: none;
10236
+ }
10037
10237
 
10038
- .pf-c-sidebar__panel.pf-m-width-66-on-sm {
10039
- --pf-c-sidebar__panel--FlexBasis: 66%;
10040
- }
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
+ }
10041
10244
 
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
- }
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);
10049
10249
  }
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
10250
 
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
-
10075
- .pf-c-sidebar__panel.pf-m-width-100-on-md {
10076
- --pf-c-sidebar__panel--FlexBasis: 100%;
10077
- }
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);
10078
10255
  }
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
10256
 
10104
- .pf-c-sidebar__panel.pf-m-width-100-on-lg {
10105
- --pf-c-sidebar__panel--FlexBasis: 100%;
10106
- }
10257
+ .pf-c-label__icon {
10258
+ margin-right: var(--pf-c-label__icon--MarginRight);
10259
+ color: var(--pf-c-label__icon--Color);
10107
10260
  }
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
10261
 
10113
- .pf-c-sidebar__panel.pf-m-width-25-on-xl {
10114
- --pf-c-sidebar__panel--FlexBasis: 25%;
10115
- }
10116
-
10117
- .pf-c-sidebar__panel.pf-m-width-33-on-xl {
10118
- --pf-c-sidebar__panel--FlexBasis: 33%;
10119
- }
10120
-
10121
- .pf-c-sidebar__panel.pf-m-width-50-on-xl {
10122
- --pf-c-sidebar__panel--FlexBasis: 50%;
10123
- }
10124
-
10125
- .pf-c-sidebar__panel.pf-m-width-66-on-xl {
10126
- --pf-c-sidebar__panel--FlexBasis: 66%;
10127
- }
10128
-
10129
- .pf-c-sidebar__panel.pf-m-width-75-on-xl {
10130
- --pf-c-sidebar__panel--FlexBasis: 75%;
10131
- }
10132
-
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
10305
 
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
-
10162
- .pf-c-sidebar__panel.pf-m-width-100-on-2xl {
10163
- --pf-c-sidebar__panel--FlexBasis: 100%;
10164
- }
10165
- }
10166
- .pf-c-label {
10167
- --pf-c-label--PaddingTop: var(--pf-global--spacer--xs);
10168
- --pf-c-label--PaddingRight: var(--pf-global--spacer--sm);
10169
- --pf-c-label--PaddingBottom: var(--pf-global--spacer--xs);
10170
- --pf-c-label--PaddingLeft: var(--pf-global--spacer--sm);
10171
- --pf-c-label--BorderRadius: var(--pf-global--BorderRadius--lg);
10172
- --pf-c-label--BackgroundColor: var(--pf-global--palette--black-150);
10173
- --pf-c-label--Color: var(--pf-global--Color--100);
10174
- --pf-c-label--FontSize: var(--pf-global--FontSize--sm);
10175
- --pf-c-label__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10176
- --pf-c-label__content--before--BorderColor: var(--pf-global--BorderColor--100);
10177
- --pf-c-label--m-outline--BackgroundColor: var(--pf-global--BackgroundColor--100);
10178
- --pf-c-label--m-outline__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10179
- --pf-c-label--m-outline__content--before--BorderColor: var(--pf-global--BorderColor--100);
10180
- --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
10181
- --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
10182
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--200);
10183
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--200);
10184
- --pf-c-label--m-outline__content--link--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
10185
- --pf-c-label--m-outline__content--link--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
10186
- --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10187
- --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10188
- --pf-c-label--m-blue--BackgroundColor: var(--pf-global--palette--blue-50);
10189
- --pf-c-label--m-blue__icon--Color: var(--pf-global--primary-color--100);
10190
- --pf-c-label--m-blue__content--Color: var(--pf-global--info-color--200);
10191
- --pf-c-label--m-blue__content--before--BorderColor: var(--pf-global--palette--blue-100);
10192
- --pf-c-label--m-blue__content--link--hover--before--BorderColor: var(--pf-global--primary-color--100);
10193
- --pf-c-label--m-blue__content--link--focus--before--BorderColor: var(--pf-global--primary-color--100);
10194
- --pf-c-label--m-outline--m-blue__content--Color: var(--pf-global--primary-color--100);
10195
- --pf-c-label--m-outline--m-blue__content--before--BorderColor: var(--pf-global--BorderColor--100);
10196
- --pf-c-label--m-outline--m-blue__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10197
- --pf-c-label--m-outline--m-blue__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10198
- --pf-c-label--m-green--BackgroundColor: var(--pf-global--palette--green-50);
10199
- --pf-c-label--m-green__icon--Color: var(--pf-global--success-color--100);
10200
- --pf-c-label--m-green__content--Color: var(--pf-global--success-color--200);
10201
- --pf-c-label--m-green__content--before--BorderColor: var(--pf-global--palette--green-100);
10202
- --pf-c-label--m-green__content--link--hover--before--BorderColor: var(--pf-global--success-color--100);
10203
- --pf-c-label--m-green__content--link--focus--before--BorderColor: var(--pf-global--success-color--100);
10204
- --pf-c-label--m-outline--m-green__content--Color: var(--pf-global--success-color--100);
10205
- --pf-c-label--m-outline--m-green__content--before--BorderColor: var(--pf-global--BorderColor--100);
10206
- --pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10207
- --pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10208
- --pf-c-label--m-orange--BackgroundColor: var(--pf-global--palette--orange-50);
10209
- --pf-c-label--m-orange__icon--Color: var(--pf-global--palette--orange-300);
10210
- --pf-c-label--m-orange__content--Color: var(--pf-global--palette--orange-700);
10211
- --pf-c-label--m-orange__content--before--BorderColor: var(--pf-global--palette--orange-100);
10212
- --pf-c-label--m-orange__content--link--hover--before--BorderColor: var(--pf-global--palette--orange-300);
10213
- --pf-c-label--m-orange__content--link--focus--before--BorderColor: var(--pf-global--palette--orange-300);
10214
- --pf-c-label--m-outline--m-orange__content--Color: var(--pf-global--palette--orange-500);
10215
- --pf-c-label--m-outline--m-orange__content--before--BorderColor: var(--pf-global--BorderColor--100);
10216
- --pf-c-label--m-outline--m-orange__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10217
- --pf-c-label--m-outline--m-orange__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10218
- --pf-c-label--m-red--BackgroundColor: var(--pf-global--palette--red-50);
10219
- --pf-c-label--m-red__icon--Color: var(--pf-global--danger-color--100);
10220
- --pf-c-label--m-red__content--Color: var(--pf-global--palette--red-300);
10221
- --pf-c-label--m-red__content--before--BorderColor: var(--pf-global--palette--red-100);
10222
- --pf-c-label--m-red__content--link--hover--before--BorderColor: var(--pf-global--danger-color--100);
10223
- --pf-c-label--m-red__content--link--focus--before--BorderColor: var(--pf-global--danger-color--100);
10224
- --pf-c-label--m-outline--m-red__content--Color: var(--pf-global--danger-color--100);
10225
- --pf-c-label--m-outline--m-red__content--before--BorderColor: var(--pf-global--BorderColor--100);
10226
- --pf-c-label--m-outline--m-red__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10227
- --pf-c-label--m-outline--m-red__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10228
- --pf-c-label--m-purple--BackgroundColor: var(--pf-global--palette--purple-50);
10229
- --pf-c-label--m-purple__icon--Color: var(--pf-global--palette--purple-500);
10230
- --pf-c-label--m-purple__content--Color: var(--pf-global--palette--purple-700);
10231
- --pf-c-label--m-purple__content--before--BorderColor: var(--pf-global--palette--purple-100);
10232
- --pf-c-label--m-purple__content--link--hover--before--BorderColor: var(--pf-global--palette--purple-500);
10233
- --pf-c-label--m-purple__content--link--focus--before--BorderColor: var(--pf-global--palette--purple-500);
10234
- --pf-c-label--m-outline--m-purple__content--Color: var(--pf-global--palette--purple-500);
10235
- --pf-c-label--m-outline--m-purple__content--before--BorderColor: var(--pf-global--BorderColor--100);
10236
- --pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10237
- --pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10238
- --pf-c-label--m-cyan--BackgroundColor: var(--pf-global--palette--cyan-50);
10239
- --pf-c-label--m-cyan__icon--Color: var(--pf-global--default-color--200);
10240
- --pf-c-label--m-cyan__content--Color: var(--pf-global--default-color--300);
10241
- --pf-c-label--m-cyan__content--before--BorderColor: var(--pf-global--palette--cyan-100);
10242
- --pf-c-label--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--default-color--200);
10243
- --pf-c-label--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--default-color--200);
10244
- --pf-c-label--m-outline--m-cyan__content--Color: var(--pf-global--palette--cyan-400);
10245
- --pf-c-label--m-outline--m-cyan__content--before--BorderColor: var(--pf-global--BorderColor--100);
10246
- --pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10247
- --pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10248
- --pf-c-label--m-gold--BackgroundColor: var(--pf-global--palette--gold-50);
10249
- --pf-c-label--m-gold__icon--Color: var(--pf-global--palette--gold-400);
10250
- --pf-c-label--m-gold__content--Color: var(--pf-global--palette--gold-700);
10251
- --pf-c-label--m-gold__content--before--BorderColor: var(--pf-global--palette--gold-100);
10252
- --pf-c-label--m-gold__content--link--hover--before--BorderColor: var(--pf-global--palette--gold-300);
10253
- --pf-c-label--m-gold__content--link--focus--before--BorderColor: var(--pf-global--palette--gold-300);
10254
- --pf-c-label--m-outline--m-gold__content--Color: var(--pf-global--palette--gold-600);
10255
- --pf-c-label--m-outline--m-gold__content--before--BorderColor: var(--pf-global--BorderColor--100);
10256
- --pf-c-label--m-outline--m-gold__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10257
- --pf-c-label--m-outline--m-gold__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10258
- --pf-c-label--m-overflow__content--Color: var(--pf-global--link--Color);
10259
- --pf-c-label--m-overflow__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
10260
- --pf-c-label--m-overflow__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10261
- --pf-c-label--m-overflow__content--before--BorderColor: var(--pf-global--BorderColor--300);
10262
- --pf-c-label--m-overflow__content--link--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
10263
- --pf-c-label--m-overflow__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--300);
10264
- --pf-c-label--m-overflow__content--link--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
10265
- --pf-c-label--m-overflow__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--300);
10266
- --pf-c-label--m-compact--PaddingTop: 0;
10267
- --pf-c-label--m-compact--PaddingRight: var(--pf-global--spacer--sm);
10268
- --pf-c-label--m-compact--PaddingBottom: 0;
10269
- --pf-c-label--m-compact--PaddingLeft: var(--pf-global--spacer--sm);
10270
- --pf-c-label--m-compact--FontSize: var(--pf-global--FontSize--xs);
10271
- --pf-c-label--m-compact--m-editable--TextDecorationOffset: 0.0625rem;
10272
- --pf-c-label__content--Color: var(--pf-global--Color--100);
10273
- --pf-c-label__content--MaxWidth: 100%;
10274
- --pf-c-label--m-outline__content--Color: var(--pf-global--Color--100);
10275
- --pf-c-label--m-editable__content--MaxWidth: 16ch;
10276
- --pf-c-label__text--MaxWidth: 16ch;
10277
- --pf-c-label__icon--Color: var(--pf-global--Color--100);
10278
- --pf-c-label__icon--MarginRight: var(--pf-global--spacer--xs);
10279
- --pf-c-label__c-button--FontSize: var(--pf-global--FontSize--xs);
10280
- --pf-c-label__c-button--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
10281
- --pf-c-label__c-button--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
10282
- --pf-c-label__c-button--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
10283
- --pf-c-label__c-button--MarginLeft: var(--pf-global--spacer--xs);
10284
- --pf-c-label__c-button--PaddingTop: var(--pf-global--spacer--xs);
10285
- --pf-c-label__c-button--PaddingRight: var(--pf-global--spacer--sm);
10286
- --pf-c-label__c-button--PaddingBottom: var(--pf-global--spacer--xs);
10287
- --pf-c-label__c-button--PaddingLeft: var(--pf-global--spacer--sm);
10288
- --pf-c-label--m-editable--Cursor: pointer;
10289
- --pf-c-label--m-editable--TextDecoration: underline;
10290
- --pf-c-label--m-editable--TextDecorationStyle: dashed;
10291
- --pf-c-label--m-editable--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
10292
- --pf-c-label--m-editable--TextDecorationOffset: 0.25rem;
10293
- --pf-c-label--m-editable--TextDecorationColor: var(--pf-global--BorderColor--200);
10294
- --pf-c-label--m-editable--hover--TextDecorationColor: var(--pf-global--Color--100);
10295
- --pf-c-label--m-editable--focus--TextDecorationColor: var(--pf-global--Color--100);
10296
- --pf-c-label--m-editable__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10297
- --pf-c-label--m-editable__content--before--BorderColor: var(--pf-global--BorderColor--100);
10298
- --pf-c-label--m-editable__content--hover--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10299
- --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10300
- --pf-c-label--m-editable__content--focus--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10301
- --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10302
- --pf-c-label--m-editable--m-editable-active--Cursor: auto;
10303
- --pf-c-label--m-editable--m-editable-active--TextDecoration: none;
10304
- --pf-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
10305
- --pf-c-label--m-editable--m-editable-active__content--before--BorderWidth: 0;
10306
- --pf-c-label--m-editable--m-editable-active__content--before--BorderColor: transparent;
10307
- position: relative;
10308
- padding: var(--pf-c-label--PaddingTop) var(--pf-c-label--PaddingRight) var(--pf-c-label--PaddingBottom) var(--pf-c-label--PaddingLeft);
10309
- font-size: var(--pf-c-label--FontSize);
10310
- color: var(--pf-c-label--Color);
10311
- white-space: nowrap;
10312
- background-color: var(--pf-c-label--BackgroundColor);
10313
- border: 0;
10314
- border-radius: var(--pf-c-label--BorderRadius);
10306
+ .pf-c-label-group {
10307
+ --pf-c-label-group__list--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
10308
+ --pf-c-label-group__list--MarginRight: calc(var(--pf-global--spacer--xs) * -1);
10309
+ --pf-c-label-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
10310
+ --pf-c-label-group--m-category--PaddingRight: var(--pf-global--spacer--xs);
10311
+ --pf-c-label-group--m-category--PaddingBottom: var(--pf-global--spacer--xs);
10312
+ --pf-c-label-group--m-category--PaddingLeft: var(--pf-global--spacer--sm);
10313
+ --pf-c-label-group--m-vertical--m-category--PaddingRight: var(--pf-global--spacer--sm);
10314
+ --pf-c-label-group--m-category--BorderRadius: var(--pf-global--BorderRadius--sm);
10315
+ --pf-c-label-group--m-category--BorderWidth: var(--pf-global--BorderWidth--sm);
10316
+ --pf-c-label-group--m-category--BorderColor: var(--pf-global--BorderColor--300);
10317
+ --pf-c-label-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--100);
10318
+ --pf-c-label-group__label--MarginRight: var(--pf-global--spacer--sm);
10319
+ --pf-c-label-group__label--MarginBottom: 0;
10320
+ --pf-c-label-group--m-vertical__label--MarginBottom: var(--pf-global--spacer--sm);
10321
+ --pf-c-label-group__label--FontSize: var(--pf-global--FontSize--sm);
10322
+ --pf-c-label-group__label--MaxWidth: 18ch;
10323
+ --pf-c-label-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
10324
+ --pf-c-label-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
10325
+ --pf-c-label-group--m-vertical__close--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
10326
+ --pf-c-label-group--m-vertical__close--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
10327
+ --pf-c-label-group--m-vertical__close--MarginLeft: var(--pf-global--spacer--sm);
10328
+ --pf-c-label-group--m-vertical__close--c-button--PaddingRight: var(--pf-global--spacer--sm);
10329
+ --pf-c-label-group--m-vertical__close--c-button--PaddingLeft: var(--pf-global--spacer--sm);
10330
+ --pf-c-label-group__list-item--MarginRight: var(--pf-global--spacer--xs);
10331
+ --pf-c-label-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
10332
+ --pf-c-label-group__textarea--MinWidth: 12.5rem;
10333
+ --pf-c-label-group__textarea--PaddingTop: 0.125rem;
10334
+ --pf-c-label-group__textarea--PaddingRight: var(--pf-global--spacer--xs);
10335
+ --pf-c-label-group__textarea--PaddingBottom: 0;
10336
+ --pf-c-label-group__textarea--PaddingLeft: var(--pf-global--spacer--xs);
10337
+ display: inline-flex;
10338
+ align-items: center;
10315
10339
  }
10316
10340
 
10317
- .pf-c-label.pf-m-compact {
10318
- --pf-c-label--PaddingTop: var(--pf-c-label--m-compact--PaddingTop);
10319
- --pf-c-label--PaddingRight: var(--pf-c-label--m-compact--PaddingRight);
10320
- --pf-c-label--PaddingBottom: var(--pf-c-label--m-compact--PaddingBottom);
10321
- --pf-c-label--PaddingLeft: var(--pf-c-label--m-compact--PaddingLeft);
10322
- --pf-c-label--FontSize: var(--pf-c-label--m-compact--FontSize);
10323
- --pf-c-label--m-editable--TextDecorationOffset: var(--pf-c-label--m-compact--m-editable--TextDecorationOffset);
10341
+ .pf-c-label-group.pf-m-category {
10342
+ padding-top: var(--pf-c-label-group--m-category--PaddingTop);
10343
+ padding-right: var(--pf-c-label-group--m-category--PaddingRight);
10344
+ padding-bottom: var(--pf-c-label-group--m-category--PaddingBottom);
10345
+ padding-left: var(--pf-c-label-group--m-category--PaddingLeft);
10346
+ background-color: var(--pf-c-label-group--m-category--BackgroundColor);
10347
+ border: var(--pf-c-label-group--m-category--BorderWidth) solid var(--pf-c-label-group--m-category--BorderColor);
10348
+ border-radius: var(--pf-c-label-group--m-category--BorderRadius);
10324
10349
  }
10325
10350
 
10326
- .pf-c-label.pf-m-blue {
10327
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-blue--BackgroundColor);
10328
- --pf-c-label__icon--Color: var(--pf-c-label--m-blue__icon--Color);
10329
- --pf-c-label__content--Color: var(--pf-c-label--m-blue__content--Color);
10330
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
10331
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-blue__content--link--hover--before--BorderColor);
10332
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-blue__content--link--focus--before--BorderColor);
10333
- --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-blue__content--Color);
10334
- --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--before--BorderColor);
10335
- --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--link--hover--before--BorderColor);
10336
- --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--link--focus--before--BorderColor);
10337
- --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
10338
- --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
10339
- --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
10351
+ .pf-c-label-group.pf-m-vertical {
10352
+ --pf-c-label-group__list--MarginRight: 0;
10353
+ --pf-c-label-group__list--MarginBottom: 0;
10354
+ --pf-c-label-group__list-item--MarginRight: 0;
10355
+ --pf-c-label-group__label--MarginRight: 0;
10356
+ --pf-c-label-group__label--MarginBottom: var(--pf-c-label-group--m-vertical__label--MarginBottom);
10357
+ --pf-c-label-group__close--MarginTop: var(--pf-c-label-group--m-vertical__close--MarginTop);
10358
+ --pf-c-label-group__close--MarginLeft: var(--pf-c-label-group--m-vertical__close--MarginLeft);
10359
+ --pf-c-label-group__close--MarginBottom: 0;
10360
+ --pf-c-label-group__close--MarginRight: var(--pf-c-label-group--m-vertical__close--MarginRight);
10361
+ --pf-c-label-group--m-category--PaddingRight: var(--pf-c-label-group--m-vertical--m-category--PaddingRight);
10340
10362
  }
10341
10363
 
10342
- .pf-c-label.pf-m-green {
10343
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-green--BackgroundColor);
10344
- --pf-c-label__icon--Color: var(--pf-c-label--m-green__icon--Color);
10345
- --pf-c-label__content--Color: var(--pf-c-label--m-green__content--Color);
10346
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
10347
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-green__content--link--hover--before--BorderColor);
10348
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-green__content--link--focus--before--BorderColor);
10349
- --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-green__content--Color);
10350
- --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--before--BorderColor);
10351
- --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor);
10352
- --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor);
10353
- --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
10354
- --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
10355
- --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
10364
+ .pf-c-label-group.pf-m-vertical.pf-c-label-group {
10365
+ align-items: flex-start;
10356
10366
  }
10357
10367
 
10358
- .pf-c-label.pf-m-orange {
10359
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-orange--BackgroundColor);
10360
- --pf-c-label__icon--Color: var(--pf-c-label--m-orange__icon--Color);
10361
- --pf-c-label__content--Color: var(--pf-c-label--m-orange__content--Color);
10362
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
10363
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-orange__content--link--hover--before--BorderColor);
10364
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-orange__content--link--focus--before--BorderColor);
10365
- --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-orange__content--Color);
10366
- --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--before--BorderColor);
10367
- --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--link--hover--before--BorderColor);
10368
- --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--link--focus--before--BorderColor);
10369
- --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
10370
- --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
10371
- --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
10368
+ .pf-c-label-group.pf-m-vertical .pf-c-label-group__list {
10369
+ flex-direction: column;
10370
+ align-items: flex-start;
10372
10371
  }
10373
10372
 
10374
- .pf-c-label.pf-m-red {
10375
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-red--BackgroundColor);
10376
- --pf-c-label__icon--Color: var(--pf-c-label--m-red__icon--Color);
10377
- --pf-c-label__content--Color: var(--pf-c-label--m-red__content--Color);
10378
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
10379
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-red__content--link--hover--before--BorderColor);
10380
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-red__content--link--focus--before--BorderColor);
10381
- --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-red__content--Color);
10382
- --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--before--BorderColor);
10383
- --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--link--hover--before--BorderColor);
10384
- --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--link--focus--before--BorderColor);
10385
- --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
10386
- --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
10387
- --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
10373
+ .pf-c-label-group.pf-m-vertical .pf-c-label-group__main {
10374
+ flex-direction: column;
10388
10375
  }
10389
10376
 
10390
- .pf-c-label.pf-m-purple {
10391
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-purple--BackgroundColor);
10392
- --pf-c-label__icon--Color: var(--pf-c-label--m-purple__icon--Color);
10393
- --pf-c-label__content--Color: var(--pf-c-label--m-purple__content--Color);
10394
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
10395
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-purple__content--link--hover--before--BorderColor);
10396
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-purple__content--link--focus--before--BorderColor);
10397
- --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-purple__content--Color);
10398
- --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--before--BorderColor);
10399
- --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor);
10400
- --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor);
10401
- --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
10402
- --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
10403
- --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
10377
+ .pf-c-label-group.pf-m-vertical .pf-c-label-group__list-item:last-child {
10378
+ --pf-c-label-group__list-item--MarginBottom: 0;
10404
10379
  }
10405
10380
 
10406
- .pf-c-label.pf-m-cyan {
10407
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-cyan--BackgroundColor);
10408
- --pf-c-label__icon--Color: var(--pf-c-label--m-cyan__icon--Color);
10409
- --pf-c-label__content--Color: var(--pf-c-label--m-cyan__content--Color);
10410
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
10411
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-cyan__content--link--hover--before--BorderColor);
10412
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-cyan__content--link--focus--before--BorderColor);
10413
- --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-cyan__content--Color);
10414
- --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--before--BorderColor);
10415
- --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor);
10416
- --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor);
10417
- --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
10418
- --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
10419
- --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
10381
+ .pf-c-label-group.pf-m-vertical .pf-c-label-group__close .pf-c-button {
10382
+ --pf-c-button--PaddingLeft: var(--pf-c-label-group--m-vertical__close--c-button--PaddingLeft);
10383
+ --pf-c-button--PaddingRight: var(--pf-c-label-group--m-vertical__close--c-button--PaddingRight);
10420
10384
  }
10421
10385
 
10422
- .pf-c-label.pf-m-gold {
10423
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-gold--BackgroundColor);
10424
- --pf-c-label__icon--Color: var(--pf-c-label--m-gold__icon--Color);
10425
- --pf-c-label__content--Color: var(--pf-c-label--m-gold__content--Color);
10426
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
10427
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-gold__content--link--hover--before--BorderColor);
10428
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-gold__content--link--focus--before--BorderColor);
10429
- --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-gold__content--Color);
10430
- --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--before--BorderColor);
10431
- --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--link--hover--before--BorderColor);
10432
- --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--link--focus--before--BorderColor);
10433
- --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
10434
- --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
10435
- --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
10386
+ .pf-c-label-group.pf-m-editable,
10387
+ .pf-c-label-group.pf-m-editable .pf-c-label-group__main,
10388
+ .pf-c-label-group.pf-m-editable .pf-c-label-group__list {
10389
+ display: flex;
10436
10390
  }
10437
10391
 
10438
- .pf-c-label.pf-m-outline {
10439
- --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color);
10440
- --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--before--BorderWidth);
10441
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
10442
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-outline--BackgroundColor);
10443
- --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
10444
- --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
10445
- --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
10392
+ .pf-c-label-group.pf-m-editable .pf-c-label-group__main,
10393
+ .pf-c-label-group.pf-m-editable .pf-c-label-group__list,
10394
+ .pf-c-label-group.pf-m-editable .pf-c-label-group__list-item.pf-m-textarea,
10395
+ .pf-c-label-group.pf-m-editable .pf-c-label-group__textarea {
10396
+ flex: 1;
10446
10397
  }
10447
10398
 
10448
- .pf-c-label.pf-m-overflow:hover,
10449
- .pf-c-label.pf-m-add:hover, .pf-c-label.pf-m-outline a.pf-c-label__content:hover,
10450
- .pf-c-label.pf-m-outline button.pf-c-label__content:hover {
10451
- --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--link--hover--before--BorderWidth);
10452
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--link--hover--before--BorderColor);
10399
+ .pf-c-label-group__main {
10400
+ display: flex;
10401
+ flex: 1;
10402
+ flex-wrap: wrap;
10403
+ align-items: baseline;
10453
10404
  }
10454
10405
 
10455
- .pf-c-label.pf-m-overflow:focus,
10456
- .pf-c-label.pf-m-add:focus, .pf-c-label.pf-m-outline a.pf-c-label__content:focus,
10457
- .pf-c-label.pf-m-outline button.pf-c-label__content:focus {
10458
- --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--link--focus--before--BorderWidth);
10459
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--link--focus--before--BorderColor);
10406
+ .pf-c-label-group__list {
10407
+ display: inline-flex;
10408
+ flex-wrap: wrap;
10409
+ margin-right: var(--pf-c-label-group__list--MarginRight);
10410
+ margin-bottom: var(--pf-c-label-group__list--MarginBottom);
10460
10411
  }
10461
10412
 
10462
- .pf-c-label.pf-m-editable {
10463
- text-decoration: var(--pf-c-label--m-editable--TextDecoration);
10464
- cursor: var(--pf-c-label--m-editable--Cursor);
10465
- text-decoration-style: var(--pf-c-label--m-editable--TextDecorationStyle);
10466
- text-decoration-thickness: var(--pf-c-label--m-editable--TextDecorationThickness);
10467
- text-underline-offset: var(--pf-c-label--m-editable--TextDecorationOffset);
10468
- text-decoration-color: var(--pf-c-label--m-editable--TextDecorationColor);
10469
- --pf-c-label__content--MaxWidth: var(--pf-c-label--m-editable__content--MaxWidth);
10470
- --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
10471
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-editable__content--before--BorderColor);
10472
- --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-c-label--m-editable__content--hover--before--BorderWidth);
10473
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-editable__content--hover--before--BorderColor);
10474
- --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-c-label--m-editable__content--focus--before--BorderWidth);
10475
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-editable__content--focus--before--BorderColor);
10476
- --pf-c-label--m-outline__content--link--hover--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
10477
- --pf-c-label--m-outline__content--link--focus--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
10413
+ .pf-c-label-group__list-item {
10414
+ display: inline-flex;
10415
+ margin-right: var(--pf-c-label-group__list-item--MarginRight);
10416
+ margin-bottom: var(--pf-c-label-group__list-item--MarginBottom);
10417
+ }
10418
+
10419
+ .pf-c-label-group__label {
10420
+ overflow: hidden;
10421
+ text-overflow: ellipsis;
10422
+ white-space: nowrap;
10423
+ max-width: var(--pf-c-label-group__label--MaxWidth);
10424
+ margin-right: var(--pf-c-label-group__label--MarginRight);
10425
+ margin-bottom: var(--pf-c-label-group__label--MarginBottom);
10426
+ font-size: var(--pf-c-label-group__label--FontSize);
10427
+ }
10428
+
10429
+ .pf-c-label-group__close {
10430
+ margin-top: var(--pf-c-label-group__close--MarginTop);
10431
+ margin-right: var(--pf-c-label-group__close--MarginRight);
10432
+ margin-bottom: var(--pf-c-label-group__close--MarginBottom);
10433
+ margin-left: var(--pf-c-label-group__close--MarginLeft);
10434
+ }
10435
+
10436
+ .pf-c-label-group__textarea {
10437
+ min-width: var(--pf-c-label-group__textarea--MinWidth);
10438
+ padding: var(--pf-c-label-group__textarea--PaddingTop) var(--pf-c-label-group__textarea--PaddingRight) var(--pf-c-label-group__textarea--PaddingBottom) var(--pf-c-label-group__textarea--PaddingLeft);
10439
+ white-space: nowrap;
10440
+ resize: none;
10441
+ border: 0;
10442
+ -ms-overflow-style: none;
10443
+ scrollbar-width: none;
10444
+ }
10445
+
10446
+ .pf-c-label-group__textarea::-webkit-scrollbar {
10447
+ display: none;
10448
+ }
10449
+
10450
+ .pf-c-list {
10451
+ --pf-c-list--PaddingLeft: var(--pf-global--spacer--lg);
10452
+ --pf-c-list--nested--MarginTop: var(--pf-global--spacer--sm);
10453
+ --pf-c-list--nested--MarginLeft: var(--pf-global--spacer--sm);
10454
+ --pf-c-list--ul--ListStyle: var(--pf-global--ListStyle);
10455
+ --pf-c-list--li--MarginTop: var(--pf-global--spacer--sm);
10456
+ --pf-c-list--m-inline--li--MarginRight: var(--pf-global--spacer--lg);
10457
+ --pf-c-list--m-bordered--li--PaddingBottom: var(--pf-global--spacer--sm);
10458
+ --pf-c-list--m-bordered--li--BorderBottomColor: var(--pf-global--BorderColor--100);
10459
+ --pf-c-list--m-bordered--li--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
10460
+ --pf-c-list__item-icon--MinWidth: var(--pf-global--icon--FontSize--sm);
10461
+ --pf-c-list__item-icon--MarginTop: 0.375rem;
10462
+ --pf-c-list__item-icon--MarginRight: var(--pf-global--spacer--sm);
10463
+ --pf-c-list__item-icon--Color: var(--pf-global--icon--Color--light);
10464
+ --pf-c-list__item-icon--FontSize: var(--pf-global--icon--FontSize--sm);
10465
+ --pf-c-list--m-icon-lg__item-icon--MinWidth: var(--pf-global--icon--FontSize--lg);
10466
+ --pf-c-list--m-icon-lg__item-icon--MarginRight: var(--pf-global--spacer--md);
10467
+ --pf-c-list--m-icon-lg__item-icon--FontSize: var(--pf-global--icon--FontSize--lg);
10468
+ padding-left: var(--pf-c-list--PaddingLeft);
10478
10469
  }
10479
10470
 
10480
- .pf-c-label.pf-m-editable:hover {
10481
- --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--hover--TextDecorationColor);
10471
+ .pf-c-list ol,
10472
+ .pf-c-list ul {
10473
+ margin-top: var(--pf-c-list--nested--MarginTop);
10474
+ margin-left: var(--pf-c-list--nested--MarginLeft);
10482
10475
  }
10483
10476
 
10484
- .pf-c-label.pf-m-editable:focus {
10485
- --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--focus--TextDecorationColor);
10477
+ .pf-c-list li + li {
10478
+ margin-top: var(--pf-c-list--li--MarginTop);
10486
10479
  }
10487
10480
 
10488
- .pf-c-label.pf-m-editable-active {
10489
- --pf-c-label--m-editable--Cursor: var(--pf-c-label--m-editable--m-editable-active--Cursor);
10490
- --pf-c-label--m-editable--TextDecoration: var(--pf-c-label--m-editable--m-editable-active--TextDecoration);
10491
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-editable--m-editable-active--BackgroundColor);
10481
+ ul.pf-c-list {
10482
+ list-style: var(--pf-c-list--ul--ListStyle);
10492
10483
  }
10493
10484
 
10494
- .pf-c-label.pf-m-editable-active .pf-c-button {
10495
- visibility: hidden;
10485
+ .pf-c-list .pf-c-list__item {
10486
+ display: flex;
10496
10487
  }
10497
10488
 
10498
- .pf-c-label .pf-c-button {
10499
- --pf-c-button--FontSize: var(--pf-c-label__c-button--FontSize);
10500
- --pf-c-button--PaddingTop: var(--pf-c-label__c-button--PaddingTop);
10501
- --pf-c-button--PaddingRight: var(--pf-c-label__c-button--PaddingRight);
10502
- --pf-c-button--PaddingBottom: var(--pf-c-label__c-button--PaddingBottom);
10503
- --pf-c-button--PaddingLeft: var(--pf-c-label__c-button--PaddingLeft);
10504
- margin-top: var(--pf-c-label__c-button--MarginTop);
10505
- margin-right: var(--pf-c-label__c-button--MarginRight);
10506
- margin-bottom: var(--pf-c-label__c-button--MarginBottom);
10507
- margin-left: var(--pf-c-label__c-button--MarginLeft);
10489
+ .pf-c-list .pf-c-list__item-icon {
10490
+ flex-shrink: 0;
10491
+ min-width: var(--pf-c-list__item-icon--MinWidth);
10492
+ margin-top: var(--pf-c-list__item-icon--MarginTop);
10493
+ margin-right: var(--pf-c-list__item-icon--MarginRight);
10494
+ font-size: var(--pf-c-list__item-icon--FontSize);
10495
+ line-height: 1;
10496
+ color: var(--pf-c-list__item-icon--Color);
10508
10497
  }
10509
10498
 
10510
- .pf-c-label.pf-m-overflow, .pf-c-label.pf-m-add {
10511
- --pf-c-label__content--Color: var(--pf-c-label--m-overflow__content--Color);
10512
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-overflow__content--BackgroundColor);
10513
- --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-overflow__content--before--BorderWidth);
10514
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-overflow__content--before--BorderColor);
10515
- --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-c-label--m-overflow__content--link--hover--before--BorderWidth);
10516
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-overflow__content--link--hover--before--BorderColor);
10517
- --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-c-label--m-overflow__content--link--focus--before--BorderWidth);
10518
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-overflow__content--link--focus--before--BorderColor);
10499
+ .pf-c-list.pf-m-icon-lg {
10500
+ --pf-c-list__item-icon--MinWidth: var(--pf-c-list--m-icon-lg__item-icon--MinWidth);
10501
+ --pf-c-list__item-icon--MarginTop: 0;
10502
+ --pf-c-list__item-icon--MarginRight: var(--pf-c-list--m-icon-lg__item-icon--MarginRight);
10503
+ --pf-c-list__item-icon--FontSize: var(--pf-c-list--m-icon-lg__item-icon--FontSize);
10519
10504
  }
10520
10505
 
10521
- .pf-c-label,
10522
- .pf-c-label__content {
10523
- display: inline-flex;
10524
- align-items: center;
10506
+ .pf-c-list.pf-m-plain {
10507
+ --pf-c-list--PaddingLeft: 0;
10508
+ list-style: none;
10525
10509
  }
10526
10510
 
10527
- .pf-c-label__text {
10528
- overflow: hidden;
10529
- text-overflow: ellipsis;
10530
- white-space: nowrap;
10531
- max-width: var(--pf-c-label__text--MaxWidth);
10511
+ .pf-c-list.pf-m-inline {
10512
+ --pf-c-list--PaddingLeft: 0;
10513
+ display: flex;
10514
+ flex-wrap: wrap;
10515
+ list-style: none;
10532
10516
  }
10533
10517
 
10534
- .pf-c-label__content {
10535
- overflow: hidden;
10536
- text-overflow: ellipsis;
10537
- white-space: nowrap;
10538
- max-width: var(--pf-c-label__content--MaxWidth);
10539
- color: var(--pf-c-label__content--Color);
10540
- border-width: 0;
10518
+ .pf-c-list.pf-m-inline li {
10519
+ --pf-c-list--li--MarginTop: 0;
10541
10520
  }
10542
10521
 
10543
- .pf-c-label__content::before {
10544
- position: absolute;
10545
- top: 0;
10546
- right: 0;
10547
- bottom: 0;
10548
- left: 0;
10549
- pointer-events: none;
10550
- content: "";
10551
- border: var(--pf-c-label__content--before--BorderWidth) solid var(--pf-c-label__content--before--BorderColor);
10552
- border-radius: var(--pf-c-label--BorderRadius);
10522
+ .pf-c-list.pf-m-inline li:not(:last-child) {
10523
+ margin-right: var(--pf-c-list--m-inline--li--MarginRight);
10553
10524
  }
10554
10525
 
10555
- a.pf-c-label__content,
10556
- button.pf-c-label__content {
10557
- cursor: pointer;
10558
- border: none;
10526
+ .pf-c-list.pf-m-bordered > * {
10527
+ padding-bottom: var(--pf-c-list--m-bordered--li--PaddingBottom);
10528
+ border-bottom: var(--pf-c-list--m-bordered--li--BorderBottomWidth) solid var(--pf-c-list--m-bordered--li--BorderBottomColor);
10559
10529
  }
10560
10530
 
10561
- a.pf-c-label__content, a.pf-c-label__content:hover, a.pf-c-label__content:focus,
10562
- button.pf-c-label__content,
10563
- button.pf-c-label__content:hover,
10564
- button.pf-c-label__content:focus {
10565
- text-decoration: none;
10531
+ .pf-c-list.pf-m-bordered > :last-child {
10532
+ --pf-c-list--m-bordered--li--PaddingBottom: 0;
10533
+ --pf-c-list--m-bordered--li--BorderBottomWidth: 0;
10566
10534
  }
10567
10535
 
10568
- a.pf-c-label__content:hover,
10569
- button.pf-c-label__content:hover {
10570
- --pf-c-label__content--before--BorderWidth: var(--pf-c-label__content--link--hover--before--BorderWidth);
10571
- --pf-c-label__content--before--BorderColor: var(--pf-c-label__content--link--hover--before--BorderColor);
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%;
10572
10578
  }
10573
10579
 
10574
- a.pf-c-label__content:focus,
10575
- button.pf-c-label__content:focus {
10576
- --pf-c-label__content--before--BorderWidth: var(--pf-c-label__content--link--focus--before--BorderWidth);
10577
- --pf-c-label__content--before--BorderColor: var(--pf-c-label__content--link--focus--before--BorderColor);
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
+ }
10578
10589
  }
10579
-
10580
- .pf-c-label__icon {
10581
- margin-right: var(--pf-c-label__icon--MarginRight);
10582
- color: var(--pf-c-label__icon--Color);
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;
10583
10598
  }
10584
10599
 
10585
- :where(.pf-theme-dark) .pf-c-label {
10586
- --pf-c-label--BackgroundColor: var(--pf-global--BackgroundColor--300);
10587
- --pf-c-label--m-blue--BackgroundColor: var(--pf-global--BackgroundColor--300);
10588
- --pf-c-label--m-green--BackgroundColor: var(--pf-global--BackgroundColor--300);
10589
- --pf-c-label--m-orange--BackgroundColor: var(--pf-global--BackgroundColor--300);
10590
- --pf-c-label--m-red--BackgroundColor: var(--pf-global--BackgroundColor--300);
10591
- --pf-c-label--m-purple--BackgroundColor: var(--pf-global--BackgroundColor--300);
10592
- --pf-c-label--m-cyan--BackgroundColor: var(--pf-global--BackgroundColor--300);
10593
- --pf-c-label__content--before--BorderWidth: 0;
10594
- --pf-c-label__content--before--BorderColor: transparent;
10595
- --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10596
- --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10597
- --pf-c-label--m-blue__content--Color: var(--pf-global--primary-color--100);
10598
- --pf-c-label--m-outline--m-blue__content--before--BorderColor: var(--pf-global--active-color--200);
10599
- --pf-c-label--m-outline--m-blue__content--link--hover--before--BorderColor: var(--pf-global--active-color--200);
10600
- --pf-c-label--m-outline--m-blue__content--link--focus--before--BorderColor: var(--pf-global--active-color--200);
10601
- --pf-c-label--m-green__content--Color: var(--pf-global--success-color--100);
10602
- --pf-c-label--m-outline--m-green__content--before--BorderColor: var(--pf-global--palette--green-100);
10603
- --pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor: var(--pf-global--palette--green-100);
10604
- --pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor: var(--pf-global--palette--green-100);
10605
- --pf-c-label--m-orange__content--Color: var(--pf-global--palette--orange-300);
10606
- --pf-c-label--m-outline--m-orange__content--Color: var(--pf-global--palette--orange-300);
10607
- --pf-c-label--m-outline--m-orange__content--before--BorderColor: var(--pf-global--palette--gold-100);
10608
- --pf-c-label--m-outline--m-orange__content--link--hover--before--BorderColor: var(--pf-global--palette--gold-100);
10609
- --pf-c-label--m-outline--m-orange__content--link--focus--before--BorderColor: var(--pf-global--palette--gold-100);
10610
- --pf-c-label--m-red__content--Color: var(--pf-global--danger-color--100);
10611
- --pf-c-label--m-outline--m-red__content--before--BorderColor: var(--pf-global--danger-color--100);
10612
- --pf-c-label--m-outline--m-red__content--link--hover--before--BorderColor: var(--pf-global--danger-color--100);
10613
- --pf-c-label--m-outline--m-red__content--link--focus--before--BorderColor: var(--pf-global--danger-color--100);
10614
- --pf-c-label--m-purple__content--Color: var(--pf-global--palette--purple-300);
10615
- --pf-c-label--m-purple__icon--Color: var(--pf-global--palette--purple-300);
10616
- --pf-c-label--m-purple__content--link--hover--before--BorderColor: var(--pf-global--palette--purple-300);
10617
- --pf-c-label--m-purple__content--link--focus--before--BorderColor: var(--pf-global--palette--purple-300);
10618
- --pf-c-label--m-outline--m-purple__content--before--BorderColor: var(--pf-global--palette--purple-100);
10619
- --pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor: var(--pf-global--palette--purple-100);
10620
- --pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor: var(--pf-global--palette--purple-100);
10621
- --pf-c-label--m-outline--m-purple__content--Color: var(--pf-global--palette--purple-300);
10622
- --pf-c-label--m-cyan__content--Color: var(--pf-global--default-color--200);
10623
- --pf-c-label--m-outline--m-cyan__content--Color: var(--pf-global--default-color--200);
10624
- --pf-c-label--m-outline--m-cyan__content--before--BorderColor: var(--pf-global--palette--cyan-100);
10625
- --pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--palette--cyan-100);
10626
- --pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--palette--cyan-100);
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);
10627
10603
  }
10628
10604
 
10629
- .pf-c-label-group {
10630
- --pf-c-label-group__list--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
10631
- --pf-c-label-group__list--MarginRight: calc(var(--pf-global--spacer--xs) * -1);
10632
- --pf-c-label-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
10633
- --pf-c-label-group--m-category--PaddingRight: var(--pf-global--spacer--xs);
10634
- --pf-c-label-group--m-category--PaddingBottom: var(--pf-global--spacer--xs);
10635
- --pf-c-label-group--m-category--PaddingLeft: var(--pf-global--spacer--sm);
10636
- --pf-c-label-group--m-vertical--m-category--PaddingRight: var(--pf-global--spacer--sm);
10637
- --pf-c-label-group--m-category--BorderRadius: var(--pf-global--BorderRadius--sm);
10638
- --pf-c-label-group--m-category--BorderWidth: var(--pf-global--BorderWidth--sm);
10639
- --pf-c-label-group--m-category--BorderColor: var(--pf-global--BorderColor--300);
10640
- --pf-c-label-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--100);
10641
- --pf-c-label-group__label--MarginRight: var(--pf-global--spacer--sm);
10642
- --pf-c-label-group__label--MarginBottom: 0;
10643
- --pf-c-label-group--m-vertical__label--MarginBottom: var(--pf-global--spacer--sm);
10644
- --pf-c-label-group__label--FontSize: var(--pf-global--FontSize--sm);
10645
- --pf-c-label-group__label--MaxWidth: 18ch;
10646
- --pf-c-label-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
10647
- --pf-c-label-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
10648
- --pf-c-label-group--m-vertical__close--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
10649
- --pf-c-label-group--m-vertical__close--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
10650
- --pf-c-label-group--m-vertical__close--MarginLeft: var(--pf-global--spacer--sm);
10651
- --pf-c-label-group--m-vertical__close--c-button--PaddingRight: var(--pf-global--spacer--sm);
10652
- --pf-c-label-group--m-vertical__close--c-button--PaddingLeft: var(--pf-global--spacer--sm);
10653
- --pf-c-label-group__list-item--MarginRight: var(--pf-global--spacer--xs);
10654
- --pf-c-label-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
10655
- --pf-c-label-group__textarea--MinWidth: 12.5rem;
10656
- --pf-c-label-group__textarea--PaddingTop: 0.125rem;
10657
- --pf-c-label-group__textarea--PaddingRight: var(--pf-global--spacer--xs);
10658
- --pf-c-label-group__textarea--PaddingBottom: 0;
10659
- --pf-c-label-group__textarea--PaddingLeft: var(--pf-global--spacer--xs);
10660
- display: inline-flex;
10661
- align-items: center;
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);
10662
10613
  }
10663
10614
 
10664
- .pf-c-label-group.pf-m-category {
10665
- padding-top: var(--pf-c-label-group--m-category--PaddingTop);
10666
- padding-right: var(--pf-c-label-group--m-category--PaddingRight);
10667
- padding-bottom: var(--pf-c-label-group--m-category--PaddingBottom);
10668
- padding-left: var(--pf-c-label-group--m-category--PaddingLeft);
10669
- background-color: var(--pf-c-label-group--m-category--BackgroundColor);
10670
- border: var(--pf-c-label-group--m-category--BorderWidth) solid var(--pf-c-label-group--m-category--BorderColor);
10671
- border-radius: var(--pf-c-label-group--m-category--BorderRadius);
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);
10672
10630
  }
10673
10631
 
10674
- .pf-c-label-group.pf-m-vertical {
10675
- --pf-c-label-group__list--MarginRight: 0;
10676
- --pf-c-label-group__list--MarginBottom: 0;
10677
- --pf-c-label-group__list-item--MarginRight: 0;
10678
- --pf-c-label-group__label--MarginRight: 0;
10679
- --pf-c-label-group__label--MarginBottom: var(--pf-c-label-group--m-vertical__label--MarginBottom);
10680
- --pf-c-label-group__close--MarginTop: var(--pf-c-label-group--m-vertical__close--MarginTop);
10681
- --pf-c-label-group__close--MarginLeft: var(--pf-c-label-group--m-vertical__close--MarginLeft);
10682
- --pf-c-label-group__close--MarginBottom: 0;
10683
- --pf-c-label-group__close--MarginRight: var(--pf-c-label-group--m-vertical__close--MarginRight);
10684
- --pf-c-label-group--m-category--PaddingRight: var(--pf-c-label-group--m-vertical--m-category--PaddingRight);
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);
10685
10642
  }
10686
10643
 
10687
- .pf-c-label-group.pf-m-vertical.pf-c-label-group {
10688
- align-items: flex-start;
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);
10689
10648
  }
10690
10649
 
10691
- .pf-c-label-group.pf-m-vertical .pf-c-label-group__list {
10692
- flex-direction: column;
10693
- align-items: flex-start;
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);
10694
10659
  }
10695
10660
 
10696
- .pf-c-label-group.pf-m-vertical .pf-c-label-group__main {
10697
- flex-direction: column;
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);
10698
10664
  }
10699
10665
 
10700
- .pf-c-label-group.pf-m-vertical .pf-c-label-group__list-item:last-child {
10701
- --pf-c-label-group__list-item--MarginBottom: 0;
10666
+ .pf-c-sidebar__panel.pf-m-static {
10667
+ --pf-c-sidebar__panel--Position: static;
10668
+ --pf-c-sidebar__panel--Top: auto;
10702
10669
  }
10703
10670
 
10704
- .pf-c-label-group.pf-m-vertical .pf-c-label-group__close .pf-c-button {
10705
- --pf-c-button--PaddingLeft: var(--pf-c-label-group--m-vertical__close--c-button--PaddingLeft);
10706
- --pf-c-button--PaddingRight: var(--pf-c-label-group--m-vertical__close--c-button--PaddingRight);
10671
+ .pf-c-sidebar__content {
10672
+ flex-grow: 1;
10673
+ background-color: var(--pf-c-sidebar__content--BackgroundColor);
10707
10674
  }
10708
10675
 
10709
- .pf-c-label-group.pf-m-editable,
10710
- .pf-c-label-group.pf-m-editable .pf-c-label-group__main,
10711
- .pf-c-label-group.pf-m-editable .pf-c-label-group__list {
10712
- display: flex;
10676
+ .pf-c-sidebar__content.pf-m-no-background {
10677
+ --pf-c-sidebar__content--BackgroundColor: transparent;
10713
10678
  }
10714
10679
 
10715
- .pf-c-label-group.pf-m-editable .pf-c-label-group__main,
10716
- .pf-c-label-group.pf-m-editable .pf-c-label-group__list,
10717
- .pf-c-label-group.pf-m-editable .pf-c-label-group__list-item.pf-m-textarea,
10718
- .pf-c-label-group.pf-m-editable .pf-c-label-group__textarea {
10719
- flex: 1;
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;
10720
10684
  }
10721
10685
 
10722
- .pf-c-label-group__main {
10723
- display: flex;
10724
- flex: 1;
10725
- flex-wrap: wrap;
10726
- align-items: baseline;
10686
+ .pf-c-sidebar__panel.pf-m-width-default {
10687
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10727
10688
  }
10728
10689
 
10729
- .pf-c-label-group__list {
10730
- display: inline-flex;
10731
- flex-wrap: wrap;
10732
- margin-right: var(--pf-c-label-group__list--MarginRight);
10733
- margin-bottom: var(--pf-c-label-group__list--MarginBottom);
10690
+ .pf-c-sidebar__panel.pf-m-width-25 {
10691
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10734
10692
  }
10735
10693
 
10736
- .pf-c-label-group__list-item {
10737
- display: inline-flex;
10738
- margin-right: var(--pf-c-label-group__list-item--MarginRight);
10739
- margin-bottom: var(--pf-c-label-group__list-item--MarginBottom);
10694
+ .pf-c-sidebar__panel.pf-m-width-33 {
10695
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10740
10696
  }
10741
10697
 
10742
- .pf-c-label-group__label {
10743
- overflow: hidden;
10744
- text-overflow: ellipsis;
10745
- white-space: nowrap;
10746
- max-width: var(--pf-c-label-group__label--MaxWidth);
10747
- margin-right: var(--pf-c-label-group__label--MarginRight);
10748
- margin-bottom: var(--pf-c-label-group__label--MarginBottom);
10749
- font-size: var(--pf-c-label-group__label--FontSize);
10698
+ .pf-c-sidebar__panel.pf-m-width-50 {
10699
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10750
10700
  }
10751
10701
 
10752
- .pf-c-label-group__close {
10753
- margin-top: var(--pf-c-label-group__close--MarginTop);
10754
- margin-right: var(--pf-c-label-group__close--MarginRight);
10755
- margin-bottom: var(--pf-c-label-group__close--MarginBottom);
10756
- margin-left: var(--pf-c-label-group__close--MarginLeft);
10702
+ .pf-c-sidebar__panel.pf-m-width-66 {
10703
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10757
10704
  }
10758
10705
 
10759
- .pf-c-label-group__textarea {
10760
- min-width: var(--pf-c-label-group__textarea--MinWidth);
10761
- padding: var(--pf-c-label-group__textarea--PaddingTop) var(--pf-c-label-group__textarea--PaddingRight) var(--pf-c-label-group__textarea--PaddingBottom) var(--pf-c-label-group__textarea--PaddingLeft);
10762
- white-space: nowrap;
10763
- resize: none;
10764
- border: 0;
10765
- -ms-overflow-style: none;
10766
- scrollbar-width: none;
10706
+ .pf-c-sidebar__panel.pf-m-width-75 {
10707
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10767
10708
  }
10768
10709
 
10769
- .pf-c-label-group__textarea::-webkit-scrollbar {
10770
- display: none;
10710
+ .pf-c-sidebar__panel.pf-m-width-100 {
10711
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10771
10712
  }
10772
10713
 
10773
- .pf-c-list {
10774
- --pf-c-list--PaddingLeft: var(--pf-global--spacer--lg);
10775
- --pf-c-list--nested--MarginTop: var(--pf-global--spacer--sm);
10776
- --pf-c-list--nested--MarginLeft: var(--pf-global--spacer--sm);
10777
- --pf-c-list--ul--ListStyle: var(--pf-global--ListStyle);
10778
- --pf-c-list--li--MarginTop: var(--pf-global--spacer--sm);
10779
- --pf-c-list--m-inline--li--MarginRight: var(--pf-global--spacer--lg);
10780
- --pf-c-list--m-bordered--li--PaddingBottom: var(--pf-global--spacer--sm);
10781
- --pf-c-list--m-bordered--li--BorderBottomColor: var(--pf-global--BorderColor--100);
10782
- --pf-c-list--m-bordered--li--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
10783
- --pf-c-list__item-icon--MinWidth: var(--pf-global--icon--FontSize--sm);
10784
- --pf-c-list__item-icon--MarginTop: 0.375rem;
10785
- --pf-c-list__item-icon--MarginRight: var(--pf-global--spacer--sm);
10786
- --pf-c-list__item-icon--Color: var(--pf-global--icon--Color--light);
10787
- --pf-c-list__item-icon--FontSize: var(--pf-global--icon--FontSize--sm);
10788
- --pf-c-list--m-icon-lg__item-icon--MinWidth: var(--pf-global--icon--FontSize--lg);
10789
- --pf-c-list--m-icon-lg__item-icon--MarginRight: var(--pf-global--spacer--md);
10790
- --pf-c-list--m-icon-lg__item-icon--FontSize: var(--pf-global--icon--FontSize--lg);
10791
- padding-left: var(--pf-c-list--PaddingLeft);
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
+ }
10792
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
+ }
10793
10747
 
10794
- .pf-c-list ol,
10795
- .pf-c-list ul {
10796
- margin-top: var(--pf-c-list--nested--MarginTop);
10797
- margin-left: var(--pf-c-list--nested--MarginLeft);
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
+ }
10763
+
10764
+ .pf-c-sidebar__panel.pf-m-width-75-on-md {
10765
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10766
+ }
10767
+
10768
+ .pf-c-sidebar__panel.pf-m-width-100-on-md {
10769
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10770
+ }
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
+ }
10776
+
10777
+ .pf-c-sidebar__panel.pf-m-width-25-on-lg {
10778
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10779
+ }
10780
+
10781
+ .pf-c-sidebar__panel.pf-m-width-33-on-lg {
10782
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10783
+ }
10784
+
10785
+ .pf-c-sidebar__panel.pf-m-width-50-on-lg {
10786
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10787
+ }
10788
+
10789
+ .pf-c-sidebar__panel.pf-m-width-66-on-lg {
10790
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10791
+ }
10792
+
10793
+ .pf-c-sidebar__panel.pf-m-width-75-on-lg {
10794
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10795
+ }
10796
+
10797
+ .pf-c-sidebar__panel.pf-m-width-100-on-lg {
10798
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10799
+ }
10798
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
+ }
10799
10805
 
10800
- .pf-c-list li + li {
10801
- margin-top: var(--pf-c-list--li--MarginTop);
10802
- }
10806
+ .pf-c-sidebar__panel.pf-m-width-25-on-xl {
10807
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10808
+ }
10803
10809
 
10804
- ul.pf-c-list {
10805
- list-style: var(--pf-c-list--ul--ListStyle);
10806
- }
10810
+ .pf-c-sidebar__panel.pf-m-width-33-on-xl {
10811
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10812
+ }
10807
10813
 
10808
- .pf-c-list .pf-c-list__item {
10809
- display: flex;
10810
- }
10814
+ .pf-c-sidebar__panel.pf-m-width-50-on-xl {
10815
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10816
+ }
10811
10817
 
10812
- .pf-c-list .pf-c-list__item-icon {
10813
- flex-shrink: 0;
10814
- min-width: var(--pf-c-list__item-icon--MinWidth);
10815
- margin-top: var(--pf-c-list__item-icon--MarginTop);
10816
- margin-right: var(--pf-c-list__item-icon--MarginRight);
10817
- font-size: var(--pf-c-list__item-icon--FontSize);
10818
- line-height: 1;
10819
- color: var(--pf-c-list__item-icon--Color);
10820
- }
10818
+ .pf-c-sidebar__panel.pf-m-width-66-on-xl {
10819
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10820
+ }
10821
10821
 
10822
- .pf-c-list.pf-m-icon-lg {
10823
- --pf-c-list__item-icon--MinWidth: var(--pf-c-list--m-icon-lg__item-icon--MinWidth);
10824
- --pf-c-list__item-icon--MarginTop: 0;
10825
- --pf-c-list__item-icon--MarginRight: var(--pf-c-list--m-icon-lg__item-icon--MarginRight);
10826
- --pf-c-list__item-icon--FontSize: var(--pf-c-list--m-icon-lg__item-icon--FontSize);
10827
- }
10822
+ .pf-c-sidebar__panel.pf-m-width-75-on-xl {
10823
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10824
+ }
10828
10825
 
10829
- .pf-c-list.pf-m-plain {
10830
- --pf-c-list--PaddingLeft: 0;
10831
- list-style: none;
10826
+ .pf-c-sidebar__panel.pf-m-width-100-on-xl {
10827
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10828
+ }
10832
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
+ }
10833
10834
 
10834
- .pf-c-list.pf-m-inline {
10835
- --pf-c-list--PaddingLeft: 0;
10836
- display: flex;
10837
- flex-wrap: wrap;
10838
- list-style: none;
10839
- }
10835
+ .pf-c-sidebar__panel.pf-m-width-25-on-2xl {
10836
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10837
+ }
10840
10838
 
10841
- .pf-c-list.pf-m-inline li {
10842
- --pf-c-list--li--MarginTop: 0;
10843
- }
10839
+ .pf-c-sidebar__panel.pf-m-width-33-on-2xl {
10840
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10841
+ }
10844
10842
 
10845
- .pf-c-list.pf-m-inline li:not(:last-child) {
10846
- margin-right: var(--pf-c-list--m-inline--li--MarginRight);
10847
- }
10843
+ .pf-c-sidebar__panel.pf-m-width-50-on-2xl {
10844
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10845
+ }
10848
10846
 
10849
- .pf-c-list.pf-m-bordered > * {
10850
- padding-bottom: var(--pf-c-list--m-bordered--li--PaddingBottom);
10851
- border-bottom: var(--pf-c-list--m-bordered--li--BorderBottomWidth) solid var(--pf-c-list--m-bordered--li--BorderBottomColor);
10852
- }
10847
+ .pf-c-sidebar__panel.pf-m-width-66-on-2xl {
10848
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10849
+ }
10853
10850
 
10854
- .pf-c-list.pf-m-bordered > :last-child {
10855
- --pf-c-list--m-bordered--li--PaddingBottom: 0;
10856
- --pf-c-list--m-bordered--li--BorderBottomWidth: 0;
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);
@@ -26194,6 +26194,75 @@ label.pf-c-tree-view__node-text {
26194
26194
  --pf-l-flex--spacer: var(--pf-l-flex--spacer--4xl);
26195
26195
  }
26196
26196
  }
26197
+ .pf-l-gallery {
26198
+ --pf-l-gallery--m-gutter--GridGap: var(--pf-global--gutter);
26199
+ --pf-l-gallery--GridTemplateColumns--min: 250px;
26200
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
26201
+ --pf-l-gallery--GridTemplateColumns--max: 1fr;
26202
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
26203
+ --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
26204
+ --pf-l-gallery--GridTemplateRows: auto;
26205
+ display: grid;
26206
+ grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
26207
+ grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
26208
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
26209
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
26210
+ }
26211
+
26212
+ .pf-l-gallery.pf-m-gutter {
26213
+ grid-gap: var(--pf-l-gallery--m-gutter--GridGap);
26214
+ }
26215
+
26216
+ @media (min-width: 576px) {
26217
+ .pf-l-gallery {
26218
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min));
26219
+ }
26220
+ }
26221
+ @media (min-width: 768px) {
26222
+ .pf-l-gallery {
26223
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)));
26224
+ }
26225
+ }
26226
+ @media (min-width: 992px) {
26227
+ .pf-l-gallery {
26228
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))));
26229
+ }
26230
+ }
26231
+ @media (min-width: 1200px) {
26232
+ .pf-l-gallery {
26233
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)))));
26234
+ }
26235
+ }
26236
+ @media (min-width: 1450px) {
26237
+ .pf-l-gallery {
26238
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))))));
26239
+ }
26240
+ }
26241
+ @media (min-width: 576px) {
26242
+ .pf-l-gallery {
26243
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max));
26244
+ }
26245
+ }
26246
+ @media (min-width: 768px) {
26247
+ .pf-l-gallery {
26248
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)));
26249
+ }
26250
+ }
26251
+ @media (min-width: 992px) {
26252
+ .pf-l-gallery {
26253
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))));
26254
+ }
26255
+ }
26256
+ @media (min-width: 1200px) {
26257
+ .pf-l-gallery {
26258
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)))));
26259
+ }
26260
+ }
26261
+ @media (min-width: 1450px) {
26262
+ .pf-l-gallery {
26263
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))))));
26264
+ }
26265
+ }
26197
26266
  .pf-l-grid {
26198
26267
  --pf-l-grid--m-gutter--GridGap: var(--pf-global--gutter);
26199
26268
  --pf-l-grid__item--GridColumnStart: auto;
@@ -27408,18 +27477,6 @@ label.pf-c-tree-view__node-text {
27408
27477
  grid-gap: var(--pf-l-grid--m-gutter--GridGap);
27409
27478
  }
27410
27479
 
27411
- .pf-l-level {
27412
- --pf-l-level--m-gutter--MarginRight: var(--pf-global--gutter);
27413
- display: flex;
27414
- flex-wrap: wrap;
27415
- align-items: center;
27416
- justify-content: space-between;
27417
- }
27418
-
27419
- .pf-l-level.pf-m-gutter > *:not(:last-child) {
27420
- margin-right: var(--pf-l-level--m-gutter--MarginRight);
27421
- }
27422
-
27423
27480
  .pf-l-split {
27424
27481
  --pf-l-split--m-gutter--MarginRight: var(--pf-global--gutter);
27425
27482
  display: flex;
@@ -27439,6 +27496,18 @@ label.pf-c-tree-view__node-text {
27439
27496
  margin-right: var(--pf-l-split--m-gutter--MarginRight);
27440
27497
  }
27441
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
+
27442
27511
  .pf-l-stack {
27443
27512
  --pf-l-stack--m-gutter--MarginBottom: var(--pf-global--gutter);
27444
27513
  display: flex;
@@ -27454,75 +27523,6 @@ label.pf-c-tree-view__node-text {
27454
27523
  margin-bottom: var(--pf-l-stack--m-gutter--MarginBottom);
27455
27524
  }
27456
27525
 
27457
- .pf-l-gallery {
27458
- --pf-l-gallery--m-gutter--GridGap: var(--pf-global--gutter);
27459
- --pf-l-gallery--GridTemplateColumns--min: 250px;
27460
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
27461
- --pf-l-gallery--GridTemplateColumns--max: 1fr;
27462
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
27463
- --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
27464
- --pf-l-gallery--GridTemplateRows: auto;
27465
- display: grid;
27466
- grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
27467
- grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
27468
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
27469
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
27470
- }
27471
-
27472
- .pf-l-gallery.pf-m-gutter {
27473
- grid-gap: var(--pf-l-gallery--m-gutter--GridGap);
27474
- }
27475
-
27476
- @media (min-width: 576px) {
27477
- .pf-l-gallery {
27478
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min));
27479
- }
27480
- }
27481
- @media (min-width: 768px) {
27482
- .pf-l-gallery {
27483
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)));
27484
- }
27485
- }
27486
- @media (min-width: 992px) {
27487
- .pf-l-gallery {
27488
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))));
27489
- }
27490
- }
27491
- @media (min-width: 1200px) {
27492
- .pf-l-gallery {
27493
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)))));
27494
- }
27495
- }
27496
- @media (min-width: 1450px) {
27497
- .pf-l-gallery {
27498
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))))));
27499
- }
27500
- }
27501
- @media (min-width: 576px) {
27502
- .pf-l-gallery {
27503
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max));
27504
- }
27505
- }
27506
- @media (min-width: 768px) {
27507
- .pf-l-gallery {
27508
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)));
27509
- }
27510
- }
27511
- @media (min-width: 992px) {
27512
- .pf-l-gallery {
27513
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))));
27514
- }
27515
- }
27516
- @media (min-width: 1200px) {
27517
- .pf-l-gallery {
27518
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)))));
27519
- }
27520
- }
27521
- @media (min-width: 1450px) {
27522
- .pf-l-gallery {
27523
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))))));
27524
- }
27525
- }
27526
27526
  .pf-c-alert-group {
27527
27527
  --pf-c-alert-group__item--MarginTop: var(--pf-global--spacer--sm);
27528
27528
  --pf-c-alert-group--m-toast--Top: var(--pf-global--spacer--2xl);