45 lines
846 B
TypeScript
45 lines
846 B
TypeScript
|
import styled, { css } from 'styled-components';
|
||
|
|
|
||
|
|
const Draggable = styled.div<{
|
||
|
|
$isDraggable: boolean;
|
||
|
|
$isDragging: boolean;
|
||
|
|
}>`
|
||
|
|
${({ $isDraggable }) => $isDraggable && css`
|
||
|
|
& > video {
|
||
|
|
cursor: grabbing;
|
||
|
|
}
|
||
|
|
`}
|
||
|
|
|
||
|
|
${({ $isDragging }) => $isDragging && css`
|
||
|
|
background-color: rgba(200, 200, 200, 0.5);
|
||
|
|
`}
|
||
|
|
`;
|
||
|
|
|
||
|
|
const ResizableWrapper = styled.div<{
|
||
|
|
$horizontal: boolean;
|
||
|
|
$vertical: boolean;
|
||
|
|
}>`
|
||
|
|
${({ $horizontal }) => $horizontal && css`
|
||
|
|
& > div span div {
|
||
|
|
&:hover {
|
||
|
|
background-color: rgba(255, 255, 255, .3);
|
||
|
|
}
|
||
|
|
width: 100% !important;
|
||
|
|
}
|
||
|
|
`}
|
||
|
|
|
||
|
|
${({ $vertical }) => $vertical && css`
|
||
|
|
& > div span div {
|
||
|
|
&:hover {
|
||
|
|
background-color: rgba(255, 255, 255, .3);
|
||
|
|
}
|
||
|
|
height: 100% !important;
|
||
|
|
}
|
||
|
|
`}
|
||
|
|
`;
|
||
|
|
|
||
|
|
export default {
|
||
|
|
Draggable,
|
||
|
|
ResizableWrapper,
|
||
|
|
};
|