tools/side_chain_tool/web/node_modules/bootstrap/less/mixins/grid-framework.less

   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:  ceil((@grid-gutter-width / 2));
  23       padding-right: floor((@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 }