1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-13 17:14:04 +02:00

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 // Scale up controls for tablets and up
@include media-sm { @include media-breakpoint-up(sm) {
// Scale up the controls a smidge // Scale up the controls a smidge
.carousel-control { .carousel-control {
.icon-prev, .icon-prev,

View File

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

View File

@@ -416,7 +416,7 @@ input[type="checkbox"] {
.form-inline { .form-inline {
// Kick in the inline // Kick in the inline
@include media-sm { @include media-breakpoint-up(sm) {
// Inline-block all the things for "inline" // Inline-block all the things for "inline"
.form-group { .form-group {
display: inline-block; display: inline-block;
@@ -516,7 +516,7 @@ input[type="checkbox"] {
// Reset spacing and right align labels, but scope to media queries so that // 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. // labels on narrow viewports stack the same as a default form example.
@include media-sm { @include media-breakpoint-up(sm) {
.control-label { .control-label {
padding-top: ($padding-base-vertical + .1); // Default padding plus a border padding-top: ($padding-base-vertical + .1); // Default padding plus a border
margin-bottom: 0; margin-bottom: 0;
@@ -537,14 +537,14 @@ input[type="checkbox"] {
// Quick utility class for applying `.input-lg` and `.input-sm` styles to the // Quick utility class for applying `.input-lg` and `.input-sm` styles to the
// inputs and labels within a `.form-group`. // inputs and labels within a `.form-group`.
.form-group-lg { .form-group-lg {
@include media-sm { @include media-breakpoint-up(sm) {
.control-label { .control-label {
padding-top: $padding-lg-vertical; padding-top: $padding-lg-vertical;
} }
} }
} }
.form-group-sm { .form-group-sm {
@include media-sm { @include media-breakpoint-up(sm) {
.control-label { .control-label {
padding-top: ($padding-sm-vertical + .1); padding-top: ($padding-sm-vertical + .1);
} }

View File

@@ -19,7 +19,7 @@
border-top-color: darken($jumbotron-bg, 10%); border-top-color: darken($jumbotron-bg, 10%);
} }
@include media-sm { @include media-breakpoint-up(sm) {
.jumbotron { .jumbotron {
padding: ($jumbotron-padding * 2) $jumbotron-padding; padding: ($jumbotron-padding * 2) $jumbotron-padding;
} }

View File

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

View File

@@ -126,7 +126,7 @@
} }
// Scale up the modal // Scale up the modal
@include media-sm { @include media-breakpoint-up(sm) {
// Automatically set modal's width for larger viewports // Automatically set modal's width for larger viewports
.modal-dialog { .modal-dialog {
width: $modal-md; width: $modal-md;
@@ -140,6 +140,6 @@
.modal-sm { width: $modal-sm; } .modal-sm { width: $modal-sm; }
} }
@include media-md { @include media-breakpoint-up(md) {
.modal-lg { width: $modal-lg; } .modal-lg { width: $modal-lg; }
} }

View File

@@ -14,7 +14,7 @@
margin-bottom: $navbar-margin-bottom; margin-bottom: $navbar-margin-bottom;
@include clearfix; @include clearfix;
@include media-sm { @include media-breakpoint-up(sm) {
@include border-radius($navbar-border-radius); @include border-radius($navbar-border-radius);
} }
} }
@@ -30,7 +30,7 @@
.navbar-static-top { .navbar-static-top {
z-index: $zindex-navbar; z-index: $zindex-navbar;
@include media-sm { @include media-breakpoint-up(sm) {
@include border-radius(0); @include border-radius(0);
} }
} }
@@ -45,7 +45,7 @@
margin-bottom: 0; // override .navbar defaults margin-bottom: 0; // override .navbar defaults
// Undo the rounded corners // Undo the rounded corners
@include media-sm { @include media-breakpoint-up(sm) {
@include border-radius(0); @include border-radius(0);
} }
} }
@@ -119,7 +119,7 @@
@extend .form-inline; @extend .form-inline;
.form-group { .form-group {
@include media-sm { @include media-breakpoint-up(sm) {
margin-bottom: 5px; margin-bottom: 5px;
&:last-child { &:last-child {
@@ -132,7 +132,7 @@
// @include navbar-vertical-align($input-height-base); // @include navbar-vertical-align($input-height-base);
// Undo 100% width for pull classes // Undo 100% width for pull classes
@include media-sm { @include media-breakpoint-up(sm) {
width: auto; width: auto;
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
@@ -181,7 +181,7 @@
.navbar-text { .navbar-text {
// @include navbar-vertical-align($line-height-computed); // @include navbar-vertical-align($line-height-computed);
@include media-sm { @include media-breakpoint-up(sm) {
float: left; float: left;
margin-right: $navbar-padding-horizontal; margin-right: $navbar-padding-horizontal;
margin-left: $navbar-padding-horizontal; margin-left: $navbar-padding-horizontal;
@@ -197,7 +197,7 @@
// //
// Declared after the navbar components to ensure more specificity on the margins. // Declared after the navbar components to ensure more specificity on the margins.
@include media-sm { @include media-breakpoint-up(sm) {
.navbar-left { .navbar-left {
@include pull-left(); @include pull-left();
} }

View File

@@ -39,78 +39,78 @@
} }
.visible-xs-block { .visible-xs-block {
@include media-xs { @include media-breakpoint-down(xs) {
display: block !important; display: block !important;
} }
} }
.visible-xs-inline { .visible-xs-inline {
@include media-xs { @include media-breakpoint-down(xs) {
display: inline !important; display: inline !important;
} }
} }
.visible-xs-inline-block { .visible-xs-inline-block {
@include media-xs { @include media-breakpoint-down(xs) {
display: inline-block !important; display: inline-block !important;
} }
} }
.visible-sm-block { .visible-sm-block {
@include media-sm-max { @include media-breakpoint-only(sm) {
display: block !important; display: block !important;
} }
} }
.visible-sm-inline { .visible-sm-inline {
@include media-sm-max { @include media-breakpoint-only(sm) {
display: inline !important; display: inline !important;
} }
} }
.visible-sm-inline-block { .visible-sm-inline-block {
@include media-sm-max { @include media-breakpoint-only(sm) {
display: inline-block !important; display: inline-block !important;
} }
} }
.visible-md-block { .visible-md-block {
@include media-md-max { @include media-breakpoint-only(md) {
display: block !important; display: block !important;
} }
} }
.visible-md-inline { .visible-md-inline {
@include media-md-max { @include media-breakpoint-only(md) {
display: inline !important; display: inline !important;
} }
} }
.visible-md-inline-block { .visible-md-inline-block {
@include media-md-max { @include media-breakpoint-only(md) {
display: inline-block !important; display: inline-block !important;
} }
} }
.visible-lg-block { .visible-lg-block {
@include media-lg { @include media-breakpoint-up(lg) {
display: block !important; display: block !important;
} }
} }
.visible-lg-inline { .visible-lg-inline {
@include media-lg { @include media-breakpoint-up(lg) {
display: inline !important; display: inline !important;
} }
} }
.visible-lg-inline-block { .visible-lg-inline-block {
@include media-lg { @include media-breakpoint-up(lg) {
display: inline-block !important; display: inline-block !important;
} }
} }
@include media-sm-max { @include media-breakpoint-only(sm) {
@include responsive-invisibility(".hidden-sm"); @include responsive-invisibility(".hidden-sm");
} }
@include media-md-max { @include media-breakpoint-only(md) {
@include responsive-invisibility(".hidden-md"); @include responsive-invisibility(".hidden-md");
} }
@include media-lg { @include media-breakpoint-up(lg) {
@include responsive-invisibility(".hidden-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 }
}