@patternfly/react-table 4.42.0 → 4.44.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (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 +772 -282
  63. package/dist/umd/react-table.js +247 -208
  64. package/dist/umd/react-table.min.css +955 -465
  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
package/dist/umd/react-table.min.css CHANGED
@@ -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);
@@ -7136,6 +7294,153 @@ svg.pf-c-spinner.pf-m-xl {
7136
7294
  --pf-c-alert__title--FontWeight: var(--pf-global--FontWeight--normal);
7137
7295
  }
7138
7296
 
7297
+ .pf-u-screen-reader {
7298
+ position: fixed;
7299
+ top: 0;
7300
+ left: 0;
7301
+ overflow: hidden;
7302
+ clip: rect(0, 0, 0, 0);
7303
+ white-space: nowrap;
7304
+ border: 0;
7305
+ }
7306
+
7307
+ .pf-u-visible {
7308
+ position: static;
7309
+ overflow: visible;
7310
+ clip: auto;
7311
+ white-space: normal;
7312
+ border: inherit;
7313
+ }
7314
+
7315
+ .pf-u-hidden {
7316
+ display: none !important;
7317
+ }
7318
+
7319
+ @media screen and (min-width: 576px) {
7320
+ .pf-u-screen-reader-on-sm {
7321
+ position: fixed;
7322
+ top: 0;
7323
+ left: 0;
7324
+ overflow: hidden;
7325
+ clip: rect(0, 0, 0, 0);
7326
+ white-space: nowrap;
7327
+ border: 0;
7328
+ }
7329
+ }
7330
+ @media screen and (min-width: 576px) {
7331
+ .pf-u-visible-on-sm {
7332
+ position: static;
7333
+ overflow: visible;
7334
+ clip: auto;
7335
+ white-space: normal;
7336
+ border: inherit;
7337
+ }
7338
+ }
7339
+ @media screen and (min-width: 576px) {
7340
+ .pf-u-hidden-on-sm {
7341
+ display: none !important;
7342
+ }
7343
+ }
7344
+ @media screen and (min-width: 768px) {
7345
+ .pf-u-screen-reader-on-md {
7346
+ position: fixed;
7347
+ top: 0;
7348
+ left: 0;
7349
+ overflow: hidden;
7350
+ clip: rect(0, 0, 0, 0);
7351
+ white-space: nowrap;
7352
+ border: 0;
7353
+ }
7354
+ }
7355
+ @media screen and (min-width: 768px) {
7356
+ .pf-u-visible-on-md {
7357
+ position: static;
7358
+ overflow: visible;
7359
+ clip: auto;
7360
+ white-space: normal;
7361
+ border: inherit;
7362
+ }
7363
+ }
7364
+ @media screen and (min-width: 768px) {
7365
+ .pf-u-hidden-on-md {
7366
+ display: none !important;
7367
+ }
7368
+ }
7369
+ @media screen and (min-width: 992px) {
7370
+ .pf-u-screen-reader-on-lg {
7371
+ position: fixed;
7372
+ top: 0;
7373
+ left: 0;
7374
+ overflow: hidden;
7375
+ clip: rect(0, 0, 0, 0);
7376
+ white-space: nowrap;
7377
+ border: 0;
7378
+ }
7379
+ }
7380
+ @media screen and (min-width: 992px) {
7381
+ .pf-u-visible-on-lg {
7382
+ position: static;
7383
+ overflow: visible;
7384
+ clip: auto;
7385
+ white-space: normal;
7386
+ border: inherit;
7387
+ }
7388
+ }
7389
+ @media screen and (min-width: 992px) {
7390
+ .pf-u-hidden-on-lg {
7391
+ display: none !important;
7392
+ }
7393
+ }
7394
+ @media screen and (min-width: 1200px) {
7395
+ .pf-u-screen-reader-on-xl {
7396
+ position: fixed;
7397
+ top: 0;
7398
+ left: 0;
7399
+ overflow: hidden;
7400
+ clip: rect(0, 0, 0, 0);
7401
+ white-space: nowrap;
7402
+ border: 0;
7403
+ }
7404
+ }
7405
+ @media screen and (min-width: 1200px) {
7406
+ .pf-u-visible-on-xl {
7407
+ position: static;
7408
+ overflow: visible;
7409
+ clip: auto;
7410
+ white-space: normal;
7411
+ border: inherit;
7412
+ }
7413
+ }
7414
+ @media screen and (min-width: 1200px) {
7415
+ .pf-u-hidden-on-xl {
7416
+ display: none !important;
7417
+ }
7418
+ }
7419
+ @media screen and (min-width: 1450px) {
7420
+ .pf-u-screen-reader-on-2xl {
7421
+ position: fixed;
7422
+ top: 0;
7423
+ left: 0;
7424
+ overflow: hidden;
7425
+ clip: rect(0, 0, 0, 0);
7426
+ white-space: nowrap;
7427
+ border: 0;
7428
+ }
7429
+ }
7430
+ @media screen and (min-width: 1450px) {
7431
+ .pf-u-visible-on-2xl {
7432
+ position: static;
7433
+ overflow: visible;
7434
+ clip: auto;
7435
+ white-space: normal;
7436
+ border: inherit;
7437
+ }
7438
+ }
7439
+ @media screen and (min-width: 1450px) {
7440
+ .pf-u-hidden-on-2xl {
7441
+ display: none !important;
7442
+ }
7443
+ }
7139
7444
  .pf-c-app-launcher {
7140
7445
  --pf-c-app-launcher__menu--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
7141
7446
  --pf-c-app-launcher__menu--BoxShadow: var(--pf-global--BoxShadow--md);
@@ -7365,167 +7670,20 @@ svg.pf-c-spinner.pf-m-xl {
7365
7670
  color: var(--pf-c-app-launcher__group-title--Color);
7366
7671
  }
7367
7672
 
7368
- .pf-u-screen-reader {
7369
- position: fixed;
7370
- top: 0;
7371
- left: 0;
7372
- overflow: hidden;
7373
- clip: rect(0, 0, 0, 0);
7374
- white-space: nowrap;
7375
- border: 0;
7376
- }
7377
-
7378
- .pf-u-visible {
7379
- position: static;
7380
- overflow: visible;
7381
- clip: auto;
7382
- white-space: normal;
7383
- border: inherit;
7384
- }
7385
-
7386
- .pf-u-hidden {
7387
- display: none !important;
7388
- }
7389
-
7390
- @media screen and (min-width: 576px) {
7391
- .pf-u-screen-reader-on-sm {
7392
- position: fixed;
7393
- top: 0;
7394
- left: 0;
7395
- overflow: hidden;
7396
- clip: rect(0, 0, 0, 0);
7397
- white-space: nowrap;
7398
- border: 0;
7399
- }
7400
- }
7401
- @media screen and (min-width: 576px) {
7402
- .pf-u-visible-on-sm {
7403
- position: static;
7404
- overflow: visible;
7405
- clip: auto;
7406
- white-space: normal;
7407
- border: inherit;
7408
- }
7409
- }
7410
- @media screen and (min-width: 576px) {
7411
- .pf-u-hidden-on-sm {
7412
- display: none !important;
7413
- }
7414
- }
7415
- @media screen and (min-width: 768px) {
7416
- .pf-u-screen-reader-on-md {
7417
- position: fixed;
7418
- top: 0;
7419
- left: 0;
7420
- overflow: hidden;
7421
- clip: rect(0, 0, 0, 0);
7422
- white-space: nowrap;
7423
- border: 0;
7424
- }
7425
- }
7426
- @media screen and (min-width: 768px) {
7427
- .pf-u-visible-on-md {
7428
- position: static;
7429
- overflow: visible;
7430
- clip: auto;
7431
- white-space: normal;
7432
- border: inherit;
7433
- }
7434
- }
7435
- @media screen and (min-width: 768px) {
7436
- .pf-u-hidden-on-md {
7437
- display: none !important;
7438
- }
7439
- }
7440
- @media screen and (min-width: 992px) {
7441
- .pf-u-screen-reader-on-lg {
7442
- position: fixed;
7443
- top: 0;
7444
- left: 0;
7445
- overflow: hidden;
7446
- clip: rect(0, 0, 0, 0);
7447
- white-space: nowrap;
7448
- border: 0;
7449
- }
7450
- }
7451
- @media screen and (min-width: 992px) {
7452
- .pf-u-visible-on-lg {
7453
- position: static;
7454
- overflow: visible;
7455
- clip: auto;
7456
- white-space: normal;
7457
- border: inherit;
7458
- }
7459
- }
7460
- @media screen and (min-width: 992px) {
7461
- .pf-u-hidden-on-lg {
7462
- display: none !important;
7463
- }
7464
- }
7465
- @media screen and (min-width: 1200px) {
7466
- .pf-u-screen-reader-on-xl {
7467
- position: fixed;
7468
- top: 0;
7469
- left: 0;
7470
- overflow: hidden;
7471
- clip: rect(0, 0, 0, 0);
7472
- white-space: nowrap;
7473
- border: 0;
7474
- }
7475
- }
7476
- @media screen and (min-width: 1200px) {
7477
- .pf-u-visible-on-xl {
7478
- position: static;
7479
- overflow: visible;
7480
- clip: auto;
7481
- white-space: normal;
7482
- border: inherit;
7483
- }
7484
- }
7485
- @media screen and (min-width: 1200px) {
7486
- .pf-u-hidden-on-xl {
7487
- display: none !important;
7488
- }
7489
- }
7490
- @media screen and (min-width: 1450px) {
7491
- .pf-u-screen-reader-on-2xl {
7492
- position: fixed;
7493
- top: 0;
7494
- left: 0;
7495
- overflow: hidden;
7496
- clip: rect(0, 0, 0, 0);
7497
- white-space: nowrap;
7498
- border: 0;
7499
- }
7500
- }
7501
- @media screen and (min-width: 1450px) {
7502
- .pf-u-visible-on-2xl {
7503
- position: static;
7504
- overflow: visible;
7505
- clip: auto;
7506
- white-space: normal;
7507
- border: inherit;
7508
- }
7509
- }
7510
- @media screen and (min-width: 1450px) {
7511
- .pf-u-hidden-on-2xl {
7512
- display: none !important;
7513
- }
7514
- }
7515
- .pf-c-avatar {
7516
- --pf-c-avatar--BorderColor: transparent;
7517
- --pf-c-avatar--BorderWidth: 0;
7518
- --pf-c-avatar--BorderRadius: var(--pf-global--BorderRadius--lg);
7519
- --pf-c-avatar--Width: 2.25rem;
7520
- --pf-c-avatar--Height: 2.25rem;
7521
- --pf-c-avatar--m-light--BorderColor: var(--pf-global--BorderColor--dark-100);
7522
- --pf-c-avatar--m-light--BorderWidth: var(--pf-global--BorderWidth--sm);
7523
- --pf-c-avatar--m-dark--BorderColor: var(--pf-global--palette--black-700);
7524
- --pf-c-avatar--m-dark--BorderWidth: var(--pf-global--BorderWidth--sm);
7525
- width: var(--pf-c-avatar--Width);
7526
- height: var(--pf-c-avatar--Height);
7527
- border: var(--pf-c-avatar--BorderWidth) solid var(--pf-c-avatar--BorderColor);
7528
- border-radius: var(--pf-c-avatar--BorderRadius);
7673
+ .pf-c-avatar {
7674
+ --pf-c-avatar--BorderColor: transparent;
7675
+ --pf-c-avatar--BorderWidth: 0;
7676
+ --pf-c-avatar--BorderRadius: var(--pf-global--BorderRadius--lg);
7677
+ --pf-c-avatar--Width: 2.25rem;
7678
+ --pf-c-avatar--Height: 2.25rem;
7679
+ --pf-c-avatar--m-light--BorderColor: var(--pf-global--BorderColor--dark-100);
7680
+ --pf-c-avatar--m-light--BorderWidth: var(--pf-global--BorderWidth--sm);
7681
+ --pf-c-avatar--m-dark--BorderColor: var(--pf-global--palette--black-700);
7682
+ --pf-c-avatar--m-dark--BorderWidth: var(--pf-global--BorderWidth--sm);
7683
+ width: var(--pf-c-avatar--Width);
7684
+ height: var(--pf-c-avatar--Height);
7685
+ border: var(--pf-c-avatar--BorderWidth) solid var(--pf-c-avatar--BorderColor);
7686
+ border-radius: var(--pf-c-avatar--BorderRadius);
7529
7687
  }
7530
7688
 
7531
7689
  .pf-c-avatar.pf-m-light {
@@ -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);
15123
- }
15124
-
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;
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;
15128
15301
  }
15129
15302
 
15130
- .pf-c-menu.pf-m-flyout .pf-c-menu__content {
15131
- overflow-y: visible;
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);
15132
15306
  }
15133
15307
 
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);
@@ -15659,6 +15970,206 @@ ul.pf-c-list {
15659
15970
  margin-right: var(--pf-c-menu-toggle__toggle-icon--MarginRight);
15660
15971
  }
15661
15972
 
15973
+ .pf-c-modal-box {
15974
+ --pf-c-modal-box--BackgroundColor: var(--pf-global--BackgroundColor--100);
15975
+ --pf-c-modal-box--BoxShadow: var(--pf-global--BoxShadow--xl);
15976
+ --pf-c-modal-box--ZIndex: var(--pf-global--ZIndex--xl);
15977
+ --pf-c-modal-box--Width: 100%;
15978
+ --pf-c-modal-box--MaxWidth: calc(100% - var(--pf-global--spacer--xl));
15979
+ --pf-c-modal-box--m-sm--sm--MaxWidth: 35rem;
15980
+ --pf-c-modal-box--m-md--Width: 52.5rem;
15981
+ --pf-c-modal-box--m-lg--lg--MaxWidth: 70rem;
15982
+ --pf-c-modal-box--MaxHeight: calc(100% - var(--pf-global--spacer--2xl));
15983
+ --pf-c-modal-box--m-align-top--spacer: var(--pf-global--spacer--sm);
15984
+ --pf-c-modal-box--m-align-top--xl--spacer: var(--pf-global--spacer--xl);
15985
+ --pf-c-modal-box--m-align-top--MarginTop: var(--pf-c-modal-box--m-align-top--spacer);
15986
+ --pf-c-modal-box--m-align-top--MaxHeight: calc(100% - min(var(--pf-c-modal-box--m-align-top--spacer), var(--pf-global--spacer--2xl)) - var(--pf-c-modal-box--m-align-top--spacer));
15987
+ --pf-c-modal-box--m-align-top--MaxWidth: calc(100% - min(var(--pf-c-modal-box--m-align-top--spacer) * 2, var(--pf-global--spacer--xl)));
15988
+ --pf-c-modal-box--m-danger__title-icon--Color: var(--pf-global--danger-color--100);
15989
+ --pf-c-modal-box--m-warning__title-icon--Color: var(--pf-global--warning-color--100);
15990
+ --pf-c-modal-box--m-success__title-icon--Color: var(--pf-global--success-color--100);
15991
+ --pf-c-modal-box--m-info__title-icon--Color: var(--pf-global--info-color--100);
15992
+ --pf-c-modal-box--m-default__title-icon--Color: var(--pf-global--default-color--200);
15993
+ --pf-c-modal-box__header--PaddingTop: var(--pf-global--spacer--lg);
15994
+ --pf-c-modal-box__header--PaddingRight: var(--pf-global--spacer--lg);
15995
+ --pf-c-modal-box__header--PaddingLeft: var(--pf-global--spacer--lg);
15996
+ --pf-c-modal-box__header--last-child--PaddingBottom: var(--pf-global--spacer--lg);
15997
+ --pf-c-modal-box__title--LineHeight: var(--pf-global--LineHeight--sm);
15998
+ --pf-c-modal-box__title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
15999
+ --pf-c-modal-box__title--FontSize: var(--pf-global--FontSize--2xl);
16000
+ --pf-c-modal-box__title-icon--MarginRight: var(--pf-global--spacer--sm);
16001
+ --pf-c-modal-box__title-icon--Color: var(--pf-global--Color--100);
16002
+ --pf-c-modal-box__description--PaddingTop: var(--pf-global--spacer--xs);
16003
+ --pf-c-modal-box__body--MinHeight: calc(var(--pf-global--FontSize--md) * var(--pf-global--LineHeight--md));
16004
+ --pf-c-modal-box__body--PaddingTop: var(--pf-global--spacer--lg);
16005
+ --pf-c-modal-box__body--PaddingRight: var(--pf-global--spacer--lg);
16006
+ --pf-c-modal-box__body--PaddingLeft: var(--pf-global--spacer--lg);
16007
+ --pf-c-modal-box__body--last-child--PaddingBottom: var(--pf-global--spacer--lg);
16008
+ --pf-c-modal-box__header--body--PaddingTop: var(--pf-global--spacer--md);
16009
+ --pf-c-modal-box--c-button--Top: calc(var(--pf-global--spacer--lg));
16010
+ --pf-c-modal-box--c-button--Right: var(--pf-global--spacer--md);
16011
+ --pf-c-modal-box--c-button--sibling--MarginRight: calc(var(--pf-global--spacer--xl) + var(--pf-global--spacer--sm));
16012
+ --pf-c-modal-box__footer--PaddingTop: var(--pf-global--spacer--lg);
16013
+ --pf-c-modal-box__footer--PaddingRight: var(--pf-global--spacer--lg);
16014
+ --pf-c-modal-box__footer--PaddingBottom: var(--pf-global--spacer--lg);
16015
+ --pf-c-modal-box__footer--PaddingLeft: var(--pf-global--spacer--lg);
16016
+ --pf-c-modal-box__footer--c-button--MarginRight: var(--pf-global--spacer--md);
16017
+ --pf-c-modal-box__footer--c-button--sm--MarginRight: calc(var(--pf-c-modal-box__footer--c-button--MarginRight) / 2);
16018
+ position: relative;
16019
+ z-index: var(--pf-c-modal-box--ZIndex);
16020
+ display: flex;
16021
+ flex-direction: column;
16022
+ width: var(--pf-c-modal-box--Width);
16023
+ max-width: var(--pf-c-modal-box--MaxWidth);
16024
+ max-height: var(--pf-c-modal-box--MaxHeight);
16025
+ background-color: var(--pf-c-modal-box--BackgroundColor);
16026
+ box-shadow: var(--pf-c-modal-box--BoxShadow);
16027
+ }
16028
+
16029
+ @media (min-width: 1200px) {
16030
+ .pf-c-modal-box {
16031
+ --pf-c-modal-box--m-align-top--spacer: var(--pf-c-modal-box--m-align-top--xl--spacer);
16032
+ }
16033
+ }
16034
+ .pf-c-modal-box.pf-m-sm {
16035
+ --pf-c-modal-box--Width: var(--pf-c-modal-box--m-sm--sm--MaxWidth);
16036
+ }
16037
+
16038
+ .pf-c-modal-box.pf-m-md {
16039
+ --pf-c-modal-box--Width: var(--pf-c-modal-box--m-md--Width);
16040
+ }
16041
+
16042
+ .pf-c-modal-box.pf-m-lg {
16043
+ --pf-c-modal-box--Width: var(--pf-c-modal-box--m-lg--lg--MaxWidth);
16044
+ }
16045
+
16046
+ .pf-c-modal-box.pf-m-align-top {
16047
+ top: var(--pf-c-modal-box--m-align-top--MarginTop);
16048
+ align-self: flex-start;
16049
+ max-width: var(--pf-c-modal-box--m-align-top--MaxWidth);
16050
+ max-height: var(--pf-c-modal-box--m-align-top--MaxHeight);
16051
+ }
16052
+
16053
+ .pf-c-modal-box.pf-m-danger {
16054
+ --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-danger__title-icon--Color);
16055
+ }
16056
+
16057
+ .pf-c-modal-box.pf-m-warning {
16058
+ --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-warning__title-icon--Color);
16059
+ }
16060
+
16061
+ .pf-c-modal-box.pf-m-success {
16062
+ --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-success__title-icon--Color);
16063
+ }
16064
+
16065
+ .pf-c-modal-box.pf-m-default {
16066
+ --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-default__title-icon--Color);
16067
+ }
16068
+
16069
+ .pf-c-modal-box.pf-m-info {
16070
+ --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-info__title-icon--Color);
16071
+ }
16072
+
16073
+ .pf-c-modal-box > .pf-c-button {
16074
+ position: absolute;
16075
+ top: var(--pf-c-modal-box--c-button--Top);
16076
+ right: var(--pf-c-modal-box--c-button--Right);
16077
+ }
16078
+
16079
+ .pf-c-modal-box > .pf-c-button + * {
16080
+ margin-right: var(--pf-c-modal-box--c-button--sibling--MarginRight);
16081
+ }
16082
+
16083
+ .pf-c-modal-box__header {
16084
+ display: flex;
16085
+ flex-direction: column;
16086
+ flex-shrink: 0;
16087
+ padding-top: var(--pf-c-modal-box__header--PaddingTop);
16088
+ padding-right: var(--pf-c-modal-box__header--PaddingRight);
16089
+ padding-left: var(--pf-c-modal-box__header--PaddingLeft);
16090
+ }
16091
+
16092
+ .pf-c-modal-box__header.pf-m-help {
16093
+ display: flex;
16094
+ flex-direction: row;
16095
+ }
16096
+
16097
+ .pf-c-modal-box__header:last-child {
16098
+ padding-bottom: var(--pf-c-modal-box__header--last-child--PaddingBottom);
16099
+ }
16100
+
16101
+ .pf-c-modal-box__header + .pf-c-modal-box__body {
16102
+ --pf-c-modal-box__body--PaddingTop: var(--pf-c-modal-box__header--body--PaddingTop);
16103
+ }
16104
+
16105
+ .pf-c-modal-box__header-main {
16106
+ flex-grow: 1;
16107
+ min-width: 0;
16108
+ }
16109
+
16110
+ .pf-c-modal-box__title,
16111
+ .pf-c-modal-box__title-text {
16112
+ overflow: hidden;
16113
+ text-overflow: ellipsis;
16114
+ white-space: nowrap;
16115
+ }
16116
+
16117
+ .pf-c-modal-box__title {
16118
+ flex: 0 0 auto;
16119
+ font-family: var(--pf-c-modal-box__title--FontFamily);
16120
+ font-size: var(--pf-c-modal-box__title--FontSize);
16121
+ line-height: var(--pf-c-modal-box__title--LineHeight);
16122
+ }
16123
+
16124
+ .pf-c-modal-box__title.pf-m-icon {
16125
+ display: flex;
16126
+ }
16127
+
16128
+ .pf-c-modal-box__title-icon {
16129
+ margin-right: var(--pf-c-modal-box__title-icon--MarginRight);
16130
+ color: var(--pf-c-modal-box__title-icon--Color);
16131
+ }
16132
+
16133
+ .pf-c-modal-box__description {
16134
+ padding-top: var(--pf-c-modal-box__description--PaddingTop);
16135
+ }
16136
+
16137
+ .pf-c-modal-box__body {
16138
+ flex: 1 1 auto;
16139
+ min-height: var(--pf-c-modal-box__body--MinHeight);
16140
+ padding-top: var(--pf-c-modal-box__body--PaddingTop);
16141
+ padding-right: var(--pf-c-modal-box__body--PaddingRight);
16142
+ padding-left: var(--pf-c-modal-box__body--PaddingLeft);
16143
+ overflow-x: hidden;
16144
+ overflow-y: auto;
16145
+ overscroll-behavior: contain;
16146
+ word-break: break-word;
16147
+ -webkit-overflow-scrolling: touch;
16148
+ }
16149
+
16150
+ .pf-c-modal-box__body:last-child {
16151
+ padding-bottom: var(--pf-c-modal-box__body--last-child--PaddingBottom);
16152
+ }
16153
+
16154
+ .pf-c-modal-box__footer {
16155
+ display: flex;
16156
+ flex: 0 0 auto;
16157
+ align-items: center;
16158
+ padding-top: var(--pf-c-modal-box__footer--PaddingTop);
16159
+ padding-right: var(--pf-c-modal-box__footer--PaddingRight);
16160
+ padding-bottom: var(--pf-c-modal-box__footer--PaddingBottom);
16161
+ padding-left: var(--pf-c-modal-box__footer--PaddingLeft);
16162
+ }
16163
+
16164
+ .pf-c-modal-box__footer > .pf-c-button:not(:last-child) {
16165
+ margin-right: var(--pf-c-modal-box__footer--c-button--MarginRight);
16166
+ }
16167
+
16168
+ @media screen and (min-width: 576px) {
16169
+ .pf-c-modal-box__footer > .pf-c-button:not(:last-child) {
16170
+ --pf-c-modal-box__footer--c-button--MarginRight: var(--pf-c-modal-box__footer--c-button--sm--MarginRight);
16171
+ }
16172
+ }
15662
16173
  .pf-c-nav {
15663
16174
  --pf-c-nav--Transition: var(--pf-global--Transition);
15664
16175
  --pf-c-nav--m-light__item--before--BorderColor: var(--pf-global--BorderColor--300);
@@ -15898,7 +16409,6 @@ ul.pf-c-list {
15898
16409
  --pf-c-nav__item--m-flyout--focus__link--before--BorderWidth: 0;
15899
16410
  --pf-c-nav__item--m-flyout--active__link--before--BorderWidth: 0;
15900
16411
  --pf-c-nav__item--m-flyout__item--last-child__link--before--BorderBottomWidth: 0;
15901
- --pf-c-nav__item--m-flyout--c-menu--BoxShadow: var(--pf-global--BoxShadow--lg);
15902
16412
  --pf-c-nav__item--m-flyout--c-menu--Top: calc(0px + var(--pf-c-nav__item--m-flyout--c-menu--top-offset));
15903
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));
15904
16414
  --pf-c-nav__item--m-flyout--c-menu__list-item--first-child--c-menu--Top: 0;
@@ -15907,11 +16417,10 @@ ul.pf-c-list {
15907
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));
15908
16418
  --pf-c-nav__item--m-flyout--c-menu--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
15909
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);
15910
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);
15911
16423
  --pf-c-nav__item--m-flyout--c-menu__item--PaddingLeft: var(--pf-global--spacer--lg);
15912
- --pf-c-nav__item--m-flyout--c-menu__list-item--hover--BackgroundColor: var(--pf-c-nav__link--hover--BackgroundColor);
15913
- --pf-c-nav__item--m-flyout--c-menu__list-item--focus-within--BackgroundColor: var(--pf-c-nav__link--focus--BackgroundColor);
15914
- --pf-c-nav__item--m-flyout--c-menu__list-item--active--BackgroundColor: var(--pf-c-nav__link--active--BackgroundColor);
15915
16424
  --pf-c-nav__item--m-flyout--c-menu__item-description--Color: var(--pf-global--Color--light-200);
15916
16425
  --pf-c-nav__item--m-flyout--c-menu__item--FontSize: var(--pf-global--FontSize--sm);
15917
16426
  --pf-c-nav__item--m-flyout--c-menu__item--OutlineOffset: var(--pf-c-nav__link--OutlineOffset);
@@ -15920,36 +16429,161 @@ ul.pf-c-list {
15920
16429
  --pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
15921
16430
  --pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftColor: var(--pf-global--BorderColor--200);
15922
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);
15923
16435
  --pf-c-nav__item--m-flyout--c-menu__list-item--first-child__item--hover--after--Top: 0;
15924
- --pf-c-nav__item--m-drilldown__subnav--PaddingTop: 0;
15925
- --pf-c-nav__item--m-drilldown__subnav--PaddingLeft: 0;
15926
- --pf-c-nav__item--m-drilldown__subnav--PaddingBottom: 0;
15927
- --pf-c-nav__item--m-drilldown__subnav--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
15928
- --pf-c-nav__item--m-drilldown__subnav--ZIndex: var(--pf-global--ZIndex--xs);
15929
- --pf-c-nav__item--m-drilldown__link--PaddingTop: var(--pf-global--spacer--md);
15930
- --pf-c-nav__item--m-drilldown__link--PaddingBottom: var(--pf-global--spacer--md);
15931
- --pf-c-nav__item--m-drilldown__link--FontSize: var(--pf-global--FontSize--md);
15932
- --pf-c-nav__item--m-drilldown--m-expanded__toggle-icon--Rotate: 0;
15933
- --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);
15934
16478
  --pf-c-nav__toggle--m-start--MarginRight: var(--pf-global--spacer--sm);
15935
16479
  position: relative;
15936
16480
  }
15937
16481
 
15938
- @media screen and (min-width: 1200px) {
15939
- .pf-c-nav {
15940
- --pf-c-nav__link--PaddingRight: var(--pf-c-nav__link--xl--PaddingRight);
15941
- --pf-c-nav__link--PaddingLeft: var(--pf-c-nav__link--xl--PaddingLeft);
15942
- --pf-c-nav--m-horizontal-subnav__link--PaddingTop: var(--pf-c-nav--m-horizontal-subnav__link--xl--PaddingTop);
15943
- --pf-c-nav--m-horizontal-subnav__link--PaddingRight: var(--pf-c-nav--m-horizontal-subnav__link--xl--PaddingRight);
15944
- --pf-c-nav--m-horizontal-subnav__link--PaddingBottom: var(--pf-c-nav--m-horizontal-subnav__link--xl--PaddingBottom);
15945
- --pf-c-nav--m-horizontal-subnav__link--PaddingLeft: var(--pf-c-nav--m-horizontal-subnav__link--xl--PaddingLeft);
15946
- --pf-c-nav__section__link--PaddingRight: var(--pf-c-nav__section__link--xl--PaddingRight);
15947
- --pf-c-nav__section__link--PaddingLeft: var(--pf-c-nav__section__link--xl--PaddingLeft);
15948
- --pf-c-nav__section-title--PaddingRight: var(--pf-c-nav__section-title--xl--PaddingRight);
15949
- --pf-c-nav__section-title--PaddingLeft: var(--pf-c-nav__section-title--xl--PaddingLeft);
15950
- --pf-c-nav__subnav--PaddingLeft: var(--pf-c-nav__subnav--xl--PaddingLeft);
15951
- }
16482
+ @media screen and (min-width: 1200px) {
16483
+ .pf-c-nav {
16484
+ --pf-c-nav__link--PaddingRight: var(--pf-c-nav__link--xl--PaddingRight);
16485
+ --pf-c-nav__link--PaddingLeft: var(--pf-c-nav__link--xl--PaddingLeft);
16486
+ --pf-c-nav--m-horizontal-subnav__link--PaddingTop: var(--pf-c-nav--m-horizontal-subnav__link--xl--PaddingTop);
16487
+ --pf-c-nav--m-horizontal-subnav__link--PaddingRight: var(--pf-c-nav--m-horizontal-subnav__link--xl--PaddingRight);
16488
+ --pf-c-nav--m-horizontal-subnav__link--PaddingBottom: var(--pf-c-nav--m-horizontal-subnav__link--xl--PaddingBottom);
16489
+ --pf-c-nav--m-horizontal-subnav__link--PaddingLeft: var(--pf-c-nav--m-horizontal-subnav__link--xl--PaddingLeft);
16490
+ --pf-c-nav__section__link--PaddingRight: var(--pf-c-nav__section__link--xl--PaddingRight);
16491
+ --pf-c-nav__section__link--PaddingLeft: var(--pf-c-nav__section__link--xl--PaddingLeft);
16492
+ --pf-c-nav__section-title--PaddingRight: var(--pf-c-nav__section-title--xl--PaddingRight);
16493
+ --pf-c-nav__section-title--PaddingLeft: var(--pf-c-nav__section-title--xl--PaddingLeft);
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);
16497
+ }
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);
15952
16585
  }
16586
+
15953
16587
  .pf-c-nav.pf-m-horizontal .pf-c-nav__link::after, .pf-c-nav.pf-m-tertiary .pf-c-nav__link::after {
15954
16588
  content: none;
15955
16589
  }
@@ -16231,9 +16865,13 @@ ul.pf-c-list {
16231
16865
  --pf-c-menu__list-item--active--BackgroundColor: var(--pf-c-nav__item--m-flyout--c-menu__list-item--active--BackgroundColor);
16232
16866
  --pf-c-menu__item--FontSize: var(--pf-c-nav__item--m-flyout--c-menu__item--FontSize);
16233
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);
16234
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);
16235
16871
  --pf-c-menu__item--PaddingLeft: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingLeft);
16236
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);
16237
16875
  position: absolute;
16238
16876
  top: var(--pf-c-nav__item--m-flyout--c-menu--Top);
16239
16877
  left: var(--pf-c-nav__item--m-flyout--c-menu--Left);
@@ -16243,16 +16881,6 @@ ul.pf-c-list {
16243
16881
  top: var(--pf-c-nav__item--m-flyout--c-menu--c-menu--Top);
16244
16882
  }
16245
16883
 
16246
- .pf-c-nav__item.pf-m-flyout .pf-c-menu.pf-m-top {
16247
- top: auto;
16248
- bottom: var(--pf-c-nav__item--m-flyout--c-menu--m-top--Bottom);
16249
- }
16250
-
16251
- .pf-c-nav__item.pf-m-flyout .pf-c-menu.pf-m-left {
16252
- right: var(--pf-c-nav__item--m-flyout--c-menu--m-left--Right);
16253
- left: auto;
16254
- }
16255
-
16256
16884
  .pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu__list-item:first-child {
16257
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);
16258
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);
@@ -16281,27 +16909,6 @@ ul.pf-c-list {
16281
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);
16282
16910
  }
16283
16911
 
16284
- .pf-c-nav__item.pf-m-drilldown {
16285
- --pf-c-nav__subnav--PaddingTop: var(--pf-c-nav__item--m-drilldown__subnav--PaddingTop);
16286
- --pf-c-nav__subnav--PaddingBottom: var(--pf-c-nav__item--m-drilldown__subnav--PaddingBottom);
16287
- --pf-c-nav__subnav--PaddingLeft: var(--pf-c-nav__item--m-drilldown__subnav--PaddingLeft);
16288
- --pf-c-nav__item--m-expanded__toggle-icon--Rotate: var(--pf-c-nav__item--m-drilldown--m-expanded__toggle-icon--Rotate);
16289
- }
16290
-
16291
- .pf-c-nav__item.pf-m-drilldown > .pf-c-nav__subnav {
16292
- --pf-c-nav__link--PaddingTop: var(--pf-c-nav__item--m-drilldown__link--PaddingTop);
16293
- --pf-c-nav__link--PaddingBottom: var(--pf-c-nav__item--m-drilldown__link--PaddingBottom);
16294
- --pf-c-nav__link--FontSize: var(--pf-c-nav__item--m-drilldown__link--FontSize);
16295
- --pf-c-nav__subnav--MaxHeight: 100%;
16296
- position: absolute;
16297
- top: 0;
16298
- left: 100%;
16299
- z-index: var(--pf-c-nav__item--m-drilldown__subnav--ZIndex);
16300
- width: 100%;
16301
- height: 100%;
16302
- background-color: var(--pf-c-nav__item--m-drilldown__subnav--BackgroundColor);
16303
- }
16304
-
16305
16912
  .pf-c-nav__item.pf-m-drilldown.pf-m-expanded > .pf-c-nav__subnav {
16306
16913
  left: 0;
16307
16914
  z-index: var(--pf-c-nav__item--m-drilldown--m-expanded__subnav--ZIndex);
@@ -16342,16 +16949,16 @@ ul.pf-c-list {
16342
16949
  border-left-width: var(--pf-c-nav__link--after--BorderLeftWidth);
16343
16950
  }
16344
16951
 
16345
- .pf-c-nav__link:hover {
16952
+ .pf-c-nav__link:hover, .pf-c-nav__link.pf-m-hover {
16346
16953
  color: var(--pf-c-nav__link--hover--Color);
16347
16954
  background-color: var(--pf-c-nav__link--hover--BackgroundColor);
16348
16955
  }
16349
16956
 
16350
- .pf-c-nav__link:hover::before {
16957
+ .pf-c-nav__link:hover::before, .pf-c-nav__link.pf-m-hover::before {
16351
16958
  border-bottom-width: var(--pf-c-nav__link--hover--before--BorderBottomWidth);
16352
16959
  }
16353
16960
 
16354
- .pf-c-nav__link:hover::after {
16961
+ .pf-c-nav__link:hover::after, .pf-c-nav__link.pf-m-hover::after {
16355
16962
  border-color: var(--pf-c-nav__link--hover--after--BorderColor);
16356
16963
  border-left-width: var(--pf-c-nav__link--hover--after--BorderLeftWidth);
16357
16964
  }
@@ -16559,206 +17166,6 @@ ul.pf-c-list {
16559
17166
  left: 0;
16560
17167
  }
16561
17168
 
16562
- .pf-c-modal-box {
16563
- --pf-c-modal-box--BackgroundColor: var(--pf-global--BackgroundColor--100);
16564
- --pf-c-modal-box--BoxShadow: var(--pf-global--BoxShadow--xl);
16565
- --pf-c-modal-box--ZIndex: var(--pf-global--ZIndex--xl);
16566
- --pf-c-modal-box--Width: 100%;
16567
- --pf-c-modal-box--MaxWidth: calc(100% - var(--pf-global--spacer--xl));
16568
- --pf-c-modal-box--m-sm--sm--MaxWidth: 35rem;
16569
- --pf-c-modal-box--m-md--Width: 52.5rem;
16570
- --pf-c-modal-box--m-lg--lg--MaxWidth: 70rem;
16571
- --pf-c-modal-box--MaxHeight: calc(100% - var(--pf-global--spacer--2xl));
16572
- --pf-c-modal-box--m-align-top--spacer: var(--pf-global--spacer--sm);
16573
- --pf-c-modal-box--m-align-top--xl--spacer: var(--pf-global--spacer--xl);
16574
- --pf-c-modal-box--m-align-top--MarginTop: var(--pf-c-modal-box--m-align-top--spacer);
16575
- --pf-c-modal-box--m-align-top--MaxHeight: calc(100% - min(var(--pf-c-modal-box--m-align-top--spacer), var(--pf-global--spacer--2xl)) - var(--pf-c-modal-box--m-align-top--spacer));
16576
- --pf-c-modal-box--m-align-top--MaxWidth: calc(100% - min(var(--pf-c-modal-box--m-align-top--spacer) * 2, var(--pf-global--spacer--xl)));
16577
- --pf-c-modal-box--m-danger__title-icon--Color: var(--pf-global--danger-color--100);
16578
- --pf-c-modal-box--m-warning__title-icon--Color: var(--pf-global--warning-color--100);
16579
- --pf-c-modal-box--m-success__title-icon--Color: var(--pf-global--success-color--100);
16580
- --pf-c-modal-box--m-info__title-icon--Color: var(--pf-global--info-color--100);
16581
- --pf-c-modal-box--m-default__title-icon--Color: var(--pf-global--default-color--200);
16582
- --pf-c-modal-box__header--PaddingTop: var(--pf-global--spacer--lg);
16583
- --pf-c-modal-box__header--PaddingRight: var(--pf-global--spacer--lg);
16584
- --pf-c-modal-box__header--PaddingLeft: var(--pf-global--spacer--lg);
16585
- --pf-c-modal-box__header--last-child--PaddingBottom: var(--pf-global--spacer--lg);
16586
- --pf-c-modal-box__title--LineHeight: var(--pf-global--LineHeight--sm);
16587
- --pf-c-modal-box__title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
16588
- --pf-c-modal-box__title--FontSize: var(--pf-global--FontSize--2xl);
16589
- --pf-c-modal-box__title-icon--MarginRight: var(--pf-global--spacer--sm);
16590
- --pf-c-modal-box__title-icon--Color: var(--pf-global--Color--100);
16591
- --pf-c-modal-box__description--PaddingTop: var(--pf-global--spacer--xs);
16592
- --pf-c-modal-box__body--MinHeight: calc(var(--pf-global--FontSize--md) * var(--pf-global--LineHeight--md));
16593
- --pf-c-modal-box__body--PaddingTop: var(--pf-global--spacer--lg);
16594
- --pf-c-modal-box__body--PaddingRight: var(--pf-global--spacer--lg);
16595
- --pf-c-modal-box__body--PaddingLeft: var(--pf-global--spacer--lg);
16596
- --pf-c-modal-box__body--last-child--PaddingBottom: var(--pf-global--spacer--lg);
16597
- --pf-c-modal-box__header--body--PaddingTop: var(--pf-global--spacer--md);
16598
- --pf-c-modal-box--c-button--Top: calc(var(--pf-global--spacer--lg));
16599
- --pf-c-modal-box--c-button--Right: var(--pf-global--spacer--md);
16600
- --pf-c-modal-box--c-button--sibling--MarginRight: calc(var(--pf-global--spacer--xl) + var(--pf-global--spacer--sm));
16601
- --pf-c-modal-box__footer--PaddingTop: var(--pf-global--spacer--lg);
16602
- --pf-c-modal-box__footer--PaddingRight: var(--pf-global--spacer--lg);
16603
- --pf-c-modal-box__footer--PaddingBottom: var(--pf-global--spacer--lg);
16604
- --pf-c-modal-box__footer--PaddingLeft: var(--pf-global--spacer--lg);
16605
- --pf-c-modal-box__footer--c-button--MarginRight: var(--pf-global--spacer--md);
16606
- --pf-c-modal-box__footer--c-button--sm--MarginRight: calc(var(--pf-c-modal-box__footer--c-button--MarginRight) / 2);
16607
- position: relative;
16608
- z-index: var(--pf-c-modal-box--ZIndex);
16609
- display: flex;
16610
- flex-direction: column;
16611
- width: var(--pf-c-modal-box--Width);
16612
- max-width: var(--pf-c-modal-box--MaxWidth);
16613
- max-height: var(--pf-c-modal-box--MaxHeight);
16614
- background-color: var(--pf-c-modal-box--BackgroundColor);
16615
- box-shadow: var(--pf-c-modal-box--BoxShadow);
16616
- }
16617
-
16618
- @media (min-width: 1200px) {
16619
- .pf-c-modal-box {
16620
- --pf-c-modal-box--m-align-top--spacer: var(--pf-c-modal-box--m-align-top--xl--spacer);
16621
- }
16622
- }
16623
- .pf-c-modal-box.pf-m-sm {
16624
- --pf-c-modal-box--Width: var(--pf-c-modal-box--m-sm--sm--MaxWidth);
16625
- }
16626
-
16627
- .pf-c-modal-box.pf-m-md {
16628
- --pf-c-modal-box--Width: var(--pf-c-modal-box--m-md--Width);
16629
- }
16630
-
16631
- .pf-c-modal-box.pf-m-lg {
16632
- --pf-c-modal-box--Width: var(--pf-c-modal-box--m-lg--lg--MaxWidth);
16633
- }
16634
-
16635
- .pf-c-modal-box.pf-m-align-top {
16636
- top: var(--pf-c-modal-box--m-align-top--MarginTop);
16637
- align-self: flex-start;
16638
- max-width: var(--pf-c-modal-box--m-align-top--MaxWidth);
16639
- max-height: var(--pf-c-modal-box--m-align-top--MaxHeight);
16640
- }
16641
-
16642
- .pf-c-modal-box.pf-m-danger {
16643
- --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-danger__title-icon--Color);
16644
- }
16645
-
16646
- .pf-c-modal-box.pf-m-warning {
16647
- --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-warning__title-icon--Color);
16648
- }
16649
-
16650
- .pf-c-modal-box.pf-m-success {
16651
- --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-success__title-icon--Color);
16652
- }
16653
-
16654
- .pf-c-modal-box.pf-m-default {
16655
- --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-default__title-icon--Color);
16656
- }
16657
-
16658
- .pf-c-modal-box.pf-m-info {
16659
- --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-info__title-icon--Color);
16660
- }
16661
-
16662
- .pf-c-modal-box > .pf-c-button {
16663
- position: absolute;
16664
- top: var(--pf-c-modal-box--c-button--Top);
16665
- right: var(--pf-c-modal-box--c-button--Right);
16666
- }
16667
-
16668
- .pf-c-modal-box > .pf-c-button + * {
16669
- margin-right: var(--pf-c-modal-box--c-button--sibling--MarginRight);
16670
- }
16671
-
16672
- .pf-c-modal-box__header {
16673
- display: flex;
16674
- flex-direction: column;
16675
- flex-shrink: 0;
16676
- padding-top: var(--pf-c-modal-box__header--PaddingTop);
16677
- padding-right: var(--pf-c-modal-box__header--PaddingRight);
16678
- padding-left: var(--pf-c-modal-box__header--PaddingLeft);
16679
- }
16680
-
16681
- .pf-c-modal-box__header.pf-m-help {
16682
- display: flex;
16683
- flex-direction: row;
16684
- }
16685
-
16686
- .pf-c-modal-box__header:last-child {
16687
- padding-bottom: var(--pf-c-modal-box__header--last-child--PaddingBottom);
16688
- }
16689
-
16690
- .pf-c-modal-box__header + .pf-c-modal-box__body {
16691
- --pf-c-modal-box__body--PaddingTop: var(--pf-c-modal-box__header--body--PaddingTop);
16692
- }
16693
-
16694
- .pf-c-modal-box__header-main {
16695
- flex-grow: 1;
16696
- min-width: 0;
16697
- }
16698
-
16699
- .pf-c-modal-box__title,
16700
- .pf-c-modal-box__title-text {
16701
- overflow: hidden;
16702
- text-overflow: ellipsis;
16703
- white-space: nowrap;
16704
- }
16705
-
16706
- .pf-c-modal-box__title {
16707
- flex: 0 0 auto;
16708
- font-family: var(--pf-c-modal-box__title--FontFamily);
16709
- font-size: var(--pf-c-modal-box__title--FontSize);
16710
- line-height: var(--pf-c-modal-box__title--LineHeight);
16711
- }
16712
-
16713
- .pf-c-modal-box__title.pf-m-icon {
16714
- display: flex;
16715
- }
16716
-
16717
- .pf-c-modal-box__title-icon {
16718
- margin-right: var(--pf-c-modal-box__title-icon--MarginRight);
16719
- color: var(--pf-c-modal-box__title-icon--Color);
16720
- }
16721
-
16722
- .pf-c-modal-box__description {
16723
- padding-top: var(--pf-c-modal-box__description--PaddingTop);
16724
- }
16725
-
16726
- .pf-c-modal-box__body {
16727
- flex: 1 1 auto;
16728
- min-height: var(--pf-c-modal-box__body--MinHeight);
16729
- padding-top: var(--pf-c-modal-box__body--PaddingTop);
16730
- padding-right: var(--pf-c-modal-box__body--PaddingRight);
16731
- padding-left: var(--pf-c-modal-box__body--PaddingLeft);
16732
- overflow-x: hidden;
16733
- overflow-y: auto;
16734
- overscroll-behavior: contain;
16735
- word-break: break-word;
16736
- -webkit-overflow-scrolling: touch;
16737
- }
16738
-
16739
- .pf-c-modal-box__body:last-child {
16740
- padding-bottom: var(--pf-c-modal-box__body--last-child--PaddingBottom);
16741
- }
16742
-
16743
- .pf-c-modal-box__footer {
16744
- display: flex;
16745
- flex: 0 0 auto;
16746
- align-items: center;
16747
- padding-top: var(--pf-c-modal-box__footer--PaddingTop);
16748
- padding-right: var(--pf-c-modal-box__footer--PaddingRight);
16749
- padding-bottom: var(--pf-c-modal-box__footer--PaddingBottom);
16750
- padding-left: var(--pf-c-modal-box__footer--PaddingLeft);
16751
- }
16752
-
16753
- .pf-c-modal-box__footer > .pf-c-button:not(:last-child) {
16754
- margin-right: var(--pf-c-modal-box__footer--c-button--MarginRight);
16755
- }
16756
-
16757
- @media screen and (min-width: 576px) {
16758
- .pf-c-modal-box__footer > .pf-c-button:not(:last-child) {
16759
- --pf-c-modal-box__footer--c-button--MarginRight: var(--pf-c-modal-box__footer--c-button--sm--MarginRight);
16760
- }
16761
- }
16762
17169
  .pf-l-bullseye {
16763
17170
  --pf-l-bullseye--Padding: 0;
16764
17171
  display: flex;
@@ -24937,6 +25344,89 @@ label.pf-c-radio, .pf-c-radio__label,
24937
25344
  --pf-c-button--PaddingLeft: var(--pf-c-text-input-group__utilities--c-button--PaddingLeft);
24938
25345
  }
24939
25346
 
25347
+ .pf-c-panel {
25348
+ --pf-c-panel--Width: auto;
25349
+ --pf-c-panel--MinWidth: auto;
25350
+ --pf-c-panel--MaxWidth: none;
25351
+ --pf-c-panel--ZIndex: auto;
25352
+ --pf-c-panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
25353
+ --pf-c-panel--BoxShadow: none;
25354
+ --pf-c-panel--before--BorderWidth: 0;
25355
+ --pf-c-panel--before--BorderColor: var(--pf-global--BorderColor--100);
25356
+ --pf-c-panel--m-bordered--before--BorderWidth: var(--pf-global--BorderWidth--sm);
25357
+ --pf-c-panel--m-raised--BoxShadow: var(--pf-global--BoxShadow--md);
25358
+ --pf-c-panel--m-raised--ZIndex: var(--pf-global--ZIndex--sm);
25359
+ --pf-c-panel__header--PaddingTop: var(--pf-global--spacer--md);
25360
+ --pf-c-panel__header--PaddingRight: var(--pf-global--spacer--md);
25361
+ --pf-c-panel__header--PaddingBottom: var(--pf-global--spacer--md);
25362
+ --pf-c-panel__header--PaddingLeft: var(--pf-global--spacer--md);
25363
+ --pf-c-panel__main--MaxHeight: none;
25364
+ --pf-c-panel__main--Overflow: visible;
25365
+ --pf-c-panel__main-body--PaddingTop: var(--pf-global--spacer--md);
25366
+ --pf-c-panel__main-body--PaddingRight: var(--pf-global--spacer--md);
25367
+ --pf-c-panel__main-body--PaddingBottom: var(--pf-global--spacer--md);
25368
+ --pf-c-panel__main-body--PaddingLeft: var(--pf-global--spacer--md);
25369
+ --pf-c-panel__footer--PaddingTop: var(--pf-global--spacer--md);
25370
+ --pf-c-panel__footer--PaddingRight: var(--pf-global--spacer--md);
25371
+ --pf-c-panel__footer--PaddingBottom: var(--pf-global--spacer--md);
25372
+ --pf-c-panel__footer--PaddingLeft: var(--pf-global--spacer--md);
25373
+ --pf-c-panel__footer--BoxShadow: none;
25374
+ --pf-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
25375
+ --pf-c-panel--m-scrollable__main--Overflow: auto;
25376
+ --pf-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
25377
+ position: relative;
25378
+ z-index: var(--pf-c-panel--ZIndex);
25379
+ width: var(--pf-c-panel--Width);
25380
+ min-width: var(--pf-c-panel--MinWidth);
25381
+ max-width: var(--pf-c-panel--MaxWidth);
25382
+ background-color: var(--pf-c-panel--BackgroundColor);
25383
+ box-shadow: var(--pf-c-panel--BoxShadow);
25384
+ }
25385
+
25386
+ .pf-c-panel::before {
25387
+ position: absolute;
25388
+ top: 0;
25389
+ right: 0;
25390
+ bottom: 0;
25391
+ left: 0;
25392
+ pointer-events: none;
25393
+ content: "";
25394
+ border: var(--pf-c-panel--before--BorderWidth) solid var(--pf-c-panel--before--BorderColor);
25395
+ }
25396
+
25397
+ .pf-c-panel.pf-m-bordered {
25398
+ --pf-c-panel--before--BorderWidth: var(--pf-c-panel--m-bordered--before--BorderWidth);
25399
+ }
25400
+
25401
+ .pf-c-panel.pf-m-raised {
25402
+ --pf-c-panel--BoxShadow: var(--pf-c-panel--m-raised--BoxShadow);
25403
+ --pf-c-panel--ZIndex: var(--pf-c-panel--m-raised--ZIndex);
25404
+ }
25405
+
25406
+ .pf-c-panel.pf-m-scrollable {
25407
+ --pf-c-panel__main--MaxHeight: var(--pf-c-panel--m-scrollable__main--MaxHeight);
25408
+ --pf-c-panel__main--Overflow: var(--pf-c-panel--m-scrollable__main--Overflow);
25409
+ --pf-c-panel__footer--BoxShadow: var(--pf-c-panel--m-scrollable__footer--BoxShadow);
25410
+ }
25411
+
25412
+ .pf-c-panel__header {
25413
+ padding: var(--pf-c-panel__header--PaddingTop) var(--pf-c-panel__header--PaddingRight) var(--pf-c-panel__header--PaddingBottom) var(--pf-c-panel__header--PaddingLeft);
25414
+ }
25415
+
25416
+ .pf-c-panel__main {
25417
+ max-height: var(--pf-c-panel__main--MaxHeight);
25418
+ overflow: var(--pf-c-panel__main--Overflow);
25419
+ }
25420
+
25421
+ .pf-c-panel__main-body {
25422
+ padding: var(--pf-c-panel__main-body--PaddingTop) var(--pf-c-panel__main-body--PaddingRight) var(--pf-c-panel__main-body--PaddingBottom) var(--pf-c-panel__main-body--PaddingLeft);
25423
+ }
25424
+
25425
+ .pf-c-panel__footer {
25426
+ padding: var(--pf-c-panel__footer--PaddingTop) var(--pf-c-panel__footer--PaddingRight) var(--pf-c-panel__footer--PaddingBottom) var(--pf-c-panel__footer--PaddingLeft);
25427
+ box-shadow: var(--pf-c-panel__footer--BoxShadow);
25428
+ }
25429
+
24940
25430
  .pf-l-flex {
24941
25431
  --pf-l-flex--Display: flex;
24942
25432
  --pf-l-flex--FlexWrap: wrap;