HTML

Context selector

ExamplesDocumentationCSS Variables

Examples

Context selector example

Copied to clipboard

Documentation

Accessibility

Added after react implementation

Class Applied to Outcome
.pf-c-context-selector <div> Initiates a context selector.
.pf-c-context-selector__toggle <button> Initiates a toggle.
.pf-c-context-selector__toggle-text <span> Initiates text inside the toggle.
.pf-c-context-selector__toggle-icon <i> Inititiates icon inside the toggle.
.pf-c-context-selector__menu <div> Initiaties a menu
.pf-c-context-selector__menu-input <div> Initiates a container for the input group.
.pf-c-context-selector__menu-list <ul> Initiaties an unordered list of menu items that sits under the input container.
.pf-c-context-selector__menu-list-item <li> Initiaties a menu item.
.pf-m-expanded .pf-c-context-selector Modifies for the expanded state.

CSS Variables

--pf-c-context-selector--Widthc_context_selector_Width15.625rem
--pf-c-context-selector__menu--BackgroundColorc_context_selector__menu_BackgroundColor#fff
--pf-c-context-selector__menu--BorderWidthc_context_selector__menu_BorderWidth1px
--pf-c-context-selector__menu--BoxShadowc_context_selector__menu_BoxShadow0 0.0625rem 0.0625rem 0rem rgba(3,3,3,.05),0 0.25rem 0.5rem 0.25rem rgba(3,3,3,.06)
--pf-c-context-selector__menu--PaddingTopc_context_selector__menu_PaddingTop0.5rem
--pf-c-context-selector__menu--Topc_context_selector__menu_Topcalc(100% + 0.25rem)
--pf-c-context-selector__menu--ZIndexc_context_selector__menu_ZIndex100
--pf-c-context-selector__menu-input--BottomBorderColorc_context_selector__menu_input_BottomBorderColor#d2d2d2
--pf-c-context-selector__menu-input--BottomBorderWidthc_context_selector__menu_input_BottomBorderWidth1px
--pf-c-context-selector__menu-input--PaddingBottomc_context_selector__menu_input_PaddingBottom1rem
--pf-c-context-selector__menu-input--PaddingLeftc_context_selector__menu_input_PaddingLeft1rem
--pf-c-context-selector__menu-input--PaddingRightc_context_selector__menu_input_PaddingRight1rem
--pf-c-context-selector__menu-input--PaddingTopc_context_selector__menu_input_PaddingTop0.5rem
--pf-c-context-selector__menu-list--MaxHeightc_context_selector__menu_list_MaxHeight12.5rem
--pf-c-context-selector__menu-list-item--PaddingBottomc_context_selector__menu_list_item_PaddingBottom0.5rem
--pf-c-context-selector__menu-list-item--PaddingLeftc_context_selector__menu_list_item_PaddingLeft1.5rem
--pf-c-context-selector__menu-list-item--PaddingRightc_context_selector__menu_list_item_PaddingRight1.5rem
--pf-c-context-selector__menu-list-item--PaddingTopc_context_selector__menu_list_item_PaddingTop0.5rem
--pf-c-context-selector__menu-list-item--disabled--Colorc_context_selector__menu_list_item_disabled_Color#72767b
--pf-c-context-selector__menu-list-item--hover--BackgroundColorc_context_selector__menu_list_item_hover_BackgroundColor#ededed
--pf-c-context-selector__toggle--BorderBottomColorc_context_selector__toggle_BorderBottomColor#06c
--pf-c-context-selector__toggle--BorderLeftColorc_context_selector__toggle_BorderLeftColor#ededed
--pf-c-context-selector__toggle--BorderRightColorc_context_selector__toggle_BorderRightColor#ededed
--pf-c-context-selector__toggle--BorderTopColorc_context_selector__toggle_BorderTopColor#ededed
--pf-c-context-selector__toggle--BorderWidthc_context_selector__toggle_BorderWidth1px
--pf-c-context-selector__toggle--Colorc_context_selector__toggle_Color#151515
--pf-c-context-selector__toggle--PaddingBottomc_context_selector__toggle_PaddingBottom0.375rem
--pf-c-context-selector__toggle--PaddingLeftc_context_selector__toggle_PaddingLeft0.5rem
--pf-c-context-selector__toggle--PaddingRightc_context_selector__toggle_PaddingRight0.5rem
--pf-c-context-selector__toggle--PaddingTopc_context_selector__toggle_PaddingTop0.375rem
--pf-c-context-selector__toggle--active--BorderBottomColorc_context_selector__toggle_active_BorderBottomColor#06c
--pf-c-context-selector__toggle--active--BorderBottomWidthc_context_selector__toggle_active_BorderBottomWidth2px
--pf-c-context-selector__toggle--expanded--BorderBottomColorc_context_selector__toggle_expanded_BorderBottomColor#06c
--pf-c-context-selector__toggle--expanded--BorderBottomWidthc_context_selector__toggle_expanded_BorderBottomWidth2px
--pf-c-context-selector__toggle--hover--BorderBottomColorc_context_selector__toggle_hover_BorderBottomColor#06c
--pf-c-context-selector__toggle-icon--MarginLeftc_context_selector__toggle_icon_MarginLeft1rem
--pf-c-context-selector__toggle-icon--MarginRightc_context_selector__toggle_icon_MarginRight0.5rem
--pf-c-context-selector__toggle-text--FontSizec_context_selector__toggle_text_FontSize1rem
--pf-c-context-selector__toggle-text--FontWeightc_context_selector__toggle_text_FontWeight400
--pf-c-context-selector__toggle-text--LineHeightc_context_selector__toggle_text_LineHeight1.5