mirror of
https://github.com/antebudimir/feishin.git
synced 2026-01-01 02:13:33 +00:00
34 lines
936 B
TypeScript
34 lines
936 B
TypeScript
|
import styled from 'styled-components';
|
||
|
|
|
||
|
|
export const ResizeHandle = styled.div<{
|
||
|
|
isResizing: boolean;
|
||
|
|
placement: 'top' | 'left' | 'bottom' | 'right';
|
||
|
|
}>`
|
||
|
|
position: absolute;
|
||
|
|
top: ${(props) => props.placement === 'top' && 0};
|
||
|
|
right: ${(props) => props.placement === 'right' && 0};
|
||
|
|
bottom: ${(props) => props.placement === 'bottom' && 0};
|
||
|
|
left: ${(props) => props.placement === 'left' && 0};
|
||
|
|
z-index: 90;
|
||
|
|
width: 4px;
|
||
|
|
height: 100%;
|
||
|
|
cursor: ew-resize;
|
||
|
|
opacity: ${(props) => (props.isResizing ? 1 : 0)};
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
opacity: 0.7;
|
||
|
|
}
|
||
|
|
|
||
|
|
&::before {
|
||
|
|
position: absolute;
|
||
|
|
top: ${(props) => props.placement === 'top' && 0};
|
||
|
|
right: ${(props) => props.placement === 'right' && 0};
|
||
|
|
bottom: ${(props) => props.placement === 'bottom' && 0};
|
||
|
|
left: ${(props) => props.placement === 'left' && 0};
|
||
|
|
width: 1px;
|
||
|
|
height: 100%;
|
||
|
|
background-color: var(--sidebar-handle-bg);
|
||
|
|
content: '';
|
||
|
|
}
|
||
|
|
`;
|