Examples
Multiselectable
A tree view can be setup to allow multiple nodes to be selected. When a tree view is intended to allow multiple selection, aria-multiselectable="true"
must be passed to the root ul[role="tree"]
element.
With search
A search input can be used to filter tree view items. It is recommended that a tree view with more than 7 nodes includes a search input.
Documentation
Usage
Class | Applied | Outcome |
---|---|---|
.pf-v5-c-tree-view | <div> | Initiates the tree view container. Required |
.pf-v5-c-tree-view__list | <ul> | Initiates a tree view list. Required |
.pf-v5-c-tree-view__list-item | <li> | Initiates a tree view list item. Required |
.pf-v5-c-tree-view__content | <div> | Initiates a tree view node. Required |
.pf-v5-c-tree-view__node | <button> , <label> | Initiates a tree view node. Required |
.pf-v5-c-tree-view__node-container | <span> | Initiates a tree view node container. Required for compact variant |
.pf-v5-c-tree-view__node-content | <span> | Initiates a tree view node content container used to stack elements. |
.pf-v5-c-tree-view__node-count | <span> | Initiates a tree view node count. |
.pf-v5-c-tree-view__node-toggle | <span> , <button> | Initiates a tree view toggle. |
.pf-v5-c-tree-view__node-toggle-icon | <span> | Initiates a tree view toggle icon. |
.pf-v5-c-tree-view__node-title | <span> | Initiates a tree view node title. |
.pf-v5-c-tree-view__node-text | <span> , <button> | Initiates tree view text. Note: Use a <button> when the node is expandable and selectable. |
.pf-v5-c-tree-view__node-icon | <span> | Initiates a tree view icon. |
.pf-v5-c-tree-view__node-check | <span> | Initiates a tree view check. |
.pf-v5-c-tree-view__action | <div> | Initiates a tree view action wrapper. |
.pf-v5-c-tree-view__search | <div> | Initiates a tree view search wrapper. |
.pf-m-guides | .pf-v5-c-tree-view | Modifies the tree view to the guides presentation. |
.pf-m-compact | .pf-v5-c-tree-view | Modifies the tree view to the compact presentation. |
.pf-m-no-background | .pf-v5-c-tree-view.pf-m-compact | Modifies the tree view compact variant node containers to have a transparent background. |
.pf-m-current | .pf-v5-c-tree-view__node | Modifies the tree view node to be current. |
.pf-m-selectable | .pf-v5-c-tree-view__node | For use on nodes that are expandable and selectable, when the default click action on the node selects it instead of expanding it. |
.pf-m-truncate | .pf-v5-c-tree-view , .pf-v5-c-tree-view__node-title , .pf-v5-c-tree-view__node-text | Modifies the tree view title or text to truncate. |
CSS variables
Expand or collapse column | Selector | Variable | Value | |
---|---|---|---|---|
.pf-v5-c-tree-view | --pf-v5-c-tree-view--PaddingTop | 0.5rem | ||
--pf-v5-c-tree-view--PaddingTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--PaddingBottom | 0.5rem | ||
--pf-v5-c-tree-view--PaddingBottom --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view__node--indent--base | calc(1rem * 2 + 1rem) | ||
--pf-v5-c-tree-view__node--indent--base calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) calc(1rem * 2 + 1rem) | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view__node--nested-indent--base | calc(calc(1rem * 2 + 1rem) - 1rem) | ||
--pf-v5-c-tree-view__node--nested-indent--base calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) calc(calc(1rem * 2 + 1rem) - 1rem) | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view__node--PaddingTop--base | 0.5rem | ||
--pf-v5-c-tree-view__node--PaddingTop--base --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view__node--PaddingTop | 0.5rem | ||
--pf-v5-c-tree-view__node--PaddingTop --pf-v5-c-tree-view__node--PaddingTop--base --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view__node--PaddingRight | 0.5rem | ||
--pf-v5-c-tree-view__node--PaddingRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view__node--PaddingBottom | 0.5rem | ||
--pf-v5-c-tree-view__node--PaddingBottom --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view__node--PaddingLeft | calc(1rem * 2 + 1rem) | ||
--pf-v5-c-tree-view__node--PaddingLeft --pf-v5-c-tree-view__node--indent--base calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) calc(1rem * 2 + 1rem) | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view__node--Color | #151515 | ||
--pf-v5-c-tree-view__node--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view__node--m-current--Color | #06c | ||
--pf-v5-c-tree-view__node--m-current--Color --pf-v5-global--link--Color $pf-v5-global--link--Color $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view__node--m-current--FontWeight | 700 | ||
--pf-v5-c-tree-view__node--m-current--FontWeight --pf-v5-global--FontWeight--bold $pf-v5-global--FontWeight--bold 700 | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view__node--BackgroundColor | transparent | ||
.pf-v5-c-tree-view | --pf-v5-c-tree-view__node-container--Display | contents | ||
.pf-v5-c-tree-view | --pf-v5-c-tree-view__node-content--RowGap | 0.5rem | ||
--pf-v5-c-tree-view__node-content--RowGap --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view__node-content--Overflow | visible | ||
.pf-v5-c-tree-view | --pf-v5-c-tree-view__node--hover--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-tree-view__node--hover--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0 | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view__node--focus--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-tree-view__node--focus--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0 | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view__list-item__list-item__node-toggle--Top | 0.5rem | ||
--pf-v5-c-tree-view__list-item__list-item__node-toggle--Top --pf-v5-c-tree-view__node--PaddingTop--base --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view__list-item__list-item__node-toggle--Left | calc(1rem * 2 + 1rem) | ||
--pf-v5-c-tree-view__list-item__list-item__node-toggle--Left --pf-v5-c-tree-view__node--PaddingLeft --pf-v5-c-tree-view__node--indent--base calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) calc(1rem * 2 + 1rem) | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view__list-item__list-item__node-toggle--TranslateX | -100% | ||
.pf-v5-c-tree-view | --pf-v5-c-tree-view__node-toggle--Position | absolute | ||
.pf-v5-c-tree-view | --pf-v5-c-tree-view__node-toggle--Color--base | #6a6e73 | ||
--pf-v5-c-tree-view__node-toggle--Color--base --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view__node-toggle--Color | #6a6e73 | ||
--pf-v5-c-tree-view__node-toggle--Color --pf-v5-c-tree-view__node-toggle--Color--base --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view__node-toggle--hover--Color | #151515 | ||
--pf-v5-c-tree-view__node-toggle--hover--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view__node-toggle--focus--Color | #151515 | ||
--pf-v5-c-tree-view__node-toggle--focus--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view__node-toggle--active--Color | #151515 | ||
--pf-v5-c-tree-view__node-toggle--active--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view__node-toggle--BackgroundColor | transparent | ||
.pf-v5-c-tree-view | --pf-v5-c-tree-view__list-item--m-expanded__node-toggle--Color | #151515 | ||
--pf-v5-c-tree-view__list-item--m-expanded__node-toggle--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view__node-toggle-icon--MinWidth | 1rem | ||
--pf-v5-c-tree-view__node-toggle-icon--MinWidth --pf-v5-global--FontSize--md $pf-v5-global--FontSize--md pf-font-prem(16px) 1rem | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view__node-toggle-icon--Transition | transform 250ms cubic-bezier(.645, .045, .355, 1) | ||
--pf-v5-c-tree-view__node-toggle-icon--Transition transform --pf-v5-global--TransitionDuration --pf-v5-global--TimingFunction transform $pf-v5-global--TransitionDuration $pf-v5-global--TimingFunction transform 250ms cubic-bezier(.645, .045, .355, 1) | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view__node-toggle-button--PaddingTop | 0.375rem | ||
--pf-v5-c-tree-view__node-toggle-button--PaddingTop --pf-v5-global--spacer--form-element $pf-v5-global--spacer--form-element pf-size-prem(6px) 0.375rem | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view__node-toggle-button--PaddingRight | 1rem | ||
--pf-v5-c-tree-view__node-toggle-button--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view__node-toggle-button--PaddingBottom | 0.375rem | ||
--pf-v5-c-tree-view__node-toggle-button--PaddingBottom --pf-v5-global--spacer--form-element $pf-v5-global--spacer--form-element pf-size-prem(6px) 0.375rem | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view__node-toggle-button--PaddingLeft | 1rem | ||
--pf-v5-c-tree-view__node-toggle-button--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view__node-toggle-button--MarginTop | calc(0.375rem * -1) | ||
--pf-v5-c-tree-view__node-toggle-button--MarginTop calc(--pf-v5-global--spacer--form-element * -1) calc($pf-v5-global--spacer--form-element * -1) calc(pf-size-prem(6px) * -1) calc(0.375rem * -1) | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view__node-toggle-button--MarginBottom | calc(0.375rem * -1) | ||
--pf-v5-c-tree-view__node-toggle-button--MarginBottom calc(--pf-v5-global--spacer--form-element * -1) calc($pf-v5-global--spacer--form-element * -1) calc(pf-size-prem(6px) * -1) calc(0.375rem * -1) | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view__node-check--MarginRight | 0.5rem | ||
--pf-v5-c-tree-view__node-check--MarginRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view__node-count--MarginLeft | 0.5rem | ||
--pf-v5-c-tree-view__node-count--MarginLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view__node-count--c-badge--m-read--BackgroundColor | #d2d2d2 | ||
--pf-v5-c-tree-view__node-count--c-badge--m-read--BackgroundColor --pf-v5-global--disabled-color--200 $pf-v5-global--disabled-color--200 $pf-v5-color-black-300 #d2d2d2 | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view__search--PaddingTop | 0.5rem | ||
--pf-v5-c-tree-view__search--PaddingTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view__search--PaddingRight | 0.5rem | ||
--pf-v5-c-tree-view__search--PaddingRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view__search--PaddingBottom | 0.5rem | ||
--pf-v5-c-tree-view__search--PaddingBottom --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view__search--PaddingLeft | 0.5rem | ||
--pf-v5-c-tree-view__search--PaddingLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view__node-icon--PaddingRight | 0.5rem | ||
--pf-v5-c-tree-view__node-icon--PaddingRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view__node-icon--Color | #6a6e73 | ||
--pf-v5-c-tree-view__node-icon--Color --pf-v5-global--icon--Color--light $pf-v5-global--icon--Color--light $pf-v5-color-black-600 #6a6e73 | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view__node-toggle-icon--base--Rotate | 0 | ||
.pf-v5-c-tree-view | --pf-v5-c-tree-view__node-toggle-icon--Rotate | 0 | ||
--pf-v5-c-tree-view__node-toggle-icon--Rotate --pf-v5-c-tree-view__node-toggle-icon--base--Rotate 0 | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate | 90deg | ||
.pf-v5-c-tree-view | --pf-v5-c-tree-view__node-text--max-lines | 1 | ||
.pf-v5-c-tree-view | --pf-v5-c-tree-view__node-title--FontWeight | 700 | ||
--pf-v5-c-tree-view__node-title--FontWeight --pf-v5-global--FontWeight--bold $pf-v5-global--FontWeight--bold 700 | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view__action--MarginLeft | 1rem | ||
--pf-v5-c-tree-view__action--MarginLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-guides--guide--Left | calc(calc(1rem * 2 + 1rem) - 1.5rem) | ||
--pf-v5-c-tree-view--m-guides--guide--Left --pf-v5-c-tree-view--m-guides--guide-left--base calc(--pf-v5-c-tree-view__node--PaddingLeft - --pf-v5-c-tree-view--m-guides__list-node--guide-width--base) calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--lg) calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--lg) calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--lg) calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--lg) calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(24px)) calc(calc(1rem * 2 + 1rem) - 1.5rem) | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-guides--guide-color--base | #d2d2d2 | ||
--pf-v5-c-tree-view--m-guides--guide-color--base --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-guides--guide-width--base | 1px | ||
--pf-v5-c-tree-view--m-guides--guide-width--base --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-guides--guide-left--base | calc(calc(1rem * 2 + 1rem) - 1.5rem) | ||
--pf-v5-c-tree-view--m-guides--guide-left--base calc(--pf-v5-c-tree-view__node--PaddingLeft - --pf-v5-c-tree-view--m-guides__list-node--guide-width--base) calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--lg) calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--lg) calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--lg) calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--lg) calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(24px)) calc(calc(1rem * 2 + 1rem) - 1.5rem) | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-guides--guide-left--base--offset | calc(calc(1rem * 2 + 1rem) + 1rem / 2) | ||
--pf-v5-c-tree-view--m-guides--guide-left--base--offset calc(--pf-v5-c-tree-view__list-item__list-item__node-toggle--Left + --pf-v5-c-tree-view__node-toggle-icon--MinWidth / 2) calc(--pf-v5-c-tree-view__node--PaddingLeft + --pf-v5-global--FontSize--md / 2) calc(--pf-v5-c-tree-view__node--indent--base + $pf-v5-global--FontSize--md / 2) calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) + $pf-v5-global--FontSize--md / 2) calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) + $pf-v5-global--FontSize--md / 2) calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) + $pf-v5-global--FontSize--md / 2) calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) + pf-font-prem(16px) / 2) calc(calc(1rem * 2 + 1rem) + 1rem / 2) | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-guides__list-node--guide-width--base | 1.5rem | ||
--pf-v5-c-tree-view--m-guides__list-node--guide-width--base --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-guides__list-item--before--Top | 0 | ||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-guides__list-item--before--Width | 1px | ||
--pf-v5-c-tree-view--m-guides__list-item--before--Width --pf-v5-c-tree-view--m-guides--guide-width--base --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-guides__list-item--before--Height | 100% | ||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-guides__list-item--before--BackgroundColor | #d2d2d2 | ||
--pf-v5-c-tree-view--m-guides__list-item--before--BackgroundColor --pf-v5-c-tree-view--m-guides--guide-color--base --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-guides__list-item--last-child--before--Top | 1.125rem | ||
--pf-v5-c-tree-view--m-guides__list-item--last-child--before--Top --pf-v5-c-tree-view--m-guides__node--before--Top 1.125rem | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-guides__list-item--last-child--before--Height | 1.125rem | ||
--pf-v5-c-tree-view--m-guides__list-item--last-child--before--Height --pf-v5-c-tree-view--m-guides__list-item--last-child--before--Top --pf-v5-c-tree-view--m-guides__node--before--Top 1.125rem | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-guides__list-item--ZIndex | 100 | ||
--pf-v5-c-tree-view--m-guides__list-item--ZIndex --pf-v5-global--ZIndex--xs $pf-v5-global--ZIndex--xs 100 | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-guides__node--before--Width | 1rem | ||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-guides__node--before--Height | 1px | ||
--pf-v5-c-tree-view--m-guides__node--before--Height --pf-v5-c-tree-view--m-guides--guide-width--base --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-guides__node--before--Top | 1.125rem | ||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-guides__node--before--BackgroundColor | #d2d2d2 | ||
--pf-v5-c-tree-view--m-guides__node--before--BackgroundColor --pf-v5-c-tree-view--m-guides--guide-color--base --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-compact--base-border--Left--offset | 1rem | ||
--pf-v5-c-tree-view--m-compact--base-border--Left--offset --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-compact--base-border--Left | calc(calc(1rem * 2 + 1rem) - 1rem) | ||
--pf-v5-c-tree-view--m-compact--base-border--Left calc(--pf-v5-c-tree-view__node--PaddingLeft - --pf-v5-c-tree-view--m-compact--base-border--Left--offset) calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) calc(calc(1rem * 2 + 1rem) - 1rem) | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-compact__node--indent--base | calc(1rem * 2 + 1rem) | ||
--pf-v5-c-tree-view--m-compact__node--indent--base --pf-v5-c-tree-view__node--indent--base calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) calc(1rem * 2 + 1rem) | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-compact__node--nested-indent--base | 1.5rem | ||
--pf-v5-c-tree-view--m-compact__node--nested-indent--base --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-compact--border--Left | calc(calc(1rem * 2 + 1rem) - 1rem) | ||
--pf-v5-c-tree-view--m-compact--border--Left --pf-v5-c-tree-view--m-compact--base-border--Left calc(--pf-v5-c-tree-view__node--PaddingLeft - --pf-v5-c-tree-view--m-compact--base-border--Left--offset) calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) calc(calc(1rem * 2 + 1rem) - 1rem) | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-compact__node--PaddingTop | 0 | ||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-compact__node--PaddingBottom | 0 | ||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-compact__node--nested--PaddingTop | 0.5rem | ||
--pf-v5-c-tree-view--m-compact__node--nested--PaddingTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-compact__node--nested--PaddingBottom | 0.5rem | ||
--pf-v5-c-tree-view--m-compact__node--nested--PaddingBottom --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-compact__list-item__list-item__node-toggle--Top | calc(1.5rem) | ||
--pf-v5-c-tree-view--m-compact__list-item__list-item__node-toggle--Top calc(--pf-v5-c-tree-view--m-compact__node-container--PaddingTop) calc(--pf-v5-global--spacer--lg) calc($pf-v5-global--spacer--lg) calc(pf-size-prem(24px)) calc(1.5rem) | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-compact__list-item--BorderBottomWidth | 1px | ||
--pf-v5-c-tree-view--m-compact__list-item--BorderBottomWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-compact__list-item--BorderBottomColor | #d2d2d2 | ||
--pf-v5-c-tree-view--m-compact__list-item--BorderBottomColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-compact__list-item--before--Top | 0 | ||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-compact__list-item--last-child--before--Height | calc(1.5rem + 0.5rem + 0.25rem) | ||
--pf-v5-c-tree-view--m-compact__list-item--last-child--before--Height --pf-v5-c-tree-view--m-compact__node--before--Top calc(--pf-v5-c-tree-view--m-compact__node-container--PaddingTop + --pf-v5-c-tree-view--m-compact__node--nested--PaddingTop + 0.25rem) calc(--pf-v5-global--spacer--lg + --pf-v5-global--spacer--sm + 0.25rem) calc($pf-v5-global--spacer--lg + $pf-v5-global--spacer--sm + 0.25rem) calc(pf-size-prem(24px) + pf-size-prem(8px) + 0.25rem) calc(1.5rem + 0.5rem + 0.25rem) | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-compact__list-item--nested--before--Top | calc(0.5rem * -1) | ||
--pf-v5-c-tree-view--m-compact__list-item--nested--before--Top calc(--pf-v5-c-tree-view__node--PaddingTop--base * -1) calc(--pf-v5-global--spacer--sm * -1) calc($pf-v5-global--spacer--sm * -1) calc(pf-size-prem(8px) * -1) calc(0.5rem * -1) | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-compact__list-item--nested--last-child--before--Height | calc(calc(1.5rem + 0.5rem + 0.25rem) + 0.5rem) | ||
--pf-v5-c-tree-view--m-compact__list-item--nested--last-child--before--Height calc(--pf-v5-c-tree-view--m-compact__node--before--Top + --pf-v5-c-tree-view__node--PaddingTop--base) calc(calc(--pf-v5-c-tree-view--m-compact__node-container--PaddingTop + --pf-v5-c-tree-view--m-compact__node--nested--PaddingTop + 0.25rem) + --pf-v5-global--spacer--sm) calc(calc(--pf-v5-global--spacer--lg + --pf-v5-global--spacer--sm + 0.25rem) + $pf-v5-global--spacer--sm) calc(calc($pf-v5-global--spacer--lg + $pf-v5-global--spacer--sm + 0.25rem) + $pf-v5-global--spacer--sm) calc(calc(pf-size-prem(24px) + pf-size-prem(8px) + 0.25rem) + pf-size-prem(8px)) calc(calc(1.5rem + 0.5rem + 0.25rem) + 0.5rem) | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-compact__node--PaddingLeft | calc(1rem * 2 + 1rem) | ||
--pf-v5-c-tree-view--m-compact__node--PaddingLeft --pf-v5-c-tree-view--m-compact__node--indent--base --pf-v5-c-tree-view__node--indent--base calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) calc(1rem * 2 + 1rem) | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-compact__node--before--Top | calc(1.5rem + 0.5rem + 0.25rem) | ||
--pf-v5-c-tree-view--m-compact__node--before--Top calc(--pf-v5-c-tree-view--m-compact__node-container--PaddingTop + --pf-v5-c-tree-view--m-compact__node--nested--PaddingTop + 0.25rem) calc(--pf-v5-global--spacer--lg + --pf-v5-global--spacer--sm + 0.25rem) calc($pf-v5-global--spacer--lg + $pf-v5-global--spacer--sm + 0.25rem) calc(pf-size-prem(24px) + pf-size-prem(8px) + 0.25rem) calc(1.5rem + 0.5rem + 0.25rem) | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-compact__node--level-2--PaddingLeft | calc(1rem * 2 + 1rem) | ||
--pf-v5-c-tree-view--m-compact__node--level-2--PaddingLeft --pf-v5-c-tree-view--m-compact__node--indent--base --pf-v5-c-tree-view__node--indent--base calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) calc(1rem * 2 + 1rem) | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-compact__node-toggle--nested--MarginRight | calc(1rem * -.5) | ||
--pf-v5-c-tree-view--m-compact__node-toggle--nested--MarginRight calc(--pf-v5-c-tree-view__node-toggle-button--PaddingLeft * -.5) calc(--pf-v5-global--spacer--md * -.5) calc($pf-v5-global--spacer--md * -.5) calc(pf-size-prem(16px) * -.5) calc(1rem * -.5) | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-compact__node-toggle--nested--MarginLeft | calc(1rem * -1.5) | ||
--pf-v5-c-tree-view--m-compact__node-toggle--nested--MarginLeft calc(--pf-v5-c-tree-view__node-toggle-button--PaddingLeft * -1.5) calc(--pf-v5-global--spacer--md * -1.5) calc($pf-v5-global--spacer--md * -1.5) calc(pf-size-prem(16px) * -1.5) calc(1rem * -1.5) | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-compact__node-container--Display | flex | ||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-compact__node-container--PaddingBottom--base | 1.5rem | ||
--pf-v5-c-tree-view--m-compact__node-container--PaddingBottom--base --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-compact__node-container--PaddingTop | 1.5rem | ||
--pf-v5-c-tree-view--m-compact__node-container--PaddingTop --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-compact__node-container--PaddingRight | 1.5rem | ||
--pf-v5-c-tree-view--m-compact__node-container--PaddingRight --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-compact__node-container--PaddingBottom | 1.5rem | ||
--pf-v5-c-tree-view--m-compact__node-container--PaddingBottom --pf-v5-c-tree-view--m-compact__node-container--PaddingBottom--base --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-compact__node-container--PaddingLeft | 0.25rem | ||
--pf-v5-c-tree-view--m-compact__node-container--PaddingLeft --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-compact__node-container--nested--PaddingTop | 1rem | ||
--pf-v5-c-tree-view--m-compact__node-container--nested--PaddingTop --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-compact__node-container--nested--PaddingRight | 1.5rem | ||
--pf-v5-c-tree-view--m-compact__node-container--nested--PaddingRight --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-compact__node-container--nested--PaddingBottom | 1rem | ||
--pf-v5-c-tree-view--m-compact__node-container--nested--PaddingBottom --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-compact__node-container--nested--PaddingLeft | 1.5rem | ||
--pf-v5-c-tree-view--m-compact__node-container--nested--PaddingLeft --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-compact__node-container--nested--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-tree-view--m-compact__node-container--nested--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0 | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-compact__list-item--m-expanded__node-container--PaddingBottom | 0 | ||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-no-background__node-container--BackgroundColor | transparent | ||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-compact--m-no-background--base-border--Left--offset | 0.5rem | ||
--pf-v5-c-tree-view--m-compact--m-no-background--base-border--Left--offset --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-compact--m-no-background--base-border--Left | calc(calc(1rem * 2 + 1rem) - 0.5rem) | ||
--pf-v5-c-tree-view--m-compact--m-no-background--base-border--Left calc(--pf-v5-c-tree-view__node--PaddingLeft - --pf-v5-c-tree-view--m-compact--m-no-background--base-border--Left--offset) calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--sm) calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--sm) calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--sm) calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--sm) calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(8px)) calc(calc(1rem * 2 + 1rem) - 0.5rem) | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-compact--m-no-background__node--indent--base | calc(1rem * 2 + 1rem) | ||
--pf-v5-c-tree-view--m-compact--m-no-background__node--indent--base --pf-v5-c-tree-view__node--indent--base calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) calc(1rem * 2 + 1rem) | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-compact--m-no-background__node--nested-indent--base | 3rem | ||
--pf-v5-c-tree-view--m-compact--m-no-background__node--nested-indent--base --pf-v5-global--spacer--2xl $pf-v5-global--spacer--2xl pf-size-prem(48px) 3rem | ||||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-compact--m-no-background__node--nested--PaddingTop | 0 | ||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-compact--m-no-background__node--nested--PaddingBottom | 0 | ||
.pf-v5-c-tree-view | --pf-v5-c-tree-view--m-compact--m-no-background__node--before--Top | calc(1rem + 0.5rem + 0.25rem) | ||
--pf-v5-c-tree-view--m-compact--m-no-background__node--before--Top calc(--pf-v5-c-tree-view--m-compact__node-container--nested--PaddingTop + --pf-v5-c-tree-view--m-compact__node--nested--PaddingTop + 0.25rem) calc(--pf-v5-global--spacer--md + --pf-v5-global--spacer--sm + 0.25rem) calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + 0.25rem) calc(pf-size-prem(16px) + pf-size-prem(8px) + 0.25rem) calc(1rem + 0.5rem + 0.25rem) | ||||
.pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-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-v5-c-tree-view--m-guides--guide--Left --pf-v5-c-tree-view--m-guides--border--nested--Left calc(--pf-v5-c-tree-view__node--PaddingLeft - --pf-v5-c-tree-view--m-guides--guide-left--base--offset) calc(--pf-v5-c-tree-view--m-compact__node--PaddingLeft - calc(--pf-v5-c-tree-view__list-item__list-item__node-toggle--Left + --pf-v5-c-tree-view__node-toggle-icon--MinWidth / 2)) calc(calc(--pf-v5-c-tree-view--m-compact__node--nested-indent--base * 1 + --pf-v5-c-tree-view--m-compact__node--indent--base) - calc(--pf-v5-c-tree-view__node--PaddingLeft + --pf-v5-global--FontSize--md / 2)) calc(calc(--pf-v5-global--spacer--lg * 1 + --pf-v5-c-tree-view__node--indent--base) - calc(--pf-v5-c-tree-view--m-compact__node--PaddingLeft + $pf-v5-global--FontSize--md / 2)) calc(calc($pf-v5-global--spacer--lg * 1 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) - calc(calc(--pf-v5-c-tree-view--m-compact__node--nested-indent--base * 1 + --pf-v5-c-tree-view--m-compact__node--indent--base) + $pf-v5-global--FontSize--md / 2)) calc(calc($pf-v5-global--spacer--lg * 1 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) - calc(calc(--pf-v5-global--spacer--lg * 1 + --pf-v5-c-tree-view__node--indent--base) + $pf-v5-global--FontSize--md / 2)) calc(calc($pf-v5-global--spacer--lg * 1 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - calc(calc($pf-v5-global--spacer--lg * 1 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) + $pf-v5-global--FontSize--md / 2)) calc(calc($pf-v5-global--spacer--lg * 1 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - calc(calc($pf-v5-global--spacer--lg * 1 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) + $pf-v5-global--FontSize--md / 2)) calc(calc($pf-v5-global--spacer--lg * 1 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - calc(calc($pf-v5-global--spacer--lg * 1 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) + $pf-v5-global--FontSize--md / 2)) calc(calc(pf-size-prem(24px) * 1 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) - calc(calc(pf-size-prem(24px) * 1 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) + pf-font-prem(16px) / 2)) calc(calc(1.5rem * 1 + calc(1rem * 2 + 1rem)) - calc(calc(1.5rem * 1 + calc(1rem * 2 + 1rem)) + 1rem / 2)) | ||||
.pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view__node--PaddingLeft | calc(1.5rem * 1 + calc(1rem * 2 + 1rem)) | ||
--pf-v5-c-tree-view__node--PaddingLeft --pf-v5-c-tree-view--m-compact__node--PaddingLeft calc(--pf-v5-c-tree-view--m-compact__node--nested-indent--base * 1 + --pf-v5-c-tree-view--m-compact__node--indent--base) calc(--pf-v5-global--spacer--lg * 1 + --pf-v5-c-tree-view__node--indent--base) calc($pf-v5-global--spacer--lg * 1 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) calc($pf-v5-global--spacer--lg * 1 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) calc($pf-v5-global--spacer--lg * 1 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(pf-size-prem(24px) * 1 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) calc(1.5rem * 1 + calc(1rem * 2 + 1rem)) | ||||
.pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view--m-compact--border--Left | calc(calc(1.5rem * 1 + calc(1rem * 2 + 1rem)) - 1rem) | ||
--pf-v5-c-tree-view--m-compact--border--Left --pf-v5-c-tree-view--m-compact--border--nested--Left calc(--pf-v5-c-tree-view__node--PaddingLeft - --pf-v5-c-tree-view--m-compact--base-border--Left--offset) calc(--pf-v5-c-tree-view--m-compact__node--PaddingLeft - --pf-v5-global--spacer--md) calc(calc(--pf-v5-c-tree-view--m-compact__node--nested-indent--base * 1 + --pf-v5-c-tree-view--m-compact__node--indent--base) - $pf-v5-global--spacer--md) calc(calc(--pf-v5-global--spacer--lg * 1 + --pf-v5-c-tree-view__node--indent--base) - $pf-v5-global--spacer--md) calc(calc($pf-v5-global--spacer--lg * 1 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) - $pf-v5-global--spacer--md) calc(calc($pf-v5-global--spacer--lg * 1 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--md) calc(calc($pf-v5-global--spacer--lg * 1 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--md) calc(calc(pf-size-prem(24px) * 1 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) - pf-size-prem(16px)) calc(calc(1.5rem * 1 + calc(1rem * 2 + 1rem)) - 1rem) | ||||
.pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view--m-compact__list-item--before--Top | calc(0.5rem * -1) | ||
--pf-v5-c-tree-view--m-compact__list-item--before--Top --pf-v5-c-tree-view--m-compact__list-item--nested--before--Top calc(--pf-v5-c-tree-view__node--PaddingTop--base * -1) calc(--pf-v5-global--spacer--sm * -1) calc($pf-v5-global--spacer--sm * -1) calc(pf-size-prem(8px) * -1) calc(0.5rem * -1) | ||||
.pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view--m-compact__list-item--last-child--before--Height | calc(calc(1.5rem + 0.5rem + 0.25rem) + 0.5rem) | ||
--pf-v5-c-tree-view--m-compact__list-item--last-child--before--Height --pf-v5-c-tree-view--m-compact__list-item--nested--last-child--before--Height calc(--pf-v5-c-tree-view--m-compact__node--before--Top + --pf-v5-c-tree-view__node--PaddingTop--base) calc(calc(--pf-v5-c-tree-view--m-compact__node-container--PaddingTop + --pf-v5-c-tree-view--m-compact__node--nested--PaddingTop + 0.25rem) + --pf-v5-global--spacer--sm) calc(calc(--pf-v5-global--spacer--lg + --pf-v5-global--spacer--sm + 0.25rem) + $pf-v5-global--spacer--sm) calc(calc($pf-v5-global--spacer--lg + $pf-v5-global--spacer--sm + 0.25rem) + $pf-v5-global--spacer--sm) calc(calc(pf-size-prem(24px) + pf-size-prem(8px) + 0.25rem) + pf-size-prem(8px)) calc(calc(1.5rem + 0.5rem + 0.25rem) + 0.5rem) | ||||
.pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item:last-child | --pf-v5-c-tree-view--m-compact__list-item--BorderBottomWidth | 0 | ||
.pf-v5-c-tree-view.pf-m-compact | --pf-v5-c-tree-view__node--PaddingTop | 0 | ||
--pf-v5-c-tree-view__node--PaddingTop --pf-v5-c-tree-view--m-compact__node--PaddingTop 0 | ||||
.pf-v5-c-tree-view.pf-m-compact | --pf-v5-c-tree-view__node--PaddingBottom | 0 | ||
--pf-v5-c-tree-view__node--PaddingBottom --pf-v5-c-tree-view--m-compact__node--PaddingBottom 0 | ||||
.pf-v5-c-tree-view.pf-m-compact | --pf-v5-c-tree-view__node-container--Display | flex | ||
--pf-v5-c-tree-view__node-container--Display --pf-v5-c-tree-view--m-compact__node-container--Display flex | ||||
.pf-v5-c-tree-view.pf-m-compact | --pf-v5-c-tree-view__node--hover--BackgroundColor | transparent | ||
.pf-v5-c-tree-view.pf-m-compact | --pf-v5-c-tree-view__node--focus--BackgroundColor | transparent | ||
.pf-v5-c-tree-view.pf-m-compact | --pf-v5-c-tree-view__list-item__list-item__node-toggle--Top | calc(1.5rem) | ||
--pf-v5-c-tree-view__list-item__list-item__node-toggle--Top --pf-v5-c-tree-view--m-compact__list-item__list-item__node-toggle--Top calc(--pf-v5-c-tree-view--m-compact__node-container--PaddingTop) calc(--pf-v5-global--spacer--lg) calc($pf-v5-global--spacer--lg) calc(pf-size-prem(24px)) calc(1.5rem) | ||||
.pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item.pf-m-expanded | --pf-v5-c-tree-view--m-compact__node-container--PaddingBottom | 0 | ||
--pf-v5-c-tree-view--m-compact__node-container--PaddingBottom --pf-v5-c-tree-view--m-compact__list-item--m-expanded__node-container--PaddingBottom 0 | ||||
.pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view__node--PaddingTop | 0.5rem | ||
--pf-v5-c-tree-view__node--PaddingTop --pf-v5-c-tree-view--m-compact__node--nested--PaddingTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
.pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view__node--PaddingBottom | 0.5rem | ||
--pf-v5-c-tree-view__node--PaddingBottom --pf-v5-c-tree-view--m-compact__node--nested--PaddingBottom --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
.pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view__node-toggle--Position | static | ||
.pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view__node--PaddingLeft | calc(1rem * 2 + 1rem) | ||
--pf-v5-c-tree-view__node--PaddingLeft --pf-v5-c-tree-view--m-compact__node--level-2--PaddingLeft --pf-v5-c-tree-view--m-compact__node--indent--base --pf-v5-c-tree-view__node--indent--base calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) calc(1rem * 2 + 1rem) | ||||
.pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view__list-item__list-item__node-toggle--TranslateX | 0 | ||
.pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view--m-compact__list-item--BorderBottomWidth | 0 | ||
.pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view--m-compact__node-container--PaddingBottom | 1.5rem | ||
--pf-v5-c-tree-view--m-compact__node-container--PaddingBottom --pf-v5-c-tree-view--m-compact__node-container--PaddingBottom--base --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
.pf-v5-c-tree-view.pf-m-compact.pf-m-no-background | --pf-v5-c-tree-view--m-compact__node--before--Top | calc(1rem + 0.5rem + 0.25rem) | ||
--pf-v5-c-tree-view--m-compact__node--before--Top --pf-v5-c-tree-view--m-compact--m-no-background__node--before--Top calc(--pf-v5-c-tree-view--m-compact__node-container--nested--PaddingTop + --pf-v5-c-tree-view--m-compact__node--nested--PaddingTop + 0.25rem) calc(--pf-v5-global--spacer--md + --pf-v5-global--spacer--sm + 0.25rem) calc($pf-v5-global--spacer--md + $pf-v5-global--spacer--sm + 0.25rem) calc(pf-size-prem(16px) + pf-size-prem(8px) + 0.25rem) calc(1rem + 0.5rem + 0.25rem) | ||||
.pf-v5-c-tree-view.pf-m-compact.pf-m-no-background .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view__node--PaddingTop | 0 | ||
--pf-v5-c-tree-view__node--PaddingTop --pf-v5-c-tree-view--m-compact--m-no-background__node--nested--PaddingTop 0 | ||||
.pf-v5-c-tree-view.pf-m-compact.pf-m-no-background .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view__node--PaddingBottom | 0 | ||
--pf-v5-c-tree-view__node--PaddingBottom --pf-v5-c-tree-view--m-compact--m-no-background__node--nested--PaddingBottom 0 | ||||
.pf-v5-c-tree-view.pf-m-compact.pf-m-no-background .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view--m-compact--border--Left | calc(calc(3rem * 1 + calc(1rem * 2 + 1rem)) - 0.5rem) | ||
--pf-v5-c-tree-view--m-compact--border--Left --pf-v5-c-tree-view--m-compact--m-no-background--border--nested--Left calc(--pf-v5-c-tree-view__node--PaddingLeft - --pf-v5-c-tree-view--m-compact--m-no-background--base-border--Left--offset) calc(--pf-v5-c-tree-view--m-compact--m-no-background__node--PaddingLeft - --pf-v5-global--spacer--sm) calc(calc(--pf-v5-c-tree-view--m-compact--m-no-background__node--nested-indent--base * 1 + --pf-v5-c-tree-view--m-compact--m-no-background__node--indent--base) - $pf-v5-global--spacer--sm) calc(calc(--pf-v5-global--spacer--2xl * 1 + --pf-v5-c-tree-view__node--indent--base) - $pf-v5-global--spacer--sm) calc(calc($pf-v5-global--spacer--2xl * 1 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) - $pf-v5-global--spacer--sm) calc(calc($pf-v5-global--spacer--2xl * 1 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--sm) calc(calc($pf-v5-global--spacer--2xl * 1 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--sm) calc(calc(pf-size-prem(48px) * 1 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) - pf-size-prem(8px)) calc(calc(3rem * 1 + calc(1rem * 2 + 1rem)) - 0.5rem) | ||||
.pf-v5-c-tree-view.pf-m-compact.pf-m-no-background .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view__node--PaddingLeft | calc(3rem * 1 + calc(1rem * 2 + 1rem)) | ||
--pf-v5-c-tree-view__node--PaddingLeft --pf-v5-c-tree-view--m-compact--m-no-background__node--PaddingLeft calc(--pf-v5-c-tree-view--m-compact--m-no-background__node--nested-indent--base * 1 + --pf-v5-c-tree-view--m-compact--m-no-background__node--indent--base) calc(--pf-v5-global--spacer--2xl * 1 + --pf-v5-c-tree-view__node--indent--base) calc($pf-v5-global--spacer--2xl * 1 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) calc($pf-v5-global--spacer--2xl * 1 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) calc($pf-v5-global--spacer--2xl * 1 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(pf-size-prem(48px) * 1 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) calc(3rem * 1 + calc(1rem * 2 + 1rem)) | ||||
.pf-v5-c-tree-view.pf-m-no-background | --pf-v5-c-tree-view--m-compact__node-container--nested--BackgroundColor | transparent | ||
--pf-v5-c-tree-view--m-compact__node-container--nested--BackgroundColor --pf-v5-c-tree-view--m-no-background__node-container--BackgroundColor transparent | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view__node-toggle-icon--Rotate | 0 | ||
--pf-v5-c-tree-view__node-toggle-icon--Rotate --pf-v5-c-tree-view__node-toggle-icon--base--Rotate 0 | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view__node-toggle--Color | #6a6e73 | ||
--pf-v5-c-tree-view__node-toggle--Color --pf-v5-c-tree-view__node-toggle--Color--base --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view__list-item__list-item__node-toggle--Left | calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 1 + calc(1rem * 2 + 1rem)) | ||
--pf-v5-c-tree-view__list-item__list-item__node-toggle--Left --pf-v5-c-tree-view__node--PaddingLeft calc(--pf-v5-c-tree-view__node--nested-indent--base * 1 + --pf-v5-c-tree-view__node--indent--base) calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 1 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 1 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 1 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 1 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 1 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 1 + calc(1rem * 2 + 1rem)) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view__node--PaddingLeft | calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 1 + calc(1rem * 2 + 1rem)) | ||
--pf-v5-c-tree-view__node--PaddingLeft calc(--pf-v5-c-tree-view__node--nested-indent--base * 1 + --pf-v5-c-tree-view__node--indent--base) calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 1 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 1 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 1 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 1 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 1 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 1 + calc(1rem * 2 + 1rem)) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-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-v5-c-tree-view--m-guides--border--nested--Left calc(--pf-v5-c-tree-view__node--PaddingLeft - --pf-v5-c-tree-view--m-guides--guide-left--base--offset) calc(calc(--pf-v5-c-tree-view__node--nested-indent--base * 1 + --pf-v5-c-tree-view__node--indent--base) - calc(--pf-v5-c-tree-view__list-item__list-item__node-toggle--Left + --pf-v5-c-tree-view__node-toggle-icon--MinWidth / 2)) calc(calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 1 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) - calc(--pf-v5-c-tree-view__node--PaddingLeft + --pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 1 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) - calc(calc(--pf-v5-c-tree-view__node--nested-indent--base * 1 + --pf-v5-c-tree-view__node--indent--base) + $pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 1 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - calc(calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 1 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) + $pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 1 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - calc(calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 1 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) + $pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 1 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 1 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) + $pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 1 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 1 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) + $pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 1 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) - calc(calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 1 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) + pf-font-prem(16px) / 2)) 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-v5-c-tree-view__list-item.pf-m-expanded | --pf-v5-c-tree-view__node-toggle--Color | #151515 | ||
--pf-v5-c-tree-view__node-toggle--Color --pf-v5-c-tree-view__list-item--m-expanded__node-toggle--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
.pf-v5-c-tree-view__list-item.pf-m-expanded | --pf-v5-c-tree-view__node-toggle-icon--Rotate | 90deg | ||
--pf-v5-c-tree-view__node-toggle-icon--Rotate --pf-v5-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate 90deg | ||||
.pf-v5-c-tree-view__node.pf-m-current | --pf-v5-c-tree-view__node--Color | #06c | ||
--pf-v5-c-tree-view__node--Color --pf-v5-c-tree-view__node--m-current--Color --pf-v5-global--link--Color $pf-v5-global--link--Color $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
.pf-v5-c-tree-view__node:focus | --pf-v5-c-tree-view__node--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-tree-view__node--BackgroundColor --pf-v5-c-tree-view__node--focus--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0 | ||||
.pf-v5-c-tree-view__node .pf-v5-c-tree-view__node-count .pf-v5-c-badge.pf-m-read | --pf-v5-c-badge--m-read--BackgroundColor | #d2d2d2 | ||
--pf-v5-c-badge--m-read--BackgroundColor --pf-v5-c-tree-view__node-count--c-badge--m-read--BackgroundColor --pf-v5-global--disabled-color--200 $pf-v5-global--disabled-color--200 $pf-v5-color-black-300 #d2d2d2 | ||||
.pf-v5-c-tree-view__node:not(.pf-m-selectable):hover | --pf-v5-c-tree-view__node-toggle--Color | #151515 | ||
--pf-v5-c-tree-view__node-toggle--Color --pf-v5-c-tree-view__node-toggle--hover--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
.pf-v5-c-tree-view__node:not(.pf-m-selectable):focus | --pf-v5-c-tree-view__node-toggle--Color | #151515 | ||
--pf-v5-c-tree-view__node-toggle--Color --pf-v5-c-tree-view__node-toggle--focus--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
.pf-v5-c-tree-view__node:not(.pf-m-selectable):active | --pf-v5-c-tree-view__node-toggle--Color | #151515 | ||
--pf-v5-c-tree-view__node-toggle--Color --pf-v5-c-tree-view__node-toggle--active--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
.pf-v5-c-tree-view__node-title.pf-m-truncate | --pf-v5-c-tree-view__node-content--Overflow | hidden | ||
.pf-v5-c-tree-view.pf-m-truncate .pf-v5-c-tree-view__node-title | --pf-v5-c-tree-view__node-content--Overflow | hidden | ||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view__list-item__list-item__node-toggle--Left | calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 2 + calc(1rem * 2 + 1rem)) | ||
--pf-v5-c-tree-view__list-item__list-item__node-toggle--Left --pf-v5-c-tree-view__node--PaddingLeft calc(--pf-v5-c-tree-view__node--nested-indent--base * 2 + --pf-v5-c-tree-view__node--indent--base) calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 2 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 2 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 2 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 2 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 2 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 2 + calc(1rem * 2 + 1rem)) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view__node--PaddingLeft | calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 2 + calc(1rem * 2 + 1rem)) | ||
--pf-v5-c-tree-view__node--PaddingLeft calc(--pf-v5-c-tree-view__node--nested-indent--base * 2 + --pf-v5-c-tree-view__node--indent--base) calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 2 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 2 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 2 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 2 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 2 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 2 + calc(1rem * 2 + 1rem)) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-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-v5-c-tree-view--m-guides--border--nested--Left calc(--pf-v5-c-tree-view__node--PaddingLeft - --pf-v5-c-tree-view--m-guides--guide-left--base--offset) calc(calc(--pf-v5-c-tree-view__node--nested-indent--base * 2 + --pf-v5-c-tree-view__node--indent--base) - calc(--pf-v5-c-tree-view__list-item__list-item__node-toggle--Left + --pf-v5-c-tree-view__node-toggle-icon--MinWidth / 2)) calc(calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 2 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) - calc(--pf-v5-c-tree-view__node--PaddingLeft + --pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 2 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) - calc(calc(--pf-v5-c-tree-view__node--nested-indent--base * 2 + --pf-v5-c-tree-view__node--indent--base) + $pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 2 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - calc(calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 2 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) + $pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 2 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - calc(calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 2 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) + $pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 2 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 2 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) + $pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 2 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 2 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) + $pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 2 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) - calc(calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 2 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) + pf-font-prem(16px) / 2)) 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-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view--m-compact__node--PaddingLeft | calc(1.5rem * 1 + calc(1rem * 2 + 1rem)) | ||
--pf-v5-c-tree-view--m-compact__node--PaddingLeft calc(--pf-v5-c-tree-view--m-compact__node--nested-indent--base * 1 + --pf-v5-c-tree-view--m-compact__node--indent--base) calc(--pf-v5-global--spacer--lg * 1 + --pf-v5-c-tree-view__node--indent--base) calc($pf-v5-global--spacer--lg * 1 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) calc($pf-v5-global--spacer--lg * 1 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) calc($pf-v5-global--spacer--lg * 1 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(pf-size-prem(24px) * 1 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) calc(1.5rem * 1 + calc(1rem * 2 + 1rem)) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view--m-compact--border--nested--Left | calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 2 + calc(1rem * 2 + 1rem)) - 1rem) | ||
--pf-v5-c-tree-view--m-compact--border--nested--Left calc(--pf-v5-c-tree-view__node--PaddingLeft - --pf-v5-c-tree-view--m-compact--base-border--Left--offset) calc(calc(--pf-v5-c-tree-view__node--nested-indent--base * 2 + --pf-v5-c-tree-view__node--indent--base) - --pf-v5-global--spacer--md) calc(calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 2 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) - $pf-v5-global--spacer--md) calc(calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 2 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--md) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 2 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--md) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 2 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--md) calc(calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 2 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) - pf-size-prem(16px)) calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 2 + calc(1rem * 2 + 1rem)) - 1rem) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view--m-compact--m-no-background__node--PaddingLeft | calc(3rem * 1 + calc(1rem * 2 + 1rem)) | ||
--pf-v5-c-tree-view--m-compact--m-no-background__node--PaddingLeft calc(--pf-v5-c-tree-view--m-compact--m-no-background__node--nested-indent--base * 1 + --pf-v5-c-tree-view--m-compact--m-no-background__node--indent--base) calc(--pf-v5-global--spacer--2xl * 1 + --pf-v5-c-tree-view__node--indent--base) calc($pf-v5-global--spacer--2xl * 1 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) calc($pf-v5-global--spacer--2xl * 1 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) calc($pf-v5-global--spacer--2xl * 1 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(pf-size-prem(48px) * 1 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) calc(3rem * 1 + calc(1rem * 2 + 1rem)) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-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-v5-c-tree-view--m-compact--m-no-background--border--nested--Left calc(--pf-v5-c-tree-view__node--PaddingLeft - --pf-v5-c-tree-view--m-compact--m-no-background--base-border--Left--offset) calc(calc(--pf-v5-c-tree-view__node--nested-indent--base * 2 + --pf-v5-c-tree-view__node--indent--base) - --pf-v5-global--spacer--sm) calc(calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 2 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) - $pf-v5-global--spacer--sm) calc(calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 2 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--sm) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 2 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--sm) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 2 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--sm) calc(calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 2 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) - pf-size-prem(8px)) calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 2 + calc(1rem * 2 + 1rem)) - 0.5rem) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view__list-item__list-item__node-toggle--Left | calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 3 + calc(1rem * 2 + 1rem)) | ||
--pf-v5-c-tree-view__list-item__list-item__node-toggle--Left --pf-v5-c-tree-view__node--PaddingLeft calc(--pf-v5-c-tree-view__node--nested-indent--base * 3 + --pf-v5-c-tree-view__node--indent--base) calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 3 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 3 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 3 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 3 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 3 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 3 + calc(1rem * 2 + 1rem)) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view__node--PaddingLeft | calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 3 + calc(1rem * 2 + 1rem)) | ||
--pf-v5-c-tree-view__node--PaddingLeft calc(--pf-v5-c-tree-view__node--nested-indent--base * 3 + --pf-v5-c-tree-view__node--indent--base) calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 3 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 3 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 3 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 3 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 3 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 3 + calc(1rem * 2 + 1rem)) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-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-v5-c-tree-view--m-guides--border--nested--Left calc(--pf-v5-c-tree-view__node--PaddingLeft - --pf-v5-c-tree-view--m-guides--guide-left--base--offset) calc(calc(--pf-v5-c-tree-view__node--nested-indent--base * 3 + --pf-v5-c-tree-view__node--indent--base) - calc(--pf-v5-c-tree-view__list-item__list-item__node-toggle--Left + --pf-v5-c-tree-view__node-toggle-icon--MinWidth / 2)) calc(calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 3 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) - calc(--pf-v5-c-tree-view__node--PaddingLeft + --pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 3 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) - calc(calc(--pf-v5-c-tree-view__node--nested-indent--base * 3 + --pf-v5-c-tree-view__node--indent--base) + $pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 3 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - calc(calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 3 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) + $pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 3 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - calc(calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 3 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) + $pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 3 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 3 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) + $pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 3 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 3 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) + $pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 3 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) - calc(calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 3 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) + pf-font-prem(16px) / 2)) 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-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view--m-compact__node--PaddingLeft | calc(1.5rem * 2 + calc(1rem * 2 + 1rem)) | ||
--pf-v5-c-tree-view--m-compact__node--PaddingLeft calc(--pf-v5-c-tree-view--m-compact__node--nested-indent--base * 2 + --pf-v5-c-tree-view--m-compact__node--indent--base) calc(--pf-v5-global--spacer--lg * 2 + --pf-v5-c-tree-view__node--indent--base) calc($pf-v5-global--spacer--lg * 2 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) calc($pf-v5-global--spacer--lg * 2 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) calc($pf-v5-global--spacer--lg * 2 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(pf-size-prem(24px) * 2 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) calc(1.5rem * 2 + calc(1rem * 2 + 1rem)) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view--m-compact--border--nested--Left | calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 3 + calc(1rem * 2 + 1rem)) - 1rem) | ||
--pf-v5-c-tree-view--m-compact--border--nested--Left calc(--pf-v5-c-tree-view__node--PaddingLeft - --pf-v5-c-tree-view--m-compact--base-border--Left--offset) calc(calc(--pf-v5-c-tree-view__node--nested-indent--base * 3 + --pf-v5-c-tree-view__node--indent--base) - --pf-v5-global--spacer--md) calc(calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 3 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) - $pf-v5-global--spacer--md) calc(calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 3 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--md) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 3 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--md) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 3 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--md) calc(calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 3 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) - pf-size-prem(16px)) calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 3 + calc(1rem * 2 + 1rem)) - 1rem) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view--m-compact--m-no-background__node--PaddingLeft | calc(3rem * 2 + calc(1rem * 2 + 1rem)) | ||
--pf-v5-c-tree-view--m-compact--m-no-background__node--PaddingLeft calc(--pf-v5-c-tree-view--m-compact--m-no-background__node--nested-indent--base * 2 + --pf-v5-c-tree-view--m-compact--m-no-background__node--indent--base) calc(--pf-v5-global--spacer--2xl * 2 + --pf-v5-c-tree-view__node--indent--base) calc($pf-v5-global--spacer--2xl * 2 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) calc($pf-v5-global--spacer--2xl * 2 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) calc($pf-v5-global--spacer--2xl * 2 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(pf-size-prem(48px) * 2 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) calc(3rem * 2 + calc(1rem * 2 + 1rem)) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-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-v5-c-tree-view--m-compact--m-no-background--border--nested--Left calc(--pf-v5-c-tree-view__node--PaddingLeft - --pf-v5-c-tree-view--m-compact--m-no-background--base-border--Left--offset) calc(calc(--pf-v5-c-tree-view__node--nested-indent--base * 3 + --pf-v5-c-tree-view__node--indent--base) - --pf-v5-global--spacer--sm) calc(calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 3 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) - $pf-v5-global--spacer--sm) calc(calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 3 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--sm) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 3 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--sm) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 3 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--sm) calc(calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 3 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) - pf-size-prem(8px)) calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 3 + calc(1rem * 2 + 1rem)) - 0.5rem) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view__list-item__list-item__node-toggle--Left | calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 4 + calc(1rem * 2 + 1rem)) | ||
--pf-v5-c-tree-view__list-item__list-item__node-toggle--Left --pf-v5-c-tree-view__node--PaddingLeft calc(--pf-v5-c-tree-view__node--nested-indent--base * 4 + --pf-v5-c-tree-view__node--indent--base) calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 4 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 4 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 4 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 4 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 4 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 4 + calc(1rem * 2 + 1rem)) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view__node--PaddingLeft | calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 4 + calc(1rem * 2 + 1rem)) | ||
--pf-v5-c-tree-view__node--PaddingLeft calc(--pf-v5-c-tree-view__node--nested-indent--base * 4 + --pf-v5-c-tree-view__node--indent--base) calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 4 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 4 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 4 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 4 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 4 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 4 + calc(1rem * 2 + 1rem)) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-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-v5-c-tree-view--m-guides--border--nested--Left calc(--pf-v5-c-tree-view__node--PaddingLeft - --pf-v5-c-tree-view--m-guides--guide-left--base--offset) calc(calc(--pf-v5-c-tree-view__node--nested-indent--base * 4 + --pf-v5-c-tree-view__node--indent--base) - calc(--pf-v5-c-tree-view__list-item__list-item__node-toggle--Left + --pf-v5-c-tree-view__node-toggle-icon--MinWidth / 2)) calc(calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 4 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) - calc(--pf-v5-c-tree-view__node--PaddingLeft + --pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 4 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) - calc(calc(--pf-v5-c-tree-view__node--nested-indent--base * 4 + --pf-v5-c-tree-view__node--indent--base) + $pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 4 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - calc(calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 4 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) + $pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 4 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - calc(calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 4 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) + $pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 4 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 4 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) + $pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 4 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 4 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) + $pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 4 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) - calc(calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 4 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) + pf-font-prem(16px) / 2)) 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-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view--m-compact__node--PaddingLeft | calc(1.5rem * 3 + calc(1rem * 2 + 1rem)) | ||
--pf-v5-c-tree-view--m-compact__node--PaddingLeft calc(--pf-v5-c-tree-view--m-compact__node--nested-indent--base * 3 + --pf-v5-c-tree-view--m-compact__node--indent--base) calc(--pf-v5-global--spacer--lg * 3 + --pf-v5-c-tree-view__node--indent--base) calc($pf-v5-global--spacer--lg * 3 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) calc($pf-v5-global--spacer--lg * 3 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) calc($pf-v5-global--spacer--lg * 3 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(pf-size-prem(24px) * 3 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) calc(1.5rem * 3 + calc(1rem * 2 + 1rem)) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view--m-compact--border--nested--Left | calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 4 + calc(1rem * 2 + 1rem)) - 1rem) | ||
--pf-v5-c-tree-view--m-compact--border--nested--Left calc(--pf-v5-c-tree-view__node--PaddingLeft - --pf-v5-c-tree-view--m-compact--base-border--Left--offset) calc(calc(--pf-v5-c-tree-view__node--nested-indent--base * 4 + --pf-v5-c-tree-view__node--indent--base) - --pf-v5-global--spacer--md) calc(calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 4 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) - $pf-v5-global--spacer--md) calc(calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 4 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--md) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 4 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--md) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 4 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--md) calc(calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 4 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) - pf-size-prem(16px)) calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 4 + calc(1rem * 2 + 1rem)) - 1rem) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view--m-compact--m-no-background__node--PaddingLeft | calc(3rem * 3 + calc(1rem * 2 + 1rem)) | ||
--pf-v5-c-tree-view--m-compact--m-no-background__node--PaddingLeft calc(--pf-v5-c-tree-view--m-compact--m-no-background__node--nested-indent--base * 3 + --pf-v5-c-tree-view--m-compact--m-no-background__node--indent--base) calc(--pf-v5-global--spacer--2xl * 3 + --pf-v5-c-tree-view__node--indent--base) calc($pf-v5-global--spacer--2xl * 3 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) calc($pf-v5-global--spacer--2xl * 3 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) calc($pf-v5-global--spacer--2xl * 3 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(pf-size-prem(48px) * 3 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) calc(3rem * 3 + calc(1rem * 2 + 1rem)) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-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-v5-c-tree-view--m-compact--m-no-background--border--nested--Left calc(--pf-v5-c-tree-view__node--PaddingLeft - --pf-v5-c-tree-view--m-compact--m-no-background--base-border--Left--offset) calc(calc(--pf-v5-c-tree-view__node--nested-indent--base * 4 + --pf-v5-c-tree-view__node--indent--base) - --pf-v5-global--spacer--sm) calc(calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 4 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) - $pf-v5-global--spacer--sm) calc(calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 4 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--sm) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 4 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--sm) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 4 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--sm) calc(calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 4 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) - pf-size-prem(8px)) calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 4 + calc(1rem * 2 + 1rem)) - 0.5rem) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view__list-item__list-item__node-toggle--Left | calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 5 + calc(1rem * 2 + 1rem)) | ||
--pf-v5-c-tree-view__list-item__list-item__node-toggle--Left --pf-v5-c-tree-view__node--PaddingLeft calc(--pf-v5-c-tree-view__node--nested-indent--base * 5 + --pf-v5-c-tree-view__node--indent--base) calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 5 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 5 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 5 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 5 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 5 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 5 + calc(1rem * 2 + 1rem)) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view__node--PaddingLeft | calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 5 + calc(1rem * 2 + 1rem)) | ||
--pf-v5-c-tree-view__node--PaddingLeft calc(--pf-v5-c-tree-view__node--nested-indent--base * 5 + --pf-v5-c-tree-view__node--indent--base) calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 5 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 5 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 5 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 5 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 5 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 5 + calc(1rem * 2 + 1rem)) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-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-v5-c-tree-view--m-guides--border--nested--Left calc(--pf-v5-c-tree-view__node--PaddingLeft - --pf-v5-c-tree-view--m-guides--guide-left--base--offset) calc(calc(--pf-v5-c-tree-view__node--nested-indent--base * 5 + --pf-v5-c-tree-view__node--indent--base) - calc(--pf-v5-c-tree-view__list-item__list-item__node-toggle--Left + --pf-v5-c-tree-view__node-toggle-icon--MinWidth / 2)) calc(calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 5 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) - calc(--pf-v5-c-tree-view__node--PaddingLeft + --pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 5 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) - calc(calc(--pf-v5-c-tree-view__node--nested-indent--base * 5 + --pf-v5-c-tree-view__node--indent--base) + $pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 5 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - calc(calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 5 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) + $pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 5 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - calc(calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 5 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) + $pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 5 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 5 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) + $pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 5 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 5 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) + $pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 5 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) - calc(calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 5 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) + pf-font-prem(16px) / 2)) 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-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view--m-compact__node--PaddingLeft | calc(1.5rem * 4 + calc(1rem * 2 + 1rem)) | ||
--pf-v5-c-tree-view--m-compact__node--PaddingLeft calc(--pf-v5-c-tree-view--m-compact__node--nested-indent--base * 4 + --pf-v5-c-tree-view--m-compact__node--indent--base) calc(--pf-v5-global--spacer--lg * 4 + --pf-v5-c-tree-view__node--indent--base) calc($pf-v5-global--spacer--lg * 4 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) calc($pf-v5-global--spacer--lg * 4 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) calc($pf-v5-global--spacer--lg * 4 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(pf-size-prem(24px) * 4 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) calc(1.5rem * 4 + calc(1rem * 2 + 1rem)) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view--m-compact--border--nested--Left | calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 5 + calc(1rem * 2 + 1rem)) - 1rem) | ||
--pf-v5-c-tree-view--m-compact--border--nested--Left calc(--pf-v5-c-tree-view__node--PaddingLeft - --pf-v5-c-tree-view--m-compact--base-border--Left--offset) calc(calc(--pf-v5-c-tree-view__node--nested-indent--base * 5 + --pf-v5-c-tree-view__node--indent--base) - --pf-v5-global--spacer--md) calc(calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 5 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) - $pf-v5-global--spacer--md) calc(calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 5 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--md) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 5 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--md) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 5 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--md) calc(calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 5 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) - pf-size-prem(16px)) calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 5 + calc(1rem * 2 + 1rem)) - 1rem) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view--m-compact--m-no-background__node--PaddingLeft | calc(3rem * 4 + calc(1rem * 2 + 1rem)) | ||
--pf-v5-c-tree-view--m-compact--m-no-background__node--PaddingLeft calc(--pf-v5-c-tree-view--m-compact--m-no-background__node--nested-indent--base * 4 + --pf-v5-c-tree-view--m-compact--m-no-background__node--indent--base) calc(--pf-v5-global--spacer--2xl * 4 + --pf-v5-c-tree-view__node--indent--base) calc($pf-v5-global--spacer--2xl * 4 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) calc($pf-v5-global--spacer--2xl * 4 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) calc($pf-v5-global--spacer--2xl * 4 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(pf-size-prem(48px) * 4 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) calc(3rem * 4 + calc(1rem * 2 + 1rem)) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-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-v5-c-tree-view--m-compact--m-no-background--border--nested--Left calc(--pf-v5-c-tree-view__node--PaddingLeft - --pf-v5-c-tree-view--m-compact--m-no-background--base-border--Left--offset) calc(calc(--pf-v5-c-tree-view__node--nested-indent--base * 5 + --pf-v5-c-tree-view__node--indent--base) - --pf-v5-global--spacer--sm) calc(calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 5 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) - $pf-v5-global--spacer--sm) calc(calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 5 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--sm) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 5 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--sm) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 5 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--sm) calc(calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 5 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) - pf-size-prem(8px)) calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 5 + calc(1rem * 2 + 1rem)) - 0.5rem) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view__list-item__list-item__node-toggle--Left | calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 6 + calc(1rem * 2 + 1rem)) | ||
--pf-v5-c-tree-view__list-item__list-item__node-toggle--Left --pf-v5-c-tree-view__node--PaddingLeft calc(--pf-v5-c-tree-view__node--nested-indent--base * 6 + --pf-v5-c-tree-view__node--indent--base) calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 6 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 6 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 6 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 6 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 6 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 6 + calc(1rem * 2 + 1rem)) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view__node--PaddingLeft | calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 6 + calc(1rem * 2 + 1rem)) | ||
--pf-v5-c-tree-view__node--PaddingLeft calc(--pf-v5-c-tree-view__node--nested-indent--base * 6 + --pf-v5-c-tree-view__node--indent--base) calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 6 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 6 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 6 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 6 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 6 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 6 + calc(1rem * 2 + 1rem)) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-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-v5-c-tree-view--m-guides--border--nested--Left calc(--pf-v5-c-tree-view__node--PaddingLeft - --pf-v5-c-tree-view--m-guides--guide-left--base--offset) calc(calc(--pf-v5-c-tree-view__node--nested-indent--base * 6 + --pf-v5-c-tree-view__node--indent--base) - calc(--pf-v5-c-tree-view__list-item__list-item__node-toggle--Left + --pf-v5-c-tree-view__node-toggle-icon--MinWidth / 2)) calc(calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 6 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) - calc(--pf-v5-c-tree-view__node--PaddingLeft + --pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 6 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) - calc(calc(--pf-v5-c-tree-view__node--nested-indent--base * 6 + --pf-v5-c-tree-view__node--indent--base) + $pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 6 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - calc(calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 6 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) + $pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 6 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - calc(calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 6 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) + $pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 6 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 6 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) + $pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 6 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 6 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) + $pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 6 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) - calc(calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 6 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) + pf-font-prem(16px) / 2)) 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-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view--m-compact__node--PaddingLeft | calc(1.5rem * 5 + calc(1rem * 2 + 1rem)) | ||
--pf-v5-c-tree-view--m-compact__node--PaddingLeft calc(--pf-v5-c-tree-view--m-compact__node--nested-indent--base * 5 + --pf-v5-c-tree-view--m-compact__node--indent--base) calc(--pf-v5-global--spacer--lg * 5 + --pf-v5-c-tree-view__node--indent--base) calc($pf-v5-global--spacer--lg * 5 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) calc($pf-v5-global--spacer--lg * 5 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) calc($pf-v5-global--spacer--lg * 5 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(pf-size-prem(24px) * 5 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) calc(1.5rem * 5 + calc(1rem * 2 + 1rem)) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view--m-compact--border--nested--Left | calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 6 + calc(1rem * 2 + 1rem)) - 1rem) | ||
--pf-v5-c-tree-view--m-compact--border--nested--Left calc(--pf-v5-c-tree-view__node--PaddingLeft - --pf-v5-c-tree-view--m-compact--base-border--Left--offset) calc(calc(--pf-v5-c-tree-view__node--nested-indent--base * 6 + --pf-v5-c-tree-view__node--indent--base) - --pf-v5-global--spacer--md) calc(calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 6 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) - $pf-v5-global--spacer--md) calc(calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 6 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--md) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 6 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--md) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 6 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--md) calc(calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 6 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) - pf-size-prem(16px)) calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 6 + calc(1rem * 2 + 1rem)) - 1rem) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view--m-compact--m-no-background__node--PaddingLeft | calc(3rem * 5 + calc(1rem * 2 + 1rem)) | ||
--pf-v5-c-tree-view--m-compact--m-no-background__node--PaddingLeft calc(--pf-v5-c-tree-view--m-compact--m-no-background__node--nested-indent--base * 5 + --pf-v5-c-tree-view--m-compact--m-no-background__node--indent--base) calc(--pf-v5-global--spacer--2xl * 5 + --pf-v5-c-tree-view__node--indent--base) calc($pf-v5-global--spacer--2xl * 5 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) calc($pf-v5-global--spacer--2xl * 5 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) calc($pf-v5-global--spacer--2xl * 5 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(pf-size-prem(48px) * 5 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) calc(3rem * 5 + calc(1rem * 2 + 1rem)) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-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-v5-c-tree-view--m-compact--m-no-background--border--nested--Left calc(--pf-v5-c-tree-view__node--PaddingLeft - --pf-v5-c-tree-view--m-compact--m-no-background--base-border--Left--offset) calc(calc(--pf-v5-c-tree-view__node--nested-indent--base * 6 + --pf-v5-c-tree-view__node--indent--base) - --pf-v5-global--spacer--sm) calc(calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 6 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) - $pf-v5-global--spacer--sm) calc(calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 6 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--sm) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 6 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--sm) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 6 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--sm) calc(calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 6 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) - pf-size-prem(8px)) calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 6 + calc(1rem * 2 + 1rem)) - 0.5rem) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view__list-item__list-item__node-toggle--Left | calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 7 + calc(1rem * 2 + 1rem)) | ||
--pf-v5-c-tree-view__list-item__list-item__node-toggle--Left --pf-v5-c-tree-view__node--PaddingLeft calc(--pf-v5-c-tree-view__node--nested-indent--base * 7 + --pf-v5-c-tree-view__node--indent--base) calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 7 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 7 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 7 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 7 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 7 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 7 + calc(1rem * 2 + 1rem)) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view__node--PaddingLeft | calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 7 + calc(1rem * 2 + 1rem)) | ||
--pf-v5-c-tree-view__node--PaddingLeft calc(--pf-v5-c-tree-view__node--nested-indent--base * 7 + --pf-v5-c-tree-view__node--indent--base) calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 7 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 7 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 7 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 7 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 7 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 7 + calc(1rem * 2 + 1rem)) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-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-v5-c-tree-view--m-guides--border--nested--Left calc(--pf-v5-c-tree-view__node--PaddingLeft - --pf-v5-c-tree-view--m-guides--guide-left--base--offset) calc(calc(--pf-v5-c-tree-view__node--nested-indent--base * 7 + --pf-v5-c-tree-view__node--indent--base) - calc(--pf-v5-c-tree-view__list-item__list-item__node-toggle--Left + --pf-v5-c-tree-view__node-toggle-icon--MinWidth / 2)) calc(calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 7 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) - calc(--pf-v5-c-tree-view__node--PaddingLeft + --pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 7 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) - calc(calc(--pf-v5-c-tree-view__node--nested-indent--base * 7 + --pf-v5-c-tree-view__node--indent--base) + $pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 7 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - calc(calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 7 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) + $pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 7 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - calc(calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 7 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) + $pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 7 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 7 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) + $pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 7 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 7 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) + $pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 7 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) - calc(calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 7 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) + pf-font-prem(16px) / 2)) 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-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view--m-compact__node--PaddingLeft | calc(1.5rem * 6 + calc(1rem * 2 + 1rem)) | ||
--pf-v5-c-tree-view--m-compact__node--PaddingLeft calc(--pf-v5-c-tree-view--m-compact__node--nested-indent--base * 6 + --pf-v5-c-tree-view--m-compact__node--indent--base) calc(--pf-v5-global--spacer--lg * 6 + --pf-v5-c-tree-view__node--indent--base) calc($pf-v5-global--spacer--lg * 6 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) calc($pf-v5-global--spacer--lg * 6 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) calc($pf-v5-global--spacer--lg * 6 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(pf-size-prem(24px) * 6 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) calc(1.5rem * 6 + calc(1rem * 2 + 1rem)) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view--m-compact--border--nested--Left | calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 7 + calc(1rem * 2 + 1rem)) - 1rem) | ||
--pf-v5-c-tree-view--m-compact--border--nested--Left calc(--pf-v5-c-tree-view__node--PaddingLeft - --pf-v5-c-tree-view--m-compact--base-border--Left--offset) calc(calc(--pf-v5-c-tree-view__node--nested-indent--base * 7 + --pf-v5-c-tree-view__node--indent--base) - --pf-v5-global--spacer--md) calc(calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 7 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) - $pf-v5-global--spacer--md) calc(calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 7 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--md) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 7 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--md) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 7 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--md) calc(calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 7 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) - pf-size-prem(16px)) calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 7 + calc(1rem * 2 + 1rem)) - 1rem) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view--m-compact--m-no-background__node--PaddingLeft | calc(3rem * 6 + calc(1rem * 2 + 1rem)) | ||
--pf-v5-c-tree-view--m-compact--m-no-background__node--PaddingLeft calc(--pf-v5-c-tree-view--m-compact--m-no-background__node--nested-indent--base * 6 + --pf-v5-c-tree-view--m-compact--m-no-background__node--indent--base) calc(--pf-v5-global--spacer--2xl * 6 + --pf-v5-c-tree-view__node--indent--base) calc($pf-v5-global--spacer--2xl * 6 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) calc($pf-v5-global--spacer--2xl * 6 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) calc($pf-v5-global--spacer--2xl * 6 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(pf-size-prem(48px) * 6 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) calc(3rem * 6 + calc(1rem * 2 + 1rem)) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-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-v5-c-tree-view--m-compact--m-no-background--border--nested--Left calc(--pf-v5-c-tree-view__node--PaddingLeft - --pf-v5-c-tree-view--m-compact--m-no-background--base-border--Left--offset) calc(calc(--pf-v5-c-tree-view__node--nested-indent--base * 7 + --pf-v5-c-tree-view__node--indent--base) - --pf-v5-global--spacer--sm) calc(calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 7 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) - $pf-v5-global--spacer--sm) calc(calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 7 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--sm) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 7 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--sm) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 7 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--sm) calc(calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 7 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) - pf-size-prem(8px)) calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 7 + calc(1rem * 2 + 1rem)) - 0.5rem) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view__list-item__list-item__node-toggle--Left | calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 8 + calc(1rem * 2 + 1rem)) | ||
--pf-v5-c-tree-view__list-item__list-item__node-toggle--Left --pf-v5-c-tree-view__node--PaddingLeft calc(--pf-v5-c-tree-view__node--nested-indent--base * 8 + --pf-v5-c-tree-view__node--indent--base) calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 8 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 8 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 8 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 8 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 8 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 8 + calc(1rem * 2 + 1rem)) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view__node--PaddingLeft | calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 8 + calc(1rem * 2 + 1rem)) | ||
--pf-v5-c-tree-view__node--PaddingLeft calc(--pf-v5-c-tree-view__node--nested-indent--base * 8 + --pf-v5-c-tree-view__node--indent--base) calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 8 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 8 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 8 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 8 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 8 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 8 + calc(1rem * 2 + 1rem)) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-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-v5-c-tree-view--m-guides--border--nested--Left calc(--pf-v5-c-tree-view__node--PaddingLeft - --pf-v5-c-tree-view--m-guides--guide-left--base--offset) calc(calc(--pf-v5-c-tree-view__node--nested-indent--base * 8 + --pf-v5-c-tree-view__node--indent--base) - calc(--pf-v5-c-tree-view__list-item__list-item__node-toggle--Left + --pf-v5-c-tree-view__node-toggle-icon--MinWidth / 2)) calc(calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 8 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) - calc(--pf-v5-c-tree-view__node--PaddingLeft + --pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 8 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) - calc(calc(--pf-v5-c-tree-view__node--nested-indent--base * 8 + --pf-v5-c-tree-view__node--indent--base) + $pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 8 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - calc(calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 8 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) + $pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 8 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - calc(calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 8 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) + $pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 8 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 8 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) + $pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 8 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 8 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) + $pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 8 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) - calc(calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 8 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) + pf-font-prem(16px) / 2)) 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-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view--m-compact__node--PaddingLeft | calc(1.5rem * 7 + calc(1rem * 2 + 1rem)) | ||
--pf-v5-c-tree-view--m-compact__node--PaddingLeft calc(--pf-v5-c-tree-view--m-compact__node--nested-indent--base * 7 + --pf-v5-c-tree-view--m-compact__node--indent--base) calc(--pf-v5-global--spacer--lg * 7 + --pf-v5-c-tree-view__node--indent--base) calc($pf-v5-global--spacer--lg * 7 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) calc($pf-v5-global--spacer--lg * 7 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) calc($pf-v5-global--spacer--lg * 7 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(pf-size-prem(24px) * 7 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) calc(1.5rem * 7 + calc(1rem * 2 + 1rem)) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view--m-compact--border--nested--Left | calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 8 + calc(1rem * 2 + 1rem)) - 1rem) | ||
--pf-v5-c-tree-view--m-compact--border--nested--Left calc(--pf-v5-c-tree-view__node--PaddingLeft - --pf-v5-c-tree-view--m-compact--base-border--Left--offset) calc(calc(--pf-v5-c-tree-view__node--nested-indent--base * 8 + --pf-v5-c-tree-view__node--indent--base) - --pf-v5-global--spacer--md) calc(calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 8 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) - $pf-v5-global--spacer--md) calc(calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 8 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--md) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 8 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--md) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 8 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--md) calc(calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 8 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) - pf-size-prem(16px)) calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 8 + calc(1rem * 2 + 1rem)) - 1rem) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view--m-compact--m-no-background__node--PaddingLeft | calc(3rem * 7 + calc(1rem * 2 + 1rem)) | ||
--pf-v5-c-tree-view--m-compact--m-no-background__node--PaddingLeft calc(--pf-v5-c-tree-view--m-compact--m-no-background__node--nested-indent--base * 7 + --pf-v5-c-tree-view--m-compact--m-no-background__node--indent--base) calc(--pf-v5-global--spacer--2xl * 7 + --pf-v5-c-tree-view__node--indent--base) calc($pf-v5-global--spacer--2xl * 7 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) calc($pf-v5-global--spacer--2xl * 7 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) calc($pf-v5-global--spacer--2xl * 7 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(pf-size-prem(48px) * 7 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) calc(3rem * 7 + calc(1rem * 2 + 1rem)) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-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-v5-c-tree-view--m-compact--m-no-background--border--nested--Left calc(--pf-v5-c-tree-view__node--PaddingLeft - --pf-v5-c-tree-view--m-compact--m-no-background--base-border--Left--offset) calc(calc(--pf-v5-c-tree-view__node--nested-indent--base * 8 + --pf-v5-c-tree-view__node--indent--base) - --pf-v5-global--spacer--sm) calc(calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 8 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) - $pf-v5-global--spacer--sm) calc(calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 8 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--sm) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 8 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--sm) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 8 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--sm) calc(calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 8 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) - pf-size-prem(8px)) calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 8 + calc(1rem * 2 + 1rem)) - 0.5rem) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view__list-item__list-item__node-toggle--Left | calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 9 + calc(1rem * 2 + 1rem)) | ||
--pf-v5-c-tree-view__list-item__list-item__node-toggle--Left --pf-v5-c-tree-view__node--PaddingLeft calc(--pf-v5-c-tree-view__node--nested-indent--base * 9 + --pf-v5-c-tree-view__node--indent--base) calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 9 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 9 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 9 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 9 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 9 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 9 + calc(1rem * 2 + 1rem)) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view__node--PaddingLeft | calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 9 + calc(1rem * 2 + 1rem)) | ||
--pf-v5-c-tree-view__node--PaddingLeft calc(--pf-v5-c-tree-view__node--nested-indent--base * 9 + --pf-v5-c-tree-view__node--indent--base) calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 9 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 9 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 9 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 9 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 9 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 9 + calc(1rem * 2 + 1rem)) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-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-v5-c-tree-view--m-guides--border--nested--Left calc(--pf-v5-c-tree-view__node--PaddingLeft - --pf-v5-c-tree-view--m-guides--guide-left--base--offset) calc(calc(--pf-v5-c-tree-view__node--nested-indent--base * 9 + --pf-v5-c-tree-view__node--indent--base) - calc(--pf-v5-c-tree-view__list-item__list-item__node-toggle--Left + --pf-v5-c-tree-view__node-toggle-icon--MinWidth / 2)) calc(calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 9 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) - calc(--pf-v5-c-tree-view__node--PaddingLeft + --pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 9 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) - calc(calc(--pf-v5-c-tree-view__node--nested-indent--base * 9 + --pf-v5-c-tree-view__node--indent--base) + $pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 9 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - calc(calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 9 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) + $pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 9 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - calc(calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 9 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) + $pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 9 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 9 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) + $pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 9 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 9 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) + $pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 9 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) - calc(calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 9 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) + pf-font-prem(16px) / 2)) 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-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view--m-compact__node--PaddingLeft | calc(1.5rem * 8 + calc(1rem * 2 + 1rem)) | ||
--pf-v5-c-tree-view--m-compact__node--PaddingLeft calc(--pf-v5-c-tree-view--m-compact__node--nested-indent--base * 8 + --pf-v5-c-tree-view--m-compact__node--indent--base) calc(--pf-v5-global--spacer--lg * 8 + --pf-v5-c-tree-view__node--indent--base) calc($pf-v5-global--spacer--lg * 8 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) calc($pf-v5-global--spacer--lg * 8 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) calc($pf-v5-global--spacer--lg * 8 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(pf-size-prem(24px) * 8 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) calc(1.5rem * 8 + calc(1rem * 2 + 1rem)) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view--m-compact--border--nested--Left | calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 9 + calc(1rem * 2 + 1rem)) - 1rem) | ||
--pf-v5-c-tree-view--m-compact--border--nested--Left calc(--pf-v5-c-tree-view__node--PaddingLeft - --pf-v5-c-tree-view--m-compact--base-border--Left--offset) calc(calc(--pf-v5-c-tree-view__node--nested-indent--base * 9 + --pf-v5-c-tree-view__node--indent--base) - --pf-v5-global--spacer--md) calc(calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 9 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) - $pf-v5-global--spacer--md) calc(calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 9 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--md) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 9 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--md) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 9 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--md) calc(calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 9 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) - pf-size-prem(16px)) calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 9 + calc(1rem * 2 + 1rem)) - 1rem) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view--m-compact--m-no-background__node--PaddingLeft | calc(3rem * 8 + calc(1rem * 2 + 1rem)) | ||
--pf-v5-c-tree-view--m-compact--m-no-background__node--PaddingLeft calc(--pf-v5-c-tree-view--m-compact--m-no-background__node--nested-indent--base * 8 + --pf-v5-c-tree-view--m-compact--m-no-background__node--indent--base) calc(--pf-v5-global--spacer--2xl * 8 + --pf-v5-c-tree-view__node--indent--base) calc($pf-v5-global--spacer--2xl * 8 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) calc($pf-v5-global--spacer--2xl * 8 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) calc($pf-v5-global--spacer--2xl * 8 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(pf-size-prem(48px) * 8 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) calc(3rem * 8 + calc(1rem * 2 + 1rem)) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-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-v5-c-tree-view--m-compact--m-no-background--border--nested--Left calc(--pf-v5-c-tree-view__node--PaddingLeft - --pf-v5-c-tree-view--m-compact--m-no-background--base-border--Left--offset) calc(calc(--pf-v5-c-tree-view__node--nested-indent--base * 9 + --pf-v5-c-tree-view__node--indent--base) - --pf-v5-global--spacer--sm) calc(calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 9 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) - $pf-v5-global--spacer--sm) calc(calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 9 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--sm) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 9 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--sm) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 9 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--sm) calc(calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 9 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) - pf-size-prem(8px)) calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 9 + calc(1rem * 2 + 1rem)) - 0.5rem) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view__list-item__list-item__node-toggle--Left | calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 10 + calc(1rem * 2 + 1rem)) | ||
--pf-v5-c-tree-view__list-item__list-item__node-toggle--Left --pf-v5-c-tree-view__node--PaddingLeft calc(--pf-v5-c-tree-view__node--nested-indent--base * 10 + --pf-v5-c-tree-view__node--indent--base) calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 10 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 10 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 10 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 10 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 10 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 10 + calc(1rem * 2 + 1rem)) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view__node--PaddingLeft | calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 10 + calc(1rem * 2 + 1rem)) | ||
--pf-v5-c-tree-view__node--PaddingLeft calc(--pf-v5-c-tree-view__node--nested-indent--base * 10 + --pf-v5-c-tree-view__node--indent--base) calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 10 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 10 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 10 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 10 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 10 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 10 + calc(1rem * 2 + 1rem)) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-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-v5-c-tree-view--m-guides--border--nested--Left calc(--pf-v5-c-tree-view__node--PaddingLeft - --pf-v5-c-tree-view--m-guides--guide-left--base--offset) calc(calc(--pf-v5-c-tree-view__node--nested-indent--base * 10 + --pf-v5-c-tree-view__node--indent--base) - calc(--pf-v5-c-tree-view__list-item__list-item__node-toggle--Left + --pf-v5-c-tree-view__node-toggle-icon--MinWidth / 2)) calc(calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 10 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) - calc(--pf-v5-c-tree-view__node--PaddingLeft + --pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 10 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) - calc(calc(--pf-v5-c-tree-view__node--nested-indent--base * 10 + --pf-v5-c-tree-view__node--indent--base) + $pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 10 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - calc(calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 10 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) + $pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 10 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - calc(calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 10 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) + $pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 10 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 10 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) + $pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 10 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 10 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) + $pf-v5-global--FontSize--md / 2)) calc(calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 10 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) - calc(calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 10 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) + pf-font-prem(16px) / 2)) 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-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view--m-compact__node--PaddingLeft | calc(1.5rem * 9 + calc(1rem * 2 + 1rem)) | ||
--pf-v5-c-tree-view--m-compact__node--PaddingLeft calc(--pf-v5-c-tree-view--m-compact__node--nested-indent--base * 9 + --pf-v5-c-tree-view--m-compact__node--indent--base) calc(--pf-v5-global--spacer--lg * 9 + --pf-v5-c-tree-view__node--indent--base) calc($pf-v5-global--spacer--lg * 9 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) calc($pf-v5-global--spacer--lg * 9 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) calc($pf-v5-global--spacer--lg * 9 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(pf-size-prem(24px) * 9 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) calc(1.5rem * 9 + calc(1rem * 2 + 1rem)) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view--m-compact--border--nested--Left | calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 10 + calc(1rem * 2 + 1rem)) - 1rem) | ||
--pf-v5-c-tree-view--m-compact--border--nested--Left calc(--pf-v5-c-tree-view__node--PaddingLeft - --pf-v5-c-tree-view--m-compact--base-border--Left--offset) calc(calc(--pf-v5-c-tree-view__node--nested-indent--base * 10 + --pf-v5-c-tree-view__node--indent--base) - --pf-v5-global--spacer--md) calc(calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 10 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) - $pf-v5-global--spacer--md) calc(calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 10 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--md) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 10 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--md) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 10 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--md) calc(calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 10 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) - pf-size-prem(16px)) calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 10 + calc(1rem * 2 + 1rem)) - 1rem) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-c-tree-view--m-compact--m-no-background__node--PaddingLeft | calc(3rem * 9 + calc(1rem * 2 + 1rem)) | ||
--pf-v5-c-tree-view--m-compact--m-no-background__node--PaddingLeft calc(--pf-v5-c-tree-view--m-compact--m-no-background__node--nested-indent--base * 9 + --pf-v5-c-tree-view--m-compact--m-no-background__node--indent--base) calc(--pf-v5-global--spacer--2xl * 9 + --pf-v5-c-tree-view__node--indent--base) calc($pf-v5-global--spacer--2xl * 9 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) calc($pf-v5-global--spacer--2xl * 9 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) calc($pf-v5-global--spacer--2xl * 9 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) calc(pf-size-prem(48px) * 9 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) calc(3rem * 9 + calc(1rem * 2 + 1rem)) | ||||
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item | --pf-v5-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) | ||
--pf-v5-c-tree-view--m-compact--m-no-background--border--nested--Left calc(--pf-v5-c-tree-view__node--PaddingLeft - --pf-v5-c-tree-view--m-compact--m-no-background--base-border--Left--offset) calc(calc(--pf-v5-c-tree-view__node--nested-indent--base * 10 + --pf-v5-c-tree-view__node--indent--base) - --pf-v5-global--spacer--sm) calc(calc(calc(--pf-v5-c-tree-view__node--indent--base - --pf-v5-global--spacer--md) * 10 + calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth)) - $pf-v5-global--spacer--sm) calc(calc(calc(calc(--pf-v5-global--spacer--md * 2 + --pf-v5-c-tree-view__node-toggle-icon--MinWidth) - $pf-v5-global--spacer--md) * 10 + calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--sm) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + --pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 10 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--sm) calc(calc(calc(calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md) - $pf-v5-global--spacer--md) * 10 + calc($pf-v5-global--spacer--md * 2 + $pf-v5-global--FontSize--md)) - $pf-v5-global--spacer--sm) calc(calc(calc(calc(pf-size-prem(16px) * 2 + pf-font-prem(16px)) - pf-size-prem(16px)) * 10 + calc(pf-size-prem(16px) * 2 + pf-font-prem(16px))) - pf-size-prem(8px)) calc(calc(calc(calc(1rem * 2 + 1rem) - 1rem) * 10 + calc(1rem * 2 + 1rem)) - 0.5rem) |
View source on GitHub