odeum-app/lib/components/Menu/MenuStyles.js

ODEUM Code Web App foundation modules

'use strict';

Object.defineProperty(exports, "__esModule", {
	value: true
});
exports.Link = exports.MenuContainer = exports.MenuText = exports.ArrowIconDiv = exports.IconDiv = exports.MenuFooter = exports.MenuHeader = exports.DefaultHeader = exports.BlueMenuContainer = undefined;

var _templateObject = _taggedTemplateLiteral(['\n\tdisplay: flex;\n\tflex-flow:column;\n\theight: auto;\n\talign-items: center;\n\tjustify-content: center;\n'], ['\n\tdisplay: flex;\n\tflex-flow:column;\n\theight: auto;\n\talign-items: center;\n\tjustify-content: center;\n']),
    _templateObject2 = _taggedTemplateLiteral(['\n\tdisplay: flex;\n\tflex-flow:column;\n\theight: auto;\n\talign-items: center;\n\tjustify-content: center;\n\tmargin-bottom: auto;\n'], ['\n\tdisplay: flex;\n\tflex-flow:column;\n\theight: auto;\n\talign-items: center;\n\tjustify-content: center;\n\tmargin-bottom: auto;\n']),
    _templateObject3 = _taggedTemplateLiteral(['\n\tdisplay: flex;\n\tflex-flow:column;\n\theight: auto;\n\tmargin-top:auto;\n'], ['\n\tdisplay: flex;\n\tflex-flow:column;\n\theight: auto;\n\tmargin-top:auto;\n']),
    _templateObject4 = _taggedTemplateLiteral(['\n\tdisplay: flex;\n\talign-self: right;\n\tjustify-content: center;\n'], ['\n\tdisplay: flex;\n\talign-self: right;\n\tjustify-content: center;\n']);

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

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _reactRouterDom = require('react-router-dom');

var _Functions = require('../utils/Functions');

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) } })); }

var BlueMenuContainer = exports.BlueMenuContainer = _styledComponents2.default.div.withConfig({
	displayName: 'MenuStyles__BlueMenuContainer'
})(['-ms-grid-column:', ';-ms-grid-row:', ';-ms-grid-column-span:', ';-ms-grid-row-span:', ';overflow:hidden;grid-area:menupanel;background-color:', ';display:flex;flex-flow:column wrap;max-width:', ';transition:max-width 300ms ease;'], function (p) {
	return (0, _Functions.rowColCalc)(p.theme.app.gridArea, 'menupanel', 'column');
}, function (p) {
	return (0, _Functions.rowColCalc)(p.theme.app.gridArea, 'menupanel', 'row');
}, function (p) {
	var x = (0, _Functions.spanCalc)(p.theme.app.gridArea, 'menupanel', 'column');return x > 1 ? x : 'none';
}, function (p) {
	var y = (0, _Functions.spanRowCalc)(p.theme.app.gridArea, 'menupanel');return y > 1 ? y : 'none';
}, function (props) {
	return props.theme.menu.background;
}, function (props) {
	return props.achordeon ? '250px;' : '50px';
});

var BaseItem = _styledComponents2.default.div.withConfig({
	displayName: 'MenuStyles__BaseItem'
})(['display:flex;align-items:center;border-bottom:', ';height:40px;width:100%;'], function (props) {
	return props.theme.menu.bottomBorder;
});

var DefaultHeader = exports.DefaultHeader = BaseItem.extend(_templateObject);

var MenuHeader = exports.MenuHeader = BaseItem.extend(_templateObject2);

var MenuFooter = exports.MenuFooter = BaseItem.extend(_templateObject3);

var IconDiv = exports.IconDiv = _styledComponents2.default.div.withConfig({
	displayName: 'MenuStyles__IconDiv'
})(['display:flex;width:50;height:50px;min-width:50px;align-items:center;justify-content:center;']);

var ArrowIconDiv = exports.ArrowIconDiv = IconDiv.extend(_templateObject4);

var MenuText = exports.MenuText = _styledComponents2.default.div.withConfig({
	displayName: 'MenuStyles__MenuText'
})(['font-size:', ';width:100%;'], function (p) {
	return p.theme.menu.fontSize ? p.theme.menu.fontSize : 'inherit';
});

var MenuContainer = exports.MenuContainer = _styledComponents2.default.div.withConfig({
	displayName: 'MenuStyles__MenuContainer'
})(['display:flex;flex-flow:', ';flex:1;overflow-y:hidden;'], function (props) {
	return props.quicknav ? 'column nowrap' : 'row nowrap';
});

var Link = exports.Link = (0, _styledComponents2.default)(_reactRouterDom.NavLink).withConfig({
	displayName: 'MenuStyles__Link'
})(['text-decoration:none;border-bottom:', ';border-top:', ';margin:-1px 0 0 -1px;text-decoration:none;outline:0;color:', ';width:250px;height:50px;font-weight:300;display:flex;align-items:center;justify-content:space-between;background:', ';&:hover{background:', ';color:', ';}-webkit-transition:all 100ms ease-in-out;-moz-transition:all 100ms ease-in-out;transition:all 100ms ease-in-out;'], function (props) {
	return props.theme.menu.border;
}, function (props) {
	return props.theme.menu.border;
}, function (props) {
	return props.theme.menu.color;
}, function (props) {
	return props.activemenu === 'true' ? props.theme.menu.selected : props.theme.menu.unselected;
}, function (props) {
	return props.theme.menu.hover;
}, function (p) {
	return p.theme.menu.textHover ? p.theme.menu.textHover : 'inherit';
});