@patternfly/patternfly 4.147.1 → 4.150.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 (33) hide show
  1. package/components/ContextSelector/context-selector.css +68 -0
  2. package/components/ContextSelector/context-selector.scss +74 -0
  3. package/components/Dropdown/dropdown.css +1 -1
  4. package/components/Dropdown/dropdown.scss +1 -1
  5. package/components/Masthead/masthead.css +1 -0
  6. package/components/Masthead/masthead.scss +1 -0
  7. package/components/Nav/nav.css +41 -2
  8. package/components/Nav/nav.scss +54 -2
  9. package/components/Page/page.css +26 -3
  10. package/components/Page/page.scss +31 -0
  11. package/components/Panel/panel.css +78 -0
  12. package/components/Panel/panel.scss +99 -0
  13. package/components/Popover/popover.css +58 -2
  14. package/components/Popover/popover.scss +73 -2
  15. package/components/Tooltip/tooltip.css +4 -4
  16. package/components/Tooltip/tooltip.scss +4 -4
  17. package/components/_all.scss +1 -0
  18. package/docs/components/CodeBlock/examples/CodeBlock.md +0 -1
  19. package/docs/components/ContextSelector/examples/context-selector.md +2 -0
  20. package/docs/components/HelperText/examples/HelperText.md +0 -1
  21. package/docs/components/Menu/examples/Menu.md +19 -20
  22. package/docs/components/Nav/examples/Navigation.css +4 -0
  23. package/docs/components/Nav/examples/Navigation.md +113 -0
  24. package/docs/components/Panel/examples/Panel.md +163 -0
  25. package/docs/components/Popover/examples/Popover.md +237 -15
  26. package/docs/components/Select/examples/Select.md +2 -2
  27. package/docs/components/Sidebar/examples/Sidebar.md +0 -1
  28. package/docs/demos/ContextSelector/examples/ContextSelector.md +1391 -0
  29. package/package.json +1 -1
  30. package/patternfly-no-reset.css +278 -12
  31. package/patternfly.css +278 -12
  32. package/patternfly.min.css +1 -1
  33. package/patternfly.min.css.map +1 -1
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "4.147.1",
4
+ "version": "4.150.0",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -9,7 +9,7 @@
9
9
  --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
10
10
  }
11
11
 
12
- .pf-c-wizard__header, .pf-c-page__main-section[class*=pf-m-dark-], .pf-c-page__header, .pf-c-masthead, .pf-c-login__footer, .pf-c-login__header, .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main, .pf-c-banner, .pf-c-about-modal-box, .pf-t-dark {
12
+ .pf-c-wizard__header, .pf-c-page__main-section[class*=pf-m-dark-], .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector, .pf-c-page__header, .pf-c-masthead, .pf-c-login__footer, .pf-c-login__header, .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main, .pf-c-banner, .pf-c-about-modal-box, .pf-t-dark {
13
13
  --pf-global--Color--100: var(--pf-global--Color--light-100);
14
14
  --pf-global--Color--200: var(--pf-global--Color--light-200);
15
15
  --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
@@ -18,10 +18,10 @@
18
18
  --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
19
19
  --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
20
20
  }
21
- .pf-c-wizard__header .pf-c-card, .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-card, .pf-c-page__header .pf-c-card, .pf-c-masthead .pf-c-card, .pf-c-login__footer .pf-c-card, .pf-c-login__header .pf-c-card, .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main .pf-c-card, .pf-c-banner .pf-c-card, .pf-c-about-modal-box .pf-c-card, .pf-t-dark .pf-c-card {
21
+ .pf-c-wizard__header .pf-c-card, .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-card, .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector .pf-c-card, .pf-c-page__header .pf-c-card, .pf-c-masthead .pf-c-card, .pf-c-login__footer .pf-c-card, .pf-c-login__header .pf-c-card, .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main .pf-c-card, .pf-c-banner .pf-c-card, .pf-c-about-modal-box .pf-c-card, .pf-t-dark .pf-c-card {
22
22
  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
23
23
  }
24
- .pf-c-wizard__header .pf-c-button, .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button, .pf-c-page__header .pf-c-button, .pf-c-masthead .pf-c-button, .pf-c-login__footer .pf-c-button, .pf-c-login__header .pf-c-button, .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main .pf-c-button, .pf-c-banner .pf-c-button, .pf-c-about-modal-box .pf-c-button, .pf-t-dark .pf-c-button {
24
+ .pf-c-wizard__header .pf-c-button, .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button, .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector .pf-c-button, .pf-c-page__header .pf-c-button, .pf-c-masthead .pf-c-button, .pf-c-login__footer .pf-c-button, .pf-c-login__header .pf-c-button, .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main .pf-c-button, .pf-c-banner .pf-c-button, .pf-c-about-modal-box .pf-c-button, .pf-t-dark .pf-c-button {
25
25
  --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
26
26
  --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
27
27
  --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
@@ -8241,6 +8241,7 @@ label.pf-c-check, .pf-c-check__label,
8241
8241
  --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-global--BorderColor--200);
8242
8242
  --pf-c-context-selector__toggle--BorderLeftColor: var(--pf-global--BorderColor--300);
8243
8243
  --pf-c-context-selector__toggle--Color: var(--pf-global--Color--100);
8244
+ --pf-c-context-selector__toggle--hover--BorderBottomWidth: var(--pf-c-context-selector__toggle--BorderWidth);
8244
8245
  --pf-c-context-selector__toggle--hover--BorderBottomColor: var(--pf-global--active-color--100);
8245
8246
  --pf-c-context-selector__toggle--active--BorderBottomWidth: var(--pf-global--BorderWidth--md);
8246
8247
  --pf-c-context-selector__toggle--active--BorderBottomColor: var(--pf-global--active-color--100);
@@ -8293,11 +8294,56 @@ label.pf-c-check, .pf-c-check__label,
8293
8294
  --pf-c-context-selector--m-full-height__toggle--hover--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
8294
8295
  --pf-c-context-selector--m-full-height__toggle--active--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
8295
8296
  --pf-c-context-selector--m-full-height__toggle--expanded--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
8297
+ --pf-c-context-selector--m-large__toggle--PaddingTop: var(--pf-global--spacer--md);
8298
+ --pf-c-context-selector--m-large__toggle--PaddingBottom: var(--pf-global--spacer--md);
8299
+ --pf-c-context-selector--m-large__toggle--hover--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
8300
+ --pf-c-context-selector--m-large__toggle--active--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
8301
+ --pf-c-context-selector--m-large__toggle--expanded--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
8302
+ --pf-c-context-selector--m-page-insets__toggle--PaddingRight: var(--pf-global--spacer--md);
8303
+ --pf-c-context-selector--m-page-insets__toggle--PaddingLeft: var(--pf-global--spacer--md);
8304
+ --pf-c-context-selector--m-page-insets__toggle--xl--PaddingRight: var(--pf-global--spacer--lg);
8305
+ --pf-c-context-selector--m-page-insets__toggle--xl--PaddingLeft: var(--pf-global--spacer--lg);
8306
+ --pf-c-context-selector--m-page-insets__menu-list-item--PaddingRight: var(--pf-global--spacer--md);
8307
+ --pf-c-context-selector--m-page-insets__menu-list-item--PaddingLeft: var(--pf-global--spacer--md);
8308
+ --pf-c-context-selector--m-page-insets__menu-list-item--xl--PaddingRight: var(--pf-global--spacer--lg);
8309
+ --pf-c-context-selector--m-page-insets__menu-list-item--xl--PaddingLeft: var(--pf-global--spacer--lg);
8310
+ --pf-c-context-selector--m-page-insets__menu-search--PaddingRight: var(--pf-global--spacer--md);
8311
+ --pf-c-context-selector--m-page-insets__menu-search--PaddingLeft: var(--pf-global--spacer--md);
8312
+ --pf-c-context-selector--m-page-insets__menu-search--xl--PaddingRight: var(--pf-global--spacer--lg);
8313
+ --pf-c-context-selector--m-page-insets__menu-search--xl--PaddingLeft: var(--pf-global--spacer--lg);
8314
+ --pf-c-context-selector--m-page-insets__menu-footer--PaddingRight: var(--pf-global--spacer--md);
8315
+ --pf-c-context-selector--m-page-insets__menu-footer--PaddingLeft: var(--pf-global--spacer--md);
8316
+ --pf-c-context-selector--m-page-insets__menu-footer--xl--PaddingRight: var(--pf-global--spacer--lg);
8317
+ --pf-c-context-selector--m-page-insets__menu-footer--xl--PaddingLeft: var(--pf-global--spacer--lg);
8318
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingRight: var(--pf-global--spacer--md);
8319
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingLeft: var(--pf-global--spacer--md);
8320
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--xl--PaddingRight: var(--pf-global--spacer--lg);
8321
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--xl--PaddingLeft: var(--pf-global--spacer--lg);
8322
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingRight: var(--pf-global--spacer--md);
8323
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingLeft: var(--pf-global--spacer--md);
8324
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--xl--PaddingRight: var(--pf-global--spacer--lg);
8325
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--xl--PaddingLeft: var(--pf-global--spacer--lg);
8296
8326
  position: relative;
8297
8327
  display: inline-block;
8298
8328
  width: var(--pf-c-context-selector--Width);
8299
8329
  max-width: 100%;
8300
8330
  }
8331
+ @media screen and (min-width: 1200px) {
8332
+ .pf-c-context-selector {
8333
+ --pf-c-context-selector--m-page-insets__toggle--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--xl--PaddingRight);
8334
+ --pf-c-context-selector--m-page-insets__toggle--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--xl--PaddingLeft);
8335
+ --pf-c-context-selector--m-page-insets__menu-list-item--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-list-item--xl--PaddingRight);
8336
+ --pf-c-context-selector--m-page-insets__menu-list-item--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-list-item--xl--PaddingLeft);
8337
+ --pf-c-context-selector--m-page-insets__menu-search--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-search--xl--PaddingRight);
8338
+ --pf-c-context-selector--m-page-insets__menu-search--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-search--xl--PaddingLeft);
8339
+ --pf-c-context-selector--m-page-insets__menu-footer--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-footer--xl--PaddingRight);
8340
+ --pf-c-context-selector--m-page-insets__menu-footer--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-footer--xl--PaddingLeft);
8341
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--xl--PaddingRight);
8342
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--xl--PaddingLeft);
8343
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--xl--PaddingRight);
8344
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--xl--PaddingLeft);
8345
+ }
8346
+ }
8301
8347
  .pf-c-context-selector.pf-m-full-height {
8302
8348
  --pf-c-context-selector__toggle--active--BorderBottomWidth: var(--pf-c-context-selector--m-full-height__toggle--active--BorderBottomWidth);
8303
8349
  --pf-c-context-selector__toggle--expanded--BorderBottomWidth: var(--pf-c-context-selector--m-full-height__toggle--expanded--BorderBottomWidth);
@@ -8316,6 +8362,27 @@ label.pf-c-check, .pf-c-check__label,
8316
8362
  .pf-c-context-selector.pf-m-full-height:hover .pf-c-context-selector__toggle::before {
8317
8363
  border-bottom-width: var(--pf-c-context-selector--m-full-height__toggle--hover--BorderBottomWidth);
8318
8364
  }
8365
+ .pf-c-context-selector.pf-m-large {
8366
+ --pf-c-context-selector__toggle--PaddingTop: var(--pf-c-context-selector--m-large__toggle--PaddingTop);
8367
+ --pf-c-context-selector__toggle--PaddingBottom: var(--pf-c-context-selector--m-large__toggle--PaddingBottom);
8368
+ --pf-c-context-selector__toggle--hover--BorderBottomWidth: var(--pf-c-context-selector--m-large__toggle--hover--BorderBottomWidth);
8369
+ --pf-c-context-selector__toggle--active--BorderBottomWidth: var(--pf-c-context-selector--m-large__toggle--active--BorderBottomWidth);
8370
+ --pf-c-context-selector__toggle--expanded--BorderBottomWidth: var(--pf-c-context-selector--m-large__toggle--expanded--BorderBottomWidth);
8371
+ }
8372
+ .pf-c-context-selector.pf-m-page-insets {
8373
+ --pf-c-context-selector__toggle--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--PaddingRight);
8374
+ --pf-c-context-selector__toggle--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--PaddingLeft);
8375
+ --pf-c-context-selector__menu-list-item--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-list-item--PaddingRight);
8376
+ --pf-c-context-selector__menu-list-item--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-list-item--PaddingLeft);
8377
+ --pf-c-context-selector__menu-search--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-search--PaddingRight);
8378
+ --pf-c-context-selector__menu-search--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-search--PaddingLeft);
8379
+ --pf-c-context-selector__menu-footer--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-footer--PaddingRight);
8380
+ --pf-c-context-selector__menu-footer--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-footer--PaddingLeft);
8381
+ --pf-c-context-selector__toggle--m-plain--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingRight);
8382
+ --pf-c-context-selector__toggle--m-plain--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingLeft);
8383
+ --pf-c-context-selector__toggle--m-plain--m-text--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingRight);
8384
+ --pf-c-context-selector__toggle--m-plain--m-text--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingLeft);
8385
+ }
8319
8386
 
8320
8387
  .pf-c-context-selector__toggle {
8321
8388
  position: relative;
@@ -8341,6 +8408,7 @@ label.pf-c-check, .pf-c-check__label,
8341
8408
  }
8342
8409
  .pf-c-context-selector__toggle:hover::before {
8343
8410
  --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-context-selector__toggle--hover--BorderBottomColor);
8411
+ border-bottom-width: var(--pf-c-context-selector__toggle--hover--BorderBottomWidth);
8344
8412
  }
8345
8413
  .pf-c-context-selector__toggle:active::before, .pf-c-context-selector__toggle.pf-m-active::before, .pf-c-context-selector__toggle:focus-within::before {
8346
8414
  --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-context-selector__toggle--active--BorderBottomColor);
@@ -12189,7 +12257,7 @@ label.pf-c-check, .pf-c-check__label,
12189
12257
  border-top-width: var(--pf-c-dropdown--m-full-height__toggle--before--BorderTopWidth);
12190
12258
  }
12191
12259
  .pf-c-dropdown.pf-m-full-height:hover .pf-c-dropdown__toggle::before {
12192
- border-bottom-width: var(--pf-c-context-selector--m-full-height__toggle--hover--before--BorderBottomWidth);
12260
+ border-bottom-width: var(--pf-c-dropdown--m-full-height__toggle--hover--before--BorderBottomWidth);
12193
12261
  }
12194
12262
 
12195
12263
  .pf-c-dropdown__toggle {
@@ -15150,6 +15218,7 @@ ul.pf-c-list {
15150
15218
  --pf-c-context-selector--Width: var(--pf-c-masthead--c-context-selector--Width);
15151
15219
  --pf-c-context-selector__toggle--BorderTopColor: var(--pf-c-masthead--c-context-selector__toggle--BorderTopColor);
15152
15220
  --pf-c-context-selector__toggle--BorderRightColor: var(--pf-c-masthead--c-context-selector__toggle--BorderRightColor);
15221
+ --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-masthead--c-context-selector__toggle--BorderBottomColor);
15153
15222
  --pf-c-context-selector__toggle--BorderLeftColor: var(--pf-c-masthead--c-context-selector__toggle--BorderLeftColor);
15154
15223
  }
15155
15224
  .pf-c-masthead .pf-c-context-selector.pf-m-full-height {
@@ -16416,7 +16485,6 @@ ul.pf-c-list {
16416
16485
 
16417
16486
  .pf-c-nav {
16418
16487
  --pf-c-nav--Transition: var(--pf-global--Transition);
16419
- --pf-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
16420
16488
  --pf-c-nav--m-light__item--before--BorderColor: var(--pf-global--BorderColor--300);
16421
16489
  --pf-c-nav--m-light__item--m-current--not--m-expanded__link--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
16422
16490
  --pf-c-nav--m-light__link--Color: var(--pf-global--Color--dark-100);
@@ -16441,6 +16509,10 @@ ul.pf-c-list {
16441
16509
  --pf-c-nav__item--MarginTop: 0;
16442
16510
  --pf-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: var(--pf-global--BackgroundColor--dark-400);
16443
16511
  --pf-c-nav__link--m-current--not--m-expanded__link--after--BorderWidth: var(--pf-global--BorderWidth--xl);
16512
+ --pf-c-nav__item__item__link--PaddingRight: var(--pf-global--spacer--xl);
16513
+ --pf-c-nav__item__item__toggle--FontSize: var(--pf-global--icon--FontSize--xs);
16514
+ --pf-c-nav__item__toggle-icon--Rotate: 0;
16515
+ --pf-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
16444
16516
  --pf-c-nav__item--before--BorderColor: var(--pf-global--BackgroundColor--dark-200);
16445
16517
  --pf-c-nav__item--before--BorderWidth: var(--pf-global--BorderWidth--sm);
16446
16518
  --pf-c-nav__link--FontSize: var(--pf-global--FontSize--md);
@@ -16576,6 +16648,9 @@ ul.pf-c-list {
16576
16648
  --pf-c-nav__subnav__link--active--after--BorderWidth: var(--pf-global--BorderWidth--sm);
16577
16649
  --pf-c-nav__subnav__link--m-current--after--BorderWidth: var(--pf-global--BorderWidth--xl);
16578
16650
  --pf-c-nav__subnav--MaxHeight: 0;
16651
+ --pf-c-nav__subnav__subnav--PaddingLeft: var(--pf-global--spacer--lg);
16652
+ --pf-c-nav__subnav__subnav__link--PaddingLeft: var(--pf-global--spacer--md);
16653
+ --pf-c-nav__subnav__subnav__link--FontSize: var(--pf-global--FontSize--xs);
16579
16654
  --pf-c-nav__item--m-expanded__subnav--MaxHeight: 100%;
16580
16655
  --pf-c-nav__subnav--c-divider--PaddingRight: var(--pf-global--spacer--lg);
16581
16656
  --pf-c-nav__subnav--c-divider--PaddingLeft: var(--pf-global--spacer--lg);
@@ -16882,15 +16957,18 @@ ul.pf-c-list {
16882
16957
  }
16883
16958
 
16884
16959
  .pf-c-nav__list {
16960
+ position: relative;
16885
16961
  display: block;
16886
16962
  }
16887
16963
 
16888
16964
  .pf-c-nav__item {
16965
+ --pf-c-nav__item__toggle-icon--Rotate: 0;
16889
16966
  position: relative;
16890
16967
  margin-top: var(--pf-c-nav__item--MarginTop);
16891
16968
  }
16892
16969
  .pf-c-nav__item.pf-m-expandable {
16893
16970
  --pf-c-nav__link--before--BorderBottomWidth: 0;
16971
+ --pf-c-nav__item__toggle-icon--Rotate: var(--pf-c-nav__item--m-expanded__toggle-icon--Rotate);
16894
16972
  }
16895
16973
  .pf-c-nav__item.pf-m-expandable::before {
16896
16974
  position: absolute;
@@ -16900,6 +16978,28 @@ ul.pf-c-list {
16900
16978
  content: "";
16901
16979
  border-bottom: var(--pf-c-nav__item--before--BorderWidth) solid var(--pf-c-nav__item--before--BorderColor);
16902
16980
  }
16981
+ .pf-c-nav__item .pf-c-nav__item.pf-m-expandable {
16982
+ --pf-c-nav__toggle--FontSize: var(--pf-c-nav__item__item__toggle--FontSize);
16983
+ --pf-c-nav__link--PaddingRight: var(--pf-c-nav__item__item__link--PaddingRight);
16984
+ }
16985
+ @media screen and (min-width: 1200px) {
16986
+ .pf-c-nav__item .pf-c-nav__item.pf-m-expandable::before {
16987
+ border-bottom: none;
16988
+ }
16989
+ }
16990
+ .pf-c-nav__item .pf-c-nav__item.pf-m-expandable .pf-c-nav__list::before {
16991
+ position: absolute;
16992
+ top: 0;
16993
+ right: 0;
16994
+ bottom: 0;
16995
+ left: 0;
16996
+ pointer-events: none;
16997
+ content: "";
16998
+ border-left: var(--pf-c-nav__item--before--BorderWidth) solid var(--pf-c-nav__item--before--BorderColor);
16999
+ }
17000
+ .pf-c-nav__item .pf-c-nav__toggle-icon {
17001
+ transform: rotate(var(--pf-c-nav__item__toggle-icon--Rotate));
17002
+ }
16903
17003
  .pf-c-nav__item.pf-m-flyout:hover {
16904
17004
  --pf-c-nav__link--BackgroundColor: var(--pf-c-nav__item--m-flyout--hover__link--BackgroundColor);
16905
17005
  --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav__item--m-flyout--hover__link--before--BorderWidth);
@@ -17093,6 +17193,11 @@ ul.pf-c-list {
17093
17193
  scrollbar-width: none;
17094
17194
  -ms-overflow-style: -ms-autohiding-scrollbar;
17095
17195
  }
17196
+ .pf-c-nav__subnav .pf-c-nav__subnav {
17197
+ --pf-c-nav__link--FontSize: var(--pf-c-nav__subnav__subnav__link--FontSize);
17198
+ --pf-c-nav__link--PaddingLeft: var(--pf-c-nav__subnav__subnav__link--PaddingLeft);
17199
+ --pf-c-nav__subnav--PaddingLeft: var(--pf-c-nav__subnav__subnav--PaddingLeft);
17200
+ }
17096
17201
  .pf-c-nav__subnav.pf-m-flyout {
17097
17202
  width: 100%;
17098
17203
  }
@@ -17122,7 +17227,10 @@ ul.pf-c-list {
17122
17227
  display: inline-block;
17123
17228
  transition: var(--pf-c-nav__toggle-icon--Transition);
17124
17229
  }
17125
- .pf-c-nav__item.pf-m-expanded .pf-c-nav__toggle-icon {
17230
+ .pf-c-nav__item.pf-m-expanded .pf-c-nav__item .pf-c-nav__toggle-icon {
17231
+ transform: rotate(0deg);
17232
+ }
17233
+ .pf-c-nav__item.pf-m-expanded .pf-c-nav__toggle-icon, .pf-c-nav__item .pf-c-nav__item.pf-m-expanded .pf-c-nav__toggle-icon {
17126
17234
  transform: rotate(var(--pf-c-nav__item--m-expanded__toggle-icon--Rotate));
17127
17235
  }
17128
17236
 
@@ -17914,6 +18022,11 @@ ul.pf-c-list {
17914
18022
  --pf-c-page__sidebar--xl--TranslateX: 0;
17915
18023
  --pf-c-page__sidebar-body--PaddingTop: var(--pf-global--spacer--sm);
17916
18024
  --pf-c-page__sidebar-body--PaddingBottom: var(--pf-global--spacer--md);
18025
+ --pf-c-page__sidebar-body--m-menu--PaddingTop: 0;
18026
+ --pf-c-page__sidebar-body--m-menu--PaddingBottom: 0;
18027
+ --pf-c-page__sidebar-body--m-menu--BorderTopColor: var(--pf-global--BackgroundColor--dark-200);
18028
+ --pf-c-page__sidebar-body--m-menu--BorderTopWidth: var(--pf-global--BorderWidth--sm);
18029
+ --pf-c-page__sidebar-body--m-menu--c-context-selector--BorderBottomColor: var(--pf-global--BackgroundColor--dark-200);
17917
18030
  --pf-c-page__main--ZIndex: var(--pf-global--ZIndex--xs);
17918
18031
  --pf-c-page__main-section--PaddingTop: var(--pf-global--spacer--md);
17919
18032
  --pf-c-page__main-section--PaddingRight: var(--pf-global--spacer--md);
@@ -18193,6 +18306,24 @@ ul.pf-c-list {
18193
18306
  padding-top: var(--pf-c-page__sidebar-body--PaddingTop);
18194
18307
  padding-bottom: var(--pf-c-page__sidebar-body--PaddingBottom);
18195
18308
  }
18309
+ .pf-c-page__sidebar-body.pf-m-menu {
18310
+ --pf-c-page__sidebar-body--PaddingTop: var(--pf-c-page__sidebar-body--m-menu--PaddingTop);
18311
+ --pf-c-page__sidebar-body--PaddingBottom: var(--pf-c-page__sidebar-body--m-menu--PaddingBottom);
18312
+ background-color: var(--pf-global--palette--black-900);
18313
+ border-top: var(--pf-c-page__sidebar-body--m-menu--BorderTopWidth) solid var(--pf-c-page__sidebar-body--m-menu--BorderTopColor);
18314
+ }
18315
+ .pf-c-page__sidebar-body.pf-m-menu + .pf-c-page__sidebar-body.pf-m-menu {
18316
+ --pf-c-page__sidebar-body--m-menu--BorderTopWidth: 0;
18317
+ }
18318
+ .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector {
18319
+ --pf-c-context-selector__toggle--BorderTopColor: transparent;
18320
+ --pf-c-context-selector__toggle--BorderRightColor: transparent;
18321
+ --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-page__sidebar-body--m-menu--c-context-selector--BorderBottomColor);
18322
+ --pf-c-context-selector__toggle--BorderLeftColor: transparent;
18323
+ --pf-c-context-selector__menu--Top: 100%;
18324
+ color: var(--pf-global--Color--100);
18325
+ width: 100%;
18326
+ }
18196
18327
 
18197
18328
  .pf-c-page__main-nav.pf-m-limit-width,
18198
18329
  .pf-c-page__main-breadcrumb.pf-m-limit-width,
@@ -18838,11 +18969,100 @@ ul.pf-c-list {
18838
18969
  }
18839
18970
  }
18840
18971
 
18972
+ .pf-c-panel {
18973
+ --pf-c-panel--Width: auto;
18974
+ --pf-c-panel--MinWidth: auto;
18975
+ --pf-c-panel--MaxWidth: none;
18976
+ --pf-c-panel--ZIndex: auto;
18977
+ --pf-c-panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
18978
+ --pf-c-panel--BoxShadow: none;
18979
+ --pf-c-panel--before--BorderWidth: 0;
18980
+ --pf-c-panel--before--BorderColor: var(--pf-global--BorderColor--100);
18981
+ --pf-c-panel--m-bordered--before--BorderWidth: var(--pf-global--BorderWidth--sm);
18982
+ --pf-c-panel--m-raised--BoxShadow: var(--pf-global--BoxShadow--md);
18983
+ --pf-c-panel--m-raised--ZIndex: var(--pf-global--ZIndex--sm);
18984
+ --pf-c-panel__header--PaddingTop: var(--pf-global--spacer--md);
18985
+ --pf-c-panel__header--PaddingRight: var(--pf-global--spacer--md);
18986
+ --pf-c-panel__header--PaddingBottom: var(--pf-global--spacer--md);
18987
+ --pf-c-panel__header--PaddingLeft: var(--pf-global--spacer--md);
18988
+ --pf-c-panel__main--MaxHeight: none;
18989
+ --pf-c-panel__main--Overflow: visible;
18990
+ --pf-c-panel__main-body--PaddingTop: var(--pf-global--spacer--md);
18991
+ --pf-c-panel__main-body--PaddingRight: var(--pf-global--spacer--md);
18992
+ --pf-c-panel__main-body--PaddingBottom: var(--pf-global--spacer--md);
18993
+ --pf-c-panel__main-body--PaddingLeft: var(--pf-global--spacer--md);
18994
+ --pf-c-panel__footer--PaddingTop: var(--pf-global--spacer--md);
18995
+ --pf-c-panel__footer--PaddingRight: var(--pf-global--spacer--md);
18996
+ --pf-c-panel__footer--PaddingBottom: var(--pf-global--spacer--md);
18997
+ --pf-c-panel__footer--PaddingLeft: var(--pf-global--spacer--md);
18998
+ --pf-c-panel__footer--BoxShadow: none;
18999
+ --pf-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
19000
+ --pf-c-panel--m-scrollable__main--Overflow: auto;
19001
+ --pf-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
19002
+ position: relative;
19003
+ z-index: var(--pf-c-panel--ZIndex);
19004
+ width: var(--pf-c-panel--Width);
19005
+ min-width: var(--pf-c-panel--MinWidth);
19006
+ max-width: var(--pf-c-panel--MaxWidth);
19007
+ background-color: var(--pf-c-panel--BackgroundColor);
19008
+ box-shadow: var(--pf-c-panel--BoxShadow);
19009
+ }
19010
+ .pf-c-panel::before {
19011
+ position: absolute;
19012
+ top: 0;
19013
+ right: 0;
19014
+ bottom: 0;
19015
+ left: 0;
19016
+ pointer-events: none;
19017
+ content: "";
19018
+ border: var(--pf-c-panel--before--BorderWidth) solid var(--pf-c-panel--before--BorderColor);
19019
+ }
19020
+ .pf-c-panel.pf-m-bordered {
19021
+ --pf-c-panel--before--BorderWidth: var(--pf-c-panel--m-bordered--before--BorderWidth);
19022
+ }
19023
+ .pf-c-panel.pf-m-raised {
19024
+ --pf-c-panel--BoxShadow: var(--pf-c-panel--m-raised--BoxShadow);
19025
+ --pf-c-panel--ZIndex: var(--pf-c-panel--m-raised--ZIndex);
19026
+ }
19027
+ .pf-c-panel.pf-m-scrollable {
19028
+ --pf-c-panel__main--MaxHeight: var(--pf-c-panel--m-scrollable__main--MaxHeight);
19029
+ --pf-c-panel__main--Overflow: var(--pf-c-panel--m-scrollable__main--Overflow);
19030
+ --pf-c-panel__footer--BoxShadow: var(--pf-c-panel--m-scrollable__footer--BoxShadow);
19031
+ }
19032
+
19033
+ .pf-c-panel__header {
19034
+ 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);
19035
+ }
19036
+
19037
+ .pf-c-panel__main {
19038
+ max-height: var(--pf-c-panel__main--MaxHeight);
19039
+ overflow: var(--pf-c-panel__main--Overflow);
19040
+ }
19041
+
19042
+ .pf-c-panel__main-body {
19043
+ 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);
19044
+ }
19045
+
19046
+ .pf-c-panel__footer {
19047
+ 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);
19048
+ box-shadow: var(--pf-c-panel__footer--BoxShadow);
19049
+ }
19050
+
18841
19051
  .pf-c-popover {
18842
19052
  --pf-c-popover--FontSize: var(--pf-global--FontSize--sm);
18843
19053
  --pf-c-popover--MinWidth: calc(var(--pf-c-popover__content--PaddingLeft) + var(--pf-c-popover__content--PaddingRight) + 18.75rem);
18844
19054
  --pf-c-popover--MaxWidth: calc(var(--pf-c-popover__content--PaddingLeft) + var(--pf-c-popover__content--PaddingRight) + 18.75rem);
18845
- --pf-c-popover--BoxShadow: var(--pf-global--BoxShadow--md);
19055
+ --pf-c-popover--BoxShadow: var(--pf-global--BoxShadow--lg);
19056
+ --pf-c-popover--m-danger__title-icon--Color: var(--pf-global--danger-color--100);
19057
+ --pf-c-popover--m-warning__title-icon--Color: var(--pf-global--warning-color--100);
19058
+ --pf-c-popover--m-success__title-icon--Color: var(--pf-global--success-color--100);
19059
+ --pf-c-popover--m-info__title-icon--Color: var(--pf-global--info-color--100);
19060
+ --pf-c-popover--m-default__title-icon--Color: var(--pf-global--default-color--200);
19061
+ --pf-c-popover--m-danger__title-text--Color: var(--pf-global--danger-color--200);
19062
+ --pf-c-popover--m-warning__title-text--Color: var(--pf-global--warning-color--200);
19063
+ --pf-c-popover--m-success__title-text--Color: var(--pf-global--success-color--200);
19064
+ --pf-c-popover--m-info__title-text--Color: var(--pf-global--info-color--200);
19065
+ --pf-c-popover--m-default__title-text--Color: var(--pf-global--default-color--300);
18846
19066
  --pf-c-popover__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
18847
19067
  --pf-c-popover__content--PaddingTop: var(--pf-global--spacer--md);
18848
19068
  --pf-c-popover__content--PaddingRight: var(--pf-global--spacer--md);
@@ -18850,7 +19070,7 @@ ul.pf-c-list {
18850
19070
  --pf-c-popover__content--PaddingLeft: var(--pf-global--spacer--md);
18851
19071
  --pf-c-popover__arrow--Width: var(--pf-global--arrow--width-lg);
18852
19072
  --pf-c-popover__arrow--Height: var(--pf-global--arrow--width-lg);
18853
- --pf-c-popover__arrow--BoxShadow: var(--pf-global--BoxShadow--md);
19073
+ --pf-c-popover__arrow--BoxShadow: var(--pf-global--BoxShadow--lg);
18854
19074
  --pf-c-popover__arrow--BackgroundColor: var(--pf-global--BackgroundColor--100);
18855
19075
  --pf-c-popover__arrow--m-top--TranslateX: -50%;
18856
19076
  --pf-c-popover__arrow--m-top--TranslateY: 50%;
@@ -18869,6 +19089,12 @@ ul.pf-c-list {
18869
19089
  --pf-c-popover--c-button--Right: var(--pf-global--spacer--md);
18870
19090
  --pf-c-popover--c-button--sibling--PaddingRight: var(--pf-global--spacer--2xl);
18871
19091
  --pf-c-popover--c-title--MarginBottom: var(--pf-global--spacer--sm);
19092
+ --pf-c-popover__title--MarginBottom: var(--pf-global--spacer--sm);
19093
+ --pf-c-popover__title--LineHeight: var(--pf-global--LineHeight--md);
19094
+ --pf-c-popover__title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
19095
+ --pf-c-popover__title--FontSize: var(--pf-global--FontSize--md);
19096
+ --pf-c-popover__title-icon--MarginRight: var(--pf-global--spacer--sm);
19097
+ --pf-c-popover__title-icon--Color: var(--pf-global--Color--100);
18872
19098
  --pf-c-popover__footer--MarginTop: var(--pf-global--spacer--md);
18873
19099
  position: relative;
18874
19100
  min-width: var(--pf-c-popover--MinWidth);
@@ -18920,6 +19146,26 @@ ul.pf-c-list {
18920
19146
  right: 0;
18921
19147
  left: auto;
18922
19148
  }
19149
+ .pf-c-popover.pf-m-danger {
19150
+ --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-danger__title-icon--Color);
19151
+ --pf-c-popover__title-text--Color: var(--pf-c-popover--m-danger__title-text--Color);
19152
+ }
19153
+ .pf-c-popover.pf-m-warning {
19154
+ --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-warning__title-icon--Color);
19155
+ --pf-c-popover__title-text--Color: var(--pf-c-popover--m-warning__title-text--Color);
19156
+ }
19157
+ .pf-c-popover.pf-m-success {
19158
+ --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-success__title-icon--Color);
19159
+ --pf-c-popover__title-text--Color: var(--pf-c-popover--m-success__title-text--Color);
19160
+ }
19161
+ .pf-c-popover.pf-m-default {
19162
+ --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-default__title-icon--Color);
19163
+ --pf-c-popover__title-text--Color: var(--pf-c-popover--m-default__title-text--Color);
19164
+ }
19165
+ .pf-c-popover.pf-m-info {
19166
+ --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-info__title-icon--Color);
19167
+ --pf-c-popover__title-text--Color: var(--pf-c-popover--m-info__title-text--Color);
19168
+ }
18923
19169
 
18924
19170
  .pf-c-popover__content {
18925
19171
  position: relative;
@@ -18947,6 +19193,26 @@ ul.pf-c-list {
18947
19193
  box-shadow: var(--pf-c-popover__arrow--BoxShadow);
18948
19194
  }
18949
19195
 
19196
+ .pf-c-popover__title {
19197
+ flex: 0 0 auto;
19198
+ margin-bottom: var(--pf-c-popover__title--MarginBottom);
19199
+ font-family: var(--pf-c-popover__title--FontFamily);
19200
+ font-size: var(--pf-c-popover__title--FontSize);
19201
+ line-height: var(--pf-c-popover__title--LineHeight);
19202
+ }
19203
+ .pf-c-popover__title.pf-m-icon {
19204
+ display: flex;
19205
+ }
19206
+
19207
+ .pf-c-popover__title-icon {
19208
+ margin-right: var(--pf-c-popover__title-icon--MarginRight);
19209
+ color: var(--pf-c-popover__title-icon--Color);
19210
+ }
19211
+
19212
+ .pf-c-popover__title-text {
19213
+ color: var(--pf-c-popover__title-text--Color, inherit);
19214
+ }
19215
+
18950
19216
  .pf-c-popover__body {
18951
19217
  word-wrap: break-word;
18952
19218
  }
@@ -25899,14 +26165,14 @@ svg.pf-c-spinner.pf-m-xl {
25899
26165
  --pf-c-tooltip--MaxWidth: 18.75rem;
25900
26166
  --pf-c-tooltip--BoxShadow: var(--pf-global--BoxShadow--md);
25901
26167
  --pf-c-tooltip__content--PaddingTop: var(--pf-global--spacer--sm);
25902
- --pf-c-tooltip__content--PaddingRight: var(--pf-global--spacer--md);
26168
+ --pf-c-tooltip__content--PaddingRight: var(--pf-global--spacer--sm);
25903
26169
  --pf-c-tooltip__content--PaddingBottom: var(--pf-global--spacer--sm);
25904
- --pf-c-tooltip__content--PaddingLeft: var(--pf-global--spacer--md);
26170
+ --pf-c-tooltip__content--PaddingLeft: var(--pf-global--spacer--sm);
25905
26171
  --pf-c-tooltip__content--Color: var(--pf-global--Color--light-100);
25906
26172
  --pf-c-tooltip__content--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
25907
26173
  --pf-c-tooltip__content--FontSize: var(--pf-global--FontSize--sm);
25908
- --pf-c-tooltip__arrow--Width: var(--pf-global--arrow--width);
25909
- --pf-c-tooltip__arrow--Height: var(--pf-global--arrow--width);
26174
+ --pf-c-tooltip__arrow--Width: 0.5rem;
26175
+ --pf-c-tooltip__arrow--Height: 0.5rem;
25910
26176
  --pf-c-tooltip__arrow--m-top--TranslateX: -50%;
25911
26177
  --pf-c-tooltip__arrow--m-top--TranslateY: 50%;
25912
26178
  --pf-c-tooltip__arrow--m-top--Rotate: 45deg;