46 lines
1.3 KiB
SCSS
46 lines
1.3 KiB
SCSS
|
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||
|
|
|
||
|
|
/* Core > Grids */
|
||
|
|
|
||
|
|
.grid, .d-grid {
|
||
|
|
display: grid;
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin grid-col-maker($col-count, $middle-part) {
|
||
|
|
.grid-col-#{$middle-part}#{$col-count}, .col-#{$middle-part}#{$col-count} {
|
||
|
|
grid-template-columns: repeat(#{$col-count}, 1fr);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin grid-gap-maker($gap-size-key, $gap-size-value) {
|
||
|
|
.grid-gap-#{$gap-size-key}, .gap-#{$gap-size-key} {
|
||
|
|
grid-gap: #{$gap-size-value};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Defining rules for all devices.
|
||
|
|
@include grid-col-maker("1", "");
|
||
|
|
@include grid-col-maker("2", "");
|
||
|
|
@include grid-col-maker("3", "");
|
||
|
|
@include grid-col-maker("4", "");
|
||
|
|
@include grid-col-maker("6", "");
|
||
|
|
@include grid-col-maker("8", "");
|
||
|
|
|
||
|
|
@include grid-gap-maker("xs", calc(#{$grid-gap-base-size} * 0.5));
|
||
|
|
@include grid-gap-maker("s", calc(#{$grid-gap-base-size} * 0.75));
|
||
|
|
@include grid-gap-maker("m", #{$grid-gap-base-size});
|
||
|
|
@include grid-gap-maker("l", calc(#{$grid-gap-base-size} * 1.5));
|
||
|
|
@include grid-gap-maker("xl", calc(#{$grid-gap-base-size} * 2.0));
|
||
|
|
|
||
|
|
@media only screen and (max-width: 992px) {
|
||
|
|
@include grid-col-maker("1", "medium-");
|
||
|
|
@include grid-col-maker("2", "medium-");
|
||
|
|
@include grid-col-maker("3", "medium-");
|
||
|
|
}
|
||
|
|
|
||
|
|
@media only screen and (max-width: 768px) {
|
||
|
|
@include grid-col-maker("1", "mobile-");
|
||
|
|
@include grid-col-maker("2", "mobile-");
|
||
|
|
@include grid-col-maker("3", "mobile-");
|
||
|
|
}
|