@patternfly/patternfly 4.148.1 → 4.149.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 (15) 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/Page/page.css +26 -3
  8. package/components/Page/page.scss +31 -0
  9. package/docs/components/ContextSelector/examples/context-selector.md +2 -0
  10. package/docs/demos/ContextSelector/examples/ContextSelector.md +1391 -0
  11. package/package.json +1 -1
  12. package/patternfly-no-reset.css +96 -4
  13. package/patternfly.css +96 -4
  14. package/patternfly.min.css +1 -1
  15. 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.148.1",
4
+ "version": "4.149.0",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-reset.css CHANGED
@@ -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 {
@@ -17914,6 +17983,11 @@ ul.pf-c-list {
17914
17983
  --pf-c-page__sidebar--xl--TranslateX: 0;
17915
17984
  --pf-c-page__sidebar-body--PaddingTop: var(--pf-global--spacer--sm);
17916
17985
  --pf-c-page__sidebar-body--PaddingBottom: var(--pf-global--spacer--md);
17986
+ --pf-c-page__sidebar-body--m-menu--PaddingTop: 0;
17987
+ --pf-c-page__sidebar-body--m-menu--PaddingBottom: 0;
17988
+ --pf-c-page__sidebar-body--m-menu--BorderTopColor: var(--pf-global--BackgroundColor--dark-200);
17989
+ --pf-c-page__sidebar-body--m-menu--BorderTopWidth: var(--pf-global--BorderWidth--sm);
17990
+ --pf-c-page__sidebar-body--m-menu--c-context-selector--BorderBottomColor: var(--pf-global--BackgroundColor--dark-200);
17917
17991
  --pf-c-page__main--ZIndex: var(--pf-global--ZIndex--xs);
17918
17992
  --pf-c-page__main-section--PaddingTop: var(--pf-global--spacer--md);
17919
17993
  --pf-c-page__main-section--PaddingRight: var(--pf-global--spacer--md);
@@ -18193,6 +18267,24 @@ ul.pf-c-list {
18193
18267
  padding-top: var(--pf-c-page__sidebar-body--PaddingTop);
18194
18268
  padding-bottom: var(--pf-c-page__sidebar-body--PaddingBottom);
18195
18269
  }
18270
+ .pf-c-page__sidebar-body.pf-m-menu {
18271
+ --pf-c-page__sidebar-body--PaddingTop: var(--pf-c-page__sidebar-body--m-menu--PaddingTop);
18272
+ --pf-c-page__sidebar-body--PaddingBottom: var(--pf-c-page__sidebar-body--m-menu--PaddingBottom);
18273
+ background-color: var(--pf-global--palette--black-900);
18274
+ border-top: var(--pf-c-page__sidebar-body--m-menu--BorderTopWidth) solid var(--pf-c-page__sidebar-body--m-menu--BorderTopColor);
18275
+ }
18276
+ .pf-c-page__sidebar-body.pf-m-menu + .pf-c-page__sidebar-body.pf-m-menu {
18277
+ --pf-c-page__sidebar-body--m-menu--BorderTopWidth: 0;
18278
+ }
18279
+ .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector {
18280
+ --pf-c-context-selector__toggle--BorderTopColor: transparent;
18281
+ --pf-c-context-selector__toggle--BorderRightColor: transparent;
18282
+ --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-page__sidebar-body--m-menu--c-context-selector--BorderBottomColor);
18283
+ --pf-c-context-selector__toggle--BorderLeftColor: transparent;
18284
+ --pf-c-context-selector__menu--Top: 100%;
18285
+ color: var(--pf-global--Color--100);
18286
+ width: 100%;
18287
+ }
18196
18288
 
18197
18289
  .pf-c-page__main-nav.pf-m-limit-width,
18198
18290
  .pf-c-page__main-breadcrumb.pf-m-limit-width,
package/patternfly.css CHANGED
@@ -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);
@@ -8377,6 +8377,7 @@ label.pf-c-check, .pf-c-check__label,
8377
8377
  --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-global--BorderColor--200);
8378
8378
  --pf-c-context-selector__toggle--BorderLeftColor: var(--pf-global--BorderColor--300);
8379
8379
  --pf-c-context-selector__toggle--Color: var(--pf-global--Color--100);
8380
+ --pf-c-context-selector__toggle--hover--BorderBottomWidth: var(--pf-c-context-selector__toggle--BorderWidth);
8380
8381
  --pf-c-context-selector__toggle--hover--BorderBottomColor: var(--pf-global--active-color--100);
8381
8382
  --pf-c-context-selector__toggle--active--BorderBottomWidth: var(--pf-global--BorderWidth--md);
8382
8383
  --pf-c-context-selector__toggle--active--BorderBottomColor: var(--pf-global--active-color--100);
@@ -8429,11 +8430,56 @@ label.pf-c-check, .pf-c-check__label,
8429
8430
  --pf-c-context-selector--m-full-height__toggle--hover--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
8430
8431
  --pf-c-context-selector--m-full-height__toggle--active--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
8431
8432
  --pf-c-context-selector--m-full-height__toggle--expanded--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
8433
+ --pf-c-context-selector--m-large__toggle--PaddingTop: var(--pf-global--spacer--md);
8434
+ --pf-c-context-selector--m-large__toggle--PaddingBottom: var(--pf-global--spacer--md);
8435
+ --pf-c-context-selector--m-large__toggle--hover--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
8436
+ --pf-c-context-selector--m-large__toggle--active--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
8437
+ --pf-c-context-selector--m-large__toggle--expanded--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
8438
+ --pf-c-context-selector--m-page-insets__toggle--PaddingRight: var(--pf-global--spacer--md);
8439
+ --pf-c-context-selector--m-page-insets__toggle--PaddingLeft: var(--pf-global--spacer--md);
8440
+ --pf-c-context-selector--m-page-insets__toggle--xl--PaddingRight: var(--pf-global--spacer--lg);
8441
+ --pf-c-context-selector--m-page-insets__toggle--xl--PaddingLeft: var(--pf-global--spacer--lg);
8442
+ --pf-c-context-selector--m-page-insets__menu-list-item--PaddingRight: var(--pf-global--spacer--md);
8443
+ --pf-c-context-selector--m-page-insets__menu-list-item--PaddingLeft: var(--pf-global--spacer--md);
8444
+ --pf-c-context-selector--m-page-insets__menu-list-item--xl--PaddingRight: var(--pf-global--spacer--lg);
8445
+ --pf-c-context-selector--m-page-insets__menu-list-item--xl--PaddingLeft: var(--pf-global--spacer--lg);
8446
+ --pf-c-context-selector--m-page-insets__menu-search--PaddingRight: var(--pf-global--spacer--md);
8447
+ --pf-c-context-selector--m-page-insets__menu-search--PaddingLeft: var(--pf-global--spacer--md);
8448
+ --pf-c-context-selector--m-page-insets__menu-search--xl--PaddingRight: var(--pf-global--spacer--lg);
8449
+ --pf-c-context-selector--m-page-insets__menu-search--xl--PaddingLeft: var(--pf-global--spacer--lg);
8450
+ --pf-c-context-selector--m-page-insets__menu-footer--PaddingRight: var(--pf-global--spacer--md);
8451
+ --pf-c-context-selector--m-page-insets__menu-footer--PaddingLeft: var(--pf-global--spacer--md);
8452
+ --pf-c-context-selector--m-page-insets__menu-footer--xl--PaddingRight: var(--pf-global--spacer--lg);
8453
+ --pf-c-context-selector--m-page-insets__menu-footer--xl--PaddingLeft: var(--pf-global--spacer--lg);
8454
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingRight: var(--pf-global--spacer--md);
8455
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingLeft: var(--pf-global--spacer--md);
8456
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--xl--PaddingRight: var(--pf-global--spacer--lg);
8457
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--xl--PaddingLeft: var(--pf-global--spacer--lg);
8458
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingRight: var(--pf-global--spacer--md);
8459
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingLeft: var(--pf-global--spacer--md);
8460
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--xl--PaddingRight: var(--pf-global--spacer--lg);
8461
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--xl--PaddingLeft: var(--pf-global--spacer--lg);
8432
8462
  position: relative;
8433
8463
  display: inline-block;
8434
8464
  width: var(--pf-c-context-selector--Width);
8435
8465
  max-width: 100%;
8436
8466
  }
8467
+ @media screen and (min-width: 1200px) {
8468
+ .pf-c-context-selector {
8469
+ --pf-c-context-selector--m-page-insets__toggle--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--xl--PaddingRight);
8470
+ --pf-c-context-selector--m-page-insets__toggle--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--xl--PaddingLeft);
8471
+ --pf-c-context-selector--m-page-insets__menu-list-item--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-list-item--xl--PaddingRight);
8472
+ --pf-c-context-selector--m-page-insets__menu-list-item--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-list-item--xl--PaddingLeft);
8473
+ --pf-c-context-selector--m-page-insets__menu-search--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-search--xl--PaddingRight);
8474
+ --pf-c-context-selector--m-page-insets__menu-search--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-search--xl--PaddingLeft);
8475
+ --pf-c-context-selector--m-page-insets__menu-footer--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-footer--xl--PaddingRight);
8476
+ --pf-c-context-selector--m-page-insets__menu-footer--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-footer--xl--PaddingLeft);
8477
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--xl--PaddingRight);
8478
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--xl--PaddingLeft);
8479
+ --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);
8480
+ --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);
8481
+ }
8482
+ }
8437
8483
  .pf-c-context-selector.pf-m-full-height {
8438
8484
  --pf-c-context-selector__toggle--active--BorderBottomWidth: var(--pf-c-context-selector--m-full-height__toggle--active--BorderBottomWidth);
8439
8485
  --pf-c-context-selector__toggle--expanded--BorderBottomWidth: var(--pf-c-context-selector--m-full-height__toggle--expanded--BorderBottomWidth);
@@ -8452,6 +8498,27 @@ label.pf-c-check, .pf-c-check__label,
8452
8498
  .pf-c-context-selector.pf-m-full-height:hover .pf-c-context-selector__toggle::before {
8453
8499
  border-bottom-width: var(--pf-c-context-selector--m-full-height__toggle--hover--BorderBottomWidth);
8454
8500
  }
8501
+ .pf-c-context-selector.pf-m-large {
8502
+ --pf-c-context-selector__toggle--PaddingTop: var(--pf-c-context-selector--m-large__toggle--PaddingTop);
8503
+ --pf-c-context-selector__toggle--PaddingBottom: var(--pf-c-context-selector--m-large__toggle--PaddingBottom);
8504
+ --pf-c-context-selector__toggle--hover--BorderBottomWidth: var(--pf-c-context-selector--m-large__toggle--hover--BorderBottomWidth);
8505
+ --pf-c-context-selector__toggle--active--BorderBottomWidth: var(--pf-c-context-selector--m-large__toggle--active--BorderBottomWidth);
8506
+ --pf-c-context-selector__toggle--expanded--BorderBottomWidth: var(--pf-c-context-selector--m-large__toggle--expanded--BorderBottomWidth);
8507
+ }
8508
+ .pf-c-context-selector.pf-m-page-insets {
8509
+ --pf-c-context-selector__toggle--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--PaddingRight);
8510
+ --pf-c-context-selector__toggle--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--PaddingLeft);
8511
+ --pf-c-context-selector__menu-list-item--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-list-item--PaddingRight);
8512
+ --pf-c-context-selector__menu-list-item--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-list-item--PaddingLeft);
8513
+ --pf-c-context-selector__menu-search--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-search--PaddingRight);
8514
+ --pf-c-context-selector__menu-search--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-search--PaddingLeft);
8515
+ --pf-c-context-selector__menu-footer--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-footer--PaddingRight);
8516
+ --pf-c-context-selector__menu-footer--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-footer--PaddingLeft);
8517
+ --pf-c-context-selector__toggle--m-plain--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingRight);
8518
+ --pf-c-context-selector__toggle--m-plain--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingLeft);
8519
+ --pf-c-context-selector__toggle--m-plain--m-text--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingRight);
8520
+ --pf-c-context-selector__toggle--m-plain--m-text--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingLeft);
8521
+ }
8455
8522
 
8456
8523
  .pf-c-context-selector__toggle {
8457
8524
  position: relative;
@@ -8477,6 +8544,7 @@ label.pf-c-check, .pf-c-check__label,
8477
8544
  }
8478
8545
  .pf-c-context-selector__toggle:hover::before {
8479
8546
  --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-context-selector__toggle--hover--BorderBottomColor);
8547
+ border-bottom-width: var(--pf-c-context-selector__toggle--hover--BorderBottomWidth);
8480
8548
  }
8481
8549
  .pf-c-context-selector__toggle:active::before, .pf-c-context-selector__toggle.pf-m-active::before, .pf-c-context-selector__toggle:focus-within::before {
8482
8550
  --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-context-selector__toggle--active--BorderBottomColor);
@@ -12325,7 +12393,7 @@ label.pf-c-check, .pf-c-check__label,
12325
12393
  border-top-width: var(--pf-c-dropdown--m-full-height__toggle--before--BorderTopWidth);
12326
12394
  }
12327
12395
  .pf-c-dropdown.pf-m-full-height:hover .pf-c-dropdown__toggle::before {
12328
- border-bottom-width: var(--pf-c-context-selector--m-full-height__toggle--hover--before--BorderBottomWidth);
12396
+ border-bottom-width: var(--pf-c-dropdown--m-full-height__toggle--hover--before--BorderBottomWidth);
12329
12397
  }
12330
12398
 
12331
12399
  .pf-c-dropdown__toggle {
@@ -15286,6 +15354,7 @@ ul.pf-c-list {
15286
15354
  --pf-c-context-selector--Width: var(--pf-c-masthead--c-context-selector--Width);
15287
15355
  --pf-c-context-selector__toggle--BorderTopColor: var(--pf-c-masthead--c-context-selector__toggle--BorderTopColor);
15288
15356
  --pf-c-context-selector__toggle--BorderRightColor: var(--pf-c-masthead--c-context-selector__toggle--BorderRightColor);
15357
+ --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-masthead--c-context-selector__toggle--BorderBottomColor);
15289
15358
  --pf-c-context-selector__toggle--BorderLeftColor: var(--pf-c-masthead--c-context-selector__toggle--BorderLeftColor);
15290
15359
  }
15291
15360
  .pf-c-masthead .pf-c-context-selector.pf-m-full-height {
@@ -18050,6 +18119,11 @@ ul.pf-c-list {
18050
18119
  --pf-c-page__sidebar--xl--TranslateX: 0;
18051
18120
  --pf-c-page__sidebar-body--PaddingTop: var(--pf-global--spacer--sm);
18052
18121
  --pf-c-page__sidebar-body--PaddingBottom: var(--pf-global--spacer--md);
18122
+ --pf-c-page__sidebar-body--m-menu--PaddingTop: 0;
18123
+ --pf-c-page__sidebar-body--m-menu--PaddingBottom: 0;
18124
+ --pf-c-page__sidebar-body--m-menu--BorderTopColor: var(--pf-global--BackgroundColor--dark-200);
18125
+ --pf-c-page__sidebar-body--m-menu--BorderTopWidth: var(--pf-global--BorderWidth--sm);
18126
+ --pf-c-page__sidebar-body--m-menu--c-context-selector--BorderBottomColor: var(--pf-global--BackgroundColor--dark-200);
18053
18127
  --pf-c-page__main--ZIndex: var(--pf-global--ZIndex--xs);
18054
18128
  --pf-c-page__main-section--PaddingTop: var(--pf-global--spacer--md);
18055
18129
  --pf-c-page__main-section--PaddingRight: var(--pf-global--spacer--md);
@@ -18329,6 +18403,24 @@ ul.pf-c-list {
18329
18403
  padding-top: var(--pf-c-page__sidebar-body--PaddingTop);
18330
18404
  padding-bottom: var(--pf-c-page__sidebar-body--PaddingBottom);
18331
18405
  }
18406
+ .pf-c-page__sidebar-body.pf-m-menu {
18407
+ --pf-c-page__sidebar-body--PaddingTop: var(--pf-c-page__sidebar-body--m-menu--PaddingTop);
18408
+ --pf-c-page__sidebar-body--PaddingBottom: var(--pf-c-page__sidebar-body--m-menu--PaddingBottom);
18409
+ background-color: var(--pf-global--palette--black-900);
18410
+ border-top: var(--pf-c-page__sidebar-body--m-menu--BorderTopWidth) solid var(--pf-c-page__sidebar-body--m-menu--BorderTopColor);
18411
+ }
18412
+ .pf-c-page__sidebar-body.pf-m-menu + .pf-c-page__sidebar-body.pf-m-menu {
18413
+ --pf-c-page__sidebar-body--m-menu--BorderTopWidth: 0;
18414
+ }
18415
+ .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector {
18416
+ --pf-c-context-selector__toggle--BorderTopColor: transparent;
18417
+ --pf-c-context-selector__toggle--BorderRightColor: transparent;
18418
+ --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-page__sidebar-body--m-menu--c-context-selector--BorderBottomColor);
18419
+ --pf-c-context-selector__toggle--BorderLeftColor: transparent;
18420
+ --pf-c-context-selector__menu--Top: 100%;
18421
+ color: var(--pf-global--Color--100);
18422
+ width: 100%;
18423
+ }
18332
18424
 
18333
18425
  .pf-c-page__main-nav.pf-m-limit-width,
18334
18426
  .pf-c-page__main-breadcrumb.pf-m-limit-width,