roundcubemail/skins/elastic/styles/widgets/searchbar.less

/**
 * Roundcube webmail styles for the Elastic skin
 *
 * Copyright (c) 2017, The Roundcube Dev Team
 *
 * The contents are subject to the Creative Commons Attribution-ShareAlike
 * License. It is allowed to copy, distribute, transmit and to adapt the work
 * by keeping credits to the original authors in the README.md file.
 * See http://creativecommons.org/licenses/by-sa/3.0/ for details.
 */

/*** Searchbar widget ***/

.searchbar {
    text-align: right;
    position: absolute;
    background-color: @color-layout-header-background;
    z-index: 10;
    top: 0;
    right: 0;

    form,
    a.button.reset,
    a.button.cancel,
    a.button.options {
        display: none;
        width: 1%;
    }

    form {
        width: 97%;
        text-align: left;
        padding-left: .25em;

        &:before {
            &:extend(.font-icon-class);
            content: @fa-var-search;
        }
    }

    input {
        width: 80%;
        border: none;
        border-bottom: 1px solid #ddd;
        border-radius: 0;
        background: transparent;
        line-height: 1.2;
        padding-left: .1em;
    }

    a {
        &.button.reset:before {
            content: @fa-var-trash;
        }
        &.button.options:before {
            content: @fa-var-angle-down;
        }
    }

    &.active a.button.search {
        color: @color-searchbar-icon-active;
    }
}

/*** Searchfilterbar widget ***/

.searchfilterbar {
    text-align: right;
    position: absolute;
    background-color: @color-layout-header-background;
    z-index: 10;
    top: 0;
    right: @layout-touch-icon-width;

    select,
    a.button.cancel {
        display: none;
        width: 1%;
    }

    select {
        width: 98%;
        padding-left: .25em;
    }

    &.active a.button.filter {
        color: @color-searchbar-icon-active;
    }
}

.searchbar,
.searchfilterbar {
    height: @layout-header-height;
    display: table !important;

    a.button {
        /* Reset toolbar style */
        min-width: auto;
        padding: 0 .5rem;

        &:before {
            line-height: @layout-header-height;
        }
    }
}