Mercurial > wikked

comparison static/bootstrap/less/thumbnails.less @ 149:d29e2f337b00

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Updated to Bootstrap 3.0.
author Ludovic Chabant <ludovic@chabant.com>
date Thu, 12 Dec 2013 21:54:04 -0800
parents a5a3d454eac9
children
comparison
equal deleted inserted replaced
148:f02e049d6546 149:d29e2f337b00
1 // 1 //
2 // Thumbnails 2 // Thumbnails
3 // -------------------------------------------------- 3 // --------------------------------------------------
4 4
5 5
6 // Note: `.thumbnails` and `.thumbnails > li` are overriden in responsive files 6 // Mixin and adjust the regular image class
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 { 7 .thumbnail {
28 display: block; 8 display: block;
29 padding: 4px; 9 padding: @thumbnail-padding;
30 line-height: @baseLineHeight; 10 margin-bottom: @line-height-computed;
31 border: 1px solid #ddd; 11 line-height: @line-height-base;
32 .border-radius(@baseBorderRadius); 12 background-color: @thumbnail-bg;
33 .box-shadow(0 1px 3px rgba(0,0,0,.055)); 13 border: 1px solid @thumbnail-border;
14 border-radius: @thumbnail-border-radius;
34 .transition(all .2s ease-in-out); 15 .transition(all .2s ease-in-out);
16
17 > img,
18 a > img {
19 .img-responsive();
20 margin-left: auto;
21 margin-right: auto;
22 }
23
24 // Add a hover state for linked versions only
25 a&:hover,
26 a&:focus,
27 a&.active {
28 border-color: @link-color;
29 }
30
31 // Image captions
32 .caption {
33 padding: @thumbnail-caption-padding;
34 color: @thumbnail-caption-color;
35 }
35 } 36 }
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 }