@operato/styles 10.16.0 → 10.23.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/CHANGELOG.md +27 -0
- package/dist/src/box-padding-editor-styles.d.ts +5 -0
- package/dist/src/box-padding-editor-styles.js +56 -83
- package/dist/src/box-padding-editor-styles.js.map +1 -1
- package/dist/src/button-container-styles.js +21 -16
- package/dist/src/button-container-styles.js.map +1 -1
- package/dist/src/common-header-styles.js +20 -15
- package/dist/src/common-header-styles.js.map +1 -1
- package/dist/src/line-styles.js +34 -21
- package/dist/src/line-styles.js.map +1 -1
- package/dist/src/property-grid-styles.js +321 -37
- package/dist/src/property-grid-styles.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
|
@@ -3,31 +3,69 @@
|
|
|
3
3
|
*/
|
|
4
4
|
import { css } from 'lit';
|
|
5
5
|
export const PropertyGridStyles = css `
|
|
6
|
+
/*
|
|
7
|
+
* The inspector's vocabulary.
|
|
8
|
+
*
|
|
9
|
+
* A section is a sentence-case title over a label/editor grid, separated from the next by a
|
|
10
|
+
* hairline and generous padding - the eye finds a section by whitespace before it finds a
|
|
11
|
+
* line. Furniture (titles, labels, icons) takes the quiet ink; values take the full ink; the
|
|
12
|
+
* accent shows only on focus and on a pressed segment, so the thing being edited is the one
|
|
13
|
+
* thing in colour. Editors are 28px tall on a per-scheme field surface (--property-input-
|
|
14
|
+
* background): white on a light panel, a lifted step on a dark one, never a hole.
|
|
15
|
+
*/
|
|
16
|
+
/* A legend ignores the fieldset's top padding (it is laid out in the border area), so the
|
|
17
|
+
* breathing room above a section title lives on the legend, not on the fieldset. */
|
|
6
18
|
fieldset {
|
|
7
19
|
border: none;
|
|
8
|
-
margin:
|
|
9
|
-
padding:
|
|
10
|
-
border-bottom: var(--property-sidebar-fieldset-border, 1px solid
|
|
11
|
-
color: var(--
|
|
12
|
-
font: var(--property-sidebar-fieldset-label,
|
|
20
|
+
margin: 0;
|
|
21
|
+
padding: 0 16px 16px;
|
|
22
|
+
border-bottom: var(--property-sidebar-fieldset-border, 1px solid var(--md-sys-color-outline-variant));
|
|
23
|
+
color: var(--md-sys-color-on-surface);
|
|
24
|
+
font: var(--property-sidebar-fieldset-label, 0.78rem/1.3 var(--theme-font, Roboto, sans-serif));
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
fieldset:last-child {
|
|
28
|
+
border-bottom: none;
|
|
13
29
|
}
|
|
14
30
|
|
|
15
31
|
fieldset legend {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
32
|
+
display: flex;
|
|
33
|
+
align-items: center;
|
|
34
|
+
gap: 4px;
|
|
35
|
+
padding: 14px 0 10px;
|
|
36
|
+
color: var(--property-sidebar-fieldset-legend-color, var(--md-sys-color-on-surface));
|
|
37
|
+
font: var(--property-sidebar-fieldset-legend, 600 0.74rem/1.4 var(--theme-font, Roboto, sans-serif));
|
|
38
|
+
letter-spacing: 0.01em;
|
|
19
39
|
text-transform: capitalize;
|
|
20
40
|
}
|
|
21
41
|
|
|
42
|
+
/* The title keeps the legend's ink; only the help glyph is muted. */
|
|
43
|
+
fieldset legend ox-title-with-help {
|
|
44
|
+
color: inherit;
|
|
45
|
+
/* The glyph is an offer of help, not part of the title: outline ink at half strength,
|
|
46
|
+
* full on hover. */
|
|
47
|
+
--help-icon-size: 14px;
|
|
48
|
+
--help-icon-color: var(--md-sys-color-outline);
|
|
49
|
+
--help-icon-opacity: 0.55;
|
|
50
|
+
--help-icon-hover-color: var(--md-sys-color-on-surface);
|
|
51
|
+
--help-icon-hover-opacity: 1;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
fieldset legend > md-icon {
|
|
55
|
+
--md-icon-size: 14px;
|
|
56
|
+
color: var(--md-sys-color-outline);
|
|
57
|
+
opacity: 0.55;
|
|
58
|
+
}
|
|
59
|
+
|
|
22
60
|
fieldset[collapsable] legend {
|
|
23
61
|
box-sizing: border-box;
|
|
24
62
|
width: 100%;
|
|
63
|
+
cursor: pointer;
|
|
25
64
|
}
|
|
26
65
|
|
|
27
66
|
fieldset[collapsable] legend md-icon {
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
margin: 0;
|
|
67
|
+
margin-left: auto;
|
|
68
|
+
--md-icon-size: 18px;
|
|
31
69
|
cursor: pointer;
|
|
32
70
|
}
|
|
33
71
|
|
|
@@ -35,11 +73,19 @@ export const PropertyGridStyles = css `
|
|
|
35
73
|
display: none;
|
|
36
74
|
}
|
|
37
75
|
|
|
76
|
+
fieldset[collapsable][collapsed] {
|
|
77
|
+
padding-bottom: 0;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
fieldset[collapsable][collapsed] legend {
|
|
81
|
+
padding-bottom: 14px;
|
|
82
|
+
}
|
|
83
|
+
|
|
38
84
|
/* property grid */
|
|
39
85
|
.property-grid {
|
|
40
86
|
display: grid;
|
|
41
87
|
grid-template-columns: repeat(24, 1fr);
|
|
42
|
-
grid-gap:
|
|
88
|
+
grid-gap: 6px 10px;
|
|
43
89
|
grid-auto-rows: minmax(24px, auto);
|
|
44
90
|
align-items: center;
|
|
45
91
|
}
|
|
@@ -51,18 +97,20 @@ export const PropertyGridStyles = css `
|
|
|
51
97
|
|
|
52
98
|
.property-grid > label {
|
|
53
99
|
display: flex;
|
|
54
|
-
grid-column: 1 /
|
|
100
|
+
grid-column: 1 / 10;
|
|
55
101
|
align-items: center;
|
|
56
102
|
justify-content: flex-end;
|
|
103
|
+
gap: 4px;
|
|
57
104
|
text-align: right;
|
|
58
105
|
text-transform: capitalize;
|
|
59
|
-
color: var(--md-sys-color-on-
|
|
60
|
-
font-size:
|
|
106
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
107
|
+
font-size: 0.74rem;
|
|
108
|
+
line-height: 1.2;
|
|
61
109
|
}
|
|
62
110
|
|
|
63
111
|
.property-grid > label md-icon {
|
|
64
|
-
--md-icon-size:
|
|
65
|
-
|
|
112
|
+
--md-icon-size: 15px;
|
|
113
|
+
color: var(--md-sys-color-outline);
|
|
66
114
|
}
|
|
67
115
|
|
|
68
116
|
.property-grid > label md-icon + * {
|
|
@@ -72,18 +120,191 @@ export const PropertyGridStyles = css `
|
|
|
72
120
|
input:not([type='checkbox']),
|
|
73
121
|
.property-grid > select,
|
|
74
122
|
.property-grid > ox-input-angle,
|
|
75
|
-
.property-grid > ox-buttons-radio,
|
|
76
123
|
.property-grid > ox-input-color,
|
|
77
124
|
.property-grid > ox-select,
|
|
78
125
|
.property-grid > .custom-editor {
|
|
79
|
-
grid-column:
|
|
126
|
+
grid-column: 10 / -1;
|
|
80
127
|
align-self: stretch;
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
128
|
+
min-height: 24px;
|
|
129
|
+
padding: 2px 8px;
|
|
130
|
+
/* Quiet at rest: a tint, no line. The outline is feedback, shown on hover and focus only. */
|
|
131
|
+
border: 1px solid transparent;
|
|
132
|
+
color: var(--md-sys-color-on-surface);
|
|
133
|
+
background-color: var(--property-input-background, var(--md-sys-color-surface-container-high));
|
|
134
|
+
border-radius: 6px;
|
|
135
|
+
font: inherit;
|
|
136
|
+
font-size: 0.76rem;
|
|
86
137
|
outline: none;
|
|
138
|
+
transition: border-color 0.12s ease-out, background-color 0.12s ease-out;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
input:not([type='checkbox']):hover,
|
|
142
|
+
.property-grid > select:hover,
|
|
143
|
+
.property-grid > .custom-editor:hover,
|
|
144
|
+
.property-grid > ox-select:hover {
|
|
145
|
+
border-color: var(--md-sys-color-outline-variant);
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
input:not([type='checkbox']):focus,
|
|
149
|
+
.property-grid > select:focus,
|
|
150
|
+
.property-grid > ox-input-angle:focus-within,
|
|
151
|
+
.property-grid > ox-input-color:focus-within,
|
|
152
|
+
.property-grid > ox-select:focus-within {
|
|
153
|
+
border-color: var(--md-sys-color-primary);
|
|
154
|
+
background-color: var(--property-input-background-focus, var(--md-sys-color-surface));
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
/* Numbers align on the right so digits line up down a column and the unit sits beside them. */
|
|
158
|
+
input[type='number'] {
|
|
159
|
+
font-variant-numeric: tabular-nums;
|
|
160
|
+
text-align: right;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
/* A native slider in any tab looks like ox-input-range: a thin track, a small ringed thumb. */
|
|
164
|
+
input[type='range'] {
|
|
165
|
+
-webkit-appearance: none;
|
|
166
|
+
appearance: none;
|
|
167
|
+
width: 100%;
|
|
168
|
+
min-width: 0;
|
|
169
|
+
height: 14px;
|
|
170
|
+
min-height: 0;
|
|
171
|
+
padding: 0;
|
|
172
|
+
border: 0;
|
|
173
|
+
background: transparent;
|
|
174
|
+
border-radius: 0;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
input[type='range']::-webkit-slider-runnable-track {
|
|
178
|
+
height: 3px;
|
|
179
|
+
border-radius: 2px;
|
|
180
|
+
background-color: var(--md-sys-color-outline-variant);
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
input[type='range']::-webkit-slider-thumb {
|
|
184
|
+
-webkit-appearance: none;
|
|
185
|
+
width: 12px;
|
|
186
|
+
height: 12px;
|
|
187
|
+
margin-top: -4.5px;
|
|
188
|
+
border-radius: 50%;
|
|
189
|
+
border: 2px solid var(--md-sys-color-surface);
|
|
190
|
+
box-sizing: border-box;
|
|
191
|
+
background: var(--md-sys-color-primary);
|
|
192
|
+
box-shadow: 0 0 0 1px var(--md-sys-color-outline-variant);
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
input[type='range']::-moz-range-track {
|
|
196
|
+
height: 3px;
|
|
197
|
+
border-radius: 2px;
|
|
198
|
+
background-color: var(--md-sys-color-outline-variant);
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
input[type='range']::-moz-range-thumb {
|
|
202
|
+
width: 12px;
|
|
203
|
+
height: 12px;
|
|
204
|
+
border-radius: 50%;
|
|
205
|
+
border: 2px solid var(--md-sys-color-surface);
|
|
206
|
+
box-sizing: border-box;
|
|
207
|
+
background: var(--md-sys-color-primary);
|
|
208
|
+
box-shadow: 0 0 0 1px var(--md-sys-color-outline-variant);
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
/* Pickers whose label is a drawing (line type, arrow head) keep the editor height. */
|
|
212
|
+
.property-grid > ox-select {
|
|
213
|
+
padding: 0 8px;
|
|
214
|
+
max-height: 24px;
|
|
215
|
+
overflow: hidden;
|
|
216
|
+
--ox-select-padding: 0;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
/* A compact editor with its own one-letter caption inside: W 812 · H 1439 */
|
|
220
|
+
.property-grid > .field {
|
|
221
|
+
display: flex;
|
|
222
|
+
align-items: center;
|
|
223
|
+
gap: 6px;
|
|
224
|
+
min-height: 24px;
|
|
225
|
+
padding: 0 8px;
|
|
226
|
+
border: 1px solid transparent;
|
|
227
|
+
background-color: var(--property-input-background, var(--md-sys-color-surface-container-high));
|
|
228
|
+
border-radius: 6px;
|
|
229
|
+
transition: border-color 0.12s ease-out, background-color 0.12s ease-out;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
.property-grid > .field:hover {
|
|
233
|
+
border-color: var(--md-sys-color-outline-variant);
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
.property-grid > .field:focus-within {
|
|
237
|
+
border-color: var(--md-sys-color-primary);
|
|
238
|
+
background-color: var(--property-input-background-focus, var(--md-sys-color-surface));
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.property-grid > .field > span {
|
|
242
|
+
flex: none;
|
|
243
|
+
font-size: 0.68rem;
|
|
244
|
+
font-weight: 500;
|
|
245
|
+
color: var(--md-sys-color-outline);
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
.property-grid > .field > input {
|
|
249
|
+
flex: 1;
|
|
250
|
+
min-width: 0;
|
|
251
|
+
width: 100%;
|
|
252
|
+
min-height: 0;
|
|
253
|
+
padding: 0;
|
|
254
|
+
border: 0;
|
|
255
|
+
background: transparent;
|
|
256
|
+
box-shadow: none;
|
|
257
|
+
border-radius: 0;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
/* A component editor inside a captioned cell is just the value; the cell draws the field. */
|
|
261
|
+
.property-grid > .field > ox-input-angle,
|
|
262
|
+
.property-grid > .field > ox-input-color {
|
|
263
|
+
flex: 1;
|
|
264
|
+
min-width: 0;
|
|
265
|
+
min-height: 0;
|
|
266
|
+
padding: 0;
|
|
267
|
+
border: 0;
|
|
268
|
+
background: transparent;
|
|
269
|
+
border-radius: 0;
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
.property-grid > .field > i {
|
|
273
|
+
flex: none;
|
|
274
|
+
font-style: normal;
|
|
275
|
+
font-size: 0.72rem;
|
|
276
|
+
color: var(--md-sys-color-outline);
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
.property-grid > .half {
|
|
280
|
+
grid-column: span 12;
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
.property-grid > .third {
|
|
284
|
+
grid-column: span 8;
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
.property-grid > .field.third {
|
|
288
|
+
padding: 0 6px;
|
|
289
|
+
gap: 4px;
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
/* Checkbox rows: box first, caption after, both on the same 28px line. */
|
|
293
|
+
/* Checkbox rows start where the editors start, so the left edges line up down the panel. */
|
|
294
|
+
input[type='checkbox'] {
|
|
295
|
+
accent-color: var(--md-sys-color-primary);
|
|
296
|
+
width: 15px;
|
|
297
|
+
height: 15px;
|
|
298
|
+
margin: 0;
|
|
299
|
+
grid-column: 10 / 12;
|
|
300
|
+
justify-self: start;
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
input[type='checkbox'] + label {
|
|
304
|
+
grid-column: 12 / -1;
|
|
305
|
+
justify-content: flex-start;
|
|
306
|
+
text-align: left;
|
|
307
|
+
color: var(--md-sys-color-on-surface);
|
|
87
308
|
}
|
|
88
309
|
|
|
89
310
|
.property-grid ox-input-code,
|
|
@@ -93,30 +314,59 @@ export const PropertyGridStyles = css `
|
|
|
93
314
|
border-radius: var(--spacing-small);
|
|
94
315
|
}
|
|
95
316
|
|
|
96
|
-
.
|
|
317
|
+
/* A segmented control: one track, the pressed segment lifted. */
|
|
318
|
+
/* Toggle rows: no track, no boxes - only the pressed choice gets a soft fill. */
|
|
319
|
+
.property-grid > ox-buttons-radio {
|
|
320
|
+
grid-column: 10 / -1;
|
|
97
321
|
display: flex;
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
gap:
|
|
101
|
-
|
|
322
|
+
flex-wrap: wrap;
|
|
323
|
+
align-items: stretch;
|
|
324
|
+
gap: 2px;
|
|
325
|
+
padding: 0;
|
|
326
|
+
min-height: 24px;
|
|
327
|
+
min-width: 0;
|
|
328
|
+
border: 0;
|
|
102
329
|
background-color: transparent;
|
|
103
|
-
border: none;
|
|
104
330
|
}
|
|
105
331
|
|
|
332
|
+
/* Choices sit together as one group: icons are 24px cells, words take their own width. */
|
|
106
333
|
.property-grid ox-buttons-radio > * {
|
|
107
|
-
flex:
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
334
|
+
flex: 0 0 auto;
|
|
335
|
+
height: 24px;
|
|
336
|
+
padding: 0 6px;
|
|
337
|
+
display: flex;
|
|
338
|
+
align-items: center;
|
|
339
|
+
justify-content: center;
|
|
340
|
+
border-radius: 4px;
|
|
341
|
+
border: 0;
|
|
342
|
+
font-size: 0.74rem;
|
|
343
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
344
|
+
cursor: pointer;
|
|
111
345
|
}
|
|
112
346
|
|
|
113
347
|
.property-grid ox-buttons-radio > md-icon {
|
|
114
|
-
|
|
115
|
-
|
|
348
|
+
flex: 0 0 24px;
|
|
349
|
+
width: 24px;
|
|
350
|
+
padding: 0;
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
.property-grid ox-buttons-radio > md-icon {
|
|
354
|
+
--md-icon-size: 15px;
|
|
355
|
+
padding: 0;
|
|
356
|
+
max-width: none;
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
.property-grid ox-buttons-radio > :hover {
|
|
360
|
+
color: var(--md-sys-color-on-surface);
|
|
361
|
+
}
|
|
362
|
+
|
|
363
|
+
.property-grid ox-buttons-radio > :hover {
|
|
364
|
+
background-color: var(--md-sys-color-surface-container-high);
|
|
116
365
|
}
|
|
117
366
|
|
|
118
367
|
.property-grid ox-buttons-radio > [active] {
|
|
119
|
-
|
|
368
|
+
color: var(--md-sys-color-on-secondary-container);
|
|
369
|
+
background-color: var(--md-sys-color-secondary-container);
|
|
120
370
|
}
|
|
121
371
|
|
|
122
372
|
.property-grid > .fullwidth,
|
|
@@ -124,6 +374,40 @@ export const PropertyGridStyles = css `
|
|
|
124
374
|
grid-column: 1 / -1;
|
|
125
375
|
}
|
|
126
376
|
|
|
377
|
+
/* Two-up and three-up rows: tighter padding so three numbers fit a 270px panel. */
|
|
378
|
+
.property-grid > .half-editor,
|
|
379
|
+
.property-grid > .onethird-editor,
|
|
380
|
+
.property-grid > .twothird-editor {
|
|
381
|
+
min-width: 0;
|
|
382
|
+
padding: 2px 6px;
|
|
383
|
+
font-size: 0.74rem;
|
|
384
|
+
}
|
|
385
|
+
|
|
386
|
+
/* Compact number cells have no room for the spinner; the wheel and arrow keys still work. */
|
|
387
|
+
.property-grid > .half-editor::-webkit-inner-spin-button,
|
|
388
|
+
.property-grid > .onethird-editor::-webkit-inner-spin-button,
|
|
389
|
+
.property-grid > .field > input::-webkit-inner-spin-button {
|
|
390
|
+
-webkit-appearance: none;
|
|
391
|
+
margin: 0;
|
|
392
|
+
}
|
|
393
|
+
|
|
394
|
+
.property-grid > .half-editor[type='number'],
|
|
395
|
+
.property-grid > .onethird-editor[type='number'],
|
|
396
|
+
.property-grid > .field > input[type='number'] {
|
|
397
|
+
-moz-appearance: textfield;
|
|
398
|
+
}
|
|
399
|
+
|
|
400
|
+
.property-grid > .half-label,
|
|
401
|
+
.property-grid > .onethird-label,
|
|
402
|
+
.property-grid > .twothird-label {
|
|
403
|
+
justify-content: center;
|
|
404
|
+
text-align: center;
|
|
405
|
+
font-size: 0.7rem;
|
|
406
|
+
font-weight: 600;
|
|
407
|
+
letter-spacing: 0.02em;
|
|
408
|
+
color: var(--md-sys-color-outline);
|
|
409
|
+
}
|
|
410
|
+
|
|
127
411
|
.property-grid > .half-label {
|
|
128
412
|
grid-column: span 3;
|
|
129
413
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"property-grid-styles.js","sourceRoot":"","sources":["../../src/property-grid-styles.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmKpC,CAAA","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css } from 'lit'\n\nexport const PropertyGridStyles = css`\n fieldset {\n border: none;\n margin: 4px;\n padding: 9px 4px 9px 4px;\n border-bottom: var(--property-sidebar-fieldset-border, 1px solid #ccc);\n color: var(--property-sidebar-fieldset-legend-color, var(--md-sys-color-on-secondary-container));\n font: var(--property-sidebar-fieldset-label, 13px Arial, sans-serif);\n }\n\n fieldset legend {\n padding: 5px 0 0 5px;\n color: var(--property-sidebar-fieldset-legend-color, var(--md-sys-color-on-secondary-container));\n font: var(--property-sidebar-fieldset-legend, bold 13px Arial, sans-serif);\n text-transform: capitalize;\n }\n\n fieldset[collapsable] legend {\n box-sizing: border-box;\n width: 100%;\n }\n\n fieldset[collapsable] legend md-icon {\n float: right;\n font-size: medium;\n margin: 0;\n cursor: pointer;\n }\n\n fieldset[collapsable][collapsed] > :not(legend) {\n display: none;\n }\n\n /* property grid */\n .property-grid {\n display: grid;\n grid-template-columns: repeat(24, 1fr);\n grid-gap: 5px;\n grid-auto-rows: minmax(24px, auto);\n align-items: center;\n }\n\n .property-grid > * {\n width: 100%;\n box-sizing: border-box;\n }\n\n .property-grid > label {\n display: flex;\n grid-column: 1 / 9;\n align-items: center;\n justify-content: flex-end;\n text-align: right;\n text-transform: capitalize;\n color: var(--md-sys-color-on-secondary-container);\n font-size: 12px;\n }\n\n .property-grid > label md-icon {\n --md-icon-size: 20px;\n opacity: 0.6;\n }\n\n .property-grid > label md-icon + * {\n margin-left: auto;\n }\n\n input:not([type='checkbox']),\n .property-grid > select,\n .property-grid > ox-input-angle,\n .property-grid > ox-buttons-radio,\n .property-grid > ox-input-color,\n .property-grid > ox-select,\n .property-grid > .custom-editor {\n grid-column: 9 / -1;\n align-self: stretch;\n\n border: 1px solid rgba(0, 0, 0, 0.2);\n color: var(--md-sys-color-on-secondary-container);\n background-color: field;\n border-radius: var(--spacing-small);\n outline: none;\n }\n\n .property-grid ox-input-code,\n .property-grid ox-input-data,\n .property-grid .multiline-input {\n height: 300px;\n border-radius: var(--spacing-small);\n }\n\n .property-grid ox-buttons-radio {\n display: flex;\n align-items: center;\n margin: var(--spacing-tiny);\n gap: var(--spacing-tiny);\n justify-content: space-between;\n background-color: transparent;\n border: none;\n }\n\n .property-grid ox-buttons-radio > * {\n flex: 1;\n border-radius: 0;\n border-bottom: 2px solid #fff;\n text-align: center;\n }\n\n .property-grid ox-buttons-radio > md-icon {\n padding: var(--spacing-tiny);\n max-width: 1.4em;\n }\n\n .property-grid ox-buttons-radio > [active] {\n border-color: #f2471c;\n }\n\n .property-grid > .fullwidth,\n .property-grid > [fullwidth] {\n grid-column: 1 / -1;\n }\n\n .property-grid > .half-label {\n grid-column: span 3;\n }\n\n .property-grid > .half-editor {\n grid-column: span 9;\n }\n\n .property-grid > .onethird-label {\n grid-column: span 3;\n }\n\n .property-grid > .onethird-editor {\n grid-column: span 5;\n }\n\n .property-grid > .onethird-full {\n grid-column: span 8;\n }\n\n .property-grid > .twothird-label {\n grid-column: span 3;\n }\n\n .property-grid > .twothird-editor {\n grid-column: span 13;\n }\n\n .property-grid > .twothird-full {\n grid-column: span 16;\n }\n\n .property-grid > input[type='checkbox'] {\n grid-column: 9 / 11;\n }\n\n .property-grid > input[type='checkbox'] + label {\n grid-column: 12 / -1;\n justify-content: flex-start;\n text-align: left;\n }\n`\n"]}
|
|
1
|
+
{"version":3,"file":"property-grid-styles.js","sourceRoot":"","sources":["../../src/property-grid-styles.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+bpC,CAAA","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css } from 'lit'\n\nexport const PropertyGridStyles = css`\n /*\n * The inspector's vocabulary.\n *\n * A section is a sentence-case title over a label/editor grid, separated from the next by a\n * hairline and generous padding - the eye finds a section by whitespace before it finds a\n * line. Furniture (titles, labels, icons) takes the quiet ink; values take the full ink; the\n * accent shows only on focus and on a pressed segment, so the thing being edited is the one\n * thing in colour. Editors are 28px tall on a per-scheme field surface (--property-input-\n * background): white on a light panel, a lifted step on a dark one, never a hole.\n */\n /* A legend ignores the fieldset's top padding (it is laid out in the border area), so the\n * breathing room above a section title lives on the legend, not on the fieldset. */\n fieldset {\n border: none;\n margin: 0;\n padding: 0 16px 16px;\n border-bottom: var(--property-sidebar-fieldset-border, 1px solid var(--md-sys-color-outline-variant));\n color: var(--md-sys-color-on-surface);\n font: var(--property-sidebar-fieldset-label, 0.78rem/1.3 var(--theme-font, Roboto, sans-serif));\n }\n\n fieldset:last-child {\n border-bottom: none;\n }\n\n fieldset legend {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 14px 0 10px;\n color: var(--property-sidebar-fieldset-legend-color, var(--md-sys-color-on-surface));\n font: var(--property-sidebar-fieldset-legend, 600 0.74rem/1.4 var(--theme-font, Roboto, sans-serif));\n letter-spacing: 0.01em;\n text-transform: capitalize;\n }\n\n /* The title keeps the legend's ink; only the help glyph is muted. */\n fieldset legend ox-title-with-help {\n color: inherit;\n /* The glyph is an offer of help, not part of the title: outline ink at half strength,\n * full on hover. */\n --help-icon-size: 14px;\n --help-icon-color: var(--md-sys-color-outline);\n --help-icon-opacity: 0.55;\n --help-icon-hover-color: var(--md-sys-color-on-surface);\n --help-icon-hover-opacity: 1;\n }\n\n fieldset legend > md-icon {\n --md-icon-size: 14px;\n color: var(--md-sys-color-outline);\n opacity: 0.55;\n }\n\n fieldset[collapsable] legend {\n box-sizing: border-box;\n width: 100%;\n cursor: pointer;\n }\n\n fieldset[collapsable] legend md-icon {\n margin-left: auto;\n --md-icon-size: 18px;\n cursor: pointer;\n }\n\n fieldset[collapsable][collapsed] > :not(legend) {\n display: none;\n }\n\n fieldset[collapsable][collapsed] {\n padding-bottom: 0;\n }\n\n fieldset[collapsable][collapsed] legend {\n padding-bottom: 14px;\n }\n\n /* property grid */\n .property-grid {\n display: grid;\n grid-template-columns: repeat(24, 1fr);\n grid-gap: 6px 10px;\n grid-auto-rows: minmax(24px, auto);\n align-items: center;\n }\n\n .property-grid > * {\n width: 100%;\n box-sizing: border-box;\n }\n\n .property-grid > label {\n display: flex;\n grid-column: 1 / 10;\n align-items: center;\n justify-content: flex-end;\n gap: 4px;\n text-align: right;\n text-transform: capitalize;\n color: var(--md-sys-color-on-surface-variant);\n font-size: 0.74rem;\n line-height: 1.2;\n }\n\n .property-grid > label md-icon {\n --md-icon-size: 15px;\n color: var(--md-sys-color-outline);\n }\n\n .property-grid > label md-icon + * {\n margin-left: auto;\n }\n\n input:not([type='checkbox']),\n .property-grid > select,\n .property-grid > ox-input-angle,\n .property-grid > ox-input-color,\n .property-grid > ox-select,\n .property-grid > .custom-editor {\n grid-column: 10 / -1;\n align-self: stretch;\n min-height: 24px;\n padding: 2px 8px;\n /* Quiet at rest: a tint, no line. The outline is feedback, shown on hover and focus only. */\n border: 1px solid transparent;\n color: var(--md-sys-color-on-surface);\n background-color: var(--property-input-background, var(--md-sys-color-surface-container-high));\n border-radius: 6px;\n font: inherit;\n font-size: 0.76rem;\n outline: none;\n transition: border-color 0.12s ease-out, background-color 0.12s ease-out;\n }\n\n input:not([type='checkbox']):hover,\n .property-grid > select:hover,\n .property-grid > .custom-editor:hover,\n .property-grid > ox-select:hover {\n border-color: var(--md-sys-color-outline-variant);\n }\n\n input:not([type='checkbox']):focus,\n .property-grid > select:focus,\n .property-grid > ox-input-angle:focus-within,\n .property-grid > ox-input-color:focus-within,\n .property-grid > ox-select:focus-within {\n border-color: var(--md-sys-color-primary);\n background-color: var(--property-input-background-focus, var(--md-sys-color-surface));\n }\n\n /* Numbers align on the right so digits line up down a column and the unit sits beside them. */\n input[type='number'] {\n font-variant-numeric: tabular-nums;\n text-align: right;\n }\n\n /* A native slider in any tab looks like ox-input-range: a thin track, a small ringed thumb. */\n input[type='range'] {\n -webkit-appearance: none;\n appearance: none;\n width: 100%;\n min-width: 0;\n height: 14px;\n min-height: 0;\n padding: 0;\n border: 0;\n background: transparent;\n border-radius: 0;\n }\n\n input[type='range']::-webkit-slider-runnable-track {\n height: 3px;\n border-radius: 2px;\n background-color: var(--md-sys-color-outline-variant);\n }\n\n input[type='range']::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 12px;\n height: 12px;\n margin-top: -4.5px;\n border-radius: 50%;\n border: 2px solid var(--md-sys-color-surface);\n box-sizing: border-box;\n background: var(--md-sys-color-primary);\n box-shadow: 0 0 0 1px var(--md-sys-color-outline-variant);\n }\n\n input[type='range']::-moz-range-track {\n height: 3px;\n border-radius: 2px;\n background-color: var(--md-sys-color-outline-variant);\n }\n\n input[type='range']::-moz-range-thumb {\n width: 12px;\n height: 12px;\n border-radius: 50%;\n border: 2px solid var(--md-sys-color-surface);\n box-sizing: border-box;\n background: var(--md-sys-color-primary);\n box-shadow: 0 0 0 1px var(--md-sys-color-outline-variant);\n }\n\n /* Pickers whose label is a drawing (line type, arrow head) keep the editor height. */\n .property-grid > ox-select {\n padding: 0 8px;\n max-height: 24px;\n overflow: hidden;\n --ox-select-padding: 0;\n }\n\n /* A compact editor with its own one-letter caption inside: W 812 · H 1439 */\n .property-grid > .field {\n display: flex;\n align-items: center;\n gap: 6px;\n min-height: 24px;\n padding: 0 8px;\n border: 1px solid transparent;\n background-color: var(--property-input-background, var(--md-sys-color-surface-container-high));\n border-radius: 6px;\n transition: border-color 0.12s ease-out, background-color 0.12s ease-out;\n }\n\n .property-grid > .field:hover {\n border-color: var(--md-sys-color-outline-variant);\n }\n\n .property-grid > .field:focus-within {\n border-color: var(--md-sys-color-primary);\n background-color: var(--property-input-background-focus, var(--md-sys-color-surface));\n }\n\n .property-grid > .field > span {\n flex: none;\n font-size: 0.68rem;\n font-weight: 500;\n color: var(--md-sys-color-outline);\n }\n\n .property-grid > .field > input {\n flex: 1;\n min-width: 0;\n width: 100%;\n min-height: 0;\n padding: 0;\n border: 0;\n background: transparent;\n box-shadow: none;\n border-radius: 0;\n }\n\n /* A component editor inside a captioned cell is just the value; the cell draws the field. */\n .property-grid > .field > ox-input-angle,\n .property-grid > .field > ox-input-color {\n flex: 1;\n min-width: 0;\n min-height: 0;\n padding: 0;\n border: 0;\n background: transparent;\n border-radius: 0;\n }\n\n .property-grid > .field > i {\n flex: none;\n font-style: normal;\n font-size: 0.72rem;\n color: var(--md-sys-color-outline);\n }\n\n .property-grid > .half {\n grid-column: span 12;\n }\n\n .property-grid > .third {\n grid-column: span 8;\n }\n\n .property-grid > .field.third {\n padding: 0 6px;\n gap: 4px;\n }\n\n /* Checkbox rows: box first, caption after, both on the same 28px line. */\n /* Checkbox rows start where the editors start, so the left edges line up down the panel. */\n input[type='checkbox'] {\n accent-color: var(--md-sys-color-primary);\n width: 15px;\n height: 15px;\n margin: 0;\n grid-column: 10 / 12;\n justify-self: start;\n }\n\n input[type='checkbox'] + label {\n grid-column: 12 / -1;\n justify-content: flex-start;\n text-align: left;\n color: var(--md-sys-color-on-surface);\n }\n\n .property-grid ox-input-code,\n .property-grid ox-input-data,\n .property-grid .multiline-input {\n height: 300px;\n border-radius: var(--spacing-small);\n }\n\n /* A segmented control: one track, the pressed segment lifted. */\n /* Toggle rows: no track, no boxes - only the pressed choice gets a soft fill. */\n .property-grid > ox-buttons-radio {\n grid-column: 10 / -1;\n display: flex;\n flex-wrap: wrap;\n align-items: stretch;\n gap: 2px;\n padding: 0;\n min-height: 24px;\n min-width: 0;\n border: 0;\n background-color: transparent;\n }\n\n /* Choices sit together as one group: icons are 24px cells, words take their own width. */\n .property-grid ox-buttons-radio > * {\n flex: 0 0 auto;\n height: 24px;\n padding: 0 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n border: 0;\n font-size: 0.74rem;\n color: var(--md-sys-color-on-surface-variant);\n cursor: pointer;\n }\n\n .property-grid ox-buttons-radio > md-icon {\n flex: 0 0 24px;\n width: 24px;\n padding: 0;\n }\n\n .property-grid ox-buttons-radio > md-icon {\n --md-icon-size: 15px;\n padding: 0;\n max-width: none;\n }\n\n .property-grid ox-buttons-radio > :hover {\n color: var(--md-sys-color-on-surface);\n }\n\n .property-grid ox-buttons-radio > :hover {\n background-color: var(--md-sys-color-surface-container-high);\n }\n\n .property-grid ox-buttons-radio > [active] {\n color: var(--md-sys-color-on-secondary-container);\n background-color: var(--md-sys-color-secondary-container);\n }\n\n .property-grid > .fullwidth,\n .property-grid > [fullwidth] {\n grid-column: 1 / -1;\n }\n\n /* Two-up and three-up rows: tighter padding so three numbers fit a 270px panel. */\n .property-grid > .half-editor,\n .property-grid > .onethird-editor,\n .property-grid > .twothird-editor {\n min-width: 0;\n padding: 2px 6px;\n font-size: 0.74rem;\n }\n\n /* Compact number cells have no room for the spinner; the wheel and arrow keys still work. */\n .property-grid > .half-editor::-webkit-inner-spin-button,\n .property-grid > .onethird-editor::-webkit-inner-spin-button,\n .property-grid > .field > input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n .property-grid > .half-editor[type='number'],\n .property-grid > .onethird-editor[type='number'],\n .property-grid > .field > input[type='number'] {\n -moz-appearance: textfield;\n }\n\n .property-grid > .half-label,\n .property-grid > .onethird-label,\n .property-grid > .twothird-label {\n justify-content: center;\n text-align: center;\n font-size: 0.7rem;\n font-weight: 600;\n letter-spacing: 0.02em;\n color: var(--md-sys-color-outline);\n }\n\n .property-grid > .half-label {\n grid-column: span 3;\n }\n\n .property-grid > .half-editor {\n grid-column: span 9;\n }\n\n .property-grid > .onethird-label {\n grid-column: span 3;\n }\n\n .property-grid > .onethird-editor {\n grid-column: span 5;\n }\n\n .property-grid > .onethird-full {\n grid-column: span 8;\n }\n\n .property-grid > .twothird-label {\n grid-column: span 3;\n }\n\n .property-grid > .twothird-editor {\n grid-column: span 13;\n }\n\n .property-grid > .twothird-full {\n grid-column: span 16;\n }\n\n .property-grid > input[type='checkbox'] {\n grid-column: 9 / 11;\n }\n\n .property-grid > input[type='checkbox'] + label {\n grid-column: 12 / -1;\n justify-content: flex-start;\n text-align: left;\n }\n`\n"]}
|