From cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 22 Jul 2026 12:27:09 +0200 Subject: Paths --- src/objects/_avatar.scss | 173 ++++++++++++++++++++++++++--------------------- 1 file changed, 95 insertions(+), 78 deletions(-) (limited to 'src/objects/_avatar.scss') diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss index 272c213..f805502 100644 --- a/src/objects/_avatar.scss +++ b/src/objects/_avatar.scss @@ -1,118 +1,135 @@ -@use 'sass:meta'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; +@use "sass:meta"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; -@forward 'avatar.vars'; -@use 'avatar.vars' as vars; +@forward "avatar.vars"; +@use "avatar.vars" as vars; @mixin status($indicator-size) { - @include bem.elem('status') { + @include bem.elem("status") { inline-size: props.get($indicator-size); - block-size: props.get($indicator-size); - - @include bem.sibling-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)), - transparent 95%, - #fff); + block-size: props.get($indicator-size); + + @include bem.sibling-elem("content") { + mask-image: radial-gradient( + circle calc(0.5 * props.get($indicator-size) + props.get(vars.$indicator-spacing)) + at calc(100% - 0.5 * props.get($indicator-size)) + calc(100% - 0.5 * props.get($indicator-size)), + transparent 95%, + #fff + ); } } } @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.object('avatar') { - position: relative; - display: inline-block; - font-style: normal; - vertical-align: .05em; - border-radius: props.get(vars.$rounding); + @include bem.object("avatar") { + position: relative; + display: inline-block; + font-style: normal; + vertical-align: 0.05em; + border-radius: props.get(vars.$rounding); &::after { - position: absolute; - inset: calc(-1 * props.get(vars.$key-focus--border-offset)); - z-index: 1; - display: none; + position: absolute; + inset: calc(-1 * props.get(vars.$key-focus--border-offset)); + z-index: 1; + display: none; pointer-events: none; - outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); - content: ''; - border: props.get(vars.$key-focus--border-offset) solid transparent; - border-radius: props.get(vars.$rounding); - box-shadow: - 0 - 0 - 0 - calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) + outline: props.get(vars.$key-focus--border-color) solid + props.get(vars.$key-focus--border-width); + content: ""; + border: props.get(vars.$key-focus--border-offset) solid transparent; + border-radius: props.get(vars.$rounding); + box-shadow: 0 0 0 + calc( + props.get(vars.$key-focus--border-width) + + props.get(vars.$key-focus--outline-width) + ) props.get(vars.$key-focus--outline-color); } - @include bem.elem('status') { - position: absolute; - inset-block-end: 0; + @include bem.elem("status") { + position: absolute; + inset-block-end: 0; inset-inline-end: 0; } - @include bem.elem('icon') { - position: absolute; - inset-block-end: 0; + @include bem.elem("icon") { + position: absolute; + inset-block-end: 0; inset-inline-end: 0; - display: flex; - align-items: flex-end; - justify-content: flex-end; - inline-size: props.get(vars.$icon-size); - block-size: props.get(vars.$icon-size); + display: flex; + align-items: flex-end; + justify-content: flex-end; + inline-size: props.get(vars.$icon-size); + block-size: props.get(vars.$icon-size); - @include bem.sibling-elem('content') { + @include bem.sibling-elem("content") { clip-path: props.get(vars.$icon-mask); } } - @include bem.elem('content') { - display: block; - inline-size: props.get(vars.$size); - block-size: props.get(vars.$size); - font-size: props.get(vars.$font-size); - line-height: props.get(vars.$size); - text-align: center; - object-fit: cover; - object-position: center center; - border-radius: props.get(vars.$rounding); + @include bem.elem("content") { + display: block; + inline-size: props.get(vars.$size); + block-size: props.get(vars.$size); + font-size: props.get(vars.$font-size); + line-height: props.get(vars.$size); + text-align: center; + object-fit: cover; + object-position: center center; + border-radius: props.get(vars.$rounding); } - @include bem.modifier('circle') { + @include bem.modifier("circle") { border-radius: 100%; &::after { border-radius: 100%; } - @include bem.elem('content') { + @include bem.elem("content") { border-radius: 100%; } } - @include bem.modifier('placeholder') { - @include bem.elem('content') { + @include bem.modifier("placeholder") { + @include bem.elem("content") { background-color: hsl(0, 0%, props.get(vars.$bg-color--l)); } } - @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)); + @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) + ); } } - @include bem.modifier('colored-gradient') { - @include bem.elem('content') { - color: #fff; - background: linear-gradient(props.get(vars.$bg-angle), - hsl(props.get(vars.$bg-color--h), props.get(vars.$bg-color--s), props.get(vars.$bg-color--l)), - hsl(props.get(vars.$bg-color-2--h), props.get(vars.$bg-color-2--s), props.get(vars.$bg-color-2--l))); + @include bem.modifier("colored-gradient") { + @include bem.elem("content") { + color: #fff; + background: linear-gradient( + props.get(vars.$bg-angle), + hsl( + props.get(vars.$bg-color--h), + props.get(vars.$bg-color--s), + props.get(vars.$bg-color--l) + ), + hsl( + props.get(vars.$bg-color-2--h), + props.get(vars.$bg-color-2--s), + props.get(vars.$bg-color-2--l) + ) + ); } } @@ -122,19 +139,19 @@ @include bem.modifier($mod) { @include status($indicator-size); - @include bem.elem('icon') { + @include bem.elem("icon") { inline-size: props.get($icon-size); - block-size: props.get($icon-size); + block-size: props.get($icon-size); - @include bem.sibling-elem('content') { - clip-path: props.get($icon-mask); + @include bem.sibling-elem("content") { + clip-path: props.get($icon-mask); } } - @include bem.elem('content') { + @include bem.elem("content") { inline-size: props.get($size); - block-size: props.get($size); - font-size: props.get($font-size); + block-size: props.get($size); + font-size: props.get($font-size); line-height: props.get($size); } } -- cgit v1.3.1