docs updates, forms updated to include error states and more examples, remove...

docs updates, forms updated to include error states and more examples, remove text-shadow from gradientbar mixin to fix bug

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: Mon Dec 19 22:58:34 PST 2011
+ * Date: Wed Dec 21 15:58:57 CST 2011
  */
 html, body {
   margin: 0;
@@ -919,6 +919,9 @@ textarea[readonly] {
 .inline-inputs span {
   padding: 0 2px 0 1px;
 }
+.input-prepend, .input-append {
+  overflow: hidden;
+}
 .input-prepend input, .input-append input {
   -webkit-border-radius: 0 3px 3px 0;
   -moz-border-radius: 0 3px 3px 0;
@@ -1534,7 +1537,6 @@ footer {
 .alert-message.danger,
 .btn.error,
 .alert-message.error {
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
   background-color: #c43c35;
   background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));
   background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
@@ -1549,7 +1551,6 @@ footer {
   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
 }
 .btn.success, .alert-message.success {
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
   background-color: #57a957;
   background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));
   background-image: -moz-linear-gradient(top, #62c462, #57a957);
@@ -1564,7 +1565,6 @@ footer {
   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
 }
 .btn.info, .alert-message.info {
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
   background-color: #339bb9;
   background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));
   background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);
@@ -1619,7 +1619,6 @@ footer {
 }
 .btn.primary {
   color: #ffffff;
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
   background-color: #0064cd;
   background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
   background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
@@ -1759,7 +1758,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
   margin-bottom: 18px;
   color: #404040;
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
   background-color: #eedc94;
   background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));
   background-image: -moz-linear-gradient(top, #fceec1, #eedc94);
@@ -1802,6 +1800,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
   -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
   box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
 }
+.alert-message.error, .alert-message.success, .alert-message.info {
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
 .alert-message.block-message {
   padding: 14px;
   background-image: none;

docs/base-css.html

@@ -762,6 +762,43 @@
     <h1>Forms</h1>
   </div>
 
+<!--
+
+Types of forms
+  default (stacked)
+  horizontal (change the class)
+  search
+  inline
+Form elements
+  form
+  fieldset
+  legend
+  label
+  input
+    text (password, email, etc)
+    radio
+    checkbox
+  textarea
+    rows
+  select
+    single
+    multiple
+    size
+Custom form elements
+  Input prepend and append (for @ and $)
+  checkbox and radio lists
+Explaining the default Bootstrap form structure
+  Bulletproofing our forms means adding a bit of extra structure and providing more classes for customization and event handling
+  Form vertical and horizontal forms, we require a wrapping element.
+    we suggest a fieldset
+    but could be anthing so long as it uses the proper class
+Form states
+  warning
+  error
+  success
+
+-->
+
   <h2>Four types of forms</h2>
   <table class="bordered-table striped-table">
     <thead>
@@ -842,7 +879,7 @@
     </div>
     <div class="span9">
       <form class="horizontal-form">
-        <legend>Example form</legend>
+        <legend>Example form section</legend>
         <fieldset class="control-group">
           <label class="control-label" for="input01">Text input</label>
           <div class="controls">
@@ -850,6 +887,16 @@
             <p class="help-text">Help text here. Be sure to fill this out like so, or else!</p>
           </div>
         </fieldset>
+        <fieldset class="control-group">
+          <label class="control-label" for="prependedInput">Prepended text</label>
+          <div class="controls">
+            <div class="input-prepend">
+              <span class="add-on">@</span>
+              <input class="input-small" id="prependedInput" name="prependedInput" size="16" type="text">
+            </div>
+            <span class="help-block">Here's some help text</span>
+          </div>
+        </fieldset>
         <fieldset class="control-group">
           <label class="control-label" for="select01">Select list</label>
           <div class="controls">
@@ -874,23 +921,44 @@
             </select>
           </div>
         </fieldset>
-        <legend>Example form</legend>
+        <legend>Example form section</legend>
+        <fieldset class="control-group">
+          <label class="control-label" for="textarea">Textarea</label>
+          <div class="controls">
+            <textarea class="input-xlarge" name="textarea" id="textarea" rows="3"></textarea>
+          </div>
+        </fieldset>
+        <fieldset class="control-group">
+          <label class="control-label" for="fileInput">Disabled input</label>
+          <div class="controls">
+            <input class="input-xlarge disabled" id="disabledInput" name="disabledInput" size="30" type="text" placeholder="Disabled input here... carry on." disabled>
+          </div>
+        </fieldset>
         <fieldset class="control-group">
           <label class="control-label" for="fileInput">File input</label>
           <div class="controls">
             <input class="input-file" id="fileInput" name="fileInput" type="file">
           </div>
         </fieldset>
-        <fieldset class="control-group has-error">
+        <fieldset class="control-group warning">
+          <label class="control-label" for="inputError">Input with warning</label>
+          <div class="controls">
+            <input type="text" name="inputError">
+            <span class="help-inline">Something may have gone wrong</span>
+          </div>
+        </fieldset>
+        <fieldset class="control-group error">
           <label class="control-label" for="inputError">Input with error</label>
           <div class="controls">
             <input type="text" name="inputError">
+            <span class="help-inline">Please correct the error</span>
           </div>
         </fieldset>
-        <fieldset class="control-group has-error">
-          <label class="control-label" for="textareaError">Textarea with error</label>
+        <fieldset class="control-group success">
+          <label class="control-label" for="inputError">Input with success</label>
           <div class="controls">
-            <textarea class="input-xlarge" rows="3"></textarea>
+            <input type="text" name="inputError">
+            <span class="help-inline">Woohoo!</span>
           </div>
         </fieldset>
         <fieldset class="control-group">

docs/components.html

@@ -201,11 +201,33 @@
 
 
 
-<!-- Navigation
+<!-- Autocomplete
 ================================================== -->
-<section id="navigation">
+<section id="autocomplete">
   <div class="page-header">
-    <h1>Navigation</h1>
+    <h1>Autocomplete <small></small></h1>
+  </div>
+
+</section>
+
+
+
+<!-- Carousel
+================================================== -->
+<section id="carousel">
+  <div class="page-header">
+    <h1>Carousel <small></small></h1>
+  </div>
+
+</section>
+
+
+
+<!-- Navbar
+================================================== -->
+<section id="navbar">
+  <div class="page-header">
+    <h1>Navbar</h1>
   </div>
   <h2>Fixed navbar</h2>
   <div class="navbar navbar-static" data-dropdown="dropdown">
@@ -262,11 +284,19 @@
   </div>
   <p><strong>Note:</strong> When using the navbar on any page, be sure to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code>&lt;body&gt;</code>.</p>
 
-  <br>
+</section>
+
+
+
+<!-- Tabs & Pills
+================================================== -->
+<section id="tabsAndPills">
+  <div class="page-header">
+    <h1>Tabs and pills <small></small></h1>
+  </div>
 
   <div class="row">
     <div class="span3">
-      <h2>Tabs and pills</h2>
       <p>Create simple secondary navigation with a <code>&lt;ul&gt;</code>. Swap between tabs or pills by adding the appropriate class.</p>
       <p>Great for sub-sections of content like our account settings pages and user timelines for toggling between pages of like content. Available in tabbed or pill styles.</p>
     </div>
@@ -428,10 +458,19 @@
     </div>
   </div><!-- /row -->
 
-  <!-- Breadcrumbs -->
+</section>
+
+
+
+<!-- Breadcrumbs
+================================================== -->
+<section id="breadcrumbs">
+  <div class="page-header">
+    <h1>Breadcrumbs <small></small></h1>
+  </div>
+
   <div class="row">
     <div class="span3">
-      <h2>Breadcrumbs</h2>
       <p>Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation.</p>
     </div>
     <div class="span9">
@@ -464,10 +503,20 @@
     </div>
   </div>
 
+</section>
+
+
+
+<!-- Step nav
+================================================== -->
+<section id="stepNav">
+  <div class="page-header">
+    <h1>Step nav <small></small></h1>
+  </div>
+
   <!-- Step nav -->
   <div class="row">
     <div class="span3">
-      <h2>Step nav</h2>
       <p>Placeholder for now!</p>
     </div>
     <div class="span9">
@@ -486,7 +535,17 @@
     </div>
   </div>
 
-  <!-- Pagination -->
+</section>
+
+
+
+<!-- Pagination
+================================================== -->
+<section id="carousel">
+  <div class="page-header">
+    <h1>Pagination <small></small></h1>
+  </div>
+
   <div class="row">
     <div class="span3">
       <h2>Pagination</h2>
@@ -644,11 +703,11 @@
 </section>
 
 
-<!-- Popovers
+<!-- Modals
 ================================================== -->
 <section id="popovers">
   <div class="page-header">
-    <h1>Popovers <small>Components for displaying content in modals, tooltips, and popovers</small></h1>
+    <h1>Modals <small></small></h1>
   </div>
   <div class="row">
     <div class="span3">
@@ -676,7 +735,17 @@
     </div>
   </div><!-- /row -->
 
-  <!-- Tooltips -->
+</section>
+
+
+
+<!-- Twipsies
+================================================== -->
+<section id="carousel">
+  <div class="page-header">
+    <h1>Twipsy tooltips <small></small></h1>
+  </div>
+
   <div class="row">
     <div class="span3">
       <h2>Tooltips</h2>
@@ -694,7 +763,17 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
     </div>
   </div><!-- /row -->
 
-  <!-- Popovers -->
+</section>
+
+
+
+<!-- Popovers
+================================================== -->
+<section id="popovers">
+  <div class="page-header">
+    <h1>Popovers <small></small></h1>
+  </div>
+
   <div class="row">
     <div class="span3">
       <h2>Popovers</h2>
@@ -721,6 +800,8 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
 </section>
 
 
+
+
       <!-- Footer
       ================================================== -->
       <footer class="footer">

docs/upgrading.html

@@ -38,7 +38,7 @@
             <li><a href="./base-css.html">Base CSS</a></li>
             <li><a href="./components.html">Components</a></li>
             <li><a href="./javascript.html">Javascript plugins</a></li>
-            <li class="active"><a href="./less.html">Using LESS</a></li>
+            <li><a href="./less.html">Using LESS</a></li>
           </ul>
         </div>
       </div>

lib/forms.less

@@ -325,6 +325,7 @@ textarea[readonly] {
 // Allow us to put symbols and text within the input field for a cleaner look
 .input-prepend,
 .input-append {
+  overflow: hidden;
   input {
     .border-radius(0 3px 3px 0);
   }

lib/mixins.less

@@ -205,7 +205,6 @@
 
 // Gradient Bar Colors for buttons and alerts
 .gradientBar(@primaryColor, @secondaryColor) {
-  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
   #gradient > .vertical(@primaryColor, @secondaryColor);
   border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
   border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);

lib/patterns.less

@@ -575,6 +575,12 @@ input[type=submit].btn {
     .box-shadow(0 1px 0 rgba(255,255,255,.25));
   }
 
+  &.error,
+  &.success,
+  &.info {
+    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+  }
+
   &.block-message {
     padding: 14px;
     background-image: none;