1 | .prism-avatar {
|
2 | color: rgba(0, 0, 0, 0.87);
|
3 | width: 56px;
|
4 | height: 56px;
|
5 | display: flex;
|
6 | font-size: 1.25rem;
|
7 | align-items: center;
|
8 | font-family: "Roboto", "Arial", sans-serif;
|
9 | border-radius: 50%;
|
10 | justify-content: center;
|
11 | background-color: #61b3cf;
|
12 | }
|
13 | .prism-avatar img {
|
14 | width: 100%;
|
15 | height: 100%;
|
16 | object-fit: cover;
|
17 | text-align: center;
|
18 | border-radius: 50%;
|
19 | }
|
20 | .prism-avatar > * {
|
21 | color: rgba(0, 0, 0, 0.87);
|
22 | }
|
23 | .prism-avatar--dark {
|
24 | background-color: #3D70A4;
|
25 | }
|
26 | .prism-avatar--dark > * {
|
27 | color: #fff;
|
28 | }
|
29 | .prism-avatar--hexagon {
|
30 | clip-path: polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0);
|
31 | border-radius: 0;
|
32 | }
|
33 | .prism-avatar--hexagon img {
|
34 | border-radius: 0;
|
35 | }
|
36 | .prism-avatar--large {
|
37 | width: 72px;
|
38 | height: 72px;
|
39 | font-size: 1.75rem;
|
40 | }
|
41 | .prism-avatar--light {
|
42 | background-color: #d8eeec;
|
43 | }
|
44 | .prism-avatar--light > * {
|
45 | color: rgba(0, 0, 0, 0.87);
|
46 | }
|
47 | .prism-avatar--small {
|
48 | width: 34px;
|
49 | height: 34px;
|
50 | font-size: 1rem;
|
51 | }
|
52 | .prism-avatar--square {
|
53 | border-radius: 0;
|
54 | }
|
55 | .prism-avatar--square img {
|
56 | border-radius: 0;
|
57 | }
|
58 | .prism-avatar--rounded {
|
59 | border-radius: 4px;
|
60 | }
|
61 | .prism-avatar--rounded img {
|
62 | border-radius: 4px;
|
63 | }
|
64 | .prism-avatar--secondary {
|
65 | color: rgba(0, 0, 0, 0.87);
|
66 | background-color: #f96a00;
|
67 | }
|
68 | .prism-avatar--secondary > * {
|
69 | color: rgba(0, 0, 0, 0.87);
|
70 | }
|
71 | .prism-avatar--secondary.prism-avatar--dark {
|
72 | color: #fff;
|
73 | background-color: #E05343;
|
74 | }
|
75 | .prism-avatar--secondary.prism-avatar--light {
|
76 | color: rgba(0, 0, 0, 0.87);
|
77 | background-color: #FFB000;
|
78 | }
|
79 | .prism-avatar--secondary.prism-avatar--light > * {
|
80 | color: rgba(0, 0, 0, 0.87);
|
81 | }
|
82 | .prism-avatar--secondary.prism-avatar--dark > * {
|
83 | color: #fff;
|
84 | }
|
85 | .prism-avatar--error {
|
86 | color: #fff;
|
87 | background-color: #f44336;
|
88 | }
|
89 | .prism-avatar--error > * {
|
90 | color: #fff;
|
91 | }
|
92 | .prism-avatar--error.prism-avatar--dark {
|
93 | color: #fff;
|
94 | background-color: #d32f2f;
|
95 | }
|
96 | .prism-avatar--error.prism-avatar--light {
|
97 | color: rgba(0, 0, 0, 0.87);
|
98 | background-color: #e57373;
|
99 | }
|
100 | .prism-avatar--error.prism-avatar--light > * {
|
101 | color: rgba(0, 0, 0, 0.87);
|
102 | }
|
103 | .prism-avatar--error.prism-avatar--dark > * {
|
104 | color: #fff;
|
105 | }
|
106 | .prism-avatar--warning {
|
107 | color: rgba(0, 0, 0, 0.87);
|
108 | background-color: #ff9800;
|
109 | }
|
110 | .prism-avatar--warning > * {
|
111 | color: rgba(0, 0, 0, 0.87);
|
112 | }
|
113 | .prism-avatar--warning.prism-avatar--dark {
|
114 | color: rgba(0, 0, 0, 0.87);
|
115 | background-color: #f57c00;
|
116 | }
|
117 | .prism-avatar--warning.prism-avatar--light {
|
118 | color: rgba(0, 0, 0, 0.87);
|
119 | background-color: #ffb74d;
|
120 | }
|
121 | .prism-avatar--warning.prism-avatar--light > * {
|
122 | color: rgba(0, 0, 0, 0.87);
|
123 | }
|
124 | .prism-avatar--warning.prism-avatar--dark > * {
|
125 | color: rgba(0, 0, 0, 0.87);
|
126 | }
|
127 | .prism-avatar--info {
|
128 | color: #fff;
|
129 | background-color: #2196f3;
|
130 | }
|
131 | .prism-avatar--info > * {
|
132 | color: #fff;
|
133 | }
|
134 | .prism-avatar--info.prism-avatar--dark {
|
135 | color: #fff;
|
136 | background-color: #1976d2;
|
137 | }
|
138 | .prism-avatar--info.prism-avatar--light {
|
139 | color: rgba(0, 0, 0, 0.87);
|
140 | background-color: #64b5f6;
|
141 | }
|
142 | .prism-avatar--info.prism-avatar--light > * {
|
143 | color: rgba(0, 0, 0, 0.87);
|
144 | }
|
145 | .prism-avatar--info.prism-avatar--dark > * {
|
146 | color: #fff;
|
147 | }
|
148 | .prism-avatar--grey-50 {
|
149 | color: rgba(0, 0, 0, 0.87);
|
150 | background-color: #fafafa;
|
151 | }
|
152 | .prism-avatar--grey-50 > * {
|
153 | color: rgba(0, 0, 0, 0.87);
|
154 | }
|
155 | .prism-avatar--grey-100 {
|
156 | color: rgba(0, 0, 0, 0.87);
|
157 | background-color: #f5f5f5;
|
158 | }
|
159 | .prism-avatar--grey-100 > * {
|
160 | color: rgba(0, 0, 0, 0.87);
|
161 | }
|
162 | .prism-avatar--grey-200 {
|
163 | color: rgba(0, 0, 0, 0.87);
|
164 | background-color: #eeeeee;
|
165 | }
|
166 | .prism-avatar--grey-200 > * {
|
167 | color: rgba(0, 0, 0, 0.87);
|
168 | }
|
169 | .prism-avatar--grey-300 {
|
170 | color: rgba(0, 0, 0, 0.87);
|
171 | background-color: #e0e0e0;
|
172 | }
|
173 | .prism-avatar--grey-300 > * {
|
174 | color: rgba(0, 0, 0, 0.87);
|
175 | }
|
176 | .prism-avatar--grey-400 {
|
177 | color: rgba(0, 0, 0, 0.87);
|
178 | background-color: #bdbdbd;
|
179 | }
|
180 | .prism-avatar--grey-400 > * {
|
181 | color: rgba(0, 0, 0, 0.87);
|
182 | }
|
183 | .prism-avatar--grey-500 {
|
184 | color: rgba(0, 0, 0, 0.87);
|
185 | background-color: #9e9e9e;
|
186 | }
|
187 | .prism-avatar--grey-500 > * {
|
188 | color: rgba(0, 0, 0, 0.87);
|
189 | }
|
190 | .prism-avatar--grey-600 {
|
191 | color: #fff;
|
192 | background-color: #757575;
|
193 | }
|
194 | .prism-avatar--grey-600 > * {
|
195 | color: #fff;
|
196 | }
|
197 | .prism-avatar--grey-700 {
|
198 | color: #fff;
|
199 | background-color: #616161;
|
200 | }
|
201 | .prism-avatar--grey-700 > * {
|
202 | color: #fff;
|
203 | }
|
204 | .prism-avatar--grey-800 {
|
205 | color: #fff;
|
206 | background-color: #424242;
|
207 | }
|
208 | .prism-avatar--grey-800 > * {
|
209 | color: #fff;
|
210 | }
|
211 | .prism-avatar--grey-900 {
|
212 | color: #fff;
|
213 | background-color: #212121;
|
214 | }
|
215 | .prism-avatar--grey-900 > * {
|
216 | color: #fff;
|
217 | }
|
218 | .prism-avatar-group {
|
219 | display: flex;
|
220 | padding-left: 16px;
|
221 | }
|
222 | .prism-avatar-group > .prism-avatar {
|
223 | border: solid 2px #FFFFFF;
|
224 | margin-left: -16px;
|
225 | }
|
226 | .prism-avatar-group > .prism-avatar:nth-child(0) {
|
227 | z-index: 100;
|
228 | }
|
229 | .prism-avatar-group > .prism-avatar:nth-child(1) {
|
230 | z-index: 99;
|
231 | }
|
232 | .prism-avatar-group > .prism-avatar:nth-child(2) {
|
233 | z-index: 98;
|
234 | }
|
235 | .prism-avatar-group > .prism-avatar:nth-child(3) {
|
236 | z-index: 97;
|
237 | }
|
238 | .prism-avatar-group > .prism-avatar:nth-child(4) {
|
239 | z-index: 96;
|
240 | }
|
241 | .prism-avatar-group > .prism-avatar:nth-child(5) {
|
242 | z-index: 95;
|
243 | }
|
244 | .prism-avatar-group > .prism-avatar:nth-child(6) {
|
245 | z-index: 94;
|
246 | }
|
247 | .prism-avatar-group > .prism-avatar:nth-child(7) {
|
248 | z-index: 93;
|
249 | }
|
250 | .prism-avatar-group > .prism-avatar:nth-child(8) {
|
251 | z-index: 92;
|
252 | }
|
253 | .prism-avatar-group > .prism-avatar:nth-child(9) {
|
254 | z-index: 91;
|
255 | }
|
256 | .prism-avatar-group > .prism-avatar:nth-child(10) {
|
257 | z-index: 90;
|
258 | }
|
259 | .prism-avatar-group > .prism-avatar:nth-child(11) {
|
260 | z-index: 89;
|
261 | }
|
262 | .prism-avatar-group > .prism-avatar:nth-child(12) {
|
263 | z-index: 88;
|
264 | }
|
265 | .prism-avatar-group > .prism-avatar:nth-child(13) {
|
266 | z-index: 87;
|
267 | }
|
268 | .prism-avatar-group > .prism-avatar:nth-child(14) {
|
269 | z-index: 86;
|
270 | }
|
271 | .prism-avatar-group > .prism-avatar:nth-child(15) {
|
272 | z-index: 85;
|
273 | }
|
274 | .prism-avatar-group > .prism-avatar:nth-child(16) {
|
275 | z-index: 84;
|
276 | }
|
277 | .prism-avatar-group > .prism-avatar:nth-child(17) {
|
278 | z-index: 83;
|
279 | }
|
280 | .prism-avatar-group > .prism-avatar:nth-child(18) {
|
281 | z-index: 82;
|
282 | }
|
283 | .prism-avatar-group > .prism-avatar:nth-child(19) {
|
284 | z-index: 81;
|
285 | } |
\ | No newline at end of file |