92 lines
2.3 KiB
SCSS
92 lines
2.3 KiB
SCSS
$grid-gutter: 1rem !default;
|
|
|
|
div.cell[class*=grid-],
|
|
div.dataview div[class*=grid-],
|
|
form.quixote div[class*=grid-] {
|
|
clear: none;
|
|
&.newline {
|
|
clear: both;
|
|
}
|
|
}
|
|
|
|
div[class*=grid-] {
|
|
float: left;
|
|
box-sizing: border-box;
|
|
padding-right: $grid-gutter;
|
|
@media screen and (max-width: $very-small-limit) {
|
|
&:not(.never-alone) {
|
|
width: 100%;
|
|
padding-right: 0;
|
|
}
|
|
}
|
|
table, textarea, select, input[type=text], input[type=password], input[type=email] {
|
|
width: 100%;
|
|
}
|
|
.select2-container {
|
|
min-width: auto;
|
|
width: 100% !important;
|
|
}
|
|
&.newline {
|
|
clear: both;
|
|
}
|
|
}
|
|
|
|
div.dataview div[class*=grid-],
|
|
form div[class*=grid-] {
|
|
@if $grid-gutter != 0px {
|
|
box-sizing: content-box;
|
|
} @else {
|
|
padding-right: 1rem; // force gutter for form fields
|
|
}
|
|
+ h3, + h4 {
|
|
// give additional padding to compensate the margin being
|
|
// "absorbed" by the floating element.
|
|
padding-top: 1rem;
|
|
}
|
|
}
|
|
|
|
form div[class*=grid-] {
|
|
+ h3, + h4, + p, + div {
|
|
clear: both;
|
|
}
|
|
}
|
|
|
|
div.dataview div[class*=grid-] {
|
|
+ div.title, + div.subtitle {
|
|
clear: both;
|
|
}
|
|
}
|
|
|
|
form div[class*=grid-] span.select2-selection,
|
|
form div[class*=grid-] div.select2-container {
|
|
width: 100% !important;
|
|
}
|
|
|
|
@if $grid-gutter != 0px {
|
|
// only define property if some gutter is requested
|
|
.gru-content #columns > .cell[class*=grid-] {
|
|
margin-right: $grid-gutter;
|
|
}
|
|
}
|
|
|
|
// compute width of elements
|
|
@each $i in 1, 2, 3, 4, 6, 12 {
|
|
@for $j from 1 through $i {
|
|
.grid-#{$j}-#{$i} {
|
|
width: calc( #{100*$j/$i+0%} - #{$grid-gutter});
|
|
@media screen and (max-width: $mobile-limit) {
|
|
@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}); }
|
|
}
|
|
}
|
|
}
|
|
}
|