gpw_next/GPW.CORE.SMART/Components/NavBottom.razor.less

:root {
    --dark: #333;
    --light: #fff;
    --neutral: #f6f6f6;
    --neutral-dark: #d1d1d1;
    --color: #5607d7;
    --color-light: #941ed2;
    --color-dark: #2719cd;
    --font-stack: 'Josefin Sans', 'Montserrat', 'sans-serif';
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('data:image/svg+xml,%3Csvg width="300" height="300" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z" fill="%239C92AC" fill-opacity="0.1" fill-rule="evenodd"/%3E%3C/svg%3E') fixed;
    font-family: var(--font-stack);

    &:before {
        content: '';
        width: 400px;
        height: 400px;
        background: linear-gradient(135deg, orange, orangered);
        border-radius: 50%;
        position: fixed;
        top: -50px;
        left: 10vw;
        z-index: -1;
    }

    &:after {
        content: '';
        width: 300px;
        height: 300px;
        background: linear-gradient(135deg, cyan, blue);
        border-radius: 50%;
        position: fixed;
        bottom: -50px;
        right: -5vw;
        z-index: -1;
    }
}



.menu__button {
    --x: -50%;
    --y: 0;
    --z: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(to right, #606c88, #3f4c6b);
    padding: .75rem 3rem;
    border-radius: 1.5rem 1.5rem 0 0;
    border: none;
    box-shadow: 0 2px 40px -10px #000;
    color: #fff;
    font-size: 16px;
    white-space: nowrap;
    position: fixed;
    bottom: 0rem;
    left: 50%;
    transform: translate3d(var(--x), var(--y), var(--z));
    cursor: pointer;
    z-index: 105;


    &[hidden] {
        --y: 200%;
    }

    div {
        display: flex;
        align-items: center;
        width: 12px;
        height: 12px;
        margin-right: 20px;

        div {
            display: table;
            height: 1px;
            background: var(--light);
            box-shadow: 0 4px 0 var(--light), 0 -4px 0 var(--light);
        }
    }
}

.menu__overlay {
    width: 100%;
    height: 100%;
    background: rgba(#000, .1);
    position: absolute;
    z-index: 100;
}
@keyframes menuSlide{
    0%{
        height: 0%;
    }
    100%{
        height: 100%;
    }
}
.menu__body {
    --x: 0;
    --y: 0;
    --z: 0;
    display: block;
    width: 100%;
    background-color: #fff;
    padding-bottom: 15px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: 0px -9px 50px -30px black;
    position: fixed;
    bottom: 0;
    z-index: 105;
    height: 0;
    transition: height 200ms ease-in-out 400ms, opacity 700ms;
    background: linear-gradient(to bottom, #606c88, #3f4c6b);
    
    

    &[hidden] {
        --y: 150%;
    }

    > *:not(:last-child) {
        border-bottom: 2px solid var(--neutral);
    }
}

.menu__header {
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;

    label {
        div {
            width: 15px;
            height: 15px;
            border: 2px solid var(--dark);
            border-radius: 50%;
            position: relative;
            transform: rotate(5.5rad);

            &:after {
                content: '';
                width: 2px;
                height: 10px;
                background: var(--dark);
                position: absolute;
                top: 100%;
                left: 50%;
                transform: translateX(-50%);
            }
        }
    }

    p {
        font-size: 18px;
        vertical-align: center;
        white-space: nowrap;
    }

    h3 {
        font-weight: normal;
    }

    button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 25px;
        height: 25px;
        background: var(--neutral-dark);
        border-radius: 50%;
        cursor: pointer;

        div {
            width: 15px;
            height: 3px;
            background: var(--light);
            position: relative;
            transform: rotate(5.5rad);

            &:before {
                content: '';
                width: 3px;
                height: 15px;
                background: var(--light);
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }
    }
}

.menu__links {
    display: flex;
    padding: 10px 15px;
    font-weight: bold;
    overflow-x: auto;

    a {
        flex: 1 1 1px;
        padding: 10px 8px;
        color: var(--dark);
        text-decoration: none;
        white-space: nowrap;
    }
}

.menu__contact {
    display: flex;
    padding: 8px;
    justify-content: center;

    svg {
        width: 100%;
        fill: var(--color);
    }

    a {
        flex: 1 1 30%;
        padding: 1.5rem;
        margin: 5px;
        border-radius: 8px;
        background: #d1d1d1;
        color: var(--color);
        text-align: center;
        font-size: 14px;
        font-weight: bold;
        text-decoration: none;
    }
}