Examples
Props
MenuToggle
Name | Type | Default | Description |
---|---|---|---|
badge | BadgeProps | React.ReactNode | Optional badge rendered inside the toggle, after the children content | |
children | React.ReactNode | Content rendered inside the toggle | |
className | string | Additional classes added to the toggle | |
icon | React.ReactNode | Optional icon rendered inside the toggle, before the children content | |
innerRef | React.Ref<MenuToggleElement> | Forwarded ref | |
isDisabled | boolean | Flag indicating the toggle is disabled | |
isExpanded | boolean | Flag indicating the toggle has expanded styling | |
isFullHeight | boolean | Flag indicating the toggle is full height | |
isFullWidth | boolean | Flag indicating the toggle takes up the full width of its parent | |
splitButtonOptions | SplitButtonOptions | Object used to configure a split button menu toggle | |
variant | 'default' | 'plain' | 'primary' | 'plainText' | 'secondary' | 'typeahead' | Variant styles of the menu toggle |
MenuToggleAction
Name | Type | Default | Description |
---|---|---|---|
children | React.ReactNode | Element to be rendered inside the <button> | |
className | string | '' | Additional classes added to the MenuToggleAction |
id | string | Id of the action button | |
isDisabled | boolean | false | Flag to show if the action button is disabled |
onClick | (event: React.MouseEvent<HTMLButtonElement>) => void | () => {} | A callback for when the action button is clicked |
MenuToggleCheckbox
Name | Type | Default | Description |
---|---|---|---|
idrequired | string | Id of the checkbox | |
children | React.ReactNode | Element to be rendered inside the <span> | |
className | string | Additional classes added to the MenuToggleCheckbox | |
defaultChecked | boolean | null | Flag to set the default checked value of the checkbox when it is uncontrolled by React state. To make the checkbox controlled instead use the isChecked prop, but do not use both. | |
isChecked | boolean | null | Flag to show if the checkbox is checked when it is controlled by React state. To make the checkbox uncontrolled instead use the defaultChecked prop, but do not use both. | |
isDisabled | boolean | false | Flag to show if the checkbox is disabled |
isValid | boolean | true | Flag to show if the checkbox selection is valid or invalid |
onChange | (checked: boolean, event: React.FormEvent<HTMLInputElement>) => void | () => undefined as any | A callback for when the checkbox selection changes |
ouiaId | number | string | Value to overwrite the randomly generated data-ouia-component-id. | |
ouiaSafe | boolean | Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. |
SplitButtonOptions
Name | Type | Default | Description |
---|---|---|---|
itemsrequired | React.ReactNode[] | Elements to display before the toggle button. When included, renders the menu toggle as a split button. | |
variant | 'action' | 'checkbox' | Variant of split button toggle |
CSS variables
.pf-c-menu-toggle | --pf-c-menu-toggle--BorderRadius | 0 | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--PaddingTop | 0.375rem | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--PaddingRight | 0.5rem | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--PaddingBottom | 0.375rem | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--PaddingLeft | 0.5rem | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--FontSize | 1rem | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--Color | #151515 | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--LineHeight | 1.5 | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--BackgroundColor | transparent | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--before--BorderTopWidth | 1px | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--before--BorderRightWidth | 1px | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--before--BorderBottomWidth | 0 | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--before--BorderLeftWidth | 1px | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--before--BorderTopColor | #f0f0f0 | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--before--BorderRightColor | #f0f0f0 | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--before--BorderBottomColor | transparent | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--before--BorderLeftColor | #f0f0f0 | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--after--BorderBottomWidth | 1px | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--after--BorderBottomColor | #8a8d90 | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--hover--BackgroundColor | transparent | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--hover--after--BorderBottomWidth | 1px | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--hover--after--BorderBottomColor | #06c | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--focus--BackgroundColor | transparent | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--focus--after--BorderBottomWidth | 2px | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--focus--after--BorderBottomColor | #06c | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--active--BackgroundColor | transparent | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--active--after--BorderBottomWidth | 2px | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--active--after--BorderBottomColor | #06c | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-expanded--Color | #151515 | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-expanded--BackgroundColor | transparent | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-expanded--after--BorderBottomWidth | 2px | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-expanded--after--BorderBottomColor | #06c | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--disabled--Color | #6a6e73 | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--disabled--BackgroundColor | #f0f0f0 | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-primary--Color | #fff | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-primary--BorderRadius | 3px | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-primary--BackgroundColor | #06c | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-primary--hover--BackgroundColor | #004080 | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-primary--focus--BackgroundColor | #004080 | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-primary--active--BackgroundColor | #004080 | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-primary--m-expanded--BackgroundColor | #004080 | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-primary--m-expanded--Color | #fff | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-secondary--Color | #06c | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-secondary--BorderRadius | 3px | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-secondary--BackgroundColor | transparent | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-secondary--before--BorderWidth | 1px | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-secondary--hover--before--BorderWidth | 2px | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-secondary--focus--before--BorderWidth | 2px | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-secondary--active--before--BorderWidth | 2px | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-secondary--before--BorderColor | #06c | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-secondary--hover--before--BorderColor | #06c | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-secondary--focus--before--BorderColor | #06c | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-secondary--active--before--BorderColor | #06c | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-secondary--m-expanded--Color | #06c | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderColor | #06c | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderWidth | 2px | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-plain--Color | #6a6e73 | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-plain--PaddingRight | 1rem | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-plain--PaddingLeft | 1rem | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-plain--hover--Color | #151515 | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-plain--focus--Color | #151515 | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-plain--active--Color | #151515 | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-plain--disabled--Color | #d2d2d2 | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-plain--m-expanded--Color | #151515 | ||
.pf-c-menu-toggle | --pf-c-menu-toggle__icon--MarginRight | 0.5rem | ||
.pf-c-menu-toggle | --pf-c-menu-toggle__count--MarginLeft | 0.5rem | ||
.pf-c-menu-toggle | --pf-c-menu-toggle__controls--PaddingLeft | 1rem | ||
.pf-c-menu-toggle | --pf-c-menu-toggle__controls--MarginLeft | auto | ||
.pf-c-menu-toggle | --pf-c-menu-toggle__controls--MarginRight | 0 | ||
.pf-c-menu-toggle | --pf-c-menu-toggle__toggle-icon--MarginRight | 0.5rem | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-plain__toggle-icon--Color | #6a6e73 | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-plain--hover__toggle-icon--Color | #151515 | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-plain--active__toggle-icon--Color | #151515 | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-plain--focus__toggle-icon--Color | #151515 | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-plain--m-expanded__toggle-icon--Color | #151515 | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-full-height--PaddingRight | 1.5rem | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-full-height--PaddingLeft | 1.5rem | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-full-height__toggle--before--BorderTopWidth | 0 | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-full-height--m-expanded--after--BorderBottomWidth | 4px | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-full-height--hover--after--BorderBottomWidth | 4px | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-full-height--focus--after--BorderBottomWidth | 4px | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-full-height--active--after--BorderBottomWidth | 4px | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-split-button--BackgroundColor | #fff | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-split-button--child--BackgroundColor | #fff | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-split-button--child--disabled--Color | #6a6e73 | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-split-button--child--disabled--BackgroundColor | #f0f0f0 | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-split-button--first-child--PaddingRight | 0.5rem | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-split-button--last-child--PaddingLeft | 0 | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftWidth | 1px | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor | #f0f0f0 | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-split-button--m-action--child--after--Left | 0 | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth | 1px | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomColor | #8a8d90 | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-split-button--m-action--child--hover--after--BorderBottomWidth | 1px | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-split-button--m-action--child--hover--after--BorderBottomColor | #06c | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-split-button--m-action--child--focus--after--BorderBottomWidth | 2px | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-split-button--m-action--child--focus--after--BorderBottomColor | #06c | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-split-button--m-action--child--active--after--BorderBottomWidth | 2px | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-split-button--m-action--child--active--after--BorderBottomColor | #06c | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-split-button--m-action--child--BorderRadius | 3px | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor | #06c | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-split-button--m-action--m-primary--child--hover--BackgroundColor | #004080 | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-split-button--m-action--m-primary--child--focus--BackgroundColor | #004080 | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-split-button--m-action--m-primary--child--active--BackgroundColor | #004080 | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BorderLeftColor | #004080 | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-split-button--m-action--m-primary--m-expanded--child--BackgroundColor | #004080 | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor | #06c | ||
.pf-c-menu-toggle | --pf-c-menu-toggle__button__controls--MarginRight | 0.5rem | ||
.pf-c-menu-toggle | --pf-c-menu-toggle__button__controls--MarginLeft | 0.5rem | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-typeahead__controls--MarginRight | 1rem | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-typeahead__controls--MarginLeft | 0.5rem | ||
.pf-c-menu-toggle | --pf-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight | 0.5rem | ||
.pf-c-menu-toggle.pf-m-primary | --pf-c-menu-toggle--BorderRadius | 3px | ||
.pf-c-menu-toggle.pf-m-primary | --pf-c-menu-toggle--Color | #fff | ||
.pf-c-menu-toggle.pf-m-primary | --pf-c-menu-toggle--BackgroundColor | #06c | ||
.pf-c-menu-toggle.pf-m-primary | --pf-c-menu-toggle--hover--BackgroundColor | #004080 | ||
.pf-c-menu-toggle.pf-m-primary | --pf-c-menu-toggle--focus--BackgroundColor | #004080 | ||
.pf-c-menu-toggle.pf-m-primary | --pf-c-menu-toggle--active--BackgroundColor | #004080 | ||
.pf-c-menu-toggle.pf-m-primary | --pf-c-menu-toggle--m-expanded--Color | #fff | ||
.pf-c-menu-toggle.pf-m-primary | --pf-c-menu-toggle--m-expanded--BackgroundColor | #004080 | ||
.pf-c-menu-toggle.pf-m-secondary | --pf-c-menu-toggle--Color | #06c | ||
.pf-c-menu-toggle.pf-m-secondary | --pf-c-menu-toggle--m-expanded--Color | #06c | ||
.pf-c-menu-toggle.pf-m-secondary:hover | --pf-c-menu-toggle--m-secondary--before--BorderColor | #06c | ||
.pf-c-menu-toggle.pf-m-secondary:hover | --pf-c-menu-toggle--m-secondary--before--BorderWidth | 2px | ||
.pf-c-menu-toggle.pf-m-secondary:focus | --pf-c-menu-toggle--m-secondary--before--BorderColor | #06c | ||
.pf-c-menu-toggle.pf-m-secondary:focus | --pf-c-menu-toggle--m-secondary--before--BorderWidth | 2px | ||
.pf-c-menu-toggle.pf-m-secondary:active | --pf-c-menu-toggle--m-secondary--before--BorderColor | #06c | ||
.pf-c-menu-toggle.pf-m-secondary:active | --pf-c-menu-toggle--m-secondary--before--BorderWidth | 2px | ||
.pf-c-menu-toggle.pf-m-secondary.pf-m-expanded | --pf-c-menu-toggle--m-secondary--before--BorderColor | #06c | ||
.pf-c-menu-toggle.pf-m-secondary.pf-m-expanded | --pf-c-menu-toggle--m-secondary--before--BorderWidth | 2px | ||
.pf-c-menu-toggle.pf-m-plain | --pf-c-menu-toggle__toggle-icon--Color | #6a6e73 | ||
.pf-c-menu-toggle.pf-m-plain:not(.pf-m-text) | --pf-c-menu-toggle--PaddingRight | 1rem | ||
.pf-c-menu-toggle.pf-m-plain:not(.pf-m-text) | --pf-c-menu-toggle--PaddingLeft | 1rem | ||
.pf-c-menu-toggle.pf-m-plain:not(.pf-m-text) | --pf-c-menu-toggle--disabled--BackgroundColor | transparent | ||
.pf-c-menu-toggle:hover | --pf-c-menu-toggle--BackgroundColor | transparent | ||
.pf-c-menu-toggle:hover | --pf-c-menu-toggle--after--BorderBottomWidth | 1px | ||
.pf-c-menu-toggle:hover | --pf-c-menu-toggle--after--BorderBottomColor | #06c | ||
.pf-c-menu-toggle:hover | --pf-c-menu-toggle--m-plain__toggle-icon--Color | #151515 | ||
.pf-c-menu-toggle:hover | --pf-c-menu-toggle--m-plain--Color | #151515 | ||
.pf-c-menu-toggle:focus | --pf-c-menu-toggle--BackgroundColor | transparent | ||
.pf-c-menu-toggle:focus | --pf-c-menu-toggle--after--BorderBottomWidth | 2px | ||
.pf-c-menu-toggle:focus | --pf-c-menu-toggle--after--BorderBottomColor | #06c | ||
.pf-c-menu-toggle:focus | --pf-c-menu-toggle--m-plain__toggle-icon--Color | #151515 | ||
.pf-c-menu-toggle:focus | --pf-c-menu-toggle--m-plain--Color | #151515 | ||
.pf-c-menu-toggle:active | --pf-c-menu-toggle--BackgroundColor | transparent | ||
.pf-c-menu-toggle:active | --pf-c-menu-toggle--after--BorderBottomWidth | 2px | ||
.pf-c-menu-toggle:active | --pf-c-menu-toggle--after--BorderBottomColor | #06c | ||
.pf-c-menu-toggle:active | --pf-c-menu-toggle--m-plain__toggle-icon--Color | #151515 | ||
.pf-c-menu-toggle:active | --pf-c-menu-toggle--m-plain--Color | #151515 | ||
.pf-c-menu-toggle.pf-m-expanded | --pf-c-menu-toggle--Color | #151515 | ||
.pf-c-menu-toggle.pf-m-expanded | --pf-c-menu-toggle--BackgroundColor | transparent | ||
.pf-c-menu-toggle.pf-m-expanded | --pf-c-menu-toggle--after--BorderBottomWidth | 2px | ||
.pf-c-menu-toggle.pf-m-expanded | --pf-c-menu-toggle--after--BorderBottomColor | #06c | ||
.pf-c-menu-toggle.pf-m-expanded | --pf-c-menu-toggle--m-plain__toggle-icon--Color | #151515 | ||
.pf-c-menu-toggle.pf-m-expanded | --pf-c-menu-toggle--m-plain--Color | #151515 | ||
.pf-c-menu-toggle:disabled | --pf-c-menu-toggle--Color | #6a6e73 | ||
.pf-c-menu-toggle:disabled | --pf-c-menu-toggle--BackgroundColor | #f0f0f0 | ||
.pf-c-menu-toggle:disabled | --pf-c-menu-toggle--m-plain--Color | #d2d2d2 | ||
.pf-c-menu-toggle.pf-m-full-height | --pf-c-menu-toggle--PaddingRight | 1.5rem | ||
.pf-c-menu-toggle.pf-m-full-height | --pf-c-menu-toggle--PaddingLeft | 1.5rem | ||
.pf-c-menu-toggle.pf-m-full-height | --pf-c-menu-toggle--before--BorderTopWidth | 0 | ||
.pf-c-menu-toggle.pf-m-full-height | --pf-c-menu-toggle--m-expanded--after--BorderBottomWidth | 4px | ||
.pf-c-menu-toggle.pf-m-full-height | --pf-c-menu-toggle--hover--after--BorderBottomWidth | 4px | ||
.pf-c-menu-toggle.pf-m-full-height | --pf-c-menu-toggle--focus--after--BorderBottomWidth | 4px | ||
.pf-c-menu-toggle.pf-m-full-height | --pf-c-menu-toggle--active--after--BorderBottomWidth | 4px | ||
.pf-c-menu-toggle.pf-m-typeahead | --pf-c-menu-toggle__button__controls--MarginRight | 1rem | ||
.pf-c-menu-toggle.pf-m-typeahead | --pf-c-menu-toggle__button__controls--MarginLeft | 0.5rem | ||
.pf-c-menu-toggle.pf-m-typeahead | --pf-c-menu-toggle__toggle-icon--MarginRight | 0 | ||
.pf-c-menu-toggle.pf-m-typeahead .pf-c-text-input-group | --pf-c-text-input-group__utilities--c-button--PaddingRight | 0.5rem | ||
.pf-c-menu-toggle.pf-m-typeahead .pf-c-text-input-group | --pf-c-text-input-group__utilities--MarginRight | 0 | ||
.pf-c-menu-toggle.pf-m-split-button > .pf-c-check | --pf-c-menu-toggle--PaddingRight | 0 | ||
.pf-c-menu-toggle.pf-m-split-button > .pf-c-check | --pf-c-check__input--MarginTop | 0 | ||
.pf-c-menu-toggle.pf-m-split-button > .pf-c-check | --pf-c-check__label--Color | currentcolor | ||
.pf-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *:hover | --pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth | 1px | ||
.pf-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *:hover | --pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomColor | #06c | ||
.pf-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *:focus | --pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth | 2px | ||
.pf-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *:focus | --pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomColor | #06c | ||
.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--m-split-button--m-action--child--after--BorderBottomWidth | 2px | ||
.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--m-split-button--m-action--child--after--BorderBottomColor | #06c | ||
.pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary | --pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor | #004080 | ||
.pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary | --pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth | 0 | ||
.pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary > :where(:not(.pf-m-disabled):not([disabled])):hover | --pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor | #004080 | ||
.pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary > :where(:not(.pf-m-disabled):not([disabled])):focus | --pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor | #004080 | ||
.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--m-split-button--m-action--m-primary--child--BackgroundColor | #004080 | ||
.pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary.pf-m-expanded | --pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor | #004080 | ||
.pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-secondary | --pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor | #06c | ||
.pf-c-menu-toggle.pf-m-split-button.pf-m-action > :not(:first-child) | --pf-c-menu-toggle--m-split-button--m-action--child--after--Left | calc(1px * -1) | ||
.pf-c-menu-toggle.pf-m-split-button.pf-m-action:not(.pf-m-expanded) | --pf-c-menu-toggle--after--BorderBottomColor | transparent | ||
.pf-c-menu-toggle.pf-m-split-button.pf-m-disabled | --pf-c-menu-toggle--m-split-button--child--BackgroundColor | #f0f0f0 | ||