mirror of
https://github.com/moparisthebest/mail
synced 2024-11-13 12:45:04 -05:00
31 lines
1.0 KiB
SCSS
31 lines
1.0 KiB
SCSS
|
// Central Media Query Helper
|
||
|
|
// -------------------------
|
||
|
|
|
||
|
|
@mixin respond-to($media) {
|
||
|
|
@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; }
|
||
|
|
}
|