add extra states to the form examples

diff --git a/bootstrap.css b/bootstrap.css
index 176c332e7b33a5884e5aaf12d20faad31d277399..06d70b791e9cdc386b1a7443e4502d0d8517d1d2 100644 (file)
--- a/bootstrap.css
+++ b/bootstrap.css
@@ -6,7 +6,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Sun Oct  9 20:57:28 PDT 2011
+ * Date: Sun Oct  9 22:02:13 PDT 2011
  */
 /* Reset.less
  * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here      that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
@@ -722,33 +722,93 @@ input[type=file]:focus, input[type=checkbox]:focus, select:focus {
   box-shadow: none;
   outline: 1px dotted #666;
 }
-form .clearfix.error {
-  background: #fae5e3;
+form .clearfix.error, form .clearfix.warning, form .clearfix.success {
   padding: 10px 0;
   margin: 10px 0;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
 }
-form .clearfix.error > label, form .clearfix.error span.help-inline, form .clearfix.error span.help-block {
-  color: #9d261d;
+form .clearfix.error > label,
+form .clearfix.warning > label,
+form .clearfix.success > label,
+form .clearfix.error .help-inline,
+form .clearfix.warning .help-inline,
+form .clearfix.success .help-inline,
+form .clearfix.error .help-block,
+form .clearfix.warning .help-block,
+form .clearfix.success .help-block {
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+}
+form .clearfix.error input,
+form .clearfix.warning input,
+form .clearfix.success input,
+form .clearfix.error textarea,
+form .clearfix.warning textarea,
+form .clearfix.success textarea {
+  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+}
+form .clearfix.error {
+  background-color: #fce6e6;
+}
+form .clearfix.error > label, form .clearfix.error .help-inline, form .clearfix.error .help-block {
+  color: #ce1a15;
 }
 form .clearfix.error input, form .clearfix.error textarea {
-  border-color: #c87872;
-  -webkit-box-shadow: 0 0 3px rgba(171, 41, 32, 0.25);
-  -moz-box-shadow: 0 0 3px rgba(171, 41, 32, 0.25);
-  box-shadow: 0 0 3px rgba(171, 41, 32, 0.25);
+  border-color: #ee5f5b;
 }
 form .clearfix.error input:focus, form .clearfix.error textarea:focus {
-  border-color: #b9554d;
-  -webkit-box-shadow: 0 0 6px rgba(171, 41, 32, 0.5);
-  -moz-box-shadow: 0 0 6px rgba(171, 41, 32, 0.5);
-  box-shadow: 0 0 6px rgba(171, 41, 32, 0.5);
-}
-form .clearfix.error .input-prepend span.add-on, form .clearfix.error .input-append span.add-on {
-  background: #f4c8c5;
-  border-color: #c87872;
-  color: #b9554d;
+  border-color: #ee5f5b;
+  -webkit-box-shadow: 0 0 6px #ee5f5b;
+  -moz-box-shadow: 0 0 6px #ee5f5b;
+  box-shadow: 0 0 6px #ee5f5b;
+}
+form .clearfix.error .input-prepend .add-on, form .clearfix.error .input-append .add-on {
+  background-color: #ffffff;
+  border-color: #ee5f5b;
+  color: #ee5f5b;
+}
+form .clearfix.warning {
+  background-color: #fdf5d9;
+}
+form .clearfix.warning > label, form .clearfix.warning .help-inline, form .clearfix.warning .help-block {
+  color: #b58c09;
+}
+form .clearfix.warning input, form .clearfix.warning textarea {
+  border-color: #f7d360;
+}
+form .clearfix.warning input:focus, form .clearfix.warning textarea:focus {
+  border-color: #e6b20b;
+  -webkit-box-shadow: 0 0 6px #f7d360;
+  -moz-box-shadow: 0 0 6px #f7d360;
+  box-shadow: 0 0 6px #f7d360;
+}
+form .clearfix.warning .input-prepend .add-on, form .clearfix.warning .input-append .add-on {
+  background-color: #ffffff;
+  border-color: #fceec1;
+  color: #fceec1;
+}
+form .clearfix.success {
+  background-color: #d1eed1;
+}
+form .clearfix.success > label, form .clearfix.success .help-inline, form .clearfix.success .help-block {
+  color: #348c34;
+}
+form .clearfix.success input, form .clearfix.success textarea {
+  border-color: #42b142;
+}
+form .clearfix.success input:focus, form .clearfix.success textarea:focus {
+  border-color: #348c34;
+  -webkit-box-shadow: 0 0 6px #62c462;
+  -moz-box-shadow: 0 0 6px #62c462;
+  box-shadow: 0 0 6px #62c462;
+}
+form .clearfix.success .input-prepend .add-on, form .clearfix.success .input-append .add-on {
+  background-color: #ffffff;
+  border-color: #62c462;
+  color: #62c462;
 }
 .input-mini,
 input.mini,

diff --git a/bootstrap.min.css b/bootstrap.min.css
index 23c532a7aae1f6020e7658ec6895ae40054f9ee2..0ca656ac9325f11fd28dc48d8bccd780a582bed1 100644 (file)
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -126,9 +126,17 @@ textarea{height:auto;}
 input,textarea{-webkit-transition:border linear 0.2s,box-shadow linear 0.2s;-moz-transition:border linear 0.2s,box-shadow linear 0.2s;-ms-transition:border linear 0.2s,box-shadow linear 0.2s;-o-transition:border linear 0.2s,box-shadow linear 0.2s;transition:border linear 0.2s,box-shadow linear 0.2s;-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);}
 input:focus,textarea:focus{outline:0;border-color:rgba(82, 168, 236, 0.8);-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);}
 input[type=file]:focus,input[type=checkbox]:focus,select:focus{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;outline:1px dotted #666;}
-form .clearfix.error{background:#fae5e3;padding:10px 0;margin:10px 0;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}form .clearfix.error>label,form .clearfix.error span.help-inline,form .clearfix.error span.help-block{color:#9d261d;}
-form .clearfix.error input,form .clearfix.error textarea{border-color:#c87872;-webkit-box-shadow:0 0 3px rgba(171, 41, 32, 0.25);-moz-box-shadow:0 0 3px rgba(171, 41, 32, 0.25);box-shadow:0 0 3px rgba(171, 41, 32, 0.25);}form .clearfix.error input:focus,form .clearfix.error textarea:focus{border-color:#b9554d;-webkit-box-shadow:0 0 6px rgba(171, 41, 32, 0.5);-moz-box-shadow:0 0 6px rgba(171, 41, 32, 0.5);box-shadow:0 0 6px rgba(171, 41, 32, 0.5);}
-form .clearfix.error .input-prepend span.add-on,form .clearfix.error .input-append span.add-on{background:#f4c8c5;border-color:#c87872;color:#b9554d;}
+form .clearfix.error,form .clearfix.warning,form .clearfix.success{padding:10px 0;margin:10px 0;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}form .clearfix.error>label,form .clearfix.warning>label,form .clearfix.success>label,form .clearfix.error .help-inline,form .clearfix.warning .help-inline,form .clearfix.success .help-inline,form .clearfix.error .help-block,form .clearfix.warning .help-block,form .clearfix.success .help-block{text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}
+form .clearfix.error input,form .clearfix.warning input,form .clearfix.success input,form .clearfix.error textarea,form .clearfix.warning textarea,form .clearfix.success textarea{-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}
+form .clearfix.error{background-color:#fce6e6;}form .clearfix.error>label,form .clearfix.error .help-inline,form .clearfix.error .help-block{color:#ce1a15;}
+form .clearfix.error input,form .clearfix.error textarea{border-color:#ee5f5b;}form .clearfix.error input:focus,form .clearfix.error textarea:focus{border-color:#ee5f5b;-webkit-box-shadow:0 0 6px #ee5f5b;-moz-box-shadow:0 0 6px #ee5f5b;box-shadow:0 0 6px #ee5f5b;}
+form .clearfix.error .input-prepend .add-on,form .clearfix.error .input-append .add-on{background-color:#ffffff;border-color:#ee5f5b;color:#ee5f5b;}
+form .clearfix.warning{background-color:#fdf5d9;}form .clearfix.warning>label,form .clearfix.warning .help-inline,form .clearfix.warning .help-block{color:#b58c09;}
+form .clearfix.warning input,form .clearfix.warning textarea{border-color:#f7d360;}form .clearfix.warning input:focus,form .clearfix.warning textarea:focus{border-color:#e6b20b;-webkit-box-shadow:0 0 6px #f7d360;-moz-box-shadow:0 0 6px #f7d360;box-shadow:0 0 6px #f7d360;}
+form .clearfix.warning .input-prepend .add-on,form .clearfix.warning .input-append .add-on{background-color:#ffffff;border-color:#fceec1;color:#fceec1;}
+form .clearfix.success{background-color:#d1eed1;}form .clearfix.success>label,form .clearfix.success .help-inline,form .clearfix.success .help-block{color:#348c34;}
+form .clearfix.success input,form .clearfix.success textarea{border-color:#42b142;}form .clearfix.success input:focus,form .clearfix.success textarea:focus{border-color:#348c34;-webkit-box-shadow:0 0 6px #62c462;-moz-box-shadow:0 0 6px #62c462;box-shadow:0 0 6px #62c462;}
+form .clearfix.success .input-prepend .add-on,form .clearfix.success .input-append .add-on{background-color:#ffffff;border-color:#62c462;color:#62c462;}
 .input-mini,input.mini,textarea.mini,select.mini{width:60px;}
 .input-small,input.small,textarea.small,select.small{width:90px;}
 .input-medium,input.medium,textarea.medium,select.medium{width:150px;}

diff --git a/docs/index.html b/docs/index.html
index ea80e965cbc0167c6bc084cd32197331ef81b717..81c4ea97f43065ba0f64c7ab433cb3abe8686c5e 100644 (file)
--- a/docs/index.html
+++ b/docs/index.html
@@ -1103,19 +1103,33 @@
             </div>
           </div><!-- /clearfix -->
           <div class="clearfix error">
-            <label for="xlInput2">Input with error</label>
+            <label for="errorInput">Input with error</label>
             <div class="input">
-              <input class="xlarge error" id="xlInput2" name="xlInput2" size="30" type="text" />
+              <input class="xlarge error" id="errorInput" name="errorInput" size="30" type="text" />
               <span class="help-inline">Small snippet of help text</span>
             </div>
           </div><!-- /clearfix -->
           <div class="clearfix error">
-            <label for="xlInput2">Input with error</label>
+            <label for="errorInput2">Input with error</label>
             <div class="input">
-              <input class="xlarge error" id="xlInput2" name="xlInput2" size="30" type="text" />
+              <input class="xlarge error" id="errorInput2" name="errorInput2" size="30" type="text" />
               <span class="help-inline">Small snippet of help text</span>
             </div>
           </div><!-- /clearfix -->
+          <div class="clearfix success">
+            <label for="successInput">Input with success</label>
+            <div class="input">
+              <input class="xlarge error" id="successInput" name="successInput" size="30" type="text" />
+              <span class="help-inline">Success!</span>
+            </div>
+          </div><!-- /clearfix -->
+          <div class="clearfix warning">
+            <label for="warningInput">Input with warning</label>
+            <div class="input">
+              <input class="xlarge error" id="warningInput" name="warningInput" size="30" type="text" />
+              <span class="help-inline">Ruh roh!</span>
+            </div>
+          </div><!-- /clearfix -->
         </fieldset>
         <fieldset>
           <legend>Example form legend</legend>

diff --git a/lib/forms.less b/lib/forms.less
index ec459c908a46838b6181767faa2a1ae5a7f26452..052d885f53703dac9be8387750f42d9f4576c62a 100644 (file)
--- a/lib/forms.less
+++ b/lib/forms.less
@@ -164,37 +164,108 @@ select:focus {
   outline: 1px dotted #666; // Selet elements don't get box-shadow styles, so instead we do outline
 }
 
-// Error styles
-form .clearfix.error {
-  background: lighten(@red, 57%);
+
+// FORM FIELD FEEDBACK STATES
+// --------------------------
+
+// Common styles
+form .clearfix.error,
+form .clearfix.warning,
+form .clearfix.success {
   padding: 10px 0;
   margin: 10px 0;
   .border-radius(4px);
-  @error-text: desaturate(lighten(@red, 25%), 25%);
+  // Make text a little nicer
+  > label,
+  .help-inline,
+  .help-block {
+    text-shadow: 0 1px 0 rgba(255,255,255,.5);
+  }
+  // Make inputs look a bit sunken
+  input,
+  textarea {
+    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.5);
+       -moz-box-shadow: 0 1px 0 rgba(255,255,255,.5);
+            box-shadow: 0 1px 0 rgba(255,255,255,.5);
+  }
+}
+
+// Error
+@formErrorColor: #ee5f5b;
+form .clearfix.error {
+  background-color: lighten(@formErrorColor, 30%);
   > label,
-  span.help-inline,
-  span.help-block {
-    color: @red;
+  .help-inline,
+  .help-block {
+    color: darken(@formErrorColor, 20%);
   }
   input,
   textarea {
-    border-color: @error-text;
-    .box-shadow(0 0 3px rgba(171,41,32,.25));
+    border-color: @formErrorColor;
     &:focus {
-      border-color: darken(@error-text, 10%);
-      .box-shadow(0 0 6px rgba(171,41,32,.5));
+      border-color: @formErrorColor;
+      .box-shadow(0 0 6px @formErrorColor);
     }
   }
-  .input-prepend,
-  .input-append {
-    span.add-on {
-      background: lighten(@red, 50%);
-      border-color: @error-text;
-      color: darken(@error-text, 10%);
+  .input-prepend .add-on,
+  .input-append .add-on {
+    background-color: lighten(@formErrorColor, 50%);
+    border-color: @formErrorColor;
+    color: @formErrorColor;
+  }
+}
+
+// Warning
+@formWarningColor: #fceec1;
+form .clearfix.warning {
+  background-color: lighten(@formWarningColor, 5%);
+  > label,
+  .help-inline,
+  .help-block {
+    color: darken(@formWarningColor, 50%);
+  }
+  input,
+  textarea {
+    border-color: darken(@formWarningColor, 20%);
+    &:focus {
+      border-color: darken(@formWarningColor, 40%);
+      .box-shadow(0 0 6px darken(@formWarningColor, 20%));
     }
   }
+  .input-prepend .add-on,
+  .input-append .add-on {
+    background-color: lighten(@formWarningColor, 50%);
+    border-color: @formWarningColor;
+    color: @formWarningColor;
+  }
 }
 
+// Success
+@formSuccessColor: #62c462;
+form .clearfix.success {
+  background-color: lighten(@formSuccessColor, 30%);
+  > label,
+  .help-inline,
+  .help-block {
+    color: darken(@formSuccessColor, 20%);
+  }
+  input,
+  textarea {
+    border-color: darken(@formSuccessColor, 10%);
+    &:focus {
+      border-color: darken(@formSuccessColor, 20%);
+      .box-shadow(0 0 6px @formSuccessColor);
+    }
+  }
+  .input-prepend .add-on,
+  .input-append .add-on {
+    background-color: lighten(@formSuccessColor, 50%);
+    border-color: @formSuccessColor;
+    color: @formSuccessColor;
+  }
+}
+
+
 // Form element sizes
 // TODO v2: remove duplication here and just stick to .input-[size] in light of adding .spanN sizes
 .input-mini,