Skip to content
Patternfly Logo

Tree view

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.

Examples

Default

With checkboxes

With icons

With badges

With action item

With non-expandable top level nodes

Guides

Compact

  • apiVersion
    APIVersion 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.
  • kind
    Kind 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:
  • metadata
    Standard object metadata
    • minReadySeconds Minimum number of seconds for which a newly created pod should be ready without any of its container crashing, for it to be considered available. Default to 0 (pod will be considered available as soon as it is ready).
    • paused Indicates that the deployment is paused
    • progressDeadlineSeconds The maximum time in seconds for a deployment to make progress before it is considered to be failed. The deployment controller will continue to process failed deployments and a condition with a ProgressDeadlineExceeded reason will be surfaced in the deployment status. Note that the progress will not de estimated during the time a deployment is paused. Defaults to 600s.
    • replicas Number of desired pods. This is a pointer to distinguish between explicit zero and not specified. Defaults to 1.
    • revisionHistoryLimit The number of old ReplicaSets to retain to allow rollback. This is a pointer to distinguish between explicit zero and not specified. Defaults to 10.
        • matchLabels matchExpressions is a list of the label selector requirements. The requirements and ANDed.
      • matchLabels Map of {key.value} pairs. A single {key.value} in the matchLabels map is equivalent to an element of matchExpressions, whose key field is "key", the operator is "In" and the values array contains only "value". The requirements are ANDed.
    • matchLabels Map of {key.value} pairs. A single {key.value} in the matchLabels map is equivalent to an element of matchExpressions, whose key field is "key", the operator is "In" and the values array contains only "value". The requirements are ANDed.

Compact, no background

  • apiVersion
    APIVersion 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.
  • kind
    Kind 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:
  • metadata
    Standard object metadata
    • minReadySeconds Minimum number of seconds for which a newly created pod should be ready without any of its container crashing, for it to be considered available. Default to 0 (pod will be considered available as soon as it is ready).
    • paused Indicates that the deployment is paused
    • progressDeadlineSeconds The maximum time in seconds for a deployment to make progress before it is considered to be failed. The deployment controller will continue to process failed deployments and a condition with a ProgressDeadlineExceeded reason will be surfaced in the deployment status. Note that the progress will not de estimated during the time a deployment is paused. Defaults to 600s.
    • replicas Number of desired pods. This is a pointer to distinguish between explicit zero and not specified. Defaults to 1.
    • revisionHistoryLimit The number of old ReplicaSets to retain to allow rollback. This is a pointer to distinguish between explicit zero and not specified. Defaults to 10.
        • matchLabels matchExpressions is a list of the label selector requirements. The requirements and ANDed.
      • matchLabels Map of {key.value} pairs. A single {key.value} in the matchLabels map is equivalent to an element of matchExpressions, whose key field is "key", the operator is "In" and the values array contains only "value". The requirements are ANDed.
    • matchLabels Map of {key.value} pairs. A single {key.value} in the matchLabels map is equivalent to an element of matchExpressions, whose key field is "key", the operator is "In" and the values array contains only "value". The requirements are ANDed.

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 uls 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__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))
.pf-c-tree-view__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))