69 lines
1.2 KiB
SCSS
69 lines
1.2 KiB
SCSS
$breakpoints: (
|
|
xs: 576px,
|
|
sm: 768px,
|
|
md: 992px,
|
|
lg: 1200px
|
|
);
|
|
|
|
|
|
@mixin respond-above($breakpoint)
|
|
{
|
|
@if map-has-key($breakpoints, $breakpoint)
|
|
{
|
|
$breakpoint-value: map-get($breakpoints, $breakpoint);
|
|
|
|
@media (min-width: $breakpoint-value)
|
|
{
|
|
@content;
|
|
}
|
|
}
|
|
@else
|
|
{
|
|
@warn 'Invalid breakpoint: #{$breakpoint}.';
|
|
}
|
|
}
|
|
|
|
|
|
@mixin respond-below($breakpoint)
|
|
{
|
|
@if map-has-key($breakpoints, $breakpoint)
|
|
{
|
|
$breakpoint-value: map-get($breakpoints, $breakpoint);
|
|
|
|
@media (max-width: ($breakpoint-value - 1))
|
|
{
|
|
@content;
|
|
}
|
|
}
|
|
@else
|
|
{
|
|
@warn 'Invalid breakpoint: #{$breakpoint}.';
|
|
}
|
|
}
|
|
|
|
|
|
@mixin respond-between($lower, $upper)
|
|
{
|
|
@if map-has-key($breakpoints, $lower) and map-has-key($breakpoints, $upper)
|
|
{
|
|
$lower-breakpoint: map-get($breakpoints, $lower);
|
|
$upper-breakpoint: map-get($breakpoints, $upper);
|
|
|
|
@media (min-width: $lower-breakpoint) and (max-width: ($upper-breakpoint - 1))
|
|
{
|
|
@content;
|
|
}
|
|
}
|
|
@else
|
|
{
|
|
@if (map-has-key($breakpoints, $lower) == false)
|
|
{
|
|
@warn 'Your lower breakpoint was invalid: #{$lower}.';
|
|
}
|
|
|
|
@if (map-has-key($breakpoints, $upper) == false)
|
|
{
|
|
@warn 'Your upper breakpoint was invalid: #{$upper}.';
|
|
}
|
|
}
|
|
} |