29 lines
590 B
SCSS
29 lines
590 B
SCSS
|
$breakpoints: (
|
||
|
|
xxs: 480px,
|
||
|
|
xs: 720px,
|
||
|
|
sm: 1024px,
|
||
|
|
md: 1280px,
|
||
|
|
lg: 1440px,
|
||
|
|
xl: 1920px,
|
||
|
|
xxl: 2580px,
|
||
|
|
);
|
||
|
|
|
||
|
|
@mixin break-on($breakpoint, $type) {
|
||
|
|
@if map-has-key($breakpoints, $breakpoint) {
|
||
|
|
$mediaValue: map-get($breakpoints, $breakpoint);
|
||
|
|
@if $type == up {
|
||
|
|
@media (min-width: $mediaValue) {
|
||
|
|
@content;
|
||
|
|
}
|
||
|
|
} @else if ($type == down) {
|
||
|
|
@media (max-width: $mediaValue) {
|
||
|
|
@content;
|
||
|
|
}
|
||
|
|
} @else {
|
||
|
|
@warn "Unknown `#{$type}` in $media query type";
|
||
|
|
}
|
||
|
|
} @else {
|
||
|
|
@warn "Unknown `#{$breakpoint}` in $breakpoints";
|
||
|
|
}
|
||
|
|
}
|