mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-19 16:54:24 +01: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:
parent
746e09f8ae
commit
cbb3b1ff9a
@ -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,
|
||||
|
@ -195,7 +195,7 @@
|
||||
//
|
||||
// TODO: remove?
|
||||
|
||||
// @include media-sm {
|
||||
// @include media-breakpoint-up(sm) {
|
||||
// .navbar-right {
|
||||
// .dropdown-menu {
|
||||
// .dropdown-menu-right();
|
||||
|
@ -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);
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -25,7 +25,6 @@
|
||||
|
||||
// Utilities
|
||||
@import "mixins/breakpoints";
|
||||
@import "mixins/media-queries";
|
||||
@import "mixins/hide-text";
|
||||
@import "mixins/image";
|
||||
@import "mixins/label";
|
||||
|
@ -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; }
|
||||
}
|
||||
|
@ -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();
|
||||
}
|
||||
|
@ -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");
|
||||
}
|
||||
|
||||
|
@ -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 }
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user