52 lines
1.4 KiB
SCSS
52 lines
1.4 KiB
SCSS
|
// mixin for responsive grid, but I'm sure it's far from the best solution;
|
||
|
|
// Extra small screen / phone
|
||
|
|
$xs: 0; // Small screen / phone
|
||
|
|
$sm: 480px; // Medium screen / tablet
|
||
|
|
$md: 768px; // Large screen / desktop
|
||
|
|
$lg: 1024px; // // Extra large screen / wide desktop
|
||
|
|
$xl: 1200px;
|
||
|
|
@mixin respond-to($media...) {
|
||
|
|
@for $i from 1 through length($media) {
|
||
|
|
@include privat-respond-to(nth($media, $i)) {
|
||
|
|
@content;
|
||
|
|
}
|
||
|
|
;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin privat-respond-to($current-media) {
|
||
|
|
@if $current-media == 'xs' {
|
||
|
|
@media only screen and (max-width: $sm) {
|
||
|
|
@content;
|
||
|
|
}
|
||
|
|
} @else if $current-media == 'sm' {
|
||
|
|
@media only screen and (min-width: $sm + 1) {
|
||
|
|
@content;
|
||
|
|
}
|
||
|
|
} @else if $current-media == 'only-sm' {
|
||
|
|
@media only screen and (min-width: $sm + 1) and (max-width: $md) {
|
||
|
|
@content;
|
||
|
|
}
|
||
|
|
} @else if $current-media == 'md' {
|
||
|
|
@media only screen and (min-width: $md + 1) {
|
||
|
|
@content;
|
||
|
|
}
|
||
|
|
} @else if $current-media == 'only-md' {
|
||
|
|
@media only screen and (min-width: $md + 1) and (max-width: $lg + 1) {
|
||
|
|
@content;
|
||
|
|
}
|
||
|
|
} @else if $current-media == 'lg' {
|
||
|
|
@media only screen and (min-width: $lg + 1) {
|
||
|
|
@content;
|
||
|
|
}
|
||
|
|
} @else if $current-media == 'only-lg' {
|
||
|
|
@media only screen and (min-width: $lg + 1) and (max-width: $xl - 1) {
|
||
|
|
@content;
|
||
|
|
}
|
||
|
|
} @else if $current-media == 'xl' {
|
||
|
|
@media only screen and (min-width: $xl) {
|
||
|
|
@content;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|