aleph1.co.uk Git - yaffs-website/blob - vendor/twbs/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss

   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 // [converter] This is defined recursively in LESS, but Sass supports real loops
   7 @mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") {
   8   @for $i from (1 + 1) through $grid-columns {
   9     $list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
  10   }
  11   #{$list} {
  12     position: relative;
  13     // Prevent columns from collapsing when empty
  14     min-height: 1px;
  15     // Inner gutter via padding
  16     padding-left:  ceil(($grid-gutter-width / 2));
  17     padding-right: floor(($grid-gutter-width / 2));
  18   }
  19 }
  20
  21
  22 // [converter] This is defined recursively in LESS, but Sass supports real loops
  23 @mixin float-grid-columns($class, $i: 1, $list: ".col-#{$class}-#{$i}") {
  24   @for $i from (1 + 1) through $grid-columns {
  25     $list: "#{$list}, .col-#{$class}-#{$i}";
  26   }
  27   #{$list} {
  28     float: left;
  29   }
  30 }
  31
  32
  33 @mixin calc-grid-column($index, $class, $type) {
  34   @if ($type == width) and ($index > 0) {
  35     .col-#{$class}-#{$index} {
  36       width: percentage(($index / $grid-columns));
  37     }
  38   }
  39   @if ($type == push) and ($index > 0) {
  40     .col-#{$class}-push-#{$index} {
  41       left: percentage(($index / $grid-columns));
  42     }
  43   }
  44   @if ($type == push) and ($index == 0) {
  45     .col-#{$class}-push-0 {
  46       left: auto;
  47     }
  48   }
  49   @if ($type == pull) and ($index > 0) {
  50     .col-#{$class}-pull-#{$index} {
  51       right: percentage(($index / $grid-columns));
  52     }
  53   }
  54   @if ($type == pull) and ($index == 0) {
  55     .col-#{$class}-pull-0 {
  56       right: auto;
  57     }
  58   }
  59   @if ($type == offset) {
  60     .col-#{$class}-offset-#{$index} {
  61       margin-left: percentage(($index / $grid-columns));
  62     }
  63   }
  64 }
  65
  66 // [converter] This is defined recursively in LESS, but Sass supports real loops
  67 @mixin loop-grid-columns($columns, $class, $type) {
  68   @for $i from 0 through $columns {
  69     @include calc-grid-column($i, $class, $type);
  70   }
  71 }
  72
  73
  74 // Create grid for specific class
  75 @mixin make-grid($class) {
  76   @include float-grid-columns($class);
  77   @include loop-grid-columns($grid-columns, $class, width);
  78   @include loop-grid-columns($grid-columns, $class, pull);
  79   @include loop-grid-columns($grid-columns, $class, push);
  80   @include loop-grid-columns($grid-columns, $class, offset);
  81 }