commonroutesApp/www/lib/angular-material/modules/closure/card/card.css
www/lib/angular-material/modules/closure/card/card.cssRaw
1/*!
2 * Angular Material Design
3 * https://github.com/angular/material
4 * @license MIT
5 * v1.1.1
6 */
7md-card {
8 box-sizing: border-box;
9 display: -webkit-box;
10 display: -webkit-flex;
11 display: flex;
12 -webkit-box-orient: vertical;
13 -webkit-box-direction: normal;
14 -webkit-flex-direction: column;
15 flex-direction: column;
16 margin: 8px;
17 box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12); }
18 md-card md-card-header {
19 padding: 16px;
20 display: -webkit-box;
21 display: -webkit-flex;
22 display: flex;
23 -webkit-box-orient: horizontal;
24 -webkit-box-direction: normal;
25 -webkit-flex-direction: row;
26 flex-direction: row; }
27 md-card md-card-header:first-child md-card-avatar {
28 margin-right: 12px; }
29 [dir=rtl] md-card md-card-header:first-child md-card-avatar {
30 margin-right: auto;
31 margin-left: 12px; }
32 md-card md-card-header:last-child md-card-avatar {
33 margin-left: 12px; }
34 [dir=rtl] md-card md-card-header:last-child md-card-avatar {
35 margin-left: auto;
36 margin-right: 12px; }
37 md-card md-card-header md-card-avatar {
38 width: 40px;
39 height: 40px; }
40 md-card md-card-header md-card-avatar .md-user-avatar,
41 md-card md-card-header md-card-avatar md-icon {
42 border-radius: 50%; }
43 md-card md-card-header md-card-avatar md-icon {
44 padding: 8px; }
45 md-card md-card-header md-card-avatar + md-card-header-text {
46 max-height: 40px; }
47 md-card md-card-header md-card-avatar + md-card-header-text .md-title {
48 font-size: 14px; }
49 md-card md-card-header md-card-header-text {
50 display: -webkit-box;
51 display: -webkit-flex;
52 display: flex;
53 -webkit-box-flex: 1;
54 -webkit-flex: 1;
55 flex: 1;
56 -webkit-box-orient: vertical;
57 -webkit-box-direction: normal;
58 -webkit-flex-direction: column;
59 flex-direction: column; }
60 md-card md-card-header md-card-header-text .md-subhead {
61 font-size: 14px; }
62 md-card > img,
63 md-card > md-card-header img,
64 md-card md-card-title-media img {
65 box-sizing: border-box;
66 display: -webkit-box;
67 display: -webkit-flex;
68 display: flex;
69 -webkit-box-flex: 0;
70 -webkit-flex: 0 0 auto;
71 flex: 0 0 auto;
72 width: 100%;
73 height: auto; }
74 md-card md-card-title {
75 padding: 24px 16px 16px;
76 display: -webkit-box;
77 display: -webkit-flex;
78 display: flex;
79 -webkit-box-flex: 1;
80 -webkit-flex: 1 1 auto;
81 flex: 1 1 auto;
82 -webkit-box-orient: horizontal;
83 -webkit-box-direction: normal;
84 -webkit-flex-direction: row;
85 flex-direction: row; }
86 md-card md-card-title + md-card-content {
87 padding-top: 0; }
88 md-card md-card-title md-card-title-text {
89 -webkit-box-flex: 1;
90 -webkit-flex: 1;
91 flex: 1;
92 -webkit-box-orient: vertical;
93 -webkit-box-direction: normal;
94 -webkit-flex-direction: column;
95 flex-direction: column;
96 display: -webkit-box;
97 display: -webkit-flex;
98 display: flex; }
99 md-card md-card-title md-card-title-text .md-subhead {
100 padding-top: 0;
101 font-size: 14px; }
102 md-card md-card-title md-card-title-text:only-child .md-subhead {
103 padding-top: 12px; }
104 md-card md-card-title md-card-title-media {
105 margin-top: -8px; }
106 md-card md-card-title md-card-title-media .md-media-sm {
107 height: 80px;
108 width: 80px; }
109 md-card md-card-title md-card-title-media .md-media-md {
110 height: 112px;
111 width: 112px; }
112 md-card md-card-title md-card-title-media .md-media-lg {
113 height: 152px;
114 width: 152px; }
115 md-card md-card-content {
116 display: block;
117 padding: 16px; }
118 md-card md-card-content > p:first-child {
119 margin-top: 0; }
120 md-card md-card-content > p:last-child {
121 margin-bottom: 0; }
122 md-card md-card-content .md-media-xl {
123 height: 240px;
124 width: 240px; }
125 md-card .md-actions, md-card md-card-actions {
126 margin: 8px; }
127 md-card .md-actions.layout-column .md-button:not(.md-icon-button), md-card md-card-actions.layout-column .md-button:not(.md-icon-button) {
128 margin: 2px 0; }
129 md-card .md-actions.layout-column .md-button:not(.md-icon-button):first-of-type, md-card md-card-actions.layout-column .md-button:not(.md-icon-button):first-of-type {
130 margin-top: 0; }
131 md-card .md-actions.layout-column .md-button:not(.md-icon-button):last-of-type, md-card md-card-actions.layout-column .md-button:not(.md-icon-button):last-of-type {
132 margin-bottom: 0; }
133 md-card .md-actions.layout-column .md-button.md-icon-button, md-card md-card-actions.layout-column .md-button.md-icon-button {
134 margin-top: 6px;
135 margin-bottom: 6px; }
136 md-card .md-actions md-card-icon-actions, md-card md-card-actions md-card-icon-actions {
137 -webkit-box-flex: 1;
138 -webkit-flex: 1;
139 flex: 1;
140 -webkit-box-pack: start;
141 -webkit-justify-content: flex-start;
142 justify-content: flex-start;
143 display: -webkit-box;
144 display: -webkit-flex;
145 display: flex;
146 -webkit-box-orient: horizontal;
147 -webkit-box-direction: normal;
148 -webkit-flex-direction: row;
149 flex-direction: row; }
150 md-card .md-actions:not(.layout-column) .md-button:not(.md-icon-button), md-card md-card-actions:not(.layout-column) .md-button:not(.md-icon-button) {
151 margin: 0 4px; }
152 md-card .md-actions:not(.layout-column) .md-button:not(.md-icon-button):first-of-type, md-card md-card-actions:not(.layout-column) .md-button:not(.md-icon-button):first-of-type {
153 margin-left: 0; }
154 [dir=rtl] md-card .md-actions:not(.layout-column) .md-button:not(.md-icon-button):first-of-type, [dir=rtl] md-card md-card-actions:not(.layout-column) .md-button:not(.md-icon-button):first-of-type {
155 margin-left: auto;
156 margin-right: 0; }
157 md-card .md-actions:not(.layout-column) .md-button:not(.md-icon-button):last-of-type, md-card md-card-actions:not(.layout-column) .md-button:not(.md-icon-button):last-of-type {
158 margin-right: 0; }
159 [dir=rtl] md-card .md-actions:not(.layout-column) .md-button:not(.md-icon-button):last-of-type, [dir=rtl] md-card md-card-actions:not(.layout-column) .md-button:not(.md-icon-button):last-of-type {
160 margin-right: auto;
161 margin-left: 0; }
162 md-card .md-actions:not(.layout-column) .md-button.md-icon-button, md-card md-card-actions:not(.layout-column) .md-button.md-icon-button {
163 margin-left: 6px;
164 margin-right: 6px; }
165 md-card .md-actions:not(.layout-column) .md-button.md-icon-button:first-of-type, md-card md-card-actions:not(.layout-column) .md-button.md-icon-button:first-of-type {
166 margin-left: 12px; }
167 [dir=rtl] md-card .md-actions:not(.layout-column) .md-button.md-icon-button:first-of-type, [dir=rtl] md-card md-card-actions:not(.layout-column) .md-button.md-icon-button:first-of-type {
168 margin-left: auto;
169 margin-right: 12px; }
170 md-card .md-actions:not(.layout-column) .md-button.md-icon-button:last-of-type, md-card md-card-actions:not(.layout-column) .md-button.md-icon-button:last-of-type {
171 margin-right: 12px; }
172 [dir=rtl] md-card .md-actions:not(.layout-column) .md-button.md-icon-button:last-of-type, [dir=rtl] md-card md-card-actions:not(.layout-column) .md-button.md-icon-button:last-of-type {
173 margin-right: auto;
174 margin-left: 12px; }
175 md-card .md-actions:not(.layout-column) .md-button + md-card-icon-actions, md-card md-card-actions:not(.layout-column) .md-button + md-card-icon-actions {
176 -webkit-box-flex: 1;
177 -webkit-flex: 1;
178 flex: 1;
179 -webkit-box-pack: end;
180 -webkit-justify-content: flex-end;
181 justify-content: flex-end;
182 display: -webkit-box;
183 display: -webkit-flex;
184 display: flex;
185 -webkit-box-orient: horizontal;
186 -webkit-box-direction: normal;
187 -webkit-flex-direction: row;
188 flex-direction: row; }
189 md-card md-card-footer {
190 margin-top: auto;
191 padding: 16px; }
192
193@media screen and (-ms-high-contrast: active) {
194 md-card {
195 border: 1px solid #fff; } }
196
197.md-image-no-fill > img {
198 width: auto;
199 height: auto; }