@makeen.io/material-ui-kit
Version:
Makeen UI components kit. Based on material-ui.
80 lines (47 loc) • 2.86 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";function _templateObject2() {var data = _taggedTemplateLiteral(["\n ", "\n "]);_templateObject2 = function _templateObject2() {return data;};return data;}function _templateObject() {var data = _taggedTemplateLiteral(["\n position: relative;\n display: inline-block;\n ", ";\n\n ", "\n\n .pencil-icon {\n cursor: pointer;\n font-size: 13px;\n top: 0;\n padding-left: 20px;\n right: -20px;\n color: ", ";\n position: absolute;\n visibility: hidden;\n\n ", "\n\n ", "\n }\n\n &:hover {\n .pencil-icon {\n visibility: visible;\n }\n }\n"]);_templateObject = function _templateObject() {return data;};return data;}import styled, { css } from "styled-components";
var responsiveStyles = function responsiveStyles(props) {
var responsiveProps = props.responsive;
var styles = "";
if (responsiveProps) {
if (responsiveProps.xs) {
styles += "\n @media (min-width: ".concat(
props.theme.breakpoints.values.xs, "px) and (max-width: ").concat(props.theme.breakpoints.values.sm, "px) {\n ").concat(
responsiveProps.xs, "\n }\n ");
}
if (responsiveProps.sm) {
styles += "\n @media (min-width: ".concat(
props.theme.breakpoints.values.sm, "px) and (max-width: ").concat(props.theme.breakpoints.values.md, "px) {\n ").concat(
responsiveProps.sm, "\n }\n ");
}
if (responsiveProps.md) {
styles += "\n @media (min-width: ".concat(
props.theme.breakpoints.values.md, "px) and (max-width: ").concat(props.theme.breakpoints.values.lg, "px) {\n ").concat(
responsiveProps.md, "\n }\n ");
}
if (responsiveProps.lg) {
styles += "\n @media (min-width: ".concat(
props.theme.breakpoints.values.lg, "px) and (max-width: ").concat(props.theme.breakpoints.values.xl, "px) {\n ").concat(
responsiveProps.lg, "\n }\n ");
}
}
return styles;
};
var EditableWrapper = styled.div(_templateObject(),
function (props) {return props.editableStyle ? props.editableStyle(props) : "";},
function (props) {return responsiveStyles(_extends({},
props, {
responsive: {
sm: "width: 90%; max-width: 350px;",
xs: "width: 90%; max-width: 350px;"
} }));},
function (props) {return props.theme.palette.text.secondary;},
function (props) {return css(_templateObject2(),
props.pencilStyle ? props.pencilStyle(props) : "");},
function (props) {return responsiveStyles(_extends({},
props, {
responsive: {
sm: "visibility: visible;",
xs: "visibility: visible;"
} }));});
export default EditableWrapper;
//# sourceMappingURL=EditableWrapper.js.map