@patternfly/react-core 4.264.1 → 4.265.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +18 -0
- package/dist/esm/components/Badge/Badge.d.ts +2 -0
- package/dist/esm/components/Badge/Badge.d.ts.map +1 -1
- package/dist/esm/components/Badge/Badge.js +4 -2
- package/dist/esm/components/Badge/Badge.js.map +1 -1
- package/dist/esm/components/TimePicker/TimePicker.d.ts +0 -1
- package/dist/esm/components/TimePicker/TimePicker.d.ts.map +1 -1
- package/dist/esm/components/TimePicker/TimePicker.js +1 -9
- package/dist/esm/components/TimePicker/TimePicker.js.map +1 -1
- package/dist/esm/next/components/Dropdown/DropdownItem.d.ts +2 -0
- package/dist/esm/next/components/Dropdown/DropdownItem.d.ts.map +1 -1
- package/dist/esm/next/components/Dropdown/DropdownItem.js +2 -2
- package/dist/esm/next/components/Dropdown/DropdownItem.js.map +1 -1
- package/dist/esm/next/components/Wizard/Wizard.d.ts +1 -1
- package/dist/esm/next/components/Wizard/Wizard.d.ts.map +1 -1
- package/dist/esm/next/components/Wizard/WizardContext.d.ts +2 -2
- package/dist/esm/next/components/Wizard/WizardContext.d.ts.map +1 -1
- package/dist/esm/next/components/Wizard/WizardFooter.d.ts +2 -2
- package/dist/esm/next/components/Wizard/WizardFooter.d.ts.map +1 -1
- package/dist/esm/next/components/Wizard/WizardNavInternal.js +2 -2
- package/dist/esm/next/components/Wizard/WizardNavInternal.js.map +1 -1
- package/dist/esm/next/components/Wizard/WizardNavItem.js +1 -1
- package/dist/esm/next/components/Wizard/WizardNavItem.js.map +1 -1
- package/dist/esm/next/components/Wizard/WizardStep.d.ts +2 -0
- package/dist/esm/next/components/Wizard/WizardStep.d.ts.map +1 -1
- package/dist/esm/next/components/Wizard/WizardStep.js.map +1 -1
- package/dist/esm/next/components/Wizard/types.d.ts +4 -2
- package/dist/esm/next/components/Wizard/types.d.ts.map +1 -1
- package/dist/esm/next/components/Wizard/types.js.map +1 -1
- package/dist/js/components/Badge/Badge.d.ts +2 -0
- package/dist/js/components/Badge/Badge.d.ts.map +1 -1
- package/dist/js/components/Badge/Badge.js +4 -2
- package/dist/js/components/Badge/Badge.js.map +1 -1
- package/dist/js/components/TimePicker/TimePicker.d.ts +0 -1
- package/dist/js/components/TimePicker/TimePicker.d.ts.map +1 -1
- package/dist/js/components/TimePicker/TimePicker.js +1 -9
- package/dist/js/components/TimePicker/TimePicker.js.map +1 -1
- package/dist/js/next/components/Dropdown/DropdownItem.d.ts +2 -0
- package/dist/js/next/components/Dropdown/DropdownItem.d.ts.map +1 -1
- package/dist/js/next/components/Dropdown/DropdownItem.js +2 -2
- package/dist/js/next/components/Dropdown/DropdownItem.js.map +1 -1
- package/dist/js/next/components/Wizard/Wizard.d.ts +1 -1
- package/dist/js/next/components/Wizard/Wizard.d.ts.map +1 -1
- package/dist/js/next/components/Wizard/WizardContext.d.ts +2 -2
- package/dist/js/next/components/Wizard/WizardContext.d.ts.map +1 -1
- package/dist/js/next/components/Wizard/WizardFooter.d.ts +2 -2
- package/dist/js/next/components/Wizard/WizardFooter.d.ts.map +1 -1
- package/dist/js/next/components/Wizard/WizardNavInternal.js +2 -2
- package/dist/js/next/components/Wizard/WizardNavInternal.js.map +1 -1
- package/dist/js/next/components/Wizard/WizardNavItem.js +1 -1
- package/dist/js/next/components/Wizard/WizardNavItem.js.map +1 -1
- package/dist/js/next/components/Wizard/WizardStep.d.ts +2 -0
- package/dist/js/next/components/Wizard/WizardStep.d.ts.map +1 -1
- package/dist/js/next/components/Wizard/WizardStep.js.map +1 -1
- package/dist/js/next/components/Wizard/types.d.ts +4 -2
- package/dist/js/next/components/Wizard/types.d.ts.map +1 -1
- package/dist/js/next/components/Wizard/types.js.map +1 -1
- package/dist/umd/react-core.min.css +233 -233
- package/dist/umd/react-core.min.js +2 -2
- package/package.json +6 -6
- package/src/components/Badge/Badge.tsx +4 -0
- package/src/components/Badge/__tests__/Badge.test.tsx +10 -0
- package/src/components/Badge/examples/BadgeUnread.tsx +12 -1
- package/src/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsx +60 -22
- package/src/components/TimePicker/TimePicker.tsx +0 -11
- package/src/next/components/Dropdown/DropdownItem.tsx +4 -1
- package/src/next/components/Wizard/Wizard.tsx +1 -1
- package/src/next/components/Wizard/WizardContext.tsx +2 -2
- package/src/next/components/Wizard/WizardFooter.tsx +2 -2
- package/src/next/components/Wizard/WizardNavInternal.tsx +1 -1
- package/src/next/components/Wizard/WizardNavItem.tsx +1 -1
- package/src/next/components/Wizard/WizardStep.tsx +2 -0
- package/src/next/components/Wizard/__tests__/Wizard.test.tsx +33 -1
- package/src/next/components/Wizard/__tests__/WizardStep.test.tsx +1 -2
- package/src/next/components/Wizard/examples/Wizard.md +1 -1
- package/src/next/components/Wizard/examples/WizardKitchenSink.tsx +21 -2
- package/src/next/components/Wizard/types.tsx +9 -4
|
@@ -297,6 +297,238 @@
|
|
|
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
|
+
|
|
300
532
|
.pf-c-app-launcher {
|
|
301
533
|
--pf-c-app-launcher__menu--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
|
|
302
534
|
--pf-c-app-launcher__menu--BoxShadow: var(--pf-global--BoxShadow--md);
|
|
@@ -904,7 +1136,7 @@ textarea.pf-c-form-control {
|
|
|
904
1136
|
}
|
|
905
1137
|
|
|
906
1138
|
: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
|
|
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 320 512'%3E%3Cpath fill='%23e0e0e0' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E");
|
|
908
1140
|
--pf-c-form-control--BorderTopColor: transparent;
|
|
909
1141
|
--pf-c-form-control--BorderRightColor: transparent;
|
|
910
1142
|
--pf-c-form-control--BorderBottomColor: var(--pf-global--BorderColor--400);
|
|
@@ -928,238 +1160,6 @@ textarea.pf-c-form-control {
|
|
|
928
1160
|
color: var(--pf-global--palette--black-100);
|
|
929
1161
|
}
|
|
930
1162
|
|
|
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);
|
|
1094
|
-
}
|
|
1095
|
-
|
|
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;
|
|
1101
|
-
}
|
|
1102
|
-
|
|
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;
|
|
1108
|
-
}
|
|
1109
|
-
|
|
1110
|
-
.pf-c-alert__description {
|
|
1111
|
-
grid-area: description;
|
|
1112
|
-
padding-top: var(--pf-c-alert__description--PaddingTop);
|
|
1113
|
-
word-break: break-word;
|
|
1114
|
-
}
|
|
1115
|
-
|
|
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);
|
|
1118
|
-
}
|
|
1119
|
-
|
|
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));
|
|
1126
|
-
}
|
|
1127
|
-
|
|
1128
|
-
.pf-c-alert__action > .pf-c-button {
|
|
1129
|
-
--pf-c-button--LineHeight: 1;
|
|
1130
|
-
}
|
|
1131
|
-
|
|
1132
|
-
.pf-c-alert__action-group {
|
|
1133
|
-
grid-area: actiongroup;
|
|
1134
|
-
padding-top: var(--pf-c-alert__action-group--PaddingTop);
|
|
1135
|
-
}
|
|
1136
|
-
|
|
1137
|
-
.pf-c-alert__action-group > .pf-c-button {
|
|
1138
|
-
--pf-c-button--m-link--m-inline--hover--TextDecoration: none;
|
|
1139
|
-
}
|
|
1140
|
-
|
|
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);
|
|
1143
|
-
}
|
|
1144
|
-
|
|
1145
|
-
.pf-m-overpass-font .pf-c-alert__title {
|
|
1146
|
-
--pf-c-alert__title--FontWeight: var(--pf-global--FontWeight--normal);
|
|
1147
|
-
}
|
|
1148
|
-
|
|
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
|
-
}
|
|
1162
|
-
|
|
1163
1163
|
.pf-u-screen-reader {
|
|
1164
1164
|
position: fixed;
|
|
1165
1165
|
top: 0;
|