.dev/assets/shared/css/config/breakpoints.scss
$breakpoint_sm: 600px;
$breakpoint_md: 782px;
$breakpoint_lg: 960px;
$breakpoint_xl: 1440px;
$breakpoint_admin-bar: 782px;
// Responsive breakpoints mixin
@mixin media( $res ) {
@if small-only == $res {
@media only screen and (max-width: #{$breakpoint_sm - 1}) {
@content;
}
}
@if small == $res {
@media only screen and (min-width: #{$breakpoint_sm}) {
@content;
}
}
@if medium-only == $res {
@media only screen and (max-width: #{$breakpoint_md - 1}) {
@content;
}
}
@if medium == $res {
@media only screen and (min-width: #{$breakpoint_md}) {
@content;
}
}
@if large-only == $res {
@media only screen and (max-width: #{$breakpoint_lg - 1}) {
@content;
}
}
@if large == $res {
@media only screen and (min-width: #{$breakpoint_lg}) {
@content;
}
}
@if xlarge-only == $res {
@media only screen and (max-width: #{$breakpoint_xl - 1}) {
@content;
}
}
@if xlarge == $res {
@media only screen and (min-width: #{$breakpoint_xl}) {
@content;
}
}
@if admin-bar-only == $res {
@media only screen and (max-width: #{$breakpoint_admin-bar - 1}) {
@content;
}
}
@if admin-bar == $res {
@media only screen and (min-width: #{$breakpoint_admin-bar}) {
@content;
}
}
}
@custom-media --small (min-width: 600px);
@custom-media --smallMax (max-width: 599px);
@custom-media --medium (min-width: 782px);
@custom-media --mediumMax (max-width: 781px);
@custom-media --large (min-width: 960px);
@custom-media --largeMax (max-width: 959px);
@custom-media --huge (min-width: 1440px);
@custom-media --hugeMax (min-width: 1439px);
@custom-media --admin-bar-sm (max-width: 600px);
@custom-media --admin-bar-lg (max-width: 782px);