source: spip-zone/_plugins_/bootstrap/bootstrap2spip/css/thumbnails.less @ 66638

Last change on this file since 66638 was 66638, checked in by cedric@…, 8 years ago

version plus robuste et propre de la grille des vignettes en album

File size: 2.6 KB
Line 
1@import "bootstrap/css/thumbnails.less";
2
3// The Grid
4#thumbgrid {
5
6  .one () {
7    .thumbnails {margin-left: 0;}
8    .thumbnails li {width: auto;float:none;clear: none;margin-left: 0;}
9    .thumbnails li:nth-child(2n-1) {width: auto;float:none;clear: none;margin-left: 0;}
10    .thumbnails li:nth-child(2n) {width: auto;float:none;clear: none;margin-left: 0;}
11  }
12
13  .two (@width) {
14    .thumbnails {margin-left: 0;}
15    .thumbnails li {width: @width;float: left;}
16    .thumbnails li:nth-child(2n-1) {clear: both;float: left;margin-right: 0;margin-left: 0;}
17    .thumbnails li:nth-child(2n) {clear: none;float: right;margin-left: 0;}
18  }
19
20  .three(@width){
21    .thumbnails {margin-left: 0;}
22    .thumbnails li {width: @width;float: left;}
23    .thumbnails li:nth-child(3n-2) {clear: both;float: left;margin-right: 0;margin-left: 0;}
24    .thumbnails li:nth-child(3n-1) {clear: none;float: left;margin-left: (100% - 3*@width)/2 - 0.1%;margin-right: 0;}
25    .thumbnails li:nth-child(3n) {clear: none;float: right;margin-left: 0;}
26  }
27
28  .four(@width){
29    .thumbnails li {width: @width;float: left;}
30    .thumbnails li:nth-child(4n-3) {clear: both;float: left;margin-right: 0;margin-left: 0;}
31    .thumbnails li:nth-child(4n-2) {clear: none;float: left;margin-left: (100% - 4*@width)/3 - 0.1%;margin-right: 0;}
32    .thumbnails li:nth-child(4n-1) {clear: none;float: left;margin-left: (100% - 4*@width)/3 - 0.1%;margin-right: 0;}
33    .thumbnails li:nth-child(4n) {clear: none;float: right;margin-left: 0;}
34  }
35
36}
37
38/* mapper avec le plugin album */
39.album {#thumbgrid > .three(31%)}
40.span3,
41.span4{
42  .album {#thumbgrid > .two(48%)}
43}
44.span1,
45.span2{
46  .album {#thumbgrid > .one()}
47}
48
49.thumbnails li img {max-width: 93%;}
50.thumbnails .caption {display:block;}
51.thumbnails .caption img {margin-top: -9px;margin-bottom: 9px;}
52.thumbnails figure {margin:0;}
53.album .thumbnail {text-align: center; min-height: 150+2*9+@baseLineHeight;}
54// Add a hover state for linked versions only
55.album .thumbnail:hover {
56  border-color: @linkColor;
57  .box-shadow(0 1px 4px rgba(0,105,214,.25));
58}
59
60
61@media (min-width: 1200px) {
62  .span7,
63  .span8,
64  .span9,
65  .span10,
66  .span11,
67  .span12 {
68    .album {#thumbgrid > .four(22%)}
69  }
70  .span3{
71    .album {#thumbgrid > .two(48%)}
72  }
73}
74@media (min-width: 768px) and (max-width: 979px) {
75  .span7 {
76    .album {#thumbgrid > .three(30%)}
77  }
78  .span5{
79    .album {#thumbgrid > .two(48%)}
80  }
81  .span3{
82    .album {#thumbgrid > .one()}
83  }
84}
85@media (max-width: 767px) {
86  .album {#thumbgrid > .two(48%)}
87}
88@media (max-width: 450px) {
89  .album {#thumbgrid > .two(48%)}
90}
91@media (max-width: 380px) {
92  .album {#thumbgrid > .one()}
93}
Note: See TracBrowser for help on using the repository browser.