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));
}
// 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));
}
}
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));
}
// 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));
}
}
}
}
.make-md-column-pull(@columns) {
- @media (min-width: @screen-md) {
+ @media (min-width: @screen-md-min) {
right: percentage((@columns / @grid-columns));
}
}
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));
}
// 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));
}
}
}
}
- @media (min-width: @screen-sm) {
+ @media (min-width: @screen-sm-min) {
> li {
display: table-cell;
width: 1%;
.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();
}
}
.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();
}
}
}
}
&.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();
}
}
}
}
&.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();
}
}
.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();
}
}
.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();
}
}
}
}
&.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();
}
}
}
}
&.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();
}
}
// 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;
// --------------------------------------------------
// 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