Merge pull request #54 from twbs/overhaul-responsive-visibility

Overhaul of responsive visibility classes

12 files changed, 38 insertions, 140 deletions

diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 4802aea4c..692ac938b 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -218,7 +218,7 @@
 
 
 // Scale up controls for tablets and up
-@include media-sm {
+@include media-breakpoint-up(sm) {
   // Scale up the controls a smidge
   .carousel-control {
     .icon-prev,
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index 99c7e79c9..bd96d8f22 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -195,7 +195,7 @@
 //
 // TODO: remove?
 
-// @include media-sm {
+// @include media-breakpoint-up(sm) {
 //   .navbar-right {
 //     .dropdown-menu {
 //       .dropdown-menu-right();
diff --git a/scss/_forms.scss b/scss/_forms.scss
index dd2ff33df..f385c152f 100644
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -416,7 +416,7 @@ input[type="checkbox"] {
 .form-inline {
 
   // Kick in the inline
-  @include media-sm {
+  @include media-breakpoint-up(sm) {
     // Inline-block all the things for "inline"
     .form-group {
       display: inline-block;
@@ -516,7 +516,7 @@ input[type="checkbox"] {
 
   // Reset spacing and right align labels, but scope to media queries so that
   // labels on narrow viewports stack the same as a default form example.
-  @include media-sm {
+  @include media-breakpoint-up(sm) {
     .control-label {
       padding-top: ($padding-base-vertical + .1); // Default padding plus a border
       margin-bottom: 0;
@@ -537,14 +537,14 @@ input[type="checkbox"] {
   // Quick utility class for applying `.input-lg` and `.input-sm` styles to the
   // inputs and labels within a `.form-group`.
   .form-group-lg {
-    @include media-sm {
+    @include media-breakpoint-up(sm) {
       .control-label {
         padding-top: $padding-lg-vertical;
       }
     }
   }
   .form-group-sm {
-    @include media-sm {
+    @include media-breakpoint-up(sm) {
       .control-label {
         padding-top: ($padding-sm-vertical + .1);
       }
diff --git a/scss/_grid.scss b/scss/_grid.scss
index 1129cff6d..ed9f232af 100644
--- 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/_jumbotron.scss b/scss/_jumbotron.scss
index 61a5918b3..f826cd616 100644
--- a/scss/_jumbotron.scss
+++ b/scss/_jumbotron.scss
@@ -19,7 +19,7 @@
   border-top-color: darken($jumbotron-bg, 10%);
 }
 
-@include media-sm {
+@include media-breakpoint-up(sm) {
   .jumbotron {
     padding: ($jumbotron-padding * 2) $jumbotron-padding;
   }
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 5cba1afdf..36f52a893 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -25,7 +25,6 @@
 
 // Utilities
 @import "mixins/breakpoints";
-@import "mixins/media-queries";
 @import "mixins/hide-text";
 @import "mixins/image";
 @import "mixins/label";
diff --git a/scss/_modal.scss b/scss/_modal.scss
index 2566c3ef2..da3b90c0b 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -126,7 +126,7 @@
 }
 
 // Scale up the modal
-@include media-sm {
+@include media-breakpoint-up(sm) {
   // Automatically set modal's width for larger viewports
   .modal-dialog {
     width: $modal-md;
@@ -140,6 +140,6 @@
   .modal-sm { width: $modal-sm; }
 }
 
-@include media-md {
+@include media-breakpoint-up(md) {
   .modal-lg { width: $modal-lg; }
 }
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index b163dad9c..2c12049a0 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -14,7 +14,7 @@
   margin-bottom: $navbar-margin-bottom;
   @include clearfix;
 
-  @include media-sm {
+  @include media-breakpoint-up(sm) {
     @include border-radius($navbar-border-radius);
   }
 }
@@ -30,7 +30,7 @@
 .navbar-static-top {
   z-index: $zindex-navbar;
 
-  @include media-sm {
+  @include media-breakpoint-up(sm) {
     @include border-radius(0);
   }
 }
@@ -45,7 +45,7 @@
   margin-bottom: 0; // override .navbar defaults
 
   // Undo the rounded corners
-  @include media-sm {
+  @include media-breakpoint-up(sm) {
     @include border-radius(0);
   }
 }
@@ -119,7 +119,7 @@
   @extend .form-inline;
 
   .form-group {
-    @include media-sm {
+    @include media-breakpoint-up(sm) {
       margin-bottom: 5px;
 
       &:last-child {
@@ -132,7 +132,7 @@
   // @include navbar-vertical-align($input-height-base);
 
   // Undo 100% width for pull classes
-  @include media-sm {
+  @include media-breakpoint-up(sm) {
     width: auto;
     padding-top: 0;
     padding-bottom: 0;
@@ -181,7 +181,7 @@
 .navbar-text {
   // @include navbar-vertical-align($line-height-computed);
 
-  @include media-sm {
+  @include media-breakpoint-up(sm) {
     float: left;
     margin-right: $navbar-padding-horizontal;
     margin-left: $navbar-padding-horizontal;
@@ -197,7 +197,7 @@
 //
 // Declared after the navbar components to ensure more specificity on the margins.
 
-@include media-sm {
+@include media-breakpoint-up(sm) {
   .navbar-left {
     @include pull-left();
   }
diff --git a/scss/_utilities-responsive.scss b/scss/_utilities-responsive.scss
index 8c77d1833..837cda7b9 100644
--- a/scss/_utilities-responsive.scss
+++ b/scss/_utilities-responsive.scss
@@ -2,6 +2,19 @@
 // Responsive: Utility classes
 // --------------------------------------------------
 
+@each $bp in map-keys($grid-breakpoints) {
+  .hidden-#{$bp}-up {
+    @include media-breakpoint-up($bp) {
+      display: none !important;
+    }
+  }
+  .hidden-#{$bp}-down {
+    @include media-breakpoint-down($bp) {
+      display: none !important;
+    }
+  }
+}
+
 
 // IE10 in Windows (Phone) 8
 //
@@ -23,98 +36,6 @@
 }
 
 
-.visible-xs-block,
-.visible-xs-inline,
-.visible-xs-inline-block,
-.visible-sm-block,
-.visible-sm-inline,
-.visible-sm-inline-block,
-.visible-md-block,
-.visible-md-inline,
-.visible-md-inline-block,
-.visible-lg-block,
-.visible-lg-inline,
-.visible-lg-inline-block {
-  display: none !important;
-}
-
-.visible-xs-block {
-  @include media-xs {
-    display: block !important;
-  }
-}
-.visible-xs-inline {
-  @include media-xs {
-    display: inline !important;
-  }
-}
-.visible-xs-inline-block {
-  @include media-xs {
-    display: inline-block !important;
-  }
-}
-
-.visible-sm-block {
-  @include media-sm-max {
-    display: block !important;
-  }
-}
-.visible-sm-inline {
-  @include media-sm-max {
-    display: inline !important;
-  }
-}
-.visible-sm-inline-block {
-  @include media-sm-max {
-    display: inline-block !important;
-  }
-}
-
-.visible-md-block {
-  @include media-md-max {
-    display: block !important;
-  }
-}
-.visible-md-inline {
-  @include media-md-max {
-    display: inline !important;
-  }
-}
-.visible-md-inline-block {
-  @include media-md-max {
-    display: inline-block !important;
-  }
-}
-
-.visible-lg-block {
-  @include media-lg {
-    display: block !important;
-  }
-}
-.visible-lg-inline {
-  @include media-lg {
-    display: inline !important;
-  }
-}
-.visible-lg-inline-block {
-  @include media-lg {
-    display: inline-block !important;
-  }
-}
-
-@include media-sm-max {
-  @include responsive-invisibility(".hidden-sm");
-}
-
-@include media-md-max {
-  @include responsive-invisibility(".hidden-md");
-}
-
-@include media-lg {
-  @include responsive-invisibility(".hidden-lg");
-}
-
-
 // Print utilities
 //
 // Media queries are placed on the inside to be mixin-friendly.
diff --git a/scss/mixins/_breakpoints.scss b/scss/mixins/_breakpoints.scss
index 71a15cd04..232b9416f 100644
--- 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 0d346db57..32705025e 100644
--- 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
deleted file mode 100644
index 28130d2e7..000000000
--- a/scss/mixins/_media-queries.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-// Media query mixins for default breakpoints
-
-@mixin media-xs() {
-  @include media-breakpoint-max(xs) { @content }
-}
-
-@mixin media-sm() {
-  @include media-breakpoint-min(sm) { @content }
-}
-
-@mixin media-sm-max() {
-  @include media-breakpoint-only(sm) { @content }
-}
-
-@mixin media-md() {
-  @include media-breakpoint-min(md) { @content }
-}
-
-@mixin media-md-max() {
-  @include media-breakpoint-only(md) { @content }
-}
-
-@mixin media-lg() {
-  @include media-breakpoint-min(lg) { @content }
-}