Change .img-polaroid to .img-thumbnail

* Same code, but different classes was confusing
* Now .img-thumbnail just extends .thumbnail

4 files changed, 18 insertions, 17 deletions

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index e9df5670c..0ec2e4ddc 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -262,13 +262,17 @@ img {
   border-radius: 6px;
 }
 
-.img-polaroid {
+.img-thumbnail {
+  display: block;
+  display: inline-block;
   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);
-          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  line-height: 20px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  -webkit-transition: all 0.2s ease-in-out;
+     -moz-transition: all 0.2s ease-in-out;
+       -o-transition: all 0.2s ease-in-out;
+          transition: all 0.2s ease-in-out;
 }
 
 .img-circle {
diff --git a/docs/css.html b/docs/css.html
index 427048aa0..09cd0a0dd 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -1875,12 +1875,12 @@ For example, <code><section></code> should be wrapped
           <div class="bs-docs-example bs-docs-example-images">
             <img data-src="holder.js/140x140" class="img-rounded">
             <img data-src="holder.js/140x140" class="img-circle">
-            <img data-src="holder.js/140x140" class="img-polaroid">
+            <img data-src="holder.js/140x140" class="img-thumbnail">
           </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;
+&lt;img src="..." class="img-thumbnail"&gt;
 </pre>
 
         </section>
diff --git a/docs/templates/pages/css.mustache b/docs/templates/pages/css.mustache
index 4073d3d3d..23a26b06e 100644
--- a/docs/templates/pages/css.mustache
+++ b/docs/templates/pages/css.mustache
@@ -1814,12 +1814,12 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
           <div class="bs-docs-example bs-docs-example-images">
             <img data-src="holder.js/140x140" class="img-rounded">
             <img data-src="holder.js/140x140" class="img-circle">
-            <img data-src="holder.js/140x140" class="img-polaroid">
+            <img data-src="holder.js/140x140" class="img-thumbnail">
           </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;
+&lt;img src="..." class="img-thumbnail"&gt;
 </pre>
 
         </section>
diff --git a/less/scaffolding.less b/less/scaffolding.less
index 3748b00eb..7cc77b1bd 100644
--- a/less/scaffolding.less
+++ b/less/scaffolding.less
@@ -77,13 +77,10 @@ img {
   border-radius: 6px;
 }
 
-// Add polaroid-esque trim
-.img-polaroid {
-  padding: 4px;
-  background-color: #fff;
-  border: 1px solid #ccc;
-  border: 1px solid rgba(0,0,0,.2);
-  .box-shadow(0 1px 3px rgba(0,0,0,.1));
+// Image thumbnails
+.img-thumbnail {
+  .thumbnail();
+  display: inline-block;
 }
 
 // Perfect circle