I. 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