38 lines
1.1 KiB
SCSS
38 lines
1.1 KiB
SCSS
|
// Media step breakpoint mixin based on Angular Material lib
|
||
|
|
$breakpoints: (
|
||
|
|
xs: 'screen and (max-width: 599px)',
|
||
|
|
sm: 'screen and (min-width: 600px) and (max-width: 959px)',
|
||
|
|
md: 'screen and (min-width: 960px) and (max-width: 1279px)',
|
||
|
|
lg: 'screen and (min-width: 1280px) and (max-width: 1919px)',
|
||
|
|
xl: 'screen and (min-width: 1920px) and (max-width: 5000px)',
|
||
|
|
lt-sm: 'screen and (max-width: 599px)',
|
||
|
|
lt-md: 'screen and (max-width: 959px)',
|
||
|
|
lt-lg: 'screen and (max-width: 1279px)',
|
||
|
|
lt-xl: 'screen and (max-width: 1919px)',
|
||
|
|
gt-xs: 'screen and (min-width: 600px)',
|
||
|
|
gt-sm: 'screen and (min-width: 960px)',
|
||
|
|
gt-md: 'screen and (min-width: 1280px)',
|
||
|
|
gt-lg: 'screen and (min-width: 1920px)'
|
||
|
|
) !default;
|
||
|
|
|
||
|
|
// Re-map the breakpoints for the helper classes
|
||
|
|
$helper-breakpoints: (
|
||
|
|
xs: null,
|
||
|
|
sm: 'gt-xs',
|
||
|
|
md: 'gt-sm',
|
||
|
|
lg: 'gt-md',
|
||
|
|
xl: 'gt-lg'
|
||
|
|
);
|
||
|
|
|
||
|
|
@mixin media-breakpoint($breakpointName) {
|
||
|
|
$mediaQuery: map-get($breakpoints, $breakpointName);
|
||
|
|
|
||
|
|
@if ($mediaQuery == null) {
|
||
|
|
@content;
|
||
|
|
} @else {
|
||
|
|
@media #{$mediaQuery} {
|
||
|
|
@content;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|