@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
package/patternfly.css CHANGED
@@ -14176,6 +14176,18 @@ label.pf-c-check, .pf-c-check__label,
14176
14176
  --pf-c-form-control--textarea--success--BackgroundPositionY: var(--pf-c-form-control--PaddingLeft);
14177
14177
  --pf-c-form-control--textarea--m-warning--BackgroundPositionY: var(--pf-c-form-control--PaddingLeft);
14178
14178
  --pf-c-form-control--textarea--invalid--BackgroundPositionY: var(--pf-c-form-control--PaddingLeft);
14179
+ --pf-c-form-control--m-icon-sprite--success--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#success");
14180
+ --pf-c-form-control--m-icon-sprite--m-warning--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#warning");
14181
+ --pf-c-form-control--m-icon-sprite--m-invalid--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#invalid");
14182
+ --pf-c-form-control--m-icon-sprite__select--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#select");
14183
+ --pf-c-form-control--m-icon-sprite--m-search--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#search");
14184
+ --pf-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#calendar");
14185
+ --pf-c-form-control--m-icon-sprite--m-clock--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#clock");
14186
+ --pf-c-form-control--m-icon-sprite__select--BackgroundSize: var(--pf-c-form-control--FontSize);
14187
+ --pf-c-form-control--m-icon-sprite__select--BackgroundPositionX: calc(100% - var(--pf-global--spacer--md) + 7px);
14188
+ --pf-c-form-control--m-icon-sprite__select--success--BackgroundPosition: calc(100% - var(--pf-global--spacer--md) + 1px - var(--pf-global--spacer--lg));
14189
+ --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);
14190
+ --pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition: calc(100% - var(--pf-global--spacer--md) - var(--pf-global--spacer--lg));
14179
14191
  color: var(--pf-global--Color--100);
14180
14192
  width: var(--pf-c-form-control--Width);
14181
14193
  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);
@@ -14289,6 +14301,20 @@ label.pf-c-check, .pf-c-check__label,
14289
14301
  .pf-c-form-control.pf-m-icon.pf-m-clock {
14290
14302
  --pf-c-form-control--m-icon--BackgroundUrl: var(--pf-c-form-control--m-clock--BackgroundUrl);
14291
14303
  }
14304
+ .pf-c-form-control.pf-m-icon-sprite {
14305
+ --pf-c-form-control--success--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--success--BackgroundUrl);
14306
+ --pf-c-form-control--m-warning--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-warning--BackgroundUrl);
14307
+ --pf-c-form-control--m-invalid--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-invalid--BackgroundUrl);
14308
+ --pf-c-form-control__select--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite__select--BackgroundUrl);
14309
+ --pf-c-form-control--m-search--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-search--BackgroundUrl);
14310
+ --pf-c-form-control--m-calendar--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl);
14311
+ --pf-c-form-control--m-clock--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-clock--BackgroundUrl);
14312
+ --pf-c-form-control__select--BackgroundSize: var(--pf-c-form-control--m-icon-sprite__select--BackgroundSize);
14313
+ --pf-c-form-control__select--BackgroundPositionX: var(--pf-c-form-control--m-icon-sprite__select--BackgroundPositionX);
14314
+ --pf-c-form-control__select--success--BackgroundPosition: var(--pf-c-form-control--m-icon-sprite__select--success--BackgroundPosition);
14315
+ --pf-c-form-control__select--m-warning--BackgroundPosition: var(--pf-c-form-control--m-icon-sprite__select--m-warning--BackgroundPosition);
14316
+ --pf-c-form-control__select--invalid--BackgroundPosition: var(--pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition);
14317
+ }
14292
14318
  select.pf-c-form-control {
14293
14319
  --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--PaddingRight);
14294
14320
  --pf-c-form-control--PaddingLeft: var(--pf-c-form-control__select--PaddingLeft);
@@ -15995,24 +16021,21 @@ ul.pf-c-list {
15995
16021
  --pf-c-masthead--c-toolbar__item--Display: flex;
15996
16022
  --pf-c-masthead--item-border-color--base: var(--pf-global--palette--black-800);
15997
16023
  --pf-c-masthead--c-context-selector--Width: auto;
15998
- --pf-c-masthead--c-context-selector__toggle--BorderTopColor: transparent;
15999
- --pf-c-masthead--c-context-selector__toggle--BorderRightColor: transparent;
16000
- --pf-c-masthead--c-context-selector__toggle--BorderBottomColor: transparent;
16001
- --pf-c-masthead--c-context-selector__toggle--BorderLeftColor: transparent;
16002
- --pf-c-masthead--c-context-selector--m-full-height__toggle--BorderRightColor: var(--pf-c-masthead--item-border-color--base);
16003
- --pf-c-masthead--c-context-selector--m-full-height__toggle--BorderLeftColor: var(--pf-c-masthead--item-border-color--base);
16004
- --pf-c-masthead--c-dropdown__toggle--before--BorderTopColor: transparent;
16005
- --pf-c-masthead--c-dropdown__toggle--before--BorderRightColor: transparent;
16006
- --pf-c-masthead--c-dropdown__toggle--before--BorderBottomColor: transparent;
16007
- --pf-c-masthead--c-dropdown__toggle--before--BorderLeftColor: transparent;
16008
- --pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderRightColor: var(--pf-c-masthead--item-border-color--base);
16009
- --pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderLeftColor: var(--pf-c-masthead--item-border-color--base);
16010
- --pf-c-masthead--c-menu-toggle--before--BorderTopColor: transparent;
16011
- --pf-c-masthead--c-menu-toggle--before--BorderRightColor: transparent;
16012
- --pf-c-masthead--c-menu-toggle--before--BorderBottomColor: transparent;
16013
- --pf-c-masthead--c-menu-toggle--before--BorderLeftColor: transparent;
16014
- --pf-c-masthead--c-menu-toggle--m-full-height--before--BorderRightColor: var(--pf-c-masthead--item-border-color--base);
16015
- --pf-c-masthead--c-menu-toggle--m-full-height--before--BorderLeftColor: var(--pf-c-masthead--item-border-color--base);
16024
+ --pf-c-masthead--c-context-selector__toggle--BorderTopColor: var(--pf-c-masthead--item-border-color--base);
16025
+ --pf-c-masthead--c-context-selector__toggle--BorderRightColor: var(--pf-c-masthead--item-border-color--base);
16026
+ --pf-c-masthead--c-context-selector__toggle--BorderLeftColor: var(--pf-c-masthead--item-border-color--base);
16027
+ --pf-c-masthead--c-context-selector--m-full-height__toggle--BorderTopColor: transparent;
16028
+ --pf-c-masthead--c-context-selector--m-full-height__toggle--BorderBottomColor: transparent;
16029
+ --pf-c-masthead--c-dropdown__toggle--before--BorderTopColor: var(--pf-c-masthead--item-border-color--base);
16030
+ --pf-c-masthead--c-dropdown__toggle--before--BorderRightColor: var(--pf-c-masthead--item-border-color--base);
16031
+ --pf-c-masthead--c-dropdown__toggle--before--BorderLeftColor: var(--pf-c-masthead--item-border-color--base);
16032
+ --pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderTopColor: transparent;
16033
+ --pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderBottomColor: transparent;
16034
+ --pf-c-masthead--c-menu-toggle--before--BorderTopColor: var(--pf-c-masthead--item-border-color--base);
16035
+ --pf-c-masthead--c-menu-toggle--before--BorderRightColor: var(--pf-c-masthead--item-border-color--base);
16036
+ --pf-c-masthead--c-menu-toggle--before--BorderLeftColor: var(--pf-c-masthead--item-border-color--base);
16037
+ --pf-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor: transparent;
16038
+ --pf-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor: transparent;
16016
16039
  --pf-c-masthead--c-toolbar__content--PaddingRight: 0;
16017
16040
  --pf-c-masthead--c-toolbar__content--PaddingLeft: 0;
16018
16041
  --pf-c-masthead--c-toolbar__expandable-content--PaddingTop: var(--pf-global--spacer--md);
@@ -16105,33 +16128,30 @@ ul.pf-c-list {
16105
16128
  .pf-c-masthead .pf-c-menu-toggle {
16106
16129
  --pf-c-menu-toggle--before--BorderTopColor: var(--pf-c-masthead--c-menu-toggle--before--BorderTopColor);
16107
16130
  --pf-c-menu-toggle--before--BorderRightColor: var(--pf-c-masthead--c-menu-toggle--before--BorderRightColor);
16108
- --pf-c-menu-toggle--before--BorderBottomColor: var(--pf-c-masthead--c-menu-toggle--before--BorderBottomColor);
16109
16131
  --pf-c-menu-toggle--before--BorderLeftColor: var(--pf-c-masthead--c-menu-toggle--before--BorderLeftColor);
16110
16132
  }
16111
16133
  .pf-c-masthead .pf-c-menu-toggle.pf-m-full-height {
16112
- --pf-c-menu-toggle--before--BorderRightColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderRightColor);
16113
- --pf-c-menu-toggle--before--BorderLeftColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderLeftColor);
16134
+ --pf-c-menu-toggle--before--BorderTopColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor);
16135
+ --pf-c-menu-toggle--before--BorderBottomColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor);
16114
16136
  }
16115
16137
  .pf-c-masthead .pf-c-context-selector {
16116
16138
  --pf-c-context-selector--Width: var(--pf-c-masthead--c-context-selector--Width);
16117
16139
  --pf-c-context-selector__toggle--BorderTopColor: var(--pf-c-masthead--c-context-selector__toggle--BorderTopColor);
16118
16140
  --pf-c-context-selector__toggle--BorderRightColor: var(--pf-c-masthead--c-context-selector__toggle--BorderRightColor);
16119
- --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-masthead--c-context-selector__toggle--BorderBottomColor);
16120
16141
  --pf-c-context-selector__toggle--BorderLeftColor: var(--pf-c-masthead--c-context-selector__toggle--BorderLeftColor);
16121
16142
  }
16122
16143
  .pf-c-masthead .pf-c-context-selector.pf-m-full-height {
16123
- --pf-c-context-selector__toggle--BorderRightColor: var(--pf-c-masthead--c-context-selector--m-full-height__toggle--BorderRightColor);
16124
- --pf-c-context-selector__toggle--BorderLeftColor: var(--pf-c-masthead--c-context-selector--m-full-height__toggle--BorderLeftColor);
16144
+ --pf-c-context-selector__toggle--BorderTopColor: var(--pf-c-masthead--c-context-selector--m-full-height__toggle--BorderTopColor);
16145
+ --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-masthead--c-context-selector--m-full-height__toggle--BorderBottomColor);
16125
16146
  }
16126
16147
  .pf-c-masthead .pf-c-dropdown {
16127
16148
  --pf-c-dropdown__toggle--before--BorderTopColor: var(--pf-c-masthead--c-dropdown__toggle--before--BorderTopColor);
16128
16149
  --pf-c-dropdown__toggle--before--BorderRightColor: var(--pf-c-masthead--c-dropdown__toggle--before--BorderRightColor);
16129
- --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-masthead--c-dropdown__toggle--before--BorderBottomColor);
16130
16150
  --pf-c-dropdown__toggle--before--BorderLeftColor: var(--pf-c-masthead--c-dropdown__toggle--before--BorderLeftColor);
16131
16151
  }
16132
16152
  .pf-c-masthead .pf-c-dropdown.pf-m-full-height {
16133
- --pf-c-dropdown__toggle--before--BorderRightColor: var(--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderRightColor);
16134
- --pf-c-dropdown__toggle--before--BorderLeftColor: var(--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderLeftColor);
16153
+ --pf-c-dropdown__toggle--before--BorderTopColor: var(--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderTopColor);
16154
+ --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderBottomColor);
16135
16155
  }
16136
16156
  .pf-c-masthead .pf-c-nav {
16137
16157
  align-self: stretch;
@@ -16639,6 +16659,7 @@ ul.pf-c-list {
16639
16659
  --pf-c-menu__item-description--FontSize: var(--pf-global--FontSize--xs);
16640
16660
  --pf-c-menu__item-description--Color: var(--pf-global--Color--200);
16641
16661
  --pf-c-menu__item-icon--MarginRight: var(--pf-global--spacer--sm);
16662
+ --pf-c-menu__item-check--MarginRight: var(--pf-global--spacer--sm);
16642
16663
  --pf-c-menu__item-toggle-icon--PaddingRight: var(--pf-global--spacer--sm);
16643
16664
  --pf-c-menu__item-toggle-icon--PaddingLeft: var(--pf-global--spacer--sm);
16644
16665
  --pf-c-menu__list-item--m-disabled__item-toggle-icon--Color: var(--pf-global--disabled-color--200);
@@ -17001,6 +17022,9 @@ ul.pf-c-list {
17001
17022
  .pf-c-menu__item.pf-m-selected .pf-c-menu__item-select-icon {
17002
17023
  opacity: 1;
17003
17024
  }
17025
+ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
17026
+ cursor: pointer;
17027
+ }
17004
17028
 
17005
17029
  .pf-c-menu__item-main {
17006
17030
  display: flex;
@@ -17045,6 +17069,12 @@ ul.pf-c-list {
17045
17069
  margin-right: var(--pf-c-menu__item-icon--MarginRight);
17046
17070
  }
17047
17071
 
17072
+ .pf-c-menu__item-check {
17073
+ display: flex;
17074
+ align-items: center;
17075
+ margin-right: var(--pf-c-menu__item-check--MarginRight);
17076
+ }
17077
+
17048
17078
  .pf-c-menu__item-toggle-icon {
17049
17079
  padding-right: var(--pf-c-menu__item-toggle-icon--PaddingRight);
17050
17080
  padding-left: var(--pf-c-menu__item-toggle-icon--PaddingLeft);
@@ -17193,6 +17223,33 @@ ul.pf-c-list {
17193
17223
  --pf-c-menu-toggle--m-full-height--hover--after--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
17194
17224
  --pf-c-menu-toggle--m-full-height--focus--after--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
17195
17225
  --pf-c-menu-toggle--m-full-height--active--after--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
17226
+ --pf-c-menu-toggle--m-split-button--BackgroundColor: var(--pf-global--BackgroundColor--100);
17227
+ --pf-c-menu-toggle--m-split-button--child--BackgroundColor: var(--pf-global--BackgroundColor--100);
17228
+ --pf-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-global--Color--dark-200);
17229
+ --pf-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
17230
+ --pf-c-menu-toggle--m-split-button--first-child--PaddingRight: var(--pf-global--spacer--sm);
17231
+ --pf-c-menu-toggle--m-split-button--last-child--PaddingLeft: 0;
17232
+ --pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
17233
+ --pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor: var(--pf-global--BorderColor--300);
17234
+ --pf-c-menu-toggle--m-split-button--m-action--child--after--Left: 0;
17235
+ --pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
17236
+ --pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomColor: var(--pf-global--BorderColor--200);
17237
+ --pf-c-menu-toggle--m-split-button--m-action--child--hover--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
17238
+ --pf-c-menu-toggle--m-split-button--m-action--child--hover--after--BorderBottomColor: var(--pf-global--active-color--100);
17239
+ --pf-c-menu-toggle--m-split-button--m-action--child--focus--after--BorderBottomWidth: var(--pf-global--BorderWidth--md);
17240
+ --pf-c-menu-toggle--m-split-button--m-action--child--focus--after--BorderBottomColor: var(--pf-global--active-color--100);
17241
+ --pf-c-menu-toggle--m-split-button--m-action--child--active--after--BorderBottomWidth: var(--pf-global--BorderWidth--md);
17242
+ --pf-c-menu-toggle--m-split-button--m-action--child--active--after--BorderBottomColor: var(--pf-global--active-color--100);
17243
+ --pf-c-menu-toggle--m-split-button--m-action--child--BorderRadius: var(--pf-global--BorderRadius--sm);
17244
+ --pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--pf-global--primary-color--100);
17245
+ --pf-c-menu-toggle--m-split-button--m-action--m-primary--child--hover--BackgroundColor: var(--pf-global--primary-color--200);
17246
+ --pf-c-menu-toggle--m-split-button--m-action--m-primary--child--focus--BackgroundColor: var(--pf-global--primary-color--200);
17247
+ --pf-c-menu-toggle--m-split-button--m-action--m-primary--child--active--BackgroundColor: var(--pf-global--primary-color--200);
17248
+ --pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BorderLeftColor: var(--pf-global--primary-color--200);
17249
+ --pf-c-menu-toggle--m-split-button--m-action--m-primary--m-expanded--child--BackgroundColor: var(--pf-global--primary-color--200);
17250
+ --pf-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor: var(--pf-global--primary-color--100);
17251
+ --pf-c-menu-toggle__button__controls--MarginRight: var(--pf-global--spacer--sm);
17252
+ --pf-c-menu-toggle__button__controls--MarginLeft: var(--pf-global--spacer--sm);
17196
17253
  position: relative;
17197
17254
  display: inline-flex;
17198
17255
  align-items: center;
@@ -17269,34 +17326,32 @@ ul.pf-c-list {
17269
17326
  --pf-c-menu-toggle__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain__toggle-icon--Color);
17270
17327
  }
17271
17328
  .pf-c-menu-toggle.pf-m-plain:not(.pf-m-text) {
17272
- --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-plain--Color);
17273
- --pf-c-menu-toggle--hover--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
17274
- --pf-c-menu-toggle--focus--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
17275
- --pf-c-menu-toggle--active--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
17276
- --pf-c-menu-toggle--disabled--Color: var(--pf-c-menu-toggle--m-plain--disabled--Color);
17277
17329
  --pf-c-menu-toggle--PaddingRight: var(--pf-c-menu-toggle--m-plain--PaddingRight);
17278
17330
  --pf-c-menu-toggle--PaddingLeft: var(--pf-c-menu-toggle--m-plain--PaddingLeft);
17279
17331
  --pf-c-menu-toggle--disabled--BackgroundColor: transparent;
17280
- --pf-c-menu-toggle--m-expanded--Color: var(--pf-c-menu-toggle--m-plain--m-expanded--Color);
17281
17332
  display: inline-block;
17333
+ color: var(--pf-c-menu-toggle--m-plain--Color);
17282
17334
  }
17283
17335
  .pf-c-menu-toggle:hover {
17284
17336
  --pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--hover--BackgroundColor);
17285
17337
  --pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--hover--after--BorderBottomWidth);
17286
17338
  --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--hover--after--BorderBottomColor);
17287
17339
  --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--hover__toggle-icon--Color);
17340
+ --pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
17288
17341
  }
17289
17342
  .pf-c-menu-toggle:focus {
17290
17343
  --pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--focus--BackgroundColor);
17291
17344
  --pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--focus--after--BorderBottomWidth);
17292
17345
  --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--focus--after--BorderBottomColor);
17293
17346
  --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--focus__toggle-icon--Color);
17347
+ --pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--focus--Color);
17294
17348
  }
17295
17349
  .pf-c-menu-toggle:active {
17296
17350
  --pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--active--BackgroundColor);
17297
17351
  --pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--active--after--BorderBottomWidth);
17298
17352
  --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--active--after--BorderBottomColor);
17299
17353
  --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--active__toggle-icon--Color);
17354
+ --pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--active--Color);
17300
17355
  }
17301
17356
  .pf-c-menu-toggle.pf-m-expanded {
17302
17357
  --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-expanded--Color);
@@ -17304,10 +17359,12 @@ ul.pf-c-list {
17304
17359
  --pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--m-expanded--after--BorderBottomWidth);
17305
17360
  --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--m-expanded--after--BorderBottomColor);
17306
17361
  --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--m-expanded__toggle-icon--Color);
17362
+ --pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--m-expanded--Color);
17307
17363
  }
17308
- .pf-c-menu-toggle:disabled {
17364
+ .pf-c-menu-toggle:disabled, .pf-c-menu-toggle.pf-m-disabled {
17309
17365
  --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--disabled--Color);
17310
17366
  --pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--disabled--BackgroundColor);
17367
+ --pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--disabled--Color);
17311
17368
  pointer-events: none;
17312
17369
  }
17313
17370
  .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 {
@@ -17323,6 +17380,113 @@ ul.pf-c-list {
17323
17380
  --pf-c-menu-toggle--active--after--BorderBottomWidth: var(--pf-c-menu-toggle--m-full-height--active--after--BorderBottomWidth);
17324
17381
  height: 100%;
17325
17382
  }
17383
+ .pf-c-menu-toggle.pf-m-split-button {
17384
+ --pf-c-menu-toggle__toggle-icon--MarginRight: 0;
17385
+ padding: 0;
17386
+ }
17387
+ .pf-c-menu-toggle.pf-m-split-button > * {
17388
+ position: relative;
17389
+ 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);
17390
+ }
17391
+ .pf-c-menu-toggle.pf-m-split-button > *:first-child {
17392
+ padding-right: var(--pf-c-menu-toggle--m-split-button--first-child--PaddingRight);
17393
+ }
17394
+ .pf-c-menu-toggle.pf-m-split-button:where(:not(.pf-m-action)) > :last-child {
17395
+ padding-left: var(--pf-c-menu-toggle--m-split-button--last-child--PaddingLeft);
17396
+ }
17397
+ .pf-c-menu-toggle.pf-m-split-button > .pf-c-check {
17398
+ --pf-c-menu-toggle--PaddingRight: 0;
17399
+ --pf-c-check__input--MarginTop: 0;
17400
+ --pf-c-check__label--Color: var(--pf-c-check__label--Color, inherit);
17401
+ align-items: center;
17402
+ align-self: stretch;
17403
+ }
17404
+ .pf-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *::after {
17405
+ position: absolute;
17406
+ top: 0;
17407
+ right: 0;
17408
+ bottom: 0;
17409
+ left: var(--pf-c-menu-toggle--m-split-button--m-action--child--after--Left);
17410
+ pointer-events: none;
17411
+ content: "";
17412
+ 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);
17413
+ }
17414
+ .pf-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *:hover {
17415
+ --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);
17416
+ --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);
17417
+ }
17418
+ .pf-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *:focus {
17419
+ --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);
17420
+ --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);
17421
+ }
17422
+ .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 {
17423
+ --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);
17424
+ --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);
17425
+ }
17426
+ .pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary {
17427
+ --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);
17428
+ --pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth: 0;
17429
+ }
17430
+ .pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary > :where(:not(.pf-m-disabled):not([disabled])) {
17431
+ background-color: var(--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor);
17432
+ }
17433
+ .pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary > :where(:not(.pf-m-disabled):not([disabled])):hover {
17434
+ --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);
17435
+ }
17436
+ .pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary > :where(:not(.pf-m-disabled):not([disabled])):focus {
17437
+ --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);
17438
+ }
17439
+ .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 {
17440
+ --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);
17441
+ }
17442
+ .pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary.pf-m-expanded {
17443
+ --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);
17444
+ }
17445
+ .pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-secondary {
17446
+ --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);
17447
+ }
17448
+ .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 {
17449
+ --pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth: 0;
17450
+ }
17451
+ .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 {
17452
+ border-top-left-radius: var(--pf-c-menu-toggle--m-split-button--m-action--child--BorderRadius);
17453
+ border-bottom-left-radius: var(--pf-c-menu-toggle--m-split-button--m-action--child--BorderRadius);
17454
+ }
17455
+ .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 {
17456
+ border-top-right-radius: var(--pf-c-menu-toggle--m-split-button--m-action--child--BorderRadius);
17457
+ border-bottom-right-radius: var(--pf-c-menu-toggle--m-split-button--m-action--child--BorderRadius);
17458
+ }
17459
+ .pf-c-menu-toggle.pf-m-split-button.pf-m-action > :not(:first-child) {
17460
+ --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);
17461
+ 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);
17462
+ }
17463
+ .pf-c-menu-toggle.pf-m-split-button.pf-m-action:not(.pf-m-expanded) {
17464
+ --pf-c-menu-toggle--after--BorderBottomColor: transparent;
17465
+ }
17466
+ .pf-c-menu-toggle.pf-m-split-button.pf-m-disabled, .pf-c-menu-toggle.pf-m-split-button:disabled {
17467
+ --pf-c-menu-toggle--m-split-button--child--BackgroundColor: var(--pf-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
17468
+ --pf-c-menu-toggle--m-split-button--child--Color: var(--pf-c-menu-toggle--m-split-button--child--disabled--Color);
17469
+ --pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor: transparent;
17470
+ }
17471
+ .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 {
17472
+ content: none;
17473
+ }
17474
+ .pf-c-menu-toggle.pf-m-split-button > .pf-m-disabled,
17475
+ .pf-c-menu-toggle.pf-m-split-button > :disabled {
17476
+ --pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor: transparent;
17477
+ color: var(--pf-c-menu-toggle--m-split-button--child--disabled--Color);
17478
+ background-color: var(--pf-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
17479
+ }
17480
+
17481
+ .pf-c-menu-toggle__button {
17482
+ color: inherit;
17483
+ border: 0;
17484
+ }
17485
+ .pf-c-menu-toggle__button .pf-c-menu-toggle__controls {
17486
+ padding-left: 0;
17487
+ margin-right: var(--pf-c-menu-toggle__button__controls--MarginRight);
17488
+ margin-left: var(--pf-c-menu-toggle__button__controls--MarginLeft);
17489
+ }
17326
17490
 
17327
17491
  .pf-c-menu-toggle__icon {
17328
17492
  display: inline-flex;