General mobile & desktop queries. -only classes for hiding the the
opposite of desktop or mobile.
This commit is contained in:
@@ -5,6 +5,31 @@ $tablet-p-width: 768px;
|
|||||||
$tablet-l-width: 1024px;
|
$tablet-l-width: 1024px;
|
||||||
$desktop-width: 1200px;
|
$desktop-width: 1200px;
|
||||||
$desktop-l-width: 1600px;
|
$desktop-l-width: 1600px;
|
||||||
|
$mobile-width: 768px;
|
||||||
|
|
||||||
|
@mixin desktop {
|
||||||
|
@media (min-width: #{$mobile-width + 1px}) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin mobile {
|
||||||
|
@media (max-width: #{$mobile-width}) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.desktop-only {
|
||||||
|
@include mobile {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-only {
|
||||||
|
@include desktop {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Media
|
// Media
|
||||||
@mixin mobile-only{
|
@mixin mobile-only{
|
||||||
|
|||||||
Reference in New Issue
Block a user