1@import "theme"; 2 3$chevron-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='8' width='8'%3E%3Cline x1='2' y1='0' x2='6' y2='4' stroke='black'/%3E%3Cline x1='6' y1='4' x2='2' y2='8' stroke='black'/%3E%3C/svg%3E"); 4 5.pf-tree { 6 font-family: $pf-font; 7 display: grid; 8 grid-template-columns: [left]auto [right]1fr; 9 row-gap: 5px; 10 11 .pf-tree-node { 12 display: contents; 13 14 &:hover { 15 background: $table-hover-color; 16 } 17 18 .pf-tree-left { 19 grid-column: left; 20 background: inherit; 21 min-width: max-content; 22 border-radius: $pf-border-radius 0 0 $pf-border-radius; 23 font-weight: bolder; 24 } 25 26 .pf-tree-right { 27 grid-column: right; 28 background: inherit; 29 padding: 0 0 0 15px; 30 border-radius: 0 $pf-border-radius $pf-border-radius 0; 31 word-break: break-all; 32 white-space: pre-wrap; 33 } 34 35 .pf-tree-gutter { 36 display: inline-flex; 37 position: relative; 38 width: 16px; 39 justify-content: center; 40 align-items: center; 41 } 42 43 &.pf-collapsed > .pf-tree-left > .pf-tree-gutter { 44 cursor: pointer; 45 46 &::after { 47 content: $chevron-svg; 48 } 49 } 50 &.pf-expanded > .pf-tree-left > .pf-tree-gutter { 51 cursor: pointer; 52 &::after { 53 content: $chevron-svg; 54 rotate: 90deg; 55 } 56 } 57 58 &.pf-loading > .pf-tree-left > .pf-tree-gutter { 59 &::after { 60 content: ""; 61 border: solid 1px lightgray; 62 border-top: solid 1px $pf-primary-background; 63 animation: pf-spinner-rotation 1s infinite linear; 64 width: 8px; 65 height: 8px; 66 border-radius: 50%; 67 } 68 } 69 .pf-tree-indent-gutter { 70 display: block; 71 position: relative; 72 } 73 74 &.pf-collapsed + .pf-tree-children { 75 display: none; 76 } 77 } 78 79 .pf-tree-children { 80 display: grid; 81 grid-column: 1 / span 2; 82 grid-template-columns: subgrid; 83 row-gap: 5px; 84 border-left: solid rgba(0, 0, 0, 0.2) 1px; 85 margin-left: 6px; 86 padding-left: 6px; 87 } 88} 89