UNPKG

@patternfly/patternfly

Version:

Assets, source, tooling, and content for PatternFly 4

474 lines (456 loc) • 40 kB
.pf-v5-c-tree-view { --pf-v5-c-tree-view--PaddingTop: var(--pf-v5-global--spacer--sm); --pf-v5-c-tree-view--PaddingBottom: var(--pf-v5-global--spacer--sm); --pf-v5-c-tree-view__node--indent--base: calc(var(--pf-v5-global--spacer--md) * 2 + var(--pf-v5-c-tree-view__node-toggle-icon--MinWidth)); --pf-v5-c-tree-view__node--nested-indent--base: calc(var(--pf-v5-c-tree-view__node--indent--base) - var(--pf-v5-global--spacer--md)); --pf-v5-c-tree-view__node--PaddingTop--base: var(--pf-v5-global--spacer--sm); --pf-v5-c-tree-view__node--PaddingTop: var(--pf-v5-c-tree-view__node--PaddingTop--base); --pf-v5-c-tree-view__node--PaddingRight: var(--pf-v5-global--spacer--sm); --pf-v5-c-tree-view__node--PaddingBottom: var(--pf-v5-global--spacer--sm); --pf-v5-c-tree-view__node--PaddingLeft: var(--pf-v5-c-tree-view__node--indent--base); --pf-v5-c-tree-view__node--Color: var(--pf-v5-global--Color--100); --pf-v5-c-tree-view__node--m-current--Color: var(--pf-v5-global--link--Color); --pf-v5-c-tree-view__node--m-current--FontWeight: var(--pf-v5-global--FontWeight--bold); --pf-v5-c-tree-view__node--BackgroundColor: transparent; --pf-v5-c-tree-view__node-container--Display: contents; --pf-v5-c-tree-view__node-content--RowGap: var(--pf-v5-global--spacer--sm); --pf-v5-c-tree-view__node-content--Overflow: visible; --pf-v5-c-tree-view__node--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--200); --pf-v5-c-tree-view__node--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--200); --pf-v5-c-tree-view__list-item__list-item__node-toggle--Top: var(--pf-v5-c-tree-view__node--PaddingTop--base); --pf-v5-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-v5-c-tree-view__node--PaddingLeft); --pf-v5-c-tree-view__list-item__list-item__node-toggle--TranslateX: -100%; --pf-v5-c-tree-view__node-toggle--Position: absolute; --pf-v5-c-tree-view__node-toggle--Color--base: var(--pf-v5-global--Color--200); --pf-v5-c-tree-view__node-toggle--Color: var(--pf-v5-c-tree-view__node-toggle--Color--base); --pf-v5-c-tree-view__node-toggle--hover--Color: var(--pf-v5-global--Color--100); --pf-v5-c-tree-view__node-toggle--focus--Color: var(--pf-v5-global--Color--100); --pf-v5-c-tree-view__node-toggle--active--Color: var(--pf-v5-global--Color--100); --pf-v5-c-tree-view__node-toggle--BackgroundColor: transparent; --pf-v5-c-tree-view__list-item--m-expanded__node-toggle--Color: var(--pf-v5-global--Color--100); --pf-v5-c-tree-view__node-toggle-icon--MinWidth: var(--pf-v5-global--FontSize--md); --pf-v5-c-tree-view__node-toggle-icon--Transition: transform var(--pf-v5-global--TransitionDuration) var(--pf-v5-global--TimingFunction); --pf-v5-c-tree-view__node-toggle-button--PaddingTop: var(--pf-v5-global--spacer--form-element); --pf-v5-c-tree-view__node-toggle-button--PaddingRight: var(--pf-v5-global--spacer--md); --pf-v5-c-tree-view__node-toggle-button--PaddingBottom: var(--pf-v5-global--spacer--form-element); --pf-v5-c-tree-view__node-toggle-button--PaddingLeft: var(--pf-v5-global--spacer--md); --pf-v5-c-tree-view__node-toggle-button--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1); --pf-v5-c-tree-view__node-toggle-button--MarginBottom: calc(var(--pf-v5-global--spacer--form-element) * -1); --pf-v5-c-tree-view__node-check--MarginRight: var(--pf-v5-global--spacer--sm); --pf-v5-c-tree-view__node-count--MarginLeft: var(--pf-v5-global--spacer--sm); --pf-v5-c-tree-view__node-count--c-badge--m-read--BackgroundColor: var(--pf-v5-global--disabled-color--200); --pf-v5-c-tree-view__search--PaddingTop: var(--pf-v5-global--spacer--sm); --pf-v5-c-tree-view__search--PaddingRight: var(--pf-v5-global--spacer--sm); --pf-v5-c-tree-view__search--PaddingBottom: var(--pf-v5-global--spacer--sm); --pf-v5-c-tree-view__search--PaddingLeft: var(--pf-v5-global--spacer--sm); --pf-v5-c-tree-view__node-icon--PaddingRight: var(--pf-v5-global--spacer--sm); --pf-v5-c-tree-view__node-icon--Color: var(--pf-v5-global--icon--Color--light); --pf-v5-c-tree-view__node-toggle-icon--base--Rotate: 0; --pf-v5-c-tree-view__node-toggle-icon--Rotate: var(--pf-v5-c-tree-view__node-toggle-icon--base--Rotate); --pf-v5-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate: 90deg; --pf-v5-c-tree-view__node-text--max-lines: 1; --pf-v5-c-tree-view__node-title--FontWeight: var(--pf-v5-global--FontWeight--bold); --pf-v5-c-tree-view__action--MarginLeft: var(--pf-v5-global--spacer--md); --pf-v5-c-tree-view--m-guides--guide--Left: var(--pf-v5-c-tree-view--m-guides--guide-left--base); --pf-v5-c-tree-view--m-guides--guide-color--base: var(--pf-v5-global--BorderColor--100); --pf-v5-c-tree-view--m-guides--guide-width--base: var(--pf-v5-global--BorderWidth--sm); --pf-v5-c-tree-view--m-guides--guide-left--base: calc(var(--pf-v5-c-tree-view__node--PaddingLeft) - var(--pf-v5-c-tree-view--m-guides__list-node--guide-width--base)); --pf-v5-c-tree-view--m-guides--guide-left--base--offset: calc(var(--pf-v5-c-tree-view__list-item__list-item__node-toggle--Left) + var(--pf-v5-c-tree-view__node-toggle-icon--MinWidth) / 2); --pf-v5-c-tree-view--m-guides__list-node--guide-width--base: var(--pf-v5-global--spacer--lg); --pf-v5-c-tree-view--m-guides__list-item--before--Top: 0; --pf-v5-c-tree-view--m-guides__list-item--before--Width: var(--pf-v5-c-tree-view--m-guides--guide-width--base); --pf-v5-c-tree-view--m-guides__list-item--before--Height: 100%; --pf-v5-c-tree-view--m-guides__list-item--before--BackgroundColor: var(--pf-v5-c-tree-view--m-guides--guide-color--base); --pf-v5-c-tree-view--m-guides__list-item--last-child--before--Top: var(--pf-v5-c-tree-view--m-guides__node--before--Top); --pf-v5-c-tree-view--m-guides__list-item--last-child--before--Height: var(--pf-v5-c-tree-view--m-guides__list-item--last-child--before--Top); --pf-v5-c-tree-view--m-guides__list-item--ZIndex: var(--pf-v5-global--ZIndex--xs); --pf-v5-c-tree-view--m-guides__node--before--Width: 1rem; --pf-v5-c-tree-view--m-guides__node--before--Height: var(--pf-v5-c-tree-view--m-guides--guide-width--base); --pf-v5-c-tree-view--m-guides__node--before--Top: 1.125rem; --pf-v5-c-tree-view--m-guides__node--before--BackgroundColor: var(--pf-v5-c-tree-view--m-guides--guide-color--base); --pf-v5-c-tree-view--m-compact--base-border--Left--offset: var(--pf-v5-global--spacer--md); --pf-v5-c-tree-view--m-compact--base-border--Left: calc(var(--pf-v5-c-tree-view__node--PaddingLeft) - var(--pf-v5-c-tree-view--m-compact--base-border--Left--offset)); --pf-v5-c-tree-view--m-compact__node--indent--base: var(--pf-v5-c-tree-view__node--indent--base); --pf-v5-c-tree-view--m-compact__node--nested-indent--base: var(--pf-v5-global--spacer--lg); --pf-v5-c-tree-view--m-compact--border--Left: var(--pf-v5-c-tree-view--m-compact--base-border--Left); --pf-v5-c-tree-view--m-compact__node--PaddingTop: 0; --pf-v5-c-tree-view--m-compact__node--PaddingBottom: 0; --pf-v5-c-tree-view--m-compact__node--nested--PaddingTop: var(--pf-v5-global--spacer--sm); --pf-v5-c-tree-view--m-compact__node--nested--PaddingBottom: var(--pf-v5-global--spacer--sm); --pf-v5-c-tree-view--m-compact__list-item__list-item__node-toggle--Top: calc(var(--pf-v5-c-tree-view--m-compact__node-container--PaddingTop)); --pf-v5-c-tree-view--m-compact__list-item--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm); --pf-v5-c-tree-view--m-compact__list-item--BorderBottomColor: var(--pf-v5-global--BorderColor--100); --pf-v5-c-tree-view--m-compact__list-item--before--Top: 0; --pf-v5-c-tree-view--m-compact__list-item--last-child--before--Height: var(--pf-v5-c-tree-view--m-compact__node--before--Top); --pf-v5-c-tree-view--m-compact__list-item--nested--before--Top: calc(var(--pf-v5-c-tree-view__node--PaddingTop--base) * -1); --pf-v5-c-tree-view--m-compact__list-item--nested--last-child--before--Height: calc(var(--pf-v5-c-tree-view--m-compact__node--before--Top) + var(--pf-v5-c-tree-view__node--PaddingTop--base)); --pf-v5-c-tree-view--m-compact__node--PaddingLeft: var(--pf-v5-c-tree-view--m-compact__node--indent--base); --pf-v5-c-tree-view--m-compact__node--before--Top: calc(var(--pf-v5-c-tree-view--m-compact__node-container--PaddingTop) + var(--pf-v5-c-tree-view--m-compact__node--nested--PaddingTop) + 0.25rem); --pf-v5-c-tree-view--m-compact__node--level-2--PaddingLeft: var(--pf-v5-c-tree-view--m-compact__node--indent--base); --pf-v5-c-tree-view--m-compact__node-toggle--nested--MarginRight: calc(var(--pf-v5-c-tree-view__node-toggle-button--PaddingLeft) * -.5); --pf-v5-c-tree-view--m-compact__node-toggle--nested--MarginLeft: calc(var(--pf-v5-c-tree-view__node-toggle-button--PaddingLeft) * -1.5); --pf-v5-c-tree-view--m-compact__node-container--Display: flex; --pf-v5-c-tree-view--m-compact__node-container--PaddingBottom--base: var(--pf-v5-global--spacer--lg); --pf-v5-c-tree-view--m-compact__node-container--PaddingTop: var(--pf-v5-global--spacer--lg); --pf-v5-c-tree-view--m-compact__node-container--PaddingRight: var(--pf-v5-global--spacer--lg); --pf-v5-c-tree-view--m-compact__node-container--PaddingBottom: var(--pf-v5-c-tree-view--m-compact__node-container--PaddingBottom--base); --pf-v5-c-tree-view--m-compact__node-container--PaddingLeft: var(--pf-v5-global--spacer--xs); --pf-v5-c-tree-view--m-compact__node-container--nested--PaddingTop: var(--pf-v5-global--spacer--md); --pf-v5-c-tree-view--m-compact__node-container--nested--PaddingRight: var(--pf-v5-global--spacer--lg); --pf-v5-c-tree-view--m-compact__node-container--nested--PaddingBottom: var(--pf-v5-global--spacer--md); --pf-v5-c-tree-view--m-compact__node-container--nested--PaddingLeft: var(--pf-v5-global--spacer--lg); --pf-v5-c-tree-view--m-compact__node-container--nested--BackgroundColor: var(--pf-v5-global--BackgroundColor--200); --pf-v5-c-tree-view--m-compact__list-item--m-expanded__node-container--PaddingBottom: 0; --pf-v5-c-tree-view--m-no-background__node-container--BackgroundColor: transparent; --pf-v5-c-tree-view--m-compact--m-no-background--base-border--Left--offset: var(--pf-v5-global--spacer--sm); --pf-v5-c-tree-view--m-compact--m-no-background--base-border--Left: calc(var(--pf-v5-c-tree-view__node--PaddingLeft) - var(--pf-v5-c-tree-view--m-compact--m-no-background--base-border--Left--offset)); --pf-v5-c-tree-view--m-compact--m-no-background__node--indent--base: var(--pf-v5-c-tree-view__node--indent--base); --pf-v5-c-tree-view--m-compact--m-no-background__node--nested-indent--base: var(--pf-v5-global--spacer--2xl); --pf-v5-c-tree-view--m-compact--m-no-background__node--nested--PaddingTop: 0; --pf-v5-c-tree-view--m-compact--m-no-background__node--nested--PaddingBottom: 0; --pf-v5-c-tree-view--m-compact--m-no-background__node--before--Top: calc(var(--pf-v5-c-tree-view--m-compact__node-container--nested--PaddingTop) + var(--pf-v5-c-tree-view--m-compact__node--nested--PaddingTop) + 0.25rem); padding-block-start: var(--pf-v5-c-tree-view--PaddingTop); padding-block-end: var(--pf-v5-c-tree-view--PaddingBottom); } .pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item, .pf-v5-c-tree-view.pf-m-guides .pf-v5-c-tree-view__list-item { position: relative; } .pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item::before, .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::before, .pf-v5-c-tree-view.pf-m-guides .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item::before, .pf-v5-c-tree-view.pf-m-guides .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__node::before { position: absolute; inset-inline-start: var(--pf-v5-c-tree-view--m-guides--guide--Left); content: ""; } .pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item::before, .pf-v5-c-tree-view.pf-m-guides .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item::before { inset-block-start: var(--pf-v5-c-tree-view--m-guides__list-item--before--Top); z-index: var(--pf-v5-c-tree-view--m-guides__list-item--ZIndex); width: var(--pf-v5-c-tree-view--m-guides__list-item--before--Width); height: var(--pf-v5-c-tree-view--m-guides__list-item--before--Height); background-color: var(--pf-v5-c-tree-view--m-guides__list-item--before--BackgroundColor); } .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::before, .pf-v5-c-tree-view.pf-m-guides .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__node::before { inset-block-start: var(--pf-v5-c-tree-view--m-guides__node--before--Top); width: var(--pf-v5-c-tree-view--m-guides__node--before--Width); height: var(--pf-v5-c-tree-view--m-guides__node--before--Height); background-color: var(--pf-v5-c-tree-view--m-guides__node--before--BackgroundColor); } .pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item:last-child::before, .pf-v5-c-tree-view.pf-m-guides .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item:last-child::before { height: var(--pf-v5-c-tree-view--m-guides__list-item--last-child--before--Height); } .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.pf-m-guides .pf-v5-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: var(--pf-v5-c-tree-view--m-guides--border--nested--Left); } .pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item:last-child, .pf-v5-c-tree-view.pf-m-guides .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: var(--pf-v5-c-tree-view--m-compact__node--PaddingTop); --pf-v5-c-tree-view__node--PaddingBottom: var(--pf-v5-c-tree-view--m-compact__node--PaddingBottom); --pf-v5-c-tree-view__node-container--Display: var(--pf-v5-c-tree-view--m-compact__node-container--Display); --pf-v5-c-tree-view__node--hover--BackgroundColor: transparent; --pf-v5-c-tree-view__node--focus--BackgroundColor: transparent; --pf-v5-c-tree-view__list-item__list-item__node-toggle--Top: var(--pf-v5-c-tree-view--m-compact__list-item__list-item__node-toggle--Top); } .pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item { border-block-end: var(--pf-v5-c-tree-view--m-compact__list-item--BorderBottomWidth) solid var(--pf-v5-c-tree-view--m-compact__list-item--BorderBottomColor); } .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: var(--pf-v5-c-tree-view--m-compact__list-item--m-expanded__node-container--PaddingBottom); } .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: var(--pf-v5-c-tree-view--m-compact__node--nested--PaddingTop); --pf-v5-c-tree-view__node--PaddingBottom: var(--pf-v5-c-tree-view--m-compact__node--nested--PaddingBottom); --pf-v5-c-tree-view__node-toggle--Position: static; --pf-v5-c-tree-view__node--PaddingLeft: var(--pf-v5-c-tree-view--m-compact__node--level-2--PaddingLeft); --pf-v5-c-tree-view__list-item__list-item__node-toggle--TranslateX: 0; --pf-v5-c-tree-view--m-compact__list-item--BorderBottomWidth: 0; --pf-v5-c-tree-view--m-compact__node-container--PaddingBottom: var(--pf-v5-c-tree-view--m-compact__node-container--PaddingBottom--base); } .pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item::before, .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::before { inset-inline-start: var(--pf-v5-c-tree-view--m-compact--border--Left); } .pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item::before { inset-block-start: var(--pf-v5-c-tree-view--m-compact__list-item--before--Top); } .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::before { inset-block-start: var(--pf-v5-c-tree-view--m-compact__node--before--Top); } .pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item:last-child::before { height: var(--pf-v5-c-tree-view--m-compact__list-item--last-child--before--Height); } .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: var(--pf-v5-c-tree-view--m-compact__node--PaddingLeft); --pf-v5-c-tree-view--m-compact--border--Left: var(--pf-v5-c-tree-view--m-compact--border--nested--Left); --pf-v5-c-tree-view--m-compact__list-item--before--Top: var(--pf-v5-c-tree-view--m-compact__list-item--nested--before--Top); --pf-v5-c-tree-view--m-compact__list-item--last-child--before--Height: var(--pf-v5-c-tree-view--m-compact__list-item--nested--last-child--before--Height); } .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-container { padding-block-start: var(--pf-v5-c-tree-view--m-compact__node-container--nested--PaddingTop); padding-block-end: var(--pf-v5-c-tree-view--m-compact__node-container--nested--PaddingBottom); padding-inline-start: var(--pf-v5-c-tree-view--m-compact__node-container--nested--PaddingLeft); padding-inline-end: var(--pf-v5-c-tree-view--m-compact__node-container--nested--PaddingRight); background-color: var(--pf-v5-c-tree-view--m-compact__node-container--nested--BackgroundColor); } .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 { margin-inline-start: var(--pf-v5-c-tree-view--m-compact__node-toggle--nested--MarginLeft); margin-inline-end: var(--pf-v5-c-tree-view--m-compact__node-toggle--nested--MarginRight); } .pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__node-container { padding-block-start: var(--pf-v5-c-tree-view--m-compact__node-container--PaddingTop); padding-block-end: var(--pf-v5-c-tree-view--m-compact__node-container--PaddingBottom); padding-inline-start: var(--pf-v5-c-tree-view--m-compact__node-container--PaddingLeft); padding-inline-end: var(--pf-v5-c-tree-view--m-compact__node-container--PaddingRight); } .pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item:not([aria-expanded]) > .pf-v5-c-tree-view__content > .pf-v5-c-tree-view__node, .pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item:not([aria-expanded]) > .pf-v5-c-tree-view__content > .pf-v5-c-tree-view__node > .pf-v5-c-tree-view__node-container { cursor: default; } .pf-v5-c-tree-view.pf-m-compact.pf-m-no-background { --pf-v5-c-tree-view--m-compact__node--before--Top: var(--pf-v5-c-tree-view--m-compact--m-no-background__node--before--Top); } .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: var(--pf-v5-c-tree-view--m-compact--m-no-background__node--nested--PaddingTop); --pf-v5-c-tree-view__node--PaddingBottom: var(--pf-v5-c-tree-view--m-compact--m-no-background__node--nested--PaddingBottom); } .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: var(--pf-v5-c-tree-view--m-compact--m-no-background--border--nested--Left); --pf-v5-c-tree-view__node--PaddingLeft: var(--pf-v5-c-tree-view--m-compact--m-no-background__node--PaddingLeft); } .pf-v5-c-tree-view.pf-m-no-background { --pf-v5-c-tree-view--m-compact__node-container--nested--BackgroundColor: var(--pf-v5-c-tree-view--m-no-background__node-container--BackgroundColor); } .pf-v5-c-tree-view__node-toggle-icon { display: inline-block; min-width: var(--pf-v5-c-tree-view__node-toggle-icon--MinWidth); text-align: center; transition: var(--pf-v5-c-tree-view__node-toggle-icon--Transition); transform: rotate(var(--pf-v5-c-tree-view__node-toggle-icon--Rotate)); } :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tree-view__node-toggle-icon { scale: -1 1; } .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item { --pf-v5-c-tree-view__node-toggle-icon--Rotate: var(--pf-v5-c-tree-view__node-toggle-icon--base--Rotate); --pf-v5-c-tree-view__node-toggle--Color: var(--pf-v5-c-tree-view__node-toggle--Color--base); } .pf-v5-c-tree-view__list-item.pf-m-expanded { --pf-v5-c-tree-view__node-toggle--Color: var(--pf-v5-c-tree-view__list-item--m-expanded__node-toggle--Color); --pf-v5-c-tree-view__node-toggle-icon--Rotate: var(--pf-v5-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate); } .pf-v5-c-tree-view__node, .pf-v5-c-tree-view__node-container { flex: 1 1; align-items: flex-start; min-width: 0; text-align: start; cursor: pointer; border: 0; } .pf-v5-c-tree-view__node { position: relative; display: flex; padding-block-start: var(--pf-v5-c-tree-view__node--PaddingTop); padding-block-end: var(--pf-v5-c-tree-view__node--PaddingBottom); padding-inline-start: var(--pf-v5-c-tree-view__node--PaddingLeft); padding-inline-end: var(--pf-v5-c-tree-view__node--PaddingRight); color: var(--pf-v5-c-tree-view__node--Color); background-color: var(--pf-v5-c-tree-view__node--BackgroundColor); } .pf-v5-c-tree-view__node.pf-m-current { --pf-v5-c-tree-view__node--Color: var(--pf-v5-c-tree-view__node--m-current--Color); font-weight: var(--pf-v5-c-tree-view__node--m-current--FontWeight); } .pf-v5-c-tree-view__node:focus { --pf-v5-c-tree-view__node--BackgroundColor: var(--pf-v5-c-tree-view__node--focus--BackgroundColor); } .pf-v5-c-tree-view__node .pf-v5-c-tree-view__node-count { margin-inline-start: var(--pf-v5-c-tree-view__node-count--MarginLeft); } .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: var(--pf-v5-c-tree-view__node-count--c-badge--m-read--BackgroundColor); } .pf-v5-c-tree-view__node:not(.pf-m-selectable):hover, .pf-v5-c-tree-view__node.pf-m-selectable .pf-v5-c-tree-view__node-toggle:hover { --pf-v5-c-tree-view__node-toggle--Color: var(--pf-v5-c-tree-view__node-toggle--hover--Color); } .pf-v5-c-tree-view__node:not(.pf-m-selectable):focus, .pf-v5-c-tree-view__node.pf-m-selectable .pf-v5-c-tree-view__node-toggle:focus { --pf-v5-c-tree-view__node-toggle--Color: var(--pf-v5-c-tree-view__node-toggle--focus--Color); } .pf-v5-c-tree-view__node:not(.pf-m-selectable):active, .pf-v5-c-tree-view__node.pf-m-selectable .pf-v5-c-tree-view__node-toggle:active { --pf-v5-c-tree-view__node-toggle--Color: var(--pf-v5-c-tree-view__node-toggle--active--Color); } .pf-v5-c-tree-view__node-container { display: var(--pf-v5-c-tree-view__node-container--Display); flex-grow: 1; } .pf-v5-c-tree-view__node-content { display: flex; flex-direction: column; overflow: var(--pf-v5-c-tree-view__node-content--Overflow); } .pf-v5-c-tree-view__node-content > * + * { margin-block-start: var(--pf-v5-c-tree-view__node-content--RowGap); } .pf-v5-c-tree-view__node-check { margin-inline-end: var(--pf-v5-c-tree-view__node-check--MarginRight); } .pf-v5-c-tree-view__node-toggle { position: var(--pf-v5-c-tree-view__node-toggle--Position); inset-block-start: var(--pf-v5-c-tree-view__list-item__list-item__node-toggle--Top); inset-inline-start: var(--pf-v5-c-tree-view__list-item__list-item__node-toggle--Left); display: inline-flex; align-items: center; justify-content: center; padding-block-start: var(--pf-v5-c-tree-view__node-toggle-button--PaddingTop); padding-block-end: var(--pf-v5-c-tree-view__node-toggle-button--PaddingBottom); padding-inline-start: var(--pf-v5-c-tree-view__node-toggle-button--PaddingLeft); padding-inline-end: var(--pf-v5-c-tree-view__node-toggle-button--PaddingRight); margin-block-start: var(--pf-v5-c-tree-view__node-toggle-button--MarginTop); margin-block-end: var(--pf-v5-c-tree-view__node-toggle-button--MarginBottom); color: var(--pf-v5-c-tree-view__node-toggle--Color); background-color: var(--pf-v5-c-tree-view__node-toggle--BackgroundColor); border: 0; transform: translateX(var(--pf-v5-c-tree-view__list-item__list-item__node-toggle--TranslateX)); } :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tree-view__node-toggle { transform: translateX(calc(var(--pf-v5-c-tree-view__list-item__list-item__node-toggle--TranslateX) * var(--pf-v5-global--inverse--multiplier))); } .pf-v5-c-tree-view__node-title.pf-m-truncate, .pf-v5-c-tree-view__node-text.pf-m-truncate { --pf-v5-c-tree-view__node-content--Overflow: hidden; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pf-v5-c-tree-view.pf-m-truncate .pf-v5-c-tree-view__node-title, .pf-v5-c-tree-view.pf-m-truncate .pf-v5-c-tree-view__node-text { --pf-v5-c-tree-view__node-content--Overflow: hidden; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pf-v5-c-tree-view__node-text { font-weight: inherit; color: inherit; text-align: start; background-color: transparent; border: 0; } label.pf-v5-c-tree-view__node-text { cursor: pointer; } .pf-v5-c-tree-view__node-title { font-weight: var(--pf-v5-c-tree-view__node-title--FontWeight); } .pf-v5-c-tree-view__search { padding-block-start: var(--pf-v5-c-tree-view__search--PaddingTop); padding-block-end: var(--pf-v5-c-tree-view__search--PaddingBottom); padding-inline-start: var(--pf-v5-c-tree-view__search--PaddingLeft); padding-inline-end: var(--pf-v5-c-tree-view__search--PaddingRight); } .pf-v5-c-tree-view__node-icon { padding-inline-end: var(--pf-v5-c-tree-view__node-icon--PaddingRight); color: var(--pf-v5-c-tree-view__node-icon--Color); } .pf-v5-c-tree-view__content { display: flex; align-items: center; } .pf-v5-c-tree-view__content:hover, .pf-v5-c-tree-view__content:focus-within { background-color: var(--pf-v5-c-tree-view__node--hover--BackgroundColor); } .pf-v5-c-tree-view__action { margin-inline-start: var(--pf-v5-c-tree-view__action--MarginLeft); } .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: var(--pf-v5-c-tree-view__node--PaddingLeft); --pf-v5-c-tree-view__node--PaddingLeft: calc(var(--pf-v5-c-tree-view__node--nested-indent--base) * 1 + var(--pf-v5-c-tree-view__node--indent--base)); --pf-v5-c-tree-view--m-guides--border--nested--Left: calc(var(--pf-v5-c-tree-view__node--PaddingLeft) - var(--pf-v5-c-tree-view--m-guides--guide-left--base--offset)); } .pf-v5-c-tree-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: var(--pf-v5-c-tree-view__node--PaddingLeft); --pf-v5-c-tree-view__node--PaddingLeft: calc(var(--pf-v5-c-tree-view__node--nested-indent--base) * 2 + var(--pf-v5-c-tree-view__node--indent--base)); --pf-v5-c-tree-view--m-guides--border--nested--Left: calc(var(--pf-v5-c-tree-view__node--PaddingLeft) - var(--pf-v5-c-tree-view--m-guides--guide-left--base--offset)); --pf-v5-c-tree-view--m-compact__node--PaddingLeft: calc(var(--pf-v5-c-tree-view--m-compact__node--nested-indent--base) * 1 + var(--pf-v5-c-tree-view--m-compact__node--indent--base)); --pf-v5-c-tree-view--m-compact--border--nested--Left: calc(var(--pf-v5-c-tree-view__node--PaddingLeft) - var(--pf-v5-c-tree-view--m-compact--base-border--Left--offset)); --pf-v5-c-tree-view--m-compact--m-no-background__node--PaddingLeft: calc(var(--pf-v5-c-tree-view--m-compact--m-no-background__node--nested-indent--base) * 1 + var(--pf-v5-c-tree-view--m-compact--m-no-background__node--indent--base)); --pf-v5-c-tree-view--m-compact--m-no-background--border--nested--Left: calc(var(--pf-v5-c-tree-view__node--PaddingLeft) - var(--pf-v5-c-tree-view--m-compact--m-no-background--base-border--Left--offset)); } .pf-v5-c-tree-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: var(--pf-v5-c-tree-view__node--PaddingLeft); --pf-v5-c-tree-view__node--PaddingLeft: calc(var(--pf-v5-c-tree-view__node--nested-indent--base) * 3 + var(--pf-v5-c-tree-view__node--indent--base)); --pf-v5-c-tree-view--m-guides--border--nested--Left: calc(var(--pf-v5-c-tree-view__node--PaddingLeft) - var(--pf-v5-c-tree-view--m-guides--guide-left--base--offset)); --pf-v5-c-tree-view--m-compact__node--PaddingLeft: calc(var(--pf-v5-c-tree-view--m-compact__node--nested-indent--base) * 2 + var(--pf-v5-c-tree-view--m-compact__node--indent--base)); --pf-v5-c-tree-view--m-compact--border--nested--Left: calc(var(--pf-v5-c-tree-view__node--PaddingLeft) - var(--pf-v5-c-tree-view--m-compact--base-border--Left--offset)); --pf-v5-c-tree-view--m-compact--m-no-background__node--PaddingLeft: calc(var(--pf-v5-c-tree-view--m-compact--m-no-background__node--nested-indent--base) * 2 + var(--pf-v5-c-tree-view--m-compact--m-no-background__node--indent--base)); --pf-v5-c-tree-view--m-compact--m-no-background--border--nested--Left: calc(var(--pf-v5-c-tree-view__node--PaddingLeft) - var(--pf-v5-c-tree-view--m-compact--m-no-background--base-border--Left--offset)); } .pf-v5-c-tree-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: var(--pf-v5-c-tree-view__node--PaddingLeft); --pf-v5-c-tree-view__node--PaddingLeft: calc(var(--pf-v5-c-tree-view__node--nested-indent--base) * 4 + var(--pf-v5-c-tree-view__node--indent--base)); --pf-v5-c-tree-view--m-guides--border--nested--Left: calc(var(--pf-v5-c-tree-view__node--PaddingLeft) - var(--pf-v5-c-tree-view--m-guides--guide-left--base--offset)); --pf-v5-c-tree-view--m-compact__node--PaddingLeft: calc(var(--pf-v5-c-tree-view--m-compact__node--nested-indent--base) * 3 + var(--pf-v5-c-tree-view--m-compact__node--indent--base)); --pf-v5-c-tree-view--m-compact--border--nested--Left: calc(var(--pf-v5-c-tree-view__node--PaddingLeft) - var(--pf-v5-c-tree-view--m-compact--base-border--Left--offset)); --pf-v5-c-tree-view--m-compact--m-no-background__node--PaddingLeft: calc(var(--pf-v5-c-tree-view--m-compact--m-no-background__node--nested-indent--base) * 3 + var(--pf-v5-c-tree-view--m-compact--m-no-background__node--indent--base)); --pf-v5-c-tree-view--m-compact--m-no-background--border--nested--Left: calc(var(--pf-v5-c-tree-view__node--PaddingLeft) - var(--pf-v5-c-tree-view--m-compact--m-no-background--base-border--Left--offset)); } .pf-v5-c-tree-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: var(--pf-v5-c-tree-view__node--PaddingLeft); --pf-v5-c-tree-view__node--PaddingLeft: calc(var(--pf-v5-c-tree-view__node--nested-indent--base) * 5 + var(--pf-v5-c-tree-view__node--indent--base)); --pf-v5-c-tree-view--m-guides--border--nested--Left: calc(var(--pf-v5-c-tree-view__node--PaddingLeft) - var(--pf-v5-c-tree-view--m-guides--guide-left--base--offset)); --pf-v5-c-tree-view--m-compact__node--PaddingLeft: calc(var(--pf-v5-c-tree-view--m-compact__node--nested-indent--base) * 4 + var(--pf-v5-c-tree-view--m-compact__node--indent--base)); --pf-v5-c-tree-view--m-compact--border--nested--Left: calc(var(--pf-v5-c-tree-view__node--PaddingLeft) - var(--pf-v5-c-tree-view--m-compact--base-border--Left--offset)); --pf-v5-c-tree-view--m-compact--m-no-background__node--PaddingLeft: calc(var(--pf-v5-c-tree-view--m-compact--m-no-background__node--nested-indent--base) * 4 + var(--pf-v5-c-tree-view--m-compact--m-no-background__node--indent--base)); --pf-v5-c-tree-view--m-compact--m-no-background--border--nested--Left: calc(var(--pf-v5-c-tree-view__node--PaddingLeft) - var(--pf-v5-c-tree-view--m-compact--m-no-background--base-border--Left--offset)); } .pf-v5-c-tree-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: var(--pf-v5-c-tree-view__node--PaddingLeft); --pf-v5-c-tree-view__node--PaddingLeft: calc(var(--pf-v5-c-tree-view__node--nested-indent--base) * 6 + var(--pf-v5-c-tree-view__node--indent--base)); --pf-v5-c-tree-view--m-guides--border--nested--Left: calc(var(--pf-v5-c-tree-view__node--PaddingLeft) - var(--pf-v5-c-tree-view--m-guides--guide-left--base--offset)); --pf-v5-c-tree-view--m-compact__node--PaddingLeft: calc(var(--pf-v5-c-tree-view--m-compact__node--nested-indent--base) * 5 + var(--pf-v5-c-tree-view--m-compact__node--indent--base)); --pf-v5-c-tree-view--m-compact--border--nested--Left: calc(var(--pf-v5-c-tree-view__node--PaddingLeft) - var(--pf-v5-c-tree-view--m-compact--base-border--Left--offset)); --pf-v5-c-tree-view--m-compact--m-no-background__node--PaddingLeft: calc(var(--pf-v5-c-tree-view--m-compact--m-no-background__node--nested-indent--base) * 5 + var(--pf-v5-c-tree-view--m-compact--m-no-background__node--indent--base)); --pf-v5-c-tree-view--m-compact--m-no-background--border--nested--Left: calc(var(--pf-v5-c-tree-view__node--PaddingLeft) - var(--pf-v5-c-tree-view--m-compact--m-no-background--base-border--Left--offset)); } .pf-v5-c-tree-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: var(--pf-v5-c-tree-view__node--PaddingLeft); --pf-v5-c-tree-view__node--PaddingLeft: calc(var(--pf-v5-c-tree-view__node--nested-indent--base) * 7 + var(--pf-v5-c-tree-view__node--indent--base)); --pf-v5-c-tree-view--m-guides--border--nested--Left: calc(var(--pf-v5-c-tree-view__node--PaddingLeft) - var(--pf-v5-c-tree-view--m-guides--guide-left--base--offset)); --pf-v5-c-tree-view--m-compact__node--PaddingLeft: calc(var(--pf-v5-c-tree-view--m-compact__node--nested-indent--base) * 6 + var(--pf-v5-c-tree-view--m-compact__node--indent--base)); --pf-v5-c-tree-view--m-compact--border--nested--Left: calc(var(--pf-v5-c-tree-view__node--PaddingLeft) - var(--pf-v5-c-tree-view--m-compact--base-border--Left--offset)); --pf-v5-c-tree-view--m-compact--m-no-background__node--PaddingLeft: calc(var(--pf-v5-c-tree-view--m-compact--m-no-background__node--nested-indent--base) * 6 + var(--pf-v5-c-tree-view--m-compact--m-no-background__node--indent--base)); --pf-v5-c-tree-view--m-compact--m-no-background--border--nested--Left: calc(var(--pf-v5-c-tree-view__node--PaddingLeft) - var(--pf-v5-c-tree-view--m-compact--m-no-background--base-border--Left--offset)); } .pf-v5-c-tree-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: var(--pf-v5-c-tree-view__node--PaddingLeft); --pf-v5-c-tree-view__node--PaddingLeft: calc(var(--pf-v5-c-tree-view__node--nested-indent--base) * 8 + var(--pf-v5-c-tree-view__node--indent--base)); --pf-v5-c-tree-view--m-guides--border--nested--Left: calc(var(--pf-v5-c-tree-view__node--PaddingLeft) - var(--pf-v5-c-tree-view--m-guides--guide-left--base--offset)); --pf-v5-c-tree-view--m-compact__node--PaddingLeft: calc(var(--pf-v5-c-tree-view--m-compact__node--nested-indent--base) * 7 + var(--pf-v5-c-tree-view--m-compact__node--indent--base)); --pf-v5-c-tree-view--m-compact--border--nested--Left: calc(var(--pf-v5-c-tree-view__node--PaddingLeft) - var(--pf-v5-c-tree-view--m-compact--base-border--Left--offset)); --pf-v5-c-tree-view--m-compact--m-no-background__node--PaddingLeft: calc(var(--pf-v5-c-tree-view--m-compact--m-no-background__node--nested-indent--base) * 7 + var(--pf-v5-c-tree-view--m-compact--m-no-background__node--indent--base)); --pf-v5-c-tree-view--m-compact--m-no-background--border--nested--Left: calc(var(--pf-v5-c-tree-view__node--PaddingLeft) - var(--pf-v5-c-tree-view--m-compact--m-no-background--base-border--Left--offset)); } .pf-v5-c-tree-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: var(--pf-v5-c-tree-view__node--PaddingLeft); --pf-v5-c-tree-view__node--PaddingLeft: calc(var(--pf-v5-c-tree-view__node--nested-indent--base) * 9 + var(--pf-v5-c-tree-view__node--indent--base)); --pf-v5-c-tree-view--m-guides--border--nested--Left: calc(var(--pf-v5-c-tree-view__node--PaddingLeft) - var(--pf-v5-c-tree-view--m-guides--guide-left--base--offset)); --pf-v5-c-tree-view--m-compact__node--PaddingLeft: calc(var(--pf-v5-c-tree-view--m-compact__node--nested-indent--base) * 8 + var(--pf-v5-c-tree-view--m-compact__node--indent--base)); --pf-v5-c-tree-view--m-compact--border--nested--Left: calc(var(--pf-v5-c-tree-view__node--PaddingLeft) - var(--pf-v5-c-tree-view--m-compact--base-border--Left--offset)); --pf-v5-c-tree-view--m-compact--m-no-background__node--PaddingLeft: calc(var(--pf-v5-c-tree-view--m-compact--m-no-background__node--nested-indent--base) * 8 + var(--pf-v5-c-tree-view--m-compact--m-no-background__node--indent--base)); --pf-v5-c-tree-view--m-compact--m-no-background--border--nested--Left: calc(var(--pf-v5-c-tree-view__node--PaddingLeft) - var(--pf-v5-c-tree-view--m-compact--m-no-background--base-border--Left--offset)); } .pf-v5-c-tree-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: var(--pf-v5-c-tree-view__node--PaddingLeft); --pf-v5-c-tree-view__node--PaddingLeft: calc(var(--pf-v5-c-tree-view__node--nested-indent--base) * 10 + var(--pf-v5-c-tree-view__node--indent--base)); --pf-v5-c-tree-view--m-guides--border--nested--Left: calc(var(--pf-v5-c-tree-view__node--PaddingLeft) - var(--pf-v5-c-tree-view--m-guides--guide-left--base--offset)); --pf-v5-c-tree-view--m-compact__node--PaddingLeft: calc(var(--pf-v5-c-tree-view--m-compact__node--nested-indent--base) * 9 + var(--pf-v5-c-tree-view--m-compact__node--indent--base)); --pf-v5-c-tree-view--m-compact--border--nested--Left: calc(var(--pf-v5-c-tree-view__node--PaddingLeft) - var(--pf-v5-c-tree-view--m-compact--base-border--Left--offset)); --pf-v5-c-tree-view--m-compact--m-no-background__node--PaddingLeft: calc(var(--pf-v5-c-tree-view--m-compact--m-no-background__node--nested-indent--base) * 9 + var(--pf-v5-c-tree-view--m-compact--m-no-background__node--indent--base)); --pf-v5-c-tree-view--m-compact--m-no-background--border--nested--Left: calc(var(--pf-v5-c-tree-view__node--PaddingLeft) - var(--pf-v5-c-tree-view--m-compact--m-no-background--base-border--Left--offset)); } :where(.pf-v5-theme-dark) .pf-v5-c-tree-view { --pf-v5-c-tree-view__node--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--300); --pf-v5-c-tree-view__node--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--300); }