elfen-component-device
Version:
elfen component device
48 lines (47 loc) • 8.3 kB
JavaScript
"use strict";
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
t[p[i]] = s[p[i]];
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var styled_components_1 = require("styled-components");
var Wrapper = (_a = ["\n display: inline-block;\n position: relative;\n\n @media (max-width: 600px) {\n position: static;\n }\n"], _a.raw = ["\n display: inline-block;\n position: relative;\n\n @media (max-width: 600px) {\n position: static;\n }\n"], styled_components_1.default.div(_a));
var Mask = (_b = ["\n display: none;\n\n @media (max-width: 600px) {\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: #fff;\n }\n"], _b.raw = ["\n display: none;\n\n @media (max-width: 600px) {\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: #fff;\n }\n"], styled_components_1.default.div(_b));
var Device = (_c = ["\n position: relative;\n width: 336px;\n height: 698px;\n box-sizing: border-box;\n\n @media (max-width: 600px) {\n position: static;\n\n }\n"], _c.raw = ["\n position: relative;\n width: 336px;\n height: 698px;\n box-sizing: border-box;\n\n @media (max-width: 600px) {\n position: static;\n\n }\n"], styled_components_1.default.div(_c));
var Frame = (_d = ["\n z-index: 1;\n width: 336px;\n height: 698px;\n background-color: #fff;\n border-radius: 54px;\n padding: 82px 18px;\n box-shadow: inset 0 0 0 2px #e4b08a, inset 0 0 0 6px #f7e8dd; // @theme color(gold)\n"], _d.raw = ["\n z-index: 1;\n width: 336px;\n height: 698px;\n background-color: #fff;\n border-radius: 54px;\n padding: 82px 18px;\n box-shadow: inset 0 0 0 2px #e4b08a, inset 0 0 0 6px #f7e8dd; // @theme color(gold)\n"], styled_components_1.default.div(_d));
var FrameContent = (_e = ["\n position: relative;\n border: 2px solid #222;\n border-radius: 4px;\n width: 300px;\n height: 534px;\n\n @media (max-width: 600px) {\n position: static;\n }\n"], _e.raw = ["\n position: relative;\n border: 2px solid #222;\n border-radius: 4px;\n width: 300px;\n height: 534px;\n\n @media (max-width: 600px) {\n position: static;\n }\n"], styled_components_1.default.div(_e));
var Stripe = (_f = ["\n &::after, &::before {\n display: block;\n border: solid rgba(#333, .15);\n border-width: 0 6px;\n content: \"\",\n height: 5px;\n left: 0;\n position: absolute;\n width: 100%;\n z-index: 9;\n }\n\n &::after {\n top: 55px;\n }\n\n &::before {\n bottom: 55px;\n }\n\n @media (max-width: 600px) {\n display: none;\n }\n"], _f.raw = ["\n &::after, &::before {\n display: block;\n border: solid rgba(#333, .15);\n border-width: 0 6px;\n content: \"\",\n height: 5px;\n left: 0;\n position: absolute;\n width: 100%;\n z-index: 9;\n }\n\n &::after {\n top: 55px;\n }\n\n &::before {\n bottom: 55px;\n }\n\n @media (max-width: 600px) {\n display: none;\n }\n"], styled_components_1.default.div(_f));
var Header = (_g = ["\n // border: 2px solid #e4b08a; // @theme color\n border-radius: 50%;\n bottom: 20px;\n height: 46px;\n left: 50%;\n margin-left: -23px;\n position: absolute;\n width: 46px;\n background: linear-gradient(135deg, #e4b08a 0%, #f3cfb4 50%, #fff6f0 69%, #e4b08a 100%);\n\n &::before {\n content: '';\n position: absolute;\n border-radius: 50%;\n top: 2px;\n left: 2px;\n width: calc(100% - 4px);\n height: calc(100% - 4px);\n background-color: #fff;\n }\n\n @media (max-width: 600px) {\n display: none;\n }\n"], _g.raw = ["\n // border: 2px solid #e4b08a; // @theme color\n border-radius: 50%;\n bottom: 20px;\n height: 46px;\n left: 50%;\n margin-left: -23px;\n position: absolute;\n width: 46px;\n background: linear-gradient(135deg, #e4b08a 0%, #f3cfb4 50%, #fff6f0 69%, #e4b08a 100%);\n\n &::before {\n content: '';\n position: absolute;\n border-radius: 50%;\n top: 2px;\n left: 2px;\n width: calc(100% - 4px);\n height: calc(100% - 4px);\n background-color: #fff;\n }\n\n @media (max-width: 600px) {\n display: none;\n }\n"], styled_components_1.default.div(_g));
var Sensors = (_h = ["\n background-color: #666;\n border-radius: 2.5px;\n height: 5px;\n left: 50%;\n margin-left: -30px;\n position: absolute;\n top: 41.5px;\n width: 60px;\n\n &::after, &::before {\n display: block;\n background-color: #666;\n border-radius: 50%;\n content: \"\";\n position: absolute;\n }\n\n &::before {\n height: 10px;\n left: -34px;\n margin-top: -5px;\n top: 50%;\n width: 10px;\n }\n\n &::after {\n height: 8px;\n left: 50%;\n margin-left: -4px;\n top: -20px;\n width: 8px;\n }\n\n @media (max-width: 600px) {\n display: none;\n }\n"], _h.raw = ["\n background-color: #666;\n border-radius: 2.5px;\n height: 5px;\n left: 50%;\n margin-left: -30px;\n position: absolute;\n top: 41.5px;\n width: 60px;\n\n &::after, &::before {\n display: block;\n background-color: #666;\n border-radius: 50%;\n content: \"\";\n position: absolute;\n }\n\n &::before {\n height: 10px;\n left: -34px;\n margin-top: -5px;\n top: 50%;\n width: 10px;\n }\n\n &::after {\n height: 8px;\n left: 50%;\n margin-left: -4px;\n top: -20px;\n width: 8px;\n }\n\n @media (max-width: 600px) {\n display: none;\n }\n"], styled_components_1.default.div(_h));
var Btns = (_j = ["\n background-color: #e4b08a; // @theme color\n height: 24px;\n left: -2px;\n position: absolute;\n top: 82px;\n width: 3px;\n\n &::after, &::before {\n display: block;\n background-color: #e4b08a; // @theme color\n content: \"\";\n height: 45px;\n left: 0;\n position: absolute;\n width: 3px;\n }\n\n &::before {\n top: 106px;\n }\n\n &::after {\n top: 50px;\n }\n\n @media (max-width: 600px) {\n display: none;\n }\n"], _j.raw = ["\n background-color: #e4b08a; // @theme color\n height: 24px;\n left: -2px;\n position: absolute;\n top: 82px;\n width: 3px;\n\n &::after, &::before {\n display: block;\n background-color: #e4b08a; // @theme color\n content: \"\";\n height: 45px;\n left: 0;\n position: absolute;\n width: 3px;\n }\n\n &::before {\n top: 106px;\n }\n\n &::after {\n top: 50px;\n }\n\n @media (max-width: 600px) {\n display: none;\n }\n"], styled_components_1.default.div(_j));
var Power = (_k = ["\n background-color: #e4b08a; // @theme color\n height: 80px;\n right: -2px;\n position: absolute;\n top: 160px;\n width: 3px;\n\n @media (max-width: 600px) {\n display: none;\n }\n"], _k.raw = ["\n background-color: #e4b08a; // @theme color\n height: 80px;\n right: -2px;\n position: absolute;\n top: 160px;\n width: 3px;\n\n @media (max-width: 600px) {\n display: none;\n }\n"], styled_components_1.default.div(_k));
function IPhone8(_a) {
var children = _a.children, rest = __rest(_a, ["children"]);
return (React.createElement(Wrapper, __assign({}, rest),
React.createElement(Mask, null),
React.createElement(Device, null,
React.createElement(Frame, null,
React.createElement(FrameContent, null, children)),
React.createElement(Stripe, null),
React.createElement(Header, null),
React.createElement(Sensors, null),
React.createElement(Btns, null),
React.createElement(Power, null))));
}
exports.default = IPhone8;
;
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;