diff options
Diffstat (limited to 'src/objects/_avatar.scss')
-rw-r--r-- | src/objects/_avatar.scss | 150 |
1 files changed, 150 insertions, 0 deletions
diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss new file mode 100644 index 0000000..e6fa74e --- /dev/null +++ b/src/objects/_avatar.scss | |||
@@ -0,0 +1,150 @@ | |||
1 | @use 'sass:list'; | ||
2 | @use 'iro-sass/src/index' as iro; | ||
3 | @use '../functions' as fn; | ||
4 | |||
5 | $sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl'; | ||
6 | |||
7 | @mixin status($size: ()) { | ||
8 | @include iro.bem-elem('status') { | ||
9 | width: fn.dim(list.join($size, --indicator-size)); | ||
10 | height: fn.dim(list.join($size, --indicator-size)); | ||
11 | |||
12 | @include iro.bem-next-elem('content') { | ||
13 | mask-image: radial-gradient( | ||
14 | circle calc(.5 * fn.dim(list.join($size, --indicator-size)) + fn.dim(--indicator-spacing)) at | ||
15 | calc(100% - .5 * fn.dim(list.join($size, --indicator-size))) | ||
16 | calc(100% - .5 * fn.dim(list.join($size, --indicator-size))), | ||
17 | transparent 95%, | ||
18 | #fff | ||
19 | ); | ||
20 | } | ||
21 | } | ||
22 | } | ||
23 | |||
24 | @include iro.props-namespace('avatar') { | ||
25 | @include iro.props-store(( | ||
26 | --dims: ( | ||
27 | --size: fn.global-dim(--size --500), | ||
28 | --font-size: fn.global-dim(--font-size --100), | ||
29 | --indicator-size: fn.global-dim(--size --150), | ||
30 | |||
31 | --xxxl: ( | ||
32 | --size: fn.global-dim(--size --1600), | ||
33 | --font-size: fn.global-dim(--font-size --800), | ||
34 | --indicator-size: fn.global-dim(--size --400), | ||
35 | ), | ||
36 | --xxl: ( | ||
37 | --size: fn.global-dim(--size --1200), | ||
38 | --font-size: fn.global-dim(--font-size --600), | ||
39 | --indicator-size: fn.global-dim(--size --300), | ||
40 | ), | ||
41 | --xl: ( | ||
42 | --size: fn.global-dim(--size --800), | ||
43 | --font-size: fn.global-dim(--font-size --300), | ||
44 | --indicator-size: fn.global-dim(--size --225), | ||
45 | ), | ||
46 | --lg: ( | ||
47 | --size: fn.global-dim(--size --650), | ||
48 | --font-size: fn.global-dim(--font-size --200), | ||
49 | --indicator-size: fn.global-dim(--size --175), | ||
50 | ), | ||
51 | --sm: ( | ||
52 | --size: fn.global-dim(--size --375), | ||
53 | --font-size: fn.global-dim(--font-size --75), | ||
54 | --indicator-size: fn.global-dim(--size --125), | ||
55 | ), | ||
56 | --xs: ( | ||
57 | --size: fn.global-dim(--size --250), | ||
58 | --font-size: fn.global-dim(--font-size --50), | ||
59 | --indicator-size: fn.global-dim(--size --100), | ||
60 | ), | ||
61 | --indicator-spacing: fn.global-dim(--size --40), | ||
62 | --rounding: 25%, | ||
63 | |||
64 | --key-focus: ( | ||
65 | --border: fn.global-dim(--key-focus --border), | ||
66 | --border-offset: fn.global-dim(--key-focus --border-offset), | ||
67 | --outline: fn.global-dim(--key-focus --outline), | ||
68 | ), | ||
69 | ), | ||
70 | --colors: ( | ||
71 | --h: 354, | ||
72 | --s: 44%, | ||
73 | --l: 45%, | ||
74 | |||
75 | --key-focus: ( | ||
76 | --border: fn.global-color(--focus --border), | ||
77 | --outline: fn.global-color(--focus --outline), | ||
78 | ), | ||
79 | ), | ||
80 | )); | ||
81 | |||
82 | @include iro.bem-object(iro.props-namespace()) { | ||
83 | display: inline-block; | ||
84 | position: relative; | ||
85 | border: fn.dim(--key-focus --border) solid transparent; | ||
86 | border-radius: fn.dim(--rounding); | ||
87 | font-size: fn.dim(--font-size); | ||
88 | font-style: normal; | ||
89 | vertical-align: .05em; | ||
90 | |||
91 | @include iro.bem-elem('status') { | ||
92 | position: absolute; | ||
93 | inset-inline-end: 0; | ||
94 | inset-block-end: 0; | ||
95 | } | ||
96 | |||
97 | @include status; | ||
98 | |||
99 | @include iro.bem-elem('content') { | ||
100 | display: block; | ||
101 | inline-size: fn.dim(--size); | ||
102 | block-size: fn.dim(--size); | ||
103 | border-radius: fn.dim(--rounding); | ||
104 | line-height: fn.dim(--size); | ||
105 | text-align: center; | ||
106 | object-fit: cover; | ||
107 | object-position: center center; | ||
108 | } | ||
109 | |||
110 | @include iro.bem-modifier('circle') { | ||
111 | border-radius: 100%; | ||
112 | |||
113 | @include iro.bem-elem('content') { | ||
114 | border-radius: 100%; | ||
115 | } | ||
116 | } | ||
117 | |||
118 | @include iro.bem-modifier('placeholder') { | ||
119 | @include iro.bem-elem('content') { | ||
120 | background-color: hsl(0, 0%, fn.color(--l)); | ||
121 | } | ||
122 | } | ||
123 | |||
124 | @include iro.bem-modifier('colored') { | ||
125 | @include iro.bem-elem('content') { | ||
126 | background-color: hsl(fn.color(--h), fn.color(--s), fn.color(--l)); | ||
127 | color: #fff; | ||
128 | } | ||
129 | } | ||
130 | |||
131 | @each $size in $sizes { | ||
132 | @include iro.bem-modifier($size) { | ||
133 | font-size: fn.dim(--#{$size} --font-size); | ||
134 | |||
135 | @include status(--#{$size}); | ||
136 | |||
137 | @include iro.bem-elem('content') { | ||
138 | inline-size: fn.dim(--#{$size} --size); | ||
139 | block-size: fn.dim(--#{$size} --size); | ||
140 | line-height: fn.dim(--#{$size} --size); | ||
141 | } | ||
142 | } | ||
143 | } | ||
144 | |||
145 | &:focus-visible { | ||
146 | outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); | ||
147 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); | ||
148 | } | ||
149 | } | ||
150 | } | ||