From 5d6e077067c269d1589e7432e5074af6fc64b2fb Mon Sep 17 00:00:00 2001
From: Oori <o@pluggable.biz>
Date: Wed, 9 Oct 2019 00:17:30 +0300
Subject: [PATCH] fix(css): update responsive display media queries (#18601)

BREAKING CHANGES

The responsive display classes found in the `display.css` file have had their media queries updated to better reflect how they should work. Instead of using the maximum value of that breakpoint (for `.ion-hide-{breakpoint}-down` classes) the maximum of the media query will be the minimum of that breakpoint.

fixes #18600
---
 core/src/components/menu/test/basic/index.html |  2 +-
 core/src/css/display.scss                      |  2 +-
 core/src/themes/ionic.mixins.scss              | 10 +++++-----
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/core/src/components/menu/test/basic/index.html b/core/src/components/menu/test/basic/index.html
index 0cac916ea3..c5474a06f6 100644
--- a/core/src/components/menu/test/basic/index.html
+++ b/core/src/components/menu/test/basic/index.html
@@ -93,7 +93,7 @@
     }
   </style>
 
-  <script>
+  <script type="module">
     const menuCtrl = document.querySelector('ion-menu-controller');
 
     async function openFirst() {
diff --git a/core/src/css/display.scss b/core/src/css/display.scss
index efee359f99..2b47da6404 100644
--- a/core/src/css/display.scss
+++ b/core/src/css/display.scss
@@ -10,7 +10,7 @@
   display: none !important;
 }
 
-// Adds hidden attributes
+// Adds hidden classes
 @each $breakpoint in map-keys($screen-breakpoints) {
   $infix: breakpoint-infix($breakpoint, $screen-breakpoints);
 
diff --git a/core/src/themes/ionic.mixins.scss b/core/src/themes/ionic.mixins.scss
index 6fe25be231..31410387e8 100644
--- a/core/src/themes/ionic.mixins.scss
+++ b/core/src/themes/ionic.mixins.scss
@@ -111,14 +111,14 @@
   @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
 }
 
-// Maximum breakpoint width. Null for the largest (last) breakpoint.
-// The maximum value is calculated as the minimum of the next one less 0.1.
+// Maximum breakpoint width. Null for the smallest (first) breakpoint.
+// The maximum value is calculated as the minimum of the current one.
 //
 //    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
-//    767px
+//    576px
 @function breakpoint-max($name, $breakpoints: $screen-breakpoints) {
-  $next: breakpoint-next($name, $breakpoints);
-  @return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
+  $min: breakpoint-min($name, $breakpoints);
+  @return if($min, breakpoint-min($name, $breakpoints), null);
 }
 
 // Media of at most the maximum breakpoint width. No query for the largest breakpoint.