@dnanpm/styleguide/build/cjs/components/MainHeaderNavigation/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');
var navigation = require('../../themes/themeComponents/navigation.js');
var common = require('../../utils/common.js');
var styledUtils = require('../../utils/styledUtils.js');

const LogoLink = styledComponents.styled.a `
    height: ${navigation.navMaxHeight};
    flex: 0 0 auto;
`;
const DesktopMenuContainer = styledComponents.styled.nav `
    display: none;
    flex-direction: column;
    position: absolute;
    @media (min-width: ${p => p.$collapseSize + 1}px) {
        position: initial;
        width: auto;
        max-width: unset;
        height: ${navigation.navMaxHeight};
        display: flex;
        flex-direction: row;
        overflow: initial;
    }
`;
const MobileMenuButton = styledComponents.styled.button `
    font-family: inherit;
    border: 0;
    padding: 0;
    background: transparent;
    &:focus,
    &:active {
        svg {
            fill: ${theme.default.color.text.pink};
        }
    }
    &:focus-visible {
        outline: 0;
        border-radius: ${theme.default.radius.s};
        box-shadow:
            0px 0px 0px 2px ${theme.default.color.focus.light},
            0px 0px 0px 4px ${theme.default.color.focus.dark};
        color: ${theme.default.color.text.black};
    }
    svg {
        fill: ${theme.default.color.text.black};
    }
`;
const HeaderIconContainer = styledComponents.styled.div `
    display: flex;
    height: ${navigation.navMaxHeight};
    flex: 0 0 auto;
    gap: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
    margin: 0 ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.5)} 0 auto;
    button {
        &:focus {
            outline: none;
        }
    }
    > div:last-child {
        @media (min-width: ${p => p.$collapseSize + 1}px) {
            display: none;
        }
    }
    @media (min-width: ${p => p.$collapseSize + 1}px) {
        gap: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
    }
`;
const MenuItem = styledComponents.styled.li `
    display: ${p => (p.$isFeaturedItem ? 'grid' : 'flex')};
    align-items: center;
    grid-template-columns: ${p => (p.$isFeaturedItem ? '1fr 1fr' : '1fr')};
    & > a {
        padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.5)}
            ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 3)};
    }
    > button,
    > a {
        color: ${p => (p.$isActive ? theme.default.color.text.pink : theme.default.color.text.black)};
        justify-content: ${p => (p.$isFeaturedItem ? 'flex-start' : 'space-between')};
        font-size: ${theme.default.fontSize.s};
        &:focus-visible {
            outline: 0;
            border-radius: ${theme.default.radius.s};
            box-shadow:
                0px 0px 0px 2px ${theme.default.color.focus.light},
                0px 0px 0px 4px ${theme.default.color.focus.dark};
        }
        ${styledUtils.media.xl `
            font-size: ${theme.default.fontSize.default};
        `}
    }
`;
const MenuLink = styledComponents.styled.a `
    overflow: visible;
    text-decoration: none;
    color: ${p => (p.$isActive ? theme.default.color.text.pink : theme.default.color.text.black)};
    > svg {
            fill: ${theme.default.color.text.pink};
            height: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2)};
            width: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
        }
    }
`;
const MenuLinkWithChildren = styledComponents.styled.a `
    line-height: ${theme.default.lineHeight.xs};
    display: block;
    font-family: inherit;
    white-space: normal;
    color: ${p => (p.$isOpen ? theme.default.color.text.pink : theme.default.color.default.black)};
    > svg {
            transform: rotate( ${p => (p.$isOpen ? '270deg' : '90deg')});
            transition: transform .2s ease-in-out;
        }
    }

`;
const MenuList = styledComponents.styled.ul `
    display: flex;
    flex-direction: row;
    gap: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1.5)};
    max-height: ${p => (typeof p.$isInView !== 'boolean' || p.$isInView ? 'auto' : '5px')};
    margin: 0;
    padding: 0;
    background-color: ${theme.default.color.background.white};
    transition: all 300ms ease-in-out;

    ul {
        li {
            a {
                display: flex;
                align-items: center;
            }
        }
    }
    > li {
        > a,
        > button {
            white-space: nowrap;
            text-decoration: none;
        }
    }
`;
const FeaturedBlock = styledComponents.styled.li `
    background-color: ${theme.default.color.background.sand.E01};
    padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1)};
    list-style: none;
    grid-column: 4;
    grid-row: 1/4;

    @media (min-width: ${p => p.$collapseSize + 1}px) {
        ${common.default({ elevation: 'high' })};
        border-radius: 0
        border-width: 0 0 0 1px;
        background: ${theme.default.color.background.sand.default};
        padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2)}
            ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)}
            ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2)}
            ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 3)};
    }
    section {
        display: grid;
        grid-template-columns: 1fr 1fr;
        @media (min-width: ${p => p.$collapseSize + 1}px) {
            display: flex;
            flex-direction: column;
            gap: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1.5)};
            align-items: stretch;
            justify-content: flex-start;
        }
    }
    a {
        font-weight: ${theme.default.fontWeight.bold};
        gap: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1)};
        &:hover,
        &:focus {
            color: inherit;
        }
    }
`;

exports.DesktopMenuContainer = DesktopMenuContainer;
exports.FeaturedBlock = FeaturedBlock;
exports.HeaderIconContainer = HeaderIconContainer;
exports.LogoLink = LogoLink;
exports.MenuItem = MenuItem;
exports.MenuLink = MenuLink;
exports.MenuLinkWithChildren = MenuLinkWithChildren;
exports.MenuList = MenuList;
exports.MobileMenuButton = MobileMenuButton;