@patternfly/react-core 4.222.13 → 4.222.14

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