Kill scss/mixins/_media-queries.scss

replaced media-xs => media-breakpoint-down(xs)
replaced media-sm => media-breakpoint-up(sm)
replaced media-sm-max => media-breakpoint-only(sm)
replaced media-md => media-breakpoint-up(md)
replaced media-md-max => media-breakpoint-only(md)
replaced media-lg => media-breakpoint-up(lg)
This commit is contained in:
Chris Rebert 2014-12-29 13:40:19 -08:00
parent 746e09f8ae
commit cbb3b1ff9a
9 changed files with 31 additions and 57 deletions

View File

@ -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,

View File

@ -195,7 +195,7 @@
//
// TODO: remove?
// @include media-sm {
// @include media-breakpoint-up(sm) {
// .navbar-right {
// .dropdown-menu {
// .dropdown-menu-right();

View File

@ -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);
}

View File

@ -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;
}

View File

@ -25,7 +25,6 @@
// Utilities
@import "mixins/breakpoints";
@import "mixins/media-queries";
@import "mixins/hide-text";
@import "mixins/image";
@import "mixins/label";

View File

@ -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; }
}

View File

@ -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();
}

View File

@ -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");
}

View File

@ -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 }
}