jeffemmett
/
folk-canvas
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

simplify shape css

This commit is contained in:
“chrisshank” 2024-12-07 14:47:07 -08:00
parent dc7e763d99
commit c391417ce5
1 changed files with 33 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
src/folk-shape.ts
View File

@ -37,20 +37,23 @@ const flipYHandleMap: HandleMap = {
}; };
const styles = css` const styles = css`
* {
box-sizing: border-box;
}
:host { :host {
display: block; display: block;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
cursor: move; cursor: move;
box-sizing: border-box;
transform-origin: 0 0; transform-origin: 0 0;
} }
:host::before { :host::before {
content: ''; content: '';
position: absolute; position: absolute;
inset: -15px -15px -15px -15px; inset: -15px;
z-index: -1; z-index: -1;
} }
@ -85,79 +88,67 @@ const styles = css`
user-select: none; user-select: none;
} }
[part^='resize'] { [part] {
display: block;
position: absolute;
box-sizing: border-box;
padding: 0;
background: hsl(210, 20%, 98%);
z-index: calc(infinity);
width: 9px;
aspect-ratio: 1; aspect-ratio: 1;
display: none;
position: absolute;
z-index: calc(infinity);
padding: 0;
}
[part^='resize'] {
background: hsl(210, 20%, 98%);
width: 9px;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
border: 1.5px solid hsl(214, 84%, 56%); border: 1.5px solid hsl(214, 84%, 56%);
border-radius: 2px; border-radius: 2px;
} }
[part='resize-top-left'] {
top: 0;
left: 0;
}
[part='resize-top-right'] {
top: 0;
left: 100%;
}
[part='resize-bottom-right'] {
top: 100%;
left: 100%;
}
[part='resize-bottom-left'] {
top: 100%;
left: 0;
}
[part^='rotation'] { [part^='rotation'] {
z-index: calc(infinity);
display: block;
position: absolute;
box-sizing: border-box;
border-radius: 0px; border-radius: 0px;
padding: 0;
opacity: 0; opacity: 0;
width: 16px; width: 16px;
aspect-ratio: 1; aspect-ratio: 1;
} }
[part='rotation-top-left'] { [part$='top-left'] {
top: 0; top: 0;
left: 0; left: 0;
}
[part='rotation-top-left'] {
translate: -100% -100%; translate: -100% -100%;
} }
[part='rotation-top-right'] { [part$='top-right'] {
top: 0; top: 0;
left: 100%; left: 100%;
}
[part='rotation-top-right'] {
translate: 0% -100%; translate: 0% -100%;
} }
[part='rotation-bottom-right'] { [part$='bottom-right'] {
top: 100%; top: 100%;
left: 100%; left: 100%;
}
[part='rotation-bottom-right'] {
translate: 0% 0%; translate: 0% 0%;
} }
[part='rotation-bottom-left'] { [part$='bottom-left'] {
top: 100%; top: 100%;
left: 0; left: 0;
}
[part='rotation-bottom-left'] {
translate: -100% 0%; translate: -100% 0%;
} }
:host(:not(:focus-within)) [part^='resize'], :host(:focus-within) :is([part^='resize'], [part^='rotation']) {
:host(:not(:focus-within)) [part^='rotation'] { display: block;
display: none;
} }
`; `;