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
117
118
119
120
121
122
123
124
125
126
|
@use 'sass:meta';
@use 'iro-sass/src/bem';
@use 'iro-sass/src/props';
@use '../props' as *;
@forward 'avatar.vars';
@use 'avatar.vars' as vars;
@mixin status($indicator-size) {
@include bem.elem('status') {
inline-size: props.get($indicator-size);
block-size: props.get($indicator-size);
@include bem.sibling-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 materialize-at-root(meta.module-variables('vars'));
@include 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;
outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
content: '';
border: props.get(vars.$key-focus--border-offset) solid transparent;
border-radius: props.get(vars.$rounding);
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 bem.elem('status') {
position: absolute;
inset-block-end: 0;
inset-inline-end: 0;
}
@include status(vars.$indicator-size);
@include 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 bem.modifier('circle') {
border-radius: 100%;
&::after {
border-radius: 100%;
}
@include bem.elem('content') {
border-radius: 100%;
}
}
@include bem.modifier('placeholder') {
@include bem.elem('content') {
background-color: hsl(0, 0%, props.get(vars.$bg-color--l));
}
}
@include bem.modifier('colored') {
@include 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));
}
}
@include bem.modifier('colored-gradient') {
@include bem.elem('content') {
color: #fff;
background: linear-gradient(props.get(vars.$bg-angle),
hsl(props.get(vars.$bg-color--h), props.get(vars.$bg-color--s), props.get(vars.$bg-color--l)),
hsl(props.get(vars.$bg-color-2--h), props.get(vars.$bg-color-2--s), props.get(vars.$bg-color-2--l)));
}
}
@each $mod, $size, $font-size, $indicator-size in vars.$sizes {
@include bem.modifier($mod) {
font-size: props.get($font-size);
@include status($indicator-size);
@include bem.elem('content') {
inline-size: props.get($size);
block-size: props.get($size);
line-height: props.get($size);
}
}
}
&:focus-visible {
&::after {
display: block;
}
}
}
}
|
