[Summary view] [Print] [Text view]

   1  // Grid system
   2  //
   3  // Generate semantic grid columns with these mixins.
   4  
   5  @mixin make-row($gutter: $grid-gutter-width) {
   6    --#{$variable-prefix}gutter-x: #{$gutter};
   7    --#{$variable-prefix}gutter-y: 0;
   8    display: flex;
   9    flex-wrap: wrap;
  10    // TODO: Revisit calc order after https://github.com/react-bootstrap/react-bootstrap/issues/6039 is fixed
  11    margin-top: calc(-1 * var(--#{$variable-prefix}gutter-y)); // stylelint-disable-line function-disallowed-list
  12    margin-right: calc(-.5 * var(--#{$variable-prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
  13    margin-left: calc(-.5 * var(--#{$variable-prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
  14  }
  15  
  16  @mixin make-col-ready($gutter: $grid-gutter-width) {
  17    // Add box sizing if only the grid is loaded
  18    box-sizing: if(variable-exists(include-column-box-sizing) and $include-column-box-sizing, border-box, null);
  19    // Prevent columns from becoming too narrow when at smaller grid tiers by
  20    // always setting `width: 100%;`. This works because we set the width
  21    // later on to override this initial width.
  22    flex-shrink: 0;
  23    width: 100%;
  24    max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
  25    padding-right: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
  26    padding-left: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
  27    margin-top: var(--#{$variable-prefix}gutter-y);
  28  }
  29  
  30  @mixin make-col($size: false, $columns: $grid-columns) {
  31    @if $size {
  32      flex: 0 0 auto;
  33      width: percentage(divide($size, $columns));
  34  
  35    } @else {
  36      flex: 1 1 0;
  37      max-width: 100%;
  38    }
  39  }
  40  
  41  @mixin make-col-auto() {
  42    flex: 0 0 auto;
  43    width: auto;
  44  }
  45  
  46  @mixin make-col-offset($size, $columns: $grid-columns) {
  47    $num: divide($size, $columns);
  48    margin-left: if($num == 0, 0, percentage($num));
  49  }
  50  
  51  // Row columns
  52  //
  53  // Specify on a parent element(e.g., .row) to force immediate children into NN
  54  // numberof columns. Supports wrapping to new lines, but does not do a Masonry
  55  // style grid.
  56  @mixin row-cols($count) {
  57    > * {
  58      flex: 0 0 auto;
  59      width: divide(100%, $count);
  60    }
  61  }
  62  
  63  // Framework grid generation
  64  //
  65  // Used only by Bootstrap to generate the correct number of grid classes given
  66  // any value of `$grid-columns`.
  67  
  68  @mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
  69    @each $breakpoint in map-keys($breakpoints) {
  70      $infix: breakpoint-infix($breakpoint, $breakpoints);
  71  
  72      @include media-breakpoint-up($breakpoint, $breakpoints) {
  73        // Provide basic `.col-{bp}` classes for equal-width flexbox columns
  74        .col#{$infix} {
  75          flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
  76        }
  77  
  78        .row-cols#{$infix}-auto > * {
  79          @include make-col-auto();
  80        }
  81  
  82        @if $grid-row-columns > 0 {
  83          @for $i from 1 through $grid-row-columns {
  84            .row-cols#{$infix}-#{$i} {
  85              @include row-cols($i);
  86            }
  87          }
  88        }
  89  
  90        .col#{$infix}-auto {
  91          @include make-col-auto();
  92        }
  93  
  94        @if $columns > 0 {
  95          @for $i from 1 through $columns {
  96            .col#{$infix}-#{$i} {
  97              @include make-col($i, $columns);
  98            }
  99          }
 100  
 101          // `$columns - 1` because offsetting by the width of an entire row isn't possible
 102          @for $i from 0 through ($columns - 1) {
 103            @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
 104              .offset#{$infix}-#{$i} {
 105                @include make-col-offset($i, $columns);
 106              }
 107            }
 108          }
 109        }
 110  
 111        // Gutters
 112        //
 113        // Make use of `.g-*`, `.gx-*` or `.gy-*` utilities to change spacing between the columns.
 114        @each $key, $value in $gutters {
 115          .g#{$infix}-#{$key},
 116          .gx#{$infix}-#{$key} {
 117            --#{$variable-prefix}gutter-x: #{$value};
 118          }
 119  
 120          .g#{$infix}-#{$key},
 121          .gy#{$infix}-#{$key} {
 122            --#{$variable-prefix}gutter-y: #{$value};
 123          }
 124        }
 125      }
 126    }
 127  }
 128  
 129  @mixin make-cssgrid($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
 130    @each $breakpoint in map-keys($breakpoints) {
 131      $infix: breakpoint-infix($breakpoint, $breakpoints);
 132  
 133      @include media-breakpoint-up($breakpoint, $breakpoints) {
 134        @if $columns > 0 {
 135          @for $i from 1 through $columns {
 136            .g-col#{$infix}-#{$i} {
 137              grid-column: auto / span $i;
 138            }
 139          }
 140  
 141          // Start with `1` because `0` is and invalid value.
 142          // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
 143          @for $i from 1 through ($columns - 1) {
 144            .g-start#{$infix}-#{$i} {
 145              grid-column-start: $i;
 146            }
 147          }
 148        }
 149      }
 150    }
 151  }