diff --git a/less/mixins.less b/less/mixins.less index 3f230205b663ba2220f2a6b7c3ecf031fbb3d64d..e78878b4d294b0d82d70b6b02b70cb7b668c7e2e 100644 --- a/less/mixins.less +++ b/less/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/less/navs.less b/less/navs.less index 6002a8cdd12f286a60b329777fbfa02da2ea3ce0..868aeb817c36e6b376e2cf3ba32875cd08a129e4 100644 --- a/less/navs.less +++ b/less/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/less/responsive-utilities.less b/less/responsive-utilities.less index 4976e2fcd97fa369663a1061630d11b53332c1c2..02bb39bfbbac8d957ae13e6c93749ddfa4b706fb 100644 --- a/less/responsive-utilities.less +++ b/less/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/less/tables.less b/less/tables.less index 7543b165a2eea45b3facaf419ae8509b87456e17..5b6ea44d90c3eb693fe988965b861eb09f58e8fd 100644 --- a/less/tables.less +++ b/less/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/less/variables.less b/less/variables.less index fa623e283e0cb4c01d3d1332519783432ac878d3..63cc86ca623a82992a0619a5a11fa0413a252576 100644 --- a/less/variables.less +++ b/less/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