roundcubemail/skins/elastic/styles/widgets/dialogs.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 autors in the README file.
 * See http://creativecommons.org/licenses/by-sa/3.0/ for details.
 */

/*** Dialogs and popovers ***/

.popupmenu {
    display: none;
    padding: 0;
    min-width: 180px;

    li > a {
        width: 100%;
    }
}

div.popover-body {
    padding: 0;
    overflow-x: hidden;

    & > .popupmenu {
        display: block !important;
    }
}

/* On mobile don't display popup arrows and titles */
.popover > h3 {
    display: none;
}

body.layout-mode-phone .popover {
    margin: 0 !important;
    left: initial !important;
    right: 0;
    bottom: 0;
    width: 276px;
    transform: none !important;
    border-radius: 0;
    border: 0; /* TODO */
    display: flex;
    flex-direction: column;

    div.arrow {
        display: none;
    }

    & > h3 {
        display: block;
        border-radius: 0;
        padding: 0 .5em;
        height: 2.5rem; /* TODO: layout var */
        line-height: 2.5rem; /* TODO: layout var */
        color: #888; /* TODO: color */
    }

    .popover-body > * {
        max-height: 100% !important;
    }

    .toolbarmenu.listing,
    .popupmenu.toolbar.listing {
        li a {
            line-height: 2.5rem; /* TODO: layout var */
            font-size: 1rem;
            padding: 0 .5em;

            &:before {
                float: left; /* overwrite icon float to have unified element height */
            }
        }

        li:last-child {
            border-bottom: 1px solid #f4f4f4; /* TODO: color */
        }
    }

    .folderlist li {
        padding-left: .5em;
    }
}

body.layout-mode-phone .popover-overlay {
    z-index: 1000;
    opacity: .5;
    background-color: @color-dialog-overlay-background;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}

.pgpkeyimport {
    /* TODO */
}