codecheck

1
// core
2
.p-avatar {
3
    display: inline-flex;
4
    align-items: center;
5
    justify-content: center;
6
    width: 2rem;
7
    height: 2rem;
8
    font-size: 1rem;
9
}
10

11
.p-avatar.p-avatar-image {
12
    background-color: transparent;
13
}
14

15
.p-avatar.p-avatar-circle {
16
    border-radius: 50%;
17
}
18

19
.p-avatar-circle img {
20
    border-radius: 50%;
21
}
22

23
.p-avatar .p-avatar-icon {
24
    font-size: 1rem;
25
}
26

27
.p-avatar img {
28
    width: 100%;
29
    height: 100%;
30
}
31

32
.p-avatar-group .p-avatar + .p-avatar {
33
    margin-left: -1rem;
34
}
35

36
.p-avatar-group {
37
    display: flex;
38
    align-items: center;
39
}
40

41
// theme
42
.p-avatar {
43
    background-color: $avatarBg;
44
    border-radius: $borderRadius;
45

46
    &.p-avatar-lg {
47
        width: 3rem;
48
        height: 3rem;
49
        font-size: 1.5rem;
50

51
        .p-avatar-icon {
52
            font-size: 1.5rem;
53
        }
54
    }
55

56
    &.p-avatar-xl {
57
        width: 4rem;
58
        height: 4rem;
59
        font-size: 2rem;
60

61
        .p-avatar-icon {
62
            font-size: 2rem;
63
        }
64
    }
65
}
66

67
.p-avatar-group {
68
    .p-avatar {
69
        border: 2px solid $panelContentBg;
70
    }
71
}