[Summary view] [Print] [Text view]

   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
  37  a.thumbnail:hover,
  38  a.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  }