Home | History | Annotate | Download | only in mixins 
      1 // Framework grid generation
      2 //
      3 // Used only by Bootstrap to generate the correct number of grid classes given
      4 // any value of `@grid-columns`.
      5 
      6 .make-grid-columns() {
      7   // Common styles for all sizes of grid columns, widths 1-12
      8   .col(@index) { // initial
      9     @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
     10     .col((@index + 1), @item);
     11   }
     12   .col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
     13     @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
     14     .col((@index + 1), ~"@{list}, @{item}");
     15   }
     16   .col(@index, @list) when (@index > @grid-columns) { // terminal
     17     @{list} {
     18       position: relative;
     19       // Prevent columns from collapsing when empty
     20       min-height: 1px;
     21       // Inner gutter via padding
     22       padding-left:  (@grid-gutter-width / 2);
     23       padding-right: (@grid-gutter-width / 2);
     24     }
     25   }
     26   .col(1); // kickstart it
     27 }
     28 
     29 .float-grid-columns(@class) {
     30   .col(@index) { // initial
     31     @item: ~".col-@{class}-@{index}";
     32     .col((@index + 1), @item);
     33   }
     34   .col(@index, @list) when (@index =< @grid-columns) { // general
     35     @item: ~".col-@{class}-@{index}";
     36     .col((@index + 1), ~"@{list}, @{item}");
     37   }
     38   .col(@index, @list) when (@index > @grid-columns) { // terminal
     39     @{list} {
     40       float: left;
     41     }
     42   }
     43   .col(1); // kickstart it
     44 }
     45 
     46 .calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
     47   .col-@{class}-@{index} {
     48     width: percentage((@index / @grid-columns));
     49   }
     50 }
     51 .calc-grid-column(@index, @class, @type) when (@type = push) and (@index > 0) {
     52   .col-@{class}-push-@{index} {
     53     left: percentage((@index / @grid-columns));
     54   }
     55 }
     56 .calc-grid-column(@index, @class, @type) when (@type = push) and (@index = 0) {
     57   .col-@{class}-push-0 {
     58     left: auto;
     59   }
     60 }
     61 .calc-grid-column(@index, @class, @type) when (@type = pull) and (@index > 0) {
     62   .col-@{class}-pull-@{index} {
     63     right: percentage((@index / @grid-columns));
     64   }
     65 }
     66 .calc-grid-column(@index, @class, @type) when (@type = pull) and (@index = 0) {
     67   .col-@{class}-pull-0 {
     68     right: auto;
     69   }
     70 }
     71 .calc-grid-column(@index, @class, @type) when (@type = offset) {
     72   .col-@{class}-offset-@{index} {
     73     margin-left: percentage((@index / @grid-columns));
     74   }
     75 }
     76 
     77 // Basic looping in LESS
     78 .loop-grid-columns(@index, @class, @type) when (@index >= 0) {
     79   .calc-grid-column(@index, @class, @type);
     80   // next iteration
     81   .loop-grid-columns((@index - 1), @class, @type);
     82 }
     83 
     84 // Create grid for specific class
     85 .make-grid(@class) {
     86   .float-grid-columns(@class);
     87   .loop-grid-columns(@grid-columns, @class, width);
     88   .loop-grid-columns(@grid-columns, @class, pull);
     89   .loop-grid-columns(@grid-columns, @class, push);
     90   .loop-grid-columns(@grid-columns, @class, offset);
     91 }
     92