diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index e9df5670c8485607806a6c4868a39e78165690e4..0ec2e4ddc4b89cc9a997bfa89d5918bdbdef9703 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 427048aa04d65df481500f50bf726599e5907411..09cd0a0dd94a46eb30836dfcf52674be90c18616 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1875,12 +1875,12 @@ For example, <code>&lt;section&gt;</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"> <img src="..." class="img-rounded"> <img src="..." class="img-circle"> -<img src="..." class="img-polaroid"> +<img src="..." class="img-thumbnail"> </pre> </section> diff --git a/docs/templates/pages/css.mustache b/docs/templates/pages/css.mustache index 4073d3d3dc3382bb114158d2d5df8fffa4c2ac92..23a26b06e4dd866d9656312210d9c31a56360879 100644 --- a/docs/templates/pages/css.mustache +++ b/docs/templates/pages/css.mustache @@ -1814,12 +1814,12 @@ For example, <code>&lt;section&gt;</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"> <img src="..." class="img-rounded"> <img src="..." class="img-circle"> -<img src="..." class="img-polaroid"> +<img src="..." class="img-thumbnail"> </pre> </section> diff --git a/less/scaffolding.less b/less/scaffolding.less index 3748b00ebfeacc1156173bc97211bdc52e214dff..7cc77b1bd5cfd92c3adeec8d3c93513673156e46 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