83 lines
1.4 KiB
SCSS
83 lines
1.4 KiB
SCSS
// CONSTANTS
|
|
|
|
// Directions
|
|
|
|
$UPWARDS-OPEN: 2;
|
|
$DOWNWARDS-OPEN: 1;
|
|
$LIMITED: 0;
|
|
|
|
// Widths
|
|
|
|
$phone-width: 480px;
|
|
$tablet-width: 768px;
|
|
$notebook-width: 980px;
|
|
$desktop-width: 1280px;
|
|
|
|
// Queries
|
|
|
|
@mixin small-phone($direction:0) {
|
|
/* small phone */
|
|
@include querybuilder(0, $phone-width, $direction) {
|
|
@content
|
|
}
|
|
}
|
|
|
|
@mixin phone($direction:0) {
|
|
/* phone */
|
|
@include querybuilder($phone-width, $tablet-width, $direction) {
|
|
@content
|
|
}
|
|
}
|
|
|
|
@mixin tablet($direction:0) {
|
|
/* tablet */
|
|
@include querybuilder($tablet-width, $notebook-width, $direction) {
|
|
@content
|
|
}
|
|
}
|
|
|
|
@mixin notebook($direction:0) {
|
|
/* notebook */
|
|
@include querybuilder($notebook-width, $desktop-width, $direction) {
|
|
@content
|
|
}
|
|
}
|
|
|
|
@mixin desktop($direction:0) {
|
|
/* desktop */
|
|
@include querybuilder($desktop-width, 99999, $direction) {
|
|
@content
|
|
}
|
|
}
|
|
|
|
@mixin print {
|
|
@media print {
|
|
@content
|
|
}
|
|
}
|
|
|
|
|
|
//QUERY-BUILDER
|
|
|
|
@mixin querybuilder($low-px, $high-px, $direction) {
|
|
@if $direction == $LIMITED {
|
|
@media (min-width: $low-px) and (max-width: $high-px - 1) {
|
|
@content
|
|
}
|
|
} @else if ($direction == $DOWNWARDS-OPEN) {
|
|
@media (max-width: $high-px - 1) {
|
|
@content
|
|
}
|
|
} @else if ($direction == $UPWARDS-OPEN) {
|
|
@media (min-width: $low-px) {
|
|
@content
|
|
}
|
|
} @else {
|
|
|
|
/*
|
|
* ERROR @ querybuilder mixin:
|
|
* No such direction!
|
|
*/
|
|
|
|
}
|
|
} |