mirror of
https://github.com/openfoodfoundation/openfoodnetwork
synced 2026-01-24 20:36:49 +00:00
29b9777a96
https://sass-lang.com/documentation/breaking-changes/slash-div > Sass currently treats / as a division operation in some contexts and a separator in others. This makes it difficult for Sass users to tell what any given / will mean, and makes it hard to work with new CSS features that use / as a separator. There's a handy migrator: npm install -g sass-migrator sass-migrator division **/*.scss And it cleverly avoids the need for the ugly division method in most cases.
137 lines
3.1 KiB
SCSS
137 lines
3.1 KiB
SCSS
// 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;
|
|
}
|