1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
body > .tree ul > li:first-child::before
top: 12px
li
.leaf
display: flex
flex-direction: row
.folder-icon
padding: 0 2 0 2
a.settings
cursor: pointer
display: block
padding: 0 2 0 2
text-decoration: none
visibility: hidden
z-index: 1
&:hover
a.settings
visibility: visible
.tree
margin-top: 20px
ul
li
position: relative
&::after
content: " "
height: 1px
position: absolute
top: 12px
&::before
bottom: -12px
content: " "
height: 7px
position: absolute
top: 5px
&:not(:first-child):last-child::before
display: none
&:only-child::before
bottom: 7px
content: " "
display: list-item
//height: 7px
position: absolute
width: 1px
top: 5px
&.with-children
&::after
background-color: #000
&::before
background-color: #000
.lefthanded
.leaf
justify-content : flex-end
ul
margin-right : 5px
li
margin-right: 10px
padding-right: 5px
&.with-children
&::after
right: -10px
width: 5px
&::before
right: -10px
width: 1px
&:only-child::before
//right: 1px
.righthanded
.leaf
justify-content : flex-start
ul
margin-left : 5px
li
margin-left: 10px
padding-left: 5px
&.with-children
&::after
left: -10px
width: 5px
&::before
left: -10px
width: 1px
&:only::before
background-color: #000
right: 10px
.file-dropped
background-color: #d8dfe5
.node-actions
padding-left: 5px
.update-button
&.enabled
cursor: pointer
&.disabled
cursor: wait
.node
margin-top: 1px
&.node-type-valid
.text
color: blue
text-decoration: underline
// based on https://codeburst.io/how-to-pure-css-pie-charts-w-css-variables-38287aea161e
.progress-pie
background: rgba(51, 122, 183, 0.1)
border-radius: 100%
height: calc(var(--size, 14) * 1px)
overflow: hidden
position: relative
width: calc(var(--size, 14) * 1px)
.progress-pie-segment
--a: calc(var(--over50, 0) * -100%)
--b: calc((1 + var(--over50, 0)) * 100%)
--degrees: calc((var(--offset, 0) / 100) * 360)
-webkit-clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b))
clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b))
height: 100%
position: absolute
transform: translate(0, -50%) rotate(90deg) rotate(calc(var(--degrees) * 1deg))
transform-origin: 50% 100%
width: 100%
z-index: calc(1 + var(--over50))
&:after,
&:before
background: var(--bg, rgb(51, 122, 183))
content: ''
height: 100%
position: absolute
width: 100%
&:before
--degrees: calc((var(--value, 45) / 100) * 360)
transform: translate(0, 100%) rotate(calc(var(--degrees) * 1deg))
transform-origin: 50% 0%
&:after
opacity: var(--over50, 0)
#node-popup-tooltip
.tree
.node
margin-top: 5px
.children
.node
padding-left: 15px