blob: 7711f04619403d3c9c55560046c951e4ec52c071 (
plain)
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
|
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
/*
* The current layout of debug target item is
*
* +--------+-----------------------------+----------------+
* | | Name | |
* | [Icon] |-----------------------------| Action button |
* | | Subname | |
* +--------+-----------------------------+----------------+
* | Detail |
* | |
* +-------------------------------------------------------+
* | Additional actions |
* | |
* +-------------------------------------------------------+
*/
.debug-target-item {
display: grid;
grid-template-columns: calc(var(--base-unit) * 8) 1fr max-content;
grid-template-rows: 1fr minmax(0, auto) auto;
grid-column-gap: calc(var(--base-unit) * 2);
grid-template-areas: "icon name action"
"icon subname action"
"detail detail detail"
"additional_actions additional_actions additional_actions";
margin-block-end: calc(var(--base-unit) * 4);
padding-block: calc(var(--base-unit) * 3) calc(var(--base-unit) * 2);
padding-inline: calc(var(--base-unit) * 3) calc(var(--base-unit) * 2);
}
.debug-target-item__icon {
align-self: center;
grid-area: icon;
margin-inline-start: calc(var(--base-unit) * 3);
width: 100%;
}
.debug-target-item__name {
align-self: center;
grid-area: name;
font-size: var(--body-20-font-size);
font-weight: var(--body-20-font-weight-bold);
line-height: 1.5;
margin-inline-start: calc(var(--base-unit) * 3);
}
.debug-target-item__action {
grid-area: action;
align-self: center;
margin-inline-end: calc(var(--base-unit) * 2);
}
.debug-target-item__additional_actions {
grid-area: additional_actions;
border-top: 1px solid var(--grey-20);
margin-block-start: calc(var(--base-unit) * 2);
padding-block-start: calc(var(--base-unit) * 2);
padding-inline-end: calc(var(--base-unit) * 2);
}
.debug-target-item__detail {
grid-area: detail;
margin-block-start: calc(var(--base-unit) * 3);
}
.debug-target-item__detail--empty {
margin-block-start: var(--base-unit);
}
.debug-target-item__messages {
margin-inline: calc(var(--base-unit) * 3) calc(var(--base-unit) * 2);
}
.debug-target-item__subname {
grid-area: subname;
color: var(--grey-50);
font-size: var(--caption-20-font-size);
font-weight: var(--caption-20-font-weight);
line-height: 1.5;
}
/* The subname is always LTR under the Tabs section,
so check its parent's direction to set the correct margin. */
.debug-target-item:dir(ltr) > .debug-target-item__subname {
margin-left: calc(var(--base-unit) * 3);
}
.debug-target-item:dir(rtl) > .debug-target-item__subname {
margin-right: calc(var(--base-unit) * 3);
}
|
