src/objects/_avatar.scss


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116

@use 'sass:meta';
@use 'iro-sass/src/iro-sass' as iro;
@use 'iro-sass/src/props';

@forward 'avatar.vars';
@use 'avatar.vars' as vars;

@mixin status($indicator-size) {
    @include iro.bem-elem('status') {
        inline-size: props.get($indicator-size);
        block-size:  props.get($indicator-size);

        @include iro.bem-next-elem('content') {
            mask-image: radial-gradient(circle calc(.5 * props.get($indicator-size) + props.get(vars.$indicator-spacing)) at
            calc(100% - .5 * props.get($indicator-size))
            calc(100% - .5 * props.get($indicator-size)),
            transparent 95%,
            #fff);
        }
    }
}

@mixin styles {
    @include props.materialize(meta.module-variables('vars'));

    @include iro.bem-object('avatar') {
        position:       relative;
        display:        inline-block;
        font-size:      props.get(vars.$font-size);
        font-style:     normal;
        vertical-align: .05em;
        border-radius:  props.get(vars.$rounding);

        &::after {
            position:       absolute;
            inset:          calc(-1 * props.get(vars.$key-focus--border-offset));
            z-index:        1;
            display:        none;
            pointer-events: none;
            content:        '';
            border:         props.get(vars.$key-focus--border-offset) solid transparent;
            border-radius:  props.get(vars.$rounding);
            outline:        props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
            box-shadow:
                0
                0
                0
                calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
                props.get(vars.$key-focus--outline-color);
        }

        @include iro.bem-elem('status') {
            position:         absolute;
            inset-block-end:  0;
            inset-inline-end: 0;
        }

        @include status(vars.$indicator-size);

        @include iro.bem-elem('content') {
            display:          block;
            inline-size:      props.get(vars.$size);
            block-size:       props.get(vars.$size);
            line-height:      props.get(vars.$size);
            text-align:       center;
            object-fit:       cover;
            object-position:  center center;
            border-radius:    props.get(vars.$rounding);
        }

        @include iro.bem-modifier('circle') {
            border-radius: 100%;

            &::after {
                border-radius: 100%;
            }

            @include iro.bem-elem('content') {
                border-radius: 100%;
            }
        }

        @include iro.bem-modifier('placeholder') {
            @include iro.bem-elem('content') {
                background-color: hsl(0, 0%, props.get(vars.$bg-color--l));
            }
        }

        @include iro.bem-modifier('colored') {
            @include iro.bem-elem('content') {
                color:            #fff;
                background-color: hsl(props.get(vars.$bg-color--h), props.get(vars.$bg-color--s), props.get(vars.$bg-color--l));
            }
        }

        @each $mod, $size, $font-size, $indicator-size in vars.$sizes {
            @include iro.bem-modifier($mod) {
                font-size: props.get($font-size);
    
                @include status($indicator-size);
    
                @include iro.bem-elem('content') {
                    inline-size: props.get($size);
                    block-size:  props.get($size);
                    line-height: props.get($size);
                }
            }
        }
    
        &:focus-visible {
            &::after {
                display: block;
            }
        }
    }
}