@patternfly/patternfly 6.5.0-prerelease.64 → 6.5.0-prerelease.66
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/Breadcrumb/breadcrumb.css +6 -2
- package/components/Breadcrumb/breadcrumb.scss +6 -2
- package/components/MenuToggle/menu-toggle.css +1 -1
- package/components/MenuToggle/menu-toggle.scss +1 -1
- package/components/Page/page.css +83 -34
- package/components/Page/page.scss +94 -39
- package/components/Table/table.css +60 -21
- package/components/Table/table.scss +77 -26
- package/components/_index.css +150 -58
- package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
- package/docs/components/Button/examples/Button.md +30 -30
- package/docs/components/Table/examples/Table.css +2 -1
- package/docs/components/Table/examples/Table.md +3251 -359
- package/docs/demos/Table/examples/Table.md +3194 -355
- package/docs/demos/Toolbar/examples/Toolbar.md +422 -70
- package/package.json +22 -2
- package/patternfly-base-no-globals.css +6 -0
- package/patternfly-base.css +6 -0
- package/patternfly-no-globals.css +157 -59
- package/patternfly.css +157 -59
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/patternfly.scss +3 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
.pf-v6-c-breadcrumb {
|
|
2
|
-
--pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--
|
|
2
|
+
--pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--default);
|
|
3
3
|
--pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
|
|
4
4
|
--pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
|
|
5
5
|
--pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
|
|
@@ -10,12 +10,14 @@
|
|
|
10
10
|
--pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
|
|
11
11
|
--pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
|
|
12
12
|
--pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
|
|
13
|
+
--pf-v6-c-breadcrumb__link--TextDecorationColor: var(--pf-t--global--text-decoration--color--default);
|
|
13
14
|
--pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
|
|
14
15
|
--pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
|
|
15
16
|
--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
|
|
17
|
+
--pf-v6-c-breadcrumb__link--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
|
|
16
18
|
--pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
|
|
17
19
|
--pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
|
|
18
|
-
--pf-v6-c-breadcrumb__heading--FontSize: var(
|
|
20
|
+
--pf-v6-c-breadcrumb__heading--FontSize: var(--pf-v6-c-breadcrumb__item--FontSize);
|
|
19
21
|
--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
|
|
20
22
|
--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
|
|
21
23
|
--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
|
|
@@ -68,6 +70,7 @@
|
|
|
68
70
|
color: var(--pf-v6-c-breadcrumb__link--Color);
|
|
69
71
|
text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
|
|
70
72
|
text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
|
|
73
|
+
text-decoration-color: var(--pf-v6-c-breadcrumb__link--TextDecorationColor);
|
|
71
74
|
word-break: break-word;
|
|
72
75
|
background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
|
|
73
76
|
}
|
|
@@ -75,6 +78,7 @@
|
|
|
75
78
|
--pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
|
|
76
79
|
--pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
|
|
77
80
|
--pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
|
|
81
|
+
--pf-v6-c-breadcrumb__link--TextDecorationColor: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationColor);
|
|
78
82
|
}
|
|
79
83
|
.pf-v6-c-breadcrumb__link.pf-m-current {
|
|
80
84
|
cursor: default;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
@include pf-root($breadcrumb) {
|
|
4
4
|
// Breadcrumb item
|
|
5
|
-
--#{$breadcrumb}__item--FontSize: var(--pf-t--global--font--size--body--
|
|
5
|
+
--#{$breadcrumb}__item--FontSize: var(--pf-t--global--font--size--body--default);
|
|
6
6
|
--#{$breadcrumb}__item--LineHeight: var(--pf-t--global--font--line-height--body);
|
|
7
7
|
--#{$breadcrumb}__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
|
|
8
8
|
|
|
@@ -17,14 +17,16 @@
|
|
|
17
17
|
--#{$breadcrumb}__link--Color: var(--pf-t--global--text--color--link--default);
|
|
18
18
|
--#{$breadcrumb}__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
|
|
19
19
|
--#{$breadcrumb}__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
|
|
20
|
+
--#{$breadcrumb}__link--TextDecorationColor: var(--pf-t--global--text-decoration--color--default);
|
|
20
21
|
--#{$breadcrumb}__link--hover--Color: var(--pf-t--global--text--color--link--hover);
|
|
21
22
|
--#{$breadcrumb}__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
|
|
22
23
|
--#{$breadcrumb}__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
|
|
24
|
+
--#{$breadcrumb}__link--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
|
|
23
25
|
--#{$breadcrumb}__link--m-current--Color: var(--pf-t--global--text--color--regular);
|
|
24
26
|
--#{$breadcrumb}__link--BackgroundColor: transparent;
|
|
25
27
|
|
|
26
28
|
// Heading
|
|
27
|
-
--#{$breadcrumb}__heading--FontSize: var(
|
|
29
|
+
--#{$breadcrumb}__heading--FontSize: var(--#{$breadcrumb}__item--FontSize);
|
|
28
30
|
|
|
29
31
|
// breadcrumb dropdown
|
|
30
32
|
--#{$breadcrumb}__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
|
|
@@ -83,6 +85,7 @@
|
|
|
83
85
|
color: var(--#{$breadcrumb}__link--Color);
|
|
84
86
|
text-decoration-line: var(--#{$breadcrumb}__link--TextDecorationLine);
|
|
85
87
|
text-decoration-style: var(--#{$breadcrumb}__link--TextDecorationStyle);
|
|
88
|
+
text-decoration-color: var(--#{$breadcrumb}__link--TextDecorationColor);
|
|
86
89
|
word-break: break-word;
|
|
87
90
|
background-color: var(--#{$breadcrumb}__link--BackgroundColor);
|
|
88
91
|
|
|
@@ -90,6 +93,7 @@
|
|
|
90
93
|
--#{$breadcrumb}__link--Color: var(--#{$breadcrumb}__link--hover--Color);
|
|
91
94
|
--#{$breadcrumb}__link--TextDecorationLine: var(--#{$breadcrumb}__link--hover--TextDecorationLine);
|
|
92
95
|
--#{$breadcrumb}__link--TextDecorationStyle: var(--#{$breadcrumb}__link--hover--TextDecorationStyle);
|
|
96
|
+
--#{$breadcrumb}__link--TextDecorationColor: var(--#{$breadcrumb}__link--hover--TextDecorationColor);
|
|
93
97
|
}
|
|
94
98
|
|
|
95
99
|
|
|
@@ -115,7 +115,7 @@
|
|
|
115
115
|
--pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
|
|
116
116
|
--pf-v6-c-menu-toggle--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
|
|
117
117
|
--pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
|
|
118
|
-
--pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--
|
|
118
|
+
--pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
|
|
119
119
|
--pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
|
|
120
120
|
--pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
|
|
121
121
|
--pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
|
|
@@ -145,7 +145,7 @@
|
|
|
145
145
|
--#{$menu-toggle}--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
|
|
146
146
|
--#{$menu-toggle}--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
|
|
147
147
|
--#{$menu-toggle}--m-plain--expanded--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
|
|
148
|
-
--#{$menu-toggle}--m-plain--BorderRadius: var(--pf-t--global--border--radius--
|
|
148
|
+
--#{$menu-toggle}--m-plain--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
|
|
149
149
|
--#{$menu-toggle}--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
|
|
150
150
|
--#{$menu-toggle}--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
|
|
151
151
|
--#{$menu-toggle}--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
|
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);
|
|
@@ -153,16 +153,33 @@
|
|
|
153
153
|
--pf-v6-c-table__tbody--m-clickable--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
|
|
154
154
|
--pf-v6-c-table__tbody--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
|
|
155
155
|
--pf-v6-c-table__tbody--m-selected--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
|
|
156
|
+
--pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndWidth: var(--pf-v6-c-table--border-width--base);
|
|
157
|
+
--pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndColor: var(--pf-v6-c-table--BorderColor);
|
|
158
|
+
--pf-v6-c-table__thead--m-nested-column-header--after--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
|
|
156
159
|
--pf-v6-c-table__thead--m-nested-column-header--button--OutlineOffset: -0.1875rem;
|
|
157
160
|
--pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockStart: var(--pf-t--global--spacer--xs);
|
|
158
161
|
--pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd: var(--pf-t--global--spacer--md);
|
|
159
162
|
--pf-v6-c-table__subhead--Color: var(--pf-t--global--text--color--subtle);
|
|
160
163
|
--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
164
|
--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--
|
|
165
|
+
--pf-v6-c-table--m-striped__tr--BackgroundColor: var(--pf-t--global--background--color--striped--row--default);
|
|
166
|
+
--pf-v6-c-table--m-sticky-header--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
|
|
163
167
|
--pf-v6-c-table--m-sticky-header--cell--ZIndex: var(--pf-t--global--z-index--xs);
|
|
164
168
|
--pf-v6-c-table--m-sticky-header--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
|
|
165
169
|
--pf-v6-c-table--m-sticky-header--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
|
|
170
|
+
--pf-v6-c-table--m-sticky-header--BorderRadius: 0;
|
|
171
|
+
--pf-v6-c-table--m-sticky-header--BoxShadow: 0;
|
|
172
|
+
--pf-v6-c-table--m-sticky-header--BorderBlockEndWidth: var(--pf-v6-c-table--border-width--base);
|
|
173
|
+
--pf-v6-c-table--m-sticky-header--BorderBlockEndColor: var(--pf-v6-c-table--BorderColor);
|
|
174
|
+
--pf-v6-c-table--m-sticky-header--BorderRadius--glass: var(--pf-t--global--border--radius--medium);
|
|
175
|
+
--pf-v6-c-table--m-sticky-header--BoxShadow--glass: var(--pf-t--global--box-shadow--sm);
|
|
176
|
+
--pf-v6-c-table--m-sticky-header--TransitionTimingFunction--BackgroundColor: var(--pf-t--global--motion--timing-function--default);
|
|
177
|
+
--pf-v6-c-table--m-sticky-header--TransitionDuration--BackgroundColor: var(--pf-t--global--motion--duration--fade--default);
|
|
178
|
+
}
|
|
179
|
+
:where(.pf-v6-theme-glass) .pf-v6-c-table {
|
|
180
|
+
--pf-v6-c-table--m-sticky-header--BorderBlockEndWidth: 0;
|
|
181
|
+
--pf-v6-c-table--m-sticky-header--BoxShadow: var(--pf-v6-c-table--m-sticky-header--BoxShadow--glass);
|
|
182
|
+
--pf-v6-c-table--m-sticky-header--BorderRadius: var(--pf-v6-c-table--m-sticky-header--BorderRadius--glass);
|
|
166
183
|
}
|
|
167
184
|
|
|
168
185
|
.pf-v6-c-table {
|
|
@@ -180,35 +197,46 @@
|
|
|
180
197
|
.pf-v6-c-table.pf-m-fixed {
|
|
181
198
|
table-layout: fixed;
|
|
182
199
|
}
|
|
183
|
-
.pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead,
|
|
184
|
-
|
|
200
|
+
.pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead::before, .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead::after {
|
|
201
|
+
opacity: 0;
|
|
202
|
+
transition-timing-function: var(--pf-v6-c-table--m-sticky-header--TransitionTimingFunction--BackgroundColor);
|
|
203
|
+
transition-duration: var(--pf-v6-c-table--m-sticky-header--TransitionDuration--BackgroundColor);
|
|
204
|
+
transition-property: opacity;
|
|
205
|
+
}
|
|
206
|
+
.pf-v6-c-table.pf-m-sticky-header, .pf-v6-c-table.pf-m-sticky-header-stuck {
|
|
207
|
+
--pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndWidth: 0;
|
|
208
|
+
}
|
|
209
|
+
.pf-v6-c-table.pf-m-sticky-header-stuck > .pf-v6-c-table__thead::before, .pf-v6-c-table.pf-m-sticky-header-stuck > .pf-v6-c-table__thead::after {
|
|
210
|
+
opacity: 1;
|
|
211
|
+
}
|
|
212
|
+
.pf-v6-c-table.pf-m-sticky-header, .pf-v6-c-table.pf-m-sticky-header-base {
|
|
213
|
+
position: relative;
|
|
214
|
+
}
|
|
215
|
+
.pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead, .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead {
|
|
185
216
|
position: sticky;
|
|
186
217
|
inset-block-start: 0;
|
|
187
218
|
z-index: var(--pf-v6-c-table--m-sticky-header--ZIndex);
|
|
188
|
-
background: var(--pf-v6-c-table--BackgroundColor);
|
|
189
219
|
}
|
|
190
|
-
.pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead::before,
|
|
191
|
-
.pf-v6-c-table .pf-v6-c-table__thead.pf-m-nested-column-header::before {
|
|
220
|
+
.pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead::before, .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead::before {
|
|
192
221
|
position: absolute;
|
|
193
|
-
inset
|
|
194
|
-
|
|
195
|
-
inset-inline-start: 0;
|
|
196
|
-
inset-inline-end: 0;
|
|
197
|
-
z-index: var(--pf-v6-c-table--m-sticky-header--border--ZIndex);
|
|
222
|
+
inset: 0;
|
|
223
|
+
z-index: -1;
|
|
198
224
|
pointer-events: none;
|
|
199
225
|
content: "";
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
position: relative;
|
|
226
|
+
background-color: var(--pf-v6-c-table--m-sticky-header--BackgroundColor);
|
|
227
|
+
border-radius: var(--pf-v6-c-table--m-sticky-header--BorderRadius);
|
|
228
|
+
box-shadow: var(--pf-v6-c-table--m-sticky-header--BoxShadow);
|
|
204
229
|
}
|
|
205
|
-
.pf-v6-c-table.pf-m-sticky-header
|
|
230
|
+
.pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead > :where(th, td), .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead > :where(th, td) {
|
|
206
231
|
z-index: var(--pf-v6-c-table--m-sticky-header--cell--ZIndex);
|
|
207
232
|
}
|
|
208
|
-
.pf-v6-c-table.pf-m-sticky-header > .pf-m-
|
|
209
|
-
position:
|
|
210
|
-
inset
|
|
211
|
-
|
|
233
|
+
.pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead::after, .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead::after {
|
|
234
|
+
position: absolute;
|
|
235
|
+
inset: 0;
|
|
236
|
+
z-index: var(--pf-v6-c-table--m-sticky-header--border--ZIndex);
|
|
237
|
+
pointer-events: none;
|
|
238
|
+
content: "";
|
|
239
|
+
border-block-end: var(--pf-v6-c-table--m-sticky-header--BorderBlockEndWidth) solid var(--pf-v6-c-table--m-sticky-header--BorderBlockEndColor);
|
|
212
240
|
}
|
|
213
241
|
.pf-v6-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:last-child) {
|
|
214
242
|
border-block-end: 0;
|
|
@@ -899,6 +927,17 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
899
927
|
--pf-v6-c-table__toggle--PaddingBlockEnd: var(--pf-v6-c-table__thead__toggle--PaddingBlockEnd);
|
|
900
928
|
vertical-align: bottom;
|
|
901
929
|
}
|
|
930
|
+
.pf-v6-c-table__thead.pf-m-nested-column-header {
|
|
931
|
+
position: relative;
|
|
932
|
+
}
|
|
933
|
+
.pf-v6-c-table__thead.pf-m-nested-column-header::after {
|
|
934
|
+
position: absolute;
|
|
935
|
+
inset: 0;
|
|
936
|
+
z-index: var(--pf-v6-c-table__thead--m-nested-column-header--after--ZIndex);
|
|
937
|
+
pointer-events: none;
|
|
938
|
+
content: "";
|
|
939
|
+
border-block-end: var(--pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndWidth) solid var(--pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndColor);
|
|
940
|
+
}
|
|
902
941
|
.pf-v6-c-table__thead.pf-m-nested-column-header .pf-v6-c-table__button {
|
|
903
942
|
--pf-v6-c-table__button--PaddingInlineStart: var(--pf-v6-c-table__nested-column-header__button--PaddingInlineStart);
|
|
904
943
|
--pf-v6-c-table__button--PaddingInlineEnd: var(--pf-v6-c-table__nested-column-header__button--PaddingInlineEnd);
|