1 | @use '../internal' as *;
|
2 |
|
3 |
|
4 | $generate-utility: should-generate-classes($AVATAR);
|
5 |
|
6 | @if $generate-utility {
|
7 | .avatar {
|
8 | border-radius: 50%;
|
9 | position: relative;
|
10 | display: block;
|
11 | margin: auto;
|
12 | font-size: 1.5rem;
|
13 | font-weight: lighter;
|
14 | width: 3.2rem;
|
15 | height: 3.2rem;
|
16 | background-color: $cirrus-primary;
|
17 | overflow: hidden;
|
18 |
|
19 |
|
20 | &::before {
|
21 | content: attr(data-text);
|
22 | color: currentColor;
|
23 | left: 50%;
|
24 | top: 50%;
|
25 | position: absolute;
|
26 | transform: translate(-50%, -50%);
|
27 | }
|
28 |
|
29 | @each $size, $property-map in $avatar-sizes {
|
30 | &.avatar--#{$size} {
|
31 | @include explode-properties($property-map);
|
32 | }
|
33 | }
|
34 |
|
35 | img.padded {
|
36 | padding: 0.5rem;
|
37 | width: 100%;
|
38 | }
|
39 | }
|
40 | }
|