Examples
Available item selected
Available options
1 of 5 items selected
Chosen options
0 of 0 items selected
Multiple available items selected
Available options
3 of 5 items selected
Chosen options
0 of 0 items selected
Tree view with chosen and disabled options
Available options
0 of 10 items selected
Chosen options
0 of 0 items selected
Draggable
Activate the reorder button and use the arrow keys to reorder the list or use your mouse to drag/reorder. Press escape to cancel the reordering.
Available options
0 of 5 items selected
Chosen options
0 of 0 items selected
This is the aria-live section that provides real-time feedback to the user.
Documentation
Accessibility
Attribute | Applied to | Outcome |
---|---|---|
aria-live | [element with live text] | To give screen reader users live feedback about what's happening during interaction with the dual list selector, both during drag and drop interactions and keyboard interactions. Highly Recommended |
aria-labelledby="[id of .pf-v6-c-dual-list-selector__status-text] | .pf-v6-c-dual-list-selector__list [ul] | Gives the list an accessible name. |
role="listbox or tree or group" | .pf-v6-c-dual-list-selector__list [ul] | Indicates the list is single, a tree, or a subgroup within the tree. |
aria-multiselectable="true" | .pf-v6-c-dual-list-selector__list [ul] | Indicates the list is multiselectable. |
aria-activedescendant="" | .pf-v6-c-dual-list-selector__list [ul] | Indicates the list has clickable children. |
role="option or treeitem" | .pf-v6-c-dual-list-selector__list-item [li] | Indicates whether the item is part of a tree. |
aria-expanded="true" | .pf-v6-c-dual-list-selector__list-item [li] | Indicates a treeitem is expanded. |
Usage
Class | Applied | Outcome |
---|---|---|
.pf-v6-c-dual-list-selector | <div> | Initiates the dual list selector component. Required |
.pf-v6-c-dual-list-selector__pane | <div> | Initiates a dual list selector pane. Required |
.pf-v6-c-dual-list-selector__header | <div> | Initiates a dual list selector pane header. Required |
.pf-v6-c-dual-list-selector__title | <div> | Initiates a dual list selector pane title. Required |
.pf-v6-c-dual-list-selector__title-text | <div> | Initiates a dual list selector pane title text. Required |
.pf-v6-c-dual-list-selector__tools | <div> | Initiates a dual list selector tools. Required |
.pf-v6-c-dual-list-selector__filter | <div> | Initiates a dual list selector pane filter. Required |
.pf-v6-c-dual-list-selector__actions | <div> | Initiates a dual list selector pane actions. |
.pf-v6-c-dual-list-selector__actions-item | <div> | Initiates a dual list selector pane actions item. |
.pf-v6-c-dual-list-selector__status | <div> | Initiates a dual list selector pane selected status. Required |
.pf-v6-c-dual-list-selector__status-text | <span> | Initiates a dual list selector pane selected status text. Required |
.pf-v6-c-dual-list-selector__menu | <div> | Initiates a dual list selector pane menu container. Required |
.pf-v6-c-dual-list-selector__list | <ul> | Initiates a dual list selector pane menu list. Required |
.pf-v6-c-dual-list-selector__list-item | <li> | Initiates a dual list selector pane menu list item. Required |
.pf-v6-c-dual-list-selector__list-item-row | <div> | Initiates a dual list selector pane menu list item row. Required |
.pf-v6-c-dual-list-selector__draggable | <div> | Initiates a dual list selector pane draggable element. |
.pf-v6-c-dual-list-selector__item | <span> , <div> | Initiates a dual list selector pane menu item. Required |
.pf-v6-c-dual-list-selector__item-main | <span> | Initiates a dual list selector pane menu item main container. Required |
.pf-v6-c-dual-list-selector__item-check | <span> | Initiates the dual list selector item check. |
.pf-v6-c-dual-list-selector__item-count | <span> | Initiates the dual list selector item count. |
.pf-v6-c-dual-list-selector__item-toggle-icon | <span> | Initiates the dual list selector item toggle icon. |
.pf-v6-c-dual-list-selector__item-toggle | <button> | Initiates the dual list selector item toggle. |
.pf-v6-c-dual-list-selector__item-text | <span> | Initiates a dual list selector pane menu item text. Required |
.pf-v6-c-dual-list-selector__controls | <div> | Initiates the dual list selector controls. Required |
.pf-v6-c-dual-list-selector__controls-item | <div> | Initiates the dual list selector controls item. Required |
.pf-m-available | .pf-v6-c-dual-list-selector__pane | Defines a pane as the available list. |
.pf-m-chosen | .pf-v6-c-dual-list-selector__pane | Defines a pane as the chosen list. |
.pf-m-drag-over | .pf-v6-c-dual-list-selector__list | Modifies the dual list selector list to indicate that a draggable item is being dragged over the list. |
.pf-m-ghost-row | .pf-v6-c-dual-list-selector__list-item-row | Modifies the list item main to be a ghost row. |
.pf-m-selected | .pf-v6-c-dual-list-selector__list-item-row | Modifies the menu item for the selected state. |
.pf-m-check | .pf-v6-c-dual-list-selector__list-item-row | Indicates that an item is selectable with a checkbox. |
.pf-m-expandable | .pf-v6-c-dual-list-selector__list-item | Indicates that an item is expandable. |
.pf-m-expanded | .pf-v6-c-dual-list-selector__list-item | Indicates that an item is expanded. |
.pf-m-disabled | .pf-v6-c-dual-list-selector__list-item | Indicates that an item is disabled. Note: If an item is expandable, only the top level item needs the disabled class. |
CSS variables
Expand or collapse column | Selector | Variable | Value | |
---|---|---|---|---|
:where(:root) | --pf-v6-c-dual-list-selector__header--GridArea | pane-header | ||
:where(:root) | --pf-v6-c-dual-list-selector__tools--GridArea | pane-tools | ||
:where(:root) | --pf-v6-c-dual-list-selector__status--GridArea | pane-status | ||
:where(:root) | --pf-v6-c-dual-list-selector__menu--GridArea | pane-menu | ||
:where(:root) | --pf-v6-c-dual-list-selector__controls--GridArea | controls | ||
:where(:root) | --pf-v6-c-dual-list-selector--m-chosen__header--GridArea | pane-header-c | ||
:where(:root) | --pf-v6-c-dual-list-selector--m-chosen__tools--GridArea | pane-tools-c | ||
:where(:root) | --pf-v6-c-dual-list-selector--m-chosen__status--GridArea | pane-status-c | ||
:where(:root) | --pf-v6-c-dual-list-selector--m-chosen__menu--GridArea | pane-menu-c | ||
:where(:root) | --pf-v6-c-dual-list-selector--GridTemplateColumns--pane--MinMax--min | 12.5rem | ||
:where(:root) | --pf-v6-c-dual-list-selector--GridTemplateColumns--pane--MinMax--max | 28.125rem | ||
:where(:root) | --pf-v6-c-dual-list-selector__header--MarginBottom | 8px | ||
--pf-v6-c-dual-list-selector__header--MarginBottom --pf-t--global--spacer--sm --pf-t--global--spacer--200 8px | ||||
:where(:root) | --pf-v6-c-dual-list-selector__title-text--FontWeight | 500 | ||
--pf-v6-c-dual-list-selector__title-text--FontWeight --pf-t--global--font--weight--body--bold --pf-t--global--font--weight--body--200 500 | ||||
:where(:root) | --pf-v6-c-dual-list-selector__title-text--FontSize | 16px | ||
--pf-v6-c-dual-list-selector__title-text--FontSize --pf-t--global--font--size--body--lg --pf-t--global--font--size--md --pf-t--global--font--size--300 16px | ||||
:where(:root) | --pf-v6-c-dual-list-selector__tools--MarginBottom | 16px | ||
--pf-v6-c-dual-list-selector__tools--MarginBottom --pf-t--global--spacer--md --pf-t--global--spacer--300 16px | ||||
:where(:root) | --pf-v6-c-dual-list-selector__tools-filter--tools-actions--MarginLeft | 8px | ||
--pf-v6-c-dual-list-selector__tools-filter--tools-actions--MarginLeft --pf-t--global--spacer--sm --pf-t--global--spacer--200 8px | ||||
:where(:root) | --pf-v6-c-dual-list-selector__menu--BorderWidth | 1px | ||
--pf-v6-c-dual-list-selector__menu--BorderWidth --pf-t--global--border--width--regular --pf-t--global--border--width--100 1px | ||||
:where(:root) | --pf-v6-c-dual-list-selector__menu--BorderColor | #c7c7c7 | ||
--pf-v6-c-dual-list-selector__menu--BorderColor --pf-t--global--border--color--default --pf-t--global--border--color--100 --pf-t--color--gray--30 #c7c7c7 | ||||
:where(:root) | --pf-v6-c-dual-list-selector__menu--BorderRadius | 6px | ||
--pf-v6-c-dual-list-selector__menu--BorderRadius --pf-t--global--border--radius--small --pf-t--global--border--radius--200 6px | ||||
:where(:root) | --pf-v6-c-dual-list-selector__menu--MinHeight | 12.5rem | ||
:where(:root) | --pf-v6-c-dual-list-selector__menu--MaxHeight | 20rem | ||
:where(:root) | --pf-v6-c-dual-list-selector__menu--MarginBlockStart | 16px | ||
--pf-v6-c-dual-list-selector__menu--MarginBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 16px | ||||
:where(:root) | --pf-v6-c-dual-list-selector__list-item-row--FontSize | 14px | ||
--pf-v6-c-dual-list-selector__list-item-row--FontSize --pf-t--global--font--size--sm --pf-t--global--font--size--200 14px | ||||
:where(:root) | --pf-v6-c-dual-list-selector__list-item-row--BackgroundColor | rgba(255, 255, 255, 0.0000) | ||
--pf-v6-c-dual-list-selector__list-item-row--BackgroundColor --pf-t--global--background--color--action--plain--default rgba(255, 255, 255, 0.0000) | ||||
:where(:root) | --pf-v6-c-dual-list-selector__list-item-row--hover--BackgroundColor | #f2f2f2 | ||
--pf-v6-c-dual-list-selector__list-item-row--hover--BackgroundColor --pf-t--global--background--color--primary--hover --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2 | ||||
:where(:root) | --pf-v6-c-dual-list-selector__list-item-row--m-selected--BackgroundColor | #f2f2f2 | ||
--pf-v6-c-dual-list-selector__list-item-row--m-selected--BackgroundColor --pf-t--global--background--color--primary--clicked --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2 | ||||
:where(:root) | --pf-v6-c-dual-list-selector__list-item--m-ghost-row--BackgroundColor | rgba(199, 199, 199, 0.2500) | ||
--pf-v6-c-dual-list-selector__list-item--m-ghost-row--BackgroundColor --pf-t--global--background--color--action--plain--clicked --pf-t--global--background--color--600 rgba(199, 199, 199, 0.2500) | ||||
:where(:root) | --pf-v6-c-dual-list-selector__list-item--m-ghost-row--Opacity | .4 | ||
:where(:root) | --pf-v6-c-dual-list-selector__item--PaddingTop | 8px | ||
--pf-v6-c-dual-list-selector__item--PaddingTop --pf-t--global--spacer--sm --pf-t--global--spacer--200 8px | ||||
:where(:root) | --pf-v6-c-dual-list-selector__item--PaddingRight | 16px | ||
--pf-v6-c-dual-list-selector__item--PaddingRight --pf-t--global--spacer--md --pf-t--global--spacer--300 16px | ||||
:where(:root) | --pf-v6-c-dual-list-selector__item--PaddingBottom | 8px | ||
--pf-v6-c-dual-list-selector__item--PaddingBottom --pf-t--global--spacer--sm --pf-t--global--spacer--200 8px | ||||
:where(:root) | --pf-v6-c-dual-list-selector__item--PaddingLeft | 16px | ||
--pf-v6-c-dual-list-selector__item--PaddingLeft --pf-t--global--spacer--md --pf-t--global--spacer--300 16px | ||||
:where(:root) | --pf-v6-c-dual-list-selector__item--m-expandable--PaddingLeft | 16px | ||
--pf-v6-c-dual-list-selector__item--m-expandable--PaddingLeft --pf-t--global--spacer--md --pf-t--global--spacer--300 16px | ||||
:where(:root) | --pf-v6-c-dual-list-selector__item--indent--base | calc(16px + 8px + 14px) | ||
--pf-v6-c-dual-list-selector__item--indent--base calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize) calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm) calc(16px + 8px + --pf-t--global--font--size--200) calc(16px + 8px + 14px) | ||||
:where(:root) | --pf-v6-c-dual-list-selector__item--nested-indent--base | calc(calc(16px + 8px + 14px) - 16px) | ||
--pf-v6-c-dual-list-selector__item--nested-indent--base calc(--pf-v6-c-dual-list-selector__item--indent--base - --pf-t--global--spacer--md) calc(calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize) - --pf-t--global--spacer--300) calc(calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm) - 16px) calc(calc(16px + 8px + --pf-t--global--font--size--200) - 16px) calc(calc(16px + 8px + 14px) - 16px) | ||||
:where(:root) | --pf-v6-c-dual-list-selector__draggable--item--PaddingLeft | 4px | ||
--pf-v6-c-dual-list-selector__draggable--item--PaddingLeft --pf-t--global--spacer--xs --pf-t--global--spacer--100 4px | ||||
:where(:root) | --pf-v6-c-dual-list-selector__item-text--Color | #4d4d4d | ||
--pf-v6-c-dual-list-selector__item-text--Color --pf-t--global--text--color--subtle --pf-t--global--text--color--200 --pf-t--color--gray--60 #4d4d4d | ||||
:where(:root) | --pf-v6-c-dual-list-selector__list-item-row--m-selected__text--Color | #1f1f1f | ||
--pf-v6-c-dual-list-selector__list-item-row--m-selected__text--Color --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--90 #1f1f1f | ||||
:where(:root) | --pf-v6-c-dual-list-selector__list-item--m-disabled__item-text--Color | #a3a3a3 | ||
--pf-v6-c-dual-list-selector__list-item--m-disabled__item-text--Color --pf-t--global--text--color--disabled --pf-t--global--color--disabled--200 --pf-t--color--gray--40 #a3a3a3 | ||||
:where(:root) | --pf-v6-c-dual-list-selector__status--MarginBottom | 8px | ||
--pf-v6-c-dual-list-selector__status--MarginBottom --pf-t--global--spacer--sm --pf-t--global--spacer--200 8px | ||||
:where(:root) | --pf-v6-c-dual-list-selector__status-text--FontSize | 14px | ||
--pf-v6-c-dual-list-selector__status-text--FontSize --pf-t--global--font--size--sm --pf-t--global--font--size--200 14px | ||||
:where(:root) | --pf-v6-c-dual-list-selector__status-text--Color | #4d4d4d | ||
--pf-v6-c-dual-list-selector__status-text--Color --pf-t--global--text--color--subtle --pf-t--global--text--color--200 --pf-t--color--gray--60 #4d4d4d | ||||
:where(:root) | --pf-v6-c-dual-list-selector__controls--PaddingRight | 16px | ||
--pf-v6-c-dual-list-selector__controls--PaddingRight --pf-t--global--spacer--md --pf-t--global--spacer--300 16px | ||||
:where(:root) | --pf-v6-c-dual-list-selector__controls--PaddingLeft | 16px | ||
--pf-v6-c-dual-list-selector__controls--PaddingLeft --pf-t--global--spacer--md --pf-t--global--spacer--300 16px | ||||
:where(:root) | --pf-v6-c-dual-list-selector__controls--Gap | 8px | ||
--pf-v6-c-dual-list-selector__controls--Gap --pf-t--global--spacer--sm --pf-t--global--spacer--200 8px | ||||
:where(:root) | --pf-v6-c-dual-list-selector__controls--MarginBlockStart | 16px | ||
--pf-v6-c-dual-list-selector__controls--MarginBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 16px | ||||
:where(:root) | --pf-v6-c-dual-list-selector__item-toggle--PaddingRight | 8px | ||
--pf-v6-c-dual-list-selector__item-toggle--PaddingRight --pf-t--global--spacer--sm --pf-t--global--spacer--200 8px | ||||
:where(:root) | --pf-v6-c-dual-list-selector__list__list__item-toggle--Left | 0 | ||
:where(:root) | --pf-v6-c-dual-list-selector__list__list__item-toggle--TranslateX | -100% | ||
:where(:root) | --pf-v6-c-dual-list-selector__item-check--MarginRight | 8px | ||
--pf-v6-c-dual-list-selector__item-check--MarginRight --pf-t--global--spacer--sm --pf-t--global--spacer--200 8px | ||||
:where(:root) | --pf-v6-c-dual-list-selector__item--c-badge--m-read--BackgroundColor | #e0e0e0 | ||
--pf-v6-c-dual-list-selector__item--c-badge--m-read--BackgroundColor --pf-t--global--color--nonstatus--gray--default --pf-t--global--color--nonstatus--gray--100 --pf-t--color--gray--20 #e0e0e0 | ||||
:where(:root) | --pf-v6-c-dual-list-selector__item-toggle-icon--Rotate | 0 | ||
:where(:root) | --pf-v6-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate | 90deg | ||
:where(:root) | --pf-v6-c-dual-list-selector__item-toggle-icon--Transition | all 250ms cubic-bezier(0.42, 0, 0.58, 1) | ||
--pf-v6-c-dual-list-selector__item-toggle-icon--Transition --pf-t--global--transition all 250ms cubic-bezier(0.42, 0, 0.58, 1) | ||||
:where(:root) | --pf-v6-c-dual-list-selector__item-toggle-icon--MinWidth | 14px | ||
--pf-v6-c-dual-list-selector__item-toggle-icon--MinWidth --pf-v6-c-dual-list-selector__list-item-row--FontSize --pf-t--global--font--size--sm --pf-t--global--font--size--200 14px | ||||
:where(:root) | --pf-v6-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color | #a3a3a3 | ||
--pf-v6-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color --pf-t--global--icon--color--disabled --pf-t--global--color--disabled--200 --pf-t--color--gray--40 #a3a3a3 | ||||
.pf-v6-c-dual-list-selector__pane.pf-m-chosen | --pf-v6-c-dual-list-selector__header--GridArea | pane-header-c | ||
--pf-v6-c-dual-list-selector__header--GridArea --pf-v6-c-dual-list-selector--m-chosen__header--GridArea pane-header-c | ||||
.pf-v6-c-dual-list-selector__pane.pf-m-chosen | --pf-v6-c-dual-list-selector__tools--GridArea | pane-tools-c | ||
--pf-v6-c-dual-list-selector__tools--GridArea --pf-v6-c-dual-list-selector--m-chosen__tools--GridArea pane-tools-c | ||||
.pf-v6-c-dual-list-selector__pane.pf-m-chosen | --pf-v6-c-dual-list-selector__status--GridArea | pane-status-c | ||
--pf-v6-c-dual-list-selector__status--GridArea --pf-v6-c-dual-list-selector--m-chosen__status--GridArea pane-status-c | ||||
.pf-v6-c-dual-list-selector__pane.pf-m-chosen | --pf-v6-c-dual-list-selector__menu--GridArea | pane-menu-c | ||
--pf-v6-c-dual-list-selector__menu--GridArea --pf-v6-c-dual-list-selector--m-chosen__menu--GridArea pane-menu-c | ||||
.pf-v6-c-dual-list-selector__list | --pf-v6-c-dual-list-selector__item-toggle-icon--Rotate | 0 | ||
.pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__list | --pf-v6-c-dual-list-selector__item-toggle--MarginTop | 0 | ||
.pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__list | --pf-v6-c-dual-list-selector__item-toggle--MarginBottom | 0 | ||
.pf-v6-c-dual-list-selector__list-item:focus | --pf-v6-c-dual-list-selector__list-item-row--BackgroundColor | #f2f2f2 | ||
--pf-v6-c-dual-list-selector__list-item-row--BackgroundColor --pf-v6-c-dual-list-selector__list-item-row--hover--BackgroundColor --pf-t--global--background--color--primary--hover --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2 | ||||
.pf-v6-c-dual-list-selector__list-item.pf-m-expandable | --pf-v6-c-dual-list-selector__item--PaddingLeft | 16px | ||
--pf-v6-c-dual-list-selector__item--PaddingLeft --pf-v6-c-dual-list-selector__item--m-expandable--PaddingLeft --pf-t--global--spacer--md --pf-t--global--spacer--300 16px | ||||
.pf-v6-c-dual-list-selector__list-item.pf-m-expanded | --pf-v6-c-dual-list-selector__item-toggle-icon--Rotate | 90deg | ||
--pf-v6-c-dual-list-selector__item-toggle-icon--Rotate --pf-v6-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate 90deg | ||||
.pf-v6-c-dual-list-selector__list-item.pf-m-disabled | --pf-v6-c-dual-list-selector__item-text--Color | #a3a3a3 | ||
--pf-v6-c-dual-list-selector__item-text--Color --pf-v6-c-dual-list-selector__list-item--m-disabled__item-text--Color --pf-t--global--text--color--disabled --pf-t--global--color--disabled--200 --pf-t--color--gray--40 #a3a3a3 | ||||
.pf-v6-c-dual-list-selector__list-item.pf-m-disabled | --pf-v6-c-dual-list-selector__item-toggle-icon--Color | #a3a3a3 | ||
--pf-v6-c-dual-list-selector__item-toggle-icon--Color --pf-v6-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color --pf-t--global--icon--color--disabled --pf-t--global--color--disabled--200 --pf-t--color--gray--40 #a3a3a3 | ||||
.pf-v6-c-dual-list-selector__list-item-row.pf-m-selected | --pf-v6-c-dual-list-selector__list-item-row--BackgroundColor | #f2f2f2 | ||
--pf-v6-c-dual-list-selector__list-item-row--BackgroundColor --pf-v6-c-dual-list-selector__list-item-row--m-selected--BackgroundColor --pf-t--global--background--color--primary--clicked --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2 | ||||
.pf-v6-c-dual-list-selector__list-item-row.pf-m-selected .pf-v6-c-dual-list-selector__item-text | --pf-v6-c-dual-list-selector__item-text--Color | #1f1f1f | ||
--pf-v6-c-dual-list-selector__item-text--Color --pf-v6-c-dual-list-selector__list-item-row--m-selected__text--Color --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--90 #1f1f1f | ||||
.pf-v6-c-dual-list-selector__list-item-row:hover | --pf-v6-c-dual-list-selector__list-item-row--BackgroundColor | #f2f2f2 | ||
--pf-v6-c-dual-list-selector__list-item-row--BackgroundColor --pf-v6-c-dual-list-selector__list-item-row--hover--BackgroundColor --pf-t--global--background--color--primary--hover --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2 | ||||
.pf-v6-c-dual-list-selector__list-item-row.pf-m-check | --pf-v6-c-dual-list-selector__list-item-row--m-selected--BackgroundColor | transparent | ||
.pf-v6-c-dual-list-selector__list-item-row.pf-m-ghost-row | --pf-v6-c-dual-list-selector__list-item-row--BackgroundColor | rgba(199, 199, 199, 0.2500) | ||
--pf-v6-c-dual-list-selector__list-item-row--BackgroundColor --pf-v6-c-dual-list-selector__list-item--m-ghost-row--BackgroundColor --pf-t--global--background--color--action--plain--clicked --pf-t--global--background--color--600 rgba(199, 199, 199, 0.2500) | ||||
.pf-v6-c-dual-list-selector__draggable + .pf-v6-c-dual-list-selector__item | --pf-v6-c-dual-list-selector__item--PaddingLeft | 4px | ||
--pf-v6-c-dual-list-selector__item--PaddingLeft --pf-v6-c-dual-list-selector__draggable--item--PaddingLeft --pf-t--global--spacer--xs --pf-t--global--spacer--100 4px | ||||
.pf-v6-c-dual-list-selector__draggable .pf-v6-c-button | --pf-v6-c-button--FontSize | inherit | ||
.pf-v6-c-dual-list-selector__item-count .pf-v6-c-badge.pf-m-read | --pf-v6-c-badge--m-read--BackgroundColor | #e0e0e0 | ||
--pf-v6-c-badge--m-read--BackgroundColor --pf-v6-c-dual-list-selector__item--c-badge--m-read--BackgroundColor --pf-t--global--color--nonstatus--gray--default --pf-t--global--color--nonstatus--gray--100 --pf-t--color--gray--20 #e0e0e0 | ||||
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item | --pf-v6-c-dual-list-selector__item--PaddingLeft | calc(calc(calc(16px + 8px + 14px) - 16px) * 1 + calc(16px + 8px + 14px)) | ||
--pf-v6-c-dual-list-selector__item--PaddingLeft calc(--pf-v6-c-dual-list-selector__item--nested-indent--base * 1 + --pf-v6-c-dual-list-selector__item--indent--base) calc(calc(--pf-v6-c-dual-list-selector__item--indent--base - --pf-t--global--spacer--md) * 1 + calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize) - --pf-t--global--spacer--300) * 1 + calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm)) calc(calc(calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm) - 16px) * 1 + calc(16px + 8px + --pf-t--global--font--size--200)) calc(calc(calc(16px + 8px + --pf-t--global--font--size--200) - 16px) * 1 + calc(16px + 8px + 14px)) calc(calc(calc(16px + 8px + 14px) - 16px) * 1 + calc(16px + 8px + 14px)) | ||||
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item | --pf-v6-c-dual-list-selector__list__list__item-toggle--Left | 16px | ||
--pf-v6-c-dual-list-selector__list__list__item-toggle--Left --pf-v6-c-dual-list-selector__item--PaddingLeft --pf-t--global--spacer--md --pf-t--global--spacer--300 16px | ||||
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item | --pf-v6-c-dual-list-selector__item--PaddingLeft | calc(calc(calc(16px + 8px + 14px) - 16px) * 2 + calc(16px + 8px + 14px)) | ||
--pf-v6-c-dual-list-selector__item--PaddingLeft calc(--pf-v6-c-dual-list-selector__item--nested-indent--base * 2 + --pf-v6-c-dual-list-selector__item--indent--base) calc(calc(--pf-v6-c-dual-list-selector__item--indent--base - --pf-t--global--spacer--md) * 2 + calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize) - --pf-t--global--spacer--300) * 2 + calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm)) calc(calc(calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm) - 16px) * 2 + calc(16px + 8px + --pf-t--global--font--size--200)) calc(calc(calc(16px + 8px + --pf-t--global--font--size--200) - 16px) * 2 + calc(16px + 8px + 14px)) calc(calc(calc(16px + 8px + 14px) - 16px) * 2 + calc(16px + 8px + 14px)) | ||||
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item | --pf-v6-c-dual-list-selector__list__list__item-toggle--Left | 16px | ||
--pf-v6-c-dual-list-selector__list__list__item-toggle--Left --pf-v6-c-dual-list-selector__item--PaddingLeft --pf-t--global--spacer--md --pf-t--global--spacer--300 16px | ||||
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item | --pf-v6-c-dual-list-selector__item--PaddingLeft | calc(calc(calc(16px + 8px + 14px) - 16px) * 3 + calc(16px + 8px + 14px)) | ||
--pf-v6-c-dual-list-selector__item--PaddingLeft calc(--pf-v6-c-dual-list-selector__item--nested-indent--base * 3 + --pf-v6-c-dual-list-selector__item--indent--base) calc(calc(--pf-v6-c-dual-list-selector__item--indent--base - --pf-t--global--spacer--md) * 3 + calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize) - --pf-t--global--spacer--300) * 3 + calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm)) calc(calc(calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm) - 16px) * 3 + calc(16px + 8px + --pf-t--global--font--size--200)) calc(calc(calc(16px + 8px + --pf-t--global--font--size--200) - 16px) * 3 + calc(16px + 8px + 14px)) calc(calc(calc(16px + 8px + 14px) - 16px) * 3 + calc(16px + 8px + 14px)) | ||||
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item | --pf-v6-c-dual-list-selector__list__list__item-toggle--Left | 16px | ||
--pf-v6-c-dual-list-selector__list__list__item-toggle--Left --pf-v6-c-dual-list-selector__item--PaddingLeft --pf-t--global--spacer--md --pf-t--global--spacer--300 16px | ||||
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item | --pf-v6-c-dual-list-selector__item--PaddingLeft | calc(calc(calc(16px + 8px + 14px) - 16px) * 4 + calc(16px + 8px + 14px)) | ||
--pf-v6-c-dual-list-selector__item--PaddingLeft calc(--pf-v6-c-dual-list-selector__item--nested-indent--base * 4 + --pf-v6-c-dual-list-selector__item--indent--base) calc(calc(--pf-v6-c-dual-list-selector__item--indent--base - --pf-t--global--spacer--md) * 4 + calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize) - --pf-t--global--spacer--300) * 4 + calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm)) calc(calc(calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm) - 16px) * 4 + calc(16px + 8px + --pf-t--global--font--size--200)) calc(calc(calc(16px + 8px + --pf-t--global--font--size--200) - 16px) * 4 + calc(16px + 8px + 14px)) calc(calc(calc(16px + 8px + 14px) - 16px) * 4 + calc(16px + 8px + 14px)) | ||||
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item | --pf-v6-c-dual-list-selector__list__list__item-toggle--Left | 16px | ||
--pf-v6-c-dual-list-selector__list__list__item-toggle--Left --pf-v6-c-dual-list-selector__item--PaddingLeft --pf-t--global--spacer--md --pf-t--global--spacer--300 16px | ||||
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item | --pf-v6-c-dual-list-selector__item--PaddingLeft | calc(calc(calc(16px + 8px + 14px) - 16px) * 5 + calc(16px + 8px + 14px)) | ||
--pf-v6-c-dual-list-selector__item--PaddingLeft calc(--pf-v6-c-dual-list-selector__item--nested-indent--base * 5 + --pf-v6-c-dual-list-selector__item--indent--base) calc(calc(--pf-v6-c-dual-list-selector__item--indent--base - --pf-t--global--spacer--md) * 5 + calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize) - --pf-t--global--spacer--300) * 5 + calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm)) calc(calc(calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm) - 16px) * 5 + calc(16px + 8px + --pf-t--global--font--size--200)) calc(calc(calc(16px + 8px + --pf-t--global--font--size--200) - 16px) * 5 + calc(16px + 8px + 14px)) calc(calc(calc(16px + 8px + 14px) - 16px) * 5 + calc(16px + 8px + 14px)) | ||||
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item | --pf-v6-c-dual-list-selector__list__list__item-toggle--Left | 16px | ||
--pf-v6-c-dual-list-selector__list__list__item-toggle--Left --pf-v6-c-dual-list-selector__item--PaddingLeft --pf-t--global--spacer--md --pf-t--global--spacer--300 16px | ||||
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item | --pf-v6-c-dual-list-selector__item--PaddingLeft | calc(calc(calc(16px + 8px + 14px) - 16px) * 6 + calc(16px + 8px + 14px)) | ||
--pf-v6-c-dual-list-selector__item--PaddingLeft calc(--pf-v6-c-dual-list-selector__item--nested-indent--base * 6 + --pf-v6-c-dual-list-selector__item--indent--base) calc(calc(--pf-v6-c-dual-list-selector__item--indent--base - --pf-t--global--spacer--md) * 6 + calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize) - --pf-t--global--spacer--300) * 6 + calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm)) calc(calc(calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm) - 16px) * 6 + calc(16px + 8px + --pf-t--global--font--size--200)) calc(calc(calc(16px + 8px + --pf-t--global--font--size--200) - 16px) * 6 + calc(16px + 8px + 14px)) calc(calc(calc(16px + 8px + 14px) - 16px) * 6 + calc(16px + 8px + 14px)) | ||||
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item | --pf-v6-c-dual-list-selector__list__list__item-toggle--Left | 16px | ||
--pf-v6-c-dual-list-selector__list__list__item-toggle--Left --pf-v6-c-dual-list-selector__item--PaddingLeft --pf-t--global--spacer--md --pf-t--global--spacer--300 16px | ||||
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item | --pf-v6-c-dual-list-selector__item--PaddingLeft | calc(calc(calc(16px + 8px + 14px) - 16px) * 7 + calc(16px + 8px + 14px)) | ||
--pf-v6-c-dual-list-selector__item--PaddingLeft calc(--pf-v6-c-dual-list-selector__item--nested-indent--base * 7 + --pf-v6-c-dual-list-selector__item--indent--base) calc(calc(--pf-v6-c-dual-list-selector__item--indent--base - --pf-t--global--spacer--md) * 7 + calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize) - --pf-t--global--spacer--300) * 7 + calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm)) calc(calc(calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm) - 16px) * 7 + calc(16px + 8px + --pf-t--global--font--size--200)) calc(calc(calc(16px + 8px + --pf-t--global--font--size--200) - 16px) * 7 + calc(16px + 8px + 14px)) calc(calc(calc(16px + 8px + 14px) - 16px) * 7 + calc(16px + 8px + 14px)) | ||||
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item | --pf-v6-c-dual-list-selector__list__list__item-toggle--Left | 16px | ||
--pf-v6-c-dual-list-selector__list__list__item-toggle--Left --pf-v6-c-dual-list-selector__item--PaddingLeft --pf-t--global--spacer--md --pf-t--global--spacer--300 16px | ||||
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item | --pf-v6-c-dual-list-selector__item--PaddingLeft | calc(calc(calc(16px + 8px + 14px) - 16px) * 8 + calc(16px + 8px + 14px)) | ||
--pf-v6-c-dual-list-selector__item--PaddingLeft calc(--pf-v6-c-dual-list-selector__item--nested-indent--base * 8 + --pf-v6-c-dual-list-selector__item--indent--base) calc(calc(--pf-v6-c-dual-list-selector__item--indent--base - --pf-t--global--spacer--md) * 8 + calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize) - --pf-t--global--spacer--300) * 8 + calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm)) calc(calc(calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm) - 16px) * 8 + calc(16px + 8px + --pf-t--global--font--size--200)) calc(calc(calc(16px + 8px + --pf-t--global--font--size--200) - 16px) * 8 + calc(16px + 8px + 14px)) calc(calc(calc(16px + 8px + 14px) - 16px) * 8 + calc(16px + 8px + 14px)) | ||||
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item | --pf-v6-c-dual-list-selector__list__list__item-toggle--Left | 16px | ||
--pf-v6-c-dual-list-selector__list__list__item-toggle--Left --pf-v6-c-dual-list-selector__item--PaddingLeft --pf-t--global--spacer--md --pf-t--global--spacer--300 16px | ||||
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item | --pf-v6-c-dual-list-selector__item--PaddingLeft | calc(calc(calc(16px + 8px + 14px) - 16px) * 9 + calc(16px + 8px + 14px)) | ||
--pf-v6-c-dual-list-selector__item--PaddingLeft calc(--pf-v6-c-dual-list-selector__item--nested-indent--base * 9 + --pf-v6-c-dual-list-selector__item--indent--base) calc(calc(--pf-v6-c-dual-list-selector__item--indent--base - --pf-t--global--spacer--md) * 9 + calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize) - --pf-t--global--spacer--300) * 9 + calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm)) calc(calc(calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm) - 16px) * 9 + calc(16px + 8px + --pf-t--global--font--size--200)) calc(calc(calc(16px + 8px + --pf-t--global--font--size--200) - 16px) * 9 + calc(16px + 8px + 14px)) calc(calc(calc(16px + 8px + 14px) - 16px) * 9 + calc(16px + 8px + 14px)) | ||||
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item | --pf-v6-c-dual-list-selector__list__list__item-toggle--Left | 16px | ||
--pf-v6-c-dual-list-selector__list__list__item-toggle--Left --pf-v6-c-dual-list-selector__item--PaddingLeft --pf-t--global--spacer--md --pf-t--global--spacer--300 16px | ||||
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item | --pf-v6-c-dual-list-selector__item--PaddingLeft | calc(calc(calc(16px + 8px + 14px) - 16px) * 10 + calc(16px + 8px + 14px)) | ||
--pf-v6-c-dual-list-selector__item--PaddingLeft calc(--pf-v6-c-dual-list-selector__item--nested-indent--base * 10 + --pf-v6-c-dual-list-selector__item--indent--base) calc(calc(--pf-v6-c-dual-list-selector__item--indent--base - --pf-t--global--spacer--md) * 10 + calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize) - --pf-t--global--spacer--300) * 10 + calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm)) calc(calc(calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm) - 16px) * 10 + calc(16px + 8px + --pf-t--global--font--size--200)) calc(calc(calc(16px + 8px + --pf-t--global--font--size--200) - 16px) * 10 + calc(16px + 8px + 14px)) calc(calc(calc(16px + 8px + 14px) - 16px) * 10 + calc(16px + 8px + 14px)) | ||||
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item | --pf-v6-c-dual-list-selector__list__list__item-toggle--Left | 16px | ||
--pf-v6-c-dual-list-selector__list__list__item-toggle--Left --pf-v6-c-dual-list-selector__item--PaddingLeft --pf-t--global--spacer--md --pf-t--global--spacer--300 16px |
View source on GitHub