summaryrefslogtreecommitdiffstats
path: root/src/objects/_status-indicator.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects/_status-indicator.scss')
-rw-r--r--src/objects/_status-indicator.scss33
1 files changed, 33 insertions, 0 deletions
diff --git a/src/objects/_status-indicator.scss b/src/objects/_status-indicator.scss
new file mode 100644
index 0000000..18d6f81
--- /dev/null
+++ b/src/objects/_status-indicator.scss
@@ -0,0 +1,33 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('status-indicator') {
5 @include iro.props-store((
6 --dims: (
7 --size: iro.fn-px-to-rem(10px),
8 ),
9 ), 'dims');
10
11 @include iro.props-store((
12 --colors: (
13 --default: fn.global-color(--obj-lo),
14 --green: scale-color(hsl(113, 49.8%, 49.6%), $lightness: 15%),
15 --yellow: scale-color(hsl(50, 59.8%, 58.4%), $lightness: 15%),
16 --red: scale-color(hsl(352, 69.8%, 58.4%), $lightness: 15%),
17 ),
18 ), 'colors');
19
20 @include iro.bem-object(iro.props-namespace()) {
21 display: inline-block;
22 width: fn.dim(--size);
23 height: fn.dim(--size);
24 border-radius: fn.dim(--size);
25 background-color: fn.color(--default);
26
27 @each $color in 'green' 'yellow' 'red' {
28 @include iro.bem-is($color) {
29 background-color: fn.color(--#{$color});
30 }
31 }
32 }
33}