Commit 746e09f8 authored by Chris Rebert's avatar Chris Rebert

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

parent ff9c07f4
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
// For each breakpoint, define the maximum width of the container in a media query // For each breakpoint, define the maximum width of the container in a media query
@each $breakpoint, $container-max-width in $container-max-widths { @each $breakpoint, $container-max-width in $container-max-widths {
@include media-breakpoint-min($breakpoint) { @include media-breakpoint-up($breakpoint) {
max-width: $container-max-width; max-width: $container-max-width;
} }
} }
......
...@@ -39,7 +39,8 @@ ...@@ -39,7 +39,8 @@
} }
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint. // 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); $min: breakpoint-min($name, $breakpoints);
@if $min { @if $min {
@media (min-width: $min) { @media (min-width: $min) {
...@@ -51,7 +52,8 @@ ...@@ -51,7 +52,8 @@
} }
// Media of at most the maximum breakpoint width. No query for the largest breakpoint. // 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); $max: breakpoint-max($name, $breakpoints);
@if $max { @if $max {
@media (max-width: $max) { @media (max-width: $max) {
...@@ -64,6 +66,7 @@ ...@@ -64,6 +66,7 @@
// Media between the breakpoint's minimum and maximum widths. // Media between the breakpoint's minimum and maximum widths.
// No minimum for the smallest breakpoint, and no maximum for the largest one. // 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-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
// Nested media query combination does not work in libsass yet // Nested media query combination does not work in libsass yet
// https://github.com/sass/libsass/issues/185 // https://github.com/sass/libsass/issues/185
...@@ -76,8 +79,8 @@ ...@@ -76,8 +79,8 @@
} }
} @else { } @else {
// One of min or max is a no-op, so this branch is not affected by libsass#185 // 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-up($name, $breakpoints) {
@include media-breakpoint-max($name, $breakpoints) { @include media-breakpoint-down($name, $breakpoints) {
@content; @content;
} }
} }
......
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
@extend %grid-column; @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) // Work around cross-media @extend (https://github.com/sass/sass/issues/1050)
%grid-column-float-#{$breakpoint} { %grid-column-float-#{$breakpoint} {
float: left; float: left;
......
// Media query mixins for default breakpoints // Media query mixins for default breakpoints
@mixin media-xs() { @mixin media-xs() {
@include media-breakpoint-max(xs) { @content } @include media-breakpoint-down(xs) { @content }
} }
@mixin media-sm() { @mixin media-sm() {
@include media-breakpoint-min(sm) { @content } @include media-breakpoint-up(sm) { @content }
} }
@mixin media-sm-max() { @mixin media-sm-max() {
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
} }
@mixin media-md() { @mixin media-md() {
@include media-breakpoint-min(md) { @content } @include media-breakpoint-up(md) { @content }
} }
@mixin media-md-max() { @mixin media-md-max() {
...@@ -21,5 +21,5 @@ ...@@ -21,5 +21,5 @@
} }
@mixin media-lg() { @mixin media-lg() {
@include media-breakpoint-min(lg) { @content } @include media-breakpoint-up(lg) { @content }
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment