mail/src/sass/_responsive.scss

34 lines
1.1 KiB
SCSS
Executable File

// Central Media Query Helper
// -------------------------
@mixin respond-to($media) {
@if $media == mobile {
@media only screen and (max-width: $respond-size-desktop - 1) { @content; }
}
@else if $media == desktop {
@media only screen and (min-width: $respond-size-desktop) { @content; }
}
@else if $media == retina {
@media all and (-webkit-min-device-pixel-ratio : 1.5),
all and (-o-min-device-pixel-ratio: 3/2),
all and (min--moz-device-pixel-ratio: 1.5),
all and (min-device-pixel-ratio: 1.5) {
@content
}
}
}
// Visibility classes (mobile first approach)
// -------------------------
.visible-phone { display: inherit !important; }
.hidden-phone { display: none !important; }
.visible-desktop { display: none !important; }
.hidden-desktop { display: inherit !important; }
@include respond-to(desktop) {
.visible-desktop { display: inherit !important; }
.hidden-desktop { display: none !important; }
.visible-phone { display: none !important; }
.hidden-phone { display: inherit !important; }
}