libs/bootstrap/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(@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 }