@patternfly/react-styles 6.0.0-alpha.31 → 6.0.0-alpha.32

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 (12) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/css/components/Masthead/masthead.css +194 -96
  3. package/css/components/Nav/nav.css +5 -4
  4. package/css/components/Nav/nav.d.ts +1 -1
  5. package/css/components/Nav/nav.js +1 -1
  6. package/css/components/Nav/nav.mjs +1 -1
  7. package/css/components/Page/page.css +32 -18
  8. package/css/components/_index.css +231 -118
  9. package/css/components/_index.d.ts +1 -0
  10. package/css/components/_index.js +1 -0
  11. package/css/components/_index.mjs +1 -0
  12. package/package.json +3 -3
package/css/components/Page/page.css CHANGED
@@ -1,7 +1,6 @@
1
1
  :where(:root, .pf-v6-c-page) {
2
2
  --pf-v6-c-page--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
3
- --pf-v6-c-page--inset: var(--pf-t--global--spacer--md);
4
- --pf-v6-c-page--xl--inset: var(--pf-t--global--spacer--xl);
3
+ --pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome);
5
4
  --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
6
5
  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
7
6
  --pf-v6-c-page__sidebar--Width: 18.125rem;
@@ -15,6 +14,7 @@
15
14
  --pf-v6-c-page__sidebar--MarginInlineEnd: 0;
16
15
  --pf-v6-c-page__sidebar--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
17
16
  --pf-v6-c-page__sidebar--PaddingInlineStart: 0;
17
+ --pf-v6-c-page__sidebar--PaddingInlineEnd: 0;
18
18
  --pf-v6-c-page__sidebar-header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
19
19
  --pf-v6-c-page__sidebar-header--BorderBlockEndColor: var(--pf-t--global--border--color--default);
20
20
  --pf-v6-c-page__sidebar-header--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -24,17 +24,19 @@
24
24
  --pf-v6-c-page__sidebar-title--LineHeight: var(--pf-t--global--font--line-height--heading);
25
25
  --pf-v6-c-page__sidebar-title--FontFamily: var(--pf-t--global--font--family--heading);
26
26
  --pf-v6-c-page__sidebar-title--FontWeight: var(--pf-t--global--font--weight--heading--default);
27
- --pf-v6-c-page__sidebar-body--PaddingInlineEnd: 0;
28
- --pf-v6-c-page__sidebar-body--PaddingInlineStart: 0;
27
+ --pf-v6-c-page__sidebar-body--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
28
+ --pf-v6-c-page__sidebar-body--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
29
29
  --pf-v6-c-page__sidebar-body--m-page-insets--PaddingInlineEnd: var(--pf-v6-c-page--inset);
30
30
  --pf-v6-c-page__sidebar-body--m-page-insets--PaddingInlineStart: var(--pf-v6-c-page--inset);
31
31
  --pf-v6-c-page__sidebar-body--m-context-selector--PaddingInlineEnd: var(--pf-t--global--spacer--md);
32
32
  --pf-v6-c-page__sidebar-body--m-context-selector--PaddingInlineStart: var(--pf-t--global--spacer--md);
33
33
  --pf-v6-c-page__main-container--ZIndex: var(--pf-t--global--z-index--xs);
34
+ --pf-v6-c-page__main-container--GridArea: main;
35
+ --pf-v6-c-page--masthead--main-container--GridArea: sidebar / sidebar / main / main;
34
36
  --pf-v6-c-page__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
35
37
  --pf-v6-c-page__main-container--BackgroundColor: var(--pf-t--global--background--color--primary--default);
36
- --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-t--global--spacer--lg);
37
- --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-t--global--spacer--lg);
38
+ --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page--inset);
39
+ --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page--inset);
38
40
  --pf-v6-c-page__main-container--BorderRadius: var(--pf-t--global--border--radius--large);
39
41
  --pf-v6-c-page__main-container--BorderWidth: var(--pf-t--global--spacer--sm);
40
42
  --pf-v6-c-page__main-container--BorderColor: var(--pf-v6-c-page__main-container--BackgroundColor);
@@ -75,11 +77,6 @@
75
77
  --pf-v6-c-page__main-wizard--BorderBlockStartColor: var(--pf-t--global--border--color--default);
76
78
  --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
77
79
  }
78
- @media (min-width: 75rem) {
79
- :where(:root, .pf-v6-c-page) {
80
- --pf-v6-c-page--inset: var(--pf-v6-c-page--xl--inset);
81
- }
82
- }
83
80
  @media screen and (min-width: 75rem) {
84
81
  :where(:root, .pf-v6-c-page) {
85
82
  --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--xl--TranslateX);
@@ -99,7 +96,7 @@
99
96
  @media (min-width: 75rem) {
100
97
  .pf-v6-c-page {
101
98
  grid-template-areas: "header header" "sidebar main";
102
- grid-template-columns: max-content 1fr;
99
+ grid-template-columns: var(--pf-v6-c-page__sidebar--Width) 1fr;
103
100
  }
104
101
  }
105
102
 
@@ -107,6 +104,11 @@
107
104
  z-index: var(--pf-v6-c-page--c-masthead--ZIndex);
108
105
  grid-area: header;
109
106
  }
107
+ @media (min-width: 75rem) {
108
+ .pf-v6-c-page > .pf-v6-c-masthead {
109
+ --pf-v6-c-masthead--m-display-inline--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--breakpoint--xl--GridTemplateColumns);
110
+ }
111
+ }
110
112
 
111
113
  .pf-v6-c-page__sidebar {
112
114
  z-index: var(--pf-v6-c-page__sidebar--ZIndex);
@@ -119,6 +121,7 @@
119
121
  padding-block-start: 0;
120
122
  padding-block-end: var(--pf-v6-c-page__sidebar--PaddingBlockEnd);
121
123
  padding-inline-start: var(--pf-v6-c-page__sidebar--PaddingInlineStart);
124
+ padding-inline-end: var(--pf-v6-c-page__sidebar--PaddingInlineEnd);
122
125
  margin-inline-end: var(--pf-v6-c-page__sidebar--MarginInlineEnd);
123
126
  overflow-x: hidden;
124
127
  overflow-y: auto;
@@ -390,26 +393,37 @@
390
393
  flex-direction: column;
391
394
  align-self: start;
392
395
  max-height: var(--pf-v6-c-page__main-container--MaxHeight);
393
- margin-block-start: 0;
394
396
  margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
395
397
  margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
396
- overflow: auto;
397
398
  background: var(--pf-v6-c-page__main-container--BackgroundColor);
398
399
  border: var(--pf-v6-c-page__main-container--BorderWidth) solid var(--pf-v6-c-page__main-container--BorderColor);
399
400
  border-radius: var(--pf-v6-c-page__main-container--BorderRadius);
400
401
  }
401
- .pf-v6-c-page__main-container.pf-m-fill, .pf-v6-c-page__main-container:has(.pf-v6-c-page__main-wizard) {
402
- align-self: stretch;
403
- }
404
402
 
405
403
  .pf-v6-c-page__main-container,
406
404
  .pf-v6-c-page__drawer {
407
405
  z-index: var(--pf-v6-c-page__main-container--ZIndex);
408
- grid-area: main;
406
+ grid-area: var(--pf-v6-c-page__main-container--GridArea);
409
407
  overflow-x: hidden;
410
408
  overflow-y: auto;
411
409
  -webkit-overflow-scrolling: touch;
412
410
  }
411
+ @media screen and (min-width: 75rem) {
412
+ .pf-v6-c-masthead + .pf-v6-c-page__main-container, .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__main-container,
413
+ .pf-v6-c-masthead + .pf-v6-c-page__drawer,
414
+ .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__drawer {
415
+ --pf-v6-c-page__main-container--GridArea: var(--pf-v6-c-page--masthead--main-container--GridArea);
416
+ }
417
+ .pf-v6-c-page__sidebar:not(.pf-m-collapsed) + .pf-v6-c-page__main-container,
418
+ .pf-v6-c-page__sidebar:not(.pf-m-collapsed) + .pf-v6-c-page__drawer {
419
+ --pf-v6-c-page__main-container--MarginInlineStart: 0;
420
+ }
421
+ }
422
+ .pf-v6-c-page__main-container.pf-m-fill, .pf-v6-c-page__main-container:has(.pf-v6-c-page__main-wizard),
423
+ .pf-v6-c-page__drawer.pf-m-fill,
424
+ .pf-v6-c-page__drawer:has(.pf-v6-c-page__main-wizard) {
425
+ align-self: stretch;
426
+ }
413
427
  .pf-v6-c-page__main-container:focus,
414
428
  .pf-v6-c-page__drawer:focus {
415
429
  outline: 0;