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

   1 // Grid system
   2 //
   3 // Generate semantic grid columns with these mixins.
   4
   5 // Centered container element
   6 .container-fixed(@gutter: @grid-gutter-width) {
   7   margin-right: auto;
   8   margin-left: auto;
   9   padding-left:  floor((@gutter / 2));
  10   padding-right: ceil((@gutter / 2));
  11   &:extend(.clearfix all);
  12 }
  13
  14 // Creates a wrapper for a series of columns
  15 .make-row(@gutter: @grid-gutter-width) {
  16   margin-left:  ceil((@gutter / -2));
  17   margin-right: floor((@gutter / -2));
  18   &:extend(.clearfix all);
  19 }
  20
  21 // Generate the extra small columns
  22 .make-xs-column(@columns; @gutter: @grid-gutter-width) {
  23   position: relative;
  24   float: left;
  25   width: percentage((@columns / @grid-columns));
  26   min-height: 1px;
  27   padding-left:  (@gutter / 2);
  28   padding-right: (@gutter / 2);
  29 }
  30 .make-xs-column-offset(@columns) {
  31   margin-left: percentage((@columns / @grid-columns));
  32 }
  33 .make-xs-column-push(@columns) {
  34   left: percentage((@columns / @grid-columns));
  35 }
  36 .make-xs-column-pull(@columns) {
  37   right: percentage((@columns / @grid-columns));
  38 }
  39
  40 // Generate the small columns
  41 .make-sm-column(@columns; @gutter: @grid-gutter-width) {
  42   position: relative;
  43   min-height: 1px;
  44   padding-left:  (@gutter / 2);
  45   padding-right: (@gutter / 2);
  46
  47   @media (min-width: @screen-sm-min) {
  48     float: left;
  49     width: percentage((@columns / @grid-columns));
  50   }
  51 }
  52 .make-sm-column-offset(@columns) {
  53   @media (min-width: @screen-sm-min) {
  54     margin-left: percentage((@columns / @grid-columns));
  55   }
  56 }
  57 .make-sm-column-push(@columns) {
  58   @media (min-width: @screen-sm-min) {
  59     left: percentage((@columns / @grid-columns));
  60   }
  61 }
  62 .make-sm-column-pull(@columns) {
  63   @media (min-width: @screen-sm-min) {
  64     right: percentage((@columns / @grid-columns));
  65   }
  66 }
  67
  68 // Generate the medium columns
  69 .make-md-column(@columns; @gutter: @grid-gutter-width) {
  70   position: relative;
  71   min-height: 1px;
  72   padding-left:  (@gutter / 2);
  73   padding-right: (@gutter / 2);
  74
  75   @media (min-width: @screen-md-min) {
  76     float: left;
  77     width: percentage((@columns / @grid-columns));
  78   }
  79 }
  80 .make-md-column-offset(@columns) {
  81   @media (min-width: @screen-md-min) {
  82     margin-left: percentage((@columns / @grid-columns));
  83   }
  84 }
  85 .make-md-column-push(@columns) {
  86   @media (min-width: @screen-md-min) {
  87     left: percentage((@columns / @grid-columns));
  88   }
  89 }
  90 .make-md-column-pull(@columns) {
  91   @media (min-width: @screen-md-min) {
  92     right: percentage((@columns / @grid-columns));
  93   }
  94 }
  95
  96 // Generate the large columns
  97 .make-lg-column(@columns; @gutter: @grid-gutter-width) {
  98   position: relative;
  99   min-height: 1px;
 100   padding-left:  (@gutter / 2);
 101   padding-right: (@gutter / 2);
 102
 103   @media (min-width: @screen-lg-min) {
 104     float: left;
 105     width: percentage((@columns / @grid-columns));
 106   }
 107 }
 108 .make-lg-column-offset(@columns) {
 109   @media (min-width: @screen-lg-min) {
 110     margin-left: percentage((@columns / @grid-columns));
 111   }
 112 }
 113 .make-lg-column-push(@columns) {
 114   @media (min-width: @screen-lg-min) {
 115     left: percentage((@columns / @grid-columns));
 116   }
 117 }
 118 .make-lg-column-pull(@columns) {
 119   @media (min-width: @screen-lg-min) {
 120     right: percentage((@columns / @grid-columns));
 121   }
 122 }