@patternfly/patternfly 6.5.0-prerelease.31 → 6.5.0-prerelease.32
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Compass/compass.css +14 -4
- package/components/Compass/compass.scss +16 -4
- package/components/Masthead/masthead.css +40 -0
- package/components/Masthead/masthead.scss +47 -0
- package/components/Nav/nav.css +55 -0
- package/components/Nav/nav.scss +70 -3
- package/components/Page/page.css +20 -0
- package/components/Page/page.scss +27 -0
- package/components/Toolbar/toolbar.css +32 -6
- package/components/Toolbar/toolbar.scss +28 -4
- package/components/_index.css +161 -10
- package/docs/components/Compass/examples/Compass.css +8 -2
- package/docs/components/Compass/examples/Compass.md +22 -1
- package/docs/components/Masthead/examples/masthead.md +67 -0
- package/docs/components/Nav/examples/Navigation.md +44 -0
- package/docs/components/Page/examples/Page.md +37 -0
- package/docs/components/Toolbar/examples/Toolbar.md +28 -0
- package/docs/demos/AboutModal/examples/AboutModal.md +5 -5
- package/docs/demos/Alert/examples/Alert.md +15 -15
- package/docs/demos/BackToTop/examples/BackToTop.md +5 -5
- package/docs/demos/Banner/examples/Banner.md +10 -10
- package/docs/demos/CardView/examples/CardView.md +5 -5
- package/docs/demos/Compass/examples/Compass.md +208 -0
- package/docs/demos/Dashboard/examples/Dashboard.md +5 -5
- package/docs/demos/DataList/examples/DataList.md +20 -23
- package/docs/demos/DescriptionList/examples/DescriptionList.md +15 -15
- package/docs/demos/Drawer/examples/Drawer.md +25 -25
- package/docs/demos/JumpLinks/examples/JumpLinks.md +30 -30
- package/docs/demos/Masthead/examples/Masthead.md +55 -58
- package/docs/demos/Modal/examples/Modal.md +30 -33
- package/docs/demos/Nav/examples/Nav.md +299 -62
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +25 -25
- package/docs/demos/Page/examples/Page.md +70 -79
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +35 -35
- package/docs/demos/Skeleton/examples/Skeleton.md +5 -5
- package/docs/demos/Table/examples/Table.md +75 -78
- package/docs/demos/Tabs/examples/Tabs.md +30 -30
- package/docs/demos/Toolbar/examples/Toolbar.md +10 -10
- package/docs/demos/Wizard/examples/Wizard.md +45 -48
- package/package.json +1 -1
- package/patternfly-no-globals.css +161 -10
- package/patternfly.css +161 -10
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
package/patternfly.css
CHANGED
|
@@ -12430,16 +12430,16 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
|
|
|
12430
12430
|
--pf-v6-c-compass__main-header-content--RowGap: var(--pf-t--global--spacer--sm);
|
|
12431
12431
|
--pf-v6-c-compass__main-header-content--ColumnGap: var(--pf-t--global--spacer--md);
|
|
12432
12432
|
--pf-v6-c-compass__main-footer--MarginBlockStart: calc(var(--pf-v6-c-compass__main--RowGap) * -1 + var(--pf-v6-c-compass--Gap));
|
|
12433
|
-
--pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
|
|
12434
|
-
--pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
|
|
12435
|
-
--pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
|
|
12436
12433
|
--pf-v6-c-compass__panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
|
|
12437
12434
|
--pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
|
|
12438
12435
|
--pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-t--global--spacer--inset--page-chrome);
|
|
12439
12436
|
--pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
|
|
12440
12437
|
--pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
|
|
12441
|
-
--pf-v6-c-compass__panel--
|
|
12438
|
+
--pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
|
|
12439
|
+
--pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
|
|
12442
12440
|
--pf-v6-c-compass__panel--BorderColor: var(--pf-t--global--border--color--alt);
|
|
12441
|
+
--pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
|
|
12442
|
+
--pf-v6-c-compass__panel--BorderWidth: var(--pf-t--global--border--width--regular);
|
|
12443
12443
|
--pf-v6-c-compass__panel--BoxShadow: var(--pf-t--global--box-shadow--md);
|
|
12444
12444
|
--pf-v6-c-compass__message-bar--Width: 450px;
|
|
12445
12445
|
--pf-v6-c-compass__message-bar--MinWidth: 300px;
|
|
@@ -12490,6 +12490,16 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
|
|
|
12490
12490
|
background-image: var(--pf-v6-c-compass--BackgroundImage);
|
|
12491
12491
|
background-size: cover;
|
|
12492
12492
|
}
|
|
12493
|
+
.pf-v6-c-compass.pf-m-dock {
|
|
12494
|
+
grid-template-areas: "dock main";
|
|
12495
|
+
grid-template-rows: auto;
|
|
12496
|
+
grid-template-columns: auto 1fr;
|
|
12497
|
+
align-items: stretch;
|
|
12498
|
+
padding: 0;
|
|
12499
|
+
}
|
|
12500
|
+
.pf-v6-c-compass.pf-m-dock .pf-v6-c-compass__main {
|
|
12501
|
+
padding: var(--pf-v6-c-compass--Padding);
|
|
12502
|
+
}
|
|
12493
12503
|
:root:where(.pf-v6-theme-dark) .pf-v6-c-compass {
|
|
12494
12504
|
--pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--dark);
|
|
12495
12505
|
}
|
|
@@ -19144,6 +19154,15 @@ ul.pf-v6-c-list {
|
|
|
19144
19154
|
--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn: 2;
|
|
19145
19155
|
--pf-v6-c-masthead--m-display-inline__main--Display: flex;
|
|
19146
19156
|
--pf-v6-c-masthead--m-display-inline__main--ColumnGap: var(--pf-t--global--spacer--md);
|
|
19157
|
+
--pf-v6-c-masthead--m-docked--GridTemplateRows: min-content 1fr;
|
|
19158
|
+
--pf-v6-c-masthead--m-docked--RowGap: var(--pf-t--global--spacer--gutter--default);
|
|
19159
|
+
--pf-v6-c-masthead--m-docked--PaddingBlockStart: var(--pf-t--global--spacer--lg);
|
|
19160
|
+
--pf-v6-c-masthead--m-docked--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
|
|
19161
|
+
--pf-v6-c-masthead--m-docked--PaddingInlineStart: var(--pf-t--global--spacer--sm);
|
|
19162
|
+
--pf-v6-c-masthead--m-docked--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
|
|
19163
|
+
--pf-v6-c-masthead--m-docked--BackgroundColor: var(--pf-t--global--background--color--glass--default);
|
|
19164
|
+
--pf-v6-c-masthead--m-docked--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
|
|
19165
|
+
--pf-v6-c-masthead--m-docked--c-toolbar--Height: 100%;
|
|
19147
19166
|
--pf-v6-c-masthead__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
|
|
19148
19167
|
--pf-v6-c-masthead__expandable-content--BorderBlockStart: var(--pf-v6-c-masthead--BorderWidth) solid var(--pf-v6-c-masthead--BorderColor);
|
|
19149
19168
|
--pf-v6-c-masthead--c-toolbar--Width: 100%;
|
|
@@ -19164,6 +19183,7 @@ ul.pf-v6-c-list {
|
|
|
19164
19183
|
--pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
|
|
19165
19184
|
--pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
|
|
19166
19185
|
display: grid;
|
|
19186
|
+
grid-template-rows: var(--pf-v6-c-masthead--GridTemplateRows);
|
|
19167
19187
|
grid-template-columns: var(--pf-v6-c-masthead--GridTemplateColumns);
|
|
19168
19188
|
row-gap: var(--pf-v6-c-masthead--RowGap);
|
|
19169
19189
|
column-gap: var(--pf-v6-c-masthead--ColumnGap);
|
|
@@ -19196,6 +19216,36 @@ ul.pf-v6-c-list {
|
|
|
19196
19216
|
--pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
|
|
19197
19217
|
}
|
|
19198
19218
|
}
|
|
19219
|
+
.pf-v6-c-masthead.pf-m-docked {
|
|
19220
|
+
--pf-v6-c-masthead--BackgroundColor: var(--pf-v6-c-masthead--m-docked--BackgroundColor);
|
|
19221
|
+
--pf-v6-c-masthead--GridTemplateRows: var(--pf-v6-c-masthead--m-docked--GridTemplateRows);
|
|
19222
|
+
--pf-v6-c-masthead--PaddingBlockStart: var(--pf-v6-c-masthead--m-docked--PaddingBlockStart);
|
|
19223
|
+
--pf-v6-c-masthead--PaddingBlockEnd: var(--pf-v6-c-masthead--m-docked--PaddingBlockEnd);
|
|
19224
|
+
--pf-v6-c-masthead--PaddingInlineStart: var(--pf-v6-c-masthead--m-docked--PaddingInlineStart);
|
|
19225
|
+
--pf-v6-c-masthead--PaddingInlineEnd: var(--pf-v6-c-masthead--m-docked--PaddingInlineEnd);
|
|
19226
|
+
--pf-v6-c-masthead--GridTemplateColumns: auto;
|
|
19227
|
+
--pf-v6-c-masthead--RowGap: var(--pf-v6-c-masthead--m-docked--RowGap);
|
|
19228
|
+
--pf-v6-c-masthead--m-display-inline--breakpoint--xl--GridTemplateColumns: auto;
|
|
19229
|
+
--pf-v6-c-masthead__main--GridColumn: auto;
|
|
19230
|
+
--pf-v6-c-masthead__content--GridColumn: auto;
|
|
19231
|
+
--pf-v6-c-masthead__logo--Width: auto;
|
|
19232
|
+
--pf-v6-c-masthead__main--MarginInlineEnd: 0;
|
|
19233
|
+
display: flex;
|
|
19234
|
+
flex-direction: column;
|
|
19235
|
+
align-items: center;
|
|
19236
|
+
width: fit-content;
|
|
19237
|
+
height: 100%;
|
|
19238
|
+
backdrop-filter: var(--pf-v6-c-masthead--m-docked--BackdropFilter);
|
|
19239
|
+
}
|
|
19240
|
+
.pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__content {
|
|
19241
|
+
flex-direction: column;
|
|
19242
|
+
flex-grow: 1;
|
|
19243
|
+
align-self: revert;
|
|
19244
|
+
}
|
|
19245
|
+
.pf-v6-c-masthead.pf-m-docked .pf-v6-c-toolbar {
|
|
19246
|
+
--pf-v6-c-masthead--c-toolbar--Width: fit-content;
|
|
19247
|
+
height: var(--pf-v6-c-masthead--m-docked--c-toolbar--Height);
|
|
19248
|
+
}
|
|
19199
19249
|
.pf-v6-c-masthead .pf-v6-c-toolbar__content-section {
|
|
19200
19250
|
flex-wrap: nowrap;
|
|
19201
19251
|
min-width: 0;
|
|
@@ -21244,6 +21294,15 @@ ul.pf-v6-c-list {
|
|
|
21244
21294
|
--pf-v6-c-nav__section-title--PaddingInlineStart: var(--pf-v6-c-nav__link--PaddingInlineStart);
|
|
21245
21295
|
--pf-v6-c-nav__section-title--PaddingInlineEnd: var(--pf-v6-c-nav__link--PaddingInlineEnd);
|
|
21246
21296
|
--pf-v6-c-nav__item--RowGap: var(--pf-v6-c-nav__list--RowGap);
|
|
21297
|
+
--pf-v6-c-nav__item--accent--size: var(--pf-t--global--border--width--extra-strong);
|
|
21298
|
+
--pf-v6-c-nav__item--accent--color: var(--pf-t--global--border--color--clicked);
|
|
21299
|
+
--pf-v6-c-nav__item--accent--offset: calc(var(--pf-t--global--spacer--sm) * -1);
|
|
21300
|
+
--pf-v6-c-nav__item--accent--BorderRadius: var(--pf-t--global--border--radius--small);
|
|
21301
|
+
--pf-v6-c-nav__item--accent--ScaleY: 0;
|
|
21302
|
+
--pf-v6-c-nav__item--current--accent--ScaleY: 1;
|
|
21303
|
+
--pf-v6-c-nav__item--accent--TransitionDuration: 0;
|
|
21304
|
+
--pf-v6-c-nav__item--current--accent--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
|
|
21305
|
+
--pf-v6-c-nav__item--accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
|
|
21247
21306
|
--pf-v6-c-nav__item__toggle-icon--Rotate: 0;
|
|
21248
21307
|
--pf-v6-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
|
|
21249
21308
|
--pf-v6-c-nav__item__toggle-icon--TransitionDuration--transform: var(--pf-t--global--motion--duration--icon--default);
|
|
@@ -21268,6 +21327,7 @@ ul.pf-v6-c-list {
|
|
|
21268
21327
|
--pf-v6-c-nav__link--m-current--TransitionTimingFunction--color: var(--pf-t--global--motion--timing-function--default);
|
|
21269
21328
|
--pf-v6-c-nav__link-icon--Color: var(--pf-t--global--icon--color--subtle);
|
|
21270
21329
|
--pf-v6-c-nav__link--m-current__link-icon--Color: var(--pf-t--global--icon--color--regular);
|
|
21330
|
+
--pf-v6-c-nav__link-text--FontSize: initial;
|
|
21271
21331
|
--pf-v6-c-nav__subnav--RowGap: var(--pf-t--global--border--width--extra-strong);
|
|
21272
21332
|
--pf-v6-c-nav__subnav--PaddingBlockStart: var(--pf-v6-c-nav__item--RowGap);
|
|
21273
21333
|
--pf-v6-c-nav__subnav--PaddingBlockEnd: var(--pf-v6-c-nav__item--RowGap);
|
|
@@ -21308,6 +21368,11 @@ ul.pf-v6-c-list {
|
|
|
21308
21368
|
--pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
|
|
21309
21369
|
--pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
|
|
21310
21370
|
--pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
|
|
21371
|
+
--pf-v6-c-nav--m-docked__list--RowGap: var(--pf-t--global--spacer--gap--action-to-action--plain);
|
|
21372
|
+
--pf-v6-c-nav--m-docked__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
|
|
21373
|
+
--pf-v6-c-nav--m-docked__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
|
|
21374
|
+
--pf-v6-c-nav--m-docked__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
|
|
21375
|
+
--pf-v6-c-nav--m-docked__link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
|
|
21311
21376
|
}
|
|
21312
21377
|
@media screen and (prefers-reduced-motion: no-preference) {
|
|
21313
21378
|
.pf-v6-c-nav {
|
|
@@ -21349,6 +21414,21 @@ ul.pf-v6-c-list {
|
|
|
21349
21414
|
.pf-v6-c-nav.pf-m-fill {
|
|
21350
21415
|
flex-grow: 1;
|
|
21351
21416
|
}
|
|
21417
|
+
.pf-v6-c-nav.pf-m-docked {
|
|
21418
|
+
--pf-v6-c-nav--PaddingBlockStart: 0;
|
|
21419
|
+
--pf-v6-c-nav--PaddingBlockEnd: 0;
|
|
21420
|
+
--pf-v6-c-nav__list--RowGap: var(--pf-v6-c-nav--m-docked__list--RowGap);
|
|
21421
|
+
--pf-v6-c-nav__link--PaddingInlineStart: var(--pf-v6-c-nav--m-docked__link--PaddingInlineStart);
|
|
21422
|
+
--pf-v6-c-nav__link--PaddingInlineEnd: var(--pf-v6-c-nav--m-docked__link--PaddingInlineEnd);
|
|
21423
|
+
--pf-v6-c-nav__link--hover--BackgroundColor: var(--pf-v6-c-nav--m-docked__link--hover--BackgroundColor);
|
|
21424
|
+
--pf-v6-c-nav__link--m-current--BackgroundColor: var(--pf-v6-c-nav--m-docked__link--m-current--BackgroundColor);
|
|
21425
|
+
width: fit-content;
|
|
21426
|
+
}
|
|
21427
|
+
.pf-v6-c-nav.pf-m-docked .pf-v6-c-nav__link-icon {
|
|
21428
|
+
position: relative;
|
|
21429
|
+
align-self: center;
|
|
21430
|
+
min-width: 1lh;
|
|
21431
|
+
}
|
|
21352
21432
|
.pf-v6-c-nav .pf-v6-c-menu {
|
|
21353
21433
|
--pf-v6-c-menu--MinWidth: 100%;
|
|
21354
21434
|
}
|
|
@@ -21412,14 +21492,34 @@ ul.pf-v6-c-list {
|
|
|
21412
21492
|
}
|
|
21413
21493
|
|
|
21414
21494
|
.pf-v6-c-nav__item {
|
|
21495
|
+
position: relative;
|
|
21415
21496
|
scroll-snap-align: var(--pf-v6-c-nav__item--ScrollSnapAlign);
|
|
21416
21497
|
}
|
|
21498
|
+
.pf-v6-c-nav__item::before {
|
|
21499
|
+
position: absolute;
|
|
21500
|
+
inset-block-start: 0;
|
|
21501
|
+
inset-block-end: 0;
|
|
21502
|
+
inset-inline-start: var(--pf-v6-c-nav__item--accent--offset);
|
|
21503
|
+
width: var(--pf-v6-c-nav__item--accent--size);
|
|
21504
|
+
pointer-events: none;
|
|
21505
|
+
content: var(--pf-v6-c-nav__item--accent--content, "");
|
|
21506
|
+
background-color: var(--pf-v6-c-nav__item--accent--color);
|
|
21507
|
+
border-radius: var(--pf-v6-c-nav__item--accent--BorderRadius);
|
|
21508
|
+
transition-timing-function: var(--pf-v6-c-nav__item--accent--TransitionTimingFunction);
|
|
21509
|
+
transition-duration: var(--pf-v6-c-nav__item--accent--TransitionDuration);
|
|
21510
|
+
transition-property: scale;
|
|
21511
|
+
scale: 1 var(--pf-v6-c-nav__item--accent--ScaleY);
|
|
21512
|
+
}
|
|
21417
21513
|
.pf-v6-c-nav__item > .pf-v6-c-nav__link[button] {
|
|
21418
21514
|
margin-block-end: var(--pf-v6-c-nav__button--RowGap--row-offset);
|
|
21419
21515
|
}
|
|
21420
21516
|
.pf-v6-c-nav__item.pf-m-expanded:last-child > .pf-v6-c-nav__subnav {
|
|
21421
21517
|
margin-block-end: calc(var(--pf-v6-c-nav__subnav--PaddingBlockEnd) * -1);
|
|
21422
21518
|
}
|
|
21519
|
+
.pf-v6-c-nav__item:has(> .pf-v6-c-nav__link.pf-m-current) {
|
|
21520
|
+
--pf-v6-c-nav__item--accent--ScaleY: var(--pf-v6-c-nav__item--current--accent--ScaleY);
|
|
21521
|
+
--pf-v6-c-nav__item--accent--TransitionDuration: var(--pf-v6-c-nav__item--current--accent--TransitionDuration);
|
|
21522
|
+
}
|
|
21423
21523
|
|
|
21424
21524
|
.pf-v6-c-nav__section {
|
|
21425
21525
|
row-gap: var(--pf-v6-c-nav__section--RowGap, var(--pf-v6-c-nav__list--RowGap));
|
|
@@ -21481,6 +21581,10 @@ ul.pf-v6-c-list {
|
|
|
21481
21581
|
color: var(--pf-v6-c-nav__link-icon--Color);
|
|
21482
21582
|
}
|
|
21483
21583
|
|
|
21584
|
+
.pf-v6-c-nav__link-text {
|
|
21585
|
+
font-size: var(--pf-v6-c-nav__link-text--FontSize, inherit);
|
|
21586
|
+
}
|
|
21587
|
+
|
|
21484
21588
|
.pf-v6-c-nav__toggle {
|
|
21485
21589
|
flex: none;
|
|
21486
21590
|
align-self: start;
|
|
@@ -21536,6 +21640,7 @@ ul.pf-v6-c-list {
|
|
|
21536
21640
|
}
|
|
21537
21641
|
|
|
21538
21642
|
.pf-v6-c-nav:where(.pf-m-horizontal) {
|
|
21643
|
+
--pf-v6-c-nav__item--accent--content: none;
|
|
21539
21644
|
padding: 0;
|
|
21540
21645
|
overflow: hidden;
|
|
21541
21646
|
}
|
|
@@ -21901,6 +22006,7 @@ ul.pf-v6-c-list {
|
|
|
21901
22006
|
--pf-v6-c-page--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
|
21902
22007
|
--pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome);
|
|
21903
22008
|
--pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
|
|
22009
|
+
--pf-v6-c-page__dock--ZIndex: var(--pf-t--global--z-index--md);
|
|
21904
22010
|
--pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
|
|
21905
22011
|
--pf-v6-c-page__sidebar--Width--base: 18.125rem;
|
|
21906
22012
|
--pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
|
|
@@ -22008,6 +22114,9 @@ ul.pf-v6-c-list {
|
|
|
22008
22114
|
--pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
|
|
22009
22115
|
--pf-v6-c-page__drawer--c-drawer--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
22010
22116
|
--pf-v6-c-page__drawer--c-drawer--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
|
|
22117
|
+
--pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
|
|
22118
|
+
--pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--lg);
|
|
22119
|
+
--pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
|
|
22011
22120
|
}
|
|
22012
22121
|
@media screen and (prefers-reduced-motion: no-preference) {
|
|
22013
22122
|
.pf-v6-c-page {
|
|
@@ -22050,6 +22159,16 @@ ul.pf-v6-c-list {
|
|
|
22050
22159
|
grid-template-columns: var(--pf-v6-c-page__sidebar--Width) 1fr;
|
|
22051
22160
|
}
|
|
22052
22161
|
}
|
|
22162
|
+
.pf-v6-c-page.pf-m-dock {
|
|
22163
|
+
--pf-v6-c-page--masthead--main-container--GridArea: main;
|
|
22164
|
+
--pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page--m-dock__main-container--MaxHeight);
|
|
22165
|
+
--pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page--m-dock__main-container--MarginBlockStart);
|
|
22166
|
+
--pf-v6-c-page__main-container--MarginInlineStart: 0;
|
|
22167
|
+
grid-template-areas: "dock main";
|
|
22168
|
+
grid-template-rows: auto;
|
|
22169
|
+
grid-template-columns: auto 1fr;
|
|
22170
|
+
column-gap: var(--pf-v6-c-page--m-dock--ColumnGap);
|
|
22171
|
+
}
|
|
22053
22172
|
.pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
|
|
22054
22173
|
--pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
|
|
22055
22174
|
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
|
|
@@ -22106,6 +22225,11 @@ ul.pf-v6-c-list {
|
|
|
22106
22225
|
}
|
|
22107
22226
|
}
|
|
22108
22227
|
|
|
22228
|
+
.pf-v6-c-page__dock {
|
|
22229
|
+
z-index: var(--pf-v6-c-page__dock--ZIndex);
|
|
22230
|
+
grid-area: dock;
|
|
22231
|
+
}
|
|
22232
|
+
|
|
22109
22233
|
.pf-v6-c-page__sidebar {
|
|
22110
22234
|
z-index: var(--pf-v6-c-page__sidebar--ZIndex);
|
|
22111
22235
|
display: flex;
|
|
@@ -22409,6 +22533,7 @@ ul.pf-v6-c-list {
|
|
|
22409
22533
|
flex-direction: column;
|
|
22410
22534
|
align-self: var(--pf-v6-c-page__main-container--AlignSelf);
|
|
22411
22535
|
max-height: var(--pf-v6-c-page__main-container--MaxHeight);
|
|
22536
|
+
margin-block-start: var(--pf-v6-c-page__main-container--MarginBlockStart, 0);
|
|
22412
22537
|
margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
|
|
22413
22538
|
margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
|
|
22414
22539
|
background: var(--pf-v6-c-page__main-container--BackgroundColor);
|
|
@@ -30442,6 +30567,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
30442
30567
|
--pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
30443
30568
|
--pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
30444
30569
|
--pf-v6-c-toolbar--m-sticky--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
|
|
30570
|
+
--pf-v6-c-toolbar--m-vertical--Width: fit-content;
|
|
30445
30571
|
--pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
|
|
30446
30572
|
--pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
|
|
30447
30573
|
--pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
|
|
@@ -30645,6 +30771,16 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
30645
30771
|
.pf-v6-c-toolbar.pf-m-no-background {
|
|
30646
30772
|
--pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-no-background--BackgroundColor);
|
|
30647
30773
|
}
|
|
30774
|
+
.pf-v6-c-toolbar.pf-m-vertical {
|
|
30775
|
+
--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart: auto;
|
|
30776
|
+
--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart: 0;
|
|
30777
|
+
--pf-v6-c-toolbar--PaddingBlockEnd: 0;
|
|
30778
|
+
--pf-v6-c-toolbar--Width: var(--pf-v6-c-toolbar--m-vertical--Width);
|
|
30779
|
+
}
|
|
30780
|
+
.pf-v6-c-toolbar.pf-m-vertical :is(.pf-v6-c-toolbar__group, .pf-v6-c-toolbar__item, .pf-v6-c-toolbar__content-section) {
|
|
30781
|
+
flex-direction: column;
|
|
30782
|
+
align-items: center;
|
|
30783
|
+
}
|
|
30648
30784
|
|
|
30649
30785
|
.pf-v6-c-toolbar__item {
|
|
30650
30786
|
--pf-v6-c-toolbar__item--Width--base: var(--pf-v6-c-toolbar__item--Width);
|
|
@@ -30724,6 +30860,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
30724
30860
|
row-gap: var(--pf-v6-c-toolbar__group--RowGap);
|
|
30725
30861
|
column-gap: var(--pf-v6-c-toolbar__group--ColumnGap);
|
|
30726
30862
|
}
|
|
30863
|
+
.pf-v6-c-toolbar.pf-m-vertical .pf-v6-c-toolbar__group {
|
|
30864
|
+
row-gap: var(--pf-v6-c-toolbar__group--ColumnGap);
|
|
30865
|
+
}
|
|
30727
30866
|
.pf-v6-c-toolbar__group.pf-m-filter-group {
|
|
30728
30867
|
column-gap: var(--pf-v6-c-toolbar__group--m-filter-group--ColumnGap);
|
|
30729
30868
|
}
|
|
@@ -30735,9 +30874,15 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
30735
30874
|
.pf-v6-c-toolbar__group.pf-m-action-group {
|
|
30736
30875
|
column-gap: var(--pf-v6-c-toolbar__group--m-action-group--ColumnGap);
|
|
30737
30876
|
}
|
|
30877
|
+
.pf-v6-c-toolbar.pf-m-vertical .pf-v6-c-toolbar__group.pf-m-action-group {
|
|
30878
|
+
row-gap: var(--pf-v6-c-toolbar__group--m-action-group--ColumnGap);
|
|
30879
|
+
}
|
|
30738
30880
|
.pf-v6-c-toolbar__group.pf-m-action-group-plain {
|
|
30739
30881
|
column-gap: var(--pf-v6-c-toolbar__group--m-action-group-plain--ColumnGap);
|
|
30740
30882
|
}
|
|
30883
|
+
.pf-v6-c-toolbar.pf-m-vertical .pf-v6-c-toolbar__group.pf-m-action-group-plain {
|
|
30884
|
+
row-gap: var(--pf-v6-c-toolbar__group--m-action-group-plain--ColumnGap);
|
|
30885
|
+
}
|
|
30741
30886
|
.pf-v6-c-toolbar__group.pf-m-action-group-inline {
|
|
30742
30887
|
flex-wrap: wrap;
|
|
30743
30888
|
column-gap: var(--pf-v6-c-toolbar__group--m-action-group-inline--ColumnGap);
|
|
@@ -30814,7 +30959,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
30814
30959
|
}
|
|
30815
30960
|
.pf-v6-c-toolbar__group.pf-m-align-end,
|
|
30816
30961
|
.pf-v6-c-toolbar__item.pf-m-align-end {
|
|
30817
|
-
margin-
|
|
30962
|
+
margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
|
|
30963
|
+
margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
|
|
30818
30964
|
}
|
|
30819
30965
|
.pf-v6-c-toolbar__group.pf-m-flex-grow,
|
|
30820
30966
|
.pf-v6-c-toolbar__item.pf-m-flex-grow {
|
|
@@ -31069,7 +31215,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
31069
31215
|
}
|
|
31070
31216
|
.pf-v6-c-toolbar__group.pf-m-align-end-on-sm,
|
|
31071
31217
|
.pf-v6-c-toolbar__item.pf-m-align-end-on-sm {
|
|
31072
|
-
margin-
|
|
31218
|
+
margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
|
|
31219
|
+
margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
|
|
31073
31220
|
}
|
|
31074
31221
|
.pf-v6-c-toolbar__group.pf-m-flex-grow-on-sm,
|
|
31075
31222
|
.pf-v6-c-toolbar__item.pf-m-flex-grow-on-sm {
|
|
@@ -31321,7 +31468,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
31321
31468
|
}
|
|
31322
31469
|
.pf-v6-c-toolbar__group.pf-m-align-end-on-md,
|
|
31323
31470
|
.pf-v6-c-toolbar__item.pf-m-align-end-on-md {
|
|
31324
|
-
margin-
|
|
31471
|
+
margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
|
|
31472
|
+
margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
|
|
31325
31473
|
}
|
|
31326
31474
|
.pf-v6-c-toolbar__group.pf-m-flex-grow-on-md,
|
|
31327
31475
|
.pf-v6-c-toolbar__item.pf-m-flex-grow-on-md {
|
|
@@ -31573,7 +31721,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
31573
31721
|
}
|
|
31574
31722
|
.pf-v6-c-toolbar__group.pf-m-align-end-on-lg,
|
|
31575
31723
|
.pf-v6-c-toolbar__item.pf-m-align-end-on-lg {
|
|
31576
|
-
margin-
|
|
31724
|
+
margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
|
|
31725
|
+
margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
|
|
31577
31726
|
}
|
|
31578
31727
|
.pf-v6-c-toolbar__group.pf-m-flex-grow-on-lg,
|
|
31579
31728
|
.pf-v6-c-toolbar__item.pf-m-flex-grow-on-lg {
|
|
@@ -31825,7 +31974,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
31825
31974
|
}
|
|
31826
31975
|
.pf-v6-c-toolbar__group.pf-m-align-end-on-xl,
|
|
31827
31976
|
.pf-v6-c-toolbar__item.pf-m-align-end-on-xl {
|
|
31828
|
-
margin-
|
|
31977
|
+
margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
|
|
31978
|
+
margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
|
|
31829
31979
|
}
|
|
31830
31980
|
.pf-v6-c-toolbar__group.pf-m-flex-grow-on-xl,
|
|
31831
31981
|
.pf-v6-c-toolbar__item.pf-m-flex-grow-on-xl {
|
|
@@ -32077,7 +32227,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
32077
32227
|
}
|
|
32078
32228
|
.pf-v6-c-toolbar__group.pf-m-align-end-on-2xl,
|
|
32079
32229
|
.pf-v6-c-toolbar__item.pf-m-align-end-on-2xl {
|
|
32080
|
-
margin-
|
|
32230
|
+
margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
|
|
32231
|
+
margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
|
|
32081
32232
|
}
|
|
32082
32233
|
.pf-v6-c-toolbar__group.pf-m-flex-grow-on-2xl,
|
|
32083
32234
|
.pf-v6-c-toolbar__item.pf-m-flex-grow-on-2xl {
|