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:
@@ -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,
|
||||||
|
@@ -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();
|
||||||
|
@@ -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);
|
||||||
}
|
}
|
||||||
|
@@ -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;
|
||||||
}
|
}
|
||||||
|
@@ -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";
|
||||||
|
@@ -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; }
|
||||||
}
|
}
|
||||||
|
@@ -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();
|
||||||
}
|
}
|
||||||
|
@@ -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");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@@ -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 }
|
|
||||||
}
|
|
Reference in New Issue
Block a user