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