summaryrefslogtreecommitdiffstats
path: root/src/objects/_avatar.scss
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-10-22 08:23:33 +0200
committerVolpeon <git@volpeon.ink>2024-10-22 08:23:33 +0200
commit5855a6821cf5585378a70f9bee13563bdbfe2d86 (patch)
tree0ee25906c9e73912137a56b7d6214c89bf43e8a6 /src/objects/_avatar.scss
parentUpdate (diff)
downloadiro-design-5855a6821cf5585378a70f9bee13563bdbfe2d86.tar.gz
iro-design-5855a6821cf5585378a70f9bee13563bdbfe2d86.tar.bz2
iro-design-5855a6821cf5585378a70f9bee13563bdbfe2d86.zip
Less broad imports
Diffstat (limited to 'src/objects/_avatar.scss')
-rw-r--r--src/objects/_avatar.scss28
1 files changed, 14 insertions, 14 deletions
diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss
index 0f8e70f..535537f 100644
--- a/src/objects/_avatar.scss
+++ b/src/objects/_avatar.scss
@@ -1,5 +1,5 @@
1@use 'sass:meta'; 1@use 'sass:meta';
2@use 'iro-sass/src/iro-sass' as iro; 2@use 'iro-sass/src/bem' as bem;
3@use 'iro-sass/src/props'; 3@use 'iro-sass/src/props';
4@use '../props' as *; 4@use '../props' as *;
5 5
@@ -7,11 +7,11 @@
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 iro.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 iro.bem-next-elem('content') { 14 @include bem.next-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(circle calc(.5 * props.get($indicator-size) + props.get(vars.$indicator-spacing)) at
16 calc(100% - .5 * props.get($indicator-size)) 16 calc(100% - .5 * props.get($indicator-size))
17 calc(100% - .5 * props.get($indicator-size)), 17 calc(100% - .5 * props.get($indicator-size)),
@@ -24,7 +24,7 @@
24@mixin styles { 24@mixin styles {
25 @include materialize-at-root(meta.module-variables('vars')); 25 @include materialize-at-root(meta.module-variables('vars'));
26 26
27 @include iro.bem-object('avatar') { 27 @include bem.object('avatar') {
28 position: relative; 28 position: relative;
29 display: inline-block; 29 display: inline-block;
30 font-size: props.get(vars.$font-size); 30 font-size: props.get(vars.$font-size);
@@ -50,7 +50,7 @@
50 props.get(vars.$key-focus--outline-color); 50 props.get(vars.$key-focus--outline-color);
51 } 51 }
52 52
53 @include iro.bem-elem('status') { 53 @include bem.elem('status') {
54 position: absolute; 54 position: absolute;
55 inset-block-end: 0; 55 inset-block-end: 0;
56 inset-inline-end: 0; 56 inset-inline-end: 0;
@@ -58,7 +58,7 @@
58 58
59 @include status(vars.$indicator-size); 59 @include status(vars.$indicator-size);
60 60
61 @include iro.bem-elem('content') { 61 @include bem.elem('content') {
62 display: block; 62 display: block;
63 inline-size: props.get(vars.$size); 63 inline-size: props.get(vars.$size);
64 block-size: props.get(vars.$size); 64 block-size: props.get(vars.$size);
@@ -69,38 +69,38 @@
69 border-radius: props.get(vars.$rounding); 69 border-radius: props.get(vars.$rounding);
70 } 70 }
71 71
72 @include iro.bem-modifier('circle') { 72 @include bem.modifier('circle') {
73 border-radius: 100%; 73 border-radius: 100%;
74 74
75 &::after { 75 &::after {
76 border-radius: 100%; 76 border-radius: 100%;
77 } 77 }
78 78
79 @include iro.bem-elem('content') { 79 @include bem.elem('content') {
80 border-radius: 100%; 80 border-radius: 100%;
81 } 81 }
82 } 82 }
83 83
84 @include iro.bem-modifier('placeholder') { 84 @include bem.modifier('placeholder') {
85 @include iro.bem-elem('content') { 85 @include bem.elem('content') {
86 background-color: hsl(0, 0%, props.get(vars.$bg-color--l)); 86 background-color: hsl(0, 0%, props.get(vars.$bg-color--l));
87 } 87 }
88 } 88 }
89 89
90 @include iro.bem-modifier('colored') { 90 @include bem.modifier('colored') {
91 @include iro.bem-elem('content') { 91 @include bem.elem('content') {
92 color: #fff; 92 color: #fff;
93 background-color: hsl(props.get(vars.$bg-color--h), props.get(vars.$bg-color--s), props.get(vars.$bg-color--l)); 93 background-color: hsl(props.get(vars.$bg-color--h), props.get(vars.$bg-color--s), props.get(vars.$bg-color--l));
94 } 94 }
95 } 95 }
96 96
97 @each $mod, $size, $font-size, $indicator-size in vars.$sizes { 97 @each $mod, $size, $font-size, $indicator-size in vars.$sizes {
98 @include iro.bem-modifier($mod) { 98 @include bem.modifier($mod) {
99 font-size: props.get($font-size); 99 font-size: props.get($font-size);
100 100
101 @include status($indicator-size); 101 @include status($indicator-size);
102 102
103 @include iro.bem-elem('content') { 103 @include bem.elem('content') {
104 inline-size: props.get($size); 104 inline-size: props.get($size);
105 block-size: props.get($size); 105 block-size: props.get($size);
106 line-height: props.get($size); 106 line-height: props.get($size);