diff --git a/scss/_carousel.scss b/scss/_carousel.scss index 4802aea4c9..692ac938bb 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 99c7e79c95..bd96d8f225 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 dd2ff33df3..f385c152f5 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/_jumbotron.scss b/scss/_jumbotron.scss index 61a5918b34..f826cd6160 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 5cba1afdf8..36f52a8932 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 2566c3ef2d..da3b90c0b4 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 b163dad9cd..2c12049a01 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 8c77d1833c..a25ec018eb 100644 --- a/scss/_utilities-responsive.scss +++ b/scss/_utilities-responsive.scss @@ -39,78 +39,78 @@ } .visible-xs-block { - @include media-xs { + @include media-breakpoint-down(xs) { display: block !important; } } .visible-xs-inline { - @include media-xs { + @include media-breakpoint-down(xs) { display: inline !important; } } .visible-xs-inline-block { - @include media-xs { + @include media-breakpoint-down(xs) { display: inline-block !important; } } .visible-sm-block { - @include media-sm-max { + @include media-breakpoint-only(sm) { display: block !important; } } .visible-sm-inline { - @include media-sm-max { + @include media-breakpoint-only(sm) { display: inline !important; } } .visible-sm-inline-block { - @include media-sm-max { + @include media-breakpoint-only(sm) { display: inline-block !important; } } .visible-md-block { - @include media-md-max { + @include media-breakpoint-only(md) { display: block !important; } } .visible-md-inline { - @include media-md-max { + @include media-breakpoint-only(md) { display: inline !important; } } .visible-md-inline-block { - @include media-md-max { + @include media-breakpoint-only(md) { display: inline-block !important; } } .visible-lg-block { - @include media-lg { + @include media-breakpoint-up(lg) { display: block !important; } } .visible-lg-inline { - @include media-lg { + @include media-breakpoint-up(lg) { display: inline !important; } } .visible-lg-inline-block { - @include media-lg { + @include media-breakpoint-up(lg) { display: inline-block !important; } } -@include media-sm-max { +@include media-breakpoint-only(sm) { @include responsive-invisibility(".hidden-sm"); } -@include media-md-max { +@include media-breakpoint-only(md) { @include responsive-invisibility(".hidden-md"); } -@include media-lg { +@include media-breakpoint-up(lg) { @include responsive-invisibility(".hidden-lg"); } diff --git a/scss/mixins/_media-queries.scss b/scss/mixins/_media-queries.scss deleted file mode 100644 index 99594e505c..0000000000 --- a/scss/mixins/_media-queries.scss +++ /dev/null @@ -1,25 +0,0 @@ -// Media query mixins for default breakpoints - -@mixin media-xs() { - @include media-breakpoint-down(xs) { @content } -} - -@mixin media-sm() { - @include media-breakpoint-up(sm) { @content } -} - -@mixin media-sm-max() { - @include media-breakpoint-only(sm) { @content } -} - -@mixin media-md() { - @include media-breakpoint-up(md) { @content } -} - -@mixin media-md-max() { - @include media-breakpoint-only(md) { @content } -} - -@mixin media-lg() { - @include media-breakpoint-up(lg) { @content } -}