odeum-app/lib/theme/media.js

ODEUM Code Web App foundation modules

'use strict';

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

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

var ScreenSizes = exports.ScreenSizes = {
	giant: 1170,
	desktop: 992,
	tablet: 768,
	phone: 376

	// iterate through the sizes and create a media template
};var media = Object.keys(ScreenSizes).reduce(function (accumulator, label) {
	// use em in breakpoints to work properly cross-browser and support users
	// changing their browsers font-size: https://zellwk.com/blog/media-query-units/
	var emSize = ScreenSizes[label] / 16;
	accumulator[label] = function () {
		return (0, _styledComponents.css)(['@media (max-width:', 'em){', '}'], emSize, _styledComponents.css.apply(undefined, arguments));
	};
	return accumulator;
}, {});

exports.default = media;