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 | } |
