@patternfly/patternfly 4.206.2 → 4.208.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 (63) hide show
  1. package/RELEASE-NOTES.md +41 -0
  2. package/components/Button/button.css +20 -0
  3. package/components/Button/button.scss +23 -0
  4. package/components/Button/themes/dark/button.scss +1 -0
  5. package/components/Check/check.css +9 -0
  6. package/components/Check/check.scss +11 -0
  7. package/components/ContextSelector/context-selector.css +6 -0
  8. package/components/ContextSelector/context-selector.scss +7 -1
  9. package/components/Dropdown/dropdown.css +6 -0
  10. package/components/Dropdown/dropdown.scss +7 -0
  11. package/components/ExpandableSection/expandable-section.css +18 -1
  12. package/components/ExpandableSection/expandable-section.scss +25 -1
  13. package/components/InputGroup/input-group.css +3 -0
  14. package/components/InputGroup/input-group.scss +4 -0
  15. package/components/Masthead/masthead.css +6 -3
  16. package/components/Masthead/masthead.scss +4 -0
  17. package/components/Menu/menu.css +0 -4
  18. package/components/Menu/menu.scss +0 -4
  19. package/components/Page/page.css +4 -0
  20. package/components/Page/page.scss +6 -0
  21. package/components/Select/select.css +6 -0
  22. package/components/Select/select.scss +7 -0
  23. package/components/Wizard/themes/dark/wizard.scss +2 -2
  24. package/components/Wizard/wizard.css +2 -2
  25. package/docs/components/Avatar/examples/Avatar.md +10 -10
  26. package/docs/components/Button/examples/Button.md +19 -0
  27. package/docs/components/Card/examples/Card.css +3 -3
  28. package/docs/components/Check/examples/Check.md +33 -12
  29. package/docs/components/CodeBlock/examples/CodeBlock.md +8 -6
  30. package/docs/components/Dropdown/examples/Dropdown.md +2 -1
  31. package/docs/components/ExpandableSection/examples/ExpandableSection.md +51 -13
  32. package/docs/components/InputGroup/examples/InputGroup.md +1 -0
  33. package/docs/components/Masthead/examples/masthead.md +5 -6
  34. package/docs/components/MenuToggle/examples/MenuToggle.md +6 -6
  35. package/docs/components/Page/examples/Page.md +1 -0
  36. package/docs/components/TextInputGroup/examples/TextInputGroup.md +38 -0
  37. package/docs/demos/AboutModal/examples/AboutModal.md +1 -1
  38. package/docs/demos/Alert/examples/Alert.md +3 -3
  39. package/docs/demos/BackToTop/examples/BackToTop.md +1 -1
  40. package/docs/demos/Banner/examples/Banner.md +2 -2
  41. package/docs/demos/CardView/examples/CardView.md +1 -1
  42. package/docs/demos/ContextSelector/examples/ContextSelector.md +3 -3
  43. package/docs/demos/Dashboard/examples/Dashboard.md +1 -1
  44. package/docs/demos/DataList/examples/DataList.md +4 -4
  45. package/docs/demos/DescriptionList/examples/DescriptionList.md +3 -3
  46. package/docs/demos/Drawer/examples/Drawer.md +5 -5
  47. package/docs/demos/JumpLinks/examples/JumpLinks.md +6 -6
  48. package/docs/demos/Masthead/examples/Masthead.md +388 -2
  49. package/docs/demos/Modal/examples/Modal.md +6 -6
  50. package/docs/demos/Nav/examples/Nav.md +8 -8
  51. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +5 -5
  52. package/docs/demos/Page/examples/Page.md +933 -9
  53. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +7 -7
  54. package/docs/demos/Skeleton/examples/Skeleton.md +1 -1
  55. package/docs/demos/Table/examples/Table.md +14 -14
  56. package/docs/demos/Tabs/examples/Tabs.md +8 -8
  57. package/docs/demos/Toolbar/examples/Toolbar.md +1 -1
  58. package/docs/demos/Wizard/examples/Wizard.md +8 -8
  59. package/package.json +3 -3
  60. package/patternfly-no-reset.css +80 -10
  61. package/patternfly.css +80 -10
  62. package/patternfly.min.css +1 -1
  63. package/patternfly.min.css.map +1 -1
@@ -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__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 {
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-button.pf-m-plain, .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__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 {
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-button.pf-m-plain .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__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 {
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-m-plain .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);
@@ -7516,6 +7516,11 @@ button.pf-c-breadcrumb__link {
7516
7516
  --pf-c-button--m-in-progress--m-plain--Color: var(--pf-global--primary-color--100);
7517
7517
  --pf-c-button--m-in-progress--m-plain__progress--Left: 50%;
7518
7518
  --pf-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
7519
+ --pf-c-button__count--MarginLeft: var(--pf-global--spacer--sm);
7520
+ --pf-c-button--disabled__c-badge--Color: var(--pf-global--Color--dark-100);
7521
+ --pf-c-button--disabled__c-badge--BackgroundColor: var(--pf-global--BackgroundColor--200);
7522
+ --pf-c-button--m-primary__c-badge--BorderColor: var(--pf-global--BorderColor--300);
7523
+ --pf-c-button--m-primary__c-badge--BorderWidth: var(--pf-global--BorderWidth--sm);
7519
7524
  position: relative;
7520
7525
  display: inline-block;
7521
7526
  padding: var(--pf-c-button--PaddingTop) var(--pf-c-button--PaddingRight) var(--pf-c-button--PaddingBottom) var(--pf-c-button--PaddingLeft);
@@ -7580,6 +7585,9 @@ button.pf-c-breadcrumb__link {
7580
7585
  --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--active--Color);
7581
7586
  --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--active--BackgroundColor);
7582
7587
  }
7588
+ .pf-c-button.pf-m-primary .pf-c-badge.pf-m-unread {
7589
+ border: var(--pf-c-button--m-primary__c-badge--BorderWidth) solid var(--pf-c-button--m-primary__c-badge--BorderColor);
7590
+ }
7583
7591
  .pf-c-button.pf-m-secondary {
7584
7592
  --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--after--BorderColor);
7585
7593
  color: var(--pf-c-button--m-secondary--Color);
@@ -7791,6 +7799,11 @@ button.pf-c-breadcrumb__link {
7791
7799
  .pf-c-button:disabled::after, .pf-c-button.pf-m-disabled::after, .pf-c-button.pf-m-aria-disabled::after {
7792
7800
  border-color: var(--pf-c-button--disabled--after--BorderColor);
7793
7801
  }
7802
+ .pf-c-button:disabled .pf-c-badge, .pf-c-button.pf-m-disabled .pf-c-badge, .pf-c-button.pf-m-aria-disabled .pf-c-badge {
7803
+ --pf-c-badge--m-unread--Color: var(--pf-c-button--disabled__c-badge--Color);
7804
+ --pf-c-badge--m-unread--BackgroundColor: var(--pf-c-button--disabled__c-badge--BackgroundColor);
7805
+ --pf-c-button--m-primary__c-badge--BorderWidth: 0;
7806
+ }
7794
7807
  .pf-c-button.pf-m-aria-disabled {
7795
7808
  --pf-c-button--after--BorderWidth: 0;
7796
7809
  --pf-c-button--m-link--m-inline--hover--TextDecoration: none;
@@ -7832,6 +7845,12 @@ button.pf-c-breadcrumb__link {
7832
7845
  --pf-c-spinner--Color: currentcolor;
7833
7846
  }
7834
7847
 
7848
+ .pf-c-button__count {
7849
+ display: inline-flex;
7850
+ align-items: center;
7851
+ margin-left: var(--pf-c-button__count--MarginLeft);
7852
+ }
7853
+
7835
7854
  .pf-m-overpass-font .pf-c-button {
7836
7855
  --pf-c-button--FontWeight: var(--pf-global--FontWeight--semi-bold);
7837
7856
  }
@@ -7904,6 +7923,7 @@ button.pf-c-breadcrumb__link {
7904
7923
  --pf-c-button--m-control--focus--after--BorderBottomColor: var(--pf-global--primary-color--100);
7905
7924
  --pf-c-button--m-control--m-expanded--after--BorderBottomColor: var(--pf-global--primary-color--100);
7906
7925
  --pf-c-button--m-control--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
7926
+ --pf-c-button--m-primary__c-badge--BorderColor: var(--pf-global--Color--100);
7907
7927
  }
7908
7928
  :where(.pf-theme-dark) .pf-c-button.pf-m-control:disabled::after {
7909
7929
  border: 0;
@@ -8543,6 +8563,9 @@ button.pf-c-breadcrumb__link {
8543
8563
  --pf-c-check__description--FontSize: var(--pf-global--FontSize--sm);
8544
8564
  --pf-c-check__description--Color: var(--pf-global--Color--200);
8545
8565
  --pf-c-check__body--MarginTop: var(--pf-global--spacer--sm);
8566
+ --pf-c-check__label-required--MarginLeft: var(--pf-global--spacer--xs);
8567
+ --pf-c-check__label-required--FontSize: var(--pf-global--FontSize--sm);
8568
+ --pf-c-check__label-required--Color: var(--pf-global--danger-color--100);
8546
8569
  display: grid;
8547
8570
  grid-template-columns: auto 1fr;
8548
8571
  grid-gap: var(--pf-c-check--GridGap);
@@ -8592,6 +8615,12 @@ label.pf-c-check, .pf-c-check__label,
8592
8615
  cursor: not-allowed;
8593
8616
  }
8594
8617
 
8618
+ .pf-c-check__label-required {
8619
+ margin-left: var(--pf-c-check__label-required--MarginLeft);
8620
+ font-size: var(--pf-c-check__label-required--FontSize);
8621
+ color: var(--pf-c-check__label-required--Color);
8622
+ }
8623
+
8595
8624
  .pf-c-chip {
8596
8625
  --pf-c-chip--PaddingTop: var(--pf-global--spacer--xs);
8597
8626
  --pf-c-chip--PaddingRight: var(--pf-global--spacer--sm);
@@ -9645,6 +9674,12 @@ label.pf-c-check, .pf-c-check__label,
9645
9674
  background-clip: padding-box;
9646
9675
  box-shadow: var(--pf-c-context-selector__menu--BoxShadow);
9647
9676
  }
9677
+ .pf-c-context-selector__menu.pf-m-static {
9678
+ position: static;
9679
+ top: auto;
9680
+ z-index: auto;
9681
+ min-width: min-content;
9682
+ }
9648
9683
 
9649
9684
  .pf-c-context-selector__menu-search {
9650
9685
  position: relative;
@@ -14139,6 +14174,12 @@ label.pf-c-check, .pf-c-check__label,
14139
14174
  background-clip: padding-box;
14140
14175
  box-shadow: var(--pf-c-dropdown__menu--BoxShadow);
14141
14176
  }
14177
+ .pf-c-dropdown__menu.pf-m-static {
14178
+ position: static;
14179
+ top: auto;
14180
+ z-index: auto;
14181
+ min-width: min-content;
14182
+ }
14142
14183
 
14143
14184
  .pf-c-dropdown .pf-c-menu,
14144
14185
  .pf-c-dropdown__menu {
@@ -14475,6 +14516,7 @@ label.pf-c-check, .pf-c-check__label,
14475
14516
  --pf-c-expandable-section__toggle--PaddingRight: var(--pf-global--spacer--md);
14476
14517
  --pf-c-expandable-section__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
14477
14518
  --pf-c-expandable-section__toggle--PaddingLeft: 0;
14519
+ --pf-c-expandable-section__toggle--MarginTop: 0;
14478
14520
  --pf-c-expandable-section__toggle--Color: var(--pf-global--link--Color);
14479
14521
  --pf-c-expandable-section__toggle--hover--Color: var(--pf-global--link--Color--hover);
14480
14522
  --pf-c-expandable-section__toggle--active--Color: var(--pf-global--link--Color--hover);
@@ -14504,6 +14546,8 @@ label.pf-c-check, .pf-c-check__label,
14504
14546
  --pf-c-expandable-section--m-display-lg--after--Width: var(--pf-global--BorderWidth--lg);
14505
14547
  --pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor: var(--pf-global--primary-color--100);
14506
14548
  --pf-c-expandable-section--m-indented__content--PaddingLeft: calc(var(--pf-c-expandable-section__toggle-text--MarginLeft) + var(--pf-c-expandable-section__toggle-icon--MinWidth));
14549
+ --pf-c-expandable-section--m-truncate__content--LineClamp: 3;
14550
+ --pf-c-expandable-section--m-truncate__toggle--MarginTop: var(--pf-global--spacer--xs);
14507
14551
  }
14508
14552
  .pf-c-expandable-section.pf-m-expanded {
14509
14553
  --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--m-expanded--Color);
@@ -14511,7 +14555,7 @@ label.pf-c-check, .pf-c-check__label,
14511
14555
  --pf-c-expandable-section__toggle-icon--m-expand-top--Rotate: var(--pf-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate);
14512
14556
  --pf-c-expandable-section--m-display-lg--after--BackgroundColor: var(--pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor);
14513
14557
  }
14514
- .pf-c-expandable-section.pf-m-detached {
14558
+ .pf-c-expandable-section.pf-m-detached, .pf-c-expandable-section.pf-m-truncate {
14515
14559
  --pf-c-expandable-section__content--MarginTop: 0;
14516
14560
  }
14517
14561
  .pf-c-expandable-section.pf-m-limit-width {
@@ -14541,10 +14585,24 @@ label.pf-c-check, .pf-c-check__label,
14541
14585
  .pf-c-expandable-section.pf-m-indented {
14542
14586
  --pf-c-expandable-section__content--PaddingLeft: var(--pf-c-expandable-section--m-indented__content--PaddingLeft);
14543
14587
  }
14588
+ .pf-c-expandable-section.pf-m-truncate {
14589
+ --pf-c-expandable-section__toggle--MarginTop: var(--pf-c-expandable-section--m-truncate__toggle--MarginTop);
14590
+ --pf-c-expandable-section__toggle--PaddingTop: 0;
14591
+ --pf-c-expandable-section__toggle--PaddingRight: 0;
14592
+ --pf-c-expandable-section__toggle--PaddingBottom: 0;
14593
+ --pf-c-expandable-section__toggle-text--MarginLeft: 0;
14594
+ }
14595
+ .pf-c-expandable-section.pf-m-truncate:not(.pf-m-expanded) .pf-c-expandable-section__content {
14596
+ display: -webkit-box;
14597
+ -webkit-box-orient: vertical;
14598
+ -webkit-line-clamp: var(--pf-c-expandable-section--m-truncate__content--LineClamp);
14599
+ overflow: hidden;
14600
+ }
14544
14601
 
14545
14602
  .pf-c-expandable-section__toggle {
14546
14603
  display: flex;
14547
14604
  padding: var(--pf-c-expandable-section__toggle--PaddingTop) var(--pf-c-expandable-section__toggle--PaddingRight) var(--pf-c-expandable-section__toggle--PaddingBottom) var(--pf-c-expandable-section__toggle--PaddingLeft);
14605
+ margin-top: var(--pf-c-expandable-section__toggle--MarginTop);
14548
14606
  color: var(--pf-c-expandable-section__toggle--Color);
14549
14607
  border: none;
14550
14608
  }
@@ -15893,6 +15951,9 @@ textarea.pf-c-form-control {
15893
15951
  width: 100%;
15894
15952
  background-color: var(--pf-c-input-group--BackgroundColor);
15895
15953
  }
15954
+ .pf-c-input-group.pf-m-plain {
15955
+ --pf-c-input-group--BackgroundColor: transparent;
15956
+ }
15896
15957
  .pf-c-input-group > * + * {
15897
15958
  margin-left: -1px;
15898
15959
  }
@@ -17687,6 +17748,9 @@ ul.pf-c-list {
17687
17748
  .pf-c-masthead .pf-c-nav {
17688
17749
  align-self: stretch;
17689
17750
  }
17751
+ .pf-c-masthead .pf-c-button.pf-m-plain {
17752
+ color: var(--pf-global--Color--200);
17753
+ }
17690
17754
 
17691
17755
  .pf-c-masthead__main {
17692
17756
  position: relative;
@@ -18280,8 +18344,6 @@ ul.pf-c-list {
18280
18344
  --pf-c-menu__footer--BoxShadow: none;
18281
18345
  --pf-c-menu__footer--after--BorderTopWidth: var(--pf-global--BorderWidth--sm);
18282
18346
  --pf-c-menu__footer--after--BorderTopColor: var(--pf-global--BorderColor--100);
18283
- --pf-c-menu__footer--after--BorderBottomWidth: 0;
18284
- --pf-c-menu__footer--after--BorderBottomColor: var(--pf-global--BorderColor--100);
18285
18347
  --pf-c-menu--m-scrollable__footer--BoxShadow: var(--pf-global--BoxShadow--sm-top);
18286
18348
  --pf-c-menu--m-scrollable__footer--after--BorderTopWidth: 0;
18287
18349
  --pf-c-menu--m-scrollable__footer--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
@@ -18413,7 +18475,6 @@ ul.pf-c-list {
18413
18475
  --pf-c-menu__content--MaxHeight: var(--pf-c-menu--m-scrollable__content--MaxHeight);
18414
18476
  --pf-c-menu__footer--BoxShadow: var(--pf-c-menu--m-scrollable__footer--BoxShadow);
18415
18477
  --pf-c-menu__footer--after--BorderTopWidth: var(--pf-c-menu--m-scrollable__footer--after--BorderTopWidth);
18416
- --pf-c-menu__footer--after--BorderBottomWidth: var(--pf-c-menu--m-scrollable__footer--after--BorderBottomWidth);
18417
18478
  }
18418
18479
  .pf-c-menu.pf-m-scrollable .pf-c-menu__content {
18419
18480
  overflow-y: auto;
@@ -18715,7 +18776,6 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18715
18776
  pointer-events: none;
18716
18777
  content: "";
18717
18778
  border-top: var(--pf-c-menu__footer--after--BorderTopWidth) solid var(--pf-c-menu__footer--after--BorderTopColor);
18718
- border-bottom: var(--pf-c-menu__footer--after--BorderBottomWidth) solid var(--pf-c-menu__footer--after--BorderBottomColor);
18719
18779
  }
18720
18780
 
18721
18781
  :where(.pf-theme-dark) .pf-c-wizard__header, :where(.pf-theme-dark) .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector,
@@ -21587,6 +21647,10 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21587
21647
  grid-template-areas: "header header" "nav main";
21588
21648
  }
21589
21649
  }
21650
+ .pf-c-page.pf-m-full-height {
21651
+ height: 100vh;
21652
+ height: 100dvh;
21653
+ }
21590
21654
 
21591
21655
  .pf-c-page__header,
21592
21656
  .pf-c-page > .pf-c-masthead {
@@ -24491,6 +24555,12 @@ label.pf-c-radio, .pf-c-radio__label,
24491
24555
  top: 0;
24492
24556
  transform: translateY(var(--pf-c-select__menu--m-top--TranslateY));
24493
24557
  }
24558
+ .pf-c-select__menu.pf-m-static {
24559
+ position: static;
24560
+ top: auto;
24561
+ z-index: auto;
24562
+ min-width: min-content;
24563
+ }
24494
24564
 
24495
24565
  .pf-c-select__menu-fieldset {
24496
24566
  border: 0;
@@ -32229,10 +32299,10 @@ label.pf-c-tree-view__node-text {
32229
32299
  }
32230
32300
 
32231
32301
  :where(.pf-theme-dark) .pf-c-wizard {
32302
+ --pf-c-wizard__header--BackgroundColor: var(--pf-global--palette--black-1000);
32303
+ --pf-c-wizard__nav-link--before--BackgroundColor: var(--pf-global--palette--black-500);
32232
32304
  --pf-c-wizard__nav-link--m-disabled--Color: var(--pf-global--disabled-color--300);
32233
32305
  --pf-c-wizard__nav-link--m-disabled--before--Color: var(--pf-global--disabled-color--300);
32234
- --pf-c-wizard__nav--BackgroundColor: var(--pf-global--BackgroundColor--300);
32235
- --pf-c-wizard__outer-wrap--BackgroundColor: var(--pf-global--BackgroundColor--300);
32236
32306
  }
32237
32307
  :where(.pf-theme-dark) .pf-c-wizard__header {
32238
32308
  color: var(--pf-global--Color--100);
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__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 {
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-button.pf-m-plain, .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__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 {
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-button.pf-m-plain .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__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 {
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-m-plain .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);
@@ -7643,6 +7643,11 @@ button.pf-c-breadcrumb__link {
7643
7643
  --pf-c-button--m-in-progress--m-plain--Color: var(--pf-global--primary-color--100);
7644
7644
  --pf-c-button--m-in-progress--m-plain__progress--Left: 50%;
7645
7645
  --pf-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
7646
+ --pf-c-button__count--MarginLeft: var(--pf-global--spacer--sm);
7647
+ --pf-c-button--disabled__c-badge--Color: var(--pf-global--Color--dark-100);
7648
+ --pf-c-button--disabled__c-badge--BackgroundColor: var(--pf-global--BackgroundColor--200);
7649
+ --pf-c-button--m-primary__c-badge--BorderColor: var(--pf-global--BorderColor--300);
7650
+ --pf-c-button--m-primary__c-badge--BorderWidth: var(--pf-global--BorderWidth--sm);
7646
7651
  position: relative;
7647
7652
  display: inline-block;
7648
7653
  padding: var(--pf-c-button--PaddingTop) var(--pf-c-button--PaddingRight) var(--pf-c-button--PaddingBottom) var(--pf-c-button--PaddingLeft);
@@ -7707,6 +7712,9 @@ button.pf-c-breadcrumb__link {
7707
7712
  --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--active--Color);
7708
7713
  --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--active--BackgroundColor);
7709
7714
  }
7715
+ .pf-c-button.pf-m-primary .pf-c-badge.pf-m-unread {
7716
+ border: var(--pf-c-button--m-primary__c-badge--BorderWidth) solid var(--pf-c-button--m-primary__c-badge--BorderColor);
7717
+ }
7710
7718
  .pf-c-button.pf-m-secondary {
7711
7719
  --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--after--BorderColor);
7712
7720
  color: var(--pf-c-button--m-secondary--Color);
@@ -7918,6 +7926,11 @@ button.pf-c-breadcrumb__link {
7918
7926
  .pf-c-button:disabled::after, .pf-c-button.pf-m-disabled::after, .pf-c-button.pf-m-aria-disabled::after {
7919
7927
  border-color: var(--pf-c-button--disabled--after--BorderColor);
7920
7928
  }
7929
+ .pf-c-button:disabled .pf-c-badge, .pf-c-button.pf-m-disabled .pf-c-badge, .pf-c-button.pf-m-aria-disabled .pf-c-badge {
7930
+ --pf-c-badge--m-unread--Color: var(--pf-c-button--disabled__c-badge--Color);
7931
+ --pf-c-badge--m-unread--BackgroundColor: var(--pf-c-button--disabled__c-badge--BackgroundColor);
7932
+ --pf-c-button--m-primary__c-badge--BorderWidth: 0;
7933
+ }
7921
7934
  .pf-c-button.pf-m-aria-disabled {
7922
7935
  --pf-c-button--after--BorderWidth: 0;
7923
7936
  --pf-c-button--m-link--m-inline--hover--TextDecoration: none;
@@ -7959,6 +7972,12 @@ button.pf-c-breadcrumb__link {
7959
7972
  --pf-c-spinner--Color: currentcolor;
7960
7973
  }
7961
7974
 
7975
+ .pf-c-button__count {
7976
+ display: inline-flex;
7977
+ align-items: center;
7978
+ margin-left: var(--pf-c-button__count--MarginLeft);
7979
+ }
7980
+
7962
7981
  .pf-m-overpass-font .pf-c-button {
7963
7982
  --pf-c-button--FontWeight: var(--pf-global--FontWeight--semi-bold);
7964
7983
  }
@@ -8031,6 +8050,7 @@ button.pf-c-breadcrumb__link {
8031
8050
  --pf-c-button--m-control--focus--after--BorderBottomColor: var(--pf-global--primary-color--100);
8032
8051
  --pf-c-button--m-control--m-expanded--after--BorderBottomColor: var(--pf-global--primary-color--100);
8033
8052
  --pf-c-button--m-control--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
8053
+ --pf-c-button--m-primary__c-badge--BorderColor: var(--pf-global--Color--100);
8034
8054
  }
8035
8055
  :where(.pf-theme-dark) .pf-c-button.pf-m-control:disabled::after {
8036
8056
  border: 0;
@@ -8670,6 +8690,9 @@ button.pf-c-breadcrumb__link {
8670
8690
  --pf-c-check__description--FontSize: var(--pf-global--FontSize--sm);
8671
8691
  --pf-c-check__description--Color: var(--pf-global--Color--200);
8672
8692
  --pf-c-check__body--MarginTop: var(--pf-global--spacer--sm);
8693
+ --pf-c-check__label-required--MarginLeft: var(--pf-global--spacer--xs);
8694
+ --pf-c-check__label-required--FontSize: var(--pf-global--FontSize--sm);
8695
+ --pf-c-check__label-required--Color: var(--pf-global--danger-color--100);
8673
8696
  display: grid;
8674
8697
  grid-template-columns: auto 1fr;
8675
8698
  grid-gap: var(--pf-c-check--GridGap);
@@ -8719,6 +8742,12 @@ label.pf-c-check, .pf-c-check__label,
8719
8742
  cursor: not-allowed;
8720
8743
  }
8721
8744
 
8745
+ .pf-c-check__label-required {
8746
+ margin-left: var(--pf-c-check__label-required--MarginLeft);
8747
+ font-size: var(--pf-c-check__label-required--FontSize);
8748
+ color: var(--pf-c-check__label-required--Color);
8749
+ }
8750
+
8722
8751
  .pf-c-chip {
8723
8752
  --pf-c-chip--PaddingTop: var(--pf-global--spacer--xs);
8724
8753
  --pf-c-chip--PaddingRight: var(--pf-global--spacer--sm);
@@ -9772,6 +9801,12 @@ label.pf-c-check, .pf-c-check__label,
9772
9801
  background-clip: padding-box;
9773
9802
  box-shadow: var(--pf-c-context-selector__menu--BoxShadow);
9774
9803
  }
9804
+ .pf-c-context-selector__menu.pf-m-static {
9805
+ position: static;
9806
+ top: auto;
9807
+ z-index: auto;
9808
+ min-width: min-content;
9809
+ }
9775
9810
 
9776
9811
  .pf-c-context-selector__menu-search {
9777
9812
  position: relative;
@@ -14266,6 +14301,12 @@ label.pf-c-check, .pf-c-check__label,
14266
14301
  background-clip: padding-box;
14267
14302
  box-shadow: var(--pf-c-dropdown__menu--BoxShadow);
14268
14303
  }
14304
+ .pf-c-dropdown__menu.pf-m-static {
14305
+ position: static;
14306
+ top: auto;
14307
+ z-index: auto;
14308
+ min-width: min-content;
14309
+ }
14269
14310
 
14270
14311
  .pf-c-dropdown .pf-c-menu,
14271
14312
  .pf-c-dropdown__menu {
@@ -14602,6 +14643,7 @@ label.pf-c-check, .pf-c-check__label,
14602
14643
  --pf-c-expandable-section__toggle--PaddingRight: var(--pf-global--spacer--md);
14603
14644
  --pf-c-expandable-section__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
14604
14645
  --pf-c-expandable-section__toggle--PaddingLeft: 0;
14646
+ --pf-c-expandable-section__toggle--MarginTop: 0;
14605
14647
  --pf-c-expandable-section__toggle--Color: var(--pf-global--link--Color);
14606
14648
  --pf-c-expandable-section__toggle--hover--Color: var(--pf-global--link--Color--hover);
14607
14649
  --pf-c-expandable-section__toggle--active--Color: var(--pf-global--link--Color--hover);
@@ -14631,6 +14673,8 @@ label.pf-c-check, .pf-c-check__label,
14631
14673
  --pf-c-expandable-section--m-display-lg--after--Width: var(--pf-global--BorderWidth--lg);
14632
14674
  --pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor: var(--pf-global--primary-color--100);
14633
14675
  --pf-c-expandable-section--m-indented__content--PaddingLeft: calc(var(--pf-c-expandable-section__toggle-text--MarginLeft) + var(--pf-c-expandable-section__toggle-icon--MinWidth));
14676
+ --pf-c-expandable-section--m-truncate__content--LineClamp: 3;
14677
+ --pf-c-expandable-section--m-truncate__toggle--MarginTop: var(--pf-global--spacer--xs);
14634
14678
  }
14635
14679
  .pf-c-expandable-section.pf-m-expanded {
14636
14680
  --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--m-expanded--Color);
@@ -14638,7 +14682,7 @@ label.pf-c-check, .pf-c-check__label,
14638
14682
  --pf-c-expandable-section__toggle-icon--m-expand-top--Rotate: var(--pf-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate);
14639
14683
  --pf-c-expandable-section--m-display-lg--after--BackgroundColor: var(--pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor);
14640
14684
  }
14641
- .pf-c-expandable-section.pf-m-detached {
14685
+ .pf-c-expandable-section.pf-m-detached, .pf-c-expandable-section.pf-m-truncate {
14642
14686
  --pf-c-expandable-section__content--MarginTop: 0;
14643
14687
  }
14644
14688
  .pf-c-expandable-section.pf-m-limit-width {
@@ -14668,10 +14712,24 @@ label.pf-c-check, .pf-c-check__label,
14668
14712
  .pf-c-expandable-section.pf-m-indented {
14669
14713
  --pf-c-expandable-section__content--PaddingLeft: var(--pf-c-expandable-section--m-indented__content--PaddingLeft);
14670
14714
  }
14715
+ .pf-c-expandable-section.pf-m-truncate {
14716
+ --pf-c-expandable-section__toggle--MarginTop: var(--pf-c-expandable-section--m-truncate__toggle--MarginTop);
14717
+ --pf-c-expandable-section__toggle--PaddingTop: 0;
14718
+ --pf-c-expandable-section__toggle--PaddingRight: 0;
14719
+ --pf-c-expandable-section__toggle--PaddingBottom: 0;
14720
+ --pf-c-expandable-section__toggle-text--MarginLeft: 0;
14721
+ }
14722
+ .pf-c-expandable-section.pf-m-truncate:not(.pf-m-expanded) .pf-c-expandable-section__content {
14723
+ display: -webkit-box;
14724
+ -webkit-box-orient: vertical;
14725
+ -webkit-line-clamp: var(--pf-c-expandable-section--m-truncate__content--LineClamp);
14726
+ overflow: hidden;
14727
+ }
14671
14728
 
14672
14729
  .pf-c-expandable-section__toggle {
14673
14730
  display: flex;
14674
14731
  padding: var(--pf-c-expandable-section__toggle--PaddingTop) var(--pf-c-expandable-section__toggle--PaddingRight) var(--pf-c-expandable-section__toggle--PaddingBottom) var(--pf-c-expandable-section__toggle--PaddingLeft);
14732
+ margin-top: var(--pf-c-expandable-section__toggle--MarginTop);
14675
14733
  color: var(--pf-c-expandable-section__toggle--Color);
14676
14734
  border: none;
14677
14735
  }
@@ -16020,6 +16078,9 @@ textarea.pf-c-form-control {
16020
16078
  width: 100%;
16021
16079
  background-color: var(--pf-c-input-group--BackgroundColor);
16022
16080
  }
16081
+ .pf-c-input-group.pf-m-plain {
16082
+ --pf-c-input-group--BackgroundColor: transparent;
16083
+ }
16023
16084
  .pf-c-input-group > * + * {
16024
16085
  margin-left: -1px;
16025
16086
  }
@@ -17814,6 +17875,9 @@ ul.pf-c-list {
17814
17875
  .pf-c-masthead .pf-c-nav {
17815
17876
  align-self: stretch;
17816
17877
  }
17878
+ .pf-c-masthead .pf-c-button.pf-m-plain {
17879
+ color: var(--pf-global--Color--200);
17880
+ }
17817
17881
 
17818
17882
  .pf-c-masthead__main {
17819
17883
  position: relative;
@@ -18407,8 +18471,6 @@ ul.pf-c-list {
18407
18471
  --pf-c-menu__footer--BoxShadow: none;
18408
18472
  --pf-c-menu__footer--after--BorderTopWidth: var(--pf-global--BorderWidth--sm);
18409
18473
  --pf-c-menu__footer--after--BorderTopColor: var(--pf-global--BorderColor--100);
18410
- --pf-c-menu__footer--after--BorderBottomWidth: 0;
18411
- --pf-c-menu__footer--after--BorderBottomColor: var(--pf-global--BorderColor--100);
18412
18474
  --pf-c-menu--m-scrollable__footer--BoxShadow: var(--pf-global--BoxShadow--sm-top);
18413
18475
  --pf-c-menu--m-scrollable__footer--after--BorderTopWidth: 0;
18414
18476
  --pf-c-menu--m-scrollable__footer--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
@@ -18540,7 +18602,6 @@ ul.pf-c-list {
18540
18602
  --pf-c-menu__content--MaxHeight: var(--pf-c-menu--m-scrollable__content--MaxHeight);
18541
18603
  --pf-c-menu__footer--BoxShadow: var(--pf-c-menu--m-scrollable__footer--BoxShadow);
18542
18604
  --pf-c-menu__footer--after--BorderTopWidth: var(--pf-c-menu--m-scrollable__footer--after--BorderTopWidth);
18543
- --pf-c-menu__footer--after--BorderBottomWidth: var(--pf-c-menu--m-scrollable__footer--after--BorderBottomWidth);
18544
18605
  }
18545
18606
  .pf-c-menu.pf-m-scrollable .pf-c-menu__content {
18546
18607
  overflow-y: auto;
@@ -18842,7 +18903,6 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18842
18903
  pointer-events: none;
18843
18904
  content: "";
18844
18905
  border-top: var(--pf-c-menu__footer--after--BorderTopWidth) solid var(--pf-c-menu__footer--after--BorderTopColor);
18845
- border-bottom: var(--pf-c-menu__footer--after--BorderBottomWidth) solid var(--pf-c-menu__footer--after--BorderBottomColor);
18846
18906
  }
18847
18907
 
18848
18908
  :where(.pf-theme-dark) .pf-c-wizard__header, :where(.pf-theme-dark) .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector,
@@ -21714,6 +21774,10 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21714
21774
  grid-template-areas: "header header" "nav main";
21715
21775
  }
21716
21776
  }
21777
+ .pf-c-page.pf-m-full-height {
21778
+ height: 100vh;
21779
+ height: 100dvh;
21780
+ }
21717
21781
 
21718
21782
  .pf-c-page__header,
21719
21783
  .pf-c-page > .pf-c-masthead {
@@ -24618,6 +24682,12 @@ label.pf-c-radio, .pf-c-radio__label,
24618
24682
  top: 0;
24619
24683
  transform: translateY(var(--pf-c-select__menu--m-top--TranslateY));
24620
24684
  }
24685
+ .pf-c-select__menu.pf-m-static {
24686
+ position: static;
24687
+ top: auto;
24688
+ z-index: auto;
24689
+ min-width: min-content;
24690
+ }
24621
24691
 
24622
24692
  .pf-c-select__menu-fieldset {
24623
24693
  border: 0;
@@ -32356,10 +32426,10 @@ label.pf-c-tree-view__node-text {
32356
32426
  }
32357
32427
 
32358
32428
  :where(.pf-theme-dark) .pf-c-wizard {
32429
+ --pf-c-wizard__header--BackgroundColor: var(--pf-global--palette--black-1000);
32430
+ --pf-c-wizard__nav-link--before--BackgroundColor: var(--pf-global--palette--black-500);
32359
32431
  --pf-c-wizard__nav-link--m-disabled--Color: var(--pf-global--disabled-color--300);
32360
32432
  --pf-c-wizard__nav-link--m-disabled--before--Color: var(--pf-global--disabled-color--300);
32361
- --pf-c-wizard__nav--BackgroundColor: var(--pf-global--BackgroundColor--300);
32362
- --pf-c-wizard__outer-wrap--BackgroundColor: var(--pf-global--BackgroundColor--300);
32363
32433
  }
32364
32434
  :where(.pf-theme-dark) .pf-c-wizard__header {
32365
32435
  color: var(--pf-global--Color--100);