Warning alert:Deprecated feature
This implementation has been deprecated in favor of a newer implementation, and is no longer getting maintained or enhanced. To learn more about the process, visit our about page.
Examples
Documentation
Accessibility
This section to be updated once the React implementation is complete.
Attribute | Applied to | Outcome |
|---|---|---|
role or aria | pf-v5-c-options-menu | accessibility notes. |
disabled | .pf-v5-c-options-menu__toggle, .pf-v5-c-options-menu__toggle-button | Disables the options menu toggle and toggle button and removes it from keyboard focus. |
Note: The attribute aria-selected="true" should be set programmatically to the selected item(s).
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-v5-c-options-menu | <div> | Initiates a custom options menu. |
.pf-v5-c-options-menu__toggle | <button> | Initiates a custom toggle. |
.pf-v5-c-options-menu__toggle-text | <span> | Initiates a wrapper for toggle text. |
.pf-v5-c-options-menu__toggle-icon | <i> | Initiates the up/down arrow beside toggle text. |
.pf-v5-c-options-menu__toggle-button | <button> | Initiates a custom toggle button for use when .pf-v5-c-options-menu__toggle is a <div> or non-interactive element. |
.pf-v5-c-options-menu__menu | <ul> | Initiates the custom options-menu menu. |
.pf-v5-c-options-menu__menu-item | <li> | Initiates the items in the custom options-menu menu. |
.pf-v5-c-options-menu__menu-item-icon | <i> | Initiates the icon to indicate selected menu items. |
.pf-v5-c-options-menu__group | <section> | Defines a group of items in an options menu. Required when there is more than one group in an options menu. |
.pf-v5-c-options-menu__group-title | <h1> | Defines the title for a group of items in an options menu. |
.pf-m-top | .pf-v5-c-options-menu | Modifies to display the menu above the toggle. |
.pf-m-align-right | .pf-v5-c-options-menu__menu | Modifies to display the menu aligned to the right edge of the toggle |
.pf-m-expanded | .pf-v5-c-options-menu | Modifies for the expanded state. |
.pf-m-static | .pf-v5-c-options-menu__menu | Modifies the menu to be statically positioned to support custom positioning. |
.pf-m-plain | .pf-v5-c-options-menu__toggle | Modifies to display the toggle with no border. Note: Can be combined with .pf-m-text to create a normal text toggle with no border. |
.pf-m-disabled | .pf-v5-c-options-menu__toggle | Modifies to display the options menu toggle as disabled. This applies to pf-v5-c-options-menu__toggle and should not be used in lieu of the disabled attribute on pf-v5-c-options-menu__toggle. When this is used, disabled should also be added to any form elements in .pf-v5-c-options-menu__toggle |
.pf-m-text | .pf-v5-c-options-menu__toggle | For use when the .pf-v5-c-options-menu__toggle is a <div> or some non-interactive elment, and you're using a custom .pf-v5-c-options-menu__toggle-button to toggle the options menu. |
.pf-m-active | .pf-v5-c-options-menu__toggle | Forces display of the active state of the toggle. |
.pf-m-selected | .pf-v5-c-options-menu__menu-item | Modifies the menu item for the selected state. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__toggle--BackgroundColor | transparent | ||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__toggle--PaddingTop | 0.375rem | ||
--pf-v5-c-options-menu__toggle--PaddingTop --pf-v5-global--spacer--form-element $pf-v5-global--spacer--form-element pf-size-prem(6px) 0.375rem | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__toggle--PaddingRight | 0.5rem | ||
--pf-v5-c-options-menu__toggle--PaddingRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__toggle--PaddingBottom | 0.375rem | ||
--pf-v5-c-options-menu__toggle--PaddingBottom --pf-v5-global--spacer--form-element $pf-v5-global--spacer--form-element pf-size-prem(6px) 0.375rem | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__toggle--PaddingLeft | 0.5rem | ||
--pf-v5-c-options-menu__toggle--PaddingLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__toggle--ColumnGap | 0.5rem | ||
--pf-v5-c-options-menu__toggle--ColumnGap --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__toggle--MinWidth | 0 | ||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__toggle--BorderWidth | 1px | ||
--pf-v5-c-options-menu__toggle--BorderWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__toggle--BorderTopColor | #f0f0f0 | ||
--pf-v5-c-options-menu__toggle--BorderTopColor --pf-v5-global--BorderColor--300 $pf-v5-global--BorderColor--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__toggle--BorderRightColor | #f0f0f0 | ||
--pf-v5-c-options-menu__toggle--BorderRightColor --pf-v5-global--BorderColor--300 $pf-v5-global--BorderColor--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__toggle--BorderBottomColor | #8a8d90 | ||
--pf-v5-c-options-menu__toggle--BorderBottomColor --pf-v5-global--BorderColor--200 $pf-v5-global--BorderColor--200 $pf-v5-color-black-500 #8a8d90 | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__toggle--BorderLeftColor | #f0f0f0 | ||
--pf-v5-c-options-menu__toggle--BorderLeftColor --pf-v5-global--BorderColor--300 $pf-v5-global--BorderColor--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__toggle--Color | #151515 | ||
--pf-v5-c-options-menu__toggle--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__toggle--hover--BorderBottomColor | #06c | ||
--pf-v5-c-options-menu__toggle--hover--BorderBottomColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__toggle--active--BorderBottomWidth | 2px | ||
--pf-v5-c-options-menu__toggle--active--BorderBottomWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__toggle--active--BorderBottomColor | #06c | ||
--pf-v5-c-options-menu__toggle--active--BorderBottomColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__toggle--focus--BorderBottomWidth | 2px | ||
--pf-v5-c-options-menu__toggle--focus--BorderBottomWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__toggle--focus--BorderBottomColor | #06c | ||
--pf-v5-c-options-menu__toggle--focus--BorderBottomColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__toggle--expanded--BorderBottomWidth | 2px | ||
--pf-v5-c-options-menu__toggle--expanded--BorderBottomWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__toggle--expanded--BorderBottomColor | #06c | ||
--pf-v5-c-options-menu__toggle--expanded--BorderBottomColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__toggle--disabled--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-options-menu__toggle--disabled--BackgroundColor --pf-v5-global--disabled-color--300 $pf-v5-global--disabled-color--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__toggle--m-plain--Color | #6a6e73 | ||
--pf-v5-c-options-menu__toggle--m-plain--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__toggle--m-plain--hover--Color | #151515 | ||
--pf-v5-c-options-menu__toggle--m-plain--hover--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__toggle--m-plain--disabled--Color | #d2d2d2 | ||
--pf-v5-c-options-menu__toggle--m-plain--disabled--Color --pf-v5-global--disabled-color--200 $pf-v5-global--disabled-color--200 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__toggle--m-plain--PaddingRight | 1rem | ||
--pf-v5-c-options-menu__toggle--m-plain--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__toggle--m-plain--PaddingLeft | 1rem | ||
--pf-v5-c-options-menu__toggle--m-plain--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__toggle-icon--PaddingRight | 0.5rem | ||
--pf-v5-c-options-menu__toggle-icon--PaddingRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__toggle-icon--PaddingLeft | 0.5rem | ||
--pf-v5-c-options-menu__toggle-icon--PaddingLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu--m-top--m-expanded__toggle-icon--Rotate | 180deg | ||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu--m-plain__toggle-icon--Color | #6a6e73 | ||
--pf-v5-c-options-menu--m-plain__toggle-icon--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu--m-plain--hover__toggle-icon--Color | #151515 | ||
--pf-v5-c-options-menu--m-plain--hover__toggle-icon--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__toggle-button--BackgroundColor | transparent | ||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__toggle-button--PaddingTop | 0.375rem | ||
--pf-v5-c-options-menu__toggle-button--PaddingTop --pf-v5-global--spacer--form-element $pf-v5-global--spacer--form-element pf-size-prem(6px) 0.375rem | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__toggle-button--PaddingRight | 0.5rem | ||
--pf-v5-c-options-menu__toggle-button--PaddingRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__toggle-button--PaddingBottom | 0.375rem | ||
--pf-v5-c-options-menu__toggle-button--PaddingBottom --pf-v5-global--spacer--form-element $pf-v5-global--spacer--form-element pf-size-prem(6px) 0.375rem | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__toggle-button--PaddingLeft | 0.5rem | ||
--pf-v5-c-options-menu__toggle-button--PaddingLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__menu--BackgroundColor | #fff | ||
--pf-v5-c-options-menu__menu--BackgroundColor --pf-v5-global--BackgroundColor--light-100 $pf-v5-global--BackgroundColor--light-100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__menu--BoxShadow | 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06) | ||
--pf-v5-c-options-menu__menu--BoxShadow --pf-v5-global--BoxShadow--md $pf-v5-global--BoxShadow--md 0 pf-size-prem(4px) pf-size-prem(8px) pf-size-prem(0) rgba($pf-v5-color-black-1000, .12), 0 0 pf-size-prem(4px) 0 rgba($pf-v5-color-black-1000, .06) 0 pf-size-prem(4px) pf-size-prem(8px) pf-size-prem(0) rgba(#030303, .12), 0 0 pf-size-prem(4px) 0 rgba(#030303, .06) 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06) | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__menu--PaddingTop | 0.5rem | ||
--pf-v5-c-options-menu__menu--PaddingTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__menu--PaddingBottom | 0.5rem | ||
--pf-v5-c-options-menu__menu--PaddingBottom --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__menu--Top | calc(100% + 0.25rem) | ||
--pf-v5-c-options-menu__menu--Top calc(100% + --pf-v5-global--spacer--xs) calc(100% + $pf-v5-global--spacer--xs) calc(100% + pf-size-prem(4px)) calc(100% + 0.25rem) | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__menu--ZIndex | 200 | ||
--pf-v5-c-options-menu__menu--ZIndex --pf-v5-global--ZIndex--sm $pf-v5-global--ZIndex--sm 200 | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu--m-top__menu--Top | 0 | ||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu--m-top__menu--TranslateY | calc(-100% - 0.25rem) | ||
--pf-v5-c-options-menu--m-top__menu--TranslateY calc(-100% - --pf-v5-global--spacer--xs) calc(-100% - $pf-v5-global--spacer--xs) calc(-100% - pf-size-prem(4px)) calc(-100% - 0.25rem) | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__menu-item--BackgroundColor | transparent | ||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__menu-item--Color | #151515 | ||
--pf-v5-c-options-menu__menu-item--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__menu-item--FontSize | 1rem | ||
--pf-v5-c-options-menu__menu-item--FontSize --pf-v5-global--FontSize--md $pf-v5-global--FontSize--md pf-font-prem(16px) 1rem | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__menu-item--PaddingTop | 0.5rem | ||
--pf-v5-c-options-menu__menu-item--PaddingTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__menu-item--PaddingRight | 1rem | ||
--pf-v5-c-options-menu__menu-item--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__menu-item--PaddingBottom | 0.5rem | ||
--pf-v5-c-options-menu__menu-item--PaddingBottom --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__menu-item--PaddingLeft | 1rem | ||
--pf-v5-c-options-menu__menu-item--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__menu-item--disabled--Color | #6a6e73 | ||
--pf-v5-c-options-menu__menu-item--disabled--Color --pf-v5-global--Color--dark-200 $pf-v5-global--Color--dark-200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__menu-item--hover--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-options-menu__menu-item--hover--BackgroundColor --pf-v5-global--BackgroundColor--light-300 $pf-v5-global--BackgroundColor--light-300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__menu-item--disabled--BackgroundColor | transparent | ||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__menu-item-icon--Color | #06c | ||
--pf-v5-c-options-menu__menu-item-icon--Color --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__menu-item-icon--FontSize | 0.75rem | ||
--pf-v5-c-options-menu__menu-item-icon--FontSize --pf-v5-global--icon--FontSize--sm $pf-v5-global--icon--FontSize--sm pf-font-prem(12px) 0.75rem | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__menu-item-icon--PaddingLeft | 1.5rem | ||
--pf-v5-c-options-menu__menu-item-icon--PaddingLeft --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__group--group--PaddingTop | 0.5rem | ||
--pf-v5-c-options-menu__group--group--PaddingTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__group-title--PaddingTop | 0.5rem | ||
--pf-v5-c-options-menu__group-title--PaddingTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__group-title--PaddingRight | 1rem | ||
--pf-v5-c-options-menu__group-title--PaddingRight --pf-v5-c-options-menu__menu-item--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__group-title--PaddingBottom | 0.5rem | ||
--pf-v5-c-options-menu__group-title--PaddingBottom --pf-v5-c-options-menu__menu-item--PaddingBottom --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__group-title--PaddingLeft | 1rem | ||
--pf-v5-c-options-menu__group-title--PaddingLeft --pf-v5-c-options-menu__menu-item--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__group-title--FontSize | 0.75rem | ||
--pf-v5-c-options-menu__group-title--FontSize --pf-v5-global--FontSize--xs $pf-v5-global--FontSize--xs pf-font-prem(12px) 0.75rem | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__group-title--FontWeight | 400 | ||
--pf-v5-c-options-menu__group-title--FontWeight --pf-v5-global--FontWeight--normal $pf-v5-global--FontWeight--normal 400 | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu__group-title--Color | #6a6e73 | ||
--pf-v5-c-options-menu__group-title--Color --pf-v5-global--Color--dark-200 $pf-v5-global--Color--dark-200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu--c-divider--MarginTop | 0.5rem | ||
--pf-v5-c-options-menu--c-divider--MarginTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-options-menu | --pf-v5-c-options-menu--c-divider--MarginBottom | 0.5rem | ||
--pf-v5-c-options-menu--c-divider--MarginBottom --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-options-menu .pf-v5-c-divider:last-child | --pf-v5-c-options-menu--c-divider--MarginBottom | 0 | ||
| .pf-v5-c-options-menu__toggle:not(.pf-m-plain):hover::before | --pf-v5-c-options-menu__toggle--BorderBottomColor | #06c | ||
--pf-v5-c-options-menu__toggle--BorderBottomColor --pf-v5-c-options-menu__toggle--hover--BorderBottomColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-options-menu__toggle:not(.pf-m-plain):active::before | --pf-v5-c-options-menu__toggle--BorderBottomColor | #06c | ||
--pf-v5-c-options-menu__toggle--BorderBottomColor --pf-v5-c-options-menu__toggle--active--BorderBottomColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-options-menu__toggle:not(.pf-m-plain):focus::before | --pf-v5-c-options-menu__toggle--BorderBottomColor | #06c | ||
--pf-v5-c-options-menu__toggle--BorderBottomColor --pf-v5-c-options-menu__toggle--focus--BorderBottomColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-options-menu.pf-m-expanded > .pf-v5-c-options-menu__toggle::before | --pf-v5-c-options-menu__toggle--BorderBottomColor | #06c | ||
--pf-v5-c-options-menu__toggle--BorderBottomColor --pf-v5-c-options-menu__toggle--expanded--BorderBottomColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-options-menu__toggle.pf-m-plain | --pf-v5-c-options-menu__toggle-icon--Color | #6a6e73 | ||
--pf-v5-c-options-menu__toggle-icon--Color --pf-v5-c-options-menu--m-plain__toggle-icon--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) | --pf-v5-c-options-menu__toggle--PaddingRight | 1rem | ||
--pf-v5-c-options-menu__toggle--PaddingRight --pf-v5-c-options-menu__toggle--m-plain--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) | --pf-v5-c-options-menu__toggle--PaddingLeft | 1rem | ||
--pf-v5-c-options-menu__toggle--PaddingLeft --pf-v5-c-options-menu__toggle--m-plain--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-options-menu__toggle.pf-m-plain:hover | --pf-v5-c-options-menu__toggle--m-plain--Color | #151515 | ||
--pf-v5-c-options-menu__toggle--m-plain--Color --pf-v5-c-options-menu__toggle--m-plain--hover--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-options-menu__toggle.pf-m-plain:hover | --pf-v5-c-options-menu--m-plain__toggle-icon--Color | #151515 | ||
--pf-v5-c-options-menu--m-plain__toggle-icon--Color --pf-v5-c-options-menu--m-plain--hover__toggle-icon--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-options-menu__toggle.pf-m-plain.pf-m-disabled | --pf-v5-c-options-menu__toggle--m-plain--Color | #d2d2d2 | ||
--pf-v5-c-options-menu__toggle--m-plain--Color --pf-v5-c-options-menu__toggle--m-plain--disabled--Color --pf-v5-global--disabled-color--200 $pf-v5-global--disabled-color--200 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-options-menu__toggle.pf-m-disabled:not(.pf-m-plain) | --pf-v5-c-options-menu__toggle--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-options-menu__toggle--BackgroundColor --pf-v5-c-options-menu__toggle--disabled--BackgroundColor --pf-v5-global--disabled-color--300 $pf-v5-global--disabled-color--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-options-menu.pf-m-top .pf-v5-c-options-menu__menu | --pf-v5-c-options-menu__menu--Top | 0 | ||
--pf-v5-c-options-menu__menu--Top --pf-v5-c-options-menu--m-top__menu--Top 0 | ||||
| .pf-v5-c-options-menu__menu.pf-m-static | --pf-v5-c-options-menu--m-top__menu--TranslateY | 0 | ||
View source on GitHub