huge update to forms, docs for the new forms, added a new link for js example to tabs/pills, add some new mixins

5 files changed, 202 insertions, 232 deletions

diff --git a/lib/forms.less b/lib/forms.less
index 91aca77fe..fd46fc71e 100644
--- a/lib/forms.less
+++ b/lib/forms.less
@@ -6,29 +6,20 @@
 // GENERAL STYLES
 // --------------
 
+// Make all forms have space below them
 form {
   margin-bottom: @baseline;
 }
 
 // Groups of fields with labels on top (legends)
-fieldset {
-  margin-bottom: @baseline;
-  padding-top: @baseline;
-  legend {
-    display: block;
-    padding-left: 150px;
-    font-size: @basefont * 1.5;
-    line-height: 1;
-    color: @grayDark;
-    *padding: 0 0 5px 145px; /* IE6-7 */
-    *line-height: 1.5; /* IE6-7 */
-  }
-}
-
-// Parent element that clears floats and wraps labels and fields together
-form .clearfix {
-  margin-bottom: @baseline;
-  .clearfix()
+legend {
+  display: block;
+  width: 100%;
+  margin-bottom: @baseline * 1.5;
+  font-size: @basefont * 1.5;
+  line-height: @baseline * 2;
+  color: @grayDark;
+  border-bottom: 1px solid #eee;
 }
 
 // Set font for forms
@@ -36,25 +27,16 @@ label,
 input,
 select,
 textarea {
-  #font > .sans-serif(normal,13px,normal);
+  #font > .sans-serif(normal,@basefont,@baseline);
 }
 
-// Float labels left
+// Identify controls by their labels
 label {
-  padding-top: 6px;
-  font-size: @basefont;
-  line-height: @baseline;
-  float: left;
-  width: 130px;
-  text-align: right;
+  display: block;
+  margin-bottom: 5px;
   color: @grayDark;
 }
 
-// Shift over the inside div to align all label's relevant content
-form .input {
-  margin-left: 150px;
-}
-
 // Checkboxs and radio buttons
 input[type=checkbox],
 input[type=radio] {
@@ -77,7 +59,7 @@ select,
   .border-radius(3px);
 }
 
-/* mini reset for non-html5 file types */
+/* Mini reset for unique input types */
 input[type=checkbox],
 input[type=radio] {
   width: auto;
@@ -89,6 +71,7 @@ input[type=radio] {
   border: none;
 }
 
+// Reset the file input to browser defaults
 input[type=file] {
   background-color: @white;
   padding: initial;
@@ -97,6 +80,7 @@ input[type=file] {
   .box-shadow(none);
 }
 
+// Help out input buttons
 input[type=button],
 input[type=reset],
 input[type=submit] {
@@ -120,24 +104,11 @@ textarea {
   height: auto;
 }
 
-// For text that needs to appear as an input but should not be an input
-.uneditable-input {
-  background-color: @white;
-  display: block;
-  border-color: #eee;
-  .box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
-  cursor: not-allowed;
-}
 
-// Placeholder text gets special styles; can't be bundled together though for some reason
-:-moz-placeholder {
-  color: @grayLight;
-}
-::-webkit-input-placeholder {
-  color: @grayLight;
-}
 
-// Focus states
+// FOCUS STATE
+// -----------
+
 input,
 textarea {
   @transition: border linear .2s, box-shadow linear .2s;
@@ -158,36 +129,6 @@ select:focus {
   outline: 1px dotted #666; // Selet elements don't get box-shadow styles, so instead we do outline
 }
 
-// Error styles
-form div.clearfix.error {
-  background: lighten(@red, 57%);
-  padding: 10px 0;
-  margin: -10px 0 10px;
-  .border-radius(4px);
-  @error-text: desaturate(lighten(@red, 25%), 25%);
-  > label,
-  span.help-inline,
-  span.help-block {
-    color: @red;
-  }
-  input,
-  textarea {
-    border-color: @error-text;
-    .box-shadow(0 0 3px rgba(171,41,32,.25));
-    &:focus {
-      border-color: darken(@error-text, 10%);
-      .box-shadow(0 0 6px rgba(171,41,32,.5));
-    }
-  }
-  .input-prepend,
-  .input-append {
-    span.add-on {
-      background: lighten(@red, 50%);
-      border-color: @error-text;
-      color: darken(@error-text, 10%);
-    }
-  }
-}
 
 
 // INPUT SIZES
@@ -232,8 +173,9 @@ select {
 }
 
 
-// INPUT STATES
-// ------------
+
+// DISABLED STATE
+// --------------
 
 // Disabled and read-only inputs
 input[disabled],
@@ -247,36 +189,89 @@ textarea[readonly] {
   cursor: not-allowed;
 }
 
-// Actions (the buttons)
-.actions {
-  background: #f5f5f5;
+
+
+// ERROR STATE
+// -----------
+
+// Set color of error text
+@error-text: desaturate(lighten(@red, 25%), 25%);
+
+// Style the background of control-groups with errors
+.has-error {
+  background: lighten(@red, 55%);
+  padding: (@baseline / 2) 0;
+  margin: -10px 0 10px;
+  .border-radius(4px);
+  > label,
+  span.help-inline,
+  span.help-block {
+    color: @red;
+  }
+  input,
+  textarea,
+  select {
+    border-color: @error-text;
+    .box-shadow(0 0 3px rgba(171,41,32,.25));
+    &:focus {
+      border-color: darken(@error-text, 10%);
+      .box-shadow(0 0 6px rgba(171,41,32,.5));
+    }
+  }
+  .input-prepend,
+  .input-append {
+    span.add-on {
+      background: lighten(@red, 50%);
+      border-color: @error-text;
+      color: darken(@error-text, 10%);
+    }
+  }
+}
+
+
+
+// FORM ACTIONS
+// ------------
+
+.form-actions {
+  padding: (@baseline - 1) 20px @baseline;
   margin-top: @baseline;
   margin-bottom: @baseline;
-  padding: (@baseline - 1) 20px @baseline 150px;
+  background-color: #f5f5f5;
   border-top: 1px solid #ddd;
-  .border-radius(0 0 3px 3px);
-  .secondary-action {
-    float: right;
-    a {
-      line-height: 30px;
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-  }
 }
 
 
+// For text that needs to appear as an input but should not be an input
+.uneditable-input {
+  background-color: @white;
+  display: block;
+  border-color: #eee;
+  .box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
+  cursor: not-allowed;
+}
+
+// Placeholder text gets special styles; can't be bundled together though for some reason
+:-moz-placeholder {
+  color: @grayLight;
+}
+::-webkit-input-placeholder {
+  color: @grayLight;
+}
+
+
+
 // HELP TEXT
 // ---------
 
-.help-inline,
-.help-block {
-  font-size: @basefont - 2;
-  line-height: @baseline;
+.help-text {
+  margin-top: 5px;
+  margin-bottom: 0;
   color: @grayLight;
 }
+
 .help-inline {
+  display: inline;
   padding-left: 5px;
   *position: relative; /* IE6-7 */
   *top: -5px; /* IE6-7 */
@@ -290,7 +285,7 @@ textarea[readonly] {
 
 
 // INLINE FIELDS
-// ---------
+// -------------
 
 .inline-inputs {
   color: @gray;
@@ -309,8 +304,8 @@ textarea[readonly] {
 }
 
 
-// INPUTS GROUPS
-// -------------
+// INPUT GROUPS
+// ------------
 
 // Allow us to put symbols and text within the input field for a cleaner look
 .input-prepend,
@@ -360,97 +355,49 @@ textarea[readonly] {
 }
 
 
-// LISTS OF CONTROLS
+
+
+// HORIZONTAL & VERTICAL FORMS
+// ---------------------------
+
+
+// Common properties
 // -----------------
 
-// Stacked options for forms (radio buttons or checkboxes)
-.inputs-list {
-  margin: 0 0 5px;
-  width: 100%;
-  li {
-    display: block;
-    padding: 0;
-    width: 100%;
-  }
-  label {
-    display: block;
-    float: none;
-    width: auto;
-    padding: 0;
-    line-height: @baseline;
-    text-align: left;
-    white-space: normal;
-    strong {
-      color: @gray;
-    }
-    small {
-      font-size: @basefont - 2;
-      font-weight: normal;
-    }
-  }
-  .inputs-list {
-    margin-left: 25px;
-    margin-bottom: 10px;
-    padding-top: 0;
-  }
-  &:first-child {
-    padding-top: 6px;
-  }
-  li + li {
-    padding-top: 2px;
-  }
-  input[type=radio],
-  input[type=checkbox] {
-    margin-bottom: 0;
-  }
+// Margin to space out fieldsets
+.control-group {
+  margin-bottom: @baseline;
 }
 
+// Bold the labels so they stand out
+.control-group > label {
+  font-weight: bold;
+}
 
-// STACKED FORMS
-// -------------
+// Lists of controls (checkboxes and radios)
+.control-list {
+}
 
-.form-stacked {
-  padding-left: 20px;
-  fieldset {
-    padding-top: @baseline / 2;
-  }
-  legend {
-    padding-left: 0;
-  }
-  label {
-    display: block;
-    float: none;
-    width: auto;
-    font-weight: bold;
-    text-align: left;
-    line-height: 20px;
-    padding-top: 0;
-  }
-  .clearfix {
-    margin-bottom: @baseline / 2;
-    div.input {
-      margin-left: 0;
-    }
-  }
-  .inputs-list {
-    margin-bottom: 0;
-    li {
-      padding-top: 0;
-      label {
-        font-weight: normal;
-        padding-top: 0;
-      }
-    }
-  }
-  div.clearfix.error {
-    padding-top: 10px;
-    padding-bottom: 10px;
-    padding-left: 10px;
-    margin-top: 0;
-    margin-left: -10px;
-  }
-  .actions {
-    margin-left: -20px;
-    padding-left: 20px;
-  }
-}
\ No newline at end of file
+
+// Horizontal-specific styles
+// --------------------------
+
+// Float the labels left
+.form-horizontal .control-group > label {
+  float: left;
+  width: 130px;
+  padding-top: 5px;
+  text-align: right;
+}
+// Move over all input controls and content
+.form-horizontal .controls {
+  margin-left: 150px;
+}
+// Move the options list down to align with labels
+.form-horizontal .control-list {
+  padding-top: 6px; // has to be padding because margin collaspes
+}
+// Move over buttons in .form-actions to align with .controls
+.form-horizontal .form-actions {
+  padding-left: 150px;
+}
diff --git a/lib/mixins.less b/lib/mixins.less
index 929618a40..b0ecf03d3 100644
--- a/lib/mixins.less
+++ b/lib/mixins.less
@@ -6,32 +6,32 @@
 // Clearfix for clearing floats like a boss h5bp.com/q
 .clearfix() {
   zoom: 1;
-	&:before,
+  &:before,
   &:after {
     display: table;
     content: "";
     zoom: 1;
     *display: inline;
-	}
-	&:after {
+  }
+  &:after {
     clear: both;
-	}
+  }
 }
 
 // Center-align a block level element
 .center-block() {
-	display: block;
+  display: block;
   margin-left: auto;
   margin-right: auto;
 }
 
 // Sizing shortcuts
 .size(@height: 5px, @width: 5px) {
-	height: @height;
-	width: @width;
+  height: @height;
+  width: @width;
 }
 .square(@size: 5px) {
-	.size(@size, @size);
+  .size(@size, @size);
 }
 
 // Input placeholder text
@@ -112,27 +112,40 @@
 
 // Transitions
 .transition(@transition) {
-	-webkit-transition: @transition;
-	   -moz-transition: @transition;
- 	    -ms-transition: @transition;
-	     -o-transition: @transition;
-	        transition: @transition;
+  -webkit-transition: @transition;
+     -moz-transition: @transition;
+      -ms-transition: @transition;
+       -o-transition: @transition;
+          transition: @transition;
+}
+
+// Transform for scale and rotate
+// translate, rotate, scale -- need to finalize
+.rotation(@degrees: 5deg) {
+  -webkit-transform: rotate(@degrees);
+     -moz-transform: rotate(@degrees);
+          transform: rotate(@degrees);
+}
+.scale(@value: 1.5) {
+  -webkit-transform: scale(@value);
+     -moz-transform: scale(@value);
+          transform: scale(@value);
 }
 
 // Background clipping
 .background-clip(@clip) {
-	-webkit-background-clip: @clip;
-	   -moz-background-clip: @clip;
-	        background-clip: @clip;
+  -webkit-background-clip: @clip;
+     -moz-background-clip: @clip;
+          background-clip: @clip;
 }
 
 // CSS3 Content Columns
 .content-columns(@columnCount, @columnGap: 20px) {
-	-webkit-column-count: @columnCount;
-	   -moz-column-count: @columnCount;
+  -webkit-column-count: @columnCount;
+     -moz-column-count: @columnCount;
           column-count: @columnCount;
   -webkit-column-gap: @columnGap;
-	   -moz-column-gap: @columnGap;
+     -moz-column-gap: @columnGap;
           column-gap: @columnGap;
 }
 
@@ -140,11 +153,11 @@
 #translucent {
   .background(@color: @white, @alpha: 1) {
     background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
-	}
-	.border(@color: @white, @alpha: 1) {
-		border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
-		background-clip: padding-box;
-	}
+  }
+  .border(@color: @white, @alpha: 1) {
+    border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
+    background-clip: padding-box;
+  }
 }
 
 // Gradient Bar Colors for buttons and allerts
@@ -157,9 +170,8 @@
 
 // Gradients
 #gradient {
-  .horizontal (@startColor: #555, @endColor: #333) {
+  .horizontal(@startColor: #555, @endColor: #333) {
     background-color: @endColor;
-    background-repeat: repeat-x;
     background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor)); // Konqueror
     background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
     background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
@@ -167,11 +179,11 @@
     background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
     background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
     background-image: linear-gradient(left, @startColor, @endColor); // Le standard
+    background-repeat: repeat-x;
     filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down
   }
-  .vertical (@startColor: #555, @endColor: #333) {
+  .vertical(@startColor: #555, @endColor: #333) {
     background-color: @endColor;
-    background-repeat: repeat-x;
     background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror
     background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
     background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10
@@ -179,9 +191,10 @@
     background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
     background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
     background-image: linear-gradient(top, @startColor, @endColor); // The standard
-    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
+    background-repeat: repeat-x;
+   filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
   }
-  .directional (@startColor: #555, @endColor: #333, @deg: 45deg) {
+  .directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
     background-color: @endColor;
     background-repeat: repeat-x;
     background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
@@ -192,15 +205,24 @@
   }
   .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
     background-color: @endColor;
-    background-repeat: no-repeat;
     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
     background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
     background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
     background-image: -ms-linear-gradient(@startColor, @midColor @colorStop, @endColor);
     background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
     background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
+    background-repeat: no-repeat;
     filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down, gets no color-stop at all for proper fallback
   }
+  .radial(@centerColor: #555, @outsideColor: #333)  {
+    background-color: @outsideColor;
+    background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@centerColor), to(@outsideColor));
+    background-image: -webkit-radial-gradient(circle, @centerColor, @outsideColor);
+    background-image: -moz-radial-gradient(circle, @centerColor, @outsideColor);
+    background-image: -ms-radial-gradient(circle, @centerColor, @outsideColor);
+    background-repeat: no-repeat;
+    // Opera cannot do radial gradients yet
+  }
 }
 
 // Reset filters for IE
@@ -210,8 +232,8 @@
 
 // Opacity
 .opacity(@opacity: 100) {
-	filter: e(%("alpha(opacity=%d)", @opacity));
-	-khtml-opacity: @opacity / 100;
-	  -moz-opacity: @opacity / 100;
-	       opacity: @opacity / 100;
+  filter: e(%("alpha(opacity=%d)", @opacity));
+  -khtml-opacity: @opacity / 100;
+    -moz-opacity: @opacity / 100;
+         opacity: @opacity / 100;
 }
\ No newline at end of file
diff --git a/lib/reset.less b/lib/reset.less
index 6be76fdba..983f14f3d 100644
--- a/lib/reset.less
+++ b/lib/reset.less
@@ -1,5 +1,5 @@
 /* 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).
+ * 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).
  * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
 
 
diff --git a/lib/type.less b/lib/type.less
index 077ae9d8f..88b320459 100644
--- a/lib/type.less
+++ b/lib/type.less
@@ -41,15 +41,16 @@ h2 {
     font-size: 14px;
   }
 }
-h3, h4, h5, h6 {
-  line-height: @baseline * 2;
-}
 h3 {
+  line-height: @baseline * 2;
   font-size: 18px;
   small {
     font-size: 14px;
   }
 }
+h4, h5, h6 {
+  line-height: @baseline;
+}
 h4 {
   font-size: 16px;
   small {
diff --git a/lib/variables.less b/lib/variables.less
index 34000d066..dcb0a8ebf 100644
--- a/lib/variables.less
+++ b/lib/variables.less
@@ -9,10 +9,10 @@
 
 // Grays
 @black:             #000;
-@grayDark:          lighten(@black, 25%);
-@gray:              lighten(@black, 50%);
-@grayLight:         lighten(@black, 75%);
-@grayLighter:       lighten(@black, 90%);
+@grayDark:          #333;
+@gray:              #555;
+@grayLight:         #777;
+@grayLighter:       #ccc;
 @white:             #fff;
 
 // Accent Colors