react-drag-drop-files
Version:
Light React Drag & Drop files and images library styled by styled-components
22 lines • 3.69 kB
JavaScript
import { __makeTemplateObject } from "tslib";
import styled, { css } from 'styled-components';
var primary = '#0658c2', darkGray = '#666', lightGray = '#999';
var defaultStyle = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n min-width: 322px;\n max-width: 508px;\n height: 48px;\n border: dashed 2px ", ";\n padding: 8px 16px 8px 8px;\n border-radius: 5px;\n cursor: pointer;\n flex-grow: 0;\n\n &.is-disabled {\n border: dashed 2px ", ";\n cursor: no-drop;\n svg {\n fill: ", ";\n color: ", ";\n path {\n fill: ", ";\n color: ", ";\n }\n }\n }\n"], ["\n display: flex;\n align-items: center;\n min-width: 322px;\n max-width: 508px;\n height: 48px;\n border: dashed 2px ", ";\n padding: 8px 16px 8px 8px;\n border-radius: 5px;\n cursor: pointer;\n flex-grow: 0;\n\n &.is-disabled {\n border: dashed 2px ", ";\n cursor: no-drop;\n svg {\n fill: ", ";\n color: ", ";\n path {\n fill: ", ";\n color: ", ";\n }\n }\n }\n"])), primary, darkGray, darkGray, darkGray, darkGray, darkGray);
export var UploaderWrapper = styled.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n ", ";\n &:focus-within {\n outline: 2px solid black;\n }\n & > input {\n display: block;\n opacity: 0;\n position: absolute;\n pointer-events: none;\n }\n"], ["\n position: relative;\n ", ";\n &:focus-within {\n outline: 2px solid black;\n }\n & > input {\n display: block;\n opacity: 0;\n position: absolute;\n pointer-events: none;\n }\n"])), function (props) { return (props.override ? '' : defaultStyle); });
/**
*
* @internal
*/
export var HoverMsg = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border: dashed 2px ", ";\n border-radius: 5px;\n background-color: ", ";\n opacity: 0.9;\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n z-index: 999;\n & > span {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translateX(-50%) translateY(-50%);\n }\n"], ["\n border: dashed 2px ", ";\n border-radius: 5px;\n background-color: ", ";\n opacity: 0.9;\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n z-index: 999;\n & > span {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translateX(-50%) translateY(-50%);\n }\n"])), darkGray, lightGray);
/**
*
* @internal
*/
export var DescriptionWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n flex-grow: 1;\n & > span {\n font-size: 12px;\n color: ", ";\n }\n .file-types {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n max-width: 100px;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n flex-grow: 1;\n & > span {\n font-size: 12px;\n color: ", ";\n }\n .file-types {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n max-width: 100px;\n }\n"])), function (props) { return (props.$error ? 'red' : darkGray); });
/**
*
* @internal
*/
export var Description = styled.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-size: 14px;\n color: ", ";\n span {\n text-decoration: underline;\n }\n"], ["\n font-size: 14px;\n color: ", ";\n span {\n text-decoration: underline;\n }\n"])), darkGray);
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
//# sourceMappingURL=style.js.map