@patternfly/patternfly 6.5.0-prerelease.60 → 6.5.0-prerelease.62
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/images/glass-brand-dark.jpg +0 -0
- package/components/CodeEditor/code-editor.css +1 -1
- package/components/CodeEditor/code-editor.scss +1 -1
- package/components/Drawer/drawer.css +107 -17
- package/components/Drawer/drawer.scss +109 -17
- package/components/Page/page.css +3 -0
- package/components/Page/page.scss +4 -0
- package/components/_index.css +111 -18
- package/package.json +2 -2
- package/patternfly-no-globals.css +111 -18
- package/patternfly.css +111 -18
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
Binary file
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
--pf-v6-c-code-editor__header--BorderStartStartRadius: var(--pf-t--global--border--radius--medium);
|
|
9
9
|
--pf-v6-c-code-editor__header--BorderStartEndRadius: var(--pf-t--global--border--radius--medium);
|
|
10
10
|
--pf-v6-c-code-editor__header-content--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
|
11
|
-
--pf-v6-c-code-editor__header-content--m-plain--BackgroundColor:
|
|
11
|
+
--pf-v6-c-code-editor__header-content--m-plain--BackgroundColor: transparent;
|
|
12
12
|
--pf-v6-c-code-editor__header-content--PaddingBlockStart: var(--pf-t--global--spacer--xs);
|
|
13
13
|
--pf-v6-c-code-editor__header-content--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
|
|
14
14
|
--pf-v6-c-code-editor__header-content--PaddingInlineStart: var(--pf-t--global--spacer--sm);
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
|
|
16
16
|
// header content
|
|
17
17
|
--#{$code-editor}__header-content--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
|
18
|
-
--#{$code-editor}__header-content--m-plain--BackgroundColor:
|
|
18
|
+
--#{$code-editor}__header-content--m-plain--BackgroundColor: transparent;
|
|
19
19
|
--#{$code-editor}__header-content--PaddingBlockStart: var(--pf-t--global--spacer--xs);
|
|
20
20
|
--#{$code-editor}__header-content--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
|
|
21
21
|
--#{$code-editor}__header-content--PaddingInlineStart: var(--pf-t--global--spacer--sm);
|
|
@@ -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 {
|
|
@@ -242,6 +282,19 @@
|
|
|
242
282
|
--pf-v6-c-drawer__panel--BorderRadius: var(--pf-v6-c-drawer--m-pill__panel--BorderRadius);
|
|
243
283
|
--pf-v6-c-drawer--m-expanded__panel--inset: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--inset);
|
|
244
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);
|
|
245
298
|
}
|
|
246
299
|
.pf-v6-c-drawer.pf-m-pill > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
|
|
247
300
|
border-block-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderBlockStartWidth);
|
|
@@ -250,6 +303,25 @@
|
|
|
250
303
|
border-inline-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth);
|
|
251
304
|
}
|
|
252
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);
|
|
323
|
+
}
|
|
324
|
+
}
|
|
253
325
|
|
|
254
326
|
.pf-v6-c-drawer__section {
|
|
255
327
|
flex-grow: 0;
|
|
@@ -414,8 +486,11 @@
|
|
|
414
486
|
display: none;
|
|
415
487
|
width: var(--pf-v6-c-drawer__splitter--Width);
|
|
416
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);
|
|
417
491
|
cursor: var(--pf-v6-c-drawer__splitter--Cursor);
|
|
418
492
|
background-color: var(--pf-v6-c-drawer__splitter--BackgroundColor);
|
|
493
|
+
outline-offset: var(--pf-v6-c-drawer__splitter--focus--OutlineOffset);
|
|
419
494
|
}
|
|
420
495
|
.pf-v6-c-drawer__splitter.pf-m-vertical {
|
|
421
496
|
--pf-v6-c-drawer__splitter--Height: var(--pf-v6-c-drawer__splitter--m-vertical--Height);
|
|
@@ -428,21 +503,34 @@
|
|
|
428
503
|
--pf-v6-c-drawer__splitter-handle--after--BorderBlockEndWidth: var(--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBlockEndWidth);
|
|
429
504
|
--pf-v6-c-drawer__splitter-handle--after--BorderInlineStartWidth: var(--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderInlineStartWidth);
|
|
430
505
|
}
|
|
431
|
-
.pf-v6-c-drawer__splitter:hover
|
|
432
|
-
--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);
|
|
433
517
|
}
|
|
434
518
|
.pf-v6-c-drawer__splitter::after {
|
|
435
519
|
position: absolute;
|
|
436
|
-
inset-block-start:
|
|
437
|
-
inset-block-end:
|
|
438
|
-
inset-inline-start:
|
|
439
|
-
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);
|
|
440
527
|
content: "";
|
|
441
528
|
border: solid var(--pf-v6-c-drawer__splitter--after--BorderColor);
|
|
442
529
|
border-block-start-width: var(--pf-v6-c-drawer__splitter--after--BorderBlockStartWidth);
|
|
443
530
|
border-block-end-width: var(--pf-v6-c-drawer__splitter--after--BorderBlockEndWidth);
|
|
444
531
|
border-inline-start-width: var(--pf-v6-c-drawer__splitter--after--BorderInlineStartWidth);
|
|
445
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);
|
|
446
534
|
}
|
|
447
535
|
|
|
448
536
|
.pf-v6-c-drawer__splitter-handle {
|
|
@@ -460,12 +548,14 @@
|
|
|
460
548
|
width: var(--pf-v6-c-drawer__splitter-handle--after--Width);
|
|
461
549
|
height: var(--pf-v6-c-drawer__splitter-handle--after--Height);
|
|
462
550
|
content: "";
|
|
551
|
+
background-color: var(--pf-v6-c-drawer__splitter-handle--after--BackgroundColor);
|
|
463
552
|
border-color: var(--pf-v6-c-drawer__splitter-handle--after--BorderColor);
|
|
464
553
|
border-style: solid;
|
|
465
554
|
border-block-start-width: var(--pf-v6-c-drawer__splitter-handle--after--BorderBlockStartWidth);
|
|
466
555
|
border-block-end-width: var(--pf-v6-c-drawer__splitter-handle--after--BorderBlockEndWidth);
|
|
467
556
|
border-inline-start-width: var(--pf-v6-c-drawer__splitter-handle--after--BorderInlineStartWidth);
|
|
468
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);
|
|
469
559
|
}
|
|
470
560
|
|
|
471
561
|
@media screen and (min-width: 48rem) {
|
|
@@ -117,51 +117,91 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
|
|
|
117
117
|
--#{$drawer}__body--m-padding--PaddingInlineStart: var(--pf-t--global--spacer--md);
|
|
118
118
|
|
|
119
119
|
// Splitter
|
|
120
|
-
--#{$drawer}__splitter--Height: #{pf-size-prem(
|
|
120
|
+
--#{$drawer}__splitter--Height: #{pf-size-prem(12px)};
|
|
121
121
|
--#{$drawer}__splitter--Width: 100%;
|
|
122
|
-
--#{$drawer}__splitter--BackgroundColor:
|
|
122
|
+
--#{$drawer}__splitter--BackgroundColor: transparent;
|
|
123
123
|
--#{$drawer}__splitter--Cursor: row-resize;
|
|
124
124
|
--#{$drawer}__splitter--m-vertical--Height: 100%;
|
|
125
|
-
--#{$drawer}__splitter--m-vertical--Width: #{pf-size-prem(
|
|
125
|
+
--#{$drawer}__splitter--m-vertical--Width: #{pf-size-prem(12px)};
|
|
126
126
|
--#{$drawer}__splitter--m-vertical--Cursor: col-resize;
|
|
127
|
+
--#{$drawer}__splitter--focus--OutlineOffset: #{pf-size-prem(-1px)};
|
|
127
128
|
--#{$drawer}--m-inline__splitter--focus--OutlineOffset: #{pf-size-prem(-1px)};
|
|
128
129
|
|
|
129
130
|
// Splitter border
|
|
130
131
|
--#{$drawer}__splitter--after--BorderColor: var(--pf-t--global--border--color--default);
|
|
132
|
+
--#{$drawer}__splitter--hover--after--BorderColor: var(--pf-t--global--border--color--default);
|
|
133
|
+
--#{$drawer}__splitter--focus--after--BorderColor: var(--pf-t--global--border--color--default);
|
|
134
|
+
--#{$drawer}__splitter--active--after--BorderColor: var(--pf-t--global--border--color--default);
|
|
131
135
|
--#{$drawer}__splitter--after--border-width--base: var(--pf-t--global--border--width--divider--default);
|
|
132
136
|
--#{$drawer}__splitter--after--BorderBlockStartWidth: 0;
|
|
133
137
|
--#{$drawer}__splitter--after--BorderInlineEndWidth: var(--#{$drawer}__splitter--after--border-width--base);
|
|
134
138
|
--#{$drawer}__splitter--after--BorderBlockEndWidth: 0;
|
|
135
139
|
--#{$drawer}__splitter--after--BorderInlineStartWidth: var(--#{$drawer}__splitter--after--border-width--base);
|
|
140
|
+
--#{$drawer}__splitter--after--InsetBlockStart: 0;
|
|
141
|
+
--#{$drawer}__splitter--after--InsetBlockEnd: 0;
|
|
142
|
+
--#{$drawer}__splitter--after--InsetInlineStart: 0;
|
|
143
|
+
--#{$drawer}__splitter--after--InsetInlineEnd: 0;
|
|
144
|
+
--#{$drawer}__splitter--after--Width: auto;
|
|
145
|
+
--#{$drawer}__splitter--after--Height: auto;
|
|
136
146
|
--#{$drawer}--m-panel-bottom__splitter--after--BorderBlockStartWidth: var(--#{$drawer}__splitter--after--border-width--base);
|
|
137
147
|
--#{$drawer}--m-panel-bottom__splitter--after--BorderBlockEndWidth: var(--#{$drawer}__splitter--after--border-width--base);
|
|
138
|
-
--#{$drawer}--m-
|
|
148
|
+
--#{$drawer}--m-pill__splitter--m-vertical--Width: #{pf-size-prem(10px)};
|
|
149
|
+
--#{$drawer}--m-pill__splitter--m-vertical--Height: calc(100% - (2 * var(--#{$drawer}--m-pill__panel--BorderRadius)));
|
|
150
|
+
--#{$drawer}--m-pill__splitter--m-vertical--MarginBlockStart: var(--#{$drawer}--m-pill__panel--BorderRadius);
|
|
151
|
+
--#{$drawer}--m-pill__splitter--after--BorderColor: transparent;
|
|
152
|
+
--#{$drawer}--m-pill__splitter--after--BorderInlineEndWidth: 0;
|
|
153
|
+
--#{$drawer}--m-pill__splitter--hover--after--BorderColor: var(--pf-t--global--border--color--hover);
|
|
154
|
+
--#{$drawer}--m-pill__splitter--focus--after--BorderColor: var(--pf-t--global--border--color--clicked);
|
|
155
|
+
--#{$drawer}--m-pill__splitter--active--after--BorderColor: var(--pf-t--global--border--color--clicked);
|
|
156
|
+
--#{$drawer}--m-pill__splitter--after--Width: #{pf-size-prem(1px)};
|
|
157
|
+
--#{$drawer}--m-pill__splitter--after--Height: auto;
|
|
158
|
+
--#{$drawer}--m-pill__splitter--after--InsetInlineStart: 50%;
|
|
159
|
+
--#{$drawer}--m-pill__splitter--after--InsetInlineEnd: auto;
|
|
160
|
+
--#{$drawer}--m-pill__splitter--after--TranslateX: -50%;
|
|
161
|
+
--#{$drawer}--m-pill--m-panel-bottom__splitter--Height: #{pf-size-prem(8px)};
|
|
162
|
+
--#{$drawer}--m-pill--m-panel-bottom__splitter--Width: calc(100% - (2 * var(--#{$drawer}--m-pill__panel--BorderRadius)));
|
|
163
|
+
--#{$drawer}--m-pill--m-panel-bottom__splitter--MarginInlineStart: var(--#{$drawer}--m-pill__panel--BorderRadius);
|
|
164
|
+
--#{$drawer}--m-pill--m-panel-bottom__splitter--after--Width: auto;
|
|
165
|
+
--#{$drawer}--m-pill--m-panel-bottom__splitter--after--Height: #{pf-size-prem(1px)};
|
|
166
|
+
--#{$drawer}--m-pill--m-panel-bottom__splitter--after--BorderBlockStartWidth: var(--#{$drawer}__splitter--after--border-width--base);
|
|
167
|
+
--#{$drawer}--m-pill--m-panel-bottom__splitter--after--BorderBlockEndWidth: 0;
|
|
168
|
+
--#{$drawer}--m-pill--m-panel-bottom__splitter--after--InsetBlockStart: 50%;
|
|
169
|
+
--#{$drawer}--m-pill--m-panel-bottom__splitter--after--InsetBlockEnd: auto;
|
|
170
|
+
--#{$drawer}--m-pill--m-panel-bottom__splitter--after--InsetInlineStart: 0;
|
|
171
|
+
--#{$drawer}--m-pill--m-panel-bottom__splitter--after--InsetInlineEnd: 0;
|
|
172
|
+
--#{$drawer}--m-pill--m-panel-bottom__splitter--after--TranslateY: -50%;
|
|
173
|
+
--#{$drawer}--m-inline__splitter--m-vertical--Width: #{pf-size-prem(12px)};
|
|
139
174
|
--#{$drawer}--m-inline__splitter-handle--InsetInlineStart: 50%;
|
|
140
|
-
--#{$drawer}--m-inline--m-panel-bottom__splitter--Height: #{pf-size-prem(
|
|
175
|
+
--#{$drawer}--m-inline--m-panel-bottom__splitter--Height: #{pf-size-prem(12px)};
|
|
141
176
|
--#{$drawer}--m-inline--m-panel-bottom__splitter-handle--InsetBlockStart: 50%;
|
|
142
177
|
--#{$drawer}--m-inline--m-panel-bottom__splitter--after--BorderBlockStartWidth: var(--#{$drawer}__splitter--after--border-width--base);
|
|
143
178
|
|
|
144
179
|
// Splitter handle
|
|
145
180
|
--#{$drawer}__splitter-handle--InsetBlockStart: 50%;
|
|
146
|
-
--#{$drawer}__splitter-handle--InsetInlineStart:
|
|
181
|
+
--#{$drawer}__splitter-handle--InsetInlineStart: 50%;
|
|
147
182
|
--#{$drawer}--m-panel-left__splitter-handle--InsetInlineStart: 50%;
|
|
148
|
-
--#{$drawer}--m-panel-bottom__splitter-handle--InsetBlockStart:
|
|
183
|
+
--#{$drawer}--m-panel-bottom__splitter-handle--InsetBlockStart: 50%;
|
|
149
184
|
|
|
150
185
|
// Splitter handle line
|
|
151
|
-
--#{$drawer}__splitter-handle--after--
|
|
186
|
+
--#{$drawer}__splitter-handle--after--BackgroundColor: var(--pf-t--global--border--color--control--default);
|
|
187
|
+
--#{$drawer}__splitter-handle--hover--after--BackgroundColor: var(--pf-t--global--border--color--hover);
|
|
188
|
+
--#{$drawer}__splitter-handle--focus--after--BackgroundColor: var(--pf-t--global--border--color--clicked);
|
|
189
|
+
--#{$drawer}__splitter-handle--active--after--BackgroundColor: var(--pf-t--global--border--color--clicked);
|
|
190
|
+
--#{$drawer}__splitter-handle--after--BorderColor: var(--pf-t--global--border--color--high-contrast);
|
|
152
191
|
--#{$drawer}__splitter-handle--after--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
|
|
153
192
|
--#{$drawer}__splitter-handle--after--BorderInlineEndWidth: 0;
|
|
154
193
|
--#{$drawer}__splitter-handle--after--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
|
|
155
194
|
--#{$drawer}__splitter-handle--after--BorderInlineStartWidth: 0;
|
|
156
|
-
--#{$drawer}__splitter
|
|
195
|
+
--#{$drawer}__splitter-handle--after--BorderRadius: var(--pf-t--global--border--radius--pill);
|
|
196
|
+
--#{$drawer}__splitter--hover__splitter-handle--after--BorderColor: var(--pf-t--global--color--brand--hover);
|
|
157
197
|
--#{$drawer}__splitter--m-vertical__splitter-handle--after--BorderBlockStartWidth: 0;
|
|
158
198
|
--#{$drawer}__splitter--m-vertical__splitter-handle--after--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
|
|
159
199
|
--#{$drawer}__splitter--m-vertical__splitter-handle--after--BorderBlockEndWidth: 0;
|
|
160
200
|
--#{$drawer}__splitter--m-vertical__splitter-handle--after--BorderInlineStartWidth: var(--pf-t--global--border--width--divider--default);
|
|
161
|
-
--#{$drawer}__splitter-handle--after--Width: #{pf-size-prem(
|
|
201
|
+
--#{$drawer}__splitter-handle--after--Width: #{pf-size-prem(35px)};
|
|
162
202
|
--#{$drawer}__splitter-handle--after--Height: #{pf-size-prem(4px)};
|
|
163
203
|
--#{$drawer}__splitter--m-vertical__splitter-handle--after--Width: #{pf-size-prem(4px)};
|
|
164
|
-
--#{$drawer}__splitter--m-vertical__splitter-handle--after--Height: #{pf-size-prem(
|
|
204
|
+
--#{$drawer}__splitter--m-vertical__splitter-handle--after--Height: #{pf-size-prem(35px)};
|
|
165
205
|
|
|
166
206
|
@media screen and (min-width: $pf-v6-global--breakpoint--xl) {
|
|
167
207
|
--#{$drawer}__panel--MinWidth: var(--#{$drawer}__panel--xl--MinWidth);
|
|
@@ -296,6 +336,19 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
|
|
|
296
336
|
--#{$drawer}__panel--BorderRadius: var(--#{$drawer}--m-pill__panel--BorderRadius);
|
|
297
337
|
--#{$drawer}--m-expanded__panel--inset: var(--#{$drawer}--m-pill--m-expanded__panel--inset);
|
|
298
338
|
--#{$drawer}__panel--MarginBlock: var(--#{$drawer}--m-pill--m-expanded__panel--inset);
|
|
339
|
+
--#{$drawer}__splitter--m-vertical--Width: var(--#{$drawer}--m-pill__splitter--m-vertical--Width);
|
|
340
|
+
--#{$drawer}__splitter--m-vertical--Height: var(--#{$drawer}--m-pill__splitter--m-vertical--Height);
|
|
341
|
+
--#{$drawer}__splitter--MarginBlockStart: var(--#{$drawer}--m-pill__splitter--m-vertical--MarginBlockStart);
|
|
342
|
+
--#{$drawer}__splitter--after--BorderColor: var(--#{$drawer}--m-pill__splitter--after--BorderColor);
|
|
343
|
+
--#{$drawer}__splitter--after--BorderInlineEndWidth: var(--#{$drawer}--m-pill__splitter--after--BorderInlineEndWidth);
|
|
344
|
+
--#{$drawer}__splitter--hover--after--BorderColor: var(--#{$drawer}--m-pill__splitter--hover--after--BorderColor);
|
|
345
|
+
--#{$drawer}__splitter--focus--after--BorderColor: var(--#{$drawer}--m-pill__splitter--focus--after--BorderColor);
|
|
346
|
+
--#{$drawer}__splitter--active--after--BorderColor: var(--#{$drawer}--m-pill__splitter--active--after--BorderColor);
|
|
347
|
+
--#{$drawer}__splitter--after--Width: var(--#{$drawer}--m-pill__splitter--after--Width);
|
|
348
|
+
--#{$drawer}__splitter--after--Height: var(--#{$drawer}--m-pill__splitter--after--Height);
|
|
349
|
+
--#{$drawer}__splitter--after--InsetInlineStart: var(--#{$drawer}--m-pill__splitter--after--InsetInlineStart);
|
|
350
|
+
--#{$drawer}__splitter--after--InsetInlineEnd: var(--#{$drawer}--m-pill__splitter--after--InsetInlineEnd);
|
|
351
|
+
--#{$drawer}__splitter--after--TranslateX: var(--#{$drawer}--m-pill__splitter--after--TranslateX);
|
|
299
352
|
|
|
300
353
|
> .#{$drawer}__main > .#{$drawer}__panel {
|
|
301
354
|
border-block-start-width: var(--#{$drawer}--m-pill__panel--BorderBlockStartWidth);
|
|
@@ -304,6 +357,26 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
|
|
|
304
357
|
border-inline-end-width: var(--#{$drawer}--m-pill__panel--BorderInlineEndWidth);
|
|
305
358
|
}
|
|
306
359
|
}
|
|
360
|
+
|
|
361
|
+
&.pf-m-panel-bottom {
|
|
362
|
+
@media screen and (min-width: $pf-v6-global--breakpoint--md) {
|
|
363
|
+
--#{$drawer}__splitter--Height: var(--#{$drawer}--m-pill--m-panel-bottom__splitter--Height);
|
|
364
|
+
--#{$drawer}__splitter--Width: var(--#{$drawer}--m-pill--m-panel-bottom__splitter--Width);
|
|
365
|
+
--#{$drawer}__splitter--MarginBlockStart: 0;
|
|
366
|
+
--#{$drawer}__splitter--MarginInlineStart: var(--#{$drawer}--m-pill--m-panel-bottom__splitter--MarginInlineStart);
|
|
367
|
+
--#{$drawer}__splitter--after--Width: var(--#{$drawer}--m-pill--m-panel-bottom__splitter--after--Width);
|
|
368
|
+
--#{$drawer}__splitter--after--Height: var(--#{$drawer}--m-pill--m-panel-bottom__splitter--after--Height);
|
|
369
|
+
--#{$drawer}__splitter--after--BorderBlockStartWidth: var(--#{$drawer}--m-pill--m-panel-bottom__splitter--after--BorderBlockStartWidth);
|
|
370
|
+
--#{$drawer}--m-panel-bottom__splitter--after--BorderBlockEndWidth: var(--#{$drawer}--m-pill--m-panel-bottom__splitter--after--BorderBlockEndWidth);
|
|
371
|
+
--#{$drawer}__splitter--after--BorderBlockEndWidth: var(--#{$drawer}--m-pill--m-panel-bottom__splitter--after--BorderBlockEndWidth);
|
|
372
|
+
--#{$drawer}__splitter--after--InsetBlockStart: var(--#{$drawer}--m-pill--m-panel-bottom__splitter--after--InsetBlockStart);
|
|
373
|
+
--#{$drawer}__splitter--after--InsetBlockEnd: var(--#{$drawer}--m-pill--m-panel-bottom__splitter--after--InsetBlockEnd);
|
|
374
|
+
--#{$drawer}__splitter--after--TranslateX: initial;
|
|
375
|
+
--#{$drawer}__splitter--after--TranslateY: var(--#{$drawer}--m-pill--m-panel-bottom__splitter--after--TranslateY);
|
|
376
|
+
--#{$drawer}__splitter--after--InsetInlineStart: var(--#{$drawer}--m-pill--m-panel-bottom__splitter--after--InsetInlineStart);
|
|
377
|
+
--#{$drawer}__splitter--after--InsetInlineEnd: var(--#{$drawer}--m-pill--m-panel-bottom__splitter--after--InsetInlineEnd);
|
|
378
|
+
}
|
|
379
|
+
}
|
|
307
380
|
}
|
|
308
381
|
}
|
|
309
382
|
|
|
@@ -496,8 +569,11 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
|
|
|
496
569
|
display: none;
|
|
497
570
|
width: var(--#{$drawer}__splitter--Width);
|
|
498
571
|
height: var(--#{$drawer}__splitter--Height);
|
|
572
|
+
margin-block-start: var(--#{$drawer}__splitter--MarginBlockStart, 0);
|
|
573
|
+
margin-inline-start: var(--#{$drawer}__splitter--MarginInlineStart, 0);
|
|
499
574
|
cursor: var(--#{$drawer}__splitter--Cursor);
|
|
500
575
|
background-color: var(--#{$drawer}__splitter--BackgroundColor);
|
|
576
|
+
outline-offset: var(--#{$drawer}__splitter--focus--OutlineOffset);
|
|
501
577
|
|
|
502
578
|
&.pf-m-vertical {
|
|
503
579
|
--#{$drawer}__splitter--Height: var(--#{$drawer}__splitter--m-vertical--Height);
|
|
@@ -511,23 +587,37 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
|
|
|
511
587
|
--#{$drawer}__splitter-handle--after--BorderInlineStartWidth: var(--#{$drawer}__splitter--m-vertical__splitter-handle--after--BorderInlineStartWidth);
|
|
512
588
|
}
|
|
513
589
|
|
|
514
|
-
&:hover
|
|
590
|
+
&:hover {
|
|
591
|
+
--#{$drawer}__splitter-handle--after--BackgroundColor: var(--#{$drawer}__splitter-handle--hover--after--BackgroundColor);
|
|
592
|
+
--#{$drawer}__splitter--after--BorderColor: var(--#{$drawer}__splitter--hover--after--BorderColor);
|
|
593
|
+
}
|
|
594
|
+
|
|
515
595
|
&:focus {
|
|
516
|
-
--#{$drawer}__splitter-handle--after--
|
|
596
|
+
--#{$drawer}__splitter-handle--after--BackgroundColor: var(--#{$drawer}__splitter-handle--focus--after--BackgroundColor);
|
|
597
|
+
--#{$drawer}__splitter--after--BorderColor: var(--#{$drawer}__splitter--focus--after--BorderColor); }
|
|
598
|
+
|
|
599
|
+
&:active {
|
|
600
|
+
--#{$drawer}__splitter-handle--after--BackgroundColor: var(--#{$drawer}__splitter-handle--active--after--BackgroundColor);
|
|
601
|
+
--#{$drawer}__splitter--after--BorderColor: var(--#{$drawer}__splitter--active--after--BorderColor);
|
|
517
602
|
}
|
|
518
603
|
|
|
604
|
+
|
|
519
605
|
&::after {
|
|
520
606
|
position: absolute;
|
|
521
|
-
inset-block-start:
|
|
522
|
-
inset-block-end:
|
|
523
|
-
inset-inline-start:
|
|
524
|
-
inset-inline-end:
|
|
607
|
+
inset-block-start: var(--#{$drawer}__splitter--after--InsetBlockStart);
|
|
608
|
+
inset-block-end: var(--#{$drawer}__splitter--after--InsetBlockEnd);
|
|
609
|
+
inset-inline-start: var(--#{$drawer}__splitter--after--InsetInlineStart);
|
|
610
|
+
inset-inline-end: var(--#{$drawer}__splitter--after--InsetInlineEnd);
|
|
611
|
+
z-index: -1; // sneak the pill version below the handle
|
|
612
|
+
width: var(--#{$drawer}__splitter--after--Width);
|
|
613
|
+
height: var(--#{$drawer}__splitter--after--Height);
|
|
525
614
|
content: "";
|
|
526
615
|
border: solid var(--#{$drawer}__splitter--after--BorderColor);
|
|
527
616
|
border-block-start-width: var(--#{$drawer}__splitter--after--BorderBlockStartWidth);
|
|
528
617
|
border-block-end-width: var(--#{$drawer}__splitter--after--BorderBlockEndWidth);
|
|
529
618
|
border-inline-start-width: var(--#{$drawer}__splitter--after--BorderInlineStartWidth);
|
|
530
619
|
border-inline-end-width: var(--#{$drawer}__splitter--after--BorderInlineEndWidth);
|
|
620
|
+
translate: var(--#{$drawer}__splitter--after--TranslateX, 0) var(--#{$drawer}__splitter--after--TranslateY, 0);
|
|
531
621
|
}
|
|
532
622
|
}
|
|
533
623
|
|
|
@@ -548,12 +638,14 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
|
|
|
548
638
|
width: var(--#{$drawer}__splitter-handle--after--Width);
|
|
549
639
|
height: var(--#{$drawer}__splitter-handle--after--Height);
|
|
550
640
|
content: "";
|
|
641
|
+
background-color: var(--#{$drawer}__splitter-handle--after--BackgroundColor);
|
|
551
642
|
border-color: var(--#{$drawer}__splitter-handle--after--BorderColor);
|
|
552
643
|
border-style: solid;
|
|
553
644
|
border-block-start-width: var(--#{$drawer}__splitter-handle--after--BorderBlockStartWidth);
|
|
554
645
|
border-block-end-width: var(--#{$drawer}__splitter-handle--after--BorderBlockEndWidth);
|
|
555
646
|
border-inline-start-width: var(--#{$drawer}__splitter-handle--after--BorderInlineStartWidth);
|
|
556
647
|
border-inline-end-width: var(--#{$drawer}__splitter-handle--after--BorderInlineEndWidth);
|
|
648
|
+
border-radius: var(--#{$drawer}__splitter-handle--after--BorderRadius);
|
|
557
649
|
}
|
|
558
650
|
}
|
|
559
651
|
|
package/components/Page/page.css
CHANGED
|
@@ -189,6 +189,9 @@
|
|
|
189
189
|
max-height: 100%;
|
|
190
190
|
background-color: var(--pf-v6-c-page--BackgroundColor);
|
|
191
191
|
}
|
|
192
|
+
:where(:root.pf-v6-theme-glass) .pf-v6-c-page {
|
|
193
|
+
background-color: transparent;
|
|
194
|
+
}
|
|
192
195
|
@media (min-width: 75rem) {
|
|
193
196
|
.pf-v6-c-page {
|
|
194
197
|
--pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--xl--Width);
|
|
@@ -229,6 +229,10 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
|
|
|
229
229
|
max-height: 100%;
|
|
230
230
|
background-color: var(--#{$page}--BackgroundColor);
|
|
231
231
|
|
|
232
|
+
:where(:root.pf-v6-theme-glass) & {
|
|
233
|
+
background-color: transparent;
|
|
234
|
+
}
|
|
235
|
+
|
|
232
236
|
@media (min-width: $pf-v6-global--breakpoint--xl) {
|
|
233
237
|
--#{$page}__sidebar--Width: var(--#{$page}__sidebar--xl--Width); // TODO can remove at breaking change
|
|
234
238
|
|