src/scss/bootstrap-4.0.0-alpha.6/scss/mixins/_grid.scss

   1 /// Grid system
   2 //
   3 // Generate semantic grid columns with these mixins.
   4
   5 @mixin make-container($gutters: $grid-gutter-widths) {
   6   position: relative;
   7   margin-left: auto;
   8   margin-right: auto;
   9
  10   @each $breakpoint in map-keys($gutters) {
  11     @include media-breakpoint-up($breakpoint) {
  12       $gutter: map-get($gutters, $breakpoint);
  13       padding-right: ($gutter / 2);
  14       padding-left:  ($gutter / 2);
  15     }
  16   }
  17 }
  18
  19
  20 // For each breakpoint, define the maximum width of the container in a media query
  21 @mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
  22   @each $breakpoint, $container-max-width in $max-widths {
  23     @include media-breakpoint-up($breakpoint, $breakpoints) {
  24       width: $container-max-width;
  25       max-width: 100%;
  26     }
  27   }
  28 }
  29
  30 @mixin make-gutters($gutters: $grid-gutter-widths) {
  31   @each $breakpoint in map-keys($gutters) {
  32     @include media-breakpoint-up($breakpoint) {
  33       $gutter: map-get($gutters, $breakpoint);
  34       padding-right: ($gutter / 2);
  35       padding-left:  ($gutter / 2);
  36     }
  37   }
  38 }
  39
  40 @mixin make-row($gutters: $grid-gutter-widths) {
  41   display: flex;
  42   flex-wrap: wrap;
  43
  44   @each $breakpoint in map-keys($gutters) {
  45     @include media-breakpoint-up($breakpoint) {
  46       $gutter: map-get($gutters, $breakpoint);
  47       margin-right: ($gutter / -2);
  48       margin-left:  ($gutter / -2);
  49     }
  50   }
  51 }
  52
  53 @mixin make-col-ready($gutters: $grid-gutter-widths) {
  54   position: relative;
  55   // Prevent columns from becoming too narrow when at smaller grid tiers by
  56   // always setting `width: 100%;`. This works because we use `flex` values
  57   // later on to override this initial width.
  58   width: 100%;
  59   min-height: 1px; // Prevent collapsing
  60
  61   @each $breakpoint in map-keys($gutters) {
  62     @include media-breakpoint-up($breakpoint) {
  63       $gutter: map-get($gutters, $breakpoint);
  64       padding-right: ($gutter / 2);
  65       padding-left:  ($gutter / 2);
  66     }
  67   }
  68 }
  69
  70 @mixin make-col($size, $columns: $grid-columns) {
  71   flex: 0 0 percentage($size / $columns);
  72   // width: percentage($size / $columns);
  73   // Add a `max-width` to ensure content within each column does not blow out
  74   // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
  75   // do not appear to require this.
  76   max-width: percentage($size / $columns);
  77 }
  78
  79 @mixin make-col-offset($size, $columns: $grid-columns) {
  80   margin-left: percentage($size / $columns);
  81 }
  82
  83 @mixin make-col-push($size, $columns: $grid-columns) {
  84   left: if($size > 0, percentage($size / $columns), auto);
  85 }
  86
  87 @mixin make-col-pull($size, $columns: $grid-columns) {
  88   right: if($size > 0, percentage($size / $columns), auto);
  89 }
  90
  91 @mixin make-col-modifier($type, $size, $columns) {
  92   // Work around the lack of dynamic mixin @include support (https://github.com/sass/sass/issues/626)
  93   @if $type == push {
  94     @include make-col-push($size, $columns);
  95   } @else if $type == pull {
  96     @include make-col-pull($size, $columns);
  97   } @else if $type == offset {
  98     @include make-col-offset($size, $columns);
  99   }
 100 }