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 overflow-wrap: break-word; // Break words if overflowing 32 white-space: pre-wrap; 33 min-width: 0; // Allow column to shrink past content if container is thin 34 } 35 36 .pf-tree-gutter { 37 display: inline-flex; 38 position: relative; 39 width: 16px; 40 justify-content: center; 41 align-items: center; 42 } 43 44 &.pf-collapsed > .pf-tree-left > .pf-tree-gutter { 45 cursor: pointer; 46 47 &::after { 48 content: $chevron-svg; 49 } 50 } 51 &.pf-expanded > .pf-tree-left > .pf-tree-gutter { 52 cursor: pointer; 53 &::after { 54 content: $chevron-svg; 55 rotate: 90deg; 56 } 57 } 58 59 &.pf-loading > .pf-tree-left > .pf-tree-gutter { 60 &::after { 61 content: ""; 62 border: solid 1px lightgray; 63 border-top: solid 1px $pf-primary-background; 64 animation: pf-spinner-rotation 1s infinite linear; 65 width: 8px; 66 height: 8px; 67 border-radius: 50%; 68 } 69 } 70 .pf-tree-indent-gutter { 71 display: block; 72 position: relative; 73 } 74 75 &.pf-collapsed + .pf-tree-children { 76 display: none; 77 } 78 } 79 80 .pf-tree-children { 81 display: grid; 82 grid-column: 1 / span 2; 83 grid-template-columns: subgrid; 84 row-gap: 5px; 85 border-left: solid rgba(0, 0, 0, 0.2) 1px; 86 margin-left: 6px; 87 padding-left: 6px; 88 } 89} 90