roundcubemail/skins/elastic/styles/widgets/forms.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.
 */

/*** Common form elements ***/

#uploadform {
    display: none;
}

form.smart-upload,
input.smart-upload {
    visibility: hidden;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* TODO: review when decided what css framework to use */
.propform:not(.popupmenu) {
    width: 100%;
}

/* Forms fixes for IE and Edge */
html.ms .propform {
    .row:not(.form-check) > td {
        display: flex;
    }
    @media screen and (min-width: 576px) {
        .row.form-check > td {
            display: flex;
        }
    }
    @media screen and (max-width: 575px) {
        .row {
            display: block;
        }
    }
}


.formcontainer {
    display: flex;
    flex-direction: column;
    justify-content:flex-start;
    overflow-y: hidden !important;
    height: 100%;

    .formcontent {
        overflow-x: hidden;
        overflow-y: auto;
    }

    .formbuttons {
        padding: 0.5rem 1rem;
    }
}


.formcontent {
    padding: 1em;

    .row {
        margin-right: 0; /* without these the form is too wide causing horizontal scrollbar appearence */
        margin-left: 0;

        .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9,
        .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9 {
            /* overwrite Bootstrap's redundant padding */
            padding-right: 0;
            padding-left: 0;
        }
    }

    .row.form-check {
        padding-right: 0; /* without these e.g. inputs in compose screen are not aligned properly */
        display: flex; /* https://github.com/twbs/bootstrap/issues/22348 */
        flex-wrap: nowrap;

        /* fixed checkbox vertical alignment */
        td:not(.col-form-label) {
            padding-top: ~"calc(.5rem - 1px * 2)";
            padding-bottom: ~"calc(.5rem - 1px * 2)";
        }

        /* alignment fixes needed because we do not stick precissely to Bootstrap's form structure */
        @media screen and (max-width: 576px) {
            .col-6 {
                max-width: 100%;
                flex: auto;
            }

            & > *:last-child {
                width: 1%;
                min-width: 2.2em; /* for icon-checkbox */
                padding-right: 15px;
            }
        }

        .form-check-input {
            margin: 0; /* fixes checkbox alignment with other inputs in a form */
            margin-top: .5rem;
            margin-bottom: .5rem;
        }
    }

    td.form-control-plaintext {
        padding-top: ~"calc(1rem - 1px * 2)";
        padding-bottom: ~"calc(1rem - 1px * 2)";
    }
}


/* Some common icons for "iconized inputs" */
.input-group-addon.icon {
    text-decoration: none;

    &:before {
        &:extend(.font-icon-class);
        margin: 0;
        line-height: 1;
    }
    &.user:before {
        content: @fa-var-user;
    }
    &.pass:before {
        content: @fa-var-lock;
    }
    &.host:before {
        content: @fa-var-home;
    }
    &.cancel:before {
        content: @fa-var-close;
    }
    &.edit:before {
        content: @fa-var-pencil;
    }
    &.add:before {
        content: @fa-var-plus;
    }

    .inner {
        display: none;
    }
}

td.editfield { width: 99%;  /* TODO */ }

.form-group { margin-bottom: .5rem; /* overwrites Bootstrap style */ }


/*** Forms in popups ***/

.popupmenu.form {
    &.nolist {
        padding: 0 .5rem;
    }

    ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

    li:not(.separator) {
        padding: 0 1rem;

        label {
            margin: 0;
            line-height: @listing-line-height;

            input {
                margin-right: .5rem;
            }
        }
    }

    input {
        vertical-align: middle;
        height: @listing-line-height !important;
    }

    select {
        margin: .5rem 0;
    }

    .buttons {
        text-align: center;
        padding: .5rem;
    }
}

/*** Files upload widget with list of files, upload form and drop area ***/

.file-upload {
    /* TODO */

    padding: 1em 1em 12em;
    margin: 1em;
    background-color: #f4f4f4;

    .upload-form {
        text-align: center;
        padding-bottom: 1em;
    }

   .hint {
        margin-bottom: .5rem;
    }

    .attachmentslist {
        list-style: none;

        li {
            display: block;
            padding-bottom: .5em;
        }
    }

    &.droptarget {
        &.hover {
        }
        &.active {
        }
    }
}


/*** Smart recipient input field ***/

.recipient-input {
    display: block !important; /* overwrites Bootstrap */
    min-height: 2.4em;
    overflow: hidden;
/*    padding: .2em .5em; */

    .recipient {
        border: 1px solid @color-recipient-input-border;
        background-color: @color-recipient-input-background;
        border-radius: .25em;
        padding: 0 .25em;
        margin-right: .2em;
        display: inline-block;
        white-space: nowrap;
    }

    .name {
        max-width: 25em;
        display: inline-block;
        line-height: 1.1;
        padding: .25em;
        vertical-align: middle;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .email {
        text-indent: -5000rem;
        display: inline-block;
        width: 0;
    }

    .quotes {
        position: absolute;
        width: 0;
        opacity: 0;
    }

    a.button.icon {
        font-size: .8em;
        cursor: pointer;

        &:before {
            float: none;
            display: inline-block;
            width: 1em;
            margin: 0;
        }
    }
}

/*** Skin selection widget ***/

.skinselection {
    white-space: nowrap;
    display: table-row;

    & > span {
        display: table-cell;
        vertical-align: middle;
        padding: .1em .5em;
        white-space: normal;

        &:last-child {
            padding-right: 0;
        }
    }

    .skinitem input {
        width: auto;
    }

    .skinname {
        font-weight: bold;
    }

    .skinlicense,
    .skinlicense a {
        font-style: italic;
        text-decoration: none;
    }

    .skinlicense a:hover {
        text-decoration: underline;
    }

    .skinthumbnail {
        width: 64px;
        height: 64px;
        border: 1px solid @color-input-border;
        background: #fff;
        border-radius: 4px;
    }
}

/*** Image upload widget ***/

.image-upload {
    position: relative;
    overflow: hidden;
    cursor: pointer;

    a.button {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        background-color: rgba(255, 255, 255, .85);
        border-radius: 5px;
        width: 2.5em;
        padding: .5em;
        margin: .5em;
    }

    &.changed a.button {
        display: inline;
    }
}


/*** Pretty icon checkbox ***/

input.icon-checkbox {
    opacity: 0;
    margin-left: -1.5em;

    & + label {
        margin: 0;
        display: inline;
        font-size: 1.2rem;

        &:before {
            &:extend(.font-icon-class);
            content: @fa-var-toggle-off;
            margin: 0;
            color: @color-checkbox;
        }
    }

    &:disabled + label {
        opacity: 0.4;
        pointer-events: none;
    }

    &:checked + label:before {
        content: @fa-var-toggle-on;
        color: @color-checkbox-checked;
    }

    &:focus + label:before {
        color: @color-checkbox-focus;
    }

    &:checked:focus + label:before {
        color: @color-checkbox-checked-focus;
    }

    &.form-check-input + label {
        font-size: 1.25rem;
        padding: .4em 0;
    }
}

html.touch input.icon-checkbox + label {
    font-size: 1.6em;
}

.formcontent input.icon-checkbox + label {
    line-height: 1.2;
}


/*** HTML editor widget (and TinyMCE editor) ***/

.mce-tinymce {
    &.mce-container.mce-panel {
        border-radius: .25rem;
        border-color: @color-input-border;
        overflow: hidden;
    }

    .mce-btn,
    .mce-panel {
        background-color: @color-input-addon-background;
    }
}

.html-editor {
    position: relative;
    display: flex;

    & > .nav {
        border-color: transparent;
        z-index: 1;
        position: absolute;
        top: 1px;
        right: 1rem;

        a.active {
            border-color: @color-input-border !important;

            &.mode-html {
                background-color: @color-input-addon-background;
                border-bottom-color: @color-input-addon-background !important;
            }

            &.mode-plain {
                border-bottom-color: #fff !important;
            }
        }

        a:hover {
            border-bottom-color: transparent;
        }
    }

    & > .googie_edit_layer,
    & > .mce-tinymce,
    & > textarea {
        margin-top: 2.55rem;
        font-family: monospace;
        width: 100% !important;
    }
}


/*** GoogieSpell widget ***/

.googie_window {
    width: 16rem;
}

.googie_edit_layer {
    font-family: monospace;

    /* from Bootstrap's textarea */
    padding: .5rem .75rem;
    border: 1px solid @color-input-border;
    border-radius: .3rem;
    line-height: 1.25;
}

.googie_link {
    color: @color-spellcheck-link;
    text-decoration: underline;
    cursor: pointer;
}

.googie_list {
    td {
        min-width: 8rem;
        width: auto;

        &.googie_list_onhover {
            color: @color-toolbarmenu-hover;
            background-color: @color-toolbarmenu-hover-background;
        }

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

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

    input {
        display: inline-block;
        margin: .5rem .5rem .5rem 0 !important;
        padding: .5rem .75rem !important;
    }
}