@makeen.io/material-ui-kit/distr/atoms/Frame/index.js

Makeen UI components kit. Based on material-ui.

import _extends from "@babel/runtime/helpers/extends";import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";function _templateObject() {var data = _taggedTemplateLiteral(["\n  position: relative;\n  background-color: black;\n\n  ", "\n\n  ", "\n\n  .tablet-buttons {\n    position: absolute;\n    left: 0;\n    top: 0;\n    right: 0;\n\n    &__button {\n      position: absolute;\n\n      &_power {\n        top: ", ";\n        right: 45px;\n        left: ", ";\n        background-color: ", ";\n        width: 27px;\n        height: 3px;\n        transform: ", ";\n      }\n      &_volume-up {\n        right: -18px;\n        top: ", ";\n        left: ", ";\n        background-color: ", ";\n        width: 27px;\n        height: 3px;\n        transform: ", ";\n      }\n      &_volume-down {\n        right: -18px;\n        top: ", ";\n        left: ", ";\n        background-color: ", ";\n        width: 27px;\n        height: 3px;\n        transform: ", ";\n      }\n    }\n  }\n\n  .smartphone-buttons {\n    position: absolute;\n    left: 0;\n    top: 0;\n    right: 0;\n\n    &__button {\n      position: absolute;\n\n      &_sound {\n        width: 26px;\n        height: 3px;\n        left: ", ";\n        top: ", ";\n        background-color: ", ";\n        transform: ", ";\n      }\n\n      &_power {\n        width: 80px;\n        height: 3px;\n        right: ", ";\n        left: ", ";\n        top: ", ";\n        background-color: ", ";\n        transform: ", ";\n      }\n\n      &_volume-up {\n        width: 50px;\n        height: 3px;\n        left: ", ";\n        top: ", ";\n        background-color: ", ";\n        transform: ", ";\n      }\n\n      &_volume-down {\n        width: 50px;\n        height: 3px;\n        left: ", ";\n        top: ", ";\n        background-color: ", ";\n        transform: ", ";\n      }\n    }\n  }\n\n  .input-devices {\n    position: absolute;\n    display: inline-flex;\n    align-items: center;\n    top: ", ";\n    left: ", ";\n    z-index: 2;\n\n    transform: ", ";\n\n    ", ";\n  }\n\n  .micro {\n    width: 42px;\n    height: 6px;\n    border-radius: 3px;\n    background-color: ", ";\n    margin-right: 8px;\n  }\n\n  .camera {\n    background-color: ", ";\n    border-radius: 50%;\n    width: ", ";\n    height: ", ";\n  }\n\n  .screen {\n    height: 100%;\n    background-color: ", ";\n    border-radius: ", ";\n    border: 2px solid ", ";\n    overflow-y: auto;\n    padding: ", ";\n  }\n"]);_templateObject = function _templateObject() {return data;};return data;}import React from "react";
import styled from "styled-components";
export var orientationType;
(function (orientationType) {
  orientationType["landscape"] = "landscape";
  orientationType["portrait"] = "portrait";
})(orientationType || (orientationType = {}));
export var deviceType;
(function (deviceType) {
  deviceType["tablet"] = "tablet";
  deviceType["smartphone"] = "smartphone";
})(deviceType || (deviceType = {}));
var getInnerBorderColor = function getInnerBorderColor(_ref) {var glow = _ref.glow,highlight = _ref.highlight,theme = _ref.theme;
  if (glow) {
    return theme.palette.frame.glowBorderColor;
  }
  if (highlight) {
    return theme.palette.frame.highlightBorderColor;
  }
  return theme.palette.frame.innerBorderColor;
};
var getScreenBackgroundColor = function getScreenBackgroundColor(_ref2) {var glow = _ref2.glow,theme = _ref2.theme,isEmpty = _ref2.isEmpty;
  if (glow && !isEmpty) {
    return theme.palette.frame.glowBackgroundColor;
  }
  return theme.palette.frame.contentBackgroundColor;
};
var getProperWidth = function getProperWidth(_ref3) {var width = _ref3.width,variant = _ref3.variant;
  return width || (variant === deviceType.tablet ? 605 : 338);
};
var isRotateMode = function isRotateMode(_ref4) {var orientation = _ref4.orientation,variant = _ref4.variant;return orientation === orientationType.landscape && variant === deviceType.tablet;};
var DeviceButtons = function DeviceButtons(_ref5) {var variant = _ref5.variant;return /*#__PURE__*/React.createElement("div", { className: "".concat(variant, "-buttons") }, /*#__PURE__*/
  React.createElement("div", { className: "".concat(variant, "-buttons__button ").concat(variant, "-buttons__button_sound") }), /*#__PURE__*/
  React.createElement("div", { className: "".concat(variant, "-buttons__button ").concat(variant, "-buttons__button_volume-up") }), /*#__PURE__*/
  React.createElement("div", { className: "".concat(variant, "-buttons__button ").concat(variant, "-buttons__button_volume-down") }), /*#__PURE__*/
  React.createElement("div", { className: "".concat(variant, "-buttons__button ").concat(variant, "-buttons__button_power") }));};
export default styled(function (_ref6) {var children = _ref6.children,variant = _ref6.variant,width = _ref6.width,orientation = _ref6.orientation,rest = _objectWithoutProperties(_ref6, ["children", "variant", "width", "orientation"]);
  return /*#__PURE__*/React.createElement("div", _extends({}, rest), /*#__PURE__*/
  React.createElement(DeviceButtons, { variant: variant }),
  variant === deviceType.smartphone && /*#__PURE__*/React.createElement("div", { className: "notch" }), /*#__PURE__*/
  React.createElement("div", { className: "input-devices" },
  variant === deviceType.smartphone && /*#__PURE__*/React.createElement("span", { className: "micro" }), /*#__PURE__*/
  React.createElement("span", { className: "camera" })), /*#__PURE__*/
  React.createElement("div", { className: "screen" }, children));
})(_templateObject(),



function (props) {
  var frame = props.theme.sizes.frame[props.variant];
  var width = getProperWidth(props);
  var currentRatio = props.orientation === orientationType.landscape ?
  props.variant === deviceType.tablet ?
  725 / 605 :
  690 / 338 :
  props.variant === deviceType.tablet ?
  605 / 725 :
  338 / 690;
  return "\n    width: ".concat(
  props.orientation === orientationType.portrait ? "".concat(
  width, "px") : "".concat(
  width * currentRatio, "px"), ";\n    height: ").concat(
  props.orientation === orientationType.portrait ? "".concat(
  width / currentRatio, "px") : "".concat(
  width, "px"), ";\n    border: solid 4px ").concat(
  props.theme.palette.frame.outerBorderColor, ";\n    border-radius: ").concat(
  frame.borderRadius, ";\n    padding: ").concat(
  frame.padding, ";\n    background-color: ").concat(
  props.theme.palette.frame.deviceColor, ";\n  ");

},

function (props) {var
    variant = props.variant,theme = props.theme,orientation = props.orientation;
  if (variant === deviceType.tablet) {
    return;
  }
  var frame = props.theme.sizes.frame[props.variant];
  return "\n  .notch {\n    content: '';\n    position: absolute;\n    left: ".concat(



  orientation === orientationType.portrait ? "22%" : frame.padding, ";\n    right: auto;\n    top: ").concat(

  orientation === orientationType.portrait ? frame.padding : "22%", ";\n    z-index: 2;\n    width: ").concat(

  orientation === orientationType.portrait ? "56%" : "23px", ";\n    height: ").concat(
  orientation === orientationType.portrait ? "23px" : "56%", ";\n    background-color: ").concat(
  theme.palette.frame.deviceColor, ";\n    border: 2px solid ").concat(
  getInnerBorderColor(props), ";\n    ").concat(
  orientation === orientationType.portrait ?
  "border-top: none;" :
  "border-left: none;", ";\n    border-radius: ").concat(
  orientation === orientationType.portrait ?
  "0px 0px 40px 40px" :
  "0px 40px 40px 0", ";\n  }");

},











function (props) {return isRotateMode(props) ? "45px" : "-6px";},

function (props) {return isRotateMode(props) ? "-18px" : "initial";},
function (_ref7) {var theme = _ref7.theme;return theme.palette.frame.outerBorderColor;},


function (props) {return isRotateMode(props) ? "rotate(90deg)" : "none";},



function (props) {return isRotateMode(props) ? "-6px" : "55px";},
function (props) {return isRotateMode(props) ? "55px" : "initial";},
function (_ref8) {var theme = _ref8.theme;return theme.palette.frame.outerBorderColor;},


function (props) {return isRotateMode(props) ? "none" : "rotate(90deg)";},



function (props) {return isRotateMode(props) ? "-6px" : "90px";},
function (props) {return isRotateMode(props) ? "90px" : "initial";},
function (_ref9) {var theme = _ref9.theme;return theme.palette.frame.outerBorderColor;},


function (props) {return isRotateMode(props) ? "none" : "rotate(90deg)";},
















function (props) {return props.orientation === orientationType.landscape &&
  props.variant === deviceType.smartphone ?
  "42px" :
  "-18px";},
function (props) {return props.orientation === orientationType.landscape &&
  props.variant === deviceType.smartphone ? "calc(".concat(
  getProperWidth(props), "px - 5px)") :
  "55px";},
function (_ref10) {var theme = _ref10.theme;return theme.palette.frame.outerBorderColor;},
function (props) {return props.orientation === orientationType.landscape &&
  props.variant === deviceType.smartphone ?
  undefined :
  "rotate(90deg)";},





function (props) {return props.orientation === orientationType.landscape &&
  props.variant === deviceType.smartphone ?
  undefined :
  "-45px";},
function (props) {return props.orientation === orientationType.landscape &&
  props.variant === deviceType.smartphone ?
  "100px" :
  undefined;},
function (props) {return props.orientation === orientationType.landscape &&
  props.variant === deviceType.smartphone ?
  "-6px" :
  "150px";},
function (_ref11) {var theme = _ref11.theme;return theme.palette.frame.outerBorderColor;},
function (props) {return props.orientation === orientationType.landscape &&
  props.variant === deviceType.smartphone ?
  undefined :
  "rotate(90deg)";},





function (props) {return props.orientation === orientationType.landscape &&
  props.variant === deviceType.smartphone ?
  "96px" :
  "-30px";},
function (props) {return props.orientation === orientationType.landscape &&
  props.variant === deviceType.smartphone ? "calc(".concat(
  getProperWidth(props), "px - 5px)") :
  "114px";},
function (_ref12) {var theme = _ref12.theme;return theme.palette.frame.outerBorderColor;},
function (props) {return props.orientation === orientationType.landscape &&
  props.variant === deviceType.smartphone ?
  undefined :
  "rotate(90deg)";},





function (props) {return props.orientation === orientationType.landscape &&
  props.variant === deviceType.smartphone ?
  "176px" :
  "-30px";},
function (props) {return props.orientation === orientationType.landscape &&
  props.variant === deviceType.smartphone ? "calc(".concat(
  getProperWidth(props), "px - 5px)") :
  "184px";},
function (_ref13) {var theme = _ref13.theme;return theme.palette.frame.outerBorderColor;},
function (props) {return props.orientation === orientationType.landscape &&
  props.variant === deviceType.smartphone ?
  undefined :
  "rotate(90deg)";},








function (_ref14) {var orientation = _ref14.orientation,variant = _ref14.variant,theme = _ref14.theme;return variant === deviceType.smartphone &&
  orientation === orientationType.landscape ?
  "50%" :
  theme.sizes.frame[variant].topBangsPadding;},
function (_ref15) {var variant = _ref15.variant,orientation = _ref15.orientation;return variant === deviceType.smartphone &&
  orientation === orientationType.portrait ?
  "calc(50% - 20px)" :
  variant === deviceType.smartphone &&
  orientation === orientationType.landscape ?
  "-13px" :
  "50%";},


function (_ref16) {var variant = _ref16.variant,orientation = _ref16.orientation;return variant === deviceType.smartphone &&
  orientation === orientationType.landscape ?
  "translateY(-50%) rotate(-90deg)" :
  "";},

function (props) {
  if (isRotateMode(props)) {
    return "\n            top: 50%;\n            left: ".concat(

    props.theme.sizes.frame[props.variant].topBangsPadding, ";\n          ");

  }
},






function (props) {return props.theme.palette.frame.innerBorderColor;},




function (props) {return props.theme.palette.frame.innerBorderColor;},

function (props) {return props.theme.sizes.frame[props.variant].cameraSize;},
function (props) {return props.theme.sizes.frame[props.variant].cameraSize;},




function (props) {return getScreenBackgroundColor(props);},
function (props) {return props.theme.sizes.frame[props.variant].screenBorderRadius;},
function (props) {return getInnerBorderColor(props);},

function (props) {return props.theme.sizes.frame[props.variant].screenPadding;});


//# sourceMappingURL=index.js.map