humhub/static/less/form.less

//
// Forms
// --------------------------------------------------
.radio,
.checkbox {
    margin-top: 5px !important;
    margin-bottom: 0;
}

div.required > label:after {
    content: " *";
    color: @info;
}

div.required.has-error > label:after {
    content: " *";
    color: @danger;
}

.radio label,
.checkbox label {
    padding-left: 10px;
}

.form-control {
    border: 2px solid @background-color-page;
    box-shadow: none;
    min-height: 35px;

    &:focus {
        border: 2px solid @info;
        outline: 0;
        box-shadow: none;
    }
}

.form-control.form-search {
    border-radius: 30px;
    padding-left: 34px;
}

.form-group-search {
    position: relative;

    &:before {
        font: 14px FontAwesome;
        content: "\f002";
        color: #ededed;
        position: absolute;
        top: 10px;
        left: 13px;
    }

    .form-button-search {
        position: absolute;
        top: 4px;
        right: 4px;
        border-radius: 30px;
    }
}

textarea {
    resize: none;
    height: 1.5em;
}

select.form-control:not([multiple]) {
    appearance: none;
    background-image: url("../img/select_arrow.png") !important;
    background-repeat: no-repeat;
    background-position: right 16px;
    overflow: hidden;
}

label {
    font-weight: normal;
}

div.PendingRegistrations {
    thead > tr > th > label, tbody > tr > td > label {
        margin-bottom: 0;
        height: 17px;
    }
}

label.control-label {
    font-weight: bold;
}

// Placeholder text

::placeholder {
    color: @text-color-soft3 !important;
}

/* hide native password reveal icons */
input::-ms-clear, input::-ms-reveal {
    display: none;
}

// Placeholder text for empty content
.placeholder {
    padding: 10px;
}

// HTML5 Placeholder jQuery Plugin
input.placeholder,
textarea.placeholder {
    padding: 0 0 0 10px;
    color: #999;
}

.help-block-error {
    font-size: 12px;
}

.help-block:not(.help-block-error) {
    color: @text-color-soft;
    font-size: 13px;
}
.panel-body > .help-block {
    padding-right: 20px;
    margin-bottom: 20px;
}

.hint-block {
    color: @text-color-soft2 !important;
    font-size: 12px;
}

.hint-block:hover {
    color: @text-color-secondary !important;
    font-size: 12px;
}

.input-group-addon {
    border: none;
}

a.input-field-addon {
    font-size: 12px;
    float: right;
    margin-top: -10px;
}

a.input-field-addon-sm {
    font-size: 11px;
    float: right;
    margin-top: -10px;
}

.timeZoneInputContainer {
    padding-top: 10px;
}

.timeZoneInputContainer ~ .help-block {
    margin: 0;
}

// Flatelements
.radio input[type=radio],
.radio-inline input[type=radio],
.checkbox input[type=checkbox],
.checkbox-inline input[type=checkbox] {
    position: relative;
    margin-left: 0;
}

input[type=checkbox], input[type=radio] {
    -webkit-appearance: none;
    position: relative;
    display: inline-block;
    width: auto;
    height: auto;
    min-height: auto;
    padding: 7px;
    margin: -4px 2px 0 0;
    vertical-align: middle;
    background: white;
    border: 2px solid #ccc;
    border-radius: 3px;

    &:disabled {
        background: @background3 !important;
        border: 2px solid @background3 !important;
        cursor: not-allowed;
    }
}

input[type=checkbox] {
    &:focus {
        border: 2px solid @text-color-highlight !important;
        outline: none;
    }

    &:checked {
        border: 2px solid @info;
        background: @info;
        color: white;

        &::after {
            content: '\2714';
            font-size: 14px;
            position: absolute;
            top: -3px;
            left: 1px;
            color: white;
        }
    }
}

input[type=radio] {
    border-radius: 50%;

    &:checked {
        border: 2px solid @background3;
        color: #99a1a7;

        &::after {
            content: ' ';
            width: 8px;
            height: 8px;
            border-radius: 50%;
            position: absolute;
            top: 3px;
            background: @info;
            text-shadow: none;
            left: 3px;
            font-size: 32px;
        }
    }
}

div.form-group {
    div.checkbox {
        .help-block {
            margin-left: 33px;
        }

        // avoid spacing between checkbox and hint
        .help-block.help-block-error:empty {
            display: none;
        }
    }
}


//
// Errror handling
//
.errorMessage {
    color: @danger;
    padding: 10px 0;
}

// Errror handling
.error {
    border-color: @danger !important;
}

.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline {
    color: @danger !important;
}

.has-error .form-control,
.has-error .form-control:focus {
    border-color: @danger;
    box-shadow: none;
}

.has-success .help-block,
.has-success .control-label,
.has-success .radio,
.has-success .checkbox,
.has-success .radio-inline,
.has-success .checkbox-inline {
    color: @success;
}

.has-success .form-control,
.has-success .form-control:focus {
    border-color: @success;
    box-shadow: none;
}

.has-warning .help-block,
.has-warning .control-label,
.has-warning .radio,
.has-warning .checkbox,
.has-warning .radio-inline,
.has-warning .checkbox-inline {
    color: @warning;
}

.has-warning .form-control,
.has-warning .form-control:focus {
    border-color: @warning;
    box-shadow: none;
}

.bootstrap-timepicker-widget .form-control {
    padding: 0;
}

.form-collapsible-fields {
    margin-bottom: 12px;
    border-left: 3px solid @primary;
    background-color: #F4F4F4;
}

.form-collapsible-fields-label {
    margin-bottom: 0;
    padding: 12px;

    label {
        margin-bottom: 0;
    }
}

.form-collapsible-fields fieldset {
    padding-top: 15px;
    padding-left: 12px;
    padding-right: 12px;
}

.form-collapsible-fields.opened {
    fieldset {
        display: block;
    }

    .iconClose {
        display: inline;
    }

    .iconOpen {
        display: none;
    }
}

.form-collapsible-fields.closed {
    fieldset, .iconClose {
        display: none;
    }

    .iconOpen {
        display: inline;
    }
}

// editor
.content_create,
.content_edit {
    .content-create-input-group {
        display: flex;
        align-items: flex-end;
        flex-direction: column;

        > .form-group {
            flex-grow: 1;
            width: 100%;

            [data-ui-markdown] {
                word-break: break-word !important;

                pre code {
                    display: block;
                    width: 0;
                }
            }
        }

        .form-group, .help-block {
            margin: 0;
        }
    }

    // fileupload button
    .upload-buttons {
        white-space: nowrap;
        padding-top: 6px;

        .btn:not(.dropdown-toggle) {
            margin-left: 6px;
        }

        .btn.fileinput-button, .fileinput-button + .dropdown-toggle {
            background: @default;
            color: @text-color-default !important;

            &:hover, &:focus {
                background: #dedede !important;
                border-color: #dedede;
            }
            &:active, &.active {
                background: #cacaca !important;
                border-color: #cacaca;
            }
        }

        .btn.dropdown-toggle {
            margin-left: 0;
        }
    }

    .has-error + .upload-buttons {
        padding-bottom: 22px;
    }

    .fileinput-button:active {
        box-shadow: none !important;
    }
}