humhub/static/less/form.less

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

.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 13px;
    overflow: hidden;
}

label {
    font-weight: normal;
}

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

// Placeholder text
::-webkit-input-placeholder {
    color: @text-color-soft !important;
}

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

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

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

//
// Labels
// --------------------------------------------------
.label {
    text-transform: uppercase;
}

.label {
    text-transform: uppercase;
    display: inline-block;
    padding: 3px 5px 4px;
    font-weight: 600;
    font-size: 10px !important;
    color: white !important;
    vertical-align: baseline;
    white-space: nowrap;
    text-shadow: none;
}

.label-default {
    background: @background-color-page;
    color: @text-color-secondary !important;
}

a.label-default:hover {
    background: darken(@background-color-page, 5%) !important;
}

.label-info {
    background-color: @info;
}

a.label-info:hover {
    background: darken(@info, 5%) !important;
}

.label-danger {
    background-color: @danger;
}

a.label-danger:hover {
    background: darken(@danger, 5%) !important;
}

.label-success {
    background-color: @success;
}

a.label-success:hover {
    background: darken(@success, 5%) !important;
}

.label-warning {
    background-color: @warning;
}

a.label-warning:hover {
    background: darken(@warning, 5%) !important;
}

// Flatelements
.regular-checkbox:checked + .regular-checkbox-box {
    border: 2px solid @info;
    background: @info;
    color: white;
}

.regular-checkbox-box.disabled {
    background: @background3 !important;
    border: 2px solid @background3 !important;
    cursor: not-allowed;
}

.regular-radio:checked + .regular-radio-button:after {
    background: @info;
}

.regular-radio:checked + .regular-radio-button {
    background-color: transparent;
    color: #99a1a7;
    border: 2px solid @background3;
    margin-right: 5px;
}

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

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