@patternfly/patternfly 6.5.0-prerelease.79 → 6.5.0-prerelease.80

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 (9) hide show
  1. package/components/Page/page.css +104 -1
  2. package/components/Page/page.scss +72 -1
  3. package/components/_index.css +104 -1
  4. package/docs/components/Page/examples/Page.md +78 -0
  5. package/package.json +2 -2
  6. package/patternfly-no-globals.css +104 -1
  7. package/patternfly.css +104 -1
  8. package/patternfly.min.css +1 -1
  9. package/patternfly.min.css.map +1 -1
package/patternfly-no-globals.css CHANGED
@@ -22954,10 +22954,16 @@ ul.pf-v6-c-list {
22954
22954
  --pf-v6-c-page--section--m-sticky-top--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
22955
22955
  --pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
22956
22956
  --pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
22957
+ --pf-v6-c-page--section--m-sticky-top--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
22957
22958
  --pf-v6-c-page--section--m-sticky-bottom--ZIndex: var(--pf-t--global--z-index--md);
22958
22959
  --pf-v6-c-page--section--m-sticky-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
22959
22960
  --pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
22960
22961
  --pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
22962
+ --pf-v6-c-page--section--m-sticky-bottom--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
22963
+ --pf-v6-c-page--section--m-sticky-top--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
22964
+ --pf-v6-c-page--section--m-sticky-top--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
22965
+ --pf-v6-c-page--section--m-sticky-bottom--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
22966
+ --pf-v6-c-page--section--m-sticky-bottom--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
22961
22967
  --pf-v6-c-page--section--m-shadow-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
22962
22968
  --pf-v6-c-page--section--m-shadow-bottom--ZIndex: var(--pf-t--global--z-index--xs);
22963
22969
  --pf-v6-c-page--section--m-shadow-bottom--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
@@ -23421,6 +23427,7 @@ ul.pf-v6-c-list {
23421
23427
  position: sticky;
23422
23428
  inset-block-start: 0;
23423
23429
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
23430
+ background-color: var(--pf-v6-c-page--section--m-sticky-top--BackgroundColor);
23424
23431
  border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
23425
23432
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
23426
23433
  }
@@ -23433,6 +23440,7 @@ ul.pf-v6-c-list {
23433
23440
  position: sticky;
23434
23441
  inset-block-end: 0;
23435
23442
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
23443
+ background-color: var(--pf-v6-c-page--section--m-sticky-bottom--BackgroundColor);
23436
23444
  border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
23437
23445
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
23438
23446
  }
@@ -23446,6 +23454,7 @@ ul.pf-v6-c-list {
23446
23454
  position: sticky;
23447
23455
  inset-block-start: 0;
23448
23456
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
23457
+ background-color: var(--pf-v6-c-page--section--m-sticky-top--BackgroundColor);
23449
23458
  border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
23450
23459
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
23451
23460
  }
@@ -23458,6 +23467,7 @@ ul.pf-v6-c-list {
23458
23467
  position: sticky;
23459
23468
  inset-block-end: 0;
23460
23469
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
23470
+ background-color: var(--pf-v6-c-page--section--m-sticky-bottom--BackgroundColor);
23461
23471
  border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
23462
23472
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
23463
23473
  }
@@ -23472,6 +23482,7 @@ ul.pf-v6-c-list {
23472
23482
  position: sticky;
23473
23483
  inset-block-start: 0;
23474
23484
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
23485
+ background-color: var(--pf-v6-c-page--section--m-sticky-top--BackgroundColor);
23475
23486
  border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
23476
23487
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
23477
23488
  }
@@ -23484,6 +23495,7 @@ ul.pf-v6-c-list {
23484
23495
  position: sticky;
23485
23496
  inset-block-end: 0;
23486
23497
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
23498
+ background-color: var(--pf-v6-c-page--section--m-sticky-bottom--BackgroundColor);
23487
23499
  border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
23488
23500
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
23489
23501
  }
@@ -23498,6 +23510,7 @@ ul.pf-v6-c-list {
23498
23510
  position: sticky;
23499
23511
  inset-block-start: 0;
23500
23512
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
23513
+ background-color: var(--pf-v6-c-page--section--m-sticky-top--BackgroundColor);
23501
23514
  border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
23502
23515
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
23503
23516
  }
@@ -23510,6 +23523,7 @@ ul.pf-v6-c-list {
23510
23523
  position: sticky;
23511
23524
  inset-block-end: 0;
23512
23525
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
23526
+ background-color: var(--pf-v6-c-page--section--m-sticky-bottom--BackgroundColor);
23513
23527
  border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
23514
23528
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
23515
23529
  }
@@ -23524,6 +23538,7 @@ ul.pf-v6-c-list {
23524
23538
  position: sticky;
23525
23539
  inset-block-start: 0;
23526
23540
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
23541
+ background-color: var(--pf-v6-c-page--section--m-sticky-top--BackgroundColor);
23527
23542
  border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
23528
23543
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
23529
23544
  }
@@ -23536,6 +23551,7 @@ ul.pf-v6-c-list {
23536
23551
  position: sticky;
23537
23552
  inset-block-end: 0;
23538
23553
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
23554
+ background-color: var(--pf-v6-c-page--section--m-sticky-bottom--BackgroundColor);
23539
23555
  border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
23540
23556
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
23541
23557
  }
@@ -23550,6 +23566,7 @@ ul.pf-v6-c-list {
23550
23566
  position: sticky;
23551
23567
  inset-block-start: 0;
23552
23568
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
23569
+ background-color: var(--pf-v6-c-page--section--m-sticky-top--BackgroundColor);
23553
23570
  border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
23554
23571
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
23555
23572
  }
@@ -23562,10 +23579,96 @@ ul.pf-v6-c-list {
23562
23579
  position: sticky;
23563
23580
  inset-block-end: 0;
23564
23581
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
23582
+ background-color: var(--pf-v6-c-page--section--m-sticky-bottom--BackgroundColor);
23565
23583
  border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
23566
23584
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
23567
23585
  }
23568
23586
  }
23587
+ .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-base,
23588
+ .pf-v6-c-page__main-tabs.pf-m-sticky-top-base,
23589
+ .pf-v6-c-page__main-section.pf-m-sticky-top-base,
23590
+ .pf-v6-c-page__main-wizard.pf-m-sticky-top-base,
23591
+ .pf-v6-c-page__main-group.pf-m-sticky-top-base,
23592
+ .pf-v6-c-page__main-subnav.pf-m-sticky-top-base {
23593
+ position: sticky;
23594
+ inset-block-start: 0;
23595
+ z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
23596
+ box-shadow: none;
23597
+ }
23598
+ .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-base::before,
23599
+ .pf-v6-c-page__main-tabs.pf-m-sticky-top-base::before,
23600
+ .pf-v6-c-page__main-section.pf-m-sticky-top-base::before,
23601
+ .pf-v6-c-page__main-wizard.pf-m-sticky-top-base::before,
23602
+ .pf-v6-c-page__main-group.pf-m-sticky-top-base::before,
23603
+ .pf-v6-c-page__main-subnav.pf-m-sticky-top-base::before {
23604
+ position: absolute;
23605
+ inset: 0;
23606
+ z-index: -1;
23607
+ content: "";
23608
+ background-color: var(--pf-v6-c-page--section--m-sticky-top--BackgroundColor);
23609
+ box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
23610
+ opacity: 0;
23611
+ transition-timing-function: var(--pf-v6-c-page--section--m-sticky-top--TransitionTimingFunction);
23612
+ transition-duration: var(--pf-v6-c-page--section--m-sticky-top--TransitionDuration);
23613
+ transition-property: opacity;
23614
+ }
23615
+ .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-base, .pf-v6-c-page__main-group.pf-m-sticky-top-base .pf-v6-c-page__main-breadcrumb:last-child,
23616
+ .pf-v6-c-page__main-tabs.pf-m-sticky-top-base,
23617
+ .pf-v6-c-page__main-group.pf-m-sticky-top-base .pf-v6-c-page__main-tabs:last-child,
23618
+ .pf-v6-c-page__main-section.pf-m-sticky-top-base,
23619
+ .pf-v6-c-page__main-group.pf-m-sticky-top-base .pf-v6-c-page__main-section:last-child,
23620
+ .pf-v6-c-page__main-wizard.pf-m-sticky-top-base,
23621
+ .pf-v6-c-page__main-group.pf-m-sticky-top-base .pf-v6-c-page__main-wizard:last-child,
23622
+ .pf-v6-c-page__main-group.pf-m-sticky-top-base,
23623
+ .pf-v6-c-page__main-group.pf-m-sticky-top-base .pf-v6-c-page__main-group:last-child,
23624
+ .pf-v6-c-page__main-subnav.pf-m-sticky-top-base,
23625
+ .pf-v6-c-page__main-group.pf-m-sticky-top-base .pf-v6-c-page__main-subnav:last-child {
23626
+ --pf-v6-c-page__main-breadcrumb--PaddingBlockEnd: var(--pf-v6-c-page__main-breadcrumb--m-sticky-top--PaddingBlockEnd);
23627
+ }
23628
+ .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-stuck::before,
23629
+ .pf-v6-c-page__main-tabs.pf-m-sticky-top-stuck::before,
23630
+ .pf-v6-c-page__main-section.pf-m-sticky-top-stuck::before,
23631
+ .pf-v6-c-page__main-wizard.pf-m-sticky-top-stuck::before,
23632
+ .pf-v6-c-page__main-group.pf-m-sticky-top-stuck::before,
23633
+ .pf-v6-c-page__main-subnav.pf-m-sticky-top-stuck::before {
23634
+ opacity: 1;
23635
+ }
23636
+ .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-base,
23637
+ .pf-v6-c-page__main-tabs.pf-m-sticky-bottom-base,
23638
+ .pf-v6-c-page__main-section.pf-m-sticky-bottom-base,
23639
+ .pf-v6-c-page__main-wizard.pf-m-sticky-bottom-base,
23640
+ .pf-v6-c-page__main-group.pf-m-sticky-bottom-base,
23641
+ .pf-v6-c-page__main-subnav.pf-m-sticky-bottom-base {
23642
+ position: sticky;
23643
+ inset-block-end: 0;
23644
+ z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
23645
+ box-shadow: none;
23646
+ }
23647
+ .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-base::before,
23648
+ .pf-v6-c-page__main-tabs.pf-m-sticky-bottom-base::before,
23649
+ .pf-v6-c-page__main-section.pf-m-sticky-bottom-base::before,
23650
+ .pf-v6-c-page__main-wizard.pf-m-sticky-bottom-base::before,
23651
+ .pf-v6-c-page__main-group.pf-m-sticky-bottom-base::before,
23652
+ .pf-v6-c-page__main-subnav.pf-m-sticky-bottom-base::before {
23653
+ position: absolute;
23654
+ inset: 0;
23655
+ z-index: -1;
23656
+ content: "";
23657
+ background-color: var(--pf-v6-c-page--section--m-sticky-bottom--BackgroundColor);
23658
+ box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
23659
+ opacity: 0;
23660
+ transition-timing-function: var(--pf-v6-c-page--section--m-sticky-bottom--TransitionTimingFunction);
23661
+ transition-duration: var(--pf-v6-c-page--section--m-sticky-bottom--TransitionDuration);
23662
+ transition-property: opacity;
23663
+ }
23664
+ .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-stuck::before,
23665
+ .pf-v6-c-page__main-tabs.pf-m-sticky-bottom-stuck::before,
23666
+ .pf-v6-c-page__main-section.pf-m-sticky-bottom-stuck::before,
23667
+ .pf-v6-c-page__main-wizard.pf-m-sticky-bottom-stuck::before,
23668
+ .pf-v6-c-page__main-group.pf-m-sticky-bottom-stuck::before,
23669
+ .pf-v6-c-page__main-subnav.pf-m-sticky-bottom-stuck::before {
23670
+ opacity: 1;
23671
+ }
23569
23672
 
23570
23673
  .pf-v6-c-page__main-container {
23571
23674
  display: flex;
@@ -23660,7 +23763,7 @@ ul.pf-v6-c-list {
23660
23763
  padding-inline-end: var(--pf-v6-c-page__main-subnav--PaddingInlineEnd);
23661
23764
  background-color: var(--pf-v6-c-page__main-subnav--BackgroundColor);
23662
23765
  }
23663
- .pf-v6-c-page__main-subnav.pf-m-sticky-top {
23766
+ .pf-v6-c-page__main-subnav.pf-m-sticky-top, .pf-v6-c-page__main-subnav.pf-m-sticky-top-base {
23664
23767
  padding-block-end: var(--pf-v6-c-page__main-subnav--m-sticky-top--PaddingBlockEnd);
23665
23768
  }
23666
23769
 
package/patternfly.css CHANGED
@@ -23101,10 +23101,16 @@ ul.pf-v6-c-list {
23101
23101
  --pf-v6-c-page--section--m-sticky-top--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
23102
23102
  --pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
23103
23103
  --pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
23104
+ --pf-v6-c-page--section--m-sticky-top--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
23104
23105
  --pf-v6-c-page--section--m-sticky-bottom--ZIndex: var(--pf-t--global--z-index--md);
23105
23106
  --pf-v6-c-page--section--m-sticky-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
23106
23107
  --pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
23107
23108
  --pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
23109
+ --pf-v6-c-page--section--m-sticky-bottom--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
23110
+ --pf-v6-c-page--section--m-sticky-top--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
23111
+ --pf-v6-c-page--section--m-sticky-top--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
23112
+ --pf-v6-c-page--section--m-sticky-bottom--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
23113
+ --pf-v6-c-page--section--m-sticky-bottom--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
23108
23114
  --pf-v6-c-page--section--m-shadow-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
23109
23115
  --pf-v6-c-page--section--m-shadow-bottom--ZIndex: var(--pf-t--global--z-index--xs);
23110
23116
  --pf-v6-c-page--section--m-shadow-bottom--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
@@ -23568,6 +23574,7 @@ ul.pf-v6-c-list {
23568
23574
  position: sticky;
23569
23575
  inset-block-start: 0;
23570
23576
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
23577
+ background-color: var(--pf-v6-c-page--section--m-sticky-top--BackgroundColor);
23571
23578
  border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
23572
23579
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
23573
23580
  }
@@ -23580,6 +23587,7 @@ ul.pf-v6-c-list {
23580
23587
  position: sticky;
23581
23588
  inset-block-end: 0;
23582
23589
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
23590
+ background-color: var(--pf-v6-c-page--section--m-sticky-bottom--BackgroundColor);
23583
23591
  border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
23584
23592
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
23585
23593
  }
@@ -23593,6 +23601,7 @@ ul.pf-v6-c-list {
23593
23601
  position: sticky;
23594
23602
  inset-block-start: 0;
23595
23603
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
23604
+ background-color: var(--pf-v6-c-page--section--m-sticky-top--BackgroundColor);
23596
23605
  border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
23597
23606
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
23598
23607
  }
@@ -23605,6 +23614,7 @@ ul.pf-v6-c-list {
23605
23614
  position: sticky;
23606
23615
  inset-block-end: 0;
23607
23616
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
23617
+ background-color: var(--pf-v6-c-page--section--m-sticky-bottom--BackgroundColor);
23608
23618
  border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
23609
23619
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
23610
23620
  }
@@ -23619,6 +23629,7 @@ ul.pf-v6-c-list {
23619
23629
  position: sticky;
23620
23630
  inset-block-start: 0;
23621
23631
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
23632
+ background-color: var(--pf-v6-c-page--section--m-sticky-top--BackgroundColor);
23622
23633
  border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
23623
23634
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
23624
23635
  }
@@ -23631,6 +23642,7 @@ ul.pf-v6-c-list {
23631
23642
  position: sticky;
23632
23643
  inset-block-end: 0;
23633
23644
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
23645
+ background-color: var(--pf-v6-c-page--section--m-sticky-bottom--BackgroundColor);
23634
23646
  border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
23635
23647
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
23636
23648
  }
@@ -23645,6 +23657,7 @@ ul.pf-v6-c-list {
23645
23657
  position: sticky;
23646
23658
  inset-block-start: 0;
23647
23659
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
23660
+ background-color: var(--pf-v6-c-page--section--m-sticky-top--BackgroundColor);
23648
23661
  border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
23649
23662
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
23650
23663
  }
@@ -23657,6 +23670,7 @@ ul.pf-v6-c-list {
23657
23670
  position: sticky;
23658
23671
  inset-block-end: 0;
23659
23672
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
23673
+ background-color: var(--pf-v6-c-page--section--m-sticky-bottom--BackgroundColor);
23660
23674
  border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
23661
23675
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
23662
23676
  }
@@ -23671,6 +23685,7 @@ ul.pf-v6-c-list {
23671
23685
  position: sticky;
23672
23686
  inset-block-start: 0;
23673
23687
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
23688
+ background-color: var(--pf-v6-c-page--section--m-sticky-top--BackgroundColor);
23674
23689
  border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
23675
23690
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
23676
23691
  }
@@ -23683,6 +23698,7 @@ ul.pf-v6-c-list {
23683
23698
  position: sticky;
23684
23699
  inset-block-end: 0;
23685
23700
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
23701
+ background-color: var(--pf-v6-c-page--section--m-sticky-bottom--BackgroundColor);
23686
23702
  border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
23687
23703
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
23688
23704
  }
@@ -23697,6 +23713,7 @@ ul.pf-v6-c-list {
23697
23713
  position: sticky;
23698
23714
  inset-block-start: 0;
23699
23715
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
23716
+ background-color: var(--pf-v6-c-page--section--m-sticky-top--BackgroundColor);
23700
23717
  border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
23701
23718
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
23702
23719
  }
@@ -23709,10 +23726,96 @@ ul.pf-v6-c-list {
23709
23726
  position: sticky;
23710
23727
  inset-block-end: 0;
23711
23728
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
23729
+ background-color: var(--pf-v6-c-page--section--m-sticky-bottom--BackgroundColor);
23712
23730
  border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
23713
23731
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
23714
23732
  }
23715
23733
  }
23734
+ .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-base,
23735
+ .pf-v6-c-page__main-tabs.pf-m-sticky-top-base,
23736
+ .pf-v6-c-page__main-section.pf-m-sticky-top-base,
23737
+ .pf-v6-c-page__main-wizard.pf-m-sticky-top-base,
23738
+ .pf-v6-c-page__main-group.pf-m-sticky-top-base,
23739
+ .pf-v6-c-page__main-subnav.pf-m-sticky-top-base {
23740
+ position: sticky;
23741
+ inset-block-start: 0;
23742
+ z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
23743
+ box-shadow: none;
23744
+ }
23745
+ .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-base::before,
23746
+ .pf-v6-c-page__main-tabs.pf-m-sticky-top-base::before,
23747
+ .pf-v6-c-page__main-section.pf-m-sticky-top-base::before,
23748
+ .pf-v6-c-page__main-wizard.pf-m-sticky-top-base::before,
23749
+ .pf-v6-c-page__main-group.pf-m-sticky-top-base::before,
23750
+ .pf-v6-c-page__main-subnav.pf-m-sticky-top-base::before {
23751
+ position: absolute;
23752
+ inset: 0;
23753
+ z-index: -1;
23754
+ content: "";
23755
+ background-color: var(--pf-v6-c-page--section--m-sticky-top--BackgroundColor);
23756
+ box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
23757
+ opacity: 0;
23758
+ transition-timing-function: var(--pf-v6-c-page--section--m-sticky-top--TransitionTimingFunction);
23759
+ transition-duration: var(--pf-v6-c-page--section--m-sticky-top--TransitionDuration);
23760
+ transition-property: opacity;
23761
+ }
23762
+ .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-base, .pf-v6-c-page__main-group.pf-m-sticky-top-base .pf-v6-c-page__main-breadcrumb:last-child,
23763
+ .pf-v6-c-page__main-tabs.pf-m-sticky-top-base,
23764
+ .pf-v6-c-page__main-group.pf-m-sticky-top-base .pf-v6-c-page__main-tabs:last-child,
23765
+ .pf-v6-c-page__main-section.pf-m-sticky-top-base,
23766
+ .pf-v6-c-page__main-group.pf-m-sticky-top-base .pf-v6-c-page__main-section:last-child,
23767
+ .pf-v6-c-page__main-wizard.pf-m-sticky-top-base,
23768
+ .pf-v6-c-page__main-group.pf-m-sticky-top-base .pf-v6-c-page__main-wizard:last-child,
23769
+ .pf-v6-c-page__main-group.pf-m-sticky-top-base,
23770
+ .pf-v6-c-page__main-group.pf-m-sticky-top-base .pf-v6-c-page__main-group:last-child,
23771
+ .pf-v6-c-page__main-subnav.pf-m-sticky-top-base,
23772
+ .pf-v6-c-page__main-group.pf-m-sticky-top-base .pf-v6-c-page__main-subnav:last-child {
23773
+ --pf-v6-c-page__main-breadcrumb--PaddingBlockEnd: var(--pf-v6-c-page__main-breadcrumb--m-sticky-top--PaddingBlockEnd);
23774
+ }
23775
+ .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-stuck::before,
23776
+ .pf-v6-c-page__main-tabs.pf-m-sticky-top-stuck::before,
23777
+ .pf-v6-c-page__main-section.pf-m-sticky-top-stuck::before,
23778
+ .pf-v6-c-page__main-wizard.pf-m-sticky-top-stuck::before,
23779
+ .pf-v6-c-page__main-group.pf-m-sticky-top-stuck::before,
23780
+ .pf-v6-c-page__main-subnav.pf-m-sticky-top-stuck::before {
23781
+ opacity: 1;
23782
+ }
23783
+ .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-base,
23784
+ .pf-v6-c-page__main-tabs.pf-m-sticky-bottom-base,
23785
+ .pf-v6-c-page__main-section.pf-m-sticky-bottom-base,
23786
+ .pf-v6-c-page__main-wizard.pf-m-sticky-bottom-base,
23787
+ .pf-v6-c-page__main-group.pf-m-sticky-bottom-base,
23788
+ .pf-v6-c-page__main-subnav.pf-m-sticky-bottom-base {
23789
+ position: sticky;
23790
+ inset-block-end: 0;
23791
+ z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
23792
+ box-shadow: none;
23793
+ }
23794
+ .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-base::before,
23795
+ .pf-v6-c-page__main-tabs.pf-m-sticky-bottom-base::before,
23796
+ .pf-v6-c-page__main-section.pf-m-sticky-bottom-base::before,
23797
+ .pf-v6-c-page__main-wizard.pf-m-sticky-bottom-base::before,
23798
+ .pf-v6-c-page__main-group.pf-m-sticky-bottom-base::before,
23799
+ .pf-v6-c-page__main-subnav.pf-m-sticky-bottom-base::before {
23800
+ position: absolute;
23801
+ inset: 0;
23802
+ z-index: -1;
23803
+ content: "";
23804
+ background-color: var(--pf-v6-c-page--section--m-sticky-bottom--BackgroundColor);
23805
+ box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
23806
+ opacity: 0;
23807
+ transition-timing-function: var(--pf-v6-c-page--section--m-sticky-bottom--TransitionTimingFunction);
23808
+ transition-duration: var(--pf-v6-c-page--section--m-sticky-bottom--TransitionDuration);
23809
+ transition-property: opacity;
23810
+ }
23811
+ .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-stuck::before,
23812
+ .pf-v6-c-page__main-tabs.pf-m-sticky-bottom-stuck::before,
23813
+ .pf-v6-c-page__main-section.pf-m-sticky-bottom-stuck::before,
23814
+ .pf-v6-c-page__main-wizard.pf-m-sticky-bottom-stuck::before,
23815
+ .pf-v6-c-page__main-group.pf-m-sticky-bottom-stuck::before,
23816
+ .pf-v6-c-page__main-subnav.pf-m-sticky-bottom-stuck::before {
23817
+ opacity: 1;
23818
+ }
23716
23819
 
23717
23820
  .pf-v6-c-page__main-container {
23718
23821
  display: flex;
@@ -23807,7 +23910,7 @@ ul.pf-v6-c-list {
23807
23910
  padding-inline-end: var(--pf-v6-c-page__main-subnav--PaddingInlineEnd);
23808
23911
  background-color: var(--pf-v6-c-page__main-subnav--BackgroundColor);
23809
23912
  }
23810
- .pf-v6-c-page__main-subnav.pf-m-sticky-top {
23913
+ .pf-v6-c-page__main-subnav.pf-m-sticky-top, .pf-v6-c-page__main-subnav.pf-m-sticky-top-base {
23811
23914
  padding-block-end: var(--pf-v6-c-page__main-subnav--m-sticky-top--PaddingBlockEnd);
23812
23915
  }
23813
23916