public/less/thumbnails.less

   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(4px);
  33   .box-shadow(0 1px 3px rgba(0,0,0,.055));
  34   .transition(all .2s ease-in-out);
  35 }
  36 // Add a hover state for linked versions only
  37 a.thumbnail:hover {
  38   border-color: @linkColor;
  39   .box-shadow(0 1px 4px rgba(0,105,214,.25));
  40 }
  41
  42 // Images and captions
  43 .thumbnail > img {
  44   display: block;
  45   max-width: 100%;
  46   margin-left: auto;
  47   margin-right: auto;
  48 }
  49 .thumbnail .caption {
  50   padding: 9px;
  51   color: @gray;
  52 }