@dnanpm/styleguide/build/cjs/components/MainNavigation/globalNavStyles.js

DNA Styleguide repository provides the set of components and theme object used in various DNA projects.

'use strict';

var styledComponents = require('styled-components');
var theme = require('../../themes/theme.js');

const MenuItem = styledComponents.styled.li `
    position: relative;
    padding: 0;
    margin: 0;
    height: 100%;
    color: ${theme.default.color.text.black};
    & > a {
        color: ${p => (p.isActive ? theme.default.color.text.pink : theme.default.color.text.black)};
    }
`;
const MenuLink = styledComponents.styled.a `
    border: none;
    margin: 0;
    padding: 0;
    width: 100%;
    overflow: visible;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: normal;
    -webkit-font-smoothing: inherit;
    -moz-osx-font-smoothing: inherit;
    -webkit-appearance: none;
    line-height: 1rem;
    display: block;
    text-decoration: none;
    text-align: left;
    color: ${p => (p.isActive ? theme.default.color.text.pink : theme.default.color.text.black)};
    padding: 0.5em 1em;
    white-space: normal;
    &:hover,
    &:focus {
        text-decoration: none;
        color: ${theme.default.color.text.pink};
        cursor: pointer;
        outline: none;
        border-bottom: none;
    }
`;
const MenuLinkWithChildren = styledComponents.styled.button `
    line-height: 1rem;
    text-align: left;
    display: block;
    text-decoration: none;
    border: none;
    background: none;
    outline: none;
    font-size: inherit;
    font-family: inherit;
    white-space: normal;
    color: ${p => p && (p.isActive || p.isHighlighted) ? theme.default.color.text.pink : theme.default.color.default.black};
    padding: 0.5em 1em;
    span {
        position: relative;
        &:first-child:after {
            position: absolute;
            content: '';
            width: 100%;
            bottom: -6px;
            left: 0;
            border-bottom: 1px solid
                ${p => (p.isHighlighted ? theme.default.color.default.pink : 'transparent')};
        }
    }
    &:hover,
    &:focus {
        text-decoration: none;
        color: ${theme.default.color.text.pink};
        cursor: pointer;
        outline: none;
    }
`;
const MenuList = styledComponents.styled.ul `
    display: inline-flex;
    max-height: ${p => (typeof p.isInView !== 'boolean' || p.isInView ? 'auto' : '5px')};
    overflow: ${p => (typeof p.isInView === 'boolean' ? 'hidden' : 'unset')};
    align-items: center;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: ${theme.default.color.default.white};
    transition: all 300ms ease-in-out;
`;

exports.MenuItem = MenuItem;
exports.MenuLink = MenuLink;
exports.MenuLinkWithChildren = MenuLinkWithChildren;
exports.MenuList = MenuList;