Google Git
Sign in
flutter / third_party / perfetto / 1975c9c34df8c90e79b4818b047539b6dfb9cd02 / . / ui / src / assets / widgets / tree.scss
blob: 0f6604bf8eced38aac1bd93cac4e61a67c3ddcc8 [file] [log] [blame]
Steve Golton5af00a42023-03-17 10:45:54 +0000[diff] [blame]1@import "theme";
2
Steve Goltonca6f4312023-06-01 07:03:05 +0000[diff] [blame]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");
Steve Golton5af00a42023-03-17 10:45:54 +0000[diff] [blame]4
Steve Goltonca6f4312023-06-01 07:03:05 +0000[diff] [blame]5.pf-tree {
6 font-family: $pf-font;
Steve Golton07c523d2024-04-29 17:37:02 +0000[diff] [blame]7 display: grid;
8 grid-template-columns: [left]auto [right]1fr;
9 row-gap: 5px;
10
Steve Goltonca6f4312023-06-01 07:03:05 +0000[diff] [blame]11 .pf-tree-node {
12 display: contents;
Steve Golton07c523d2024-04-29 17:37:02 +0000[diff] [blame]13
14 &:hover {
15 background: $table-hover-color;
Steve Goltonca6f4312023-06-01 07:03:05 +0000[diff] [blame]16 }
Steve Golton07c523d2024-04-29 17:37:02 +0000[diff] [blame]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
Steve Goltonca6f4312023-06-01 07:03:05 +0000[diff] [blame]35 .pf-tree-gutter {
Steve Golton07c523d2024-04-29 17:37:02 +0000[diff] [blame]36 display: inline-flex;
Steve Goltonca6f4312023-06-01 07:03:05 +0000[diff] [blame]37 position: relative;
Steve Goltonca6f4312023-06-01 07:03:05 +0000[diff] [blame]38 width: 16px;
Steve Goltonca6f4312023-06-01 07:03:05 +0000[diff] [blame]39 justify-content: center;
40 align-items: center;
Steve Golton07c523d2024-04-29 17:37:02 +0000[diff] [blame]41 }
42
43 &.pf-collapsed > .pf-tree-left > .pf-tree-gutter {
44 cursor: pointer;
45
Steve Goltonca6f4312023-06-01 07:03:05 +0000[diff] [blame]46 &::after {
47 content: $chevron-svg;
48 }
49 }
Steve Golton07c523d2024-04-29 17:37:02 +0000[diff] [blame]50 &.pf-expanded > .pf-tree-left > .pf-tree-gutter {
Steve Goltonca6f4312023-06-01 07:03:05 +0000[diff] [blame]51 cursor: pointer;
Steve Goltonca6f4312023-06-01 07:03:05 +0000[diff] [blame]52 &::after {
53 content: $chevron-svg;
54 rotate: 90deg;
55 }
56 }
Steve Golton07c523d2024-04-29 17:37:02 +0000[diff] [blame]57
58 &.pf-loading > .pf-tree-left > .pf-tree-gutter {
Steve Goltonca6f4312023-06-01 07:03:05 +0000[diff] [blame]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 }
Steve Golton07c523d2024-04-29 17:37:02 +0000[diff] [blame]73
74 &.pf-collapsed + .pf-tree-children {
Steve Goltonca6f4312023-06-01 07:03:05 +0000[diff] [blame]75 display: none;
76 }
Steve Golton07c523d2024-04-29 17:37:02 +0000[diff] [blame]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;
Steve Goltonca6f4312023-06-01 07:03:05 +0000[diff] [blame]87 }
Steve Golton5af00a42023-03-17 10:45:54 +0000[diff] [blame]88}