1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
|
.pf-v6-c-form {
--pf-v6-c-form--GridGap: var(--pf-t--global--spacer--gap--group-to-group--vertical--default);
--pf-v6-c-form__group--Gap: var(--pf-t--global--spacer--gap--group--vertical);
--pf-v6-c-form__group--m-action--MarginBlockStart: var(--pf-t--global--spacer--xl);
--pf-v6-c-form--m-horizontal__group-label--md--GridColumnWidth: 9.375rem;
--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap: var(--pf-t--global--spacer--gap--group--horizontal);
--pf-v6-c-form--m-horizontal__group-control--md--GridColumnWidth: 1fr;
--pf-v6-c-form--m-limit-width--MaxWidth: 55rem;
--pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: calc((((((var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body)) + (2 * var(--pf-t--global--border--width--control--default))) - var(--pf-t--global--font--size--body--default)) / 2) + var(--pf-t--global--font--size--body--default)) - ((((var(--pf-t--global--font--size--body--sm) * var(--pf-t--global--font--line-height--body)) - var(--pf-t--global--font--size--body--sm)) / 2) + var(--pf-t--global--font--size--body--sm)) + var(--pf-t--global--border--width--control--default));
--pf-v6-c-form__group-label--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart: 0;
--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY: calc(((((var(--pf-t--global--font--size--body--sm) * var(--pf-t--global--font--line-height--body)) - var(--pf-t--global--font--size--body--sm)) / 2) + var(--pf-t--global--font--size--body--sm)) - ((((var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body)) - var(--pf-t--global--font--size--body--default)) / 2) + var(--pf-t--global--font--size--body--default)));
--pf-v6-c-form__label--FontSize: var(--pf-t--global--font--size--body--default);
--pf-v6-c-form__label--LineHeight: var(--pf-t--global--font--line-height--body);
--pf-v6-c-form__label--m-disabled--Color: var(--pf-t--global--text--color--disabled);
--pf-v6-c-form__label--hover--Cursor: pointer;
--pf-v6-c-form__label--m-disabled--hover--Cursor: not-allowed;
--pf-v6-c-form__label-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
--pf-v6-c-form__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
--pf-v6-c-form__label-required--FontSize: var(--pf-t--global--font--size--body--default);
--pf-v6-c-form__label-required--Color: var(--pf-t--global--color--status--danger--default);
--pf-v6-c-form__group-label-help--FontSize: var(--pf-t--global--font--size--body--default);
--pf-v6-c-form__group-label--m-info--Gap: var(--pf-t--global--spacer--gap--horizontal);
--pf-v6-c-form__group-label-info--FontSize: var(--pf-t--global--font--size--body--sm);
--pf-v6-c-form--m-horizontal__group-label--m-info--Gap: var(--pf-t--global--spacer--gap--group--vertical);
--pf-v6-c-form__group-control--m-inline--Gap: var(--pf-t--global--spacer--gap--group--horizontal);
--pf-v6-c-form__group-control__helper-text--MarginBlockEnd: var(--pf-t--global--spacer--xs);
--pf-v6-c-form__group-control--m-stack--Gap: var(--pf-t--global--spacer--gap--group--vertical);
--pf-v6-c-form__group-control--m-stack__helper-text--MarginBlockStart: calc(var(--pf-v6-c-form__group-control--m-stack--Gap) * -1 + var(--pf-v6-c-form__helper-text--MarginBlockStart--base));
--pf-v6-c-form__actions--child--MarginBlockStart: var(--pf-t--global--spacer--sm);
--pf-v6-c-form__actions--child--MarginInlineEnd: var(--pf-t--global--spacer--sm);
--pf-v6-c-form__actions--child--MarginBlockEnd: var(--pf-t--global--spacer--sm);
--pf-v6-c-form__actions--child--MarginInlineStart: var(--pf-t--global--spacer--sm);
--pf-v6-c-form__actions--MarginBlockStart: calc(var(--pf-v6-c-form__actions--child--MarginBlockStart) * -1);
--pf-v6-c-form__actions--MarginInlineEnd: calc(var(--pf-v6-c-form__actions--child--MarginInlineEnd) * -1);
--pf-v6-c-form__actions--MarginBlockEnd: calc(var(--pf-v6-c-form__actions--child--MarginBlockEnd) * -1);
--pf-v6-c-form__actions--MarginInlineStart: calc(var(--pf-v6-c-form__actions--child--MarginInlineStart) * -1);
--pf-v6-c-form__helper-text--MarginBlockStart--base: var(--pf-t--global--spacer--xs);
--pf-v6-c-form__helper-text--MarginBlockStart: var(--pf-v6-c-form__helper-text--MarginBlockStart--base);
--pf-v6-c-form__section--MarginBlockStart: var(--pf-t--global--spacer--xl);
--pf-v6-c-form__section--Gap: var(--pf-v6-c-form--GridGap);
--pf-v6-c-form__section-title--FontSize: var(--pf-t--global--font--size--heading--xs);
--pf-v6-c-form__section-title--FontWeight: var(--pf-t--global--font--weight--heading--default);
--pf-v6-c-form__section-title--MarginBlockEnd: calc(var(--pf-t--global--spacer--sm) * -1);
--pf-v6-c-form__field-group--border-width-base: var(--pf-t--global--border--width--divider--default);
--pf-v6-c-form__field-group--BorderBlockStartWidth: var(--pf-v6-c-form__field-group--border-width-base);
--pf-v6-c-form__field-group--BorderBlockStartColor: var(--pf-t--global--border--color--default);
--pf-v6-c-form__field-group--BorderBlockEndWidth: var(--pf-v6-c-form__field-group--border-width-base);
--pf-v6-c-form__field-group--BorderBlockEndColor: var(--pf-t--global--border--color--default);
--pf-v6-c-form__field-group--field-group--MarginBlockStart: calc(var(--pf-v6-c-form--GridGap) * -1);
--pf-v6-c-form__field-group--GridTemplateColumns--toggle: calc(var(--pf-t--global--spacer--md) * 2 + var(--pf-v6-c-form__field-group-toggle-icon--MinWidth) + var(--pf-t--global--spacer--xs));
--pf-v6-c-form__field-group-toggle--PaddingBlockStart: var(--pf-v6-c-form__field-group-header--PaddingBlockStart);
--pf-v6-c-form__field-group-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
--pf-v6-c-form__field-group__field-group__field-group-toggle--PaddingBlockStart: var(--pf-t--global--spacer--lg);
--pf-v6-c-form__field-group-header-toggle--BorderWidth--base: var(--pf-t--global--border--width--divider--default);
--pf-v6-c-form__field-group__field-group--field-group__field-group-toggle--after--BorderBlockStartWidth: var(--pf-v6-c-form__field-group-header-toggle--BorderWidth--base);
--pf-v6-c-form__field-group-toggle-button--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
--pf-v6-c-form__field-group-toggle-button--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
--pf-v6-c-form__field-group-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
--pf-v6-c-form__field-group-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
--pf-v6-c-form__field-group-toggle-icon--MinWidth: var(--pf-t--global--font--size--body--default);
--pf-v6-c-form__field-group-toggle-icon--Rotate: 0;
--pf-v6-c-form__field-group--m-expanded__toggle-icon--Rotate: 90deg;
--pf-v6-c-form__field-group-header--PaddingBlockStart: var(--pf-t--global--spacer--md);
--pf-v6-c-form__field-group-header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
--pf-v6-c-form__field-group-header--GridColumn: 1 / 3;
--pf-v6-c-form__field-group__field-group__field-group-header--PaddingBlockStart: var(--pf-t--global--spacer--lg);
--pf-v6-c-form__field-group__field-group__field-group-header--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
--pf-v6-c-form__field-group-toggle--field-group-header--GridColumn: 2 / 3;
--pf-v6-c-form__field-group__field-group--field-group__field-group-header--after--BorderBlockStartWidth: var(--pf-v6-c-form__field-group-header-toggle--BorderWidth--base);
--pf-v6-c-form__field-group-header-description--MarginBlockStart: var(--pf-t--global--spacer--xs);
--pf-v6-c-form__field-group-header-description--Color: var(--pf-t--global--text--color--subtle);
--pf-v6-c-form__field-group-header-actions--MarginInlineStart: var(--pf-t--global--spacer--sm);
--pf-v6-c-form__field-group-header-actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
--pf-v6-c-form__field-group-header-actions--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
--pf-v6-c-form__field-group-body--PaddingBlockStart: var(--pf-t--global--spacer--lg);
--pf-v6-c-form__field-group-body--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
--pf-v6-c-form__field-group-body--Gap: var(--pf-v6-c-form--GridGap);
--pf-v6-c-form__field-group-body--GridColumn: 2 / 3;
--pf-v6-c-form__field-group__field-group__field-group-body--GridColumn: 1 / 3;
--pf-v6-c-form__field-group__field-group__field-group-toggle--field-group-body--GridColumn: 2 / 3;
--pf-v6-c-form__field-group-body__field-group--last-child--MarginBlockEnd: calc(var(--pf-v6-c-form__field-group-body--PaddingBlockEnd) * -1);
--pf-v6-c-form__field-group-body--TranslateY: 0;
--pf-v6-c-form__field-group--m-expanded__field-group-body--TranslateY: 0;
--pf-v6-c-form__field-group-body--TransitionDuration--expand--slide: 0s;
--pf-v6-c-form__field-group-body--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
--pf-v6-c-form__field-group-body--TransitionDuration--collapse--slide: 0s;
--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
}
@media screen and (prefers-reduced-motion: no-preference) {
.pf-v6-c-form {
--pf-v6-c-form__field-group-body--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
--pf-v6-c-form__field-group-body--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
--pf-v6-c-form__field-group-body--TranslateY: -.5rem;
}
}
.pf-v6-c-form {
display: grid;
gap: var(--pf-v6-c-form--GridGap);
}
.pf-v6-c-form.pf-m-horizontal.pf-m-align-right .pf-v6-c-form__label {
text-align: end;
}
@media screen and (min-width: 48rem) {
.pf-v6-c-form.pf-m-horizontal {
--pf-v6-c-form__group-label--PaddingBlockEnd: 0;
}
.pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group {
display: grid;
grid-template-columns: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-v6-c-form--m-horizontal__group-control--md--GridColumnWidth);
grid-column-gap: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap);
}
.pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-label {
padding-block-start: var(--pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart);
}
.pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-label.pf-m-no-padding-top {
--pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
}
.pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-label.pf-m-info {
--pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
flex-direction: column;
align-items: flex-start;
}
.pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-label-main {
flex-grow: 0;
}
.pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-control {
grid-column: 2;
}
}
@media screen and (min-width: 0) {
.pf-v6-c-form.pf-m-horizontal-on-xs {
--pf-v6-c-form__group-label--PaddingBlockEnd: 0;
}
.pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group {
display: grid;
grid-template-columns: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-v6-c-form--m-horizontal__group-control--md--GridColumnWidth);
grid-column-gap: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap);
}
.pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group-label {
padding-block-start: var(--pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart);
}
.pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group-label.pf-m-no-padding-top {
--pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
}
.pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group-label.pf-m-info {
--pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
flex-direction: column;
align-items: flex-start;
}
.pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group-label-main {
flex-grow: 0;
}
.pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group-control {
grid-column: 2;
}
}
@media (min-width: 36rem) {
.pf-v6-c-form.pf-m-horizontal-on-sm {
--pf-v6-c-form__group-label--PaddingBlockEnd: 0;
}
.pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group {
display: grid;
grid-template-columns: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-v6-c-form--m-horizontal__group-control--md--GridColumnWidth);
grid-column-gap: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap);
}
.pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group-label {
padding-block-start: var(--pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart);
}
.pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group-label.pf-m-no-padding-top {
--pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
}
.pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group-label.pf-m-info {
--pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
flex-direction: column;
align-items: flex-start;
}
.pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group-label-main {
flex-grow: 0;
}
.pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group-control {
grid-column: 2;
}
}
@media (min-width: 48rem) {
.pf-v6-c-form.pf-m-horizontal-on-md {
--pf-v6-c-form__group-label--PaddingBlockEnd: 0;
}
.pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group {
display: grid;
grid-template-columns: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-v6-c-form--m-horizontal__group-control--md--GridColumnWidth);
grid-column-gap: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap);
}
.pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group-label {
padding-block-start: var(--pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart);
}
.pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group-label.pf-m-no-padding-top {
--pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
}
.pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group-label.pf-m-info {
--pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
flex-direction: column;
align-items: flex-start;
}
.pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group-label-main {
flex-grow: 0;
}
.pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group-control {
grid-column: 2;
}
}
@media (min-width: 62rem) {
.pf-v6-c-form.pf-m-horizontal-on-lg {
--pf-v6-c-form__group-label--PaddingBlockEnd: 0;
}
.pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group {
display: grid;
grid-template-columns: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-v6-c-form--m-horizontal__group-control--md--GridColumnWidth);
grid-column-gap: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap);
}
.pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group-label {
padding-block-start: var(--pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart);
}
.pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group-label.pf-m-no-padding-top {
--pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
}
.pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group-label.pf-m-info {
--pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
flex-direction: column;
align-items: flex-start;
}
.pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group-label-main {
flex-grow: 0;
}
.pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group-control {
grid-column: 2;
}
}
@media (min-width: 75rem) {
.pf-v6-c-form.pf-m-horizontal-on-xl {
--pf-v6-c-form__group-label--PaddingBlockEnd: 0;
}
.pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group {
display: grid;
grid-template-columns: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-v6-c-form--m-horizontal__group-control--md--GridColumnWidth);
grid-column-gap: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap);
}
.pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group-label {
padding-block-start: var(--pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart);
}
.pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group-label.pf-m-no-padding-top {
--pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
}
.pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group-label.pf-m-info {
--pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
flex-direction: column;
align-items: flex-start;
}
.pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group-label-main {
flex-grow: 0;
}
.pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group-control {
grid-column: 2;
}
}
@media (min-width: 90.625rem) {
.pf-v6-c-form.pf-m-horizontal-on-2xl {
--pf-v6-c-form__group-label--PaddingBlockEnd: 0;
}
.pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group {
display: grid;
grid-template-columns: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-v6-c-form--m-horizontal__group-control--md--GridColumnWidth);
grid-column-gap: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap);
}
.pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group-label {
padding-block-start: var(--pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart);
}
.pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group-label.pf-m-no-padding-top {
--pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
}
.pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group-label.pf-m-info {
--pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
flex-direction: column;
align-items: flex-start;
}
.pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group-label-main {
flex-grow: 0;
}
.pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group-control {
grid-column: 2;
}
}
.pf-v6-c-form.pf-m-limit-width {
max-width: var(--pf-v6-c-form--m-limit-width--MaxWidth);
}
.pf-v6-c-form__group {
display: flex;
flex-direction: column;
gap: var(--pf-v6-c-form__group--Gap);
min-width: 0;
}
.pf-v6-c-form__group.pf-m-action {
margin-block-start: var(--pf-v6-c-form__group--m-action--MarginBlockStart);
overflow: hidden;
}
.pf-v6-c-form__section {
display: grid;
gap: var(--pf-v6-c-form__section--Gap);
}
.pf-v6-c-form__section + .pf-v6-c-form__group:not(.pf-m-action), .pf-v6-c-form__section:not(:first-child) {
margin-block-start: var(--pf-v6-c-form__section--MarginBlockStart);
}
.pf-v6-c-form__section-title {
margin-block-end: var(--pf-v6-c-form__section-title--MarginBlockEnd);
font-size: var(--pf-v6-c-form__section-title--FontSize);
font-weight: var(--pf-v6-c-form__section-title--FontWeight);
}
.pf-v6-c-form__group-label {
--pf-v6-c-form__helper-text--MarginBlockStart: 0;
}
.pf-v6-c-form__group-label.pf-m-info {
display: flex;
gap: var(--pf-v6-c-form__group-label--m-info--Gap);
align-items: flex-end;
}
.pf-v6-c-form__group-label-main {
flex-grow: 1;
}
.pf-v6-c-form__group-label-info {
font-size: var(--pf-v6-c-form__group-label-info--FontSize);
}
.pf-v6-c-form__label {
font-size: var(--pf-v6-c-form__label--FontSize);
line-height: var(--pf-v6-c-form__label--LineHeight);
}
.pf-v6-c-form__label:not(.pf-m-disabled):hover {
cursor: var(--pf-v6-c-form__label--hover--Cursor);
}
.pf-v6-c-form__label.pf-m-disabled {
color: var(--pf-v6-c-form__label--m-disabled--Color);
}
.pf-v6-c-form__label.pf-m-disabled:hover {
cursor: var(--pf-v6-c-form__label--m-disabled--hover--Cursor);
}
.pf-v6-c-form__label-text {
font-weight: var(--pf-v6-c-form__label-text--FontWeight);
}
.pf-v6-c-form__label-required {
margin-inline-start: var(--pf-v6-c-form__label-required--MarginInlineStart);
font-size: var(--pf-v6-c-form__label-required--FontSize);
color: var(--pf-v6-c-form__label-required--Color);
}
.pf-v6-c-form__group-label-help .pf-v6-c-button {
--pf-v6-c-button--FontSize: var(--pf-v6-c-form__group-label-help--FontSize);
}
.pf-v6-c-form__group-control {
min-width: 0;
}
.pf-v6-c-form__group-control.pf-m-inline {
display: flex;
flex-flow: row wrap;
gap: var(--pf-v6-c-form__group-control--m-inline--Gap);
}
.pf-v6-c-form__group-control.pf-m-stack {
--pf-v6-c-form__helper-text--MarginBlockStart: var(--pf-v6-c-form__group-control--m-stack__helper-text--MarginBlockStart);
display: grid;
gap: var(--pf-v6-c-form__group-control--m-stack--Gap);
}
.pf-v6-c-form__group-control .pf-v6-c-form__helper-text:first-child {
--pf-v6-c-form__helper-text--MarginBlockStart: 0;
margin-block-end: var(--pf-v6-c-form__group-control__helper-text--MarginBlockEnd);
}
.pf-v6-c-form__helper-text {
margin-block-start: var(--pf-v6-c-form__helper-text--MarginBlockStart);
}
.pf-v6-c-form__helper-text.pf-m-inactive {
display: none;
}
.pf-v6-c-form__helper-text.pf-m-hidden {
visibility: hidden;
opacity: 0;
}
.pf-v6-c-form__fieldset {
border: 0;
}
.pf-v6-c-form__actions {
display: flex;
flex-wrap: wrap;
margin-block-start: var(--pf-v6-c-form__actions--MarginBlockStart);
margin-block-end: var(--pf-v6-c-form__actions--MarginBlockEnd);
margin-inline-start: var(--pf-v6-c-form__actions--MarginInlineStart);
margin-inline-end: var(--pf-v6-c-form__actions--MarginInlineEnd);
}
.pf-v6-c-form__actions > * {
margin-block-start: var(--pf-v6-c-form__actions--child--MarginBlockStart);
margin-block-end: var(--pf-v6-c-form__actions--child--MarginBlockEnd);
margin-inline-start: var(--pf-v6-c-form__actions--child--MarginInlineStart);
margin-inline-end: var(--pf-v6-c-form__actions--child--MarginInlineEnd);
}
.pf-v6-c-form__field-group {
--pf-v6-c-form__field-group--BorderBlockStartWidth: var(--pf-v6-c-form__field-group--border-width-base);
display: grid;
grid-template-columns: minmax(var(--pf-v6-c-form__field-group--GridTemplateColumns--toggle), max-content) 1fr;
border-block-start: var(--pf-v6-c-form__field-group--BorderBlockStartWidth) solid var(--pf-v6-c-form__field-group--BorderBlockStartColor);
border-block-end: var(--pf-v6-c-form__field-group--BorderBlockEndWidth) solid var(--pf-v6-c-form__field-group--BorderBlockEndColor);
}
.pf-v6-c-form__field-group:last-child {
--pf-v6-c-form__field-group--BorderBlockEndWidth: 0;
}
.pf-v6-c-form__field-group + .pf-v6-c-form__field-group, .pf-v6-c-form__field-group:first-child {
--pf-v6-c-form__field-group--BorderBlockStartWidth: 0;
}
.pf-v6-c-form__field-group + .pf-v6-c-form__field-group {
margin-block-start: var(--pf-v6-c-form__field-group--field-group--MarginBlockStart);
}
.pf-v6-c-form__field-group .pf-v6-c-form__field-group {
--pf-v6-c-form__field-group-body--GridColumn: var(--pf-v6-c-form__field-group__field-group__field-group-body--GridColumn);
--pf-v6-c-form__field-group-toggle--PaddingBlockStart: var(--pf-v6-c-form__field-group__field-group__field-group-toggle--PaddingBlockStart);
--pf-v6-c-form__field-group-header--PaddingBlockStart: var(--pf-v6-c-form__field-group__field-group__field-group-header--PaddingBlockStart);
--pf-v6-c-form__field-group-header--PaddingBlockEnd: var(--pf-v6-c-form__field-group__field-group__field-group-header--PaddingBlockEnd);
--pf-v6-c-form__field-group-body--PaddingBlockStart: 0;
}
.pf-v6-c-form__field-group .pf-v6-c-form__field-group .pf-v6-c-form__field-group-toggle ~ .pf-v6-c-form__field-group-body {
--pf-v6-c-form__field-group-body--GridColumn: var(--pf-v6-c-form__field-group__field-group__field-group-toggle--field-group-body--GridColumn);
}
.pf-v6-c-form__field-group.pf-m-expanded > .pf-v6-c-form__field-group-toggle {
--pf-v6-c-form__field-group-toggle-icon--Rotate: var(--pf-v6-c-form__field-group--m-expanded__toggle-icon--Rotate);
}
.pf-v6-c-form__field-group.pf-m-expanded.pf-m-expandable > .pf-v6-c-form__field-group-body {
max-height: 99999px;
padding-block-start: var(--pf-v6-c-form__field-group-body--PaddingBlockStart);
padding-block-end: var(--pf-v6-c-form__field-group-body--PaddingBlockEnd);
visibility: visible;
opacity: 1;
transition-delay: 0s;
transition-duration: var(--pf-v6-c-form__field-group-body--TransitionDuration--expand--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--expand--slide), 0s, 0s, 0s, 0s;
translate: 0 var(--pf-v6-c-form__field-group--m-expanded__field-group-body--TranslateY);
}
.pf-v6-c-form__field-group-toggle {
grid-row: 1/2;
grid-column: 1/2;
padding-block-start: var(--pf-v6-c-form__field-group-toggle--PaddingBlockStart);
padding-inline-end: var(--pf-v6-c-form__field-group-toggle--PaddingInlineEnd);
}
.pf-v6-c-form__field-group-toggle + .pf-v6-c-form__field-group-header {
--pf-v6-c-form__field-group-header--GridColumn: var(--pf-v6-c-form__field-group-toggle--field-group-header--GridColumn);
}
.pf-v6-c-form__field-group-toggle-button {
margin-block-start: var(--pf-v6-c-form__field-group-toggle-button--MarginBlockStart);
margin-block-end: var(--pf-v6-c-form__field-group-toggle-button--MarginBlockEnd);
}
.pf-v6-c-form__field-group-toggle-icon {
display: inline-block;
min-width: var(--pf-v6-c-form__field-group-toggle-icon--MinWidth);
text-align: center;
transition-timing-function: var(--pf-v6-c-form__field-group-toggle-icon--TransitionTimingFunction);
transition-duration: var(--pf-v6-c-form__field-group-toggle-icon--TransitionDuration);
transition-property: transform;
transform: rotate(var(--pf-v6-c-form__field-group-toggle-icon--Rotate));
}
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-form__field-group-toggle-icon {
scale: -1 1;
}
.pf-v6-c-form__field-group-header {
display: flex;
grid-row: 1/2;
grid-column: var(--pf-v6-c-form__field-group-header--GridColumn);
align-items: flex-start;
padding-block-start: var(--pf-v6-c-form__field-group-header--PaddingBlockStart);
padding-block-end: var(--pf-v6-c-form__field-group-header--PaddingBlockEnd);
}
.pf-v6-c-form__field-group-header-main {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.pf-v6-c-form__field-group-header-title {
display: flex;
}
.pf-v6-c-form__field-group-header-title-text {
flex-grow: 1;
}
.pf-v6-c-form__field-group-header-description {
margin-block-start: var(--pf-v6-c-form__field-group-header-description--MarginBlockStart);
color: var(--pf-v6-c-form__field-group-header-description--Color);
}
.pf-v6-c-form__field-group-header-actions {
margin-block-start: var(--pf-v6-c-form__field-group-header-actions--MarginBlockStart);
margin-block-end: var(--pf-v6-c-form__field-group-header-actions--MarginBlockEnd);
margin-inline-start: var(--pf-v6-c-form__field-group-header-actions--MarginInlineStart);
white-space: nowrap;
}
.pf-v6-c-form__field-group-body {
display: grid;
grid-column: var(--pf-v6-c-form__field-group-body--GridColumn);
gap: var(--pf-v6-c-form__field-group-body--Gap);
padding-block-start: var(--pf-v6-c-form__field-group-body--PaddingBlockStart);
padding-block-end: var(--pf-v6-c-form__field-group-body--PaddingBlockEnd);
}
.pf-v6-c-form__field-group.pf-m-expandable > .pf-v6-c-form__field-group-body {
max-height: 0;
padding-block-start: 0;
padding-block-end: 0;
visibility: hidden;
opacity: 0;
transition-delay: 0s, 0s, var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade);
transition-duration: var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--slide), 0s, 0s, 0s, 0s;
transition-property: opacity, translate, visibility, max-height, padding-block-start, padding-block-end;
translate: 0 var(--pf-v6-c-form__field-group-body--TranslateY);
}
.pf-v6-c-form__field-group-body > .pf-v6-c-form__field-group:first-child {
--pf-v6-c-form__field-group-toggle--PaddingBlockStart: 0;
--pf-v6-c-form__field-group-header--PaddingBlockStart: 0;
}
.pf-v6-c-form__field-group-body > .pf-v6-c-form__field-group:last-child {
margin-block-end: var(--pf-v6-c-form__field-group-body__field-group--last-child--MarginBlockEnd);
}
|
