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;
}


.propform {
    /* TODO: do we need this? */
    &:not(.popupmenu) {
        width: 100%;
    }

    /* This is the way we can have multiple checkboxes in a single form field */
    .form-check td:not(.title) > label {
        display: block;
        margin: 0;
        line-height: 2rem;

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

    td.datetime {
        display: flex;

        input:first-child {
            margin-right: .5rem;
        }
        input:last-child {
            width: 75%;
        }
    }

    td.rowbuttons {
        width: 1%;
        white-space: nowrap;

        span {
            display: none;
        }

        a {
            padding: 0;
            line-height: 2.3rem;
            height: 2.3rem;
            font-size: 1rem;

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

            &.delete:before {
                content: @fa-var-trash-o;
            }

            &.advanced:before {
                content: @fa-var-cog;
            }

            &:not(:last-child) {
                margin-right: .25rem;
            }
        }
    }

    td.rowactions {
        width: 1%;

        .form-control {
            width: auto;
        }
    }

    td.rowtargets {
        .input-group {
            margin-bottom: .25rem;

            *:first-child.input-group-addon {
                text-align: left;
                min-width: 7.5em;
            }
        }

        & > .advanced {
            margin-top: .25rem;
        }
    }

    td > .flexbox {
        display: flex;

        & > .multi-input {
            width: 100%;
            margin-left: .25rem;
        }
    }

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

@media screen and (max-width: 576px) {
    .propform {
        table.compact-table {
            overflow-x: initial;

            tbody {
                display: block;
            }

            .rowactions > select,
            .flexbox > select {
                width: 100%;
            }

            tr {
                display: flex;
                flex-direction: column;

                td {
                    width: 100%;
                    padding-right: 0;
                    padding-left: 0;

                    &.rowbuttons {
                        text-align: right;

                        a {
                            margin-right: .5rem;

                            & > span {
                                display: inline;
                            }
                        }
                    }
                }
            }
        }
    }
}


.propform,
.formcontent {
    legend {
        font-weight: bold;
        font-size: 1.2em;
    }
}


/* 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;
    }
}

html.layout-phone {
    .formcontainer {
        .formbuttons {
            display: none;
        }
    }
}

.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: 0;
        }

        label.col-form-label {
            padding-top: .375rem;
            padding-bottom: .375rem;
        }
    }

    .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: 0;
        }

        /* 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;
        }
    }

    .nav-tabs {
        margin-bottom: 1rem;
    }

    .hint {
        margin-bottom: 1em;
        font-style: italic;
    }
}

@media screen and (max-width: @screen-width-mini) {
    .formcontent {
        .col-form-label {
            flex: auto;
            max-width: 100%;
        }
        .col-10 {
            flex: auto;
            max-width: 100%;
        }
    }
}


/* 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;
    }
    &.search:before {
        content: @fa-var-search;
    }
    &.filter:before {
        content: @fa-var-filter;
    }

    .inner {
        display: none;
    }
}

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

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


ul.proplist {
    padding-left: 15px;
    margin-bottom: 0;
    list-style-type: none;

    li {
        line-height: 2.4rem;
        margin-bottom: .25rem;
        display: flex;

        input[type=radio] {
            vertical-align: middle;
            margin-right: .5em;

            & + .input-group {
                flex-grow: 1;
            }
        }

        label {
            margin: 0;
        }

        .icon-checkbox {
            height: 2.4rem !important;
            margin-left: -1.2em;

            & + label {
                height: 1.8rem;
                margin-right: .5rem;
            }
        }

        select {
            width: auto;
            display: inline;
        }
    }
}


.checklist {
    .form-check-input + label {
        margin-right: .25rem;
        line-height: 1;
    }
}


/*** Forms in popups ***/

.popup form.propform {
    padding: .5rem;
    overflow-x: hidden;
}

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

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

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

        label {
            margin: 0;
            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;
    }
}

html.touch .popupmenu.form {
    li {
        input.icon-checkbox + label:before {
            line-height: 1.4;
        }
    }
}


/*** Smart list (multiple input) field ***/

.multi-input {
    & > .content {
        max-height: 11.65em;
        overflow: hidden;
        overflow-y: auto;
        border-radius: .25rem;
        border: 1px solid @color-input-border;

        &.focused {
            border: 1px solid @color-input-border-focus;
        }

        /* TODO: style button focus */
    }

    .input-group {
        margin: 0 !important;
    }

    .input-group-addon {
        &.reset:before {
            &:extend(.font-icon-class);
            content: @fa-var-trash-o;
            margin: 0;
        }
    }

    .input-group-addon,
    .form-control {
        height: 2.25rem; /* to be the same height as select.form-control element */
    }

    input.form-control {
        padding-left: .5rem;
    }

    input,
    input:focus,
    .input-group-addon {
        border-radius: 0;
        border: 0;
        border-bottom: 1px solid @color-input-border;
    }

    .input-group:last-child * {
        border: 0;
    }

    & + .btn {
        margin-top: .5rem;
    }

    &.is-invalid {
        & > .content {
            border: 1px solid @color-input-border-invalid;
        }

        & > .invalid-feedback {
            display: inline-block;
        }
    }
}


/*** 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: flex;
    flex-wrap: wrap;
    padding: 0 .75rem .25rem .75rem;

    &.focus {
        border-color: @color-input-border-focus;
    }

    .recipient {
        flex: 1;
        display: flex;
        position: relative;
        max-width: 50%;
        border: 1px solid @color-recipient-input-border;
        background-color: @color-recipient-input-background;
        border-radius: .25em;
        padding: 0 .25em;
        margin-top: .25rem;
        margin-right: .2em;
        white-space: nowrap;

        @media screen and (max-width: 450px) {
            width: 100%;
            max-width: 100%;
        }
    }

    .name {
        flex-grow: 1;
        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;
        line-height: 1.5;

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

    input {
        flex-grow: 1;
        min-width: 25%;
        background: transparent !important;
        border: 0 !important;
        margin-top: .25rem;
        outline: 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;
            height: 2rem;
        }
    }

    &: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-top: .25rem;
    }
}

html.touch input.icon-checkbox + label {
    font-size: 1.5rem;
}


/*** 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;
    }
}

/* Remove outline on selects in Firefox */
@-moz-document url-prefix() {
    select:-moz-focusring {
       color: transparent !important;
       text-shadow: 0 0 0 @color-font !important;
    }
}

.form-control, .form-control:focus {
    color: @color-font;
}

.invalid-feedback {
    color: @color-error;
}

.form-control.is-invalid {
    border-color: @color-input-border-invalid;
}