ceph/src/pybind/mgr/dashboard/static/AdminLTE-2.3.7/build/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: (@gutter / 2);
  10   padding-right: (@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
  31 .make-xs-column-offset(@columns) {
  32   margin-left: percentage((@columns / @grid-columns));
  33 }
  34
  35 .make-xs-column-push(@columns) {
  36   left: percentage((@columns / @grid-columns));
  37 }
  38
  39 .make-xs-column-pull(@columns) {
  40   right: percentage((@columns / @grid-columns));
  41 }
  42
  43 // Generate the small columns
  44 .make-sm-column(@columns; @gutter: @grid-gutter-width) {
  45   position: relative;
  46   min-height: 1px;
  47   padding-left: (@gutter / 2);
  48   padding-right: (@gutter / 2);
  49
  50   @media (min-width: @screen-sm-min) {
  51     float: left;
  52     width: percentage((@columns / @grid-columns));
  53   }
  54 }
  55
  56 .make-sm-column-offset(@columns) {
  57   @media (min-width: @screen-sm-min) {
  58     margin-left: percentage((@columns / @grid-columns));
  59   }
  60 }
  61
  62 .make-sm-column-push(@columns) {
  63   @media (min-width: @screen-sm-min) {
  64     left: percentage((@columns / @grid-columns));
  65   }
  66 }
  67
  68 .make-sm-column-pull(@columns) {
  69   @media (min-width: @screen-sm-min) {
  70     right: percentage((@columns / @grid-columns));
  71   }
  72 }
  73
  74 // Generate the medium columns
  75 .make-md-column(@columns; @gutter: @grid-gutter-width) {
  76   position: relative;
  77   min-height: 1px;
  78   padding-left: (@gutter / 2);
  79   padding-right: (@gutter / 2);
  80
  81   @media (min-width: @screen-md-min) {
  82     float: left;
  83     width: percentage((@columns / @grid-columns));
  84   }
  85 }
  86
  87 .make-md-column-offset(@columns) {
  88   @media (min-width: @screen-md-min) {
  89     margin-left: percentage((@columns / @grid-columns));
  90   }
  91 }
  92
  93 .make-md-column-push(@columns) {
  94   @media (min-width: @screen-md-min) {
  95     left: percentage((@columns / @grid-columns));
  96   }
  97 }
  98
  99 .make-md-column-pull(@columns) {
 100   @media (min-width: @screen-md-min) {
 101     right: percentage((@columns / @grid-columns));
 102   }
 103 }
 104
 105 // Generate the large columns
 106 .make-lg-column(@columns; @gutter: @grid-gutter-width) {
 107   position: relative;
 108   min-height: 1px;
 109   padding-left: (@gutter / 2);
 110   padding-right: (@gutter / 2);
 111
 112   @media (min-width: @screen-lg-min) {
 113     float: left;
 114     width: percentage((@columns / @grid-columns));
 115   }
 116 }
 117
 118 .make-lg-column-offset(@columns) {
 119   @media (min-width: @screen-lg-min) {
 120     margin-left: percentage((@columns / @grid-columns));
 121   }
 122 }
 123
 124 .make-lg-column-push(@columns) {
 125   @media (min-width: @screen-lg-min) {
 126     left: percentage((@columns / @grid-columns));
 127   }
 128 }
 129
 130 .make-lg-column-pull(@columns) {
 131   @media (min-width: @screen-lg-min) {
 132     right: percentage((@columns / @grid-columns));
 133   }
 134 }