Files
outline/shared/editor/components/ResizeHandle.tsx

44 lines
831 B
TypeScript

import styled from "styled-components";
import { s } from "../../styles";
export const ResizeLeft = styled.div<{ $dragging: boolean }>`
cursor: ew-resize;
position: absolute;
left: -4px;
top: 0;
bottom: 0;
width: 8px;
user-select: none;
opacity: ${(props) => (props.$dragging ? 1 : 0)};
transition: opacity 150ms ease-in-out;
&:after {
content: "";
position: absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 15%;
min-height: 20px;
border-radius: 4px;
background: ${s("menuBackground")};
box-shadow: 0 0 0 1px ${s("textSecondary")};
opacity: 0.75;
}
@media print {
display: none;
}
`;
export const ResizeRight = styled(ResizeLeft)`
left: initial;
right: -4px;
&:after {
left: initial;
right: 8px;
}
`;