mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-09-01 01:21:49 +02:00
Code Issues Releases Wiki Activity

Update form validation states

Browse Source 
* Once again no longer applies to single inputs (this is a bit simpler,
but I'm open to new ideas) but the entire set of inputs, labels, and
help text within a particular element. However, the styles are not too
dependent on markup or layout, so they're super flexible.
* Simplified the markup in the validation docs examples to match latest
changes.
* Renamed `.form-state-validation` mixin to `.form-control-validation`
to match naming of prev commit.
This commit is contained in:
Mark Otto
2013-07-25 19:45:14 -07:00
parent 71d3d2c3f6
commit 27cedf71d5
5 changed files with 32 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
less/forms.less
View File

@@ -264,15 +264,15 @@ select {
// Warning
.has-warning {
.form-field-validation(@state-warning-text, @state-warning-text, @state-warning-bg);
.form-control-validation(@state-warning-text, @state-warning-text, @state-warning-bg);
}
// Error
.has-error {
.form-field-validation(@state-danger-text, @state-danger-text, @state-danger-bg);
.form-control-validation(@state-danger-text, @state-danger-text, @state-danger-bg);
}
// Success
.has-success {
.form-field-validation(@state-success-text, @state-success-text, @state-success-bg);
.form-control-validation(@state-success-text, @state-success-text, @state-success-bg);
}

14
less/mixins.less
View File

@@ -508,18 +508,20 @@
}
}
// Framework mixins
// --------------------------------------------------
// Generate form validation states
.form-field-validation(@text-color: #555, @border-color: #ccc, @background-color: #f5f5f5) {
// Color the label text
// Form validation states
//
// Used in forms.less to generate the form validation CSS for warnings, errors,
// and successes.
.form-control-validation(@text-color: #555, @border-color: #ccc, @background-color: #f5f5f5) {
// Color the label and help text
.help-block,
.control-label {
color: @text-color;
}
// Set the border and box shadow on specific inputs to match
.input-with-feedback {
.form-control {
padding-right: 32px; // to account for the feedback icon
border-color: @border-color;
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work