67 lines
1.6 KiB
SCSS
67 lines
1.6 KiB
SCSS
@charset "UTF-8";
|
|
|
|
$grid-mobile-limit: 1024px !default;
|
|
$very-small-limit: 560px !default;
|
|
|
|
div.grid {
|
|
float: left;
|
|
box-sizing: border-box;
|
|
padding-right: 1em;
|
|
clear: none;
|
|
}
|
|
|
|
form div[class*=grid-] {
|
|
~ h3, ~ h4, ~ p, + div {
|
|
clear: both;
|
|
}
|
|
@media screen and (max-width: $very-small-limit) {
|
|
&:not(.never-alone) {
|
|
width: 100%;
|
|
padding-right: 0;
|
|
}
|
|
}
|
|
table, textarea, select, input:not([type=checkbox]):not([type=radio]) {
|
|
width: 100%;
|
|
}
|
|
.select2-container {
|
|
min-width: auto;
|
|
width: 100% !important;
|
|
}
|
|
.select2-selection {
|
|
width: 100% !important;
|
|
}
|
|
}
|
|
|
|
@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%;
|
|
}
|
|
}
|
|
body div + div.grid-#{$j}-#{$i}, /* more specific than & + div above*/
|
|
div div.grid-#{$j}-#{$i} {
|
|
clear: none;
|
|
&.newline {
|
|
clear: both;
|
|
}
|
|
}
|
|
}
|
|
}
|