20619a6a26
Co-authored-by: Github Action <action@github.com> Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com> Co-authored-by: aaroniker <4730431+aaroniker@users.noreply.github.com>
61 lines
1.0 KiB
CSS
61 lines
1.0 KiB
CSS
[data-component="resize-handle"] {
|
|
position: absolute;
|
|
z-index: 10;
|
|
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
opacity: 0;
|
|
transition-property: opacity;
|
|
transition-duration: var(--transition-duration);
|
|
transition-timing-function: var(--transition-easing);
|
|
}
|
|
|
|
&:hover::after,
|
|
&:active::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
&[data-direction="horizontal"] {
|
|
inset-block: 0;
|
|
inset-inline-end: 0;
|
|
width: 8px;
|
|
transform: translateX(50%);
|
|
cursor: col-resize;
|
|
|
|
&[data-edge="start"] {
|
|
inset-inline-start: 0;
|
|
inset-inline-end: auto;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
&::after {
|
|
width: 3px;
|
|
inset-block: 0;
|
|
inset-inline-start: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
|
|
&[data-direction="vertical"] {
|
|
inset-inline: 0;
|
|
inset-block-start: 0;
|
|
height: 8px;
|
|
transform: translateY(-50%);
|
|
cursor: row-resize;
|
|
|
|
&[data-edge="end"] {
|
|
inset-block-start: auto;
|
|
inset-block-end: 0;
|
|
transform: translateY(50%);
|
|
}
|
|
|
|
&::after {
|
|
height: 3px;
|
|
inset-inline: 0;
|
|
inset-block-start: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
}
|
|
}
|