Refactored Form system to get simple error handling and a clearer
interface
This commit is contained in:
@@ -235,4 +235,162 @@ hr {
|
||||
border: 1px solid #e5e5e5;
|
||||
.border-radius;
|
||||
.box-shadow;
|
||||
}
|
||||
|
||||
// -- Allow inline forms validation states ------------------------------------
|
||||
|
||||
.form-inline .warning .control-label,
|
||||
.form-inline .warning .help-block,
|
||||
.form-inline .warning .help-inline {
|
||||
color: #c09853;
|
||||
}
|
||||
|
||||
.form-inline .warning .checkbox,
|
||||
.form-inline .warning .radio,
|
||||
.form-inline .warning input,
|
||||
.form-inline .warning select,
|
||||
.form-inline .warning textarea {
|
||||
color: #c09853;
|
||||
}
|
||||
|
||||
.form-inline .warning input,
|
||||
.form-inline .warning select,
|
||||
.form-inline .warning textarea {
|
||||
border-color: #c09853;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
.form-inline .warning input:focus,
|
||||
.form-inline .warning select:focus,
|
||||
.form-inline .warning textarea:focus {
|
||||
border-color: #a47e3c;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
|
||||
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
|
||||
}
|
||||
|
||||
.form-inline .warning .input-prepend .add-on,
|
||||
.form-inline .warning .input-append .add-on {
|
||||
color: #c09853;
|
||||
background-color: #fcf8e3;
|
||||
border-color: #c09853;
|
||||
}
|
||||
|
||||
.form-inline .error .control-label,
|
||||
.form-inline .error .help-block,
|
||||
.form-inline .error .help-inline {
|
||||
color: #b94a48;
|
||||
}
|
||||
|
||||
.form-inline .error .checkbox,
|
||||
.form-inline .error .radio,
|
||||
.form-inline .error input,
|
||||
.form-inline .error select,
|
||||
.form-inline .error textarea {
|
||||
color: #b94a48;
|
||||
}
|
||||
|
||||
.form-inline .error input,
|
||||
.form-inline .error select,
|
||||
.form-inline .error textarea {
|
||||
border-color: #b94a48;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
.form-inline .error input:focus,
|
||||
.form-inline .error select:focus,
|
||||
.form-inline .error textarea:focus {
|
||||
border-color: #953b39;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
|
||||
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
|
||||
}
|
||||
|
||||
.form-inline .error .input-prepend .add-on,
|
||||
.form-inline .error .input-append .add-on {
|
||||
color: #b94a48;
|
||||
background-color: #f2dede;
|
||||
border-color: #b94a48;
|
||||
}
|
||||
|
||||
.form-inline .success .control-label,
|
||||
.form-inline .success .help-block,
|
||||
.form-inline .success .help-inline {
|
||||
color: #468847;
|
||||
}
|
||||
|
||||
.form-inline .success .checkbox,
|
||||
.form-inline .success .radio,
|
||||
.form-inline .success input,
|
||||
.form-inline .success select,
|
||||
.form-inline .success textarea {
|
||||
color: #468847;
|
||||
}
|
||||
|
||||
.form-inline .success input,
|
||||
.form-inline .success select,
|
||||
.form-inline .success textarea {
|
||||
border-color: #468847;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
.form-inline .success input:focus,
|
||||
.form-inline .success select:focus,
|
||||
.form-inline .success textarea:focus {
|
||||
border-color: #356635;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
|
||||
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
|
||||
}
|
||||
|
||||
.form-inline .success .input-prepend .add-on,
|
||||
.form-inline .success .input-append .add-on {
|
||||
color: #468847;
|
||||
background-color: #dff0d8;
|
||||
border-color: #468847;
|
||||
}
|
||||
|
||||
.form-inline .info .control-label,
|
||||
.form-inline .info .help-block,
|
||||
.form-inline .info .help-inline {
|
||||
color: #3a87ad;
|
||||
}
|
||||
|
||||
.form-inline .info .checkbox,
|
||||
.form-inline .info .radio,
|
||||
.form-inline .info input,
|
||||
.form-inline .info select,
|
||||
.form-inline .info textarea {
|
||||
color: #3a87ad;
|
||||
}
|
||||
|
||||
.form-inline .info input,
|
||||
.form-inline .info select,
|
||||
.form-inline .info textarea {
|
||||
border-color: #3a87ad;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
.form-inline .info input:focus,
|
||||
.form-inline .info select:focus,
|
||||
.form-inline .info textarea:focus {
|
||||
border-color: #2d6987;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;
|
||||
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;
|
||||
}
|
||||
|
||||
.form-inline .info .input-prepend .add-on,
|
||||
.form-inline .info .input-append .add-on {
|
||||
color: #3a87ad;
|
||||
background-color: #d9edf7;
|
||||
border-color: #3a87ad;
|
||||
}
|
||||
Reference in New Issue
Block a user