1//
2// Thumbnails
3// --------------------------------------------------
4
5
6// Note: `.thumbnails` and `.thumbnails > li` are overriden in responsive files
7
8// Make wrapper ul behave like the grid
9.thumbnails {
10  margin-left: -@gridGutterWidth;
11  list-style: none;
12  .clearfix();
13}
14// Fluid rows have no left margin
15.row-fluid .thumbnails {
16  margin-left: 0;
17}
18
19// Float li to make thumbnails appear in a row
20.thumbnails > li {
21  float: left; // Explicity set the float since we don't require .span* classes
22  margin-bottom: @baseLineHeight;
23  margin-left: @gridGutterWidth;
24}
25
26// The actual thumbnail (can be `a` or `div`)
27.thumbnail {
28  display: block;
29  padding: 4px;
30  line-height: @baseLineHeight;
31  border: 1px solid #ddd;
32  .border-radius(@baseBorderRadius);
33  .box-shadow(0 1px 3px rgba(0,0,0,.055));
34  .transition(all .2s ease-in-out);
35}
36// Add a hover/focus state for linked versions only
37a.thumbnail:hover,
38a.thumbnail:focus {
39  border-color: @linkColor;
40  .box-shadow(0 1px 4px rgba(0,105,214,.25));
41}
42
43// Images and captions
44.thumbnail > img {
45  display: block;
46  max-width: 100%;
47  margin-left: auto;
48  margin-right: auto;
49}
50.thumbnail .caption {
51  padding: 9px;
52  color: @gray;
53}
54