summaryrefslogtreecommitdiffstats
path: root/css/bootstrap/thumbnails.less
diff options
context:
space:
mode:
Diffstat (limited to 'css/bootstrap/thumbnails.less')
-rw-r--r--css/bootstrap/thumbnails.less68
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;
+ }
}