+
-<div class="control-group warning">
+<div class="control-group has-warning">
<label class="control-label" for="inputWarning">Input with warning</label>
<div class="controls">
- <input type="text" id="inputWarning">
- <span class="help-inline">Something may have gone wrong</span>
+ <input type="text" class="input-with-feedback" id="inputWarning">
</div>
</div>
-<div class="control-group error">
+<div class="control-group has-error">
<label class="control-label" for="inputError">Input with error</label>
<div class="controls">
- <input type="text" id="inputError">
- <span class="help-inline">Please correct the error</span>
+ <input type="text" class="input-with-feedback" id="inputError">
</div>
</div>
-<div class="control-group success">
+<div class="control-group has-success">
<label class="control-label" for="inputSuccess">Input with success</label>
<div class="controls">
- <input type="text" id="inputSuccess">
- <span class="help-inline">Woohoo!</span>
+ <input type="text" class="input-with-feedback id="inputSuccess"">
</div>
</div>
diff --git a/less/forms.less b/less/forms.less
index 4abb7874a3..de814a915a 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -342,15 +342,15 @@ input[type="checkbox"] {
// --------------------------
// Warning
-.control-group.warning {
+.has-warning {
.formFieldState(@state-warning-text, @state-warning-text, @state-warning-background);
}
// Error
-.control-group.error {
+.has-error {
.formFieldState(@state-error-text, @state-error-text, @state-error-background);
}
// Success
-.control-group.success {
+.has-success {
.formFieldState(@state-success-text, @state-success-text, @state-success-background);
}
@@ -523,15 +523,23 @@ select:focus:invalid {
// Increase spacing between groups
.control-group {
- margin-bottom: @line-height-base / 2;
+ position: relative;
+ margin-bottom: @line-height-base;
.clearfix();
+
+ input,
+ select,
+ textarea,
+ .uneditable-input {
+ margin-bottom: 0;
+ }
}
// Float the labels left
.control-group > .control-label {
float: left;
width: @component-offset-horizontal - 20;
- padding-top: 5px;
+ padding-top: 6px;
text-align: right;
}
diff --git a/less/mixins.less b/less/mixins.less
index 243436b18c..1ab0a4eb23 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -122,25 +122,14 @@
// FORMS
// --------------------------------------------------
-// Mixin for form field states
.formFieldState(@text-color: #555, @border-color: #ccc, @background-color: #f5f5f5) {
- // Set the text color
- .control-label,
- .help-block,
- .help-inline {
+ // Color the label text
+ .control-label {
color: @text-color;
}
- // Style inputs accordingly
- .checkbox,
- .radio,
- input,
- select,
- textarea {
- color: @text-color;
- }
- input,
- select,
- textarea {
+ // Set the border and box shadow on specific inputs to match
+ .input-with-feedback {
+ 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
&:focus {
@@ -149,13 +138,6 @@
.box-shadow(@shadow);
}
}
- // Give a small background color for input-prepend/-append
- .input-prepend .add-on,
- .input-append .add-on {
- color: @text-color;
- background-color: @background-color;
- border-color: @text-color;
- }
}