diff options
Diffstat (limited to 'css/bootstrap/thumbnails.less')
-rw-r--r-- | css/bootstrap/thumbnails.less | 68 |
1 files changed, 26 insertions, 42 deletions
diff --git a/css/bootstrap/thumbnails.less b/css/bootstrap/thumbnails.less index 91b75f7..c428920 100644 --- a/css/bootstrap/thumbnails.less +++ b/css/bootstrap/thumbnails.less @@ -3,50 +3,34 @@ // -------------------------------------------------- -// Note: `.thumbnails` and `.thumbnails > li` are overriden in responsive files - -// Make wrapper ul behave like the grid -.thumbnails { - margin-left: -@gridGutterWidth; - list-style: none; - .clearfix(); -} -// Fluid rows have no left margin -.row-fluid .thumbnails { - margin-left: 0; -} - -// Float li to make thumbnails appear in a row -.thumbnails > li { - float: left; // Explicity set the float since we don't require .span* classes - margin-bottom: @baseLineHeight; - margin-left: @gridGutterWidth; -} - -// The actual thumbnail (can be `a` or `div`) +// Mixin and adjust the regular image class .thumbnail { display: block; - padding: 4px; - line-height: @baseLineHeight; - border: 1px solid #ddd; - .border-radius(4px); - .box-shadow(0 1px 3px rgba(0,0,0,.055)); + padding: @thumbnail-padding; + margin-bottom: @line-height-computed; + line-height: @line-height-base; + background-color: @thumbnail-bg; + border: 1px solid @thumbnail-border; + border-radius: @thumbnail-border-radius; .transition(all .2s ease-in-out); -} -// Add a hover state for linked versions only -a.thumbnail:hover { - border-color: @linkColor; - .box-shadow(0 1px 4px rgba(0,105,214,.25)); -} -// Images and captions -.thumbnail > img { - display: block; - max-width: 100%; - margin-left: auto; - margin-right: auto; -} -.thumbnail .caption { - padding: 9px; - color: @gray; + > img, + a > img { + &:extend(.img-responsive); + margin-left: auto; + margin-right: auto; + } + + // Add a hover state for linked versions only + a&:hover, + a&:focus, + a&.active { + border-color: @link-color; + } + + // Image captions + .caption { + padding: @thumbnail-caption-padding; + color: @thumbnail-caption-color; + } } |