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.
Note: Application launcher is built on dropdown, for extended API go to dropdown documentation.
To add a tooltip, use the tooltip
prop and optionally add more tooltip props by using tooltipProps
. For more tooltip information go to tooltip.
Examples
Props
ApplicationLauncher
Name | Type | Default | Description |
---|---|---|---|
aria-label | string | 'Application launcher' | Adds accessible text to the button. Required for plain buttons |
className | string | '' | Additional element css classes |
direction | DropdownDirection | 'up' | 'down' | DropdownDirection.down | Display menu above or below dropdown toggle |
favorites | string[] | [] | ID list of favorited ApplicationLauncherItems |
favoritesLabel | string | 'Favorites' | Label for the favorites group |
isDisabled | boolean | false | Render Application launcher toggle as disabled icon |
isGrouped | boolean | false | Flag to indicate if application launcher has groups |
isOpen | boolean | false | open bool |
items | React.ReactNode[] | [] | Array of application launcher items |
menuAppendTo | HTMLElement | (() => HTMLElement) | 'inline' | 'parent' | 'inline' | The container to append the menu to. Defaults to 'inline'. If your menu is being cut off you can append it to an element higher up the DOM tree. Some examples: menuAppendTo="parent" menuAppendTo={() => document.body} menuAppendTo={document.getElementById('target')} |
onFavorite | (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, itemId: string, isFavorite: boolean) => void | Enables favorites. Callback called when an ApplicationLauncherItem's favorite button is clicked | |
onSearch | (event: React.FormEvent<HTMLInputElement>, textInput: string) => void | Enables search. Callback called when text input is entered into search box | |
onSelect | (event: any) => void | (_event: any): any => undefined | Function callback called when user selects item |
onToggle | ( event: MouseEvent | TouchEvent | KeyboardEvent | React.KeyboardEvent<any> | React.MouseEvent<HTMLButtonElement>, isOpen: boolean ) => void | (_event: any, _value: boolean): any => undefined | Callback called when application launcher toggle is clicked |
position | DropdownPosition | 'right' | 'left' | DropdownPosition.left | Indicates where menu will be alligned horizontally |
searchNoResultsText | string | 'No results found' | Text for search input when no results are found |
searchPlaceholderText | string | 'Filter by name...' | Placeholder text for search input |
searchProps | any | Additional properties for search input | |
toggleIcon | React.ReactNode | <ThIcon /> | Toggle Icon, optional to override the icon used for the toggle |
toggleId | string | ID of toggle | |
zIndex | number | z-index of the application launcher when menuAppendTo is not inline. |
ApplicationLauncherItem
Name | Type | Default | Description |
---|---|---|---|
ariaIsFavoriteLabel | string | 'starred' | Aria label text for favoritable button when favorited |
ariaIsNotFavoriteLabel | string | 'not starred' | Aria label text for favoritable button when not favorited |
className | No type info | '' | |
component | React.ReactNode | 'a' | A ReactElement to render, or a string to use as the component tag. Example: component={<Link to="/components/alert/">Alert</Link>} Example: component="button" |
customChild | React.ReactNode | Custom item rendering that receives the ApplicationLauncherContext | |
enterTriggersArrowDown | boolean | false | Flag indicating if hitting enter triggers an arrow down key press. Automatically passed to favorites list items. |
icon | React.ReactNode | null | Icon rendered before the text |
id | string | ID of the item. Required for tracking favorites. | |
isExternal | boolean | false | If clicking on the item should open the page in a separate window |
isFavorite | boolean | null | Flag indicating if the item is favorited |
tooltip | React.ReactNode | null | Tooltip to display when hovered over the item |
tooltipProps | any | null | Additional tooltip props forwarded to the Tooltip component |
ApplicationLauncherContent
Name | Type | Default | Description |
---|---|---|---|
childrenrequired | React.ReactNode | Main content to be rendered |
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