drinkMe/drinkMe/Client/SCSS/mixins.scss

48 lines
838 B
SCSS

//MEDIA QUERY MANAGER
/*$breakpoint argument choices:
- phone
- tab-port
- tab-land
- desk
- big-desktop
*/
@mixin MediaQuery($breakpoint) {
@if $breakpoint==phone {
@media screen and (max-width: 768px) {
@content
}
}
@if $breakpoint==tab-p {
@media screen and (min-width: 768px) and (max-width: 900px) {
@content
}
}
@if $breakpoint==tab-l {
@media screen and (min-width: 901px) and (max-width: 1200px) {
@content
}
}
@if $breakpoint==laptop {
@media screen and (min-width: 1201px) and (max-width: 1366px) {
@content
}
}
@if $breakpoint==desk {
@media screen and (min-width: 1201px) and (max-width: 1800px) {
@content
}
}
@if $breakpoint==big-d {
@media screen and (min-width: 1801px) and (max-width: 4000px) {
@content
}
}
}