new form state styles with lighter footprint

diff --git a/bootstrap.css b/bootstrap.css
index 06d70b791e9cdc386b1a7443e4502d0d8517d1d2..02fc90ec21cc339a0b765ea8d7ef9576e2e1a4d1 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 22:02:13 PDT 2011
+ * Date: Sun Oct  9 22:31:28 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,93 +722,59 @@ input[type=file]:focus, input[type=checkbox]:focus, select:focus {
   box-shadow: none;
   outline: 1px dotted #666;
 }
-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 > label, form .clearfix.error .help-block, form .clearfix.error .help-inline {
+  color: #ee5f5b;
 }
 form .clearfix.error input, form .clearfix.error textarea {
+  color: #ee5f5b;
   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;
+  border-color: #e9322d;
+  -webkit-box-shadow: 0 0 6px #f8b9b7;
+  -moz-box-shadow: 0 0 6px #f8b9b7;
+  box-shadow: 0 0 6px #f8b9b7;
 }
 form .clearfix.error .input-prepend .add-on, form .clearfix.error .input-append .add-on {
-  background-color: #ffffff;
-  border-color: #ee5f5b;
   color: #ee5f5b;
+  background-color: #fce6e6;
+  border-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 > label, form .clearfix.warning .help-block, form .clearfix.warning .help-inline {
+  color: #ccae64;
 }
 form .clearfix.warning input, form .clearfix.warning textarea {
-  border-color: #f7d360;
+  color: #ccae64;
+  border-color: #ccae64;
 }
 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;
+  border-color: #be9a3f;
+  -webkit-box-shadow: 0 0 6px #e5d6b1;
+  -moz-box-shadow: 0 0 6px #e5d6b1;
+  box-shadow: 0 0 6px #e5d6b1;
 }
 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;
+  color: #ccae64;
+  background-color: #d2b877;
+  border-color: #ccae64;
 }
-form .clearfix.success > label, form .clearfix.success .help-inline, form .clearfix.success .help-block {
-  color: #348c34;
+form .clearfix.success > label, form .clearfix.success .help-block, form .clearfix.success .help-inline {
+  color: #57a957;
 }
 form .clearfix.success input, form .clearfix.success textarea {
-  border-color: #42b142;
+  color: #57a957;
+  border-color: #57a957;
 }
 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;
+  border-color: #458845;
+  -webkit-box-shadow: 0 0 6px #9acc9a;
+  -moz-box-shadow: 0 0 6px #9acc9a;
+  box-shadow: 0 0 6px #9acc9a;
 }
 form .clearfix.success .input-prepend .add-on, form .clearfix.success .input-append .add-on {
-  background-color: #ffffff;
-  border-color: #62c462;
-  color: #62c462;
+  color: #57a957;
+  background-color: #bcddbc;
+  border-color: #57a957;
 }
 .input-mini,
 input.mini,
@@ -943,7 +909,7 @@ textarea[readonly] {
   text-decoration: underline;
 }
 .help-inline, .help-block {
-  font-size: 11px;
+  font-size: 13px;
   line-height: 18px;
   color: #bfbfbf;
 }

diff --git a/bootstrap.min.css b/bootstrap.min.css
index 0ca656ac9325f11fd28dc48d8bccd780a582bed1..824021f70058bef80ab138a57f1ab370bedfbd13 100644 (file)
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -126,17 +126,15 @@ 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,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;}
+form .clearfix.error>label,form .clearfix.error .help-block,form .clearfix.error .help-inline{color:#ee5f5b;}
+form .clearfix.error input,form .clearfix.error textarea{color:#ee5f5b;border-color:#ee5f5b;}form .clearfix.error input:focus,form .clearfix.error textarea:focus{border-color:#e9322d;-webkit-box-shadow:0 0 6px #f8b9b7;-moz-box-shadow:0 0 6px #f8b9b7;box-shadow:0 0 6px #f8b9b7;}
+form .clearfix.error .input-prepend .add-on,form .clearfix.error .input-append .add-on{color:#ee5f5b;background-color:#fce6e6;border-color:#ee5f5b;}
+form .clearfix.warning>label,form .clearfix.warning .help-block,form .clearfix.warning .help-inline{color:#ccae64;}
+form .clearfix.warning input,form .clearfix.warning textarea{color:#ccae64;border-color:#ccae64;}form .clearfix.warning input:focus,form .clearfix.warning textarea:focus{border-color:#be9a3f;-webkit-box-shadow:0 0 6px #e5d6b1;-moz-box-shadow:0 0 6px #e5d6b1;box-shadow:0 0 6px #e5d6b1;}
+form .clearfix.warning .input-prepend .add-on,form .clearfix.warning .input-append .add-on{color:#ccae64;background-color:#d2b877;border-color:#ccae64;}
+form .clearfix.success>label,form .clearfix.success .help-block,form .clearfix.success .help-inline{color:#57a957;}
+form .clearfix.success input,form .clearfix.success textarea{color:#57a957;border-color:#57a957;}form .clearfix.success input:focus,form .clearfix.success textarea:focus{border-color:#458845;-webkit-box-shadow:0 0 6px #9acc9a;-moz-box-shadow:0 0 6px #9acc9a;box-shadow:0 0 6px #9acc9a;}
+form .clearfix.success .input-prepend .add-on,form .clearfix.success .input-append .add-on{color:#57a957;background-color:#bcddbc;border-color:#57a957;}
 .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;}
@@ -162,7 +160,7 @@ input.span15,textarea.span15{display:inline-block;width:870px;}
 input.span16,textarea.span16{display:inline-block;width:930px;}
 input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f5f5f5;border-color:#ddd;cursor:not-allowed;}
 .actions{background:#f5f5f5;margin-top:18px;margin-bottom:18px;padding:17px 20px 18px 150px;border-top:1px solid #ddd;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;}.actions .secondary-action{float:right;}.actions .secondary-action a{line-height:30px;}.actions .secondary-action a:hover{text-decoration:underline;}
-.help-inline,.help-block{font-size:11px;line-height:18px;color:#bfbfbf;}
+.help-inline,.help-block{font-size:13px;line-height:18px;color:#bfbfbf;}
 .help-inline{padding-left:5px;*position:relative;*top:-5px;}
 .help-block{display:block;max-width:600px;}
 .inline-inputs{color:#808080;}.inline-inputs span,.inline-inputs input{display:inline-block;}

diff --git a/docs/index.html b/docs/index.html
index 81c4ea97f43065ba0f64c7ab433cb3abe8686c5e..846d26ed10c8f46a7cc22b908dee18b66e2e4186 100644 (file)
--- a/docs/index.html
+++ b/docs/index.html
@@ -1109,13 +1109,6 @@
               <span class="help-inline">Small snippet of help text</span>
             </div>
           </div><!-- /clearfix -->
-          <div class="clearfix error">
-            <label for="errorInput2">Input with error</label>
-            <div class="input">
-              <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">

diff --git a/lib/forms.less b/lib/forms.less
index 052d885f53703dac9be8387750f42d9f4576c62a..acb692a7f14ad6a32916b2ad892bfda013a95629 100644 (file)
--- a/lib/forms.less
+++ b/lib/forms.less
@@ -168,101 +168,43 @@ select:focus {
 // FORM FIELD FEEDBACK STATES
 // --------------------------
 
-// Common styles
-form .clearfix.error,
-form .clearfix.warning,
-form .clearfix.success {
-  padding: 10px 0;
-  margin: 10px 0;
-  .border-radius(4px);
-  // 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%);
+// Mixin for form field states
+.formFieldState(@textColor: #555, @backgroundColor: #f5f5f5) {
+  // Set the text color
   > label,
-  .help-inline,
-  .help-block {
-    color: darken(@formErrorColor, 20%);
+  .help-block,
+  .help-inline {
+    color: @textColor;
   }
+  // Style inputs accordingly
   input,
   textarea {
-    border-color: @formErrorColor;
+    color: @textColor;
+    border-color: @textColor;
     &:focus {
-      border-color: @formErrorColor;
-      .box-shadow(0 0 6px @formErrorColor);
+      border-color: darken(@textColor, 10%);
+      .box-shadow(0 0 6px lighten(@textColor, 20%);
     }
   }
+  // Give a small background color for input-prepend/-append
   .input-prepend .add-on,
   .input-append .add-on {
-    background-color: lighten(@formErrorColor, 50%);
-    border-color: @formErrorColor;
-    color: @formErrorColor;
+    color: @textColor;
+    background-color: @backgroundColor;
+    border-color: @textColor;
   }
 }
-
+// Error
+form .clearfix.error {
+  .formFieldState(#ee5f5b, lighten(#ee5f5b, 30%));
+}
 // 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;
-  }
+  .formFieldState(#CCAE64, lighten(#CCAE64, 5%));
 }
-
 // 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;
-  }
+  .formFieldState(#57a957, lighten(#57a957, 30%));
 }
 
 
@@ -367,9 +309,10 @@ textarea[readonly] {
 }
 
 // Help Text
+// TODO: Do we need to set basefont and baseline here?
 .help-inline,
 .help-block {
-  font-size: @basefont - 2;
+  font-size: @basefont;
   line-height: @baseline;
   color: @grayLight;
 }