@patternfly/patternfly 6.5.0-prerelease.64 → 6.5.0-prerelease.65
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/base/patternfly-svg-icons.css +6 -0
- package/base/patternfly-svg-icons.scss +6 -0
- package/components/Page/page.css +83 -34
- package/components/Page/page.scss +94 -39
- package/components/Table/table.css +2 -2
- package/components/Table/table.scss +2 -2
- package/components/_index.css +85 -36
- package/docs/components/Table/examples/Table.md +1879 -151
- package/docs/demos/Table/examples/Table.md +368 -32
- package/package.json +21 -1
- package/patternfly-base-no-globals.css +6 -0
- package/patternfly-base.css +6 -0
- package/patternfly-no-globals.css +92 -37
- package/patternfly.css +92 -37
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/patternfly.scss +3 -1
package/components/Page/page.css
CHANGED
|
@@ -43,6 +43,7 @@
|
|
|
43
43
|
--pf-v6-c-page__sidebar--TranslateZ: 0;
|
|
44
44
|
--pf-v6-c-page__sidebar--m-expanded--TranslateX: 0;
|
|
45
45
|
--pf-v6-c-page__sidebar--xl--TranslateX: 0;
|
|
46
|
+
--pf-v6-c-page__sidebar--MarginBlockStart: 0;
|
|
46
47
|
--pf-v6-c-page__sidebar--MarginInlineEnd: calc(var(--pf-t--global--spacer--inset--page-chrome) / 2);
|
|
47
48
|
--pf-v6-c-page__sidebar--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
|
|
48
49
|
--pf-v6-c-page__sidebar--PaddingInlineStart: 0;
|
|
@@ -60,6 +61,20 @@
|
|
|
60
61
|
}
|
|
61
62
|
}
|
|
62
63
|
.pf-v6-c-page {
|
|
64
|
+
--pf-v6-c-page__sidebar-main--PaddingBlockStart: 0;
|
|
65
|
+
--pf-v6-c-page__sidebar-main--PaddingBlockEnd: 0;
|
|
66
|
+
--pf-v6-c-page__sidebar-main--PaddingInlineStart: 0;
|
|
67
|
+
--pf-v6-c-page__sidebar-main--PaddingInlineEnd: 0;
|
|
68
|
+
--pf-v6-c-page__sidebar-main--MarginBlockStart: 0;
|
|
69
|
+
--pf-v6-c-page__sidebar-main--MarginBlockEnd: 0;
|
|
70
|
+
--pf-v6-c-page__sidebar-main--MarginInlineStart: 0;
|
|
71
|
+
--pf-v6-c-page__sidebar-main--MarginInlineEnd: 0;
|
|
72
|
+
--pf-v6-c-page__sidebar-main--BackgroundColor: transparent;
|
|
73
|
+
--pf-v6-c-page__sidebar-main--BackdropFilter: none;
|
|
74
|
+
--pf-v6-c-page__sidebar-main--BorderWidth: 0;
|
|
75
|
+
--pf-v6-c-page__sidebar-main--BorderColor: transparent;
|
|
76
|
+
--pf-v6-c-page__sidebar-main--BorderRadius: 0;
|
|
77
|
+
--pf-v6-c-page__sidebar-main--BoxShadow: none;
|
|
63
78
|
--pf-v6-c-page__sidebar-header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
|
|
64
79
|
--pf-v6-c-page__sidebar-header--BorderBlockEndColor: var(--pf-t--global--border--color--default);
|
|
65
80
|
--pf-v6-c-page__sidebar-header--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
|
@@ -130,6 +145,10 @@
|
|
|
130
145
|
--pf-v6-c-page__main-section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
131
146
|
--pf-v6-c-page__main-section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
|
132
147
|
--pf-v6-c-page__main-breadcrumb--page__main-tabs--PaddingBlockStart: var(--pf-t--global--spacer--md);
|
|
148
|
+
--pf-v6-c-page__main-section--m-secondary--BorderBlockStartWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--high-contrast--regular));
|
|
149
|
+
--pf-v6-c-page__main-section--m-secondary--BorderBlockStartColor: var(--pf-t--global--border--color--subtle);
|
|
150
|
+
--pf-v6-c-page__main-section--m-secondary--BorderBlockEndWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--high-contrast--regular));
|
|
151
|
+
--pf-v6-c-page__main-section--m-secondary--BorderBlockEndColor: var(--pf-t--global--border--color--subtle);
|
|
133
152
|
--pf-v6-c-page--section--m-limit-width--MaxWidth: calc(125rem - var(--pf-v6-c-page__sidebar--Width));
|
|
134
153
|
--pf-v6-c-page--section--m-sticky-top--ZIndex: var(--pf-t--global--z-index--md);
|
|
135
154
|
--pf-v6-c-page--section--m-sticky-top--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
|
|
@@ -172,11 +191,54 @@
|
|
|
172
191
|
--pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
|
|
173
192
|
--pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--lg);
|
|
174
193
|
--pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
|
|
194
|
+
--pf-v6-c-page--BackgroundColor--glass: transparent;
|
|
195
|
+
--pf-v6-c-page__sidebar--Width--base--glass: calc(18.125rem + var(--pf-t--global--spacer--inset--page-chrome) * 2);
|
|
196
|
+
--pf-v6-c-page__sidebar-body--PaddingInlineStart--glass: var(--pf-t--global--spacer--lg);
|
|
197
|
+
--pf-v6-c-page__sidebar-body--PaddingInlineEnd--glass: var(--pf-t--global--spacer--lg);
|
|
198
|
+
--pf-v6-c-page__sidebar-main--PaddingBlockEnd--glass: var(--pf-v6-c-page__sidebar--PaddingBlockEnd);
|
|
199
|
+
--pf-v6-c-page__sidebar-main--PaddingInlineStart--glass: var(--pf-v6-c-page__sidebar--PaddingInlineStart);
|
|
200
|
+
--pf-v6-c-page__sidebar-main--PaddingInlineEnd--glass: var(--pf-v6-c-page__sidebar--PaddingInlineEnd);
|
|
201
|
+
--pf-v6-c-page__sidebar-main--MarginBlockStart--glass: calc(var(--pf-t--global--spacer--sm) * -1);
|
|
202
|
+
--pf-v6-c-page__sidebar-main--MarginBlockEnd--glass: var(--pf-t--global--spacer--md);
|
|
203
|
+
--pf-v6-c-page__sidebar-main--MarginInlineStart--glass: var(--pf-t--global--spacer--md);
|
|
204
|
+
--pf-v6-c-page__sidebar-main--MarginInlineEnd--glass: var(--pf-t--global--spacer--md);
|
|
205
|
+
--pf-v6-c-page__sidebar-main--BackgroundColor--glass: var(--pf-v6-c-page__sidebar--BackgroundColor);
|
|
206
|
+
--pf-v6-c-page__sidebar-main--BackdropFilter--glass: var(--pf-v6-c-page__sidebar--BackdropFilter);
|
|
207
|
+
--pf-v6-c-page__sidebar-main--BorderWidth--glass: var(--pf-t--global--border--width--glass--default);
|
|
208
|
+
--pf-v6-c-page__sidebar-main--BorderColor--glass: var(--pf-t--global--border--color--glass--default);
|
|
209
|
+
--pf-v6-c-page__sidebar-main--BorderRadius--glass: var(--pf-t--global--border--radius--glass--default);
|
|
210
|
+
--pf-v6-c-page__sidebar-main--BoxShadow--glass: var(--pf-t--global--box-shadow--glass--default);
|
|
211
|
+
--pf-v6-c-page__sidebar-main--xl--MarginBlockStart--glass: 0;
|
|
212
|
+
--pf-v6-c-page__sidebar-main--xl--MarginBlockEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
|
|
213
|
+
--pf-v6-c-page__sidebar-main--xl--MarginInlineStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
|
|
214
|
+
--pf-v6-c-page__sidebar-main--xl--MarginInlineEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
|
|
175
215
|
}
|
|
176
216
|
:where(.pf-v6-theme-glass) .pf-v6-c-page {
|
|
177
|
-
--pf-v6-c-
|
|
178
|
-
--pf-v6-c-page__sidebar
|
|
179
|
-
--pf-v6-c-page__sidebar-body--
|
|
217
|
+
--pf-v6-c-page--BackgroundColor: var(--pf-v6-c-page--BackgroundColor--glass);
|
|
218
|
+
--pf-v6-c-page__sidebar--Width--base: var(--pf-v6-c-page__sidebar--Width--base--glass);
|
|
219
|
+
--pf-v6-c-page__sidebar-body--PaddingInlineStart: var(--pf-v6-c-page__sidebar-body--PaddingInlineStart--glass);
|
|
220
|
+
--pf-v6-c-page__sidebar-body--PaddingInlineEnd: var(--pf-v6-c-page__sidebar-body--PaddingInlineEnd--glass);
|
|
221
|
+
--pf-v6-c-page__sidebar-main--PaddingBlockEnd: var(--pf-v6-c-page__sidebar-main--PaddingBlockEnd--glass);
|
|
222
|
+
--pf-v6-c-page__sidebar-main--PaddingInlineStart: var(--pf-v6-c-page__sidebar-main--PaddingInlineStart--glass);
|
|
223
|
+
--pf-v6-c-page__sidebar-main--PaddingInlineEnd: var(--pf-v6-c-page__sidebar-main--PaddingInlineEnd--glass);
|
|
224
|
+
--pf-v6-c-page__sidebar-main--MarginBlockStart: var(--pf-v6-c-page__sidebar-main--MarginBlockStart--glass);
|
|
225
|
+
--pf-v6-c-page__sidebar-main--MarginBlockEnd: var(--pf-v6-c-page__sidebar-main--MarginBlockEnd--glass);
|
|
226
|
+
--pf-v6-c-page__sidebar-main--MarginInlineStart: var(--pf-v6-c-page__sidebar-main--MarginInlineStart--glass);
|
|
227
|
+
--pf-v6-c-page__sidebar-main--MarginInlineEnd: var(--pf-v6-c-page__sidebar-main--MarginInlineEnd--glass);
|
|
228
|
+
--pf-v6-c-page__sidebar-main--BackgroundColor: var(--pf-v6-c-page__sidebar-main--BackgroundColor--glass);
|
|
229
|
+
--pf-v6-c-page__sidebar-main--BackdropFilter: var(--pf-v6-c-page__sidebar-main--BackdropFilter--glass);
|
|
230
|
+
--pf-v6-c-page__sidebar-main--BorderWidth: var(--pf-v6-c-page__sidebar-main--BorderWidth--glass);
|
|
231
|
+
--pf-v6-c-page__sidebar-main--BorderColor: var(--pf-v6-c-page__sidebar-main--BorderColor--glass);
|
|
232
|
+
--pf-v6-c-page__sidebar-main--BorderRadius: var(--pf-v6-c-page__sidebar-main--BorderRadius--glass);
|
|
233
|
+
--pf-v6-c-page__sidebar-main--BoxShadow: var(--pf-v6-c-page__sidebar-main--BoxShadow--glass);
|
|
234
|
+
}
|
|
235
|
+
@media (min-width: 75rem) {
|
|
236
|
+
.pf-v6-c-page {
|
|
237
|
+
--pf-v6-c-page__sidebar-main--MarginBlockStart--glass: var(--pf-v6-c-page__sidebar-main--xl--MarginBlockStart--glass);
|
|
238
|
+
--pf-v6-c-page__sidebar-main--MarginBlockEnd--glass: var(--pf-v6-c-page__sidebar-main--xl--MarginBlockEnd--glass);
|
|
239
|
+
--pf-v6-c-page__sidebar-main--MarginInlineStart--glass: var(--pf-v6-c-page__sidebar-main--xl--MarginInlineStart--glass);
|
|
240
|
+
--pf-v6-c-page__sidebar-main--MarginInlineEnd--glass: var(--pf-v6-c-page__sidebar-main--xl--MarginInlineEnd--glass);
|
|
241
|
+
}
|
|
180
242
|
}
|
|
181
243
|
|
|
182
244
|
.pf-v6-c-page {
|
|
@@ -189,9 +251,6 @@
|
|
|
189
251
|
max-height: 100%;
|
|
190
252
|
background-color: var(--pf-v6-c-page--BackgroundColor);
|
|
191
253
|
}
|
|
192
|
-
:where(:root.pf-v6-theme-glass) .pf-v6-c-page {
|
|
193
|
-
background-color: transparent;
|
|
194
|
-
}
|
|
195
254
|
@media (min-width: 75rem) {
|
|
196
255
|
.pf-v6-c-page {
|
|
197
256
|
--pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--xl--Width);
|
|
@@ -341,6 +400,7 @@
|
|
|
341
400
|
padding-block-end: var(--pf-v6-c-page__sidebar--PaddingBlockEnd);
|
|
342
401
|
padding-inline-start: var(--pf-v6-c-page__sidebar--PaddingInlineStart);
|
|
343
402
|
padding-inline-end: var(--pf-v6-c-page__sidebar--PaddingInlineEnd);
|
|
403
|
+
margin-block-start: var(--pf-v6-c-page__sidebar--MarginBlockStart);
|
|
344
404
|
margin-inline-end: var(--pf-v6-c-page__sidebar--MarginInlineEnd);
|
|
345
405
|
overflow-x: hidden;
|
|
346
406
|
overflow-y: auto;
|
|
@@ -372,44 +432,33 @@
|
|
|
372
432
|
:where(.pf-v6-theme-glass) .pf-v6-c-page__sidebar {
|
|
373
433
|
min-height: 0;
|
|
374
434
|
padding: 0;
|
|
375
|
-
overflow:
|
|
435
|
+
overflow: revert;
|
|
376
436
|
background: transparent;
|
|
377
437
|
}
|
|
378
438
|
:where(.pf-v6-theme-glass) .pf-v6-c-page__sidebar.pf-m-expanded {
|
|
379
439
|
box-shadow: none;
|
|
380
440
|
}
|
|
381
|
-
:where(.pf-v6-theme-glass) .pf-v6-c-page__sidebar
|
|
382
|
-
padding-block-end: var(--pf-v6-c-page__sidebar--PaddingBlockEnd);
|
|
383
|
-
padding-inline-start: var(--pf-v6-c-page__sidebar--PaddingInlineStart);
|
|
384
|
-
padding-inline-end: var(--pf-v6-c-page__sidebar--PaddingInlineEnd);
|
|
385
|
-
margin-block-start: calc(var(--pf-t--global--spacer--sm) * -1);
|
|
386
|
-
margin-block-end: var(--pf-t--global--spacer--md);
|
|
387
|
-
margin-inline-start: var(--pf-t--global--spacer--md);
|
|
388
|
-
margin-inline-end: var(--pf-t--global--spacer--md);
|
|
441
|
+
:where(.pf-v6-theme-glass) .pf-v6-c-page__sidebar-main {
|
|
389
442
|
overflow: auto;
|
|
390
|
-
background-color: var(--pf-v6-c-page__sidebar--BackgroundColor);
|
|
391
|
-
backdrop-filter: var(--pf-v6-c-page__sidebar--BackdropFilter);
|
|
392
|
-
border: var(--pf-t--global--border--width--glass--default) solid var(--pf-t--global--border--color--glass--default);
|
|
393
|
-
border-radius: var(--pf-t--global--border--radius--glass--default);
|
|
394
|
-
box-shadow: var(--pf-t--global--box-shadow--glass--default);
|
|
395
|
-
}
|
|
396
|
-
@media (min-width: 75rem) {
|
|
397
|
-
:where(.pf-v6-theme-glass) .pf-v6-c-page__sidebar .pf-v6-c-page__sidebar-main {
|
|
398
|
-
margin-block-start: 0;
|
|
399
|
-
margin-block-end: var(--pf-t--global--spacer--inset--page-chrome);
|
|
400
|
-
margin-inline-start: var(--pf-t--global--spacer--inset--page-chrome);
|
|
401
|
-
margin-inline-end: var(--pf-t--global--spacer--inset--page-chrome);
|
|
402
|
-
}
|
|
403
|
-
}
|
|
404
|
-
|
|
405
|
-
.pf-v6-c-page__sidebar:has(> .pf-v6-c-page__sidebar-main) {
|
|
406
|
-
overflow: revert;
|
|
407
443
|
}
|
|
408
444
|
|
|
409
445
|
.pf-v6-c-page__sidebar-main {
|
|
410
446
|
display: flex;
|
|
411
447
|
flex-grow: 1;
|
|
412
448
|
flex-direction: column;
|
|
449
|
+
padding-block-start: var(--pf-v6-c-page__sidebar-main--PaddingBlockStart);
|
|
450
|
+
padding-block-end: var(--pf-v6-c-page__sidebar-main--PaddingBlockEnd);
|
|
451
|
+
padding-inline-start: var(--pf-v6-c-page__sidebar-main--PaddingInlineStart);
|
|
452
|
+
padding-inline-end: var(--pf-v6-c-page__sidebar-main--PaddingInlineEnd);
|
|
453
|
+
margin-block-start: var(--pf-v6-c-page__sidebar-main--MarginBlockStart);
|
|
454
|
+
margin-block-end: var(--pf-v6-c-page__sidebar-main--MarginBlockEnd);
|
|
455
|
+
margin-inline-start: var(--pf-v6-c-page__sidebar-main--MarginInlineStart);
|
|
456
|
+
margin-inline-end: var(--pf-v6-c-page__sidebar-main--MarginInlineEnd);
|
|
457
|
+
background-color: var(--pf-v6-c-page__sidebar-main--BackgroundColor);
|
|
458
|
+
backdrop-filter: var(--pf-v6-c-page__sidebar-main--BackdropFilter);
|
|
459
|
+
border: var(--pf-v6-c-page__sidebar-main--BorderWidth) solid var(--pf-v6-c-page__sidebar-main--BorderColor);
|
|
460
|
+
border-radius: var(--pf-v6-c-page__sidebar-main--BorderRadius);
|
|
461
|
+
box-shadow: var(--pf-v6-c-page__sidebar-main--BoxShadow);
|
|
413
462
|
}
|
|
414
463
|
|
|
415
464
|
.pf-v6-c-page__sidebar-header {
|
|
@@ -837,8 +886,8 @@
|
|
|
837
886
|
}
|
|
838
887
|
.pf-v6-c-page__main-section.pf-m-secondary {
|
|
839
888
|
--pf-v6-c-page__main-section--BackgroundColor: var(--pf-v6-c-page__main-section--m-secondary--BackgroundColor);
|
|
840
|
-
border-block-start: var(--pf-
|
|
841
|
-
border-block-end: var(--pf-
|
|
889
|
+
border-block-start: var(--pf-v6-c-page__main-section--m-secondary--BorderBlockStartWidth) solid var(--pf-v6-c-page__main-section--m-secondary--BorderBlockStartColor);
|
|
890
|
+
border-block-end: var(--pf-v6-c-page__main-section--m-secondary--BorderBlockEndWidth) solid var(--pf-v6-c-page__main-section--m-secondary--BorderBlockEndColor);
|
|
842
891
|
}
|
|
843
892
|
.pf-v6-c-page__main-section.pf-m-padding {
|
|
844
893
|
padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
|
|
@@ -62,6 +62,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
|
|
|
62
62
|
--#{$page}__sidebar--TranslateZ: 0;
|
|
63
63
|
--#{$page}__sidebar--m-expanded--TranslateX: 0;
|
|
64
64
|
--#{$page}__sidebar--xl--TranslateX: 0;
|
|
65
|
+
--#{$page}__sidebar--MarginBlockStart: 0;
|
|
65
66
|
--#{$page}__sidebar--MarginInlineEnd: calc(var(--pf-t--global--spacer--inset--page-chrome) / 2);
|
|
66
67
|
--#{$page}__sidebar--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
|
|
67
68
|
--#{$page}__sidebar--PaddingInlineStart: 0;
|
|
@@ -77,6 +78,22 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
|
|
|
77
78
|
--#{$page}__dock--m-expanded--TransitionDuration--slide: var(--pf-t--global--motion--duration--slide-in--default);
|
|
78
79
|
}
|
|
79
80
|
|
|
81
|
+
// Sidebar main
|
|
82
|
+
--#{$page}__sidebar-main--PaddingBlockStart: 0;
|
|
83
|
+
--#{$page}__sidebar-main--PaddingBlockEnd: 0;
|
|
84
|
+
--#{$page}__sidebar-main--PaddingInlineStart: 0;
|
|
85
|
+
--#{$page}__sidebar-main--PaddingInlineEnd: 0;
|
|
86
|
+
--#{$page}__sidebar-main--MarginBlockStart: 0;
|
|
87
|
+
--#{$page}__sidebar-main--MarginBlockEnd: 0;
|
|
88
|
+
--#{$page}__sidebar-main--MarginInlineStart: 0;
|
|
89
|
+
--#{$page}__sidebar-main--MarginInlineEnd: 0;
|
|
90
|
+
--#{$page}__sidebar-main--BackgroundColor: transparent;
|
|
91
|
+
--#{$page}__sidebar-main--BackdropFilter: none;
|
|
92
|
+
--#{$page}__sidebar-main--BorderWidth: 0;
|
|
93
|
+
--#{$page}__sidebar-main--BorderColor: transparent;
|
|
94
|
+
--#{$page}__sidebar-main--BorderRadius: 0;
|
|
95
|
+
--#{$page}__sidebar-main--BoxShadow: none;
|
|
96
|
+
|
|
80
97
|
// Sidebar header
|
|
81
98
|
--#{$page}__sidebar-header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
|
|
82
99
|
--#{$page}__sidebar-header--BorderBlockEndColor: var(--pf-t--global--border--color--default);
|
|
@@ -148,6 +165,11 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
|
|
|
148
165
|
--#{$page}__main-section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
149
166
|
--#{$page}__main-section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
|
150
167
|
--#{$page}__main-breadcrumb--page__main-tabs--PaddingBlockStart: var(--pf-t--global--spacer--md);
|
|
168
|
+
--#{$page}__main-section--m-secondary--BorderBlockStartWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--high-contrast--regular));
|
|
169
|
+
--#{$page}__main-section--m-secondary--BorderBlockStartColor: var(--pf-t--global--border--color--subtle);
|
|
170
|
+
--#{$page}__main-section--m-secondary--BorderBlockEndWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--high-contrast--regular));
|
|
171
|
+
--#{$page}__main-section--m-secondary--BorderBlockEndColor: var(--pf-t--global--border--color--subtle);
|
|
172
|
+
|
|
151
173
|
|
|
152
174
|
// Limit width
|
|
153
175
|
--#{$page}--section--m-limit-width--MaxWidth: calc(#{pf-size-prem(2000px)} - var(--#{$page}__sidebar--Width));
|
|
@@ -209,10 +231,54 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
|
|
|
209
231
|
--#{$page}--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--lg);
|
|
210
232
|
--#{$page}--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
|
|
211
233
|
|
|
234
|
+
// Glass theme
|
|
235
|
+
--#{$page}--BackgroundColor--glass: transparent;
|
|
236
|
+
--#{$page}__sidebar--Width--base--glass: calc(#{pf-size-prem(290px)} + var(--pf-t--global--spacer--inset--page-chrome) * 2);
|
|
237
|
+
--#{$page}__sidebar-body--PaddingInlineStart--glass: var(--pf-t--global--spacer--lg);
|
|
238
|
+
--#{$page}__sidebar-body--PaddingInlineEnd--glass: var(--pf-t--global--spacer--lg);
|
|
239
|
+
--#{$page}__sidebar-main--PaddingBlockEnd--glass: var(--#{$page}__sidebar--PaddingBlockEnd);
|
|
240
|
+
--#{$page}__sidebar-main--PaddingInlineStart--glass: var(--#{$page}__sidebar--PaddingInlineStart);
|
|
241
|
+
--#{$page}__sidebar-main--PaddingInlineEnd--glass: var(--#{$page}__sidebar--PaddingInlineEnd);
|
|
242
|
+
--#{$page}__sidebar-main--MarginBlockStart--glass: calc(var(--pf-t--global--spacer--sm) * -1);
|
|
243
|
+
--#{$page}__sidebar-main--MarginBlockEnd--glass: var(--pf-t--global--spacer--md);
|
|
244
|
+
--#{$page}__sidebar-main--MarginInlineStart--glass: var(--pf-t--global--spacer--md);
|
|
245
|
+
--#{$page}__sidebar-main--MarginInlineEnd--glass: var(--pf-t--global--spacer--md);
|
|
246
|
+
--#{$page}__sidebar-main--BackgroundColor--glass: var(--#{$page}__sidebar--BackgroundColor);
|
|
247
|
+
--#{$page}__sidebar-main--BackdropFilter--glass: var(--#{$page}__sidebar--BackdropFilter);
|
|
248
|
+
--#{$page}__sidebar-main--BorderWidth--glass: var(--pf-t--global--border--width--glass--default);
|
|
249
|
+
--#{$page}__sidebar-main--BorderColor--glass: var(--pf-t--global--border--color--glass--default);
|
|
250
|
+
--#{$page}__sidebar-main--BorderRadius--glass: var(--pf-t--global--border--radius--glass--default);
|
|
251
|
+
--#{$page}__sidebar-main--BoxShadow--glass: var(--pf-t--global--box-shadow--glass--default);
|
|
252
|
+
--#{$page}__sidebar-main--xl--MarginBlockStart--glass: 0;
|
|
253
|
+
--#{$page}__sidebar-main--xl--MarginBlockEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
|
|
254
|
+
--#{$page}__sidebar-main--xl--MarginInlineStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
|
|
255
|
+
--#{$page}__sidebar-main--xl--MarginInlineEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
|
|
256
|
+
|
|
212
257
|
:where(.pf-v6-theme-glass) & {
|
|
213
|
-
--#{$page}
|
|
214
|
-
--#{$page}__sidebar
|
|
215
|
-
--#{$page}__sidebar-body--
|
|
258
|
+
--#{$page}--BackgroundColor: var(--#{$page}--BackgroundColor--glass);
|
|
259
|
+
--#{$page}__sidebar--Width--base: var(--#{$page}__sidebar--Width--base--glass);
|
|
260
|
+
--#{$page}__sidebar-body--PaddingInlineStart: var(--#{$page}__sidebar-body--PaddingInlineStart--glass);
|
|
261
|
+
--#{$page}__sidebar-body--PaddingInlineEnd: var(--#{$page}__sidebar-body--PaddingInlineEnd--glass);
|
|
262
|
+
--#{$page}__sidebar-main--PaddingBlockEnd: var(--#{$page}__sidebar-main--PaddingBlockEnd--glass);
|
|
263
|
+
--#{$page}__sidebar-main--PaddingInlineStart: var(--#{$page}__sidebar-main--PaddingInlineStart--glass);
|
|
264
|
+
--#{$page}__sidebar-main--PaddingInlineEnd: var(--#{$page}__sidebar-main--PaddingInlineEnd--glass);
|
|
265
|
+
--#{$page}__sidebar-main--MarginBlockStart: var(--#{$page}__sidebar-main--MarginBlockStart--glass);
|
|
266
|
+
--#{$page}__sidebar-main--MarginBlockEnd: var(--#{$page}__sidebar-main--MarginBlockEnd--glass);
|
|
267
|
+
--#{$page}__sidebar-main--MarginInlineStart: var(--#{$page}__sidebar-main--MarginInlineStart--glass);
|
|
268
|
+
--#{$page}__sidebar-main--MarginInlineEnd: var(--#{$page}__sidebar-main--MarginInlineEnd--glass);
|
|
269
|
+
--#{$page}__sidebar-main--BackgroundColor: var(--#{$page}__sidebar-main--BackgroundColor--glass);
|
|
270
|
+
--#{$page}__sidebar-main--BackdropFilter: var(--#{$page}__sidebar-main--BackdropFilter--glass);
|
|
271
|
+
--#{$page}__sidebar-main--BorderWidth: var(--#{$page}__sidebar-main--BorderWidth--glass);
|
|
272
|
+
--#{$page}__sidebar-main--BorderColor: var(--#{$page}__sidebar-main--BorderColor--glass);
|
|
273
|
+
--#{$page}__sidebar-main--BorderRadius: var(--#{$page}__sidebar-main--BorderRadius--glass);
|
|
274
|
+
--#{$page}__sidebar-main--BoxShadow: var(--#{$page}__sidebar-main--BoxShadow--glass);
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
@media (min-width: $pf-v6-global--breakpoint--xl) {
|
|
278
|
+
--#{$page}__sidebar-main--MarginBlockStart--glass: var(--#{$page}__sidebar-main--xl--MarginBlockStart--glass);
|
|
279
|
+
--#{$page}__sidebar-main--MarginBlockEnd--glass: var(--#{$page}__sidebar-main--xl--MarginBlockEnd--glass);
|
|
280
|
+
--#{$page}__sidebar-main--MarginInlineStart--glass: var(--#{$page}__sidebar-main--xl--MarginInlineStart--glass);
|
|
281
|
+
--#{$page}__sidebar-main--MarginInlineEnd--glass: var(--#{$page}__sidebar-main--xl--MarginInlineEnd--glass);
|
|
216
282
|
}
|
|
217
283
|
}
|
|
218
284
|
|
|
@@ -229,10 +295,6 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
|
|
|
229
295
|
max-height: 100%;
|
|
230
296
|
background-color: var(--#{$page}--BackgroundColor);
|
|
231
297
|
|
|
232
|
-
:where(:root.pf-v6-theme-glass) & {
|
|
233
|
-
background-color: transparent;
|
|
234
|
-
}
|
|
235
|
-
|
|
236
298
|
@media (min-width: $pf-v6-global--breakpoint--xl) {
|
|
237
299
|
--#{$page}__sidebar--Width: var(--#{$page}__sidebar--xl--Width); // TODO can remove at breaking change
|
|
238
300
|
|
|
@@ -384,6 +446,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
|
|
|
384
446
|
padding-block-end: var(--#{$page}__sidebar--PaddingBlockEnd);
|
|
385
447
|
padding-inline-start: var(--#{$page}__sidebar--PaddingInlineStart);
|
|
386
448
|
padding-inline-end: var(--#{$page}__sidebar--PaddingInlineEnd);
|
|
449
|
+
margin-block-start: var(--#{$page}__sidebar--MarginBlockStart);
|
|
387
450
|
margin-inline-end: var(--#{$page}__sidebar--MarginInlineEnd);
|
|
388
451
|
overflow-x: hidden;
|
|
389
452
|
overflow-y: auto;
|
|
@@ -419,49 +482,41 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
|
|
|
419
482
|
overflow: hidden;
|
|
420
483
|
}
|
|
421
484
|
|
|
422
|
-
@at-root :where(.pf-v6-theme-glass)
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
485
|
+
@at-root :where(.pf-v6-theme-glass) {
|
|
486
|
+
.#{$page}__sidebar {
|
|
487
|
+
min-height: 0;
|
|
488
|
+
padding: 0;
|
|
489
|
+
overflow: revert;
|
|
490
|
+
background: transparent;
|
|
427
491
|
|
|
428
|
-
|
|
429
|
-
|
|
492
|
+
&.pf-m-expanded {
|
|
493
|
+
box-shadow: none;
|
|
494
|
+
}
|
|
430
495
|
}
|
|
431
496
|
|
|
432
497
|
.#{$page}__sidebar-main {
|
|
433
|
-
padding-block-end: var(--#{$page}__sidebar--PaddingBlockEnd);
|
|
434
|
-
padding-inline-start: var(--#{$page}__sidebar--PaddingInlineStart);
|
|
435
|
-
padding-inline-end: var(--#{$page}__sidebar--PaddingInlineEnd);
|
|
436
|
-
margin-block-start: calc(var(--pf-t--global--spacer--sm) * -1);
|
|
437
|
-
margin-block-end: var(--pf-t--global--spacer--md);
|
|
438
|
-
margin-inline-start: var(--pf-t--global--spacer--md);
|
|
439
|
-
margin-inline-end: var(--pf-t--global--spacer--md);
|
|
440
498
|
overflow: auto;
|
|
441
|
-
background-color: var(--#{$page}__sidebar--BackgroundColor);
|
|
442
|
-
backdrop-filter: var(--#{$page}__sidebar--BackdropFilter);
|
|
443
|
-
border: var(--pf-t--global--border--width--glass--default) solid var(--pf-t--global--border--color--glass--default);
|
|
444
|
-
border-radius: var(--pf-t--global--border--radius--glass--default);
|
|
445
|
-
box-shadow: var(--pf-t--global--box-shadow--glass--default);
|
|
446
|
-
|
|
447
|
-
@media (min-width: $pf-v6-global--breakpoint--xl) {
|
|
448
|
-
margin-block-start: 0;
|
|
449
|
-
margin-block-end: var(--pf-t--global--spacer--inset--page-chrome);
|
|
450
|
-
margin-inline-start: var(--pf-t--global--spacer--inset--page-chrome);
|
|
451
|
-
margin-inline-end: var(--pf-t--global--spacer--inset--page-chrome);
|
|
452
|
-
}
|
|
453
499
|
}
|
|
454
500
|
}
|
|
455
|
-
|
|
456
|
-
&:has(> .#{$page}__sidebar-main) {
|
|
457
|
-
overflow: revert;
|
|
458
|
-
}
|
|
459
501
|
}
|
|
460
502
|
|
|
461
503
|
.#{$page}__sidebar-main {
|
|
462
504
|
display: flex;
|
|
463
505
|
flex-grow: 1;
|
|
464
506
|
flex-direction: column;
|
|
507
|
+
padding-block-start: var(--#{$page}__sidebar-main--PaddingBlockStart);
|
|
508
|
+
padding-block-end: var(--#{$page}__sidebar-main--PaddingBlockEnd);
|
|
509
|
+
padding-inline-start: var(--#{$page}__sidebar-main--PaddingInlineStart);
|
|
510
|
+
padding-inline-end: var(--#{$page}__sidebar-main--PaddingInlineEnd);
|
|
511
|
+
margin-block-start: var(--#{$page}__sidebar-main--MarginBlockStart);
|
|
512
|
+
margin-block-end: var(--#{$page}__sidebar-main--MarginBlockEnd);
|
|
513
|
+
margin-inline-start: var(--#{$page}__sidebar-main--MarginInlineStart);
|
|
514
|
+
margin-inline-end: var(--#{$page}__sidebar-main--MarginInlineEnd);
|
|
515
|
+
background-color: var(--#{$page}__sidebar-main--BackgroundColor);
|
|
516
|
+
backdrop-filter: var(--#{$page}__sidebar-main--BackdropFilter);
|
|
517
|
+
border: var(--#{$page}__sidebar-main--BorderWidth) solid var(--#{$page}__sidebar-main--BorderColor);
|
|
518
|
+
border-radius: var(--#{$page}__sidebar-main--BorderRadius);
|
|
519
|
+
box-shadow: var(--#{$page}__sidebar-main--BoxShadow);
|
|
465
520
|
}
|
|
466
521
|
|
|
467
522
|
.#{$page}__sidebar-header {
|
|
@@ -747,8 +802,8 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
|
|
|
747
802
|
&.pf-m-secondary {
|
|
748
803
|
--#{$page}__main-section--BackgroundColor: var(--#{$page}__main-section--m-secondary--BackgroundColor);
|
|
749
804
|
|
|
750
|
-
border-block-start: var(
|
|
751
|
-
border-block-end: var(
|
|
805
|
+
border-block-start: var(--#{$page}__main-section--m-secondary--BorderBlockStartWidth) solid var(--#{$page}__main-section--m-secondary--BorderBlockStartColor);
|
|
806
|
+
border-block-end: var(--#{$page}__main-section--m-secondary--BorderBlockEndWidth) solid var(--#{$page}__main-section--m-secondary--BorderBlockEndColor);
|
|
752
807
|
}
|
|
753
808
|
|
|
754
809
|
@each $breakpoint, $breakpoint-value in $pf-page-v6--breakpoint-map {
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
--pf-v6-c-table__button--BorderColor: var(--pf-t--global--border--color--high-contrast);
|
|
65
65
|
--pf-v6-c-table__button--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
|
|
66
66
|
--pf-v6-c-table__button--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
|
|
67
|
-
--pf-v6-c-table__button--BorderRadius: var(--pf-t--global--border--radius--
|
|
67
|
+
--pf-v6-c-table__button--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
|
|
68
68
|
--pf-v6-c-table__button--hover--Color: var(--pf-t--global--text--color--regular);
|
|
69
69
|
--pf-v6-c-table__button--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
|
|
70
70
|
--pf-v6-c-table__check--PaddingInlineStart: var(--pf-t--global--spacer--sm);
|
|
@@ -159,7 +159,7 @@
|
|
|
159
159
|
--pf-v6-c-table__subhead--Color: var(--pf-t--global--text--color--subtle);
|
|
160
160
|
--pf-v6-c-table__nested-column-header__button--PaddingInlineStart: calc(var(--pf-v6-c-table__button--PaddingInlineStart) - var(--pf-t--global--spacer--control--horizontal--plain));
|
|
161
161
|
--pf-v6-c-table__nested-column-header__button--PaddingInlineEnd: calc(var(--pf-v6-c-table__button--PaddingInlineEnd) - (var(--pf-t--global--spacer--control--horizontal--plain) / 2));
|
|
162
|
-
--pf-v6-c-table--m-striped__tr--BackgroundColor: var(--pf-t--global--background--color--
|
|
162
|
+
--pf-v6-c-table--m-striped__tr--BackgroundColor: var(--pf-t--global--background--color--striped--row--default);
|
|
163
163
|
--pf-v6-c-table--m-sticky-header--cell--ZIndex: var(--pf-t--global--z-index--xs);
|
|
164
164
|
--pf-v6-c-table--m-sticky-header--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
|
|
165
165
|
--pf-v6-c-table--m-sticky-header--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
|
|
@@ -99,7 +99,7 @@
|
|
|
99
99
|
--#{$table}__button--BorderColor: var(--pf-t--global--border--color--high-contrast);
|
|
100
100
|
--#{$table}__button--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
|
|
101
101
|
--#{$table}__button--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
|
|
102
|
-
--#{$table}__button--BorderRadius: var(--pf-t--global--border--radius--
|
|
102
|
+
--#{$table}__button--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
|
|
103
103
|
--#{$table}__button--hover--Color: var(--pf-t--global--text--color--regular);
|
|
104
104
|
--#{$table}__button--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
|
|
105
105
|
|
|
@@ -251,7 +251,7 @@
|
|
|
251
251
|
--#{$table}__nested-column-header__button--PaddingInlineEnd: calc(var(--#{$table}__button--PaddingInlineEnd) - (var(--pf-t--global--spacer--control--horizontal--plain) / 2));
|
|
252
252
|
|
|
253
253
|
// * Table striped
|
|
254
|
-
--#{$table}--m-striped__tr--BackgroundColor: var(--pf-t--global--background--color--
|
|
254
|
+
--#{$table}--m-striped__tr--BackgroundColor: var(--pf-t--global--background--color--striped--row--default);
|
|
255
255
|
|
|
256
256
|
// * Table sticky header
|
|
257
257
|
--#{$table}--m-sticky-header--cell--ZIndex: var(--pf-t--global--z-index--xs);
|