From dd1ade8acc17d74a45240d255cb862009129b0ec Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 26 Jun 2024 16:53:07 +0200 Subject: Update --- src/.old/objects/_avatar.scss | 146 ------------------------------------------ 1 file changed, 146 deletions(-) delete mode 100644 src/.old/objects/_avatar.scss (limited to 'src/.old/objects/_avatar.scss') diff --git a/src/.old/objects/_avatar.scss b/src/.old/objects/_avatar.scss deleted file mode 100644 index 4be780e..0000000 --- a/src/.old/objects/_avatar.scss +++ /dev/null @@ -1,146 +0,0 @@ -@use 'iro-sass/src/index' as iro; -@use '../functions' as fn; - -@mixin status($size) { - @include iro.bem-elem('status') { - width: fn.dim(--#{$size} --indicator-size); - height: fn.dim(--#{$size} --indicator-size); - - @include iro.bem-next-elem('content') { - mask-image: radial-gradient( - circle calc(.5 * fn.dim(--#{$size} --indicator-size) + fn.dim(--indicator-spacing)) at - calc(100% - .5 * fn.dim(--#{$size} --indicator-size)) - calc(100% - .5 * fn.dim(--#{$size} --indicator-size)), - transparent 95%, - #fff - ); - } - } -} - -@include iro.props-namespace('avatar') { - @include iro.props-store(( - --dims: ( - --400: ( - --size: fn.global-dim(--size --1600), - --font-size: fn.global-dim(--font-size --800), - --indicator-size: fn.global-dim(--size --400), - ), - --300: ( - --size: fn.global-dim(--size --1200), - --font-size: fn.global-dim(--font-size --600), - --indicator-size: fn.global-dim(--size --300), - ), - --200: ( - --size: fn.global-dim(--size --800), - --font-size: fn.global-dim(--font-size --300), - --indicator-size: fn.global-dim(--size --225), - ), - --150: ( - --size: fn.global-dim(--size --650), - --font-size: fn.global-dim(--font-size --200), - --indicator-size: fn.global-dim(--size --175), - ), - --100: ( - --size: fn.global-dim(--size --500), - --font-size: fn.global-dim(--font-size --100), - --indicator-size: fn.global-dim(--size --150), - ), - --75: ( - --size: fn.global-dim(--size --375), - --font-size: fn.global-dim(--font-size --75), - --indicator-size: fn.global-dim(--size --125), - ), - --50: ( - --size: fn.global-dim(--size --250), - --font-size: fn.global-dim(--font-size --50), - --indicator-size: fn.global-dim(--size --100), - ), - --indicator-spacing: fn.global-dim(--size --40), - --rounding: 25%, - ), - ), 'dims'); - - @include iro.props-store(( - --colors: ( - --h: 354, - --s: 44%, - --l: 45%, - - --key-focus: ( - --border: fn.global-color(--focus --fill), - --shadow: 0 0 0 calc(2px + fn.global-dim(--focus --outline-width)) fn.global-color(--accent --primary --quiet --obj-lo), - ), - ), - ), 'colors'); - - @include iro.bem-object(iro.props-namespace()) { - display: inline-block; - position: relative; - border-radius: fn.dim(--rounding); - font-size: fn.dim(--100 --font-size); - font-style: normal; - vertical-align: .05em; - - @include iro.bem-elem('status') { - position: absolute; - right: 0; - bottom: 0; - } - - @include status(100); - - @include iro.bem-elem('content') { - display: block; - width: fn.dim(--100 --size); - height: fn.dim(--100 --size); - border-radius: fn.dim(--rounding); - line-height: fn.dim(--100 --size); - text-align: center; - object-fit: cover; - object-position: center center; - } - - @include iro.bem-modifier('circle') { - border-radius: 100%; - - @include iro.bem-elem('content') { - border-radius: 100%; - } - } - - @include iro.bem-modifier('placeholder') { - @include iro.bem-elem('content') { - background-color: hsl(0, 0%, fn.color(--l)); - } - } - - @include iro.bem-modifier('colored') { - @include iro.bem-elem('content') { - background-color: hsl(fn.color(--h), fn.color(--s), fn.color(--l)); - color: #fff; - } - } - - @each $size in 50 75 150 200 300 400 { - @include iro.bem-modifier($size) { - font-size: fn.dim(--#{$size} --font-size); - - @include status($size); - - @include iro.bem-elem('content') { - width: fn.dim(--#{$size} --size); - height: fn.dim(--#{$size} --size); - line-height: fn.dim(--#{$size} --size); - } - } - } - - @include iro.bem-at-theme('keyboard') { - &:focus { - outline: 2px solid fn.color(--key-focus --border); - box-shadow: fn.color(--key-focus --shadow); - } - } - } -} -- cgit v1.2.3-54-g00ecf