odeum-app/lib/components/QuickNavigation/QuickNavigationStyles.js

ODEUM Code Web App foundation modules

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.Spacer = exports.QuickNavContainer = exports.QuickNavMenu = exports.QuickNavButtonHidden = exports.QuickNavButton = exports.QuickNav = exports.TabList = exports.TabItem = exports.MenuList = exports.MenuItem = exports.Link = exports.SubHeader = exports.Header = exports.RoundButton = undefined;

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

var _styledComponents2 = _interopRequireDefault(_styledComponents);

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

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

//#region Header button

var RoundButton = exports.RoundButton = _styledComponents2.default.div.withConfig({
    displayName: 'QuickNavigationStyles__RoundButton'
})(['background:none;color:', ';width:30px;height:30px;border-radius:30px;display:flex;justify-content:center;align-items:center;justify-self:flex-end;'], function (props) {
    return props.theme.quicknav.button.background;
});
var Header = exports.Header = _styledComponents2.default.div.withConfig({
    displayName: 'QuickNavigationStyles__Header'
})(['display:grid;grid-template-rows:auto;grid-auto-flow:column;justify-items:center;']);
var SubHeader = exports.SubHeader = _styledComponents2.default.div.withConfig({
    displayName: 'QuickNavigationStyles__SubHeader'
})(['display:flex;align-items:center;justify-self:flex-start;']);
//#endregion
var Link = exports.Link = (0, _styledComponents2.default)(_reactRouterDom.NavLink).withConfig({
    displayName: 'QuickNavigationStyles__Link'
})(['text-decoration:none;color:inherit;display:flex;flex-flow:column;align-items:center;justify-content:center;height:100%;width:100%;']);

//#region Menu Button & List

var MenuItem = exports.MenuItem = _styledComponents2.default.div.withConfig({
    displayName: 'QuickNavigationStyles__MenuItem'
})(['background:', ';color:', ';height:50px;display:flex;flex-flow:column;align-items:center;justify-content:center;border-radius:5px;min-width:100px;margin:0px 7px;padding:0px 7px;&:first-child{margin-left:1px;}&:hover{border:10px;border-color:rgba(59,151,211,0.3);box-shadow:0 0 0 3px rgba(59,151,211,0.3);}cursor:pointer;'], function (props) {
    return props.index === props.activeMenu ? props.theme.quicknav.menu.color : props.theme.quicknav.menu.unselected;
}, function (props) {
    return props.index === props.activeMenu ? props.theme.quicknav.menu.unselected : props.theme.quicknav.menu.color;
});
var MenuList = exports.MenuList = _styledComponents2.default.div.withConfig({
    displayName: 'QuickNavigationStyles__MenuList'
})(['display:grid;align-content:center;grid-auto-flow:column;grid-auto-columns:max-content;height:70px;max-height:70px;margin:0;padding:0;line-height:15px;align-items:center;overflow-x:auto;-webkit-overflow-scrolling:touch;width:90vw;']);

//#endregion

//#region Tab Text & List

var TabItem = exports.TabItem = (0, _styledComponents2.default)(_reactRouterDom.NavLink).withConfig({
    displayName: 'QuickNavigationStyles__TabItem'
})(['text-decoration:none;min-width:auto;padding:0px 15px;height:20px;color:', ';cursor:pointer;display:flex;align-items:center;justify-content:space-evenly;'], function (props) {
    return props.activetab === 'true' ? props.theme.quicknav.tab.selected : props.theme.quicknav.tab.unselected;
});

var TabList = exports.TabList = _styledComponents2.default.div.withConfig({
    displayName: 'QuickNavigationStyles__TabList'
})(['display:grid;grid-auto-columns:auto;align-content:center;grid-auto-flow:column;height:25px;max-height:50px;margin:0;padding:20px 0px;line-height:20px;-webkit-overflow-scrolling:touch;overflow-x:auto;width:90vw;white-space:nowrap;overflow-y:hidden;']);

//#endregion

//#region QuickNav Button, Overlay and Spacer

var QuickNav = exports.QuickNav = _styledComponents2.default.div.withConfig({
    displayName: 'QuickNavigationStyles__QuickNav'
})(['position:absolute;top:50%;left:50%;z-index:1;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;']);

var QuickNavButton = exports.QuickNavButton = _styledComponents2.default.div.withConfig({
    displayName: 'QuickNavigationStyles__QuickNavButton'
})(['background:', ';border:none;border-radius:15px;color:', ';padding:10px 15px;position:fixed;bottom:10%;align-self:center;cursor:pointer;&:hover{background:', ';}display:flex;align-items:center;justify-content:center;'], function (props) {
    return props.theme.quicknav.button.background;
}, function (props) {
    return props.theme.quicknav.button.color;
}, function (props) {
    return props.theme.tab.hover;
});
var QuickNavButtonHidden = exports.QuickNavButtonHidden = _styledComponents2.default.div.withConfig({
    displayName: 'QuickNavigationStyles__QuickNavButtonHidden'
})(['border:none;border-radius:15px;padding:30px 100vw;position:fixed;bottom:0%;align-self:center;cursor:pointer;&:hover{background:', ';}display:flex;align-items:center;justify-content:center;'], function (props) {
    return props.theme.tab.hover;
});
var QuickNavMenu = exports.QuickNavMenu = _styledComponents2.default.div.withConfig({
    displayName: 'QuickNavigationStyles__QuickNavMenu'
})(['display:grid;grid-template-columns:auto;grid-template-rows:50px 1px 50px 1px 70px;justify-content:flex-end;align-items:center;flex-flow:column wrap;background:white;height:', ';max-height:210px;border-radius:5px;border:1px solid #cbc8c8;padding:', ';transition:100ms all ease;'], function (p) {
    return p.SmallScreen ? '100%' : '0%';
}, function (p) {
    return p.SmallScreen ? '5px' : '0px';
});
var QuickNavContainer = exports.QuickNavContainer = _styledComponents2.default.div.withConfig({
    displayName: 'QuickNavigationStyles__QuickNavContainer'
})(['display:flex;align-items:center;justify-content:flex-end;flex-flow:column nowrap;color:black;width:100vw;height:', ';overflow:hidden;position:fixed;z-index:2;transition:height 200ms ease-in-out;bottom:0;'], function (props) {
    return props.SmallScreen && !props.helpOpen ? '100vh' : props.helpOpen && !props.SmallScreen ? '100vh' : '0px';
});

var Spacer = exports.Spacer = _styledComponents2.default.div.withConfig({
    displayName: 'QuickNavigationStyles__Spacer'
})(['width:90vw;min-height:1px;background:#cbc8c8;']);

//#endregion