CoCalc -- phui-list.css

GitHub Repository: freebsd/phabricator
Path: blob/master/webroot/rsrc/css/phui/phui-list.css
¹²²⁴² views
1
/**
2
 * @provides phui-list-view-css
3
 */
4

5
.phui-list-item-view {
6
  position: relative;
7
}
8

9
.phui-list-item-header,
10
.phui-list-item-header a {
11
  color: {$bluetext};
12
  font-weight: bold;
13
  -webkit-font-smoothing: antialiased;
14
}
15

16
/* - Sidenav and Actions -------------------------------------------------------
17

18
  Sidebar and Action Menus
19

20
*/
21

22
.phui-list-sidenav {
23
  padding: 4px 0;
24
}
25

26
.phui-list-sidenav .phui-list-item-type-label .phui-list-item-name {
27
  font-weight: bold;
28
  color: {$bluetext};
29
  padding: 4px 8px 6px 8px;
30
  display: block;
31
  -webkit-font-smoothing: antialiased;
32
}
33

34
.phui-list-sidenav .phui-list-item-type-divider {
35
  margin: 8px 8px 12px 8px;
36
  border-bottom: 1px solid {$thinblueborder};
37
}
38

39
.phui-list-sidenav .phui-list-item-icon {
40
  height: 14px;
41
  width: 14px;
42
  display: inline-block;
43
  position: absolute;
44
  top: 6px;
45
  text-align: center;
46
}
47

48
.phui-list-sidenav .phui-list-item-icon + .phui-list-item-name {
49
  padding-left: 20px;
50
}
51

52
.phui-list-sidenav .phui-list-item-has-icon {
53
  margin: 0;
54
  position: relative;
55
}
56

57
.phui-list-sidenav .phui-list-item-view {
58
  overflow: hidden;
59
}
60

61
.phui-list-sidenav .phui-list-item-href {
62
  display: block;
63
  padding: 4px 16px;
64
  clear: both;
65
  color: {$darkgreytext};
66
  line-height: 18px;
67
}
68

69
.phabricator-side-menu .phui-list-item-disabled .phui-list-item-href,
70
.phui-list-sidenav .phui-list-item-disabled .phui-list-item-href {
71
  color: {$lightgreytext};
72
}
73

74
.phui-list-sidenav .phui-list-item-has-icon .phui-list-item-href {
75
  padding: 4px 10px;
76
}
77

78
.phabricator-side-menu .phui-list-item-has-icon .phui-list-item-indented {
79
  padding-left: 24px;
80
}
81

82
.device-desktop .phui-list-sidenav .phui-list-item-href:hover {
83
  background: {$sky};
84
  color: white;
85
  cursor: pointer;
86
  text-decoration: none;
87
}
88

89
.device-desktop .phui-list-sidenav .phui-list-item-href:hover .phui-icon-view {
90
  color: {$page.content};
91
}
92

93
/* - Top, Full Width Navigations -----------------------------------------------
94

95
  Sets a page or box with a top navbar
96

97
*/
98

99
.phui-list-view.phui-list-navbar {
100
  list-style: none;
101
  overflow: hidden;
102
}
103

104
.phui-list-view.phui-list-navbar-horizontal {
105
  border-bottom: 1px solid {$thinblueborder};
106
}
107

108
.phui-list-view.phui-list-navbar > li {
109
  list-style: none;
110
  display: block;
111
}
112

113
.phui-list-view.phui-list-navbar-horizontal > li {
114
  float: left;
115
  border-right: 1px solid {$thinblueborder};
116
}
117

118
.phui-list-navbar .phui-list-item-href {
119
  color: {$bluetext};
120
  line-height: 16px;
121
}
122

123
.phui-list-navbar-horizontal .phui-list-item-href {
124
  padding: 8px 16px;
125
}
126

127
.phui-list-navbar-vertical .phui-list-item-href {
128
  padding: 8px 12px;
129
}
130

131
.phui-list-navbar-vertical {
132
  box-shadow: 0 1px 0 rgba({$alphablue}, 0.05);
133
}
134

135
.phui-list-navbar-vertical .phui-list-item-href {
136
  display: block;
137
  background: #ffffff;
138
}
139

140
.phui-list-navbar .phui-list-item-selected .phui-list-item-href {
141
  background: {$lightbluebackground};
142
  color: {$darkbluetext};
143
  font-weight: bold;
144
}
145

146
.phui-tab-group-view-tab-column {
147
  width: 220px;
148
  border-right: 1px solid {$thinblueborder};
149
  background: {$lightgreybackground};
150
}
151

152
.phui-list-navbar .phui-list-item-href:hover {
153
  background: rgba(100,100,100,.1);
154
  color: {$darkgreytext};
155
  text-decoration: none;
156
}
157

158
.phui-list-navbar .phui-list-item-icon {
159
  height: 14px;
160
  width: 14px;
161
  font-size: 14px;
162
  text-align: center;
163
}
164

165
.phui-list-navbar-vertical .phui-list-item-icon {
166
  margin-right: 8px;
167
}
168

169
.phui-list-navbar-horizontal .phui-list-item-icon {
170
  display: block;
171
}
172

173
.device-phone .phui-list-view.phui-list-navbar-horizontal > li {
174
  float: none;
175
  border: none;
176
}
177

178
/* - Two Column View, Responsive Navigations -----------------------------------
179

180
  Sets a two column page with a responsive, top navbar
181

182
*/
183

184
.phui-list-view.phui-list-tabbar {
185
  list-style: none;
186
  overflow: hidden;
187
}
188

189
.phui-list-view.phui-list-tabbar > li {
190
  list-style: none;
191
  float: left;
192
  display: block;
193
}
194

195
.phui-list-view.phui-list-tabbar > li > * {
196
  display: block;
197
}
198

199
.phui-list-tabbar .phui-list-item-href {
200
  color: {$bluetext};
201
  padding: 8px 24px;
202
  line-height: 24px;
203
  font-weight: bold;
204
  font-size: {$biggerfontsize};
205
  border-top: 4px solid transparent;
206
}
207

208
.phui-list-tabbar .phui-list-item-selected .phui-list-item-href {
209
  color: {$sky};
210
  border-bottom: 4px solid {$sky};
211
}
212

213
.phui-list-tabbar .phui-list-item-selected .phui-list-item-href
214
  .phui-icon-view {
215
    color: {$sky};
216
}
217

218
.device-desktop .phui-list-tabbar .phui-list-item-href:hover {
219
  color: {$sky};
220
  text-decoration: none;
221
}
222

223
.phui-list-tabbar .phui-list-item-icon {
224
  height: 20px;
225
  width: 20px;
226
  display: none;
227
  font-size: 20px;
228
  text-align: center;
229
}
230

231
.device-phone .phui-list-tabbar .phui-list-item-icon {
232
  display: inline-block;
233
}
234

235
.device-phone .phui-list-tabbar .phui-list-item-name {
236
  display: none;
237
}
238

239
.device-phone .phui-list-tabbar .phui-list-item-href {
240
  padding: 8px 16px;
241
}
242

243
.device-phone .phui-list-view.phui-list-navbar > li {
244
  float: none;
245
  border: none;
246
}
247

248
/* - Status Colors -------------------------------------------------------------
249

250
  Colors for navbars
251

252
*/
253

254
.phui-list-item-warn .phui-list-item-href {
255
  color: #bc7837;
256
}
257

258
.phui-list-item-fail .phui-list-item-href {
259
  color: {$red};
260
}
261

262
.phui-list-item-warn.phui-list-item-selected .phui-list-item-href,
263
.phui-list-item-warn .phui-list-item-href:hover {
264
  background: {$lightyellow};
265
  color: #bc7837;
266
}
267

268
.phui-list-item-fail.phui-list-item-selected .phui-list-item-href,
269
.phui-list-item-fail .phui-list-item-href:hover {
270
  background: {$lightred};
271
  color: {$red};
272
}
273

274
.phui-list-item-warn.phui-list-item-selected .phui-list-item-href:hover {
275
  background: #fcf0bd;
276
}
277

278
.phui-list-item-fail.phui-list-item-selected .phui-list-item-href:hover {
279
  background: #f5d3d0;
280
}
281

282
/* - Dashboards ------------------------------------------------------------ */
283

284
.dashboard-panel .phui-list-view.phui-list-navbar {
285
  border-left: 1px solid {$lightblueborder};
286
  border-right: 1px solid {$lightblueborder};
287
  border-bottom: 1px solid {$thinblueborder};
288
}
289

290
/* - Info Stack ------------------------------------------------------------ */
291

292
.phui-info-view + .phui-list-view {
293
  margin-top: 16px;
294
  border-top: 1px solid {$thinblueborder};
295
}
296

297
/* - Action Icon ----------------------------------------------------------- */
298

299
.phabricator-nav-local .phui-list-item-has-action-icon
300
  .phui-list-item-action-href {
301
  position: absolute;
302
  width: 28px;
303
  top: 0;
304
  right: 0;
305
  bottom: 0;
306
  text-align: center;
307
  line-height: 28px;
308
  background-color: transparent;
309
  display: none;
310
}
311

312
.phabricator-nav-local .phui-list-item-has-action-icon.phui-list-item-selected
313
  .phui-list-item-href {
314
  padding-right: 32px;
315
}
316

317
.phabricator-nav-local .phui-list-item-has-action-icon.phui-list-item-selected
318
  .phui-list-item-action-href {
319
    display: block;
320
}
321

322
.phabricator-nav-local .phui-list-item-has-action-icon
323
  .phui-list-item-action-href:hover {
324
  background-color: rgba({$alphablack},.05);
325
}
326

327
.phabricator-nav-local .phui-list-item-has-action-icon
328
  .phui-list-item-action-icon {
329
  opacity: 0.5;
330
}
331

332
.phabricator-nav-local .phui-list-item-has-action-icon
333
  .phui-list-item-action-href:hover
334
  .phui-list-item-action-icon {
335
  opacity: 1;
336
}
337

338
/* - Item Counts ----------------------------------------------------------- */
339

340
.phui-list-item-count {
341
  position: absolute;
342
  right: 7px;
343
  top: 7px;
344
  background: {$blue};
345
  border-radius: 2px;
346
  color: #fff;
347
  font-weight: bold;
348
  padding: 0 5px 1px;
349
  font-size: {$smallestfontsize};
350
}
351

352
Product

Resources

Company
