Refactored Form system to get simple error handling and a clearer

interface
This commit is contained in:
franck
2013-07-16 16:34:47 +02:00
parent d250e0c660
commit e8bf47b929
26 changed files with 626 additions and 220 deletions

View File

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