Smaller status indicator

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) {