blob: 7803d2b94e4ca35147d56e49dc3bfd6f0fd23896 [file] [log] [blame]
@charset "UTF-8";
// Non-overlapping Material Design breakpoints
// @type map
$breakpoints: (
xs: (
begin: 0,
end: 599.99px
),
sm: (
begin: 600px,
end: 959.99px
),
md: (
begin: 960px,
end: 1279.99px
),
lg: (
begin: 1280px,
end: 1919.99px
),
xl: (
begin: 1920px,
end: 4999.99px
),
) !default;
// Overlapping breakpoints that are greater than defined
// Material Design breakpoints
// @type map
$overlapping-gt: (
gt-xs: 600px,
gt-sm: 960px,
gt-md: 1280px,
gt-lg: 1920px,
) !default;
// Overlapping breakpoints that are less than defined
// Material Design breakpoints
// @type map
$overlapping-lt: (
lt-sm: 599.99px,
lt-md: 959.99px,
lt-lg: 1279.99px,
lt-xl: 1919.99px,
) !default;
// Media Query Mixin, takes a breakpoint and returns a wrapping
// media query statement
// e.g.
//
// @include layout-bp(xs) {
// background-color: red;
// }
//
// becomes
//
// @media (min-width: 0px) and (max-width: 599px) {
// background-color: red;
// }
@mixin layout-bp($bp) {
@if map-has-key($breakpoints, $bp) {
$min: map-get(map-get($breakpoints, $bp), begin);
$max: map-get(map-get($breakpoints, $bp), end);
@media (min-width: $min) and (max-width: $max) { @content; }
}
@else if map-has-key($overlapping-gt, $bp) {
$min: map-get($overlapping-gt, $bp);
@media (min-width: $min) { @content; }
}
@else if map-has-key($overlapping-lt, $bp) {
$max: map-get($overlapping-lt, $bp);
@media (max-width: $max) { @content; }
}
}