@patternfly/patternfly 6.2.0-prerelease.18 → 6.2.0-prerelease.19

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 +16 -1
  2. package/components/Page/page.scss +17 -3
  3. package/components/_index.css +16 -1
  4. package/package.json +1 -1
  5. package/patternfly-no-globals.css +16 -1
  6. package/patternfly.css +16 -1
  7. package/patternfly.min.css +1 -1
  8. package/patternfly.min.css.map +1 -1
package/components/Page/page.css CHANGED
@@ -36,12 +36,18 @@
36
36
  --pf-v6-c-page__main-container--GridArea: main;
37
37
  --pf-v6-c-page--masthead--main-container--GridArea: sidebar / sidebar / main / main;
38
38
  --pf-v6-c-page__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
39
+ --pf-v6-c-page__main-container--AlignSelf: start;
39
40
  --pf-v6-c-page__main-container--BackgroundColor: var(--pf-t--global--background--color--primary--default);
40
41
  --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page--inset);
41
42
  --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page--inset);
42
43
  --pf-v6-c-page__main-container--BorderRadius: var(--pf-t--global--border--radius--medium);
43
44
  --pf-v6-c-page__main-container--BorderWidth: 0.25rem;
44
45
  --pf-v6-c-page__main-container--BorderColor: var(--pf-v6-c-page__main-container--BackgroundColor);
46
+ --pf-v6-c-page__main-container--xs--AlignSelf: stretch;
47
+ --pf-v6-c-page__main-container--xs--BorderRadius: 0;
48
+ --pf-v6-c-page__main-container--xs--MarginInlineStart: 0;
49
+ --pf-v6-c-page__main-container--xs--MaxHeight: 100%;
50
+ --pf-v6-c-page__main-container--xs--MarginInlineEnd: 0;
45
51
  --pf-v6-c-page__main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
46
52
  --pf-v6-c-page__main-section--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
47
53
  --pf-v6-c-page__main-section--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -399,7 +405,7 @@
399
405
  .pf-v6-c-page__main-container {
400
406
  display: flex;
401
407
  flex-direction: column;
402
- align-self: start;
408
+ align-self: var(--pf-v6-c-page__main-container--AlignSelf);
403
409
  max-height: var(--pf-v6-c-page__main-container--MaxHeight);
404
410
  margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
405
411
  margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
@@ -407,6 +413,15 @@
407
413
  border: var(--pf-v6-c-page__main-container--BorderWidth) solid var(--pf-v6-c-page__main-container--BorderColor);
408
414
  border-radius: var(--pf-v6-c-page__main-container--BorderRadius);
409
415
  }
416
+ @media screen and (max-width: calc(48rem - 1px)) {
417
+ .pf-v6-c-page__main-container {
418
+ --pf-v6-c-page__main-container--AlignSelf: var(--pf-v6-c-page__main-container--xs--AlignSelf);
419
+ --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page__main-container--xs--MarginInlineStart);
420
+ --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page__main-container--xs--MarginInlineEnd);
421
+ --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page__main-container--xs--MaxHeight);
422
+ --pf-v6-c-page__main-container--BorderRadius: var(--pf-v6-c-page__main-container--xs--BorderRadius);
423
+ }
424
+ }
410
425
 
411
426
  .pf-v6-c-page__main-container,
412
427
  .pf-v6-c-page__drawer {
package/components/Page/page.scss CHANGED
@@ -60,12 +60,18 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
60
60
  --#{$page}__main-container--GridArea: main;
61
61
  --#{$page}--masthead--main-container--GridArea: sidebar / sidebar / main / main; // no sidebar
62
62
  --#{$page}__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
63
+ --#{$page}__main-container--AlignSelf: start;
63
64
  --#{$page}__main-container--BackgroundColor: var(--pf-t--global--background--color--primary--default);
64
- --#{$page}__main-container--MarginInlineStart: var(--#{$page}--inset);
65
+ --#{$page}__main-container--MarginInlineStart: var(--#{$page}--inset);
65
66
  --#{$page}__main-container--MarginInlineEnd: var(--#{$page}--inset);
66
67
  --#{$page}__main-container--BorderRadius: var(--pf-t--global--border--radius--medium);
67
68
  --#{$page}__main-container--BorderWidth: #{pf-size-prem(4px)}; // TODO Change to be a page outline token
68
69
  --#{$page}__main-container--BorderColor: var(--#{$page}__main-container--BackgroundColor); // TODO Border should match the background to blend in - change to be a page outline token
70
+ --#{$page}__main-container--xs--AlignSelf: stretch;
71
+ --#{$page}__main-container--xs--BorderRadius: 0;
72
+ --#{$page}__main-container--xs--MarginInlineStart: 0;
73
+ --#{$page}__main-container--xs--MaxHeight: 100%;
74
+ --#{$page}__main-container--xs--MarginInlineEnd: 0;
69
75
 
70
76
  // Main section
71
77
  --#{$page}__main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
@@ -80,7 +86,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
80
86
 
81
87
  // Limit width
82
88
  --#{$page}--section--m-limit-width--MaxWidth: calc(#{pf-size-prem(2000px)} - var(--#{$page}__sidebar--Width));
83
-
89
+
84
90
  // Sticky
85
91
  --#{$page}--section--m-sticky-top--ZIndex: var(--pf-t--global--z-index--md);
86
92
  --#{$page}--section--m-sticky-top--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
@@ -320,13 +326,21 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
320
326
  .#{$page}__main-container {
321
327
  display: flex;
322
328
  flex-direction: column;
323
- align-self: start;
329
+ align-self: var(--#{$page}__main-container--AlignSelf);
324
330
  max-height: var(--#{$page}__main-container--MaxHeight);
325
331
  margin-inline-start: var(--#{$page}__main-container--MarginInlineStart);
326
332
  margin-inline-end: var(--#{$page}__main-container--MarginInlineEnd);
327
333
  background: var(--#{$page}__main-container--BackgroundColor);
328
334
  border: var(--#{$page}__main-container--BorderWidth) solid var(--#{$page}__main-container--BorderColor);
329
335
  border-radius: var(--#{$page}__main-container--BorderRadius);
336
+
337
+ @media screen and (max-width: pf-v6-max-width-bp($pf-v6-global--breakpoint--md)) {
338
+ --#{$page}__main-container--AlignSelf: var(--#{$page}__main-container--xs--AlignSelf);
339
+ --#{$page}__main-container--MarginInlineStart: var(--#{$page}__main-container--xs--MarginInlineStart);
340
+ --#{$page}__main-container--MarginInlineEnd: var(--#{$page}__main-container--xs--MarginInlineEnd);
341
+ --#{$page}__main-container--MaxHeight: var(--#{$page}__main-container--xs--MaxHeight);
342
+ --#{$page}__main-container--BorderRadius: var(--#{$page}__main-container--xs--BorderRadius);
343
+ }
330
344
  }
331
345
 
332
346
  .#{$page}__main-container,
package/components/_index.css CHANGED
@@ -11669,12 +11669,18 @@ ul.pf-v6-c-list {
11669
11669
  --pf-v6-c-page__main-container--GridArea: main;
11670
11670
  --pf-v6-c-page--masthead--main-container--GridArea: sidebar / sidebar / main / main;
11671
11671
  --pf-v6-c-page__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
11672
+ --pf-v6-c-page__main-container--AlignSelf: start;
11672
11673
  --pf-v6-c-page__main-container--BackgroundColor: var(--pf-t--global--background--color--primary--default);
11673
11674
  --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page--inset);
11674
11675
  --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page--inset);
11675
11676
  --pf-v6-c-page__main-container--BorderRadius: var(--pf-t--global--border--radius--medium);
11676
11677
  --pf-v6-c-page__main-container--BorderWidth: 0.25rem;
11677
11678
  --pf-v6-c-page__main-container--BorderColor: var(--pf-v6-c-page__main-container--BackgroundColor);
11679
+ --pf-v6-c-page__main-container--xs--AlignSelf: stretch;
11680
+ --pf-v6-c-page__main-container--xs--BorderRadius: 0;
11681
+ --pf-v6-c-page__main-container--xs--MarginInlineStart: 0;
11682
+ --pf-v6-c-page__main-container--xs--MaxHeight: 100%;
11683
+ --pf-v6-c-page__main-container--xs--MarginInlineEnd: 0;
11678
11684
  --pf-v6-c-page__main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
11679
11685
  --pf-v6-c-page__main-section--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
11680
11686
  --pf-v6-c-page__main-section--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -12032,7 +12038,7 @@ ul.pf-v6-c-list {
12032
12038
  .pf-v6-c-page__main-container {
12033
12039
  display: flex;
12034
12040
  flex-direction: column;
12035
- align-self: start;
12041
+ align-self: var(--pf-v6-c-page__main-container--AlignSelf);
12036
12042
  max-height: var(--pf-v6-c-page__main-container--MaxHeight);
12037
12043
  margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
12038
12044
  margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
@@ -12040,6 +12046,15 @@ ul.pf-v6-c-list {
12040
12046
  border: var(--pf-v6-c-page__main-container--BorderWidth) solid var(--pf-v6-c-page__main-container--BorderColor);
12041
12047
  border-radius: var(--pf-v6-c-page__main-container--BorderRadius);
12042
12048
  }
12049
+ @media screen and (max-width: calc(48rem - 1px)) {
12050
+ .pf-v6-c-page__main-container {
12051
+ --pf-v6-c-page__main-container--AlignSelf: var(--pf-v6-c-page__main-container--xs--AlignSelf);
12052
+ --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page__main-container--xs--MarginInlineStart);
12053
+ --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page__main-container--xs--MarginInlineEnd);
12054
+ --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page__main-container--xs--MaxHeight);
12055
+ --pf-v6-c-page__main-container--BorderRadius: var(--pf-v6-c-page__main-container--xs--BorderRadius);
12056
+ }
12057
+ }
12043
12058
 
12044
12059
  .pf-v6-c-page__main-container,
12045
12060
  .pf-v6-c-page__drawer {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.2.0-prerelease.18",
4
+ "version": "6.2.0-prerelease.19",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -19131,12 +19131,18 @@ ul.pf-v6-c-list {
19131
19131
  --pf-v6-c-page__main-container--GridArea: main;
19132
19132
  --pf-v6-c-page--masthead--main-container--GridArea: sidebar / sidebar / main / main;
19133
19133
  --pf-v6-c-page__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
19134
+ --pf-v6-c-page__main-container--AlignSelf: start;
19134
19135
  --pf-v6-c-page__main-container--BackgroundColor: var(--pf-t--global--background--color--primary--default);
19135
19136
  --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page--inset);
19136
19137
  --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page--inset);
19137
19138
  --pf-v6-c-page__main-container--BorderRadius: var(--pf-t--global--border--radius--medium);
19138
19139
  --pf-v6-c-page__main-container--BorderWidth: 0.25rem;
19139
19140
  --pf-v6-c-page__main-container--BorderColor: var(--pf-v6-c-page__main-container--BackgroundColor);
19141
+ --pf-v6-c-page__main-container--xs--AlignSelf: stretch;
19142
+ --pf-v6-c-page__main-container--xs--BorderRadius: 0;
19143
+ --pf-v6-c-page__main-container--xs--MarginInlineStart: 0;
19144
+ --pf-v6-c-page__main-container--xs--MaxHeight: 100%;
19145
+ --pf-v6-c-page__main-container--xs--MarginInlineEnd: 0;
19140
19146
  --pf-v6-c-page__main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
19141
19147
  --pf-v6-c-page__main-section--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
19142
19148
  --pf-v6-c-page__main-section--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -19494,7 +19500,7 @@ ul.pf-v6-c-list {
19494
19500
  .pf-v6-c-page__main-container {
19495
19501
  display: flex;
19496
19502
  flex-direction: column;
19497
- align-self: start;
19503
+ align-self: var(--pf-v6-c-page__main-container--AlignSelf);
19498
19504
  max-height: var(--pf-v6-c-page__main-container--MaxHeight);
19499
19505
  margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
19500
19506
  margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
@@ -19502,6 +19508,15 @@ ul.pf-v6-c-list {
19502
19508
  border: var(--pf-v6-c-page__main-container--BorderWidth) solid var(--pf-v6-c-page__main-container--BorderColor);
19503
19509
  border-radius: var(--pf-v6-c-page__main-container--BorderRadius);
19504
19510
  }
19511
+ @media screen and (max-width: calc(48rem - 1px)) {
19512
+ .pf-v6-c-page__main-container {
19513
+ --pf-v6-c-page__main-container--AlignSelf: var(--pf-v6-c-page__main-container--xs--AlignSelf);
19514
+ --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page__main-container--xs--MarginInlineStart);
19515
+ --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page__main-container--xs--MarginInlineEnd);
19516
+ --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page__main-container--xs--MaxHeight);
19517
+ --pf-v6-c-page__main-container--BorderRadius: var(--pf-v6-c-page__main-container--xs--BorderRadius);
19518
+ }
19519
+ }
19505
19520
 
19506
19521
  .pf-v6-c-page__main-container,
19507
19522
  .pf-v6-c-page__drawer {
package/patternfly.css CHANGED
@@ -19267,12 +19267,18 @@ ul.pf-v6-c-list {
19267
19267
  --pf-v6-c-page__main-container--GridArea: main;
19268
19268
  --pf-v6-c-page--masthead--main-container--GridArea: sidebar / sidebar / main / main;
19269
19269
  --pf-v6-c-page__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
19270
+ --pf-v6-c-page__main-container--AlignSelf: start;
19270
19271
  --pf-v6-c-page__main-container--BackgroundColor: var(--pf-t--global--background--color--primary--default);
19271
19272
  --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page--inset);
19272
19273
  --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page--inset);
19273
19274
  --pf-v6-c-page__main-container--BorderRadius: var(--pf-t--global--border--radius--medium);
19274
19275
  --pf-v6-c-page__main-container--BorderWidth: 0.25rem;
19275
19276
  --pf-v6-c-page__main-container--BorderColor: var(--pf-v6-c-page__main-container--BackgroundColor);
19277
+ --pf-v6-c-page__main-container--xs--AlignSelf: stretch;
19278
+ --pf-v6-c-page__main-container--xs--BorderRadius: 0;
19279
+ --pf-v6-c-page__main-container--xs--MarginInlineStart: 0;
19280
+ --pf-v6-c-page__main-container--xs--MaxHeight: 100%;
19281
+ --pf-v6-c-page__main-container--xs--MarginInlineEnd: 0;
19276
19282
  --pf-v6-c-page__main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
19277
19283
  --pf-v6-c-page__main-section--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
19278
19284
  --pf-v6-c-page__main-section--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -19630,7 +19636,7 @@ ul.pf-v6-c-list {
19630
19636
  .pf-v6-c-page__main-container {
19631
19637
  display: flex;
19632
19638
  flex-direction: column;
19633
- align-self: start;
19639
+ align-self: var(--pf-v6-c-page__main-container--AlignSelf);
19634
19640
  max-height: var(--pf-v6-c-page__main-container--MaxHeight);
19635
19641
  margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
19636
19642
  margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
@@ -19638,6 +19644,15 @@ ul.pf-v6-c-list {
19638
19644
  border: var(--pf-v6-c-page__main-container--BorderWidth) solid var(--pf-v6-c-page__main-container--BorderColor);
19639
19645
  border-radius: var(--pf-v6-c-page__main-container--BorderRadius);
19640
19646
  }
19647
+ @media screen and (max-width: calc(48rem - 1px)) {
19648
+ .pf-v6-c-page__main-container {
19649
+ --pf-v6-c-page__main-container--AlignSelf: var(--pf-v6-c-page__main-container--xs--AlignSelf);
19650
+ --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page__main-container--xs--MarginInlineStart);
19651
+ --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page__main-container--xs--MarginInlineEnd);
19652
+ --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page__main-container--xs--MaxHeight);
19653
+ --pf-v6-c-page__main-container--BorderRadius: var(--pf-v6-c-page__main-container--xs--BorderRadius);
19654
+ }
19655
+ }
19641
19656
 
19642
19657
  .pf-v6-c-page__main-container,
19643
19658
  .pf-v6-c-page__drawer {