From e89fe016931e2d5b6e825c1d5c115899adf90483 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Tue, 20 Aug 2013 17:31:02 -0700 Subject: [PATCH] (less) rename @screen-XX to @screen-XX-min for clarity+unambiguity --- mixins.less | 22 +++++++++--------- navs.less | 2 +- responsive-utilities.less | 48 +++++++++++++++++++-------------------- tables.less | 2 +- variables.less | 26 ++++++++++++--------- 5 files changed, 52 insertions(+), 48 deletions(-) diff --git a/mixins.less b/mixins.less index 3f230205b663..e78878b4d294 100644 --- a/mixins.less +++ b/mixins.less @@ -558,7 +558,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)); } @@ -566,17 +566,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)); } } @@ -591,7 +591,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)); } @@ -599,7 +599,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)); } } @@ -609,7 +609,7 @@ } } .make-md-column-pull(@columns) { - @media (min-width: @screen-md) { + @media (min-width: @screen-md-min) { right: percentage((@columns / @grid-columns)); } } @@ -624,7 +624,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)); } @@ -632,17 +632,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 fa623e283e0c..63cc86ca623a 100644 --- a/variables.less +++ b/variables.less @@ -200,25 +200,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