58 lines
934 B
SCSS
58 lines
934 B
SCSS
@mixin clearfix {
|
|
&::after {
|
|
content: "";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
}
|
|
|
|
@mixin absCenter {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
// MEDIA QUERY MANAGER
|
|
/*
|
|
* 0 - 600px : Phone
|
|
* 600 - 900px : Tablet portrait
|
|
* 900 - 1200px : Tablet landscape
|
|
* 1200 - 1800px : Normal desktop
|
|
* 1800px + : Big desktop
|
|
|
|
* $breakpoint argument choices
|
|
- phone
|
|
- tab-port
|
|
- tab-land
|
|
- big-desktop
|
|
|
|
1em = 16px
|
|
*/
|
|
@mixin respond($breakpoint) {
|
|
@if $breakpoint == phone {
|
|
@media (max-width: 37.5em) {
|
|
//600px
|
|
@content;
|
|
}
|
|
}
|
|
@if $breakpoint == tab-port {
|
|
@media (max-width: 56.25em) {
|
|
//900px
|
|
@content;
|
|
}
|
|
}
|
|
@if $breakpoint == tab-land {
|
|
@media (max-width: 75em) {
|
|
//1200px
|
|
@content;
|
|
}
|
|
}
|
|
@if $breakpoint == big-desktop {
|
|
@media (min-width: 112.5em) {
|
|
//1800px
|
|
@content;
|
|
}
|
|
}
|
|
}
|