github.com/mithrandie/csvq@v1.18.1/docs/_sass/components/_grid.scss (about)

     1  .container {
     2    margin: 0 auto;
     3    max-width: 1280px;
     4    width: 90%;
     5  }
     6  @media #{$medium-and-up} {
     7    .container {
     8      width: 85%;
     9    }
    10  }
    11  @media #{$large-and-up} {
    12    .container {
    13      width: 70%;
    14    }
    15  }
    16  .container .row {
    17    margin-left: (-1 * $gutter-width / 2);
    18    margin-right: (-1 * $gutter-width / 2);
    19  }
    20  
    21  .section {
    22    padding-top: 1rem;
    23    padding-bottom: 1rem;
    24  
    25    &.no-pad {
    26      padding: 0;
    27    }
    28    &.no-pad-bot {
    29      padding-bottom: 0;
    30    }
    31    &.no-pad-top {
    32      padding-top: 0;
    33    }
    34  }
    35  
    36  
    37  // Mixins to eliminate code repitition
    38  @mixin reset-offset {
    39    margin-left: auto;
    40    left: auto;
    41    right: auto;
    42  }
    43  @mixin grid-classes($size, $i, $perc) {
    44    &.offset-#{$size}#{$i} {
    45      margin-left: $perc;
    46    }
    47    &.pull-#{$size}#{$i} {
    48      right: $perc;
    49    }
    50    &.push-#{$size}#{$i} {
    51      left: $perc;
    52    }
    53  }
    54  
    55  
    56  .row {
    57    margin-left: auto;
    58    margin-right: auto;
    59    margin-bottom: 20px;
    60  
    61    // Clear floating children
    62    &:after {
    63      content: "";
    64      display: table;
    65      clear: both;
    66    }
    67  
    68    .col {
    69      float: left;
    70      box-sizing: border-box;
    71      padding: 0 $gutter-width / 2;
    72      min-height: 1px;
    73  
    74      &[class*="push-"],
    75      &[class*="pull-"] {
    76        position: relative;
    77      }
    78  
    79      $i: 1;
    80      @while $i <= $num-cols {
    81        $perc: unquote((100 / ($num-cols / $i)) + "%");
    82        &.s#{$i} {
    83          width: $perc;
    84          @include reset-offset;
    85        }
    86        $i: $i + 1;
    87      }
    88  
    89      $i: 1;
    90      @while $i <= $num-cols {
    91        $perc: unquote((100 / ($num-cols / $i)) + "%");
    92        @include grid-classes("s", $i, $perc);
    93        $i: $i + 1;
    94      }
    95  
    96      @media #{$medium-and-up} {
    97  
    98        $i: 1;
    99        @while $i <= $num-cols {
   100          $perc: unquote((100 / ($num-cols / $i)) + "%");
   101          &.m#{$i} {
   102            width: $perc;
   103            @include reset-offset;
   104          }
   105          $i: $i + 1
   106        }
   107  
   108        $i: 1;
   109        @while $i <= $num-cols {
   110          $perc: unquote((100 / ($num-cols / $i)) + "%");
   111          @include grid-classes("m", $i, $perc);
   112          $i: $i + 1;
   113        }
   114      }
   115  
   116      @media #{$large-and-up} {
   117  
   118        $i: 1;
   119        @while $i <= $num-cols {
   120          $perc: unquote((100 / ($num-cols / $i)) + "%");
   121          &.l#{$i} {
   122            width: $perc;
   123            @include reset-offset;
   124          }
   125          $i: $i + 1;
   126        }
   127  
   128        $i: 1;
   129        @while $i <= $num-cols {
   130          $perc: unquote((100 / ($num-cols / $i)) + "%");
   131          @include grid-classes("l", $i, $perc);
   132          $i: $i + 1;
   133        }
   134      }
   135  
   136      @media #{$extra-large-and-up} {
   137  
   138        $i: 1;
   139        @while $i <= $num-cols {
   140          $perc: unquote((100 / ($num-cols / $i)) + "%");
   141          &.xl#{$i} {
   142            width: $perc;
   143            @include reset-offset;
   144          }
   145          $i: $i + 1;
   146        }
   147  
   148        $i: 1;
   149        @while $i <= $num-cols {
   150          $perc: unquote((100 / ($num-cols / $i)) + "%");
   151          @include grid-classes("xl", $i, $perc);
   152          $i: $i + 1;
   153        }
   154      }
   155    }
   156  }