From 365c56edcc36b5b92902bac01ce44b43d01e8685 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 18 Oct 2024 18:08:24 +0200 Subject: Refactoring --- src/objects/_status-indicator.scss | 39 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 src/objects/_status-indicator.scss (limited to 'src/objects/_status-indicator.scss') diff --git a/src/objects/_status-indicator.scss b/src/objects/_status-indicator.scss new file mode 100644 index 0000000..ce1794a --- /dev/null +++ b/src/objects/_status-indicator.scss @@ -0,0 +1,39 @@ +@use 'iro-sass/src/iro-sass' as iro; +@use '../functions' as fn; + +$themes: 'accent' 'positive' 'negative' 'warning' !default; + +@include iro.props-namespace('status-indicator') { + @include iro.props-store(( + --dims: ( + --size: fn.global-dim(--size --125), + ), + --colors: ( + --default: fn.global-color(--border-strong), + --primary: fn.global-color(--text), + ), + )); + + @each $theme in $themes { + @include iro.props-store(( + --colors: ( + --#{$theme}: fn.global-color(--#{$theme} --700), + ), + )); + } + + @include iro.bem-object(iro.props-namespace()) { + display: inline-block; + inline-size: fn.dim(--size); + block-size: fn.dim(--size); + vertical-align: middle; + background-color: fn.color(--default); + border-radius: 10em; + + @each $theme in $themes { + @include iro.bem-is($theme) { + background-color: fn.color(--#{$theme}); + } + } + } +} -- cgit v1.3.1