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
Attribute | Applied | Outcome |
|---|---|---|
aria-label="Application launcher" | .pf-v5-c-app-launcher | Gives the app launcher element an accessible name. Required |
aria-expanded="false" | .pf-v5-c-button | Indicates that the menu is hidden. |
aria-expanded="true" | .pf-v5-c-button | Indicates that the menu is visible. |
aria-label="Actions" | .pf-v5-c-button | Provides an accessible name for the app launcher when an icon is used. Required |
hidden | .pf-v5-c-app-launcher__menu | Indicates that the menu is hidden so that it isn't visible in the UI and isn't accessed by assistive technologies. |
disabled | .pf-v5-c-app-launcher__toggle | Disables the app launcher toggle and removes it from keyboard focus. |
disabled | button.pf-v5-c-app-launcher__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-app-launcher__menu-item | When the menu item uses a link element, indicates that it is unavailable. |
tabindex="-1" | a.pf-v5-c-app-launcher__menu-item | When the menu item uses a link element, removes it from keyboard focus. |
aria-hidden="true" | .pf-v5-c-app-launcher__menu-item-external-icon > * | Hides the icon from assistive technologies. |
Usage
Class | Applied | Outcome |
|---|---|---|
.pf-v5-c-app-launcher | <nav> | Defines the parent wrapper of the app launcher. |
.pf-v5-c-app-launcher__toggle | <button> | Defines the app launcher toggle. |
.pf-v5-c-app-launcher__menu | <ul>, <div> | Defines the parent wrapper of the menu items. Use a <div> if your app launcher has groups. |
.pf-v5-c-app-launcher__menu-search | <div> | Defines the wrapper for the search input. |
.pf-v5-c-app-launcher__group | <section> | Defines a group of items. Required when there is more than one group. |
.pf-v5-c-app-launcher__group-title | <h1> | Defines a title for a group of items. |
.pf-v5-c-app-launcher__menu-wrapper | <li> | Defines a menu wrapper for use with multiple actionable items in a single item row. |
.pf-v5-c-app-launcher__menu-item | <a>, <button> | Defines a menu item. |
.pf-v5-c-app-launcher__menu-item-icon | <span> | Defines the wrapper for the menu item icon. |
.pf-v5-c-app-launcher__menu-item-external-icon | <span> | Defines the wrapper for the external link icon that appears on hover/focus. Use with .pf-m-external. |
.pf-m-expanded | .pf-v5-c-app-launcher | Modifies for the expanded state. |
.pf-m-top | .pf-v5-c-app-launcher | Modifies to display the menu above the toggle. |
.pf-m-align-right | .pf-v5-c-app-launcher__menu | Modifies to display the menu aligned to the right edge of the toggle. |
.pf-m-static | .pf-v5-c-app-launcher__menu | Modifies to position the menu statically to support custom positioning. |
.pf-m-disabled | a.pf-v5-c-app-launcher__menu-item | Modifies to display the menu item as disabled. |
.pf-m-external | .pf-v5-c-app-launcher__menu-item | Modifies to display the menu item as having an external link icon on hover/focus. |
.pf-m-favorite | .pf-v5-c-app-launcher__menu-wrapper | Modifies wrapper to indicate that the item row has been favorited. |
.pf-m-link | .pf-v5-c-app-launcher__menu-item.pf-m-wrapper > .pf-v5-c-app-launcher__menu-item | Modifies item for link styles. |
.pf-m-action | .pf-v5-c-app-launcher__menu-item.pf-m-wrapper > .pf-v5-c-app-launcher__menu-item | Modifies item to for action styles. |
.pf-m-active | .pf-v5-c-app-launcher__toggle | Forces display of the active state of the toggle. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__menu--BackgroundColor | #fff | ||
--pf-v5-c-app-launcher__menu--BackgroundColor --pf-v5-global--BackgroundColor--light-100 $pf-v5-global--BackgroundColor--light-100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__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-app-launcher__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-app-launcher | --pf-v5-c-app-launcher__menu--PaddingTop | 0.5rem | ||
--pf-v5-c-app-launcher__menu--PaddingTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__menu--PaddingBottom | 0.5rem | ||
--pf-v5-c-app-launcher__menu--PaddingBottom --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__menu--Top | calc(100% + 0.25rem) | ||
--pf-v5-c-app-launcher__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-app-launcher | --pf-v5-c-app-launcher__menu--ZIndex | 200 | ||
--pf-v5-c-app-launcher__menu--ZIndex --pf-v5-global--ZIndex--sm $pf-v5-global--ZIndex--sm 200 | ||||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher--m-top__menu--Top | 0 | ||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher--m-top__menu--TranslateY | calc(-100% - 0.25rem) | ||
--pf-v5-c-app-launcher--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-app-launcher | --pf-v5-c-app-launcher__toggle--PaddingTop | 0.375rem | ||
--pf-v5-c-app-launcher__toggle--PaddingTop --pf-v5-global--spacer--form-element $pf-v5-global--spacer--form-element pf-size-prem(6px) 0.375rem | ||||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__toggle--PaddingRight | 1rem | ||
--pf-v5-c-app-launcher__toggle--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__toggle--PaddingBottom | 0.375rem | ||
--pf-v5-c-app-launcher__toggle--PaddingBottom --pf-v5-global--spacer--form-element $pf-v5-global--spacer--form-element pf-size-prem(6px) 0.375rem | ||||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__toggle--PaddingLeft | 1rem | ||
--pf-v5-c-app-launcher__toggle--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__toggle--Color | #6a6e73 | ||
--pf-v5-c-app-launcher__toggle--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__toggle--hover--Color | #151515 | ||
--pf-v5-c-app-launcher__toggle--hover--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__toggle--active--Color | #151515 | ||
--pf-v5-c-app-launcher__toggle--active--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__toggle--focus--Color | #151515 | ||
--pf-v5-c-app-launcher__toggle--focus--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__toggle--disabled--Color | #d2d2d2 | ||
--pf-v5-c-app-launcher__toggle--disabled--Color --pf-v5-global--disabled-color--200 $pf-v5-global--disabled-color--200 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__toggle--m-expanded--Color | #151515 | ||
--pf-v5-c-app-launcher__toggle--m-expanded--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__toggle--BackgroundColor | transparent | ||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__menu-search--PaddingTop | 0.5rem | ||
--pf-v5-c-app-launcher__menu-search--PaddingTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__menu-search--PaddingRight | 1rem | ||
--pf-v5-c-app-launcher__menu-search--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__menu-search--PaddingBottom | 1rem | ||
--pf-v5-c-app-launcher__menu-search--PaddingBottom --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__menu-search--PaddingLeft | 1rem | ||
--pf-v5-c-app-launcher__menu-search--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__menu-search--BottomBorderColor | #d2d2d2 | ||
--pf-v5-c-app-launcher__menu-search--BottomBorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__menu-search--BottomBorderWidth | 1px | ||
--pf-v5-c-app-launcher__menu-search--BottomBorderWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__menu-search--MarginBottom | 0.5rem | ||
--pf-v5-c-app-launcher__menu-search--MarginBottom --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__menu-item--PaddingTop | 0.5rem | ||
--pf-v5-c-app-launcher__menu-item--PaddingTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__menu-item--PaddingRight | 1rem | ||
--pf-v5-c-app-launcher__menu-item--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__menu-item--PaddingBottom | 0.5rem | ||
--pf-v5-c-app-launcher__menu-item--PaddingBottom --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__menu-item--PaddingLeft | 1rem | ||
--pf-v5-c-app-launcher__menu-item--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__menu-item--Color | #151515 | ||
--pf-v5-c-app-launcher__menu-item--Color --pf-v5-global--Color--dark-100 $pf-v5-global--Color--dark-100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__menu-item--FontWeight | 400 | ||
--pf-v5-c-app-launcher__menu-item--FontWeight --pf-v5-global--FontWeight--normal $pf-v5-global--FontWeight--normal 400 | ||||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__menu-item--Width | 100% | ||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__menu-item--disabled--Color | #6a6e73 | ||
--pf-v5-c-app-launcher__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-app-launcher | --pf-v5-c-app-launcher__menu-item--hover--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-app-launcher__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-app-launcher | --pf-v5-c-app-launcher__menu-item--m-link--PaddingRight | 0 | ||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__menu-item--m-link--hover--BackgroundColor | transparent | ||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__menu-item--m-action--Color | #6a6e73 | ||
--pf-v5-c-app-launcher__menu-item--m-action--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__menu-item--m-action--Width | auto | ||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__menu-item--m-action--FontSize | 0.75rem | ||
--pf-v5-c-app-launcher__menu-item--m-action--FontSize --pf-v5-global--icon--FontSize--sm $pf-v5-global--icon--FontSize--sm pf-font-prem(12px) 0.75rem | ||||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__menu-item--m-action--hover--BackgroundColor | transparent | ||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__menu-item--hover__menu-item--m-action--Color | #6a6e73 | ||
--pf-v5-c-app-launcher__menu-item--hover__menu-item--m-action--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__menu-item--m-action--hover--Color | #151515 | ||
--pf-v5-c-app-launcher__menu-item--m-action--hover--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__menu-item--m-action--disabled--Color | #d2d2d2 | ||
--pf-v5-c-app-launcher__menu-item--m-action--disabled--Color --pf-v5-global--disabled-color--200 $pf-v5-global--disabled-color--200 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__menu-item--m-favorite__menu-item--m-action--Color | #f0ab00 | ||
--pf-v5-c-app-launcher__menu-item--m-favorite__menu-item--m-action--Color --pf-v5-global--palette--gold-400 $pf-v5-color-gold-400 #f0ab00 | ||||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__menu-item--m-favorite__menu-item--m-action--hover--Color | #c58c00 | ||
--pf-v5-c-app-launcher__menu-item--m-favorite__menu-item--m-action--hover--Color --pf-v5-global--palette--gold-500 $pf-v5-color-gold-500 #c58c00 | ||||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__menu-item-icon--MarginRight | 0.5rem | ||
--pf-v5-c-app-launcher__menu-item-icon--MarginRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__menu-item-icon--Width | 1.5rem | ||
--pf-v5-c-app-launcher__menu-item-icon--Width --pf-v5-global--icon--FontSize--lg $pf-v5-global--icon--FontSize--lg pf-font-prem(24px) 1.5rem | ||||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__menu-item-icon--Height | 1.5rem | ||
--pf-v5-c-app-launcher__menu-item-icon--Height --pf-v5-global--icon--FontSize--lg $pf-v5-global--icon--FontSize--lg pf-font-prem(24px) 1.5rem | ||||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__menu-item-external-icon--Color | #06c | ||
--pf-v5-c-app-launcher__menu-item-external-icon--Color --pf-v5-global--link--Color $pf-v5-global--link--Color $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__menu-item-external-icon--PaddingLeft | 1rem | ||
--pf-v5-c-app-launcher__menu-item-external-icon--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__menu-item-external-icon--TranslateY | -0.0625rem | ||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__menu-item-external-icon--FontSize | 0.75rem | ||
--pf-v5-c-app-launcher__menu-item-external-icon--FontSize --pf-v5-global--icon--FontSize--sm $pf-v5-global--icon--FontSize--sm pf-font-prem(12px) 0.75rem | ||||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__group--group--PaddingTop | 0.5rem | ||
--pf-v5-c-app-launcher__group--group--PaddingTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__group-title--PaddingTop | 0.5rem | ||
--pf-v5-c-app-launcher__group-title--PaddingTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__group-title--PaddingRight | 1rem | ||
--pf-v5-c-app-launcher__group-title--PaddingRight --pf-v5-c-app-launcher__menu-item--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__group-title--PaddingBottom | 0.5rem | ||
--pf-v5-c-app-launcher__group-title--PaddingBottom --pf-v5-c-app-launcher__menu-item--PaddingBottom --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__group-title--PaddingLeft | 1rem | ||
--pf-v5-c-app-launcher__group-title--PaddingLeft --pf-v5-c-app-launcher__menu-item--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__group-title--FontSize | 0.75rem | ||
--pf-v5-c-app-launcher__group-title--FontSize --pf-v5-global--FontSize--xs $pf-v5-global--FontSize--xs pf-font-prem(12px) 0.75rem | ||||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__group-title--FontWeight | 400 | ||
--pf-v5-c-app-launcher__group-title--FontWeight --pf-v5-global--FontWeight--normal $pf-v5-global--FontWeight--normal 400 | ||||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher__group-title--Color | #6a6e73 | ||
--pf-v5-c-app-launcher__group-title--Color --pf-v5-global--Color--dark-200 $pf-v5-global--Color--dark-200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher--c-divider--MarginTop | 0.5rem | ||
--pf-v5-c-app-launcher--c-divider--MarginTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-app-launcher | --pf-v5-c-app-launcher--c-divider--MarginBottom | 0.5rem | ||
--pf-v5-c-app-launcher--c-divider--MarginBottom --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-app-launcher .pf-v5-c-divider:last-child | --pf-v5-c-app-launcher--c-divider--MarginBottom | 0 | ||
| .pf-v5-c-app-launcher__toggle:hover | --pf-v5-c-app-launcher__toggle--Color | #151515 | ||
--pf-v5-c-app-launcher__toggle--Color --pf-v5-c-app-launcher__toggle--hover--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-app-launcher__toggle:active | --pf-v5-c-app-launcher__toggle--Color | #151515 | ||
--pf-v5-c-app-launcher__toggle--Color --pf-v5-c-app-launcher__toggle--active--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-app-launcher__toggle:focus | --pf-v5-c-app-launcher__toggle--Color | #151515 | ||
--pf-v5-c-app-launcher__toggle--Color --pf-v5-c-app-launcher__toggle--focus--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-app-launcher__toggle:disabled | --pf-v5-c-app-launcher__toggle--Color | #d2d2d2 | ||
--pf-v5-c-app-launcher__toggle--Color --pf-v5-c-app-launcher__toggle--disabled--Color --pf-v5-global--disabled-color--200 $pf-v5-global--disabled-color--200 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-app-launcher.pf-m-top .pf-v5-c-app-launcher__menu | --pf-v5-c-app-launcher__menu--Top | 0 | ||
--pf-v5-c-app-launcher__menu--Top --pf-v5-c-app-launcher--m-top__menu--Top 0 | ||||
| .pf-v5-c-app-launcher__menu.pf-m-static | --pf-v5-c-app-launcher--m-top__menu--TranslateY | 0 | ||
| .pf-v5-c-app-launcher__menu-wrapper.pf-m-favorite | --pf-v5-c-app-launcher__menu-item--m-action--Color | #f0ab00 | ||
--pf-v5-c-app-launcher__menu-item--m-action--Color --pf-v5-c-app-launcher__menu-item--m-favorite__menu-item--m-action--Color --pf-v5-global--palette--gold-400 $pf-v5-color-gold-400 #f0ab00 | ||||
| .pf-v5-c-app-launcher__menu-wrapper.pf-m-favorite | --pf-v5-c-app-launcher__menu-item--m-action--hover--Color | #c58c00 | ||
--pf-v5-c-app-launcher__menu-item--m-action--hover--Color --pf-v5-c-app-launcher__menu-item--m-favorite__menu-item--m-action--hover--Color --pf-v5-global--palette--gold-500 $pf-v5-color-gold-500 #c58c00 | ||||
| .pf-v5-c-app-launcher__menu-item:hover | --pf-v5-c-app-launcher__menu-item--m-action--Color | #6a6e73 | ||
--pf-v5-c-app-launcher__menu-item--m-action--Color --pf-v5-c-app-launcher__menu-item--hover__menu-item--m-action--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-app-launcher__menu-item:disabled | --pf-v5-c-app-launcher__menu-item--Color | #6a6e73 | ||
--pf-v5-c-app-launcher__menu-item--Color --pf-v5-c-app-launcher__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-app-launcher__menu-item:disabled | --pf-v5-c-app-launcher__menu-item--m-action--Color | #d2d2d2 | ||
--pf-v5-c-app-launcher__menu-item--m-action--Color --pf-v5-c-app-launcher__menu-item--m-action--disabled--Color --pf-v5-global--disabled-color--200 $pf-v5-global--disabled-color--200 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-app-launcher__menu-item.pf-m-link | --pf-v5-c-app-launcher__menu-item--PaddingRight | 0 | ||
--pf-v5-c-app-launcher__menu-item--PaddingRight --pf-v5-c-app-launcher__menu-item--m-link--PaddingRight 0 | ||||
| .pf-v5-c-app-launcher__menu-item.pf-m-link | --pf-v5-c-app-launcher__menu-item--hover--BackgroundColor | transparent | ||
--pf-v5-c-app-launcher__menu-item--hover--BackgroundColor --pf-v5-c-app-launcher__menu-item--m-link--hover--BackgroundColor transparent | ||||
| .pf-v5-c-app-launcher__menu-item.pf-m-action | --pf-v5-c-app-launcher__menu-item--Color | #6a6e73 | ||
--pf-v5-c-app-launcher__menu-item--Color --pf-v5-c-app-launcher__menu-item--m-action--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-app-launcher__menu-item.pf-m-action | --pf-v5-c-app-launcher__menu-item--Width | auto | ||
--pf-v5-c-app-launcher__menu-item--Width --pf-v5-c-app-launcher__menu-item--m-action--Width auto | ||||
| .pf-v5-c-app-launcher__menu-item.pf-m-action | --pf-v5-c-app-launcher__menu-item--hover--BackgroundColor | transparent | ||
--pf-v5-c-app-launcher__menu-item--hover--BackgroundColor --pf-v5-c-app-launcher__menu-item--m-action--hover--BackgroundColor transparent | ||||
| .pf-v5-c-app-launcher__menu-item.pf-m-action:hover | --pf-v5-c-app-launcher__menu-item--m-action--Color | #151515 | ||
--pf-v5-c-app-launcher__menu-item--m-action--Color --pf-v5-c-app-launcher__menu-item--m-action--hover--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
View source on GitHub
