From 1e9b4506196bd448c4038151964733ca524c10bb Mon Sep 17 00:00:00 2001
From: Mark Otto <markotto@twitter.com>
Date: Fri, 27 Jul 2012 00:06:43 -0700
Subject: [PATCH] add image styles, for now to scaffolding (soon to own file)

---
 docs/assets/css/bootstrap.css          | 22 ++++++++++++++++++++++
 docs/assets/css/docs.css               |  6 ++++++
 docs/base-css.html                     | 25 +++++++++++++++++++++++++
 docs/templates/pages/base-css.mustache | 25 +++++++++++++++++++++++++
 less/scaffolding.less                  | 22 ++++++++++++++++++++++
 5 files changed, 100 insertions(+)

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index f806ed519f..87922cf880 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -175,6 +175,28 @@ a:hover {
   text-decoration: underline;
 }
 
+.img-rounded {
+  -webkit-border-radius: 6px;
+     -moz-border-radius: 6px;
+          border-radius: 6px;
+}
+
+.img-polaroid {
+  padding: 4px;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+     -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.img-circle {
+  -webkit-border-radius: 500px;
+     -moz-border-radius: 500px;
+          border-radius: 500px;
+}
+
 .row {
   margin-left: -20px;
   *zoom: 1;
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 0897cc5c5c..f7b79e2dd1 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -632,6 +632,12 @@ form.bs-docs-example {
   line-height: 24px;
 }
 
+/* Images */
+.bs-docs-example-images img {
+  margin: 10px;
+  display: inline-block;
+}
+
 /* Tooltips */
 .bs-docs-tooltip-examples {
   text-align: center;
diff --git a/docs/base-css.html b/docs/base-css.html
index 9aa0120833..4f0df407d7 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -92,6 +92,7 @@
           <li><a href="#tables">Tables <i class="icon-chevron-right"></i></a></li>
           <li><a href="#forms">Forms <i class="icon-chevron-right"></i></a></li>
           <li><a href="#buttons">Buttons <i class="icon-chevron-right"></i></a></li>
+          <li><a href="#images">Images <i class="icon-chevron-right"></i></a></li>
           <li><a href="#icons">Icons by Glyphicons <i class="icon-chevron-right"></i></a></li>
         </ul>
       </div>
@@ -1517,6 +1518,30 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
 
 
 
+        <!-- Images
+        ================================================== -->
+        <section id="images">
+          <div class="page-header">
+            <h1>Images</h1>
+          </div>
+
+          <p>Simple classes to easily style images in any project.</p>
+          <div class="bs-docs-example bs-docs-example-images">
+            <img src="http://placehold.it/140x140" class="img-rounded">
+            <img src="http://placehold.it/140x140" class="img-circle">
+            <img src="http://placehold.it/140x140" class="img-polaroid">
+          </div>
+<pre class="prettyprint linenums">
+  &lt;img src="..." class="img-rounded"&gt;
+  &lt;img src="..." class="img-circle"&gt;
+  &lt;img src="..." class="img-polaroid"&gt;
+</pre>
+
+
+        </section>
+
+
+
         <!-- Icons
         ================================================== -->
         <section id="icons">
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index fa85786724..a2685aab37 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -21,6 +21,7 @@
           <li><a href="#tables">{{_i}}Tables{{/i}} <i class="icon-chevron-right"></i></a></li>
           <li><a href="#forms">{{_i}}Forms{{/i}} <i class="icon-chevron-right"></i></a></li>
           <li><a href="#buttons">{{_i}}Buttons{{/i}} <i class="icon-chevron-right"></i></a></li>
+          <li><a href="#images">{{_i}}Images{{/i}} <i class="icon-chevron-right"></i></a></li>
           <li><a href="#icons">{{_i}}Icons by Glyphicons{{/i}} <i class="icon-chevron-right"></i></a></li>
         </ul>
       </div>
@@ -1454,6 +1455,30 @@
 
 
 
+        <!-- Images
+        ================================================== -->
+        <section id="images">
+          <div class="page-header">
+            <h1>{{_i}}Images{{/i}}</h1>
+          </div>
+
+          <p>Simple classes to easily style images in any project.</p>
+          <div class="bs-docs-example bs-docs-example-images">
+            <img src="http://placehold.it/140x140" class="img-rounded">
+            <img src="http://placehold.it/140x140" class="img-circle">
+            <img src="http://placehold.it/140x140" class="img-polaroid">
+          </div>
+<pre class="prettyprint linenums">
+  &lt;img src="..." class="img-rounded"&gt;
+  &lt;img src="..." class="img-circle"&gt;
+  &lt;img src="..." class="img-polaroid"&gt;
+</pre>
+
+
+        </section>
+
+
+
         <!-- Icons
         ================================================== -->
         <section id="icons">
diff --git a/less/scaffolding.less b/less/scaffolding.less
index a218c54786..fe63c7cacd 100644
--- a/less/scaffolding.less
+++ b/less/scaffolding.less
@@ -27,3 +27,25 @@ a:hover {
   color: @linkColorHover;
   text-decoration: underline;
 }
+
+
+// Images
+// -------------------------
+
+.img-rounded {
+  .border-radius(6px);
+}
+
+.img-polaroid {
+  padding: 4px;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0,0,0,.2);
+  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.1);
+     -moz-box-shadow: 0 1px 3px rgba(0,0,0,.1);
+          box-shadow: 0 1px 3px rgba(0,0,0,.1);
+}
+
+.img-circle {
+  .border-radius(500px);
+}
\ No newline at end of file