@patternfly/patternfly 6.0.0-alpha.192 → 6.0.0-alpha.194

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 (35) hide show
  1. package/components/Accordion/accordion.css +2 -0
  2. package/components/Accordion/accordion.scss +2 -0
  3. package/components/Label/label.css +3 -3
  4. package/components/Label/label.scss +3 -3
  5. package/components/Page/page.css +1 -71
  6. package/components/Page/page.scss +1 -42
  7. package/components/_index.css +6 -74
  8. package/docs/components/Label/examples/Label.md +16 -12
  9. package/docs/components/Page/examples/Page.md +0 -4
  10. package/docs/demos/AboutModal/examples/AboutModal.md +2 -2
  11. package/docs/demos/Alert/examples/Alert.md +6 -6
  12. package/docs/demos/BackToTop/examples/BackToTop.md +2 -2
  13. package/docs/demos/Banner/examples/Banner.md +4 -4
  14. package/docs/demos/CardView/examples/CardView.md +2 -2
  15. package/docs/demos/Dashboard/examples/Dashboard.md +2 -2
  16. package/docs/demos/DataList/examples/DataList.md +8 -8
  17. package/docs/demos/DescriptionList/examples/DescriptionList.md +6 -6
  18. package/docs/demos/Drawer/examples/Drawer.md +10 -10
  19. package/docs/demos/JumpLinks/examples/JumpLinks.md +12 -12
  20. package/docs/demos/Masthead/examples/Masthead.md +4 -4
  21. package/docs/demos/Modal/examples/Modal.md +12 -12
  22. package/docs/demos/Nav/examples/Nav.md +12 -12
  23. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +10 -10
  24. package/docs/demos/Page/examples/Page.md +22 -22
  25. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +15 -15
  26. package/docs/demos/Skeleton/examples/Skeleton.md +2 -2
  27. package/docs/demos/Table/examples/Table.md +31 -31
  28. package/docs/demos/Tabs/examples/Tabs.md +12 -12
  29. package/docs/demos/Toolbar/examples/Toolbar.md +4 -4
  30. package/docs/demos/Wizard/examples/Wizard.md +18 -18
  31. package/package.json +1 -1
  32. package/patternfly-no-globals.css +6 -74
  33. package/patternfly.css +6 -74
  34. package/patternfly.min.css +1 -1
  35. package/patternfly.min.css.map +1 -1
package/components/Accordion/accordion.css CHANGED
@@ -16,6 +16,7 @@
16
16
  --pf-v6-c-accordion__toggle-text--Color: var(--pf-t--global--text--color--regular);
17
17
  --pf-v6-c-accordion__toggle-text--FontWeight: var(--pf-t--global--font--weight--body--default);
18
18
  --pf-v6-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
19
+ --pf-v6-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight: var(--pf-t--global--font--weight--heading--default);
19
20
  --pf-v6-c-accordion__toggle-icon--Transition: .2s ease-in 0s;
20
21
  --pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate: 90deg;
21
22
  --pf-v6-c-accordion__expandable-content--MarginInlineEnd: var(--pf-t--global--spacer--md);
@@ -64,6 +65,7 @@
64
65
  --pf-v6-c-accordion__toggle--FontFamily: var(--pf-v6-c-accordion--m-display-lg__toggle--FontFamily);
65
66
  --pf-v6-c-accordion__toggle--FontSize: var(--pf-v6-c-accordion--m-display-lg__toggle--FontSize);
66
67
  --pf-v6-c-accordion__toggle-text--FontWeight: var(--pf-v6-c-accordion--m-display-lg__toggle-text--FontWeight);
68
+ --pf-v6-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-v6-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight);
67
69
  --pf-v6-c-accordion__expandable-content--FontSize: var(--pf-v6-c-accordion--m-display-lg__expandable-content--FontSize);
68
70
  --pf-v6-c-accordion__expandable-content--Color: var(--pf-v6-c-accordion--m-display-lg__expandable-content--Color);
69
71
  }
package/components/Accordion/accordion.scss CHANGED
@@ -27,6 +27,7 @@
27
27
  --#{$accordion}__toggle-text--Color: var(--pf-t--global--text--color--regular);
28
28
  --#{$accordion}__toggle-text--FontWeight: var(--pf-t--global--font--weight--body--default);
29
29
  --#{$accordion}__toggle--m-expanded__toggle-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
30
+ --#{$accordion}--m-display-lg__toggle--m-expanded__toggle-text--FontWeight: var(--pf-t--global--font--weight--heading--default);
30
31
 
31
32
  // accordion toggle icon
32
33
  --#{$accordion}__toggle-icon--Transition: .2s ease-in 0s;
@@ -86,6 +87,7 @@
86
87
  --#{$accordion}__toggle--FontFamily: var(--#{$accordion}--m-display-lg__toggle--FontFamily);
87
88
  --#{$accordion}__toggle--FontSize: var(--#{$accordion}--m-display-lg__toggle--FontSize);
88
89
  --#{$accordion}__toggle-text--FontWeight: var(--#{$accordion}--m-display-lg__toggle-text--FontWeight);
90
+ --#{$accordion}__toggle--m-expanded__toggle-text--FontWeight: var(--#{$accordion}--m-display-lg__toggle--m-expanded__toggle-text--FontWeight);
89
91
  --#{$accordion}__expandable-content--FontSize: var(--#{$accordion}--m-display-lg__expandable-content--FontSize);
90
92
  --#{$accordion}__expandable-content--Color: var(--#{$accordion}--m-display-lg__expandable-content--Color);
91
93
  }
package/components/Label/label.css CHANGED
@@ -133,7 +133,7 @@
133
133
  --pf-v6-c-label--m-clickable--hover--BorderWidth: 0;
134
134
  --pf-v6-c-label--m-clickable--hover--BorderColor: transparent;
135
135
  --pf-v6-c-label--m-clickable__content--Cursor: pointer;
136
- --pf-v6-c-label--m-filled__actions--c-button--Color: var(--pf-v6-c-label__icon--Color);
136
+ --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label__icon--Color);
137
137
  --pf-v6-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--action--default);
138
138
  --pf-v6-c-label--m-outline--BackgroundColor: transparent;
139
139
  --pf-v6-c-label--m-outline--Color: var(--pf-t--global--text--color--regular);
@@ -354,7 +354,7 @@
354
354
  --pf-v6-c-label--m-editable--TextDecorationOffset: var(--pf-v6-c-label--m-compact--m-editable--TextDecorationOffset);
355
355
  }
356
356
  .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
357
- --pf-v6-c-button--Color: var(--pf-v6-c-label--m-filled__actions--c-button--Color);
357
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-label--m-filled__actions--c-button__icon--Color);
358
358
  }
359
359
  .pf-v6-c-label.pf-m-outline {
360
360
  --pf-v6-c-label--Color: var(--pf-v6-c-label--m-outline--Color);
@@ -421,7 +421,7 @@
421
421
  --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
422
422
  }
423
423
  .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
424
- --pf-v6-c-label--m-filled__actions--c-button--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
424
+ --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
425
425
  }
426
426
  .pf-v6-c-label.pf-m-disabled {
427
427
  --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
package/components/Label/label.scss CHANGED
@@ -167,7 +167,7 @@
167
167
  --#{$label}--m-clickable__content--Cursor: pointer;
168
168
 
169
169
  // Filled
170
- --#{$label}--m-filled__actions--c-button--Color: var(--#{$label}__icon--Color);
170
+ --#{$label}--m-filled__actions--c-button__icon--Color: var(--#{$label}__icon--Color);
171
171
 
172
172
  // Outline
173
173
  --#{$label}--m-outline--BorderWidth: var(--pf-t--global--border--width--action--default);
@@ -427,7 +427,7 @@
427
427
 
428
428
  &.pf-m-filled {
429
429
  .#{$label}__actions .#{$button} {
430
- --#{$button}--Color: var(--#{$label}--m-filled__actions--c-button--Color);
430
+ --#{$button}__icon--Color: var(--#{$label}--m-filled__actions--c-button__icon--Color);
431
431
  }
432
432
  }
433
433
 
@@ -507,7 +507,7 @@
507
507
  --#{$label}--m-outline--BorderColor: var(--#{$label}--m-outline--m-clickable--hover--BorderColor);
508
508
 
509
509
  ~ .#{$label}__actions .#{$button} {
510
- --#{$label}--m-filled__actions--c-button--Color: var(--#{$label}--m-clickable--hover__icon--Color);
510
+ --#{$label}--m-filled__actions--c-button__icon--Color: var(--#{$label}--m-clickable--hover__icon--Color);
511
511
  }
512
512
  }
513
513
  }
package/components/Page/page.css CHANGED
@@ -47,7 +47,6 @@
47
47
  --pf-v6-c-page__main-section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
48
48
  --pf-v6-c-page__main-section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
49
49
  --pf-v6-c-page__main-breadcrumb--page__main-tabs--PaddingBlockStart: var(--pf-t--global--spacer--md);
50
- --pf-v6-c-page__main-nav--page__main-tabs--PaddingBlockStart: var(--pf-t--global--spacer--md);
51
50
  --pf-v6-c-page--section--m-limit-width--MaxWidth: calc(125rem - var(--pf-v6-c-page__sidebar--Width));
52
51
  --pf-v6-c-page--section--m-sticky-top--ZIndex: var(--pf-t--global--z-index--md);
53
52
  --pf-v6-c-page--section--m-sticky-top--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
@@ -57,13 +56,6 @@
57
56
  --pf-v6-c-page--section--m-shadow-bottom--ZIndex: var(--pf-t--global--z-index--xs);
58
57
  --pf-v6-c-page--section--m-shadow-top--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
59
58
  --pf-v6-c-page--section--m-shadow-top--ZIndex: var(--pf-t--global--z-index--xs);
60
- --pf-v6-c-page__main-nav--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
61
- --pf-v6-c-page__main-nav--PaddingBlockStart: var(--pf-t--global--spacer--md);
62
- --pf-v6-c-page__main-nav--PaddingInlineEnd: 0;
63
- --pf-v6-c-page__main-nav--PaddingInlineStart: 0;
64
- --pf-v6-c-page__main-nav--m-sticky-top--PaddingBlockEnd: var(--pf-t--global--spacer--md);
65
- --pf-v6-c-page__main-nav--xl--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
66
- --pf-v6-c-page__main-nav--xl--PaddingInlineStart: var(--pf-t--global--spacer--sm);
67
59
  --pf-v6-c-page__main-subnav--BackgroundColor: var(--pf-t--global--background--color--primary--default);
68
60
  --pf-v6-c-page__main-subnav--PaddingBlockStart: var(--pf-t--global--spacer--md);
69
61
  --pf-v6-c-page__main-subnav--PaddingBlockEnd: 0;
@@ -193,21 +185,18 @@
193
185
  flex-grow: 0;
194
186
  }
195
187
 
196
- .pf-v6-c-page__main-nav.pf-m-limit-width > .pf-v6-c-page__main-body,
197
188
  .pf-v6-c-page__main-breadcrumb.pf-m-limit-width > .pf-v6-c-page__main-body,
198
189
  .pf-v6-c-page__main-tabs.pf-m-limit-width > .pf-v6-c-page__main-body,
199
190
  .pf-v6-c-page__main-section.pf-m-limit-width > .pf-v6-c-page__main-body,
200
191
  .pf-v6-c-page__main-wizard.pf-m-limit-width > .pf-v6-c-page__main-body {
201
192
  max-width: var(--pf-v6-c-page--section--m-limit-width--MaxWidth);
202
193
  }
203
- .pf-v6-c-page__main-nav.pf-m-limit-width.pf-m-align-center,
204
194
  .pf-v6-c-page__main-breadcrumb.pf-m-limit-width.pf-m-align-center,
205
195
  .pf-v6-c-page__main-tabs.pf-m-limit-width.pf-m-align-center,
206
196
  .pf-v6-c-page__main-section.pf-m-limit-width.pf-m-align-center,
207
197
  .pf-v6-c-page__main-wizard.pf-m-limit-width.pf-m-align-center {
208
198
  align-items: center;
209
199
  }
210
- .pf-v6-c-page__main-nav.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
211
200
  .pf-v6-c-page__main-breadcrumb.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
212
201
  .pf-v6-c-page__main-tabs.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
213
202
  .pf-v6-c-page__main-section.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
@@ -215,7 +204,6 @@
215
204
  width: 100%;
216
205
  }
217
206
 
218
- .pf-v6-c-page__main-nav,
219
207
  .pf-v6-c-page__main-breadcrumb,
220
208
  .pf-v6-c-page__main-tabs,
221
209
  .pf-v6-c-page__main-section,
@@ -226,7 +214,6 @@
226
214
  flex-direction: column;
227
215
  flex-shrink: 0;
228
216
  }
229
- .pf-v6-c-page__main-nav.pf-m-overflow-scroll,
230
217
  .pf-v6-c-page__main-breadcrumb.pf-m-overflow-scroll,
231
218
  .pf-v6-c-page__main-tabs.pf-m-overflow-scroll,
232
219
  .pf-v6-c-page__main-section.pf-m-overflow-scroll,
@@ -237,7 +224,6 @@
237
224
  flex-shrink: 1;
238
225
  overflow: auto;
239
226
  }
240
- .pf-v6-c-page__main-nav.pf-m-shadow-bottom,
241
227
  .pf-v6-c-page__main-breadcrumb.pf-m-shadow-bottom,
242
228
  .pf-v6-c-page__main-tabs.pf-m-shadow-bottom,
243
229
  .pf-v6-c-page__main-section.pf-m-shadow-bottom,
@@ -247,7 +233,6 @@
247
233
  z-index: var(--pf-v6-c-page--section--m-shadow-bottom--ZIndex);
248
234
  box-shadow: var(--pf-v6-c-page--section--m-shadow-bottom--BoxShadow);
249
235
  }
250
- .pf-v6-c-page__main-nav.pf-m-shadow-top,
251
236
  .pf-v6-c-page__main-breadcrumb.pf-m-shadow-top,
252
237
  .pf-v6-c-page__main-tabs.pf-m-shadow-top,
253
238
  .pf-v6-c-page__main-section.pf-m-shadow-top,
@@ -257,7 +242,6 @@
257
242
  z-index: var(--pf-v6-c-page--section--m-shadow-top--ZIndex);
258
243
  box-shadow: var(--pf-v6-c-page--section--m-shadow-top--BoxShadow);
259
244
  }
260
- .pf-v6-c-page__main-nav.pf-m-sticky-top,
261
245
  .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top,
262
246
  .pf-v6-c-page__main-tabs.pf-m-sticky-top,
263
247
  .pf-v6-c-page__main-section.pf-m-sticky-top,
@@ -269,7 +253,6 @@
269
253
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
270
254
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
271
255
  }
272
- .pf-v6-c-page__main-nav.pf-m-sticky-bottom,
273
256
  .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom,
274
257
  .pf-v6-c-page__main-tabs.pf-m-sticky-bottom,
275
258
  .pf-v6-c-page__main-section.pf-m-sticky-bottom,
@@ -282,7 +265,6 @@
282
265
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
283
266
  }
284
267
  @media (min-height: 0) {
285
- .pf-v6-c-page__main-nav.pf-m-sticky-top-on-sm-height,
286
268
  .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-on-sm-height,
287
269
  .pf-v6-c-page__main-tabs.pf-m-sticky-top-on-sm-height,
288
270
  .pf-v6-c-page__main-section.pf-m-sticky-top-on-sm-height,
@@ -294,7 +276,6 @@
294
276
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
295
277
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
296
278
  }
297
- .pf-v6-c-page__main-nav.pf-m-sticky-bottom-on-sm-height,
298
279
  .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-on-sm-height,
299
280
  .pf-v6-c-page__main-tabs.pf-m-sticky-bottom-on-sm-height,
300
281
  .pf-v6-c-page__main-section.pf-m-sticky-bottom-on-sm-height,
@@ -308,7 +289,6 @@
308
289
  }
309
290
  }
310
291
  @media (min-height: 40rem) {
311
- .pf-v6-c-page__main-nav.pf-m-sticky-top-on-md-height,
312
292
  .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-on-md-height,
313
293
  .pf-v6-c-page__main-tabs.pf-m-sticky-top-on-md-height,
314
294
  .pf-v6-c-page__main-section.pf-m-sticky-top-on-md-height,
@@ -320,7 +300,6 @@
320
300
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
321
301
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
322
302
  }
323
- .pf-v6-c-page__main-nav.pf-m-sticky-bottom-on-md-height,
324
303
  .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-on-md-height,
325
304
  .pf-v6-c-page__main-tabs.pf-m-sticky-bottom-on-md-height,
326
305
  .pf-v6-c-page__main-section.pf-m-sticky-bottom-on-md-height,
@@ -334,7 +313,6 @@
334
313
  }
335
314
  }
336
315
  @media (min-height: 48rem) {
337
- .pf-v6-c-page__main-nav.pf-m-sticky-top-on-lg-height,
338
316
  .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-on-lg-height,
339
317
  .pf-v6-c-page__main-tabs.pf-m-sticky-top-on-lg-height,
340
318
  .pf-v6-c-page__main-section.pf-m-sticky-top-on-lg-height,
@@ -346,7 +324,6 @@
346
324
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
347
325
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
348
326
  }
349
- .pf-v6-c-page__main-nav.pf-m-sticky-bottom-on-lg-height,
350
327
  .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-on-lg-height,
351
328
  .pf-v6-c-page__main-tabs.pf-m-sticky-bottom-on-lg-height,
352
329
  .pf-v6-c-page__main-section.pf-m-sticky-bottom-on-lg-height,
@@ -360,7 +337,6 @@
360
337
  }
361
338
  }
362
339
  @media (min-height: 60rem) {
363
- .pf-v6-c-page__main-nav.pf-m-sticky-top-on-xl-height,
364
340
  .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-on-xl-height,
365
341
  .pf-v6-c-page__main-tabs.pf-m-sticky-top-on-xl-height,
366
342
  .pf-v6-c-page__main-section.pf-m-sticky-top-on-xl-height,
@@ -372,7 +348,6 @@
372
348
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
373
349
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
374
350
  }
375
- .pf-v6-c-page__main-nav.pf-m-sticky-bottom-on-xl-height,
376
351
  .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-on-xl-height,
377
352
  .pf-v6-c-page__main-tabs.pf-m-sticky-bottom-on-xl-height,
378
353
  .pf-v6-c-page__main-section.pf-m-sticky-bottom-on-xl-height,
@@ -386,7 +361,6 @@
386
361
  }
387
362
  }
388
363
  @media (min-height: 80rem) {
389
- .pf-v6-c-page__main-nav.pf-m-sticky-top-on-2xl-height,
390
364
  .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-on-2xl-height,
391
365
  .pf-v6-c-page__main-tabs.pf-m-sticky-top-on-2xl-height,
392
366
  .pf-v6-c-page__main-section.pf-m-sticky-top-on-2xl-height,
@@ -398,7 +372,6 @@
398
372
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
399
373
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
400
374
  }
401
- .pf-v6-c-page__main-nav.pf-m-sticky-bottom-on-2xl-height,
402
375
  .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-on-2xl-height,
403
376
  .pf-v6-c-page__main-tabs.pf-m-sticky-bottom-on-2xl-height,
404
377
  .pf-v6-c-page__main-section.pf-m-sticky-bottom-on-2xl-height,
@@ -444,48 +417,12 @@
444
417
 
445
418
  .pf-v6-c-page__main,
446
419
  .pf-v6-c-page__main-drawer,
447
- .pf-v6-c-page__main-group,
448
- .pf-v6-c-page__main-list {
420
+ .pf-v6-c-page__main-group {
449
421
  display: flex;
450
422
  flex-direction: column;
451
423
  flex-grow: 1;
452
424
  }
453
425
 
454
- .pf-v6-c-page__main-nav {
455
- padding-block-start: var(--pf-v6-c-page__main-nav--PaddingBlockStart);
456
- padding-inline-start: var(--pf-v6-c-page__main-nav--PaddingInlineStart);
457
- padding-inline-end: var(--pf-v6-c-page__main-nav--PaddingInlineEnd);
458
- background-color: var(--pf-v6-c-page__main-nav--BackgroundColor);
459
- }
460
- .pf-v6-c-page__main-nav.pf-m-sticky-top, .pf-v6-c-page__main-group.pf-m-sticky-top .pf-v6-c-page__main-nav:last-child {
461
- padding-block-end: var(--pf-v6-c-page__main-nav--m-sticky-top--PaddingBlockEnd);
462
- }
463
- @media (min-height: 0) {
464
- .pf-v6-c-page__main-nav.pf-m-sticky-top-on-sm-height, .pf-v6-c-page__main-group.pf-m-sticky-top-on-sm-height .pf-v6-c-page__main-nav:last-child {
465
- padding-block-end: var(--pf-v6-c-page__main-nav--m-sticky-top--PaddingBlockEnd);
466
- }
467
- }
468
- @media (min-height: 40rem) {
469
- .pf-v6-c-page__main-nav.pf-m-sticky-top-on-md-height, .pf-v6-c-page__main-group.pf-m-sticky-top-on-md-height .pf-v6-c-page__main-nav:last-child {
470
- padding-block-end: var(--pf-v6-c-page__main-nav--m-sticky-top--PaddingBlockEnd);
471
- }
472
- }
473
- @media (min-height: 48rem) {
474
- .pf-v6-c-page__main-nav.pf-m-sticky-top-on-lg-height, .pf-v6-c-page__main-group.pf-m-sticky-top-on-lg-height .pf-v6-c-page__main-nav:last-child {
475
- padding-block-end: var(--pf-v6-c-page__main-nav--m-sticky-top--PaddingBlockEnd);
476
- }
477
- }
478
- @media (min-height: 60rem) {
479
- .pf-v6-c-page__main-nav.pf-m-sticky-top-on-xl-height, .pf-v6-c-page__main-group.pf-m-sticky-top-on-xl-height .pf-v6-c-page__main-nav:last-child {
480
- padding-block-end: var(--pf-v6-c-page__main-nav--m-sticky-top--PaddingBlockEnd);
481
- }
482
- }
483
- @media (min-height: 80rem) {
484
- .pf-v6-c-page__main-nav.pf-m-sticky-top-on-2xl-height, .pf-v6-c-page__main-group.pf-m-sticky-top-on-2xl-height .pf-v6-c-page__main-nav:last-child {
485
- padding-block-end: var(--pf-v6-c-page__main-nav--m-sticky-top--PaddingBlockEnd);
486
- }
487
- }
488
-
489
426
  .pf-v6-c-page__main-subnav {
490
427
  padding-block-start: var(--pf-v6-c-page__main-subnav--PaddingBlockStart);
491
428
  padding-block-end: var(--pf-v6-c-page__main-subnav--PaddingBlockEnd);
@@ -540,9 +477,6 @@
540
477
  padding-inline-end: var(--pf-v6-c-page__main-tabs--PaddingInlineEnd);
541
478
  background-color: var(--pf-v6-c-page__main-tabs--BackgroundColor);
542
479
  }
543
- .pf-v6-c-page__main-nav + .pf-v6-c-page__main-tabs {
544
- --pf-v6-c-page__main-tabs--PaddingBlockStart: var(--pf-v6-c-page__main-nav--page__main-tabs--PaddingBlockStart);
545
- }
546
480
  .pf-v6-c-page__main-breadcrumb + .pf-v6-c-page__main-tabs {
547
481
  --pf-v6-c-page__main-tabs--PaddingBlockStart: var(--pf-v6-c-page__main-breadcrumb--page__main-tabs--PaddingBlockStart);
548
482
  }
@@ -706,10 +640,6 @@
706
640
  flex-shrink: 0;
707
641
  }
708
642
 
709
- .pf-v6-c-page__main-nav .pf-v6-c-page__main-body {
710
- padding-inline-start: var(--pf-v6-c-page__main-nav--PaddingInlineStart);
711
- padding-inline-end: var(--pf-v6-c-page__main-nav--PaddingInlineEnd);
712
- }
713
643
  .pf-v6-c-page__main-breadcrumb .pf-v6-c-page__main-body {
714
644
  padding-inline-start: 0;
715
645
  padding-inline-end: 0;
package/components/Page/page.scss CHANGED
@@ -75,7 +75,6 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
75
75
  --#{$page}__main-section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
76
76
  --#{$page}__main-section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
77
77
  --#{$page}__main-breadcrumb--page__main-tabs--PaddingBlockStart: var(--pf-t--global--spacer--md);
78
- --#{$page}__main-nav--page__main-tabs--PaddingBlockStart: var(--pf-t--global--spacer--md);
79
78
 
80
79
  // Limit width
81
80
  --#{$page}--section--m-limit-width--MaxWidth: calc(#{pf-size-prem(2000px)} - var(--#{$page}__sidebar--Width));
@@ -92,15 +91,6 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
92
91
  --#{$page}--section--m-shadow-top--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
93
92
  --#{$page}--section--m-shadow-top--ZIndex: var(--pf-t--global--z-index--xs);
94
93
 
95
- // Main section horizontal nav
96
- --#{$page}__main-nav--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
97
- --#{$page}__main-nav--PaddingBlockStart: var(--pf-t--global--spacer--md);
98
- --#{$page}__main-nav--PaddingInlineEnd: 0;
99
- --#{$page}__main-nav--PaddingInlineStart: 0;
100
- --#{$page}__main-nav--m-sticky-top--PaddingBlockEnd: var(--pf-t--global--spacer--md);
101
- --#{$page}__main-nav--xl--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
102
- --#{$page}__main-nav--xl--PaddingInlineStart: var(--pf-t--global--spacer--sm);
103
-
104
94
  // Main section horizontal subnav
105
95
  --#{$page}__main-subnav--BackgroundColor: var(--pf-t--global--background--color--primary--default);
106
96
  --#{$page}__main-subnav--PaddingBlockStart: var(--pf-t--global--spacer--md);
@@ -246,7 +236,6 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
246
236
  }
247
237
  }
248
238
 
249
- .#{$page}__main-nav,
250
239
  .#{$page}__main-breadcrumb,
251
240
  .#{$page}__main-tabs,
252
241
  .#{$page}__main-section,
@@ -266,7 +255,6 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
266
255
  }
267
256
  }
268
257
 
269
- .#{$page}__main-nav,
270
258
  .#{$page}__main-breadcrumb,
271
259
  .#{$page}__main-tabs,
272
260
  .#{$page}__main-section,
@@ -351,32 +339,12 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
351
339
 
352
340
  .#{$page}__main,
353
341
  .#{$page}__main-drawer,
354
- .#{$page}__main-group,
355
- .#{$page}__main-list {
342
+ .#{$page}__main-group {
356
343
  display: flex;
357
344
  flex-direction: column;
358
345
  flex-grow: 1;
359
346
  }
360
347
 
361
- .#{$page}__main-nav {
362
- padding-block-start: var(--#{$page}__main-nav--PaddingBlockStart);
363
- padding-inline-start: var(--#{$page}__main-nav--PaddingInlineStart);
364
- padding-inline-end: var(--#{$page}__main-nav--PaddingInlineEnd);
365
- background-color: var(--#{$page}__main-nav--BackgroundColor);
366
-
367
- // Responsive height modifiers for sticky top/bottom
368
- @each $breakpoint, $breakpoint-value in $pf-page-v6--height-breakpoint-map {
369
- $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}-height, "");
370
-
371
- @include pf-v6-apply-height-breakpoint($breakpoint) {
372
- &.pf-m-sticky-top#{$breakpoint-name},
373
- .#{$page}__main-group.pf-m-sticky-top#{$breakpoint-name} &:last-child {
374
- padding-block-end: var(--#{$page}__main-nav--m-sticky-top--PaddingBlockEnd);
375
- }
376
- }
377
- }
378
- }
379
-
380
348
  .#{$page}__main-subnav {
381
349
  padding-block-start: var(--#{$page}__main-subnav--PaddingBlockStart);
382
350
  padding-block-end: var(--#{$page}__main-subnav--PaddingBlockEnd);
@@ -416,10 +384,6 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
416
384
  padding-inline-end: var(--#{$page}__main-tabs--PaddingInlineEnd);
417
385
  background-color: var(--#{$page}__main-tabs--BackgroundColor);
418
386
 
419
- .#{$page}__main-nav + & {
420
- --#{$page}__main-tabs--PaddingBlockStart: var(--#{$page}__main-nav--page__main-tabs--PaddingBlockStart);
421
- }
422
-
423
387
  .#{$page}__main-breadcrumb + & {
424
388
  --#{$page}__main-tabs--PaddingBlockStart: var(--#{$page}__main-breadcrumb--page__main-tabs--PaddingBlockStart);
425
389
  }
@@ -503,11 +467,6 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
503
467
  }
504
468
 
505
469
  .#{$page}__main-body {
506
- .#{$page}__main-nav & {
507
- padding-inline-start: var(--#{$page}__main-nav--PaddingInlineStart);
508
- padding-inline-end: var(--#{$page}__main-nav--PaddingInlineEnd);
509
- }
510
-
511
470
  .#{$page}__main-breadcrumb & {
512
471
  padding-inline-start: 0;
513
472
  padding-inline-end: 0;