[srvgit] / koha-tmpl / intranet-tmpl / prog / css / src / _header.scss

a.navbar-toggle {
    color: #fff;
}

#header {
    .navbar-nav > li > a {
        overflow: hidden;
        color: #FFFFFF;

        &:hover, &:active {
            border-bottom: 1px #FFFFFF;
        }
    }

    .dropdown-menu {
        background-color: rgb(53, 44, 46);
        font-size: 13px;

        li a {
            color: #FFFFFF;
            &:hover,
            &:focus {
                background: $background-color-primary none;
                text-decoration: none;
            }
        }
    }

}

#logo {
    display: flex;
    align-items: center;
    padding: .2em .5em;

    img {
        height: 80%;
    }
}

#toplevelmenu {
    background-color: transparent;
    box-shadow: none;
    position: relative;
    left: 0;
    top: 0;
}

#header_search {
    background-color: $background-color-primary;
    border-radius: 0;
    border: 1px solid $background-color-primary;
    display: flex;
    padding: 0 .8em;

    .residentsearch {
        padding: 0;
        border: 0;
        background-color: transparent;
        display: none;
        flex-basis: 50%;

        &:first-of-type {
            display: block;
        }
    }

    > ul {
        padding: 0;
        margin: 0;
        border-radius: 0 16px 16px 0;
        display: flex;
        align-items: center;
        color: white;
        background-color: $background-color-primary;
        z-index: 2;
        flex-grow: 1;

        li {
            background: transparent;
            border: 0;
            border-radius: 0;

            border: 0;
            border-bottom-width: 0;
            padding-bottom: 0;
            margin: 0;

            a {
                color: #FFF;
                padding: 0 .25em;
                margin: 0 .25em;
                border: 2px solid transparent;
            }
        }
    }
    .ui-state-hover, .ui-state-active {
        a {
            border-bottom: 2px solid #FFFFFF;
        }
    }

    form {
        display: flex;
        position: relative;
    }

    .form-title {
        padding: 0 16px 0 0;
        background-color: $background-color-primary;
        border-radius: 0 16px 16px 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        z-index: 2;
        white-space: nowrap;
        flex-basis: 15%;

        label {
            color: white;
            font-weight: bold;
            margin: 0;
            white-space: nowrap;
        }
    }

    .form-content {
        background-color: white;
        margin-left: -16px;
        padding-left: 16px;
        border-radius: 0 16px 16px 0;
        white-space: nowrap;
        z-index: 1;
        display: flex;
        flex-grow: 1;

        input[type="text"],
        select {
            background-color: transparent;
            border: 0;
            border-radius: 0;
            box-shadow: unset;
            margin: 0;

            &:not(:first-child) {
                border-left: 1px solid #e0e0e0;
            }
        }
    }

    .form-extra-content {
        right: 60px;
        position: absolute;
        top: 31px;
        background-color: #f3f4f4;
        background-color: white;
        padding: 1em;
        border-radius: 0 0 8px 8px;
        border: 1px solid $background-color-primary;
        border-top: 0 none;
        box-shadow: 0 2px 2px 1px #00000030;
        z-index: 1;
        display: none;

        a {
            color: $green-text-color;
        }

        div {
            margin-bottom: .5em;
        }

        .form-control {
            display: block;
            width: 100%;
        }

        label {
            display: block;
            margin-bottom: 0;
        }
    }

    .form-extra-content-toggle {
        opacity: .5;
        background-color: transparent;

        &:hover {
            opacity: 1;
        }
    }

    input[type="submit"], button[type="submit"] {
        height: 31px;
        background-color: $background-color-secondary;
        color: white;
        border: 0;
        text-shadow: unset;
        border-radius: 0 16px 16px 0;
        margin-left: -16px;
        padding-left: calc(16px + .5em);
    }

    input[type="button"], button {
        height: 31px;
        border: 0;
        text-shadow: unset;

        &:active {
            box-shadow: unset;
        }
    }
}

#logged-in-menu {
    &:hover, &:active, &:focus {
        text-decoration: none;
    }
}

#lastborrower-window {
    display: none;
    background-color: $background-color-primary;
    box-shadow: 1px 1px 1px 0 #999;
    color: #FFFFFF;
    padding: .2em;
    border-radius: 5px 5px 5px 5px;

    > * {
        padding: 0 .4em;
    }
}

#lastborrower-remove {
    cursor: pointer;
    border-left: 1px solid #fff;
}

#lastborrowerlink {
    color: #FFFFFF;
}

@media (max-width: 768px) {
    #header_search {
        .form-title {
            display: none;
        }
    }
}

@media (max-width: 992px) {
    #header_search {
        .residentsearch {
            flex-grow: 1;
        }

        .tab-title {
            display: none;
        }

        > ul {
            flex-grow: 0;
        }
    }
}