From 008d65b383f3eb8970e0fff994323445efac03ca Mon Sep 17 00:00:00 2001 From: Volpeon Date: Tue, 15 Feb 2022 12:03:05 +0100 Subject: Smaller status indicator --- src/objects/_avatar.scss | 2 +- src/objects/_status-indicator.scss | 15 +++++++++++---- 2 files changed, 12 insertions(+), 5 deletions(-) (limited to 'src/objects') diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss index 0d9773f..1ccfa00 100644 --- a/src/objects/_avatar.scss +++ b/src/objects/_avatar.scss @@ -16,7 +16,7 @@ --size: fn.global-dim(--size --225), --font-size: fn.global-dim(--font-size --50), ), - --indicator-size: fn.foreign-dim(--status-indicator, --size), + --indicator-size: fn.foreign-dim(--status-indicator, --100), --indicator-spacing: iro.fn-px-to-rem(3px), --rounding: 25%, ), diff --git a/src/objects/_status-indicator.scss b/src/objects/_status-indicator.scss index 0ddd115..6bcb547 100644 --- a/src/objects/_status-indicator.scss +++ b/src/objects/_status-indicator.scss @@ -4,7 +4,8 @@ @include iro.props-namespace('status-indicator') { @include iro.props-store(( --dims: ( - --size: iro.fn-px-to-rem(10px), + --100: fn.global-dim(--size --100), + --125: fn.global-dim(--size --125), ), ), 'dims'); @@ -19,11 +20,17 @@ @include iro.bem-object(iro.props-namespace()) { display: inline-block; - width: fn.dim(--size); - height: fn.dim(--size); - border-radius: fn.dim(--size); + width: fn.dim(--100); + height: fn.dim(--100); + border-radius: fn.dim(--100); background-color: fn.color(--default); + @include iro.bem-modifier('125') { + width: fn.dim(--125); + height: fn.dim(--125); + border-radius: fn.dim(--125); + } + @each $color in 'green' 'yellow' 'red' { @include iro.bem-is($color) { background-color: fn.color(--#{$color}); -- cgit v1.2.3-54-g00ecf