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 | } |
\ | No newline at end of file |