Media query mixin updates for v5

- Use current breakpoint instead of next breakpoint for `media-breakpoint-down()` & `media-breakpoint-between()`
- Rename `media-breakpoint-down()` to `media-max()`
- Rename `media-breakpoint-up()` to `media-min()`
- Rename `media-breakpoint-between()` to `media-between()`
- Rename `media-breakpoint-only()` to `media-only()`

scss/_card.scss

@@ -157,7 +157,7 @@
     margin-bottom: $card-deck-margin;
   }
 
-  @include media-breakpoint-up(sm) {
+  @include media-min(sm) {
     display: flex;
     flex-flow: row wrap;
     margin-right: -$card-deck-margin;
@@ -185,7 +185,7 @@
     margin-bottom: $card-group-margin;
   }
 
-  @include media-breakpoint-up(sm) {
+  @include media-min(sm) {
     display: flex;
     flex-flow: row wrap;
     // The child selector allows nested `.card` within `.card-group`

scss/_containers.scss

@@ -20,7 +20,7 @@
       @extend .container-fluid;
     }
 
-    @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
+    @include media-min($breakpoint, $grid-breakpoints) {
       %responsive-container-#{$breakpoint} {
         max-width: $container-max-width;
       }

scss/_dropdown.scss

@@ -35,7 +35,7 @@
 }
 
 @each $breakpoint in map-keys($grid-breakpoints) {
-  @include media-breakpoint-up($breakpoint) {
+  @include media-min($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
     .dropdown-menu#{$infix}-left {

scss/_list-group.scss

@@ -90,7 +90,7 @@
 // Change the layout of list group items from vertical (default) to horizontal.
 
 @each $breakpoint in map-keys($grid-breakpoints) {
-  @include media-breakpoint-up($breakpoint) {
+  @include media-min($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
     .list-group-horizontal#{$infix} {

scss/_modal.scss

@@ -196,7 +196,7 @@
 }
 
 // Scale up the modal
-@include media-breakpoint-up(sm) {
+@include media-min(sm) {
   // Automatically set modal's width for larger viewports
   .modal-dialog {
     max-width: $modal-md;
@@ -226,13 +226,13 @@
   .modal-sm { max-width: $modal-sm; }
 }
 
-@include media-breakpoint-up(lg) {
+@include media-min(lg) {
   .modal-lg,
   .modal-xl {
     max-width: $modal-lg;
   }
 }
 
-@include media-breakpoint-up(xl) {
+@include media-min(xl) {
   .modal-xl { max-width: $modal-xl; }
 }

scss/_navbar.scss

@@ -150,11 +150,10 @@
 // where your navbar collapses.
 .navbar-expand {
   @each $breakpoint in map-keys($grid-breakpoints) {
-    $next: breakpoint-next($breakpoint, $grid-breakpoints);
-    $infix: breakpoint-infix($next, $grid-breakpoints);
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
     &#{$infix} {
-      @include media-breakpoint-up($next) {
+      @include media-min($breakpoint) {
         flex-wrap: nowrap;
         justify-content: flex-start;
 

scss/_tables.scss

@@ -169,11 +169,10 @@
 
 .table-responsive {
   @each $breakpoint in map-keys($grid-breakpoints) {
-    $next: breakpoint-next($breakpoint, $grid-breakpoints);
-    $infix: breakpoint-infix($next, $grid-breakpoints);
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
     &#{$infix} {
-      @include media-breakpoint-down($breakpoint) {
+      @include media-max($breakpoint) {
         display: block;
         width: 100%;
         overflow-x: auto;

scss/forms/_layout.scss

@@ -36,7 +36,7 @@
   }
 
   // Kick in the inline
-  @include media-breakpoint-up(sm) {
+  @include media-min(sm) {
     label {
       display: flex;
       align-items: center;

scss/helpers/_position.scss

@@ -19,7 +19,7 @@
 // Responsive sticky top
 @supports (position: sticky) {
   @each $breakpoint in map-keys($grid-breakpoints) {
-    @include media-breakpoint-up($breakpoint) {
+    @include media-min($breakpoint) {
       $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
       .sticky#{$infix}-top {

scss/mixins/_breakpoints.scss

@@ -31,18 +31,18 @@
   @return if($min != 0, $min, null);
 }
 
-// Maximum breakpoint width. Null for the largest (last) breakpoint.
-// The maximum value is calculated as the minimum of the next one less 0.02px
-// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.
+// Maximum breakpoint width.
+// The maximum value reduced by 0.02px to work around the limitations of
+// `min-` and `max-` prefixes and viewports with fractional widths.
 // See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
 // Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
 // See https://bugs.webkit.org/show_bug.cgi?id=178261
 //
-//    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    767.98px
 @function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
-  $next: breakpoint-next($name, $breakpoints);
-  @return if($next, breakpoint-min($next, $breakpoints) - .02, null);
+  $max: map-get($breakpoints, $name);
+  @return if($max and $max > 0, $max - .02, null);
 }
 
 // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
@@ -58,7 +58,7 @@
 
 // Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
 // Makes the @content apply to the given breakpoint and wider.
-@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
+@mixin media-min($name, $breakpoints: $grid-breakpoints) {
   $min: breakpoint-min($name, $breakpoints);
   @if $min {
     @media (min-width: $min) {
@@ -71,7 +71,7 @@
 
 // Media of at most the maximum breakpoint width. No query for the largest breakpoint.
 // Makes the @content apply to the given breakpoint and narrower.
-@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
+@mixin media-max($name, $breakpoints: $grid-breakpoints) {
   $max: breakpoint-max($name, $breakpoints);
   @if $max {
     @media (max-width: $max) {
@@ -84,7 +84,7 @@
 
 // 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) {
+@mixin media-between($lower, $upper, $breakpoints: $grid-breakpoints) {
   $min: breakpoint-min($lower, $breakpoints);
   $max: breakpoint-max($upper, $breakpoints);
 
@@ -93,11 +93,11 @@
       @content;
     }
   } @else if $max == null {
-    @include media-breakpoint-up($lower, $breakpoints) {
+    @include media-min($lower, $breakpoints) {
       @content;
     }
   } @else if $min == null {
-    @include media-breakpoint-down($upper, $breakpoints) {
+    @include media-max($upper, $breakpoints) {
       @content;
     }
   }
@@ -106,20 +106,20 @@
 // Media between the breakpoint's minimum and maximum widths.
 // 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) {
+@mixin media-only($name, $breakpoints: $grid-breakpoints) {
   $min: breakpoint-min($name, $breakpoints);
-  $max: breakpoint-max($name, $breakpoints);
+  $max: breakpoint-max(breakpoint-next($name, $breakpoints));
 
   @if $min != null and $max != null {
     @media (min-width: $min) and (max-width: $max) {
       @content;
     }
   } @else if $max == null {
-    @include media-breakpoint-up($name, $breakpoints) {
+    @include media-min($name, $breakpoints) {
       @content;
     }
   } @else if $min == null {
-    @include media-breakpoint-down($name, $breakpoints) {
+    @include media-max($name, $breakpoints) {
       @content;
     }
   }

scss/mixins/_container.scss

@@ -12,7 +12,7 @@
 // For each breakpoint, define the maximum width of the container in a media query
 @mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
   @each $breakpoint, $container-max-width in $max-widths {
-    @include media-breakpoint-up($breakpoint, $breakpoints) {
+    @include media-min($breakpoint, $breakpoints) {
       max-width: $container-max-width;
     }
   }

scss/mixins/_grid.scss

@@ -78,7 +78,7 @@
       @extend %grid-column;
     }
 
-    @include media-breakpoint-up($breakpoint, $breakpoints) {
+    @include media-min($breakpoint, $breakpoints) {
       // Provide basic `.col-{bp}` classes for equal-width flexbox columns
       .col#{$infix} {
         flex-basis: 0;

scss/utilities/_api.scss

@@ -2,7 +2,7 @@
 @each $breakpoint in map-keys($grid-breakpoints) {
 
   // Generate media query if needed
-  @include media-breakpoint-up($breakpoint) {
+  @include media-min($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
     // Loop over each utility property

site/assets/scss/_ads.scss

@@ -21,7 +21,7 @@
     text-decoration: none;
   }
 
-  @include media-breakpoint-up(sm) {
+  @include media-min(sm) {
     max-width: 330px;
     @include border-radius(4px);
   }

site/assets/scss/_algolia.scss

@@ -14,7 +14,7 @@
   @include border-radius($dropdown-border-radius);
   @include box-shadow($dropdown-box-shadow);
 
-  @include media-breakpoint-up(md) {
+  @include media-min(md) {
     // stylelint-disable declaration-no-important
     right: 0 !important; // Override inline style
     left: auto !important; // Override inline style

site/assets/scss/_brand.scss

@@ -21,7 +21,7 @@
     border-top: 1px solid $white;
   }
 
-  @include media-breakpoint-up(md) {
+  @include media-min(md) {
     + .bd-brand-item {
       border-top: 0;
       border-left: 1px solid $white;
@@ -60,7 +60,7 @@
   margin-left: .25rem;
   @include border-radius();
 
-  @include media-breakpoint-up(md) {
+  @include media-min(md) {
     width: 6rem;
     height: 6rem;
   }

site/assets/scss/_clipboard-js.scss

@@ -11,7 +11,7 @@
     margin-top: 0;
   }
 
-  @include media-breakpoint-up(md) {
+  @include media-min(md) {
     display: block;
   }
 }

site/assets/scss/_component-examples.scss

@@ -52,23 +52,23 @@
 .example-content-main {
   @include make-col-ready();
 
-  @include media-breakpoint-up(sm) {
+  @include media-min(sm) {
     @include make-col(6);
   }
 
-  @include media-breakpoint-up(lg) {
+  @include media-min(lg) {
     @include make-col(8);
   }
 }
 
 .example-content-secondary {
   @include make-col-ready();
 
-  @include media-breakpoint-up(sm) {
+  @include media-min(sm) {
     @include make-col(6);
   }
 
-  @include media-breakpoint-up(lg) {
+  @include media-min(lg) {
     @include make-col(4);
   }
 }
@@ -86,7 +86,7 @@
   border-width: .2rem 0 0;
   @include clearfix();
 
-  @include media-breakpoint-up(sm) {
+  @include media-min(sm) {
     padding: 1.5rem;
     margin-right: 0;
     margin-left: 0;
@@ -163,7 +163,7 @@
     margin: 1rem -1rem -1rem;
   }
 
-  @include media-breakpoint-up(sm) {
+  @include media-min(sm) {
     .fixed-top,
     .sticky-top {
       margin: -1.5rem -1.5rem 1rem;
@@ -235,7 +235,7 @@
   background-color: $gray-100;
   -ms-overflow-style: -ms-autohiding-scrollbar;
 
-  @include media-breakpoint-up(sm) {
+  @include media-min(sm) {
     padding: 1.5rem;
   }
 }
@@ -244,7 +244,7 @@
   margin-right: (-$grid-gutter-width / 2);
   margin-left: (-$grid-gutter-width / 2);
 
-  @include media-breakpoint-up(sm) {
+  @include media-min(sm) {
     margin-right: 0;
     margin-left: 0;
   }

site/assets/scss/_content.scss

@@ -39,7 +39,7 @@
     max-width: 100%;
     margin-bottom: 1.5rem;
 
-    @include media-breakpoint-down(md) {
+    @include media-max(lg) {
       display: block;
       overflow-x: auto;
 

site/assets/scss/_masthead.scss

@@ -16,7 +16,7 @@
     font-weight: 600;
   }
 
-  @include media-breakpoint-up(sm) {
+  @include media-min(sm) {
     padding: 5rem 0;
   }
 }
@@ -46,7 +46,7 @@
   }
 }
 
-@include media-breakpoint-up(md) {
+@include media-min(md) {
   .mw-md-75 { max-width: 75%; }
 }
 

site/assets/scss/_navbar.scss

@@ -2,7 +2,7 @@
   min-height: 4rem;
   background-color: $bd-purple-bright;
 
-  @include media-breakpoint-down(md) {
+  @include media-max(lg) {
     .navbar-nav-scroll {
       width: 100%;
       height: 2.5rem;

site/assets/scss/_sidebar.scss

@@ -1,7 +1,7 @@
 // stylelint-disable declaration-no-important
 
 .bd-links {
-  @include media-breakpoint-up(md) {
+  @include media-min(md) {
     @supports (position: sticky) {
       position: sticky;
       top: 5rem;
@@ -11,7 +11,7 @@
   }
 
   // Override collapse behaviors
-  @include media-breakpoint-up(md) {
+  @include media-min(md) {
     display: block !important;
   }
 }