Deprecate container-{device} vars for container-{size} classes; updates customizer and grid to do the same
This commit is contained in:
parent
c0b00f22fe
commit
5491d53b99
|
@ -488,19 +488,19 @@ base_url: "../"
|
|||
<p>Define the maximum width of <code>.container</code> for different screen sizes.</p>
|
||||
<div class="row">
|
||||
<div class="col-xs-6 col-sm-4">
|
||||
<label>@container-tablet</label>
|
||||
<input type="text" class="form-control" placeholder="728px" data-var="@container-tablet">
|
||||
<label>@container-sm</label>
|
||||
<input type="text" class="form-control" placeholder="728px" data-var="@container-sm">
|
||||
<p class="help-block">For <code>@screen-sm-min</code> and up.</p>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-4">
|
||||
<label>@container-desktop</label>
|
||||
<input type="text" class="form-control" placeholder="940px" data-var="@container-desktop">
|
||||
<label>@container-md</label>
|
||||
<input type="text" class="form-control" placeholder="940px" data-var="@container-md">
|
||||
<p class="help-block">For <code>@screen-md-min</code> and up.</p>
|
||||
</div>
|
||||
<div class="clearfix visible-xs"></div>
|
||||
<div class="col-xs-6 col-sm-4">
|
||||
<label>@container-lg-desktop</label>
|
||||
<input type="text" class="form-control" placeholder="1170px" data-var="@container-lg-desktop">
|
||||
<label>@container-lg</label>
|
||||
<input type="text" class="form-control" placeholder="1170px" data-var="@container-lg">
|
||||
<p class="help-block">For <code>@screen-lg-min</code> and up.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -116,7 +116,7 @@
|
|||
|
||||
@media (min-width: @screen-sm) {
|
||||
.container {
|
||||
max-width: @container-tablet;
|
||||
max-width: @container-sm;
|
||||
}
|
||||
|
||||
.col-sm-1,
|
||||
|
@ -194,7 +194,7 @@
|
|||
|
||||
@media (min-width: @screen-md) {
|
||||
.container {
|
||||
max-width: @container-desktop;
|
||||
max-width: @container-md;
|
||||
}
|
||||
.col-md-1,
|
||||
.col-md-2,
|
||||
|
@ -272,9 +272,9 @@
|
|||
// Note that `.col-lg-12` doesn't get floated on purpose—there's no need since
|
||||
// it's full-width.
|
||||
|
||||
@media (min-width: @screen-lg-desktop) {
|
||||
@media (min-width: @screen-lg-min) {
|
||||
.container {
|
||||
max-width: @container-lg-desktop;
|
||||
max-width: @container-lg;
|
||||
}
|
||||
|
||||
.col-lg-1,
|
||||
|
|
|
@ -626,10 +626,13 @@
|
|||
// --------------------------------------------------
|
||||
|
||||
// Small screen / tablet
|
||||
@container-tablet: ((720px + @grid-gutter-width));
|
||||
@container-sm: ((720px + @grid-gutter-width));
|
||||
@container-tablet: @container-sm;
|
||||
|
||||
// Medium screen / desktop
|
||||
@container-desktop: ((940px + @grid-gutter-width));
|
||||
@container-md: ((940px + @grid-gutter-width));
|
||||
@container-desktop: @container-md;
|
||||
|
||||
// Large screen / wide desktop
|
||||
@container-lg-desktop: ((1140px + @grid-gutter-width));
|
||||
@container-lg: ((1140px + @grid-gutter-width));
|
||||
@container-large-desktop: @container-lg;
|
||||
|
|
Loading…
Reference in New Issue