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