Avatar

3 files changed, 39 insertions, 14 deletions

diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss
index 9be249f..da7fdbd 100644
--- a/src/objects/_avatar.scss
+++ b/src/objects/_avatar.scss
@@ -66,6 +66,18 @@
         font-style:     normal;
         vertical-align: .05em;
 
+        &::after {
+            content:       '';
+            display:       block;
+            position:      absolute;
+            top:           0;
+            right:         0;
+            bottom:        0;
+            left:          0;
+            border:        2px solid transparent;
+            border-radius: fn.dim(--rounding);
+        }
+
         @include iro.bem-elem('status') {
             position: absolute;
             right:    0;
@@ -91,6 +103,10 @@
         }
 
         @include iro.bem-modifier('circle') {
+            &::after {
+                border-radius: 100%;
+            }
+
             @include iro.bem-elem('content') {
                 border-radius: 100%;
             }
@@ -102,6 +118,12 @@
             }
         }
 
+        @include iro.bem-modifier('colored') {
+            @include iro.bem-elem('content') {
+                background-color: hsl(fn.color(--h), fn.color(--s), fn.color(--l));
+            }
+        }
+
         @each $size in 50 75 150 {
             @include iro.bem-modifier($size) {
                 font-size: fn.dim(--#{$size} --font-size);
@@ -118,8 +140,10 @@
     
         @include iro.bem-at-theme('keyboard') {
             &:focus {
-                border-color: fn.color(--key-focus --border);
-                box-shadow:   inset 0 0 0 1px fn.color(--key-focus --border), fn.color(--key-focus --shadow);
+                &::after {
+                    border-color: fn.color(--key-focus --border);
+                    box-shadow:   fn.color(--key-focus --shadow);
+                }
             }
         }
     }
diff --git a/tpl/objects/avatar.pug b/tpl/objects/avatar.pug
index a2ff941..19439bb 100644
--- a/tpl/objects/avatar.pug
+++ b/tpl/objects/avatar.pug
@@ -3,9 +3,10 @@ include ../objects/status-indicator.pug
 mixin avatar
     -
         let classes = {
-            'o-avatar':         true,
-            'o-avatar--circle': attributes.circle,
-            'u-d-block':        attributes.block
+            'o-avatar':          true,
+            'o-avatar--colored': true,
+            'o-avatar--circle':  attributes.circle,
+            'u-d-block':         attributes.block
         }
         if (attributes.class) {
             classes[attributes.class] = true;
@@ -19,7 +20,7 @@ mixin avatar
             styles['--avatar--colors--h'] = attributes.hue;
         }
 
-    div(class=classes style=styles)
+    a(class=classes style=styles href=attributes.href)
         if attributes.status 
             +status-indicator(attributes.status)(class='o-avatar__status')
         if attributes.src 
diff --git a/tpl/views/avatar.pug b/tpl/views/avatar.pug
index 7941649..fcde68d 100644
--- a/tpl/views/avatar.pug
+++ b/tpl/views/avatar.pug
@@ -2,7 +2,7 @@ mixin view-avatar
     +view('avatar', 'Avatar')
         .c-box
             div(style={ display: 'flex', gap: '.3em' })
-                +avatar(size='150' hue=180)
+                +avatar(size='150' hue=180 href='#')
                     = 'Vo'
                 +avatar(size='150' hue=225)
                     = 'lp'
@@ -10,7 +10,7 @@ mixin view-avatar
             br
             br
             div(style={ display: 'flex', gap: '.3em' })
-                +avatar
+                +avatar(href='#')
                     = 'Vo'
                 +avatar(status='green' hue=45)
                     = 'lp'
@@ -19,7 +19,7 @@ mixin view-avatar
             br
             br
             div(style={ display: 'flex', gap: '.3em' })
-                +avatar(size='75' hue=90)
+                +avatar(size='75' hue=90 href='#')
                     = 'eo'
                 +avatar(size='75' status='green' hue=135)
                     = 'n'
@@ -28,7 +28,7 @@ mixin view-avatar
             br
             br
             div(style={ display: 'flex', gap: '.3em' })
-                +avatar(size='50' hue=180)
+                +avatar(size='50' hue=180 href='#')
                     = 'V'
                 +avatar(size='50' hue=225)
                     = 'o'
@@ -36,7 +36,7 @@ mixin view-avatar
 
         .c-box
             div(style={ display: 'flex', gap: '.3em' })
-                +avatar(circle=true size='150' hue=180)
+                +avatar(circle=true size='150' hue=180 href='#')
                     = 'Vo'
                 +avatar(circle=true size='150' hue=225)
                     = 'lp'
@@ -44,7 +44,7 @@ mixin view-avatar
             br
             br
             div(style={ display: 'flex', gap: '.3em' })
-                +avatar(circle=true)
+                +avatar(circle=true href='#')
                     = 'Vo'
                 +avatar(circle=true status='green' hue=45)
                     = 'lp'
@@ -53,7 +53,7 @@ mixin view-avatar
             br
             br
             div(style={ display: 'flex', gap: '.3em' })
-                +avatar(circle=true size='75' hue=90)
+                +avatar(circle=true size='75' hue=90 href='#')
                     = 'eo'
                 +avatar(circle=true size='75' status='green' hue=135)
                     = 'n'
@@ -62,7 +62,7 @@ mixin view-avatar
             br
             br
             div(style={ display: 'flex', gap: '.3em' })
-                +avatar(circle=true size='50' hue=180)
+                +avatar(circle=true size='50' hue=180 href='#')
                     = 'V'
                 +avatar(circle=true size='50' hue=225)
                     = 'o'