@patternfly/react-core 4.222.13 → 4.222.16

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.
@@ -5479,6 +5479,7 @@ label.pf-c-check, .pf-c-check__label,
5479
5479
  --pf-c-description-list__group--RowGap: var(--pf-global--spacer--sm);
5480
5480
  --pf-c-description-list__group--ColumnGap: var(--pf-global--spacer--sm);
5481
5481
  --pf-c-description-list__group--GridTemplateColumns: auto;
5482
+ --pf-c-description-list__group--GridTemplateRows: auto 1fr;
5482
5483
  --pf-c-description-list__group--GridColumn: auto;
5483
5484
  --pf-c-description-list--m-compact--RowGap: var(--pf-global--gutter);
5484
5485
  --pf-c-description-list--m-compact--ColumnGap: var(--pf-global--spacer--sm);
@@ -5491,9 +5492,11 @@ label.pf-c-check, .pf-c-check__label,
5491
5492
  --pf-c-description-list__term-icon--MarginRight: var(--pf-global--spacer--sm);
5492
5493
  --pf-c-description-list__term-icon--Color: var(--pf-global--icon--Color--light);
5493
5494
  --pf-c-description-list--m-vertical__group--GridTemplateColumns: repeat(var(--pf-c-description-list--GridTemplateColumns--count));
5495
+ --pf-c-description-list--m-vertical__group--GridTemplateRows: auto 1fr;
5494
5496
  --pf-c-description-list--m-horizontal__term--width: 12ch;
5495
5497
  --pf-c-description-list--m-horizontal__description--width: minmax(10ch, auto);
5496
5498
  --pf-c-description-list--m-horizontal__group--GridTemplateColumns: var(--pf-c-description-list__term--width) var(--pf-c-description-list--m-horizontal__description--width);
5499
+ --pf-c-description-list--m-horizontal__group--GridTemplateRows: auto;
5497
5500
  --pf-c-description-list--m-1-col--GridTemplateColumns--count: 1;
5498
5501
  --pf-c-description-list--m-2-col--GridTemplateColumns--count: 2;
5499
5502
  --pf-c-description-list--m-3-col--GridTemplateColumns--count: 3;
@@ -5504,6 +5507,8 @@ label.pf-c-check, .pf-c-check__label,
5504
5507
  --pf-c-description-list__text--m-help-text--TextDecorationOffset: 0.25rem;
5505
5508
  --pf-c-description-list__text--m-help-text--hover--TextDecorationColor: var(--pf-global--Color--100);
5506
5509
  --pf-c-description-list__text--m-help-text--focus--TextDecorationColor: var(--pf-global--Color--100);
5510
+ --pf-c-description-list--m-display-lg__description--FontSize: var(--pf-global--FontSize--lg);
5511
+ --pf-c-description-list--m-display-2xl__description--FontSize: var(--pf-global--FontSize--2xl);
5507
5512
  display: grid;
5508
5513
  align-items: baseline;
5509
5514
  row-gap: var(--pf-c-description-list--RowGap);
@@ -5598,7 +5603,8 @@ label.pf-c-check, .pf-c-check__label,
5598
5603
  margin-bottom: calc(var(--pf-c-description-list--RowGap) * -1);
5599
5604
  }
5600
5605
 
5601
- .pf-c-description-list.pf-m-fill-columns .pf-c-description-list__group {
5606
+ .pf-c-description-list.pf-m-fill-columns .pf-c-description-list__group,
5607
+ .pf-c-description-list.pf-m-fill-columns > .pf-c-card {
5602
5608
  display: inline-grid;
5603
5609
  width: 100%;
5604
5610
  margin-bottom: var(--pf-c-description-list--RowGap);
@@ -5608,12 +5614,27 @@ label.pf-c-check, .pf-c-check__label,
5608
5614
  -moz-column-break-inside: avoid;
5609
5615
  }
5610
5616
 
5611
- .pf-c-description-list__group {
5617
+ .pf-c-description-list.pf-m-display-lg {
5618
+ --pf-c-description-list__description--FontSize: var(--pf-c-description-list--m-display-lg__description--FontSize);
5619
+ }
5620
+
5621
+ .pf-c-description-list.pf-m-display-2xl {
5622
+ --pf-c-description-list__description--FontSize: var(--pf-c-description-list--m-display-2xl__description--FontSize);
5623
+ }
5624
+
5625
+ .pf-c-description-list > .pf-c-card {
5626
+ align-self: stretch;
5627
+ padding: var(--pf-c-card--first-child--PaddingTop) var(--pf-c-card--child--PaddingRight) var(--pf-c-card--child--PaddingBottom) var(--pf-c-card--child--PaddingLeft);
5628
+ }
5629
+
5630
+ .pf-c-description-list__group,
5631
+ .pf-c-description-list > .pf-c-card {
5612
5632
  display: grid;
5613
5633
  grid-column: var(--pf-c-description-list__group--GridColumn);
5614
5634
  row-gap: var(--pf-c-description-list__group--RowGap);
5615
5635
  column-gap: var(--pf-c-description-list__group--ColumnGap);
5616
5636
  grid-template-columns: var(--pf-c-description-list__group--GridTemplateColumns);
5637
+ grid-template-rows: var(--pf-c-description-list__group--GridTemplateRows);
5617
5638
  align-items: baseline;
5618
5639
  }
5619
5640
 
@@ -5642,6 +5663,10 @@ label.pf-c-check, .pf-c-check__label,
5642
5663
  color: var(--pf-c-description-list__term-icon--Color);
5643
5664
  }
5644
5665
 
5666
+ .pf-c-description-list__description {
5667
+ font-size: var(--pf-c-description-list__description--FontSize, inherit);
5668
+ }
5669
+
5645
5670
  .pf-c-description-list__text {
5646
5671
  min-width: 0;
5647
5672
  }
@@ -5677,10 +5702,12 @@ label.pf-c-check, .pf-c-check__label,
5677
5702
 
5678
5703
  .pf-c-description-list.pf-m-horizontal {
5679
5704
  --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
5705
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
5680
5706
  }
5681
5707
 
5682
5708
  .pf-c-description-list.pf-m-vertical {
5683
5709
  --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
5710
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
5684
5711
  }
5685
5712
 
5686
5713
  @media (min-width: 576px) {
@@ -5698,10 +5725,12 @@ label.pf-c-check, .pf-c-check__label,
5698
5725
 
5699
5726
  .pf-c-description-list.pf-m-horizontal-on-sm {
5700
5727
  --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
5728
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
5701
5729
  }
5702
5730
 
5703
5731
  .pf-c-description-list.pf-m-vertical-on-sm {
5704
5732
  --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
5733
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
5705
5734
  }
5706
5735
  }
5707
5736
  @media (min-width: 768px) {
@@ -5719,10 +5748,12 @@ label.pf-c-check, .pf-c-check__label,
5719
5748
 
5720
5749
  .pf-c-description-list.pf-m-horizontal-on-md {
5721
5750
  --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
5751
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
5722
5752
  }
5723
5753
 
5724
5754
  .pf-c-description-list.pf-m-vertical-on-md {
5725
5755
  --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
5756
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
5726
5757
  }
5727
5758
  }
5728
5759
  @media (min-width: 992px) {
@@ -5740,10 +5771,12 @@ label.pf-c-check, .pf-c-check__label,
5740
5771
 
5741
5772
  .pf-c-description-list.pf-m-horizontal-on-lg {
5742
5773
  --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
5774
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
5743
5775
  }
5744
5776
 
5745
5777
  .pf-c-description-list.pf-m-vertical-on-lg {
5746
5778
  --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
5779
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
5747
5780
  }
5748
5781
  }
5749
5782
  @media (min-width: 1200px) {
@@ -5761,10 +5794,12 @@ label.pf-c-check, .pf-c-check__label,
5761
5794
 
5762
5795
  .pf-c-description-list.pf-m-horizontal-on-xl {
5763
5796
  --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
5797
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
5764
5798
  }
5765
5799
 
5766
5800
  .pf-c-description-list.pf-m-vertical-on-xl {
5767
5801
  --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
5802
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
5768
5803
  }
5769
5804
  }
5770
5805
  @media (min-width: 1450px) {
@@ -5782,10 +5817,12 @@ label.pf-c-check, .pf-c-check__label,
5782
5817
 
5783
5818
  .pf-c-description-list.pf-m-horizontal-on-2xl {
5784
5819
  --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
5820
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
5785
5821
  }
5786
5822
 
5787
5823
  .pf-c-description-list.pf-m-vertical-on-2xl {
5788
5824
  --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
5825
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
5789
5826
  }
5790
5827
  }
5791
5828
  .pf-c-divider {
@@ -9395,384 +9432,264 @@ label.pf-c-input-group__text {
9395
9432
  --pf-c-input-group__text--BackgroundColor: transparent;
9396
9433
  }
9397
9434
 
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);
9435
+ .pf-c-jump-links {
9436
+ --pf-c-jump-links__list--Display: flex;
9437
+ --pf-c-jump-links__list--Visibility: visible;
9438
+ --pf-c-jump-links__list--PaddingTop: 0;
9439
+ --pf-c-jump-links__list--PaddingRight: var(--pf-global--spacer--md);
9440
+ --pf-c-jump-links__list--PaddingBottom: 0;
9441
+ --pf-c-jump-links__list--PaddingLeft: var(--pf-global--spacer--md);
9442
+ --pf-c-jump-links--m-vertical__list--PaddingTop: var(--pf-global--spacer--md);
9443
+ --pf-c-jump-links--m-vertical__list--PaddingRight: 0;
9444
+ --pf-c-jump-links--m-vertical__list--PaddingBottom: var(--pf-global--spacer--md);
9445
+ --pf-c-jump-links--m-vertical__list--PaddingLeft: 0;
9446
+ --pf-c-jump-links__list--FlexDirection: row;
9447
+ --pf-c-jump-links--m-vertical__list--FlexDirection: column;
9448
+ --pf-c-jump-links__list--before--BorderColor: var(--pf-global--BorderColor--100);
9449
+ --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-global--BorderWidth--sm);
9450
+ --pf-c-jump-links__list--before--BorderRightWidth: 0;
9451
+ --pf-c-jump-links__list--before--BorderBottomWidth: 0;
9452
+ --pf-c-jump-links__list--before--BorderLeftWidth: 0;
9453
+ --pf-c-jump-links--m-vertical__list--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
9454
+ --pf-c-jump-links--m-vertical__list--before--BorderTopWidth: 0;
9455
+ --pf-c-jump-links__list__list--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
9456
+ --pf-c-jump-links__link--PaddingTop: var(--pf-global--spacer--md);
9457
+ --pf-c-jump-links__link--PaddingRight: var(--pf-global--spacer--md);
9458
+ --pf-c-jump-links__link--PaddingBottom: var(--pf-global--spacer--md);
9459
+ --pf-c-jump-links__link--PaddingLeft: var(--pf-global--spacer--md);
9460
+ --pf-c-jump-links__list__list__link--PaddingTop: var(--pf-global--spacer--sm);
9461
+ --pf-c-jump-links__list__list__link--PaddingLeft: var(--pf-global--spacer--lg);
9462
+ --pf-c-jump-links__list__list__link--PaddingBottom: var(--pf-global--spacer--sm);
9463
+ --pf-c-jump-links__link--OutlineOffset: calc(-1 * var(--pf-global--spacer--sm));
9464
+ --pf-c-jump-links__link--before--BorderTopWidth: 0;
9465
+ --pf-c-jump-links__link--before--BorderRightWidth: 0;
9466
+ --pf-c-jump-links__link--before--BorderBottomWidth: 0;
9467
+ --pf-c-jump-links__link--before--BorderLeftWidth: 0;
9468
+ --pf-c-jump-links__link--before--BorderColor: transparent;
9469
+ --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-global--BorderWidth--lg);
9470
+ --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: 0;
9471
+ --pf-c-jump-links__item--m-current__link--before--BorderColor: var(--pf-global--primary-color--100);
9472
+ --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth: 0;
9473
+ --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth: var(--pf-global--BorderWidth--lg);
9474
+ --pf-c-jump-links__link-text--Color: var(--pf-global--Color--200);
9475
+ --pf-c-jump-links__link--hover__link-text--Color: var(--pf-global--Color--100);
9476
+ --pf-c-jump-links__link--focus__link-text--Color: var(--pf-global--Color--100);
9477
+ --pf-c-jump-links__item--m-current__link-text--Color: var(--pf-global--Color--100);
9478
+ --pf-c-jump-links__label--MarginBottom: var(--pf-global--spacer--md);
9479
+ --pf-c-jump-links__label--Display: block;
9480
+ --pf-c-jump-links__label--Visibility: visible;
9481
+ --pf-c-jump-links__toggle--MarginTop: calc(-1 * var(--pf-global--spacer--form-element));
9482
+ --pf-c-jump-links__toggle--MarginBottom--base: calc(-1 * var(--pf-global--spacer--form-element));
9483
+ --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links__toggle--MarginBottom--base);
9484
+ --pf-c-jump-links--m-expanded__toggle--MarginBottom: calc(var(--pf-c-jump-links__toggle--MarginBottom--base) + var(--pf-global--spacer--md));
9485
+ --pf-c-jump-links__toggle--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
9486
+ --pf-c-jump-links__toggle--Display: none;
9487
+ --pf-c-jump-links__toggle--Visibility: hidden;
9488
+ --pf-c-jump-links__toggle-icon--Color: currentColor;
9489
+ --pf-c-jump-links__toggle-icon--Transition: var(--pf-global--Transition);
9490
+ --pf-c-jump-links__toggle-icon--Rotate: 0;
9491
+ --pf-c-jump-links--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
9492
+ --pf-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
9493
+ --pf-c-jump-links__toggle-text--MarginLeft: var(--pf-global--spacer--md);
9494
+ --pf-c-jump-links__toggle-text--Color: var(--pf-global--Color--100);
9495
+ display: flex;
9547
9496
  }
9548
9497
 
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);
9498
+ .pf-c-jump-links.pf-m-center {
9499
+ justify-content: center;
9556
9500
  }
9557
9501
 
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);
9502
+ .pf-c-jump-links.pf-m-center .pf-c-jump-links__main {
9503
+ align-items: center;
9572
9504
  }
9573
9505
 
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);
9506
+ .pf-c-jump-links.pf-m-vertical, .pf-c-jump-links.pf-m-expandable {
9507
+ --pf-c-jump-links__list--PaddingTop: var(--pf-c-jump-links--m-vertical__list--PaddingTop);
9508
+ --pf-c-jump-links__list--PaddingRight: var(--pf-c-jump-links--m-vertical__list--PaddingRight);
9509
+ --pf-c-jump-links__list--PaddingBottom: var(--pf-c-jump-links--m-vertical__list--PaddingBottom);
9510
+ --pf-c-jump-links__list--PaddingLeft: var(--pf-c-jump-links--m-vertical__list--PaddingLeft);
9511
+ --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderTopWidth);
9512
+ --pf-c-jump-links__list--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderLeftWidth);
9513
+ --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth);
9514
+ --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth);
9515
+ --pf-c-jump-links__list--FlexDirection: var(--pf-c-jump-links--m-vertical__list--FlexDirection);
9516
+ flex-direction: column;
9588
9517
  }
9589
9518
 
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);
9519
+ .pf-c-jump-links.pf-m-expandable {
9520
+ --pf-c-jump-links__list--Display: none;
9521
+ --pf-c-jump-links__list--Visibility: hidden;
9522
+ --pf-c-jump-links__toggle--Display: block;
9523
+ --pf-c-jump-links__toggle--Visibility: visible;
9524
+ --pf-c-jump-links__label--Display: none;
9525
+ --pf-c-jump-links__label--Visibility: hidden;
9604
9526
  }
9605
9527
 
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);
9528
+ .pf-c-jump-links.pf-m-non-expandable {
9529
+ --pf-c-jump-links__list--Display: flex;
9530
+ --pf-c-jump-links__list--Visibility: visible;
9531
+ --pf-c-jump-links__toggle--Display: none;
9532
+ --pf-c-jump-links__toggle--Visibility: hidden;
9533
+ --pf-c-jump-links__label--Display: block;
9534
+ --pf-c-jump-links__label--Visibility: visible;
9620
9535
  }
9621
9536
 
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);
9636
- }
9537
+ @media (min-width: 576px) {
9538
+ .pf-c-jump-links.pf-m-expandable-on-sm {
9539
+ --pf-c-jump-links__list--Display: none;
9540
+ --pf-c-jump-links__list--Visibility: hidden;
9541
+ --pf-c-jump-links__toggle--Display: block;
9542
+ --pf-c-jump-links__toggle--Visibility: visible;
9543
+ --pf-c-jump-links__label--Display: none;
9544
+ --pf-c-jump-links__label--Visibility: hidden;
9545
+ }
9637
9546
 
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);
9547
+ .pf-c-jump-links.pf-m-non-expandable-on-sm {
9548
+ --pf-c-jump-links__list--Display: flex;
9549
+ --pf-c-jump-links__list--Visibility: visible;
9550
+ --pf-c-jump-links__toggle--Display: none;
9551
+ --pf-c-jump-links__toggle--Visibility: hidden;
9552
+ --pf-c-jump-links__label--Display: block;
9553
+ --pf-c-jump-links__label--Visibility: visible;
9554
+ }
9652
9555
  }
9556
+ @media (min-width: 768px) {
9557
+ .pf-c-jump-links.pf-m-expandable-on-md {
9558
+ --pf-c-jump-links__list--Display: none;
9559
+ --pf-c-jump-links__list--Visibility: hidden;
9560
+ --pf-c-jump-links__toggle--Display: block;
9561
+ --pf-c-jump-links__toggle--Visibility: visible;
9562
+ --pf-c-jump-links__label--Display: none;
9563
+ --pf-c-jump-links__label--Visibility: hidden;
9564
+ }
9653
9565
 
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);
9566
+ .pf-c-jump-links.pf-m-non-expandable-on-md {
9567
+ --pf-c-jump-links__list--Display: flex;
9568
+ --pf-c-jump-links__list--Visibility: visible;
9569
+ --pf-c-jump-links__toggle--Display: none;
9570
+ --pf-c-jump-links__toggle--Visibility: hidden;
9571
+ --pf-c-jump-links__label--Display: block;
9572
+ --pf-c-jump-links__label--Visibility: visible;
9573
+ }
9668
9574
  }
9575
+ @media (min-width: 992px) {
9576
+ .pf-c-jump-links.pf-m-expandable-on-lg {
9577
+ --pf-c-jump-links__list--Display: none;
9578
+ --pf-c-jump-links__list--Visibility: hidden;
9579
+ --pf-c-jump-links__toggle--Display: block;
9580
+ --pf-c-jump-links__toggle--Visibility: visible;
9581
+ --pf-c-jump-links__label--Display: none;
9582
+ --pf-c-jump-links__label--Visibility: hidden;
9583
+ }
9669
9584
 
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);
9585
+ .pf-c-jump-links.pf-m-non-expandable-on-lg {
9586
+ --pf-c-jump-links__list--Display: flex;
9587
+ --pf-c-jump-links__list--Visibility: visible;
9588
+ --pf-c-jump-links__toggle--Display: none;
9589
+ --pf-c-jump-links__toggle--Visibility: hidden;
9590
+ --pf-c-jump-links__label--Display: block;
9591
+ --pf-c-jump-links__label--Visibility: visible;
9592
+ }
9678
9593
  }
9594
+ @media (min-width: 1200px) {
9595
+ .pf-c-jump-links.pf-m-expandable-on-xl {
9596
+ --pf-c-jump-links__list--Display: none;
9597
+ --pf-c-jump-links__list--Visibility: hidden;
9598
+ --pf-c-jump-links__toggle--Display: block;
9599
+ --pf-c-jump-links__toggle--Visibility: visible;
9600
+ --pf-c-jump-links__label--Display: none;
9601
+ --pf-c-jump-links__label--Visibility: hidden;
9602
+ }
9679
9603
 
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);
9604
+ .pf-c-jump-links.pf-m-non-expandable-on-xl {
9605
+ --pf-c-jump-links__list--Display: flex;
9606
+ --pf-c-jump-links__list--Visibility: visible;
9607
+ --pf-c-jump-links__toggle--Display: none;
9608
+ --pf-c-jump-links__toggle--Visibility: hidden;
9609
+ --pf-c-jump-links__label--Display: block;
9610
+ --pf-c-jump-links__label--Visibility: visible;
9611
+ }
9685
9612
  }
9613
+ @media (min-width: 1450px) {
9614
+ .pf-c-jump-links.pf-m-expandable-on-2xl {
9615
+ --pf-c-jump-links__list--Display: none;
9616
+ --pf-c-jump-links__list--Visibility: hidden;
9617
+ --pf-c-jump-links__toggle--Display: block;
9618
+ --pf-c-jump-links__toggle--Visibility: visible;
9619
+ --pf-c-jump-links__label--Display: none;
9620
+ --pf-c-jump-links__label--Visibility: hidden;
9621
+ }
9686
9622
 
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);
9623
+ .pf-c-jump-links.pf-m-non-expandable-on-2xl {
9624
+ --pf-c-jump-links__list--Display: flex;
9625
+ --pf-c-jump-links__list--Visibility: visible;
9626
+ --pf-c-jump-links__toggle--Display: none;
9627
+ --pf-c-jump-links__toggle--Visibility: hidden;
9628
+ --pf-c-jump-links__label--Display: block;
9629
+ --pf-c-jump-links__label--Visibility: visible;
9630
+ }
9631
+ }
9632
+ .pf-c-jump-links.pf-m-expanded {
9633
+ --pf-c-jump-links__list--Display: flex;
9634
+ --pf-c-jump-links__list--Visibility: visible;
9635
+ --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links--m-expanded__toggle--MarginBottom);
9636
+ --pf-c-jump-links__toggle-icon--Rotate: var(--pf-c-jump-links--m-expanded__toggle-icon--Rotate);
9637
+ --pf-c-jump-links__toggle-icon--Color: var(--pf-c-jump-links--m-expanded__toggle-icon--Color);
9692
9638
  }
9693
9639
 
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);
9640
+ .pf-c-jump-links__list {
9641
+ position: relative;
9642
+ display: var(--pf-c-jump-links__list--Display);
9643
+ flex-direction: var(--pf-c-jump-links__list--FlexDirection);
9644
+ padding-top: var(--pf-c-jump-links__list--PaddingTop);
9645
+ padding-right: var(--pf-c-jump-links__list--PaddingRight);
9646
+ padding-bottom: var(--pf-c-jump-links__list--PaddingBottom);
9647
+ padding-left: var(--pf-c-jump-links__list--PaddingLeft);
9648
+ visibility: var(--pf-c-jump-links__list--Visibility);
9710
9649
  }
9711
9650
 
9712
- .pf-c-label.pf-m-editable:hover {
9713
- --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--hover--TextDecorationColor);
9651
+ .pf-c-jump-links__list::before {
9652
+ position: absolute;
9653
+ top: 0;
9654
+ right: 0;
9655
+ bottom: 0;
9656
+ left: 0;
9657
+ pointer-events: none;
9658
+ content: "";
9659
+ border: solid var(--pf-c-jump-links__list--before--BorderColor);
9660
+ 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);
9714
9661
  }
9715
9662
 
9716
- .pf-c-label.pf-m-editable:focus {
9717
- --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--focus--TextDecorationColor);
9663
+ .pf-c-jump-links__list .pf-c-jump-links__list {
9664
+ --pf-c-jump-links__list--PaddingTop: 0;
9665
+ --pf-c-jump-links__list--PaddingBottom: 0;
9666
+ --pf-c-jump-links__link--PaddingTop: var(--pf-c-jump-links__list__list__link--PaddingTop);
9667
+ --pf-c-jump-links__link--PaddingBottom: var(--pf-c-jump-links__list__list__link--PaddingBottom);
9668
+ --pf-c-jump-links__link--PaddingLeft: var(--pf-c-jump-links__list__list__link--PaddingLeft);
9669
+ margin-top: var(--pf-c-jump-links__list__list--MarginTop);
9718
9670
  }
9719
9671
 
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);
9724
- }
9725
-
9726
- .pf-c-label.pf-m-editable-active .pf-c-button {
9727
- visibility: hidden;
9728
- }
9729
-
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);
9740
- }
9741
-
9742
- .pf-c-label.pf-m-overflow, .pf-c-label.pf-m-add {
9743
- --pf-c-label__content--Color: var(--pf-c-label--m-overflow__content--Color);
9744
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-overflow__content--BackgroundColor);
9745
- --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-overflow__content--before--BorderWidth);
9746
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-overflow__content--before--BorderColor);
9747
- --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-c-label--m-overflow__content--link--hover--before--BorderWidth);
9748
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-overflow__content--link--hover--before--BorderColor);
9749
- --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-c-label--m-overflow__content--link--focus--before--BorderWidth);
9750
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-overflow__content--link--focus--before--BorderColor);
9751
- }
9752
-
9753
- .pf-c-label,
9754
- .pf-c-label__content {
9755
- display: inline-flex;
9756
- align-items: center;
9672
+ .pf-c-jump-links__link {
9673
+ position: relative;
9674
+ display: flex;
9675
+ flex: 1;
9676
+ padding-top: var(--pf-c-jump-links__link--PaddingTop);
9677
+ padding-right: var(--pf-c-jump-links__link--PaddingRight);
9678
+ padding-bottom: var(--pf-c-jump-links__link--PaddingBottom);
9679
+ padding-left: var(--pf-c-jump-links__link--PaddingLeft);
9680
+ text-decoration: none;
9681
+ outline-offset: var(--pf-c-jump-links__link--OutlineOffset);
9757
9682
  }
9758
9683
 
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);
9684
+ .pf-c-jump-links__link:hover {
9685
+ --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--hover__link-text--Color);
9764
9686
  }
9765
9687
 
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;
9688
+ .pf-c-jump-links__link:focus {
9689
+ --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--focus__link-text--Color);
9773
9690
  }
9774
9691
 
9775
- .pf-c-label__content::before {
9692
+ .pf-c-jump-links__link::before {
9776
9693
  position: absolute;
9777
9694
  top: 0;
9778
9695
  right: 0;
@@ -9780,872 +9697,992 @@ label.pf-c-input-group__text {
9780
9697
  left: 0;
9781
9698
  pointer-events: none;
9782
9699
  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);
9785
- }
9786
-
9787
- a.pf-c-label__content,
9788
- button.pf-c-label__content {
9789
- cursor: pointer;
9790
- border: none;
9791
- }
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;
9798
- }
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);
9804
- }
9805
-
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);
9810
- }
9811
-
9812
- .pf-c-label__icon {
9813
- margin-right: var(--pf-c-label__icon--MarginRight);
9814
- color: var(--pf-c-label__icon--Color);
9815
- }
9816
-
9817
- :where(.pf-theme-dark) .pf-c-label {
9818
- --pf-c-label--BackgroundColor: var(--pf-global--BackgroundColor--300);
9819
- --pf-c-label--m-blue--BackgroundColor: var(--pf-global--BackgroundColor--300);
9820
- --pf-c-label--m-green--BackgroundColor: var(--pf-global--BackgroundColor--300);
9821
- --pf-c-label--m-orange--BackgroundColor: var(--pf-global--BackgroundColor--300);
9822
- --pf-c-label--m-red--BackgroundColor: var(--pf-global--BackgroundColor--300);
9823
- --pf-c-label--m-purple--BackgroundColor: var(--pf-global--BackgroundColor--300);
9824
- --pf-c-label--m-cyan--BackgroundColor: var(--pf-global--BackgroundColor--300);
9825
- --pf-c-label__content--before--BorderWidth: 0;
9826
- --pf-c-label__content--before--BorderColor: transparent;
9827
- --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-global--BorderWidth--sm);
9828
- --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-global--BorderWidth--sm);
9829
- --pf-c-label--m-blue__content--Color: var(--pf-global--primary-color--100);
9830
- --pf-c-label--m-outline--m-blue__content--before--BorderColor: var(--pf-global--active-color--200);
9831
- --pf-c-label--m-outline--m-blue__content--link--hover--before--BorderColor: var(--pf-global--active-color--200);
9832
- --pf-c-label--m-outline--m-blue__content--link--focus--before--BorderColor: var(--pf-global--active-color--200);
9833
- --pf-c-label--m-green__content--Color: var(--pf-global--success-color--100);
9834
- --pf-c-label--m-outline--m-green__content--before--BorderColor: var(--pf-global--palette--green-100);
9835
- --pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor: var(--pf-global--palette--green-100);
9836
- --pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor: var(--pf-global--palette--green-100);
9837
- --pf-c-label--m-orange__content--Color: var(--pf-global--palette--orange-300);
9838
- --pf-c-label--m-outline--m-orange__content--Color: var(--pf-global--palette--orange-300);
9839
- --pf-c-label--m-outline--m-orange__content--before--BorderColor: var(--pf-global--palette--gold-100);
9840
- --pf-c-label--m-outline--m-orange__content--link--hover--before--BorderColor: var(--pf-global--palette--gold-100);
9841
- --pf-c-label--m-outline--m-orange__content--link--focus--before--BorderColor: var(--pf-global--palette--gold-100);
9842
- --pf-c-label--m-red__content--Color: var(--pf-global--danger-color--100);
9843
- --pf-c-label--m-outline--m-red__content--before--BorderColor: var(--pf-global--danger-color--100);
9844
- --pf-c-label--m-outline--m-red__content--link--hover--before--BorderColor: var(--pf-global--danger-color--100);
9845
- --pf-c-label--m-outline--m-red__content--link--focus--before--BorderColor: var(--pf-global--danger-color--100);
9846
- --pf-c-label--m-purple__content--Color: var(--pf-global--palette--purple-300);
9847
- --pf-c-label--m-purple__icon--Color: var(--pf-global--palette--purple-300);
9848
- --pf-c-label--m-purple__content--link--hover--before--BorderColor: var(--pf-global--palette--purple-300);
9849
- --pf-c-label--m-purple__content--link--focus--before--BorderColor: var(--pf-global--palette--purple-300);
9850
- --pf-c-label--m-outline--m-purple__content--before--BorderColor: var(--pf-global--palette--purple-100);
9851
- --pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor: var(--pf-global--palette--purple-100);
9852
- --pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor: var(--pf-global--palette--purple-100);
9853
- --pf-c-label--m-outline--m-purple__content--Color: var(--pf-global--palette--purple-300);
9854
- --pf-c-label--m-cyan__content--Color: var(--pf-global--default-color--200);
9855
- --pf-c-label--m-outline--m-cyan__content--Color: var(--pf-global--default-color--200);
9856
- --pf-c-label--m-outline--m-cyan__content--before--BorderColor: var(--pf-global--palette--cyan-100);
9857
- --pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--palette--cyan-100);
9858
- --pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--palette--cyan-100);
9859
- }
9860
-
9861
- .pf-c-label-group {
9862
- --pf-c-label-group__list--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
9863
- --pf-c-label-group__list--MarginRight: calc(var(--pf-global--spacer--xs) * -1);
9864
- --pf-c-label-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
9865
- --pf-c-label-group--m-category--PaddingRight: var(--pf-global--spacer--xs);
9866
- --pf-c-label-group--m-category--PaddingBottom: var(--pf-global--spacer--xs);
9867
- --pf-c-label-group--m-category--PaddingLeft: var(--pf-global--spacer--sm);
9868
- --pf-c-label-group--m-vertical--m-category--PaddingRight: var(--pf-global--spacer--sm);
9869
- --pf-c-label-group--m-category--BorderRadius: var(--pf-global--BorderRadius--sm);
9870
- --pf-c-label-group--m-category--BorderWidth: var(--pf-global--BorderWidth--sm);
9871
- --pf-c-label-group--m-category--BorderColor: var(--pf-global--BorderColor--300);
9872
- --pf-c-label-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--100);
9873
- --pf-c-label-group__label--MarginRight: var(--pf-global--spacer--sm);
9874
- --pf-c-label-group__label--MarginBottom: 0;
9875
- --pf-c-label-group--m-vertical__label--MarginBottom: var(--pf-global--spacer--sm);
9876
- --pf-c-label-group__label--FontSize: var(--pf-global--FontSize--sm);
9877
- --pf-c-label-group__label--MaxWidth: 18ch;
9878
- --pf-c-label-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
9879
- --pf-c-label-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
9880
- --pf-c-label-group--m-vertical__close--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
9881
- --pf-c-label-group--m-vertical__close--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
9882
- --pf-c-label-group--m-vertical__close--MarginLeft: var(--pf-global--spacer--sm);
9883
- --pf-c-label-group--m-vertical__close--c-button--PaddingRight: var(--pf-global--spacer--sm);
9884
- --pf-c-label-group--m-vertical__close--c-button--PaddingLeft: var(--pf-global--spacer--sm);
9885
- --pf-c-label-group__list-item--MarginRight: var(--pf-global--spacer--xs);
9886
- --pf-c-label-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
9887
- --pf-c-label-group__textarea--MinWidth: 12.5rem;
9888
- --pf-c-label-group__textarea--PaddingTop: 0.125rem;
9889
- --pf-c-label-group__textarea--PaddingRight: var(--pf-global--spacer--xs);
9890
- --pf-c-label-group__textarea--PaddingBottom: 0;
9891
- --pf-c-label-group__textarea--PaddingLeft: var(--pf-global--spacer--xs);
9892
- display: inline-flex;
9893
- align-items: center;
9700
+ border-color: var(--pf-c-jump-links__link--before--BorderColor);
9701
+ border-style: solid;
9702
+ 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);
9894
9703
  }
9895
9704
 
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);
9705
+ .pf-c-jump-links__item {
9706
+ --pf-c-jump-links__list--before--BorderColor: transparent;
9904
9707
  }
9905
9708
 
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);
9709
+ .pf-c-jump-links__item.pf-m-current > .pf-c-jump-links__link {
9710
+ --pf-c-jump-links__link--before--BorderTopWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderTopWidth);
9711
+ --pf-c-jump-links__link--before--BorderLeftWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderLeftWidth);
9712
+ --pf-c-jump-links__link--before--BorderColor: var(--pf-c-jump-links__item--m-current__link--before--BorderColor);
9713
+ --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__item--m-current__link-text--Color);
9917
9714
  }
9918
9715
 
9919
- .pf-c-label-group.pf-m-vertical.pf-c-label-group {
9920
- align-items: flex-start;
9716
+ .pf-c-jump-links__link-text {
9717
+ color: var(--pf-c-jump-links__link-text--Color);
9921
9718
  }
9922
9719
 
9923
- .pf-c-label-group.pf-m-vertical .pf-c-label-group__list {
9924
- flex-direction: column;
9925
- align-items: flex-start;
9720
+ .pf-c-jump-links__label {
9721
+ display: var(--pf-c-jump-links__label--Display);
9722
+ margin-bottom: var(--pf-c-jump-links__label--MarginBottom);
9723
+ visibility: var(--pf-c-jump-links__label--Visibility);
9926
9724
  }
9927
9725
 
9928
- .pf-c-label-group.pf-m-vertical .pf-c-label-group__main {
9726
+ .pf-c-jump-links__main {
9727
+ display: flex;
9929
9728
  flex-direction: column;
9930
9729
  }
9931
9730
 
9932
- .pf-c-label-group.pf-m-vertical .pf-c-label-group__list-item:last-child {
9933
- --pf-c-label-group__list-item--MarginBottom: 0;
9934
- }
9935
-
9936
- .pf-c-label-group.pf-m-vertical .pf-c-label-group__close .pf-c-button {
9937
- --pf-c-button--PaddingLeft: var(--pf-c-label-group--m-vertical__close--c-button--PaddingLeft);
9938
- --pf-c-button--PaddingRight: var(--pf-c-label-group--m-vertical__close--c-button--PaddingRight);
9731
+ .pf-c-jump-links__toggle {
9732
+ display: var(--pf-c-jump-links__toggle--Display);
9733
+ margin-top: var(--pf-c-jump-links__toggle--MarginTop);
9734
+ margin-bottom: var(--pf-c-jump-links__toggle--MarginBottom);
9735
+ margin-left: var(--pf-c-jump-links__toggle--MarginLeft);
9736
+ visibility: var(--pf-c-jump-links__toggle--Visibility);
9939
9737
  }
9940
9738
 
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 {
9739
+ .pf-c-jump-links__toggle .pf-c-button {
9944
9740
  display: flex;
9741
+ align-items: center;
9945
9742
  }
9946
9743
 
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;
9744
+ .pf-c-jump-links__toggle-icon {
9745
+ display: inline-block;
9746
+ color: var(--pf-c-jump-links__toggle-icon--Color);
9747
+ transition: var(--pf-c-jump-links__toggle-icon--Transition);
9748
+ transform: rotate(var(--pf-c-jump-links__toggle-icon--Rotate));
9952
9749
  }
9953
9750
 
9954
- .pf-c-label-group__main {
9955
- display: flex;
9956
- flex: 1;
9957
- flex-wrap: wrap;
9958
- align-items: baseline;
9751
+ .pf-c-jump-links__toggle-text {
9752
+ margin-left: var(--pf-c-jump-links__toggle-text--MarginLeft);
9753
+ color: var(--pf-c-jump-links__toggle-text--Color);
9959
9754
  }
9960
9755
 
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);
9756
+ .pf-c-sidebar {
9757
+ --pf-c-sidebar--BackgroundColor: var(--pf-global--BackgroundColor--100);
9758
+ --pf-c-sidebar__main--FlexDirection: column;
9759
+ --pf-c-sidebar__main--md--FlexDirection: row;
9760
+ --pf-c-sidebar__main--AlignItems: stretch;
9761
+ --pf-c-sidebar__main--md--AlignItems: start;
9762
+ --pf-c-sidebar__main--child--MarginTop: 0;
9763
+ --pf-c-sidebar__main--child--MarginLeft: 0;
9764
+ --pf-c-sidebar--m-gutter__main--Gap: var(--pf-global--spacer--md);
9765
+ --pf-c-sidebar--m-gutter__main--xl--Gap: var(--pf-global--spacer--lg);
9766
+ --pf-c-sidebar--m-panel-right__panel--Order: 0;
9767
+ --pf-c-sidebar--m-panel-right__panel--md--Order: 1;
9768
+ --pf-c-sidebar--m-stack__main--FlexDirection: column;
9769
+ --pf-c-sidebar--m-stack__main--AlignItems: stretch;
9770
+ --pf-c-sidebar--m-stack__panel--Position: sticky;
9771
+ --pf-c-sidebar--m-stack__panel--Top: 0;
9772
+ --pf-c-sidebar--m-stack__panel--BoxShadow: var(--pf-c-sidebar__panel--BoxShadow--base);
9773
+ --pf-c-sidebar--m-stack--m-panel-right__panel--Order: 0;
9774
+ --pf-c-sidebar--m-split__main--AlignItems: start;
9775
+ --pf-c-sidebar--m-split__main--FlexDirection: row;
9776
+ --pf-c-sidebar--m-split__panel--Position: static;
9777
+ --pf-c-sidebar--m-split__panel--Top: auto;
9778
+ --pf-c-sidebar--m-split--m-panel-right__panel--Order: 1;
9779
+ --pf-c-sidebar__panel--FlexBasis--base: auto;
9780
+ --pf-c-sidebar__panel--BoxShadow--base: 0 0.25rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
9781
+ --pf-c-sidebar__panel--BoxShadow: var(--pf-c-sidebar__panel--BoxShadow--base);
9782
+ --pf-c-sidebar__panel--Top: 0;
9783
+ --pf-c-sidebar__panel--md--Top: auto;
9784
+ --pf-c-sidebar__panel--Position: sticky;
9785
+ --pf-c-sidebar__panel--md--Position: static;
9786
+ --pf-c-sidebar__panel--FlexBasis-base: auto;
9787
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis-base);
9788
+ --pf-c-sidebar__panel--md--FlexBasis: 15.625rem;
9789
+ --pf-c-sidebar__panel--m-split--FlexBasis: 15.625rem;
9790
+ --pf-c-sidebar__panel--m-stack--FlexBasis: auto;
9791
+ --pf-c-sidebar__panel--ZIndex: var(--pf-global--ZIndex--xs);
9792
+ --pf-c-sidebar__panel--Order: 0;
9793
+ --pf-c-sidebar__panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
9794
+ --pf-c-sidebar__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
9795
+ --pf-c-sidebar__panel--m-sticky--Top: 0;
9796
+ --pf-c-sidebar__panel--m-sticky--Position: sticky;
9797
+ height: 100%;
9966
9798
  }
9967
9799
 
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);
9800
+ @media (min-width: 768px) {
9801
+ .pf-c-sidebar {
9802
+ --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar__main--md--FlexDirection);
9803
+ --pf-c-sidebar__panel--BoxShadow: none;
9804
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--md--FlexBasis);
9805
+ --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar__main--md--AlignItems);
9806
+ --pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--md--Top);
9807
+ --pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--md--Position);
9808
+ }
9809
+ }
9810
+ @media (min-width: 1200px) {
9811
+ .pf-c-sidebar {
9812
+ --pf-c-sidebar--m-gutter__main--Gap: var(--pf-c-sidebar--m-gutter__main--xl--Gap);
9813
+ }
9814
+ }
9815
+ .pf-c-sidebar.pf-m-gutter {
9816
+ --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
9817
+ --pf-c-sidebar__main--child--MarginLeft: 0;
9972
9818
  }
9973
9819
 
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);
9820
+ .pf-c-sidebar.pf-m-gutter > .pf-c-sidebar__main > * + * {
9821
+ margin-top: var(--pf-c-sidebar__main--child--MarginTop);
9822
+ margin-left: var(--pf-c-sidebar__main--child--MarginLeft);
9982
9823
  }
9983
9824
 
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);
9825
+ @media (min-width: 768px) {
9826
+ .pf-c-sidebar.pf-m-gutter {
9827
+ --pf-c-sidebar__main--child--MarginTop: 0;
9828
+ --pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
9829
+ }
9830
+ }
9831
+ .pf-c-sidebar.pf-m-panel-right {
9832
+ --pf-c-sidebar__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--Order);
9989
9833
  }
9990
9834
 
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;
9835
+ @media (min-width: 768px) {
9836
+ .pf-c-sidebar.pf-m-panel-right {
9837
+ --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--md--Order);
9838
+ }
9839
+ }
9840
+ .pf-c-sidebar.pf-m-stack {
9841
+ --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-stack__main--FlexDirection);
9842
+ --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-stack__main--AlignItems);
9843
+ --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
9844
+ --pf-c-sidebar__main--child--MarginLeft: 0;
9845
+ --pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-stack__panel--Position);
9846
+ --pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-stack__panel--Top);
9847
+ --pf-c-sidebar__panel--BoxShadow: var(--pf-c-sidebar--m-stack__panel--BoxShadow);
9848
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-stack--FlexBasis);
9849
+ --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-stack--m-panel-right__panel--Order);
9999
9850
  }
10000
9851
 
10001
- .pf-c-label-group__textarea::-webkit-scrollbar {
10002
- display: none;
9852
+ .pf-c-sidebar.pf-m-split {
9853
+ --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-split__main--FlexDirection);
9854
+ --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-split__main--AlignItems);
9855
+ --pf-c-sidebar__main--child--MarginTop: 0;
9856
+ --pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
9857
+ --pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-split__panel--Position);
9858
+ --pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-split__panel--Top);
9859
+ --pf-c-sidebar__panel--BoxShadow: none;
9860
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-split--FlexBasis);
9861
+ --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-split--m-panel-right__panel--Order);
10003
9862
  }
10004
9863
 
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);
9864
+ .pf-c-sidebar__main {
10065
9865
  display: flex;
9866
+ flex-direction: var(--pf-c-sidebar__main--FlexDirection);
9867
+ align-items: var(--pf-c-sidebar__main--AlignItems);
10066
9868
  }
10067
9869
 
10068
- .pf-c-jump-links.pf-m-center {
10069
- justify-content: center;
9870
+ .pf-c-sidebar__panel {
9871
+ position: var(--pf-c-sidebar__panel--Position);
9872
+ top: var(--pf-c-sidebar__panel--Top);
9873
+ z-index: var(--pf-c-sidebar__panel--ZIndex);
9874
+ flex-shrink: 0;
9875
+ flex-basis: var(--pf-c-sidebar__panel--FlexBasis);
9876
+ order: var(--pf-c-sidebar__panel--Order);
9877
+ background-color: var(--pf-c-sidebar__panel--BackgroundColor);
9878
+ box-shadow: var(--pf-c-sidebar__panel--BoxShadow);
10070
9879
  }
10071
9880
 
10072
- .pf-c-jump-links.pf-m-center .pf-c-jump-links__main {
10073
- align-items: center;
9881
+ .pf-c-sidebar__panel.pf-m-sticky {
9882
+ --pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--m-sticky--Position);
9883
+ --pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--m-sticky--Top);
10074
9884
  }
10075
9885
 
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;
9886
+ .pf-c-sidebar__panel.pf-m-static {
9887
+ --pf-c-sidebar__panel--Position: static;
9888
+ --pf-c-sidebar__panel--Top: auto;
10087
9889
  }
10088
9890
 
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;
9891
+ .pf-c-sidebar__content {
9892
+ flex-grow: 1;
9893
+ background-color: var(--pf-c-sidebar__content--BackgroundColor);
10096
9894
  }
10097
9895
 
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;
9896
+ .pf-c-sidebar__content.pf-m-no-background {
9897
+ --pf-c-sidebar__content--BackgroundColor: transparent;
10105
9898
  }
10106
9899
 
10107
- @media (min-width: 576px) {
10108
- .pf-c-jump-links.pf-m-expandable-on-sm {
10109
- --pf-c-jump-links__list--Display: none;
10110
- --pf-c-jump-links__list--Visibility: hidden;
10111
- --pf-c-jump-links__toggle--Display: block;
10112
- --pf-c-jump-links__toggle--Visibility: visible;
10113
- --pf-c-jump-links__label--Display: none;
10114
- --pf-c-jump-links__label--Visibility: hidden;
10115
- }
9900
+ .pf-c-sidebar.pf-m-no-background,
9901
+ .pf-c-sidebar__panel.pf-m-no-background,
9902
+ .pf-c-sidebar__content.pf-m-no-background {
9903
+ background-color: transparent;
9904
+ }
10116
9905
 
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;
9906
+ .pf-c-sidebar__panel.pf-m-width-default {
9907
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9908
+ }
9909
+
9910
+ .pf-c-sidebar__panel.pf-m-width-25 {
9911
+ --pf-c-sidebar__panel--FlexBasis: 25%;
9912
+ }
9913
+
9914
+ .pf-c-sidebar__panel.pf-m-width-33 {
9915
+ --pf-c-sidebar__panel--FlexBasis: 33%;
9916
+ }
9917
+
9918
+ .pf-c-sidebar__panel.pf-m-width-50 {
9919
+ --pf-c-sidebar__panel--FlexBasis: 50%;
9920
+ }
9921
+
9922
+ .pf-c-sidebar__panel.pf-m-width-66 {
9923
+ --pf-c-sidebar__panel--FlexBasis: 66%;
9924
+ }
9925
+
9926
+ .pf-c-sidebar__panel.pf-m-width-75 {
9927
+ --pf-c-sidebar__panel--FlexBasis: 75%;
9928
+ }
9929
+
9930
+ .pf-c-sidebar__panel.pf-m-width-100 {
9931
+ --pf-c-sidebar__panel--FlexBasis: 100%;
9932
+ }
9933
+
9934
+ @media (min-width: 576px) {
9935
+ .pf-c-sidebar__panel.pf-m-width-default-on-sm {
9936
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9937
+ }
9938
+
9939
+ .pf-c-sidebar__panel.pf-m-width-25-on-sm {
9940
+ --pf-c-sidebar__panel--FlexBasis: 25%;
9941
+ }
9942
+
9943
+ .pf-c-sidebar__panel.pf-m-width-33-on-sm {
9944
+ --pf-c-sidebar__panel--FlexBasis: 33%;
9945
+ }
9946
+
9947
+ .pf-c-sidebar__panel.pf-m-width-50-on-sm {
9948
+ --pf-c-sidebar__panel--FlexBasis: 50%;
9949
+ }
9950
+
9951
+ .pf-c-sidebar__panel.pf-m-width-66-on-sm {
9952
+ --pf-c-sidebar__panel--FlexBasis: 66%;
9953
+ }
9954
+
9955
+ .pf-c-sidebar__panel.pf-m-width-75-on-sm {
9956
+ --pf-c-sidebar__panel--FlexBasis: 75%;
9957
+ }
9958
+
9959
+ .pf-c-sidebar__panel.pf-m-width-100-on-sm {
9960
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10124
9961
  }
10125
9962
  }
10126
9963
  @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;
9964
+ .pf-c-sidebar__panel.pf-m-width-default-on-md {
9965
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10134
9966
  }
10135
9967
 
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;
9968
+ .pf-c-sidebar__panel.pf-m-width-25-on-md {
9969
+ --pf-c-sidebar__panel--FlexBasis: 25%;
9970
+ }
9971
+
9972
+ .pf-c-sidebar__panel.pf-m-width-33-on-md {
9973
+ --pf-c-sidebar__panel--FlexBasis: 33%;
9974
+ }
9975
+
9976
+ .pf-c-sidebar__panel.pf-m-width-50-on-md {
9977
+ --pf-c-sidebar__panel--FlexBasis: 50%;
9978
+ }
9979
+
9980
+ .pf-c-sidebar__panel.pf-m-width-66-on-md {
9981
+ --pf-c-sidebar__panel--FlexBasis: 66%;
9982
+ }
9983
+
9984
+ .pf-c-sidebar__panel.pf-m-width-75-on-md {
9985
+ --pf-c-sidebar__panel--FlexBasis: 75%;
9986
+ }
9987
+
9988
+ .pf-c-sidebar__panel.pf-m-width-100-on-md {
9989
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10143
9990
  }
10144
9991
  }
10145
9992
  @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;
9993
+ .pf-c-sidebar__panel.pf-m-width-default-on-lg {
9994
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10153
9995
  }
10154
9996
 
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;
9997
+ .pf-c-sidebar__panel.pf-m-width-25-on-lg {
9998
+ --pf-c-sidebar__panel--FlexBasis: 25%;
9999
+ }
10000
+
10001
+ .pf-c-sidebar__panel.pf-m-width-33-on-lg {
10002
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10003
+ }
10004
+
10005
+ .pf-c-sidebar__panel.pf-m-width-50-on-lg {
10006
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10007
+ }
10008
+
10009
+ .pf-c-sidebar__panel.pf-m-width-66-on-lg {
10010
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10011
+ }
10012
+
10013
+ .pf-c-sidebar__panel.pf-m-width-75-on-lg {
10014
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10015
+ }
10016
+
10017
+ .pf-c-sidebar__panel.pf-m-width-100-on-lg {
10018
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10162
10019
  }
10163
10020
  }
10164
10021
  @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;
10022
+ .pf-c-sidebar__panel.pf-m-width-default-on-xl {
10023
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10172
10024
  }
10173
10025
 
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;
10026
+ .pf-c-sidebar__panel.pf-m-width-25-on-xl {
10027
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10181
10028
  }
10182
- }
10183
- @media (min-width: 1450px) {
10184
- .pf-c-jump-links.pf-m-expandable-on-2xl {
10185
- --pf-c-jump-links__list--Display: none;
10186
- --pf-c-jump-links__list--Visibility: hidden;
10187
- --pf-c-jump-links__toggle--Display: block;
10188
- --pf-c-jump-links__toggle--Visibility: visible;
10189
- --pf-c-jump-links__label--Display: none;
10190
- --pf-c-jump-links__label--Visibility: hidden;
10029
+
10030
+ .pf-c-sidebar__panel.pf-m-width-33-on-xl {
10031
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10191
10032
  }
10192
10033
 
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;
10034
+ .pf-c-sidebar__panel.pf-m-width-50-on-xl {
10035
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10200
10036
  }
10201
- }
10202
- .pf-c-jump-links.pf-m-expanded {
10203
- --pf-c-jump-links__list--Display: flex;
10204
- --pf-c-jump-links__list--Visibility: visible;
10205
- --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links--m-expanded__toggle--MarginBottom);
10206
- --pf-c-jump-links__toggle-icon--Rotate: var(--pf-c-jump-links--m-expanded__toggle-icon--Rotate);
10207
- --pf-c-jump-links__toggle-icon--Color: var(--pf-c-jump-links--m-expanded__toggle-icon--Color);
10208
- }
10209
10037
 
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);
10219
- }
10038
+ .pf-c-sidebar__panel.pf-m-width-66-on-xl {
10039
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10040
+ }
10220
10041
 
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);
10231
- }
10042
+ .pf-c-sidebar__panel.pf-m-width-75-on-xl {
10043
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10044
+ }
10232
10045
 
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);
10046
+ .pf-c-sidebar__panel.pf-m-width-100-on-xl {
10047
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10048
+ }
10240
10049
  }
10050
+ @media (min-width: 1450px) {
10051
+ .pf-c-sidebar__panel.pf-m-width-default-on-2xl {
10052
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10053
+ }
10241
10054
 
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);
10252
- }
10055
+ .pf-c-sidebar__panel.pf-m-width-25-on-2xl {
10056
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10057
+ }
10253
10058
 
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);
10256
- }
10059
+ .pf-c-sidebar__panel.pf-m-width-33-on-2xl {
10060
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10061
+ }
10257
10062
 
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);
10260
- }
10063
+ .pf-c-sidebar__panel.pf-m-width-50-on-2xl {
10064
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10065
+ }
10261
10066
 
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);
10067
+ .pf-c-sidebar__panel.pf-m-width-66-on-2xl {
10068
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10069
+ }
10070
+
10071
+ .pf-c-sidebar__panel.pf-m-width-75-on-2xl {
10072
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10073
+ }
10074
+
10075
+ .pf-c-sidebar__panel.pf-m-width-100-on-2xl {
10076
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10077
+ }
10078
+ }
10079
+ .pf-c-label {
10080
+ --pf-c-label--PaddingTop: var(--pf-global--spacer--xs);
10081
+ --pf-c-label--PaddingRight: var(--pf-global--spacer--sm);
10082
+ --pf-c-label--PaddingBottom: var(--pf-global--spacer--xs);
10083
+ --pf-c-label--PaddingLeft: var(--pf-global--spacer--sm);
10084
+ --pf-c-label--BorderRadius: var(--pf-global--BorderRadius--lg);
10085
+ --pf-c-label--BackgroundColor: var(--pf-global--palette--black-150);
10086
+ --pf-c-label--Color: var(--pf-global--Color--100);
10087
+ --pf-c-label--FontSize: var(--pf-global--FontSize--sm);
10088
+ --pf-c-label__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10089
+ --pf-c-label__content--before--BorderColor: var(--pf-global--BorderColor--100);
10090
+ --pf-c-label--m-outline--BackgroundColor: var(--pf-global--BackgroundColor--100);
10091
+ --pf-c-label--m-outline__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10092
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-global--BorderColor--100);
10093
+ --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
10094
+ --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
10095
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--200);
10096
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--200);
10097
+ --pf-c-label--m-outline__content--link--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
10098
+ --pf-c-label--m-outline__content--link--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
10099
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10100
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10101
+ --pf-c-label--m-blue--BackgroundColor: var(--pf-global--palette--blue-50);
10102
+ --pf-c-label--m-blue__icon--Color: var(--pf-global--primary-color--100);
10103
+ --pf-c-label--m-blue__content--Color: var(--pf-global--info-color--200);
10104
+ --pf-c-label--m-blue__content--before--BorderColor: var(--pf-global--palette--blue-100);
10105
+ --pf-c-label--m-blue__content--link--hover--before--BorderColor: var(--pf-global--primary-color--100);
10106
+ --pf-c-label--m-blue__content--link--focus--before--BorderColor: var(--pf-global--primary-color--100);
10107
+ --pf-c-label--m-outline--m-blue__content--Color: var(--pf-global--primary-color--100);
10108
+ --pf-c-label--m-outline--m-blue__content--before--BorderColor: var(--pf-global--BorderColor--100);
10109
+ --pf-c-label--m-outline--m-blue__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10110
+ --pf-c-label--m-outline--m-blue__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10111
+ --pf-c-label--m-green--BackgroundColor: var(--pf-global--palette--green-50);
10112
+ --pf-c-label--m-green__icon--Color: var(--pf-global--success-color--100);
10113
+ --pf-c-label--m-green__content--Color: var(--pf-global--success-color--200);
10114
+ --pf-c-label--m-green__content--before--BorderColor: var(--pf-global--palette--green-100);
10115
+ --pf-c-label--m-green__content--link--hover--before--BorderColor: var(--pf-global--success-color--100);
10116
+ --pf-c-label--m-green__content--link--focus--before--BorderColor: var(--pf-global--success-color--100);
10117
+ --pf-c-label--m-outline--m-green__content--Color: var(--pf-global--success-color--100);
10118
+ --pf-c-label--m-outline--m-green__content--before--BorderColor: var(--pf-global--BorderColor--100);
10119
+ --pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10120
+ --pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10121
+ --pf-c-label--m-orange--BackgroundColor: var(--pf-global--palette--orange-50);
10122
+ --pf-c-label--m-orange__icon--Color: var(--pf-global--palette--orange-300);
10123
+ --pf-c-label--m-orange__content--Color: var(--pf-global--palette--orange-700);
10124
+ --pf-c-label--m-orange__content--before--BorderColor: var(--pf-global--palette--orange-100);
10125
+ --pf-c-label--m-orange__content--link--hover--before--BorderColor: var(--pf-global--palette--orange-300);
10126
+ --pf-c-label--m-orange__content--link--focus--before--BorderColor: var(--pf-global--palette--orange-300);
10127
+ --pf-c-label--m-outline--m-orange__content--Color: var(--pf-global--palette--orange-500);
10128
+ --pf-c-label--m-outline--m-orange__content--before--BorderColor: var(--pf-global--BorderColor--100);
10129
+ --pf-c-label--m-outline--m-orange__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10130
+ --pf-c-label--m-outline--m-orange__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10131
+ --pf-c-label--m-red--BackgroundColor: var(--pf-global--palette--red-50);
10132
+ --pf-c-label--m-red__icon--Color: var(--pf-global--danger-color--100);
10133
+ --pf-c-label--m-red__content--Color: var(--pf-global--palette--red-300);
10134
+ --pf-c-label--m-red__content--before--BorderColor: var(--pf-global--palette--red-100);
10135
+ --pf-c-label--m-red__content--link--hover--before--BorderColor: var(--pf-global--danger-color--100);
10136
+ --pf-c-label--m-red__content--link--focus--before--BorderColor: var(--pf-global--danger-color--100);
10137
+ --pf-c-label--m-outline--m-red__content--Color: var(--pf-global--danger-color--100);
10138
+ --pf-c-label--m-outline--m-red__content--before--BorderColor: var(--pf-global--BorderColor--100);
10139
+ --pf-c-label--m-outline--m-red__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10140
+ --pf-c-label--m-outline--m-red__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10141
+ --pf-c-label--m-purple--BackgroundColor: var(--pf-global--palette--purple-50);
10142
+ --pf-c-label--m-purple__icon--Color: var(--pf-global--palette--purple-500);
10143
+ --pf-c-label--m-purple__content--Color: var(--pf-global--palette--purple-700);
10144
+ --pf-c-label--m-purple__content--before--BorderColor: var(--pf-global--palette--purple-100);
10145
+ --pf-c-label--m-purple__content--link--hover--before--BorderColor: var(--pf-global--palette--purple-500);
10146
+ --pf-c-label--m-purple__content--link--focus--before--BorderColor: var(--pf-global--palette--purple-500);
10147
+ --pf-c-label--m-outline--m-purple__content--Color: var(--pf-global--palette--purple-500);
10148
+ --pf-c-label--m-outline--m-purple__content--before--BorderColor: var(--pf-global--BorderColor--100);
10149
+ --pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10150
+ --pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10151
+ --pf-c-label--m-cyan--BackgroundColor: var(--pf-global--palette--cyan-50);
10152
+ --pf-c-label--m-cyan__icon--Color: var(--pf-global--default-color--200);
10153
+ --pf-c-label--m-cyan__content--Color: var(--pf-global--default-color--300);
10154
+ --pf-c-label--m-cyan__content--before--BorderColor: var(--pf-global--palette--cyan-100);
10155
+ --pf-c-label--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--default-color--200);
10156
+ --pf-c-label--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--default-color--200);
10157
+ --pf-c-label--m-outline--m-cyan__content--Color: var(--pf-global--palette--cyan-400);
10158
+ --pf-c-label--m-outline--m-cyan__content--before--BorderColor: var(--pf-global--BorderColor--100);
10159
+ --pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10160
+ --pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10161
+ --pf-c-label--m-gold--BackgroundColor: var(--pf-global--palette--gold-50);
10162
+ --pf-c-label--m-gold__icon--Color: var(--pf-global--palette--gold-400);
10163
+ --pf-c-label--m-gold__content--Color: var(--pf-global--palette--gold-700);
10164
+ --pf-c-label--m-gold__content--before--BorderColor: var(--pf-global--palette--gold-100);
10165
+ --pf-c-label--m-gold__content--link--hover--before--BorderColor: var(--pf-global--palette--gold-300);
10166
+ --pf-c-label--m-gold__content--link--focus--before--BorderColor: var(--pf-global--palette--gold-300);
10167
+ --pf-c-label--m-outline--m-gold__content--Color: var(--pf-global--palette--gold-600);
10168
+ --pf-c-label--m-outline--m-gold__content--before--BorderColor: var(--pf-global--BorderColor--100);
10169
+ --pf-c-label--m-outline--m-gold__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10170
+ --pf-c-label--m-outline--m-gold__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10171
+ --pf-c-label--m-overflow__content--Color: var(--pf-global--link--Color);
10172
+ --pf-c-label--m-overflow__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
10173
+ --pf-c-label--m-overflow__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10174
+ --pf-c-label--m-overflow__content--before--BorderColor: var(--pf-global--BorderColor--300);
10175
+ --pf-c-label--m-overflow__content--link--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
10176
+ --pf-c-label--m-overflow__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--300);
10177
+ --pf-c-label--m-overflow__content--link--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
10178
+ --pf-c-label--m-overflow__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--300);
10179
+ --pf-c-label--m-compact--PaddingTop: 0;
10180
+ --pf-c-label--m-compact--PaddingRight: var(--pf-global--spacer--sm);
10181
+ --pf-c-label--m-compact--PaddingBottom: 0;
10182
+ --pf-c-label--m-compact--PaddingLeft: var(--pf-global--spacer--sm);
10183
+ --pf-c-label--m-compact--FontSize: var(--pf-global--FontSize--xs);
10184
+ --pf-c-label--m-compact--m-editable--TextDecorationOffset: 0.0625rem;
10185
+ --pf-c-label__content--Color: var(--pf-global--Color--100);
10186
+ --pf-c-label__content--MaxWidth: 100%;
10187
+ --pf-c-label--m-outline__content--Color: var(--pf-global--Color--100);
10188
+ --pf-c-label--m-editable__content--MaxWidth: 16ch;
10189
+ --pf-c-label__text--MaxWidth: 16ch;
10190
+ --pf-c-label__icon--Color: var(--pf-global--Color--100);
10191
+ --pf-c-label__icon--MarginRight: var(--pf-global--spacer--xs);
10192
+ --pf-c-label__c-button--FontSize: var(--pf-global--FontSize--xs);
10193
+ --pf-c-label__c-button--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
10194
+ --pf-c-label__c-button--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
10195
+ --pf-c-label__c-button--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
10196
+ --pf-c-label__c-button--MarginLeft: var(--pf-global--spacer--xs);
10197
+ --pf-c-label__c-button--PaddingTop: var(--pf-global--spacer--xs);
10198
+ --pf-c-label__c-button--PaddingRight: var(--pf-global--spacer--sm);
10199
+ --pf-c-label__c-button--PaddingBottom: var(--pf-global--spacer--xs);
10200
+ --pf-c-label__c-button--PaddingLeft: var(--pf-global--spacer--sm);
10201
+ --pf-c-label--m-editable--Cursor: pointer;
10202
+ --pf-c-label--m-editable--TextDecoration: underline;
10203
+ --pf-c-label--m-editable--TextDecorationStyle: dashed;
10204
+ --pf-c-label--m-editable--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
10205
+ --pf-c-label--m-editable--TextDecorationOffset: 0.25rem;
10206
+ --pf-c-label--m-editable--TextDecorationColor: var(--pf-global--BorderColor--200);
10207
+ --pf-c-label--m-editable--hover--TextDecorationColor: var(--pf-global--Color--100);
10208
+ --pf-c-label--m-editable--focus--TextDecorationColor: var(--pf-global--Color--100);
10209
+ --pf-c-label--m-editable__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10210
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-global--BorderColor--100);
10211
+ --pf-c-label--m-editable__content--hover--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10212
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10213
+ --pf-c-label--m-editable__content--focus--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10214
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10215
+ --pf-c-label--m-editable--m-editable-active--Cursor: auto;
10216
+ --pf-c-label--m-editable--m-editable-active--TextDecoration: none;
10217
+ --pf-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
10218
+ --pf-c-label--m-editable--m-editable-active__content--before--BorderWidth: 0;
10219
+ --pf-c-label--m-editable--m-editable-active__content--before--BorderColor: transparent;
10220
+ position: relative;
10221
+ padding: var(--pf-c-label--PaddingTop) var(--pf-c-label--PaddingRight) var(--pf-c-label--PaddingBottom) var(--pf-c-label--PaddingLeft);
10222
+ font-size: var(--pf-c-label--FontSize);
10223
+ color: var(--pf-c-label--Color);
10224
+ white-space: nowrap;
10225
+ background-color: var(--pf-c-label--BackgroundColor);
10226
+ border: 0;
10227
+ border-radius: var(--pf-c-label--BorderRadius);
10228
+ }
10229
+
10230
+ .pf-c-label.pf-m-compact {
10231
+ --pf-c-label--PaddingTop: var(--pf-c-label--m-compact--PaddingTop);
10232
+ --pf-c-label--PaddingRight: var(--pf-c-label--m-compact--PaddingRight);
10233
+ --pf-c-label--PaddingBottom: var(--pf-c-label--m-compact--PaddingBottom);
10234
+ --pf-c-label--PaddingLeft: var(--pf-c-label--m-compact--PaddingLeft);
10235
+ --pf-c-label--FontSize: var(--pf-c-label--m-compact--FontSize);
10236
+ --pf-c-label--m-editable--TextDecorationOffset: var(--pf-c-label--m-compact--m-editable--TextDecorationOffset);
10237
+ }
10238
+
10239
+ .pf-c-label.pf-m-blue {
10240
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-blue--BackgroundColor);
10241
+ --pf-c-label__icon--Color: var(--pf-c-label--m-blue__icon--Color);
10242
+ --pf-c-label__content--Color: var(--pf-c-label--m-blue__content--Color);
10243
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
10244
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-blue__content--link--hover--before--BorderColor);
10245
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-blue__content--link--focus--before--BorderColor);
10246
+ --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-blue__content--Color);
10247
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--before--BorderColor);
10248
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--link--hover--before--BorderColor);
10249
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--link--focus--before--BorderColor);
10250
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
10251
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
10252
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
10253
+ }
10254
+
10255
+ .pf-c-label.pf-m-green {
10256
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-green--BackgroundColor);
10257
+ --pf-c-label__icon--Color: var(--pf-c-label--m-green__icon--Color);
10258
+ --pf-c-label__content--Color: var(--pf-c-label--m-green__content--Color);
10259
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
10260
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-green__content--link--hover--before--BorderColor);
10261
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-green__content--link--focus--before--BorderColor);
10262
+ --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-green__content--Color);
10263
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--before--BorderColor);
10264
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor);
10265
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor);
10266
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
10267
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
10268
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
10269
+ }
10270
+
10271
+ .pf-c-label.pf-m-orange {
10272
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-orange--BackgroundColor);
10273
+ --pf-c-label__icon--Color: var(--pf-c-label--m-orange__icon--Color);
10274
+ --pf-c-label__content--Color: var(--pf-c-label--m-orange__content--Color);
10275
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
10276
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-orange__content--link--hover--before--BorderColor);
10277
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-orange__content--link--focus--before--BorderColor);
10278
+ --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-orange__content--Color);
10279
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--before--BorderColor);
10280
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--link--hover--before--BorderColor);
10281
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--link--focus--before--BorderColor);
10282
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
10283
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
10284
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
10285
+ }
10286
+
10287
+ .pf-c-label.pf-m-red {
10288
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-red--BackgroundColor);
10289
+ --pf-c-label__icon--Color: var(--pf-c-label--m-red__icon--Color);
10290
+ --pf-c-label__content--Color: var(--pf-c-label--m-red__content--Color);
10291
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
10292
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-red__content--link--hover--before--BorderColor);
10293
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-red__content--link--focus--before--BorderColor);
10294
+ --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-red__content--Color);
10295
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--before--BorderColor);
10296
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--link--hover--before--BorderColor);
10297
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--link--focus--before--BorderColor);
10298
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
10299
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
10300
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
10301
+ }
10302
+
10303
+ .pf-c-label.pf-m-purple {
10304
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-purple--BackgroundColor);
10305
+ --pf-c-label__icon--Color: var(--pf-c-label--m-purple__icon--Color);
10306
+ --pf-c-label__content--Color: var(--pf-c-label--m-purple__content--Color);
10307
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
10308
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-purple__content--link--hover--before--BorderColor);
10309
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-purple__content--link--focus--before--BorderColor);
10310
+ --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-purple__content--Color);
10311
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--before--BorderColor);
10312
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor);
10313
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor);
10314
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
10315
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
10316
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
10317
+ }
10318
+
10319
+ .pf-c-label.pf-m-cyan {
10320
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-cyan--BackgroundColor);
10321
+ --pf-c-label__icon--Color: var(--pf-c-label--m-cyan__icon--Color);
10322
+ --pf-c-label__content--Color: var(--pf-c-label--m-cyan__content--Color);
10323
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
10324
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-cyan__content--link--hover--before--BorderColor);
10325
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-cyan__content--link--focus--before--BorderColor);
10326
+ --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-cyan__content--Color);
10327
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--before--BorderColor);
10328
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor);
10329
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor);
10330
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
10331
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
10332
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
10333
+ }
10334
+
10335
+ .pf-c-label.pf-m-gold {
10336
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-gold--BackgroundColor);
10337
+ --pf-c-label__icon--Color: var(--pf-c-label--m-gold__icon--Color);
10338
+ --pf-c-label__content--Color: var(--pf-c-label--m-gold__content--Color);
10339
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
10340
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-gold__content--link--hover--before--BorderColor);
10341
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-gold__content--link--focus--before--BorderColor);
10342
+ --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-gold__content--Color);
10343
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--before--BorderColor);
10344
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--link--hover--before--BorderColor);
10345
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--link--focus--before--BorderColor);
10346
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
10347
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
10348
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
10349
+ }
10350
+
10351
+ .pf-c-label.pf-m-outline {
10352
+ --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color);
10353
+ --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--before--BorderWidth);
10354
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
10355
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-outline--BackgroundColor);
10356
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
10357
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
10358
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
10359
+ }
10360
+
10361
+ .pf-c-label.pf-m-overflow:hover,
10362
+ .pf-c-label.pf-m-add:hover, .pf-c-label.pf-m-outline a.pf-c-label__content:hover,
10363
+ .pf-c-label.pf-m-outline button.pf-c-label__content:hover {
10364
+ --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--link--hover--before--BorderWidth);
10365
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--link--hover--before--BorderColor);
10366
+ }
10367
+
10368
+ .pf-c-label.pf-m-overflow:focus,
10369
+ .pf-c-label.pf-m-add:focus, .pf-c-label.pf-m-outline a.pf-c-label__content:focus,
10370
+ .pf-c-label.pf-m-outline button.pf-c-label__content:focus {
10371
+ --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--link--focus--before--BorderWidth);
10372
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--link--focus--before--BorderColor);
10373
+ }
10374
+
10375
+ .pf-c-label.pf-m-editable {
10376
+ text-decoration: var(--pf-c-label--m-editable--TextDecoration);
10377
+ cursor: var(--pf-c-label--m-editable--Cursor);
10378
+ text-decoration-style: var(--pf-c-label--m-editable--TextDecorationStyle);
10379
+ text-decoration-thickness: var(--pf-c-label--m-editable--TextDecorationThickness);
10380
+ text-underline-offset: var(--pf-c-label--m-editable--TextDecorationOffset);
10381
+ text-decoration-color: var(--pf-c-label--m-editable--TextDecorationColor);
10382
+ --pf-c-label__content--MaxWidth: var(--pf-c-label--m-editable__content--MaxWidth);
10383
+ --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
10384
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-editable__content--before--BorderColor);
10385
+ --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-c-label--m-editable__content--hover--before--BorderWidth);
10386
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-editable__content--hover--before--BorderColor);
10387
+ --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-c-label--m-editable__content--focus--before--BorderWidth);
10388
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-editable__content--focus--before--BorderColor);
10389
+ --pf-c-label--m-outline__content--link--hover--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
10390
+ --pf-c-label--m-outline__content--link--focus--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
10273
10391
  }
10274
10392
 
10275
- .pf-c-jump-links__item {
10276
- --pf-c-jump-links__list--before--BorderColor: transparent;
10393
+ .pf-c-label.pf-m-editable:hover {
10394
+ --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--hover--TextDecorationColor);
10277
10395
  }
10278
10396
 
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);
10397
+ .pf-c-label.pf-m-editable:focus {
10398
+ --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--focus--TextDecorationColor);
10284
10399
  }
10285
10400
 
10286
- .pf-c-jump-links__link-text {
10287
- color: var(--pf-c-jump-links__link-text--Color);
10401
+ .pf-c-label.pf-m-editable-active {
10402
+ --pf-c-label--m-editable--Cursor: var(--pf-c-label--m-editable--m-editable-active--Cursor);
10403
+ --pf-c-label--m-editable--TextDecoration: var(--pf-c-label--m-editable--m-editable-active--TextDecoration);
10404
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-editable--m-editable-active--BackgroundColor);
10288
10405
  }
10289
10406
 
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);
10407
+ .pf-c-label.pf-m-editable-active .pf-c-button {
10408
+ visibility: hidden;
10294
10409
  }
10295
10410
 
10296
- .pf-c-jump-links__main {
10297
- display: flex;
10298
- flex-direction: column;
10411
+ .pf-c-label .pf-c-button {
10412
+ --pf-c-button--FontSize: var(--pf-c-label__c-button--FontSize);
10413
+ --pf-c-button--PaddingTop: var(--pf-c-label__c-button--PaddingTop);
10414
+ --pf-c-button--PaddingRight: var(--pf-c-label__c-button--PaddingRight);
10415
+ --pf-c-button--PaddingBottom: var(--pf-c-label__c-button--PaddingBottom);
10416
+ --pf-c-button--PaddingLeft: var(--pf-c-label__c-button--PaddingLeft);
10417
+ margin-top: var(--pf-c-label__c-button--MarginTop);
10418
+ margin-right: var(--pf-c-label__c-button--MarginRight);
10419
+ margin-bottom: var(--pf-c-label__c-button--MarginBottom);
10420
+ margin-left: var(--pf-c-label__c-button--MarginLeft);
10299
10421
  }
10300
10422
 
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);
10423
+ .pf-c-label.pf-m-overflow, .pf-c-label.pf-m-add {
10424
+ --pf-c-label__content--Color: var(--pf-c-label--m-overflow__content--Color);
10425
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-overflow__content--BackgroundColor);
10426
+ --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-overflow__content--before--BorderWidth);
10427
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-overflow__content--before--BorderColor);
10428
+ --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-c-label--m-overflow__content--link--hover--before--BorderWidth);
10429
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-overflow__content--link--hover--before--BorderColor);
10430
+ --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-c-label--m-overflow__content--link--focus--before--BorderWidth);
10431
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-overflow__content--link--focus--before--BorderColor);
10307
10432
  }
10308
10433
 
10309
- .pf-c-jump-links__toggle .pf-c-button {
10310
- display: flex;
10434
+ .pf-c-label,
10435
+ .pf-c-label__content {
10436
+ display: inline-flex;
10311
10437
  align-items: center;
10312
10438
  }
10313
10439
 
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));
10319
- }
10320
-
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);
10324
- }
10325
-
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%;
10368
- }
10369
-
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;
10440
+ .pf-c-label__text {
10441
+ overflow: hidden;
10442
+ text-overflow: ellipsis;
10443
+ white-space: nowrap;
10444
+ max-width: var(--pf-c-label__text--MaxWidth);
10388
10445
  }
10389
10446
 
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);
10447
+ .pf-c-label__content {
10448
+ overflow: hidden;
10449
+ text-overflow: ellipsis;
10450
+ white-space: nowrap;
10451
+ max-width: var(--pf-c-label__content--MaxWidth);
10452
+ color: var(--pf-c-label__content--Color);
10453
+ border-width: 0;
10393
10454
  }
10394
10455
 
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);
10456
+ .pf-c-label__content::before {
10457
+ position: absolute;
10458
+ top: 0;
10459
+ right: 0;
10460
+ bottom: 0;
10461
+ left: 0;
10462
+ pointer-events: none;
10463
+ content: "";
10464
+ border: var(--pf-c-label__content--before--BorderWidth) solid var(--pf-c-label__content--before--BorderColor);
10465
+ border-radius: var(--pf-c-label--BorderRadius);
10403
10466
  }
10404
10467
 
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);
10468
+ a.pf-c-label__content,
10469
+ button.pf-c-label__content {
10470
+ cursor: pointer;
10471
+ border: none;
10420
10472
  }
10421
10473
 
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);
10474
+ a.pf-c-label__content, a.pf-c-label__content:hover, a.pf-c-label__content:focus,
10475
+ button.pf-c-label__content,
10476
+ button.pf-c-label__content:hover,
10477
+ button.pf-c-label__content:focus {
10478
+ text-decoration: none;
10432
10479
  }
10433
10480
 
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);
10481
+ a.pf-c-label__content:hover,
10482
+ button.pf-c-label__content:hover {
10483
+ --pf-c-label__content--before--BorderWidth: var(--pf-c-label__content--link--hover--before--BorderWidth);
10484
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label__content--link--hover--before--BorderColor);
10438
10485
  }
10439
10486
 
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);
10487
+ a.pf-c-label__content:focus,
10488
+ button.pf-c-label__content:focus {
10489
+ --pf-c-label__content--before--BorderWidth: var(--pf-c-label__content--link--focus--before--BorderWidth);
10490
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label__content--link--focus--before--BorderColor);
10449
10491
  }
10450
10492
 
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);
10493
+ .pf-c-label__icon {
10494
+ margin-right: var(--pf-c-label__icon--MarginRight);
10495
+ color: var(--pf-c-label__icon--Color);
10454
10496
  }
10455
10497
 
10456
- .pf-c-sidebar__panel.pf-m-static {
10457
- --pf-c-sidebar__panel--Position: static;
10458
- --pf-c-sidebar__panel--Top: auto;
10498
+ :where(.pf-theme-dark) .pf-c-label {
10499
+ --pf-c-label--BackgroundColor: var(--pf-global--BackgroundColor--300);
10500
+ --pf-c-label--m-blue--BackgroundColor: var(--pf-global--BackgroundColor--300);
10501
+ --pf-c-label--m-green--BackgroundColor: var(--pf-global--BackgroundColor--300);
10502
+ --pf-c-label--m-orange--BackgroundColor: var(--pf-global--BackgroundColor--300);
10503
+ --pf-c-label--m-red--BackgroundColor: var(--pf-global--BackgroundColor--300);
10504
+ --pf-c-label--m-purple--BackgroundColor: var(--pf-global--BackgroundColor--300);
10505
+ --pf-c-label--m-cyan--BackgroundColor: var(--pf-global--BackgroundColor--300);
10506
+ --pf-c-label__content--before--BorderWidth: 0;
10507
+ --pf-c-label__content--before--BorderColor: transparent;
10508
+ --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10509
+ --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10510
+ --pf-c-label--m-blue__content--Color: var(--pf-global--primary-color--100);
10511
+ --pf-c-label--m-outline--m-blue__content--before--BorderColor: var(--pf-global--active-color--200);
10512
+ --pf-c-label--m-outline--m-blue__content--link--hover--before--BorderColor: var(--pf-global--active-color--200);
10513
+ --pf-c-label--m-outline--m-blue__content--link--focus--before--BorderColor: var(--pf-global--active-color--200);
10514
+ --pf-c-label--m-green__content--Color: var(--pf-global--success-color--100);
10515
+ --pf-c-label--m-outline--m-green__content--before--BorderColor: var(--pf-global--palette--green-100);
10516
+ --pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor: var(--pf-global--palette--green-100);
10517
+ --pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor: var(--pf-global--palette--green-100);
10518
+ --pf-c-label--m-orange__content--Color: var(--pf-global--palette--orange-300);
10519
+ --pf-c-label--m-outline--m-orange__content--Color: var(--pf-global--palette--orange-300);
10520
+ --pf-c-label--m-outline--m-orange__content--before--BorderColor: var(--pf-global--palette--gold-100);
10521
+ --pf-c-label--m-outline--m-orange__content--link--hover--before--BorderColor: var(--pf-global--palette--gold-100);
10522
+ --pf-c-label--m-outline--m-orange__content--link--focus--before--BorderColor: var(--pf-global--palette--gold-100);
10523
+ --pf-c-label--m-red__content--Color: var(--pf-global--danger-color--100);
10524
+ --pf-c-label--m-outline--m-red__content--before--BorderColor: var(--pf-global--danger-color--100);
10525
+ --pf-c-label--m-outline--m-red__content--link--hover--before--BorderColor: var(--pf-global--danger-color--100);
10526
+ --pf-c-label--m-outline--m-red__content--link--focus--before--BorderColor: var(--pf-global--danger-color--100);
10527
+ --pf-c-label--m-purple__content--Color: var(--pf-global--palette--purple-300);
10528
+ --pf-c-label--m-purple__icon--Color: var(--pf-global--palette--purple-300);
10529
+ --pf-c-label--m-purple__content--link--hover--before--BorderColor: var(--pf-global--palette--purple-300);
10530
+ --pf-c-label--m-purple__content--link--focus--before--BorderColor: var(--pf-global--palette--purple-300);
10531
+ --pf-c-label--m-outline--m-purple__content--before--BorderColor: var(--pf-global--palette--purple-100);
10532
+ --pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor: var(--pf-global--palette--purple-100);
10533
+ --pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor: var(--pf-global--palette--purple-100);
10534
+ --pf-c-label--m-outline--m-purple__content--Color: var(--pf-global--palette--purple-300);
10535
+ --pf-c-label--m-cyan__content--Color: var(--pf-global--default-color--200);
10536
+ --pf-c-label--m-outline--m-cyan__content--Color: var(--pf-global--default-color--200);
10537
+ --pf-c-label--m-outline--m-cyan__content--before--BorderColor: var(--pf-global--palette--cyan-100);
10538
+ --pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--palette--cyan-100);
10539
+ --pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--palette--cyan-100);
10459
10540
  }
10460
10541
 
10461
- .pf-c-sidebar__content {
10462
- flex-grow: 1;
10463
- background-color: var(--pf-c-sidebar__content--BackgroundColor);
10542
+ .pf-c-label-group {
10543
+ --pf-c-label-group__list--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
10544
+ --pf-c-label-group__list--MarginRight: calc(var(--pf-global--spacer--xs) * -1);
10545
+ --pf-c-label-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
10546
+ --pf-c-label-group--m-category--PaddingRight: var(--pf-global--spacer--xs);
10547
+ --pf-c-label-group--m-category--PaddingBottom: var(--pf-global--spacer--xs);
10548
+ --pf-c-label-group--m-category--PaddingLeft: var(--pf-global--spacer--sm);
10549
+ --pf-c-label-group--m-vertical--m-category--PaddingRight: var(--pf-global--spacer--sm);
10550
+ --pf-c-label-group--m-category--BorderRadius: var(--pf-global--BorderRadius--sm);
10551
+ --pf-c-label-group--m-category--BorderWidth: var(--pf-global--BorderWidth--sm);
10552
+ --pf-c-label-group--m-category--BorderColor: var(--pf-global--BorderColor--300);
10553
+ --pf-c-label-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--100);
10554
+ --pf-c-label-group__label--MarginRight: var(--pf-global--spacer--sm);
10555
+ --pf-c-label-group__label--MarginBottom: 0;
10556
+ --pf-c-label-group--m-vertical__label--MarginBottom: var(--pf-global--spacer--sm);
10557
+ --pf-c-label-group__label--FontSize: var(--pf-global--FontSize--sm);
10558
+ --pf-c-label-group__label--MaxWidth: 18ch;
10559
+ --pf-c-label-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
10560
+ --pf-c-label-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
10561
+ --pf-c-label-group--m-vertical__close--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
10562
+ --pf-c-label-group--m-vertical__close--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
10563
+ --pf-c-label-group--m-vertical__close--MarginLeft: var(--pf-global--spacer--sm);
10564
+ --pf-c-label-group--m-vertical__close--c-button--PaddingRight: var(--pf-global--spacer--sm);
10565
+ --pf-c-label-group--m-vertical__close--c-button--PaddingLeft: var(--pf-global--spacer--sm);
10566
+ --pf-c-label-group__list-item--MarginRight: var(--pf-global--spacer--xs);
10567
+ --pf-c-label-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
10568
+ --pf-c-label-group__textarea--MinWidth: 12.5rem;
10569
+ --pf-c-label-group__textarea--PaddingTop: 0.125rem;
10570
+ --pf-c-label-group__textarea--PaddingRight: var(--pf-global--spacer--xs);
10571
+ --pf-c-label-group__textarea--PaddingBottom: 0;
10572
+ --pf-c-label-group__textarea--PaddingLeft: var(--pf-global--spacer--xs);
10573
+ display: inline-flex;
10574
+ align-items: center;
10464
10575
  }
10465
10576
 
10466
- .pf-c-sidebar__content.pf-m-no-background {
10467
- --pf-c-sidebar__content--BackgroundColor: transparent;
10577
+ .pf-c-label-group.pf-m-category {
10578
+ padding-top: var(--pf-c-label-group--m-category--PaddingTop);
10579
+ padding-right: var(--pf-c-label-group--m-category--PaddingRight);
10580
+ padding-bottom: var(--pf-c-label-group--m-category--PaddingBottom);
10581
+ padding-left: var(--pf-c-label-group--m-category--PaddingLeft);
10582
+ background-color: var(--pf-c-label-group--m-category--BackgroundColor);
10583
+ border: var(--pf-c-label-group--m-category--BorderWidth) solid var(--pf-c-label-group--m-category--BorderColor);
10584
+ border-radius: var(--pf-c-label-group--m-category--BorderRadius);
10468
10585
  }
10469
10586
 
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;
10587
+ .pf-c-label-group.pf-m-vertical {
10588
+ --pf-c-label-group__list--MarginRight: 0;
10589
+ --pf-c-label-group__list--MarginBottom: 0;
10590
+ --pf-c-label-group__list-item--MarginRight: 0;
10591
+ --pf-c-label-group__label--MarginRight: 0;
10592
+ --pf-c-label-group__label--MarginBottom: var(--pf-c-label-group--m-vertical__label--MarginBottom);
10593
+ --pf-c-label-group__close--MarginTop: var(--pf-c-label-group--m-vertical__close--MarginTop);
10594
+ --pf-c-label-group__close--MarginLeft: var(--pf-c-label-group--m-vertical__close--MarginLeft);
10595
+ --pf-c-label-group__close--MarginBottom: 0;
10596
+ --pf-c-label-group__close--MarginRight: var(--pf-c-label-group--m-vertical__close--MarginRight);
10597
+ --pf-c-label-group--m-category--PaddingRight: var(--pf-c-label-group--m-vertical--m-category--PaddingRight);
10474
10598
  }
10475
10599
 
10476
- .pf-c-sidebar__panel.pf-m-width-default {
10477
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10600
+ .pf-c-label-group.pf-m-vertical.pf-c-label-group {
10601
+ align-items: flex-start;
10478
10602
  }
10479
10603
 
10480
- .pf-c-sidebar__panel.pf-m-width-25 {
10481
- --pf-c-sidebar__panel--FlexBasis: 25%;
10604
+ .pf-c-label-group.pf-m-vertical .pf-c-label-group__list {
10605
+ flex-direction: column;
10606
+ align-items: flex-start;
10482
10607
  }
10483
10608
 
10484
- .pf-c-sidebar__panel.pf-m-width-33 {
10485
- --pf-c-sidebar__panel--FlexBasis: 33%;
10609
+ .pf-c-label-group.pf-m-vertical .pf-c-label-group__main {
10610
+ flex-direction: column;
10486
10611
  }
10487
10612
 
10488
- .pf-c-sidebar__panel.pf-m-width-50 {
10489
- --pf-c-sidebar__panel--FlexBasis: 50%;
10613
+ .pf-c-label-group.pf-m-vertical .pf-c-label-group__list-item:last-child {
10614
+ --pf-c-label-group__list-item--MarginBottom: 0;
10490
10615
  }
10491
10616
 
10492
- .pf-c-sidebar__panel.pf-m-width-66 {
10493
- --pf-c-sidebar__panel--FlexBasis: 66%;
10617
+ .pf-c-label-group.pf-m-vertical .pf-c-label-group__close .pf-c-button {
10618
+ --pf-c-button--PaddingLeft: var(--pf-c-label-group--m-vertical__close--c-button--PaddingLeft);
10619
+ --pf-c-button--PaddingRight: var(--pf-c-label-group--m-vertical__close--c-button--PaddingRight);
10494
10620
  }
10495
10621
 
10496
- .pf-c-sidebar__panel.pf-m-width-75 {
10497
- --pf-c-sidebar__panel--FlexBasis: 75%;
10622
+ .pf-c-label-group.pf-m-editable,
10623
+ .pf-c-label-group.pf-m-editable .pf-c-label-group__main,
10624
+ .pf-c-label-group.pf-m-editable .pf-c-label-group__list {
10625
+ display: flex;
10498
10626
  }
10499
10627
 
10500
- .pf-c-sidebar__panel.pf-m-width-100 {
10501
- --pf-c-sidebar__panel--FlexBasis: 100%;
10628
+ .pf-c-label-group.pf-m-editable .pf-c-label-group__main,
10629
+ .pf-c-label-group.pf-m-editable .pf-c-label-group__list,
10630
+ .pf-c-label-group.pf-m-editable .pf-c-label-group__list-item.pf-m-textarea,
10631
+ .pf-c-label-group.pf-m-editable .pf-c-label-group__textarea {
10632
+ flex: 1;
10502
10633
  }
10503
10634
 
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
- }
10635
+ .pf-c-label-group__main {
10636
+ display: flex;
10637
+ flex: 1;
10638
+ flex-wrap: wrap;
10639
+ align-items: baseline;
10532
10640
  }
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
10641
 
10558
- .pf-c-sidebar__panel.pf-m-width-100-on-md {
10559
- --pf-c-sidebar__panel--FlexBasis: 100%;
10560
- }
10642
+ .pf-c-label-group__list {
10643
+ display: inline-flex;
10644
+ flex-wrap: wrap;
10645
+ margin-right: var(--pf-c-label-group__list--MarginRight);
10646
+ margin-bottom: var(--pf-c-label-group__list--MarginBottom);
10561
10647
  }
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
10648
 
10587
- .pf-c-sidebar__panel.pf-m-width-100-on-lg {
10588
- --pf-c-sidebar__panel--FlexBasis: 100%;
10589
- }
10649
+ .pf-c-label-group__list-item {
10650
+ display: inline-flex;
10651
+ margin-right: var(--pf-c-label-group__list-item--MarginRight);
10652
+ margin-bottom: var(--pf-c-label-group__list-item--MarginBottom);
10590
10653
  }
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
10654
 
10616
- .pf-c-sidebar__panel.pf-m-width-100-on-xl {
10617
- --pf-c-sidebar__panel--FlexBasis: 100%;
10618
- }
10655
+ .pf-c-label-group__label {
10656
+ overflow: hidden;
10657
+ text-overflow: ellipsis;
10658
+ white-space: nowrap;
10659
+ max-width: var(--pf-c-label-group__label--MaxWidth);
10660
+ margin-right: var(--pf-c-label-group__label--MarginRight);
10661
+ margin-bottom: var(--pf-c-label-group__label--MarginBottom);
10662
+ font-size: var(--pf-c-label-group__label--FontSize);
10619
10663
  }
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
10664
 
10637
- .pf-c-sidebar__panel.pf-m-width-66-on-2xl {
10638
- --pf-c-sidebar__panel--FlexBasis: 66%;
10639
- }
10665
+ .pf-c-label-group__close {
10666
+ margin-top: var(--pf-c-label-group__close--MarginTop);
10667
+ margin-right: var(--pf-c-label-group__close--MarginRight);
10668
+ margin-bottom: var(--pf-c-label-group__close--MarginBottom);
10669
+ margin-left: var(--pf-c-label-group__close--MarginLeft);
10670
+ }
10640
10671
 
10641
- .pf-c-sidebar__panel.pf-m-width-75-on-2xl {
10642
- --pf-c-sidebar__panel--FlexBasis: 75%;
10643
- }
10672
+ .pf-c-label-group__textarea {
10673
+ min-width: var(--pf-c-label-group__textarea--MinWidth);
10674
+ 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);
10675
+ white-space: nowrap;
10676
+ resize: none;
10677
+ border: 0;
10678
+ -ms-overflow-style: none;
10679
+ scrollbar-width: none;
10680
+ }
10644
10681
 
10645
- .pf-c-sidebar__panel.pf-m-width-100-on-2xl {
10646
- --pf-c-sidebar__panel--FlexBasis: 100%;
10647
- }
10682
+ .pf-c-label-group__textarea::-webkit-scrollbar {
10683
+ display: none;
10648
10684
  }
10685
+
10649
10686
  .pf-c-list {
10650
10687
  --pf-c-list--PaddingLeft: var(--pf-global--spacer--lg);
10651
10688
  --pf-c-list--nested--MarginTop: var(--pf-global--spacer--sm);
@@ -15723,32 +15760,6 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
15723
15760
  flex-shrink: 0;
15724
15761
  }
15725
15762
 
15726
- .pf-c-page__main-nav.pf-m-sticky-top,
15727
- .pf-c-page__main-breadcrumb.pf-m-sticky-top,
15728
- .pf-c-page__main-tabs.pf-m-sticky-top,
15729
- .pf-c-page__main-section.pf-m-sticky-top,
15730
- .pf-c-page__main-wizard.pf-m-sticky-top,
15731
- .pf-c-page__main-group.pf-m-sticky-top,
15732
- .pf-c-page__main-subnav.pf-m-sticky-top {
15733
- position: sticky;
15734
- top: 0;
15735
- z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
15736
- box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
15737
- }
15738
-
15739
- .pf-c-page__main-nav.pf-m-sticky-bottom,
15740
- .pf-c-page__main-breadcrumb.pf-m-sticky-bottom,
15741
- .pf-c-page__main-tabs.pf-m-sticky-bottom,
15742
- .pf-c-page__main-section.pf-m-sticky-bottom,
15743
- .pf-c-page__main-wizard.pf-m-sticky-bottom,
15744
- .pf-c-page__main-group.pf-m-sticky-bottom,
15745
- .pf-c-page__main-subnav.pf-m-sticky-bottom {
15746
- position: sticky;
15747
- bottom: 0;
15748
- z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
15749
- box-shadow: var(--pf-c-page--section--m-sticky-bottom--BoxShadow);
15750
- }
15751
-
15752
15763
  .pf-c-page__main-nav.pf-m-overflow-scroll,
15753
15764
  .pf-c-page__main-breadcrumb.pf-m-overflow-scroll,
15754
15765
  .pf-c-page__main-tabs.pf-m-overflow-scroll,
@@ -15783,6 +15794,167 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
15783
15794
  box-shadow: var(--pf-c-page--section--m-shadow-top--BoxShadow);
15784
15795
  }
15785
15796
 
15797
+ .pf-c-page__main-nav.pf-m-sticky-top,
15798
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top,
15799
+ .pf-c-page__main-tabs.pf-m-sticky-top,
15800
+ .pf-c-page__main-section.pf-m-sticky-top,
15801
+ .pf-c-page__main-wizard.pf-m-sticky-top,
15802
+ .pf-c-page__main-group.pf-m-sticky-top,
15803
+ .pf-c-page__main-subnav.pf-m-sticky-top {
15804
+ position: sticky;
15805
+ top: 0;
15806
+ z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
15807
+ box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
15808
+ }
15809
+
15810
+ .pf-c-page__main-nav.pf-m-sticky-bottom,
15811
+ .pf-c-page__main-breadcrumb.pf-m-sticky-bottom,
15812
+ .pf-c-page__main-tabs.pf-m-sticky-bottom,
15813
+ .pf-c-page__main-section.pf-m-sticky-bottom,
15814
+ .pf-c-page__main-wizard.pf-m-sticky-bottom,
15815
+ .pf-c-page__main-group.pf-m-sticky-bottom,
15816
+ .pf-c-page__main-subnav.pf-m-sticky-bottom {
15817
+ position: sticky;
15818
+ bottom: 0;
15819
+ z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
15820
+ box-shadow: var(--pf-c-page--section--m-sticky-bottom--BoxShadow);
15821
+ }
15822
+
15823
+ @media (min-height: 0) {
15824
+ .pf-c-page__main-nav.pf-m-sticky-top-on-sm-height,
15825
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-sm-height,
15826
+ .pf-c-page__main-tabs.pf-m-sticky-top-on-sm-height,
15827
+ .pf-c-page__main-section.pf-m-sticky-top-on-sm-height,
15828
+ .pf-c-page__main-wizard.pf-m-sticky-top-on-sm-height,
15829
+ .pf-c-page__main-group.pf-m-sticky-top-on-sm-height,
15830
+ .pf-c-page__main-subnav.pf-m-sticky-top-on-sm-height {
15831
+ position: sticky;
15832
+ top: 0;
15833
+ z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
15834
+ box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
15835
+ }
15836
+
15837
+ .pf-c-page__main-nav.pf-m-sticky-bottom-on-sm-height,
15838
+ .pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-sm-height,
15839
+ .pf-c-page__main-tabs.pf-m-sticky-bottom-on-sm-height,
15840
+ .pf-c-page__main-section.pf-m-sticky-bottom-on-sm-height,
15841
+ .pf-c-page__main-wizard.pf-m-sticky-bottom-on-sm-height,
15842
+ .pf-c-page__main-group.pf-m-sticky-bottom-on-sm-height,
15843
+ .pf-c-page__main-subnav.pf-m-sticky-bottom-on-sm-height {
15844
+ position: sticky;
15845
+ bottom: 0;
15846
+ z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
15847
+ box-shadow: var(--pf-c-page--section--m-sticky-bottom--BoxShadow);
15848
+ }
15849
+ }
15850
+ @media (min-height: 40rem) {
15851
+ .pf-c-page__main-nav.pf-m-sticky-top-on-md-height,
15852
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-md-height,
15853
+ .pf-c-page__main-tabs.pf-m-sticky-top-on-md-height,
15854
+ .pf-c-page__main-section.pf-m-sticky-top-on-md-height,
15855
+ .pf-c-page__main-wizard.pf-m-sticky-top-on-md-height,
15856
+ .pf-c-page__main-group.pf-m-sticky-top-on-md-height,
15857
+ .pf-c-page__main-subnav.pf-m-sticky-top-on-md-height {
15858
+ position: sticky;
15859
+ top: 0;
15860
+ z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
15861
+ box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
15862
+ }
15863
+
15864
+ .pf-c-page__main-nav.pf-m-sticky-bottom-on-md-height,
15865
+ .pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-md-height,
15866
+ .pf-c-page__main-tabs.pf-m-sticky-bottom-on-md-height,
15867
+ .pf-c-page__main-section.pf-m-sticky-bottom-on-md-height,
15868
+ .pf-c-page__main-wizard.pf-m-sticky-bottom-on-md-height,
15869
+ .pf-c-page__main-group.pf-m-sticky-bottom-on-md-height,
15870
+ .pf-c-page__main-subnav.pf-m-sticky-bottom-on-md-height {
15871
+ position: sticky;
15872
+ bottom: 0;
15873
+ z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
15874
+ box-shadow: var(--pf-c-page--section--m-sticky-bottom--BoxShadow);
15875
+ }
15876
+ }
15877
+ @media (min-height: 48rem) {
15878
+ .pf-c-page__main-nav.pf-m-sticky-top-on-lg-height,
15879
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-lg-height,
15880
+ .pf-c-page__main-tabs.pf-m-sticky-top-on-lg-height,
15881
+ .pf-c-page__main-section.pf-m-sticky-top-on-lg-height,
15882
+ .pf-c-page__main-wizard.pf-m-sticky-top-on-lg-height,
15883
+ .pf-c-page__main-group.pf-m-sticky-top-on-lg-height,
15884
+ .pf-c-page__main-subnav.pf-m-sticky-top-on-lg-height {
15885
+ position: sticky;
15886
+ top: 0;
15887
+ z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
15888
+ box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
15889
+ }
15890
+
15891
+ .pf-c-page__main-nav.pf-m-sticky-bottom-on-lg-height,
15892
+ .pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-lg-height,
15893
+ .pf-c-page__main-tabs.pf-m-sticky-bottom-on-lg-height,
15894
+ .pf-c-page__main-section.pf-m-sticky-bottom-on-lg-height,
15895
+ .pf-c-page__main-wizard.pf-m-sticky-bottom-on-lg-height,
15896
+ .pf-c-page__main-group.pf-m-sticky-bottom-on-lg-height,
15897
+ .pf-c-page__main-subnav.pf-m-sticky-bottom-on-lg-height {
15898
+ position: sticky;
15899
+ bottom: 0;
15900
+ z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
15901
+ box-shadow: var(--pf-c-page--section--m-sticky-bottom--BoxShadow);
15902
+ }
15903
+ }
15904
+ @media (min-height: 60rem) {
15905
+ .pf-c-page__main-nav.pf-m-sticky-top-on-xl-height,
15906
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-xl-height,
15907
+ .pf-c-page__main-tabs.pf-m-sticky-top-on-xl-height,
15908
+ .pf-c-page__main-section.pf-m-sticky-top-on-xl-height,
15909
+ .pf-c-page__main-wizard.pf-m-sticky-top-on-xl-height,
15910
+ .pf-c-page__main-group.pf-m-sticky-top-on-xl-height,
15911
+ .pf-c-page__main-subnav.pf-m-sticky-top-on-xl-height {
15912
+ position: sticky;
15913
+ top: 0;
15914
+ z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
15915
+ box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
15916
+ }
15917
+
15918
+ .pf-c-page__main-nav.pf-m-sticky-bottom-on-xl-height,
15919
+ .pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-xl-height,
15920
+ .pf-c-page__main-tabs.pf-m-sticky-bottom-on-xl-height,
15921
+ .pf-c-page__main-section.pf-m-sticky-bottom-on-xl-height,
15922
+ .pf-c-page__main-wizard.pf-m-sticky-bottom-on-xl-height,
15923
+ .pf-c-page__main-group.pf-m-sticky-bottom-on-xl-height,
15924
+ .pf-c-page__main-subnav.pf-m-sticky-bottom-on-xl-height {
15925
+ position: sticky;
15926
+ bottom: 0;
15927
+ z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
15928
+ box-shadow: var(--pf-c-page--section--m-sticky-bottom--BoxShadow);
15929
+ }
15930
+ }
15931
+ @media (min-height: 80rem) {
15932
+ .pf-c-page__main-nav.pf-m-sticky-top-on-2xl-height,
15933
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-2xl-height,
15934
+ .pf-c-page__main-tabs.pf-m-sticky-top-on-2xl-height,
15935
+ .pf-c-page__main-section.pf-m-sticky-top-on-2xl-height,
15936
+ .pf-c-page__main-wizard.pf-m-sticky-top-on-2xl-height,
15937
+ .pf-c-page__main-group.pf-m-sticky-top-on-2xl-height,
15938
+ .pf-c-page__main-subnav.pf-m-sticky-top-on-2xl-height {
15939
+ position: sticky;
15940
+ top: 0;
15941
+ z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
15942
+ box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
15943
+ }
15944
+
15945
+ .pf-c-page__main-nav.pf-m-sticky-bottom-on-2xl-height,
15946
+ .pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-2xl-height,
15947
+ .pf-c-page__main-tabs.pf-m-sticky-bottom-on-2xl-height,
15948
+ .pf-c-page__main-section.pf-m-sticky-bottom-on-2xl-height,
15949
+ .pf-c-page__main-wizard.pf-m-sticky-bottom-on-2xl-height,
15950
+ .pf-c-page__main-group.pf-m-sticky-bottom-on-2xl-height,
15951
+ .pf-c-page__main-subnav.pf-m-sticky-bottom-on-2xl-height {
15952
+ position: sticky;
15953
+ bottom: 0;
15954
+ z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
15955
+ box-shadow: var(--pf-c-page--section--m-sticky-bottom--BoxShadow);
15956
+ }
15957
+ }
15786
15958
  .pf-c-page__main,
15787
15959
  .pf-c-page__drawer {
15788
15960
  grid-area: main;
@@ -16872,39 +17044,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
16872
17044
  }
16873
17045
 
16874
17046
  .pf-c-progress-stepper {
16875
- --pf-c-progress-stepper--GridAutoFlow: column;
16876
- --pf-c-progress-stepper--GridTemplateRows: auto 1fr;
16877
- --pf-c-progress-stepper--GridTemplateColumns: initial;
16878
17047
  --pf-c-progress-stepper--m-vertical--GridAutoFlow: row;
16879
17048
  --pf-c-progress-stepper--m-vertical--GridTemplateColumns: auto 1fr;
16880
- --pf-c-progress-stepper--m-compact--GridAutoFlow: row;
16881
- --pf-c-progress-stepper--m-compact--GridTemplateColumns: repeat(auto-fill, 1.75rem);
16882
- --pf-c-progress-stepper__step-connector--JustifyContent: start;
16883
- --pf-c-progress-stepper--m-center__step-connector--JustifyContent: center;
16884
- --pf-c-progress-stepper__step-icon--ZIndex: var(--pf-global--ZIndex--xs);
16885
- --pf-c-progress-stepper__step-icon--Width: 1.75rem;
16886
- --pf-c-progress-stepper__step-icon--Height: var(--pf-c-progress-stepper__step-icon--Width);
16887
- --pf-c-progress-stepper__step-icon--FontSize: var(--pf-global--icon--FontSize--md);
16888
- --pf-c-progress-stepper__step-icon--Color: var(--pf-global--Color--100);
16889
- --pf-c-progress-stepper__step-icon--BackgroundColor: var(--pf-global--BackgroundColor--light-200);
16890
- --pf-c-progress-stepper__step-icon--BorderWidth: var(--pf-global--BorderWidth--md);
16891
- --pf-c-progress-stepper__step-icon--BorderColor: var(--pf-global--BorderColor--100);
16892
- --pf-c-progress-stepper--m-compact__step-icon--Width: 1.125rem;
16893
- --pf-c-progress-stepper--m-compact__step-icon--FontSize: var(--pf-global--icon--FontSize--sm);
16894
- --pf-c-progress-stepper__pficon--MarginTop: 3px;
16895
- --pf-c-progress-stepper__fa-exclamation-triangle--MarginTop: -5px;
16896
- --pf-c-progress-stepper--m-compact__pficon--MarginTop: 2px;
16897
- --pf-c-progress-stepper--m-compact__fa-exclamation-triangle--MarginTop: -3px;
16898
- --pf-c-progress-stepper__step-connector--before--Top: calc(var(--pf-c-progress-stepper__step-icon--Height) / 2);
16899
- --pf-c-progress-stepper__step-connector--before--Left: 0;
16900
- --pf-c-progress-stepper__step-connector--before--Width: 100%;
16901
- --pf-c-progress-stepper__step-connector--before--Height: auto;
16902
- --pf-c-progress-stepper__step-connector--before--BorderRightColor: unset;
16903
- --pf-c-progress-stepper__step-connector--before--BorderRightWidth: 0;
16904
- --pf-c-progress-stepper__step-connector--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
16905
- --pf-c-progress-stepper__step-connector--before--BorderBottomColor: var(--pf-global--BorderColor--100);
16906
- --pf-c-progress-stepper__step-connector--before--Transform: translateY(-50%);
16907
- --pf-c-progress-stepper--m-center__step-connector--before--Left: 50%;
16908
17049
  --pf-c-progress-stepper--m-vertical__step-connector--before--Top: 0;
16909
17050
  --pf-c-progress-stepper--m-vertical__step-connector--before--Left: calc(var(--pf-c-progress-stepper__step-icon--Width) / 2);
16910
17051
  --pf-c-progress-stepper--m-vertical__step-connector--before--Width: auto;
@@ -16912,19 +17053,67 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
16912
17053
  --pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth: var(--pf-global--BorderWidth--md);
16913
17054
  --pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor: var(--pf-global--BorderColor--100);
16914
17055
  --pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth: 0;
17056
+ --pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor: transparent;
16915
17057
  --pf-c-progress-stepper--m-vertical__step-connector--before--Transform: translateX(-50%);
16916
- --pf-c-progress-stepper__step-main--MarginTop: var(--pf-global--spacer--sm);
16917
- --pf-c-progress-stepper__step-main--MarginRight: var(--pf-global--spacer--sm);
16918
- --pf-c-progress-stepper__step-main--MarginBottom: 0;
16919
- --pf-c-progress-stepper__step-main--MarginLeft: 0;
16920
- --pf-c-progress-stepper--m-center__step-main--MarginRight: var(--pf-global--spacer--xs);
16921
- --pf-c-progress-stepper--m-center__step-main--MarginLeft: var(--pf-global--spacer--xs);
16922
17058
  --pf-c-progress-stepper--m-vertical__step-main--MarginTop: var(--pf-global--spacer--xs);
16923
17059
  --pf-c-progress-stepper--m-vertical__step-main--MarginRight: 0;
16924
17060
  --pf-c-progress-stepper--m-vertical__step-main--MarginBottom: var(--pf-global--spacer--xl);
16925
17061
  --pf-c-progress-stepper--m-vertical__step-main--MarginLeft: var(--pf-global--spacer--xs);
17062
+ --pf-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns: 1fr;
17063
+ --pf-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom: var(--pf-global--spacer--sm);
17064
+ --pf-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow: auto;
17065
+ --pf-c-progress-stepper--m-vertical--m-compact__step-main--MarginRight: 0;
17066
+ --pf-c-progress-stepper--m-vertical--m-center__step-main--MarginRight: 0;
17067
+ --pf-c-progress-stepper--m-vertical--m-center__step-main--MarginLeft: 0;
17068
+ --pf-c-progress-stepper--m-horizontal--GridAutoFlow: column;
17069
+ --pf-c-progress-stepper--m-horizontal--GridTemplateColumns: initial;
17070
+ --pf-c-progress-stepper--m-horizontal__step-connector--before--Top: calc(var(--pf-c-progress-stepper__step-icon--Height) / 2);
17071
+ --pf-c-progress-stepper--m-horizontal__step-connector--before--Left: 0;
17072
+ --pf-c-progress-stepper--m-horizontal__step-connector--before--Width: 100%;
17073
+ --pf-c-progress-stepper--m-horizontal__step-connector--before--Height: auto;
17074
+ --pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightWidth: 0;
17075
+ --pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightColor: unset;
17076
+ --pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
17077
+ --pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomColor: var(--pf-global--BorderColor--100);
17078
+ --pf-c-progress-stepper--m-horizontal__step-connector--before--Transform: translateY(-50%);
17079
+ --pf-c-progress-stepper--m-horizontal__step-main--MarginTop: var(--pf-global--spacer--sm);
17080
+ --pf-c-progress-stepper--m-horizontal__step-main--MarginRight: var(--pf-global--spacer--sm);
17081
+ --pf-c-progress-stepper--m-horizontal__step-main--MarginBottom: 0;
17082
+ --pf-c-progress-stepper--m-horizontal__step-main--MarginLeft: 0;
17083
+ --pf-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns: repeat(auto-fill, 1.75rem);
17084
+ --pf-c-progress-stepper--m-horizontal--m-compact__step-connector--PaddingBottom: 0;
17085
+ --pf-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow: 2;
17086
+ --pf-c-progress-stepper--m-compact--GridAutoFlow: row;
16926
17087
  --pf-c-progress-stepper--m-compact__step-main--MarginTop: 0;
16927
17088
  --pf-c-progress-stepper--m-compact__step-main--MarginBottom: var(--pf-global--spacer--sm);
17089
+ --pf-c-progress-stepper--m-compact__step-connector--MinWidth: 1.75rem;
17090
+ --pf-c-progress-stepper--m-compact__step-icon--Width: 1.125rem;
17091
+ --pf-c-progress-stepper--m-compact__step-icon--FontSize: var(--pf-global--icon--FontSize--sm);
17092
+ --pf-c-progress-stepper--m-compact__step-title--FontSize: var(--pf-global--FontSize--sm);
17093
+ --pf-c-progress-stepper--m-compact__step-title--FontWeight: var(--pf-global--FontWeight--normal);
17094
+ --pf-c-progress-stepper--m-compact__pficon--MarginTop: 2px;
17095
+ --pf-c-progress-stepper--m-compact__fa-exclamation-triangle--MarginTop: -3px;
17096
+ --pf-c-progress-stepper--m-center__step-connector--before--Left: 50%;
17097
+ --pf-c-progress-stepper--m-center--GridTemplateColumns: 1fr;
17098
+ --pf-c-progress-stepper--m-center__step-connector--JustifyContent: center;
17099
+ --pf-c-progress-stepper--m-center__step-main--MarginRight: var(--pf-global--spacer--xs);
17100
+ --pf-c-progress-stepper--m-center__step-main--MarginLeft: var(--pf-global--spacer--xs);
17101
+ --pf-c-progress-stepper--m-center__step-title--TextAlign: center;
17102
+ --pf-c-progress-stepper--m-center__step-description--TextAlign: center;
17103
+ --pf-c-progress-stepper--m-center__step-description--MarginRight: 0;
17104
+ --pf-c-progress-stepper--m-center__step-description--MarginLeft: 0;
17105
+ --pf-c-progress-stepper--GridTemplateRows: auto 1fr;
17106
+ --pf-c-progress-stepper__step-connector--JustifyContent: start;
17107
+ --pf-c-progress-stepper__step-icon--ZIndex: var(--pf-global--ZIndex--xs);
17108
+ --pf-c-progress-stepper__step-icon--Width: 1.75rem;
17109
+ --pf-c-progress-stepper__step-icon--Height: var(--pf-c-progress-stepper__step-icon--Width);
17110
+ --pf-c-progress-stepper__step-icon--FontSize: var(--pf-global--icon--FontSize--md);
17111
+ --pf-c-progress-stepper__step-icon--Color: var(--pf-global--Color--100);
17112
+ --pf-c-progress-stepper__step-icon--BackgroundColor: var(--pf-global--BackgroundColor--light-200);
17113
+ --pf-c-progress-stepper__step-icon--BorderWidth: var(--pf-global--BorderWidth--md);
17114
+ --pf-c-progress-stepper__step-icon--BorderColor: var(--pf-global--BorderColor--100);
17115
+ --pf-c-progress-stepper__pficon--MarginTop: 3px;
17116
+ --pf-c-progress-stepper__fa-exclamation-triangle--MarginTop: -5px;
16928
17117
  --pf-c-progress-stepper__step-title--Color: var(--pf-global--Color--100);
16929
17118
  --pf-c-progress-stepper__step-title--TextAlign: left;
16930
17119
  --pf-c-progress-stepper__step-title--FontSize: var(--pf-global--FontSize--md);
@@ -16933,9 +17122,6 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
16933
17122
  --pf-c-progress-stepper__step--m-current__step-title--Color: var(--pf-global--Color--100);
16934
17123
  --pf-c-progress-stepper__step--m-pending__step-title--Color: var(--pf-global--Color--200);
16935
17124
  --pf-c-progress-stepper__step--m-danger__step-title--Color: var(--pf-global--danger-color--100);
16936
- --pf-c-progress-stepper--m-center__step-title--TextAlign: center;
16937
- --pf-c-progress-stepper--m-compact__step-title--FontSize: var(--pf-global--FontSize--sm);
16938
- --pf-c-progress-stepper--m-compact__step-title--FontWeight: var(--pf-global--FontWeight--normal);
16939
17125
  --pf-c-progress-stepper__step-title--m-help-text--TextDecorationColor: var(--pf-global--BorderColor--200);
16940
17126
  --pf-c-progress-stepper__step-title--m-help-text--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
16941
17127
  --pf-c-progress-stepper__step-title--m-help-text--TextUnderlineOffset: 0.25rem;
@@ -16952,9 +17138,26 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
16952
17138
  --pf-c-progress-stepper__step-description--FontSize: var(--pf-global--FontSize--sm);
16953
17139
  --pf-c-progress-stepper__step-description--Color: var(--pf-global--Color--200);
16954
17140
  --pf-c-progress-stepper__step-description--TextAlign: left;
16955
- --pf-c-progress-stepper--m-center__step-description--TextAlign: center;
16956
- --pf-c-progress-stepper--m-center__step-description--MarginRight: 0;
16957
- --pf-c-progress-stepper--m-center__step-description--MarginLeft: 0;
17141
+ --pf-c-progress-stepper--GridAutoFlow: var(--pf-c-progress-stepper--m-vertical--GridAutoFlow);
17142
+ --pf-c-progress-stepper--GridTemplateColumns: var(--pf-c-progress-stepper--m-vertical--GridTemplateColumns);
17143
+ --pf-c-progress-stepper__step-connector--before--Top: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Top);
17144
+ --pf-c-progress-stepper__step-connector--before--Left: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Left);
17145
+ --pf-c-progress-stepper__step-connector--before--Width: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Width);
17146
+ --pf-c-progress-stepper__step-connector--before--Height: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Height);
17147
+ --pf-c-progress-stepper__step-connector--before--BorderRightWidth: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth);
17148
+ --pf-c-progress-stepper__step-connector--before--BorderRightColor: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor);
17149
+ --pf-c-progress-stepper__step-connector--before--BorderBottomWidth: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth);
17150
+ --pf-c-progress-stepper__step-connector--before--BorderBottomColor: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor);
17151
+ --pf-c-progress-stepper__step-connector--before--Transform: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Transform);
17152
+ --pf-c-progress-stepper__step-main--MarginTop: var(--pf-c-progress-stepper--m-vertical__step-main--MarginTop);
17153
+ --pf-c-progress-stepper__step-main--MarginRight: var(--pf-c-progress-stepper--m-vertical__step-main--MarginRight);
17154
+ --pf-c-progress-stepper__step-main--MarginBottom: var(--pf-c-progress-stepper--m-vertical__step-main--MarginBottom);
17155
+ --pf-c-progress-stepper__step-main--MarginLeft: var(--pf-c-progress-stepper--m-vertical__step-main--MarginLeft);
17156
+ --pf-c-progress-stepper--m-compact--GridTemplateColumns: var(--pf-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns);
17157
+ --pf-c-progress-stepper--m-compact__step-connector--GridRow: var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow);
17158
+ --pf-c-progress-stepper--m-compact__step-connector--PaddingBottom: var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom);
17159
+ --pf-c-progress-stepper--m-center__step-connector--before--Content: none;
17160
+ --pf-c-progress-stepper--m-center__step-main--before--Content: "";
16958
17161
  position: relative;
16959
17162
  display: grid;
16960
17163
  grid-auto-flow: var(--pf-c-progress-stepper--GridAutoFlow);
@@ -16963,45 +17166,83 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
16963
17166
  grid-auto-columns: 1fr;
16964
17167
  }
16965
17168
 
17169
+ @media screen and (min-width: 768px) {
17170
+ .pf-c-progress-stepper {
17171
+ --pf-c-progress-stepper--GridAutoFlow: var(--pf-c-progress-stepper--m-horizontal--GridAutoFlow);
17172
+ --pf-c-progress-stepper--GridTemplateColumns: var(--pf-c-progress-stepper--m-horizontal--GridTemplateColumns);
17173
+ --pf-c-progress-stepper__step-connector--before--Top: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Top);
17174
+ --pf-c-progress-stepper__step-connector--before--Left: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Left);
17175
+ --pf-c-progress-stepper__step-connector--before--Width: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Width);
17176
+ --pf-c-progress-stepper__step-connector--before--Height: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Height);
17177
+ --pf-c-progress-stepper__step-connector--before--BorderRightWidth: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightWidth);
17178
+ --pf-c-progress-stepper__step-connector--before--BorderRightColor: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightColor);
17179
+ --pf-c-progress-stepper__step-connector--before--BorderBottomWidth: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomWidth);
17180
+ --pf-c-progress-stepper__step-connector--before--BorderBottomColor: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomColor);
17181
+ --pf-c-progress-stepper__step-connector--before--Transform: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Transform);
17182
+ --pf-c-progress-stepper__step-main--MarginTop: var(--pf-c-progress-stepper--m-horizontal__step-main--MarginTop);
17183
+ --pf-c-progress-stepper__step-main--MarginRight: var(--pf-c-progress-stepper--m-horizontal__step-main--MarginRight);
17184
+ --pf-c-progress-stepper__step-main--MarginBottom: var(--pf-c-progress-stepper--m-horizontal__step-main--MarginBottom);
17185
+ --pf-c-progress-stepper__step-main--MarginLeft: var(--pf-c-progress-stepper--m-horizontal__step-main--MarginLeft);
17186
+ --pf-c-progress-stepper--m-compact--GridTemplateColumns: var(--pf-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns);
17187
+ --pf-c-progress-stepper--m-compact__step-connector--GridRow: var(--pf-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow);
17188
+ --pf-c-progress-stepper--m-compact__step-connector--PaddingBottom: var(--pf-c-progress-stepper--m-horizontal--m-compact__step-connector--PaddingBottom);
17189
+ --pf-c-progress-stepper--m-center__step-connector--before--Content: "";
17190
+ --pf-c-progress-stepper--m-center__step-main--before--Content: none;
17191
+ }
17192
+ }
16966
17193
  .pf-c-progress-stepper.pf-m-center {
16967
- --pf-c-progress-stepper__step-connector--before--Left: var(--pf-c-progress-stepper--m-center__step-connector--before--Left);
16968
17194
  --pf-c-progress-stepper__step-connector--JustifyContent: var(--pf-c-progress-stepper--m-center__step-connector--JustifyContent);
16969
17195
  --pf-c-progress-stepper__step-main--MarginRight: var(--pf-c-progress-stepper--m-center__step-main--MarginRight);
16970
17196
  --pf-c-progress-stepper__step-main--MarginLeft: var(--pf-c-progress-stepper--m-center__step-main--MarginLeft);
17197
+ --pf-c-progress-stepper__step-title--TextAlign: var(--pf-c-progress-stepper--m-center__step-title--TextAlign);
16971
17198
  --pf-c-progress-stepper__step-description--MarginRight: var(--pf-c-progress-stepper--m-center__step-description--MarginRight);
16972
17199
  --pf-c-progress-stepper__step-description--MarginLeft: var(--pf-c-progress-stepper--m-center__step-description--MarginLeft);
16973
- --pf-c-progress-stepper__step-title--TextAlign: var(--pf-c-progress-stepper--m-center__step-title--TextAlign);
16974
17200
  --pf-c-progress-stepper__step-description--TextAlign: var(--pf-c-progress-stepper--m-center__step-description--TextAlign);
17201
+ --pf-c-progress-stepper--m-vertical__step-main--MarginRight: var(--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginRight);
17202
+ --pf-c-progress-stepper--m-vertical__step-main--MarginLeft: var(--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginLeft);
17203
+ grid-template-columns: var(--pf-c-progress-stepper--m-center--GridTemplateColumns);
16975
17204
  }
16976
17205
 
16977
- .pf-c-progress-stepper.pf-m-vertical {
16978
- --pf-c-progress-stepper--GridAutoFlow: var(--pf-c-progress-stepper--m-vertical--GridAutoFlow);
16979
- --pf-c-progress-stepper--GridTemplateColumns: var(--pf-c-progress-stepper--m-vertical--GridTemplateColumns);
16980
- --pf-c-progress-stepper__step-connector--before--Top: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Top);
16981
- --pf-c-progress-stepper__step-connector--before--Left: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Left);
16982
- --pf-c-progress-stepper__step-connector--before--Width: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Width);
16983
- --pf-c-progress-stepper__step-connector--before--Height: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Height);
16984
- --pf-c-progress-stepper__step-connector--before--BorderRightWidth: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth);
16985
- --pf-c-progress-stepper__step-connector--before--BorderRightColor: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor);
16986
- --pf-c-progress-stepper__step-connector--before--BorderBottomWidth: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth);
16987
- --pf-c-progress-stepper__step-connector--before--Transform: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Transform);
16988
- --pf-c-progress-stepper__step-main--MarginTop: var(--pf-c-progress-stepper--m-vertical__step-main--MarginTop);
16989
- --pf-c-progress-stepper__step-main--MarginRight: var(--pf-c-progress-stepper--m-vertical__step-main--MarginRight);
16990
- --pf-c-progress-stepper__step-main--MarginBottom: var(--pf-c-progress-stepper--m-vertical__step-main--MarginBottom);
16991
- --pf-c-progress-stepper__step-main--MarginLeft: var(--pf-c-progress-stepper--m-vertical__step-main--MarginLeft);
17206
+ .pf-c-progress-stepper.pf-m-center .pf-c-progress-stepper__step-main {
17207
+ position: relative;
17208
+ }
17209
+
17210
+ .pf-c-progress-stepper.pf-m-center .pf-c-progress-stepper__step:not(:last-of-type) > .pf-c-progress-stepper__step-connector::before {
17211
+ left: var(--pf-c-progress-stepper--m-center__step-connector--before--Left);
17212
+ }
17213
+
17214
+ .pf-c-progress-stepper.pf-m-center:not(.pf-m-compact) .pf-c-progress-stepper__step:not(:last-of-type) > .pf-c-progress-stepper__step-main::before {
17215
+ content: var(--pf-c-progress-stepper--m-center__step-main--before--Content);
17216
+ }
17217
+
17218
+ .pf-c-progress-stepper.pf-m-center:not(.pf-m-compact) .pf-c-progress-stepper__step:not(:last-of-type) > .pf-c-progress-stepper__step-connector::before {
17219
+ content: var(--pf-c-progress-stepper--m-center__step-connector--before--Content);
16992
17220
  }
16993
17221
 
16994
17222
  .pf-c-progress-stepper.pf-m-compact {
16995
- --pf-c-progress-stepper--GridAutoFlow: var(--pf-c-progress-stepper--m-compact--GridAutoFlow);
16996
- --pf-c-progress-stepper--GridTemplateColumns: var(--pf-c-progress-stepper--m-compact--GridTemplateColumns);
16997
- --pf-c-progress-stepper__step-icon--Width: var(--pf-c-progress-stepper--m-compact__step-icon--Width);
16998
- --pf-c-progress-stepper__step-icon--FontSize: var(--pf-c-progress-stepper--m-compact__step-icon--FontSize);
16999
- --pf-c-progress-stepper__pficon--MarginTop: var(--pf-c-progress-stepper--m-compact__pficon--MarginTop);
17000
- --pf-c-progress-stepper__fa-exclamation-triangle--MarginTop: var(--pf-c-progress-stepper--m-compact__fa-exclamation-triangle--MarginTop);
17001
17223
  --pf-c-progress-stepper__step-main--MarginTop: var(--pf-c-progress-stepper--m-compact__step-main--MarginTop);
17002
17224
  --pf-c-progress-stepper__step-main--MarginBottom: var(--pf-c-progress-stepper--m-compact__step-main--MarginBottom);
17225
+ --pf-c-progress-stepper__step-icon--Width: var(--pf-c-progress-stepper--m-compact__step-icon--Width);
17226
+ --pf-c-progress-stepper__step-icon--FontSize: var(--pf-c-progress-stepper--m-compact__step-icon--FontSize);
17003
17227
  --pf-c-progress-stepper__step-title--FontSize: var(--pf-c-progress-stepper--m-compact__step-title--FontSize);
17004
17228
  --pf-c-progress-stepper__step--m-current__step-title--FontWeight: var(--pf-c-progress-stepper--m-compact__step-title--FontWeight);
17229
+ --pf-c-progress-stepper__pficon--MarginTop: var(--pf-c-progress-stepper--m-compact__pficon--MarginTop);
17230
+ --pf-c-progress-stepper__fa-exclamation-triangle--MarginTop: var(--pf-c-progress-stepper--m-compact__fa-exclamation-triangle--MarginTop);
17231
+ --pf-c-progress-stepper--m-vertical__step-main--MarginLeft: var(--pf-c-progress-stepper--m-vertical--m-compact__step-main--MarginLeft);
17232
+ --pf-c-progress-stepper--m-vertical__step-main--MarginRight: var(--pf-c-progress-stepper--m-vertical--m-compact__step-main--MarginRight);
17233
+ display: inline-grid;
17234
+ grid-template-columns: var(--pf-c-progress-stepper--m-compact--GridTemplateColumns);
17235
+ grid-auto-flow: var(--pf-c-progress-stepper--m-compact--GridAutoFlow);
17236
+ }
17237
+
17238
+ .pf-c-progress-stepper.pf-m-compact .pf-c-progress-stepper__step-connector {
17239
+ min-width: var(--pf-c-progress-stepper--m-compact__step-connector--MinWidth);
17240
+ grid-row: var(--pf-c-progress-stepper--m-compact__step-connector--GridRow);
17241
+ padding-bottom: var(--pf-c-progress-stepper--m-compact__step-connector--PaddingBottom);
17242
+ }
17243
+
17244
+ .pf-c-progress-stepper.pf-m-compact .pf-c-progress-stepper__step-main {
17245
+ margin-bottom: var(--pf-c-progress-stepper--m-compact__step-main--MarginBottom);
17005
17246
  }
17006
17247
 
17007
17248
  .pf-c-progress-stepper.pf-m-compact .pf-c-progress-stepper__step:not(.pf-m-current) .pf-c-progress-stepper__step-main {
@@ -17014,15 +17255,15 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
17014
17255
  border: 0;
17015
17256
  }
17016
17257
 
17017
- .pf-c-progress-stepper.pf-m-compact .pf-c-progress-stepper__step-description {
17018
- display: none;
17019
- }
17020
-
17021
17258
  .pf-c-progress-stepper.pf-m-compact .pf-c-progress-stepper__step.pf-m-current .pf-c-progress-stepper__step-main {
17022
17259
  grid-column: 1/-1;
17023
17260
  grid-row: 1/2;
17024
17261
  }
17025
17262
 
17263
+ .pf-c-progress-stepper.pf-m-compact .pf-c-progress-stepper__step-description {
17264
+ display: none;
17265
+ }
17266
+
17026
17267
  .pf-c-progress-stepper__step {
17027
17268
  display: contents;
17028
17269
  }
@@ -17107,11 +17348,21 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
17107
17348
  margin: var(--pf-c-progress-stepper__step-main--MarginTop) var(--pf-c-progress-stepper__step-main--MarginRight) var(--pf-c-progress-stepper__step-main--MarginBottom) var(--pf-c-progress-stepper__step-main--MarginLeft);
17108
17349
  }
17109
17350
 
17351
+ .pf-c-progress-stepper__step:not(:last-of-type) > .pf-c-progress-stepper__step-main::before {
17352
+ position: absolute;
17353
+ top: calc(100% + var(--pf-c-progress-stepper__step-main--MarginTop));
17354
+ left: calc(50% - var(--pf-c-progress-stepper__step-connector--before--BorderRightWidth) / 2);
17355
+ width: auto;
17356
+ height: calc(var(--pf-c-progress-stepper__step-main--MarginTop) + var(--pf-c-progress-stepper__step-main--MarginBottom));
17357
+ border-right: var(--pf-c-progress-stepper__step-connector--before--BorderRightWidth) solid var(--pf-c-progress-stepper__step-connector--before--BorderRightColor);
17358
+ }
17359
+
17110
17360
  .pf-c-progress-stepper__step-title {
17111
17361
  font-size: var(--pf-c-progress-stepper__step-title--FontSize);
17112
17362
  font-weight: var(--pf-c-progress-stepper__step-title--FontWeight);
17113
17363
  color: var(--pf-c-progress-stepper__step-title--Color);
17114
17364
  text-align: var(--pf-c-progress-stepper__step-title--TextAlign);
17365
+ border: 0;
17115
17366
  }
17116
17367
 
17117
17368
  .pf-c-progress-stepper__step-title.pf-m-help-text {
@@ -17140,6 +17391,287 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
17140
17391
  text-align: var(--pf-c-progress-stepper__step-description--TextAlign);
17141
17392
  }
17142
17393
 
17394
+ .pf-c-progress-stepper.pf-m-horizontal {
17395
+ --pf-c-progress-stepper--GridAutoFlow: var(--pf-c-progress-stepper--m-horizontal--GridAutoFlow);
17396
+ --pf-c-progress-stepper--GridTemplateColumns: var(--pf-c-progress-stepper--m-horizontal--GridTemplateColumns);
17397
+ --pf-c-progress-stepper__step-connector--before--Top: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Top);
17398
+ --pf-c-progress-stepper__step-connector--before--Left: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Left);
17399
+ --pf-c-progress-stepper__step-connector--before--Width: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Width);
17400
+ --pf-c-progress-stepper__step-connector--before--Height: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Height);
17401
+ --pf-c-progress-stepper__step-connector--before--BorderRightWidth: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightWidth);
17402
+ --pf-c-progress-stepper__step-connector--before--BorderRightColor: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightColor);
17403
+ --pf-c-progress-stepper__step-connector--before--BorderBottomWidth: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomWidth);
17404
+ --pf-c-progress-stepper__step-connector--before--BorderBottomColor: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomColor);
17405
+ --pf-c-progress-stepper__step-connector--before--Transform: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Transform);
17406
+ --pf-c-progress-stepper__step-main--MarginTop: var(--pf-c-progress-stepper--m-horizontal__step-main--MarginTop);
17407
+ --pf-c-progress-stepper__step-main--MarginRight: var(--pf-c-progress-stepper--m-horizontal__step-main--MarginRight);
17408
+ --pf-c-progress-stepper__step-main--MarginBottom: var(--pf-c-progress-stepper--m-horizontal__step-main--MarginBottom);
17409
+ --pf-c-progress-stepper__step-main--MarginLeft: var(--pf-c-progress-stepper--m-horizontal__step-main--MarginLeft);
17410
+ --pf-c-progress-stepper--m-compact--GridTemplateColumns: var(--pf-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns);
17411
+ --pf-c-progress-stepper--m-compact__step-connector--GridRow: var(--pf-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow);
17412
+ --pf-c-progress-stepper--m-compact__step-connector--PaddingBottom: var(--pf-c-progress-stepper--m-horizontal--m-compact__step-connector--PaddingBottom);
17413
+ --pf-c-progress-stepper--m-center__step-connector--before--Content: "";
17414
+ --pf-c-progress-stepper--m-center__step-main--before--Content: none;
17415
+ }
17416
+
17417
+ .pf-c-progress-stepper.pf-m-vertical {
17418
+ --pf-c-progress-stepper--GridAutoFlow: var(--pf-c-progress-stepper--m-vertical--GridAutoFlow);
17419
+ --pf-c-progress-stepper--GridTemplateColumns: var(--pf-c-progress-stepper--m-vertical--GridTemplateColumns);
17420
+ --pf-c-progress-stepper__step-connector--before--Top: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Top);
17421
+ --pf-c-progress-stepper__step-connector--before--Left: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Left);
17422
+ --pf-c-progress-stepper__step-connector--before--Width: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Width);
17423
+ --pf-c-progress-stepper__step-connector--before--Height: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Height);
17424
+ --pf-c-progress-stepper__step-connector--before--BorderRightWidth: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth);
17425
+ --pf-c-progress-stepper__step-connector--before--BorderRightColor: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor);
17426
+ --pf-c-progress-stepper__step-connector--before--BorderBottomWidth: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth);
17427
+ --pf-c-progress-stepper__step-connector--before--BorderBottomColor: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor);
17428
+ --pf-c-progress-stepper__step-connector--before--Transform: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Transform);
17429
+ --pf-c-progress-stepper__step-main--MarginTop: var(--pf-c-progress-stepper--m-vertical__step-main--MarginTop);
17430
+ --pf-c-progress-stepper__step-main--MarginRight: var(--pf-c-progress-stepper--m-vertical__step-main--MarginRight);
17431
+ --pf-c-progress-stepper__step-main--MarginBottom: var(--pf-c-progress-stepper--m-vertical__step-main--MarginBottom);
17432
+ --pf-c-progress-stepper__step-main--MarginLeft: var(--pf-c-progress-stepper--m-vertical__step-main--MarginLeft);
17433
+ --pf-c-progress-stepper--m-compact--GridTemplateColumns: var(--pf-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns);
17434
+ --pf-c-progress-stepper--m-compact__step-connector--GridRow: var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow);
17435
+ --pf-c-progress-stepper--m-compact__step-connector--PaddingBottom: var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom);
17436
+ --pf-c-progress-stepper--m-center__step-connector--before--Content: none;
17437
+ --pf-c-progress-stepper--m-center__step-main--before--Content: "";
17438
+ }
17439
+
17440
+ @media (min-width: 576px) {
17441
+ .pf-c-progress-stepper.pf-m-horizontal-on-sm {
17442
+ --pf-c-progress-stepper--GridAutoFlow: var(--pf-c-progress-stepper--m-horizontal--GridAutoFlow);
17443
+ --pf-c-progress-stepper--GridTemplateColumns: var(--pf-c-progress-stepper--m-horizontal--GridTemplateColumns);
17444
+ --pf-c-progress-stepper__step-connector--before--Top: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Top);
17445
+ --pf-c-progress-stepper__step-connector--before--Left: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Left);
17446
+ --pf-c-progress-stepper__step-connector--before--Width: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Width);
17447
+ --pf-c-progress-stepper__step-connector--before--Height: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Height);
17448
+ --pf-c-progress-stepper__step-connector--before--BorderRightWidth: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightWidth);
17449
+ --pf-c-progress-stepper__step-connector--before--BorderRightColor: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightColor);
17450
+ --pf-c-progress-stepper__step-connector--before--BorderBottomWidth: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomWidth);
17451
+ --pf-c-progress-stepper__step-connector--before--BorderBottomColor: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomColor);
17452
+ --pf-c-progress-stepper__step-connector--before--Transform: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Transform);
17453
+ --pf-c-progress-stepper__step-main--MarginTop: var(--pf-c-progress-stepper--m-horizontal__step-main--MarginTop);
17454
+ --pf-c-progress-stepper__step-main--MarginRight: var(--pf-c-progress-stepper--m-horizontal__step-main--MarginRight);
17455
+ --pf-c-progress-stepper__step-main--MarginBottom: var(--pf-c-progress-stepper--m-horizontal__step-main--MarginBottom);
17456
+ --pf-c-progress-stepper__step-main--MarginLeft: var(--pf-c-progress-stepper--m-horizontal__step-main--MarginLeft);
17457
+ --pf-c-progress-stepper--m-compact--GridTemplateColumns: var(--pf-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns);
17458
+ --pf-c-progress-stepper--m-compact__step-connector--GridRow: var(--pf-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow);
17459
+ --pf-c-progress-stepper--m-compact__step-connector--PaddingBottom: var(--pf-c-progress-stepper--m-horizontal--m-compact__step-connector--PaddingBottom);
17460
+ --pf-c-progress-stepper--m-center__step-connector--before--Content: "";
17461
+ --pf-c-progress-stepper--m-center__step-main--before--Content: none;
17462
+ }
17463
+
17464
+ .pf-c-progress-stepper.pf-m-vertical-on-sm {
17465
+ --pf-c-progress-stepper--GridAutoFlow: var(--pf-c-progress-stepper--m-vertical--GridAutoFlow);
17466
+ --pf-c-progress-stepper--GridTemplateColumns: var(--pf-c-progress-stepper--m-vertical--GridTemplateColumns);
17467
+ --pf-c-progress-stepper__step-connector--before--Top: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Top);
17468
+ --pf-c-progress-stepper__step-connector--before--Left: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Left);
17469
+ --pf-c-progress-stepper__step-connector--before--Width: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Width);
17470
+ --pf-c-progress-stepper__step-connector--before--Height: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Height);
17471
+ --pf-c-progress-stepper__step-connector--before--BorderRightWidth: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth);
17472
+ --pf-c-progress-stepper__step-connector--before--BorderRightColor: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor);
17473
+ --pf-c-progress-stepper__step-connector--before--BorderBottomWidth: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth);
17474
+ --pf-c-progress-stepper__step-connector--before--BorderBottomColor: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor);
17475
+ --pf-c-progress-stepper__step-connector--before--Transform: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Transform);
17476
+ --pf-c-progress-stepper__step-main--MarginTop: var(--pf-c-progress-stepper--m-vertical__step-main--MarginTop);
17477
+ --pf-c-progress-stepper__step-main--MarginRight: var(--pf-c-progress-stepper--m-vertical__step-main--MarginRight);
17478
+ --pf-c-progress-stepper__step-main--MarginBottom: var(--pf-c-progress-stepper--m-vertical__step-main--MarginBottom);
17479
+ --pf-c-progress-stepper__step-main--MarginLeft: var(--pf-c-progress-stepper--m-vertical__step-main--MarginLeft);
17480
+ --pf-c-progress-stepper--m-compact--GridTemplateColumns: var(--pf-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns);
17481
+ --pf-c-progress-stepper--m-compact__step-connector--GridRow: var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow);
17482
+ --pf-c-progress-stepper--m-compact__step-connector--PaddingBottom: var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom);
17483
+ --pf-c-progress-stepper--m-center__step-connector--before--Content: none;
17484
+ --pf-c-progress-stepper--m-center__step-main--before--Content: "";
17485
+ }
17486
+ }
17487
+ @media (min-width: 768px) {
17488
+ .pf-c-progress-stepper.pf-m-horizontal-on-md {
17489
+ --pf-c-progress-stepper--GridAutoFlow: var(--pf-c-progress-stepper--m-horizontal--GridAutoFlow);
17490
+ --pf-c-progress-stepper--GridTemplateColumns: var(--pf-c-progress-stepper--m-horizontal--GridTemplateColumns);
17491
+ --pf-c-progress-stepper__step-connector--before--Top: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Top);
17492
+ --pf-c-progress-stepper__step-connector--before--Left: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Left);
17493
+ --pf-c-progress-stepper__step-connector--before--Width: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Width);
17494
+ --pf-c-progress-stepper__step-connector--before--Height: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Height);
17495
+ --pf-c-progress-stepper__step-connector--before--BorderRightWidth: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightWidth);
17496
+ --pf-c-progress-stepper__step-connector--before--BorderRightColor: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightColor);
17497
+ --pf-c-progress-stepper__step-connector--before--BorderBottomWidth: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomWidth);
17498
+ --pf-c-progress-stepper__step-connector--before--BorderBottomColor: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomColor);
17499
+ --pf-c-progress-stepper__step-connector--before--Transform: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Transform);
17500
+ --pf-c-progress-stepper__step-main--MarginTop: var(--pf-c-progress-stepper--m-horizontal__step-main--MarginTop);
17501
+ --pf-c-progress-stepper__step-main--MarginRight: var(--pf-c-progress-stepper--m-horizontal__step-main--MarginRight);
17502
+ --pf-c-progress-stepper__step-main--MarginBottom: var(--pf-c-progress-stepper--m-horizontal__step-main--MarginBottom);
17503
+ --pf-c-progress-stepper__step-main--MarginLeft: var(--pf-c-progress-stepper--m-horizontal__step-main--MarginLeft);
17504
+ --pf-c-progress-stepper--m-compact--GridTemplateColumns: var(--pf-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns);
17505
+ --pf-c-progress-stepper--m-compact__step-connector--GridRow: var(--pf-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow);
17506
+ --pf-c-progress-stepper--m-compact__step-connector--PaddingBottom: var(--pf-c-progress-stepper--m-horizontal--m-compact__step-connector--PaddingBottom);
17507
+ --pf-c-progress-stepper--m-center__step-connector--before--Content: "";
17508
+ --pf-c-progress-stepper--m-center__step-main--before--Content: none;
17509
+ }
17510
+
17511
+ .pf-c-progress-stepper.pf-m-vertical-on-md {
17512
+ --pf-c-progress-stepper--GridAutoFlow: var(--pf-c-progress-stepper--m-vertical--GridAutoFlow);
17513
+ --pf-c-progress-stepper--GridTemplateColumns: var(--pf-c-progress-stepper--m-vertical--GridTemplateColumns);
17514
+ --pf-c-progress-stepper__step-connector--before--Top: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Top);
17515
+ --pf-c-progress-stepper__step-connector--before--Left: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Left);
17516
+ --pf-c-progress-stepper__step-connector--before--Width: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Width);
17517
+ --pf-c-progress-stepper__step-connector--before--Height: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Height);
17518
+ --pf-c-progress-stepper__step-connector--before--BorderRightWidth: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth);
17519
+ --pf-c-progress-stepper__step-connector--before--BorderRightColor: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor);
17520
+ --pf-c-progress-stepper__step-connector--before--BorderBottomWidth: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth);
17521
+ --pf-c-progress-stepper__step-connector--before--BorderBottomColor: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor);
17522
+ --pf-c-progress-stepper__step-connector--before--Transform: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Transform);
17523
+ --pf-c-progress-stepper__step-main--MarginTop: var(--pf-c-progress-stepper--m-vertical__step-main--MarginTop);
17524
+ --pf-c-progress-stepper__step-main--MarginRight: var(--pf-c-progress-stepper--m-vertical__step-main--MarginRight);
17525
+ --pf-c-progress-stepper__step-main--MarginBottom: var(--pf-c-progress-stepper--m-vertical__step-main--MarginBottom);
17526
+ --pf-c-progress-stepper__step-main--MarginLeft: var(--pf-c-progress-stepper--m-vertical__step-main--MarginLeft);
17527
+ --pf-c-progress-stepper--m-compact--GridTemplateColumns: var(--pf-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns);
17528
+ --pf-c-progress-stepper--m-compact__step-connector--GridRow: var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow);
17529
+ --pf-c-progress-stepper--m-compact__step-connector--PaddingBottom: var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom);
17530
+ --pf-c-progress-stepper--m-center__step-connector--before--Content: none;
17531
+ --pf-c-progress-stepper--m-center__step-main--before--Content: "";
17532
+ }
17533
+ }
17534
+ @media (min-width: 992px) {
17535
+ .pf-c-progress-stepper.pf-m-horizontal-on-lg {
17536
+ --pf-c-progress-stepper--GridAutoFlow: var(--pf-c-progress-stepper--m-horizontal--GridAutoFlow);
17537
+ --pf-c-progress-stepper--GridTemplateColumns: var(--pf-c-progress-stepper--m-horizontal--GridTemplateColumns);
17538
+ --pf-c-progress-stepper__step-connector--before--Top: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Top);
17539
+ --pf-c-progress-stepper__step-connector--before--Left: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Left);
17540
+ --pf-c-progress-stepper__step-connector--before--Width: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Width);
17541
+ --pf-c-progress-stepper__step-connector--before--Height: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Height);
17542
+ --pf-c-progress-stepper__step-connector--before--BorderRightWidth: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightWidth);
17543
+ --pf-c-progress-stepper__step-connector--before--BorderRightColor: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightColor);
17544
+ --pf-c-progress-stepper__step-connector--before--BorderBottomWidth: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomWidth);
17545
+ --pf-c-progress-stepper__step-connector--before--BorderBottomColor: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomColor);
17546
+ --pf-c-progress-stepper__step-connector--before--Transform: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Transform);
17547
+ --pf-c-progress-stepper__step-main--MarginTop: var(--pf-c-progress-stepper--m-horizontal__step-main--MarginTop);
17548
+ --pf-c-progress-stepper__step-main--MarginRight: var(--pf-c-progress-stepper--m-horizontal__step-main--MarginRight);
17549
+ --pf-c-progress-stepper__step-main--MarginBottom: var(--pf-c-progress-stepper--m-horizontal__step-main--MarginBottom);
17550
+ --pf-c-progress-stepper__step-main--MarginLeft: var(--pf-c-progress-stepper--m-horizontal__step-main--MarginLeft);
17551
+ --pf-c-progress-stepper--m-compact--GridTemplateColumns: var(--pf-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns);
17552
+ --pf-c-progress-stepper--m-compact__step-connector--GridRow: var(--pf-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow);
17553
+ --pf-c-progress-stepper--m-compact__step-connector--PaddingBottom: var(--pf-c-progress-stepper--m-horizontal--m-compact__step-connector--PaddingBottom);
17554
+ --pf-c-progress-stepper--m-center__step-connector--before--Content: "";
17555
+ --pf-c-progress-stepper--m-center__step-main--before--Content: none;
17556
+ }
17557
+
17558
+ .pf-c-progress-stepper.pf-m-vertical-on-lg {
17559
+ --pf-c-progress-stepper--GridAutoFlow: var(--pf-c-progress-stepper--m-vertical--GridAutoFlow);
17560
+ --pf-c-progress-stepper--GridTemplateColumns: var(--pf-c-progress-stepper--m-vertical--GridTemplateColumns);
17561
+ --pf-c-progress-stepper__step-connector--before--Top: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Top);
17562
+ --pf-c-progress-stepper__step-connector--before--Left: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Left);
17563
+ --pf-c-progress-stepper__step-connector--before--Width: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Width);
17564
+ --pf-c-progress-stepper__step-connector--before--Height: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Height);
17565
+ --pf-c-progress-stepper__step-connector--before--BorderRightWidth: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth);
17566
+ --pf-c-progress-stepper__step-connector--before--BorderRightColor: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor);
17567
+ --pf-c-progress-stepper__step-connector--before--BorderBottomWidth: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth);
17568
+ --pf-c-progress-stepper__step-connector--before--BorderBottomColor: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor);
17569
+ --pf-c-progress-stepper__step-connector--before--Transform: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Transform);
17570
+ --pf-c-progress-stepper__step-main--MarginTop: var(--pf-c-progress-stepper--m-vertical__step-main--MarginTop);
17571
+ --pf-c-progress-stepper__step-main--MarginRight: var(--pf-c-progress-stepper--m-vertical__step-main--MarginRight);
17572
+ --pf-c-progress-stepper__step-main--MarginBottom: var(--pf-c-progress-stepper--m-vertical__step-main--MarginBottom);
17573
+ --pf-c-progress-stepper__step-main--MarginLeft: var(--pf-c-progress-stepper--m-vertical__step-main--MarginLeft);
17574
+ --pf-c-progress-stepper--m-compact--GridTemplateColumns: var(--pf-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns);
17575
+ --pf-c-progress-stepper--m-compact__step-connector--GridRow: var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow);
17576
+ --pf-c-progress-stepper--m-compact__step-connector--PaddingBottom: var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom);
17577
+ --pf-c-progress-stepper--m-center__step-connector--before--Content: none;
17578
+ --pf-c-progress-stepper--m-center__step-main--before--Content: "";
17579
+ }
17580
+ }
17581
+ @media (min-width: 1200px) {
17582
+ .pf-c-progress-stepper.pf-m-horizontal-on-xl {
17583
+ --pf-c-progress-stepper--GridAutoFlow: var(--pf-c-progress-stepper--m-horizontal--GridAutoFlow);
17584
+ --pf-c-progress-stepper--GridTemplateColumns: var(--pf-c-progress-stepper--m-horizontal--GridTemplateColumns);
17585
+ --pf-c-progress-stepper__step-connector--before--Top: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Top);
17586
+ --pf-c-progress-stepper__step-connector--before--Left: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Left);
17587
+ --pf-c-progress-stepper__step-connector--before--Width: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Width);
17588
+ --pf-c-progress-stepper__step-connector--before--Height: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Height);
17589
+ --pf-c-progress-stepper__step-connector--before--BorderRightWidth: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightWidth);
17590
+ --pf-c-progress-stepper__step-connector--before--BorderRightColor: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightColor);
17591
+ --pf-c-progress-stepper__step-connector--before--BorderBottomWidth: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomWidth);
17592
+ --pf-c-progress-stepper__step-connector--before--BorderBottomColor: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomColor);
17593
+ --pf-c-progress-stepper__step-connector--before--Transform: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Transform);
17594
+ --pf-c-progress-stepper__step-main--MarginTop: var(--pf-c-progress-stepper--m-horizontal__step-main--MarginTop);
17595
+ --pf-c-progress-stepper__step-main--MarginRight: var(--pf-c-progress-stepper--m-horizontal__step-main--MarginRight);
17596
+ --pf-c-progress-stepper__step-main--MarginBottom: var(--pf-c-progress-stepper--m-horizontal__step-main--MarginBottom);
17597
+ --pf-c-progress-stepper__step-main--MarginLeft: var(--pf-c-progress-stepper--m-horizontal__step-main--MarginLeft);
17598
+ --pf-c-progress-stepper--m-compact--GridTemplateColumns: var(--pf-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns);
17599
+ --pf-c-progress-stepper--m-compact__step-connector--GridRow: var(--pf-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow);
17600
+ --pf-c-progress-stepper--m-compact__step-connector--PaddingBottom: var(--pf-c-progress-stepper--m-horizontal--m-compact__step-connector--PaddingBottom);
17601
+ --pf-c-progress-stepper--m-center__step-connector--before--Content: "";
17602
+ --pf-c-progress-stepper--m-center__step-main--before--Content: none;
17603
+ }
17604
+
17605
+ .pf-c-progress-stepper.pf-m-vertical-on-xl {
17606
+ --pf-c-progress-stepper--GridAutoFlow: var(--pf-c-progress-stepper--m-vertical--GridAutoFlow);
17607
+ --pf-c-progress-stepper--GridTemplateColumns: var(--pf-c-progress-stepper--m-vertical--GridTemplateColumns);
17608
+ --pf-c-progress-stepper__step-connector--before--Top: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Top);
17609
+ --pf-c-progress-stepper__step-connector--before--Left: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Left);
17610
+ --pf-c-progress-stepper__step-connector--before--Width: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Width);
17611
+ --pf-c-progress-stepper__step-connector--before--Height: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Height);
17612
+ --pf-c-progress-stepper__step-connector--before--BorderRightWidth: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth);
17613
+ --pf-c-progress-stepper__step-connector--before--BorderRightColor: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor);
17614
+ --pf-c-progress-stepper__step-connector--before--BorderBottomWidth: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth);
17615
+ --pf-c-progress-stepper__step-connector--before--BorderBottomColor: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor);
17616
+ --pf-c-progress-stepper__step-connector--before--Transform: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Transform);
17617
+ --pf-c-progress-stepper__step-main--MarginTop: var(--pf-c-progress-stepper--m-vertical__step-main--MarginTop);
17618
+ --pf-c-progress-stepper__step-main--MarginRight: var(--pf-c-progress-stepper--m-vertical__step-main--MarginRight);
17619
+ --pf-c-progress-stepper__step-main--MarginBottom: var(--pf-c-progress-stepper--m-vertical__step-main--MarginBottom);
17620
+ --pf-c-progress-stepper__step-main--MarginLeft: var(--pf-c-progress-stepper--m-vertical__step-main--MarginLeft);
17621
+ --pf-c-progress-stepper--m-compact--GridTemplateColumns: var(--pf-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns);
17622
+ --pf-c-progress-stepper--m-compact__step-connector--GridRow: var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow);
17623
+ --pf-c-progress-stepper--m-compact__step-connector--PaddingBottom: var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom);
17624
+ --pf-c-progress-stepper--m-center__step-connector--before--Content: none;
17625
+ --pf-c-progress-stepper--m-center__step-main--before--Content: "";
17626
+ }
17627
+ }
17628
+ @media (min-width: 1450px) {
17629
+ .pf-c-progress-stepper.pf-m-horizontal-on-2xl {
17630
+ --pf-c-progress-stepper--GridAutoFlow: var(--pf-c-progress-stepper--m-horizontal--GridAutoFlow);
17631
+ --pf-c-progress-stepper--GridTemplateColumns: var(--pf-c-progress-stepper--m-horizontal--GridTemplateColumns);
17632
+ --pf-c-progress-stepper__step-connector--before--Top: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Top);
17633
+ --pf-c-progress-stepper__step-connector--before--Left: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Left);
17634
+ --pf-c-progress-stepper__step-connector--before--Width: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Width);
17635
+ --pf-c-progress-stepper__step-connector--before--Height: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Height);
17636
+ --pf-c-progress-stepper__step-connector--before--BorderRightWidth: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightWidth);
17637
+ --pf-c-progress-stepper__step-connector--before--BorderRightColor: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightColor);
17638
+ --pf-c-progress-stepper__step-connector--before--BorderBottomWidth: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomWidth);
17639
+ --pf-c-progress-stepper__step-connector--before--BorderBottomColor: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomColor);
17640
+ --pf-c-progress-stepper__step-connector--before--Transform: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Transform);
17641
+ --pf-c-progress-stepper__step-main--MarginTop: var(--pf-c-progress-stepper--m-horizontal__step-main--MarginTop);
17642
+ --pf-c-progress-stepper__step-main--MarginRight: var(--pf-c-progress-stepper--m-horizontal__step-main--MarginRight);
17643
+ --pf-c-progress-stepper__step-main--MarginBottom: var(--pf-c-progress-stepper--m-horizontal__step-main--MarginBottom);
17644
+ --pf-c-progress-stepper__step-main--MarginLeft: var(--pf-c-progress-stepper--m-horizontal__step-main--MarginLeft);
17645
+ --pf-c-progress-stepper--m-compact--GridTemplateColumns: var(--pf-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns);
17646
+ --pf-c-progress-stepper--m-compact__step-connector--GridRow: var(--pf-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow);
17647
+ --pf-c-progress-stepper--m-compact__step-connector--PaddingBottom: var(--pf-c-progress-stepper--m-horizontal--m-compact__step-connector--PaddingBottom);
17648
+ --pf-c-progress-stepper--m-center__step-connector--before--Content: "";
17649
+ --pf-c-progress-stepper--m-center__step-main--before--Content: none;
17650
+ }
17651
+
17652
+ .pf-c-progress-stepper.pf-m-vertical-on-2xl {
17653
+ --pf-c-progress-stepper--GridAutoFlow: var(--pf-c-progress-stepper--m-vertical--GridAutoFlow);
17654
+ --pf-c-progress-stepper--GridTemplateColumns: var(--pf-c-progress-stepper--m-vertical--GridTemplateColumns);
17655
+ --pf-c-progress-stepper__step-connector--before--Top: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Top);
17656
+ --pf-c-progress-stepper__step-connector--before--Left: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Left);
17657
+ --pf-c-progress-stepper__step-connector--before--Width: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Width);
17658
+ --pf-c-progress-stepper__step-connector--before--Height: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Height);
17659
+ --pf-c-progress-stepper__step-connector--before--BorderRightWidth: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth);
17660
+ --pf-c-progress-stepper__step-connector--before--BorderRightColor: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor);
17661
+ --pf-c-progress-stepper__step-connector--before--BorderBottomWidth: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth);
17662
+ --pf-c-progress-stepper__step-connector--before--BorderBottomColor: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor);
17663
+ --pf-c-progress-stepper__step-connector--before--Transform: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Transform);
17664
+ --pf-c-progress-stepper__step-main--MarginTop: var(--pf-c-progress-stepper--m-vertical__step-main--MarginTop);
17665
+ --pf-c-progress-stepper__step-main--MarginRight: var(--pf-c-progress-stepper--m-vertical__step-main--MarginRight);
17666
+ --pf-c-progress-stepper__step-main--MarginBottom: var(--pf-c-progress-stepper--m-vertical__step-main--MarginBottom);
17667
+ --pf-c-progress-stepper__step-main--MarginLeft: var(--pf-c-progress-stepper--m-vertical__step-main--MarginLeft);
17668
+ --pf-c-progress-stepper--m-compact--GridTemplateColumns: var(--pf-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns);
17669
+ --pf-c-progress-stepper--m-compact__step-connector--GridRow: var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow);
17670
+ --pf-c-progress-stepper--m-compact__step-connector--PaddingBottom: var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom);
17671
+ --pf-c-progress-stepper--m-center__step-connector--before--Content: none;
17672
+ --pf-c-progress-stepper--m-center__step-main--before--Content: "";
17673
+ }
17674
+ }
17143
17675
  .pf-c-radio {
17144
17676
  --pf-c-radio--GridGap: var(--pf-global--spacer--xs) var(--pf-global--spacer--sm);
17145
17677
  --pf-c-radio__label--disabled--Color: var(--pf-global--disabled-color--100);
@@ -19078,6 +19610,15 @@ svg.pf-c-spinner.pf-m-xl {
19078
19610
  --pf-c-tabs__add--c-button--PaddingTop: var(--pf-c-tabs__link--PaddingTop);
19079
19611
  --pf-c-tabs__add--c-button--PaddingBottom: var(--pf-c-tabs__link--PaddingBottom);
19080
19612
  --pf-c-tabs__add--c-button--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
19613
+ --pf-c-tabs__link-toggle-icon--Color: var(--pf-global--Color--200);
19614
+ --pf-c-tabs__link-toggle-icon--Transition: .2s ease-in 0s;
19615
+ --pf-c-tabs__link-toggle-icon--Rotate: 0;
19616
+ --pf-c-tabs__link-toggle-icon--FontSize: var(--pf-global--FontSize--sm);
19617
+ --pf-c-tabs__link--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
19618
+ --pf-c-tabs__link--m-expanded__toggle-icon--Rotate: 90deg;
19619
+ --pf-c-tabs__link--hover__toggle-icon--Color: var(--pf-global--Color--100);
19620
+ --pf-c-tabs__link--active__toggle-icon--Color: var(--pf-global--Color--100);
19621
+ --pf-c-tabs__link--focus__toggle-icon--Color: var(--pf-global--Color--100);
19081
19622
  position: relative;
19082
19623
  display: flex;
19083
19624
  width: var(--pf-c-tabs--Width);
@@ -19561,6 +20102,18 @@ svg.pf-c-spinner.pf-m-xl {
19561
20102
  --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--active--after--BorderWidth);
19562
20103
  }
19563
20104
 
20105
+ .pf-c-tabs__link:hover {
20106
+ --pf-c-tabs__link-toggle-icon--Color: var(--pf-c-tabs__link--hover__toggle-icon--Color);
20107
+ }
20108
+
20109
+ .pf-c-tabs__link:focus {
20110
+ --pf-c-tabs__link-toggle-icon--Color: var(--pf-c-tabs__link--focus__toggle-icon--Color);
20111
+ }
20112
+
20113
+ .pf-c-tabs__link:active, .pf-c-tabs__link.pf-m-active {
20114
+ --pf-c-tabs__link-toggle-icon--Color: var(--pf-c-tabs__link--active__toggle-icon--Color);
20115
+ }
20116
+
19564
20117
  .pf-c-tabs__link:disabled, .pf-c-tabs__link.pf-m-disabled {
19565
20118
  pointer-events: none;
19566
20119
  }
@@ -19588,6 +20141,19 @@ svg.pf-c-spinner.pf-m-xl {
19588
20141
  --pf-c-tabs__link--child--MarginRight: 0;
19589
20142
  }
19590
20143
 
20144
+ .pf-c-tabs__link.pf-m-expanded {
20145
+ --pf-c-tabs__link-toggle-icon--Color: var(--pf-c-tabs__link--m-expanded__toggle-icon--Color);
20146
+ --pf-c-tabs__link-toggle-icon--Rotate: var(--pf-c-tabs__link--m-expanded__toggle-icon--Rotate);
20147
+ }
20148
+
20149
+ .pf-c-tabs__link-toggle-icon {
20150
+ align-self: end;
20151
+ font-size: var(--pf-c-tabs__link-toggle-icon--FontSize);
20152
+ color: var(--pf-c-tabs__link-toggle-icon--Color);
20153
+ transition: var(--pf-c-tabs__link-toggle-icon--Transition);
20154
+ transform: rotate(var(--pf-c-tabs__link-toggle-icon--Rotate));
20155
+ }
20156
+
19591
20157
  .pf-c-tabs__item-close {
19592
20158
  display: flex;
19593
20159
  }
@@ -23068,6 +23634,7 @@ svg.pf-c-spinner.pf-m-xl {
23068
23634
  }
23069
23635
 
23070
23636
  .pf-c-wizard__footer {
23637
+ position: relative;
23071
23638
  z-index: var(--pf-c-wizard__footer--ZIndex);
23072
23639
  display: flex;
23073
23640
  flex-wrap: wrap;
@@ -23084,7 +23651,7 @@ svg.pf-c-spinner.pf-m-xl {
23084
23651
  margin-right: var(--pf-c-wizard__footer--child--MarginRight);
23085
23652
  }
23086
23653
 
23087
- .pf-c-page__main-wizard .pf-c-wizard__footer, .pf-c-modal-box .pf-c-wizard__footer {
23654
+ .pf-c-page__main-wizard .pf-c-wizard__footer, .pf-c-modal-box .pf-c-wizard__footer, .pf-c-drawer > .pf-c-wizard__footer {
23088
23655
  box-shadow: var(--pf-c-wizard__footer--BoxShadow);
23089
23656
  }
23090
23657