@patternfly/react-core 4.264.0 → 4.264.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 (49) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/umd/react-core.min.css +356 -356
  3. package/package.json +10 -3
  4. package/src/components/Tooltip/examples/Tooltip.md +5 -285
  5. package/src/components/Tooltip/examples/TooltipBasic.tsx +16 -0
  6. package/src/components/Tooltip/examples/TooltipIcon.tsx +24 -0
  7. package/src/components/Tooltip/examples/TooltipOptions.tsx +197 -0
  8. package/src/components/Tooltip/examples/TooltipReactRef.tsx +22 -0
  9. package/src/components/Tooltip/examples/TooltipSelectorRef.tsx +19 -0
  10. package/dist/esm/components/Button/__mocks__/Button.d.ts +0 -8
  11. package/dist/esm/components/Button/__mocks__/Button.d.ts.map +0 -1
  12. package/dist/esm/components/Button/__mocks__/Button.js +0 -14
  13. package/dist/esm/components/Button/__mocks__/Button.js.map +0 -1
  14. package/dist/esm/components/Button/__mocks__/index.d.ts +0 -2
  15. package/dist/esm/components/Button/__mocks__/index.d.ts.map +0 -1
  16. package/dist/esm/components/Button/__mocks__/index.js +0 -2
  17. package/dist/esm/components/Button/__mocks__/index.js.map +0 -1
  18. package/dist/esm/components/HelperText/__mocks__/HelperText.d.ts +0 -4
  19. package/dist/esm/components/HelperText/__mocks__/HelperText.d.ts.map +0 -1
  20. package/dist/esm/components/HelperText/__mocks__/HelperText.js +0 -5
  21. package/dist/esm/components/HelperText/__mocks__/HelperText.js.map +0 -1
  22. package/dist/esm/components/HelperText/__mocks__/HelperTextItem.d.ts +0 -4
  23. package/dist/esm/components/HelperText/__mocks__/HelperTextItem.d.ts.map +0 -1
  24. package/dist/esm/components/HelperText/__mocks__/HelperTextItem.js +0 -5
  25. package/dist/esm/components/HelperText/__mocks__/HelperTextItem.js.map +0 -1
  26. package/dist/esm/components/HelperText/__mocks__/index.d.ts +0 -3
  27. package/dist/esm/components/HelperText/__mocks__/index.d.ts.map +0 -1
  28. package/dist/esm/components/HelperText/__mocks__/index.js +0 -3
  29. package/dist/esm/components/HelperText/__mocks__/index.js.map +0 -1
  30. package/dist/js/components/Button/__mocks__/Button.d.ts +0 -8
  31. package/dist/js/components/Button/__mocks__/Button.d.ts.map +0 -1
  32. package/dist/js/components/Button/__mocks__/Button.js +0 -18
  33. package/dist/js/components/Button/__mocks__/Button.js.map +0 -1
  34. package/dist/js/components/Button/__mocks__/index.d.ts +0 -2
  35. package/dist/js/components/Button/__mocks__/index.d.ts.map +0 -1
  36. package/dist/js/components/Button/__mocks__/index.js +0 -5
  37. package/dist/js/components/Button/__mocks__/index.js.map +0 -1
  38. package/dist/js/components/HelperText/__mocks__/HelperText.d.ts +0 -4
  39. package/dist/js/components/HelperText/__mocks__/HelperText.d.ts.map +0 -1
  40. package/dist/js/components/HelperText/__mocks__/HelperText.js +0 -10
  41. package/dist/js/components/HelperText/__mocks__/HelperText.js.map +0 -1
  42. package/dist/js/components/HelperText/__mocks__/HelperTextItem.d.ts +0 -4
  43. package/dist/js/components/HelperText/__mocks__/HelperTextItem.d.ts.map +0 -1
  44. package/dist/js/components/HelperText/__mocks__/HelperTextItem.js +0 -10
  45. package/dist/js/components/HelperText/__mocks__/HelperTextItem.js.map +0 -1
  46. package/dist/js/components/HelperText/__mocks__/index.d.ts +0 -3
  47. package/dist/js/components/HelperText/__mocks__/index.d.ts.map +0 -1
  48. package/dist/js/components/HelperText/__mocks__/index.js +0 -6
  49. package/dist/js/components/HelperText/__mocks__/index.js.map +0 -1
@@ -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);
@@ -1091,73 +859,305 @@ select.pf-c-form-control[aria-invalid=true] {
1091
859
  background-size: var(--pf-c-form-control__select--BackgroundSize), var(--pf-c-form-control--invalid--BackgroundSize);
1092
860
  }
1093
861
 
1094
- select.pf-c-form-control.pf-m-success {
1095
- --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--success--PaddingRight);
1096
- --pf-c-form-control--success--BackgroundPosition: var(--pf-c-form-control__select--success--BackgroundPosition);
1097
- background-image: var(--pf-c-form-control__select--BackgroundUrl), var(--pf-c-form-control--success--BackgroundUrl);
1098
- background-position: var(--pf-c-form-control__select--BackgroundPosition), var(--pf-c-form-control--success--BackgroundPosition);
1099
- background-size: var(--pf-c-form-control__select--BackgroundSize), var(--pf-c-form-control--success--BackgroundSize);
862
+ select.pf-c-form-control.pf-m-success {
863
+ --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--success--PaddingRight);
864
+ --pf-c-form-control--success--BackgroundPosition: var(--pf-c-form-control__select--success--BackgroundPosition);
865
+ background-image: var(--pf-c-form-control__select--BackgroundUrl), var(--pf-c-form-control--success--BackgroundUrl);
866
+ background-position: var(--pf-c-form-control__select--BackgroundPosition), var(--pf-c-form-control--success--BackgroundPosition);
867
+ background-size: var(--pf-c-form-control__select--BackgroundSize), var(--pf-c-form-control--success--BackgroundSize);
868
+ }
869
+
870
+ select.pf-c-form-control.pf-m-warning {
871
+ --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--m-warning--PaddingRight);
872
+ background-image: var(--pf-c-form-control__select--BackgroundUrl), var(--pf-c-form-control--m-warning--BackgroundUrl);
873
+ background-position: var(--pf-c-form-control__select--BackgroundPosition), var(--pf-c-form-control__select--m-warning--BackgroundPosition);
874
+ background-size: var(--pf-c-form-control__select--BackgroundSize), var(--pf-c-form-control--m-warning--BackgroundSize);
875
+ }
876
+
877
+ select.pf-c-form-control.pf-m-placeholder {
878
+ color: var(--pf-c-form-control--placeholder--Color);
879
+ }
880
+
881
+ select.pf-c-form-control.pf-m-placeholder * {
882
+ color: var(--pf-c-form-control--placeholder--child--Color);
883
+ }
884
+
885
+ select.pf-c-form-control.pf-m-placeholder *:disabled {
886
+ color: revert;
887
+ }
888
+
889
+ textarea.pf-c-form-control {
890
+ --pf-c-form-control--success--BackgroundPositionY: var(--pf-c-form-control--textarea--success--BackgroundPositionY);
891
+ --pf-c-form-control--invalid--BackgroundPositionY: var(--pf-c-form-control--textarea--invalid--BackgroundPositionY);
892
+ --pf-c-form-control--m-warning--BackgroundPositionY: var(--pf-c-form-control--textarea--m-warning--BackgroundPositionY);
893
+ width: var(--pf-c-form-control--textarea--Width);
894
+ height: var(--pf-c-form-control--textarea--Height);
895
+ vertical-align: bottom;
896
+ }
897
+
898
+ .pf-c-form-control.pf-m-resize-vertical {
899
+ resize: vertical;
900
+ }
901
+
902
+ .pf-c-form-control.pf-m-resize-horizontal {
903
+ resize: horizontal;
904
+ }
905
+
906
+ :where(.pf-theme-dark) .pf-c-form-control {
907
+ --pf-c-form-control__select--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%235ba352' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E");
908
+ --pf-c-form-control--BorderTopColor: transparent;
909
+ --pf-c-form-control--BorderRightColor: transparent;
910
+ --pf-c-form-control--BorderBottomColor: var(--pf-global--BorderColor--400);
911
+ --pf-c-form-control--BorderLeftColor: transparent;
912
+ --pf-c-form-control--BackgroundColor: var(--pf-global--BackgroundColor--400);
913
+ --pf-c-form-control--disabled--Color: var(--pf-global--disabled-color--300);
914
+ --pf-c-form-control--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
915
+ --pf-c-form-control--readonly--BackgroundColor: var(--pf-global--BackgroundColor--400);
916
+ color: var(--pf-global--Color--100);
917
+ }
918
+
919
+ :where(.pf-theme-dark) .pf-c-form-control::-webkit-calendar-picker-indicator {
920
+ filter: invert(1);
921
+ }
922
+
923
+ :where(.pf-theme-dark) .pf-c-form-control[readonly] {
924
+ border-bottom-color: var(--pf-global--palette--black-700);
925
+ }
926
+
927
+ :where(.pf-theme-dark) .pf-c-form-control:disabled {
928
+ color: var(--pf-global--palette--black-100);
929
+ }
930
+
931
+ .pf-c-alert {
932
+ --pf-global--Color--100: var(--pf-global--Color--dark-100);
933
+ --pf-global--Color--200: var(--pf-global--Color--dark-200);
934
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
935
+ --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
936
+ --pf-global--link--Color: var(--pf-global--link--Color--dark);
937
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
938
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
939
+ }
940
+
941
+ .pf-c-alert {
942
+ --pf-c-alert--BoxShadow: var(--pf-global--BoxShadow--lg);
943
+ --pf-c-alert--BackgroundColor: var(--pf-global--BackgroundColor--100);
944
+ --pf-c-alert--GridTemplateColumns: max-content 1fr max-content;
945
+ --pf-c-alert--GridTemplateAreas:
946
+ "icon title action"
947
+ ". description description"
948
+ ". actiongroup actiongroup";
949
+ --pf-c-alert--BorderTopWidth: var(--pf-global--BorderWidth--md);
950
+ --pf-c-alert--BorderTopColor: var(--pf-global--default-color--200);
951
+ --pf-c-alert--PaddingTop: var(--pf-global--spacer--md);
952
+ --pf-c-alert--PaddingRight: var(--pf-global--spacer--md);
953
+ --pf-c-alert--PaddingBottom: var(--pf-global--spacer--md);
954
+ --pf-c-alert--PaddingLeft: var(--pf-global--spacer--md);
955
+ --pf-c-alert__FontSize: var(--pf-global--FontSize--sm);
956
+ --pf-c-alert__toggle--MarginTop: calc(-1 * var(--pf-global--spacer--form-element) - 0.0625rem);
957
+ --pf-c-alert__toggle--MarginBottom: calc(-1 * var(--pf-global--spacer--form-element));
958
+ --pf-c-alert__toggle--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
959
+ --pf-c-alert__toggle-icon--Rotate: 0;
960
+ --pf-c-alert__toggle-icon--Transition: var(--pf-global--Transition);
961
+ --pf-c-alert__icon--Color: var(--pf-global--default-color--200);
962
+ --pf-c-alert__icon--MarginTop: 0.0625rem;
963
+ --pf-c-alert__icon--MarginRight: var(--pf-global--spacer--sm);
964
+ --pf-c-alert__icon--FontSize: var(--pf-global--icon--FontSize--md);
965
+ --pf-c-alert__title--FontWeight: var(--pf-global--FontWeight--bold);
966
+ --pf-c-alert__title--Color: var(--pf-global--default-color--300);
967
+ --pf-c-alert__title--max-lines: 1;
968
+ --pf-c-alert__action--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
969
+ --pf-c-alert__action--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
970
+ --pf-c-alert__action--TranslateY: 0.125rem;
971
+ --pf-c-alert__action--MarginRight: calc(var(--pf-global--spacer--sm) * -1);
972
+ --pf-c-alert__description--PaddingTop: var(--pf-global--spacer--xs);
973
+ --pf-c-alert__action-group--PaddingTop-base: var(--pf-global--spacer--xs);
974
+ --pf-c-alert__action-group--PaddingTop: var(--pf-c-alert__action-group--PaddingTop-base);
975
+ --pf-c-alert__description--action-group--PaddingTop-base: var(--pf-global--spacer--md);
976
+ --pf-c-alert__description--action-group--PaddingTop: var(--pf-c-alert__description--action-group--PaddingTop-base);
977
+ --pf-c-alert__action-group__c-button--not-last-child--MarginRight: var(--pf-global--spacer--lg);
978
+ --pf-c-alert--m-success--BorderTopColor: var(--pf-global--success-color--100);
979
+ --pf-c-alert--m-success__icon--Color: var(--pf-global--success-color--100);
980
+ --pf-c-alert--m-success__title--Color: var(--pf-global--success-color--200);
981
+ --pf-c-alert--m-danger--BorderTopColor: var(--pf-global--danger-color--100);
982
+ --pf-c-alert--m-danger__icon--Color: var(--pf-global--danger-color--100);
983
+ --pf-c-alert--m-danger__title--Color: var(--pf-global--danger-color--200);
984
+ --pf-c-alert--m-warning--BorderTopColor: var(--pf-global--warning-color--100);
985
+ --pf-c-alert--m-warning__icon--Color: var(--pf-global--warning-color--100);
986
+ --pf-c-alert--m-warning__title--Color: var(--pf-global--warning-color--200);
987
+ --pf-c-alert--m-info--BorderTopColor: var(--pf-global--info-color--100);
988
+ --pf-c-alert--m-info__icon--Color: var(--pf-global--info-color--100);
989
+ --pf-c-alert--m-info__title--Color: var(--pf-global--info-color--200);
990
+ --pf-c-alert--m-inline--BoxShadow: none;
991
+ --pf-c-alert--m-inline--BackgroundColor: var(--pf-global--palette--cyan-50);
992
+ --pf-c-alert--m-inline--m-success--BackgroundColor: var(--pf-global--palette--green-50);
993
+ --pf-c-alert--m-inline--m-danger--BackgroundColor: var(--pf-global--palette--red-50);
994
+ --pf-c-alert--m-inline--m-warning--BackgroundColor: var(--pf-global--palette--gold-50);
995
+ --pf-c-alert--m-inline--m-info--BackgroundColor: var(--pf-global--palette--blue-50);
996
+ --pf-c-alert--m-inline--m-plain--BorderTopWidth: 0;
997
+ --pf-c-alert--m-inline--m-plain--BackgroundColor: transparent;
998
+ --pf-c-alert--m-inline--m-plain--PaddingTop: 0;
999
+ --pf-c-alert--m-inline--m-plain--PaddingRight: 0;
1000
+ --pf-c-alert--m-inline--m-plain--PaddingBottom: 0;
1001
+ --pf-c-alert--m-inline--m-plain--PaddingLeft: 0;
1002
+ --pf-c-alert--m-expandable--GridTemplateColumns: auto max-content 1fr max-content;
1003
+ --pf-c-alert--m-expandable--GridTemplateAreas:
1004
+ "toggle icon title action"
1005
+ ". . description description"
1006
+ ". . actiongroup actiongroup";
1007
+ --pf-c-alert--m-expandable__description--action-group--PaddingTop: var(--pf-c-alert__action-group--PaddingTop-base);
1008
+ --pf-c-alert--m-expanded__toggle-icon--Rotate: 90deg;
1009
+ --pf-c-alert--m-expanded__description--action-group--PaddingTop: var(--pf-c-alert__description--action-group--PaddingTop-base);
1010
+ color: var(--pf-global--Color--100);
1011
+ position: relative;
1012
+ display: grid;
1013
+ padding: var(--pf-c-alert--PaddingTop) var(--pf-c-alert--PaddingRight) var(--pf-c-alert--PaddingBottom) var(--pf-c-alert--PaddingLeft);
1014
+ font-size: var(--pf-c-alert__FontSize);
1015
+ background-color: var(--pf-c-alert--BackgroundColor);
1016
+ border-top: var(--pf-c-alert--BorderTopWidth) solid var(--pf-c-alert--BorderTopColor);
1017
+ box-shadow: var(--pf-c-alert--BoxShadow);
1018
+ grid-template-columns: var(--pf-c-alert--GridTemplateColumns);
1019
+ grid-template-areas: var(--pf-c-alert--GridTemplateAreas);
1020
+ }
1021
+
1022
+ .pf-c-alert.pf-m-success {
1023
+ --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-success--BorderTopColor);
1024
+ --pf-c-alert__icon--Color: var(--pf-c-alert--m-success__icon--Color);
1025
+ --pf-c-alert__title--Color: var(--pf-c-alert--m-success__title--Color);
1026
+ --pf-c-alert--m-inline--BackgroundColor: var(--pf-c-alert--m-inline--m-success--BackgroundColor);
1027
+ }
1028
+
1029
+ .pf-c-alert.pf-m-danger {
1030
+ --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-danger--BorderTopColor);
1031
+ --pf-c-alert__icon--Color: var(--pf-c-alert--m-danger__icon--Color);
1032
+ --pf-c-alert__title--Color: var(--pf-c-alert--m-danger__title--Color);
1033
+ --pf-c-alert--m-inline--BackgroundColor: var(--pf-c-alert--m-inline--m-danger--BackgroundColor);
1034
+ }
1035
+
1036
+ .pf-c-alert.pf-m-warning {
1037
+ --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-warning--BorderTopColor);
1038
+ --pf-c-alert__icon--Color: var(--pf-c-alert--m-warning__icon--Color);
1039
+ --pf-c-alert__title--Color: var(--pf-c-alert--m-warning__title--Color);
1040
+ --pf-c-alert--m-inline--BackgroundColor: var(--pf-c-alert--m-inline--m-warning--BackgroundColor);
1041
+ }
1042
+
1043
+ .pf-c-alert.pf-m-info {
1044
+ --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-info--BorderTopColor);
1045
+ --pf-c-alert__icon--Color: var(--pf-c-alert--m-info__icon--Color);
1046
+ --pf-c-alert__title--Color: var(--pf-c-alert--m-info__title--Color);
1047
+ --pf-c-alert--m-inline--BackgroundColor: var(--pf-c-alert--m-inline--m-info--BackgroundColor);
1048
+ }
1049
+
1050
+ .pf-c-alert.pf-m-inline {
1051
+ --pf-c-alert--BoxShadow: var(--pf-c-alert--m-inline--BoxShadow);
1052
+ --pf-c-alert--BackgroundColor: var(--pf-c-alert--m-inline--BackgroundColor);
1053
+ }
1054
+
1055
+ .pf-c-alert.pf-m-plain {
1056
+ --pf-c-alert--BorderTopWidth: var(--pf-c-alert--m-inline--m-plain--BorderTopWidth);
1057
+ --pf-c-alert--BackgroundColor: var(--pf-c-alert--m-inline--m-plain--BackgroundColor);
1058
+ --pf-c-alert--PaddingTop: var(--pf-c-alert--m-inline--m-plain--PaddingTop);
1059
+ --pf-c-alert--PaddingRight: var(--pf-c-alert--m-inline--m-plain--PaddingRight);
1060
+ --pf-c-alert--PaddingBottom: var(--pf-c-alert--m-inline--m-plain--PaddingBottom);
1061
+ --pf-c-alert--PaddingLeft: var(--pf-c-alert--m-inline--m-plain--PaddingLeft);
1062
+ }
1063
+
1064
+ .pf-c-alert.pf-m-expandable {
1065
+ --pf-c-alert--GridTemplateColumns: var(--pf-c-alert--m-expandable--GridTemplateColumns);
1066
+ --pf-c-alert--GridTemplateAreas: var(--pf-c-alert--m-expandable--GridTemplateAreas);
1067
+ --pf-c-alert__description--action-group--PaddingTop: var(--pf-c-alert--m-expandable__description--action-group--PaddingTop);
1068
+ }
1069
+
1070
+ .pf-c-alert.pf-m-expanded {
1071
+ --pf-c-alert__toggle-icon--Rotate: var(--pf-c-alert--m-expanded__toggle-icon--Rotate);
1072
+ --pf-c-alert__description--action-group--PaddingTop: var(--pf-c-alert--m-expanded__description--action-group--PaddingTop);
1073
+ }
1074
+
1075
+ .pf-c-alert__toggle {
1076
+ margin-top: var(--pf-c-alert__toggle--MarginTop);
1077
+ margin-bottom: var(--pf-c-alert__toggle--MarginBottom);
1078
+ margin-left: var(--pf-c-alert__toggle--MarginLeft);
1079
+ }
1080
+
1081
+ .pf-c-alert__toggle-icon {
1082
+ display: inline-block;
1083
+ transition: var(--pf-c-alert__toggle-icon--Transition);
1084
+ transform: rotate(var(--pf-c-alert__toggle-icon--Rotate));
1085
+ }
1086
+
1087
+ .pf-c-alert__icon {
1088
+ grid-area: icon;
1089
+ display: flex;
1090
+ margin-top: var(--pf-c-alert__icon--MarginTop);
1091
+ margin-right: var(--pf-c-alert__icon--MarginRight);
1092
+ font-size: var(--pf-c-alert__icon--FontSize);
1093
+ color: var(--pf-c-alert__icon--Color);
1100
1094
  }
1101
1095
 
1102
- select.pf-c-form-control.pf-m-warning {
1103
- --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--m-warning--PaddingRight);
1104
- background-image: var(--pf-c-form-control__select--BackgroundUrl), var(--pf-c-form-control--m-warning--BackgroundUrl);
1105
- background-position: var(--pf-c-form-control__select--BackgroundPosition), var(--pf-c-form-control__select--m-warning--BackgroundPosition);
1106
- background-size: var(--pf-c-form-control__select--BackgroundSize), var(--pf-c-form-control--m-warning--BackgroundSize);
1096
+ .pf-c-alert__title {
1097
+ grid-area: title;
1098
+ font-weight: var(--pf-c-alert__title--FontWeight);
1099
+ color: var(--pf-c-alert__title--Color);
1100
+ word-break: break-word;
1107
1101
  }
1108
1102
 
1109
- select.pf-c-form-control.pf-m-placeholder {
1110
- color: var(--pf-c-form-control--placeholder--Color);
1103
+ .pf-c-alert__title.pf-m-truncate {
1104
+ display: -webkit-box;
1105
+ -webkit-box-orient: vertical;
1106
+ -webkit-line-clamp: var(--pf-c-alert__title--max-lines);
1107
+ overflow: hidden;
1111
1108
  }
1112
1109
 
1113
- select.pf-c-form-control.pf-m-placeholder * {
1114
- color: var(--pf-c-form-control--placeholder--child--Color);
1110
+ .pf-c-alert__description {
1111
+ grid-area: description;
1112
+ padding-top: var(--pf-c-alert__description--PaddingTop);
1113
+ word-break: break-word;
1115
1114
  }
1116
1115
 
1117
- select.pf-c-form-control.pf-m-placeholder *:disabled {
1118
- color: revert;
1116
+ .pf-c-alert__description + .pf-c-alert__action-group {
1117
+ --pf-c-alert__action-group--PaddingTop: var(--pf-c-alert__description--action-group--PaddingTop);
1119
1118
  }
1120
1119
 
1121
- textarea.pf-c-form-control {
1122
- --pf-c-form-control--success--BackgroundPositionY: var(--pf-c-form-control--textarea--success--BackgroundPositionY);
1123
- --pf-c-form-control--invalid--BackgroundPositionY: var(--pf-c-form-control--textarea--invalid--BackgroundPositionY);
1124
- --pf-c-form-control--m-warning--BackgroundPositionY: var(--pf-c-form-control--textarea--m-warning--BackgroundPositionY);
1125
- width: var(--pf-c-form-control--textarea--Width);
1126
- height: var(--pf-c-form-control--textarea--Height);
1127
- vertical-align: bottom;
1120
+ .pf-c-alert__action {
1121
+ grid-area: action;
1122
+ margin-top: var(--pf-c-alert__action--MarginTop);
1123
+ margin-right: var(--pf-c-alert__action--MarginRight);
1124
+ margin-bottom: var(--pf-c-alert__action--MarginBottom);
1125
+ transform: translateY(var(--pf-c-alert__action--TranslateY));
1128
1126
  }
1129
1127
 
1130
- .pf-c-form-control.pf-m-resize-vertical {
1131
- resize: vertical;
1128
+ .pf-c-alert__action > .pf-c-button {
1129
+ --pf-c-button--LineHeight: 1;
1132
1130
  }
1133
1131
 
1134
- .pf-c-form-control.pf-m-resize-horizontal {
1135
- resize: horizontal;
1132
+ .pf-c-alert__action-group {
1133
+ grid-area: actiongroup;
1134
+ padding-top: var(--pf-c-alert__action-group--PaddingTop);
1136
1135
  }
1137
1136
 
1138
- :where(.pf-theme-dark) .pf-c-form-control {
1139
- --pf-c-form-control__select--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%235ba352' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E");
1140
- --pf-c-form-control--BorderTopColor: transparent;
1141
- --pf-c-form-control--BorderRightColor: transparent;
1142
- --pf-c-form-control--BorderBottomColor: var(--pf-global--BorderColor--400);
1143
- --pf-c-form-control--BorderLeftColor: transparent;
1144
- --pf-c-form-control--BackgroundColor: var(--pf-global--BackgroundColor--400);
1145
- --pf-c-form-control--disabled--Color: var(--pf-global--disabled-color--300);
1146
- --pf-c-form-control--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
1147
- --pf-c-form-control--readonly--BackgroundColor: var(--pf-global--BackgroundColor--400);
1148
- color: var(--pf-global--Color--100);
1137
+ .pf-c-alert__action-group > .pf-c-button {
1138
+ --pf-c-button--m-link--m-inline--hover--TextDecoration: none;
1149
1139
  }
1150
1140
 
1151
- :where(.pf-theme-dark) .pf-c-form-control::-webkit-calendar-picker-indicator {
1152
- filter: invert(1);
1141
+ .pf-c-alert__action-group > .pf-c-button:not(:last-child) {
1142
+ margin-right: var(--pf-c-alert__action-group__c-button--not-last-child--MarginRight);
1153
1143
  }
1154
1144
 
1155
- :where(.pf-theme-dark) .pf-c-form-control[readonly] {
1156
- border-bottom-color: var(--pf-global--palette--black-700);
1145
+ .pf-m-overpass-font .pf-c-alert__title {
1146
+ --pf-c-alert__title--FontWeight: var(--pf-global--FontWeight--normal);
1157
1147
  }
1158
1148
 
1159
- :where(.pf-theme-dark) .pf-c-form-control:disabled {
1160
- color: var(--pf-global--palette--black-100);
1149
+ :where(.pf-theme-dark) .pf-c-alert {
1150
+ --pf-c-alert--BackgroundColor: var(--pf-global--palette--black-600);
1151
+ --pf-c-alert__title--Color: var(--pf-global--default-color--200);
1152
+ --pf-c-alert--m-success__title--Color: var(--pf-global--success-color--100);
1153
+ --pf-c-alert--m-danger__title--Color: var(--pf-global--danger-color--100);
1154
+ --pf-c-alert--m-warning__title--Color: var(--pf-global--warning-color--100);
1155
+ --pf-c-alert--m-info__title--Color: var(--pf-global--info-color--100);
1156
+ --pf-c-alert--m-inline--BackgroundColor: var(--pf-global--palette--black-600);
1157
+ --pf-c-alert--m-inline--m-success--BackgroundColor: var(--pf-global--palette--black-600);
1158
+ --pf-c-alert--m-inline--m-danger--BackgroundColor: var(--pf-global--palette--black-600);
1159
+ --pf-c-alert--m-inline--m-warning--BackgroundColor: var(--pf-global--palette--black-600);
1160
+ --pf-c-alert--m-inline--m-info--BackgroundColor: var(--pf-global--palette--black-600);
1161
1161
  }
1162
1162
 
1163
1163
  .pf-u-screen-reader {
@@ -13695,16 +13695,6 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
13695
13695
  color: var(--pf-c-multiple-file-upload__status-item-progress-size--Color);
13696
13696
  }
13697
13697
 
13698
- .pf-l-bullseye {
13699
- --pf-l-bullseye--Padding: 0;
13700
- display: flex;
13701
- align-items: center;
13702
- justify-content: center;
13703
- height: 100%;
13704
- padding: var(--pf-l-bullseye--Padding);
13705
- margin: 0;
13706
- }
13707
-
13708
13698
  .pf-c-nav {
13709
13699
  --pf-c-nav--Transition: var(--pf-global--Transition);
13710
13700
  --pf-c-nav--m-light__item--before--BorderColor: var(--pf-global--BorderColor--300);
@@ -15164,6 +15154,16 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
15164
15154
  --pf-c-notification-drawer__group-toggle--BackgroundColor: var(--pf-global--BackgroundColor--300);
15165
15155
  }
15166
15156
 
15157
+ .pf-l-bullseye {
15158
+ --pf-l-bullseye--Padding: 0;
15159
+ display: flex;
15160
+ align-items: center;
15161
+ justify-content: center;
15162
+ height: 100%;
15163
+ padding: var(--pf-l-bullseye--Padding);
15164
+ margin: 0;
15165
+ }
15166
+
15167
15167
  .pf-c-options-menu {
15168
15168
  --pf-c-options-menu__toggle--BackgroundColor: transparent;
15169
15169
  --pf-c-options-menu__toggle--PaddingTop: var(--pf-global--spacer--form-element);
@@ -26573,6 +26573,75 @@ label.pf-c-tree-view__node-text {
26573
26573
  --pf-l-flex--spacer: var(--pf-l-flex--spacer--4xl);
26574
26574
  }
26575
26575
  }
26576
+ .pf-l-gallery {
26577
+ --pf-l-gallery--m-gutter--GridGap: var(--pf-global--gutter);
26578
+ --pf-l-gallery--GridTemplateColumns--min: 250px;
26579
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
26580
+ --pf-l-gallery--GridTemplateColumns--max: 1fr;
26581
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
26582
+ --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
26583
+ --pf-l-gallery--GridTemplateRows: auto;
26584
+ display: grid;
26585
+ grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
26586
+ grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
26587
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
26588
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
26589
+ }
26590
+
26591
+ .pf-l-gallery.pf-m-gutter {
26592
+ grid-gap: var(--pf-l-gallery--m-gutter--GridGap);
26593
+ }
26594
+
26595
+ @media (min-width: 576px) {
26596
+ .pf-l-gallery {
26597
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min));
26598
+ }
26599
+ }
26600
+ @media (min-width: 768px) {
26601
+ .pf-l-gallery {
26602
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)));
26603
+ }
26604
+ }
26605
+ @media (min-width: 992px) {
26606
+ .pf-l-gallery {
26607
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))));
26608
+ }
26609
+ }
26610
+ @media (min-width: 1200px) {
26611
+ .pf-l-gallery {
26612
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)))));
26613
+ }
26614
+ }
26615
+ @media (min-width: 1450px) {
26616
+ .pf-l-gallery {
26617
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))))));
26618
+ }
26619
+ }
26620
+ @media (min-width: 576px) {
26621
+ .pf-l-gallery {
26622
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max));
26623
+ }
26624
+ }
26625
+ @media (min-width: 768px) {
26626
+ .pf-l-gallery {
26627
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)));
26628
+ }
26629
+ }
26630
+ @media (min-width: 992px) {
26631
+ .pf-l-gallery {
26632
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))));
26633
+ }
26634
+ }
26635
+ @media (min-width: 1200px) {
26636
+ .pf-l-gallery {
26637
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)))));
26638
+ }
26639
+ }
26640
+ @media (min-width: 1450px) {
26641
+ .pf-l-gallery {
26642
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))))));
26643
+ }
26644
+ }
26576
26645
  .pf-l-grid {
26577
26646
  --pf-l-grid--m-gutter--GridGap: var(--pf-global--gutter);
26578
26647
  --pf-l-grid__item--GridColumnStart: auto;
@@ -27787,75 +27856,6 @@ label.pf-c-tree-view__node-text {
27787
27856
  grid-gap: var(--pf-l-grid--m-gutter--GridGap);
27788
27857
  }
27789
27858
 
27790
- .pf-l-gallery {
27791
- --pf-l-gallery--m-gutter--GridGap: var(--pf-global--gutter);
27792
- --pf-l-gallery--GridTemplateColumns--min: 250px;
27793
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
27794
- --pf-l-gallery--GridTemplateColumns--max: 1fr;
27795
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
27796
- --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
27797
- --pf-l-gallery--GridTemplateRows: auto;
27798
- display: grid;
27799
- grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
27800
- grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
27801
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
27802
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
27803
- }
27804
-
27805
- .pf-l-gallery.pf-m-gutter {
27806
- grid-gap: var(--pf-l-gallery--m-gutter--GridGap);
27807
- }
27808
-
27809
- @media (min-width: 576px) {
27810
- .pf-l-gallery {
27811
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min));
27812
- }
27813
- }
27814
- @media (min-width: 768px) {
27815
- .pf-l-gallery {
27816
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)));
27817
- }
27818
- }
27819
- @media (min-width: 992px) {
27820
- .pf-l-gallery {
27821
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))));
27822
- }
27823
- }
27824
- @media (min-width: 1200px) {
27825
- .pf-l-gallery {
27826
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)))));
27827
- }
27828
- }
27829
- @media (min-width: 1450px) {
27830
- .pf-l-gallery {
27831
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))))));
27832
- }
27833
- }
27834
- @media (min-width: 576px) {
27835
- .pf-l-gallery {
27836
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max));
27837
- }
27838
- }
27839
- @media (min-width: 768px) {
27840
- .pf-l-gallery {
27841
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)));
27842
- }
27843
- }
27844
- @media (min-width: 992px) {
27845
- .pf-l-gallery {
27846
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))));
27847
- }
27848
- }
27849
- @media (min-width: 1200px) {
27850
- .pf-l-gallery {
27851
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)))));
27852
- }
27853
- }
27854
- @media (min-width: 1450px) {
27855
- .pf-l-gallery {
27856
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))))));
27857
- }
27858
- }
27859
27859
  .pf-l-level {
27860
27860
  --pf-l-level--m-gutter--MarginRight: var(--pf-global--gutter);
27861
27861
  display: flex;