diff options
Diffstat (limited to 'src/objects/_status-indicator.scss')
-rw-r--r-- | src/objects/_status-indicator.scss | 39 |
1 files changed, 39 insertions, 0 deletions
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 @@ | |||
1 | @use 'iro-sass/src/iro-sass' as iro; | ||
2 | @use '../functions' as fn; | ||
3 | |||
4 | $themes: 'accent' 'positive' 'negative' 'warning' !default; | ||
5 | |||
6 | @include iro.props-namespace('status-indicator') { | ||
7 | @include iro.props-store(( | ||
8 | --dims: ( | ||
9 | --size: fn.global-dim(--size --125), | ||
10 | ), | ||
11 | --colors: ( | ||
12 | --default: fn.global-color(--border-strong), | ||
13 | --primary: fn.global-color(--text), | ||
14 | ), | ||
15 | )); | ||
16 | |||
17 | @each $theme in $themes { | ||
18 | @include iro.props-store(( | ||
19 | --colors: ( | ||
20 | --#{$theme}: fn.global-color(--#{$theme} --700), | ||
21 | ), | ||
22 | )); | ||
23 | } | ||
24 | |||
25 | @include iro.bem-object(iro.props-namespace()) { | ||
26 | display: inline-block; | ||
27 | inline-size: fn.dim(--size); | ||
28 | block-size: fn.dim(--size); | ||
29 | vertical-align: middle; | ||
30 | background-color: fn.color(--default); | ||
31 | border-radius: 10em; | ||
32 | |||
33 | @each $theme in $themes { | ||
34 | @include iro.bem-is($theme) { | ||
35 | background-color: fn.color(--#{$theme}); | ||
36 | } | ||
37 | } | ||
38 | } | ||
39 | } | ||