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
|
<style>
:host {
--brief-content-background-color: var(--dark-primary-color);
}
.info-container > h4,
.info-container > object-field-set,
.info-container > value-control {
margin: 1em;
}
button.show-all-properties {
background-image: linear-gradient(#ededed, #ededed 38%, #dedede);
border: 1px solid rgba(0, 0, 0, 0.25);
border-radius: 2px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08),
inset 0 1px 2px rgba(255, 255, 255, 0.75);
color: #444;
font: inherit;
margin: 10px;
min-height: 2em;
min-width: 4em;
outline: none;
padding: 1px 10px;
text-shadow: 0 1px 0 rgb(240, 240, 240);
user-select: none;
}
button.show-all-properties:hover {
background-image: linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
border-color: rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12),
inset 0 1px 2px rgba(255, 255, 255, 0.95);
color: black;
}
button.show-all-properties:active {
background-image: linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
box-shadow: none;
text-shadow: none;
}
button.show-all-properties:focus {
border-color: rgb(77, 144, 254);
outline: none;
/* OVERRIDE */
transition: border-color 200ms;
}
</style>
<expandable-list-item>
<div slot="brief-content">
<div>Characteristic:</div>
<div class="header-value"></div>
</div>
<div slot="expanded-content" class="info-container">
<h4>Characteristic Info</h4>
<object-field-set class="characteristics" show-all></object-field-set>
<h4>Properties<button class="show-all-properties">Show All</button></h4>
<object-field-set class="properties"></object-field-set>
<h4>Value</h4>
<value-control hidden></value-control>
<h4>Descriptors</h4>
<descriptor-list></descriptor-list>
</div>
</expandable-list-item>
|
