UNPKG

8.45 kBCSSView Raw
1/**
2 * This mixin will ensure that lines that overflow the container will
3 * hide the overflow and truncate neatly with an ellipsis.
4 */
5/**
6 * This mixin provides all md-line styles, changing secondary font size
7 * based on whether the list is in dense mode.
8 */
9/**
10 * This mixin provides base styles for the wrapper around md-line
11 * elements in a list.
12 */
13/**
14 * This mixin normalizes default element styles, e.g. font weight for heading text.
15 */
16/* Normal list variables */
17/* Dense list variables */
18/*
19This mixin provides all list-item styles, changing font size and height
20based on whether the list is in dense mode.
21*/
22/*
23This mixin provides all subheader styles, adjusting heights and padding
24based on whether the list is in dense mode.
25*/
26md-list, md-nav-list {
27 padding-top: 8px;
28 display: block; }
29 md-list [md-subheader], md-nav-list [md-subheader] {
30 display: block;
31 box-sizing: border-box;
32 height: 48px;
33 padding: 16px;
34 margin: 0;
35 font-size: 14px;
36 font-weight: 500;
37 color: rgba(0, 0, 0, 0.54); }
38 md-list [md-subheader]:first-child, md-nav-list [md-subheader]:first-child {
39 margin-top: -8px; }
40 md-list md-list-item .md-list-item, md-list a[md-list-item] .md-list-item, md-nav-list md-list-item .md-list-item, md-nav-list a[md-list-item] .md-list-item {
41 display: flex;
42 flex-direction: row;
43 align-items: center;
44 font-family: Roboto, "Helvetica Neue", sans-serif;
45 box-sizing: border-box;
46 font-size: 16px;
47 height: 48px;
48 padding: 0 16px;
49 color: black; }
50 md-list md-list-item.md-list-avatar .md-list-item, md-list a[md-list-item].md-list-avatar .md-list-item, md-nav-list md-list-item.md-list-avatar .md-list-item, md-nav-list a[md-list-item].md-list-avatar .md-list-item {
51 height: 56px; }
52 md-list md-list-item.md-2-line .md-list-item, md-list a[md-list-item].md-2-line .md-list-item, md-nav-list md-list-item.md-2-line .md-list-item, md-nav-list a[md-list-item].md-2-line .md-list-item {
53 height: 72px; }
54 md-list md-list-item.md-3-line .md-list-item, md-list a[md-list-item].md-3-line .md-list-item, md-nav-list md-list-item.md-3-line .md-list-item, md-nav-list a[md-list-item].md-3-line .md-list-item {
55 height: 88px; }
56 md-list md-list-item .md-list-text, md-list a[md-list-item] .md-list-text, md-nav-list md-list-item .md-list-text, md-nav-list a[md-list-item] .md-list-text {
57 display: flex;
58 flex-direction: column;
59 width: 100%;
60 box-sizing: border-box;
61 overflow: hidden;
62 padding: 0 16px; }
63 md-list md-list-item .md-list-text > *, md-list a[md-list-item] .md-list-text > *, md-nav-list md-list-item .md-list-text > *, md-nav-list a[md-list-item] .md-list-text > * {
64 margin: 0;
65 padding: 0;
66 font-weight: normal;
67 font-size: inherit; }
68 md-list md-list-item .md-list-text:empty, md-list a[md-list-item] .md-list-text:empty, md-nav-list md-list-item .md-list-text:empty, md-nav-list a[md-list-item] .md-list-text:empty {
69 display: none; }
70 md-list md-list-item .md-list-text:first-child, md-list a[md-list-item] .md-list-text:first-child, md-nav-list md-list-item .md-list-text:first-child, md-nav-list a[md-list-item] .md-list-text:first-child {
71 padding: 0; }
72 md-list md-list-item [md-list-avatar], md-list a[md-list-item] [md-list-avatar], md-nav-list md-list-item [md-list-avatar], md-nav-list a[md-list-item] [md-list-avatar] {
73 width: 40px;
74 height: 40px;
75 border-radius: 50%; }
76 md-list md-list-item [md-list-icon], md-list a[md-list-item] [md-list-icon], md-nav-list md-list-item [md-list-icon], md-nav-list a[md-list-item] [md-list-icon] {
77 width: 24px;
78 height: 24px;
79 border-radius: 50%;
80 padding: 4px; }
81 md-list md-list-item [md-line], md-list a[md-list-item] [md-line], md-nav-list md-list-item [md-line], md-nav-list a[md-list-item] [md-line] {
82 white-space: nowrap;
83 overflow-x: hidden;
84 text-overflow: ellipsis;
85 display: block;
86 box-sizing: border-box; }
87 md-list md-list-item [md-line]:nth-child(n+2), md-list a[md-list-item] [md-line]:nth-child(n+2), md-nav-list md-list-item [md-line]:nth-child(n+2), md-nav-list a[md-list-item] [md-line]:nth-child(n+2) {
88 font-size: 14px; }
89
90md-list[dense], md-nav-list[dense] {
91 padding-top: 4px;
92 display: block; }
93 md-list[dense] [md-subheader], md-nav-list[dense] [md-subheader] {
94 display: block;
95 box-sizing: border-box;
96 height: 40px;
97 padding: 16px;
98 margin: 0;
99 font-size: 13px;
100 font-weight: 500;
101 color: rgba(0, 0, 0, 0.54); }
102 md-list[dense] [md-subheader]:first-child, md-nav-list[dense] [md-subheader]:first-child {
103 margin-top: -4px; }
104 md-list[dense] md-list-item .md-list-item, md-list[dense] a[md-list-item] .md-list-item, md-nav-list[dense] md-list-item .md-list-item, md-nav-list[dense] a[md-list-item] .md-list-item {
105 display: flex;
106 flex-direction: row;
107 align-items: center;
108 font-family: Roboto, "Helvetica Neue", sans-serif;
109 box-sizing: border-box;
110 font-size: 13px;
111 height: 40px;
112 padding: 0 16px;
113 color: black; }
114 md-list[dense] md-list-item.md-list-avatar .md-list-item, md-list[dense] a[md-list-item].md-list-avatar .md-list-item, md-nav-list[dense] md-list-item.md-list-avatar .md-list-item, md-nav-list[dense] a[md-list-item].md-list-avatar .md-list-item {
115 height: 48px; }
116 md-list[dense] md-list-item.md-2-line .md-list-item, md-list[dense] a[md-list-item].md-2-line .md-list-item, md-nav-list[dense] md-list-item.md-2-line .md-list-item, md-nav-list[dense] a[md-list-item].md-2-line .md-list-item {
117 height: 60px; }
118 md-list[dense] md-list-item.md-3-line .md-list-item, md-list[dense] a[md-list-item].md-3-line .md-list-item, md-nav-list[dense] md-list-item.md-3-line .md-list-item, md-nav-list[dense] a[md-list-item].md-3-line .md-list-item {
119 height: 76px; }
120 md-list[dense] md-list-item .md-list-text, md-list[dense] a[md-list-item] .md-list-text, md-nav-list[dense] md-list-item .md-list-text, md-nav-list[dense] a[md-list-item] .md-list-text {
121 display: flex;
122 flex-direction: column;
123 width: 100%;
124 box-sizing: border-box;
125 overflow: hidden;
126 padding: 0 16px; }
127 md-list[dense] md-list-item .md-list-text > *, md-list[dense] a[md-list-item] .md-list-text > *, md-nav-list[dense] md-list-item .md-list-text > *, md-nav-list[dense] a[md-list-item] .md-list-text > * {
128 margin: 0;
129 padding: 0;
130 font-weight: normal;
131 font-size: inherit; }
132 md-list[dense] md-list-item .md-list-text:empty, md-list[dense] a[md-list-item] .md-list-text:empty, md-nav-list[dense] md-list-item .md-list-text:empty, md-nav-list[dense] a[md-list-item] .md-list-text:empty {
133 display: none; }
134 md-list[dense] md-list-item .md-list-text:first-child, md-list[dense] a[md-list-item] .md-list-text:first-child, md-nav-list[dense] md-list-item .md-list-text:first-child, md-nav-list[dense] a[md-list-item] .md-list-text:first-child {
135 padding: 0; }
136 md-list[dense] md-list-item [md-list-avatar], md-list[dense] a[md-list-item] [md-list-avatar], md-nav-list[dense] md-list-item [md-list-avatar], md-nav-list[dense] a[md-list-item] [md-list-avatar] {
137 width: 40px;
138 height: 40px;
139 border-radius: 50%; }
140 md-list[dense] md-list-item [md-list-icon], md-list[dense] a[md-list-item] [md-list-icon], md-nav-list[dense] md-list-item [md-list-icon], md-nav-list[dense] a[md-list-item] [md-list-icon] {
141 width: 24px;
142 height: 24px;
143 border-radius: 50%;
144 padding: 4px; }
145 md-list[dense] md-list-item [md-line], md-list[dense] a[md-list-item] [md-line], md-nav-list[dense] md-list-item [md-line], md-nav-list[dense] a[md-list-item] [md-line] {
146 white-space: nowrap;
147 overflow-x: hidden;
148 text-overflow: ellipsis;
149 display: block;
150 box-sizing: border-box; }
151 md-list[dense] md-list-item [md-line]:nth-child(n+2), md-list[dense] a[md-list-item] [md-line]:nth-child(n+2), md-nav-list[dense] md-list-item [md-line]:nth-child(n+2), md-nav-list[dense] a[md-list-item] [md-line]:nth-child(n+2) {
152 font-size: 13px; }
153
154md-divider {
155 display: block;
156 border-top: 1px solid rgba(0, 0, 0, 0.12);
157 margin: 0; }
158
159md-nav-list a {
160 text-decoration: none;
161 color: inherit; }
162
163md-nav-list .md-list-item {
164 cursor: pointer; }
165 md-nav-list .md-list-item:hover, md-nav-list .md-list-item.md-list-item-focus {
166 outline: none;
167 background: rgba(0, 0, 0, 0.04); }
168
169/*# sourceMappingURL=list.css.map */