summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/objects/_avatar.scss25
1 files changed, 5 insertions, 20 deletions
diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss
index e80fc1a..4be780e 100644
--- a/src/objects/_avatar.scss
+++ b/src/objects/_avatar.scss
@@ -69,7 +69,7 @@
69 69
70 --key-focus: ( 70 --key-focus: (
71 --border: fn.global-color(--focus --fill), 71 --border: fn.global-color(--focus --fill),
72 --shadow: fn.global-color(--focus --shadow), 72 --shadow: 0 0 0 calc(2px + fn.global-dim(--focus --outline-width)) fn.global-color(--accent --primary --quiet --obj-lo),
73 ), 73 ),
74 ), 74 ),
75 ), 'colors'); 75 ), 'colors');
@@ -77,22 +77,11 @@
77 @include iro.bem-object(iro.props-namespace()) { 77 @include iro.bem-object(iro.props-namespace()) {
78 display: inline-block; 78 display: inline-block;
79 position: relative; 79 position: relative;
80 border-radius: fn.dim(--rounding);
80 font-size: fn.dim(--100 --font-size); 81 font-size: fn.dim(--100 --font-size);
81 font-style: normal; 82 font-style: normal;
82 vertical-align: .05em; 83 vertical-align: .05em;
83 84
84 &::after {
85 content: '';
86 display: block;
87 position: absolute;
88 top: 0;
89 right: 0;
90 bottom: 0;
91 left: 0;
92 border: 2px solid transparent;
93 border-radius: fn.dim(--rounding);
94 }
95
96 @include iro.bem-elem('status') { 85 @include iro.bem-elem('status') {
97 position: absolute; 86 position: absolute;
98 right: 0; 87 right: 0;
@@ -113,9 +102,7 @@
113 } 102 }
114 103
115 @include iro.bem-modifier('circle') { 104 @include iro.bem-modifier('circle') {
116 &::after { 105 border-radius: 100%;
117 border-radius: 100%;
118 }
119 106
120 @include iro.bem-elem('content') { 107 @include iro.bem-elem('content') {
121 border-radius: 100%; 108 border-radius: 100%;
@@ -151,10 +138,8 @@
151 138
152 @include iro.bem-at-theme('keyboard') { 139 @include iro.bem-at-theme('keyboard') {
153 &:focus { 140 &:focus {
154 &::after { 141 outline: 2px solid fn.color(--key-focus --border);
155 border-color: fn.color(--key-focus --border); 142 box-shadow: fn.color(--key-focus --shadow);
156 box-shadow: fn.color(--key-focus --shadow);
157 }
158 } 143 }
159 } 144 }
160 } 145 }