@patternfly/patternfly 6.3.0-prerelease.54 → 6.3.0-prerelease.55

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 (8) hide show
  1. package/components/Page/page.css +61 -22
  2. package/components/Page/page.scss +42 -13
  3. package/components/_index.css +61 -22
  4. package/package.json +1 -1
  5. package/patternfly-no-globals.css +61 -22
  6. package/patternfly.css +61 -22
  7. package/patternfly.min.css +1 -1
  8. package/patternfly.min.css.map +1 -1
package/components/Page/page.css CHANGED
@@ -7,7 +7,7 @@
7
7
  --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
8
8
  --pf-v6-c-page__sidebar--xl--Width: var(--pf-v6-c-page__sidebar--Width--base);
9
9
  --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
10
- --pf-v6-c-page__sidebar--BoxShadow: none;
10
+ --pf-v6-c-page__sidebar--BoxShadow: var(--pf-t--global--box-shadow--md--right);
11
11
  --pf-v6-c-page__sidebar--TransitionProperty: opacity;
12
12
  --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
13
13
  --pf-v6-c-page__sidebar--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
@@ -22,6 +22,8 @@
22
22
  --pf-v6-c-page__sidebar--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
23
23
  --pf-v6-c-page__sidebar--PaddingInlineStart: 0;
24
24
  --pf-v6-c-page__sidebar--PaddingInlineEnd: 0;
25
+ --pf-v6-c-page__sidebar--BorderInlineEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
26
+ --pf-v6-c-page__sidebar--BorderInlineEndColor: var(--pf-t--global--border--color--high-contrast);
25
27
  --pf-v6-c-page__sidebar-header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
26
28
  --pf-v6-c-page__sidebar-header--BorderBlockEndColor: var(--pf-t--global--border--color--default);
27
29
  --pf-v6-c-page__sidebar-header--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -46,13 +48,19 @@
46
48
  --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page--inset);
47
49
  --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page--inset);
48
50
  --pf-v6-c-page__main-container--BorderRadius: var(--pf-t--global--border--radius--medium);
49
- --pf-v6-c-page__main-container--BorderWidth: var(--pf-t--global--border--width--main--default);
51
+ --pf-v6-c-page__main-container--BorderBlockStartWidth: var(--pf-t--global--border--width--main--default);
52
+ --pf-v6-c-page__main-container--BorderBlockEndWidth: var(--pf-t--global--border--width--main--default);
53
+ --pf-v6-c-page__main-container--BorderInlineStartWidth: var(--pf-t--global--border--width--main--default);
54
+ --pf-v6-c-page__main-container--BorderInlineEndWidth: var(--pf-t--global--border--width--main--default);
50
55
  --pf-v6-c-page__main-container--BorderColor: var(--pf-t--global--border--color--main--default);
51
56
  --pf-v6-c-page__main-container--xs--AlignSelf: stretch;
52
57
  --pf-v6-c-page__main-container--xs--BorderRadius: 0;
53
58
  --pf-v6-c-page__main-container--xs--MarginInlineStart: 0;
54
59
  --pf-v6-c-page__main-container--xs--MaxHeight: 100%;
55
60
  --pf-v6-c-page__main-container--xs--MarginInlineEnd: 0;
61
+ --pf-v6-c-page__main-container--xs--BorderBlockEndWidth: 0;
62
+ --pf-v6-c-page__main-container--xs--BorderInlineStartWidth: 0px;
63
+ --pf-v6-c-page__main-container--xs--BorderInlineEndWidth: 0px;
56
64
  --pf-v6-c-page__main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
57
65
  --pf-v6-c-page__main-section--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
58
66
  --pf-v6-c-page__main-section--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -65,22 +73,30 @@
65
73
  --pf-v6-c-page--section--m-limit-width--MaxWidth: calc(125rem - var(--pf-v6-c-page__sidebar--Width));
66
74
  --pf-v6-c-page--section--m-sticky-top--ZIndex: var(--pf-t--global--z-index--md);
67
75
  --pf-v6-c-page--section--m-sticky-top--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
76
+ --pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
77
+ --pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
68
78
  --pf-v6-c-page--section--m-sticky-bottom--ZIndex: var(--pf-t--global--z-index--md);
69
79
  --pf-v6-c-page--section--m-sticky-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
80
+ --pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
81
+ --pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
70
82
  --pf-v6-c-page--section--m-shadow-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
71
83
  --pf-v6-c-page--section--m-shadow-bottom--ZIndex: var(--pf-t--global--z-index--xs);
84
+ --pf-v6-c-page--section--m-shadow-bottom--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
85
+ --pf-v6-c-page--section--m-shadow-bottom--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
72
86
  --pf-v6-c-page--section--m-shadow-top--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
73
87
  --pf-v6-c-page--section--m-shadow-top--ZIndex: var(--pf-t--global--z-index--xs);
88
+ --pf-v6-c-page--section--m-shadow-top--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
89
+ --pf-v6-c-page--section--m-shadow-top--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
74
90
  --pf-v6-c-page__main-subnav--BackgroundColor: var(--pf-t--global--background--color--primary--default);
75
91
  --pf-v6-c-page__main-subnav--PaddingBlockStart: var(--pf-t--global--spacer--md);
76
92
  --pf-v6-c-page__main-subnav--PaddingBlockEnd: 0;
77
- --pf-v6-c-page__main-subnav--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
78
- --pf-v6-c-page__main-subnav--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
93
+ --pf-v6-c-page__main-subnav--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth));
94
+ --pf-v6-c-page__main-subnav--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth));
79
95
  --pf-v6-c-page__main-subnav--m-sticky-top--PaddingBlockEnd: var(--pf-t--global--spacer--md);
80
96
  --pf-v6-c-page__main-breadcrumb--PaddingBlockStart: var(--pf-t--global--spacer--md);
81
- --pf-v6-c-page__main-breadcrumb--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
97
+ --pf-v6-c-page__main-breadcrumb--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth));
82
98
  --pf-v6-c-page__main-breadcrumb--PaddingBlockEnd: 0;
83
- --pf-v6-c-page__main-breadcrumb--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
99
+ --pf-v6-c-page__main-breadcrumb--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth));
84
100
  --pf-v6-c-page__main-breadcrumb--BackgroundColor: var(--pf-t--global--background--color--primary--default);
85
101
  --pf-v6-c-page__main-breadcrumb--m-sticky-top--PaddingBlockEnd: var(--pf-t--global--spacer--md);
86
102
  --pf-v6-c-page__main-tabs--PaddingBlockStart: 0;
@@ -103,6 +119,7 @@
103
119
  .pf-v6-c-page {
104
120
  --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--xl--TranslateX);
105
121
  --pf-v6-c-page__sidebar--Opacity: var(--pf-v6-c-page__sidebar--xl--Opacity);
122
+ --pf-v6-c-page__sidebar--BorderInlineEndWidth: 0;
106
123
  }
107
124
  }
108
125
 
@@ -196,6 +213,7 @@
196
213
  overflow-y: auto;
197
214
  -webkit-overflow-scrolling: touch;
198
215
  background-color: var(--pf-v6-c-page__sidebar--BackgroundColor);
216
+ border-inline-end: var(--pf-v6-c-page__sidebar--BorderInlineEndWidth) solid var(--pf-v6-c-page__sidebar--BorderInlineEndColor);
199
217
  opacity: var(--pf-v6-c-page__sidebar--Opacity);
200
218
  transition: var(--pf-v6-c-page__sidebar--TransitionProperty) var(--pf-v6-c-page__sidebar--TransitionDuration) var(--pf-v6-c-page__sidebar--TransitionTimingFunction);
201
219
  transform: translateX(var(--pf-v6-c-page__sidebar--TranslateX)) translateZ(var(--pf-v6-c-page__sidebar--TranslateZ));
@@ -211,7 +229,7 @@
211
229
  }
212
230
  @media screen and (min-width: 75rem) {
213
231
  .pf-v6-c-page__sidebar.pf-m-expanded {
214
- --pf-v6-c-page__sidebar--BoxShadow: none;
232
+ --pf-v6-c-page__sidebar--BoxShadow: var(--pf-v6-c-page__sidebar--BoxShadow);
215
233
  }
216
234
  }
217
235
  .pf-v6-c-page__sidebar.pf-m-collapsed {
@@ -308,6 +326,7 @@
308
326
  .pf-v6-c-page__main-group.pf-m-shadow-bottom,
309
327
  .pf-v6-c-page__main-subnav.pf-m-shadow-bottom {
310
328
  z-index: var(--pf-v6-c-page--section--m-shadow-bottom--ZIndex);
329
+ border-block-end: var(--pf-v6-c-page--section--m-shadow-bottom--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-shadow-bottom--BorderBlockEndColor);
311
330
  box-shadow: var(--pf-v6-c-page--section--m-shadow-bottom--BoxShadow);
312
331
  }
313
332
  .pf-v6-c-page__main-breadcrumb.pf-m-shadow-top,
@@ -317,6 +336,7 @@
317
336
  .pf-v6-c-page__main-group.pf-m-shadow-top,
318
337
  .pf-v6-c-page__main-subnav.pf-m-shadow-top {
319
338
  z-index: var(--pf-v6-c-page--section--m-shadow-top--ZIndex);
339
+ border-block-start: var(--pf-v6-c-page--section--m-shadow-top--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-shadow-top--BorderBlockStartColor);
320
340
  box-shadow: var(--pf-v6-c-page--section--m-shadow-top--BoxShadow);
321
341
  }
322
342
  .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top,
@@ -328,6 +348,7 @@
328
348
  position: sticky;
329
349
  inset-block-start: 0;
330
350
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
351
+ border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
331
352
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
332
353
  }
333
354
  .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom,
@@ -339,6 +360,7 @@
339
360
  position: sticky;
340
361
  inset-block-end: 0;
341
362
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
363
+ border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
342
364
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
343
365
  }
344
366
  @media (min-height: 0) {
@@ -351,6 +373,7 @@
351
373
  position: sticky;
352
374
  inset-block-start: 0;
353
375
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
376
+ border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
354
377
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
355
378
  }
356
379
  .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-on-sm-height,
@@ -362,6 +385,7 @@
362
385
  position: sticky;
363
386
  inset-block-end: 0;
364
387
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
388
+ border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
365
389
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
366
390
  }
367
391
  }
@@ -375,6 +399,7 @@
375
399
  position: sticky;
376
400
  inset-block-start: 0;
377
401
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
402
+ border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
378
403
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
379
404
  }
380
405
  .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-on-md-height,
@@ -386,6 +411,7 @@
386
411
  position: sticky;
387
412
  inset-block-end: 0;
388
413
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
414
+ border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
389
415
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
390
416
  }
391
417
  }
@@ -399,6 +425,7 @@
399
425
  position: sticky;
400
426
  inset-block-start: 0;
401
427
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
428
+ border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
402
429
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
403
430
  }
404
431
  .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-on-lg-height,
@@ -410,6 +437,7 @@
410
437
  position: sticky;
411
438
  inset-block-end: 0;
412
439
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
440
+ border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
413
441
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
414
442
  }
415
443
  }
@@ -423,6 +451,7 @@
423
451
  position: sticky;
424
452
  inset-block-start: 0;
425
453
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
454
+ border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
426
455
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
427
456
  }
428
457
  .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-on-xl-height,
@@ -434,6 +463,7 @@
434
463
  position: sticky;
435
464
  inset-block-end: 0;
436
465
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
466
+ border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
437
467
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
438
468
  }
439
469
  }
@@ -447,6 +477,7 @@
447
477
  position: sticky;
448
478
  inset-block-start: 0;
449
479
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
480
+ border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
450
481
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
451
482
  }
452
483
  .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-on-2xl-height,
@@ -458,6 +489,7 @@
458
489
  position: sticky;
459
490
  inset-block-end: 0;
460
491
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
492
+ border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
461
493
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
462
494
  }
463
495
  }
@@ -470,7 +502,11 @@
470
502
  margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
471
503
  margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
472
504
  background: var(--pf-v6-c-page__main-container--BackgroundColor);
473
- border: var(--pf-v6-c-page__main-container--BorderWidth) solid var(--pf-v6-c-page__main-container--BorderColor);
505
+ border: solid var(--pf-v6-c-page__main-container--BorderColor);
506
+ border-block-start-width: var(--pf-v6-c-page__main-container--BorderBlockStartWidth);
507
+ border-block-end-width: var(--pf-v6-c-page__main-container--BorderBlockEndWidth);
508
+ border-inline-start-width: var(--pf-v6-c-page__main-container--BorderInlineStartWidth);
509
+ border-inline-end-width: var(--pf-v6-c-page__main-container--BorderInlineEndWidth);
474
510
  border-radius: var(--pf-v6-c-page__main-container--BorderRadius);
475
511
  }
476
512
  @media screen and (max-width: calc(48rem - 1px)) {
@@ -480,6 +516,9 @@
480
516
  --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page__main-container--xs--MarginInlineEnd);
481
517
  --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page__main-container--xs--MaxHeight);
482
518
  --pf-v6-c-page__main-container--BorderRadius: var(--pf-v6-c-page__main-container--xs--BorderRadius);
519
+ --pf-v6-c-page__main-container--BorderBlockEndWidth: var(--pf-v6-c-page__main-container--xs--BorderBlockEndWidth);
520
+ --pf-v6-c-page__main-container--BorderInlineStartWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineStartWidth);
521
+ --pf-v6-c-page__main-container--BorderInlineEndWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineEndWidth);
483
522
  }
484
523
  }
485
524
 
@@ -600,8 +639,8 @@
600
639
  gap: var(--pf-v6-c-page__main-section--RowGap);
601
640
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
602
641
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
603
- padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
604
- padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
642
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth));
643
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth));
605
644
  background-color: var(--pf-v6-c-page__main-section--BackgroundColor);
606
645
  }
607
646
  .pf-v6-c-page__main-section.pf-m-secondary {
@@ -610,8 +649,8 @@
610
649
  .pf-v6-c-page__main-section.pf-m-padding {
611
650
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
612
651
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
613
- padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
614
- padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
652
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth));
653
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth));
615
654
  }
616
655
  .pf-v6-c-page__main-section.pf-m-no-padding {
617
656
  padding: 0;
@@ -620,8 +659,8 @@
620
659
  .pf-v6-c-page__main-section.pf-m-padding-on-sm {
621
660
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
622
661
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
623
- padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
624
- padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
662
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth));
663
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth));
625
664
  }
626
665
  .pf-v6-c-page__main-section.pf-m-no-padding-on-sm {
627
666
  padding: 0;
@@ -631,8 +670,8 @@
631
670
  .pf-v6-c-page__main-section.pf-m-padding-on-md {
632
671
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
633
672
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
634
- padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
635
- padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
673
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth));
674
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth));
636
675
  }
637
676
  .pf-v6-c-page__main-section.pf-m-no-padding-on-md {
638
677
  padding: 0;
@@ -642,8 +681,8 @@
642
681
  .pf-v6-c-page__main-section.pf-m-padding-on-lg {
643
682
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
644
683
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
645
- padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
646
- padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
684
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth));
685
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth));
647
686
  }
648
687
  .pf-v6-c-page__main-section.pf-m-no-padding-on-lg {
649
688
  padding: 0;
@@ -653,8 +692,8 @@
653
692
  .pf-v6-c-page__main-section.pf-m-padding-on-xl {
654
693
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
655
694
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
656
- padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
657
- padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
695
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth));
696
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth));
658
697
  }
659
698
  .pf-v6-c-page__main-section.pf-m-no-padding-on-xl {
660
699
  padding: 0;
@@ -664,8 +703,8 @@
664
703
  .pf-v6-c-page__main-section.pf-m-padding-on-2xl {
665
704
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
666
705
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
667
- padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
668
- padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
706
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth));
707
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth));
669
708
  }
670
709
  .pf-v6-c-page__main-section.pf-m-no-padding-on-2xl {
671
710
  padding: 0;
package/components/Page/page.scss CHANGED
@@ -18,7 +18,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
18
18
  --#{$page}__sidebar--Width: var(--#{$page}__sidebar--Width--base);
19
19
  --#{$page}__sidebar--xl--Width: var(--#{$page}__sidebar--Width--base);
20
20
  --#{$page}__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
21
- --#{$page}__sidebar--BoxShadow: none;
21
+ --#{$page}__sidebar--BoxShadow: var(--pf-t--global--box-shadow--md--right);
22
22
 
23
23
  // TODO Reduced Motion default needed
24
24
  --#{$page}__sidebar--TransitionProperty: opacity;
@@ -35,6 +35,8 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
35
35
  --#{$page}__sidebar--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
36
36
  --#{$page}__sidebar--PaddingInlineStart: 0;
37
37
  --#{$page}__sidebar--PaddingInlineEnd: 0;
38
+ --#{$page}__sidebar--BorderInlineEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
39
+ --#{$page}__sidebar--BorderInlineEndColor: var(--pf-t--global--border--color--high-contrast);
38
40
 
39
41
  @media screen and (prefers-reduced-motion: no-preference) {
40
42
  --#{$page}__sidebar--Opacity: 1;
@@ -64,6 +66,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
64
66
  @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
65
67
  --#{$page}__sidebar--TranslateX: var(--#{$page}__sidebar--xl--TranslateX);
66
68
  --#{$page}__sidebar--Opacity: var(--#{$page}__sidebar--xl--Opacity);
69
+ --#{$page}__sidebar--BorderInlineEndWidth: 0;
67
70
  }
68
71
 
69
72
  // Container for the main content area (grid area)
@@ -76,13 +79,19 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
76
79
  --#{$page}__main-container--MarginInlineStart: var(--#{$page}--inset);
77
80
  --#{$page}__main-container--MarginInlineEnd: var(--#{$page}--inset);
78
81
  --#{$page}__main-container--BorderRadius: var(--pf-t--global--border--radius--medium);
79
- --#{$page}__main-container--BorderWidth: var(--pf-t--global--border--width--main--default);
80
- --#{$page}__main-container--BorderColor: var(--pf-t--global--border--color--main--default);
82
+ --#{$page}__main-container--BorderBlockStartWidth: var(--pf-t--global--border--width--main--default);
83
+ --#{$page}__main-container--BorderBlockEndWidth: var(--pf-t--global--border--width--main--default);
84
+ --#{$page}__main-container--BorderInlineStartWidth: var(--pf-t--global--border--width--main--default);
85
+ --#{$page}__main-container--BorderInlineEndWidth: var(--pf-t--global--border--width--main--default);
86
+ --#{$page}__main-container--BorderColor: var(--pf-t--global--border--color--main--default);
81
87
  --#{$page}__main-container--xs--AlignSelf: stretch;
82
88
  --#{$page}__main-container--xs--BorderRadius: 0;
83
89
  --#{$page}__main-container--xs--MarginInlineStart: 0;
84
90
  --#{$page}__main-container--xs--MaxHeight: 100%;
85
91
  --#{$page}__main-container--xs--MarginInlineEnd: 0;
92
+ --#{$page}__main-container--xs--BorderBlockEndWidth: 0;
93
+ --#{$page}__main-container--xs--BorderInlineStartWidth: 0px; // needs a unit because it's used in calc()
94
+ --#{$page}__main-container--xs--BorderInlineEndWidth: 0px; // needs a unit because it's used in calc()
86
95
 
87
96
  // Main section
88
97
  --#{$page}__main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
@@ -101,28 +110,36 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
101
110
  // Sticky
102
111
  --#{$page}--section--m-sticky-top--ZIndex: var(--pf-t--global--z-index--md);
103
112
  --#{$page}--section--m-sticky-top--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
113
+ --#{$page}--section--m-sticky-top--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
114
+ --#{$page}--section--m-sticky-top--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
104
115
  --#{$page}--section--m-sticky-bottom--ZIndex: var(--pf-t--global--z-index--md);
105
116
  --#{$page}--section--m-sticky-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
117
+ --#{$page}--section--m-sticky-bottom--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
118
+ --#{$page}--section--m-sticky-bottom--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
106
119
 
107
120
  // Shadows
108
121
  --#{$page}--section--m-shadow-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
109
122
  --#{$page}--section--m-shadow-bottom--ZIndex: var(--pf-t--global--z-index--xs);
123
+ --#{$page}--section--m-shadow-bottom--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
124
+ --#{$page}--section--m-shadow-bottom--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
110
125
  --#{$page}--section--m-shadow-top--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
111
126
  --#{$page}--section--m-shadow-top--ZIndex: var(--pf-t--global--z-index--xs);
127
+ --#{$page}--section--m-shadow-top--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
128
+ --#{$page}--section--m-shadow-top--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
112
129
 
113
130
  // Main section horizontal subnav
114
131
  --#{$page}__main-subnav--BackgroundColor: var(--pf-t--global--background--color--primary--default);
115
132
  --#{$page}__main-subnav--PaddingBlockStart: var(--pf-t--global--spacer--md);
116
133
  --#{$page}__main-subnav--PaddingBlockEnd: 0;
117
- --#{$page}__main-subnav--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main-container--BorderWidth));
118
- --#{$page}__main-subnav--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main-container--BorderWidth));
134
+ --#{$page}__main-subnav--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main-container--BorderInlineStartWidth));
135
+ --#{$page}__main-subnav--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main-container--BorderInlineEndWidth));
119
136
  --#{$page}__main-subnav--m-sticky-top--PaddingBlockEnd: var(--pf-t--global--spacer--md);
120
137
 
121
138
  // Main section breadcrumb
122
139
  --#{$page}__main-breadcrumb--PaddingBlockStart: var(--pf-t--global--spacer--md);
123
- --#{$page}__main-breadcrumb--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main-container--BorderWidth)); // subtract the border of the main section
140
+ --#{$page}__main-breadcrumb--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main-container--BorderInlineEndWidth)); // subtract the border of the main section
124
141
  --#{$page}__main-breadcrumb--PaddingBlockEnd: 0;
125
- --#{$page}__main-breadcrumb--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main-container--BorderWidth)); // subtract the border of the main section
142
+ --#{$page}__main-breadcrumb--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main-container--BorderInlineStartWidth)); // subtract the border of the main section
126
143
  --#{$page}__main-breadcrumb--BackgroundColor: var(--pf-t--global--background--color--primary--default);
127
144
  --#{$page}__main-breadcrumb--m-sticky-top--PaddingBlockEnd: var(--pf-t--global--spacer--md);
128
145
 
@@ -219,6 +236,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
219
236
  overflow-y: auto;
220
237
  -webkit-overflow-scrolling: touch;
221
238
  background-color: var(--#{$page}__sidebar--BackgroundColor);
239
+ border-inline-end: var(--#{$page}__sidebar--BorderInlineEndWidth) solid var(--#{$page}__sidebar--BorderInlineEndColor);
222
240
  opacity: var(--#{$page}__sidebar--Opacity);
223
241
  transition: var(--#{$page}__sidebar--TransitionProperty) var(--#{$page}__sidebar--TransitionDuration) var(--#{$page}__sidebar--TransitionTimingFunction);
224
242
 
@@ -237,7 +255,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
237
255
  box-shadow: var(--#{$page}__sidebar--BoxShadow);
238
256
 
239
257
  @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
240
- --#{$page}__sidebar--BoxShadow: none;
258
+ --#{$page}__sidebar--BoxShadow: var(--#{$page}__sidebar--BoxShadow);
241
259
  }
242
260
  }
243
261
 
@@ -333,11 +351,13 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
333
351
 
334
352
  &.pf-m-shadow-bottom {
335
353
  z-index: var(--#{$page}--section--m-shadow-bottom--ZIndex);
354
+ border-block-end: var(--#{$page}--section--m-shadow-bottom--BorderBlockEndWidth) solid var(--#{$page}--section--m-shadow-bottom--BorderBlockEndColor);
336
355
  box-shadow: var(--#{$page}--section--m-shadow-bottom--BoxShadow);
337
356
  }
338
357
 
339
358
  &.pf-m-shadow-top {
340
359
  z-index: var(--#{$page}--section--m-shadow-top--ZIndex);
360
+ border-block-start: var(--#{$page}--section--m-shadow-top--BorderBlockStartWidth) solid var(--#{$page}--section--m-shadow-top--BorderBlockStartColor);
341
361
  box-shadow: var(--#{$page}--section--m-shadow-top--BoxShadow);
342
362
  }
343
363
 
@@ -351,6 +371,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
351
371
  position: sticky;
352
372
  inset-block-start: 0;
353
373
  z-index: var(--#{$page}--section--m-sticky-top--ZIndex);
374
+ border-block-end: var(--#{$page}--section--m-sticky-top--BorderBlockEndWidth) solid var(--#{$page}--section--m-sticky-top--BorderBlockEndColor);
354
375
  box-shadow: var(--#{$page}--section--m-sticky-top--BoxShadow);
355
376
  }
356
377
 
@@ -358,6 +379,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
358
379
  position: sticky;
359
380
  inset-block-end: 0;
360
381
  z-index: var(--#{$page}--section--m-sticky-bottom--ZIndex);
382
+ border-block-start: var(--#{$page}--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--#{$page}--section--m-sticky-bottom--BorderBlockStartColor);
361
383
  box-shadow: var(--#{$page}--section--m-sticky-bottom--BoxShadow);
362
384
  }
363
385
  }
@@ -373,7 +395,11 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
373
395
  margin-inline-start: var(--#{$page}__main-container--MarginInlineStart);
374
396
  margin-inline-end: var(--#{$page}__main-container--MarginInlineEnd);
375
397
  background: var(--#{$page}__main-container--BackgroundColor);
376
- border: var(--#{$page}__main-container--BorderWidth) solid var(--#{$page}__main-container--BorderColor);
398
+ border: solid var(--#{$page}__main-container--BorderColor);
399
+ border-block-start-width: var(--#{$page}__main-container--BorderBlockStartWidth);
400
+ border-block-end-width: var(--#{$page}__main-container--BorderBlockEndWidth);
401
+ border-inline-start-width: var(--#{$page}__main-container--BorderInlineStartWidth);
402
+ border-inline-end-width: var(--#{$page}__main-container--BorderInlineEndWidth);
377
403
  border-radius: var(--#{$page}__main-container--BorderRadius);
378
404
 
379
405
  @media screen and (max-width: pf-v6-max-width-bp($pf-v6-global--breakpoint--md)) {
@@ -382,6 +408,9 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
382
408
  --#{$page}__main-container--MarginInlineEnd: var(--#{$page}__main-container--xs--MarginInlineEnd);
383
409
  --#{$page}__main-container--MaxHeight: var(--#{$page}__main-container--xs--MaxHeight);
384
410
  --#{$page}__main-container--BorderRadius: var(--#{$page}__main-container--xs--BorderRadius);
411
+ --#{$page}__main-container--BorderBlockEndWidth: var(--#{$page}__main-container--xs--BorderBlockEndWidth);
412
+ --#{$page}__main-container--BorderInlineStartWidth: var(--#{$page}__main-container--xs--BorderInlineStartWidth);
413
+ --#{$page}__main-container--BorderInlineEndWidth: var(--#{$page}__main-container--xs--BorderInlineEndWidth);
385
414
  }
386
415
  }
387
416
 
@@ -492,8 +521,8 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
492
521
  gap: var(--#{$page}__main-section--RowGap);
493
522
  padding-block-start: var(--#{$page}__main-section--PaddingBlockStart);
494
523
  padding-block-end: var(--#{$page}__main-section--PaddingBlockEnd);
495
- padding-inline-start: calc(var(--#{$page}__main-section--PaddingInlineStart) - var(--#{$page}__main-container--BorderWidth));
496
- padding-inline-end: calc(var(--#{$page}__main-section--PaddingInlineEnd) - var(--#{$page}__main-container--BorderWidth));
524
+ padding-inline-start: calc(var(--#{$page}__main-section--PaddingInlineStart) - var(--#{$page}__main-container--BorderInlineStartWidth));
525
+ padding-inline-end: calc(var(--#{$page}__main-section--PaddingInlineEnd) - var(--#{$page}__main-container--BorderInlineEndWidth));
497
526
  background-color: var(--#{$page}__main-section--BackgroundColor);
498
527
 
499
528
  &.pf-m-secondary {
@@ -508,8 +537,8 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
508
537
  &.pf-m-padding#{$breakpoint-name} {
509
538
  padding-block-start: var(--#{$page}__main-section--PaddingBlockStart);
510
539
  padding-block-end: var(--#{$page}__main-section--PaddingBlockEnd);
511
- padding-inline-start: calc(var(--#{$page}__main-section--PaddingInlineStart) - var(--#{$page}__main-container--BorderWidth));
512
- padding-inline-end: calc(var(--#{$page}__main-section--PaddingInlineEnd) - var(--#{$page}__main-container--BorderWidth));
540
+ padding-inline-start: calc(var(--#{$page}__main-section--PaddingInlineStart) - var(--#{$page}__main-container--BorderInlineStartWidth));
541
+ padding-inline-end: calc(var(--#{$page}__main-section--PaddingInlineEnd) - var(--#{$page}__main-container--BorderInlineEndWidth));
513
542
  }
514
543
 
515
544
  &.pf-m-no-padding#{$breakpoint-name} {