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