@patternfly/patternfly 5.0.0-alpha.73 → 5.0.0-alpha.74

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 +20 -17
  2. package/components/Page/page.scss +5 -2
  3. package/components/Page/themes/dark/page.scss +1 -1
  4. package/package.json +1 -1
  5. package/patternfly-no-globals.css +20 -17
  6. package/patternfly-theme-dark-unversioned.css +20 -17
  7. package/patternfly.css +20 -17
  8. package/patternfly.min.css +1 -1
  9. package/patternfly.min.css.map +1 -1
package/components/Page/page.css CHANGED
@@ -67,7 +67,7 @@
67
67
  }
68
68
  }
69
69
 
70
- .pf-v5-c-page {
70
+ :root {
71
71
  --pf-v5-c-page--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
72
72
  --pf-v5-c-page--inset: var(--pf-v5-global--spacer--md);
73
73
  --pf-v5-c-page--xl--inset: var(--pf-v5-global--spacer--lg);
@@ -181,40 +181,32 @@
181
181
  --pf-v5-c-page__main-wizard--BorderTopColor: var(--pf-v5-global--BorderColor--100);
182
182
  --pf-v5-c-page__main-wizard--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
183
183
  --pf-v5-c-page__main-wizard--m-light-200--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
184
- display: grid;
185
- grid-template-areas: "header" "main";
186
- grid-template-rows: max-content 1fr;
187
- grid-template-columns: 1fr;
188
- height: 100vh;
189
- height: 100dvh;
190
- max-height: 100%;
191
- background-color: var(--pf-v5-c-page--BackgroundColor);
192
184
  }
193
185
  @media (min-width: 1200px) {
194
- .pf-v5-c-page {
186
+ :root {
195
187
  --pf-v5-c-page__header-brand--PaddingLeft: var(--pf-v5-c-page__header-brand--xl--PaddingLeft);
196
188
  --pf-v5-c-page--inset: var(--pf-v5-c-page--xl--inset);
197
189
  }
198
190
  }
199
191
  @media screen and (min-width: 1200px) {
200
- .pf-v5-c-page {
192
+ :root {
201
193
  --pf-v5-c-page__header-nav--BackgroundColor: var(--pf-v5-c-page__header-nav--xl--BackgroundColor);
202
194
  --pf-v5-c-page__header-nav--PaddingRight: var(--pf-v5-c-page__header-nav--xl--PaddingRight);
203
195
  --pf-v5-c-page__header-nav--PaddingLeft: var(--pf-v5-c-page__header-nav--xl--PaddingLeft);
204
196
  }
205
197
  }
206
198
  @media screen and (min-width: 1200px) {
207
- .pf-v5-c-page {
199
+ :root {
208
200
  --pf-v5-c-page__header-tools--MarginRight: var(--pf-v5-c-page__header-tools--xl--MarginRight);
209
201
  }
210
202
  }
211
203
  @media screen and (min-width: 1200px) {
212
- .pf-v5-c-page {
204
+ :root {
213
205
  --pf-v5-c-page__sidebar--TranslateX: var(--pf-v5-c-page__sidebar--xl--TranslateX);
214
206
  }
215
207
  }
216
208
  @media screen and (min-width: 1200px) {
217
- .pf-v5-c-page {
209
+ :root {
218
210
  --pf-v5-c-page__main-section--PaddingTop: var(--pf-v5-c-page__main-section--xl--PaddingTop);
219
211
  --pf-v5-c-page__main-section--PaddingRight: var(--pf-v5-c-page__main-section--xl--PaddingRight);
220
212
  --pf-v5-c-page__main-section--PaddingBottom: var(--pf-v5-c-page__main-section--xl--PaddingBottom);
@@ -222,17 +214,28 @@
222
214
  }
223
215
  }
224
216
  @media screen and (min-width: 1200px) {
225
- .pf-v5-c-page {
217
+ :root {
226
218
  --pf-v5-c-page__main-nav--PaddingRight: var(--pf-v5-c-page__main-nav--xl--PaddingRight);
227
219
  --pf-v5-c-page__main-nav--PaddingLeft: var(--pf-v5-c-page__main-nav--xl--PaddingLeft);
228
220
  }
229
221
  }
230
222
  @media screen and (min-width: 1200px) {
231
- .pf-v5-c-page {
223
+ :root {
232
224
  --pf-v5-c-page__main-breadcrumb--PaddingRight: var(--pf-v5-c-page__main-breadcrumb--xl--PaddingRight);
233
225
  --pf-v5-c-page__main-breadcrumb--PaddingLeft: var(--pf-v5-c-page__main-breadcrumb--xl--PaddingLeft);
234
226
  }
235
227
  }
228
+
229
+ .pf-v5-c-page {
230
+ display: grid;
231
+ grid-template-areas: "header" "main";
232
+ grid-template-rows: max-content 1fr;
233
+ grid-template-columns: 1fr;
234
+ height: 100vh;
235
+ height: 100dvh;
236
+ max-height: 100%;
237
+ background-color: var(--pf-v5-c-page--BackgroundColor);
238
+ }
236
239
  @media (min-width: 1200px) {
237
240
  .pf-v5-c-page {
238
241
  grid-template-areas: "header header" "nav main";
@@ -961,7 +964,7 @@
961
964
  --pf-v5-global--BackgroundColor--100: #1b1d21;
962
965
  }
963
966
 
964
- :where(.pf-v5-theme-dark) .pf-v5-c-page {
967
+ :where(.pf-v5-theme-dark):root {
965
968
  --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
966
969
  --pf-v5-c-page__header-tools--c-button--m-selected--before--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
967
970
  --pf-v5-c-page__sidebar--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
package/components/Page/page.scss CHANGED
@@ -4,8 +4,7 @@ $pf-page-v5--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl"
4
4
  $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
5
5
  // stylelint-enable
6
6
 
7
- // URL.com/guidelines#layout
8
- .#{$page} {
7
+ :root {
9
8
  --#{$page}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-300);
10
9
  --#{$page}--inset: var(--#{$pf-global}--spacer--md);
11
10
  --#{$page}--xl--inset: var(--#{$pf-global}--spacer--lg);
@@ -197,6 +196,10 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
197
196
  --#{$page}__main-wizard--BorderTopWidth: var(--#{$pf-global}--BorderWidth--sm);
198
197
  --#{$page}__main-wizard--m-light-200--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
199
198
 
199
+ // URL.com/guidelines#layout
200
+ }
201
+
202
+ .#{$page} {
200
203
  // Base
201
204
  display: grid;
202
205
  grid-template-areas:
package/components/Page/themes/dark/page.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @import "../../../../sass-utilities/themes/dark/all";
2
2
 
3
3
  @mixin pf-v5-theme-dark-page() {
4
- .#{$page} {
4
+ &:root {
5
5
  --#{$page}__main-section--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
6
6
  --#{$page}__header-tools--c-button--m-selected--before--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
7
7
  --#{$page}__sidebar--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
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": "5.0.0-alpha.73",
4
+ "version": "5.0.0-alpha.74",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -20751,7 +20751,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
20751
20751
  --pf-v5-c-overflow-menu--spacer: 0;
20752
20752
  }
20753
20753
 
20754
- .pf-v5-c-page {
20754
+ :root {
20755
20755
  --pf-v5-c-page--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
20756
20756
  --pf-v5-c-page--inset: var(--pf-v5-global--spacer--md);
20757
20757
  --pf-v5-c-page--xl--inset: var(--pf-v5-global--spacer--lg);
@@ -20865,40 +20865,32 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
20865
20865
  --pf-v5-c-page__main-wizard--BorderTopColor: var(--pf-v5-global--BorderColor--100);
20866
20866
  --pf-v5-c-page__main-wizard--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
20867
20867
  --pf-v5-c-page__main-wizard--m-light-200--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
20868
- display: grid;
20869
- grid-template-areas: "header" "main";
20870
- grid-template-rows: max-content 1fr;
20871
- grid-template-columns: 1fr;
20872
- height: 100vh;
20873
- height: 100dvh;
20874
- max-height: 100%;
20875
- background-color: var(--pf-v5-c-page--BackgroundColor);
20876
20868
  }
20877
20869
  @media (min-width: 1200px) {
20878
- .pf-v5-c-page {
20870
+ :root {
20879
20871
  --pf-v5-c-page__header-brand--PaddingLeft: var(--pf-v5-c-page__header-brand--xl--PaddingLeft);
20880
20872
  --pf-v5-c-page--inset: var(--pf-v5-c-page--xl--inset);
20881
20873
  }
20882
20874
  }
20883
20875
  @media screen and (min-width: 1200px) {
20884
- .pf-v5-c-page {
20876
+ :root {
20885
20877
  --pf-v5-c-page__header-nav--BackgroundColor: var(--pf-v5-c-page__header-nav--xl--BackgroundColor);
20886
20878
  --pf-v5-c-page__header-nav--PaddingRight: var(--pf-v5-c-page__header-nav--xl--PaddingRight);
20887
20879
  --pf-v5-c-page__header-nav--PaddingLeft: var(--pf-v5-c-page__header-nav--xl--PaddingLeft);
20888
20880
  }
20889
20881
  }
20890
20882
  @media screen and (min-width: 1200px) {
20891
- .pf-v5-c-page {
20883
+ :root {
20892
20884
  --pf-v5-c-page__header-tools--MarginRight: var(--pf-v5-c-page__header-tools--xl--MarginRight);
20893
20885
  }
20894
20886
  }
20895
20887
  @media screen and (min-width: 1200px) {
20896
- .pf-v5-c-page {
20888
+ :root {
20897
20889
  --pf-v5-c-page__sidebar--TranslateX: var(--pf-v5-c-page__sidebar--xl--TranslateX);
20898
20890
  }
20899
20891
  }
20900
20892
  @media screen and (min-width: 1200px) {
20901
- .pf-v5-c-page {
20893
+ :root {
20902
20894
  --pf-v5-c-page__main-section--PaddingTop: var(--pf-v5-c-page__main-section--xl--PaddingTop);
20903
20895
  --pf-v5-c-page__main-section--PaddingRight: var(--pf-v5-c-page__main-section--xl--PaddingRight);
20904
20896
  --pf-v5-c-page__main-section--PaddingBottom: var(--pf-v5-c-page__main-section--xl--PaddingBottom);
@@ -20906,17 +20898,28 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
20906
20898
  }
20907
20899
  }
20908
20900
  @media screen and (min-width: 1200px) {
20909
- .pf-v5-c-page {
20901
+ :root {
20910
20902
  --pf-v5-c-page__main-nav--PaddingRight: var(--pf-v5-c-page__main-nav--xl--PaddingRight);
20911
20903
  --pf-v5-c-page__main-nav--PaddingLeft: var(--pf-v5-c-page__main-nav--xl--PaddingLeft);
20912
20904
  }
20913
20905
  }
20914
20906
  @media screen and (min-width: 1200px) {
20915
- .pf-v5-c-page {
20907
+ :root {
20916
20908
  --pf-v5-c-page__main-breadcrumb--PaddingRight: var(--pf-v5-c-page__main-breadcrumb--xl--PaddingRight);
20917
20909
  --pf-v5-c-page__main-breadcrumb--PaddingLeft: var(--pf-v5-c-page__main-breadcrumb--xl--PaddingLeft);
20918
20910
  }
20919
20911
  }
20912
+
20913
+ .pf-v5-c-page {
20914
+ display: grid;
20915
+ grid-template-areas: "header" "main";
20916
+ grid-template-rows: max-content 1fr;
20917
+ grid-template-columns: 1fr;
20918
+ height: 100vh;
20919
+ height: 100dvh;
20920
+ max-height: 100%;
20921
+ background-color: var(--pf-v5-c-page--BackgroundColor);
20922
+ }
20920
20923
  @media (min-width: 1200px) {
20921
20924
  .pf-v5-c-page {
20922
20925
  grid-template-areas: "header header" "nav main";
@@ -21646,7 +21649,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21646
21649
  --pf-v5-global--BackgroundColor--100: #1b1d21;
21647
21650
  }
21648
21651
 
21649
- :where(.pf-v5-theme-dark) .pf-v5-c-page {
21652
+ :where(.pf-v5-theme-dark):root {
21650
21653
  --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
21651
21654
  --pf-v5-c-page__header-tools--c-button--m-selected--before--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
21652
21655
  --pf-v5-c-page__sidebar--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
package/patternfly-theme-dark-unversioned.css CHANGED
@@ -20868,7 +20868,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
20868
20868
  --pf-v5-c-overflow-menu--spacer: 0;
20869
20869
  }
20870
20870
 
20871
- .pf-v5-c-page {
20871
+ :root {
20872
20872
  --pf-v5-c-page--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
20873
20873
  --pf-v5-c-page--inset: var(--pf-v5-global--spacer--md);
20874
20874
  --pf-v5-c-page--xl--inset: var(--pf-v5-global--spacer--lg);
@@ -20982,40 +20982,32 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
20982
20982
  --pf-v5-c-page__main-wizard--BorderTopColor: var(--pf-v5-global--BorderColor--100);
20983
20983
  --pf-v5-c-page__main-wizard--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
20984
20984
  --pf-v5-c-page__main-wizard--m-light-200--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
20985
- display: grid;
20986
- grid-template-areas: "header" "main";
20987
- grid-template-rows: max-content 1fr;
20988
- grid-template-columns: 1fr;
20989
- height: 100vh;
20990
- height: 100dvh;
20991
- max-height: 100%;
20992
- background-color: var(--pf-v5-c-page--BackgroundColor);
20993
20985
  }
20994
20986
  @media (min-width: 1200px) {
20995
- .pf-v5-c-page {
20987
+ :root {
20996
20988
  --pf-v5-c-page__header-brand--PaddingLeft: var(--pf-v5-c-page__header-brand--xl--PaddingLeft);
20997
20989
  --pf-v5-c-page--inset: var(--pf-v5-c-page--xl--inset);
20998
20990
  }
20999
20991
  }
21000
20992
  @media screen and (min-width: 1200px) {
21001
- .pf-v5-c-page {
20993
+ :root {
21002
20994
  --pf-v5-c-page__header-nav--BackgroundColor: var(--pf-v5-c-page__header-nav--xl--BackgroundColor);
21003
20995
  --pf-v5-c-page__header-nav--PaddingRight: var(--pf-v5-c-page__header-nav--xl--PaddingRight);
21004
20996
  --pf-v5-c-page__header-nav--PaddingLeft: var(--pf-v5-c-page__header-nav--xl--PaddingLeft);
21005
20997
  }
21006
20998
  }
21007
20999
  @media screen and (min-width: 1200px) {
21008
- .pf-v5-c-page {
21000
+ :root {
21009
21001
  --pf-v5-c-page__header-tools--MarginRight: var(--pf-v5-c-page__header-tools--xl--MarginRight);
21010
21002
  }
21011
21003
  }
21012
21004
  @media screen and (min-width: 1200px) {
21013
- .pf-v5-c-page {
21005
+ :root {
21014
21006
  --pf-v5-c-page__sidebar--TranslateX: var(--pf-v5-c-page__sidebar--xl--TranslateX);
21015
21007
  }
21016
21008
  }
21017
21009
  @media screen and (min-width: 1200px) {
21018
- .pf-v5-c-page {
21010
+ :root {
21019
21011
  --pf-v5-c-page__main-section--PaddingTop: var(--pf-v5-c-page__main-section--xl--PaddingTop);
21020
21012
  --pf-v5-c-page__main-section--PaddingRight: var(--pf-v5-c-page__main-section--xl--PaddingRight);
21021
21013
  --pf-v5-c-page__main-section--PaddingBottom: var(--pf-v5-c-page__main-section--xl--PaddingBottom);
@@ -21023,17 +21015,28 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21023
21015
  }
21024
21016
  }
21025
21017
  @media screen and (min-width: 1200px) {
21026
- .pf-v5-c-page {
21018
+ :root {
21027
21019
  --pf-v5-c-page__main-nav--PaddingRight: var(--pf-v5-c-page__main-nav--xl--PaddingRight);
21028
21020
  --pf-v5-c-page__main-nav--PaddingLeft: var(--pf-v5-c-page__main-nav--xl--PaddingLeft);
21029
21021
  }
21030
21022
  }
21031
21023
  @media screen and (min-width: 1200px) {
21032
- .pf-v5-c-page {
21024
+ :root {
21033
21025
  --pf-v5-c-page__main-breadcrumb--PaddingRight: var(--pf-v5-c-page__main-breadcrumb--xl--PaddingRight);
21034
21026
  --pf-v5-c-page__main-breadcrumb--PaddingLeft: var(--pf-v5-c-page__main-breadcrumb--xl--PaddingLeft);
21035
21027
  }
21036
21028
  }
21029
+
21030
+ .pf-v5-c-page {
21031
+ display: grid;
21032
+ grid-template-areas: "header" "main";
21033
+ grid-template-rows: max-content 1fr;
21034
+ grid-template-columns: 1fr;
21035
+ height: 100vh;
21036
+ height: 100dvh;
21037
+ max-height: 100%;
21038
+ background-color: var(--pf-v5-c-page--BackgroundColor);
21039
+ }
21037
21040
  @media (min-width: 1200px) {
21038
21041
  .pf-v5-c-page {
21039
21042
  grid-template-areas: "header header" "nav main";
@@ -21763,7 +21766,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21763
21766
  --pf-v5-global--BackgroundColor--100: #1b1d21;
21764
21767
  }
21765
21768
 
21766
- :where(.pf-theme-dark) .pf-v5-c-page {
21769
+ :where(.pf-theme-dark):root {
21767
21770
  --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
21768
21771
  --pf-v5-c-page__header-tools--c-button--m-selected--before--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
21769
21772
  --pf-v5-c-page__sidebar--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
package/patternfly.css CHANGED
@@ -20868,7 +20868,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
20868
20868
  --pf-v5-c-overflow-menu--spacer: 0;
20869
20869
  }
20870
20870
 
20871
- .pf-v5-c-page {
20871
+ :root {
20872
20872
  --pf-v5-c-page--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
20873
20873
  --pf-v5-c-page--inset: var(--pf-v5-global--spacer--md);
20874
20874
  --pf-v5-c-page--xl--inset: var(--pf-v5-global--spacer--lg);
@@ -20982,40 +20982,32 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
20982
20982
  --pf-v5-c-page__main-wizard--BorderTopColor: var(--pf-v5-global--BorderColor--100);
20983
20983
  --pf-v5-c-page__main-wizard--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
20984
20984
  --pf-v5-c-page__main-wizard--m-light-200--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
20985
- display: grid;
20986
- grid-template-areas: "header" "main";
20987
- grid-template-rows: max-content 1fr;
20988
- grid-template-columns: 1fr;
20989
- height: 100vh;
20990
- height: 100dvh;
20991
- max-height: 100%;
20992
- background-color: var(--pf-v5-c-page--BackgroundColor);
20993
20985
  }
20994
20986
  @media (min-width: 1200px) {
20995
- .pf-v5-c-page {
20987
+ :root {
20996
20988
  --pf-v5-c-page__header-brand--PaddingLeft: var(--pf-v5-c-page__header-brand--xl--PaddingLeft);
20997
20989
  --pf-v5-c-page--inset: var(--pf-v5-c-page--xl--inset);
20998
20990
  }
20999
20991
  }
21000
20992
  @media screen and (min-width: 1200px) {
21001
- .pf-v5-c-page {
20993
+ :root {
21002
20994
  --pf-v5-c-page__header-nav--BackgroundColor: var(--pf-v5-c-page__header-nav--xl--BackgroundColor);
21003
20995
  --pf-v5-c-page__header-nav--PaddingRight: var(--pf-v5-c-page__header-nav--xl--PaddingRight);
21004
20996
  --pf-v5-c-page__header-nav--PaddingLeft: var(--pf-v5-c-page__header-nav--xl--PaddingLeft);
21005
20997
  }
21006
20998
  }
21007
20999
  @media screen and (min-width: 1200px) {
21008
- .pf-v5-c-page {
21000
+ :root {
21009
21001
  --pf-v5-c-page__header-tools--MarginRight: var(--pf-v5-c-page__header-tools--xl--MarginRight);
21010
21002
  }
21011
21003
  }
21012
21004
  @media screen and (min-width: 1200px) {
21013
- .pf-v5-c-page {
21005
+ :root {
21014
21006
  --pf-v5-c-page__sidebar--TranslateX: var(--pf-v5-c-page__sidebar--xl--TranslateX);
21015
21007
  }
21016
21008
  }
21017
21009
  @media screen and (min-width: 1200px) {
21018
- .pf-v5-c-page {
21010
+ :root {
21019
21011
  --pf-v5-c-page__main-section--PaddingTop: var(--pf-v5-c-page__main-section--xl--PaddingTop);
21020
21012
  --pf-v5-c-page__main-section--PaddingRight: var(--pf-v5-c-page__main-section--xl--PaddingRight);
21021
21013
  --pf-v5-c-page__main-section--PaddingBottom: var(--pf-v5-c-page__main-section--xl--PaddingBottom);
@@ -21023,17 +21015,28 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21023
21015
  }
21024
21016
  }
21025
21017
  @media screen and (min-width: 1200px) {
21026
- .pf-v5-c-page {
21018
+ :root {
21027
21019
  --pf-v5-c-page__main-nav--PaddingRight: var(--pf-v5-c-page__main-nav--xl--PaddingRight);
21028
21020
  --pf-v5-c-page__main-nav--PaddingLeft: var(--pf-v5-c-page__main-nav--xl--PaddingLeft);
21029
21021
  }
21030
21022
  }
21031
21023
  @media screen and (min-width: 1200px) {
21032
- .pf-v5-c-page {
21024
+ :root {
21033
21025
  --pf-v5-c-page__main-breadcrumb--PaddingRight: var(--pf-v5-c-page__main-breadcrumb--xl--PaddingRight);
21034
21026
  --pf-v5-c-page__main-breadcrumb--PaddingLeft: var(--pf-v5-c-page__main-breadcrumb--xl--PaddingLeft);
21035
21027
  }
21036
21028
  }
21029
+
21030
+ .pf-v5-c-page {
21031
+ display: grid;
21032
+ grid-template-areas: "header" "main";
21033
+ grid-template-rows: max-content 1fr;
21034
+ grid-template-columns: 1fr;
21035
+ height: 100vh;
21036
+ height: 100dvh;
21037
+ max-height: 100%;
21038
+ background-color: var(--pf-v5-c-page--BackgroundColor);
21039
+ }
21037
21040
  @media (min-width: 1200px) {
21038
21041
  .pf-v5-c-page {
21039
21042
  grid-template-areas: "header header" "nav main";
@@ -21763,7 +21766,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21763
21766
  --pf-v5-global--BackgroundColor--100: #1b1d21;
21764
21767
  }
21765
21768
 
21766
- :where(.pf-v5-theme-dark) .pf-v5-c-page {
21769
+ :where(.pf-v5-theme-dark):root {
21767
21770
  --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
21768
21771
  --pf-v5-c-page__header-tools--c-button--m-selected--before--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
21769
21772
  --pf-v5-c-page__sidebar--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);