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