@patternfly/patternfly 6.0.0-alpha.5 → 6.0.0-alpha.7

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 (24) hide show
  1. package/base/patternfly-variables.css +261 -188
  2. package/base/tokens/_tokens-dark.scss +117 -82
  3. package/base/tokens/_tokens-default.scss +145 -109
  4. package/base/tokens/_tokens-palette.scss +2 -4
  5. package/components/Masthead/masthead.css +13 -8
  6. package/components/Masthead/masthead.scss +13 -8
  7. package/components/Nav/nav.css +42 -40
  8. package/components/Nav/nav.scss +42 -42
  9. package/components/Page/page.css +81 -70
  10. package/components/Page/page.scss +82 -68
  11. package/components/Table/table-grid.css +8 -8
  12. package/components/Table/table-grid.scss +8 -8
  13. package/docs/components/Nav/examples/Navigation.css +0 -5
  14. package/docs/demos/Page/examples/Penta.md +528 -500
  15. package/package.json +1 -1
  16. package/patternfly-base-no-globals-theme-dark-unversioned.css +261 -188
  17. package/patternfly-base-no-globals.css +261 -188
  18. package/patternfly-base-theme-dark-unversioned.css +261 -188
  19. package/patternfly-base.css +261 -188
  20. package/patternfly-no-globals.css +405 -314
  21. package/patternfly-theme-dark-unversioned.css +405 -314
  22. package/patternfly.css +405 -314
  23. package/patternfly.min.css +1 -1
  24. package/patternfly.min.css.map +1 -1
package/components/Nav/nav.scss CHANGED
@@ -1,25 +1,23 @@
1
- // @debug $nav; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
-
3
1
  .#{$nav} {
4
2
  --#{$nav}--Transition: var(--#{$pf-global}--Transition);
5
3
 
6
4
  // Light theme
7
5
  --#{$nav}--m-light__item--before--BorderColor: var(--#{$pf-global}--BorderColor--300);
8
6
  --#{$nav}--m-light__item--m-current--not--m-expanded__link--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-300);
9
- --#{$nav}--m-light__link--Color: var(--#{$pf-global}--Color--dark-100);
10
- --#{$nav}--m-light__link--hover--Color: var(--#{$pf-global}--Color--dark-100);
11
- --#{$nav}--m-light__link--focus--Color: var(--#{$pf-global}--Color--dark-100);
12
- --#{$nav}--m-light__link--active--Color: var(--#{$pf-global}--Color--dark-100);
13
- --#{$nav}--m-light__link--m-current--Color: var(--#{$pf-global}--Color--dark-100);
14
- --#{$nav}--m-light__link--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-300);
15
- --#{$nav}--m-light__link--focus--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-300);
16
- --#{$nav}--m-light__link--active--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-300);
17
- --#{$nav}--m-light__link--m-current--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-300);
7
+ --#{$nav}--m-light__link--Color: var(--pf-t--global--text--color--subtle);
8
+ --#{$nav}--m-light__link--hover--Color: var(--pf-t--global--text--color--subtle);
9
+ --#{$nav}--m-light__link--focus--Color: var(--pf-t--global--text--color--subtle);
10
+ --#{$nav}--m-light__link--active--Color: var(--pf-t--global--text--color--subtle);
11
+ --#{$nav}--m-light__link--m-current--Color: var(--pf-t--global--text--color--regular);
12
+ --#{$nav}--m-light__link--hover--BackgroundColor: var(--pf-t--global--background--color--primary--default);
13
+ --#{$nav}--m-light__link--focus--BackgroundColor: var(--pf-t--global--background--color--primary--default);
14
+ --#{$nav}--m-light__link--active--BackgroundColor: var(--pf-t--global--background--color--primary--default);
15
+ --#{$nav}--m-light__link--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--default);
18
16
  --#{$nav}--m-light__link--before--BorderColor: var(--#{$pf-global}--BorderColor--300);
19
17
  --#{$nav}--m-light__link--after--BorderColor: var(--#{$pf-global}--active-color--100);
20
18
  --#{$nav}--m-light__link--m-current--after--BorderColor: var(--#{$pf-global}--active-color--100);
21
- --#{$nav}--m-light__section-title--Color: var(--#{$pf-global}--Color--dark-200);
22
- --#{$nav}--m-light__section-title--BorderBottomColor: var(--#{$pf-global}--BorderColor--300);
19
+ --#{$nav}--m-light__section-title--Color: var(--pf-t--global--text--color--regular);
20
+ --#{$nav}--m-light__section-title--BorderBottomColor: transparent;
23
21
  --#{$nav}--m-light--c-divider--BackgroundColor: var(--#{$pf-global}--BorderColor--300);
24
22
 
25
23
  // Light subnav
@@ -36,38 +34,40 @@
36
34
  --#{$nav}__item--MarginTop: 0;
37
35
  --#{$nav}__item--m-current--not--m-expanded__link--BackgroundColor: var(--#{$pf-global}--BackgroundColor--dark-400);
38
36
  --#{$nav}__link--m-current--not--m-expanded__link--after--BorderWidth: var(--#{$pf-global}--BorderWidth--xl);
39
- --#{$nav}__item__item__link--PaddingRight: var(--#{$pf-global}--spacer--xl);
37
+ --#{$nav}__item__item__link--PaddingRight: var(--pf-t--global--spacer--xl);
40
38
  --#{$nav}__item__item__toggle--FontSize: var(--#{$pf-global}--FontSize--sm);
41
39
  --#{$nav}__item__toggle-icon--Rotate: 0;
42
40
  --#{$nav}__item--m-expanded__toggle-icon--Rotate: 90deg;
41
+ --#{$nav}__item--BorderRadius: var(--pf-t--global--border--radius--small);
43
42
 
44
43
  // Item ::before borders
45
44
  --#{$nav}__item--before--BorderColor: var(--#{$pf-global}--BackgroundColor--dark-200);
46
45
  --#{$nav}__item--before--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
47
46
 
48
47
  // Link
49
- --#{$nav}__link--FontSize: var(--#{$pf-global}--FontSize--md);
50
- --#{$nav}__link--FontWeight: var(--#{$pf-global}--FontWeight--normal);
51
- --#{$nav}__link--PaddingTop: var(--#{$pf-global}--spacer--md);
52
- --#{$nav}__link--PaddingRight: var(--#{$pf-global}--spacer--md);
53
- --#{$nav}__link--PaddingBottom: var(--#{$pf-global}--spacer--md);
54
- --#{$nav}__link--PaddingLeft: var(--#{$pf-global}--spacer--md);
55
- --#{$nav}__link--xl--PaddingRight: var(--#{$pf-global}--spacer--lg);
56
- --#{$nav}__link--xl--PaddingLeft: var(--#{$pf-global}--spacer--lg);
57
- --#{$nav}__link--Color: var(--#{$pf-global}--Color--light-100);
58
- --#{$nav}__link--hover--Color: var(--#{$pf-global}--Color--light-100);
59
- --#{$nav}__link--focus--Color: var(--#{$pf-global}--Color--light-100);
60
- --#{$nav}__link--active--Color: var(--#{$pf-global}--Color--light-100);
61
- --#{$nav}__link--m-current--Color: var(--#{$pf-global}--Color--light-100);
48
+ --#{$nav}__link--FontSize: var(--pf-t--global--font--size--body);
49
+ --#{$nav}__link--FontWeight: var(--pf-t--global--font--weight--body);
50
+ --#{$nav}__link--PaddingTop: var(--pf-t--global--spacer--md);
51
+ --#{$nav}__link--PaddingRight: var(--pf-t--global--spacer--md);
52
+ --#{$nav}__link--PaddingBottom: var(--pf-t--global--spacer--md);
53
+ --#{$nav}__link--PaddingLeft: var(--pf-t--global--spacer--md);
54
+ --#{$nav}__link--BorderRadius: var(--pf-t--global--border--radius--small);
55
+ --#{$nav}__link--xl--PaddingRight: var(--pf-t--global--spacer--lg);
56
+ --#{$nav}__link--xl--PaddingLeft: var(--pf-t--global--spacer--lg);
57
+ --#{$nav}__link--Color: var(--pf-t--global--text--color--subtle);
58
+ --#{$nav}__link--hover--Color: var(--pf-t--global--text--color--subtle);
59
+ --#{$nav}__link--focus--Color: var(--pf-t--global--text--color--subtle);
60
+ --#{$nav}__link--active--Color: var(--pf-t--global--text--color--subtle);
61
+ --#{$nav}__link--m-current--Color: var(--pf-t--global--text--color--regular);
62
62
  --#{$nav}__link--BackgroundColor: transparent;
63
- --#{$nav}__link--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--dark-200);
64
- --#{$nav}__link--focus--BackgroundColor: var(--#{$pf-global}--BackgroundColor--dark-200);
65
- --#{$nav}__link--active--BackgroundColor: var(--#{$pf-global}--BackgroundColor--dark-200);
66
- --#{$nav}__link--m-current--BackgroundColor: var(--#{$pf-global}--BackgroundColor--dark-400);
63
+ --#{$nav}__link--hover--BackgroundColor: var(--pf-t--global--background--color--primary--default);
64
+ --#{$nav}__link--focus--BackgroundColor: var(--pf-t--global--background--color--primary--default);
65
+ --#{$nav}__link--active--BackgroundColor: var(--pf-t--global--background--color--primary--default);
66
+ --#{$nav}__link--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--default);
67
67
  --#{$nav}__link--OutlineOffset: calc(var(--#{$pf-global}--spacer--xs) * -1);
68
68
 
69
69
  // Link ::before borders
70
- --#{$nav}__link--before--BorderColor: var(--#{$pf-global}--BackgroundColor--dark-200);
70
+ --#{$nav}__link--before--BorderColor: transparent;
71
71
  --#{$nav}__link--before--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--sm);
72
72
  --#{$nav}__link--hover--before--BorderBottomWidth: 0;
73
73
  --#{$nav}__link--focus--before--BorderBottomWidth: 0;
@@ -225,16 +225,16 @@
225
225
  --#{$nav}__section--section--MarginTop: var(--#{$pf-global}--spacer--xl);
226
226
 
227
227
  // Nav section title
228
- --#{$nav}__section-title--PaddingTop: var(--#{$pf-global}--spacer--sm);
229
- --#{$nav}__section-title--PaddingRight: var(--#{$pf-global}--spacer--md);
230
- --#{$nav}__section-title--PaddingBottom: var(--#{$pf-global}--spacer--sm);
231
- --#{$nav}__section-title--PaddingLeft: var(--#{$pf-global}--spacer--md);
232
- --#{$nav}__section-title--MarginBottom: var(--#{$pf-global}--spacer--sm);
233
- --#{$nav}__section-title--xl--PaddingRight: var(--#{$pf-global}--spacer--lg);
234
- --#{$nav}__section-title--xl--PaddingLeft: var(--#{$pf-global}--spacer--lg);
235
- --#{$nav}__section-title--FontSize: var(--#{$pf-global}--FontSize--sm);
236
- --#{$nav}__section-title--Color: var(--#{$pf-global}--Color--light-100);
237
- --#{$nav}__section-title--BorderBottomColor: var(--#{$pf-global}--BackgroundColor--dark-200);
228
+ --#{$nav}__section-title--PaddingTop: var(--pf-t--global--spacer--sm);
229
+ --#{$nav}__section-title--PaddingRight: var(--pf-t--global--spacer--md);
230
+ --#{$nav}__section-title--PaddingBottom: var(--pf-t--global--spacer--sm);
231
+ --#{$nav}__section-title--PaddingLeft: var(--pf-t--global--spacer--md);
232
+ --#{$nav}__section-title--MarginBottom: var(--pf-t--global--spacer--sm);
233
+ --#{$nav}__section-title--xl--PaddingRight: var(--pf-t--global--spacer--xl);
234
+ --#{$nav}__section-title--xl--PaddingLeft: var(--pf-t--global--spacer--xl);
235
+ --#{$nav}__section-title--FontSize: var(--pf-t--global--font--size--body);
236
+ --#{$nav}__section-title--Color: var(--pf-t--global--text--color--regular);
237
+ --#{$nav}__section-title--BorderBottomColor: transparent;
238
238
  --#{$nav}__section-title--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--sm);
239
239
 
240
240
  // Scroll buttons
package/components/Page/page.css CHANGED
@@ -10,7 +10,7 @@
10
10
  --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
11
11
  }
12
12
 
13
- .pf-v5-c-page__main-section[class*=pf-m-dark-], .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector, .pf-v5-c-page__sidebar, .pf-v5-c-page__header {
13
+ .pf-v5-c-page__main-section[class*=pf-m-dark-], .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector, .pf-v5-c-page__header {
14
14
  --pf-v5-global--Color--100: var(--pf-v5-global--Color--light-100);
15
15
  --pf-v5-global--Color--200: var(--pf-v5-global--Color--light-200);
16
16
  --pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--light-100);
@@ -21,7 +21,7 @@
21
21
  --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--light);
22
22
  --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--light);
23
23
  }
24
- .pf-v5-c-page__main-section[class*=pf-m-dark-] .pf-v5-c-button, .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector .pf-v5-c-button, .pf-v5-c-page__sidebar .pf-v5-c-button, .pf-v5-c-page__header .pf-v5-c-button {
24
+ .pf-v5-c-page__main-section[class*=pf-m-dark-] .pf-v5-c-button, .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector .pf-v5-c-button, .pf-v5-c-page__header .pf-v5-c-button {
25
25
  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
26
26
  }
27
27
 
@@ -75,31 +75,31 @@
75
75
  }
76
76
 
77
77
  :root {
78
- --pf-v5-c-page--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
79
- --pf-v5-c-page--inset: var(--pf-v5-global--spacer--md);
80
- --pf-v5-c-page--xl--inset: var(--pf-v5-global--spacer--lg);
81
- --pf-v5-c-page__header--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-100);
78
+ --pf-v5-c-page--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
79
+ --pf-v5-c-page--inset: var(--pf-t--global--spacer--md);
80
+ --pf-v5-c-page--xl--inset: var(--pf-t--global--spacer--xl);
81
+ --pf-v5-c-page__header--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
82
82
  --pf-v5-c-page__header--ZIndex: var(--pf-v5-global--ZIndex--md);
83
83
  --pf-v5-c-page__header--MinHeight: 4.75rem;
84
- --pf-v5-c-page__header-brand--PaddingLeft: var(--pf-v5-global--spacer--md);
85
- --pf-v5-c-page__header-brand--xl--PaddingRight: var(--pf-v5-global--spacer--xl);
86
- --pf-v5-c-page__header-brand--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
87
- --pf-v5-c-page__header-sidebar-toggle__c-button--PaddingTop: var(--pf-v5-global--spacer--sm);
88
- --pf-v5-c-page__header-sidebar-toggle__c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
89
- --pf-v5-c-page__header-sidebar-toggle__c-button--PaddingBottom: var(--pf-v5-global--spacer--sm);
90
- --pf-v5-c-page__header-sidebar-toggle__c-button--PaddingLeft: var(--pf-v5-global--spacer--sm);
91
- --pf-v5-c-page__header-sidebar-toggle__c-button--MarginRight: var(--pf-v5-global--spacer--md);
84
+ --pf-v5-c-page__header-brand--PaddingLeft: var(--pf-t--global--spacer--md);
85
+ --pf-v5-c-page__header-brand--xl--PaddingRight: var(--pf-t--global--spacer--xl);
86
+ --pf-v5-c-page__header-brand--xl--PaddingLeft: var(--pf-t--global--spacer--xl);
87
+ --pf-v5-c-page__header-sidebar-toggle__c-button--PaddingTop: var(--pf-t--global--spacer--sm);
88
+ --pf-v5-c-page__header-sidebar-toggle__c-button--PaddingRight: var(--pf-t--global--spacer--sm);
89
+ --pf-v5-c-page__header-sidebar-toggle__c-button--PaddingBottom: var(--pf-t--global--spacer--sm);
90
+ --pf-v5-c-page__header-sidebar-toggle__c-button--PaddingLeft: var(--pf-t--global--spacer--sm);
91
+ --pf-v5-c-page__header-sidebar-toggle__c-button--MarginRight: var(--pf-t--global--spacer--md);
92
92
  --pf-v5-c-page__header-sidebar-toggle__c-button--MarginLeft: calc(var(--pf-v5-c-page__header-sidebar-toggle__c-button--PaddingLeft) * -1);
93
- --pf-v5-c-page__header-sidebar-toggle__c-button--FontSize: var(--pf-v5-global--FontSize--2xl);
93
+ --pf-v5-c-page__header-sidebar-toggle__c-button--FontSize: var(--pf-t--global--icon--size--lg);
94
94
  --pf-v5-c-page__header-brand-link--c-brand--MaxHeight: 3.75rem;
95
- --pf-v5-c-page__header-nav--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-300);
95
+ --pf-v5-c-page__header-nav--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
96
96
  --pf-v5-c-page__header-nav--xl--BackgroundColor: transparent;
97
- --pf-v5-c-page__header-nav--xl--PaddingRight: var(--pf-v5-global--spacer--xl);
98
- --pf-v5-c-page__header-nav--xl--PaddingLeft: var(--pf-v5-global--spacer--xl);
99
- --pf-v5-c-page__header-tools--MarginRight: var(--pf-v5-global--spacer--md);
100
- --pf-v5-c-page__header-tools--xl--MarginRight: var(--pf-v5-global--spacer--lg);
101
- --pf-v5-c-page__header-tools--c-avatar--MarginLeft: var(--pf-v5-global--spacer--md);
102
- --pf-v5-c-page__header-tools-group--MarginLeft: var(--pf-v5-global--spacer--xl);
97
+ --pf-v5-c-page__header-nav--xl--PaddingRight: var(--pf-t--global--spacer--xl);
98
+ --pf-v5-c-page__header-nav--xl--PaddingLeft: var(--pf-t--global--spacer--xl);
99
+ --pf-v5-c-page__header-tools--MarginRight: var(--pf-t--global--spacer--md);
100
+ --pf-v5-c-page__header-tools--xl--MarginRight: var(--pf-t--global--spacer--lg);
101
+ --pf-v5-c-page__header-tools--c-avatar--MarginLeft: var(--pf-t--global--spacer--md);
102
+ --pf-v5-c-page__header-tools-group--MarginLeft: var(--pf-t--global--spacer--xl);
103
103
  --pf-v5-c-page__header-tools-group--Display: flex;
104
104
  --pf-v5-c-page__header-tools-item--Display: block;
105
105
  --pf-v5-c-page__header-tools-item--c-notification-badge--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
@@ -114,16 +114,24 @@
114
114
  --pf-v5-c-page__header-tools--c-button--m-selected--c-notification-badge--m-unread--after--BorderColor: transparent;
115
115
  --pf-v5-c-page__sidebar--ZIndex: var(--pf-v5-global--ZIndex--sm);
116
116
  --pf-v5-c-page__sidebar--Width: 18.125rem;
117
- --pf-v5-c-page__sidebar--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-300);
117
+ --pf-v5-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
118
118
  --pf-v5-c-page__sidebar--m-light--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
119
119
  --pf-v5-c-page__sidebar--m-light--BorderRightWidth: var(--pf-v5-global--BorderWidth--sm);
120
120
  --pf-v5-c-page__sidebar--m-light--BorderRightColor: var(--pf-v5-global--BorderColor--100);
121
- --pf-v5-c-page__sidebar--BoxShadow: var(--pf-v5-global--BoxShadow--lg-right);
121
+ --pf-v5-c-page__sidebar--BoxShadow: none;
122
122
  --pf-v5-c-page__sidebar--Transition: var(--pf-v5-global--Transition);
123
123
  --pf-v5-c-page__sidebar--TranslateX: -100%;
124
124
  --pf-v5-c-page__sidebar--TranslateZ: 0;
125
125
  --pf-v5-c-page__sidebar--m-expanded--TranslateX: 0;
126
126
  --pf-v5-c-page__sidebar--xl--TranslateX: 0;
127
+ --pf-v5-c-page__sidebar-header--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
128
+ --pf-v5-c-page__sidebar-header--BorderBottomColor: var(--pf-t--global--border--color--default);
129
+ --pf-v5-c-page__sidebar-header--PaddingTop: var(--pf-t--global--spacer--sm);
130
+ --pf-v5-c-page__sidebar-header--PaddingBottom: var(--pf-t--global--spacer--md);
131
+ --pf-v5-c-page__sidebar-title--FontSize: var(--pf-t--global--font--size--heading--xs);
132
+ --pf-v5-c-page__sidebar-title--LineHeight: var(--pf-t--global--font--line-height--heading);
133
+ --pf-v5-c-page__sidebar-title--FontFamily: var(--pf-t--global--font--family--heading);
134
+ --pf-v5-c-page__sidebar-title--FontWeight: var(--pf-t--global--font--weight--heading--bold);
127
135
  --pf-v5-c-page__sidebar-body--PaddingRight: 0;
128
136
  --pf-v5-c-page__sidebar-body--PaddingLeft: 0;
129
137
  --pf-v5-c-page__sidebar-body--m-page-insets--PaddingRight: var(--pf-v5-c-page--inset);
@@ -132,22 +140,19 @@
132
140
  --pf-v5-c-page__sidebar-body--m-menu--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
133
141
  --pf-v5-c-page__sidebar-body--m-menu--c-context-selector--BorderBottomColor: var(--pf-v5-global--BackgroundColor--dark-200);
134
142
  --pf-v5-c-page__main--ZIndex: var(--pf-v5-global--ZIndex--xs);
135
- --pf-v5-c-page__main-section--PaddingTop: var(--pf-v5-global--spacer--md);
136
- --pf-v5-c-page__main-section--PaddingRight: var(--pf-v5-global--spacer--md);
137
- --pf-v5-c-page__main-section--PaddingBottom: var(--pf-v5-global--spacer--md);
138
- --pf-v5-c-page__main-section--PaddingLeft: var(--pf-v5-global--spacer--md);
139
- --pf-v5-c-page__main-section--xl--PaddingTop: var(--pf-v5-global--spacer--lg);
140
- --pf-v5-c-page__main-section--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
141
- --pf-v5-c-page__main-section--xl--PaddingBottom: var(--pf-v5-global--spacer--lg);
142
- --pf-v5-c-page__main-section--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
143
- --pf-v5-c-page__main-breadcrumb--main-section--PaddingTop: var(--pf-v5-global--spacer--md);
144
- --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
145
- --pf-v5-c-page__main-section--m-light--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
146
- --pf-v5-c-page__main-section--m-light-100--BackgroundColor: var(--pf-v5-global--BackgroundColor--150);
147
- --pf-v5-c-page__main-section--m-dark-100--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-transparent-100);
148
- --pf-v5-c-page__main-section--m-dark-200--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-transparent-200);
149
- --pf-v5-c-page__main-breadcrumb--page__main-tabs--PaddingTop: var(--pf-v5-global--spacer--md);
150
- --pf-v5-c-page__main-nav--page__main-tabs--PaddingTop: var(--pf-v5-global--spacer--md);
143
+ --pf-v5-c-page__main-section--MarginTop: var(--pf-t--global--spacer--md);
144
+ --pf-v5-c-page__main-section--PaddingTop: var(--pf-t--global--spacer--lg);
145
+ --pf-v5-c-page__main-section--PaddingRight: var(--pf-t--global--spacer--lg);
146
+ --pf-v5-c-page__main-section--PaddingBottom: 0;
147
+ --pf-v5-c-page__main-section--PaddingLeft: var(--pf-t--global--spacer--lg);
148
+ --pf-v5-c-page__main-breadcrumb--main-section--PaddingTop: var(--pf-t--global--spacer--md);
149
+ --pf-v5-c-page__main-section--BackgroundColor: transparent;
150
+ --pf-v5-c-page__main-section--m-light--BackgroundColor: transparent;
151
+ --pf-v5-c-page__main-section--m-light-100--BackgroundColor: transparent;
152
+ --pf-v5-c-page__main-section--m-dark-100--BackgroundColor: transparent;
153
+ --pf-v5-c-page__main-section--m-dark-200--BackgroundColor: transparent;
154
+ --pf-v5-c-page__main-breadcrumb--page__main-tabs--PaddingTop: var(--pf-t--global--spacer--md);
155
+ --pf-v5-c-page__main-nav--page__main-tabs--PaddingTop: var(--pf-t--global--spacer--md);
151
156
  --pf-v5-c-page--section--m-limit-width--MaxWidth: calc(125rem - var(--pf-v5-c-page__sidebar--Width));
152
157
  --pf-v5-c-page--section--m-sticky-top--ZIndex: var(--pf-v5-global--ZIndex--md);
153
158
  --pf-v5-c-page--section--m-sticky-top--BoxShadow: var(--pf-v5-global--BoxShadow--sm-bottom);
@@ -171,19 +176,14 @@
171
176
  --pf-v5-c-page__main-subnav--BorderLeftColor: var(--pf-v5-global--palette--black-800);
172
177
  --pf-v5-c-page__sidebar--main__main-subnav--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
173
178
  --pf-v5-c-page__sidebar--m-collapsed--main__main-subnav--BorderLeftWidth: 0;
174
- --pf-v5-c-page__main-breadcrumb--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
175
- --pf-v5-c-page__main-breadcrumb--PaddingTop: var(--pf-v5-global--spacer--md);
176
- --pf-v5-c-page__main-breadcrumb--PaddingRight: var(--pf-v5-global--spacer--md);
179
+ --pf-v5-c-page__main-breadcrumb--PaddingTop: var(--pf-t--global--spacer--md);
180
+ --pf-v5-c-page__main-breadcrumb--PaddingRight: var(--pf-t--global--spacer--md);
177
181
  --pf-v5-c-page__main-breadcrumb--PaddingBottom: 0;
178
- --pf-v5-c-page__main-breadcrumb--PaddingLeft: var(--pf-v5-global--spacer--md);
179
- --pf-v5-c-page__main-breadcrumb--m-sticky-top--PaddingBottom: var(--pf-v5-global--spacer--md);
180
- --pf-v5-c-page__main-breadcrumb--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
181
- --pf-v5-c-page__main-breadcrumb--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
182
+ --pf-v5-c-page__main-breadcrumb--PaddingLeft: var(--pf-t--global--spacer--lg);
182
183
  --pf-v5-c-page__main-tabs--PaddingTop: 0;
183
184
  --pf-v5-c-page__main-tabs--PaddingRight: 0;
184
185
  --pf-v5-c-page__main-tabs--PaddingBottom: 0;
185
186
  --pf-v5-c-page__main-tabs--PaddingLeft: 0;
186
- --pf-v5-c-page__main-tabs--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
187
187
  --pf-v5-c-page__main-wizard--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
188
188
  --pf-v5-c-page__main-wizard--BorderTopColor: var(--pf-v5-global--BorderColor--100);
189
189
  --pf-v5-c-page__main-wizard--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
@@ -212,26 +212,6 @@
212
212
  --pf-v5-c-page__sidebar--TranslateX: var(--pf-v5-c-page__sidebar--xl--TranslateX);
213
213
  }
214
214
  }
215
- @media screen and (min-width: 1200px) {
216
- :root {
217
- --pf-v5-c-page__main-section--PaddingTop: var(--pf-v5-c-page__main-section--xl--PaddingTop);
218
- --pf-v5-c-page__main-section--PaddingRight: var(--pf-v5-c-page__main-section--xl--PaddingRight);
219
- --pf-v5-c-page__main-section--PaddingBottom: var(--pf-v5-c-page__main-section--xl--PaddingBottom);
220
- --pf-v5-c-page__main-section--PaddingLeft: var(--pf-v5-c-page__main-section--xl--PaddingLeft);
221
- }
222
- }
223
- @media screen and (min-width: 1200px) {
224
- :root {
225
- --pf-v5-c-page__main-nav--PaddingRight: var(--pf-v5-c-page__main-nav--xl--PaddingRight);
226
- --pf-v5-c-page__main-nav--PaddingLeft: var(--pf-v5-c-page__main-nav--xl--PaddingLeft);
227
- }
228
- }
229
- @media screen and (min-width: 1200px) {
230
- :root {
231
- --pf-v5-c-page__main-breadcrumb--PaddingRight: var(--pf-v5-c-page__main-breadcrumb--xl--PaddingRight);
232
- --pf-v5-c-page__main-breadcrumb--PaddingLeft: var(--pf-v5-c-page__main-breadcrumb--xl--PaddingLeft);
233
- }
234
- }
235
215
 
236
216
  .pf-v5-c-page {
237
217
  display: grid;
@@ -252,6 +232,7 @@
252
232
 
253
233
  .pf-v5-c-page__header,
254
234
  .pf-v5-c-page > .pf-v5-c-masthead {
235
+ --pf-v5-c-masthead--m-display-inline--GridTemplateColumns: var(--pf-v5-c-page__sidebar--Width) 1fr;
255
236
  z-index: var(--pf-v5-c-page__header--ZIndex);
256
237
  grid-area: header;
257
238
  }
@@ -384,7 +365,6 @@
384
365
  }
385
366
 
386
367
  .pf-v5-c-page__sidebar {
387
- color: var(--pf-v5-global--Color--100);
388
368
  z-index: var(--pf-v5-c-page__sidebar--ZIndex);
389
369
  display: flex;
390
370
  flex-direction: column;
@@ -392,6 +372,10 @@
392
372
  grid-row-start: 2;
393
373
  grid-column-start: 1;
394
374
  width: var(--pf-v5-c-page__sidebar--Width);
375
+ padding-top: 0;
376
+ padding-bottom: var(--pf-t--global--spacer--lg);
377
+ padding-left: var(--pf-t--global--spacer--lg);
378
+ margin-right: var(--pf-v5-c-page__sidebar--MarginRight);
395
379
  overflow-x: hidden;
396
380
  overflow-y: auto;
397
381
  -webkit-overflow-scrolling: touch;
@@ -418,6 +402,19 @@
418
402
  border-right: var(--pf-v5-c-page__sidebar--m-light--BorderRightWidth) solid var(--pf-v5-c-page__sidebar--m-light--BorderRightColor);
419
403
  }
420
404
 
405
+ .pf-v5-c-page__sidebar-header {
406
+ padding-top: var(--pf-v5-c-page__sidebar-header--PaddingTop);
407
+ padding-bottom: var(--pf-v5-c-page__sidebar-header--PaddingBottom);
408
+ border-bottom: var(--pf-v5-c-page__sidebar-header--BorderBottomWidth) solid var(--pf-v5-c-page__sidebar-header--BorderBottomColor);
409
+ }
410
+
411
+ .pf-v5-c-page__sidebar-title {
412
+ font-family: var(--pf-v5-c-page__sidebar-title--FontFamily);
413
+ font-size: var(--pf-v5-c-page__sidebar-title--FontSize);
414
+ font-weight: var(--pf-v5-c-page__sidebar-title--FontWeight);
415
+ line-height: var(--pf-v5-c-page__sidebar-title--LineHeight);
416
+ }
417
+
421
418
  .pf-v5-c-page__sidebar-body {
422
419
  padding-right: var(--pf-v5-c-page__sidebar-body--PaddingRight);
423
420
  padding-left: var(--pf-v5-c-page__sidebar-body--PaddingLeft);
@@ -683,6 +680,19 @@
683
680
  }
684
681
  }
685
682
 
683
+ .pf-v5-c-page__main {
684
+ margin-top: 0;
685
+ margin-right: var(--pf-t--global--spacer--lg);
686
+ margin-left: var(--pf-t--global--spacer--lg);
687
+ }
688
+
689
+ .pf-v5-c-page__main-list {
690
+ padding-bottom: var(--pf-t--global--spacer--lg);
691
+ margin-bottom: var(--pf-t--global--spacer--lg);
692
+ background-color: var(--pf-t--global--background--color--primary--default);
693
+ border-radius: var(--pf-t--global--border--radius--large);
694
+ }
695
+
686
696
  .pf-v5-c-page__main,
687
697
  .pf-v5-c-page__drawer {
688
698
  z-index: var(--pf-v5-c-page__main--ZIndex);
@@ -698,7 +708,8 @@
698
708
 
699
709
  .pf-v5-c-page__main,
700
710
  .pf-v5-c-page__main-drawer,
701
- .pf-v5-c-page__main-group {
711
+ .pf-v5-c-page__main-group,
712
+ .pf-v5-c-page__main-list {
702
713
  display: flex;
703
714
  flex-direction: column;
704
715
  }