From dd1ade8acc17d74a45240d255cb862009129b0ec Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 26 Jun 2024 16:53:07 +0200 Subject: Update --- 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..4c5305e --- /dev/null +++ b/src/objects/_status-indicator.scss @@ -0,0 +1,39 @@ +@use 'iro-sass/src/index' 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}-static --800), + ), + )); + } + + @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 $theme in $themes { + @include iro.bem-is($theme) { + background-color: fn.color(--#{$theme}); + } + } + } +} -- cgit v1.2.3-54-g00ecf