@patternfly/patternfly 4.180.0 → 4.182.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/assets/images/status-icon-sprite.svg +38 -0
  2. package/components/FormControl/form-control.css +26 -0
  3. package/components/FormControl/form-control.scss +30 -1
  4. package/components/Masthead/masthead.css +21 -27
  5. package/components/Masthead/masthead.scss +21 -27
  6. package/components/Menu/menu.css +10 -0
  7. package/components/Menu/menu.scss +14 -0
  8. package/components/MenuToggle/menu-toggle.css +141 -7
  9. package/components/MenuToggle/menu-toggle.scss +208 -8
  10. package/docs/components/FormControl/examples/FormControl.md +151 -0
  11. package/docs/components/Menu/examples/Menu.md +67 -2
  12. package/docs/components/MenuToggle/examples/MenuToggle.md +552 -20
  13. package/docs/components/Page/examples/Page.md +11 -2
  14. package/docs/components/Table/examples/Table.md +8 -0
  15. package/docs/components/Wizard/examples/Wizard.md +6 -6
  16. package/docs/demos/Alert/examples/Alert.md +20 -40
  17. package/docs/demos/BackToTop/examples/BackToTop.md +149 -249
  18. package/docs/demos/ContextSelector/examples/ContextSelector.md +86 -166
  19. package/docs/demos/DescriptionList/examples/DescriptionList.md +3358 -0
  20. package/docs/demos/Drawer/examples/Drawer.md +60 -120
  21. package/docs/demos/JumpLinks/examples/JumpLinks.md +80 -31
  22. package/docs/demos/Masthead/examples/Masthead.md +144 -284
  23. package/docs/demos/Nav/examples/Nav.md +203 -343
  24. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +100 -200
  25. package/docs/demos/Page/examples/Page.md +589 -1137
  26. package/docs/demos/Table/examples/Table.md +26 -26
  27. package/docs/demos/Tabs/examples/Tabs.md +11 -19
  28. package/docs/demos/Wizard/examples/Wizard.md +6 -2
  29. package/package.json +1 -1
  30. package/patternfly-no-reset.css +198 -34
  31. package/patternfly.css +198 -34
  32. package/patternfly.min.css +1 -1
  33. package/patternfly.min.css.map +1 -1
@@ -14054,6 +14054,18 @@ label.pf-c-check, .pf-c-check__label,
14054
14054
  --pf-c-form-control--textarea--success--BackgroundPositionY: var(--pf-c-form-control--PaddingLeft);
14055
14055
  --pf-c-form-control--textarea--m-warning--BackgroundPositionY: var(--pf-c-form-control--PaddingLeft);
14056
14056
  --pf-c-form-control--textarea--invalid--BackgroundPositionY: var(--pf-c-form-control--PaddingLeft);
14057
+ --pf-c-form-control--m-icon-sprite--success--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#success");
14058
+ --pf-c-form-control--m-icon-sprite--m-warning--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#warning");
14059
+ --pf-c-form-control--m-icon-sprite--m-invalid--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#invalid");
14060
+ --pf-c-form-control--m-icon-sprite__select--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#select");
14061
+ --pf-c-form-control--m-icon-sprite--m-search--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#search");
14062
+ --pf-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#calendar");
14063
+ --pf-c-form-control--m-icon-sprite--m-clock--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#clock");
14064
+ --pf-c-form-control--m-icon-sprite__select--BackgroundSize: var(--pf-c-form-control--FontSize);
14065
+ --pf-c-form-control--m-icon-sprite__select--BackgroundPositionX: calc(100% - var(--pf-global--spacer--md) + 7px);
14066
+ --pf-c-form-control--m-icon-sprite__select--success--BackgroundPosition: calc(100% - var(--pf-global--spacer--md) + 1px - var(--pf-global--spacer--lg));
14067
+ --pf-c-form-control--m-icon-sprite__select--m-warning--BackgroundPosition: calc(100% - var(--pf-global--spacer--md) - var(--pf-global--spacer--lg) + 0.0625rem);
14068
+ --pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition: calc(100% - var(--pf-global--spacer--md) - var(--pf-global--spacer--lg));
14057
14069
  color: var(--pf-global--Color--100);
14058
14070
  width: var(--pf-c-form-control--Width);
14059
14071
  padding: var(--pf-c-form-control--PaddingTop) var(--pf-c-form-control--PaddingRight) var(--pf-c-form-control--PaddingBottom) var(--pf-c-form-control--PaddingLeft);
@@ -14167,6 +14179,20 @@ label.pf-c-check, .pf-c-check__label,
14167
14179
  .pf-c-form-control.pf-m-icon.pf-m-clock {
14168
14180
  --pf-c-form-control--m-icon--BackgroundUrl: var(--pf-c-form-control--m-clock--BackgroundUrl);
14169
14181
  }
14182
+ .pf-c-form-control.pf-m-icon-sprite {
14183
+ --pf-c-form-control--success--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--success--BackgroundUrl);
14184
+ --pf-c-form-control--m-warning--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-warning--BackgroundUrl);
14185
+ --pf-c-form-control--m-invalid--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-invalid--BackgroundUrl);
14186
+ --pf-c-form-control__select--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite__select--BackgroundUrl);
14187
+ --pf-c-form-control--m-search--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-search--BackgroundUrl);
14188
+ --pf-c-form-control--m-calendar--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl);
14189
+ --pf-c-form-control--m-clock--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-clock--BackgroundUrl);
14190
+ --pf-c-form-control__select--BackgroundSize: var(--pf-c-form-control--m-icon-sprite__select--BackgroundSize);
14191
+ --pf-c-form-control__select--BackgroundPositionX: var(--pf-c-form-control--m-icon-sprite__select--BackgroundPositionX);
14192
+ --pf-c-form-control__select--success--BackgroundPosition: var(--pf-c-form-control--m-icon-sprite__select--success--BackgroundPosition);
14193
+ --pf-c-form-control__select--m-warning--BackgroundPosition: var(--pf-c-form-control--m-icon-sprite__select--m-warning--BackgroundPosition);
14194
+ --pf-c-form-control__select--invalid--BackgroundPosition: var(--pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition);
14195
+ }
14170
14196
  select.pf-c-form-control {
14171
14197
  --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--PaddingRight);
14172
14198
  --pf-c-form-control--PaddingLeft: var(--pf-c-form-control__select--PaddingLeft);
@@ -15873,24 +15899,21 @@ ul.pf-c-list {
15873
15899
  --pf-c-masthead--c-toolbar__item--Display: flex;
15874
15900
  --pf-c-masthead--item-border-color--base: var(--pf-global--palette--black-800);
15875
15901
  --pf-c-masthead--c-context-selector--Width: auto;
15876
- --pf-c-masthead--c-context-selector__toggle--BorderTopColor: transparent;
15877
- --pf-c-masthead--c-context-selector__toggle--BorderRightColor: transparent;
15878
- --pf-c-masthead--c-context-selector__toggle--BorderBottomColor: transparent;
15879
- --pf-c-masthead--c-context-selector__toggle--BorderLeftColor: transparent;
15880
- --pf-c-masthead--c-context-selector--m-full-height__toggle--BorderRightColor: var(--pf-c-masthead--item-border-color--base);
15881
- --pf-c-masthead--c-context-selector--m-full-height__toggle--BorderLeftColor: var(--pf-c-masthead--item-border-color--base);
15882
- --pf-c-masthead--c-dropdown__toggle--before--BorderTopColor: transparent;
15883
- --pf-c-masthead--c-dropdown__toggle--before--BorderRightColor: transparent;
15884
- --pf-c-masthead--c-dropdown__toggle--before--BorderBottomColor: transparent;
15885
- --pf-c-masthead--c-dropdown__toggle--before--BorderLeftColor: transparent;
15886
- --pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderRightColor: var(--pf-c-masthead--item-border-color--base);
15887
- --pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderLeftColor: var(--pf-c-masthead--item-border-color--base);
15888
- --pf-c-masthead--c-menu-toggle--before--BorderTopColor: transparent;
15889
- --pf-c-masthead--c-menu-toggle--before--BorderRightColor: transparent;
15890
- --pf-c-masthead--c-menu-toggle--before--BorderBottomColor: transparent;
15891
- --pf-c-masthead--c-menu-toggle--before--BorderLeftColor: transparent;
15892
- --pf-c-masthead--c-menu-toggle--m-full-height--before--BorderRightColor: var(--pf-c-masthead--item-border-color--base);
15893
- --pf-c-masthead--c-menu-toggle--m-full-height--before--BorderLeftColor: var(--pf-c-masthead--item-border-color--base);
15902
+ --pf-c-masthead--c-context-selector__toggle--BorderTopColor: var(--pf-c-masthead--item-border-color--base);
15903
+ --pf-c-masthead--c-context-selector__toggle--BorderRightColor: var(--pf-c-masthead--item-border-color--base);
15904
+ --pf-c-masthead--c-context-selector__toggle--BorderLeftColor: var(--pf-c-masthead--item-border-color--base);
15905
+ --pf-c-masthead--c-context-selector--m-full-height__toggle--BorderTopColor: transparent;
15906
+ --pf-c-masthead--c-context-selector--m-full-height__toggle--BorderBottomColor: transparent;
15907
+ --pf-c-masthead--c-dropdown__toggle--before--BorderTopColor: var(--pf-c-masthead--item-border-color--base);
15908
+ --pf-c-masthead--c-dropdown__toggle--before--BorderRightColor: var(--pf-c-masthead--item-border-color--base);
15909
+ --pf-c-masthead--c-dropdown__toggle--before--BorderLeftColor: var(--pf-c-masthead--item-border-color--base);
15910
+ --pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderTopColor: transparent;
15911
+ --pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderBottomColor: transparent;
15912
+ --pf-c-masthead--c-menu-toggle--before--BorderTopColor: var(--pf-c-masthead--item-border-color--base);
15913
+ --pf-c-masthead--c-menu-toggle--before--BorderRightColor: var(--pf-c-masthead--item-border-color--base);
15914
+ --pf-c-masthead--c-menu-toggle--before--BorderLeftColor: var(--pf-c-masthead--item-border-color--base);
15915
+ --pf-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor: transparent;
15916
+ --pf-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor: transparent;
15894
15917
  --pf-c-masthead--c-toolbar__content--PaddingRight: 0;
15895
15918
  --pf-c-masthead--c-toolbar__content--PaddingLeft: 0;
15896
15919
  --pf-c-masthead--c-toolbar__expandable-content--PaddingTop: var(--pf-global--spacer--md);
@@ -15983,33 +16006,30 @@ ul.pf-c-list {
15983
16006
  .pf-c-masthead .pf-c-menu-toggle {
15984
16007
  --pf-c-menu-toggle--before--BorderTopColor: var(--pf-c-masthead--c-menu-toggle--before--BorderTopColor);
15985
16008
  --pf-c-menu-toggle--before--BorderRightColor: var(--pf-c-masthead--c-menu-toggle--before--BorderRightColor);
15986
- --pf-c-menu-toggle--before--BorderBottomColor: var(--pf-c-masthead--c-menu-toggle--before--BorderBottomColor);
15987
16009
  --pf-c-menu-toggle--before--BorderLeftColor: var(--pf-c-masthead--c-menu-toggle--before--BorderLeftColor);
15988
16010
  }
15989
16011
  .pf-c-masthead .pf-c-menu-toggle.pf-m-full-height {
15990
- --pf-c-menu-toggle--before--BorderRightColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderRightColor);
15991
- --pf-c-menu-toggle--before--BorderLeftColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderLeftColor);
16012
+ --pf-c-menu-toggle--before--BorderTopColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor);
16013
+ --pf-c-menu-toggle--before--BorderBottomColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor);
15992
16014
  }
15993
16015
  .pf-c-masthead .pf-c-context-selector {
15994
16016
  --pf-c-context-selector--Width: var(--pf-c-masthead--c-context-selector--Width);
15995
16017
  --pf-c-context-selector__toggle--BorderTopColor: var(--pf-c-masthead--c-context-selector__toggle--BorderTopColor);
15996
16018
  --pf-c-context-selector__toggle--BorderRightColor: var(--pf-c-masthead--c-context-selector__toggle--BorderRightColor);
15997
- --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-masthead--c-context-selector__toggle--BorderBottomColor);
15998
16019
  --pf-c-context-selector__toggle--BorderLeftColor: var(--pf-c-masthead--c-context-selector__toggle--BorderLeftColor);
15999
16020
  }
16000
16021
  .pf-c-masthead .pf-c-context-selector.pf-m-full-height {
16001
- --pf-c-context-selector__toggle--BorderRightColor: var(--pf-c-masthead--c-context-selector--m-full-height__toggle--BorderRightColor);
16002
- --pf-c-context-selector__toggle--BorderLeftColor: var(--pf-c-masthead--c-context-selector--m-full-height__toggle--BorderLeftColor);
16022
+ --pf-c-context-selector__toggle--BorderTopColor: var(--pf-c-masthead--c-context-selector--m-full-height__toggle--BorderTopColor);
16023
+ --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-masthead--c-context-selector--m-full-height__toggle--BorderBottomColor);
16003
16024
  }
16004
16025
  .pf-c-masthead .pf-c-dropdown {
16005
16026
  --pf-c-dropdown__toggle--before--BorderTopColor: var(--pf-c-masthead--c-dropdown__toggle--before--BorderTopColor);
16006
16027
  --pf-c-dropdown__toggle--before--BorderRightColor: var(--pf-c-masthead--c-dropdown__toggle--before--BorderRightColor);
16007
- --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-masthead--c-dropdown__toggle--before--BorderBottomColor);
16008
16028
  --pf-c-dropdown__toggle--before--BorderLeftColor: var(--pf-c-masthead--c-dropdown__toggle--before--BorderLeftColor);
16009
16029
  }
16010
16030
  .pf-c-masthead .pf-c-dropdown.pf-m-full-height {
16011
- --pf-c-dropdown__toggle--before--BorderRightColor: var(--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderRightColor);
16012
- --pf-c-dropdown__toggle--before--BorderLeftColor: var(--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderLeftColor);
16031
+ --pf-c-dropdown__toggle--before--BorderTopColor: var(--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderTopColor);
16032
+ --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderBottomColor);
16013
16033
  }
16014
16034
  .pf-c-masthead .pf-c-nav {
16015
16035
  align-self: stretch;
@@ -16517,6 +16537,7 @@ ul.pf-c-list {
16517
16537
  --pf-c-menu__item-description--FontSize: var(--pf-global--FontSize--xs);
16518
16538
  --pf-c-menu__item-description--Color: var(--pf-global--Color--200);
16519
16539
  --pf-c-menu__item-icon--MarginRight: var(--pf-global--spacer--sm);
16540
+ --pf-c-menu__item-check--MarginRight: var(--pf-global--spacer--sm);
16520
16541
  --pf-c-menu__item-toggle-icon--PaddingRight: var(--pf-global--spacer--sm);
16521
16542
  --pf-c-menu__item-toggle-icon--PaddingLeft: var(--pf-global--spacer--sm);
16522
16543
  --pf-c-menu__list-item--m-disabled__item-toggle-icon--Color: var(--pf-global--disabled-color--200);
@@ -16879,6 +16900,9 @@ ul.pf-c-list {
16879
16900
  .pf-c-menu__item.pf-m-selected .pf-c-menu__item-select-icon {
16880
16901
  opacity: 1;
16881
16902
  }
16903
+ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
16904
+ cursor: pointer;
16905
+ }
16882
16906
 
16883
16907
  .pf-c-menu__item-main {
16884
16908
  display: flex;
@@ -16923,6 +16947,12 @@ ul.pf-c-list {
16923
16947
  margin-right: var(--pf-c-menu__item-icon--MarginRight);
16924
16948
  }
16925
16949
 
16950
+ .pf-c-menu__item-check {
16951
+ display: flex;
16952
+ align-items: center;
16953
+ margin-right: var(--pf-c-menu__item-check--MarginRight);
16954
+ }
16955
+
16926
16956
  .pf-c-menu__item-toggle-icon {
16927
16957
  padding-right: var(--pf-c-menu__item-toggle-icon--PaddingRight);
16928
16958
  padding-left: var(--pf-c-menu__item-toggle-icon--PaddingLeft);
@@ -17071,6 +17101,33 @@ ul.pf-c-list {
17071
17101
  --pf-c-menu-toggle--m-full-height--hover--after--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
17072
17102
  --pf-c-menu-toggle--m-full-height--focus--after--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
17073
17103
  --pf-c-menu-toggle--m-full-height--active--after--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
17104
+ --pf-c-menu-toggle--m-split-button--BackgroundColor: var(--pf-global--BackgroundColor--100);
17105
+ --pf-c-menu-toggle--m-split-button--child--BackgroundColor: var(--pf-global--BackgroundColor--100);
17106
+ --pf-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-global--Color--dark-200);
17107
+ --pf-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
17108
+ --pf-c-menu-toggle--m-split-button--first-child--PaddingRight: var(--pf-global--spacer--sm);
17109
+ --pf-c-menu-toggle--m-split-button--last-child--PaddingLeft: 0;
17110
+ --pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
17111
+ --pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor: var(--pf-global--BorderColor--300);
17112
+ --pf-c-menu-toggle--m-split-button--m-action--child--after--Left: 0;
17113
+ --pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
17114
+ --pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomColor: var(--pf-global--BorderColor--200);
17115
+ --pf-c-menu-toggle--m-split-button--m-action--child--hover--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
17116
+ --pf-c-menu-toggle--m-split-button--m-action--child--hover--after--BorderBottomColor: var(--pf-global--active-color--100);
17117
+ --pf-c-menu-toggle--m-split-button--m-action--child--focus--after--BorderBottomWidth: var(--pf-global--BorderWidth--md);
17118
+ --pf-c-menu-toggle--m-split-button--m-action--child--focus--after--BorderBottomColor: var(--pf-global--active-color--100);
17119
+ --pf-c-menu-toggle--m-split-button--m-action--child--active--after--BorderBottomWidth: var(--pf-global--BorderWidth--md);
17120
+ --pf-c-menu-toggle--m-split-button--m-action--child--active--after--BorderBottomColor: var(--pf-global--active-color--100);
17121
+ --pf-c-menu-toggle--m-split-button--m-action--child--BorderRadius: var(--pf-global--BorderRadius--sm);
17122
+ --pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--pf-global--primary-color--100);
17123
+ --pf-c-menu-toggle--m-split-button--m-action--m-primary--child--hover--BackgroundColor: var(--pf-global--primary-color--200);
17124
+ --pf-c-menu-toggle--m-split-button--m-action--m-primary--child--focus--BackgroundColor: var(--pf-global--primary-color--200);
17125
+ --pf-c-menu-toggle--m-split-button--m-action--m-primary--child--active--BackgroundColor: var(--pf-global--primary-color--200);
17126
+ --pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BorderLeftColor: var(--pf-global--primary-color--200);
17127
+ --pf-c-menu-toggle--m-split-button--m-action--m-primary--m-expanded--child--BackgroundColor: var(--pf-global--primary-color--200);
17128
+ --pf-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor: var(--pf-global--primary-color--100);
17129
+ --pf-c-menu-toggle__button__controls--MarginRight: var(--pf-global--spacer--sm);
17130
+ --pf-c-menu-toggle__button__controls--MarginLeft: var(--pf-global--spacer--sm);
17074
17131
  position: relative;
17075
17132
  display: inline-flex;
17076
17133
  align-items: center;
@@ -17147,34 +17204,32 @@ ul.pf-c-list {
17147
17204
  --pf-c-menu-toggle__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain__toggle-icon--Color);
17148
17205
  }
17149
17206
  .pf-c-menu-toggle.pf-m-plain:not(.pf-m-text) {
17150
- --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-plain--Color);
17151
- --pf-c-menu-toggle--hover--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
17152
- --pf-c-menu-toggle--focus--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
17153
- --pf-c-menu-toggle--active--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
17154
- --pf-c-menu-toggle--disabled--Color: var(--pf-c-menu-toggle--m-plain--disabled--Color);
17155
17207
  --pf-c-menu-toggle--PaddingRight: var(--pf-c-menu-toggle--m-plain--PaddingRight);
17156
17208
  --pf-c-menu-toggle--PaddingLeft: var(--pf-c-menu-toggle--m-plain--PaddingLeft);
17157
17209
  --pf-c-menu-toggle--disabled--BackgroundColor: transparent;
17158
- --pf-c-menu-toggle--m-expanded--Color: var(--pf-c-menu-toggle--m-plain--m-expanded--Color);
17159
17210
  display: inline-block;
17211
+ color: var(--pf-c-menu-toggle--m-plain--Color);
17160
17212
  }
17161
17213
  .pf-c-menu-toggle:hover {
17162
17214
  --pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--hover--BackgroundColor);
17163
17215
  --pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--hover--after--BorderBottomWidth);
17164
17216
  --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--hover--after--BorderBottomColor);
17165
17217
  --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--hover__toggle-icon--Color);
17218
+ --pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
17166
17219
  }
17167
17220
  .pf-c-menu-toggle:focus {
17168
17221
  --pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--focus--BackgroundColor);
17169
17222
  --pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--focus--after--BorderBottomWidth);
17170
17223
  --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--focus--after--BorderBottomColor);
17171
17224
  --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--focus__toggle-icon--Color);
17225
+ --pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--focus--Color);
17172
17226
  }
17173
17227
  .pf-c-menu-toggle:active {
17174
17228
  --pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--active--BackgroundColor);
17175
17229
  --pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--active--after--BorderBottomWidth);
17176
17230
  --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--active--after--BorderBottomColor);
17177
17231
  --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--active__toggle-icon--Color);
17232
+ --pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--active--Color);
17178
17233
  }
17179
17234
  .pf-c-menu-toggle.pf-m-expanded {
17180
17235
  --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-expanded--Color);
@@ -17182,10 +17237,12 @@ ul.pf-c-list {
17182
17237
  --pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--m-expanded--after--BorderBottomWidth);
17183
17238
  --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--m-expanded--after--BorderBottomColor);
17184
17239
  --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--m-expanded__toggle-icon--Color);
17240
+ --pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--m-expanded--Color);
17185
17241
  }
17186
- .pf-c-menu-toggle:disabled {
17242
+ .pf-c-menu-toggle:disabled, .pf-c-menu-toggle.pf-m-disabled {
17187
17243
  --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--disabled--Color);
17188
17244
  --pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--disabled--BackgroundColor);
17245
+ --pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--disabled--Color);
17189
17246
  pointer-events: none;
17190
17247
  }
17191
17248
  .pf-c-menu-toggle.pf-m-primary::before, .pf-c-menu-toggle.pf-m-primary::after, .pf-c-menu-toggle.pf-m-plain::before, .pf-c-menu-toggle.pf-m-plain::after, .pf-c-menu-toggle:disabled::before, .pf-c-menu-toggle:disabled::after {
@@ -17201,6 +17258,113 @@ ul.pf-c-list {
17201
17258
  --pf-c-menu-toggle--active--after--BorderBottomWidth: var(--pf-c-menu-toggle--m-full-height--active--after--BorderBottomWidth);
17202
17259
  height: 100%;
17203
17260
  }
17261
+ .pf-c-menu-toggle.pf-m-split-button {
17262
+ --pf-c-menu-toggle__toggle-icon--MarginRight: 0;
17263
+ padding: 0;
17264
+ }
17265
+ .pf-c-menu-toggle.pf-m-split-button > * {
17266
+ position: relative;
17267
+ padding: var(--pf-c-menu-toggle--PaddingTop) var(--pf-c-menu-toggle--PaddingRight) var(--pf-c-menu-toggle--PaddingBottom) var(--pf-c-menu-toggle--PaddingLeft);
17268
+ }
17269
+ .pf-c-menu-toggle.pf-m-split-button > *:first-child {
17270
+ padding-right: var(--pf-c-menu-toggle--m-split-button--first-child--PaddingRight);
17271
+ }
17272
+ .pf-c-menu-toggle.pf-m-split-button:where(:not(.pf-m-action)) > :last-child {
17273
+ padding-left: var(--pf-c-menu-toggle--m-split-button--last-child--PaddingLeft);
17274
+ }
17275
+ .pf-c-menu-toggle.pf-m-split-button > .pf-c-check {
17276
+ --pf-c-menu-toggle--PaddingRight: 0;
17277
+ --pf-c-check__input--MarginTop: 0;
17278
+ --pf-c-check__label--Color: var(--pf-c-check__label--Color, inherit);
17279
+ align-items: center;
17280
+ align-self: stretch;
17281
+ }
17282
+ .pf-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *::after {
17283
+ position: absolute;
17284
+ top: 0;
17285
+ right: 0;
17286
+ bottom: 0;
17287
+ left: var(--pf-c-menu-toggle--m-split-button--m-action--child--after--Left);
17288
+ pointer-events: none;
17289
+ content: "";
17290
+ border-bottom: var(--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth) solid var(--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomColor);
17291
+ }
17292
+ .pf-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *:hover {
17293
+ --pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth: var(--pf-c-menu-toggle--m-split-button--m-action--child--hover--after--BorderBottomWidth);
17294
+ --pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomColor: var(--pf-c-menu-toggle--m-split-button--m-action--child--hover--after--BorderBottomColor);
17295
+ }
17296
+ .pf-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *:focus {
17297
+ --pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth: var(--pf-c-menu-toggle--m-split-button--m-action--child--focus--after--BorderBottomWidth);
17298
+ --pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomColor: var(--pf-c-menu-toggle--m-split-button--m-action--child--focus--after--BorderBottomColor);
17299
+ }
17300
+ .pf-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *:active, .pf-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *.pf-m-active {
17301
+ --pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth: var(--pf-c-menu-toggle--m-split-button--m-action--child--active--after--BorderBottomWidth);
17302
+ --pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomColor: var(--pf-c-menu-toggle--m-split-button--m-action--child--active--after--BorderBottomColor);
17303
+ }
17304
+ .pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary {
17305
+ --pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor: var(--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BorderLeftColor);
17306
+ --pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth: 0;
17307
+ }
17308
+ .pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary > :where(:not(.pf-m-disabled):not([disabled])) {
17309
+ background-color: var(--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor);
17310
+ }
17311
+ .pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary > :where(:not(.pf-m-disabled):not([disabled])):hover {
17312
+ --pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--hover--BackgroundColor);
17313
+ }
17314
+ .pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary > :where(:not(.pf-m-disabled):not([disabled])):focus {
17315
+ --pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--focus--BackgroundColor);
17316
+ }
17317
+ .pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary > :where(:not(.pf-m-disabled):not([disabled])):active, .pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary > :where(:not(.pf-m-disabled):not([disabled])).pf-m-active {
17318
+ --pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--active--BackgroundColor);
17319
+ }
17320
+ .pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary.pf-m-expanded {
17321
+ --pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--pf-c-menu-toggle--m-split-button--m-action--m-primary--m-expanded--child--BackgroundColor);
17322
+ }
17323
+ .pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-secondary {
17324
+ --pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor: var(--pf-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor);
17325
+ }
17326
+ .pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary, .pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-secondary {
17327
+ --pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth: 0;
17328
+ }
17329
+ .pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary > :first-child, .pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-secondary > :first-child {
17330
+ border-top-left-radius: var(--pf-c-menu-toggle--m-split-button--m-action--child--BorderRadius);
17331
+ border-bottom-left-radius: var(--pf-c-menu-toggle--m-split-button--m-action--child--BorderRadius);
17332
+ }
17333
+ .pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary > :last-child, .pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-secondary > :last-child {
17334
+ border-top-right-radius: var(--pf-c-menu-toggle--m-split-button--m-action--child--BorderRadius);
17335
+ border-bottom-right-radius: var(--pf-c-menu-toggle--m-split-button--m-action--child--BorderRadius);
17336
+ }
17337
+ .pf-c-menu-toggle.pf-m-split-button.pf-m-action > :not(:first-child) {
17338
+ --pf-c-menu-toggle--m-split-button--m-action--child--after--Left: calc(var(--pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftWidth) * -1);
17339
+ border-left: var(--pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftWidth) solid var(--pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor);
17340
+ }
17341
+ .pf-c-menu-toggle.pf-m-split-button.pf-m-action:not(.pf-m-expanded) {
17342
+ --pf-c-menu-toggle--after--BorderBottomColor: transparent;
17343
+ }
17344
+ .pf-c-menu-toggle.pf-m-split-button.pf-m-disabled, .pf-c-menu-toggle.pf-m-split-button:disabled {
17345
+ --pf-c-menu-toggle--m-split-button--child--BackgroundColor: var(--pf-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
17346
+ --pf-c-menu-toggle--m-split-button--child--Color: var(--pf-c-menu-toggle--m-split-button--child--disabled--Color);
17347
+ --pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor: transparent;
17348
+ }
17349
+ .pf-c-menu-toggle.pf-m-split-button.pf-m-disabled::before, .pf-c-menu-toggle.pf-m-split-button.pf-m-disabled::after, .pf-c-menu-toggle.pf-m-split-button:disabled::before, .pf-c-menu-toggle.pf-m-split-button:disabled::after {
17350
+ content: none;
17351
+ }
17352
+ .pf-c-menu-toggle.pf-m-split-button > .pf-m-disabled,
17353
+ .pf-c-menu-toggle.pf-m-split-button > :disabled {
17354
+ --pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor: transparent;
17355
+ color: var(--pf-c-menu-toggle--m-split-button--child--disabled--Color);
17356
+ background-color: var(--pf-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
17357
+ }
17358
+
17359
+ .pf-c-menu-toggle__button {
17360
+ color: inherit;
17361
+ border: 0;
17362
+ }
17363
+ .pf-c-menu-toggle__button .pf-c-menu-toggle__controls {
17364
+ padding-left: 0;
17365
+ margin-right: var(--pf-c-menu-toggle__button__controls--MarginRight);
17366
+ margin-left: var(--pf-c-menu-toggle__button__controls--MarginLeft);
17367
+ }
17204
17368
 
17205
17369
  .pf-c-menu-toggle__icon {
17206
17370
  display: inline-flex;