entrouvert
/
gadjo
15
0
Fork 0
Code Issues Pull Requests 3 Releases Activity

style: sync bits of grid system with publik-base-theme (#46794)

This commit is contained in:
Frédéric Péters 2020-09-18 17:23:41 +02:00
parent e72dc51a74
commit 3c1b7d0095
1 changed files with 17 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
gadjo/static/css/_grid.scss
View File

@ -2,10 +2,11 @@
$grid-mobile-limit: 601px !default;
$very-small-limit: 401px !default;
$grid-gutter: 1rem !default;
div.grid {
float: left;
box-sizing: border-box;
box-sizing: content-box;
padding-right: 1em;
clear: none;
}
@ -14,20 +15,23 @@ div.grid {
@for $j from 1 through $i {
div.grid-#{$j}-#{$i} {
float: left;
box-sizing: border-box;
box-sizing: content-box;
&.cell {
box-sizing: border-box;
}
padding-right: 1em;
width: (100*$j/$i+0%);
width: calc( #{100*$j/$i+0%} - #{$grid-gutter});
@media screen and (max-width: $grid-mobile-limit) {
@if $i == 4 and $j <= 2 { width: 50%; }
@else if $i == 4 and $j > 2 { width: 100%; }
@else if $i == 6 and $j <= 2 { width: (100/3+0%); }
@else if $i == 6 and $j == 3 { width: 50%; }
@else if $i == 6 and $j <= 5 { width: (200/3+0%); }
@else if $i == 6 and $j == 6 { width: 100%; }
@else if $i == 12 and $j <= 4 { width: (100/3+0%); }
@else if $i == 12 and $j <= 7 { width: 50%; }
@else if $i == 12 and $j <= 11 { width: (200/3+0%); }
@else if $i == 12 and $j == 12 { width: 100%; }
@if $i == 4 and $j <= 2 { width: calc(50% - #{$grid-gutter}); }
@else if $i == 4 and $j > 2 { width: calc(100% - #{$grid-gutter}); }
@else if $i == 6 and $j <= 2 { width: calc(#{100/3+0%} - #{$grid-gutter}); }
@else if $i == 6 and $j == 3 { width: calc(50% - #{$grid-gutter}); }
@else if $i == 6 and $j <= 5 { width: calc(#{200/3+0%} - #{$grid-gutter}); }
@else if $i == 6 and $j == 6 { width: calc(100% - #{$grid-gutter}); }
@else if $i == 12 and $j <= 4 { width: calc(#{100/3+0%} - #{$grid-gutter}); }
@else if $i == 12 and $j <= 7 { width: calc(50% - #{$grid-gutter}); }
@else if $i == 12 and $j <= 11 { width: calc(#{200/3+0%} - #{$grid-gutter}); }
@else if $i == 12 and $j == 12 { width: calc(100% - #{$grid-gutter}); }
}
@media screen and (max-width: $very-small-limit) {
width: 100%;