More avatar sizes

4 files changed, 79 insertions, 8 deletions

diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index d95c7fc..8597398 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -40,8 +40,8 @@
             --900:  iro.fn-px-to-rem(72px),
             --1000: iro.fn-px-to-rem(80px),
             --1200: iro.fn-px-to-rem(96px),
-            --1700: iro.fn-px-to-rem(136px),
-            --2300: iro.fn-px-to-rem(184px),
+            --1600: iro.fn-px-to-rem(128px),
+            --2000: iro.fn-px-to-rem(160px),
             --2400: iro.fn-px-to-rem(192px),
             --2500: iro.fn-px-to-rem(200px),
             --2600: iro.fn-px-to-rem(208px),
diff --git a/src/objects/_action-menu.scss b/src/objects/_action-menu.scss
index 5675ac4..3061293 100644
--- a/src/objects/_action-menu.scss
+++ b/src/objects/_action-menu.scss
@@ -116,7 +116,7 @@
         @include iro.bem-elem('icon-slot') {
             display:         flex;
             justify-content: center;
-            width:           1.2em;
+            width:           fn.foreign-dim(--icon, --size);
         }
     }
 }
diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss
index 51b144a..958d939 100644
--- a/src/objects/_avatar.scss
+++ b/src/objects/_avatar.scss
@@ -21,6 +21,21 @@
 @include iro.props-namespace('avatar') {
     @include iro.props-store((
         --dims: (
+            --400: (
+                --size:           fn.global-dim(--size --1600),
+                --font-size:      fn.global-dim(--font-size --800),
+                --indicator-size: fn.global-dim(--size --400),
+            ),
+            --300: (
+                --size:           fn.global-dim(--size --1200),
+                --font-size:      fn.global-dim(--font-size --600),
+                --indicator-size: fn.global-dim(--size --300),
+            ),
+            --200: (
+                --size:           fn.global-dim(--size --800),
+                --font-size:      fn.global-dim(--font-size --300),
+                --indicator-size: fn.global-dim(--size --225),
+            ),
             --150: (
                 --size:           fn.global-dim(--size --650),
                 --font-size:      fn.global-dim(--font-size --200),
@@ -124,7 +139,7 @@
             }
         }
 
-        @each $size in 50 75 150 {
+        @each $size in 50 75 150 200 300 400 {
             @include iro.bem-modifier($size) {
                 font-size: fn.dim(--#{$size} --font-size);
     
diff --git a/tpl/views/avatar.pug b/tpl/views/avatar.pug
index fcde68d..b08f5d7 100644
--- a/tpl/views/avatar.pug
+++ b/tpl/views/avatar.pug
@@ -2,11 +2,39 @@ mixin view-avatar
     +view('avatar', 'Avatar')
         .c-box
             div(style={ display: 'flex', gap: '.3em' })
-                +avatar(size='150' hue=180 href='#')
+                +avatar(size='400' href='#')
                     = 'Vo'
-                +avatar(size='150' hue=225)
+                +avatar(size='400' status='green' hue=45)
+                    = 'lp'
+                +avatar(size='400' src='avatar.png')
+                +avatar(size='400' src='avatar.png' status='red')
+            br
+            br
+            div(style={ display: 'flex', gap: '.3em' })
+                +avatar(size='300' href='#')
+                    = 'Vo'
+                +avatar(size='300' status='green' hue=45)
+                    = 'lp'
+                +avatar(size='300' src='avatar.png')
+                +avatar(size='300' src='avatar.png' status='red')
+            br
+            br
+            div(style={ display: 'flex', gap: '.3em' })
+                +avatar(size='200' href='#')
+                    = 'Vo'
+                +avatar(size='200' status='green' hue=45)
+                    = 'lp'
+                +avatar(size='200' src='avatar.png')
+                +avatar(size='200' src='avatar.png' status='red')
+            br
+            br
+            div(style={ display: 'flex', gap: '.3em' })
+                +avatar(size='150' href='#')
+                    = 'Vo'
+                +avatar(size='150' status='green' hue=45)
                     = 'lp'
                 +avatar(size='150' src='avatar.png')
+                +avatar(size='150' src='avatar.png' status='red')
             br
             br
             div(style={ display: 'flex', gap: '.3em' })
@@ -36,11 +64,39 @@ mixin view-avatar
 
         .c-box
             div(style={ display: 'flex', gap: '.3em' })
-                +avatar(circle=true size='150' hue=180 href='#')
+                +avatar(circle=true size='400' href='#')
+                    = 'Vo'
+                +avatar(circle=true size='400' status='green' hue=45)
+                    = 'lp'
+                +avatar(circle=true size='400' src='avatar.png')
+                +avatar(circle=true size='400' src='avatar.png' status='red')
+            br
+            br
+            div(style={ display: 'flex', gap: '.3em' })
+                +avatar(circle=true size='300' href='#')
+                    = 'Vo'
+                +avatar(circle=true size='300' status='green' hue=45)
+                    = 'lp'
+                +avatar(circle=true size='300' src='avatar.png')
+                +avatar(circle=true size='300' src='avatar.png' status='red')
+            br
+            br
+            div(style={ display: 'flex', gap: '.3em' })
+                +avatar(circle=true size='200' href='#')
+                    = 'Vo'
+                +avatar(circle=true size='200' status='green' hue=45)
+                    = 'lp'
+                +avatar(circle=true size='200' src='avatar.png')
+                +avatar(circle=true size='200' src='avatar.png' status='red')
+            br
+            br
+            div(style={ display: 'flex', gap: '.3em' })
+                +avatar(circle=true size='150' href='#')
                     = 'Vo'
-                +avatar(circle=true size='150' hue=225)
+                +avatar(circle=true size='150' status='green' hue=45)
                     = 'lp'
                 +avatar(circle=true size='150' src='avatar.png')
+                +avatar(circle=true size='150' src='avatar.png' status='red')
             br
             br
             div(style={ display: 'flex', gap: '.3em' })