mdx-deck-theme-garlic/dist/layouts/Contour.js

garlic theme for mdx-deck

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

var _styled = _interopRequireDefault(require("@emotion/styled"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _theme = _interopRequireDefault(require("../theme"));

var _Contour = _interopRequireDefault(require("./Contour.css"));

var _utils = require("./utils");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  display: grid;\n  grid-template-columns: ", ";\n  grid-template-rows: 100vh;\n  align-items: center;\n  grid-areas: 'left right';\n  overflow: hidden;\n\n  .content {\n    /* height: 100%; */\n    padding: 0 4rem;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    text-align: left;\n  }\n\n  &.inverted {\n    grid-template-columns: ", ";\n    .textured {\n      grid-column: 2;\n      grid-row: 1;\n    }\n    .content {\n      grid-column: 1;\n      grid-row: 1;\n      align-items: flex-end;\n    }\n  }\n  &.framed {\n    display: flex;\n    width: 100%;\n    height: 100%;\n    .textured {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      justify-content: center;\n      .content {\n        flex: 1;\n        justify-content: center;\n        align-items: center;\n        background-color: ", ";\n        margin: 3.5rem;\n        padding: 4rem;\n      }\n    }\n  }\n\n  @media only screen and (max-width: 768px) {\n    grid-template-columns: 100vw;\n    grid-template-rows: ", ";\n    .content {\n      padding: 1rem 0.5rem;\n    }\n    &.inverted {\n      grid-template-columns: ", ";\n    }\n    &.inverted > .textured {\n      grid-row: 2;\n      grid-column: 1;\n    }\n    &.inverted > .content {\n      grid-row: 1;\n      grid-column: 1;\n      align-items: flex-end;\n    }\n  }\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var StyledLayout = (0, _styled["default"])(_Contour["default"])(_templateObject(), function (props) {
  return (0, _utils.generateViewWidth)(props.contentWidth);
}, function (props) {
  return (0, _utils.generateViewWidth)(props.contentWidth, true);
}, function (props) {
  return props.theme.colors.background;
}, function (props) {
  return (0, _utils.generateViewHeight)(props.contentWidth);
}, function (props) {
  return (0, _utils.generateViewHeight)(props.contentWidth, true);
});

var Contour = function Contour(props) {
  return _react["default"].createElement(StyledLayout, {
    className: props.framed ? 'framed' : props.invert ? 'inverted' : '',
    contentWidth: props.contentWidth,
    theme: _theme["default"]
  }, props.framed ? _react["default"].createElement("div", {
    className: "textured"
  }, _react["default"].createElement("div", {
    className: "content"
  }, props.children)) : _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement("div", {
    className: "textured"
  }), _react["default"].createElement("div", {
    className: "content"
  }, props.children)));
};

Contour.propTypes = {
  invert: _propTypes["default"].bool,
  framed: _propTypes["default"].bool,
  contentWidth: _propTypes["default"].number
};
Contour.defaultProps = {
  invert: false,
  framed: false,
  contentWidth: 80
};
var _default = Contour;
exports["default"] = _default;