@patternfly/patternfly 4.198.0 → 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.
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.0",
4
+ "version": "4.199.0",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -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;
@@ -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;
@@ -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 {
@@ -23014,6 +23149,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
23014
23149
  font-weight: var(--pf-c-progress-stepper__step-title--FontWeight);
23015
23150
  color: var(--pf-c-progress-stepper__step-title--Color);
23016
23151
  text-align: var(--pf-c-progress-stepper__step-title--TextAlign);
23152
+ border: 0;
23017
23153
  }
23018
23154
  .pf-c-progress-stepper__step-title.pf-m-help-text {
23019
23155
  text-decoration: underline;
@@ -27084,12 +27220,14 @@ svg.pf-c-spinner.pf-m-xl {
27084
27220
  border-bottom: 0;
27085
27221
  }
27086
27222
  .pf-c-table.pf-m-sticky-header > thead > tr > * {
27223
+ z-index: var(--pf-global--ZIndex--xs);
27224
+ }
27225
+ .pf-c-table.pf-m-sticky-header > thead:not(.pf-m-nested-column-header) > tr > * {
27087
27226
  position: sticky;
27088
27227
  top: 0;
27089
- z-index: var(--pf-global--ZIndex--xs);
27090
27228
  background: var(--pf-c-table--BackgroundColor);
27091
27229
  }
27092
- .pf-c-table.pf-m-sticky-header > thead > tr > *::after {
27230
+ .pf-c-table.pf-m-sticky-header > thead:not(.pf-m-nested-column-header) > tr > *::after {
27093
27231
  position: absolute;
27094
27232
  right: 0;
27095
27233
  bottom: 0;
@@ -27097,6 +27235,27 @@ svg.pf-c-spinner.pf-m-xl {
27097
27235
  content: "";
27098
27236
  border-bottom: var(--pf-c-table--border-width--base) solid var(--pf-c-table--BorderColor);
27099
27237
  }
27238
+ .pf-c-table.pf-m-sticky-header > .pf-m-nested-column-header {
27239
+ position: sticky;
27240
+ top: 0;
27241
+ z-index: var(--pf-global--ZIndex--xs);
27242
+ background: var(--pf-c-table--BackgroundColor);
27243
+ }
27244
+ .pf-c-table.pf-m-sticky-header > .pf-m-nested-column-header > .pf-m-border-row {
27245
+ height: var(--pf-c-table--border-width--base);
27246
+ background-color: var(--pf-c-table--BorderColor);
27247
+ }
27248
+ .pf-c-table.pf-m-sticky-header > .pf-m-nested-column-header tr:not(:nth-last-child(2)) th:not([rowspan]),
27249
+ .pf-c-table.pf-m-sticky-header > .pf-m-nested-column-header tr:not(:nth-last-child(2)) td:not([rowspan]) {
27250
+ --pf-c-table--cell--PaddingBottom: var(--pf-c-table--thead--m-nested-column-header--tr--PaddingBottom);
27251
+ }
27252
+ .pf-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:not(:last-child) {
27253
+ border-bottom: 0;
27254
+ }
27255
+ .pf-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:not(:last-child) th:not([rowspan]),
27256
+ .pf-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:not(:last-child) td:not([rowspan]) {
27257
+ --pf-c-table--cell--PaddingBottom: var(--pf-c-table--thead--m-nested-column-header--tr--PaddingBottom);
27258
+ }
27100
27259
  .pf-c-table.pf-m-striped:not(.pf-m-expandable) > tbody > tr:nth-child(odd), .pf-c-table.pf-m-striped.pf-m-expandable > tbody:nth-of-type(odd) > tr:not(.pf-c-table__expandable-row),
27101
27260
  .pf-c-table > .pf-m-striped > tr:nth-child(odd),
27102
27261
  .pf-c-table > .pf-m-striped-even > tr:nth-child(even),
@@ -27194,13 +27353,6 @@ svg.pf-c-spinner.pf-m-xl {
27194
27353
  .pf-c-table thead.pf-m-nested-column-header tr:not(:first-child) td:not([rowspan]) {
27195
27354
  --pf-c-table--cell--PaddingTop: var(--pf-c-table--thead--m-nested-column-header--tr--PaddingTop);
27196
27355
  }
27197
- .pf-c-table thead.pf-m-nested-column-header tr:not(:last-child) {
27198
- --pf-c-table--border-width--base: 0;
27199
- }
27200
- .pf-c-table thead.pf-m-nested-column-header tr:not(:last-child) th:not([rowspan]),
27201
- .pf-c-table thead.pf-m-nested-column-header tr:not(:last-child) td:not([rowspan]) {
27202
- --pf-c-table--cell--PaddingBottom: var(--pf-c-table--thead--m-nested-column-header--tr--PaddingBottom);
27203
- }
27204
27356
  .pf-c-table thead .pf-c-table__subhead {
27205
27357
  --pf-c-table__sort__button__text--Color: var(--pf-c-table__subhead--Color);
27206
27358
  color: var(--pf-c-table__subhead--Color);
@@ -28861,6 +29013,15 @@ svg.pf-c-spinner.pf-m-xl {
28861
29013
  --pf-c-tabs__add--c-button--PaddingTop: var(--pf-c-tabs__link--PaddingTop);
28862
29014
  --pf-c-tabs__add--c-button--PaddingBottom: var(--pf-c-tabs__link--PaddingBottom);
28863
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);
28864
29025
  position: relative;
28865
29026
  display: flex;
28866
29027
  width: var(--pf-c-tabs--Width);
@@ -29289,6 +29450,15 @@ svg.pf-c-spinner.pf-m-xl {
29289
29450
  --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--active--after--BorderWidth);
29290
29451
  }
29291
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
+ }
29292
29462
  .pf-c-tabs__link:disabled, .pf-c-tabs__link.pf-m-disabled {
29293
29463
  pointer-events: none;
29294
29464
  }
@@ -29312,6 +29482,18 @@ svg.pf-c-spinner.pf-m-xl {
29312
29482
  .pf-c-tabs__link .pf-c-tabs__item-text:last-child {
29313
29483
  --pf-c-tabs__link--child--MarginRight: 0;
29314
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
+ }
29315
29497
 
29316
29498
  .pf-c-tabs__item-close {
29317
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 {
@@ -23141,6 +23276,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
23141
23276
  font-weight: var(--pf-c-progress-stepper__step-title--FontWeight);
23142
23277
  color: var(--pf-c-progress-stepper__step-title--Color);
23143
23278
  text-align: var(--pf-c-progress-stepper__step-title--TextAlign);
23279
+ border: 0;
23144
23280
  }
23145
23281
  .pf-c-progress-stepper__step-title.pf-m-help-text {
23146
23282
  text-decoration: underline;
@@ -27211,12 +27347,14 @@ svg.pf-c-spinner.pf-m-xl {
27211
27347
  border-bottom: 0;
27212
27348
  }
27213
27349
  .pf-c-table.pf-m-sticky-header > thead > tr > * {
27350
+ z-index: var(--pf-global--ZIndex--xs);
27351
+ }
27352
+ .pf-c-table.pf-m-sticky-header > thead:not(.pf-m-nested-column-header) > tr > * {
27214
27353
  position: sticky;
27215
27354
  top: 0;
27216
- z-index: var(--pf-global--ZIndex--xs);
27217
27355
  background: var(--pf-c-table--BackgroundColor);
27218
27356
  }
27219
- .pf-c-table.pf-m-sticky-header > thead > tr > *::after {
27357
+ .pf-c-table.pf-m-sticky-header > thead:not(.pf-m-nested-column-header) > tr > *::after {
27220
27358
  position: absolute;
27221
27359
  right: 0;
27222
27360
  bottom: 0;
@@ -27224,6 +27362,27 @@ svg.pf-c-spinner.pf-m-xl {
27224
27362
  content: "";
27225
27363
  border-bottom: var(--pf-c-table--border-width--base) solid var(--pf-c-table--BorderColor);
27226
27364
  }
27365
+ .pf-c-table.pf-m-sticky-header > .pf-m-nested-column-header {
27366
+ position: sticky;
27367
+ top: 0;
27368
+ z-index: var(--pf-global--ZIndex--xs);
27369
+ background: var(--pf-c-table--BackgroundColor);
27370
+ }
27371
+ .pf-c-table.pf-m-sticky-header > .pf-m-nested-column-header > .pf-m-border-row {
27372
+ height: var(--pf-c-table--border-width--base);
27373
+ background-color: var(--pf-c-table--BorderColor);
27374
+ }
27375
+ .pf-c-table.pf-m-sticky-header > .pf-m-nested-column-header tr:not(:nth-last-child(2)) th:not([rowspan]),
27376
+ .pf-c-table.pf-m-sticky-header > .pf-m-nested-column-header tr:not(:nth-last-child(2)) td:not([rowspan]) {
27377
+ --pf-c-table--cell--PaddingBottom: var(--pf-c-table--thead--m-nested-column-header--tr--PaddingBottom);
27378
+ }
27379
+ .pf-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:not(:last-child) {
27380
+ border-bottom: 0;
27381
+ }
27382
+ .pf-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:not(:last-child) th:not([rowspan]),
27383
+ .pf-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:not(:last-child) td:not([rowspan]) {
27384
+ --pf-c-table--cell--PaddingBottom: var(--pf-c-table--thead--m-nested-column-header--tr--PaddingBottom);
27385
+ }
27227
27386
  .pf-c-table.pf-m-striped:not(.pf-m-expandable) > tbody > tr:nth-child(odd), .pf-c-table.pf-m-striped.pf-m-expandable > tbody:nth-of-type(odd) > tr:not(.pf-c-table__expandable-row),
27228
27387
  .pf-c-table > .pf-m-striped > tr:nth-child(odd),
27229
27388
  .pf-c-table > .pf-m-striped-even > tr:nth-child(even),
@@ -27321,13 +27480,6 @@ svg.pf-c-spinner.pf-m-xl {
27321
27480
  .pf-c-table thead.pf-m-nested-column-header tr:not(:first-child) td:not([rowspan]) {
27322
27481
  --pf-c-table--cell--PaddingTop: var(--pf-c-table--thead--m-nested-column-header--tr--PaddingTop);
27323
27482
  }
27324
- .pf-c-table thead.pf-m-nested-column-header tr:not(:last-child) {
27325
- --pf-c-table--border-width--base: 0;
27326
- }
27327
- .pf-c-table thead.pf-m-nested-column-header tr:not(:last-child) th:not([rowspan]),
27328
- .pf-c-table thead.pf-m-nested-column-header tr:not(:last-child) td:not([rowspan]) {
27329
- --pf-c-table--cell--PaddingBottom: var(--pf-c-table--thead--m-nested-column-header--tr--PaddingBottom);
27330
- }
27331
27483
  .pf-c-table thead .pf-c-table__subhead {
27332
27484
  --pf-c-table__sort__button__text--Color: var(--pf-c-table__subhead--Color);
27333
27485
  color: var(--pf-c-table__subhead--Color);
@@ -28988,6 +29140,15 @@ svg.pf-c-spinner.pf-m-xl {
28988
29140
  --pf-c-tabs__add--c-button--PaddingTop: var(--pf-c-tabs__link--PaddingTop);
28989
29141
  --pf-c-tabs__add--c-button--PaddingBottom: var(--pf-c-tabs__link--PaddingBottom);
28990
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);
28991
29152
  position: relative;
28992
29153
  display: flex;
28993
29154
  width: var(--pf-c-tabs--Width);
@@ -29416,6 +29577,15 @@ svg.pf-c-spinner.pf-m-xl {
29416
29577
  --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--active--after--BorderWidth);
29417
29578
  }
29418
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
+ }
29419
29589
  .pf-c-tabs__link:disabled, .pf-c-tabs__link.pf-m-disabled {
29420
29590
  pointer-events: none;
29421
29591
  }
@@ -29439,6 +29609,18 @@ svg.pf-c-spinner.pf-m-xl {
29439
29609
  .pf-c-tabs__link .pf-c-tabs__item-text:last-child {
29440
29610
  --pf-c-tabs__link--child--MarginRight: 0;
29441
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
+ }
29442
29624
 
29443
29625
  .pf-c-tabs__item-close {
29444
29626
  display: flex;