@patternfly/react-core 4.242.8 → 4.243.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/CHANGELOG.md +11 -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 +938 -916
  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/TextArea/TextArea.tsx +21 -13
  30. package/src/components/TextArea/__tests__/TextArea.test.tsx +20 -6
  31. package/src/components/TextArea/__tests__/__snapshots__/TextArea.test.tsx.snap +31 -5
  32. package/src/components/TextArea/examples/TextArea.md +30 -0
  33. package/src/components/TextInput/TextInput.tsx +26 -18
  34. package/src/components/TextInput/__tests__/TextInput.test.tsx +16 -2
  35. package/src/components/TextInput/__tests__/__snapshots__/TextInput.test.tsx.snap +36 -4
  36. package/src/components/TextInput/examples/TextInput.md +23 -2
@@ -1296,6 +1296,41 @@ textarea.pf-c-form-control {
1296
1296
  display: none !important;
1297
1297
  }
1298
1298
  }
1299
+ .pf-c-back-to-top {
1300
+ --pf-c-back-to-top--Right: var(--pf-global--spacer--2xl);
1301
+ --pf-c-back-to-top--Bottom: var(--pf-global--spacer--lg);
1302
+ --pf-c-back-to-top--md--Bottom: var(--pf-global--spacer--2xl);
1303
+ --pf-c-back-to-top--c-button--FontSize: var(--pf-global--FontSize--xs);
1304
+ --pf-c-back-to-top--c-button--BorderRadius: var(--pf-global--BorderRadius--lg);
1305
+ --pf-c-back-to-top--c-button--PaddingTop: var(--pf-global--spacer--xs);
1306
+ --pf-c-back-to-top--c-button--PaddingRight: var(--pf-global--spacer--sm);
1307
+ --pf-c-back-to-top--c-button--PaddingBottom: var(--pf-global--spacer--xs);
1308
+ --pf-c-back-to-top--c-button--PaddingLeft: var(--pf-global--spacer--sm);
1309
+ --pf-c-back-to-top--c-button--BoxShadow: var(--pf-global--BoxShadow--lg-bottom);
1310
+ position: absolute;
1311
+ right: var(--pf-c-back-to-top--Right);
1312
+ bottom: var(--pf-c-back-to-top--Bottom);
1313
+ }
1314
+
1315
+ @media (min-width: 768px) {
1316
+ .pf-c-back-to-top {
1317
+ --pf-c-back-to-top--Bottom: var(--pf-c-back-to-top--md--Bottom);
1318
+ }
1319
+ }
1320
+ .pf-c-back-to-top.pf-m-hidden {
1321
+ display: none;
1322
+ }
1323
+
1324
+ .pf-c-back-to-top .pf-c-button {
1325
+ --pf-c-button--FontSize: var(--pf-c-back-to-top--c-button--FontSize);
1326
+ --pf-c-button--BorderRadius: var(--pf-c-back-to-top--c-button--BorderRadius);
1327
+ --pf-c-button--PaddingTop: var(--pf-c-back-to-top--c-button--PaddingTop);
1328
+ --pf-c-button--PaddingRight: var(--pf-c-back-to-top--c-button--PaddingRight);
1329
+ --pf-c-button--PaddingBottom: var(--pf-c-back-to-top--c-button--PaddingBottom);
1330
+ --pf-c-button--PaddingLeft: var(--pf-c-back-to-top--c-button--PaddingLeft);
1331
+ box-shadow: var(--pf-c-back-to-top--c-button--BoxShadow);
1332
+ }
1333
+
1299
1334
  .pf-c-avatar {
1300
1335
  --pf-c-avatar--BorderColor: transparent;
1301
1336
  --pf-c-avatar--BorderWidth: 0;
@@ -1550,41 +1585,6 @@ textarea.pf-c-form-control {
1550
1585
  --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height-on-2xl, var(--pf-c-avatar--m-xl--Height-on-xl, var(--pf-c-avatar--m-xl--Height-on-lg, var(--pf-c-avatar--m-xl--Height-on-md, var(--pf-c-avatar--m-xl--Height-on-sm, var(--pf-c-avatar--m-xl--Height))))));
1551
1586
  }
1552
1587
  }
1553
- .pf-c-back-to-top {
1554
- --pf-c-back-to-top--Right: var(--pf-global--spacer--2xl);
1555
- --pf-c-back-to-top--Bottom: var(--pf-global--spacer--lg);
1556
- --pf-c-back-to-top--md--Bottom: var(--pf-global--spacer--2xl);
1557
- --pf-c-back-to-top--c-button--FontSize: var(--pf-global--FontSize--xs);
1558
- --pf-c-back-to-top--c-button--BorderRadius: var(--pf-global--BorderRadius--lg);
1559
- --pf-c-back-to-top--c-button--PaddingTop: var(--pf-global--spacer--xs);
1560
- --pf-c-back-to-top--c-button--PaddingRight: var(--pf-global--spacer--sm);
1561
- --pf-c-back-to-top--c-button--PaddingBottom: var(--pf-global--spacer--xs);
1562
- --pf-c-back-to-top--c-button--PaddingLeft: var(--pf-global--spacer--sm);
1563
- --pf-c-back-to-top--c-button--BoxShadow: var(--pf-global--BoxShadow--lg-bottom);
1564
- position: absolute;
1565
- right: var(--pf-c-back-to-top--Right);
1566
- bottom: var(--pf-c-back-to-top--Bottom);
1567
- }
1568
-
1569
- @media (min-width: 768px) {
1570
- .pf-c-back-to-top {
1571
- --pf-c-back-to-top--Bottom: var(--pf-c-back-to-top--md--Bottom);
1572
- }
1573
- }
1574
- .pf-c-back-to-top.pf-m-hidden {
1575
- display: none;
1576
- }
1577
-
1578
- .pf-c-back-to-top .pf-c-button {
1579
- --pf-c-button--FontSize: var(--pf-c-back-to-top--c-button--FontSize);
1580
- --pf-c-button--BorderRadius: var(--pf-c-back-to-top--c-button--BorderRadius);
1581
- --pf-c-button--PaddingTop: var(--pf-c-back-to-top--c-button--PaddingTop);
1582
- --pf-c-button--PaddingRight: var(--pf-c-back-to-top--c-button--PaddingRight);
1583
- --pf-c-button--PaddingBottom: var(--pf-c-back-to-top--c-button--PaddingBottom);
1584
- --pf-c-button--PaddingLeft: var(--pf-c-back-to-top--c-button--PaddingLeft);
1585
- box-shadow: var(--pf-c-back-to-top--c-button--BoxShadow);
1586
- }
1587
-
1588
1588
  .pf-c-background-image {
1589
1589
  --pf-c-background-image--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
1590
1590
  --pf-c-background-image--BackgroundImage: url("../../assets/images/pfbg_576.jpg");
@@ -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);
9992
- }
9993
-
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);
10001
- }
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);
10017
- }
10018
-
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);
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%;
10033
9897
  }
10034
9898
 
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);
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
+ }
10049
9908
  }
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);
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
+ }
10065
9913
  }
10066
-
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);
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;
10081
9917
  }
10082
9918
 
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);
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);
10097
9922
  }
10098
9923
 
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);
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
+ }
9929
+ }
9930
+ .pf-c-sidebar.pf-m-panel-right {
9931
+ --pf-c-sidebar__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--Order);
10113
9932
  }
10114
9933
 
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);
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
+ }
9938
+ }
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);
10123
9949
  }
10124
9950
 
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);
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);
10130
9961
  }
10131
9962
 
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);
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);
10137
9967
  }
10138
9968
 
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);
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);
10155
9978
  }
10156
9979
 
10157
- .pf-c-label.pf-m-editable:hover {
10158
- --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--hover--TextDecorationColor);
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);
10159
9983
  }
10160
9984
 
10161
- .pf-c-label.pf-m-editable:focus {
10162
- --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--focus--TextDecorationColor);
9985
+ .pf-c-sidebar__panel.pf-m-static {
9986
+ --pf-c-sidebar__panel--Position: static;
9987
+ --pf-c-sidebar__panel--Top: auto;
10163
9988
  }
10164
9989
 
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);
9990
+ .pf-c-sidebar__content {
9991
+ flex-grow: 1;
9992
+ background-color: var(--pf-c-sidebar__content--BackgroundColor);
10169
9993
  }
10170
9994
 
10171
- .pf-c-label.pf-m-editable-active .pf-c-button {
10172
- visibility: hidden;
9995
+ .pf-c-sidebar__content.pf-m-no-background {
9996
+ --pf-c-sidebar__content--BackgroundColor: transparent;
10173
9997
  }
10174
9998
 
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);
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;
10185
10003
  }
10186
10004
 
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);
10005
+ .pf-c-sidebar__panel.pf-m-width-default {
10006
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10196
10007
  }
10197
10008
 
10198
- .pf-c-label,
10199
- .pf-c-label__content {
10200
- display: inline-flex;
10201
- align-items: center;
10009
+ .pf-c-sidebar__panel.pf-m-width-25 {
10010
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10202
10011
  }
10203
10012
 
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);
10013
+ .pf-c-sidebar__panel.pf-m-width-33 {
10014
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10209
10015
  }
10210
10016
 
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;
10017
+ .pf-c-sidebar__panel.pf-m-width-50 {
10018
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10218
10019
  }
10219
10020
 
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);
10021
+ .pf-c-sidebar__panel.pf-m-width-66 {
10022
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10230
10023
  }
10231
10024
 
10232
- a.pf-c-label__content,
10233
- button.pf-c-label__content {
10234
- cursor: pointer;
10235
- border: none;
10025
+ .pf-c-sidebar__panel.pf-m-width-75 {
10026
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10236
10027
  }
10237
10028
 
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;
10029
+ .pf-c-sidebar__panel.pf-m-width-100 {
10030
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10243
10031
  }
10244
10032
 
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
- }
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
+ }
10250
10037
 
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
- }
10038
+ .pf-c-sidebar__panel.pf-m-width-25-on-sm {
10039
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10040
+ }
10256
10041
 
10257
- .pf-c-label__icon {
10258
- margin-right: var(--pf-c-label__icon--MarginRight);
10259
- color: var(--pf-c-label__icon--Color);
10260
- }
10042
+ .pf-c-sidebar__panel.pf-m-width-33-on-sm {
10043
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10044
+ }
10261
10045
 
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
- }
10046
+ .pf-c-sidebar__panel.pf-m-width-50-on-sm {
10047
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10048
+ }
10305
10049
 
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;
10339
- }
10050
+ .pf-c-sidebar__panel.pf-m-width-66-on-sm {
10051
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10052
+ }
10340
10053
 
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
- }
10054
+ .pf-c-sidebar__panel.pf-m-width-75-on-sm {
10055
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10056
+ }
10350
10057
 
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);
10058
+ .pf-c-sidebar__panel.pf-m-width-100-on-sm {
10059
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10060
+ }
10362
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
+ }
10363
10066
 
10364
- .pf-c-label-group.pf-m-vertical.pf-c-label-group {
10365
- align-items: flex-start;
10366
- }
10067
+ .pf-c-sidebar__panel.pf-m-width-25-on-md {
10068
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10069
+ }
10367
10070
 
10368
- .pf-c-label-group.pf-m-vertical .pf-c-label-group__list {
10369
- flex-direction: column;
10370
- align-items: flex-start;
10371
- }
10071
+ .pf-c-sidebar__panel.pf-m-width-33-on-md {
10072
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10073
+ }
10372
10074
 
10373
- .pf-c-label-group.pf-m-vertical .pf-c-label-group__main {
10374
- flex-direction: column;
10375
- }
10075
+ .pf-c-sidebar__panel.pf-m-width-50-on-md {
10076
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10077
+ }
10376
10078
 
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;
10379
- }
10079
+ .pf-c-sidebar__panel.pf-m-width-66-on-md {
10080
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10081
+ }
10380
10082
 
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);
10384
- }
10083
+ .pf-c-sidebar__panel.pf-m-width-75-on-md {
10084
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10085
+ }
10385
10086
 
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;
10087
+ .pf-c-sidebar__panel.pf-m-width-100-on-md {
10088
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10089
+ }
10390
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
+ }
10391
10095
 
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;
10397
- }
10096
+ .pf-c-sidebar__panel.pf-m-width-25-on-lg {
10097
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10098
+ }
10398
10099
 
10399
- .pf-c-label-group__main {
10400
- display: flex;
10401
- flex: 1;
10402
- flex-wrap: wrap;
10403
- align-items: baseline;
10404
- }
10100
+ .pf-c-sidebar__panel.pf-m-width-33-on-lg {
10101
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10102
+ }
10405
10103
 
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);
10411
- }
10104
+ .pf-c-sidebar__panel.pf-m-width-50-on-lg {
10105
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10106
+ }
10412
10107
 
10413
- .pf-c-label-group__list-item {
10414
- display: inline-flex;
10415
- margin-right: var(--pf-c-label-group__list-item--MarginRight);
10416
- margin-bottom: var(--pf-c-label-group__list-item--MarginBottom);
10417
- }
10108
+ .pf-c-sidebar__panel.pf-m-width-66-on-lg {
10109
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10110
+ }
10418
10111
 
10419
- .pf-c-label-group__label {
10420
- overflow: hidden;
10421
- text-overflow: ellipsis;
10422
- white-space: nowrap;
10423
- max-width: var(--pf-c-label-group__label--MaxWidth);
10424
- margin-right: var(--pf-c-label-group__label--MarginRight);
10425
- margin-bottom: var(--pf-c-label-group__label--MarginBottom);
10426
- font-size: var(--pf-c-label-group__label--FontSize);
10427
- }
10112
+ .pf-c-sidebar__panel.pf-m-width-75-on-lg {
10113
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10114
+ }
10428
10115
 
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);
10116
+ .pf-c-sidebar__panel.pf-m-width-100-on-lg {
10117
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10118
+ }
10434
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
+ }
10435
10124
 
10436
- .pf-c-label-group__textarea {
10437
- min-width: var(--pf-c-label-group__textarea--MinWidth);
10438
- padding: var(--pf-c-label-group__textarea--PaddingTop) var(--pf-c-label-group__textarea--PaddingRight) var(--pf-c-label-group__textarea--PaddingBottom) var(--pf-c-label-group__textarea--PaddingLeft);
10439
- white-space: nowrap;
10440
- resize: none;
10441
- border: 0;
10442
- -ms-overflow-style: none;
10443
- scrollbar-width: none;
10444
- }
10125
+ .pf-c-sidebar__panel.pf-m-width-25-on-xl {
10126
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10127
+ }
10445
10128
 
10446
- .pf-c-label-group__textarea::-webkit-scrollbar {
10447
- display: none;
10448
- }
10129
+ .pf-c-sidebar__panel.pf-m-width-33-on-xl {
10130
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10131
+ }
10449
10132
 
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);
10469
- }
10133
+ .pf-c-sidebar__panel.pf-m-width-50-on-xl {
10134
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10135
+ }
10470
10136
 
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);
10475
- }
10137
+ .pf-c-sidebar__panel.pf-m-width-66-on-xl {
10138
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10139
+ }
10476
10140
 
10477
- .pf-c-list li + li {
10478
- margin-top: var(--pf-c-list--li--MarginTop);
10479
- }
10141
+ .pf-c-sidebar__panel.pf-m-width-75-on-xl {
10142
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10143
+ }
10480
10144
 
10481
- ul.pf-c-list {
10482
- list-style: var(--pf-c-list--ul--ListStyle);
10145
+ .pf-c-sidebar__panel.pf-m-width-100-on-xl {
10146
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10147
+ }
10483
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
+ }
10484
10153
 
10485
- .pf-c-list .pf-c-list__item {
10486
- display: flex;
10487
- }
10154
+ .pf-c-sidebar__panel.pf-m-width-25-on-2xl {
10155
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10156
+ }
10488
10157
 
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);
10497
- }
10158
+ .pf-c-sidebar__panel.pf-m-width-33-on-2xl {
10159
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10160
+ }
10498
10161
 
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);
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);
10504
10327
  }
10505
10328
 
10506
- .pf-c-list.pf-m-plain {
10507
- --pf-c-list--PaddingLeft: 0;
10508
- list-style: none;
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);
10509
10336
  }
10510
10337
 
10511
- .pf-c-list.pf-m-inline {
10512
- --pf-c-list--PaddingLeft: 0;
10513
- display: flex;
10514
- flex-wrap: wrap;
10515
- list-style: none;
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);
10516
10352
  }
10517
10353
 
10518
- .pf-c-list.pf-m-inline li {
10519
- --pf-c-list--li--MarginTop: 0;
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);
10520
10368
  }
10521
10369
 
10522
- .pf-c-list.pf-m-inline li:not(:last-child) {
10523
- margin-right: var(--pf-c-list--m-inline--li--MarginRight);
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);
10524
10384
  }
10525
10385
 
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);
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);
10529
10400
  }
10530
10401
 
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;
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);
10534
10416
  }
10535
10417
 
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%;
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);
10578
10432
  }
10579
10433
 
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;
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);
10598
10448
  }
10599
10449
 
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);
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);
10603
10458
  }
10604
10459
 
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);
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);
10613
10465
  }
10614
10466
 
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);
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);
10630
10472
  }
10631
10473
 
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);
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);
10642
10490
  }
10643
10491
 
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);
10492
+ .pf-c-label.pf-m-editable:hover {
10493
+ --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--hover--TextDecorationColor);
10648
10494
  }
10649
10495
 
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);
10496
+ .pf-c-label.pf-m-editable:focus {
10497
+ --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--focus--TextDecorationColor);
10659
10498
  }
10660
10499
 
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);
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);
10664
10504
  }
10665
10505
 
10666
- .pf-c-sidebar__panel.pf-m-static {
10667
- --pf-c-sidebar__panel--Position: static;
10668
- --pf-c-sidebar__panel--Top: auto;
10506
+ .pf-c-label.pf-m-editable-active .pf-c-button {
10507
+ visibility: hidden;
10669
10508
  }
10670
10509
 
10671
- .pf-c-sidebar__content {
10672
- flex-grow: 1;
10673
- background-color: var(--pf-c-sidebar__content--BackgroundColor);
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);
10674
10520
  }
10675
10521
 
10676
- .pf-c-sidebar__content.pf-m-no-background {
10677
- --pf-c-sidebar__content--BackgroundColor: transparent;
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);
10678
10531
  }
10679
10532
 
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;
10533
+ .pf-c-label,
10534
+ .pf-c-label__content {
10535
+ display: inline-flex;
10536
+ align-items: center;
10684
10537
  }
10685
10538
 
10686
- .pf-c-sidebar__panel.pf-m-width-default {
10687
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
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);
10688
10544
  }
10689
10545
 
10690
- .pf-c-sidebar__panel.pf-m-width-25 {
10691
- --pf-c-sidebar__panel--FlexBasis: 25%;
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;
10692
10553
  }
10693
10554
 
10694
- .pf-c-sidebar__panel.pf-m-width-33 {
10695
- --pf-c-sidebar__panel--FlexBasis: 33%;
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);
10696
10565
  }
10697
10566
 
10698
- .pf-c-sidebar__panel.pf-m-width-50 {
10699
- --pf-c-sidebar__panel--FlexBasis: 50%;
10567
+ a.pf-c-label__content,
10568
+ button.pf-c-label__content {
10569
+ cursor: pointer;
10570
+ border: none;
10700
10571
  }
10701
10572
 
10702
- .pf-c-sidebar__panel.pf-m-width-66 {
10703
- --pf-c-sidebar__panel--FlexBasis: 66%;
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;
10704
10578
  }
10705
10579
 
10706
- .pf-c-sidebar__panel.pf-m-width-75 {
10707
- --pf-c-sidebar__panel--FlexBasis: 75%;
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);
10708
10584
  }
10709
10585
 
10710
- .pf-c-sidebar__panel.pf-m-width-100 {
10711
- --pf-c-sidebar__panel--FlexBasis: 100%;
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);
10712
10590
  }
10713
10591
 
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
- }
10592
+ .pf-c-label__icon {
10593
+ margin-right: var(--pf-c-label__icon--MarginRight);
10594
+ color: var(--pf-c-label__icon--Color);
10595
+ }
10718
10596
 
10719
- .pf-c-sidebar__panel.pf-m-width-25-on-sm {
10720
- --pf-c-sidebar__panel--FlexBasis: 25%;
10721
- }
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);
10639
+ }
10722
10640
 
10723
- .pf-c-sidebar__panel.pf-m-width-33-on-sm {
10724
- --pf-c-sidebar__panel--FlexBasis: 33%;
10725
- }
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;
10674
+ }
10726
10675
 
10727
- .pf-c-sidebar__panel.pf-m-width-50-on-sm {
10728
- --pf-c-sidebar__panel--FlexBasis: 50%;
10729
- }
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);
10684
+ }
10730
10685
 
10731
- .pf-c-sidebar__panel.pf-m-width-66-on-sm {
10732
- --pf-c-sidebar__panel--FlexBasis: 66%;
10733
- }
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);
10697
+ }
10734
10698
 
10735
- .pf-c-sidebar__panel.pf-m-width-75-on-sm {
10736
- --pf-c-sidebar__panel--FlexBasis: 75%;
10737
- }
10699
+ .pf-c-label-group.pf-m-vertical.pf-c-label-group {
10700
+ align-items: flex-start;
10701
+ }
10738
10702
 
10739
- .pf-c-sidebar__panel.pf-m-width-100-on-sm {
10740
- --pf-c-sidebar__panel--FlexBasis: 100%;
10741
- }
10703
+ .pf-c-label-group.pf-m-vertical .pf-c-label-group__list {
10704
+ flex-direction: column;
10705
+ align-items: flex-start;
10742
10706
  }
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
10707
 
10748
- .pf-c-sidebar__panel.pf-m-width-25-on-md {
10749
- --pf-c-sidebar__panel--FlexBasis: 25%;
10750
- }
10708
+ .pf-c-label-group.pf-m-vertical .pf-c-label-group__main {
10709
+ flex-direction: column;
10710
+ }
10751
10711
 
10752
- .pf-c-sidebar__panel.pf-m-width-33-on-md {
10753
- --pf-c-sidebar__panel--FlexBasis: 33%;
10754
- }
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;
10714
+ }
10755
10715
 
10756
- .pf-c-sidebar__panel.pf-m-width-50-on-md {
10757
- --pf-c-sidebar__panel--FlexBasis: 50%;
10758
- }
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);
10719
+ }
10759
10720
 
10760
- .pf-c-sidebar__panel.pf-m-width-66-on-md {
10761
- --pf-c-sidebar__panel--FlexBasis: 66%;
10762
- }
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;
10725
+ }
10763
10726
 
10764
- .pf-c-sidebar__panel.pf-m-width-75-on-md {
10765
- --pf-c-sidebar__panel--FlexBasis: 75%;
10766
- }
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;
10732
+ }
10767
10733
 
10768
- .pf-c-sidebar__panel.pf-m-width-100-on-md {
10769
- --pf-c-sidebar__panel--FlexBasis: 100%;
10770
- }
10734
+ .pf-c-label-group__main {
10735
+ display: flex;
10736
+ flex: 1;
10737
+ flex-wrap: wrap;
10738
+ align-items: baseline;
10771
10739
  }
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
10740
 
10777
- .pf-c-sidebar__panel.pf-m-width-25-on-lg {
10778
- --pf-c-sidebar__panel--FlexBasis: 25%;
10779
- }
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);
10746
+ }
10780
10747
 
10781
- .pf-c-sidebar__panel.pf-m-width-33-on-lg {
10782
- --pf-c-sidebar__panel--FlexBasis: 33%;
10783
- }
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);
10752
+ }
10784
10753
 
10785
- .pf-c-sidebar__panel.pf-m-width-50-on-lg {
10786
- --pf-c-sidebar__panel--FlexBasis: 50%;
10787
- }
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);
10762
+ }
10788
10763
 
10789
- .pf-c-sidebar__panel.pf-m-width-66-on-lg {
10790
- --pf-c-sidebar__panel--FlexBasis: 66%;
10791
- }
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);
10769
+ }
10792
10770
 
10793
- .pf-c-sidebar__panel.pf-m-width-75-on-lg {
10794
- --pf-c-sidebar__panel--FlexBasis: 75%;
10795
- }
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
+ }
10796
10780
 
10797
- .pf-c-sidebar__panel.pf-m-width-100-on-lg {
10798
- --pf-c-sidebar__panel--FlexBasis: 100%;
10799
- }
10781
+ .pf-c-label-group__textarea::-webkit-scrollbar {
10782
+ display: none;
10800
10783
  }
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
10784
 
10806
- .pf-c-sidebar__panel.pf-m-width-25-on-xl {
10807
- --pf-c-sidebar__panel--FlexBasis: 25%;
10808
- }
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);
10804
+ }
10809
10805
 
10810
- .pf-c-sidebar__panel.pf-m-width-33-on-xl {
10811
- --pf-c-sidebar__panel--FlexBasis: 33%;
10812
- }
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
+ }
10813
10811
 
10814
- .pf-c-sidebar__panel.pf-m-width-50-on-xl {
10815
- --pf-c-sidebar__panel--FlexBasis: 50%;
10816
- }
10812
+ .pf-c-list li + li {
10813
+ margin-top: var(--pf-c-list--li--MarginTop);
10814
+ }
10817
10815
 
10818
- .pf-c-sidebar__panel.pf-m-width-66-on-xl {
10819
- --pf-c-sidebar__panel--FlexBasis: 66%;
10820
- }
10816
+ ul.pf-c-list {
10817
+ list-style: var(--pf-c-list--ul--ListStyle);
10818
+ }
10821
10819
 
10822
- .pf-c-sidebar__panel.pf-m-width-75-on-xl {
10823
- --pf-c-sidebar__panel--FlexBasis: 75%;
10824
- }
10820
+ .pf-c-list .pf-c-list__item {
10821
+ display: flex;
10822
+ }
10825
10823
 
10826
- .pf-c-sidebar__panel.pf-m-width-100-on-xl {
10827
- --pf-c-sidebar__panel--FlexBasis: 100%;
10828
- }
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);
10829
10832
  }
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
10833
 
10835
- .pf-c-sidebar__panel.pf-m-width-25-on-2xl {
10836
- --pf-c-sidebar__panel--FlexBasis: 25%;
10837
- }
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);
10839
+ }
10838
10840
 
10839
- .pf-c-sidebar__panel.pf-m-width-33-on-2xl {
10840
- --pf-c-sidebar__panel--FlexBasis: 33%;
10841
- }
10841
+ .pf-c-list.pf-m-plain {
10842
+ --pf-c-list--PaddingLeft: 0;
10843
+ list-style: none;
10844
+ }
10842
10845
 
10843
- .pf-c-sidebar__panel.pf-m-width-50-on-2xl {
10844
- --pf-c-sidebar__panel--FlexBasis: 50%;
10845
- }
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
+ }
10846
10852
 
10847
- .pf-c-sidebar__panel.pf-m-width-66-on-2xl {
10848
- --pf-c-sidebar__panel--FlexBasis: 66%;
10849
- }
10853
+ .pf-c-list.pf-m-inline li {
10854
+ --pf-c-list--li--MarginTop: 0;
10855
+ }
10850
10856
 
10851
- .pf-c-sidebar__panel.pf-m-width-75-on-2xl {
10852
- --pf-c-sidebar__panel--FlexBasis: 75%;
10853
- }
10857
+ .pf-c-list.pf-m-inline li:not(:last-child) {
10858
+ margin-right: var(--pf-c-list--m-inline--li--MarginRight);
10859
+ }
10854
10860
 
10855
- .pf-c-sidebar__panel.pf-m-width-100-on-2xl {
10856
- --pf-c-sidebar__panel--FlexBasis: 100%;
10857
- }
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
+ }
10865
+
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
  }
@@ -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 {
@@ -27477,6 +27499,18 @@ label.pf-c-tree-view__node-text {
27477
27499
  grid-gap: var(--pf-l-grid--m-gutter--GridGap);
27478
27500
  }
27479
27501
 
27502
+ .pf-l-level {
27503
+ --pf-l-level--m-gutter--MarginRight: var(--pf-global--gutter);
27504
+ display: flex;
27505
+ flex-wrap: wrap;
27506
+ align-items: center;
27507
+ justify-content: space-between;
27508
+ }
27509
+
27510
+ .pf-l-level.pf-m-gutter > *:not(:last-child) {
27511
+ margin-right: var(--pf-l-level--m-gutter--MarginRight);
27512
+ }
27513
+
27480
27514
  .pf-l-split {
27481
27515
  --pf-l-split--m-gutter--MarginRight: var(--pf-global--gutter);
27482
27516
  display: flex;
@@ -27496,18 +27530,6 @@ label.pf-c-tree-view__node-text {
27496
27530
  margin-right: var(--pf-l-split--m-gutter--MarginRight);
27497
27531
  }
27498
27532
 
27499
- .pf-l-level {
27500
- --pf-l-level--m-gutter--MarginRight: var(--pf-global--gutter);
27501
- display: flex;
27502
- flex-wrap: wrap;
27503
- align-items: center;
27504
- justify-content: space-between;
27505
- }
27506
-
27507
- .pf-l-level.pf-m-gutter > *:not(:last-child) {
27508
- margin-right: var(--pf-l-level--m-gutter--MarginRight);
27509
- }
27510
-
27511
27533
  .pf-l-stack {
27512
27534
  --pf-l-stack--m-gutter--MarginBottom: var(--pf-global--gutter);
27513
27535
  display: flex;