fix: remove distracting outlines and resize handles from canvas shapes
Handles now only appear during active move/resize, not on hover or focus. Removes blue outline borders that cluttered the canvas. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
3b6ea5afcd
commit
3f7c649b54
|
|
@ -84,12 +84,12 @@ const styles = css`
|
|||
:host(:focus-within),
|
||||
:host(:focus-visible) {
|
||||
z-index: calc(${MAX_Z_INDEX} - 1);
|
||||
outline: solid 1px hsl(214, 84%, 56%);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
:host(:hover),
|
||||
:host(:state(highlighted)) {
|
||||
outline: solid 2px hsl(214, 84%, 56%);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
:host(:state(move)),
|
||||
|
|
@ -158,7 +158,11 @@ const styles = css`
|
|||
translate: -100% 0%;
|
||||
}
|
||||
|
||||
:host(:focus-within) :is([part^="resize"], [part^="rotation"]) {
|
||||
:host(:state(move)) :is([part^="resize"], [part^="rotation"]),
|
||||
:host(:state(resize-top-left)) :is([part^="resize"], [part^="rotation"]),
|
||||
:host(:state(resize-top-right)) :is([part^="resize"], [part^="rotation"]),
|
||||
:host(:state(resize-bottom-right)) :is([part^="resize"], [part^="rotation"]),
|
||||
:host(:state(resize-bottom-left)) :is([part^="resize"], [part^="rotation"]) {
|
||||
display: block;
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
Loading…
Reference in New Issue