42 lines
678 B
SCSS
42 lines
678 B
SCSS
|
$breakpoints: (
|
||
|
|
'xs': (
|
||
|
|
min-width: 22.5em,
|
||
|
|
),
|
||
|
|
//360,
|
||
|
|
'xsm': (
|
||
|
|
min-width: 32.5em,
|
||
|
|
),
|
||
|
|
//520,
|
||
|
|
'sm': (
|
||
|
|
min-width: 48em,
|
||
|
|
),
|
||
|
|
//768,
|
||
|
|
'md': (
|
||
|
|
min-width: 64em,
|
||
|
|
),
|
||
|
|
//1024,
|
||
|
|
'lg': (
|
||
|
|
min-width: 76.5em,
|
||
|
|
),
|
||
|
|
//1224,
|
||
|
|
'xl': (
|
||
|
|
min-width: 90em,
|
||
|
|
),
|
||
|
|
//1440,
|
||
|
|
'xxl': (
|
||
|
|
min-width: 240em,
|
||
|
|
),
|
||
|
|
//3840,
|
||
|
|
) !default;
|
||
|
|
|
||
|
|
@mixin media($breakpoint) {
|
||
|
|
@if map-has-key($breakpoints, $breakpoint) {
|
||
|
|
@media #{inspect(map-get($breakpoints, $breakpoint))} {
|
||
|
|
@content;
|
||
|
|
}
|
||
|
|
} @else {
|
||
|
|
@warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
|
||
|
|
+ "Available breakpoints are: #{map-keys($breakpoints)}.";
|
||
|
|
}
|
||
|
|
}
|