react-life-design/lib/Modal/Modal.styled.js

Life Design UI components

"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
Object.defineProperty(exports, "__esModule", { value: true });
var styled_components_1 = require("styled-components");
var Colors_1 = require("../Colors");
var Sizes_1 = require("../Sizes");
var onAnimation = function (from, mid, to) { return styled_components_1.keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% { transform: scale(", "); }\n\t40% { transform: scale(", "); }\n\t60% { transform: scale(", "); }\n"], ["\n  0% { transform: scale(", "); }\n\t40% { transform: scale(", "); }\n\t60% { transform: scale(", "); }\n"])), from, mid, to); };
var onOpacity = function (from, to) { return styled_components_1.keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  from { opacity: ", " };\n  to { opacity: ", "}\n"], ["\n  from { opacity: ", " };\n  to { opacity: ", "}\n"])), from, to); };
exports.ModalStyle = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  overflow-y: auto;\n  z-index: 9999;\n  background-color: ", ";\n  position: fixed;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  padding: ", "px;\n  will-change: transfrom;\n\n  ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  overflow-y: auto;\n  z-index: 9999;\n  background-color: ", ";\n  position: fixed;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  padding: ", "px;\n  will-change: transfrom;\n\n  ",
    ";\n\n  ",
    "\n\n  ",
    "\n\n  ",
    "\n"])), Colors_1.default.white, Sizes_1.default.s4, function (_a) {
    var animation = _a.animation;
    return animation === 'enter' ? styled_components_1.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["animation: ", " .7s forwards;"], ["animation: ", " .7s forwards;"])), onAnimation(0, 1.1, 1)) : styled_components_1.css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["animation: ", " .7s forwards;"], ["animation: ", " .7s forwards;"])), onAnimation(1, 1.1, 0));
}, function (_a) {
    var type = _a.type;
    return type === 'default' && "\n    @media screen and (min-width: 768px) {\n      padding: " + Sizes_1.default.s5 + "px;\n      width: 90%;\n      height: 85vh;\n      margin: 67px auto 0;\n      max-width: 756px;\n    }\n  ";
}, function (_a) {
    var type = _a.type;
    return type === 'small' && "\n    @media screen and (min-width: 768px) {\n      display: table;\n      padding: " + Sizes_1.default.s4 + "px " + Sizes_1.default.s4 + "px;\n      max-width: 375px;\n      max-height: 480px;\n      top: 50%;\n      margin: -150px auto 0;\n    }\n  ";
}, function (_a) {
    var type = _a.type;
    return type === 'full' && "\n    @media screen and (min-width: 768px) {\n      padding: " + Sizes_1.default.s5 + "px " + Sizes_1.default.s7 + "px;\n    }\n  ";
});
exports.Close = styled_components_1.default.button(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  appearance: none;\n  background-color: transparent;\n  border: 0 none;\n  cursor: pointer;\n  padding: 0;\n  outline: none;\n\n  @media screen and (max-width: 600px) {\n\n  }\n"], ["\n  appearance: none;\n  background-color: transparent;\n  border: 0 none;\n  cursor: pointer;\n  padding: 0;\n  outline: none;\n\n  @media screen and (max-width: 600px) {\n\n  }\n"])));
exports.WrapperClose = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 100%;\n  text-align: right;\n"], ["\n  width: 100%;\n  text-align: right;\n"])));
exports.WrapperButton = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  text-align: right;\n  align-self: flex-end;\n  flex-grow: 1;\n  margin-top: ", "px;\n\n  & button:nth-child(2) {\n    margin-left: ", "px;\n  }\n"], ["\n  text-align: right;\n  align-self: flex-end;\n  flex-grow: 1;\n  margin-top: ", "px;\n\n  & button:nth-child(2) {\n    margin-left: ", "px;\n  }\n"])), Sizes_1.default.s5, Sizes_1.default.s4);
exports.ExternalHelperStyle = styled_components_1.createGlobalStyle(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  html, body {\n    overflow: hidden;\n  }\n"], ["\n  html, body {\n    overflow: hidden;\n  }\n"])));
exports.Wrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["width: 100%;"], ["width: 100%;"])));
exports.Overlay = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  transition: .7s all;\n  opacity: 0;\n  height: 100%;\n  width: 100%;\n  overflow-y: scroll;\n\n  ", ";\n"], ["\n  position: fixed;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  transition: .7s all;\n  opacity: 0;\n  height: 100%;\n  width: 100%;\n  overflow-y: scroll;\n\n  ",
    ";\n"])), function (_a) {
    var animation = _a.animation;
    return animation === 'enter' ? styled_components_1.css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["animation: ", " .7s forwards; opacity: 1"], ["animation: ", " .7s forwards; opacity: 1"])), onOpacity(0, 1)) : styled_components_1.css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["animation: ", " .7s forwards;"], ["animation: ", " .7s forwards;"])), onOpacity(1, 0));
});
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
//# sourceMappingURL=Modal.styled.js.map