openfoodfoundation/openfoodnetwork

// Grid Calculations
// Adjust $col-gutter (space between columns, as percentage) to adjust everything else automatically

@use "sass:math";

$col-gutter: 2;
$total-gutter: $col-gutter * 15;
$total-colspace: 100 - $total-gutter;
$gutter-width: $col-gutter * 0.01;
$col-width: math.div($total-colspace, 16) * 0.01;

$col-1: $col-width;
$col-2: ($col-width * 2) + $gutter-width;
$col-3: ($col-width * 3) + ($gutter-width * 2);
$col-4: ($col-width * 4) + ($gutter-width * 3);
$col-5: ($col-width * 5) + ($gutter-width * 4);
$col-6: ($col-width * 6) + ($gutter-width * 5);
$col-7: ($col-width * 7) + ($gutter-width * 6);
$col-8: ($col-width * 8) + ($gutter-width * 7);
$col-9: ($col-width * 9) + ($gutter-width * 8);
$col-10: ($col-width * 10) + ($gutter-width * 9);
$col-11: ($col-width * 11) + ($gutter-width * 10);
$col-12: ($col-width * 12) + ($gutter-width * 11);
$col-13: ($col-width * 13) + ($gutter-width * 12);
$col-14: ($col-width * 14) + ($gutter-width * 13);
$col-15: ($col-width * 15) + ($gutter-width * 14);
$col-16: 100;

// Grid Classes

.container {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0 1.5%;
  box-sizing: border-box;
  display: flex;
  max-width: 1400px;

  &.no-gutter {
    padding: 0;
  }

  .row {
    width: 100%;
    margin-bottom: 1.5em;
  }
}

.container::after,
.row::after,
.clearfix::after,
.clear::after {
  content: "";
  display: table;
  clear: both;
}

.column,
.columns {
  margin-left: percentage($gutter-width);
  float: left;
  box-sizing: border-box;
}

.column.one,
.columns.one {
  width: percentage($col-1);
}

.columns.two {
  width: percentage($col-2);
}

.columns.three {
  width: percentage($col-3);
}

.columns.four {
  width: percentage($col-4);
}

.columns.five {
  width: percentage($col-5);
}

.columns.six {
  width: percentage($col-6);
}

.columns.seven {
  width: percentage($col-7);
}

.columns.eight {
  width: percentage($col-8);
}

.columns.nine {
  width: percentage($col-9);
}

.columns.ten {
  width: percentage($col-10);
}

.columns.eleven {
  width: percentage($col-11);
}

.columns.twelve {
  width: percentage($col-12);
}

.columns.thirteen {
  width: percentage($col-13);
}

.columns.fourteen {
  width: percentage($col-14);
}

.columns.fifteen {
  width: percentage($col-15);
}

.columns.sixteen {
  width: 100%;
}

.column.offset-by-one,
.columns.offset-by-one {
  margin-left: $col-2;
}

.columns.offset-by-two {
  margin-left: $col-3;
}

.columns.offset-by-three {
  margin-left: $col-4;
}

.columns.offset-by-four {
  margin-left: $col-5;
}

.columns.offset-by-five {
  margin-left: $col-6;
}

.columns.offset-by-six {
  margin-left: $col-7;
}

.columns.offset-by-seven {
  margin-left: $col-8;
}

.columns.offset-by-eight {
  margin-left: $col-9;
}

.columns.offset-by-nine {
  margin-left: $col-10;
}

.columns.offset-by-ten {
  margin-left: $col-11;
}

.columns.offset-by-eleven {
  margin-left: $col-12;
}

.columns.offset-by-twelve {
  margin-left: $col-13;
}

.columns.offset-by-thirteen {
  margin-left: $col-14;
}

.columns.offset-by-fourteen {
  margin-left: $col-15;
}

.columns.offset-by-fifteen {
  margin-left: 100%;
}

.column.alpha,
.columns.alpha,
.columns.sixteen,
.column:first-child,
.columns:first-child {
  margin-left: 0;
}