diff options
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 | } | ||
