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