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
Class | Applied to | Outcome |
|---|---|---|
aria-expanded="false" | .pf-v5-c-context-selector__toggle | Indicates that the menu is hidden. |
aria-expanded="true" | .pf-v5-c-context-selector__toggle | Indicates that the menu is visible. |
aria-hidden="true" | .pf-v5-c-context-selector__toggle-icon > * | Hides the icon from assistive technologies. |
disabled | button.pf-v5-c-context-selector__menu-item | When the menu item uses a button element, indicates that it is unavailable and removes it from keyboard focus. |
aria-disabled="true" | a.pf-v5-c-context-selector__menu-item | When the menu item uses a link element, indicates that it is unavailable. |
tabindex="-1" | a.pf-v5-c-context-selector__menu-item | When the menu item uses a link element, removes it from keyboard focus. |
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-v5-c-context-selector | <div> | Initiates a context selector. |
.pf-v5-c-context-selector__toggle | <button> | Initiates a toggle. |
.pf-v5-c-context-selector__toggle-text | <span> | Initiates text inside the toggle. |
.pf-v5-c-context-selector__toggle-icon | <span> | Inititiates the toggle icon wrapper. |
.pf-v5-c-context-selector__menu | <div> | Initiaties a menu. |
.pf-v5-c-context-selector__menu-search | <div> | Initiates a container for the search input group. |
.pf-v5-c-context-selector__menu-list | <ul> | Initiaties an unordered list of menu items that sits under the input container. |
.pf-v5-c-context-selector__menu-footer | <div> | Initiaties a menu footer. |
.pf-v5-c-context-selector__menu-list-item | <li> | Initiaties a menu item. |
.pf-m-expanded | .pf-v5-c-context-selector | Modifies for the expanded state. |
.pf-m-active | .pf-v5-c-context-selector__toggle | Forces display of the active state of the toggle. |
.pf-m-plain.pf-m-text | .pf-v5-c-context-selector__toggle | Modifies the context selector toggle for plain text styles. |
.pf-m-disabled | a.pf-v5-c-context-selector__menu-list-item | Modifies an item for the disabled state. |
.pf-m-full-height | .pf-v5-c-context-selector | Modifies a context selector to full height of parent. See masthead for use. |
.pf-m-large | .pf-v5-c-context-selector | Modifies toggle height to be large. |
.pf-m-page-insets | .pf-v5-c-context-selector | Modifies toggle and menu insets to match the responsive page chrome insets. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v5-c-context-selector__menu | --pf-v5-global--Color--100 | #151515 | ||
--pf-v5-global--Color--100 --pf-v5-global--Color--dark-100 $pf-v5-global--Color--dark-100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-context-selector__menu | --pf-v5-global--Color--200 | #6a6e73 | ||
--pf-v5-global--Color--200 --pf-v5-global--Color--dark-200 $pf-v5-global--Color--dark-200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-context-selector__menu | --pf-v5-global--BorderColor--100 | #d2d2d2 | ||
--pf-v5-global--BorderColor--100 --pf-v5-global--BorderColor--dark-100 $pf-v5-global--BorderColor--dark-100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-context-selector__menu | --pf-v5-global--primary-color--100 | #06c | ||
--pf-v5-global--primary-color--100 --pf-v5-global--primary-color--dark-100 $pf-v5-global--primary-color--dark-100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-context-selector__menu | --pf-v5-global--link--Color | #06c | ||
--pf-v5-global--link--Color --pf-v5-global--link--Color--dark $pf-v5-global--link--Color--dark $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-context-selector__menu | --pf-v5-global--link--Color--hover | #004080 | ||
--pf-v5-global--link--Color--hover --pf-v5-global--link--Color--dark--hover $pf-v5-global--link--Color--dark--hover $pf-v5-global--primary-color--200 $pf-v5-color-blue-500 #004080 | ||||
| .pf-v5-c-context-selector__menu | --pf-v5-global--BackgroundColor--100 | #fff | ||
--pf-v5-global--BackgroundColor--100 --pf-v5-global--BackgroundColor--light-100 $pf-v5-global--BackgroundColor--light-100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-context-selector__menu | --pf-v5-global--icon--Color--light | #6a6e73 | ||
--pf-v5-global--icon--Color--light --pf-v5-global--icon--Color--light--dark $pf-v5-global--icon--Color--light--dark $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-context-selector__menu | --pf-v5-global--icon--Color--dark | #151515 | ||
--pf-v5-global--icon--Color--dark --pf-v5-global--icon--Color--dark--dark $pf-v5-global--icon--Color--dark--dark $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector--Width | 15.625rem | ||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__toggle--PaddingTop | 0.375rem | ||
--pf-v5-c-context-selector__toggle--PaddingTop --pf-v5-global--spacer--form-element $pf-v5-global--spacer--form-element pf-size-prem(6px) 0.375rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__toggle--PaddingRight | 0.5rem | ||
--pf-v5-c-context-selector__toggle--PaddingRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__toggle--PaddingBottom | 0.375rem | ||
--pf-v5-c-context-selector__toggle--PaddingBottom --pf-v5-global--spacer--form-element $pf-v5-global--spacer--form-element pf-size-prem(6px) 0.375rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__toggle--PaddingLeft | 0.5rem | ||
--pf-v5-c-context-selector__toggle--PaddingLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__toggle--ColumnGap | 0.5rem | ||
--pf-v5-c-context-selector__toggle--ColumnGap --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__toggle--BorderWidth | 1px | ||
--pf-v5-c-context-selector__toggle--BorderWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__toggle--BorderTopColor | #f0f0f0 | ||
--pf-v5-c-context-selector__toggle--BorderTopColor --pf-v5-global--BorderColor--300 $pf-v5-global--BorderColor--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__toggle--BorderRightColor | #f0f0f0 | ||
--pf-v5-c-context-selector__toggle--BorderRightColor --pf-v5-global--BorderColor--300 $pf-v5-global--BorderColor--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__toggle--BorderBottomColor | #8a8d90 | ||
--pf-v5-c-context-selector__toggle--BorderBottomColor --pf-v5-global--BorderColor--200 $pf-v5-global--BorderColor--200 $pf-v5-color-black-500 #8a8d90 | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__toggle--BorderLeftColor | #f0f0f0 | ||
--pf-v5-c-context-selector__toggle--BorderLeftColor --pf-v5-global--BorderColor--300 $pf-v5-global--BorderColor--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__toggle--Color | #151515 | ||
--pf-v5-c-context-selector__toggle--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__toggle--hover--BorderBottomWidth | 1px | ||
--pf-v5-c-context-selector__toggle--hover--BorderBottomWidth --pf-v5-c-context-selector__toggle--BorderWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__toggle--hover--BorderBottomColor | #06c | ||
--pf-v5-c-context-selector__toggle--hover--BorderBottomColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__toggle--active--BorderBottomWidth | 2px | ||
--pf-v5-c-context-selector__toggle--active--BorderBottomWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__toggle--active--BorderBottomColor | #06c | ||
--pf-v5-c-context-selector__toggle--active--BorderBottomColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__toggle--expanded--BorderBottomWidth | 2px | ||
--pf-v5-c-context-selector__toggle--expanded--BorderBottomWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__toggle--expanded--BorderBottomColor | #06c | ||
--pf-v5-c-context-selector__toggle--expanded--BorderBottomColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__toggle--BackgroundColor | transparent | ||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__toggle--m-plain--Color | #6a6e73 | ||
--pf-v5-c-context-selector__toggle--m-plain--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__toggle--m-plain--hover--Color | #151515 | ||
--pf-v5-c-context-selector__toggle--m-plain--hover--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__toggle--m-plain--disabled--Color | #d2d2d2 | ||
--pf-v5-c-context-selector__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-context-selector | --pf-v5-c-context-selector__toggle--m-plain--PaddingRight | 1rem | ||
--pf-v5-c-context-selector__toggle--m-plain--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__toggle--m-plain--PaddingLeft | 1rem | ||
--pf-v5-c-context-selector__toggle--m-plain--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__toggle--m-plain--m-text--PaddingRight | 0.5rem | ||
--pf-v5-c-context-selector__toggle--m-plain--m-text--PaddingRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__toggle--m-plain--m-text--PaddingLeft | 0.5rem | ||
--pf-v5-c-context-selector__toggle--m-plain--m-text--PaddingLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__toggle-text--FontSize | 1rem | ||
--pf-v5-c-context-selector__toggle-text--FontSize --pf-v5-global--FontSize--md $pf-v5-global--FontSize--md pf-font-prem(16px) 1rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__toggle-text--FontWeight | 400 | ||
--pf-v5-c-context-selector__toggle-text--FontWeight --pf-v5-global--FontWeight--normal $pf-v5-global--FontWeight--normal 400 | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__toggle-text--LineHeight | 1.5 | ||
--pf-v5-c-context-selector__toggle-text--LineHeight --pf-v5-global--LineHeight--md $pf-v5-global--LineHeight--md 1.5 | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__toggle-icon--PaddingRight | 0.5rem | ||
--pf-v5-c-context-selector__toggle-icon--PaddingRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__toggle-icon--PaddingLeft | 0.5rem | ||
--pf-v5-c-context-selector__toggle-icon--PaddingLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector--m-plain__toggle-icon--Color | #6a6e73 | ||
--pf-v5-c-context-selector--m-plain__toggle-icon--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector--m-plain--hover__toggle-icon--Color | #151515 | ||
--pf-v5-c-context-selector--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-context-selector | --pf-v5-c-context-selector__menu--Top | calc(100% + 0.25rem) | ||
--pf-v5-c-context-selector__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-context-selector | --pf-v5-c-context-selector__menu--ZIndex | 200 | ||
--pf-v5-c-context-selector__menu--ZIndex --pf-v5-global--ZIndex--sm $pf-v5-global--ZIndex--sm 200 | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__menu--PaddingTop | 0.5rem | ||
--pf-v5-c-context-selector__menu--PaddingTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__menu--BackgroundColor | #fff | ||
--pf-v5-c-context-selector__menu--BackgroundColor --pf-v5-global--BackgroundColor--light-100 $pf-v5-global--BackgroundColor--light-100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__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-context-selector__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-context-selector | --pf-v5-c-context-selector__menu-search--PaddingTop | 1rem | ||
--pf-v5-c-context-selector__menu-search--PaddingTop --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__menu-search--PaddingRight | 1rem | ||
--pf-v5-c-context-selector__menu-search--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__menu-search--PaddingBottom | 1rem | ||
--pf-v5-c-context-selector__menu-search--PaddingBottom --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__menu-search--PaddingLeft | 1rem | ||
--pf-v5-c-context-selector__menu-search--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__menu-search--BorderBottomColor | #d2d2d2 | ||
--pf-v5-c-context-selector__menu-search--BorderBottomColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__menu-search--BorderBottomWidth | 1px | ||
--pf-v5-c-context-selector__menu-search--BorderBottomWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__menu-footer--BoxShadow | 0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16) | ||
--pf-v5-c-context-selector__menu-footer--BoxShadow --pf-v5-global--BoxShadow--sm-top $pf-v5-global--BoxShadow--sm-top 0 pf-size-prem(-2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-v5-color-black-1000, .16) 0 pf-size-prem(-2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) 0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16) | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__menu-footer--PaddingTop | 1rem | ||
--pf-v5-c-context-selector__menu-footer--PaddingTop --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__menu-footer--PaddingRight | 1rem | ||
--pf-v5-c-context-selector__menu-footer--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__menu-footer--PaddingBottom | 1rem | ||
--pf-v5-c-context-selector__menu-footer--PaddingBottom --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__menu-footer--PaddingLeft | 1rem | ||
--pf-v5-c-context-selector__menu-footer--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__menu-list--MaxHeight | 12.5rem | ||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__menu-list--PaddingTop | 0.5rem | ||
--pf-v5-c-context-selector__menu-list--PaddingTop --pf-v5-c-context-selector__menu--PaddingTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__menu-list--PaddingBottom | 0.5rem | ||
--pf-v5-c-context-selector__menu-list--PaddingBottom --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__menu-list-item--Color | #151515 | ||
--pf-v5-c-context-selector__menu-list-item--Color --pf-v5-global--Color--dark-100 $pf-v5-global--Color--dark-100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__menu-list-item--PaddingTop | 0.5rem | ||
--pf-v5-c-context-selector__menu-list-item--PaddingTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__menu-list-item--PaddingRight | 1.5rem | ||
--pf-v5-c-context-selector__menu-list-item--PaddingRight --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__menu-list-item--PaddingBottom | 0.5rem | ||
--pf-v5-c-context-selector__menu-list-item--PaddingBottom --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__menu-list-item--PaddingLeft | 1.5rem | ||
--pf-v5-c-context-selector__menu-list-item--PaddingLeft --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__menu-list-item--BackgroundColor | transparent | ||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__menu-list-item--hover--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-context-selector__menu-list-item--hover--BackgroundColor --pf-v5-global--BackgroundColor--light-300 $pf-v5-global--BackgroundColor--light-300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__menu-list-item--disabled--Color | #6a6e73 | ||
--pf-v5-c-context-selector__menu-list-item--disabled--Color --pf-v5-global--Color--dark-200 $pf-v5-global--Color--dark-200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector__menu-item-icon--Color | #06c | ||
--pf-v5-c-context-selector__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-context-selector | --pf-v5-c-context-selector__menu-item-icon--FontSize | 0.75rem | ||
--pf-v5-c-context-selector__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-context-selector | --pf-v5-c-context-selector__menu-item-icon--PaddingLeft | 1.5rem | ||
--pf-v5-c-context-selector__menu-item-icon--PaddingLeft --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector--m-full-height__toggle--PaddingRight | 1.5rem | ||
--pf-v5-c-context-selector--m-full-height__toggle--PaddingRight --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector--m-full-height__toggle--PaddingLeft | 1.5rem | ||
--pf-v5-c-context-selector--m-full-height__toggle--PaddingLeft --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector--m-full-height__toggle--before--BorderTopWidth | 0 | ||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector--m-full-height__toggle--hover--BorderBottomWidth | 4px | ||
--pf-v5-c-context-selector--m-full-height__toggle--hover--BorderBottomWidth --pf-v5-global--BorderWidth--xl $pf-v5-global--BorderWidth--xl 4px | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector--m-full-height__toggle--active--BorderBottomWidth | 4px | ||
--pf-v5-c-context-selector--m-full-height__toggle--active--BorderBottomWidth --pf-v5-global--BorderWidth--xl $pf-v5-global--BorderWidth--xl 4px | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector--m-full-height__toggle--expanded--BorderBottomWidth | 4px | ||
--pf-v5-c-context-selector--m-full-height__toggle--expanded--BorderBottomWidth --pf-v5-global--BorderWidth--xl $pf-v5-global--BorderWidth--xl 4px | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector--m-large__toggle--PaddingTop | 1rem | ||
--pf-v5-c-context-selector--m-large__toggle--PaddingTop --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector--m-large__toggle--PaddingBottom | 1rem | ||
--pf-v5-c-context-selector--m-large__toggle--PaddingBottom --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector--m-large__toggle--hover--BorderBottomWidth | 4px | ||
--pf-v5-c-context-selector--m-large__toggle--hover--BorderBottomWidth --pf-v5-global--BorderWidth--xl $pf-v5-global--BorderWidth--xl 4px | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector--m-large__toggle--active--BorderBottomWidth | 4px | ||
--pf-v5-c-context-selector--m-large__toggle--active--BorderBottomWidth --pf-v5-global--BorderWidth--xl $pf-v5-global--BorderWidth--xl 4px | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector--m-large__toggle--expanded--BorderBottomWidth | 4px | ||
--pf-v5-c-context-selector--m-large__toggle--expanded--BorderBottomWidth --pf-v5-global--BorderWidth--xl $pf-v5-global--BorderWidth--xl 4px | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector--m-page-insets__toggle--PaddingRight | 1rem | ||
--pf-v5-c-context-selector--m-page-insets__toggle--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector--m-page-insets__toggle--PaddingLeft | 1rem | ||
--pf-v5-c-context-selector--m-page-insets__toggle--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector--m-page-insets__toggle--xl--PaddingRight | 1.5rem | ||
--pf-v5-c-context-selector--m-page-insets__toggle--xl--PaddingRight --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector--m-page-insets__toggle--xl--PaddingLeft | 1.5rem | ||
--pf-v5-c-context-selector--m-page-insets__toggle--xl--PaddingLeft --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector--m-page-insets__menu-list-item--PaddingRight | 1rem | ||
--pf-v5-c-context-selector--m-page-insets__menu-list-item--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector--m-page-insets__menu-list-item--PaddingLeft | 1rem | ||
--pf-v5-c-context-selector--m-page-insets__menu-list-item--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector--m-page-insets__menu-list-item--xl--PaddingRight | 1.5rem | ||
--pf-v5-c-context-selector--m-page-insets__menu-list-item--xl--PaddingRight --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector--m-page-insets__menu-list-item--xl--PaddingLeft | 1.5rem | ||
--pf-v5-c-context-selector--m-page-insets__menu-list-item--xl--PaddingLeft --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector--m-page-insets__menu-search--PaddingRight | 1rem | ||
--pf-v5-c-context-selector--m-page-insets__menu-search--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector--m-page-insets__menu-search--PaddingLeft | 1rem | ||
--pf-v5-c-context-selector--m-page-insets__menu-search--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector--m-page-insets__menu-search--xl--PaddingRight | 1.5rem | ||
--pf-v5-c-context-selector--m-page-insets__menu-search--xl--PaddingRight --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector--m-page-insets__menu-search--xl--PaddingLeft | 1.5rem | ||
--pf-v5-c-context-selector--m-page-insets__menu-search--xl--PaddingLeft --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector--m-page-insets__menu-footer--PaddingRight | 1rem | ||
--pf-v5-c-context-selector--m-page-insets__menu-footer--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector--m-page-insets__menu-footer--PaddingLeft | 1rem | ||
--pf-v5-c-context-selector--m-page-insets__menu-footer--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector--m-page-insets__menu-footer--xl--PaddingRight | 1.5rem | ||
--pf-v5-c-context-selector--m-page-insets__menu-footer--xl--PaddingRight --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector--m-page-insets__menu-footer--xl--PaddingLeft | 1.5rem | ||
--pf-v5-c-context-selector--m-page-insets__menu-footer--xl--PaddingLeft --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector--m-page-insets__toggle--m-plain--PaddingRight | 1rem | ||
--pf-v5-c-context-selector--m-page-insets__toggle--m-plain--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector--m-page-insets__toggle--m-plain--PaddingLeft | 1rem | ||
--pf-v5-c-context-selector--m-page-insets__toggle--m-plain--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector--m-page-insets__toggle--m-plain--xl--PaddingRight | 1.5rem | ||
--pf-v5-c-context-selector--m-page-insets__toggle--m-plain--xl--PaddingRight --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector--m-page-insets__toggle--m-plain--xl--PaddingLeft | 1.5rem | ||
--pf-v5-c-context-selector--m-page-insets__toggle--m-plain--xl--PaddingLeft --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingRight | 1rem | ||
--pf-v5-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingLeft | 1rem | ||
--pf-v5-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector--m-page-insets__toggle--m-plain--m-text--xl--PaddingRight | 1.5rem | ||
--pf-v5-c-context-selector--m-page-insets__toggle--m-plain--m-text--xl--PaddingRight --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-context-selector | --pf-v5-c-context-selector--m-page-insets__toggle--m-plain--m-text--xl--PaddingLeft | 1.5rem | ||
--pf-v5-c-context-selector--m-page-insets__toggle--m-plain--m-text--xl--PaddingLeft --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-context-selector.pf-m-full-height | --pf-v5-c-context-selector__toggle--active--BorderBottomWidth | 4px | ||
--pf-v5-c-context-selector__toggle--active--BorderBottomWidth --pf-v5-c-context-selector--m-full-height__toggle--active--BorderBottomWidth --pf-v5-global--BorderWidth--xl $pf-v5-global--BorderWidth--xl 4px | ||||
| .pf-v5-c-context-selector.pf-m-full-height | --pf-v5-c-context-selector__toggle--expanded--BorderBottomWidth | 4px | ||
--pf-v5-c-context-selector__toggle--expanded--BorderBottomWidth --pf-v5-c-context-selector--m-full-height__toggle--expanded--BorderBottomWidth --pf-v5-global--BorderWidth--xl $pf-v5-global--BorderWidth--xl 4px | ||||
| .pf-v5-c-context-selector.pf-m-full-height | --pf-v5-c-context-selector__toggle--PaddingRight | 1.5rem | ||
--pf-v5-c-context-selector__toggle--PaddingRight --pf-v5-c-context-selector--m-full-height__toggle--PaddingRight --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-context-selector.pf-m-full-height | --pf-v5-c-context-selector__toggle--PaddingLeft | 1.5rem | ||
--pf-v5-c-context-selector__toggle--PaddingLeft --pf-v5-c-context-selector--m-full-height__toggle--PaddingLeft --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-context-selector.pf-m-large | --pf-v5-c-context-selector__toggle--PaddingTop | 1rem | ||
--pf-v5-c-context-selector__toggle--PaddingTop --pf-v5-c-context-selector--m-large__toggle--PaddingTop --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-context-selector.pf-m-large | --pf-v5-c-context-selector__toggle--PaddingBottom | 1rem | ||
--pf-v5-c-context-selector__toggle--PaddingBottom --pf-v5-c-context-selector--m-large__toggle--PaddingBottom --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-context-selector.pf-m-large | --pf-v5-c-context-selector__toggle--hover--BorderBottomWidth | 4px | ||
--pf-v5-c-context-selector__toggle--hover--BorderBottomWidth --pf-v5-c-context-selector--m-large__toggle--hover--BorderBottomWidth --pf-v5-global--BorderWidth--xl $pf-v5-global--BorderWidth--xl 4px | ||||
| .pf-v5-c-context-selector.pf-m-large | --pf-v5-c-context-selector__toggle--active--BorderBottomWidth | 4px | ||
--pf-v5-c-context-selector__toggle--active--BorderBottomWidth --pf-v5-c-context-selector--m-large__toggle--active--BorderBottomWidth --pf-v5-global--BorderWidth--xl $pf-v5-global--BorderWidth--xl 4px | ||||
| .pf-v5-c-context-selector.pf-m-large | --pf-v5-c-context-selector__toggle--expanded--BorderBottomWidth | 4px | ||
--pf-v5-c-context-selector__toggle--expanded--BorderBottomWidth --pf-v5-c-context-selector--m-large__toggle--expanded--BorderBottomWidth --pf-v5-global--BorderWidth--xl $pf-v5-global--BorderWidth--xl 4px | ||||
| .pf-v5-c-context-selector.pf-m-page-insets | --pf-v5-c-context-selector__toggle--PaddingRight | 1rem | ||
--pf-v5-c-context-selector__toggle--PaddingRight --pf-v5-c-context-selector--m-page-insets__toggle--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-context-selector.pf-m-page-insets | --pf-v5-c-context-selector__toggle--PaddingLeft | 1rem | ||
--pf-v5-c-context-selector__toggle--PaddingLeft --pf-v5-c-context-selector--m-page-insets__toggle--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-context-selector.pf-m-page-insets | --pf-v5-c-context-selector__menu-list-item--PaddingRight | 1rem | ||
--pf-v5-c-context-selector__menu-list-item--PaddingRight --pf-v5-c-context-selector--m-page-insets__menu-list-item--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-context-selector.pf-m-page-insets | --pf-v5-c-context-selector__menu-list-item--PaddingLeft | 1rem | ||
--pf-v5-c-context-selector__menu-list-item--PaddingLeft --pf-v5-c-context-selector--m-page-insets__menu-list-item--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-context-selector.pf-m-page-insets | --pf-v5-c-context-selector__menu-search--PaddingRight | 1rem | ||
--pf-v5-c-context-selector__menu-search--PaddingRight --pf-v5-c-context-selector--m-page-insets__menu-search--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-context-selector.pf-m-page-insets | --pf-v5-c-context-selector__menu-search--PaddingLeft | 1rem | ||
--pf-v5-c-context-selector__menu-search--PaddingLeft --pf-v5-c-context-selector--m-page-insets__menu-search--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-context-selector.pf-m-page-insets | --pf-v5-c-context-selector__menu-footer--PaddingRight | 1rem | ||
--pf-v5-c-context-selector__menu-footer--PaddingRight --pf-v5-c-context-selector--m-page-insets__menu-footer--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-context-selector.pf-m-page-insets | --pf-v5-c-context-selector__menu-footer--PaddingLeft | 1rem | ||
--pf-v5-c-context-selector__menu-footer--PaddingLeft --pf-v5-c-context-selector--m-page-insets__menu-footer--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-context-selector.pf-m-page-insets | --pf-v5-c-context-selector__toggle--m-plain--PaddingRight | 1rem | ||
--pf-v5-c-context-selector__toggle--m-plain--PaddingRight --pf-v5-c-context-selector--m-page-insets__toggle--m-plain--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-context-selector.pf-m-page-insets | --pf-v5-c-context-selector__toggle--m-plain--PaddingLeft | 1rem | ||
--pf-v5-c-context-selector__toggle--m-plain--PaddingLeft --pf-v5-c-context-selector--m-page-insets__toggle--m-plain--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-context-selector.pf-m-page-insets | --pf-v5-c-context-selector__toggle--m-plain--m-text--PaddingRight | 1rem | ||
--pf-v5-c-context-selector__toggle--m-plain--m-text--PaddingRight --pf-v5-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-context-selector.pf-m-page-insets | --pf-v5-c-context-selector__toggle--m-plain--m-text--PaddingLeft | 1rem | ||
--pf-v5-c-context-selector__toggle--m-plain--m-text--PaddingLeft --pf-v5-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-context-selector__toggle:hover::before | --pf-v5-c-context-selector__toggle--BorderBottomColor | #06c | ||
--pf-v5-c-context-selector__toggle--BorderBottomColor --pf-v5-c-context-selector__toggle--hover--BorderBottomColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-context-selector__toggle:active::before | --pf-v5-c-context-selector__toggle--BorderBottomColor | #06c | ||
--pf-v5-c-context-selector__toggle--BorderBottomColor --pf-v5-c-context-selector__toggle--active--BorderBottomColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-m-expanded > .pf-v5-c-context-selector__toggle::before | --pf-v5-c-context-selector__toggle--BorderBottomColor | #06c | ||
--pf-v5-c-context-selector__toggle--BorderBottomColor --pf-v5-c-context-selector__toggle--expanded--BorderBottomColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-context-selector__toggle.pf-m-plain | --pf-v5-c-context-selector__toggle--PaddingRight | 1rem | ||
--pf-v5-c-context-selector__toggle--PaddingRight --pf-v5-c-context-selector__toggle--m-plain--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-context-selector__toggle.pf-m-plain | --pf-v5-c-context-selector__toggle--PaddingLeft | 1rem | ||
--pf-v5-c-context-selector__toggle--PaddingLeft --pf-v5-c-context-selector__toggle--m-plain--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-context-selector__toggle.pf-m-plain | --pf-v5-c-context-selector__toggle-icon--Color | #6a6e73 | ||
--pf-v5-c-context-selector__toggle-icon--Color --pf-v5-c-context-selector--m-plain__toggle-icon--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-context-selector__toggle.pf-m-plain.pf-m-text | --pf-v5-c-context-selector__toggle--PaddingRight | 0.5rem | ||
--pf-v5-c-context-selector__toggle--PaddingRight --pf-v5-c-context-selector__toggle--m-plain--m-text--PaddingRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-context-selector__toggle.pf-m-plain.pf-m-text | --pf-v5-c-context-selector__toggle--PaddingLeft | 0.5rem | ||
--pf-v5-c-context-selector__toggle--PaddingLeft --pf-v5-c-context-selector__toggle--m-plain--m-text--PaddingLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-context-selector__toggle.pf-m-plain.pf-m-disabled | --pf-v5-c-context-selector__toggle--m-plain--Color | #d2d2d2 | ||
--pf-v5-c-context-selector__toggle--m-plain--Color --pf-v5-c-context-selector__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-context-selector__toggle.pf-m-plain:hover | --pf-v5-c-context-selector__toggle--m-plain--Color | #151515 | ||
--pf-v5-c-context-selector__toggle--m-plain--Color --pf-v5-c-context-selector__toggle--m-plain--hover--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-context-selector__toggle.pf-m-plain:hover | --pf-v5-c-context-selector--m-plain__toggle-icon--Color | #151515 | ||
--pf-v5-c-context-selector--m-plain__toggle-icon--Color --pf-v5-c-context-selector--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-context-selector__menu-list-item:hover | --pf-v5-c-context-selector__menu-list-item--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-context-selector__menu-list-item--BackgroundColor --pf-v5-c-context-selector__menu-list-item--hover--BackgroundColor --pf-v5-global--BackgroundColor--light-300 $pf-v5-global--BackgroundColor--light-300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-context-selector__menu-list-item.pf-m-disabled | --pf-v5-c-context-selector__menu-list-item--Color | #6a6e73 | ||
--pf-v5-c-context-selector__menu-list-item--Color --pf-v5-c-context-selector__menu-list-item--disabled--Color --pf-v5-global--Color--dark-200 $pf-v5-global--Color--dark-200 $pf-v5-color-black-600 #6a6e73 | ||||
View source on GitHub
