thumbnails.less 1.0 KB

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