Examples
With separate selection and expansion
The hasSelectableNodes modifier will separate the expansion and selection behaviors, allowing a parent node to be selected or deselected with toggling its expansion.
With memoization
Turning on memoization with the useMemo property helps prevent unnecessary re-renders for large data sets. With this flag active, activeItems must pass in an array of nodes along the selected item's path to update properly.
Props
TreeView
| Name | Type | Default | Description |
|---|---|---|---|
| datarequired | TreeViewDataItem[] | Data of the tree view. | |
| activeItems | TreeViewDataItem[] | Active items of tree view. | |
| allExpanded | boolean | Sets the expanded state on all tree nodes, overriding default behavior and current internal state. | |
| className | string | Class to add if not passed a parentItem property. | |
| compareItems | (item: TreeViewDataItem, itemToCheck: TreeViewDataItem) => boolean | (item, itemToCheck) => item.id === itemToCheck.id | Comparison function for determining active items. |
| defaultAllExpanded | boolean | false | Sets the default expanded behavior. |
| expandedIcon | React.ReactNode | Icon for all expanded node items. | |
| hasBadges | boolean | false | Flag indicating if all nodes in the tree view should have badges. |
| hasChecks | boolean | false | Flag indicating if all nodes in the tree view should have checkboxes. |
| hasGuides | boolean | false | Flag indicating if the tree view has guide lines. |
| hasSelectableNodes | boolean | false | Flag indicating that tree nodes should be independently selectable, even when having children. |
| icon | React.ReactNode | Icon for all leaf or unexpanded node items. | |
| id | string | ID of the tree view. | |
| isNested | boolean | false | Flag indicating if the tree view is nested. |
| onCheck | (event: React.ChangeEvent<HTMLInputElement>, item: TreeViewDataItem, parentItem: TreeViewDataItem) => void | Callback for item checkbox selection. | |
| onSelect | (event: React.MouseEvent, item: TreeViewDataItem, parentItem: TreeViewDataItem) => void | Callback for item selection. | |
| parentItem | TreeViewDataItem | Internal. Parent item of a tree view list item. | |
| toolbar | React.ReactNode | Toolbar to display above the tree view. | |
| useMemo | boolean | Flag indicating the tree view should utilize memoization to help render large data sets. Setting this property requires that the activeItems property is passed an array containing every node in the selected item's path. | |
| variant | 'default' | 'compact' | 'compactNoBackground' | 'default' | Variant presentation styles for the tree view. |
TreeViewDataItem
| Name | Type | Default | Description |
|---|---|---|---|
| namerequired | React.ReactNode | Internal content of a tree view item. | |
| action | React.ReactNode | Action of a tree view item, which can be either a button or dropdown component. | |
| badgeProps | any | Additional properties of the tree view item badge. | |
| checkProps | TreeViewCheckProps | Additional properties of the tree view item checkbox. | |
| children | TreeViewDataItem[] | Child nodes of a tree view item. | |
| customBadgeContent | React.ReactNode | Optional prop for a custom badge. | |
| defaultExpanded | boolean | Flag indicating if node is expanded by default. | |
| expandedIcon | React.ReactNode | Expanded icon of a tree view item. | |
| hasBadge | boolean | Flag indicating if a tree view item has a badge. | |
| hasCheck | boolean | Flag indicating if a tree view item has a checkbox. | |
| icon | React.ReactNode | Default icon of a tree view item. | |
| id | string | ID of a tree view item. | |
| title | React.ReactNode | Title of a tree view item. Only used in compact presentations. |
TreeViewSearch
| Name | Type | Default | Description |
|---|---|---|---|
| aria-label | string | Accessible label for the search input. | |
| className | string | Classes applied to the wrapper for the search input. | |
| id | string | Id for the search input. | |
| name | string | Name for the search input. | |
| onSearch | (event: React.ChangeEvent<HTMLInputElement>) => void | Callback for search input. |
CSS variables
| .pf-c-tree-view | --pf-c-tree-view--PaddingTop | 0.5rem | ||
| .pf-c-tree-view | --pf-c-tree-view--PaddingBottom | 0.5rem | ||
| .pf-c-tree-view | --pf-c-tree-view__node--indent--base | calc(1rem * 2 + 1rem) | ||
| .pf-c-tree-view | --pf-c-tree-view__node--nested-indent--base | calc(calc(1rem * 2 + 1rem) - 1rem) | ||
| .pf-c-tree-view | --pf-c-tree-view__node--PaddingTop--base | 0.5rem | ||
| .pf-c-tree-view | --pf-c-tree-view__node--PaddingTop | 0.5rem | ||
| .pf-c-tree-view | --pf-c-tree-view__node--PaddingRight | 0.5rem | ||
| .pf-c-tree-view | --pf-c-tree-view__node--PaddingBottom | 0.5rem | ||
| .pf-c-tree-view | --pf-c-tree-view__node--PaddingLeft | calc(1rem * 2 + 1rem) | ||
| .pf-c-tree-view | --pf-c-tree-view__node--Color | #151515 | ||
| .pf-c-tree-view | --pf-c-tree-view__node--m-current--Color | #06c | ||
| .pf-c-tree-view | --pf-c-tree-view__node--m-current--FontWeight | 700 | ||
| .pf-c-tree-view | --pf-c-tree-view__node-container--Display | contents | ||
| .pf-c-tree-view | --pf-c-tree-view__node-content--RowGap | 0.5rem | ||
| .pf-c-tree-view | --pf-c-tree-view__node-content--Overflow | visible | ||
| .pf-c-tree-view | --pf-c-tree-view__node--hover--BackgroundColor | #f0f0f0 | ||
| .pf-c-tree-view | --pf-c-tree-view__node--focus--BackgroundColor | #f0f0f0 | ||
| .pf-c-tree-view | --pf-c-tree-view__list-item__list-item__node-toggle--Top | 0.5rem | ||
| .pf-c-tree-view | --pf-c-tree-view__list-item__list-item__node-toggle--Left | calc(1rem * 2 + 1rem) | ||
| .pf-c-tree-view | --pf-c-tree-view__list-item__list-item__node-toggle--TranslateX | -100% | ||
| .pf-c-tree-view | --pf-c-tree-view__node-toggle--Position | absolute | ||
| .pf-c-tree-view | --pf-c-tree-view__node-toggle--Color--base | #6a6e73 | ||
| .pf-c-tree-view | --pf-c-tree-view__node-toggle--Color | #6a6e73 | ||
| .pf-c-tree-view | --pf-c-tree-view__node-toggle--hover--Color | #151515 | ||
| .pf-c-tree-view | --pf-c-tree-view__node-toggle--focus--Color | #151515 | ||
| .pf-c-tree-view | --pf-c-tree-view__node-toggle--active--Color | #151515 | ||
| .pf-c-tree-view | --pf-c-tree-view__list-item--m-expanded__node-toggle--Color | #151515 | ||
| .pf-c-tree-view | --pf-c-tree-view__node-toggle-icon--MinWidth | 1rem | ||
| .pf-c-tree-view | --pf-c-tree-view__node-toggle-icon--Transition | transform 250ms cubic-bezier(.645, .045, .355, 1) | ||
| .pf-c-tree-view | --pf-c-tree-view__node-toggle-button--PaddingTop | 0.375rem | ||
| .pf-c-tree-view | --pf-c-tree-view__node-toggle-button--PaddingRight | 1rem | ||
| .pf-c-tree-view | --pf-c-tree-view__node-toggle-button--PaddingBottom | 0.375rem | ||
| .pf-c-tree-view | --pf-c-tree-view__node-toggle-button--PaddingLeft | 1rem | ||
| .pf-c-tree-view | --pf-c-tree-view__node-toggle-button--MarginTop | calc(0.375rem * -1) | ||
| .pf-c-tree-view | --pf-c-tree-view__node-toggle-button--MarginBottom | calc(0.375rem * -1) | ||
| .pf-c-tree-view | --pf-c-tree-view__node-check--MarginRight | 0.5rem | ||
| .pf-c-tree-view | --pf-c-tree-view__node-count--MarginLeft | 0.5rem | ||
| .pf-c-tree-view | --pf-c-tree-view__node-count--c-badge--m-read--BackgroundColor | #d2d2d2 | ||
| .pf-c-tree-view | --pf-c-tree-view__search--PaddingTop | 0.5rem | ||
| .pf-c-tree-view | --pf-c-tree-view__search--PaddingRight | 0.5rem | ||
| .pf-c-tree-view | --pf-c-tree-view__search--PaddingBottom | 0.5rem | ||
| .pf-c-tree-view | --pf-c-tree-view__search--PaddingLeft | 0.5rem | ||
| .pf-c-tree-view | --pf-c-tree-view__node-icon--PaddingRight | 0.5rem | ||
| .pf-c-tree-view | --pf-c-tree-view__node-icon--Color | #6a6e73 | ||
| .pf-c-tree-view | --pf-c-tree-view__node-toggle-icon--base--Rotate | 0 | ||
| .pf-c-tree-view | --pf-c-tree-view__node-toggle-icon--Rotate | 0 | ||
| .pf-c-tree-view | --pf-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate | 90deg | ||
| .pf-c-tree-view | --pf-c-tree-view__node-text--max-lines | 1 | ||
| .pf-c-tree-view | --pf-c-tree-view__node-title--FontWeight | 700 | ||
| .pf-c-tree-view | --pf-c-tree-view__action--MarginLeft | 1rem | ||
| .pf-c-tree-view | --pf-c-tree-view__action--focus--BackgroundColor | #f0f0f0 | ||
| .pf-c-tree-view | --pf-c-tree-view__action--Color | #6a6e73 | ||
| .pf-c-tree-view | --pf-c-tree-view__action--hover--Color | #151515 | ||
| .pf-c-tree-view | --pf-c-tree-view__action--focus--Color | #151515 | ||
| .pf-c-tree-view | --pf-c-tree-view--m-guides--guide--Left | calc(calc(1rem * 2 + 1rem) - 1.5rem) | ||
| .pf-c-tree-view | --pf-c-tree-view--m-guides--guide-color--base | #d2d2d2 | ||
| .pf-c-tree-view | --pf-c-tree-view--m-guides--guide-width--base | 1px | ||
| .pf-c-tree-view | --pf-c-tree-view--m-guides--guide-left--base | calc(calc(1rem * 2 + 1rem) - 1.5rem) | ||
| .pf-c-tree-view | --pf-c-tree-view--m-guides--guide-left--base--offset | calc(calc(1rem * 2 + 1rem) + 1rem / 2) | ||
| .pf-c-tree-view | --pf-c-tree-view--m-guides__list-node--guide-width--base | 1.5rem | ||
| .pf-c-tree-view | --pf-c-tree-view--m-guides__list-item--before--Top | 0 | ||
| .pf-c-tree-view | --pf-c-tree-view--m-guides__list-item--before--Width | 1px | ||
| .pf-c-tree-view | --pf-c-tree-view--m-guides__list-item--before--Height | 100% | ||
| .pf-c-tree-view | --pf-c-tree-view--m-guides__list-item--before--BackgroundColor | #d2d2d2 | ||
| .pf-c-tree-view | --pf-c-tree-view--m-guides__list-item--last-child--before--Top | 1.125rem | ||
| .pf-c-tree-view | --pf-c-tree-view--m-guides__list-item--last-child--before--Height | 1.125rem | ||
| .pf-c-tree-view | --pf-c-tree-view--m-guides__list-item--ZIndex | 100 | ||
| .pf-c-tree-view | --pf-c-tree-view--m-guides__node--before--Width | 1rem | ||
| .pf-c-tree-view | --pf-c-tree-view--m-guides__node--before--Height | 1px | ||
| .pf-c-tree-view | --pf-c-tree-view--m-guides__node--before--Top | 1.125rem | ||
| .pf-c-tree-view | --pf-c-tree-view--m-guides__node--before--BackgroundColor | #d2d2d2 | ||
| .pf-c-tree-view | --pf-c-tree-view--m-compact--base-border--Left--offset | 1rem | ||
| .pf-c-tree-view | --pf-c-tree-view--m-compact--base-border--Left | calc(calc(1rem * 2 + 1rem) - 1rem) | ||
| .pf-c-tree-view | --pf-c-tree-view--m-compact__node--indent--base | calc(1rem * 2 + 1rem) | ||
| .pf-c-tree-view | --pf-c-tree-view--m-compact__node--nested-indent--base | 1.5rem | ||
| .pf-c-tree-view | --pf-c-tree-view--m-compact--border--Left | calc(calc(1rem * 2 + 1rem) - 1rem) | ||
| .pf-c-tree-view | --pf-c-tree-view--m-compact__node--PaddingTop | 0 | ||
| .pf-c-tree-view | --pf-c-tree-view--m-compact__node--PaddingBottom | 0 | ||
| .pf-c-tree-view | --pf-c-tree-view--m-compact__node--nested--PaddingTop | 0.5rem | ||
| .pf-c-tree-view | --pf-c-tree-view--m-compact__node--nested--PaddingBottom | 0.5rem | ||
| .pf-c-tree-view | --pf-c-tree-view--m-compact__list-item__list-item__node-toggle--Top | calc(1.5rem) | ||
| .pf-c-tree-view | --pf-c-tree-view--m-compact__list-item--BorderBottomWidth | 1px | ||
| .pf-c-tree-view | --pf-c-tree-view--m-compact__list-item--BorderBottomColor | #d2d2d2 | ||
| .pf-c-tree-view | --pf-c-tree-view--m-compact__list-item--before--Top | 0 | ||
| .pf-c-tree-view | --pf-c-tree-view--m-compact__list-item--last-child--before--Height | calc(1.5rem + 0.5rem + 0.25rem) | ||
| .pf-c-tree-view | --pf-c-tree-view--m-compact__list-item--nested--before--Top | calc(0.5rem * -1) | ||
| .pf-c-tree-view | --pf-c-tree-view--m-compact__list-item--nested--last-child--before--Height | calc(calc(1.5rem + 0.5rem + 0.25rem) + 0.5rem) | ||
| .pf-c-tree-view | --pf-c-tree-view--m-compact__node--PaddingLeft | calc(1rem * 2 + 1rem) | ||
| .pf-c-tree-view | --pf-c-tree-view--m-compact__node--before--Top | calc(1.5rem + 0.5rem + 0.25rem) | ||
| .pf-c-tree-view | --pf-c-tree-view--m-compact__node--level-2--PaddingLeft | calc(1rem * 2 + 1rem) | ||
| .pf-c-tree-view | --pf-c-tree-view--m-compact__node-toggle--nested--MarginRight | calc(1rem * -.5) | ||
| .pf-c-tree-view | --pf-c-tree-view--m-compact__node-toggle--nested--MarginLeft | calc(1rem * -1.5) | ||
| .pf-c-tree-view | --pf-c-tree-view--m-compact__node-container--Display | flex | ||
| .pf-c-tree-view | --pf-c-tree-view--m-compact__node-container--PaddingBottom--base | 1.5rem | ||
| .pf-c-tree-view | --pf-c-tree-view--m-compact__node-container--PaddingTop | 1.5rem | ||
| .pf-c-tree-view | --pf-c-tree-view--m-compact__node-container--PaddingRight | 1.5rem | ||
| .pf-c-tree-view | --pf-c-tree-view--m-compact__node-container--PaddingBottom | 1.5rem | ||
| .pf-c-tree-view | --pf-c-tree-view--m-compact__node-container--PaddingLeft | 0.25rem | ||
| .pf-c-tree-view | --pf-c-tree-view--m-compact__node-container--nested--PaddingTop | 1rem | ||
| .pf-c-tree-view | --pf-c-tree-view--m-compact__node-container--nested--PaddingRight | 1.5rem | ||
| .pf-c-tree-view | --pf-c-tree-view--m-compact__node-container--nested--PaddingBottom | 1rem | ||
| .pf-c-tree-view | --pf-c-tree-view--m-compact__node-container--nested--PaddingLeft | 1.5rem | ||
| .pf-c-tree-view | --pf-c-tree-view--m-compact__node-container--nested--BackgroundColor | #f0f0f0 | ||
| .pf-c-tree-view | --pf-c-tree-view--m-compact__list-item--m-expanded__node-container--PaddingBottom | 0 | ||
| .pf-c-tree-view | --pf-c-tree-view--m-no-background__node-container--BackgroundColor | transparent | ||
| .pf-c-tree-view | --pf-c-tree-view--m-compact--m-no-background--base-border--Left--offset | 0.5rem | ||
| .pf-c-tree-view | --pf-c-tree-view--m-compact--m-no-background--base-border--Left | calc(calc(1rem * 2 + 1rem) - 0.5rem) | ||
| .pf-c-tree-view | --pf-c-tree-view--m-compact--m-no-background__node--indent--base | calc(1rem * 2 + 1rem) | ||
| .pf-c-tree-view | --pf-c-tree-view--m-compact--m-no-background__node--nested-indent--base | 3rem | ||
| .pf-c-tree-view | --pf-c-tree-view--m-compact--m-no-background__node--nested--PaddingTop | 0 | ||
| .pf-c-tree-view | --pf-c-tree-view--m-compact--m-no-background__node--nested--PaddingBottom | 0 | ||
| .pf-c-tree-view | --pf-c-tree-view--m-compact--m-no-background__node--before--Top | calc(1rem + 0.5rem + 0.25rem) | ||
| .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-guides--guide--Left | calc(calc(1.5rem * 1 + calc(1rem * 2 + 1rem)) - calc(calc(1.5rem * 1 + calc(1rem * 2 + 1rem)) + 1rem / 2)) | ||
| .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view__node--PaddingLeft | calc(1.5rem * 1 + calc(1rem * 2 + 1rem)) | ||
| .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-compact--border--Left | calc(calc(1.5rem * 1 + calc(1rem * 2 + 1rem)) - 1rem) | ||
| .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-compact__list-item--before--Top | calc(0.5rem * -1) | ||
| .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-compact__list-item--last-child--before--Height | calc(calc(1.5rem + 0.5rem + 0.25rem) + 0.5rem) | ||
| .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item:last-child | --pf-c-tree-view--m-compact__list-item--BorderBottomWidth | 0 | ||
| .pf-c-tree-view.pf-m-compact | --pf-c-tree-view__node--PaddingTop | 0 | ||
| .pf-c-tree-view.pf-m-compact | --pf-c-tree-view__node--PaddingBottom | 0 | ||
| .pf-c-tree-view.pf-m-compact | --pf-c-tree-view__node-container--Display | flex | ||
| .pf-c-tree-view.pf-m-compact | --pf-c-tree-view__node--hover--BackgroundColor | transparent | ||
| .pf-c-tree-view.pf-m-compact | --pf-c-tree-view__node--focus--BackgroundColor | transparent | ||
| .pf-c-tree-view.pf-m-compact | --pf-c-tree-view__list-item__list-item__node-toggle--Top | calc(1.5rem) | ||
| .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item.pf-m-expanded | --pf-c-tree-view--m-compact__node-container--PaddingBottom | 0 | ||
| .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view__node--PaddingTop | 0.5rem | ||
| .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view__node--PaddingBottom | 0.5rem | ||
| .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view__node-toggle--Position | static | ||
| .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view__node--PaddingLeft | calc(1rem * 2 + 1rem) | ||
| .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view__list-item__list-item__node-toggle--TranslateX | 0 | ||
| .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-compact__list-item--BorderBottomWidth | 0 | ||
| .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-compact__node-container--PaddingBottom | 1.5rem | ||
| .pf-c-tree-view.pf-m-compact.pf-m-no-background | --pf-c-tree-view--m-compact__node--before--Top | calc(1rem + 0.5rem + 0.25rem) | ||
| .pf-c-tree-view.pf-m-compact.pf-m-no-background .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view__node--PaddingTop | 0 | ||
| .pf-c-tree-view.pf-m-compact.pf-m-no-background .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view__node--PaddingBottom | 0 | ||
| .pf-c-tree-view.pf-m-compact.pf-m-no-background .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-compact--border--Left | calc(calc(3rem * 1 + calc(1rem * 2 + 1rem)) - 0.5rem) | ||
| .pf-c-tree-view.pf-m-compact.pf-m-no-background .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view__node--PaddingLeft | calc(3rem * 1 + calc(1rem * 2 + 1rem)) | ||
| .pf-c-tree-view.pf-m-no-background | --pf-c-tree-view--m-compact__node-container--nested--BackgroundColor | transparent | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view__node-toggle-icon--Rotate | 0 | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view__node-toggle--Color | #6a6e73 | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view__list-item__list-item__node-toggle--Left | calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 1 + calc(1rem * 2 + 1rem)) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view__node--PaddingLeft | calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 1 + calc(1rem * 2 + 1rem)) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-guides--border--nested--Left | calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 1 + calc(1rem * 2 + 1rem)) - calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 1 + calc(1rem * 2 + 1rem)) + 1rem / 2)) | ||
| .pf-c-tree-view__list-item.pf-m-expanded | --pf-c-tree-view__node-toggle--Color | #151515 | ||
| .pf-c-tree-view__list-item.pf-m-expanded | --pf-c-tree-view__node-toggle-icon--Rotate | 90deg | ||
| .pf-c-tree-view__node.pf-m-current | --pf-c-tree-view__node--Color | #06c | ||
| .pf-c-tree-view__node .pf-c-tree-view__node-count .pf-c-badge.pf-m-read | --pf-c-badge--m-read--BackgroundColor | #d2d2d2 | ||
| .pf-c-tree-view__node:not(.pf-m-selectable):hover | --pf-c-tree-view__node-toggle--Color | #151515 | ||
| .pf-c-tree-view__node:not(.pf-m-selectable):focus | --pf-c-tree-view__node-toggle--Color | #151515 | ||
| .pf-c-tree-view__node:not(.pf-m-selectable):active | --pf-c-tree-view__node-toggle--Color | #151515 | ||
| .pf-c-tree-view__node-title.pf-m-truncate | --pf-c-tree-view__node-content--Overflow | hidden | ||
| .pf-c-tree-view.pf-m-truncate .pf-c-tree-view__node-title | --pf-c-tree-view__node-content--Overflow | hidden | ||
| .pf-c-tree-view__action:hover | --pf-c-tree-view__action--Color | #151515 | ||
| .pf-c-tree-view__action:focus | --pf-c-tree-view__action--Color | #151515 | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view__list-item__list-item__node-toggle--Left | calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 2 + calc(1rem * 2 + 1rem)) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view__node--PaddingLeft | calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 2 + calc(1rem * 2 + 1rem)) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-guides--border--nested--Left | calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 2 + calc(1rem * 2 + 1rem)) - calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 2 + calc(1rem * 2 + 1rem)) + 1rem / 2)) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-compact__node--PaddingLeft | calc(1.5rem * 1 + calc(1rem * 2 + 1rem)) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-compact--border--nested--Left | calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 2 + calc(1rem * 2 + 1rem)) - 1rem) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-compact--m-no-background__node--PaddingLeft | calc(3rem * 1 + calc(1rem * 2 + 1rem)) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-compact--m-no-background--border--nested--Left | calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 2 + calc(1rem * 2 + 1rem)) - 0.5rem) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view__list-item__list-item__node-toggle--Left | calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 3 + calc(1rem * 2 + 1rem)) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view__node--PaddingLeft | calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 3 + calc(1rem * 2 + 1rem)) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-guides--border--nested--Left | calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 3 + calc(1rem * 2 + 1rem)) - calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 3 + calc(1rem * 2 + 1rem)) + 1rem / 2)) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-compact__node--PaddingLeft | calc(1.5rem * 2 + calc(1rem * 2 + 1rem)) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-compact--border--nested--Left | calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 3 + calc(1rem * 2 + 1rem)) - 1rem) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-compact--m-no-background__node--PaddingLeft | calc(3rem * 2 + calc(1rem * 2 + 1rem)) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-compact--m-no-background--border--nested--Left | calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 3 + calc(1rem * 2 + 1rem)) - 0.5rem) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view__list-item__list-item__node-toggle--Left | calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 4 + calc(1rem * 2 + 1rem)) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view__node--PaddingLeft | calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 4 + calc(1rem * 2 + 1rem)) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-guides--border--nested--Left | calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 4 + calc(1rem * 2 + 1rem)) - calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 4 + calc(1rem * 2 + 1rem)) + 1rem / 2)) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-compact__node--PaddingLeft | calc(1.5rem * 3 + calc(1rem * 2 + 1rem)) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-compact--border--nested--Left | calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 4 + calc(1rem * 2 + 1rem)) - 1rem) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-compact--m-no-background__node--PaddingLeft | calc(3rem * 3 + calc(1rem * 2 + 1rem)) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-compact--m-no-background--border--nested--Left | calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 4 + calc(1rem * 2 + 1rem)) - 0.5rem) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view__list-item__list-item__node-toggle--Left | calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 5 + calc(1rem * 2 + 1rem)) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view__node--PaddingLeft | calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 5 + calc(1rem * 2 + 1rem)) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-guides--border--nested--Left | calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 5 + calc(1rem * 2 + 1rem)) - calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 5 + calc(1rem * 2 + 1rem)) + 1rem / 2)) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-compact__node--PaddingLeft | calc(1.5rem * 4 + calc(1rem * 2 + 1rem)) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-compact--border--nested--Left | calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 5 + calc(1rem * 2 + 1rem)) - 1rem) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-compact--m-no-background__node--PaddingLeft | calc(3rem * 4 + calc(1rem * 2 + 1rem)) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-compact--m-no-background--border--nested--Left | calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 5 + calc(1rem * 2 + 1rem)) - 0.5rem) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view__list-item__list-item__node-toggle--Left | calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 6 + calc(1rem * 2 + 1rem)) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view__node--PaddingLeft | calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 6 + calc(1rem * 2 + 1rem)) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-guides--border--nested--Left | calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 6 + calc(1rem * 2 + 1rem)) - calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 6 + calc(1rem * 2 + 1rem)) + 1rem / 2)) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-compact__node--PaddingLeft | calc(1.5rem * 5 + calc(1rem * 2 + 1rem)) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-compact--border--nested--Left | calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 6 + calc(1rem * 2 + 1rem)) - 1rem) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-compact--m-no-background__node--PaddingLeft | calc(3rem * 5 + calc(1rem * 2 + 1rem)) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-compact--m-no-background--border--nested--Left | calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 6 + calc(1rem * 2 + 1rem)) - 0.5rem) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view__list-item__list-item__node-toggle--Left | calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 7 + calc(1rem * 2 + 1rem)) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view__node--PaddingLeft | calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 7 + calc(1rem * 2 + 1rem)) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-guides--border--nested--Left | calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 7 + calc(1rem * 2 + 1rem)) - calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 7 + calc(1rem * 2 + 1rem)) + 1rem / 2)) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-compact__node--PaddingLeft | calc(1.5rem * 6 + calc(1rem * 2 + 1rem)) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-compact--border--nested--Left | calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 7 + calc(1rem * 2 + 1rem)) - 1rem) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-compact--m-no-background__node--PaddingLeft | calc(3rem * 6 + calc(1rem * 2 + 1rem)) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-compact--m-no-background--border--nested--Left | calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 7 + calc(1rem * 2 + 1rem)) - 0.5rem) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view__list-item__list-item__node-toggle--Left | calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 8 + calc(1rem * 2 + 1rem)) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view__node--PaddingLeft | calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 8 + calc(1rem * 2 + 1rem)) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-guides--border--nested--Left | calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 8 + calc(1rem * 2 + 1rem)) - calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 8 + calc(1rem * 2 + 1rem)) + 1rem / 2)) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-compact__node--PaddingLeft | calc(1.5rem * 7 + calc(1rem * 2 + 1rem)) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-compact--border--nested--Left | calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 8 + calc(1rem * 2 + 1rem)) - 1rem) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-compact--m-no-background__node--PaddingLeft | calc(3rem * 7 + calc(1rem * 2 + 1rem)) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-compact--m-no-background--border--nested--Left | calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 8 + calc(1rem * 2 + 1rem)) - 0.5rem) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view__list-item__list-item__node-toggle--Left | calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 9 + calc(1rem * 2 + 1rem)) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view__node--PaddingLeft | calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 9 + calc(1rem * 2 + 1rem)) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-guides--border--nested--Left | calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 9 + calc(1rem * 2 + 1rem)) - calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 9 + calc(1rem * 2 + 1rem)) + 1rem / 2)) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-compact__node--PaddingLeft | calc(1.5rem * 8 + calc(1rem * 2 + 1rem)) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-compact--border--nested--Left | calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 9 + calc(1rem * 2 + 1rem)) - 1rem) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-compact--m-no-background__node--PaddingLeft | calc(3rem * 8 + calc(1rem * 2 + 1rem)) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-compact--m-no-background--border--nested--Left | calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 9 + calc(1rem * 2 + 1rem)) - 0.5rem) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view__list-item__list-item__node-toggle--Left | calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 10 + calc(1rem * 2 + 1rem)) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view__node--PaddingLeft | calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 10 + calc(1rem * 2 + 1rem)) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-guides--border--nested--Left | calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 10 + calc(1rem * 2 + 1rem)) - calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 10 + calc(1rem * 2 + 1rem)) + 1rem / 2)) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-compact__node--PaddingLeft | calc(1.5rem * 9 + calc(1rem * 2 + 1rem)) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-compact--border--nested--Left | calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 10 + calc(1rem * 2 + 1rem)) - 1rem) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-compact--m-no-background__node--PaddingLeft | calc(3rem * 9 + calc(1rem * 2 + 1rem)) | ||
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view--m-compact--m-no-background--border--nested--Left | calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 10 + calc(1rem * 2 + 1rem)) - 0.5rem) | ||
View source on GitHub
