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 +++++++++++---- tpl/objects/action-menu.pug | 2 +- tpl/objects/menu.pug | 2 +- tpl/objects/status-indicator.pug | 4 +++- 5 files changed, 17 insertions(+), 8 deletions(-) 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}); diff --git a/tpl/objects/action-menu.pug b/tpl/objects/action-menu.pug index 751e29d..b856df8 100644 --- a/tpl/objects/action-menu.pug +++ b/tpl/objects/action-menu.pug @@ -11,7 +11,7 @@ mixin action-menu-item .l-card__block.o-action-menu__icon-slot if attributes.icon if attributes.iconIsStatus - +status-indicator(attributes.icon)(class='o-action-menu__icon') + +status-indicator(attributes.icon)(size=125 class='o-action-menu__icon') else +icon(attributes.icon)(class='o-action-menu__icon') .l-card__block.l-card__block--main diff --git a/tpl/objects/menu.pug b/tpl/objects/menu.pug index 0a654ce..e4180b8 100644 --- a/tpl/objects/menu.pug +++ b/tpl/objects/menu.pug @@ -18,7 +18,7 @@ mixin menu-item if attributes.icon .l-card__block.o-menu__icon-slot if attributes.iconIsStatus - +status-indicator(attributes.icon)(class='o-menu__icon') + +status-indicator(attributes.icon)(size=125 class='o-menu__icon') else +icon(attributes.icon)(class='o-menu__icon') .l-card__block.l-card__block--main&attributes({ class: attributes.contentClass }) diff --git a/tpl/objects/status-indicator.pug b/tpl/objects/status-indicator.pug index 7ecb08a..850348d 100644 --- a/tpl/objects/status-indicator.pug +++ b/tpl/objects/status-indicator.pug @@ -1,7 +1,9 @@ mixin status-indicator(status) - + let size = attributes.size || 100; let classes = { - 'o-status-indicator': true, + 'o-status-indicator': true, + ['o-status-indicator--' + size]: true, } classes['is-' + status] = true if (attributes.class) { -- cgit v1.2.3-54-g00ecf