bootstrap/less/thumbnails.less

// stylelint-disable selector-no-qualifying-type

//
// Thumbnails
// --------------------------------------------------


// Mixin and adjust the regular image class
.thumbnail {
  display: block;
  padding: @thumbnail-padding;
  margin-bottom: @line-height-computed;
  line-height: @line-height-base;
  background-color: @thumbnail-bg;
  border: 1px solid @thumbnail-border;
  border-radius: @thumbnail-border-radius;
  .transition(border .2s ease-in-out);

  > img,
  a > img {
    &:extend(.img-responsive);
    margin-right: auto;
    margin-left: auto;
  }

  // Add a hover state for linked versions only
  a&:hover,
  a&:focus,
  a&.active {
    border-color: @link-color;
  }

  // Image captions
  .caption {
    padding: @thumbnail-caption-padding;
    color: @thumbnail-caption-color;
  }
}
Switch to inline comments for stylelint inline directives. Otherwise the comments are actually output to the CSS. 2018-09-19 04:00:22 +08:00			`// stylelint-disable selector-no-qualifying-type`
move from csslint to stylelint 2017-11-26 10:06:34 +08:00
standardize top level file comments 2012-06-29 12:46:45 +08:00			`//`
			`// Thumbnails`
			`// --------------------------------------------------`


improve dependencies for image thumbnails and thumbnail component 2013-08-19 10:24:10 +08:00			`// Mixin and adjust the regular image class`
Combine .thumbnail and .img-thumbnail into simpler selectors 2013-01-18 12:18:03 +08:00			`.thumbnail {`
Fix #10979: Don't use .img-thumbnail as a mixin for .thumbnail to avoid dupe and unnecessary styles 2013-11-30 15:19:04 +08:00			`display: block;`
			`padding: @thumbnail-padding;`
Add margin to thumbnails for proper spacing Hadn't thought about this until fixes #10137, but it makes sense I think to have margin on the bottom of thumbnails for spacing when stacking (or using different grid tiers). 2013-08-27 08:48:32 +08:00			`margin-bottom: @line-height-computed;`
Fix #10979: Don't use .img-thumbnail as a mixin for .thumbnail to avoid dupe and unnecessary styles 2013-11-30 15:19:04 +08:00			`line-height: @line-height-base;`
			`background-color: @thumbnail-bg;`
			`border: 1px solid @thumbnail-border;`
			`border-radius: @thumbnail-border-radius;`
Fixes #14443: Only transition what needs transitioning for thumbnails to avoid Safari/Chrome render bug 2014-09-02 03:48:19 +08:00			`.transition(border .2s ease-in-out);`
improve dependencies for image thumbnails and thumbnail component 2013-08-19 10:24:10 +08:00
add responsive CSS to hyperlinked images when thumbnail caption markup is used When thumbnail caption markup is used in combination with a hyperlinked image, the image is not responsive. (non-hyperlinked images are fine, like the example in the docs) Adding a selector to apply responsiveness to hyperlinked images when thumbnail captions are used. 2013-09-16 23:21:09 +08:00			`> img,`
			`a > img {`
use :extend in thumbnail Less 2014-02-07 07:39:15 +08:00			`&:extend(.img-responsive);`
Combine multiple .thumbnail > img styles 2013-10-30 17:00:28 +08:00			`margin-right: auto;`
move from csslint to stylelint 2017-11-26 10:06:34 +08:00			`margin-left: auto;`
improve dependencies for image thumbnails and thumbnail component 2013-08-19 10:24:10 +08:00			`}`

Use nesting for thumbnail styles 2013-11-02 05:09:01 +08:00			`// Add a hover state for linked versions only`
			`a&:hover,`
			`a&:focus,`
			`a&.active {`
			`border-color: @link-color;`
			`}`
fix #2572: streamline thumbnails css to allow for offsets 2012-04-01 15:59:34 +08:00
Use nesting for thumbnail styles 2013-11-02 05:09:01 +08:00			`// Image captions`
			`.caption {`
			`padding: @thumbnail-caption-padding;`
			`color: @thumbnail-caption-color;`
			`}`
start breaking down patterns.less into more distinct files, update docs for forms to use correct classes 2011-11-17 15:58:36 +08:00			`}`