| 1 | @import "mixins/settings.global";
|
| 2 |
|
| 3 | .c-avatar {
|
| 4 | display: inline-block;
|
| 5 | position: relative;
|
| 6 | width: $avatar-medium-size;
|
| 7 | height: $avatar-medium-size;
|
| 8 | margin: $avatar-margin;
|
| 9 | border-radius: $avatar-img-border-radius;
|
| 10 | background-color: $avatar-background-color;
|
| 11 | color: $avatar-color;
|
| 12 | }
|
| 13 |
|
| 14 | .c-avatar[data-text]:after {
|
| 15 | position: absolute;
|
| 16 | top: 50%;
|
| 17 | left: 50%;
|
| 18 | transform: translate(-50%, -50%);
|
| 19 | content: attr(data-text);
|
| 20 | }
|
| 21 |
|
| 22 | .c-avatar__img {
|
| 23 | display: block;
|
| 24 | width: 100%;
|
| 25 | height: 100%;
|
| 26 | border-radius: $avatar-img-border-radius;
|
| 27 | overflow: hidden;
|
| 28 | }
|
| 29 |
|
| 30 | .c-avatar__img + .c-avatar__img {
|
| 31 | position: absolute;
|
| 32 | right: 0;
|
| 33 | bottom: 0;
|
| 34 | width: $avatar-inner-img-size;
|
| 35 | height: $avatar-inner-img-size;
|
| 36 | }
|