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-v5-c-dual-list-selector__status-text] | .pf-v5-c-dual-list-selector__list [ul] | Gives the list an accessible name. |
role="listbox or tree or group" | .pf-v5-c-dual-list-selector__list [ul] | Indicates the list is single, a tree, or a subgroup within the tree. |
aria-multiselectable="true" | .pf-v5-c-dual-list-selector__list [ul] | Indicates the list is multiselectable. |
aria-activedescendant="" | .pf-v5-c-dual-list-selector__list [ul] | Indicates the list has clickable children. |
role="option or treeitem" | .pf-v5-c-dual-list-selector__list-item [li] | Indicates whether the item is part of a tree. |
aria-expanded="true" | .pf-v5-c-dual-list-selector__list-item [li] | Indicates a treeitem is expanded. |
Usage
Class | Applied | Outcome |
|---|---|---|
.pf-v5-c-dual-list-selector | <div> | Initiates the dual list selector component. Required |
.pf-v5-c-dual-list-selector__pane | <div> | Initiates a dual list selector pane. Required |
.pf-v5-c-dual-list-selector__header | <div> | Initiates a dual list selector pane header. Required |
.pf-v5-c-dual-list-selector__title | <div> | Initiates a dual list selector pane title. Required |
.pf-v5-c-dual-list-selector__title-text | <div> | Initiates a dual list selector pane title text. Required |
.pf-v5-c-dual-list-selector__tools | <div> | Initiates a dual list selector tools. Required |
.pf-v5-c-dual-list-selector__filter | <div> | Initiates a dual list selector pane filter. Required |
.pf-v5-c-dual-list-selector__actions | <div> | Initiates a dual list selector pane actions. |
.pf-v5-c-dual-list-selector__actions-item | <div> | Initiates a dual list selector pane actions item. |
.pf-v5-c-dual-list-selector__status | <div> | Initiates a dual list selector pane selected status. Required |
.pf-v5-c-dual-list-selector__status-text | <span> | Initiates a dual list selector pane selected status text. Required |
.pf-v5-c-dual-list-selector__menu | <div> | Initiates a dual list selector pane menu container. Required |
.pf-v5-c-dual-list-selector__list | <ul> | Initiates a dual list selector pane menu list. Required |
.pf-v5-c-dual-list-selector__list-item | <li> | Initiates a dual list selector pane menu list item. Required |
.pf-v5-c-dual-list-selector__list-item-row | <div> | Initiates a dual list selector pane menu list item row. Required |
.pf-v5-c-dual-list-selector__draggable | <div> | Initiates a dual list selector pane draggable element. |
.pf-v5-c-dual-list-selector__item | <span>, <div> | Initiates a dual list selector pane menu item. Required |
.pf-v5-c-dual-list-selector__item-main | <span> | Initiates a dual list selector pane menu item main container. Required |
.pf-v5-c-dual-list-selector__item-check | <span> | Initiates the dual list selector item check. |
.pf-v5-c-dual-list-selector__item-count | <span> | Initiates the dual list selector item count. |
.pf-v5-c-dual-list-selector__item-toggle-icon | <span> | Initiates the dual list selector item toggle icon. |
.pf-v5-c-dual-list-selector__item-toggle | <button> | Initiates the dual list selector item toggle. |
.pf-v5-c-dual-list-selector__item-text | <span> | Initiates a dual list selector pane menu item text. Required |
.pf-v5-c-dual-list-selector__controls | <div> | Initiates the dual list selector controls. Required |
.pf-v5-c-dual-list-selector__controls-item | <div> | Initiates the dual list selector controls item. Required |
.pf-m-available | .pf-v5-c-dual-list-selector__pane | Defines a pane as the available list. |
.pf-m-chosen | .pf-v5-c-dual-list-selector__pane | Defines a pane as the chosen list. |
.pf-m-drag-over | .pf-v5-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-v5-c-dual-list-selector__list-item-row | Modifies the list item main to be a ghost row. |
.pf-m-selected | .pf-v5-c-dual-list-selector__list-item-row | Modifies the menu item for the selected state. |
.pf-m-check | .pf-v5-c-dual-list-selector__list-item-row | Indicates that an item is selectable with a checkbox. |
.pf-m-expandable | .pf-v5-c-dual-list-selector__list-item | Indicates that an item is expandable. |
.pf-m-expanded | .pf-v5-c-dual-list-selector__list-item | Indicates that an item is expanded. |
.pf-m-disabled | .pf-v5-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 | |
|---|---|---|---|---|
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__header--GridArea | pane-header | ||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__tools--GridArea | pane-tools | ||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__status--GridArea | pane-status | ||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__menu--GridArea | pane-menu | ||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__controls--GridArea | controls | ||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector--m-chosen__header--GridArea | pane-header-c | ||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector--m-chosen__tools--GridArea | pane-tools-c | ||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector--m-chosen__status--GridArea | pane-status-c | ||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector--m-chosen__menu--GridArea | pane-menu-c | ||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector--GridTemplateColumns--pane--MinMax--min | 12.5rem | ||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector--GridTemplateColumns--pane--MinMax--max | 28.125rem | ||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__header--MarginBottom | 0.5rem | ||
--pf-v5-c-dual-list-selector__header--MarginBottom --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__title-text--FontWeight | 700 | ||
--pf-v5-c-dual-list-selector__title-text--FontWeight --pf-v5-global--FontWeight--bold $pf-v5-global--FontWeight--bold 700 | ||||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__tools--MarginBottom | 1rem | ||
--pf-v5-c-dual-list-selector__tools--MarginBottom --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__tools-filter--tools-actions--MarginLeft | 0.5rem | ||
--pf-v5-c-dual-list-selector__tools-filter--tools-actions--MarginLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__menu--BorderWidth | 1px | ||
--pf-v5-c-dual-list-selector__menu--BorderWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__menu--BorderColor | #d2d2d2 | ||
--pf-v5-c-dual-list-selector__menu--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__menu--MinHeight | 12.5rem | ||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__menu--MaxHeight | 20rem | ||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__list-item-row--FontSize | 0.875rem | ||
--pf-v5-c-dual-list-selector__list-item-row--FontSize --pf-v5-global--FontSize--sm $pf-v5-global--FontSize--sm pf-font-prem(14px) 0.875rem | ||||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__list-item-row--BackgroundColor | transparent | ||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__list-item-row--hover--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-dual-list-selector__list-item-row--hover--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__list-item-row--focus-within--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-dual-list-selector__list-item-row--focus-within--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__list-item-row--m-selected--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-dual-list-selector__list-item-row--m-selected--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__list-item--m-ghost-row--BackgroundColor | #fff | ||
--pf-v5-c-dual-list-selector__list-item--m-ghost-row--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__list-item--m-ghost-row--Opacity | .4 | ||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__item--PaddingTop | 0.5rem | ||
--pf-v5-c-dual-list-selector__item--PaddingTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__item--PaddingRight | 1rem | ||
--pf-v5-c-dual-list-selector__item--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__item--PaddingBottom | 0.5rem | ||
--pf-v5-c-dual-list-selector__item--PaddingBottom --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__item--PaddingLeft | 1rem | ||
--pf-v5-c-dual-list-selector__item--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__item--m-expandable--PaddingLeft | 0 | ||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__item--indent--base | calc(1rem + 0.5rem + 0.875rem) | ||
--pf-v5-c-dual-list-selector__item--indent--base calc(--pf-v5-global--spacer--md + --pf-v5-global--spacer--sm + --pf-v5-c-dual-list-selector__list-item-row--FontSize) calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + --pf-v5-global--FontSize--sm) calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-global--FontSize--sm) calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px)) calc(1rem + 0.5rem + 0.875rem) | ||||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__item--nested-indent--base | calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) | ||
--pf-v5-c-dual-list-selector__item--nested-indent--base calc(--pf-v5-c-dual-list-selector__item--indent--base - --pf-v5-global--spacer--md) calc(calc(--pf-v5-global--spacer--md + --pf-v5-global--spacer--sm + --pf-v5-c-dual-list-selector__list-item-row--FontSize) - $pf-v5-global--spacer--md) calc(calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + --pf-v5-global--FontSize--sm) - $pf-v5-global--spacer--md) calc(calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-global--FontSize--sm) - $pf-v5-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-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__draggable--item--PaddingLeft | 0.25rem | ||
--pf-v5-c-dual-list-selector__draggable--item--PaddingLeft --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__item-text--Color | #151515 | ||
--pf-v5-c-dual-list-selector__item-text--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__list-item-row--m-selected__text--Color | #06c | ||
--pf-v5-c-dual-list-selector__list-item-row--m-selected__text--Color --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__list-item-row--m-selected__text--FontWeight | 700 | ||
--pf-v5-c-dual-list-selector__list-item-row--m-selected__text--FontWeight --pf-v5-global--FontWeight--bold $pf-v5-global--FontWeight--bold 700 | ||||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__list-item--m-disabled__item-text--Color | #6a6e73 | ||
--pf-v5-c-dual-list-selector__list-item--m-disabled__item-text--Color --pf-v5-global--disabled-color--100 $pf-v5-global--disabled-color--100 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__status--MarginBottom | 0.5rem | ||
--pf-v5-c-dual-list-selector__status--MarginBottom --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__status-text--FontSize | 0.875rem | ||
--pf-v5-c-dual-list-selector__status-text--FontSize --pf-v5-global--FontSize--sm $pf-v5-global--FontSize--sm pf-font-prem(14px) 0.875rem | ||||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__status-text--Color | #6a6e73 | ||
--pf-v5-c-dual-list-selector__status-text--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__controls--PaddingRight | 1rem | ||
--pf-v5-c-dual-list-selector__controls--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__controls--PaddingLeft | 1rem | ||
--pf-v5-c-dual-list-selector__controls--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__item-toggle--PaddingTop | 0.5rem | ||
--pf-v5-c-dual-list-selector__item-toggle--PaddingTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__item-toggle--PaddingRight | 0.5rem | ||
--pf-v5-c-dual-list-selector__item-toggle--PaddingRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__item-toggle--PaddingBottom | 0.5rem | ||
--pf-v5-c-dual-list-selector__item-toggle--PaddingBottom --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__item-toggle--PaddingLeft | 1rem | ||
--pf-v5-c-dual-list-selector__item-toggle--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__item-toggle--MarginTop | calc(0.5rem * -1) | ||
--pf-v5-c-dual-list-selector__item-toggle--MarginTop calc(--pf-v5-global--spacer--sm * -1) calc($pf-v5-global--spacer--sm * -1) calc(pf-size-prem(8px) * -1) calc(0.5rem * -1) | ||||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__item-toggle--MarginBottom | calc(0.5rem * -1) | ||
--pf-v5-c-dual-list-selector__item-toggle--MarginBottom calc(--pf-v5-global--spacer--sm * -1) calc($pf-v5-global--spacer--sm * -1) calc(pf-size-prem(8px) * -1) calc(0.5rem * -1) | ||||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__list__list__item-toggle--Left | 0 | ||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__list__list__item-toggle--TranslateX | -100% | ||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__item-check--MarginRight | 0.5rem | ||
--pf-v5-c-dual-list-selector__item-check--MarginRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__item-count--Marginleft | 0.5rem | ||
--pf-v5-c-dual-list-selector__item-count--Marginleft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__item--c-badge--m-read--BackgroundColor | #d2d2d2 | ||
--pf-v5-c-dual-list-selector__item--c-badge--m-read--BackgroundColor --pf-v5-global--disabled-color--200 $pf-v5-global--disabled-color--200 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__item-toggle-icon--Rotate | 0 | ||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate | 90deg | ||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__item-toggle-icon--Transition | all 250ms cubic-bezier(.42, 0, .58, 1) | ||
--pf-v5-c-dual-list-selector__item-toggle-icon--Transition --pf-v5-global--Transition $pf-v5-global--Transition all 250ms cubic-bezier(.42, 0, .58, 1) | ||||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__item-toggle-icon--MinWidth | 0.875rem | ||
--pf-v5-c-dual-list-selector__item-toggle-icon--MinWidth --pf-v5-c-dual-list-selector__list-item-row--FontSize --pf-v5-global--FontSize--sm $pf-v5-global--FontSize--sm pf-font-prem(14px) 0.875rem | ||||
| .pf-v5-c-dual-list-selector | --pf-v5-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color | #d2d2d2 | ||
--pf-v5-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color --pf-v5-global--disabled-color--200 $pf-v5-global--disabled-color--200 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-dual-list-selector__pane.pf-m-chosen | --pf-v5-c-dual-list-selector__header--GridArea | pane-header-c | ||
--pf-v5-c-dual-list-selector__header--GridArea --pf-v5-c-dual-list-selector--m-chosen__header--GridArea pane-header-c | ||||
| .pf-v5-c-dual-list-selector__pane.pf-m-chosen | --pf-v5-c-dual-list-selector__tools--GridArea | pane-tools-c | ||
--pf-v5-c-dual-list-selector__tools--GridArea --pf-v5-c-dual-list-selector--m-chosen__tools--GridArea pane-tools-c | ||||
| .pf-v5-c-dual-list-selector__pane.pf-m-chosen | --pf-v5-c-dual-list-selector__status--GridArea | pane-status-c | ||
--pf-v5-c-dual-list-selector__status--GridArea --pf-v5-c-dual-list-selector--m-chosen__status--GridArea pane-status-c | ||||
| .pf-v5-c-dual-list-selector__pane.pf-m-chosen | --pf-v5-c-dual-list-selector__menu--GridArea | pane-menu-c | ||
--pf-v5-c-dual-list-selector__menu--GridArea --pf-v5-c-dual-list-selector--m-chosen__menu--GridArea pane-menu-c | ||||
| .pf-v5-c-dual-list-selector__list | --pf-v5-c-dual-list-selector__item-toggle-icon--Rotate | 0 | ||
| .pf-v5-c-dual-list-selector__list .pf-v5-c-dual-list-selector__list | --pf-v5-c-dual-list-selector__item-toggle--MarginTop | 0 | ||
| .pf-v5-c-dual-list-selector__list .pf-v5-c-dual-list-selector__list | --pf-v5-c-dual-list-selector__item-toggle--MarginBottom | 0 | ||
| .pf-v5-c-dual-list-selector__list-item:focus | --pf-v5-c-dual-list-selector__list-item-row--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-dual-list-selector__list-item-row--BackgroundColor --pf-v5-c-dual-list-selector__list-item-row--focus-within--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-dual-list-selector__list-item.pf-m-expandable | --pf-v5-c-dual-list-selector__item--PaddingLeft | 0 | ||
--pf-v5-c-dual-list-selector__item--PaddingLeft --pf-v5-c-dual-list-selector__item--m-expandable--PaddingLeft 0 | ||||
| .pf-v5-c-dual-list-selector__list-item.pf-m-expanded | --pf-v5-c-dual-list-selector__item-toggle-icon--Rotate | 90deg | ||
--pf-v5-c-dual-list-selector__item-toggle-icon--Rotate --pf-v5-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate 90deg | ||||
| .pf-v5-c-dual-list-selector__list-item.pf-m-disabled | --pf-v5-c-dual-list-selector__item-text--Color | #6a6e73 | ||
--pf-v5-c-dual-list-selector__item-text--Color --pf-v5-c-dual-list-selector__list-item--m-disabled__item-text--Color --pf-v5-global--disabled-color--100 $pf-v5-global--disabled-color--100 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-dual-list-selector__list-item.pf-m-disabled | --pf-v5-c-dual-list-selector__item-toggle-icon--Color | #d2d2d2 | ||
--pf-v5-c-dual-list-selector__item-toggle-icon--Color --pf-v5-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color --pf-v5-global--disabled-color--200 $pf-v5-global--disabled-color--200 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-dual-list-selector__list-item-row:hover | --pf-v5-c-dual-list-selector__list-item-row--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-dual-list-selector__list-item-row--BackgroundColor --pf-v5-c-dual-list-selector__list-item-row--hover--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-dual-list-selector__list-item-row.pf-m-selected | --pf-v5-c-dual-list-selector__list-item-row--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-dual-list-selector__list-item-row--BackgroundColor --pf-v5-c-dual-list-selector__list-item-row--m-selected--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-dual-list-selector__list-item-row.pf-m-selected .pf-v5-c-dual-list-selector__item-text | --pf-v5-c-dual-list-selector__item-text--Color | #06c | ||
--pf-v5-c-dual-list-selector__item-text--Color --pf-v5-c-dual-list-selector__list-item-row--m-selected__text--Color --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-dual-list-selector__list-item-row.pf-m-check | --pf-v5-c-dual-list-selector__list-item-row--m-selected--BackgroundColor | transparent | ||
| .pf-v5-c-dual-list-selector__list-item-row.pf-m-ghost-row | --pf-v5-c-dual-list-selector__list-item-row--BackgroundColor | #fff | ||
--pf-v5-c-dual-list-selector__list-item-row--BackgroundColor --pf-v5-c-dual-list-selector__list-item--m-ghost-row--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-dual-list-selector__draggable + .pf-v5-c-dual-list-selector__item | --pf-v5-c-dual-list-selector__item--PaddingLeft | 0.25rem | ||
--pf-v5-c-dual-list-selector__item--PaddingLeft --pf-v5-c-dual-list-selector__draggable--item--PaddingLeft --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-dual-list-selector__draggable .pf-v5-c-button | --pf-v5-c-button--FontSize | inherit | ||
| .pf-v5-c-dual-list-selector__item-count .pf-v5-c-badge.pf-m-read | --pf-v5-c-badge--m-read--BackgroundColor | #d2d2d2 | ||
--pf-v5-c-badge--m-read--BackgroundColor --pf-v5-c-dual-list-selector__item--c-badge--m-read--BackgroundColor --pf-v5-global--disabled-color--200 $pf-v5-global--disabled-color--200 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item | --pf-v5-c-dual-list-selector__item--PaddingLeft | calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 1 + calc(1rem + 0.5rem + 0.875rem)) | ||
--pf-v5-c-dual-list-selector__item--PaddingLeft calc(--pf-v5-c-dual-list-selector__item--nested-indent--base * 1 + --pf-v5-c-dual-list-selector__item--indent--base) calc(calc(--pf-v5-c-dual-list-selector__item--indent--base - --pf-v5-global--spacer--md) * 1 + calc(--pf-v5-global--spacer--md + --pf-v5-global--spacer--sm + --pf-v5-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-v5-global--spacer--md + --pf-v5-global--spacer--sm + --pf-v5-c-dual-list-selector__list-item-row--FontSize) - $pf-v5-global--spacer--md) * 1 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + --pf-v5-global--FontSize--sm)) calc(calc(calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + --pf-v5-global--FontSize--sm) - $pf-v5-global--spacer--md) * 1 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-global--FontSize--sm)) calc(calc(calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-global--FontSize--sm) - $pf-v5-global--spacer--md) * 1 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-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-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item | --pf-v5-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-v5-c-dual-list-selector__list__list__item-toggle--Left --pf-v5-c-dual-list-selector__item--PaddingLeft calc(--pf-v5-c-dual-list-selector__item--nested-indent--base * 1 + --pf-v5-c-dual-list-selector__item--indent--base) calc(calc(--pf-v5-c-dual-list-selector__item--indent--base - --pf-v5-global--spacer--md) * 1 + calc(--pf-v5-global--spacer--md + --pf-v5-global--spacer--sm + --pf-v5-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-v5-global--spacer--md + --pf-v5-global--spacer--sm + --pf-v5-c-dual-list-selector__list-item-row--FontSize) - $pf-v5-global--spacer--md) * 1 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + --pf-v5-global--FontSize--sm)) calc(calc(calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + --pf-v5-global--FontSize--sm) - $pf-v5-global--spacer--md) * 1 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-global--FontSize--sm)) calc(calc(calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-global--FontSize--sm) - $pf-v5-global--spacer--md) * 1 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-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-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item | --pf-v5-c-dual-list-selector__item--PaddingLeft | calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 2 + calc(1rem + 0.5rem + 0.875rem)) | ||
--pf-v5-c-dual-list-selector__item--PaddingLeft calc(--pf-v5-c-dual-list-selector__item--nested-indent--base * 2 + --pf-v5-c-dual-list-selector__item--indent--base) calc(calc(--pf-v5-c-dual-list-selector__item--indent--base - --pf-v5-global--spacer--md) * 2 + calc(--pf-v5-global--spacer--md + --pf-v5-global--spacer--sm + --pf-v5-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-v5-global--spacer--md + --pf-v5-global--spacer--sm + --pf-v5-c-dual-list-selector__list-item-row--FontSize) - $pf-v5-global--spacer--md) * 2 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + --pf-v5-global--FontSize--sm)) calc(calc(calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + --pf-v5-global--FontSize--sm) - $pf-v5-global--spacer--md) * 2 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-global--FontSize--sm)) calc(calc(calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-global--FontSize--sm) - $pf-v5-global--spacer--md) * 2 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-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-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item | --pf-v5-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-v5-c-dual-list-selector__list__list__item-toggle--Left --pf-v5-c-dual-list-selector__item--PaddingLeft calc(--pf-v5-c-dual-list-selector__item--nested-indent--base * 2 + --pf-v5-c-dual-list-selector__item--indent--base) calc(calc(--pf-v5-c-dual-list-selector__item--indent--base - --pf-v5-global--spacer--md) * 2 + calc(--pf-v5-global--spacer--md + --pf-v5-global--spacer--sm + --pf-v5-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-v5-global--spacer--md + --pf-v5-global--spacer--sm + --pf-v5-c-dual-list-selector__list-item-row--FontSize) - $pf-v5-global--spacer--md) * 2 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + --pf-v5-global--FontSize--sm)) calc(calc(calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + --pf-v5-global--FontSize--sm) - $pf-v5-global--spacer--md) * 2 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-global--FontSize--sm)) calc(calc(calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-global--FontSize--sm) - $pf-v5-global--spacer--md) * 2 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-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-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item | --pf-v5-c-dual-list-selector__item--PaddingLeft | calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 3 + calc(1rem + 0.5rem + 0.875rem)) | ||
--pf-v5-c-dual-list-selector__item--PaddingLeft calc(--pf-v5-c-dual-list-selector__item--nested-indent--base * 3 + --pf-v5-c-dual-list-selector__item--indent--base) calc(calc(--pf-v5-c-dual-list-selector__item--indent--base - --pf-v5-global--spacer--md) * 3 + calc(--pf-v5-global--spacer--md + --pf-v5-global--spacer--sm + --pf-v5-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-v5-global--spacer--md + --pf-v5-global--spacer--sm + --pf-v5-c-dual-list-selector__list-item-row--FontSize) - $pf-v5-global--spacer--md) * 3 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + --pf-v5-global--FontSize--sm)) calc(calc(calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + --pf-v5-global--FontSize--sm) - $pf-v5-global--spacer--md) * 3 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-global--FontSize--sm)) calc(calc(calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-global--FontSize--sm) - $pf-v5-global--spacer--md) * 3 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-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-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item | --pf-v5-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-v5-c-dual-list-selector__list__list__item-toggle--Left --pf-v5-c-dual-list-selector__item--PaddingLeft calc(--pf-v5-c-dual-list-selector__item--nested-indent--base * 3 + --pf-v5-c-dual-list-selector__item--indent--base) calc(calc(--pf-v5-c-dual-list-selector__item--indent--base - --pf-v5-global--spacer--md) * 3 + calc(--pf-v5-global--spacer--md + --pf-v5-global--spacer--sm + --pf-v5-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-v5-global--spacer--md + --pf-v5-global--spacer--sm + --pf-v5-c-dual-list-selector__list-item-row--FontSize) - $pf-v5-global--spacer--md) * 3 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + --pf-v5-global--FontSize--sm)) calc(calc(calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + --pf-v5-global--FontSize--sm) - $pf-v5-global--spacer--md) * 3 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-global--FontSize--sm)) calc(calc(calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-global--FontSize--sm) - $pf-v5-global--spacer--md) * 3 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-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-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item | --pf-v5-c-dual-list-selector__item--PaddingLeft | calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 4 + calc(1rem + 0.5rem + 0.875rem)) | ||
--pf-v5-c-dual-list-selector__item--PaddingLeft calc(--pf-v5-c-dual-list-selector__item--nested-indent--base * 4 + --pf-v5-c-dual-list-selector__item--indent--base) calc(calc(--pf-v5-c-dual-list-selector__item--indent--base - --pf-v5-global--spacer--md) * 4 + calc(--pf-v5-global--spacer--md + --pf-v5-global--spacer--sm + --pf-v5-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-v5-global--spacer--md + --pf-v5-global--spacer--sm + --pf-v5-c-dual-list-selector__list-item-row--FontSize) - $pf-v5-global--spacer--md) * 4 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + --pf-v5-global--FontSize--sm)) calc(calc(calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + --pf-v5-global--FontSize--sm) - $pf-v5-global--spacer--md) * 4 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-global--FontSize--sm)) calc(calc(calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-global--FontSize--sm) - $pf-v5-global--spacer--md) * 4 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-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-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item | --pf-v5-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-v5-c-dual-list-selector__list__list__item-toggle--Left --pf-v5-c-dual-list-selector__item--PaddingLeft calc(--pf-v5-c-dual-list-selector__item--nested-indent--base * 4 + --pf-v5-c-dual-list-selector__item--indent--base) calc(calc(--pf-v5-c-dual-list-selector__item--indent--base - --pf-v5-global--spacer--md) * 4 + calc(--pf-v5-global--spacer--md + --pf-v5-global--spacer--sm + --pf-v5-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-v5-global--spacer--md + --pf-v5-global--spacer--sm + --pf-v5-c-dual-list-selector__list-item-row--FontSize) - $pf-v5-global--spacer--md) * 4 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + --pf-v5-global--FontSize--sm)) calc(calc(calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + --pf-v5-global--FontSize--sm) - $pf-v5-global--spacer--md) * 4 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-global--FontSize--sm)) calc(calc(calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-global--FontSize--sm) - $pf-v5-global--spacer--md) * 4 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-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-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item | --pf-v5-c-dual-list-selector__item--PaddingLeft | calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 5 + calc(1rem + 0.5rem + 0.875rem)) | ||
--pf-v5-c-dual-list-selector__item--PaddingLeft calc(--pf-v5-c-dual-list-selector__item--nested-indent--base * 5 + --pf-v5-c-dual-list-selector__item--indent--base) calc(calc(--pf-v5-c-dual-list-selector__item--indent--base - --pf-v5-global--spacer--md) * 5 + calc(--pf-v5-global--spacer--md + --pf-v5-global--spacer--sm + --pf-v5-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-v5-global--spacer--md + --pf-v5-global--spacer--sm + --pf-v5-c-dual-list-selector__list-item-row--FontSize) - $pf-v5-global--spacer--md) * 5 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + --pf-v5-global--FontSize--sm)) calc(calc(calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + --pf-v5-global--FontSize--sm) - $pf-v5-global--spacer--md) * 5 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-global--FontSize--sm)) calc(calc(calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-global--FontSize--sm) - $pf-v5-global--spacer--md) * 5 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-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-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item | --pf-v5-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-v5-c-dual-list-selector__list__list__item-toggle--Left --pf-v5-c-dual-list-selector__item--PaddingLeft calc(--pf-v5-c-dual-list-selector__item--nested-indent--base * 5 + --pf-v5-c-dual-list-selector__item--indent--base) calc(calc(--pf-v5-c-dual-list-selector__item--indent--base - --pf-v5-global--spacer--md) * 5 + calc(--pf-v5-global--spacer--md + --pf-v5-global--spacer--sm + --pf-v5-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-v5-global--spacer--md + --pf-v5-global--spacer--sm + --pf-v5-c-dual-list-selector__list-item-row--FontSize) - $pf-v5-global--spacer--md) * 5 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + --pf-v5-global--FontSize--sm)) calc(calc(calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + --pf-v5-global--FontSize--sm) - $pf-v5-global--spacer--md) * 5 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-global--FontSize--sm)) calc(calc(calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-global--FontSize--sm) - $pf-v5-global--spacer--md) * 5 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-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-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item | --pf-v5-c-dual-list-selector__item--PaddingLeft | calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 6 + calc(1rem + 0.5rem + 0.875rem)) | ||
--pf-v5-c-dual-list-selector__item--PaddingLeft calc(--pf-v5-c-dual-list-selector__item--nested-indent--base * 6 + --pf-v5-c-dual-list-selector__item--indent--base) calc(calc(--pf-v5-c-dual-list-selector__item--indent--base - --pf-v5-global--spacer--md) * 6 + calc(--pf-v5-global--spacer--md + --pf-v5-global--spacer--sm + --pf-v5-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-v5-global--spacer--md + --pf-v5-global--spacer--sm + --pf-v5-c-dual-list-selector__list-item-row--FontSize) - $pf-v5-global--spacer--md) * 6 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + --pf-v5-global--FontSize--sm)) calc(calc(calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + --pf-v5-global--FontSize--sm) - $pf-v5-global--spacer--md) * 6 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-global--FontSize--sm)) calc(calc(calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-global--FontSize--sm) - $pf-v5-global--spacer--md) * 6 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-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-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item | --pf-v5-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-v5-c-dual-list-selector__list__list__item-toggle--Left --pf-v5-c-dual-list-selector__item--PaddingLeft calc(--pf-v5-c-dual-list-selector__item--nested-indent--base * 6 + --pf-v5-c-dual-list-selector__item--indent--base) calc(calc(--pf-v5-c-dual-list-selector__item--indent--base - --pf-v5-global--spacer--md) * 6 + calc(--pf-v5-global--spacer--md + --pf-v5-global--spacer--sm + --pf-v5-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-v5-global--spacer--md + --pf-v5-global--spacer--sm + --pf-v5-c-dual-list-selector__list-item-row--FontSize) - $pf-v5-global--spacer--md) * 6 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + --pf-v5-global--FontSize--sm)) calc(calc(calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + --pf-v5-global--FontSize--sm) - $pf-v5-global--spacer--md) * 6 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-global--FontSize--sm)) calc(calc(calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-global--FontSize--sm) - $pf-v5-global--spacer--md) * 6 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-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-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item | --pf-v5-c-dual-list-selector__item--PaddingLeft | calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 7 + calc(1rem + 0.5rem + 0.875rem)) | ||
--pf-v5-c-dual-list-selector__item--PaddingLeft calc(--pf-v5-c-dual-list-selector__item--nested-indent--base * 7 + --pf-v5-c-dual-list-selector__item--indent--base) calc(calc(--pf-v5-c-dual-list-selector__item--indent--base - --pf-v5-global--spacer--md) * 7 + calc(--pf-v5-global--spacer--md + --pf-v5-global--spacer--sm + --pf-v5-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-v5-global--spacer--md + --pf-v5-global--spacer--sm + --pf-v5-c-dual-list-selector__list-item-row--FontSize) - $pf-v5-global--spacer--md) * 7 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + --pf-v5-global--FontSize--sm)) calc(calc(calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + --pf-v5-global--FontSize--sm) - $pf-v5-global--spacer--md) * 7 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-global--FontSize--sm)) calc(calc(calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-global--FontSize--sm) - $pf-v5-global--spacer--md) * 7 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-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-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item | --pf-v5-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-v5-c-dual-list-selector__list__list__item-toggle--Left --pf-v5-c-dual-list-selector__item--PaddingLeft calc(--pf-v5-c-dual-list-selector__item--nested-indent--base * 7 + --pf-v5-c-dual-list-selector__item--indent--base) calc(calc(--pf-v5-c-dual-list-selector__item--indent--base - --pf-v5-global--spacer--md) * 7 + calc(--pf-v5-global--spacer--md + --pf-v5-global--spacer--sm + --pf-v5-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-v5-global--spacer--md + --pf-v5-global--spacer--sm + --pf-v5-c-dual-list-selector__list-item-row--FontSize) - $pf-v5-global--spacer--md) * 7 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + --pf-v5-global--FontSize--sm)) calc(calc(calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + --pf-v5-global--FontSize--sm) - $pf-v5-global--spacer--md) * 7 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-global--FontSize--sm)) calc(calc(calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-global--FontSize--sm) - $pf-v5-global--spacer--md) * 7 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-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-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item | --pf-v5-c-dual-list-selector__item--PaddingLeft | calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 8 + calc(1rem + 0.5rem + 0.875rem)) | ||
--pf-v5-c-dual-list-selector__item--PaddingLeft calc(--pf-v5-c-dual-list-selector__item--nested-indent--base * 8 + --pf-v5-c-dual-list-selector__item--indent--base) calc(calc(--pf-v5-c-dual-list-selector__item--indent--base - --pf-v5-global--spacer--md) * 8 + calc(--pf-v5-global--spacer--md + --pf-v5-global--spacer--sm + --pf-v5-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-v5-global--spacer--md + --pf-v5-global--spacer--sm + --pf-v5-c-dual-list-selector__list-item-row--FontSize) - $pf-v5-global--spacer--md) * 8 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + --pf-v5-global--FontSize--sm)) calc(calc(calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + --pf-v5-global--FontSize--sm) - $pf-v5-global--spacer--md) * 8 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-global--FontSize--sm)) calc(calc(calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-global--FontSize--sm) - $pf-v5-global--spacer--md) * 8 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-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-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item | --pf-v5-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-v5-c-dual-list-selector__list__list__item-toggle--Left --pf-v5-c-dual-list-selector__item--PaddingLeft calc(--pf-v5-c-dual-list-selector__item--nested-indent--base * 8 + --pf-v5-c-dual-list-selector__item--indent--base) calc(calc(--pf-v5-c-dual-list-selector__item--indent--base - --pf-v5-global--spacer--md) * 8 + calc(--pf-v5-global--spacer--md + --pf-v5-global--spacer--sm + --pf-v5-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-v5-global--spacer--md + --pf-v5-global--spacer--sm + --pf-v5-c-dual-list-selector__list-item-row--FontSize) - $pf-v5-global--spacer--md) * 8 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + --pf-v5-global--FontSize--sm)) calc(calc(calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + --pf-v5-global--FontSize--sm) - $pf-v5-global--spacer--md) * 8 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-global--FontSize--sm)) calc(calc(calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-global--FontSize--sm) - $pf-v5-global--spacer--md) * 8 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-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-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item | --pf-v5-c-dual-list-selector__item--PaddingLeft | calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 9 + calc(1rem + 0.5rem + 0.875rem)) | ||
--pf-v5-c-dual-list-selector__item--PaddingLeft calc(--pf-v5-c-dual-list-selector__item--nested-indent--base * 9 + --pf-v5-c-dual-list-selector__item--indent--base) calc(calc(--pf-v5-c-dual-list-selector__item--indent--base - --pf-v5-global--spacer--md) * 9 + calc(--pf-v5-global--spacer--md + --pf-v5-global--spacer--sm + --pf-v5-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-v5-global--spacer--md + --pf-v5-global--spacer--sm + --pf-v5-c-dual-list-selector__list-item-row--FontSize) - $pf-v5-global--spacer--md) * 9 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + --pf-v5-global--FontSize--sm)) calc(calc(calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + --pf-v5-global--FontSize--sm) - $pf-v5-global--spacer--md) * 9 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-global--FontSize--sm)) calc(calc(calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-global--FontSize--sm) - $pf-v5-global--spacer--md) * 9 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-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-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item | --pf-v5-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-v5-c-dual-list-selector__list__list__item-toggle--Left --pf-v5-c-dual-list-selector__item--PaddingLeft calc(--pf-v5-c-dual-list-selector__item--nested-indent--base * 9 + --pf-v5-c-dual-list-selector__item--indent--base) calc(calc(--pf-v5-c-dual-list-selector__item--indent--base - --pf-v5-global--spacer--md) * 9 + calc(--pf-v5-global--spacer--md + --pf-v5-global--spacer--sm + --pf-v5-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-v5-global--spacer--md + --pf-v5-global--spacer--sm + --pf-v5-c-dual-list-selector__list-item-row--FontSize) - $pf-v5-global--spacer--md) * 9 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + --pf-v5-global--FontSize--sm)) calc(calc(calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + --pf-v5-global--FontSize--sm) - $pf-v5-global--spacer--md) * 9 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-global--FontSize--sm)) calc(calc(calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-global--FontSize--sm) - $pf-v5-global--spacer--md) * 9 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-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-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item | --pf-v5-c-dual-list-selector__item--PaddingLeft | calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 10 + calc(1rem + 0.5rem + 0.875rem)) | ||
--pf-v5-c-dual-list-selector__item--PaddingLeft calc(--pf-v5-c-dual-list-selector__item--nested-indent--base * 10 + --pf-v5-c-dual-list-selector__item--indent--base) calc(calc(--pf-v5-c-dual-list-selector__item--indent--base - --pf-v5-global--spacer--md) * 10 + calc(--pf-v5-global--spacer--md + --pf-v5-global--spacer--sm + --pf-v5-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-v5-global--spacer--md + --pf-v5-global--spacer--sm + --pf-v5-c-dual-list-selector__list-item-row--FontSize) - $pf-v5-global--spacer--md) * 10 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + --pf-v5-global--FontSize--sm)) calc(calc(calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + --pf-v5-global--FontSize--sm) - $pf-v5-global--spacer--md) * 10 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-global--FontSize--sm)) calc(calc(calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-global--FontSize--sm) - $pf-v5-global--spacer--md) * 10 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-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-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item | --pf-v5-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-v5-c-dual-list-selector__list__list__item-toggle--Left --pf-v5-c-dual-list-selector__item--PaddingLeft calc(--pf-v5-c-dual-list-selector__item--nested-indent--base * 10 + --pf-v5-c-dual-list-selector__item--indent--base) calc(calc(--pf-v5-c-dual-list-selector__item--indent--base - --pf-v5-global--spacer--md) * 10 + calc(--pf-v5-global--spacer--md + --pf-v5-global--spacer--sm + --pf-v5-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-v5-global--spacer--md + --pf-v5-global--spacer--sm + --pf-v5-c-dual-list-selector__list-item-row--FontSize) - $pf-v5-global--spacer--md) * 10 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + --pf-v5-global--FontSize--sm)) calc(calc(calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + --pf-v5-global--FontSize--sm) - $pf-v5-global--spacer--md) * 10 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-global--FontSize--sm)) calc(calc(calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-global--FontSize--sm) - $pf-v5-global--spacer--md) * 10 + calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + $pf-v5-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
