diff --git a/mixins.less b/mixins.less index c5a700156642..416c6a222828 100644 --- a/mixins.less +++ b/mixins.less @@ -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)); } } diff --git a/navs.less b/navs.less index 6002a8cdd12f..868aeb817c36 100644 --- a/navs.less +++ b/navs.less @@ -162,7 +162,7 @@ } } - @media (min-width: @screen-sm) { + @media (min-width: @screen-sm-min) { > li { display: table-cell; width: 1%; diff --git a/responsive-utilities.less b/responsive-utilities.less index 4976e2fcd97f..02bb39bfbbac 100644 --- a/responsive-utilities.less +++ b/responsive-utilities.less @@ -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(); } } diff --git a/tables.less b/tables.less index 7543b165a2ee..5b6ea44d90c3 100644 --- a/tables.less +++ b/tables.less @@ -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; diff --git a/variables.less b/variables.less index c069ee1add2a..93b3bb152b56 100644 --- a/variables.less +++ b/variables.less @@ -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