@patternfly/react-core 4.247.0 → 4.248.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/dist/esm/components/Menu/Menu.d.ts.map +1 -1
  3. package/dist/esm/components/Menu/Menu.js +10 -3
  4. package/dist/esm/components/Menu/Menu.js.map +1 -1
  5. package/dist/esm/components/MenuToggle/MenuToggle.d.ts.map +1 -1
  6. package/dist/esm/components/MenuToggle/MenuToggle.js +1 -1
  7. package/dist/esm/components/MenuToggle/MenuToggle.js.map +1 -1
  8. package/dist/js/components/Menu/Menu.d.ts.map +1 -1
  9. package/dist/js/components/Menu/Menu.js +10 -3
  10. package/dist/js/components/Menu/Menu.js.map +1 -1
  11. package/dist/js/components/MenuToggle/MenuToggle.d.ts.map +1 -1
  12. package/dist/js/components/MenuToggle/MenuToggle.js +1 -1
  13. package/dist/js/components/MenuToggle/MenuToggle.js.map +1 -1
  14. package/dist/umd/react-core.min.css +1942 -1942
  15. package/dist/umd/react-core.min.js +1 -1
  16. package/package.json +2 -2
  17. package/src/components/Menu/Menu.tsx +13 -7
  18. package/src/components/MenuToggle/MenuToggle.tsx +1 -0
  19. package/src/demos/Filters/FilterDemos.md +27 -5
  20. package/src/demos/Filters/examples/FilterAttributeSearch.tsx +701 -0
  21. package/src/demos/Filters/examples/FilterCheckboxSelect.tsx +66 -53
  22. package/src/demos/Filters/examples/FilterFaceted.tsx +512 -0
  23. package/src/demos/Filters/examples/FilterMixedSelectGroup.tsx +569 -0
  24. package/src/demos/Filters/examples/FilterSameSelectGroup.tsx +542 -0
  25. package/src/demos/Filters/examples/FilterSearchInput.tsx +91 -68
  26. package/src/demos/Filters/examples/FilterSingleSelect.tsx +63 -52
  27. package/src/demos/Page.md +47 -0
  28. package/src/demos/examples/DashboardWrapper.js +3 -1
  29. package/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx +305 -0
  30. package/src/demos/examples/Page/PageStickySectionGroup.tsx +306 -0
  31. package/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx +301 -0
  32. package/src/demos/examples/Page/PageStickySectionGroupUsingPageHeader.tsx +293 -0
  33. package/src/demos/Page/Page.md +0 -1184
  34. package/src/demos/Page/imgAvatar.svg +0 -33
  35. package/src/demos/Page/imgBrand.svg +0 -1
@@ -4,23 +4,6 @@
4
4
  pointer-events: none;
5
5
  }
6
6
 
7
- .pf-c-backdrop {
8
- --pf-c-backdrop--Position: fixed;
9
- --pf-c-backdrop--ZIndex: var(--pf-global--ZIndex--lg);
10
- --pf-c-backdrop--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-100);
11
- position: var(--pf-c-backdrop--Position);
12
- top: 0;
13
- left: 0;
14
- z-index: var(--pf-c-backdrop--ZIndex);
15
- width: 100%;
16
- height: 100%;
17
- background-color: var(--pf-c-backdrop--BackgroundColor);
18
- }
19
-
20
- .pf-c-backdrop__open {
21
- overflow: hidden;
22
- }
23
-
24
7
  .pf-c-accordion {
25
8
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
26
9
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
@@ -266,6 +249,23 @@
266
249
  --pf-c-accordion__toggle--active--BackgroundColor: var(--pf-global--BackgroundColor--300);
267
250
  }
268
251
 
252
+ .pf-c-backdrop {
253
+ --pf-c-backdrop--Position: fixed;
254
+ --pf-c-backdrop--ZIndex: var(--pf-global--ZIndex--lg);
255
+ --pf-c-backdrop--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-100);
256
+ position: var(--pf-c-backdrop--Position);
257
+ top: 0;
258
+ left: 0;
259
+ z-index: var(--pf-c-backdrop--ZIndex);
260
+ width: 100%;
261
+ height: 100%;
262
+ background-color: var(--pf-c-backdrop--BackgroundColor);
263
+ }
264
+
265
+ .pf-c-backdrop__open {
266
+ overflow: hidden;
267
+ }
268
+
269
269
  .pf-c-action-list {
270
270
  --pf-c-action-list--m-icon--spacer: 0;
271
271
  --pf-c-action-list--child--spacer-base: var(--pf-global--spacer--md);
@@ -1634,45 +1634,6 @@ textarea.pf-c-form-control {
1634
1634
  display: block;
1635
1635
  }
1636
1636
 
1637
- .pf-c-badge {
1638
- --pf-c-badge--BorderRadius: var(--pf-global--BorderRadius--lg);
1639
- --pf-c-badge--FontSize: var(--pf-global--FontSize--xs);
1640
- --pf-c-badge--FontWeight: var(--pf-global--FontWeight--bold);
1641
- --pf-c-badge--PaddingRight: var(--pf-global--spacer--sm);
1642
- --pf-c-badge--PaddingLeft: var(--pf-global--spacer--sm);
1643
- --pf-c-badge--Color: var(--pf-global--Color--dark-100);
1644
- --pf-c-badge--MinWidth: var(--pf-global--spacer--xl);
1645
- --pf-c-badge--m-read--BackgroundColor: var(--pf-global--BackgroundColor--200);
1646
- --pf-c-badge--m-read--Color: var(--pf-global--Color--dark-100);
1647
- --pf-c-badge--m-unread--BackgroundColor: var(--pf-global--primary-color--100);
1648
- --pf-c-badge--m-unread--Color: var(--pf-global--Color--light-100);
1649
- display: inline-block;
1650
- min-width: var(--pf-c-badge--MinWidth);
1651
- padding-right: var(--pf-c-badge--PaddingRight);
1652
- padding-left: var(--pf-c-badge--PaddingLeft);
1653
- font-size: var(--pf-c-badge--FontSize);
1654
- font-weight: var(--pf-c-badge--FontWeight);
1655
- color: var(--pf-c-badge--Color);
1656
- text-align: center;
1657
- background-color: var(--pf-c-badge--BackgroundColor);
1658
- border-radius: var(--pf-c-badge--BorderRadius);
1659
- }
1660
-
1661
- .pf-c-badge.pf-m-read {
1662
- --pf-c-badge--Color: var(--pf-c-badge--m-read--Color);
1663
- --pf-c-badge--BackgroundColor: var(--pf-c-badge--m-read--BackgroundColor);
1664
- }
1665
-
1666
- .pf-c-badge.pf-m-unread {
1667
- --pf-c-badge--Color: var(--pf-c-badge--m-unread--Color);
1668
- --pf-c-badge--BackgroundColor: var(--pf-c-badge--m-unread--BackgroundColor);
1669
- }
1670
-
1671
- :where(.pf-theme-dark) .pf-c-badge {
1672
- --pf-c-badge--m-read--BackgroundColor: var(--pf-global--palette--black-500);
1673
- --pf-c-badge--m-unread--BackgroundColor: var(--pf-global--primary-color--300);
1674
- }
1675
-
1676
1637
  .pf-c-banner.pf-m-warning, .pf-c-banner.pf-m-gold, .pf-c-banner.pf-m-info, .pf-c-banner.pf-m-blue {
1677
1638
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
1678
1639
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
@@ -2642,6 +2603,45 @@ button.pf-c-breadcrumb__link {
2642
2603
  border-bottom: var(--pf-global--BorderWidth--sm) solid var(--pf-global--palette--black-700);
2643
2604
  }
2644
2605
 
2606
+ .pf-c-badge {
2607
+ --pf-c-badge--BorderRadius: var(--pf-global--BorderRadius--lg);
2608
+ --pf-c-badge--FontSize: var(--pf-global--FontSize--xs);
2609
+ --pf-c-badge--FontWeight: var(--pf-global--FontWeight--bold);
2610
+ --pf-c-badge--PaddingRight: var(--pf-global--spacer--sm);
2611
+ --pf-c-badge--PaddingLeft: var(--pf-global--spacer--sm);
2612
+ --pf-c-badge--Color: var(--pf-global--Color--dark-100);
2613
+ --pf-c-badge--MinWidth: var(--pf-global--spacer--xl);
2614
+ --pf-c-badge--m-read--BackgroundColor: var(--pf-global--BackgroundColor--200);
2615
+ --pf-c-badge--m-read--Color: var(--pf-global--Color--dark-100);
2616
+ --pf-c-badge--m-unread--BackgroundColor: var(--pf-global--primary-color--100);
2617
+ --pf-c-badge--m-unread--Color: var(--pf-global--Color--light-100);
2618
+ display: inline-block;
2619
+ min-width: var(--pf-c-badge--MinWidth);
2620
+ padding-right: var(--pf-c-badge--PaddingRight);
2621
+ padding-left: var(--pf-c-badge--PaddingLeft);
2622
+ font-size: var(--pf-c-badge--FontSize);
2623
+ font-weight: var(--pf-c-badge--FontWeight);
2624
+ color: var(--pf-c-badge--Color);
2625
+ text-align: center;
2626
+ background-color: var(--pf-c-badge--BackgroundColor);
2627
+ border-radius: var(--pf-c-badge--BorderRadius);
2628
+ }
2629
+
2630
+ .pf-c-badge.pf-m-read {
2631
+ --pf-c-badge--Color: var(--pf-c-badge--m-read--Color);
2632
+ --pf-c-badge--BackgroundColor: var(--pf-c-badge--m-read--BackgroundColor);
2633
+ }
2634
+
2635
+ .pf-c-badge.pf-m-unread {
2636
+ --pf-c-badge--Color: var(--pf-c-badge--m-unread--Color);
2637
+ --pf-c-badge--BackgroundColor: var(--pf-c-badge--m-unread--BackgroundColor);
2638
+ }
2639
+
2640
+ :where(.pf-theme-dark) .pf-c-badge {
2641
+ --pf-c-badge--m-read--BackgroundColor: var(--pf-global--palette--black-500);
2642
+ --pf-c-badge--m-unread--BackgroundColor: var(--pf-global--primary-color--300);
2643
+ }
2644
+
2645
2645
  .pf-c-calendar-month {
2646
2646
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
2647
2647
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
@@ -3252,6 +3252,77 @@ button.pf-c-breadcrumb__link {
3252
3252
  --pf-c-card--m-selectable-raised--active--BoxShadow: var(--pf-global--BoxShadow--lg);
3253
3253
  }
3254
3254
 
3255
+ .pf-c-check {
3256
+ --pf-c-check--GridGap: var(--pf-global--spacer--xs) var(--pf-global--spacer--sm);
3257
+ --pf-c-check__label--disabled--Color: var(--pf-global--disabled-color--100);
3258
+ --pf-c-check__label--Color: var(--pf-global--Color--100);
3259
+ --pf-c-check__label--FontWeight: var(--pf-global--FontWeight--normal);
3260
+ --pf-c-check__label--FontSize: var(--pf-global--FontSize--md);
3261
+ --pf-c-check__label--LineHeight: var(--pf-global--LineHeight--sm);
3262
+ --pf-c-check__input--Height: var(--pf-c-check__label--FontSize);
3263
+ --pf-c-check__input--MarginTop: calc(((var(--pf-c-check__label--FontSize) * var(--pf-c-check__label--LineHeight)) - var(--pf-c-check__input--Height)) / 2);
3264
+ --pf-c-check__description--FontSize: var(--pf-global--FontSize--sm);
3265
+ --pf-c-check__description--Color: var(--pf-global--Color--200);
3266
+ --pf-c-check__body--MarginTop: var(--pf-global--spacer--sm);
3267
+ --pf-c-check__label-required--MarginLeft: var(--pf-global--spacer--xs);
3268
+ --pf-c-check__label-required--FontSize: var(--pf-global--FontSize--sm);
3269
+ --pf-c-check__label-required--Color: var(--pf-global--danger-color--100);
3270
+ display: grid;
3271
+ grid-template-columns: auto 1fr;
3272
+ grid-gap: var(--pf-c-check--GridGap);
3273
+ align-items: start;
3274
+ justify-items: start;
3275
+ }
3276
+
3277
+ .pf-c-check.pf-m-standalone {
3278
+ --pf-c-check--GridGap: 0;
3279
+ --pf-c-check__input--Height: auto;
3280
+ --pf-c-check__input--MarginTop: 0;
3281
+ display: inline-grid;
3282
+ line-height: 1;
3283
+ }
3284
+
3285
+ .pf-c-check__label {
3286
+ font-size: var(--pf-c-check__label--FontSize);
3287
+ font-weight: var(--pf-c-check__label--FontWeight);
3288
+ line-height: var(--pf-c-check__label--LineHeight);
3289
+ color: var(--pf-c-check__label--Color);
3290
+ }
3291
+
3292
+ .pf-c-check__input {
3293
+ height: var(--pf-c-check__input--Height);
3294
+ margin-top: var(--pf-c-check__input--MarginTop);
3295
+ }
3296
+
3297
+ .pf-c-check__description {
3298
+ grid-column: 2;
3299
+ font-size: var(--pf-c-check__description--FontSize);
3300
+ color: var(--pf-c-check__description--Color);
3301
+ }
3302
+
3303
+ .pf-c-check__body {
3304
+ grid-column: 2;
3305
+ margin-top: var(--pf-c-check__body--MarginTop);
3306
+ }
3307
+
3308
+ label.pf-c-check, .pf-c-check__label,
3309
+ .pf-c-check__input {
3310
+ cursor: pointer;
3311
+ }
3312
+
3313
+ .pf-c-check__label:disabled, .pf-c-check__label.pf-m-disabled,
3314
+ .pf-c-check__input:disabled,
3315
+ .pf-c-check__input.pf-m-disabled {
3316
+ --pf-c-check__label--Color: var(--pf-c-check__label--disabled--Color);
3317
+ cursor: not-allowed;
3318
+ }
3319
+
3320
+ .pf-c-check__label-required {
3321
+ margin-left: var(--pf-c-check__label-required--MarginLeft);
3322
+ font-size: var(--pf-c-check__label-required--FontSize);
3323
+ color: var(--pf-c-check__label-required--Color);
3324
+ }
3325
+
3255
3326
  .pf-c-chip {
3256
3327
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
3257
3328
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
@@ -5820,77 +5891,6 @@ button.pf-c-breadcrumb__link {
5820
5891
  --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
5821
5892
  }
5822
5893
  }
5823
- .pf-c-check {
5824
- --pf-c-check--GridGap: var(--pf-global--spacer--xs) var(--pf-global--spacer--sm);
5825
- --pf-c-check__label--disabled--Color: var(--pf-global--disabled-color--100);
5826
- --pf-c-check__label--Color: var(--pf-global--Color--100);
5827
- --pf-c-check__label--FontWeight: var(--pf-global--FontWeight--normal);
5828
- --pf-c-check__label--FontSize: var(--pf-global--FontSize--md);
5829
- --pf-c-check__label--LineHeight: var(--pf-global--LineHeight--sm);
5830
- --pf-c-check__input--Height: var(--pf-c-check__label--FontSize);
5831
- --pf-c-check__input--MarginTop: calc(((var(--pf-c-check__label--FontSize) * var(--pf-c-check__label--LineHeight)) - var(--pf-c-check__input--Height)) / 2);
5832
- --pf-c-check__description--FontSize: var(--pf-global--FontSize--sm);
5833
- --pf-c-check__description--Color: var(--pf-global--Color--200);
5834
- --pf-c-check__body--MarginTop: var(--pf-global--spacer--sm);
5835
- --pf-c-check__label-required--MarginLeft: var(--pf-global--spacer--xs);
5836
- --pf-c-check__label-required--FontSize: var(--pf-global--FontSize--sm);
5837
- --pf-c-check__label-required--Color: var(--pf-global--danger-color--100);
5838
- display: grid;
5839
- grid-template-columns: auto 1fr;
5840
- grid-gap: var(--pf-c-check--GridGap);
5841
- align-items: start;
5842
- justify-items: start;
5843
- }
5844
-
5845
- .pf-c-check.pf-m-standalone {
5846
- --pf-c-check--GridGap: 0;
5847
- --pf-c-check__input--Height: auto;
5848
- --pf-c-check__input--MarginTop: 0;
5849
- display: inline-grid;
5850
- line-height: 1;
5851
- }
5852
-
5853
- .pf-c-check__label {
5854
- font-size: var(--pf-c-check__label--FontSize);
5855
- font-weight: var(--pf-c-check__label--FontWeight);
5856
- line-height: var(--pf-c-check__label--LineHeight);
5857
- color: var(--pf-c-check__label--Color);
5858
- }
5859
-
5860
- .pf-c-check__input {
5861
- height: var(--pf-c-check__input--Height);
5862
- margin-top: var(--pf-c-check__input--MarginTop);
5863
- }
5864
-
5865
- .pf-c-check__description {
5866
- grid-column: 2;
5867
- font-size: var(--pf-c-check__description--FontSize);
5868
- color: var(--pf-c-check__description--Color);
5869
- }
5870
-
5871
- .pf-c-check__body {
5872
- grid-column: 2;
5873
- margin-top: var(--pf-c-check__body--MarginTop);
5874
- }
5875
-
5876
- label.pf-c-check, .pf-c-check__label,
5877
- .pf-c-check__input {
5878
- cursor: pointer;
5879
- }
5880
-
5881
- .pf-c-check__label:disabled, .pf-c-check__label.pf-m-disabled,
5882
- .pf-c-check__input:disabled,
5883
- .pf-c-check__input.pf-m-disabled {
5884
- --pf-c-check__label--Color: var(--pf-c-check__label--disabled--Color);
5885
- cursor: not-allowed;
5886
- }
5887
-
5888
- .pf-c-check__label-required {
5889
- margin-left: var(--pf-c-check__label-required--MarginLeft);
5890
- font-size: var(--pf-c-check__label-required--FontSize);
5891
- color: var(--pf-c-check__label-required--Color);
5892
- }
5893
-
5894
5894
  .pf-c-divider {
5895
5895
  --pf-hidden-visible--visible--Visibility: visible;
5896
5896
  --pf-hidden-visible--hidden--Display: none;
@@ -9531,240 +9531,561 @@ label.pf-c-input-group__text {
9531
9531
  --pf-c-input-group__text--BackgroundColor: transparent;
9532
9532
  }
9533
9533
 
9534
- .pf-c-sidebar {
9535
- --pf-c-sidebar--BackgroundColor: var(--pf-global--BackgroundColor--100);
9536
- --pf-c-sidebar__main--FlexDirection: column;
9537
- --pf-c-sidebar__main--md--FlexDirection: row;
9538
- --pf-c-sidebar__main--AlignItems: stretch;
9539
- --pf-c-sidebar__main--md--AlignItems: start;
9540
- --pf-c-sidebar__main--child--MarginTop: 0;
9541
- --pf-c-sidebar__main--child--MarginLeft: 0;
9542
- --pf-c-sidebar--m-gutter__main--Gap: var(--pf-global--spacer--md);
9543
- --pf-c-sidebar--m-gutter__main--xl--Gap: var(--pf-global--spacer--lg);
9544
- --pf-c-sidebar--m-panel-right__panel--Order: 0;
9545
- --pf-c-sidebar--m-panel-right__panel--md--Order: 1;
9546
- --pf-c-sidebar--m-stack__main--FlexDirection: column;
9547
- --pf-c-sidebar--m-stack__main--AlignItems: stretch;
9548
- --pf-c-sidebar--m-stack__panel--Position: sticky;
9549
- --pf-c-sidebar--m-stack__panel--Top: 0;
9550
- --pf-c-sidebar--m-stack__panel--BoxShadow: var(--pf-c-sidebar__panel--BoxShadow--base);
9551
- --pf-c-sidebar--m-stack--m-panel-right__panel--Order: 0;
9552
- --pf-c-sidebar--m-split__main--AlignItems: start;
9553
- --pf-c-sidebar--m-split__main--FlexDirection: row;
9554
- --pf-c-sidebar--m-split__panel--Position: static;
9555
- --pf-c-sidebar--m-split__panel--Top: auto;
9556
- --pf-c-sidebar--m-split--m-panel-right__panel--Order: 1;
9557
- --pf-c-sidebar__panel--FlexBasis--base: auto;
9558
- --pf-c-sidebar__panel--BoxShadow--base: 0 0.25rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
9559
- --pf-c-sidebar__panel--BoxShadow: var(--pf-c-sidebar__panel--BoxShadow--base);
9560
- --pf-c-sidebar__panel--Top: 0;
9561
- --pf-c-sidebar__panel--md--Top: auto;
9562
- --pf-c-sidebar__panel--Position: sticky;
9563
- --pf-c-sidebar__panel--md--Position: static;
9564
- --pf-c-sidebar__panel--FlexBasis-base: auto;
9565
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis-base);
9566
- --pf-c-sidebar__panel--md--FlexBasis: 15.625rem;
9567
- --pf-c-sidebar__panel--m-split--FlexBasis: 15.625rem;
9568
- --pf-c-sidebar__panel--m-stack--FlexBasis: auto;
9569
- --pf-c-sidebar__panel--ZIndex: var(--pf-global--ZIndex--xs);
9570
- --pf-c-sidebar__panel--Order: 0;
9571
- --pf-c-sidebar__panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
9572
- --pf-c-sidebar__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
9573
- --pf-c-sidebar__panel--m-sticky--Top: 0;
9574
- --pf-c-sidebar__panel--m-sticky--Position: sticky;
9575
- height: 100%;
9534
+ .pf-c-jump-links {
9535
+ --pf-c-jump-links__list--Display: flex;
9536
+ --pf-c-jump-links__list--Visibility: visible;
9537
+ --pf-c-jump-links__list--PaddingTop: 0;
9538
+ --pf-c-jump-links__list--PaddingRight: var(--pf-global--spacer--md);
9539
+ --pf-c-jump-links__list--PaddingBottom: 0;
9540
+ --pf-c-jump-links__list--PaddingLeft: var(--pf-global--spacer--md);
9541
+ --pf-c-jump-links--m-vertical__list--PaddingTop: var(--pf-global--spacer--md);
9542
+ --pf-c-jump-links--m-vertical__list--PaddingRight: 0;
9543
+ --pf-c-jump-links--m-vertical__list--PaddingBottom: var(--pf-global--spacer--md);
9544
+ --pf-c-jump-links--m-vertical__list--PaddingLeft: 0;
9545
+ --pf-c-jump-links__list--FlexDirection: row;
9546
+ --pf-c-jump-links--m-vertical__list--FlexDirection: column;
9547
+ --pf-c-jump-links__list--before--BorderColor: var(--pf-global--BorderColor--100);
9548
+ --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-global--BorderWidth--sm);
9549
+ --pf-c-jump-links__list--before--BorderRightWidth: 0;
9550
+ --pf-c-jump-links__list--before--BorderBottomWidth: 0;
9551
+ --pf-c-jump-links__list--before--BorderLeftWidth: 0;
9552
+ --pf-c-jump-links--m-vertical__list--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
9553
+ --pf-c-jump-links--m-vertical__list--before--BorderTopWidth: 0;
9554
+ --pf-c-jump-links__list__list--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
9555
+ --pf-c-jump-links__link--PaddingTop: var(--pf-global--spacer--md);
9556
+ --pf-c-jump-links__link--PaddingRight: var(--pf-global--spacer--md);
9557
+ --pf-c-jump-links__link--PaddingBottom: var(--pf-global--spacer--md);
9558
+ --pf-c-jump-links__link--PaddingLeft: var(--pf-global--spacer--md);
9559
+ --pf-c-jump-links__list__list__link--PaddingTop: var(--pf-global--spacer--sm);
9560
+ --pf-c-jump-links__list__list__link--PaddingLeft: var(--pf-global--spacer--lg);
9561
+ --pf-c-jump-links__list__list__link--PaddingBottom: var(--pf-global--spacer--sm);
9562
+ --pf-c-jump-links__link--OutlineOffset: calc(-1 * var(--pf-global--spacer--sm));
9563
+ --pf-c-jump-links__link--before--BorderTopWidth: 0;
9564
+ --pf-c-jump-links__link--before--BorderRightWidth: 0;
9565
+ --pf-c-jump-links__link--before--BorderBottomWidth: 0;
9566
+ --pf-c-jump-links__link--before--BorderLeftWidth: 0;
9567
+ --pf-c-jump-links__link--before--BorderColor: transparent;
9568
+ --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-global--BorderWidth--lg);
9569
+ --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: 0;
9570
+ --pf-c-jump-links__item--m-current__link--before--BorderColor: var(--pf-global--primary-color--100);
9571
+ --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth: 0;
9572
+ --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth: var(--pf-global--BorderWidth--lg);
9573
+ --pf-c-jump-links__link-text--Color: var(--pf-global--Color--200);
9574
+ --pf-c-jump-links__link--hover__link-text--Color: var(--pf-global--Color--100);
9575
+ --pf-c-jump-links__link--focus__link-text--Color: var(--pf-global--Color--100);
9576
+ --pf-c-jump-links__item--m-current__link-text--Color: var(--pf-global--Color--100);
9577
+ --pf-c-jump-links__label--MarginBottom: var(--pf-global--spacer--md);
9578
+ --pf-c-jump-links__label--Display: block;
9579
+ --pf-c-jump-links__label--Visibility: visible;
9580
+ --pf-c-jump-links__toggle--MarginTop: calc(-1 * var(--pf-global--spacer--form-element));
9581
+ --pf-c-jump-links__toggle--MarginBottom--base: calc(-1 * var(--pf-global--spacer--form-element));
9582
+ --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links__toggle--MarginBottom--base);
9583
+ --pf-c-jump-links--m-expanded__toggle--MarginBottom: calc(var(--pf-c-jump-links__toggle--MarginBottom--base) + var(--pf-global--spacer--md));
9584
+ --pf-c-jump-links__toggle--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
9585
+ --pf-c-jump-links__toggle--Display: none;
9586
+ --pf-c-jump-links__toggle--Visibility: hidden;
9587
+ --pf-c-jump-links__toggle-icon--Color: currentcolor;
9588
+ --pf-c-jump-links__toggle-icon--Transition: var(--pf-global--Transition);
9589
+ --pf-c-jump-links__toggle-icon--Rotate: 0;
9590
+ --pf-c-jump-links--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
9591
+ --pf-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
9592
+ --pf-c-jump-links__toggle-text--MarginLeft: var(--pf-global--spacer--md);
9593
+ --pf-c-jump-links__toggle-text--Color: var(--pf-global--Color--100);
9594
+ display: flex;
9576
9595
  }
9577
9596
 
9578
- @media (min-width: 768px) {
9579
- .pf-c-sidebar {
9580
- --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar__main--md--FlexDirection);
9581
- --pf-c-sidebar__panel--BoxShadow: none;
9582
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--md--FlexBasis);
9583
- --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar__main--md--AlignItems);
9584
- --pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--md--Top);
9585
- --pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--md--Position);
9586
- }
9587
- }
9588
- @media (min-width: 1200px) {
9589
- .pf-c-sidebar {
9590
- --pf-c-sidebar--m-gutter__main--Gap: var(--pf-c-sidebar--m-gutter__main--xl--Gap);
9591
- }
9592
- }
9593
- .pf-c-sidebar.pf-m-gutter {
9594
- --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
9595
- --pf-c-sidebar__main--child--MarginLeft: 0;
9597
+ .pf-c-jump-links.pf-m-center {
9598
+ justify-content: center;
9596
9599
  }
9597
9600
 
9598
- .pf-c-sidebar.pf-m-gutter > .pf-c-sidebar__main > * + * {
9599
- margin-top: var(--pf-c-sidebar__main--child--MarginTop);
9600
- margin-left: var(--pf-c-sidebar__main--child--MarginLeft);
9601
+ .pf-c-jump-links.pf-m-center .pf-c-jump-links__main {
9602
+ align-items: center;
9601
9603
  }
9602
9604
 
9603
- @media (min-width: 768px) {
9604
- .pf-c-sidebar.pf-m-gutter {
9605
- --pf-c-sidebar__main--child--MarginTop: 0;
9606
- --pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
9607
- }
9608
- }
9609
- .pf-c-sidebar.pf-m-panel-right {
9610
- --pf-c-sidebar__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--Order);
9605
+ .pf-c-jump-links.pf-m-vertical, .pf-c-jump-links.pf-m-expandable {
9606
+ --pf-c-jump-links__list--PaddingTop: var(--pf-c-jump-links--m-vertical__list--PaddingTop);
9607
+ --pf-c-jump-links__list--PaddingRight: var(--pf-c-jump-links--m-vertical__list--PaddingRight);
9608
+ --pf-c-jump-links__list--PaddingBottom: var(--pf-c-jump-links--m-vertical__list--PaddingBottom);
9609
+ --pf-c-jump-links__list--PaddingLeft: var(--pf-c-jump-links--m-vertical__list--PaddingLeft);
9610
+ --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderTopWidth);
9611
+ --pf-c-jump-links__list--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderLeftWidth);
9612
+ --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth);
9613
+ --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth);
9614
+ --pf-c-jump-links__list--FlexDirection: var(--pf-c-jump-links--m-vertical__list--FlexDirection);
9615
+ flex-direction: column;
9611
9616
  }
9612
9617
 
9613
- @media (min-width: 768px) {
9614
- .pf-c-sidebar.pf-m-panel-right {
9615
- --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--md--Order);
9616
- }
9617
- }
9618
- .pf-c-sidebar.pf-m-stack {
9619
- --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-stack__main--FlexDirection);
9620
- --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-stack__main--AlignItems);
9621
- --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
9622
- --pf-c-sidebar__main--child--MarginLeft: 0;
9623
- --pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-stack__panel--Position);
9624
- --pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-stack__panel--Top);
9625
- --pf-c-sidebar__panel--BoxShadow: var(--pf-c-sidebar--m-stack__panel--BoxShadow);
9626
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-stack--FlexBasis);
9627
- --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-stack--m-panel-right__panel--Order);
9618
+ .pf-c-jump-links.pf-m-expandable {
9619
+ --pf-c-jump-links__list--Display: none;
9620
+ --pf-c-jump-links__list--Visibility: hidden;
9621
+ --pf-c-jump-links__toggle--Display: block;
9622
+ --pf-c-jump-links__toggle--Visibility: visible;
9623
+ --pf-c-jump-links__label--Display: none;
9624
+ --pf-c-jump-links__label--Visibility: hidden;
9628
9625
  }
9629
9626
 
9630
- .pf-c-sidebar.pf-m-split {
9631
- --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-split__main--FlexDirection);
9632
- --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-split__main--AlignItems);
9633
- --pf-c-sidebar__main--child--MarginTop: 0;
9634
- --pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
9635
- --pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-split__panel--Position);
9636
- --pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-split__panel--Top);
9637
- --pf-c-sidebar__panel--BoxShadow: none;
9638
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-split--FlexBasis);
9639
- --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-split--m-panel-right__panel--Order);
9627
+ .pf-c-jump-links.pf-m-non-expandable {
9628
+ --pf-c-jump-links__list--Display: flex;
9629
+ --pf-c-jump-links__list--Visibility: visible;
9630
+ --pf-c-jump-links__toggle--Display: none;
9631
+ --pf-c-jump-links__toggle--Visibility: hidden;
9632
+ --pf-c-jump-links__label--Display: block;
9633
+ --pf-c-jump-links__label--Visibility: visible;
9640
9634
  }
9641
9635
 
9642
- .pf-c-sidebar__main {
9643
- display: flex;
9644
- flex-direction: var(--pf-c-sidebar__main--FlexDirection);
9645
- align-items: var(--pf-c-sidebar__main--AlignItems);
9646
- }
9636
+ @media (min-width: 576px) {
9637
+ .pf-c-jump-links.pf-m-expandable-on-sm {
9638
+ --pf-c-jump-links__list--Display: none;
9639
+ --pf-c-jump-links__list--Visibility: hidden;
9640
+ --pf-c-jump-links__toggle--Display: block;
9641
+ --pf-c-jump-links__toggle--Visibility: visible;
9642
+ --pf-c-jump-links__label--Display: none;
9643
+ --pf-c-jump-links__label--Visibility: hidden;
9644
+ }
9647
9645
 
9648
- .pf-c-sidebar__panel {
9649
- position: var(--pf-c-sidebar__panel--Position);
9650
- top: var(--pf-c-sidebar__panel--Top);
9651
- z-index: var(--pf-c-sidebar__panel--ZIndex);
9652
- flex-shrink: 0;
9653
- flex-basis: var(--pf-c-sidebar__panel--FlexBasis);
9654
- order: var(--pf-c-sidebar__panel--Order);
9655
- background-color: var(--pf-c-sidebar__panel--BackgroundColor);
9656
- box-shadow: var(--pf-c-sidebar__panel--BoxShadow);
9646
+ .pf-c-jump-links.pf-m-non-expandable-on-sm {
9647
+ --pf-c-jump-links__list--Display: flex;
9648
+ --pf-c-jump-links__list--Visibility: visible;
9649
+ --pf-c-jump-links__toggle--Display: none;
9650
+ --pf-c-jump-links__toggle--Visibility: hidden;
9651
+ --pf-c-jump-links__label--Display: block;
9652
+ --pf-c-jump-links__label--Visibility: visible;
9653
+ }
9657
9654
  }
9655
+ @media (min-width: 768px) {
9656
+ .pf-c-jump-links.pf-m-expandable-on-md {
9657
+ --pf-c-jump-links__list--Display: none;
9658
+ --pf-c-jump-links__list--Visibility: hidden;
9659
+ --pf-c-jump-links__toggle--Display: block;
9660
+ --pf-c-jump-links__toggle--Visibility: visible;
9661
+ --pf-c-jump-links__label--Display: none;
9662
+ --pf-c-jump-links__label--Visibility: hidden;
9663
+ }
9658
9664
 
9659
- .pf-c-sidebar__panel.pf-m-sticky {
9660
- --pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--m-sticky--Position);
9661
- --pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--m-sticky--Top);
9665
+ .pf-c-jump-links.pf-m-non-expandable-on-md {
9666
+ --pf-c-jump-links__list--Display: flex;
9667
+ --pf-c-jump-links__list--Visibility: visible;
9668
+ --pf-c-jump-links__toggle--Display: none;
9669
+ --pf-c-jump-links__toggle--Visibility: hidden;
9670
+ --pf-c-jump-links__label--Display: block;
9671
+ --pf-c-jump-links__label--Visibility: visible;
9672
+ }
9662
9673
  }
9674
+ @media (min-width: 992px) {
9675
+ .pf-c-jump-links.pf-m-expandable-on-lg {
9676
+ --pf-c-jump-links__list--Display: none;
9677
+ --pf-c-jump-links__list--Visibility: hidden;
9678
+ --pf-c-jump-links__toggle--Display: block;
9679
+ --pf-c-jump-links__toggle--Visibility: visible;
9680
+ --pf-c-jump-links__label--Display: none;
9681
+ --pf-c-jump-links__label--Visibility: hidden;
9682
+ }
9663
9683
 
9664
- .pf-c-sidebar__panel.pf-m-static {
9665
- --pf-c-sidebar__panel--Position: static;
9666
- --pf-c-sidebar__panel--Top: auto;
9667
- }
9668
-
9669
- .pf-c-sidebar__content {
9670
- flex-grow: 1;
9671
- background-color: var(--pf-c-sidebar__content--BackgroundColor);
9684
+ .pf-c-jump-links.pf-m-non-expandable-on-lg {
9685
+ --pf-c-jump-links__list--Display: flex;
9686
+ --pf-c-jump-links__list--Visibility: visible;
9687
+ --pf-c-jump-links__toggle--Display: none;
9688
+ --pf-c-jump-links__toggle--Visibility: hidden;
9689
+ --pf-c-jump-links__label--Display: block;
9690
+ --pf-c-jump-links__label--Visibility: visible;
9691
+ }
9672
9692
  }
9693
+ @media (min-width: 1200px) {
9694
+ .pf-c-jump-links.pf-m-expandable-on-xl {
9695
+ --pf-c-jump-links__list--Display: none;
9696
+ --pf-c-jump-links__list--Visibility: hidden;
9697
+ --pf-c-jump-links__toggle--Display: block;
9698
+ --pf-c-jump-links__toggle--Visibility: visible;
9699
+ --pf-c-jump-links__label--Display: none;
9700
+ --pf-c-jump-links__label--Visibility: hidden;
9701
+ }
9673
9702
 
9674
- .pf-c-sidebar__content.pf-m-no-background {
9675
- --pf-c-sidebar__content--BackgroundColor: transparent;
9703
+ .pf-c-jump-links.pf-m-non-expandable-on-xl {
9704
+ --pf-c-jump-links__list--Display: flex;
9705
+ --pf-c-jump-links__list--Visibility: visible;
9706
+ --pf-c-jump-links__toggle--Display: none;
9707
+ --pf-c-jump-links__toggle--Visibility: hidden;
9708
+ --pf-c-jump-links__label--Display: block;
9709
+ --pf-c-jump-links__label--Visibility: visible;
9710
+ }
9676
9711
  }
9712
+ @media (min-width: 1450px) {
9713
+ .pf-c-jump-links.pf-m-expandable-on-2xl {
9714
+ --pf-c-jump-links__list--Display: none;
9715
+ --pf-c-jump-links__list--Visibility: hidden;
9716
+ --pf-c-jump-links__toggle--Display: block;
9717
+ --pf-c-jump-links__toggle--Visibility: visible;
9718
+ --pf-c-jump-links__label--Display: none;
9719
+ --pf-c-jump-links__label--Visibility: hidden;
9720
+ }
9677
9721
 
9678
- .pf-c-sidebar.pf-m-no-background,
9679
- .pf-c-sidebar__panel.pf-m-no-background,
9680
- .pf-c-sidebar__content.pf-m-no-background {
9681
- background-color: transparent;
9722
+ .pf-c-jump-links.pf-m-non-expandable-on-2xl {
9723
+ --pf-c-jump-links__list--Display: flex;
9724
+ --pf-c-jump-links__list--Visibility: visible;
9725
+ --pf-c-jump-links__toggle--Display: none;
9726
+ --pf-c-jump-links__toggle--Visibility: hidden;
9727
+ --pf-c-jump-links__label--Display: block;
9728
+ --pf-c-jump-links__label--Visibility: visible;
9729
+ }
9682
9730
  }
9683
-
9684
- .pf-c-sidebar__panel.pf-m-width-default {
9685
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9731
+ .pf-c-jump-links.pf-m-expanded {
9732
+ --pf-c-jump-links__list--Display: flex;
9733
+ --pf-c-jump-links__list--Visibility: visible;
9734
+ --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links--m-expanded__toggle--MarginBottom);
9735
+ --pf-c-jump-links__toggle-icon--Rotate: var(--pf-c-jump-links--m-expanded__toggle-icon--Rotate);
9736
+ --pf-c-jump-links__toggle-icon--Color: var(--pf-c-jump-links--m-expanded__toggle-icon--Color);
9686
9737
  }
9687
9738
 
9688
- .pf-c-sidebar__panel.pf-m-width-25 {
9689
- --pf-c-sidebar__panel--FlexBasis: 25%;
9739
+ .pf-c-jump-links__list {
9740
+ position: relative;
9741
+ display: var(--pf-c-jump-links__list--Display);
9742
+ flex-direction: var(--pf-c-jump-links__list--FlexDirection);
9743
+ padding-top: var(--pf-c-jump-links__list--PaddingTop);
9744
+ padding-right: var(--pf-c-jump-links__list--PaddingRight);
9745
+ padding-bottom: var(--pf-c-jump-links__list--PaddingBottom);
9746
+ padding-left: var(--pf-c-jump-links__list--PaddingLeft);
9747
+ visibility: var(--pf-c-jump-links__list--Visibility);
9690
9748
  }
9691
9749
 
9692
- .pf-c-sidebar__panel.pf-m-width-33 {
9693
- --pf-c-sidebar__panel--FlexBasis: 33%;
9750
+ .pf-c-jump-links__list::before {
9751
+ position: absolute;
9752
+ top: 0;
9753
+ right: 0;
9754
+ bottom: 0;
9755
+ left: 0;
9756
+ pointer-events: none;
9757
+ content: "";
9758
+ border: solid var(--pf-c-jump-links__list--before--BorderColor);
9759
+ border-width: var(--pf-c-jump-links__list--before--BorderTopWidth) var(--pf-c-jump-links__list--before--BorderRightWidth) var(--pf-c-jump-links__list--before--BorderBottomWidth) var(--pf-c-jump-links__list--before--BorderLeftWidth);
9694
9760
  }
9695
9761
 
9696
- .pf-c-sidebar__panel.pf-m-width-50 {
9697
- --pf-c-sidebar__panel--FlexBasis: 50%;
9762
+ .pf-c-jump-links__list .pf-c-jump-links__list {
9763
+ --pf-c-jump-links__list--PaddingTop: 0;
9764
+ --pf-c-jump-links__list--PaddingBottom: 0;
9765
+ --pf-c-jump-links__link--PaddingTop: var(--pf-c-jump-links__list__list__link--PaddingTop);
9766
+ --pf-c-jump-links__link--PaddingBottom: var(--pf-c-jump-links__list__list__link--PaddingBottom);
9767
+ --pf-c-jump-links__link--PaddingLeft: var(--pf-c-jump-links__list__list__link--PaddingLeft);
9768
+ margin-top: var(--pf-c-jump-links__list__list--MarginTop);
9698
9769
  }
9699
9770
 
9700
- .pf-c-sidebar__panel.pf-m-width-66 {
9701
- --pf-c-sidebar__panel--FlexBasis: 66%;
9771
+ .pf-c-jump-links__link {
9772
+ position: relative;
9773
+ display: flex;
9774
+ flex: 1;
9775
+ padding-top: var(--pf-c-jump-links__link--PaddingTop);
9776
+ padding-right: var(--pf-c-jump-links__link--PaddingRight);
9777
+ padding-bottom: var(--pf-c-jump-links__link--PaddingBottom);
9778
+ padding-left: var(--pf-c-jump-links__link--PaddingLeft);
9779
+ text-decoration: none;
9780
+ outline-offset: var(--pf-c-jump-links__link--OutlineOffset);
9702
9781
  }
9703
9782
 
9704
- .pf-c-sidebar__panel.pf-m-width-75 {
9705
- --pf-c-sidebar__panel--FlexBasis: 75%;
9783
+ .pf-c-jump-links__link:hover {
9784
+ --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--hover__link-text--Color);
9706
9785
  }
9707
9786
 
9708
- .pf-c-sidebar__panel.pf-m-width-100 {
9709
- --pf-c-sidebar__panel--FlexBasis: 100%;
9787
+ .pf-c-jump-links__link:focus {
9788
+ --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--focus__link-text--Color);
9710
9789
  }
9711
9790
 
9712
- @media (min-width: 576px) {
9713
- .pf-c-sidebar__panel.pf-m-width-default-on-sm {
9714
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9715
- }
9791
+ .pf-c-jump-links__link::before {
9792
+ position: absolute;
9793
+ top: 0;
9794
+ right: 0;
9795
+ bottom: 0;
9796
+ left: 0;
9797
+ pointer-events: none;
9798
+ content: "";
9799
+ border-color: var(--pf-c-jump-links__link--before--BorderColor);
9800
+ border-style: solid;
9801
+ border-width: var(--pf-c-jump-links__link--before--BorderTopWidth) var(--pf-c-jump-links__link--before--BorderRightWidth) var(--pf-c-jump-links__link--before--BorderBottomWidth) var(--pf-c-jump-links__link--before--BorderLeftWidth);
9802
+ }
9716
9803
 
9717
- .pf-c-sidebar__panel.pf-m-width-25-on-sm {
9718
- --pf-c-sidebar__panel--FlexBasis: 25%;
9719
- }
9804
+ .pf-c-jump-links__item {
9805
+ --pf-c-jump-links__list--before--BorderColor: transparent;
9806
+ }
9720
9807
 
9721
- .pf-c-sidebar__panel.pf-m-width-33-on-sm {
9722
- --pf-c-sidebar__panel--FlexBasis: 33%;
9723
- }
9808
+ .pf-c-jump-links__item.pf-m-current > .pf-c-jump-links__link {
9809
+ --pf-c-jump-links__link--before--BorderTopWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderTopWidth);
9810
+ --pf-c-jump-links__link--before--BorderLeftWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderLeftWidth);
9811
+ --pf-c-jump-links__link--before--BorderColor: var(--pf-c-jump-links__item--m-current__link--before--BorderColor);
9812
+ --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__item--m-current__link-text--Color);
9813
+ }
9724
9814
 
9725
- .pf-c-sidebar__panel.pf-m-width-50-on-sm {
9726
- --pf-c-sidebar__panel--FlexBasis: 50%;
9727
- }
9815
+ .pf-c-jump-links__link-text {
9816
+ color: var(--pf-c-jump-links__link-text--Color);
9817
+ }
9728
9818
 
9729
- .pf-c-sidebar__panel.pf-m-width-66-on-sm {
9730
- --pf-c-sidebar__panel--FlexBasis: 66%;
9731
- }
9819
+ .pf-c-jump-links__label {
9820
+ display: var(--pf-c-jump-links__label--Display);
9821
+ margin-bottom: var(--pf-c-jump-links__label--MarginBottom);
9822
+ visibility: var(--pf-c-jump-links__label--Visibility);
9823
+ }
9732
9824
 
9733
- .pf-c-sidebar__panel.pf-m-width-75-on-sm {
9734
- --pf-c-sidebar__panel--FlexBasis: 75%;
9735
- }
9825
+ .pf-c-jump-links__main {
9826
+ display: flex;
9827
+ flex-direction: column;
9828
+ }
9736
9829
 
9737
- .pf-c-sidebar__panel.pf-m-width-100-on-sm {
9738
- --pf-c-sidebar__panel--FlexBasis: 100%;
9739
- }
9830
+ .pf-c-jump-links__toggle {
9831
+ display: var(--pf-c-jump-links__toggle--Display);
9832
+ margin-top: var(--pf-c-jump-links__toggle--MarginTop);
9833
+ margin-bottom: var(--pf-c-jump-links__toggle--MarginBottom);
9834
+ margin-left: var(--pf-c-jump-links__toggle--MarginLeft);
9835
+ visibility: var(--pf-c-jump-links__toggle--Visibility);
9740
9836
  }
9741
- @media (min-width: 768px) {
9742
- .pf-c-sidebar__panel.pf-m-width-default-on-md {
9743
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9744
- }
9745
9837
 
9746
- .pf-c-sidebar__panel.pf-m-width-25-on-md {
9747
- --pf-c-sidebar__panel--FlexBasis: 25%;
9748
- }
9838
+ .pf-c-jump-links__toggle .pf-c-button {
9839
+ display: flex;
9840
+ align-items: center;
9841
+ }
9749
9842
 
9750
- .pf-c-sidebar__panel.pf-m-width-33-on-md {
9751
- --pf-c-sidebar__panel--FlexBasis: 33%;
9752
- }
9843
+ .pf-c-jump-links__toggle-icon {
9844
+ display: inline-block;
9845
+ color: var(--pf-c-jump-links__toggle-icon--Color);
9846
+ transition: var(--pf-c-jump-links__toggle-icon--Transition);
9847
+ transform: rotate(var(--pf-c-jump-links__toggle-icon--Rotate));
9848
+ }
9753
9849
 
9754
- .pf-c-sidebar__panel.pf-m-width-50-on-md {
9755
- --pf-c-sidebar__panel--FlexBasis: 50%;
9756
- }
9850
+ .pf-c-jump-links__toggle-text {
9851
+ margin-left: var(--pf-c-jump-links__toggle-text--MarginLeft);
9852
+ color: var(--pf-c-jump-links__toggle-text--Color);
9853
+ }
9757
9854
 
9758
- .pf-c-sidebar__panel.pf-m-width-66-on-md {
9759
- --pf-c-sidebar__panel--FlexBasis: 66%;
9760
- }
9855
+ .pf-c-sidebar {
9856
+ --pf-c-sidebar--BackgroundColor: var(--pf-global--BackgroundColor--100);
9857
+ --pf-c-sidebar__main--FlexDirection: column;
9858
+ --pf-c-sidebar__main--md--FlexDirection: row;
9859
+ --pf-c-sidebar__main--AlignItems: stretch;
9860
+ --pf-c-sidebar__main--md--AlignItems: start;
9861
+ --pf-c-sidebar__main--child--MarginTop: 0;
9862
+ --pf-c-sidebar__main--child--MarginLeft: 0;
9863
+ --pf-c-sidebar--m-gutter__main--Gap: var(--pf-global--spacer--md);
9864
+ --pf-c-sidebar--m-gutter__main--xl--Gap: var(--pf-global--spacer--lg);
9865
+ --pf-c-sidebar--m-panel-right__panel--Order: 0;
9866
+ --pf-c-sidebar--m-panel-right__panel--md--Order: 1;
9867
+ --pf-c-sidebar--m-stack__main--FlexDirection: column;
9868
+ --pf-c-sidebar--m-stack__main--AlignItems: stretch;
9869
+ --pf-c-sidebar--m-stack__panel--Position: sticky;
9870
+ --pf-c-sidebar--m-stack__panel--Top: 0;
9871
+ --pf-c-sidebar--m-stack__panel--BoxShadow: var(--pf-c-sidebar__panel--BoxShadow--base);
9872
+ --pf-c-sidebar--m-stack--m-panel-right__panel--Order: 0;
9873
+ --pf-c-sidebar--m-split__main--AlignItems: start;
9874
+ --pf-c-sidebar--m-split__main--FlexDirection: row;
9875
+ --pf-c-sidebar--m-split__panel--Position: static;
9876
+ --pf-c-sidebar--m-split__panel--Top: auto;
9877
+ --pf-c-sidebar--m-split--m-panel-right__panel--Order: 1;
9878
+ --pf-c-sidebar__panel--FlexBasis--base: auto;
9879
+ --pf-c-sidebar__panel--BoxShadow--base: 0 0.25rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
9880
+ --pf-c-sidebar__panel--BoxShadow: var(--pf-c-sidebar__panel--BoxShadow--base);
9881
+ --pf-c-sidebar__panel--Top: 0;
9882
+ --pf-c-sidebar__panel--md--Top: auto;
9883
+ --pf-c-sidebar__panel--Position: sticky;
9884
+ --pf-c-sidebar__panel--md--Position: static;
9885
+ --pf-c-sidebar__panel--FlexBasis-base: auto;
9886
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis-base);
9887
+ --pf-c-sidebar__panel--md--FlexBasis: 15.625rem;
9888
+ --pf-c-sidebar__panel--m-split--FlexBasis: 15.625rem;
9889
+ --pf-c-sidebar__panel--m-stack--FlexBasis: auto;
9890
+ --pf-c-sidebar__panel--ZIndex: var(--pf-global--ZIndex--xs);
9891
+ --pf-c-sidebar__panel--Order: 0;
9892
+ --pf-c-sidebar__panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
9893
+ --pf-c-sidebar__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
9894
+ --pf-c-sidebar__panel--m-sticky--Top: 0;
9895
+ --pf-c-sidebar__panel--m-sticky--Position: sticky;
9896
+ height: 100%;
9897
+ }
9761
9898
 
9762
- .pf-c-sidebar__panel.pf-m-width-75-on-md {
9763
- --pf-c-sidebar__panel--FlexBasis: 75%;
9899
+ @media (min-width: 768px) {
9900
+ .pf-c-sidebar {
9901
+ --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar__main--md--FlexDirection);
9902
+ --pf-c-sidebar__panel--BoxShadow: none;
9903
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--md--FlexBasis);
9904
+ --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar__main--md--AlignItems);
9905
+ --pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--md--Top);
9906
+ --pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--md--Position);
9764
9907
  }
9765
-
9766
- .pf-c-sidebar__panel.pf-m-width-100-on-md {
9767
- --pf-c-sidebar__panel--FlexBasis: 100%;
9908
+ }
9909
+ @media (min-width: 1200px) {
9910
+ .pf-c-sidebar {
9911
+ --pf-c-sidebar--m-gutter__main--Gap: var(--pf-c-sidebar--m-gutter__main--xl--Gap);
9912
+ }
9913
+ }
9914
+ .pf-c-sidebar.pf-m-gutter {
9915
+ --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
9916
+ --pf-c-sidebar__main--child--MarginLeft: 0;
9917
+ }
9918
+
9919
+ .pf-c-sidebar.pf-m-gutter > .pf-c-sidebar__main > * + * {
9920
+ margin-top: var(--pf-c-sidebar__main--child--MarginTop);
9921
+ margin-left: var(--pf-c-sidebar__main--child--MarginLeft);
9922
+ }
9923
+
9924
+ @media (min-width: 768px) {
9925
+ .pf-c-sidebar.pf-m-gutter {
9926
+ --pf-c-sidebar__main--child--MarginTop: 0;
9927
+ --pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
9928
+ }
9929
+ }
9930
+ .pf-c-sidebar.pf-m-panel-right {
9931
+ --pf-c-sidebar__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--Order);
9932
+ }
9933
+
9934
+ @media (min-width: 768px) {
9935
+ .pf-c-sidebar.pf-m-panel-right {
9936
+ --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--md--Order);
9937
+ }
9938
+ }
9939
+ .pf-c-sidebar.pf-m-stack {
9940
+ --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-stack__main--FlexDirection);
9941
+ --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-stack__main--AlignItems);
9942
+ --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
9943
+ --pf-c-sidebar__main--child--MarginLeft: 0;
9944
+ --pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-stack__panel--Position);
9945
+ --pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-stack__panel--Top);
9946
+ --pf-c-sidebar__panel--BoxShadow: var(--pf-c-sidebar--m-stack__panel--BoxShadow);
9947
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-stack--FlexBasis);
9948
+ --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-stack--m-panel-right__panel--Order);
9949
+ }
9950
+
9951
+ .pf-c-sidebar.pf-m-split {
9952
+ --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-split__main--FlexDirection);
9953
+ --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-split__main--AlignItems);
9954
+ --pf-c-sidebar__main--child--MarginTop: 0;
9955
+ --pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
9956
+ --pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-split__panel--Position);
9957
+ --pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-split__panel--Top);
9958
+ --pf-c-sidebar__panel--BoxShadow: none;
9959
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-split--FlexBasis);
9960
+ --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-split--m-panel-right__panel--Order);
9961
+ }
9962
+
9963
+ .pf-c-sidebar__main {
9964
+ display: flex;
9965
+ flex-direction: var(--pf-c-sidebar__main--FlexDirection);
9966
+ align-items: var(--pf-c-sidebar__main--AlignItems);
9967
+ }
9968
+
9969
+ .pf-c-sidebar__panel {
9970
+ position: var(--pf-c-sidebar__panel--Position);
9971
+ top: var(--pf-c-sidebar__panel--Top);
9972
+ z-index: var(--pf-c-sidebar__panel--ZIndex);
9973
+ flex-shrink: 0;
9974
+ flex-basis: var(--pf-c-sidebar__panel--FlexBasis);
9975
+ order: var(--pf-c-sidebar__panel--Order);
9976
+ background-color: var(--pf-c-sidebar__panel--BackgroundColor);
9977
+ box-shadow: var(--pf-c-sidebar__panel--BoxShadow);
9978
+ }
9979
+
9980
+ .pf-c-sidebar__panel.pf-m-sticky {
9981
+ --pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--m-sticky--Position);
9982
+ --pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--m-sticky--Top);
9983
+ }
9984
+
9985
+ .pf-c-sidebar__panel.pf-m-static {
9986
+ --pf-c-sidebar__panel--Position: static;
9987
+ --pf-c-sidebar__panel--Top: auto;
9988
+ }
9989
+
9990
+ .pf-c-sidebar__content {
9991
+ flex-grow: 1;
9992
+ background-color: var(--pf-c-sidebar__content--BackgroundColor);
9993
+ }
9994
+
9995
+ .pf-c-sidebar__content.pf-m-no-background {
9996
+ --pf-c-sidebar__content--BackgroundColor: transparent;
9997
+ }
9998
+
9999
+ .pf-c-sidebar.pf-m-no-background,
10000
+ .pf-c-sidebar__panel.pf-m-no-background,
10001
+ .pf-c-sidebar__content.pf-m-no-background {
10002
+ background-color: transparent;
10003
+ }
10004
+
10005
+ .pf-c-sidebar__panel.pf-m-width-default {
10006
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10007
+ }
10008
+
10009
+ .pf-c-sidebar__panel.pf-m-width-25 {
10010
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10011
+ }
10012
+
10013
+ .pf-c-sidebar__panel.pf-m-width-33 {
10014
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10015
+ }
10016
+
10017
+ .pf-c-sidebar__panel.pf-m-width-50 {
10018
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10019
+ }
10020
+
10021
+ .pf-c-sidebar__panel.pf-m-width-66 {
10022
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10023
+ }
10024
+
10025
+ .pf-c-sidebar__panel.pf-m-width-75 {
10026
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10027
+ }
10028
+
10029
+ .pf-c-sidebar__panel.pf-m-width-100 {
10030
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10031
+ }
10032
+
10033
+ @media (min-width: 576px) {
10034
+ .pf-c-sidebar__panel.pf-m-width-default-on-sm {
10035
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10036
+ }
10037
+
10038
+ .pf-c-sidebar__panel.pf-m-width-25-on-sm {
10039
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10040
+ }
10041
+
10042
+ .pf-c-sidebar__panel.pf-m-width-33-on-sm {
10043
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10044
+ }
10045
+
10046
+ .pf-c-sidebar__panel.pf-m-width-50-on-sm {
10047
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10048
+ }
10049
+
10050
+ .pf-c-sidebar__panel.pf-m-width-66-on-sm {
10051
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10052
+ }
10053
+
10054
+ .pf-c-sidebar__panel.pf-m-width-75-on-sm {
10055
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10056
+ }
10057
+
10058
+ .pf-c-sidebar__panel.pf-m-width-100-on-sm {
10059
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10060
+ }
10061
+ }
10062
+ @media (min-width: 768px) {
10063
+ .pf-c-sidebar__panel.pf-m-width-default-on-md {
10064
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10065
+ }
10066
+
10067
+ .pf-c-sidebar__panel.pf-m-width-25-on-md {
10068
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10069
+ }
10070
+
10071
+ .pf-c-sidebar__panel.pf-m-width-33-on-md {
10072
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10073
+ }
10074
+
10075
+ .pf-c-sidebar__panel.pf-m-width-50-on-md {
10076
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10077
+ }
10078
+
10079
+ .pf-c-sidebar__panel.pf-m-width-66-on-md {
10080
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10081
+ }
10082
+
10083
+ .pf-c-sidebar__panel.pf-m-width-75-on-md {
10084
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10085
+ }
10086
+
10087
+ .pf-c-sidebar__panel.pf-m-width-100-on-md {
10088
+ --pf-c-sidebar__panel--FlexBasis: 100%;
9768
10089
  }
9769
10090
  }
9770
10091
  @media (min-width: 992px) {
@@ -9854,327 +10175,6 @@ label.pf-c-input-group__text {
9854
10175
  --pf-c-sidebar__panel--FlexBasis: 100%;
9855
10176
  }
9856
10177
  }
9857
- .pf-c-jump-links {
9858
- --pf-c-jump-links__list--Display: flex;
9859
- --pf-c-jump-links__list--Visibility: visible;
9860
- --pf-c-jump-links__list--PaddingTop: 0;
9861
- --pf-c-jump-links__list--PaddingRight: var(--pf-global--spacer--md);
9862
- --pf-c-jump-links__list--PaddingBottom: 0;
9863
- --pf-c-jump-links__list--PaddingLeft: var(--pf-global--spacer--md);
9864
- --pf-c-jump-links--m-vertical__list--PaddingTop: var(--pf-global--spacer--md);
9865
- --pf-c-jump-links--m-vertical__list--PaddingRight: 0;
9866
- --pf-c-jump-links--m-vertical__list--PaddingBottom: var(--pf-global--spacer--md);
9867
- --pf-c-jump-links--m-vertical__list--PaddingLeft: 0;
9868
- --pf-c-jump-links__list--FlexDirection: row;
9869
- --pf-c-jump-links--m-vertical__list--FlexDirection: column;
9870
- --pf-c-jump-links__list--before--BorderColor: var(--pf-global--BorderColor--100);
9871
- --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-global--BorderWidth--sm);
9872
- --pf-c-jump-links__list--before--BorderRightWidth: 0;
9873
- --pf-c-jump-links__list--before--BorderBottomWidth: 0;
9874
- --pf-c-jump-links__list--before--BorderLeftWidth: 0;
9875
- --pf-c-jump-links--m-vertical__list--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
9876
- --pf-c-jump-links--m-vertical__list--before--BorderTopWidth: 0;
9877
- --pf-c-jump-links__list__list--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
9878
- --pf-c-jump-links__link--PaddingTop: var(--pf-global--spacer--md);
9879
- --pf-c-jump-links__link--PaddingRight: var(--pf-global--spacer--md);
9880
- --pf-c-jump-links__link--PaddingBottom: var(--pf-global--spacer--md);
9881
- --pf-c-jump-links__link--PaddingLeft: var(--pf-global--spacer--md);
9882
- --pf-c-jump-links__list__list__link--PaddingTop: var(--pf-global--spacer--sm);
9883
- --pf-c-jump-links__list__list__link--PaddingLeft: var(--pf-global--spacer--lg);
9884
- --pf-c-jump-links__list__list__link--PaddingBottom: var(--pf-global--spacer--sm);
9885
- --pf-c-jump-links__link--OutlineOffset: calc(-1 * var(--pf-global--spacer--sm));
9886
- --pf-c-jump-links__link--before--BorderTopWidth: 0;
9887
- --pf-c-jump-links__link--before--BorderRightWidth: 0;
9888
- --pf-c-jump-links__link--before--BorderBottomWidth: 0;
9889
- --pf-c-jump-links__link--before--BorderLeftWidth: 0;
9890
- --pf-c-jump-links__link--before--BorderColor: transparent;
9891
- --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-global--BorderWidth--lg);
9892
- --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: 0;
9893
- --pf-c-jump-links__item--m-current__link--before--BorderColor: var(--pf-global--primary-color--100);
9894
- --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth: 0;
9895
- --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth: var(--pf-global--BorderWidth--lg);
9896
- --pf-c-jump-links__link-text--Color: var(--pf-global--Color--200);
9897
- --pf-c-jump-links__link--hover__link-text--Color: var(--pf-global--Color--100);
9898
- --pf-c-jump-links__link--focus__link-text--Color: var(--pf-global--Color--100);
9899
- --pf-c-jump-links__item--m-current__link-text--Color: var(--pf-global--Color--100);
9900
- --pf-c-jump-links__label--MarginBottom: var(--pf-global--spacer--md);
9901
- --pf-c-jump-links__label--Display: block;
9902
- --pf-c-jump-links__label--Visibility: visible;
9903
- --pf-c-jump-links__toggle--MarginTop: calc(-1 * var(--pf-global--spacer--form-element));
9904
- --pf-c-jump-links__toggle--MarginBottom--base: calc(-1 * var(--pf-global--spacer--form-element));
9905
- --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links__toggle--MarginBottom--base);
9906
- --pf-c-jump-links--m-expanded__toggle--MarginBottom: calc(var(--pf-c-jump-links__toggle--MarginBottom--base) + var(--pf-global--spacer--md));
9907
- --pf-c-jump-links__toggle--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
9908
- --pf-c-jump-links__toggle--Display: none;
9909
- --pf-c-jump-links__toggle--Visibility: hidden;
9910
- --pf-c-jump-links__toggle-icon--Color: currentcolor;
9911
- --pf-c-jump-links__toggle-icon--Transition: var(--pf-global--Transition);
9912
- --pf-c-jump-links__toggle-icon--Rotate: 0;
9913
- --pf-c-jump-links--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
9914
- --pf-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
9915
- --pf-c-jump-links__toggle-text--MarginLeft: var(--pf-global--spacer--md);
9916
- --pf-c-jump-links__toggle-text--Color: var(--pf-global--Color--100);
9917
- display: flex;
9918
- }
9919
-
9920
- .pf-c-jump-links.pf-m-center {
9921
- justify-content: center;
9922
- }
9923
-
9924
- .pf-c-jump-links.pf-m-center .pf-c-jump-links__main {
9925
- align-items: center;
9926
- }
9927
-
9928
- .pf-c-jump-links.pf-m-vertical, .pf-c-jump-links.pf-m-expandable {
9929
- --pf-c-jump-links__list--PaddingTop: var(--pf-c-jump-links--m-vertical__list--PaddingTop);
9930
- --pf-c-jump-links__list--PaddingRight: var(--pf-c-jump-links--m-vertical__list--PaddingRight);
9931
- --pf-c-jump-links__list--PaddingBottom: var(--pf-c-jump-links--m-vertical__list--PaddingBottom);
9932
- --pf-c-jump-links__list--PaddingLeft: var(--pf-c-jump-links--m-vertical__list--PaddingLeft);
9933
- --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderTopWidth);
9934
- --pf-c-jump-links__list--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderLeftWidth);
9935
- --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth);
9936
- --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth);
9937
- --pf-c-jump-links__list--FlexDirection: var(--pf-c-jump-links--m-vertical__list--FlexDirection);
9938
- flex-direction: column;
9939
- }
9940
-
9941
- .pf-c-jump-links.pf-m-expandable {
9942
- --pf-c-jump-links__list--Display: none;
9943
- --pf-c-jump-links__list--Visibility: hidden;
9944
- --pf-c-jump-links__toggle--Display: block;
9945
- --pf-c-jump-links__toggle--Visibility: visible;
9946
- --pf-c-jump-links__label--Display: none;
9947
- --pf-c-jump-links__label--Visibility: hidden;
9948
- }
9949
-
9950
- .pf-c-jump-links.pf-m-non-expandable {
9951
- --pf-c-jump-links__list--Display: flex;
9952
- --pf-c-jump-links__list--Visibility: visible;
9953
- --pf-c-jump-links__toggle--Display: none;
9954
- --pf-c-jump-links__toggle--Visibility: hidden;
9955
- --pf-c-jump-links__label--Display: block;
9956
- --pf-c-jump-links__label--Visibility: visible;
9957
- }
9958
-
9959
- @media (min-width: 576px) {
9960
- .pf-c-jump-links.pf-m-expandable-on-sm {
9961
- --pf-c-jump-links__list--Display: none;
9962
- --pf-c-jump-links__list--Visibility: hidden;
9963
- --pf-c-jump-links__toggle--Display: block;
9964
- --pf-c-jump-links__toggle--Visibility: visible;
9965
- --pf-c-jump-links__label--Display: none;
9966
- --pf-c-jump-links__label--Visibility: hidden;
9967
- }
9968
-
9969
- .pf-c-jump-links.pf-m-non-expandable-on-sm {
9970
- --pf-c-jump-links__list--Display: flex;
9971
- --pf-c-jump-links__list--Visibility: visible;
9972
- --pf-c-jump-links__toggle--Display: none;
9973
- --pf-c-jump-links__toggle--Visibility: hidden;
9974
- --pf-c-jump-links__label--Display: block;
9975
- --pf-c-jump-links__label--Visibility: visible;
9976
- }
9977
- }
9978
- @media (min-width: 768px) {
9979
- .pf-c-jump-links.pf-m-expandable-on-md {
9980
- --pf-c-jump-links__list--Display: none;
9981
- --pf-c-jump-links__list--Visibility: hidden;
9982
- --pf-c-jump-links__toggle--Display: block;
9983
- --pf-c-jump-links__toggle--Visibility: visible;
9984
- --pf-c-jump-links__label--Display: none;
9985
- --pf-c-jump-links__label--Visibility: hidden;
9986
- }
9987
-
9988
- .pf-c-jump-links.pf-m-non-expandable-on-md {
9989
- --pf-c-jump-links__list--Display: flex;
9990
- --pf-c-jump-links__list--Visibility: visible;
9991
- --pf-c-jump-links__toggle--Display: none;
9992
- --pf-c-jump-links__toggle--Visibility: hidden;
9993
- --pf-c-jump-links__label--Display: block;
9994
- --pf-c-jump-links__label--Visibility: visible;
9995
- }
9996
- }
9997
- @media (min-width: 992px) {
9998
- .pf-c-jump-links.pf-m-expandable-on-lg {
9999
- --pf-c-jump-links__list--Display: none;
10000
- --pf-c-jump-links__list--Visibility: hidden;
10001
- --pf-c-jump-links__toggle--Display: block;
10002
- --pf-c-jump-links__toggle--Visibility: visible;
10003
- --pf-c-jump-links__label--Display: none;
10004
- --pf-c-jump-links__label--Visibility: hidden;
10005
- }
10006
-
10007
- .pf-c-jump-links.pf-m-non-expandable-on-lg {
10008
- --pf-c-jump-links__list--Display: flex;
10009
- --pf-c-jump-links__list--Visibility: visible;
10010
- --pf-c-jump-links__toggle--Display: none;
10011
- --pf-c-jump-links__toggle--Visibility: hidden;
10012
- --pf-c-jump-links__label--Display: block;
10013
- --pf-c-jump-links__label--Visibility: visible;
10014
- }
10015
- }
10016
- @media (min-width: 1200px) {
10017
- .pf-c-jump-links.pf-m-expandable-on-xl {
10018
- --pf-c-jump-links__list--Display: none;
10019
- --pf-c-jump-links__list--Visibility: hidden;
10020
- --pf-c-jump-links__toggle--Display: block;
10021
- --pf-c-jump-links__toggle--Visibility: visible;
10022
- --pf-c-jump-links__label--Display: none;
10023
- --pf-c-jump-links__label--Visibility: hidden;
10024
- }
10025
-
10026
- .pf-c-jump-links.pf-m-non-expandable-on-xl {
10027
- --pf-c-jump-links__list--Display: flex;
10028
- --pf-c-jump-links__list--Visibility: visible;
10029
- --pf-c-jump-links__toggle--Display: none;
10030
- --pf-c-jump-links__toggle--Visibility: hidden;
10031
- --pf-c-jump-links__label--Display: block;
10032
- --pf-c-jump-links__label--Visibility: visible;
10033
- }
10034
- }
10035
- @media (min-width: 1450px) {
10036
- .pf-c-jump-links.pf-m-expandable-on-2xl {
10037
- --pf-c-jump-links__list--Display: none;
10038
- --pf-c-jump-links__list--Visibility: hidden;
10039
- --pf-c-jump-links__toggle--Display: block;
10040
- --pf-c-jump-links__toggle--Visibility: visible;
10041
- --pf-c-jump-links__label--Display: none;
10042
- --pf-c-jump-links__label--Visibility: hidden;
10043
- }
10044
-
10045
- .pf-c-jump-links.pf-m-non-expandable-on-2xl {
10046
- --pf-c-jump-links__list--Display: flex;
10047
- --pf-c-jump-links__list--Visibility: visible;
10048
- --pf-c-jump-links__toggle--Display: none;
10049
- --pf-c-jump-links__toggle--Visibility: hidden;
10050
- --pf-c-jump-links__label--Display: block;
10051
- --pf-c-jump-links__label--Visibility: visible;
10052
- }
10053
- }
10054
- .pf-c-jump-links.pf-m-expanded {
10055
- --pf-c-jump-links__list--Display: flex;
10056
- --pf-c-jump-links__list--Visibility: visible;
10057
- --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links--m-expanded__toggle--MarginBottom);
10058
- --pf-c-jump-links__toggle-icon--Rotate: var(--pf-c-jump-links--m-expanded__toggle-icon--Rotate);
10059
- --pf-c-jump-links__toggle-icon--Color: var(--pf-c-jump-links--m-expanded__toggle-icon--Color);
10060
- }
10061
-
10062
- .pf-c-jump-links__list {
10063
- position: relative;
10064
- display: var(--pf-c-jump-links__list--Display);
10065
- flex-direction: var(--pf-c-jump-links__list--FlexDirection);
10066
- padding-top: var(--pf-c-jump-links__list--PaddingTop);
10067
- padding-right: var(--pf-c-jump-links__list--PaddingRight);
10068
- padding-bottom: var(--pf-c-jump-links__list--PaddingBottom);
10069
- padding-left: var(--pf-c-jump-links__list--PaddingLeft);
10070
- visibility: var(--pf-c-jump-links__list--Visibility);
10071
- }
10072
-
10073
- .pf-c-jump-links__list::before {
10074
- position: absolute;
10075
- top: 0;
10076
- right: 0;
10077
- bottom: 0;
10078
- left: 0;
10079
- pointer-events: none;
10080
- content: "";
10081
- border: solid var(--pf-c-jump-links__list--before--BorderColor);
10082
- border-width: var(--pf-c-jump-links__list--before--BorderTopWidth) var(--pf-c-jump-links__list--before--BorderRightWidth) var(--pf-c-jump-links__list--before--BorderBottomWidth) var(--pf-c-jump-links__list--before--BorderLeftWidth);
10083
- }
10084
-
10085
- .pf-c-jump-links__list .pf-c-jump-links__list {
10086
- --pf-c-jump-links__list--PaddingTop: 0;
10087
- --pf-c-jump-links__list--PaddingBottom: 0;
10088
- --pf-c-jump-links__link--PaddingTop: var(--pf-c-jump-links__list__list__link--PaddingTop);
10089
- --pf-c-jump-links__link--PaddingBottom: var(--pf-c-jump-links__list__list__link--PaddingBottom);
10090
- --pf-c-jump-links__link--PaddingLeft: var(--pf-c-jump-links__list__list__link--PaddingLeft);
10091
- margin-top: var(--pf-c-jump-links__list__list--MarginTop);
10092
- }
10093
-
10094
- .pf-c-jump-links__link {
10095
- position: relative;
10096
- display: flex;
10097
- flex: 1;
10098
- padding-top: var(--pf-c-jump-links__link--PaddingTop);
10099
- padding-right: var(--pf-c-jump-links__link--PaddingRight);
10100
- padding-bottom: var(--pf-c-jump-links__link--PaddingBottom);
10101
- padding-left: var(--pf-c-jump-links__link--PaddingLeft);
10102
- text-decoration: none;
10103
- outline-offset: var(--pf-c-jump-links__link--OutlineOffset);
10104
- }
10105
-
10106
- .pf-c-jump-links__link:hover {
10107
- --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--hover__link-text--Color);
10108
- }
10109
-
10110
- .pf-c-jump-links__link:focus {
10111
- --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--focus__link-text--Color);
10112
- }
10113
-
10114
- .pf-c-jump-links__link::before {
10115
- position: absolute;
10116
- top: 0;
10117
- right: 0;
10118
- bottom: 0;
10119
- left: 0;
10120
- pointer-events: none;
10121
- content: "";
10122
- border-color: var(--pf-c-jump-links__link--before--BorderColor);
10123
- border-style: solid;
10124
- border-width: var(--pf-c-jump-links__link--before--BorderTopWidth) var(--pf-c-jump-links__link--before--BorderRightWidth) var(--pf-c-jump-links__link--before--BorderBottomWidth) var(--pf-c-jump-links__link--before--BorderLeftWidth);
10125
- }
10126
-
10127
- .pf-c-jump-links__item {
10128
- --pf-c-jump-links__list--before--BorderColor: transparent;
10129
- }
10130
-
10131
- .pf-c-jump-links__item.pf-m-current > .pf-c-jump-links__link {
10132
- --pf-c-jump-links__link--before--BorderTopWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderTopWidth);
10133
- --pf-c-jump-links__link--before--BorderLeftWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderLeftWidth);
10134
- --pf-c-jump-links__link--before--BorderColor: var(--pf-c-jump-links__item--m-current__link--before--BorderColor);
10135
- --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__item--m-current__link-text--Color);
10136
- }
10137
-
10138
- .pf-c-jump-links__link-text {
10139
- color: var(--pf-c-jump-links__link-text--Color);
10140
- }
10141
-
10142
- .pf-c-jump-links__label {
10143
- display: var(--pf-c-jump-links__label--Display);
10144
- margin-bottom: var(--pf-c-jump-links__label--MarginBottom);
10145
- visibility: var(--pf-c-jump-links__label--Visibility);
10146
- }
10147
-
10148
- .pf-c-jump-links__main {
10149
- display: flex;
10150
- flex-direction: column;
10151
- }
10152
-
10153
- .pf-c-jump-links__toggle {
10154
- display: var(--pf-c-jump-links__toggle--Display);
10155
- margin-top: var(--pf-c-jump-links__toggle--MarginTop);
10156
- margin-bottom: var(--pf-c-jump-links__toggle--MarginBottom);
10157
- margin-left: var(--pf-c-jump-links__toggle--MarginLeft);
10158
- visibility: var(--pf-c-jump-links__toggle--Visibility);
10159
- }
10160
-
10161
- .pf-c-jump-links__toggle .pf-c-button {
10162
- display: flex;
10163
- align-items: center;
10164
- }
10165
-
10166
- .pf-c-jump-links__toggle-icon {
10167
- display: inline-block;
10168
- color: var(--pf-c-jump-links__toggle-icon--Color);
10169
- transition: var(--pf-c-jump-links__toggle-icon--Transition);
10170
- transform: rotate(var(--pf-c-jump-links__toggle-icon--Rotate));
10171
- }
10172
-
10173
- .pf-c-jump-links__toggle-text {
10174
- margin-left: var(--pf-c-jump-links__toggle-text--MarginLeft);
10175
- color: var(--pf-c-jump-links__toggle-text--Color);
10176
- }
10177
-
10178
10178
  .pf-c-label {
10179
10179
  --pf-c-label--PaddingTop: var(--pf-global--spacer--xs);
10180
10180
  --pf-c-label--PaddingRight: var(--pf-global--spacer--sm);
@@ -13539,692 +13539,6 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
13539
13539
  margin: 0;
13540
13540
  }
13541
13541
 
13542
- .pf-c-notification-badge {
13543
- --pf-c-notification-badge--PaddingTop: var(--pf-global--spacer--form-element);
13544
- --pf-c-notification-badge--PaddingRight: var(--pf-global--spacer--md);
13545
- --pf-c-notification-badge--PaddingBottom: var(--pf-global--spacer--form-element);
13546
- --pf-c-notification-badge--PaddingLeft: var(--pf-global--spacer--md);
13547
- --pf-c-notification-badge--MarginTop: calc(-1 * var(--pf-global--spacer--form-element));
13548
- --pf-c-notification-badge--MarginRight: calc(-1 * var(--pf-global--spacer--md));
13549
- --pf-c-notification-badge--MarginBottom: calc(-1 * var(--pf-global--spacer--form-element));
13550
- --pf-c-notification-badge--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
13551
- --pf-c-notification-badge--after--BorderColor: transparent;
13552
- --pf-c-notification-badge--after--BorderRadius: var(--pf-global--BorderRadius--sm);
13553
- --pf-c-notification-badge--after--BorderWidth: 0;
13554
- --pf-c-notification-badge--after--Top: 0;
13555
- --pf-c-notification-badge--after--Right: 0;
13556
- --pf-c-notification-badge--after--Width: auto;
13557
- --pf-c-notification-badge--after--Height: auto;
13558
- --pf-c-notification-badge--after--BackgroundColor: transparent;
13559
- --pf-c-notification-badge--after--TranslateX: 0;
13560
- --pf-c-notification-badge--after--TranslateY: 0;
13561
- --pf-c-notification-badge__i--Width: auto;
13562
- --pf-c-notification-badge__i--Height: auto;
13563
- --pf-c-notification-badge--m-read--after--BorderColor: transparent;
13564
- --pf-c-notification-badge--m-read--after--BackgroundColor: transparent;
13565
- --pf-c-notification-badge--m-read--m-expanded--after--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
13566
- --pf-c-notification-badge--m-unread--Color: var(--pf-global--Color--light-100);
13567
- --pf-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-global--active-color--100);
13568
- --pf-c-notification-badge--m-unread--hover--after--BackgroundColor: var(--pf-global--primary-color--200);
13569
- --pf-c-notification-badge--m-unread--m-expanded--after--BackgroundColor: var(--pf-global--primary-color--200);
13570
- --pf-c-notification-badge--m-attention--Color: var(--pf-global--Color--light-100);
13571
- --pf-c-notification-badge--m-attention--after--BackgroundColor: var(--pf-global--danger-color--100);
13572
- --pf-c-notification-badge--m-attention--hover--after--BackgroundColor: var(--pf-global--danger-color--200);
13573
- --pf-c-notification-badge--m-attention--m-expanded--after--BackgroundColor: var(--pf-global--danger-color--200);
13574
- --pf-c-notification-badge__count--MarginLeft: var(--pf-global--spacer--xs);
13575
- --pf-c-notification-badge--pf-icon-attention-bell--LineHeight: var(--pf-global--LineHeight--sm);
13576
- position: relative;
13577
- display: inline-block;
13578
- padding: var(--pf-c-notification-badge--PaddingTop) var(--pf-c-notification-badge--PaddingRight) var(--pf-c-notification-badge--PaddingBottom) var(--pf-c-notification-badge--PaddingLeft);
13579
- margin: var(--pf-c-notification-badge--MarginTop) var(--pf-c-notification-badge--MarginRight) var(--pf-c-notification-badge--MarginBottom) var(--pf-c-notification-badge--MarginLeft);
13580
- background-color: var(--pf-c-notification-badge--after--BackgroundColor);
13581
- border-radius: var(--pf-c-notification-badge--after--BorderRadius);
13582
- }
13583
-
13584
- .pf-c-notification-badge::before {
13585
- position: absolute;
13586
- top: var(--pf-c-notification-badge--after--Top);
13587
- right: var(--pf-c-notification-badge--after--Right);
13588
- bottom: 0;
13589
- left: 0;
13590
- width: var(--pf-c-notification-badge--after--Width);
13591
- height: var(--pf-c-notification-badge--after--Height);
13592
- content: "";
13593
- border: var(--pf-c-notification-badge--after--BorderWidth) solid var(--pf-c-notification-badge--after--BorderColor);
13594
- border-radius: var(--pf-c-notification-badge--after--BorderRadius);
13595
- transform: translate(var(--pf-c-notification-badge--after--TranslateX), var(--pf-c-notification-badge--after--TranslateY));
13596
- }
13597
-
13598
- .pf-c-notification-badge > i {
13599
- width: var(--pf-c-notification-badge__i--Width);
13600
- height: var(--pf-c-notification-badge__i--Height);
13601
- }
13602
-
13603
- .pf-c-notification-badge > * {
13604
- position: relative;
13605
- }
13606
-
13607
- .pf-c-notification-badge .pf-icon-attention-bell,
13608
- .pf-c-notification-badge .pf-icon-bell {
13609
- display: inline-block;
13610
- line-height: var(--pf-c-notification-badge--pf-icon-attention-bell--LineHeight);
13611
- }
13612
-
13613
- .pf-c-notification-badge .pf-icon-attention-bell::before,
13614
- .pf-c-notification-badge .pf-icon-bell::before {
13615
- vertical-align: bottom;
13616
- }
13617
-
13618
- .pf-c-notification-badge.pf-m-read {
13619
- --pf-c-notification-badge--after--BackgroundColor: var(--pf-c-notification-badge--m-read--after--BackgroundColor);
13620
- --pf-c-notification-badge--after--BorderColor: var(--pf-c-notification-badge--m-read--after--BorderColor);
13621
- color: var(--pf-c-notification-badge--m-read--Color, inherit);
13622
- }
13623
-
13624
- .pf-c-notification-badge.pf-m-unread {
13625
- --pf-c-notification-badge--after--BackgroundColor: var(--pf-c-notification-badge--m-unread--after--BackgroundColor);
13626
- color: var(--pf-c-notification-badge--m-unread--Color);
13627
- }
13628
-
13629
- .pf-c-notification-badge.pf-m-unread:hover {
13630
- --pf-c-notification-badge--after--BackgroundColor: var(--pf-c-notification-badge--m-unread--hover--after--BackgroundColor);
13631
- }
13632
-
13633
- .pf-c-notification-badge.pf-m-attention {
13634
- --pf-c-notification-badge--after--BackgroundColor: var(--pf-c-notification-badge--m-attention--after--BackgroundColor);
13635
- color: var(--pf-c-notification-badge--m-attention--Color);
13636
- }
13637
-
13638
- .pf-c-notification-badge.pf-m-attention:hover {
13639
- --pf-c-notification-badge--m-attention--after--BackgroundColor: var(--pf-c-notification-badge--m-attention--hover--after--BackgroundColor);
13640
- }
13641
-
13642
- .pf-c-notification-badge.pf-m-expanded {
13643
- --pf-c-notification-badge--m-read--Color: var(--pf-global--Color--light-100);
13644
- --pf-c-notification-badge--m-read--after--BackgroundColor: var(--pf-c-notification-badge--m-read--m-expanded--after--BackgroundColor);
13645
- --pf-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-c-notification-badge--m-unread--m-expanded--after--BackgroundColor);
13646
- --pf-c-notification-badge--m-attention--after--BackgroundColor: var(--pf-c-notification-badge--m-attention--m-expanded--after--BackgroundColor);
13647
- }
13648
-
13649
- .pf-c-notification-badge__count {
13650
- margin-left: var(--pf-c-notification-badge__count--MarginLeft);
13651
- }
13652
-
13653
- :where(.pf-theme-dark) .pf-c-notification-badge {
13654
- --pf-c-notification-badge--m-read--m-expanded--after--BackgroundColor: var(--pf-global--BackgroundColor--400);
13655
- --pf-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-global--primary-color--300);
13656
- --pf-c-notification-badge--m-attention--Color: var(--pf-global--palette--black-900);
13657
- }
13658
-
13659
- .pf-c-notification-drawer {
13660
- --pf-c-notification-drawer--BackgroundColor: var(--pf-global--BackgroundColor--200);
13661
- --pf-c-notification-drawer__header--PaddingTop: var(--pf-global--spacer--md);
13662
- --pf-c-notification-drawer__header--PaddingRight: var(--pf-global--spacer--md);
13663
- --pf-c-notification-drawer__header--PaddingBottom: var(--pf-global--spacer--md);
13664
- --pf-c-notification-drawer__header--PaddingLeft: var(--pf-global--spacer--md);
13665
- --pf-c-notification-drawer__header--BackgroundColor: var(--pf-global--BackgroundColor--100);
13666
- --pf-c-notification-drawer__header--BoxShadow: var(--pf-global--BoxShadow--sm-bottom);
13667
- --pf-c-notification-drawer__header--ZIndex: var(--pf-global--ZIndex--sm);
13668
- --pf-c-notification-drawer__header-title--FontSize: var(--pf-global--FontSize--xl);
13669
- --pf-c-notification-drawer__header-status--MarginLeft: var(--pf-global--spacer--md);
13670
- --pf-c-notification-drawer__body--ZIndex: var(--pf-global--ZIndex--xs);
13671
- --pf-c-notification-drawer__list-item--PaddingTop: var(--pf-global--spacer--md);
13672
- --pf-c-notification-drawer__list-item--PaddingRight: var(--pf-global--spacer--md);
13673
- --pf-c-notification-drawer__list-item--PaddingBottom: var(--pf-global--spacer--md);
13674
- --pf-c-notification-drawer__list-item--PaddingLeft: var(--pf-global--spacer--md);
13675
- --pf-c-notification-drawer__list-item--BackgroundColor: var(--pf-global--BackgroundColor--100);
13676
- --pf-c-notification-drawer__list-item--BoxShadow: inset var(--pf-global--BoxShadow--sm-bottom);
13677
- --pf-c-notification-drawer__list-item--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
13678
- --pf-c-notification-drawer__list-item--BorderBottomColor: transparent;
13679
- --pf-c-notification-drawer__list-item--OutlineOffset: -0.25rem;
13680
- --pf-c-notification-drawer__list-item--before--Width: var(--pf-global--BorderWidth--lg);
13681
- --pf-c-notification-drawer__list-item--before--Top: 0;
13682
- --pf-c-notification-drawer__list-item--before--Bottom: calc(var(--pf-c-notification-drawer__list-item--BorderBottomWidth) * -1);
13683
- --pf-c-notification-drawer__list-item--m-info__list-item-header-icon--Color: var(--pf-global--info-color--100);
13684
- --pf-c-notification-drawer__list-item--m-info__list-item--before--BackgroundColor: var(--pf-global--info-color--100);
13685
- --pf-c-notification-drawer__list-item--m-warning__list-item-header-icon--Color: var(--pf-global--warning-color--100);
13686
- --pf-c-notification-drawer__list-item--m-warning__list-item--before--BackgroundColor: var(--pf-global--warning-color--100);
13687
- --pf-c-notification-drawer__list-item--m-danger__list-item-header-icon--Color: var(--pf-global--danger-color--100);
13688
- --pf-c-notification-drawer__list-item--m-danger__list-item--before--BackgroundColor: var(--pf-global--danger-color--100);
13689
- --pf-c-notification-drawer__list-item--m-success__list-item-header-icon--Color: var(--pf-global--success-color--100);
13690
- --pf-c-notification-drawer__list-item--m-success__list-item--before--BackgroundColor: var(--pf-global--success-color--100);
13691
- --pf-c-notification-drawer__list-item--m-default__list-item-header-icon--Color: var(--pf-global--default-color--200);
13692
- --pf-c-notification-drawer__list-item--m-default__list-item--before--BackgroundColor: var(--pf-global--default-color--200);
13693
- --pf-c-notification-drawer__list-item--m-read--BackgroundColor: var(--pf-global--BackgroundColor--200);
13694
- --pf-c-notification-drawer__list-item--m-read--BorderBottomColor: var(--pf-global--BorderColor--100);
13695
- --pf-c-notification-drawer__list-item--m-read--before--Top: calc(var(--pf-c-notification-drawer__list-item--BorderBottomWidth) * -1);
13696
- --pf-c-notification-drawer__list-item--m-read--before--Bottom: 0;
13697
- --pf-c-notification-drawer__list-item--m-read--before--BackgroundColor: transparent;
13698
- --pf-c-notification-drawer__list-item--list-item--m-read--before--Top: 0;
13699
- --pf-c-notification-drawer__list-item--list-item--m-read--BoxShadow: inset var(--pf-global--BoxShadow--sm-bottom);
13700
- --pf-c-notification-drawer__list-item--m-hoverable--hover--ZIndex: var(--pf-global--ZIndex--xs);
13701
- --pf-c-notification-drawer__list-item--m-hoverable--hover--BoxShadow: var(--pf-global--BoxShadow--md-top), var(--pf-global--BoxShadow--md-bottom);
13702
- --pf-c-notification-drawer__list-item-header--MarginBottom: var(--pf-global--spacer--xs);
13703
- --pf-c-notification-drawer__list-item-header-icon--Color: inherit;
13704
- --pf-c-notification-drawer__list-item-header-icon--MarginRight: var(--pf-global--spacer--sm);
13705
- --pf-c-notification-drawer__list-item-header-title--FontWeight: var(--pf-global--FontWeight--bold);
13706
- --pf-c-notification-drawer__list-item-header-title--max-lines: 1;
13707
- --pf-c-notification-drawer__list-item--m-read__list-item-header-title--FontWeight: var(--pf-global--FontWeight--normal);
13708
- --pf-c-notification-drawer__list-item-description--MarginBottom: var(--pf-global--spacer--sm);
13709
- --pf-c-notification-drawer__list-item-timestamp--Color: var(--pf-global--Color--200);
13710
- --pf-c-notification-drawer__list-item-timestamp--FontSize: var(--pf-global--FontSize--sm);
13711
- --pf-c-notification-drawer__group--m-expanded--group--BorderTopWidth: var(--pf-global--BorderWidth--sm);
13712
- --pf-c-notification-drawer__group--m-expanded--group--BorderTopColor: var(--pf-global--BorderColor--100);
13713
- --pf-c-notification-drawer__group--m-expanded--MinHeight: 0;
13714
- --pf-c-notification-drawer__group-toggle--PaddingTop: var(--pf-global--spacer--md);
13715
- --pf-c-notification-drawer__group-toggle--PaddingRight: var(--pf-global--spacer--md);
13716
- --pf-c-notification-drawer__group-toggle--PaddingBottom: var(--pf-global--spacer--md);
13717
- --pf-c-notification-drawer__group-toggle--PaddingLeft: var(--pf-global--spacer--md);
13718
- --pf-c-notification-drawer__group-toggle--BackgroundColor: var(--pf-global--BackgroundColor--100);
13719
- --pf-c-notification-drawer__group-toggle--BorderColor: var(--pf-global--BorderColor--100);
13720
- --pf-c-notification-drawer__group-toggle--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
13721
- --pf-c-notification-drawer__group-toggle--OutlineOffset: -0.25rem;
13722
- --pf-c-notification-drawer__group-toggle-title--MarginRight: var(--pf-global--spacer--md);
13723
- --pf-c-notification-drawer__group-toggle-title--max-lines: 1;
13724
- --pf-c-notification-drawer__group-toggle-count--MarginRight: var(--pf-global--spacer--md);
13725
- --pf-c-notification-drawer__group-toggle-icon--MarginRight: var(--pf-global--spacer--md);
13726
- --pf-c-notification-drawer__group-toggle-icon--Color: var(--pf-global--Color--200);
13727
- --pf-c-notification-drawer__group-toggle-icon--Transition: .2s ease-in 0s;
13728
- --pf-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate: 90deg;
13729
- display: flex;
13730
- flex-direction: column;
13731
- height: 100%;
13732
- background-color: var(--pf-c-notification-drawer--BackgroundColor);
13733
- }
13734
-
13735
- .pf-c-notification-drawer__header {
13736
- position: relative;
13737
- z-index: var(--pf-c-notification-drawer__header--ZIndex);
13738
- display: flex;
13739
- flex-shrink: 0;
13740
- align-items: baseline;
13741
- 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);
13742
- background-color: var(--pf-c-notification-drawer__header--BackgroundColor);
13743
- box-shadow: var(--pf-c-notification-drawer__header--BoxShadow);
13744
- }
13745
-
13746
- .pf-c-notification-drawer__header-title {
13747
- font-size: var(--pf-c-notification-drawer__header-title--FontSize);
13748
- }
13749
-
13750
- .pf-c-notification-drawer__header-status {
13751
- margin-left: var(--pf-c-notification-drawer__header-status--MarginLeft);
13752
- }
13753
-
13754
- .pf-c-notification-drawer__header-action {
13755
- display: flex;
13756
- align-items: center;
13757
- margin-left: auto;
13758
- }
13759
-
13760
- .pf-c-notification-drawer__body {
13761
- overflow-y: auto;
13762
- box-shadow: var(--pf-c-notification-drawer__body--ZIndex);
13763
- }
13764
-
13765
- .pf-c-notification-drawer__list-item {
13766
- position: relative;
13767
- display: grid;
13768
- grid-template-columns: 1fr auto;
13769
- 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);
13770
- background-color: var(--pf-c-notification-drawer__list-item--BackgroundColor);
13771
- border-bottom: var(--pf-c-notification-drawer__list-item--BorderBottomWidth) solid var(--pf-c-notification-drawer__list-item--BorderBottomColor);
13772
- outline-offset: var(--pf-c-notification-drawer__list-item--OutlineOffset);
13773
- box-shadow: var(--pf-c-notification-drawer__list-item--BoxShadow);
13774
- }
13775
-
13776
- .pf-c-notification-drawer__list-item.pf-m-read, .pf-c-notification-drawer__list-item:first-child {
13777
- --pf-c-notification-drawer__list-item--BoxShadow: none;
13778
- }
13779
-
13780
- .pf-c-notification-drawer__list-item:not(.pf-m-read) + .pf-c-notification-drawer__list-item.pf-m-read {
13781
- --pf-c-notification-drawer__list-item--BoxShadow: var(--pf-c-notification-drawer__list-item--list-item--m-read--BoxShadow);
13782
- --pf-c-notification-drawer__list-item--before--Top: var(--pf-c-notification-drawer__list-item--list-item--m-read--before--Top);
13783
- }
13784
-
13785
- .pf-c-notification-drawer__list-item::before {
13786
- position: absolute;
13787
- top: var(--pf-c-notification-drawer__list-item--before--Top);
13788
- bottom: var(--pf-c-notification-drawer__list-item--before--Bottom);
13789
- width: var(--pf-c-notification-drawer__list-item--before--Width);
13790
- content: "";
13791
- background-color: var(--pf-c-notification-drawer__list-item--before--BackgroundColor);
13792
- }
13793
-
13794
- .pf-c-notification-drawer__list-item.pf-m-info {
13795
- --pf-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-info__list-item--before--BackgroundColor);
13796
- --pf-c-notification-drawer__list-item-header-icon--Color: var(--pf-c-notification-drawer__list-item--m-info__list-item-header-icon--Color);
13797
- }
13798
-
13799
- .pf-c-notification-drawer__list-item.pf-m-warning {
13800
- --pf-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-warning__list-item--before--BackgroundColor);
13801
- --pf-c-notification-drawer__list-item-header-icon--Color: var(--pf-c-notification-drawer__list-item--m-warning__list-item-header-icon--Color);
13802
- }
13803
-
13804
- .pf-c-notification-drawer__list-item.pf-m-danger {
13805
- --pf-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-danger__list-item--before--BackgroundColor);
13806
- --pf-c-notification-drawer__list-item-header-icon--Color: var(--pf-c-notification-drawer__list-item--m-danger__list-item-header-icon--Color);
13807
- }
13808
-
13809
- .pf-c-notification-drawer__list-item.pf-m-success {
13810
- --pf-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-success__list-item--before--BackgroundColor);
13811
- --pf-c-notification-drawer__list-item-header-icon--Color: var(--pf-c-notification-drawer__list-item--m-success__list-item-header-icon--Color);
13812
- }
13813
-
13814
- .pf-c-notification-drawer__list-item.pf-m-default {
13815
- --pf-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-default__list-item--before--BackgroundColor);
13816
- --pf-c-notification-drawer__list-item-header-icon--Color: var(--pf-c-notification-drawer__list-item--m-default__list-item-header-icon--Color);
13817
- }
13818
-
13819
- .pf-c-notification-drawer__list-item.pf-m-read {
13820
- --pf-c-notification-drawer__list-item--BorderBottomColor: var(--pf-c-notification-drawer__list-item--m-read--BorderBottomColor);
13821
- --pf-c-notification-drawer__list-item--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-read--BackgroundColor);
13822
- --pf-c-notification-drawer__list-item--before--Top: var(--pf-c-notification-drawer__list-item--m-read--before--Top);
13823
- --pf-c-notification-drawer__list-item--before--Bottom: var(--pf-c-notification-drawer__list-item--m-read--before--Bottom);
13824
- --pf-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-read--before--BackgroundColor);
13825
- --pf-c-notification-drawer__list-item-header-title--FontWeight: var(--pf-c-notification-drawer__list-item--m-read__list-item-header-title--FontWeight);
13826
- position: relative;
13827
- }
13828
-
13829
- .pf-c-notification-drawer__list-item.pf-m-hoverable {
13830
- cursor: pointer;
13831
- }
13832
-
13833
- .pf-c-notification-drawer__list-item.pf-m-hoverable:hover {
13834
- z-index: var(--pf-c-notification-drawer__list-item--m-hoverable--hover--ZIndex);
13835
- box-shadow: var(--pf-c-notification-drawer__list-item--m-hoverable--hover--BoxShadow);
13836
- }
13837
-
13838
- .pf-c-notification-drawer__list-item-header {
13839
- display: flex;
13840
- align-items: baseline;
13841
- grid-column: 1/2;
13842
- grid-row: 1/2;
13843
- margin-bottom: var(--pf-c-notification-drawer__list-item-header--MarginBottom);
13844
- }
13845
-
13846
- .pf-c-notification-drawer__list-item-header-icon {
13847
- margin-right: var(--pf-c-notification-drawer__list-item-header-icon--MarginRight);
13848
- color: var(--pf-c-notification-drawer__list-item-header-icon--Color);
13849
- }
13850
-
13851
- .pf-c-notification-drawer__list-item-header-title {
13852
- font-weight: var(--pf-c-notification-drawer__list-item-header-title--FontWeight);
13853
- word-break: break-word;
13854
- }
13855
-
13856
- .pf-c-notification-drawer__list-item-header-title.pf-m-truncate {
13857
- display: -webkit-box;
13858
- -webkit-box-orient: vertical;
13859
- -webkit-line-clamp: var(--pf-c-notification-drawer__list-item-header-title--max-lines);
13860
- overflow: hidden;
13861
- }
13862
-
13863
- .pf-c-notification-drawer__list-item-action {
13864
- grid-column: 2/3;
13865
- grid-row: 1/3;
13866
- }
13867
-
13868
- .pf-c-notification-drawer__list-item-description {
13869
- grid-row: 2/3;
13870
- grid-column: 1/2;
13871
- margin-bottom: var(--pf-c-notification-drawer__list-item-description--MarginBottom);
13872
- word-break: break-word;
13873
- }
13874
-
13875
- .pf-c-notification-drawer__list-item-timestamp {
13876
- grid-row: 3/4;
13877
- grid-column: 1/2;
13878
- font-size: var(--pf-c-notification-drawer__list-item-timestamp--FontSize);
13879
- color: var(--pf-c-notification-drawer__list-item-timestamp--Color);
13880
- }
13881
-
13882
- .pf-c-notification-drawer__group-list {
13883
- display: flex;
13884
- flex-direction: column;
13885
- }
13886
-
13887
- .pf-c-notification-drawer__group.pf-m-expanded {
13888
- min-height: var(--pf-c-notification-drawer__group--m-expanded--MinHeight);
13889
- }
13890
-
13891
- .pf-c-notification-drawer__group.pf-m-expanded + .pf-c-notification-drawer__group {
13892
- border-top: var(--pf-c-notification-drawer__group--m-expanded--group--BorderTopWidth) solid var(--pf-c-notification-drawer__group--m-expanded--group--BorderTopColor);
13893
- }
13894
-
13895
- .pf-c-notification-drawer__group .pf-c-notification-drawer__list-item:last-child {
13896
- --pf-c-notification-drawer__list-item--BorderBottomWidth: 0;
13897
- --pf-c-notification-drawer__list-item--before--Bottom: 0;
13898
- }
13899
-
13900
- .pf-c-notification-drawer__group-toggle {
13901
- display: flex;
13902
- align-items: baseline;
13903
- width: 100%;
13904
- 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);
13905
- background-color: var(--pf-c-notification-drawer__group-toggle--BackgroundColor);
13906
- border: solid var(--pf-c-notification-drawer__group-toggle--BorderColor);
13907
- border-width: 0 0 var(--pf-c-notification-drawer__group-toggle--BorderBottomWidth) 0;
13908
- outline-offset: var(--pf-c-notification-drawer__group-toggle--OutlineOffset);
13909
- }
13910
-
13911
- .pf-c-notification-drawer__group-toggle-title {
13912
- display: -webkit-box;
13913
- -webkit-box-orient: vertical;
13914
- -webkit-line-clamp: var(--pf-c-notification-drawer__group-toggle-title--max-lines);
13915
- overflow: hidden;
13916
- flex: 1;
13917
- margin-right: var(--pf-c-notification-drawer__group-toggle-title--MarginRight);
13918
- text-align: left;
13919
- word-break: break-word;
13920
- }
13921
-
13922
- .pf-c-notification-drawer__group-toggle-count {
13923
- margin-right: var(--pf-c-notification-drawer__group-toggle-count--MarginRight);
13924
- margin-left: auto;
13925
- }
13926
-
13927
- .pf-c-notification-drawer__group-toggle-icon {
13928
- margin-right: var(--pf-c-notification-drawer__group-toggle-icon--MarginRight);
13929
- color: var(--pf-c-notification-drawer__group-toggle-icon--Color);
13930
- transition: var(--pf-c-notification-drawer__group-toggle-icon--Transition);
13931
- }
13932
-
13933
- .pf-c-notification-drawer__group.pf-m-expanded .pf-c-notification-drawer__group-toggle-icon {
13934
- transform: rotate(var(--pf-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate));
13935
- }
13936
-
13937
- :where(.pf-theme-dark) .pf-c-notification-drawer {
13938
- --pf-c-notification-drawer--BackgroundColor: var(--pf-global--BackgroundColor--300);
13939
- --pf-c-notification-drawer__header--BackgroundColor: var(--pf-global--BackgroundColor--300);
13940
- --pf-c-notification-drawer__list-item--BackgroundColor: var(--pf-global--BackgroundColor--300);
13941
- --pf-c-notification-drawer__list-item--BoxShadow: none;
13942
- --pf-c-notification-drawer__list-item--BorderBottomColor: var(--pf-global--BorderColor--100);
13943
- --pf-c-notification-drawer__list-item--m-read--BackgroundColor: var(--pf-global--BackgroundColor--100);
13944
- --pf-c-notification-drawer__list-item--list-item--m-read--BoxShadow: none;
13945
- --pf-c-notification-drawer__group-toggle--BackgroundColor: var(--pf-global--BackgroundColor--300);
13946
- }
13947
-
13948
- .pf-c-options-menu {
13949
- --pf-c-options-menu__toggle--BackgroundColor: transparent;
13950
- --pf-c-options-menu__toggle--PaddingTop: var(--pf-global--spacer--form-element);
13951
- --pf-c-options-menu__toggle--PaddingRight: var(--pf-global--spacer--sm);
13952
- --pf-c-options-menu__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
13953
- --pf-c-options-menu__toggle--PaddingLeft: var(--pf-global--spacer--sm);
13954
- --pf-c-options-menu__toggle--MinWidth: 0;
13955
- --pf-c-options-menu__toggle--LineHeight: var(--pf-global--LineHeight--md);
13956
- --pf-c-options-menu__toggle--BorderWidth: var(--pf-global--BorderWidth--sm);
13957
- --pf-c-options-menu__toggle--BorderTopColor: var(--pf-global--BorderColor--300);
13958
- --pf-c-options-menu__toggle--BorderRightColor: var(--pf-global--BorderColor--300);
13959
- --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-global--BorderColor--200);
13960
- --pf-c-options-menu__toggle--BorderLeftColor: var(--pf-global--BorderColor--300);
13961
- --pf-c-options-menu__toggle--Color: var(--pf-global--Color--100);
13962
- --pf-c-options-menu__toggle--hover--BorderBottomColor: var(--pf-global--active-color--100);
13963
- --pf-c-options-menu__toggle--active--BorderBottomWidth: var(--pf-global--BorderWidth--md);
13964
- --pf-c-options-menu__toggle--active--BorderBottomColor: var(--pf-global--active-color--100);
13965
- --pf-c-options-menu__toggle--focus--BorderBottomWidth: var(--pf-global--BorderWidth--md);
13966
- --pf-c-options-menu__toggle--focus--BorderBottomColor: var(--pf-global--active-color--100);
13967
- --pf-c-options-menu__toggle--expanded--BorderBottomWidth: var(--pf-global--BorderWidth--md);
13968
- --pf-c-options-menu__toggle--expanded--BorderBottomColor: var(--pf-global--active-color--100);
13969
- --pf-c-options-menu__toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
13970
- --pf-c-options-menu__toggle--m-plain--Color: var(--pf-global--Color--200);
13971
- --pf-c-options-menu__toggle--m-plain--hover--Color: var(--pf-global--Color--100);
13972
- --pf-c-options-menu__toggle--m-plain--disabled--Color: var(--pf-global--disabled-color--200);
13973
- --pf-c-options-menu__toggle--m-plain--PaddingRight: var(--pf-global--spacer--md);
13974
- --pf-c-options-menu__toggle--m-plain--PaddingLeft: var(--pf-global--spacer--md);
13975
- --pf-c-options-menu__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
13976
- --pf-c-options-menu__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
13977
- --pf-c-options-menu--m-top--m-expanded__toggle-icon--Rotate: 180deg;
13978
- --pf-c-options-menu--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
13979
- --pf-c-options-menu--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);
13980
- --pf-c-options-menu__toggle-button--BackgroundColor: transparent;
13981
- --pf-c-options-menu__toggle-button--PaddingTop: var(--pf-global--spacer--form-element);
13982
- --pf-c-options-menu__toggle-button--PaddingRight: var(--pf-global--spacer--sm);
13983
- --pf-c-options-menu__toggle-button--PaddingBottom: var(--pf-global--spacer--form-element);
13984
- --pf-c-options-menu__toggle-button--PaddingLeft: var(--pf-global--spacer--sm);
13985
- --pf-c-options-menu__menu--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
13986
- --pf-c-options-menu__menu--BoxShadow: var(--pf-global--BoxShadow--md);
13987
- --pf-c-options-menu__menu--PaddingTop: var(--pf-global--spacer--sm);
13988
- --pf-c-options-menu__menu--PaddingBottom: var(--pf-global--spacer--sm);
13989
- --pf-c-options-menu__menu--Top: calc(100% + var(--pf-global--spacer--xs));
13990
- --pf-c-options-menu__menu--ZIndex: var(--pf-global--ZIndex--sm);
13991
- --pf-c-options-menu--m-top__menu--Top: 0;
13992
- --pf-c-options-menu--m-top__menu--TranslateY: calc(-100% - var(--pf-global--spacer--xs));
13993
- --pf-c-options-menu__menu-item--BackgroundColor: transparent;
13994
- --pf-c-options-menu__menu-item--Color: var(--pf-global--Color--100);
13995
- --pf-c-options-menu__menu-item--FontSize: var(--pf-global--FontSize--md);
13996
- --pf-c-options-menu__menu-item--PaddingTop: var(--pf-global--spacer--sm);
13997
- --pf-c-options-menu__menu-item--PaddingRight: var(--pf-global--spacer--md);
13998
- --pf-c-options-menu__menu-item--PaddingBottom: var(--pf-global--spacer--sm);
13999
- --pf-c-options-menu__menu-item--PaddingLeft: var(--pf-global--spacer--md);
14000
- --pf-c-options-menu__menu-item--disabled--Color: var(--pf-global--Color--dark-200);
14001
- --pf-c-options-menu__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
14002
- --pf-c-options-menu__menu-item--disabled--BackgroundColor: transparent;
14003
- --pf-c-options-menu__menu-item-icon--Color: var(--pf-global--active-color--100);
14004
- --pf-c-options-menu__menu-item-icon--FontSize: var(--pf-global--icon--FontSize--sm);
14005
- --pf-c-options-menu__menu-item-icon--PaddingLeft: var(--pf-global--spacer--lg);
14006
- --pf-c-options-menu__group--group--PaddingTop: var(--pf-global--spacer--sm);
14007
- --pf-c-options-menu__group-title--PaddingTop: var(--pf-global--spacer--sm);
14008
- --pf-c-options-menu__group-title--PaddingRight: var(--pf-c-options-menu__menu-item--PaddingRight);
14009
- --pf-c-options-menu__group-title--PaddingBottom: var(--pf-c-options-menu__menu-item--PaddingBottom);
14010
- --pf-c-options-menu__group-title--PaddingLeft: var(--pf-c-options-menu__menu-item--PaddingLeft);
14011
- --pf-c-options-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
14012
- --pf-c-options-menu__group-title--FontWeight: var(--pf-global--FontWeight--normal);
14013
- --pf-c-options-menu__group-title--Color: var(--pf-global--Color--dark-200);
14014
- --pf-c-options-menu--c-divider--MarginTop: var(--pf-global--spacer--sm);
14015
- --pf-c-options-menu--c-divider--MarginBottom: var(--pf-global--spacer--sm);
14016
- position: relative;
14017
- display: inline-block;
14018
- max-width: 100%;
14019
- }
14020
-
14021
- .pf-c-options-menu .pf-c-divider {
14022
- margin-top: var(--pf-c-options-menu--c-divider--MarginTop);
14023
- margin-bottom: var(--pf-c-options-menu--c-divider--MarginBottom);
14024
- }
14025
-
14026
- .pf-c-options-menu .pf-c-divider:last-child {
14027
- --pf-c-options-menu--c-divider--MarginBottom: 0;
14028
- }
14029
-
14030
- .pf-c-options-menu__toggle:not(.pf-m-plain)::before,
14031
- .pf-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-c-options-menu__toggle-button::before {
14032
- position: absolute;
14033
- top: 0;
14034
- right: 0;
14035
- bottom: 0;
14036
- left: 0;
14037
- content: "";
14038
- border: var(--pf-c-options-menu__toggle--BorderWidth) solid;
14039
- 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);
14040
- }
14041
-
14042
- .pf-c-options-menu__toggle:not(.pf-m-plain):hover::before,
14043
- .pf-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-c-options-menu__toggle-button:hover::before {
14044
- --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--hover--BorderBottomColor);
14045
- }
14046
-
14047
- .pf-c-options-menu__toggle:not(.pf-m-plain):active::before, .pf-c-options-menu__toggle:not(.pf-m-plain).pf-m-active::before,
14048
- .pf-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-c-options-menu__toggle-button:active::before,
14049
- .pf-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-c-options-menu__toggle-button.pf-m-active::before {
14050
- --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--active--BorderBottomColor);
14051
- border-bottom-width: var(--pf-c-options-menu__toggle--active--BorderBottomWidth);
14052
- }
14053
-
14054
- .pf-c-options-menu__toggle:not(.pf-m-plain):focus::before,
14055
- .pf-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-c-options-menu__toggle-button:focus::before {
14056
- --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--focus--BorderBottomColor);
14057
- border-bottom-width: var(--pf-c-options-menu__toggle--focus--BorderBottomWidth);
14058
- }
14059
-
14060
- .pf-c-options-menu__toggle {
14061
- position: relative;
14062
- display: flex;
14063
- align-items: center;
14064
- justify-content: space-between;
14065
- min-width: var(--pf-c-options-menu__toggle--MinWidth);
14066
- max-width: 100%;
14067
- 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);
14068
- line-height: var(--pf-c-options-menu__toggle--LineHeight);
14069
- color: var(--pf-c-options-menu__toggle--Color);
14070
- background-color: var(--pf-c-options-menu__toggle--BackgroundColor);
14071
- border: none;
14072
- }
14073
-
14074
- .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle::before {
14075
- --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--expanded--BorderBottomColor);
14076
- border-bottom-width: var(--pf-c-options-menu__toggle--expanded--BorderBottomWidth);
14077
- }
14078
-
14079
- .pf-c-options-menu__toggle.pf-m-plain {
14080
- --pf-c-options-menu__toggle-icon--Color: var(--pf-c-options-menu--m-plain__toggle-icon--Color);
14081
- }
14082
-
14083
- .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) {
14084
- --pf-c-options-menu__toggle--PaddingRight: var(--pf-c-options-menu__toggle--m-plain--PaddingRight);
14085
- --pf-c-options-menu__toggle--PaddingLeft: var(--pf-c-options-menu__toggle--m-plain--PaddingLeft);
14086
- display: inline-block;
14087
- color: var(--pf-c-options-menu__toggle--m-plain--Color);
14088
- }
14089
-
14090
- .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) .pf-c-options-menu__toggle-button-icon {
14091
- line-height: var(--pf-c-options-menu__toggle--LineHeight);
14092
- }
14093
-
14094
- .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 {
14095
- --pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--hover--Color);
14096
- --pf-c-options-menu--m-plain__toggle-icon--Color: var(--pf-c-options-menu--m-plain--hover__toggle-icon--Color);
14097
- }
14098
-
14099
- .pf-c-options-menu__toggle.pf-m-plain.pf-m-disabled, .pf-c-options-menu__toggle.pf-m-plain:disabled {
14100
- --pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--disabled--Color);
14101
- }
14102
-
14103
- .pf-c-options-menu__toggle.pf-m-disabled, .pf-c-options-menu__toggle:disabled {
14104
- pointer-events: none;
14105
- }
14106
-
14107
- .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 {
14108
- --pf-c-options-menu__toggle--BackgroundColor: var(--pf-c-options-menu__toggle--disabled--BackgroundColor);
14109
- }
14110
-
14111
- .pf-c-options-menu__toggle.pf-m-disabled::before, .pf-c-options-menu__toggle:disabled::before {
14112
- border: 0;
14113
- }
14114
-
14115
- .pf-c-options-menu__toggle-button-icon {
14116
- position: relative;
14117
- }
14118
-
14119
- .pf-c-options-menu__toggle-button {
14120
- 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);
14121
- background-color: var(--pf-c-options-menu__toggle-button--BackgroundColor);
14122
- border: 0;
14123
- }
14124
-
14125
- .pf-c-options-menu__toggle-text {
14126
- overflow: hidden;
14127
- text-overflow: ellipsis;
14128
- white-space: nowrap;
14129
- }
14130
-
14131
- .pf-c-options-menu__toggle-icon,
14132
- .pf-c-options-menu__toggle-button-icon {
14133
- color: var(--pf-c-options-menu__toggle-icon--Color, inherit);
14134
- }
14135
-
14136
- .pf-c-options-menu__toggle-icon {
14137
- margin-right: var(--pf-c-options-menu__toggle-icon--MarginRight);
14138
- margin-left: var(--pf-c-options-menu__toggle-icon--MarginLeft);
14139
- }
14140
-
14141
- .pf-c-options-menu.pf-m-top.pf-m-expanded .pf-c-options-menu__toggle-icon {
14142
- transform: rotate(var(--pf-c-options-menu--m-top--m-expanded__toggle-icon--Rotate));
14143
- }
14144
-
14145
- .pf-c-options-menu__menu {
14146
- position: absolute;
14147
- top: var(--pf-c-options-menu__menu--Top);
14148
- z-index: var(--pf-c-options-menu__menu--ZIndex);
14149
- min-width: 100%;
14150
- padding-top: var(--pf-c-options-menu__menu--PaddingTop);
14151
- padding-bottom: var(--pf-c-options-menu__menu--PaddingBottom);
14152
- background-color: var(--pf-c-options-menu__menu--BackgroundColor);
14153
- background-clip: padding-box;
14154
- box-shadow: var(--pf-c-options-menu__menu--BoxShadow);
14155
- }
14156
-
14157
- .pf-c-options-menu__menu.pf-m-align-right {
14158
- right: 0;
14159
- }
14160
-
14161
- .pf-c-options-menu.pf-m-top .pf-c-options-menu__menu {
14162
- --pf-c-options-menu__menu--Top: var(--pf-c-options-menu--m-top__menu--Top);
14163
- transform: translateY(var(--pf-c-options-menu--m-top__menu--TranslateY));
14164
- }
14165
-
14166
- .pf-c-options-menu__menu-item {
14167
- display: flex;
14168
- align-items: baseline;
14169
- width: 100%;
14170
- 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);
14171
- font-size: var(--pf-c-options-menu__menu-item--FontSize);
14172
- color: var(--pf-c-options-menu__menu-item--Color);
14173
- white-space: nowrap;
14174
- background-color: var(--pf-c-options-menu__menu-item--BackgroundColor);
14175
- border: none;
14176
- }
14177
-
14178
- .pf-c-options-menu__menu-item:hover, .pf-c-options-menu__menu-item:focus {
14179
- text-decoration: none;
14180
- background-color: var(--pf-c-options-menu__menu-item--hover--BackgroundColor);
14181
- }
14182
-
14183
- .pf-c-options-menu__menu-item:disabled, .pf-c-options-menu__menu-item.pf-m-disabled {
14184
- color: var(--pf-c-options-menu__menu-item--disabled--Color);
14185
- pointer-events: none;
14186
- background-color: var(--pf-c-options-menu__menu-item--disabled--BackgroundColor);
14187
- }
14188
-
14189
- .pf-c-options-menu__menu-item-icon {
14190
- align-self: center;
14191
- width: auto;
14192
- padding-left: var(--pf-c-options-menu__menu-item-icon--PaddingLeft);
14193
- margin-left: auto;
14194
- font-size: var(--pf-c-options-menu__menu-item-icon--FontSize);
14195
- color: var(--pf-c-options-menu__menu-item-icon--Color);
14196
- }
14197
-
14198
- .pf-c-options-menu__group + .pf-c-options-menu__group {
14199
- padding-top: var(--pf-c-options-menu__group--group--PaddingTop);
14200
- }
14201
-
14202
- .pf-c-options-menu__group-title {
14203
- padding-top: var(--pf-c-options-menu__group-title--PaddingTop);
14204
- padding-right: var(--pf-c-options-menu__group-title--PaddingRight);
14205
- padding-bottom: var(--pf-c-options-menu__group-title--PaddingBottom);
14206
- padding-left: var(--pf-c-options-menu__group-title--PaddingLeft);
14207
- font-size: var(--pf-c-options-menu__group-title--FontSize);
14208
- font-weight: var(--pf-c-options-menu__group-title--FontWeight);
14209
- color: var(--pf-c-options-menu__group-title--Color);
14210
- }
14211
-
14212
- :where(.pf-theme-dark) .pf-c-options-menu {
14213
- --pf-c-options-menu__toggle--BackgroundColor: var(--pf-global--BackgroundColor--400);
14214
- --pf-c-options-menu__toggle--BorderTopColor: transparent;
14215
- --pf-c-options-menu__toggle--BorderRightColor: transparent;
14216
- --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-global--BorderColor--400);
14217
- --pf-c-options-menu__toggle--BorderLeftColor: transparent;
14218
- --pf-c-options-menu__toggle--disabled--BackgroundColor: var(--pf-global--palette--black-500);
14219
- --pf-c-options-menu__menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
14220
- --pf-c-options-menu__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
14221
- --pf-c-options-menu__menu--Top: 100%;
14222
- }
14223
-
14224
- :where(.pf-theme-dark) .pf-c-options-menu__toggle.pf-m-plain {
14225
- background: transparent;
14226
- }
14227
-
14228
13542
  .pf-c-nav {
14229
13543
  --pf-c-nav--Transition: var(--pf-global--Transition);
14230
13544
  --pf-c-nav--m-light__item--before--BorderColor: var(--pf-global--BorderColor--300);
@@ -14536,746 +13850,1432 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
14536
13850
  position: relative;
14537
13851
  }
14538
13852
 
14539
- @media screen and (min-width: 1200px) {
14540
- .pf-c-nav {
14541
- --pf-c-nav__link--PaddingRight: var(--pf-c-nav__link--xl--PaddingRight);
14542
- --pf-c-nav__link--PaddingLeft: var(--pf-c-nav__link--xl--PaddingLeft);
14543
- --pf-c-nav--m-horizontal-subnav__link--PaddingTop: var(--pf-c-nav--m-horizontal-subnav__link--xl--PaddingTop);
14544
- --pf-c-nav--m-horizontal-subnav__link--PaddingRight: var(--pf-c-nav--m-horizontal-subnav__link--xl--PaddingRight);
14545
- --pf-c-nav--m-horizontal-subnav__link--PaddingBottom: var(--pf-c-nav--m-horizontal-subnav__link--xl--PaddingBottom);
14546
- --pf-c-nav--m-horizontal-subnav__link--PaddingLeft: var(--pf-c-nav--m-horizontal-subnav__link--xl--PaddingLeft);
14547
- --pf-c-nav__section__link--PaddingRight: var(--pf-c-nav__section__link--xl--PaddingRight);
14548
- --pf-c-nav__section__link--PaddingLeft: var(--pf-c-nav__section__link--xl--PaddingLeft);
14549
- --pf-c-nav__section-title--PaddingRight: var(--pf-c-nav__section-title--xl--PaddingRight);
14550
- --pf-c-nav__section-title--PaddingLeft: var(--pf-c-nav__section-title--xl--PaddingLeft);
14551
- --pf-c-nav__subnav--PaddingLeft: var(--pf-c-nav__subnav--xl--PaddingLeft);
14552
- --pf-c-nav--c-menu__item--PaddingRight: var(--pf-c-nav--c-menu__item--xl--PaddingRight);
14553
- --pf-c-nav--c-menu__item--PaddingLeft: var(--pf-c-nav--c-menu__item--xl--PaddingLeft);
14554
- }
13853
+ @media screen and (min-width: 1200px) {
13854
+ .pf-c-nav {
13855
+ --pf-c-nav__link--PaddingRight: var(--pf-c-nav__link--xl--PaddingRight);
13856
+ --pf-c-nav__link--PaddingLeft: var(--pf-c-nav__link--xl--PaddingLeft);
13857
+ --pf-c-nav--m-horizontal-subnav__link--PaddingTop: var(--pf-c-nav--m-horizontal-subnav__link--xl--PaddingTop);
13858
+ --pf-c-nav--m-horizontal-subnav__link--PaddingRight: var(--pf-c-nav--m-horizontal-subnav__link--xl--PaddingRight);
13859
+ --pf-c-nav--m-horizontal-subnav__link--PaddingBottom: var(--pf-c-nav--m-horizontal-subnav__link--xl--PaddingBottom);
13860
+ --pf-c-nav--m-horizontal-subnav__link--PaddingLeft: var(--pf-c-nav--m-horizontal-subnav__link--xl--PaddingLeft);
13861
+ --pf-c-nav__section__link--PaddingRight: var(--pf-c-nav__section__link--xl--PaddingRight);
13862
+ --pf-c-nav__section__link--PaddingLeft: var(--pf-c-nav__section__link--xl--PaddingLeft);
13863
+ --pf-c-nav__section-title--PaddingRight: var(--pf-c-nav__section-title--xl--PaddingRight);
13864
+ --pf-c-nav__section-title--PaddingLeft: var(--pf-c-nav__section-title--xl--PaddingLeft);
13865
+ --pf-c-nav__subnav--PaddingLeft: var(--pf-c-nav__subnav--xl--PaddingLeft);
13866
+ --pf-c-nav--c-menu__item--PaddingRight: var(--pf-c-nav--c-menu__item--xl--PaddingRight);
13867
+ --pf-c-nav--c-menu__item--PaddingLeft: var(--pf-c-nav--c-menu__item--xl--PaddingLeft);
13868
+ }
13869
+ }
13870
+ .pf-c-nav .pf-c-menu {
13871
+ --pf-c-menu--MinWidth: 100%;
13872
+ --pf-c-menu--BackgroundColor: var(--pf-c-nav--c-menu--BackgroundColor);
13873
+ --pf-c-menu__list--PaddingTop: var(--pf-c-nav--c-menu__list--PaddingTop);
13874
+ --pf-c-menu__list--PaddingBottom: var(--pf-c-nav--c-menu__list--PaddingBottom);
13875
+ --pf-c-menu__item--PaddingTop: var(--pf-c-nav--c-menu__item--PaddingTop);
13876
+ --pf-c-menu__item--PaddingRight: var(--pf-c-nav--c-menu__item--PaddingRight);
13877
+ --pf-c-menu__item--PaddingBottom: var(--pf-c-nav--c-menu__item--PaddingBottom);
13878
+ --pf-c-menu__item--PaddingLeft: var(--pf-c-nav--c-menu__item--PaddingLeft);
13879
+ --pf-c-menu__list-item--Color: var(--pf-c-nav--c-menu__list-item--Color);
13880
+ --pf-c-menu__list-item--hover--Color: var(--pf-c-nav--c-menu__list-item--hover--Color);
13881
+ --pf-c-menu__list-item--active--Color: var(--pf-c-nav--c-menu__list-item--active--Color);
13882
+ --pf-c-menu__list-item--focus-within--Color: var(--pf-c-nav--c-menu__list-item--focus-within--Color);
13883
+ --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-c-nav--c-menu__list-item--hover--BackgroundColor);
13884
+ --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-c-nav--c-menu__list-item--focus-within--BackgroundColor);
13885
+ --pf-c-menu__item-description--Color: var(--pf-c-nav--c-menu__item-description--Color);
13886
+ }
13887
+
13888
+ .pf-c-nav .pf-c-menu:first-child > .pf-c-menu__content {
13889
+ border-bottom: var(--pf-c-nav--c-menu__item--before--BorderBottomWidth) solid var(--pf-c-nav--c-menu__item--before--BorderBottomColor);
13890
+ }
13891
+
13892
+ .pf-c-nav .pf-c-menu.pf-m-flyout, .pf-c-nav .pf-c-menu.pf-m-flyout .pf-c-menu {
13893
+ --pf-c-menu--BoxShadow: var(--pf-c-nav--c-menu--m-flyout--BoxShadow);
13894
+ --pf-c-menu__list--PaddingTop: 0;
13895
+ --pf-c-menu__list--PaddingBottom: 0;
13896
+ --pf-c-menu__item--FontSize: var(--pf-c-nav--c-menu__item--FontSize);
13897
+ --pf-c-menu__item--Color: var(--pf-c-nav--c-menu__item--Color, inherit);
13898
+ --pf-c-menu__item--PaddingTop: var(--pf-c-nav--c-menu--m-flyout__item--PaddingTop);
13899
+ --pf-c-menu__item--PaddingRight: var(--pf-c-nav--c-menu--m-flyout__item--PaddingRight);
13900
+ --pf-c-menu__item--PaddingBottom: var(--pf-c-nav--c-menu--m-flyout__item--PaddingBottom);
13901
+ --pf-c-menu__item--PaddingLeft: var(--pf-c-nav--c-menu--m-flyout__item--PaddingLeft);
13902
+ top: var(--pf-c-nav--c-menu--m-flyout--c-menu--Top);
13903
+ right: var(--pf-c-nav--c-menu--m-flyout--c-menu--Right);
13904
+ bottom: var(--pf-c-nav--c-menu--m-flyout--c-menu--Bottom);
13905
+ left: var(--pf-c-nav--c-menu--m-flyout--c-menu--Left);
13906
+ }
13907
+
13908
+ .pf-c-nav .pf-c-menu.pf-m-flyout .pf-c-menu__item:hover {
13909
+ --pf-c-nav--c-menu__item--after--BorderLeftWidth: var(--pf-c-nav--c-menu--m-flyout__item--hover--after--BorderLeftWidth);
13910
+ --pf-c-nav--c-menu__item--after--BorderLeftColor: var(--pf-c-nav--c-menu--m-flyout__item--hover--after--BorderLeftColor);
13911
+ }
13912
+
13913
+ .pf-c-nav .pf-c-menu.pf-m-top {
13914
+ --pf-c-nav--c-menu--m-flyout--c-menu--Top: auto;
13915
+ --pf-c-nav--c-menu--m-flyout--c-menu--Bottom: var(--pf-c-nav--c-menu--m-flyout--m-top--Bottom);
13916
+ }
13917
+
13918
+ .pf-c-nav .pf-c-menu.pf-m-left {
13919
+ --pf-c-nav--c-menu--m-flyout--c-menu--Right: var(--pf-c-nav--c-menu--m-flyout--m-left--Right);
13920
+ --pf-c-nav--c-menu--m-flyout--c-menu--Left: auto;
13921
+ }
13922
+
13923
+ .pf-c-nav .pf-c-menu .pf-c-divider {
13924
+ margin-top: 0;
13925
+ margin-bottom: 0;
13926
+ }
13927
+
13928
+ .pf-c-nav .pf-c-menu__item {
13929
+ position: relative;
13930
+ outline-offset: var(--pf-c-nav--c-menu__item--OutlineOffset);
13931
+ }
13932
+
13933
+ .pf-c-nav .pf-c-menu__item::before, .pf-c-nav .pf-c-menu__item::after {
13934
+ position: absolute;
13935
+ top: 0;
13936
+ content: "";
13937
+ }
13938
+
13939
+ .pf-c-nav .pf-c-menu__item::before {
13940
+ right: 0;
13941
+ bottom: calc(var(--pf-c-nav--c-menu__item--before--BorderBottomWidth) * -1);
13942
+ left: 0;
13943
+ border-bottom: var(--pf-c-nav--c-menu__item--before--BorderBottomWidth) solid var(--pf-c-nav--c-menu__item--before--BorderBottomColor);
13944
+ }
13945
+
13946
+ .pf-c-nav .pf-c-menu__item::after {
13947
+ bottom: 0;
13948
+ left: 0;
13949
+ border-left: var(--pf-c-nav--c-menu__item--after--BorderLeftWidth) solid var(--pf-c-nav--c-menu__item--after--BorderLeftColor);
13950
+ }
13951
+
13952
+ .pf-c-nav .pf-c-menu__item.pf-m-current {
13953
+ --pf-c-nav--c-menu__item--after--BorderLeftWidth: var(--pf-c-nav--c-menu__item--m-current--after--BorderLeftWidth);
13954
+ --pf-c-nav--c-menu__item--after--BorderLeftColor: var(--pf-c-nav--c-menu__item--m-current--after--BorderColor);
13955
+ background-color: var(--pf-c-nav--c-menu__item--m-current--BackgroundColor);
13956
+ }
13957
+
13958
+ .pf-c-nav .pf-c-menu__list-item:where(.pf-m-drill-up) {
13959
+ --pf-c-nav--c-menu__item--before--BorderBottomWidth: var(--pf-c-nav--c-menu__list-item--m-drill-up--before--BorderBottomWidth);
13960
+ }
13961
+
13962
+ .pf-c-nav .pf-c-menu__list-item:where(.pf-m-drill-up) > .pf-c-menu__item {
13963
+ --pf-c-menu__item--FontWeight: var(--pf-c-nav--c-menu__list-item--m-drill-up__item--FontWeight);
13964
+ }
13965
+
13966
+ .pf-c-nav .pf-c-menu__item-toggle-icon {
13967
+ margin-left: calc(var(--pf-c-menu__item-toggle-icon--PaddingLeft) * -1);
13968
+ }
13969
+
13970
+ .pf-c-nav.pf-m-horizontal .pf-c-nav__link::after, .pf-c-nav.pf-m-tertiary .pf-c-nav__link::after {
13971
+ content: none;
13972
+ }
13973
+
13974
+ .pf-c-nav.pf-m-horizontal, .pf-c-nav.pf-m-tertiary, .pf-c-nav.pf-m-horizontal-subnav {
13975
+ overflow: hidden;
13976
+ }
13977
+
13978
+ .pf-c-nav.pf-m-horizontal,
13979
+ .pf-c-nav.pf-m-horizontal .pf-c-nav__list, .pf-c-nav.pf-m-tertiary,
13980
+ .pf-c-nav.pf-m-tertiary .pf-c-nav__list, .pf-c-nav.pf-m-horizontal-subnav,
13981
+ .pf-c-nav.pf-m-horizontal-subnav .pf-c-nav__list {
13982
+ position: relative;
13983
+ display: flex;
13984
+ }
13985
+
13986
+ .pf-c-nav.pf-m-horizontal .pf-c-nav__list, .pf-c-nav.pf-m-tertiary .pf-c-nav__list, .pf-c-nav.pf-m-horizontal-subnav .pf-c-nav__list {
13987
+ flex: 1;
13988
+ max-width: 100%;
13989
+ overflow-x: auto;
13990
+ white-space: nowrap;
13991
+ scroll-snap-type: var(--pf-c-nav__list--ScrollSnapType);
13992
+ -webkit-overflow-scrolling: touch;
13993
+ scrollbar-width: none;
13994
+ -ms-overflow-style: -ms-autohiding-scrollbar;
13995
+ }
13996
+
13997
+ .pf-c-nav.pf-m-horizontal .pf-c-nav__list::-webkit-scrollbar, .pf-c-nav.pf-m-tertiary .pf-c-nav__list::-webkit-scrollbar, .pf-c-nav.pf-m-horizontal-subnav .pf-c-nav__list::-webkit-scrollbar {
13998
+ display: none;
13999
+ }
14000
+
14001
+ .pf-c-nav.pf-m-horizontal .pf-c-nav__item, .pf-c-nav.pf-m-tertiary .pf-c-nav__item, .pf-c-nav.pf-m-horizontal-subnav .pf-c-nav__item {
14002
+ display: flex;
14003
+ scroll-snap-align: var(--pf-c-nav__item--ScrollSnapAlign);
14004
+ }
14005
+
14006
+ .pf-c-nav.pf-m-horizontal .pf-c-nav__link, .pf-c-nav.pf-m-tertiary .pf-c-nav__link, .pf-c-nav.pf-m-horizontal-subnav .pf-c-nav__link {
14007
+ align-items: center;
14008
+ align-self: stretch;
14009
+ white-space: nowrap;
14010
+ }
14011
+
14012
+ .pf-c-nav.pf-m-horizontal .pf-c-nav__link::before, .pf-c-nav.pf-m-tertiary .pf-c-nav__link::before, .pf-c-nav.pf-m-horizontal-subnav .pf-c-nav__link::before {
14013
+ top: auto;
14014
+ bottom: 0;
14015
+ }
14016
+
14017
+ .pf-c-nav.pf-m-horizontal .pf-c-nav__link::before {
14018
+ right: var(--pf-c-nav--m-horizontal__link--Right);
14019
+ left: var(--pf-c-nav--m-horizontal__link--Left);
14020
+ }
14021
+
14022
+ .pf-c-nav.pf-m-tertiary .pf-c-nav__link::before {
14023
+ right: var(--pf-c-nav--m-tertiary__link--Right);
14024
+ left: var(--pf-c-nav--m-tertiary__link--Left);
14025
+ }
14026
+
14027
+ .pf-c-nav.pf-m-light {
14028
+ --pf-c-nav__item--before--BorderColor: var(--pf-c-nav--m-light__item--before--BorderColor);
14029
+ --pf-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: var(--pf-c-nav--m-light__item--m-current--not--m-expanded__link--BackgroundColor);
14030
+ --pf-c-nav__link--Color: var(--pf-c-nav--m-light__link--Color);
14031
+ --pf-c-nav__link--hover--Color: var(--pf-c-nav--m-light__link--hover--Color);
14032
+ --pf-c-nav__link--focus--Color: var(--pf-c-nav--m-light__link--focus--Color);
14033
+ --pf-c-nav__link--active--Color: var(--pf-c-nav--m-light__link--active--Color);
14034
+ --pf-c-nav__link--m-current--Color: var(--pf-c-nav--m-light__link--m-current--Color);
14035
+ --pf-c-nav__link--hover--BackgroundColor: var(--pf-c-nav--m-light__link--hover--BackgroundColor);
14036
+ --pf-c-nav__link--focus--BackgroundColor: var(--pf-c-nav--m-light__link--focus--BackgroundColor);
14037
+ --pf-c-nav__link--active--BackgroundColor: var(--pf-c-nav--m-light__link--active--BackgroundColor);
14038
+ --pf-c-nav__link--m-current--BackgroundColor: var(--pf-c-nav--m-light__link--m-current--BackgroundColor);
14039
+ --pf-c-nav__link--before--BorderColor: var(--pf-c-nav--m-light__link--before--BorderColor);
14040
+ --pf-c-nav__link--after--BorderColor: var(--pf-c-nav--m-light__link--after--BorderColor);
14041
+ --pf-c-nav__link--m-current--after--BorderColor: var(--pf-c-nav--m-light__link--m-current--after--BorderColor);
14042
+ --pf-c-nav__subnav__link--hover--after--BorderColor: var(--pf-c-nav--m-light__subnav__link--hover--after--BorderColor);
14043
+ --pf-c-nav__subnav__link--focus--after--BorderColor: var(--pf-c-nav--m-light__subnav__link--focus--after--BorderColor);
14044
+ --pf-c-nav__subnav__link--active--after--BorderColor: var(--pf-c-nav--m-light__subnav__link--active--after--BorderColor);
14045
+ --pf-c-nav__subnav__link--m-current--after--BorderColor: var(--pf-c-nav--m-light__subnav__link--m-current--after--BorderColor);
14046
+ --pf-c-nav__section-title--Color: var(--pf-c-nav--m-light__section-title--Color);
14047
+ --pf-c-nav__section-title--BorderBottomColor: var(--pf-c-nav--m-light__section-title--BorderBottomColor);
14048
+ }
14049
+
14050
+ .pf-c-nav.pf-m-light .pf-c-divider {
14051
+ --pf-c-divider--after--BackgroundColor: var(--pf-c-nav--m-light--c-divider--BackgroundColor);
14052
+ }
14053
+
14054
+ .pf-c-nav.pf-m-horizontal {
14055
+ --pf-c-nav__link--PaddingTop: var(--pf-c-nav--m-horizontal__link--PaddingTop);
14056
+ --pf-c-nav__link--PaddingRight: var(--pf-c-nav--m-horizontal__link--PaddingRight);
14057
+ --pf-c-nav__link--PaddingBottom: var(--pf-c-nav--m-horizontal__link--PaddingBottom);
14058
+ --pf-c-nav__link--PaddingLeft: var(--pf-c-nav--m-horizontal__link--PaddingLeft);
14059
+ --pf-c-nav__link--Right: var(--pf-c-nav--m-horizontal__link--Right);
14060
+ --pf-c-nav__link--Left: var(--pf-c-nav--m-horizontal__link--Left);
14061
+ --pf-c-nav__link--Color: var(--pf-c-nav--m-horizontal__link--Color);
14062
+ --pf-c-nav__link--hover--Color: var(--pf-c-nav--m-horizontal__link--hover--Color);
14063
+ --pf-c-nav__link--active--Color: var(--pf-c-nav--m-horizontal__link--active--Color);
14064
+ --pf-c-nav__link--focus--Color: var(--pf-c-nav--m-horizontal__link--focus--Color);
14065
+ --pf-c-nav__link--m-current--Color: var(--pf-c-nav--m-horizontal__link--m-current--Color);
14066
+ --pf-c-nav__link--BackgroundColor: var(--pf-c-nav--m-horizontal__link--BackgroundColor);
14067
+ --pf-c-nav__link--hover--BackgroundColor: var(--pf-c-nav--m-horizontal__link--hover--BackgroundColor);
14068
+ --pf-c-nav__link--focus--BackgroundColor: var(--pf-c-nav--m-horizontal__link--focus--BackgroundColor);
14069
+ --pf-c-nav__link--active--BackgroundColor: var(--pf-c-nav--m-horizontal__link--active--BackgroundColor);
14070
+ --pf-c-nav__link--m-current--BackgroundColor: var(--pf-c-nav--m-horizontal__link--m-current--BackgroundColor);
14071
+ --pf-c-nav__link--before--BorderColor: var(--pf-c-nav--m-horizontal__link--before--BorderColor);
14072
+ --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav--m-horizontal__link--before--BorderWidth);
14073
+ --pf-c-nav__link--hover--before--BorderBottomWidth: var(--pf-c-nav--m-horizontal__link--hover--before--BorderWidth);
14074
+ --pf-c-nav__link--focus--before--BorderBottomWidth: var(--pf-c-nav--m-horizontal__link--focus--before--BorderWidth);
14075
+ --pf-c-nav__link--active--before--BorderBottomWidth: var(--pf-c-nav--m-horizontal__link--active--before--BorderWidth);
14076
+ --pf-c-nav__link--m-current--before--BorderBottomWidth: var(--pf-c-nav--m-horizontal__link--m-current--before--BorderWidth);
14077
+ }
14078
+
14079
+ .pf-c-nav.pf-m-tertiary {
14080
+ --pf-c-nav__link--PaddingTop: var(--pf-c-nav--m-tertiary__link--PaddingTop);
14081
+ --pf-c-nav__link--PaddingRight: var(--pf-c-nav--m-tertiary__link--PaddingRight);
14082
+ --pf-c-nav__link--PaddingBottom: var(--pf-c-nav--m-tertiary__link--PaddingBottom);
14083
+ --pf-c-nav__link--PaddingLeft: var(--pf-c-nav--m-tertiary__link--PaddingLeft);
14084
+ --pf-c-nav__link--Right: var(--pf-c-nav--m-tertiary__link--Right);
14085
+ --pf-c-nav__link--Left: var(--pf-c-nav--m-tertiary__link--Left);
14086
+ --pf-c-nav__link--Color: var(--pf-c-nav--m-tertiary__link--Color);
14087
+ --pf-c-nav__link--hover--Color: var(--pf-c-nav--m-tertiary__link--hover--Color);
14088
+ --pf-c-nav__link--active--Color: var(--pf-c-nav--m-tertiary__link--active--Color);
14089
+ --pf-c-nav__link--focus--Color: var(--pf-c-nav--m-tertiary__link--focus--Color);
14090
+ --pf-c-nav__link--m-current--Color: var(--pf-c-nav--m-tertiary__link--m-current--Color);
14091
+ --pf-c-nav__link--BackgroundColor: var(--pf-c-nav--m-tertiary__link--BackgroundColor);
14092
+ --pf-c-nav__link--hover--BackgroundColor: var(--pf-c-nav--m-tertiary__link--hover--BackgroundColor);
14093
+ --pf-c-nav__link--focus--BackgroundColor: var(--pf-c-nav--m-tertiary__link--focus--BackgroundColor);
14094
+ --pf-c-nav__link--active--BackgroundColor: var(--pf-c-nav--m-tertiary__link--active--BackgroundColor);
14095
+ --pf-c-nav__link--m-current--BackgroundColor: var(--pf-c-nav--m-tertiary__link--m-current--BackgroundColor);
14096
+ --pf-c-nav__link--before--BorderColor: var(--pf-c-nav--m-tertiary__link--before--BorderColor);
14097
+ --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav--m-tertiary__link--before--BorderWidth);
14098
+ --pf-c-nav__link--hover--before--BorderBottomWidth: var(--pf-c-nav--m-tertiary__link--hover--before--BorderWidth);
14099
+ --pf-c-nav__link--focus--before--BorderBottomWidth: var(--pf-c-nav--m-tertiary__link--focus--before--BorderWidth);
14100
+ --pf-c-nav__link--active--before--BorderBottomWidth: var(--pf-c-nav--m-tertiary__link--active--before--BorderWidth);
14101
+ --pf-c-nav__link--m-current--before--BorderBottomWidth: var(--pf-c-nav--m-tertiary__link--m-current--before--BorderWidth);
14102
+ --pf-c-nav__scroll-button--Color: var(--pf-c-nav--m-tertiary__scroll-button--Color);
14103
+ --pf-c-nav__scroll-button--hover--Color: var(--pf-c-nav--m-tertiary__scroll-button--hover--Color);
14104
+ --pf-c-nav__scroll-button--focus--Color: var(--pf-c-nav--m-tertiary__scroll-button--focus--Color);
14105
+ --pf-c-nav__scroll-button--active--Color: var(--pf-c-nav--m-tertiary__scroll-button--active--Color);
14106
+ --pf-c-nav__scroll-button--disabled--Color: var(--pf-c-nav--m-tertiary__scroll-button--disabled--Color);
14107
+ --pf-c-nav__scroll-button--before--BorderColor: var(--pf-c-nav--m-tertiary__scroll-button--before--BorderColor);
14108
+ --pf-c-nav__scroll-button--disabled--before--BorderColor: var(--pf-c-nav--m-tertiary__scroll-button--disabled--before--BorderColor);
14109
+ }
14110
+
14111
+ .pf-c-nav.pf-m-horizontal-subnav {
14112
+ --pf-c-nav__link--FontSize: var(--pf-c-nav--m-horizontal-subnav__link--FontSize);
14113
+ --pf-c-nav__link--PaddingTop: var(--pf-c-nav--m-horizontal-subnav__link--PaddingTop);
14114
+ --pf-c-nav__link--PaddingRight: var(--pf-c-nav--m-horizontal-subnav__link--PaddingRight);
14115
+ --pf-c-nav__link--PaddingBottom: var(--pf-c-nav--m-horizontal-subnav__link--PaddingBottom);
14116
+ --pf-c-nav__link--PaddingLeft: var(--pf-c-nav--m-horizontal-subnav__link--PaddingLeft);
14117
+ --pf-c-nav__link--Color: var(--pf-c-nav--m-horizontal-subnav__link--Color);
14118
+ --pf-c-nav__link--Right: var(--pf-c-nav--m-horizontal-subnav__link--Right);
14119
+ --pf-c-nav__link--Left: var(--pf-c-nav--m-horizontal-subnav__link--Left);
14120
+ --pf-c-nav__link--hover--Color: var(--pf-c-nav--m-horizontal-subnav__link--hover--Color);
14121
+ --pf-c-nav__link--active--Color: var(--pf-c-nav--m-horizontal-subnav__link--active--Color);
14122
+ --pf-c-nav__link--focus--Color: var(--pf-c-nav--m-horizontal-subnav__link--focus--Color);
14123
+ --pf-c-nav__link--m-current--Color: var(--pf-c-nav--m-horizontal-subnav__link--m-current--Color);
14124
+ --pf-c-nav__link--BackgroundColor: var(--pf-c-nav--m-horizontal-subnav__link--BackgroundColor);
14125
+ --pf-c-nav__link--hover--BackgroundColor: var(--pf-c-nav--m-horizontal-subnav__link--hover--BackgroundColor);
14126
+ --pf-c-nav__link--focus--BackgroundColor: var(--pf-c-nav--m-horizontal-subnav__link--focus--BackgroundColor);
14127
+ --pf-c-nav__link--active--BackgroundColor: var(--pf-c-nav--m-horizontal-subnav__link--active--BackgroundColor);
14128
+ --pf-c-nav__link--m-current--BackgroundColor: var(--pf-c-nav--m-horizontal-subnav__link--m-current--BackgroundColor);
14129
+ --pf-c-nav__link--before--BorderColor: var(--pf-c-nav--m-horizontal-subnav__link--before--BorderColor);
14130
+ --pf-c-nav__link--after--BorderColor: var(--pf-c-nav--m-horizontal-subnav__link--after--BorderColor);
14131
+ --pf-c-nav__link--hover--after--BorderColor: var(--pf-c-nav--m-horizontal-subnav__link--hover--after--BorderColor);
14132
+ --pf-c-nav__link--active--after--BorderColor: var(--pf-c-nav--m-horizontal-subnav__link--active--after--BorderColor);
14133
+ --pf-c-nav__link--m-current--after--BorderColor: var(--pf-c-nav--m-horizontal-subnav__link--m-current--after--BorderColor);
14134
+ --pf-c-nav__link--after--BorderLeftWidth: var(--pf-c-nav--m-horizontal-subnav__link--after--BorderLeftWidth);
14135
+ --pf-c-nav__link--hover--after--BorderLeftWidth: var(--pf-c-nav--m-horizontal-subnav__link--hover--after--BorderLeftWidth);
14136
+ --pf-c-nav__link--active--after--BorderLeftWidth: var(--pf-c-nav--m-horizontal-subnav__link--active--after--BorderLeftWidth);
14137
+ --pf-c-nav__link--m-current--after--BorderLeftWidth: var(--pf-c-nav--m-horizontal-subnav__link--m-current--after--BorderLeftWidth);
14138
+ }
14139
+
14140
+ .pf-c-nav.pf-m-horizontal-subnav.pf-m-scrollable .pf-c-nav__item:first-child {
14141
+ --pf-c-nav__link--after--BorderLeftWidth: 0;
14142
+ --pf-c-nav__link--hover--after--BorderLeftWidth: 0;
14143
+ --pf-c-nav__link--active--after--BorderLeftWidth: 0;
14144
+ --pf-c-nav__link--m-current--after--BorderLeftWidth: 0;
14145
+ }
14146
+
14147
+ .pf-c-nav .pf-c-divider {
14148
+ --pf-c-divider--after--BackgroundColor: var(--pf-c-nav--c-divider--BackgroundColor);
14149
+ padding-right: var(--pf-c-nav--c-divider--PaddingRight);
14150
+ padding-left: var(--pf-c-nav--c-divider--PaddingLeft);
14151
+ margin-top: var(--pf-c-nav--c-divider--MarginTop);
14152
+ margin-bottom: var(--pf-c-nav--c-divider--MarginBottom);
14153
+ }
14154
+
14155
+ .pf-c-nav.pf-m-scrollable .pf-c-nav__scroll-button {
14156
+ opacity: 1;
14157
+ }
14158
+
14159
+ .pf-c-nav.pf-m-scrollable .pf-c-nav__scroll-button:nth-of-type(1) {
14160
+ margin-right: 0;
14161
+ transform: translateX(0);
14162
+ }
14163
+
14164
+ .pf-c-nav.pf-m-scrollable .pf-c-nav__scroll-button:nth-of-type(2) {
14165
+ margin-left: 0;
14166
+ transform: translateX(0);
14167
+ }
14168
+
14169
+ .pf-c-nav.pf-m-overflow-hidden {
14170
+ overflow: hidden;
14171
+ }
14172
+
14173
+ .pf-c-nav__list {
14174
+ position: relative;
14175
+ display: block;
14176
+ }
14177
+
14178
+ .pf-c-nav__item {
14179
+ position: relative;
14180
+ margin-top: var(--pf-c-nav__item--MarginTop);
14181
+ }
14182
+
14183
+ .pf-c-nav__item.pf-m-expandable {
14184
+ --pf-c-nav__link--before--BorderBottomWidth: 0;
14185
+ }
14186
+
14187
+ .pf-c-nav__item.pf-m-expandable::before {
14188
+ position: absolute;
14189
+ right: 0;
14190
+ bottom: calc(var(--pf-c-nav__item--before--BorderWidth) * -1);
14191
+ left: 0;
14192
+ content: "";
14193
+ border-bottom: var(--pf-c-nav__item--before--BorderWidth) solid var(--pf-c-nav__item--before--BorderColor);
14194
+ }
14195
+
14196
+ .pf-c-nav__item .pf-c-nav__item:not(.pf-m-expanded) .pf-c-nav__toggle-icon {
14197
+ transform: rotate(0);
14198
+ }
14199
+
14200
+ .pf-c-nav__item .pf-c-nav__item.pf-m-expandable {
14201
+ --pf-c-nav__toggle--FontSize: var(--pf-c-nav__item__item__toggle--FontSize);
14202
+ --pf-c-nav__link--PaddingRight: var(--pf-c-nav__item__item__link--PaddingRight);
14203
+ }
14204
+
14205
+ @media screen and (min-width: 1200px) {
14206
+ .pf-c-nav__item .pf-c-nav__item.pf-m-expandable::before {
14207
+ border-bottom: none;
14208
+ }
14209
+ }
14210
+ .pf-c-nav__item .pf-c-nav__item.pf-m-expandable .pf-c-nav__list::before {
14211
+ position: absolute;
14212
+ top: 0;
14213
+ right: 0;
14214
+ bottom: 0;
14215
+ left: 0;
14216
+ pointer-events: none;
14217
+ content: "";
14218
+ border-left: var(--pf-c-nav__item--before--BorderWidth) solid var(--pf-c-nav__item--before--BorderColor);
14219
+ }
14220
+
14221
+ .pf-c-nav__item .pf-c-nav__toggle-icon {
14222
+ transform: rotate(var(--pf-c-nav__item__toggle-icon--Rotate));
14223
+ }
14224
+
14225
+ .pf-c-nav__item.pf-m-flyout:hover {
14226
+ --pf-c-nav__link--BackgroundColor: var(--pf-c-nav__item--m-flyout--hover__link--BackgroundColor);
14227
+ --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav__item--m-flyout--hover__link--before--BorderWidth);
14228
+ }
14229
+
14230
+ .pf-c-nav__item.pf-m-flyout:focus {
14231
+ --pf-c-nav__link--BackgroundColor: var(--pf-c-nav__item--m-flyout--focus__link--BackgroundColor);
14232
+ --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav__item--m-flyout--focus__link--before--BorderWidth);
14233
+ }
14234
+
14235
+ .pf-c-nav__item.pf-m-flyout:active {
14236
+ --pf-c-nav__link--BackgroundColor: var(--pf-c-nav__item--m-flyout--active__link--BackgroundColor);
14237
+ --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav__item--m-flyout--active__link--before--BorderWidth);
14238
+ }
14239
+
14240
+ .pf-c-nav__item.pf-m-flyout .pf-c-menu {
14241
+ --pf-c-menu--MinWidth: 100%;
14242
+ --pf-c-menu--BoxShadow: var(--pf-c-nav__item--m-flyout--c-menu--BoxShadow);
14243
+ --pf-c-menu--BackgroundColor: var(--pf-c-nav__item--m-flyout--c-menu--BackgroundColor);
14244
+ --pf-c-menu__list--PaddingTop: 0;
14245
+ --pf-c-menu__list--PaddingBottom: 0;
14246
+ --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-c-nav__item--m-flyout--c-menu__list-item--hover--BackgroundColor);
14247
+ --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-c-nav__item--m-flyout--c-menu__list-item--focus-within--BackgroundColor);
14248
+ --pf-c-menu__list-item--active--BackgroundColor: var(--pf-c-nav__item--m-flyout--c-menu__list-item--active--BackgroundColor);
14249
+ --pf-c-menu__item--FontSize: var(--pf-c-nav__item--m-flyout--c-menu__item--FontSize);
14250
+ --pf-c-menu__item--Color: var(--pf-c-nav__item--m-flyout--c-menu__item--Color);
14251
+ --pf-c-menu__item--PaddingTop: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingTop);
14252
+ --pf-c-menu__item--PaddingRight: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingRight);
14253
+ --pf-c-menu__item--PaddingBottom: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingBottom);
14254
+ --pf-c-menu__item--PaddingLeft: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingLeft);
14255
+ --pf-c-menu__item-description--Color: var(--pf-c-nav__item--m-flyout--c-menu__item-description--Color);
14256
+ --pf-c-nav--c-menu--m-flyout--c-menu--Bottom: var(--pf-c-nav__item--m-flyout--c-menu--m-top--Bottom);
14257
+ --pf-c-nav--c-menu--m-flyout--c-menu--Right: var(--pf-c-nav__item--m-flyout--c-menu--m-left--Right);
14258
+ position: absolute;
14259
+ top: var(--pf-c-nav__item--m-flyout--c-menu--Top);
14260
+ left: var(--pf-c-nav__item--m-flyout--c-menu--Left);
14261
+ }
14262
+
14263
+ .pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu {
14264
+ top: var(--pf-c-nav__item--m-flyout--c-menu--c-menu--Top);
14265
+ }
14266
+
14267
+ .pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu__list-item:first-child {
14268
+ --pf-c-nav__item--m-flyout--c-menu--c-menu--Top: var(--pf-c-nav__item--m-flyout--c-menu__list-item--first-child--c-menu--Top);
14269
+ --pf-c-nav__item--m-flyout--c-menu__item--hover--after--Top: var(--pf-c-nav__item--m-flyout--c-menu__list-item--first-child__item--hover--after--Top);
14270
+ }
14271
+
14272
+ .pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu__item {
14273
+ position: relative;
14274
+ outline-offset: var(--pf-c-nav__item--m-flyout--c-menu__item--OutlineOffset);
14275
+ }
14276
+
14277
+ .pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu__item::before {
14278
+ position: absolute;
14279
+ right: 0;
14280
+ bottom: 0;
14281
+ left: 0;
14282
+ content: "";
14283
+ border-bottom: var(--pf-c-nav__item--m-flyout--c-menu__item--before--BorderBottomWidth) solid var(--pf-c-nav__item--m-flyout--c-menu__item--before--BorderBottomColor);
14284
+ }
14285
+
14286
+ .pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu__item:hover::after {
14287
+ position: absolute;
14288
+ top: var(--pf-c-nav__item--m-flyout--c-menu__item--hover--after--Top);
14289
+ bottom: 0;
14290
+ left: 0;
14291
+ content: "";
14292
+ border-left: var(--pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftWidth) solid var(--pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftColor);
14293
+ }
14294
+
14295
+ .pf-c-nav__item.pf-m-drilldown.pf-m-expanded > .pf-c-nav__subnav {
14296
+ left: 0;
14297
+ z-index: var(--pf-c-nav__item--m-drilldown--m-expanded__subnav--ZIndex);
14298
+ }
14299
+
14300
+ .pf-c-nav__link {
14301
+ position: relative;
14302
+ display: flex;
14303
+ align-items: baseline;
14304
+ padding: var(--pf-c-nav__link--PaddingTop) var(--pf-c-nav__link--PaddingRight) var(--pf-c-nav__link--PaddingBottom) var(--pf-c-nav__link--PaddingLeft);
14305
+ font-size: var(--pf-c-nav__link--FontSize);
14306
+ font-weight: var(--pf-c-nav__link--FontWeight);
14307
+ color: var(--pf-c-nav__link--Color);
14308
+ background-color: var(--pf-c-nav__link--BackgroundColor);
14309
+ outline-offset: var(--pf-c-nav__link--OutlineOffset);
14310
+ }
14311
+
14312
+ .pf-c-nav__link::after, .pf-c-nav__link::before {
14313
+ position: absolute;
14314
+ content: "";
14315
+ border: 0 solid;
14316
+ }
14317
+
14318
+ .pf-c-nav__link::before {
14319
+ right: 0;
14320
+ bottom: calc(var(--pf-c-nav__link--before--BorderBottomWidth) * -1);
14321
+ left: 0;
14322
+ border-color: var(--pf-c-nav__link--before--BorderColor);
14323
+ border-bottom-width: var(--pf-c-nav__link--before--BorderBottomWidth);
14324
+ }
14325
+
14326
+ .pf-c-nav__link::after {
14327
+ top: 0;
14328
+ bottom: 0;
14329
+ left: 0;
14330
+ border: 0 solid;
14331
+ border-color: var(--pf-c-nav__link--after--BorderColor);
14332
+ border-left-width: var(--pf-c-nav__link--after--BorderLeftWidth);
14333
+ }
14334
+
14335
+ .pf-c-nav__link:hover, .pf-c-nav__link.pf-m-hover {
14336
+ color: var(--pf-c-nav__link--hover--Color);
14337
+ background-color: var(--pf-c-nav__link--hover--BackgroundColor);
14338
+ }
14339
+
14340
+ .pf-c-nav__link:hover::before, .pf-c-nav__link.pf-m-hover::before {
14341
+ border-bottom-width: var(--pf-c-nav__link--hover--before--BorderBottomWidth);
14342
+ }
14343
+
14344
+ .pf-c-nav__link:hover::after, .pf-c-nav__link.pf-m-hover::after {
14345
+ border-color: var(--pf-c-nav__link--hover--after--BorderColor);
14346
+ border-left-width: var(--pf-c-nav__link--hover--after--BorderLeftWidth);
14347
+ }
14348
+
14349
+ .pf-c-nav__link:focus {
14350
+ color: var(--pf-c-nav__link--focus--Color);
14351
+ background-color: var(--pf-c-nav__link--focus--BackgroundColor);
14352
+ }
14353
+
14354
+ .pf-c-nav__link:focus::before {
14355
+ border-bottom-width: var(--pf-c-nav__link--focus--before--BorderBottomWidth);
14356
+ }
14357
+
14358
+ .pf-c-nav__link:focus::after {
14359
+ border-color: var(--pf-c-nav__link--focus--after--BorderColor);
14360
+ border-left-width: var(--pf-c-nav__link--focus--after--BorderLeftWidth);
14361
+ }
14362
+
14363
+ .pf-c-nav__link:active {
14364
+ color: var(--pf-c-nav__link--active--Color);
14365
+ background-color: var(--pf-c-nav__link--active--BackgroundColor);
14366
+ }
14367
+
14368
+ .pf-c-nav__link:active::before {
14369
+ border-bottom-width: var(--pf-c-nav__link--active--before--BorderBottomWidth);
14370
+ }
14371
+
14372
+ .pf-c-nav__link:active::after {
14373
+ border-color: var(--pf-c-nav__link--active--after--BorderColor);
14374
+ border-left-width: var(--pf-c-nav__link--active--after--BorderLeftWidth);
14375
+ }
14376
+
14377
+ .pf-c-nav__link.pf-m-current, .pf-c-nav__link.pf-m-current:hover, .pf-c-nav__item.pf-m-current:not(.pf-m-expanded) .pf-c-nav__link {
14378
+ color: var(--pf-c-nav__link--m-current--Color);
14379
+ background-color: var(--pf-c-nav__link--m-current--BackgroundColor);
14380
+ }
14381
+
14382
+ .pf-c-nav__link.pf-m-current::before, .pf-c-nav__link.pf-m-current:hover::before, .pf-c-nav__item.pf-m-current:not(.pf-m-expanded) .pf-c-nav__link::before {
14383
+ border-bottom-width: var(--pf-c-nav__link--m-current--before--BorderBottomWidth);
14384
+ }
14385
+
14386
+ .pf-c-nav__link.pf-m-current::after, .pf-c-nav__link.pf-m-current:hover::after, .pf-c-nav__item.pf-m-current:not(.pf-m-expanded) .pf-c-nav__link::after {
14387
+ border-color: var(--pf-c-nav__link--m-current--after--BorderColor);
14388
+ border-left-width: var(--pf-c-nav__link--m-current--after--BorderLeftWidth);
14389
+ }
14390
+
14391
+ .pf-c-nav__link, .pf-c-nav__link:hover, .pf-c-nav__link:focus, .pf-c-nav__link:active {
14392
+ width: 100%;
14393
+ text-decoration: none;
14394
+ border: none;
14395
+ }
14396
+
14397
+ .pf-c-nav__subnav {
14398
+ --pf-c-nav__link--PaddingTop: var(--pf-c-nav__subnav__link--PaddingTop);
14399
+ --pf-c-nav__link--PaddingRight: var(--pf-c-nav__subnav__link--PaddingRight);
14400
+ --pf-c-nav__link--PaddingBottom: var(--pf-c-nav__subnav__link--PaddingBottom);
14401
+ --pf-c-nav__link--PaddingLeft: var(--pf-c-nav__subnav__link--PaddingLeft);
14402
+ --pf-c-nav__link--FontSize: var(--pf-c-nav__subnav__link--FontSize);
14403
+ --pf-c-nav__link--hover--after--BorderColor: var(--pf-c-nav__subnav__link--hover--after--BorderColor);
14404
+ --pf-c-nav__link--focus--after--BorderColor: var(--pf-c-nav__subnav__link--focus--after--BorderColor);
14405
+ --pf-c-nav__link--active--after--BorderColor: var(--pf-c-nav__subnav__link--active--after--BorderColor);
14406
+ --pf-c-nav__link--m-current--after--BorderColor: var(--pf-c-nav__subnav__link--m-current--after--BorderColor);
14407
+ --pf-c-nav__link--hover--after--BorderLeftWidth: var(--pf-c-nav__subnav__link--hover--after--BorderWidth);
14408
+ --pf-c-nav__link--focus--after--BorderLeftWidth: var(--pf-c-nav__subnav__link--focus--after--BorderWidth);
14409
+ --pf-c-nav__link--active--after--BorderLeftWidth: var(--pf-c-nav__subnav__link--active--after--BorderWidth);
14410
+ --pf-c-nav__link--m-current--after--BorderLeftWidth: var(--pf-c-nav__subnav__link--m-current--after--BorderWidth);
14411
+ --pf-c-nav--c-divider--PaddingRight: var(--pf-c-nav__subnav--c-divider--PaddingRight);
14412
+ --pf-c-nav--c-divider--PaddingLeft: var(--pf-c-nav__subnav--c-divider--PaddingLeft);
14413
+ max-height: var(--pf-c-nav__subnav--MaxHeight);
14414
+ padding-bottom: var(--pf-c-nav__subnav--PaddingBottom);
14415
+ padding-left: var(--pf-c-nav__subnav--PaddingLeft);
14416
+ transition: var(--pf-c-nav--Transition);
14417
+ scrollbar-width: none;
14418
+ -ms-overflow-style: -ms-autohiding-scrollbar;
14419
+ }
14420
+
14421
+ .pf-c-nav__subnav .pf-c-nav__subnav {
14422
+ --pf-c-nav__link--FontSize: var(--pf-c-nav__subnav__subnav__link--FontSize);
14423
+ --pf-c-nav__link--PaddingLeft: var(--pf-c-nav__subnav__subnav__link--PaddingLeft);
14424
+ --pf-c-nav__subnav--PaddingLeft: var(--pf-c-nav__subnav__subnav--PaddingLeft);
14425
+ }
14426
+
14427
+ .pf-c-nav__subnav.pf-m-flyout {
14428
+ width: 100%;
14429
+ }
14430
+
14431
+ .pf-c-nav__item.pf-m-expanded .pf-c-nav__subnav {
14432
+ --pf-c-nav__subnav--MaxHeight: var(--pf-c-nav__item--m-expanded__subnav--MaxHeight);
14433
+ overflow-y: auto;
14434
+ opacity: 1;
14435
+ }
14436
+
14437
+ .pf-c-nav__subnav::-webkit-scrollbar {
14438
+ display: none;
14439
+ }
14440
+
14441
+ .pf-c-nav__toggle {
14442
+ flex: none;
14443
+ padding-right: var(--pf-c-nav__toggle--PaddingRight);
14444
+ padding-left: var(--pf-c-nav__toggle--PaddingLeft);
14445
+ margin-left: auto;
14446
+ font-size: var(--pf-c-nav__toggle--FontSize);
14447
+ line-height: 1;
14448
+ }
14449
+
14450
+ .pf-c-nav__toggle.pf-m-start {
14451
+ margin-right: var(--pf-c-nav__toggle--m-start--MarginRight);
14452
+ margin-left: calc(var(--pf-c-nav__toggle--PaddingRight) * -1);
14453
+ }
14454
+
14455
+ .pf-c-nav__toggle-icon {
14456
+ display: inline-block;
14457
+ transition: var(--pf-c-nav__toggle-icon--Transition);
14458
+ }
14459
+
14460
+ .pf-c-nav__item.pf-m-expanded .pf-c-nav__toggle-icon {
14461
+ transform: rotate(var(--pf-c-nav__item--m-expanded__toggle-icon--Rotate));
14462
+ }
14463
+
14464
+ .pf-c-nav__section {
14465
+ --pf-c-nav__item--MarginTop: var(--pf-c-nav__section__item--MarginTop);
14466
+ --pf-c-nav__link--PaddingTop: var(--pf-c-nav__section__link--PaddingTop);
14467
+ --pf-c-nav__link--PaddingRight: var(--pf-c-nav__section__link--PaddingRight);
14468
+ --pf-c-nav__link--PaddingBottom: var(--pf-c-nav__section__link--PaddingBottom);
14469
+ --pf-c-nav__link--PaddingLeft: var(--pf-c-nav__section__link--PaddingLeft);
14470
+ --pf-c-nav__link--FontSize: var(--pf-c-nav__section__link--FontSize);
14471
+ --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav__section__link--before--BorderBottomWidth);
14472
+ --pf-c-nav__link--hover--after--BorderColor: var(--pf-c-nav__section__link--hover--after--BorderColor);
14473
+ --pf-c-nav__link--focus--after--BorderColor: var(--pf-c-nav__section__link--focus--after--BorderColor);
14474
+ --pf-c-nav__link--active--after--BorderColor: var(--pf-c-nav__section__link--active--after--BorderColor);
14475
+ --pf-c-nav__link--m-current--after--BorderColor: var(--pf-c-nav__section__link--m-current--after--BorderColor);
14476
+ --pf-c-nav__link--hover--after--BorderLeftWidth: var(--pf-c-nav__section__link--hover--after--BorderWidth);
14477
+ --pf-c-nav__link--focus--after--BorderLeftWidth: var(--pf-c-nav__section__link--focus--after--BorderWidth);
14478
+ --pf-c-nav__link--active--after--BorderLeftWidth: var(--pf-c-nav__section__link--active--after--BorderWidth);
14479
+ --pf-c-nav__link--m-current--after--BorderLeftWidth: var(--pf-c-nav__section__link--m-current--after--BorderWidth);
14480
+ margin-top: var(--pf-c-nav__section--MarginTop);
14481
+ --pf-c-nav--c-divider--MarginBottom: 0;
14482
+ }
14483
+
14484
+ .pf-c-nav__section + .pf-c-nav__section {
14485
+ --pf-c-nav__section--MarginTop: var(--pf-c-nav__section--section--MarginTop);
14486
+ }
14487
+
14488
+ .pf-c-nav__section.pf-m-no-title {
14489
+ --pf-c-nav__section--MarginTop: 0;
14490
+ }
14491
+
14492
+ .pf-c-nav__section-title {
14493
+ padding: var(--pf-c-nav__section-title--PaddingTop) var(--pf-c-nav__section-title--PaddingRight) var(--pf-c-nav__section-title--PaddingBottom) var(--pf-c-nav__section-title--PaddingLeft);
14494
+ font-size: var(--pf-c-nav__section-title--FontSize);
14495
+ color: var(--pf-c-nav__section-title--Color);
14496
+ border-bottom: var(--pf-c-nav__section-title--BorderBottomWidth) solid var(--pf-c-nav__section-title--BorderBottomColor);
14497
+ }
14498
+
14499
+ .pf-c-nav__scroll-button {
14500
+ flex: none;
14501
+ width: var(--pf-c-nav__scroll-button--Width);
14502
+ color: var(--pf-c-nav__scroll-button--Color);
14503
+ background-color: var(--pf-c-nav__scroll-button--BackgroundColor);
14504
+ border: 0;
14505
+ outline-offset: var(--pf-c-nav__scroll-button--OutlineOffset);
14506
+ opacity: 0;
14507
+ transition: var(--pf-c-nav__scroll-button--Transition);
14508
+ }
14509
+
14510
+ .pf-c-nav__scroll-button::before {
14511
+ position: absolute;
14512
+ top: 0;
14513
+ bottom: 0;
14514
+ content: "";
14515
+ border: solid var(--pf-c-nav__scroll-button--before--BorderColor);
14516
+ border-width: 0 var(--pf-c-nav__scroll-button--before--BorderRightWidth) 0 var(--pf-c-nav__scroll-button--before--BorderLeftWidth);
14555
14517
  }
14556
- .pf-c-nav .pf-c-menu {
14557
- --pf-c-menu--MinWidth: 100%;
14558
- --pf-c-menu--BackgroundColor: var(--pf-c-nav--c-menu--BackgroundColor);
14559
- --pf-c-menu__list--PaddingTop: var(--pf-c-nav--c-menu__list--PaddingTop);
14560
- --pf-c-menu__list--PaddingBottom: var(--pf-c-nav--c-menu__list--PaddingBottom);
14561
- --pf-c-menu__item--PaddingTop: var(--pf-c-nav--c-menu__item--PaddingTop);
14562
- --pf-c-menu__item--PaddingRight: var(--pf-c-nav--c-menu__item--PaddingRight);
14563
- --pf-c-menu__item--PaddingBottom: var(--pf-c-nav--c-menu__item--PaddingBottom);
14564
- --pf-c-menu__item--PaddingLeft: var(--pf-c-nav--c-menu__item--PaddingLeft);
14565
- --pf-c-menu__list-item--Color: var(--pf-c-nav--c-menu__list-item--Color);
14566
- --pf-c-menu__list-item--hover--Color: var(--pf-c-nav--c-menu__list-item--hover--Color);
14567
- --pf-c-menu__list-item--active--Color: var(--pf-c-nav--c-menu__list-item--active--Color);
14568
- --pf-c-menu__list-item--focus-within--Color: var(--pf-c-nav--c-menu__list-item--focus-within--Color);
14569
- --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-c-nav--c-menu__list-item--hover--BackgroundColor);
14570
- --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-c-nav--c-menu__list-item--focus-within--BackgroundColor);
14571
- --pf-c-menu__item-description--Color: var(--pf-c-nav--c-menu__item-description--Color);
14518
+
14519
+ .pf-c-nav__scroll-button:hover {
14520
+ color: var(--pf-c-nav__scroll-button--hover--Color);
14572
14521
  }
14573
14522
 
14574
- .pf-c-nav .pf-c-menu:first-child > .pf-c-menu__content {
14575
- border-bottom: var(--pf-c-nav--c-menu__item--before--BorderBottomWidth) solid var(--pf-c-nav--c-menu__item--before--BorderBottomColor);
14523
+ .pf-c-nav__scroll-button:focus {
14524
+ color: var(--pf-c-nav__scroll-button--focus--Color);
14576
14525
  }
14577
14526
 
14578
- .pf-c-nav .pf-c-menu.pf-m-flyout, .pf-c-nav .pf-c-menu.pf-m-flyout .pf-c-menu {
14579
- --pf-c-menu--BoxShadow: var(--pf-c-nav--c-menu--m-flyout--BoxShadow);
14580
- --pf-c-menu__list--PaddingTop: 0;
14581
- --pf-c-menu__list--PaddingBottom: 0;
14582
- --pf-c-menu__item--FontSize: var(--pf-c-nav--c-menu__item--FontSize);
14583
- --pf-c-menu__item--Color: var(--pf-c-nav--c-menu__item--Color, inherit);
14584
- --pf-c-menu__item--PaddingTop: var(--pf-c-nav--c-menu--m-flyout__item--PaddingTop);
14585
- --pf-c-menu__item--PaddingRight: var(--pf-c-nav--c-menu--m-flyout__item--PaddingRight);
14586
- --pf-c-menu__item--PaddingBottom: var(--pf-c-nav--c-menu--m-flyout__item--PaddingBottom);
14587
- --pf-c-menu__item--PaddingLeft: var(--pf-c-nav--c-menu--m-flyout__item--PaddingLeft);
14588
- top: var(--pf-c-nav--c-menu--m-flyout--c-menu--Top);
14589
- right: var(--pf-c-nav--c-menu--m-flyout--c-menu--Right);
14590
- bottom: var(--pf-c-nav--c-menu--m-flyout--c-menu--Bottom);
14591
- left: var(--pf-c-nav--c-menu--m-flyout--c-menu--Left);
14527
+ .pf-c-nav__scroll-button:active {
14528
+ color: var(--pf-c-nav__scroll-button--active--Color);
14592
14529
  }
14593
14530
 
14594
- .pf-c-nav .pf-c-menu.pf-m-flyout .pf-c-menu__item:hover {
14595
- --pf-c-nav--c-menu__item--after--BorderLeftWidth: var(--pf-c-nav--c-menu--m-flyout__item--hover--after--BorderLeftWidth);
14596
- --pf-c-nav--c-menu__item--after--BorderLeftColor: var(--pf-c-nav--c-menu--m-flyout__item--hover--after--BorderLeftColor);
14531
+ .pf-c-nav__scroll-button:disabled {
14532
+ color: var(--pf-c-nav__scroll-button--disabled--Color);
14533
+ border-color: var(--pf-c-nav__scroll-button--disabled--before--BorderColor);
14597
14534
  }
14598
14535
 
14599
- .pf-c-nav .pf-c-menu.pf-m-top {
14600
- --pf-c-nav--c-menu--m-flyout--c-menu--Top: auto;
14601
- --pf-c-nav--c-menu--m-flyout--c-menu--Bottom: var(--pf-c-nav--c-menu--m-flyout--m-top--Bottom);
14536
+ .pf-c-nav__scroll-button:nth-of-type(1) {
14537
+ --pf-c-nav__scroll-button--before--BorderRightWidth: var(--pf-c-nav__scroll-button--before--BorderWidth);
14538
+ margin-right: calc(var(--pf-c-nav__scroll-button--Width) * -1);
14539
+ transform: translateX(-100%);
14602
14540
  }
14603
14541
 
14604
- .pf-c-nav .pf-c-menu.pf-m-left {
14605
- --pf-c-nav--c-menu--m-flyout--c-menu--Right: var(--pf-c-nav--c-menu--m-flyout--m-left--Right);
14606
- --pf-c-nav--c-menu--m-flyout--c-menu--Left: auto;
14542
+ .pf-c-nav__scroll-button:nth-of-type(1)::before {
14543
+ right: 0;
14607
14544
  }
14608
14545
 
14609
- .pf-c-nav .pf-c-menu .pf-c-divider {
14610
- margin-top: 0;
14611
- margin-bottom: 0;
14546
+ .pf-c-nav__scroll-button:nth-of-type(2) {
14547
+ --pf-c-nav__scroll-button--before--BorderLeftWidth: var(--pf-c-nav__scroll-button--before--BorderWidth);
14548
+ margin-left: calc(var(--pf-c-nav__scroll-button--Width) * -1);
14549
+ transform: translateX(100%);
14612
14550
  }
14613
14551
 
14614
- .pf-c-nav .pf-c-menu__item {
14552
+ .pf-c-nav__scroll-button:nth-of-type(2)::before {
14553
+ left: 0;
14554
+ }
14555
+
14556
+ :where(.pf-theme-dark) .pf-c-nav {
14557
+ --pf-c-nav__item--item__link--after--Top: -1px;
14558
+ --pf-c-nav__item--before--BorderColor: var(--pf-global--BorderColor--100);
14559
+ --pf-c-nav__link--hover--BackgroundColor: var(--pf-global--BackgroundColor--300);
14560
+ --pf-c-nav__link--focus--BackgroundColor: var(--pf-global--BackgroundColor--300);
14561
+ --pf-c-nav__link--active--BackgroundColor: var(--pf-global--BackgroundColor--300);
14562
+ --pf-c-nav__link--m-current--BackgroundColor: var(--pf-global--BackgroundColor--300);
14563
+ --pf-c-nav__link--before--BorderColor: var(--pf-global--BorderColor--100);
14564
+ --pf-c-nav--m-tertiary__scroll-button--before--BorderColor: var(--pf-global--BorderColor--100);
14565
+ --pf-c-nav__section-title--Color: var(--pf-global--Color--200);
14566
+ --pf-c-nav__section-title--BorderBottomColor: var(--pf-global--BorderColor--100);
14567
+ --pf-c-nav__scroll-button--before--BorderColor: var(--pf-global--BorderColor--100);
14568
+ --pf-c-nav--c-divider--BackgroundColor: var(--pf-global--BorderColor--100);
14569
+ --pf-c-nav__link--hover--before--BorderBottomWidth: 0;
14570
+ --pf-c-nav__link--focus--before--BorderBottomWidth: 0;
14571
+ --pf-c-nav__link--active--before--BorderBottomWidth: 0;
14572
+ --pf-c-nav__link--m-current--before--BorderBottomWidth: 0;
14573
+ }
14574
+
14575
+ :where(.pf-theme-dark) .pf-c-nav__link::before {
14576
+ bottom: 0;
14577
+ }
14578
+
14579
+ :where(.pf-theme-dark) .pf-c-nav__link::after {
14580
+ top: var(--pf-c-nav__item--item__link--after--Top);
14581
+ }
14582
+
14583
+ :where(.pf-theme-dark) .pf-c-nav__item + .pf-c-nav__item {
14584
+ --pf-c-nav__link--after--Top: var(--pf-c-nav__item--item__link--after--Top);
14585
+ }
14586
+
14587
+ :where(.pf-theme-dark) .pf-c-nav__subnav {
14588
+ --pf-c-nav__item--item__link--after--Top: 0;
14589
+ }
14590
+
14591
+ :where(.pf-theme-dark) .pf-c-nav__section {
14592
+ --pf-c-nav__item--item__link--after--Top: 0;
14593
+ }
14594
+
14595
+ .pf-c-notification-badge {
14596
+ --pf-c-notification-badge--PaddingTop: var(--pf-global--spacer--form-element);
14597
+ --pf-c-notification-badge--PaddingRight: var(--pf-global--spacer--md);
14598
+ --pf-c-notification-badge--PaddingBottom: var(--pf-global--spacer--form-element);
14599
+ --pf-c-notification-badge--PaddingLeft: var(--pf-global--spacer--md);
14600
+ --pf-c-notification-badge--MarginTop: calc(-1 * var(--pf-global--spacer--form-element));
14601
+ --pf-c-notification-badge--MarginRight: calc(-1 * var(--pf-global--spacer--md));
14602
+ --pf-c-notification-badge--MarginBottom: calc(-1 * var(--pf-global--spacer--form-element));
14603
+ --pf-c-notification-badge--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
14604
+ --pf-c-notification-badge--after--BorderColor: transparent;
14605
+ --pf-c-notification-badge--after--BorderRadius: var(--pf-global--BorderRadius--sm);
14606
+ --pf-c-notification-badge--after--BorderWidth: 0;
14607
+ --pf-c-notification-badge--after--Top: 0;
14608
+ --pf-c-notification-badge--after--Right: 0;
14609
+ --pf-c-notification-badge--after--Width: auto;
14610
+ --pf-c-notification-badge--after--Height: auto;
14611
+ --pf-c-notification-badge--after--BackgroundColor: transparent;
14612
+ --pf-c-notification-badge--after--TranslateX: 0;
14613
+ --pf-c-notification-badge--after--TranslateY: 0;
14614
+ --pf-c-notification-badge__i--Width: auto;
14615
+ --pf-c-notification-badge__i--Height: auto;
14616
+ --pf-c-notification-badge--m-read--after--BorderColor: transparent;
14617
+ --pf-c-notification-badge--m-read--after--BackgroundColor: transparent;
14618
+ --pf-c-notification-badge--m-read--m-expanded--after--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
14619
+ --pf-c-notification-badge--m-unread--Color: var(--pf-global--Color--light-100);
14620
+ --pf-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-global--active-color--100);
14621
+ --pf-c-notification-badge--m-unread--hover--after--BackgroundColor: var(--pf-global--primary-color--200);
14622
+ --pf-c-notification-badge--m-unread--m-expanded--after--BackgroundColor: var(--pf-global--primary-color--200);
14623
+ --pf-c-notification-badge--m-attention--Color: var(--pf-global--Color--light-100);
14624
+ --pf-c-notification-badge--m-attention--after--BackgroundColor: var(--pf-global--danger-color--100);
14625
+ --pf-c-notification-badge--m-attention--hover--after--BackgroundColor: var(--pf-global--danger-color--200);
14626
+ --pf-c-notification-badge--m-attention--m-expanded--after--BackgroundColor: var(--pf-global--danger-color--200);
14627
+ --pf-c-notification-badge__count--MarginLeft: var(--pf-global--spacer--xs);
14628
+ --pf-c-notification-badge--pf-icon-attention-bell--LineHeight: var(--pf-global--LineHeight--sm);
14615
14629
  position: relative;
14616
- outline-offset: var(--pf-c-nav--c-menu__item--OutlineOffset);
14630
+ display: inline-block;
14631
+ padding: var(--pf-c-notification-badge--PaddingTop) var(--pf-c-notification-badge--PaddingRight) var(--pf-c-notification-badge--PaddingBottom) var(--pf-c-notification-badge--PaddingLeft);
14632
+ margin: var(--pf-c-notification-badge--MarginTop) var(--pf-c-notification-badge--MarginRight) var(--pf-c-notification-badge--MarginBottom) var(--pf-c-notification-badge--MarginLeft);
14633
+ background-color: var(--pf-c-notification-badge--after--BackgroundColor);
14634
+ border-radius: var(--pf-c-notification-badge--after--BorderRadius);
14617
14635
  }
14618
14636
 
14619
- .pf-c-nav .pf-c-menu__item::before, .pf-c-nav .pf-c-menu__item::after {
14637
+ .pf-c-notification-badge::before {
14620
14638
  position: absolute;
14621
- top: 0;
14639
+ top: var(--pf-c-notification-badge--after--Top);
14640
+ right: var(--pf-c-notification-badge--after--Right);
14641
+ bottom: 0;
14642
+ left: 0;
14643
+ width: var(--pf-c-notification-badge--after--Width);
14644
+ height: var(--pf-c-notification-badge--after--Height);
14622
14645
  content: "";
14646
+ border: var(--pf-c-notification-badge--after--BorderWidth) solid var(--pf-c-notification-badge--after--BorderColor);
14647
+ border-radius: var(--pf-c-notification-badge--after--BorderRadius);
14648
+ transform: translate(var(--pf-c-notification-badge--after--TranslateX), var(--pf-c-notification-badge--after--TranslateY));
14623
14649
  }
14624
14650
 
14625
- .pf-c-nav .pf-c-menu__item::before {
14626
- right: 0;
14627
- bottom: calc(var(--pf-c-nav--c-menu__item--before--BorderBottomWidth) * -1);
14628
- left: 0;
14629
- border-bottom: var(--pf-c-nav--c-menu__item--before--BorderBottomWidth) solid var(--pf-c-nav--c-menu__item--before--BorderBottomColor);
14651
+ .pf-c-notification-badge > i {
14652
+ width: var(--pf-c-notification-badge__i--Width);
14653
+ height: var(--pf-c-notification-badge__i--Height);
14630
14654
  }
14631
14655
 
14632
- .pf-c-nav .pf-c-menu__item::after {
14633
- bottom: 0;
14634
- left: 0;
14635
- border-left: var(--pf-c-nav--c-menu__item--after--BorderLeftWidth) solid var(--pf-c-nav--c-menu__item--after--BorderLeftColor);
14656
+ .pf-c-notification-badge > * {
14657
+ position: relative;
14636
14658
  }
14637
14659
 
14638
- .pf-c-nav .pf-c-menu__item.pf-m-current {
14639
- --pf-c-nav--c-menu__item--after--BorderLeftWidth: var(--pf-c-nav--c-menu__item--m-current--after--BorderLeftWidth);
14640
- --pf-c-nav--c-menu__item--after--BorderLeftColor: var(--pf-c-nav--c-menu__item--m-current--after--BorderColor);
14641
- background-color: var(--pf-c-nav--c-menu__item--m-current--BackgroundColor);
14660
+ .pf-c-notification-badge .pf-icon-attention-bell,
14661
+ .pf-c-notification-badge .pf-icon-bell {
14662
+ display: inline-block;
14663
+ line-height: var(--pf-c-notification-badge--pf-icon-attention-bell--LineHeight);
14642
14664
  }
14643
14665
 
14644
- .pf-c-nav .pf-c-menu__list-item:where(.pf-m-drill-up) {
14645
- --pf-c-nav--c-menu__item--before--BorderBottomWidth: var(--pf-c-nav--c-menu__list-item--m-drill-up--before--BorderBottomWidth);
14666
+ .pf-c-notification-badge .pf-icon-attention-bell::before,
14667
+ .pf-c-notification-badge .pf-icon-bell::before {
14668
+ vertical-align: bottom;
14646
14669
  }
14647
14670
 
14648
- .pf-c-nav .pf-c-menu__list-item:where(.pf-m-drill-up) > .pf-c-menu__item {
14649
- --pf-c-menu__item--FontWeight: var(--pf-c-nav--c-menu__list-item--m-drill-up__item--FontWeight);
14671
+ .pf-c-notification-badge.pf-m-read {
14672
+ --pf-c-notification-badge--after--BackgroundColor: var(--pf-c-notification-badge--m-read--after--BackgroundColor);
14673
+ --pf-c-notification-badge--after--BorderColor: var(--pf-c-notification-badge--m-read--after--BorderColor);
14674
+ color: var(--pf-c-notification-badge--m-read--Color, inherit);
14650
14675
  }
14651
14676
 
14652
- .pf-c-nav .pf-c-menu__item-toggle-icon {
14653
- margin-left: calc(var(--pf-c-menu__item-toggle-icon--PaddingLeft) * -1);
14677
+ .pf-c-notification-badge.pf-m-unread {
14678
+ --pf-c-notification-badge--after--BackgroundColor: var(--pf-c-notification-badge--m-unread--after--BackgroundColor);
14679
+ color: var(--pf-c-notification-badge--m-unread--Color);
14654
14680
  }
14655
14681
 
14656
- .pf-c-nav.pf-m-horizontal .pf-c-nav__link::after, .pf-c-nav.pf-m-tertiary .pf-c-nav__link::after {
14657
- content: none;
14682
+ .pf-c-notification-badge.pf-m-unread:hover {
14683
+ --pf-c-notification-badge--after--BackgroundColor: var(--pf-c-notification-badge--m-unread--hover--after--BackgroundColor);
14658
14684
  }
14659
14685
 
14660
- .pf-c-nav.pf-m-horizontal, .pf-c-nav.pf-m-tertiary, .pf-c-nav.pf-m-horizontal-subnav {
14661
- overflow: hidden;
14686
+ .pf-c-notification-badge.pf-m-attention {
14687
+ --pf-c-notification-badge--after--BackgroundColor: var(--pf-c-notification-badge--m-attention--after--BackgroundColor);
14688
+ color: var(--pf-c-notification-badge--m-attention--Color);
14662
14689
  }
14663
14690
 
14664
- .pf-c-nav.pf-m-horizontal,
14665
- .pf-c-nav.pf-m-horizontal .pf-c-nav__list, .pf-c-nav.pf-m-tertiary,
14666
- .pf-c-nav.pf-m-tertiary .pf-c-nav__list, .pf-c-nav.pf-m-horizontal-subnav,
14667
- .pf-c-nav.pf-m-horizontal-subnav .pf-c-nav__list {
14668
- position: relative;
14669
- display: flex;
14691
+ .pf-c-notification-badge.pf-m-attention:hover {
14692
+ --pf-c-notification-badge--m-attention--after--BackgroundColor: var(--pf-c-notification-badge--m-attention--hover--after--BackgroundColor);
14670
14693
  }
14671
14694
 
14672
- .pf-c-nav.pf-m-horizontal .pf-c-nav__list, .pf-c-nav.pf-m-tertiary .pf-c-nav__list, .pf-c-nav.pf-m-horizontal-subnav .pf-c-nav__list {
14673
- flex: 1;
14674
- max-width: 100%;
14675
- overflow-x: auto;
14676
- white-space: nowrap;
14677
- scroll-snap-type: var(--pf-c-nav__list--ScrollSnapType);
14678
- -webkit-overflow-scrolling: touch;
14679
- scrollbar-width: none;
14680
- -ms-overflow-style: -ms-autohiding-scrollbar;
14695
+ .pf-c-notification-badge.pf-m-expanded {
14696
+ --pf-c-notification-badge--m-read--Color: var(--pf-global--Color--light-100);
14697
+ --pf-c-notification-badge--m-read--after--BackgroundColor: var(--pf-c-notification-badge--m-read--m-expanded--after--BackgroundColor);
14698
+ --pf-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-c-notification-badge--m-unread--m-expanded--after--BackgroundColor);
14699
+ --pf-c-notification-badge--m-attention--after--BackgroundColor: var(--pf-c-notification-badge--m-attention--m-expanded--after--BackgroundColor);
14681
14700
  }
14682
14701
 
14683
- .pf-c-nav.pf-m-horizontal .pf-c-nav__list::-webkit-scrollbar, .pf-c-nav.pf-m-tertiary .pf-c-nav__list::-webkit-scrollbar, .pf-c-nav.pf-m-horizontal-subnav .pf-c-nav__list::-webkit-scrollbar {
14684
- display: none;
14702
+ .pf-c-notification-badge__count {
14703
+ margin-left: var(--pf-c-notification-badge__count--MarginLeft);
14685
14704
  }
14686
14705
 
14687
- .pf-c-nav.pf-m-horizontal .pf-c-nav__item, .pf-c-nav.pf-m-tertiary .pf-c-nav__item, .pf-c-nav.pf-m-horizontal-subnav .pf-c-nav__item {
14688
- display: flex;
14689
- scroll-snap-align: var(--pf-c-nav__item--ScrollSnapAlign);
14706
+ :where(.pf-theme-dark) .pf-c-notification-badge {
14707
+ --pf-c-notification-badge--m-read--m-expanded--after--BackgroundColor: var(--pf-global--BackgroundColor--400);
14708
+ --pf-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-global--primary-color--300);
14709
+ --pf-c-notification-badge--m-attention--Color: var(--pf-global--palette--black-900);
14690
14710
  }
14691
14711
 
14692
- .pf-c-nav.pf-m-horizontal .pf-c-nav__link, .pf-c-nav.pf-m-tertiary .pf-c-nav__link, .pf-c-nav.pf-m-horizontal-subnav .pf-c-nav__link {
14693
- align-items: center;
14694
- align-self: stretch;
14695
- white-space: nowrap;
14712
+ .pf-c-notification-drawer {
14713
+ --pf-c-notification-drawer--BackgroundColor: var(--pf-global--BackgroundColor--200);
14714
+ --pf-c-notification-drawer__header--PaddingTop: var(--pf-global--spacer--md);
14715
+ --pf-c-notification-drawer__header--PaddingRight: var(--pf-global--spacer--md);
14716
+ --pf-c-notification-drawer__header--PaddingBottom: var(--pf-global--spacer--md);
14717
+ --pf-c-notification-drawer__header--PaddingLeft: var(--pf-global--spacer--md);
14718
+ --pf-c-notification-drawer__header--BackgroundColor: var(--pf-global--BackgroundColor--100);
14719
+ --pf-c-notification-drawer__header--BoxShadow: var(--pf-global--BoxShadow--sm-bottom);
14720
+ --pf-c-notification-drawer__header--ZIndex: var(--pf-global--ZIndex--sm);
14721
+ --pf-c-notification-drawer__header-title--FontSize: var(--pf-global--FontSize--xl);
14722
+ --pf-c-notification-drawer__header-status--MarginLeft: var(--pf-global--spacer--md);
14723
+ --pf-c-notification-drawer__body--ZIndex: var(--pf-global--ZIndex--xs);
14724
+ --pf-c-notification-drawer__list-item--PaddingTop: var(--pf-global--spacer--md);
14725
+ --pf-c-notification-drawer__list-item--PaddingRight: var(--pf-global--spacer--md);
14726
+ --pf-c-notification-drawer__list-item--PaddingBottom: var(--pf-global--spacer--md);
14727
+ --pf-c-notification-drawer__list-item--PaddingLeft: var(--pf-global--spacer--md);
14728
+ --pf-c-notification-drawer__list-item--BackgroundColor: var(--pf-global--BackgroundColor--100);
14729
+ --pf-c-notification-drawer__list-item--BoxShadow: inset var(--pf-global--BoxShadow--sm-bottom);
14730
+ --pf-c-notification-drawer__list-item--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
14731
+ --pf-c-notification-drawer__list-item--BorderBottomColor: transparent;
14732
+ --pf-c-notification-drawer__list-item--OutlineOffset: -0.25rem;
14733
+ --pf-c-notification-drawer__list-item--before--Width: var(--pf-global--BorderWidth--lg);
14734
+ --pf-c-notification-drawer__list-item--before--Top: 0;
14735
+ --pf-c-notification-drawer__list-item--before--Bottom: calc(var(--pf-c-notification-drawer__list-item--BorderBottomWidth) * -1);
14736
+ --pf-c-notification-drawer__list-item--m-info__list-item-header-icon--Color: var(--pf-global--info-color--100);
14737
+ --pf-c-notification-drawer__list-item--m-info__list-item--before--BackgroundColor: var(--pf-global--info-color--100);
14738
+ --pf-c-notification-drawer__list-item--m-warning__list-item-header-icon--Color: var(--pf-global--warning-color--100);
14739
+ --pf-c-notification-drawer__list-item--m-warning__list-item--before--BackgroundColor: var(--pf-global--warning-color--100);
14740
+ --pf-c-notification-drawer__list-item--m-danger__list-item-header-icon--Color: var(--pf-global--danger-color--100);
14741
+ --pf-c-notification-drawer__list-item--m-danger__list-item--before--BackgroundColor: var(--pf-global--danger-color--100);
14742
+ --pf-c-notification-drawer__list-item--m-success__list-item-header-icon--Color: var(--pf-global--success-color--100);
14743
+ --pf-c-notification-drawer__list-item--m-success__list-item--before--BackgroundColor: var(--pf-global--success-color--100);
14744
+ --pf-c-notification-drawer__list-item--m-default__list-item-header-icon--Color: var(--pf-global--default-color--200);
14745
+ --pf-c-notification-drawer__list-item--m-default__list-item--before--BackgroundColor: var(--pf-global--default-color--200);
14746
+ --pf-c-notification-drawer__list-item--m-read--BackgroundColor: var(--pf-global--BackgroundColor--200);
14747
+ --pf-c-notification-drawer__list-item--m-read--BorderBottomColor: var(--pf-global--BorderColor--100);
14748
+ --pf-c-notification-drawer__list-item--m-read--before--Top: calc(var(--pf-c-notification-drawer__list-item--BorderBottomWidth) * -1);
14749
+ --pf-c-notification-drawer__list-item--m-read--before--Bottom: 0;
14750
+ --pf-c-notification-drawer__list-item--m-read--before--BackgroundColor: transparent;
14751
+ --pf-c-notification-drawer__list-item--list-item--m-read--before--Top: 0;
14752
+ --pf-c-notification-drawer__list-item--list-item--m-read--BoxShadow: inset var(--pf-global--BoxShadow--sm-bottom);
14753
+ --pf-c-notification-drawer__list-item--m-hoverable--hover--ZIndex: var(--pf-global--ZIndex--xs);
14754
+ --pf-c-notification-drawer__list-item--m-hoverable--hover--BoxShadow: var(--pf-global--BoxShadow--md-top), var(--pf-global--BoxShadow--md-bottom);
14755
+ --pf-c-notification-drawer__list-item-header--MarginBottom: var(--pf-global--spacer--xs);
14756
+ --pf-c-notification-drawer__list-item-header-icon--Color: inherit;
14757
+ --pf-c-notification-drawer__list-item-header-icon--MarginRight: var(--pf-global--spacer--sm);
14758
+ --pf-c-notification-drawer__list-item-header-title--FontWeight: var(--pf-global--FontWeight--bold);
14759
+ --pf-c-notification-drawer__list-item-header-title--max-lines: 1;
14760
+ --pf-c-notification-drawer__list-item--m-read__list-item-header-title--FontWeight: var(--pf-global--FontWeight--normal);
14761
+ --pf-c-notification-drawer__list-item-description--MarginBottom: var(--pf-global--spacer--sm);
14762
+ --pf-c-notification-drawer__list-item-timestamp--Color: var(--pf-global--Color--200);
14763
+ --pf-c-notification-drawer__list-item-timestamp--FontSize: var(--pf-global--FontSize--sm);
14764
+ --pf-c-notification-drawer__group--m-expanded--group--BorderTopWidth: var(--pf-global--BorderWidth--sm);
14765
+ --pf-c-notification-drawer__group--m-expanded--group--BorderTopColor: var(--pf-global--BorderColor--100);
14766
+ --pf-c-notification-drawer__group--m-expanded--MinHeight: 0;
14767
+ --pf-c-notification-drawer__group-toggle--PaddingTop: var(--pf-global--spacer--md);
14768
+ --pf-c-notification-drawer__group-toggle--PaddingRight: var(--pf-global--spacer--md);
14769
+ --pf-c-notification-drawer__group-toggle--PaddingBottom: var(--pf-global--spacer--md);
14770
+ --pf-c-notification-drawer__group-toggle--PaddingLeft: var(--pf-global--spacer--md);
14771
+ --pf-c-notification-drawer__group-toggle--BackgroundColor: var(--pf-global--BackgroundColor--100);
14772
+ --pf-c-notification-drawer__group-toggle--BorderColor: var(--pf-global--BorderColor--100);
14773
+ --pf-c-notification-drawer__group-toggle--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
14774
+ --pf-c-notification-drawer__group-toggle--OutlineOffset: -0.25rem;
14775
+ --pf-c-notification-drawer__group-toggle-title--MarginRight: var(--pf-global--spacer--md);
14776
+ --pf-c-notification-drawer__group-toggle-title--max-lines: 1;
14777
+ --pf-c-notification-drawer__group-toggle-count--MarginRight: var(--pf-global--spacer--md);
14778
+ --pf-c-notification-drawer__group-toggle-icon--MarginRight: var(--pf-global--spacer--md);
14779
+ --pf-c-notification-drawer__group-toggle-icon--Color: var(--pf-global--Color--200);
14780
+ --pf-c-notification-drawer__group-toggle-icon--Transition: .2s ease-in 0s;
14781
+ --pf-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate: 90deg;
14782
+ display: flex;
14783
+ flex-direction: column;
14784
+ height: 100%;
14785
+ background-color: var(--pf-c-notification-drawer--BackgroundColor);
14696
14786
  }
14697
14787
 
14698
- .pf-c-nav.pf-m-horizontal .pf-c-nav__link::before, .pf-c-nav.pf-m-tertiary .pf-c-nav__link::before, .pf-c-nav.pf-m-horizontal-subnav .pf-c-nav__link::before {
14699
- top: auto;
14700
- bottom: 0;
14788
+ .pf-c-notification-drawer__header {
14789
+ position: relative;
14790
+ z-index: var(--pf-c-notification-drawer__header--ZIndex);
14791
+ display: flex;
14792
+ flex-shrink: 0;
14793
+ align-items: baseline;
14794
+ 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);
14795
+ background-color: var(--pf-c-notification-drawer__header--BackgroundColor);
14796
+ box-shadow: var(--pf-c-notification-drawer__header--BoxShadow);
14701
14797
  }
14702
14798
 
14703
- .pf-c-nav.pf-m-horizontal .pf-c-nav__link::before {
14704
- right: var(--pf-c-nav--m-horizontal__link--Right);
14705
- left: var(--pf-c-nav--m-horizontal__link--Left);
14799
+ .pf-c-notification-drawer__header-title {
14800
+ font-size: var(--pf-c-notification-drawer__header-title--FontSize);
14706
14801
  }
14707
14802
 
14708
- .pf-c-nav.pf-m-tertiary .pf-c-nav__link::before {
14709
- right: var(--pf-c-nav--m-tertiary__link--Right);
14710
- left: var(--pf-c-nav--m-tertiary__link--Left);
14803
+ .pf-c-notification-drawer__header-status {
14804
+ margin-left: var(--pf-c-notification-drawer__header-status--MarginLeft);
14711
14805
  }
14712
14806
 
14713
- .pf-c-nav.pf-m-light {
14714
- --pf-c-nav__item--before--BorderColor: var(--pf-c-nav--m-light__item--before--BorderColor);
14715
- --pf-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: var(--pf-c-nav--m-light__item--m-current--not--m-expanded__link--BackgroundColor);
14716
- --pf-c-nav__link--Color: var(--pf-c-nav--m-light__link--Color);
14717
- --pf-c-nav__link--hover--Color: var(--pf-c-nav--m-light__link--hover--Color);
14718
- --pf-c-nav__link--focus--Color: var(--pf-c-nav--m-light__link--focus--Color);
14719
- --pf-c-nav__link--active--Color: var(--pf-c-nav--m-light__link--active--Color);
14720
- --pf-c-nav__link--m-current--Color: var(--pf-c-nav--m-light__link--m-current--Color);
14721
- --pf-c-nav__link--hover--BackgroundColor: var(--pf-c-nav--m-light__link--hover--BackgroundColor);
14722
- --pf-c-nav__link--focus--BackgroundColor: var(--pf-c-nav--m-light__link--focus--BackgroundColor);
14723
- --pf-c-nav__link--active--BackgroundColor: var(--pf-c-nav--m-light__link--active--BackgroundColor);
14724
- --pf-c-nav__link--m-current--BackgroundColor: var(--pf-c-nav--m-light__link--m-current--BackgroundColor);
14725
- --pf-c-nav__link--before--BorderColor: var(--pf-c-nav--m-light__link--before--BorderColor);
14726
- --pf-c-nav__link--after--BorderColor: var(--pf-c-nav--m-light__link--after--BorderColor);
14727
- --pf-c-nav__link--m-current--after--BorderColor: var(--pf-c-nav--m-light__link--m-current--after--BorderColor);
14728
- --pf-c-nav__subnav__link--hover--after--BorderColor: var(--pf-c-nav--m-light__subnav__link--hover--after--BorderColor);
14729
- --pf-c-nav__subnav__link--focus--after--BorderColor: var(--pf-c-nav--m-light__subnav__link--focus--after--BorderColor);
14730
- --pf-c-nav__subnav__link--active--after--BorderColor: var(--pf-c-nav--m-light__subnav__link--active--after--BorderColor);
14731
- --pf-c-nav__subnav__link--m-current--after--BorderColor: var(--pf-c-nav--m-light__subnav__link--m-current--after--BorderColor);
14732
- --pf-c-nav__section-title--Color: var(--pf-c-nav--m-light__section-title--Color);
14733
- --pf-c-nav__section-title--BorderBottomColor: var(--pf-c-nav--m-light__section-title--BorderBottomColor);
14807
+ .pf-c-notification-drawer__header-action {
14808
+ display: flex;
14809
+ align-items: center;
14810
+ margin-left: auto;
14734
14811
  }
14735
14812
 
14736
- .pf-c-nav.pf-m-light .pf-c-divider {
14737
- --pf-c-divider--after--BackgroundColor: var(--pf-c-nav--m-light--c-divider--BackgroundColor);
14813
+ .pf-c-notification-drawer__body {
14814
+ overflow-y: auto;
14815
+ box-shadow: var(--pf-c-notification-drawer__body--ZIndex);
14738
14816
  }
14739
14817
 
14740
- .pf-c-nav.pf-m-horizontal {
14741
- --pf-c-nav__link--PaddingTop: var(--pf-c-nav--m-horizontal__link--PaddingTop);
14742
- --pf-c-nav__link--PaddingRight: var(--pf-c-nav--m-horizontal__link--PaddingRight);
14743
- --pf-c-nav__link--PaddingBottom: var(--pf-c-nav--m-horizontal__link--PaddingBottom);
14744
- --pf-c-nav__link--PaddingLeft: var(--pf-c-nav--m-horizontal__link--PaddingLeft);
14745
- --pf-c-nav__link--Right: var(--pf-c-nav--m-horizontal__link--Right);
14746
- --pf-c-nav__link--Left: var(--pf-c-nav--m-horizontal__link--Left);
14747
- --pf-c-nav__link--Color: var(--pf-c-nav--m-horizontal__link--Color);
14748
- --pf-c-nav__link--hover--Color: var(--pf-c-nav--m-horizontal__link--hover--Color);
14749
- --pf-c-nav__link--active--Color: var(--pf-c-nav--m-horizontal__link--active--Color);
14750
- --pf-c-nav__link--focus--Color: var(--pf-c-nav--m-horizontal__link--focus--Color);
14751
- --pf-c-nav__link--m-current--Color: var(--pf-c-nav--m-horizontal__link--m-current--Color);
14752
- --pf-c-nav__link--BackgroundColor: var(--pf-c-nav--m-horizontal__link--BackgroundColor);
14753
- --pf-c-nav__link--hover--BackgroundColor: var(--pf-c-nav--m-horizontal__link--hover--BackgroundColor);
14754
- --pf-c-nav__link--focus--BackgroundColor: var(--pf-c-nav--m-horizontal__link--focus--BackgroundColor);
14755
- --pf-c-nav__link--active--BackgroundColor: var(--pf-c-nav--m-horizontal__link--active--BackgroundColor);
14756
- --pf-c-nav__link--m-current--BackgroundColor: var(--pf-c-nav--m-horizontal__link--m-current--BackgroundColor);
14757
- --pf-c-nav__link--before--BorderColor: var(--pf-c-nav--m-horizontal__link--before--BorderColor);
14758
- --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav--m-horizontal__link--before--BorderWidth);
14759
- --pf-c-nav__link--hover--before--BorderBottomWidth: var(--pf-c-nav--m-horizontal__link--hover--before--BorderWidth);
14760
- --pf-c-nav__link--focus--before--BorderBottomWidth: var(--pf-c-nav--m-horizontal__link--focus--before--BorderWidth);
14761
- --pf-c-nav__link--active--before--BorderBottomWidth: var(--pf-c-nav--m-horizontal__link--active--before--BorderWidth);
14762
- --pf-c-nav__link--m-current--before--BorderBottomWidth: var(--pf-c-nav--m-horizontal__link--m-current--before--BorderWidth);
14818
+ .pf-c-notification-drawer__list-item {
14819
+ position: relative;
14820
+ display: grid;
14821
+ grid-template-columns: 1fr auto;
14822
+ 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);
14823
+ background-color: var(--pf-c-notification-drawer__list-item--BackgroundColor);
14824
+ border-bottom: var(--pf-c-notification-drawer__list-item--BorderBottomWidth) solid var(--pf-c-notification-drawer__list-item--BorderBottomColor);
14825
+ outline-offset: var(--pf-c-notification-drawer__list-item--OutlineOffset);
14826
+ box-shadow: var(--pf-c-notification-drawer__list-item--BoxShadow);
14763
14827
  }
14764
14828
 
14765
- .pf-c-nav.pf-m-tertiary {
14766
- --pf-c-nav__link--PaddingTop: var(--pf-c-nav--m-tertiary__link--PaddingTop);
14767
- --pf-c-nav__link--PaddingRight: var(--pf-c-nav--m-tertiary__link--PaddingRight);
14768
- --pf-c-nav__link--PaddingBottom: var(--pf-c-nav--m-tertiary__link--PaddingBottom);
14769
- --pf-c-nav__link--PaddingLeft: var(--pf-c-nav--m-tertiary__link--PaddingLeft);
14770
- --pf-c-nav__link--Right: var(--pf-c-nav--m-tertiary__link--Right);
14771
- --pf-c-nav__link--Left: var(--pf-c-nav--m-tertiary__link--Left);
14772
- --pf-c-nav__link--Color: var(--pf-c-nav--m-tertiary__link--Color);
14773
- --pf-c-nav__link--hover--Color: var(--pf-c-nav--m-tertiary__link--hover--Color);
14774
- --pf-c-nav__link--active--Color: var(--pf-c-nav--m-tertiary__link--active--Color);
14775
- --pf-c-nav__link--focus--Color: var(--pf-c-nav--m-tertiary__link--focus--Color);
14776
- --pf-c-nav__link--m-current--Color: var(--pf-c-nav--m-tertiary__link--m-current--Color);
14777
- --pf-c-nav__link--BackgroundColor: var(--pf-c-nav--m-tertiary__link--BackgroundColor);
14778
- --pf-c-nav__link--hover--BackgroundColor: var(--pf-c-nav--m-tertiary__link--hover--BackgroundColor);
14779
- --pf-c-nav__link--focus--BackgroundColor: var(--pf-c-nav--m-tertiary__link--focus--BackgroundColor);
14780
- --pf-c-nav__link--active--BackgroundColor: var(--pf-c-nav--m-tertiary__link--active--BackgroundColor);
14781
- --pf-c-nav__link--m-current--BackgroundColor: var(--pf-c-nav--m-tertiary__link--m-current--BackgroundColor);
14782
- --pf-c-nav__link--before--BorderColor: var(--pf-c-nav--m-tertiary__link--before--BorderColor);
14783
- --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav--m-tertiary__link--before--BorderWidth);
14784
- --pf-c-nav__link--hover--before--BorderBottomWidth: var(--pf-c-nav--m-tertiary__link--hover--before--BorderWidth);
14785
- --pf-c-nav__link--focus--before--BorderBottomWidth: var(--pf-c-nav--m-tertiary__link--focus--before--BorderWidth);
14786
- --pf-c-nav__link--active--before--BorderBottomWidth: var(--pf-c-nav--m-tertiary__link--active--before--BorderWidth);
14787
- --pf-c-nav__link--m-current--before--BorderBottomWidth: var(--pf-c-nav--m-tertiary__link--m-current--before--BorderWidth);
14788
- --pf-c-nav__scroll-button--Color: var(--pf-c-nav--m-tertiary__scroll-button--Color);
14789
- --pf-c-nav__scroll-button--hover--Color: var(--pf-c-nav--m-tertiary__scroll-button--hover--Color);
14790
- --pf-c-nav__scroll-button--focus--Color: var(--pf-c-nav--m-tertiary__scroll-button--focus--Color);
14791
- --pf-c-nav__scroll-button--active--Color: var(--pf-c-nav--m-tertiary__scroll-button--active--Color);
14792
- --pf-c-nav__scroll-button--disabled--Color: var(--pf-c-nav--m-tertiary__scroll-button--disabled--Color);
14793
- --pf-c-nav__scroll-button--before--BorderColor: var(--pf-c-nav--m-tertiary__scroll-button--before--BorderColor);
14794
- --pf-c-nav__scroll-button--disabled--before--BorderColor: var(--pf-c-nav--m-tertiary__scroll-button--disabled--before--BorderColor);
14829
+ .pf-c-notification-drawer__list-item.pf-m-read, .pf-c-notification-drawer__list-item:first-child {
14830
+ --pf-c-notification-drawer__list-item--BoxShadow: none;
14795
14831
  }
14796
14832
 
14797
- .pf-c-nav.pf-m-horizontal-subnav {
14798
- --pf-c-nav__link--FontSize: var(--pf-c-nav--m-horizontal-subnav__link--FontSize);
14799
- --pf-c-nav__link--PaddingTop: var(--pf-c-nav--m-horizontal-subnav__link--PaddingTop);
14800
- --pf-c-nav__link--PaddingRight: var(--pf-c-nav--m-horizontal-subnav__link--PaddingRight);
14801
- --pf-c-nav__link--PaddingBottom: var(--pf-c-nav--m-horizontal-subnav__link--PaddingBottom);
14802
- --pf-c-nav__link--PaddingLeft: var(--pf-c-nav--m-horizontal-subnav__link--PaddingLeft);
14803
- --pf-c-nav__link--Color: var(--pf-c-nav--m-horizontal-subnav__link--Color);
14804
- --pf-c-nav__link--Right: var(--pf-c-nav--m-horizontal-subnav__link--Right);
14805
- --pf-c-nav__link--Left: var(--pf-c-nav--m-horizontal-subnav__link--Left);
14806
- --pf-c-nav__link--hover--Color: var(--pf-c-nav--m-horizontal-subnav__link--hover--Color);
14807
- --pf-c-nav__link--active--Color: var(--pf-c-nav--m-horizontal-subnav__link--active--Color);
14808
- --pf-c-nav__link--focus--Color: var(--pf-c-nav--m-horizontal-subnav__link--focus--Color);
14809
- --pf-c-nav__link--m-current--Color: var(--pf-c-nav--m-horizontal-subnav__link--m-current--Color);
14810
- --pf-c-nav__link--BackgroundColor: var(--pf-c-nav--m-horizontal-subnav__link--BackgroundColor);
14811
- --pf-c-nav__link--hover--BackgroundColor: var(--pf-c-nav--m-horizontal-subnav__link--hover--BackgroundColor);
14812
- --pf-c-nav__link--focus--BackgroundColor: var(--pf-c-nav--m-horizontal-subnav__link--focus--BackgroundColor);
14813
- --pf-c-nav__link--active--BackgroundColor: var(--pf-c-nav--m-horizontal-subnav__link--active--BackgroundColor);
14814
- --pf-c-nav__link--m-current--BackgroundColor: var(--pf-c-nav--m-horizontal-subnav__link--m-current--BackgroundColor);
14815
- --pf-c-nav__link--before--BorderColor: var(--pf-c-nav--m-horizontal-subnav__link--before--BorderColor);
14816
- --pf-c-nav__link--after--BorderColor: var(--pf-c-nav--m-horizontal-subnav__link--after--BorderColor);
14817
- --pf-c-nav__link--hover--after--BorderColor: var(--pf-c-nav--m-horizontal-subnav__link--hover--after--BorderColor);
14818
- --pf-c-nav__link--active--after--BorderColor: var(--pf-c-nav--m-horizontal-subnav__link--active--after--BorderColor);
14819
- --pf-c-nav__link--m-current--after--BorderColor: var(--pf-c-nav--m-horizontal-subnav__link--m-current--after--BorderColor);
14820
- --pf-c-nav__link--after--BorderLeftWidth: var(--pf-c-nav--m-horizontal-subnav__link--after--BorderLeftWidth);
14821
- --pf-c-nav__link--hover--after--BorderLeftWidth: var(--pf-c-nav--m-horizontal-subnav__link--hover--after--BorderLeftWidth);
14822
- --pf-c-nav__link--active--after--BorderLeftWidth: var(--pf-c-nav--m-horizontal-subnav__link--active--after--BorderLeftWidth);
14823
- --pf-c-nav__link--m-current--after--BorderLeftWidth: var(--pf-c-nav--m-horizontal-subnav__link--m-current--after--BorderLeftWidth);
14833
+ .pf-c-notification-drawer__list-item:not(.pf-m-read) + .pf-c-notification-drawer__list-item.pf-m-read {
14834
+ --pf-c-notification-drawer__list-item--BoxShadow: var(--pf-c-notification-drawer__list-item--list-item--m-read--BoxShadow);
14835
+ --pf-c-notification-drawer__list-item--before--Top: var(--pf-c-notification-drawer__list-item--list-item--m-read--before--Top);
14824
14836
  }
14825
14837
 
14826
- .pf-c-nav.pf-m-horizontal-subnav.pf-m-scrollable .pf-c-nav__item:first-child {
14827
- --pf-c-nav__link--after--BorderLeftWidth: 0;
14828
- --pf-c-nav__link--hover--after--BorderLeftWidth: 0;
14829
- --pf-c-nav__link--active--after--BorderLeftWidth: 0;
14830
- --pf-c-nav__link--m-current--after--BorderLeftWidth: 0;
14838
+ .pf-c-notification-drawer__list-item::before {
14839
+ position: absolute;
14840
+ top: var(--pf-c-notification-drawer__list-item--before--Top);
14841
+ bottom: var(--pf-c-notification-drawer__list-item--before--Bottom);
14842
+ width: var(--pf-c-notification-drawer__list-item--before--Width);
14843
+ content: "";
14844
+ background-color: var(--pf-c-notification-drawer__list-item--before--BackgroundColor);
14831
14845
  }
14832
14846
 
14833
- .pf-c-nav .pf-c-divider {
14834
- --pf-c-divider--after--BackgroundColor: var(--pf-c-nav--c-divider--BackgroundColor);
14835
- padding-right: var(--pf-c-nav--c-divider--PaddingRight);
14836
- padding-left: var(--pf-c-nav--c-divider--PaddingLeft);
14837
- margin-top: var(--pf-c-nav--c-divider--MarginTop);
14838
- margin-bottom: var(--pf-c-nav--c-divider--MarginBottom);
14847
+ .pf-c-notification-drawer__list-item.pf-m-info {
14848
+ --pf-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-info__list-item--before--BackgroundColor);
14849
+ --pf-c-notification-drawer__list-item-header-icon--Color: var(--pf-c-notification-drawer__list-item--m-info__list-item-header-icon--Color);
14839
14850
  }
14840
14851
 
14841
- .pf-c-nav.pf-m-scrollable .pf-c-nav__scroll-button {
14842
- opacity: 1;
14852
+ .pf-c-notification-drawer__list-item.pf-m-warning {
14853
+ --pf-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-warning__list-item--before--BackgroundColor);
14854
+ --pf-c-notification-drawer__list-item-header-icon--Color: var(--pf-c-notification-drawer__list-item--m-warning__list-item-header-icon--Color);
14843
14855
  }
14844
14856
 
14845
- .pf-c-nav.pf-m-scrollable .pf-c-nav__scroll-button:nth-of-type(1) {
14846
- margin-right: 0;
14847
- transform: translateX(0);
14857
+ .pf-c-notification-drawer__list-item.pf-m-danger {
14858
+ --pf-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-danger__list-item--before--BackgroundColor);
14859
+ --pf-c-notification-drawer__list-item-header-icon--Color: var(--pf-c-notification-drawer__list-item--m-danger__list-item-header-icon--Color);
14848
14860
  }
14849
14861
 
14850
- .pf-c-nav.pf-m-scrollable .pf-c-nav__scroll-button:nth-of-type(2) {
14851
- margin-left: 0;
14852
- transform: translateX(0);
14862
+ .pf-c-notification-drawer__list-item.pf-m-success {
14863
+ --pf-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-success__list-item--before--BackgroundColor);
14864
+ --pf-c-notification-drawer__list-item-header-icon--Color: var(--pf-c-notification-drawer__list-item--m-success__list-item-header-icon--Color);
14853
14865
  }
14854
14866
 
14855
- .pf-c-nav.pf-m-overflow-hidden {
14856
- overflow: hidden;
14867
+ .pf-c-notification-drawer__list-item.pf-m-default {
14868
+ --pf-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-default__list-item--before--BackgroundColor);
14869
+ --pf-c-notification-drawer__list-item-header-icon--Color: var(--pf-c-notification-drawer__list-item--m-default__list-item-header-icon--Color);
14857
14870
  }
14858
14871
 
14859
- .pf-c-nav__list {
14872
+ .pf-c-notification-drawer__list-item.pf-m-read {
14873
+ --pf-c-notification-drawer__list-item--BorderBottomColor: var(--pf-c-notification-drawer__list-item--m-read--BorderBottomColor);
14874
+ --pf-c-notification-drawer__list-item--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-read--BackgroundColor);
14875
+ --pf-c-notification-drawer__list-item--before--Top: var(--pf-c-notification-drawer__list-item--m-read--before--Top);
14876
+ --pf-c-notification-drawer__list-item--before--Bottom: var(--pf-c-notification-drawer__list-item--m-read--before--Bottom);
14877
+ --pf-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-read--before--BackgroundColor);
14878
+ --pf-c-notification-drawer__list-item-header-title--FontWeight: var(--pf-c-notification-drawer__list-item--m-read__list-item-header-title--FontWeight);
14860
14879
  position: relative;
14861
- display: block;
14862
14880
  }
14863
14881
 
14864
- .pf-c-nav__item {
14865
- position: relative;
14866
- margin-top: var(--pf-c-nav__item--MarginTop);
14882
+ .pf-c-notification-drawer__list-item.pf-m-hoverable {
14883
+ cursor: pointer;
14867
14884
  }
14868
14885
 
14869
- .pf-c-nav__item.pf-m-expandable {
14870
- --pf-c-nav__link--before--BorderBottomWidth: 0;
14886
+ .pf-c-notification-drawer__list-item.pf-m-hoverable:hover {
14887
+ z-index: var(--pf-c-notification-drawer__list-item--m-hoverable--hover--ZIndex);
14888
+ box-shadow: var(--pf-c-notification-drawer__list-item--m-hoverable--hover--BoxShadow);
14871
14889
  }
14872
14890
 
14873
- .pf-c-nav__item.pf-m-expandable::before {
14874
- position: absolute;
14875
- right: 0;
14876
- bottom: calc(var(--pf-c-nav__item--before--BorderWidth) * -1);
14877
- left: 0;
14878
- content: "";
14879
- border-bottom: var(--pf-c-nav__item--before--BorderWidth) solid var(--pf-c-nav__item--before--BorderColor);
14891
+ .pf-c-notification-drawer__list-item-header {
14892
+ display: flex;
14893
+ align-items: baseline;
14894
+ grid-column: 1/2;
14895
+ grid-row: 1/2;
14896
+ margin-bottom: var(--pf-c-notification-drawer__list-item-header--MarginBottom);
14880
14897
  }
14881
14898
 
14882
- .pf-c-nav__item .pf-c-nav__item:not(.pf-m-expanded) .pf-c-nav__toggle-icon {
14883
- transform: rotate(0);
14899
+ .pf-c-notification-drawer__list-item-header-icon {
14900
+ margin-right: var(--pf-c-notification-drawer__list-item-header-icon--MarginRight);
14901
+ color: var(--pf-c-notification-drawer__list-item-header-icon--Color);
14884
14902
  }
14885
14903
 
14886
- .pf-c-nav__item .pf-c-nav__item.pf-m-expandable {
14887
- --pf-c-nav__toggle--FontSize: var(--pf-c-nav__item__item__toggle--FontSize);
14888
- --pf-c-nav__link--PaddingRight: var(--pf-c-nav__item__item__link--PaddingRight);
14904
+ .pf-c-notification-drawer__list-item-header-title {
14905
+ font-weight: var(--pf-c-notification-drawer__list-item-header-title--FontWeight);
14906
+ word-break: break-word;
14889
14907
  }
14890
14908
 
14891
- @media screen and (min-width: 1200px) {
14892
- .pf-c-nav__item .pf-c-nav__item.pf-m-expandable::before {
14893
- border-bottom: none;
14894
- }
14909
+ .pf-c-notification-drawer__list-item-header-title.pf-m-truncate {
14910
+ display: -webkit-box;
14911
+ -webkit-box-orient: vertical;
14912
+ -webkit-line-clamp: var(--pf-c-notification-drawer__list-item-header-title--max-lines);
14913
+ overflow: hidden;
14895
14914
  }
14896
- .pf-c-nav__item .pf-c-nav__item.pf-m-expandable .pf-c-nav__list::before {
14897
- position: absolute;
14898
- top: 0;
14899
- right: 0;
14900
- bottom: 0;
14901
- left: 0;
14902
- pointer-events: none;
14903
- content: "";
14904
- border-left: var(--pf-c-nav__item--before--BorderWidth) solid var(--pf-c-nav__item--before--BorderColor);
14915
+
14916
+ .pf-c-notification-drawer__list-item-action {
14917
+ grid-column: 2/3;
14918
+ grid-row: 1/3;
14905
14919
  }
14906
14920
 
14907
- .pf-c-nav__item .pf-c-nav__toggle-icon {
14908
- transform: rotate(var(--pf-c-nav__item__toggle-icon--Rotate));
14921
+ .pf-c-notification-drawer__list-item-description {
14922
+ grid-row: 2/3;
14923
+ grid-column: 1/2;
14924
+ margin-bottom: var(--pf-c-notification-drawer__list-item-description--MarginBottom);
14925
+ word-break: break-word;
14909
14926
  }
14910
14927
 
14911
- .pf-c-nav__item.pf-m-flyout:hover {
14912
- --pf-c-nav__link--BackgroundColor: var(--pf-c-nav__item--m-flyout--hover__link--BackgroundColor);
14913
- --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav__item--m-flyout--hover__link--before--BorderWidth);
14928
+ .pf-c-notification-drawer__list-item-timestamp {
14929
+ grid-row: 3/4;
14930
+ grid-column: 1/2;
14931
+ font-size: var(--pf-c-notification-drawer__list-item-timestamp--FontSize);
14932
+ color: var(--pf-c-notification-drawer__list-item-timestamp--Color);
14914
14933
  }
14915
14934
 
14916
- .pf-c-nav__item.pf-m-flyout:focus {
14917
- --pf-c-nav__link--BackgroundColor: var(--pf-c-nav__item--m-flyout--focus__link--BackgroundColor);
14918
- --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav__item--m-flyout--focus__link--before--BorderWidth);
14935
+ .pf-c-notification-drawer__group-list {
14936
+ display: flex;
14937
+ flex-direction: column;
14919
14938
  }
14920
14939
 
14921
- .pf-c-nav__item.pf-m-flyout:active {
14922
- --pf-c-nav__link--BackgroundColor: var(--pf-c-nav__item--m-flyout--active__link--BackgroundColor);
14923
- --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav__item--m-flyout--active__link--before--BorderWidth);
14940
+ .pf-c-notification-drawer__group.pf-m-expanded {
14941
+ min-height: var(--pf-c-notification-drawer__group--m-expanded--MinHeight);
14924
14942
  }
14925
14943
 
14926
- .pf-c-nav__item.pf-m-flyout .pf-c-menu {
14927
- --pf-c-menu--MinWidth: 100%;
14928
- --pf-c-menu--BoxShadow: var(--pf-c-nav__item--m-flyout--c-menu--BoxShadow);
14929
- --pf-c-menu--BackgroundColor: var(--pf-c-nav__item--m-flyout--c-menu--BackgroundColor);
14930
- --pf-c-menu__list--PaddingTop: 0;
14931
- --pf-c-menu__list--PaddingBottom: 0;
14932
- --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-c-nav__item--m-flyout--c-menu__list-item--hover--BackgroundColor);
14933
- --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-c-nav__item--m-flyout--c-menu__list-item--focus-within--BackgroundColor);
14934
- --pf-c-menu__list-item--active--BackgroundColor: var(--pf-c-nav__item--m-flyout--c-menu__list-item--active--BackgroundColor);
14935
- --pf-c-menu__item--FontSize: var(--pf-c-nav__item--m-flyout--c-menu__item--FontSize);
14936
- --pf-c-menu__item--Color: var(--pf-c-nav__item--m-flyout--c-menu__item--Color);
14937
- --pf-c-menu__item--PaddingTop: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingTop);
14938
- --pf-c-menu__item--PaddingRight: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingRight);
14939
- --pf-c-menu__item--PaddingBottom: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingBottom);
14940
- --pf-c-menu__item--PaddingLeft: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingLeft);
14941
- --pf-c-menu__item-description--Color: var(--pf-c-nav__item--m-flyout--c-menu__item-description--Color);
14942
- --pf-c-nav--c-menu--m-flyout--c-menu--Bottom: var(--pf-c-nav__item--m-flyout--c-menu--m-top--Bottom);
14943
- --pf-c-nav--c-menu--m-flyout--c-menu--Right: var(--pf-c-nav__item--m-flyout--c-menu--m-left--Right);
14944
- position: absolute;
14945
- top: var(--pf-c-nav__item--m-flyout--c-menu--Top);
14946
- left: var(--pf-c-nav__item--m-flyout--c-menu--Left);
14944
+ .pf-c-notification-drawer__group.pf-m-expanded + .pf-c-notification-drawer__group {
14945
+ border-top: var(--pf-c-notification-drawer__group--m-expanded--group--BorderTopWidth) solid var(--pf-c-notification-drawer__group--m-expanded--group--BorderTopColor);
14947
14946
  }
14948
14947
 
14949
- .pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu {
14950
- top: var(--pf-c-nav__item--m-flyout--c-menu--c-menu--Top);
14948
+ .pf-c-notification-drawer__group .pf-c-notification-drawer__list-item:last-child {
14949
+ --pf-c-notification-drawer__list-item--BorderBottomWidth: 0;
14950
+ --pf-c-notification-drawer__list-item--before--Bottom: 0;
14951
14951
  }
14952
14952
 
14953
- .pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu__list-item:first-child {
14954
- --pf-c-nav__item--m-flyout--c-menu--c-menu--Top: var(--pf-c-nav__item--m-flyout--c-menu__list-item--first-child--c-menu--Top);
14955
- --pf-c-nav__item--m-flyout--c-menu__item--hover--after--Top: var(--pf-c-nav__item--m-flyout--c-menu__list-item--first-child__item--hover--after--Top);
14953
+ .pf-c-notification-drawer__group-toggle {
14954
+ display: flex;
14955
+ align-items: baseline;
14956
+ width: 100%;
14957
+ 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);
14958
+ background-color: var(--pf-c-notification-drawer__group-toggle--BackgroundColor);
14959
+ border: solid var(--pf-c-notification-drawer__group-toggle--BorderColor);
14960
+ border-width: 0 0 var(--pf-c-notification-drawer__group-toggle--BorderBottomWidth) 0;
14961
+ outline-offset: var(--pf-c-notification-drawer__group-toggle--OutlineOffset);
14956
14962
  }
14957
14963
 
14958
- .pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu__item {
14959
- position: relative;
14960
- outline-offset: var(--pf-c-nav__item--m-flyout--c-menu__item--OutlineOffset);
14964
+ .pf-c-notification-drawer__group-toggle-title {
14965
+ display: -webkit-box;
14966
+ -webkit-box-orient: vertical;
14967
+ -webkit-line-clamp: var(--pf-c-notification-drawer__group-toggle-title--max-lines);
14968
+ overflow: hidden;
14969
+ flex: 1;
14970
+ margin-right: var(--pf-c-notification-drawer__group-toggle-title--MarginRight);
14971
+ text-align: left;
14972
+ word-break: break-word;
14961
14973
  }
14962
14974
 
14963
- .pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu__item::before {
14964
- position: absolute;
14965
- right: 0;
14966
- bottom: 0;
14967
- left: 0;
14968
- content: "";
14969
- border-bottom: var(--pf-c-nav__item--m-flyout--c-menu__item--before--BorderBottomWidth) solid var(--pf-c-nav__item--m-flyout--c-menu__item--before--BorderBottomColor);
14975
+ .pf-c-notification-drawer__group-toggle-count {
14976
+ margin-right: var(--pf-c-notification-drawer__group-toggle-count--MarginRight);
14977
+ margin-left: auto;
14970
14978
  }
14971
14979
 
14972
- .pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu__item:hover::after {
14973
- position: absolute;
14974
- top: var(--pf-c-nav__item--m-flyout--c-menu__item--hover--after--Top);
14975
- bottom: 0;
14976
- left: 0;
14977
- content: "";
14978
- border-left: var(--pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftWidth) solid var(--pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftColor);
14980
+ .pf-c-notification-drawer__group-toggle-icon {
14981
+ margin-right: var(--pf-c-notification-drawer__group-toggle-icon--MarginRight);
14982
+ color: var(--pf-c-notification-drawer__group-toggle-icon--Color);
14983
+ transition: var(--pf-c-notification-drawer__group-toggle-icon--Transition);
14979
14984
  }
14980
14985
 
14981
- .pf-c-nav__item.pf-m-drilldown.pf-m-expanded > .pf-c-nav__subnav {
14982
- left: 0;
14983
- z-index: var(--pf-c-nav__item--m-drilldown--m-expanded__subnav--ZIndex);
14986
+ .pf-c-notification-drawer__group.pf-m-expanded .pf-c-notification-drawer__group-toggle-icon {
14987
+ transform: rotate(var(--pf-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate));
14984
14988
  }
14985
14989
 
14986
- .pf-c-nav__link {
14990
+ :where(.pf-theme-dark) .pf-c-notification-drawer {
14991
+ --pf-c-notification-drawer--BackgroundColor: var(--pf-global--BackgroundColor--300);
14992
+ --pf-c-notification-drawer__header--BackgroundColor: var(--pf-global--BackgroundColor--300);
14993
+ --pf-c-notification-drawer__list-item--BackgroundColor: var(--pf-global--BackgroundColor--300);
14994
+ --pf-c-notification-drawer__list-item--BoxShadow: none;
14995
+ --pf-c-notification-drawer__list-item--BorderBottomColor: var(--pf-global--BorderColor--100);
14996
+ --pf-c-notification-drawer__list-item--m-read--BackgroundColor: var(--pf-global--BackgroundColor--100);
14997
+ --pf-c-notification-drawer__list-item--list-item--m-read--BoxShadow: none;
14998
+ --pf-c-notification-drawer__group-toggle--BackgroundColor: var(--pf-global--BackgroundColor--300);
14999
+ }
15000
+
15001
+ .pf-c-options-menu {
15002
+ --pf-c-options-menu__toggle--BackgroundColor: transparent;
15003
+ --pf-c-options-menu__toggle--PaddingTop: var(--pf-global--spacer--form-element);
15004
+ --pf-c-options-menu__toggle--PaddingRight: var(--pf-global--spacer--sm);
15005
+ --pf-c-options-menu__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
15006
+ --pf-c-options-menu__toggle--PaddingLeft: var(--pf-global--spacer--sm);
15007
+ --pf-c-options-menu__toggle--MinWidth: 0;
15008
+ --pf-c-options-menu__toggle--LineHeight: var(--pf-global--LineHeight--md);
15009
+ --pf-c-options-menu__toggle--BorderWidth: var(--pf-global--BorderWidth--sm);
15010
+ --pf-c-options-menu__toggle--BorderTopColor: var(--pf-global--BorderColor--300);
15011
+ --pf-c-options-menu__toggle--BorderRightColor: var(--pf-global--BorderColor--300);
15012
+ --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-global--BorderColor--200);
15013
+ --pf-c-options-menu__toggle--BorderLeftColor: var(--pf-global--BorderColor--300);
15014
+ --pf-c-options-menu__toggle--Color: var(--pf-global--Color--100);
15015
+ --pf-c-options-menu__toggle--hover--BorderBottomColor: var(--pf-global--active-color--100);
15016
+ --pf-c-options-menu__toggle--active--BorderBottomWidth: var(--pf-global--BorderWidth--md);
15017
+ --pf-c-options-menu__toggle--active--BorderBottomColor: var(--pf-global--active-color--100);
15018
+ --pf-c-options-menu__toggle--focus--BorderBottomWidth: var(--pf-global--BorderWidth--md);
15019
+ --pf-c-options-menu__toggle--focus--BorderBottomColor: var(--pf-global--active-color--100);
15020
+ --pf-c-options-menu__toggle--expanded--BorderBottomWidth: var(--pf-global--BorderWidth--md);
15021
+ --pf-c-options-menu__toggle--expanded--BorderBottomColor: var(--pf-global--active-color--100);
15022
+ --pf-c-options-menu__toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
15023
+ --pf-c-options-menu__toggle--m-plain--Color: var(--pf-global--Color--200);
15024
+ --pf-c-options-menu__toggle--m-plain--hover--Color: var(--pf-global--Color--100);
15025
+ --pf-c-options-menu__toggle--m-plain--disabled--Color: var(--pf-global--disabled-color--200);
15026
+ --pf-c-options-menu__toggle--m-plain--PaddingRight: var(--pf-global--spacer--md);
15027
+ --pf-c-options-menu__toggle--m-plain--PaddingLeft: var(--pf-global--spacer--md);
15028
+ --pf-c-options-menu__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
15029
+ --pf-c-options-menu__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
15030
+ --pf-c-options-menu--m-top--m-expanded__toggle-icon--Rotate: 180deg;
15031
+ --pf-c-options-menu--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
15032
+ --pf-c-options-menu--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);
15033
+ --pf-c-options-menu__toggle-button--BackgroundColor: transparent;
15034
+ --pf-c-options-menu__toggle-button--PaddingTop: var(--pf-global--spacer--form-element);
15035
+ --pf-c-options-menu__toggle-button--PaddingRight: var(--pf-global--spacer--sm);
15036
+ --pf-c-options-menu__toggle-button--PaddingBottom: var(--pf-global--spacer--form-element);
15037
+ --pf-c-options-menu__toggle-button--PaddingLeft: var(--pf-global--spacer--sm);
15038
+ --pf-c-options-menu__menu--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
15039
+ --pf-c-options-menu__menu--BoxShadow: var(--pf-global--BoxShadow--md);
15040
+ --pf-c-options-menu__menu--PaddingTop: var(--pf-global--spacer--sm);
15041
+ --pf-c-options-menu__menu--PaddingBottom: var(--pf-global--spacer--sm);
15042
+ --pf-c-options-menu__menu--Top: calc(100% + var(--pf-global--spacer--xs));
15043
+ --pf-c-options-menu__menu--ZIndex: var(--pf-global--ZIndex--sm);
15044
+ --pf-c-options-menu--m-top__menu--Top: 0;
15045
+ --pf-c-options-menu--m-top__menu--TranslateY: calc(-100% - var(--pf-global--spacer--xs));
15046
+ --pf-c-options-menu__menu-item--BackgroundColor: transparent;
15047
+ --pf-c-options-menu__menu-item--Color: var(--pf-global--Color--100);
15048
+ --pf-c-options-menu__menu-item--FontSize: var(--pf-global--FontSize--md);
15049
+ --pf-c-options-menu__menu-item--PaddingTop: var(--pf-global--spacer--sm);
15050
+ --pf-c-options-menu__menu-item--PaddingRight: var(--pf-global--spacer--md);
15051
+ --pf-c-options-menu__menu-item--PaddingBottom: var(--pf-global--spacer--sm);
15052
+ --pf-c-options-menu__menu-item--PaddingLeft: var(--pf-global--spacer--md);
15053
+ --pf-c-options-menu__menu-item--disabled--Color: var(--pf-global--Color--dark-200);
15054
+ --pf-c-options-menu__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
15055
+ --pf-c-options-menu__menu-item--disabled--BackgroundColor: transparent;
15056
+ --pf-c-options-menu__menu-item-icon--Color: var(--pf-global--active-color--100);
15057
+ --pf-c-options-menu__menu-item-icon--FontSize: var(--pf-global--icon--FontSize--sm);
15058
+ --pf-c-options-menu__menu-item-icon--PaddingLeft: var(--pf-global--spacer--lg);
15059
+ --pf-c-options-menu__group--group--PaddingTop: var(--pf-global--spacer--sm);
15060
+ --pf-c-options-menu__group-title--PaddingTop: var(--pf-global--spacer--sm);
15061
+ --pf-c-options-menu__group-title--PaddingRight: var(--pf-c-options-menu__menu-item--PaddingRight);
15062
+ --pf-c-options-menu__group-title--PaddingBottom: var(--pf-c-options-menu__menu-item--PaddingBottom);
15063
+ --pf-c-options-menu__group-title--PaddingLeft: var(--pf-c-options-menu__menu-item--PaddingLeft);
15064
+ --pf-c-options-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
15065
+ --pf-c-options-menu__group-title--FontWeight: var(--pf-global--FontWeight--normal);
15066
+ --pf-c-options-menu__group-title--Color: var(--pf-global--Color--dark-200);
15067
+ --pf-c-options-menu--c-divider--MarginTop: var(--pf-global--spacer--sm);
15068
+ --pf-c-options-menu--c-divider--MarginBottom: var(--pf-global--spacer--sm);
14987
15069
  position: relative;
14988
- display: flex;
14989
- align-items: baseline;
14990
- padding: var(--pf-c-nav__link--PaddingTop) var(--pf-c-nav__link--PaddingRight) var(--pf-c-nav__link--PaddingBottom) var(--pf-c-nav__link--PaddingLeft);
14991
- font-size: var(--pf-c-nav__link--FontSize);
14992
- font-weight: var(--pf-c-nav__link--FontWeight);
14993
- color: var(--pf-c-nav__link--Color);
14994
- background-color: var(--pf-c-nav__link--BackgroundColor);
14995
- outline-offset: var(--pf-c-nav__link--OutlineOffset);
15070
+ display: inline-block;
15071
+ max-width: 100%;
14996
15072
  }
14997
15073
 
14998
- .pf-c-nav__link::after, .pf-c-nav__link::before {
14999
- position: absolute;
15000
- content: "";
15001
- border: 0 solid;
15074
+ .pf-c-options-menu .pf-c-divider {
15075
+ margin-top: var(--pf-c-options-menu--c-divider--MarginTop);
15076
+ margin-bottom: var(--pf-c-options-menu--c-divider--MarginBottom);
15002
15077
  }
15003
15078
 
15004
- .pf-c-nav__link::before {
15005
- right: 0;
15006
- bottom: calc(var(--pf-c-nav__link--before--BorderBottomWidth) * -1);
15007
- left: 0;
15008
- border-color: var(--pf-c-nav__link--before--BorderColor);
15009
- border-bottom-width: var(--pf-c-nav__link--before--BorderBottomWidth);
15079
+ .pf-c-options-menu .pf-c-divider:last-child {
15080
+ --pf-c-options-menu--c-divider--MarginBottom: 0;
15010
15081
  }
15011
15082
 
15012
- .pf-c-nav__link::after {
15083
+ .pf-c-options-menu__toggle:not(.pf-m-plain)::before,
15084
+ .pf-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-c-options-menu__toggle-button::before {
15085
+ position: absolute;
15013
15086
  top: 0;
15087
+ right: 0;
15014
15088
  bottom: 0;
15015
15089
  left: 0;
15016
- border: 0 solid;
15017
- border-color: var(--pf-c-nav__link--after--BorderColor);
15018
- border-left-width: var(--pf-c-nav__link--after--BorderLeftWidth);
15019
- }
15020
-
15021
- .pf-c-nav__link:hover, .pf-c-nav__link.pf-m-hover {
15022
- color: var(--pf-c-nav__link--hover--Color);
15023
- background-color: var(--pf-c-nav__link--hover--BackgroundColor);
15024
- }
15025
-
15026
- .pf-c-nav__link:hover::before, .pf-c-nav__link.pf-m-hover::before {
15027
- border-bottom-width: var(--pf-c-nav__link--hover--before--BorderBottomWidth);
15028
- }
15029
-
15030
- .pf-c-nav__link:hover::after, .pf-c-nav__link.pf-m-hover::after {
15031
- border-color: var(--pf-c-nav__link--hover--after--BorderColor);
15032
- border-left-width: var(--pf-c-nav__link--hover--after--BorderLeftWidth);
15033
- }
15034
-
15035
- .pf-c-nav__link:focus {
15036
- color: var(--pf-c-nav__link--focus--Color);
15037
- background-color: var(--pf-c-nav__link--focus--BackgroundColor);
15038
- }
15039
-
15040
- .pf-c-nav__link:focus::before {
15041
- border-bottom-width: var(--pf-c-nav__link--focus--before--BorderBottomWidth);
15042
- }
15043
-
15044
- .pf-c-nav__link:focus::after {
15045
- border-color: var(--pf-c-nav__link--focus--after--BorderColor);
15046
- border-left-width: var(--pf-c-nav__link--focus--after--BorderLeftWidth);
15047
- }
15048
-
15049
- .pf-c-nav__link:active {
15050
- color: var(--pf-c-nav__link--active--Color);
15051
- background-color: var(--pf-c-nav__link--active--BackgroundColor);
15052
- }
15053
-
15054
- .pf-c-nav__link:active::before {
15055
- border-bottom-width: var(--pf-c-nav__link--active--before--BorderBottomWidth);
15056
- }
15057
-
15058
- .pf-c-nav__link:active::after {
15059
- border-color: var(--pf-c-nav__link--active--after--BorderColor);
15060
- border-left-width: var(--pf-c-nav__link--active--after--BorderLeftWidth);
15090
+ content: "";
15091
+ border: var(--pf-c-options-menu__toggle--BorderWidth) solid;
15092
+ 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);
15061
15093
  }
15062
15094
 
15063
- .pf-c-nav__link.pf-m-current, .pf-c-nav__link.pf-m-current:hover, .pf-c-nav__item.pf-m-current:not(.pf-m-expanded) .pf-c-nav__link {
15064
- color: var(--pf-c-nav__link--m-current--Color);
15065
- background-color: var(--pf-c-nav__link--m-current--BackgroundColor);
15095
+ .pf-c-options-menu__toggle:not(.pf-m-plain):hover::before,
15096
+ .pf-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-c-options-menu__toggle-button:hover::before {
15097
+ --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--hover--BorderBottomColor);
15066
15098
  }
15067
15099
 
15068
- .pf-c-nav__link.pf-m-current::before, .pf-c-nav__link.pf-m-current:hover::before, .pf-c-nav__item.pf-m-current:not(.pf-m-expanded) .pf-c-nav__link::before {
15069
- border-bottom-width: var(--pf-c-nav__link--m-current--before--BorderBottomWidth);
15100
+ .pf-c-options-menu__toggle:not(.pf-m-plain):active::before, .pf-c-options-menu__toggle:not(.pf-m-plain).pf-m-active::before,
15101
+ .pf-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-c-options-menu__toggle-button:active::before,
15102
+ .pf-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-c-options-menu__toggle-button.pf-m-active::before {
15103
+ --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--active--BorderBottomColor);
15104
+ border-bottom-width: var(--pf-c-options-menu__toggle--active--BorderBottomWidth);
15070
15105
  }
15071
15106
 
15072
- .pf-c-nav__link.pf-m-current::after, .pf-c-nav__link.pf-m-current:hover::after, .pf-c-nav__item.pf-m-current:not(.pf-m-expanded) .pf-c-nav__link::after {
15073
- border-color: var(--pf-c-nav__link--m-current--after--BorderColor);
15074
- border-left-width: var(--pf-c-nav__link--m-current--after--BorderLeftWidth);
15107
+ .pf-c-options-menu__toggle:not(.pf-m-plain):focus::before,
15108
+ .pf-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-c-options-menu__toggle-button:focus::before {
15109
+ --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--focus--BorderBottomColor);
15110
+ border-bottom-width: var(--pf-c-options-menu__toggle--focus--BorderBottomWidth);
15075
15111
  }
15076
15112
 
15077
- .pf-c-nav__link, .pf-c-nav__link:hover, .pf-c-nav__link:focus, .pf-c-nav__link:active {
15078
- width: 100%;
15079
- text-decoration: none;
15113
+ .pf-c-options-menu__toggle {
15114
+ position: relative;
15115
+ display: flex;
15116
+ align-items: center;
15117
+ justify-content: space-between;
15118
+ min-width: var(--pf-c-options-menu__toggle--MinWidth);
15119
+ max-width: 100%;
15120
+ 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);
15121
+ line-height: var(--pf-c-options-menu__toggle--LineHeight);
15122
+ color: var(--pf-c-options-menu__toggle--Color);
15123
+ background-color: var(--pf-c-options-menu__toggle--BackgroundColor);
15080
15124
  border: none;
15081
15125
  }
15082
15126
 
15083
- .pf-c-nav__subnav {
15084
- --pf-c-nav__link--PaddingTop: var(--pf-c-nav__subnav__link--PaddingTop);
15085
- --pf-c-nav__link--PaddingRight: var(--pf-c-nav__subnav__link--PaddingRight);
15086
- --pf-c-nav__link--PaddingBottom: var(--pf-c-nav__subnav__link--PaddingBottom);
15087
- --pf-c-nav__link--PaddingLeft: var(--pf-c-nav__subnav__link--PaddingLeft);
15088
- --pf-c-nav__link--FontSize: var(--pf-c-nav__subnav__link--FontSize);
15089
- --pf-c-nav__link--hover--after--BorderColor: var(--pf-c-nav__subnav__link--hover--after--BorderColor);
15090
- --pf-c-nav__link--focus--after--BorderColor: var(--pf-c-nav__subnav__link--focus--after--BorderColor);
15091
- --pf-c-nav__link--active--after--BorderColor: var(--pf-c-nav__subnav__link--active--after--BorderColor);
15092
- --pf-c-nav__link--m-current--after--BorderColor: var(--pf-c-nav__subnav__link--m-current--after--BorderColor);
15093
- --pf-c-nav__link--hover--after--BorderLeftWidth: var(--pf-c-nav__subnav__link--hover--after--BorderWidth);
15094
- --pf-c-nav__link--focus--after--BorderLeftWidth: var(--pf-c-nav__subnav__link--focus--after--BorderWidth);
15095
- --pf-c-nav__link--active--after--BorderLeftWidth: var(--pf-c-nav__subnav__link--active--after--BorderWidth);
15096
- --pf-c-nav__link--m-current--after--BorderLeftWidth: var(--pf-c-nav__subnav__link--m-current--after--BorderWidth);
15097
- --pf-c-nav--c-divider--PaddingRight: var(--pf-c-nav__subnav--c-divider--PaddingRight);
15098
- --pf-c-nav--c-divider--PaddingLeft: var(--pf-c-nav__subnav--c-divider--PaddingLeft);
15099
- max-height: var(--pf-c-nav__subnav--MaxHeight);
15100
- padding-bottom: var(--pf-c-nav__subnav--PaddingBottom);
15101
- padding-left: var(--pf-c-nav__subnav--PaddingLeft);
15102
- transition: var(--pf-c-nav--Transition);
15103
- scrollbar-width: none;
15104
- -ms-overflow-style: -ms-autohiding-scrollbar;
15105
- }
15106
-
15107
- .pf-c-nav__subnav .pf-c-nav__subnav {
15108
- --pf-c-nav__link--FontSize: var(--pf-c-nav__subnav__subnav__link--FontSize);
15109
- --pf-c-nav__link--PaddingLeft: var(--pf-c-nav__subnav__subnav__link--PaddingLeft);
15110
- --pf-c-nav__subnav--PaddingLeft: var(--pf-c-nav__subnav__subnav--PaddingLeft);
15111
- }
15112
-
15113
- .pf-c-nav__subnav.pf-m-flyout {
15114
- width: 100%;
15115
- }
15116
-
15117
- .pf-c-nav__item.pf-m-expanded .pf-c-nav__subnav {
15118
- --pf-c-nav__subnav--MaxHeight: var(--pf-c-nav__item--m-expanded__subnav--MaxHeight);
15119
- overflow-y: auto;
15120
- opacity: 1;
15127
+ .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle::before {
15128
+ --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--expanded--BorderBottomColor);
15129
+ border-bottom-width: var(--pf-c-options-menu__toggle--expanded--BorderBottomWidth);
15121
15130
  }
15122
15131
 
15123
- .pf-c-nav__subnav::-webkit-scrollbar {
15124
- display: none;
15132
+ .pf-c-options-menu__toggle.pf-m-plain {
15133
+ --pf-c-options-menu__toggle-icon--Color: var(--pf-c-options-menu--m-plain__toggle-icon--Color);
15125
15134
  }
15126
15135
 
15127
- .pf-c-nav__toggle {
15128
- flex: none;
15129
- padding-right: var(--pf-c-nav__toggle--PaddingRight);
15130
- padding-left: var(--pf-c-nav__toggle--PaddingLeft);
15131
- margin-left: auto;
15132
- font-size: var(--pf-c-nav__toggle--FontSize);
15133
- line-height: 1;
15136
+ .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) {
15137
+ --pf-c-options-menu__toggle--PaddingRight: var(--pf-c-options-menu__toggle--m-plain--PaddingRight);
15138
+ --pf-c-options-menu__toggle--PaddingLeft: var(--pf-c-options-menu__toggle--m-plain--PaddingLeft);
15139
+ display: inline-block;
15140
+ color: var(--pf-c-options-menu__toggle--m-plain--Color);
15134
15141
  }
15135
15142
 
15136
- .pf-c-nav__toggle.pf-m-start {
15137
- margin-right: var(--pf-c-nav__toggle--m-start--MarginRight);
15138
- margin-left: calc(var(--pf-c-nav__toggle--PaddingRight) * -1);
15143
+ .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) .pf-c-options-menu__toggle-button-icon {
15144
+ line-height: var(--pf-c-options-menu__toggle--LineHeight);
15139
15145
  }
15140
15146
 
15141
- .pf-c-nav__toggle-icon {
15142
- display: inline-block;
15143
- transition: var(--pf-c-nav__toggle-icon--Transition);
15147
+ .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 {
15148
+ --pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--hover--Color);
15149
+ --pf-c-options-menu--m-plain__toggle-icon--Color: var(--pf-c-options-menu--m-plain--hover__toggle-icon--Color);
15144
15150
  }
15145
15151
 
15146
- .pf-c-nav__item.pf-m-expanded .pf-c-nav__toggle-icon {
15147
- transform: rotate(var(--pf-c-nav__item--m-expanded__toggle-icon--Rotate));
15152
+ .pf-c-options-menu__toggle.pf-m-plain.pf-m-disabled, .pf-c-options-menu__toggle.pf-m-plain:disabled {
15153
+ --pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--disabled--Color);
15148
15154
  }
15149
15155
 
15150
- .pf-c-nav__section {
15151
- --pf-c-nav__item--MarginTop: var(--pf-c-nav__section__item--MarginTop);
15152
- --pf-c-nav__link--PaddingTop: var(--pf-c-nav__section__link--PaddingTop);
15153
- --pf-c-nav__link--PaddingRight: var(--pf-c-nav__section__link--PaddingRight);
15154
- --pf-c-nav__link--PaddingBottom: var(--pf-c-nav__section__link--PaddingBottom);
15155
- --pf-c-nav__link--PaddingLeft: var(--pf-c-nav__section__link--PaddingLeft);
15156
- --pf-c-nav__link--FontSize: var(--pf-c-nav__section__link--FontSize);
15157
- --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav__section__link--before--BorderBottomWidth);
15158
- --pf-c-nav__link--hover--after--BorderColor: var(--pf-c-nav__section__link--hover--after--BorderColor);
15159
- --pf-c-nav__link--focus--after--BorderColor: var(--pf-c-nav__section__link--focus--after--BorderColor);
15160
- --pf-c-nav__link--active--after--BorderColor: var(--pf-c-nav__section__link--active--after--BorderColor);
15161
- --pf-c-nav__link--m-current--after--BorderColor: var(--pf-c-nav__section__link--m-current--after--BorderColor);
15162
- --pf-c-nav__link--hover--after--BorderLeftWidth: var(--pf-c-nav__section__link--hover--after--BorderWidth);
15163
- --pf-c-nav__link--focus--after--BorderLeftWidth: var(--pf-c-nav__section__link--focus--after--BorderWidth);
15164
- --pf-c-nav__link--active--after--BorderLeftWidth: var(--pf-c-nav__section__link--active--after--BorderWidth);
15165
- --pf-c-nav__link--m-current--after--BorderLeftWidth: var(--pf-c-nav__section__link--m-current--after--BorderWidth);
15166
- margin-top: var(--pf-c-nav__section--MarginTop);
15167
- --pf-c-nav--c-divider--MarginBottom: 0;
15156
+ .pf-c-options-menu__toggle.pf-m-disabled, .pf-c-options-menu__toggle:disabled {
15157
+ pointer-events: none;
15168
15158
  }
15169
15159
 
15170
- .pf-c-nav__section + .pf-c-nav__section {
15171
- --pf-c-nav__section--MarginTop: var(--pf-c-nav__section--section--MarginTop);
15160
+ .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 {
15161
+ --pf-c-options-menu__toggle--BackgroundColor: var(--pf-c-options-menu__toggle--disabled--BackgroundColor);
15172
15162
  }
15173
15163
 
15174
- .pf-c-nav__section.pf-m-no-title {
15175
- --pf-c-nav__section--MarginTop: 0;
15164
+ .pf-c-options-menu__toggle.pf-m-disabled::before, .pf-c-options-menu__toggle:disabled::before {
15165
+ border: 0;
15176
15166
  }
15177
15167
 
15178
- .pf-c-nav__section-title {
15179
- padding: var(--pf-c-nav__section-title--PaddingTop) var(--pf-c-nav__section-title--PaddingRight) var(--pf-c-nav__section-title--PaddingBottom) var(--pf-c-nav__section-title--PaddingLeft);
15180
- font-size: var(--pf-c-nav__section-title--FontSize);
15181
- color: var(--pf-c-nav__section-title--Color);
15182
- border-bottom: var(--pf-c-nav__section-title--BorderBottomWidth) solid var(--pf-c-nav__section-title--BorderBottomColor);
15168
+ .pf-c-options-menu__toggle-button-icon {
15169
+ position: relative;
15183
15170
  }
15184
15171
 
15185
- .pf-c-nav__scroll-button {
15186
- flex: none;
15187
- width: var(--pf-c-nav__scroll-button--Width);
15188
- color: var(--pf-c-nav__scroll-button--Color);
15189
- background-color: var(--pf-c-nav__scroll-button--BackgroundColor);
15172
+ .pf-c-options-menu__toggle-button {
15173
+ 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);
15174
+ background-color: var(--pf-c-options-menu__toggle-button--BackgroundColor);
15190
15175
  border: 0;
15191
- outline-offset: var(--pf-c-nav__scroll-button--OutlineOffset);
15192
- opacity: 0;
15193
- transition: var(--pf-c-nav__scroll-button--Transition);
15194
15176
  }
15195
15177
 
15196
- .pf-c-nav__scroll-button::before {
15197
- position: absolute;
15198
- top: 0;
15199
- bottom: 0;
15200
- content: "";
15201
- border: solid var(--pf-c-nav__scroll-button--before--BorderColor);
15202
- border-width: 0 var(--pf-c-nav__scroll-button--before--BorderRightWidth) 0 var(--pf-c-nav__scroll-button--before--BorderLeftWidth);
15178
+ .pf-c-options-menu__toggle-text {
15179
+ overflow: hidden;
15180
+ text-overflow: ellipsis;
15181
+ white-space: nowrap;
15203
15182
  }
15204
15183
 
15205
- .pf-c-nav__scroll-button:hover {
15206
- color: var(--pf-c-nav__scroll-button--hover--Color);
15184
+ .pf-c-options-menu__toggle-icon,
15185
+ .pf-c-options-menu__toggle-button-icon {
15186
+ color: var(--pf-c-options-menu__toggle-icon--Color, inherit);
15207
15187
  }
15208
15188
 
15209
- .pf-c-nav__scroll-button:focus {
15210
- color: var(--pf-c-nav__scroll-button--focus--Color);
15189
+ .pf-c-options-menu__toggle-icon {
15190
+ margin-right: var(--pf-c-options-menu__toggle-icon--MarginRight);
15191
+ margin-left: var(--pf-c-options-menu__toggle-icon--MarginLeft);
15211
15192
  }
15212
15193
 
15213
- .pf-c-nav__scroll-button:active {
15214
- color: var(--pf-c-nav__scroll-button--active--Color);
15194
+ .pf-c-options-menu.pf-m-top.pf-m-expanded .pf-c-options-menu__toggle-icon {
15195
+ transform: rotate(var(--pf-c-options-menu--m-top--m-expanded__toggle-icon--Rotate));
15215
15196
  }
15216
15197
 
15217
- .pf-c-nav__scroll-button:disabled {
15218
- color: var(--pf-c-nav__scroll-button--disabled--Color);
15219
- border-color: var(--pf-c-nav__scroll-button--disabled--before--BorderColor);
15198
+ .pf-c-options-menu__menu {
15199
+ position: absolute;
15200
+ top: var(--pf-c-options-menu__menu--Top);
15201
+ z-index: var(--pf-c-options-menu__menu--ZIndex);
15202
+ min-width: 100%;
15203
+ padding-top: var(--pf-c-options-menu__menu--PaddingTop);
15204
+ padding-bottom: var(--pf-c-options-menu__menu--PaddingBottom);
15205
+ background-color: var(--pf-c-options-menu__menu--BackgroundColor);
15206
+ background-clip: padding-box;
15207
+ box-shadow: var(--pf-c-options-menu__menu--BoxShadow);
15220
15208
  }
15221
15209
 
15222
- .pf-c-nav__scroll-button:nth-of-type(1) {
15223
- --pf-c-nav__scroll-button--before--BorderRightWidth: var(--pf-c-nav__scroll-button--before--BorderWidth);
15224
- margin-right: calc(var(--pf-c-nav__scroll-button--Width) * -1);
15225
- transform: translateX(-100%);
15210
+ .pf-c-options-menu__menu.pf-m-align-right {
15211
+ right: 0;
15226
15212
  }
15227
15213
 
15228
- .pf-c-nav__scroll-button:nth-of-type(1)::before {
15229
- right: 0;
15214
+ .pf-c-options-menu.pf-m-top .pf-c-options-menu__menu {
15215
+ --pf-c-options-menu__menu--Top: var(--pf-c-options-menu--m-top__menu--Top);
15216
+ transform: translateY(var(--pf-c-options-menu--m-top__menu--TranslateY));
15230
15217
  }
15231
15218
 
15232
- .pf-c-nav__scroll-button:nth-of-type(2) {
15233
- --pf-c-nav__scroll-button--before--BorderLeftWidth: var(--pf-c-nav__scroll-button--before--BorderWidth);
15234
- margin-left: calc(var(--pf-c-nav__scroll-button--Width) * -1);
15235
- transform: translateX(100%);
15219
+ .pf-c-options-menu__menu-item {
15220
+ display: flex;
15221
+ align-items: baseline;
15222
+ width: 100%;
15223
+ 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);
15224
+ font-size: var(--pf-c-options-menu__menu-item--FontSize);
15225
+ color: var(--pf-c-options-menu__menu-item--Color);
15226
+ white-space: nowrap;
15227
+ background-color: var(--pf-c-options-menu__menu-item--BackgroundColor);
15228
+ border: none;
15236
15229
  }
15237
15230
 
15238
- .pf-c-nav__scroll-button:nth-of-type(2)::before {
15239
- left: 0;
15231
+ .pf-c-options-menu__menu-item:hover, .pf-c-options-menu__menu-item:focus {
15232
+ text-decoration: none;
15233
+ background-color: var(--pf-c-options-menu__menu-item--hover--BackgroundColor);
15240
15234
  }
15241
15235
 
15242
- :where(.pf-theme-dark) .pf-c-nav {
15243
- --pf-c-nav__item--item__link--after--Top: -1px;
15244
- --pf-c-nav__item--before--BorderColor: var(--pf-global--BorderColor--100);
15245
- --pf-c-nav__link--hover--BackgroundColor: var(--pf-global--BackgroundColor--300);
15246
- --pf-c-nav__link--focus--BackgroundColor: var(--pf-global--BackgroundColor--300);
15247
- --pf-c-nav__link--active--BackgroundColor: var(--pf-global--BackgroundColor--300);
15248
- --pf-c-nav__link--m-current--BackgroundColor: var(--pf-global--BackgroundColor--300);
15249
- --pf-c-nav__link--before--BorderColor: var(--pf-global--BorderColor--100);
15250
- --pf-c-nav--m-tertiary__scroll-button--before--BorderColor: var(--pf-global--BorderColor--100);
15251
- --pf-c-nav__section-title--Color: var(--pf-global--Color--200);
15252
- --pf-c-nav__section-title--BorderBottomColor: var(--pf-global--BorderColor--100);
15253
- --pf-c-nav__scroll-button--before--BorderColor: var(--pf-global--BorderColor--100);
15254
- --pf-c-nav--c-divider--BackgroundColor: var(--pf-global--BorderColor--100);
15255
- --pf-c-nav__link--hover--before--BorderBottomWidth: 0;
15256
- --pf-c-nav__link--focus--before--BorderBottomWidth: 0;
15257
- --pf-c-nav__link--active--before--BorderBottomWidth: 0;
15258
- --pf-c-nav__link--m-current--before--BorderBottomWidth: 0;
15236
+ .pf-c-options-menu__menu-item:disabled, .pf-c-options-menu__menu-item.pf-m-disabled {
15237
+ color: var(--pf-c-options-menu__menu-item--disabled--Color);
15238
+ pointer-events: none;
15239
+ background-color: var(--pf-c-options-menu__menu-item--disabled--BackgroundColor);
15259
15240
  }
15260
15241
 
15261
- :where(.pf-theme-dark) .pf-c-nav__link::before {
15262
- bottom: 0;
15242
+ .pf-c-options-menu__menu-item-icon {
15243
+ align-self: center;
15244
+ width: auto;
15245
+ padding-left: var(--pf-c-options-menu__menu-item-icon--PaddingLeft);
15246
+ margin-left: auto;
15247
+ font-size: var(--pf-c-options-menu__menu-item-icon--FontSize);
15248
+ color: var(--pf-c-options-menu__menu-item-icon--Color);
15263
15249
  }
15264
15250
 
15265
- :where(.pf-theme-dark) .pf-c-nav__link::after {
15266
- top: var(--pf-c-nav__item--item__link--after--Top);
15251
+ .pf-c-options-menu__group + .pf-c-options-menu__group {
15252
+ padding-top: var(--pf-c-options-menu__group--group--PaddingTop);
15267
15253
  }
15268
15254
 
15269
- :where(.pf-theme-dark) .pf-c-nav__item + .pf-c-nav__item {
15270
- --pf-c-nav__link--after--Top: var(--pf-c-nav__item--item__link--after--Top);
15255
+ .pf-c-options-menu__group-title {
15256
+ padding-top: var(--pf-c-options-menu__group-title--PaddingTop);
15257
+ padding-right: var(--pf-c-options-menu__group-title--PaddingRight);
15258
+ padding-bottom: var(--pf-c-options-menu__group-title--PaddingBottom);
15259
+ padding-left: var(--pf-c-options-menu__group-title--PaddingLeft);
15260
+ font-size: var(--pf-c-options-menu__group-title--FontSize);
15261
+ font-weight: var(--pf-c-options-menu__group-title--FontWeight);
15262
+ color: var(--pf-c-options-menu__group-title--Color);
15271
15263
  }
15272
15264
 
15273
- :where(.pf-theme-dark) .pf-c-nav__subnav {
15274
- --pf-c-nav__item--item__link--after--Top: 0;
15265
+ :where(.pf-theme-dark) .pf-c-options-menu {
15266
+ --pf-c-options-menu__toggle--BackgroundColor: var(--pf-global--BackgroundColor--400);
15267
+ --pf-c-options-menu__toggle--BorderTopColor: transparent;
15268
+ --pf-c-options-menu__toggle--BorderRightColor: transparent;
15269
+ --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-global--BorderColor--400);
15270
+ --pf-c-options-menu__toggle--BorderLeftColor: transparent;
15271
+ --pf-c-options-menu__toggle--disabled--BackgroundColor: var(--pf-global--palette--black-500);
15272
+ --pf-c-options-menu__menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
15273
+ --pf-c-options-menu__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
15274
+ --pf-c-options-menu__menu--Top: 100%;
15275
15275
  }
15276
15276
 
15277
- :where(.pf-theme-dark) .pf-c-nav__section {
15278
- --pf-c-nav__item--item__link--after--Top: 0;
15277
+ :where(.pf-theme-dark) .pf-c-options-menu__toggle.pf-m-plain {
15278
+ background: transparent;
15279
15279
  }
15280
15280
 
15281
15281
  .pf-c-overflow-menu {
@@ -26216,6 +26216,75 @@ label.pf-c-tree-view__node-text {
26216
26216
  --pf-l-flex--spacer: var(--pf-l-flex--spacer--4xl);
26217
26217
  }
26218
26218
  }
26219
+ .pf-l-gallery {
26220
+ --pf-l-gallery--m-gutter--GridGap: var(--pf-global--gutter);
26221
+ --pf-l-gallery--GridTemplateColumns--min: 250px;
26222
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
26223
+ --pf-l-gallery--GridTemplateColumns--max: 1fr;
26224
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
26225
+ --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
26226
+ --pf-l-gallery--GridTemplateRows: auto;
26227
+ display: grid;
26228
+ grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
26229
+ grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
26230
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
26231
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
26232
+ }
26233
+
26234
+ .pf-l-gallery.pf-m-gutter {
26235
+ grid-gap: var(--pf-l-gallery--m-gutter--GridGap);
26236
+ }
26237
+
26238
+ @media (min-width: 576px) {
26239
+ .pf-l-gallery {
26240
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min));
26241
+ }
26242
+ }
26243
+ @media (min-width: 768px) {
26244
+ .pf-l-gallery {
26245
+ --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)));
26246
+ }
26247
+ }
26248
+ @media (min-width: 992px) {
26249
+ .pf-l-gallery {
26250
+ --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))));
26251
+ }
26252
+ }
26253
+ @media (min-width: 1200px) {
26254
+ .pf-l-gallery {
26255
+ --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)))));
26256
+ }
26257
+ }
26258
+ @media (min-width: 1450px) {
26259
+ .pf-l-gallery {
26260
+ --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))))));
26261
+ }
26262
+ }
26263
+ @media (min-width: 576px) {
26264
+ .pf-l-gallery {
26265
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max));
26266
+ }
26267
+ }
26268
+ @media (min-width: 768px) {
26269
+ .pf-l-gallery {
26270
+ --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)));
26271
+ }
26272
+ }
26273
+ @media (min-width: 992px) {
26274
+ .pf-l-gallery {
26275
+ --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))));
26276
+ }
26277
+ }
26278
+ @media (min-width: 1200px) {
26279
+ .pf-l-gallery {
26280
+ --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)))));
26281
+ }
26282
+ }
26283
+ @media (min-width: 1450px) {
26284
+ .pf-l-gallery {
26285
+ --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))))));
26286
+ }
26287
+ }
26219
26288
  .pf-l-grid {
26220
26289
  --pf-l-grid--m-gutter--GridGap: var(--pf-global--gutter);
26221
26290
  --pf-l-grid__item--GridColumnStart: auto;
@@ -27430,75 +27499,6 @@ label.pf-c-tree-view__node-text {
27430
27499
  grid-gap: var(--pf-l-grid--m-gutter--GridGap);
27431
27500
  }
27432
27501
 
27433
- .pf-l-gallery {
27434
- --pf-l-gallery--m-gutter--GridGap: var(--pf-global--gutter);
27435
- --pf-l-gallery--GridTemplateColumns--min: 250px;
27436
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
27437
- --pf-l-gallery--GridTemplateColumns--max: 1fr;
27438
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
27439
- --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
27440
- --pf-l-gallery--GridTemplateRows: auto;
27441
- display: grid;
27442
- grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
27443
- grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
27444
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
27445
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
27446
- }
27447
-
27448
- .pf-l-gallery.pf-m-gutter {
27449
- grid-gap: var(--pf-l-gallery--m-gutter--GridGap);
27450
- }
27451
-
27452
- @media (min-width: 576px) {
27453
- .pf-l-gallery {
27454
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min));
27455
- }
27456
- }
27457
- @media (min-width: 768px) {
27458
- .pf-l-gallery {
27459
- --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)));
27460
- }
27461
- }
27462
- @media (min-width: 992px) {
27463
- .pf-l-gallery {
27464
- --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))));
27465
- }
27466
- }
27467
- @media (min-width: 1200px) {
27468
- .pf-l-gallery {
27469
- --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)))));
27470
- }
27471
- }
27472
- @media (min-width: 1450px) {
27473
- .pf-l-gallery {
27474
- --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))))));
27475
- }
27476
- }
27477
- @media (min-width: 576px) {
27478
- .pf-l-gallery {
27479
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max));
27480
- }
27481
- }
27482
- @media (min-width: 768px) {
27483
- .pf-l-gallery {
27484
- --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)));
27485
- }
27486
- }
27487
- @media (min-width: 992px) {
27488
- .pf-l-gallery {
27489
- --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))));
27490
- }
27491
- }
27492
- @media (min-width: 1200px) {
27493
- .pf-l-gallery {
27494
- --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)))));
27495
- }
27496
- }
27497
- @media (min-width: 1450px) {
27498
- .pf-l-gallery {
27499
- --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))))));
27500
- }
27501
- }
27502
27502
  .pf-l-level {
27503
27503
  --pf-l-level--m-gutter--MarginRight: var(--pf-global--gutter);
27504
27504
  display: flex;