From aeed08dc46662a0d70e04bcea612a701633736e7 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 22 Jul 2026 13:00:59 +0200 Subject: Revert "Paths" This reverts commit cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226. --- src/objects/_avatar.scss | 173 +++++++++++++++++++++-------------------------- 1 file changed, 78 insertions(+), 95 deletions(-) (limited to 'src/objects/_avatar.scss') 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 @@ -@use "sass:meta"; -@use "pkg:iro-sass/bem"; -@use "pkg:iro-sass/props"; -@use "../props" as *; +@use 'sass:meta'; +@use 'pkg:iro-sass/src/bem'; +@use 'pkg:iro-sass/src/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(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 - ); + 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); } } } @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: 0.05em; - border-radius: props.get(vars.$rounding); + @include bem.object('avatar') { + position: relative; + display: inline-block; + font-style: normal; + vertical-align: .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))); } } @@ -139,19 +122,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