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;
    background-image: url("../img/icon_search16x16.png");
    background-repeat: no-repeat;
    background-position: 10px 8px;
    padding-left: 34px;
}

.form-group-search {
    position: relative;

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

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

select.form-control:not([multiple]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    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;
}

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

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

/* firefox 19+ */
:-ms-input-placeholder {
    color: @text-color-soft3 !important;
}

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


/* ie */
input:-moz-placeholder {
    color: @text-color-soft !important;
}

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

.hint-block, .help-block:not(.help-block-error) {
    color: @text-color-soft2 !important;
    font-size: 12px;
}

.hint-block:hover, .help-block:not(.help-block-error):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: 0px;
}

// 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;
    -webkit-box-shadow: none;
    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;
    -webkit-box-shadow: none;
    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;
    -webkit-box-shadow: none;
    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: 0px;
    padding: 12px;
}

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