logo

searx

My custom branche(s) on searx, a meta-search engine git clone https://hacktivis.me/git/searx.git

grid.less (3094B)

    

  1. // Grid system
  2. //
  3. // Generate semantic grid columns with these mixins.
  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. }
  14. // Creates a wrapper for a series of columns
  15. .make-row(@gutter: @grid-gutter-width) {
  16.   margin-left:  (@gutter / -2);
  17.   margin-right: (@gutter / -2);
  18.   &:extend(.clearfix all);
  19. }
  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. }
  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);
  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. }
  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);
  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. }
  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);
  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. }