@patternfly/patternfly 4.156.2 → 4.158.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "4.156.2",
4
+ "version": "4.158.0",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -9791,6 +9791,9 @@ label.pf-c-check, .pf-c-check__label,
9791
9791
  overflow-anchor: none;
9792
9792
  }
9793
9793
 
9794
+ .pf-c-dual-list-selector__list-item:focus {
9795
+ --pf-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-c-dual-list-selector__list-item-row--focus-within--BackgroundColor);
9796
+ }
9794
9797
  .pf-c-dual-list-selector__list-item.pf-m-expandable {
9795
9798
  --pf-c-dual-list-selector__item--PaddingLeft: var(--pf-c-dual-list-selector__item--m-expandable--PaddingLeft);
9796
9799
  }
@@ -9811,9 +9814,6 @@ label.pf-c-check, .pf-c-check__label,
9811
9814
  .pf-c-dual-list-selector__list-item-row:hover {
9812
9815
  --pf-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-c-dual-list-selector__list-item-row--hover--BackgroundColor);
9813
9816
  }
9814
- .pf-c-dual-list-selector__list-item-row:focus-within {
9815
- --pf-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-c-dual-list-selector__list-item-row--focus-within--BackgroundColor);
9816
- }
9817
9817
  .pf-c-dual-list-selector__list-item-row.pf-m-selected {
9818
9818
  --pf-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-c-dual-list-selector__list-item-row--m-selected--BackgroundColor);
9819
9819
  }
@@ -9857,9 +9857,7 @@ label.pf-c-check, .pf-c-check__label,
9857
9857
  position: relative;
9858
9858
  width: 100%;
9859
9859
  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);
9860
- text-align: left;
9861
9860
  cursor: pointer;
9862
- border: 0;
9863
9861
  }
9864
9862
 
9865
9863
  .pf-c-dual-list-selector__item-count {
@@ -12143,10 +12141,10 @@ label.pf-c-check, .pf-c-check__label,
12143
12141
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-global--BorderColor--200);
12144
12142
  --pf-c-dropdown__toggle--before--BorderLeftColor: var(--pf-global--BorderColor--300);
12145
12143
  --pf-c-dropdown__toggle--hover--before--BorderBottomColor: var(--pf-global--active-color--100);
12146
- --pf-c-dropdown__toggle--active--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
12147
- --pf-c-dropdown__toggle--active--before--BorderBottomColor: var(--pf-global--active-color--100);
12148
12144
  --pf-c-dropdown__toggle--focus--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
12149
12145
  --pf-c-dropdown__toggle--focus--before--BorderBottomColor: var(--pf-global--active-color--100);
12146
+ --pf-c-dropdown__toggle--active--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
12147
+ --pf-c-dropdown__toggle--active--before--BorderBottomColor: var(--pf-global--active-color--100);
12150
12148
  --pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
12151
12149
  --pf-c-dropdown--m-expanded__toggle--before--BorderBottomColor: var(--pf-global--active-color--100);
12152
12150
  --pf-c-dropdown__toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
@@ -12160,9 +12158,22 @@ label.pf-c-check, .pf-c-check__label,
12160
12158
  --pf-c-dropdown__toggle--m-primary--BorderRadius: var(--pf-global--BorderRadius--sm);
12161
12159
  --pf-c-dropdown__toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--100);
12162
12160
  --pf-c-dropdown__toggle--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
12163
- --pf-c-dropdown__toggle--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
12164
12161
  --pf-c-dropdown__toggle--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
12162
+ --pf-c-dropdown__toggle--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
12165
12163
  --pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--200);
12164
+ --pf-c-dropdown__toggle--m-secondary--Color: var(--pf-global--primary-color--100);
12165
+ --pf-c-dropdown__toggle--m-secondary--BorderRadius: var(--pf-global--BorderRadius--sm);
12166
+ --pf-c-dropdown__toggle--m-secondary--BackgroundColor: transparent;
12167
+ --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--sm);
12168
+ --pf-c-dropdown__toggle--m-secondary--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
12169
+ --pf-c-dropdown__toggle--m-secondary--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
12170
+ --pf-c-dropdown__toggle--m-secondary--active--before--BorderWidth: var(--pf-global--BorderWidth--md);
12171
+ --pf-c-dropdown__toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
12172
+ --pf-c-dropdown__toggle--m-secondary--hover--before--BorderColor: var(--pf-global--primary-color--100);
12173
+ --pf-c-dropdown__toggle--m-secondary--focus--before--BorderColor: var(--pf-global--primary-color--100);
12174
+ --pf-c-dropdown__toggle--m-secondary--active--before--BorderColor: var(--pf-global--primary-color--100);
12175
+ --pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--md);
12176
+ --pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
12166
12177
  --pf-c-dropdown__toggle-button--Color: var(--pf-global--Color--100);
12167
12178
  --pf-c-dropdown__toggle--m-split-button--child--PaddingTop: var(--pf-global--spacer--form-element);
12168
12179
  --pf-c-dropdown__toggle--m-split-button--child--PaddingRight: var(--pf-global--spacer--xs);
@@ -12176,6 +12187,14 @@ label.pf-c-check, .pf-c-check__label,
12176
12187
  --pf-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight: calc(-1 * var(--pf-global--BorderWidth--sm));
12177
12188
  --pf-c-dropdown__toggle--m-split-button__toggle-check__input--TranslateY: -0.0625rem;
12178
12189
  --pf-c-dropdown__toggle--m-split-button__toggle-text--MarginLeft: var(--pf-global--spacer--sm);
12190
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius: var(--pf-global--BorderRadius--sm);
12191
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-global--primary-color--100);
12192
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-global--primary-color--200);
12193
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor: var(--pf-global--primary-color--200);
12194
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--active--BackgroundColor: var(--pf-global--primary-color--200);
12195
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor: var(--pf-global--primary-color--200);
12196
+ --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor: var(--pf-global--primary-color--200);
12197
+ --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
12179
12198
  --pf-c-dropdown__toggle-icon--LineHeight: var(--pf-global--LineHeight--md);
12180
12199
  --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
12181
12200
  --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
@@ -12268,6 +12287,9 @@ label.pf-c-check, .pf-c-check__label,
12268
12287
  .pf-c-dropdown.pf-m-full-height:hover .pf-c-dropdown__toggle::before {
12269
12288
  border-bottom-width: var(--pf-c-dropdown--m-full-height__toggle--hover--before--BorderBottomWidth);
12270
12289
  }
12290
+ .pf-c-dropdown.pf-m-expanded {
12291
+ --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);
12292
+ }
12271
12293
 
12272
12294
  .pf-c-dropdown__toggle {
12273
12295
  position: relative;
@@ -12333,6 +12355,9 @@ label.pf-c-check, .pf-c-check__label,
12333
12355
  .pf-c-dropdown__toggle.pf-m-split-button.pf-m-action .pf-c-dropdown__toggle-button:last-child {
12334
12356
  --pf-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight: 0;
12335
12357
  }
12358
+ .pf-c-dropdown__toggle.pf-m-split-button.pf-m-action.pf-m-primary > :not(:first-child) {
12359
+ 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);
12360
+ }
12336
12361
  .pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-check {
12337
12362
  display: flex;
12338
12363
  align-items: center;
@@ -12350,18 +12375,43 @@ label.pf-c-check, .pf-c-check__label,
12350
12375
  .pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-text {
12351
12376
  margin-left: var(--pf-c-dropdown__toggle--m-split-button__toggle-text--MarginLeft);
12352
12377
  }
12353
- .pf-c-dropdown__toggle:not(.pf-m-action):hover::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:hover::before {
12378
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) {
12379
+ --pf-c-dropdown__toggle--before--BorderWidth: 0;
12380
+ --pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth: 0;
12381
+ }
12382
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > * {
12383
+ background-color: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor);
12384
+ border: 0;
12385
+ }
12386
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *:hover {
12387
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor);
12388
+ }
12389
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *:focus {
12390
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor);
12391
+ }
12392
+ .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 {
12393
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor);
12394
+ }
12395
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > :first-child {
12396
+ border-top-left-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
12397
+ border-bottom-left-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
12398
+ }
12399
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > :last-child {
12400
+ border-top-right-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
12401
+ border-bottom-right-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
12402
+ }
12403
+ .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 {
12354
12404
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--hover--before--BorderBottomColor);
12355
12405
  }
12356
- .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 {
12406
+ .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 {
12357
12407
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--active--before--BorderBottomColor);
12358
12408
  border-bottom-width: var(--pf-c-dropdown__toggle--active--before--BorderBottomWidth);
12359
12409
  }
12360
- .pf-c-dropdown__toggle:not(.pf-m-action):focus::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:focus::before {
12410
+ .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 {
12361
12411
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--focus--before--BorderBottomColor);
12362
12412
  border-bottom-width: var(--pf-c-dropdown__toggle--focus--before--BorderBottomWidth);
12363
12413
  }
12364
- .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 {
12414
+ .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 {
12365
12415
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown--m-expanded__toggle--before--BorderBottomColor);
12366
12416
  border-bottom-width: var(--pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth);
12367
12417
  }
@@ -12377,32 +12427,57 @@ label.pf-c-check, .pf-c-check__label,
12377
12427
  .pf-c-dropdown__toggle.pf-m-plain::before {
12378
12428
  border: 0;
12379
12429
  }
12380
- .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 {
12430
+ .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 {
12381
12431
  --pf-c-dropdown__toggle--m-plain--Color: var(--pf-c-dropdown__toggle--m-plain--hover--Color);
12382
12432
  }
12383
12433
  .pf-c-dropdown__toggle.pf-m-plain.pf-m-disabled, .pf-c-dropdown__toggle.pf-m-plain:disabled {
12384
12434
  --pf-c-dropdown__toggle--m-plain--Color: var(--pf-c-dropdown__toggle--m-plain--disabled--Color);
12385
12435
  }
12386
12436
  .pf-c-dropdown__toggle.pf-m-primary {
12387
- --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
12388
12437
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--BackgroundColor);
12438
+ --pf-c-dropdown__toggle-button--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
12389
12439
  border-radius: var(--pf-c-dropdown__toggle--m-primary--BorderRadius);
12390
12440
  }
12441
+ .pf-c-dropdown__toggle.pf-m-primary:not(.pf-m-disabled) {
12442
+ --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
12443
+ }
12391
12444
  .pf-c-dropdown__toggle.pf-m-primary::before {
12392
12445
  border: 0;
12393
12446
  }
12394
12447
  .pf-c-dropdown__toggle.pf-m-primary:hover {
12395
12448
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--hover--BackgroundColor);
12396
12449
  }
12397
- .pf-c-dropdown__toggle.pf-m-primary:active, .pf-c-dropdown__toggle.pf-m-primary.pf-m-active {
12398
- --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--active--BackgroundColor);
12399
- }
12400
12450
  .pf-c-dropdown__toggle.pf-m-primary:focus {
12401
12451
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--focus--BackgroundColor);
12402
12452
  }
12453
+ .pf-c-dropdown__toggle.pf-m-primary:active, .pf-c-dropdown__toggle.pf-m-primary.pf-m-active {
12454
+ --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--active--BackgroundColor);
12455
+ }
12403
12456
  .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-primary {
12404
12457
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor);
12405
12458
  }
12459
+ .pf-c-dropdown__toggle.pf-m-secondary {
12460
+ --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-secondary--Color);
12461
+ --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-secondary--BackgroundColor);
12462
+ border-radius: var(--pf-c-dropdown__toggle--m-secondary--BorderRadius);
12463
+ }
12464
+ .pf-c-dropdown__toggle.pf-m-secondary::before {
12465
+ border: var(--pf-c-dropdown__toggle--m-secondary--before--BorderWidth) solid var(--pf-c-dropdown__toggle--m-secondary--before--BorderColor);
12466
+ border-radius: var(--pf-c-dropdown__toggle--m-secondary--BorderRadius);
12467
+ }
12468
+ .pf-c-dropdown__toggle.pf-m-secondary:hover {
12469
+ --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--hover--before--BorderWidth);
12470
+ }
12471
+ .pf-c-dropdown__toggle.pf-m-secondary:focus {
12472
+ --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--focus--before--BorderWidth);
12473
+ }
12474
+ .pf-c-dropdown__toggle.pf-m-secondary:active, .pf-c-dropdown__toggle.pf-m-secondary.pf-m-active {
12475
+ --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--active--before--BorderWidth);
12476
+ }
12477
+ .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-secondary {
12478
+ --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderWidth);
12479
+ --pf-c-dropdown__toggle--m-secondary--before--BorderColor: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderColor);
12480
+ }
12406
12481
  .pf-c-dropdown__toggle > .pf-c-badge {
12407
12482
  --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft);
12408
12483
  --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginRight);
@@ -15706,6 +15781,8 @@ ul.pf-c-list {
15706
15781
  --pf-c-menu--Width: auto;
15707
15782
  --pf-c-menu--ZIndex: var(--pf-global--ZIndex--sm);
15708
15783
  --pf-c-menu--m-flyout__menu--Top: calc(var(--pf-c-menu__list--PaddingTop) * -1 + var(--pf-c-menu--m-flyout__menu--top-offset));
15784
+ --pf-c-menu--m-flyout__menu--Right: auto;
15785
+ --pf-c-menu--m-flyout__menu--Bottom: auto;
15709
15786
  --pf-c-menu--m-flyout__menu--Left: calc(100% + var(--pf-c-menu--m-flyout__menu--left-offset));
15710
15787
  --pf-c-menu--m-flyout__menu--m-top--Bottom: calc(var(--pf-c-menu__list--PaddingTop) * -1);
15711
15788
  --pf-c-menu--m-flyout__menu--m-left--Right: calc(100% + var(--pf-c-menu--m-flyout__menu--m-left--right-offset));
@@ -15825,9 +15902,6 @@ ul.pf-c-list {
15825
15902
  background-color: var(--pf-c-menu--BackgroundColor);
15826
15903
  box-shadow: var(--pf-c-menu--BoxShadow);
15827
15904
  }
15828
- .pf-c-menu .pf-c-menu__content {
15829
- overflow-y: auto;
15830
- }
15831
15905
  .pf-c-menu .pf-c-menu__content .pf-c-menu .pf-c-menu__content {
15832
15906
  overflow: visible;
15833
15907
  }
@@ -15835,28 +15909,23 @@ ul.pf-c-list {
15835
15909
  margin-top: var(--pf-c-menu--c-divider--MarginTop);
15836
15910
  margin-bottom: var(--pf-c-menu--c-divider--MarginBottom);
15837
15911
  }
15838
- .pf-c-menu.pf-m-flyout {
15839
- overflow: visible;
15840
- }
15841
- .pf-c-menu.pf-m-flyout .pf-c-menu {
15912
+ .pf-c-menu .pf-c-menu.pf-m-flyout, .pf-c-menu.pf-m-flyout .pf-c-menu {
15842
15913
  position: absolute;
15843
15914
  top: var(--pf-c-menu--m-flyout__menu--Top);
15844
- right: auto;
15915
+ right: var(--pf-c-menu--m-flyout__menu--Right);
15916
+ bottom: var(--pf-c-menu--m-flyout__menu--Bottom);
15845
15917
  left: var(--pf-c-menu--m-flyout__menu--Left);
15846
15918
  }
15847
- .pf-c-menu.pf-m-flyout .pf-c-menu.pf-m-top {
15848
- top: auto;
15849
- bottom: var(--pf-c-menu--m-flyout__menu--m-top--Bottom);
15850
- }
15851
- .pf-c-menu.pf-m-flyout .pf-c-menu.pf-m-left {
15852
- right: var(--pf-c-menu--m-flyout__menu--m-left--Right);
15853
- left: auto;
15854
- }
15855
- .pf-c-menu.pf-m-flyout .pf-c-menu__content {
15919
+ .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 {
15856
15920
  overflow-y: visible;
15857
15921
  }
15858
- .pf-c-menu.pf-m-flyout .pf-c-menu__list-item {
15859
- position: relative;
15922
+ .pf-c-menu.pf-m-top {
15923
+ --pf-c-menu--m-flyout__menu--Top: auto;
15924
+ --pf-c-menu--m-flyout__menu--Bottom: var(--pf-c-menu--m-flyout__menu--m-top--Bottom);
15925
+ }
15926
+ .pf-c-menu.pf-m-left {
15927
+ --pf-c-menu--m-flyout__menu--Right: var(--pf-c-menu--m-flyout__menu--m-left--Right);
15928
+ --pf-c-menu--m-flyout__menu--Left: auto;
15860
15929
  }
15861
15930
  .pf-c-menu.pf-m-drilldown {
15862
15931
  display: flex;
@@ -15890,6 +15959,10 @@ ul.pf-c-list {
15890
15959
  overflow: hidden;
15891
15960
  transition: var(--pf-c-menu--m-drilldown__list--Transition);
15892
15961
  }
15962
+ .pf-c-menu.pf-m-drilldown .pf-c-menu__list .pf-c-menu__list {
15963
+ --pf-c-menu__list--PaddingTop: 0;
15964
+ --pf-c-menu__list--PaddingBottom: 0;
15965
+ }
15893
15966
  .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item.pf-m-current-path .pf-c-menu {
15894
15967
  z-index: var(--pf-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex);
15895
15968
  }
@@ -15924,6 +15997,9 @@ ul.pf-c-list {
15924
15997
  --pf-c-menu__footer--after--BorderTopWidth: var(--pf-c-menu--m-scrollable__footer--after--BorderTopWidth);
15925
15998
  --pf-c-menu__footer--after--BorderBottomWidth: var(--pf-c-menu--m-scrollable__footer--after--BorderBottomWidth);
15926
15999
  }
16000
+ .pf-c-menu.pf-m-scrollable .pf-c-menu__content {
16001
+ overflow-y: auto;
16002
+ }
15927
16003
 
15928
16004
  .pf-c-menu__breadcrumb {
15929
16005
  display: flex;
@@ -15990,6 +16066,7 @@ ul.pf-c-list {
15990
16066
 
15991
16067
  .pf-c-menu__list-item {
15992
16068
  --pf-hidden-visible--visible--Display: var(--pf-c-menu__list-item--Display);
16069
+ position: relative;
15993
16070
  color: var(--pf-c-menu__list-item--Color);
15994
16071
  background-color: var(--pf-c-menu__list-item--BackgroundColor);
15995
16072
  }
@@ -16193,14 +16270,28 @@ ul.pf-c-list {
16193
16270
  --pf-c-menu-toggle--m-expanded--after--BorderBottomColor: var(--pf-global--active-color--100);
16194
16271
  --pf-c-menu-toggle--disabled--Color: var(--pf-global--disabled-color--100);
16195
16272
  --pf-c-menu-toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
16196
- --pf-c-menu-toggle--m-primary--BorderRadius: var(--pf-global--BorderRadius--sm);
16197
16273
  --pf-c-menu-toggle--m-primary--Color: var(--pf-global--Color--light-100);
16274
+ --pf-c-menu-toggle--m-primary--BorderRadius: var(--pf-global--BorderRadius--sm);
16198
16275
  --pf-c-menu-toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--100);
16199
16276
  --pf-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
16200
16277
  --pf-c-menu-toggle--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
16201
16278
  --pf-c-menu-toggle--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
16202
16279
  --pf-c-menu-toggle--m-primary--m-expanded--BackgroundColor: var(--pf-global--primary-color--200);
16203
16280
  --pf-c-menu-toggle--m-primary--m-expanded--Color: var(--pf-global--Color--light-100);
16281
+ --pf-c-menu-toggle--m-secondary--Color: var(--pf-global--primary-color--100);
16282
+ --pf-c-menu-toggle--m-secondary--BorderRadius: var(--pf-global--BorderRadius--sm);
16283
+ --pf-c-menu-toggle--m-secondary--BackgroundColor: transparent;
16284
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--sm);
16285
+ --pf-c-menu-toggle--m-secondary--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
16286
+ --pf-c-menu-toggle--m-secondary--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
16287
+ --pf-c-menu-toggle--m-secondary--active--before--BorderWidth: var(--pf-global--BorderWidth--md);
16288
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
16289
+ --pf-c-menu-toggle--m-secondary--hover--before--BorderColor: var(--pf-global--primary-color--100);
16290
+ --pf-c-menu-toggle--m-secondary--focus--before--BorderColor: var(--pf-global--primary-color--100);
16291
+ --pf-c-menu-toggle--m-secondary--active--before--BorderColor: var(--pf-global--primary-color--100);
16292
+ --pf-c-menu-toggle--m-secondary--m-expanded--Color: var(--pf-global--primary-color--100);
16293
+ --pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
16294
+ --pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--md);
16204
16295
  --pf-c-menu-toggle--m-plain--Color: var(--pf-global--Color--200);
16205
16296
  --pf-c-menu-toggle--m-plain--PaddingRight: var(--pf-global--spacer--md);
16206
16297
  --pf-c-menu-toggle--m-plain--PaddingLeft: var(--pf-global--spacer--md);
@@ -16260,6 +16351,39 @@ ul.pf-c-list {
16260
16351
  --pf-c-menu-toggle--m-expanded--Color: var(--pf-c-menu-toggle--m-primary--m-expanded--Color);
16261
16352
  --pf-c-menu-toggle--m-expanded--BackgroundColor: var(--pf-c-menu-toggle--m-primary--m-expanded--BackgroundColor);
16262
16353
  }
16354
+ .pf-c-menu-toggle.pf-m-primary, .pf-c-menu-toggle.pf-m-primary::before {
16355
+ border-radius: var(--pf-c-menu-toggle--m-primary--BorderRadius);
16356
+ }
16357
+ .pf-c-menu-toggle.pf-m-secondary {
16358
+ --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-secondary--Color);
16359
+ --pf-c-menu-toggle--m-expanded--Color: var(--pf-c-menu-toggle--m-secondary--m-expanded--Color);
16360
+ }
16361
+ .pf-c-menu-toggle.pf-m-secondary, .pf-c-menu-toggle.pf-m-secondary::before {
16362
+ border-radius: var(--pf-c-menu-toggle--m-secondary--BorderRadius);
16363
+ }
16364
+ .pf-c-menu-toggle.pf-m-secondary::before {
16365
+ border-color: var(--pf-c-menu-toggle--m-secondary--before--BorderColor);
16366
+ border-width: var(--pf-c-menu-toggle--m-secondary--before--BorderWidth);
16367
+ }
16368
+ .pf-c-menu-toggle.pf-m-secondary::after {
16369
+ border: 0;
16370
+ }
16371
+ .pf-c-menu-toggle.pf-m-secondary:hover {
16372
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-secondary--hover--before--BorderColor);
16373
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-secondary--hover--before--BorderWidth);
16374
+ }
16375
+ .pf-c-menu-toggle.pf-m-secondary:focus {
16376
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-secondary--focus--before--BorderColor);
16377
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-secondary--focus--before--BorderWidth);
16378
+ }
16379
+ .pf-c-menu-toggle.pf-m-secondary:active {
16380
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-secondary--active--before--BorderColor);
16381
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-secondary--active--before--BorderWidth);
16382
+ }
16383
+ .pf-c-menu-toggle.pf-m-secondary.pf-m-expanded {
16384
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderColor);
16385
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderWidth);
16386
+ }
16263
16387
  .pf-c-menu-toggle.pf-m-plain:not(.pf-m-text) {
16264
16388
  --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-plain--Color);
16265
16389
  --pf-c-menu-toggle--hover--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
@@ -16760,7 +16884,6 @@ ul.pf-c-list {
16760
16884
  --pf-c-nav__item--m-flyout--focus__link--before--BorderWidth: 0;
16761
16885
  --pf-c-nav__item--m-flyout--active__link--before--BorderWidth: 0;
16762
16886
  --pf-c-nav__item--m-flyout__item--last-child__link--before--BorderBottomWidth: 0;
16763
- --pf-c-nav__item--m-flyout--c-menu--BoxShadow: var(--pf-global--BoxShadow--lg);
16764
16887
  --pf-c-nav__item--m-flyout--c-menu--Top: calc(0px + var(--pf-c-nav__item--m-flyout--c-menu--top-offset));
16765
16888
  --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));
16766
16889
  --pf-c-nav__item--m-flyout--c-menu__list-item--first-child--c-menu--Top: 0;
@@ -16769,11 +16892,10 @@ ul.pf-c-list {
16769
16892
  --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));
16770
16893
  --pf-c-nav__item--m-flyout--c-menu--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
16771
16894
  --pf-c-nav__item--m-flyout--c-menu__item--Color: var(--pf-c-nav__link--Color);
16895
+ --pf-c-nav__item--m-flyout--c-menu__item--PaddingTop: var(--pf-global--spacer--sm);
16772
16896
  --pf-c-nav__item--m-flyout--c-menu__item--PaddingRight: var(--pf-global--spacer--lg);
16897
+ --pf-c-nav__item--m-flyout--c-menu__item--PaddingBottom: var(--pf-global--spacer--sm);
16773
16898
  --pf-c-nav__item--m-flyout--c-menu__item--PaddingLeft: var(--pf-global--spacer--lg);
16774
- --pf-c-nav__item--m-flyout--c-menu__list-item--hover--BackgroundColor: var(--pf-c-nav__link--hover--BackgroundColor);
16775
- --pf-c-nav__item--m-flyout--c-menu__list-item--focus-within--BackgroundColor: var(--pf-c-nav__link--focus--BackgroundColor);
16776
- --pf-c-nav__item--m-flyout--c-menu__list-item--active--BackgroundColor: var(--pf-c-nav__link--active--BackgroundColor);
16777
16899
  --pf-c-nav__item--m-flyout--c-menu__item-description--Color: var(--pf-global--Color--light-200);
16778
16900
  --pf-c-nav__item--m-flyout--c-menu__item--FontSize: var(--pf-global--FontSize--sm);
16779
16901
  --pf-c-nav__item--m-flyout--c-menu__item--OutlineOffset: var(--pf-c-nav__link--OutlineOffset);
@@ -16782,17 +16904,52 @@ ul.pf-c-list {
16782
16904
  --pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
16783
16905
  --pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftColor: var(--pf-global--BorderColor--200);
16784
16906
  --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));
16907
+ --pf-c-nav__item--m-flyout--c-menu__list-item--hover--BackgroundColor: var(--pf-c-nav__link--hover--BackgroundColor);
16908
+ --pf-c-nav__item--m-flyout--c-menu__list-item--focus-within--BackgroundColor: var(--pf-c-nav__link--focus--BackgroundColor);
16909
+ --pf-c-nav__item--m-flyout--c-menu__list-item--active--BackgroundColor: var(--pf-c-nav__link--active--BackgroundColor);
16785
16910
  --pf-c-nav__item--m-flyout--c-menu__list-item--first-child__item--hover--after--Top: 0;
16786
- --pf-c-nav__item--m-drilldown__subnav--PaddingTop: 0;
16787
- --pf-c-nav__item--m-drilldown__subnav--PaddingLeft: 0;
16788
- --pf-c-nav__item--m-drilldown__subnav--PaddingBottom: 0;
16789
- --pf-c-nav__item--m-drilldown__subnav--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
16790
- --pf-c-nav__item--m-drilldown__subnav--ZIndex: var(--pf-global--ZIndex--xs);
16791
- --pf-c-nav__item--m-drilldown__link--PaddingTop: var(--pf-global--spacer--md);
16792
- --pf-c-nav__item--m-drilldown__link--PaddingBottom: var(--pf-global--spacer--md);
16793
- --pf-c-nav__item--m-drilldown__link--FontSize: var(--pf-global--FontSize--md);
16794
- --pf-c-nav__item--m-drilldown--m-expanded__toggle-icon--Rotate: 0;
16795
- --pf-c-nav__item--m-drilldown--m-expanded__subnav--ZIndex: var(--pf-global--ZIndex--xs);
16911
+ --pf-c-nav__item--m-flyout--c-menu--BoxShadow: var(--pf-global--BoxShadow--lg);
16912
+ --pf-c-nav--c-menu--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
16913
+ --pf-c-nav--c-menu__list--PaddingTop: 0;
16914
+ --pf-c-nav--c-menu__list--PaddingBottom: 0;
16915
+ --pf-c-nav--c-menu__list-item--Color: var(--pf-global--Color--light-100);
16916
+ --pf-c-nav--c-menu__list-item--hover--Color: var(--pf-global--Color--light-100);
16917
+ --pf-c-nav--c-menu__list-item--active--Color: var(--pf-global--Color--light-100);
16918
+ --pf-c-nav--c-menu__list-item--focus-within--Color: var(--pf-global--Color--light-100);
16919
+ --pf-c-nav--c-menu__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
16920
+ --pf-c-nav--c-menu__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
16921
+ --pf-c-nav--c-menu__item--PaddingTop: var(--pf-global--spacer--md);
16922
+ --pf-c-nav--c-menu__item--PaddingRight: var(--pf-global--spacer--md);
16923
+ --pf-c-nav--c-menu__item--PaddingBottom: var(--pf-global--spacer--md);
16924
+ --pf-c-nav--c-menu__item--PaddingLeft: var(--pf-global--spacer--md);
16925
+ --pf-c-nav--c-menu__item--xl--PaddingRight: var(--pf-global--spacer--lg);
16926
+ --pf-c-nav--c-menu__item--xl--PaddingLeft: var(--pf-global--spacer--lg);
16927
+ --pf-c-nav--c-menu__item--FontSize: var(--pf-global--FontSize--sm);
16928
+ --pf-c-nav--c-menu__item--OutlineOffset: calc(var(--pf-global--spacer--xs) * -1);
16929
+ --pf-c-nav--c-menu__item--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
16930
+ --pf-c-nav--c-menu__item--before--BorderBottomColor: var(--pf-global--BackgroundColor--dark-200);
16931
+ --pf-c-nav--c-menu__item--after--BorderLeftWidth: 0;
16932
+ --pf-c-nav--c-menu__item--after--BorderLeftColor: transparent;
16933
+ --pf-c-nav--c-menu__item--m-current--BackgroundColor: var(--pf-global--BackgroundColor--dark-400);
16934
+ --pf-c-nav--c-menu__item--m-current--after--BorderLeftWidth: var(--pf-global--BorderWidth--xl);
16935
+ --pf-c-nav--c-menu__item--m-current--after--BorderColor: var(--pf-global--active-color--400);
16936
+ --pf-c-nav--c-menu__item-description--Color: var(--pf-global--Color--400);
16937
+ --pf-c-nav--c-menu--m-flyout--left-offset: 0.25rem;
16938
+ --pf-c-nav--c-menu--m-flyout--m-left--right-offset: 0.25rem;
16939
+ --pf-c-nav--c-menu--m-flyout--Top: 0;
16940
+ --pf-c-nav--c-menu--m-flyout--c-menu--Top: calc(var(--pf-c-nav--c-menu--m-flyout--Top) * -1);
16941
+ --pf-c-nav--c-menu--m-flyout--c-menu--Right: auto;
16942
+ --pf-c-nav--c-menu--m-flyout--c-menu--Bottom: auto;
16943
+ --pf-c-nav--c-menu--m-flyout--c-menu--Left: calc(100% - var(--pf-c-nav--c-menu--m-flyout--left-offset));
16944
+ --pf-c-nav--c-menu--m-flyout--m-left--Right: calc(100% - var(--pf-c-nav--c-menu--m-flyout--m-left--right-offset));
16945
+ --pf-c-nav--c-menu--m-flyout--m-top--Bottom: 0;
16946
+ --pf-c-nav--c-menu--m-flyout--BoxShadow: var(--pf-global--BoxShadow--lg);
16947
+ --pf-c-nav--c-menu--m-flyout__item--PaddingTop: var(--pf-global--spacer--sm);
16948
+ --pf-c-nav--c-menu--m-flyout__item--PaddingRight: var(--pf-global--spacer--lg);
16949
+ --pf-c-nav--c-menu--m-flyout__item--PaddingBottom: var(--pf-global--spacer--sm);
16950
+ --pf-c-nav--c-menu--m-flyout__item--PaddingLeft: var(--pf-global--spacer--lg);
16951
+ --pf-c-nav--c-menu--m-flyout__item--hover--after--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
16952
+ --pf-c-nav--c-menu--m-flyout__item--hover--after--BorderLeftColor: var(--pf-global--BorderColor--200);
16796
16953
  --pf-c-nav__toggle--m-start--MarginRight: var(--pf-global--spacer--sm);
16797
16954
  position: relative;
16798
16955
  }
@@ -16809,8 +16966,86 @@ ul.pf-c-list {
16809
16966
  --pf-c-nav__section-title--PaddingRight: var(--pf-c-nav__section-title--xl--PaddingRight);
16810
16967
  --pf-c-nav__section-title--PaddingLeft: var(--pf-c-nav__section-title--xl--PaddingLeft);
16811
16968
  --pf-c-nav__subnav--PaddingLeft: var(--pf-c-nav__subnav--xl--PaddingLeft);
16969
+ --pf-c-nav--c-menu__item--PaddingRight: var(--pf-c-nav--c-menu__item--xl--PaddingRight);
16970
+ --pf-c-nav--c-menu__item--PaddingLeft: var(--pf-c-nav--c-menu__item--xl--PaddingLeft);
16812
16971
  }
16813
16972
  }
16973
+ .pf-c-nav .pf-c-menu {
16974
+ --pf-c-menu--MinWidth: 100%;
16975
+ --pf-c-menu--BackgroundColor: var(--pf-c-nav--c-menu--BackgroundColor);
16976
+ --pf-c-menu__list--PaddingTop: var(--pf-c-nav--c-menu__list--PaddingTop);
16977
+ --pf-c-menu__list--PaddingBottom: var(--pf-c-nav--c-menu__list--PaddingBottom);
16978
+ --pf-c-menu__item--PaddingTop: var(--pf-c-nav--c-menu__item--PaddingTop);
16979
+ --pf-c-menu__item--PaddingRight: var(--pf-c-nav--c-menu__item--PaddingRight);
16980
+ --pf-c-menu__item--PaddingBottom: var(--pf-c-nav--c-menu__item--PaddingBottom);
16981
+ --pf-c-menu__item--PaddingLeft: var(--pf-c-nav--c-menu__item--PaddingLeft);
16982
+ --pf-c-menu__list-item--Color: var(--pf-c-nav--c-menu__list-item--Color);
16983
+ --pf-c-menu__list-item--hover--Color: var(--pf-c-nav--c-menu__list-item--hover--Color);
16984
+ --pf-c-menu__list-item--active--Color: var(--pf-c-nav--c-menu__list-item--active--Color);
16985
+ --pf-c-menu__list-item--focus-within--Color: var(--pf-c-nav--c-menu__list-item--focus-within--Color);
16986
+ --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-c-nav--c-menu__list-item--hover--BackgroundColor);
16987
+ --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-c-nav--c-menu__list-item--focus-within--BackgroundColor);
16988
+ --pf-c-menu__item-description--Color: var(--pf-c-nav--c-menu__item-description--Color);
16989
+ }
16990
+ .pf-c-nav .pf-c-menu:first-child > .pf-c-menu__content {
16991
+ border-bottom: var(--pf-c-nav--c-menu__item--before--BorderBottomWidth) solid var(--pf-c-nav--c-menu__item--before--BorderBottomColor);
16992
+ }
16993
+ .pf-c-nav .pf-c-menu.pf-m-flyout, .pf-c-nav .pf-c-menu.pf-m-flyout .pf-c-menu {
16994
+ --pf-c-menu--BoxShadow: var(--pf-c-nav--c-menu--m-flyout--BoxShadow);
16995
+ --pf-c-menu__list--PaddingTop: 0;
16996
+ --pf-c-menu__list--PaddingBottom: 0;
16997
+ --pf-c-menu__item--FontSize: var(--pf-c-nav--c-menu__item--FontSize);
16998
+ --pf-c-menu__item--Color: var(--pf-c-nav--c-menu__item--Color);
16999
+ --pf-c-menu__item--PaddingTop: var(--pf-c-nav--c-menu--m-flyout__item--PaddingTop);
17000
+ --pf-c-menu__item--PaddingRight: var(--pf-c-nav--c-menu--m-flyout__item--PaddingRight);
17001
+ --pf-c-menu__item--PaddingBottom: var(--pf-c-nav--c-menu--m-flyout__item--PaddingBottom);
17002
+ --pf-c-menu__item--PaddingLeft: var(--pf-c-nav--c-menu--m-flyout__item--PaddingLeft);
17003
+ top: var(--pf-c-nav--c-menu--m-flyout--c-menu--Top);
17004
+ right: var(--pf-c-nav--c-menu--m-flyout--c-menu--Right);
17005
+ bottom: var(--pf-c-nav--c-menu--m-flyout--c-menu--Bottom);
17006
+ left: var(--pf-c-nav--c-menu--m-flyout--c-menu--Left);
17007
+ }
17008
+ .pf-c-nav .pf-c-menu.pf-m-flyout .pf-c-menu__item:hover {
17009
+ --pf-c-nav--c-menu__item--after--BorderLeftWidth: var(--pf-c-nav--c-menu--m-flyout__item--hover--after--BorderLeftWidth);
17010
+ --pf-c-nav--c-menu__item--after--BorderLeftColor: var(--pf-c-nav--c-menu--m-flyout__item--hover--after--BorderLeftColor);
17011
+ }
17012
+ .pf-c-nav .pf-c-menu.pf-m-top {
17013
+ --pf-c-nav--c-menu--m-flyout--c-menu--Top: auto;
17014
+ --pf-c-nav--c-menu--m-flyout--c-menu--Bottom: var(--pf-c-nav--c-menu--m-flyout--m-top--Bottom);
17015
+ }
17016
+ .pf-c-nav .pf-c-menu.pf-m-left {
17017
+ --pf-c-nav--c-menu--m-flyout--c-menu--Right: var(--pf-c-nav--c-menu--m-flyout--m-left--Right);
17018
+ --pf-c-nav--c-menu--m-flyout--c-menu--Left: auto;
17019
+ }
17020
+ .pf-c-nav .pf-c-menu .pf-c-divider {
17021
+ margin-top: 0;
17022
+ margin-bottom: 0;
17023
+ }
17024
+ .pf-c-nav .pf-c-menu__item {
17025
+ position: relative;
17026
+ outline-offset: var(--pf-c-nav--c-menu__item--OutlineOffset);
17027
+ }
17028
+ .pf-c-nav .pf-c-menu__item::before, .pf-c-nav .pf-c-menu__item::after {
17029
+ position: absolute;
17030
+ top: 0;
17031
+ content: "";
17032
+ }
17033
+ .pf-c-nav .pf-c-menu__item::before {
17034
+ right: 0;
17035
+ bottom: calc(var(--pf-c-nav--c-menu__item--before--BorderBottomWidth) * -1);
17036
+ left: 0;
17037
+ border-bottom: var(--pf-c-nav--c-menu__item--before--BorderBottomWidth) solid var(--pf-c-nav--c-menu__item--before--BorderBottomColor);
17038
+ }
17039
+ .pf-c-nav .pf-c-menu__item::after {
17040
+ bottom: 0;
17041
+ left: 0;
17042
+ border-left: var(--pf-c-nav--c-menu__item--after--BorderLeftWidth) solid var(--pf-c-nav--c-menu__item--after--BorderLeftColor);
17043
+ }
17044
+ .pf-c-nav .pf-c-menu__item.pf-m-current {
17045
+ --pf-c-nav--c-menu__item--after--BorderLeftWidth: var(--pf-c-nav--c-menu__item--m-current--after--BorderLeftWidth);
17046
+ --pf-c-nav--c-menu__item--after--BorderLeftColor: var(--pf-c-nav--c-menu__item--m-current--after--BorderColor);
17047
+ background-color: var(--pf-c-nav--c-menu__item--m-current--BackgroundColor);
17048
+ }
16814
17049
  .pf-c-nav.pf-m-horizontal .pf-c-nav__link::after, .pf-c-nav.pf-m-tertiary .pf-c-nav__link::after {
16815
17050
  content: none;
16816
17051
  }
@@ -17062,9 +17297,13 @@ ul.pf-c-list {
17062
17297
  --pf-c-menu__list-item--active--BackgroundColor: var(--pf-c-nav__item--m-flyout--c-menu__list-item--active--BackgroundColor);
17063
17298
  --pf-c-menu__item--FontSize: var(--pf-c-nav__item--m-flyout--c-menu__item--FontSize);
17064
17299
  --pf-c-menu__item--Color: var(--pf-c-nav__item--m-flyout--c-menu__item--Color);
17300
+ --pf-c-menu__item--PaddingTop: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingTop);
17065
17301
  --pf-c-menu__item--PaddingRight: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingRight);
17302
+ --pf-c-menu__item--PaddingBottom: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingBottom);
17066
17303
  --pf-c-menu__item--PaddingLeft: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingLeft);
17067
17304
  --pf-c-menu__item-description--Color: var(--pf-c-nav__item--m-flyout--c-menu__item-description--Color);
17305
+ --pf-c-nav--c-menu--m-flyout--c-menu--Bottom: var(--pf-c-nav__item--m-flyout--c-menu--m-top--Bottom);
17306
+ --pf-c-nav--c-menu--m-flyout--c-menu--Right: var(--pf-c-nav__item--m-flyout--c-menu--m-left--Right);
17068
17307
  position: absolute;
17069
17308
  top: var(--pf-c-nav__item--m-flyout--c-menu--Top);
17070
17309
  left: var(--pf-c-nav__item--m-flyout--c-menu--Left);
@@ -17072,14 +17311,6 @@ ul.pf-c-list {
17072
17311
  .pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu {
17073
17312
  top: var(--pf-c-nav__item--m-flyout--c-menu--c-menu--Top);
17074
17313
  }
17075
- .pf-c-nav__item.pf-m-flyout .pf-c-menu.pf-m-top {
17076
- top: auto;
17077
- bottom: var(--pf-c-nav__item--m-flyout--c-menu--m-top--Bottom);
17078
- }
17079
- .pf-c-nav__item.pf-m-flyout .pf-c-menu.pf-m-left {
17080
- right: var(--pf-c-nav__item--m-flyout--c-menu--m-left--Right);
17081
- left: auto;
17082
- }
17083
17314
  .pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu__list-item:first-child {
17084
17315
  --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);
17085
17316
  --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);
@@ -17104,25 +17335,6 @@ ul.pf-c-list {
17104
17335
  content: "";
17105
17336
  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);
17106
17337
  }
17107
- .pf-c-nav__item.pf-m-drilldown {
17108
- --pf-c-nav__subnav--PaddingTop: var(--pf-c-nav__item--m-drilldown__subnav--PaddingTop);
17109
- --pf-c-nav__subnav--PaddingBottom: var(--pf-c-nav__item--m-drilldown__subnav--PaddingBottom);
17110
- --pf-c-nav__subnav--PaddingLeft: var(--pf-c-nav__item--m-drilldown__subnav--PaddingLeft);
17111
- --pf-c-nav__item--m-expanded__toggle-icon--Rotate: var(--pf-c-nav__item--m-drilldown--m-expanded__toggle-icon--Rotate);
17112
- }
17113
- .pf-c-nav__item.pf-m-drilldown > .pf-c-nav__subnav {
17114
- --pf-c-nav__link--PaddingTop: var(--pf-c-nav__item--m-drilldown__link--PaddingTop);
17115
- --pf-c-nav__link--PaddingBottom: var(--pf-c-nav__item--m-drilldown__link--PaddingBottom);
17116
- --pf-c-nav__link--FontSize: var(--pf-c-nav__item--m-drilldown__link--FontSize);
17117
- --pf-c-nav__subnav--MaxHeight: 100%;
17118
- position: absolute;
17119
- top: 0;
17120
- left: 100%;
17121
- z-index: var(--pf-c-nav__item--m-drilldown__subnav--ZIndex);
17122
- width: 100%;
17123
- height: 100%;
17124
- background-color: var(--pf-c-nav__item--m-drilldown__subnav--BackgroundColor);
17125
- }
17126
17338
  .pf-c-nav__item.pf-m-drilldown.pf-m-expanded > .pf-c-nav__subnav {
17127
17339
  left: 0;
17128
17340
  z-index: var(--pf-c-nav__item--m-drilldown--m-expanded__subnav--ZIndex);