Examples
Select builds off of the Menu component suite to wrap commonly used properties and functions for a select menu. See the Menu documentation for a full list of properties that may be passed through Select to further customize the select menu, or the custom menu examples for additional examples of fully functional menus.
Option variations
Showcases different option variants and customizations that are commonly used in a select menu. For a more complete list, see the Menu documentation.
Props
Select
| Name | Type | Default | Description |
|---|---|---|---|
| togglerequired | SelectToggleProps | ((toggleRef: React.RefObject<any>) => React.ReactNode) | Select toggle. The toggle should either be a renderer function which forwards the given toggle ref, or a direct ReactNode that should be passed along with the toggleRef property. | |
| children | React.ReactNode | Anything which can be rendered in a select | |
| className | string | Classes applied to root element of select | |
| isOpen | boolean | Flag to indicate if select is open | |
| isPlain | boolean | Indicates if the select should be without the outer box-shadow | |
| onOpenChange | (isOpen: boolean) => void | Callback to allow the select component to change the open state of the menu. Triggered by clicking outside of the menu, or by pressing any keys specificed in onOpenChangeKeys. | |
| onOpenChangeKeysBeta | string[] | Keys that trigger onOpenChange, defaults to tab and escape. It is highly recommended to include Escape in the array, while Tab may be omitted if the menu contains non-menu items that are focusable. | |
| onSelect | (event?: React.MouseEvent<Element, MouseEvent>, value?: string | number) => void | Function callback when user selects an option. | |
| popperProps | SelectPopperProps | Additional properties to pass to the popper | |
| roleBeta | string | Determines the accessible role of the select. For a checkbox select pass in "menu". | |
| selected | any | any[] | Single select option value for single select menus, or array of select option values for multi select. You can also specify isSelected on the SelectOption. | |
| shouldFocusToggleOnSelect | boolean | Flag indicating the toggle should be focused after a selection. If this use case is too restrictive, the optional toggleRef property with a node toggle may be used to control focus. | |
| zIndex | number | z-index of the select menu |
SelectOption
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Anything which can be rendered in a select option | |
| className | string | Classes applied to root element of select option | |
| description | React.ReactNode | Description of the option | |
| hasCheckbox | boolean | Indicates the option has a checkbox | |
| icon | React.ReactNode | Render option with icon | |
| isDisabled | boolean | Indicates the option is disabled | |
| isExternalLink | boolean | Render an external link icon on focus or hover, and set the link's "target" attribute to a value of "_blank". | |
| isFocused | boolean | Indicates the option is focused | |
| isSelected | boolean | Indicates the option is selected | |
| value | any | Identifies the component in the Select onSelect callback |
SelectGroup
| Name | Type | Default | Description |
|---|---|---|---|
| childrenrequired | React.ReactNode | Anything which can be rendered in a select group | |
| className | string | Classes applied to root element of select group | |
| label | string | Label of the select group |
SelectList
| Name | Type | Default | Description |
|---|---|---|---|
| childrenrequired | React.ReactNode | Anything which can be rendered in a select list | |
| className | string | Classes applied to root element of select list | |
| isAriaMultiselectableBeta | boolean | false | Indicates to assistive technologies whether more than one item can be selected for a non-checkbox select. |
MenuToggle
| Name | Type | Default | Description |
|---|---|---|---|
| badge | BadgeProps | React.ReactNode | Optional badge rendered inside the toggle, after the children content | |
| children | React.ReactNode | Content rendered inside the toggle | |
| className | string | Additional classes added to the toggle | |
| icon | React.ReactNode | Optional icon or image rendered inside the toggle, before the children content. It is recommended to wrap most basic icons in our icon component. | |
| isDisabled | boolean | Flag indicating the toggle is disabled | |
| isExpanded | boolean | Flag indicating the toggle has expanded styling | |
| isFullHeight | boolean | Flag indicating the toggle is full height | |
| isFullWidth | boolean | Flag indicating the toggle takes up the full width of its parent | |
| splitButtonOptions | SplitButtonOptions | Object used to configure a split button menu toggle | |
| variant | 'default' | 'plain' | 'primary' | 'plainText' | 'secondary' | 'typeahead' | Variant styles of the menu toggle |
SelectToggleProps
| Name | Type | Default | Description |
|---|---|---|---|
| toggleNoderequired | React.ReactNode | Select toggle node. | |
| toggleRef | React.RefObject<HTMLButtonElement> | Reference to the toggle. |
SelectPopperProps
| Name | Type | Default | Description |
|---|---|---|---|
| direction | 'up' | 'down' | Vertical direction of the popper. If enableFlip is set to true, this will set the initial direction before the popper flips. | |
| enableFlip | boolean | Enable to flip the popper when it reaches the boundary | |
| maxWidth | string | 'trigger' | Maximum width of the popper. If the value is "trigger", it will set the max width to the select toggle's width | |
| minWidth | string | 'trigger' | Minimum width of the popper. If the value is "trigger", it will set the min width to the select toggle's width | |
| position | 'right' | 'left' | 'center' | Horizontal position of the popper | |
| width | string | 'trigger' | Custom width of the popper. If the value is "trigger", it will set the width to the select toggle's width |
CSS variables
| Selector | Variable | Value | ||
|---|---|---|---|---|
| .pf-v5-c-select | --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-select | --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-select | --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-select | --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-select | --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-select | --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-select | --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-select | --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-select | --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-select | --pf-v5-c-select__toggle--PaddingTop | 0.375rem | ||
--pf-v5-c-select__toggle--PaddingTop --pf-v5-global--spacer--form-element $pf-v5-global--spacer--form-element pf-size-prem(6px) 0.375rem | ||||
| .pf-v5-c-select | --pf-v5-c-select__toggle--PaddingRight | 0.5rem | ||
--pf-v5-c-select__toggle--PaddingRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-select | --pf-v5-c-select__toggle--PaddingBottom | 0.375rem | ||
--pf-v5-c-select__toggle--PaddingBottom --pf-v5-global--spacer--form-element $pf-v5-global--spacer--form-element pf-size-prem(6px) 0.375rem | ||||
| .pf-v5-c-select | --pf-v5-c-select__toggle--PaddingLeft | 0.5rem | ||
--pf-v5-c-select__toggle--PaddingLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-select | --pf-v5-c-select__toggle--MinWidth | 44px | ||
--pf-v5-c-select__toggle--MinWidth --pf-v5-global--target-size--MinWidth $pf-v5-global--target-size--MinWidth 44px | ||||
| .pf-v5-c-select | --pf-v5-c-select__toggle--FontSize | 1rem | ||
--pf-v5-c-select__toggle--FontSize --pf-v5-global--FontSize--md $pf-v5-global--FontSize--md pf-font-prem(16px) 1rem | ||||
| .pf-v5-c-select | --pf-v5-c-select__toggle--FontWeight | 400 | ||
--pf-v5-c-select__toggle--FontWeight --pf-v5-global--FontWeight--normal $pf-v5-global--FontWeight--normal 400 | ||||
| .pf-v5-c-select | --pf-v5-c-select__toggle--LineHeight | 1.5 | ||
--pf-v5-c-select__toggle--LineHeight --pf-v5-global--LineHeight--md $pf-v5-global--LineHeight--md 1.5 | ||||
| .pf-v5-c-select | --pf-v5-c-select__toggle--BackgroundColor | #fff | ||
--pf-v5-c-select__toggle--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-select | --pf-v5-c-select__toggle--before--BorderTopWidth | 1px | ||
--pf-v5-c-select__toggle--before--BorderTopWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-select | --pf-v5-c-select__toggle--before--BorderRightWidth | 1px | ||
--pf-v5-c-select__toggle--before--BorderRightWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-select | --pf-v5-c-select__toggle--before--BorderBottomWidth | 1px | ||
--pf-v5-c-select__toggle--before--BorderBottomWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-select | --pf-v5-c-select__toggle--before--BorderLeftWidth | 1px | ||
--pf-v5-c-select__toggle--before--BorderLeftWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-select | --pf-v5-c-select__toggle--before--BorderWidth | initial | ||
| .pf-v5-c-select | --pf-v5-c-select__toggle--before--BorderTopColor | #f0f0f0 | ||
--pf-v5-c-select__toggle--before--BorderTopColor --pf-v5-global--BorderColor--300 $pf-v5-global--BorderColor--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-select | --pf-v5-c-select__toggle--before--BorderRightColor | #f0f0f0 | ||
--pf-v5-c-select__toggle--before--BorderRightColor --pf-v5-global--BorderColor--300 $pf-v5-global--BorderColor--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-select | --pf-v5-c-select__toggle--before--BorderBottomColor | #8a8d90 | ||
--pf-v5-c-select__toggle--before--BorderBottomColor --pf-v5-global--BorderColor--200 $pf-v5-global--BorderColor--200 $pf-v5-color-black-500 #8a8d90 | ||||
| .pf-v5-c-select | --pf-v5-c-select__toggle--before--BorderLeftColor | #f0f0f0 | ||
--pf-v5-c-select__toggle--before--BorderLeftColor --pf-v5-global--BorderColor--300 $pf-v5-global--BorderColor--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-select | --pf-v5-c-select__toggle--Color | #151515 | ||
--pf-v5-c-select__toggle--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-select | --pf-v5-c-select__toggle--hover--before--BorderBottomColor | #06c | ||
--pf-v5-c-select__toggle--hover--before--BorderBottomColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-select | --pf-v5-c-select__toggle--focus--before--BorderBottomColor | #06c | ||
--pf-v5-c-select__toggle--focus--before--BorderBottomColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-select | --pf-v5-c-select__toggle--focus--before--BorderBottomWidth | 2px | ||
--pf-v5-c-select__toggle--focus--before--BorderBottomWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-select | --pf-v5-c-select__toggle--active--before--BorderBottomColor | #06c | ||
--pf-v5-c-select__toggle--active--before--BorderBottomColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-select | --pf-v5-c-select__toggle--active--before--BorderBottomWidth | 2px | ||
--pf-v5-c-select__toggle--active--before--BorderBottomWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-select | --pf-v5-c-select__toggle--m-expanded--before--BorderBottomColor | #06c | ||
--pf-v5-c-select__toggle--m-expanded--before--BorderBottomColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-select | --pf-v5-c-select__toggle--m-expanded--before--BorderBottomWidth | 2px | ||
--pf-v5-c-select__toggle--m-expanded--before--BorderBottomWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-select | --pf-v5-c-select__toggle--disabled--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-select__toggle--disabled--BackgroundColor --pf-v5-global--disabled-color--300 $pf-v5-global--disabled-color--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-select | --pf-v5-c-select__toggle--m-plain--before--BorderColor | transparent | ||
| .pf-v5-c-select | --pf-v5-c-select__toggle--m-placeholder--Color | transparent | ||
| .pf-v5-c-select | --pf-v5-c-select--m-invalid__toggle--before--BorderBottomColor | #c9190b | ||
--pf-v5-c-select--m-invalid__toggle--before--BorderBottomColor --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-select | --pf-v5-c-select--m-invalid__toggle--before--BorderBottomWidth | 2px | ||
--pf-v5-c-select--m-invalid__toggle--before--BorderBottomWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-select | --pf-v5-c-select--m-invalid__toggle--hover--before--BorderBottomColor | #c9190b | ||
--pf-v5-c-select--m-invalid__toggle--hover--before--BorderBottomColor --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-select | --pf-v5-c-select--m-invalid__toggle--focus--before--BorderBottomColor | #c9190b | ||
--pf-v5-c-select--m-invalid__toggle--focus--before--BorderBottomColor --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-select | --pf-v5-c-select--m-invalid__toggle--active--before--BorderBottomColor | #c9190b | ||
--pf-v5-c-select--m-invalid__toggle--active--before--BorderBottomColor --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-select | --pf-v5-c-select--m-invalid__toggle--m-expanded--before--BorderBottomColor | #c9190b | ||
--pf-v5-c-select--m-invalid__toggle--m-expanded--before--BorderBottomColor --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-select | --pf-v5-c-select--m-invalid__toggle-status-icon--Color | #c9190b | ||
--pf-v5-c-select--m-invalid__toggle-status-icon--Color --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-select | --pf-v5-c-select--m-success__toggle--before--BorderBottomColor | #3e8635 | ||
--pf-v5-c-select--m-success__toggle--before--BorderBottomColor --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
| .pf-v5-c-select | --pf-v5-c-select--m-success__toggle--before--BorderBottomWidth | 2px | ||
--pf-v5-c-select--m-success__toggle--before--BorderBottomWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-select | --pf-v5-c-select--m-success__toggle--hover--before--BorderBottomColor | #3e8635 | ||
--pf-v5-c-select--m-success__toggle--hover--before--BorderBottomColor --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
| .pf-v5-c-select | --pf-v5-c-select--m-success__toggle--focus--before--BorderBottomColor | #3e8635 | ||
--pf-v5-c-select--m-success__toggle--focus--before--BorderBottomColor --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
| .pf-v5-c-select | --pf-v5-c-select--m-success__toggle--active--before--BorderBottomColor | #3e8635 | ||
--pf-v5-c-select--m-success__toggle--active--before--BorderBottomColor --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
| .pf-v5-c-select | --pf-v5-c-select--m-success__toggle--m-expanded--before--BorderBottomColor | #3e8635 | ||
--pf-v5-c-select--m-success__toggle--m-expanded--before--BorderBottomColor --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
| .pf-v5-c-select | --pf-v5-c-select--m-success__toggle-status-icon--Color | #3e8635 | ||
--pf-v5-c-select--m-success__toggle-status-icon--Color --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
| .pf-v5-c-select | --pf-v5-c-select--m-warning__toggle--before--BorderBottomColor | #f0ab00 | ||
--pf-v5-c-select--m-warning__toggle--before--BorderBottomColor --pf-v5-global--warning-color--100 $pf-v5-global--warning-color--100 $pf-v5-color-gold-400 #f0ab00 | ||||
| .pf-v5-c-select | --pf-v5-c-select--m-warning__toggle--before--BorderBottomWidth | 2px | ||
--pf-v5-c-select--m-warning__toggle--before--BorderBottomWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-select | --pf-v5-c-select--m-warning__toggle--hover--before--BorderBottomColor | #f0ab00 | ||
--pf-v5-c-select--m-warning__toggle--hover--before--BorderBottomColor --pf-v5-global--warning-color--100 $pf-v5-global--warning-color--100 $pf-v5-color-gold-400 #f0ab00 | ||||
| .pf-v5-c-select | --pf-v5-c-select--m-warning__toggle--focus--before--BorderBottomColor | #f0ab00 | ||
--pf-v5-c-select--m-warning__toggle--focus--before--BorderBottomColor --pf-v5-global--warning-color--100 $pf-v5-global--warning-color--100 $pf-v5-color-gold-400 #f0ab00 | ||||
| .pf-v5-c-select | --pf-v5-c-select--m-warning__toggle--active--before--BorderBottomColor | #f0ab00 | ||
--pf-v5-c-select--m-warning__toggle--active--before--BorderBottomColor --pf-v5-global--warning-color--100 $pf-v5-global--warning-color--100 $pf-v5-color-gold-400 #f0ab00 | ||||
| .pf-v5-c-select | --pf-v5-c-select--m-warning__toggle--m-expanded--before--BorderBottomColor | #f0ab00 | ||
--pf-v5-c-select--m-warning__toggle--m-expanded--before--BorderBottomColor --pf-v5-global--warning-color--100 $pf-v5-global--warning-color--100 $pf-v5-color-gold-400 #f0ab00 | ||||
| .pf-v5-c-select | --pf-v5-c-select--m-warning__toggle-status-icon--Color | #f0ab00 | ||
--pf-v5-c-select--m-warning__toggle-status-icon--Color --pf-v5-global--warning-color--100 $pf-v5-global--warning-color--100 $pf-v5-color-gold-400 #f0ab00 | ||||
| .pf-v5-c-select | --pf-v5-c-select__toggle-wrapper--not-last-child--MarginRight | 0.25rem | ||
--pf-v5-c-select__toggle-wrapper--not-last-child--MarginRight --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-select | --pf-v5-c-select__toggle-wrapper--MaxWidth | calc(100% - 1.5rem) | ||
--pf-v5-c-select__toggle-wrapper--MaxWidth calc(100% - --pf-v5-global--spacer--lg) calc(100% - $pf-v5-global--spacer--lg) calc(100% - pf-size-prem(24px)) calc(100% - 1.5rem) | ||||
| .pf-v5-c-select | --pf-v5-c-select__toggle-wrapper--c-chip-group--MarginTop | 0.3125rem | ||
| .pf-v5-c-select | --pf-v5-c-select__toggle-wrapper--c-chip-group--MarginBottom | 0.3125rem | ||
| .pf-v5-c-select | --pf-v5-c-select__toggle-typeahead--FlexBasis | 10em | ||
| .pf-v5-c-select | --pf-v5-c-select__toggle-typeahead--BackgroundColor | transparent | ||
| .pf-v5-c-select | --pf-v5-c-select__toggle-typeahead--BorderTop | 1px solid transparent | ||
--pf-v5-c-select__toggle-typeahead--BorderTop --pf-v5-global--BorderWidth--sm solid transparent $pf-v5-global--BorderWidth--sm solid transparent 1px solid transparent | ||||
| .pf-v5-c-select | --pf-v5-c-select__toggle-typeahead--BorderRight | none | ||
| .pf-v5-c-select | --pf-v5-c-select__toggle-typeahead--BorderLeft | none | ||
| .pf-v5-c-select | --pf-v5-c-select__toggle-typeahead--MinWidth | 7.5rem | ||
| .pf-v5-c-select | --pf-v5-c-select__toggle--m-placeholder__toggle-text--Color | #6a6e73 | ||
--pf-v5-c-select__toggle--m-placeholder__toggle-text--Color --pf-v5-global--Color--dark-200 $pf-v5-global--Color--dark-200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-select | --pf-v5-c-select__toggle-icon--toggle-text--MarginLeft | 0.25rem | ||
--pf-v5-c-select__toggle-icon--toggle-text--MarginLeft --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-select | --pf-v5-c-select__toggle-badge--PaddingLeft | 0.5rem | ||
--pf-v5-c-select__toggle-badge--PaddingLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-select | --pf-v5-c-select__toggle-status-icon--MarginLeft | 0.25rem | ||
--pf-v5-c-select__toggle-status-icon--MarginLeft --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-select | --pf-v5-c-select__toggle-status-icon--Color | #151515 | ||
--pf-v5-c-select__toggle-status-icon--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-select | --pf-v5-c-select__toggle-arrow--MarginLeft | 1rem | ||
--pf-v5-c-select__toggle-arrow--MarginLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-select | --pf-v5-c-select__toggle-arrow--MarginRight | 0.5rem | ||
--pf-v5-c-select__toggle-arrow--MarginRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-select | --pf-v5-c-select__toggle-arrow--with-clear--MarginLeft | 0.5rem | ||
--pf-v5-c-select__toggle-arrow--with-clear--MarginLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-select | --pf-v5-c-select__toggle-arrow--m-top--m-expanded__toggle-arrow--Rotate | 180deg | ||
| .pf-v5-c-select | --pf-v5-c-select--m-plain__toggle-arrow--Color | #6a6e73 | ||
--pf-v5-c-select--m-plain__toggle-arrow--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-select | --pf-v5-c-select--m-plain--hover__toggle-arrow--Color | #151515 | ||
--pf-v5-c-select--m-plain--hover__toggle-arrow--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-select | --pf-v5-c-select__toggle-clear--PaddingRight | 0.5rem | ||
--pf-v5-c-select__toggle-clear--PaddingRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-select | --pf-v5-c-select__toggle-clear--PaddingLeft | 1rem | ||
--pf-v5-c-select__toggle-clear--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-select | --pf-v5-c-select__toggle-clear--toggle-button--PaddingLeft | 0.5rem | ||
--pf-v5-c-select__toggle-clear--toggle-button--PaddingLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-select | --pf-v5-c-select__toggle-button--Color | #151515 | ||
--pf-v5-c-select__toggle-button--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu--BackgroundColor | #fff | ||
--pf-v5-c-select__menu--BackgroundColor --pf-v5-global--BackgroundColor--light-100 $pf-v5-global--BackgroundColor--light-100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-select | --pf-v5-c-select__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-select__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-select | --pf-v5-c-select__menu--PaddingTop | 0.5rem | ||
--pf-v5-c-select__menu--PaddingTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu--PaddingBottom | 0.5rem | ||
--pf-v5-c-select__menu--PaddingBottom --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu--Top | calc(100% + 0.25rem) | ||
--pf-v5-c-select__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-select | --pf-v5-c-select__menu--ZIndex | 200 | ||
--pf-v5-c-select__menu--ZIndex --pf-v5-global--ZIndex--sm $pf-v5-global--ZIndex--sm 200 | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu--Width | auto | ||
| .pf-v5-c-select | --pf-v5-c-select__menu--MinWidth | 100% | ||
| .pf-v5-c-select | --pf-v5-c-select__menu--m-top--TranslateY | calc(-100% - 0.25rem) | ||
--pf-v5-c-select__menu--m-top--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-select | --pf-v5-c-select__list-item--m-loading--PaddingTop | 0.5rem | ||
--pf-v5-c-select__list-item--m-loading--PaddingTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu-item--PaddingTop | 0.5rem | ||
--pf-v5-c-select__menu-item--PaddingTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu-item--PaddingRight | 1rem | ||
--pf-v5-c-select__menu-item--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu-item--m-selected--PaddingRight | 3rem | ||
--pf-v5-c-select__menu-item--m-selected--PaddingRight --pf-v5-global--spacer--2xl $pf-v5-global--spacer--2xl pf-size-prem(48px) 3rem | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu-item--PaddingBottom | 0.5rem | ||
--pf-v5-c-select__menu-item--PaddingBottom --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu-item--PaddingLeft | 1rem | ||
--pf-v5-c-select__menu-item--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu-item--FontSize | 1rem | ||
--pf-v5-c-select__menu-item--FontSize --pf-v5-global--FontSize--md $pf-v5-global--FontSize--md pf-font-prem(16px) 1rem | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu-item--FontWeight | 400 | ||
--pf-v5-c-select__menu-item--FontWeight --pf-v5-global--FontWeight--normal $pf-v5-global--FontWeight--normal 400 | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu-item--LineHeight | 1.5 | ||
--pf-v5-c-select__menu-item--LineHeight --pf-v5-global--LineHeight--md $pf-v5-global--LineHeight--md 1.5 | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu-item--Color | #151515 | ||
--pf-v5-c-select__menu-item--Color --pf-v5-global--Color--dark-100 $pf-v5-global--Color--dark-100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu-item--disabled--Color | #6a6e73 | ||
--pf-v5-c-select__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-select | --pf-v5-c-select__menu-item--Width | 100% | ||
| .pf-v5-c-select | --pf-v5-c-select__menu-item--hover--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-select__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-select | --pf-v5-c-select__menu-item--focus--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-select__menu-item--focus--BackgroundColor --pf-v5-global--BackgroundColor--light-300 $pf-v5-global--BackgroundColor--light-300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu-item--disabled--BackgroundColor | transparent | ||
| .pf-v5-c-select | --pf-v5-c-select__menu-item--m-link--Width | auto | ||
| .pf-v5-c-select | --pf-v5-c-select__menu-item--m-link--hover--BackgroundColor | transparent | ||
| .pf-v5-c-select | --pf-v5-c-select__menu-item--m-link--focus--BackgroundColor | transparent | ||
| .pf-v5-c-select | --pf-v5-c-select__menu-item--m-action--Color | #6a6e73 | ||
--pf-v5-c-select__menu-item--m-action--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu-item--m-action--hover--Color | #151515 | ||
--pf-v5-c-select__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-select | --pf-v5-c-select__menu-item--m-action--focus--Color | #151515 | ||
--pf-v5-c-select__menu-item--m-action--focus--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu-item--m-action--disabled--Color | #d2d2d2 | ||
--pf-v5-c-select__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-select | --pf-v5-c-select__menu-item--m-action--Width | auto | ||
| .pf-v5-c-select | --pf-v5-c-select__menu-item--m-action--FontSize | 0.75rem | ||
--pf-v5-c-select__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-select | --pf-v5-c-select__menu-item--m-action--hover--BackgroundColor | transparent | ||
| .pf-v5-c-select | --pf-v5-c-select__menu-item--m-action--focus--BackgroundColor | transparent | ||
| .pf-v5-c-select | --pf-v5-c-select__menu-item--hover__menu-item--m-action--Color | #6a6e73 | ||
--pf-v5-c-select__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-select | --pf-v5-c-select__menu-item--m-favorite-action--Color | #6a6e73 | ||
--pf-v5-c-select__menu-item--m-favorite-action--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu-item--m-favorite-action--hover--Color | #151515 | ||
--pf-v5-c-select__menu-item--m-favorite-action--hover--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu-item--m-favorite-action--focus--Color | #151515 | ||
--pf-v5-c-select__menu-item--m-favorite-action--focus--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--Color | #f0ab00 | ||
--pf-v5-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--Color --pf-v5-global--palette--gold-400 $pf-v5-color-gold-400 #f0ab00 | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--hover--Color | #c58c00 | ||
--pf-v5-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--hover--Color --pf-v5-global--palette--gold-500 $pf-v5-color-gold-500 #c58c00 | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--focus--Color | #c58c00 | ||
--pf-v5-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--focus--Color --pf-v5-global--palette--gold-500 $pf-v5-color-gold-500 #c58c00 | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu-item--m-load--Color | #06c | ||
--pf-v5-c-select__menu-item--m-load--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-select | --pf-v5-c-select__menu-item-icon--Color | #06c | ||
--pf-v5-c-select__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-select | --pf-v5-c-select__menu-item-icon--FontSize | 0.75rem | ||
--pf-v5-c-select__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-select | --pf-v5-c-select__menu-item-icon--Right | 1rem | ||
--pf-v5-c-select__menu-item-icon--Right --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu-item-icon--Top | 50% | ||
| .pf-v5-c-select | --pf-v5-c-select__menu-item-icon--TranslateY | -50% | ||
| .pf-v5-c-select | --pf-v5-c-select__menu-item-action-icon--MinHeight | calc(1rem * 1.5) | ||
--pf-v5-c-select__menu-item-action-icon--MinHeight calc(--pf-v5-c-select__menu-item--FontSize * --pf-v5-c-select__menu-item--LineHeight) calc(--pf-v5-global--FontSize--md * --pf-v5-global--LineHeight--md) calc($pf-v5-global--FontSize--md * $pf-v5-global--LineHeight--md) calc(pf-font-prem(16px) * 1.5) calc(1rem * 1.5) | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu-item--match--FontWeight | 700 | ||
--pf-v5-c-select__menu-item--match--FontWeight --pf-v5-global--FontWeight--bold $pf-v5-global--FontWeight--bold 700 | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu-search--PaddingTop | 0.5rem | ||
--pf-v5-c-select__menu-search--PaddingTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu-search--PaddingRight | 1rem | ||
--pf-v5-c-select__menu-search--PaddingRight --pf-v5-c-select__menu-item--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu-search--PaddingBottom | 1rem | ||
--pf-v5-c-select__menu-search--PaddingBottom --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu-search--PaddingLeft | 1rem | ||
--pf-v5-c-select__menu-search--PaddingLeft --pf-v5-c-select__menu-item--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu-group--menu-group--PaddingTop | 0.5rem | ||
--pf-v5-c-select__menu-group--menu-group--PaddingTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu-group-title--PaddingTop | 0.5rem | ||
--pf-v5-c-select__menu-group-title--PaddingTop --pf-v5-c-select__menu-item--PaddingTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu-group-title--PaddingRight | 1rem | ||
--pf-v5-c-select__menu-group-title--PaddingRight --pf-v5-c-select__menu-item--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu-group-title--PaddingBottom | 0.5rem | ||
--pf-v5-c-select__menu-group-title--PaddingBottom --pf-v5-c-select__menu-item--PaddingBottom --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu-group-title--PaddingLeft | 1rem | ||
--pf-v5-c-select__menu-group-title--PaddingLeft --pf-v5-c-select__menu-item--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu-group-title--FontSize | 0.75rem | ||
--pf-v5-c-select__menu-group-title--FontSize --pf-v5-global--FontSize--xs $pf-v5-global--FontSize--xs pf-font-prem(12px) 0.75rem | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu-group-title--FontWeight | 400 | ||
--pf-v5-c-select__menu-group-title--FontWeight --pf-v5-global--FontWeight--normal $pf-v5-global--FontWeight--normal 400 | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu-group-title--Color | #6a6e73 | ||
--pf-v5-c-select__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-select | --pf-v5-c-select__menu-item-count--MarginLeft | 1rem | ||
--pf-v5-c-select__menu-item-count--MarginLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu-item-count--FontSize | 0.875rem | ||
--pf-v5-c-select__menu-item-count--FontSize --pf-v5-global--FontSize--sm $pf-v5-global--FontSize--sm pf-font-prem(14px) 0.875rem | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu-item-count--Color | #6a6e73 | ||
--pf-v5-c-select__menu-item-count--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu-item--disabled__menu-item-count--Color | #6a6e73 | ||
--pf-v5-c-select__menu-item--disabled__menu-item-count--Color --pf-v5-global--Color--dark-200 $pf-v5-global--Color--dark-200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu-item-description--FontSize | 0.75rem | ||
--pf-v5-c-select__menu-item-description--FontSize --pf-v5-global--FontSize--xs $pf-v5-global--FontSize--xs pf-font-prem(12px) 0.75rem | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu-item-description--Color | #6a6e73 | ||
--pf-v5-c-select__menu-item-description--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu-item-description--PaddingRight | 1rem | ||
--pf-v5-c-select__menu-item-description--PaddingRight --pf-v5-c-select__menu-item--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu-item-main--PaddingRight | 1rem | ||
--pf-v5-c-select__menu-item-main--PaddingRight --pf-v5-c-select__menu-item--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu-item--m-selected__menu-item-main--PaddingRight | 3rem | ||
--pf-v5-c-select__menu-item--m-selected__menu-item-main--PaddingRight --pf-v5-c-select__menu-item--m-selected--PaddingRight --pf-v5-global--spacer--2xl $pf-v5-global--spacer--2xl pf-size-prem(48px) 3rem | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu-footer--BoxShadow | 0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16) | ||
--pf-v5-c-select__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-select | --pf-v5-c-select__menu-footer--PaddingTop | 1rem | ||
--pf-v5-c-select__menu-footer--PaddingTop --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu-footer--PaddingRight | 1rem | ||
--pf-v5-c-select__menu-footer--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu-footer--PaddingBottom | 1rem | ||
--pf-v5-c-select__menu-footer--PaddingBottom --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu-footer--PaddingLeft | 1rem | ||
--pf-v5-c-select__menu-footer--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu-footer--MarginTop | 0.5rem | ||
--pf-v5-c-select__menu-footer--MarginTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-select | --pf-v5-c-select__menu-footer--MarginBottom | calc(0.5rem * -1) | ||
--pf-v5-c-select__menu-footer--MarginBottom calc(--pf-v5-global--spacer--sm * -1) calc($pf-v5-global--spacer--sm * -1) calc(pf-size-prem(8px) * -1) calc(0.5rem * -1) | ||||
| .pf-v5-c-select | --pf-v5-c-select-menu--c-divider--MarginTop | 0.5rem | ||
--pf-v5-c-select-menu--c-divider--MarginTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-select | --pf-v5-c-select-menu--c-divider--MarginBottom | 0.5rem | ||
--pf-v5-c-select-menu--c-divider--MarginBottom --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-select .pf-v5-c-divider:last-child | --pf-v5-c-select-menu--c-divider--MarginBottom | 0 | ||
| .pf-v5-c-select.pf-m-invalid | --pf-v5-c-select__toggle--before--BorderBottomColor | #c9190b | ||
--pf-v5-c-select__toggle--before--BorderBottomColor --pf-v5-c-select--m-invalid__toggle--before--BorderBottomColor --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-select.pf-m-invalid | --pf-v5-c-select__toggle--before--BorderBottomWidth | 2px | ||
--pf-v5-c-select__toggle--before--BorderBottomWidth --pf-v5-c-select--m-invalid__toggle--before--BorderBottomWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-select.pf-m-invalid | --pf-v5-c-select__toggle--hover--before--BorderBottomColor | #c9190b | ||
--pf-v5-c-select__toggle--hover--before--BorderBottomColor --pf-v5-c-select--m-invalid__toggle--hover--before--BorderBottomColor --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-select.pf-m-invalid | --pf-v5-c-select__toggle--focus--before--BorderBottomColor | #c9190b | ||
--pf-v5-c-select__toggle--focus--before--BorderBottomColor --pf-v5-c-select--m-invalid__toggle--focus--before--BorderBottomColor --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-select.pf-m-invalid | --pf-v5-c-select__toggle--active--before--BorderBottomColor | #c9190b | ||
--pf-v5-c-select__toggle--active--before--BorderBottomColor --pf-v5-c-select--m-invalid__toggle--active--before--BorderBottomColor --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-select.pf-m-invalid | --pf-v5-c-select__toggle--m-expanded--before--BorderBottomColor | #c9190b | ||
--pf-v5-c-select__toggle--m-expanded--before--BorderBottomColor --pf-v5-c-select--m-invalid__toggle--m-expanded--before--BorderBottomColor --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-select.pf-m-invalid | --pf-v5-c-select__toggle-status-icon--Color | #c9190b | ||
--pf-v5-c-select__toggle-status-icon--Color --pf-v5-c-select--m-invalid__toggle-status-icon--Color --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-select.pf-m-success | --pf-v5-c-select__toggle--before--BorderBottomColor | #3e8635 | ||
--pf-v5-c-select__toggle--before--BorderBottomColor --pf-v5-c-select--m-success__toggle--before--BorderBottomColor --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
| .pf-v5-c-select.pf-m-success | --pf-v5-c-select__toggle--before--BorderBottomWidth | 2px | ||
--pf-v5-c-select__toggle--before--BorderBottomWidth --pf-v5-c-select--m-success__toggle--before--BorderBottomWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-select.pf-m-success | --pf-v5-c-select__toggle--hover--before--BorderBottomColor | #3e8635 | ||
--pf-v5-c-select__toggle--hover--before--BorderBottomColor --pf-v5-c-select--m-success__toggle--hover--before--BorderBottomColor --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
| .pf-v5-c-select.pf-m-success | --pf-v5-c-select__toggle--focus--before--BorderBottomColor | #3e8635 | ||
--pf-v5-c-select__toggle--focus--before--BorderBottomColor --pf-v5-c-select--m-success__toggle--focus--before--BorderBottomColor --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
| .pf-v5-c-select.pf-m-success | --pf-v5-c-select__toggle--active--before--BorderBottomColor | #3e8635 | ||
--pf-v5-c-select__toggle--active--before--BorderBottomColor --pf-v5-c-select--m-success__toggle--active--before--BorderBottomColor --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
| .pf-v5-c-select.pf-m-success | --pf-v5-c-select__toggle--m-expanded--before--BorderBottomColor | #3e8635 | ||
--pf-v5-c-select__toggle--m-expanded--before--BorderBottomColor --pf-v5-c-select--m-success__toggle--m-expanded--before--BorderBottomColor --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
| .pf-v5-c-select.pf-m-success | --pf-v5-c-select__toggle-status-icon--Color | #3e8635 | ||
--pf-v5-c-select__toggle-status-icon--Color --pf-v5-c-select--m-success__toggle-status-icon--Color --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
| .pf-v5-c-select.pf-m-warning | --pf-v5-c-select__toggle--before--BorderBottomColor | #f0ab00 | ||
--pf-v5-c-select__toggle--before--BorderBottomColor --pf-v5-c-select--m-warning__toggle--before--BorderBottomColor --pf-v5-global--warning-color--100 $pf-v5-global--warning-color--100 $pf-v5-color-gold-400 #f0ab00 | ||||
| .pf-v5-c-select.pf-m-warning | --pf-v5-c-select__toggle--before--BorderBottomWidth | 2px | ||
--pf-v5-c-select__toggle--before--BorderBottomWidth --pf-v5-c-select--m-warning__toggle--before--BorderBottomWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-select.pf-m-warning | --pf-v5-c-select__toggle--hover--before--BorderBottomColor | #f0ab00 | ||
--pf-v5-c-select__toggle--hover--before--BorderBottomColor --pf-v5-c-select--m-warning__toggle--hover--before--BorderBottomColor --pf-v5-global--warning-color--100 $pf-v5-global--warning-color--100 $pf-v5-color-gold-400 #f0ab00 | ||||
| .pf-v5-c-select.pf-m-warning | --pf-v5-c-select__toggle--focus--before--BorderBottomColor | #f0ab00 | ||
--pf-v5-c-select__toggle--focus--before--BorderBottomColor --pf-v5-c-select--m-warning__toggle--focus--before--BorderBottomColor --pf-v5-global--warning-color--100 $pf-v5-global--warning-color--100 $pf-v5-color-gold-400 #f0ab00 | ||||
| .pf-v5-c-select.pf-m-warning | --pf-v5-c-select__toggle--active--before--BorderBottomColor | #f0ab00 | ||
--pf-v5-c-select__toggle--active--before--BorderBottomColor --pf-v5-c-select--m-warning__toggle--active--before--BorderBottomColor --pf-v5-global--warning-color--100 $pf-v5-global--warning-color--100 $pf-v5-color-gold-400 #f0ab00 | ||||
| .pf-v5-c-select.pf-m-warning | --pf-v5-c-select__toggle--m-expanded--before--BorderBottomColor | #f0ab00 | ||
--pf-v5-c-select__toggle--m-expanded--before--BorderBottomColor --pf-v5-c-select--m-warning__toggle--m-expanded--before--BorderBottomColor --pf-v5-global--warning-color--100 $pf-v5-global--warning-color--100 $pf-v5-color-gold-400 #f0ab00 | ||||
| .pf-v5-c-select.pf-m-warning | --pf-v5-c-select__toggle-status-icon--Color | #f0ab00 | ||
--pf-v5-c-select__toggle-status-icon--Color --pf-v5-c-select--m-warning__toggle-status-icon--Color --pf-v5-global--warning-color--100 $pf-v5-global--warning-color--100 $pf-v5-color-gold-400 #f0ab00 | ||||
| .pf-v5-c-select__menu-search + .pf-v5-c-divider | --pf-v5-c-select-menu--c-divider--MarginTop | 0 | ||
| .pf-v5-c-select__toggle.pf-m-disabled | --pf-v5-c-select__toggle--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-select__toggle--BackgroundColor --pf-v5-c-select__toggle--disabled--BackgroundColor --pf-v5-global--disabled-color--300 $pf-v5-global--disabled-color--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-select__toggle::before | --pf-v5-c-select__toggle--before--BorderWidth-base | 1px 1px 1px 1px | ||
--pf-v5-c-select__toggle--before--BorderWidth-base --pf-v5-c-select__toggle--before--BorderTopWidth --pf-v5-c-select__toggle--before--BorderRightWidth --pf-v5-c-select__toggle--before--BorderBottomWidth --pf-v5-c-select__toggle--before--BorderLeftWidth --pf-v5-global--BorderWidth--sm --pf-v5-global--BorderWidth--sm --pf-v5-global--BorderWidth--sm --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px 1px 1px 1px | ||||
| .pf-v5-c-select__toggle:hover | --pf-v5-c-select__toggle--before--BorderBottomColor | #06c | ||
--pf-v5-c-select__toggle--before--BorderBottomColor --pf-v5-c-select__toggle--hover--before--BorderBottomColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-select__toggle:focus | --pf-v5-c-select__toggle--before--BorderBottomColor | #06c | ||
--pf-v5-c-select__toggle--before--BorderBottomColor --pf-v5-c-select__toggle--focus--before--BorderBottomColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-select__toggle:focus | --pf-v5-c-select__toggle--before--BorderBottomWidth | 2px | ||
--pf-v5-c-select__toggle--before--BorderBottomWidth --pf-v5-c-select__toggle--focus--before--BorderBottomWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-select__toggle:active | --pf-v5-c-select__toggle--before--BorderBottomColor | #06c | ||
--pf-v5-c-select__toggle--before--BorderBottomColor --pf-v5-c-select__toggle--active--before--BorderBottomColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-select__toggle:active | --pf-v5-c-select__toggle--before--BorderBottomWidth | 2px | ||
--pf-v5-c-select__toggle--before--BorderBottomWidth | ||||