@patternfly/react-core 4.239.0 → 4.239.1

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.
Files changed (3) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/umd/react-core.min.css +1538 -1538
  3. package/package.json +5 -5
package/dist/umd/react-core.min.css CHANGED
@@ -297,238 +297,6 @@
297
297
  --pf-c-action-list--child--spacer: var(--pf-c-action-list--m-icon--spacer);
298
298
  }
299
299
 
300
- .pf-c-alert {
301
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
302
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
303
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
304
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
305
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
306
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
307
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
308
- }
309
-
310
- .pf-c-alert {
311
- --pf-c-alert--BoxShadow: var(--pf-global--BoxShadow--lg);
312
- --pf-c-alert--BackgroundColor: var(--pf-global--BackgroundColor--100);
313
- --pf-c-alert--GridTemplateColumns: max-content 1fr max-content;
314
- --pf-c-alert--GridTemplateAreas:
315
- "icon title action"
316
- ". description description"
317
- ". actiongroup actiongroup";
318
- --pf-c-alert--BorderTopWidth: var(--pf-global--BorderWidth--md);
319
- --pf-c-alert--BorderTopColor: var(--pf-global--default-color--200);
320
- --pf-c-alert--PaddingTop: var(--pf-global--spacer--md);
321
- --pf-c-alert--PaddingRight: var(--pf-global--spacer--md);
322
- --pf-c-alert--PaddingBottom: var(--pf-global--spacer--md);
323
- --pf-c-alert--PaddingLeft: var(--pf-global--spacer--md);
324
- --pf-c-alert__FontSize: var(--pf-global--FontSize--sm);
325
- --pf-c-alert__toggle--MarginTop: calc(-1 * var(--pf-global--spacer--form-element) - 0.0625rem);
326
- --pf-c-alert__toggle--MarginBottom: calc(-1 * var(--pf-global--spacer--form-element));
327
- --pf-c-alert__toggle--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
328
- --pf-c-alert__toggle-icon--Rotate: 0;
329
- --pf-c-alert__toggle-icon--Transition: var(--pf-global--Transition);
330
- --pf-c-alert__icon--Color: var(--pf-global--default-color--200);
331
- --pf-c-alert__icon--MarginTop: 0.0625rem;
332
- --pf-c-alert__icon--MarginRight: var(--pf-global--spacer--sm);
333
- --pf-c-alert__icon--FontSize: var(--pf-global--icon--FontSize--md);
334
- --pf-c-alert__title--FontWeight: var(--pf-global--FontWeight--bold);
335
- --pf-c-alert__title--Color: var(--pf-global--default-color--300);
336
- --pf-c-alert__title--max-lines: 1;
337
- --pf-c-alert__action--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
338
- --pf-c-alert__action--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
339
- --pf-c-alert__action--TranslateY: 0.125rem;
340
- --pf-c-alert__action--MarginRight: calc(var(--pf-global--spacer--sm) * -1);
341
- --pf-c-alert__description--PaddingTop: var(--pf-global--spacer--xs);
342
- --pf-c-alert__action-group--PaddingTop-base: var(--pf-global--spacer--xs);
343
- --pf-c-alert__action-group--PaddingTop: var(--pf-c-alert__action-group--PaddingTop-base);
344
- --pf-c-alert__description--action-group--PaddingTop-base: var(--pf-global--spacer--md);
345
- --pf-c-alert__description--action-group--PaddingTop: var(--pf-c-alert__description--action-group--PaddingTop-base);
346
- --pf-c-alert__action-group__c-button--not-last-child--MarginRight: var(--pf-global--spacer--lg);
347
- --pf-c-alert--m-success--BorderTopColor: var(--pf-global--success-color--100);
348
- --pf-c-alert--m-success__icon--Color: var(--pf-global--success-color--100);
349
- --pf-c-alert--m-success__title--Color: var(--pf-global--success-color--200);
350
- --pf-c-alert--m-danger--BorderTopColor: var(--pf-global--danger-color--100);
351
- --pf-c-alert--m-danger__icon--Color: var(--pf-global--danger-color--100);
352
- --pf-c-alert--m-danger__title--Color: var(--pf-global--danger-color--200);
353
- --pf-c-alert--m-warning--BorderTopColor: var(--pf-global--warning-color--100);
354
- --pf-c-alert--m-warning__icon--Color: var(--pf-global--warning-color--100);
355
- --pf-c-alert--m-warning__title--Color: var(--pf-global--warning-color--200);
356
- --pf-c-alert--m-info--BorderTopColor: var(--pf-global--info-color--100);
357
- --pf-c-alert--m-info__icon--Color: var(--pf-global--info-color--100);
358
- --pf-c-alert--m-info__title--Color: var(--pf-global--info-color--200);
359
- --pf-c-alert--m-inline--BoxShadow: none;
360
- --pf-c-alert--m-inline--BackgroundColor: var(--pf-global--palette--cyan-50);
361
- --pf-c-alert--m-inline--m-success--BackgroundColor: var(--pf-global--palette--green-50);
362
- --pf-c-alert--m-inline--m-danger--BackgroundColor: var(--pf-global--palette--red-50);
363
- --pf-c-alert--m-inline--m-warning--BackgroundColor: var(--pf-global--palette--gold-50);
364
- --pf-c-alert--m-inline--m-info--BackgroundColor: var(--pf-global--palette--blue-50);
365
- --pf-c-alert--m-inline--m-plain--BorderTopWidth: 0;
366
- --pf-c-alert--m-inline--m-plain--BackgroundColor: transparent;
367
- --pf-c-alert--m-inline--m-plain--PaddingTop: 0;
368
- --pf-c-alert--m-inline--m-plain--PaddingRight: 0;
369
- --pf-c-alert--m-inline--m-plain--PaddingBottom: 0;
370
- --pf-c-alert--m-inline--m-plain--PaddingLeft: 0;
371
- --pf-c-alert--m-expandable--GridTemplateColumns: auto max-content 1fr max-content;
372
- --pf-c-alert--m-expandable--GridTemplateAreas:
373
- "toggle icon title action"
374
- ". . description description"
375
- ". . actiongroup actiongroup";
376
- --pf-c-alert--m-expandable__description--action-group--PaddingTop: var(--pf-c-alert__action-group--PaddingTop-base);
377
- --pf-c-alert--m-expanded__toggle-icon--Rotate: 90deg;
378
- --pf-c-alert--m-expanded__description--action-group--PaddingTop: var(--pf-c-alert__description--action-group--PaddingTop-base);
379
- color: var(--pf-global--Color--100);
380
- position: relative;
381
- display: grid;
382
- padding: var(--pf-c-alert--PaddingTop) var(--pf-c-alert--PaddingRight) var(--pf-c-alert--PaddingBottom) var(--pf-c-alert--PaddingLeft);
383
- font-size: var(--pf-c-alert__FontSize);
384
- background-color: var(--pf-c-alert--BackgroundColor);
385
- border-top: var(--pf-c-alert--BorderTopWidth) solid var(--pf-c-alert--BorderTopColor);
386
- box-shadow: var(--pf-c-alert--BoxShadow);
387
- grid-template-columns: var(--pf-c-alert--GridTemplateColumns);
388
- grid-template-areas: var(--pf-c-alert--GridTemplateAreas);
389
- }
390
-
391
- .pf-c-alert.pf-m-success {
392
- --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-success--BorderTopColor);
393
- --pf-c-alert__icon--Color: var(--pf-c-alert--m-success__icon--Color);
394
- --pf-c-alert__title--Color: var(--pf-c-alert--m-success__title--Color);
395
- --pf-c-alert--m-inline--BackgroundColor: var(--pf-c-alert--m-inline--m-success--BackgroundColor);
396
- }
397
-
398
- .pf-c-alert.pf-m-danger {
399
- --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-danger--BorderTopColor);
400
- --pf-c-alert__icon--Color: var(--pf-c-alert--m-danger__icon--Color);
401
- --pf-c-alert__title--Color: var(--pf-c-alert--m-danger__title--Color);
402
- --pf-c-alert--m-inline--BackgroundColor: var(--pf-c-alert--m-inline--m-danger--BackgroundColor);
403
- }
404
-
405
- .pf-c-alert.pf-m-warning {
406
- --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-warning--BorderTopColor);
407
- --pf-c-alert__icon--Color: var(--pf-c-alert--m-warning__icon--Color);
408
- --pf-c-alert__title--Color: var(--pf-c-alert--m-warning__title--Color);
409
- --pf-c-alert--m-inline--BackgroundColor: var(--pf-c-alert--m-inline--m-warning--BackgroundColor);
410
- }
411
-
412
- .pf-c-alert.pf-m-info {
413
- --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-info--BorderTopColor);
414
- --pf-c-alert__icon--Color: var(--pf-c-alert--m-info__icon--Color);
415
- --pf-c-alert__title--Color: var(--pf-c-alert--m-info__title--Color);
416
- --pf-c-alert--m-inline--BackgroundColor: var(--pf-c-alert--m-inline--m-info--BackgroundColor);
417
- }
418
-
419
- .pf-c-alert.pf-m-inline {
420
- --pf-c-alert--BoxShadow: var(--pf-c-alert--m-inline--BoxShadow);
421
- --pf-c-alert--BackgroundColor: var(--pf-c-alert--m-inline--BackgroundColor);
422
- }
423
-
424
- .pf-c-alert.pf-m-plain {
425
- --pf-c-alert--BorderTopWidth: var(--pf-c-alert--m-inline--m-plain--BorderTopWidth);
426
- --pf-c-alert--BackgroundColor: var(--pf-c-alert--m-inline--m-plain--BackgroundColor);
427
- --pf-c-alert--PaddingTop: var(--pf-c-alert--m-inline--m-plain--PaddingTop);
428
- --pf-c-alert--PaddingRight: var(--pf-c-alert--m-inline--m-plain--PaddingRight);
429
- --pf-c-alert--PaddingBottom: var(--pf-c-alert--m-inline--m-plain--PaddingBottom);
430
- --pf-c-alert--PaddingLeft: var(--pf-c-alert--m-inline--m-plain--PaddingLeft);
431
- }
432
-
433
- .pf-c-alert.pf-m-expandable {
434
- --pf-c-alert--GridTemplateColumns: var(--pf-c-alert--m-expandable--GridTemplateColumns);
435
- --pf-c-alert--GridTemplateAreas: var(--pf-c-alert--m-expandable--GridTemplateAreas);
436
- --pf-c-alert__description--action-group--PaddingTop: var(--pf-c-alert--m-expandable__description--action-group--PaddingTop);
437
- }
438
-
439
- .pf-c-alert.pf-m-expanded {
440
- --pf-c-alert__toggle-icon--Rotate: var(--pf-c-alert--m-expanded__toggle-icon--Rotate);
441
- --pf-c-alert__description--action-group--PaddingTop: var(--pf-c-alert--m-expanded__description--action-group--PaddingTop);
442
- }
443
-
444
- .pf-c-alert__toggle {
445
- margin-top: var(--pf-c-alert__toggle--MarginTop);
446
- margin-bottom: var(--pf-c-alert__toggle--MarginBottom);
447
- margin-left: var(--pf-c-alert__toggle--MarginLeft);
448
- }
449
-
450
- .pf-c-alert__toggle-icon {
451
- display: inline-block;
452
- transition: var(--pf-c-alert__toggle-icon--Transition);
453
- transform: rotate(var(--pf-c-alert__toggle-icon--Rotate));
454
- }
455
-
456
- .pf-c-alert__icon {
457
- grid-area: icon;
458
- display: flex;
459
- margin-top: var(--pf-c-alert__icon--MarginTop);
460
- margin-right: var(--pf-c-alert__icon--MarginRight);
461
- font-size: var(--pf-c-alert__icon--FontSize);
462
- color: var(--pf-c-alert__icon--Color);
463
- }
464
-
465
- .pf-c-alert__title {
466
- grid-area: title;
467
- font-weight: var(--pf-c-alert__title--FontWeight);
468
- color: var(--pf-c-alert__title--Color);
469
- word-break: break-word;
470
- }
471
-
472
- .pf-c-alert__title.pf-m-truncate {
473
- display: -webkit-box;
474
- -webkit-box-orient: vertical;
475
- -webkit-line-clamp: var(--pf-c-alert__title--max-lines);
476
- overflow: hidden;
477
- }
478
-
479
- .pf-c-alert__description {
480
- grid-area: description;
481
- padding-top: var(--pf-c-alert__description--PaddingTop);
482
- word-break: break-word;
483
- }
484
-
485
- .pf-c-alert__description + .pf-c-alert__action-group {
486
- --pf-c-alert__action-group--PaddingTop: var(--pf-c-alert__description--action-group--PaddingTop);
487
- }
488
-
489
- .pf-c-alert__action {
490
- grid-area: action;
491
- margin-top: var(--pf-c-alert__action--MarginTop);
492
- margin-right: var(--pf-c-alert__action--MarginRight);
493
- margin-bottom: var(--pf-c-alert__action--MarginBottom);
494
- transform: translateY(var(--pf-c-alert__action--TranslateY));
495
- }
496
-
497
- .pf-c-alert__action > .pf-c-button {
498
- --pf-c-button--LineHeight: 1;
499
- }
500
-
501
- .pf-c-alert__action-group {
502
- grid-area: actiongroup;
503
- padding-top: var(--pf-c-alert__action-group--PaddingTop);
504
- }
505
-
506
- .pf-c-alert__action-group > .pf-c-button {
507
- --pf-c-button--m-link--m-inline--hover--TextDecoration: none;
508
- }
509
-
510
- .pf-c-alert__action-group > .pf-c-button:not(:last-child) {
511
- margin-right: var(--pf-c-alert__action-group__c-button--not-last-child--MarginRight);
512
- }
513
-
514
- .pf-m-overpass-font .pf-c-alert__title {
515
- --pf-c-alert__title--FontWeight: var(--pf-global--FontWeight--normal);
516
- }
517
-
518
- :where(.pf-theme-dark) .pf-c-alert {
519
- --pf-c-alert--BackgroundColor: var(--pf-global--palette--black-600);
520
- --pf-c-alert__title--Color: var(--pf-global--default-color--200);
521
- --pf-c-alert--m-success__title--Color: var(--pf-global--success-color--100);
522
- --pf-c-alert--m-danger__title--Color: var(--pf-global--danger-color--100);
523
- --pf-c-alert--m-warning__title--Color: var(--pf-global--warning-color--100);
524
- --pf-c-alert--m-info__title--Color: var(--pf-global--info-color--100);
525
- --pf-c-alert--m-inline--BackgroundColor: var(--pf-global--palette--black-600);
526
- --pf-c-alert--m-inline--m-success--BackgroundColor: var(--pf-global--palette--black-600);
527
- --pf-c-alert--m-inline--m-danger--BackgroundColor: var(--pf-global--palette--black-600);
528
- --pf-c-alert--m-inline--m-warning--BackgroundColor: var(--pf-global--palette--black-600);
529
- --pf-c-alert--m-inline--m-info--BackgroundColor: var(--pf-global--palette--black-600);
530
- }
531
-
532
300
  .pf-c-app-launcher {
533
301
  --pf-c-app-launcher__menu--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
534
302
  --pf-c-app-launcher__menu--BoxShadow: var(--pf-global--BoxShadow--md);
@@ -1550,24 +1318,256 @@ textarea.pf-c-form-control {
1550
1318
  --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height-on-2xl, var(--pf-c-avatar--m-xl--Height-on-xl, var(--pf-c-avatar--m-xl--Height-on-lg, var(--pf-c-avatar--m-xl--Height-on-md, var(--pf-c-avatar--m-xl--Height-on-sm, var(--pf-c-avatar--m-xl--Height))))));
1551
1319
  }
1552
1320
  }
1553
- .pf-c-back-to-top {
1554
- --pf-c-back-to-top--Right: var(--pf-global--spacer--2xl);
1555
- --pf-c-back-to-top--Bottom: var(--pf-global--spacer--lg);
1556
- --pf-c-back-to-top--md--Bottom: var(--pf-global--spacer--2xl);
1557
- --pf-c-back-to-top--c-button--FontSize: var(--pf-global--FontSize--xs);
1558
- --pf-c-back-to-top--c-button--BorderRadius: var(--pf-global--BorderRadius--lg);
1559
- --pf-c-back-to-top--c-button--PaddingTop: var(--pf-global--spacer--xs);
1560
- --pf-c-back-to-top--c-button--PaddingRight: var(--pf-global--spacer--sm);
1561
- --pf-c-back-to-top--c-button--PaddingBottom: var(--pf-global--spacer--xs);
1562
- --pf-c-back-to-top--c-button--PaddingLeft: var(--pf-global--spacer--sm);
1563
- --pf-c-back-to-top--c-button--BoxShadow: var(--pf-global--BoxShadow--lg-bottom);
1564
- position: absolute;
1565
- right: var(--pf-c-back-to-top--Right);
1566
- bottom: var(--pf-c-back-to-top--Bottom);
1321
+ .pf-c-alert {
1322
+ --pf-global--Color--100: var(--pf-global--Color--dark-100);
1323
+ --pf-global--Color--200: var(--pf-global--Color--dark-200);
1324
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
1325
+ --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
1326
+ --pf-global--link--Color: var(--pf-global--link--Color--dark);
1327
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
1328
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
1567
1329
  }
1568
1330
 
1569
- @media (min-width: 768px) {
1570
- .pf-c-back-to-top {
1331
+ .pf-c-alert {
1332
+ --pf-c-alert--BoxShadow: var(--pf-global--BoxShadow--lg);
1333
+ --pf-c-alert--BackgroundColor: var(--pf-global--BackgroundColor--100);
1334
+ --pf-c-alert--GridTemplateColumns: max-content 1fr max-content;
1335
+ --pf-c-alert--GridTemplateAreas:
1336
+ "icon title action"
1337
+ ". description description"
1338
+ ". actiongroup actiongroup";
1339
+ --pf-c-alert--BorderTopWidth: var(--pf-global--BorderWidth--md);
1340
+ --pf-c-alert--BorderTopColor: var(--pf-global--default-color--200);
1341
+ --pf-c-alert--PaddingTop: var(--pf-global--spacer--md);
1342
+ --pf-c-alert--PaddingRight: var(--pf-global--spacer--md);
1343
+ --pf-c-alert--PaddingBottom: var(--pf-global--spacer--md);
1344
+ --pf-c-alert--PaddingLeft: var(--pf-global--spacer--md);
1345
+ --pf-c-alert__FontSize: var(--pf-global--FontSize--sm);
1346
+ --pf-c-alert__toggle--MarginTop: calc(-1 * var(--pf-global--spacer--form-element) - 0.0625rem);
1347
+ --pf-c-alert__toggle--MarginBottom: calc(-1 * var(--pf-global--spacer--form-element));
1348
+ --pf-c-alert__toggle--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
1349
+ --pf-c-alert__toggle-icon--Rotate: 0;
1350
+ --pf-c-alert__toggle-icon--Transition: var(--pf-global--Transition);
1351
+ --pf-c-alert__icon--Color: var(--pf-global--default-color--200);
1352
+ --pf-c-alert__icon--MarginTop: 0.0625rem;
1353
+ --pf-c-alert__icon--MarginRight: var(--pf-global--spacer--sm);
1354
+ --pf-c-alert__icon--FontSize: var(--pf-global--icon--FontSize--md);
1355
+ --pf-c-alert__title--FontWeight: var(--pf-global--FontWeight--bold);
1356
+ --pf-c-alert__title--Color: var(--pf-global--default-color--300);
1357
+ --pf-c-alert__title--max-lines: 1;
1358
+ --pf-c-alert__action--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
1359
+ --pf-c-alert__action--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
1360
+ --pf-c-alert__action--TranslateY: 0.125rem;
1361
+ --pf-c-alert__action--MarginRight: calc(var(--pf-global--spacer--sm) * -1);
1362
+ --pf-c-alert__description--PaddingTop: var(--pf-global--spacer--xs);
1363
+ --pf-c-alert__action-group--PaddingTop-base: var(--pf-global--spacer--xs);
1364
+ --pf-c-alert__action-group--PaddingTop: var(--pf-c-alert__action-group--PaddingTop-base);
1365
+ --pf-c-alert__description--action-group--PaddingTop-base: var(--pf-global--spacer--md);
1366
+ --pf-c-alert__description--action-group--PaddingTop: var(--pf-c-alert__description--action-group--PaddingTop-base);
1367
+ --pf-c-alert__action-group__c-button--not-last-child--MarginRight: var(--pf-global--spacer--lg);
1368
+ --pf-c-alert--m-success--BorderTopColor: var(--pf-global--success-color--100);
1369
+ --pf-c-alert--m-success__icon--Color: var(--pf-global--success-color--100);
1370
+ --pf-c-alert--m-success__title--Color: var(--pf-global--success-color--200);
1371
+ --pf-c-alert--m-danger--BorderTopColor: var(--pf-global--danger-color--100);
1372
+ --pf-c-alert--m-danger__icon--Color: var(--pf-global--danger-color--100);
1373
+ --pf-c-alert--m-danger__title--Color: var(--pf-global--danger-color--200);
1374
+ --pf-c-alert--m-warning--BorderTopColor: var(--pf-global--warning-color--100);
1375
+ --pf-c-alert--m-warning__icon--Color: var(--pf-global--warning-color--100);
1376
+ --pf-c-alert--m-warning__title--Color: var(--pf-global--warning-color--200);
1377
+ --pf-c-alert--m-info--BorderTopColor: var(--pf-global--info-color--100);
1378
+ --pf-c-alert--m-info__icon--Color: var(--pf-global--info-color--100);
1379
+ --pf-c-alert--m-info__title--Color: var(--pf-global--info-color--200);
1380
+ --pf-c-alert--m-inline--BoxShadow: none;
1381
+ --pf-c-alert--m-inline--BackgroundColor: var(--pf-global--palette--cyan-50);
1382
+ --pf-c-alert--m-inline--m-success--BackgroundColor: var(--pf-global--palette--green-50);
1383
+ --pf-c-alert--m-inline--m-danger--BackgroundColor: var(--pf-global--palette--red-50);
1384
+ --pf-c-alert--m-inline--m-warning--BackgroundColor: var(--pf-global--palette--gold-50);
1385
+ --pf-c-alert--m-inline--m-info--BackgroundColor: var(--pf-global--palette--blue-50);
1386
+ --pf-c-alert--m-inline--m-plain--BorderTopWidth: 0;
1387
+ --pf-c-alert--m-inline--m-plain--BackgroundColor: transparent;
1388
+ --pf-c-alert--m-inline--m-plain--PaddingTop: 0;
1389
+ --pf-c-alert--m-inline--m-plain--PaddingRight: 0;
1390
+ --pf-c-alert--m-inline--m-plain--PaddingBottom: 0;
1391
+ --pf-c-alert--m-inline--m-plain--PaddingLeft: 0;
1392
+ --pf-c-alert--m-expandable--GridTemplateColumns: auto max-content 1fr max-content;
1393
+ --pf-c-alert--m-expandable--GridTemplateAreas:
1394
+ "toggle icon title action"
1395
+ ". . description description"
1396
+ ". . actiongroup actiongroup";
1397
+ --pf-c-alert--m-expandable__description--action-group--PaddingTop: var(--pf-c-alert__action-group--PaddingTop-base);
1398
+ --pf-c-alert--m-expanded__toggle-icon--Rotate: 90deg;
1399
+ --pf-c-alert--m-expanded__description--action-group--PaddingTop: var(--pf-c-alert__description--action-group--PaddingTop-base);
1400
+ color: var(--pf-global--Color--100);
1401
+ position: relative;
1402
+ display: grid;
1403
+ padding: var(--pf-c-alert--PaddingTop) var(--pf-c-alert--PaddingRight) var(--pf-c-alert--PaddingBottom) var(--pf-c-alert--PaddingLeft);
1404
+ font-size: var(--pf-c-alert__FontSize);
1405
+ background-color: var(--pf-c-alert--BackgroundColor);
1406
+ border-top: var(--pf-c-alert--BorderTopWidth) solid var(--pf-c-alert--BorderTopColor);
1407
+ box-shadow: var(--pf-c-alert--BoxShadow);
1408
+ grid-template-columns: var(--pf-c-alert--GridTemplateColumns);
1409
+ grid-template-areas: var(--pf-c-alert--GridTemplateAreas);
1410
+ }
1411
+
1412
+ .pf-c-alert.pf-m-success {
1413
+ --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-success--BorderTopColor);
1414
+ --pf-c-alert__icon--Color: var(--pf-c-alert--m-success__icon--Color);
1415
+ --pf-c-alert__title--Color: var(--pf-c-alert--m-success__title--Color);
1416
+ --pf-c-alert--m-inline--BackgroundColor: var(--pf-c-alert--m-inline--m-success--BackgroundColor);
1417
+ }
1418
+
1419
+ .pf-c-alert.pf-m-danger {
1420
+ --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-danger--BorderTopColor);
1421
+ --pf-c-alert__icon--Color: var(--pf-c-alert--m-danger__icon--Color);
1422
+ --pf-c-alert__title--Color: var(--pf-c-alert--m-danger__title--Color);
1423
+ --pf-c-alert--m-inline--BackgroundColor: var(--pf-c-alert--m-inline--m-danger--BackgroundColor);
1424
+ }
1425
+
1426
+ .pf-c-alert.pf-m-warning {
1427
+ --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-warning--BorderTopColor);
1428
+ --pf-c-alert__icon--Color: var(--pf-c-alert--m-warning__icon--Color);
1429
+ --pf-c-alert__title--Color: var(--pf-c-alert--m-warning__title--Color);
1430
+ --pf-c-alert--m-inline--BackgroundColor: var(--pf-c-alert--m-inline--m-warning--BackgroundColor);
1431
+ }
1432
+
1433
+ .pf-c-alert.pf-m-info {
1434
+ --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-info--BorderTopColor);
1435
+ --pf-c-alert__icon--Color: var(--pf-c-alert--m-info__icon--Color);
1436
+ --pf-c-alert__title--Color: var(--pf-c-alert--m-info__title--Color);
1437
+ --pf-c-alert--m-inline--BackgroundColor: var(--pf-c-alert--m-inline--m-info--BackgroundColor);
1438
+ }
1439
+
1440
+ .pf-c-alert.pf-m-inline {
1441
+ --pf-c-alert--BoxShadow: var(--pf-c-alert--m-inline--BoxShadow);
1442
+ --pf-c-alert--BackgroundColor: var(--pf-c-alert--m-inline--BackgroundColor);
1443
+ }
1444
+
1445
+ .pf-c-alert.pf-m-plain {
1446
+ --pf-c-alert--BorderTopWidth: var(--pf-c-alert--m-inline--m-plain--BorderTopWidth);
1447
+ --pf-c-alert--BackgroundColor: var(--pf-c-alert--m-inline--m-plain--BackgroundColor);
1448
+ --pf-c-alert--PaddingTop: var(--pf-c-alert--m-inline--m-plain--PaddingTop);
1449
+ --pf-c-alert--PaddingRight: var(--pf-c-alert--m-inline--m-plain--PaddingRight);
1450
+ --pf-c-alert--PaddingBottom: var(--pf-c-alert--m-inline--m-plain--PaddingBottom);
1451
+ --pf-c-alert--PaddingLeft: var(--pf-c-alert--m-inline--m-plain--PaddingLeft);
1452
+ }
1453
+
1454
+ .pf-c-alert.pf-m-expandable {
1455
+ --pf-c-alert--GridTemplateColumns: var(--pf-c-alert--m-expandable--GridTemplateColumns);
1456
+ --pf-c-alert--GridTemplateAreas: var(--pf-c-alert--m-expandable--GridTemplateAreas);
1457
+ --pf-c-alert__description--action-group--PaddingTop: var(--pf-c-alert--m-expandable__description--action-group--PaddingTop);
1458
+ }
1459
+
1460
+ .pf-c-alert.pf-m-expanded {
1461
+ --pf-c-alert__toggle-icon--Rotate: var(--pf-c-alert--m-expanded__toggle-icon--Rotate);
1462
+ --pf-c-alert__description--action-group--PaddingTop: var(--pf-c-alert--m-expanded__description--action-group--PaddingTop);
1463
+ }
1464
+
1465
+ .pf-c-alert__toggle {
1466
+ margin-top: var(--pf-c-alert__toggle--MarginTop);
1467
+ margin-bottom: var(--pf-c-alert__toggle--MarginBottom);
1468
+ margin-left: var(--pf-c-alert__toggle--MarginLeft);
1469
+ }
1470
+
1471
+ .pf-c-alert__toggle-icon {
1472
+ display: inline-block;
1473
+ transition: var(--pf-c-alert__toggle-icon--Transition);
1474
+ transform: rotate(var(--pf-c-alert__toggle-icon--Rotate));
1475
+ }
1476
+
1477
+ .pf-c-alert__icon {
1478
+ grid-area: icon;
1479
+ display: flex;
1480
+ margin-top: var(--pf-c-alert__icon--MarginTop);
1481
+ margin-right: var(--pf-c-alert__icon--MarginRight);
1482
+ font-size: var(--pf-c-alert__icon--FontSize);
1483
+ color: var(--pf-c-alert__icon--Color);
1484
+ }
1485
+
1486
+ .pf-c-alert__title {
1487
+ grid-area: title;
1488
+ font-weight: var(--pf-c-alert__title--FontWeight);
1489
+ color: var(--pf-c-alert__title--Color);
1490
+ word-break: break-word;
1491
+ }
1492
+
1493
+ .pf-c-alert__title.pf-m-truncate {
1494
+ display: -webkit-box;
1495
+ -webkit-box-orient: vertical;
1496
+ -webkit-line-clamp: var(--pf-c-alert__title--max-lines);
1497
+ overflow: hidden;
1498
+ }
1499
+
1500
+ .pf-c-alert__description {
1501
+ grid-area: description;
1502
+ padding-top: var(--pf-c-alert__description--PaddingTop);
1503
+ word-break: break-word;
1504
+ }
1505
+
1506
+ .pf-c-alert__description + .pf-c-alert__action-group {
1507
+ --pf-c-alert__action-group--PaddingTop: var(--pf-c-alert__description--action-group--PaddingTop);
1508
+ }
1509
+
1510
+ .pf-c-alert__action {
1511
+ grid-area: action;
1512
+ margin-top: var(--pf-c-alert__action--MarginTop);
1513
+ margin-right: var(--pf-c-alert__action--MarginRight);
1514
+ margin-bottom: var(--pf-c-alert__action--MarginBottom);
1515
+ transform: translateY(var(--pf-c-alert__action--TranslateY));
1516
+ }
1517
+
1518
+ .pf-c-alert__action > .pf-c-button {
1519
+ --pf-c-button--LineHeight: 1;
1520
+ }
1521
+
1522
+ .pf-c-alert__action-group {
1523
+ grid-area: actiongroup;
1524
+ padding-top: var(--pf-c-alert__action-group--PaddingTop);
1525
+ }
1526
+
1527
+ .pf-c-alert__action-group > .pf-c-button {
1528
+ --pf-c-button--m-link--m-inline--hover--TextDecoration: none;
1529
+ }
1530
+
1531
+ .pf-c-alert__action-group > .pf-c-button:not(:last-child) {
1532
+ margin-right: var(--pf-c-alert__action-group__c-button--not-last-child--MarginRight);
1533
+ }
1534
+
1535
+ .pf-m-overpass-font .pf-c-alert__title {
1536
+ --pf-c-alert__title--FontWeight: var(--pf-global--FontWeight--normal);
1537
+ }
1538
+
1539
+ :where(.pf-theme-dark) .pf-c-alert {
1540
+ --pf-c-alert--BackgroundColor: var(--pf-global--palette--black-600);
1541
+ --pf-c-alert__title--Color: var(--pf-global--default-color--200);
1542
+ --pf-c-alert--m-success__title--Color: var(--pf-global--success-color--100);
1543
+ --pf-c-alert--m-danger__title--Color: var(--pf-global--danger-color--100);
1544
+ --pf-c-alert--m-warning__title--Color: var(--pf-global--warning-color--100);
1545
+ --pf-c-alert--m-info__title--Color: var(--pf-global--info-color--100);
1546
+ --pf-c-alert--m-inline--BackgroundColor: var(--pf-global--palette--black-600);
1547
+ --pf-c-alert--m-inline--m-success--BackgroundColor: var(--pf-global--palette--black-600);
1548
+ --pf-c-alert--m-inline--m-danger--BackgroundColor: var(--pf-global--palette--black-600);
1549
+ --pf-c-alert--m-inline--m-warning--BackgroundColor: var(--pf-global--palette--black-600);
1550
+ --pf-c-alert--m-inline--m-info--BackgroundColor: var(--pf-global--palette--black-600);
1551
+ }
1552
+
1553
+ .pf-c-back-to-top {
1554
+ --pf-c-back-to-top--Right: var(--pf-global--spacer--2xl);
1555
+ --pf-c-back-to-top--Bottom: var(--pf-global--spacer--lg);
1556
+ --pf-c-back-to-top--md--Bottom: var(--pf-global--spacer--2xl);
1557
+ --pf-c-back-to-top--c-button--FontSize: var(--pf-global--FontSize--xs);
1558
+ --pf-c-back-to-top--c-button--BorderRadius: var(--pf-global--BorderRadius--lg);
1559
+ --pf-c-back-to-top--c-button--PaddingTop: var(--pf-global--spacer--xs);
1560
+ --pf-c-back-to-top--c-button--PaddingRight: var(--pf-global--spacer--sm);
1561
+ --pf-c-back-to-top--c-button--PaddingBottom: var(--pf-global--spacer--xs);
1562
+ --pf-c-back-to-top--c-button--PaddingLeft: var(--pf-global--spacer--sm);
1563
+ --pf-c-back-to-top--c-button--BoxShadow: var(--pf-global--BoxShadow--lg-bottom);
1564
+ position: absolute;
1565
+ right: var(--pf-c-back-to-top--Right);
1566
+ bottom: var(--pf-c-back-to-top--Bottom);
1567
+ }
1568
+
1569
+ @media (min-width: 768px) {
1570
+ .pf-c-back-to-top {
1571
1571
  --pf-c-back-to-top--Bottom: var(--pf-c-back-to-top--md--Bottom);
1572
1572
  }
1573
1573
  }
@@ -3424,89 +3424,6 @@ label.pf-c-check, .pf-c-check__label,
3424
3424
  --pf-c-chip--m-draggable--BackgroundColor: var(--pf-global--palette--black-600);
3425
3425
  }
3426
3426
 
3427
- .pf-c-chip-group {
3428
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
3429
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
3430
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
3431
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
3432
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
3433
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
3434
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
3435
- }
3436
-
3437
- .pf-c-chip-group {
3438
- color: var(--pf-global--Color--100);
3439
- --pf-c-chip-group__list--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
3440
- --pf-c-chip-group__list--MarginRight: calc(var(--pf-global--spacer--xs) * -1);
3441
- --pf-c-chip-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
3442
- --pf-c-chip-group--m-category--PaddingRight: var(--pf-global--spacer--xs);
3443
- --pf-c-chip-group--m-category--PaddingBottom: var(--pf-global--spacer--xs);
3444
- --pf-c-chip-group--m-category--PaddingLeft: var(--pf-global--spacer--sm);
3445
- --pf-c-chip-group--m-category--BorderRadius: var(--pf-global--BorderRadius--sm);
3446
- --pf-c-chip-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--200);
3447
- --pf-c-chip-group__label--MarginRight: var(--pf-global--spacer--sm);
3448
- --pf-c-chip-group__label--FontSize: var(--pf-global--FontSize--sm);
3449
- --pf-c-chip-group__label--MaxWidth: 18ch;
3450
- --pf-c-chip-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
3451
- --pf-c-chip-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
3452
- --pf-c-chip-group__list-item--MarginRight: var(--pf-global--spacer--xs);
3453
- --pf-c-chip-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
3454
- max-width: 100%;
3455
- }
3456
-
3457
- .pf-c-chip-group.pf-m-category {
3458
- padding-top: var(--pf-c-chip-group--m-category--PaddingTop);
3459
- padding-right: var(--pf-c-chip-group--m-category--PaddingRight);
3460
- padding-bottom: var(--pf-c-chip-group--m-category--PaddingBottom);
3461
- padding-left: var(--pf-c-chip-group--m-category--PaddingLeft);
3462
- background-color: var(--pf-c-chip-group--m-category--BackgroundColor);
3463
- border-radius: var(--pf-c-chip-group--m-category--BorderRadius);
3464
- }
3465
-
3466
- .pf-c-chip-group__main {
3467
- display: flex;
3468
- flex: 1;
3469
- flex-wrap: wrap;
3470
- align-items: baseline;
3471
- min-width: 0;
3472
- }
3473
-
3474
- .pf-c-chip-group__list {
3475
- margin-right: var(--pf-c-chip-group__list--MarginRight);
3476
- margin-bottom: var(--pf-c-chip-group__list--MarginBottom);
3477
- }
3478
-
3479
- .pf-c-chip-group,
3480
- .pf-c-chip-group__list {
3481
- display: inline-flex;
3482
- flex-wrap: wrap;
3483
- align-items: center;
3484
- min-width: 0;
3485
- }
3486
-
3487
- .pf-c-chip-group__list-item {
3488
- display: inline-flex;
3489
- min-width: 0;
3490
- margin-right: var(--pf-c-chip-group__list-item--MarginRight);
3491
- margin-bottom: var(--pf-c-chip-group__list-item--MarginBottom);
3492
- }
3493
-
3494
- .pf-c-chip-group__label {
3495
- overflow: hidden;
3496
- text-overflow: ellipsis;
3497
- white-space: nowrap;
3498
- max-width: var(--pf-c-chip-group__label--MaxWidth);
3499
- margin-right: var(--pf-c-chip-group__label--MarginRight);
3500
- font-size: var(--pf-c-chip-group__label--FontSize);
3501
- }
3502
-
3503
- .pf-c-chip-group__close {
3504
- display: flex;
3505
- align-self: flex-start;
3506
- margin-top: var(--pf-c-chip-group__close--MarginTop);
3507
- margin-bottom: var(--pf-c-chip-group__close--MarginBottom);
3508
- }
3509
-
3510
3427
  .pf-c-clipboard-copy {
3511
3428
  --pf-c-clipboard-copy__toggle-icon--Transition: .2s ease-in 0s;
3512
3429
  --pf-c-clipboard-copy--m-expanded__toggle-icon--Rotate: 90deg;
@@ -3989,6 +3906,86 @@ label.pf-c-check, .pf-c-check__label,
3989
3906
  border-top: 1px solid var(--pf-global--BorderColor--300);
3990
3907
  }
3991
3908
 
3909
+ .pf-c-data-list {
3910
+ --pf-global--Color--100: var(--pf-global--Color--dark-100);
3911
+ --pf-global--Color--200: var(--pf-global--Color--dark-200);
3912
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
3913
+ --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
3914
+ --pf-global--link--Color: var(--pf-global--link--Color--dark);
3915
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
3916
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
3917
+ }
3918
+
3919
+ .pf-c-data-list__item-action {
3920
+ --pf-hidden-visible--visible--Visibility: visible;
3921
+ --pf-hidden-visible--hidden--Display: none;
3922
+ --pf-hidden-visible--hidden--Visibility: hidden;
3923
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
3924
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
3925
+ display: var(--pf-hidden-visible--Display);
3926
+ visibility: var(--pf-hidden-visible--Visibility);
3927
+ }
3928
+
3929
+ .pf-m-hidden.pf-c-data-list__item-action {
3930
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
3931
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
3932
+ }
3933
+
3934
+ @media screen and (min-width: 576px) {
3935
+ .pf-m-hidden-on-sm.pf-c-data-list__item-action {
3936
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
3937
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
3938
+ }
3939
+
3940
+ .pf-m-visible-on-sm.pf-c-data-list__item-action {
3941
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
3942
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
3943
+ }
3944
+ }
3945
+ @media screen and (min-width: 768px) {
3946
+ .pf-m-hidden-on-md.pf-c-data-list__item-action {
3947
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
3948
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
3949
+ }
3950
+
3951
+ .pf-m-visible-on-md.pf-c-data-list__item-action {
3952
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
3953
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
3954
+ }
3955
+ }
3956
+ @media screen and (min-width: 992px) {
3957
+ .pf-m-hidden-on-lg.pf-c-data-list__item-action {
3958
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
3959
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
3960
+ }
3961
+
3962
+ .pf-m-visible-on-lg.pf-c-data-list__item-action {
3963
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
3964
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
3965
+ }
3966
+ }
3967
+ @media screen and (min-width: 1200px) {
3968
+ .pf-m-hidden-on-xl.pf-c-data-list__item-action {
3969
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
3970
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
3971
+ }
3972
+
3973
+ .pf-m-visible-on-xl.pf-c-data-list__item-action {
3974
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
3975
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
3976
+ }
3977
+ }
3978
+ @media screen and (min-width: 1450px) {
3979
+ .pf-m-hidden-on-2xl.pf-c-data-list__item-action {
3980
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
3981
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
3982
+ }
3983
+
3984
+ .pf-m-visible-on-2xl.pf-c-data-list__item-action {
3985
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
3986
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
3987
+ }
3988
+ }
3992
3989
  @media screen and (min-width: 768px) {
3993
3990
  .pf-c-data-list:not([class*=pf-m-grid]) {
3994
3991
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
@@ -4465,503 +4462,448 @@ label.pf-c-check, .pf-c-check__label,
4465
4462
  overflow-y: visible;
4466
4463
  }
4467
4464
  }
4468
- .pf-c-date-picker {
4469
- --pf-c-date-picker--m-top__calendar--Top: 0;
4470
- --pf-c-date-picker--m-top__calendar--TranslateY: calc(-100% - var(--pf-global--spacer--xs));
4471
- --pf-c-date-picker__helper-text--MarginTop: var(--pf-global--spacer--xs);
4472
- --pf-c-date-picker__helper-text--FontSize: var(--pf-global--FontSize--sm);
4473
- --pf-c-date-picker__helper-text--Color: var(--pf-global--Color--100);
4474
- --pf-c-date-picker__helper-text--m-error--Color: var(--pf-global--danger-color--100);
4475
- --pf-c-date-picker__input--c-form-control--Width: calc(var(--pf-c-date-picker__input--c-form-control--width-chars) * 1ch + var(--pf-c-date-picker__input--c-form-control--width-base));
4476
- --pf-c-date-picker__input--c-form-control--width-base: calc(var(--pf-global--spacer--xl) + var(--pf-global--spacer--sm));
4477
- --pf-c-date-picker__input--c-form-control--width-chars: 10;
4478
- --pf-c-date-picker__calendar--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
4479
- --pf-c-date-picker__calendar--BoxShadow: var(--pf-global--BoxShadow--md);
4480
- --pf-c-date-picker__calendar--ZIndex: var(--pf-global--ZIndex--sm);
4481
- --pf-c-date-picker__calendar--Top: calc(100% + var(--pf-global--spacer--xs));
4482
- --pf-c-date-picker__calendar--Right: auto;
4483
- --pf-c-date-picker__calendar--Left: 0;
4484
- --pf-c-date-picker__calendar--m-align-right--Right: 0;
4485
- --pf-c-date-picker__calendar--m-align-right--Left: auto;
4486
- position: relative;
4487
- display: inline-block;
4488
- }
4489
-
4490
- .pf-c-date-picker__helper-text {
4491
- margin-top: var(--pf-c-date-picker__helper-text--MarginTop);
4492
- font-size: var(--pf-c-date-picker__helper-text--FontSize);
4493
- color: var(--pf-c-date-picker__helper-text--Color);
4494
- }
4495
-
4496
- .pf-c-date-picker__helper-text.pf-m-error {
4497
- --pf-c-date-picker__helper-text--Color: var(--pf-c-date-picker__helper-text--m-error--Color);
4498
- }
4499
-
4500
- .pf-c-date-picker__input .pf-c-form-control {
4501
- width: var(--pf-c-date-picker__input--c-form-control--Width);
4502
- }
4503
-
4504
- .pf-c-date-picker__calendar {
4505
- position: absolute;
4506
- top: var(--pf-c-date-picker__calendar--Top);
4507
- right: var(--pf-c-date-picker__calendar--Right);
4508
- left: var(--pf-c-date-picker__calendar--Left);
4509
- z-index: var(--pf-c-date-picker__calendar--ZIndex);
4510
- background-color: var(--pf-c-date-picker__calendar--BackgroundColor);
4511
- box-shadow: var(--pf-c-date-picker__calendar--BoxShadow);
4512
- }
4513
-
4514
- .pf-c-date-picker__calendar.pf-m-align-right {
4515
- --pf-c-date-picker__calendar--Right: var(--pf-c-date-picker__calendar--m-align-right--Right);
4516
- --pf-c-date-picker__calendar--Left: var(--pf-c-date-picker__calendar--m-align-right--Left);
4517
- }
4518
-
4519
- .pf-c-date-picker.pf-m-top .pf-c-date-picker__calendar {
4520
- --pf-c-date-picker__calendar--Top: var(--pf-c-date-picker--m-top__calendar--Top);
4521
- transform: translateY(var(--pf-c-date-picker--m-top__calendar--TranslateY));
4522
- }
4523
-
4524
- :where(.pf-theme-dark) .pf-c-date-picker {
4525
- --pf-c-date-picker__calendar--BackgroundColor: var(--pf-global--BackgroundColor--300);
4526
- --pf-c-date-picker__calendar--Top: 100%;
4527
- }
4528
-
4529
- .pf-c-description-list {
4530
- --pf-c-description-list--RowGap: var(--pf-global--gutter--md);
4531
- --pf-c-description-list--ColumnGap: var(--pf-global--spacer--lg);
4532
- --pf-c-description-list--GridTemplateColumns--count: 1;
4533
- --pf-c-description-list--GridTemplateColumns--width: 1fr;
4534
- --pf-c-description-list--GridTemplateColumns--min: 0;
4535
- --pf-c-description-list--GridTemplateColumns: repeat(var(--pf-c-description-list--GridTemplateColumns--count), var(--pf-c-description-list--GridTemplateColumns--width));
4536
- --pf-c-description-list__group--RowGap: var(--pf-global--spacer--sm);
4537
- --pf-c-description-list__group--ColumnGap: var(--pf-global--spacer--sm);
4538
- --pf-c-description-list__group--GridTemplateColumns: auto;
4539
- --pf-c-description-list__group--GridTemplateRows: auto 1fr;
4540
- --pf-c-description-list__group--GridColumn: auto;
4541
- --pf-c-description-list--m-compact--RowGap: var(--pf-global--gutter);
4542
- --pf-c-description-list--m-compact--ColumnGap: var(--pf-global--spacer--sm);
4543
- --pf-c-description-list__term--Display: inline;
4544
- --pf-c-description-list__term--sm--Display: flex;
4545
- --pf-c-description-list__term--FontWeight: var(--pf-global--FontWeight--bold);
4546
- --pf-c-description-list__term--FontSize: var(--pf-global--FontSize--sm);
4547
- --pf-c-description-list__term--LineHeight: var(--pf-global--LineHeight--sm);
4548
- --pf-c-description-list__term-icon--MinWidth: var(--pf-global--icon--FontSize--sm);
4549
- --pf-c-description-list__term-icon--MarginRight: var(--pf-global--spacer--sm);
4550
- --pf-c-description-list__term-icon--Color: var(--pf-global--icon--Color--light);
4551
- --pf-c-description-list--m-vertical__group--GridTemplateColumns: repeat(var(--pf-c-description-list--GridTemplateColumns--count));
4552
- --pf-c-description-list--m-vertical__group--GridTemplateRows: auto 1fr;
4553
- --pf-c-description-list--m-horizontal__term--width: 12ch;
4554
- --pf-c-description-list--m-horizontal__description--width: minmax(10ch, auto);
4555
- --pf-c-description-list--m-horizontal__group--GridTemplateColumns: var(--pf-c-description-list__term--width) var(--pf-c-description-list--m-horizontal__description--width);
4556
- --pf-c-description-list--m-horizontal__group--GridTemplateRows: auto;
4557
- --pf-c-description-list--m-1-col--GridTemplateColumns--count: 1;
4558
- --pf-c-description-list--m-2-col--GridTemplateColumns--count: 2;
4559
- --pf-c-description-list--m-3-col--GridTemplateColumns--count: 3;
4560
- --pf-c-description-list--m-auto-fit--GridTemplateColumns--min: 15.625rem;
4561
- --pf-c-description-list--m-auto-fit--GridTemplateColumns--minmax--min: var(--pf-c-description-list--m-auto-fit--GridTemplateColumns--min);
4562
- --pf-c-description-list__text--m-help-text--TextDecorationColor: var(--pf-global--BorderColor--200);
4563
- --pf-c-description-list__text--m-help-text--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
4564
- --pf-c-description-list__text--m-help-text--TextDecorationOffset: 0.25rem;
4565
- --pf-c-description-list__text--m-help-text--hover--TextDecorationColor: var(--pf-global--Color--100);
4566
- --pf-c-description-list__text--m-help-text--focus--TextDecorationColor: var(--pf-global--Color--100);
4567
- --pf-c-description-list--m-display-lg__description--FontSize: var(--pf-global--FontSize--lg);
4568
- --pf-c-description-list--m-display-2xl__description--FontSize: var(--pf-global--FontSize--2xl);
4569
- display: grid;
4570
- align-items: baseline;
4571
- row-gap: var(--pf-c-description-list--RowGap);
4572
- column-gap: var(--pf-c-description-list--ColumnGap);
4573
- grid-template-columns: var(--pf-c-description-list--GridTemplateColumns);
4574
- }
4575
-
4576
- @media screen and (min-width: 576px) {
4577
- .pf-c-description-list {
4578
- --pf-c-description-list__term--Display: var(--pf-c-description-list__term--sm--Display);
4579
- }
4580
- }
4581
- .pf-c-description-list[class*=pf-m-horizontal] {
4582
- --pf-c-description-list__term--width: var(--pf-c-description-list--m-horizontal__term--width);
4465
+ .pf-c-data-list {
4466
+ --pf-c-data-list--FontSize: 1em;
4467
+ --pf-c-data-list--LineHeight: var(--pf-global--LineHeight--md);
4468
+ --pf-c-data-list--BorderTopColor: var(--pf-global--BorderColor--300);
4469
+ --pf-c-data-list--BorderTopWidth: var(--pf-global--spacer--sm);
4470
+ --pf-c-data-list--sm--BorderTopWidth: var(--pf-global--BorderWidth--sm);
4471
+ --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);
4472
+ --pf-c-data-list__item--BackgroundColor: var(--pf-global--BackgroundColor--100);
4473
+ --pf-c-data-list__item--m-selected--ZIndex: var(--pf-global--ZIndex--xs);
4474
+ --pf-c-data-list__item--m-expanded--before--BackgroundColor: var(--pf-global--active-color--100);
4475
+ --pf-c-data-list__item--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
4476
+ --pf-c-data-list__item--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4477
+ --pf-c-data-list__item--m-selectable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
4478
+ --pf-c-data-list__item--m-selectable--hover--ZIndex: calc(var(--pf-c-data-list__item--m-selected--ZIndex) + 1);
4479
+ --pf-c-data-list__item--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4480
+ --pf-c-data-list__item--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4481
+ --pf-c-data-list__item--m-selectable--active--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4482
+ --pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor: var(--pf-global--active-color--300);
4483
+ --pf-c-data-list__item--BorderBottomColor: var(--pf-global--BorderColor--300);
4484
+ --pf-c-data-list__item--BorderBottomWidth: 0.5rem;
4485
+ --pf-c-data-list__item--m-selectable--hover--item--BorderTopColor: var(--pf-c-data-list__item--BorderBottomColor);
4486
+ --pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth: var(--pf-c-data-list__item--BorderBottomWidth);
4487
+ --pf-c-data-list__item--sm--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
4488
+ --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
4489
+ --pf-c-data-list__item--before--BackgroundColor: transparent;
4490
+ --pf-c-data-list__item--before--Width: var(--pf-global--BorderWidth--lg);
4491
+ --pf-c-data-list__item--before--Transition: var(--pf-global--Transition);
4492
+ --pf-c-data-list__item--before--Top: 0;
4493
+ --pf-c-data-list__item--before--sm--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
4494
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-global--spacer--md);
4495
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-global--spacer--md);
4496
+ --pf-c-data-list__item-row--xl--PaddingRight: var(--pf-global--spacer--lg);
4497
+ --pf-c-data-list__item-row--xl--PaddingLeft: var(--pf-global--spacer--lg);
4498
+ --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-global--spacer--lg);
4499
+ --pf-c-data-list__cell--PaddingTop: var(--pf-global--spacer--lg);
4500
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-global--spacer--lg);
4501
+ --pf-c-data-list__cell--MarginRight: var(--pf-global--spacer--xl);
4502
+ --pf-c-data-list__cell--md--PaddingBottom: 0;
4503
+ --pf-c-data-list__cell--m-icon--MarginRight: var(--pf-global--spacer--md);
4504
+ --pf-c-data-list__cell--cell--PaddingTop: 0;
4505
+ --pf-c-data-list__cell--cell--md--PaddingTop: var(--pf-global--spacer--lg);
4506
+ --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--lg);
4507
+ --pf-c-data-list--cell--MinWidth: initial;
4508
+ --pf-c-data-list--cell--Overflow: visible;
4509
+ --pf-c-data-list--cell--TextOverflow: clip;
4510
+ --pf-c-data-list--cell--WhiteSpace: normal;
4511
+ --pf-c-data-list--cell--WordBreak: normal;
4512
+ --pf-c-data-list--cell--m-truncate--MinWidth: 5ch;
4513
+ --pf-c-data-list__toggle--MarginLeft: calc(var(--pf-global--spacer--sm) * -1);
4514
+ --pf-c-data-list__toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
4515
+ --pf-c-data-list__toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
4516
+ --pf-c-data-list__toggle-icon--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
4517
+ --pf-c-data-list__toggle-icon--Transition: .2s ease-in 0s;
4518
+ --pf-c-data-list__toggle-icon--Rotate: 0;
4519
+ --pf-c-data-list__item--m-expanded__toggle-icon--Rotate: 90deg;
4520
+ --pf-c-data-list__item-draggable-button--PaddingLeft: var(--pf-global--spacer--md);
4521
+ --pf-c-data-list__item-draggable-button--PaddingRight: var(--pf-global--spacer--md);
4522
+ --pf-c-data-list__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--lg) * -1);
4523
+ --pf-c-data-list__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--lg) * -1);
4524
+ --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-global--spacer--lg);
4525
+ --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-global--spacer--lg);
4526
+ --pf-c-data-list__item-draggable-button--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
4527
+ --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-global--icon--Color--light);
4528
+ --pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color: var(--pf-global--disabled-color--200);
4529
+ --pf-c-data-list__item-draggable-button--hover__draggable-icon--Color: var(--pf-global--icon--Color--dark);
4530
+ --pf-c-data-list__item-draggable-button--focus__draggable-icon--Color: var(--pf-global--icon--Color--dark);
4531
+ --pf-c-data-list__item--m-ghost-row--after--BackgroundColor: var(--pf-global--BackgroundColor--100);
4532
+ --pf-c-data-list__item--m-ghost-row--after--Opacity: .6;
4533
+ --pf-c-data-list__item-control--PaddingTop: var(--pf-global--spacer--lg);
4534
+ --pf-c-data-list__item-control--PaddingBottom: var(--pf-global--spacer--lg);
4535
+ --pf-c-data-list__item-control--MarginRight: var(--pf-global--spacer--md);
4536
+ --pf-c-data-list__item-control--md--MarginRight: var(--pf-global--spacer--xl);
4537
+ --pf-c-data-list__item-control--not-last-child--MarginRight: var(--pf-global--spacer--md);
4538
+ --pf-c-data-list__check--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
4539
+ --pf-c-data-list__check--MarginTop: -0.0625rem;
4540
+ --pf-c-data-list__item-action--Display: flex;
4541
+ --pf-c-data-list__item-action--PaddingTop: var(--pf-global--spacer--lg);
4542
+ --pf-c-data-list__item-action--PaddingBottom: var(--pf-global--spacer--lg);
4543
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-global--spacer--md);
4544
+ --pf-c-data-list__item-action--md--MarginLeft: var(--pf-global--spacer--xl);
4545
+ --pf-c-data-list__item-action--not-last-child--MarginRight: var(--pf-global--spacer--md);
4546
+ --pf-c-data-list__item-action__action--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
4547
+ --pf-c-data-list__action--MarginTop: var(--pf-c-data-list__item-action__action--MarginTop);
4548
+ --pf-c-data-list__item-action__action--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
4549
+ --pf-c-data-list__expandable-content--BorderTopWidth: var(--pf-global--BorderWidth--sm);
4550
+ --pf-c-data-list__expandable-content--BorderTopColor: var(--pf-global--BorderColor--100);
4551
+ --pf-c-data-list__expandable-content--MarginRight: calc(var(--pf-c-data-list__expandable-content-body--PaddingRight) * -1);
4552
+ --pf-c-data-list__expandable-content--MarginLeft: calc(var(--pf-c-data-list__expandable-content-body--PaddingLeft) * -1);
4553
+ --pf-c-data-list__expandable-content--MaxHeight: 37.5rem;
4554
+ --pf-c-data-list__expandable-content--before--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
4555
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-global--spacer--md);
4556
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-global--spacer--md);
4557
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-global--spacer--md);
4558
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-global--spacer--md);
4559
+ --pf-c-data-list__expandable-content-body--md--PaddingTop: var(--pf-global--spacer--lg);
4560
+ --pf-c-data-list__expandable-content-body--xl--PaddingRight: var(--pf-global--spacer--lg);
4561
+ --pf-c-data-list__expandable-content-body--md--PaddingBottom: var(--pf-global--spacer--lg);
4562
+ --pf-c-data-list__expandable-content-body--xl--PaddingLeft: var(--pf-global--spacer--lg);
4563
+ --pf-c-data-list--m-compact--FontSize: var(--pf-global--FontSize--sm);
4564
+ --pf-c-data-list--m-compact--LineHeight: var(--pf-global--LineHeight--sm);
4565
+ --pf-c-data-list--m-compact__check--FontSize: var(--pf-global--FontSize--md);
4566
+ --pf-c-data-list--m-compact__cell--PaddingTop: var(--pf-global--spacer--sm);
4567
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-global--spacer--sm);
4568
+ --pf-c-data-list--m-compact__cell--md--PaddingBottom: 0;
4569
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: 0;
4570
+ --pf-c-data-list--m-compact__cell-cell--md--PaddingTop: var(--pf-global--spacer--sm);
4571
+ --pf-c-data-list--m-compact__cell--cell--MarginRight: var(--pf-global--spacer--md);
4572
+ --pf-c-data-list--m-compact__item-control--PaddingTop: var(--pf-global--spacer--sm);
4573
+ --pf-c-data-list--m-compact__item-control--PaddingBottom: var(--pf-global--spacer--sm);
4574
+ --pf-c-data-list--m-compact__item-control--MarginRight: var(--pf-global--spacer--md);
4575
+ --pf-c-data-list--m-compact__item-action--PaddingTop: var(--pf-global--spacer--sm);
4576
+ --pf-c-data-list--m-compact__item-action--PaddingBottom: var(--pf-global--spacer--sm);
4577
+ --pf-c-data-list--m-compact__item-action--MarginLeft: var(--pf-global--spacer--md);
4578
+ --pf-c-data-list--m-compact__item-action__action--MarginTop: calc(var(--pf-c-data-list--m-compact__item-action--PaddingTop) * -1);
4579
+ --pf-c-data-list--m-compact__item-action__action--MarginBottom: calc(var(--pf-c-data-list--m-compact__item-action--PaddingBottom) * -1);
4580
+ --pf-c-data-list--m-compact__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
4581
+ --pf-c-data-list--m-compact__item-content--PaddingBottom: var(--pf-global--spacer--sm);
4582
+ --pf-c-data-list--m-compact__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
4583
+ --pf-c-data-list--m-compact__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--sm) * -1);
4584
+ --pf-c-data-list--m-compact__item-draggable-button--PaddingTop: var(--pf-global--spacer--sm);
4585
+ --pf-c-data-list--m-compact__item-draggable-button--PaddingBottom: var(--pf-global--spacer--sm);
4586
+ --pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--sm);
4587
+ color: var(--pf-global--Color--100);
4588
+ font-size: var(--pf-c-data-list--FontSize);
4589
+ line-height: var(--pf-c-data-list--LineHeight);
4590
+ overflow-wrap: break-word;
4591
+ list-style-type: disc;
4592
+ border-top: var(--pf-c-data-list--BorderTopWidth) solid var(--pf-c-data-list--BorderTopColor);
4583
4593
  }
4584
4594
 
4585
- @media (min-width: 576px) {
4586
- .pf-c-description-list[class*=pf-m-horizontal] {
4587
- --pf-c-description-list__term--width: var(--pf-c-description-list--m-horizontal__term--width-on-sm, var(--pf-c-description-list--m-horizontal__term--width));
4588
- }
4589
- }
4590
- @media (min-width: 768px) {
4591
- .pf-c-description-list[class*=pf-m-horizontal] {
4592
- --pf-c-description-list__term--width: var(--pf-c-description-list--m-horizontal__term--width-on-md, var(--pf-c-description-list--m-horizontal__term--width-on-sm, var(--pf-c-description-list--m-horizontal__term--width)));
4593
- }
4594
- }
4595
- @media (min-width: 992px) {
4596
- .pf-c-description-list[class*=pf-m-horizontal] {
4597
- --pf-c-description-list__term--width: var(--pf-c-description-list--m-horizontal__term--width-on-lg, var(--pf-c-description-list--m-horizontal__term--width-on-md, var(--pf-c-description-list--m-horizontal__term--width-on-sm, var(--pf-c-description-list--m-horizontal__term--width))));
4595
+ @media screen and (min-width: 576px) {
4596
+ .pf-c-data-list {
4597
+ --pf-c-data-list--BorderTopColor: var(--pf-c-data-list--sm--BorderTopColor);
4598
+ --pf-c-data-list--BorderTopWidth: var(--pf-c-data-list--sm--BorderTopWidth);
4598
4599
  }
4599
4600
  }
4600
- @media (min-width: 1200px) {
4601
- .pf-c-description-list[class*=pf-m-horizontal] {
4602
- --pf-c-description-list__term--width: var(--pf-c-description-list--m-horizontal__term--width-on-xl, var(--pf-c-description-list--m-horizontal__term--width-on-lg, var(--pf-c-description-list--m-horizontal__term--width-on-md, var(--pf-c-description-list--m-horizontal__term--width-on-sm, var(--pf-c-description-list--m-horizontal__term--width)))));
4601
+ @media screen and (min-width: 576px) {
4602
+ .pf-c-data-list {
4603
+ --pf-c-data-list__item--BorderBottomWidth: var(--pf-c-data-list__item--sm--BorderBottomWidth);
4604
+ --pf-c-data-list__item--BorderBottomColor: var(--pf-c-data-list__item--sm--BorderBottomColor);
4603
4605
  }
4604
4606
  }
4605
- @media (min-width: 1450px) {
4606
- .pf-c-description-list[class*=pf-m-horizontal] {
4607
- --pf-c-description-list__term--width: var(--pf-c-description-list--m-horizontal__term--width-on-2xl, var(--pf-c-description-list--m-horizontal__term--width-on-xl, var(--pf-c-description-list--m-horizontal__term--width-on-lg, var(--pf-c-description-list--m-horizontal__term--width-on-md, var(--pf-c-description-list--m-horizontal__term--width-on-sm, var(--pf-c-description-list--m-horizontal__term--width))))));
4607
+ @media (min-width: 576px) {
4608
+ .pf-c-data-list {
4609
+ --pf-c-data-list__item--before--Top: var(--pf-c-data-list__item--before--sm--Top);
4608
4610
  }
4609
4611
  }
4610
- .pf-c-description-list.pf-m-inline-grid {
4611
- display: inline-grid;
4612
+ .pf-c-data-list.pf-m-compact {
4613
+ --pf-c-data-list__check--FontSize: var(--pf-c-data-list--m-compact__check--FontSize);
4614
+ --pf-c-data-list__action--MarginTop: var(--pf-c-data-list--m-compact__action--MarginTop);
4615
+ --pf-c-data-list--FontSize: var(--pf-c-data-list--m-compact--FontSize);
4616
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list--m-compact__item-action--MarginLeft);
4617
+ --pf-c-data-list__item-action--PaddingTop: var(--pf-c-data-list--m-compact__item-action--PaddingTop);
4618
+ --pf-c-data-list__item-action--PaddingBottom: var(--pf-c-data-list--m-compact__item-action--PaddingBottom);
4619
+ --pf-c-data-list__item-action__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
4620
+ --pf-c-data-list__item-action__action--MarginBottom: var(--pf-c-data-list--m-compact__item-action__action--MarginBottom);
4621
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list--m-compact__item-control--MarginRight);
4622
+ --pf-c-data-list__item-control--PaddingTop: var(--pf-c-data-list--m-compact__item-control--PaddingTop);
4623
+ --pf-c-data-list__item-control--PaddingBottom: var(--pf-c-data-list--m-compact__item-control--PaddingBottom);
4624
+ --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-c-data-list--m-compact__item-content--PaddingBottom);
4625
+ --pf-c-data-list__item-draggable-button--MarginTop: var(--pf-c-data-list--m-compact__item-draggable-button--MarginTop);
4626
+ --pf-c-data-list__item-draggable-button--MarginBottom: var(--pf-c-data-list--m-compact__item-draggable-button--MarginBottom);
4627
+ --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingTop);
4628
+ --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingBottom);
4629
+ --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop);
4630
+ font-size: var(--pf-c-data-list--m-compact--FontSize);
4612
4631
  }
4613
4632
 
4614
- .pf-c-description-list.pf-m-auto-column-widths {
4615
- --pf-c-description-list--GridTemplateColumns--width: minmax(8ch, max-content);
4633
+ .pf-c-data-list.pf-m-compact .pf-c-data-list__cell {
4634
+ --pf-c-data-list__cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--PaddingTop);
4635
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--PaddingBottom);
4636
+ --pf-c-data-list__cell--MarginRight: var(--pf-c-data-list--m-compact__cell--cell--MarginRight);
4637
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--PaddingTop);
4616
4638
  }
4617
4639
 
4618
- .pf-c-description-list.pf-m-auto-fit {
4619
- grid-template-columns: repeat(auto-fit, minmax(var(--pf-c-description-list--m-auto-fit--GridTemplateColumns--minmax--min), 1fr));
4620
- --pf-c-description-list--GridTemplateColumns--minmax--min: var(--pf-c-description-list--GridTemplateColumns--min);
4640
+ .pf-c-data-list.pf-m-compact .pf-c-data-list__check {
4641
+ font-size: var(--pf-c-data-list--m-compact__check--FontSize);
4621
4642
  }
4622
4643
 
4623
- @media (min-width: 576px) {
4624
- .pf-c-description-list.pf-m-auto-fit {
4625
- --pf-c-description-list--GridTemplateColumns--minmax--min: var(--pf-c-description-list--GridTemplateColumns--min-on-sm, var(--pf-c-description-list--GridTemplateColumns--min));
4626
- }
4627
- }
4628
- @media (min-width: 768px) {
4629
- .pf-c-description-list.pf-m-auto-fit {
4630
- --pf-c-description-list--GridTemplateColumns--minmax--min: var(--pf-c-description-list--GridTemplateColumns--min-on-md, var(--pf-c-description-list--GridTemplateColumns--min-on-sm, var(--pf-c-description-list--GridTemplateColumns--min)));
4631
- }
4632
- }
4633
- @media (min-width: 992px) {
4634
- .pf-c-description-list.pf-m-auto-fit {
4635
- --pf-c-description-list--GridTemplateColumns--minmax--min: var(--pf-c-description-list--GridTemplateColumns--min-on-lg, var(--pf-c-description-list--GridTemplateColumns--min-on-md, var(--pf-c-description-list--GridTemplateColumns--min-on-sm, var(--pf-c-description-list--GridTemplateColumns--min))));
4636
- }
4637
- }
4638
- @media (min-width: 1200px) {
4639
- .pf-c-description-list.pf-m-auto-fit {
4640
- --pf-c-description-list--GridTemplateColumns--minmax--min: var(--pf-c-description-list--GridTemplateColumns--min-on-xl, var(--pf-c-description-list--GridTemplateColumns--min-on-lg, var(--pf-c-description-list--GridTemplateColumns--min-on-md, var(--pf-c-description-list--GridTemplateColumns--min-on-sm, var(--pf-c-description-list--GridTemplateColumns--min)))));
4641
- }
4642
- }
4643
- @media (min-width: 1450px) {
4644
- .pf-c-description-list.pf-m-auto-fit {
4645
- --pf-c-description-list--GridTemplateColumns--minmax--min: var(--pf-c-description-list--GridTemplateColumns--min-on-2xl, var(--pf-c-description-list--GridTemplateColumns--min-on-xl, var(--pf-c-description-list--GridTemplateColumns--min-on-lg, var(--pf-c-description-list--GridTemplateColumns--min-on-md, var(--pf-c-description-list--GridTemplateColumns--min-on-sm, var(--pf-c-description-list--GridTemplateColumns--min))))));
4646
- }
4644
+ .pf-c-data-list.pf-m-drag-over {
4645
+ overflow-anchor: none;
4647
4646
  }
4648
- .pf-c-description-list.pf-m-compact {
4649
- --pf-c-description-list--RowGap: var(--pf-c-description-list--m-compact--RowGap);
4650
- --pf-c-description-list--ColumnGap: var(--pf-c-description-list--m-compact--ColumnGap);
4647
+
4648
+ .pf-c-data-list.pf-m-truncate,
4649
+ .pf-c-data-list__item-row.pf-m-truncate,
4650
+ .pf-c-data-list__cell.pf-m-truncate,
4651
+ .pf-c-data-list__text.pf-m-truncate {
4652
+ --pf-c-data-list--cell--MinWidth: var(--pf-c-data-list--cell--m-truncate--MinWidth);
4653
+ --pf-c-data-list--cell--Overflow: hidden;
4654
+ --pf-c-data-list--cell--TextOverflow: ellipsis;
4655
+ --pf-c-data-list--cell--WhiteSpace: nowrap;
4651
4656
  }
4652
4657
 
4653
- .pf-c-description-list.pf-m-fluid {
4654
- --pf-c-description-list--m-horizontal__term--width: fit-content(20ch);
4658
+ .pf-c-data-list.pf-m-break-word,
4659
+ .pf-c-data-list__item-row.pf-m-break-word,
4660
+ .pf-c-data-list__cell.pf-m-break-word,
4661
+ .pf-c-data-list__text.pf-m-break-word {
4662
+ --pf-c-data-list--cell--WordBreak: break-word;
4655
4663
  }
4656
4664
 
4657
- .pf-c-description-list.pf-m-fill-columns {
4658
- display: block;
4659
- column-count: var(--pf-c-description-list--GridTemplateColumns--count);
4660
- margin-bottom: calc(var(--pf-c-description-list--RowGap) * -1);
4665
+ .pf-c-data-list.pf-m-nowrap,
4666
+ .pf-c-data-list__item-row.pf-m-nowrap,
4667
+ .pf-c-data-list__cell.pf-m-nowrap,
4668
+ .pf-c-data-list__text.pf-m-nowrap {
4669
+ --pf-c-data-list--cell--WhiteSpace: nowrap;
4661
4670
  }
4662
4671
 
4663
- .pf-c-description-list.pf-m-fill-columns .pf-c-description-list__group,
4664
- .pf-c-description-list.pf-m-fill-columns > .pf-c-card {
4665
- display: inline-grid;
4666
- width: 100%;
4667
- margin-bottom: var(--pf-c-description-list--RowGap);
4668
- break-inside: avoid;
4669
- page-break-inside: avoid;
4670
- -webkit-column-break-inside: avoid;
4671
- -moz-column-break-inside: avoid;
4672
+ .pf-c-data-list__item {
4673
+ position: relative;
4674
+ display: flex;
4675
+ flex-direction: column;
4676
+ background-color: var(--pf-c-data-list__item--BackgroundColor);
4677
+ border-bottom: var(--pf-c-data-list__item--BorderBottomWidth) solid var(--pf-c-data-list__item--BorderBottomColor);
4672
4678
  }
4673
4679
 
4674
- .pf-c-description-list.pf-m-display-lg {
4675
- --pf-c-description-list__description--FontSize: var(--pf-c-description-list--m-display-lg__description--FontSize);
4680
+ .pf-c-data-list__item::before {
4681
+ position: absolute;
4682
+ top: var(--pf-c-data-list__item--before--Top);
4683
+ bottom: 0;
4684
+ left: 0;
4685
+ width: var(--pf-c-data-list__item--before--Width);
4686
+ content: "";
4687
+ background-color: var(--pf-c-data-list__item--before--BackgroundColor);
4688
+ transition: var(--pf-c-data-list__item--before--Transition);
4676
4689
  }
4677
4690
 
4678
- .pf-c-description-list.pf-m-display-2xl {
4679
- --pf-c-description-list__description--FontSize: var(--pf-c-description-list--m-display-2xl__description--FontSize);
4691
+ .pf-c-data-list__item.pf-m-selectable {
4692
+ cursor: pointer;
4693
+ outline-offset: var(--pf-c-data-list__item--m-selectable--OutlineOffset);
4680
4694
  }
4681
4695
 
4682
- .pf-c-description-list > .pf-c-card {
4683
- align-self: stretch;
4684
- padding: var(--pf-c-card--first-child--PaddingTop) var(--pf-c-card--child--PaddingRight) var(--pf-c-card--child--PaddingBottom) var(--pf-c-card--child--PaddingLeft);
4696
+ .pf-c-data-list__item.pf-m-selectable:hover, .pf-c-data-list__item.pf-m-selectable:focus {
4697
+ position: relative;
4698
+ z-index: var(--pf-c-data-list__item--m-selectable--hover--ZIndex);
4685
4699
  }
4686
4700
 
4687
- .pf-c-description-list__group,
4688
- .pf-c-description-list > .pf-c-card {
4689
- display: grid;
4690
- grid-column: var(--pf-c-description-list__group--GridColumn);
4691
- row-gap: var(--pf-c-description-list__group--RowGap);
4692
- column-gap: var(--pf-c-description-list__group--ColumnGap);
4693
- grid-template-columns: var(--pf-c-description-list__group--GridTemplateColumns);
4694
- grid-template-rows: var(--pf-c-description-list__group--GridTemplateRows);
4695
- align-items: baseline;
4701
+ .pf-c-data-list__item.pf-m-selectable:hover:not(.pf-m-selected):not(:last-child), .pf-c-data-list__item.pf-m-selectable:focus:not(.pf-m-selected):not(:last-child) {
4702
+ --pf-c-data-list__item--BorderBottomWidth: 0;
4696
4703
  }
4697
4704
 
4698
- .pf-c-description-list__term,
4699
- .pf-c-description-list__description {
4700
- min-width: 0;
4701
- text-align: left;
4702
- overflow-wrap: break-word;
4705
+ .pf-c-data-list__item.pf-m-selectable:hover:not(.pf-m-selected):not(:last-child) + .pf-c-data-list__item, .pf-c-data-list__item.pf-m-selectable:focus:not(.pf-m-selected):not(:last-child) + .pf-c-data-list__item {
4706
+ border-top: var(--pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth) solid var(--pf-c-data-list__item--m-selectable--hover--item--BorderTopColor);
4703
4707
  }
4704
4708
 
4705
- .pf-c-description-list__term {
4706
- display: var(--pf-c-description-list__term--Display);
4707
- font-size: var(--pf-c-description-list__term--FontSize);
4708
- font-weight: var(--pf-c-description-list__term--FontWeight);
4709
- line-height: var(--pf-c-description-list__term--LineHeight);
4709
+ .pf-c-data-list__item.pf-m-selectable:hover {
4710
+ box-shadow: var(--pf-c-data-list__item--m-selectable--hover--BoxShadow);
4710
4711
  }
4711
4712
 
4712
- .pf-c-description-list__term .pf-c-description-list__text {
4713
- display: inline;
4713
+ .pf-c-data-list__item.pf-m-selectable:focus {
4714
+ box-shadow: var(--pf-c-data-list__item--m-selectable--focus--BoxShadow);
4714
4715
  }
4715
4716
 
4716
- .pf-c-description-list__term-icon {
4717
- flex-shrink: 0;
4718
- min-width: var(--pf-c-description-list__term-icon--MinWidth);
4719
- margin-right: var(--pf-c-description-list__term-icon--MarginRight);
4720
- color: var(--pf-c-description-list__term-icon--Color);
4717
+ .pf-c-data-list__item.pf-m-selectable:active {
4718
+ box-shadow: var(--pf-c-data-list__item--m-selectable--active--BoxShadow);
4721
4719
  }
4722
4720
 
4723
- .pf-c-description-list__description {
4724
- font-size: var(--pf-c-description-list__description--FontSize, inherit);
4721
+ .pf-c-data-list__item.pf-m-selected {
4722
+ --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-selected--before--BackgroundColor);
4723
+ position: relative;
4724
+ z-index: var(--pf-c-data-list__item--m-selected--ZIndex);
4725
+ box-shadow: var(--pf-c-data-list__item--m-selected--BoxShadow);
4725
4726
  }
4726
4727
 
4727
- .pf-c-description-list__text {
4728
- min-width: 0;
4728
+ .pf-c-data-list__item.pf-m-ghost-row::after {
4729
+ position: absolute;
4730
+ top: 0;
4731
+ right: 0;
4732
+ bottom: 0;
4733
+ left: 0;
4734
+ content: "";
4735
+ background-color: var(--pf-c-data-list__item--m-ghost-row--after--BackgroundColor);
4736
+ opacity: var(--pf-c-data-list__item--m-ghost-row--after--Opacity);
4729
4737
  }
4730
4738
 
4731
- .pf-c-description-list__text.pf-m-help-text {
4732
- text-decoration: underline;
4733
- cursor: pointer;
4734
- text-decoration-style: dashed;
4735
- text-decoration-thickness: var(--pf-c-description-list__text--m-help-text--TextDecorationThickness);
4736
- text-underline-offset: var(--pf-c-description-list__text--m-help-text--TextDecorationOffset);
4737
- text-decoration-color: var(--pf-c-description-list__text--m-help-text--TextDecorationColor);
4739
+ .pf-c-data-list__item.pf-m-expanded {
4740
+ --pf-c-data-list__toggle-icon--Rotate: var(--pf-c-data-list__item--m-expanded__toggle-icon--Rotate);
4741
+ --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--before--BackgroundColor);
4738
4742
  }
4739
4743
 
4740
- .pf-c-description-list__text.pf-m-help-text:hover {
4741
- --pf-c-description-list__text--m-help-text--TextDecorationColor: var(--pf-c-description-list__text--m-help-text--hover--TextDecorationColor);
4744
+ .pf-c-data-list__item.pf-m-expanded.pf-m-selectable:not(.pf-m-selected) {
4745
+ --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor);
4742
4746
  }
4743
4747
 
4744
- .pf-c-description-list__text.pf-m-help-text:focus {
4745
- --pf-c-description-list__text--m-help-text--TextDecorationColor: var(--pf-c-description-list__text--m-help-text--focus--TextDecorationColor);
4748
+ .pf-c-data-list__item-row {
4749
+ display: flex;
4750
+ flex-wrap: nowrap;
4751
+ padding-right: var(--pf-c-data-list__item-row--PaddingRight);
4752
+ padding-left: var(--pf-c-data-list__item-row--PaddingLeft);
4746
4753
  }
4747
4754
 
4748
- .pf-c-description-list.pf-m-1-col {
4749
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-1-col--GridTemplateColumns--count);
4755
+ .pf-c-data-list__item-control {
4756
+ display: flex;
4757
+ flex-wrap: nowrap;
4758
+ padding-top: var(--pf-c-data-list__item-control--PaddingTop);
4759
+ padding-bottom: var(--pf-c-data-list__item-control--PaddingBottom);
4760
+ margin-right: var(--pf-c-data-list__item-control--MarginRight);
4750
4761
  }
4751
4762
 
4752
- .pf-c-description-list.pf-m-2-col {
4753
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-2-col--GridTemplateColumns--count);
4763
+ .pf-c-data-list__item-control > *:not(:last-child) {
4764
+ margin-right: var(--pf-c-data-list__item-control--not-last-child--MarginRight);
4754
4765
  }
4755
4766
 
4756
- .pf-c-description-list.pf-m-3-col {
4757
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-3-col--GridTemplateColumns--count);
4767
+ .pf-c-data-list__check {
4768
+ display: flex;
4769
+ align-items: center;
4770
+ align-self: flex-start;
4771
+ height: var(--pf-c-data-list__check--Height);
4772
+ margin-top: var(--pf-c-data-list__check--MarginTop);
4758
4773
  }
4759
4774
 
4760
- .pf-c-description-list.pf-m-horizontal {
4761
- --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
4762
- --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
4775
+ .pf-c-data-list__check > input {
4776
+ cursor: pointer;
4763
4777
  }
4764
4778
 
4765
- .pf-c-description-list.pf-m-vertical {
4766
- --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
4767
- --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
4779
+ .pf-c-data-list__item-draggable-button {
4780
+ display: flex;
4781
+ flex-direction: column;
4782
+ padding: var(--pf-c-data-list__item-draggable-button--PaddingTop) var(--pf-c-data-list__item-draggable-button--PaddingRight) var(--pf-c-data-list__item-draggable-button--PaddingBottom) var(--pf-c-data-list__item-draggable-button--PaddingLeft);
4783
+ margin: var(--pf-c-data-list__item-draggable-button--MarginTop) 0 var(--pf-c-data-list__item-draggable-button--MarginBottom) var(--pf-c-data-list__item-draggable-button--MarginLeft);
4784
+ border: 0;
4768
4785
  }
4769
4786
 
4770
- @media (min-width: 576px) {
4771
- .pf-c-description-list.pf-m-1-col-on-sm {
4772
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-1-col--GridTemplateColumns--count);
4773
- }
4787
+ .pf-c-data-list__item-draggable-button:hover {
4788
+ --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--hover__draggable-icon--Color);
4789
+ cursor: grab;
4790
+ }
4774
4791
 
4775
- .pf-c-description-list.pf-m-2-col-on-sm {
4776
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-2-col--GridTemplateColumns--count);
4777
- }
4792
+ .pf-c-data-list__item-draggable-button:focus {
4793
+ --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--focus__draggable-icon--Color);
4794
+ }
4778
4795
 
4779
- .pf-c-description-list.pf-m-3-col-on-sm {
4780
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-3-col--GridTemplateColumns--count);
4781
- }
4796
+ .pf-c-data-list__item-draggable-button:active {
4797
+ cursor: grabbing;
4798
+ }
4782
4799
 
4783
- .pf-c-description-list.pf-m-horizontal-on-sm {
4784
- --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
4785
- --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
4786
- }
4800
+ .pf-c-data-list__item-draggable-button.pf-m-disabled {
4801
+ --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color);
4802
+ pointer-events: none;
4803
+ }
4787
4804
 
4788
- .pf-c-description-list.pf-m-vertical-on-sm {
4789
- --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
4790
- --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
4791
- }
4805
+ .pf-c-data-list__item-draggable-button .pf-c-data-list__item-draggable-icon {
4806
+ color: var(--pf-c-data-list__item-draggable-button-icon--Color);
4792
4807
  }
4793
- @media (min-width: 768px) {
4794
- .pf-c-description-list.pf-m-1-col-on-md {
4795
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-1-col--GridTemplateColumns--count);
4796
- }
4797
4808
 
4798
- .pf-c-description-list.pf-m-2-col-on-md {
4799
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-2-col--GridTemplateColumns--count);
4800
- }
4809
+ .pf-c-data-list__item-action {
4810
+ --pf-hidden-visible--visible--Display: var(--pf-c-data-list__item-action--Display);
4811
+ align-items: flex-start;
4812
+ align-content: flex-start;
4813
+ padding-top: var(--pf-c-data-list__item-action--PaddingTop);
4814
+ padding-bottom: var(--pf-c-data-list__item-action--PaddingBottom);
4815
+ margin-left: var(--pf-c-data-list__item-action--MarginLeft);
4816
+ }
4801
4817
 
4802
- .pf-c-description-list.pf-m-3-col-on-md {
4803
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-3-col--GridTemplateColumns--count);
4804
- }
4818
+ .pf-c-data-list__item-action > *:not(:last-child) {
4819
+ margin-right: var(--pf-c-data-list__item-action--not-last-child--MarginRight);
4820
+ }
4805
4821
 
4806
- .pf-c-description-list.pf-m-horizontal-on-md {
4807
- --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
4808
- --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
4809
- }
4822
+ .pf-c-data-list__item-action .pf-c-data-list__action {
4823
+ margin-top: var(--pf-c-data-list__action--MarginTop);
4824
+ margin-bottom: var(--pf-c-data-list__item-action__action--MarginBottom);
4825
+ }
4810
4826
 
4811
- .pf-c-description-list.pf-m-vertical-on-md {
4812
- --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
4813
- --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
4814
- }
4827
+ .pf-c-data-list__toggle {
4828
+ margin: var(--pf-c-data-list__toggle--MarginTop) 0 var(--pf-c-data-list__toggle--MarginBottom) var(--pf-c-data-list__toggle--MarginLeft);
4815
4829
  }
4816
- @media (min-width: 992px) {
4817
- .pf-c-description-list.pf-m-1-col-on-lg {
4818
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-1-col--GridTemplateColumns--count);
4819
- }
4820
4830
 
4821
- .pf-c-description-list.pf-m-2-col-on-lg {
4822
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-2-col--GridTemplateColumns--count);
4823
- }
4831
+ .pf-c-data-list__toggle-icon {
4832
+ height: var(--pf-c-data-list__toggle-icon--Height);
4833
+ pointer-events: none;
4834
+ transition: var(--pf-c-data-list__toggle-icon--Transition);
4835
+ transform: rotate(var(--pf-c-data-list__toggle-icon--Rotate));
4836
+ }
4824
4837
 
4825
- .pf-c-description-list.pf-m-3-col-on-lg {
4826
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-3-col--GridTemplateColumns--count);
4827
- }
4838
+ .pf-c-data-list__item-content {
4839
+ display: grid;
4840
+ width: 100%;
4841
+ grid-template-columns: auto 1fr;
4842
+ }
4828
4843
 
4829
- .pf-c-description-list.pf-m-horizontal-on-lg {
4830
- --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
4831
- --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
4832
- }
4844
+ .pf-c-data-list__cell {
4845
+ flex: 1;
4846
+ grid-column: 1/-1;
4847
+ padding-top: var(--pf-c-data-list__cell--PaddingTop);
4848
+ padding-bottom: var(--pf-c-data-list__cell--PaddingBottom);
4849
+ }
4833
4850
 
4834
- .pf-c-description-list.pf-m-vertical-on-lg {
4835
- --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
4836
- --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
4837
- }
4851
+ .pf-c-data-list__cell + .pf-c-data-list__cell {
4852
+ flex: 1 0 100%;
4853
+ order: 1;
4854
+ padding-top: var(--pf-c-data-list__cell--cell--PaddingTop);
4838
4855
  }
4839
- @media (min-width: 1200px) {
4840
- .pf-c-description-list.pf-m-1-col-on-xl {
4841
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-1-col--GridTemplateColumns--count);
4842
- }
4843
4856
 
4844
- .pf-c-description-list.pf-m-2-col-on-xl {
4845
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-2-col--GridTemplateColumns--count);
4846
- }
4847
-
4848
- .pf-c-description-list.pf-m-3-col-on-xl {
4849
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-3-col--GridTemplateColumns--count);
4850
- }
4851
-
4852
- .pf-c-description-list.pf-m-horizontal-on-xl {
4853
- --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
4854
- --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
4855
- }
4856
-
4857
- .pf-c-description-list.pf-m-vertical-on-xl {
4858
- --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
4859
- --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
4860
- }
4857
+ .pf-c-data-list__cell.pf-m-icon {
4858
+ flex-grow: 0;
4859
+ margin-right: var(--pf-c-data-list__cell--m-icon--MarginRight);
4860
+ grid-column: 1/2;
4861
4861
  }
4862
- @media (min-width: 1450px) {
4863
- .pf-c-description-list.pf-m-1-col-on-2xl {
4864
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-1-col--GridTemplateColumns--count);
4865
- }
4866
-
4867
- .pf-c-description-list.pf-m-2-col-on-2xl {
4868
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-2-col--GridTemplateColumns--count);
4869
- }
4870
-
4871
- .pf-c-description-list.pf-m-3-col-on-2xl {
4872
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-3-col--GridTemplateColumns--count);
4873
- }
4874
-
4875
- .pf-c-description-list.pf-m-horizontal-on-2xl {
4876
- --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
4877
- --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
4878
- }
4879
4862
 
4880
- .pf-c-description-list.pf-m-vertical-on-2xl {
4881
- --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
4882
- --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
4883
- }
4884
- }
4885
- .pf-c-data-list {
4886
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
4887
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
4888
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
4889
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
4890
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
4891
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
4892
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
4863
+ .pf-c-data-list__cell.pf-m-icon + .pf-c-data-list__cell {
4864
+ grid-column: 2/3;
4865
+ padding-top: var(--pf-c-data-list__cell--m-icon--cell--PaddingTop);
4893
4866
  }
4894
4867
 
4895
- .pf-c-data-list__item-action {
4896
- --pf-hidden-visible--visible--Visibility: visible;
4897
- --pf-hidden-visible--hidden--Display: none;
4898
- --pf-hidden-visible--hidden--Visibility: hidden;
4899
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4900
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4901
- display: var(--pf-hidden-visible--Display);
4902
- visibility: var(--pf-hidden-visible--Visibility);
4868
+ .pf-c-data-list__cell.pf-m-align-right {
4869
+ margin-left: 0;
4903
4870
  }
4904
4871
 
4905
- .pf-m-hidden.pf-c-data-list__item-action {
4906
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4907
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4872
+ .pf-c-data-list__text {
4873
+ display: inline-block;
4908
4874
  }
4909
4875
 
4910
- @media screen and (min-width: 576px) {
4911
- .pf-m-hidden-on-sm.pf-c-data-list__item-action {
4912
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4913
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4914
- }
4915
-
4916
- .pf-m-visible-on-sm.pf-c-data-list__item-action {
4917
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4918
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4919
- }
4876
+ .pf-c-data-list__text,
4877
+ .pf-c-data-list__cell {
4878
+ min-width: var(--pf-c-data-list--cell--MinWidth);
4879
+ max-width: 100%;
4880
+ overflow: var(--pf-c-data-list--cell--Overflow);
4881
+ text-overflow: var(--pf-c-data-list--cell--TextOverflow);
4882
+ word-break: var(--pf-c-data-list--cell--WordBreak);
4883
+ white-space: var(--pf-c-data-list--cell--WhiteSpace);
4920
4884
  }
4921
- @media screen and (min-width: 768px) {
4922
- .pf-m-hidden-on-md.pf-c-data-list__item-action {
4923
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4924
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4925
- }
4926
4885
 
4927
- .pf-m-visible-on-md.pf-c-data-list__item-action {
4928
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4929
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4930
- }
4886
+ .pf-c-data-list__expandable-content {
4887
+ max-height: var(--pf-c-data-list__expandable-content--MaxHeight);
4888
+ overflow-y: auto;
4889
+ border-top: var(--pf-c-data-list__expandable-content--BorderTopWidth) solid var(--pf-c-data-list__expandable-content--BorderTopColor);
4931
4890
  }
4932
- @media screen and (min-width: 992px) {
4933
- .pf-m-hidden-on-lg.pf-c-data-list__item-action {
4934
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4935
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4936
- }
4937
4891
 
4938
- .pf-m-visible-on-lg.pf-c-data-list__item-action {
4939
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4940
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4941
- }
4892
+ .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body {
4893
+ padding: var(--pf-c-data-list__expandable-content-body--PaddingTop) var(--pf-c-data-list__expandable-content-body--PaddingRight) var(--pf-c-data-list__expandable-content-body--PaddingBottom) var(--pf-c-data-list__expandable-content-body--PaddingLeft);
4942
4894
  }
4943
- @media screen and (min-width: 1200px) {
4944
- .pf-m-hidden-on-xl.pf-c-data-list__item-action {
4945
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4946
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4947
- }
4948
4895
 
4949
- .pf-m-visible-on-xl.pf-c-data-list__item-action {
4950
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4951
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4952
- }
4896
+ .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body.pf-m-no-padding {
4897
+ padding: 0;
4953
4898
  }
4954
- @media screen and (min-width: 1450px) {
4955
- .pf-m-hidden-on-2xl.pf-c-data-list__item-action {
4956
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4957
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4958
- }
4959
4899
 
4960
- .pf-m-visible-on-2xl.pf-c-data-list__item-action {
4961
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4962
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4963
- }
4900
+ :where(.pf-theme-dark) .pf-c-data-list {
4901
+ --pf-c-data-list--BorderTopColor: var(--pf-global--BorderColor--100);
4902
+ --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);
4903
+ --pf-c-data-list__item--BorderBottomColor: var(--pf-global--BorderColor--100);
4904
+ --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
4964
4905
  }
4906
+
4965
4907
  @media screen and (min-width: 768px) {
4966
4908
  .pf-c-data-list:not([class*=pf-m-grid]) {
4967
4909
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
@@ -5438,448 +5380,506 @@ label.pf-c-check, .pf-c-check__label,
5438
5380
  overflow-y: visible;
5439
5381
  }
5440
5382
  }
5441
- .pf-c-data-list {
5442
- --pf-c-data-list--FontSize: 1em;
5443
- --pf-c-data-list--LineHeight: var(--pf-global--LineHeight--md);
5444
- --pf-c-data-list--BorderTopColor: var(--pf-global--BorderColor--300);
5445
- --pf-c-data-list--BorderTopWidth: var(--pf-global--spacer--sm);
5446
- --pf-c-data-list--sm--BorderTopWidth: var(--pf-global--BorderWidth--sm);
5447
- --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);
5448
- --pf-c-data-list__item--BackgroundColor: var(--pf-global--BackgroundColor--100);
5449
- --pf-c-data-list__item--m-selected--ZIndex: var(--pf-global--ZIndex--xs);
5450
- --pf-c-data-list__item--m-expanded--before--BackgroundColor: var(--pf-global--active-color--100);
5451
- --pf-c-data-list__item--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
5452
- --pf-c-data-list__item--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
5453
- --pf-c-data-list__item--m-selectable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
5454
- --pf-c-data-list__item--m-selectable--hover--ZIndex: calc(var(--pf-c-data-list__item--m-selected--ZIndex) + 1);
5455
- --pf-c-data-list__item--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
5456
- --pf-c-data-list__item--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
5457
- --pf-c-data-list__item--m-selectable--active--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
5458
- --pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor: var(--pf-global--active-color--300);
5459
- --pf-c-data-list__item--BorderBottomColor: var(--pf-global--BorderColor--300);
5460
- --pf-c-data-list__item--BorderBottomWidth: 0.5rem;
5461
- --pf-c-data-list__item--m-selectable--hover--item--BorderTopColor: var(--pf-c-data-list__item--BorderBottomColor);
5462
- --pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth: var(--pf-c-data-list__item--BorderBottomWidth);
5463
- --pf-c-data-list__item--sm--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
5464
- --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
5465
- --pf-c-data-list__item--before--BackgroundColor: transparent;
5466
- --pf-c-data-list__item--before--Width: var(--pf-global--BorderWidth--lg);
5467
- --pf-c-data-list__item--before--Transition: var(--pf-global--Transition);
5468
- --pf-c-data-list__item--before--Top: 0;
5469
- --pf-c-data-list__item--before--sm--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
5470
- --pf-c-data-list__item-row--PaddingRight: var(--pf-global--spacer--md);
5471
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-global--spacer--md);
5472
- --pf-c-data-list__item-row--xl--PaddingRight: var(--pf-global--spacer--lg);
5473
- --pf-c-data-list__item-row--xl--PaddingLeft: var(--pf-global--spacer--lg);
5474
- --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-global--spacer--lg);
5475
- --pf-c-data-list__cell--PaddingTop: var(--pf-global--spacer--lg);
5476
- --pf-c-data-list__cell--PaddingBottom: var(--pf-global--spacer--lg);
5477
- --pf-c-data-list__cell--MarginRight: var(--pf-global--spacer--xl);
5478
- --pf-c-data-list__cell--md--PaddingBottom: 0;
5479
- --pf-c-data-list__cell--m-icon--MarginRight: var(--pf-global--spacer--md);
5480
- --pf-c-data-list__cell--cell--PaddingTop: 0;
5481
- --pf-c-data-list__cell--cell--md--PaddingTop: var(--pf-global--spacer--lg);
5482
- --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--lg);
5483
- --pf-c-data-list--cell--MinWidth: initial;
5484
- --pf-c-data-list--cell--Overflow: visible;
5485
- --pf-c-data-list--cell--TextOverflow: clip;
5486
- --pf-c-data-list--cell--WhiteSpace: normal;
5487
- --pf-c-data-list--cell--WordBreak: normal;
5488
- --pf-c-data-list--cell--m-truncate--MinWidth: 5ch;
5489
- --pf-c-data-list__toggle--MarginLeft: calc(var(--pf-global--spacer--sm) * -1);
5490
- --pf-c-data-list__toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
5491
- --pf-c-data-list__toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
5492
- --pf-c-data-list__toggle-icon--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
5493
- --pf-c-data-list__toggle-icon--Transition: .2s ease-in 0s;
5494
- --pf-c-data-list__toggle-icon--Rotate: 0;
5495
- --pf-c-data-list__item--m-expanded__toggle-icon--Rotate: 90deg;
5496
- --pf-c-data-list__item-draggable-button--PaddingLeft: var(--pf-global--spacer--md);
5497
- --pf-c-data-list__item-draggable-button--PaddingRight: var(--pf-global--spacer--md);
5498
- --pf-c-data-list__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--lg) * -1);
5499
- --pf-c-data-list__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--lg) * -1);
5500
- --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-global--spacer--lg);
5501
- --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-global--spacer--lg);
5502
- --pf-c-data-list__item-draggable-button--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
5503
- --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-global--icon--Color--light);
5504
- --pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color: var(--pf-global--disabled-color--200);
5505
- --pf-c-data-list__item-draggable-button--hover__draggable-icon--Color: var(--pf-global--icon--Color--dark);
5506
- --pf-c-data-list__item-draggable-button--focus__draggable-icon--Color: var(--pf-global--icon--Color--dark);
5507
- --pf-c-data-list__item--m-ghost-row--after--BackgroundColor: var(--pf-global--BackgroundColor--100);
5508
- --pf-c-data-list__item--m-ghost-row--after--Opacity: .6;
5509
- --pf-c-data-list__item-control--PaddingTop: var(--pf-global--spacer--lg);
5510
- --pf-c-data-list__item-control--PaddingBottom: var(--pf-global--spacer--lg);
5511
- --pf-c-data-list__item-control--MarginRight: var(--pf-global--spacer--md);
5512
- --pf-c-data-list__item-control--md--MarginRight: var(--pf-global--spacer--xl);
5513
- --pf-c-data-list__item-control--not-last-child--MarginRight: var(--pf-global--spacer--md);
5514
- --pf-c-data-list__check--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
5515
- --pf-c-data-list__check--MarginTop: -0.0625rem;
5516
- --pf-c-data-list__item-action--Display: flex;
5517
- --pf-c-data-list__item-action--PaddingTop: var(--pf-global--spacer--lg);
5518
- --pf-c-data-list__item-action--PaddingBottom: var(--pf-global--spacer--lg);
5519
- --pf-c-data-list__item-action--MarginLeft: var(--pf-global--spacer--md);
5520
- --pf-c-data-list__item-action--md--MarginLeft: var(--pf-global--spacer--xl);
5521
- --pf-c-data-list__item-action--not-last-child--MarginRight: var(--pf-global--spacer--md);
5522
- --pf-c-data-list__item-action__action--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
5523
- --pf-c-data-list__action--MarginTop: var(--pf-c-data-list__item-action__action--MarginTop);
5524
- --pf-c-data-list__item-action__action--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
5525
- --pf-c-data-list__expandable-content--BorderTopWidth: var(--pf-global--BorderWidth--sm);
5526
- --pf-c-data-list__expandable-content--BorderTopColor: var(--pf-global--BorderColor--100);
5527
- --pf-c-data-list__expandable-content--MarginRight: calc(var(--pf-c-data-list__expandable-content-body--PaddingRight) * -1);
5528
- --pf-c-data-list__expandable-content--MarginLeft: calc(var(--pf-c-data-list__expandable-content-body--PaddingLeft) * -1);
5529
- --pf-c-data-list__expandable-content--MaxHeight: 37.5rem;
5530
- --pf-c-data-list__expandable-content--before--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
5531
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-global--spacer--md);
5532
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-global--spacer--md);
5533
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-global--spacer--md);
5534
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-global--spacer--md);
5535
- --pf-c-data-list__expandable-content-body--md--PaddingTop: var(--pf-global--spacer--lg);
5536
- --pf-c-data-list__expandable-content-body--xl--PaddingRight: var(--pf-global--spacer--lg);
5537
- --pf-c-data-list__expandable-content-body--md--PaddingBottom: var(--pf-global--spacer--lg);
5538
- --pf-c-data-list__expandable-content-body--xl--PaddingLeft: var(--pf-global--spacer--lg);
5539
- --pf-c-data-list--m-compact--FontSize: var(--pf-global--FontSize--sm);
5540
- --pf-c-data-list--m-compact--LineHeight: var(--pf-global--LineHeight--sm);
5541
- --pf-c-data-list--m-compact__check--FontSize: var(--pf-global--FontSize--md);
5542
- --pf-c-data-list--m-compact__cell--PaddingTop: var(--pf-global--spacer--sm);
5543
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-global--spacer--sm);
5544
- --pf-c-data-list--m-compact__cell--md--PaddingBottom: 0;
5545
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: 0;
5546
- --pf-c-data-list--m-compact__cell-cell--md--PaddingTop: var(--pf-global--spacer--sm);
5547
- --pf-c-data-list--m-compact__cell--cell--MarginRight: var(--pf-global--spacer--md);
5548
- --pf-c-data-list--m-compact__item-control--PaddingTop: var(--pf-global--spacer--sm);
5549
- --pf-c-data-list--m-compact__item-control--PaddingBottom: var(--pf-global--spacer--sm);
5550
- --pf-c-data-list--m-compact__item-control--MarginRight: var(--pf-global--spacer--md);
5551
- --pf-c-data-list--m-compact__item-action--PaddingTop: var(--pf-global--spacer--sm);
5552
- --pf-c-data-list--m-compact__item-action--PaddingBottom: var(--pf-global--spacer--sm);
5553
- --pf-c-data-list--m-compact__item-action--MarginLeft: var(--pf-global--spacer--md);
5554
- --pf-c-data-list--m-compact__item-action__action--MarginTop: calc(var(--pf-c-data-list--m-compact__item-action--PaddingTop) * -1);
5555
- --pf-c-data-list--m-compact__item-action__action--MarginBottom: calc(var(--pf-c-data-list--m-compact__item-action--PaddingBottom) * -1);
5556
- --pf-c-data-list--m-compact__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
5557
- --pf-c-data-list--m-compact__item-content--PaddingBottom: var(--pf-global--spacer--sm);
5558
- --pf-c-data-list--m-compact__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
5559
- --pf-c-data-list--m-compact__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--sm) * -1);
5560
- --pf-c-data-list--m-compact__item-draggable-button--PaddingTop: var(--pf-global--spacer--sm);
5561
- --pf-c-data-list--m-compact__item-draggable-button--PaddingBottom: var(--pf-global--spacer--sm);
5562
- --pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--sm);
5383
+ .pf-c-chip-group {
5384
+ --pf-global--Color--100: var(--pf-global--Color--dark-100);
5385
+ --pf-global--Color--200: var(--pf-global--Color--dark-200);
5386
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
5387
+ --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
5388
+ --pf-global--link--Color: var(--pf-global--link--Color--dark);
5389
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
5390
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
5391
+ }
5392
+
5393
+ .pf-c-chip-group {
5563
5394
  color: var(--pf-global--Color--100);
5564
- font-size: var(--pf-c-data-list--FontSize);
5565
- line-height: var(--pf-c-data-list--LineHeight);
5566
- overflow-wrap: break-word;
5567
- list-style-type: disc;
5568
- border-top: var(--pf-c-data-list--BorderTopWidth) solid var(--pf-c-data-list--BorderTopColor);
5395
+ --pf-c-chip-group__list--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
5396
+ --pf-c-chip-group__list--MarginRight: calc(var(--pf-global--spacer--xs) * -1);
5397
+ --pf-c-chip-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
5398
+ --pf-c-chip-group--m-category--PaddingRight: var(--pf-global--spacer--xs);
5399
+ --pf-c-chip-group--m-category--PaddingBottom: var(--pf-global--spacer--xs);
5400
+ --pf-c-chip-group--m-category--PaddingLeft: var(--pf-global--spacer--sm);
5401
+ --pf-c-chip-group--m-category--BorderRadius: var(--pf-global--BorderRadius--sm);
5402
+ --pf-c-chip-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--200);
5403
+ --pf-c-chip-group__label--MarginRight: var(--pf-global--spacer--sm);
5404
+ --pf-c-chip-group__label--FontSize: var(--pf-global--FontSize--sm);
5405
+ --pf-c-chip-group__label--MaxWidth: 18ch;
5406
+ --pf-c-chip-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
5407
+ --pf-c-chip-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
5408
+ --pf-c-chip-group__list-item--MarginRight: var(--pf-global--spacer--xs);
5409
+ --pf-c-chip-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
5410
+ max-width: 100%;
5569
5411
  }
5570
5412
 
5571
- @media screen and (min-width: 576px) {
5572
- .pf-c-data-list {
5573
- --pf-c-data-list--BorderTopColor: var(--pf-c-data-list--sm--BorderTopColor);
5574
- --pf-c-data-list--BorderTopWidth: var(--pf-c-data-list--sm--BorderTopWidth);
5575
- }
5413
+ .pf-c-chip-group.pf-m-category {
5414
+ padding-top: var(--pf-c-chip-group--m-category--PaddingTop);
5415
+ padding-right: var(--pf-c-chip-group--m-category--PaddingRight);
5416
+ padding-bottom: var(--pf-c-chip-group--m-category--PaddingBottom);
5417
+ padding-left: var(--pf-c-chip-group--m-category--PaddingLeft);
5418
+ background-color: var(--pf-c-chip-group--m-category--BackgroundColor);
5419
+ border-radius: var(--pf-c-chip-group--m-category--BorderRadius);
5420
+ }
5421
+
5422
+ .pf-c-chip-group__main {
5423
+ display: flex;
5424
+ flex: 1;
5425
+ flex-wrap: wrap;
5426
+ align-items: baseline;
5427
+ min-width: 0;
5428
+ }
5429
+
5430
+ .pf-c-chip-group__list {
5431
+ margin-right: var(--pf-c-chip-group__list--MarginRight);
5432
+ margin-bottom: var(--pf-c-chip-group__list--MarginBottom);
5433
+ }
5434
+
5435
+ .pf-c-chip-group,
5436
+ .pf-c-chip-group__list {
5437
+ display: inline-flex;
5438
+ flex-wrap: wrap;
5439
+ align-items: center;
5440
+ min-width: 0;
5441
+ }
5442
+
5443
+ .pf-c-chip-group__list-item {
5444
+ display: inline-flex;
5445
+ min-width: 0;
5446
+ margin-right: var(--pf-c-chip-group__list-item--MarginRight);
5447
+ margin-bottom: var(--pf-c-chip-group__list-item--MarginBottom);
5448
+ }
5449
+
5450
+ .pf-c-chip-group__label {
5451
+ overflow: hidden;
5452
+ text-overflow: ellipsis;
5453
+ white-space: nowrap;
5454
+ max-width: var(--pf-c-chip-group__label--MaxWidth);
5455
+ margin-right: var(--pf-c-chip-group__label--MarginRight);
5456
+ font-size: var(--pf-c-chip-group__label--FontSize);
5457
+ }
5458
+
5459
+ .pf-c-chip-group__close {
5460
+ display: flex;
5461
+ align-self: flex-start;
5462
+ margin-top: var(--pf-c-chip-group__close--MarginTop);
5463
+ margin-bottom: var(--pf-c-chip-group__close--MarginBottom);
5464
+ }
5465
+
5466
+ .pf-c-date-picker {
5467
+ --pf-c-date-picker--m-top__calendar--Top: 0;
5468
+ --pf-c-date-picker--m-top__calendar--TranslateY: calc(-100% - var(--pf-global--spacer--xs));
5469
+ --pf-c-date-picker__helper-text--MarginTop: var(--pf-global--spacer--xs);
5470
+ --pf-c-date-picker__helper-text--FontSize: var(--pf-global--FontSize--sm);
5471
+ --pf-c-date-picker__helper-text--Color: var(--pf-global--Color--100);
5472
+ --pf-c-date-picker__helper-text--m-error--Color: var(--pf-global--danger-color--100);
5473
+ --pf-c-date-picker__input--c-form-control--Width: calc(var(--pf-c-date-picker__input--c-form-control--width-chars) * 1ch + var(--pf-c-date-picker__input--c-form-control--width-base));
5474
+ --pf-c-date-picker__input--c-form-control--width-base: calc(var(--pf-global--spacer--xl) + var(--pf-global--spacer--sm));
5475
+ --pf-c-date-picker__input--c-form-control--width-chars: 10;
5476
+ --pf-c-date-picker__calendar--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
5477
+ --pf-c-date-picker__calendar--BoxShadow: var(--pf-global--BoxShadow--md);
5478
+ --pf-c-date-picker__calendar--ZIndex: var(--pf-global--ZIndex--sm);
5479
+ --pf-c-date-picker__calendar--Top: calc(100% + var(--pf-global--spacer--xs));
5480
+ --pf-c-date-picker__calendar--Right: auto;
5481
+ --pf-c-date-picker__calendar--Left: 0;
5482
+ --pf-c-date-picker__calendar--m-align-right--Right: 0;
5483
+ --pf-c-date-picker__calendar--m-align-right--Left: auto;
5484
+ position: relative;
5485
+ display: inline-block;
5486
+ }
5487
+
5488
+ .pf-c-date-picker__helper-text {
5489
+ margin-top: var(--pf-c-date-picker__helper-text--MarginTop);
5490
+ font-size: var(--pf-c-date-picker__helper-text--FontSize);
5491
+ color: var(--pf-c-date-picker__helper-text--Color);
5492
+ }
5493
+
5494
+ .pf-c-date-picker__helper-text.pf-m-error {
5495
+ --pf-c-date-picker__helper-text--Color: var(--pf-c-date-picker__helper-text--m-error--Color);
5496
+ }
5497
+
5498
+ .pf-c-date-picker__input .pf-c-form-control {
5499
+ width: var(--pf-c-date-picker__input--c-form-control--Width);
5500
+ }
5501
+
5502
+ .pf-c-date-picker__calendar {
5503
+ position: absolute;
5504
+ top: var(--pf-c-date-picker__calendar--Top);
5505
+ right: var(--pf-c-date-picker__calendar--Right);
5506
+ left: var(--pf-c-date-picker__calendar--Left);
5507
+ z-index: var(--pf-c-date-picker__calendar--ZIndex);
5508
+ background-color: var(--pf-c-date-picker__calendar--BackgroundColor);
5509
+ box-shadow: var(--pf-c-date-picker__calendar--BoxShadow);
5510
+ }
5511
+
5512
+ .pf-c-date-picker__calendar.pf-m-align-right {
5513
+ --pf-c-date-picker__calendar--Right: var(--pf-c-date-picker__calendar--m-align-right--Right);
5514
+ --pf-c-date-picker__calendar--Left: var(--pf-c-date-picker__calendar--m-align-right--Left);
5515
+ }
5516
+
5517
+ .pf-c-date-picker.pf-m-top .pf-c-date-picker__calendar {
5518
+ --pf-c-date-picker__calendar--Top: var(--pf-c-date-picker--m-top__calendar--Top);
5519
+ transform: translateY(var(--pf-c-date-picker--m-top__calendar--TranslateY));
5520
+ }
5521
+
5522
+ :where(.pf-theme-dark) .pf-c-date-picker {
5523
+ --pf-c-date-picker__calendar--BackgroundColor: var(--pf-global--BackgroundColor--300);
5524
+ --pf-c-date-picker__calendar--Top: 100%;
5525
+ }
5526
+
5527
+ .pf-c-description-list {
5528
+ --pf-c-description-list--RowGap: var(--pf-global--gutter--md);
5529
+ --pf-c-description-list--ColumnGap: var(--pf-global--spacer--lg);
5530
+ --pf-c-description-list--GridTemplateColumns--count: 1;
5531
+ --pf-c-description-list--GridTemplateColumns--width: 1fr;
5532
+ --pf-c-description-list--GridTemplateColumns--min: 0;
5533
+ --pf-c-description-list--GridTemplateColumns: repeat(var(--pf-c-description-list--GridTemplateColumns--count), var(--pf-c-description-list--GridTemplateColumns--width));
5534
+ --pf-c-description-list__group--RowGap: var(--pf-global--spacer--sm);
5535
+ --pf-c-description-list__group--ColumnGap: var(--pf-global--spacer--sm);
5536
+ --pf-c-description-list__group--GridTemplateColumns: auto;
5537
+ --pf-c-description-list__group--GridTemplateRows: auto 1fr;
5538
+ --pf-c-description-list__group--GridColumn: auto;
5539
+ --pf-c-description-list--m-compact--RowGap: var(--pf-global--gutter);
5540
+ --pf-c-description-list--m-compact--ColumnGap: var(--pf-global--spacer--sm);
5541
+ --pf-c-description-list__term--Display: inline;
5542
+ --pf-c-description-list__term--sm--Display: flex;
5543
+ --pf-c-description-list__term--FontWeight: var(--pf-global--FontWeight--bold);
5544
+ --pf-c-description-list__term--FontSize: var(--pf-global--FontSize--sm);
5545
+ --pf-c-description-list__term--LineHeight: var(--pf-global--LineHeight--sm);
5546
+ --pf-c-description-list__term-icon--MinWidth: var(--pf-global--icon--FontSize--sm);
5547
+ --pf-c-description-list__term-icon--MarginRight: var(--pf-global--spacer--sm);
5548
+ --pf-c-description-list__term-icon--Color: var(--pf-global--icon--Color--light);
5549
+ --pf-c-description-list--m-vertical__group--GridTemplateColumns: repeat(var(--pf-c-description-list--GridTemplateColumns--count));
5550
+ --pf-c-description-list--m-vertical__group--GridTemplateRows: auto 1fr;
5551
+ --pf-c-description-list--m-horizontal__term--width: 12ch;
5552
+ --pf-c-description-list--m-horizontal__description--width: minmax(10ch, auto);
5553
+ --pf-c-description-list--m-horizontal__group--GridTemplateColumns: var(--pf-c-description-list__term--width) var(--pf-c-description-list--m-horizontal__description--width);
5554
+ --pf-c-description-list--m-horizontal__group--GridTemplateRows: auto;
5555
+ --pf-c-description-list--m-1-col--GridTemplateColumns--count: 1;
5556
+ --pf-c-description-list--m-2-col--GridTemplateColumns--count: 2;
5557
+ --pf-c-description-list--m-3-col--GridTemplateColumns--count: 3;
5558
+ --pf-c-description-list--m-auto-fit--GridTemplateColumns--min: 15.625rem;
5559
+ --pf-c-description-list--m-auto-fit--GridTemplateColumns--minmax--min: var(--pf-c-description-list--m-auto-fit--GridTemplateColumns--min);
5560
+ --pf-c-description-list__text--m-help-text--TextDecorationColor: var(--pf-global--BorderColor--200);
5561
+ --pf-c-description-list__text--m-help-text--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
5562
+ --pf-c-description-list__text--m-help-text--TextDecorationOffset: 0.25rem;
5563
+ --pf-c-description-list__text--m-help-text--hover--TextDecorationColor: var(--pf-global--Color--100);
5564
+ --pf-c-description-list__text--m-help-text--focus--TextDecorationColor: var(--pf-global--Color--100);
5565
+ --pf-c-description-list--m-display-lg__description--FontSize: var(--pf-global--FontSize--lg);
5566
+ --pf-c-description-list--m-display-2xl__description--FontSize: var(--pf-global--FontSize--2xl);
5567
+ display: grid;
5568
+ align-items: baseline;
5569
+ row-gap: var(--pf-c-description-list--RowGap);
5570
+ column-gap: var(--pf-c-description-list--ColumnGap);
5571
+ grid-template-columns: var(--pf-c-description-list--GridTemplateColumns);
5576
5572
  }
5573
+
5577
5574
  @media screen and (min-width: 576px) {
5578
- .pf-c-data-list {
5579
- --pf-c-data-list__item--BorderBottomWidth: var(--pf-c-data-list__item--sm--BorderBottomWidth);
5580
- --pf-c-data-list__item--BorderBottomColor: var(--pf-c-data-list__item--sm--BorderBottomColor);
5575
+ .pf-c-description-list {
5576
+ --pf-c-description-list__term--Display: var(--pf-c-description-list__term--sm--Display);
5581
5577
  }
5582
5578
  }
5579
+ .pf-c-description-list[class*=pf-m-horizontal] {
5580
+ --pf-c-description-list__term--width: var(--pf-c-description-list--m-horizontal__term--width);
5581
+ }
5582
+
5583
5583
  @media (min-width: 576px) {
5584
- .pf-c-data-list {
5585
- --pf-c-data-list__item--before--Top: var(--pf-c-data-list__item--before--sm--Top);
5584
+ .pf-c-description-list[class*=pf-m-horizontal] {
5585
+ --pf-c-description-list__term--width: var(--pf-c-description-list--m-horizontal__term--width-on-sm, var(--pf-c-description-list--m-horizontal__term--width));
5586
5586
  }
5587
5587
  }
5588
- .pf-c-data-list.pf-m-compact {
5589
- --pf-c-data-list__check--FontSize: var(--pf-c-data-list--m-compact__check--FontSize);
5590
- --pf-c-data-list__action--MarginTop: var(--pf-c-data-list--m-compact__action--MarginTop);
5591
- --pf-c-data-list--FontSize: var(--pf-c-data-list--m-compact--FontSize);
5592
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list--m-compact__item-action--MarginLeft);
5593
- --pf-c-data-list__item-action--PaddingTop: var(--pf-c-data-list--m-compact__item-action--PaddingTop);
5594
- --pf-c-data-list__item-action--PaddingBottom: var(--pf-c-data-list--m-compact__item-action--PaddingBottom);
5595
- --pf-c-data-list__item-action__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
5596
- --pf-c-data-list__item-action__action--MarginBottom: var(--pf-c-data-list--m-compact__item-action__action--MarginBottom);
5597
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list--m-compact__item-control--MarginRight);
5598
- --pf-c-data-list__item-control--PaddingTop: var(--pf-c-data-list--m-compact__item-control--PaddingTop);
5599
- --pf-c-data-list__item-control--PaddingBottom: var(--pf-c-data-list--m-compact__item-control--PaddingBottom);
5600
- --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-c-data-list--m-compact__item-content--PaddingBottom);
5601
- --pf-c-data-list__item-draggable-button--MarginTop: var(--pf-c-data-list--m-compact__item-draggable-button--MarginTop);
5602
- --pf-c-data-list__item-draggable-button--MarginBottom: var(--pf-c-data-list--m-compact__item-draggable-button--MarginBottom);
5603
- --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingTop);
5604
- --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingBottom);
5605
- --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop);
5606
- font-size: var(--pf-c-data-list--m-compact--FontSize);
5588
+ @media (min-width: 768px) {
5589
+ .pf-c-description-list[class*=pf-m-horizontal] {
5590
+ --pf-c-description-list__term--width: var(--pf-c-description-list--m-horizontal__term--width-on-md, var(--pf-c-description-list--m-horizontal__term--width-on-sm, var(--pf-c-description-list--m-horizontal__term--width)));
5591
+ }
5607
5592
  }
5608
-
5609
- .pf-c-data-list.pf-m-compact .pf-c-data-list__cell {
5610
- --pf-c-data-list__cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--PaddingTop);
5611
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--PaddingBottom);
5612
- --pf-c-data-list__cell--MarginRight: var(--pf-c-data-list--m-compact__cell--cell--MarginRight);
5613
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--PaddingTop);
5593
+ @media (min-width: 992px) {
5594
+ .pf-c-description-list[class*=pf-m-horizontal] {
5595
+ --pf-c-description-list__term--width: var(--pf-c-description-list--m-horizontal__term--width-on-lg, var(--pf-c-description-list--m-horizontal__term--width-on-md, var(--pf-c-description-list--m-horizontal__term--width-on-sm, var(--pf-c-description-list--m-horizontal__term--width))));
5596
+ }
5614
5597
  }
5615
-
5616
- .pf-c-data-list.pf-m-compact .pf-c-data-list__check {
5617
- font-size: var(--pf-c-data-list--m-compact__check--FontSize);
5598
+ @media (min-width: 1200px) {
5599
+ .pf-c-description-list[class*=pf-m-horizontal] {
5600
+ --pf-c-description-list__term--width: var(--pf-c-description-list--m-horizontal__term--width-on-xl, var(--pf-c-description-list--m-horizontal__term--width-on-lg, var(--pf-c-description-list--m-horizontal__term--width-on-md, var(--pf-c-description-list--m-horizontal__term--width-on-sm, var(--pf-c-description-list--m-horizontal__term--width)))));
5601
+ }
5618
5602
  }
5619
-
5620
- .pf-c-data-list.pf-m-drag-over {
5621
- overflow-anchor: none;
5603
+ @media (min-width: 1450px) {
5604
+ .pf-c-description-list[class*=pf-m-horizontal] {
5605
+ --pf-c-description-list__term--width: var(--pf-c-description-list--m-horizontal__term--width-on-2xl, var(--pf-c-description-list--m-horizontal__term--width-on-xl, var(--pf-c-description-list--m-horizontal__term--width-on-lg, var(--pf-c-description-list--m-horizontal__term--width-on-md, var(--pf-c-description-list--m-horizontal__term--width-on-sm, var(--pf-c-description-list--m-horizontal__term--width))))));
5606
+ }
5607
+ }
5608
+ .pf-c-description-list.pf-m-inline-grid {
5609
+ display: inline-grid;
5622
5610
  }
5623
5611
 
5624
- .pf-c-data-list.pf-m-truncate,
5625
- .pf-c-data-list__item-row.pf-m-truncate,
5626
- .pf-c-data-list__cell.pf-m-truncate,
5627
- .pf-c-data-list__text.pf-m-truncate {
5628
- --pf-c-data-list--cell--MinWidth: var(--pf-c-data-list--cell--m-truncate--MinWidth);
5629
- --pf-c-data-list--cell--Overflow: hidden;
5630
- --pf-c-data-list--cell--TextOverflow: ellipsis;
5631
- --pf-c-data-list--cell--WhiteSpace: nowrap;
5612
+ .pf-c-description-list.pf-m-auto-column-widths {
5613
+ --pf-c-description-list--GridTemplateColumns--width: minmax(8ch, max-content);
5632
5614
  }
5633
5615
 
5634
- .pf-c-data-list.pf-m-break-word,
5635
- .pf-c-data-list__item-row.pf-m-break-word,
5636
- .pf-c-data-list__cell.pf-m-break-word,
5637
- .pf-c-data-list__text.pf-m-break-word {
5638
- --pf-c-data-list--cell--WordBreak: break-word;
5616
+ .pf-c-description-list.pf-m-auto-fit {
5617
+ grid-template-columns: repeat(auto-fit, minmax(var(--pf-c-description-list--m-auto-fit--GridTemplateColumns--minmax--min), 1fr));
5618
+ --pf-c-description-list--GridTemplateColumns--minmax--min: var(--pf-c-description-list--GridTemplateColumns--min);
5639
5619
  }
5640
5620
 
5641
- .pf-c-data-list.pf-m-nowrap,
5642
- .pf-c-data-list__item-row.pf-m-nowrap,
5643
- .pf-c-data-list__cell.pf-m-nowrap,
5644
- .pf-c-data-list__text.pf-m-nowrap {
5645
- --pf-c-data-list--cell--WhiteSpace: nowrap;
5621
+ @media (min-width: 576px) {
5622
+ .pf-c-description-list.pf-m-auto-fit {
5623
+ --pf-c-description-list--GridTemplateColumns--minmax--min: var(--pf-c-description-list--GridTemplateColumns--min-on-sm, var(--pf-c-description-list--GridTemplateColumns--min));
5624
+ }
5646
5625
  }
5647
-
5648
- .pf-c-data-list__item {
5649
- position: relative;
5650
- display: flex;
5651
- flex-direction: column;
5652
- background-color: var(--pf-c-data-list__item--BackgroundColor);
5653
- border-bottom: var(--pf-c-data-list__item--BorderBottomWidth) solid var(--pf-c-data-list__item--BorderBottomColor);
5626
+ @media (min-width: 768px) {
5627
+ .pf-c-description-list.pf-m-auto-fit {
5628
+ --pf-c-description-list--GridTemplateColumns--minmax--min: var(--pf-c-description-list--GridTemplateColumns--min-on-md, var(--pf-c-description-list--GridTemplateColumns--min-on-sm, var(--pf-c-description-list--GridTemplateColumns--min)));
5629
+ }
5654
5630
  }
5655
-
5656
- .pf-c-data-list__item::before {
5657
- position: absolute;
5658
- top: var(--pf-c-data-list__item--before--Top);
5659
- bottom: 0;
5660
- left: 0;
5661
- width: var(--pf-c-data-list__item--before--Width);
5662
- content: "";
5663
- background-color: var(--pf-c-data-list__item--before--BackgroundColor);
5664
- transition: var(--pf-c-data-list__item--before--Transition);
5631
+ @media (min-width: 992px) {
5632
+ .pf-c-description-list.pf-m-auto-fit {
5633
+ --pf-c-description-list--GridTemplateColumns--minmax--min: var(--pf-c-description-list--GridTemplateColumns--min-on-lg, var(--pf-c-description-list--GridTemplateColumns--min-on-md, var(--pf-c-description-list--GridTemplateColumns--min-on-sm, var(--pf-c-description-list--GridTemplateColumns--min))));
5634
+ }
5665
5635
  }
5666
-
5667
- .pf-c-data-list__item.pf-m-selectable {
5668
- cursor: pointer;
5669
- outline-offset: var(--pf-c-data-list__item--m-selectable--OutlineOffset);
5636
+ @media (min-width: 1200px) {
5637
+ .pf-c-description-list.pf-m-auto-fit {
5638
+ --pf-c-description-list--GridTemplateColumns--minmax--min: var(--pf-c-description-list--GridTemplateColumns--min-on-xl, var(--pf-c-description-list--GridTemplateColumns--min-on-lg, var(--pf-c-description-list--GridTemplateColumns--min-on-md, var(--pf-c-description-list--GridTemplateColumns--min-on-sm, var(--pf-c-description-list--GridTemplateColumns--min)))));
5639
+ }
5670
5640
  }
5671
-
5672
- .pf-c-data-list__item.pf-m-selectable:hover, .pf-c-data-list__item.pf-m-selectable:focus {
5673
- position: relative;
5674
- z-index: var(--pf-c-data-list__item--m-selectable--hover--ZIndex);
5641
+ @media (min-width: 1450px) {
5642
+ .pf-c-description-list.pf-m-auto-fit {
5643
+ --pf-c-description-list--GridTemplateColumns--minmax--min: var(--pf-c-description-list--GridTemplateColumns--min-on-2xl, var(--pf-c-description-list--GridTemplateColumns--min-on-xl, var(--pf-c-description-list--GridTemplateColumns--min-on-lg, var(--pf-c-description-list--GridTemplateColumns--min-on-md, var(--pf-c-description-list--GridTemplateColumns--min-on-sm, var(--pf-c-description-list--GridTemplateColumns--min))))));
5644
+ }
5645
+ }
5646
+ .pf-c-description-list.pf-m-compact {
5647
+ --pf-c-description-list--RowGap: var(--pf-c-description-list--m-compact--RowGap);
5648
+ --pf-c-description-list--ColumnGap: var(--pf-c-description-list--m-compact--ColumnGap);
5675
5649
  }
5676
5650
 
5677
- .pf-c-data-list__item.pf-m-selectable:hover:not(.pf-m-selected):not(:last-child), .pf-c-data-list__item.pf-m-selectable:focus:not(.pf-m-selected):not(:last-child) {
5678
- --pf-c-data-list__item--BorderBottomWidth: 0;
5651
+ .pf-c-description-list.pf-m-fluid {
5652
+ --pf-c-description-list--m-horizontal__term--width: fit-content(20ch);
5679
5653
  }
5680
5654
 
5681
- .pf-c-data-list__item.pf-m-selectable:hover:not(.pf-m-selected):not(:last-child) + .pf-c-data-list__item, .pf-c-data-list__item.pf-m-selectable:focus:not(.pf-m-selected):not(:last-child) + .pf-c-data-list__item {
5682
- border-top: var(--pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth) solid var(--pf-c-data-list__item--m-selectable--hover--item--BorderTopColor);
5655
+ .pf-c-description-list.pf-m-fill-columns {
5656
+ display: block;
5657
+ column-count: var(--pf-c-description-list--GridTemplateColumns--count);
5658
+ margin-bottom: calc(var(--pf-c-description-list--RowGap) * -1);
5683
5659
  }
5684
5660
 
5685
- .pf-c-data-list__item.pf-m-selectable:hover {
5686
- box-shadow: var(--pf-c-data-list__item--m-selectable--hover--BoxShadow);
5661
+ .pf-c-description-list.pf-m-fill-columns .pf-c-description-list__group,
5662
+ .pf-c-description-list.pf-m-fill-columns > .pf-c-card {
5663
+ display: inline-grid;
5664
+ width: 100%;
5665
+ margin-bottom: var(--pf-c-description-list--RowGap);
5666
+ break-inside: avoid;
5667
+ page-break-inside: avoid;
5668
+ -webkit-column-break-inside: avoid;
5669
+ -moz-column-break-inside: avoid;
5687
5670
  }
5688
5671
 
5689
- .pf-c-data-list__item.pf-m-selectable:focus {
5690
- box-shadow: var(--pf-c-data-list__item--m-selectable--focus--BoxShadow);
5672
+ .pf-c-description-list.pf-m-display-lg {
5673
+ --pf-c-description-list__description--FontSize: var(--pf-c-description-list--m-display-lg__description--FontSize);
5691
5674
  }
5692
5675
 
5693
- .pf-c-data-list__item.pf-m-selectable:active {
5694
- box-shadow: var(--pf-c-data-list__item--m-selectable--active--BoxShadow);
5676
+ .pf-c-description-list.pf-m-display-2xl {
5677
+ --pf-c-description-list__description--FontSize: var(--pf-c-description-list--m-display-2xl__description--FontSize);
5695
5678
  }
5696
5679
 
5697
- .pf-c-data-list__item.pf-m-selected {
5698
- --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-selected--before--BackgroundColor);
5699
- position: relative;
5700
- z-index: var(--pf-c-data-list__item--m-selected--ZIndex);
5701
- box-shadow: var(--pf-c-data-list__item--m-selected--BoxShadow);
5680
+ .pf-c-description-list > .pf-c-card {
5681
+ align-self: stretch;
5682
+ padding: var(--pf-c-card--first-child--PaddingTop) var(--pf-c-card--child--PaddingRight) var(--pf-c-card--child--PaddingBottom) var(--pf-c-card--child--PaddingLeft);
5702
5683
  }
5703
5684
 
5704
- .pf-c-data-list__item.pf-m-ghost-row::after {
5705
- position: absolute;
5706
- top: 0;
5707
- right: 0;
5708
- bottom: 0;
5709
- left: 0;
5710
- content: "";
5711
- background-color: var(--pf-c-data-list__item--m-ghost-row--after--BackgroundColor);
5712
- opacity: var(--pf-c-data-list__item--m-ghost-row--after--Opacity);
5685
+ .pf-c-description-list__group,
5686
+ .pf-c-description-list > .pf-c-card {
5687
+ display: grid;
5688
+ grid-column: var(--pf-c-description-list__group--GridColumn);
5689
+ row-gap: var(--pf-c-description-list__group--RowGap);
5690
+ column-gap: var(--pf-c-description-list__group--ColumnGap);
5691
+ grid-template-columns: var(--pf-c-description-list__group--GridTemplateColumns);
5692
+ grid-template-rows: var(--pf-c-description-list__group--GridTemplateRows);
5693
+ align-items: baseline;
5713
5694
  }
5714
5695
 
5715
- .pf-c-data-list__item.pf-m-expanded {
5716
- --pf-c-data-list__toggle-icon--Rotate: var(--pf-c-data-list__item--m-expanded__toggle-icon--Rotate);
5717
- --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--before--BackgroundColor);
5696
+ .pf-c-description-list__term,
5697
+ .pf-c-description-list__description {
5698
+ min-width: 0;
5699
+ text-align: left;
5700
+ overflow-wrap: break-word;
5718
5701
  }
5719
5702
 
5720
- .pf-c-data-list__item.pf-m-expanded.pf-m-selectable:not(.pf-m-selected) {
5721
- --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor);
5703
+ .pf-c-description-list__term {
5704
+ display: var(--pf-c-description-list__term--Display);
5705
+ font-size: var(--pf-c-description-list__term--FontSize);
5706
+ font-weight: var(--pf-c-description-list__term--FontWeight);
5707
+ line-height: var(--pf-c-description-list__term--LineHeight);
5722
5708
  }
5723
5709
 
5724
- .pf-c-data-list__item-row {
5725
- display: flex;
5726
- flex-wrap: nowrap;
5727
- padding-right: var(--pf-c-data-list__item-row--PaddingRight);
5728
- padding-left: var(--pf-c-data-list__item-row--PaddingLeft);
5710
+ .pf-c-description-list__term .pf-c-description-list__text {
5711
+ display: inline;
5729
5712
  }
5730
5713
 
5731
- .pf-c-data-list__item-control {
5732
- display: flex;
5733
- flex-wrap: nowrap;
5734
- padding-top: var(--pf-c-data-list__item-control--PaddingTop);
5735
- padding-bottom: var(--pf-c-data-list__item-control--PaddingBottom);
5736
- margin-right: var(--pf-c-data-list__item-control--MarginRight);
5714
+ .pf-c-description-list__term-icon {
5715
+ flex-shrink: 0;
5716
+ min-width: var(--pf-c-description-list__term-icon--MinWidth);
5717
+ margin-right: var(--pf-c-description-list__term-icon--MarginRight);
5718
+ color: var(--pf-c-description-list__term-icon--Color);
5737
5719
  }
5738
5720
 
5739
- .pf-c-data-list__item-control > *:not(:last-child) {
5740
- margin-right: var(--pf-c-data-list__item-control--not-last-child--MarginRight);
5721
+ .pf-c-description-list__description {
5722
+ font-size: var(--pf-c-description-list__description--FontSize, inherit);
5741
5723
  }
5742
5724
 
5743
- .pf-c-data-list__check {
5744
- display: flex;
5745
- align-items: center;
5746
- align-self: flex-start;
5747
- height: var(--pf-c-data-list__check--Height);
5748
- margin-top: var(--pf-c-data-list__check--MarginTop);
5725
+ .pf-c-description-list__text {
5726
+ min-width: 0;
5749
5727
  }
5750
5728
 
5751
- .pf-c-data-list__check > input {
5729
+ .pf-c-description-list__text.pf-m-help-text {
5730
+ text-decoration: underline;
5752
5731
  cursor: pointer;
5732
+ text-decoration-style: dashed;
5733
+ text-decoration-thickness: var(--pf-c-description-list__text--m-help-text--TextDecorationThickness);
5734
+ text-underline-offset: var(--pf-c-description-list__text--m-help-text--TextDecorationOffset);
5735
+ text-decoration-color: var(--pf-c-description-list__text--m-help-text--TextDecorationColor);
5753
5736
  }
5754
5737
 
5755
- .pf-c-data-list__item-draggable-button {
5756
- display: flex;
5757
- flex-direction: column;
5758
- padding: var(--pf-c-data-list__item-draggable-button--PaddingTop) var(--pf-c-data-list__item-draggable-button--PaddingRight) var(--pf-c-data-list__item-draggable-button--PaddingBottom) var(--pf-c-data-list__item-draggable-button--PaddingLeft);
5759
- margin: var(--pf-c-data-list__item-draggable-button--MarginTop) 0 var(--pf-c-data-list__item-draggable-button--MarginBottom) var(--pf-c-data-list__item-draggable-button--MarginLeft);
5760
- border: 0;
5738
+ .pf-c-description-list__text.pf-m-help-text:hover {
5739
+ --pf-c-description-list__text--m-help-text--TextDecorationColor: var(--pf-c-description-list__text--m-help-text--hover--TextDecorationColor);
5761
5740
  }
5762
5741
 
5763
- .pf-c-data-list__item-draggable-button:hover {
5764
- --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--hover__draggable-icon--Color);
5765
- cursor: grab;
5742
+ .pf-c-description-list__text.pf-m-help-text:focus {
5743
+ --pf-c-description-list__text--m-help-text--TextDecorationColor: var(--pf-c-description-list__text--m-help-text--focus--TextDecorationColor);
5766
5744
  }
5767
5745
 
5768
- .pf-c-data-list__item-draggable-button:focus {
5769
- --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--focus__draggable-icon--Color);
5746
+ .pf-c-description-list.pf-m-1-col {
5747
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-1-col--GridTemplateColumns--count);
5770
5748
  }
5771
5749
 
5772
- .pf-c-data-list__item-draggable-button:active {
5773
- cursor: grabbing;
5750
+ .pf-c-description-list.pf-m-2-col {
5751
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-2-col--GridTemplateColumns--count);
5774
5752
  }
5775
5753
 
5776
- .pf-c-data-list__item-draggable-button.pf-m-disabled {
5777
- --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color);
5778
- pointer-events: none;
5754
+ .pf-c-description-list.pf-m-3-col {
5755
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-3-col--GridTemplateColumns--count);
5779
5756
  }
5780
5757
 
5781
- .pf-c-data-list__item-draggable-button .pf-c-data-list__item-draggable-icon {
5782
- color: var(--pf-c-data-list__item-draggable-button-icon--Color);
5758
+ .pf-c-description-list.pf-m-horizontal {
5759
+ --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
5760
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
5783
5761
  }
5784
5762
 
5785
- .pf-c-data-list__item-action {
5786
- --pf-hidden-visible--visible--Display: var(--pf-c-data-list__item-action--Display);
5787
- align-items: flex-start;
5788
- align-content: flex-start;
5789
- padding-top: var(--pf-c-data-list__item-action--PaddingTop);
5790
- padding-bottom: var(--pf-c-data-list__item-action--PaddingBottom);
5791
- margin-left: var(--pf-c-data-list__item-action--MarginLeft);
5763
+ .pf-c-description-list.pf-m-vertical {
5764
+ --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
5765
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
5792
5766
  }
5793
5767
 
5794
- .pf-c-data-list__item-action > *:not(:last-child) {
5795
- margin-right: var(--pf-c-data-list__item-action--not-last-child--MarginRight);
5796
- }
5768
+ @media (min-width: 576px) {
5769
+ .pf-c-description-list.pf-m-1-col-on-sm {
5770
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-1-col--GridTemplateColumns--count);
5771
+ }
5797
5772
 
5798
- .pf-c-data-list__item-action .pf-c-data-list__action {
5799
- margin-top: var(--pf-c-data-list__action--MarginTop);
5800
- margin-bottom: var(--pf-c-data-list__item-action__action--MarginBottom);
5773
+ .pf-c-description-list.pf-m-2-col-on-sm {
5774
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-2-col--GridTemplateColumns--count);
5775
+ }
5776
+
5777
+ .pf-c-description-list.pf-m-3-col-on-sm {
5778
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-3-col--GridTemplateColumns--count);
5779
+ }
5780
+
5781
+ .pf-c-description-list.pf-m-horizontal-on-sm {
5782
+ --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
5783
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
5784
+ }
5785
+
5786
+ .pf-c-description-list.pf-m-vertical-on-sm {
5787
+ --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
5788
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
5789
+ }
5801
5790
  }
5791
+ @media (min-width: 768px) {
5792
+ .pf-c-description-list.pf-m-1-col-on-md {
5793
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-1-col--GridTemplateColumns--count);
5794
+ }
5795
+
5796
+ .pf-c-description-list.pf-m-2-col-on-md {
5797
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-2-col--GridTemplateColumns--count);
5798
+ }
5799
+
5800
+ .pf-c-description-list.pf-m-3-col-on-md {
5801
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-3-col--GridTemplateColumns--count);
5802
+ }
5802
5803
 
5803
- .pf-c-data-list__toggle {
5804
- margin: var(--pf-c-data-list__toggle--MarginTop) 0 var(--pf-c-data-list__toggle--MarginBottom) var(--pf-c-data-list__toggle--MarginLeft);
5805
- }
5804
+ .pf-c-description-list.pf-m-horizontal-on-md {
5805
+ --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
5806
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
5807
+ }
5806
5808
 
5807
- .pf-c-data-list__toggle-icon {
5808
- height: var(--pf-c-data-list__toggle-icon--Height);
5809
- pointer-events: none;
5810
- transition: var(--pf-c-data-list__toggle-icon--Transition);
5811
- transform: rotate(var(--pf-c-data-list__toggle-icon--Rotate));
5809
+ .pf-c-description-list.pf-m-vertical-on-md {
5810
+ --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
5811
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
5812
+ }
5812
5813
  }
5814
+ @media (min-width: 992px) {
5815
+ .pf-c-description-list.pf-m-1-col-on-lg {
5816
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-1-col--GridTemplateColumns--count);
5817
+ }
5813
5818
 
5814
- .pf-c-data-list__item-content {
5815
- display: grid;
5816
- width: 100%;
5817
- grid-template-columns: auto 1fr;
5818
- }
5819
+ .pf-c-description-list.pf-m-2-col-on-lg {
5820
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-2-col--GridTemplateColumns--count);
5821
+ }
5819
5822
 
5820
- .pf-c-data-list__cell {
5821
- flex: 1;
5822
- grid-column: 1/-1;
5823
- padding-top: var(--pf-c-data-list__cell--PaddingTop);
5824
- padding-bottom: var(--pf-c-data-list__cell--PaddingBottom);
5825
- }
5823
+ .pf-c-description-list.pf-m-3-col-on-lg {
5824
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-3-col--GridTemplateColumns--count);
5825
+ }
5826
5826
 
5827
- .pf-c-data-list__cell + .pf-c-data-list__cell {
5828
- flex: 1 0 100%;
5829
- order: 1;
5830
- padding-top: var(--pf-c-data-list__cell--cell--PaddingTop);
5831
- }
5827
+ .pf-c-description-list.pf-m-horizontal-on-lg {
5828
+ --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
5829
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
5830
+ }
5832
5831
 
5833
- .pf-c-data-list__cell.pf-m-icon {
5834
- flex-grow: 0;
5835
- margin-right: var(--pf-c-data-list__cell--m-icon--MarginRight);
5836
- grid-column: 1/2;
5832
+ .pf-c-description-list.pf-m-vertical-on-lg {
5833
+ --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
5834
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
5835
+ }
5837
5836
  }
5837
+ @media (min-width: 1200px) {
5838
+ .pf-c-description-list.pf-m-1-col-on-xl {
5839
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-1-col--GridTemplateColumns--count);
5840
+ }
5838
5841
 
5839
- .pf-c-data-list__cell.pf-m-icon + .pf-c-data-list__cell {
5840
- grid-column: 2/3;
5841
- padding-top: var(--pf-c-data-list__cell--m-icon--cell--PaddingTop);
5842
- }
5842
+ .pf-c-description-list.pf-m-2-col-on-xl {
5843
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-2-col--GridTemplateColumns--count);
5844
+ }
5843
5845
 
5844
- .pf-c-data-list__cell.pf-m-align-right {
5845
- margin-left: 0;
5846
- }
5846
+ .pf-c-description-list.pf-m-3-col-on-xl {
5847
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-3-col--GridTemplateColumns--count);
5848
+ }
5847
5849
 
5848
- .pf-c-data-list__text {
5849
- display: inline-block;
5850
- }
5850
+ .pf-c-description-list.pf-m-horizontal-on-xl {
5851
+ --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
5852
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
5853
+ }
5851
5854
 
5852
- .pf-c-data-list__text,
5853
- .pf-c-data-list__cell {
5854
- min-width: var(--pf-c-data-list--cell--MinWidth);
5855
- max-width: 100%;
5856
- overflow: var(--pf-c-data-list--cell--Overflow);
5857
- text-overflow: var(--pf-c-data-list--cell--TextOverflow);
5858
- word-break: var(--pf-c-data-list--cell--WordBreak);
5859
- white-space: var(--pf-c-data-list--cell--WhiteSpace);
5855
+ .pf-c-description-list.pf-m-vertical-on-xl {
5856
+ --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
5857
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
5858
+ }
5860
5859
  }
5860
+ @media (min-width: 1450px) {
5861
+ .pf-c-description-list.pf-m-1-col-on-2xl {
5862
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-1-col--GridTemplateColumns--count);
5863
+ }
5861
5864
 
5862
- .pf-c-data-list__expandable-content {
5863
- max-height: var(--pf-c-data-list__expandable-content--MaxHeight);
5864
- overflow-y: auto;
5865
- border-top: var(--pf-c-data-list__expandable-content--BorderTopWidth) solid var(--pf-c-data-list__expandable-content--BorderTopColor);
5866
- }
5865
+ .pf-c-description-list.pf-m-2-col-on-2xl {
5866
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-2-col--GridTemplateColumns--count);
5867
+ }
5867
5868
 
5868
- .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body {
5869
- padding: var(--pf-c-data-list__expandable-content-body--PaddingTop) var(--pf-c-data-list__expandable-content-body--PaddingRight) var(--pf-c-data-list__expandable-content-body--PaddingBottom) var(--pf-c-data-list__expandable-content-body--PaddingLeft);
5870
- }
5869
+ .pf-c-description-list.pf-m-3-col-on-2xl {
5870
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-3-col--GridTemplateColumns--count);
5871
+ }
5871
5872
 
5872
- .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body.pf-m-no-padding {
5873
- padding: 0;
5874
- }
5873
+ .pf-c-description-list.pf-m-horizontal-on-2xl {
5874
+ --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
5875
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
5876
+ }
5875
5877
 
5876
- :where(.pf-theme-dark) .pf-c-data-list {
5877
- --pf-c-data-list--BorderTopColor: var(--pf-global--BorderColor--100);
5878
- --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);
5879
- --pf-c-data-list__item--BorderBottomColor: var(--pf-global--BorderColor--100);
5880
- --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
5878
+ .pf-c-description-list.pf-m-vertical-on-2xl {
5879
+ --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
5880
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
5881
+ }
5881
5882
  }
5882
-
5883
5883
  .pf-c-divider {
5884
5884
  --pf-hidden-visible--visible--Visibility: visible;
5885
5885
  --pf-hidden-visible--hidden--Display: none;
@@ -8403,78 +8403,225 @@ label.pf-c-check, .pf-c-check__label,
8403
8403
  font-size: var(--pf-c-empty-state--m-xs__body--FontSize);
8404
8404
  }
8405
8405
 
8406
- .pf-c-empty-state.pf-m-xs .pf-c-button {
8407
- --pf-c-button--FontSize: var(--pf-c-empty-state--m-xs--button--FontSize);
8406
+ .pf-c-empty-state.pf-m-xs .pf-c-button {
8407
+ --pf-c-button--FontSize: var(--pf-c-empty-state--m-xs--button--FontSize);
8408
+ }
8409
+
8410
+ .pf-c-empty-state.pf-m-sm {
8411
+ --pf-c-empty-state__content--MaxWidth: var(--pf-c-empty-state--m-sm__content--MaxWidth);
8412
+ }
8413
+
8414
+ .pf-c-empty-state.pf-m-lg {
8415
+ --pf-c-empty-state__content--MaxWidth: var(--pf-c-empty-state--m-lg__content--MaxWidth);
8416
+ }
8417
+
8418
+ .pf-c-empty-state.pf-m-xl {
8419
+ --pf-c-empty-state__body--MarginTop: var(--pf-c-empty-state--m-xl__body--MarginTop);
8420
+ --pf-c-empty-state__icon--MarginBottom: var(--pf-c-empty-state--m-xl__icon--MarginBottom);
8421
+ --pf-c-empty-state__icon--FontSize: var(--pf-c-empty-state--m-xl__icon--FontSize);
8422
+ --pf-c-empty-state--c-button__secondary--MarginTop: var(--pf-c-empty-state--m-xl--c-button__secondary--MarginTop);
8423
+ }
8424
+
8425
+ .pf-c-empty-state.pf-m-xl .pf-c-empty-state__body {
8426
+ font-size: var(--pf-c-empty-state--m-xl__body--FontSize);
8427
+ }
8428
+
8429
+ .pf-c-empty-state.pf-m-full-height {
8430
+ height: 100%;
8431
+ }
8432
+
8433
+ .pf-c-empty-state__content {
8434
+ max-width: var(--pf-c-empty-state__content--MaxWidth);
8435
+ }
8436
+
8437
+ .pf-c-empty-state__content > .pf-c-title.pf-m-lg {
8438
+ font-size: var(--pf-c-empty-state__content--c-title--m-lg--FontSize);
8439
+ }
8440
+
8441
+ .pf-c-empty-state__icon {
8442
+ margin-bottom: var(--pf-c-empty-state__icon--MarginBottom);
8443
+ font-size: var(--pf-c-empty-state__icon--FontSize);
8444
+ color: var(--pf-c-empty-state__icon--Color);
8445
+ }
8446
+
8447
+ .pf-c-empty-state__body {
8448
+ margin-top: var(--pf-c-empty-state__body--MarginTop);
8449
+ color: var(--pf-c-empty-state__body--Color);
8450
+ }
8451
+
8452
+ .pf-c-empty-state__content > .pf-c-button.pf-m-primary,
8453
+ .pf-c-empty-state__primary {
8454
+ margin-top: var(--pf-c-empty-state__primary--MarginTop);
8455
+ }
8456
+
8457
+ .pf-c-empty-state__content > .pf-c-button.pf-m-primary + .pf-c-empty-state__secondary,
8458
+ .pf-c-empty-state__primary + .pf-c-empty-state__secondary {
8459
+ margin-top: var(--pf-c-empty-state__primary--secondary--MarginTop);
8460
+ }
8461
+
8462
+ .pf-c-empty-state__secondary {
8463
+ display: flex;
8464
+ flex-wrap: wrap;
8465
+ justify-content: center;
8466
+ margin-top: var(--pf-c-empty-state__secondary--MarginTop);
8467
+ margin-bottom: var(--pf-c-empty-state__secondary--MarginBottom);
8468
+ }
8469
+
8470
+ .pf-c-empty-state__secondary > * {
8471
+ margin-right: var(--pf-c-empty-state__secondary--child--MarginRight);
8472
+ margin-bottom: var(--pf-c-empty-state__secondary--child--MarginBottom);
8473
+ margin-left: var(--pf-c-empty-state__secondary--child--MarginLeft);
8474
+ }
8475
+
8476
+ .pf-m-overpass-font .pf-c-empty-state .pf-c-empty-state__content > .pf-c-title.pf-m-lg {
8477
+ font-size: var(--pf-global--FontSize--lg);
8478
+ }
8479
+
8480
+ .pf-c-expandable-section {
8481
+ --pf-c-expandable-section__toggle--PaddingTop: var(--pf-global--spacer--form-element);
8482
+ --pf-c-expandable-section__toggle--PaddingRight: var(--pf-global--spacer--md);
8483
+ --pf-c-expandable-section__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
8484
+ --pf-c-expandable-section__toggle--PaddingLeft: 0;
8485
+ --pf-c-expandable-section__toggle--MarginTop: 0;
8486
+ --pf-c-expandable-section__toggle--Color: var(--pf-global--link--Color);
8487
+ --pf-c-expandable-section__toggle--hover--Color: var(--pf-global--link--Color--hover);
8488
+ --pf-c-expandable-section__toggle--active--Color: var(--pf-global--link--Color--hover);
8489
+ --pf-c-expandable-section__toggle--focus--Color: var(--pf-global--link--Color--hover);
8490
+ --pf-c-expandable-section__toggle--m-expanded--Color: var(--pf-global--link--Color--hover);
8491
+ --pf-c-expandable-section__toggle-icon--MinWidth: 1em;
8492
+ --pf-c-expandable-section__toggle-icon--Color: var(--pf-global--Color--100);
8493
+ --pf-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
8494
+ --pf-c-expandable-section__toggle-icon--Rotate: 0;
8495
+ --pf-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
8496
+ --pf-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
8497
+ --pf-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
8498
+ --pf-c-expandable-section__toggle-text--MarginLeft: calc(var(--pf-global--spacer--xs) + var(--pf-global--spacer--sm));
8499
+ --pf-c-expandable-section__content--MarginTop: var(--pf-global--spacer--md);
8500
+ --pf-c-expandable-section__content--MaxWidth: auto;
8501
+ --pf-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
8502
+ --pf-c-expandable-section--m-display-lg--BoxShadow: var(--pf-global--BoxShadow--md);
8503
+ --pf-c-expandable-section--m-display-lg__toggle--PaddingTop: var(--pf-global--spacer--md);
8504
+ --pf-c-expandable-section--m-display-lg__toggle--PaddingRight: var(--pf-global--spacer--md);
8505
+ --pf-c-expandable-section--m-display-lg__toggle--PaddingBottom: var(--pf-global--spacer--md);
8506
+ --pf-c-expandable-section--m-display-lg__toggle--PaddingLeft: var(--pf-global--spacer--md);
8507
+ --pf-c-expandable-section--m-display-lg__content--MarginTop: 0;
8508
+ --pf-c-expandable-section--m-display-lg__content--PaddingRight: var(--pf-global--spacer--lg);
8509
+ --pf-c-expandable-section--m-display-lg__content--PaddingBottom: var(--pf-global--spacer--lg);
8510
+ --pf-c-expandable-section--m-display-lg__content--PaddingLeft: var(--pf-global--spacer--lg);
8511
+ --pf-c-expandable-section--m-display-lg--after--BackgroundColor: transparent;
8512
+ --pf-c-expandable-section--m-display-lg--after--Width: var(--pf-global--BorderWidth--lg);
8513
+ --pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor: var(--pf-global--primary-color--100);
8514
+ --pf-c-expandable-section--m-indented__content--PaddingLeft: calc(var(--pf-c-expandable-section__toggle-text--MarginLeft) + var(--pf-c-expandable-section__toggle-icon--MinWidth));
8515
+ --pf-c-expandable-section--m-truncate__content--LineClamp: 3;
8516
+ --pf-c-expandable-section--m-truncate__toggle--MarginTop: var(--pf-global--spacer--xs);
8517
+ }
8518
+
8519
+ .pf-c-expandable-section.pf-m-expanded {
8520
+ --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--m-expanded--Color);
8521
+ --pf-c-expandable-section__toggle-icon--Rotate: var(--pf-c-expandable-section--m-expanded__toggle-icon--Rotate);
8522
+ --pf-c-expandable-section__toggle-icon--m-expand-top--Rotate: var(--pf-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate);
8523
+ --pf-c-expandable-section--m-display-lg--after--BackgroundColor: var(--pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor);
8524
+ }
8525
+
8526
+ .pf-c-expandable-section.pf-m-detached, .pf-c-expandable-section.pf-m-truncate {
8527
+ --pf-c-expandable-section__content--MarginTop: 0;
8528
+ }
8529
+
8530
+ .pf-c-expandable-section.pf-m-limit-width {
8531
+ --pf-c-expandable-section__content--MaxWidth: var(--pf-c-expandable-section--m-limit-width__content--MaxWidth);
8532
+ }
8533
+
8534
+ .pf-c-expandable-section.pf-m-display-lg {
8535
+ --pf-c-expandable-section__toggle--PaddingTop: var(--pf-c-expandable-section--m-display-lg__toggle--PaddingTop);
8536
+ --pf-c-expandable-section__toggle--PaddingRight: var(--pf-c-expandable-section--m-display-lg__toggle--PaddingRight);
8537
+ --pf-c-expandable-section__toggle--PaddingBottom: var(--pf-c-expandable-section--m-display-lg__toggle--PaddingBottom);
8538
+ --pf-c-expandable-section__toggle--PaddingLeft: var(--pf-c-expandable-section--m-display-lg__toggle--PaddingLeft);
8539
+ --pf-c-expandable-section__content--PaddingRight: var(--pf-c-expandable-section--m-display-lg__content--PaddingRight);
8540
+ --pf-c-expandable-section__content--PaddingBottom: var(--pf-c-expandable-section--m-display-lg__content--PaddingBottom);
8541
+ --pf-c-expandable-section__content--PaddingLeft: var(--pf-c-expandable-section--m-display-lg__content--PaddingLeft);
8542
+ --pf-c-expandable-section__content--MarginTop: var(--pf-c-expandable-section--m-display-lg__content--MarginTop);
8543
+ position: relative;
8544
+ box-shadow: var(--pf-c-expandable-section--m-display-lg--BoxShadow);
8408
8545
  }
8409
8546
 
8410
- .pf-c-empty-state.pf-m-sm {
8411
- --pf-c-empty-state__content--MaxWidth: var(--pf-c-empty-state--m-sm__content--MaxWidth);
8547
+ .pf-c-expandable-section.pf-m-display-lg::after {
8548
+ position: absolute;
8549
+ top: 0;
8550
+ bottom: 0;
8551
+ left: 0;
8552
+ width: var(--pf-c-expandable-section--m-display-lg--after--Width);
8553
+ content: "";
8554
+ background-color: var(--pf-c-expandable-section--m-display-lg--after--BackgroundColor);
8412
8555
  }
8413
8556
 
8414
- .pf-c-empty-state.pf-m-lg {
8415
- --pf-c-empty-state__content--MaxWidth: var(--pf-c-empty-state--m-lg__content--MaxWidth);
8557
+ .pf-c-expandable-section.pf-m-indented {
8558
+ --pf-c-expandable-section__content--PaddingLeft: var(--pf-c-expandable-section--m-indented__content--PaddingLeft);
8416
8559
  }
8417
8560
 
8418
- .pf-c-empty-state.pf-m-xl {
8419
- --pf-c-empty-state__body--MarginTop: var(--pf-c-empty-state--m-xl__body--MarginTop);
8420
- --pf-c-empty-state__icon--MarginBottom: var(--pf-c-empty-state--m-xl__icon--MarginBottom);
8421
- --pf-c-empty-state__icon--FontSize: var(--pf-c-empty-state--m-xl__icon--FontSize);
8422
- --pf-c-empty-state--c-button__secondary--MarginTop: var(--pf-c-empty-state--m-xl--c-button__secondary--MarginTop);
8561
+ .pf-c-expandable-section.pf-m-truncate {
8562
+ --pf-c-expandable-section__toggle--MarginTop: var(--pf-c-expandable-section--m-truncate__toggle--MarginTop);
8563
+ --pf-c-expandable-section__toggle--PaddingTop: 0;
8564
+ --pf-c-expandable-section__toggle--PaddingRight: 0;
8565
+ --pf-c-expandable-section__toggle--PaddingBottom: 0;
8566
+ --pf-c-expandable-section__toggle-text--MarginLeft: 0;
8423
8567
  }
8424
8568
 
8425
- .pf-c-empty-state.pf-m-xl .pf-c-empty-state__body {
8426
- font-size: var(--pf-c-empty-state--m-xl__body--FontSize);
8569
+ .pf-c-expandable-section.pf-m-truncate:not(.pf-m-expanded) .pf-c-expandable-section__content {
8570
+ display: -webkit-box;
8571
+ -webkit-box-orient: vertical;
8572
+ -webkit-line-clamp: var(--pf-c-expandable-section--m-truncate__content--LineClamp);
8573
+ overflow: hidden;
8427
8574
  }
8428
8575
 
8429
- .pf-c-empty-state.pf-m-full-height {
8430
- height: 100%;
8576
+ .pf-c-expandable-section.pf-m-detached {
8577
+ --pf-c-expandable-section--m-truncate__toggle--MarginTop: 0;
8431
8578
  }
8432
8579
 
8433
- .pf-c-empty-state__content {
8434
- max-width: var(--pf-c-empty-state__content--MaxWidth);
8580
+ .pf-c-expandable-section__toggle {
8581
+ display: flex;
8582
+ padding: var(--pf-c-expandable-section__toggle--PaddingTop) var(--pf-c-expandable-section__toggle--PaddingRight) var(--pf-c-expandable-section__toggle--PaddingBottom) var(--pf-c-expandable-section__toggle--PaddingLeft);
8583
+ margin-top: var(--pf-c-expandable-section__toggle--MarginTop);
8584
+ color: var(--pf-c-expandable-section__toggle--Color);
8585
+ border: none;
8435
8586
  }
8436
8587
 
8437
- .pf-c-empty-state__content > .pf-c-title.pf-m-lg {
8438
- font-size: var(--pf-c-empty-state__content--c-title--m-lg--FontSize);
8588
+ .pf-c-expandable-section__toggle:hover {
8589
+ --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--hover--Color);
8439
8590
  }
8440
8591
 
8441
- .pf-c-empty-state__icon {
8442
- margin-bottom: var(--pf-c-empty-state__icon--MarginBottom);
8443
- font-size: var(--pf-c-empty-state__icon--FontSize);
8444
- color: var(--pf-c-empty-state__icon--Color);
8592
+ .pf-c-expandable-section__toggle:active, .pf-c-expandable-section__toggle.pf-m-active {
8593
+ --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--active--Color);
8445
8594
  }
8446
8595
 
8447
- .pf-c-empty-state__body {
8448
- margin-top: var(--pf-c-empty-state__body--MarginTop);
8449
- color: var(--pf-c-empty-state__body--Color);
8596
+ .pf-c-expandable-section__toggle:focus {
8597
+ --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--focus--Color);
8450
8598
  }
8451
8599
 
8452
- .pf-c-empty-state__content > .pf-c-button.pf-m-primary,
8453
- .pf-c-empty-state__primary {
8454
- margin-top: var(--pf-c-empty-state__primary--MarginTop);
8600
+ .pf-c-expandable-section__toggle-icon {
8601
+ min-width: var(--pf-c-expandable-section__toggle-icon--MinWidth);
8602
+ color: var(--pf-c-expandable-section__toggle-icon--Color);
8603
+ transition: var(--pf-c-expandable-section__toggle-icon--Transition);
8604
+ transform: rotate(var(--pf-c-expandable-section__toggle-icon--Rotate));
8455
8605
  }
8456
8606
 
8457
- .pf-c-empty-state__content > .pf-c-button.pf-m-primary + .pf-c-empty-state__secondary,
8458
- .pf-c-empty-state__primary + .pf-c-empty-state__secondary {
8459
- margin-top: var(--pf-c-empty-state__primary--secondary--MarginTop);
8607
+ .pf-c-expandable-section__toggle-icon.pf-m-expand-top {
8608
+ --pf-c-expandable-section__toggle-icon--Rotate: var(--pf-c-expandable-section__toggle-icon--m-expand-top--Rotate);
8460
8609
  }
8461
8610
 
8462
- .pf-c-empty-state__secondary {
8463
- display: flex;
8464
- flex-wrap: wrap;
8465
- justify-content: center;
8466
- margin-top: var(--pf-c-empty-state__secondary--MarginTop);
8467
- margin-bottom: var(--pf-c-empty-state__secondary--MarginBottom);
8611
+ .pf-c-expandable-section__toggle-text {
8612
+ margin-left: var(--pf-c-expandable-section__toggle-text--MarginLeft);
8468
8613
  }
8469
8614
 
8470
- .pf-c-empty-state__secondary > * {
8471
- margin-right: var(--pf-c-empty-state__secondary--child--MarginRight);
8472
- margin-bottom: var(--pf-c-empty-state__secondary--child--MarginBottom);
8473
- margin-left: var(--pf-c-empty-state__secondary--child--MarginLeft);
8615
+ .pf-c-expandable-section__content {
8616
+ max-width: var(--pf-c-expandable-section__content--MaxWidth);
8617
+ padding-right: var(--pf-c-expandable-section__content--PaddingRight);
8618
+ padding-bottom: var(--pf-c-expandable-section__content--PaddingBottom);
8619
+ padding-left: var(--pf-c-expandable-section__content--PaddingLeft);
8620
+ margin-top: var(--pf-c-expandable-section__content--MarginTop);
8474
8621
  }
8475
8622
 
8476
- .pf-m-overpass-font .pf-c-empty-state .pf-c-empty-state__content > .pf-c-title.pf-m-lg {
8477
- font-size: var(--pf-global--FontSize--lg);
8623
+ .pf-m-overpass-font .pf-c-expandable-section__toggle {
8624
+ font-weight: var(--pf-global--FontWeight--semi-bold);
8478
8625
  }
8479
8626
 
8480
8627
  .pf-c-file-upload {
@@ -9097,171 +9244,24 @@ label.pf-c-check, .pf-c-check__label,
9097
9244
  }
9098
9245
 
9099
9246
  .pf-c-form__field-group-body {
9100
- grid-column: var(--pf-c-form__field-group-body--GridColumn);
9101
- display: grid;
9102
- gap: var(--pf-c-form__field-group-body--Gap);
9103
- padding-top: var(--pf-c-form__field-group-body--PaddingTop);
9104
- padding-bottom: var(--pf-c-form__field-group-body--PaddingBottom);
9105
- }
9106
-
9107
- .pf-c-form__field-group-body > .pf-c-form__field-group:first-child {
9108
- --pf-c-form__field-group-toggle--PaddingTop: 0;
9109
- --pf-c-form__field-group-header--PaddingTop: 0;
9110
- }
9111
-
9112
- .pf-c-form__field-group-body > .pf-c-form__field-group:last-child {
9113
- margin-bottom: var(--pf-c-form__field-group-body__field-group--last-child--MarginBottom);
9114
- }
9115
-
9116
- :where(.pf-theme-dark) .pf-c-form {
9117
- --pf-c-form__helper-text--m-success--Color: var(--pf-global--success-color--100);
9118
- }
9119
-
9120
- .pf-c-expandable-section {
9121
- --pf-c-expandable-section__toggle--PaddingTop: var(--pf-global--spacer--form-element);
9122
- --pf-c-expandable-section__toggle--PaddingRight: var(--pf-global--spacer--md);
9123
- --pf-c-expandable-section__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
9124
- --pf-c-expandable-section__toggle--PaddingLeft: 0;
9125
- --pf-c-expandable-section__toggle--MarginTop: 0;
9126
- --pf-c-expandable-section__toggle--Color: var(--pf-global--link--Color);
9127
- --pf-c-expandable-section__toggle--hover--Color: var(--pf-global--link--Color--hover);
9128
- --pf-c-expandable-section__toggle--active--Color: var(--pf-global--link--Color--hover);
9129
- --pf-c-expandable-section__toggle--focus--Color: var(--pf-global--link--Color--hover);
9130
- --pf-c-expandable-section__toggle--m-expanded--Color: var(--pf-global--link--Color--hover);
9131
- --pf-c-expandable-section__toggle-icon--MinWidth: 1em;
9132
- --pf-c-expandable-section__toggle-icon--Color: var(--pf-global--Color--100);
9133
- --pf-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
9134
- --pf-c-expandable-section__toggle-icon--Rotate: 0;
9135
- --pf-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
9136
- --pf-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
9137
- --pf-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
9138
- --pf-c-expandable-section__toggle-text--MarginLeft: calc(var(--pf-global--spacer--xs) + var(--pf-global--spacer--sm));
9139
- --pf-c-expandable-section__content--MarginTop: var(--pf-global--spacer--md);
9140
- --pf-c-expandable-section__content--MaxWidth: auto;
9141
- --pf-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
9142
- --pf-c-expandable-section--m-display-lg--BoxShadow: var(--pf-global--BoxShadow--md);
9143
- --pf-c-expandable-section--m-display-lg__toggle--PaddingTop: var(--pf-global--spacer--md);
9144
- --pf-c-expandable-section--m-display-lg__toggle--PaddingRight: var(--pf-global--spacer--md);
9145
- --pf-c-expandable-section--m-display-lg__toggle--PaddingBottom: var(--pf-global--spacer--md);
9146
- --pf-c-expandable-section--m-display-lg__toggle--PaddingLeft: var(--pf-global--spacer--md);
9147
- --pf-c-expandable-section--m-display-lg__content--MarginTop: 0;
9148
- --pf-c-expandable-section--m-display-lg__content--PaddingRight: var(--pf-global--spacer--lg);
9149
- --pf-c-expandable-section--m-display-lg__content--PaddingBottom: var(--pf-global--spacer--lg);
9150
- --pf-c-expandable-section--m-display-lg__content--PaddingLeft: var(--pf-global--spacer--lg);
9151
- --pf-c-expandable-section--m-display-lg--after--BackgroundColor: transparent;
9152
- --pf-c-expandable-section--m-display-lg--after--Width: var(--pf-global--BorderWidth--lg);
9153
- --pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor: var(--pf-global--primary-color--100);
9154
- --pf-c-expandable-section--m-indented__content--PaddingLeft: calc(var(--pf-c-expandable-section__toggle-text--MarginLeft) + var(--pf-c-expandable-section__toggle-icon--MinWidth));
9155
- --pf-c-expandable-section--m-truncate__content--LineClamp: 3;
9156
- --pf-c-expandable-section--m-truncate__toggle--MarginTop: var(--pf-global--spacer--xs);
9157
- }
9158
-
9159
- .pf-c-expandable-section.pf-m-expanded {
9160
- --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--m-expanded--Color);
9161
- --pf-c-expandable-section__toggle-icon--Rotate: var(--pf-c-expandable-section--m-expanded__toggle-icon--Rotate);
9162
- --pf-c-expandable-section__toggle-icon--m-expand-top--Rotate: var(--pf-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate);
9163
- --pf-c-expandable-section--m-display-lg--after--BackgroundColor: var(--pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor);
9164
- }
9165
-
9166
- .pf-c-expandable-section.pf-m-detached, .pf-c-expandable-section.pf-m-truncate {
9167
- --pf-c-expandable-section__content--MarginTop: 0;
9168
- }
9169
-
9170
- .pf-c-expandable-section.pf-m-limit-width {
9171
- --pf-c-expandable-section__content--MaxWidth: var(--pf-c-expandable-section--m-limit-width__content--MaxWidth);
9172
- }
9173
-
9174
- .pf-c-expandable-section.pf-m-display-lg {
9175
- --pf-c-expandable-section__toggle--PaddingTop: var(--pf-c-expandable-section--m-display-lg__toggle--PaddingTop);
9176
- --pf-c-expandable-section__toggle--PaddingRight: var(--pf-c-expandable-section--m-display-lg__toggle--PaddingRight);
9177
- --pf-c-expandable-section__toggle--PaddingBottom: var(--pf-c-expandable-section--m-display-lg__toggle--PaddingBottom);
9178
- --pf-c-expandable-section__toggle--PaddingLeft: var(--pf-c-expandable-section--m-display-lg__toggle--PaddingLeft);
9179
- --pf-c-expandable-section__content--PaddingRight: var(--pf-c-expandable-section--m-display-lg__content--PaddingRight);
9180
- --pf-c-expandable-section__content--PaddingBottom: var(--pf-c-expandable-section--m-display-lg__content--PaddingBottom);
9181
- --pf-c-expandable-section__content--PaddingLeft: var(--pf-c-expandable-section--m-display-lg__content--PaddingLeft);
9182
- --pf-c-expandable-section__content--MarginTop: var(--pf-c-expandable-section--m-display-lg__content--MarginTop);
9183
- position: relative;
9184
- box-shadow: var(--pf-c-expandable-section--m-display-lg--BoxShadow);
9185
- }
9186
-
9187
- .pf-c-expandable-section.pf-m-display-lg::after {
9188
- position: absolute;
9189
- top: 0;
9190
- bottom: 0;
9191
- left: 0;
9192
- width: var(--pf-c-expandable-section--m-display-lg--after--Width);
9193
- content: "";
9194
- background-color: var(--pf-c-expandable-section--m-display-lg--after--BackgroundColor);
9195
- }
9196
-
9197
- .pf-c-expandable-section.pf-m-indented {
9198
- --pf-c-expandable-section__content--PaddingLeft: var(--pf-c-expandable-section--m-indented__content--PaddingLeft);
9199
- }
9200
-
9201
- .pf-c-expandable-section.pf-m-truncate {
9202
- --pf-c-expandable-section__toggle--MarginTop: var(--pf-c-expandable-section--m-truncate__toggle--MarginTop);
9203
- --pf-c-expandable-section__toggle--PaddingTop: 0;
9204
- --pf-c-expandable-section__toggle--PaddingRight: 0;
9205
- --pf-c-expandable-section__toggle--PaddingBottom: 0;
9206
- --pf-c-expandable-section__toggle-text--MarginLeft: 0;
9207
- }
9208
-
9209
- .pf-c-expandable-section.pf-m-truncate:not(.pf-m-expanded) .pf-c-expandable-section__content {
9210
- display: -webkit-box;
9211
- -webkit-box-orient: vertical;
9212
- -webkit-line-clamp: var(--pf-c-expandable-section--m-truncate__content--LineClamp);
9213
- overflow: hidden;
9214
- }
9215
-
9216
- .pf-c-expandable-section.pf-m-detached {
9217
- --pf-c-expandable-section--m-truncate__toggle--MarginTop: 0;
9218
- }
9219
-
9220
- .pf-c-expandable-section__toggle {
9221
- display: flex;
9222
- padding: var(--pf-c-expandable-section__toggle--PaddingTop) var(--pf-c-expandable-section__toggle--PaddingRight) var(--pf-c-expandable-section__toggle--PaddingBottom) var(--pf-c-expandable-section__toggle--PaddingLeft);
9223
- margin-top: var(--pf-c-expandable-section__toggle--MarginTop);
9224
- color: var(--pf-c-expandable-section__toggle--Color);
9225
- border: none;
9226
- }
9227
-
9228
- .pf-c-expandable-section__toggle:hover {
9229
- --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--hover--Color);
9230
- }
9231
-
9232
- .pf-c-expandable-section__toggle:active, .pf-c-expandable-section__toggle.pf-m-active {
9233
- --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--active--Color);
9234
- }
9235
-
9236
- .pf-c-expandable-section__toggle:focus {
9237
- --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--focus--Color);
9238
- }
9239
-
9240
- .pf-c-expandable-section__toggle-icon {
9241
- min-width: var(--pf-c-expandable-section__toggle-icon--MinWidth);
9242
- color: var(--pf-c-expandable-section__toggle-icon--Color);
9243
- transition: var(--pf-c-expandable-section__toggle-icon--Transition);
9244
- transform: rotate(var(--pf-c-expandable-section__toggle-icon--Rotate));
9245
- }
9246
-
9247
- .pf-c-expandable-section__toggle-icon.pf-m-expand-top {
9248
- --pf-c-expandable-section__toggle-icon--Rotate: var(--pf-c-expandable-section__toggle-icon--m-expand-top--Rotate);
9247
+ grid-column: var(--pf-c-form__field-group-body--GridColumn);
9248
+ display: grid;
9249
+ gap: var(--pf-c-form__field-group-body--Gap);
9250
+ padding-top: var(--pf-c-form__field-group-body--PaddingTop);
9251
+ padding-bottom: var(--pf-c-form__field-group-body--PaddingBottom);
9249
9252
  }
9250
9253
 
9251
- .pf-c-expandable-section__toggle-text {
9252
- margin-left: var(--pf-c-expandable-section__toggle-text--MarginLeft);
9254
+ .pf-c-form__field-group-body > .pf-c-form__field-group:first-child {
9255
+ --pf-c-form__field-group-toggle--PaddingTop: 0;
9256
+ --pf-c-form__field-group-header--PaddingTop: 0;
9253
9257
  }
9254
9258
 
9255
- .pf-c-expandable-section__content {
9256
- max-width: var(--pf-c-expandable-section__content--MaxWidth);
9257
- padding-right: var(--pf-c-expandable-section__content--PaddingRight);
9258
- padding-bottom: var(--pf-c-expandable-section__content--PaddingBottom);
9259
- padding-left: var(--pf-c-expandable-section__content--PaddingLeft);
9260
- margin-top: var(--pf-c-expandable-section__content--MarginTop);
9259
+ .pf-c-form__field-group-body > .pf-c-form__field-group:last-child {
9260
+ margin-bottom: var(--pf-c-form__field-group-body__field-group--last-child--MarginBottom);
9261
9261
  }
9262
9262
 
9263
- .pf-m-overpass-font .pf-c-expandable-section__toggle {
9264
- font-weight: var(--pf-global--FontWeight--semi-bold);
9263
+ :where(.pf-theme-dark) .pf-c-form {
9264
+ --pf-c-form__helper-text--m-success--Color: var(--pf-global--success-color--100);
9265
9265
  }
9266
9266
 
9267
9267
  .pf-c-helper-text {
@@ -18847,6 +18847,20 @@ label.pf-c-radio, .pf-c-radio__label,
18847
18847
  --pf-c-skeleton--after--LinearGradientColorStop3: var(--pf-global--palette--black-600);
18848
18848
  }
18849
18849
 
18850
+ .pf-c-skip-to-content {
18851
+ --pf-c-skip-to-content--Top: var(--pf-global--spacer--md);
18852
+ --pf-c-skip-to-content--ZIndex: var(--pf-global--ZIndex--2xl);
18853
+ --pf-c-skip-to-content--focus--Left: var(--pf-global--spacer--md);
18854
+ position: absolute;
18855
+ top: var(--pf-c-skip-to-content--Top);
18856
+ left: -300%;
18857
+ z-index: var(--pf-c-skip-to-content--ZIndex);
18858
+ }
18859
+
18860
+ .pf-c-skip-to-content:focus {
18861
+ left: var(--pf-c-skip-to-content--focus--Left);
18862
+ }
18863
+
18850
18864
  .pf-c-slider {
18851
18865
  --pf-c-slider--value: 0;
18852
18866
  --pf-c-slider__rail--PaddingTop: var(--pf-global--spacer--md);
@@ -19066,59 +19080,6 @@ label.pf-c-radio, .pf-c-radio__label,
19066
19080
  margin-left: var(--pf-c-slider__main--actions--MarginLeft);
19067
19081
  }
19068
19082
 
19069
- .pf-c-skip-to-content {
19070
- --pf-c-skip-to-content--Top: var(--pf-global--spacer--md);
19071
- --pf-c-skip-to-content--ZIndex: var(--pf-global--ZIndex--2xl);
19072
- --pf-c-skip-to-content--focus--Left: var(--pf-global--spacer--md);
19073
- position: absolute;
19074
- top: var(--pf-c-skip-to-content--Top);
19075
- left: -300%;
19076
- z-index: var(--pf-c-skip-to-content--ZIndex);
19077
- }
19078
-
19079
- .pf-c-skip-to-content:focus {
19080
- left: var(--pf-c-skip-to-content--focus--Left);
19081
- }
19082
-
19083
- .pf-c-tab-content {
19084
- --pf-c-tab-content__body--PaddingTop: 0;
19085
- --pf-c-tab-content__body--PaddingRight: 0;
19086
- --pf-c-tab-content__body--PaddingBottom: 0;
19087
- --pf-c-tab-content__body--PaddingLeft: 0;
19088
- --pf-c-tab-content__body--m-padding--PaddingTop: var(--pf-global--spacer--md);
19089
- --pf-c-tab-content__body--m-padding--PaddingRight: var(--pf-global--spacer--md);
19090
- --pf-c-tab-content__body--m-padding--PaddingBottom: var(--pf-global--spacer--md);
19091
- --pf-c-tab-content__body--m-padding--PaddingLeft: var(--pf-global--spacer--md);
19092
- --pf-c-tab-content__body--m-padding--xl--PaddingTop: var(--pf-global--spacer--lg);
19093
- --pf-c-tab-content__body--m-padding--xl--PaddingRight: var(--pf-global--spacer--lg);
19094
- --pf-c-tab-content__body--m-padding--xl--PaddingBottom: var(--pf-global--spacer--lg);
19095
- --pf-c-tab-content__body--m-padding--xl--PaddingLeft: var(--pf-global--spacer--lg);
19096
- --pf-c-tab-content--m-light-300: var(--pf-global--BackgroundColor--light-300);
19097
- }
19098
-
19099
- @media screen and (min-width: 1200px) {
19100
- .pf-c-tab-content {
19101
- --pf-c-tab-content__body--m-padding--PaddingTop: var(--pf-c-tab-content__body--m-padding--xl--PaddingTop);
19102
- --pf-c-tab-content__body--m-padding--PaddingRight: var(--pf-c-tab-content__body--m-padding--xl--PaddingRight);
19103
- --pf-c-tab-content__body--m-padding--PaddingBottom: var(--pf-c-tab-content__body--m-padding--xl--PaddingBottom);
19104
- --pf-c-tab-content__body--m-padding--PaddingLeft: var(--pf-c-tab-content__body--m-padding--xl--PaddingLeft);
19105
- }
19106
- }
19107
- .pf-c-tab-content.pf-m-light-300 {
19108
- background-color: var(--pf-c-tab-content--m-light-300);
19109
- }
19110
-
19111
- .pf-c-tab-content__body {
19112
- padding: var(--pf-c-tab-content__body--PaddingTop) var(--pf-c-tab-content__body--PaddingRight) var(--pf-c-tab-content__body--PaddingBottom) var(--pf-c-tab-content__body--PaddingLeft);
19113
- }
19114
-
19115
- .pf-c-tab-content__body.pf-m-padding {
19116
- --pf-c-tab-content__body--PaddingTop: var(--pf-c-tab-content__body--m-padding--PaddingTop);
19117
- --pf-c-tab-content__body--PaddingRight: var(--pf-c-tab-content__body--m-padding--PaddingRight);
19118
- --pf-c-tab-content__body--PaddingBottom: var(--pf-c-tab-content__body--m-padding--PaddingBottom);
19119
- --pf-c-tab-content__body--PaddingLeft: var(--pf-c-tab-content__body--m-padding--PaddingLeft);
19120
- }
19121
-
19122
19083
  .pf-c-spinner {
19123
19084
  --pf-c-spinner--diameter: var(--pf-global--icon--FontSize--xl);
19124
19085
  --pf-c-spinner--Width: var(--pf-c-spinner--diameter);
@@ -19299,55 +19260,215 @@ svg.pf-c-spinner.pf-m-sm {
19299
19260
  --pf-c-spinner--diameter: var(--pf-c-spinner--m-sm--diameter);
19300
19261
  }
19301
19262
 
19302
- svg.pf-c-spinner.pf-m-md {
19303
- --pf-c-spinner--diameter: var(--pf-c-spinner--m-md--diameter);
19263
+ svg.pf-c-spinner.pf-m-md {
19264
+ --pf-c-spinner--diameter: var(--pf-c-spinner--m-md--diameter);
19265
+ }
19266
+
19267
+ svg.pf-c-spinner.pf-m-lg {
19268
+ --pf-c-spinner--diameter: var(--pf-c-spinner--m-lg--diameter);
19269
+ }
19270
+
19271
+ svg.pf-c-spinner.pf-m-xl {
19272
+ --pf-c-spinner--diameter: var(--pf-c-spinner--m-xl--diameter);
19273
+ }
19274
+
19275
+ .pf-c-spinner__path {
19276
+ width: 100%;
19277
+ height: 100%;
19278
+ transform-origin: 50% 50%;
19279
+ animation: pf-c-spinner-animation-dash var(--pf-c-spinner--AnimationDuration) var(--pf-c-spinner__path--AnimationTimingFunction) infinite;
19280
+ stroke: var(--pf-c-spinner--Color);
19281
+ stroke-linecap: round;
19282
+ stroke-dasharray: 283;
19283
+ stroke-dashoffset: 280;
19284
+ stroke-width: var(--pf-c-spinner--stroke-width);
19285
+ }
19286
+
19287
+ @keyframes pf-c-spinner-animation-rotate {
19288
+ 0% {
19289
+ transform: rotate(0deg);
19290
+ }
19291
+ 100% {
19292
+ transform: rotate(360deg);
19293
+ }
19294
+ }
19295
+ @keyframes pf-c-spinner-animation-dash {
19296
+ 0% {
19297
+ stroke-dashoffset: 280;
19298
+ transform: rotate(0);
19299
+ }
19300
+ 15% {
19301
+ stroke-width: calc(var(--pf-c-spinner__path--StrokeWidth) - 4);
19302
+ }
19303
+ 40% {
19304
+ stroke-dashoffset: 150;
19305
+ stroke-dasharray: 220;
19306
+ }
19307
+ 100% {
19308
+ stroke-dashoffset: 280;
19309
+ transform: rotate(720deg);
19310
+ }
19311
+ }
19312
+ .pf-c-switch {
19313
+ --pf-c-switch--FontSize: var(--pf-global--FontSize--md);
19314
+ --pf-c-switch__label--PaddingLeft: var(--pf-global--spacer--md);
19315
+ --pf-c-switch--ColumnGap: var(--pf-c-switch__label--PaddingLeft);
19316
+ --pf-c-switch__toggle-icon--FontSize: calc(var(--pf-c-switch--FontSize) * .625);
19317
+ --pf-c-switch__toggle-icon--Color: var(--pf-global--Color--light-100);
19318
+ --pf-c-switch__toggle-icon--Left: calc(var(--pf-c-switch--FontSize) * .4);
19319
+ --pf-c-switch__toggle-icon--Offset: 0.125rem;
19320
+ --pf-c-switch--LineHeight: var(--pf-global--LineHeight--md);
19321
+ --pf-c-switch--Height: auto;
19322
+ --pf-c-switch__input--checked__toggle--BackgroundColor: var(--pf-global--primary-color--100);
19323
+ --pf-c-switch__input--checked__toggle--before--TranslateX: calc(100% + var(--pf-c-switch__toggle-icon--Offset));
19324
+ --pf-c-switch__input--checked__label--Color: var(--pf-global--Color--dark-100);
19325
+ --pf-c-switch__input--not-checked__label--Color: var(--pf-global--disabled-color--100);
19326
+ --pf-c-switch__input--disabled__label--Color: var(--pf-global--disabled-color--100);
19327
+ --pf-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-global--disabled-color--200);
19328
+ --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--palette--black-150);
19329
+ --pf-c-switch__input--focus__toggle--OutlineWidth: var(--pf-global--BorderWidth--md);
19330
+ --pf-c-switch__input--focus__toggle--OutlineOffset: var(--pf-global--spacer--sm);
19331
+ --pf-c-switch__input--focus__toggle--OutlineColor: var(--pf-global--primary-color--100);
19332
+ --pf-c-switch__toggle--Height: calc(var(--pf-c-switch--FontSize) * var(--pf-c-switch--LineHeight));
19333
+ --pf-c-switch__toggle--BackgroundColor: var(--pf-global--palette--black-500);
19334
+ --pf-c-switch__toggle--BorderRadius: var(--pf-c-switch__toggle--Height);
19335
+ --pf-c-switch__toggle--before--Width: calc(var(--pf-c-switch--FontSize) - var(--pf-c-switch__toggle-icon--Offset));
19336
+ --pf-c-switch__toggle--before--Height: var(--pf-c-switch__toggle--before--Width);
19337
+ --pf-c-switch__toggle--before--Top: calc((var(--pf-c-switch__toggle--Height) - var(--pf-c-switch__toggle--before--Height)) / 2);
19338
+ --pf-c-switch__toggle--before--Left: var(--pf-c-switch__toggle--before--Top);
19339
+ --pf-c-switch__toggle--before--BackgroundColor: var(--pf-global--BackgroundColor--100);
19340
+ --pf-c-switch__toggle--before--BorderRadius: var(--pf-global--BorderRadius--lg);
19341
+ --pf-c-switch__toggle--before--BoxShadow: var(--pf-global--BoxShadow--md);
19342
+ --pf-c-switch__toggle--before--Transition: transform .25s ease 0s;
19343
+ --pf-c-switch__toggle--Width: calc(var(--pf-c-switch__toggle--Height) + var(--pf-c-switch__toggle-icon--Offset) + var(--pf-c-switch__toggle--before--Width));
19344
+ --pf-c-switch__label--Color: var(--pf-global--Color--dark-100);
19345
+ position: relative;
19346
+ display: inline-grid;
19347
+ grid-template-columns: auto;
19348
+ grid-auto-columns: 1fr;
19349
+ column-gap: var(--pf-c-switch--ColumnGap);
19350
+ height: var(--pf-c-switch--Height);
19351
+ font-size: var(--pf-c-switch--FontSize);
19352
+ line-height: var(--pf-c-switch--LineHeight);
19353
+ vertical-align: middle;
19354
+ cursor: pointer;
19355
+ }
19356
+
19357
+ .pf-c-switch.pf-m-reverse .pf-c-switch__label,
19358
+ .pf-c-switch.pf-m-reverse .pf-c-switch__toggle {
19359
+ grid-row: 1;
19360
+ }
19361
+
19362
+ .pf-c-switch.pf-m-reverse .pf-c-switch__label {
19363
+ grid-column: 1;
19364
+ }
19365
+
19366
+ .pf-c-switch__input {
19367
+ position: absolute;
19368
+ cursor: pointer;
19369
+ opacity: 0;
19370
+ }
19371
+
19372
+ .pf-c-switch__input:focus ~ .pf-c-switch__toggle {
19373
+ outline: var(--pf-c-switch__input--focus__toggle--OutlineWidth) solid var(--pf-c-switch__input--focus__toggle--OutlineColor);
19374
+ outline-offset: var(--pf-c-switch__input--focus__toggle--OutlineOffset);
19375
+ }
19376
+
19377
+ .pf-c-switch__input:checked ~ .pf-c-switch__label {
19378
+ color: var(--pf-c-switch__input--checked__label--Color);
19379
+ }
19380
+
19381
+ .pf-c-switch__input:checked ~ .pf-c-switch__toggle {
19382
+ background-color: var(--pf-c-switch__input--checked__toggle--BackgroundColor);
19383
+ }
19384
+
19385
+ .pf-c-switch__input:checked ~ .pf-c-switch__toggle::before {
19386
+ transform: translateX(var(--pf-c-switch__input--checked__toggle--before--TranslateX));
19387
+ }
19388
+
19389
+ .pf-c-switch__input:checked ~ .pf-m-off {
19390
+ display: none;
19391
+ }
19392
+
19393
+ .pf-c-switch__input:not(:checked) ~ .pf-c-switch__label {
19394
+ color: var(--pf-c-switch__input--not-checked__label--Color);
19395
+ }
19396
+
19397
+ .pf-c-switch__input:not(:checked) ~ .pf-c-switch__toggle .pf-c-switch__toggle-icon {
19398
+ display: none;
19399
+ visibility: hidden;
19400
+ }
19401
+
19402
+ .pf-c-switch__input:not(:checked) ~ .pf-m-on {
19403
+ display: none;
19404
+ }
19405
+
19406
+ .pf-c-switch__input:disabled {
19407
+ cursor: not-allowed;
19408
+ }
19409
+
19410
+ .pf-c-switch__input:disabled ~ .pf-c-switch__label {
19411
+ color: var(--pf-c-switch__input--disabled__label--Color);
19412
+ cursor: not-allowed;
19413
+ }
19414
+
19415
+ .pf-c-switch__input:disabled ~ .pf-c-switch__toggle {
19416
+ cursor: not-allowed;
19417
+ background-color: var(--pf-c-switch__input--disabled__toggle--BackgroundColor);
19418
+ }
19419
+
19420
+ .pf-c-switch__input:disabled ~ .pf-c-switch__toggle::before {
19421
+ background-color: var(--pf-c-switch__input--disabled__toggle--before--BackgroundColor);
19422
+ }
19423
+
19424
+ .pf-c-switch__toggle {
19425
+ position: relative;
19426
+ display: inline-block;
19427
+ width: var(--pf-c-switch__toggle--Width);
19428
+ height: var(--pf-c-switch__toggle--Height);
19429
+ background-color: var(--pf-c-switch__toggle--BackgroundColor);
19430
+ border-radius: var(--pf-c-switch__toggle--BorderRadius);
19431
+ }
19432
+
19433
+ .pf-c-switch__toggle::before {
19434
+ position: absolute;
19435
+ top: var(--pf-c-switch__toggle--before--Top);
19436
+ left: var(--pf-c-switch__toggle--before--Left);
19437
+ display: block;
19438
+ width: var(--pf-c-switch__toggle--before--Width);
19439
+ height: var(--pf-c-switch__toggle--before--Height);
19440
+ content: "";
19441
+ background-color: var(--pf-c-switch__toggle--before--BackgroundColor);
19442
+ border-radius: var(--pf-c-switch__toggle--before--BorderRadius);
19443
+ box-shadow: var(--pf-c-switch__toggle--before--BoxShadow);
19444
+ transition: var(--pf-c-switch__toggle--before--Transition);
19304
19445
  }
19305
19446
 
19306
- svg.pf-c-spinner.pf-m-lg {
19307
- --pf-c-spinner--diameter: var(--pf-c-spinner--m-lg--diameter);
19447
+ .pf-c-switch__toggle-icon {
19448
+ position: absolute;
19449
+ top: 0;
19450
+ bottom: 0;
19451
+ left: var(--pf-c-switch__toggle-icon--Left);
19452
+ display: flex;
19453
+ align-items: center;
19454
+ font-size: var(--pf-c-switch__toggle-icon--FontSize);
19455
+ color: var(--pf-c-switch__toggle-icon--Color);
19308
19456
  }
19309
19457
 
19310
- svg.pf-c-spinner.pf-m-xl {
19311
- --pf-c-spinner--diameter: var(--pf-c-spinner--m-xl--diameter);
19458
+ .pf-c-switch__label {
19459
+ display: inline-block;
19460
+ grid-column: 2;
19461
+ color: var(--pf-c-switch__label--Color);
19462
+ vertical-align: top;
19312
19463
  }
19313
19464
 
19314
- .pf-c-spinner__path {
19315
- width: 100%;
19316
- height: 100%;
19317
- transform-origin: 50% 50%;
19318
- animation: pf-c-spinner-animation-dash var(--pf-c-spinner--AnimationDuration) var(--pf-c-spinner__path--AnimationTimingFunction) infinite;
19319
- stroke: var(--pf-c-spinner--Color);
19320
- stroke-linecap: round;
19321
- stroke-dasharray: 283;
19322
- stroke-dashoffset: 280;
19323
- stroke-width: var(--pf-c-spinner--stroke-width);
19465
+ :where(.pf-theme-dark) .pf-c-switch {
19466
+ --pf-c-switch__toggle-icon--Color: var(--pf-global--BackgroundColor--100);
19467
+ --pf-c-switch__input--not-checked__label--Color: var(--pf-global--Color--100);
19468
+ --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--disabled-color--100);
19469
+ --pf-c-switch__toggle--before--BoxShadow: none;
19324
19470
  }
19325
19471
 
19326
- @keyframes pf-c-spinner-animation-rotate {
19327
- 0% {
19328
- transform: rotate(0deg);
19329
- }
19330
- 100% {
19331
- transform: rotate(360deg);
19332
- }
19333
- }
19334
- @keyframes pf-c-spinner-animation-dash {
19335
- 0% {
19336
- stroke-dashoffset: 280;
19337
- transform: rotate(0);
19338
- }
19339
- 15% {
19340
- stroke-width: calc(var(--pf-c-spinner__path--StrokeWidth) - 4);
19341
- }
19342
- 40% {
19343
- stroke-dashoffset: 150;
19344
- stroke-dasharray: 220;
19345
- }
19346
- 100% {
19347
- stroke-dashoffset: 280;
19348
- transform: rotate(720deg);
19349
- }
19350
- }
19351
19472
  .pf-c-tabs {
19352
19473
  --pf-c-tabs--inset: 0;
19353
19474
  --pf-c-tabs--Width: auto;
@@ -20318,164 +20439,43 @@ svg.pf-c-spinner.pf-m-xl {
20318
20439
  --pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
20319
20440
  }
20320
20441
 
20321
- .pf-c-switch {
20322
- --pf-c-switch--FontSize: var(--pf-global--FontSize--md);
20323
- --pf-c-switch__label--PaddingLeft: var(--pf-global--spacer--md);
20324
- --pf-c-switch--ColumnGap: var(--pf-c-switch__label--PaddingLeft);
20325
- --pf-c-switch__toggle-icon--FontSize: calc(var(--pf-c-switch--FontSize) * .625);
20326
- --pf-c-switch__toggle-icon--Color: var(--pf-global--Color--light-100);
20327
- --pf-c-switch__toggle-icon--Left: calc(var(--pf-c-switch--FontSize) * .4);
20328
- --pf-c-switch__toggle-icon--Offset: 0.125rem;
20329
- --pf-c-switch--LineHeight: var(--pf-global--LineHeight--md);
20330
- --pf-c-switch--Height: auto;
20331
- --pf-c-switch__input--checked__toggle--BackgroundColor: var(--pf-global--primary-color--100);
20332
- --pf-c-switch__input--checked__toggle--before--TranslateX: calc(100% + var(--pf-c-switch__toggle-icon--Offset));
20333
- --pf-c-switch__input--checked__label--Color: var(--pf-global--Color--dark-100);
20334
- --pf-c-switch__input--not-checked__label--Color: var(--pf-global--disabled-color--100);
20335
- --pf-c-switch__input--disabled__label--Color: var(--pf-global--disabled-color--100);
20336
- --pf-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-global--disabled-color--200);
20337
- --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--palette--black-150);
20338
- --pf-c-switch__input--focus__toggle--OutlineWidth: var(--pf-global--BorderWidth--md);
20339
- --pf-c-switch__input--focus__toggle--OutlineOffset: var(--pf-global--spacer--sm);
20340
- --pf-c-switch__input--focus__toggle--OutlineColor: var(--pf-global--primary-color--100);
20341
- --pf-c-switch__toggle--Height: calc(var(--pf-c-switch--FontSize) * var(--pf-c-switch--LineHeight));
20342
- --pf-c-switch__toggle--BackgroundColor: var(--pf-global--palette--black-500);
20343
- --pf-c-switch__toggle--BorderRadius: var(--pf-c-switch__toggle--Height);
20344
- --pf-c-switch__toggle--before--Width: calc(var(--pf-c-switch--FontSize) - var(--pf-c-switch__toggle-icon--Offset));
20345
- --pf-c-switch__toggle--before--Height: var(--pf-c-switch__toggle--before--Width);
20346
- --pf-c-switch__toggle--before--Top: calc((var(--pf-c-switch__toggle--Height) - var(--pf-c-switch__toggle--before--Height)) / 2);
20347
- --pf-c-switch__toggle--before--Left: var(--pf-c-switch__toggle--before--Top);
20348
- --pf-c-switch__toggle--before--BackgroundColor: var(--pf-global--BackgroundColor--100);
20349
- --pf-c-switch__toggle--before--BorderRadius: var(--pf-global--BorderRadius--lg);
20350
- --pf-c-switch__toggle--before--BoxShadow: var(--pf-global--BoxShadow--md);
20351
- --pf-c-switch__toggle--before--Transition: transform .25s ease 0s;
20352
- --pf-c-switch__toggle--Width: calc(var(--pf-c-switch__toggle--Height) + var(--pf-c-switch__toggle-icon--Offset) + var(--pf-c-switch__toggle--before--Width));
20353
- --pf-c-switch__label--Color: var(--pf-global--Color--dark-100);
20354
- position: relative;
20355
- display: inline-grid;
20356
- grid-template-columns: auto;
20357
- grid-auto-columns: 1fr;
20358
- column-gap: var(--pf-c-switch--ColumnGap);
20359
- height: var(--pf-c-switch--Height);
20360
- font-size: var(--pf-c-switch--FontSize);
20361
- line-height: var(--pf-c-switch--LineHeight);
20362
- vertical-align: middle;
20363
- cursor: pointer;
20364
- }
20365
-
20366
- .pf-c-switch.pf-m-reverse .pf-c-switch__label,
20367
- .pf-c-switch.pf-m-reverse .pf-c-switch__toggle {
20368
- grid-row: 1;
20369
- }
20370
-
20371
- .pf-c-switch.pf-m-reverse .pf-c-switch__label {
20372
- grid-column: 1;
20373
- }
20374
-
20375
- .pf-c-switch__input {
20376
- position: absolute;
20377
- cursor: pointer;
20378
- opacity: 0;
20379
- }
20380
-
20381
- .pf-c-switch__input:focus ~ .pf-c-switch__toggle {
20382
- outline: var(--pf-c-switch__input--focus__toggle--OutlineWidth) solid var(--pf-c-switch__input--focus__toggle--OutlineColor);
20383
- outline-offset: var(--pf-c-switch__input--focus__toggle--OutlineOffset);
20384
- }
20385
-
20386
- .pf-c-switch__input:checked ~ .pf-c-switch__label {
20387
- color: var(--pf-c-switch__input--checked__label--Color);
20388
- }
20389
-
20390
- .pf-c-switch__input:checked ~ .pf-c-switch__toggle {
20391
- background-color: var(--pf-c-switch__input--checked__toggle--BackgroundColor);
20392
- }
20393
-
20394
- .pf-c-switch__input:checked ~ .pf-c-switch__toggle::before {
20395
- transform: translateX(var(--pf-c-switch__input--checked__toggle--before--TranslateX));
20396
- }
20397
-
20398
- .pf-c-switch__input:checked ~ .pf-m-off {
20399
- display: none;
20400
- }
20401
-
20402
- .pf-c-switch__input:not(:checked) ~ .pf-c-switch__label {
20403
- color: var(--pf-c-switch__input--not-checked__label--Color);
20404
- }
20405
-
20406
- .pf-c-switch__input:not(:checked) ~ .pf-c-switch__toggle .pf-c-switch__toggle-icon {
20407
- display: none;
20408
- visibility: hidden;
20409
- }
20410
-
20411
- .pf-c-switch__input:not(:checked) ~ .pf-m-on {
20412
- display: none;
20413
- }
20414
-
20415
- .pf-c-switch__input:disabled {
20416
- cursor: not-allowed;
20417
- }
20418
-
20419
- .pf-c-switch__input:disabled ~ .pf-c-switch__label {
20420
- color: var(--pf-c-switch__input--disabled__label--Color);
20421
- cursor: not-allowed;
20422
- }
20423
-
20424
- .pf-c-switch__input:disabled ~ .pf-c-switch__toggle {
20425
- cursor: not-allowed;
20426
- background-color: var(--pf-c-switch__input--disabled__toggle--BackgroundColor);
20427
- }
20428
-
20429
- .pf-c-switch__input:disabled ~ .pf-c-switch__toggle::before {
20430
- background-color: var(--pf-c-switch__input--disabled__toggle--before--BackgroundColor);
20431
- }
20432
-
20433
- .pf-c-switch__toggle {
20434
- position: relative;
20435
- display: inline-block;
20436
- width: var(--pf-c-switch__toggle--Width);
20437
- height: var(--pf-c-switch__toggle--Height);
20438
- background-color: var(--pf-c-switch__toggle--BackgroundColor);
20439
- border-radius: var(--pf-c-switch__toggle--BorderRadius);
20442
+ .pf-c-tab-content {
20443
+ --pf-c-tab-content__body--PaddingTop: 0;
20444
+ --pf-c-tab-content__body--PaddingRight: 0;
20445
+ --pf-c-tab-content__body--PaddingBottom: 0;
20446
+ --pf-c-tab-content__body--PaddingLeft: 0;
20447
+ --pf-c-tab-content__body--m-padding--PaddingTop: var(--pf-global--spacer--md);
20448
+ --pf-c-tab-content__body--m-padding--PaddingRight: var(--pf-global--spacer--md);
20449
+ --pf-c-tab-content__body--m-padding--PaddingBottom: var(--pf-global--spacer--md);
20450
+ --pf-c-tab-content__body--m-padding--PaddingLeft: var(--pf-global--spacer--md);
20451
+ --pf-c-tab-content__body--m-padding--xl--PaddingTop: var(--pf-global--spacer--lg);
20452
+ --pf-c-tab-content__body--m-padding--xl--PaddingRight: var(--pf-global--spacer--lg);
20453
+ --pf-c-tab-content__body--m-padding--xl--PaddingBottom: var(--pf-global--spacer--lg);
20454
+ --pf-c-tab-content__body--m-padding--xl--PaddingLeft: var(--pf-global--spacer--lg);
20455
+ --pf-c-tab-content--m-light-300: var(--pf-global--BackgroundColor--light-300);
20440
20456
  }
20441
20457
 
20442
- .pf-c-switch__toggle::before {
20443
- position: absolute;
20444
- top: var(--pf-c-switch__toggle--before--Top);
20445
- left: var(--pf-c-switch__toggle--before--Left);
20446
- display: block;
20447
- width: var(--pf-c-switch__toggle--before--Width);
20448
- height: var(--pf-c-switch__toggle--before--Height);
20449
- content: "";
20450
- background-color: var(--pf-c-switch__toggle--before--BackgroundColor);
20451
- border-radius: var(--pf-c-switch__toggle--before--BorderRadius);
20452
- box-shadow: var(--pf-c-switch__toggle--before--BoxShadow);
20453
- transition: var(--pf-c-switch__toggle--before--Transition);
20458
+ @media screen and (min-width: 1200px) {
20459
+ .pf-c-tab-content {
20460
+ --pf-c-tab-content__body--m-padding--PaddingTop: var(--pf-c-tab-content__body--m-padding--xl--PaddingTop);
20461
+ --pf-c-tab-content__body--m-padding--PaddingRight: var(--pf-c-tab-content__body--m-padding--xl--PaddingRight);
20462
+ --pf-c-tab-content__body--m-padding--PaddingBottom: var(--pf-c-tab-content__body--m-padding--xl--PaddingBottom);
20463
+ --pf-c-tab-content__body--m-padding--PaddingLeft: var(--pf-c-tab-content__body--m-padding--xl--PaddingLeft);
20464
+ }
20454
20465
  }
20455
-
20456
- .pf-c-switch__toggle-icon {
20457
- position: absolute;
20458
- top: 0;
20459
- bottom: 0;
20460
- left: var(--pf-c-switch__toggle-icon--Left);
20461
- display: flex;
20462
- align-items: center;
20463
- font-size: var(--pf-c-switch__toggle-icon--FontSize);
20464
- color: var(--pf-c-switch__toggle-icon--Color);
20466
+ .pf-c-tab-content.pf-m-light-300 {
20467
+ background-color: var(--pf-c-tab-content--m-light-300);
20465
20468
  }
20466
20469
 
20467
- .pf-c-switch__label {
20468
- display: inline-block;
20469
- grid-column: 2;
20470
- color: var(--pf-c-switch__label--Color);
20471
- vertical-align: top;
20470
+ .pf-c-tab-content__body {
20471
+ padding: var(--pf-c-tab-content__body--PaddingTop) var(--pf-c-tab-content__body--PaddingRight) var(--pf-c-tab-content__body--PaddingBottom) var(--pf-c-tab-content__body--PaddingLeft);
20472
20472
  }
20473
20473
 
20474
- :where(.pf-theme-dark) .pf-c-switch {
20475
- --pf-c-switch__toggle-icon--Color: var(--pf-global--BackgroundColor--100);
20476
- --pf-c-switch__input--not-checked__label--Color: var(--pf-global--Color--100);
20477
- --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--disabled-color--100);
20478
- --pf-c-switch__toggle--before--BoxShadow: none;
20474
+ .pf-c-tab-content__body.pf-m-padding {
20475
+ --pf-c-tab-content__body--PaddingTop: var(--pf-c-tab-content__body--m-padding--PaddingTop);
20476
+ --pf-c-tab-content__body--PaddingRight: var(--pf-c-tab-content__body--m-padding--PaddingRight);
20477
+ --pf-c-tab-content__body--PaddingBottom: var(--pf-c-tab-content__body--m-padding--PaddingBottom);
20478
+ --pf-c-tab-content__body--PaddingLeft: var(--pf-c-tab-content__body--m-padding--PaddingLeft);
20479
20479
  }
20480
20480
 
20481
20481
  .pf-c-content {