UNPKG

3.05 kBCSSView Raw
1/**
2 * @license
3 * Copyright Google LLC All Rights Reserved.
4 *
5 * Use of this source code is governed by an MIT-style license that can be
6 * found in the LICENSE file at https://github.com/material-components/material-components-web/blob/master/LICENSE
7 */
8.mdc-image-list {
9 display: flex;
10 flex-wrap: wrap;
11 margin: 0 auto;
12 padding: 0;
13}
14
15.mdc-image-list__item,
16.mdc-image-list__image-aspect-container {
17 position: relative;
18 box-sizing: border-box;
19}
20
21.mdc-image-list__item {
22 list-style-type: none;
23}
24
25.mdc-image-list__image {
26 width: 100%;
27}
28
29.mdc-image-list__image-aspect-container .mdc-image-list__image {
30 position: absolute;
31 top: 0;
32 right: 0;
33 bottom: 0;
34 left: 0;
35 height: 100%;
36 background-repeat: no-repeat;
37 background-position: center;
38 background-size: cover;
39}
40
41.mdc-image-list__image-aspect-container {
42 padding-bottom: calc(100% / 1);
43}
44
45.mdc-image-list__image {
46 border-radius: 0;
47}
48
49.mdc-image-list--with-text-protection .mdc-image-list__supporting {
50 border-top-left-radius: 0;
51 border-top-right-radius: 0;
52 border-bottom-right-radius: 0;
53 border-bottom-left-radius: 0;
54}
55
56.mdc-image-list__supporting {
57 color: rgba(0, 0, 0, 0.87);
58 /* @alternate */
59 color: var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87));
60 display: flex;
61 align-items: center;
62 justify-content: space-between;
63 box-sizing: border-box;
64 padding: 8px 0;
65 line-height: 24px;
66}
67
68.mdc-image-list__label {
69 -moz-osx-font-smoothing: grayscale;
70 -webkit-font-smoothing: antialiased;
71 font-family: Roboto, sans-serif;
72 /* @alternate */
73 font-family: var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
74 font-size: 1rem;
75 /* @alternate */
76 font-size: var(--mdc-typography-subtitle1-font-size, 1rem);
77 line-height: 1.75rem;
78 /* @alternate */
79 line-height: var(--mdc-typography-subtitle1-line-height, 1.75rem);
80 font-weight: 400;
81 /* @alternate */
82 font-weight: var(--mdc-typography-subtitle1-font-weight, 400);
83 letter-spacing: 0.009375em;
84 /* @alternate */
85 letter-spacing: var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);
86 text-decoration: inherit;
87 /* @alternate */
88 -webkit-text-decoration: var(--mdc-typography-subtitle1-text-decoration, inherit);
89 text-decoration: var(--mdc-typography-subtitle1-text-decoration, inherit);
90 text-transform: inherit;
91 /* @alternate */
92 text-transform: var(--mdc-typography-subtitle1-text-transform, inherit);
93 text-overflow: ellipsis;
94 white-space: nowrap;
95 overflow: hidden;
96}
97
98.mdc-image-list--with-text-protection .mdc-image-list__supporting {
99 position: absolute;
100 bottom: 0;
101 width: 100%;
102 height: 48px;
103 padding: 0 16px;
104 background: rgba(0, 0, 0, 0.6);
105 color: #fff;
106}
107
108.mdc-image-list--masonry {
109 display: block;
110}
111.mdc-image-list--masonry .mdc-image-list__item {
112 -webkit-column-break-inside: avoid;
113 break-inside: avoid-column;
114}
115.mdc-image-list--masonry .mdc-image-list__image {
116 display: block;
117 height: auto;
118}
119
120/*# sourceMappingURL=mdc.image-list.css.map*/
\No newline at end of file