@patternfly/react-core 4.222.10 → 4.222.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/CHANGELOG.md +30 -0
  2. package/dist/esm/components/CalendarMonth/CalendarMonth.d.ts +3 -1
  3. package/dist/esm/components/CalendarMonth/CalendarMonth.d.ts.map +1 -1
  4. package/dist/esm/components/CalendarMonth/CalendarMonth.js +21 -14
  5. package/dist/esm/components/CalendarMonth/CalendarMonth.js.map +1 -1
  6. package/dist/esm/components/DatePicker/DatePicker.d.ts +14 -4
  7. package/dist/esm/components/DatePicker/DatePicker.d.ts.map +1 -1
  8. package/dist/esm/components/DatePicker/DatePicker.js +20 -8
  9. package/dist/esm/components/DatePicker/DatePicker.js.map +1 -1
  10. package/dist/esm/components/Popover/Popover.js +2 -2
  11. package/dist/esm/components/Popover/Popover.js.map +1 -1
  12. package/dist/esm/components/TimePicker/TimePicker.d.ts +6 -1
  13. package/dist/esm/components/TimePicker/TimePicker.d.ts.map +1 -1
  14. package/dist/esm/components/TimePicker/TimePicker.js +32 -19
  15. package/dist/esm/components/TimePicker/TimePicker.js.map +1 -1
  16. package/dist/js/components/CalendarMonth/CalendarMonth.d.ts +3 -1
  17. package/dist/js/components/CalendarMonth/CalendarMonth.d.ts.map +1 -1
  18. package/dist/js/components/CalendarMonth/CalendarMonth.js +21 -14
  19. package/dist/js/components/CalendarMonth/CalendarMonth.js.map +1 -1
  20. package/dist/js/components/DatePicker/DatePicker.d.ts +14 -4
  21. package/dist/js/components/DatePicker/DatePicker.d.ts.map +1 -1
  22. package/dist/js/components/DatePicker/DatePicker.js +20 -8
  23. package/dist/js/components/DatePicker/DatePicker.js.map +1 -1
  24. package/dist/js/components/Popover/Popover.js +1 -1
  25. package/dist/js/components/Popover/Popover.js.map +1 -1
  26. package/dist/js/components/TimePicker/TimePicker.d.ts +6 -1
  27. package/dist/js/components/TimePicker/TimePicker.d.ts.map +1 -1
  28. package/dist/js/components/TimePicker/TimePicker.js +32 -19
  29. package/dist/js/components/TimePicker/TimePicker.js.map +1 -1
  30. package/dist/umd/react-core.css +20 -0
  31. package/dist/umd/react-core.js +76 -43
  32. package/dist/umd/react-core.min.css +1088 -1068
  33. package/dist/umd/react-core.min.js +2 -2
  34. package/package.json +6 -6
  35. package/src/components/CalendarMonth/CalendarMonth.tsx +21 -13
  36. package/src/components/DatePicker/DatePicker.tsx +36 -11
  37. package/src/components/Modal/examples/Modal.md +2 -0
  38. package/src/components/OverflowMenu/examples/OverflowMenu.md +8 -0
  39. package/src/components/Popover/Popover.tsx +2 -2
  40. package/src/components/TimePicker/TimePicker.tsx +36 -19
  41. package/src/components/Toolbar/examples/Toolbar.md +4 -0
  42. package/src/demos/Card/Card.md +2 -0
  43. package/src/demos/{DatePicker.md → DatePicker/DatePicker.md} +8 -0
  44. package/src/demos/DatePicker/examples/DateTimePickerInModal.tsx +51 -0
  45. package/src/demos/PrimaryDetail.md +10 -6
@@ -2919,6 +2919,8 @@ button.pf-c-breadcrumb__link {
2919
2919
  --pf-c-card__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
2920
2920
  --pf-c-card__header--m-toggle-right--toggle--MarginLeft: var(--pf-global--spacer--xs);
2921
2921
  --pf-c-card__header--m-toggle-right--actions--MarginRight: 0;
2922
+ --pf-c-card__input--focus--BorderWidth: var(--pf-global--BorderWidth--md);
2923
+ --pf-c-card__input--focus--BorderColor: var(--pf-global--primary-color--100);
2922
2924
  display: flex;
2923
2925
  flex-direction: column;
2924
2926
  background-color: var(--pf-c-card--BackgroundColor);
@@ -3178,10 +3180,28 @@ button.pf-c-breadcrumb__link {
3178
3180
  font-size: var(--pf-c-card__footer--FontSize);
3179
3181
  }
3180
3182
 
3183
+ .pf-c-card__sr-input:focus + .pf-c-card::after {
3184
+ position: absolute;
3185
+ top: 0;
3186
+ right: 0;
3187
+ bottom: 0;
3188
+ left: 0;
3189
+ content: "";
3190
+ border: var(--pf-c-card__input--focus--BorderWidth) solid var(--pf-c-card__input--focus--BorderColor);
3191
+ }
3192
+
3181
3193
  .pf-m-overpass-font .pf-c-card .pf-c-card__title {
3182
3194
  font-weight: var(--pf-global--FontWeight--normal);
3183
3195
  }
3184
3196
 
3197
+ :where(.pf-theme-dark) .pf-c-card {
3198
+ --pf-c-card--BoxShadow: var(--pf-global--BoxShadow--md);
3199
+ --pf-c-card--m-hoverable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
3200
+ --pf-c-card--m-selectable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
3201
+ --pf-c-card--m-selectable-raised--focus--BoxShadow: var(--pf-global--BoxShadow--lg);
3202
+ --pf-c-card--m-selectable-raised--active--BoxShadow: var(--pf-global--BoxShadow--lg);
3203
+ }
3204
+
3185
3205
  .pf-c-check {
3186
3206
  --pf-c-check--GridGap: var(--pf-global--spacer--xs) var(--pf-global--spacer--sm);
3187
3207
  --pf-c-check__label--disabled--Color: var(--pf-global--disabled-color--100);
@@ -9375,264 +9395,384 @@ label.pf-c-input-group__text {
9375
9395
  --pf-c-input-group__text--BackgroundColor: transparent;
9376
9396
  }
9377
9397
 
9378
- .pf-c-jump-links {
9379
- --pf-c-jump-links__list--Display: flex;
9380
- --pf-c-jump-links__list--Visibility: visible;
9381
- --pf-c-jump-links__list--PaddingTop: 0;
9382
- --pf-c-jump-links__list--PaddingRight: var(--pf-global--spacer--md);
9383
- --pf-c-jump-links__list--PaddingBottom: 0;
9384
- --pf-c-jump-links__list--PaddingLeft: var(--pf-global--spacer--md);
9385
- --pf-c-jump-links--m-vertical__list--PaddingTop: var(--pf-global--spacer--md);
9386
- --pf-c-jump-links--m-vertical__list--PaddingRight: 0;
9387
- --pf-c-jump-links--m-vertical__list--PaddingBottom: var(--pf-global--spacer--md);
9388
- --pf-c-jump-links--m-vertical__list--PaddingLeft: 0;
9389
- --pf-c-jump-links__list--FlexDirection: row;
9390
- --pf-c-jump-links--m-vertical__list--FlexDirection: column;
9391
- --pf-c-jump-links__list--before--BorderColor: var(--pf-global--BorderColor--100);
9392
- --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-global--BorderWidth--sm);
9393
- --pf-c-jump-links__list--before--BorderRightWidth: 0;
9394
- --pf-c-jump-links__list--before--BorderBottomWidth: 0;
9395
- --pf-c-jump-links__list--before--BorderLeftWidth: 0;
9396
- --pf-c-jump-links--m-vertical__list--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
9397
- --pf-c-jump-links--m-vertical__list--before--BorderTopWidth: 0;
9398
- --pf-c-jump-links__list__list--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
9399
- --pf-c-jump-links__link--PaddingTop: var(--pf-global--spacer--md);
9400
- --pf-c-jump-links__link--PaddingRight: var(--pf-global--spacer--md);
9401
- --pf-c-jump-links__link--PaddingBottom: var(--pf-global--spacer--md);
9402
- --pf-c-jump-links__link--PaddingLeft: var(--pf-global--spacer--md);
9403
- --pf-c-jump-links__list__list__link--PaddingTop: var(--pf-global--spacer--sm);
9404
- --pf-c-jump-links__list__list__link--PaddingLeft: var(--pf-global--spacer--lg);
9405
- --pf-c-jump-links__list__list__link--PaddingBottom: var(--pf-global--spacer--sm);
9406
- --pf-c-jump-links__link--OutlineOffset: calc(-1 * var(--pf-global--spacer--sm));
9407
- --pf-c-jump-links__link--before--BorderTopWidth: 0;
9408
- --pf-c-jump-links__link--before--BorderRightWidth: 0;
9409
- --pf-c-jump-links__link--before--BorderBottomWidth: 0;
9410
- --pf-c-jump-links__link--before--BorderLeftWidth: 0;
9411
- --pf-c-jump-links__link--before--BorderColor: transparent;
9412
- --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-global--BorderWidth--lg);
9413
- --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: 0;
9414
- --pf-c-jump-links__item--m-current__link--before--BorderColor: var(--pf-global--primary-color--100);
9415
- --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth: 0;
9416
- --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth: var(--pf-global--BorderWidth--lg);
9417
- --pf-c-jump-links__link-text--Color: var(--pf-global--Color--200);
9418
- --pf-c-jump-links__link--hover__link-text--Color: var(--pf-global--Color--100);
9419
- --pf-c-jump-links__link--focus__link-text--Color: var(--pf-global--Color--100);
9420
- --pf-c-jump-links__item--m-current__link-text--Color: var(--pf-global--Color--100);
9421
- --pf-c-jump-links__label--MarginBottom: var(--pf-global--spacer--md);
9422
- --pf-c-jump-links__label--Display: block;
9423
- --pf-c-jump-links__label--Visibility: visible;
9424
- --pf-c-jump-links__toggle--MarginTop: calc(-1 * var(--pf-global--spacer--form-element));
9425
- --pf-c-jump-links__toggle--MarginBottom--base: calc(-1 * var(--pf-global--spacer--form-element));
9426
- --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links__toggle--MarginBottom--base);
9427
- --pf-c-jump-links--m-expanded__toggle--MarginBottom: calc(var(--pf-c-jump-links__toggle--MarginBottom--base) + var(--pf-global--spacer--md));
9428
- --pf-c-jump-links__toggle--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
9429
- --pf-c-jump-links__toggle--Display: none;
9430
- --pf-c-jump-links__toggle--Visibility: hidden;
9431
- --pf-c-jump-links__toggle-icon--Color: currentColor;
9432
- --pf-c-jump-links__toggle-icon--Transition: var(--pf-global--Transition);
9433
- --pf-c-jump-links__toggle-icon--Rotate: 0;
9434
- --pf-c-jump-links--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
9435
- --pf-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
9436
- --pf-c-jump-links__toggle-text--MarginLeft: var(--pf-global--spacer--md);
9437
- --pf-c-jump-links__toggle-text--Color: var(--pf-global--Color--100);
9438
- display: flex;
9398
+ .pf-c-label {
9399
+ --pf-c-label--PaddingTop: var(--pf-global--spacer--xs);
9400
+ --pf-c-label--PaddingRight: var(--pf-global--spacer--sm);
9401
+ --pf-c-label--PaddingBottom: var(--pf-global--spacer--xs);
9402
+ --pf-c-label--PaddingLeft: var(--pf-global--spacer--sm);
9403
+ --pf-c-label--BorderRadius: var(--pf-global--BorderRadius--lg);
9404
+ --pf-c-label--BackgroundColor: var(--pf-global--palette--black-150);
9405
+ --pf-c-label--Color: var(--pf-global--Color--100);
9406
+ --pf-c-label--FontSize: var(--pf-global--FontSize--sm);
9407
+ --pf-c-label__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
9408
+ --pf-c-label__content--before--BorderColor: var(--pf-global--BorderColor--100);
9409
+ --pf-c-label--m-outline--BackgroundColor: var(--pf-global--BackgroundColor--100);
9410
+ --pf-c-label--m-outline__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
9411
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-global--BorderColor--100);
9412
+ --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
9413
+ --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
9414
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--200);
9415
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--200);
9416
+ --pf-c-label--m-outline__content--link--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
9417
+ --pf-c-label--m-outline__content--link--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
9418
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
9419
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
9420
+ --pf-c-label--m-blue--BackgroundColor: var(--pf-global--palette--blue-50);
9421
+ --pf-c-label--m-blue__icon--Color: var(--pf-global--primary-color--100);
9422
+ --pf-c-label--m-blue__content--Color: var(--pf-global--info-color--200);
9423
+ --pf-c-label--m-blue__content--before--BorderColor: var(--pf-global--palette--blue-100);
9424
+ --pf-c-label--m-blue__content--link--hover--before--BorderColor: var(--pf-global--primary-color--100);
9425
+ --pf-c-label--m-blue__content--link--focus--before--BorderColor: var(--pf-global--primary-color--100);
9426
+ --pf-c-label--m-outline--m-blue__content--Color: var(--pf-global--primary-color--100);
9427
+ --pf-c-label--m-outline--m-blue__content--before--BorderColor: var(--pf-global--BorderColor--100);
9428
+ --pf-c-label--m-outline--m-blue__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
9429
+ --pf-c-label--m-outline--m-blue__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
9430
+ --pf-c-label--m-green--BackgroundColor: var(--pf-global--palette--green-50);
9431
+ --pf-c-label--m-green__icon--Color: var(--pf-global--success-color--100);
9432
+ --pf-c-label--m-green__content--Color: var(--pf-global--success-color--200);
9433
+ --pf-c-label--m-green__content--before--BorderColor: var(--pf-global--palette--green-100);
9434
+ --pf-c-label--m-green__content--link--hover--before--BorderColor: var(--pf-global--success-color--100);
9435
+ --pf-c-label--m-green__content--link--focus--before--BorderColor: var(--pf-global--success-color--100);
9436
+ --pf-c-label--m-outline--m-green__content--Color: var(--pf-global--success-color--100);
9437
+ --pf-c-label--m-outline--m-green__content--before--BorderColor: var(--pf-global--BorderColor--100);
9438
+ --pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
9439
+ --pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
9440
+ --pf-c-label--m-orange--BackgroundColor: var(--pf-global--palette--orange-50);
9441
+ --pf-c-label--m-orange__icon--Color: var(--pf-global--palette--orange-300);
9442
+ --pf-c-label--m-orange__content--Color: var(--pf-global--palette--orange-700);
9443
+ --pf-c-label--m-orange__content--before--BorderColor: var(--pf-global--palette--orange-100);
9444
+ --pf-c-label--m-orange__content--link--hover--before--BorderColor: var(--pf-global--palette--orange-300);
9445
+ --pf-c-label--m-orange__content--link--focus--before--BorderColor: var(--pf-global--palette--orange-300);
9446
+ --pf-c-label--m-outline--m-orange__content--Color: var(--pf-global--palette--orange-500);
9447
+ --pf-c-label--m-outline--m-orange__content--before--BorderColor: var(--pf-global--BorderColor--100);
9448
+ --pf-c-label--m-outline--m-orange__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
9449
+ --pf-c-label--m-outline--m-orange__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
9450
+ --pf-c-label--m-red--BackgroundColor: var(--pf-global--palette--red-50);
9451
+ --pf-c-label--m-red__icon--Color: var(--pf-global--danger-color--100);
9452
+ --pf-c-label--m-red__content--Color: var(--pf-global--palette--red-300);
9453
+ --pf-c-label--m-red__content--before--BorderColor: var(--pf-global--palette--red-100);
9454
+ --pf-c-label--m-red__content--link--hover--before--BorderColor: var(--pf-global--danger-color--100);
9455
+ --pf-c-label--m-red__content--link--focus--before--BorderColor: var(--pf-global--danger-color--100);
9456
+ --pf-c-label--m-outline--m-red__content--Color: var(--pf-global--danger-color--100);
9457
+ --pf-c-label--m-outline--m-red__content--before--BorderColor: var(--pf-global--BorderColor--100);
9458
+ --pf-c-label--m-outline--m-red__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
9459
+ --pf-c-label--m-outline--m-red__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
9460
+ --pf-c-label--m-purple--BackgroundColor: var(--pf-global--palette--purple-50);
9461
+ --pf-c-label--m-purple__icon--Color: var(--pf-global--palette--purple-500);
9462
+ --pf-c-label--m-purple__content--Color: var(--pf-global--palette--purple-700);
9463
+ --pf-c-label--m-purple__content--before--BorderColor: var(--pf-global--palette--purple-100);
9464
+ --pf-c-label--m-purple__content--link--hover--before--BorderColor: var(--pf-global--palette--purple-500);
9465
+ --pf-c-label--m-purple__content--link--focus--before--BorderColor: var(--pf-global--palette--purple-500);
9466
+ --pf-c-label--m-outline--m-purple__content--Color: var(--pf-global--palette--purple-500);
9467
+ --pf-c-label--m-outline--m-purple__content--before--BorderColor: var(--pf-global--BorderColor--100);
9468
+ --pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
9469
+ --pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
9470
+ --pf-c-label--m-cyan--BackgroundColor: var(--pf-global--palette--cyan-50);
9471
+ --pf-c-label--m-cyan__icon--Color: var(--pf-global--default-color--200);
9472
+ --pf-c-label--m-cyan__content--Color: var(--pf-global--default-color--300);
9473
+ --pf-c-label--m-cyan__content--before--BorderColor: var(--pf-global--palette--cyan-100);
9474
+ --pf-c-label--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--default-color--200);
9475
+ --pf-c-label--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--default-color--200);
9476
+ --pf-c-label--m-outline--m-cyan__content--Color: var(--pf-global--palette--cyan-400);
9477
+ --pf-c-label--m-outline--m-cyan__content--before--BorderColor: var(--pf-global--BorderColor--100);
9478
+ --pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
9479
+ --pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
9480
+ --pf-c-label--m-gold--BackgroundColor: var(--pf-global--palette--gold-50);
9481
+ --pf-c-label--m-gold__icon--Color: var(--pf-global--palette--gold-400);
9482
+ --pf-c-label--m-gold__content--Color: var(--pf-global--palette--gold-700);
9483
+ --pf-c-label--m-gold__content--before--BorderColor: var(--pf-global--palette--gold-100);
9484
+ --pf-c-label--m-gold__content--link--hover--before--BorderColor: var(--pf-global--palette--gold-300);
9485
+ --pf-c-label--m-gold__content--link--focus--before--BorderColor: var(--pf-global--palette--gold-300);
9486
+ --pf-c-label--m-outline--m-gold__content--Color: var(--pf-global--palette--gold-600);
9487
+ --pf-c-label--m-outline--m-gold__content--before--BorderColor: var(--pf-global--BorderColor--100);
9488
+ --pf-c-label--m-outline--m-gold__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
9489
+ --pf-c-label--m-outline--m-gold__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
9490
+ --pf-c-label--m-overflow__content--Color: var(--pf-global--link--Color);
9491
+ --pf-c-label--m-overflow__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
9492
+ --pf-c-label--m-overflow__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
9493
+ --pf-c-label--m-overflow__content--before--BorderColor: var(--pf-global--BorderColor--300);
9494
+ --pf-c-label--m-overflow__content--link--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
9495
+ --pf-c-label--m-overflow__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--300);
9496
+ --pf-c-label--m-overflow__content--link--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
9497
+ --pf-c-label--m-overflow__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--300);
9498
+ --pf-c-label--m-compact--PaddingTop: 0;
9499
+ --pf-c-label--m-compact--PaddingRight: var(--pf-global--spacer--sm);
9500
+ --pf-c-label--m-compact--PaddingBottom: 0;
9501
+ --pf-c-label--m-compact--PaddingLeft: var(--pf-global--spacer--sm);
9502
+ --pf-c-label--m-compact--FontSize: var(--pf-global--FontSize--xs);
9503
+ --pf-c-label--m-compact--m-editable--TextDecorationOffset: 0.0625rem;
9504
+ --pf-c-label__content--Color: var(--pf-global--Color--100);
9505
+ --pf-c-label__content--MaxWidth: 100%;
9506
+ --pf-c-label--m-outline__content--Color: var(--pf-global--Color--100);
9507
+ --pf-c-label--m-editable__content--MaxWidth: 16ch;
9508
+ --pf-c-label__text--MaxWidth: 16ch;
9509
+ --pf-c-label__icon--Color: var(--pf-global--Color--100);
9510
+ --pf-c-label__icon--MarginRight: var(--pf-global--spacer--xs);
9511
+ --pf-c-label__c-button--FontSize: var(--pf-global--FontSize--xs);
9512
+ --pf-c-label__c-button--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
9513
+ --pf-c-label__c-button--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
9514
+ --pf-c-label__c-button--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
9515
+ --pf-c-label__c-button--MarginLeft: var(--pf-global--spacer--xs);
9516
+ --pf-c-label__c-button--PaddingTop: var(--pf-global--spacer--xs);
9517
+ --pf-c-label__c-button--PaddingRight: var(--pf-global--spacer--sm);
9518
+ --pf-c-label__c-button--PaddingBottom: var(--pf-global--spacer--xs);
9519
+ --pf-c-label__c-button--PaddingLeft: var(--pf-global--spacer--sm);
9520
+ --pf-c-label--m-editable--Cursor: pointer;
9521
+ --pf-c-label--m-editable--TextDecoration: underline;
9522
+ --pf-c-label--m-editable--TextDecorationStyle: dashed;
9523
+ --pf-c-label--m-editable--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
9524
+ --pf-c-label--m-editable--TextDecorationOffset: 0.25rem;
9525
+ --pf-c-label--m-editable--TextDecorationColor: var(--pf-global--BorderColor--200);
9526
+ --pf-c-label--m-editable--hover--TextDecorationColor: var(--pf-global--Color--100);
9527
+ --pf-c-label--m-editable--focus--TextDecorationColor: var(--pf-global--Color--100);
9528
+ --pf-c-label--m-editable__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
9529
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-global--BorderColor--100);
9530
+ --pf-c-label--m-editable__content--hover--before--BorderWidth: var(--pf-global--BorderWidth--sm);
9531
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-global--BorderColor--100);
9532
+ --pf-c-label--m-editable__content--focus--before--BorderWidth: var(--pf-global--BorderWidth--sm);
9533
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-global--BorderColor--100);
9534
+ --pf-c-label--m-editable--m-editable-active--Cursor: auto;
9535
+ --pf-c-label--m-editable--m-editable-active--TextDecoration: none;
9536
+ --pf-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
9537
+ --pf-c-label--m-editable--m-editable-active__content--before--BorderWidth: 0;
9538
+ --pf-c-label--m-editable--m-editable-active__content--before--BorderColor: transparent;
9539
+ position: relative;
9540
+ padding: var(--pf-c-label--PaddingTop) var(--pf-c-label--PaddingRight) var(--pf-c-label--PaddingBottom) var(--pf-c-label--PaddingLeft);
9541
+ font-size: var(--pf-c-label--FontSize);
9542
+ color: var(--pf-c-label--Color);
9543
+ white-space: nowrap;
9544
+ background-color: var(--pf-c-label--BackgroundColor);
9545
+ border: 0;
9546
+ border-radius: var(--pf-c-label--BorderRadius);
9439
9547
  }
9440
9548
 
9441
- .pf-c-jump-links.pf-m-center {
9442
- justify-content: center;
9549
+ .pf-c-label.pf-m-compact {
9550
+ --pf-c-label--PaddingTop: var(--pf-c-label--m-compact--PaddingTop);
9551
+ --pf-c-label--PaddingRight: var(--pf-c-label--m-compact--PaddingRight);
9552
+ --pf-c-label--PaddingBottom: var(--pf-c-label--m-compact--PaddingBottom);
9553
+ --pf-c-label--PaddingLeft: var(--pf-c-label--m-compact--PaddingLeft);
9554
+ --pf-c-label--FontSize: var(--pf-c-label--m-compact--FontSize);
9555
+ --pf-c-label--m-editable--TextDecorationOffset: var(--pf-c-label--m-compact--m-editable--TextDecorationOffset);
9443
9556
  }
9444
9557
 
9445
- .pf-c-jump-links.pf-m-center .pf-c-jump-links__main {
9446
- align-items: center;
9558
+ .pf-c-label.pf-m-blue {
9559
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-blue--BackgroundColor);
9560
+ --pf-c-label__icon--Color: var(--pf-c-label--m-blue__icon--Color);
9561
+ --pf-c-label__content--Color: var(--pf-c-label--m-blue__content--Color);
9562
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
9563
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-blue__content--link--hover--before--BorderColor);
9564
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-blue__content--link--focus--before--BorderColor);
9565
+ --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-blue__content--Color);
9566
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--before--BorderColor);
9567
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--link--hover--before--BorderColor);
9568
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--link--focus--before--BorderColor);
9569
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
9570
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
9571
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
9447
9572
  }
9448
9573
 
9449
- .pf-c-jump-links.pf-m-vertical, .pf-c-jump-links.pf-m-expandable {
9450
- --pf-c-jump-links__list--PaddingTop: var(--pf-c-jump-links--m-vertical__list--PaddingTop);
9451
- --pf-c-jump-links__list--PaddingRight: var(--pf-c-jump-links--m-vertical__list--PaddingRight);
9452
- --pf-c-jump-links__list--PaddingBottom: var(--pf-c-jump-links--m-vertical__list--PaddingBottom);
9453
- --pf-c-jump-links__list--PaddingLeft: var(--pf-c-jump-links--m-vertical__list--PaddingLeft);
9454
- --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderTopWidth);
9455
- --pf-c-jump-links__list--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderLeftWidth);
9456
- --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth);
9457
- --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth);
9458
- --pf-c-jump-links__list--FlexDirection: var(--pf-c-jump-links--m-vertical__list--FlexDirection);
9459
- flex-direction: column;
9574
+ .pf-c-label.pf-m-green {
9575
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-green--BackgroundColor);
9576
+ --pf-c-label__icon--Color: var(--pf-c-label--m-green__icon--Color);
9577
+ --pf-c-label__content--Color: var(--pf-c-label--m-green__content--Color);
9578
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
9579
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-green__content--link--hover--before--BorderColor);
9580
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-green__content--link--focus--before--BorderColor);
9581
+ --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-green__content--Color);
9582
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--before--BorderColor);
9583
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor);
9584
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor);
9585
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
9586
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
9587
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
9460
9588
  }
9461
9589
 
9462
- .pf-c-jump-links.pf-m-expandable {
9463
- --pf-c-jump-links__list--Display: none;
9464
- --pf-c-jump-links__list--Visibility: hidden;
9465
- --pf-c-jump-links__toggle--Display: block;
9466
- --pf-c-jump-links__toggle--Visibility: visible;
9467
- --pf-c-jump-links__label--Display: none;
9468
- --pf-c-jump-links__label--Visibility: hidden;
9590
+ .pf-c-label.pf-m-orange {
9591
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-orange--BackgroundColor);
9592
+ --pf-c-label__icon--Color: var(--pf-c-label--m-orange__icon--Color);
9593
+ --pf-c-label__content--Color: var(--pf-c-label--m-orange__content--Color);
9594
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
9595
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-orange__content--link--hover--before--BorderColor);
9596
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-orange__content--link--focus--before--BorderColor);
9597
+ --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-orange__content--Color);
9598
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--before--BorderColor);
9599
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--link--hover--before--BorderColor);
9600
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--link--focus--before--BorderColor);
9601
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
9602
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
9603
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
9469
9604
  }
9470
9605
 
9471
- .pf-c-jump-links.pf-m-non-expandable {
9472
- --pf-c-jump-links__list--Display: flex;
9473
- --pf-c-jump-links__list--Visibility: visible;
9474
- --pf-c-jump-links__toggle--Display: none;
9475
- --pf-c-jump-links__toggle--Visibility: hidden;
9476
- --pf-c-jump-links__label--Display: block;
9477
- --pf-c-jump-links__label--Visibility: visible;
9606
+ .pf-c-label.pf-m-red {
9607
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-red--BackgroundColor);
9608
+ --pf-c-label__icon--Color: var(--pf-c-label--m-red__icon--Color);
9609
+ --pf-c-label__content--Color: var(--pf-c-label--m-red__content--Color);
9610
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
9611
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-red__content--link--hover--before--BorderColor);
9612
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-red__content--link--focus--before--BorderColor);
9613
+ --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-red__content--Color);
9614
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--before--BorderColor);
9615
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--link--hover--before--BorderColor);
9616
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--link--focus--before--BorderColor);
9617
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
9618
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
9619
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
9478
9620
  }
9479
9621
 
9480
- @media (min-width: 576px) {
9481
- .pf-c-jump-links.pf-m-expandable-on-sm {
9482
- --pf-c-jump-links__list--Display: none;
9483
- --pf-c-jump-links__list--Visibility: hidden;
9484
- --pf-c-jump-links__toggle--Display: block;
9485
- --pf-c-jump-links__toggle--Visibility: visible;
9486
- --pf-c-jump-links__label--Display: none;
9487
- --pf-c-jump-links__label--Visibility: hidden;
9488
- }
9489
-
9490
- .pf-c-jump-links.pf-m-non-expandable-on-sm {
9491
- --pf-c-jump-links__list--Display: flex;
9492
- --pf-c-jump-links__list--Visibility: visible;
9493
- --pf-c-jump-links__toggle--Display: none;
9494
- --pf-c-jump-links__toggle--Visibility: hidden;
9495
- --pf-c-jump-links__label--Display: block;
9496
- --pf-c-jump-links__label--Visibility: visible;
9497
- }
9622
+ .pf-c-label.pf-m-purple {
9623
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-purple--BackgroundColor);
9624
+ --pf-c-label__icon--Color: var(--pf-c-label--m-purple__icon--Color);
9625
+ --pf-c-label__content--Color: var(--pf-c-label--m-purple__content--Color);
9626
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
9627
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-purple__content--link--hover--before--BorderColor);
9628
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-purple__content--link--focus--before--BorderColor);
9629
+ --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-purple__content--Color);
9630
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--before--BorderColor);
9631
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor);
9632
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor);
9633
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
9634
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
9635
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
9498
9636
  }
9499
- @media (min-width: 768px) {
9500
- .pf-c-jump-links.pf-m-expandable-on-md {
9501
- --pf-c-jump-links__list--Display: none;
9502
- --pf-c-jump-links__list--Visibility: hidden;
9503
- --pf-c-jump-links__toggle--Display: block;
9504
- --pf-c-jump-links__toggle--Visibility: visible;
9505
- --pf-c-jump-links__label--Display: none;
9506
- --pf-c-jump-links__label--Visibility: hidden;
9507
- }
9508
9637
 
9509
- .pf-c-jump-links.pf-m-non-expandable-on-md {
9510
- --pf-c-jump-links__list--Display: flex;
9511
- --pf-c-jump-links__list--Visibility: visible;
9512
- --pf-c-jump-links__toggle--Display: none;
9513
- --pf-c-jump-links__toggle--Visibility: hidden;
9514
- --pf-c-jump-links__label--Display: block;
9515
- --pf-c-jump-links__label--Visibility: visible;
9516
- }
9638
+ .pf-c-label.pf-m-cyan {
9639
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-cyan--BackgroundColor);
9640
+ --pf-c-label__icon--Color: var(--pf-c-label--m-cyan__icon--Color);
9641
+ --pf-c-label__content--Color: var(--pf-c-label--m-cyan__content--Color);
9642
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
9643
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-cyan__content--link--hover--before--BorderColor);
9644
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-cyan__content--link--focus--before--BorderColor);
9645
+ --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-cyan__content--Color);
9646
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--before--BorderColor);
9647
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor);
9648
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor);
9649
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
9650
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
9651
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
9517
9652
  }
9518
- @media (min-width: 992px) {
9519
- .pf-c-jump-links.pf-m-expandable-on-lg {
9520
- --pf-c-jump-links__list--Display: none;
9521
- --pf-c-jump-links__list--Visibility: hidden;
9522
- --pf-c-jump-links__toggle--Display: block;
9523
- --pf-c-jump-links__toggle--Visibility: visible;
9524
- --pf-c-jump-links__label--Display: none;
9525
- --pf-c-jump-links__label--Visibility: hidden;
9526
- }
9527
9653
 
9528
- .pf-c-jump-links.pf-m-non-expandable-on-lg {
9529
- --pf-c-jump-links__list--Display: flex;
9530
- --pf-c-jump-links__list--Visibility: visible;
9531
- --pf-c-jump-links__toggle--Display: none;
9532
- --pf-c-jump-links__toggle--Visibility: hidden;
9533
- --pf-c-jump-links__label--Display: block;
9534
- --pf-c-jump-links__label--Visibility: visible;
9535
- }
9654
+ .pf-c-label.pf-m-gold {
9655
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-gold--BackgroundColor);
9656
+ --pf-c-label__icon--Color: var(--pf-c-label--m-gold__icon--Color);
9657
+ --pf-c-label__content--Color: var(--pf-c-label--m-gold__content--Color);
9658
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
9659
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-gold__content--link--hover--before--BorderColor);
9660
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-gold__content--link--focus--before--BorderColor);
9661
+ --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-gold__content--Color);
9662
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--before--BorderColor);
9663
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--link--hover--before--BorderColor);
9664
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--link--focus--before--BorderColor);
9665
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
9666
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
9667
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
9536
9668
  }
9537
- @media (min-width: 1200px) {
9538
- .pf-c-jump-links.pf-m-expandable-on-xl {
9539
- --pf-c-jump-links__list--Display: none;
9540
- --pf-c-jump-links__list--Visibility: hidden;
9541
- --pf-c-jump-links__toggle--Display: block;
9542
- --pf-c-jump-links__toggle--Visibility: visible;
9543
- --pf-c-jump-links__label--Display: none;
9544
- --pf-c-jump-links__label--Visibility: hidden;
9545
- }
9546
9669
 
9547
- .pf-c-jump-links.pf-m-non-expandable-on-xl {
9548
- --pf-c-jump-links__list--Display: flex;
9549
- --pf-c-jump-links__list--Visibility: visible;
9550
- --pf-c-jump-links__toggle--Display: none;
9551
- --pf-c-jump-links__toggle--Visibility: hidden;
9552
- --pf-c-jump-links__label--Display: block;
9553
- --pf-c-jump-links__label--Visibility: visible;
9554
- }
9670
+ .pf-c-label.pf-m-outline {
9671
+ --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color);
9672
+ --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--before--BorderWidth);
9673
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
9674
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-outline--BackgroundColor);
9675
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
9676
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
9677
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
9555
9678
  }
9556
- @media (min-width: 1450px) {
9557
- .pf-c-jump-links.pf-m-expandable-on-2xl {
9558
- --pf-c-jump-links__list--Display: none;
9559
- --pf-c-jump-links__list--Visibility: hidden;
9560
- --pf-c-jump-links__toggle--Display: block;
9561
- --pf-c-jump-links__toggle--Visibility: visible;
9562
- --pf-c-jump-links__label--Display: none;
9563
- --pf-c-jump-links__label--Visibility: hidden;
9564
- }
9565
9679
 
9566
- .pf-c-jump-links.pf-m-non-expandable-on-2xl {
9567
- --pf-c-jump-links__list--Display: flex;
9568
- --pf-c-jump-links__list--Visibility: visible;
9569
- --pf-c-jump-links__toggle--Display: none;
9570
- --pf-c-jump-links__toggle--Visibility: hidden;
9571
- --pf-c-jump-links__label--Display: block;
9572
- --pf-c-jump-links__label--Visibility: visible;
9573
- }
9680
+ .pf-c-label.pf-m-overflow:hover,
9681
+ .pf-c-label.pf-m-add:hover, .pf-c-label.pf-m-outline a.pf-c-label__content:hover,
9682
+ .pf-c-label.pf-m-outline button.pf-c-label__content:hover {
9683
+ --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--link--hover--before--BorderWidth);
9684
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--link--hover--before--BorderColor);
9574
9685
  }
9575
- .pf-c-jump-links.pf-m-expanded {
9576
- --pf-c-jump-links__list--Display: flex;
9577
- --pf-c-jump-links__list--Visibility: visible;
9578
- --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links--m-expanded__toggle--MarginBottom);
9579
- --pf-c-jump-links__toggle-icon--Rotate: var(--pf-c-jump-links--m-expanded__toggle-icon--Rotate);
9580
- --pf-c-jump-links__toggle-icon--Color: var(--pf-c-jump-links--m-expanded__toggle-icon--Color);
9686
+
9687
+ .pf-c-label.pf-m-overflow:focus,
9688
+ .pf-c-label.pf-m-add:focus, .pf-c-label.pf-m-outline a.pf-c-label__content:focus,
9689
+ .pf-c-label.pf-m-outline button.pf-c-label__content:focus {
9690
+ --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--link--focus--before--BorderWidth);
9691
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--link--focus--before--BorderColor);
9581
9692
  }
9582
9693
 
9583
- .pf-c-jump-links__list {
9584
- position: relative;
9585
- display: var(--pf-c-jump-links__list--Display);
9586
- flex-direction: var(--pf-c-jump-links__list--FlexDirection);
9587
- padding-top: var(--pf-c-jump-links__list--PaddingTop);
9588
- padding-right: var(--pf-c-jump-links__list--PaddingRight);
9589
- padding-bottom: var(--pf-c-jump-links__list--PaddingBottom);
9590
- padding-left: var(--pf-c-jump-links__list--PaddingLeft);
9591
- visibility: var(--pf-c-jump-links__list--Visibility);
9694
+ .pf-c-label.pf-m-editable {
9695
+ text-decoration: var(--pf-c-label--m-editable--TextDecoration);
9696
+ cursor: var(--pf-c-label--m-editable--Cursor);
9697
+ text-decoration-style: var(--pf-c-label--m-editable--TextDecorationStyle);
9698
+ text-decoration-thickness: var(--pf-c-label--m-editable--TextDecorationThickness);
9699
+ text-underline-offset: var(--pf-c-label--m-editable--TextDecorationOffset);
9700
+ text-decoration-color: var(--pf-c-label--m-editable--TextDecorationColor);
9701
+ --pf-c-label__content--MaxWidth: var(--pf-c-label--m-editable__content--MaxWidth);
9702
+ --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
9703
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-editable__content--before--BorderColor);
9704
+ --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-c-label--m-editable__content--hover--before--BorderWidth);
9705
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-editable__content--hover--before--BorderColor);
9706
+ --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-c-label--m-editable__content--focus--before--BorderWidth);
9707
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-editable__content--focus--before--BorderColor);
9708
+ --pf-c-label--m-outline__content--link--hover--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
9709
+ --pf-c-label--m-outline__content--link--focus--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
9592
9710
  }
9593
9711
 
9594
- .pf-c-jump-links__list::before {
9595
- position: absolute;
9596
- top: 0;
9597
- right: 0;
9598
- bottom: 0;
9599
- left: 0;
9600
- pointer-events: none;
9601
- content: "";
9602
- border: solid var(--pf-c-jump-links__list--before--BorderColor);
9603
- border-width: var(--pf-c-jump-links__list--before--BorderTopWidth) var(--pf-c-jump-links__list--before--BorderRightWidth) var(--pf-c-jump-links__list--before--BorderBottomWidth) var(--pf-c-jump-links__list--before--BorderLeftWidth);
9712
+ .pf-c-label.pf-m-editable:hover {
9713
+ --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--hover--TextDecorationColor);
9604
9714
  }
9605
9715
 
9606
- .pf-c-jump-links__list .pf-c-jump-links__list {
9607
- --pf-c-jump-links__list--PaddingTop: 0;
9608
- --pf-c-jump-links__list--PaddingBottom: 0;
9609
- --pf-c-jump-links__link--PaddingTop: var(--pf-c-jump-links__list__list__link--PaddingTop);
9610
- --pf-c-jump-links__link--PaddingBottom: var(--pf-c-jump-links__list__list__link--PaddingBottom);
9611
- --pf-c-jump-links__link--PaddingLeft: var(--pf-c-jump-links__list__list__link--PaddingLeft);
9612
- margin-top: var(--pf-c-jump-links__list__list--MarginTop);
9716
+ .pf-c-label.pf-m-editable:focus {
9717
+ --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--focus--TextDecorationColor);
9613
9718
  }
9614
9719
 
9615
- .pf-c-jump-links__link {
9616
- position: relative;
9617
- display: flex;
9618
- flex: 1;
9619
- padding-top: var(--pf-c-jump-links__link--PaddingTop);
9620
- padding-right: var(--pf-c-jump-links__link--PaddingRight);
9621
- padding-bottom: var(--pf-c-jump-links__link--PaddingBottom);
9622
- padding-left: var(--pf-c-jump-links__link--PaddingLeft);
9623
- text-decoration: none;
9624
- outline-offset: var(--pf-c-jump-links__link--OutlineOffset);
9720
+ .pf-c-label.pf-m-editable-active {
9721
+ --pf-c-label--m-editable--Cursor: var(--pf-c-label--m-editable--m-editable-active--Cursor);
9722
+ --pf-c-label--m-editable--TextDecoration: var(--pf-c-label--m-editable--m-editable-active--TextDecoration);
9723
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-editable--m-editable-active--BackgroundColor);
9625
9724
  }
9626
9725
 
9627
- .pf-c-jump-links__link:hover {
9628
- --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--hover__link-text--Color);
9726
+ .pf-c-label.pf-m-editable-active .pf-c-button {
9727
+ visibility: hidden;
9629
9728
  }
9630
9729
 
9631
- .pf-c-jump-links__link:focus {
9632
- --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--focus__link-text--Color);
9730
+ .pf-c-label .pf-c-button {
9731
+ --pf-c-button--FontSize: var(--pf-c-label__c-button--FontSize);
9732
+ --pf-c-button--PaddingTop: var(--pf-c-label__c-button--PaddingTop);
9733
+ --pf-c-button--PaddingRight: var(--pf-c-label__c-button--PaddingRight);
9734
+ --pf-c-button--PaddingBottom: var(--pf-c-label__c-button--PaddingBottom);
9735
+ --pf-c-button--PaddingLeft: var(--pf-c-label__c-button--PaddingLeft);
9736
+ margin-top: var(--pf-c-label__c-button--MarginTop);
9737
+ margin-right: var(--pf-c-label__c-button--MarginRight);
9738
+ margin-bottom: var(--pf-c-label__c-button--MarginBottom);
9739
+ margin-left: var(--pf-c-label__c-button--MarginLeft);
9633
9740
  }
9634
9741
 
9635
- .pf-c-jump-links__link::before {
9742
+ .pf-c-label.pf-m-overflow, .pf-c-label.pf-m-add {
9743
+ --pf-c-label__content--Color: var(--pf-c-label--m-overflow__content--Color);
9744
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-overflow__content--BackgroundColor);
9745
+ --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-overflow__content--before--BorderWidth);
9746
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-overflow__content--before--BorderColor);
9747
+ --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-c-label--m-overflow__content--link--hover--before--BorderWidth);
9748
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-overflow__content--link--hover--before--BorderColor);
9749
+ --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-c-label--m-overflow__content--link--focus--before--BorderWidth);
9750
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-overflow__content--link--focus--before--BorderColor);
9751
+ }
9752
+
9753
+ .pf-c-label,
9754
+ .pf-c-label__content {
9755
+ display: inline-flex;
9756
+ align-items: center;
9757
+ }
9758
+
9759
+ .pf-c-label__text {
9760
+ overflow: hidden;
9761
+ text-overflow: ellipsis;
9762
+ white-space: nowrap;
9763
+ max-width: var(--pf-c-label__text--MaxWidth);
9764
+ }
9765
+
9766
+ .pf-c-label__content {
9767
+ overflow: hidden;
9768
+ text-overflow: ellipsis;
9769
+ white-space: nowrap;
9770
+ max-width: var(--pf-c-label__content--MaxWidth);
9771
+ color: var(--pf-c-label__content--Color);
9772
+ border-width: 0;
9773
+ }
9774
+
9775
+ .pf-c-label__content::before {
9636
9776
  position: absolute;
9637
9777
  top: 0;
9638
9778
  right: 0;
@@ -9640,992 +9780,872 @@ label.pf-c-input-group__text {
9640
9780
  left: 0;
9641
9781
  pointer-events: none;
9642
9782
  content: "";
9643
- border-color: var(--pf-c-jump-links__link--before--BorderColor);
9644
- border-style: solid;
9645
- border-width: var(--pf-c-jump-links__link--before--BorderTopWidth) var(--pf-c-jump-links__link--before--BorderRightWidth) var(--pf-c-jump-links__link--before--BorderBottomWidth) var(--pf-c-jump-links__link--before--BorderLeftWidth);
9783
+ border: var(--pf-c-label__content--before--BorderWidth) solid var(--pf-c-label__content--before--BorderColor);
9784
+ border-radius: var(--pf-c-label--BorderRadius);
9646
9785
  }
9647
9786
 
9648
- .pf-c-jump-links__item {
9649
- --pf-c-jump-links__list--before--BorderColor: transparent;
9787
+ a.pf-c-label__content,
9788
+ button.pf-c-label__content {
9789
+ cursor: pointer;
9790
+ border: none;
9650
9791
  }
9651
9792
 
9652
- .pf-c-jump-links__item.pf-m-current > .pf-c-jump-links__link {
9653
- --pf-c-jump-links__link--before--BorderTopWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderTopWidth);
9654
- --pf-c-jump-links__link--before--BorderLeftWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderLeftWidth);
9655
- --pf-c-jump-links__link--before--BorderColor: var(--pf-c-jump-links__item--m-current__link--before--BorderColor);
9656
- --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__item--m-current__link-text--Color);
9793
+ a.pf-c-label__content, a.pf-c-label__content:hover, a.pf-c-label__content:focus,
9794
+ button.pf-c-label__content,
9795
+ button.pf-c-label__content:hover,
9796
+ button.pf-c-label__content:focus {
9797
+ text-decoration: none;
9657
9798
  }
9658
9799
 
9659
- .pf-c-jump-links__link-text {
9660
- color: var(--pf-c-jump-links__link-text--Color);
9800
+ a.pf-c-label__content:hover,
9801
+ button.pf-c-label__content:hover {
9802
+ --pf-c-label__content--before--BorderWidth: var(--pf-c-label__content--link--hover--before--BorderWidth);
9803
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label__content--link--hover--before--BorderColor);
9661
9804
  }
9662
9805
 
9663
- .pf-c-jump-links__label {
9664
- display: var(--pf-c-jump-links__label--Display);
9665
- margin-bottom: var(--pf-c-jump-links__label--MarginBottom);
9666
- visibility: var(--pf-c-jump-links__label--Visibility);
9806
+ a.pf-c-label__content:focus,
9807
+ button.pf-c-label__content:focus {
9808
+ --pf-c-label__content--before--BorderWidth: var(--pf-c-label__content--link--focus--before--BorderWidth);
9809
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label__content--link--focus--before--BorderColor);
9667
9810
  }
9668
9811
 
9669
- .pf-c-jump-links__main {
9670
- display: flex;
9812
+ .pf-c-label__icon {
9813
+ margin-right: var(--pf-c-label__icon--MarginRight);
9814
+ color: var(--pf-c-label__icon--Color);
9815
+ }
9816
+
9817
+ :where(.pf-theme-dark) .pf-c-label {
9818
+ --pf-c-label--BackgroundColor: var(--pf-global--BackgroundColor--300);
9819
+ --pf-c-label--m-blue--BackgroundColor: var(--pf-global--BackgroundColor--300);
9820
+ --pf-c-label--m-green--BackgroundColor: var(--pf-global--BackgroundColor--300);
9821
+ --pf-c-label--m-orange--BackgroundColor: var(--pf-global--BackgroundColor--300);
9822
+ --pf-c-label--m-red--BackgroundColor: var(--pf-global--BackgroundColor--300);
9823
+ --pf-c-label--m-purple--BackgroundColor: var(--pf-global--BackgroundColor--300);
9824
+ --pf-c-label--m-cyan--BackgroundColor: var(--pf-global--BackgroundColor--300);
9825
+ --pf-c-label__content--before--BorderWidth: 0;
9826
+ --pf-c-label__content--before--BorderColor: transparent;
9827
+ --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-global--BorderWidth--sm);
9828
+ --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-global--BorderWidth--sm);
9829
+ --pf-c-label--m-blue__content--Color: var(--pf-global--primary-color--100);
9830
+ --pf-c-label--m-outline--m-blue__content--before--BorderColor: var(--pf-global--active-color--200);
9831
+ --pf-c-label--m-outline--m-blue__content--link--hover--before--BorderColor: var(--pf-global--active-color--200);
9832
+ --pf-c-label--m-outline--m-blue__content--link--focus--before--BorderColor: var(--pf-global--active-color--200);
9833
+ --pf-c-label--m-green__content--Color: var(--pf-global--success-color--100);
9834
+ --pf-c-label--m-outline--m-green__content--before--BorderColor: var(--pf-global--palette--green-100);
9835
+ --pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor: var(--pf-global--palette--green-100);
9836
+ --pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor: var(--pf-global--palette--green-100);
9837
+ --pf-c-label--m-orange__content--Color: var(--pf-global--palette--orange-300);
9838
+ --pf-c-label--m-outline--m-orange__content--Color: var(--pf-global--palette--orange-300);
9839
+ --pf-c-label--m-outline--m-orange__content--before--BorderColor: var(--pf-global--palette--gold-100);
9840
+ --pf-c-label--m-outline--m-orange__content--link--hover--before--BorderColor: var(--pf-global--palette--gold-100);
9841
+ --pf-c-label--m-outline--m-orange__content--link--focus--before--BorderColor: var(--pf-global--palette--gold-100);
9842
+ --pf-c-label--m-red__content--Color: var(--pf-global--danger-color--100);
9843
+ --pf-c-label--m-outline--m-red__content--before--BorderColor: var(--pf-global--danger-color--100);
9844
+ --pf-c-label--m-outline--m-red__content--link--hover--before--BorderColor: var(--pf-global--danger-color--100);
9845
+ --pf-c-label--m-outline--m-red__content--link--focus--before--BorderColor: var(--pf-global--danger-color--100);
9846
+ --pf-c-label--m-purple__content--Color: var(--pf-global--palette--purple-300);
9847
+ --pf-c-label--m-purple__icon--Color: var(--pf-global--palette--purple-300);
9848
+ --pf-c-label--m-purple__content--link--hover--before--BorderColor: var(--pf-global--palette--purple-300);
9849
+ --pf-c-label--m-purple__content--link--focus--before--BorderColor: var(--pf-global--palette--purple-300);
9850
+ --pf-c-label--m-outline--m-purple__content--before--BorderColor: var(--pf-global--palette--purple-100);
9851
+ --pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor: var(--pf-global--palette--purple-100);
9852
+ --pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor: var(--pf-global--palette--purple-100);
9853
+ --pf-c-label--m-outline--m-purple__content--Color: var(--pf-global--palette--purple-300);
9854
+ --pf-c-label--m-cyan__content--Color: var(--pf-global--default-color--200);
9855
+ --pf-c-label--m-outline--m-cyan__content--Color: var(--pf-global--default-color--200);
9856
+ --pf-c-label--m-outline--m-cyan__content--before--BorderColor: var(--pf-global--palette--cyan-100);
9857
+ --pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--palette--cyan-100);
9858
+ --pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--palette--cyan-100);
9859
+ }
9860
+
9861
+ .pf-c-label-group {
9862
+ --pf-c-label-group__list--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
9863
+ --pf-c-label-group__list--MarginRight: calc(var(--pf-global--spacer--xs) * -1);
9864
+ --pf-c-label-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
9865
+ --pf-c-label-group--m-category--PaddingRight: var(--pf-global--spacer--xs);
9866
+ --pf-c-label-group--m-category--PaddingBottom: var(--pf-global--spacer--xs);
9867
+ --pf-c-label-group--m-category--PaddingLeft: var(--pf-global--spacer--sm);
9868
+ --pf-c-label-group--m-vertical--m-category--PaddingRight: var(--pf-global--spacer--sm);
9869
+ --pf-c-label-group--m-category--BorderRadius: var(--pf-global--BorderRadius--sm);
9870
+ --pf-c-label-group--m-category--BorderWidth: var(--pf-global--BorderWidth--sm);
9871
+ --pf-c-label-group--m-category--BorderColor: var(--pf-global--BorderColor--300);
9872
+ --pf-c-label-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--100);
9873
+ --pf-c-label-group__label--MarginRight: var(--pf-global--spacer--sm);
9874
+ --pf-c-label-group__label--MarginBottom: 0;
9875
+ --pf-c-label-group--m-vertical__label--MarginBottom: var(--pf-global--spacer--sm);
9876
+ --pf-c-label-group__label--FontSize: var(--pf-global--FontSize--sm);
9877
+ --pf-c-label-group__label--MaxWidth: 18ch;
9878
+ --pf-c-label-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
9879
+ --pf-c-label-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
9880
+ --pf-c-label-group--m-vertical__close--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
9881
+ --pf-c-label-group--m-vertical__close--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
9882
+ --pf-c-label-group--m-vertical__close--MarginLeft: var(--pf-global--spacer--sm);
9883
+ --pf-c-label-group--m-vertical__close--c-button--PaddingRight: var(--pf-global--spacer--sm);
9884
+ --pf-c-label-group--m-vertical__close--c-button--PaddingLeft: var(--pf-global--spacer--sm);
9885
+ --pf-c-label-group__list-item--MarginRight: var(--pf-global--spacer--xs);
9886
+ --pf-c-label-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
9887
+ --pf-c-label-group__textarea--MinWidth: 12.5rem;
9888
+ --pf-c-label-group__textarea--PaddingTop: 0.125rem;
9889
+ --pf-c-label-group__textarea--PaddingRight: var(--pf-global--spacer--xs);
9890
+ --pf-c-label-group__textarea--PaddingBottom: 0;
9891
+ --pf-c-label-group__textarea--PaddingLeft: var(--pf-global--spacer--xs);
9892
+ display: inline-flex;
9893
+ align-items: center;
9894
+ }
9895
+
9896
+ .pf-c-label-group.pf-m-category {
9897
+ padding-top: var(--pf-c-label-group--m-category--PaddingTop);
9898
+ padding-right: var(--pf-c-label-group--m-category--PaddingRight);
9899
+ padding-bottom: var(--pf-c-label-group--m-category--PaddingBottom);
9900
+ padding-left: var(--pf-c-label-group--m-category--PaddingLeft);
9901
+ background-color: var(--pf-c-label-group--m-category--BackgroundColor);
9902
+ border: var(--pf-c-label-group--m-category--BorderWidth) solid var(--pf-c-label-group--m-category--BorderColor);
9903
+ border-radius: var(--pf-c-label-group--m-category--BorderRadius);
9904
+ }
9905
+
9906
+ .pf-c-label-group.pf-m-vertical {
9907
+ --pf-c-label-group__list--MarginRight: 0;
9908
+ --pf-c-label-group__list--MarginBottom: 0;
9909
+ --pf-c-label-group__list-item--MarginRight: 0;
9910
+ --pf-c-label-group__label--MarginRight: 0;
9911
+ --pf-c-label-group__label--MarginBottom: var(--pf-c-label-group--m-vertical__label--MarginBottom);
9912
+ --pf-c-label-group__close--MarginTop: var(--pf-c-label-group--m-vertical__close--MarginTop);
9913
+ --pf-c-label-group__close--MarginLeft: var(--pf-c-label-group--m-vertical__close--MarginLeft);
9914
+ --pf-c-label-group__close--MarginBottom: 0;
9915
+ --pf-c-label-group__close--MarginRight: var(--pf-c-label-group--m-vertical__close--MarginRight);
9916
+ --pf-c-label-group--m-category--PaddingRight: var(--pf-c-label-group--m-vertical--m-category--PaddingRight);
9917
+ }
9918
+
9919
+ .pf-c-label-group.pf-m-vertical.pf-c-label-group {
9920
+ align-items: flex-start;
9921
+ }
9922
+
9923
+ .pf-c-label-group.pf-m-vertical .pf-c-label-group__list {
9671
9924
  flex-direction: column;
9925
+ align-items: flex-start;
9672
9926
  }
9673
9927
 
9674
- .pf-c-jump-links__toggle {
9675
- display: var(--pf-c-jump-links__toggle--Display);
9676
- margin-top: var(--pf-c-jump-links__toggle--MarginTop);
9677
- margin-bottom: var(--pf-c-jump-links__toggle--MarginBottom);
9678
- margin-left: var(--pf-c-jump-links__toggle--MarginLeft);
9679
- visibility: var(--pf-c-jump-links__toggle--Visibility);
9928
+ .pf-c-label-group.pf-m-vertical .pf-c-label-group__main {
9929
+ flex-direction: column;
9680
9930
  }
9681
9931
 
9682
- .pf-c-jump-links__toggle .pf-c-button {
9932
+ .pf-c-label-group.pf-m-vertical .pf-c-label-group__list-item:last-child {
9933
+ --pf-c-label-group__list-item--MarginBottom: 0;
9934
+ }
9935
+
9936
+ .pf-c-label-group.pf-m-vertical .pf-c-label-group__close .pf-c-button {
9937
+ --pf-c-button--PaddingLeft: var(--pf-c-label-group--m-vertical__close--c-button--PaddingLeft);
9938
+ --pf-c-button--PaddingRight: var(--pf-c-label-group--m-vertical__close--c-button--PaddingRight);
9939
+ }
9940
+
9941
+ .pf-c-label-group.pf-m-editable,
9942
+ .pf-c-label-group.pf-m-editable .pf-c-label-group__main,
9943
+ .pf-c-label-group.pf-m-editable .pf-c-label-group__list {
9683
9944
  display: flex;
9684
- align-items: center;
9685
9945
  }
9686
9946
 
9687
- .pf-c-jump-links__toggle-icon {
9688
- display: inline-block;
9689
- color: var(--pf-c-jump-links__toggle-icon--Color);
9690
- transition: var(--pf-c-jump-links__toggle-icon--Transition);
9691
- transform: rotate(var(--pf-c-jump-links__toggle-icon--Rotate));
9947
+ .pf-c-label-group.pf-m-editable .pf-c-label-group__main,
9948
+ .pf-c-label-group.pf-m-editable .pf-c-label-group__list,
9949
+ .pf-c-label-group.pf-m-editable .pf-c-label-group__list-item.pf-m-textarea,
9950
+ .pf-c-label-group.pf-m-editable .pf-c-label-group__textarea {
9951
+ flex: 1;
9692
9952
  }
9693
9953
 
9694
- .pf-c-jump-links__toggle-text {
9695
- margin-left: var(--pf-c-jump-links__toggle-text--MarginLeft);
9696
- color: var(--pf-c-jump-links__toggle-text--Color);
9954
+ .pf-c-label-group__main {
9955
+ display: flex;
9956
+ flex: 1;
9957
+ flex-wrap: wrap;
9958
+ align-items: baseline;
9697
9959
  }
9698
9960
 
9699
- .pf-c-sidebar {
9700
- --pf-c-sidebar--BackgroundColor: var(--pf-global--BackgroundColor--100);
9701
- --pf-c-sidebar__main--FlexDirection: column;
9702
- --pf-c-sidebar__main--md--FlexDirection: row;
9703
- --pf-c-sidebar__main--AlignItems: stretch;
9704
- --pf-c-sidebar__main--md--AlignItems: start;
9705
- --pf-c-sidebar__main--child--MarginTop: 0;
9706
- --pf-c-sidebar__main--child--MarginLeft: 0;
9707
- --pf-c-sidebar--m-gutter__main--Gap: var(--pf-global--spacer--md);
9708
- --pf-c-sidebar--m-gutter__main--xl--Gap: var(--pf-global--spacer--lg);
9709
- --pf-c-sidebar--m-panel-right__panel--Order: 0;
9710
- --pf-c-sidebar--m-panel-right__panel--md--Order: 1;
9711
- --pf-c-sidebar--m-stack__main--FlexDirection: column;
9712
- --pf-c-sidebar--m-stack__main--AlignItems: stretch;
9713
- --pf-c-sidebar--m-stack__panel--Position: sticky;
9714
- --pf-c-sidebar--m-stack__panel--Top: 0;
9715
- --pf-c-sidebar--m-stack__panel--BoxShadow: var(--pf-c-sidebar__panel--BoxShadow--base);
9716
- --pf-c-sidebar--m-stack--m-panel-right__panel--Order: 0;
9717
- --pf-c-sidebar--m-split__main--AlignItems: start;
9718
- --pf-c-sidebar--m-split__main--FlexDirection: row;
9719
- --pf-c-sidebar--m-split__panel--Position: static;
9720
- --pf-c-sidebar--m-split__panel--Top: auto;
9721
- --pf-c-sidebar--m-split--m-panel-right__panel--Order: 1;
9722
- --pf-c-sidebar__panel--FlexBasis--base: auto;
9723
- --pf-c-sidebar__panel--BoxShadow--base: 0 0.25rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
9724
- --pf-c-sidebar__panel--BoxShadow: var(--pf-c-sidebar__panel--BoxShadow--base);
9725
- --pf-c-sidebar__panel--Top: 0;
9726
- --pf-c-sidebar__panel--md--Top: auto;
9727
- --pf-c-sidebar__panel--Position: sticky;
9728
- --pf-c-sidebar__panel--md--Position: static;
9729
- --pf-c-sidebar__panel--FlexBasis-base: auto;
9730
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis-base);
9731
- --pf-c-sidebar__panel--md--FlexBasis: 15.625rem;
9732
- --pf-c-sidebar__panel--m-split--FlexBasis: 15.625rem;
9733
- --pf-c-sidebar__panel--m-stack--FlexBasis: auto;
9734
- --pf-c-sidebar__panel--ZIndex: var(--pf-global--ZIndex--xs);
9735
- --pf-c-sidebar__panel--Order: 0;
9736
- --pf-c-sidebar__panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
9737
- --pf-c-sidebar__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
9738
- --pf-c-sidebar__panel--m-sticky--Top: 0;
9739
- --pf-c-sidebar__panel--m-sticky--Position: sticky;
9740
- height: 100%;
9961
+ .pf-c-label-group__list {
9962
+ display: inline-flex;
9963
+ flex-wrap: wrap;
9964
+ margin-right: var(--pf-c-label-group__list--MarginRight);
9965
+ margin-bottom: var(--pf-c-label-group__list--MarginBottom);
9741
9966
  }
9742
9967
 
9743
- @media (min-width: 768px) {
9744
- .pf-c-sidebar {
9745
- --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar__main--md--FlexDirection);
9746
- --pf-c-sidebar__panel--BoxShadow: none;
9747
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--md--FlexBasis);
9748
- --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar__main--md--AlignItems);
9749
- --pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--md--Top);
9750
- --pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--md--Position);
9751
- }
9752
- }
9753
- @media (min-width: 1200px) {
9754
- .pf-c-sidebar {
9755
- --pf-c-sidebar--m-gutter__main--Gap: var(--pf-c-sidebar--m-gutter__main--xl--Gap);
9756
- }
9757
- }
9758
- .pf-c-sidebar.pf-m-gutter {
9759
- --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
9760
- --pf-c-sidebar__main--child--MarginLeft: 0;
9968
+ .pf-c-label-group__list-item {
9969
+ display: inline-flex;
9970
+ margin-right: var(--pf-c-label-group__list-item--MarginRight);
9971
+ margin-bottom: var(--pf-c-label-group__list-item--MarginBottom);
9761
9972
  }
9762
9973
 
9763
- .pf-c-sidebar.pf-m-gutter > .pf-c-sidebar__main > * + * {
9764
- margin-top: var(--pf-c-sidebar__main--child--MarginTop);
9765
- margin-left: var(--pf-c-sidebar__main--child--MarginLeft);
9974
+ .pf-c-label-group__label {
9975
+ overflow: hidden;
9976
+ text-overflow: ellipsis;
9977
+ white-space: nowrap;
9978
+ max-width: var(--pf-c-label-group__label--MaxWidth);
9979
+ margin-right: var(--pf-c-label-group__label--MarginRight);
9980
+ margin-bottom: var(--pf-c-label-group__label--MarginBottom);
9981
+ font-size: var(--pf-c-label-group__label--FontSize);
9766
9982
  }
9767
9983
 
9768
- @media (min-width: 768px) {
9769
- .pf-c-sidebar.pf-m-gutter {
9770
- --pf-c-sidebar__main--child--MarginTop: 0;
9771
- --pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
9772
- }
9773
- }
9774
- .pf-c-sidebar.pf-m-panel-right {
9775
- --pf-c-sidebar__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--Order);
9984
+ .pf-c-label-group__close {
9985
+ margin-top: var(--pf-c-label-group__close--MarginTop);
9986
+ margin-right: var(--pf-c-label-group__close--MarginRight);
9987
+ margin-bottom: var(--pf-c-label-group__close--MarginBottom);
9988
+ margin-left: var(--pf-c-label-group__close--MarginLeft);
9776
9989
  }
9777
9990
 
9778
- @media (min-width: 768px) {
9779
- .pf-c-sidebar.pf-m-panel-right {
9780
- --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--md--Order);
9781
- }
9782
- }
9783
- .pf-c-sidebar.pf-m-stack {
9784
- --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-stack__main--FlexDirection);
9785
- --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-stack__main--AlignItems);
9786
- --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
9787
- --pf-c-sidebar__main--child--MarginLeft: 0;
9788
- --pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-stack__panel--Position);
9789
- --pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-stack__panel--Top);
9790
- --pf-c-sidebar__panel--BoxShadow: var(--pf-c-sidebar--m-stack__panel--BoxShadow);
9791
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-stack--FlexBasis);
9792
- --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-stack--m-panel-right__panel--Order);
9991
+ .pf-c-label-group__textarea {
9992
+ min-width: var(--pf-c-label-group__textarea--MinWidth);
9993
+ 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);
9994
+ white-space: nowrap;
9995
+ resize: none;
9996
+ border: 0;
9997
+ -ms-overflow-style: none;
9998
+ scrollbar-width: none;
9793
9999
  }
9794
10000
 
9795
- .pf-c-sidebar.pf-m-split {
9796
- --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-split__main--FlexDirection);
9797
- --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-split__main--AlignItems);
9798
- --pf-c-sidebar__main--child--MarginTop: 0;
9799
- --pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
9800
- --pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-split__panel--Position);
9801
- --pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-split__panel--Top);
9802
- --pf-c-sidebar__panel--BoxShadow: none;
9803
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-split--FlexBasis);
9804
- --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-split--m-panel-right__panel--Order);
10001
+ .pf-c-label-group__textarea::-webkit-scrollbar {
10002
+ display: none;
9805
10003
  }
9806
10004
 
9807
- .pf-c-sidebar__main {
10005
+ .pf-c-jump-links {
10006
+ --pf-c-jump-links__list--Display: flex;
10007
+ --pf-c-jump-links__list--Visibility: visible;
10008
+ --pf-c-jump-links__list--PaddingTop: 0;
10009
+ --pf-c-jump-links__list--PaddingRight: var(--pf-global--spacer--md);
10010
+ --pf-c-jump-links__list--PaddingBottom: 0;
10011
+ --pf-c-jump-links__list--PaddingLeft: var(--pf-global--spacer--md);
10012
+ --pf-c-jump-links--m-vertical__list--PaddingTop: var(--pf-global--spacer--md);
10013
+ --pf-c-jump-links--m-vertical__list--PaddingRight: 0;
10014
+ --pf-c-jump-links--m-vertical__list--PaddingBottom: var(--pf-global--spacer--md);
10015
+ --pf-c-jump-links--m-vertical__list--PaddingLeft: 0;
10016
+ --pf-c-jump-links__list--FlexDirection: row;
10017
+ --pf-c-jump-links--m-vertical__list--FlexDirection: column;
10018
+ --pf-c-jump-links__list--before--BorderColor: var(--pf-global--BorderColor--100);
10019
+ --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-global--BorderWidth--sm);
10020
+ --pf-c-jump-links__list--before--BorderRightWidth: 0;
10021
+ --pf-c-jump-links__list--before--BorderBottomWidth: 0;
10022
+ --pf-c-jump-links__list--before--BorderLeftWidth: 0;
10023
+ --pf-c-jump-links--m-vertical__list--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
10024
+ --pf-c-jump-links--m-vertical__list--before--BorderTopWidth: 0;
10025
+ --pf-c-jump-links__list__list--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
10026
+ --pf-c-jump-links__link--PaddingTop: var(--pf-global--spacer--md);
10027
+ --pf-c-jump-links__link--PaddingRight: var(--pf-global--spacer--md);
10028
+ --pf-c-jump-links__link--PaddingBottom: var(--pf-global--spacer--md);
10029
+ --pf-c-jump-links__link--PaddingLeft: var(--pf-global--spacer--md);
10030
+ --pf-c-jump-links__list__list__link--PaddingTop: var(--pf-global--spacer--sm);
10031
+ --pf-c-jump-links__list__list__link--PaddingLeft: var(--pf-global--spacer--lg);
10032
+ --pf-c-jump-links__list__list__link--PaddingBottom: var(--pf-global--spacer--sm);
10033
+ --pf-c-jump-links__link--OutlineOffset: calc(-1 * var(--pf-global--spacer--sm));
10034
+ --pf-c-jump-links__link--before--BorderTopWidth: 0;
10035
+ --pf-c-jump-links__link--before--BorderRightWidth: 0;
10036
+ --pf-c-jump-links__link--before--BorderBottomWidth: 0;
10037
+ --pf-c-jump-links__link--before--BorderLeftWidth: 0;
10038
+ --pf-c-jump-links__link--before--BorderColor: transparent;
10039
+ --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-global--BorderWidth--lg);
10040
+ --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: 0;
10041
+ --pf-c-jump-links__item--m-current__link--before--BorderColor: var(--pf-global--primary-color--100);
10042
+ --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth: 0;
10043
+ --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth: var(--pf-global--BorderWidth--lg);
10044
+ --pf-c-jump-links__link-text--Color: var(--pf-global--Color--200);
10045
+ --pf-c-jump-links__link--hover__link-text--Color: var(--pf-global--Color--100);
10046
+ --pf-c-jump-links__link--focus__link-text--Color: var(--pf-global--Color--100);
10047
+ --pf-c-jump-links__item--m-current__link-text--Color: var(--pf-global--Color--100);
10048
+ --pf-c-jump-links__label--MarginBottom: var(--pf-global--spacer--md);
10049
+ --pf-c-jump-links__label--Display: block;
10050
+ --pf-c-jump-links__label--Visibility: visible;
10051
+ --pf-c-jump-links__toggle--MarginTop: calc(-1 * var(--pf-global--spacer--form-element));
10052
+ --pf-c-jump-links__toggle--MarginBottom--base: calc(-1 * var(--pf-global--spacer--form-element));
10053
+ --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links__toggle--MarginBottom--base);
10054
+ --pf-c-jump-links--m-expanded__toggle--MarginBottom: calc(var(--pf-c-jump-links__toggle--MarginBottom--base) + var(--pf-global--spacer--md));
10055
+ --pf-c-jump-links__toggle--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
10056
+ --pf-c-jump-links__toggle--Display: none;
10057
+ --pf-c-jump-links__toggle--Visibility: hidden;
10058
+ --pf-c-jump-links__toggle-icon--Color: currentColor;
10059
+ --pf-c-jump-links__toggle-icon--Transition: var(--pf-global--Transition);
10060
+ --pf-c-jump-links__toggle-icon--Rotate: 0;
10061
+ --pf-c-jump-links--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
10062
+ --pf-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
10063
+ --pf-c-jump-links__toggle-text--MarginLeft: var(--pf-global--spacer--md);
10064
+ --pf-c-jump-links__toggle-text--Color: var(--pf-global--Color--100);
9808
10065
  display: flex;
9809
- flex-direction: var(--pf-c-sidebar__main--FlexDirection);
9810
- align-items: var(--pf-c-sidebar__main--AlignItems);
9811
- }
9812
-
9813
- .pf-c-sidebar__panel {
9814
- position: var(--pf-c-sidebar__panel--Position);
9815
- top: var(--pf-c-sidebar__panel--Top);
9816
- z-index: var(--pf-c-sidebar__panel--ZIndex);
9817
- flex-shrink: 0;
9818
- flex-basis: var(--pf-c-sidebar__panel--FlexBasis);
9819
- order: var(--pf-c-sidebar__panel--Order);
9820
- background-color: var(--pf-c-sidebar__panel--BackgroundColor);
9821
- box-shadow: var(--pf-c-sidebar__panel--BoxShadow);
9822
10066
  }
9823
10067
 
9824
- .pf-c-sidebar__panel.pf-m-sticky {
9825
- --pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--m-sticky--Position);
9826
- --pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--m-sticky--Top);
10068
+ .pf-c-jump-links.pf-m-center {
10069
+ justify-content: center;
9827
10070
  }
9828
10071
 
9829
- .pf-c-sidebar__panel.pf-m-static {
9830
- --pf-c-sidebar__panel--Position: static;
9831
- --pf-c-sidebar__panel--Top: auto;
10072
+ .pf-c-jump-links.pf-m-center .pf-c-jump-links__main {
10073
+ align-items: center;
9832
10074
  }
9833
10075
 
9834
- .pf-c-sidebar__content {
9835
- flex-grow: 1;
9836
- background-color: var(--pf-c-sidebar__content--BackgroundColor);
10076
+ .pf-c-jump-links.pf-m-vertical, .pf-c-jump-links.pf-m-expandable {
10077
+ --pf-c-jump-links__list--PaddingTop: var(--pf-c-jump-links--m-vertical__list--PaddingTop);
10078
+ --pf-c-jump-links__list--PaddingRight: var(--pf-c-jump-links--m-vertical__list--PaddingRight);
10079
+ --pf-c-jump-links__list--PaddingBottom: var(--pf-c-jump-links--m-vertical__list--PaddingBottom);
10080
+ --pf-c-jump-links__list--PaddingLeft: var(--pf-c-jump-links--m-vertical__list--PaddingLeft);
10081
+ --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderTopWidth);
10082
+ --pf-c-jump-links__list--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderLeftWidth);
10083
+ --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth);
10084
+ --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth);
10085
+ --pf-c-jump-links__list--FlexDirection: var(--pf-c-jump-links--m-vertical__list--FlexDirection);
10086
+ flex-direction: column;
9837
10087
  }
9838
10088
 
9839
- .pf-c-sidebar__content.pf-m-no-background {
9840
- --pf-c-sidebar__content--BackgroundColor: transparent;
10089
+ .pf-c-jump-links.pf-m-expandable {
10090
+ --pf-c-jump-links__list--Display: none;
10091
+ --pf-c-jump-links__list--Visibility: hidden;
10092
+ --pf-c-jump-links__toggle--Display: block;
10093
+ --pf-c-jump-links__toggle--Visibility: visible;
10094
+ --pf-c-jump-links__label--Display: none;
10095
+ --pf-c-jump-links__label--Visibility: hidden;
9841
10096
  }
9842
10097
 
9843
- .pf-c-sidebar.pf-m-no-background,
9844
- .pf-c-sidebar__panel.pf-m-no-background,
9845
- .pf-c-sidebar__content.pf-m-no-background {
9846
- background-color: transparent;
10098
+ .pf-c-jump-links.pf-m-non-expandable {
10099
+ --pf-c-jump-links__list--Display: flex;
10100
+ --pf-c-jump-links__list--Visibility: visible;
10101
+ --pf-c-jump-links__toggle--Display: none;
10102
+ --pf-c-jump-links__toggle--Visibility: hidden;
10103
+ --pf-c-jump-links__label--Display: block;
10104
+ --pf-c-jump-links__label--Visibility: visible;
9847
10105
  }
9848
10106
 
9849
- .pf-c-sidebar__panel.pf-m-width-default {
9850
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9851
- }
10107
+ @media (min-width: 576px) {
10108
+ .pf-c-jump-links.pf-m-expandable-on-sm {
10109
+ --pf-c-jump-links__list--Display: none;
10110
+ --pf-c-jump-links__list--Visibility: hidden;
10111
+ --pf-c-jump-links__toggle--Display: block;
10112
+ --pf-c-jump-links__toggle--Visibility: visible;
10113
+ --pf-c-jump-links__label--Display: none;
10114
+ --pf-c-jump-links__label--Visibility: hidden;
10115
+ }
9852
10116
 
9853
- .pf-c-sidebar__panel.pf-m-width-25 {
9854
- --pf-c-sidebar__panel--FlexBasis: 25%;
9855
- }
9856
-
9857
- .pf-c-sidebar__panel.pf-m-width-33 {
9858
- --pf-c-sidebar__panel--FlexBasis: 33%;
9859
- }
9860
-
9861
- .pf-c-sidebar__panel.pf-m-width-50 {
9862
- --pf-c-sidebar__panel--FlexBasis: 50%;
9863
- }
9864
-
9865
- .pf-c-sidebar__panel.pf-m-width-66 {
9866
- --pf-c-sidebar__panel--FlexBasis: 66%;
9867
- }
9868
-
9869
- .pf-c-sidebar__panel.pf-m-width-75 {
9870
- --pf-c-sidebar__panel--FlexBasis: 75%;
9871
- }
9872
-
9873
- .pf-c-sidebar__panel.pf-m-width-100 {
9874
- --pf-c-sidebar__panel--FlexBasis: 100%;
9875
- }
9876
-
9877
- @media (min-width: 576px) {
9878
- .pf-c-sidebar__panel.pf-m-width-default-on-sm {
9879
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9880
- }
9881
-
9882
- .pf-c-sidebar__panel.pf-m-width-25-on-sm {
9883
- --pf-c-sidebar__panel--FlexBasis: 25%;
9884
- }
9885
-
9886
- .pf-c-sidebar__panel.pf-m-width-33-on-sm {
9887
- --pf-c-sidebar__panel--FlexBasis: 33%;
9888
- }
9889
-
9890
- .pf-c-sidebar__panel.pf-m-width-50-on-sm {
9891
- --pf-c-sidebar__panel--FlexBasis: 50%;
9892
- }
9893
-
9894
- .pf-c-sidebar__panel.pf-m-width-66-on-sm {
9895
- --pf-c-sidebar__panel--FlexBasis: 66%;
9896
- }
9897
-
9898
- .pf-c-sidebar__panel.pf-m-width-75-on-sm {
9899
- --pf-c-sidebar__panel--FlexBasis: 75%;
9900
- }
9901
-
9902
- .pf-c-sidebar__panel.pf-m-width-100-on-sm {
9903
- --pf-c-sidebar__panel--FlexBasis: 100%;
10117
+ .pf-c-jump-links.pf-m-non-expandable-on-sm {
10118
+ --pf-c-jump-links__list--Display: flex;
10119
+ --pf-c-jump-links__list--Visibility: visible;
10120
+ --pf-c-jump-links__toggle--Display: none;
10121
+ --pf-c-jump-links__toggle--Visibility: hidden;
10122
+ --pf-c-jump-links__label--Display: block;
10123
+ --pf-c-jump-links__label--Visibility: visible;
9904
10124
  }
9905
10125
  }
9906
10126
  @media (min-width: 768px) {
9907
- .pf-c-sidebar__panel.pf-m-width-default-on-md {
9908
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9909
- }
9910
-
9911
- .pf-c-sidebar__panel.pf-m-width-25-on-md {
9912
- --pf-c-sidebar__panel--FlexBasis: 25%;
9913
- }
9914
-
9915
- .pf-c-sidebar__panel.pf-m-width-33-on-md {
9916
- --pf-c-sidebar__panel--FlexBasis: 33%;
9917
- }
9918
-
9919
- .pf-c-sidebar__panel.pf-m-width-50-on-md {
9920
- --pf-c-sidebar__panel--FlexBasis: 50%;
9921
- }
9922
-
9923
- .pf-c-sidebar__panel.pf-m-width-66-on-md {
9924
- --pf-c-sidebar__panel--FlexBasis: 66%;
9925
- }
9926
-
9927
- .pf-c-sidebar__panel.pf-m-width-75-on-md {
9928
- --pf-c-sidebar__panel--FlexBasis: 75%;
9929
- }
9930
-
9931
- .pf-c-sidebar__panel.pf-m-width-100-on-md {
9932
- --pf-c-sidebar__panel--FlexBasis: 100%;
9933
- }
9934
- }
9935
- @media (min-width: 992px) {
9936
- .pf-c-sidebar__panel.pf-m-width-default-on-lg {
9937
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9938
- }
9939
-
9940
- .pf-c-sidebar__panel.pf-m-width-25-on-lg {
9941
- --pf-c-sidebar__panel--FlexBasis: 25%;
9942
- }
9943
-
9944
- .pf-c-sidebar__panel.pf-m-width-33-on-lg {
9945
- --pf-c-sidebar__panel--FlexBasis: 33%;
9946
- }
9947
-
9948
- .pf-c-sidebar__panel.pf-m-width-50-on-lg {
9949
- --pf-c-sidebar__panel--FlexBasis: 50%;
9950
- }
9951
-
9952
- .pf-c-sidebar__panel.pf-m-width-66-on-lg {
9953
- --pf-c-sidebar__panel--FlexBasis: 66%;
9954
- }
9955
-
9956
- .pf-c-sidebar__panel.pf-m-width-75-on-lg {
9957
- --pf-c-sidebar__panel--FlexBasis: 75%;
9958
- }
9959
-
9960
- .pf-c-sidebar__panel.pf-m-width-100-on-lg {
9961
- --pf-c-sidebar__panel--FlexBasis: 100%;
9962
- }
9963
- }
9964
- @media (min-width: 1200px) {
9965
- .pf-c-sidebar__panel.pf-m-width-default-on-xl {
9966
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9967
- }
9968
-
9969
- .pf-c-sidebar__panel.pf-m-width-25-on-xl {
9970
- --pf-c-sidebar__panel--FlexBasis: 25%;
9971
- }
9972
-
9973
- .pf-c-sidebar__panel.pf-m-width-33-on-xl {
9974
- --pf-c-sidebar__panel--FlexBasis: 33%;
9975
- }
9976
-
9977
- .pf-c-sidebar__panel.pf-m-width-50-on-xl {
9978
- --pf-c-sidebar__panel--FlexBasis: 50%;
9979
- }
9980
-
9981
- .pf-c-sidebar__panel.pf-m-width-66-on-xl {
9982
- --pf-c-sidebar__panel--FlexBasis: 66%;
9983
- }
9984
-
9985
- .pf-c-sidebar__panel.pf-m-width-75-on-xl {
9986
- --pf-c-sidebar__panel--FlexBasis: 75%;
9987
- }
9988
-
9989
- .pf-c-sidebar__panel.pf-m-width-100-on-xl {
9990
- --pf-c-sidebar__panel--FlexBasis: 100%;
9991
- }
9992
- }
9993
- @media (min-width: 1450px) {
9994
- .pf-c-sidebar__panel.pf-m-width-default-on-2xl {
9995
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9996
- }
9997
-
9998
- .pf-c-sidebar__panel.pf-m-width-25-on-2xl {
9999
- --pf-c-sidebar__panel--FlexBasis: 25%;
10000
- }
10001
-
10002
- .pf-c-sidebar__panel.pf-m-width-33-on-2xl {
10003
- --pf-c-sidebar__panel--FlexBasis: 33%;
10004
- }
10005
-
10006
- .pf-c-sidebar__panel.pf-m-width-50-on-2xl {
10007
- --pf-c-sidebar__panel--FlexBasis: 50%;
10008
- }
10009
-
10010
- .pf-c-sidebar__panel.pf-m-width-66-on-2xl {
10011
- --pf-c-sidebar__panel--FlexBasis: 66%;
10012
- }
10013
-
10014
- .pf-c-sidebar__panel.pf-m-width-75-on-2xl {
10015
- --pf-c-sidebar__panel--FlexBasis: 75%;
10016
- }
10017
-
10018
- .pf-c-sidebar__panel.pf-m-width-100-on-2xl {
10019
- --pf-c-sidebar__panel--FlexBasis: 100%;
10127
+ .pf-c-jump-links.pf-m-expandable-on-md {
10128
+ --pf-c-jump-links__list--Display: none;
10129
+ --pf-c-jump-links__list--Visibility: hidden;
10130
+ --pf-c-jump-links__toggle--Display: block;
10131
+ --pf-c-jump-links__toggle--Visibility: visible;
10132
+ --pf-c-jump-links__label--Display: none;
10133
+ --pf-c-jump-links__label--Visibility: hidden;
10020
10134
  }
10021
- }
10022
- .pf-c-label {
10023
- --pf-c-label--PaddingTop: var(--pf-global--spacer--xs);
10024
- --pf-c-label--PaddingRight: var(--pf-global--spacer--sm);
10025
- --pf-c-label--PaddingBottom: var(--pf-global--spacer--xs);
10026
- --pf-c-label--PaddingLeft: var(--pf-global--spacer--sm);
10027
- --pf-c-label--BorderRadius: var(--pf-global--BorderRadius--lg);
10028
- --pf-c-label--BackgroundColor: var(--pf-global--palette--black-150);
10029
- --pf-c-label--Color: var(--pf-global--Color--100);
10030
- --pf-c-label--FontSize: var(--pf-global--FontSize--sm);
10031
- --pf-c-label__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10032
- --pf-c-label__content--before--BorderColor: var(--pf-global--BorderColor--100);
10033
- --pf-c-label--m-outline--BackgroundColor: var(--pf-global--BackgroundColor--100);
10034
- --pf-c-label--m-outline__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10035
- --pf-c-label--m-outline__content--before--BorderColor: var(--pf-global--BorderColor--100);
10036
- --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
10037
- --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
10038
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--200);
10039
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--200);
10040
- --pf-c-label--m-outline__content--link--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
10041
- --pf-c-label--m-outline__content--link--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
10042
- --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10043
- --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10044
- --pf-c-label--m-blue--BackgroundColor: var(--pf-global--palette--blue-50);
10045
- --pf-c-label--m-blue__icon--Color: var(--pf-global--primary-color--100);
10046
- --pf-c-label--m-blue__content--Color: var(--pf-global--info-color--200);
10047
- --pf-c-label--m-blue__content--before--BorderColor: var(--pf-global--palette--blue-100);
10048
- --pf-c-label--m-blue__content--link--hover--before--BorderColor: var(--pf-global--primary-color--100);
10049
- --pf-c-label--m-blue__content--link--focus--before--BorderColor: var(--pf-global--primary-color--100);
10050
- --pf-c-label--m-outline--m-blue__content--Color: var(--pf-global--primary-color--100);
10051
- --pf-c-label--m-outline--m-blue__content--before--BorderColor: var(--pf-global--BorderColor--100);
10052
- --pf-c-label--m-outline--m-blue__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10053
- --pf-c-label--m-outline--m-blue__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10054
- --pf-c-label--m-green--BackgroundColor: var(--pf-global--palette--green-50);
10055
- --pf-c-label--m-green__icon--Color: var(--pf-global--success-color--100);
10056
- --pf-c-label--m-green__content--Color: var(--pf-global--success-color--200);
10057
- --pf-c-label--m-green__content--before--BorderColor: var(--pf-global--palette--green-100);
10058
- --pf-c-label--m-green__content--link--hover--before--BorderColor: var(--pf-global--success-color--100);
10059
- --pf-c-label--m-green__content--link--focus--before--BorderColor: var(--pf-global--success-color--100);
10060
- --pf-c-label--m-outline--m-green__content--Color: var(--pf-global--success-color--100);
10061
- --pf-c-label--m-outline--m-green__content--before--BorderColor: var(--pf-global--BorderColor--100);
10062
- --pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10063
- --pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10064
- --pf-c-label--m-orange--BackgroundColor: var(--pf-global--palette--orange-50);
10065
- --pf-c-label--m-orange__icon--Color: var(--pf-global--palette--orange-300);
10066
- --pf-c-label--m-orange__content--Color: var(--pf-global--palette--orange-700);
10067
- --pf-c-label--m-orange__content--before--BorderColor: var(--pf-global--palette--orange-100);
10068
- --pf-c-label--m-orange__content--link--hover--before--BorderColor: var(--pf-global--palette--orange-300);
10069
- --pf-c-label--m-orange__content--link--focus--before--BorderColor: var(--pf-global--palette--orange-300);
10070
- --pf-c-label--m-outline--m-orange__content--Color: var(--pf-global--palette--orange-500);
10071
- --pf-c-label--m-outline--m-orange__content--before--BorderColor: var(--pf-global--BorderColor--100);
10072
- --pf-c-label--m-outline--m-orange__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10073
- --pf-c-label--m-outline--m-orange__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10074
- --pf-c-label--m-red--BackgroundColor: var(--pf-global--palette--red-50);
10075
- --pf-c-label--m-red__icon--Color: var(--pf-global--danger-color--100);
10076
- --pf-c-label--m-red__content--Color: var(--pf-global--palette--red-300);
10077
- --pf-c-label--m-red__content--before--BorderColor: var(--pf-global--palette--red-100);
10078
- --pf-c-label--m-red__content--link--hover--before--BorderColor: var(--pf-global--danger-color--100);
10079
- --pf-c-label--m-red__content--link--focus--before--BorderColor: var(--pf-global--danger-color--100);
10080
- --pf-c-label--m-outline--m-red__content--Color: var(--pf-global--danger-color--100);
10081
- --pf-c-label--m-outline--m-red__content--before--BorderColor: var(--pf-global--BorderColor--100);
10082
- --pf-c-label--m-outline--m-red__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10083
- --pf-c-label--m-outline--m-red__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10084
- --pf-c-label--m-purple--BackgroundColor: var(--pf-global--palette--purple-50);
10085
- --pf-c-label--m-purple__icon--Color: var(--pf-global--palette--purple-500);
10086
- --pf-c-label--m-purple__content--Color: var(--pf-global--palette--purple-700);
10087
- --pf-c-label--m-purple__content--before--BorderColor: var(--pf-global--palette--purple-100);
10088
- --pf-c-label--m-purple__content--link--hover--before--BorderColor: var(--pf-global--palette--purple-500);
10089
- --pf-c-label--m-purple__content--link--focus--before--BorderColor: var(--pf-global--palette--purple-500);
10090
- --pf-c-label--m-outline--m-purple__content--Color: var(--pf-global--palette--purple-500);
10091
- --pf-c-label--m-outline--m-purple__content--before--BorderColor: var(--pf-global--BorderColor--100);
10092
- --pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10093
- --pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10094
- --pf-c-label--m-cyan--BackgroundColor: var(--pf-global--palette--cyan-50);
10095
- --pf-c-label--m-cyan__icon--Color: var(--pf-global--default-color--200);
10096
- --pf-c-label--m-cyan__content--Color: var(--pf-global--default-color--300);
10097
- --pf-c-label--m-cyan__content--before--BorderColor: var(--pf-global--palette--cyan-100);
10098
- --pf-c-label--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--default-color--200);
10099
- --pf-c-label--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--default-color--200);
10100
- --pf-c-label--m-outline--m-cyan__content--Color: var(--pf-global--palette--cyan-400);
10101
- --pf-c-label--m-outline--m-cyan__content--before--BorderColor: var(--pf-global--BorderColor--100);
10102
- --pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10103
- --pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10104
- --pf-c-label--m-gold--BackgroundColor: var(--pf-global--palette--gold-50);
10105
- --pf-c-label--m-gold__icon--Color: var(--pf-global--palette--gold-400);
10106
- --pf-c-label--m-gold__content--Color: var(--pf-global--palette--gold-700);
10107
- --pf-c-label--m-gold__content--before--BorderColor: var(--pf-global--palette--gold-100);
10108
- --pf-c-label--m-gold__content--link--hover--before--BorderColor: var(--pf-global--palette--gold-300);
10109
- --pf-c-label--m-gold__content--link--focus--before--BorderColor: var(--pf-global--palette--gold-300);
10110
- --pf-c-label--m-outline--m-gold__content--Color: var(--pf-global--palette--gold-600);
10111
- --pf-c-label--m-outline--m-gold__content--before--BorderColor: var(--pf-global--BorderColor--100);
10112
- --pf-c-label--m-outline--m-gold__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10113
- --pf-c-label--m-outline--m-gold__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10114
- --pf-c-label--m-overflow__content--Color: var(--pf-global--link--Color);
10115
- --pf-c-label--m-overflow__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
10116
- --pf-c-label--m-overflow__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10117
- --pf-c-label--m-overflow__content--before--BorderColor: var(--pf-global--BorderColor--300);
10118
- --pf-c-label--m-overflow__content--link--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
10119
- --pf-c-label--m-overflow__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--300);
10120
- --pf-c-label--m-overflow__content--link--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
10121
- --pf-c-label--m-overflow__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--300);
10122
- --pf-c-label--m-compact--PaddingTop: 0;
10123
- --pf-c-label--m-compact--PaddingRight: var(--pf-global--spacer--sm);
10124
- --pf-c-label--m-compact--PaddingBottom: 0;
10125
- --pf-c-label--m-compact--PaddingLeft: var(--pf-global--spacer--sm);
10126
- --pf-c-label--m-compact--FontSize: var(--pf-global--FontSize--xs);
10127
- --pf-c-label--m-compact--m-editable--TextDecorationOffset: 0.0625rem;
10128
- --pf-c-label__content--Color: var(--pf-global--Color--100);
10129
- --pf-c-label__content--MaxWidth: 100%;
10130
- --pf-c-label--m-outline__content--Color: var(--pf-global--Color--100);
10131
- --pf-c-label--m-editable__content--MaxWidth: 16ch;
10132
- --pf-c-label__text--MaxWidth: 16ch;
10133
- --pf-c-label__icon--Color: var(--pf-global--Color--100);
10134
- --pf-c-label__icon--MarginRight: var(--pf-global--spacer--xs);
10135
- --pf-c-label__c-button--FontSize: var(--pf-global--FontSize--xs);
10136
- --pf-c-label__c-button--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
10137
- --pf-c-label__c-button--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
10138
- --pf-c-label__c-button--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
10139
- --pf-c-label__c-button--MarginLeft: var(--pf-global--spacer--xs);
10140
- --pf-c-label__c-button--PaddingTop: var(--pf-global--spacer--xs);
10141
- --pf-c-label__c-button--PaddingRight: var(--pf-global--spacer--sm);
10142
- --pf-c-label__c-button--PaddingBottom: var(--pf-global--spacer--xs);
10143
- --pf-c-label__c-button--PaddingLeft: var(--pf-global--spacer--sm);
10144
- --pf-c-label--m-editable--Cursor: pointer;
10145
- --pf-c-label--m-editable--TextDecoration: underline;
10146
- --pf-c-label--m-editable--TextDecorationStyle: dashed;
10147
- --pf-c-label--m-editable--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
10148
- --pf-c-label--m-editable--TextDecorationOffset: 0.25rem;
10149
- --pf-c-label--m-editable--TextDecorationColor: var(--pf-global--BorderColor--200);
10150
- --pf-c-label--m-editable--hover--TextDecorationColor: var(--pf-global--Color--100);
10151
- --pf-c-label--m-editable--focus--TextDecorationColor: var(--pf-global--Color--100);
10152
- --pf-c-label--m-editable__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10153
- --pf-c-label--m-editable__content--before--BorderColor: var(--pf-global--BorderColor--100);
10154
- --pf-c-label--m-editable__content--hover--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10155
- --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10156
- --pf-c-label--m-editable__content--focus--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10157
- --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10158
- --pf-c-label--m-editable--m-editable-active--Cursor: auto;
10159
- --pf-c-label--m-editable--m-editable-active--TextDecoration: none;
10160
- --pf-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
10161
- --pf-c-label--m-editable--m-editable-active__content--before--BorderWidth: 0;
10162
- --pf-c-label--m-editable--m-editable-active__content--before--BorderColor: transparent;
10163
- position: relative;
10164
- padding: var(--pf-c-label--PaddingTop) var(--pf-c-label--PaddingRight) var(--pf-c-label--PaddingBottom) var(--pf-c-label--PaddingLeft);
10165
- font-size: var(--pf-c-label--FontSize);
10166
- color: var(--pf-c-label--Color);
10167
- white-space: nowrap;
10168
- background-color: var(--pf-c-label--BackgroundColor);
10169
- border: 0;
10170
- border-radius: var(--pf-c-label--BorderRadius);
10171
- }
10172
-
10173
- .pf-c-label.pf-m-compact {
10174
- --pf-c-label--PaddingTop: var(--pf-c-label--m-compact--PaddingTop);
10175
- --pf-c-label--PaddingRight: var(--pf-c-label--m-compact--PaddingRight);
10176
- --pf-c-label--PaddingBottom: var(--pf-c-label--m-compact--PaddingBottom);
10177
- --pf-c-label--PaddingLeft: var(--pf-c-label--m-compact--PaddingLeft);
10178
- --pf-c-label--FontSize: var(--pf-c-label--m-compact--FontSize);
10179
- --pf-c-label--m-editable--TextDecorationOffset: var(--pf-c-label--m-compact--m-editable--TextDecorationOffset);
10180
- }
10181
10135
 
10182
- .pf-c-label.pf-m-blue {
10183
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-blue--BackgroundColor);
10184
- --pf-c-label__icon--Color: var(--pf-c-label--m-blue__icon--Color);
10185
- --pf-c-label__content--Color: var(--pf-c-label--m-blue__content--Color);
10186
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
10187
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-blue__content--link--hover--before--BorderColor);
10188
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-blue__content--link--focus--before--BorderColor);
10189
- --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-blue__content--Color);
10190
- --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--before--BorderColor);
10191
- --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--link--hover--before--BorderColor);
10192
- --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--link--focus--before--BorderColor);
10193
- --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
10194
- --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
10195
- --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
10136
+ .pf-c-jump-links.pf-m-non-expandable-on-md {
10137
+ --pf-c-jump-links__list--Display: flex;
10138
+ --pf-c-jump-links__list--Visibility: visible;
10139
+ --pf-c-jump-links__toggle--Display: none;
10140
+ --pf-c-jump-links__toggle--Visibility: hidden;
10141
+ --pf-c-jump-links__label--Display: block;
10142
+ --pf-c-jump-links__label--Visibility: visible;
10143
+ }
10196
10144
  }
10145
+ @media (min-width: 992px) {
10146
+ .pf-c-jump-links.pf-m-expandable-on-lg {
10147
+ --pf-c-jump-links__list--Display: none;
10148
+ --pf-c-jump-links__list--Visibility: hidden;
10149
+ --pf-c-jump-links__toggle--Display: block;
10150
+ --pf-c-jump-links__toggle--Visibility: visible;
10151
+ --pf-c-jump-links__label--Display: none;
10152
+ --pf-c-jump-links__label--Visibility: hidden;
10153
+ }
10197
10154
 
10198
- .pf-c-label.pf-m-green {
10199
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-green--BackgroundColor);
10200
- --pf-c-label__icon--Color: var(--pf-c-label--m-green__icon--Color);
10201
- --pf-c-label__content--Color: var(--pf-c-label--m-green__content--Color);
10202
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
10203
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-green__content--link--hover--before--BorderColor);
10204
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-green__content--link--focus--before--BorderColor);
10205
- --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-green__content--Color);
10206
- --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--before--BorderColor);
10207
- --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor);
10208
- --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor);
10209
- --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
10210
- --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
10211
- --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
10155
+ .pf-c-jump-links.pf-m-non-expandable-on-lg {
10156
+ --pf-c-jump-links__list--Display: flex;
10157
+ --pf-c-jump-links__list--Visibility: visible;
10158
+ --pf-c-jump-links__toggle--Display: none;
10159
+ --pf-c-jump-links__toggle--Visibility: hidden;
10160
+ --pf-c-jump-links__label--Display: block;
10161
+ --pf-c-jump-links__label--Visibility: visible;
10162
+ }
10212
10163
  }
10164
+ @media (min-width: 1200px) {
10165
+ .pf-c-jump-links.pf-m-expandable-on-xl {
10166
+ --pf-c-jump-links__list--Display: none;
10167
+ --pf-c-jump-links__list--Visibility: hidden;
10168
+ --pf-c-jump-links__toggle--Display: block;
10169
+ --pf-c-jump-links__toggle--Visibility: visible;
10170
+ --pf-c-jump-links__label--Display: none;
10171
+ --pf-c-jump-links__label--Visibility: hidden;
10172
+ }
10213
10173
 
10214
- .pf-c-label.pf-m-orange {
10215
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-orange--BackgroundColor);
10216
- --pf-c-label__icon--Color: var(--pf-c-label--m-orange__icon--Color);
10217
- --pf-c-label__content--Color: var(--pf-c-label--m-orange__content--Color);
10218
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
10219
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-orange__content--link--hover--before--BorderColor);
10220
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-orange__content--link--focus--before--BorderColor);
10221
- --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-orange__content--Color);
10222
- --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--before--BorderColor);
10223
- --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--link--hover--before--BorderColor);
10224
- --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--link--focus--before--BorderColor);
10225
- --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
10226
- --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
10227
- --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
10174
+ .pf-c-jump-links.pf-m-non-expandable-on-xl {
10175
+ --pf-c-jump-links__list--Display: flex;
10176
+ --pf-c-jump-links__list--Visibility: visible;
10177
+ --pf-c-jump-links__toggle--Display: none;
10178
+ --pf-c-jump-links__toggle--Visibility: hidden;
10179
+ --pf-c-jump-links__label--Display: block;
10180
+ --pf-c-jump-links__label--Visibility: visible;
10181
+ }
10228
10182
  }
10183
+ @media (min-width: 1450px) {
10184
+ .pf-c-jump-links.pf-m-expandable-on-2xl {
10185
+ --pf-c-jump-links__list--Display: none;
10186
+ --pf-c-jump-links__list--Visibility: hidden;
10187
+ --pf-c-jump-links__toggle--Display: block;
10188
+ --pf-c-jump-links__toggle--Visibility: visible;
10189
+ --pf-c-jump-links__label--Display: none;
10190
+ --pf-c-jump-links__label--Visibility: hidden;
10191
+ }
10229
10192
 
10230
- .pf-c-label.pf-m-red {
10231
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-red--BackgroundColor);
10232
- --pf-c-label__icon--Color: var(--pf-c-label--m-red__icon--Color);
10233
- --pf-c-label__content--Color: var(--pf-c-label--m-red__content--Color);
10234
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
10235
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-red__content--link--hover--before--BorderColor);
10236
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-red__content--link--focus--before--BorderColor);
10237
- --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-red__content--Color);
10238
- --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--before--BorderColor);
10239
- --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--link--hover--before--BorderColor);
10240
- --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--link--focus--before--BorderColor);
10241
- --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
10242
- --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
10243
- --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
10193
+ .pf-c-jump-links.pf-m-non-expandable-on-2xl {
10194
+ --pf-c-jump-links__list--Display: flex;
10195
+ --pf-c-jump-links__list--Visibility: visible;
10196
+ --pf-c-jump-links__toggle--Display: none;
10197
+ --pf-c-jump-links__toggle--Visibility: hidden;
10198
+ --pf-c-jump-links__label--Display: block;
10199
+ --pf-c-jump-links__label--Visibility: visible;
10200
+ }
10201
+ }
10202
+ .pf-c-jump-links.pf-m-expanded {
10203
+ --pf-c-jump-links__list--Display: flex;
10204
+ --pf-c-jump-links__list--Visibility: visible;
10205
+ --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links--m-expanded__toggle--MarginBottom);
10206
+ --pf-c-jump-links__toggle-icon--Rotate: var(--pf-c-jump-links--m-expanded__toggle-icon--Rotate);
10207
+ --pf-c-jump-links__toggle-icon--Color: var(--pf-c-jump-links--m-expanded__toggle-icon--Color);
10244
10208
  }
10245
10209
 
10246
- .pf-c-label.pf-m-purple {
10247
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-purple--BackgroundColor);
10248
- --pf-c-label__icon--Color: var(--pf-c-label--m-purple__icon--Color);
10249
- --pf-c-label__content--Color: var(--pf-c-label--m-purple__content--Color);
10250
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
10251
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-purple__content--link--hover--before--BorderColor);
10252
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-purple__content--link--focus--before--BorderColor);
10253
- --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-purple__content--Color);
10254
- --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--before--BorderColor);
10255
- --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor);
10256
- --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor);
10257
- --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
10258
- --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
10259
- --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
10210
+ .pf-c-jump-links__list {
10211
+ position: relative;
10212
+ display: var(--pf-c-jump-links__list--Display);
10213
+ flex-direction: var(--pf-c-jump-links__list--FlexDirection);
10214
+ padding-top: var(--pf-c-jump-links__list--PaddingTop);
10215
+ padding-right: var(--pf-c-jump-links__list--PaddingRight);
10216
+ padding-bottom: var(--pf-c-jump-links__list--PaddingBottom);
10217
+ padding-left: var(--pf-c-jump-links__list--PaddingLeft);
10218
+ visibility: var(--pf-c-jump-links__list--Visibility);
10260
10219
  }
10261
10220
 
10262
- .pf-c-label.pf-m-cyan {
10263
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-cyan--BackgroundColor);
10264
- --pf-c-label__icon--Color: var(--pf-c-label--m-cyan__icon--Color);
10265
- --pf-c-label__content--Color: var(--pf-c-label--m-cyan__content--Color);
10266
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
10267
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-cyan__content--link--hover--before--BorderColor);
10268
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-cyan__content--link--focus--before--BorderColor);
10269
- --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-cyan__content--Color);
10270
- --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--before--BorderColor);
10271
- --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor);
10272
- --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor);
10273
- --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
10274
- --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
10275
- --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
10221
+ .pf-c-jump-links__list::before {
10222
+ position: absolute;
10223
+ top: 0;
10224
+ right: 0;
10225
+ bottom: 0;
10226
+ left: 0;
10227
+ pointer-events: none;
10228
+ content: "";
10229
+ border: solid var(--pf-c-jump-links__list--before--BorderColor);
10230
+ border-width: var(--pf-c-jump-links__list--before--BorderTopWidth) var(--pf-c-jump-links__list--before--BorderRightWidth) var(--pf-c-jump-links__list--before--BorderBottomWidth) var(--pf-c-jump-links__list--before--BorderLeftWidth);
10276
10231
  }
10277
10232
 
10278
- .pf-c-label.pf-m-gold {
10279
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-gold--BackgroundColor);
10280
- --pf-c-label__icon--Color: var(--pf-c-label--m-gold__icon--Color);
10281
- --pf-c-label__content--Color: var(--pf-c-label--m-gold__content--Color);
10282
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
10283
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-gold__content--link--hover--before--BorderColor);
10284
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-gold__content--link--focus--before--BorderColor);
10285
- --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-gold__content--Color);
10286
- --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--before--BorderColor);
10287
- --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--link--hover--before--BorderColor);
10288
- --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--link--focus--before--BorderColor);
10289
- --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
10290
- --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
10291
- --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
10233
+ .pf-c-jump-links__list .pf-c-jump-links__list {
10234
+ --pf-c-jump-links__list--PaddingTop: 0;
10235
+ --pf-c-jump-links__list--PaddingBottom: 0;
10236
+ --pf-c-jump-links__link--PaddingTop: var(--pf-c-jump-links__list__list__link--PaddingTop);
10237
+ --pf-c-jump-links__link--PaddingBottom: var(--pf-c-jump-links__list__list__link--PaddingBottom);
10238
+ --pf-c-jump-links__link--PaddingLeft: var(--pf-c-jump-links__list__list__link--PaddingLeft);
10239
+ margin-top: var(--pf-c-jump-links__list__list--MarginTop);
10292
10240
  }
10293
10241
 
10294
- .pf-c-label.pf-m-outline {
10295
- --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color);
10296
- --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--before--BorderWidth);
10297
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
10298
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-outline--BackgroundColor);
10299
- --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
10300
- --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
10301
- --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
10242
+ .pf-c-jump-links__link {
10243
+ position: relative;
10244
+ display: flex;
10245
+ flex: 1;
10246
+ padding-top: var(--pf-c-jump-links__link--PaddingTop);
10247
+ padding-right: var(--pf-c-jump-links__link--PaddingRight);
10248
+ padding-bottom: var(--pf-c-jump-links__link--PaddingBottom);
10249
+ padding-left: var(--pf-c-jump-links__link--PaddingLeft);
10250
+ text-decoration: none;
10251
+ outline-offset: var(--pf-c-jump-links__link--OutlineOffset);
10302
10252
  }
10303
10253
 
10304
- .pf-c-label.pf-m-overflow:hover,
10305
- .pf-c-label.pf-m-add:hover, .pf-c-label.pf-m-outline a.pf-c-label__content:hover,
10306
- .pf-c-label.pf-m-outline button.pf-c-label__content:hover {
10307
- --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--link--hover--before--BorderWidth);
10308
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--link--hover--before--BorderColor);
10254
+ .pf-c-jump-links__link:hover {
10255
+ --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--hover__link-text--Color);
10309
10256
  }
10310
10257
 
10311
- .pf-c-label.pf-m-overflow:focus,
10312
- .pf-c-label.pf-m-add:focus, .pf-c-label.pf-m-outline a.pf-c-label__content:focus,
10313
- .pf-c-label.pf-m-outline button.pf-c-label__content:focus {
10314
- --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--link--focus--before--BorderWidth);
10315
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--link--focus--before--BorderColor);
10258
+ .pf-c-jump-links__link:focus {
10259
+ --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--focus__link-text--Color);
10316
10260
  }
10317
10261
 
10318
- .pf-c-label.pf-m-editable {
10319
- text-decoration: var(--pf-c-label--m-editable--TextDecoration);
10320
- cursor: var(--pf-c-label--m-editable--Cursor);
10321
- text-decoration-style: var(--pf-c-label--m-editable--TextDecorationStyle);
10322
- text-decoration-thickness: var(--pf-c-label--m-editable--TextDecorationThickness);
10323
- text-underline-offset: var(--pf-c-label--m-editable--TextDecorationOffset);
10324
- text-decoration-color: var(--pf-c-label--m-editable--TextDecorationColor);
10325
- --pf-c-label__content--MaxWidth: var(--pf-c-label--m-editable__content--MaxWidth);
10326
- --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
10327
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-editable__content--before--BorderColor);
10328
- --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-c-label--m-editable__content--hover--before--BorderWidth);
10329
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-editable__content--hover--before--BorderColor);
10330
- --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-c-label--m-editable__content--focus--before--BorderWidth);
10331
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-editable__content--focus--before--BorderColor);
10332
- --pf-c-label--m-outline__content--link--hover--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
10333
- --pf-c-label--m-outline__content--link--focus--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
10262
+ .pf-c-jump-links__link::before {
10263
+ position: absolute;
10264
+ top: 0;
10265
+ right: 0;
10266
+ bottom: 0;
10267
+ left: 0;
10268
+ pointer-events: none;
10269
+ content: "";
10270
+ border-color: var(--pf-c-jump-links__link--before--BorderColor);
10271
+ border-style: solid;
10272
+ border-width: var(--pf-c-jump-links__link--before--BorderTopWidth) var(--pf-c-jump-links__link--before--BorderRightWidth) var(--pf-c-jump-links__link--before--BorderBottomWidth) var(--pf-c-jump-links__link--before--BorderLeftWidth);
10334
10273
  }
10335
10274
 
10336
- .pf-c-label.pf-m-editable:hover {
10337
- --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--hover--TextDecorationColor);
10275
+ .pf-c-jump-links__item {
10276
+ --pf-c-jump-links__list--before--BorderColor: transparent;
10338
10277
  }
10339
10278
 
10340
- .pf-c-label.pf-m-editable:focus {
10341
- --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--focus--TextDecorationColor);
10279
+ .pf-c-jump-links__item.pf-m-current > .pf-c-jump-links__link {
10280
+ --pf-c-jump-links__link--before--BorderTopWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderTopWidth);
10281
+ --pf-c-jump-links__link--before--BorderLeftWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderLeftWidth);
10282
+ --pf-c-jump-links__link--before--BorderColor: var(--pf-c-jump-links__item--m-current__link--before--BorderColor);
10283
+ --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__item--m-current__link-text--Color);
10342
10284
  }
10343
10285
 
10344
- .pf-c-label.pf-m-editable-active {
10345
- --pf-c-label--m-editable--Cursor: var(--pf-c-label--m-editable--m-editable-active--Cursor);
10346
- --pf-c-label--m-editable--TextDecoration: var(--pf-c-label--m-editable--m-editable-active--TextDecoration);
10347
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-editable--m-editable-active--BackgroundColor);
10286
+ .pf-c-jump-links__link-text {
10287
+ color: var(--pf-c-jump-links__link-text--Color);
10348
10288
  }
10349
10289
 
10350
- .pf-c-label.pf-m-editable-active .pf-c-button {
10351
- visibility: hidden;
10290
+ .pf-c-jump-links__label {
10291
+ display: var(--pf-c-jump-links__label--Display);
10292
+ margin-bottom: var(--pf-c-jump-links__label--MarginBottom);
10293
+ visibility: var(--pf-c-jump-links__label--Visibility);
10352
10294
  }
10353
10295
 
10354
- .pf-c-label .pf-c-button {
10355
- --pf-c-button--FontSize: var(--pf-c-label__c-button--FontSize);
10356
- --pf-c-button--PaddingTop: var(--pf-c-label__c-button--PaddingTop);
10357
- --pf-c-button--PaddingRight: var(--pf-c-label__c-button--PaddingRight);
10358
- --pf-c-button--PaddingBottom: var(--pf-c-label__c-button--PaddingBottom);
10359
- --pf-c-button--PaddingLeft: var(--pf-c-label__c-button--PaddingLeft);
10360
- margin-top: var(--pf-c-label__c-button--MarginTop);
10361
- margin-right: var(--pf-c-label__c-button--MarginRight);
10362
- margin-bottom: var(--pf-c-label__c-button--MarginBottom);
10363
- margin-left: var(--pf-c-label__c-button--MarginLeft);
10296
+ .pf-c-jump-links__main {
10297
+ display: flex;
10298
+ flex-direction: column;
10364
10299
  }
10365
10300
 
10366
- .pf-c-label.pf-m-overflow, .pf-c-label.pf-m-add {
10367
- --pf-c-label__content--Color: var(--pf-c-label--m-overflow__content--Color);
10368
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-overflow__content--BackgroundColor);
10369
- --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-overflow__content--before--BorderWidth);
10370
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-overflow__content--before--BorderColor);
10371
- --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-c-label--m-overflow__content--link--hover--before--BorderWidth);
10372
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-overflow__content--link--hover--before--BorderColor);
10373
- --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-c-label--m-overflow__content--link--focus--before--BorderWidth);
10374
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-overflow__content--link--focus--before--BorderColor);
10301
+ .pf-c-jump-links__toggle {
10302
+ display: var(--pf-c-jump-links__toggle--Display);
10303
+ margin-top: var(--pf-c-jump-links__toggle--MarginTop);
10304
+ margin-bottom: var(--pf-c-jump-links__toggle--MarginBottom);
10305
+ margin-left: var(--pf-c-jump-links__toggle--MarginLeft);
10306
+ visibility: var(--pf-c-jump-links__toggle--Visibility);
10375
10307
  }
10376
10308
 
10377
- .pf-c-label,
10378
- .pf-c-label__content {
10379
- display: inline-flex;
10309
+ .pf-c-jump-links__toggle .pf-c-button {
10310
+ display: flex;
10380
10311
  align-items: center;
10381
10312
  }
10382
10313
 
10383
- .pf-c-label__text {
10384
- overflow: hidden;
10385
- text-overflow: ellipsis;
10386
- white-space: nowrap;
10387
- max-width: var(--pf-c-label__text--MaxWidth);
10314
+ .pf-c-jump-links__toggle-icon {
10315
+ display: inline-block;
10316
+ color: var(--pf-c-jump-links__toggle-icon--Color);
10317
+ transition: var(--pf-c-jump-links__toggle-icon--Transition);
10318
+ transform: rotate(var(--pf-c-jump-links__toggle-icon--Rotate));
10388
10319
  }
10389
10320
 
10390
- .pf-c-label__content {
10391
- overflow: hidden;
10392
- text-overflow: ellipsis;
10393
- white-space: nowrap;
10394
- max-width: var(--pf-c-label__content--MaxWidth);
10395
- color: var(--pf-c-label__content--Color);
10396
- border-width: 0;
10321
+ .pf-c-jump-links__toggle-text {
10322
+ margin-left: var(--pf-c-jump-links__toggle-text--MarginLeft);
10323
+ color: var(--pf-c-jump-links__toggle-text--Color);
10397
10324
  }
10398
10325
 
10399
- .pf-c-label__content::before {
10400
- position: absolute;
10401
- top: 0;
10402
- right: 0;
10403
- bottom: 0;
10404
- left: 0;
10405
- pointer-events: none;
10406
- content: "";
10407
- border: var(--pf-c-label__content--before--BorderWidth) solid var(--pf-c-label__content--before--BorderColor);
10408
- border-radius: var(--pf-c-label--BorderRadius);
10326
+ .pf-c-sidebar {
10327
+ --pf-c-sidebar--BackgroundColor: var(--pf-global--BackgroundColor--100);
10328
+ --pf-c-sidebar__main--FlexDirection: column;
10329
+ --pf-c-sidebar__main--md--FlexDirection: row;
10330
+ --pf-c-sidebar__main--AlignItems: stretch;
10331
+ --pf-c-sidebar__main--md--AlignItems: start;
10332
+ --pf-c-sidebar__main--child--MarginTop: 0;
10333
+ --pf-c-sidebar__main--child--MarginLeft: 0;
10334
+ --pf-c-sidebar--m-gutter__main--Gap: var(--pf-global--spacer--md);
10335
+ --pf-c-sidebar--m-gutter__main--xl--Gap: var(--pf-global--spacer--lg);
10336
+ --pf-c-sidebar--m-panel-right__panel--Order: 0;
10337
+ --pf-c-sidebar--m-panel-right__panel--md--Order: 1;
10338
+ --pf-c-sidebar--m-stack__main--FlexDirection: column;
10339
+ --pf-c-sidebar--m-stack__main--AlignItems: stretch;
10340
+ --pf-c-sidebar--m-stack__panel--Position: sticky;
10341
+ --pf-c-sidebar--m-stack__panel--Top: 0;
10342
+ --pf-c-sidebar--m-stack__panel--BoxShadow: var(--pf-c-sidebar__panel--BoxShadow--base);
10343
+ --pf-c-sidebar--m-stack--m-panel-right__panel--Order: 0;
10344
+ --pf-c-sidebar--m-split__main--AlignItems: start;
10345
+ --pf-c-sidebar--m-split__main--FlexDirection: row;
10346
+ --pf-c-sidebar--m-split__panel--Position: static;
10347
+ --pf-c-sidebar--m-split__panel--Top: auto;
10348
+ --pf-c-sidebar--m-split--m-panel-right__panel--Order: 1;
10349
+ --pf-c-sidebar__panel--FlexBasis--base: auto;
10350
+ --pf-c-sidebar__panel--BoxShadow--base: 0 0.25rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
10351
+ --pf-c-sidebar__panel--BoxShadow: var(--pf-c-sidebar__panel--BoxShadow--base);
10352
+ --pf-c-sidebar__panel--Top: 0;
10353
+ --pf-c-sidebar__panel--md--Top: auto;
10354
+ --pf-c-sidebar__panel--Position: sticky;
10355
+ --pf-c-sidebar__panel--md--Position: static;
10356
+ --pf-c-sidebar__panel--FlexBasis-base: auto;
10357
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis-base);
10358
+ --pf-c-sidebar__panel--md--FlexBasis: 15.625rem;
10359
+ --pf-c-sidebar__panel--m-split--FlexBasis: 15.625rem;
10360
+ --pf-c-sidebar__panel--m-stack--FlexBasis: auto;
10361
+ --pf-c-sidebar__panel--ZIndex: var(--pf-global--ZIndex--xs);
10362
+ --pf-c-sidebar__panel--Order: 0;
10363
+ --pf-c-sidebar__panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
10364
+ --pf-c-sidebar__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
10365
+ --pf-c-sidebar__panel--m-sticky--Top: 0;
10366
+ --pf-c-sidebar__panel--m-sticky--Position: sticky;
10367
+ height: 100%;
10409
10368
  }
10410
10369
 
10411
- a.pf-c-label__content,
10412
- button.pf-c-label__content {
10413
- cursor: pointer;
10414
- border: none;
10370
+ @media (min-width: 768px) {
10371
+ .pf-c-sidebar {
10372
+ --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar__main--md--FlexDirection);
10373
+ --pf-c-sidebar__panel--BoxShadow: none;
10374
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--md--FlexBasis);
10375
+ --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar__main--md--AlignItems);
10376
+ --pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--md--Top);
10377
+ --pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--md--Position);
10378
+ }
10415
10379
  }
10416
-
10417
- a.pf-c-label__content, a.pf-c-label__content:hover, a.pf-c-label__content:focus,
10418
- button.pf-c-label__content,
10419
- button.pf-c-label__content:hover,
10420
- button.pf-c-label__content:focus {
10421
- text-decoration: none;
10380
+ @media (min-width: 1200px) {
10381
+ .pf-c-sidebar {
10382
+ --pf-c-sidebar--m-gutter__main--Gap: var(--pf-c-sidebar--m-gutter__main--xl--Gap);
10383
+ }
10384
+ }
10385
+ .pf-c-sidebar.pf-m-gutter {
10386
+ --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
10387
+ --pf-c-sidebar__main--child--MarginLeft: 0;
10422
10388
  }
10423
10389
 
10424
- a.pf-c-label__content:hover,
10425
- button.pf-c-label__content:hover {
10426
- --pf-c-label__content--before--BorderWidth: var(--pf-c-label__content--link--hover--before--BorderWidth);
10427
- --pf-c-label__content--before--BorderColor: var(--pf-c-label__content--link--hover--before--BorderColor);
10390
+ .pf-c-sidebar.pf-m-gutter > .pf-c-sidebar__main > * + * {
10391
+ margin-top: var(--pf-c-sidebar__main--child--MarginTop);
10392
+ margin-left: var(--pf-c-sidebar__main--child--MarginLeft);
10428
10393
  }
10429
10394
 
10430
- a.pf-c-label__content:focus,
10431
- button.pf-c-label__content:focus {
10432
- --pf-c-label__content--before--BorderWidth: var(--pf-c-label__content--link--focus--before--BorderWidth);
10433
- --pf-c-label__content--before--BorderColor: var(--pf-c-label__content--link--focus--before--BorderColor);
10395
+ @media (min-width: 768px) {
10396
+ .pf-c-sidebar.pf-m-gutter {
10397
+ --pf-c-sidebar__main--child--MarginTop: 0;
10398
+ --pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
10399
+ }
10400
+ }
10401
+ .pf-c-sidebar.pf-m-panel-right {
10402
+ --pf-c-sidebar__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--Order);
10434
10403
  }
10435
10404
 
10436
- .pf-c-label__icon {
10437
- margin-right: var(--pf-c-label__icon--MarginRight);
10438
- color: var(--pf-c-label__icon--Color);
10405
+ @media (min-width: 768px) {
10406
+ .pf-c-sidebar.pf-m-panel-right {
10407
+ --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--md--Order);
10408
+ }
10409
+ }
10410
+ .pf-c-sidebar.pf-m-stack {
10411
+ --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-stack__main--FlexDirection);
10412
+ --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-stack__main--AlignItems);
10413
+ --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
10414
+ --pf-c-sidebar__main--child--MarginLeft: 0;
10415
+ --pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-stack__panel--Position);
10416
+ --pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-stack__panel--Top);
10417
+ --pf-c-sidebar__panel--BoxShadow: var(--pf-c-sidebar--m-stack__panel--BoxShadow);
10418
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-stack--FlexBasis);
10419
+ --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-stack--m-panel-right__panel--Order);
10439
10420
  }
10440
10421
 
10441
- :where(.pf-theme-dark) .pf-c-label {
10442
- --pf-c-label--BackgroundColor: var(--pf-global--BackgroundColor--300);
10443
- --pf-c-label--m-blue--BackgroundColor: var(--pf-global--BackgroundColor--300);
10444
- --pf-c-label--m-green--BackgroundColor: var(--pf-global--BackgroundColor--300);
10445
- --pf-c-label--m-orange--BackgroundColor: var(--pf-global--BackgroundColor--300);
10446
- --pf-c-label--m-red--BackgroundColor: var(--pf-global--BackgroundColor--300);
10447
- --pf-c-label--m-purple--BackgroundColor: var(--pf-global--BackgroundColor--300);
10448
- --pf-c-label--m-cyan--BackgroundColor: var(--pf-global--BackgroundColor--300);
10449
- --pf-c-label__content--before--BorderWidth: 0;
10450
- --pf-c-label__content--before--BorderColor: transparent;
10451
- --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10452
- --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10453
- --pf-c-label--m-blue__content--Color: var(--pf-global--primary-color--100);
10454
- --pf-c-label--m-outline--m-blue__content--before--BorderColor: var(--pf-global--active-color--200);
10455
- --pf-c-label--m-outline--m-blue__content--link--hover--before--BorderColor: var(--pf-global--active-color--200);
10456
- --pf-c-label--m-outline--m-blue__content--link--focus--before--BorderColor: var(--pf-global--active-color--200);
10457
- --pf-c-label--m-green__content--Color: var(--pf-global--success-color--100);
10458
- --pf-c-label--m-outline--m-green__content--before--BorderColor: var(--pf-global--palette--green-100);
10459
- --pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor: var(--pf-global--palette--green-100);
10460
- --pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor: var(--pf-global--palette--green-100);
10461
- --pf-c-label--m-orange__content--Color: var(--pf-global--palette--orange-300);
10462
- --pf-c-label--m-outline--m-orange__content--Color: var(--pf-global--palette--orange-300);
10463
- --pf-c-label--m-outline--m-orange__content--before--BorderColor: var(--pf-global--palette--gold-100);
10464
- --pf-c-label--m-outline--m-orange__content--link--hover--before--BorderColor: var(--pf-global--palette--gold-100);
10465
- --pf-c-label--m-outline--m-orange__content--link--focus--before--BorderColor: var(--pf-global--palette--gold-100);
10466
- --pf-c-label--m-red__content--Color: var(--pf-global--danger-color--100);
10467
- --pf-c-label--m-outline--m-red__content--before--BorderColor: var(--pf-global--danger-color--100);
10468
- --pf-c-label--m-outline--m-red__content--link--hover--before--BorderColor: var(--pf-global--danger-color--100);
10469
- --pf-c-label--m-outline--m-red__content--link--focus--before--BorderColor: var(--pf-global--danger-color--100);
10470
- --pf-c-label--m-purple__content--Color: var(--pf-global--palette--purple-300);
10471
- --pf-c-label--m-purple__icon--Color: var(--pf-global--palette--purple-300);
10472
- --pf-c-label--m-purple__content--link--hover--before--BorderColor: var(--pf-global--palette--purple-300);
10473
- --pf-c-label--m-purple__content--link--focus--before--BorderColor: var(--pf-global--palette--purple-300);
10474
- --pf-c-label--m-outline--m-purple__content--before--BorderColor: var(--pf-global--palette--purple-100);
10475
- --pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor: var(--pf-global--palette--purple-100);
10476
- --pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor: var(--pf-global--palette--purple-100);
10477
- --pf-c-label--m-outline--m-purple__content--Color: var(--pf-global--palette--purple-300);
10478
- --pf-c-label--m-cyan__content--Color: var(--pf-global--default-color--200);
10479
- --pf-c-label--m-outline--m-cyan__content--Color: var(--pf-global--default-color--200);
10480
- --pf-c-label--m-outline--m-cyan__content--before--BorderColor: var(--pf-global--palette--cyan-100);
10481
- --pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--palette--cyan-100);
10482
- --pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--palette--cyan-100);
10422
+ .pf-c-sidebar.pf-m-split {
10423
+ --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-split__main--FlexDirection);
10424
+ --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-split__main--AlignItems);
10425
+ --pf-c-sidebar__main--child--MarginTop: 0;
10426
+ --pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
10427
+ --pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-split__panel--Position);
10428
+ --pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-split__panel--Top);
10429
+ --pf-c-sidebar__panel--BoxShadow: none;
10430
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-split--FlexBasis);
10431
+ --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-split--m-panel-right__panel--Order);
10483
10432
  }
10484
10433
 
10485
- .pf-c-label-group {
10486
- --pf-c-label-group__list--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
10487
- --pf-c-label-group__list--MarginRight: calc(var(--pf-global--spacer--xs) * -1);
10488
- --pf-c-label-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
10489
- --pf-c-label-group--m-category--PaddingRight: var(--pf-global--spacer--xs);
10490
- --pf-c-label-group--m-category--PaddingBottom: var(--pf-global--spacer--xs);
10491
- --pf-c-label-group--m-category--PaddingLeft: var(--pf-global--spacer--sm);
10492
- --pf-c-label-group--m-vertical--m-category--PaddingRight: var(--pf-global--spacer--sm);
10493
- --pf-c-label-group--m-category--BorderRadius: var(--pf-global--BorderRadius--sm);
10494
- --pf-c-label-group--m-category--BorderWidth: var(--pf-global--BorderWidth--sm);
10495
- --pf-c-label-group--m-category--BorderColor: var(--pf-global--BorderColor--300);
10496
- --pf-c-label-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--100);
10497
- --pf-c-label-group__label--MarginRight: var(--pf-global--spacer--sm);
10498
- --pf-c-label-group__label--MarginBottom: 0;
10499
- --pf-c-label-group--m-vertical__label--MarginBottom: var(--pf-global--spacer--sm);
10500
- --pf-c-label-group__label--FontSize: var(--pf-global--FontSize--sm);
10501
- --pf-c-label-group__label--MaxWidth: 18ch;
10502
- --pf-c-label-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
10503
- --pf-c-label-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
10504
- --pf-c-label-group--m-vertical__close--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
10505
- --pf-c-label-group--m-vertical__close--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
10506
- --pf-c-label-group--m-vertical__close--MarginLeft: var(--pf-global--spacer--sm);
10507
- --pf-c-label-group--m-vertical__close--c-button--PaddingRight: var(--pf-global--spacer--sm);
10508
- --pf-c-label-group--m-vertical__close--c-button--PaddingLeft: var(--pf-global--spacer--sm);
10509
- --pf-c-label-group__list-item--MarginRight: var(--pf-global--spacer--xs);
10510
- --pf-c-label-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
10511
- --pf-c-label-group__textarea--MinWidth: 12.5rem;
10512
- --pf-c-label-group__textarea--PaddingTop: 0.125rem;
10513
- --pf-c-label-group__textarea--PaddingRight: var(--pf-global--spacer--xs);
10514
- --pf-c-label-group__textarea--PaddingBottom: 0;
10515
- --pf-c-label-group__textarea--PaddingLeft: var(--pf-global--spacer--xs);
10516
- display: inline-flex;
10517
- align-items: center;
10434
+ .pf-c-sidebar__main {
10435
+ display: flex;
10436
+ flex-direction: var(--pf-c-sidebar__main--FlexDirection);
10437
+ align-items: var(--pf-c-sidebar__main--AlignItems);
10518
10438
  }
10519
10439
 
10520
- .pf-c-label-group.pf-m-category {
10521
- padding-top: var(--pf-c-label-group--m-category--PaddingTop);
10522
- padding-right: var(--pf-c-label-group--m-category--PaddingRight);
10523
- padding-bottom: var(--pf-c-label-group--m-category--PaddingBottom);
10524
- padding-left: var(--pf-c-label-group--m-category--PaddingLeft);
10525
- background-color: var(--pf-c-label-group--m-category--BackgroundColor);
10526
- border: var(--pf-c-label-group--m-category--BorderWidth) solid var(--pf-c-label-group--m-category--BorderColor);
10527
- border-radius: var(--pf-c-label-group--m-category--BorderRadius);
10440
+ .pf-c-sidebar__panel {
10441
+ position: var(--pf-c-sidebar__panel--Position);
10442
+ top: var(--pf-c-sidebar__panel--Top);
10443
+ z-index: var(--pf-c-sidebar__panel--ZIndex);
10444
+ flex-shrink: 0;
10445
+ flex-basis: var(--pf-c-sidebar__panel--FlexBasis);
10446
+ order: var(--pf-c-sidebar__panel--Order);
10447
+ background-color: var(--pf-c-sidebar__panel--BackgroundColor);
10448
+ box-shadow: var(--pf-c-sidebar__panel--BoxShadow);
10528
10449
  }
10529
10450
 
10530
- .pf-c-label-group.pf-m-vertical {
10531
- --pf-c-label-group__list--MarginRight: 0;
10532
- --pf-c-label-group__list--MarginBottom: 0;
10533
- --pf-c-label-group__list-item--MarginRight: 0;
10534
- --pf-c-label-group__label--MarginRight: 0;
10535
- --pf-c-label-group__label--MarginBottom: var(--pf-c-label-group--m-vertical__label--MarginBottom);
10536
- --pf-c-label-group__close--MarginTop: var(--pf-c-label-group--m-vertical__close--MarginTop);
10537
- --pf-c-label-group__close--MarginLeft: var(--pf-c-label-group--m-vertical__close--MarginLeft);
10538
- --pf-c-label-group__close--MarginBottom: 0;
10539
- --pf-c-label-group__close--MarginRight: var(--pf-c-label-group--m-vertical__close--MarginRight);
10540
- --pf-c-label-group--m-category--PaddingRight: var(--pf-c-label-group--m-vertical--m-category--PaddingRight);
10451
+ .pf-c-sidebar__panel.pf-m-sticky {
10452
+ --pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--m-sticky--Position);
10453
+ --pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--m-sticky--Top);
10541
10454
  }
10542
10455
 
10543
- .pf-c-label-group.pf-m-vertical.pf-c-label-group {
10544
- align-items: flex-start;
10456
+ .pf-c-sidebar__panel.pf-m-static {
10457
+ --pf-c-sidebar__panel--Position: static;
10458
+ --pf-c-sidebar__panel--Top: auto;
10545
10459
  }
10546
10460
 
10547
- .pf-c-label-group.pf-m-vertical .pf-c-label-group__list {
10548
- flex-direction: column;
10549
- align-items: flex-start;
10461
+ .pf-c-sidebar__content {
10462
+ flex-grow: 1;
10463
+ background-color: var(--pf-c-sidebar__content--BackgroundColor);
10550
10464
  }
10551
10465
 
10552
- .pf-c-label-group.pf-m-vertical .pf-c-label-group__main {
10553
- flex-direction: column;
10466
+ .pf-c-sidebar__content.pf-m-no-background {
10467
+ --pf-c-sidebar__content--BackgroundColor: transparent;
10554
10468
  }
10555
10469
 
10556
- .pf-c-label-group.pf-m-vertical .pf-c-label-group__list-item:last-child {
10557
- --pf-c-label-group__list-item--MarginBottom: 0;
10470
+ .pf-c-sidebar.pf-m-no-background,
10471
+ .pf-c-sidebar__panel.pf-m-no-background,
10472
+ .pf-c-sidebar__content.pf-m-no-background {
10473
+ background-color: transparent;
10558
10474
  }
10559
10475
 
10560
- .pf-c-label-group.pf-m-vertical .pf-c-label-group__close .pf-c-button {
10561
- --pf-c-button--PaddingLeft: var(--pf-c-label-group--m-vertical__close--c-button--PaddingLeft);
10562
- --pf-c-button--PaddingRight: var(--pf-c-label-group--m-vertical__close--c-button--PaddingRight);
10476
+ .pf-c-sidebar__panel.pf-m-width-default {
10477
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10563
10478
  }
10564
10479
 
10565
- .pf-c-label-group.pf-m-editable,
10566
- .pf-c-label-group.pf-m-editable .pf-c-label-group__main,
10567
- .pf-c-label-group.pf-m-editable .pf-c-label-group__list {
10568
- display: flex;
10480
+ .pf-c-sidebar__panel.pf-m-width-25 {
10481
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10569
10482
  }
10570
10483
 
10571
- .pf-c-label-group.pf-m-editable .pf-c-label-group__main,
10572
- .pf-c-label-group.pf-m-editable .pf-c-label-group__list,
10573
- .pf-c-label-group.pf-m-editable .pf-c-label-group__list-item.pf-m-textarea,
10574
- .pf-c-label-group.pf-m-editable .pf-c-label-group__textarea {
10575
- flex: 1;
10484
+ .pf-c-sidebar__panel.pf-m-width-33 {
10485
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10576
10486
  }
10577
10487
 
10578
- .pf-c-label-group__main {
10579
- display: flex;
10580
- flex: 1;
10581
- flex-wrap: wrap;
10582
- align-items: baseline;
10488
+ .pf-c-sidebar__panel.pf-m-width-50 {
10489
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10583
10490
  }
10584
10491
 
10585
- .pf-c-label-group__list {
10586
- display: inline-flex;
10587
- flex-wrap: wrap;
10588
- margin-right: var(--pf-c-label-group__list--MarginRight);
10589
- margin-bottom: var(--pf-c-label-group__list--MarginBottom);
10492
+ .pf-c-sidebar__panel.pf-m-width-66 {
10493
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10590
10494
  }
10591
10495
 
10592
- .pf-c-label-group__list-item {
10593
- display: inline-flex;
10594
- margin-right: var(--pf-c-label-group__list-item--MarginRight);
10595
- margin-bottom: var(--pf-c-label-group__list-item--MarginBottom);
10496
+ .pf-c-sidebar__panel.pf-m-width-75 {
10497
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10596
10498
  }
10597
10499
 
10598
- .pf-c-label-group__label {
10599
- overflow: hidden;
10600
- text-overflow: ellipsis;
10601
- white-space: nowrap;
10602
- max-width: var(--pf-c-label-group__label--MaxWidth);
10603
- margin-right: var(--pf-c-label-group__label--MarginRight);
10604
- margin-bottom: var(--pf-c-label-group__label--MarginBottom);
10605
- font-size: var(--pf-c-label-group__label--FontSize);
10500
+ .pf-c-sidebar__panel.pf-m-width-100 {
10501
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10606
10502
  }
10607
10503
 
10608
- .pf-c-label-group__close {
10609
- margin-top: var(--pf-c-label-group__close--MarginTop);
10610
- margin-right: var(--pf-c-label-group__close--MarginRight);
10611
- margin-bottom: var(--pf-c-label-group__close--MarginBottom);
10612
- margin-left: var(--pf-c-label-group__close--MarginLeft);
10504
+ @media (min-width: 576px) {
10505
+ .pf-c-sidebar__panel.pf-m-width-default-on-sm {
10506
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10507
+ }
10508
+
10509
+ .pf-c-sidebar__panel.pf-m-width-25-on-sm {
10510
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10511
+ }
10512
+
10513
+ .pf-c-sidebar__panel.pf-m-width-33-on-sm {
10514
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10515
+ }
10516
+
10517
+ .pf-c-sidebar__panel.pf-m-width-50-on-sm {
10518
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10519
+ }
10520
+
10521
+ .pf-c-sidebar__panel.pf-m-width-66-on-sm {
10522
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10523
+ }
10524
+
10525
+ .pf-c-sidebar__panel.pf-m-width-75-on-sm {
10526
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10527
+ }
10528
+
10529
+ .pf-c-sidebar__panel.pf-m-width-100-on-sm {
10530
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10531
+ }
10613
10532
  }
10533
+ @media (min-width: 768px) {
10534
+ .pf-c-sidebar__panel.pf-m-width-default-on-md {
10535
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10536
+ }
10614
10537
 
10615
- .pf-c-label-group__textarea {
10616
- min-width: var(--pf-c-label-group__textarea--MinWidth);
10617
- 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);
10618
- white-space: nowrap;
10619
- resize: none;
10620
- border: 0;
10621
- -ms-overflow-style: none;
10622
- scrollbar-width: none;
10538
+ .pf-c-sidebar__panel.pf-m-width-25-on-md {
10539
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10540
+ }
10541
+
10542
+ .pf-c-sidebar__panel.pf-m-width-33-on-md {
10543
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10544
+ }
10545
+
10546
+ .pf-c-sidebar__panel.pf-m-width-50-on-md {
10547
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10548
+ }
10549
+
10550
+ .pf-c-sidebar__panel.pf-m-width-66-on-md {
10551
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10552
+ }
10553
+
10554
+ .pf-c-sidebar__panel.pf-m-width-75-on-md {
10555
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10556
+ }
10557
+
10558
+ .pf-c-sidebar__panel.pf-m-width-100-on-md {
10559
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10560
+ }
10623
10561
  }
10562
+ @media (min-width: 992px) {
10563
+ .pf-c-sidebar__panel.pf-m-width-default-on-lg {
10564
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10565
+ }
10624
10566
 
10625
- .pf-c-label-group__textarea::-webkit-scrollbar {
10626
- display: none;
10567
+ .pf-c-sidebar__panel.pf-m-width-25-on-lg {
10568
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10569
+ }
10570
+
10571
+ .pf-c-sidebar__panel.pf-m-width-33-on-lg {
10572
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10573
+ }
10574
+
10575
+ .pf-c-sidebar__panel.pf-m-width-50-on-lg {
10576
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10577
+ }
10578
+
10579
+ .pf-c-sidebar__panel.pf-m-width-66-on-lg {
10580
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10581
+ }
10582
+
10583
+ .pf-c-sidebar__panel.pf-m-width-75-on-lg {
10584
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10585
+ }
10586
+
10587
+ .pf-c-sidebar__panel.pf-m-width-100-on-lg {
10588
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10589
+ }
10590
+ }
10591
+ @media (min-width: 1200px) {
10592
+ .pf-c-sidebar__panel.pf-m-width-default-on-xl {
10593
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10594
+ }
10595
+
10596
+ .pf-c-sidebar__panel.pf-m-width-25-on-xl {
10597
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10598
+ }
10599
+
10600
+ .pf-c-sidebar__panel.pf-m-width-33-on-xl {
10601
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10602
+ }
10603
+
10604
+ .pf-c-sidebar__panel.pf-m-width-50-on-xl {
10605
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10606
+ }
10607
+
10608
+ .pf-c-sidebar__panel.pf-m-width-66-on-xl {
10609
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10610
+ }
10611
+
10612
+ .pf-c-sidebar__panel.pf-m-width-75-on-xl {
10613
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10614
+ }
10615
+
10616
+ .pf-c-sidebar__panel.pf-m-width-100-on-xl {
10617
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10618
+ }
10627
10619
  }
10620
+ @media (min-width: 1450px) {
10621
+ .pf-c-sidebar__panel.pf-m-width-default-on-2xl {
10622
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10623
+ }
10624
+
10625
+ .pf-c-sidebar__panel.pf-m-width-25-on-2xl {
10626
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10627
+ }
10628
+
10629
+ .pf-c-sidebar__panel.pf-m-width-33-on-2xl {
10630
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10631
+ }
10628
10632
 
10633
+ .pf-c-sidebar__panel.pf-m-width-50-on-2xl {
10634
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10635
+ }
10636
+
10637
+ .pf-c-sidebar__panel.pf-m-width-66-on-2xl {
10638
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10639
+ }
10640
+
10641
+ .pf-c-sidebar__panel.pf-m-width-75-on-2xl {
10642
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10643
+ }
10644
+
10645
+ .pf-c-sidebar__panel.pf-m-width-100-on-2xl {
10646
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10647
+ }
10648
+ }
10629
10649
  .pf-c-list {
10630
10650
  --pf-c-list--PaddingLeft: var(--pf-global--spacer--lg);
10631
10651
  --pf-c-list--nested--MarginTop: var(--pf-global--spacer--sm);