fix(core): update breakpoints ranges to avoid overlapping (#1075)

In Chrome, .99 is treated as 1 which cause ranges to overlap at the exact breakpoint.

> Note: the behavior might not be considered as a bug in chrome as in [W3 specifications](https://www.w3.org/TR/mediaqueries-4/#mq-min-max) it's mentioned that for sub-pixels or fractions it's preferred to use [the not widely supported range context](https://www.w3.org/TR/mediaqueries-4/#range-context).

Fixes #1052. Affects #1001.

Author: theKaleid

src/lib/core/breakpoints/data/break-points.ts

@@ -13,52 +13,52 @@ import {BreakPoint} from '../break-point';
 export const DEFAULT_BREAKPOINTS: BreakPoint[] = [
   {
     alias: 'xs',
-    mediaQuery: 'screen and (min-width: 0px) and (max-width: 599.99px)',
+    mediaQuery: 'screen and (min-width: 0px) and (max-width: 599.9px)',
     priority: 1000,
   },
   {
     alias: 'sm',
-    mediaQuery: 'screen and (min-width: 600px) and (max-width: 959.99px)',
+    mediaQuery: 'screen and (min-width: 600px) and (max-width: 959.9px)',
     priority: 900,
   },
   {
     alias: 'md',
-    mediaQuery: 'screen and (min-width: 960px) and (max-width: 1279.99px)',
+    mediaQuery: 'screen and (min-width: 960px) and (max-width: 1279.9px)',
     priority: 800,
   },
   {
     alias: 'lg',
-    mediaQuery: 'screen and (min-width: 1280px) and (max-width: 1919.99px)',
+    mediaQuery: 'screen and (min-width: 1280px) and (max-width: 1919.9px)',
     priority: 700,
   },
   {
     alias: 'xl',
-    mediaQuery: 'screen and (min-width: 1920px) and (max-width: 4999.99px)',
+    mediaQuery: 'screen and (min-width: 1920px) and (max-width: 4999.9px)',
     priority: 600,
   },
   {
     alias: 'lt-sm',
     overlapping: true,
-    mediaQuery: 'screen and (max-width: 599.99px)',
+    mediaQuery: 'screen and (max-width: 599.9px)',
     priority: 950,
   },
   {
     alias: 'lt-md',
     overlapping: true,
-    mediaQuery: 'screen and (max-width: 959.99px)',
+    mediaQuery: 'screen and (max-width: 959.9px)',
     priority: 850,
   },
   {
     alias: 'lt-lg',
     overlapping: true,
-    mediaQuery: 'screen and (max-width: 1279.99px)',
+    mediaQuery: 'screen and (max-width: 1279.9px)',
     priority: 750,
   },
   {
     alias: 'lt-xl',
     overlapping: true,
     priority: 650,
-    mediaQuery: 'screen and (max-width: 1919.99px)',
+    mediaQuery: 'screen and (max-width: 1919.9px)',
   },
   {
     alias: 'gt-xs',

src/lib/core/breakpoints/data/orientation-break-points.ts

@@ -9,11 +9,11 @@
 import {BreakPoint} from '../break-point';
 
 /* tslint:disable */
-const HANDSET_PORTRAIT  = '(orientation: portrait) and (max-width: 599.99px)';
-const HANDSET_LANDSCAPE = '(orientation: landscape) and (max-width: 959.99px)';
+const HANDSET_PORTRAIT  = '(orientation: portrait) and (max-width: 599.9px)';
+const HANDSET_LANDSCAPE = '(orientation: landscape) and (max-width: 959.9px)';
 
-const TABLET_PORTRAIT   = '(orientation: portrait) and (min-width: 600px) and (max-width: 839.99px)';
-const TABLET_LANDSCAPE  = '(orientation: landscape) and (min-width: 960px) and (max-width: 1279.99px)';
+const TABLET_PORTRAIT   = '(orientation: portrait) and (min-width: 600px) and (max-width: 839.9px)';
+const TABLET_LANDSCAPE  = '(orientation: landscape) and (min-width: 960px) and (max-width: 1279.9px)';
 
 const WEB_PORTRAIT      = '(orientation: portrait) and (min-width: 840px)';
 const WEB_LANDSCAPE     = '(orientation: landscape) and (min-width: 1280px)';

src/lib/core/media-observer/media-observer.spec.ts

@@ -181,7 +181,7 @@ describe('media-observer', () => {
   describe('with custom BreakPoints', () => {
     const gtXsMediaQuery = 'screen and (min-width:120px) and (orientation:landscape)';
     const superXLQuery = 'screen and (min-width:10000px)';
-    const smMediaQuery = 'screen and (min-width: 600px) and (max-width: 959.99px)';
+    const smMediaQuery = 'screen and (min-width: 600px) and (max-width: 959.9px)';
 
     const CUSTOM_BREAKPOINTS = [
       {alias: 'slate.xl', priority: 11000, mediaQuery: superXLQuery},
@@ -236,7 +236,7 @@ describe('media-observer', () => {
   });
 
   describe('with layout "print" configured', () => {
-    const mdMediaQuery = 'screen and (min-width: 960px) and (max-width: 1279.99px)';
+    const mdMediaQuery = 'screen and (min-width: 960px) and (max-width: 1279.9px)';
 
     beforeEach(() => {
       // Configure testbed to prepare services
@@ -288,7 +288,7 @@ describe('media-observer', () => {
   });
 
   describe('with layout print NOT configured', () => {
-    const smMediaQuery = 'screen and (min-width: 600px) and (max-width: 959.99px)';
+    const smMediaQuery = 'screen and (min-width: 600px) and (max-width: 959.9px)';
 
     beforeEach(() => {
       // Configure testbed to prepare services

src/lib/core/sass/_layout-bp.scss

@@ -5,19 +5,19 @@
 $breakpoints: (
   xs: (
     begin: 0,
-    end: 599.99px
+    end: 599.9px
   ),
   sm: (
     begin: 600px,
-    end: 959.99px
+    end: 959.9px
   ),
   md: (
     begin: 960px,
-    end: 1279.99px
+    end: 1279.9px
   ),
   lg: (
     begin: 1280px,
-    end: 1919.99px
+    end: 1919.9px
   ),
   xl: (
     begin: 1920px,
@@ -39,10 +39,10 @@ $overlapping-gt: (
 // Material Design breakpoints
 // @type map
 $overlapping-lt: (
-  lt-sm: 599.99px,
-  lt-md: 959.99px,
-  lt-lg: 1279.99px,
-  lt-xl: 1919.99px,
+  lt-sm: 599.9px,
+  lt-md: 959.9px,
+  lt-lg: 1279.9px,
+  lt-xl: 1919.9px,
 ) !default;