From 41b0d0497988274057fc2512c822a6bc9d2d3ebd Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 6 Aug 2025 16:40:56 +0200 Subject: Switch to tab indentation --- src/objects/_avatar.scss | 220 +++++++++++++++++++++++------------------------ 1 file changed, 110 insertions(+), 110 deletions(-) (limited to 'src/objects/_avatar.scss') diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss index 81396e3..9d51ffb 100644 --- a/src/objects/_avatar.scss +++ b/src/objects/_avatar.scss @@ -7,120 +7,120 @@ @use 'avatar.vars' as vars; @mixin status($indicator-size) { - @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); - } - } + @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); + } + } } @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); - - @include bem.object('avatar') { - position: relative; - display: inline-block; - font-size: props.get(vars.$font-size); - 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; - pointer-events: none; - content: ''; - border: props.get(vars.$key-focus--border-offset) solid transparent; - border-radius: props.get(vars.$rounding); - outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); - 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; - inset-inline-end: 0; - } - - @include status(vars.$indicator-size); - - @include bem.elem('content') { - display: block; - inline-size: props.get(vars.$size); - block-size: props.get(vars.$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') { - border-radius: 100%; - - &::after { - border-radius: 100%; - } - - @include bem.elem('content') { - border-radius: 100%; - } - } - - @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-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))); - } - } - - @each $mod, $size, $font-size, $indicator-size in vars.$sizes { - @include bem.modifier($mod) { - font-size: props.get($font-size); + @include materialize-at-root(meta.module-variables('vars')); + + @include bem.object('avatar') { + position: relative; + display: inline-block; + font-size: props.get(vars.$font-size); + 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; + 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)) + props.get(vars.$key-focus--outline-color); + } + + @include bem.elem('status') { + position: absolute; + inset-block-end: 0; + inset-inline-end: 0; + } + + @include status(vars.$indicator-size); + + @include bem.elem('content') { + display: block; + inline-size: props.get(vars.$size); + block-size: props.get(vars.$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') { + border-radius: 100%; + + &::after { + border-radius: 100%; + } + + @include bem.elem('content') { + border-radius: 100%; + } + } + + @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-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))); + } + } + + @each $mod, $size, $font-size, $indicator-size in vars.$sizes { + @include bem.modifier($mod) { + font-size: props.get($font-size); - @include status($indicator-size); + @include status($indicator-size); - @include bem.elem('content') { - inline-size: props.get($size); - block-size: props.get($size); - line-height: props.get($size); - } - } - } + @include bem.elem('content') { + inline-size: props.get($size); + block-size: props.get($size); + line-height: props.get($size); + } + } + } - &:focus-visible { - &::after { - display: block; - } - } - } + &:focus-visible { + &::after { + display: block; + } + } + } } -- cgit v1.2.3-70-g09d2