rename media-breakpoint-{min,max} => media-breakpoint-{up,down}

diff --git a/scss/_grid.scss b/scss/_grid.scss
index 1129cff6d024a926c36ff3179dd5a517c9f7b954..ed9f232af04d4cffe496e07dfddd5605b7d78b23 100644 (file)
--- a/scss/_grid.scss
+++ b/scss/_grid.scss
@@ -12,7 +12,7 @@
 
   // For each breakpoint, define the maximum width of the container in a media query
   @each $breakpoint, $container-max-width in $container-max-widths {
-    @include media-breakpoint-min($breakpoint) {
+    @include media-breakpoint-up($breakpoint) {
       max-width: $container-max-width;
     }
   }

diff --git a/scss/mixins/_breakpoints.scss b/scss/mixins/_breakpoints.scss
index 71a15cd0430a21def001094952151d7574c2501b..232b9416f9553cd43e24a6f062abf571a2d20f4b 100644 (file)
--- a/scss/mixins/_breakpoints.scss
+++ b/scss/mixins/_breakpoints.scss
@@ -39,7 +39,8 @@
 }
 
 // Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
-@mixin media-breakpoint-min($name, $breakpoints: $grid-breakpoints) {
+// Makes the @content apply to the given breakpoint and wider.
+@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
   $min: breakpoint-min($name, $breakpoints);
   @if $min {
     @media (min-width: $min) {
@@ -51,7 +52,8 @@
 }
 
 // Media of at most the maximum breakpoint width. No query for the largest breakpoint.
-@mixin media-breakpoint-max($name, $breakpoints: $grid-breakpoints) {
+// Makes the @content apply to the given breakpoint and narrower.
+@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
   $max: breakpoint-max($name, $breakpoints);
   @if $max {
     @media (max-width: $max) {
@@ -64,6 +66,7 @@
 
 // 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) {
   // Nested media query combination does not work in libsass yet
   // https://github.com/sass/libsass/issues/185
@@ -76,8 +79,8 @@
     }
   } @else {
     // One of min or max is a no-op, so this branch is not affected by libsass#185
-    @include media-breakpoint-min($name, $breakpoints) {
-      @include media-breakpoint-max($name, $breakpoints) {
+    @include media-breakpoint-up($name, $breakpoints) {
+      @include media-breakpoint-down($name, $breakpoints) {
         @content;
       }
     }

diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss
index 0d346db57d81c987cb334869b581f61dc5d0db95..32705025e067073c77d928b77d1a47ac601bb292 100644 (file)
--- a/scss/mixins/_grid-framework.scss
+++ b/scss/mixins/_grid-framework.scss
@@ -19,7 +19,7 @@
         @extend %grid-column;
       }
     }
-    @include media-breakpoint-min($breakpoint) {
+    @include media-breakpoint-up($breakpoint) {
       // Work around cross-media @extend (https://github.com/sass/sass/issues/1050)
       %grid-column-float-#{$breakpoint} {
         float: left;

diff --git a/scss/mixins/_media-queries.scss b/scss/mixins/_media-queries.scss
index 28130d2e7ea25f4b98ef5541a3a2da771be2729e..99594e505c1c674df37c4709821801cc2a686ded 100644 (file)
--- a/scss/mixins/_media-queries.scss
+++ b/scss/mixins/_media-queries.scss
@@ -1,11 +1,11 @@
 // Media query mixins for default breakpoints
 
 @mixin media-xs() {
-  @include media-breakpoint-max(xs) { @content }
+  @include media-breakpoint-down(xs) { @content }
 }
 
 @mixin media-sm() {
-  @include media-breakpoint-min(sm) { @content }
+  @include media-breakpoint-up(sm) { @content }
 }
 
 @mixin media-sm-max() {
@@ -13,7 +13,7 @@
 }
 
 @mixin media-md() {
-  @include media-breakpoint-min(md) { @content }
+  @include media-breakpoint-up(md) { @content }
 }
 
 @mixin media-md-max() {
@@ -21,5 +21,5 @@
 }
 
 @mixin media-lg() {
-  @include media-breakpoint-min(lg) { @content }
+  @include media-breakpoint-up(lg) { @content }
 }