@patternfly/react-table 4.41.0 → 4.43.2

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 (74) hide show
  1. package/CHANGELOG.md +38 -0
  2. package/dist/esm/components/Table/base/provider.d.ts +5 -5
  3. package/dist/esm/components/Table/base/types.d.ts +5 -5
  4. package/dist/esm/components/TableComposable/InnerScrollContainer.d.ts +9 -0
  5. package/dist/esm/components/TableComposable/InnerScrollContainer.d.ts.map +1 -0
  6. package/dist/esm/components/TableComposable/InnerScrollContainer.js +10 -0
  7. package/dist/esm/components/TableComposable/InnerScrollContainer.js.map +1 -0
  8. package/dist/esm/components/TableComposable/OuterScrollContainer.d.ts +9 -0
  9. package/dist/esm/components/TableComposable/OuterScrollContainer.d.ts.map +1 -0
  10. package/dist/esm/components/TableComposable/OuterScrollContainer.js +10 -0
  11. package/dist/esm/components/TableComposable/OuterScrollContainer.js.map +1 -0
  12. package/dist/esm/components/TableComposable/TableComposable.d.ts +3 -1
  13. package/dist/esm/components/TableComposable/TableComposable.d.ts.map +1 -1
  14. package/dist/esm/components/TableComposable/TableComposable.js +12 -2
  15. package/dist/esm/components/TableComposable/TableComposable.js.map +1 -1
  16. package/dist/esm/components/TableComposable/Th.d.ts +11 -1
  17. package/dist/esm/components/TableComposable/Th.d.ts.map +1 -1
  18. package/dist/esm/components/TableComposable/Th.js +5 -2
  19. package/dist/esm/components/TableComposable/Th.js.map +1 -1
  20. package/dist/esm/components/TableComposable/Thead.d.ts +3 -1
  21. package/dist/esm/components/TableComposable/Thead.d.ts.map +1 -1
  22. package/dist/esm/components/TableComposable/Thead.js +2 -2
  23. package/dist/esm/components/TableComposable/Thead.js.map +1 -1
  24. package/dist/esm/components/TableComposable/Tr.d.ts +3 -1
  25. package/dist/esm/components/TableComposable/Tr.d.ts.map +1 -1
  26. package/dist/esm/components/TableComposable/Tr.js +2 -2
  27. package/dist/esm/components/TableComposable/Tr.js.map +1 -1
  28. package/dist/esm/components/TableComposable/index.d.ts +2 -0
  29. package/dist/esm/components/TableComposable/index.d.ts.map +1 -1
  30. package/dist/esm/components/TableComposable/index.js +2 -0
  31. package/dist/esm/components/TableComposable/index.js.map +1 -1
  32. package/dist/js/components/Table/base/provider.d.ts +5 -5
  33. package/dist/js/components/Table/base/types.d.ts +5 -5
  34. package/dist/js/components/TableComposable/InnerScrollContainer.d.ts +9 -0
  35. package/dist/js/components/TableComposable/InnerScrollContainer.d.ts.map +1 -0
  36. package/dist/js/components/TableComposable/InnerScrollContainer.js +14 -0
  37. package/dist/js/components/TableComposable/InnerScrollContainer.js.map +1 -0
  38. package/dist/js/components/TableComposable/OuterScrollContainer.d.ts +9 -0
  39. package/dist/js/components/TableComposable/OuterScrollContainer.d.ts.map +1 -0
  40. package/dist/js/components/TableComposable/OuterScrollContainer.js +14 -0
  41. package/dist/js/components/TableComposable/OuterScrollContainer.js.map +1 -0
  42. package/dist/js/components/TableComposable/TableComposable.d.ts +3 -1
  43. package/dist/js/components/TableComposable/TableComposable.d.ts.map +1 -1
  44. package/dist/js/components/TableComposable/TableComposable.js +12 -2
  45. package/dist/js/components/TableComposable/TableComposable.js.map +1 -1
  46. package/dist/js/components/TableComposable/Th.d.ts +11 -1
  47. package/dist/js/components/TableComposable/Th.d.ts.map +1 -1
  48. package/dist/js/components/TableComposable/Th.js +5 -2
  49. package/dist/js/components/TableComposable/Th.js.map +1 -1
  50. package/dist/js/components/TableComposable/Thead.d.ts +3 -1
  51. package/dist/js/components/TableComposable/Thead.d.ts.map +1 -1
  52. package/dist/js/components/TableComposable/Thead.js +2 -2
  53. package/dist/js/components/TableComposable/Thead.js.map +1 -1
  54. package/dist/js/components/TableComposable/Tr.d.ts +3 -1
  55. package/dist/js/components/TableComposable/Tr.d.ts.map +1 -1
  56. package/dist/js/components/TableComposable/Tr.js +2 -2
  57. package/dist/js/components/TableComposable/Tr.js.map +1 -1
  58. package/dist/js/components/TableComposable/index.d.ts +2 -0
  59. package/dist/js/components/TableComposable/index.d.ts.map +1 -1
  60. package/dist/js/components/TableComposable/index.js +2 -0
  61. package/dist/js/components/TableComposable/index.js.map +1 -1
  62. package/dist/umd/react-table.css +497 -90
  63. package/dist/umd/react-table.js +247 -208
  64. package/dist/umd/react-table.min.css +497 -90
  65. package/dist/umd/react-table.min.js +3 -3
  66. package/package.json +6 -6
  67. package/src/components/TableComposable/InnerScrollContainer.tsx +22 -0
  68. package/src/components/TableComposable/OuterScrollContainer.tsx +22 -0
  69. package/src/components/TableComposable/TableComposable.tsx +11 -0
  70. package/src/components/TableComposable/Th.tsx +26 -0
  71. package/src/components/TableComposable/Thead.tsx +12 -1
  72. package/src/components/TableComposable/Tr.tsx +5 -1
  73. package/src/components/TableComposable/examples/ComposableTable.md +1106 -0
  74. package/src/components/TableComposable/index.ts +2 -0
@@ -4158,6 +4158,63 @@
4158
4158
  --pf-c-table--cell--Width: auto;
4159
4159
  }
4160
4160
  }
4161
+ .pf-c-table {
4162
+ --pf-c-table__sticky-column--cell-min-width--base: 12.5rem;
4163
+ --pf-c-table__sticky-column--MinWidth: var(--pf-c-table__sticky-column--cell-min-width--base);
4164
+ --pf-c-table__sticky-column--Left: 0;
4165
+ --pf-c-table__sticky-column--ZIndex: var(--pf-global--ZIndex--md);
4166
+ --pf-c-table__sticky-column--Top: 0;
4167
+ --pf-c-table__sticky-column--BackgroundColor: var(--pf-global--BackgroundColor--100);
4168
+ --pf-c-table__sticky-column--m-border-right--before--BorderRightWidth: var(--pf-global--BorderWidth--sm);
4169
+ --pf-c-table__sticky-column--m-border-right--before--BorderRightColor: var(--pf-global--BorderColor--100);
4170
+ --pf-c-table--m-sticky-header--thead__sticky-column--ZIndex: calc(var(--pf-c-table__sticky-column--ZIndex) + 1);
4171
+ }
4172
+
4173
+ .pf-c-table .pf-c-table__sticky-column {
4174
+ position: sticky;
4175
+ left: var(--pf-c-table__sticky-column--Left);
4176
+ z-index: var(--pf-c-table__sticky-column--ZIndex);
4177
+ min-width: var(--pf-c-table__sticky-column--MinWidth);
4178
+ background-color: var(--pf-c-table__sticky-column--BackgroundColor);
4179
+ background-clip: padding-box;
4180
+ }
4181
+
4182
+ .pf-c-table .pf-c-table__sticky-column.pf-m-border-right::before {
4183
+ --pf-c-table--cell--m-border-right--before--BorderRightWidth: var(--pf-c-table__sticky-column--m-border-right--before--BorderRightWidth);
4184
+ --pf-c-table--cell--m-border-right--before--BorderRightColor: var(--pf-c-table__sticky-column--m-border-right--before--BorderRightColor);
4185
+ }
4186
+
4187
+ .pf-c-table .pf-c-table__sticky-column.pf-m-border-left::before {
4188
+ --pf-c-table--cell--m-border-left--before--BorderLeftWidth: var(--pf-c-table__sticky-column--m-border-left--before--BorderLeftWidth);
4189
+ --pf-c-table--cell--m-border-left--before--BorderLeftColor: var(--pf-c-table__sticky-column--m-border-left--before--BorderLeftColor);
4190
+ }
4191
+
4192
+ .pf-c-table.pf-m-sticky-header {
4193
+ --pf-c-table--cell--Overflow: visible;
4194
+ }
4195
+
4196
+ .pf-c-table.pf-m-sticky-header thead .pf-c-table__sticky-column {
4197
+ z-index: var(--pf-c-table--m-sticky-header--thead__sticky-column--ZIndex);
4198
+ }
4199
+
4200
+ .pf-c-scroll-outer-wrapper {
4201
+ --pf-c-scroll-outer-wrapper--MinHeight: 25rem;
4202
+ display: flex;
4203
+ flex-direction: column;
4204
+ max-width: 100%;
4205
+ min-height: var(--pf-c-scroll-outer-wrapper--MinHeight);
4206
+ max-height: 100%;
4207
+ overflow: hidden;
4208
+ }
4209
+
4210
+ .pf-c-scroll-inner-wrapper {
4211
+ display: flex;
4212
+ flex-direction: column;
4213
+ max-width: 100%;
4214
+ max-height: 100%;
4215
+ overflow: auto;
4216
+ }
4217
+
4161
4218
  .pf-c-form {
4162
4219
  --pf-c-form--GridGap: var(--pf-global--gutter--md);
4163
4220
  --pf-c-form__group--m-action--MarginTop: var(--pf-global--spacer--xl);
@@ -5280,10 +5337,10 @@ label.pf-c-check, .pf-c-check__label,
5280
5337
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-global--BorderColor--200);
5281
5338
  --pf-c-dropdown__toggle--before--BorderLeftColor: var(--pf-global--BorderColor--300);
5282
5339
  --pf-c-dropdown__toggle--hover--before--BorderBottomColor: var(--pf-global--active-color--100);
5283
- --pf-c-dropdown__toggle--active--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
5284
- --pf-c-dropdown__toggle--active--before--BorderBottomColor: var(--pf-global--active-color--100);
5285
5340
  --pf-c-dropdown__toggle--focus--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
5286
5341
  --pf-c-dropdown__toggle--focus--before--BorderBottomColor: var(--pf-global--active-color--100);
5342
+ --pf-c-dropdown__toggle--active--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
5343
+ --pf-c-dropdown__toggle--active--before--BorderBottomColor: var(--pf-global--active-color--100);
5287
5344
  --pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
5288
5345
  --pf-c-dropdown--m-expanded__toggle--before--BorderBottomColor: var(--pf-global--active-color--100);
5289
5346
  --pf-c-dropdown__toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
@@ -5297,9 +5354,22 @@ label.pf-c-check, .pf-c-check__label,
5297
5354
  --pf-c-dropdown__toggle--m-primary--BorderRadius: var(--pf-global--BorderRadius--sm);
5298
5355
  --pf-c-dropdown__toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--100);
5299
5356
  --pf-c-dropdown__toggle--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
5300
- --pf-c-dropdown__toggle--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
5301
5357
  --pf-c-dropdown__toggle--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
5358
+ --pf-c-dropdown__toggle--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
5302
5359
  --pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--200);
5360
+ --pf-c-dropdown__toggle--m-secondary--Color: var(--pf-global--primary-color--100);
5361
+ --pf-c-dropdown__toggle--m-secondary--BorderRadius: var(--pf-global--BorderRadius--sm);
5362
+ --pf-c-dropdown__toggle--m-secondary--BackgroundColor: transparent;
5363
+ --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--sm);
5364
+ --pf-c-dropdown__toggle--m-secondary--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
5365
+ --pf-c-dropdown__toggle--m-secondary--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
5366
+ --pf-c-dropdown__toggle--m-secondary--active--before--BorderWidth: var(--pf-global--BorderWidth--md);
5367
+ --pf-c-dropdown__toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
5368
+ --pf-c-dropdown__toggle--m-secondary--hover--before--BorderColor: var(--pf-global--primary-color--100);
5369
+ --pf-c-dropdown__toggle--m-secondary--focus--before--BorderColor: var(--pf-global--primary-color--100);
5370
+ --pf-c-dropdown__toggle--m-secondary--active--before--BorderColor: var(--pf-global--primary-color--100);
5371
+ --pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--md);
5372
+ --pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
5303
5373
  --pf-c-dropdown__toggle-button--Color: var(--pf-global--Color--100);
5304
5374
  --pf-c-dropdown__toggle--m-split-button--child--PaddingTop: var(--pf-global--spacer--form-element);
5305
5375
  --pf-c-dropdown__toggle--m-split-button--child--PaddingRight: var(--pf-global--spacer--xs);
@@ -5313,6 +5383,14 @@ label.pf-c-check, .pf-c-check__label,
5313
5383
  --pf-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight: calc(-1 * var(--pf-global--BorderWidth--sm));
5314
5384
  --pf-c-dropdown__toggle--m-split-button__toggle-check__input--TranslateY: -0.0625rem;
5315
5385
  --pf-c-dropdown__toggle--m-split-button__toggle-text--MarginLeft: var(--pf-global--spacer--sm);
5386
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius: var(--pf-global--BorderRadius--sm);
5387
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-global--primary-color--100);
5388
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-global--primary-color--200);
5389
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor: var(--pf-global--primary-color--200);
5390
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--active--BackgroundColor: var(--pf-global--primary-color--200);
5391
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor: var(--pf-global--primary-color--200);
5392
+ --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor: var(--pf-global--primary-color--200);
5393
+ --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
5316
5394
  --pf-c-dropdown__toggle-icon--LineHeight: var(--pf-global--LineHeight--md);
5317
5395
  --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
5318
5396
  --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
@@ -5413,6 +5491,10 @@ label.pf-c-check, .pf-c-check__label,
5413
5491
  border-bottom-width: var(--pf-c-dropdown--m-full-height__toggle--hover--before--BorderBottomWidth);
5414
5492
  }
5415
5493
 
5494
+ .pf-c-dropdown.pf-m-expanded {
5495
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor);
5496
+ }
5497
+
5416
5498
  .pf-c-dropdown__toggle {
5417
5499
  position: relative;
5418
5500
  display: flex;
@@ -5490,6 +5572,10 @@ label.pf-c-check, .pf-c-check__label,
5490
5572
  --pf-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight: 0;
5491
5573
  }
5492
5574
 
5575
+ .pf-c-dropdown__toggle.pf-m-split-button.pf-m-action.pf-m-primary > :not(:first-child) {
5576
+ border-left: var(--pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth) solid var(--pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor);
5577
+ }
5578
+
5493
5579
  .pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-check {
5494
5580
  display: flex;
5495
5581
  align-items: center;
@@ -5511,21 +5597,53 @@ label.pf-c-check, .pf-c-check__label,
5511
5597
  margin-left: var(--pf-c-dropdown__toggle--m-split-button__toggle-text--MarginLeft);
5512
5598
  }
5513
5599
 
5514
- .pf-c-dropdown__toggle:not(.pf-m-action):hover::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:hover::before {
5600
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) {
5601
+ --pf-c-dropdown__toggle--before--BorderWidth: 0;
5602
+ --pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth: 0;
5603
+ }
5604
+
5605
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > * {
5606
+ background-color: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor);
5607
+ border: 0;
5608
+ }
5609
+
5610
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *:hover {
5611
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor);
5612
+ }
5613
+
5614
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *:focus {
5615
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor);
5616
+ }
5617
+
5618
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *:active, .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *.pf-m-active {
5619
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor);
5620
+ }
5621
+
5622
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > :first-child {
5623
+ border-top-left-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
5624
+ border-bottom-left-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
5625
+ }
5626
+
5627
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > :last-child {
5628
+ border-top-right-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
5629
+ border-bottom-right-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
5630
+ }
5631
+
5632
+ .pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary):hover::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:hover::before {
5515
5633
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--hover--before--BorderBottomColor);
5516
5634
  }
5517
5635
 
5518
- .pf-c-dropdown__toggle:not(.pf-m-action):active::before, .pf-c-dropdown__toggle:not(.pf-m-action).pf-m-active::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:active::before {
5636
+ .pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary):active::before, .pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary).pf-m-active::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:active::before {
5519
5637
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--active--before--BorderBottomColor);
5520
5638
  border-bottom-width: var(--pf-c-dropdown__toggle--active--before--BorderBottomWidth);
5521
5639
  }
5522
5640
 
5523
- .pf-c-dropdown__toggle:not(.pf-m-action):focus::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:focus::before {
5641
+ .pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary):focus::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:focus::before {
5524
5642
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--focus--before--BorderBottomColor);
5525
5643
  border-bottom-width: var(--pf-c-dropdown__toggle--focus--before--BorderBottomWidth);
5526
5644
  }
5527
5645
 
5528
- .pf-m-expanded > .pf-c-dropdown__toggle:not(.pf-m-action)::before, .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button::before {
5646
+ .pf-m-expanded > .pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary)::before, .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button::before {
5529
5647
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown--m-expanded__toggle--before--BorderBottomColor);
5530
5648
  border-bottom-width: var(--pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth);
5531
5649
  }
@@ -5545,7 +5663,7 @@ label.pf-c-check, .pf-c-check__label,
5545
5663
  border: 0;
5546
5664
  }
5547
5665
 
5548
- .pf-c-dropdown__toggle.pf-m-plain:hover, .pf-c-dropdown__toggle.pf-m-plain:active, .pf-c-dropdown__toggle.pf-m-plain.pf-m-active, .pf-c-dropdown__toggle.pf-m-plain:focus, .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-plain {
5666
+ .pf-c-dropdown__toggle.pf-m-plain:hover, .pf-c-dropdown__toggle.pf-m-plain:focus, .pf-c-dropdown__toggle.pf-m-plain:active, .pf-c-dropdown__toggle.pf-m-plain.pf-m-active, .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-plain {
5549
5667
  --pf-c-dropdown__toggle--m-plain--Color: var(--pf-c-dropdown__toggle--m-plain--hover--Color);
5550
5668
  }
5551
5669
 
@@ -5554,11 +5672,15 @@ label.pf-c-check, .pf-c-check__label,
5554
5672
  }
5555
5673
 
5556
5674
  .pf-c-dropdown__toggle.pf-m-primary {
5557
- --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
5558
5675
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--BackgroundColor);
5676
+ --pf-c-dropdown__toggle-button--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
5559
5677
  border-radius: var(--pf-c-dropdown__toggle--m-primary--BorderRadius);
5560
5678
  }
5561
5679
 
5680
+ .pf-c-dropdown__toggle.pf-m-primary:not(.pf-m-disabled) {
5681
+ --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
5682
+ }
5683
+
5562
5684
  .pf-c-dropdown__toggle.pf-m-primary::before {
5563
5685
  border: 0;
5564
5686
  }
@@ -5567,18 +5689,46 @@ label.pf-c-check, .pf-c-check__label,
5567
5689
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--hover--BackgroundColor);
5568
5690
  }
5569
5691
 
5570
- .pf-c-dropdown__toggle.pf-m-primary:active, .pf-c-dropdown__toggle.pf-m-primary.pf-m-active {
5571
- --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--active--BackgroundColor);
5572
- }
5573
-
5574
5692
  .pf-c-dropdown__toggle.pf-m-primary:focus {
5575
5693
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--focus--BackgroundColor);
5576
5694
  }
5577
5695
 
5696
+ .pf-c-dropdown__toggle.pf-m-primary:active, .pf-c-dropdown__toggle.pf-m-primary.pf-m-active {
5697
+ --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--active--BackgroundColor);
5698
+ }
5699
+
5578
5700
  .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-primary {
5579
5701
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor);
5580
5702
  }
5581
5703
 
5704
+ .pf-c-dropdown__toggle.pf-m-secondary {
5705
+ --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-secondary--Color);
5706
+ --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-secondary--BackgroundColor);
5707
+ border-radius: var(--pf-c-dropdown__toggle--m-secondary--BorderRadius);
5708
+ }
5709
+
5710
+ .pf-c-dropdown__toggle.pf-m-secondary::before {
5711
+ border: var(--pf-c-dropdown__toggle--m-secondary--before--BorderWidth) solid var(--pf-c-dropdown__toggle--m-secondary--before--BorderColor);
5712
+ border-radius: var(--pf-c-dropdown__toggle--m-secondary--BorderRadius);
5713
+ }
5714
+
5715
+ .pf-c-dropdown__toggle.pf-m-secondary:hover {
5716
+ --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--hover--before--BorderWidth);
5717
+ }
5718
+
5719
+ .pf-c-dropdown__toggle.pf-m-secondary:focus {
5720
+ --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--focus--before--BorderWidth);
5721
+ }
5722
+
5723
+ .pf-c-dropdown__toggle.pf-m-secondary:active, .pf-c-dropdown__toggle.pf-m-secondary.pf-m-active {
5724
+ --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--active--before--BorderWidth);
5725
+ }
5726
+
5727
+ .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-secondary {
5728
+ --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderWidth);
5729
+ --pf-c-dropdown__toggle--m-secondary--before--BorderColor: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderColor);
5730
+ }
5731
+
5582
5732
  .pf-c-dropdown__toggle > .pf-c-badge {
5583
5733
  --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft);
5584
5734
  --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginRight);
@@ -5893,7 +6043,8 @@ label.pf-c-check, .pf-c-check__label,
5893
6043
  --pf-c-form-control--m-icon--m-warning--BackgroundSize: var(--pf-c-form-control--m-warning--BackgroundSize), var(--pf-c-form-control--m-icon--BackgroundSizeX) var(--pf-c-form-control--m-icon--BackgroundSizeY);
5894
6044
  --pf-c-form-control--m-calendar--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%236a6e73' d='M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z'/%3E%3C/svg%3E");
5895
6045
  --pf-c-form-control--m-clock--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%236a6e73' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z'/%3E%3C/svg%3E");
5896
- --pf-c-form-control__select--PaddingRight: var(--pf-global--spacer--lg);
6046
+ --pf-c-form-control__select--PaddingRight: calc(var(--pf-global--spacer--lg) + var(--pf-c-form-control--BorderWidth) + var(--pf-c-form-control--BorderWidth));
6047
+ --pf-c-form-control__select--PaddingLeft: calc(var(--pf-global--spacer--sm) - var(--pf-c-form-control--BorderWidth));
5897
6048
  --pf-c-form-control__select--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23urrentColor' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E");
5898
6049
  --pf-c-form-control__select--BackgroundSize: .625em;
5899
6050
  --pf-c-form-control__select--BackgroundPositionX: calc(100% - var(--pf-global--spacer--md) + 1px);
@@ -6045,11 +6196,18 @@ label.pf-c-check, .pf-c-check__label,
6045
6196
 
6046
6197
  select.pf-c-form-control {
6047
6198
  --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--PaddingRight);
6199
+ --pf-c-form-control--PaddingLeft: var(--pf-c-form-control__select--PaddingLeft);
6048
6200
  background-image: var(--pf-c-form-control__select--BackgroundUrl);
6049
6201
  background-position: var(--pf-c-form-control__select--BackgroundPosition);
6050
6202
  background-size: var(--pf-c-form-control__select--BackgroundSize);
6051
6203
  }
6052
6204
 
6205
+ @-moz-document url-prefix() {
6206
+ select.pf-c-form-control {
6207
+ --pf-c-form-control--PaddingRight: calc(var(--pf-c-form-control__select--PaddingRight) - 1px);
6208
+ --pf-c-form-control--PaddingLeft: calc(var(--pf-c-form-control__select--PaddingLeft) - 4px);
6209
+ }
6210
+ }
6053
6211
  select.pf-c-form-control[aria-invalid=true] {
6054
6212
  --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--invalid--PaddingRight);
6055
6213
  --pf-c-form-control--invalid--BackgroundPosition: var(--pf-c-form-control__select--invalid--BackgroundPosition);
@@ -11951,6 +12109,10 @@ button.pf-c-breadcrumb__link {
11951
12109
  overflow-anchor: none;
11952
12110
  }
11953
12111
 
12112
+ .pf-c-dual-list-selector__list-item:focus {
12113
+ --pf-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-c-dual-list-selector__list-item-row--focus-within--BackgroundColor);
12114
+ }
12115
+
11954
12116
  .pf-c-dual-list-selector__list-item.pf-m-expandable {
11955
12117
  --pf-c-dual-list-selector__item--PaddingLeft: var(--pf-c-dual-list-selector__item--m-expandable--PaddingLeft);
11956
12118
  }
@@ -11975,10 +12137,6 @@ button.pf-c-breadcrumb__link {
11975
12137
  --pf-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-c-dual-list-selector__list-item-row--hover--BackgroundColor);
11976
12138
  }
11977
12139
 
11978
- .pf-c-dual-list-selector__list-item-row:focus-within {
11979
- --pf-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-c-dual-list-selector__list-item-row--focus-within--BackgroundColor);
11980
- }
11981
-
11982
12140
  .pf-c-dual-list-selector__list-item-row.pf-m-selected {
11983
12141
  --pf-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-c-dual-list-selector__list-item-row--m-selected--BackgroundColor);
11984
12142
  }
@@ -12028,9 +12186,7 @@ button.pf-c-breadcrumb__link {
12028
12186
  position: relative;
12029
12187
  width: 100%;
12030
12188
  padding: var(--pf-c-dual-list-selector__item--PaddingTop) var(--pf-c-dual-list-selector__item--PaddingRight) var(--pf-c-dual-list-selector__item--PaddingBottom) var(--pf-c-dual-list-selector__item--PaddingLeft);
12031
- text-align: left;
12032
12189
  cursor: pointer;
12033
- border: 0;
12034
12190
  }
12035
12191
 
12036
12192
  .pf-c-dual-list-selector__item-count {
@@ -14972,7 +15128,10 @@ ul.pf-c-list {
14972
15128
  --pf-c-menu--MinWidth: auto;
14973
15129
  --pf-c-menu--Width: auto;
14974
15130
  --pf-c-menu--ZIndex: var(--pf-global--ZIndex--sm);
15131
+ --pf-c-menu--Top: auto;
14975
15132
  --pf-c-menu--m-flyout__menu--Top: calc(var(--pf-c-menu__list--PaddingTop) * -1 + var(--pf-c-menu--m-flyout__menu--top-offset));
15133
+ --pf-c-menu--m-flyout__menu--Right: auto;
15134
+ --pf-c-menu--m-flyout__menu--Bottom: auto;
14976
15135
  --pf-c-menu--m-flyout__menu--Left: calc(100% + var(--pf-c-menu--m-flyout__menu--left-offset));
14977
15136
  --pf-c-menu--m-flyout__menu--m-top--Bottom: calc(var(--pf-c-menu__list--PaddingTop) * -1);
14978
15137
  --pf-c-menu--m-flyout__menu--m-left--Right: calc(100% + var(--pf-c-menu--m-flyout__menu--m-left--right-offset));
@@ -15086,15 +15245,38 @@ ul.pf-c-list {
15086
15245
  --pf-c-menu--m-scrollable__footer--BoxShadow: var(--pf-global--BoxShadow--sm-top);
15087
15246
  --pf-c-menu--m-scrollable__footer--after--BorderTopWidth: 0;
15088
15247
  --pf-c-menu--m-scrollable__footer--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
15248
+ top: var(--pf-c-menu--Top);
15089
15249
  z-index: var(--pf-c-menu--ZIndex);
15090
15250
  width: var(--pf-c-menu--Width);
15091
15251
  min-width: var(--pf-c-menu--MinWidth);
15092
15252
  background-color: var(--pf-c-menu--BackgroundColor);
15093
15253
  box-shadow: var(--pf-c-menu--BoxShadow);
15094
- }
15095
-
15096
- .pf-c-menu .pf-c-menu__content {
15097
- overflow-y: auto;
15254
+ --pf-c-menu--m-nav--BoxShadow: var(--pf-global--BoxShadow--lg);
15255
+ --pf-c-menu--m-nav--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
15256
+ --pf-c-menu--m-nav__list--PaddingTop: 0;
15257
+ --pf-c-menu--m-nav__list--PaddingBottom: 0;
15258
+ --pf-c-menu--m-nav__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
15259
+ --pf-c-menu--m-nav__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
15260
+ --pf-c-menu--m-nav__list-item--active--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
15261
+ --pf-c-menu--m-nav__item--PaddingRight: var(--pf-global--spacer--lg);
15262
+ --pf-c-menu--m-nav__item--PaddingLeft: var(--pf-global--spacer--lg);
15263
+ --pf-c-menu--m-nav__item--Color: var(--pf-global--Color--light-100);
15264
+ --pf-c-menu--m-nav__item--FontSize: var(--pf-global--FontSize--sm);
15265
+ --pf-c-menu--m-nav__item--OutlineOffset: calc(var(--pf-global--spacer--xs) * -1);
15266
+ --pf-c-menu--m-nav__item--before--BorderBottomColor: var(--pf-global--BackgroundColor--dark-200);
15267
+ --pf-c-menu--m-nav__item--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
15268
+ --pf-c-menu--m-nav__item--hover--after--BorderLeftColor: var(--pf-global--BorderColor--200);
15269
+ --pf-c-menu--m-nav__item--hover--after--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
15270
+ --pf-c-menu--m-nav__item--hover--after--Top: calc(var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) * -1);
15271
+ --pf-c-menu--m-nav__item__list-item--first-child__item--hover--after--Top: 0;
15272
+ --pf-c-menu--m-nav__item-description--Color: var(--pf-global--Color--light-200);
15273
+ --pf-c-menu--m-nav--c-menu--left-offset: 0.25rem;
15274
+ --pf-c-menu--m-nav--c-menu--m-left--right-offset: 0.25rem;
15275
+ --pf-c-menu--m-nav--c-menu--Top: calc(var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) * -1);
15276
+ --pf-c-menu--m-nav--c-menu--Left: calc(100% - var(--pf-c-menu--m-nav--c-menu--left-offset));
15277
+ --pf-c-menu--m-nav--c-menu--m-left--Right: calc(100% - var(--pf-c-menu--m-nav--c-menu--m-left--right-offset));
15278
+ --pf-c-menu--m-nav--c-menu--m-top--Bottom: calc(0 + var(--pf-c-menu--m-nav--c-menu--m-top--bottom-offset));
15279
+ --pf-c-menu--m-nav__list-item--first-child--c-menu--Top: 0;
15098
15280
  }
15099
15281
 
15100
15282
  .pf-c-menu .pf-c-menu__content .pf-c-menu .pf-c-menu__content {
@@ -15106,33 +15288,26 @@ ul.pf-c-list {
15106
15288
  margin-bottom: var(--pf-c-menu--c-divider--MarginBottom);
15107
15289
  }
15108
15290
 
15109
- .pf-c-menu.pf-m-flyout {
15110
- overflow: visible;
15111
- }
15112
-
15113
- .pf-c-menu.pf-m-flyout .pf-c-menu {
15291
+ .pf-c-menu .pf-c-menu.pf-m-flyout, .pf-c-menu.pf-m-flyout .pf-c-menu {
15114
15292
  position: absolute;
15115
15293
  top: var(--pf-c-menu--m-flyout__menu--Top);
15116
- right: auto;
15294
+ right: var(--pf-c-menu--m-flyout__menu--Right);
15295
+ bottom: var(--pf-c-menu--m-flyout__menu--Bottom);
15117
15296
  left: var(--pf-c-menu--m-flyout__menu--Left);
15118
15297
  }
15119
15298
 
15120
- .pf-c-menu.pf-m-flyout .pf-c-menu.pf-m-top {
15121
- top: auto;
15122
- bottom: var(--pf-c-menu--m-flyout__menu--m-top--Bottom);
15299
+ .pf-c-menu .pf-c-menu.pf-m-flyout .pf-c-menu__content, .pf-c-menu.pf-m-flyout .pf-c-menu .pf-c-menu__content {
15300
+ overflow-y: visible;
15123
15301
  }
15124
15302
 
15125
- .pf-c-menu.pf-m-flyout .pf-c-menu.pf-m-left {
15126
- right: var(--pf-c-menu--m-flyout__menu--m-left--Right);
15127
- left: auto;
15303
+ .pf-c-menu.pf-m-top {
15304
+ --pf-c-menu--m-flyout__menu--Top: auto;
15305
+ --pf-c-menu--m-flyout__menu--Bottom: var(--pf-c-menu--m-flyout__menu--m-top--Bottom);
15128
15306
  }
15129
15307
 
15130
- .pf-c-menu.pf-m-flyout .pf-c-menu__content {
15131
- overflow-y: visible;
15132
- }
15133
-
15134
- .pf-c-menu.pf-m-flyout .pf-c-menu__list-item {
15135
- position: relative;
15308
+ .pf-c-menu.pf-m-left {
15309
+ --pf-c-menu--m-flyout__menu--Right: var(--pf-c-menu--m-flyout__menu--m-left--Right);
15310
+ --pf-c-menu--m-flyout__menu--Left: auto;
15136
15311
  }
15137
15312
 
15138
15313
  .pf-c-menu.pf-m-drilldown {
@@ -15174,6 +15349,11 @@ ul.pf-c-list {
15174
15349
  transition: var(--pf-c-menu--m-drilldown__list--Transition);
15175
15350
  }
15176
15351
 
15352
+ .pf-c-menu.pf-m-drilldown .pf-c-menu__list .pf-c-menu__list {
15353
+ --pf-c-menu__list--PaddingTop: 0;
15354
+ --pf-c-menu__list--PaddingBottom: 0;
15355
+ }
15356
+
15177
15357
  .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item.pf-m-current-path .pf-c-menu {
15178
15358
  z-index: var(--pf-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex);
15179
15359
  }
@@ -15218,6 +15398,76 @@ ul.pf-c-list {
15218
15398
  --pf-c-menu__footer--after--BorderBottomWidth: var(--pf-c-menu--m-scrollable__footer--after--BorderBottomWidth);
15219
15399
  }
15220
15400
 
15401
+ .pf-c-menu.pf-m-scrollable .pf-c-menu__content {
15402
+ overflow-y: auto;
15403
+ }
15404
+
15405
+ .pf-c-menu.pf-m-nav, .pf-c-menu.pf-m-nav .pf-c-menu {
15406
+ --pf-c-menu--BackgroundColor: var(--pf-c-menu--m-nav--BackgroundColor);
15407
+ --pf-c-menu__list--PaddingTop: var(--pf-c-menu--m-nav__list--PaddingTop);
15408
+ --pf-c-menu__list--PaddingBottom: var(--pf-c-menu--m-nav__list--PaddingBottom);
15409
+ --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-c-menu--m-nav__list-item--hover--BackgroundColor);
15410
+ --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-c-menu--m-nav__list-item--focus-within--BackgroundColor);
15411
+ --pf-c-menu__list-item--active--BackgroundColor: var(--pf-c-menu--m-nav__list-item--active--BackgroundColor);
15412
+ --pf-c-menu__item--Color: var(--pf-c-menu--m-nav__item--Color);
15413
+ --pf-c-menu__item--FontSize: var(--pf-c-menu--m-nav__item--FontSize);
15414
+ --pf-c-menu__item--OutlineOffset: var(--pf-c-menu--m-nav__item--OutlineOffset);
15415
+ --pf-c-menu__item--PaddingRight: var(--pf-c-menu--m-nav__item--PaddingRight);
15416
+ --pf-c-menu__item--PaddingLeft: var(--pf-c-menu--m-nav__item--PaddingLeft);
15417
+ --pf-c-menu__item-description--Color: var(--pf-c-menu--m-nav__item-description--Color);
15418
+ box-shadow: var(--pf-c-menu--m-nav--BoxShadow);
15419
+ }
15420
+
15421
+ .pf-c-menu.pf-m-nav .pf-c-menu__item, .pf-c-menu.pf-m-nav .pf-c-menu .pf-c-menu__item {
15422
+ position: relative;
15423
+ outline-offset: var(--pf-c-nav__item--m-flyout--c-menu__item--OutlineOffset);
15424
+ }
15425
+
15426
+ .pf-c-menu.pf-m-nav .pf-c-menu__item::before, .pf-c-menu.pf-m-nav .pf-c-menu .pf-c-menu__item::before {
15427
+ position: absolute;
15428
+ right: 0;
15429
+ bottom: 0;
15430
+ left: 0;
15431
+ content: "";
15432
+ border-bottom: var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) solid var(--pf-c-menu--m-nav__item--before--BorderBottomColor);
15433
+ }
15434
+
15435
+ .pf-c-menu.pf-m-nav .pf-c-menu__item:hover::after, .pf-c-menu.pf-m-nav .pf-c-menu .pf-c-menu__item:hover::after {
15436
+ position: absolute;
15437
+ top: var(--pf-c-menu--m-nav__item--hover--after--Top);
15438
+ bottom: 0;
15439
+ left: 0;
15440
+ content: "";
15441
+ border-left: var(--pf-c-menu--m-nav__item--hover--after--BorderLeftWidth) solid var(--pf-c-menu--m-nav__item--hover--after--BorderLeftColor);
15442
+ }
15443
+
15444
+ .pf-c-menu.pf-m-nav .pf-c-menu {
15445
+ width: 100%;
15446
+ }
15447
+
15448
+ .pf-c-menu.pf-m-flyout.pf-m-nav, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu {
15449
+ top: var(--pf-c-menu--m-nav--c-menu--Top);
15450
+ left: var(--pf-c-menu--m-nav--c-menu--Left);
15451
+ }
15452
+
15453
+ .pf-c-menu.pf-m-flyout.pf-m-nav.pf-m-top, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu.pf-m-top {
15454
+ --pf-c-menu--m-nav--c-menu--Top: auto;
15455
+ bottom: var(--pf-c-menu--m-nav--c-menu--m-top--Bottom);
15456
+ }
15457
+
15458
+ .pf-c-menu.pf-m-flyout.pf-m-nav.pf-m-left, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu.pf-m-left {
15459
+ --pf-c-menu--m-nav--c-menu--Left: auto;
15460
+ right: var(--pf-c-menu--m-nav--c-menu--m-left--Right);
15461
+ }
15462
+
15463
+ .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu__list-item:first-child, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu .pf-c-menu__list-item:first-child {
15464
+ --pf-c-menu--m-nav__item--hover--after--Top: var(--pf-c-menu--m-nav__item__list-item--first-child__item--hover--after--Top);
15465
+ }
15466
+
15467
+ .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu__list-item:first-child .pf-c-menu, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu .pf-c-menu__list-item:first-child .pf-c-menu {
15468
+ --pf-c-menu--m-nav--c-menu--Top: var(--pf-c-menu--m-nav__list-item--first-child--c-menu--Top);
15469
+ }
15470
+
15221
15471
  .pf-c-menu__breadcrumb {
15222
15472
  display: flex;
15223
15473
  align-items: center;
@@ -15290,6 +15540,7 @@ ul.pf-c-list {
15290
15540
 
15291
15541
  .pf-c-menu__list-item {
15292
15542
  --pf-hidden-visible--visible--Display: var(--pf-c-menu__list-item--Display);
15543
+ position: relative;
15293
15544
  color: var(--pf-c-menu__list-item--Color);
15294
15545
  background-color: var(--pf-c-menu__list-item--BackgroundColor);
15295
15546
  }
@@ -15472,6 +15723,7 @@ ul.pf-c-list {
15472
15723
  }
15473
15724
 
15474
15725
  .pf-c-menu-toggle {
15726
+ --pf-c-menu-toggle--BorderRadius: 0;
15475
15727
  --pf-c-menu-toggle--PaddingTop: var(--pf-global--spacer--form-element);
15476
15728
  --pf-c-menu-toggle--PaddingRight: var(--pf-global--spacer--sm);
15477
15729
  --pf-c-menu-toggle--PaddingBottom: var(--pf-global--spacer--form-element);
@@ -15506,12 +15758,27 @@ ul.pf-c-list {
15506
15758
  --pf-c-menu-toggle--disabled--Color: var(--pf-global--disabled-color--100);
15507
15759
  --pf-c-menu-toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
15508
15760
  --pf-c-menu-toggle--m-primary--Color: var(--pf-global--Color--light-100);
15761
+ --pf-c-menu-toggle--m-primary--BorderRadius: var(--pf-global--BorderRadius--sm);
15509
15762
  --pf-c-menu-toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--100);
15510
15763
  --pf-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
15511
15764
  --pf-c-menu-toggle--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
15512
15765
  --pf-c-menu-toggle--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
15513
15766
  --pf-c-menu-toggle--m-primary--m-expanded--BackgroundColor: var(--pf-global--primary-color--200);
15514
15767
  --pf-c-menu-toggle--m-primary--m-expanded--Color: var(--pf-global--Color--light-100);
15768
+ --pf-c-menu-toggle--m-secondary--Color: var(--pf-global--primary-color--100);
15769
+ --pf-c-menu-toggle--m-secondary--BorderRadius: var(--pf-global--BorderRadius--sm);
15770
+ --pf-c-menu-toggle--m-secondary--BackgroundColor: transparent;
15771
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--sm);
15772
+ --pf-c-menu-toggle--m-secondary--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
15773
+ --pf-c-menu-toggle--m-secondary--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
15774
+ --pf-c-menu-toggle--m-secondary--active--before--BorderWidth: var(--pf-global--BorderWidth--md);
15775
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
15776
+ --pf-c-menu-toggle--m-secondary--hover--before--BorderColor: var(--pf-global--primary-color--100);
15777
+ --pf-c-menu-toggle--m-secondary--focus--before--BorderColor: var(--pf-global--primary-color--100);
15778
+ --pf-c-menu-toggle--m-secondary--active--before--BorderColor: var(--pf-global--primary-color--100);
15779
+ --pf-c-menu-toggle--m-secondary--m-expanded--Color: var(--pf-global--primary-color--100);
15780
+ --pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
15781
+ --pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--md);
15515
15782
  --pf-c-menu-toggle--m-plain--Color: var(--pf-global--Color--200);
15516
15783
  --pf-c-menu-toggle--m-plain--PaddingRight: var(--pf-global--spacer--md);
15517
15784
  --pf-c-menu-toggle--m-plain--PaddingLeft: var(--pf-global--spacer--md);
@@ -15542,6 +15809,7 @@ ul.pf-c-list {
15542
15809
  color: var(--pf-c-menu-toggle--Color);
15543
15810
  background-color: var(--pf-c-menu-toggle--BackgroundColor);
15544
15811
  border: 0;
15812
+ border-radius: var(--pf-c-menu-toggle--BorderRadius);
15545
15813
  }
15546
15814
 
15547
15815
  .pf-c-menu-toggle::before, .pf-c-menu-toggle::after {
@@ -15565,6 +15833,7 @@ ul.pf-c-list {
15565
15833
  }
15566
15834
 
15567
15835
  .pf-c-menu-toggle.pf-m-primary {
15836
+ --pf-c-menu-toggle--BorderRadius: var(--pf-c-menu-toggle--m-primary--BorderRadius);
15568
15837
  --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-primary--Color);
15569
15838
  --pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--m-primary--BackgroundColor);
15570
15839
  --pf-c-menu-toggle--hover--BackgroundColor: var(--pf-c-menu-toggle--m-primary--hover--BackgroundColor);
@@ -15574,6 +15843,48 @@ ul.pf-c-list {
15574
15843
  --pf-c-menu-toggle--m-expanded--BackgroundColor: var(--pf-c-menu-toggle--m-primary--m-expanded--BackgroundColor);
15575
15844
  }
15576
15845
 
15846
+ .pf-c-menu-toggle.pf-m-primary, .pf-c-menu-toggle.pf-m-primary::before {
15847
+ border-radius: var(--pf-c-menu-toggle--m-primary--BorderRadius);
15848
+ }
15849
+
15850
+ .pf-c-menu-toggle.pf-m-secondary {
15851
+ --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-secondary--Color);
15852
+ --pf-c-menu-toggle--m-expanded--Color: var(--pf-c-menu-toggle--m-secondary--m-expanded--Color);
15853
+ }
15854
+
15855
+ .pf-c-menu-toggle.pf-m-secondary, .pf-c-menu-toggle.pf-m-secondary::before {
15856
+ border-radius: var(--pf-c-menu-toggle--m-secondary--BorderRadius);
15857
+ }
15858
+
15859
+ .pf-c-menu-toggle.pf-m-secondary::before {
15860
+ border-color: var(--pf-c-menu-toggle--m-secondary--before--BorderColor);
15861
+ border-width: var(--pf-c-menu-toggle--m-secondary--before--BorderWidth);
15862
+ }
15863
+
15864
+ .pf-c-menu-toggle.pf-m-secondary::after {
15865
+ border: 0;
15866
+ }
15867
+
15868
+ .pf-c-menu-toggle.pf-m-secondary:hover {
15869
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-secondary--hover--before--BorderColor);
15870
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-secondary--hover--before--BorderWidth);
15871
+ }
15872
+
15873
+ .pf-c-menu-toggle.pf-m-secondary:focus {
15874
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-secondary--focus--before--BorderColor);
15875
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-secondary--focus--before--BorderWidth);
15876
+ }
15877
+
15878
+ .pf-c-menu-toggle.pf-m-secondary:active {
15879
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-secondary--active--before--BorderColor);
15880
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-secondary--active--before--BorderWidth);
15881
+ }
15882
+
15883
+ .pf-c-menu-toggle.pf-m-secondary.pf-m-expanded {
15884
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderColor);
15885
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderWidth);
15886
+ }
15887
+
15577
15888
  .pf-c-menu-toggle.pf-m-plain:not(.pf-m-text) {
15578
15889
  --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-plain--Color);
15579
15890
  --pf-c-menu-toggle--hover--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
@@ -16098,7 +16409,6 @@ ul.pf-c-list {
16098
16409
  --pf-c-nav__item--m-flyout--focus__link--before--BorderWidth: 0;
16099
16410
  --pf-c-nav__item--m-flyout--active__link--before--BorderWidth: 0;
16100
16411
  --pf-c-nav__item--m-flyout__item--last-child__link--before--BorderBottomWidth: 0;
16101
- --pf-c-nav__item--m-flyout--c-menu--BoxShadow: var(--pf-global--BoxShadow--lg);
16102
16412
  --pf-c-nav__item--m-flyout--c-menu--Top: calc(0px + var(--pf-c-nav__item--m-flyout--c-menu--top-offset));
16103
16413
  --pf-c-nav__item--m-flyout--c-menu--c-menu--Top: calc(var(--pf-c-nav__item--m-flyout--c-menu--Top) - var(--pf-c-nav__item--before--BorderWidth));
16104
16414
  --pf-c-nav__item--m-flyout--c-menu__list-item--first-child--c-menu--Top: 0;
@@ -16107,11 +16417,10 @@ ul.pf-c-list {
16107
16417
  --pf-c-nav__item--m-flyout--c-menu--m-top--Bottom: calc(0 + var(--pf-c-nav__item--m-flyout--c-menu--m-top--bottom-offset));
16108
16418
  --pf-c-nav__item--m-flyout--c-menu--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
16109
16419
  --pf-c-nav__item--m-flyout--c-menu__item--Color: var(--pf-c-nav__link--Color);
16420
+ --pf-c-nav__item--m-flyout--c-menu__item--PaddingTop: var(--pf-global--spacer--sm);
16110
16421
  --pf-c-nav__item--m-flyout--c-menu__item--PaddingRight: var(--pf-global--spacer--lg);
16422
+ --pf-c-nav__item--m-flyout--c-menu__item--PaddingBottom: var(--pf-global--spacer--sm);
16111
16423
  --pf-c-nav__item--m-flyout--c-menu__item--PaddingLeft: var(--pf-global--spacer--lg);
16112
- --pf-c-nav__item--m-flyout--c-menu__list-item--hover--BackgroundColor: var(--pf-c-nav__link--hover--BackgroundColor);
16113
- --pf-c-nav__item--m-flyout--c-menu__list-item--focus-within--BackgroundColor: var(--pf-c-nav__link--focus--BackgroundColor);
16114
- --pf-c-nav__item--m-flyout--c-menu__list-item--active--BackgroundColor: var(--pf-c-nav__link--active--BackgroundColor);
16115
16424
  --pf-c-nav__item--m-flyout--c-menu__item-description--Color: var(--pf-global--Color--light-200);
16116
16425
  --pf-c-nav__item--m-flyout--c-menu__item--FontSize: var(--pf-global--FontSize--sm);
16117
16426
  --pf-c-nav__item--m-flyout--c-menu__item--OutlineOffset: var(--pf-c-nav__link--OutlineOffset);
@@ -16120,17 +16429,52 @@ ul.pf-c-list {
16120
16429
  --pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
16121
16430
  --pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftColor: var(--pf-global--BorderColor--200);
16122
16431
  --pf-c-nav__item--m-flyout--c-menu__item--hover--after--Top: calc(-1 * var(--pf-c-nav__item--m-flyout--c-menu__item--before--BorderBottomWidth));
16432
+ --pf-c-nav__item--m-flyout--c-menu__list-item--hover--BackgroundColor: var(--pf-c-nav__link--hover--BackgroundColor);
16433
+ --pf-c-nav__item--m-flyout--c-menu__list-item--focus-within--BackgroundColor: var(--pf-c-nav__link--focus--BackgroundColor);
16434
+ --pf-c-nav__item--m-flyout--c-menu__list-item--active--BackgroundColor: var(--pf-c-nav__link--active--BackgroundColor);
16123
16435
  --pf-c-nav__item--m-flyout--c-menu__list-item--first-child__item--hover--after--Top: 0;
16124
- --pf-c-nav__item--m-drilldown__subnav--PaddingTop: 0;
16125
- --pf-c-nav__item--m-drilldown__subnav--PaddingLeft: 0;
16126
- --pf-c-nav__item--m-drilldown__subnav--PaddingBottom: 0;
16127
- --pf-c-nav__item--m-drilldown__subnav--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
16128
- --pf-c-nav__item--m-drilldown__subnav--ZIndex: var(--pf-global--ZIndex--xs);
16129
- --pf-c-nav__item--m-drilldown__link--PaddingTop: var(--pf-global--spacer--md);
16130
- --pf-c-nav__item--m-drilldown__link--PaddingBottom: var(--pf-global--spacer--md);
16131
- --pf-c-nav__item--m-drilldown__link--FontSize: var(--pf-global--FontSize--md);
16132
- --pf-c-nav__item--m-drilldown--m-expanded__toggle-icon--Rotate: 0;
16133
- --pf-c-nav__item--m-drilldown--m-expanded__subnav--ZIndex: var(--pf-global--ZIndex--xs);
16436
+ --pf-c-nav__item--m-flyout--c-menu--BoxShadow: var(--pf-global--BoxShadow--lg);
16437
+ --pf-c-nav--c-menu--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
16438
+ --pf-c-nav--c-menu__list--PaddingTop: 0;
16439
+ --pf-c-nav--c-menu__list--PaddingBottom: 0;
16440
+ --pf-c-nav--c-menu__list-item--Color: var(--pf-global--Color--light-100);
16441
+ --pf-c-nav--c-menu__list-item--hover--Color: var(--pf-global--Color--light-100);
16442
+ --pf-c-nav--c-menu__list-item--active--Color: var(--pf-global--Color--light-100);
16443
+ --pf-c-nav--c-menu__list-item--focus-within--Color: var(--pf-global--Color--light-100);
16444
+ --pf-c-nav--c-menu__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
16445
+ --pf-c-nav--c-menu__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
16446
+ --pf-c-nav--c-menu__item--PaddingTop: var(--pf-global--spacer--md);
16447
+ --pf-c-nav--c-menu__item--PaddingRight: var(--pf-global--spacer--md);
16448
+ --pf-c-nav--c-menu__item--PaddingBottom: var(--pf-global--spacer--md);
16449
+ --pf-c-nav--c-menu__item--PaddingLeft: var(--pf-global--spacer--md);
16450
+ --pf-c-nav--c-menu__item--xl--PaddingRight: var(--pf-global--spacer--lg);
16451
+ --pf-c-nav--c-menu__item--xl--PaddingLeft: var(--pf-global--spacer--lg);
16452
+ --pf-c-nav--c-menu__item--FontSize: var(--pf-global--FontSize--sm);
16453
+ --pf-c-nav--c-menu__item--OutlineOffset: calc(var(--pf-global--spacer--xs) * -1);
16454
+ --pf-c-nav--c-menu__item--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
16455
+ --pf-c-nav--c-menu__item--before--BorderBottomColor: var(--pf-global--BackgroundColor--dark-200);
16456
+ --pf-c-nav--c-menu__item--after--BorderLeftWidth: 0;
16457
+ --pf-c-nav--c-menu__item--after--BorderLeftColor: transparent;
16458
+ --pf-c-nav--c-menu__item--m-current--BackgroundColor: var(--pf-global--BackgroundColor--dark-400);
16459
+ --pf-c-nav--c-menu__item--m-current--after--BorderLeftWidth: var(--pf-global--BorderWidth--xl);
16460
+ --pf-c-nav--c-menu__item--m-current--after--BorderColor: var(--pf-global--active-color--400);
16461
+ --pf-c-nav--c-menu__item-description--Color: var(--pf-global--Color--400);
16462
+ --pf-c-nav--c-menu--m-flyout--left-offset: 0.25rem;
16463
+ --pf-c-nav--c-menu--m-flyout--m-left--right-offset: 0.25rem;
16464
+ --pf-c-nav--c-menu--m-flyout--Top: 0;
16465
+ --pf-c-nav--c-menu--m-flyout--c-menu--Top: calc(var(--pf-c-nav--c-menu--m-flyout--Top) * -1);
16466
+ --pf-c-nav--c-menu--m-flyout--c-menu--Right: auto;
16467
+ --pf-c-nav--c-menu--m-flyout--c-menu--Bottom: auto;
16468
+ --pf-c-nav--c-menu--m-flyout--c-menu--Left: calc(100% - var(--pf-c-nav--c-menu--m-flyout--left-offset));
16469
+ --pf-c-nav--c-menu--m-flyout--m-left--Right: calc(100% - var(--pf-c-nav--c-menu--m-flyout--m-left--right-offset));
16470
+ --pf-c-nav--c-menu--m-flyout--m-top--Bottom: 0;
16471
+ --pf-c-nav--c-menu--m-flyout--BoxShadow: var(--pf-global--BoxShadow--lg);
16472
+ --pf-c-nav--c-menu--m-flyout__item--PaddingTop: var(--pf-global--spacer--sm);
16473
+ --pf-c-nav--c-menu--m-flyout__item--PaddingRight: var(--pf-global--spacer--lg);
16474
+ --pf-c-nav--c-menu--m-flyout__item--PaddingBottom: var(--pf-global--spacer--sm);
16475
+ --pf-c-nav--c-menu--m-flyout__item--PaddingLeft: var(--pf-global--spacer--lg);
16476
+ --pf-c-nav--c-menu--m-flyout__item--hover--after--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
16477
+ --pf-c-nav--c-menu--m-flyout__item--hover--after--BorderLeftColor: var(--pf-global--BorderColor--200);
16134
16478
  --pf-c-nav__toggle--m-start--MarginRight: var(--pf-global--spacer--sm);
16135
16479
  position: relative;
16136
16480
  }
@@ -16148,8 +16492,98 @@ ul.pf-c-list {
16148
16492
  --pf-c-nav__section-title--PaddingRight: var(--pf-c-nav__section-title--xl--PaddingRight);
16149
16493
  --pf-c-nav__section-title--PaddingLeft: var(--pf-c-nav__section-title--xl--PaddingLeft);
16150
16494
  --pf-c-nav__subnav--PaddingLeft: var(--pf-c-nav__subnav--xl--PaddingLeft);
16495
+ --pf-c-nav--c-menu__item--PaddingRight: var(--pf-c-nav--c-menu__item--xl--PaddingRight);
16496
+ --pf-c-nav--c-menu__item--PaddingLeft: var(--pf-c-nav--c-menu__item--xl--PaddingLeft);
16151
16497
  }
16152
16498
  }
16499
+ .pf-c-nav .pf-c-menu {
16500
+ --pf-c-menu--MinWidth: 100%;
16501
+ --pf-c-menu--BackgroundColor: var(--pf-c-nav--c-menu--BackgroundColor);
16502
+ --pf-c-menu__list--PaddingTop: var(--pf-c-nav--c-menu__list--PaddingTop);
16503
+ --pf-c-menu__list--PaddingBottom: var(--pf-c-nav--c-menu__list--PaddingBottom);
16504
+ --pf-c-menu__item--PaddingTop: var(--pf-c-nav--c-menu__item--PaddingTop);
16505
+ --pf-c-menu__item--PaddingRight: var(--pf-c-nav--c-menu__item--PaddingRight);
16506
+ --pf-c-menu__item--PaddingBottom: var(--pf-c-nav--c-menu__item--PaddingBottom);
16507
+ --pf-c-menu__item--PaddingLeft: var(--pf-c-nav--c-menu__item--PaddingLeft);
16508
+ --pf-c-menu__list-item--Color: var(--pf-c-nav--c-menu__list-item--Color);
16509
+ --pf-c-menu__list-item--hover--Color: var(--pf-c-nav--c-menu__list-item--hover--Color);
16510
+ --pf-c-menu__list-item--active--Color: var(--pf-c-nav--c-menu__list-item--active--Color);
16511
+ --pf-c-menu__list-item--focus-within--Color: var(--pf-c-nav--c-menu__list-item--focus-within--Color);
16512
+ --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-c-nav--c-menu__list-item--hover--BackgroundColor);
16513
+ --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-c-nav--c-menu__list-item--focus-within--BackgroundColor);
16514
+ --pf-c-menu__item-description--Color: var(--pf-c-nav--c-menu__item-description--Color);
16515
+ }
16516
+
16517
+ .pf-c-nav .pf-c-menu:first-child > .pf-c-menu__content {
16518
+ border-bottom: var(--pf-c-nav--c-menu__item--before--BorderBottomWidth) solid var(--pf-c-nav--c-menu__item--before--BorderBottomColor);
16519
+ }
16520
+
16521
+ .pf-c-nav .pf-c-menu.pf-m-flyout, .pf-c-nav .pf-c-menu.pf-m-flyout .pf-c-menu {
16522
+ --pf-c-menu--BoxShadow: var(--pf-c-nav--c-menu--m-flyout--BoxShadow);
16523
+ --pf-c-menu__list--PaddingTop: 0;
16524
+ --pf-c-menu__list--PaddingBottom: 0;
16525
+ --pf-c-menu__item--FontSize: var(--pf-c-nav--c-menu__item--FontSize);
16526
+ --pf-c-menu__item--Color: var(--pf-c-nav--c-menu__item--Color);
16527
+ --pf-c-menu__item--PaddingTop: var(--pf-c-nav--c-menu--m-flyout__item--PaddingTop);
16528
+ --pf-c-menu__item--PaddingRight: var(--pf-c-nav--c-menu--m-flyout__item--PaddingRight);
16529
+ --pf-c-menu__item--PaddingBottom: var(--pf-c-nav--c-menu--m-flyout__item--PaddingBottom);
16530
+ --pf-c-menu__item--PaddingLeft: var(--pf-c-nav--c-menu--m-flyout__item--PaddingLeft);
16531
+ top: var(--pf-c-nav--c-menu--m-flyout--c-menu--Top);
16532
+ right: var(--pf-c-nav--c-menu--m-flyout--c-menu--Right);
16533
+ bottom: var(--pf-c-nav--c-menu--m-flyout--c-menu--Bottom);
16534
+ left: var(--pf-c-nav--c-menu--m-flyout--c-menu--Left);
16535
+ }
16536
+
16537
+ .pf-c-nav .pf-c-menu.pf-m-flyout .pf-c-menu__item:hover {
16538
+ --pf-c-nav--c-menu__item--after--BorderLeftWidth: var(--pf-c-nav--c-menu--m-flyout__item--hover--after--BorderLeftWidth);
16539
+ --pf-c-nav--c-menu__item--after--BorderLeftColor: var(--pf-c-nav--c-menu--m-flyout__item--hover--after--BorderLeftColor);
16540
+ }
16541
+
16542
+ .pf-c-nav .pf-c-menu.pf-m-top {
16543
+ --pf-c-nav--c-menu--m-flyout--c-menu--Top: auto;
16544
+ --pf-c-nav--c-menu--m-flyout--c-menu--Bottom: var(--pf-c-nav--c-menu--m-flyout--m-top--Bottom);
16545
+ }
16546
+
16547
+ .pf-c-nav .pf-c-menu.pf-m-left {
16548
+ --pf-c-nav--c-menu--m-flyout--c-menu--Right: var(--pf-c-nav--c-menu--m-flyout--m-left--Right);
16549
+ --pf-c-nav--c-menu--m-flyout--c-menu--Left: auto;
16550
+ }
16551
+
16552
+ .pf-c-nav .pf-c-menu .pf-c-divider {
16553
+ margin-top: 0;
16554
+ margin-bottom: 0;
16555
+ }
16556
+
16557
+ .pf-c-nav .pf-c-menu__item {
16558
+ position: relative;
16559
+ outline-offset: var(--pf-c-nav--c-menu__item--OutlineOffset);
16560
+ }
16561
+
16562
+ .pf-c-nav .pf-c-menu__item::before, .pf-c-nav .pf-c-menu__item::after {
16563
+ position: absolute;
16564
+ top: 0;
16565
+ content: "";
16566
+ }
16567
+
16568
+ .pf-c-nav .pf-c-menu__item::before {
16569
+ right: 0;
16570
+ bottom: calc(var(--pf-c-nav--c-menu__item--before--BorderBottomWidth) * -1);
16571
+ left: 0;
16572
+ border-bottom: var(--pf-c-nav--c-menu__item--before--BorderBottomWidth) solid var(--pf-c-nav--c-menu__item--before--BorderBottomColor);
16573
+ }
16574
+
16575
+ .pf-c-nav .pf-c-menu__item::after {
16576
+ bottom: 0;
16577
+ left: 0;
16578
+ border-left: var(--pf-c-nav--c-menu__item--after--BorderLeftWidth) solid var(--pf-c-nav--c-menu__item--after--BorderLeftColor);
16579
+ }
16580
+
16581
+ .pf-c-nav .pf-c-menu__item.pf-m-current {
16582
+ --pf-c-nav--c-menu__item--after--BorderLeftWidth: var(--pf-c-nav--c-menu__item--m-current--after--BorderLeftWidth);
16583
+ --pf-c-nav--c-menu__item--after--BorderLeftColor: var(--pf-c-nav--c-menu__item--m-current--after--BorderColor);
16584
+ background-color: var(--pf-c-nav--c-menu__item--m-current--BackgroundColor);
16585
+ }
16586
+
16153
16587
  .pf-c-nav.pf-m-horizontal .pf-c-nav__link::after, .pf-c-nav.pf-m-tertiary .pf-c-nav__link::after {
16154
16588
  content: none;
16155
16589
  }
@@ -16431,9 +16865,13 @@ ul.pf-c-list {
16431
16865
  --pf-c-menu__list-item--active--BackgroundColor: var(--pf-c-nav__item--m-flyout--c-menu__list-item--active--BackgroundColor);
16432
16866
  --pf-c-menu__item--FontSize: var(--pf-c-nav__item--m-flyout--c-menu__item--FontSize);
16433
16867
  --pf-c-menu__item--Color: var(--pf-c-nav__item--m-flyout--c-menu__item--Color);
16868
+ --pf-c-menu__item--PaddingTop: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingTop);
16434
16869
  --pf-c-menu__item--PaddingRight: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingRight);
16870
+ --pf-c-menu__item--PaddingBottom: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingBottom);
16435
16871
  --pf-c-menu__item--PaddingLeft: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingLeft);
16436
16872
  --pf-c-menu__item-description--Color: var(--pf-c-nav__item--m-flyout--c-menu__item-description--Color);
16873
+ --pf-c-nav--c-menu--m-flyout--c-menu--Bottom: var(--pf-c-nav__item--m-flyout--c-menu--m-top--Bottom);
16874
+ --pf-c-nav--c-menu--m-flyout--c-menu--Right: var(--pf-c-nav__item--m-flyout--c-menu--m-left--Right);
16437
16875
  position: absolute;
16438
16876
  top: var(--pf-c-nav__item--m-flyout--c-menu--Top);
16439
16877
  left: var(--pf-c-nav__item--m-flyout--c-menu--Left);
@@ -16443,16 +16881,6 @@ ul.pf-c-list {
16443
16881
  top: var(--pf-c-nav__item--m-flyout--c-menu--c-menu--Top);
16444
16882
  }
16445
16883
 
16446
- .pf-c-nav__item.pf-m-flyout .pf-c-menu.pf-m-top {
16447
- top: auto;
16448
- bottom: var(--pf-c-nav__item--m-flyout--c-menu--m-top--Bottom);
16449
- }
16450
-
16451
- .pf-c-nav__item.pf-m-flyout .pf-c-menu.pf-m-left {
16452
- right: var(--pf-c-nav__item--m-flyout--c-menu--m-left--Right);
16453
- left: auto;
16454
- }
16455
-
16456
16884
  .pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu__list-item:first-child {
16457
16885
  --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);
16458
16886
  --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);
@@ -16481,27 +16909,6 @@ ul.pf-c-list {
16481
16909
  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);
16482
16910
  }
16483
16911
 
16484
- .pf-c-nav__item.pf-m-drilldown {
16485
- --pf-c-nav__subnav--PaddingTop: var(--pf-c-nav__item--m-drilldown__subnav--PaddingTop);
16486
- --pf-c-nav__subnav--PaddingBottom: var(--pf-c-nav__item--m-drilldown__subnav--PaddingBottom);
16487
- --pf-c-nav__subnav--PaddingLeft: var(--pf-c-nav__item--m-drilldown__subnav--PaddingLeft);
16488
- --pf-c-nav__item--m-expanded__toggle-icon--Rotate: var(--pf-c-nav__item--m-drilldown--m-expanded__toggle-icon--Rotate);
16489
- }
16490
-
16491
- .pf-c-nav__item.pf-m-drilldown > .pf-c-nav__subnav {
16492
- --pf-c-nav__link--PaddingTop: var(--pf-c-nav__item--m-drilldown__link--PaddingTop);
16493
- --pf-c-nav__link--PaddingBottom: var(--pf-c-nav__item--m-drilldown__link--PaddingBottom);
16494
- --pf-c-nav__link--FontSize: var(--pf-c-nav__item--m-drilldown__link--FontSize);
16495
- --pf-c-nav__subnav--MaxHeight: 100%;
16496
- position: absolute;
16497
- top: 0;
16498
- left: 100%;
16499
- z-index: var(--pf-c-nav__item--m-drilldown__subnav--ZIndex);
16500
- width: 100%;
16501
- height: 100%;
16502
- background-color: var(--pf-c-nav__item--m-drilldown__subnav--BackgroundColor);
16503
- }
16504
-
16505
16912
  .pf-c-nav__item.pf-m-drilldown.pf-m-expanded > .pf-c-nav__subnav {
16506
16913
  left: 0;
16507
16914
  z-index: var(--pf-c-nav__item--m-drilldown--m-expanded__subnav--ZIndex);
@@ -16542,16 +16949,16 @@ ul.pf-c-list {
16542
16949
  border-left-width: var(--pf-c-nav__link--after--BorderLeftWidth);
16543
16950
  }
16544
16951
 
16545
- .pf-c-nav__link:hover {
16952
+ .pf-c-nav__link:hover, .pf-c-nav__link.pf-m-hover {
16546
16953
  color: var(--pf-c-nav__link--hover--Color);
16547
16954
  background-color: var(--pf-c-nav__link--hover--BackgroundColor);
16548
16955
  }
16549
16956
 
16550
- .pf-c-nav__link:hover::before {
16957
+ .pf-c-nav__link:hover::before, .pf-c-nav__link.pf-m-hover::before {
16551
16958
  border-bottom-width: var(--pf-c-nav__link--hover--before--BorderBottomWidth);
16552
16959
  }
16553
16960
 
16554
- .pf-c-nav__link:hover::after {
16961
+ .pf-c-nav__link:hover::after, .pf-c-nav__link.pf-m-hover::after {
16555
16962
  border-color: var(--pf-c-nav__link--hover--after--BorderColor);
16556
16963
  border-left-width: var(--pf-c-nav__link--hover--after--BorderLeftWidth);
16557
16964
  }