Changeset 66638 in spip-zone


Ignore:
Timestamp:
Oct 10, 2012, 7:41:46 AM (8 years ago)
Author:
cedric@…
Message:

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

File:
1 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/bootstrap/bootstrap2spip/css/thumbnails.less

    r66632 r66638  
    11@import "bootstrap/css/thumbnails.less";
    22
     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
    338/* mapper avec le plugin album */
    4 .album .thumbnails li {width: 29%;float: left;}
    5 .album .thumbnails li:nth-child(3n-2) {clear: left;}
    6 .span5,
    7 .span6 {
    8   .album .thumbnails li {width: 27%;}
    9 }
     39.album {#thumbgrid > .three(31%)}
    1040.span3,
    1141.span4{
    12   .album .thumbnails li {width: 41%;clear: none;}
    13   .album .thumbnails li:nth-child(2n-1) {clear: left;}
     42  .album {#thumbgrid > .two(48%)}
    1443}
    1544.span1,
    1645.span2{
    17   .album .thumbnails li {width: auto;float:none;clear: none;}
     46  .album {#thumbgrid > .one()}
    1847}
    1948
     
    3059
    3160
    32 
    33 
    3461@media (min-width: 1200px) {
    3562  .span7,
     
    3966  .span11,
    4067  .span12 {
    41     .album .thumbnails li {width: 20%;clear: none;}
    42     .album .thumbnails li:nth-child(4n-3) {clear: left;}
     68    .album {#thumbgrid > .four(22%)}
    4369  }
    4470  .span3{
    45     .album .thumbnails li {width: 40%;}
     71    .album {#thumbgrid > .two(48%)}
    4672  }
    47 
    4873}
    4974@media (min-width: 768px) and (max-width: 979px) {
    5075  .span7 {
    51     .album .thumbnails li {width: 28%;}
     76    .album {#thumbgrid > .three(30%)}
    5277  }
    5378  .span5{
    54     .album .thumbnails {  margin-left: -@gridGutterWidth;}
    55     .album .thumbnails li {width: 43%;float: left;clear: none;margin-left: @gridGutterWidth;}
    56     .album .thumbnails li:nth-child(2n-1) {clear: left;}
     79    .album {#thumbgrid > .two(48%)}
    5780  }
    5881  .span3{
    59     .album .thumbnails li {width: auto;float:none;clear: none;}
     82    .album {#thumbgrid > .one()}
    6083  }
    6184}
    6285@media (max-width: 767px) {
    63   .album .thumbnails {  margin-left: -@gridGutterWidth;}
    64   .album .thumbnails li {width: 45%;float: left;clear: none;margin-left: @gridGutterWidth;}
    65   .span5,.span6{.album .thumbnails li {width: 45%;}}
    66   .album .thumbnails li:nth-child(3n-2) {clear: none;}
    67   .album .thumbnails li:nth-child(2n-1) {clear: left;}
     86  .album {#thumbgrid > .two(48%)}
    6887}
    6988@media (max-width: 450px) {
    70   .album .thumbnails li {width: 40%;}
    71   .span5,.span6{.album .thumbnails li {width: 40%;}}
     89  .album {#thumbgrid > .two(48%)}
    7290}
    7391@media (max-width: 380px) {
    74   .album .thumbnails {  margin-left:0}
    75   .album .thumbnails li {float: none;margin-left: 0;width: auto;}
     92  .album {#thumbgrid > .one()}
    7693}
Note: See TracChangeset for help on using the changeset viewer.