summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--src/objects/_avatar.scss28
-rw-r--r--tpl/objects/avatar.pug9
-rw-r--r--tpl/views/avatar.pug16
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 @@
66 font-style: normal; 66 font-style: normal;
67 vertical-align: .05em; 67 vertical-align: .05em;
68 68
69 &::after {
70 content: '';
71 display: block;
72 position: absolute;
73 top: 0;
74 right: 0;
75 bottom: 0;
76 left: 0;
77 border: 2px solid transparent;
78 border-radius: fn.dim(--rounding);
79 }
80
69 @include iro.bem-elem('status') { 81 @include iro.bem-elem('status') {
70 position: absolute; 82 position: absolute;
71 right: 0; 83 right: 0;
@@ -91,6 +103,10 @@
91 } 103 }
92 104
93 @include iro.bem-modifier('circle') { 105 @include iro.bem-modifier('circle') {
106 &::after {
107 border-radius: 100%;
108 }
109
94 @include iro.bem-elem('content') { 110 @include iro.bem-elem('content') {
95 border-radius: 100%; 111 border-radius: 100%;
96 } 112 }
@@ -102,6 +118,12 @@
102 } 118 }
103 } 119 }
104 120
121 @include iro.bem-modifier('colored') {
122 @include iro.bem-elem('content') {
123 background-color: hsl(fn.color(--h), fn.color(--s), fn.color(--l));
124 }
125 }
126
105 @each $size in 50 75 150 { 127 @each $size in 50 75 150 {
106 @include iro.bem-modifier($size) { 128 @include iro.bem-modifier($size) {
107 font-size: fn.dim(--#{$size} --font-size); 129 font-size: fn.dim(--#{$size} --font-size);
@@ -118,8 +140,10 @@
118 140
119 @include iro.bem-at-theme('keyboard') { 141 @include iro.bem-at-theme('keyboard') {
120 &:focus { 142 &:focus {
121 border-color: fn.color(--key-focus --border); 143 &::after {
122 box-shadow: inset 0 0 0 1px fn.color(--key-focus --border), fn.color(--key-focus --shadow); 144 border-color: fn.color(--key-focus --border);
145 box-shadow: fn.color(--key-focus --shadow);
146 }
123 } 147 }
124 } 148 }
125 } 149 }
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
3mixin avatar 3mixin avatar
4 - 4 -
5 let classes = { 5 let classes = {
6 'o-avatar': true, 6 'o-avatar': true,
7 'o-avatar--circle': attributes.circle, 7 'o-avatar--colored': true,
8 'u-d-block': attributes.block 8 'o-avatar--circle': attributes.circle,
9 'u-d-block': attributes.block
9 } 10 }
10 if (attributes.class) { 11 if (attributes.class) {
11 classes[attributes.class] = true; 12 classes[attributes.class] = true;
@@ -19,7 +20,7 @@ mixin avatar
19 styles['--avatar--colors--h'] = attributes.hue; 20 styles['--avatar--colors--h'] = attributes.hue;
20 } 21 }
21 22
22 div(class=classes style=styles) 23 a(class=classes style=styles href=attributes.href)
23 if attributes.status 24 if attributes.status
24 +status-indicator(attributes.status)(class='o-avatar__status') 25 +status-indicator(attributes.status)(class='o-avatar__status')
25 if attributes.src 26 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
2 +view('avatar', 'Avatar') 2 +view('avatar', 'Avatar')
3 .c-box 3 .c-box
4 div(style={ display: 'flex', gap: '.3em' }) 4 div(style={ display: 'flex', gap: '.3em' })
5 +avatar(size='150' hue=180) 5 +avatar(size='150' hue=180 href='#')
6 = 'Vo' 6 = 'Vo'
7 +avatar(size='150' hue=225) 7 +avatar(size='150' hue=225)
8 = 'lp' 8 = 'lp'
@@ -10,7 +10,7 @@ mixin view-avatar
10 br 10 br
11 br 11 br
12 div(style={ display: 'flex', gap: '.3em' }) 12 div(style={ display: 'flex', gap: '.3em' })
13 +avatar 13 +avatar(href='#')
14 = 'Vo' 14 = 'Vo'
15 +avatar(status='green' hue=45) 15 +avatar(status='green' hue=45)
16 = 'lp' 16 = 'lp'
@@ -19,7 +19,7 @@ mixin view-avatar
19 br 19 br
20 br 20 br
21 div(style={ display: 'flex', gap: '.3em' }) 21 div(style={ display: 'flex', gap: '.3em' })
22 +avatar(size='75' hue=90) 22 +avatar(size='75' hue=90 href='#')
23 = 'eo' 23 = 'eo'
24 +avatar(size='75' status='green' hue=135) 24 +avatar(size='75' status='green' hue=135)
25 = 'n' 25 = 'n'
@@ -28,7 +28,7 @@ mixin view-avatar
28 br 28 br
29 br 29 br
30 div(style={ display: 'flex', gap: '.3em' }) 30 div(style={ display: 'flex', gap: '.3em' })
31 +avatar(size='50' hue=180) 31 +avatar(size='50' hue=180 href='#')
32 = 'V' 32 = 'V'
33 +avatar(size='50' hue=225) 33 +avatar(size='50' hue=225)
34 = 'o' 34 = 'o'
@@ -36,7 +36,7 @@ mixin view-avatar
36 36
37 .c-box 37 .c-box
38 div(style={ display: 'flex', gap: '.3em' }) 38 div(style={ display: 'flex', gap: '.3em' })
39 +avatar(circle=true size='150' hue=180) 39 +avatar(circle=true size='150' hue=180 href='#')
40 = 'Vo' 40 = 'Vo'
41 +avatar(circle=true size='150' hue=225) 41 +avatar(circle=true size='150' hue=225)
42 = 'lp' 42 = 'lp'
@@ -44,7 +44,7 @@ mixin view-avatar
44 br 44 br
45 br 45 br
46 div(style={ display: 'flex', gap: '.3em' }) 46 div(style={ display: 'flex', gap: '.3em' })
47 +avatar(circle=true) 47 +avatar(circle=true href='#')
48 = 'Vo' 48 = 'Vo'
49 +avatar(circle=true status='green' hue=45) 49 +avatar(circle=true status='green' hue=45)
50 = 'lp' 50 = 'lp'
@@ -53,7 +53,7 @@ mixin view-avatar
53 br 53 br
54 br 54 br
55 div(style={ display: 'flex', gap: '.3em' }) 55 div(style={ display: 'flex', gap: '.3em' })
56 +avatar(circle=true size='75' hue=90) 56 +avatar(circle=true size='75' hue=90 href='#')
57 = 'eo' 57 = 'eo'
58 +avatar(circle=true size='75' status='green' hue=135) 58 +avatar(circle=true size='75' status='green' hue=135)
59 = 'n' 59 = 'n'
@@ -62,7 +62,7 @@ mixin view-avatar
62 br 62 br
63 br 63 br
64 div(style={ display: 'flex', gap: '.3em' }) 64 div(style={ display: 'flex', gap: '.3em' })
65 +avatar(circle=true size='50' hue=180) 65 +avatar(circle=true size='50' hue=180 href='#')
66 = 'V' 66 = 'V'
67 +avatar(circle=true size='50' hue=225) 67 +avatar(circle=true size='50' hue=225)
68 = 'o' 68 = 'o'