diff options
Diffstat (limited to 'src/objects/_badge.scss')
-rw-r--r-- | src/objects/_badge.scss | 36 |
1 files changed, 24 insertions, 12 deletions
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss index cc7e500..06261b8 100644 --- a/src/objects/_badge.scss +++ b/src/objects/_badge.scss | |||
@@ -45,13 +45,9 @@ $static-themes: 'black' 'white' !default; | |||
45 | } | 45 | } |
46 | 46 | ||
47 | @if string.slice($theme, 1, 7) == 'static-' { | 47 | @if string.slice($theme, 1, 7) == 'static-' { |
48 | &:link, | 48 | &::after { |
49 | &:visited, | 49 | outline: fn.color(--#{$theme} --key-focus --border) solid fn.dim(--key-focus --border); |
50 | &:enabled { | 50 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--#{$theme} --key-focus --outline); |
51 | &:focus-visible { | ||
52 | outline: fn.color(--#{$theme} --key-focus --border) solid fn.dim(--key-focus --border); | ||
53 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--#{$theme} --key-focus --outline); | ||
54 | } | ||
55 | } | 51 | } |
56 | } | 52 | } |
57 | } | 53 | } |
@@ -190,11 +186,10 @@ $static-themes: 'black' 'white' !default; | |||
190 | 186 | ||
191 | @include iro.bem-object(iro.props-namespace()) { | 187 | @include iro.bem-object(iro.props-namespace()) { |
192 | display: inline-block; | 188 | display: inline-block; |
193 | margin: calc(-1 * fn.dim(--key-focus --border)); | 189 | position: relative; |
194 | padding-block: fn.dim(--pad-b); | 190 | padding-block: fn.dim(--pad-b); |
195 | padding-inline: fn.dim(--pad-i); | 191 | padding-inline: fn.dim(--pad-i); |
196 | border: fn.dim(--key-focus --border) solid transparent; | 192 | border-radius: fn.dim(--rounding); |
197 | border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border)); | ||
198 | background-color: fn.color(--bg); | 193 | background-color: fn.color(--bg); |
199 | background-clip: padding-box; | 194 | background-clip: padding-box; |
200 | color: fn.color(--label); | 195 | color: fn.color(--label); |
@@ -203,6 +198,18 @@ $static-themes: 'black' 'white' !default; | |||
203 | text-align: center; | 198 | text-align: center; |
204 | text-decoration: none; | 199 | text-decoration: none; |
205 | 200 | ||
201 | &::after { | ||
202 | content: ''; | ||
203 | display: none; | ||
204 | position: absolute; | ||
205 | z-index: 1; | ||
206 | inset: calc(-1 * fn.dim(--key-focus --border-offset)); | ||
207 | border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset)); | ||
208 | outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); | ||
209 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); | ||
210 | pointer-events: none; | ||
211 | } | ||
212 | |||
206 | &:link, | 213 | &:link, |
207 | &:visited, | 214 | &:visited, |
208 | &:enabled { | 215 | &:enabled { |
@@ -244,8 +251,9 @@ $static-themes: 'black' 'white' !default; | |||
244 | &:visited, | 251 | &:visited, |
245 | &:enabled { | 252 | &:enabled { |
246 | &:focus-visible { | 253 | &:focus-visible { |
247 | outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); | 254 | &::after { |
248 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); | 255 | display: block; |
256 | } | ||
249 | } | 257 | } |
250 | } | 258 | } |
251 | 259 | ||
@@ -258,6 +266,10 @@ $static-themes: 'black' 'white' !default; | |||
258 | @include iro.bem-modifier('pill') { | 266 | @include iro.bem-modifier('pill') { |
259 | padding-inline: fn.dim(--pad-i-pill); | 267 | padding-inline: fn.dim(--pad-i-pill); |
260 | border-radius: 10em; | 268 | border-radius: 10em; |
269 | |||
270 | &::after { | ||
271 | border-radius: 10em; | ||
272 | } | ||
261 | } | 273 | } |
262 | 274 | ||
263 | @each $size in sm lg xl { | 275 | @each $size in sm lg xl { |