From 97975c5fcf3f671c26d1688f54c8d65bba41c87c Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Thu, 17 Jan 2013 15:36:36 -0800
Subject: [PATCH] Readd focused example of inputs to docs; clean up alerts
section
---
docs/assets/css/docs.css | 13 ++++++++++
docs/components.html | 32 +++---------------------
docs/css.html | 4 +--
docs/templates/pages/components.mustache | 32 +++---------------------
docs/templates/pages/css.mustache | 4 +--
5 files changed, 23 insertions(+), 62 deletions(-)
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 7ab9f58429..b1369c96d8 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -443,6 +443,19 @@ section > ul li {
+/* Misc docs stuff
+-------------------------------------------------- */
+
+/* Pseudo :focus state for showing how it looks in the docs */
+input.focused {
+ border-color: rgba(82,168,236,.8);
+ outline: 0;
+ outline: thin dotted \9; /* IE6-9 */
+ -moz-box-shadow: 0 0 8px rgba(82,168,236,.6);
+ box-shadow: 0 0 8px rgba(82,168,236,.6);
+}
+
+
/* Responsive variations
-------------------------------------------------- */
diff --git a/docs/components.html b/docs/components.html
index 76035431a2..1d4db2f8f3 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1578,9 +1578,6 @@
<p>Use the <a href="./javascript.html#alerts">alerts jQuery plugin</a> for quick and easy dismissal of alerts.</p>
- <hr class="bs-docs-separator">
-
-
<h2>Options</h2>
<p>For longer messages, increase the padding on the top and bottom of the alert wrapper by adding <code>.alert-block</code>.</p>
<div class="bs-docs-example">
@@ -1599,51 +1596,28 @@
</pre>
- <hr class="bs-docs-separator">
-
-
<h2>Contextual alternatives</h2>
<p>Add optional classes to change an alert's connotation.</p>
- <h3>Error or danger</h3>
<div class="bs-docs-example">
<div class="alert alert-error">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
- </div>
-<pre class="prettyprint linenums">
-<div class="alert alert-error">
- ...
-</div>
-</pre>
-
- <h3>Success</h3>
- <div class="bs-docs-example">
<div class="alert alert-success">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Well done!</strong> You successfully read this important alert message.
</div>
- </div>
-<pre class="prettyprint linenums">
-<div class="alert alert-success">
- ...
-</div>
-</pre>
-
- <h3>Information</h3>
- <div class="bs-docs-example">
<div class="alert alert-info">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
</div>
<pre class="prettyprint linenums">
-<div class="alert alert-info">
- ...
-</div>
+<div class="alert alert-error">... </div>
+<div class="alert alert-success">...</div>
+<div class="alert alert-info">...</div>
</pre>
-
</section>
diff --git a/docs/css.html b/docs/css.html
index 97d25136d7..9d215b5bd8 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -1590,10 +1590,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped
<h3 id="forms-input-focus">Input focus</h3>
<p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
<form class="bs-docs-example form-inline">
- <input class="input-xlarge focused" id="focusedInput" type="text" value="This is focused...">
+ <input class="focused" id="focusedInput" type="text" value="This is focused...">
</form>
<pre class="prettyprint linenums">
-<input class="input-xlarge" id="focusedInput" type="text" value="This is focused...">
+<input id="focusedInput" type="text" value="This is focused...">
</pre>
<h3 id="forms-invalid-inputs">Invalid inputs</h3>
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 03110beacc..0172ada8a2 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -1509,9 +1509,6 @@
<p>Use the <a href="./javascript.html#alerts">alerts jQuery plugin</a> for quick and easy dismissal of alerts.</p>
- <hr class="bs-docs-separator">
-
-
<h2>Options</h2>
<p>For longer messages, increase the padding on the top and bottom of the alert wrapper by adding <code>.alert-block</code>.</p>
<div class="bs-docs-example">
@@ -1530,51 +1527,28 @@
</pre>
- <hr class="bs-docs-separator">
-
-
<h2>Contextual alternatives</h2>
<p>Add optional classes to change an alert's connotation.</p>
- <h3>Error or danger</h3>
<div class="bs-docs-example">
<div class="alert alert-error">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
- </div>
-<pre class="prettyprint linenums">
-<div class="alert alert-error">
- ...
-</div>
-</pre>
-
- <h3>Success</h3>
- <div class="bs-docs-example">
<div class="alert alert-success">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Well done!</strong> You successfully read this important alert message.
</div>
- </div>
-<pre class="prettyprint linenums">
-<div class="alert alert-success">
- ...
-</div>
-</pre>
-
- <h3>Information</h3>
- <div class="bs-docs-example">
<div class="alert alert-info">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
</div>
<pre class="prettyprint linenums">
-<div class="alert alert-info">
- ...
-</div>
+<div class="alert alert-error">... </div>
+<div class="alert alert-success">...</div>
+<div class="alert alert-info">...</div>
</pre>
-
</section>
diff --git a/docs/templates/pages/css.mustache b/docs/templates/pages/css.mustache
index 2190d781d3..682bda94bd 100644
--- a/docs/templates/pages/css.mustache
+++ b/docs/templates/pages/css.mustache
@@ -1529,10 +1529,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped
<h3 id="forms-input-focus">Input focus</h3>
<p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
<form class="bs-docs-example form-inline">
- <input class="input-xlarge focused" id="focusedInput" type="text" value="This is focused...">
+ <input class="focused" id="focusedInput" type="text" value="This is focused...">
</form>
<pre class="prettyprint linenums">
-<input class="input-xlarge" id="focusedInput" type="text" value="This is focused...">
+<input id="focusedInput" type="text" value="This is focused...">
</pre>
<h3 id="forms-invalid-inputs">Invalid inputs</h3>
--
GitLab