diff options
Diffstat (limited to 'src/objects')
-rw-r--r-- | src/objects/_avatar.scss | 25 |
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 | } |