@patternfly/patternfly/components/TreeView/tree-view.css

Assets, source, tooling, and content for PatternFly 4

.pf-c-tree-view {
  --pf-c-tree-view--PaddingTop: var(--pf-global--spacer--sm);
  --pf-c-tree-view--PaddingBottom: var(--pf-global--spacer--sm);
  --pf-c-tree-view__node--indent--base: var(--pf-global--spacer--sm);
  --pf-c-tree-view__node--nested-indent--base: var(--pf-global--spacer--lg);
  --pf-c-tree-view__item--m-expandable__node--nested-indent--base: var(--pf-global--spacer--lg);
  --pf-c-tree-view__node--PaddingTop: var(--pf-global--spacer--sm);
  --pf-c-tree-view__node--PaddingRight: var(--pf-global--spacer--sm);
  --pf-c-tree-view__node--PaddingBottom: var(--pf-global--spacer--sm);
  --pf-c-tree-view__node--PaddingLeft: var(--pf-c-tree-view__node--indent--base);
  --pf-c-tree-view__node--Color: var(--pf-global--Color--100);
  --pf-c-tree-view__node--m-current--Color: var(--pf-global--link--Color);
  --pf-c-tree-view__node--m-current--FontWeight: var(--pf-global--FontWeight--bold);
  --pf-c-tree-view__node--m-active--FontWeight: var(--pf-global--FontWeight--bold);
  --pf-c-tree-view__node--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
  --pf-c-tree-view__node--focus--BackgroundColor: var(--pf-global--palette--black-200);
  --pf-c-tree-view__node-toggle-icon--PaddingRight: var(--pf-global--spacer--sm);
  --pf-c-tree-view__node-toggle-icon--MinWidth: var(--pf-global--spacer--lg);
  --pf-c-tree-view__node-toggle-icon--MinHeight: var(--pf-c-tree-view__node-toggle--icon--MinWidth);
  --pf-c-tree-view__node-check--MarginRight: var(--pf-global--spacer--sm);
  --pf-c-tree-view__node-count--MarginLeft: var(--pf-global--spacer--xs);
  --pf-c-tree-view__node-count--c-badge--m-read--BackgroundColor: var(--pf-global--disabled-color--200);
  --pf-c-tree-view__search--PaddingTop: var(--pf-global--spacer--sm);
  --pf-c-tree-view__search--PaddingRight: var(--pf-global--spacer--sm);
  --pf-c-tree-view__search--PaddingBottom: var(--pf-global--spacer--sm);
  --pf-c-tree-view__search--PaddingLeft: var(--pf-global--spacer--sm);
  --pf-c-tree-view__node-icon--PaddingRight: var(--pf-global--spacer--sm);
  --pf-c-tree-view__node-icon--Color: var(--pf-global--icon--Color--light);
  --pf-c-tree-view__node-text--max-lines: 1;
  --pf-c-tree-view__action--PaddingRight: var(--pf-global--spacer--md);
  --pf-c-tree-view__action--PaddingLeft: var(--pf-global--spacer--md);
  --pf-c-tree-view__action--Color: var(--pf-global--icon--Color--light);
  padding-top: var(--pf-c-tree-view--PaddingTop);
  padding-bottom: var(--pf-c-tree-view--PaddingBottom); }

.pf-c-tree-view__list-item.pf-m-expanded > .pf-c-tree-view__content > .pf-c-tree-view__node > .pf-c-tree-view__node-toggle-icon > i {
  transform: rotate(90deg); }

.pf-c-tree-view__node {
  display: flex;
  flex: 1 1;
  align-items: center;
  min-width: 0;
  padding: var(--pf-c-tree-view__node--PaddingTop) var(--pf-c-tree-view__node--PaddingRight) var(--pf-c-tree-view__node--PaddingBottom) var(--pf-c-tree-view__node--PaddingLeft);
  color: var(--pf-c-tree-view__node--Color);
  text-align: left;
  border: 0; }
  .pf-c-tree-view__node.pf-m-current {
    --pf-c-tree-view__node--Color: var(--pf-c-tree-view__node--m-current--Color);
    font-weight: var(--pf-c-tree-view__node--m-current--FontWeight); }
  .pf-c-tree-view__node.pf-m-active {
    font-weight: var(--pf-c-tree-view__node--m-active--FontWeight); }
  .pf-c-tree-view__node:focus {
    background-color: var(--pf-c-tree-view__node--focus--BackgroundColor); }
  .pf-c-tree-view__node .pf-c-tree-view__node-count {
    margin-left: var(--pf-c-tree-view__node-count--MarginLeft); }
    .pf-c-tree-view__node .pf-c-tree-view__node-count .pf-c-badge.pf-m-read {
      --pf-c-badge--m-read--BackgroundColor: var(--pf-c-tree-view__node-count--c-badge--m-read--BackgroundColor); }

.pf-c-tree-view__node-check {
  margin-right: var(--pf-c-tree-view__node-check--MarginRight); }

.pf-c-tree-view__node-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--pf-c-tree-view__node-toggle-icon--MinWidth);
  min-height: var(--pf-c-tree-view__node-toggle-icon--MinHeight);
  padding-right: var(--pf-c-tree-view__node-toggle-icon--PaddingRight); }

.pf-c-tree-view__node-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.pf-c-tree-view__search {
  padding: var(--pf-c-tree-view__search--PaddingTop) var(--pf-c-tree-view__search--PaddingRight) var(--pf-c-tree-view__search--PaddingBottom) var(--pf-c-tree-view__search--PaddingLeft); }

.pf-c-tree-view__node-icon {
  padding-right: var(--pf-c-tree-view__node-icon--PaddingRight);
  color: var(--pf-c-tree-view__node-icon--Color); }

.pf-c-tree-view__content {
  display: flex; }
  .pf-c-tree-view__content:hover {
    background-color: var(--pf-c-tree-view__node--hover--BackgroundColor); }
    .pf-c-tree-view__content:hover .pf-c-tree-view__action {
      display: block;
      visibility: visible; }

.pf-c-tree-view__action {
  display: none;
  padding-right: var(--pf-c-tree-view__action--PaddingRight);
  padding-left: var(--pf-c-tree-view__action--PaddingLeft);
  margin-left: auto;
  color: var(--pf-c-tree-view__action--Color);
  visibility: hidden;
  border: 0; }

.pf-c-tree-view__list-item .pf-c-tree-view__list-item {
  --pf-c-tree-view__node--PaddingLeft: calc(var(--pf-c-tree-view__node--indent--base) + (var(--pf-c-tree-view__node--nested-indent--base) * 1)); }

.pf-c-tree-view__list-item .pf-c-tree-view__list-item.pf-m-expandable {
  --pf-c-tree-view__node--PaddingLeft: calc(var(--pf-c-tree-view__node--indent--base) + (var(--pf-c-tree-view__item--m-expandable__node--nested-indent--base) * 1)); }

.pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
  --pf-c-tree-view__node--PaddingLeft: calc(var(--pf-c-tree-view__node--indent--base) + (var(--pf-c-tree-view__node--nested-indent--base) * 2)); }

.pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item.pf-m-expandable {
  --pf-c-tree-view__node--PaddingLeft: calc(var(--pf-c-tree-view__node--indent--base) + (var(--pf-c-tree-view__item--m-expandable__node--nested-indent--base) * 2)); }

.pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
  --pf-c-tree-view__node--PaddingLeft: calc(var(--pf-c-tree-view__node--indent--base) + (var(--pf-c-tree-view__node--nested-indent--base) * 3)); }

.pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item.pf-m-expandable {
  --pf-c-tree-view__node--PaddingLeft: calc(var(--pf-c-tree-view__node--indent--base) + (var(--pf-c-tree-view__item--m-expandable__node--nested-indent--base) * 3)); }

.pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
  --pf-c-tree-view__node--PaddingLeft: calc(var(--pf-c-tree-view__node--indent--base) + (var(--pf-c-tree-view__node--nested-indent--base) * 4)); }

.pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item.pf-m-expandable {
  --pf-c-tree-view__node--PaddingLeft: calc(var(--pf-c-tree-view__node--indent--base) + (var(--pf-c-tree-view__item--m-expandable__node--nested-indent--base) * 4)); }

.pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
  --pf-c-tree-view__node--PaddingLeft: calc(var(--pf-c-tree-view__node--indent--base) + (var(--pf-c-tree-view__node--nested-indent--base) * 5)); }

.pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item.pf-m-expandable {
  --pf-c-tree-view__node--PaddingLeft: calc(var(--pf-c-tree-view__node--indent--base) + (var(--pf-c-tree-view__item--m-expandable__node--nested-indent--base) * 5)); }

.pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
  --pf-c-tree-view__node--PaddingLeft: calc(var(--pf-c-tree-view__node--indent--base) + (var(--pf-c-tree-view__node--nested-indent--base) * 6)); }

.pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item.pf-m-expandable {
  --pf-c-tree-view__node--PaddingLeft: calc(var(--pf-c-tree-view__node--indent--base) + (var(--pf-c-tree-view__item--m-expandable__node--nested-indent--base) * 6)); }

.pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
  --pf-c-tree-view__node--PaddingLeft: calc(var(--pf-c-tree-view__node--indent--base) + (var(--pf-c-tree-view__node--nested-indent--base) * 7)); }

.pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item.pf-m-expandable {
  --pf-c-tree-view__node--PaddingLeft: calc(var(--pf-c-tree-view__node--indent--base) + (var(--pf-c-tree-view__item--m-expandable__node--nested-indent--base) * 7)); }

.pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
  --pf-c-tree-view__node--PaddingLeft: calc(var(--pf-c-tree-view__node--indent--base) + (var(--pf-c-tree-view__node--nested-indent--base) * 8)); }

.pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item.pf-m-expandable {
  --pf-c-tree-view__node--PaddingLeft: calc(var(--pf-c-tree-view__node--indent--base) + (var(--pf-c-tree-view__item--m-expandable__node--nested-indent--base) * 8)); }

.pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
  --pf-c-tree-view__node--PaddingLeft: calc(var(--pf-c-tree-view__node--indent--base) + (var(--pf-c-tree-view__node--nested-indent--base) * 9)); }

.pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item.pf-m-expandable {
  --pf-c-tree-view__node--PaddingLeft: calc(var(--pf-c-tree-view__node--indent--base) + (var(--pf-c-tree-view__item--m-expandable__node--nested-indent--base) * 9)); }

.pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
  --pf-c-tree-view__node--PaddingLeft: calc(var(--pf-c-tree-view__node--indent--base) + (var(--pf-c-tree-view__node--nested-indent--base) * 10)); }

.pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item.pf-m-expandable {
  --pf-c-tree-view__node--PaddingLeft: calc(var(--pf-c-tree-view__node--indent--base) + (var(--pf-c-tree-view__item--m-expandable__node--nested-indent--base) * 10)); }