@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
|
@@ -12283,16 +12283,16 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
|
|
|
12283
12283
|
--pf-v6-c-compass__main-header-content--RowGap: var(--pf-t--global--spacer--sm);
|
|
12284
12284
|
--pf-v6-c-compass__main-header-content--ColumnGap: var(--pf-t--global--spacer--md);
|
|
12285
12285
|
--pf-v6-c-compass__main-footer--MarginBlockStart: calc(var(--pf-v6-c-compass__main--RowGap) * -1 + var(--pf-v6-c-compass--Gap));
|
|
12286
|
-
--pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
|
|
12287
|
-
--pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
|
|
12288
|
-
--pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
|
|
12289
12286
|
--pf-v6-c-compass__panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
|
|
12290
12287
|
--pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
|
|
12291
12288
|
--pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-t--global--spacer--inset--page-chrome);
|
|
12292
12289
|
--pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
|
|
12293
12290
|
--pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
|
|
12294
|
-
--pf-v6-c-compass__panel--
|
|
12291
|
+
--pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
|
|
12292
|
+
--pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
|
|
12295
12293
|
--pf-v6-c-compass__panel--BorderColor: var(--pf-t--global--border--color--alt);
|
|
12294
|
+
--pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
|
|
12295
|
+
--pf-v6-c-compass__panel--BorderWidth: var(--pf-t--global--border--width--regular);
|
|
12296
12296
|
--pf-v6-c-compass__panel--BoxShadow: var(--pf-t--global--box-shadow--md);
|
|
12297
12297
|
--pf-v6-c-compass__message-bar--Width: 450px;
|
|
12298
12298
|
--pf-v6-c-compass__message-bar--MinWidth: 300px;
|
|
@@ -12343,6 +12343,16 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
|
|
|
12343
12343
|
background-image: var(--pf-v6-c-compass--BackgroundImage);
|
|
12344
12344
|
background-size: cover;
|
|
12345
12345
|
}
|
|
12346
|
+
.pf-v6-c-compass.pf-m-dock {
|
|
12347
|
+
grid-template-areas: "dock main";
|
|
12348
|
+
grid-template-rows: auto;
|
|
12349
|
+
grid-template-columns: auto 1fr;
|
|
12350
|
+
align-items: stretch;
|
|
12351
|
+
padding: 0;
|
|
12352
|
+
}
|
|
12353
|
+
.pf-v6-c-compass.pf-m-dock .pf-v6-c-compass__main {
|
|
12354
|
+
padding: var(--pf-v6-c-compass--Padding);
|
|
12355
|
+
}
|
|
12346
12356
|
:root:where(.pf-v6-theme-dark) .pf-v6-c-compass {
|
|
12347
12357
|
--pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--dark);
|
|
12348
12358
|
}
|
|
@@ -18997,6 +19007,15 @@ ul.pf-v6-c-list {
|
|
|
18997
19007
|
--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn: 2;
|
|
18998
19008
|
--pf-v6-c-masthead--m-display-inline__main--Display: flex;
|
|
18999
19009
|
--pf-v6-c-masthead--m-display-inline__main--ColumnGap: var(--pf-t--global--spacer--md);
|
|
19010
|
+
--pf-v6-c-masthead--m-docked--GridTemplateRows: min-content 1fr;
|
|
19011
|
+
--pf-v6-c-masthead--m-docked--RowGap: var(--pf-t--global--spacer--gutter--default);
|
|
19012
|
+
--pf-v6-c-masthead--m-docked--PaddingBlockStart: var(--pf-t--global--spacer--lg);
|
|
19013
|
+
--pf-v6-c-masthead--m-docked--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
|
|
19014
|
+
--pf-v6-c-masthead--m-docked--PaddingInlineStart: var(--pf-t--global--spacer--sm);
|
|
19015
|
+
--pf-v6-c-masthead--m-docked--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
|
|
19016
|
+
--pf-v6-c-masthead--m-docked--BackgroundColor: var(--pf-t--global--background--color--glass--default);
|
|
19017
|
+
--pf-v6-c-masthead--m-docked--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
|
|
19018
|
+
--pf-v6-c-masthead--m-docked--c-toolbar--Height: 100%;
|
|
19000
19019
|
--pf-v6-c-masthead__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
|
|
19001
19020
|
--pf-v6-c-masthead__expandable-content--BorderBlockStart: var(--pf-v6-c-masthead--BorderWidth) solid var(--pf-v6-c-masthead--BorderColor);
|
|
19002
19021
|
--pf-v6-c-masthead--c-toolbar--Width: 100%;
|
|
@@ -19017,6 +19036,7 @@ ul.pf-v6-c-list {
|
|
|
19017
19036
|
--pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
|
|
19018
19037
|
--pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
|
|
19019
19038
|
display: grid;
|
|
19039
|
+
grid-template-rows: var(--pf-v6-c-masthead--GridTemplateRows);
|
|
19020
19040
|
grid-template-columns: var(--pf-v6-c-masthead--GridTemplateColumns);
|
|
19021
19041
|
row-gap: var(--pf-v6-c-masthead--RowGap);
|
|
19022
19042
|
column-gap: var(--pf-v6-c-masthead--ColumnGap);
|
|
@@ -19049,6 +19069,36 @@ ul.pf-v6-c-list {
|
|
|
19049
19069
|
--pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
|
|
19050
19070
|
}
|
|
19051
19071
|
}
|
|
19072
|
+
.pf-v6-c-masthead.pf-m-docked {
|
|
19073
|
+
--pf-v6-c-masthead--BackgroundColor: var(--pf-v6-c-masthead--m-docked--BackgroundColor);
|
|
19074
|
+
--pf-v6-c-masthead--GridTemplateRows: var(--pf-v6-c-masthead--m-docked--GridTemplateRows);
|
|
19075
|
+
--pf-v6-c-masthead--PaddingBlockStart: var(--pf-v6-c-masthead--m-docked--PaddingBlockStart);
|
|
19076
|
+
--pf-v6-c-masthead--PaddingBlockEnd: var(--pf-v6-c-masthead--m-docked--PaddingBlockEnd);
|
|
19077
|
+
--pf-v6-c-masthead--PaddingInlineStart: var(--pf-v6-c-masthead--m-docked--PaddingInlineStart);
|
|
19078
|
+
--pf-v6-c-masthead--PaddingInlineEnd: var(--pf-v6-c-masthead--m-docked--PaddingInlineEnd);
|
|
19079
|
+
--pf-v6-c-masthead--GridTemplateColumns: auto;
|
|
19080
|
+
--pf-v6-c-masthead--RowGap: var(--pf-v6-c-masthead--m-docked--RowGap);
|
|
19081
|
+
--pf-v6-c-masthead--m-display-inline--breakpoint--xl--GridTemplateColumns: auto;
|
|
19082
|
+
--pf-v6-c-masthead__main--GridColumn: auto;
|
|
19083
|
+
--pf-v6-c-masthead__content--GridColumn: auto;
|
|
19084
|
+
--pf-v6-c-masthead__logo--Width: auto;
|
|
19085
|
+
--pf-v6-c-masthead__main--MarginInlineEnd: 0;
|
|
19086
|
+
display: flex;
|
|
19087
|
+
flex-direction: column;
|
|
19088
|
+
align-items: center;
|
|
19089
|
+
width: fit-content;
|
|
19090
|
+
height: 100%;
|
|
19091
|
+
backdrop-filter: var(--pf-v6-c-masthead--m-docked--BackdropFilter);
|
|
19092
|
+
}
|
|
19093
|
+
.pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__content {
|
|
19094
|
+
flex-direction: column;
|
|
19095
|
+
flex-grow: 1;
|
|
19096
|
+
align-self: revert;
|
|
19097
|
+
}
|
|
19098
|
+
.pf-v6-c-masthead.pf-m-docked .pf-v6-c-toolbar {
|
|
19099
|
+
--pf-v6-c-masthead--c-toolbar--Width: fit-content;
|
|
19100
|
+
height: var(--pf-v6-c-masthead--m-docked--c-toolbar--Height);
|
|
19101
|
+
}
|
|
19052
19102
|
.pf-v6-c-masthead .pf-v6-c-toolbar__content-section {
|
|
19053
19103
|
flex-wrap: nowrap;
|
|
19054
19104
|
min-width: 0;
|
|
@@ -21097,6 +21147,15 @@ ul.pf-v6-c-list {
|
|
|
21097
21147
|
--pf-v6-c-nav__section-title--PaddingInlineStart: var(--pf-v6-c-nav__link--PaddingInlineStart);
|
|
21098
21148
|
--pf-v6-c-nav__section-title--PaddingInlineEnd: var(--pf-v6-c-nav__link--PaddingInlineEnd);
|
|
21099
21149
|
--pf-v6-c-nav__item--RowGap: var(--pf-v6-c-nav__list--RowGap);
|
|
21150
|
+
--pf-v6-c-nav__item--accent--size: var(--pf-t--global--border--width--extra-strong);
|
|
21151
|
+
--pf-v6-c-nav__item--accent--color: var(--pf-t--global--border--color--clicked);
|
|
21152
|
+
--pf-v6-c-nav__item--accent--offset: calc(var(--pf-t--global--spacer--sm) * -1);
|
|
21153
|
+
--pf-v6-c-nav__item--accent--BorderRadius: var(--pf-t--global--border--radius--small);
|
|
21154
|
+
--pf-v6-c-nav__item--accent--ScaleY: 0;
|
|
21155
|
+
--pf-v6-c-nav__item--current--accent--ScaleY: 1;
|
|
21156
|
+
--pf-v6-c-nav__item--accent--TransitionDuration: 0;
|
|
21157
|
+
--pf-v6-c-nav__item--current--accent--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
|
|
21158
|
+
--pf-v6-c-nav__item--accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
|
|
21100
21159
|
--pf-v6-c-nav__item__toggle-icon--Rotate: 0;
|
|
21101
21160
|
--pf-v6-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
|
|
21102
21161
|
--pf-v6-c-nav__item__toggle-icon--TransitionDuration--transform: var(--pf-t--global--motion--duration--icon--default);
|
|
@@ -21121,6 +21180,7 @@ ul.pf-v6-c-list {
|
|
|
21121
21180
|
--pf-v6-c-nav__link--m-current--TransitionTimingFunction--color: var(--pf-t--global--motion--timing-function--default);
|
|
21122
21181
|
--pf-v6-c-nav__link-icon--Color: var(--pf-t--global--icon--color--subtle);
|
|
21123
21182
|
--pf-v6-c-nav__link--m-current__link-icon--Color: var(--pf-t--global--icon--color--regular);
|
|
21183
|
+
--pf-v6-c-nav__link-text--FontSize: initial;
|
|
21124
21184
|
--pf-v6-c-nav__subnav--RowGap: var(--pf-t--global--border--width--extra-strong);
|
|
21125
21185
|
--pf-v6-c-nav__subnav--PaddingBlockStart: var(--pf-v6-c-nav__item--RowGap);
|
|
21126
21186
|
--pf-v6-c-nav__subnav--PaddingBlockEnd: var(--pf-v6-c-nav__item--RowGap);
|
|
@@ -21161,6 +21221,11 @@ ul.pf-v6-c-list {
|
|
|
21161
21221
|
--pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
|
|
21162
21222
|
--pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
|
|
21163
21223
|
--pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
|
|
21224
|
+
--pf-v6-c-nav--m-docked__list--RowGap: var(--pf-t--global--spacer--gap--action-to-action--plain);
|
|
21225
|
+
--pf-v6-c-nav--m-docked__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
|
|
21226
|
+
--pf-v6-c-nav--m-docked__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
|
|
21227
|
+
--pf-v6-c-nav--m-docked__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
|
|
21228
|
+
--pf-v6-c-nav--m-docked__link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
|
|
21164
21229
|
}
|
|
21165
21230
|
@media screen and (prefers-reduced-motion: no-preference) {
|
|
21166
21231
|
.pf-v6-c-nav {
|
|
@@ -21202,6 +21267,21 @@ ul.pf-v6-c-list {
|
|
|
21202
21267
|
.pf-v6-c-nav.pf-m-fill {
|
|
21203
21268
|
flex-grow: 1;
|
|
21204
21269
|
}
|
|
21270
|
+
.pf-v6-c-nav.pf-m-docked {
|
|
21271
|
+
--pf-v6-c-nav--PaddingBlockStart: 0;
|
|
21272
|
+
--pf-v6-c-nav--PaddingBlockEnd: 0;
|
|
21273
|
+
--pf-v6-c-nav__list--RowGap: var(--pf-v6-c-nav--m-docked__list--RowGap);
|
|
21274
|
+
--pf-v6-c-nav__link--PaddingInlineStart: var(--pf-v6-c-nav--m-docked__link--PaddingInlineStart);
|
|
21275
|
+
--pf-v6-c-nav__link--PaddingInlineEnd: var(--pf-v6-c-nav--m-docked__link--PaddingInlineEnd);
|
|
21276
|
+
--pf-v6-c-nav__link--hover--BackgroundColor: var(--pf-v6-c-nav--m-docked__link--hover--BackgroundColor);
|
|
21277
|
+
--pf-v6-c-nav__link--m-current--BackgroundColor: var(--pf-v6-c-nav--m-docked__link--m-current--BackgroundColor);
|
|
21278
|
+
width: fit-content;
|
|
21279
|
+
}
|
|
21280
|
+
.pf-v6-c-nav.pf-m-docked .pf-v6-c-nav__link-icon {
|
|
21281
|
+
position: relative;
|
|
21282
|
+
align-self: center;
|
|
21283
|
+
min-width: 1lh;
|
|
21284
|
+
}
|
|
21205
21285
|
.pf-v6-c-nav .pf-v6-c-menu {
|
|
21206
21286
|
--pf-v6-c-menu--MinWidth: 100%;
|
|
21207
21287
|
}
|
|
@@ -21265,14 +21345,34 @@ ul.pf-v6-c-list {
|
|
|
21265
21345
|
}
|
|
21266
21346
|
|
|
21267
21347
|
.pf-v6-c-nav__item {
|
|
21348
|
+
position: relative;
|
|
21268
21349
|
scroll-snap-align: var(--pf-v6-c-nav__item--ScrollSnapAlign);
|
|
21269
21350
|
}
|
|
21351
|
+
.pf-v6-c-nav__item::before {
|
|
21352
|
+
position: absolute;
|
|
21353
|
+
inset-block-start: 0;
|
|
21354
|
+
inset-block-end: 0;
|
|
21355
|
+
inset-inline-start: var(--pf-v6-c-nav__item--accent--offset);
|
|
21356
|
+
width: var(--pf-v6-c-nav__item--accent--size);
|
|
21357
|
+
pointer-events: none;
|
|
21358
|
+
content: var(--pf-v6-c-nav__item--accent--content, "");
|
|
21359
|
+
background-color: var(--pf-v6-c-nav__item--accent--color);
|
|
21360
|
+
border-radius: var(--pf-v6-c-nav__item--accent--BorderRadius);
|
|
21361
|
+
transition-timing-function: var(--pf-v6-c-nav__item--accent--TransitionTimingFunction);
|
|
21362
|
+
transition-duration: var(--pf-v6-c-nav__item--accent--TransitionDuration);
|
|
21363
|
+
transition-property: scale;
|
|
21364
|
+
scale: 1 var(--pf-v6-c-nav__item--accent--ScaleY);
|
|
21365
|
+
}
|
|
21270
21366
|
.pf-v6-c-nav__item > .pf-v6-c-nav__link[button] {
|
|
21271
21367
|
margin-block-end: var(--pf-v6-c-nav__button--RowGap--row-offset);
|
|
21272
21368
|
}
|
|
21273
21369
|
.pf-v6-c-nav__item.pf-m-expanded:last-child > .pf-v6-c-nav__subnav {
|
|
21274
21370
|
margin-block-end: calc(var(--pf-v6-c-nav__subnav--PaddingBlockEnd) * -1);
|
|
21275
21371
|
}
|
|
21372
|
+
.pf-v6-c-nav__item:has(> .pf-v6-c-nav__link.pf-m-current) {
|
|
21373
|
+
--pf-v6-c-nav__item--accent--ScaleY: var(--pf-v6-c-nav__item--current--accent--ScaleY);
|
|
21374
|
+
--pf-v6-c-nav__item--accent--TransitionDuration: var(--pf-v6-c-nav__item--current--accent--TransitionDuration);
|
|
21375
|
+
}
|
|
21276
21376
|
|
|
21277
21377
|
.pf-v6-c-nav__section {
|
|
21278
21378
|
row-gap: var(--pf-v6-c-nav__section--RowGap, var(--pf-v6-c-nav__list--RowGap));
|
|
@@ -21334,6 +21434,10 @@ ul.pf-v6-c-list {
|
|
|
21334
21434
|
color: var(--pf-v6-c-nav__link-icon--Color);
|
|
21335
21435
|
}
|
|
21336
21436
|
|
|
21437
|
+
.pf-v6-c-nav__link-text {
|
|
21438
|
+
font-size: var(--pf-v6-c-nav__link-text--FontSize, inherit);
|
|
21439
|
+
}
|
|
21440
|
+
|
|
21337
21441
|
.pf-v6-c-nav__toggle {
|
|
21338
21442
|
flex: none;
|
|
21339
21443
|
align-self: start;
|
|
@@ -21389,6 +21493,7 @@ ul.pf-v6-c-list {
|
|
|
21389
21493
|
}
|
|
21390
21494
|
|
|
21391
21495
|
.pf-v6-c-nav:where(.pf-m-horizontal) {
|
|
21496
|
+
--pf-v6-c-nav__item--accent--content: none;
|
|
21392
21497
|
padding: 0;
|
|
21393
21498
|
overflow: hidden;
|
|
21394
21499
|
}
|
|
@@ -21754,6 +21859,7 @@ ul.pf-v6-c-list {
|
|
|
21754
21859
|
--pf-v6-c-page--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
|
21755
21860
|
--pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome);
|
|
21756
21861
|
--pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
|
|
21862
|
+
--pf-v6-c-page__dock--ZIndex: var(--pf-t--global--z-index--md);
|
|
21757
21863
|
--pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
|
|
21758
21864
|
--pf-v6-c-page__sidebar--Width--base: 18.125rem;
|
|
21759
21865
|
--pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
|
|
@@ -21861,6 +21967,9 @@ ul.pf-v6-c-list {
|
|
|
21861
21967
|
--pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
|
|
21862
21968
|
--pf-v6-c-page__drawer--c-drawer--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
21863
21969
|
--pf-v6-c-page__drawer--c-drawer--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
|
|
21970
|
+
--pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
|
|
21971
|
+
--pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--lg);
|
|
21972
|
+
--pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
|
|
21864
21973
|
}
|
|
21865
21974
|
@media screen and (prefers-reduced-motion: no-preference) {
|
|
21866
21975
|
.pf-v6-c-page {
|
|
@@ -21903,6 +22012,16 @@ ul.pf-v6-c-list {
|
|
|
21903
22012
|
grid-template-columns: var(--pf-v6-c-page__sidebar--Width) 1fr;
|
|
21904
22013
|
}
|
|
21905
22014
|
}
|
|
22015
|
+
.pf-v6-c-page.pf-m-dock {
|
|
22016
|
+
--pf-v6-c-page--masthead--main-container--GridArea: main;
|
|
22017
|
+
--pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page--m-dock__main-container--MaxHeight);
|
|
22018
|
+
--pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page--m-dock__main-container--MarginBlockStart);
|
|
22019
|
+
--pf-v6-c-page__main-container--MarginInlineStart: 0;
|
|
22020
|
+
grid-template-areas: "dock main";
|
|
22021
|
+
grid-template-rows: auto;
|
|
22022
|
+
grid-template-columns: auto 1fr;
|
|
22023
|
+
column-gap: var(--pf-v6-c-page--m-dock--ColumnGap);
|
|
22024
|
+
}
|
|
21906
22025
|
.pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
|
|
21907
22026
|
--pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
|
|
21908
22027
|
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
|
|
@@ -21959,6 +22078,11 @@ ul.pf-v6-c-list {
|
|
|
21959
22078
|
}
|
|
21960
22079
|
}
|
|
21961
22080
|
|
|
22081
|
+
.pf-v6-c-page__dock {
|
|
22082
|
+
z-index: var(--pf-v6-c-page__dock--ZIndex);
|
|
22083
|
+
grid-area: dock;
|
|
22084
|
+
}
|
|
22085
|
+
|
|
21962
22086
|
.pf-v6-c-page__sidebar {
|
|
21963
22087
|
z-index: var(--pf-v6-c-page__sidebar--ZIndex);
|
|
21964
22088
|
display: flex;
|
|
@@ -22262,6 +22386,7 @@ ul.pf-v6-c-list {
|
|
|
22262
22386
|
flex-direction: column;
|
|
22263
22387
|
align-self: var(--pf-v6-c-page__main-container--AlignSelf);
|
|
22264
22388
|
max-height: var(--pf-v6-c-page__main-container--MaxHeight);
|
|
22389
|
+
margin-block-start: var(--pf-v6-c-page__main-container--MarginBlockStart, 0);
|
|
22265
22390
|
margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
|
|
22266
22391
|
margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
|
|
22267
22392
|
background: var(--pf-v6-c-page__main-container--BackgroundColor);
|
|
@@ -30295,6 +30420,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
30295
30420
|
--pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
30296
30421
|
--pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
30297
30422
|
--pf-v6-c-toolbar--m-sticky--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
|
|
30423
|
+
--pf-v6-c-toolbar--m-vertical--Width: fit-content;
|
|
30298
30424
|
--pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
|
|
30299
30425
|
--pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
|
|
30300
30426
|
--pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
|
|
@@ -30498,6 +30624,16 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
30498
30624
|
.pf-v6-c-toolbar.pf-m-no-background {
|
|
30499
30625
|
--pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-no-background--BackgroundColor);
|
|
30500
30626
|
}
|
|
30627
|
+
.pf-v6-c-toolbar.pf-m-vertical {
|
|
30628
|
+
--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart: auto;
|
|
30629
|
+
--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart: 0;
|
|
30630
|
+
--pf-v6-c-toolbar--PaddingBlockEnd: 0;
|
|
30631
|
+
--pf-v6-c-toolbar--Width: var(--pf-v6-c-toolbar--m-vertical--Width);
|
|
30632
|
+
}
|
|
30633
|
+
.pf-v6-c-toolbar.pf-m-vertical :is(.pf-v6-c-toolbar__group, .pf-v6-c-toolbar__item, .pf-v6-c-toolbar__content-section) {
|
|
30634
|
+
flex-direction: column;
|
|
30635
|
+
align-items: center;
|
|
30636
|
+
}
|
|
30501
30637
|
|
|
30502
30638
|
.pf-v6-c-toolbar__item {
|
|
30503
30639
|
--pf-v6-c-toolbar__item--Width--base: var(--pf-v6-c-toolbar__item--Width);
|
|
@@ -30577,6 +30713,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
30577
30713
|
row-gap: var(--pf-v6-c-toolbar__group--RowGap);
|
|
30578
30714
|
column-gap: var(--pf-v6-c-toolbar__group--ColumnGap);
|
|
30579
30715
|
}
|
|
30716
|
+
.pf-v6-c-toolbar.pf-m-vertical .pf-v6-c-toolbar__group {
|
|
30717
|
+
row-gap: var(--pf-v6-c-toolbar__group--ColumnGap);
|
|
30718
|
+
}
|
|
30580
30719
|
.pf-v6-c-toolbar__group.pf-m-filter-group {
|
|
30581
30720
|
column-gap: var(--pf-v6-c-toolbar__group--m-filter-group--ColumnGap);
|
|
30582
30721
|
}
|
|
@@ -30588,9 +30727,15 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
30588
30727
|
.pf-v6-c-toolbar__group.pf-m-action-group {
|
|
30589
30728
|
column-gap: var(--pf-v6-c-toolbar__group--m-action-group--ColumnGap);
|
|
30590
30729
|
}
|
|
30730
|
+
.pf-v6-c-toolbar.pf-m-vertical .pf-v6-c-toolbar__group.pf-m-action-group {
|
|
30731
|
+
row-gap: var(--pf-v6-c-toolbar__group--m-action-group--ColumnGap);
|
|
30732
|
+
}
|
|
30591
30733
|
.pf-v6-c-toolbar__group.pf-m-action-group-plain {
|
|
30592
30734
|
column-gap: var(--pf-v6-c-toolbar__group--m-action-group-plain--ColumnGap);
|
|
30593
30735
|
}
|
|
30736
|
+
.pf-v6-c-toolbar.pf-m-vertical .pf-v6-c-toolbar__group.pf-m-action-group-plain {
|
|
30737
|
+
row-gap: var(--pf-v6-c-toolbar__group--m-action-group-plain--ColumnGap);
|
|
30738
|
+
}
|
|
30594
30739
|
.pf-v6-c-toolbar__group.pf-m-action-group-inline {
|
|
30595
30740
|
flex-wrap: wrap;
|
|
30596
30741
|
column-gap: var(--pf-v6-c-toolbar__group--m-action-group-inline--ColumnGap);
|
|
@@ -30667,7 +30812,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
30667
30812
|
}
|
|
30668
30813
|
.pf-v6-c-toolbar__group.pf-m-align-end,
|
|
30669
30814
|
.pf-v6-c-toolbar__item.pf-m-align-end {
|
|
30670
|
-
margin-
|
|
30815
|
+
margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
|
|
30816
|
+
margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
|
|
30671
30817
|
}
|
|
30672
30818
|
.pf-v6-c-toolbar__group.pf-m-flex-grow,
|
|
30673
30819
|
.pf-v6-c-toolbar__item.pf-m-flex-grow {
|
|
@@ -30922,7 +31068,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
30922
31068
|
}
|
|
30923
31069
|
.pf-v6-c-toolbar__group.pf-m-align-end-on-sm,
|
|
30924
31070
|
.pf-v6-c-toolbar__item.pf-m-align-end-on-sm {
|
|
30925
|
-
margin-
|
|
31071
|
+
margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
|
|
31072
|
+
margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
|
|
30926
31073
|
}
|
|
30927
31074
|
.pf-v6-c-toolbar__group.pf-m-flex-grow-on-sm,
|
|
30928
31075
|
.pf-v6-c-toolbar__item.pf-m-flex-grow-on-sm {
|
|
@@ -31174,7 +31321,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
31174
31321
|
}
|
|
31175
31322
|
.pf-v6-c-toolbar__group.pf-m-align-end-on-md,
|
|
31176
31323
|
.pf-v6-c-toolbar__item.pf-m-align-end-on-md {
|
|
31177
|
-
margin-
|
|
31324
|
+
margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
|
|
31325
|
+
margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
|
|
31178
31326
|
}
|
|
31179
31327
|
.pf-v6-c-toolbar__group.pf-m-flex-grow-on-md,
|
|
31180
31328
|
.pf-v6-c-toolbar__item.pf-m-flex-grow-on-md {
|
|
@@ -31426,7 +31574,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
31426
31574
|
}
|
|
31427
31575
|
.pf-v6-c-toolbar__group.pf-m-align-end-on-lg,
|
|
31428
31576
|
.pf-v6-c-toolbar__item.pf-m-align-end-on-lg {
|
|
31429
|
-
margin-
|
|
31577
|
+
margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
|
|
31578
|
+
margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
|
|
31430
31579
|
}
|
|
31431
31580
|
.pf-v6-c-toolbar__group.pf-m-flex-grow-on-lg,
|
|
31432
31581
|
.pf-v6-c-toolbar__item.pf-m-flex-grow-on-lg {
|
|
@@ -31678,7 +31827,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
31678
31827
|
}
|
|
31679
31828
|
.pf-v6-c-toolbar__group.pf-m-align-end-on-xl,
|
|
31680
31829
|
.pf-v6-c-toolbar__item.pf-m-align-end-on-xl {
|
|
31681
|
-
margin-
|
|
31830
|
+
margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
|
|
31831
|
+
margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
|
|
31682
31832
|
}
|
|
31683
31833
|
.pf-v6-c-toolbar__group.pf-m-flex-grow-on-xl,
|
|
31684
31834
|
.pf-v6-c-toolbar__item.pf-m-flex-grow-on-xl {
|
|
@@ -31930,7 +32080,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
31930
32080
|
}
|
|
31931
32081
|
.pf-v6-c-toolbar__group.pf-m-align-end-on-2xl,
|
|
31932
32082
|
.pf-v6-c-toolbar__item.pf-m-align-end-on-2xl {
|
|
31933
|
-
margin-
|
|
32083
|
+
margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
|
|
32084
|
+
margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
|
|
31934
32085
|
}
|
|
31935
32086
|
.pf-v6-c-toolbar__group.pf-m-flex-grow-on-2xl,
|
|
31936
32087
|
.pf-v6-c-toolbar__item.pf-m-flex-grow-on-2xl {
|