rf-web/_sass/utils/responsive.scss
2019-11-10 12:45:15 +01:00

53 lines
900 B
SCSS

/* --------------------------------------------------------------------------
* Breakpoints
*/
// Max mobile
@mixin mobile() {
@media (max-width: $breakpoint-tablet + 1px) {
@content;
}
}
// Min tablet
@mixin tablet() {
@media (min-width: $breakpoint-tablet) {
@content;
}
}
// Tablet only
@mixin tablet-only() {
@media (min-width: $breakpoint-tablet) and (max-width: $breakpoint-desktop + 1px) {
@content;
}
}
// Max tablet
@mixin touch() {
@media (max-width: $breakpoint-desktop + 1px) {
@content;
}
}
// Min Desktop
@mixin desktop() {
@media (min-width: $breakpoint-desktop) {
@content;
}
}
// Desktop only
@mixin desktop-only() {
@media (min-width: $breakpoint-desktop) and (max-width: $breakpoint-widescreen + 1px) {
@content;
}
}
// Min widescreen
@mixin widescreen() {
@media (min-width: $breakpoint-widescreen) {
@content;
}
}