From 48cb00040763459fc46d4aa108bf72c12f48f422 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 21 Jun 2024 23:07:50 +0200 Subject: WIP: Refactoring --- src/.old/objects/_status-indicator.scss | 35 +++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 src/.old/objects/_status-indicator.scss (limited to 'src/.old/objects/_status-indicator.scss') diff --git a/src/.old/objects/_status-indicator.scss b/src/.old/objects/_status-indicator.scss new file mode 100644 index 0000000..d8ea9ef --- /dev/null +++ b/src/.old/objects/_status-indicator.scss @@ -0,0 +1,35 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +@include iro.props-namespace('status-indicator') { + @include iro.props-store(( + --dims: ( + --size: fn.global-dim(--size --125), + ), + ), 'dims'); + + @include iro.props-store(( + --colors: ( + --default: fn.global-color(--obj-lo), + --primary: fn.global-color(--fg), + --green: fn.global-color(--green --solid --bg-hi), + --yellow: fn.global-color(--yellow --solid --bg-hi), + --red: fn.global-color(--red --solid --bg-hi), + ), + ), 'colors'); + + @include iro.bem-object(iro.props-namespace()) { + display: inline-block; + width: fn.dim(--size); + height: fn.dim(--size); + border-radius: 10em; + background-color: fn.color(--default); + vertical-align: middle; + + @each $color in 'primary' 'green' 'yellow' 'red' { + @include iro.bem-is($color) { + background-color: fn.color(--#{$color}); + } + } + } +} -- cgit v1.2.3-54-g00ecf