diff options
author | Volpeon <git@volpeon.ink> | 2022-02-06 20:23:11 +0100 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2022-02-06 20:23:11 +0100 |
commit | 9691ccf48f64dd0fac669ae51943907cc8da9b78 (patch) | |
tree | 01fa18eee29ec1266bbe3d276a8dac6f54390f16 /src/objects/_status-indicator.scss | |
parent | Fixes (diff) | |
download | iro-design-9691ccf48f64dd0fac669ae51943907cc8da9b78.tar.gz iro-design-9691ccf48f64dd0fac669ae51943907cc8da9b78.tar.bz2 iro-design-9691ccf48f64dd0fac669ae51943907cc8da9b78.zip |
Added status indicator and avatar
Diffstat (limited to 'src/objects/_status-indicator.scss')
-rw-r--r-- | src/objects/_status-indicator.scss | 33 |
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 | } | ||