backpack-ui/dist/components/container/index.js

Lonely Planet's Components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _templateObject = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  max-width: ", "px;\n  margin-left: auto;\n  margin-right: auto;\n  position: relative;\n\n  &:after {\n    content: \" \";\n    display: block;\n    clear: both;\n  }\n\n  @media (max-width: ", ") {\n    padding-left: ", "px;\n    padding-right: ", "px;\n  }\n\n  @media (min-width: ", ") {\n    margin-left: ", "px;\n    margin-right: ", "px;\n  }\n\n  @media (min-width: ", ") {\n    margin-left: ", "px;\n    margin-right: ", "px;\n  }\n\n  @media(min-width: ", ") {\n    margin-left: auto;\n    margin-right: auto;\n  }\n"], ["\n  box-sizing: border-box;\n  max-width: ", "px;\n  margin-left: auto;\n  margin-right: auto;\n  position: relative;\n\n  &:after {\n    content: \" \";\n    display: block;\n    clear: both;\n  }\n\n  @media (max-width: ", ") {\n    padding-left: ", "px;\n    padding-right: ", "px;\n  }\n\n  @media (min-width: ", ") {\n    margin-left: ", "px;\n    margin-right: ", "px;\n  }\n\n  @media (min-width: ", ") {\n    margin-left: ", "px;\n    margin-right: ", "px;\n  }\n\n  @media(min-width: ", ") {\n    margin-left: auto;\n    margin-right: auto;\n  }\n"]);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _styledComponents = require("styled-components");

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _settings = require("../../../settings.json");

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

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); } /* eslint-disable no-unused-vars */


// @TODO: Replace grid settings with unitless values in settings.json
var containerWidth = 1290;
var gutterWidth = 30;
var maxWidth = containerWidth + gutterWidth * 4;
var mediaQuery = maxWidth * 0.0625 + "em";

var Container = _styledComponents2.default.div(_templateObject, containerWidth, _settings.media.max[480], gutterWidth / 2, gutterWidth / 2, _settings.media.min[480], gutterWidth, gutterWidth, _settings.media.min[1080], gutterWidth * 2, gutterWidth * 2, mediaQuery);

exports.default = Container;