55 lines
1004 B
SCSS
55 lines
1004 B
SCSS
// Media queries settings
|
|
|
|
$phone-xs-width: 480px;
|
|
$tablet-p-width: 768px;
|
|
$tablet-l-width: 1024px;
|
|
$desktop-width: 1200px;
|
|
$desktop-l-width: 1600px;
|
|
|
|
// Media
|
|
@mixin mobile-only{
|
|
@media (max-width: #{$tablet-p-width - 1px}){
|
|
@content;
|
|
}
|
|
}
|
|
@mixin mobile-ls-min{
|
|
@media (min-width: #{$phone-xs-width}){
|
|
@content;
|
|
}
|
|
}
|
|
@mixin tablet-only{
|
|
@media (min-width: #{$tablet-p-width}) and (max-width: #{$desktop-width - 1px}){
|
|
@content;
|
|
}
|
|
}
|
|
@mixin tablet-min{
|
|
@media (min-width: #{$tablet-p-width}){
|
|
@content;
|
|
}
|
|
}
|
|
@mixin tablet-portrait-only{
|
|
@media (min-width: #{$tablet-p-width}) and (max-width: #{$tablet-l-width - 1px}){
|
|
@content;
|
|
}
|
|
}
|
|
@mixin tablet-landscape-min{
|
|
@media (min-width: #{$tablet-l-width}){
|
|
@content;
|
|
}
|
|
}
|
|
@mixin desktop-min{
|
|
@media (min-width: #{$desktop-width}){
|
|
@content;
|
|
}
|
|
}
|
|
@mixin desktop-lg-min{
|
|
@media (min-width: #{$desktop-l-width}){
|
|
@content;
|
|
}
|
|
}
|
|
@mixin retina{
|
|
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){
|
|
@content;
|
|
}
|
|
}
|