add grid system (from publik-base-theme) (#11092)

This commit is contained in:
Frédéric Péters 2016-05-28 14:40:10 +02:00
parent 422799a06e
commit 32e40afe65
2 changed files with 49 additions and 0 deletions

View File

@ -0,0 +1,47 @@
$grid-mobile-limit: 601px !default;
$very-small-limit: 401px !default;
div.grid {
float: left;
box-sizing: border-box;
padding-right: 1em;
clear: none;
}
@each $i in 1, 2, 3, 4, 6, 12 {
@for $j from 1 through $i {
div.grid-#{$j}-#{$i} {
float: left;
box-sizing: border-box;
padding-right: 1em;
width: (100*$j/$i+0%);
@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%; }
}
@media screen and (max-width: $very-small-limit) {
width: 100%;
}
& + h3, & + h4, & + p, & + div {
clear: both;
}
textarea, select, input[type=text] {
width: 100%;
}
}
div div.grid-#{$j}-#{$i} {
clear: none;
&.newline {
clear: both;
}
}
}
}

View File

@ -947,3 +947,5 @@ ul.apps li.icon-announces a:hover { background-image: url(icons/announces.large-
text-shadow: none;
}
}
@import 'grid';