git.roojs.org Git - roojs1/blob - scss/bootstrap/_grid.scss

   1 // Container widths
   2 //
   3 // Set the container width, and override it for fixed navbars in media queries.
   4
   5 @if $enable-grid-classes {
   6   // Single container class with breakpoint max-widths
   7   .container,
   8   // 100% wide container at all breakpoints
   9   .container-fluid {
  10     @include make-container();
  11   }
  12
  13   // Responsive containers that are 100% wide until a breakpoint
  14   @each $breakpoint, $container-max-width in $container-max-widths {
  15     .container-#{$breakpoint} {
  16       @extend .container-fluid;
  17     }
  18
  19     @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
  20       %responsive-container-#{$breakpoint} {
  21         max-width: $container-max-width;
  22       }
  23
  24       // Extend each breakpoint which is smaller or equal to the current breakpoint
  25       $extend-breakpoint: true;
  26
  27       @each $name, $width in $grid-breakpoints {
  28         @if ($extend-breakpoint) {
  29           .container#{breakpoint-infix($name, $grid-breakpoints)} {
  30             @extend %responsive-container-#{$breakpoint};
  31           }
  32
  33           // Once the current breakpoint is reached, stop extending
  34           @if ($breakpoint == $name) {
  35             $extend-breakpoint: false;
  36           }
  37         }
  38       }
  39     }
  40   }
  41 }
  42
  43
  44 // Row
  45 //
  46 // Rows contain your columns.
  47
  48 @if $enable-grid-classes {
  49   .row {
  50     @include make-row();
  51   }
  52
  53   // Remove the negative margin from default .row, then the horizontal padding
  54   // from all immediate children columns (to prevent runaway style inheritance).
  55   .no-gutters {
  56     margin-right: 0;
  57     margin-left: 0;
  58
  59     > .col,
  60     > [class*="col-"] {
  61       padding-right: 0;
  62       padding-left: 0;
  63     }
  64   }
  65 }
  66
  67 // Columns
  68 //
  69 // Common styles for small and large grid columns
  70
  71 @if $enable-grid-classes {
  72   @include make-grid-columns();
  73 }