mod-arch-kubeflow 1.4.0 → 1.6.0
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/dist/style/MUI-theme.scss +555 -155
- package/package.json +3 -4
|
@@ -1,4 +1,151 @@
|
|
|
1
1
|
.mui-theme:root {
|
|
2
|
+
|
|
3
|
+
/*
|
|
4
|
+
╔════════════════════════════════════════════════════════════════════════════╗
|
|
5
|
+
║ PATTERNFLY GLOBAL TOKEN TRANSLATION LAYER ║
|
|
6
|
+
║ ║
|
|
7
|
+
║ This is the CORE of the MUI theming strategy. These overrides cascade ║
|
|
8
|
+
║ down to ALL PatternFly components automatically. ║
|
|
9
|
+
║ ║
|
|
10
|
+
║ ║
|
|
11
|
+
║ Reference: https://www.patternfly.org/tokens/all-patternfly-tokens ║
|
|
12
|
+
╚════════════════════════════════════════════════════════════════════════════╝
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
// ═══════════════════════════════════════════════════════════════════════════
|
|
16
|
+
// TEXT COLORS (64+ components affected)
|
|
17
|
+
// ═══════════════════════════════════════════════════════════════════════════
|
|
18
|
+
--pf-t--global--text--color--regular: var(--mui-palette-text-primary); // rgba(0,0,0,0.87)
|
|
19
|
+
--pf-t--global--text--color--subtle: var(--mui-palette-text-secondary); // rgba(0,0,0,0.6)
|
|
20
|
+
--pf-t--global--text--color--on-disabled: var(--mui-palette-text-disabled); // rgba(0,0,0,0.38)
|
|
21
|
+
--pf-t--global--text--color--placeholder: var(--mui-palette-text-secondary);
|
|
22
|
+
--pf-t--global--text--color--inverse: var(--mui-palette-common-white);
|
|
23
|
+
|
|
24
|
+
// Brand Text Colors
|
|
25
|
+
--pf-t--global--text--color--brand--default: var(--mui-palette-primary-main);
|
|
26
|
+
--pf-t--global--text--color--brand--hover: var(--mui-palette-primary-dark);
|
|
27
|
+
--pf-t--global--text--color--brand--clicked: var(--mui-palette-primary-dark);
|
|
28
|
+
--pf-t--global--text--color--on-brand--default: var(--mui-palette-primary-contrastText);
|
|
29
|
+
--pf-t--global--text--color--on-brand--hover: var(--mui-palette-primary-contrastText);
|
|
30
|
+
--pf-t--global--text--color--on-brand--clicked: var(--mui-palette-primary-contrastText);
|
|
31
|
+
|
|
32
|
+
// ═══════════════════════════════════════════════════════════════════════════
|
|
33
|
+
// BRAND/PRIMARY COLORS (Used by buttons, links, active states)
|
|
34
|
+
// ═══════════════════════════════════════════════════════════════════════════
|
|
35
|
+
--pf-t--global--color--brand--default: var(--mui-palette-primary-main);
|
|
36
|
+
--pf-t--global--color--brand--hover: var(--mui-palette-primary-dark);
|
|
37
|
+
--pf-t--global--color--brand--clicked: var(--mui-palette-primary-dark);
|
|
38
|
+
--pf-t--global--color--nonstatus--blue--default: var(--mui-palette-primary-main);
|
|
39
|
+
|
|
40
|
+
// ═══════════════════════════════════════════════════════════════════════════
|
|
41
|
+
// BACKGROUND COLORS (47+ components affected)
|
|
42
|
+
// ═══════════════════════════════════════════════════════════════════════════
|
|
43
|
+
--pf-t--global--background--color--primary--default: var(--mui-palette-background-paper); // #fff
|
|
44
|
+
--pf-t--global--background--color--secondary--default: var(--mui-palette-grey-100);
|
|
45
|
+
--pf-t--global--background--color--floating--default: var(--mui-palette-background-paper);
|
|
46
|
+
--pf-t--global--background--color--action--plain--hover: var(--mui-palette-action-hover);
|
|
47
|
+
--pf-t--global--background--color--control--default: var(--mui-palette-common-white);
|
|
48
|
+
--pf-t--global--background--color--disabled--default: var(--mui-palette-action-disabledBackground);
|
|
49
|
+
|
|
50
|
+
// ═══════════════════════════════════════════════════════════════════════════
|
|
51
|
+
// ICON COLORS (Affects all icons in components)
|
|
52
|
+
// ═══════════════════════════════════════════════════════════════════════════
|
|
53
|
+
--pf-t--global--icon--color--regular: var(--mui-palette-action-active); // rgba(0,0,0,0.54)
|
|
54
|
+
--pf-t--global--icon--color--subtle: var(--mui-palette-text-secondary);
|
|
55
|
+
--pf-t--global--icon--color--disabled: var(--mui-palette-action-disabled);
|
|
56
|
+
--pf-t--global--icon--color--brand--default: var(--mui-palette-primary-main);
|
|
57
|
+
--pf-t--global--icon--color--brand--hover: var(--mui-palette-primary-dark);
|
|
58
|
+
--pf-t--global--icon--color--on-brand--default: var(--mui-palette-primary-contrastText);
|
|
59
|
+
|
|
60
|
+
// ═══════════════════════════════════════════════════════════════════════════
|
|
61
|
+
// BORDER COLORS & STYLES
|
|
62
|
+
// ═══════════════════════════════════════════════════════════════════════════
|
|
63
|
+
--pf-t--global--border--color--default: rgba(0, 0, 0, 0.23); // MUI input default
|
|
64
|
+
--pf-t--global--border--color--hover: var(--mui-palette-common-black); // MUI input hover
|
|
65
|
+
--pf-t--global--border--color--clicked: var(--mui-palette-primary-main); // MUI focus/active
|
|
66
|
+
--pf-t--global--border--color--disabled: var(--mui-palette-action-disabled);
|
|
67
|
+
|
|
68
|
+
// Brand Border Colors
|
|
69
|
+
--pf-t--global--border--color--brand--default: var(--mui-palette-primary-main);
|
|
70
|
+
--pf-t--global--border--color--brand--hover: var(--mui-palette-primary-dark);
|
|
71
|
+
--pf-t--global--border--color--brand--clicked: var(--mui-palette-primary-dark);
|
|
72
|
+
|
|
73
|
+
// ═══════════════════════════════════════════════════════════════════════════
|
|
74
|
+
// BORDER RADIUS (26+ components affected)
|
|
75
|
+
// ═══════════════════════════════════════════════════════════════════════════
|
|
76
|
+
--pf-t--global--border--radius--small: var(--mui-shape-borderRadius); // 4px
|
|
77
|
+
--pf-t--global--border--radius--medium: var(--mui-shape-borderRadius); // 4px (MUI uses same)
|
|
78
|
+
--pf-t--global--border--radius--large: var(--mui-shape-borderRadius); // 4px (MUI uses same for modals)
|
|
79
|
+
--pf-t--global--border--radius--pill: var(--mui-shape-borderRadius); // MUI uses same for dropdowns
|
|
80
|
+
|
|
81
|
+
// ═══════════════════════════════════════════════════════════════════════════
|
|
82
|
+
// TYPOGRAPHY (42+ components affected for font-size, 25+ for font-weight)
|
|
83
|
+
// ═══════════════════════════════════════════════════════════════════════════
|
|
84
|
+
// Font families - use explicit values since --mui-typography-fontFamily may not be available as CSS var
|
|
85
|
+
--pf-t--global--font--family--body: "Roboto", "Helvetica", "Arial", sans-serif;
|
|
86
|
+
--pf-t--global--font--family--heading: "Roboto", "Helvetica", "Arial", sans-serif;
|
|
87
|
+
--pf-t--global--font--family--100: "Roboto", "Helvetica", "Arial", sans-serif;
|
|
88
|
+
--pf-t--global--font--family--200: "Roboto", "Helvetica", "Arial", sans-serif;
|
|
89
|
+
--pf-t--global--font--family--300: "Roboto", "Courier", monospace;
|
|
90
|
+
|
|
91
|
+
// Font sizes (MUI base is 14px = 0.875rem, PF base is 1rem = 16px)
|
|
92
|
+
--pf-t--global--font--size--body--default: 0.875rem; // 14px - MUI body1
|
|
93
|
+
--pf-t--global--font--size--body--sm: 0.75rem; // 12px - MUI caption
|
|
94
|
+
--pf-t--global--font--size--body--lg: 1rem; // 16px
|
|
95
|
+
|
|
96
|
+
// Font weights (MUI: 300=light, 400=regular, 500=medium, 700=bold)
|
|
97
|
+
--pf-t--global--font--weight--body--default: 400;
|
|
98
|
+
--pf-t--global--font--weight--body--bold: 500;
|
|
99
|
+
--pf-t--global--font--weight--heading--default: 500;
|
|
100
|
+
|
|
101
|
+
// Line heights
|
|
102
|
+
--pf-t--global--font--line-height--body: 1.5; // MUI default
|
|
103
|
+
|
|
104
|
+
// ═══════════════════════════════════════════════════════════════════════════
|
|
105
|
+
// BOX SHADOWS (18+ components affected)
|
|
106
|
+
// ═══════════════════════════════════════════════════════════════════════════
|
|
107
|
+
--pf-t--global--box-shadow--sm: var(--mui-shadows-1);
|
|
108
|
+
--pf-t--global--box-shadow--md: var(--mui-shadows-4);
|
|
109
|
+
--pf-t--global--box-shadow--lg: var(--mui-shadows-8);
|
|
110
|
+
|
|
111
|
+
// ═══════════════════════════════════════════════════════════════════════════
|
|
112
|
+
// SPACING (PF and MUI both use 8px base - mostly compatible)
|
|
113
|
+
// ═══════════════════════════════════════════════════════════════════════════
|
|
114
|
+
// PF tokens already match MUI's 8px system:
|
|
115
|
+
// --pf-t--global--spacer--xs: 4px (0.5 * 8px)
|
|
116
|
+
// --pf-t--global--spacer--sm: 8px (1 * 8px)
|
|
117
|
+
// --pf-t--global--spacer--md: 16px (2 * 8px)
|
|
118
|
+
// --pf-t--global--spacer--lg: 24px (3 * 8px)
|
|
119
|
+
// --pf-t--global--spacer--xl: 32px (4 * 8px)
|
|
120
|
+
|
|
121
|
+
--pf-t--global--spacer--gap--group-to-group--vertical--default: var(--pf-t--global--spacer--sm);
|
|
122
|
+
--pf-t--global--border--width--box--status--default: var(--pf-t--global--border--width--regular);
|
|
123
|
+
|
|
124
|
+
// ═══════════════════════════════════════════════════════════════════════════
|
|
125
|
+
// STATUS COLORS (Semantic - for alerts, badges, status indicators)
|
|
126
|
+
// ═══════════════════════════════════════════════════════════════════════════
|
|
127
|
+
--pf-t--global--color--status--danger--default: var(--mui-palette-error-main);
|
|
128
|
+
--pf-t--global--color--status--warning--default: var(--mui-palette-warning-main);
|
|
129
|
+
--pf-t--global--color--status--success--default: var(--mui-palette-success-main);
|
|
130
|
+
--pf-t--global--color--status--info--default: var(--mui-palette-info-main);
|
|
131
|
+
|
|
132
|
+
--pf-t--global--icon--color--status--danger--default: var(--mui-palette-error-main);
|
|
133
|
+
--pf-t--global--icon--color--status--warning--default: var(--mui-palette-warning-main);
|
|
134
|
+
--pf-t--global--icon--color--status--success--default: var(--mui-palette-success-main);
|
|
135
|
+
--pf-t--global--icon--color--status--info--default: var(--mui-palette-info-main);
|
|
136
|
+
|
|
137
|
+
// Status Border Colors (for alerts, form validation, etc.)
|
|
138
|
+
--pf-t--global--border--color--status--danger--default: var(--mui-palette-error-main);
|
|
139
|
+
--pf-t--global--border--color--status--warning--default: var(--mui-palette-warning-main);
|
|
140
|
+
--pf-t--global--border--color--status--success--default: var(--mui-palette-success-main);
|
|
141
|
+
--pf-t--global--border--color--status--info--default: var(--mui-palette-info-main);
|
|
142
|
+
|
|
143
|
+
// ═══════════════════════════════════════════════════════════════════════════
|
|
144
|
+
// MUI CUSTOM VARIABLES
|
|
145
|
+
// Custom variables for MUI-specific values used in component overrides below.
|
|
146
|
+
// These define computed values not available in the MUI theme object.
|
|
147
|
+
// ═══════════════════════════════════════════════════════════════════════════
|
|
148
|
+
|
|
2
149
|
// Alert
|
|
3
150
|
--mui-alert--BoxShadow: none;
|
|
4
151
|
--mui-alert--BorderRadius: var(--mui-shape-borderRadius);
|
|
@@ -13,13 +160,16 @@
|
|
|
13
160
|
--mui-alert__icon--MarginBlockStart: 7px;
|
|
14
161
|
--mui-alert__icon--MarginBlockEnd: 7px;
|
|
15
162
|
--mui-alert__icon--FontSize: 22px;
|
|
16
|
-
|
|
17
|
-
--mui-alert__border-danger-color: var(--mui-palette-error-main);
|
|
163
|
+
// Icon and border colors now handled by global status tokens
|
|
18
164
|
--mui-alert__title--FontWeight: 500;
|
|
19
165
|
|
|
20
166
|
// Backdrop
|
|
21
167
|
--mui-backdrop-BackgroundColor: rgba(0, 0, 0, 0.5);
|
|
22
168
|
|
|
169
|
+
// Switch - MUI/iOS-style switches use a pill shape (fully rounded ends)
|
|
170
|
+
// This preserves the capsule appearance while other components use the MUI border radius
|
|
171
|
+
--mui-switch--BorderRadius: 9999px;
|
|
172
|
+
|
|
23
173
|
// Button
|
|
24
174
|
--mui-button-FontWeight: 500;
|
|
25
175
|
--mui-button--BorderWidth: var(--pf-t--global--border--width--regular);
|
|
@@ -39,14 +189,19 @@
|
|
|
39
189
|
// Form focus states (thicker border for emphasis, adjusted padding to prevent layout shift)
|
|
40
190
|
--mui-form--focus--BorderWidth: 2px;
|
|
41
191
|
--mui-form--focus--Padding: 7px;
|
|
42
|
-
|
|
192
|
+
|
|
43
193
|
// Form fieldset styling (MUI input border defaults)
|
|
44
|
-
|
|
194
|
+
// Uses global border color: --pf-t--global--border--color--default
|
|
195
|
+
--mui-form-fieldset--BorderColor: var(--pf-t--global--border--color--default);
|
|
45
196
|
--mui-form-fieldset--Padding: var(--mui-spacing-8px); // 8px
|
|
46
197
|
--mui-form-fieldset--InsetTop: calc(-1 * var(--mui-spacing-8px)); // -8px for label positioning
|
|
47
198
|
--mui-form-fieldset--LegendPadding: var(--mui-spacing-4px); // 4px horizontal padding
|
|
48
199
|
--mui-form-fieldset--LegendFontSize: var(--pf-t--global--font--size--body--sm); // 0.75rem
|
|
49
200
|
|
|
201
|
+
// Form control border styling (MUI input defaults)
|
|
202
|
+
--mui-form-control--BorderWidth: 1px;
|
|
203
|
+
--mui-form-control--BorderColor: rgba(0, 0, 0, 0.23); // MUI standard input border
|
|
204
|
+
|
|
50
205
|
// Helper text
|
|
51
206
|
--mui-helper-text__item--FontWeight: 400;
|
|
52
207
|
|
|
@@ -128,7 +283,7 @@
|
|
|
128
283
|
--mui-tabs__link--PaddingBlockEnd: 12px;
|
|
129
284
|
--mui-tabs__link--PaddingInlineStart: 16px;
|
|
130
285
|
--mui-tabs__link--PaddingInlineEnd: 16px;
|
|
131
|
-
--mui-tabs__item--m-current__link--Color: var(--
|
|
286
|
+
--mui-tabs__item--m-current__link--Color: var(--mui-palette-primary-main);
|
|
132
287
|
--mui-tabs__item--m-current__link--after--BorderWidth: 2px;
|
|
133
288
|
--mui-tabs__link--FontSize: 0.875rem;
|
|
134
289
|
|
|
@@ -139,19 +294,24 @@
|
|
|
139
294
|
--mui-spacing-16px: calc(2 * var(--mui-spacing));
|
|
140
295
|
--mui-spacing-32px: calc(4 * var(--mui-spacing));
|
|
141
296
|
|
|
142
|
-
--pf-t--global--spacer--gap--group-to-group--vertical--default: var(--pf-t--global--spacer--sm);
|
|
143
|
-
--pf-t--global--border--width--box--status--default: var(--pf-t--global--border--width--regular);
|
|
144
|
-
--pf-t--global--border--radius--pill: var(--mui-shape-borderRadius);
|
|
145
|
-
--pf-t--global--text--color--brand--default: var(--mui-palette-primary-main);
|
|
146
|
-
|
|
147
|
-
--pf-t--global--color--nonstatus--blue--default: var(--mui-palette-primary-main);
|
|
148
|
-
--pf-t--global--text--color--inverse: var(--mui-palette-common-white);
|
|
149
297
|
|
|
150
|
-
--pf-t--global--font--family--100: Roboto, Helvetica, Arial, sans-serif;
|
|
151
|
-
--pf-t--global--font--family--200: Roboto, Helvetica, Arial, sans-serif;
|
|
152
|
-
--pf-t--global--font--family--300: Roboto, Courier, monospace;
|
|
153
298
|
}
|
|
154
299
|
|
|
300
|
+
/*
|
|
301
|
+
╔════════════════════════════════════════════════════════════════════════════════╗
|
|
302
|
+
║ COMPONENT-SPECIFIC OVERRIDES ║
|
|
303
|
+
║ ║
|
|
304
|
+
║ These overrides apply to individual PatternFly components when the global ║
|
|
305
|
+
║ token translation layer above is not sufficient. Use these for: ║
|
|
306
|
+
║ • Component-specific spacing/padding adjustments ║
|
|
307
|
+
║ • MUI-specific behaviors not covered by PF tokens ║
|
|
308
|
+
║ • Layout properties (position, display, flex) that have no PF variables ║
|
|
309
|
+
║ • State-specific overrides (hover, focus, disabled) with custom behavior ║
|
|
310
|
+
║ ║
|
|
311
|
+
║ Before adding new overrides here, check if a global token override would work. ║
|
|
312
|
+
╚════════════════════════════════════════════════════════════════════════════════╝
|
|
313
|
+
*/
|
|
314
|
+
|
|
155
315
|
.mui-theme .pf-v6-c-action-list__item .pf-v6-c-button {
|
|
156
316
|
--pf-v6-c-button--PaddingInlineStart: 0;
|
|
157
317
|
--pf-v6-c-button--PaddingInlineEnd: 0;
|
|
@@ -177,19 +337,20 @@
|
|
|
177
337
|
}
|
|
178
338
|
|
|
179
339
|
.mui-theme .pf-v6-c-alert.pf-m-danger {
|
|
180
|
-
--pf-
|
|
181
|
-
--pf-
|
|
340
|
+
// BorderColor inherited from --pf-t--global--border--color--status--danger--default
|
|
341
|
+
// Icon color inherited from --pf-t--global--icon--color--status--danger--default
|
|
342
|
+
// Title color: MUI uses error color (not PF default of regular text)
|
|
182
343
|
--pf-v6-c-alert__title--Color: var(--mui-palette-Alert-errorColor);
|
|
183
344
|
}
|
|
184
345
|
|
|
185
346
|
.mui-theme .pf-v6-c-alert.pf-m-danger .pf-v6-c-alert__description {
|
|
186
347
|
color: var(--mui-palette-Alert-errorColor);
|
|
187
|
-
padding-block-end: var(--
|
|
348
|
+
padding-block-end: var(--pf-t--global--spacer--sm);
|
|
188
349
|
}
|
|
189
350
|
|
|
190
351
|
|
|
191
352
|
.mui-theme .pf-v6-c-alert__title {
|
|
192
|
-
padding-block: var(--
|
|
353
|
+
padding-block: var(--pf-t--global--spacer--sm);
|
|
193
354
|
}
|
|
194
355
|
|
|
195
356
|
.mui-theme .pf-v6-c-alert__icon {
|
|
@@ -215,7 +376,6 @@
|
|
|
215
376
|
}
|
|
216
377
|
|
|
217
378
|
.mui-theme .pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
218
|
-
--pf-v6-c-button--hover--Color: var(--mui-palette-primary-main);
|
|
219
379
|
text-decoration-color: var(--mui-link-underlineColor);
|
|
220
380
|
|
|
221
381
|
&:hover {
|
|
@@ -237,37 +397,33 @@
|
|
|
237
397
|
--pf-v6-c-button--BackgroundColor: rgba(33, 150, 243, 0.04);
|
|
238
398
|
}
|
|
239
399
|
|
|
240
|
-
|
|
241
400
|
.mui-theme .pf-v6-c-card {
|
|
242
401
|
--pf-v6-c-card--BorderWidth: var(--pf-t--global--border--width--regular);
|
|
243
402
|
--pf-v6-c-card--BorderRadius: var(--mui-shape-borderRadius);
|
|
244
|
-
--pf-v6-c-card--BorderColor: var(--mui-palette-divider);
|
|
245
403
|
border: var(--pf-v6-c-card--BorderWidth) solid var(--pf-v6-c-card--BorderColor);
|
|
404
|
+
|
|
405
|
+
// Hide PF's ::before pseudo-element border to prevent double borders
|
|
406
|
+
&::before {
|
|
407
|
+
display: none;
|
|
408
|
+
}
|
|
246
409
|
}
|
|
247
410
|
|
|
248
411
|
.mui-theme .pf-v6-c-card.pf-m-compact.pf-m-selectable {
|
|
249
412
|
--pf-v6-c-card--BorderWidth: var(--pf-t--global--border--width--regular);
|
|
250
|
-
--pf-v6-c-card--BorderColor: var(--mui-palette-divider);
|
|
251
|
-
}
|
|
252
|
-
|
|
253
|
-
.mui-theme .pf-v6-c-card__selectable-actions
|
|
254
|
-
:is(.pf-v6-c-check__label, .pf-v6-c-radio__label, .pf-v6-c-card__clickable-action):hover {
|
|
255
|
-
--pf-v6-c-card--BorderColor: var(--mui-palette-grey-300);
|
|
256
413
|
}
|
|
257
414
|
|
|
258
415
|
.mui-theme .pf-v6-c-card.pf-m-selectable:hover {
|
|
259
416
|
--pf-v6-c-card--BackgroundColor: var(--mui-palette-grey-100);
|
|
260
|
-
--pf-v6-c-card--BorderColor: var(--mui-palette-grey-200);
|
|
261
417
|
}
|
|
262
418
|
|
|
263
419
|
.mui-theme .pf-v6-c-card.pf-m-selected {
|
|
264
420
|
--pf-v6-c-card--BackgroundColor: var(--mui-palette-grey-200);
|
|
265
|
-
--pf-v6-c-card--m-selectable--m-selected--BorderColor: var(--mui-palette-
|
|
421
|
+
--pf-v6-c-card--m-selectable--m-selected--BorderColor: var(--mui-palette-grey-400);
|
|
266
422
|
}
|
|
267
423
|
|
|
268
424
|
.mui-theme .pf-v6-c-card.pf-m-selected:hover {
|
|
269
425
|
--pf-v6-c-card--BackgroundColor: var(--mui-palette-grey-300);
|
|
270
|
-
--pf-v6-c-card--m-selectable--m-selected--BorderColor: var(--mui-palette-
|
|
426
|
+
--pf-v6-c-card--m-selectable--m-selected--BorderColor: var(--mui-palette-grey-400);
|
|
271
427
|
}
|
|
272
428
|
|
|
273
429
|
.mui-theme .pf-v6-c-description-list__term {
|
|
@@ -349,8 +505,9 @@
|
|
|
349
505
|
--pf-v6-c-form__section-title--MarginInlineEnd: 0px;
|
|
350
506
|
}
|
|
351
507
|
|
|
352
|
-
// Base form label styles
|
|
353
|
-
|
|
508
|
+
// Base form label styles - only apply to text inputs (those with fieldset wrapper)
|
|
509
|
+
// Exclude NumberInput labels which don't use the fieldset pattern
|
|
510
|
+
.mui-theme .pf-v6-c-form__group:not(:has(.pf-v6-c-number-input)) .pf-v6-c-form__label {
|
|
354
511
|
position: relative;
|
|
355
512
|
// TODO: Investigate using a fixed value or transform/rem for consistent positioning.
|
|
356
513
|
top: 78%;
|
|
@@ -369,6 +526,7 @@
|
|
|
369
526
|
// Form controls with number inputs - specific styling overrides
|
|
370
527
|
.mui-theme .pf-v6-c-form__group:has(.pf-v6-c-number-input) {
|
|
371
528
|
.pf-v6-c-form__label {
|
|
529
|
+
// NumberInput labels use standard label positioning (not floating)
|
|
372
530
|
top: 30%;
|
|
373
531
|
font-size: 16px;
|
|
374
532
|
left: 0;
|
|
@@ -396,6 +554,44 @@
|
|
|
396
554
|
border-radius: var(--pf-v6-c-form-control--BorderRadius, var(--mui-shape-borderRadius));
|
|
397
555
|
}
|
|
398
556
|
|
|
557
|
+
// NumberInput uses a span.pf-v6-c-form-control, so it gets excluded by the :not(span) rule above.
|
|
558
|
+
// This adds the border specifically to NumberInput's form-control span.
|
|
559
|
+
// Uses PF component variables which inherit from global tokens set at :root
|
|
560
|
+
.mui-theme .pf-v6-c-number-input span.pf-v6-c-form-control {
|
|
561
|
+
border: var(--pf-v6-c-form-control--before--BorderWidth) solid var(--pf-v6-c-form-control--before--BorderColor);
|
|
562
|
+
box-sizing: border-box;
|
|
563
|
+
|
|
564
|
+
// Hover state - uses PF component hover variable
|
|
565
|
+
&:hover {
|
|
566
|
+
border-color: var(--pf-v6-c-form-control--hover--after--BorderColor);
|
|
567
|
+
}
|
|
568
|
+
|
|
569
|
+
// Focus state - use box-shadow to simulate thicker border without affecting layout
|
|
570
|
+
// Uses PF expanded (clicked) color which maps to primary/focus color
|
|
571
|
+
&:focus-within {
|
|
572
|
+
border-color: var(--pf-v6-c-form-control--m-expanded--after--BorderColor);
|
|
573
|
+
// Simulate 2px border with 1px border + 1px inset box-shadow
|
|
574
|
+
box-shadow: inset 0 0 0 1px var(--pf-v6-c-form-control--m-expanded--after--BorderColor);
|
|
575
|
+
}
|
|
576
|
+
}
|
|
577
|
+
|
|
578
|
+
// NumberInput layout fixes - ensure buttons fill full height and connect seamlessly
|
|
579
|
+
.mui-theme .pf-v6-c-number-input {
|
|
580
|
+
// Ensure consistent height
|
|
581
|
+
align-items: stretch;
|
|
582
|
+
|
|
583
|
+
.pf-v6-c-input-group__item {
|
|
584
|
+
display: flex;
|
|
585
|
+
align-items: stretch;
|
|
586
|
+
}
|
|
587
|
+
|
|
588
|
+
// Make buttons take full height of their container
|
|
589
|
+
.pf-v6-c-button {
|
|
590
|
+
height: 100%;
|
|
591
|
+
align-self: stretch;
|
|
592
|
+
}
|
|
593
|
+
}
|
|
594
|
+
|
|
399
595
|
// Remove pseudo-element borders everywhere since we're using real borders now
|
|
400
596
|
.mui-theme .pf-v6-c-form-control::after,
|
|
401
597
|
.mui-theme .pf-v6-c-form-control::before {
|
|
@@ -414,15 +610,13 @@
|
|
|
414
610
|
--pf-v6-c-button--PaddingInlineEnd: var(--mui-button--PaddingInlineEnd);
|
|
415
611
|
}
|
|
416
612
|
|
|
613
|
+
// Consistent form control padding and styling for all inputs except file upload components and pagination
|
|
614
|
+
// Pagination has inputs within form controls that need different padding, so exclude them
|
|
417
615
|
.mui-theme .pf-v6-c-form-control {
|
|
418
616
|
--pf-v6-c-form-control--m-disabled--BackgroundColor: var(--mui-palette-common-white);
|
|
419
|
-
--pf-
|
|
617
|
+
// Disabled color inherited from --pf-t--global--text--color--on-disabled (set to MUI text-disabled)
|
|
420
618
|
--pf-v6-c-form-control--m-error--after--BorderColor: var(--mui-palette-error-main);
|
|
421
619
|
--pf-v6-c-form-control--m-error--hover--after--BorderColor: var(--mui-palette-error-main);
|
|
422
|
-
}
|
|
423
|
-
|
|
424
|
-
// Consistent form control padding for all inputs except file upload components
|
|
425
|
-
.mui-theme .pf-v6-c-form-control {
|
|
426
620
|
// Resize is disabled in MUI.
|
|
427
621
|
resize: none;
|
|
428
622
|
--pf-v6-c-form-control--PaddingBlockStart: var(--mui-spacing-16px);
|
|
@@ -434,6 +628,13 @@
|
|
|
434
628
|
}
|
|
435
629
|
}
|
|
436
630
|
|
|
631
|
+
// Exclude pagination form controls from padding rules (pagination has its own sizing)
|
|
632
|
+
// Pagination inputs need to maintain their compact size
|
|
633
|
+
.mui-theme .pf-v6-c-pagination .pf-v6-c-form-control {
|
|
634
|
+
--pf-v6-c-form-control--PaddingBlockStart: unset;
|
|
635
|
+
--pf-v6-c-form-control--PaddingBlockEnd: unset;
|
|
636
|
+
}
|
|
637
|
+
|
|
437
638
|
.mui-theme .pf-v6-c-form__section {
|
|
438
639
|
--pf-v6-c-form__section--Gap: 0px;
|
|
439
640
|
}
|
|
@@ -451,9 +652,6 @@
|
|
|
451
652
|
--pf-v6-c-text-input-group__text-input--PaddingInlineStart: 32px;
|
|
452
653
|
--pf-v6-c-text-input-group__text-input--PaddingBlockEnd: 16.5px;
|
|
453
654
|
--pf-v6-c-text-input-group__text-input--PaddingInlineEnd: 14px;
|
|
454
|
-
}
|
|
455
|
-
|
|
456
|
-
.mui-theme .pf-v6-c-text-input-group {
|
|
457
655
|
--pf-v6-c-text-input-group__icon--Color: rgba(0, 0, 0, 0.38);
|
|
458
656
|
}
|
|
459
657
|
|
|
@@ -484,12 +682,6 @@
|
|
|
484
682
|
outline: none;
|
|
485
683
|
}
|
|
486
684
|
|
|
487
|
-
.form-fieldset-wrapper {
|
|
488
|
-
position: relative;
|
|
489
|
-
width: 100%;
|
|
490
|
-
}
|
|
491
|
-
|
|
492
|
-
|
|
493
685
|
.mui-theme .pf-v6-c-form__group .form-fieldset-legend {
|
|
494
686
|
float: unset;
|
|
495
687
|
width: auto;
|
|
@@ -504,24 +696,39 @@
|
|
|
504
696
|
max-width: 100%;
|
|
505
697
|
}
|
|
506
698
|
|
|
507
|
-
.form-fieldset-wrapper:hover .form-fieldset {
|
|
699
|
+
.mui-theme .form-fieldset-wrapper:hover .form-fieldset {
|
|
508
700
|
border-color: var(--mui-palette-common-black);
|
|
509
701
|
}
|
|
510
702
|
|
|
511
|
-
.form-fieldset-wrapper:focus-within span.pf-v6-c-form-control.pf-m-disabled ~ .form-fieldset,
|
|
512
|
-
.form-fieldset-wrapper:hover span.pf-v6-c-form-control.pf-m-disabled ~ .form-fieldset {
|
|
513
|
-
border-color:
|
|
703
|
+
.mui-theme .form-fieldset-wrapper:focus-within span.pf-v6-c-form-control.pf-m-disabled ~ .form-fieldset,
|
|
704
|
+
.mui-theme .form-fieldset-wrapper:hover span.pf-v6-c-form-control.pf-m-disabled ~ .form-fieldset {
|
|
705
|
+
border-color: var(--pf-t--global--border--color--default);
|
|
706
|
+
}
|
|
707
|
+
|
|
708
|
+
// Disabled menu toggle inside fieldset wrapper - use disabled border color
|
|
709
|
+
.mui-theme .form-fieldset-wrapper:has(.pf-v6-c-menu-toggle.pf-m-disabled) .form-fieldset {
|
|
710
|
+
border-color: var(--mui-palette-action-disabled);
|
|
514
711
|
}
|
|
515
712
|
|
|
516
|
-
.form-fieldset-wrapper
|
|
713
|
+
.mui-theme .form-fieldset-wrapper:has(.pf-v6-c-menu-toggle.pf-m-disabled):hover .form-fieldset {
|
|
714
|
+
border-color: var(--mui-palette-action-disabled);
|
|
715
|
+
}
|
|
716
|
+
|
|
717
|
+
// Hide menu-toggle's ::before pseudo-element border inside fieldset wrapper
|
|
718
|
+
// The fieldset wrapper provides the border, so we don't need the ::before border
|
|
719
|
+
.mui-theme .form-fieldset-wrapper .pf-v6-c-menu-toggle::before {
|
|
720
|
+
border: none;
|
|
721
|
+
}
|
|
722
|
+
|
|
723
|
+
.mui-theme .form-fieldset-wrapper span.pf-v6-c-form-control.pf-m-error ~ .form-fieldset {
|
|
517
724
|
border-color: var(--mui-palette-error-main);
|
|
518
725
|
}
|
|
519
726
|
|
|
520
|
-
.form-fieldset-wrapper .pf-v6-c-input-group span.pf-v6-c-form-control
|
|
727
|
+
.mui-theme .form-fieldset-wrapper .pf-v6-c-input-group span.pf-v6-c-form-control.pf-m-error ~ .form-fieldset {
|
|
521
728
|
border-color: var(--mui-palette-error-main);
|
|
522
729
|
}
|
|
523
730
|
|
|
524
|
-
.form-fieldset-wrapper .pf-v6-c-input-group__item button {
|
|
731
|
+
.mui-theme .form-fieldset-wrapper .pf-v6-c-input-group__item button {
|
|
525
732
|
// Aligns EyeIcon in password input
|
|
526
733
|
--pf-v6-c-button--PaddingBlockStart: var(--mui-spacing-16px);
|
|
527
734
|
--pf-v6-c-button--PaddingBlockEnd: var(--mui-spacing-16px);
|
|
@@ -529,7 +736,7 @@
|
|
|
529
736
|
--pf-v6-c-button--BorderRadius: 50%;
|
|
530
737
|
}
|
|
531
738
|
|
|
532
|
-
.form-fieldset-wrapper:focus-within .form-fieldset {
|
|
739
|
+
.mui-theme .form-fieldset-wrapper:focus-within .form-fieldset {
|
|
533
740
|
border-color: var(--mui-palette-primary-main);
|
|
534
741
|
border-width: var(--mui-form--focus--BorderWidth);
|
|
535
742
|
padding: var(--mui-form--focus--Padding) var(--mui-form--focus--Padding);
|
|
@@ -579,11 +786,20 @@
|
|
|
579
786
|
border-color: var(--mui-form-fieldset--BorderColor);
|
|
580
787
|
}
|
|
581
788
|
|
|
789
|
+
// Disabled menu toggle inside fieldset wrapper - use disabled border color
|
|
790
|
+
.mui-theme .pf-v6-c-form .form-fieldset-wrapper:has(.pf-v6-c-menu-toggle.pf-m-disabled) .form-fieldset {
|
|
791
|
+
border-color: var(--mui-palette-action-disabled);
|
|
792
|
+
}
|
|
793
|
+
|
|
794
|
+
.mui-theme .pf-v6-c-form .form-fieldset-wrapper:has(.pf-v6-c-menu-toggle.pf-m-disabled):hover .form-fieldset {
|
|
795
|
+
border-color: var(--mui-palette-action-disabled);
|
|
796
|
+
}
|
|
797
|
+
|
|
582
798
|
.mui-theme .pf-v6-c-form .form-fieldset-wrapper span.pf-v6-c-form-control.pf-m-error ~ .form-fieldset {
|
|
583
799
|
border-color: var(--mui-palette-error-main);
|
|
584
800
|
}
|
|
585
801
|
|
|
586
|
-
.mui-theme .pf-v6-c-form .form-fieldset-wrapper .pf-v6-c-input-group span.pf-v6-c-form-control
|
|
802
|
+
.mui-theme .pf-v6-c-form .form-fieldset-wrapper .pf-v6-c-input-group span.pf-v6-c-form-control.pf-m-error ~ .form-fieldset {
|
|
587
803
|
border-color: var(--mui-palette-error-main);
|
|
588
804
|
}
|
|
589
805
|
|
|
@@ -605,15 +821,6 @@
|
|
|
605
821
|
color: var(--mui-palette-primary-main);
|
|
606
822
|
}
|
|
607
823
|
|
|
608
|
-
// Indentation for secret key-value pairs
|
|
609
|
-
.mui-theme .pf-v6-l-grid.secret-key-grid {
|
|
610
|
-
margin-left: var(--pf-t--global--spacer--xl);
|
|
611
|
-
}
|
|
612
|
-
|
|
613
|
-
.mui-theme .pf-v6-c-form .pf-v6-c-form__group.secret-value-indented {
|
|
614
|
-
margin-left: var(--pf-t--global--spacer--xl);
|
|
615
|
-
}
|
|
616
|
-
|
|
617
824
|
.mui-theme .pf-v6-l-grid__item.secret-remove-button-container {
|
|
618
825
|
display: flex;
|
|
619
826
|
align-items: flex-end;
|
|
@@ -666,18 +873,27 @@
|
|
|
666
873
|
border-color: var(--mui-form-fieldset--BorderColor);
|
|
667
874
|
}
|
|
668
875
|
|
|
876
|
+
// Disabled menu toggle inside fieldset wrapper - use disabled border color
|
|
877
|
+
.mui-theme [class*="pf-v6-l-"] .form-fieldset-wrapper:has(.pf-v6-c-menu-toggle.pf-m-disabled) .form-fieldset {
|
|
878
|
+
border-color: var(--mui-palette-action-disabled);
|
|
879
|
+
}
|
|
880
|
+
|
|
881
|
+
.mui-theme [class*="pf-v6-l-"] .form-fieldset-wrapper:has(.pf-v6-c-menu-toggle.pf-m-disabled):hover .form-fieldset {
|
|
882
|
+
border-color: var(--mui-palette-action-disabled);
|
|
883
|
+
}
|
|
884
|
+
|
|
669
885
|
.mui-theme [class*="pf-v6-l-"] .form-fieldset-wrapper span.pf-v6-c-form-control.pf-m-error ~ .form-fieldset {
|
|
670
886
|
border-color: var(--mui-palette-error-main);
|
|
671
887
|
}
|
|
672
888
|
|
|
673
|
-
.mui-theme [class*="pf-v6-l-"] .form-fieldset-wrapper .pf-v6-c-input-group span.pf-v6-c-form-control
|
|
889
|
+
.mui-theme [class*="pf-v6-l-"] .form-fieldset-wrapper .pf-v6-c-input-group span.pf-v6-c-form-control.pf-m-error ~ .form-fieldset {
|
|
674
890
|
border-color: var(--mui-palette-error-main);
|
|
675
891
|
}
|
|
676
892
|
|
|
677
893
|
.mui-theme [class*="pf-v6-l-"] .form-fieldset-wrapper .pf-v6-c-input-group__item button {
|
|
678
894
|
// Aligns EyeIcon in password input
|
|
679
|
-
--pf-v6-c-button--PaddingBlockStart: var(--
|
|
680
|
-
--pf-v6-c-button--PaddingBlockEnd: var(--
|
|
895
|
+
--pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--md);
|
|
896
|
+
--pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--md);
|
|
681
897
|
--pf-v6-c-button--BorderColor: var(--mui-palette-common-white);
|
|
682
898
|
--pf-v6-c-button--BorderRadius: 50%;
|
|
683
899
|
}
|
|
@@ -696,7 +912,7 @@
|
|
|
696
912
|
border-color: var(--mui-palette-common-black);
|
|
697
913
|
}
|
|
698
914
|
|
|
699
|
-
.form-fieldset-legend {
|
|
915
|
+
.mui-theme .form-fieldset-legend {
|
|
700
916
|
float: unset;
|
|
701
917
|
width: auto;
|
|
702
918
|
overflow: hidden;
|
|
@@ -708,30 +924,30 @@
|
|
|
708
924
|
max-width: 100%;
|
|
709
925
|
}
|
|
710
926
|
|
|
711
|
-
.form-fieldset-wrapper:focus-within {
|
|
927
|
+
.mui-theme .form-fieldset-wrapper:focus-within {
|
|
712
928
|
color: var(--mui-palette-primary-main);
|
|
713
929
|
}
|
|
714
930
|
|
|
715
|
-
.form-fieldset-wrapper,
|
|
716
|
-
.toolbar-fieldset-wrapper,
|
|
717
|
-
.tr-fieldset-wrapper {
|
|
931
|
+
.mui-theme .form-fieldset-wrapper,
|
|
932
|
+
.mui-theme .toolbar-fieldset-wrapper,
|
|
933
|
+
.mui-theme .tr-fieldset-wrapper {
|
|
718
934
|
position: relative;
|
|
719
935
|
width: 100%;
|
|
720
936
|
}
|
|
721
937
|
|
|
722
|
-
.form-fieldset-wrapper .form-fieldset:hover {
|
|
938
|
+
.mui-theme .form-fieldset-wrapper .form-fieldset:hover {
|
|
723
939
|
border-color: var(--mui-palette-common-black);
|
|
724
940
|
}
|
|
725
941
|
|
|
726
|
-
.toolbar-fieldset-wrapper:focus-within .form-fieldset,
|
|
727
|
-
.tr-fieldset-wrapper:focus-within .form-fieldset {
|
|
942
|
+
.mui-theme .toolbar-fieldset-wrapper:focus-within .form-fieldset,
|
|
943
|
+
.mui-theme .tr-fieldset-wrapper:focus-within .form-fieldset {
|
|
728
944
|
border-color: var(--mui-palette-primary-main);
|
|
729
945
|
border-width: var(--mui-form--focus--BorderWidth);
|
|
730
946
|
padding: var(--mui-form--focus--Padding) var(--mui-form--focus--Padding);
|
|
731
947
|
}
|
|
732
948
|
|
|
733
|
-
.toolbar-fieldset-wrapper .form-fieldset,
|
|
734
|
-
.form-fieldset {
|
|
949
|
+
.mui-theme .toolbar-fieldset-wrapper .form-fieldset,
|
|
950
|
+
.mui-theme .form-fieldset {
|
|
735
951
|
text-align: left;
|
|
736
952
|
position: absolute;
|
|
737
953
|
inset: var(--mui-form-fieldset--InsetTop) 0 0;
|
|
@@ -747,7 +963,7 @@
|
|
|
747
963
|
border-radius: var(--mui-shape-borderRadius);
|
|
748
964
|
}
|
|
749
965
|
|
|
750
|
-
.toolbar-fieldset-wrapper .form-fieldset-legend {
|
|
966
|
+
.mui-theme .toolbar-fieldset-wrapper .form-fieldset-legend {
|
|
751
967
|
float: unset;
|
|
752
968
|
width: auto;
|
|
753
969
|
overflow: hidden;
|
|
@@ -759,27 +975,27 @@
|
|
|
759
975
|
max-width: 100%;
|
|
760
976
|
}
|
|
761
977
|
|
|
762
|
-
.toolbar-fieldset-wrapper .form-fieldset-legend span {
|
|
978
|
+
.mui-theme .toolbar-fieldset-wrapper .form-fieldset-legend span {
|
|
763
979
|
font-weight: var(--pf-t--global--font--weight--200);
|
|
764
980
|
}
|
|
765
981
|
|
|
766
|
-
.toolbar-fieldset-wrapper:focus-within {
|
|
982
|
+
.mui-theme .toolbar-fieldset-wrapper:focus-within {
|
|
767
983
|
color: var(--mui-palette-primary-main);
|
|
768
984
|
}
|
|
769
985
|
|
|
770
|
-
.toolbar-fieldset-wrapper:focus-within .form-fieldset-legend {
|
|
986
|
+
.mui-theme .toolbar-fieldset-wrapper:focus-within .form-fieldset-legend {
|
|
771
987
|
color: var(--mui-palette-primary-main);
|
|
772
988
|
}
|
|
773
989
|
|
|
774
|
-
.tr-fieldset-wrapper .pf-v6-c-form-control,
|
|
775
|
-
.toolbar-fieldset-wrapper .pf-v6-c-form-control,
|
|
776
|
-
.form-fieldset-wrapper .pf-v6-c-form-control {
|
|
990
|
+
.mui-theme .tr-fieldset-wrapper .pf-v6-c-form-control,
|
|
991
|
+
.mui-theme .toolbar-fieldset-wrapper .pf-v6-c-form-control,
|
|
992
|
+
.mui-theme .form-fieldset-wrapper .pf-v6-c-form-control {
|
|
777
993
|
// Hide real borders since fieldset wrappers provide their own border styling
|
|
778
994
|
border: none;
|
|
779
995
|
}
|
|
780
996
|
|
|
781
997
|
// Ensure legend spans don't get form control styling
|
|
782
|
-
.form-fieldset-legend span {
|
|
998
|
+
.mui-theme .form-fieldset-legend span {
|
|
783
999
|
border: none;
|
|
784
1000
|
padding: 0;
|
|
785
1001
|
background: transparent;
|
|
@@ -806,7 +1022,16 @@
|
|
|
806
1022
|
|
|
807
1023
|
.mui-theme .pf-v6-c-expandable-section .form-fieldset-wrapper:focus-within span.pf-v6-c-form-control.pf-m-disabled ~ .form-fieldset,
|
|
808
1024
|
.mui-theme .pf-v6-c-expandable-section .form-fieldset-wrapper:hover span.pf-v6-c-form-control.pf-m-disabled ~ .form-fieldset {
|
|
809
|
-
border-color:
|
|
1025
|
+
border-color: var(--pf-t--global--border--color--default);
|
|
1026
|
+
}
|
|
1027
|
+
|
|
1028
|
+
// Disabled menu toggle inside fieldset wrapper - use disabled border color
|
|
1029
|
+
.mui-theme .pf-v6-c-expandable-section .form-fieldset-wrapper:has(.pf-v6-c-menu-toggle.pf-m-disabled) .form-fieldset {
|
|
1030
|
+
border-color: var(--mui-palette-action-disabled);
|
|
1031
|
+
}
|
|
1032
|
+
|
|
1033
|
+
.mui-theme .pf-v6-c-expandable-section .form-fieldset-wrapper:has(.pf-v6-c-menu-toggle.pf-m-disabled):hover .form-fieldset {
|
|
1034
|
+
border-color: var(--mui-palette-action-disabled);
|
|
810
1035
|
}
|
|
811
1036
|
|
|
812
1037
|
.mui-theme .pf-v6-c-form__field-group-body {
|
|
@@ -823,7 +1048,8 @@
|
|
|
823
1048
|
border-color: var(--mui-palette-primary-main);
|
|
824
1049
|
}
|
|
825
1050
|
|
|
826
|
-
.mui-theme .pf-v6-c-form-control.pf-m-error:not(span)
|
|
1051
|
+
.mui-theme .pf-v6-c-form-control.pf-m-error:not(span),
|
|
1052
|
+
.mui-theme .pf-v6-c-number-input span.pf-v6-c-form-control.pf-m-error {
|
|
827
1053
|
border-color: var(--mui-palette-error-main);
|
|
828
1054
|
}
|
|
829
1055
|
|
|
@@ -865,7 +1091,7 @@
|
|
|
865
1091
|
|
|
866
1092
|
.mui-theme .pf-v6-c-menu {
|
|
867
1093
|
--pf-v6-c-menu--BoxShadow: var(--mui-shadows-8);
|
|
868
|
-
--pf-
|
|
1094
|
+
// BorderRadius inherited from --pf-t--global--border--radius--small (set to MUI shape-borderRadius)
|
|
869
1095
|
--pf-v6-c-menu--PaddingBlockStart: 0;
|
|
870
1096
|
--pf-v6-c-menu--PaddingBlockEnd: 0;
|
|
871
1097
|
--pf-v6-c-menu--PaddingInlineStart: 0;
|
|
@@ -905,6 +1131,7 @@
|
|
|
905
1131
|
--pf-v6-c-menu-toggle--expanded--Color: var(--mui-palette-common-black);
|
|
906
1132
|
--pf-v6-c-menu-toggle--hover--BorderColor: var(--mui-menu-toggle--hover--BorderColor);
|
|
907
1133
|
--pf-v6-c-menu-toggle--BorderColor: var(--mui-menu-toggle--BorderColor);
|
|
1134
|
+
|
|
908
1135
|
--pf-v6-c-menu-toggle--hover--BackgroundColor: var(
|
|
909
1136
|
--pf-t--global--background--color--action--plain--hover
|
|
910
1137
|
);
|
|
@@ -921,28 +1148,92 @@
|
|
|
921
1148
|
|
|
922
1149
|
}
|
|
923
1150
|
|
|
924
|
-
// Apply the menu toggle styling to all
|
|
925
|
-
.mui-theme .pf-v6-c-menu-toggle
|
|
1151
|
+
// Apply the menu toggle styling to all MenuToggles
|
|
1152
|
+
.mui-theme .pf-v6-c-menu-toggle {
|
|
926
1153
|
position: relative;
|
|
927
1154
|
box-sizing: border-box;
|
|
928
1155
|
--pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--regular);
|
|
929
1156
|
--pf-v6-c-menu-toggle--BorderStyle: solid;
|
|
930
|
-
--pf-
|
|
1157
|
+
// BorderColor inherited from --pf-t--global--border--color--default
|
|
931
1158
|
--pf-v6-c-menu-toggle--BackgroundColor: var(--mui-palette-common-white);
|
|
932
1159
|
|
|
933
|
-
&:hover {
|
|
934
|
-
--pf-
|
|
1160
|
+
&:hover:not(.pf-m-primary) {
|
|
1161
|
+
// Hover border color inherited from --pf-t--global--border--color--hover
|
|
1162
|
+
--pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-t--global--border--width--regular);
|
|
1163
|
+
background-color: transparent;
|
|
935
1164
|
}
|
|
936
1165
|
|
|
937
|
-
&:focus
|
|
938
|
-
|
|
939
|
-
|
|
1166
|
+
&:focus,
|
|
1167
|
+
&:focus-within,
|
|
1168
|
+
&:active {
|
|
1169
|
+
// Focus border color - no dedicated PF variable, using BorderColor directly
|
|
940
1170
|
--pf-v6-c-menu-toggle--BorderColor: var(--mui-palette-primary-main);
|
|
941
|
-
|
|
942
|
-
|
|
1171
|
+
}
|
|
1172
|
+
|
|
1173
|
+
// &.pf-m-expanded - Expanded border color inherited from --pf-t--global--border--color--clicked
|
|
1174
|
+
|
|
1175
|
+
// Disabled state theming - override PF component variables with MUI values
|
|
1176
|
+
&.pf-m-disabled {
|
|
1177
|
+
--pf-v6-c-menu-toggle--disabled--BackgroundColor: transparent;
|
|
1178
|
+
--pf-v6-c-menu-toggle--disabled--Color: var(--mui-palette-text-disabled);
|
|
1179
|
+
--pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--mui-palette-text-disabled);
|
|
1180
|
+
--pf-v6-c-menu-toggle--disabled__icon--Color: var(--mui-palette-text-disabled);
|
|
1181
|
+
--pf-v6-c-menu-toggle--BorderColor: var(--mui-palette-action-disabled);
|
|
1182
|
+
--pf-v6-c-menu-toggle--hover--BorderColor: var(--mui-palette-action-disabled);
|
|
1183
|
+
// No PF variable for disabled border rendering; ensuring border is visible
|
|
1184
|
+
border: var(--pf-v6-c-menu-toggle--BorderWidth) solid var(--mui-palette-action-disabled);
|
|
943
1185
|
}
|
|
944
1186
|
}
|
|
945
1187
|
|
|
1188
|
+
// Secondary variant styling - override PF secondary component variables
|
|
1189
|
+
.mui-theme .pf-v6-c-menu-toggle.pf-m-secondary {
|
|
1190
|
+
--pf-v6-c-menu-toggle--m-secondary--Color: var(--mui-palette-primary-main);
|
|
1191
|
+
--pf-v6-c-menu-toggle--m-secondary--BorderColor: var(--mui-palette-primary-main);
|
|
1192
|
+
--pf-v6-c-menu-toggle--m-secondary--BackgroundColor: transparent;
|
|
1193
|
+
// Explicit border for secondary variant
|
|
1194
|
+
border-color: var(--mui-palette-primary-main);
|
|
1195
|
+
|
|
1196
|
+
&:hover {
|
|
1197
|
+
--pf-v6-c-menu-toggle--m-secondary--hover--BorderColor: var(--mui-palette-primary-dark);
|
|
1198
|
+
--pf-v6-c-menu-toggle--m-secondary--hover--Color: var(--mui-palette-primary-dark);
|
|
1199
|
+
// No PF variable for secondary hover background; using direct CSS
|
|
1200
|
+
background-color: var(--mui-palette-action-hover);
|
|
1201
|
+
border-color: var(--mui-palette-primary-dark);
|
|
1202
|
+
}
|
|
1203
|
+
|
|
1204
|
+
// Disabled state for secondary variant (higher specificity than base disabled)
|
|
1205
|
+
&.pf-m-disabled {
|
|
1206
|
+
--pf-v6-c-menu-toggle--m-secondary--Color: var(--mui-palette-text-disabled);
|
|
1207
|
+
--pf-v6-c-menu-toggle--m-secondary--BorderColor: var(--mui-palette-action-disabled);
|
|
1208
|
+
--pf-v6-c-menu-toggle--disabled--BackgroundColor: transparent;
|
|
1209
|
+
--pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--mui-palette-text-disabled);
|
|
1210
|
+
--pf-v6-c-menu-toggle--disabled__icon--Color: var(--mui-palette-text-disabled);
|
|
1211
|
+
// No PF variable for disabled border rendering; ensuring border is visible
|
|
1212
|
+
border: var(--pf-v6-c-menu-toggle--BorderWidth) solid var(--mui-palette-action-disabled);
|
|
1213
|
+
|
|
1214
|
+
&:hover {
|
|
1215
|
+
--pf-v6-c-menu-toggle--m-secondary--hover--BorderColor: var(--mui-palette-action-disabled);
|
|
1216
|
+
--pf-v6-c-menu-toggle--hover--BorderColor: var(--mui-palette-action-disabled);
|
|
1217
|
+
// No PF variable for disabled hover background; using direct CSS
|
|
1218
|
+
background-color: transparent;
|
|
1219
|
+
}
|
|
1220
|
+
}
|
|
1221
|
+
}
|
|
1222
|
+
|
|
1223
|
+
// Disabled menu toggle inside fieldset wrapper - border handled by fieldset, not toggle
|
|
1224
|
+
.mui-theme .form-fieldset-wrapper .pf-v6-c-menu-toggle.pf-m-disabled,
|
|
1225
|
+
.mui-theme .pf-v6-c-form .form-fieldset-wrapper .pf-v6-c-menu-toggle.pf-m-disabled,
|
|
1226
|
+
.mui-theme [class*="pf-v6-l-"] .form-fieldset-wrapper .pf-v6-c-menu-toggle.pf-m-disabled,
|
|
1227
|
+
.mui-theme .pf-v6-c-expandable-section .form-fieldset-wrapper .pf-v6-c-menu-toggle.pf-m-disabled {
|
|
1228
|
+
border: none;
|
|
1229
|
+
}
|
|
1230
|
+
|
|
1231
|
+
// Split button variant should not get the general border styling
|
|
1232
|
+
.mui-theme .pf-v6-c-menu-toggle.pf-m-split-button {
|
|
1233
|
+
border: none;
|
|
1234
|
+
box-shadow: none;
|
|
1235
|
+
}
|
|
1236
|
+
|
|
946
1237
|
.mui-theme .pf-v6-c-menu-toggle.pf-m-plain {
|
|
947
1238
|
// --pf-v6-c-menu-toggle--BorderRadius: 50%;
|
|
948
1239
|
// Ensure plain variant doesn't get the border styling
|
|
@@ -1153,14 +1444,13 @@ left: 0;
|
|
|
1153
1444
|
overflow-y: auto;
|
|
1154
1445
|
}
|
|
1155
1446
|
|
|
1156
|
-
.mui-theme .pf-v6-c-progress-stepper__step.pf-m-info {
|
|
1157
|
-
--pf-v6-c-progress-stepper__step-icon--Color: var(--mui-palette-primary-main);
|
|
1158
|
-
}
|
|
1159
|
-
|
|
1160
1447
|
.mui-theme .pf-v6-c-progress-stepper__step.pf-m-success {
|
|
1161
1448
|
--pf-v6-c-progress-stepper__step-icon--Color: var(--mui-palette-success-main);
|
|
1162
1449
|
}
|
|
1163
1450
|
|
|
1451
|
+
// Note: .pf-m-info progress stepper inherits its color from --pf-t--global--color--brand--default
|
|
1452
|
+
// which we've set to MUI primary in the translation layer, so no override needed
|
|
1453
|
+
|
|
1164
1454
|
.mui-theme .pf-v6-c-radio.pf-m-standalone:not(.workspace-kind-form-radio) .pf-v6-c-radio__input {
|
|
1165
1455
|
display: none;
|
|
1166
1456
|
}
|
|
@@ -1182,13 +1472,17 @@ left: 0;
|
|
|
1182
1472
|
}
|
|
1183
1473
|
|
|
1184
1474
|
.mui-theme .pf-v6-c-table {
|
|
1185
|
-
|
|
1186
|
-
--pf-v6-c-
|
|
1475
|
+
// Colors now inherited from global tokens:
|
|
1476
|
+
// --pf-v6-c-table--cell--Color uses --pf-t--global--text--color--regular (set to MUI text-primary)
|
|
1477
|
+
// --pf-v6-c-table__sort-indicator--Color uses --pf-t--global--icon--color--subtle (set to MUI text-secondary)
|
|
1478
|
+
|
|
1479
|
+
// Intentional overrides for MUI-specific styling:
|
|
1480
|
+
--pf-v6-c-table__sort--m-selected__button--Color: var(--mui-palette-text-primary); // MUI uses black, not brand color
|
|
1187
1481
|
--pf-v6-c-table__sort__button--hover__sort-indicator--Color: var(--mui-palette-text-secondary);
|
|
1188
1482
|
--pf-v6-c-table__sort__button--hover__text--Color: var(--mui-palette-text-secondary);
|
|
1189
|
-
|
|
1483
|
+
|
|
1484
|
+
// Padding/spacing overrides (component-specific values not in global tokens)
|
|
1190
1485
|
--pf-v6-c-table__button--hover--BackgroundColor: var(--mui-table__button--BackgroundColor);
|
|
1191
|
-
--pf-v6-c-table__button--Color: var(--pf-v6-c-table--cell--Color);
|
|
1192
1486
|
--pf-v6-c-table__button--PaddingBlockStart: var(--mui-table__button--PaddingBlockStart);
|
|
1193
1487
|
--pf-v6-c-table__button--PaddingBlockEnd: var(--mui-table__button--PaddingBlockEnd);
|
|
1194
1488
|
--pf-v6-c-table__button--PaddingInlineStart: var(--mui-table__button--PaddingInlineStart);
|
|
@@ -1225,8 +1519,124 @@ left: 0;
|
|
|
1225
1519
|
}
|
|
1226
1520
|
|
|
1227
1521
|
/* CSS workaround for spacing in labels in Workspace Kind */
|
|
1228
|
-
|
|
1229
|
-
|
|
1522
|
+
/* Special handling for form fields in table cells - remove extra top spacing */
|
|
1523
|
+
/* Layout properties (vertical-align, display, overflow) - no PF variables exist */
|
|
1524
|
+
.mui-theme .form-label-field-group .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td) {
|
|
1525
|
+
/* Layout property - no PF variable exists */
|
|
1526
|
+
vertical-align: middle;
|
|
1527
|
+
/* Balance padding - use PF component variable for consistency */
|
|
1528
|
+
--pf-v6-c-table--cell--PaddingBlockStart: 0px;
|
|
1529
|
+
}
|
|
1530
|
+
|
|
1531
|
+
/* Remove spacing to align form elements at top of table cells */
|
|
1532
|
+
/* Margin/padding: No PF variables exist for zero values - using direct CSS */
|
|
1533
|
+
.mui-theme .form-label-field-group .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td) .pf-v6-c-form__group {
|
|
1534
|
+
/* No PF variables for zero margin/padding - layout constraint */
|
|
1535
|
+
margin: 0;
|
|
1536
|
+
padding: 0;
|
|
1537
|
+
/* Layout properties - no PF variables exist */
|
|
1538
|
+
height: auto;
|
|
1539
|
+
min-height: 0;
|
|
1540
|
+
align-self: flex-start;
|
|
1541
|
+
}
|
|
1542
|
+
|
|
1543
|
+
.mui-theme .form-label-field-group .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td) .pf-v6-c-form__group-control {
|
|
1544
|
+
/* No PF variables for zero margin/padding - layout constraint */
|
|
1545
|
+
margin: 0;
|
|
1546
|
+
padding: 0;
|
|
1547
|
+
/* Layout property - no PF variable exists */
|
|
1548
|
+
display: block;
|
|
1549
|
+
/* Layout property - no PF variable exists */
|
|
1550
|
+
height: auto;
|
|
1551
|
+
}
|
|
1552
|
+
|
|
1553
|
+
.mui-theme .form-label-field-group .pf-v6-c-table .form-fieldset-wrapper {
|
|
1554
|
+
/* No PF variables for zero margin/padding - layout constraint */
|
|
1555
|
+
margin: 0;
|
|
1556
|
+
padding: 0;
|
|
1557
|
+
/* Layout properties - no PF variables exist */
|
|
1558
|
+
display: inline-block;
|
|
1559
|
+
width: 100%;
|
|
1560
|
+
vertical-align: top;
|
|
1561
|
+
line-height: 0;
|
|
1562
|
+
height: auto;
|
|
1563
|
+
min-height: 0;
|
|
1564
|
+
/* Layout property - no PF variable exists */
|
|
1565
|
+
overflow: visible;
|
|
1566
|
+
}
|
|
1567
|
+
|
|
1568
|
+
.mui-theme .form-label-field-group .pf-v6-c-table .form-fieldset-wrapper .pf-v6-c-form-control {
|
|
1569
|
+
/* No PF variables for zero margin/padding - layout constraint */
|
|
1570
|
+
margin: 0;
|
|
1571
|
+
padding: 0;
|
|
1572
|
+
/* Layout properties - no PF variables exist */
|
|
1573
|
+
display: block;
|
|
1574
|
+
line-height: normal;
|
|
1575
|
+
overflow: visible;
|
|
1576
|
+
text-overflow: clip;
|
|
1577
|
+
white-space: normal;
|
|
1578
|
+
width: 100%;
|
|
1579
|
+
min-width: 0;
|
|
1580
|
+
}
|
|
1581
|
+
|
|
1582
|
+
/* Ensure input elements inside table cells can display full text */
|
|
1583
|
+
/* Layout/text properties - no PF variables exist */
|
|
1584
|
+
.mui-theme .form-label-field-group .pf-v6-c-table .form-fieldset-wrapper input {
|
|
1585
|
+
overflow: visible;
|
|
1586
|
+
text-overflow: clip;
|
|
1587
|
+
white-space: normal;
|
|
1588
|
+
width: 100%;
|
|
1589
|
+
}
|
|
1590
|
+
|
|
1591
|
+
.mui-theme .form-label-field-group .pf-v6-c-table .form-fieldset-wrapper .form-fieldset {
|
|
1592
|
+
/* Position properties - using PF border width variable */
|
|
1593
|
+
top: var(--pf-t--global--border--width--regular);
|
|
1594
|
+
/* Layout properties - no PF variables exist */
|
|
1595
|
+
left: 0;
|
|
1596
|
+
right: 0;
|
|
1597
|
+
bottom: 0;
|
|
1598
|
+
overflow: visible;
|
|
1599
|
+
}
|
|
1600
|
+
|
|
1601
|
+
/* Remove bottom border from table rows/cells when pf-m-no-border-bottom class is applied */
|
|
1602
|
+
/* Border property - using PF border width variable for consistency */
|
|
1603
|
+
.mui-theme .pf-v6-c-table .pf-m-no-border-bottom {
|
|
1604
|
+
border-block-end: none;
|
|
1605
|
+
}
|
|
1606
|
+
|
|
1607
|
+
/* Remove bottom padding from first th in thead when table is inside a form */
|
|
1608
|
+
/* Padding property - no PF variable exists for zero padding */
|
|
1609
|
+
.mui-theme .pf-v6-c-form .pf-v6-c-table thead tr:first-child th {
|
|
1610
|
+
padding-bottom: 0px;
|
|
1611
|
+
}
|
|
1612
|
+
|
|
1613
|
+
/* Add top border and remove bottom border for table rows when pf-m-border-top-only class is applied */
|
|
1614
|
+
/* Border properties - using PF border width and color variables for consistency */
|
|
1615
|
+
.mui-theme .pf-v6-c-table .pf-m-border-top-only {
|
|
1616
|
+
border-block-start: var(--pf-v6-c-table__tr--BorderBlockEndWidth) solid var(--pf-v6-c-table__tr--BorderBlockEndColor);
|
|
1617
|
+
border-block-end: none;
|
|
1618
|
+
}
|
|
1619
|
+
|
|
1620
|
+
/* Fix text truncation in grid layouts - same issue as tables */
|
|
1621
|
+
/* Layout/text properties - no PF variables exist */
|
|
1622
|
+
.mui-theme [class*="pf-v6-l-grid"] .form-fieldset-wrapper .pf-v6-c-form-control {
|
|
1623
|
+
overflow: visible;
|
|
1624
|
+
text-overflow: clip;
|
|
1625
|
+
white-space: normal;
|
|
1626
|
+
width: 100%;
|
|
1627
|
+
min-width: 0;
|
|
1628
|
+
}
|
|
1629
|
+
|
|
1630
|
+
.mui-theme [class*="pf-v6-l-grid"] .form-fieldset-wrapper input {
|
|
1631
|
+
overflow: visible;
|
|
1632
|
+
text-overflow: clip;
|
|
1633
|
+
white-space: normal;
|
|
1634
|
+
width: 100%;
|
|
1635
|
+
}
|
|
1636
|
+
|
|
1637
|
+
.mui-theme [class*="pf-v6-l-grid"] .form-fieldset-wrapper .form-fieldset {
|
|
1638
|
+
/* Layout property - no PF variable exists */
|
|
1639
|
+
overflow: visible;
|
|
1230
1640
|
}
|
|
1231
1641
|
|
|
1232
1642
|
/* CSS workaround to use MUI icon for sort icon */
|
|
@@ -1280,7 +1690,7 @@ left: 0;
|
|
|
1280
1690
|
--pf-v6-c-tabs__link--PaddingBlockEnd: var(--mui-tabs__link--PaddingBlockEnd);
|
|
1281
1691
|
--pf-v6-c-tabs__link--PaddingInlineStart: var(--mui-tabs__link--PaddingInlineStart);
|
|
1282
1692
|
--pf-v6-c-tabs__link--PaddingInlineEnd: var(--mui-tabs__link--PaddingInlineEnd);
|
|
1283
|
-
--pf-v6-c-tabs__item--m-current__link--Color: var(--
|
|
1693
|
+
--pf-v6-c-tabs__item--m-current__link--Color: var(--mui-tabs__item--m-current__link--Color);
|
|
1284
1694
|
--pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(
|
|
1285
1695
|
--mui-tabs__item--m-current__link--after--BorderWidth
|
|
1286
1696
|
);
|
|
@@ -1310,10 +1720,6 @@ left: 0;
|
|
|
1310
1720
|
--pf-v6-c-button--PaddingInlineEnd: 6px;
|
|
1311
1721
|
}
|
|
1312
1722
|
|
|
1313
|
-
.mui-theme .pf-v6-c-toolbar__item.kubeflow-u-namespace-select>.pf-v6-c-menu-toggle.pf-m-disabled {
|
|
1314
|
-
border: none;
|
|
1315
|
-
}
|
|
1316
|
-
|
|
1317
1723
|
.mui-theme .pf-v6-c-label {
|
|
1318
1724
|
--pf-v6-c-label--BorderRadius: 16px;
|
|
1319
1725
|
--pf-v6-c-label--FontSize: 0.8125rem;
|
|
@@ -1346,14 +1752,10 @@ left: 0;
|
|
|
1346
1752
|
|
|
1347
1753
|
.mui-theme .pf-v6-c-label-group.pf-m-category {
|
|
1348
1754
|
--pf-v6-c-label-group--m-category--BorderWidth: 0px;
|
|
1349
|
-
--pf-
|
|
1755
|
+
// Border radius inherited from --pf-t--global--border--radius--small (set to MUI shape-borderRadius)
|
|
1350
1756
|
box-shadow: var(--mui-shadows-1);
|
|
1351
1757
|
}
|
|
1352
1758
|
|
|
1353
|
-
.mui-theme .pf-v6-c-toolbar__item.kubeflow-u-namespace-select > .pf-v6-c-menu-toggle.pf-m-disabled {
|
|
1354
|
-
border: none;
|
|
1355
|
-
}
|
|
1356
|
-
|
|
1357
1759
|
.mui-theme .pf-v6-c-label.pf-m-outline {
|
|
1358
1760
|
--pf-v6-c-label--BorderColor: none;
|
|
1359
1761
|
--pf-v6-c-label--BackgroundColor: var(--mui-palette-grey-200);
|
|
@@ -1365,8 +1767,14 @@ left: 0;
|
|
|
1365
1767
|
min-height: var(--kf-central-app-bar-height);
|
|
1366
1768
|
}
|
|
1367
1769
|
|
|
1770
|
+
// Switch component - use pill-shaped border radius for the capsule appearance
|
|
1771
|
+
.mui-theme .pf-v6-c-switch {
|
|
1772
|
+
--pf-v6-c-switch__toggle--BorderRadius: var(--mui-switch--BorderRadius);
|
|
1773
|
+
--pf-v6-c-switch__toggle--before--BorderRadius: var(--mui-switch--BorderRadius);
|
|
1774
|
+
}
|
|
1775
|
+
|
|
1368
1776
|
.mui-theme .pf-v6-c-modal-box {
|
|
1369
|
-
--pf-
|
|
1777
|
+
// BorderRadius inherited from --pf-t--global--border--radius--large (set to MUI shape-borderRadius)
|
|
1370
1778
|
--pf-v6-c-modal-box--BoxShadow: var(--mui-shadows-24);
|
|
1371
1779
|
}
|
|
1372
1780
|
|
|
@@ -1389,7 +1797,6 @@ left: 0;
|
|
|
1389
1797
|
.mui-theme .pf-v6-c-page__main {
|
|
1390
1798
|
--pf-v6-c-page__main--PaddingRight: 0;
|
|
1391
1799
|
overflow-y: auto; // Allow main content to scroll instead of outer container
|
|
1392
|
-
margin-right: 2px;
|
|
1393
1800
|
height: calc(100vh - var(--kf-central-app-bar-height));
|
|
1394
1801
|
min-height: calc(100vh - var(--kf-central-app-bar-height));
|
|
1395
1802
|
display: flex;
|
|
@@ -1407,7 +1814,7 @@ left: 0;
|
|
|
1407
1814
|
}
|
|
1408
1815
|
|
|
1409
1816
|
.mui-theme .pf-v6-c-page__main-body {
|
|
1410
|
-
margin-left: var(--
|
|
1817
|
+
margin-left: var(--pf-t--global--spacer--xs);
|
|
1411
1818
|
flex-grow: 1;
|
|
1412
1819
|
display: flex;
|
|
1413
1820
|
flex-direction: column;
|
|
@@ -1418,7 +1825,7 @@ left: 0;
|
|
|
1418
1825
|
flex-grow: 1;
|
|
1419
1826
|
display: flex;
|
|
1420
1827
|
flex-direction: column;
|
|
1421
|
-
margin-right:
|
|
1828
|
+
margin-right: 0px;
|
|
1422
1829
|
}
|
|
1423
1830
|
|
|
1424
1831
|
.mui-theme .pf-v6-c-page__main-group.pf-m-sticky-top {
|
|
@@ -1426,7 +1833,7 @@ left: 0;
|
|
|
1426
1833
|
}
|
|
1427
1834
|
|
|
1428
1835
|
// TODO: Remove when https://github.com/patternfly/patternfly-react/issues/11826 is resolved.
|
|
1429
|
-
.pf-v6-c-page__main-section .pf-v6-c-page__main-body {
|
|
1836
|
+
.mui-theme .pf-v6-c-page__main-section .pf-v6-c-page__main-body {
|
|
1430
1837
|
height: 100%;
|
|
1431
1838
|
--pf-v6-c-page__main-section--PaddingInlineStart: 0px;
|
|
1432
1839
|
}
|
|
@@ -1541,13 +1948,13 @@ left: 0;
|
|
|
1541
1948
|
position: relative;
|
|
1542
1949
|
--pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--regular);
|
|
1543
1950
|
--pf-v6-c-menu-toggle--BorderStyle: solid;
|
|
1544
|
-
--pf-
|
|
1545
|
-
--pf-
|
|
1951
|
+
// BorderColor inherited from --pf-t--global--border--color--default
|
|
1952
|
+
// BorderRadius inherited from --pf-t--global--border--radius--small
|
|
1546
1953
|
--pf-v6-c-menu-toggle--BackgroundColor: var(--mui-palette-common-white);
|
|
1547
1954
|
height: 54px;
|
|
1548
1955
|
|
|
1549
1956
|
&:hover {
|
|
1550
|
-
--pf-
|
|
1957
|
+
// Hover border color inherited from --pf-t--global--border--color--hover
|
|
1551
1958
|
--pf-v6-c-menu-toggle--hover--BackgroundColor: var(--mui-palette-common-white);
|
|
1552
1959
|
}
|
|
1553
1960
|
|
|
@@ -1563,14 +1970,6 @@ left: 0;
|
|
|
1563
1970
|
}
|
|
1564
1971
|
}
|
|
1565
1972
|
|
|
1566
|
-
.mui-theme .workspacekind-file-upload {
|
|
1567
|
-
height: 100%;
|
|
1568
|
-
|
|
1569
|
-
.pf-v6-c-file-upload__file-details {
|
|
1570
|
-
flex-grow: 1;
|
|
1571
|
-
}
|
|
1572
|
-
}
|
|
1573
|
-
|
|
1574
1973
|
.mui-theme .pf-v6-c-toolbar__item.toolbar-fieldset-wrapper,
|
|
1575
1974
|
.mui-theme .toolbar-fieldset-wrapper {
|
|
1576
1975
|
position: relative;
|
|
@@ -1607,6 +2006,21 @@ left: 0;
|
|
|
1607
2006
|
--pf-v6-c-menu-toggle--PaddingInlineEnd: 12px;
|
|
1608
2007
|
}
|
|
1609
2008
|
|
|
2009
|
+
// Filter group menu-toggles - add border styling
|
|
2010
|
+
.mui-theme .pf-v6-c-toolbar__group.pf-m-filter-group .pf-v6-c-menu-toggle {
|
|
2011
|
+
// Use inset box-shadow for border effect to avoid layout shift
|
|
2012
|
+
box-shadow: inset 0 0 0 1px var(--mui-palette-grey-400);
|
|
2013
|
+
border-radius: var(--mui-shape-borderRadius);
|
|
2014
|
+
|
|
2015
|
+
&:hover {
|
|
2016
|
+
box-shadow: inset 0 0 0 1px var(--mui-palette-common-black);
|
|
2017
|
+
}
|
|
2018
|
+
|
|
2019
|
+
&.pf-m-expanded {
|
|
2020
|
+
box-shadow: none;
|
|
2021
|
+
}
|
|
2022
|
+
}
|
|
2023
|
+
|
|
1610
2024
|
/* Only apply fixed width to filter dropdown in toolbar filter group */
|
|
1611
2025
|
.mui-theme .pf-v6-c-toolbar__group.pf-m-filter-group .pf-v6-c-menu-toggle:not(.pf-m-split-button):not(.pf-m-plain) {
|
|
1612
2026
|
--pf-v6-c-menu-toggle--MinWidth: 140px;
|
|
@@ -1625,20 +2039,16 @@ left: 0;
|
|
|
1625
2039
|
--pf-v6-c-content--list--PaddingInlineStart: 0;
|
|
1626
2040
|
}
|
|
1627
2041
|
|
|
1628
|
-
|
|
1629
|
-
|
|
2042
|
+
// File upload textarea border styling (MUI-specific)
|
|
2043
|
+
.mui-theme .pf-v6-c-file-upload__file-details .pf-v6-c-form-control.pf-m-textarea {
|
|
2044
|
+
border: var(--mui-form-control--BorderWidth) solid var(--mui-form-control--BorderColor);
|
|
2045
|
+
border-radius: var(--mui-shape-borderRadius);
|
|
1630
2046
|
|
|
1631
|
-
|
|
1632
|
-
|
|
2047
|
+
&:hover {
|
|
2048
|
+
border-color: var(--mui-palette-common-black);
|
|
1633
2049
|
}
|
|
1634
2050
|
}
|
|
1635
2051
|
|
|
1636
|
-
.mui-theme .pf-v6-c-file-upload {
|
|
1637
|
-
height: 100%;
|
|
1638
|
-
display: flex;
|
|
1639
|
-
flex-direction: column;
|
|
1640
|
-
}
|
|
1641
|
-
|
|
1642
2052
|
|
|
1643
2053
|
/* Workaround for Toggle group header in Workspace Kind Form */
|
|
1644
2054
|
.mui-theme .workspace-kind-form-header .pf-v6-c-toggle-group__button.pf-m-selected {
|
|
@@ -1646,16 +2056,6 @@ left: 0;
|
|
|
1646
2056
|
color: var(--pf-t--color--black);
|
|
1647
2057
|
}
|
|
1648
2058
|
|
|
1649
|
-
|
|
1650
|
-
.mui-theme button.pf-v6-c-menu-toggle {
|
|
1651
|
-
// Use box-shadow to create a border effect without affecting the layout
|
|
1652
|
-
&.pf-m-expanded,
|
|
1653
|
-
&:focus {
|
|
1654
|
-
box-shadow: 0 0 0 2px var(--mui-palette-primary-main);
|
|
1655
|
-
outline: none; // Remove default browser outline
|
|
1656
|
-
}
|
|
1657
|
-
}
|
|
1658
|
-
|
|
1659
2059
|
// Grid view: Position action cell (Actions kebab) on the right
|
|
1660
2060
|
// The Connect button is a regular cell and will appear with other row content on the left
|
|
1661
2061
|
.mui-theme .pf-v6-c-table.pf-m-grid .pf-v6-c-table__tbody .pf-v6-c-table__tr {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mod-arch-kubeflow",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.6.0",
|
|
4
4
|
"description": "Kubeflow-specific theme and UI components for modular architecture micro-frontend projects",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -53,10 +53,9 @@
|
|
|
53
53
|
"access": "public"
|
|
54
54
|
},
|
|
55
55
|
"peerDependencies": {
|
|
56
|
-
"@mui/material": "^7.
|
|
56
|
+
"@mui/material": "^7.3.4",
|
|
57
57
|
"react": ">=18.2.0",
|
|
58
|
-
"react-dom": ">=18.2.0"
|
|
59
|
-
"@mui/material": "^7.3.4"
|
|
58
|
+
"react-dom": ">=18.2.0"
|
|
60
59
|
},
|
|
61
60
|
"devDependencies": {
|
|
62
61
|
"@mui/material": "^7.3.4",
|