2024-10-10
This commit is contained in:
271
web/bsadmin/assets/less/forms.less
Normal file
271
web/bsadmin/assets/less/forms.less
Normal file
@@ -0,0 +1,271 @@
|
||||
@import "variable.less"; // Variable.less
|
||||
|
||||
/* Input Style
|
||||
------------------------*/
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
height: 42px;
|
||||
border-radius: 0px;
|
||||
box-shadow: none;
|
||||
border-color: @border;
|
||||
font-family: @mol;
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
border-color: @border;
|
||||
}
|
||||
&:focus,
|
||||
&.active {
|
||||
box-shadow: none;
|
||||
border-color: @default;
|
||||
}
|
||||
}
|
||||
|
||||
.input-default {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.input-flat {
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
.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: 0px;
|
||||
border-radius: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.active {
|
||||
background: none;
|
||||
border-color: @border;
|
||||
color: @black;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Input States
|
||||
-----------------------*/
|
||||
|
||||
.has-default,
|
||||
.has-success,
|
||||
.has-warning,
|
||||
.has-error {
|
||||
.form-control {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.active {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.has-default {
|
||||
.control-label {
|
||||
color: @default;
|
||||
}
|
||||
.form-control {
|
||||
border-color: @default;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.active {
|
||||
border-color: @default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.has-success {
|
||||
.control-label {
|
||||
color: @success;
|
||||
}
|
||||
.form-control {
|
||||
border-color: @success;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.active {
|
||||
border-color: @success;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.has-warning {
|
||||
.control-label {
|
||||
color: @warning;
|
||||
}
|
||||
.form-control {
|
||||
border-color: @warning;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.active {
|
||||
border-color: @warning;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.has-error {
|
||||
.control-label {
|
||||
color: @danger;
|
||||
}
|
||||
.form-control {
|
||||
border-color: @danger;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.active {
|
||||
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: 0px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user