@patternfly/patternfly 4.198.2 → 4.199.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 (19) hide show
  1. package/base/_variables.scss +7 -0
  2. package/base/patternfly-variables.css +5 -0
  3. package/components/Page/page.css +154 -24
  4. package/components/Page/page.scss +23 -14
  5. package/components/Tabs/tabs.css +30 -0
  6. package/components/Tabs/tabs.scss +37 -0
  7. package/docs/components/Page/examples/Page.md +2 -2
  8. package/docs/components/Tabs/examples/Tabs.md +214 -0
  9. package/docs/demos/Page/examples/Page.md +1044 -0
  10. package/package.json +1 -1
  11. package/patternfly-base-no-reset.css +5 -0
  12. package/patternfly-base.css +5 -0
  13. package/patternfly-no-reset.css +189 -24
  14. package/patternfly.css +189 -24
  15. package/patternfly.min.css +1 -1
  16. package/patternfly.min.css.map +1 -1
  17. package/sass-utilities/functions.scss +37 -1
  18. package/sass-utilities/mixins.scss +75 -7
  19. package/sass-utilities/scss-variables.scss +16 -0
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "4.198.2",
4
+ "version": "4.199.0",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-base-no-reset.css CHANGED
@@ -212,6 +212,11 @@
212
212
  --pf-global--breakpoint--lg: 992px;
213
213
  --pf-global--breakpoint--xl: 1200px;
214
214
  --pf-global--breakpoint--2xl: 1450px;
215
+ --pf-global--height-breakpoint--sm: 0;
216
+ --pf-global--height-breakpoint--md: 40rem;
217
+ --pf-global--height-breakpoint--lg: 48rem;
218
+ --pf-global--height-breakpoint--xl: 60rem;
219
+ --pf-global--height-breakpoint--2xl: 80rem;
215
220
  --pf-global--link--Color: #06c;
216
221
  --pf-global--link--Color--hover: #004080;
217
222
  --pf-global--link--Color--light: #2b9af3;
package/patternfly-base.css CHANGED
@@ -212,6 +212,11 @@
212
212
  --pf-global--breakpoint--lg: 992px;
213
213
  --pf-global--breakpoint--xl: 1200px;
214
214
  --pf-global--breakpoint--2xl: 1450px;
215
+ --pf-global--height-breakpoint--sm: 0;
216
+ --pf-global--height-breakpoint--md: 40rem;
217
+ --pf-global--height-breakpoint--lg: 48rem;
218
+ --pf-global--height-breakpoint--xl: 60rem;
219
+ --pf-global--height-breakpoint--2xl: 80rem;
215
220
  --pf-global--link--Color: #06c;
216
221
  --pf-global--link--Color--hover: #004080;
217
222
  --pf-global--link--Color--light: #2b9af3;
package/patternfly-no-reset.css CHANGED
@@ -285,6 +285,11 @@
285
285
  --pf-global--breakpoint--lg: 992px;
286
286
  --pf-global--breakpoint--xl: 1200px;
287
287
  --pf-global--breakpoint--2xl: 1450px;
288
+ --pf-global--height-breakpoint--sm: 0;
289
+ --pf-global--height-breakpoint--md: 40rem;
290
+ --pf-global--height-breakpoint--lg: 48rem;
291
+ --pf-global--height-breakpoint--xl: 60rem;
292
+ --pf-global--height-breakpoint--2xl: 80rem;
288
293
  --pf-global--link--Color: #06c;
289
294
  --pf-global--link--Color--hover: #004080;
290
295
  --pf-global--link--Color--light: #2b9af3;
@@ -21594,30 +21599,6 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21594
21599
  .pf-c-page__main-subnav {
21595
21600
  flex-shrink: 0;
21596
21601
  }
21597
- .pf-c-page__main-nav.pf-m-sticky-top,
21598
- .pf-c-page__main-breadcrumb.pf-m-sticky-top,
21599
- .pf-c-page__main-tabs.pf-m-sticky-top,
21600
- .pf-c-page__main-section.pf-m-sticky-top,
21601
- .pf-c-page__main-wizard.pf-m-sticky-top,
21602
- .pf-c-page__main-group.pf-m-sticky-top,
21603
- .pf-c-page__main-subnav.pf-m-sticky-top {
21604
- position: sticky;
21605
- top: 0;
21606
- z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
21607
- box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
21608
- }
21609
- .pf-c-page__main-nav.pf-m-sticky-bottom,
21610
- .pf-c-page__main-breadcrumb.pf-m-sticky-bottom,
21611
- .pf-c-page__main-tabs.pf-m-sticky-bottom,
21612
- .pf-c-page__main-section.pf-m-sticky-bottom,
21613
- .pf-c-page__main-wizard.pf-m-sticky-bottom,
21614
- .pf-c-page__main-group.pf-m-sticky-bottom,
21615
- .pf-c-page__main-subnav.pf-m-sticky-bottom {
21616
- position: sticky;
21617
- bottom: 0;
21618
- z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
21619
- box-shadow: var(--pf-c-page--section--m-sticky-bottom--BoxShadow);
21620
- }
21621
21602
  .pf-c-page__main-nav.pf-m-overflow-scroll,
21622
21603
  .pf-c-page__main-breadcrumb.pf-m-overflow-scroll,
21623
21604
  .pf-c-page__main-tabs.pf-m-overflow-scroll,
@@ -21649,6 +21630,160 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21649
21630
  z-index: var(--pf-c-page--section--m-shadow-top--ZIndex);
21650
21631
  box-shadow: var(--pf-c-page--section--m-shadow-top--BoxShadow);
21651
21632
  }
21633
+ .pf-c-page__main-nav.pf-m-sticky-top,
21634
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top,
21635
+ .pf-c-page__main-tabs.pf-m-sticky-top,
21636
+ .pf-c-page__main-section.pf-m-sticky-top,
21637
+ .pf-c-page__main-wizard.pf-m-sticky-top,
21638
+ .pf-c-page__main-group.pf-m-sticky-top,
21639
+ .pf-c-page__main-subnav.pf-m-sticky-top {
21640
+ position: sticky;
21641
+ top: 0;
21642
+ z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
21643
+ box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
21644
+ }
21645
+ .pf-c-page__main-nav.pf-m-sticky-bottom,
21646
+ .pf-c-page__main-breadcrumb.pf-m-sticky-bottom,
21647
+ .pf-c-page__main-tabs.pf-m-sticky-bottom,
21648
+ .pf-c-page__main-section.pf-m-sticky-bottom,
21649
+ .pf-c-page__main-wizard.pf-m-sticky-bottom,
21650
+ .pf-c-page__main-group.pf-m-sticky-bottom,
21651
+ .pf-c-page__main-subnav.pf-m-sticky-bottom {
21652
+ position: sticky;
21653
+ bottom: 0;
21654
+ z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
21655
+ box-shadow: var(--pf-c-page--section--m-sticky-bottom--BoxShadow);
21656
+ }
21657
+ @media (min-height: 0) {
21658
+ .pf-c-page__main-nav.pf-m-sticky-top-on-sm-height,
21659
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-sm-height,
21660
+ .pf-c-page__main-tabs.pf-m-sticky-top-on-sm-height,
21661
+ .pf-c-page__main-section.pf-m-sticky-top-on-sm-height,
21662
+ .pf-c-page__main-wizard.pf-m-sticky-top-on-sm-height,
21663
+ .pf-c-page__main-group.pf-m-sticky-top-on-sm-height,
21664
+ .pf-c-page__main-subnav.pf-m-sticky-top-on-sm-height {
21665
+ position: sticky;
21666
+ top: 0;
21667
+ z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
21668
+ box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
21669
+ }
21670
+ .pf-c-page__main-nav.pf-m-sticky-bottom-on-sm-height,
21671
+ .pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-sm-height,
21672
+ .pf-c-page__main-tabs.pf-m-sticky-bottom-on-sm-height,
21673
+ .pf-c-page__main-section.pf-m-sticky-bottom-on-sm-height,
21674
+ .pf-c-page__main-wizard.pf-m-sticky-bottom-on-sm-height,
21675
+ .pf-c-page__main-group.pf-m-sticky-bottom-on-sm-height,
21676
+ .pf-c-page__main-subnav.pf-m-sticky-bottom-on-sm-height {
21677
+ position: sticky;
21678
+ bottom: 0;
21679
+ z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
21680
+ box-shadow: var(--pf-c-page--section--m-sticky-bottom--BoxShadow);
21681
+ }
21682
+ }
21683
+ @media (min-height: 40rem) {
21684
+ .pf-c-page__main-nav.pf-m-sticky-top-on-md-height,
21685
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-md-height,
21686
+ .pf-c-page__main-tabs.pf-m-sticky-top-on-md-height,
21687
+ .pf-c-page__main-section.pf-m-sticky-top-on-md-height,
21688
+ .pf-c-page__main-wizard.pf-m-sticky-top-on-md-height,
21689
+ .pf-c-page__main-group.pf-m-sticky-top-on-md-height,
21690
+ .pf-c-page__main-subnav.pf-m-sticky-top-on-md-height {
21691
+ position: sticky;
21692
+ top: 0;
21693
+ z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
21694
+ box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
21695
+ }
21696
+ .pf-c-page__main-nav.pf-m-sticky-bottom-on-md-height,
21697
+ .pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-md-height,
21698
+ .pf-c-page__main-tabs.pf-m-sticky-bottom-on-md-height,
21699
+ .pf-c-page__main-section.pf-m-sticky-bottom-on-md-height,
21700
+ .pf-c-page__main-wizard.pf-m-sticky-bottom-on-md-height,
21701
+ .pf-c-page__main-group.pf-m-sticky-bottom-on-md-height,
21702
+ .pf-c-page__main-subnav.pf-m-sticky-bottom-on-md-height {
21703
+ position: sticky;
21704
+ bottom: 0;
21705
+ z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
21706
+ box-shadow: var(--pf-c-page--section--m-sticky-bottom--BoxShadow);
21707
+ }
21708
+ }
21709
+ @media (min-height: 48rem) {
21710
+ .pf-c-page__main-nav.pf-m-sticky-top-on-lg-height,
21711
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-lg-height,
21712
+ .pf-c-page__main-tabs.pf-m-sticky-top-on-lg-height,
21713
+ .pf-c-page__main-section.pf-m-sticky-top-on-lg-height,
21714
+ .pf-c-page__main-wizard.pf-m-sticky-top-on-lg-height,
21715
+ .pf-c-page__main-group.pf-m-sticky-top-on-lg-height,
21716
+ .pf-c-page__main-subnav.pf-m-sticky-top-on-lg-height {
21717
+ position: sticky;
21718
+ top: 0;
21719
+ z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
21720
+ box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
21721
+ }
21722
+ .pf-c-page__main-nav.pf-m-sticky-bottom-on-lg-height,
21723
+ .pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-lg-height,
21724
+ .pf-c-page__main-tabs.pf-m-sticky-bottom-on-lg-height,
21725
+ .pf-c-page__main-section.pf-m-sticky-bottom-on-lg-height,
21726
+ .pf-c-page__main-wizard.pf-m-sticky-bottom-on-lg-height,
21727
+ .pf-c-page__main-group.pf-m-sticky-bottom-on-lg-height,
21728
+ .pf-c-page__main-subnav.pf-m-sticky-bottom-on-lg-height {
21729
+ position: sticky;
21730
+ bottom: 0;
21731
+ z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
21732
+ box-shadow: var(--pf-c-page--section--m-sticky-bottom--BoxShadow);
21733
+ }
21734
+ }
21735
+ @media (min-height: 60rem) {
21736
+ .pf-c-page__main-nav.pf-m-sticky-top-on-xl-height,
21737
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-xl-height,
21738
+ .pf-c-page__main-tabs.pf-m-sticky-top-on-xl-height,
21739
+ .pf-c-page__main-section.pf-m-sticky-top-on-xl-height,
21740
+ .pf-c-page__main-wizard.pf-m-sticky-top-on-xl-height,
21741
+ .pf-c-page__main-group.pf-m-sticky-top-on-xl-height,
21742
+ .pf-c-page__main-subnav.pf-m-sticky-top-on-xl-height {
21743
+ position: sticky;
21744
+ top: 0;
21745
+ z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
21746
+ box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
21747
+ }
21748
+ .pf-c-page__main-nav.pf-m-sticky-bottom-on-xl-height,
21749
+ .pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-xl-height,
21750
+ .pf-c-page__main-tabs.pf-m-sticky-bottom-on-xl-height,
21751
+ .pf-c-page__main-section.pf-m-sticky-bottom-on-xl-height,
21752
+ .pf-c-page__main-wizard.pf-m-sticky-bottom-on-xl-height,
21753
+ .pf-c-page__main-group.pf-m-sticky-bottom-on-xl-height,
21754
+ .pf-c-page__main-subnav.pf-m-sticky-bottom-on-xl-height {
21755
+ position: sticky;
21756
+ bottom: 0;
21757
+ z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
21758
+ box-shadow: var(--pf-c-page--section--m-sticky-bottom--BoxShadow);
21759
+ }
21760
+ }
21761
+ @media (min-height: 80rem) {
21762
+ .pf-c-page__main-nav.pf-m-sticky-top-on-2xl-height,
21763
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-2xl-height,
21764
+ .pf-c-page__main-tabs.pf-m-sticky-top-on-2xl-height,
21765
+ .pf-c-page__main-section.pf-m-sticky-top-on-2xl-height,
21766
+ .pf-c-page__main-wizard.pf-m-sticky-top-on-2xl-height,
21767
+ .pf-c-page__main-group.pf-m-sticky-top-on-2xl-height,
21768
+ .pf-c-page__main-subnav.pf-m-sticky-top-on-2xl-height {
21769
+ position: sticky;
21770
+ top: 0;
21771
+ z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
21772
+ box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
21773
+ }
21774
+ .pf-c-page__main-nav.pf-m-sticky-bottom-on-2xl-height,
21775
+ .pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-2xl-height,
21776
+ .pf-c-page__main-tabs.pf-m-sticky-bottom-on-2xl-height,
21777
+ .pf-c-page__main-section.pf-m-sticky-bottom-on-2xl-height,
21778
+ .pf-c-page__main-wizard.pf-m-sticky-bottom-on-2xl-height,
21779
+ .pf-c-page__main-group.pf-m-sticky-bottom-on-2xl-height,
21780
+ .pf-c-page__main-subnav.pf-m-sticky-bottom-on-2xl-height {
21781
+ position: sticky;
21782
+ bottom: 0;
21783
+ z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
21784
+ box-shadow: var(--pf-c-page--section--m-sticky-bottom--BoxShadow);
21785
+ }
21786
+ }
21652
21787
 
21653
21788
  .pf-c-page__main,
21654
21789
  .pf-c-page__drawer {
@@ -28878,6 +29013,15 @@ svg.pf-c-spinner.pf-m-xl {
28878
29013
  --pf-c-tabs__add--c-button--PaddingTop: var(--pf-c-tabs__link--PaddingTop);
28879
29014
  --pf-c-tabs__add--c-button--PaddingBottom: var(--pf-c-tabs__link--PaddingBottom);
28880
29015
  --pf-c-tabs__add--c-button--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
29016
+ --pf-c-tabs__link-toggle-icon--Color: var(--pf-global--Color--200);
29017
+ --pf-c-tabs__link-toggle-icon--Transition: .2s ease-in 0s;
29018
+ --pf-c-tabs__link-toggle-icon--Rotate: 0;
29019
+ --pf-c-tabs__link-toggle-icon--FontSize: var(--pf-global--FontSize--sm);
29020
+ --pf-c-tabs__link--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
29021
+ --pf-c-tabs__link--m-expanded__toggle-icon--Rotate: 90deg;
29022
+ --pf-c-tabs__link--hover__toggle-icon--Color: var(--pf-global--Color--100);
29023
+ --pf-c-tabs__link--active__toggle-icon--Color: var(--pf-global--Color--100);
29024
+ --pf-c-tabs__link--focus__toggle-icon--Color: var(--pf-global--Color--100);
28881
29025
  position: relative;
28882
29026
  display: flex;
28883
29027
  width: var(--pf-c-tabs--Width);
@@ -29306,6 +29450,15 @@ svg.pf-c-spinner.pf-m-xl {
29306
29450
  --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--active--after--BorderWidth);
29307
29451
  }
29308
29452
 
29453
+ .pf-c-tabs__link:hover {
29454
+ --pf-c-tabs__link-toggle-icon--Color: var(--pf-c-tabs__link--hover__toggle-icon--Color);
29455
+ }
29456
+ .pf-c-tabs__link:focus {
29457
+ --pf-c-tabs__link-toggle-icon--Color: var(--pf-c-tabs__link--focus__toggle-icon--Color);
29458
+ }
29459
+ .pf-c-tabs__link:active, .pf-c-tabs__link.pf-m-active {
29460
+ --pf-c-tabs__link-toggle-icon--Color: var(--pf-c-tabs__link--active__toggle-icon--Color);
29461
+ }
29309
29462
  .pf-c-tabs__link:disabled, .pf-c-tabs__link.pf-m-disabled {
29310
29463
  pointer-events: none;
29311
29464
  }
@@ -29329,6 +29482,18 @@ svg.pf-c-spinner.pf-m-xl {
29329
29482
  .pf-c-tabs__link .pf-c-tabs__item-text:last-child {
29330
29483
  --pf-c-tabs__link--child--MarginRight: 0;
29331
29484
  }
29485
+ .pf-c-tabs__link.pf-m-expanded {
29486
+ --pf-c-tabs__link-toggle-icon--Color: var(--pf-c-tabs__link--m-expanded__toggle-icon--Color);
29487
+ --pf-c-tabs__link-toggle-icon--Rotate: var(--pf-c-tabs__link--m-expanded__toggle-icon--Rotate);
29488
+ }
29489
+
29490
+ .pf-c-tabs__link-toggle-icon {
29491
+ align-self: end;
29492
+ font-size: var(--pf-c-tabs__link-toggle-icon--FontSize);
29493
+ color: var(--pf-c-tabs__link-toggle-icon--Color);
29494
+ transition: var(--pf-c-tabs__link-toggle-icon--Transition);
29495
+ transform: rotate(var(--pf-c-tabs__link-toggle-icon--Rotate));
29496
+ }
29332
29497
 
29333
29498
  .pf-c-tabs__item-close {
29334
29499
  display: flex;
package/patternfly.css CHANGED
@@ -285,6 +285,11 @@
285
285
  --pf-global--breakpoint--lg: 992px;
286
286
  --pf-global--breakpoint--xl: 1200px;
287
287
  --pf-global--breakpoint--2xl: 1450px;
288
+ --pf-global--height-breakpoint--sm: 0;
289
+ --pf-global--height-breakpoint--md: 40rem;
290
+ --pf-global--height-breakpoint--lg: 48rem;
291
+ --pf-global--height-breakpoint--xl: 60rem;
292
+ --pf-global--height-breakpoint--2xl: 80rem;
288
293
  --pf-global--link--Color: #06c;
289
294
  --pf-global--link--Color--hover: #004080;
290
295
  --pf-global--link--Color--light: #2b9af3;
@@ -21721,30 +21726,6 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21721
21726
  .pf-c-page__main-subnav {
21722
21727
  flex-shrink: 0;
21723
21728
  }
21724
- .pf-c-page__main-nav.pf-m-sticky-top,
21725
- .pf-c-page__main-breadcrumb.pf-m-sticky-top,
21726
- .pf-c-page__main-tabs.pf-m-sticky-top,
21727
- .pf-c-page__main-section.pf-m-sticky-top,
21728
- .pf-c-page__main-wizard.pf-m-sticky-top,
21729
- .pf-c-page__main-group.pf-m-sticky-top,
21730
- .pf-c-page__main-subnav.pf-m-sticky-top {
21731
- position: sticky;
21732
- top: 0;
21733
- z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
21734
- box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
21735
- }
21736
- .pf-c-page__main-nav.pf-m-sticky-bottom,
21737
- .pf-c-page__main-breadcrumb.pf-m-sticky-bottom,
21738
- .pf-c-page__main-tabs.pf-m-sticky-bottom,
21739
- .pf-c-page__main-section.pf-m-sticky-bottom,
21740
- .pf-c-page__main-wizard.pf-m-sticky-bottom,
21741
- .pf-c-page__main-group.pf-m-sticky-bottom,
21742
- .pf-c-page__main-subnav.pf-m-sticky-bottom {
21743
- position: sticky;
21744
- bottom: 0;
21745
- z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
21746
- box-shadow: var(--pf-c-page--section--m-sticky-bottom--BoxShadow);
21747
- }
21748
21729
  .pf-c-page__main-nav.pf-m-overflow-scroll,
21749
21730
  .pf-c-page__main-breadcrumb.pf-m-overflow-scroll,
21750
21731
  .pf-c-page__main-tabs.pf-m-overflow-scroll,
@@ -21776,6 +21757,160 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21776
21757
  z-index: var(--pf-c-page--section--m-shadow-top--ZIndex);
21777
21758
  box-shadow: var(--pf-c-page--section--m-shadow-top--BoxShadow);
21778
21759
  }
21760
+ .pf-c-page__main-nav.pf-m-sticky-top,
21761
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top,
21762
+ .pf-c-page__main-tabs.pf-m-sticky-top,
21763
+ .pf-c-page__main-section.pf-m-sticky-top,
21764
+ .pf-c-page__main-wizard.pf-m-sticky-top,
21765
+ .pf-c-page__main-group.pf-m-sticky-top,
21766
+ .pf-c-page__main-subnav.pf-m-sticky-top {
21767
+ position: sticky;
21768
+ top: 0;
21769
+ z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
21770
+ box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
21771
+ }
21772
+ .pf-c-page__main-nav.pf-m-sticky-bottom,
21773
+ .pf-c-page__main-breadcrumb.pf-m-sticky-bottom,
21774
+ .pf-c-page__main-tabs.pf-m-sticky-bottom,
21775
+ .pf-c-page__main-section.pf-m-sticky-bottom,
21776
+ .pf-c-page__main-wizard.pf-m-sticky-bottom,
21777
+ .pf-c-page__main-group.pf-m-sticky-bottom,
21778
+ .pf-c-page__main-subnav.pf-m-sticky-bottom {
21779
+ position: sticky;
21780
+ bottom: 0;
21781
+ z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
21782
+ box-shadow: var(--pf-c-page--section--m-sticky-bottom--BoxShadow);
21783
+ }
21784
+ @media (min-height: 0) {
21785
+ .pf-c-page__main-nav.pf-m-sticky-top-on-sm-height,
21786
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-sm-height,
21787
+ .pf-c-page__main-tabs.pf-m-sticky-top-on-sm-height,
21788
+ .pf-c-page__main-section.pf-m-sticky-top-on-sm-height,
21789
+ .pf-c-page__main-wizard.pf-m-sticky-top-on-sm-height,
21790
+ .pf-c-page__main-group.pf-m-sticky-top-on-sm-height,
21791
+ .pf-c-page__main-subnav.pf-m-sticky-top-on-sm-height {
21792
+ position: sticky;
21793
+ top: 0;
21794
+ z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
21795
+ box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
21796
+ }
21797
+ .pf-c-page__main-nav.pf-m-sticky-bottom-on-sm-height,
21798
+ .pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-sm-height,
21799
+ .pf-c-page__main-tabs.pf-m-sticky-bottom-on-sm-height,
21800
+ .pf-c-page__main-section.pf-m-sticky-bottom-on-sm-height,
21801
+ .pf-c-page__main-wizard.pf-m-sticky-bottom-on-sm-height,
21802
+ .pf-c-page__main-group.pf-m-sticky-bottom-on-sm-height,
21803
+ .pf-c-page__main-subnav.pf-m-sticky-bottom-on-sm-height {
21804
+ position: sticky;
21805
+ bottom: 0;
21806
+ z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
21807
+ box-shadow: var(--pf-c-page--section--m-sticky-bottom--BoxShadow);
21808
+ }
21809
+ }
21810
+ @media (min-height: 40rem) {
21811
+ .pf-c-page__main-nav.pf-m-sticky-top-on-md-height,
21812
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-md-height,
21813
+ .pf-c-page__main-tabs.pf-m-sticky-top-on-md-height,
21814
+ .pf-c-page__main-section.pf-m-sticky-top-on-md-height,
21815
+ .pf-c-page__main-wizard.pf-m-sticky-top-on-md-height,
21816
+ .pf-c-page__main-group.pf-m-sticky-top-on-md-height,
21817
+ .pf-c-page__main-subnav.pf-m-sticky-top-on-md-height {
21818
+ position: sticky;
21819
+ top: 0;
21820
+ z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
21821
+ box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
21822
+ }
21823
+ .pf-c-page__main-nav.pf-m-sticky-bottom-on-md-height,
21824
+ .pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-md-height,
21825
+ .pf-c-page__main-tabs.pf-m-sticky-bottom-on-md-height,
21826
+ .pf-c-page__main-section.pf-m-sticky-bottom-on-md-height,
21827
+ .pf-c-page__main-wizard.pf-m-sticky-bottom-on-md-height,
21828
+ .pf-c-page__main-group.pf-m-sticky-bottom-on-md-height,
21829
+ .pf-c-page__main-subnav.pf-m-sticky-bottom-on-md-height {
21830
+ position: sticky;
21831
+ bottom: 0;
21832
+ z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
21833
+ box-shadow: var(--pf-c-page--section--m-sticky-bottom--BoxShadow);
21834
+ }
21835
+ }
21836
+ @media (min-height: 48rem) {
21837
+ .pf-c-page__main-nav.pf-m-sticky-top-on-lg-height,
21838
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-lg-height,
21839
+ .pf-c-page__main-tabs.pf-m-sticky-top-on-lg-height,
21840
+ .pf-c-page__main-section.pf-m-sticky-top-on-lg-height,
21841
+ .pf-c-page__main-wizard.pf-m-sticky-top-on-lg-height,
21842
+ .pf-c-page__main-group.pf-m-sticky-top-on-lg-height,
21843
+ .pf-c-page__main-subnav.pf-m-sticky-top-on-lg-height {
21844
+ position: sticky;
21845
+ top: 0;
21846
+ z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
21847
+ box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
21848
+ }
21849
+ .pf-c-page__main-nav.pf-m-sticky-bottom-on-lg-height,
21850
+ .pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-lg-height,
21851
+ .pf-c-page__main-tabs.pf-m-sticky-bottom-on-lg-height,
21852
+ .pf-c-page__main-section.pf-m-sticky-bottom-on-lg-height,
21853
+ .pf-c-page__main-wizard.pf-m-sticky-bottom-on-lg-height,
21854
+ .pf-c-page__main-group.pf-m-sticky-bottom-on-lg-height,
21855
+ .pf-c-page__main-subnav.pf-m-sticky-bottom-on-lg-height {
21856
+ position: sticky;
21857
+ bottom: 0;
21858
+ z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
21859
+ box-shadow: var(--pf-c-page--section--m-sticky-bottom--BoxShadow);
21860
+ }
21861
+ }
21862
+ @media (min-height: 60rem) {
21863
+ .pf-c-page__main-nav.pf-m-sticky-top-on-xl-height,
21864
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-xl-height,
21865
+ .pf-c-page__main-tabs.pf-m-sticky-top-on-xl-height,
21866
+ .pf-c-page__main-section.pf-m-sticky-top-on-xl-height,
21867
+ .pf-c-page__main-wizard.pf-m-sticky-top-on-xl-height,
21868
+ .pf-c-page__main-group.pf-m-sticky-top-on-xl-height,
21869
+ .pf-c-page__main-subnav.pf-m-sticky-top-on-xl-height {
21870
+ position: sticky;
21871
+ top: 0;
21872
+ z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
21873
+ box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
21874
+ }
21875
+ .pf-c-page__main-nav.pf-m-sticky-bottom-on-xl-height,
21876
+ .pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-xl-height,
21877
+ .pf-c-page__main-tabs.pf-m-sticky-bottom-on-xl-height,
21878
+ .pf-c-page__main-section.pf-m-sticky-bottom-on-xl-height,
21879
+ .pf-c-page__main-wizard.pf-m-sticky-bottom-on-xl-height,
21880
+ .pf-c-page__main-group.pf-m-sticky-bottom-on-xl-height,
21881
+ .pf-c-page__main-subnav.pf-m-sticky-bottom-on-xl-height {
21882
+ position: sticky;
21883
+ bottom: 0;
21884
+ z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
21885
+ box-shadow: var(--pf-c-page--section--m-sticky-bottom--BoxShadow);
21886
+ }
21887
+ }
21888
+ @media (min-height: 80rem) {
21889
+ .pf-c-page__main-nav.pf-m-sticky-top-on-2xl-height,
21890
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-2xl-height,
21891
+ .pf-c-page__main-tabs.pf-m-sticky-top-on-2xl-height,
21892
+ .pf-c-page__main-section.pf-m-sticky-top-on-2xl-height,
21893
+ .pf-c-page__main-wizard.pf-m-sticky-top-on-2xl-height,
21894
+ .pf-c-page__main-group.pf-m-sticky-top-on-2xl-height,
21895
+ .pf-c-page__main-subnav.pf-m-sticky-top-on-2xl-height {
21896
+ position: sticky;
21897
+ top: 0;
21898
+ z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
21899
+ box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
21900
+ }
21901
+ .pf-c-page__main-nav.pf-m-sticky-bottom-on-2xl-height,
21902
+ .pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-2xl-height,
21903
+ .pf-c-page__main-tabs.pf-m-sticky-bottom-on-2xl-height,
21904
+ .pf-c-page__main-section.pf-m-sticky-bottom-on-2xl-height,
21905
+ .pf-c-page__main-wizard.pf-m-sticky-bottom-on-2xl-height,
21906
+ .pf-c-page__main-group.pf-m-sticky-bottom-on-2xl-height,
21907
+ .pf-c-page__main-subnav.pf-m-sticky-bottom-on-2xl-height {
21908
+ position: sticky;
21909
+ bottom: 0;
21910
+ z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
21911
+ box-shadow: var(--pf-c-page--section--m-sticky-bottom--BoxShadow);
21912
+ }
21913
+ }
21779
21914
 
21780
21915
  .pf-c-page__main,
21781
21916
  .pf-c-page__drawer {
@@ -29005,6 +29140,15 @@ svg.pf-c-spinner.pf-m-xl {
29005
29140
  --pf-c-tabs__add--c-button--PaddingTop: var(--pf-c-tabs__link--PaddingTop);
29006
29141
  --pf-c-tabs__add--c-button--PaddingBottom: var(--pf-c-tabs__link--PaddingBottom);
29007
29142
  --pf-c-tabs__add--c-button--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
29143
+ --pf-c-tabs__link-toggle-icon--Color: var(--pf-global--Color--200);
29144
+ --pf-c-tabs__link-toggle-icon--Transition: .2s ease-in 0s;
29145
+ --pf-c-tabs__link-toggle-icon--Rotate: 0;
29146
+ --pf-c-tabs__link-toggle-icon--FontSize: var(--pf-global--FontSize--sm);
29147
+ --pf-c-tabs__link--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
29148
+ --pf-c-tabs__link--m-expanded__toggle-icon--Rotate: 90deg;
29149
+ --pf-c-tabs__link--hover__toggle-icon--Color: var(--pf-global--Color--100);
29150
+ --pf-c-tabs__link--active__toggle-icon--Color: var(--pf-global--Color--100);
29151
+ --pf-c-tabs__link--focus__toggle-icon--Color: var(--pf-global--Color--100);
29008
29152
  position: relative;
29009
29153
  display: flex;
29010
29154
  width: var(--pf-c-tabs--Width);
@@ -29433,6 +29577,15 @@ svg.pf-c-spinner.pf-m-xl {
29433
29577
  --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--active--after--BorderWidth);
29434
29578
  }
29435
29579
 
29580
+ .pf-c-tabs__link:hover {
29581
+ --pf-c-tabs__link-toggle-icon--Color: var(--pf-c-tabs__link--hover__toggle-icon--Color);
29582
+ }
29583
+ .pf-c-tabs__link:focus {
29584
+ --pf-c-tabs__link-toggle-icon--Color: var(--pf-c-tabs__link--focus__toggle-icon--Color);
29585
+ }
29586
+ .pf-c-tabs__link:active, .pf-c-tabs__link.pf-m-active {
29587
+ --pf-c-tabs__link-toggle-icon--Color: var(--pf-c-tabs__link--active__toggle-icon--Color);
29588
+ }
29436
29589
  .pf-c-tabs__link:disabled, .pf-c-tabs__link.pf-m-disabled {
29437
29590
  pointer-events: none;
29438
29591
  }
@@ -29456,6 +29609,18 @@ svg.pf-c-spinner.pf-m-xl {
29456
29609
  .pf-c-tabs__link .pf-c-tabs__item-text:last-child {
29457
29610
  --pf-c-tabs__link--child--MarginRight: 0;
29458
29611
  }
29612
+ .pf-c-tabs__link.pf-m-expanded {
29613
+ --pf-c-tabs__link-toggle-icon--Color: var(--pf-c-tabs__link--m-expanded__toggle-icon--Color);
29614
+ --pf-c-tabs__link-toggle-icon--Rotate: var(--pf-c-tabs__link--m-expanded__toggle-icon--Rotate);
29615
+ }
29616
+
29617
+ .pf-c-tabs__link-toggle-icon {
29618
+ align-self: end;
29619
+ font-size: var(--pf-c-tabs__link-toggle-icon--FontSize);
29620
+ color: var(--pf-c-tabs__link-toggle-icon--Color);
29621
+ transition: var(--pf-c-tabs__link-toggle-icon--Transition);
29622
+ transform: rotate(var(--pf-c-tabs__link-toggle-icon--Rotate));
29623
+ }
29459
29624
 
29460
29625
  .pf-c-tabs__item-close {
29461
29626
  display: flex;