1KA_F2F/resources/sass/admin/mobile/header.scss

.desktop_header{
    display: none;
}

.mobile_header{
    position: fixed;
    z-index: 9998;

    display: flex;
    align-items: center;

    width: 100vw;
    height: 70px;


    // Znotraj ankete
    &.survey_edit{
        color: white;
        background-color: $strong_blue;
    }

    // Seznam anket
    &.survey_list{
        color: $strong_blue;
        background-color: white;
    }


    .mobile_menu_icon{
        width: 50px;
        text-align: center;

        &.mobile_menu_close{
            display: none;

            span{
                font-size: 30px;
                font-weight: 600;
                line-height: 25px;
            }
        }

        span{
            cursor: pointer;
        }
    }

    .mobile_survey_title{
        width: calc(100% - 100px);

        text-align: center;
        font-size: 14px;
        font-weight: 500;
    }
    .mobile_logo{
        width: calc(100% - 100px);

        #enka_logo{
            margin: 0 auto;
        }
    }
}



/* Mobile meni */
.mobile_menu{
    position:fixed;
    z-index: 9999;

    display: flex;
    flex-direction: column;

    top: 70px;
    bottom: 0;
    width: 80vw;

    color: $main_text;

    background-color: #ffffff;

    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    pointer-events: none; 
    transform: translateX(-100%);
}

.mobile_menu:not(.no-transition),
.mobile_menu .submenu:not(.no-transition){
    transition:all 250ms;
}

.mobile_menu.opened{
    pointer-events:auto;
    transform:translateX(0px);
}

.mobile_menu.submenu-opened{
    overflow:hidden;
}

.mobile_menu .submenu{
    bottom:0;
    min-height:100%;
    overflow:hidden;
    -webkit-overflow-scrolling:touch;
    overflow-y:auto;
    pointer-events:none;
    position:fixed;
    top:0;
    width:100%;
}

.mobile_menu .submenu.opened{
    left:0;
    pointer-events:auto;
}

.mobile_menu .submenu.opened:not(.current){
    overflow:hidden;
}

.mobile_menu ul {
    list-style-type: none;
    padding: 0;
    padding-left: 0px;
    -webkit-overflow-scrolling: touch;
}
.mobile_menu ul > li {
    display: block;
}

.mobile_menu ul > li > a {
    color: inherit;
    display: block;
    font-size: 14px;
    font-weight: bold;
    padding: 18px 20px;
    text-decoration: none;
    transition: all 150ms;
}
.mobile_menu ul > li > a:hover {
    background-color: #efefef;
    border-radius: 3px;
}

.mobile_menu ul > li:not(:last-child) > a {
    border-bottom: 1px solid #efefef;
}

.mobile_menu ul > li.has-submenu > a {
    background-image: url("../images/submenu-arrow.svg");
    background-position: right 20px center;
    background-repeat: no-repeat;
    background-size: 8px 14px;
}

.mobile_menu ul > li.has-submenu > a:hover {
    background-image: url("../images/submenu-arrow-active.svg");
}

/* mobile_menujs submenu styles */
.mobile_menu .submenu {
    background-color: #ffffff;
    left: 295px;
}

.mobile_menu .submenu-header {
    background-image: url("../images/menu-back.svg");
    background-position: left 20px center;
    background-repeat: no-repeat;
    background-size: 8px 14px;
    border-bottom: solid 1px #efefef;
    cursor: pointer;
    position: relative;
}

.mobile_menu .submenu-header > a {
    color: inherit;
    display: block;
    font-size: 14px;
    font-weight: bold;
    padding: 18px 20px;
    padding-left: 40px;
    text-decoration: none;
}

.mobile_menu .submenu-header > a:before {
    background-image: url("../images/submenu-arrow.svg");
    background-position: right 20px center;
    background-repeat: no-repeat;
    background-size: 8px 14px;
    content: "";
    height: 100%;
    left: 26px;
    position: absolute;
    top: 0;
    transform: rotate(-180deg);
    width: 20px;
}

.mobile_menu .submenu > label {
    color: #e77691;
    display: block;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 8px;
    margin-top: 19px;
    opacity: .5;
    padding-left: 40px;
    width: 100%;
}