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
|
// Style
ul.item-table {
list-style-type: none;
}
.content:has(> .item-table) > .item-table > .empty-state {
.empty-state-bar();
}
// Layout
ul.item-table {
// Grid specific rules
display: grid;
grid-template-columns: minmax(0, 1fr) repeat(var(--columns), auto);
&:has(> li > .visual) {
grid-template-columns: auto minmax(0, 1fr) repeat(var(--columns), auto);
}
> li {
display: contents;
&.item-layout .main {
// Usually, the parent is flex, but here it's contents. .main is still stretched though,
// because it's a grid item with a width of 1fr. But the default-item-layout sets a width
// which needs to be overridden.
width: auto;
}
.col, &::before, &::after {
// The li might get a background on hover. Though, this won't be visible
// as it has no box model since we apply display:contents to it.
background-color: inherit;
}
}
}
:not(.dashboard) > .container > .content:has(> .item-table), // compat only, for Icinga Web (See #286)
.content:has(> .item-table) {
padding-left: 0;
padding-right: 0;
> .item-table > .empty-state {
margin: 0 1em;
}
> ul.item-table {
// Again, since the li has no box model, it cannot have padding. So the first
// and last child need to get the left and right padding respectively.
// But we don't want to have a border that spans to the very right or left,
// so pseudo elements are required. We could add empty cells instead, but
// that would require hard coding the width here, which I'd like to avoid.
grid-template-columns: ~"auto minmax(0, 1fr) repeat(var(--columns), auto) auto";
&:has(> li > .visual) {
grid-template-columns: ~"auto auto minmax(0, 1fr) repeat(var(--columns), auto) auto";
}
> li.table-row {
&::before, &::after {
display: inline-block;
content: '\00a0';
width: 0;
margin-bottom: 1px;
}
&::before {
padding-left: 1em;
}
&::after {
padding-right: 1em;
}
}
}
}
ul.item-table {
// General rules
padding: 0;
margin: 0;
.table-row {
.col {
margin-right: 0; // Otherwise background has gaps
padding: .5em 1em .5em 0;
&:last-child {
padding-right: 0;
}
.title {
margin-right: 0;
}
}
// This is for the legacy layout only
// TODO: Drop this together with BaseTableRowItem
.col.title:has(> .visual) {
display: flex;
> .visual {
padding-right: .5em;
}
}
&:not(:last-of-type) {
.col {
border-bottom: 1px solid @list-item-separation-bg;
&.visual {
border-color: @default-bg;
}
}
}
}
}
div.item-table {
> .empty-state-bar {
margin: 0 1em;
}
}
@media print {
.item-table li.page-break-follows:not(:last-of-type) {
.col {
border-bottom: none;
}
}
}
|
