@patternfly/react-core 4.242.8 → 4.243.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/dist/esm/components/DatePicker/DatePicker.d.ts.map +1 -1
  3. package/dist/esm/components/DatePicker/DatePicker.js +4 -2
  4. package/dist/esm/components/DatePicker/DatePicker.js.map +1 -1
  5. package/dist/esm/components/TextArea/TextArea.d.ts +17 -11
  6. package/dist/esm/components/TextArea/TextArea.d.ts.map +1 -1
  7. package/dist/esm/components/TextArea/TextArea.js +8 -3
  8. package/dist/esm/components/TextArea/TextArea.js.map +1 -1
  9. package/dist/esm/components/TextInput/TextInput.d.ts +21 -16
  10. package/dist/esm/components/TextInput/TextInput.d.ts.map +1 -1
  11. package/dist/esm/components/TextInput/TextInput.js +7 -4
  12. package/dist/esm/components/TextInput/TextInput.js.map +1 -1
  13. package/dist/js/components/DatePicker/DatePicker.d.ts.map +1 -1
  14. package/dist/js/components/DatePicker/DatePicker.js +4 -2
  15. package/dist/js/components/DatePicker/DatePicker.js.map +1 -1
  16. package/dist/js/components/TextArea/TextArea.d.ts +17 -11
  17. package/dist/js/components/TextArea/TextArea.d.ts.map +1 -1
  18. package/dist/js/components/TextArea/TextArea.js +9 -4
  19. package/dist/js/components/TextArea/TextArea.js.map +1 -1
  20. package/dist/js/components/TextInput/TextInput.d.ts +21 -16
  21. package/dist/js/components/TextInput/TextInput.d.ts.map +1 -1
  22. package/dist/js/components/TextInput/TextInput.js +8 -5
  23. package/dist/js/components/TextInput/TextInput.js.map +1 -1
  24. package/dist/umd/react-core.min.css +1090 -1068
  25. package/dist/umd/react-core.min.js +3 -3
  26. package/package.json +6 -6
  27. package/src/components/DatePicker/DatePicker.tsx +4 -2
  28. package/src/components/DatePicker/__tests__/DatePicker.test.tsx +22 -1
  29. package/src/components/NumberInput/examples/NumberInput.md +9 -448
  30. package/src/components/NumberInput/examples/NumberInputCustomStep.tsx +29 -0
  31. package/src/components/NumberInput/examples/NumberInputCustomStepAndThreshold.tsx +52 -0
  32. package/src/components/NumberInput/examples/NumberInputDefault.tsx +34 -0
  33. package/src/components/NumberInput/examples/NumberInputDisabled.tsx +40 -0
  34. package/src/components/NumberInput/examples/NumberInputUnit.tsx +57 -0
  35. package/src/components/NumberInput/examples/NumberInputUnitThreshold.tsx +55 -0
  36. package/src/components/NumberInput/examples/NumberInputVaryingSizes.tsx +80 -0
  37. package/src/components/NumberInput/examples/{WithStatus.tsx → NumberInputWithStatus.tsx} +4 -3
  38. package/src/components/TextArea/TextArea.tsx +21 -13
  39. package/src/components/TextArea/__tests__/TextArea.test.tsx +20 -6
  40. package/src/components/TextArea/__tests__/__snapshots__/TextArea.test.tsx.snap +31 -5
  41. package/src/components/TextArea/examples/TextArea.md +30 -0
  42. package/src/components/TextInput/TextInput.tsx +26 -18
  43. package/src/components/TextInput/__tests__/TextInput.test.tsx +16 -2
  44. package/src/components/TextInput/__tests__/__snapshots__/TextInput.test.tsx.snap +36 -4
  45. package/src/components/TextInput/examples/TextInput.md +23 -2
@@ -2113,6 +2113,12 @@ button.pf-c-breadcrumb__link {
2113
2113
  --pf-c-button--m-link--m-inline--FontSize: inherit;
2114
2114
  --pf-c-button--m-link--m-inline--hover--TextDecoration: var(--pf-global--link--TextDecoration--hover);
2115
2115
  --pf-c-button--m-link--m-inline--hover--Color: var(--pf-global--link--Color--hover);
2116
+ --pf-c-button--m-link--m-inline--PaddingTop: 0;
2117
+ --pf-c-button--m-link--m-inline--PaddingRight: 0;
2118
+ --pf-c-button--m-link--m-inline--PaddingBottom: 0;
2119
+ --pf-c-button--m-link--m-inline--PaddingLeft: 0;
2120
+ --pf-c-button--m-link--m-inline__progress--Left: var(--pf-global--spacer--xs);
2121
+ --pf-c-button--m-link--m-inline--m-in-progress--PaddingLeft: calc(var(--pf-c-button--m-link--m-inline__progress--Left) + 1rem + var(--pf-global--spacer--sm));
2116
2122
  --pf-c-button--m-link--m-danger--BackgroundColor: transparent;
2117
2123
  --pf-c-button--m-link--m-danger--Color: var(--pf-global--danger-color--100);
2118
2124
  --pf-c-button--m-link--m-danger--hover--BackgroundColor: transparent;
@@ -2336,8 +2342,9 @@ button.pf-c-breadcrumb__link {
2336
2342
 
2337
2343
  .pf-c-button.pf-m-link.pf-m-inline {
2338
2344
  --pf-c-button--FontSize: var(--pf-c-button--m-link--m-inline--FontSize);
2345
+ --pf-c-button__progress--Left: var(--pf-c-button--m-link--m-inline__progress--Left);
2339
2346
  display: inline;
2340
- padding: 0;
2347
+ padding: var(--pf-c-button--m-link--m-inline--PaddingTop) var(--pf-c-button--m-link--m-inline--PaddingRight) var(--pf-c-button--m-link--m-inline--PaddingBottom) var(--pf-c-button--m-link--m-inline--PaddingLeft);
2341
2348
  text-align: left;
2342
2349
  white-space: normal;
2343
2350
  cursor: pointer;
@@ -2542,6 +2549,10 @@ button.pf-c-breadcrumb__link {
2542
2549
  transition: var(--pf-c-button--m-progress--TransitionProperty) var(--pf-c-button--m-progress--TransitionDuration);
2543
2550
  }
2544
2551
 
2552
+ .pf-c-button.pf-m-in-progress {
2553
+ --pf-c-button--m-link--m-inline--PaddingLeft: var(--pf-c-button--m-link--m-inline--m-in-progress--PaddingLeft);
2554
+ }
2555
+
2545
2556
  .pf-c-button.pf-m-in-progress:not(.pf-m-plain) {
2546
2557
  --pf-c-button--PaddingRight: var(--pf-c-button--m-in-progress--PaddingRight);
2547
2558
  --pf-c-button--PaddingLeft: var(--pf-c-button--m-in-progress--PaddingLeft);
@@ -9059,6 +9070,7 @@ label.pf-c-check, .pf-c-check__label,
9059
9070
  font-size: var(--pf-c-form__group-label-help--FontSize);
9060
9071
  line-height: 1;
9061
9072
  color: var(--pf-c-form__group-label-help--Color);
9073
+ cursor: pointer;
9062
9074
  border: 0;
9063
9075
  transform: translateY(var(--pf-c-form__group-label-help--TranslateY));
9064
9076
  }
@@ -9840,1022 +9852,1022 @@ label.pf-c-input-group__text {
9840
9852
  color: var(--pf-c-jump-links__toggle-text--Color);
9841
9853
  }
9842
9854
 
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);
9855
+ .pf-c-sidebar {
9856
+ --pf-c-sidebar--BackgroundColor: var(--pf-global--BackgroundColor--100);
9857
+ --pf-c-sidebar__main--FlexDirection: column;
9858
+ --pf-c-sidebar__main--md--FlexDirection: row;
9859
+ --pf-c-sidebar__main--AlignItems: stretch;
9860
+ --pf-c-sidebar__main--md--AlignItems: start;
9861
+ --pf-c-sidebar__main--child--MarginTop: 0;
9862
+ --pf-c-sidebar__main--child--MarginLeft: 0;
9863
+ --pf-c-sidebar--m-gutter__main--Gap: var(--pf-global--spacer--md);
9864
+ --pf-c-sidebar--m-gutter__main--xl--Gap: var(--pf-global--spacer--lg);
9865
+ --pf-c-sidebar--m-panel-right__panel--Order: 0;
9866
+ --pf-c-sidebar--m-panel-right__panel--md--Order: 1;
9867
+ --pf-c-sidebar--m-stack__main--FlexDirection: column;
9868
+ --pf-c-sidebar--m-stack__main--AlignItems: stretch;
9869
+ --pf-c-sidebar--m-stack__panel--Position: sticky;
9870
+ --pf-c-sidebar--m-stack__panel--Top: 0;
9871
+ --pf-c-sidebar--m-stack__panel--BoxShadow: var(--pf-c-sidebar__panel--BoxShadow--base);
9872
+ --pf-c-sidebar--m-stack--m-panel-right__panel--Order: 0;
9873
+ --pf-c-sidebar--m-split__main--AlignItems: start;
9874
+ --pf-c-sidebar--m-split__main--FlexDirection: row;
9875
+ --pf-c-sidebar--m-split__panel--Position: static;
9876
+ --pf-c-sidebar--m-split__panel--Top: auto;
9877
+ --pf-c-sidebar--m-split--m-panel-right__panel--Order: 1;
9878
+ --pf-c-sidebar__panel--FlexBasis--base: auto;
9879
+ --pf-c-sidebar__panel--BoxShadow--base: 0 0.25rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
9880
+ --pf-c-sidebar__panel--BoxShadow: var(--pf-c-sidebar__panel--BoxShadow--base);
9881
+ --pf-c-sidebar__panel--Top: 0;
9882
+ --pf-c-sidebar__panel--md--Top: auto;
9883
+ --pf-c-sidebar__panel--Position: sticky;
9884
+ --pf-c-sidebar__panel--md--Position: static;
9885
+ --pf-c-sidebar__panel--FlexBasis-base: auto;
9886
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis-base);
9887
+ --pf-c-sidebar__panel--md--FlexBasis: 15.625rem;
9888
+ --pf-c-sidebar__panel--m-split--FlexBasis: 15.625rem;
9889
+ --pf-c-sidebar__panel--m-stack--FlexBasis: auto;
9890
+ --pf-c-sidebar__panel--ZIndex: var(--pf-global--ZIndex--xs);
9891
+ --pf-c-sidebar__panel--Order: 0;
9892
+ --pf-c-sidebar__panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
9893
+ --pf-c-sidebar__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
9894
+ --pf-c-sidebar__panel--m-sticky--Top: 0;
9895
+ --pf-c-sidebar__panel--m-sticky--Position: sticky;
9896
+ height: 100%;
9992
9897
  }
9993
9898
 
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);
9899
+ @media (min-width: 768px) {
9900
+ .pf-c-sidebar {
9901
+ --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar__main--md--FlexDirection);
9902
+ --pf-c-sidebar__panel--BoxShadow: none;
9903
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--md--FlexBasis);
9904
+ --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar__main--md--AlignItems);
9905
+ --pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--md--Top);
9906
+ --pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--md--Position);
9907
+ }
10001
9908
  }
10002
-
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);
9909
+ @media (min-width: 1200px) {
9910
+ .pf-c-sidebar {
9911
+ --pf-c-sidebar--m-gutter__main--Gap: var(--pf-c-sidebar--m-gutter__main--xl--Gap);
9912
+ }
9913
+ }
9914
+ .pf-c-sidebar.pf-m-gutter {
9915
+ --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
9916
+ --pf-c-sidebar__main--child--MarginLeft: 0;
10017
9917
  }
10018
9918
 
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);
9919
+ .pf-c-sidebar.pf-m-gutter > .pf-c-sidebar__main > * + * {
9920
+ margin-top: var(--pf-c-sidebar__main--child--MarginTop);
9921
+ margin-left: var(--pf-c-sidebar__main--child--MarginLeft);
10033
9922
  }
10034
9923
 
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);
9924
+ @media (min-width: 768px) {
9925
+ .pf-c-sidebar.pf-m-gutter {
9926
+ --pf-c-sidebar__main--child--MarginTop: 0;
9927
+ --pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
9928
+ }
10049
9929
  }
10050
-
10051
- .pf-c-label.pf-m-red {
10052
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-red--BackgroundColor);
10053
- --pf-c-label__icon--Color: var(--pf-c-label--m-red__icon--Color);
10054
- --pf-c-label__content--Color: var(--pf-c-label--m-red__content--Color);
10055
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
10056
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-red__content--link--hover--before--BorderColor);
10057
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-red__content--link--focus--before--BorderColor);
10058
- --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-red__content--Color);
10059
- --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--before--BorderColor);
10060
- --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--link--hover--before--BorderColor);
10061
- --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--link--focus--before--BorderColor);
10062
- --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
10063
- --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
10064
- --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
9930
+ .pf-c-sidebar.pf-m-panel-right {
9931
+ --pf-c-sidebar__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--Order);
10065
9932
  }
10066
9933
 
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);
9934
+ @media (min-width: 768px) {
9935
+ .pf-c-sidebar.pf-m-panel-right {
9936
+ --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--md--Order);
9937
+ }
10081
9938
  }
10082
-
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);
9939
+ .pf-c-sidebar.pf-m-stack {
9940
+ --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-stack__main--FlexDirection);
9941
+ --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-stack__main--AlignItems);
9942
+ --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
9943
+ --pf-c-sidebar__main--child--MarginLeft: 0;
9944
+ --pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-stack__panel--Position);
9945
+ --pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-stack__panel--Top);
9946
+ --pf-c-sidebar__panel--BoxShadow: var(--pf-c-sidebar--m-stack__panel--BoxShadow);
9947
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-stack--FlexBasis);
9948
+ --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-stack--m-panel-right__panel--Order);
10097
9949
  }
10098
9950
 
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);
9951
+ .pf-c-sidebar.pf-m-split {
9952
+ --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-split__main--FlexDirection);
9953
+ --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-split__main--AlignItems);
9954
+ --pf-c-sidebar__main--child--MarginTop: 0;
9955
+ --pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
9956
+ --pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-split__panel--Position);
9957
+ --pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-split__panel--Top);
9958
+ --pf-c-sidebar__panel--BoxShadow: none;
9959
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-split--FlexBasis);
9960
+ --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-split--m-panel-right__panel--Order);
10113
9961
  }
10114
9962
 
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);
9963
+ .pf-c-sidebar__main {
9964
+ display: flex;
9965
+ flex-direction: var(--pf-c-sidebar__main--FlexDirection);
9966
+ align-items: var(--pf-c-sidebar__main--AlignItems);
10123
9967
  }
10124
9968
 
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);
9969
+ .pf-c-sidebar__panel {
9970
+ position: var(--pf-c-sidebar__panel--Position);
9971
+ top: var(--pf-c-sidebar__panel--Top);
9972
+ z-index: var(--pf-c-sidebar__panel--ZIndex);
9973
+ flex-shrink: 0;
9974
+ flex-basis: var(--pf-c-sidebar__panel--FlexBasis);
9975
+ order: var(--pf-c-sidebar__panel--Order);
9976
+ background-color: var(--pf-c-sidebar__panel--BackgroundColor);
9977
+ box-shadow: var(--pf-c-sidebar__panel--BoxShadow);
10130
9978
  }
10131
9979
 
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);
9980
+ .pf-c-sidebar__panel.pf-m-sticky {
9981
+ --pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--m-sticky--Position);
9982
+ --pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--m-sticky--Top);
10137
9983
  }
10138
9984
 
10139
- .pf-c-label.pf-m-editable {
10140
- text-decoration: var(--pf-c-label--m-editable--TextDecoration);
10141
- cursor: var(--pf-c-label--m-editable--Cursor);
10142
- text-decoration-style: var(--pf-c-label--m-editable--TextDecorationStyle);
10143
- text-decoration-thickness: var(--pf-c-label--m-editable--TextDecorationThickness);
10144
- text-underline-offset: var(--pf-c-label--m-editable--TextDecorationOffset);
10145
- text-decoration-color: var(--pf-c-label--m-editable--TextDecorationColor);
10146
- --pf-c-label__content--MaxWidth: var(--pf-c-label--m-editable__content--MaxWidth);
10147
- --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
10148
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-editable__content--before--BorderColor);
10149
- --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-c-label--m-editable__content--hover--before--BorderWidth);
10150
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-editable__content--hover--before--BorderColor);
10151
- --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-c-label--m-editable__content--focus--before--BorderWidth);
10152
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-editable__content--focus--before--BorderColor);
10153
- --pf-c-label--m-outline__content--link--hover--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
10154
- --pf-c-label--m-outline__content--link--focus--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
9985
+ .pf-c-sidebar__panel.pf-m-static {
9986
+ --pf-c-sidebar__panel--Position: static;
9987
+ --pf-c-sidebar__panel--Top: auto;
10155
9988
  }
10156
9989
 
10157
- .pf-c-label.pf-m-editable:hover {
10158
- --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--hover--TextDecorationColor);
9990
+ .pf-c-sidebar__content {
9991
+ flex-grow: 1;
9992
+ background-color: var(--pf-c-sidebar__content--BackgroundColor);
10159
9993
  }
10160
9994
 
10161
- .pf-c-label.pf-m-editable:focus {
10162
- --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--focus--TextDecorationColor);
9995
+ .pf-c-sidebar__content.pf-m-no-background {
9996
+ --pf-c-sidebar__content--BackgroundColor: transparent;
10163
9997
  }
10164
9998
 
10165
- .pf-c-label.pf-m-editable-active {
10166
- --pf-c-label--m-editable--Cursor: var(--pf-c-label--m-editable--m-editable-active--Cursor);
10167
- --pf-c-label--m-editable--TextDecoration: var(--pf-c-label--m-editable--m-editable-active--TextDecoration);
10168
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-editable--m-editable-active--BackgroundColor);
9999
+ .pf-c-sidebar.pf-m-no-background,
10000
+ .pf-c-sidebar__panel.pf-m-no-background,
10001
+ .pf-c-sidebar__content.pf-m-no-background {
10002
+ background-color: transparent;
10169
10003
  }
10170
10004
 
10171
- .pf-c-label.pf-m-editable-active .pf-c-button {
10172
- visibility: hidden;
10005
+ .pf-c-sidebar__panel.pf-m-width-default {
10006
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10173
10007
  }
10174
10008
 
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);
10009
+ .pf-c-sidebar__panel.pf-m-width-25 {
10010
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10185
10011
  }
10186
10012
 
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);
10013
+ .pf-c-sidebar__panel.pf-m-width-33 {
10014
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10196
10015
  }
10197
10016
 
10198
- .pf-c-label,
10199
- .pf-c-label__content {
10200
- display: inline-flex;
10201
- align-items: center;
10017
+ .pf-c-sidebar__panel.pf-m-width-50 {
10018
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10202
10019
  }
10203
10020
 
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);
10021
+ .pf-c-sidebar__panel.pf-m-width-66 {
10022
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10209
10023
  }
10210
10024
 
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;
10025
+ .pf-c-sidebar__panel.pf-m-width-75 {
10026
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10218
10027
  }
10219
10028
 
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);
10029
+ .pf-c-sidebar__panel.pf-m-width-100 {
10030
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10230
10031
  }
10231
10032
 
10232
- a.pf-c-label__content,
10233
- button.pf-c-label__content {
10234
- cursor: pointer;
10235
- border: none;
10236
- }
10033
+ @media (min-width: 576px) {
10034
+ .pf-c-sidebar__panel.pf-m-width-default-on-sm {
10035
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10036
+ }
10237
10037
 
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
- }
10038
+ .pf-c-sidebar__panel.pf-m-width-25-on-sm {
10039
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10040
+ }
10244
10041
 
10245
- a.pf-c-label__content:hover,
10246
- button.pf-c-label__content:hover {
10247
- --pf-c-label__content--before--BorderWidth: var(--pf-c-label__content--link--hover--before--BorderWidth);
10248
- --pf-c-label__content--before--BorderColor: var(--pf-c-label__content--link--hover--before--BorderColor);
10249
- }
10042
+ .pf-c-sidebar__panel.pf-m-width-33-on-sm {
10043
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10044
+ }
10250
10045
 
10251
- a.pf-c-label__content:focus,
10252
- button.pf-c-label__content:focus {
10253
- --pf-c-label__content--before--BorderWidth: var(--pf-c-label__content--link--focus--before--BorderWidth);
10254
- --pf-c-label__content--before--BorderColor: var(--pf-c-label__content--link--focus--before--BorderColor);
10255
- }
10046
+ .pf-c-sidebar__panel.pf-m-width-50-on-sm {
10047
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10048
+ }
10256
10049
 
10257
- .pf-c-label__icon {
10258
- margin-right: var(--pf-c-label__icon--MarginRight);
10259
- color: var(--pf-c-label__icon--Color);
10260
- }
10050
+ .pf-c-sidebar__panel.pf-m-width-66-on-sm {
10051
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10052
+ }
10261
10053
 
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);
10304
- }
10054
+ .pf-c-sidebar__panel.pf-m-width-75-on-sm {
10055
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10056
+ }
10305
10057
 
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;
10058
+ .pf-c-sidebar__panel.pf-m-width-100-on-sm {
10059
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10060
+ }
10339
10061
  }
10062
+ @media (min-width: 768px) {
10063
+ .pf-c-sidebar__panel.pf-m-width-default-on-md {
10064
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10065
+ }
10340
10066
 
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);
10349
- }
10067
+ .pf-c-sidebar__panel.pf-m-width-25-on-md {
10068
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10069
+ }
10350
10070
 
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);
10362
- }
10071
+ .pf-c-sidebar__panel.pf-m-width-33-on-md {
10072
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10073
+ }
10363
10074
 
10364
- .pf-c-label-group.pf-m-vertical.pf-c-label-group {
10365
- align-items: flex-start;
10366
- }
10075
+ .pf-c-sidebar__panel.pf-m-width-50-on-md {
10076
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10077
+ }
10367
10078
 
10368
- .pf-c-label-group.pf-m-vertical .pf-c-label-group__list {
10369
- flex-direction: column;
10370
- align-items: flex-start;
10371
- }
10079
+ .pf-c-sidebar__panel.pf-m-width-66-on-md {
10080
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10081
+ }
10372
10082
 
10373
- .pf-c-label-group.pf-m-vertical .pf-c-label-group__main {
10374
- flex-direction: column;
10083
+ .pf-c-sidebar__panel.pf-m-width-75-on-md {
10084
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10085
+ }
10086
+
10087
+ .pf-c-sidebar__panel.pf-m-width-100-on-md {
10088
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10089
+ }
10375
10090
  }
10091
+ @media (min-width: 992px) {
10092
+ .pf-c-sidebar__panel.pf-m-width-default-on-lg {
10093
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10094
+ }
10376
10095
 
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;
10096
+ .pf-c-sidebar__panel.pf-m-width-25-on-lg {
10097
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10098
+ }
10099
+
10100
+ .pf-c-sidebar__panel.pf-m-width-33-on-lg {
10101
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10102
+ }
10103
+
10104
+ .pf-c-sidebar__panel.pf-m-width-50-on-lg {
10105
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10106
+ }
10107
+
10108
+ .pf-c-sidebar__panel.pf-m-width-66-on-lg {
10109
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10110
+ }
10111
+
10112
+ .pf-c-sidebar__panel.pf-m-width-75-on-lg {
10113
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10114
+ }
10115
+
10116
+ .pf-c-sidebar__panel.pf-m-width-100-on-lg {
10117
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10118
+ }
10379
10119
  }
10120
+ @media (min-width: 1200px) {
10121
+ .pf-c-sidebar__panel.pf-m-width-default-on-xl {
10122
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10123
+ }
10380
10124
 
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);
10125
+ .pf-c-sidebar__panel.pf-m-width-25-on-xl {
10126
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10127
+ }
10128
+
10129
+ .pf-c-sidebar__panel.pf-m-width-33-on-xl {
10130
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10131
+ }
10132
+
10133
+ .pf-c-sidebar__panel.pf-m-width-50-on-xl {
10134
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10135
+ }
10136
+
10137
+ .pf-c-sidebar__panel.pf-m-width-66-on-xl {
10138
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10139
+ }
10140
+
10141
+ .pf-c-sidebar__panel.pf-m-width-75-on-xl {
10142
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10143
+ }
10144
+
10145
+ .pf-c-sidebar__panel.pf-m-width-100-on-xl {
10146
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10147
+ }
10384
10148
  }
10149
+ @media (min-width: 1450px) {
10150
+ .pf-c-sidebar__panel.pf-m-width-default-on-2xl {
10151
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10152
+ }
10385
10153
 
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;
10154
+ .pf-c-sidebar__panel.pf-m-width-25-on-2xl {
10155
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10156
+ }
10157
+
10158
+ .pf-c-sidebar__panel.pf-m-width-33-on-2xl {
10159
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10160
+ }
10161
+
10162
+ .pf-c-sidebar__panel.pf-m-width-50-on-2xl {
10163
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10164
+ }
10165
+
10166
+ .pf-c-sidebar__panel.pf-m-width-66-on-2xl {
10167
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10168
+ }
10169
+
10170
+ .pf-c-sidebar__panel.pf-m-width-75-on-2xl {
10171
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10172
+ }
10173
+
10174
+ .pf-c-sidebar__panel.pf-m-width-100-on-2xl {
10175
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10176
+ }
10177
+ }
10178
+ .pf-c-label {
10179
+ --pf-c-label--PaddingTop: var(--pf-global--spacer--xs);
10180
+ --pf-c-label--PaddingRight: var(--pf-global--spacer--sm);
10181
+ --pf-c-label--PaddingBottom: var(--pf-global--spacer--xs);
10182
+ --pf-c-label--PaddingLeft: var(--pf-global--spacer--sm);
10183
+ --pf-c-label--BorderRadius: var(--pf-global--BorderRadius--lg);
10184
+ --pf-c-label--BackgroundColor: var(--pf-global--palette--black-150);
10185
+ --pf-c-label--Color: var(--pf-global--Color--100);
10186
+ --pf-c-label--FontSize: var(--pf-global--FontSize--sm);
10187
+ --pf-c-label__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10188
+ --pf-c-label__content--before--BorderColor: var(--pf-global--BorderColor--100);
10189
+ --pf-c-label--m-outline--BackgroundColor: var(--pf-global--BackgroundColor--100);
10190
+ --pf-c-label--m-outline__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10191
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-global--BorderColor--100);
10192
+ --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
10193
+ --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
10194
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--200);
10195
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--200);
10196
+ --pf-c-label--m-outline__content--link--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
10197
+ --pf-c-label--m-outline__content--link--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
10198
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10199
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10200
+ --pf-c-label--m-blue--BackgroundColor: var(--pf-global--palette--blue-50);
10201
+ --pf-c-label--m-blue__icon--Color: var(--pf-global--primary-color--100);
10202
+ --pf-c-label--m-blue__content--Color: var(--pf-global--info-color--200);
10203
+ --pf-c-label--m-blue__content--before--BorderColor: var(--pf-global--palette--blue-100);
10204
+ --pf-c-label--m-blue__content--link--hover--before--BorderColor: var(--pf-global--primary-color--100);
10205
+ --pf-c-label--m-blue__content--link--focus--before--BorderColor: var(--pf-global--primary-color--100);
10206
+ --pf-c-label--m-outline--m-blue__content--Color: var(--pf-global--primary-color--100);
10207
+ --pf-c-label--m-outline--m-blue__content--before--BorderColor: var(--pf-global--BorderColor--100);
10208
+ --pf-c-label--m-outline--m-blue__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10209
+ --pf-c-label--m-outline--m-blue__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10210
+ --pf-c-label--m-green--BackgroundColor: var(--pf-global--palette--green-50);
10211
+ --pf-c-label--m-green__icon--Color: var(--pf-global--success-color--100);
10212
+ --pf-c-label--m-green__content--Color: var(--pf-global--success-color--200);
10213
+ --pf-c-label--m-green__content--before--BorderColor: var(--pf-global--palette--green-100);
10214
+ --pf-c-label--m-green__content--link--hover--before--BorderColor: var(--pf-global--success-color--100);
10215
+ --pf-c-label--m-green__content--link--focus--before--BorderColor: var(--pf-global--success-color--100);
10216
+ --pf-c-label--m-outline--m-green__content--Color: var(--pf-global--success-color--100);
10217
+ --pf-c-label--m-outline--m-green__content--before--BorderColor: var(--pf-global--BorderColor--100);
10218
+ --pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10219
+ --pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10220
+ --pf-c-label--m-orange--BackgroundColor: var(--pf-global--palette--orange-50);
10221
+ --pf-c-label--m-orange__icon--Color: var(--pf-global--palette--orange-300);
10222
+ --pf-c-label--m-orange__content--Color: var(--pf-global--palette--orange-700);
10223
+ --pf-c-label--m-orange__content--before--BorderColor: var(--pf-global--palette--orange-100);
10224
+ --pf-c-label--m-orange__content--link--hover--before--BorderColor: var(--pf-global--palette--orange-300);
10225
+ --pf-c-label--m-orange__content--link--focus--before--BorderColor: var(--pf-global--palette--orange-300);
10226
+ --pf-c-label--m-outline--m-orange__content--Color: var(--pf-global--palette--orange-500);
10227
+ --pf-c-label--m-outline--m-orange__content--before--BorderColor: var(--pf-global--BorderColor--100);
10228
+ --pf-c-label--m-outline--m-orange__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10229
+ --pf-c-label--m-outline--m-orange__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10230
+ --pf-c-label--m-red--BackgroundColor: var(--pf-global--palette--red-50);
10231
+ --pf-c-label--m-red__icon--Color: var(--pf-global--danger-color--100);
10232
+ --pf-c-label--m-red__content--Color: var(--pf-global--palette--red-300);
10233
+ --pf-c-label--m-red__content--before--BorderColor: var(--pf-global--palette--red-100);
10234
+ --pf-c-label--m-red__content--link--hover--before--BorderColor: var(--pf-global--danger-color--100);
10235
+ --pf-c-label--m-red__content--link--focus--before--BorderColor: var(--pf-global--danger-color--100);
10236
+ --pf-c-label--m-outline--m-red__content--Color: var(--pf-global--danger-color--100);
10237
+ --pf-c-label--m-outline--m-red__content--before--BorderColor: var(--pf-global--BorderColor--100);
10238
+ --pf-c-label--m-outline--m-red__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10239
+ --pf-c-label--m-outline--m-red__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10240
+ --pf-c-label--m-purple--BackgroundColor: var(--pf-global--palette--purple-50);
10241
+ --pf-c-label--m-purple__icon--Color: var(--pf-global--palette--purple-500);
10242
+ --pf-c-label--m-purple__content--Color: var(--pf-global--palette--purple-700);
10243
+ --pf-c-label--m-purple__content--before--BorderColor: var(--pf-global--palette--purple-100);
10244
+ --pf-c-label--m-purple__content--link--hover--before--BorderColor: var(--pf-global--palette--purple-500);
10245
+ --pf-c-label--m-purple__content--link--focus--before--BorderColor: var(--pf-global--palette--purple-500);
10246
+ --pf-c-label--m-outline--m-purple__content--Color: var(--pf-global--palette--purple-500);
10247
+ --pf-c-label--m-outline--m-purple__content--before--BorderColor: var(--pf-global--BorderColor--100);
10248
+ --pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10249
+ --pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10250
+ --pf-c-label--m-cyan--BackgroundColor: var(--pf-global--palette--cyan-50);
10251
+ --pf-c-label--m-cyan__icon--Color: var(--pf-global--default-color--200);
10252
+ --pf-c-label--m-cyan__content--Color: var(--pf-global--default-color--300);
10253
+ --pf-c-label--m-cyan__content--before--BorderColor: var(--pf-global--palette--cyan-100);
10254
+ --pf-c-label--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--default-color--200);
10255
+ --pf-c-label--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--default-color--200);
10256
+ --pf-c-label--m-outline--m-cyan__content--Color: var(--pf-global--palette--cyan-400);
10257
+ --pf-c-label--m-outline--m-cyan__content--before--BorderColor: var(--pf-global--BorderColor--100);
10258
+ --pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10259
+ --pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10260
+ --pf-c-label--m-gold--BackgroundColor: var(--pf-global--palette--gold-50);
10261
+ --pf-c-label--m-gold__icon--Color: var(--pf-global--palette--gold-400);
10262
+ --pf-c-label--m-gold__content--Color: var(--pf-global--palette--gold-700);
10263
+ --pf-c-label--m-gold__content--before--BorderColor: var(--pf-global--palette--gold-100);
10264
+ --pf-c-label--m-gold__content--link--hover--before--BorderColor: var(--pf-global--palette--gold-300);
10265
+ --pf-c-label--m-gold__content--link--focus--before--BorderColor: var(--pf-global--palette--gold-300);
10266
+ --pf-c-label--m-outline--m-gold__content--Color: var(--pf-global--palette--gold-600);
10267
+ --pf-c-label--m-outline--m-gold__content--before--BorderColor: var(--pf-global--BorderColor--100);
10268
+ --pf-c-label--m-outline--m-gold__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10269
+ --pf-c-label--m-outline--m-gold__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10270
+ --pf-c-label--m-overflow__content--Color: var(--pf-global--link--Color);
10271
+ --pf-c-label--m-overflow__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
10272
+ --pf-c-label--m-overflow__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10273
+ --pf-c-label--m-overflow__content--before--BorderColor: var(--pf-global--BorderColor--300);
10274
+ --pf-c-label--m-overflow__content--link--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
10275
+ --pf-c-label--m-overflow__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--300);
10276
+ --pf-c-label--m-overflow__content--link--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
10277
+ --pf-c-label--m-overflow__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--300);
10278
+ --pf-c-label--m-compact--PaddingTop: 0;
10279
+ --pf-c-label--m-compact--PaddingRight: var(--pf-global--spacer--sm);
10280
+ --pf-c-label--m-compact--PaddingBottom: 0;
10281
+ --pf-c-label--m-compact--PaddingLeft: var(--pf-global--spacer--sm);
10282
+ --pf-c-label--m-compact--FontSize: var(--pf-global--FontSize--xs);
10283
+ --pf-c-label--m-compact--m-editable--TextDecorationOffset: 0.0625rem;
10284
+ --pf-c-label__content--Color: var(--pf-global--Color--100);
10285
+ --pf-c-label__content--MaxWidth: 100%;
10286
+ --pf-c-label--m-outline__content--Color: var(--pf-global--Color--100);
10287
+ --pf-c-label--m-editable__content--MaxWidth: 16ch;
10288
+ --pf-c-label__text--MaxWidth: 16ch;
10289
+ --pf-c-label__icon--Color: var(--pf-global--Color--100);
10290
+ --pf-c-label__icon--MarginRight: var(--pf-global--spacer--xs);
10291
+ --pf-c-label__c-button--FontSize: var(--pf-global--FontSize--xs);
10292
+ --pf-c-label__c-button--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
10293
+ --pf-c-label__c-button--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
10294
+ --pf-c-label__c-button--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
10295
+ --pf-c-label__c-button--MarginLeft: var(--pf-global--spacer--xs);
10296
+ --pf-c-label__c-button--PaddingTop: var(--pf-global--spacer--xs);
10297
+ --pf-c-label__c-button--PaddingRight: var(--pf-global--spacer--sm);
10298
+ --pf-c-label__c-button--PaddingBottom: var(--pf-global--spacer--xs);
10299
+ --pf-c-label__c-button--PaddingLeft: var(--pf-global--spacer--sm);
10300
+ --pf-c-label--m-editable--Cursor: pointer;
10301
+ --pf-c-label--m-editable--TextDecoration: underline;
10302
+ --pf-c-label--m-editable--TextDecorationStyle: dashed;
10303
+ --pf-c-label--m-editable--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
10304
+ --pf-c-label--m-editable--TextDecorationOffset: 0.25rem;
10305
+ --pf-c-label--m-editable--TextDecorationColor: var(--pf-global--BorderColor--200);
10306
+ --pf-c-label--m-editable--hover--TextDecorationColor: var(--pf-global--Color--100);
10307
+ --pf-c-label--m-editable--focus--TextDecorationColor: var(--pf-global--Color--100);
10308
+ --pf-c-label--m-editable__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10309
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-global--BorderColor--100);
10310
+ --pf-c-label--m-editable__content--hover--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10311
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10312
+ --pf-c-label--m-editable__content--focus--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10313
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10314
+ --pf-c-label--m-editable--m-editable-active--Cursor: auto;
10315
+ --pf-c-label--m-editable--m-editable-active--TextDecoration: none;
10316
+ --pf-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
10317
+ --pf-c-label--m-editable--m-editable-active__content--before--BorderWidth: 0;
10318
+ --pf-c-label--m-editable--m-editable-active__content--before--BorderColor: transparent;
10319
+ position: relative;
10320
+ padding: var(--pf-c-label--PaddingTop) var(--pf-c-label--PaddingRight) var(--pf-c-label--PaddingBottom) var(--pf-c-label--PaddingLeft);
10321
+ font-size: var(--pf-c-label--FontSize);
10322
+ color: var(--pf-c-label--Color);
10323
+ white-space: nowrap;
10324
+ background-color: var(--pf-c-label--BackgroundColor);
10325
+ border: 0;
10326
+ border-radius: var(--pf-c-label--BorderRadius);
10390
10327
  }
10391
10328
 
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;
10329
+ .pf-c-label.pf-m-compact {
10330
+ --pf-c-label--PaddingTop: var(--pf-c-label--m-compact--PaddingTop);
10331
+ --pf-c-label--PaddingRight: var(--pf-c-label--m-compact--PaddingRight);
10332
+ --pf-c-label--PaddingBottom: var(--pf-c-label--m-compact--PaddingBottom);
10333
+ --pf-c-label--PaddingLeft: var(--pf-c-label--m-compact--PaddingLeft);
10334
+ --pf-c-label--FontSize: var(--pf-c-label--m-compact--FontSize);
10335
+ --pf-c-label--m-editable--TextDecorationOffset: var(--pf-c-label--m-compact--m-editable--TextDecorationOffset);
10397
10336
  }
10398
10337
 
10399
- .pf-c-label-group__main {
10400
- display: flex;
10401
- flex: 1;
10402
- flex-wrap: wrap;
10403
- align-items: baseline;
10338
+ .pf-c-label.pf-m-blue {
10339
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-blue--BackgroundColor);
10340
+ --pf-c-label__icon--Color: var(--pf-c-label--m-blue__icon--Color);
10341
+ --pf-c-label__content--Color: var(--pf-c-label--m-blue__content--Color);
10342
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
10343
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-blue__content--link--hover--before--BorderColor);
10344
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-blue__content--link--focus--before--BorderColor);
10345
+ --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-blue__content--Color);
10346
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--before--BorderColor);
10347
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--link--hover--before--BorderColor);
10348
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--link--focus--before--BorderColor);
10349
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
10350
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
10351
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
10404
10352
  }
10405
10353
 
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);
10354
+ .pf-c-label.pf-m-green {
10355
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-green--BackgroundColor);
10356
+ --pf-c-label__icon--Color: var(--pf-c-label--m-green__icon--Color);
10357
+ --pf-c-label__content--Color: var(--pf-c-label--m-green__content--Color);
10358
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
10359
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-green__content--link--hover--before--BorderColor);
10360
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-green__content--link--focus--before--BorderColor);
10361
+ --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-green__content--Color);
10362
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--before--BorderColor);
10363
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor);
10364
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor);
10365
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
10366
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
10367
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
10411
10368
  }
10412
10369
 
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);
10370
+ .pf-c-label.pf-m-orange {
10371
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-orange--BackgroundColor);
10372
+ --pf-c-label__icon--Color: var(--pf-c-label--m-orange__icon--Color);
10373
+ --pf-c-label__content--Color: var(--pf-c-label--m-orange__content--Color);
10374
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
10375
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-orange__content--link--hover--before--BorderColor);
10376
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-orange__content--link--focus--before--BorderColor);
10377
+ --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-orange__content--Color);
10378
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--before--BorderColor);
10379
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--link--hover--before--BorderColor);
10380
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--link--focus--before--BorderColor);
10381
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
10382
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
10383
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
10417
10384
  }
10418
10385
 
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);
10386
+ .pf-c-label.pf-m-red {
10387
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-red--BackgroundColor);
10388
+ --pf-c-label__icon--Color: var(--pf-c-label--m-red__icon--Color);
10389
+ --pf-c-label__content--Color: var(--pf-c-label--m-red__content--Color);
10390
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
10391
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-red__content--link--hover--before--BorderColor);
10392
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-red__content--link--focus--before--BorderColor);
10393
+ --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-red__content--Color);
10394
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--before--BorderColor);
10395
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--link--hover--before--BorderColor);
10396
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--link--focus--before--BorderColor);
10397
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
10398
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
10399
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
10427
10400
  }
10428
10401
 
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);
10402
+ .pf-c-label.pf-m-purple {
10403
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-purple--BackgroundColor);
10404
+ --pf-c-label__icon--Color: var(--pf-c-label--m-purple__icon--Color);
10405
+ --pf-c-label__content--Color: var(--pf-c-label--m-purple__content--Color);
10406
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
10407
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-purple__content--link--hover--before--BorderColor);
10408
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-purple__content--link--focus--before--BorderColor);
10409
+ --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-purple__content--Color);
10410
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--before--BorderColor);
10411
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor);
10412
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor);
10413
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
10414
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
10415
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
10434
10416
  }
10435
10417
 
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;
10418
+ .pf-c-label.pf-m-cyan {
10419
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-cyan--BackgroundColor);
10420
+ --pf-c-label__icon--Color: var(--pf-c-label--m-cyan__icon--Color);
10421
+ --pf-c-label__content--Color: var(--pf-c-label--m-cyan__content--Color);
10422
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
10423
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-cyan__content--link--hover--before--BorderColor);
10424
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-cyan__content--link--focus--before--BorderColor);
10425
+ --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-cyan__content--Color);
10426
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--before--BorderColor);
10427
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor);
10428
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor);
10429
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
10430
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
10431
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
10444
10432
  }
10445
10433
 
10446
- .pf-c-label-group__textarea::-webkit-scrollbar {
10447
- display: none;
10434
+ .pf-c-label.pf-m-gold {
10435
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-gold--BackgroundColor);
10436
+ --pf-c-label__icon--Color: var(--pf-c-label--m-gold__icon--Color);
10437
+ --pf-c-label__content--Color: var(--pf-c-label--m-gold__content--Color);
10438
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
10439
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-gold__content--link--hover--before--BorderColor);
10440
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-gold__content--link--focus--before--BorderColor);
10441
+ --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-gold__content--Color);
10442
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--before--BorderColor);
10443
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--link--hover--before--BorderColor);
10444
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--link--focus--before--BorderColor);
10445
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
10446
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
10447
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
10448
10448
  }
10449
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);
10450
+ .pf-c-label.pf-m-outline {
10451
+ --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color);
10452
+ --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--before--BorderWidth);
10453
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
10454
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-outline--BackgroundColor);
10455
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
10456
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
10457
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
10469
10458
  }
10470
10459
 
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);
10460
+ .pf-c-label.pf-m-overflow:hover,
10461
+ .pf-c-label.pf-m-add:hover, .pf-c-label.pf-m-outline a.pf-c-label__content:hover,
10462
+ .pf-c-label.pf-m-outline button.pf-c-label__content:hover {
10463
+ --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--link--hover--before--BorderWidth);
10464
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--link--hover--before--BorderColor);
10475
10465
  }
10476
10466
 
10477
- .pf-c-list li + li {
10478
- margin-top: var(--pf-c-list--li--MarginTop);
10467
+ .pf-c-label.pf-m-overflow:focus,
10468
+ .pf-c-label.pf-m-add:focus, .pf-c-label.pf-m-outline a.pf-c-label__content:focus,
10469
+ .pf-c-label.pf-m-outline button.pf-c-label__content:focus {
10470
+ --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--link--focus--before--BorderWidth);
10471
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--link--focus--before--BorderColor);
10479
10472
  }
10480
10473
 
10481
- ul.pf-c-list {
10482
- list-style: var(--pf-c-list--ul--ListStyle);
10474
+ .pf-c-label.pf-m-editable {
10475
+ text-decoration: var(--pf-c-label--m-editable--TextDecoration);
10476
+ cursor: var(--pf-c-label--m-editable--Cursor);
10477
+ text-decoration-style: var(--pf-c-label--m-editable--TextDecorationStyle);
10478
+ text-decoration-thickness: var(--pf-c-label--m-editable--TextDecorationThickness);
10479
+ text-underline-offset: var(--pf-c-label--m-editable--TextDecorationOffset);
10480
+ text-decoration-color: var(--pf-c-label--m-editable--TextDecorationColor);
10481
+ --pf-c-label__content--MaxWidth: var(--pf-c-label--m-editable__content--MaxWidth);
10482
+ --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
10483
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-editable__content--before--BorderColor);
10484
+ --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-c-label--m-editable__content--hover--before--BorderWidth);
10485
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-editable__content--hover--before--BorderColor);
10486
+ --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-c-label--m-editable__content--focus--before--BorderWidth);
10487
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-editable__content--focus--before--BorderColor);
10488
+ --pf-c-label--m-outline__content--link--hover--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
10489
+ --pf-c-label--m-outline__content--link--focus--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
10483
10490
  }
10484
10491
 
10485
- .pf-c-list .pf-c-list__item {
10486
- display: flex;
10492
+ .pf-c-label.pf-m-editable:hover {
10493
+ --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--hover--TextDecorationColor);
10487
10494
  }
10488
10495
 
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);
10496
+ .pf-c-label.pf-m-editable:focus {
10497
+ --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--focus--TextDecorationColor);
10497
10498
  }
10498
10499
 
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);
10500
+ .pf-c-label.pf-m-editable-active {
10501
+ --pf-c-label--m-editable--Cursor: var(--pf-c-label--m-editable--m-editable-active--Cursor);
10502
+ --pf-c-label--m-editable--TextDecoration: var(--pf-c-label--m-editable--m-editable-active--TextDecoration);
10503
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-editable--m-editable-active--BackgroundColor);
10504
10504
  }
10505
10505
 
10506
- .pf-c-list.pf-m-plain {
10507
- --pf-c-list--PaddingLeft: 0;
10508
- list-style: none;
10506
+ .pf-c-label.pf-m-editable-active .pf-c-button {
10507
+ visibility: hidden;
10509
10508
  }
10510
10509
 
10511
- .pf-c-list.pf-m-inline {
10512
- --pf-c-list--PaddingLeft: 0;
10513
- display: flex;
10514
- flex-wrap: wrap;
10515
- list-style: none;
10510
+ .pf-c-label .pf-c-button {
10511
+ --pf-c-button--FontSize: var(--pf-c-label__c-button--FontSize);
10512
+ --pf-c-button--PaddingTop: var(--pf-c-label__c-button--PaddingTop);
10513
+ --pf-c-button--PaddingRight: var(--pf-c-label__c-button--PaddingRight);
10514
+ --pf-c-button--PaddingBottom: var(--pf-c-label__c-button--PaddingBottom);
10515
+ --pf-c-button--PaddingLeft: var(--pf-c-label__c-button--PaddingLeft);
10516
+ margin-top: var(--pf-c-label__c-button--MarginTop);
10517
+ margin-right: var(--pf-c-label__c-button--MarginRight);
10518
+ margin-bottom: var(--pf-c-label__c-button--MarginBottom);
10519
+ margin-left: var(--pf-c-label__c-button--MarginLeft);
10516
10520
  }
10517
10521
 
10518
- .pf-c-list.pf-m-inline li {
10519
- --pf-c-list--li--MarginTop: 0;
10522
+ .pf-c-label.pf-m-overflow, .pf-c-label.pf-m-add {
10523
+ --pf-c-label__content--Color: var(--pf-c-label--m-overflow__content--Color);
10524
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-overflow__content--BackgroundColor);
10525
+ --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-overflow__content--before--BorderWidth);
10526
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-overflow__content--before--BorderColor);
10527
+ --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-c-label--m-overflow__content--link--hover--before--BorderWidth);
10528
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-overflow__content--link--hover--before--BorderColor);
10529
+ --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-c-label--m-overflow__content--link--focus--before--BorderWidth);
10530
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-overflow__content--link--focus--before--BorderColor);
10520
10531
  }
10521
10532
 
10522
- .pf-c-list.pf-m-inline li:not(:last-child) {
10523
- margin-right: var(--pf-c-list--m-inline--li--MarginRight);
10533
+ .pf-c-label,
10534
+ .pf-c-label__content {
10535
+ display: inline-flex;
10536
+ align-items: center;
10524
10537
  }
10525
10538
 
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);
10539
+ .pf-c-label__text {
10540
+ overflow: hidden;
10541
+ text-overflow: ellipsis;
10542
+ white-space: nowrap;
10543
+ max-width: var(--pf-c-label__text--MaxWidth);
10529
10544
  }
10530
10545
 
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;
10546
+ .pf-c-label__content {
10547
+ overflow: hidden;
10548
+ text-overflow: ellipsis;
10549
+ white-space: nowrap;
10550
+ max-width: var(--pf-c-label__content--MaxWidth);
10551
+ color: var(--pf-c-label__content--Color);
10552
+ border-width: 0;
10534
10553
  }
10535
10554
 
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%;
10555
+ .pf-c-label__content::before {
10556
+ position: absolute;
10557
+ top: 0;
10558
+ right: 0;
10559
+ bottom: 0;
10560
+ left: 0;
10561
+ pointer-events: none;
10562
+ content: "";
10563
+ border: var(--pf-c-label__content--before--BorderWidth) solid var(--pf-c-label__content--before--BorderColor);
10564
+ border-radius: var(--pf-c-label--BorderRadius);
10578
10565
  }
10579
10566
 
10580
- @media (min-width: 768px) {
10581
- .pf-c-sidebar {
10582
- --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar__main--md--FlexDirection);
10583
- --pf-c-sidebar__panel--BoxShadow: none;
10584
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--md--FlexBasis);
10585
- --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar__main--md--AlignItems);
10586
- --pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--md--Top);
10587
- --pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--md--Position);
10588
- }
10589
- }
10590
- @media (min-width: 1200px) {
10591
- .pf-c-sidebar {
10592
- --pf-c-sidebar--m-gutter__main--Gap: var(--pf-c-sidebar--m-gutter__main--xl--Gap);
10593
- }
10594
- }
10595
- .pf-c-sidebar.pf-m-gutter {
10596
- --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
10597
- --pf-c-sidebar__main--child--MarginLeft: 0;
10567
+ a.pf-c-label__content,
10568
+ button.pf-c-label__content {
10569
+ cursor: pointer;
10570
+ border: none;
10598
10571
  }
10599
10572
 
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);
10573
+ a.pf-c-label__content, a.pf-c-label__content:hover, a.pf-c-label__content:focus,
10574
+ button.pf-c-label__content,
10575
+ button.pf-c-label__content:hover,
10576
+ button.pf-c-label__content:focus {
10577
+ text-decoration: none;
10603
10578
  }
10604
10579
 
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);
10580
+ a.pf-c-label__content:hover,
10581
+ button.pf-c-label__content:hover {
10582
+ --pf-c-label__content--before--BorderWidth: var(--pf-c-label__content--link--hover--before--BorderWidth);
10583
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label__content--link--hover--before--BorderColor);
10613
10584
  }
10614
10585
 
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);
10586
+ a.pf-c-label__content:focus,
10587
+ button.pf-c-label__content:focus {
10588
+ --pf-c-label__content--before--BorderWidth: var(--pf-c-label__content--link--focus--before--BorderWidth);
10589
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label__content--link--focus--before--BorderColor);
10630
10590
  }
10631
10591
 
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);
10592
+ .pf-c-label__icon {
10593
+ margin-right: var(--pf-c-label__icon--MarginRight);
10594
+ color: var(--pf-c-label__icon--Color);
10642
10595
  }
10643
10596
 
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);
10597
+ :where(.pf-theme-dark) .pf-c-label {
10598
+ --pf-c-label--BackgroundColor: var(--pf-global--BackgroundColor--300);
10599
+ --pf-c-label--m-blue--BackgroundColor: var(--pf-global--BackgroundColor--300);
10600
+ --pf-c-label--m-green--BackgroundColor: var(--pf-global--BackgroundColor--300);
10601
+ --pf-c-label--m-orange--BackgroundColor: var(--pf-global--BackgroundColor--300);
10602
+ --pf-c-label--m-red--BackgroundColor: var(--pf-global--BackgroundColor--300);
10603
+ --pf-c-label--m-purple--BackgroundColor: var(--pf-global--BackgroundColor--300);
10604
+ --pf-c-label--m-cyan--BackgroundColor: var(--pf-global--BackgroundColor--300);
10605
+ --pf-c-label__content--before--BorderWidth: 0;
10606
+ --pf-c-label__content--before--BorderColor: transparent;
10607
+ --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10608
+ --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10609
+ --pf-c-label--m-blue__content--Color: var(--pf-global--primary-color--100);
10610
+ --pf-c-label--m-outline--m-blue__content--before--BorderColor: var(--pf-global--active-color--200);
10611
+ --pf-c-label--m-outline--m-blue__content--link--hover--before--BorderColor: var(--pf-global--active-color--200);
10612
+ --pf-c-label--m-outline--m-blue__content--link--focus--before--BorderColor: var(--pf-global--active-color--200);
10613
+ --pf-c-label--m-green__content--Color: var(--pf-global--success-color--100);
10614
+ --pf-c-label--m-outline--m-green__content--before--BorderColor: var(--pf-global--palette--green-100);
10615
+ --pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor: var(--pf-global--palette--green-100);
10616
+ --pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor: var(--pf-global--palette--green-100);
10617
+ --pf-c-label--m-orange__content--Color: var(--pf-global--palette--orange-300);
10618
+ --pf-c-label--m-outline--m-orange__content--Color: var(--pf-global--palette--orange-300);
10619
+ --pf-c-label--m-outline--m-orange__content--before--BorderColor: var(--pf-global--palette--gold-100);
10620
+ --pf-c-label--m-outline--m-orange__content--link--hover--before--BorderColor: var(--pf-global--palette--gold-100);
10621
+ --pf-c-label--m-outline--m-orange__content--link--focus--before--BorderColor: var(--pf-global--palette--gold-100);
10622
+ --pf-c-label--m-red__content--Color: var(--pf-global--danger-color--100);
10623
+ --pf-c-label--m-outline--m-red__content--before--BorderColor: var(--pf-global--danger-color--100);
10624
+ --pf-c-label--m-outline--m-red__content--link--hover--before--BorderColor: var(--pf-global--danger-color--100);
10625
+ --pf-c-label--m-outline--m-red__content--link--focus--before--BorderColor: var(--pf-global--danger-color--100);
10626
+ --pf-c-label--m-purple__content--Color: var(--pf-global--palette--purple-300);
10627
+ --pf-c-label--m-purple__icon--Color: var(--pf-global--palette--purple-300);
10628
+ --pf-c-label--m-purple__content--link--hover--before--BorderColor: var(--pf-global--palette--purple-300);
10629
+ --pf-c-label--m-purple__content--link--focus--before--BorderColor: var(--pf-global--palette--purple-300);
10630
+ --pf-c-label--m-outline--m-purple__content--before--BorderColor: var(--pf-global--palette--purple-100);
10631
+ --pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor: var(--pf-global--palette--purple-100);
10632
+ --pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor: var(--pf-global--palette--purple-100);
10633
+ --pf-c-label--m-outline--m-purple__content--Color: var(--pf-global--palette--purple-300);
10634
+ --pf-c-label--m-cyan__content--Color: var(--pf-global--default-color--200);
10635
+ --pf-c-label--m-outline--m-cyan__content--Color: var(--pf-global--default-color--200);
10636
+ --pf-c-label--m-outline--m-cyan__content--before--BorderColor: var(--pf-global--palette--cyan-100);
10637
+ --pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--palette--cyan-100);
10638
+ --pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--palette--cyan-100);
10648
10639
  }
10649
10640
 
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);
10641
+ .pf-c-label-group {
10642
+ --pf-c-label-group__list--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
10643
+ --pf-c-label-group__list--MarginRight: calc(var(--pf-global--spacer--xs) * -1);
10644
+ --pf-c-label-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
10645
+ --pf-c-label-group--m-category--PaddingRight: var(--pf-global--spacer--xs);
10646
+ --pf-c-label-group--m-category--PaddingBottom: var(--pf-global--spacer--xs);
10647
+ --pf-c-label-group--m-category--PaddingLeft: var(--pf-global--spacer--sm);
10648
+ --pf-c-label-group--m-vertical--m-category--PaddingRight: var(--pf-global--spacer--sm);
10649
+ --pf-c-label-group--m-category--BorderRadius: var(--pf-global--BorderRadius--sm);
10650
+ --pf-c-label-group--m-category--BorderWidth: var(--pf-global--BorderWidth--sm);
10651
+ --pf-c-label-group--m-category--BorderColor: var(--pf-global--BorderColor--300);
10652
+ --pf-c-label-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--100);
10653
+ --pf-c-label-group__label--MarginRight: var(--pf-global--spacer--sm);
10654
+ --pf-c-label-group__label--MarginBottom: 0;
10655
+ --pf-c-label-group--m-vertical__label--MarginBottom: var(--pf-global--spacer--sm);
10656
+ --pf-c-label-group__label--FontSize: var(--pf-global--FontSize--sm);
10657
+ --pf-c-label-group__label--MaxWidth: 18ch;
10658
+ --pf-c-label-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
10659
+ --pf-c-label-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
10660
+ --pf-c-label-group--m-vertical__close--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
10661
+ --pf-c-label-group--m-vertical__close--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
10662
+ --pf-c-label-group--m-vertical__close--MarginLeft: var(--pf-global--spacer--sm);
10663
+ --pf-c-label-group--m-vertical__close--c-button--PaddingRight: var(--pf-global--spacer--sm);
10664
+ --pf-c-label-group--m-vertical__close--c-button--PaddingLeft: var(--pf-global--spacer--sm);
10665
+ --pf-c-label-group__list-item--MarginRight: var(--pf-global--spacer--xs);
10666
+ --pf-c-label-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
10667
+ --pf-c-label-group__textarea--MinWidth: 12.5rem;
10668
+ --pf-c-label-group__textarea--PaddingTop: 0.125rem;
10669
+ --pf-c-label-group__textarea--PaddingRight: var(--pf-global--spacer--xs);
10670
+ --pf-c-label-group__textarea--PaddingBottom: 0;
10671
+ --pf-c-label-group__textarea--PaddingLeft: var(--pf-global--spacer--xs);
10672
+ display: inline-flex;
10673
+ align-items: center;
10659
10674
  }
10660
10675
 
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);
10676
+ .pf-c-label-group.pf-m-category {
10677
+ padding-top: var(--pf-c-label-group--m-category--PaddingTop);
10678
+ padding-right: var(--pf-c-label-group--m-category--PaddingRight);
10679
+ padding-bottom: var(--pf-c-label-group--m-category--PaddingBottom);
10680
+ padding-left: var(--pf-c-label-group--m-category--PaddingLeft);
10681
+ background-color: var(--pf-c-label-group--m-category--BackgroundColor);
10682
+ border: var(--pf-c-label-group--m-category--BorderWidth) solid var(--pf-c-label-group--m-category--BorderColor);
10683
+ border-radius: var(--pf-c-label-group--m-category--BorderRadius);
10664
10684
  }
10665
10685
 
10666
- .pf-c-sidebar__panel.pf-m-static {
10667
- --pf-c-sidebar__panel--Position: static;
10668
- --pf-c-sidebar__panel--Top: auto;
10686
+ .pf-c-label-group.pf-m-vertical {
10687
+ --pf-c-label-group__list--MarginRight: 0;
10688
+ --pf-c-label-group__list--MarginBottom: 0;
10689
+ --pf-c-label-group__list-item--MarginRight: 0;
10690
+ --pf-c-label-group__label--MarginRight: 0;
10691
+ --pf-c-label-group__label--MarginBottom: var(--pf-c-label-group--m-vertical__label--MarginBottom);
10692
+ --pf-c-label-group__close--MarginTop: var(--pf-c-label-group--m-vertical__close--MarginTop);
10693
+ --pf-c-label-group__close--MarginLeft: var(--pf-c-label-group--m-vertical__close--MarginLeft);
10694
+ --pf-c-label-group__close--MarginBottom: 0;
10695
+ --pf-c-label-group__close--MarginRight: var(--pf-c-label-group--m-vertical__close--MarginRight);
10696
+ --pf-c-label-group--m-category--PaddingRight: var(--pf-c-label-group--m-vertical--m-category--PaddingRight);
10669
10697
  }
10670
10698
 
10671
- .pf-c-sidebar__content {
10672
- flex-grow: 1;
10673
- background-color: var(--pf-c-sidebar__content--BackgroundColor);
10699
+ .pf-c-label-group.pf-m-vertical.pf-c-label-group {
10700
+ align-items: flex-start;
10674
10701
  }
10675
10702
 
10676
- .pf-c-sidebar__content.pf-m-no-background {
10677
- --pf-c-sidebar__content--BackgroundColor: transparent;
10703
+ .pf-c-label-group.pf-m-vertical .pf-c-label-group__list {
10704
+ flex-direction: column;
10705
+ align-items: flex-start;
10678
10706
  }
10679
10707
 
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;
10708
+ .pf-c-label-group.pf-m-vertical .pf-c-label-group__main {
10709
+ flex-direction: column;
10684
10710
  }
10685
10711
 
10686
- .pf-c-sidebar__panel.pf-m-width-default {
10687
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10712
+ .pf-c-label-group.pf-m-vertical .pf-c-label-group__list-item:last-child {
10713
+ --pf-c-label-group__list-item--MarginBottom: 0;
10688
10714
  }
10689
10715
 
10690
- .pf-c-sidebar__panel.pf-m-width-25 {
10691
- --pf-c-sidebar__panel--FlexBasis: 25%;
10716
+ .pf-c-label-group.pf-m-vertical .pf-c-label-group__close .pf-c-button {
10717
+ --pf-c-button--PaddingLeft: var(--pf-c-label-group--m-vertical__close--c-button--PaddingLeft);
10718
+ --pf-c-button--PaddingRight: var(--pf-c-label-group--m-vertical__close--c-button--PaddingRight);
10692
10719
  }
10693
10720
 
10694
- .pf-c-sidebar__panel.pf-m-width-33 {
10695
- --pf-c-sidebar__panel--FlexBasis: 33%;
10721
+ .pf-c-label-group.pf-m-editable,
10722
+ .pf-c-label-group.pf-m-editable .pf-c-label-group__main,
10723
+ .pf-c-label-group.pf-m-editable .pf-c-label-group__list {
10724
+ display: flex;
10696
10725
  }
10697
10726
 
10698
- .pf-c-sidebar__panel.pf-m-width-50 {
10699
- --pf-c-sidebar__panel--FlexBasis: 50%;
10727
+ .pf-c-label-group.pf-m-editable .pf-c-label-group__main,
10728
+ .pf-c-label-group.pf-m-editable .pf-c-label-group__list,
10729
+ .pf-c-label-group.pf-m-editable .pf-c-label-group__list-item.pf-m-textarea,
10730
+ .pf-c-label-group.pf-m-editable .pf-c-label-group__textarea {
10731
+ flex: 1;
10700
10732
  }
10701
10733
 
10702
- .pf-c-sidebar__panel.pf-m-width-66 {
10703
- --pf-c-sidebar__panel--FlexBasis: 66%;
10734
+ .pf-c-label-group__main {
10735
+ display: flex;
10736
+ flex: 1;
10737
+ flex-wrap: wrap;
10738
+ align-items: baseline;
10704
10739
  }
10705
10740
 
10706
- .pf-c-sidebar__panel.pf-m-width-75 {
10707
- --pf-c-sidebar__panel--FlexBasis: 75%;
10741
+ .pf-c-label-group__list {
10742
+ display: inline-flex;
10743
+ flex-wrap: wrap;
10744
+ margin-right: var(--pf-c-label-group__list--MarginRight);
10745
+ margin-bottom: var(--pf-c-label-group__list--MarginBottom);
10708
10746
  }
10709
10747
 
10710
- .pf-c-sidebar__panel.pf-m-width-100 {
10711
- --pf-c-sidebar__panel--FlexBasis: 100%;
10748
+ .pf-c-label-group__list-item {
10749
+ display: inline-flex;
10750
+ margin-right: var(--pf-c-label-group__list-item--MarginRight);
10751
+ margin-bottom: var(--pf-c-label-group__list-item--MarginBottom);
10712
10752
  }
10713
10753
 
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
- }
10754
+ .pf-c-label-group__label {
10755
+ overflow: hidden;
10756
+ text-overflow: ellipsis;
10757
+ white-space: nowrap;
10758
+ max-width: var(--pf-c-label-group__label--MaxWidth);
10759
+ margin-right: var(--pf-c-label-group__label--MarginRight);
10760
+ margin-bottom: var(--pf-c-label-group__label--MarginBottom);
10761
+ font-size: var(--pf-c-label-group__label--FontSize);
10742
10762
  }
10743
- @media (min-width: 768px) {
10744
- .pf-c-sidebar__panel.pf-m-width-default-on-md {
10745
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10746
- }
10747
-
10748
- .pf-c-sidebar__panel.pf-m-width-25-on-md {
10749
- --pf-c-sidebar__panel--FlexBasis: 25%;
10750
- }
10751
-
10752
- .pf-c-sidebar__panel.pf-m-width-33-on-md {
10753
- --pf-c-sidebar__panel--FlexBasis: 33%;
10754
- }
10755
-
10756
- .pf-c-sidebar__panel.pf-m-width-50-on-md {
10757
- --pf-c-sidebar__panel--FlexBasis: 50%;
10758
- }
10759
-
10760
- .pf-c-sidebar__panel.pf-m-width-66-on-md {
10761
- --pf-c-sidebar__panel--FlexBasis: 66%;
10762
- }
10763
-
10764
- .pf-c-sidebar__panel.pf-m-width-75-on-md {
10765
- --pf-c-sidebar__panel--FlexBasis: 75%;
10766
- }
10767
10763
 
10768
- .pf-c-sidebar__panel.pf-m-width-100-on-md {
10769
- --pf-c-sidebar__panel--FlexBasis: 100%;
10770
- }
10764
+ .pf-c-label-group__close {
10765
+ margin-top: var(--pf-c-label-group__close--MarginTop);
10766
+ margin-right: var(--pf-c-label-group__close--MarginRight);
10767
+ margin-bottom: var(--pf-c-label-group__close--MarginBottom);
10768
+ margin-left: var(--pf-c-label-group__close--MarginLeft);
10771
10769
  }
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
10770
 
10789
- .pf-c-sidebar__panel.pf-m-width-66-on-lg {
10790
- --pf-c-sidebar__panel--FlexBasis: 66%;
10791
- }
10771
+ .pf-c-label-group__textarea {
10772
+ min-width: var(--pf-c-label-group__textarea--MinWidth);
10773
+ 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);
10774
+ white-space: nowrap;
10775
+ resize: none;
10776
+ border: 0;
10777
+ -ms-overflow-style: none;
10778
+ scrollbar-width: none;
10779
+ }
10792
10780
 
10793
- .pf-c-sidebar__panel.pf-m-width-75-on-lg {
10794
- --pf-c-sidebar__panel--FlexBasis: 75%;
10795
- }
10781
+ .pf-c-label-group__textarea::-webkit-scrollbar {
10782
+ display: none;
10783
+ }
10796
10784
 
10797
- .pf-c-sidebar__panel.pf-m-width-100-on-lg {
10798
- --pf-c-sidebar__panel--FlexBasis: 100%;
10799
- }
10785
+ .pf-c-list {
10786
+ --pf-c-list--PaddingLeft: var(--pf-global--spacer--lg);
10787
+ --pf-c-list--nested--MarginTop: var(--pf-global--spacer--sm);
10788
+ --pf-c-list--nested--MarginLeft: var(--pf-global--spacer--sm);
10789
+ --pf-c-list--ul--ListStyle: var(--pf-global--ListStyle);
10790
+ --pf-c-list--li--MarginTop: var(--pf-global--spacer--sm);
10791
+ --pf-c-list--m-inline--li--MarginRight: var(--pf-global--spacer--lg);
10792
+ --pf-c-list--m-bordered--li--PaddingBottom: var(--pf-global--spacer--sm);
10793
+ --pf-c-list--m-bordered--li--BorderBottomColor: var(--pf-global--BorderColor--100);
10794
+ --pf-c-list--m-bordered--li--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
10795
+ --pf-c-list__item-icon--MinWidth: var(--pf-global--icon--FontSize--sm);
10796
+ --pf-c-list__item-icon--MarginTop: 0.375rem;
10797
+ --pf-c-list__item-icon--MarginRight: var(--pf-global--spacer--sm);
10798
+ --pf-c-list__item-icon--Color: var(--pf-global--icon--Color--light);
10799
+ --pf-c-list__item-icon--FontSize: var(--pf-global--icon--FontSize--sm);
10800
+ --pf-c-list--m-icon-lg__item-icon--MinWidth: var(--pf-global--icon--FontSize--lg);
10801
+ --pf-c-list--m-icon-lg__item-icon--MarginRight: var(--pf-global--spacer--md);
10802
+ --pf-c-list--m-icon-lg__item-icon--FontSize: var(--pf-global--icon--FontSize--lg);
10803
+ padding-left: var(--pf-c-list--PaddingLeft);
10800
10804
  }
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
- }
10805
10805
 
10806
- .pf-c-sidebar__panel.pf-m-width-25-on-xl {
10807
- --pf-c-sidebar__panel--FlexBasis: 25%;
10808
- }
10806
+ .pf-c-list ol,
10807
+ .pf-c-list ul {
10808
+ margin-top: var(--pf-c-list--nested--MarginTop);
10809
+ margin-left: var(--pf-c-list--nested--MarginLeft);
10810
+ }
10809
10811
 
10810
- .pf-c-sidebar__panel.pf-m-width-33-on-xl {
10811
- --pf-c-sidebar__panel--FlexBasis: 33%;
10812
- }
10812
+ .pf-c-list li + li {
10813
+ margin-top: var(--pf-c-list--li--MarginTop);
10814
+ }
10813
10815
 
10814
- .pf-c-sidebar__panel.pf-m-width-50-on-xl {
10815
- --pf-c-sidebar__panel--FlexBasis: 50%;
10816
- }
10816
+ ul.pf-c-list {
10817
+ list-style: var(--pf-c-list--ul--ListStyle);
10818
+ }
10817
10819
 
10818
- .pf-c-sidebar__panel.pf-m-width-66-on-xl {
10819
- --pf-c-sidebar__panel--FlexBasis: 66%;
10820
- }
10820
+ .pf-c-list .pf-c-list__item {
10821
+ display: flex;
10822
+ }
10821
10823
 
10822
- .pf-c-sidebar__panel.pf-m-width-75-on-xl {
10823
- --pf-c-sidebar__panel--FlexBasis: 75%;
10824
- }
10824
+ .pf-c-list .pf-c-list__item-icon {
10825
+ flex-shrink: 0;
10826
+ min-width: var(--pf-c-list__item-icon--MinWidth);
10827
+ margin-top: var(--pf-c-list__item-icon--MarginTop);
10828
+ margin-right: var(--pf-c-list__item-icon--MarginRight);
10829
+ font-size: var(--pf-c-list__item-icon--FontSize);
10830
+ line-height: 1;
10831
+ color: var(--pf-c-list__item-icon--Color);
10832
+ }
10825
10833
 
10826
- .pf-c-sidebar__panel.pf-m-width-100-on-xl {
10827
- --pf-c-sidebar__panel--FlexBasis: 100%;
10828
- }
10834
+ .pf-c-list.pf-m-icon-lg {
10835
+ --pf-c-list__item-icon--MinWidth: var(--pf-c-list--m-icon-lg__item-icon--MinWidth);
10836
+ --pf-c-list__item-icon--MarginTop: 0;
10837
+ --pf-c-list__item-icon--MarginRight: var(--pf-c-list--m-icon-lg__item-icon--MarginRight);
10838
+ --pf-c-list__item-icon--FontSize: var(--pf-c-list--m-icon-lg__item-icon--FontSize);
10829
10839
  }
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
- }
10834
10840
 
10835
- .pf-c-sidebar__panel.pf-m-width-25-on-2xl {
10836
- --pf-c-sidebar__panel--FlexBasis: 25%;
10837
- }
10841
+ .pf-c-list.pf-m-plain {
10842
+ --pf-c-list--PaddingLeft: 0;
10843
+ list-style: none;
10844
+ }
10838
10845
 
10839
- .pf-c-sidebar__panel.pf-m-width-33-on-2xl {
10840
- --pf-c-sidebar__panel--FlexBasis: 33%;
10841
- }
10846
+ .pf-c-list.pf-m-inline {
10847
+ --pf-c-list--PaddingLeft: 0;
10848
+ display: flex;
10849
+ flex-wrap: wrap;
10850
+ list-style: none;
10851
+ }
10842
10852
 
10843
- .pf-c-sidebar__panel.pf-m-width-50-on-2xl {
10844
- --pf-c-sidebar__panel--FlexBasis: 50%;
10845
- }
10853
+ .pf-c-list.pf-m-inline li {
10854
+ --pf-c-list--li--MarginTop: 0;
10855
+ }
10846
10856
 
10847
- .pf-c-sidebar__panel.pf-m-width-66-on-2xl {
10848
- --pf-c-sidebar__panel--FlexBasis: 66%;
10849
- }
10857
+ .pf-c-list.pf-m-inline li:not(:last-child) {
10858
+ margin-right: var(--pf-c-list--m-inline--li--MarginRight);
10859
+ }
10850
10860
 
10851
- .pf-c-sidebar__panel.pf-m-width-75-on-2xl {
10852
- --pf-c-sidebar__panel--FlexBasis: 75%;
10853
- }
10861
+ .pf-c-list.pf-m-bordered > * {
10862
+ padding-bottom: var(--pf-c-list--m-bordered--li--PaddingBottom);
10863
+ border-bottom: var(--pf-c-list--m-bordered--li--BorderBottomWidth) solid var(--pf-c-list--m-bordered--li--BorderBottomColor);
10864
+ }
10854
10865
 
10855
- .pf-c-sidebar__panel.pf-m-width-100-on-2xl {
10856
- --pf-c-sidebar__panel--FlexBasis: 100%;
10857
- }
10866
+ .pf-c-list.pf-m-bordered > :last-child {
10867
+ --pf-c-list--m-bordered--li--PaddingBottom: 0;
10868
+ --pf-c-list--m-bordered--li--BorderBottomWidth: 0;
10858
10869
  }
10870
+
10859
10871
  .pf-c-login__footer, .pf-c-login__header {
10860
10872
  --pf-global--Color--100: var(--pf-global--Color--light-100);
10861
10873
  --pf-global--Color--200: var(--pf-global--Color--light-200);
@@ -19009,6 +19021,7 @@ label.pf-c-radio, .pf-c-radio__label,
19009
19021
  .pf-c-slider__step-label {
19010
19022
  position: absolute;
19011
19023
  top: var(--pf-c-slider__step-label--Top);
19024
+ word-break: normal;
19012
19025
  transform: translateX(var(--pf-c-slider__step-label--TranslateX));
19013
19026
  }
19014
19027
 
@@ -19094,11 +19107,16 @@ label.pf-c-radio, .pf-c-radio__label,
19094
19107
  --pf-c-spinner--m-md--diameter: var(--pf-global--icon--FontSize--md);
19095
19108
  --pf-c-spinner--m-lg--diameter: var(--pf-global--icon--FontSize--lg);
19096
19109
  --pf-c-spinner--m-xl--diameter: var(--pf-global--icon--FontSize--xl);
19110
+ --pf-c-spinner--m-inline--diameter: 1em;
19097
19111
  width: var(--pf-c-spinner--Width);
19098
19112
  height: var(--pf-c-spinner--Height);
19099
19113
  overflow: hidden;
19100
19114
  }
19101
19115
 
19116
+ .pf-c-spinner.pf-m-inline {
19117
+ --pf-c-spinner--diameter: var(--pf-c-spinner--m-inline--diameter);
19118
+ }
19119
+
19102
19120
  .pf-c-spinner.pf-m-sm {
19103
19121
  --pf-c-spinner--diameter: var(--pf-c-spinner--m-sm--diameter);
19104
19122
  }
@@ -19261,219 +19279,59 @@ svg.pf-c-spinner {
19261
19279
  animation: pf-c-spinner-animation-rotate calc(var(--pf-c-spinner--AnimationDuration) * 2) var(--pf-c-spinner--AnimationTimingFunction) infinite;
19262
19280
  }
19263
19281
 
19264
- svg.pf-c-spinner.pf-m-sm {
19265
- --pf-c-spinner--diameter: var(--pf-c-spinner--m-sm--diameter);
19266
- }
19267
-
19268
- svg.pf-c-spinner.pf-m-md {
19269
- --pf-c-spinner--diameter: var(--pf-c-spinner--m-md--diameter);
19270
- }
19271
-
19272
- svg.pf-c-spinner.pf-m-lg {
19273
- --pf-c-spinner--diameter: var(--pf-c-spinner--m-lg--diameter);
19274
- }
19275
-
19276
- svg.pf-c-spinner.pf-m-xl {
19277
- --pf-c-spinner--diameter: var(--pf-c-spinner--m-xl--diameter);
19278
- }
19279
-
19280
- .pf-c-spinner__path {
19281
- width: 100%;
19282
- height: 100%;
19283
- transform-origin: 50% 50%;
19284
- animation: pf-c-spinner-animation-dash var(--pf-c-spinner--AnimationDuration) var(--pf-c-spinner__path--AnimationTimingFunction) infinite;
19285
- stroke: var(--pf-c-spinner--Color);
19286
- stroke-linecap: round;
19287
- stroke-dasharray: 283;
19288
- stroke-dashoffset: 280;
19289
- stroke-width: var(--pf-c-spinner--stroke-width);
19290
- }
19291
-
19292
- @keyframes pf-c-spinner-animation-rotate {
19293
- 0% {
19294
- transform: rotate(0deg);
19295
- }
19296
- 100% {
19297
- transform: rotate(360deg);
19298
- }
19299
- }
19300
- @keyframes pf-c-spinner-animation-dash {
19301
- 0% {
19302
- stroke-dashoffset: 280;
19303
- transform: rotate(0);
19304
- }
19305
- 15% {
19306
- stroke-width: calc(var(--pf-c-spinner__path--StrokeWidth) - 4);
19307
- }
19308
- 40% {
19309
- stroke-dashoffset: 150;
19310
- stroke-dasharray: 220;
19311
- }
19312
- 100% {
19313
- stroke-dashoffset: 280;
19314
- transform: rotate(720deg);
19315
- }
19316
- }
19317
- .pf-c-switch {
19318
- --pf-c-switch--FontSize: var(--pf-global--FontSize--md);
19319
- --pf-c-switch__label--PaddingLeft: var(--pf-global--spacer--md);
19320
- --pf-c-switch--ColumnGap: var(--pf-c-switch__label--PaddingLeft);
19321
- --pf-c-switch__toggle-icon--FontSize: calc(var(--pf-c-switch--FontSize) * .625);
19322
- --pf-c-switch__toggle-icon--Color: var(--pf-global--Color--light-100);
19323
- --pf-c-switch__toggle-icon--Left: calc(var(--pf-c-switch--FontSize) * .4);
19324
- --pf-c-switch__toggle-icon--Offset: 0.125rem;
19325
- --pf-c-switch--LineHeight: var(--pf-global--LineHeight--md);
19326
- --pf-c-switch--Height: auto;
19327
- --pf-c-switch__input--checked__toggle--BackgroundColor: var(--pf-global--primary-color--100);
19328
- --pf-c-switch__input--checked__toggle--before--TranslateX: calc(100% + var(--pf-c-switch__toggle-icon--Offset));
19329
- --pf-c-switch__input--checked__label--Color: var(--pf-global--Color--dark-100);
19330
- --pf-c-switch__input--not-checked__label--Color: var(--pf-global--disabled-color--100);
19331
- --pf-c-switch__input--disabled__label--Color: var(--pf-global--disabled-color--100);
19332
- --pf-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-global--disabled-color--200);
19333
- --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--palette--black-150);
19334
- --pf-c-switch__input--focus__toggle--OutlineWidth: var(--pf-global--BorderWidth--md);
19335
- --pf-c-switch__input--focus__toggle--OutlineOffset: var(--pf-global--spacer--sm);
19336
- --pf-c-switch__input--focus__toggle--OutlineColor: var(--pf-global--primary-color--100);
19337
- --pf-c-switch__toggle--Height: calc(var(--pf-c-switch--FontSize) * var(--pf-c-switch--LineHeight));
19338
- --pf-c-switch__toggle--BackgroundColor: var(--pf-global--palette--black-500);
19339
- --pf-c-switch__toggle--BorderRadius: var(--pf-c-switch__toggle--Height);
19340
- --pf-c-switch__toggle--before--Width: calc(var(--pf-c-switch--FontSize) - var(--pf-c-switch__toggle-icon--Offset));
19341
- --pf-c-switch__toggle--before--Height: var(--pf-c-switch__toggle--before--Width);
19342
- --pf-c-switch__toggle--before--Top: calc((var(--pf-c-switch__toggle--Height) - var(--pf-c-switch__toggle--before--Height)) / 2);
19343
- --pf-c-switch__toggle--before--Left: var(--pf-c-switch__toggle--before--Top);
19344
- --pf-c-switch__toggle--before--BackgroundColor: var(--pf-global--BackgroundColor--100);
19345
- --pf-c-switch__toggle--before--BorderRadius: var(--pf-global--BorderRadius--lg);
19346
- --pf-c-switch__toggle--before--BoxShadow: var(--pf-global--BoxShadow--md);
19347
- --pf-c-switch__toggle--before--Transition: transform .25s ease 0s;
19348
- --pf-c-switch__toggle--Width: calc(var(--pf-c-switch__toggle--Height) + var(--pf-c-switch__toggle-icon--Offset) + var(--pf-c-switch__toggle--before--Width));
19349
- --pf-c-switch__label--Color: var(--pf-global--Color--dark-100);
19350
- position: relative;
19351
- display: inline-grid;
19352
- grid-template-columns: auto;
19353
- grid-auto-columns: 1fr;
19354
- column-gap: var(--pf-c-switch--ColumnGap);
19355
- height: var(--pf-c-switch--Height);
19356
- font-size: var(--pf-c-switch--FontSize);
19357
- line-height: var(--pf-c-switch--LineHeight);
19358
- vertical-align: middle;
19359
- cursor: pointer;
19360
- }
19361
-
19362
- .pf-c-switch.pf-m-reverse .pf-c-switch__label,
19363
- .pf-c-switch.pf-m-reverse .pf-c-switch__toggle {
19364
- grid-row: 1;
19365
- }
19366
-
19367
- .pf-c-switch.pf-m-reverse .pf-c-switch__label {
19368
- grid-column: 1;
19369
- }
19370
-
19371
- .pf-c-switch__input {
19372
- position: absolute;
19373
- cursor: pointer;
19374
- opacity: 0;
19375
- }
19376
-
19377
- .pf-c-switch__input:focus ~ .pf-c-switch__toggle {
19378
- outline: var(--pf-c-switch__input--focus__toggle--OutlineWidth) solid var(--pf-c-switch__input--focus__toggle--OutlineColor);
19379
- outline-offset: var(--pf-c-switch__input--focus__toggle--OutlineOffset);
19380
- }
19381
-
19382
- .pf-c-switch__input:checked ~ .pf-c-switch__label {
19383
- color: var(--pf-c-switch__input--checked__label--Color);
19384
- }
19385
-
19386
- .pf-c-switch__input:checked ~ .pf-c-switch__toggle {
19387
- background-color: var(--pf-c-switch__input--checked__toggle--BackgroundColor);
19388
- }
19389
-
19390
- .pf-c-switch__input:checked ~ .pf-c-switch__toggle::before {
19391
- transform: translateX(var(--pf-c-switch__input--checked__toggle--before--TranslateX));
19392
- }
19393
-
19394
- .pf-c-switch__input:checked ~ .pf-m-off {
19395
- display: none;
19396
- }
19397
-
19398
- .pf-c-switch__input:not(:checked) ~ .pf-c-switch__label {
19399
- color: var(--pf-c-switch__input--not-checked__label--Color);
19400
- }
19401
-
19402
- .pf-c-switch__input:not(:checked) ~ .pf-c-switch__toggle .pf-c-switch__toggle-icon {
19403
- display: none;
19404
- visibility: hidden;
19405
- }
19406
-
19407
- .pf-c-switch__input:not(:checked) ~ .pf-m-on {
19408
- display: none;
19409
- }
19410
-
19411
- .pf-c-switch__input:disabled {
19412
- cursor: not-allowed;
19413
- }
19414
-
19415
- .pf-c-switch__input:disabled ~ .pf-c-switch__label {
19416
- color: var(--pf-c-switch__input--disabled__label--Color);
19417
- cursor: not-allowed;
19418
- }
19419
-
19420
- .pf-c-switch__input:disabled ~ .pf-c-switch__toggle {
19421
- cursor: not-allowed;
19422
- background-color: var(--pf-c-switch__input--disabled__toggle--BackgroundColor);
19423
- }
19424
-
19425
- .pf-c-switch__input:disabled ~ .pf-c-switch__toggle::before {
19426
- background-color: var(--pf-c-switch__input--disabled__toggle--before--BackgroundColor);
19427
- }
19428
-
19429
- .pf-c-switch__toggle {
19430
- position: relative;
19431
- display: inline-block;
19432
- width: var(--pf-c-switch__toggle--Width);
19433
- height: var(--pf-c-switch__toggle--Height);
19434
- background-color: var(--pf-c-switch__toggle--BackgroundColor);
19435
- border-radius: var(--pf-c-switch__toggle--BorderRadius);
19282
+ svg.pf-c-spinner.pf-m-sm {
19283
+ --pf-c-spinner--diameter: var(--pf-c-spinner--m-sm--diameter);
19436
19284
  }
19437
19285
 
19438
- .pf-c-switch__toggle::before {
19439
- position: absolute;
19440
- top: var(--pf-c-switch__toggle--before--Top);
19441
- left: var(--pf-c-switch__toggle--before--Left);
19442
- display: block;
19443
- width: var(--pf-c-switch__toggle--before--Width);
19444
- height: var(--pf-c-switch__toggle--before--Height);
19445
- content: "";
19446
- background-color: var(--pf-c-switch__toggle--before--BackgroundColor);
19447
- border-radius: var(--pf-c-switch__toggle--before--BorderRadius);
19448
- box-shadow: var(--pf-c-switch__toggle--before--BoxShadow);
19449
- transition: var(--pf-c-switch__toggle--before--Transition);
19286
+ svg.pf-c-spinner.pf-m-md {
19287
+ --pf-c-spinner--diameter: var(--pf-c-spinner--m-md--diameter);
19450
19288
  }
19451
19289
 
19452
- .pf-c-switch__toggle-icon {
19453
- position: absolute;
19454
- top: 0;
19455
- bottom: 0;
19456
- left: var(--pf-c-switch__toggle-icon--Left);
19457
- display: flex;
19458
- align-items: center;
19459
- font-size: var(--pf-c-switch__toggle-icon--FontSize);
19460
- color: var(--pf-c-switch__toggle-icon--Color);
19290
+ svg.pf-c-spinner.pf-m-lg {
19291
+ --pf-c-spinner--diameter: var(--pf-c-spinner--m-lg--diameter);
19461
19292
  }
19462
19293
 
19463
- .pf-c-switch__label {
19464
- display: inline-block;
19465
- grid-column: 2;
19466
- color: var(--pf-c-switch__label--Color);
19467
- vertical-align: top;
19294
+ svg.pf-c-spinner.pf-m-xl {
19295
+ --pf-c-spinner--diameter: var(--pf-c-spinner--m-xl--diameter);
19468
19296
  }
19469
19297
 
19470
- :where(.pf-theme-dark) .pf-c-switch {
19471
- --pf-c-switch__toggle-icon--Color: var(--pf-global--BackgroundColor--100);
19472
- --pf-c-switch__input--not-checked__label--Color: var(--pf-global--Color--100);
19473
- --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--disabled-color--100);
19474
- --pf-c-switch__toggle--before--BoxShadow: none;
19298
+ .pf-c-spinner__path {
19299
+ width: 100%;
19300
+ height: 100%;
19301
+ transform-origin: 50% 50%;
19302
+ animation: pf-c-spinner-animation-dash var(--pf-c-spinner--AnimationDuration) var(--pf-c-spinner__path--AnimationTimingFunction) infinite;
19303
+ stroke: var(--pf-c-spinner--Color);
19304
+ stroke-linecap: round;
19305
+ stroke-dasharray: 283;
19306
+ stroke-dashoffset: 280;
19307
+ stroke-width: var(--pf-c-spinner--stroke-width);
19475
19308
  }
19476
19309
 
19310
+ @keyframes pf-c-spinner-animation-rotate {
19311
+ 0% {
19312
+ transform: rotate(0deg);
19313
+ }
19314
+ 100% {
19315
+ transform: rotate(360deg);
19316
+ }
19317
+ }
19318
+ @keyframes pf-c-spinner-animation-dash {
19319
+ 0% {
19320
+ stroke-dashoffset: 280;
19321
+ transform: rotate(0);
19322
+ }
19323
+ 15% {
19324
+ stroke-width: calc(var(--pf-c-spinner__path--StrokeWidth) - 4);
19325
+ }
19326
+ 40% {
19327
+ stroke-dashoffset: 150;
19328
+ stroke-dasharray: 220;
19329
+ }
19330
+ 100% {
19331
+ stroke-dashoffset: 280;
19332
+ transform: rotate(720deg);
19333
+ }
19334
+ }
19477
19335
  .pf-c-tabs {
19478
19336
  --pf-c-tabs--inset: 0;
19479
19337
  --pf-c-tabs--Width: auto;
@@ -20483,6 +20341,166 @@ svg.pf-c-spinner.pf-m-xl {
20483
20341
  --pf-c-tab-content__body--PaddingLeft: var(--pf-c-tab-content__body--m-padding--PaddingLeft);
20484
20342
  }
20485
20343
 
20344
+ .pf-c-switch {
20345
+ --pf-c-switch--FontSize: var(--pf-global--FontSize--md);
20346
+ --pf-c-switch__label--PaddingLeft: var(--pf-global--spacer--md);
20347
+ --pf-c-switch--ColumnGap: var(--pf-c-switch__label--PaddingLeft);
20348
+ --pf-c-switch__toggle-icon--FontSize: calc(var(--pf-c-switch--FontSize) * .625);
20349
+ --pf-c-switch__toggle-icon--Color: var(--pf-global--Color--light-100);
20350
+ --pf-c-switch__toggle-icon--Left: calc(var(--pf-c-switch--FontSize) * .4);
20351
+ --pf-c-switch__toggle-icon--Offset: 0.125rem;
20352
+ --pf-c-switch--LineHeight: var(--pf-global--LineHeight--md);
20353
+ --pf-c-switch--Height: auto;
20354
+ --pf-c-switch__input--checked__toggle--BackgroundColor: var(--pf-global--primary-color--100);
20355
+ --pf-c-switch__input--checked__toggle--before--TranslateX: calc(100% + var(--pf-c-switch__toggle-icon--Offset));
20356
+ --pf-c-switch__input--checked__label--Color: var(--pf-global--Color--dark-100);
20357
+ --pf-c-switch__input--not-checked__label--Color: var(--pf-global--disabled-color--100);
20358
+ --pf-c-switch__input--disabled__label--Color: var(--pf-global--disabled-color--100);
20359
+ --pf-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-global--disabled-color--200);
20360
+ --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--palette--black-150);
20361
+ --pf-c-switch__input--focus__toggle--OutlineWidth: var(--pf-global--BorderWidth--md);
20362
+ --pf-c-switch__input--focus__toggle--OutlineOffset: var(--pf-global--spacer--sm);
20363
+ --pf-c-switch__input--focus__toggle--OutlineColor: var(--pf-global--primary-color--100);
20364
+ --pf-c-switch__toggle--Height: calc(var(--pf-c-switch--FontSize) * var(--pf-c-switch--LineHeight));
20365
+ --pf-c-switch__toggle--BackgroundColor: var(--pf-global--palette--black-500);
20366
+ --pf-c-switch__toggle--BorderRadius: var(--pf-c-switch__toggle--Height);
20367
+ --pf-c-switch__toggle--before--Width: calc(var(--pf-c-switch--FontSize) - var(--pf-c-switch__toggle-icon--Offset));
20368
+ --pf-c-switch__toggle--before--Height: var(--pf-c-switch__toggle--before--Width);
20369
+ --pf-c-switch__toggle--before--Top: calc((var(--pf-c-switch__toggle--Height) - var(--pf-c-switch__toggle--before--Height)) / 2);
20370
+ --pf-c-switch__toggle--before--Left: var(--pf-c-switch__toggle--before--Top);
20371
+ --pf-c-switch__toggle--before--BackgroundColor: var(--pf-global--BackgroundColor--100);
20372
+ --pf-c-switch__toggle--before--BorderRadius: var(--pf-global--BorderRadius--lg);
20373
+ --pf-c-switch__toggle--before--BoxShadow: var(--pf-global--BoxShadow--md);
20374
+ --pf-c-switch__toggle--before--Transition: transform .25s ease 0s;
20375
+ --pf-c-switch__toggle--Width: calc(var(--pf-c-switch__toggle--Height) + var(--pf-c-switch__toggle-icon--Offset) + var(--pf-c-switch__toggle--before--Width));
20376
+ --pf-c-switch__label--Color: var(--pf-global--Color--dark-100);
20377
+ position: relative;
20378
+ display: inline-grid;
20379
+ grid-template-columns: auto;
20380
+ grid-auto-columns: 1fr;
20381
+ column-gap: var(--pf-c-switch--ColumnGap);
20382
+ height: var(--pf-c-switch--Height);
20383
+ font-size: var(--pf-c-switch--FontSize);
20384
+ line-height: var(--pf-c-switch--LineHeight);
20385
+ vertical-align: middle;
20386
+ cursor: pointer;
20387
+ }
20388
+
20389
+ .pf-c-switch.pf-m-reverse .pf-c-switch__label,
20390
+ .pf-c-switch.pf-m-reverse .pf-c-switch__toggle {
20391
+ grid-row: 1;
20392
+ }
20393
+
20394
+ .pf-c-switch.pf-m-reverse .pf-c-switch__label {
20395
+ grid-column: 1;
20396
+ }
20397
+
20398
+ .pf-c-switch__input {
20399
+ position: absolute;
20400
+ cursor: pointer;
20401
+ opacity: 0;
20402
+ }
20403
+
20404
+ .pf-c-switch__input:focus ~ .pf-c-switch__toggle {
20405
+ outline: var(--pf-c-switch__input--focus__toggle--OutlineWidth) solid var(--pf-c-switch__input--focus__toggle--OutlineColor);
20406
+ outline-offset: var(--pf-c-switch__input--focus__toggle--OutlineOffset);
20407
+ }
20408
+
20409
+ .pf-c-switch__input:checked ~ .pf-c-switch__label {
20410
+ color: var(--pf-c-switch__input--checked__label--Color);
20411
+ }
20412
+
20413
+ .pf-c-switch__input:checked ~ .pf-c-switch__toggle {
20414
+ background-color: var(--pf-c-switch__input--checked__toggle--BackgroundColor);
20415
+ }
20416
+
20417
+ .pf-c-switch__input:checked ~ .pf-c-switch__toggle::before {
20418
+ transform: translateX(var(--pf-c-switch__input--checked__toggle--before--TranslateX));
20419
+ }
20420
+
20421
+ .pf-c-switch__input:checked ~ .pf-m-off {
20422
+ display: none;
20423
+ }
20424
+
20425
+ .pf-c-switch__input:not(:checked) ~ .pf-c-switch__label {
20426
+ color: var(--pf-c-switch__input--not-checked__label--Color);
20427
+ }
20428
+
20429
+ .pf-c-switch__input:not(:checked) ~ .pf-c-switch__toggle .pf-c-switch__toggle-icon {
20430
+ display: none;
20431
+ visibility: hidden;
20432
+ }
20433
+
20434
+ .pf-c-switch__input:not(:checked) ~ .pf-m-on {
20435
+ display: none;
20436
+ }
20437
+
20438
+ .pf-c-switch__input:disabled {
20439
+ cursor: not-allowed;
20440
+ }
20441
+
20442
+ .pf-c-switch__input:disabled ~ .pf-c-switch__label {
20443
+ color: var(--pf-c-switch__input--disabled__label--Color);
20444
+ cursor: not-allowed;
20445
+ }
20446
+
20447
+ .pf-c-switch__input:disabled ~ .pf-c-switch__toggle {
20448
+ cursor: not-allowed;
20449
+ background-color: var(--pf-c-switch__input--disabled__toggle--BackgroundColor);
20450
+ }
20451
+
20452
+ .pf-c-switch__input:disabled ~ .pf-c-switch__toggle::before {
20453
+ background-color: var(--pf-c-switch__input--disabled__toggle--before--BackgroundColor);
20454
+ }
20455
+
20456
+ .pf-c-switch__toggle {
20457
+ position: relative;
20458
+ display: inline-block;
20459
+ width: var(--pf-c-switch__toggle--Width);
20460
+ height: var(--pf-c-switch__toggle--Height);
20461
+ background-color: var(--pf-c-switch__toggle--BackgroundColor);
20462
+ border-radius: var(--pf-c-switch__toggle--BorderRadius);
20463
+ }
20464
+
20465
+ .pf-c-switch__toggle::before {
20466
+ position: absolute;
20467
+ top: var(--pf-c-switch__toggle--before--Top);
20468
+ left: var(--pf-c-switch__toggle--before--Left);
20469
+ display: block;
20470
+ width: var(--pf-c-switch__toggle--before--Width);
20471
+ height: var(--pf-c-switch__toggle--before--Height);
20472
+ content: "";
20473
+ background-color: var(--pf-c-switch__toggle--before--BackgroundColor);
20474
+ border-radius: var(--pf-c-switch__toggle--before--BorderRadius);
20475
+ box-shadow: var(--pf-c-switch__toggle--before--BoxShadow);
20476
+ transition: var(--pf-c-switch__toggle--before--Transition);
20477
+ }
20478
+
20479
+ .pf-c-switch__toggle-icon {
20480
+ position: absolute;
20481
+ top: 0;
20482
+ bottom: 0;
20483
+ left: var(--pf-c-switch__toggle-icon--Left);
20484
+ display: flex;
20485
+ align-items: center;
20486
+ font-size: var(--pf-c-switch__toggle-icon--FontSize);
20487
+ color: var(--pf-c-switch__toggle-icon--Color);
20488
+ }
20489
+
20490
+ .pf-c-switch__label {
20491
+ display: inline-block;
20492
+ grid-column: 2;
20493
+ color: var(--pf-c-switch__label--Color);
20494
+ vertical-align: top;
20495
+ }
20496
+
20497
+ :where(.pf-theme-dark) .pf-c-switch {
20498
+ --pf-c-switch__toggle-icon--Color: var(--pf-global--BackgroundColor--100);
20499
+ --pf-c-switch__input--not-checked__label--Color: var(--pf-global--Color--100);
20500
+ --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--disabled-color--100);
20501
+ --pf-c-switch__toggle--before--BoxShadow: none;
20502
+ }
20503
+
20486
20504
  .pf-c-content {
20487
20505
  --pf-c-content--MarginBottom: var(--pf-global--spacer--md);
20488
20506
  --pf-c-content--LineHeight: var(--pf-global--LineHeight--md);
@@ -23041,6 +23059,13 @@ svg.pf-c-spinner.pf-m-xl {
23041
23059
  white-space: nowrap;
23042
23060
  }
23043
23061
 
23062
+ .pf-c-tree-view__node-text {
23063
+ font-weight: inherit;
23064
+ color: inherit;
23065
+ text-align: left;
23066
+ border: 0;
23067
+ }
23068
+
23044
23069
  label.pf-c-tree-view__node-text {
23045
23070
  cursor: pointer;
23046
23071
  }
@@ -23840,6 +23865,11 @@ label.pf-c-tree-view__node-text {
23840
23865
  --pf-c-text-input-group__text--focus-within--after--BorderBottomColor: var(--pf-global--primary-color--100);
23841
23866
  --pf-c-text-input-group__main--first-child--not--text-input--MarginLeft: var(--pf-global--spacer--sm);
23842
23867
  --pf-c-text-input-group__main--m-icon__text-input--PaddingLeft: var(--pf-global--spacer--xl);
23868
+ --pf-c-text-input-group__main--RowGap: var(--pf-global--spacer--xs);
23869
+ --pf-c-text-input-group__main--ColumnGap: var(--pf-global--spacer--sm);
23870
+ --pf-c-text-input-group--c-chip-group__main--PaddingTop: var(--pf-global--spacer--xs);
23871
+ --pf-c-text-input-group--c-chip-group__main--PaddingRight: var(--pf-global--spacer--xs);
23872
+ --pf-c-text-input-group--c-chip-group__main--PaddingBottom: var(--pf-global--spacer--xs);
23843
23873
  --pf-c-text-input-group__text-input--PaddingTop: var(--pf-global--spacer--form-element);
23844
23874
  --pf-c-text-input-group__text-input--PaddingRight: var(--pf-global--spacer--sm);
23845
23875
  --pf-c-text-input-group__text-input--PaddingBottom: var(--pf-global--spacer--form-element);
@@ -23889,7 +23919,8 @@ label.pf-c-tree-view__node-text {
23889
23919
  .pf-c-text-input-group__main {
23890
23920
  display: flex;
23891
23921
  flex: 1;
23892
- gap: var(--pf-global--spacer--sm);
23922
+ flex-wrap: wrap;
23923
+ gap: var(--pf-c-text-input-group__main--RowGap) var(--pf-c-text-input-group__main--ColumnGap);
23893
23924
  min-width: 0;
23894
23925
  }
23895
23926
 
@@ -23901,19 +23932,10 @@ label.pf-c-tree-view__node-text {
23901
23932
  margin-left: var(--pf-c-text-input-group__main--first-child--not--text-input--MarginLeft);
23902
23933
  }
23903
23934
 
23904
- .pf-c-text-input-group__main .pf-c-chip-group {
23905
- overflow: auto;
23906
- -ms-overflow-style: none;
23907
- scrollbar-width: none;
23908
- }
23909
-
23910
- .pf-c-text-input-group__main .pf-c-chip-group::-webkit-scrollbar {
23911
- display: none;
23912
- }
23913
-
23914
- .pf-c-text-input-group__main .pf-c-chip-group,
23915
- .pf-c-text-input-group__main .pf-c-chip-group__list {
23916
- flex-wrap: nowrap;
23935
+ .pf-c-text-input-group__main .pf-c-chip-group__main {
23936
+ padding-top: var(--pf-c-text-input-group--c-chip-group__main--PaddingTop);
23937
+ padding-right: var(--pf-c-text-input-group--c-chip-group__main--PaddingRight);
23938
+ padding-bottom: var(--pf-c-text-input-group--c-chip-group__main--PaddingBottom);
23917
23939
  }
23918
23940
 
23919
23941
  .pf-c-text-input-group__text {