6. lib / css / md-list.css

1.md-list {
2 margin: 0.5rem 0;
3 padding: 0;
4 list-style-type: none;
5}
6
7.md-list .md-one-line,
8.md-list .md-two-line,
9.md-list .md-three-line {
10 position: relative;
11 display: flex;
12 box-sizing: border-box;
13}
14
15/* container */
16.md-list .md-one-line::before,
17.md-list .md-two-line::before,
18.md-list .md-three-line::before {
19 content: "";
20 position: absolute;
21 z-index: -2;
22 top: 0;
23 right: 0;
24 left: 0;
25 bottom: 0;
26 background-color: var(--md-sys-color-surface);
27}
28
29/* state layer */
30.md-list .md-one-line::after,
31.md-list .md-two-line::after,
32.md-list .md-three-line::after {
33 content: "";
34 position: absolute;
35 z-index: -1;
36 top: 0;
37 right: 0;
38 left: 0;
39 bottom: 0;
40 background-color: transparent;
41}
42
43.md-list .md-one-line {
44 align-items: center;
45 gap: 1rem;
46 min-height: 3.5rem;
47 padding: 0.5rem 1.5rem 0.5rem 1rem;
48}
49
50.md-list .md-one-line.video,
51.md-list .md-two-line.video {
52 padding: 0.75rem 1.5rem 0.75rem 0;
53}
54
55.md-list .md-two-line,
56.md-list .md-three-line {
57 flex-flow: column;
58}
59
60.md-list .md-two-line {
61 justify-content: center;
62 min-height: 4.5rem;
63 padding: 0.5rem 1.5rem 0.5rem 1rem;
64}
65
66.md-list .md-two-line.icon,
67.md-list .md-two-line.avatar,
68.md-list .md-two-line.image,
69.md-list .md-two-line.video,
70.md-list .md-three-line.icon,
71.md-list .md-three-line.avatar,
72.md-list .md-three-line.image,
73.md-list .md-three-line.video {
74 display: grid;
75 column-gap: 1rem;
76 row-gap: 0;
77 grid-template-areas:
78 "img headline"
79 "img supporting";
80}
81
82.md-list .md-two-line.icon,
83.md-list .md-two-line.avatar,
84.md-list .md-two-line.image,
85.md-list .md-two-line.video {
86 align-content: center;
87 grid-template-rows: 1fr 1fr;
88}
89
90.md-list .md-two-line.icon,
91.md-list .md-three-line.icon {
92 grid-template-columns: var(--iconSize) 1fr;
93}
94
95.md-list .md-two-line.avatar,
96.md-list .md-three-line.avatar {
97 grid-template-columns: var(--avatarSize) 1fr;
98}
99
100.md-list .md-two-line.image,
101.md-list .md-three-line.image {
102 grid-template-columns: var(--imageSize) 1fr;
103}
104
105.md-list .md-two-line.video,
106.md-list .md-three-line.video {
107 grid-template-columns: var(--videoWidth) 1fr;
108}
109
110.md-list .md-three-line {
111 align-content: flex-start;
112 min-height: 5.5rem;
113 padding: 0.75rem 1.5rem 0.75rem 1rem;
114}
115
116.md-list .md-three-line.video {
117 padding: 0.75rem 1.5rem 0.75rem 0;
118}
119
120.md-list .md-three-line.icon,
121.md-list .md-three-line.avatar,
122.md-list .md-three-line.image,
123.md-list .md-three-line.video {
124 align-content: start;
125 grid-template-rows: var(--md-sys-typescale-label-large-line-height) 1fr;
126}
127
128/* state layer */
129.md-list .md-one-line:hover::after,
130.md-list .md-two-line:hover::after,
131.md-list .md-three-line:hover::after {
132 background-color: var(--md-sys-color-on-surface);
133 opacity: var(--md-sys-state-hover-state-layer-opacity);
134}
135
136/* state layer */
137.md-list a.md-one-line:focus::after,
138.md-list a.md-two-line:focus::after,
139.md-list a.md-three-line:focus::after,
140.md-list a.md-one-line:focus-visible::after,
141.md-list a.md-two-line:focus-visible::after,
142.md-list a.md-three-line:focus-visible::after {
143 background-color: var(--md-sys-color-on-surface);
144 opacity: var(--md-sys-state-focus-state-layer-opacity);
145}
146
147.md-list a:focus,
148.md-list a:focus-visible {
149 outline: none;
150}
151
152.md-list a:active {
153 background-position: center;
154 background-image:
155 radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%);
156 background-size: 100%;
157 animation-name: md-ripple;
158 animation-duration: var(--md-sys-motion-duration-500);
159 box-shadow: var(--md-box_shadow_level0) !important;
160}
161
162/* state layer */
163.md-list a.md-one-line:active::after,
164.md-list a.md-two-line:active::after,
165.md-list a.md-three-line:active::after {
166 background-color: var(--md-sys-color-on-surface);
167 opacity: var(--md-sys-state-pressed-state-layer-opacity);
168}
169
170.md-list a.md-two-line,
171.md-list a.md-three-line {
172 text-decoration: none;
173}
174
175.md-list a.md-two-line .headline,
176.md-list a.md-three-line .headline {
177 text-decoration: underline;
178}
179
180.md-list .headline {
181 grid-area: headline;
182 display: block;
183 box-sizing: border-box;
184 color: var(--md-sys-color-on-surface);
185 font-family: var(--md-sys-typescale-body-large-font);
186 font-weight: var(--md-sys-typescale-body-large-weight);
187 font-size: var(--md-sys-typescale-body-large-size);
188 font-style: var(--md-sys-typescale-body-large-font-style);
189 letter-spacing: var(--md-sys-typescale-body-large-tracking);
190 line-height: var(--md-sys-typescale-body-large-line-height);
191 text-transform: var(--md-sys-typescale-body-large-text-transform);
192 text-decoration: var(--md-sys-typescale-body-large-text-decoration);
193 max-height: var(--md-sys-typescale-body-large-line-height);
194 white-space: nowrap;
195 text-overflow: ellipsis;
196 overflow: hidden;
197}
198
199.md-list .md-two-line.icon .headline,
200.md-list .md-two-line.avatar .headline,
201.md-list .md-two-line.image .headline,
202.md-list .md-two-line.video .headline,
203.md-list .md-three-line.icon .headline,
204.md-list .md-three-line.avatar .headline,
205.md-list .md-three-line.image .headline,
206.md-list .md-three-line.video .headline {
207 align-self: end;
208}
209
210.md-list .supporting {
211 grid-area: supporting;
212 display: -webkit-box;
213 -webkit-box-orient: vertical;
214 overflow: hidden;
215 box-sizing: border-box;
216 align-self: start;
217 font-family: var(--md-sys-typescale-body-medium-font);
218 font-weight: var(--md-sys-typescale-body-medium-weight);
219 font-size: var(--md-sys-typescale-body-medium-size);
220 font-style: var(--md-sys-typescale-body-medium-font-style);
221 letter-spacing: var(--md-sys-typescale-body-medium-tracking);
222 line-height: var(--md-sys-typescale-body-medium-line-height);
223 text-transform: var(--md-sys-typescale-body-medium-text-transform);
224 text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
225}
226
227.md-list .md-two-line .supporting {
228 max-height: var(--md-sys-typescale-body-medium-line-height);
229 line-clamp: 1;
230 -webkit-line-clamp: 1;
231}
232
233.md-list .md-three-line .supporting {
234 max-height: calc(2 * var(--md-sys-typescale-body-medium-line-height));
235 line-clamp: 2;
236 -webkit-line-clamp: 2;
237}
238
239.md-list .avatar img,
240.md-list .avatar label,
241.md-list .avatar .material-symbols-outlined:first-child {
242 flex-shrink: 0;
243 background-color: var(--md-sys-color-primary-container);
244 color: var(--md-sys-color-on-primary-container);
245 border-radius: 50%;
246 width: var(--avatarSize);
247 height: var(--avatarSize);
248}
249
250.md-list .avatar label {
251 display: inline-block;
252 font-family: var(--md-sys-typescale-title-medium-font);
253 font-weight: var(--md-sys-typescale-title-medium-weight);
254 font-size: var(--md-sys-typescale-title-medium-size);
255 font-style: var(--md-sys-typescale-title-medium-font-style);
256 letter-spacing: var(--md-sys-typescale-title-medium-tracking);
257 line-height: var(--md-sys-typescale-title-medium-line-height);
258 text-transform: var(--md-sys-typescale-title-medium-text-transform);
259 text-decoration: var(--md-sys-typescale-title-medium-text-decoration);
260 overflow: hidden;
261}
262
263.md-list .avatar .material-symbols-outlined:first-child {
264 font-size: var(--avatarSize);
265}
266
267.md-list .avatar.md-two-line img,
268.md-list .avatar.md-two-line label,
269.md-list .avatar.md-two-line .material-symbols-outlined:first-child {
270 grid-area: img;
271 align-self: center;
272}
273
274.md-list .avatar.md-three-line img,
275.md-list .avatar.md-three-line label,
276.md-list .avatar.md-three-line .material-symbols-outlined:first-child {
277 grid-area: img;
278 align-self: start;
279}
280
281.md-list .icon img,
282.md-list .icon .material-symbols-outlined:first-child {
283 flex-shrink: 0;
284 color: var(--md-sys-color-on-surface-variant);
285 width: var(--iconSize);
286 height: var(--iconSize);
287}
288
289.md-list .icon .material-symbols-outlined:first-child {
290 font-size: var(--iconSize);
291}
292
293.md-list .icon.md-two-line img,
294.md-list .icon.md-two-line .material-symbols-outlined:first-child {
295 grid-area: img;
296 align-self: center;
297}
298
299.md-list .icon.md-three-line img,
300.md-list .icon.md-three-line .material-symbols-outlined:first-child {
301 grid-area: img;
302 align-self: start;
303}
304
305.md-list .video img {
306 flex-shrink: 0;
307 color: var(--md-sys-color-on-surface-variant);
308 width: var(--videoWidth);
309 height: var(--videoHeight);
310}
311
312.md-list .video.md-two-line img {
313 grid-area: img;
314 align-self: center;
315}
316
317.md-list .video.md-three-line img {
318 grid-area: img;
319 align-self: start;
320}
321
322.md-list .image img,
323.md-list .image .material-symbols-outlined:first-child {
324 flex-shrink: 0;
325 color: var(--md-sys-color-on-surface-variant);
326 width: var(--imageSize);
327 height: var(--imageSize);
328}
329
330.md-list .image .material-symbols-outlined:first-child {
331 font-size: var(--imageSize);
332}
333
334.md-list .image.md-two-line img,
335.md-list .image.md-two-line .material-symbols-outlined:first-child {
336 grid-area: img;
337 align-self: center;
338}
339
340.md-list .image.md-three-line img,
341.md-list .image.md-three-line .material-symbols-outlined:first-child {
342 grid-area: img;
343 align-self: start;
344}
skip_previous skip_next