fix up docs css for responsive and subnav, fix forms error states

6ab56051 · Mark Otto · f2fe2b17 · 6ab56051 · 6ab56051 · 6ab56051
Commit 6ab56051 authored Jan 24, 2012 by Mark Otto
9 changed files
--- 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: Tue Jan 24 21:10:54 PST 2012
+ * Date: Tue Jan 24 23:35:08 PST 2012
 */
 article,
 aside,
@@ -253,6 +253,12 @@ p small {
  font-size: 11px;
  color: #999999;
 }
+.lead {
+  margin-bottom: 18px;
+  font-size: 20px;
+  font-weight: 200;
+  line-height: 27px;
+}
 h1,
 h2,
 h3,
@@ -419,7 +425,6 @@ code, pre {
 }
 code {
  padding: 3px 4px;
-  background-color: #fee9cc;
  color: #d14;
  background-color: #f7f7f9;
  border: 1px solid #e1e1e8;
@@ -706,13 +711,13 @@ textarea[readonly] {
 }
 .control-group.warning input, .control-group.warning textarea {
  color: #c09853;
-  border-color: #f3edd2;
+  border-color: #c09853;
 }
 .control-group.warning input:focus, .control-group.warning textarea:focus {
-  border-color: #e8ddaa;
+  border-color: #a47e3c;
-  -webkit-box-shadow: 0 0 6px #ffffff;
+  -webkit-box-shadow: 0 0 6px #dbc59e;
-  -moz-box-shadow: 0 0 6px #ffffff;
+  -moz-box-shadow: 0 0 6px #dbc59e;
-  box-shadow: 0 0 6px #ffffff;
+  box-shadow: 0 0 6px #dbc59e;
 }
 .control-group.warning .input-prepend .add-on, .control-group.warning .input-append .add-on {
  color: #c09853;
@@ -724,13 +729,13 @@ textarea[readonly] {
 }
 .control-group.error input, .control-group.error textarea {
  color: #b94a48;
-  border-color: #e9c7c7;
+  border-color: #b94a48;
 }
 .control-group.error input:focus, .control-group.error textarea:focus {
-  border-color: #dba2a2;
+  border-color: #953b39;
-  -webkit-box-shadow: 0 0 6px #ffffff;
+  -webkit-box-shadow: 0 0 6px #d59392;
-  -moz-box-shadow: 0 0 6px #ffffff;
+  -moz-box-shadow: 0 0 6px #d59392;
-  box-shadow: 0 0 6px #ffffff;
+  box-shadow: 0 0 6px #d59392;
 }
 .control-group.error .input-prepend .add-on, .control-group.error .input-append .add-on {
  color: #b94a48;
@@ -742,13 +747,13 @@ textarea[readonly] {
 }
 .control-group.success input, .control-group.success textarea {
  color: #468847;
-  border-color: #cfe8c4;
+  border-color: #468847;
 }
 .control-group.success input:focus, .control-group.success textarea:focus {
-  border-color: #b1da9f;
+  border-color: #356635;
-  -webkit-box-shadow: 0 0 6px #ffffff;
+  -webkit-box-shadow: 0 0 6px #7aba7b;
-  -moz-box-shadow: 0 0 6px #ffffff;
+  -moz-box-shadow: 0 0 6px #7aba7b;
-  box-shadow: 0 0 6px #ffffff;
+  box-shadow: 0 0 6px #7aba7b;
 }
 .control-group.success .input-prepend .add-on, .control-group.success .input-append .add-on {
  color: #468847;

--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -54,6 +54,7 @@ a{color:#0088cc;text-decoration:none;}a:hover{color:#005580;text-decoration:unde
 .offset10{margin-left:820px;}
 .offset11{margin-left:900px;}
 p{margin:0 0 9px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;}p small{font-size:11px;color:#999999;}
+.lead{margin-bottom:18px;font-size:20px;font-weight:200;line-height:27px;}
 h1,h2,h3,h4,h5,h6{margin:0;font-weight:bold;color:#333333;text-rendering:optimizelegibility;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{font-weight:normal;color:#999999;}
 h1{font-size:30px;line-height:36px;}h1 small{font-size:18px;}
 h2{font-size:24px;line-height:36px;}h2 small{font-size:18px;}
@@ -83,7 +84,7 @@ blockquote.pull-right{float:right;padding-left:0;padding-right:15px;border-left:
 q:before,q:after,blockquote:before,blockquote:after{content:"";}
 address{display:block;margin-bottom:18px;line-height:18px;font-style:normal;}
 code,pre{padding:0 3px 2px;font-family:Menlo,Monaco,"Courier New",monospace;font-size:12px;color:#333333;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
-code{padding:3px 4px;background-color:#fee9cc;color:#d14;background-color:#f7f7f9;border:1px solid #e1e1e8;}
+code{padding:3px 4px;color:#d14;background-color:#f7f7f9;border:1px solid #e1e1e8;}
 pre{display:block;padding:8.5px;margin:0 0 9px;font-size:12px;line-height:18px;background-color:#f5f5f5;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;white-space:pre;white-space:pre-wrap;word-break:break-all;}pre.prettyprint{margin-bottom:18px;}
 pre code{padding:0;background-color:transparent;}
 small{font-size:100%;}
@@ -143,13 +144,13 @@ select.span11{width:870px;}
 select.span12{width:950px;}
 input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f5f5f5;border-color:#ddd;cursor:not-allowed;}
 .control-group.warning>label,.control-group.warning .help-block,.control-group.warning .help-inline{color:#c09853;}
-.control-group.warning input,.control-group.warning textarea{color:#c09853;border-color:#f3edd2;}.control-group.warning input:focus,.control-group.warning textarea:focus{border-color:#e8ddaa;-webkit-box-shadow:0 0 6px #ffffff;-moz-box-shadow:0 0 6px #ffffff;box-shadow:0 0 6px #ffffff;}
+.control-group.warning input,.control-group.warning textarea{color:#c09853;border-color:#c09853;}.control-group.warning input:focus,.control-group.warning textarea:focus{border-color:#a47e3c;-webkit-box-shadow:0 0 6px #dbc59e;-moz-box-shadow:0 0 6px #dbc59e;box-shadow:0 0 6px #dbc59e;}
 .control-group.warning .input-prepend .add-on,.control-group.warning .input-append .add-on{color:#c09853;background-color:#fcf8e3;border-color:#c09853;}
 .control-group.error>label,.control-group.error .help-block,.control-group.error .help-inline{color:#b94a48;}
-.control-group.error input,.control-group.error textarea{color:#b94a48;border-color:#e9c7c7;}.control-group.error input:focus,.control-group.error textarea:focus{border-color:#dba2a2;-webkit-box-shadow:0 0 6px #ffffff;-moz-box-shadow:0 0 6px #ffffff;box-shadow:0 0 6px #ffffff;}
+.control-group.error input,.control-group.error textarea{color:#b94a48;border-color:#b94a48;}.control-group.error input:focus,.control-group.error textarea:focus{border-color:#953b39;-webkit-box-shadow:0 0 6px #d59392;-moz-box-shadow:0 0 6px #d59392;box-shadow:0 0 6px #d59392;}
 .control-group.error .input-prepend .add-on,.control-group.error .input-append .add-on{color:#b94a48;background-color:#f2dede;border-color:#b94a48;}
 .control-group.success>label,.control-group.success .help-block,.control-group.success .help-inline{color:#468847;}
-.control-group.success input,.control-group.success textarea{color:#468847;border-color:#cfe8c4;}.control-group.success input:focus,.control-group.success textarea:focus{border-color:#b1da9f;-webkit-box-shadow:0 0 6px #ffffff;-moz-box-shadow:0 0 6px #ffffff;box-shadow:0 0 6px #ffffff;}
+.control-group.success input,.control-group.success textarea{color:#468847;border-color:#468847;}.control-group.success input:focus,.control-group.success textarea:focus{border-color:#356635;-webkit-box-shadow:0 0 6px #7aba7b;-moz-box-shadow:0 0 6px #7aba7b;box-shadow:0 0 6px #7aba7b;}
 .control-group.success .input-prepend .add-on,.control-group.success .input-append .add-on{color:#468847;background-color:#dff0d8;border-color:#468847;}
 input:focus:required:invalid,textarea:focus:required:invalid,select:focus:required:invalid{color:#b94a48;border-color:#ee5f5b;}input:focus:required:invalid:focus,textarea:focus:required:invalid:focus,select:focus:required:invalid: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-actions{padding:17px 20px 18px;margin-top:18px;margin-bottom:18px;background-color:#f5f5f5;border-top:1px solid #ddd;}

--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -179,25 +179,27 @@ section {
  border-right: 0;
 }
-/* Fixed subnav on scroll */
+/* Fixed subnav on scroll, but only for 940px and up (sorry IE!) */
-.subnav-fixed {
+@media (min-width: 940px) {
-  position: fixed;
+  .subnav-fixed {
-  top: 40px;
+    position: fixed;
-  left: 0;
+    top: 40px;
-  right: 0;
+    left: 0;
-  z-index: 1030;
+    right: 0;
-  border-color: #d5d5d5;
+    z-index: 1030;
-  border-width: 0 0 1px; /* drop the border on the fixed edges */
+    border-color: #d5d5d5;
-  -webkit-border-radius: 0;
+    border-width: 0 0 1px; /* drop the border on the fixed edges */
-     -moz-border-radius: 0;
+    -webkit-border-radius: 0;
-          border-radius: 0;
+       -moz-border-radius: 0;
-  -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
+            border-radius: 0;
-     -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
+    -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
-          box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
+       -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
-}
+            box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
-.subnav-fixed .nav {
+  }
-  width: 940px;
+  .subnav-fixed .nav {
-  margin: 0 auto;
+    width: 940px;
+    margin: 0 auto;
+  }
 }
@@ -439,6 +441,72 @@ section {
 }
+/* CSS Chop Shop
+-------------------------------------------------- */
+.builder {
+}
+.builder .span2 {
+  width: 160px;
+}
+.builder ul {
+  margin: 0;
+  list-style: none;
+}
+.builder .tabs {
+  margin-right: 0;
+}
+.builder .tabs a {
+  width: 160px;
+  padding: 14px;
+  font-size: 14px;
+}
+.builder .tab-content {
+  padding: 19px;
+  margin-left: 189px;
+  border: 1px solid #e5e5e5;
+  -webkit-border-radius: 0 4px 4px 4px;
+     -moz-border-radius: 0 4px 4px 4px;
+          border-radius: 0 4px 4px 4px;
+}
+/* Space out h3s when following a section */
+.builder input + h3,
+.builder .checkbox + h3 {
+  margin-top: 9px;
+}
+/* Fields for variables */
+.builder input + h3 {
+  margin-top: 9px;
+}
+.builder #variables label {
+  margin-bottom: 2px;
+  color: #555;
+}
+.builder input[type=text] {
+  margin-bottom: 9px;
+  font-family: Menlo, Monaco, "Courier New", monospace;
+  font-size: 12px;
+  color: #d14;
+  background-color: #f7f7f9;
+}
+.builder input[type=text]:focus {
+  background-color: #fff;
+}
+.builder-actions {
+  margin-top: 18px;
+  padding-top: 18px;
+  border-top: 1px solid #eee;
+}
+.builder-actions .toggle-all {
+  float: right;
+  line-height: 36px;
+}
 /* Misc
 -------------------------------------------------- */
@@ -560,14 +628,6 @@ form.well {
    margin-top: 18px;
  }
-  /* Subnav */
-  .subnav {
-    background: #fff; /* whole background property since we use a background-image for gradient */
-  }
-  .subnav .nav > li {
-    float: none;
-  }
  /* Adjust the jumbotron */
  .jumbotron h1,
  .jumbotron p {
@@ -630,10 +690,14 @@ form.well {
    z-index: auto;
    width: auto;
    height: auto;
+    background: #fff; /* whole background property since we use a background-image for gradient */
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
  }
+  .subnav .nav > li {
+    float: none;
+  }
  .subnav .nav a {
    border: 0;
  }
@@ -683,7 +747,6 @@ form.well {
  .jumbotron h1 {
    font-size: 54px;
  }
  .jumbotron h1,
  .jumbotron p {
    margin-right: 0;

--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -368,7 +368,7 @@
      <tr>
        <td><code>&lt;pre class="prettyprint"&gt;</code></td>
        <td>
-          <p>Using the google-code-prettify library, you're blocks of code get a slightly different visual style and automatic syntax highlighting. You can also add an additional class to add line numbers.</p>
+          <p>Using the google-code-prettify library, your blocks of code get a slightly different visual style and automatic syntax highlighting. You can also add an additional class to add line numbers.</p>
 <pre class="prettyprint">&lt;div&gt;
  &lt;h1&gt;Heading&lt;/h1&gt;
  &lt;p&gt;Something right here…&lt;/p&gt;

--- a/docs/less.html
+++ b/docs/less.html
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -308,7 +308,7 @@
      <tr>
        <td><code>&lt;pre class="prettyprint"&gt;</code></td>
        <td>
-          <p>{{_i}}Using the google-code-prettify library, you're blocks of code get a slightly different visual style and automatic syntax highlighting. You can also add an additional class to add line numbers.{{/i}}</p>
+          <p>{{_i}}Using the google-code-prettify library, your blocks of code get a slightly different visual style and automatic syntax highlighting. You can also add an additional class to add line numbers.{{/i}}</p>
 <pre class="prettyprint">&lt;div&gt;
  &lt;h1&gt;{{_i}}Heading{{/i}}&lt;/h1&gt;
  &lt;p&gt;{{_i}}Something right here…{{/i}}&lt;/p&gt;

--- a/docs/templates/pages/less.mustache
+++ b/docs/templates/pages/less.mustache
--- a/lib/forms.less
+++ b/lib/forms.less
@@ -297,15 +297,15 @@ textarea[readonly] {
 }
 // Warning
 .control-group.warning {
-  .formFieldState(@warningText, @warningBorder, @warningBackground);
+  .formFieldState(@warningText, @warningText, @warningBackground);
 }
 // Error
 .control-group.error {
-  .formFieldState(@errorText, @errorBorder, @errorBackground);
+  .formFieldState(@errorText, @errorText, @errorBackground);
 }
 // Success
 .control-group.success {
-  .formFieldState(@successText, @successBorder, @successBackground);
+  .formFieldState(@successText, @successText, @successBackground);
 }
 // HTML5 invalid states

--- a/lib/type.less
+++ b/lib/type.less
@@ -16,6 +16,12 @@ p {
    color: @grayLight;
  }
 }
+.lead {
+  margin-bottom: @baseLineHeight;
+  font-size: 20px;
+  font-weight: 200;
+  line-height: @baseLineHeight * 1.5;
+}
 // HEADINGS
 // --------
@@ -202,7 +208,6 @@ pre {
 }
 code {
  padding: 3px 4px;
-  background-color: lighten(@orange, 40%);
  color: #d14;
  background-color: #f7f7f9;
  border: 1px solid #e1e1e8;