mirror of
				https://github.com/twbs/bootstrap.git
				synced 2025-11-04 00:03:15 -05: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:
		
						commit
						8a96616726
					
				@ -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));
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@ -162,7 +162,7 @@
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  @media (min-width: @screen-sm) {
 | 
			
		||||
  @media (min-width: @screen-sm-min) {
 | 
			
		||||
    > li {
 | 
			
		||||
      display: table-cell;
 | 
			
		||||
      width: 1%;
 | 
			
		||||
 | 
			
		||||
@ -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();
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@ -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;
 | 
			
		||||
 | 
			
		||||
@ -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
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user