@patternfly/patternfly 6.5.0-prerelease.54 → 6.5.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.
- package/assets/images/compass--hero-bg.png +0 -0
- package/assets/images/compass--wallpaper-dark.jpg +0 -0
- package/assets/images/compass--wallpaper-light.jpg +0 -0
- package/assets/images/glass-brand-dark.jpg +0 -0
- package/assets/images/glass-brand-dark.png +0 -0
- package/assets/images/glass-brand-light.jpg +0 -0
- package/assets/images/glass-brand-light.png +0 -0
- package/base/patternfly-variables.css +4238 -784
- package/base/patternfly-variables.scss +23 -21
- package/base/tokens/tokens-dark.scss +17 -17
- package/base/tokens/tokens-default.scss +18 -16
- package/base/tokens/tokens-glass-dark.scss +21 -4
- package/base/tokens/tokens-glass.scss +17 -4
- package/base/tokens/tokens-local.scss +4 -3
- package/base/tokens/tokens-palette.scss +1 -1
- package/base/tokens/tokens-redhat-dark.scss +432 -2
- package/base/tokens/tokens-redhat-glass-dark.scss +432 -4
- package/base/tokens/tokens-redhat-glass.scss +748 -4
- package/base/tokens/tokens-redhat-highcontrast-dark.scss +400 -3
- package/base/tokens/tokens-redhat-highcontrast.scss +635 -3
- package/base/tokens/tokens-redhat.scss +786 -2
- package/components/Accordion/accordion.css +10 -0
- package/components/Accordion/accordion.scss +11 -0
- package/components/Button/button.css +0 -14
- package/components/Button/button.scss +1 -16
- package/components/Card/card.css +13 -0
- package/components/Card/card.scss +20 -0
- package/components/Compass/compass.css +6 -6
- package/components/Compass/compass.scss +6 -6
- package/components/DataList/data-list.css +1 -1
- package/components/DataList/data-list.scss +1 -0
- package/components/Drawer/drawer.css +11 -6
- package/components/Drawer/drawer.scss +24 -11
- package/components/Login/login.css +7 -3
- package/components/Login/login.scss +7 -3
- package/components/Masthead/masthead.css +11 -3
- package/components/Masthead/masthead.scss +14 -4
- package/components/MenuToggle/menu-toggle.scss +1 -1
- package/components/Nav/nav.scss +1 -1
- package/components/Page/page.css +115 -8
- package/components/Page/page.scss +123 -11
- package/components/Panel/panel.css +14 -0
- package/components/Panel/panel.scss +18 -0
- package/components/Table/table-grid.css +4 -4
- package/components/Table/table-grid.scss +4 -4
- package/components/Table/table.css +12 -7
- package/components/Table/table.scss +13 -9
- package/components/_index.css +204 -52
- package/docs/components/Accordion/examples/Accordion.md +1 -0
- package/docs/components/Card/examples/Card.md +1 -0
- package/docs/components/DragDrop/examples/DragDrop.css +1 -1
- package/docs/components/Page/examples/Page.md +47 -37
- package/docs/components/Panel/examples/Panel.md +12 -0
- package/docs/demos/AboutModal/examples/AboutModal.md +40 -38
- package/docs/demos/Alert/examples/Alert.md +120 -114
- package/docs/demos/BackToTop/examples/BackToTop.md +40 -38
- package/docs/demos/Banner/examples/Banner.md +80 -76
- package/docs/demos/CardView/examples/CardView.md +297 -271
- package/docs/demos/Compass/examples/Compass.md +1409 -2732
- package/docs/demos/Dashboard/examples/Dashboard.md +40 -38
- package/docs/demos/DataList/examples/DataList.md +160 -152
- package/docs/demos/DescriptionList/examples/DescriptionList.md +120 -114
- package/docs/demos/Drawer/examples/Drawer.md +200 -190
- package/docs/demos/JumpLinks/examples/JumpLinks.md +240 -228
- package/docs/demos/Masthead/examples/Masthead.md +320 -304
- package/docs/demos/Modal/examples/Modal.md +240 -228
- package/docs/demos/Nav/examples/Nav.md +2302 -600
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +180 -170
- package/docs/demos/Page/examples/Page.md +606 -568
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +280 -266
- package/docs/demos/Skeleton/examples/Skeleton.md +40 -38
- package/docs/demos/Table/examples/Table.md +640 -604
- package/docs/demos/Tabs/examples/Tabs.md +240 -228
- package/docs/demos/Toolbar/examples/Toolbar.md +80 -76
- package/docs/demos/Wizard/examples/Wizard.md +360 -342
- package/package.json +1 -1
- package/patternfly-base-no-globals.css +4238 -784
- package/patternfly-base.css +4238 -784
- package/patternfly-no-globals.css +4356 -733
- package/patternfly.css +4356 -733
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/patternfly.scss +27 -0
- package/sass-utilities/scss-variables.scss +1 -1
|
@@ -180,16 +180,16 @@
|
|
|
180
180
|
|
|
181
181
|
// * Table compound expansion toggle button
|
|
182
182
|
--#{$table}__compound-expansion-toggle__button--Color: var(--pf-t--global--icon--color--brand--default);
|
|
183
|
-
--#{$table}__compound-expansion-toggle__button--BackgroundColor:
|
|
183
|
+
--#{$table}__compound-expansion-toggle__button--BackgroundColor: transparent;
|
|
184
184
|
--#{$table}__compound-expansion-toggle__button--hover--Color: var(--pf-t--global--icon--color--brand--hover);
|
|
185
|
-
--#{$table}__compound-expansion-toggle__button--hover--BackgroundColor: var(--pf-t--global--background--color--
|
|
186
|
-
--#{$table}__compound-expansion-toggle__button--expanded--BackgroundColor: var(--pf-t--global--background--color--
|
|
185
|
+
--#{$table}__compound-expansion-toggle__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
|
|
186
|
+
--#{$table}__compound-expansion-toggle__button--expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
|
|
187
187
|
|
|
188
188
|
// * Table compound expansion toggle button after
|
|
189
189
|
--#{$table}__compound-expansion-toggle__button--after--BorderColor: var(--pf-t--global--border--color--clicked);
|
|
190
190
|
--#{$table}__compound-expansion-toggle__button--after--BorderRadius: inherit;
|
|
191
191
|
--#{$table}__compound-expansion-toggle__button--after--BorderBlockStartWidth: 0;
|
|
192
|
-
--#{$table}__compound-expansion-toggle__button--hover--after--BorderBlockStartWidth:
|
|
192
|
+
--#{$table}__compound-expansion-toggle__button--hover--after--BorderBlockStartWidth: 0;
|
|
193
193
|
--#{$table}__compound-expansion-toggle--m-expanded__button--after--BorderBlockStartWidth: var(--pf-t--global--border--width--strong);
|
|
194
194
|
|
|
195
195
|
// * Compound expandable
|
|
@@ -266,6 +266,15 @@
|
|
|
266
266
|
width: 100%;
|
|
267
267
|
background-color: var(--#{$table}--BackgroundColor);
|
|
268
268
|
|
|
269
|
+
@at-root :where(.pf-v6-theme-glass) &:not(.pf-m-no-plain),
|
|
270
|
+
&.pf-m-plain {
|
|
271
|
+
--#{$table}--BackgroundColor: transparent;
|
|
272
|
+
--#{$table}__expandable-row-content--BackgroundColor: transparent;
|
|
273
|
+
--#{$table}__expandable-row-content--PaddingInlineStart: 0;
|
|
274
|
+
--#{$table}__expandable-row-content--PaddingInlineEnd: 0;
|
|
275
|
+
--#{$table}__control-row--BackgroundColor: transparent;
|
|
276
|
+
}
|
|
277
|
+
|
|
269
278
|
&.pf-m-fixed {
|
|
270
279
|
table-layout: fixed;
|
|
271
280
|
}
|
|
@@ -324,11 +333,6 @@
|
|
|
324
333
|
}
|
|
325
334
|
}
|
|
326
335
|
|
|
327
|
-
// - Table plain
|
|
328
|
-
&.pf-m-plain {
|
|
329
|
-
--#{$table}--BackgroundColor: transparent;
|
|
330
|
-
}
|
|
331
|
-
|
|
332
336
|
// - Table striped
|
|
333
337
|
// stylelint-disable
|
|
334
338
|
&.pf-m-striped:not(.pf-m-expandable) > tbody:where(.#{$table}__tbody) > tr:where(.#{$table}__tr):nth-child(odd), // regular table
|
package/components/_index.css
CHANGED
|
@@ -213,6 +213,8 @@
|
|
|
213
213
|
--pf-v6-c-accordion__toggle--PaddingInlineStart: var(--pf-t--global--spacer--md);
|
|
214
214
|
--pf-v6-c-accordion__toggle--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
|
215
215
|
--pf-v6-c-accordion__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
|
|
216
|
+
--pf-v6-c-accordion__item--m-expanded__toggle--BackgroundColor: transparent;
|
|
217
|
+
--pf-v6-c-accordion--m-plain__item--m-expanded__toggle--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
|
|
216
218
|
--pf-v6-c-accordion__toggle--BorderRadius: var(--pf-t--global--border--radius--small);
|
|
217
219
|
--pf-v6-c-accordion__toggle--ZIndex: var(--pf-t--global--z-index--xs);
|
|
218
220
|
--pf-v6-c-accordion__toggle--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
|
|
@@ -304,6 +306,13 @@
|
|
|
304
306
|
row-gap: var(--pf-v6-c-accordion--RowGap);
|
|
305
307
|
background-color: var(--pf-v6-c-accordion--BackgroundColor);
|
|
306
308
|
}
|
|
309
|
+
:where(.pf-v6-theme-glass) .pf-v6-c-accordion:not(.pf-m-no-plain), .pf-v6-c-accordion.pf-m-plain {
|
|
310
|
+
--pf-v6-c-accordion--BackgroundColor: transparent;
|
|
311
|
+
--pf-v6-c-accordion__expandable-content--BackgroundColor: transparent;
|
|
312
|
+
--pf-v6-c-accordion__item--m-expanded--BackgroundColor: transparent;
|
|
313
|
+
--pf-v6-c-accordion__item--m-expanded__toggle--BackgroundColor: var(--pf-v6-c-accordion--m-plain__item--m-expanded__toggle--BackgroundColor);
|
|
314
|
+
}
|
|
315
|
+
|
|
307
316
|
.pf-v6-c-accordion.pf-m-toggle-start {
|
|
308
317
|
--pf-v6-c-accordion__toggle--ColumnGap: var(--pf-v6-c-accordion--m-toggle-start__toggle--ColumnGap);
|
|
309
318
|
}
|
|
@@ -355,6 +364,7 @@
|
|
|
355
364
|
--pf-v6-c-accordion__item--before--Opacity: var(--pf-v6-c-accordion__item--m-expanded--before--Opacity);
|
|
356
365
|
--pf-v6-c-accordion__item--before--TranslateY: var(--pf-v6-c-accordion__item--m-expanded--before--TranslateY);
|
|
357
366
|
--pf-v6-c-accordion__item--BorderWidth: var(--pf-v6-c-accordion__item--m-expanded--BorderWidth);
|
|
367
|
+
--pf-v6-c-accordion__toggle--BackgroundColor: var(--pf-v6-c-accordion__item--m-expanded__toggle--BackgroundColor);
|
|
358
368
|
--pf-v6-c-accordion__expandable-content--TransitionDuration--slide: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide);
|
|
359
369
|
--pf-v6-c-accordion__expandable-content--TransitionDuration--fade: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--expand--fade);
|
|
360
370
|
--pf-v6-c-accordion__expandable-content--Opacity: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--Opacity);
|
|
@@ -1957,14 +1967,7 @@ button.pf-v6-c-breadcrumb__link {
|
|
|
1957
1967
|
--pf-v6-c-button--hamburger-icon--arrow--collapse--path: path("M3,7 L1,5 L3,3");
|
|
1958
1968
|
--pf-v6-c-button--hamburger-icon--bottom--collapse--path: path("M9,9 L5,9");
|
|
1959
1969
|
--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX: -1;
|
|
1960
|
-
--pf-v6-c-button--m-circle--ScaleX: 1.29;
|
|
1961
|
-
--pf-v6-c-button--m-circle--ScaleY: 1.29;
|
|
1962
1970
|
--pf-v6-c-button--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
|
|
1963
|
-
--pf-v6-c-button--m-circle--Padding--base: var(--pf-t--global--spacer--control--vertical--default);
|
|
1964
|
-
--pf-v6-c-button--m-circle--PaddingBlockStart: var(--pf-v6-c-button--m-circle--Padding--base);
|
|
1965
|
-
--pf-v6-c-button--m-circle--PaddingInlineEnd: 0;
|
|
1966
|
-
--pf-v6-c-button--m-circle--PaddingBlockEnd: var(--pf-v6-c-button--m-circle--Padding--base);
|
|
1967
|
-
--pf-v6-c-button--m-circle--PaddingInlineStart: 0;
|
|
1968
1971
|
}
|
|
1969
1972
|
|
|
1970
1973
|
.pf-v6-c-button {
|
|
@@ -2374,13 +2377,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
|
2374
2377
|
}
|
|
2375
2378
|
.pf-v6-c-button.pf-m-circle {
|
|
2376
2379
|
--pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-circle--BorderRadius);
|
|
2377
|
-
--pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-circle--PaddingBlockStart);
|
|
2378
|
-
--pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-circle--PaddingInlineEnd);
|
|
2379
|
-
--pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-circle--PaddingBlockEnd);
|
|
2380
|
-
--pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-circle--PaddingInlineStart);
|
|
2381
|
-
}
|
|
2382
|
-
.pf-v6-c-button.pf-m-circle .pf-v6-c-button__icon {
|
|
2383
|
-
scale: var(--pf-v6-c-button--m-circle--ScaleX) var(--pf-v6-c-button--m-circle--ScaleY);
|
|
2384
2380
|
}
|
|
2385
2381
|
.pf-v6-c-button:hover, .pf-v6-c-button:focus {
|
|
2386
2382
|
--pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color);
|
|
@@ -2891,6 +2887,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
|
2891
2887
|
--pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
|
|
2892
2888
|
--pf-v6-c-card--m-as-tile--BackgroundColor: var(--pf-t--global--background--color--control--default);
|
|
2893
2889
|
--pf-v6-c-card--m-as-tile--BorderColor: var(--pf-t--global--border--color--control--default);
|
|
2890
|
+
--pf-v6-c-card--m-glass--BorderColor: var(--pf-t--global--border--color--glass--default);
|
|
2891
|
+
--pf-v6-c-card--m-glass--BorderWidth: var(--pf-t--global--border--width--glass--default);
|
|
2892
|
+
--pf-v6-c-card--m-glass--BoxShadow: var(--pf-t--global--box-shadow--glass--default);
|
|
2893
|
+
--pf-v6-c-card--m-glass--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
|
|
2894
|
+
--pf-v6-c-card--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
|
|
2894
2895
|
}
|
|
2895
2896
|
|
|
2896
2897
|
.pf-v6-c-card {
|
|
@@ -3003,6 +3004,14 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
|
3003
3004
|
.pf-v6-c-card > .pf-v6-c-divider + .pf-v6-c-card__header, .pf-v6-c-card > .pf-v6-c-divider + .pf-v6-c-card__title, .pf-v6-c-card > .pf-v6-c-divider + .pf-v6-c-card__body, .pf-v6-c-card > .pf-v6-c-divider + .pf-v6-c-card__footer {
|
|
3004
3005
|
padding-block-start: var(--pf-v6-c-card--c-divider--child--PaddingBlockStart);
|
|
3005
3006
|
}
|
|
3007
|
+
.pf-v6-c-card.pf-m-glass {
|
|
3008
|
+
--pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-glass--BackgroundColor);
|
|
3009
|
+
--pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-glass--BorderColor);
|
|
3010
|
+
--pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-glass--BorderWidth);
|
|
3011
|
+
--pf-v6-c-card--BorderStyle: solid;
|
|
3012
|
+
--pf-v6-c-card--BoxShadow: var(--pf-v6-c-card--m-glass--BoxShadow);
|
|
3013
|
+
backdrop-filter: var(--pf-v6-c-card--m-glass--BackdropFilter);
|
|
3014
|
+
}
|
|
3006
3015
|
|
|
3007
3016
|
.pf-v6-c-card__header {
|
|
3008
3017
|
display: flex;
|
|
@@ -3671,12 +3680,12 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
|
|
|
3671
3680
|
--pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-t--global--spacer--inset--page-chrome);
|
|
3672
3681
|
--pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
|
|
3673
3682
|
--pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
|
|
3674
|
-
--pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
|
|
3675
|
-
--pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
|
|
3676
|
-
--pf-v6-c-compass__panel--BorderColor: var(--pf-t--global--border--color--
|
|
3677
|
-
--pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--
|
|
3678
|
-
--pf-v6-c-compass__panel--BorderWidth: var(--pf-t--global--border--width--
|
|
3679
|
-
--pf-v6-c-compass__panel--BoxShadow: var(--pf-t--global--box-shadow--
|
|
3683
|
+
--pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default, var(--pf-t--global--background--color--primary--default));
|
|
3684
|
+
--pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary, revert);
|
|
3685
|
+
--pf-v6-c-compass__panel--BorderColor: var(--pf-t--global--border--color--glass--default, transparent);
|
|
3686
|
+
--pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--glass--default, var(--pf-t--global--border--radius--medium));
|
|
3687
|
+
--pf-v6-c-compass__panel--BorderWidth: var(--pf-t--global--border--width--glass--default, 0);
|
|
3688
|
+
--pf-v6-c-compass__panel--BoxShadow: var(--pf-t--global--box-shadow--glass--default, none);
|
|
3680
3689
|
--pf-v6-c-compass__message-bar--Width: 450px;
|
|
3681
3690
|
--pf-v6-c-compass__message-bar--MinWidth: 300px;
|
|
3682
3691
|
--pf-v6-c-compass__message-bar--MaxWidth: 600px;
|
|
@@ -4819,7 +4828,7 @@ ul) {
|
|
|
4819
4828
|
.pf-v6-c-data-list.pf-m-drag-over {
|
|
4820
4829
|
overflow-anchor: none;
|
|
4821
4830
|
}
|
|
4822
|
-
.pf-v6-c-data-list.pf-m-plain {
|
|
4831
|
+
:where(.pf-v6-theme-glass) .pf-v6-c-data-list:not(.pf-m-no-plain), .pf-v6-c-data-list.pf-m-plain {
|
|
4823
4832
|
--pf-v6-c-data-list__item--BackgroundColor: var(--pf-v6-c-data-list--pf-m-plain__item--BackgroundColor);
|
|
4824
4833
|
}
|
|
4825
4834
|
|
|
@@ -6298,7 +6307,7 @@ ul) {
|
|
|
6298
6307
|
--pf-v6-c-drawer--m-pill--m-expanded__panel--inset: var(--pf-t--global--spacer--inset--page-chrome);
|
|
6299
6308
|
--pf-v6-c-drawer__panel--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
|
|
6300
6309
|
--pf-v6-c-drawer__panel--m-glass--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
|
|
6301
|
-
--pf-v6-c-drawer__panel--m-glass--BorderColor: var(--pf-t--global--border--color--
|
|
6310
|
+
--pf-v6-c-drawer__panel--m-glass--BorderColor: var(--pf-t--global--border--color--glass--default);
|
|
6302
6311
|
}
|
|
6303
6312
|
@media screen and (prefers-reduced-motion: no-preference) {
|
|
6304
6313
|
.pf-v6-c-drawer {
|
|
@@ -6429,6 +6438,13 @@ ul) {
|
|
|
6429
6438
|
.pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
|
|
6430
6439
|
padding-inline-start: var(--pf-v6-c-drawer--m-inline__panel--PaddingInlineStart);
|
|
6431
6440
|
}
|
|
6441
|
+
.pf-v6-c-drawer.pf-m-inline.pf-m-glass, .pf-v6-c-drawer.pf-m-static.pf-m-glass {
|
|
6442
|
+
--pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-glass--BackgroundColor);
|
|
6443
|
+
--pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer__panel--m-glass--BorderColor);
|
|
6444
|
+
}
|
|
6445
|
+
.pf-v6-c-drawer.pf-m-inline.pf-m-glass > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel, .pf-v6-c-drawer.pf-m-static.pf-m-glass > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
|
|
6446
|
+
backdrop-filter: var(--pf-v6-c-drawer__panel--m-glass--BackdropFilter);
|
|
6447
|
+
}
|
|
6432
6448
|
.pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
|
|
6433
6449
|
order: 0;
|
|
6434
6450
|
margin-inline-end: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
|
|
@@ -6485,11 +6501,6 @@ ul) {
|
|
|
6485
6501
|
border-inline-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth);
|
|
6486
6502
|
border-inline-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth);
|
|
6487
6503
|
}
|
|
6488
|
-
.pf-v6-c-drawer.pf-m-pill > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-glass) {
|
|
6489
|
-
--pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-glass--BackgroundColor);
|
|
6490
|
-
--pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer__panel--m-glass--BorderColor);
|
|
6491
|
-
backdrop-filter: var(--pf-v6-c-drawer__panel--m-glass--BackdropFilter);
|
|
6492
|
-
}
|
|
6493
6504
|
}
|
|
6494
6505
|
|
|
6495
6506
|
.pf-v6-c-drawer__section {
|
|
@@ -6714,6 +6725,9 @@ ul) {
|
|
|
6714
6725
|
--pf-v6-c-drawer--m-inline__panel--after--Width: var(--pf-v6-c-drawer--m-inline__panel--after--md--Width);
|
|
6715
6726
|
min-width: var(--pf-v6-c-drawer__panel--MinWidth);
|
|
6716
6727
|
}
|
|
6728
|
+
:where(.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-inline:not(.pf-m-no-plain) > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel, .pf-v6-c-drawer.pf-m-inline.pf-m-plain > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel, :where(.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-static:not(.pf-m-no-plain) > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel, .pf-v6-c-drawer.pf-m-static.pf-m-plain > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
|
|
6729
|
+
background: transparent;
|
|
6730
|
+
}
|
|
6717
6731
|
.pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
|
|
6718
6732
|
box-shadow: var(--pf-v6-c-drawer--m-expanded__panel--BoxShadow);
|
|
6719
6733
|
}
|
|
@@ -10171,11 +10185,13 @@ ul.pf-v6-c-list {
|
|
|
10171
10185
|
}
|
|
10172
10186
|
}
|
|
10173
10187
|
.pf-v6-c-login {
|
|
10174
|
-
--pf-v6-c-login__main--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
10188
|
+
--pf-v6-c-login__main--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default, var(--pf-t--global--background--color--primary--default));
|
|
10189
|
+
--pf-v6-c-login__main--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
|
|
10175
10190
|
--pf-v6-c-login__main--MarginBlockEnd: var(--pf-t--global--spacer--lg);
|
|
10176
10191
|
--pf-v6-c-login__main--BorderRadius: var(--pf-t--global--border--radius--large);
|
|
10177
|
-
--pf-v6-c-login__main--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
10178
|
-
--pf-v6-c-login__main--BorderColor: var(--pf-t--global--border--color--high-contrast);
|
|
10192
|
+
--pf-v6-c-login__main--BorderWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--high-contrast--regular));
|
|
10193
|
+
--pf-v6-c-login__main--BorderColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--high-contrast));
|
|
10194
|
+
--pf-v6-c-login__main--BoxShadow: var(--pf-t--global--box-shadow--glass--default);
|
|
10179
10195
|
}
|
|
10180
10196
|
@media (min-width: 75rem) {
|
|
10181
10197
|
.pf-v6-c-login {
|
|
@@ -10298,8 +10314,10 @@ ul.pf-v6-c-list {
|
|
|
10298
10314
|
align-self: start;
|
|
10299
10315
|
margin-block-end: var(--pf-v6-c-login__main--MarginBlockEnd);
|
|
10300
10316
|
background-color: var(--pf-v6-c-login__main--BackgroundColor);
|
|
10317
|
+
backdrop-filter: var(--pf-v6-c-login__main--BackdropFilter);
|
|
10301
10318
|
border: var(--pf-v6-c-login__main--BorderWidth) solid var(--pf-v6-c-login__main--BorderColor);
|
|
10302
10319
|
border-radius: var(--pf-v6-c-login__main--BorderRadius);
|
|
10320
|
+
box-shadow: var(--pf-v6-c-login__main--BoxShadow);
|
|
10303
10321
|
}
|
|
10304
10322
|
.pf-v6-c-login__main > :first-child:not(.pf-v6-c-login__main-header) {
|
|
10305
10323
|
padding-block-start: var(--pf-v6-c-login__main-header--PaddingBlockStart);
|
|
@@ -10446,7 +10464,7 @@ ul.pf-v6-c-list {
|
|
|
10446
10464
|
--pf-v6-c-masthead--m-docked--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
|
|
10447
10465
|
--pf-v6-c-masthead--m-docked--PaddingInlineStart: var(--pf-t--global--spacer--sm);
|
|
10448
10466
|
--pf-v6-c-masthead--m-docked--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
|
|
10449
|
-
--pf-v6-c-masthead--m-docked--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
|
|
10467
|
+
--pf-v6-c-masthead--m-docked--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default, var(--pf-t--global--background--color--primary--default));
|
|
10450
10468
|
--pf-v6-c-masthead--m-docked--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
|
|
10451
10469
|
--pf-v6-c-masthead--m-docked--c-toolbar--Height: 100%;
|
|
10452
10470
|
--pf-v6-c-masthead__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
|
|
@@ -10517,7 +10535,7 @@ ul.pf-v6-c-list {
|
|
|
10517
10535
|
--pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
|
|
10518
10536
|
--pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
|
|
10519
10537
|
--pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
|
|
10520
|
-
--pf-v6-c-masthead--BackgroundColor:
|
|
10538
|
+
--pf-v6-c-masthead--BackgroundColor: transparent;
|
|
10521
10539
|
--pf-v6-c-masthead--GridTemplateRows: var(--pf-v6-c-masthead--m-docked--GridTemplateRows);
|
|
10522
10540
|
--pf-v6-c-masthead--PaddingBlockStart: var(--pf-v6-c-masthead--m-docked--PaddingBlockStart);
|
|
10523
10541
|
--pf-v6-c-masthead--PaddingBlockEnd: var(--pf-v6-c-masthead--m-docked--PaddingBlockEnd);
|
|
@@ -10533,7 +10551,8 @@ ul.pf-v6-c-list {
|
|
|
10533
10551
|
flex-direction: column;
|
|
10534
10552
|
align-items: stretch;
|
|
10535
10553
|
height: 100%;
|
|
10536
|
-
|
|
10554
|
+
border: 0;
|
|
10555
|
+
box-shadow: none;
|
|
10537
10556
|
}
|
|
10538
10557
|
.pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__logo {
|
|
10539
10558
|
width: revert;
|
|
@@ -10640,6 +10659,13 @@ ul.pf-v6-c-list {
|
|
|
10640
10659
|
padding-inline-start: var(--pf-t--global--spacer--2xl);
|
|
10641
10660
|
padding-inline-end: var(--pf-t--global--spacer--2xl);
|
|
10642
10661
|
}
|
|
10662
|
+
:where(.pf-v6-theme-glass) .pf-v6-c-masthead:not(.pf-m-docked) {
|
|
10663
|
+
margin-block-end: var(--pf-t--global--spacer--inset--page-chrome);
|
|
10664
|
+
background-color: var(--pf-t--global--background--color--glass--primary--default);
|
|
10665
|
+
backdrop-filter: var(--pf-t--global--background--filter--glass--blur--primary);
|
|
10666
|
+
border-block-end: var(--pf-t--global--border--width--glass--default) solid var(--pf-t--global--border--color--glass--default);
|
|
10667
|
+
box-shadow: var(--pf-t--global--box-shadow--glass--default);
|
|
10668
|
+
}
|
|
10643
10669
|
|
|
10644
10670
|
.pf-v6-c-masthead__main {
|
|
10645
10671
|
display: var(--pf-v6-c-masthead__main--Display);
|
|
@@ -13401,23 +13427,35 @@ ul.pf-v6-c-list {
|
|
|
13401
13427
|
--pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome);
|
|
13402
13428
|
--pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
|
|
13403
13429
|
--pf-v6-c-page--m-dock__main-container--MarginBlockStart: 0;
|
|
13404
|
-
--pf-v6-c-page--m-dock__main-container--
|
|
13430
|
+
--pf-v6-c-page--m-dock__main-container--desktop--MarginBlockStart: var(--pf-t--global--spacer--lg);
|
|
13405
13431
|
--pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
|
|
13406
13432
|
--pf-v6-c-page--m-dock--c-masthead--m-display-inline--GridTemplateColumns: min-content 1fr;
|
|
13407
13433
|
--pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
|
|
13408
13434
|
--pf-v6-c-page__dock--Width: 15.625rem;
|
|
13409
13435
|
--pf-v6-c-page__dock--desktop--Width: auto;
|
|
13410
13436
|
--pf-v6-c-page__dock--ZIndex: var(--pf-t--global--z-index--md);
|
|
13411
|
-
--pf-v6-c-page__dock--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
|
|
13412
|
-
--pf-v6-c-page__dock--BorderInlineEndColor: var(--pf-t--global--border--color--default);
|
|
13413
13437
|
--pf-v6-c-page__dock--TransitionDuration--slide: 0s;
|
|
13414
13438
|
--pf-v6-c-page__dock--m-expanded--TransitionDuration--slide: 0s;
|
|
13415
13439
|
--pf-v6-c-page__dock--TransitionTimingFunction--slide: var(--pf-t--global--motion--timing-function--decelerate);
|
|
13440
|
+
--pf-v6-c-page__dock-main--BackgroundColor: var(--pf-t--global--background--color--floating--default);
|
|
13441
|
+
--pf-v6-c-page__dock-main--desktop--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default, var(--pf-t--global--background--color--primary--default));
|
|
13442
|
+
--pf-v6-c-page__dock-main--BoxShadow: var(--pf-t--global--box-shadow--sm--right);
|
|
13443
|
+
--pf-v6-c-page__dock-main--desktop--BoxShadow: var(--pf-t--global--box-shadow--glass--default, none);
|
|
13444
|
+
--pf-v6-c-page__dock-main--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary, revert);
|
|
13445
|
+
--pf-v6-c-page__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, 0);
|
|
13446
|
+
--pf-v6-c-page__dock-main--BorderInlineEndColor: transparent;
|
|
13447
|
+
--pf-v6-c-page__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
|
|
13448
|
+
--pf-v6-c-page__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
|
|
13449
|
+
--pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--regular));
|
|
13450
|
+
--pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
|
|
13416
13451
|
--pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
|
|
13417
13452
|
--pf-v6-c-page__sidebar--Width--base: 18.125rem;
|
|
13418
13453
|
--pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
|
|
13419
13454
|
--pf-v6-c-page__sidebar--xl--Width: var(--pf-v6-c-page__sidebar--Width--base);
|
|
13420
|
-
--pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
|
13455
|
+
--pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--floating--secondary--default);
|
|
13456
|
+
--pf-v6-c-page__sidebar--BackdropFilter: none;
|
|
13457
|
+
--pf-v6-c-page__sidebar--xl--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
|
|
13458
|
+
--pf-v6-c-page__sidebar--xl--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default, var(--pf-t--global--background--color--secondary--default));
|
|
13421
13459
|
--pf-v6-c-page__sidebar--BoxShadow: var(--pf-t--global--box-shadow--md--right);
|
|
13422
13460
|
--pf-v6-c-page__sidebar--TransitionProperty: opacity;
|
|
13423
13461
|
--pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
|
|
@@ -13467,6 +13505,8 @@ ul.pf-v6-c-list {
|
|
|
13467
13505
|
--pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--xl--TranslateX);
|
|
13468
13506
|
--pf-v6-c-page__sidebar--Opacity: var(--pf-v6-c-page__sidebar--xl--Opacity);
|
|
13469
13507
|
--pf-v6-c-page__sidebar--BorderInlineEndWidth: 0;
|
|
13508
|
+
--pf-v6-c-page__sidebar--BackgroundColor: var(--pf-v6-c-page__sidebar--xl--BackgroundColor);
|
|
13509
|
+
--pf-v6-c-page__sidebar--BackdropFilter: var(--pf-v6-c-page__sidebar--xl--BackdropFilter);
|
|
13470
13510
|
}
|
|
13471
13511
|
}
|
|
13472
13512
|
.pf-v6-c-page {
|
|
@@ -13475,7 +13515,8 @@ ul.pf-v6-c-list {
|
|
|
13475
13515
|
--pf-v6-c-page--masthead--main-container--GridArea: sidebar / sidebar / main / main;
|
|
13476
13516
|
--pf-v6-c-page__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
|
|
13477
13517
|
--pf-v6-c-page__main-container--AlignSelf: start;
|
|
13478
|
-
--pf-v6-c-page__main-container--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
13518
|
+
--pf-v6-c-page__main-container--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default, var(--pf-t--global--background--color--primary--default));
|
|
13519
|
+
--pf-v6-c-page__main-container--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
|
|
13479
13520
|
--pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page--inset);
|
|
13480
13521
|
--pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page--inset);
|
|
13481
13522
|
--pf-v6-c-page__main-container--BorderRadius: var(--pf-t--global--border--radius--medium);
|
|
@@ -13484,6 +13525,7 @@ ul.pf-v6-c-list {
|
|
|
13484
13525
|
--pf-v6-c-page__main-container--BorderInlineStartWidth: var(--pf-t--global--border--width--main--default);
|
|
13485
13526
|
--pf-v6-c-page__main-container--BorderInlineEndWidth: var(--pf-t--global--border--width--main--default);
|
|
13486
13527
|
--pf-v6-c-page__main-container--BorderColor: var(--pf-t--global--border--color--main--default);
|
|
13528
|
+
--pf-v6-c-page__main-container--BoxShadow: var(--pf-t--global--box-shadow--glass--default, none);
|
|
13487
13529
|
--pf-v6-c-page__main-container--xs--AlignSelf: stretch;
|
|
13488
13530
|
--pf-v6-c-page__main-container--xs--BorderRadius: 0;
|
|
13489
13531
|
--pf-v6-c-page__main-container--xs--MarginInlineStart: 0;
|
|
@@ -13551,6 +13593,14 @@ ul.pf-v6-c-list {
|
|
|
13551
13593
|
--pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
|
|
13552
13594
|
--pf-v6-c-page__drawer--c-drawer--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
13553
13595
|
--pf-v6-c-page__drawer--c-drawer--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
|
|
13596
|
+
--pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
|
|
13597
|
+
--pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--lg);
|
|
13598
|
+
--pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
|
|
13599
|
+
}
|
|
13600
|
+
:where(.pf-v6-theme-glass) .pf-v6-c-page {
|
|
13601
|
+
--pf-v6-c-page__sidebar--Width--base: calc(18.125rem + var(--pf-t--global--spacer--inset--page-chrome) * 2);
|
|
13602
|
+
--pf-v6-c-page__sidebar-body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
|
|
13603
|
+
--pf-v6-c-page__sidebar-body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
|
|
13554
13604
|
}
|
|
13555
13605
|
|
|
13556
13606
|
.pf-v6-c-page {
|
|
@@ -13580,7 +13630,7 @@ ul.pf-v6-c-list {
|
|
|
13580
13630
|
}
|
|
13581
13631
|
@media (min-width: 62rem) {
|
|
13582
13632
|
.pf-v6-c-page.pf-m-dock {
|
|
13583
|
-
--pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page--m-dock__main-container--
|
|
13633
|
+
--pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page--m-dock__main-container--desktop--MarginBlockStart);
|
|
13584
13634
|
--pf-v6-c-page__main-container--MarginInlineStart: 0;
|
|
13585
13635
|
grid-template-areas: "dock main";
|
|
13586
13636
|
grid-template-rows: auto;
|
|
@@ -13656,6 +13706,8 @@ ul.pf-v6-c-list {
|
|
|
13656
13706
|
inset-block-end: 0;
|
|
13657
13707
|
inset-inline-start: 0;
|
|
13658
13708
|
z-index: var(--pf-v6-c-page__dock--ZIndex);
|
|
13709
|
+
display: flex;
|
|
13710
|
+
flex-direction: column;
|
|
13659
13711
|
grid-area: dock;
|
|
13660
13712
|
width: var(--pf-v6-c-page__dock--Width);
|
|
13661
13713
|
transition: translate var(--pf-v6-c-page__dock--TransitionDuration--slide) var(--pf-v6-c-page__dock--TransitionTimingFunction--slide);
|
|
@@ -13663,12 +13715,12 @@ ul.pf-v6-c-list {
|
|
|
13663
13715
|
}
|
|
13664
13716
|
.pf-v6-c-page__dock.pf-m-expanded {
|
|
13665
13717
|
--pf-v6-c-page__dock--TransitionDuration--slide: var(--pf-v6-c-page__dock--m-expanded--TransitionDuration--slide);
|
|
13666
|
-
border-inline-end: var(--pf-v6-c-page__dock--BorderInlineEndWidth) solid var(--pf-v6-c-page__dock--BorderInlineEndColor);
|
|
13667
13718
|
translate: 0;
|
|
13668
13719
|
}
|
|
13669
13720
|
@media (min-width: 62rem) {
|
|
13670
13721
|
.pf-v6-c-page__dock {
|
|
13671
|
-
--pf-v6-c-page__dock--
|
|
13722
|
+
--pf-v6-c-page__dock-main--BackgroundColor: var(--pf-v6-c-page__dock-main--desktop--BackgroundColor);
|
|
13723
|
+
--pf-v6-c-page__dock-main--BorderInlineEndColor: var(--pf-v6-c-page__dock-main--desktop--BorderInlineEndColor);
|
|
13672
13724
|
position: revert;
|
|
13673
13725
|
inset: revert;
|
|
13674
13726
|
width: auto;
|
|
@@ -13682,6 +13734,22 @@ ul.pf-v6-c-list {
|
|
|
13682
13734
|
width: var(--pf-v6-c-page__dock--Width);
|
|
13683
13735
|
}
|
|
13684
13736
|
|
|
13737
|
+
.pf-v6-c-page__dock-main {
|
|
13738
|
+
flex-grow: 1;
|
|
13739
|
+
background-color: var(--pf-v6-c-page__dock-main--BackgroundColor);
|
|
13740
|
+
backdrop-filter: var(--pf-v6-c-page__dock-main--BackdropFilter);
|
|
13741
|
+
border-inline-end: var(--pf-v6-c-page__dock-main--BorderInlineEndWidth) solid var(--pf-v6-c-page__dock-main--BorderInlineEndColor);
|
|
13742
|
+
box-shadow: var(--pf-v6-c-page__dock-main--BoxShadow);
|
|
13743
|
+
}
|
|
13744
|
+
.pf-v6-c-page__dock.pf-m-expanded .pf-v6-c-page__dock-main {
|
|
13745
|
+
border-inline-end: var(--pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth) solid var(--pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor);
|
|
13746
|
+
}
|
|
13747
|
+
@media (min-width: 62rem) {
|
|
13748
|
+
.pf-v6-c-page__dock-main {
|
|
13749
|
+
--pf-v6-c-page__dock-main--BoxShadow: var(--pf-v6-c-page__dock-main--desktop--BoxShadow);
|
|
13750
|
+
}
|
|
13751
|
+
}
|
|
13752
|
+
|
|
13685
13753
|
.pf-v6-c-page__sidebar {
|
|
13686
13754
|
z-index: var(--pf-v6-c-page__sidebar--ZIndex);
|
|
13687
13755
|
display: flex;
|
|
@@ -13722,6 +13790,48 @@ ul.pf-v6-c-list {
|
|
|
13722
13790
|
max-width: 0;
|
|
13723
13791
|
overflow: hidden;
|
|
13724
13792
|
}
|
|
13793
|
+
:where(.pf-v6-theme-glass) .pf-v6-c-page__sidebar {
|
|
13794
|
+
min-height: 0;
|
|
13795
|
+
padding: 0;
|
|
13796
|
+
overflow: visible;
|
|
13797
|
+
background: transparent;
|
|
13798
|
+
}
|
|
13799
|
+
:where(.pf-v6-theme-glass) .pf-v6-c-page__sidebar.pf-m-expanded {
|
|
13800
|
+
box-shadow: none;
|
|
13801
|
+
}
|
|
13802
|
+
:where(.pf-v6-theme-glass) .pf-v6-c-page__sidebar .pf-v6-c-page__sidebar-main {
|
|
13803
|
+
padding-block-end: var(--pf-v6-c-page__sidebar--PaddingBlockEnd);
|
|
13804
|
+
padding-inline-start: var(--pf-v6-c-page__sidebar--PaddingInlineStart);
|
|
13805
|
+
padding-inline-end: var(--pf-v6-c-page__sidebar--PaddingInlineEnd);
|
|
13806
|
+
margin-block-start: calc(var(--pf-t--global--spacer--sm) * -1);
|
|
13807
|
+
margin-block-end: var(--pf-t--global--spacer--md);
|
|
13808
|
+
margin-inline-start: var(--pf-t--global--spacer--md);
|
|
13809
|
+
margin-inline-end: var(--pf-t--global--spacer--md);
|
|
13810
|
+
overflow: auto;
|
|
13811
|
+
background-color: var(--pf-v6-c-page__sidebar--BackgroundColor);
|
|
13812
|
+
backdrop-filter: var(--pf-v6-c-page__sidebar--BackdropFilter);
|
|
13813
|
+
border: var(--pf-t--global--border--width--glass--default) solid var(--pf-t--global--border--color--glass--default);
|
|
13814
|
+
border-radius: var(--pf-t--global--border--radius--glass--default);
|
|
13815
|
+
box-shadow: var(--pf-t--global--box-shadow--glass--default);
|
|
13816
|
+
}
|
|
13817
|
+
@media (min-width: 75rem) {
|
|
13818
|
+
:where(.pf-v6-theme-glass) .pf-v6-c-page__sidebar .pf-v6-c-page__sidebar-main {
|
|
13819
|
+
margin-block-start: 0;
|
|
13820
|
+
margin-block-end: var(--pf-t--global--spacer--inset--page-chrome);
|
|
13821
|
+
margin-inline-start: var(--pf-t--global--spacer--inset--page-chrome);
|
|
13822
|
+
margin-inline-end: var(--pf-t--global--spacer--inset--page-chrome);
|
|
13823
|
+
}
|
|
13824
|
+
}
|
|
13825
|
+
|
|
13826
|
+
.pf-v6-c-page__sidebar:has(> .pf-v6-c-page__sidebar-main) {
|
|
13827
|
+
overflow: revert;
|
|
13828
|
+
}
|
|
13829
|
+
|
|
13830
|
+
.pf-v6-c-page__sidebar-main {
|
|
13831
|
+
display: flex;
|
|
13832
|
+
flex-grow: 1;
|
|
13833
|
+
flex-direction: column;
|
|
13834
|
+
}
|
|
13725
13835
|
|
|
13726
13836
|
.pf-v6-c-page__sidebar-header {
|
|
13727
13837
|
padding-block-start: var(--pf-v6-c-page__sidebar-header--PaddingBlockStart);
|
|
@@ -13989,12 +14099,14 @@ ul.pf-v6-c-list {
|
|
|
13989
14099
|
margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
|
|
13990
14100
|
margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
|
|
13991
14101
|
background: var(--pf-v6-c-page__main-container--BackgroundColor);
|
|
14102
|
+
backdrop-filter: var(--pf-v6-c-page__main-container--BackdropFilter);
|
|
13992
14103
|
border: solid var(--pf-v6-c-page__main-container--BorderColor);
|
|
13993
14104
|
border-block-start-width: var(--pf-v6-c-page__main-container--BorderBlockStartWidth);
|
|
13994
14105
|
border-block-end-width: var(--pf-v6-c-page__main-container--BorderBlockEndWidth);
|
|
13995
14106
|
border-inline-start-width: var(--pf-v6-c-page__main-container--BorderInlineStartWidth);
|
|
13996
14107
|
border-inline-end-width: var(--pf-v6-c-page__main-container--BorderInlineEndWidth);
|
|
13997
14108
|
border-radius: var(--pf-v6-c-page__main-container--BorderRadius);
|
|
14109
|
+
box-shadow: var(--pf-v6-c-page__main-container--BoxShadow);
|
|
13998
14110
|
}
|
|
13999
14111
|
@media screen and (max-width: calc(48rem - 1px)) {
|
|
14000
14112
|
.pf-v6-c-page__main-container {
|
|
@@ -14033,6 +14145,25 @@ ul.pf-v6-c-list {
|
|
|
14033
14145
|
outline: 0;
|
|
14034
14146
|
}
|
|
14035
14147
|
|
|
14148
|
+
:where(.pf-v6-theme-glass) .pf-v6-c-page__main-subnav:not(.pf-m-no-plain), .pf-v6-c-page__main-subnav.pf-m-plain,
|
|
14149
|
+
:where(.pf-v6-theme-glass) .pf-v6-c-page__main-breadcrumb:not(.pf-m-no-plain),
|
|
14150
|
+
.pf-v6-c-page__main-breadcrumb.pf-m-plain,
|
|
14151
|
+
:where(.pf-v6-theme-glass) .pf-v6-c-page__main-tabs:not(.pf-m-no-plain),
|
|
14152
|
+
.pf-v6-c-page__main-tabs.pf-m-plain,
|
|
14153
|
+
:where(.pf-v6-theme-glass) .pf-v6-c-page__main-section:not(.pf-m-no-plain),
|
|
14154
|
+
.pf-v6-c-page__main-section.pf-m-plain,
|
|
14155
|
+
:where(.pf-v6-theme-glass) .pf-v6-c-page__main-wizard:not(.pf-m-no-plain),
|
|
14156
|
+
.pf-v6-c-page__main-wizard.pf-m-plain,
|
|
14157
|
+
:where(.pf-v6-theme-glass) .pf-v6-c-page__main-group:not(.pf-m-no-plain),
|
|
14158
|
+
.pf-v6-c-page__main-group.pf-m-plain {
|
|
14159
|
+
--pf-v6-c-page__main-section--BackgroundColor: transparent;
|
|
14160
|
+
--pf-v6-c-page__main-subnav--BackgroundColor: transparent;
|
|
14161
|
+
--pf-v6-c-page__main-breadcrumb--BackgroundColor: transparent;
|
|
14162
|
+
--pf-v6-c-page__main-tabs--BackgroundColor: transparent;
|
|
14163
|
+
--pf-v6-c-page__main-wizard--BackgroundColor: transparent;
|
|
14164
|
+
--pf-v6-c-page__main-group--BackgroundColor: transparent;
|
|
14165
|
+
}
|
|
14166
|
+
|
|
14036
14167
|
.pf-v6-c-page__main,
|
|
14037
14168
|
.pf-v6-c-page__main-drawer,
|
|
14038
14169
|
.pf-v6-c-page__main-group {
|
|
@@ -14127,6 +14258,8 @@ ul.pf-v6-c-list {
|
|
|
14127
14258
|
}
|
|
14128
14259
|
.pf-v6-c-page__main-section.pf-m-secondary {
|
|
14129
14260
|
--pf-v6-c-page__main-section--BackgroundColor: var(--pf-v6-c-page__main-section--m-secondary--BackgroundColor);
|
|
14261
|
+
border-block-start: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--high-contrast--regular)) solid var(--pf-t--global--border--color--subtle, var(--pf-t--global--border--color--high-contrast));
|
|
14262
|
+
border-block-end: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--high-contrast--regular)) solid var(--pf-t--global--border--color--subtle, var(--pf-t--global--border--color--high-contrast));
|
|
14130
14263
|
}
|
|
14131
14264
|
.pf-v6-c-page__main-section.pf-m-padding {
|
|
14132
14265
|
padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
|
|
@@ -14635,6 +14768,12 @@ ul.pf-v6-c-list {
|
|
|
14635
14768
|
--pf-v6-c-panel--m-scrollable__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
|
|
14636
14769
|
--pf-v6-c-panel--m-scrollable__footer--BorderColor: var(--pf-t--global--border--color--high-contrast);
|
|
14637
14770
|
--pf-v6-c-panel--m-scrollable__footer--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
14771
|
+
--pf-v6-c-panel--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
|
|
14772
|
+
--pf-v6-c-panel--m-glass--before--BorderWidth: var(--pf-t--global--border--width--glass--default);
|
|
14773
|
+
--pf-v6-c-panel--m-glass--before--BorderColor: var(--pf-t--global--border--color--glass--default);
|
|
14774
|
+
--pf-v6-c-panel--m-glass--BoxShadow: var(--pf-t--global--box-shadow--glass--default);
|
|
14775
|
+
--pf-v6-c-panel--m-glass--BorderRadius: var(--pf-t--global--border--radius--glass--default);
|
|
14776
|
+
--pf-v6-c-panel--m-glass--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
|
|
14638
14777
|
}
|
|
14639
14778
|
|
|
14640
14779
|
.pf-v6-c-panel {
|
|
@@ -14676,6 +14815,14 @@ ul.pf-v6-c-list {
|
|
|
14676
14815
|
--pf-v6-c-panel__footer--BorderColor: var(--pf-v6-c-panel--m-scrollable__footer--BorderColor);
|
|
14677
14816
|
--pf-v6-c-panel__footer--BorderWidth: var(--pf-v6-c-panel--m-scrollable__footer--BorderWidth);
|
|
14678
14817
|
}
|
|
14818
|
+
.pf-v6-c-panel.pf-m-glass {
|
|
14819
|
+
--pf-v6-c-panel--BackgroundColor: var(--pf-v6-c-panel--m-glass--BackgroundColor);
|
|
14820
|
+
--pf-v6-c-panel--before--BorderWidth: var(--pf-v6-c-panel--m-glass--before--BorderWidth);
|
|
14821
|
+
--pf-v6-c-panel--before--BorderColor: var(--pf-v6-c-panel--m-glass--before--BorderColor);
|
|
14822
|
+
--pf-v6-c-panel--BoxShadow: var(--pf-v6-c-panel--m-glass--BoxShadow);
|
|
14823
|
+
--pf-v6-c-panel--BorderRadius: var(--pf-v6-c-panel--m-glass--BorderRadius);
|
|
14824
|
+
backdrop-filter: var(--pf-v6-c-panel--m-glass--BackdropFilter);
|
|
14825
|
+
}
|
|
14679
14826
|
|
|
14680
14827
|
.pf-v6-c-panel__header {
|
|
14681
14828
|
padding-block-start: var(--pf-v6-c-panel__header--PaddingBlockStart);
|
|
@@ -17346,7 +17493,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
|
|
|
17346
17493
|
--pf-v6-c-table--cell--Width: auto;
|
|
17347
17494
|
}
|
|
17348
17495
|
|
|
17349
|
-
@container pf-v6-contain-table (max-width: 48rem) {
|
|
17496
|
+
@container pf-v6-contain-table (max-width: calc(48rem - 1px)) {
|
|
17350
17497
|
.pf-m-grid-md.pf-v6-c-table {
|
|
17351
17498
|
--pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
|
|
17352
17499
|
--pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
|
|
@@ -17656,7 +17803,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
|
|
|
17656
17803
|
}
|
|
17657
17804
|
}
|
|
17658
17805
|
|
|
17659
|
-
@container pf-v6-contain-table (max-width: 62rem) {
|
|
17806
|
+
@container pf-v6-contain-table (max-width: calc(62rem - 1px)) {
|
|
17660
17807
|
.pf-m-grid-lg.pf-v6-c-table {
|
|
17661
17808
|
--pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
|
|
17662
17809
|
--pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
|
|
@@ -17966,7 +18113,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
|
|
|
17966
18113
|
}
|
|
17967
18114
|
}
|
|
17968
18115
|
|
|
17969
|
-
@container pf-v6-contain-table (max-width: 75rem) {
|
|
18116
|
+
@container pf-v6-contain-table (max-width: calc(75rem - 1px)) {
|
|
17970
18117
|
.pf-m-grid-xl.pf-v6-c-table {
|
|
17971
18118
|
--pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
|
|
17972
18119
|
--pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
|
|
@@ -18276,7 +18423,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
|
|
|
18276
18423
|
}
|
|
18277
18424
|
}
|
|
18278
18425
|
|
|
18279
|
-
@container pf-v6-contain-table (max-width: 90.625rem) {
|
|
18426
|
+
@container pf-v6-contain-table (max-width: calc(90.625rem - 1px)) {
|
|
18280
18427
|
.pf-m-grid-2xl.pf-v6-c-table {
|
|
18281
18428
|
--pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
|
|
18282
18429
|
--pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
|
|
@@ -18708,14 +18855,14 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
|
|
|
18708
18855
|
--pf-v6-c-table__th--m-help--MinWidth: 11ch;
|
|
18709
18856
|
--pf-v6-c-table__column-help--MarginInlineStart: var(--pf-t--global--spacer--sm);
|
|
18710
18857
|
--pf-v6-c-table__compound-expansion-toggle__button--Color: var(--pf-t--global--icon--color--brand--default);
|
|
18711
|
-
--pf-v6-c-table__compound-expansion-toggle__button--BackgroundColor:
|
|
18858
|
+
--pf-v6-c-table__compound-expansion-toggle__button--BackgroundColor: transparent;
|
|
18712
18859
|
--pf-v6-c-table__compound-expansion-toggle__button--hover--Color: var(--pf-t--global--icon--color--brand--hover);
|
|
18713
|
-
--pf-v6-c-table__compound-expansion-toggle__button--hover--BackgroundColor: var(--pf-t--global--background--color--
|
|
18714
|
-
--pf-v6-c-table__compound-expansion-toggle__button--expanded--BackgroundColor: var(--pf-t--global--background--color--
|
|
18860
|
+
--pf-v6-c-table__compound-expansion-toggle__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
|
|
18861
|
+
--pf-v6-c-table__compound-expansion-toggle__button--expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
|
|
18715
18862
|
--pf-v6-c-table__compound-expansion-toggle__button--after--BorderColor: var(--pf-t--global--border--color--clicked);
|
|
18716
18863
|
--pf-v6-c-table__compound-expansion-toggle__button--after--BorderRadius: inherit;
|
|
18717
18864
|
--pf-v6-c-table__compound-expansion-toggle__button--after--BorderBlockStartWidth: 0;
|
|
18718
|
-
--pf-v6-c-table__compound-expansion-toggle__button--hover--after--BorderBlockStartWidth:
|
|
18865
|
+
--pf-v6-c-table__compound-expansion-toggle__button--hover--after--BorderBlockStartWidth: 0;
|
|
18719
18866
|
--pf-v6-c-table__compound-expansion-toggle--m-expanded__button--after--BorderBlockStartWidth: var(--pf-t--global--border--width--strong);
|
|
18720
18867
|
--pf-v6-c-table--compound-expansion--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
|
|
18721
18868
|
--pf-v6-c-table--compound-expansion--m-expanded--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
@@ -18757,6 +18904,14 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
|
|
|
18757
18904
|
width: 100%;
|
|
18758
18905
|
background-color: var(--pf-v6-c-table--BackgroundColor);
|
|
18759
18906
|
}
|
|
18907
|
+
:where(.pf-v6-theme-glass) .pf-v6-c-table:not(.pf-m-no-plain), .pf-v6-c-table.pf-m-plain {
|
|
18908
|
+
--pf-v6-c-table--BackgroundColor: transparent;
|
|
18909
|
+
--pf-v6-c-table__expandable-row-content--BackgroundColor: transparent;
|
|
18910
|
+
--pf-v6-c-table__expandable-row-content--PaddingInlineStart: 0;
|
|
18911
|
+
--pf-v6-c-table__expandable-row-content--PaddingInlineEnd: 0;
|
|
18912
|
+
--pf-v6-c-table__control-row--BackgroundColor: transparent;
|
|
18913
|
+
}
|
|
18914
|
+
|
|
18760
18915
|
.pf-v6-c-table.pf-m-fixed {
|
|
18761
18916
|
table-layout: fixed;
|
|
18762
18917
|
}
|
|
@@ -18797,9 +18952,6 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
|
|
|
18797
18952
|
.pf-v6-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:last-child) td:where(.pf-v6-c-table__td):not([rowspan]) {
|
|
18798
18953
|
--pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd);
|
|
18799
18954
|
}
|
|
18800
|
-
.pf-v6-c-table.pf-m-plain {
|
|
18801
|
-
--pf-v6-c-table--BackgroundColor: transparent;
|
|
18802
|
-
}
|
|
18803
18955
|
.pf-v6-c-table.pf-m-striped:not(.pf-m-expandable) > tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr):nth-child(odd), .pf-v6-c-table.pf-m-striped.pf-m-expandable > tbody:where(.pf-v6-c-table__tbody):nth-of-type(odd) > tr:where(.pf-v6-c-table__tr),
|
|
18804
18956
|
.pf-v6-c-table > .pf-m-striped > tr:nth-child(odd),
|
|
18805
18957
|
.pf-v6-c-table > .pf-m-striped-even > tr:nth-child(even),
|
|
@@ -1077,6 +1077,7 @@ Another variation is using the definition list:
|
|
|
1077
1077
|
| `.pf-v6-c-accordion__toggle-icon` | `<span>` | Initiates the toggle icon wrapper. **Required** |
|
|
1078
1078
|
| `.pf-v6-c-accordion__expandable-content` | `<div>`, `<dd>` | Initiates expandable content. **Must be paired with a button** |
|
|
1079
1079
|
| `.pf-v6-c-accordion__expandable-content-body` | `<div>` | Initiates expandable content body. **Required** |
|
|
1080
|
+
| `.pf-m-plain` | `.pf-v6-c-accordion` | Modifies the accordion have plain styles. |
|
|
1080
1081
|
| `.pf-m-bordered` | `.pf-v6-c-accordion` | Modifies the accordion to add borders between items. |
|
|
1081
1082
|
| `.pf-m-display-lg` | `.pf-v6-c-accordion` | Modifies the accordion for large display styling. This variation is for marketing/web use cases. |
|
|
1082
1083
|
| `.pf-m-toggle-start` | `.pf-v6-c-accordion` | Modifies accordion styling when accordion toggle icons are rendered at the start of the toggle, before the toggle text. |
|
|
@@ -1937,4 +1937,5 @@ A card is a generic rectangular container that can be used to build other compon
|
|
|
1937
1937
|
| `.pf-m-expanded` | `.pf-v6-c-card` | Modifies the card for the expanded state. |
|
|
1938
1938
|
| `.pf-m-toggle-right` | `.pf-v6-c-card__header` | Modifies the expandable card header toggle to be positioned at flex-end. |
|
|
1939
1939
|
| `.pf-m-full-height` | `.pf-v6-c-card` | Modifies the card to full height of its parent. |
|
|
1940
|
+
| `.pf-m-glass` | `.pf-v6-c-card` | Applies glass styles when glass theme is enabled. |
|
|
1940
1941
|
| `.pf-m-no-offset` | `.pf-v6-c-card__actions` | Removes the negative vertical margins on the actions element intended to align the action content with the card title. |
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
}
|
|
4
4
|
|
|
5
5
|
.pf-v6-c-draggable.pf-m-dragging {
|
|
6
|
-
--pf-v6-c-draggable--m-dragging--BackgroundColor: var(--pf-t--global--background--color--
|
|
6
|
+
--pf-v6-c-draggable--m-dragging--BackgroundColor: var(--pf-t--global--background--color--floating--default);
|
|
7
7
|
|
|
8
8
|
position: absolute;
|
|
9
9
|
inset-block-start: 23%;
|