Change scss breakpoints syntax

parent 0992a179
@import "sections";
@import "footer";
@media only screen and (min-width: 800px) { @import "800up"; }
@media only screen and (min-width: 1200px) { @import "1200up"; }
\ No newline at end of file
@include tablet-up { @import "tablet_up"; }
@include desktop-only { @import "desktop_only"; }
\ No newline at end of file
@mixin mobile-only {
@media only screen and (max-width: 800px) {
@content;
}
}
@mixin tablet-only {
@media only screen and (min-width: 800px) and (max-width: 1200px) {
@content;
}
}
@mixin desktop-only {
@media only screen and (min-width: 1200px) {
@content;
}
}
@mixin tablet-up {
@media only screen and (min-width: 800px) {
@content;
}
}
@mixin tablet-down {
@media only screen and (max-width: 1200px) {
@content;
}
}
\ No newline at end of file
......@@ -11,6 +11,7 @@
// Import Partials
@import "partials/typography";
@import "partials/mixins";
@import "partials/breakpoints";
@import "colors/backgrounds";
@import "colors/buttons";
......@@ -35,19 +36,20 @@
@import "layout/layout";
// Pages
@import "pages/home";
@import "pages/courses";
@import "pages/coding_gym";
// Mobile up base styles
@import "breakpoints/mobileup";
@import "breakpoints/mobile_up";
// Import media queries add more as you desire
@media only screen and (min-width: 800px) {
@import "breakpoints/800up";
@include tablet_up {
@import "breakpoints/tablet_up";
}
@media only screen and (min-width: 1200px) {
@import "breakpoints/1200up";
@include desktop_only {
@import "breakpoints/desktop_only";
}
// If IE support is needed you can add them here or create another stylesheet for specific IE fixes
\ No newline at end of file
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment