Tiny File Manager | forms.less

Back Back Up Advanced Editor

@import "variable.less"; // Variable.less
/*    Input Style
------------------------*/
.form-group {
    margin-bottom: 20px;
}

.form-control {
    height: 42px;
    border-radius: 0;
    box-shadow: none;
    border-color: @border;
    font-family: @mol;

&:hover {
        box-shadow: none;
        border-color: @border;
    }

&.active,
    &:focus {
        box-shadow: none;
        border-color: @default;
    }
}

.input-default {
    border-radius: 4px;
}

.input-flat {
    border-radius: 0;
}

.input-rounded {
    border-radius: 100px;
}

.input-focus {
    border-color: @primary;

&:focus {
        border-color: @primary;
    }
}
/*    Search Box Input Button
--------------------------------*/
.input-group-btn {
    .btn {
        padding: 10px 12px;
    }
}

.input-group-default {
    .form-control {
        border-radius: 4px;
    }
}

.input-group-flat {
    .form-control {
        border-radius: 4px;
    }

.btn {
        border-radius: 0;
        border-radius: 0;
    }
}

.input-group-rounded {
    .form-control {
        border-radius: 100px;
    }

.btn-group-left {
        border-top-left-radius: 100px;
        border-bottom-left-radius: 100px;
    }

.btn-group-right {
        border-top-right-radius: 100px;
        border-bottom-right-radius: 100px;
    }
}

.input-group-close-icon {
    background: none;
    color: @black;
    border-color: @border;
    //    border-left: 1px solid @white;
    &.active,
    &:focus,
    &:hover {
        background: none;
        border-color: @border;
        color: @black;
    }
}
/*    Input States
-----------------------*/
.has-default,
.has-error,
.has-success,
.has-warning {
    .form-control {
        &.active,
        &:focus,
        &:hover {
            box-shadow: none;
        }
    }
}

.has-default {
    .control-label {
        color: @default;
    }

.form-control {
        border-color: @default;

&.active,
        &:focus,
        &:hover {
            border-color: @default;
        }
    }
}

.has-success {
    .control-label {
        color: @success;
    }

.form-control {
        border-color: @success;

&.active,
        &:focus,
        &:hover {
            border-color: @success;
        }
    }
}

.has-warning {
    .control-label {
        color: @warning;
    }

.form-control {
        border-color: @warning;

&.active,
        &:focus,
        &:hover {
            border-color: @warning;
        }
    }
}

.has-error {
    .control-label {
        color: @danger;
    }

.form-control {
        border-color: @danger;

&.active,
        &:focus,
        &:hover {
            border-color: @danger;
        }
    }
}

.has-feedback label ~ .form-control-feedback {
    top: 35px;
}

.form-horizontal .has-feedback .form-control-feedback {
    top: 5px;
}

.has-success {
    .form-control-feedback {
        color: @success;
    }
}

.has-warning {
    .form-control-feedback {
        color: @warning;
    }
}

.has-error {
    .form-control-feedback {
        color: @danger;
    }
}

.has-success .input-group-addon {
    background-color: lighten(@success, 25%);
    border-color: @success;
    color: @success;
}

.has-warning .input-group-addon {
    background-color: lighten(@warning, 25%);
    border-color: @warning;
    color: @warning;
}

.has-error .input-group-addon {
    background-color: lighten(@danger, 25%);
    border-color: @danger;
    color: @danger;
}
/*    Input Size
--------------------*/

.input-sm {
    //  border-radius: 3px;
    font-size: 12px;
    height: 30px;
    line-height: 1.5; //  padding: 5px 10px;
}

.input-lg {
    //  border-radius: 6px;
    font-size: 18px;
    height: 46px;
    line-height: 1.33333; //  padding: 10px 16px;
}
/*    Basic form
----------------------*/
label {
    font-weight: 400;
    margin-bottom: 10px;
}
/*    Form Horizontal
----------------------*/
.form-horizontal {
    .control-label {
        padding-top: 12px;
    }
}

.form-horizontal {
    .form-group {
        margin-left: 0;
        margin-right: 0;
    }
}

.dropdown-menu li {
    font-size: 14px;
    padding: 5px 15px;
}