@patternfly/react-core 4.228.1 → 4.229.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/esm/components/DescriptionList/DescriptionList.d.ts +4 -0
  3. package/dist/esm/components/DescriptionList/DescriptionList.d.ts.map +1 -1
  4. package/dist/esm/components/DescriptionList/DescriptionList.js +5 -2
  5. package/dist/esm/components/DescriptionList/DescriptionList.js.map +1 -1
  6. package/dist/esm/components/DescriptionList/DescriptionListGroup.js.map +1 -1
  7. package/dist/js/components/DescriptionList/DescriptionList.d.ts +4 -0
  8. package/dist/js/components/DescriptionList/DescriptionList.d.ts.map +1 -1
  9. package/dist/js/components/DescriptionList/DescriptionList.js +5 -2
  10. package/dist/js/components/DescriptionList/DescriptionList.js.map +1 -1
  11. package/dist/js/components/DescriptionList/DescriptionListGroup.js.map +1 -1
  12. package/dist/umd/react-core.js +5 -2
  13. package/dist/umd/react-core.min.css +410 -410
  14. package/dist/umd/react-core.min.js +1 -1
  15. package/package.json +5 -5
  16. package/src/components/DescriptionList/DescriptionList.tsx +14 -0
  17. package/src/components/DescriptionList/DescriptionListGroup.tsx +1 -0
  18. package/src/components/DescriptionList/examples/DescriptionList.md +31 -1
  19. package/src/components/DescriptionList/examples/DescriptionListDisplaySizeAndCard.tsx +63 -0
  20. package/src/components/DescriptionList/examples/DescriptionListDisplaySizeAndCardHorizontalTermWidth.tsx +34 -0
  21. package/src/components/DescriptionList/examples/DescriptionListDisplaySizeAndCardThreeColumn.tsx +34 -0
  22. package/src/components/DescriptionList/examples/DescriptionListWithCard.tsx +62 -0
  23. package/src/components/DescriptionList/examples/DescriptionListWithDisplaySize.tsx +63 -0
@@ -9434,6 +9434,327 @@ label.pf-c-input-group__text {
9434
9434
  --pf-c-input-group__text--BackgroundColor: transparent;
9435
9435
  }
9436
9436
 
9437
+ .pf-c-jump-links {
9438
+ --pf-c-jump-links__list--Display: flex;
9439
+ --pf-c-jump-links__list--Visibility: visible;
9440
+ --pf-c-jump-links__list--PaddingTop: 0;
9441
+ --pf-c-jump-links__list--PaddingRight: var(--pf-global--spacer--md);
9442
+ --pf-c-jump-links__list--PaddingBottom: 0;
9443
+ --pf-c-jump-links__list--PaddingLeft: var(--pf-global--spacer--md);
9444
+ --pf-c-jump-links--m-vertical__list--PaddingTop: var(--pf-global--spacer--md);
9445
+ --pf-c-jump-links--m-vertical__list--PaddingRight: 0;
9446
+ --pf-c-jump-links--m-vertical__list--PaddingBottom: var(--pf-global--spacer--md);
9447
+ --pf-c-jump-links--m-vertical__list--PaddingLeft: 0;
9448
+ --pf-c-jump-links__list--FlexDirection: row;
9449
+ --pf-c-jump-links--m-vertical__list--FlexDirection: column;
9450
+ --pf-c-jump-links__list--before--BorderColor: var(--pf-global--BorderColor--100);
9451
+ --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-global--BorderWidth--sm);
9452
+ --pf-c-jump-links__list--before--BorderRightWidth: 0;
9453
+ --pf-c-jump-links__list--before--BorderBottomWidth: 0;
9454
+ --pf-c-jump-links__list--before--BorderLeftWidth: 0;
9455
+ --pf-c-jump-links--m-vertical__list--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
9456
+ --pf-c-jump-links--m-vertical__list--before--BorderTopWidth: 0;
9457
+ --pf-c-jump-links__list__list--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
9458
+ --pf-c-jump-links__link--PaddingTop: var(--pf-global--spacer--md);
9459
+ --pf-c-jump-links__link--PaddingRight: var(--pf-global--spacer--md);
9460
+ --pf-c-jump-links__link--PaddingBottom: var(--pf-global--spacer--md);
9461
+ --pf-c-jump-links__link--PaddingLeft: var(--pf-global--spacer--md);
9462
+ --pf-c-jump-links__list__list__link--PaddingTop: var(--pf-global--spacer--sm);
9463
+ --pf-c-jump-links__list__list__link--PaddingLeft: var(--pf-global--spacer--lg);
9464
+ --pf-c-jump-links__list__list__link--PaddingBottom: var(--pf-global--spacer--sm);
9465
+ --pf-c-jump-links__link--OutlineOffset: calc(-1 * var(--pf-global--spacer--sm));
9466
+ --pf-c-jump-links__link--before--BorderTopWidth: 0;
9467
+ --pf-c-jump-links__link--before--BorderRightWidth: 0;
9468
+ --pf-c-jump-links__link--before--BorderBottomWidth: 0;
9469
+ --pf-c-jump-links__link--before--BorderLeftWidth: 0;
9470
+ --pf-c-jump-links__link--before--BorderColor: transparent;
9471
+ --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-global--BorderWidth--lg);
9472
+ --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: 0;
9473
+ --pf-c-jump-links__item--m-current__link--before--BorderColor: var(--pf-global--primary-color--100);
9474
+ --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth: 0;
9475
+ --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth: var(--pf-global--BorderWidth--lg);
9476
+ --pf-c-jump-links__link-text--Color: var(--pf-global--Color--200);
9477
+ --pf-c-jump-links__link--hover__link-text--Color: var(--pf-global--Color--100);
9478
+ --pf-c-jump-links__link--focus__link-text--Color: var(--pf-global--Color--100);
9479
+ --pf-c-jump-links__item--m-current__link-text--Color: var(--pf-global--Color--100);
9480
+ --pf-c-jump-links__label--MarginBottom: var(--pf-global--spacer--md);
9481
+ --pf-c-jump-links__label--Display: block;
9482
+ --pf-c-jump-links__label--Visibility: visible;
9483
+ --pf-c-jump-links__toggle--MarginTop: calc(-1 * var(--pf-global--spacer--form-element));
9484
+ --pf-c-jump-links__toggle--MarginBottom--base: calc(-1 * var(--pf-global--spacer--form-element));
9485
+ --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links__toggle--MarginBottom--base);
9486
+ --pf-c-jump-links--m-expanded__toggle--MarginBottom: calc(var(--pf-c-jump-links__toggle--MarginBottom--base) + var(--pf-global--spacer--md));
9487
+ --pf-c-jump-links__toggle--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
9488
+ --pf-c-jump-links__toggle--Display: none;
9489
+ --pf-c-jump-links__toggle--Visibility: hidden;
9490
+ --pf-c-jump-links__toggle-icon--Color: currentcolor;
9491
+ --pf-c-jump-links__toggle-icon--Transition: var(--pf-global--Transition);
9492
+ --pf-c-jump-links__toggle-icon--Rotate: 0;
9493
+ --pf-c-jump-links--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
9494
+ --pf-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
9495
+ --pf-c-jump-links__toggle-text--MarginLeft: var(--pf-global--spacer--md);
9496
+ --pf-c-jump-links__toggle-text--Color: var(--pf-global--Color--100);
9497
+ display: flex;
9498
+ }
9499
+
9500
+ .pf-c-jump-links.pf-m-center {
9501
+ justify-content: center;
9502
+ }
9503
+
9504
+ .pf-c-jump-links.pf-m-center .pf-c-jump-links__main {
9505
+ align-items: center;
9506
+ }
9507
+
9508
+ .pf-c-jump-links.pf-m-vertical, .pf-c-jump-links.pf-m-expandable {
9509
+ --pf-c-jump-links__list--PaddingTop: var(--pf-c-jump-links--m-vertical__list--PaddingTop);
9510
+ --pf-c-jump-links__list--PaddingRight: var(--pf-c-jump-links--m-vertical__list--PaddingRight);
9511
+ --pf-c-jump-links__list--PaddingBottom: var(--pf-c-jump-links--m-vertical__list--PaddingBottom);
9512
+ --pf-c-jump-links__list--PaddingLeft: var(--pf-c-jump-links--m-vertical__list--PaddingLeft);
9513
+ --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderTopWidth);
9514
+ --pf-c-jump-links__list--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderLeftWidth);
9515
+ --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth);
9516
+ --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth);
9517
+ --pf-c-jump-links__list--FlexDirection: var(--pf-c-jump-links--m-vertical__list--FlexDirection);
9518
+ flex-direction: column;
9519
+ }
9520
+
9521
+ .pf-c-jump-links.pf-m-expandable {
9522
+ --pf-c-jump-links__list--Display: none;
9523
+ --pf-c-jump-links__list--Visibility: hidden;
9524
+ --pf-c-jump-links__toggle--Display: block;
9525
+ --pf-c-jump-links__toggle--Visibility: visible;
9526
+ --pf-c-jump-links__label--Display: none;
9527
+ --pf-c-jump-links__label--Visibility: hidden;
9528
+ }
9529
+
9530
+ .pf-c-jump-links.pf-m-non-expandable {
9531
+ --pf-c-jump-links__list--Display: flex;
9532
+ --pf-c-jump-links__list--Visibility: visible;
9533
+ --pf-c-jump-links__toggle--Display: none;
9534
+ --pf-c-jump-links__toggle--Visibility: hidden;
9535
+ --pf-c-jump-links__label--Display: block;
9536
+ --pf-c-jump-links__label--Visibility: visible;
9537
+ }
9538
+
9539
+ @media (min-width: 576px) {
9540
+ .pf-c-jump-links.pf-m-expandable-on-sm {
9541
+ --pf-c-jump-links__list--Display: none;
9542
+ --pf-c-jump-links__list--Visibility: hidden;
9543
+ --pf-c-jump-links__toggle--Display: block;
9544
+ --pf-c-jump-links__toggle--Visibility: visible;
9545
+ --pf-c-jump-links__label--Display: none;
9546
+ --pf-c-jump-links__label--Visibility: hidden;
9547
+ }
9548
+
9549
+ .pf-c-jump-links.pf-m-non-expandable-on-sm {
9550
+ --pf-c-jump-links__list--Display: flex;
9551
+ --pf-c-jump-links__list--Visibility: visible;
9552
+ --pf-c-jump-links__toggle--Display: none;
9553
+ --pf-c-jump-links__toggle--Visibility: hidden;
9554
+ --pf-c-jump-links__label--Display: block;
9555
+ --pf-c-jump-links__label--Visibility: visible;
9556
+ }
9557
+ }
9558
+ @media (min-width: 768px) {
9559
+ .pf-c-jump-links.pf-m-expandable-on-md {
9560
+ --pf-c-jump-links__list--Display: none;
9561
+ --pf-c-jump-links__list--Visibility: hidden;
9562
+ --pf-c-jump-links__toggle--Display: block;
9563
+ --pf-c-jump-links__toggle--Visibility: visible;
9564
+ --pf-c-jump-links__label--Display: none;
9565
+ --pf-c-jump-links__label--Visibility: hidden;
9566
+ }
9567
+
9568
+ .pf-c-jump-links.pf-m-non-expandable-on-md {
9569
+ --pf-c-jump-links__list--Display: flex;
9570
+ --pf-c-jump-links__list--Visibility: visible;
9571
+ --pf-c-jump-links__toggle--Display: none;
9572
+ --pf-c-jump-links__toggle--Visibility: hidden;
9573
+ --pf-c-jump-links__label--Display: block;
9574
+ --pf-c-jump-links__label--Visibility: visible;
9575
+ }
9576
+ }
9577
+ @media (min-width: 992px) {
9578
+ .pf-c-jump-links.pf-m-expandable-on-lg {
9579
+ --pf-c-jump-links__list--Display: none;
9580
+ --pf-c-jump-links__list--Visibility: hidden;
9581
+ --pf-c-jump-links__toggle--Display: block;
9582
+ --pf-c-jump-links__toggle--Visibility: visible;
9583
+ --pf-c-jump-links__label--Display: none;
9584
+ --pf-c-jump-links__label--Visibility: hidden;
9585
+ }
9586
+
9587
+ .pf-c-jump-links.pf-m-non-expandable-on-lg {
9588
+ --pf-c-jump-links__list--Display: flex;
9589
+ --pf-c-jump-links__list--Visibility: visible;
9590
+ --pf-c-jump-links__toggle--Display: none;
9591
+ --pf-c-jump-links__toggle--Visibility: hidden;
9592
+ --pf-c-jump-links__label--Display: block;
9593
+ --pf-c-jump-links__label--Visibility: visible;
9594
+ }
9595
+ }
9596
+ @media (min-width: 1200px) {
9597
+ .pf-c-jump-links.pf-m-expandable-on-xl {
9598
+ --pf-c-jump-links__list--Display: none;
9599
+ --pf-c-jump-links__list--Visibility: hidden;
9600
+ --pf-c-jump-links__toggle--Display: block;
9601
+ --pf-c-jump-links__toggle--Visibility: visible;
9602
+ --pf-c-jump-links__label--Display: none;
9603
+ --pf-c-jump-links__label--Visibility: hidden;
9604
+ }
9605
+
9606
+ .pf-c-jump-links.pf-m-non-expandable-on-xl {
9607
+ --pf-c-jump-links__list--Display: flex;
9608
+ --pf-c-jump-links__list--Visibility: visible;
9609
+ --pf-c-jump-links__toggle--Display: none;
9610
+ --pf-c-jump-links__toggle--Visibility: hidden;
9611
+ --pf-c-jump-links__label--Display: block;
9612
+ --pf-c-jump-links__label--Visibility: visible;
9613
+ }
9614
+ }
9615
+ @media (min-width: 1450px) {
9616
+ .pf-c-jump-links.pf-m-expandable-on-2xl {
9617
+ --pf-c-jump-links__list--Display: none;
9618
+ --pf-c-jump-links__list--Visibility: hidden;
9619
+ --pf-c-jump-links__toggle--Display: block;
9620
+ --pf-c-jump-links__toggle--Visibility: visible;
9621
+ --pf-c-jump-links__label--Display: none;
9622
+ --pf-c-jump-links__label--Visibility: hidden;
9623
+ }
9624
+
9625
+ .pf-c-jump-links.pf-m-non-expandable-on-2xl {
9626
+ --pf-c-jump-links__list--Display: flex;
9627
+ --pf-c-jump-links__list--Visibility: visible;
9628
+ --pf-c-jump-links__toggle--Display: none;
9629
+ --pf-c-jump-links__toggle--Visibility: hidden;
9630
+ --pf-c-jump-links__label--Display: block;
9631
+ --pf-c-jump-links__label--Visibility: visible;
9632
+ }
9633
+ }
9634
+ .pf-c-jump-links.pf-m-expanded {
9635
+ --pf-c-jump-links__list--Display: flex;
9636
+ --pf-c-jump-links__list--Visibility: visible;
9637
+ --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links--m-expanded__toggle--MarginBottom);
9638
+ --pf-c-jump-links__toggle-icon--Rotate: var(--pf-c-jump-links--m-expanded__toggle-icon--Rotate);
9639
+ --pf-c-jump-links__toggle-icon--Color: var(--pf-c-jump-links--m-expanded__toggle-icon--Color);
9640
+ }
9641
+
9642
+ .pf-c-jump-links__list {
9643
+ position: relative;
9644
+ display: var(--pf-c-jump-links__list--Display);
9645
+ flex-direction: var(--pf-c-jump-links__list--FlexDirection);
9646
+ padding-top: var(--pf-c-jump-links__list--PaddingTop);
9647
+ padding-right: var(--pf-c-jump-links__list--PaddingRight);
9648
+ padding-bottom: var(--pf-c-jump-links__list--PaddingBottom);
9649
+ padding-left: var(--pf-c-jump-links__list--PaddingLeft);
9650
+ visibility: var(--pf-c-jump-links__list--Visibility);
9651
+ }
9652
+
9653
+ .pf-c-jump-links__list::before {
9654
+ position: absolute;
9655
+ top: 0;
9656
+ right: 0;
9657
+ bottom: 0;
9658
+ left: 0;
9659
+ pointer-events: none;
9660
+ content: "";
9661
+ border: solid var(--pf-c-jump-links__list--before--BorderColor);
9662
+ 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);
9663
+ }
9664
+
9665
+ .pf-c-jump-links__list .pf-c-jump-links__list {
9666
+ --pf-c-jump-links__list--PaddingTop: 0;
9667
+ --pf-c-jump-links__list--PaddingBottom: 0;
9668
+ --pf-c-jump-links__link--PaddingTop: var(--pf-c-jump-links__list__list__link--PaddingTop);
9669
+ --pf-c-jump-links__link--PaddingBottom: var(--pf-c-jump-links__list__list__link--PaddingBottom);
9670
+ --pf-c-jump-links__link--PaddingLeft: var(--pf-c-jump-links__list__list__link--PaddingLeft);
9671
+ margin-top: var(--pf-c-jump-links__list__list--MarginTop);
9672
+ }
9673
+
9674
+ .pf-c-jump-links__link {
9675
+ position: relative;
9676
+ display: flex;
9677
+ flex: 1;
9678
+ padding-top: var(--pf-c-jump-links__link--PaddingTop);
9679
+ padding-right: var(--pf-c-jump-links__link--PaddingRight);
9680
+ padding-bottom: var(--pf-c-jump-links__link--PaddingBottom);
9681
+ padding-left: var(--pf-c-jump-links__link--PaddingLeft);
9682
+ text-decoration: none;
9683
+ outline-offset: var(--pf-c-jump-links__link--OutlineOffset);
9684
+ }
9685
+
9686
+ .pf-c-jump-links__link:hover {
9687
+ --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--hover__link-text--Color);
9688
+ }
9689
+
9690
+ .pf-c-jump-links__link:focus {
9691
+ --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--focus__link-text--Color);
9692
+ }
9693
+
9694
+ .pf-c-jump-links__link::before {
9695
+ position: absolute;
9696
+ top: 0;
9697
+ right: 0;
9698
+ bottom: 0;
9699
+ left: 0;
9700
+ pointer-events: none;
9701
+ content: "";
9702
+ border-color: var(--pf-c-jump-links__link--before--BorderColor);
9703
+ border-style: solid;
9704
+ 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);
9705
+ }
9706
+
9707
+ .pf-c-jump-links__item {
9708
+ --pf-c-jump-links__list--before--BorderColor: transparent;
9709
+ }
9710
+
9711
+ .pf-c-jump-links__item.pf-m-current > .pf-c-jump-links__link {
9712
+ --pf-c-jump-links__link--before--BorderTopWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderTopWidth);
9713
+ --pf-c-jump-links__link--before--BorderLeftWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderLeftWidth);
9714
+ --pf-c-jump-links__link--before--BorderColor: var(--pf-c-jump-links__item--m-current__link--before--BorderColor);
9715
+ --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__item--m-current__link-text--Color);
9716
+ }
9717
+
9718
+ .pf-c-jump-links__link-text {
9719
+ color: var(--pf-c-jump-links__link-text--Color);
9720
+ }
9721
+
9722
+ .pf-c-jump-links__label {
9723
+ display: var(--pf-c-jump-links__label--Display);
9724
+ margin-bottom: var(--pf-c-jump-links__label--MarginBottom);
9725
+ visibility: var(--pf-c-jump-links__label--Visibility);
9726
+ }
9727
+
9728
+ .pf-c-jump-links__main {
9729
+ display: flex;
9730
+ flex-direction: column;
9731
+ }
9732
+
9733
+ .pf-c-jump-links__toggle {
9734
+ display: var(--pf-c-jump-links__toggle--Display);
9735
+ margin-top: var(--pf-c-jump-links__toggle--MarginTop);
9736
+ margin-bottom: var(--pf-c-jump-links__toggle--MarginBottom);
9737
+ margin-left: var(--pf-c-jump-links__toggle--MarginLeft);
9738
+ visibility: var(--pf-c-jump-links__toggle--Visibility);
9739
+ }
9740
+
9741
+ .pf-c-jump-links__toggle .pf-c-button {
9742
+ display: flex;
9743
+ align-items: center;
9744
+ }
9745
+
9746
+ .pf-c-jump-links__toggle-icon {
9747
+ display: inline-block;
9748
+ color: var(--pf-c-jump-links__toggle-icon--Color);
9749
+ transition: var(--pf-c-jump-links__toggle-icon--Transition);
9750
+ transform: rotate(var(--pf-c-jump-links__toggle-icon--Rotate));
9751
+ }
9752
+
9753
+ .pf-c-jump-links__toggle-text {
9754
+ margin-left: var(--pf-c-jump-links__toggle-text--MarginLeft);
9755
+ color: var(--pf-c-jump-links__toggle-text--Color);
9756
+ }
9757
+
9437
9758
  .pf-c-sidebar {
9438
9759
  --pf-c-sidebar--BackgroundColor: var(--pf-global--BackgroundColor--100);
9439
9760
  --pf-c-sidebar__main--FlexDirection: column;
@@ -9633,451 +9954,130 @@ label.pf-c-input-group__text {
9633
9954
  --pf-c-sidebar__panel--FlexBasis: 66%;
9634
9955
  }
9635
9956
 
9636
- .pf-c-sidebar__panel.pf-m-width-75-on-sm {
9637
- --pf-c-sidebar__panel--FlexBasis: 75%;
9638
- }
9639
-
9640
- .pf-c-sidebar__panel.pf-m-width-100-on-sm {
9641
- --pf-c-sidebar__panel--FlexBasis: 100%;
9642
- }
9643
- }
9644
- @media (min-width: 768px) {
9645
- .pf-c-sidebar__panel.pf-m-width-default-on-md {
9646
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9647
- }
9648
-
9649
- .pf-c-sidebar__panel.pf-m-width-25-on-md {
9650
- --pf-c-sidebar__panel--FlexBasis: 25%;
9651
- }
9652
-
9653
- .pf-c-sidebar__panel.pf-m-width-33-on-md {
9654
- --pf-c-sidebar__panel--FlexBasis: 33%;
9655
- }
9656
-
9657
- .pf-c-sidebar__panel.pf-m-width-50-on-md {
9658
- --pf-c-sidebar__panel--FlexBasis: 50%;
9659
- }
9660
-
9661
- .pf-c-sidebar__panel.pf-m-width-66-on-md {
9662
- --pf-c-sidebar__panel--FlexBasis: 66%;
9663
- }
9664
-
9665
- .pf-c-sidebar__panel.pf-m-width-75-on-md {
9666
- --pf-c-sidebar__panel--FlexBasis: 75%;
9667
- }
9668
-
9669
- .pf-c-sidebar__panel.pf-m-width-100-on-md {
9670
- --pf-c-sidebar__panel--FlexBasis: 100%;
9671
- }
9672
- }
9673
- @media (min-width: 992px) {
9674
- .pf-c-sidebar__panel.pf-m-width-default-on-lg {
9675
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9676
- }
9677
-
9678
- .pf-c-sidebar__panel.pf-m-width-25-on-lg {
9679
- --pf-c-sidebar__panel--FlexBasis: 25%;
9680
- }
9681
-
9682
- .pf-c-sidebar__panel.pf-m-width-33-on-lg {
9683
- --pf-c-sidebar__panel--FlexBasis: 33%;
9684
- }
9685
-
9686
- .pf-c-sidebar__panel.pf-m-width-50-on-lg {
9687
- --pf-c-sidebar__panel--FlexBasis: 50%;
9688
- }
9689
-
9690
- .pf-c-sidebar__panel.pf-m-width-66-on-lg {
9691
- --pf-c-sidebar__panel--FlexBasis: 66%;
9692
- }
9693
-
9694
- .pf-c-sidebar__panel.pf-m-width-75-on-lg {
9695
- --pf-c-sidebar__panel--FlexBasis: 75%;
9696
- }
9697
-
9698
- .pf-c-sidebar__panel.pf-m-width-100-on-lg {
9699
- --pf-c-sidebar__panel--FlexBasis: 100%;
9700
- }
9701
- }
9702
- @media (min-width: 1200px) {
9703
- .pf-c-sidebar__panel.pf-m-width-default-on-xl {
9704
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9705
- }
9706
-
9707
- .pf-c-sidebar__panel.pf-m-width-25-on-xl {
9708
- --pf-c-sidebar__panel--FlexBasis: 25%;
9709
- }
9710
-
9711
- .pf-c-sidebar__panel.pf-m-width-33-on-xl {
9712
- --pf-c-sidebar__panel--FlexBasis: 33%;
9713
- }
9714
-
9715
- .pf-c-sidebar__panel.pf-m-width-50-on-xl {
9716
- --pf-c-sidebar__panel--FlexBasis: 50%;
9717
- }
9718
-
9719
- .pf-c-sidebar__panel.pf-m-width-66-on-xl {
9720
- --pf-c-sidebar__panel--FlexBasis: 66%;
9721
- }
9722
-
9723
- .pf-c-sidebar__panel.pf-m-width-75-on-xl {
9724
- --pf-c-sidebar__panel--FlexBasis: 75%;
9725
- }
9726
-
9727
- .pf-c-sidebar__panel.pf-m-width-100-on-xl {
9728
- --pf-c-sidebar__panel--FlexBasis: 100%;
9729
- }
9730
- }
9731
- @media (min-width: 1450px) {
9732
- .pf-c-sidebar__panel.pf-m-width-default-on-2xl {
9733
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9734
- }
9735
-
9736
- .pf-c-sidebar__panel.pf-m-width-25-on-2xl {
9737
- --pf-c-sidebar__panel--FlexBasis: 25%;
9738
- }
9739
-
9740
- .pf-c-sidebar__panel.pf-m-width-33-on-2xl {
9741
- --pf-c-sidebar__panel--FlexBasis: 33%;
9742
- }
9743
-
9744
- .pf-c-sidebar__panel.pf-m-width-50-on-2xl {
9745
- --pf-c-sidebar__panel--FlexBasis: 50%;
9746
- }
9747
-
9748
- .pf-c-sidebar__panel.pf-m-width-66-on-2xl {
9749
- --pf-c-sidebar__panel--FlexBasis: 66%;
9750
- }
9751
-
9752
- .pf-c-sidebar__panel.pf-m-width-75-on-2xl {
9753
- --pf-c-sidebar__panel--FlexBasis: 75%;
9754
- }
9755
-
9756
- .pf-c-sidebar__panel.pf-m-width-100-on-2xl {
9757
- --pf-c-sidebar__panel--FlexBasis: 100%;
9758
- }
9759
- }
9760
- .pf-c-jump-links {
9761
- --pf-c-jump-links__list--Display: flex;
9762
- --pf-c-jump-links__list--Visibility: visible;
9763
- --pf-c-jump-links__list--PaddingTop: 0;
9764
- --pf-c-jump-links__list--PaddingRight: var(--pf-global--spacer--md);
9765
- --pf-c-jump-links__list--PaddingBottom: 0;
9766
- --pf-c-jump-links__list--PaddingLeft: var(--pf-global--spacer--md);
9767
- --pf-c-jump-links--m-vertical__list--PaddingTop: var(--pf-global--spacer--md);
9768
- --pf-c-jump-links--m-vertical__list--PaddingRight: 0;
9769
- --pf-c-jump-links--m-vertical__list--PaddingBottom: var(--pf-global--spacer--md);
9770
- --pf-c-jump-links--m-vertical__list--PaddingLeft: 0;
9771
- --pf-c-jump-links__list--FlexDirection: row;
9772
- --pf-c-jump-links--m-vertical__list--FlexDirection: column;
9773
- --pf-c-jump-links__list--before--BorderColor: var(--pf-global--BorderColor--100);
9774
- --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-global--BorderWidth--sm);
9775
- --pf-c-jump-links__list--before--BorderRightWidth: 0;
9776
- --pf-c-jump-links__list--before--BorderBottomWidth: 0;
9777
- --pf-c-jump-links__list--before--BorderLeftWidth: 0;
9778
- --pf-c-jump-links--m-vertical__list--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
9779
- --pf-c-jump-links--m-vertical__list--before--BorderTopWidth: 0;
9780
- --pf-c-jump-links__list__list--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
9781
- --pf-c-jump-links__link--PaddingTop: var(--pf-global--spacer--md);
9782
- --pf-c-jump-links__link--PaddingRight: var(--pf-global--spacer--md);
9783
- --pf-c-jump-links__link--PaddingBottom: var(--pf-global--spacer--md);
9784
- --pf-c-jump-links__link--PaddingLeft: var(--pf-global--spacer--md);
9785
- --pf-c-jump-links__list__list__link--PaddingTop: var(--pf-global--spacer--sm);
9786
- --pf-c-jump-links__list__list__link--PaddingLeft: var(--pf-global--spacer--lg);
9787
- --pf-c-jump-links__list__list__link--PaddingBottom: var(--pf-global--spacer--sm);
9788
- --pf-c-jump-links__link--OutlineOffset: calc(-1 * var(--pf-global--spacer--sm));
9789
- --pf-c-jump-links__link--before--BorderTopWidth: 0;
9790
- --pf-c-jump-links__link--before--BorderRightWidth: 0;
9791
- --pf-c-jump-links__link--before--BorderBottomWidth: 0;
9792
- --pf-c-jump-links__link--before--BorderLeftWidth: 0;
9793
- --pf-c-jump-links__link--before--BorderColor: transparent;
9794
- --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-global--BorderWidth--lg);
9795
- --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: 0;
9796
- --pf-c-jump-links__item--m-current__link--before--BorderColor: var(--pf-global--primary-color--100);
9797
- --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth: 0;
9798
- --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth: var(--pf-global--BorderWidth--lg);
9799
- --pf-c-jump-links__link-text--Color: var(--pf-global--Color--200);
9800
- --pf-c-jump-links__link--hover__link-text--Color: var(--pf-global--Color--100);
9801
- --pf-c-jump-links__link--focus__link-text--Color: var(--pf-global--Color--100);
9802
- --pf-c-jump-links__item--m-current__link-text--Color: var(--pf-global--Color--100);
9803
- --pf-c-jump-links__label--MarginBottom: var(--pf-global--spacer--md);
9804
- --pf-c-jump-links__label--Display: block;
9805
- --pf-c-jump-links__label--Visibility: visible;
9806
- --pf-c-jump-links__toggle--MarginTop: calc(-1 * var(--pf-global--spacer--form-element));
9807
- --pf-c-jump-links__toggle--MarginBottom--base: calc(-1 * var(--pf-global--spacer--form-element));
9808
- --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links__toggle--MarginBottom--base);
9809
- --pf-c-jump-links--m-expanded__toggle--MarginBottom: calc(var(--pf-c-jump-links__toggle--MarginBottom--base) + var(--pf-global--spacer--md));
9810
- --pf-c-jump-links__toggle--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
9811
- --pf-c-jump-links__toggle--Display: none;
9812
- --pf-c-jump-links__toggle--Visibility: hidden;
9813
- --pf-c-jump-links__toggle-icon--Color: currentcolor;
9814
- --pf-c-jump-links__toggle-icon--Transition: var(--pf-global--Transition);
9815
- --pf-c-jump-links__toggle-icon--Rotate: 0;
9816
- --pf-c-jump-links--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
9817
- --pf-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
9818
- --pf-c-jump-links__toggle-text--MarginLeft: var(--pf-global--spacer--md);
9819
- --pf-c-jump-links__toggle-text--Color: var(--pf-global--Color--100);
9820
- display: flex;
9821
- }
9822
-
9823
- .pf-c-jump-links.pf-m-center {
9824
- justify-content: center;
9825
- }
9826
-
9827
- .pf-c-jump-links.pf-m-center .pf-c-jump-links__main {
9828
- align-items: center;
9829
- }
9830
-
9831
- .pf-c-jump-links.pf-m-vertical, .pf-c-jump-links.pf-m-expandable {
9832
- --pf-c-jump-links__list--PaddingTop: var(--pf-c-jump-links--m-vertical__list--PaddingTop);
9833
- --pf-c-jump-links__list--PaddingRight: var(--pf-c-jump-links--m-vertical__list--PaddingRight);
9834
- --pf-c-jump-links__list--PaddingBottom: var(--pf-c-jump-links--m-vertical__list--PaddingBottom);
9835
- --pf-c-jump-links__list--PaddingLeft: var(--pf-c-jump-links--m-vertical__list--PaddingLeft);
9836
- --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderTopWidth);
9837
- --pf-c-jump-links__list--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderLeftWidth);
9838
- --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth);
9839
- --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth);
9840
- --pf-c-jump-links__list--FlexDirection: var(--pf-c-jump-links--m-vertical__list--FlexDirection);
9841
- flex-direction: column;
9842
- }
9843
-
9844
- .pf-c-jump-links.pf-m-expandable {
9845
- --pf-c-jump-links__list--Display: none;
9846
- --pf-c-jump-links__list--Visibility: hidden;
9847
- --pf-c-jump-links__toggle--Display: block;
9848
- --pf-c-jump-links__toggle--Visibility: visible;
9849
- --pf-c-jump-links__label--Display: none;
9850
- --pf-c-jump-links__label--Visibility: hidden;
9851
- }
9852
-
9853
- .pf-c-jump-links.pf-m-non-expandable {
9854
- --pf-c-jump-links__list--Display: flex;
9855
- --pf-c-jump-links__list--Visibility: visible;
9856
- --pf-c-jump-links__toggle--Display: none;
9857
- --pf-c-jump-links__toggle--Visibility: hidden;
9858
- --pf-c-jump-links__label--Display: block;
9859
- --pf-c-jump-links__label--Visibility: visible;
9860
- }
9861
-
9862
- @media (min-width: 576px) {
9863
- .pf-c-jump-links.pf-m-expandable-on-sm {
9864
- --pf-c-jump-links__list--Display: none;
9865
- --pf-c-jump-links__list--Visibility: hidden;
9866
- --pf-c-jump-links__toggle--Display: block;
9867
- --pf-c-jump-links__toggle--Visibility: visible;
9868
- --pf-c-jump-links__label--Display: none;
9869
- --pf-c-jump-links__label--Visibility: hidden;
9870
- }
9871
-
9872
- .pf-c-jump-links.pf-m-non-expandable-on-sm {
9873
- --pf-c-jump-links__list--Display: flex;
9874
- --pf-c-jump-links__list--Visibility: visible;
9875
- --pf-c-jump-links__toggle--Display: none;
9876
- --pf-c-jump-links__toggle--Visibility: hidden;
9877
- --pf-c-jump-links__label--Display: block;
9878
- --pf-c-jump-links__label--Visibility: visible;
9957
+ .pf-c-sidebar__panel.pf-m-width-75-on-sm {
9958
+ --pf-c-sidebar__panel--FlexBasis: 75%;
9959
+ }
9960
+
9961
+ .pf-c-sidebar__panel.pf-m-width-100-on-sm {
9962
+ --pf-c-sidebar__panel--FlexBasis: 100%;
9879
9963
  }
9880
9964
  }
9881
9965
  @media (min-width: 768px) {
9882
- .pf-c-jump-links.pf-m-expandable-on-md {
9883
- --pf-c-jump-links__list--Display: none;
9884
- --pf-c-jump-links__list--Visibility: hidden;
9885
- --pf-c-jump-links__toggle--Display: block;
9886
- --pf-c-jump-links__toggle--Visibility: visible;
9887
- --pf-c-jump-links__label--Display: none;
9888
- --pf-c-jump-links__label--Visibility: hidden;
9966
+ .pf-c-sidebar__panel.pf-m-width-default-on-md {
9967
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9889
9968
  }
9890
9969
 
9891
- .pf-c-jump-links.pf-m-non-expandable-on-md {
9892
- --pf-c-jump-links__list--Display: flex;
9893
- --pf-c-jump-links__list--Visibility: visible;
9894
- --pf-c-jump-links__toggle--Display: none;
9895
- --pf-c-jump-links__toggle--Visibility: hidden;
9896
- --pf-c-jump-links__label--Display: block;
9897
- --pf-c-jump-links__label--Visibility: visible;
9970
+ .pf-c-sidebar__panel.pf-m-width-25-on-md {
9971
+ --pf-c-sidebar__panel--FlexBasis: 25%;
9898
9972
  }
9899
- }
9900
- @media (min-width: 992px) {
9901
- .pf-c-jump-links.pf-m-expandable-on-lg {
9902
- --pf-c-jump-links__list--Display: none;
9903
- --pf-c-jump-links__list--Visibility: hidden;
9904
- --pf-c-jump-links__toggle--Display: block;
9905
- --pf-c-jump-links__toggle--Visibility: visible;
9906
- --pf-c-jump-links__label--Display: none;
9907
- --pf-c-jump-links__label--Visibility: hidden;
9973
+
9974
+ .pf-c-sidebar__panel.pf-m-width-33-on-md {
9975
+ --pf-c-sidebar__panel--FlexBasis: 33%;
9908
9976
  }
9909
9977
 
9910
- .pf-c-jump-links.pf-m-non-expandable-on-lg {
9911
- --pf-c-jump-links__list--Display: flex;
9912
- --pf-c-jump-links__list--Visibility: visible;
9913
- --pf-c-jump-links__toggle--Display: none;
9914
- --pf-c-jump-links__toggle--Visibility: hidden;
9915
- --pf-c-jump-links__label--Display: block;
9916
- --pf-c-jump-links__label--Visibility: visible;
9978
+ .pf-c-sidebar__panel.pf-m-width-50-on-md {
9979
+ --pf-c-sidebar__panel--FlexBasis: 50%;
9917
9980
  }
9918
- }
9919
- @media (min-width: 1200px) {
9920
- .pf-c-jump-links.pf-m-expandable-on-xl {
9921
- --pf-c-jump-links__list--Display: none;
9922
- --pf-c-jump-links__list--Visibility: hidden;
9923
- --pf-c-jump-links__toggle--Display: block;
9924
- --pf-c-jump-links__toggle--Visibility: visible;
9925
- --pf-c-jump-links__label--Display: none;
9926
- --pf-c-jump-links__label--Visibility: hidden;
9981
+
9982
+ .pf-c-sidebar__panel.pf-m-width-66-on-md {
9983
+ --pf-c-sidebar__panel--FlexBasis: 66%;
9927
9984
  }
9928
9985
 
9929
- .pf-c-jump-links.pf-m-non-expandable-on-xl {
9930
- --pf-c-jump-links__list--Display: flex;
9931
- --pf-c-jump-links__list--Visibility: visible;
9932
- --pf-c-jump-links__toggle--Display: none;
9933
- --pf-c-jump-links__toggle--Visibility: hidden;
9934
- --pf-c-jump-links__label--Display: block;
9935
- --pf-c-jump-links__label--Visibility: visible;
9986
+ .pf-c-sidebar__panel.pf-m-width-75-on-md {
9987
+ --pf-c-sidebar__panel--FlexBasis: 75%;
9988
+ }
9989
+
9990
+ .pf-c-sidebar__panel.pf-m-width-100-on-md {
9991
+ --pf-c-sidebar__panel--FlexBasis: 100%;
9936
9992
  }
9937
9993
  }
9938
- @media (min-width: 1450px) {
9939
- .pf-c-jump-links.pf-m-expandable-on-2xl {
9940
- --pf-c-jump-links__list--Display: none;
9941
- --pf-c-jump-links__list--Visibility: hidden;
9942
- --pf-c-jump-links__toggle--Display: block;
9943
- --pf-c-jump-links__toggle--Visibility: visible;
9944
- --pf-c-jump-links__label--Display: none;
9945
- --pf-c-jump-links__label--Visibility: hidden;
9994
+ @media (min-width: 992px) {
9995
+ .pf-c-sidebar__panel.pf-m-width-default-on-lg {
9996
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9946
9997
  }
9947
9998
 
9948
- .pf-c-jump-links.pf-m-non-expandable-on-2xl {
9949
- --pf-c-jump-links__list--Display: flex;
9950
- --pf-c-jump-links__list--Visibility: visible;
9951
- --pf-c-jump-links__toggle--Display: none;
9952
- --pf-c-jump-links__toggle--Visibility: hidden;
9953
- --pf-c-jump-links__label--Display: block;
9954
- --pf-c-jump-links__label--Visibility: visible;
9999
+ .pf-c-sidebar__panel.pf-m-width-25-on-lg {
10000
+ --pf-c-sidebar__panel--FlexBasis: 25%;
9955
10001
  }
9956
- }
9957
- .pf-c-jump-links.pf-m-expanded {
9958
- --pf-c-jump-links__list--Display: flex;
9959
- --pf-c-jump-links__list--Visibility: visible;
9960
- --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links--m-expanded__toggle--MarginBottom);
9961
- --pf-c-jump-links__toggle-icon--Rotate: var(--pf-c-jump-links--m-expanded__toggle-icon--Rotate);
9962
- --pf-c-jump-links__toggle-icon--Color: var(--pf-c-jump-links--m-expanded__toggle-icon--Color);
9963
- }
9964
10002
 
9965
- .pf-c-jump-links__list {
9966
- position: relative;
9967
- display: var(--pf-c-jump-links__list--Display);
9968
- flex-direction: var(--pf-c-jump-links__list--FlexDirection);
9969
- padding-top: var(--pf-c-jump-links__list--PaddingTop);
9970
- padding-right: var(--pf-c-jump-links__list--PaddingRight);
9971
- padding-bottom: var(--pf-c-jump-links__list--PaddingBottom);
9972
- padding-left: var(--pf-c-jump-links__list--PaddingLeft);
9973
- visibility: var(--pf-c-jump-links__list--Visibility);
9974
- }
10003
+ .pf-c-sidebar__panel.pf-m-width-33-on-lg {
10004
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10005
+ }
9975
10006
 
9976
- .pf-c-jump-links__list::before {
9977
- position: absolute;
9978
- top: 0;
9979
- right: 0;
9980
- bottom: 0;
9981
- left: 0;
9982
- pointer-events: none;
9983
- content: "";
9984
- border: solid var(--pf-c-jump-links__list--before--BorderColor);
9985
- 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);
9986
- }
10007
+ .pf-c-sidebar__panel.pf-m-width-50-on-lg {
10008
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10009
+ }
9987
10010
 
9988
- .pf-c-jump-links__list .pf-c-jump-links__list {
9989
- --pf-c-jump-links__list--PaddingTop: 0;
9990
- --pf-c-jump-links__list--PaddingBottom: 0;
9991
- --pf-c-jump-links__link--PaddingTop: var(--pf-c-jump-links__list__list__link--PaddingTop);
9992
- --pf-c-jump-links__link--PaddingBottom: var(--pf-c-jump-links__list__list__link--PaddingBottom);
9993
- --pf-c-jump-links__link--PaddingLeft: var(--pf-c-jump-links__list__list__link--PaddingLeft);
9994
- margin-top: var(--pf-c-jump-links__list__list--MarginTop);
9995
- }
10011
+ .pf-c-sidebar__panel.pf-m-width-66-on-lg {
10012
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10013
+ }
9996
10014
 
9997
- .pf-c-jump-links__link {
9998
- position: relative;
9999
- display: flex;
10000
- flex: 1;
10001
- padding-top: var(--pf-c-jump-links__link--PaddingTop);
10002
- padding-right: var(--pf-c-jump-links__link--PaddingRight);
10003
- padding-bottom: var(--pf-c-jump-links__link--PaddingBottom);
10004
- padding-left: var(--pf-c-jump-links__link--PaddingLeft);
10005
- text-decoration: none;
10006
- outline-offset: var(--pf-c-jump-links__link--OutlineOffset);
10007
- }
10015
+ .pf-c-sidebar__panel.pf-m-width-75-on-lg {
10016
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10017
+ }
10008
10018
 
10009
- .pf-c-jump-links__link:hover {
10010
- --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--hover__link-text--Color);
10019
+ .pf-c-sidebar__panel.pf-m-width-100-on-lg {
10020
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10021
+ }
10011
10022
  }
10023
+ @media (min-width: 1200px) {
10024
+ .pf-c-sidebar__panel.pf-m-width-default-on-xl {
10025
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10026
+ }
10012
10027
 
10013
- .pf-c-jump-links__link:focus {
10014
- --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--focus__link-text--Color);
10015
- }
10028
+ .pf-c-sidebar__panel.pf-m-width-25-on-xl {
10029
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10030
+ }
10016
10031
 
10017
- .pf-c-jump-links__link::before {
10018
- position: absolute;
10019
- top: 0;
10020
- right: 0;
10021
- bottom: 0;
10022
- left: 0;
10023
- pointer-events: none;
10024
- content: "";
10025
- border-color: var(--pf-c-jump-links__link--before--BorderColor);
10026
- border-style: solid;
10027
- 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);
10028
- }
10032
+ .pf-c-sidebar__panel.pf-m-width-33-on-xl {
10033
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10034
+ }
10029
10035
 
10030
- .pf-c-jump-links__item {
10031
- --pf-c-jump-links__list--before--BorderColor: transparent;
10032
- }
10036
+ .pf-c-sidebar__panel.pf-m-width-50-on-xl {
10037
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10038
+ }
10033
10039
 
10034
- .pf-c-jump-links__item.pf-m-current > .pf-c-jump-links__link {
10035
- --pf-c-jump-links__link--before--BorderTopWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderTopWidth);
10036
- --pf-c-jump-links__link--before--BorderLeftWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderLeftWidth);
10037
- --pf-c-jump-links__link--before--BorderColor: var(--pf-c-jump-links__item--m-current__link--before--BorderColor);
10038
- --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__item--m-current__link-text--Color);
10039
- }
10040
+ .pf-c-sidebar__panel.pf-m-width-66-on-xl {
10041
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10042
+ }
10040
10043
 
10041
- .pf-c-jump-links__link-text {
10042
- color: var(--pf-c-jump-links__link-text--Color);
10043
- }
10044
+ .pf-c-sidebar__panel.pf-m-width-75-on-xl {
10045
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10046
+ }
10044
10047
 
10045
- .pf-c-jump-links__label {
10046
- display: var(--pf-c-jump-links__label--Display);
10047
- margin-bottom: var(--pf-c-jump-links__label--MarginBottom);
10048
- visibility: var(--pf-c-jump-links__label--Visibility);
10048
+ .pf-c-sidebar__panel.pf-m-width-100-on-xl {
10049
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10050
+ }
10049
10051
  }
10052
+ @media (min-width: 1450px) {
10053
+ .pf-c-sidebar__panel.pf-m-width-default-on-2xl {
10054
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10055
+ }
10050
10056
 
10051
- .pf-c-jump-links__main {
10052
- display: flex;
10053
- flex-direction: column;
10054
- }
10057
+ .pf-c-sidebar__panel.pf-m-width-25-on-2xl {
10058
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10059
+ }
10055
10060
 
10056
- .pf-c-jump-links__toggle {
10057
- display: var(--pf-c-jump-links__toggle--Display);
10058
- margin-top: var(--pf-c-jump-links__toggle--MarginTop);
10059
- margin-bottom: var(--pf-c-jump-links__toggle--MarginBottom);
10060
- margin-left: var(--pf-c-jump-links__toggle--MarginLeft);
10061
- visibility: var(--pf-c-jump-links__toggle--Visibility);
10062
- }
10061
+ .pf-c-sidebar__panel.pf-m-width-33-on-2xl {
10062
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10063
+ }
10063
10064
 
10064
- .pf-c-jump-links__toggle .pf-c-button {
10065
- display: flex;
10066
- align-items: center;
10067
- }
10065
+ .pf-c-sidebar__panel.pf-m-width-50-on-2xl {
10066
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10067
+ }
10068
10068
 
10069
- .pf-c-jump-links__toggle-icon {
10070
- display: inline-block;
10071
- color: var(--pf-c-jump-links__toggle-icon--Color);
10072
- transition: var(--pf-c-jump-links__toggle-icon--Transition);
10073
- transform: rotate(var(--pf-c-jump-links__toggle-icon--Rotate));
10074
- }
10069
+ .pf-c-sidebar__panel.pf-m-width-66-on-2xl {
10070
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10071
+ }
10075
10072
 
10076
- .pf-c-jump-links__toggle-text {
10077
- margin-left: var(--pf-c-jump-links__toggle-text--MarginLeft);
10078
- color: var(--pf-c-jump-links__toggle-text--Color);
10079
- }
10073
+ .pf-c-sidebar__panel.pf-m-width-75-on-2xl {
10074
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10075
+ }
10080
10076
 
10077
+ .pf-c-sidebar__panel.pf-m-width-100-on-2xl {
10078
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10079
+ }
10080
+ }
10081
10081
  .pf-c-label {
10082
10082
  --pf-c-label--PaddingTop: var(--pf-global--spacer--xs);
10083
10083
  --pf-c-label--PaddingRight: var(--pf-global--spacer--sm);