fixes #22245: revamp the breakpoint-between and breakpoint-only mixins to actually work

1 files changed, 9 insertions, 5 deletions

diff --git a/scss/mixins/_breakpoints.scss b/scss/mixins/_breakpoints.scss
index 904b60f7a..be1d034d8 100644
--- a/scss/mixins/_breakpoints.scss
+++ b/scss/mixins/_breakpoints.scss
@@ -78,10 +78,11 @@
 // Media that spans multiple breakpoint widths.
 // Makes the @content apply between the min and max breakpoints
 @mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
-  @include media-breakpoint-up($lower, $breakpoints) {
-    @include media-breakpoint-down($upper, $breakpoints) {
-      @content;
-    }
+  $min: breakpoint-max($lower, $breakpoints);
+  $max: breakpoint-max($upper, $breakpoints);
+
+  @media (min-width: $min) and (max-width: $max) {
+    @content;
   }
 }
 
@@ -89,7 +90,10 @@
 // No minimum for the smallest breakpoint, and no maximum for the largest one.
 // Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
 @mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
-  @include media-breakpoint-between($name, $name, $breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+  $max: breakpoint-max($name, $breakpoints);
+
+  @media (min-width: $min) and (max-width: $max) {
     @content;
   }
 }