@patternfly/react-styles 6.5.0-prerelease.13 → 6.5.0-prerelease.15
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/CHANGELOG.md +12 -0
- package/css/assets/images/compass--hero-bg.png +0 -0
- package/css/assets/images/compass--wallpaper-dark.jpg +0 -0
- package/css/assets/images/compass--wallpaper-light.jpg +0 -0
- package/css/assets/images/glass-brand-dark.jpg +0 -0
- package/css/assets/images/glass-brand-dark.png +0 -0
- package/css/assets/images/glass-brand-light.jpg +0 -0
- package/css/assets/images/glass-brand-light.png +0 -0
- package/css/components/Accordion/accordion.css +11 -1
- package/css/components/Accordion/accordion.d.ts +4 -1
- package/css/components/Accordion/accordion.js +4 -1
- package/css/components/Accordion/accordion.mjs +4 -1
- package/css/components/Alert/alert.css +2 -1
- package/css/components/Button/button.css +98 -19
- package/css/components/Button/button.d.ts +3 -0
- package/css/components/Button/button.js +3 -0
- package/css/components/Button/button.mjs +3 -0
- package/css/components/Card/card.css +34 -9
- package/css/components/Card/card.d.ts +1 -0
- package/css/components/Card/card.js +1 -0
- package/css/components/Card/card.mjs +1 -0
- package/css/components/ClipboardCopy/clipboard-copy.css +1 -1
- package/css/components/CodeEditor/code-editor.css +1 -1
- package/css/components/Compass/compass.css +6 -6
- package/css/components/DataList/data-list.css +2 -2
- package/css/components/DataList/data-list.d.ts +3 -1
- package/css/components/DataList/data-list.js +3 -1
- package/css/components/DataList/data-list.mjs +3 -1
- package/css/components/Drawer/drawer.css +117 -22
- package/css/components/Drawer/drawer.d.ts +5 -2
- package/css/components/Drawer/drawer.js +5 -2
- package/css/components/Drawer/drawer.mjs +5 -2
- package/css/components/DualListSelector/dual-list-selector.css +1 -1
- package/css/components/ExpandableSection/expandable-section.css +2 -2
- package/css/components/Form/form.css +1 -1
- package/css/components/JumpLinks/jump-links.css +12 -2
- package/css/components/Login/login.css +7 -3
- package/css/components/Masthead/masthead.css +49 -7
- package/css/components/Masthead/masthead.d.ts +4 -0
- package/css/components/Masthead/masthead.js +4 -0
- package/css/components/Masthead/masthead.mjs +4 -0
- package/css/components/MenuToggle/menu-toggle.css +25 -2
- package/css/components/MenuToggle/menu-toggle.d.ts +3 -0
- package/css/components/MenuToggle/menu-toggle.js +3 -0
- package/css/components/MenuToggle/menu-toggle.mjs +3 -0
- package/css/components/Nav/nav.css +19 -11
- package/css/components/Nav/nav.d.ts +3 -1
- package/css/components/Nav/nav.js +3 -1
- package/css/components/Nav/nav.mjs +3 -1
- package/css/components/NotificationDrawer/notification-drawer.css +11 -3
- package/css/components/Page/page.css +168 -6
- package/css/components/Page/page.d.ts +12 -1
- package/css/components/Page/page.js +12 -1
- package/css/components/Page/page.mjs +12 -1
- package/css/components/Panel/panel.css +14 -0
- package/css/components/Panel/panel.d.ts +2 -1
- package/css/components/Panel/panel.js +2 -1
- package/css/components/Panel/panel.mjs +2 -1
- package/css/components/Progress/progress.css +3 -1
- package/css/components/Table/table-grid.css +4 -4
- package/css/components/Table/table.css +14 -9
- package/css/components/Table/table.d.ts +4 -2
- package/css/components/Table/table.js +4 -2
- package/css/components/Table/table.mjs +4 -2
- package/css/components/Tabs/tabs.css +20 -19
- package/css/components/Tabs/tabs.d.ts +0 -1
- package/css/components/Tabs/tabs.js +0 -1
- package/css/components/Tabs/tabs.mjs +0 -1
- package/css/components/ToggleGroup/toggle-group.css +33 -16
- package/css/components/Toolbar/toolbar.css +1 -1
- package/css/components/TreeView/tree-view.css +1 -1
- package/css/components/Wizard/wizard.css +21 -3
- package/css/components/Wizard/wizard.d.ts +3 -0
- package/css/components/Wizard/wizard.js +3 -0
- package/css/components/Wizard/wizard.mjs +3 -0
- package/css/components/_index.css +678 -154
- package/css/components/_index.d.ts +6 -2
- package/css/components/_index.js +6 -2
- package/css/components/_index.mjs +6 -2
- package/css/docs/components/DragDrop/examples/DragDrop.css +1 -1
- package/package.json +3 -3
|
@@ -32,6 +32,7 @@ export default {
|
|
|
32
32
|
"grid_2xl": "pf-m-grid-2xl",
|
|
33
33
|
"compact": "pf-m-compact",
|
|
34
34
|
"dragOver": "pf-m-drag-over",
|
|
35
|
+
"noPlainOnGlass": "pf-m-no-plain-on-glass",
|
|
35
36
|
"plain": "pf-m-plain",
|
|
36
37
|
"truncate": "pf-m-truncate",
|
|
37
38
|
"breakWord": "pf-m-break-word",
|
|
@@ -53,5 +54,6 @@ export default {
|
|
|
53
54
|
"hiddenOn_2xl": "pf-m-hidden-on-2xl",
|
|
54
55
|
"visibleOn_2xl": "pf-m-visible-on-2xl",
|
|
55
56
|
"noPadding": "pf-m-no-padding"
|
|
56
|
-
}
|
|
57
|
+
},
|
|
58
|
+
"themeGlass": "pf-v6-theme-glass"
|
|
57
59
|
};
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
--pf-v6-c-drawer--m-pill--m-expanded__panel--inset: var(--pf-t--global--spacer--inset--page-chrome);
|
|
56
56
|
--pf-v6-c-drawer__panel--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
|
|
57
57
|
--pf-v6-c-drawer__panel--m-glass--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
|
|
58
|
-
--pf-v6-c-drawer__panel--m-glass--BorderColor: var(--pf-t--global--border--color--
|
|
58
|
+
--pf-v6-c-drawer__panel--m-glass--BorderColor: var(--pf-t--global--border--color--glass--default);
|
|
59
59
|
}
|
|
60
60
|
@media screen and (prefers-reduced-motion: no-preference) {
|
|
61
61
|
.pf-v6-c-drawer {
|
|
@@ -92,45 +92,85 @@
|
|
|
92
92
|
--pf-v6-c-drawer__body--m-padding--PaddingInlineEnd: var(--pf-t--global--spacer--md);
|
|
93
93
|
--pf-v6-c-drawer__body--m-padding--PaddingBlockEnd: var(--pf-t--global--spacer--md);
|
|
94
94
|
--pf-v6-c-drawer__body--m-padding--PaddingInlineStart: var(--pf-t--global--spacer--md);
|
|
95
|
-
--pf-v6-c-drawer__splitter--Height: 0.
|
|
95
|
+
--pf-v6-c-drawer__splitter--Height: 0.75rem;
|
|
96
96
|
--pf-v6-c-drawer__splitter--Width: 100%;
|
|
97
|
-
--pf-v6-c-drawer__splitter--BackgroundColor:
|
|
97
|
+
--pf-v6-c-drawer__splitter--BackgroundColor: transparent;
|
|
98
98
|
--pf-v6-c-drawer__splitter--Cursor: row-resize;
|
|
99
99
|
--pf-v6-c-drawer__splitter--m-vertical--Height: 100%;
|
|
100
|
-
--pf-v6-c-drawer__splitter--m-vertical--Width: 0.
|
|
100
|
+
--pf-v6-c-drawer__splitter--m-vertical--Width: 0.75rem;
|
|
101
101
|
--pf-v6-c-drawer__splitter--m-vertical--Cursor: col-resize;
|
|
102
|
+
--pf-v6-c-drawer__splitter--focus--OutlineOffset: -0.0625rem;
|
|
102
103
|
--pf-v6-c-drawer--m-inline__splitter--focus--OutlineOffset: -0.0625rem;
|
|
103
104
|
--pf-v6-c-drawer__splitter--after--BorderColor: var(--pf-t--global--border--color--default);
|
|
105
|
+
--pf-v6-c-drawer__splitter--hover--after--BorderColor: var(--pf-t--global--border--color--default);
|
|
106
|
+
--pf-v6-c-drawer__splitter--focus--after--BorderColor: var(--pf-t--global--border--color--default);
|
|
107
|
+
--pf-v6-c-drawer__splitter--active--after--BorderColor: var(--pf-t--global--border--color--default);
|
|
104
108
|
--pf-v6-c-drawer__splitter--after--border-width--base: var(--pf-t--global--border--width--divider--default);
|
|
105
109
|
--pf-v6-c-drawer__splitter--after--BorderBlockStartWidth: 0;
|
|
106
110
|
--pf-v6-c-drawer__splitter--after--BorderInlineEndWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
|
|
107
111
|
--pf-v6-c-drawer__splitter--after--BorderBlockEndWidth: 0;
|
|
108
112
|
--pf-v6-c-drawer__splitter--after--BorderInlineStartWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
|
|
113
|
+
--pf-v6-c-drawer__splitter--after--InsetBlockStart: 0;
|
|
114
|
+
--pf-v6-c-drawer__splitter--after--InsetBlockEnd: 0;
|
|
115
|
+
--pf-v6-c-drawer__splitter--after--InsetInlineStart: 0;
|
|
116
|
+
--pf-v6-c-drawer__splitter--after--InsetInlineEnd: 0;
|
|
117
|
+
--pf-v6-c-drawer__splitter--after--Width: auto;
|
|
118
|
+
--pf-v6-c-drawer__splitter--after--Height: auto;
|
|
109
119
|
--pf-v6-c-drawer--m-panel-bottom__splitter--after--BorderBlockStartWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
|
|
110
120
|
--pf-v6-c-drawer--m-panel-bottom__splitter--after--BorderBlockEndWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
|
|
111
|
-
--pf-v6-c-drawer--m-
|
|
121
|
+
--pf-v6-c-drawer--m-pill__splitter--m-vertical--Width: 0.625rem;
|
|
122
|
+
--pf-v6-c-drawer--m-pill__splitter--m-vertical--Height: calc(100% - (2 * var(--pf-v6-c-drawer--m-pill__panel--BorderRadius)));
|
|
123
|
+
--pf-v6-c-drawer--m-pill__splitter--m-vertical--MarginBlockStart: var(--pf-v6-c-drawer--m-pill__panel--BorderRadius);
|
|
124
|
+
--pf-v6-c-drawer--m-pill__splitter--after--BorderColor: transparent;
|
|
125
|
+
--pf-v6-c-drawer--m-pill__splitter--after--BorderInlineEndWidth: 0;
|
|
126
|
+
--pf-v6-c-drawer--m-pill__splitter--hover--after--BorderColor: var(--pf-t--global--border--color--hover);
|
|
127
|
+
--pf-v6-c-drawer--m-pill__splitter--focus--after--BorderColor: var(--pf-t--global--border--color--clicked);
|
|
128
|
+
--pf-v6-c-drawer--m-pill__splitter--active--after--BorderColor: var(--pf-t--global--border--color--clicked);
|
|
129
|
+
--pf-v6-c-drawer--m-pill__splitter--after--Width: 0.0625rem;
|
|
130
|
+
--pf-v6-c-drawer--m-pill__splitter--after--Height: auto;
|
|
131
|
+
--pf-v6-c-drawer--m-pill__splitter--after--InsetInlineStart: 50%;
|
|
132
|
+
--pf-v6-c-drawer--m-pill__splitter--after--InsetInlineEnd: auto;
|
|
133
|
+
--pf-v6-c-drawer--m-pill__splitter--after--TranslateX: -50%;
|
|
134
|
+
--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--Height: 0.5rem;
|
|
135
|
+
--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--Width: calc(100% - (2 * var(--pf-v6-c-drawer--m-pill__panel--BorderRadius)));
|
|
136
|
+
--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--MarginInlineStart: var(--pf-v6-c-drawer--m-pill__panel--BorderRadius);
|
|
137
|
+
--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--Width: auto;
|
|
138
|
+
--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--Height: 0.0625rem;
|
|
139
|
+
--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--BorderBlockStartWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
|
|
140
|
+
--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--BorderBlockEndWidth: 0;
|
|
141
|
+
--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--InsetBlockStart: 50%;
|
|
142
|
+
--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--InsetBlockEnd: auto;
|
|
143
|
+
--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--InsetInlineStart: 0;
|
|
144
|
+
--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--InsetInlineEnd: 0;
|
|
145
|
+
--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--TranslateY: -50%;
|
|
146
|
+
--pf-v6-c-drawer--m-inline__splitter--m-vertical--Width: 0.75rem;
|
|
112
147
|
--pf-v6-c-drawer--m-inline__splitter-handle--InsetInlineStart: 50%;
|
|
113
|
-
--pf-v6-c-drawer--m-inline--m-panel-bottom__splitter--Height: 0.
|
|
148
|
+
--pf-v6-c-drawer--m-inline--m-panel-bottom__splitter--Height: 0.75rem;
|
|
114
149
|
--pf-v6-c-drawer--m-inline--m-panel-bottom__splitter-handle--InsetBlockStart: 50%;
|
|
115
150
|
--pf-v6-c-drawer--m-inline--m-panel-bottom__splitter--after--BorderBlockStartWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
|
|
116
151
|
--pf-v6-c-drawer__splitter-handle--InsetBlockStart: 50%;
|
|
117
|
-
--pf-v6-c-drawer__splitter-handle--InsetInlineStart:
|
|
152
|
+
--pf-v6-c-drawer__splitter-handle--InsetInlineStart: 50%;
|
|
118
153
|
--pf-v6-c-drawer--m-panel-left__splitter-handle--InsetInlineStart: 50%;
|
|
119
|
-
--pf-v6-c-drawer--m-panel-bottom__splitter-handle--InsetBlockStart:
|
|
120
|
-
--pf-v6-c-drawer__splitter-handle--after--
|
|
154
|
+
--pf-v6-c-drawer--m-panel-bottom__splitter-handle--InsetBlockStart: 50%;
|
|
155
|
+
--pf-v6-c-drawer__splitter-handle--after--BackgroundColor: var(--pf-t--global--border--color--control--default);
|
|
156
|
+
--pf-v6-c-drawer__splitter-handle--hover--after--BackgroundColor: var(--pf-t--global--border--color--hover);
|
|
157
|
+
--pf-v6-c-drawer__splitter-handle--focus--after--BackgroundColor: var(--pf-t--global--border--color--clicked);
|
|
158
|
+
--pf-v6-c-drawer__splitter-handle--active--after--BackgroundColor: var(--pf-t--global--border--color--clicked);
|
|
159
|
+
--pf-v6-c-drawer__splitter-handle--after--BorderColor: var(--pf-t--global--border--color--high-contrast);
|
|
121
160
|
--pf-v6-c-drawer__splitter-handle--after--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
|
|
122
161
|
--pf-v6-c-drawer__splitter-handle--after--BorderInlineEndWidth: 0;
|
|
123
162
|
--pf-v6-c-drawer__splitter-handle--after--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
|
|
124
163
|
--pf-v6-c-drawer__splitter-handle--after--BorderInlineStartWidth: 0;
|
|
125
|
-
--pf-v6-c-drawer__splitter
|
|
164
|
+
--pf-v6-c-drawer__splitter-handle--after--BorderRadius: var(--pf-t--global--border--radius--pill);
|
|
165
|
+
--pf-v6-c-drawer__splitter--hover__splitter-handle--after--BorderColor: var(--pf-t--global--color--brand--hover);
|
|
126
166
|
--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBlockStartWidth: 0;
|
|
127
167
|
--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
|
|
128
168
|
--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBlockEndWidth: 0;
|
|
129
169
|
--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderInlineStartWidth: var(--pf-t--global--border--width--divider--default);
|
|
130
|
-
--pf-v6-c-drawer__splitter-handle--after--Width:
|
|
170
|
+
--pf-v6-c-drawer__splitter-handle--after--Width: 2.1875rem;
|
|
131
171
|
--pf-v6-c-drawer__splitter-handle--after--Height: 0.25rem;
|
|
132
172
|
--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Width: 0.25rem;
|
|
133
|
-
--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Height:
|
|
173
|
+
--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Height: 2.1875rem;
|
|
134
174
|
}
|
|
135
175
|
@media screen and (min-width: 75rem) {
|
|
136
176
|
.pf-v6-c-drawer {
|
|
@@ -186,6 +226,13 @@
|
|
|
186
226
|
.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) {
|
|
187
227
|
padding-inline-start: var(--pf-v6-c-drawer--m-inline__panel--PaddingInlineStart);
|
|
188
228
|
}
|
|
229
|
+
.pf-v6-c-drawer.pf-m-inline.pf-m-glass, .pf-v6-c-drawer.pf-m-static.pf-m-glass {
|
|
230
|
+
--pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-glass--BackgroundColor);
|
|
231
|
+
--pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer__panel--m-glass--BorderColor);
|
|
232
|
+
}
|
|
233
|
+
.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 {
|
|
234
|
+
backdrop-filter: var(--pf-v6-c-drawer__panel--m-glass--BackdropFilter);
|
|
235
|
+
}
|
|
189
236
|
.pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
|
|
190
237
|
order: 0;
|
|
191
238
|
margin-inline-end: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
|
|
@@ -235,6 +282,19 @@
|
|
|
235
282
|
--pf-v6-c-drawer__panel--BorderRadius: var(--pf-v6-c-drawer--m-pill__panel--BorderRadius);
|
|
236
283
|
--pf-v6-c-drawer--m-expanded__panel--inset: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--inset);
|
|
237
284
|
--pf-v6-c-drawer__panel--MarginBlock: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--inset);
|
|
285
|
+
--pf-v6-c-drawer__splitter--m-vertical--Width: var(--pf-v6-c-drawer--m-pill__splitter--m-vertical--Width);
|
|
286
|
+
--pf-v6-c-drawer__splitter--m-vertical--Height: var(--pf-v6-c-drawer--m-pill__splitter--m-vertical--Height);
|
|
287
|
+
--pf-v6-c-drawer__splitter--MarginBlockStart: var(--pf-v6-c-drawer--m-pill__splitter--m-vertical--MarginBlockStart);
|
|
288
|
+
--pf-v6-c-drawer__splitter--after--BorderColor: var(--pf-v6-c-drawer--m-pill__splitter--after--BorderColor);
|
|
289
|
+
--pf-v6-c-drawer__splitter--after--BorderInlineEndWidth: var(--pf-v6-c-drawer--m-pill__splitter--after--BorderInlineEndWidth);
|
|
290
|
+
--pf-v6-c-drawer__splitter--hover--after--BorderColor: var(--pf-v6-c-drawer--m-pill__splitter--hover--after--BorderColor);
|
|
291
|
+
--pf-v6-c-drawer__splitter--focus--after--BorderColor: var(--pf-v6-c-drawer--m-pill__splitter--focus--after--BorderColor);
|
|
292
|
+
--pf-v6-c-drawer__splitter--active--after--BorderColor: var(--pf-v6-c-drawer--m-pill__splitter--active--after--BorderColor);
|
|
293
|
+
--pf-v6-c-drawer__splitter--after--Width: var(--pf-v6-c-drawer--m-pill__splitter--after--Width);
|
|
294
|
+
--pf-v6-c-drawer__splitter--after--Height: var(--pf-v6-c-drawer--m-pill__splitter--after--Height);
|
|
295
|
+
--pf-v6-c-drawer__splitter--after--InsetInlineStart: var(--pf-v6-c-drawer--m-pill__splitter--after--InsetInlineStart);
|
|
296
|
+
--pf-v6-c-drawer__splitter--after--InsetInlineEnd: var(--pf-v6-c-drawer--m-pill__splitter--after--InsetInlineEnd);
|
|
297
|
+
--pf-v6-c-drawer__splitter--after--TranslateX: var(--pf-v6-c-drawer--m-pill__splitter--after--TranslateX);
|
|
238
298
|
}
|
|
239
299
|
.pf-v6-c-drawer.pf-m-pill > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
|
|
240
300
|
border-block-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderBlockStartWidth);
|
|
@@ -242,10 +302,24 @@
|
|
|
242
302
|
border-inline-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth);
|
|
243
303
|
border-inline-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth);
|
|
244
304
|
}
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
305
|
+
}
|
|
306
|
+
@media screen and (min-width: 48rem) {
|
|
307
|
+
.pf-v6-c-drawer.pf-m-pill.pf-m-panel-bottom {
|
|
308
|
+
--pf-v6-c-drawer__splitter--Height: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--Height);
|
|
309
|
+
--pf-v6-c-drawer__splitter--Width: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--Width);
|
|
310
|
+
--pf-v6-c-drawer__splitter--MarginBlockStart: 0;
|
|
311
|
+
--pf-v6-c-drawer__splitter--MarginInlineStart: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--MarginInlineStart);
|
|
312
|
+
--pf-v6-c-drawer__splitter--after--Width: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--Width);
|
|
313
|
+
--pf-v6-c-drawer__splitter--after--Height: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--Height);
|
|
314
|
+
--pf-v6-c-drawer__splitter--after--BorderBlockStartWidth: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--BorderBlockStartWidth);
|
|
315
|
+
--pf-v6-c-drawer--m-panel-bottom__splitter--after--BorderBlockEndWidth: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--BorderBlockEndWidth);
|
|
316
|
+
--pf-v6-c-drawer__splitter--after--BorderBlockEndWidth: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--BorderBlockEndWidth);
|
|
317
|
+
--pf-v6-c-drawer__splitter--after--InsetBlockStart: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--InsetBlockStart);
|
|
318
|
+
--pf-v6-c-drawer__splitter--after--InsetBlockEnd: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--InsetBlockEnd);
|
|
319
|
+
--pf-v6-c-drawer__splitter--after--TranslateX: initial;
|
|
320
|
+
--pf-v6-c-drawer__splitter--after--TranslateY: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--TranslateY);
|
|
321
|
+
--pf-v6-c-drawer__splitter--after--InsetInlineStart: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--InsetInlineStart);
|
|
322
|
+
--pf-v6-c-drawer__splitter--after--InsetInlineEnd: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--InsetInlineEnd);
|
|
249
323
|
}
|
|
250
324
|
}
|
|
251
325
|
|
|
@@ -412,8 +486,11 @@
|
|
|
412
486
|
display: none;
|
|
413
487
|
width: var(--pf-v6-c-drawer__splitter--Width);
|
|
414
488
|
height: var(--pf-v6-c-drawer__splitter--Height);
|
|
489
|
+
margin-block-start: var(--pf-v6-c-drawer__splitter--MarginBlockStart, 0);
|
|
490
|
+
margin-inline-start: var(--pf-v6-c-drawer__splitter--MarginInlineStart, 0);
|
|
415
491
|
cursor: var(--pf-v6-c-drawer__splitter--Cursor);
|
|
416
492
|
background-color: var(--pf-v6-c-drawer__splitter--BackgroundColor);
|
|
493
|
+
outline-offset: var(--pf-v6-c-drawer__splitter--focus--OutlineOffset);
|
|
417
494
|
}
|
|
418
495
|
.pf-v6-c-drawer__splitter.pf-m-vertical {
|
|
419
496
|
--pf-v6-c-drawer__splitter--Height: var(--pf-v6-c-drawer__splitter--m-vertical--Height);
|
|
@@ -426,21 +503,34 @@
|
|
|
426
503
|
--pf-v6-c-drawer__splitter-handle--after--BorderBlockEndWidth: var(--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBlockEndWidth);
|
|
427
504
|
--pf-v6-c-drawer__splitter-handle--after--BorderInlineStartWidth: var(--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderInlineStartWidth);
|
|
428
505
|
}
|
|
429
|
-
.pf-v6-c-drawer__splitter:hover
|
|
430
|
-
--pf-v6-c-drawer__splitter-handle--after--
|
|
506
|
+
.pf-v6-c-drawer__splitter:hover {
|
|
507
|
+
--pf-v6-c-drawer__splitter-handle--after--BackgroundColor: var(--pf-v6-c-drawer__splitter-handle--hover--after--BackgroundColor);
|
|
508
|
+
--pf-v6-c-drawer__splitter--after--BorderColor: var(--pf-v6-c-drawer__splitter--hover--after--BorderColor);
|
|
509
|
+
}
|
|
510
|
+
.pf-v6-c-drawer__splitter:focus {
|
|
511
|
+
--pf-v6-c-drawer__splitter-handle--after--BackgroundColor: var(--pf-v6-c-drawer__splitter-handle--focus--after--BackgroundColor);
|
|
512
|
+
--pf-v6-c-drawer__splitter--after--BorderColor: var(--pf-v6-c-drawer__splitter--focus--after--BorderColor);
|
|
513
|
+
}
|
|
514
|
+
.pf-v6-c-drawer__splitter:active {
|
|
515
|
+
--pf-v6-c-drawer__splitter-handle--after--BackgroundColor: var(--pf-v6-c-drawer__splitter-handle--active--after--BackgroundColor);
|
|
516
|
+
--pf-v6-c-drawer__splitter--after--BorderColor: var(--pf-v6-c-drawer__splitter--active--after--BorderColor);
|
|
431
517
|
}
|
|
432
518
|
.pf-v6-c-drawer__splitter::after {
|
|
433
519
|
position: absolute;
|
|
434
|
-
inset-block-start:
|
|
435
|
-
inset-block-end:
|
|
436
|
-
inset-inline-start:
|
|
437
|
-
inset-inline-end:
|
|
520
|
+
inset-block-start: var(--pf-v6-c-drawer__splitter--after--InsetBlockStart);
|
|
521
|
+
inset-block-end: var(--pf-v6-c-drawer__splitter--after--InsetBlockEnd);
|
|
522
|
+
inset-inline-start: var(--pf-v6-c-drawer__splitter--after--InsetInlineStart);
|
|
523
|
+
inset-inline-end: var(--pf-v6-c-drawer__splitter--after--InsetInlineEnd);
|
|
524
|
+
z-index: -1;
|
|
525
|
+
width: var(--pf-v6-c-drawer__splitter--after--Width);
|
|
526
|
+
height: var(--pf-v6-c-drawer__splitter--after--Height);
|
|
438
527
|
content: "";
|
|
439
528
|
border: solid var(--pf-v6-c-drawer__splitter--after--BorderColor);
|
|
440
529
|
border-block-start-width: var(--pf-v6-c-drawer__splitter--after--BorderBlockStartWidth);
|
|
441
530
|
border-block-end-width: var(--pf-v6-c-drawer__splitter--after--BorderBlockEndWidth);
|
|
442
531
|
border-inline-start-width: var(--pf-v6-c-drawer__splitter--after--BorderInlineStartWidth);
|
|
443
532
|
border-inline-end-width: var(--pf-v6-c-drawer__splitter--after--BorderInlineEndWidth);
|
|
533
|
+
translate: var(--pf-v6-c-drawer__splitter--after--TranslateX, 0) var(--pf-v6-c-drawer__splitter--after--TranslateY, 0);
|
|
444
534
|
}
|
|
445
535
|
|
|
446
536
|
.pf-v6-c-drawer__splitter-handle {
|
|
@@ -458,12 +548,14 @@
|
|
|
458
548
|
width: var(--pf-v6-c-drawer__splitter-handle--after--Width);
|
|
459
549
|
height: var(--pf-v6-c-drawer__splitter-handle--after--Height);
|
|
460
550
|
content: "";
|
|
551
|
+
background-color: var(--pf-v6-c-drawer__splitter-handle--after--BackgroundColor);
|
|
461
552
|
border-color: var(--pf-v6-c-drawer__splitter-handle--after--BorderColor);
|
|
462
553
|
border-style: solid;
|
|
463
554
|
border-block-start-width: var(--pf-v6-c-drawer__splitter-handle--after--BorderBlockStartWidth);
|
|
464
555
|
border-block-end-width: var(--pf-v6-c-drawer__splitter-handle--after--BorderBlockEndWidth);
|
|
465
556
|
border-inline-start-width: var(--pf-v6-c-drawer__splitter-handle--after--BorderInlineStartWidth);
|
|
466
557
|
border-inline-end-width: var(--pf-v6-c-drawer__splitter-handle--after--BorderInlineEndWidth);
|
|
558
|
+
border-radius: var(--pf-v6-c-drawer__splitter-handle--after--BorderRadius);
|
|
467
559
|
}
|
|
468
560
|
|
|
469
561
|
@media screen and (min-width: 48rem) {
|
|
@@ -471,6 +563,9 @@
|
|
|
471
563
|
--pf-v6-c-drawer--m-inline__panel--after--Width: var(--pf-v6-c-drawer--m-inline__panel--after--md--Width);
|
|
472
564
|
min-width: var(--pf-v6-c-drawer__panel--MinWidth);
|
|
473
565
|
}
|
|
566
|
+
:where(.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-inline:not(.pf-m-no-plain-on-glass) > .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-on-glass) > .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 {
|
|
567
|
+
background: transparent;
|
|
568
|
+
}
|
|
474
569
|
.pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
|
|
475
570
|
box-shadow: var(--pf-v6-c-drawer--m-expanded__panel--BoxShadow);
|
|
476
571
|
}
|
|
@@ -20,17 +20,19 @@ declare const _default: {
|
|
|
20
20
|
"static": "pf-m-static",
|
|
21
21
|
"noBorder": "pf-m-no-border",
|
|
22
22
|
"resizable": "pf-m-resizable",
|
|
23
|
+
"glass": "pf-m-glass",
|
|
23
24
|
"panelLeft": "pf-m-panel-left",
|
|
24
25
|
"expanded": "pf-m-expanded",
|
|
25
26
|
"resizing": "pf-m-resizing",
|
|
26
27
|
"pill": "pf-m-pill",
|
|
27
|
-
"noGlass": "pf-m-no-glass",
|
|
28
28
|
"secondary": "pf-m-secondary",
|
|
29
29
|
"noBackground": "pf-m-no-background",
|
|
30
30
|
"primary": "pf-m-primary",
|
|
31
31
|
"noPadding": "pf-m-no-padding",
|
|
32
32
|
"padding": "pf-m-padding",
|
|
33
33
|
"vertical": "pf-m-vertical",
|
|
34
|
+
"noPlainOnGlass": "pf-m-no-plain-on-glass",
|
|
35
|
+
"plain": "pf-m-plain",
|
|
34
36
|
"width_25": "pf-m-width-25",
|
|
35
37
|
"width_33": "pf-m-width-33",
|
|
36
38
|
"width_50": "pf-m-width-50",
|
|
@@ -61,6 +63,7 @@ declare const _default: {
|
|
|
61
63
|
"staticOnXl": "pf-m-static-on-xl",
|
|
62
64
|
"inlineOn_2xl": "pf-m-inline-on-2xl",
|
|
63
65
|
"staticOn_2xl": "pf-m-static-on-2xl"
|
|
64
|
-
}
|
|
66
|
+
},
|
|
67
|
+
"themeGlass": "pf-v6-theme-glass"
|
|
65
68
|
};
|
|
66
69
|
export default _default;
|
|
@@ -22,17 +22,19 @@ exports.default = {
|
|
|
22
22
|
"static": "pf-m-static",
|
|
23
23
|
"noBorder": "pf-m-no-border",
|
|
24
24
|
"resizable": "pf-m-resizable",
|
|
25
|
+
"glass": "pf-m-glass",
|
|
25
26
|
"panelLeft": "pf-m-panel-left",
|
|
26
27
|
"expanded": "pf-m-expanded",
|
|
27
28
|
"resizing": "pf-m-resizing",
|
|
28
29
|
"pill": "pf-m-pill",
|
|
29
|
-
"noGlass": "pf-m-no-glass",
|
|
30
30
|
"secondary": "pf-m-secondary",
|
|
31
31
|
"noBackground": "pf-m-no-background",
|
|
32
32
|
"primary": "pf-m-primary",
|
|
33
33
|
"noPadding": "pf-m-no-padding",
|
|
34
34
|
"padding": "pf-m-padding",
|
|
35
35
|
"vertical": "pf-m-vertical",
|
|
36
|
+
"noPlainOnGlass": "pf-m-no-plain-on-glass",
|
|
37
|
+
"plain": "pf-m-plain",
|
|
36
38
|
"width_25": "pf-m-width-25",
|
|
37
39
|
"width_33": "pf-m-width-33",
|
|
38
40
|
"width_50": "pf-m-width-50",
|
|
@@ -63,5 +65,6 @@ exports.default = {
|
|
|
63
65
|
"staticOnXl": "pf-m-static-on-xl",
|
|
64
66
|
"inlineOn_2xl": "pf-m-inline-on-2xl",
|
|
65
67
|
"staticOn_2xl": "pf-m-static-on-2xl"
|
|
66
|
-
}
|
|
68
|
+
},
|
|
69
|
+
"themeGlass": "pf-v6-theme-glass"
|
|
67
70
|
};
|
|
@@ -20,17 +20,19 @@ export default {
|
|
|
20
20
|
"static": "pf-m-static",
|
|
21
21
|
"noBorder": "pf-m-no-border",
|
|
22
22
|
"resizable": "pf-m-resizable",
|
|
23
|
+
"glass": "pf-m-glass",
|
|
23
24
|
"panelLeft": "pf-m-panel-left",
|
|
24
25
|
"expanded": "pf-m-expanded",
|
|
25
26
|
"resizing": "pf-m-resizing",
|
|
26
27
|
"pill": "pf-m-pill",
|
|
27
|
-
"noGlass": "pf-m-no-glass",
|
|
28
28
|
"secondary": "pf-m-secondary",
|
|
29
29
|
"noBackground": "pf-m-no-background",
|
|
30
30
|
"primary": "pf-m-primary",
|
|
31
31
|
"noPadding": "pf-m-no-padding",
|
|
32
32
|
"padding": "pf-m-padding",
|
|
33
33
|
"vertical": "pf-m-vertical",
|
|
34
|
+
"noPlainOnGlass": "pf-m-no-plain-on-glass",
|
|
35
|
+
"plain": "pf-m-plain",
|
|
34
36
|
"width_25": "pf-m-width-25",
|
|
35
37
|
"width_33": "pf-m-width-33",
|
|
36
38
|
"width_50": "pf-m-width-50",
|
|
@@ -61,5 +63,6 @@ export default {
|
|
|
61
63
|
"staticOnXl": "pf-m-static-on-xl",
|
|
62
64
|
"inlineOn_2xl": "pf-m-inline-on-2xl",
|
|
63
65
|
"staticOn_2xl": "pf-m-static-on-2xl"
|
|
64
|
-
}
|
|
66
|
+
},
|
|
67
|
+
"themeGlass": "pf-v6-theme-glass"
|
|
65
68
|
};
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
--pf-v6-c-dual-list-selector__item-count--MarginInlineStart: var(--pf-t--global--spacer--sm);
|
|
77
77
|
--pf-v6-c-dual-list-selector__item--c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
|
|
78
78
|
--pf-v6-c-dual-list-selector__item-toggle-icon--Rotate: 0;
|
|
79
|
-
--pf-v6-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate:
|
|
79
|
+
--pf-v6-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate: -180deg;
|
|
80
80
|
--pf-v6-c-dual-list-selector__item-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
|
|
81
81
|
--pf-v6-c-dual-list-selector__item-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
|
|
82
82
|
--pf-v6-c-dual-list-selector__item-toggle-icon--MinWidth: var(--pf-v6-c-dual-list-selector__list-item-row--FontSize);
|
|
@@ -7,8 +7,8 @@
|
|
|
7
7
|
--pf-v6-c-expandable-section__toggle-icon--Transition: transform var(--pf-v6-c-expandable-section__toggle-icon--TransitionDuration) var(--pf-v6-c-expandable-section__toggle-icon--TransitionTimingFunction);
|
|
8
8
|
--pf-v6-c-expandable-section__toggle-icon--Rotate: 0;
|
|
9
9
|
--pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
|
|
10
|
-
--pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate:
|
|
11
|
-
--pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate:
|
|
10
|
+
--pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate: -180deg;
|
|
11
|
+
--pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: 180deg;
|
|
12
12
|
--pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: 0s;
|
|
13
13
|
--pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
|
|
14
14
|
--pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: 0s;
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
--pf-v6-c-form__field-group-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
|
|
61
61
|
--pf-v6-c-form__field-group-toggle-icon--MinWidth: var(--pf-t--global--font--size--body--default);
|
|
62
62
|
--pf-v6-c-form__field-group-toggle-icon--Rotate: 0;
|
|
63
|
-
--pf-v6-c-form__field-group--m-expanded__toggle-icon--Rotate:
|
|
63
|
+
--pf-v6-c-form__field-group--m-expanded__toggle-icon--Rotate: -180deg;
|
|
64
64
|
--pf-v6-c-form__field-group-header--PaddingBlockStart: var(--pf-t--global--spacer--md);
|
|
65
65
|
--pf-v6-c-form__field-group-header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
|
|
66
66
|
--pf-v6-c-form__field-group-header--GridColumn: 1 / 3;
|
|
@@ -26,14 +26,19 @@
|
|
|
26
26
|
--pf-v6-c-jump-links__list__list__link--PaddingInlineStart: var(--pf-t--global--spacer--lg);
|
|
27
27
|
--pf-v6-c-jump-links__list__list__link--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
|
28
28
|
--pf-v6-c-jump-links__link--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--sm));
|
|
29
|
+
--pf-v6-c-jump-links__link--before--Height: var(--pf-v6-c-jump-links__item--m-current__link--before--BorderBlockStartWidth);
|
|
30
|
+
--pf-v6-c-jump-links__link--before--Width: auto;
|
|
29
31
|
--pf-v6-c-jump-links__link--before--BorderBlockStartWidth: 0;
|
|
30
32
|
--pf-v6-c-jump-links__link--before--BorderInlineEndWidth: 0;
|
|
31
33
|
--pf-v6-c-jump-links__link--before--BorderBlockEndWidth: 0;
|
|
32
34
|
--pf-v6-c-jump-links__link--before--BorderInlineStartWidth: 0;
|
|
33
35
|
--pf-v6-c-jump-links__link--before--BorderColor: transparent;
|
|
36
|
+
--pf-v6-c-jump-links__link--before--BorderRadius: var(--pf-t--global--border--radius--pill);
|
|
34
37
|
--pf-v6-c-jump-links__item--m-current__link--before--BorderBlockStartWidth: var(--pf-t--global--border--width--extra-strong);
|
|
35
38
|
--pf-v6-c-jump-links__item--m-current__link--before--BorderInlineStartWidth: 0;
|
|
36
|
-
--pf-v6-c-jump-links__item--m-current__link--before--BorderColor: var(--pf-t--global--
|
|
39
|
+
--pf-v6-c-jump-links__item--m-current__link--before--BorderColor: var(--pf-t--global--color--brand--accent--default);
|
|
40
|
+
--pf-v6-c-jump-links--m-vertical__link--before--Height: auto;
|
|
41
|
+
--pf-v6-c-jump-links--m-vertical__link--before--Width: var(--pf-v6-c-jump-links__item--m-current__link--before--BorderInlineStartWidth);
|
|
37
42
|
--pf-v6-c-jump-links--m-vertical__item--m-current__link--before--BorderBlockStartWidth: 0;
|
|
38
43
|
--pf-v6-c-jump-links--m-vertical__item--m-current__link--before--BorderInlineStartWidth: var(--pf-t--global--border--width--extra-strong);
|
|
39
44
|
--pf-v6-c-jump-links__link-text--Color: var(--pf-t--global--text--color--subtle);
|
|
@@ -48,7 +53,7 @@
|
|
|
48
53
|
--pf-v6-c-jump-links__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
|
|
49
54
|
--pf-v6-c-jump-links__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
|
|
50
55
|
--pf-v6-c-jump-links__toggle-icon--Rotate: 0;
|
|
51
|
-
--pf-v6-c-jump-links--m-expanded__toggle-icon--Rotate:
|
|
56
|
+
--pf-v6-c-jump-links--m-expanded__toggle-icon--Rotate: -180deg;
|
|
52
57
|
}
|
|
53
58
|
|
|
54
59
|
.pf-v6-c-jump-links {
|
|
@@ -65,6 +70,8 @@
|
|
|
65
70
|
--pf-v6-c-jump-links__list--PaddingInlineEnd: var(--pf-v6-c-jump-links--m-vertical__list--PaddingInlineEnd);
|
|
66
71
|
--pf-v6-c-jump-links__list--PaddingBlockEnd: var(--pf-v6-c-jump-links--m-vertical__list--PaddingBlockEnd);
|
|
67
72
|
--pf-v6-c-jump-links__list--PaddingInlineStart: var(--pf-v6-c-jump-links--m-vertical__list--PaddingInlineStart);
|
|
73
|
+
--pf-v6-c-jump-links__link--before--Width: var(--pf-v6-c-jump-links--m-vertical__link--before--Width);
|
|
74
|
+
--pf-v6-c-jump-links__link--before--Height: var(--pf-v6-c-jump-links--m-vertical__link--before--Height);
|
|
68
75
|
--pf-v6-c-jump-links__list--before--BorderBlockStartWidth: var(--pf-v6-c-jump-links--m-vertical__list--before--BorderBlockStartWidth);
|
|
69
76
|
--pf-v6-c-jump-links__list--before--BorderInlineStartWidth: var(--pf-v6-c-jump-links--m-vertical__list--before--BorderInlineStartWidth);
|
|
70
77
|
--pf-v6-c-jump-links__item--m-current__link--before--BorderBlockStartWidth: var(--pf-v6-c-jump-links--m-vertical__item--m-current__link--before--BorderBlockStartWidth);
|
|
@@ -195,6 +202,8 @@
|
|
|
195
202
|
.pf-v6-c-jump-links__link::before {
|
|
196
203
|
position: absolute;
|
|
197
204
|
inset: 0;
|
|
205
|
+
width: var(--pf-v6-c-jump-links__link--before--Width);
|
|
206
|
+
height: var(--pf-v6-c-jump-links__link--before--Height);
|
|
198
207
|
pointer-events: none;
|
|
199
208
|
content: "";
|
|
200
209
|
border-color: var(--pf-v6-c-jump-links__link--before--BorderColor);
|
|
@@ -203,6 +212,7 @@
|
|
|
203
212
|
border-block-end-width: var(--pf-v6-c-jump-links__link--before--BorderBlockEndWidth);
|
|
204
213
|
border-inline-start-width: var(--pf-v6-c-jump-links__link--before--BorderInlineStartWidth);
|
|
205
214
|
border-inline-end-width: var(--pf-v6-c-jump-links__link--before--BorderInlineEndWidth);
|
|
215
|
+
border-radius: var(--pf-v6-c-jump-links__link--before--BorderRadius);
|
|
206
216
|
}
|
|
207
217
|
|
|
208
218
|
.pf-v6-c-jump-links__item {
|
|
@@ -37,11 +37,13 @@
|
|
|
37
37
|
}
|
|
38
38
|
}
|
|
39
39
|
.pf-v6-c-login {
|
|
40
|
-
--pf-v6-c-login__main--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
40
|
+
--pf-v6-c-login__main--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default, var(--pf-t--global--background--color--primary--default));
|
|
41
|
+
--pf-v6-c-login__main--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
|
|
41
42
|
--pf-v6-c-login__main--MarginBlockEnd: var(--pf-t--global--spacer--lg);
|
|
42
43
|
--pf-v6-c-login__main--BorderRadius: var(--pf-t--global--border--radius--large);
|
|
43
|
-
--pf-v6-c-login__main--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
44
|
-
--pf-v6-c-login__main--BorderColor: var(--pf-t--global--border--color--high-contrast);
|
|
44
|
+
--pf-v6-c-login__main--BorderWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--high-contrast--regular));
|
|
45
|
+
--pf-v6-c-login__main--BorderColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--high-contrast));
|
|
46
|
+
--pf-v6-c-login__main--BoxShadow: var(--pf-t--global--box-shadow--glass--default);
|
|
45
47
|
}
|
|
46
48
|
@media (min-width: 75rem) {
|
|
47
49
|
.pf-v6-c-login {
|
|
@@ -164,8 +166,10 @@
|
|
|
164
166
|
align-self: start;
|
|
165
167
|
margin-block-end: var(--pf-v6-c-login__main--MarginBlockEnd);
|
|
166
168
|
background-color: var(--pf-v6-c-login__main--BackgroundColor);
|
|
169
|
+
backdrop-filter: var(--pf-v6-c-login__main--BackdropFilter);
|
|
167
170
|
border: var(--pf-v6-c-login__main--BorderWidth) solid var(--pf-v6-c-login__main--BorderColor);
|
|
168
171
|
border-radius: var(--pf-v6-c-login__main--BorderRadius);
|
|
172
|
+
box-shadow: var(--pf-v6-c-login__main--BoxShadow);
|
|
169
173
|
}
|
|
170
174
|
.pf-v6-c-login__main > :first-child:not(.pf-v6-c-login__main-header) {
|
|
171
175
|
padding-block-start: var(--pf-v6-c-login__main-header--PaddingBlockStart);
|
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
--pf-v6-c-masthead--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
|
9
9
|
--pf-v6-c-masthead__main--ColumnGap: var(--pf-t--global--spacer--md);
|
|
10
10
|
--pf-v6-c-masthead__main--MarginInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
|
|
11
|
+
--pf-v6-c-masthead--m-docked__main--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
|
|
11
12
|
--pf-v6-c-masthead__logo--MaxHeight: 2.375rem;
|
|
12
13
|
--pf-v6-c-masthead__logo--Width: 11.8125rem;
|
|
13
14
|
--pf-v6-c-masthead__toggle--Size: var(--pf-t--global--icon--size--xl);
|
|
@@ -42,7 +43,7 @@
|
|
|
42
43
|
--pf-v6-c-masthead--m-docked--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
|
|
43
44
|
--pf-v6-c-masthead--m-docked--PaddingInlineStart: var(--pf-t--global--spacer--sm);
|
|
44
45
|
--pf-v6-c-masthead--m-docked--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
|
|
45
|
-
--pf-v6-c-masthead--m-docked--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
|
|
46
|
+
--pf-v6-c-masthead--m-docked--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default, var(--pf-t--global--background--color--primary--default));
|
|
46
47
|
--pf-v6-c-masthead--m-docked--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
|
|
47
48
|
--pf-v6-c-masthead--m-docked--c-toolbar--Height: 100%;
|
|
48
49
|
--pf-v6-c-masthead__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
|
|
@@ -113,7 +114,7 @@
|
|
|
113
114
|
--pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
|
|
114
115
|
--pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
|
|
115
116
|
--pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
|
|
116
|
-
--pf-v6-c-masthead--BackgroundColor:
|
|
117
|
+
--pf-v6-c-masthead--BackgroundColor: transparent;
|
|
117
118
|
--pf-v6-c-masthead--GridTemplateRows: var(--pf-v6-c-masthead--m-docked--GridTemplateRows);
|
|
118
119
|
--pf-v6-c-masthead--PaddingBlockStart: var(--pf-v6-c-masthead--m-docked--PaddingBlockStart);
|
|
119
120
|
--pf-v6-c-masthead--PaddingBlockEnd: var(--pf-v6-c-masthead--m-docked--PaddingBlockEnd);
|
|
@@ -124,24 +125,58 @@
|
|
|
124
125
|
--pf-v6-c-masthead--m-display-inline--breakpoint--xl--GridTemplateColumns: auto;
|
|
125
126
|
--pf-v6-c-masthead__main--GridColumn: auto;
|
|
126
127
|
--pf-v6-c-masthead__content--GridColumn: auto;
|
|
127
|
-
--pf-v6-c-masthead__logo--Width: auto;
|
|
128
128
|
--pf-v6-c-masthead__main--MarginInlineEnd: 0;
|
|
129
129
|
display: flex;
|
|
130
130
|
flex-direction: column;
|
|
131
|
-
align-items:
|
|
132
|
-
width: fit-content;
|
|
131
|
+
align-items: stretch;
|
|
133
132
|
height: 100%;
|
|
134
|
-
|
|
133
|
+
border: 0;
|
|
134
|
+
box-shadow: none;
|
|
135
|
+
}
|
|
136
|
+
.pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__logo {
|
|
137
|
+
width: revert;
|
|
138
|
+
}
|
|
139
|
+
.pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__logo.pf-m-compact {
|
|
140
|
+
display: none;
|
|
141
|
+
max-width: 2.3125rem;
|
|
142
|
+
max-height: revert;
|
|
143
|
+
}
|
|
144
|
+
.pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__main {
|
|
145
|
+
flex-direction: column;
|
|
146
|
+
row-gap: var(--pf-v6-c-masthead--m-docked__main--RowGap);
|
|
147
|
+
align-items: flex-start;
|
|
135
148
|
}
|
|
136
149
|
.pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__content {
|
|
137
150
|
flex-grow: 1;
|
|
138
151
|
flex-direction: column;
|
|
152
|
+
align-items: stretch;
|
|
139
153
|
align-self: revert;
|
|
140
154
|
}
|
|
141
155
|
.pf-v6-c-masthead.pf-m-docked .pf-v6-c-toolbar {
|
|
142
|
-
--pf-v6-c-
|
|
156
|
+
--pf-v6-c-toolbar--m-vertical--Width: auto;
|
|
143
157
|
height: var(--pf-v6-c-masthead--m-docked--c-toolbar--Height);
|
|
144
158
|
}
|
|
159
|
+
@media (min-width: 62rem) {
|
|
160
|
+
.pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__main {
|
|
161
|
+
align-items: center;
|
|
162
|
+
}
|
|
163
|
+
.pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__logo {
|
|
164
|
+
display: none;
|
|
165
|
+
}
|
|
166
|
+
.pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__logo.pf-m-compact {
|
|
167
|
+
display: revert;
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
.pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__logo {
|
|
171
|
+
display: revert;
|
|
172
|
+
}
|
|
173
|
+
.pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__logo.pf-m-compact {
|
|
174
|
+
display: none;
|
|
175
|
+
}
|
|
176
|
+
.pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__main {
|
|
177
|
+
align-items: flex-start;
|
|
178
|
+
}
|
|
179
|
+
|
|
145
180
|
.pf-v6-c-masthead .pf-v6-c-toolbar__content-section {
|
|
146
181
|
flex-wrap: nowrap;
|
|
147
182
|
min-width: 0;
|
|
@@ -203,6 +238,13 @@
|
|
|
203
238
|
padding-inline-start: var(--pf-t--global--spacer--2xl);
|
|
204
239
|
padding-inline-end: var(--pf-t--global--spacer--2xl);
|
|
205
240
|
}
|
|
241
|
+
:where(.pf-v6-theme-glass) .pf-v6-c-masthead:not(.pf-m-docked) {
|
|
242
|
+
margin-block-end: var(--pf-t--global--spacer--inset--page-chrome);
|
|
243
|
+
background-color: var(--pf-t--global--background--color--glass--primary--default);
|
|
244
|
+
backdrop-filter: var(--pf-t--global--background--filter--glass--blur--primary);
|
|
245
|
+
border-block-end: var(--pf-t--global--border--width--glass--default) solid var(--pf-t--global--border--color--glass--default);
|
|
246
|
+
box-shadow: var(--pf-t--global--box-shadow--glass--default);
|
|
247
|
+
}
|
|
206
248
|
|
|
207
249
|
.pf-v6-c-masthead__main {
|
|
208
250
|
display: var(--pf-v6-c-masthead__main--Display);
|
|
@@ -10,6 +10,8 @@ declare const _default: {
|
|
|
10
10
|
"modifiers": {
|
|
11
11
|
"resizeObserver": "pf-m-resize-observer",
|
|
12
12
|
"docked": "pf-m-docked",
|
|
13
|
+
"compact": "pf-m-compact",
|
|
14
|
+
"textExpanded": "pf-m-text-expanded",
|
|
13
15
|
"displayStack": "pf-m-display-stack",
|
|
14
16
|
"displayInline": "pf-m-display-inline",
|
|
15
17
|
"insetNone": "pf-m-inset-none",
|
|
@@ -29,6 +31,8 @@ declare const _default: {
|
|
|
29
31
|
"displayStackOn_2xl": "pf-m-display-stack-on-2xl",
|
|
30
32
|
"displayInlineOn_2xl": "pf-m-display-inline-on-2xl"
|
|
31
33
|
},
|
|
34
|
+
"pageDock": "pf-v6-c-page__dock",
|
|
35
|
+
"themeGlass": "pf-v6-theme-glass",
|
|
32
36
|
"toolbar": "pf-v6-c-toolbar",
|
|
33
37
|
"toolbarContentSection": "pf-v6-c-toolbar__content-section",
|
|
34
38
|
"toolbarExpandableContent": "pf-v6-c-toolbar__expandable-content"
|
|
@@ -12,6 +12,8 @@ exports.default = {
|
|
|
12
12
|
"modifiers": {
|
|
13
13
|
"resizeObserver": "pf-m-resize-observer",
|
|
14
14
|
"docked": "pf-m-docked",
|
|
15
|
+
"compact": "pf-m-compact",
|
|
16
|
+
"textExpanded": "pf-m-text-expanded",
|
|
15
17
|
"displayStack": "pf-m-display-stack",
|
|
16
18
|
"displayInline": "pf-m-display-inline",
|
|
17
19
|
"insetNone": "pf-m-inset-none",
|
|
@@ -31,6 +33,8 @@ exports.default = {
|
|
|
31
33
|
"displayStackOn_2xl": "pf-m-display-stack-on-2xl",
|
|
32
34
|
"displayInlineOn_2xl": "pf-m-display-inline-on-2xl"
|
|
33
35
|
},
|
|
36
|
+
"pageDock": "pf-v6-c-page__dock",
|
|
37
|
+
"themeGlass": "pf-v6-theme-glass",
|
|
34
38
|
"toolbar": "pf-v6-c-toolbar",
|
|
35
39
|
"toolbarContentSection": "pf-v6-c-toolbar__content-section",
|
|
36
40
|
"toolbarExpandableContent": "pf-v6-c-toolbar__expandable-content"
|
|
@@ -10,6 +10,8 @@ export default {
|
|
|
10
10
|
"modifiers": {
|
|
11
11
|
"resizeObserver": "pf-m-resize-observer",
|
|
12
12
|
"docked": "pf-m-docked",
|
|
13
|
+
"compact": "pf-m-compact",
|
|
14
|
+
"textExpanded": "pf-m-text-expanded",
|
|
13
15
|
"displayStack": "pf-m-display-stack",
|
|
14
16
|
"displayInline": "pf-m-display-inline",
|
|
15
17
|
"insetNone": "pf-m-inset-none",
|
|
@@ -29,6 +31,8 @@ export default {
|
|
|
29
31
|
"displayStackOn_2xl": "pf-m-display-stack-on-2xl",
|
|
30
32
|
"displayInlineOn_2xl": "pf-m-display-inline-on-2xl"
|
|
31
33
|
},
|
|
34
|
+
"pageDock": "pf-v6-c-page__dock",
|
|
35
|
+
"themeGlass": "pf-v6-theme-glass",
|
|
32
36
|
"toolbar": "pf-v6-c-toolbar",
|
|
33
37
|
"toolbarContentSection": "pf-v6-c-toolbar__content-section",
|
|
34
38
|
"toolbarExpandableContent": "pf-v6-c-toolbar__expandable-content"
|