0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-28 20:52:21 +01:00

Merge pull request #9963 from twbs/min-breakpoint-naming

rename @screen-XX to @screen-XX-min for clarity+unambiguity
This commit is contained in:
Mark Otto 2013-08-23 22:50:41 -07:00
commit 8a96616726
5 changed files with 52 additions and 48 deletions

View File

@ -575,7 +575,7 @@
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-sm) {
@media (min-width: @screen-sm-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
@ -583,17 +583,17 @@
// Generate the small column offsets
.make-sm-column-offset(@columns) {
@media (min-width: @screen-sm) {
@media (min-width: @screen-sm-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-push(@columns) {
@media (min-width: @screen-sm) {
@media (min-width: @screen-sm-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-pull(@columns) {
@media (min-width: @screen-sm) {
@media (min-width: @screen-sm-min) {
right: percentage((@columns / @grid-columns));
}
}
@ -608,7 +608,7 @@
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-md) {
@media (min-width: @screen-md-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
@ -616,7 +616,7 @@
// Generate the large column offsets
.make-md-column-offset(@columns) {
@media (min-width: @screen-md) {
@media (min-width: @screen-md-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
@ -626,7 +626,7 @@
}
}
.make-md-column-pull(@columns) {
@media (min-width: @screen-md) {
@media (min-width: @screen-md-min) {
right: percentage((@columns / @grid-columns));
}
}
@ -641,7 +641,7 @@
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-lg) {
@media (min-width: @screen-lg-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
@ -649,17 +649,17 @@
// Generate the large column offsets
.make-lg-column-offset(@columns) {
@media (min-width: @screen-lg) {
@media (min-width: @screen-lg-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-push(@columns) {
@media (min-width: @screen-lg) {
@media (min-width: @screen-lg-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-pull(@columns) {
@media (min-width: @screen-lg) {
@media (min-width: @screen-lg-min) {
right: percentage((@columns / @grid-columns));
}
}

View File

@ -162,7 +162,7 @@
}
}
@media (min-width: @screen-sm) {
@media (min-width: @screen-sm-min) {
> li {
display: table-cell;
width: 1%;

View File

@ -41,17 +41,17 @@
.responsive-visibility();
}
&.visible-sm {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.responsive-visibility();
}
}
&.visible-md {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.responsive-visibility();
}
}
&.visible-lg {
@media (min-width: @screen-lg) {
@media (min-width: @screen-lg-min) {
.responsive-visibility();
}
}
@ -63,16 +63,16 @@
.responsive-visibility();
}
}
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.responsive-visibility();
}
&.visible-md {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.responsive-visibility();
}
}
&.visible-lg {
@media (min-width: @screen-lg) {
@media (min-width: @screen-lg-min) {
.responsive-visibility();
}
}
@ -85,15 +85,15 @@
}
}
&.visible-sm {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.responsive-visibility();
}
}
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.responsive-visibility();
}
&.visible-lg {
@media (min-width: @screen-lg) {
@media (min-width: @screen-lg-min) {
.responsive-visibility();
}
}
@ -106,16 +106,16 @@
}
}
&.visible-sm {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.responsive-visibility();
}
}
&.visible-md {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.responsive-visibility();
}
}
@media (min-width: @screen-lg) {
@media (min-width: @screen-lg-min) {
.responsive-visibility();
}
}
@ -126,17 +126,17 @@
.responsive-invisibility();
}
&.hidden-sm {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.responsive-invisibility();
}
}
&.hidden-md {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.responsive-invisibility();
}
}
&.hidden-lg {
@media (min-width: @screen-lg) {
@media (min-width: @screen-lg-min) {
.responsive-invisibility();
}
}
@ -148,16 +148,16 @@
.responsive-invisibility();
}
}
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.responsive-invisibility();
}
&.hidden-md {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.responsive-invisibility();
}
}
&.hidden-lg {
@media (min-width: @screen-lg) {
@media (min-width: @screen-lg-min) {
.responsive-invisibility();
}
}
@ -170,15 +170,15 @@
}
}
&.hidden-sm {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.responsive-invisibility();
}
}
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.responsive-invisibility();
}
&.hidden-lg {
@media (min-width: @screen-lg) {
@media (min-width: @screen-lg-min) {
.responsive-invisibility();
}
}
@ -191,16 +191,16 @@
}
}
&.hidden-sm {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.responsive-invisibility();
}
}
&.hidden-md {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.responsive-invisibility();
}
}
@media (min-width: @screen-lg) {
@media (min-width: @screen-lg-min) {
.responsive-invisibility();
}
}

View File

@ -180,7 +180,7 @@ table {
// by enabling horizontal scrolling. Only applies <768px. Everything above that
// will display normally.
@media (max-width: @screen-sm) {
@media (max-width: @screen-sm-min) {
.table-responsive {
width: 100%;
margin-bottom: 15px;

View File

@ -207,25 +207,29 @@
// --------------------------------------------------
// Extra small screen / phone
@screen-xs: 480px;
@screen-phone: @screen-xs;
@screen-xs: 480px;// NOTE: Deprecated in favor of @screen-xs-min
@screen-xs-min: @screen-xs;
@screen-phone: @screen-xs-min;
// Small screen / tablet
@screen-sm: 768px;
@screen-tablet: @screen-sm;
@screen-sm: 768px;// NOTE: Deprecated in favor of @screen-sm-min
@screen-sm-min: @screen-sm;
@screen-tablet: @screen-sm-min;
// Medium screen / desktop
@screen-md: 992px;
@screen-desktop: @screen-md;
@screen-md: 992px;// NOTE: Deprecated in favor of @screen-md-min
@screen-md-min: @screen-md;
@screen-desktop: @screen-md-min;
// Large screen / wide desktop
@screen-lg: 1200px;
@screen-lg-desktop: @screen-lg;
@screen-lg: 1200px;// NOTE: Deprecated in favor of @screen-lg-min
@screen-lg-min: @screen-lg;
@screen-lg-desktop: @screen-lg-min;
// So media queries don't overlap when required, provide a maximum
@screen-xs-max: (@screen-sm - 1);
@screen-sm-max: (@screen-md - 1);
@screen-md-max: (@screen-lg - 1);
@screen-xs-max: (@screen-sm-min - 1);
@screen-sm-max: (@screen-md-min - 1);
@screen-md-max: (@screen-lg-min - 1);
// Grid system