From d23a2cf25ccc33f49d73ee3da2f775c0d4fa0784 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Thu, 27 Jun 2024 09:56:02 +0200 Subject: Update --- src/objects/_menu.scss | 29 +++++++++++++++++++---------- 1 file changed, 19 insertions(+), 10 deletions(-) (limited to 'src/objects/_menu.scss') 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 @@ +/* stylelint-disable length-zero-no-unit */ + @use 'iro-sass/src/index' as iro; @use '../functions' as fn; @@ -15,12 +17,12 @@ --pad-i: fn.global-dim(--size --150), --pad-b: fn.global-dim(--size --100), --rounding: 0em, - ), - --key-focus: ( - --border: fn.global-dim(--key-focus --border), - --border-offset: fn.global-dim(--key-focus --border-offset), - --outline: fn.global-dim(--key-focus --outline), + --key-focus: ( + --border: fn.global-dim(--key-focus --border), + --border-offset: fn.global-dim(--key-focus --border-offset), + --outline: fn.global-dim(--key-focus --outline), + ), ), ), --colors: ( @@ -68,11 +70,13 @@ } @include iro.bem-elem('item') { - padding-block: calc(fn.dim(--item --pad-b) - 2px); - padding-inline: calc(fn.dim(--item --pad-i) - 2px); - border: 2px solid transparent; - border-radius: fn.dim(--item --rounding); - color: fn.color(--item --disabled --label); + padding-block: fn.dim(--item --pad-b); + padding-inline: fn.dim(--item --pad-i); + margin: calc(-1 * fn.dim(--item --key-focus --outline)); + border: fn.dim(--item --key-focus --outline) solid transparent; + border-radius: calc(fn.dim(--item --rounding) + fn.dim(--item --key-focus --outline)); + color: fn.color(--item --disabled --label); + background-clip: padding-box; &:link, &:visited, @@ -88,6 +92,11 @@ background-color: fn.color(--item --active --bg); color: fn.color(--item --active --label); } + + &:focus-visible { + outline: fn.color(--item --key-focus --border) solid fn.dim(--item --key-focus --border); + box-shadow: 0 0 0 calc(fn.dim(--item --key-focus --border) + fn.dim(--item --key-focus --outline)) fn.color(--item --key-focus --outline); + } } @include iro.bem-next-elem('header') { -- cgit v1.2.3-70-g09d2