fix(breakpoints): support print media (#367)

Previous breakpoints defined mediaQueries like `screen and (max-width: 599px)`. This means that all responsive layouts (using .xs, .sm, etc.) will not print properly since `@media print` is excluded by the `screen and ...` breakpoint definitions. Remove all `screen and ` @media prefixes; so the layouts will appear the same on both display and print devices. Fixes #361.
angular · Aug 7, 2017 · 37a0b85 · 37a0b85
1 parent 635c4f5
commit 37a0b85
Showing 1 changed file with 13 additions and 13 deletions.
diff --git a/src/lib/media-query/breakpoints/data/break-points.ts b/src/lib/media-query/breakpoints/data/break-points.ts
@@ -14,63 +14,63 @@ export const RESPONSIVE_ALIASES = [
 export const DEFAULT_BREAKPOINTS: BreakPoint[] = [
   {
     alias: 'xs',
-    mediaQuery: 'screen and (max-width: 599px)'
+    mediaQuery: '(max-width: 599px)'
   },
   {
     alias: 'gt-xs',
     overlapping: true,
-    mediaQuery: 'screen and (min-width: 600px)'
+    mediaQuery: '(min-width: 600px)'
   },
   {
     alias: 'lt-sm',
     overlapping: true,
-    mediaQuery: 'screen and (max-width: 599px)'
+    mediaQuery: '(max-width: 599px)'
   },
   {
     alias: 'sm',
-    mediaQuery: 'screen and (min-width: 600px) and (max-width: 959px)'
+    mediaQuery: '(min-width: 600px) and (max-width: 959px)'
   },
   {
     alias: 'gt-sm',
     overlapping: true,
-    mediaQuery: 'screen and (min-width: 960px)'
+    mediaQuery: '(min-width: 960px)'
   },
   {
     alias: 'lt-md',
     overlapping: true,
-    mediaQuery: 'screen and (max-width: 959px)'
+    mediaQuery: '(max-width: 959px)'
   },
   {
     alias: 'md',
-    mediaQuery: 'screen and (min-width: 960px) and (max-width: 1279px)'
+    mediaQuery: '(min-width: 960px) and (max-width: 1279px)'
   },
   {
     alias: 'gt-md',
     overlapping: true,
-    mediaQuery: 'screen and (min-width: 1280px)'
+    mediaQuery: '(min-width: 1280px)'
   },
   {
     alias: 'lt-lg',
     overlapping: true,
-    mediaQuery: 'screen and (max-width: 1279px)'
+    mediaQuery: '(max-width: 1279px)'
   },
   {
     alias: 'lg',
-    mediaQuery: 'screen and (min-width: 1280px) and (max-width: 1919px)'
+    mediaQuery: '(min-width: 1280px) and (max-width: 1919px)'
   },
   {
     alias: 'gt-lg',
     overlapping: true,
-    mediaQuery: 'screen and (min-width: 1920px)'
+    mediaQuery: '(min-width: 1920px)'
   },
   {
     alias: 'lt-xl',
     overlapping: true,
-    mediaQuery: 'screen and (max-width: 1920px)'
+    mediaQuery: '(max-width: 1920px)'
   },
   {
     alias: 'xl',
-    mediaQuery: 'screen and (min-width: 1920px) and (max-width: 5000px)'
+    mediaQuery: '(min-width: 1920px) and (max-width: 5000px)'
   }
 ];