@patternfly/react-core 4.228.1 → 4.230.1

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 (104) hide show
  1. package/CHANGELOG.md +30 -0
  2. package/dist/esm/components/ContextSelector/ContextSelector.d.ts +4 -2
  3. package/dist/esm/components/ContextSelector/ContextSelector.d.ts.map +1 -1
  4. package/dist/esm/components/ContextSelector/ContextSelector.js.map +1 -1
  5. package/dist/esm/components/ContextSelector/ContextSelectorToggle.d.ts +4 -2
  6. package/dist/esm/components/ContextSelector/ContextSelectorToggle.d.ts.map +1 -1
  7. package/dist/esm/components/ContextSelector/ContextSelectorToggle.js.map +1 -1
  8. package/dist/esm/components/DescriptionList/DescriptionList.d.ts +4 -0
  9. package/dist/esm/components/DescriptionList/DescriptionList.d.ts.map +1 -1
  10. package/dist/esm/components/DescriptionList/DescriptionList.js +5 -2
  11. package/dist/esm/components/DescriptionList/DescriptionList.js.map +1 -1
  12. package/dist/esm/components/DescriptionList/DescriptionListGroup.js.map +1 -1
  13. package/dist/esm/components/Page/Page.d.ts +13 -0
  14. package/dist/esm/components/Page/Page.d.ts.map +1 -1
  15. package/dist/esm/components/Page/Page.js +18 -19
  16. package/dist/esm/components/Page/Page.js.map +1 -1
  17. package/dist/esm/components/Page/PageBreadcrumb.d.ts +11 -2
  18. package/dist/esm/components/Page/PageBreadcrumb.d.ts.map +1 -1
  19. package/dist/esm/components/Page/PageBreadcrumb.js +5 -2
  20. package/dist/esm/components/Page/PageBreadcrumb.js.map +1 -1
  21. package/dist/esm/components/Page/PageGroup.d.ts +11 -2
  22. package/dist/esm/components/Page/PageGroup.d.ts.map +1 -1
  23. package/dist/esm/components/Page/PageGroup.js +5 -2
  24. package/dist/esm/components/Page/PageGroup.js.map +1 -1
  25. package/dist/esm/components/Page/PageNavigation.d.ts +11 -2
  26. package/dist/esm/components/Page/PageNavigation.d.ts.map +1 -1
  27. package/dist/esm/components/Page/PageNavigation.js +5 -2
  28. package/dist/esm/components/Page/PageNavigation.js.map +1 -1
  29. package/dist/esm/components/Page/PageSection.d.ts +10 -1
  30. package/dist/esm/components/Page/PageSection.d.ts.map +1 -1
  31. package/dist/esm/components/Page/PageSection.js +4 -2
  32. package/dist/esm/components/Page/PageSection.js.map +1 -1
  33. package/dist/esm/helpers/constants.d.ts +14 -0
  34. package/dist/esm/helpers/constants.d.ts.map +1 -1
  35. package/dist/esm/helpers/constants.js +24 -0
  36. package/dist/esm/helpers/constants.js.map +1 -1
  37. package/dist/esm/helpers/util.d.ts +8 -1
  38. package/dist/esm/helpers/util.d.ts.map +1 -1
  39. package/dist/esm/helpers/util.js +36 -9
  40. package/dist/esm/helpers/util.js.map +1 -1
  41. package/dist/js/components/ContextSelector/ContextSelector.d.ts +4 -2
  42. package/dist/js/components/ContextSelector/ContextSelector.d.ts.map +1 -1
  43. package/dist/js/components/ContextSelector/ContextSelector.js.map +1 -1
  44. package/dist/js/components/ContextSelector/ContextSelectorToggle.d.ts +4 -2
  45. package/dist/js/components/ContextSelector/ContextSelectorToggle.d.ts.map +1 -1
  46. package/dist/js/components/ContextSelector/ContextSelectorToggle.js.map +1 -1
  47. package/dist/js/components/DescriptionList/DescriptionList.d.ts +4 -0
  48. package/dist/js/components/DescriptionList/DescriptionList.d.ts.map +1 -1
  49. package/dist/js/components/DescriptionList/DescriptionList.js +5 -2
  50. package/dist/js/components/DescriptionList/DescriptionList.js.map +1 -1
  51. package/dist/js/components/DescriptionList/DescriptionListGroup.js.map +1 -1
  52. package/dist/js/components/Page/Page.d.ts +13 -0
  53. package/dist/js/components/Page/Page.d.ts.map +1 -1
  54. package/dist/js/components/Page/Page.js +17 -18
  55. package/dist/js/components/Page/Page.js.map +1 -1
  56. package/dist/js/components/Page/PageBreadcrumb.d.ts +11 -2
  57. package/dist/js/components/Page/PageBreadcrumb.d.ts.map +1 -1
  58. package/dist/js/components/Page/PageBreadcrumb.js +5 -2
  59. package/dist/js/components/Page/PageBreadcrumb.js.map +1 -1
  60. package/dist/js/components/Page/PageGroup.d.ts +11 -2
  61. package/dist/js/components/Page/PageGroup.d.ts.map +1 -1
  62. package/dist/js/components/Page/PageGroup.js +5 -2
  63. package/dist/js/components/Page/PageGroup.js.map +1 -1
  64. package/dist/js/components/Page/PageNavigation.d.ts +11 -2
  65. package/dist/js/components/Page/PageNavigation.d.ts.map +1 -1
  66. package/dist/js/components/Page/PageNavigation.js +5 -2
  67. package/dist/js/components/Page/PageNavigation.js.map +1 -1
  68. package/dist/js/components/Page/PageSection.d.ts +10 -1
  69. package/dist/js/components/Page/PageSection.d.ts.map +1 -1
  70. package/dist/js/components/Page/PageSection.js +4 -2
  71. package/dist/js/components/Page/PageSection.js.map +1 -1
  72. package/dist/js/helpers/constants.d.ts +14 -0
  73. package/dist/js/helpers/constants.d.ts.map +1 -1
  74. package/dist/js/helpers/constants.js +26 -1
  75. package/dist/js/helpers/constants.js.map +1 -1
  76. package/dist/js/helpers/util.d.ts +8 -1
  77. package/dist/js/helpers/util.d.ts.map +1 -1
  78. package/dist/js/helpers/util.js +37 -9
  79. package/dist/js/helpers/util.js.map +1 -1
  80. package/dist/umd/react-core.css +119 -69
  81. package/dist/umd/react-core.js +160 -67
  82. package/dist/umd/react-core.min.css +438 -388
  83. package/dist/umd/react-core.min.js +6 -5
  84. package/package.json +6 -6
  85. package/src/components/ContextSelector/ContextSelector.tsx +4 -2
  86. package/src/components/ContextSelector/ContextSelectorToggle.tsx +4 -2
  87. package/src/components/DescriptionList/DescriptionList.tsx +14 -0
  88. package/src/components/DescriptionList/DescriptionListGroup.tsx +1 -0
  89. package/src/components/DescriptionList/examples/DescriptionList.md +31 -1
  90. package/src/components/DescriptionList/examples/DescriptionListDisplaySizeAndCard.tsx +63 -0
  91. package/src/components/DescriptionList/examples/DescriptionListDisplaySizeAndCardHorizontalTermWidth.tsx +34 -0
  92. package/src/components/DescriptionList/examples/DescriptionListDisplaySizeAndCardThreeColumn.tsx +34 -0
  93. package/src/components/DescriptionList/examples/DescriptionListWithCard.tsx +62 -0
  94. package/src/components/DescriptionList/examples/DescriptionListWithDisplaySize.tsx +63 -0
  95. package/src/components/Page/Page.tsx +58 -21
  96. package/src/components/Page/PageBreadcrumb.tsx +37 -20
  97. package/src/components/Page/PageGroup.tsx +35 -19
  98. package/src/components/Page/PageNavigation.tsx +37 -20
  99. package/src/components/Page/PageSection.tsx +41 -25
  100. package/src/components/Page/__tests__/Page.test.tsx +126 -2
  101. package/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap +683 -14
  102. package/src/demos/Page/Page.md +356 -3
  103. package/src/helpers/constants.ts +28 -0
  104. package/src/helpers/util.ts +44 -9
@@ -9434,329 +9434,6 @@ label.pf-c-input-group__text {
9434
9434
  --pf-c-input-group__text--BackgroundColor: transparent;
9435
9435
  }
9436
9436
 
9437
- .pf-c-sidebar {
9438
- --pf-c-sidebar--BackgroundColor: var(--pf-global--BackgroundColor--100);
9439
- --pf-c-sidebar__main--FlexDirection: column;
9440
- --pf-c-sidebar__main--md--FlexDirection: row;
9441
- --pf-c-sidebar__main--AlignItems: stretch;
9442
- --pf-c-sidebar__main--md--AlignItems: start;
9443
- --pf-c-sidebar__main--child--MarginTop: 0;
9444
- --pf-c-sidebar__main--child--MarginLeft: 0;
9445
- --pf-c-sidebar--m-gutter__main--Gap: var(--pf-global--spacer--md);
9446
- --pf-c-sidebar--m-gutter__main--xl--Gap: var(--pf-global--spacer--lg);
9447
- --pf-c-sidebar--m-panel-right__panel--Order: 0;
9448
- --pf-c-sidebar--m-panel-right__panel--md--Order: 1;
9449
- --pf-c-sidebar--m-stack__main--FlexDirection: column;
9450
- --pf-c-sidebar--m-stack__main--AlignItems: stretch;
9451
- --pf-c-sidebar--m-stack__panel--Position: sticky;
9452
- --pf-c-sidebar--m-stack__panel--Top: 0;
9453
- --pf-c-sidebar--m-stack__panel--BoxShadow: var(--pf-c-sidebar__panel--BoxShadow--base);
9454
- --pf-c-sidebar--m-stack--m-panel-right__panel--Order: 0;
9455
- --pf-c-sidebar--m-split__main--AlignItems: start;
9456
- --pf-c-sidebar--m-split__main--FlexDirection: row;
9457
- --pf-c-sidebar--m-split__panel--Position: static;
9458
- --pf-c-sidebar--m-split__panel--Top: auto;
9459
- --pf-c-sidebar--m-split--m-panel-right__panel--Order: 1;
9460
- --pf-c-sidebar__panel--FlexBasis--base: auto;
9461
- --pf-c-sidebar__panel--BoxShadow--base: 0 0.25rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
9462
- --pf-c-sidebar__panel--BoxShadow: var(--pf-c-sidebar__panel--BoxShadow--base);
9463
- --pf-c-sidebar__panel--Top: 0;
9464
- --pf-c-sidebar__panel--md--Top: auto;
9465
- --pf-c-sidebar__panel--Position: sticky;
9466
- --pf-c-sidebar__panel--md--Position: static;
9467
- --pf-c-sidebar__panel--FlexBasis-base: auto;
9468
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis-base);
9469
- --pf-c-sidebar__panel--md--FlexBasis: 15.625rem;
9470
- --pf-c-sidebar__panel--m-split--FlexBasis: 15.625rem;
9471
- --pf-c-sidebar__panel--m-stack--FlexBasis: auto;
9472
- --pf-c-sidebar__panel--ZIndex: var(--pf-global--ZIndex--xs);
9473
- --pf-c-sidebar__panel--Order: 0;
9474
- --pf-c-sidebar__panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
9475
- --pf-c-sidebar__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
9476
- --pf-c-sidebar__panel--m-sticky--Top: 0;
9477
- --pf-c-sidebar__panel--m-sticky--Position: sticky;
9478
- height: 100%;
9479
- }
9480
-
9481
- @media (min-width: 768px) {
9482
- .pf-c-sidebar {
9483
- --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar__main--md--FlexDirection);
9484
- --pf-c-sidebar__panel--BoxShadow: none;
9485
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--md--FlexBasis);
9486
- --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar__main--md--AlignItems);
9487
- --pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--md--Top);
9488
- --pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--md--Position);
9489
- }
9490
- }
9491
- @media (min-width: 1200px) {
9492
- .pf-c-sidebar {
9493
- --pf-c-sidebar--m-gutter__main--Gap: var(--pf-c-sidebar--m-gutter__main--xl--Gap);
9494
- }
9495
- }
9496
- .pf-c-sidebar.pf-m-gutter {
9497
- --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
9498
- --pf-c-sidebar__main--child--MarginLeft: 0;
9499
- }
9500
-
9501
- .pf-c-sidebar.pf-m-gutter > .pf-c-sidebar__main > * + * {
9502
- margin-top: var(--pf-c-sidebar__main--child--MarginTop);
9503
- margin-left: var(--pf-c-sidebar__main--child--MarginLeft);
9504
- }
9505
-
9506
- @media (min-width: 768px) {
9507
- .pf-c-sidebar.pf-m-gutter {
9508
- --pf-c-sidebar__main--child--MarginTop: 0;
9509
- --pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
9510
- }
9511
- }
9512
- .pf-c-sidebar.pf-m-panel-right {
9513
- --pf-c-sidebar__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--Order);
9514
- }
9515
-
9516
- @media (min-width: 768px) {
9517
- .pf-c-sidebar.pf-m-panel-right {
9518
- --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--md--Order);
9519
- }
9520
- }
9521
- .pf-c-sidebar.pf-m-stack {
9522
- --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-stack__main--FlexDirection);
9523
- --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-stack__main--AlignItems);
9524
- --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
9525
- --pf-c-sidebar__main--child--MarginLeft: 0;
9526
- --pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-stack__panel--Position);
9527
- --pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-stack__panel--Top);
9528
- --pf-c-sidebar__panel--BoxShadow: var(--pf-c-sidebar--m-stack__panel--BoxShadow);
9529
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-stack--FlexBasis);
9530
- --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-stack--m-panel-right__panel--Order);
9531
- }
9532
-
9533
- .pf-c-sidebar.pf-m-split {
9534
- --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-split__main--FlexDirection);
9535
- --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-split__main--AlignItems);
9536
- --pf-c-sidebar__main--child--MarginTop: 0;
9537
- --pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
9538
- --pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-split__panel--Position);
9539
- --pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-split__panel--Top);
9540
- --pf-c-sidebar__panel--BoxShadow: none;
9541
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-split--FlexBasis);
9542
- --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-split--m-panel-right__panel--Order);
9543
- }
9544
-
9545
- .pf-c-sidebar__main {
9546
- display: flex;
9547
- flex-direction: var(--pf-c-sidebar__main--FlexDirection);
9548
- align-items: var(--pf-c-sidebar__main--AlignItems);
9549
- }
9550
-
9551
- .pf-c-sidebar__panel {
9552
- position: var(--pf-c-sidebar__panel--Position);
9553
- top: var(--pf-c-sidebar__panel--Top);
9554
- z-index: var(--pf-c-sidebar__panel--ZIndex);
9555
- flex-shrink: 0;
9556
- flex-basis: var(--pf-c-sidebar__panel--FlexBasis);
9557
- order: var(--pf-c-sidebar__panel--Order);
9558
- background-color: var(--pf-c-sidebar__panel--BackgroundColor);
9559
- box-shadow: var(--pf-c-sidebar__panel--BoxShadow);
9560
- }
9561
-
9562
- .pf-c-sidebar__panel.pf-m-sticky {
9563
- --pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--m-sticky--Position);
9564
- --pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--m-sticky--Top);
9565
- }
9566
-
9567
- .pf-c-sidebar__panel.pf-m-static {
9568
- --pf-c-sidebar__panel--Position: static;
9569
- --pf-c-sidebar__panel--Top: auto;
9570
- }
9571
-
9572
- .pf-c-sidebar__content {
9573
- flex-grow: 1;
9574
- background-color: var(--pf-c-sidebar__content--BackgroundColor);
9575
- }
9576
-
9577
- .pf-c-sidebar__content.pf-m-no-background {
9578
- --pf-c-sidebar__content--BackgroundColor: transparent;
9579
- }
9580
-
9581
- .pf-c-sidebar.pf-m-no-background,
9582
- .pf-c-sidebar__panel.pf-m-no-background,
9583
- .pf-c-sidebar__content.pf-m-no-background {
9584
- background-color: transparent;
9585
- }
9586
-
9587
- .pf-c-sidebar__panel.pf-m-width-default {
9588
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9589
- }
9590
-
9591
- .pf-c-sidebar__panel.pf-m-width-25 {
9592
- --pf-c-sidebar__panel--FlexBasis: 25%;
9593
- }
9594
-
9595
- .pf-c-sidebar__panel.pf-m-width-33 {
9596
- --pf-c-sidebar__panel--FlexBasis: 33%;
9597
- }
9598
-
9599
- .pf-c-sidebar__panel.pf-m-width-50 {
9600
- --pf-c-sidebar__panel--FlexBasis: 50%;
9601
- }
9602
-
9603
- .pf-c-sidebar__panel.pf-m-width-66 {
9604
- --pf-c-sidebar__panel--FlexBasis: 66%;
9605
- }
9606
-
9607
- .pf-c-sidebar__panel.pf-m-width-75 {
9608
- --pf-c-sidebar__panel--FlexBasis: 75%;
9609
- }
9610
-
9611
- .pf-c-sidebar__panel.pf-m-width-100 {
9612
- --pf-c-sidebar__panel--FlexBasis: 100%;
9613
- }
9614
-
9615
- @media (min-width: 576px) {
9616
- .pf-c-sidebar__panel.pf-m-width-default-on-sm {
9617
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9618
- }
9619
-
9620
- .pf-c-sidebar__panel.pf-m-width-25-on-sm {
9621
- --pf-c-sidebar__panel--FlexBasis: 25%;
9622
- }
9623
-
9624
- .pf-c-sidebar__panel.pf-m-width-33-on-sm {
9625
- --pf-c-sidebar__panel--FlexBasis: 33%;
9626
- }
9627
-
9628
- .pf-c-sidebar__panel.pf-m-width-50-on-sm {
9629
- --pf-c-sidebar__panel--FlexBasis: 50%;
9630
- }
9631
-
9632
- .pf-c-sidebar__panel.pf-m-width-66-on-sm {
9633
- --pf-c-sidebar__panel--FlexBasis: 66%;
9634
- }
9635
-
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
9437
  .pf-c-jump-links {
9761
9438
  --pf-c-jump-links__list--Display: flex;
9762
9439
  --pf-c-jump-links__list--Visibility: visible;
@@ -9985,99 +9662,422 @@ label.pf-c-input-group__text {
9985
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);
9986
9663
  }
9987
9664
 
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);
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
+
9758
+ .pf-c-sidebar {
9759
+ --pf-c-sidebar--BackgroundColor: var(--pf-global--BackgroundColor--100);
9760
+ --pf-c-sidebar__main--FlexDirection: column;
9761
+ --pf-c-sidebar__main--md--FlexDirection: row;
9762
+ --pf-c-sidebar__main--AlignItems: stretch;
9763
+ --pf-c-sidebar__main--md--AlignItems: start;
9764
+ --pf-c-sidebar__main--child--MarginTop: 0;
9765
+ --pf-c-sidebar__main--child--MarginLeft: 0;
9766
+ --pf-c-sidebar--m-gutter__main--Gap: var(--pf-global--spacer--md);
9767
+ --pf-c-sidebar--m-gutter__main--xl--Gap: var(--pf-global--spacer--lg);
9768
+ --pf-c-sidebar--m-panel-right__panel--Order: 0;
9769
+ --pf-c-sidebar--m-panel-right__panel--md--Order: 1;
9770
+ --pf-c-sidebar--m-stack__main--FlexDirection: column;
9771
+ --pf-c-sidebar--m-stack__main--AlignItems: stretch;
9772
+ --pf-c-sidebar--m-stack__panel--Position: sticky;
9773
+ --pf-c-sidebar--m-stack__panel--Top: 0;
9774
+ --pf-c-sidebar--m-stack__panel--BoxShadow: var(--pf-c-sidebar__panel--BoxShadow--base);
9775
+ --pf-c-sidebar--m-stack--m-panel-right__panel--Order: 0;
9776
+ --pf-c-sidebar--m-split__main--AlignItems: start;
9777
+ --pf-c-sidebar--m-split__main--FlexDirection: row;
9778
+ --pf-c-sidebar--m-split__panel--Position: static;
9779
+ --pf-c-sidebar--m-split__panel--Top: auto;
9780
+ --pf-c-sidebar--m-split--m-panel-right__panel--Order: 1;
9781
+ --pf-c-sidebar__panel--FlexBasis--base: auto;
9782
+ --pf-c-sidebar__panel--BoxShadow--base: 0 0.25rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
9783
+ --pf-c-sidebar__panel--BoxShadow: var(--pf-c-sidebar__panel--BoxShadow--base);
9784
+ --pf-c-sidebar__panel--Top: 0;
9785
+ --pf-c-sidebar__panel--md--Top: auto;
9786
+ --pf-c-sidebar__panel--Position: sticky;
9787
+ --pf-c-sidebar__panel--md--Position: static;
9788
+ --pf-c-sidebar__panel--FlexBasis-base: auto;
9789
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis-base);
9790
+ --pf-c-sidebar__panel--md--FlexBasis: 15.625rem;
9791
+ --pf-c-sidebar__panel--m-split--FlexBasis: 15.625rem;
9792
+ --pf-c-sidebar__panel--m-stack--FlexBasis: auto;
9793
+ --pf-c-sidebar__panel--ZIndex: var(--pf-global--ZIndex--xs);
9794
+ --pf-c-sidebar__panel--Order: 0;
9795
+ --pf-c-sidebar__panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
9796
+ --pf-c-sidebar__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
9797
+ --pf-c-sidebar__panel--m-sticky--Top: 0;
9798
+ --pf-c-sidebar__panel--m-sticky--Position: sticky;
9799
+ height: 100%;
9800
+ }
9801
+
9802
+ @media (min-width: 768px) {
9803
+ .pf-c-sidebar {
9804
+ --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar__main--md--FlexDirection);
9805
+ --pf-c-sidebar__panel--BoxShadow: none;
9806
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--md--FlexBasis);
9807
+ --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar__main--md--AlignItems);
9808
+ --pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--md--Top);
9809
+ --pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--md--Position);
9810
+ }
9811
+ }
9812
+ @media (min-width: 1200px) {
9813
+ .pf-c-sidebar {
9814
+ --pf-c-sidebar--m-gutter__main--Gap: var(--pf-c-sidebar--m-gutter__main--xl--Gap);
9815
+ }
9816
+ }
9817
+ .pf-c-sidebar.pf-m-gutter {
9818
+ --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
9819
+ --pf-c-sidebar__main--child--MarginLeft: 0;
9820
+ }
9821
+
9822
+ .pf-c-sidebar.pf-m-gutter > .pf-c-sidebar__main > * + * {
9823
+ margin-top: var(--pf-c-sidebar__main--child--MarginTop);
9824
+ margin-left: var(--pf-c-sidebar__main--child--MarginLeft);
9825
+ }
9826
+
9827
+ @media (min-width: 768px) {
9828
+ .pf-c-sidebar.pf-m-gutter {
9829
+ --pf-c-sidebar__main--child--MarginTop: 0;
9830
+ --pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
9831
+ }
9832
+ }
9833
+ .pf-c-sidebar.pf-m-panel-right {
9834
+ --pf-c-sidebar__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--Order);
9835
+ }
9836
+
9837
+ @media (min-width: 768px) {
9838
+ .pf-c-sidebar.pf-m-panel-right {
9839
+ --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--md--Order);
9840
+ }
9841
+ }
9842
+ .pf-c-sidebar.pf-m-stack {
9843
+ --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-stack__main--FlexDirection);
9844
+ --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-stack__main--AlignItems);
9845
+ --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
9846
+ --pf-c-sidebar__main--child--MarginLeft: 0;
9847
+ --pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-stack__panel--Position);
9848
+ --pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-stack__panel--Top);
9849
+ --pf-c-sidebar__panel--BoxShadow: var(--pf-c-sidebar--m-stack__panel--BoxShadow);
9850
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-stack--FlexBasis);
9851
+ --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-stack--m-panel-right__panel--Order);
9852
+ }
9853
+
9854
+ .pf-c-sidebar.pf-m-split {
9855
+ --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-split__main--FlexDirection);
9856
+ --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-split__main--AlignItems);
9857
+ --pf-c-sidebar__main--child--MarginTop: 0;
9858
+ --pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
9859
+ --pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-split__panel--Position);
9860
+ --pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-split__panel--Top);
9861
+ --pf-c-sidebar__panel--BoxShadow: none;
9862
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-split--FlexBasis);
9863
+ --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-split--m-panel-right__panel--Order);
9864
+ }
9865
+
9866
+ .pf-c-sidebar__main {
9867
+ display: flex;
9868
+ flex-direction: var(--pf-c-sidebar__main--FlexDirection);
9869
+ align-items: var(--pf-c-sidebar__main--AlignItems);
9870
+ }
9871
+
9872
+ .pf-c-sidebar__panel {
9873
+ position: var(--pf-c-sidebar__panel--Position);
9874
+ top: var(--pf-c-sidebar__panel--Top);
9875
+ z-index: var(--pf-c-sidebar__panel--ZIndex);
9876
+ flex-shrink: 0;
9877
+ flex-basis: var(--pf-c-sidebar__panel--FlexBasis);
9878
+ order: var(--pf-c-sidebar__panel--Order);
9879
+ background-color: var(--pf-c-sidebar__panel--BackgroundColor);
9880
+ box-shadow: var(--pf-c-sidebar__panel--BoxShadow);
9881
+ }
9882
+
9883
+ .pf-c-sidebar__panel.pf-m-sticky {
9884
+ --pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--m-sticky--Position);
9885
+ --pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--m-sticky--Top);
9886
+ }
9887
+
9888
+ .pf-c-sidebar__panel.pf-m-static {
9889
+ --pf-c-sidebar__panel--Position: static;
9890
+ --pf-c-sidebar__panel--Top: auto;
9891
+ }
9892
+
9893
+ .pf-c-sidebar__content {
9894
+ flex-grow: 1;
9895
+ background-color: var(--pf-c-sidebar__content--BackgroundColor);
9995
9896
  }
9996
9897
 
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);
9898
+ .pf-c-sidebar__content.pf-m-no-background {
9899
+ --pf-c-sidebar__content--BackgroundColor: transparent;
10007
9900
  }
10008
9901
 
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);
9902
+ .pf-c-sidebar.pf-m-no-background,
9903
+ .pf-c-sidebar__panel.pf-m-no-background,
9904
+ .pf-c-sidebar__content.pf-m-no-background {
9905
+ background-color: transparent;
10011
9906
  }
10012
9907
 
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);
9908
+ .pf-c-sidebar__panel.pf-m-width-default {
9909
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10015
9910
  }
10016
9911
 
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);
9912
+ .pf-c-sidebar__panel.pf-m-width-25 {
9913
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10028
9914
  }
10029
9915
 
10030
- .pf-c-jump-links__item {
10031
- --pf-c-jump-links__list--before--BorderColor: transparent;
9916
+ .pf-c-sidebar__panel.pf-m-width-33 {
9917
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10032
9918
  }
10033
9919
 
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);
9920
+ .pf-c-sidebar__panel.pf-m-width-50 {
9921
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10039
9922
  }
10040
9923
 
10041
- .pf-c-jump-links__link-text {
10042
- color: var(--pf-c-jump-links__link-text--Color);
9924
+ .pf-c-sidebar__panel.pf-m-width-66 {
9925
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10043
9926
  }
10044
9927
 
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);
9928
+ .pf-c-sidebar__panel.pf-m-width-75 {
9929
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10049
9930
  }
10050
9931
 
10051
- .pf-c-jump-links__main {
10052
- display: flex;
10053
- flex-direction: column;
9932
+ .pf-c-sidebar__panel.pf-m-width-100 {
9933
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10054
9934
  }
10055
9935
 
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);
9936
+ @media (min-width: 576px) {
9937
+ .pf-c-sidebar__panel.pf-m-width-default-on-sm {
9938
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9939
+ }
9940
+
9941
+ .pf-c-sidebar__panel.pf-m-width-25-on-sm {
9942
+ --pf-c-sidebar__panel--FlexBasis: 25%;
9943
+ }
9944
+
9945
+ .pf-c-sidebar__panel.pf-m-width-33-on-sm {
9946
+ --pf-c-sidebar__panel--FlexBasis: 33%;
9947
+ }
9948
+
9949
+ .pf-c-sidebar__panel.pf-m-width-50-on-sm {
9950
+ --pf-c-sidebar__panel--FlexBasis: 50%;
9951
+ }
9952
+
9953
+ .pf-c-sidebar__panel.pf-m-width-66-on-sm {
9954
+ --pf-c-sidebar__panel--FlexBasis: 66%;
9955
+ }
9956
+
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%;
9963
+ }
10062
9964
  }
9965
+ @media (min-width: 768px) {
9966
+ .pf-c-sidebar__panel.pf-m-width-default-on-md {
9967
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9968
+ }
10063
9969
 
10064
- .pf-c-jump-links__toggle .pf-c-button {
10065
- display: flex;
10066
- align-items: center;
9970
+ .pf-c-sidebar__panel.pf-m-width-25-on-md {
9971
+ --pf-c-sidebar__panel--FlexBasis: 25%;
9972
+ }
9973
+
9974
+ .pf-c-sidebar__panel.pf-m-width-33-on-md {
9975
+ --pf-c-sidebar__panel--FlexBasis: 33%;
9976
+ }
9977
+
9978
+ .pf-c-sidebar__panel.pf-m-width-50-on-md {
9979
+ --pf-c-sidebar__panel--FlexBasis: 50%;
9980
+ }
9981
+
9982
+ .pf-c-sidebar__panel.pf-m-width-66-on-md {
9983
+ --pf-c-sidebar__panel--FlexBasis: 66%;
9984
+ }
9985
+
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%;
9992
+ }
10067
9993
  }
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);
9997
+ }
10068
9998
 
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));
9999
+ .pf-c-sidebar__panel.pf-m-width-25-on-lg {
10000
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10001
+ }
10002
+
10003
+ .pf-c-sidebar__panel.pf-m-width-33-on-lg {
10004
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10005
+ }
10006
+
10007
+ .pf-c-sidebar__panel.pf-m-width-50-on-lg {
10008
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10009
+ }
10010
+
10011
+ .pf-c-sidebar__panel.pf-m-width-66-on-lg {
10012
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10013
+ }
10014
+
10015
+ .pf-c-sidebar__panel.pf-m-width-75-on-lg {
10016
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10017
+ }
10018
+
10019
+ .pf-c-sidebar__panel.pf-m-width-100-on-lg {
10020
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10021
+ }
10074
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
+ }
10075
10027
 
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);
10028
+ .pf-c-sidebar__panel.pf-m-width-25-on-xl {
10029
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10030
+ }
10031
+
10032
+ .pf-c-sidebar__panel.pf-m-width-33-on-xl {
10033
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10034
+ }
10035
+
10036
+ .pf-c-sidebar__panel.pf-m-width-50-on-xl {
10037
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10038
+ }
10039
+
10040
+ .pf-c-sidebar__panel.pf-m-width-66-on-xl {
10041
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10042
+ }
10043
+
10044
+ .pf-c-sidebar__panel.pf-m-width-75-on-xl {
10045
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10046
+ }
10047
+
10048
+ .pf-c-sidebar__panel.pf-m-width-100-on-xl {
10049
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10050
+ }
10079
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
+ }
10056
+
10057
+ .pf-c-sidebar__panel.pf-m-width-25-on-2xl {
10058
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10059
+ }
10060
+
10061
+ .pf-c-sidebar__panel.pf-m-width-33-on-2xl {
10062
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10063
+ }
10064
+
10065
+ .pf-c-sidebar__panel.pf-m-width-50-on-2xl {
10066
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10067
+ }
10068
+
10069
+ .pf-c-sidebar__panel.pf-m-width-66-on-2xl {
10070
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10071
+ }
10072
+
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);
@@ -15998,6 +15998,31 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
15998
15998
  padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
15999
15999
  }
16000
16000
 
16001
+ @media (min-height: 0) {
16002
+ .pf-c-page__main-nav.pf-m-sticky-top-on-sm-height, .pf-c-page__main-group.pf-m-sticky-top-on-sm-height .pf-c-page__main-nav:last-child {
16003
+ padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
16004
+ }
16005
+ }
16006
+ @media (min-height: 40rem) {
16007
+ .pf-c-page__main-nav.pf-m-sticky-top-on-md-height, .pf-c-page__main-group.pf-m-sticky-top-on-md-height .pf-c-page__main-nav:last-child {
16008
+ padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
16009
+ }
16010
+ }
16011
+ @media (min-height: 48rem) {
16012
+ .pf-c-page__main-nav.pf-m-sticky-top-on-lg-height, .pf-c-page__main-group.pf-m-sticky-top-on-lg-height .pf-c-page__main-nav:last-child {
16013
+ padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
16014
+ }
16015
+ }
16016
+ @media (min-height: 60rem) {
16017
+ .pf-c-page__main-nav.pf-m-sticky-top-on-xl-height, .pf-c-page__main-group.pf-m-sticky-top-on-xl-height .pf-c-page__main-nav:last-child {
16018
+ padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
16019
+ }
16020
+ }
16021
+ @media (min-height: 80rem) {
16022
+ .pf-c-page__main-nav.pf-m-sticky-top-on-2xl-height, .pf-c-page__main-group.pf-m-sticky-top-on-2xl-height .pf-c-page__main-nav:last-child {
16023
+ padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
16024
+ }
16025
+ }
16001
16026
  .pf-c-page__main-subnav {
16002
16027
  background-color: var(--pf-c-page__main-subnav--BackgroundColor);
16003
16028
  border-top: var(--pf-c-page__main-subnav--BorderTopWidth) solid var(--pf-c-page__main-subnav--BorderTopColor);
@@ -16026,6 +16051,31 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
16026
16051
  --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
16027
16052
  }
16028
16053
 
16054
+ @media (min-height: 0) {
16055
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-sm-height, .pf-c-page__main-group.pf-m-sticky-top-on-sm-height .pf-c-page__main-breadcrumb:last-child {
16056
+ --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
16057
+ }
16058
+ }
16059
+ @media (min-height: 40rem) {
16060
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-md-height, .pf-c-page__main-group.pf-m-sticky-top-on-md-height .pf-c-page__main-breadcrumb:last-child {
16061
+ --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
16062
+ }
16063
+ }
16064
+ @media (min-height: 48rem) {
16065
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-lg-height, .pf-c-page__main-group.pf-m-sticky-top-on-lg-height .pf-c-page__main-breadcrumb:last-child {
16066
+ --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
16067
+ }
16068
+ }
16069
+ @media (min-height: 60rem) {
16070
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-xl-height, .pf-c-page__main-group.pf-m-sticky-top-on-xl-height .pf-c-page__main-breadcrumb:last-child {
16071
+ --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
16072
+ }
16073
+ }
16074
+ @media (min-height: 80rem) {
16075
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-2xl-height, .pf-c-page__main-group.pf-m-sticky-top-on-2xl-height .pf-c-page__main-breadcrumb:last-child {
16076
+ --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
16077
+ }
16078
+ }
16029
16079
  .pf-c-page__main-tabs {
16030
16080
  padding: var(--pf-c-page__main-tabs--PaddingTop) var(--pf-c-page__main-tabs--PaddingRight) var(--pf-c-page__main-tabs--PaddingBottom) var(--pf-c-page__main-tabs--PaddingLeft);
16031
16081
  background-color: var(--pf-c-page__main-tabs--BackgroundColor);