From 5855a6821cf5585378a70f9bee13563bdbfe2d86 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Tue, 22 Oct 2024 08:23:33 +0200 Subject: Less broad imports --- src/objects/_avatar.scss | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) (limited to 'src/objects/_avatar.scss') 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 @@ @use 'sass:meta'; -@use 'iro-sass/src/iro-sass' as iro; +@use 'iro-sass/src/bem' as bem; @use 'iro-sass/src/props'; @use '../props' as *; @@ -7,11 +7,11 @@ @use 'avatar.vars' as vars; @mixin status($indicator-size) { - @include iro.bem-elem('status') { + @include bem.elem('status') { inline-size: props.get($indicator-size); block-size: props.get($indicator-size); - @include iro.bem-next-elem('content') { + @include bem.next-elem('content') { mask-image: radial-gradient(circle calc(.5 * props.get($indicator-size) + props.get(vars.$indicator-spacing)) at calc(100% - .5 * props.get($indicator-size)) calc(100% - .5 * props.get($indicator-size)), @@ -24,7 +24,7 @@ @mixin styles { @include materialize-at-root(meta.module-variables('vars')); - @include iro.bem-object('avatar') { + @include bem.object('avatar') { position: relative; display: inline-block; font-size: props.get(vars.$font-size); @@ -50,7 +50,7 @@ props.get(vars.$key-focus--outline-color); } - @include iro.bem-elem('status') { + @include bem.elem('status') { position: absolute; inset-block-end: 0; inset-inline-end: 0; @@ -58,7 +58,7 @@ @include status(vars.$indicator-size); - @include iro.bem-elem('content') { + @include bem.elem('content') { display: block; inline-size: props.get(vars.$size); block-size: props.get(vars.$size); @@ -69,38 +69,38 @@ border-radius: props.get(vars.$rounding); } - @include iro.bem-modifier('circle') { + @include bem.modifier('circle') { border-radius: 100%; &::after { border-radius: 100%; } - @include iro.bem-elem('content') { + @include bem.elem('content') { border-radius: 100%; } } - @include iro.bem-modifier('placeholder') { - @include iro.bem-elem('content') { + @include bem.modifier('placeholder') { + @include bem.elem('content') { background-color: hsl(0, 0%, props.get(vars.$bg-color--l)); } } - @include iro.bem-modifier('colored') { - @include iro.bem-elem('content') { + @include bem.modifier('colored') { + @include bem.elem('content') { color: #fff; background-color: hsl(props.get(vars.$bg-color--h), props.get(vars.$bg-color--s), props.get(vars.$bg-color--l)); } } @each $mod, $size, $font-size, $indicator-size in vars.$sizes { - @include iro.bem-modifier($mod) { + @include bem.modifier($mod) { font-size: props.get($font-size); @include status($indicator-size); - @include iro.bem-elem('content') { + @include bem.elem('content') { inline-size: props.get($size); block-size: props.get($size); line-height: props.get($size); -- cgit v1.2.3-70-g09d2