add grid system (from publik-base-theme) (#11092)
This commit is contained in:
parent
422799a06e
commit
32e40afe65
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -947,3 +947,5 @@ ul.apps li.icon-announces a:hover { background-image: url(icons/announces.large-
|
|||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@import 'grid';
|
||||
|
|
Loading…
Reference in New Issue