wunderbaum 0.3.5 → 0.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/wunderbaum.css +382 -291
- package/dist/wunderbaum.css.map +1 -0
- package/dist/wunderbaum.d.ts +232 -107
- package/dist/wunderbaum.esm.js +635 -198
- package/dist/wunderbaum.esm.min.js +24 -24
- package/dist/wunderbaum.esm.min.js.map +1 -1
- package/dist/wunderbaum.umd.js +635 -198
- package/dist/wunderbaum.umd.min.js +31 -30
- package/dist/wunderbaum.umd.min.js.map +1 -1
- package/package.json +10 -9
- package/src/common.ts +44 -24
- package/src/types.ts +110 -28
- package/src/wb_ext_dnd.ts +63 -22
- package/src/wb_ext_edit.ts +2 -2
- package/src/wb_ext_filter.ts +1 -2
- package/src/wb_ext_keynav.ts +4 -4
- package/src/wb_node.ts +376 -96
- package/src/wb_options.ts +35 -8
- package/src/wunderbaum.scss +32 -15
- package/src/wunderbaum.ts +150 -53
package/dist/wunderbaum.css
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
|
+
@charset "UTF-8";
|
|
1
2
|
/*!
|
|
2
3
|
* Wunderbaum style sheet (generated from wunderbaum.scss)
|
|
3
4
|
* Copyright (c) 2021-2023, Martin Wendt. Released under the MIT license.
|
|
4
|
-
*
|
|
5
|
+
* @VERSION, @DATE (https://github.com/mar10/wunderbaum)
|
|
5
6
|
*/
|
|
6
|
-
:root
|
|
7
|
+
:root,
|
|
8
|
+
:host {
|
|
7
9
|
--wb-font-stack: Helvetica, sans-serif;
|
|
8
10
|
--wb-error-color: #b5373b;
|
|
9
11
|
--wb-node-text-color: #56534c;
|
|
@@ -45,10 +47,12 @@
|
|
|
45
47
|
--wb-icon-width: 16px;
|
|
46
48
|
--wb-icon-padding-y: 2px;
|
|
47
49
|
--wb-icon-padding-x: 2px;
|
|
48
|
-
--wb-header-height: 22px;
|
|
50
|
+
--wb-header-height: 22px;
|
|
51
|
+
}
|
|
49
52
|
|
|
50
53
|
div.wunderbaum * {
|
|
51
|
-
box-sizing: border-box;
|
|
54
|
+
box-sizing: border-box;
|
|
55
|
+
}
|
|
52
56
|
|
|
53
57
|
div.wunderbaum {
|
|
54
58
|
height: 100%;
|
|
@@ -73,336 +77,423 @@ div.wunderbaum {
|
|
|
73
77
|
/* Colorize indentation levels. */
|
|
74
78
|
/* Fade out expanders, when container is not hovered or active */
|
|
75
79
|
/* Skeleton */
|
|
76
|
-
/* Auto-hide checkboxes unless selected or hovered */
|
|
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
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
80
|
+
/* Auto-hide checkboxes unless selected or hovered */
|
|
81
|
+
}
|
|
82
|
+
div.wunderbaum:focus, div.wunderbaum:focus-within {
|
|
83
|
+
border-color: var(--wb-focus-border-color);
|
|
84
|
+
}
|
|
85
|
+
div.wunderbaum.wb-disabled {
|
|
86
|
+
opacity: 0.7;
|
|
87
|
+
pointer-events: none;
|
|
88
|
+
}
|
|
89
|
+
div.wunderbaum div.wb-list-container {
|
|
90
|
+
position: relative;
|
|
91
|
+
min-height: 4px;
|
|
92
|
+
}
|
|
93
|
+
div.wunderbaum div.wb-header {
|
|
94
|
+
position: sticky;
|
|
95
|
+
top: 0;
|
|
96
|
+
z-index: 2;
|
|
97
|
+
}
|
|
98
|
+
div.wunderbaum div.wb-header,
|
|
99
|
+
div.wunderbaum div.wb-list-container {
|
|
100
|
+
overflow: unset;
|
|
101
|
+
}
|
|
102
|
+
div.wunderbaum div.wb-row {
|
|
103
|
+
position: absolute;
|
|
104
|
+
width: 100%;
|
|
105
|
+
height: var(--wb-row-outer-height);
|
|
106
|
+
line-height: var(--wb-row-outer-height);
|
|
107
|
+
border: 1px solid transparent;
|
|
108
|
+
}
|
|
109
|
+
div.wunderbaum.wb-fixed-col span.wb-col:first-of-type {
|
|
110
|
+
position: sticky;
|
|
111
|
+
left: 0;
|
|
112
|
+
z-index: 1;
|
|
113
|
+
background-color: var(--wb-background-color);
|
|
114
|
+
}
|
|
115
|
+
div.wunderbaum.wb-fixed-col div.wb-header span.wb-col:first-of-type {
|
|
116
|
+
background-color: var(--wb-header-color);
|
|
117
|
+
}
|
|
118
|
+
div.wunderbaum.wb-fixed-col div.wb-node-list div.wb-row.wb-active span.wb-col:first-of-type, div.wunderbaum.wb-fixed-col div.wb-node-list div.wb-row.wb-selected span.wb-col:first-of-type {
|
|
119
|
+
background-color: var(--wb-active-color);
|
|
120
|
+
}
|
|
121
|
+
div.wunderbaum.wb-fixed-col div.wb-node-list div.wb-row.wb-active:hover span.wb-col:first-of-type, div.wunderbaum.wb-fixed-col div.wb-node-list div.wb-row.wb-selected:hover span.wb-col:first-of-type {
|
|
122
|
+
background-color: var(--wb-active-hover-color);
|
|
123
|
+
}
|
|
124
|
+
div.wunderbaum.wb-fixed-col div.wb-node-list div.wb-row:hover span.wb-col:first-of-type {
|
|
125
|
+
background-color: var(--wb-hover-color);
|
|
126
|
+
}
|
|
127
|
+
div.wunderbaum.wb-fixed-col:not(:focus-within) div.wb-node-list div.wb-row.wb-active span.wb-col:first-of-type, div.wunderbaum.wb-fixed-col:not(:focus-within) div.wb-node-list div.wb-row.wb-selected span.wb-col:first-of-type, div.wunderbaum.wb-fixed-col:not(:focus) div.wb-node-list div.wb-row.wb-active span.wb-col:first-of-type, div.wunderbaum.wb-fixed-col:not(:focus) div.wb-node-list div.wb-row.wb-selected span.wb-col:first-of-type {
|
|
128
|
+
background-color: var(--wb-active-color-grayscale);
|
|
129
|
+
border-color: var(--wb-active-border-color-grayscale);
|
|
130
|
+
}
|
|
131
|
+
div.wunderbaum.wb-fixed-col:not(:focus-within) div.wb-node-list div.wb-row.wb-active span.wb-col:first-of-type:hover span.wb-col:first-of-type, div.wunderbaum.wb-fixed-col:not(:focus-within) div.wb-node-list div.wb-row.wb-selected span.wb-col:first-of-type:hover span.wb-col:first-of-type, div.wunderbaum.wb-fixed-col:not(:focus) div.wb-node-list div.wb-row.wb-active span.wb-col:first-of-type:hover span.wb-col:first-of-type, div.wunderbaum.wb-fixed-col:not(:focus) div.wb-node-list div.wb-row.wb-selected span.wb-col:first-of-type:hover span.wb-col:first-of-type {
|
|
132
|
+
background-color: var(--wb-active-hover-color-grayscale);
|
|
133
|
+
}
|
|
134
|
+
div.wunderbaum:not(:focus-within) div.wb-node-list div.wb-row.wb-active, div.wunderbaum:not(:focus-within) div.wb-node-list div.wb-row.wb-selected, div.wunderbaum:not(:focus) div.wb-node-list div.wb-row.wb-active, div.wunderbaum:not(:focus) div.wb-node-list div.wb-row.wb-selected {
|
|
135
|
+
background-color: var(--wb-active-color-grayscale);
|
|
136
|
+
border-color: var(--wb-active-border-color-grayscale);
|
|
137
|
+
}
|
|
138
|
+
div.wunderbaum:not(:focus-within) div.wb-node-list div.wb-row.wb-active:hover, div.wunderbaum:not(:focus-within) div.wb-node-list div.wb-row.wb-selected:hover, div.wunderbaum:not(:focus) div.wb-node-list div.wb-row.wb-active:hover, div.wunderbaum:not(:focus) div.wb-node-list div.wb-row.wb-selected:hover {
|
|
139
|
+
background-color: var(--wb-active-hover-color-grayscale);
|
|
140
|
+
}
|
|
141
|
+
div.wunderbaum.wb-alternate div.wb-node-list div.wb-row:nth-of-type(even):not(.wb-active):not(.wb-selected) {
|
|
142
|
+
background-color: var(--wb-alternate-row-color);
|
|
143
|
+
}
|
|
144
|
+
div.wunderbaum.wb-alternate div.wb-node-list div.wb-row:nth-of-type(even):not(.wb-active):not(.wb-selected):hover {
|
|
145
|
+
background-color: var(--wb-alternate-row-color-hover);
|
|
146
|
+
}
|
|
147
|
+
div.wunderbaum div.wb-node-list div.wb-row:hover {
|
|
148
|
+
background-color: var(--wb-hover-color);
|
|
149
|
+
}
|
|
150
|
+
div.wunderbaum div.wb-node-list div.wb-row.wb-active, div.wunderbaum div.wb-node-list div.wb-row.wb-selected {
|
|
151
|
+
background-color: var(--wb-active-color);
|
|
152
|
+
}
|
|
153
|
+
div.wunderbaum div.wb-node-list div.wb-row.wb-active:hover, div.wunderbaum div.wb-node-list div.wb-row.wb-selected:hover {
|
|
154
|
+
background-color: var(--wb-active-hover-color);
|
|
155
|
+
}
|
|
156
|
+
div.wunderbaum div.wb-node-list div.wb-row.wb-focus:not(.wb-active) {
|
|
157
|
+
border-style: dotted;
|
|
158
|
+
border-color: var(--wb-active-border-color);
|
|
159
|
+
}
|
|
160
|
+
div.wunderbaum div.wb-node-list div.wb-row.wb-active {
|
|
161
|
+
border-style: solid;
|
|
162
|
+
border-color: var(--wb-active-border-color);
|
|
163
|
+
}
|
|
164
|
+
div.wunderbaum div.wb-node-list div.wb-row.wb-active:hover {
|
|
165
|
+
border-color: var(--wb-active-hover-border-color);
|
|
166
|
+
}
|
|
167
|
+
div.wunderbaum div.wb-node-list div.wb-row.wb-loading {
|
|
168
|
+
font-style: italic;
|
|
169
|
+
}
|
|
170
|
+
div.wunderbaum div.wb-node-list div.wb-row.wb-busy,
|
|
171
|
+
div.wunderbaum div.wb-node-list div.wb-row i.wb-busy,
|
|
172
|
+
div.wunderbaum div.wb-node-list div.wb-row .wb-col.wb-busy {
|
|
173
|
+
font-style: italic;
|
|
174
|
+
background: repeating-linear-gradient(45deg, transparent, transparent 3.88px, var(--wb-grid-color) 3.88px, var(--wb-grid-color) 7.78px);
|
|
175
|
+
animation: wb-busy-animation 2s linear infinite;
|
|
176
|
+
}
|
|
177
|
+
div.wunderbaum div.wb-node-list div.wb-row.wb-error, div.wunderbaum div.wb-node-list div.wb-row.wb-status-error {
|
|
178
|
+
color: var(--wb-error-color);
|
|
179
|
+
}
|
|
180
|
+
div.wunderbaum div.wb-header {
|
|
181
|
+
position: sticky;
|
|
182
|
+
height: var(--wb-header-height);
|
|
183
|
+
border-bottom: 1px solid var(--wb-border-color);
|
|
184
|
+
padding: 0;
|
|
185
|
+
background-color: var(--wb-header-color);
|
|
186
|
+
}
|
|
187
|
+
div.wunderbaum div.wb-header span.wb-col {
|
|
188
|
+
font-weight: bold;
|
|
189
|
+
overflow: visible;
|
|
190
|
+
}
|
|
191
|
+
div.wunderbaum div.wb-header span.wb-col-title {
|
|
192
|
+
width: 100%;
|
|
193
|
+
overflow: hidden;
|
|
194
|
+
white-space: nowrap;
|
|
195
|
+
text-overflow: ellipsis;
|
|
196
|
+
}
|
|
197
|
+
div.wunderbaum div.wb-header span.wb-col-resizer {
|
|
198
|
+
position: absolute;
|
|
199
|
+
top: 0;
|
|
200
|
+
right: -1px;
|
|
201
|
+
width: 3px;
|
|
202
|
+
border: none;
|
|
203
|
+
border-right: 2px solid var(--wb-border-color);
|
|
204
|
+
height: 100%;
|
|
205
|
+
cursor: col-resize;
|
|
206
|
+
}
|
|
207
|
+
div.wunderbaum span.wb-col {
|
|
208
|
+
position: absolute;
|
|
209
|
+
display: inline-block;
|
|
210
|
+
overflow: hidden;
|
|
211
|
+
height: var(--wb-row-inner-height);
|
|
212
|
+
line-height: var(--wb-row-inner-height);
|
|
213
|
+
padding: 0 val(--wb-col-padding-x);
|
|
214
|
+
border-right: 1px solid var(--wb-grid-color);
|
|
215
|
+
white-space: nowrap;
|
|
216
|
+
}
|
|
217
|
+
div.wunderbaum span.wb-col:last-of-type {
|
|
218
|
+
border-right: none;
|
|
219
|
+
}
|
|
220
|
+
div.wunderbaum span.wb-node {
|
|
221
|
+
user-select: none;
|
|
222
|
+
/* Fix Bootstrap Icon alignment */
|
|
223
|
+
}
|
|
224
|
+
div.wunderbaum span.wb-node i.wb-checkbox,
|
|
225
|
+
div.wunderbaum span.wb-node i.wb-expander,
|
|
226
|
+
div.wunderbaum span.wb-node i.wb-icon,
|
|
227
|
+
div.wunderbaum span.wb-node i.wb-indent {
|
|
228
|
+
height: var(--wb-icon-outer-height);
|
|
229
|
+
width: var(--wb-icon-outer-width);
|
|
230
|
+
padding: var(--wb-icon-padding) var(--wb-icon-padding-x);
|
|
231
|
+
display: inline-block;
|
|
232
|
+
}
|
|
233
|
+
div.wunderbaum span.wb-node i.bi::before {
|
|
234
|
+
vertical-align: baseline;
|
|
235
|
+
}
|
|
236
|
+
div.wunderbaum span.wb-node img.wb-icon {
|
|
237
|
+
width: var(--wb-icon-width);
|
|
238
|
+
height: var(--wb-icon-height);
|
|
239
|
+
padding: var(--wb-icon-padding-y) var(--wb-icon-padding-x);
|
|
240
|
+
}
|
|
241
|
+
div.wunderbaum span.wb-node i.wb-indent::before {
|
|
242
|
+
content: " ";
|
|
243
|
+
}
|
|
244
|
+
div.wunderbaum span.wb-node i.wb-expander.wb-spin,
|
|
245
|
+
div.wunderbaum span.wb-node i.wb-icon.wb-spin {
|
|
246
|
+
height: unset;
|
|
247
|
+
width: unset;
|
|
248
|
+
padding: 0 3px;
|
|
249
|
+
animation: wb-spin-animation 2s linear infinite;
|
|
250
|
+
}
|
|
251
|
+
div.wunderbaum span.wb-node span.wb-title {
|
|
252
|
+
min-width: 1em;
|
|
253
|
+
vertical-align: top;
|
|
254
|
+
overflow-x: hidden;
|
|
255
|
+
display: inline-block;
|
|
256
|
+
white-space: nowrap;
|
|
257
|
+
text-overflow: ellipsis;
|
|
258
|
+
}
|
|
259
|
+
div.wunderbaum.wb-grid div.wb-header div.wb-row span.wb-col:hover {
|
|
260
|
+
background-color: var(--wb-active-header-column-color);
|
|
261
|
+
}
|
|
262
|
+
div.wunderbaum.wb-grid.wb-cell-mode div.wb-header div.wb-row span.wb-col.wb-active {
|
|
263
|
+
background-color: var(--wb-active-hover-color);
|
|
264
|
+
}
|
|
265
|
+
div.wunderbaum.wb-grid div.wb-node-list div.wb-row {
|
|
266
|
+
border-bottom-color: var(--wb-grid-color);
|
|
267
|
+
}
|
|
268
|
+
div.wunderbaum.wb-grid div.wb-node-list div.wb-row:hover:not(.wb-active):not(.wb-selected) {
|
|
269
|
+
background-color: var(--wb-hover-color);
|
|
270
|
+
}
|
|
271
|
+
div.wunderbaum.wb-grid div.wb-node-list div.wb-row.wb-active {
|
|
272
|
+
border-bottom-color: var(--wb-active-border-color);
|
|
273
|
+
}
|
|
274
|
+
div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col {
|
|
275
|
+
border-right: 1px solid var(--wb-grid-color);
|
|
276
|
+
}
|
|
277
|
+
div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col input.wb-input-edit,
|
|
278
|
+
div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type=color],
|
|
279
|
+
div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type=date],
|
|
280
|
+
div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type=datetime],
|
|
281
|
+
div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type=datetime-local],
|
|
282
|
+
div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type=email],
|
|
283
|
+
div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type=month],
|
|
284
|
+
div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type=number],
|
|
285
|
+
div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type=password],
|
|
286
|
+
div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type=search],
|
|
287
|
+
div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type=tel],
|
|
288
|
+
div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type=text],
|
|
289
|
+
div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type=time],
|
|
290
|
+
div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type=url],
|
|
291
|
+
div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type=week],
|
|
292
|
+
div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > select {
|
|
293
|
+
width: 100%;
|
|
294
|
+
max-height: var(--wb-row-inner-height);
|
|
295
|
+
border: none;
|
|
296
|
+
}
|
|
297
|
+
div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input:focus,
|
|
298
|
+
div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > select:focus {
|
|
299
|
+
border: 1px dashed #70c0e7;
|
|
300
|
+
}
|
|
301
|
+
div.wunderbaum.wb-grid.wb-cell-mode div.wb-row:not(.wb-colspan).wb-active span.wb-col.wb-active {
|
|
302
|
+
background-color: var(--wb-active-cell-color-grayscale);
|
|
303
|
+
}
|
|
304
|
+
div.wunderbaum.wb-grid.wb-cell-mode:focus-within div.wb-row:not(.wb-colspan):not(.wb-selected) span.wb-col.wb-active, div.wunderbaum.wb-grid.wb-cell-mode:focus div.wb-row:not(.wb-colspan):not(.wb-selected) span.wb-col.wb-active {
|
|
305
|
+
background-color: var(--wb-active-column-color);
|
|
306
|
+
}
|
|
307
|
+
div.wunderbaum.wb-grid.wb-cell-mode:focus-within div.wb-row:not(.wb-colspan):not(.wb-selected).wb-active, div.wunderbaum.wb-grid.wb-cell-mode:focus div.wb-row:not(.wb-colspan):not(.wb-selected).wb-active {
|
|
308
|
+
background-color: var(--wb-active-column-color);
|
|
309
|
+
}
|
|
310
|
+
div.wunderbaum.wb-grid.wb-cell-mode:focus-within div.wb-row:not(.wb-colspan):not(.wb-selected).wb-active span.wb-col.wb-active, div.wunderbaum.wb-grid.wb-cell-mode:focus div.wb-row:not(.wb-colspan):not(.wb-selected).wb-active span.wb-col.wb-active {
|
|
311
|
+
background-color: var(--wb-active-cell-color);
|
|
312
|
+
}
|
|
313
|
+
div.wunderbaum.wb-grid.wb-alternate div.wb-node-list div.wb-row:nth-of-type(even):not(.wb-active):not(.wb-selected) {
|
|
314
|
+
background-color: var(--wb-alternate-row-color);
|
|
315
|
+
}
|
|
316
|
+
div.wunderbaum.wb-grid.wb-alternate div.wb-node-list div.wb-row:nth-of-type(even):not(.wb-active):not(.wb-selected):hover {
|
|
317
|
+
background-color: var(--wb-alternate-row-color-hover);
|
|
318
|
+
}
|
|
319
|
+
div.wunderbaum.wb-grid:not(:focus-within) div.wb-node-list div.wb-row, div.wunderbaum.wb-grid:not(:focus) div.wb-node-list div.wb-row {
|
|
320
|
+
border-bottom-color: var(--wb-grid-color-grayscale);
|
|
321
|
+
}
|
|
322
|
+
div.wunderbaum.wb-ext-filter-dim div.wb-node-list div.wb-row, div.wunderbaum.wb-ext-filter-hide div.wb-node-list div.wb-row {
|
|
323
|
+
color: var(--wb-filter-dim-color);
|
|
324
|
+
}
|
|
325
|
+
div.wunderbaum.wb-ext-filter-dim div.wb-node-list div.wb-row.wb-submatch, div.wunderbaum.wb-ext-filter-hide div.wb-node-list div.wb-row.wb-submatch {
|
|
326
|
+
color: var(--wb-filter-submatch-color);
|
|
327
|
+
}
|
|
328
|
+
div.wunderbaum.wb-ext-filter-dim div.wb-node-list div.wb-row.wb-match, div.wunderbaum.wb-ext-filter-hide div.wb-node-list div.wb-row.wb-match {
|
|
329
|
+
color: var(--wb-node-text-color);
|
|
330
|
+
}
|
|
331
|
+
div.wunderbaum div.wb-row.wb-drag-source {
|
|
332
|
+
opacity: 0.5;
|
|
333
|
+
}
|
|
334
|
+
div.wunderbaum div.wb-row.wb-drag-source .wb-node {
|
|
335
|
+
background-color: var(--wb-drop-source-color);
|
|
336
|
+
}
|
|
337
|
+
div.wunderbaum div.wb-row.wb-drop-target {
|
|
338
|
+
overflow: visible;
|
|
339
|
+
}
|
|
340
|
+
div.wunderbaum div.wb-row.wb-drop-target .wb-node {
|
|
341
|
+
background-color: var(--wb-drop-target-color);
|
|
342
|
+
overflow: visible;
|
|
343
|
+
}
|
|
344
|
+
div.wunderbaum div.wb-row.wb-drop-target .wb-node .wb-icon {
|
|
345
|
+
position: relative;
|
|
346
|
+
overflow: visible;
|
|
347
|
+
}
|
|
348
|
+
div.wunderbaum div.wb-row.wb-drop-target .wb-node .wb-icon::after {
|
|
349
|
+
position: absolute;
|
|
350
|
+
z-index: 1000;
|
|
351
|
+
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAQCAMAAABA3o1rAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACKUExURe/v9/f39+//7+f35+f/79bW5wgIawwYd97e55Tnpc731rjA2d7350LOY1LWa7Xvvf///wAQcyAze97e773vxnuczgA5pQBCpdb33rXvxu//9whjxgBaxlKU1oOz5ABz3gB73tbn99bW1rXe/wCM9xiU997v/97e3gCc/xil/9bv/wic/+/3/wAAALM9X5QAAAAudFJOU////////////////////////////////////////////////////////////wCCj3NVAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAqUlEQVQoU6WQ2w6CMAxA54agsCHq1HlFBREv/f/fs1tHAoaoiedlbXrWtGXwhV8FNqAXuAi4DwkShmE0cgGIcSwCCgkSkrAxpEonot0DhQxJptFsbnOpdNdgsFh6VtYwyqzTmG+oijDY7hr22E4qY7QybeGQe46nsxP0Wwc3Q1GWl+qKec8MlqKubxX+xzV7tkDuD1+3d+heigT2zGx/hCMUeUj4wL8CwAsW1kqCTugMCwAAAABJRU5ErkJggg==);
|
|
352
|
+
left: 0;
|
|
353
|
+
top: calc((22px - --wb-icon-height) / 2);
|
|
354
|
+
}
|
|
355
|
+
div.wunderbaum div.wb-row.wb-drop-target.wb-drop-before .wb-node .wb-icon::after,
|
|
356
|
+
div.wunderbaum div.wb-row.wb-drop-target.wb-drop-after .wb-node .wb-icon::after {
|
|
357
|
+
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAQCAMAAACROYkbAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACNUExURe/v9/f39+//7+f35+f/79bW5wgIawwYd97e55Tnpc731rjA2d7350LOY1LWa7Xvvf///wAQcyAze97e773vxgAAAHuczgA5pQBCpdb33rXvxu//9whjxgBaxlKU1oOz5ABz3gB73tbn99bW1rXe/wCM9xiU997v/97e3gCc/xil/9bv/wic/+/3/wAAAParqS4AAAAvdFJOU/////////////////////////////////////////////////////////////8AWqU49wAAAAlwSFlzAAAOwwAADsMBx2+oZAAAALlJREFUOE/FktsSgiAQhglMS8WstKLzQTM77Ps/XguL16I208cFyzB8/LPAYCC/ErARzcCFx23pBgnGfjAxBYhpKDwq3SBB5DeGWCYz0SUDClIkmgeLpV7HMiNDbrbbYbBaWzbaoKTaJiHfQe5oYLA/NBwxTiyVyqTSghYwox4MTmfL5XozgqxjAtODoizv1QPXPXqgKer6WeH9+Iw9XgF5ve15/Q+6/SQSsE+q8yMcocoREgzg3wKAL4vrpBIKREShAAAAAElFTkSuQmCC);
|
|
358
|
+
left: 0;
|
|
359
|
+
top: calc((22px - --wb-icon-height) / 2 - 11px);
|
|
360
|
+
}
|
|
361
|
+
div.wunderbaum div.wb-row.wb-drop-target.wb-drop-after .wb-node .wb-icon::after {
|
|
362
|
+
top: calc((22px - --wb-icon-height) / 2 + 11px);
|
|
363
|
+
}
|
|
364
|
+
div.wunderbaum.wb-rainbow i.wb-expander:nth-child(4n+1),
|
|
365
|
+
div.wunderbaum.wb-rainbow i.wb-indent:nth-child(4n+1) {
|
|
366
|
+
background: rgb(255, 255, 201);
|
|
367
|
+
}
|
|
368
|
+
div.wunderbaum.wb-rainbow i.wb-expander:nth-child(4n+2),
|
|
369
|
+
div.wunderbaum.wb-rainbow i.wb-indent:nth-child(4n+2) {
|
|
370
|
+
background: rgb(218, 255, 218);
|
|
371
|
+
}
|
|
372
|
+
div.wunderbaum.wb-rainbow i.wb-expander:nth-child(4n+3),
|
|
373
|
+
div.wunderbaum.wb-rainbow i.wb-indent:nth-child(4n+3) {
|
|
374
|
+
background: rgb(255, 217, 254);
|
|
375
|
+
}
|
|
376
|
+
div.wunderbaum.wb-rainbow i.wb-expander:nth-child(4n+4),
|
|
377
|
+
div.wunderbaum.wb-rainbow i.wb-indent:nth-child(4n+4) {
|
|
378
|
+
background: rgb(204, 250, 250);
|
|
379
|
+
}
|
|
380
|
+
div.wunderbaum.wb-fade-expander i.wb-expander {
|
|
381
|
+
transition: color 1.5s;
|
|
382
|
+
color: rgba(86, 83, 76, 0);
|
|
383
|
+
}
|
|
384
|
+
div.wunderbaum.wb-fade-expander div.wb-row.wb-loading i.wb-expander, div.wunderbaum.wb-fade-expander:hover i.wb-expander, div.wunderbaum.wb-fade-expander:focus i.wb-expander, div.wunderbaum.wb-fade-expander:focus-within i.wb-expander,
|
|
385
|
+
div.wunderbaum.wb-fade-expander [class*=wb-statusnode-] i.wb-expander {
|
|
386
|
+
transition: color 0.6s;
|
|
387
|
+
color: var(--wb-node-text-color);
|
|
388
|
+
}
|
|
389
|
+
div.wunderbaum div.wb-row.wb-skeleton span.wb-title,
|
|
390
|
+
div.wunderbaum div.wb-row.wb-skeleton i.wb-icon {
|
|
391
|
+
animation: wb-skeleton-animation 1s linear infinite alternate;
|
|
392
|
+
border-radius: 0.25em;
|
|
393
|
+
color: transparent;
|
|
394
|
+
opacity: 0.7;
|
|
395
|
+
}
|
|
396
|
+
div.wunderbaum.wb-checkbox-auto-hide i.wb-checkbox {
|
|
397
|
+
visibility: hidden;
|
|
398
|
+
}
|
|
399
|
+
div.wunderbaum.wb-checkbox-auto-hide .wb-row:hover i.wb-checkbox,
|
|
400
|
+
div.wunderbaum.wb-checkbox-auto-hide .wb-row.wb-selected i.wb-checkbox {
|
|
401
|
+
visibility: unset;
|
|
402
|
+
}
|
|
403
|
+
div.wunderbaum.wb-checkbox-auto-hide:focus .wb-row.wb-active i.wb-checkbox, div.wunderbaum.wb-checkbox-auto-hide:focus-within .wb-row.wb-active i.wb-checkbox {
|
|
404
|
+
visibility: unset;
|
|
405
|
+
}
|
|
337
406
|
|
|
338
407
|
/* --- TOOL CLASSES --- */
|
|
339
408
|
.wb-helper-center {
|
|
340
|
-
text-align: center;
|
|
409
|
+
text-align: center;
|
|
410
|
+
}
|
|
341
411
|
|
|
342
412
|
.wb-helper-disabled {
|
|
343
|
-
color: var(--wb-dim-color);
|
|
413
|
+
color: var(--wb-dim-color);
|
|
414
|
+
}
|
|
344
415
|
|
|
345
416
|
.wb-helper-hidden {
|
|
346
|
-
display: none;
|
|
417
|
+
display: none;
|
|
418
|
+
}
|
|
347
419
|
|
|
348
420
|
.wb-helper-invalid {
|
|
349
|
-
color: var(--wb-error-color);
|
|
421
|
+
color: var(--wb-error-color);
|
|
422
|
+
}
|
|
350
423
|
|
|
351
424
|
.wb-helper-lazy-expander {
|
|
352
|
-
color: var(--wb-bg-highlight-color);
|
|
425
|
+
color: var(--wb-bg-highlight-color);
|
|
426
|
+
}
|
|
353
427
|
|
|
354
428
|
.wb-helper-link {
|
|
355
|
-
cursor: pointer;
|
|
429
|
+
cursor: pointer;
|
|
430
|
+
}
|
|
356
431
|
|
|
357
432
|
.wb-no-select {
|
|
358
433
|
user-select: none;
|
|
359
|
-
-webkit-user-select: none;
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
434
|
+
-webkit-user-select: none;
|
|
435
|
+
}
|
|
436
|
+
.wb-no-select span.wb-title {
|
|
437
|
+
user-select: contain;
|
|
438
|
+
-webkit-user-select: contain;
|
|
439
|
+
}
|
|
363
440
|
|
|
364
441
|
/* RTL support */
|
|
365
442
|
.wb-helper-start,
|
|
366
443
|
.wb-helper-start > input {
|
|
367
|
-
text-align: left;
|
|
444
|
+
text-align: left;
|
|
445
|
+
}
|
|
368
446
|
|
|
369
447
|
.wb-helper-end,
|
|
370
448
|
.wb-helper-end > input {
|
|
371
|
-
text-align: right;
|
|
449
|
+
text-align: right;
|
|
450
|
+
}
|
|
372
451
|
|
|
373
452
|
.wb-rtl .wb-helper-start,
|
|
374
453
|
.wb-rtl .wb-helper-start > input {
|
|
375
|
-
text-align: right;
|
|
376
|
-
|
|
454
|
+
text-align: right;
|
|
455
|
+
}
|
|
377
456
|
.wb-rtl .wb-helper-end,
|
|
378
457
|
.wb-rtl .wb-helper-end > input {
|
|
379
|
-
text-align: left;
|
|
458
|
+
text-align: left;
|
|
459
|
+
}
|
|
380
460
|
|
|
381
461
|
/* Class 'wb-tristate' is used to mark checkboxes that should toggle like
|
|
382
462
|
* indeterminate -> checked -> unchecked -> indeterminate ...
|
|
383
463
|
*/
|
|
384
|
-
.wb-col input[type=
|
|
464
|
+
.wb-col input[type=checkbox]:indeterminate {
|
|
385
465
|
color: var(--wb-dim-color);
|
|
386
|
-
background-color: red;
|
|
466
|
+
background-color: red;
|
|
467
|
+
}
|
|
387
468
|
|
|
388
469
|
.wb-col input:invalid {
|
|
389
470
|
color: var(--wb-error-color);
|
|
390
|
-
background-color: var(--wb-error-background-color);
|
|
471
|
+
background-color: var(--wb-error-background-color);
|
|
472
|
+
}
|
|
391
473
|
|
|
392
474
|
@keyframes wb-spin-animation {
|
|
393
475
|
0% {
|
|
394
|
-
transform: rotate(0deg);
|
|
476
|
+
transform: rotate(0deg);
|
|
477
|
+
}
|
|
395
478
|
to {
|
|
396
|
-
transform: rotate(1turn);
|
|
397
|
-
|
|
479
|
+
transform: rotate(1turn);
|
|
480
|
+
}
|
|
481
|
+
}
|
|
398
482
|
@keyframes wb-skeleton-animation {
|
|
399
483
|
0% {
|
|
400
|
-
background-color:
|
|
484
|
+
background-color: hsl(200, 20%, 70%);
|
|
485
|
+
}
|
|
401
486
|
100% {
|
|
402
|
-
background-color:
|
|
403
|
-
|
|
487
|
+
background-color: hsl(200, 20%, 95%);
|
|
488
|
+
}
|
|
489
|
+
}
|
|
404
490
|
@keyframes wb-busy-animation {
|
|
405
491
|
0% {
|
|
406
|
-
background-position: 0 0;
|
|
492
|
+
background-position: 0 0;
|
|
493
|
+
}
|
|
407
494
|
100% {
|
|
408
|
-
background-position: 0 22px;
|
|
495
|
+
background-position: 0 22px;
|
|
496
|
+
}
|
|
497
|
+
}
|
|
498
|
+
|
|
499
|
+
/*# sourceMappingURL=wunderbaum.css.map */
|