Dual list selector

Info alert:Beta feature

This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum.

Examples

Basic

0 of 4 items selected

0 of 0 items selected

Basic with search

0 of 4 items selected

0 of 0 items selected

Using more complex options with actions

0 of 4 items selected

0 of 0 items selected

Expandable options with checkboxes

0 of 7 items selected

0 of 0 items selected

Props

DualListSelector

Name	Type	Required	Default	Description
addAll	(newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => void	No		Optional callback for the add all button
addAllAriaLabel	string	No	'Add all'	Accessible label for the add all button
addSelected	(newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => void	No		Optional callback for the add selected button
addSelectedAriaLabel	string	No	'Add selected'	Accessible label for the add selected button
availableOptions	React.ReactNode[] \| DualListSelectorTreeItemData[]	No	[]	Options to display in the available options pane. When using trees, the options should be in the DualListSelectorTreeItemData[] format.
availableOptionsActions	React.ReactNode[]	No		Actions to be displayed above the available options pane.
availableOptionsSearchAriaLabel	string	No	'Available search input'	Accessible label for the search input on the available options pane.
availableOptionsStatus	string	No		Status message to display above the available options pane.
availableOptionsTitle	string	No	'Available options'	Title applied to the available options pane.
chosenOptions	React.ReactNode[] \| DualListSelectorTreeItemData[]	No	[]	Options to display in the chosen options pane. When using trees, the options should be in the DualListSelectorTreeItemData[] format.
chosenOptionsActions	React.ReactNode[]	No		Actions to be displayed above the chosen options pane.
chosenOptionsSearchAriaLabel	string	No	'Chosen search input'	Accessible label for the search input on the chosen options pane.
chosenOptionsStatus	string	No		Status message to display above the chosen options pane.
chosenOptionsTitle	string	No	'Chosen options'	Title applied to the chosen options pane.
className	string	No		Additional classes applied to the dual list selector.
controlsAriaLabel	string	No	'Selector controls'	Accessible label for the controls between the two panes.
filterOption	(option: React.ReactNode, input: string) => boolean	No		Optional filter function for custom filtering based on search string.
id	string	No	getUniqueId('dual-list-selector')	Id of the dual list selector.
isSearchable	boolean	No		Flag indicating a search bar should be included above both the available and chosen panes.
isTree	boolean	No
onAvailableOptionsSearchInputChanged	(value: string, event: React.FormEvent<HTMLInputElement>) => void	No		A callback for when the search input value for available options changes.
onChosenOptionsSearchInputChanged	(value: string, event: React.FormEvent<HTMLInputElement>) => void	No		A callback for when the search input value for chosen options changes.
onListChange	(newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => void	No		Callback fired every time options are chosen or removed
onOptionCheck	( e: React.MouseEvent \| React.ChangeEvent<HTMLInputElement>, checked: boolean, checkedId: string, newCheckedItems: string[] ) => void	No		Optional callback fired when an option is checked
onOptionSelect	(e: React.MouseEvent \| React.ChangeEvent) => void	No		Optional callback fired when an option is selected
removeAll	(newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => void	No		Optional callback for the remove all button
removeAllAriaLabel	string	No	'Remove all'	Accessible label for the remove all button
removeSelected	(newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => void	No		Optional callback for the remove selected button
removeSelectedAriaLabel	string	No	'Remove selected'	Accessible label for the remove selected button

CSS variables


	.pf-c-dual-list-selector	--pf-c-dual-list-selector__header--GridArea	pane-header
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__tools--GridArea	pane-tools
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__status--GridArea	pane-status
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__menu--GridArea	pane-menu
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__controls--GridArea	controls
	.pf-c-dual-list-selector	--pf-c-dual-list-selector--m-chosen__header--GridArea	pane-header-c
	.pf-c-dual-list-selector	--pf-c-dual-list-selector--m-chosen__tools--GridArea	pane-tools-c
	.pf-c-dual-list-selector	--pf-c-dual-list-selector--m-chosen__status--GridArea	pane-status-c
	.pf-c-dual-list-selector	--pf-c-dual-list-selector--m-chosen__menu--GridArea	pane-menu-c
	.pf-c-dual-list-selector	--pf-c-dual-list-selector--GridTemplateColumns--pane--MinMax--min	12.5rem
	.pf-c-dual-list-selector	--pf-c-dual-list-selector--GridTemplateColumns--pane--MinMax--max	28.125rem
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__header--MarginBottom	0.5rem
--pf-c-dual-list-selector__header--MarginBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__title-text--FontWeight	700
--pf-c-dual-list-selector__title-text--FontWeight --pf-global--FontWeight--bold $pf-global--FontWeight--bold 700
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__tools--MarginBottom	1rem
--pf-c-dual-list-selector__tools--MarginBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__tools-filter--tools-actions--MarginLeft	0.5rem
--pf-c-dual-list-selector__tools-filter--tools-actions--MarginLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__menu--BorderWidth	1px
--pf-c-dual-list-selector__menu--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__menu--BorderColor	#d2d2d2
--pf-c-dual-list-selector__menu--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__menu--MinHeight	12.5rem
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__menu--MaxHeight	20rem
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__item--PaddingTop	0.5rem
--pf-c-dual-list-selector__item--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__item--PaddingRight	1rem
--pf-c-dual-list-selector__item--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__item--PaddingBottom	0.5rem
--pf-c-dual-list-selector__item--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__item--PaddingLeft	1rem
--pf-c-dual-list-selector__item--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__item--FontSize	0.875rem
--pf-c-dual-list-selector__item--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__item--BackgroundColor	transparent
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__item--hover--BackgroundColor	#f0f0f0
--pf-c-dual-list-selector__item--hover--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #f0f0f0
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__item--focus-within--BackgroundColor	#f0f0f0
--pf-c-dual-list-selector__item--focus-within--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #f0f0f0
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__item--m-selected--BackgroundColor	#f0f0f0
--pf-c-dual-list-selector__item--m-selected--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #f0f0f0
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__item--m-expandable--PaddingLeft	0
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__item--indent--base	calc(1rem + 0.5rem + 0.875rem)
--pf-c-dual-list-selector__item--indent--base calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__item--FontSize) calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm) calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm) calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px)) calc(1rem + 0.5rem + 0.875rem)
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__item--nested-indent--base	calc(calc(1rem + 0.5rem + 0.875rem) - 1rem)
--pf-c-dual-list-selector__item--nested-indent--base calc(--pf-c-dual-list-selector__item--indent--base - --pf-global--spacer--md) calc(calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__item--FontSize) - $pf-global--spacer--md) calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm) - $pf-global--spacer--md) calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm) - $pf-global--spacer--md) calc(calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px)) - pf-size-prem(16px)) calc(calc(1rem + 0.5rem + 0.875rem) - 1rem)
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__item-text--Color	#151515
--pf-c-dual-list-selector__item-text--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__item--m-selected__text--Color	#06c
--pf-c-dual-list-selector__item--m-selected__text--Color --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__item--m-selected__text--FontWeight	700
--pf-c-dual-list-selector__item--m-selected__text--FontWeight --pf-global--FontWeight--bold $pf-global--FontWeight--bold 700
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__status--MarginBottom	0.5rem
--pf-c-dual-list-selector__status--MarginBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__status-text--FontSize	0.875rem
--pf-c-dual-list-selector__status-text--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__status-text--Color	#6a6e73
--pf-c-dual-list-selector__status-text--Color --pf-global--Color--200 $pf-global--Color--200 $pf-color-black-600 #6a6e73
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__controls--PaddingRight	1rem
--pf-c-dual-list-selector__controls--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__controls--PaddingLeft	1rem
--pf-c-dual-list-selector__controls--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__item-toggle--PaddingTop	0.5rem
--pf-c-dual-list-selector__item-toggle--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__item-toggle--PaddingRight	0.5rem
--pf-c-dual-list-selector__item-toggle--PaddingRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__item-toggle--PaddingBottom	0.5rem
--pf-c-dual-list-selector__item-toggle--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__item-toggle--PaddingLeft	1rem
--pf-c-dual-list-selector__item-toggle--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__item-toggle--MarginTop	calc(0.5rem * -1)
--pf-c-dual-list-selector__item-toggle--MarginTop calc(--pf-global--spacer--sm * -1) calc($pf-global--spacer--sm * -1) calc(pf-size-prem(8px) * -1) calc(0.5rem * -1)
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__item-toggle--MarginBottom	calc(0.5rem * -1)
--pf-c-dual-list-selector__item-toggle--MarginBottom calc(--pf-global--spacer--sm * -1) calc($pf-global--spacer--sm * -1) calc(pf-size-prem(8px) * -1) calc(0.5rem * -1)
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__list__list__item-toggle--Left	0
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__list__list__item-toggle--TranslateX	-100%
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__item-check--MarginRight	0.5rem
--pf-c-dual-list-selector__item-check--MarginRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__item-count--Marginleft	0.5rem
--pf-c-dual-list-selector__item-count--Marginleft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__item--c-badge--m-read--BackgroundColor	#d2d2d2
--pf-c-dual-list-selector__item--c-badge--m-read--BackgroundColor --pf-global--disabled-color--200 $pf-global--disabled-color--200 $pf-color-black-300 #d2d2d2
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__item-toggle-icon--Rotate	0
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate	90deg
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__item-toggle-icon--Transition	all 250ms cubic-bezier(.42, 0, .58, 1)
--pf-c-dual-list-selector__item-toggle-icon--Transition --pf-global--Transition $pf-global--Transition all 250ms cubic-bezier(.42, 0, .58, 1)
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__item-toggle-icon--MinWidth	0.875rem
--pf-c-dual-list-selector__item-toggle-icon--MinWidth --pf-c-dual-list-selector__item--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-dual-list-selector__pane.pf-m-chosen	--pf-c-dual-list-selector__header--GridArea	pane-header-c
--pf-c-dual-list-selector__header--GridArea --pf-c-dual-list-selector--m-chosen__header--GridArea pane-header-c
	.pf-c-dual-list-selector__pane.pf-m-chosen	--pf-c-dual-list-selector__tools--GridArea	pane-tools-c
--pf-c-dual-list-selector__tools--GridArea --pf-c-dual-list-selector--m-chosen__tools--GridArea pane-tools-c
	.pf-c-dual-list-selector__pane.pf-m-chosen	--pf-c-dual-list-selector__status--GridArea	pane-status-c
--pf-c-dual-list-selector__status--GridArea --pf-c-dual-list-selector--m-chosen__status--GridArea pane-status-c
	.pf-c-dual-list-selector__pane.pf-m-chosen	--pf-c-dual-list-selector__menu--GridArea	pane-menu-c
--pf-c-dual-list-selector__menu--GridArea --pf-c-dual-list-selector--m-chosen__menu--GridArea pane-menu-c
	.pf-c-dual-list-selector__list .pf-c-dual-list-selector__list	--pf-c-dual-list-selector__item-toggle--MarginTop	0
	.pf-c-dual-list-selector__list .pf-c-dual-list-selector__list	--pf-c-dual-list-selector__item-toggle--MarginBottom	0
	.pf-c-dual-list-selector__list-item.pf-m-expandable	--pf-c-dual-list-selector__item--PaddingLeft	0
--pf-c-dual-list-selector__item--PaddingLeft --pf-c-dual-list-selector__item--m-expandable--PaddingLeft 0
	.pf-c-dual-list-selector__list-item.pf-m-expanded > .pf-c-dual-list-selector__item	--pf-c-dual-list-selector__item-toggle-icon--Rotate	90deg
--pf-c-dual-list-selector__item-toggle-icon--Rotate --pf-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate 90deg
	.pf-c-dual-list-selector__item:hover	--pf-c-dual-list-selector__item--BackgroundColor	#f0f0f0
--pf-c-dual-list-selector__item--BackgroundColor --pf-c-dual-list-selector__item--hover--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #f0f0f0
	.pf-c-dual-list-selector__item:focus-within	--pf-c-dual-list-selector__item--BackgroundColor	#f0f0f0
--pf-c-dual-list-selector__item--BackgroundColor --pf-c-dual-list-selector__item--focus-within--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #f0f0f0
	.pf-c-dual-list-selector__item.pf-m-selected	--pf-c-dual-list-selector__item--BackgroundColor	#f0f0f0
--pf-c-dual-list-selector__item--BackgroundColor --pf-c-dual-list-selector__item--m-selected--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #f0f0f0
	.pf-c-dual-list-selector__item.pf-m-selected .pf-c-dual-list-selector__item-text	--pf-c-dual-list-selector__item-text--Color	#06c
--pf-c-dual-list-selector__item-text--Color --pf-c-dual-list-selector__item--m-selected__text--Color --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-dual-list-selector__item.pf-m-check	--pf-c-dual-list-selector__item--m-selected--BackgroundColor	transparent
	.pf-c-dual-list-selector__item .pf-c-dual-list-selector__item-count .pf-c-badge.pf-m-read	--pf-c-badge--m-read--BackgroundColor	#d2d2d2
--pf-c-badge--m-read--BackgroundColor --pf-c-dual-list-selector__item--c-badge--m-read--BackgroundColor --pf-global--disabled-color--200 $pf-global--disabled-color--200 $pf-color-black-300 #d2d2d2
	.pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item	--pf-c-dual-list-selector__item--PaddingLeft	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 1 + calc(1rem + 0.5rem + 0.875rem))
--pf-c-dual-list-selector__item--PaddingLeft calc(--pf-c-dual-list-selector__item--nested-indent--base * 1 + --pf-c-dual-list-selector__item--indent--base) calc(calc(--pf-c-dual-list-selector__item--indent--base - --pf-global--spacer--md) * 1 + calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__item--FontSize)) calc(calc(calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__item--FontSize) - $pf-global--spacer--md) * 1 + calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm) - $pf-global--spacer--md) * 1 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm) - $pf-global--spacer--md) * 1 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px)) - pf-size-prem(16px)) * 1 + calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px))) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 1 + calc(1rem + 0.5rem + 0.875rem))
	.pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item	--pf-c-dual-list-selector__list__list__item-toggle--Left	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 1 + calc(1rem + 0.5rem + 0.875rem))
--pf-c-dual-list-selector__list__list__item-toggle--Left --pf-c-dual-list-selector__item--PaddingLeft calc(--pf-c-dual-list-selector__item--nested-indent--base * 1 + --pf-c-dual-list-selector__item--indent--base) calc(calc(--pf-c-dual-list-selector__item--indent--base - --pf-global--spacer--md) * 1 + calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__item--FontSize)) calc(calc(calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__item--FontSize) - $pf-global--spacer--md) * 1 + calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm) - $pf-global--spacer--md) * 1 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm) - $pf-global--spacer--md) * 1 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px)) - pf-size-prem(16px)) * 1 + calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px))) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 1 + calc(1rem + 0.5rem + 0.875rem))
	.pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item	--pf-c-dual-list-selector__item--PaddingLeft	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 2 + calc(1rem + 0.5rem + 0.875rem))
--pf-c-dual-list-selector__item--PaddingLeft calc(--pf-c-dual-list-selector__item--nested-indent--base * 2 + --pf-c-dual-list-selector__item--indent--base) calc(calc(--pf-c-dual-list-selector__item--indent--base - --pf-global--spacer--md) * 2 + calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__item--FontSize)) calc(calc(calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__item--FontSize) - $pf-global--spacer--md) * 2 + calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm) - $pf-global--spacer--md) * 2 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm) - $pf-global--spacer--md) * 2 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px)) - pf-size-prem(16px)) * 2 + calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px))) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 2 + calc(1rem + 0.5rem + 0.875rem))
	.pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item	--pf-c-dual-list-selector__list__list__item-toggle--Left	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 2 + calc(1rem + 0.5rem + 0.875rem))
--pf-c-dual-list-selector__list__list__item-toggle--Left --pf-c-dual-list-selector__item--PaddingLeft calc(--pf-c-dual-list-selector__item--nested-indent--base * 2 + --pf-c-dual-list-selector__item--indent--base) calc(calc(--pf-c-dual-list-selector__item--indent--base - --pf-global--spacer--md) * 2 + calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__item--FontSize)) calc(calc(calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__item--FontSize) - $pf-global--spacer--md) * 2 + calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm) - $pf-global--spacer--md) * 2 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm) - $pf-global--spacer--md) * 2 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px)) - pf-size-prem(16px)) * 2 + calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px))) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 2 + calc(1rem + 0.5rem + 0.875rem))
	.pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item	--pf-c-dual-list-selector__item--PaddingLeft	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 3 + calc(1rem + 0.5rem + 0.875rem))
--pf-c-dual-list-selector__item--PaddingLeft calc(--pf-c-dual-list-selector__item--nested-indent--base * 3 + --pf-c-dual-list-selector__item--indent--base) calc(calc(--pf-c-dual-list-selector__item--indent--base - --pf-global--spacer--md) * 3 + calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__item--FontSize)) calc(calc(calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__item--FontSize) - $pf-global--spacer--md) * 3 + calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm) - $pf-global--spacer--md) * 3 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm) - $pf-global--spacer--md) * 3 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px)) - pf-size-prem(16px)) * 3 + calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px))) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 3 + calc(1rem + 0.5rem + 0.875rem))
	.pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item	--pf-c-dual-list-selector__list__list__item-toggle--Left	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 3 + calc(1rem + 0.5rem + 0.875rem))
--pf-c-dual-list-selector__list__list__item-toggle--Left --pf-c-dual-list-selector__item--PaddingLeft calc(--pf-c-dual-list-selector__item--nested-indent--base * 3 + --pf-c-dual-list-selector__item--indent--base) calc(calc(--pf-c-dual-list-selector__item--indent--base - --pf-global--spacer--md) * 3 + calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__item--FontSize)) calc(calc(calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__item--FontSize) - $pf-global--spacer--md) * 3 + calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm) - $pf-global--spacer--md) * 3 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm) - $pf-global--spacer--md) * 3 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px)) - pf-size-prem(16px)) * 3 + calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px))) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 3 + calc(1rem + 0.5rem + 0.875rem))
	.pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item	--pf-c-dual-list-selector__item--PaddingLeft	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 4 + calc(1rem + 0.5rem + 0.875rem))
--pf-c-dual-list-selector__item--PaddingLeft calc(--pf-c-dual-list-selector__item--nested-indent--base * 4 + --pf-c-dual-list-selector__item--indent--base) calc(calc(--pf-c-dual-list-selector__item--indent--base - --pf-global--spacer--md) * 4 + calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__item--FontSize)) calc(calc(calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__item--FontSize) - $pf-global--spacer--md) * 4 + calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm) - $pf-global--spacer--md) * 4 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm) - $pf-global--spacer--md) * 4 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px)) - pf-size-prem(16px)) * 4 + calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px))) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 4 + calc(1rem + 0.5rem + 0.875rem))
	.pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item	--pf-c-dual-list-selector__list__list__item-toggle--Left	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 4 + calc(1rem + 0.5rem + 0.875rem))
--pf-c-dual-list-selector__list__list__item-toggle--Left --pf-c-dual-list-selector__item--PaddingLeft calc(--pf-c-dual-list-selector__item--nested-indent--base * 4 + --pf-c-dual-list-selector__item--indent--base) calc(calc(--pf-c-dual-list-selector__item--indent--base - --pf-global--spacer--md) * 4 + calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__item--FontSize)) calc(calc(calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__item--FontSize) - $pf-global--spacer--md) * 4 + calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm) - $pf-global--spacer--md) * 4 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm) - $pf-global--spacer--md) * 4 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px)) - pf-size-prem(16px)) * 4 + calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px))) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 4 + calc(1rem + 0.5rem + 0.875rem))
	.pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item	--pf-c-dual-list-selector__item--PaddingLeft	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 5 + calc(1rem + 0.5rem + 0.875rem))
--pf-c-dual-list-selector__item--PaddingLeft calc(--pf-c-dual-list-selector__item--nested-indent--base * 5 + --pf-c-dual-list-selector__item--indent--base) calc(calc(--pf-c-dual-list-selector__item--indent--base - --pf-global--spacer--md) * 5 + calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__item--FontSize)) calc(calc(calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__item--FontSize) - $pf-global--spacer--md) * 5 + calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm) - $pf-global--spacer--md) * 5 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm) - $pf-global--spacer--md) * 5 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px)) - pf-size-prem(16px)) * 5 + calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px))) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 5 + calc(1rem + 0.5rem + 0.875rem))
	.pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item	--pf-c-dual-list-selector__list__list__item-toggle--Left	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 5 + calc(1rem + 0.5rem + 0.875rem))
--pf-c-dual-list-selector__list__list__item-toggle--Left --pf-c-dual-list-selector__item--PaddingLeft calc(--pf-c-dual-list-selector__item--nested-indent--base * 5 + --pf-c-dual-list-selector__item--indent--base) calc(calc(--pf-c-dual-list-selector__item--indent--base - --pf-global--spacer--md) * 5 + calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__item--FontSize)) calc(calc(calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__item--FontSize) - $pf-global--spacer--md) * 5 + calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm) - $pf-global--spacer--md) * 5 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm) - $pf-global--spacer--md) * 5 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px)) - pf-size-prem(16px)) * 5 + calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px))) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 5 + calc(1rem + 0.5rem + 0.875rem))
	.pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item	--pf-c-dual-list-selector__item--PaddingLeft	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 6 + calc(1rem + 0.5rem + 0.875rem))
--pf-c-dual-list-selector__item--PaddingLeft calc(--pf-c-dual-list-selector__item--nested-indent--base * 6 + --pf-c-dual-list-selector__item--indent--base) calc(calc(--pf-c-dual-list-selector__item--indent--base - --pf-global--spacer--md) * 6 + calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__item--FontSize)) calc(calc(calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__item--FontSize) - $pf-global--spacer--md) * 6 + calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm) - $pf-global--spacer--md) * 6 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm) - $pf-global--spacer--md) * 6 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px)) - pf-size-prem(16px)) * 6 + calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px))) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 6 + calc(1rem + 0.5rem + 0.875rem))
	.pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item	--pf-c-dual-list-selector__list__list__item-toggle--Left	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 6 + calc(1rem + 0.5rem + 0.875rem))
--pf-c-dual-list-selector__list__list__item-toggle--Left --pf-c-dual-list-selector__item--PaddingLeft calc(--pf-c-dual-list-selector__item--nested-indent--base * 6 + --pf-c-dual-list-selector__item--indent--base) calc(calc(--pf-c-dual-list-selector__item--indent--base - --pf-global--spacer--md) * 6 + calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__item--FontSize)) calc(calc(calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__item--FontSize) - $pf-global--spacer--md) * 6 + calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm) - $pf-global--spacer--md) * 6 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm) - $pf-global--spacer--md) * 6 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px)) - pf-size-prem(16px)) * 6 + calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px))) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 6 + calc(1rem + 0.5rem + 0.875rem))
	.pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item	--pf-c-dual-list-selector__item--PaddingLeft	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 7 + calc(1rem + 0.5rem + 0.875rem))
--pf-c-dual-list-selector__item--PaddingLeft calc(--pf-c-dual-list-selector__item--nested-indent--base * 7 + --pf-c-dual-list-selector__item--indent--base) calc(calc(--pf-c-dual-list-selector__item--indent--base - --pf-global--spacer--md) * 7 + calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__item--FontSize)) calc(calc(calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__item--FontSize) - $pf-global--spacer--md) * 7 + calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm) - $pf-global--spacer--md) * 7 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm) - $pf-global--spacer--md) * 7 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px)) - pf-size-prem(16px)) * 7 + calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px))) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 7 + calc(1rem + 0.5rem + 0.875rem))
	.pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item	--pf-c-dual-list-selector__list__list__item-toggle--Left	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 7 + calc(1rem + 0.5rem + 0.875rem))
--pf-c-dual-list-selector__list__list__item-toggle--Left --pf-c-dual-list-selector__item--PaddingLeft calc(--pf-c-dual-list-selector__item--nested-indent--base * 7 + --pf-c-dual-list-selector__item--indent--base) calc(calc(--pf-c-dual-list-selector__item--indent--base - --pf-global--spacer--md) * 7 + calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__item--FontSize)) calc(calc(calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__item--FontSize) - $pf-global--spacer--md) * 7 + calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm) - $pf-global--spacer--md) * 7 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm) - $pf-global--spacer--md) * 7 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px)) - pf-size-prem(16px)) * 7 + calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px))) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 7 + calc(1rem + 0.5rem + 0.875rem))
	.pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item	--pf-c-dual-list-selector__item--PaddingLeft	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 8 + calc(1rem + 0.5rem + 0.875rem))
--pf-c-dual-list-selector__item--PaddingLeft calc(--pf-c-dual-list-selector__item--nested-indent--base * 8 + --pf-c-dual-list-selector__item--indent--base) calc(calc(--pf-c-dual-list-selector__item--indent--base - --pf-global--spacer--md) * 8 + calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__item--FontSize)) calc(calc(calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__item--FontSize) - $pf-global--spacer--md) * 8 + calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm) - $pf-global--spacer--md) * 8 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm) - $pf-global--spacer--md) * 8 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px)) - pf-size-prem(16px)) * 8 + calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px))) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 8 + calc(1rem + 0.5rem + 0.875rem))
	.pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item	--pf-c-dual-list-selector__list__list__item-toggle--Left	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 8 + calc(1rem + 0.5rem + 0.875rem))
--pf-c-dual-list-selector__list__list__item-toggle--Left --pf-c-dual-list-selector__item--PaddingLeft calc(--pf-c-dual-list-selector__item--nested-indent--base * 8 + --pf-c-dual-list-selector__item--indent--base) calc(calc(--pf-c-dual-list-selector__item--indent--base - --pf-global--spacer--md) * 8 + calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__item--FontSize)) calc(calc(calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__item--FontSize) - $pf-global--spacer--md) * 8 + calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm) - $pf-global--spacer--md) * 8 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm) - $pf-global--spacer--md) * 8 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px)) - pf-size-prem(16px)) * 8 + calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px))) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 8 + calc(1rem + 0.5rem + 0.875rem))
	.pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item	--pf-c-dual-list-selector__item--PaddingLeft	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 9 + calc(1rem + 0.5rem + 0.875rem))
--pf-c-dual-list-selector__item--PaddingLeft calc(--pf-c-dual-list-selector__item--nested-indent--base * 9 + --pf-c-dual-list-selector__item--indent--base) calc(calc(--pf-c-dual-list-selector__item--indent--base - --pf-global--spacer--md) * 9 + calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__item--FontSize)) calc(calc(calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__item--FontSize) - $pf-global--spacer--md) * 9 + calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm) - $pf-global--spacer--md) * 9 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm) - $pf-global--spacer--md) * 9 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px)) - pf-size-prem(16px)) * 9 + calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px))) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 9 + calc(1rem + 0.5rem + 0.875rem))
	.pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item	--pf-c-dual-list-selector__list__list__item-toggle--Left	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 9 + calc(1rem + 0.5rem + 0.875rem))
--pf-c-dual-list-selector__list__list__item-toggle--Left --pf-c-dual-list-selector__item--PaddingLeft calc(--pf-c-dual-list-selector__item--nested-indent--base * 9 + --pf-c-dual-list-selector__item--indent--base) calc(calc(--pf-c-dual-list-selector__item--indent--base - --pf-global--spacer--md) * 9 + calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__item--FontSize)) calc(calc(calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__item--FontSize) - $pf-global--spacer--md) * 9 + calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm) - $pf-global--spacer--md) * 9 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm) - $pf-global--spacer--md) * 9 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px)) - pf-size-prem(16px)) * 9 + calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px))) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 9 + calc(1rem + 0.5rem + 0.875rem))
	.pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item	--pf-c-dual-list-selector__item--PaddingLeft	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 10 + calc(1rem + 0.5rem + 0.875rem))
--pf-c-dual-list-selector__item--PaddingLeft calc(--pf-c-dual-list-selector__item--nested-indent--base * 10 + --pf-c-dual-list-selector__item--indent--base) calc(calc(--pf-c-dual-list-selector__item--indent--base - --pf-global--spacer--md) * 10 + calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__item--FontSize)) calc(calc(calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__item--FontSize) - $pf-global--spacer--md) * 10 + calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm) - $pf-global--spacer--md) * 10 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm) - $pf-global--spacer--md) * 10 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px)) - pf-size-prem(16px)) * 10 + calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px))) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 10 + calc(1rem + 0.5rem + 0.875rem))
	.pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item	--pf-c-dual-list-selector__list__list__item-toggle--Left	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 10 + calc(1rem + 0.5rem + 0.875rem))
--pf-c-dual-list-selector__list__list__item-toggle--Left --pf-c-dual-list-selector__item--PaddingLeft calc(--pf-c-dual-list-selector__item--nested-indent--base * 10 + --pf-c-dual-list-selector__item--indent--base) calc(calc(--pf-c-dual-list-selector__item--indent--base - --pf-global--spacer--md) * 10 + calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__item--FontSize)) calc(calc(calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__item--FontSize) - $pf-global--spacer--md) * 10 + calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm) - $pf-global--spacer--md) * 10 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm) - $pf-global--spacer--md) * 10 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px)) - pf-size-prem(16px)) * 10 + calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px))) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 10 + calc(1rem + 0.5rem + 0.875rem))

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines