updated docs, fixed language, added copy-code js for selecting text on focus

588b2da9 · Mark Otto · 6aae3930 · 588b2da9 · 588b2da9 · 588b2da9
Commit 588b2da9 authored Jun 30, 2011 by Mark Otto
8 changed files
--- a/bootstrap-1.0.0.css
+++ b/bootstrap-1.0.0.css
@@ -5,7 +5,7 @@
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
- * Designed and built @twitter by @mdo and @fat, like bosses.
+ * Designed and built with all the love in the world @twitter by @mdo and @fat.
 */
 /*
 * Reset.less
@@ -626,7 +626,7 @@ form .uneditable-input {
  line-height: 18px;
  height: 18px;
  color: #808080;
-  border: 1px solid #bbb;
+  border: 1px solid #ccc;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
@@ -653,13 +653,16 @@ form textarea {
  -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
  -moz-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);
 }
 form input[type=text]:focus, form input[type=password]:focus, form textarea:focus {
  outline: none;
-  border-color: rgba(82, 168, 236, 0.75);
+  border-color: rgba(82, 168, 236, 0.8);
-  -webkit-box-shadow: 0 0 8px rgba(82, 168, 236, 0.5);
+  -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: 0 0 8px rgba(82, 168, 236, 0.5);
+  -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
-  box-shadow: 0 0 8px rgba(82, 168, 236, 0.5);
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
 }
 form div.error {
  background: #fae5e3;

--- a/bootstrap-1.0.0.min.css
+++ b/bootstrap-1.0.0.min.css
@@ -72,12 +72,12 @@ form label,form input,form select,form textarea{font-family:"Helvetica Neue",Hel
 form label{padding-top:6px;font-size:13px;line-height:18px;float:left;width:130px;text-align:right;color:#404040;}
 form div.input{margin-left:150px;}
 form input[type=checkbox],form input[type=radio]{cursor:pointer;}
-form input[type=text],form input[type=password],form textarea,form select,form .uneditable-input{display:inline-block;width:210px;margin:0;padding:4px;font-size:13px;line-height:18px;height:18px;color:#808080;border:1px solid #bbb;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
+form input[type=text],form input[type=password],form textarea,form select,form .uneditable-input{display:inline-block;width:210px;margin:0;padding:4px;font-size:13px;line-height:18px;height:18px;color:#808080;border:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
 form select,form input[type=file]{height:27px;line-height:27px;}
 form textarea{height:auto;}
 form .uneditable-input{background-color:#eee;display:block;border-color:#ccc;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.075);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.075);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.075);}
-form input[type=text],form input[type=password],form select,form textarea{-webkit-transition:border linear 0.2s,box-shadow linear 0.2s;-moz-transition:border linear 0.2s,box-shadow linear 0.2s;transition:border linear 0.2s,box-shadow linear 0.2s;}
+form input[type=text],form input[type=password],form select,form textarea{-webkit-transition:border linear 0.2s,box-shadow linear 0.2s;-moz-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);}
-form input[type=text]:focus,form input[type=password]:focus,form textarea:focus{outline:none;border-color:rgba(82, 168, 236, 0.75);-webkit-box-shadow:0 0 8px rgba(82, 168, 236, 0.5);-moz-box-shadow:0 0 8px rgba(82, 168, 236, 0.5);box-shadow:0 0 8px rgba(82, 168, 236, 0.5);}
+form input[type=text]:focus,form input[type=password]:focus,form textarea:focus{outline:none;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);}
 form div.error{background:#fae5e3;padding:10px 0;margin:-10px 0 10px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}form div.error>label,form div.error span.help-inline,form div.error span.help-block{color:#9d261d;}
 form div.error input[type=text],form div.error input[type=password],form div.error textarea{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 div.error input[type=text]:focus,form div.error input[type=password]:focus,form div.error textarea: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 div.error div.input-prepend span.add-on,form div.error div.input-append span.add-on{background:#f4c8c5;border-color:#c87872;color:#b9554d;}

--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -89,7 +89,7 @@ div.quickstart div.row {
 }
 div.quickstart div.columns {
  width: 285px;
-  height: 100px;
+  height: 117px;
  margin-left: 0;
  padding: 17px 20px 26px;
  border-left: 1px solid #eee;
@@ -114,15 +114,11 @@ div.quickstart h6 {
 div.quickstart form textarea {
  display: block;
  width: 275px;
-  height: 21px;
+  height: auto;
  margin: 0 0 9px;
  line-height: 21px;
  white-space: nowrap;
  overflow: hidden;
-  border-color: #ddd;
-  -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
-  -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
-  box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
 }
 #footer {
  margin-top: 80px;

--- a/docs/assets/js/application.js
+++ b/docs/assets/js/application.js
@@ -35,6 +35,15 @@ $(document).ready(function(){
  });
+  // Copy code blocks in docs
+  $(".copy-code").focus(function() {
+    $(this).select();
+  });
+  $(".copy-code").mouseup(function(e) {
+    e.preventDefault();
+  });
  // scroll spyer
  var activeTarget,
      $window = $(window),

--- a/docs/index.html
+++ b/docs/index.html
@@ -42,27 +42,12 @@
    <div id="masthead">
      <div class="inner">
        <div class="container">
-<!--
+          <h1>Twitter Bootstrap</h1>
-          <div class="row">
+          <p class="lead">
-            <div class="span11 columns">
+            Bootstrap is a toolkit from Twitter designed to kickstart development of websites and apps.<br />
-->
+            It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.<br />
-              <h1>Twitter Bootstrap</h1>
+          </p>
-              <p class="lead">
+          <p><strong>Nerd alert:</strong> Bootstrap is <a href="#less" title="Read about using Bootstrap with LESS">built with LESS</a> and was designed to work out of the gate with only modern browsers in mind.</p>
-                Bootstrap is a toolkit from Twitter designed to kickstart development of websites and apps.<br />
-                It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.<br />
-              </p>
-              <p><strong>Nerd alert:</strong> Bootstrap is <a href="#less" title="Read about using Bootstrap with LESS">built with LESS</a> and was designed to work out of the gate with only modern browsers in mind.</p>
-<!--
-            </div>
-            <div class="span5 columns">
-              <a href="" class="btn large primary">Download Bootstrap ZIP &raquo;</a>
-              <small>
-                <a href="">Visit project page on Github &raquo;</a><br />
-                (Current version: 1.0.0)
-              </small>
-            </div>
-          </div>
-->
        </div> <!-- /container -->
      </div>
    </div>
@@ -74,15 +59,15 @@
            <h6>Hotlink the CSS</h6>
            <p>For the quickest and easiest start, just copy this snippet into your webpage.</p>
            <form>
-              <textarea>&lt;link type="text/css" href="http://twitter.github.com/bootstrap-1.0.0.css</textarea>
+              <textarea class="copy-code" rows="1">&lt;link type="text/css" href="http://twitter.github.com/bootstrap-1.0.0.css</textarea>
            </form>
          </div>
          <div class="span5 columns">
            <h6>Use it with LESS</h6>
            <p>A fan of using LESS.js? No problem, just clone the repo and add these lines:</p>
            <form>
-              <textarea>&lt;link type="text/css" href="http://twitter.github.com/bootstrap-1.0.0.css
+              <textarea class="copy-code" rows="2">&lt;link rel="stylesheet/less" type="text/css" href="http://twitter.github.com/bootstrap.less&gt;
-&lt;link type="text/css" href="http://twitter.github.com/bootstrap-1.0.0.css</textarea>
+&lt;script src="less.js"&gt;&lt;/script&gt;</textarea>
            </form>
          </div>
          <div class="span5 columns">

--- a/lib/bootstrap.less
+++ b/lib/bootstrap.less
@@ -5,7 +5,7 @@
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
- * Designed and built @twitter by @mdo and @fat, like bosses.
+ * Designed and built with all the love in the world @twitter by @mdo and @fat.
 */

--- a/lib/forms.less
+++ b/lib/forms.less
@@ -62,7 +62,7 @@ form {
    line-height: @baseline;
    height: @baseline;
    color: @gray;
-    border: 1px solid #bbb;
+    border: 1px solid #ccc;
    .border-radius(3px);
  }
  select,
@@ -85,13 +85,15 @@ form {
  select, textarea {
    @transition: border linear .2s, box-shadow linear .2s;
    .transition(@transition);
+    .box-shadow(inset 0 1px 3px rgba(0,0,0,.1));
  }
  input[type=text]:focus,
  input[type=password]:focus,
  textarea:focus {
    outline: none;
-    border-color: rgba(82,168,236,.75);
+    border-color: rgba(82,168,236,.8);
-    .box-shadow(0 0 8px rgba(82,168,236,.5));
+    @shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
+    .box-shadow(@shadow);
  }
  // Error styles
  div.error {

--- a/lib/scaffolding.less
+++ b/lib/scaffolding.less
@@ -103,16 +103,13 @@ a {
    background-image: none;
    .opacity(65);
    cursor: default;
-  }
-  &:focus {
  }
  &:active {
    @shadow: inset 0 3px 7px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.05);
    .box-shadow(@shadow);
  }
 }
-// Help Firefox not be a douche about adding extra padding to buttons
+// Help Firefox not be a jerk about adding extra padding to buttons
 button.btn,
 input[type=submit].btn {
  &::-moz-focus-inner {