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.scss274
1 files changed, 128 insertions, 146 deletions
diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss
index 19bff10..764c039 100644
--- a/src/objects/_avatar.scss
+++ b/src/objects/_avatar.scss
@@ -1,167 +1,149 @@
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-style: normal;
37 ), 31 vertical-align: .05em;
38 --xxl: ( 32 border-radius: props.get(vars.$rounding);
39 --size: fn.global-dim(--size --1200),
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 33
75 --key-focus: ( 34 &::after {
76 --border: fn.global-color(--focus --border), 35 position: absolute;
77 --outline: fn.global-color(--focus --outline), 36 inset: calc(-1 * props.get(vars.$key-focus--border-offset));
78 ), 37 z-index: 1;
79 ), 38 display: none;
80 )); 39 pointer-events: none;
40 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
41 content: '';
42 border: props.get(vars.$key-focus--border-offset) solid transparent;
43 border-radius: props.get(vars.$rounding);
44 box-shadow:
45 0
46 0
47 0
48 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
49 props.get(vars.$key-focus--outline-color);
50 }
81 51
82 @include iro.bem-object(iro.props-namespace()) { 52 @include bem.elem('status') {
83 display: inline-block; 53 position: absolute;
84 position: relative; 54 inset-block-end: 0;
85 border-radius: fn.dim(--rounding); 55 inset-inline-end: 0;
86 font-size: fn.dim(--font-size); 56 }
87 font-style: normal;
88 vertical-align: .05em;
89 57
90 &::after { 58 @include bem.elem('icon') {
91 content: ''; 59 position: absolute;
92 display: none; 60 inset-block-end: 0;
93 position: absolute; 61 inset-inline-end: 0;
94 z-index: 1; 62 display: flex;
95 inset: calc(-1 * fn.dim(--key-focus --border-offset)); 63 align-items: flex-end;
96 border: fn.dim(--key-focus --border-offset) solid transparent; 64 justify-content: flex-end;
97 border-radius: fn.dim(--rounding); 65 inline-size: props.get(vars.$icon-size);
98 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); 66 block-size: props.get(vars.$icon-size);
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 67
103 @include iro.bem-elem('status') { 68 @include bem.sibling-elem('content') {
104 position: absolute; 69 clip-path: props.get(vars.$icon-mask);
105 inset-inline-end: 0; 70 }
106 inset-block-end: 0; 71 }
107 }
108 72
109 @include status; 73 @include bem.elem('content') {
74 display: block;
75 inline-size: props.get(vars.$size);
76 block-size: props.get(vars.$size);
77 font-size: props.get(vars.$font-size);
78 line-height: props.get(vars.$size);
79 text-align: center;
80 object-fit: cover;
81 object-position: center center;
82 border-radius: props.get(vars.$rounding);
83 }
110 84
111 @include iro.bem-elem('content') { 85 @include bem.modifier('circle') {
112 display: block; 86 border-radius: 100%;
113 inline-size: fn.dim(--size);
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 87
122 @include iro.bem-modifier('circle') { 88 &::after {
123 border-radius: 100%; 89 border-radius: 100%;
90 }
124 91
125 &::after { 92 @include bem.elem('content') {
126 border-radius: 100%; 93 border-radius: 100%;
127 } 94 }
95 }
128 96
129 @include iro.bem-elem('content') { 97 @include bem.modifier('placeholder') {
130 border-radius: 100%; 98 @include bem.elem('content') {
131 } 99 background-color: hsl(0, 0%, props.get(vars.$bg-color--l));
132 } 100 }
101 }
133 102
134 @include iro.bem-modifier('placeholder') { 103 @include bem.modifier('colored') {
135 @include iro.bem-elem('content') { 104 @include bem.elem('content') {
136 background-color: hsl(0, 0%, fn.color(--l)); 105 color: #fff;
137 } 106 background-color: hsl(props.get(vars.$bg-color--h), props.get(vars.$bg-color--s), props.get(vars.$bg-color--l));
138 } 107 }
108 }
139 109
140 @include iro.bem-modifier('colored') { 110 @include bem.modifier('colored-gradient') {
141 @include iro.bem-elem('content') { 111 @include bem.elem('content') {
142 background-color: hsl(fn.color(--h), fn.color(--s), fn.color(--l)); 112 color: #fff;
143 color: #fff; 113 background: linear-gradient(props.get(vars.$bg-angle),
144 } 114 hsl(props.get(vars.$bg-color--h), props.get(vars.$bg-color--s), props.get(vars.$bg-color--l)),
145 } 115 hsl(props.get(vars.$bg-color-2--h), props.get(vars.$bg-color-2--s), props.get(vars.$bg-color-2--l)));
116 }
117 }
146 118
147 @each $size in $sizes { 119 @include status(vars.$indicator-size);
148 @include iro.bem-modifier($size) { 120
149 font-size: fn.dim(--#{$size} --font-size); 121 @each $mod, $size, $font-size, $indicator-size, $icon-size, $icon-mask in vars.$sizes {
150 122 @include bem.modifier($mod) {
151 @include status(--#{$size}); 123 @include status($indicator-size);
124
125 @include bem.elem('icon') {
126 inline-size: props.get($icon-size);
127 block-size: props.get($icon-size);
128
129 @include bem.sibling-elem('content') {
130 clip-path: props.get($icon-mask);
131 }
132 }
152 133
153 @include iro.bem-elem('content') { 134 @include bem.elem('content') {
154 inline-size: fn.dim(--#{$size} --size); 135 inline-size: props.get($size);
155 block-size: fn.dim(--#{$size} --size); 136 block-size: props.get($size);
156 line-height: fn.dim(--#{$size} --size); 137 font-size: props.get($font-size);
157 } 138 line-height: props.get($size);
158 } 139 }
159 } 140 }
141 }
160 142
161 &:focus-visible { 143 &:focus-visible {
162 &::after { 144 &::after {
163 display: block; 145 display: block;
164 } 146 }
165 } 147 }
166 } 148 }
167} 149}
generated by cgit v1.3 (git 2.53.0) at 2026-03-29 11:40:05 +0000