39 lines
960 B
JavaScript
39 lines
960 B
JavaScript
import styled from "styled-components";
|
|
|
|
import Base from "../themes/base";
|
|
import { tablet } from "../utils/device";
|
|
|
|
const StyledDragAndDrop = styled.div`
|
|
/*-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;*/
|
|
height: ${(props) => props.theme.dragAndDrop.height};
|
|
border: ${(props) =>
|
|
props.drag
|
|
? props.theme.dragAndDrop.border
|
|
: props.theme.dragAndDrop.transparentBorder};
|
|
margin-left: -2px;
|
|
position: relative;
|
|
|
|
@media ${tablet} {
|
|
margin-left: 0;
|
|
}
|
|
outline: none;
|
|
background: ${(props) =>
|
|
props.dragging
|
|
? props.isDragAccept
|
|
? props.theme.dragAndDrop.acceptBackground
|
|
: props.theme.dragAndDrop.background
|
|
: "none !important"};
|
|
|
|
.droppable-hover {
|
|
background: ${(props) => props.theme.dragAndDrop.acceptBackground};
|
|
}
|
|
`;
|
|
|
|
StyledDragAndDrop.defaultProps = { theme: Base };
|
|
|
|
export default StyledDragAndDrop;
|