49 lines
1.4 KiB
SCSS
49 lines
1.4 KiB
SCSS
/**=====================
|
|
breakpoint mixins css start
|
|
==========================**/
|
|
// min width
|
|
@mixin mq-min($breakpoint) {
|
|
@if map-has-key($min-breakpoints, $breakpoint) {
|
|
$breakpoint-value: map-get($min-breakpoints, $breakpoint);
|
|
|
|
@media (min-width: $breakpoint-value) {
|
|
@content;
|
|
}
|
|
} @else {
|
|
@warn 'Invalid breakpoint: #{$breakpoint}.';
|
|
}
|
|
}
|
|
|
|
// max width
|
|
@mixin mq-max($breakpoint) {
|
|
@if map-has-key($max-breakpoints, $breakpoint) {
|
|
$breakpoint-value: map-get($max-breakpoints, $breakpoint);
|
|
|
|
@media (max-width: ($breakpoint-value)) {
|
|
@content;
|
|
}
|
|
} @else {
|
|
@warn 'Invalid breakpoint: #{$breakpoint}.';
|
|
}
|
|
}
|
|
|
|
// min and max
|
|
@mixin mq-between($lower, $upper) {
|
|
@if map-has-key($max-breakpoints, $lower) and map-has-key($min-breakpoints, $upper) {
|
|
$lower-breakpoint: map-get($max-breakpoints, $lower);
|
|
$upper-breakpoint: map-get($min-breakpoints, $upper);
|
|
|
|
@media (min-width: $lower-breakpoint) and (max-width: ($upper-breakpoint - 1)) {
|
|
@content;
|
|
}
|
|
} @else {
|
|
@if (map-has-key($max-breakpoints, $lower) ==false) {
|
|
@warn 'Your lower breakpoint was invalid: #{$lower}.';
|
|
}
|
|
|
|
@if (map-has-key($min-breakpoints, $upper) ==false) {
|
|
@warn 'Your upper breakpoint was invalid: #{$upper}.';
|
|
}
|
|
}
|
|
}
|