commonroutesApp/www/lib/angular-material/modules/closure/list/list.css
www/lib/angular-material/modules/closure/list/list.cssRaw
1/*!
2 * Angular Material Design
3 * https://github.com/angular/material
4 * @license MIT
5 * v1.1.1
6 */
7md-list {
8 display: block;
9 padding: 8px 0px 8px 0px; }
10 md-list .md-subheader {
11 font-size: 14px;
12 font-weight: 500;
13 letter-spacing: 0.010em;
14 line-height: 1.2em; }
15 md-list.md-dense md-list-item,
16 md-list.md-dense md-list-item .md-list-item-inner {
17 min-height: 48px; }
18 md-list.md-dense md-list-item::before,
19 md-list.md-dense md-list-item .md-list-item-inner::before {
20 content: '';
21 min-height: 48px;
22 visibility: hidden;
23 display: inline-block; }
24 md-list.md-dense md-list-item md-icon:first-child,
25 md-list.md-dense md-list-item .md-list-item-inner md-icon:first-child {
26 width: 20px;
27 height: 20px; }
28 md-list.md-dense md-list-item > md-icon:first-child:not(.md-avatar-icon),
29 md-list.md-dense md-list-item .md-list-item-inner > md-icon:first-child:not(.md-avatar-icon) {
30 margin-right: 36px; }
31 [dir=rtl] md-list.md-dense md-list-item > md-icon:first-child:not(.md-avatar-icon), [dir=rtl]
32 md-list.md-dense md-list-item .md-list-item-inner > md-icon:first-child:not(.md-avatar-icon) {
33 margin-right: auto;
34 margin-left: 36px; }
35 md-list.md-dense md-list-item .md-avatar, md-list.md-dense md-list-item .md-avatar-icon,
36 md-list.md-dense md-list-item .md-list-item-inner .md-avatar,
37 md-list.md-dense md-list-item .md-list-item-inner .md-avatar-icon {
38 margin-right: 20px; }
39 [dir=rtl] md-list.md-dense md-list-item .md-avatar, [dir=rtl] md-list.md-dense md-list-item .md-avatar-icon, [dir=rtl]
40 md-list.md-dense md-list-item .md-list-item-inner .md-avatar, [dir=rtl]
41 md-list.md-dense md-list-item .md-list-item-inner .md-avatar-icon {
42 margin-right: auto;
43 margin-left: 20px; }
44 md-list.md-dense md-list-item .md-avatar,
45 md-list.md-dense md-list-item .md-list-item-inner .md-avatar {
46 -webkit-box-flex: 0;
47 -webkit-flex: none;
48 flex: none;
49 width: 36px;
50 height: 36px; }
51 md-list.md-dense md-list-item.md-2-line .md-list-item-text.md-offset, md-list.md-dense md-list-item.md-2-line > .md-no-style .md-list-item-text.md-offset, md-list.md-dense md-list-item.md-3-line .md-list-item-text.md-offset, md-list.md-dense md-list-item.md-3-line > .md-no-style .md-list-item-text.md-offset {
52 margin-left: 56px; }
53 [dir=rtl] md-list.md-dense md-list-item.md-2-line .md-list-item-text.md-offset, [dir=rtl] md-list.md-dense md-list-item.md-2-line > .md-no-style .md-list-item-text.md-offset, [dir=rtl] md-list.md-dense md-list-item.md-3-line .md-list-item-text.md-offset, [dir=rtl] md-list.md-dense md-list-item.md-3-line > .md-no-style .md-list-item-text.md-offset {
54 margin-left: auto;
55 margin-right: 56px; }
56 md-list.md-dense md-list-item.md-2-line .md-list-item-text h3,
57 md-list.md-dense md-list-item.md-2-line .md-list-item-text h4,
58 md-list.md-dense md-list-item.md-2-line .md-list-item-text p, md-list.md-dense md-list-item.md-2-line > .md-no-style .md-list-item-text h3,
59 md-list.md-dense md-list-item.md-2-line > .md-no-style .md-list-item-text h4,
60 md-list.md-dense md-list-item.md-2-line > .md-no-style .md-list-item-text p, md-list.md-dense md-list-item.md-3-line .md-list-item-text h3,
61 md-list.md-dense md-list-item.md-3-line .md-list-item-text h4,
62 md-list.md-dense md-list-item.md-3-line .md-list-item-text p, md-list.md-dense md-list-item.md-3-line > .md-no-style .md-list-item-text h3,
63 md-list.md-dense md-list-item.md-3-line > .md-no-style .md-list-item-text h4,
64 md-list.md-dense md-list-item.md-3-line > .md-no-style .md-list-item-text p {
65 line-height: 1.05;
66 font-size: 12px; }
67 md-list.md-dense md-list-item.md-2-line .md-list-item-text h3, md-list.md-dense md-list-item.md-2-line > .md-no-style .md-list-item-text h3, md-list.md-dense md-list-item.md-3-line .md-list-item-text h3, md-list.md-dense md-list-item.md-3-line > .md-no-style .md-list-item-text h3 {
68 font-size: 13px; }
69 md-list.md-dense md-list-item.md-2-line, md-list.md-dense md-list-item.md-2-line > .md-no-style {
70 min-height: 60px; }
71 md-list.md-dense md-list-item.md-2-line::before, md-list.md-dense md-list-item.md-2-line > .md-no-style::before {
72 content: '';
73 min-height: 60px;
74 visibility: hidden;
75 display: inline-block; }
76 md-list.md-dense md-list-item.md-2-line > .md-avatar, md-list.md-dense md-list-item.md-2-line .md-avatar-icon, md-list.md-dense md-list-item.md-2-line > .md-no-style > .md-avatar, md-list.md-dense md-list-item.md-2-line > .md-no-style .md-avatar-icon {
77 margin-top: 12px; }
78 md-list.md-dense md-list-item.md-3-line, md-list.md-dense md-list-item.md-3-line > .md-no-style {
79 min-height: 76px; }
80 md-list.md-dense md-list-item.md-3-line::before, md-list.md-dense md-list-item.md-3-line > .md-no-style::before {
81 content: '';
82 min-height: 76px;
83 visibility: hidden;
84 display: inline-block; }
85 md-list.md-dense md-list-item.md-3-line > md-icon:first-child,
86 md-list.md-dense md-list-item.md-3-line > .md-avatar, md-list.md-dense md-list-item.md-3-line > .md-no-style > md-icon:first-child,
87 md-list.md-dense md-list-item.md-3-line > .md-no-style > .md-avatar {
88 margin-top: 16px; }
89
90md-list-item {
91 position: relative; }
92 md-list-item.md-proxy-focus.md-focused .md-no-style {
93 -webkit-transition: background-color 0.15s linear;
94 transition: background-color 0.15s linear; }
95 md-list-item._md-button-wrap {
96 position: relative; }
97 md-list-item._md-button-wrap > div.md-button:first-child {
98 display: -webkit-box;
99 display: -webkit-flex;
100 display: flex;
101 -webkit-box-align: center;
102 -webkit-align-items: center;
103 align-items: center;
104 -webkit-box-pack: start;
105 -webkit-justify-content: flex-start;
106 justify-content: flex-start;
107 padding: 0 16px;
108 margin: 0;
109 font-weight: 400;
110 text-align: left;
111 border: medium none; }
112 [dir=rtl] md-list-item._md-button-wrap > div.md-button:first-child {
113 text-align: right; }
114 md-list-item._md-button-wrap > div.md-button:first-child > .md-button:first-child {
115 position: absolute;
116 top: 0;
117 left: 0;
118 height: 100%;
119 margin: 0;
120 padding: 0; }
121 md-list-item._md-button-wrap > div.md-button:first-child .md-list-item-inner {
122 width: 100%;
123 min-height: inherit; }
124 md-list-item.md-no-proxy,
125 md-list-item .md-no-style {
126 position: relative;
127 padding: 0px 16px;
128 -webkit-box-flex: 1;
129 -webkit-flex: 1 1 auto;
130 flex: 1 1 auto; }
131 md-list-item.md-no-proxy.md-button,
132 md-list-item .md-no-style.md-button {
133 font-size: inherit;
134 height: inherit;
135 text-align: left;
136 text-transform: none;
137 width: 100%;
138 white-space: normal;
139 -webkit-box-orient: vertical;
140 -webkit-box-direction: normal;
141 -webkit-flex-direction: inherit;
142 flex-direction: inherit;
143 -webkit-box-align: inherit;
144 -webkit-align-items: inherit;
145 -ms-grid-row-align: inherit;
146 align-items: inherit;
147 border-radius: 0;
148 margin: 0; }
149 [dir=rtl] md-list-item.md-no-proxy.md-button, [dir=rtl]
150 md-list-item .md-no-style.md-button {
151 text-align: right; }
152 md-list-item.md-no-proxy.md-button > .md-ripple-container,
153 md-list-item .md-no-style.md-button > .md-ripple-container {
154 border-radius: 0; }
155 md-list-item.md-no-proxy:focus,
156 md-list-item .md-no-style:focus {
157 outline: none; }
158 md-list-item.md-clickable:hover {
159 cursor: pointer; }
160 md-list-item md-divider {
161 position: absolute;
162 bottom: 0;
163 left: 0;
164 width: 100%; }
165 [dir=rtl] md-list-item md-divider {
166 left: auto;
167 right: 0; }
168 md-list-item md-divider[md-inset] {
169 left: 72px;
170 width: calc(100% - 72px);
171 margin: 0 !important; }
172 [dir=rtl] md-list-item md-divider[md-inset] {
173 left: auto;
174 right: 72px; }
175 md-list-item,
176 md-list-item .md-list-item-inner {
177 display: -webkit-box;
178 display: -webkit-flex;
179 display: flex;
180 -webkit-box-pack: start;
181 -webkit-justify-content: flex-start;
182 justify-content: flex-start;
183 -webkit-box-align: center;
184 -webkit-align-items: center;
185 align-items: center;
186 min-height: 48px;
187 height: auto; }
188 md-list-item::before,
189 md-list-item .md-list-item-inner::before {
190 content: '';
191 min-height: 48px;
192 visibility: hidden;
193 display: inline-block; }
194 md-list-item > div.md-primary > md-icon:not(.md-avatar-icon),
195 md-list-item > div.md-secondary > md-icon:not(.md-avatar-icon),
196 md-list-item > md-icon:first-child:not(.md-avatar-icon),
197 md-list-item > md-icon.md-secondary:not(.md-avatar-icon),
198 md-list-item .md-list-item-inner > div.md-primary > md-icon:not(.md-avatar-icon),
199 md-list-item .md-list-item-inner > div.md-secondary > md-icon:not(.md-avatar-icon),
200 md-list-item .md-list-item-inner > md-icon:first-child:not(.md-avatar-icon),
201 md-list-item .md-list-item-inner > md-icon.md-secondary:not(.md-avatar-icon) {
202 width: 24px;
203 margin-top: 16px;
204 margin-bottom: 12px;
205 box-sizing: content-box; }
206 md-list-item > div.md-primary > md-checkbox,
207 md-list-item > div.md-secondary > md-checkbox,
208 md-list-item > md-checkbox,
209 md-list-item md-checkbox.md-secondary,
210 md-list-item .md-list-item-inner > div.md-primary > md-checkbox,
211 md-list-item .md-list-item-inner > div.md-secondary > md-checkbox,
212 md-list-item .md-list-item-inner > md-checkbox,
213 md-list-item .md-list-item-inner md-checkbox.md-secondary {
214 -webkit-align-self: center;
215 align-self: center; }
216 md-list-item > div.md-primary > md-checkbox .md-label,
217 md-list-item > div.md-secondary > md-checkbox .md-label,
218 md-list-item > md-checkbox .md-label,
219 md-list-item md-checkbox.md-secondary .md-label,
220 md-list-item .md-list-item-inner > div.md-primary > md-checkbox .md-label,
221 md-list-item .md-list-item-inner > div.md-secondary > md-checkbox .md-label,
222 md-list-item .md-list-item-inner > md-checkbox .md-label,
223 md-list-item .md-list-item-inner md-checkbox.md-secondary .md-label {
224 display: none; }
225 md-list-item > md-icon:first-child:not(.md-avatar-icon),
226 md-list-item .md-list-item-inner > md-icon:first-child:not(.md-avatar-icon) {
227 margin-right: 32px; }
228 [dir=rtl] md-list-item > md-icon:first-child:not(.md-avatar-icon), [dir=rtl]
229 md-list-item .md-list-item-inner > md-icon:first-child:not(.md-avatar-icon) {
230 margin-right: auto;
231 margin-left: 32px; }
232 md-list-item .md-avatar, md-list-item .md-avatar-icon,
233 md-list-item .md-list-item-inner .md-avatar,
234 md-list-item .md-list-item-inner .md-avatar-icon {
235 margin-top: 8px;
236 margin-bottom: 8px;
237 margin-right: 16px;
238 border-radius: 50%;
239 box-sizing: content-box; }
240 [dir=rtl] md-list-item .md-avatar, [dir=rtl] md-list-item .md-avatar-icon, [dir=rtl]
241 md-list-item .md-list-item-inner .md-avatar, [dir=rtl]
242 md-list-item .md-list-item-inner .md-avatar-icon {
243 margin-right: auto;
244 margin-left: 16px; }
245 md-list-item .md-avatar,
246 md-list-item .md-list-item-inner .md-avatar {
247 -webkit-box-flex: 0;
248 -webkit-flex: none;
249 flex: none;
250 width: 40px;
251 height: 40px; }
252 md-list-item .md-avatar-icon,
253 md-list-item .md-list-item-inner .md-avatar-icon {
254 padding: 8px; }
255 md-list-item .md-avatar-icon svg,
256 md-list-item .md-list-item-inner .md-avatar-icon svg {
257 width: 24px;
258 height: 24px; }
259 md-list-item > md-checkbox,
260 md-list-item .md-list-item-inner > md-checkbox {
261 width: 24px;
262 margin-left: 3px;
263 margin-right: 29px;
264 margin-top: 16px; }
265 [dir=rtl] md-list-item > md-checkbox, [dir=rtl]
266 md-list-item .md-list-item-inner > md-checkbox {
267 margin-left: 29px; }
268 [dir=rtl] md-list-item > md-checkbox, [dir=rtl]
269 md-list-item .md-list-item-inner > md-checkbox {
270 margin-right: 3px; }
271 md-list-item .md-secondary-container,
272 md-list-item .md-list-item-inner .md-secondary-container {
273 display: -webkit-box;
274 display: -webkit-flex;
275 display: flex;
276 -webkit-box-align: center;
277 -webkit-align-items: center;
278 align-items: center;
279 -webkit-flex-shrink: 0;
280 flex-shrink: 0;
281 margin: auto;
282 margin-right: 0;
283 margin-left: auto; }
284 [dir=rtl] md-list-item .md-secondary-container, [dir=rtl]
285 md-list-item .md-list-item-inner .md-secondary-container {
286 margin-right: auto; }
287 [dir=rtl] md-list-item .md-secondary-container, [dir=rtl]
288 md-list-item .md-list-item-inner .md-secondary-container {
289 margin-left: 0; }
290 md-list-item .md-secondary-container .md-button:last-of-type, md-list-item .md-secondary-container .md-icon-button:last-of-type,
291 md-list-item .md-list-item-inner .md-secondary-container .md-button:last-of-type,
292 md-list-item .md-list-item-inner .md-secondary-container .md-icon-button:last-of-type {
293 margin-right: 0; }
294 [dir=rtl] md-list-item .md-secondary-container .md-button:last-of-type, [dir=rtl] md-list-item .md-secondary-container .md-icon-button:last-of-type, [dir=rtl]
295 md-list-item .md-list-item-inner .md-secondary-container .md-button:last-of-type, [dir=rtl]
296 md-list-item .md-list-item-inner .md-secondary-container .md-icon-button:last-of-type {
297 margin-right: auto;
298 margin-left: 0; }
299 md-list-item .md-secondary-container md-checkbox,
300 md-list-item .md-list-item-inner .md-secondary-container md-checkbox {
301 margin-top: 0;
302 margin-bottom: 0; }
303 md-list-item .md-secondary-container md-checkbox:last-child,
304 md-list-item .md-list-item-inner .md-secondary-container md-checkbox:last-child {
305 width: 24px;
306 margin-right: 0; }
307 [dir=rtl] md-list-item .md-secondary-container md-checkbox:last-child, [dir=rtl]
308 md-list-item .md-list-item-inner .md-secondary-container md-checkbox:last-child {
309 margin-right: auto;
310 margin-left: 0; }
311 md-list-item .md-secondary-container md-switch,
312 md-list-item .md-list-item-inner .md-secondary-container md-switch {
313 margin-top: 0;
314 margin-bottom: 0;
315 margin-right: -6px; }
316 [dir=rtl] md-list-item .md-secondary-container md-switch, [dir=rtl]
317 md-list-item .md-list-item-inner .md-secondary-container md-switch {
318 margin-right: auto;
319 margin-left: -6px; }
320 md-list-item > p, md-list-item > .md-list-item-inner > p,
321 md-list-item .md-list-item-inner > p,
322 md-list-item .md-list-item-inner > .md-list-item-inner > p {
323 -webkit-box-flex: 1;
324 -webkit-flex: 1 1 auto;
325 flex: 1 1 auto;
326 margin: 0; }
327 md-list-item.md-2-line, md-list-item.md-2-line > .md-no-style, md-list-item.md-3-line, md-list-item.md-3-line > .md-no-style {
328 -webkit-box-align: start;
329 -webkit-align-items: flex-start;
330 -ms-grid-row-align: flex-start;
331 align-items: flex-start;
332 -webkit-box-pack: center;
333 -webkit-justify-content: center;
334 justify-content: center; }
335 md-list-item.md-2-line.md-long-text, md-list-item.md-2-line > .md-no-style.md-long-text, md-list-item.md-3-line.md-long-text, md-list-item.md-3-line > .md-no-style.md-long-text {
336 margin-top: 8px;
337 margin-bottom: 8px; }
338 md-list-item.md-2-line .md-list-item-text, md-list-item.md-2-line > .md-no-style .md-list-item-text, md-list-item.md-3-line .md-list-item-text, md-list-item.md-3-line > .md-no-style .md-list-item-text {
339 -webkit-box-flex: 1;
340 -webkit-flex: 1 1 auto;
341 flex: 1 1 auto;
342 margin: auto;
343 text-overflow: ellipsis;
344 overflow: hidden; }
345 md-list-item.md-2-line .md-list-item-text.md-offset, md-list-item.md-2-line > .md-no-style .md-list-item-text.md-offset, md-list-item.md-3-line .md-list-item-text.md-offset, md-list-item.md-3-line > .md-no-style .md-list-item-text.md-offset {
346 margin-left: 56px; }
347 [dir=rtl] md-list-item.md-2-line .md-list-item-text.md-offset, [dir=rtl] md-list-item.md-2-line > .md-no-style .md-list-item-text.md-offset, [dir=rtl] md-list-item.md-3-line .md-list-item-text.md-offset, [dir=rtl] md-list-item.md-3-line > .md-no-style .md-list-item-text.md-offset {
348 margin-left: auto;
349 margin-right: 56px; }
350 md-list-item.md-2-line .md-list-item-text h3, md-list-item.md-2-line > .md-no-style .md-list-item-text h3, md-list-item.md-3-line .md-list-item-text h3, md-list-item.md-3-line > .md-no-style .md-list-item-text h3 {
351 font-size: 16px;
352 font-weight: 400;
353 letter-spacing: 0.010em;
354 margin: 0 0 0px 0;
355 line-height: 1.2em;
356 overflow: hidden;
357 white-space: nowrap;
358 text-overflow: ellipsis; }
359 md-list-item.md-2-line .md-list-item-text h4, md-list-item.md-2-line > .md-no-style .md-list-item-text h4, md-list-item.md-3-line .md-list-item-text h4, md-list-item.md-3-line > .md-no-style .md-list-item-text h4 {
360 font-size: 14px;
361 letter-spacing: 0.010em;
362 margin: 3px 0 1px 0;
363 font-weight: 400;
364 line-height: 1.2em;
365 overflow: hidden;
366 white-space: nowrap;
367 text-overflow: ellipsis; }
368 md-list-item.md-2-line .md-list-item-text p, md-list-item.md-2-line > .md-no-style .md-list-item-text p, md-list-item.md-3-line .md-list-item-text p, md-list-item.md-3-line > .md-no-style .md-list-item-text p {
369 font-size: 14px;
370 font-weight: 500;
371 letter-spacing: 0.010em;
372 margin: 0 0 0 0;
373 line-height: 1.6em; }
374 md-list-item.md-2-line, md-list-item.md-2-line > .md-no-style {
375 height: auto;
376 min-height: 72px; }
377 md-list-item.md-2-line::before, md-list-item.md-2-line > .md-no-style::before {
378 content: '';
379 min-height: 72px;
380 visibility: hidden;
381 display: inline-block; }
382 md-list-item.md-2-line > .md-avatar, md-list-item.md-2-line .md-avatar-icon, md-list-item.md-2-line > .md-no-style > .md-avatar, md-list-item.md-2-line > .md-no-style .md-avatar-icon {
383 margin-top: 12px; }
384 md-list-item.md-2-line > md-icon:first-child, md-list-item.md-2-line > .md-no-style > md-icon:first-child {
385 -webkit-align-self: flex-start;
386 align-self: flex-start; }
387 md-list-item.md-2-line .md-list-item-text, md-list-item.md-2-line > .md-no-style .md-list-item-text {
388 -webkit-box-flex: 1;
389 -webkit-flex: 1 1 auto;
390 flex: 1 1 auto; }
391 md-list-item.md-3-line, md-list-item.md-3-line > .md-no-style {
392 height: auto;
393 min-height: 88px; }
394 md-list-item.md-3-line::before, md-list-item.md-3-line > .md-no-style::before {
395 content: '';
396 min-height: 88px;
397 visibility: hidden;
398 display: inline-block; }
399 md-list-item.md-3-line > md-icon:first-child,
400 md-list-item.md-3-line > .md-avatar, md-list-item.md-3-line > .md-no-style > md-icon:first-child,
401 md-list-item.md-3-line > .md-no-style > .md-avatar {
402 margin-top: 16px; }