rf-web/_sass/utils/responsive.scss

65 lines
1.0 KiB
SCSS
Raw Normal View History

/* --------------------------------------------------------------------------
* 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;
}
}
2020-07-29 13:02:51 +00:00
@mixin darkMode() {
@media (prefers-color-scheme: dark) {
@content;
}
}
2020-08-17 07:48:14 +00:00
.hide-mobile {
@include touch {
display: none;
}
}