@patternfly/react-core 4.232.7 → 4.232.10

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 (94) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/esm/components/Page/Page.d.ts +1 -1
  3. package/dist/esm/components/Page/Page.d.ts.map +1 -1
  4. package/dist/esm/components/Page/PageBreadcrumb.d.ts +3 -1
  5. package/dist/esm/components/Page/PageBreadcrumb.d.ts.map +1 -1
  6. package/dist/esm/components/Page/PageBreadcrumb.js +8 -2
  7. package/dist/esm/components/Page/PageBreadcrumb.js.map +1 -1
  8. package/dist/esm/components/Page/PageGroup.d.ts +3 -1
  9. package/dist/esm/components/Page/PageGroup.d.ts.map +1 -1
  10. package/dist/esm/components/Page/PageGroup.js +8 -2
  11. package/dist/esm/components/Page/PageGroup.js.map +1 -1
  12. package/dist/esm/components/Page/PageNavigation.d.ts +3 -1
  13. package/dist/esm/components/Page/PageNavigation.d.ts.map +1 -1
  14. package/dist/esm/components/Page/PageNavigation.js +8 -2
  15. package/dist/esm/components/Page/PageNavigation.js.map +1 -1
  16. package/dist/esm/components/Page/PageSection.d.ts +4 -0
  17. package/dist/esm/components/Page/PageSection.d.ts.map +1 -1
  18. package/dist/esm/components/Page/PageSection.js +8 -2
  19. package/dist/esm/components/Page/PageSection.js.map +1 -1
  20. package/dist/js/components/Page/Page.d.ts +1 -1
  21. package/dist/js/components/Page/Page.d.ts.map +1 -1
  22. package/dist/js/components/Page/PageBreadcrumb.d.ts +3 -1
  23. package/dist/js/components/Page/PageBreadcrumb.d.ts.map +1 -1
  24. package/dist/js/components/Page/PageBreadcrumb.js +8 -2
  25. package/dist/js/components/Page/PageBreadcrumb.js.map +1 -1
  26. package/dist/js/components/Page/PageGroup.d.ts +3 -1
  27. package/dist/js/components/Page/PageGroup.d.ts.map +1 -1
  28. package/dist/js/components/Page/PageGroup.js +8 -2
  29. package/dist/js/components/Page/PageGroup.js.map +1 -1
  30. package/dist/js/components/Page/PageNavigation.d.ts +3 -1
  31. package/dist/js/components/Page/PageNavigation.d.ts.map +1 -1
  32. package/dist/js/components/Page/PageNavigation.js +8 -2
  33. package/dist/js/components/Page/PageNavigation.js.map +1 -1
  34. package/dist/js/components/Page/PageSection.d.ts +4 -0
  35. package/dist/js/components/Page/PageSection.d.ts.map +1 -1
  36. package/dist/js/components/Page/PageSection.js +8 -2
  37. package/dist/js/components/Page/PageSection.js.map +1 -1
  38. package/dist/styles/base-no-reset.css +1 -1
  39. package/dist/styles/base.css +1 -1
  40. package/dist/umd/react-core.css +669 -669
  41. package/dist/umd/react-core.js +444 -515
  42. package/dist/umd/react-core.min.js +5 -5
  43. package/package.json +12 -12
  44. package/src/components/Nav/examples/Nav.md +10 -626
  45. package/src/components/Nav/examples/NavDefault.tsx +29 -0
  46. package/src/components/Nav/examples/NavDrilldown.tsx +20 -15
  47. package/src/components/Nav/examples/NavExpandable.tsx +119 -0
  48. package/src/components/Nav/examples/NavExpandableThirdLevel.tsx +115 -0
  49. package/src/components/Nav/examples/NavFlyout.tsx +102 -0
  50. package/src/components/Nav/examples/NavGrouped.tsx +67 -0
  51. package/src/components/Nav/examples/NavHorizontalPageHeader.tsx +34 -0
  52. package/src/components/Nav/examples/NavHorizontalSubNav.tsx +32 -0
  53. package/src/components/Nav/examples/NavLegacyTertiary.tsx +32 -0
  54. package/src/components/Nav/examples/NavMixed.tsx +101 -0
  55. package/src/components/Page/Page.tsx +1 -1
  56. package/src/components/Page/PageBreadcrumb.tsx +11 -0
  57. package/src/components/Page/PageGroup.tsx +11 -0
  58. package/src/components/Page/PageNavigation.tsx +11 -0
  59. package/src/components/Page/PageSection.tsx +13 -0
  60. package/src/components/Page/__tests__/PageBreadcrumb.test.tsx +41 -1
  61. package/src/components/Page/__tests__/PageGroup.test.tsx +41 -1
  62. package/src/components/Page/__tests__/PageNavigation.test.tsx +41 -1
  63. package/src/components/Page/__tests__/PageSection.test.tsx +41 -1
  64. package/src/components/Popover/examples/Popover.md +10 -293
  65. package/src/components/Popover/examples/PopoverAdvanced.tsx +79 -0
  66. package/src/components/Popover/examples/PopoverAlert.tsx +47 -0
  67. package/src/components/Popover/examples/PopoverBasic.tsx +15 -0
  68. package/src/components/Popover/examples/PopoverCloseControlled.tsx +29 -0
  69. package/src/components/Popover/examples/PopoverCloseUncontrolled.tsx +25 -0
  70. package/src/components/Popover/examples/PopoverReactRef.tsx +23 -0
  71. package/src/components/Popover/examples/PopoverSelectorRef.tsx +19 -0
  72. package/src/components/Popover/examples/PopoverWidthAuto.tsx +14 -0
  73. package/src/components/Popover/examples/PopoverWithIconInTheTitle.tsx +17 -0
  74. package/src/components/Popover/examples/PopoverWithoutHeaderFooterCloseNoPadding.tsx +21 -0
  75. package/src/components/Progress/examples/Progress.md +18 -117
  76. package/src/components/Progress/examples/ProgressBasic.tsx +4 -0
  77. package/src/components/Progress/examples/ProgressFailure.tsx +6 -0
  78. package/src/components/Progress/examples/ProgressFailureWithoutMeasure.tsx +6 -0
  79. package/src/components/Progress/examples/ProgressFiniteStep.tsx +14 -0
  80. package/src/components/Progress/examples/ProgressInside.tsx +6 -0
  81. package/src/components/Progress/examples/ProgressInsideSuccess.tsx +11 -0
  82. package/src/components/Progress/examples/ProgressLarge.tsx +6 -0
  83. package/src/components/Progress/examples/ProgressOutside.tsx +6 -0
  84. package/src/components/Progress/examples/ProgressOutsideFailure.tsx +11 -0
  85. package/src/components/Progress/examples/ProgressSingleLine.tsx +6 -0
  86. package/src/components/Progress/examples/ProgressSmall.tsx +6 -0
  87. package/src/components/Progress/examples/ProgressStepInstruction.tsx +6 -0
  88. package/src/components/Progress/examples/ProgressSuccess.tsx +6 -0
  89. package/src/components/Progress/examples/ProgressTitleOutsideOfProgressBar.tsx +24 -0
  90. package/src/components/Progress/examples/ProgressTruncateTitle.tsx +10 -0
  91. package/src/components/Progress/examples/ProgressWarning.tsx +6 -0
  92. package/src/components/Progress/examples/ProgressWithoutMeasure.tsx +6 -0
  93. package/src/demos/JumpLinks.md +1 -0
  94. package/src/demos/examples/BackToTop/BackToTopNameDemo.tsx +6 -1
package/dist/umd/react-core.css CHANGED
@@ -1288,6 +1288,129 @@ textarea.pf-c-form-control {
1288
1288
  display: none !important;
1289
1289
  }
1290
1290
  }
1291
+ .pf-c-back-to-top {
1292
+ --pf-c-back-to-top--Right: var(--pf-global--spacer--2xl);
1293
+ --pf-c-back-to-top--Bottom: var(--pf-global--spacer--lg);
1294
+ --pf-c-back-to-top--md--Bottom: var(--pf-global--spacer--2xl);
1295
+ --pf-c-back-to-top--c-button--FontSize: var(--pf-global--FontSize--xs);
1296
+ --pf-c-back-to-top--c-button--BorderRadius: var(--pf-global--BorderRadius--lg);
1297
+ --pf-c-back-to-top--c-button--PaddingTop: var(--pf-global--spacer--xs);
1298
+ --pf-c-back-to-top--c-button--PaddingRight: var(--pf-global--spacer--sm);
1299
+ --pf-c-back-to-top--c-button--PaddingBottom: var(--pf-global--spacer--xs);
1300
+ --pf-c-back-to-top--c-button--PaddingLeft: var(--pf-global--spacer--sm);
1301
+ --pf-c-back-to-top--c-button--BoxShadow: var(--pf-global--BoxShadow--lg-bottom);
1302
+ position: absolute;
1303
+ right: var(--pf-c-back-to-top--Right);
1304
+ bottom: var(--pf-c-back-to-top--Bottom);
1305
+ }
1306
+
1307
+ @media (min-width: 768px) {
1308
+ .pf-c-back-to-top {
1309
+ --pf-c-back-to-top--Bottom: var(--pf-c-back-to-top--md--Bottom);
1310
+ }
1311
+ }
1312
+ .pf-c-back-to-top.pf-m-hidden {
1313
+ display: none;
1314
+ }
1315
+
1316
+ .pf-c-back-to-top .pf-c-button {
1317
+ --pf-c-button--FontSize: var(--pf-c-back-to-top--c-button--FontSize);
1318
+ --pf-c-button--BorderRadius: var(--pf-c-back-to-top--c-button--BorderRadius);
1319
+ --pf-c-button--PaddingTop: var(--pf-c-back-to-top--c-button--PaddingTop);
1320
+ --pf-c-button--PaddingRight: var(--pf-c-back-to-top--c-button--PaddingRight);
1321
+ --pf-c-button--PaddingBottom: var(--pf-c-back-to-top--c-button--PaddingBottom);
1322
+ --pf-c-button--PaddingLeft: var(--pf-c-back-to-top--c-button--PaddingLeft);
1323
+ box-shadow: var(--pf-c-back-to-top--c-button--BoxShadow);
1324
+ }
1325
+
1326
+ .pf-c-background-image {
1327
+ --pf-c-background-image--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
1328
+ --pf-c-background-image--BackgroundImage: url("../../assets/images/pfbg_576.jpg");
1329
+ --pf-c-background-image--BackgroundImage-2x: url("../../assets/images/pfbg_576@2x.jpg");
1330
+ --pf-c-background-image--BackgroundImage--sm: url("../../assets/images/pfbg_768.jpg");
1331
+ --pf-c-background-image--BackgroundImage--sm-2x: url("../../assets/images/pfbg_768@2x.jpg");
1332
+ --pf-c-background-image--BackgroundImage--lg: url("../../assets/images/pfbg_2000.jpg");
1333
+ --pf-c-background-image--Filter: url("#image_overlay");
1334
+ }
1335
+
1336
+ .pf-c-background-image::before {
1337
+ position: fixed;
1338
+ top: 0;
1339
+ left: 0;
1340
+ z-index: -1;
1341
+ width: 100%;
1342
+ height: 100%;
1343
+ content: "";
1344
+ background-color: var(--pf-c-background-image--BackgroundColor);
1345
+ background-image: var(--pf-c-background-image--BackgroundImage);
1346
+ filter: var(--pf-c-background-image--Filter);
1347
+ background-repeat: no-repeat;
1348
+ background-size: cover;
1349
+ }
1350
+
1351
+ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
1352
+ .pf-c-background-image::before {
1353
+ --pf-c-background-image--BackgroundImage: var(--pf-c-background-image--BackgroundImage-2x);
1354
+ }
1355
+ }
1356
+ @media (min-width: 576px) {
1357
+ .pf-c-background-image::before {
1358
+ --pf-c-background-image--BackgroundImage: var(--pf-c-background-image--BackgroundImage--sm);
1359
+ }
1360
+ }
1361
+ @media (min-width: 576px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 576px) and (min-resolution: 192dpi) {
1362
+ .pf-c-background-image::before {
1363
+ --pf-c-background-image--BackgroundImage: var(--pf-c-background-image--BackgroundImage--sm-2x);
1364
+ }
1365
+ }
1366
+ @media (min-width: 992px) {
1367
+ .pf-c-background-image::before {
1368
+ --pf-c-background-image--BackgroundImage: var(--pf-c-background-image--BackgroundImage--lg);
1369
+ }
1370
+ }
1371
+ .pf-c-background-image__filter {
1372
+ display: block;
1373
+ }
1374
+
1375
+ .pf-c-badge {
1376
+ --pf-c-badge--BorderRadius: var(--pf-global--BorderRadius--lg);
1377
+ --pf-c-badge--FontSize: var(--pf-global--FontSize--xs);
1378
+ --pf-c-badge--FontWeight: var(--pf-global--FontWeight--bold);
1379
+ --pf-c-badge--PaddingRight: var(--pf-global--spacer--sm);
1380
+ --pf-c-badge--PaddingLeft: var(--pf-global--spacer--sm);
1381
+ --pf-c-badge--Color: var(--pf-global--Color--dark-100);
1382
+ --pf-c-badge--MinWidth: var(--pf-global--spacer--xl);
1383
+ --pf-c-badge--m-read--BackgroundColor: var(--pf-global--BackgroundColor--200);
1384
+ --pf-c-badge--m-read--Color: var(--pf-global--Color--dark-100);
1385
+ --pf-c-badge--m-unread--BackgroundColor: var(--pf-global--primary-color--100);
1386
+ --pf-c-badge--m-unread--Color: var(--pf-global--Color--light-100);
1387
+ display: inline-block;
1388
+ min-width: var(--pf-c-badge--MinWidth);
1389
+ padding-right: var(--pf-c-badge--PaddingRight);
1390
+ padding-left: var(--pf-c-badge--PaddingLeft);
1391
+ font-size: var(--pf-c-badge--FontSize);
1392
+ font-weight: var(--pf-c-badge--FontWeight);
1393
+ color: var(--pf-c-badge--Color);
1394
+ text-align: center;
1395
+ background-color: var(--pf-c-badge--BackgroundColor);
1396
+ border-radius: var(--pf-c-badge--BorderRadius);
1397
+ }
1398
+
1399
+ .pf-c-badge.pf-m-read {
1400
+ --pf-c-badge--Color: var(--pf-c-badge--m-read--Color);
1401
+ --pf-c-badge--BackgroundColor: var(--pf-c-badge--m-read--BackgroundColor);
1402
+ }
1403
+
1404
+ .pf-c-badge.pf-m-unread {
1405
+ --pf-c-badge--Color: var(--pf-c-badge--m-unread--Color);
1406
+ --pf-c-badge--BackgroundColor: var(--pf-c-badge--m-unread--BackgroundColor);
1407
+ }
1408
+
1409
+ :where(.pf-theme-dark) .pf-c-badge {
1410
+ --pf-c-badge--m-read--BackgroundColor: var(--pf-global--palette--black-500);
1411
+ --pf-c-badge--m-unread--BackgroundColor: var(--pf-global--primary-color--300);
1412
+ }
1413
+
1291
1414
  .pf-c-avatar {
1292
1415
  --pf-c-avatar--BorderColor: transparent;
1293
1416
  --pf-c-avatar--BorderWidth: 0;
@@ -1542,129 +1665,6 @@ textarea.pf-c-form-control {
1542
1665
  --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))))));
1543
1666
  }
1544
1667
  }
1545
- .pf-c-back-to-top {
1546
- --pf-c-back-to-top--Right: var(--pf-global--spacer--2xl);
1547
- --pf-c-back-to-top--Bottom: var(--pf-global--spacer--lg);
1548
- --pf-c-back-to-top--md--Bottom: var(--pf-global--spacer--2xl);
1549
- --pf-c-back-to-top--c-button--FontSize: var(--pf-global--FontSize--xs);
1550
- --pf-c-back-to-top--c-button--BorderRadius: var(--pf-global--BorderRadius--lg);
1551
- --pf-c-back-to-top--c-button--PaddingTop: var(--pf-global--spacer--xs);
1552
- --pf-c-back-to-top--c-button--PaddingRight: var(--pf-global--spacer--sm);
1553
- --pf-c-back-to-top--c-button--PaddingBottom: var(--pf-global--spacer--xs);
1554
- --pf-c-back-to-top--c-button--PaddingLeft: var(--pf-global--spacer--sm);
1555
- --pf-c-back-to-top--c-button--BoxShadow: var(--pf-global--BoxShadow--lg-bottom);
1556
- position: absolute;
1557
- right: var(--pf-c-back-to-top--Right);
1558
- bottom: var(--pf-c-back-to-top--Bottom);
1559
- }
1560
-
1561
- @media (min-width: 768px) {
1562
- .pf-c-back-to-top {
1563
- --pf-c-back-to-top--Bottom: var(--pf-c-back-to-top--md--Bottom);
1564
- }
1565
- }
1566
- .pf-c-back-to-top.pf-m-hidden {
1567
- display: none;
1568
- }
1569
-
1570
- .pf-c-back-to-top .pf-c-button {
1571
- --pf-c-button--FontSize: var(--pf-c-back-to-top--c-button--FontSize);
1572
- --pf-c-button--BorderRadius: var(--pf-c-back-to-top--c-button--BorderRadius);
1573
- --pf-c-button--PaddingTop: var(--pf-c-back-to-top--c-button--PaddingTop);
1574
- --pf-c-button--PaddingRight: var(--pf-c-back-to-top--c-button--PaddingRight);
1575
- --pf-c-button--PaddingBottom: var(--pf-c-back-to-top--c-button--PaddingBottom);
1576
- --pf-c-button--PaddingLeft: var(--pf-c-back-to-top--c-button--PaddingLeft);
1577
- box-shadow: var(--pf-c-back-to-top--c-button--BoxShadow);
1578
- }
1579
-
1580
- .pf-c-background-image {
1581
- --pf-c-background-image--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
1582
- --pf-c-background-image--BackgroundImage: url("../../assets/images/pfbg_576.jpg");
1583
- --pf-c-background-image--BackgroundImage-2x: url("../../assets/images/pfbg_576@2x.jpg");
1584
- --pf-c-background-image--BackgroundImage--sm: url("../../assets/images/pfbg_768.jpg");
1585
- --pf-c-background-image--BackgroundImage--sm-2x: url("../../assets/images/pfbg_768@2x.jpg");
1586
- --pf-c-background-image--BackgroundImage--lg: url("../../assets/images/pfbg_2000.jpg");
1587
- --pf-c-background-image--Filter: url("#image_overlay");
1588
- }
1589
-
1590
- .pf-c-background-image::before {
1591
- position: fixed;
1592
- top: 0;
1593
- left: 0;
1594
- z-index: -1;
1595
- width: 100%;
1596
- height: 100%;
1597
- content: "";
1598
- background-color: var(--pf-c-background-image--BackgroundColor);
1599
- background-image: var(--pf-c-background-image--BackgroundImage);
1600
- filter: var(--pf-c-background-image--Filter);
1601
- background-repeat: no-repeat;
1602
- background-size: cover;
1603
- }
1604
-
1605
- @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
1606
- .pf-c-background-image::before {
1607
- --pf-c-background-image--BackgroundImage: var(--pf-c-background-image--BackgroundImage-2x);
1608
- }
1609
- }
1610
- @media (min-width: 576px) {
1611
- .pf-c-background-image::before {
1612
- --pf-c-background-image--BackgroundImage: var(--pf-c-background-image--BackgroundImage--sm);
1613
- }
1614
- }
1615
- @media (min-width: 576px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 576px) and (min-resolution: 192dpi) {
1616
- .pf-c-background-image::before {
1617
- --pf-c-background-image--BackgroundImage: var(--pf-c-background-image--BackgroundImage--sm-2x);
1618
- }
1619
- }
1620
- @media (min-width: 992px) {
1621
- .pf-c-background-image::before {
1622
- --pf-c-background-image--BackgroundImage: var(--pf-c-background-image--BackgroundImage--lg);
1623
- }
1624
- }
1625
- .pf-c-background-image__filter {
1626
- display: block;
1627
- }
1628
-
1629
- .pf-c-badge {
1630
- --pf-c-badge--BorderRadius: var(--pf-global--BorderRadius--lg);
1631
- --pf-c-badge--FontSize: var(--pf-global--FontSize--xs);
1632
- --pf-c-badge--FontWeight: var(--pf-global--FontWeight--bold);
1633
- --pf-c-badge--PaddingRight: var(--pf-global--spacer--sm);
1634
- --pf-c-badge--PaddingLeft: var(--pf-global--spacer--sm);
1635
- --pf-c-badge--Color: var(--pf-global--Color--dark-100);
1636
- --pf-c-badge--MinWidth: var(--pf-global--spacer--xl);
1637
- --pf-c-badge--m-read--BackgroundColor: var(--pf-global--BackgroundColor--200);
1638
- --pf-c-badge--m-read--Color: var(--pf-global--Color--dark-100);
1639
- --pf-c-badge--m-unread--BackgroundColor: var(--pf-global--primary-color--100);
1640
- --pf-c-badge--m-unread--Color: var(--pf-global--Color--light-100);
1641
- display: inline-block;
1642
- min-width: var(--pf-c-badge--MinWidth);
1643
- padding-right: var(--pf-c-badge--PaddingRight);
1644
- padding-left: var(--pf-c-badge--PaddingLeft);
1645
- font-size: var(--pf-c-badge--FontSize);
1646
- font-weight: var(--pf-c-badge--FontWeight);
1647
- color: var(--pf-c-badge--Color);
1648
- text-align: center;
1649
- background-color: var(--pf-c-badge--BackgroundColor);
1650
- border-radius: var(--pf-c-badge--BorderRadius);
1651
- }
1652
-
1653
- .pf-c-badge.pf-m-read {
1654
- --pf-c-badge--Color: var(--pf-c-badge--m-read--Color);
1655
- --pf-c-badge--BackgroundColor: var(--pf-c-badge--m-read--BackgroundColor);
1656
- }
1657
-
1658
- .pf-c-badge.pf-m-unread {
1659
- --pf-c-badge--Color: var(--pf-c-badge--m-unread--Color);
1660
- --pf-c-badge--BackgroundColor: var(--pf-c-badge--m-unread--BackgroundColor);
1661
- }
1662
-
1663
- :where(.pf-theme-dark) .pf-c-badge {
1664
- --pf-c-badge--m-read--BackgroundColor: var(--pf-global--palette--black-500);
1665
- --pf-c-badge--m-unread--BackgroundColor: var(--pf-global--primary-color--300);
1666
- }
1667
-
1668
1668
  .pf-c-banner.pf-m-warning, .pf-c-banner.pf-m-info {
1669
1669
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
1670
1670
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
@@ -3494,16 +3494,54 @@ label.pf-c-check, .pf-c-check__label,
3494
3494
  margin-bottom: var(--pf-c-chip-group__close--MarginBottom);
3495
3495
  }
3496
3496
 
3497
- .pf-c-clipboard-copy {
3498
- --pf-c-clipboard-copy__toggle-icon--Transition: .2s ease-in 0s;
3499
- --pf-c-clipboard-copy--m-expanded__toggle-icon--Rotate: 90deg;
3500
- --pf-c-clipboard-copy__expandable-content--PaddingTop: var(--pf-global--spacer--md);
3501
- --pf-c-clipboard-copy__expandable-content--PaddingRight: var(--pf-global--spacer--md);
3502
- --pf-c-clipboard-copy__expandable-content--PaddingBottom: var(--pf-global--spacer--md);
3503
- --pf-c-clipboard-copy__expandable-content--PaddingLeft: var(--pf-global--spacer--md);
3504
- --pf-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
3505
- --pf-c-clipboard-copy__expandable-content--BorderTopWidth: 0;
3506
- --pf-c-clipboard-copy__expandable-content--BorderRightWidth: var(--pf-global--BorderWidth--sm);
3497
+ .pf-c-code-block {
3498
+ --pf-c-code-block--BackgroundColor: var(--pf-global--BackgroundColor--200);
3499
+ --pf-c-code-block__header--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
3500
+ --pf-c-code-block__header--BorderBottomColor: var(--pf-global--BorderColor--100);
3501
+ --pf-c-code-block__content--PaddingTop: var(--pf-global--spacer--md);
3502
+ --pf-c-code-block__content--PaddingRight: var(--pf-global--spacer--md);
3503
+ --pf-c-code-block__content--PaddingBottom: var(--pf-global--spacer--md);
3504
+ --pf-c-code-block__content--PaddingLeft: var(--pf-global--spacer--md);
3505
+ --pf-c-code-block__pre--FontFamily: var(--pf-global--FontFamily--monospace);
3506
+ --pf-c-code-block__pre--FontSize: var(--pf-global--FontSize--sm);
3507
+ background-color: var(--pf-c-code-block--BackgroundColor);
3508
+ }
3509
+
3510
+ .pf-c-code-block__header {
3511
+ display: flex;
3512
+ border-bottom: var(--pf-c-code-block__header--BorderBottomWidth) solid var(--pf-c-code-block__header--BorderBottomColor);
3513
+ }
3514
+
3515
+ .pf-c-code-block__actions {
3516
+ display: flex;
3517
+ margin-left: auto;
3518
+ }
3519
+
3520
+ .pf-c-code-block__content {
3521
+ padding: var(--pf-c-code-block__content--PaddingTop) var(--pf-c-code-block__content--PaddingRight) var(--pf-c-code-block__content--PaddingBottom) var(--pf-c-code-block__content--PaddingLeft);
3522
+ }
3523
+
3524
+ .pf-c-code-block__pre {
3525
+ font-family: var(--pf-c-code-block__pre--FontFamily);
3526
+ font-size: var(--pf-c-code-block__pre--FontSize);
3527
+ overflow-wrap: break-word;
3528
+ white-space: pre-wrap;
3529
+ }
3530
+
3531
+ .pf-c-code-block__code {
3532
+ font-family: var(--pf-c-code-block__code--FontFamily, inherit);
3533
+ }
3534
+
3535
+ .pf-c-clipboard-copy {
3536
+ --pf-c-clipboard-copy__toggle-icon--Transition: .2s ease-in 0s;
3537
+ --pf-c-clipboard-copy--m-expanded__toggle-icon--Rotate: 90deg;
3538
+ --pf-c-clipboard-copy__expandable-content--PaddingTop: var(--pf-global--spacer--md);
3539
+ --pf-c-clipboard-copy__expandable-content--PaddingRight: var(--pf-global--spacer--md);
3540
+ --pf-c-clipboard-copy__expandable-content--PaddingBottom: var(--pf-global--spacer--md);
3541
+ --pf-c-clipboard-copy__expandable-content--PaddingLeft: var(--pf-global--spacer--md);
3542
+ --pf-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
3543
+ --pf-c-clipboard-copy__expandable-content--BorderTopWidth: 0;
3544
+ --pf-c-clipboard-copy__expandable-content--BorderRightWidth: var(--pf-global--BorderWidth--sm);
3507
3545
  --pf-c-clipboard-copy__expandable-content--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
3508
3546
  --pf-c-clipboard-copy__expandable-content--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
3509
3547
  --pf-c-clipboard-copy__expandable-content--BorderColor: var(--pf-global--BorderColor--100);
@@ -3604,44 +3642,6 @@ label.pf-c-check, .pf-c-check__label,
3604
3642
  border: 0;
3605
3643
  }
3606
3644
 
3607
- .pf-c-code-block {
3608
- --pf-c-code-block--BackgroundColor: var(--pf-global--BackgroundColor--200);
3609
- --pf-c-code-block__header--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
3610
- --pf-c-code-block__header--BorderBottomColor: var(--pf-global--BorderColor--100);
3611
- --pf-c-code-block__content--PaddingTop: var(--pf-global--spacer--md);
3612
- --pf-c-code-block__content--PaddingRight: var(--pf-global--spacer--md);
3613
- --pf-c-code-block__content--PaddingBottom: var(--pf-global--spacer--md);
3614
- --pf-c-code-block__content--PaddingLeft: var(--pf-global--spacer--md);
3615
- --pf-c-code-block__pre--FontFamily: var(--pf-global--FontFamily--monospace);
3616
- --pf-c-code-block__pre--FontSize: var(--pf-global--FontSize--sm);
3617
- background-color: var(--pf-c-code-block--BackgroundColor);
3618
- }
3619
-
3620
- .pf-c-code-block__header {
3621
- display: flex;
3622
- border-bottom: var(--pf-c-code-block__header--BorderBottomWidth) solid var(--pf-c-code-block__header--BorderBottomColor);
3623
- }
3624
-
3625
- .pf-c-code-block__actions {
3626
- display: flex;
3627
- margin-left: auto;
3628
- }
3629
-
3630
- .pf-c-code-block__content {
3631
- padding: var(--pf-c-code-block__content--PaddingTop) var(--pf-c-code-block__content--PaddingRight) var(--pf-c-code-block__content--PaddingBottom) var(--pf-c-code-block__content--PaddingLeft);
3632
- }
3633
-
3634
- .pf-c-code-block__pre {
3635
- font-family: var(--pf-c-code-block__pre--FontFamily);
3636
- font-size: var(--pf-c-code-block__pre--FontSize);
3637
- overflow-wrap: break-word;
3638
- white-space: pre-wrap;
3639
- }
3640
-
3641
- .pf-c-code-block__code {
3642
- font-family: var(--pf-c-code-block__code--FontFamily, inherit);
3643
- }
3644
-
3645
3645
  .pf-c-context-selector__menu {
3646
3646
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
3647
3647
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
@@ -14662,573 +14662,573 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
14662
14662
  --pf-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-global--primary-color--300);
14663
14663
  }
14664
14664
 
14665
- .pf-c-notification-drawer {
14666
- --pf-c-notification-drawer--BackgroundColor: var(--pf-global--BackgroundColor--200);
14667
- --pf-c-notification-drawer__header--PaddingTop: var(--pf-global--spacer--md);
14668
- --pf-c-notification-drawer__header--PaddingRight: var(--pf-global--spacer--md);
14669
- --pf-c-notification-drawer__header--PaddingBottom: var(--pf-global--spacer--md);
14670
- --pf-c-notification-drawer__header--PaddingLeft: var(--pf-global--spacer--md);
14671
- --pf-c-notification-drawer__header--BackgroundColor: var(--pf-global--BackgroundColor--100);
14672
- --pf-c-notification-drawer__header--BoxShadow: var(--pf-global--BoxShadow--sm-bottom);
14673
- --pf-c-notification-drawer__header--ZIndex: var(--pf-global--ZIndex--sm);
14674
- --pf-c-notification-drawer__header-title--FontSize: var(--pf-global--FontSize--xl);
14675
- --pf-c-notification-drawer__header-status--MarginLeft: var(--pf-global--spacer--md);
14676
- --pf-c-notification-drawer__body--ZIndex: var(--pf-global--ZIndex--xs);
14677
- --pf-c-notification-drawer__list-item--PaddingTop: var(--pf-global--spacer--md);
14678
- --pf-c-notification-drawer__list-item--PaddingRight: var(--pf-global--spacer--md);
14679
- --pf-c-notification-drawer__list-item--PaddingBottom: var(--pf-global--spacer--md);
14680
- --pf-c-notification-drawer__list-item--PaddingLeft: var(--pf-global--spacer--md);
14681
- --pf-c-notification-drawer__list-item--BackgroundColor: var(--pf-global--BackgroundColor--100);
14682
- --pf-c-notification-drawer__list-item--BoxShadow: inset var(--pf-global--BoxShadow--sm-bottom);
14683
- --pf-c-notification-drawer__list-item--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
14684
- --pf-c-notification-drawer__list-item--BorderBottomColor: transparent;
14685
- --pf-c-notification-drawer__list-item--OutlineOffset: -0.25rem;
14686
- --pf-c-notification-drawer__list-item--before--Width: var(--pf-global--BorderWidth--lg);
14687
- --pf-c-notification-drawer__list-item--before--Top: 0;
14688
- --pf-c-notification-drawer__list-item--before--Bottom: calc(var(--pf-c-notification-drawer__list-item--BorderBottomWidth) * -1);
14689
- --pf-c-notification-drawer__list-item--m-info__list-item-header-icon--Color: var(--pf-global--info-color--100);
14690
- --pf-c-notification-drawer__list-item--m-info__list-item--before--BackgroundColor: var(--pf-global--info-color--100);
14691
- --pf-c-notification-drawer__list-item--m-warning__list-item-header-icon--Color: var(--pf-global--warning-color--100);
14692
- --pf-c-notification-drawer__list-item--m-warning__list-item--before--BackgroundColor: var(--pf-global--warning-color--100);
14693
- --pf-c-notification-drawer__list-item--m-danger__list-item-header-icon--Color: var(--pf-global--danger-color--100);
14694
- --pf-c-notification-drawer__list-item--m-danger__list-item--before--BackgroundColor: var(--pf-global--danger-color--100);
14695
- --pf-c-notification-drawer__list-item--m-success__list-item-header-icon--Color: var(--pf-global--success-color--100);
14696
- --pf-c-notification-drawer__list-item--m-success__list-item--before--BackgroundColor: var(--pf-global--success-color--100);
14697
- --pf-c-notification-drawer__list-item--m-default__list-item-header-icon--Color: var(--pf-global--default-color--200);
14698
- --pf-c-notification-drawer__list-item--m-default__list-item--before--BackgroundColor: var(--pf-global--default-color--200);
14699
- --pf-c-notification-drawer__list-item--m-read--BackgroundColor: var(--pf-global--BackgroundColor--200);
14700
- --pf-c-notification-drawer__list-item--m-read--BorderBottomColor: var(--pf-global--BorderColor--100);
14701
- --pf-c-notification-drawer__list-item--m-read--before--Top: calc(var(--pf-c-notification-drawer__list-item--BorderBottomWidth) * -1);
14702
- --pf-c-notification-drawer__list-item--m-read--before--Bottom: 0;
14703
- --pf-c-notification-drawer__list-item--m-read--before--BackgroundColor: transparent;
14704
- --pf-c-notification-drawer__list-item--list-item--m-read--before--Top: 0;
14705
- --pf-c-notification-drawer__list-item--list-item--m-read--BoxShadow: inset var(--pf-global--BoxShadow--sm-bottom);
14706
- --pf-c-notification-drawer__list-item--m-hoverable--hover--ZIndex: var(--pf-global--ZIndex--xs);
14707
- --pf-c-notification-drawer__list-item--m-hoverable--hover--BoxShadow: var(--pf-global--BoxShadow--md-top), var(--pf-global--BoxShadow--md-bottom);
14708
- --pf-c-notification-drawer__list-item-header--MarginBottom: var(--pf-global--spacer--xs);
14709
- --pf-c-notification-drawer__list-item-header-icon--Color: inherit;
14710
- --pf-c-notification-drawer__list-item-header-icon--MarginRight: var(--pf-global--spacer--sm);
14711
- --pf-c-notification-drawer__list-item-header-title--FontWeight: var(--pf-global--FontWeight--bold);
14712
- --pf-c-notification-drawer__list-item-header-title--max-lines: 1;
14713
- --pf-c-notification-drawer__list-item--m-read__list-item-header-title--FontWeight: var(--pf-global--FontWeight--normal);
14714
- --pf-c-notification-drawer__list-item-description--MarginBottom: var(--pf-global--spacer--sm);
14715
- --pf-c-notification-drawer__list-item-timestamp--Color: var(--pf-global--Color--200);
14716
- --pf-c-notification-drawer__list-item-timestamp--FontSize: var(--pf-global--FontSize--sm);
14717
- --pf-c-notification-drawer__group--m-expanded--group--BorderTopWidth: var(--pf-global--BorderWidth--sm);
14718
- --pf-c-notification-drawer__group--m-expanded--group--BorderTopColor: var(--pf-global--BorderColor--100);
14719
- --pf-c-notification-drawer__group--m-expanded--MinHeight: 0;
14720
- --pf-c-notification-drawer__group-toggle--PaddingTop: var(--pf-global--spacer--md);
14721
- --pf-c-notification-drawer__group-toggle--PaddingRight: var(--pf-global--spacer--md);
14722
- --pf-c-notification-drawer__group-toggle--PaddingBottom: var(--pf-global--spacer--md);
14723
- --pf-c-notification-drawer__group-toggle--PaddingLeft: var(--pf-global--spacer--md);
14724
- --pf-c-notification-drawer__group-toggle--BackgroundColor: var(--pf-global--BackgroundColor--100);
14725
- --pf-c-notification-drawer__group-toggle--BorderColor: var(--pf-global--BorderColor--100);
14726
- --pf-c-notification-drawer__group-toggle--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
14727
- --pf-c-notification-drawer__group-toggle--OutlineOffset: -0.25rem;
14728
- --pf-c-notification-drawer__group-toggle-title--MarginRight: var(--pf-global--spacer--md);
14729
- --pf-c-notification-drawer__group-toggle-title--max-lines: 1;
14730
- --pf-c-notification-drawer__group-toggle-count--MarginRight: var(--pf-global--spacer--md);
14731
- --pf-c-notification-drawer__group-toggle-icon--MarginRight: var(--pf-global--spacer--md);
14732
- --pf-c-notification-drawer__group-toggle-icon--Color: var(--pf-global--Color--200);
14733
- --pf-c-notification-drawer__group-toggle-icon--Transition: .2s ease-in 0s;
14734
- --pf-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate: 90deg;
14735
- display: flex;
14736
- flex-direction: column;
14737
- height: 100%;
14738
- background-color: var(--pf-c-notification-drawer--BackgroundColor);
14739
- }
14740
-
14741
- .pf-c-notification-drawer__header {
14665
+ .pf-c-options-menu {
14666
+ --pf-c-options-menu__toggle--BackgroundColor: transparent;
14667
+ --pf-c-options-menu__toggle--PaddingTop: var(--pf-global--spacer--form-element);
14668
+ --pf-c-options-menu__toggle--PaddingRight: var(--pf-global--spacer--sm);
14669
+ --pf-c-options-menu__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
14670
+ --pf-c-options-menu__toggle--PaddingLeft: var(--pf-global--spacer--sm);
14671
+ --pf-c-options-menu__toggle--MinWidth: 0;
14672
+ --pf-c-options-menu__toggle--LineHeight: var(--pf-global--LineHeight--md);
14673
+ --pf-c-options-menu__toggle--BorderWidth: var(--pf-global--BorderWidth--sm);
14674
+ --pf-c-options-menu__toggle--BorderTopColor: var(--pf-global--BorderColor--300);
14675
+ --pf-c-options-menu__toggle--BorderRightColor: var(--pf-global--BorderColor--300);
14676
+ --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-global--BorderColor--200);
14677
+ --pf-c-options-menu__toggle--BorderLeftColor: var(--pf-global--BorderColor--300);
14678
+ --pf-c-options-menu__toggle--Color: var(--pf-global--Color--100);
14679
+ --pf-c-options-menu__toggle--hover--BorderBottomColor: var(--pf-global--active-color--100);
14680
+ --pf-c-options-menu__toggle--active--BorderBottomWidth: var(--pf-global--BorderWidth--md);
14681
+ --pf-c-options-menu__toggle--active--BorderBottomColor: var(--pf-global--active-color--100);
14682
+ --pf-c-options-menu__toggle--focus--BorderBottomWidth: var(--pf-global--BorderWidth--md);
14683
+ --pf-c-options-menu__toggle--focus--BorderBottomColor: var(--pf-global--active-color--100);
14684
+ --pf-c-options-menu__toggle--expanded--BorderBottomWidth: var(--pf-global--BorderWidth--md);
14685
+ --pf-c-options-menu__toggle--expanded--BorderBottomColor: var(--pf-global--active-color--100);
14686
+ --pf-c-options-menu__toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
14687
+ --pf-c-options-menu__toggle--m-plain--Color: var(--pf-global--Color--200);
14688
+ --pf-c-options-menu__toggle--m-plain--hover--Color: var(--pf-global--Color--100);
14689
+ --pf-c-options-menu__toggle--m-plain--disabled--Color: var(--pf-global--disabled-color--200);
14690
+ --pf-c-options-menu__toggle--m-plain--PaddingRight: var(--pf-global--spacer--md);
14691
+ --pf-c-options-menu__toggle--m-plain--PaddingLeft: var(--pf-global--spacer--md);
14692
+ --pf-c-options-menu__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
14693
+ --pf-c-options-menu__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
14694
+ --pf-c-options-menu--m-top--m-expanded__toggle-icon--Rotate: 180deg;
14695
+ --pf-c-options-menu--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
14696
+ --pf-c-options-menu--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);
14697
+ --pf-c-options-menu__toggle-button--BackgroundColor: transparent;
14698
+ --pf-c-options-menu__toggle-button--PaddingTop: var(--pf-global--spacer--form-element);
14699
+ --pf-c-options-menu__toggle-button--PaddingRight: var(--pf-global--spacer--sm);
14700
+ --pf-c-options-menu__toggle-button--PaddingBottom: var(--pf-global--spacer--form-element);
14701
+ --pf-c-options-menu__toggle-button--PaddingLeft: var(--pf-global--spacer--sm);
14702
+ --pf-c-options-menu__menu--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
14703
+ --pf-c-options-menu__menu--BoxShadow: var(--pf-global--BoxShadow--md);
14704
+ --pf-c-options-menu__menu--PaddingTop: var(--pf-global--spacer--sm);
14705
+ --pf-c-options-menu__menu--PaddingBottom: var(--pf-global--spacer--sm);
14706
+ --pf-c-options-menu__menu--Top: calc(100% + var(--pf-global--spacer--xs));
14707
+ --pf-c-options-menu__menu--ZIndex: var(--pf-global--ZIndex--sm);
14708
+ --pf-c-options-menu--m-top__menu--Top: 0;
14709
+ --pf-c-options-menu--m-top__menu--TranslateY: calc(-100% - var(--pf-global--spacer--xs));
14710
+ --pf-c-options-menu__menu-item--BackgroundColor: transparent;
14711
+ --pf-c-options-menu__menu-item--Color: var(--pf-global--Color--100);
14712
+ --pf-c-options-menu__menu-item--FontSize: var(--pf-global--FontSize--md);
14713
+ --pf-c-options-menu__menu-item--PaddingTop: var(--pf-global--spacer--sm);
14714
+ --pf-c-options-menu__menu-item--PaddingRight: var(--pf-global--spacer--md);
14715
+ --pf-c-options-menu__menu-item--PaddingBottom: var(--pf-global--spacer--sm);
14716
+ --pf-c-options-menu__menu-item--PaddingLeft: var(--pf-global--spacer--md);
14717
+ --pf-c-options-menu__menu-item--disabled--Color: var(--pf-global--Color--dark-200);
14718
+ --pf-c-options-menu__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
14719
+ --pf-c-options-menu__menu-item--disabled--BackgroundColor: transparent;
14720
+ --pf-c-options-menu__menu-item-icon--Color: var(--pf-global--active-color--100);
14721
+ --pf-c-options-menu__menu-item-icon--FontSize: var(--pf-global--icon--FontSize--sm);
14722
+ --pf-c-options-menu__menu-item-icon--PaddingLeft: var(--pf-global--spacer--lg);
14723
+ --pf-c-options-menu__group--group--PaddingTop: var(--pf-global--spacer--sm);
14724
+ --pf-c-options-menu__group-title--PaddingTop: var(--pf-global--spacer--sm);
14725
+ --pf-c-options-menu__group-title--PaddingRight: var(--pf-c-options-menu__menu-item--PaddingRight);
14726
+ --pf-c-options-menu__group-title--PaddingBottom: var(--pf-c-options-menu__menu-item--PaddingBottom);
14727
+ --pf-c-options-menu__group-title--PaddingLeft: var(--pf-c-options-menu__menu-item--PaddingLeft);
14728
+ --pf-c-options-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
14729
+ --pf-c-options-menu__group-title--FontWeight: var(--pf-global--FontWeight--normal);
14730
+ --pf-c-options-menu__group-title--Color: var(--pf-global--Color--dark-200);
14731
+ --pf-c-options-menu--c-divider--MarginTop: var(--pf-global--spacer--sm);
14732
+ --pf-c-options-menu--c-divider--MarginBottom: var(--pf-global--spacer--sm);
14742
14733
  position: relative;
14743
- z-index: var(--pf-c-notification-drawer__header--ZIndex);
14744
- display: flex;
14745
- flex-shrink: 0;
14746
- align-items: baseline;
14747
- padding: var(--pf-c-notification-drawer__header--PaddingTop) var(--pf-c-notification-drawer__header--PaddingRight) var(--pf-c-notification-drawer__header--PaddingBottom) var(--pf-c-notification-drawer__header--PaddingLeft);
14748
- background-color: var(--pf-c-notification-drawer__header--BackgroundColor);
14749
- box-shadow: var(--pf-c-notification-drawer__header--BoxShadow);
14750
- }
14751
-
14752
- .pf-c-notification-drawer__header-title {
14753
- font-size: var(--pf-c-notification-drawer__header-title--FontSize);
14734
+ display: inline-block;
14735
+ max-width: 100%;
14754
14736
  }
14755
14737
 
14756
- .pf-c-notification-drawer__header-status {
14757
- margin-left: var(--pf-c-notification-drawer__header-status--MarginLeft);
14738
+ .pf-c-options-menu .pf-c-divider {
14739
+ margin-top: var(--pf-c-options-menu--c-divider--MarginTop);
14740
+ margin-bottom: var(--pf-c-options-menu--c-divider--MarginBottom);
14758
14741
  }
14759
14742
 
14760
- .pf-c-notification-drawer__header-action {
14761
- display: flex;
14762
- align-items: center;
14763
- margin-left: auto;
14743
+ .pf-c-options-menu .pf-c-divider:last-child {
14744
+ --pf-c-options-menu--c-divider--MarginBottom: 0;
14764
14745
  }
14765
14746
 
14766
- .pf-c-notification-drawer__body {
14767
- overflow-y: auto;
14768
- box-shadow: var(--pf-c-notification-drawer__body--ZIndex);
14747
+ .pf-c-options-menu__toggle:not(.pf-m-plain)::before,
14748
+ .pf-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-c-options-menu__toggle-button::before {
14749
+ position: absolute;
14750
+ top: 0;
14751
+ right: 0;
14752
+ bottom: 0;
14753
+ left: 0;
14754
+ content: "";
14755
+ border: var(--pf-c-options-menu__toggle--BorderWidth) solid;
14756
+ border-color: var(--pf-c-options-menu__toggle--BorderTopColor) var(--pf-c-options-menu__toggle--BorderRightColor) var(--pf-c-options-menu__toggle--BorderBottomColor) var(--pf-c-options-menu__toggle--BorderLeftColor);
14769
14757
  }
14770
14758
 
14771
- .pf-c-notification-drawer__list-item {
14772
- position: relative;
14773
- display: grid;
14774
- grid-template-columns: 1fr auto;
14775
- padding: var(--pf-c-notification-drawer__list-item--PaddingTop) var(--pf-c-notification-drawer__list-item--PaddingRight) var(--pf-c-notification-drawer__list-item--PaddingBottom) var(--pf-c-notification-drawer__list-item--PaddingLeft);
14776
- background-color: var(--pf-c-notification-drawer__list-item--BackgroundColor);
14777
- border-bottom: var(--pf-c-notification-drawer__list-item--BorderBottomWidth) solid var(--pf-c-notification-drawer__list-item--BorderBottomColor);
14778
- outline-offset: var(--pf-c-notification-drawer__list-item--OutlineOffset);
14779
- box-shadow: var(--pf-c-notification-drawer__list-item--BoxShadow);
14759
+ .pf-c-options-menu__toggle:not(.pf-m-plain):hover::before,
14760
+ .pf-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-c-options-menu__toggle-button:hover::before {
14761
+ --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--hover--BorderBottomColor);
14780
14762
  }
14781
14763
 
14782
- .pf-c-notification-drawer__list-item.pf-m-read, .pf-c-notification-drawer__list-item:first-child {
14783
- --pf-c-notification-drawer__list-item--BoxShadow: none;
14764
+ .pf-c-options-menu__toggle:not(.pf-m-plain):active::before, .pf-c-options-menu__toggle:not(.pf-m-plain).pf-m-active::before,
14765
+ .pf-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-c-options-menu__toggle-button:active::before,
14766
+ .pf-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-c-options-menu__toggle-button.pf-m-active::before {
14767
+ --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--active--BorderBottomColor);
14768
+ border-bottom-width: var(--pf-c-options-menu__toggle--active--BorderBottomWidth);
14784
14769
  }
14785
14770
 
14786
- .pf-c-notification-drawer__list-item:not(.pf-m-read) + .pf-c-notification-drawer__list-item.pf-m-read {
14787
- --pf-c-notification-drawer__list-item--BoxShadow: var(--pf-c-notification-drawer__list-item--list-item--m-read--BoxShadow);
14788
- --pf-c-notification-drawer__list-item--before--Top: var(--pf-c-notification-drawer__list-item--list-item--m-read--before--Top);
14771
+ .pf-c-options-menu__toggle:not(.pf-m-plain):focus::before,
14772
+ .pf-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-c-options-menu__toggle-button:focus::before {
14773
+ --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--focus--BorderBottomColor);
14774
+ border-bottom-width: var(--pf-c-options-menu__toggle--focus--BorderBottomWidth);
14789
14775
  }
14790
14776
 
14791
- .pf-c-notification-drawer__list-item::before {
14792
- position: absolute;
14793
- top: var(--pf-c-notification-drawer__list-item--before--Top);
14794
- bottom: var(--pf-c-notification-drawer__list-item--before--Bottom);
14795
- width: var(--pf-c-notification-drawer__list-item--before--Width);
14796
- content: "";
14797
- background-color: var(--pf-c-notification-drawer__list-item--before--BackgroundColor);
14777
+ .pf-c-options-menu__toggle {
14778
+ position: relative;
14779
+ display: flex;
14780
+ align-items: center;
14781
+ justify-content: space-between;
14782
+ min-width: var(--pf-c-options-menu__toggle--MinWidth);
14783
+ max-width: 100%;
14784
+ padding: var(--pf-c-options-menu__toggle--PaddingTop) var(--pf-c-options-menu__toggle--PaddingRight) var(--pf-c-options-menu__toggle--PaddingBottom) var(--pf-c-options-menu__toggle--PaddingLeft);
14785
+ line-height: var(--pf-c-options-menu__toggle--LineHeight);
14786
+ color: var(--pf-c-options-menu__toggle--Color);
14787
+ background-color: var(--pf-c-options-menu__toggle--BackgroundColor);
14788
+ border: none;
14798
14789
  }
14799
14790
 
14800
- .pf-c-notification-drawer__list-item.pf-m-info {
14801
- --pf-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-info__list-item--before--BackgroundColor);
14802
- --pf-c-notification-drawer__list-item-header-icon--Color: var(--pf-c-notification-drawer__list-item--m-info__list-item-header-icon--Color);
14791
+ .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle::before {
14792
+ --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--expanded--BorderBottomColor);
14793
+ border-bottom-width: var(--pf-c-options-menu__toggle--expanded--BorderBottomWidth);
14803
14794
  }
14804
14795
 
14805
- .pf-c-notification-drawer__list-item.pf-m-warning {
14806
- --pf-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-warning__list-item--before--BackgroundColor);
14807
- --pf-c-notification-drawer__list-item-header-icon--Color: var(--pf-c-notification-drawer__list-item--m-warning__list-item-header-icon--Color);
14796
+ .pf-c-options-menu__toggle.pf-m-plain {
14797
+ --pf-c-options-menu__toggle-icon--Color: var(--pf-c-options-menu--m-plain__toggle-icon--Color);
14808
14798
  }
14809
14799
 
14810
- .pf-c-notification-drawer__list-item.pf-m-danger {
14811
- --pf-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-danger__list-item--before--BackgroundColor);
14812
- --pf-c-notification-drawer__list-item-header-icon--Color: var(--pf-c-notification-drawer__list-item--m-danger__list-item-header-icon--Color);
14800
+ .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) {
14801
+ --pf-c-options-menu__toggle--PaddingRight: var(--pf-c-options-menu__toggle--m-plain--PaddingRight);
14802
+ --pf-c-options-menu__toggle--PaddingLeft: var(--pf-c-options-menu__toggle--m-plain--PaddingLeft);
14803
+ display: inline-block;
14804
+ color: var(--pf-c-options-menu__toggle--m-plain--Color);
14813
14805
  }
14814
14806
 
14815
- .pf-c-notification-drawer__list-item.pf-m-success {
14816
- --pf-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-success__list-item--before--BackgroundColor);
14817
- --pf-c-notification-drawer__list-item-header-icon--Color: var(--pf-c-notification-drawer__list-item--m-success__list-item-header-icon--Color);
14807
+ .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) .pf-c-options-menu__toggle-button-icon {
14808
+ line-height: var(--pf-c-options-menu__toggle--LineHeight);
14818
14809
  }
14819
14810
 
14820
- .pf-c-notification-drawer__list-item.pf-m-default {
14821
- --pf-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-default__list-item--before--BackgroundColor);
14822
- --pf-c-notification-drawer__list-item-header-icon--Color: var(--pf-c-notification-drawer__list-item--m-default__list-item-header-icon--Color);
14811
+ .pf-c-options-menu__toggle.pf-m-plain:hover, .pf-c-options-menu__toggle.pf-m-plain:active, .pf-c-options-menu__toggle.pf-m-plain.pf-m-active, .pf-c-options-menu__toggle.pf-m-plain:focus, .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle.pf-m-plain {
14812
+ --pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--hover--Color);
14813
+ --pf-c-options-menu--m-plain__toggle-icon--Color: var(--pf-c-options-menu--m-plain--hover__toggle-icon--Color);
14823
14814
  }
14824
14815
 
14825
- .pf-c-notification-drawer__list-item.pf-m-read {
14826
- --pf-c-notification-drawer__list-item--BorderBottomColor: var(--pf-c-notification-drawer__list-item--m-read--BorderBottomColor);
14827
- --pf-c-notification-drawer__list-item--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-read--BackgroundColor);
14828
- --pf-c-notification-drawer__list-item--before--Top: var(--pf-c-notification-drawer__list-item--m-read--before--Top);
14829
- --pf-c-notification-drawer__list-item--before--Bottom: var(--pf-c-notification-drawer__list-item--m-read--before--Bottom);
14830
- --pf-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-read--before--BackgroundColor);
14831
- --pf-c-notification-drawer__list-item-header-title--FontWeight: var(--pf-c-notification-drawer__list-item--m-read__list-item-header-title--FontWeight);
14832
- position: relative;
14816
+ .pf-c-options-menu__toggle.pf-m-plain.pf-m-disabled, .pf-c-options-menu__toggle.pf-m-plain:disabled {
14817
+ --pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--disabled--Color);
14833
14818
  }
14834
14819
 
14835
- .pf-c-notification-drawer__list-item.pf-m-hoverable {
14836
- cursor: pointer;
14820
+ .pf-c-options-menu__toggle.pf-m-disabled, .pf-c-options-menu__toggle:disabled {
14821
+ pointer-events: none;
14837
14822
  }
14838
14823
 
14839
- .pf-c-notification-drawer__list-item.pf-m-hoverable:hover {
14840
- z-index: var(--pf-c-notification-drawer__list-item--m-hoverable--hover--ZIndex);
14841
- box-shadow: var(--pf-c-notification-drawer__list-item--m-hoverable--hover--BoxShadow);
14824
+ .pf-c-options-menu__toggle.pf-m-disabled:not(.pf-m-plain), .pf-c-options-menu__toggle.pf-m-disabled.pf-m-text, .pf-c-options-menu__toggle:disabled:not(.pf-m-plain), .pf-c-options-menu__toggle:disabled.pf-m-text {
14825
+ --pf-c-options-menu__toggle--BackgroundColor: var(--pf-c-options-menu__toggle--disabled--BackgroundColor);
14842
14826
  }
14843
14827
 
14844
- .pf-c-notification-drawer__list-item-header {
14845
- display: flex;
14846
- align-items: baseline;
14847
- grid-column: 1/2;
14848
- grid-row: 1/2;
14849
- margin-bottom: var(--pf-c-notification-drawer__list-item-header--MarginBottom);
14828
+ .pf-c-options-menu__toggle.pf-m-disabled::before, .pf-c-options-menu__toggle:disabled::before {
14829
+ border: 0;
14850
14830
  }
14851
14831
 
14852
- .pf-c-notification-drawer__list-item-header-icon {
14853
- margin-right: var(--pf-c-notification-drawer__list-item-header-icon--MarginRight);
14854
- color: var(--pf-c-notification-drawer__list-item-header-icon--Color);
14832
+ .pf-c-options-menu__toggle-button-icon {
14833
+ position: relative;
14855
14834
  }
14856
14835
 
14857
- .pf-c-notification-drawer__list-item-header-title {
14858
- font-weight: var(--pf-c-notification-drawer__list-item-header-title--FontWeight);
14859
- word-break: break-word;
14836
+ .pf-c-options-menu__toggle-button {
14837
+ padding: var(--pf-c-options-menu__toggle-button--PaddingTop) var(--pf-c-options-menu__toggle-button--PaddingRight) var(--pf-c-options-menu__toggle-button--PaddingBottom) var(--pf-c-options-menu__toggle-button--PaddingLeft);
14838
+ background-color: var(--pf-c-options-menu__toggle-button--BackgroundColor);
14839
+ border: 0;
14860
14840
  }
14861
14841
 
14862
- .pf-c-notification-drawer__list-item-header-title.pf-m-truncate {
14863
- display: -webkit-box;
14864
- -webkit-box-orient: vertical;
14865
- -webkit-line-clamp: var(--pf-c-notification-drawer__list-item-header-title--max-lines);
14842
+ .pf-c-options-menu__toggle-text {
14866
14843
  overflow: hidden;
14844
+ text-overflow: ellipsis;
14845
+ white-space: nowrap;
14867
14846
  }
14868
14847
 
14869
- .pf-c-notification-drawer__list-item-action {
14870
- grid-column: 2/3;
14871
- grid-row: 1/3;
14872
- }
14873
-
14874
- .pf-c-notification-drawer__list-item-description {
14875
- grid-row: 2/3;
14876
- grid-column: 1/2;
14877
- margin-bottom: var(--pf-c-notification-drawer__list-item-description--MarginBottom);
14878
- word-break: break-word;
14848
+ .pf-c-options-menu__toggle-icon,
14849
+ .pf-c-options-menu__toggle-button-icon {
14850
+ color: var(--pf-c-options-menu__toggle-icon--Color, inherit);
14879
14851
  }
14880
14852
 
14881
- .pf-c-notification-drawer__list-item-timestamp {
14882
- grid-row: 3/4;
14883
- grid-column: 1/2;
14884
- font-size: var(--pf-c-notification-drawer__list-item-timestamp--FontSize);
14885
- color: var(--pf-c-notification-drawer__list-item-timestamp--Color);
14853
+ .pf-c-options-menu__toggle-icon {
14854
+ margin-right: var(--pf-c-options-menu__toggle-icon--MarginRight);
14855
+ margin-left: var(--pf-c-options-menu__toggle-icon--MarginLeft);
14886
14856
  }
14887
14857
 
14888
- .pf-c-notification-drawer__group-list {
14889
- display: flex;
14890
- flex-direction: column;
14858
+ .pf-c-options-menu.pf-m-top.pf-m-expanded .pf-c-options-menu__toggle-icon {
14859
+ transform: rotate(var(--pf-c-options-menu--m-top--m-expanded__toggle-icon--Rotate));
14891
14860
  }
14892
14861
 
14893
- .pf-c-notification-drawer__group.pf-m-expanded {
14894
- min-height: var(--pf-c-notification-drawer__group--m-expanded--MinHeight);
14862
+ .pf-c-options-menu__menu {
14863
+ position: absolute;
14864
+ top: var(--pf-c-options-menu__menu--Top);
14865
+ z-index: var(--pf-c-options-menu__menu--ZIndex);
14866
+ min-width: 100%;
14867
+ padding-top: var(--pf-c-options-menu__menu--PaddingTop);
14868
+ padding-bottom: var(--pf-c-options-menu__menu--PaddingBottom);
14869
+ background-color: var(--pf-c-options-menu__menu--BackgroundColor);
14870
+ background-clip: padding-box;
14871
+ box-shadow: var(--pf-c-options-menu__menu--BoxShadow);
14895
14872
  }
14896
14873
 
14897
- .pf-c-notification-drawer__group.pf-m-expanded + .pf-c-notification-drawer__group {
14898
- border-top: var(--pf-c-notification-drawer__group--m-expanded--group--BorderTopWidth) solid var(--pf-c-notification-drawer__group--m-expanded--group--BorderTopColor);
14874
+ .pf-c-options-menu__menu.pf-m-align-right {
14875
+ right: 0;
14899
14876
  }
14900
14877
 
14901
- .pf-c-notification-drawer__group .pf-c-notification-drawer__list-item:last-child {
14902
- --pf-c-notification-drawer__list-item--BorderBottomWidth: 0;
14903
- --pf-c-notification-drawer__list-item--before--Bottom: 0;
14878
+ .pf-c-options-menu.pf-m-top .pf-c-options-menu__menu {
14879
+ --pf-c-options-menu__menu--Top: var(--pf-c-options-menu--m-top__menu--Top);
14880
+ transform: translateY(var(--pf-c-options-menu--m-top__menu--TranslateY));
14904
14881
  }
14905
14882
 
14906
- .pf-c-notification-drawer__group-toggle {
14883
+ .pf-c-options-menu__menu-item {
14907
14884
  display: flex;
14908
14885
  align-items: baseline;
14909
14886
  width: 100%;
14910
- padding: var(--pf-c-notification-drawer__group-toggle--PaddingTop) var(--pf-c-notification-drawer__group-toggle--PaddingRight) var(--pf-c-notification-drawer__group-toggle--PaddingBottom) var(--pf-c-notification-drawer__group-toggle--PaddingLeft);
14911
- background-color: var(--pf-c-notification-drawer__group-toggle--BackgroundColor);
14912
- border: solid var(--pf-c-notification-drawer__group-toggle--BorderColor);
14913
- border-width: 0 0 var(--pf-c-notification-drawer__group-toggle--BorderBottomWidth) 0;
14914
- outline-offset: var(--pf-c-notification-drawer__group-toggle--OutlineOffset);
14887
+ padding: var(--pf-c-options-menu__menu-item--PaddingTop) var(--pf-c-options-menu__menu-item--PaddingRight) var(--pf-c-options-menu__menu-item--PaddingBottom) var(--pf-c-options-menu__menu-item--PaddingLeft);
14888
+ font-size: var(--pf-c-options-menu__menu-item--FontSize);
14889
+ color: var(--pf-c-options-menu__menu-item--Color);
14890
+ white-space: nowrap;
14891
+ background-color: var(--pf-c-options-menu__menu-item--BackgroundColor);
14892
+ border: none;
14915
14893
  }
14916
14894
 
14917
- .pf-c-notification-drawer__group-toggle-title {
14918
- display: -webkit-box;
14919
- -webkit-box-orient: vertical;
14920
- -webkit-line-clamp: var(--pf-c-notification-drawer__group-toggle-title--max-lines);
14921
- overflow: hidden;
14922
- flex: 1;
14923
- margin-right: var(--pf-c-notification-drawer__group-toggle-title--MarginRight);
14924
- text-align: left;
14925
- word-break: break-word;
14895
+ .pf-c-options-menu__menu-item:hover, .pf-c-options-menu__menu-item:focus {
14896
+ text-decoration: none;
14897
+ background-color: var(--pf-c-options-menu__menu-item--hover--BackgroundColor);
14926
14898
  }
14927
14899
 
14928
- .pf-c-notification-drawer__group-toggle-count {
14929
- margin-right: var(--pf-c-notification-drawer__group-toggle-count--MarginRight);
14900
+ .pf-c-options-menu__menu-item:disabled, .pf-c-options-menu__menu-item.pf-m-disabled {
14901
+ color: var(--pf-c-options-menu__menu-item--disabled--Color);
14902
+ pointer-events: none;
14903
+ background-color: var(--pf-c-options-menu__menu-item--disabled--BackgroundColor);
14904
+ }
14905
+
14906
+ .pf-c-options-menu__menu-item-icon {
14907
+ align-self: center;
14908
+ width: auto;
14909
+ padding-left: var(--pf-c-options-menu__menu-item-icon--PaddingLeft);
14930
14910
  margin-left: auto;
14911
+ font-size: var(--pf-c-options-menu__menu-item-icon--FontSize);
14912
+ color: var(--pf-c-options-menu__menu-item-icon--Color);
14931
14913
  }
14932
14914
 
14933
- .pf-c-notification-drawer__group-toggle-icon {
14934
- margin-right: var(--pf-c-notification-drawer__group-toggle-icon--MarginRight);
14935
- color: var(--pf-c-notification-drawer__group-toggle-icon--Color);
14936
- transition: var(--pf-c-notification-drawer__group-toggle-icon--Transition);
14915
+ .pf-c-options-menu__group + .pf-c-options-menu__group {
14916
+ padding-top: var(--pf-c-options-menu__group--group--PaddingTop);
14937
14917
  }
14938
14918
 
14939
- .pf-c-notification-drawer__group.pf-m-expanded .pf-c-notification-drawer__group-toggle-icon {
14940
- transform: rotate(var(--pf-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate));
14919
+ .pf-c-options-menu__group-title {
14920
+ padding-top: var(--pf-c-options-menu__group-title--PaddingTop);
14921
+ padding-right: var(--pf-c-options-menu__group-title--PaddingRight);
14922
+ padding-bottom: var(--pf-c-options-menu__group-title--PaddingBottom);
14923
+ padding-left: var(--pf-c-options-menu__group-title--PaddingLeft);
14924
+ font-size: var(--pf-c-options-menu__group-title--FontSize);
14925
+ font-weight: var(--pf-c-options-menu__group-title--FontWeight);
14926
+ color: var(--pf-c-options-menu__group-title--Color);
14941
14927
  }
14942
14928
 
14943
- :where(.pf-theme-dark) .pf-c-notification-drawer {
14944
- --pf-c-notification-drawer--BackgroundColor: var(--pf-global--BackgroundColor--300);
14945
- --pf-c-notification-drawer__header--BackgroundColor: var(--pf-global--BackgroundColor--300);
14946
- --pf-c-notification-drawer__list-item--BackgroundColor: var(--pf-global--BackgroundColor--300);
14947
- --pf-c-notification-drawer__list-item--BoxShadow: none;
14948
- --pf-c-notification-drawer__list-item--BorderBottomColor: var(--pf-global--BorderColor--100);
14949
- --pf-c-notification-drawer__list-item--m-read--BackgroundColor: var(--pf-global--BackgroundColor--100);
14950
- --pf-c-notification-drawer__list-item--list-item--m-read--BoxShadow: none;
14951
- --pf-c-notification-drawer__group-toggle--BackgroundColor: var(--pf-global--BackgroundColor--300);
14929
+ :where(.pf-theme-dark) .pf-c-options-menu {
14930
+ --pf-c-options-menu__toggle--BackgroundColor: var(--pf-global--BackgroundColor--400);
14931
+ --pf-c-options-menu__toggle--BorderTopColor: transparent;
14932
+ --pf-c-options-menu__toggle--BorderRightColor: transparent;
14933
+ --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-global--BorderColor--400);
14934
+ --pf-c-options-menu__toggle--BorderLeftColor: transparent;
14935
+ --pf-c-options-menu__toggle--disabled--BackgroundColor: var(--pf-global--palette--black-500);
14936
+ --pf-c-options-menu__menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
14937
+ --pf-c-options-menu__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
14938
+ --pf-c-options-menu__menu--Top: 100%;
14952
14939
  }
14953
14940
 
14954
- .pf-c-options-menu {
14955
- --pf-c-options-menu__toggle--BackgroundColor: transparent;
14956
- --pf-c-options-menu__toggle--PaddingTop: var(--pf-global--spacer--form-element);
14957
- --pf-c-options-menu__toggle--PaddingRight: var(--pf-global--spacer--sm);
14958
- --pf-c-options-menu__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
14959
- --pf-c-options-menu__toggle--PaddingLeft: var(--pf-global--spacer--sm);
14960
- --pf-c-options-menu__toggle--MinWidth: 0;
14961
- --pf-c-options-menu__toggle--LineHeight: var(--pf-global--LineHeight--md);
14962
- --pf-c-options-menu__toggle--BorderWidth: var(--pf-global--BorderWidth--sm);
14963
- --pf-c-options-menu__toggle--BorderTopColor: var(--pf-global--BorderColor--300);
14964
- --pf-c-options-menu__toggle--BorderRightColor: var(--pf-global--BorderColor--300);
14965
- --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-global--BorderColor--200);
14966
- --pf-c-options-menu__toggle--BorderLeftColor: var(--pf-global--BorderColor--300);
14967
- --pf-c-options-menu__toggle--Color: var(--pf-global--Color--100);
14968
- --pf-c-options-menu__toggle--hover--BorderBottomColor: var(--pf-global--active-color--100);
14969
- --pf-c-options-menu__toggle--active--BorderBottomWidth: var(--pf-global--BorderWidth--md);
14970
- --pf-c-options-menu__toggle--active--BorderBottomColor: var(--pf-global--active-color--100);
14971
- --pf-c-options-menu__toggle--focus--BorderBottomWidth: var(--pf-global--BorderWidth--md);
14972
- --pf-c-options-menu__toggle--focus--BorderBottomColor: var(--pf-global--active-color--100);
14973
- --pf-c-options-menu__toggle--expanded--BorderBottomWidth: var(--pf-global--BorderWidth--md);
14974
- --pf-c-options-menu__toggle--expanded--BorderBottomColor: var(--pf-global--active-color--100);
14975
- --pf-c-options-menu__toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
14976
- --pf-c-options-menu__toggle--m-plain--Color: var(--pf-global--Color--200);
14977
- --pf-c-options-menu__toggle--m-plain--hover--Color: var(--pf-global--Color--100);
14978
- --pf-c-options-menu__toggle--m-plain--disabled--Color: var(--pf-global--disabled-color--200);
14979
- --pf-c-options-menu__toggle--m-plain--PaddingRight: var(--pf-global--spacer--md);
14980
- --pf-c-options-menu__toggle--m-plain--PaddingLeft: var(--pf-global--spacer--md);
14981
- --pf-c-options-menu__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
14982
- --pf-c-options-menu__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
14983
- --pf-c-options-menu--m-top--m-expanded__toggle-icon--Rotate: 180deg;
14984
- --pf-c-options-menu--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
14985
- --pf-c-options-menu--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);
14986
- --pf-c-options-menu__toggle-button--BackgroundColor: transparent;
14987
- --pf-c-options-menu__toggle-button--PaddingTop: var(--pf-global--spacer--form-element);
14988
- --pf-c-options-menu__toggle-button--PaddingRight: var(--pf-global--spacer--sm);
14989
- --pf-c-options-menu__toggle-button--PaddingBottom: var(--pf-global--spacer--form-element);
14990
- --pf-c-options-menu__toggle-button--PaddingLeft: var(--pf-global--spacer--sm);
14991
- --pf-c-options-menu__menu--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
14992
- --pf-c-options-menu__menu--BoxShadow: var(--pf-global--BoxShadow--md);
14993
- --pf-c-options-menu__menu--PaddingTop: var(--pf-global--spacer--sm);
14994
- --pf-c-options-menu__menu--PaddingBottom: var(--pf-global--spacer--sm);
14995
- --pf-c-options-menu__menu--Top: calc(100% + var(--pf-global--spacer--xs));
14996
- --pf-c-options-menu__menu--ZIndex: var(--pf-global--ZIndex--sm);
14997
- --pf-c-options-menu--m-top__menu--Top: 0;
14998
- --pf-c-options-menu--m-top__menu--TranslateY: calc(-100% - var(--pf-global--spacer--xs));
14999
- --pf-c-options-menu__menu-item--BackgroundColor: transparent;
15000
- --pf-c-options-menu__menu-item--Color: var(--pf-global--Color--100);
15001
- --pf-c-options-menu__menu-item--FontSize: var(--pf-global--FontSize--md);
15002
- --pf-c-options-menu__menu-item--PaddingTop: var(--pf-global--spacer--sm);
15003
- --pf-c-options-menu__menu-item--PaddingRight: var(--pf-global--spacer--md);
15004
- --pf-c-options-menu__menu-item--PaddingBottom: var(--pf-global--spacer--sm);
15005
- --pf-c-options-menu__menu-item--PaddingLeft: var(--pf-global--spacer--md);
15006
- --pf-c-options-menu__menu-item--disabled--Color: var(--pf-global--Color--dark-200);
15007
- --pf-c-options-menu__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
15008
- --pf-c-options-menu__menu-item--disabled--BackgroundColor: transparent;
15009
- --pf-c-options-menu__menu-item-icon--Color: var(--pf-global--active-color--100);
15010
- --pf-c-options-menu__menu-item-icon--FontSize: var(--pf-global--icon--FontSize--sm);
15011
- --pf-c-options-menu__menu-item-icon--PaddingLeft: var(--pf-global--spacer--lg);
15012
- --pf-c-options-menu__group--group--PaddingTop: var(--pf-global--spacer--sm);
15013
- --pf-c-options-menu__group-title--PaddingTop: var(--pf-global--spacer--sm);
15014
- --pf-c-options-menu__group-title--PaddingRight: var(--pf-c-options-menu__menu-item--PaddingRight);
15015
- --pf-c-options-menu__group-title--PaddingBottom: var(--pf-c-options-menu__menu-item--PaddingBottom);
15016
- --pf-c-options-menu__group-title--PaddingLeft: var(--pf-c-options-menu__menu-item--PaddingLeft);
15017
- --pf-c-options-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
15018
- --pf-c-options-menu__group-title--FontWeight: var(--pf-global--FontWeight--normal);
15019
- --pf-c-options-menu__group-title--Color: var(--pf-global--Color--dark-200);
15020
- --pf-c-options-menu--c-divider--MarginTop: var(--pf-global--spacer--sm);
15021
- --pf-c-options-menu--c-divider--MarginBottom: var(--pf-global--spacer--sm);
15022
- position: relative;
15023
- display: inline-block;
15024
- max-width: 100%;
14941
+ :where(.pf-theme-dark) .pf-c-options-menu__toggle.pf-m-plain {
14942
+ background: transparent;
15025
14943
  }
15026
14944
 
15027
- .pf-c-options-menu .pf-c-divider {
15028
- margin-top: var(--pf-c-options-menu--c-divider--MarginTop);
15029
- margin-bottom: var(--pf-c-options-menu--c-divider--MarginBottom);
14945
+ .pf-c-notification-drawer {
14946
+ --pf-c-notification-drawer--BackgroundColor: var(--pf-global--BackgroundColor--200);
14947
+ --pf-c-notification-drawer__header--PaddingTop: var(--pf-global--spacer--md);
14948
+ --pf-c-notification-drawer__header--PaddingRight: var(--pf-global--spacer--md);
14949
+ --pf-c-notification-drawer__header--PaddingBottom: var(--pf-global--spacer--md);
14950
+ --pf-c-notification-drawer__header--PaddingLeft: var(--pf-global--spacer--md);
14951
+ --pf-c-notification-drawer__header--BackgroundColor: var(--pf-global--BackgroundColor--100);
14952
+ --pf-c-notification-drawer__header--BoxShadow: var(--pf-global--BoxShadow--sm-bottom);
14953
+ --pf-c-notification-drawer__header--ZIndex: var(--pf-global--ZIndex--sm);
14954
+ --pf-c-notification-drawer__header-title--FontSize: var(--pf-global--FontSize--xl);
14955
+ --pf-c-notification-drawer__header-status--MarginLeft: var(--pf-global--spacer--md);
14956
+ --pf-c-notification-drawer__body--ZIndex: var(--pf-global--ZIndex--xs);
14957
+ --pf-c-notification-drawer__list-item--PaddingTop: var(--pf-global--spacer--md);
14958
+ --pf-c-notification-drawer__list-item--PaddingRight: var(--pf-global--spacer--md);
14959
+ --pf-c-notification-drawer__list-item--PaddingBottom: var(--pf-global--spacer--md);
14960
+ --pf-c-notification-drawer__list-item--PaddingLeft: var(--pf-global--spacer--md);
14961
+ --pf-c-notification-drawer__list-item--BackgroundColor: var(--pf-global--BackgroundColor--100);
14962
+ --pf-c-notification-drawer__list-item--BoxShadow: inset var(--pf-global--BoxShadow--sm-bottom);
14963
+ --pf-c-notification-drawer__list-item--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
14964
+ --pf-c-notification-drawer__list-item--BorderBottomColor: transparent;
14965
+ --pf-c-notification-drawer__list-item--OutlineOffset: -0.25rem;
14966
+ --pf-c-notification-drawer__list-item--before--Width: var(--pf-global--BorderWidth--lg);
14967
+ --pf-c-notification-drawer__list-item--before--Top: 0;
14968
+ --pf-c-notification-drawer__list-item--before--Bottom: calc(var(--pf-c-notification-drawer__list-item--BorderBottomWidth) * -1);
14969
+ --pf-c-notification-drawer__list-item--m-info__list-item-header-icon--Color: var(--pf-global--info-color--100);
14970
+ --pf-c-notification-drawer__list-item--m-info__list-item--before--BackgroundColor: var(--pf-global--info-color--100);
14971
+ --pf-c-notification-drawer__list-item--m-warning__list-item-header-icon--Color: var(--pf-global--warning-color--100);
14972
+ --pf-c-notification-drawer__list-item--m-warning__list-item--before--BackgroundColor: var(--pf-global--warning-color--100);
14973
+ --pf-c-notification-drawer__list-item--m-danger__list-item-header-icon--Color: var(--pf-global--danger-color--100);
14974
+ --pf-c-notification-drawer__list-item--m-danger__list-item--before--BackgroundColor: var(--pf-global--danger-color--100);
14975
+ --pf-c-notification-drawer__list-item--m-success__list-item-header-icon--Color: var(--pf-global--success-color--100);
14976
+ --pf-c-notification-drawer__list-item--m-success__list-item--before--BackgroundColor: var(--pf-global--success-color--100);
14977
+ --pf-c-notification-drawer__list-item--m-default__list-item-header-icon--Color: var(--pf-global--default-color--200);
14978
+ --pf-c-notification-drawer__list-item--m-default__list-item--before--BackgroundColor: var(--pf-global--default-color--200);
14979
+ --pf-c-notification-drawer__list-item--m-read--BackgroundColor: var(--pf-global--BackgroundColor--200);
14980
+ --pf-c-notification-drawer__list-item--m-read--BorderBottomColor: var(--pf-global--BorderColor--100);
14981
+ --pf-c-notification-drawer__list-item--m-read--before--Top: calc(var(--pf-c-notification-drawer__list-item--BorderBottomWidth) * -1);
14982
+ --pf-c-notification-drawer__list-item--m-read--before--Bottom: 0;
14983
+ --pf-c-notification-drawer__list-item--m-read--before--BackgroundColor: transparent;
14984
+ --pf-c-notification-drawer__list-item--list-item--m-read--before--Top: 0;
14985
+ --pf-c-notification-drawer__list-item--list-item--m-read--BoxShadow: inset var(--pf-global--BoxShadow--sm-bottom);
14986
+ --pf-c-notification-drawer__list-item--m-hoverable--hover--ZIndex: var(--pf-global--ZIndex--xs);
14987
+ --pf-c-notification-drawer__list-item--m-hoverable--hover--BoxShadow: var(--pf-global--BoxShadow--md-top), var(--pf-global--BoxShadow--md-bottom);
14988
+ --pf-c-notification-drawer__list-item-header--MarginBottom: var(--pf-global--spacer--xs);
14989
+ --pf-c-notification-drawer__list-item-header-icon--Color: inherit;
14990
+ --pf-c-notification-drawer__list-item-header-icon--MarginRight: var(--pf-global--spacer--sm);
14991
+ --pf-c-notification-drawer__list-item-header-title--FontWeight: var(--pf-global--FontWeight--bold);
14992
+ --pf-c-notification-drawer__list-item-header-title--max-lines: 1;
14993
+ --pf-c-notification-drawer__list-item--m-read__list-item-header-title--FontWeight: var(--pf-global--FontWeight--normal);
14994
+ --pf-c-notification-drawer__list-item-description--MarginBottom: var(--pf-global--spacer--sm);
14995
+ --pf-c-notification-drawer__list-item-timestamp--Color: var(--pf-global--Color--200);
14996
+ --pf-c-notification-drawer__list-item-timestamp--FontSize: var(--pf-global--FontSize--sm);
14997
+ --pf-c-notification-drawer__group--m-expanded--group--BorderTopWidth: var(--pf-global--BorderWidth--sm);
14998
+ --pf-c-notification-drawer__group--m-expanded--group--BorderTopColor: var(--pf-global--BorderColor--100);
14999
+ --pf-c-notification-drawer__group--m-expanded--MinHeight: 0;
15000
+ --pf-c-notification-drawer__group-toggle--PaddingTop: var(--pf-global--spacer--md);
15001
+ --pf-c-notification-drawer__group-toggle--PaddingRight: var(--pf-global--spacer--md);
15002
+ --pf-c-notification-drawer__group-toggle--PaddingBottom: var(--pf-global--spacer--md);
15003
+ --pf-c-notification-drawer__group-toggle--PaddingLeft: var(--pf-global--spacer--md);
15004
+ --pf-c-notification-drawer__group-toggle--BackgroundColor: var(--pf-global--BackgroundColor--100);
15005
+ --pf-c-notification-drawer__group-toggle--BorderColor: var(--pf-global--BorderColor--100);
15006
+ --pf-c-notification-drawer__group-toggle--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
15007
+ --pf-c-notification-drawer__group-toggle--OutlineOffset: -0.25rem;
15008
+ --pf-c-notification-drawer__group-toggle-title--MarginRight: var(--pf-global--spacer--md);
15009
+ --pf-c-notification-drawer__group-toggle-title--max-lines: 1;
15010
+ --pf-c-notification-drawer__group-toggle-count--MarginRight: var(--pf-global--spacer--md);
15011
+ --pf-c-notification-drawer__group-toggle-icon--MarginRight: var(--pf-global--spacer--md);
15012
+ --pf-c-notification-drawer__group-toggle-icon--Color: var(--pf-global--Color--200);
15013
+ --pf-c-notification-drawer__group-toggle-icon--Transition: .2s ease-in 0s;
15014
+ --pf-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate: 90deg;
15015
+ display: flex;
15016
+ flex-direction: column;
15017
+ height: 100%;
15018
+ background-color: var(--pf-c-notification-drawer--BackgroundColor);
15030
15019
  }
15031
15020
 
15032
- .pf-c-options-menu .pf-c-divider:last-child {
15033
- --pf-c-options-menu--c-divider--MarginBottom: 0;
15021
+ .pf-c-notification-drawer__header {
15022
+ position: relative;
15023
+ z-index: var(--pf-c-notification-drawer__header--ZIndex);
15024
+ display: flex;
15025
+ flex-shrink: 0;
15026
+ align-items: baseline;
15027
+ padding: var(--pf-c-notification-drawer__header--PaddingTop) var(--pf-c-notification-drawer__header--PaddingRight) var(--pf-c-notification-drawer__header--PaddingBottom) var(--pf-c-notification-drawer__header--PaddingLeft);
15028
+ background-color: var(--pf-c-notification-drawer__header--BackgroundColor);
15029
+ box-shadow: var(--pf-c-notification-drawer__header--BoxShadow);
15034
15030
  }
15035
15031
 
15036
- .pf-c-options-menu__toggle:not(.pf-m-plain)::before,
15037
- .pf-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-c-options-menu__toggle-button::before {
15038
- position: absolute;
15039
- top: 0;
15040
- right: 0;
15041
- bottom: 0;
15042
- left: 0;
15043
- content: "";
15044
- border: var(--pf-c-options-menu__toggle--BorderWidth) solid;
15045
- border-color: var(--pf-c-options-menu__toggle--BorderTopColor) var(--pf-c-options-menu__toggle--BorderRightColor) var(--pf-c-options-menu__toggle--BorderBottomColor) var(--pf-c-options-menu__toggle--BorderLeftColor);
15032
+ .pf-c-notification-drawer__header-title {
15033
+ font-size: var(--pf-c-notification-drawer__header-title--FontSize);
15046
15034
  }
15047
15035
 
15048
- .pf-c-options-menu__toggle:not(.pf-m-plain):hover::before,
15049
- .pf-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-c-options-menu__toggle-button:hover::before {
15050
- --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--hover--BorderBottomColor);
15036
+ .pf-c-notification-drawer__header-status {
15037
+ margin-left: var(--pf-c-notification-drawer__header-status--MarginLeft);
15051
15038
  }
15052
15039
 
15053
- .pf-c-options-menu__toggle:not(.pf-m-plain):active::before, .pf-c-options-menu__toggle:not(.pf-m-plain).pf-m-active::before,
15054
- .pf-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-c-options-menu__toggle-button:active::before,
15055
- .pf-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-c-options-menu__toggle-button.pf-m-active::before {
15056
- --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--active--BorderBottomColor);
15057
- border-bottom-width: var(--pf-c-options-menu__toggle--active--BorderBottomWidth);
15040
+ .pf-c-notification-drawer__header-action {
15041
+ display: flex;
15042
+ align-items: center;
15043
+ margin-left: auto;
15058
15044
  }
15059
15045
 
15060
- .pf-c-options-menu__toggle:not(.pf-m-plain):focus::before,
15061
- .pf-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-c-options-menu__toggle-button:focus::before {
15062
- --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--focus--BorderBottomColor);
15063
- border-bottom-width: var(--pf-c-options-menu__toggle--focus--BorderBottomWidth);
15046
+ .pf-c-notification-drawer__body {
15047
+ overflow-y: auto;
15048
+ box-shadow: var(--pf-c-notification-drawer__body--ZIndex);
15064
15049
  }
15065
15050
 
15066
- .pf-c-options-menu__toggle {
15051
+ .pf-c-notification-drawer__list-item {
15067
15052
  position: relative;
15068
- display: flex;
15069
- align-items: center;
15070
- justify-content: space-between;
15071
- min-width: var(--pf-c-options-menu__toggle--MinWidth);
15072
- max-width: 100%;
15073
- padding: var(--pf-c-options-menu__toggle--PaddingTop) var(--pf-c-options-menu__toggle--PaddingRight) var(--pf-c-options-menu__toggle--PaddingBottom) var(--pf-c-options-menu__toggle--PaddingLeft);
15074
- line-height: var(--pf-c-options-menu__toggle--LineHeight);
15075
- color: var(--pf-c-options-menu__toggle--Color);
15076
- background-color: var(--pf-c-options-menu__toggle--BackgroundColor);
15077
- border: none;
15053
+ display: grid;
15054
+ grid-template-columns: 1fr auto;
15055
+ padding: var(--pf-c-notification-drawer__list-item--PaddingTop) var(--pf-c-notification-drawer__list-item--PaddingRight) var(--pf-c-notification-drawer__list-item--PaddingBottom) var(--pf-c-notification-drawer__list-item--PaddingLeft);
15056
+ background-color: var(--pf-c-notification-drawer__list-item--BackgroundColor);
15057
+ border-bottom: var(--pf-c-notification-drawer__list-item--BorderBottomWidth) solid var(--pf-c-notification-drawer__list-item--BorderBottomColor);
15058
+ outline-offset: var(--pf-c-notification-drawer__list-item--OutlineOffset);
15059
+ box-shadow: var(--pf-c-notification-drawer__list-item--BoxShadow);
15078
15060
  }
15079
15061
 
15080
- .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle::before {
15081
- --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--expanded--BorderBottomColor);
15082
- border-bottom-width: var(--pf-c-options-menu__toggle--expanded--BorderBottomWidth);
15062
+ .pf-c-notification-drawer__list-item.pf-m-read, .pf-c-notification-drawer__list-item:first-child {
15063
+ --pf-c-notification-drawer__list-item--BoxShadow: none;
15083
15064
  }
15084
15065
 
15085
- .pf-c-options-menu__toggle.pf-m-plain {
15086
- --pf-c-options-menu__toggle-icon--Color: var(--pf-c-options-menu--m-plain__toggle-icon--Color);
15066
+ .pf-c-notification-drawer__list-item:not(.pf-m-read) + .pf-c-notification-drawer__list-item.pf-m-read {
15067
+ --pf-c-notification-drawer__list-item--BoxShadow: var(--pf-c-notification-drawer__list-item--list-item--m-read--BoxShadow);
15068
+ --pf-c-notification-drawer__list-item--before--Top: var(--pf-c-notification-drawer__list-item--list-item--m-read--before--Top);
15087
15069
  }
15088
15070
 
15089
- .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) {
15090
- --pf-c-options-menu__toggle--PaddingRight: var(--pf-c-options-menu__toggle--m-plain--PaddingRight);
15091
- --pf-c-options-menu__toggle--PaddingLeft: var(--pf-c-options-menu__toggle--m-plain--PaddingLeft);
15092
- display: inline-block;
15093
- color: var(--pf-c-options-menu__toggle--m-plain--Color);
15071
+ .pf-c-notification-drawer__list-item::before {
15072
+ position: absolute;
15073
+ top: var(--pf-c-notification-drawer__list-item--before--Top);
15074
+ bottom: var(--pf-c-notification-drawer__list-item--before--Bottom);
15075
+ width: var(--pf-c-notification-drawer__list-item--before--Width);
15076
+ content: "";
15077
+ background-color: var(--pf-c-notification-drawer__list-item--before--BackgroundColor);
15094
15078
  }
15095
15079
 
15096
- .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) .pf-c-options-menu__toggle-button-icon {
15097
- line-height: var(--pf-c-options-menu__toggle--LineHeight);
15080
+ .pf-c-notification-drawer__list-item.pf-m-info {
15081
+ --pf-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-info__list-item--before--BackgroundColor);
15082
+ --pf-c-notification-drawer__list-item-header-icon--Color: var(--pf-c-notification-drawer__list-item--m-info__list-item-header-icon--Color);
15098
15083
  }
15099
15084
 
15100
- .pf-c-options-menu__toggle.pf-m-plain:hover, .pf-c-options-menu__toggle.pf-m-plain:active, .pf-c-options-menu__toggle.pf-m-plain.pf-m-active, .pf-c-options-menu__toggle.pf-m-plain:focus, .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle.pf-m-plain {
15101
- --pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--hover--Color);
15102
- --pf-c-options-menu--m-plain__toggle-icon--Color: var(--pf-c-options-menu--m-plain--hover__toggle-icon--Color);
15085
+ .pf-c-notification-drawer__list-item.pf-m-warning {
15086
+ --pf-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-warning__list-item--before--BackgroundColor);
15087
+ --pf-c-notification-drawer__list-item-header-icon--Color: var(--pf-c-notification-drawer__list-item--m-warning__list-item-header-icon--Color);
15103
15088
  }
15104
15089
 
15105
- .pf-c-options-menu__toggle.pf-m-plain.pf-m-disabled, .pf-c-options-menu__toggle.pf-m-plain:disabled {
15106
- --pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--disabled--Color);
15090
+ .pf-c-notification-drawer__list-item.pf-m-danger {
15091
+ --pf-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-danger__list-item--before--BackgroundColor);
15092
+ --pf-c-notification-drawer__list-item-header-icon--Color: var(--pf-c-notification-drawer__list-item--m-danger__list-item-header-icon--Color);
15107
15093
  }
15108
15094
 
15109
- .pf-c-options-menu__toggle.pf-m-disabled, .pf-c-options-menu__toggle:disabled {
15110
- pointer-events: none;
15095
+ .pf-c-notification-drawer__list-item.pf-m-success {
15096
+ --pf-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-success__list-item--before--BackgroundColor);
15097
+ --pf-c-notification-drawer__list-item-header-icon--Color: var(--pf-c-notification-drawer__list-item--m-success__list-item-header-icon--Color);
15111
15098
  }
15112
15099
 
15113
- .pf-c-options-menu__toggle.pf-m-disabled:not(.pf-m-plain), .pf-c-options-menu__toggle.pf-m-disabled.pf-m-text, .pf-c-options-menu__toggle:disabled:not(.pf-m-plain), .pf-c-options-menu__toggle:disabled.pf-m-text {
15114
- --pf-c-options-menu__toggle--BackgroundColor: var(--pf-c-options-menu__toggle--disabled--BackgroundColor);
15100
+ .pf-c-notification-drawer__list-item.pf-m-default {
15101
+ --pf-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-default__list-item--before--BackgroundColor);
15102
+ --pf-c-notification-drawer__list-item-header-icon--Color: var(--pf-c-notification-drawer__list-item--m-default__list-item-header-icon--Color);
15115
15103
  }
15116
15104
 
15117
- .pf-c-options-menu__toggle.pf-m-disabled::before, .pf-c-options-menu__toggle:disabled::before {
15118
- border: 0;
15105
+ .pf-c-notification-drawer__list-item.pf-m-read {
15106
+ --pf-c-notification-drawer__list-item--BorderBottomColor: var(--pf-c-notification-drawer__list-item--m-read--BorderBottomColor);
15107
+ --pf-c-notification-drawer__list-item--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-read--BackgroundColor);
15108
+ --pf-c-notification-drawer__list-item--before--Top: var(--pf-c-notification-drawer__list-item--m-read--before--Top);
15109
+ --pf-c-notification-drawer__list-item--before--Bottom: var(--pf-c-notification-drawer__list-item--m-read--before--Bottom);
15110
+ --pf-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-read--before--BackgroundColor);
15111
+ --pf-c-notification-drawer__list-item-header-title--FontWeight: var(--pf-c-notification-drawer__list-item--m-read__list-item-header-title--FontWeight);
15112
+ position: relative;
15119
15113
  }
15120
15114
 
15121
- .pf-c-options-menu__toggle-button-icon {
15122
- position: relative;
15115
+ .pf-c-notification-drawer__list-item.pf-m-hoverable {
15116
+ cursor: pointer;
15123
15117
  }
15124
15118
 
15125
- .pf-c-options-menu__toggle-button {
15126
- padding: var(--pf-c-options-menu__toggle-button--PaddingTop) var(--pf-c-options-menu__toggle-button--PaddingRight) var(--pf-c-options-menu__toggle-button--PaddingBottom) var(--pf-c-options-menu__toggle-button--PaddingLeft);
15127
- background-color: var(--pf-c-options-menu__toggle-button--BackgroundColor);
15128
- border: 0;
15119
+ .pf-c-notification-drawer__list-item.pf-m-hoverable:hover {
15120
+ z-index: var(--pf-c-notification-drawer__list-item--m-hoverable--hover--ZIndex);
15121
+ box-shadow: var(--pf-c-notification-drawer__list-item--m-hoverable--hover--BoxShadow);
15129
15122
  }
15130
15123
 
15131
- .pf-c-options-menu__toggle-text {
15124
+ .pf-c-notification-drawer__list-item-header {
15125
+ display: flex;
15126
+ align-items: baseline;
15127
+ grid-column: 1/2;
15128
+ grid-row: 1/2;
15129
+ margin-bottom: var(--pf-c-notification-drawer__list-item-header--MarginBottom);
15130
+ }
15131
+
15132
+ .pf-c-notification-drawer__list-item-header-icon {
15133
+ margin-right: var(--pf-c-notification-drawer__list-item-header-icon--MarginRight);
15134
+ color: var(--pf-c-notification-drawer__list-item-header-icon--Color);
15135
+ }
15136
+
15137
+ .pf-c-notification-drawer__list-item-header-title {
15138
+ font-weight: var(--pf-c-notification-drawer__list-item-header-title--FontWeight);
15139
+ word-break: break-word;
15140
+ }
15141
+
15142
+ .pf-c-notification-drawer__list-item-header-title.pf-m-truncate {
15143
+ display: -webkit-box;
15144
+ -webkit-box-orient: vertical;
15145
+ -webkit-line-clamp: var(--pf-c-notification-drawer__list-item-header-title--max-lines);
15132
15146
  overflow: hidden;
15133
- text-overflow: ellipsis;
15134
- white-space: nowrap;
15135
15147
  }
15136
15148
 
15137
- .pf-c-options-menu__toggle-icon,
15138
- .pf-c-options-menu__toggle-button-icon {
15139
- color: var(--pf-c-options-menu__toggle-icon--Color, inherit);
15149
+ .pf-c-notification-drawer__list-item-action {
15150
+ grid-column: 2/3;
15151
+ grid-row: 1/3;
15152
+ }
15153
+
15154
+ .pf-c-notification-drawer__list-item-description {
15155
+ grid-row: 2/3;
15156
+ grid-column: 1/2;
15157
+ margin-bottom: var(--pf-c-notification-drawer__list-item-description--MarginBottom);
15158
+ word-break: break-word;
15140
15159
  }
15141
15160
 
15142
- .pf-c-options-menu__toggle-icon {
15143
- margin-right: var(--pf-c-options-menu__toggle-icon--MarginRight);
15144
- margin-left: var(--pf-c-options-menu__toggle-icon--MarginLeft);
15161
+ .pf-c-notification-drawer__list-item-timestamp {
15162
+ grid-row: 3/4;
15163
+ grid-column: 1/2;
15164
+ font-size: var(--pf-c-notification-drawer__list-item-timestamp--FontSize);
15165
+ color: var(--pf-c-notification-drawer__list-item-timestamp--Color);
15145
15166
  }
15146
15167
 
15147
- .pf-c-options-menu.pf-m-top.pf-m-expanded .pf-c-options-menu__toggle-icon {
15148
- transform: rotate(var(--pf-c-options-menu--m-top--m-expanded__toggle-icon--Rotate));
15168
+ .pf-c-notification-drawer__group-list {
15169
+ display: flex;
15170
+ flex-direction: column;
15149
15171
  }
15150
15172
 
15151
- .pf-c-options-menu__menu {
15152
- position: absolute;
15153
- top: var(--pf-c-options-menu__menu--Top);
15154
- z-index: var(--pf-c-options-menu__menu--ZIndex);
15155
- min-width: 100%;
15156
- padding-top: var(--pf-c-options-menu__menu--PaddingTop);
15157
- padding-bottom: var(--pf-c-options-menu__menu--PaddingBottom);
15158
- background-color: var(--pf-c-options-menu__menu--BackgroundColor);
15159
- background-clip: padding-box;
15160
- box-shadow: var(--pf-c-options-menu__menu--BoxShadow);
15173
+ .pf-c-notification-drawer__group.pf-m-expanded {
15174
+ min-height: var(--pf-c-notification-drawer__group--m-expanded--MinHeight);
15161
15175
  }
15162
15176
 
15163
- .pf-c-options-menu__menu.pf-m-align-right {
15164
- right: 0;
15177
+ .pf-c-notification-drawer__group.pf-m-expanded + .pf-c-notification-drawer__group {
15178
+ border-top: var(--pf-c-notification-drawer__group--m-expanded--group--BorderTopWidth) solid var(--pf-c-notification-drawer__group--m-expanded--group--BorderTopColor);
15165
15179
  }
15166
15180
 
15167
- .pf-c-options-menu.pf-m-top .pf-c-options-menu__menu {
15168
- --pf-c-options-menu__menu--Top: var(--pf-c-options-menu--m-top__menu--Top);
15169
- transform: translateY(var(--pf-c-options-menu--m-top__menu--TranslateY));
15181
+ .pf-c-notification-drawer__group .pf-c-notification-drawer__list-item:last-child {
15182
+ --pf-c-notification-drawer__list-item--BorderBottomWidth: 0;
15183
+ --pf-c-notification-drawer__list-item--before--Bottom: 0;
15170
15184
  }
15171
15185
 
15172
- .pf-c-options-menu__menu-item {
15186
+ .pf-c-notification-drawer__group-toggle {
15173
15187
  display: flex;
15174
15188
  align-items: baseline;
15175
15189
  width: 100%;
15176
- padding: var(--pf-c-options-menu__menu-item--PaddingTop) var(--pf-c-options-menu__menu-item--PaddingRight) var(--pf-c-options-menu__menu-item--PaddingBottom) var(--pf-c-options-menu__menu-item--PaddingLeft);
15177
- font-size: var(--pf-c-options-menu__menu-item--FontSize);
15178
- color: var(--pf-c-options-menu__menu-item--Color);
15179
- white-space: nowrap;
15180
- background-color: var(--pf-c-options-menu__menu-item--BackgroundColor);
15181
- border: none;
15182
- }
15183
-
15184
- .pf-c-options-menu__menu-item:hover, .pf-c-options-menu__menu-item:focus {
15185
- text-decoration: none;
15186
- background-color: var(--pf-c-options-menu__menu-item--hover--BackgroundColor);
15190
+ padding: var(--pf-c-notification-drawer__group-toggle--PaddingTop) var(--pf-c-notification-drawer__group-toggle--PaddingRight) var(--pf-c-notification-drawer__group-toggle--PaddingBottom) var(--pf-c-notification-drawer__group-toggle--PaddingLeft);
15191
+ background-color: var(--pf-c-notification-drawer__group-toggle--BackgroundColor);
15192
+ border: solid var(--pf-c-notification-drawer__group-toggle--BorderColor);
15193
+ border-width: 0 0 var(--pf-c-notification-drawer__group-toggle--BorderBottomWidth) 0;
15194
+ outline-offset: var(--pf-c-notification-drawer__group-toggle--OutlineOffset);
15187
15195
  }
15188
15196
 
15189
- .pf-c-options-menu__menu-item:disabled, .pf-c-options-menu__menu-item.pf-m-disabled {
15190
- color: var(--pf-c-options-menu__menu-item--disabled--Color);
15191
- pointer-events: none;
15192
- background-color: var(--pf-c-options-menu__menu-item--disabled--BackgroundColor);
15197
+ .pf-c-notification-drawer__group-toggle-title {
15198
+ display: -webkit-box;
15199
+ -webkit-box-orient: vertical;
15200
+ -webkit-line-clamp: var(--pf-c-notification-drawer__group-toggle-title--max-lines);
15201
+ overflow: hidden;
15202
+ flex: 1;
15203
+ margin-right: var(--pf-c-notification-drawer__group-toggle-title--MarginRight);
15204
+ text-align: left;
15205
+ word-break: break-word;
15193
15206
  }
15194
15207
 
15195
- .pf-c-options-menu__menu-item-icon {
15196
- align-self: center;
15197
- width: auto;
15198
- padding-left: var(--pf-c-options-menu__menu-item-icon--PaddingLeft);
15208
+ .pf-c-notification-drawer__group-toggle-count {
15209
+ margin-right: var(--pf-c-notification-drawer__group-toggle-count--MarginRight);
15199
15210
  margin-left: auto;
15200
- font-size: var(--pf-c-options-menu__menu-item-icon--FontSize);
15201
- color: var(--pf-c-options-menu__menu-item-icon--Color);
15202
- }
15203
-
15204
- .pf-c-options-menu__group + .pf-c-options-menu__group {
15205
- padding-top: var(--pf-c-options-menu__group--group--PaddingTop);
15206
15211
  }
15207
15212
 
15208
- .pf-c-options-menu__group-title {
15209
- padding-top: var(--pf-c-options-menu__group-title--PaddingTop);
15210
- padding-right: var(--pf-c-options-menu__group-title--PaddingRight);
15211
- padding-bottom: var(--pf-c-options-menu__group-title--PaddingBottom);
15212
- padding-left: var(--pf-c-options-menu__group-title--PaddingLeft);
15213
- font-size: var(--pf-c-options-menu__group-title--FontSize);
15214
- font-weight: var(--pf-c-options-menu__group-title--FontWeight);
15215
- color: var(--pf-c-options-menu__group-title--Color);
15213
+ .pf-c-notification-drawer__group-toggle-icon {
15214
+ margin-right: var(--pf-c-notification-drawer__group-toggle-icon--MarginRight);
15215
+ color: var(--pf-c-notification-drawer__group-toggle-icon--Color);
15216
+ transition: var(--pf-c-notification-drawer__group-toggle-icon--Transition);
15216
15217
  }
15217
15218
 
15218
- :where(.pf-theme-dark) .pf-c-options-menu {
15219
- --pf-c-options-menu__toggle--BackgroundColor: var(--pf-global--BackgroundColor--400);
15220
- --pf-c-options-menu__toggle--BorderTopColor: transparent;
15221
- --pf-c-options-menu__toggle--BorderRightColor: transparent;
15222
- --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-global--BorderColor--400);
15223
- --pf-c-options-menu__toggle--BorderLeftColor: transparent;
15224
- --pf-c-options-menu__toggle--disabled--BackgroundColor: var(--pf-global--palette--black-500);
15225
- --pf-c-options-menu__menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
15226
- --pf-c-options-menu__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
15227
- --pf-c-options-menu__menu--Top: 100%;
15219
+ .pf-c-notification-drawer__group.pf-m-expanded .pf-c-notification-drawer__group-toggle-icon {
15220
+ transform: rotate(var(--pf-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate));
15228
15221
  }
15229
15222
 
15230
- :where(.pf-theme-dark) .pf-c-options-menu__toggle.pf-m-plain {
15231
- background: transparent;
15223
+ :where(.pf-theme-dark) .pf-c-notification-drawer {
15224
+ --pf-c-notification-drawer--BackgroundColor: var(--pf-global--BackgroundColor--300);
15225
+ --pf-c-notification-drawer__header--BackgroundColor: var(--pf-global--BackgroundColor--300);
15226
+ --pf-c-notification-drawer__list-item--BackgroundColor: var(--pf-global--BackgroundColor--300);
15227
+ --pf-c-notification-drawer__list-item--BoxShadow: none;
15228
+ --pf-c-notification-drawer__list-item--BorderBottomColor: var(--pf-global--BorderColor--100);
15229
+ --pf-c-notification-drawer__list-item--m-read--BackgroundColor: var(--pf-global--BackgroundColor--100);
15230
+ --pf-c-notification-drawer__list-item--list-item--m-read--BoxShadow: none;
15231
+ --pf-c-notification-drawer__group-toggle--BackgroundColor: var(--pf-global--BackgroundColor--300);
15232
15232
  }
15233
15233
 
15234
15234
  .pf-c-overflow-menu {
@@ -26117,75 +26117,6 @@ label.pf-c-tree-view__node-text {
26117
26117
  --pf-l-flex--spacer: var(--pf-l-flex--spacer--4xl);
26118
26118
  }
26119
26119
  }
26120
- .pf-l-gallery {
26121
- --pf-l-gallery--m-gutter--GridGap: var(--pf-global--gutter);
26122
- --pf-l-gallery--GridTemplateColumns--min: 250px;
26123
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
26124
- --pf-l-gallery--GridTemplateColumns--max: 1fr;
26125
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
26126
- --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
26127
- --pf-l-gallery--GridTemplateRows: auto;
26128
- display: grid;
26129
- grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
26130
- grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
26131
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
26132
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
26133
- }
26134
-
26135
- .pf-l-gallery.pf-m-gutter {
26136
- grid-gap: var(--pf-l-gallery--m-gutter--GridGap);
26137
- }
26138
-
26139
- @media (min-width: 576px) {
26140
- .pf-l-gallery {
26141
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min));
26142
- }
26143
- }
26144
- @media (min-width: 768px) {
26145
- .pf-l-gallery {
26146
- --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)));
26147
- }
26148
- }
26149
- @media (min-width: 992px) {
26150
- .pf-l-gallery {
26151
- --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))));
26152
- }
26153
- }
26154
- @media (min-width: 1200px) {
26155
- .pf-l-gallery {
26156
- --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)))));
26157
- }
26158
- }
26159
- @media (min-width: 1450px) {
26160
- .pf-l-gallery {
26161
- --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))))));
26162
- }
26163
- }
26164
- @media (min-width: 576px) {
26165
- .pf-l-gallery {
26166
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max));
26167
- }
26168
- }
26169
- @media (min-width: 768px) {
26170
- .pf-l-gallery {
26171
- --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)));
26172
- }
26173
- }
26174
- @media (min-width: 992px) {
26175
- .pf-l-gallery {
26176
- --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))));
26177
- }
26178
- }
26179
- @media (min-width: 1200px) {
26180
- .pf-l-gallery {
26181
- --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)))));
26182
- }
26183
- }
26184
- @media (min-width: 1450px) {
26185
- .pf-l-gallery {
26186
- --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))))));
26187
- }
26188
- }
26189
26120
  .pf-l-grid {
26190
26121
  --pf-l-grid--m-gutter--GridGap: var(--pf-global--gutter);
26191
26122
  --pf-l-grid__item--GridColumnStart: auto;
@@ -27400,6 +27331,75 @@ label.pf-c-tree-view__node-text {
27400
27331
  grid-gap: var(--pf-l-grid--m-gutter--GridGap);
27401
27332
  }
27402
27333
 
27334
+ .pf-l-gallery {
27335
+ --pf-l-gallery--m-gutter--GridGap: var(--pf-global--gutter);
27336
+ --pf-l-gallery--GridTemplateColumns--min: 250px;
27337
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
27338
+ --pf-l-gallery--GridTemplateColumns--max: 1fr;
27339
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
27340
+ --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
27341
+ --pf-l-gallery--GridTemplateRows: auto;
27342
+ display: grid;
27343
+ grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
27344
+ grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
27345
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
27346
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
27347
+ }
27348
+
27349
+ .pf-l-gallery.pf-m-gutter {
27350
+ grid-gap: var(--pf-l-gallery--m-gutter--GridGap);
27351
+ }
27352
+
27353
+ @media (min-width: 576px) {
27354
+ .pf-l-gallery {
27355
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min));
27356
+ }
27357
+ }
27358
+ @media (min-width: 768px) {
27359
+ .pf-l-gallery {
27360
+ --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)));
27361
+ }
27362
+ }
27363
+ @media (min-width: 992px) {
27364
+ .pf-l-gallery {
27365
+ --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))));
27366
+ }
27367
+ }
27368
+ @media (min-width: 1200px) {
27369
+ .pf-l-gallery {
27370
+ --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)))));
27371
+ }
27372
+ }
27373
+ @media (min-width: 1450px) {
27374
+ .pf-l-gallery {
27375
+ --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))))));
27376
+ }
27377
+ }
27378
+ @media (min-width: 576px) {
27379
+ .pf-l-gallery {
27380
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max));
27381
+ }
27382
+ }
27383
+ @media (min-width: 768px) {
27384
+ .pf-l-gallery {
27385
+ --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)));
27386
+ }
27387
+ }
27388
+ @media (min-width: 992px) {
27389
+ .pf-l-gallery {
27390
+ --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))));
27391
+ }
27392
+ }
27393
+ @media (min-width: 1200px) {
27394
+ .pf-l-gallery {
27395
+ --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)))));
27396
+ }
27397
+ }
27398
+ @media (min-width: 1450px) {
27399
+ .pf-l-gallery {
27400
+ --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))))));
27401
+ }
27402
+ }
27403
27403
  .pf-l-level {
27404
27404
  --pf-l-level--m-gutter--MarginRight: var(--pf-global--gutter);
27405
27405
  display: flex;