diff options
Diffstat (limited to 'src/objects/_menu.scss')
-rw-r--r-- | src/objects/_menu.scss | 29 |
1 files changed, 19 insertions, 10 deletions
diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss index b1350ba..0f691a2 100644 --- a/src/objects/_menu.scss +++ b/src/objects/_menu.scss | |||
@@ -1,3 +1,5 @@ | |||
1 | /* stylelint-disable length-zero-no-unit */ | ||
2 | |||
1 | @use 'iro-sass/src/index' as iro; | 3 | @use 'iro-sass/src/index' as iro; |
2 | @use '../functions' as fn; | 4 | @use '../functions' as fn; |
3 | 5 | ||
@@ -15,12 +17,12 @@ | |||
15 | --pad-i: fn.global-dim(--size --150), | 17 | --pad-i: fn.global-dim(--size --150), |
16 | --pad-b: fn.global-dim(--size --100), | 18 | --pad-b: fn.global-dim(--size --100), |
17 | --rounding: 0em, | 19 | --rounding: 0em, |
18 | ), | ||
19 | 20 | ||
20 | --key-focus: ( | 21 | --key-focus: ( |
21 | --border: fn.global-dim(--key-focus --border), | 22 | --border: fn.global-dim(--key-focus --border), |
22 | --border-offset: fn.global-dim(--key-focus --border-offset), | 23 | --border-offset: fn.global-dim(--key-focus --border-offset), |
23 | --outline: fn.global-dim(--key-focus --outline), | 24 | --outline: fn.global-dim(--key-focus --outline), |
25 | ), | ||
24 | ), | 26 | ), |
25 | ), | 27 | ), |
26 | --colors: ( | 28 | --colors: ( |
@@ -68,11 +70,13 @@ | |||
68 | } | 70 | } |
69 | 71 | ||
70 | @include iro.bem-elem('item') { | 72 | @include iro.bem-elem('item') { |
71 | padding-block: calc(fn.dim(--item --pad-b) - 2px); | 73 | padding-block: fn.dim(--item --pad-b); |
72 | padding-inline: calc(fn.dim(--item --pad-i) - 2px); | 74 | padding-inline: fn.dim(--item --pad-i); |
73 | border: 2px solid transparent; | 75 | margin: calc(-1 * fn.dim(--item --key-focus --outline)); |
74 | border-radius: fn.dim(--item --rounding); | 76 | border: fn.dim(--item --key-focus --outline) solid transparent; |
75 | color: fn.color(--item --disabled --label); | 77 | border-radius: calc(fn.dim(--item --rounding) + fn.dim(--item --key-focus --outline)); |
78 | color: fn.color(--item --disabled --label); | ||
79 | background-clip: padding-box; | ||
76 | 80 | ||
77 | &:link, | 81 | &:link, |
78 | &:visited, | 82 | &:visited, |
@@ -88,6 +92,11 @@ | |||
88 | background-color: fn.color(--item --active --bg); | 92 | background-color: fn.color(--item --active --bg); |
89 | color: fn.color(--item --active --label); | 93 | color: fn.color(--item --active --label); |
90 | } | 94 | } |
95 | |||
96 | &:focus-visible { | ||
97 | outline: fn.color(--item --key-focus --border) solid fn.dim(--item --key-focus --border); | ||
98 | box-shadow: 0 0 0 calc(fn.dim(--item --key-focus --border) + fn.dim(--item --key-focus --outline)) fn.color(--item --key-focus --outline); | ||
99 | } | ||
91 | } | 100 | } |
92 | 101 | ||
93 | @include iro.bem-next-elem('header') { | 102 | @include iro.bem-next-elem('header') { |