From 3c59a39f5b6eb15b368bea1ad74e3222858c35ef Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sun, 27 Jul 2025 13:21:57 +0200 Subject: Add highlighted state to button --- src/objects/_button.scss | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) (limited to 'src/objects/_button.scss') diff --git a/src/objects/_button.scss b/src/objects/_button.scss index 8fbec78..c4ecd87 100644 --- a/src/objects/_button.scss +++ b/src/objects/_button.scss @@ -109,6 +109,35 @@ } } + @include bem.is('highlighted') { + &:link, + &:visited, + &:enabled { + &, + &:hover, + &:focus-visible { + border-color: props.get($theme, list.join($key, --highlighted --border-color)...); + } + + box-shadow: + 0 0 0 1px props.get($theme, list.join($key, --highlighted --border-color)...), + props.get(vars.$shadow-x) + props.get(vars.$shadow-y) + props.get(vars.$shadow-blur) + props.get(vars.$shadow-grow) + props.get($theme, list.join($key, --highlighted --shadow-color)...); + + &:focus-visible { + box-shadow: + props.get(vars.$shadow-x) + props.get(vars.$shadow-y) + props.get(vars.$shadow-blur) + props.get(vars.$shadow-grow) + props.get($theme, list.join($key, --shadow-color)...); + } + } + } + @include bem.is('selected') { color: props.get($theme, list.join($key, --selected --disabled --label-color)...); background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...); -- cgit v1.2.3-70-g09d2