From: Mark Otto <mark.otto@twitter.com>
Date: Sat, 12 Nov 2011 08:46:02 +0000 (-0800)
Subject: updated docs pages (still wip), adding misc css classes, added form styles from 1... 
X-Git-Tag: v2.0.0~6^2~436
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=1fb98bed91977b710ae321443d0819939a1a8cc7;p=thirdparty%2Fbootstrap.git

updated docs pages (still wip), adding misc css classes, added form styles from 1.4, added github buttons to homepage
---

diff --git a/bootstrap.css b/bootstrap.css
index 2c35362d00..71712829f0 100644
--- 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: Mon Oct 31 21:46:38 PDT 2011
+ * Date: Mon Nov  7 21:14:04 PST 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).
@@ -763,33 +763,59 @@ textarea[readonly] {
   border-color: #ddd;
   cursor: not-allowed;
 }
-.has-error {
-  background: #f8dcda;
-  padding: 9px 0;
-  margin: -10px 0 10px;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
+form .clearfix.error > label, form .clearfix.error .help-block, form .clearfix.error .help-inline {
+  color: #b94a48;
 }
-.has-error > label, .has-error span.help-inline, .has-error span.help-block {
-  color: #9d261d;
+form .clearfix.error input, form .clearfix.error textarea {
+  color: #b94a48;
+  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: #b94a48;
+  background-color: #fce6e6;
+  border-color: #b94a48;
+}
+form .clearfix.warning > label, form .clearfix.warning .help-block, form .clearfix.warning .help-inline {
+  color: #c09853;
+}
+form .clearfix.warning input, form .clearfix.warning textarea {
+  color: #c09853;
+  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;
 }
-.has-error input, .has-error textarea, .has-error select {
-  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.warning .input-prepend .add-on, form .clearfix.warning .input-append .add-on {
+  color: #c09853;
+  background-color: #d2b877;
+  border-color: #c09853;
 }
-.has-error input:focus, .has-error textarea:focus, .has-error select: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.success > label, form .clearfix.success .help-block, form .clearfix.success .help-inline {
+  color: #468847;
 }
-.has-error .input-prepend span.add-on, .has-error .input-append span.add-on {
-  background: #f4c8c5;
-  border-color: #c87872;
-  color: #b9554d;
+form .clearfix.success input, form .clearfix.success textarea {
+  color: #468847;
+  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: #468847;
+  background-color: #bcddbc;
+  border-color: #468847;
 }
 .form-actions {
   padding: 17px 20px 18px;
@@ -2377,6 +2403,12 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
   -moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
   box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
 }
+.pull-right {
+  float: right;
+}
+.pull-left {
+  float: left;
+}
 /* Responsive.less
  * For phone and tablet devices
  * ------------------------------------------------------------- */
diff --git a/bootstrap.min.css b/bootstrap.min.css
index 9e45659050..04badb14ec 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -127,9 +127,15 @@ input.span14,textarea.span14,select.span14{display:inline-block;float:none;width
 input.span15,textarea.span15,select.span15{display:inline-block;float:none;width:1450px;margin-left:0;}
 input.span16,textarea.span16,select.span16{display:inline-block;float:none;width:1550px;margin-left:0;}
 input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f5f5f5;border-color:#ddd;cursor:not-allowed;}
-.has-error{background:#f8dcda;padding:9px 0;margin:-10px 0 10px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.has-error>label,.has-error span.help-inline,.has-error span.help-block{color:#9d261d;}
-.has-error input,.has-error textarea,.has-error select{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);}.has-error input:focus,.has-error textarea:focus,.has-error select: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);}
-.has-error .input-prepend span.add-on,.has-error .input-append span.add-on{background:#f4c8c5;border-color:#c87872;color:#b9554d;}
+form .clearfix.error>label,form .clearfix.error .help-block,form .clearfix.error .help-inline{color:#b94a48;}
+form .clearfix.error input,form .clearfix.error textarea{color:#b94a48;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:#b94a48;background-color:#fce6e6;border-color:#b94a48;}
+form .clearfix.warning>label,form .clearfix.warning .help-block,form .clearfix.warning .help-inline{color:#c09853;}
+form .clearfix.warning input,form .clearfix.warning textarea{color:#c09853;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:#c09853;background-color:#d2b877;border-color:#c09853;}
+form .clearfix.success>label,form .clearfix.success .help-block,form .clearfix.success .help-inline{color:#468847;}
+form .clearfix.success input,form .clearfix.success textarea{color:#468847;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:#468847;background-color:#bcddbc;border-color:#468847;}
 .form-actions{padding:17px 20px 18px;margin-top:18px;margin-bottom:18px;background-color:#f5f5f5;border-top:1px solid #ddd;}
 .uneditable-input{background-color:#ffffff;display:block;border-color:#eee;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);cursor:not-allowed;}
 :-moz-placeholder{color:#bfbfbf;}
@@ -343,4 +349,6 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
 .media-grid li{display:inline;}
 .media-grid a{float:left;padding:4px;margin:0 0 20px 20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);}.media-grid a img{display:block;}
 .media-grid a:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);}
+.pull-right{float:right;}
+.pull-left{float:left;}
 @media (max-width: 480px){.container{width:auto;padding:0 15px;} .row{margin-left:0;} [class*="span"]{float:none;display:block;width:auto;margin:0;} .modal{width:auto;margin:0;} .form-horizontal .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .form-horizontal .controls{margin-left:0;} .form-horizontal .control-list{padding-top:0;} .form-horizontal .form-actions{padding-left:0;}}@media (min-width: 480px) and (max-width: 768px){.container{width:auto;padding:0 10px;} .row{margin-left:0;} [class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}}
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 2dde6a452e..b503c23e43 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -54,9 +54,10 @@ body > .navbar-fixed .brand:hover {
   float: left;
   padding: 1px 5px 1px 4px;
   font-size: 11px;
-  font-weight: normal;
+  font-weight: bold;
   line-height: 16px;
-  color: #555;
+  color: #666;
+  text-shadow: 0 1px 0 #fff;
   -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
           border-radius: 3px;
@@ -67,7 +68,7 @@ body > .navbar-fixed .brand:hover {
 .github-btn .github-ico {
   float: left;
   margin-right: 4px;
-  opacity: .75;
+  opacity: .65;
 }
 .github-btn .count {
   display: inline-block;
diff --git a/docs/assets/img/less-logo-large.png b/docs/assets/img/less-logo-large.png
new file mode 100644
index 0000000000..1a739b3e99
Binary files /dev/null and b/docs/assets/img/less-logo-large.png differ
diff --git a/docs/less.html b/docs/less.html
index 4fa0f0bdd2..108ec35df6 100644
--- a/docs/less.html
+++ b/docs/less.html
@@ -48,11 +48,82 @@
       <!-- Masthead
       ================================================== -->
       <header class="jumbotron subhead" id="overview">
-        <h1>Using LESS</h1>
+        <h1>Using LESS with Bootstrap</h1>
         <p class="lead">Be a boss and use Bootstrap's built-in variables, mixins, and more via LESS</p>
       </header>
 
 
+
+      <!-- BUILT WITH LESS
+      ================================================== -->
+      <div class="page-header">
+        <h1>Built with LESS</h1>
+      </div>
+      <div class="row">
+        <div class="span4">
+          <h3>Why LESS?</h3>
+          <p>Bootstrap is made with LESS at it's core, a dynamic stylesheet language created by Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.</p>
+        </div>
+        <div class="span4">
+          <h3>What's included?</h3>
+          <p>As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.</p>
+        </div>
+        <div class="span4">
+          <h3>Learn more</h3>
+          <img style="float: right; height: 36px;" src="assets/img/less-logo-large.png" alt="LESS CSS">
+          <p>Visit the official website at http://lesscss.org to learn more.</p>
+        </div>
+      </div>
+      <div class="row">
+        <div class="span4">
+          <h3>Variables</h3>
+          <p>Managing colors and pixel values in CSS can be a bit of a pain, usually full of copy and paste. Not with LESS though&mdash;assign colors or pixel values as variables and change them once.</p>
+        </div>
+        <div class="span4">
+          <h3>Mixins</h3>
+          <p>Those three border-radius declarations you need to make in regular ol' CSS? Now they're down to one line with the help of mixins, snippets of code you can reuse anywhere.</p>
+        </div>
+        <div class="span4">
+          <h3>Operations</h3>
+          <p>Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiple, divide, add, and subtract your way to CSS sanity.</p>
+        </div>
+      </div>
+
+
+
+      <!-- VARIABLES
+      ================================================== -->
+      <div class="page-header" id="variables">
+        <h1>Variables</h1>
+      </div>
+
+
+
+      <!-- MIXINS
+      ================================================== -->
+      <div class="page-header" id="mixins">
+        <h1>Mixins</h1>
+      </div>
+
+
+
+      <!-- OPERATIONS
+      ================================================== -->
+      <div class="page-header" id="operations">
+        <h1>Operations</h1>
+      </div>
+
+
+
+      <!-- COMPILING LESS AND BOOTSTRAP
+      ================================================== -->
+      <div class="page-header" id="compiling">
+        <h1>Compiling LESS and Bootstrap</h1>
+      </div>
+
+
+
+
 <!-- Using Bootstrap w/ Less
 ================================================== -->
 <section id="less">
diff --git a/lib/forms.less b/lib/forms.less
index 6edf29e536..b7eb150059 100644
--- a/lib/forms.less
+++ b/lib/forms.less
@@ -3,6 +3,7 @@
  * ------------------------------------------------------------- */
 
 
+
 // GENERAL STYLES
 // --------------
 
@@ -84,6 +85,7 @@ input[type=submit] {
   height: auto;
 }
 
+// Set the height of select and file controls to match text inputs
 select,
 input[type=file] {
   height: @baseLineHeight * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size
@@ -188,42 +190,47 @@ textarea[readonly] {
 
 
 
-// ERROR STATE
-// -----------
-
-// Set color of error text
-@error-text: desaturate(lighten(@red, 25%), 25%);
+// FORM FIELD FEEDBACK STATES
+// --------------------------
 
-// Style the background of control-groups with errors
-.has-error {
-  background: lighten(@red, 55%);
-  padding: (@baseLineHeight / 2) 0;
-  margin: -10px 0 10px;
-  .border-radius(4px);
+// Mixin for form field states
+.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
+  // Set the text color
   > label,
-  span.help-inline,
-  span.help-block {
-    color: @red;
+  .help-block,
+  .help-inline {
+    color: @textColor;
   }
+  // Style inputs accordingly
   input,
-  textarea,
-  select {
-    border-color: @error-text;
-    .box-shadow(0 0 3px rgba(171,41,32,.25));
+  textarea {
+    color: @textColor;
+    border-color: @borderColor;
     &:focus {
-      border-color: darken(@error-text, 10%);
-      .box-shadow(0 0 6px rgba(171,41,32,.5));
+      border-color: darken(@borderColor, 10%);
+      .box-shadow(0 0 6px lighten(@borderColor, 20%);
     }
   }
-  .input-prepend,
-  .input-append {
-    span.add-on {
-      background: lighten(@red, 50%);
-      border-color: @error-text;
-      color: darken(@error-text, 10%);
-    }
+  // Give a small background color for input-prepend/-append
+  .input-prepend .add-on,
+  .input-append .add-on {
+    color: @textColor;
+    background-color: @backgroundColor;
+    border-color: @textColor;
   }
 }
+// Error
+form .clearfix.error {
+  .formFieldState(#b94a48, #ee5f5b, lighten(#ee5f5b, 30%));
+}
+// Warning
+form .clearfix.warning {
+  .formFieldState(#c09853, #ccae64, lighten(#CCAE64, 5%));
+}
+// Success
+form .clearfix.success {
+  .formFieldState(#468847, #57a957, lighten(#57a957, 30%));
+}
 
 
 
@@ -238,7 +245,6 @@ textarea[readonly] {
   border-top: 1px solid #ddd;
 }
 
-
 // For text that needs to appear as an input but should not be an input
 .uneditable-input {
   background-color: @white;
@@ -281,6 +287,7 @@ textarea[readonly] {
 }
 
 
+
 // INLINE FIELDS
 // -------------
 
@@ -301,6 +308,7 @@ textarea[readonly] {
 }
 
 
+
 // INPUT GROUPS
 // ------------
 
@@ -353,7 +361,6 @@ textarea[readonly] {
 
 
 
-
 // SEARCH FORM
 // -----------
 
@@ -366,7 +373,6 @@ textarea[readonly] {
 // HORIZONTAL & VERTICAL FORMS
 // ---------------------------
 
-
 // Common properties
 // -----------------
 
@@ -374,17 +380,11 @@ textarea[readonly] {
 .control-group {
   margin-bottom: @baseLineHeight;
 }
-
 // Bold the labels so they stand out
 .control-group > label {
   font-weight: bold;
 }
 
-// Lists of controls (checkboxes and radios)
-.control-list {
-}
-
-
 // Horizontal-specific styles
 // --------------------------
 
diff --git a/lib/mixins.less b/lib/mixins.less
index 6d034cbcc6..1d2c68856e 100644
--- a/lib/mixins.less
+++ b/lib/mixins.less
@@ -139,7 +139,7 @@
 
 // Transform for scale and rotate
 // translate, rotate, scale -- need to finalize
-.rotation(@degrees: 5deg) {
+.rotate(@degrees: 5deg) {
   -webkit-transform: rotate(@degrees);
      -moz-transform: rotate(@degrees);
       -ms-transform: rotate(@degrees);
diff --git a/lib/patterns.less b/lib/patterns.less
index 367347e270..618b90840f 100644
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -1151,3 +1151,13 @@ input[type=submit].btn {
     }
   }
 }
+
+
+// MISC
+// ----
+.pull-right {
+  float: right;
+}
+.pull-left {
+  float: left;
+}
\ No newline at end of file