Info alert:Beta feature
This Beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. To learn more go to our Beta components page on GitHub.
Examples
Compact
-
apiVersionAPIVersion defines the versioned schema of this representation of an object. Servers should convert recognized schemas to the latest internal value and may reject unrecognized values.
-
kindKind is a string value representing the REST resource this object represents. Servers may infer this from the endpoint the client submits requests to. Cannot be updated is CamelCase. More info:
-
metadataStandard object metadata
Compact, no background
-
apiVersionAPIVersion defines the versioned schema of this representation of an object. Servers should convert recognized schemas to the latest internal value and may reject unrecognized values.
-
kindKind is a string value representing the REST resource this object represents. Servers may infer this from the endpoint the client submits requests to. Cannot be updated is CamelCase. More info:
-
metadataStandard object metadata
Documentation
Overview
Accessibility
Attribute | Applied to | Outcome |
---|---|---|
role="tree" | .pf-c-tree-view__list | Identifies the ul as a tree widget. Place on the outermost ul only |
role="group" | .pf-c-tree-view__list | Identifies the ul element as a container of treeitem elements that form a branch of the tree. Place on all ul s except the first ul |
role="treeitem" | .pf-c-tree-view__list-item | Hides the implicit listitem role of the li element from assistive technologies. |
aria-expanded="false" | .pf-c-tree-view__list-item | For an expandable item, indicates the parent node is closed, i.e., the descendant elements are not visible. |
aria-expanded="true" | .pf-c-tree-view__list-item.pf-m-expanded | Indicates the parent node is open, i.e., the descendant elements are visible. |
tabindex="-1" | .pf-c-tree-view__list-item | Makes the element with the treeitem role focusable without including it in the tab sequence of the page. |
tabindex="0" | .pf-c-tree-view__list-item | Includes the element with the treeitem role in the tab sequence. Only one treeitem in the tree has tabindex="0". When the user moves focus in the tree, the element included in the tab sequence changes to the element with focus. |
aria-label="[button label text]" | .pf-c-tree-view__action | Provides an accessible name for the button when an icon is used instead of text. Required when icon is used with no supporting text |
Usage
Class | Applied | Outcome |
---|---|---|
.pf-c-tree-view | <div> | Initiates the tree view container. Required |
.pf-c-tree-view__list | <ul> | Initiates a tree view list. Required |
.pf-c-tree-view__list-item | <li> | Initiates a tree view list item. Required |
.pf-c-tree-view__content | <div> | Initiates a tree view node. Required |
.pf-c-tree-view__node | <button> , <a> | Initiates a tree view node. Required |
.pf-c-tree-view__node-container | <span> | Initiates a tree view node container. Required for compact variant |
.pf-c-tree-view__node-content | <span> | Initiates a tree view node content container used to stack elements. |
.pf-c-tree-view__node-count | <span> | Initiates a tree view node count. |
.pf-c-tree-view__node-toggle | <div> | Initiates a tree view toggle. |
.pf-c-tree-view__node-toggle-button | <button> | Initiates a tree view toggle button. |
.pf-c-tree-view__node-toggle-icon | <span> | Initiates a tree view toggle icon. |
.pf-c-tree-view__node-title | <span> | Initiates a tree view node title. |
.pf-c-tree-view__node-text | <span> | Initiates tree view text. |
.pf-c-tree-view__node-icon | <span> | Initiates a tree view icon. |
.pf-c-tree-view__node-check | <span> | Initiates a tree view check. |
.pf-c-tree-view__action | <div> | Initiates a tree view action wrapper. |
.pf-c-tree-view__search | <div> | Initiates a tree view search wrapper. |
.pf-m-guides | .pf-c-tree-view | Modifies the tree view to the guides presentation. |
.pf-m-compact | .pf-c-tree-view | Modifies the tree view to the compact presentation. |
.pf-m-no-background | .pf-c-tree-view.pf-m-compact | Modifies the tree view compact variant node containers to have a transparent background. |
.pf-m-current | .pf-c-tree-view__node | Modifies the tree view node to be current. |
.pf-m-truncate | .pf-c-tree-view , .pf-c-tree-view__node-title , .pf-c-tree-view__node-text | Modifies the tree view title or text to truncate. |
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-icon--MinWidth | 1rem | ||
.pf-c-tree-view | --pf-c-tree-view__node-toggle-icon--Transition | all 250ms cubic-bezier(.42, 0, .58, 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__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-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-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)) | ||