Better indicator size handling

2 files changed, 37 insertions, 29 deletions

diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss
index 1ccfa00..42f6520 100644
--- a/src/objects/_avatar.scss
+++ b/src/objects/_avatar.scss
@@ -1,23 +1,42 @@
 @use 'iro-sass/src/index' as iro;
 @use '../functions' as fn;
 
+@mixin status($size) {
+    @include iro.bem-elem('status') {
+        width:  fn.dim(--#{$size} --indicator-size);
+        height: fn.dim(--#{$size} --indicator-size);
+
+        @include iro.bem-next-elem('content') {
+            mask-image: radial-gradient(
+                circle calc(.5 * fn.dim(--#{$size} --indicator-size) + fn.dim(--indicator-spacing)) at
+                calc(100% - .5 * fn.dim(--#{$size} --indicator-size))
+                calc(100% - .5 * fn.dim(--#{$size} --indicator-size)),
+                transparent 95%,
+                #fff
+            );
+        }
+    }
+}
+
 @include iro.props-namespace('avatar') {
     @include iro.props-store((
         --dims: (
             --100: (
-                --size:      fn.global-dim(--size --450),
-                --font-size: fn.global-dim(--font-size --100),
+                --size:           fn.global-dim(--size --450),
+                --font-size:      fn.global-dim(--font-size --100),
+                --indicator-size: fn.global-dim(--size --125),
             ),
             --75: (
-                --size:      fn.global-dim(--size --325),
-                --font-size: fn.global-dim(--font-size --75),
+                --size:           fn.global-dim(--size --325),
+                --font-size:      fn.global-dim(--font-size --75),
+                --indicator-size: fn.global-dim(--size --100),
             ),
             --50: (
-                --size:      fn.global-dim(--size --225),
-                --font-size: fn.global-dim(--font-size --50),
+                --size:           fn.global-dim(--size --225),
+                --font-size:      fn.global-dim(--font-size --50),
+                --indicator-size: fn.global-dim(--size --85),
             ),
-            --indicator-size:    fn.foreign-dim(--status-indicator, --100),
-            --indicator-spacing: iro.fn-px-to-rem(3px),
+            --indicator-spacing: fn.global-dim(--size --40),
             --rounding:          25%,
         ),
     ), 'dims');
@@ -40,18 +59,10 @@
             position: absolute;
             right:    0;
             bottom:   0;
-
-            @include iro.bem-next-elem('content') {
-                mask-image: radial-gradient(
-                    circle calc(.5 * fn.dim(--indicator-size) + fn.dim(--indicator-spacing)) at
-                    calc(100% - .5 * fn.dim(--indicator-size))
-                    calc(100% - .5 * fn.dim(--indicator-size)),
-                    transparent 95%,
-                    #fff
-                );
-            }
         }
 
+        @include status(100);
+
         @include iro.bem-elem('content') {
             display:          block;
             width:            fn.dim(--100 --size);
@@ -80,6 +91,8 @@
         @include iro.bem-modifier('75') {
             font-size: fn.dim(--75 --font-size);
 
+            @include status(75);
+
             @include iro.bem-elem('content') {
                 width:       fn.dim(--75 --size);
                 height:      fn.dim(--75 --size);
@@ -90,6 +103,8 @@
         @include iro.bem-modifier('50') {
             font-size: fn.dim(--50 --font-size);
 
+            @include status(50);
+
             @include iro.bem-elem('content') {
                 width:       fn.dim(--50 --size);
                 height:      fn.dim(--50 --size);
diff --git a/src/objects/_status-indicator.scss b/src/objects/_status-indicator.scss
index 6bcb547..b316f69 100644
--- a/src/objects/_status-indicator.scss
+++ b/src/objects/_status-indicator.scss
@@ -4,8 +4,7 @@
 @include iro.props-namespace('status-indicator') {
     @include iro.props-store((
         --dims: (
-            --100: fn.global-dim(--size --100),
-            --125: fn.global-dim(--size --125),
+            --size: fn.global-dim(--size --125),
         ),
     ), 'dims');
 
@@ -20,17 +19,11 @@
 
     @include iro.bem-object(iro.props-namespace()) {
         display:          inline-block;
-        width:            fn.dim(--100);
-        height:           fn.dim(--100);
-        border-radius:    fn.dim(--100);
+        width:            fn.dim(--size);
+        height:           fn.dim(--size);
+        border-radius:    10em;
         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});