Skip to content

B
bootstrap
Commit 3260288d authored by Mark Otto's avatar Mark Otto
Browse files
Options

Merge branch '3.0.0-wip' of https://github.com/eratzlaff/bootstrap into eratzlaff-3.0.0-wip

parents 6262230d 7818c5e1
Hide whitespace changes
Inline Side-by-side
Showing with 167 additions and 39 deletions
css.html
View file @ 3260288d
...@@ -2355,6 +2355,34 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -2355,6 +2355,34 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<span class="visible-lg">&#10004; Visible on large</span> <span class="visible-lg">&#10004; Visible on large</span>
</div> </div>
</div> </div>
<div class="row responsive-utilities-test hidden-on">
<div class="col-xs-6 col-sm-6">
<span class="hidden-xs hidden-sm">Extra small and small</span>
<span class="visible-xs visible-sm">&#10004; Visible on x-small and small</span>
</div>
<div class="col-xs-6 col-sm-6">
<span class="hidden-md hidden-lg">Medium and large</span>
<span class="visible-md visible-lg">&#10004; Visible on medium and large</span>
</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-6">
<span class="hidden-xs hidden-md">Extra small and medium</span>
<span class="visible-xs visible-md">&#10004; Visible on x-small and medium</span>
</div>
<div class="col-xs-6 col-sm-6">
<span class="hidden-sm hidden-lg">Small and large</span>
<span class="visible-sm visible-lg">&#10004; Visible on small and large</span>
</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-6">
<span class="hidden-xs hidden-lg">Extra small and large</span>
<span class="visible-xs visible-lg">&#10004; Visible on x-small and large</span>
</div>
<div class="col-xs-6 col-sm-6">
<span class="hidden-sm hidden-md">Small and medium</span>
<span class="visible-sm visible-md">&#10004; Visible on small and medium</span>
</div>
</div>
<h4>Hidden on...</h4> <h4>Hidden on...</h4>
<p>Here, green checkmarks indicate the element <strong>is hidden</strong> in your current viewport.</p> <p>Here, green checkmarks indicate the element <strong>is hidden</strong> in your current viewport.</p>
<div class="row responsive-utilities-test hidden-on"> <div class="row responsive-utilities-test hidden-on">
...@@ -2376,5 +2404,33 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -2376,5 +2404,33 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<span class="hidden-lg">&#10004; Hidden on large</span> <span class="hidden-lg">&#10004; Hidden on large</span>
</div> </div>
</div> </div>
<div class="row responsive-utilities-test hidden-on">
<div class="col-xs-6 col-sm-6">
<span class="visible-xs visible-sm">Extra small and small</span>
<span class="hidden-xs hidden-sm">&#10004; Hidden on x-small and small</span>
</div>
<div class="col-xs-6 col-sm-6">
<span class="visible-md visible-lg">Medium and large</span>
<span class="hidden-md hidden-lg">&#10004; Hidden on medium and large</span>
</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-6">
<span class="visible-xs visible-md">Extra small and medium</span>
<span class="hidden-xs hidden-md">&#10004; Hidden on x-small and medium</span>
</div>
<div class="col-xs-6 col-sm-6">
<span class="visible-sm visible-lg">Small and large</span>
<span class="hidden-sm hidden-lg">&#10004; Hidden on small and large</span>
</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-6">
<span class="visible-xs visible-lg">Extra small and large</span>
<span class="hidden-xs hidden-lg">&#10004; Hidden on x-small and large</span>
</div>
<div class="col-xs-6 col-sm-6">
<span class="visible-sm visible-md">Small and medium</span>
<span class="hidden-sm hidden-md">&#10004; Hidden on small and medium</span>
</div>
</div>
</div> </div>
less/responsive-utilities.less
View file @ 3260288d
...@@ -36,48 +36,84 @@ ...@@ -36,48 +36,84 @@
// Visibility utilities // Visibility utilities
.visible-xs { .visible-xs {
.responsive-visibility(); .responsive-invisibility();
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) { @media (max-width: @screen-xs-max) {
.responsive-invisibility(); .responsive-visibility();
} }
@media (min-width: @screen-md) and (max-width: @screen-md-max) { &.visible-sm {
.responsive-invisibility(); @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-visibility();
}
} }
@media (min-width: @screen-lg) { &.visible-md {
.responsive-invisibility(); @media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-visibility();
}
}
&.visible-lg {
@media (min-width: @screen-lg) {
.responsive-visibility();
}
} }
} }
.visible-sm { .visible-sm {
.responsive-invisibility(); .responsive-invisibility();
&.visible-xs {
@media (max-width: @screen-xs-max) {
.responsive-visibility();
}
}
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) { @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-visibility(); .responsive-visibility();
} }
@media (min-width: @screen-md) and (max-width: @screen-md-max) { &.visible-md {
.responsive-invisibility(); @media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-visibility();
}
} }
@media (min-width: @screen-lg) { &.visible-lg {
.responsive-invisibility(); @media (min-width: @screen-lg) {
.responsive-visibility();
}
} }
} }
.visible-md { .visible-md {
.responsive-invisibility(); .responsive-invisibility();
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) { &.visible-xs {
.responsive-invisibility(); @media (max-width: @screen-xs-max) {
.responsive-visibility();
}
}
&.visible-sm {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-visibility();
}
} }
@media (min-width: @screen-md) and (max-width: @screen-md-max) { @media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-visibility(); .responsive-visibility();
} }
@media (min-width: @screen-lg) { &.visible-lg {
.responsive-invisibility(); @media (min-width: @screen-lg) {
.responsive-visibility();
}
} }
} }
.visible-lg { .visible-lg {
.responsive-invisibility(); .responsive-invisibility();
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) { &.visible-xs {
.responsive-invisibility(); @media (max-width: @screen-xs-max) {
.responsive-visibility();
}
} }
@media (min-width: @screen-md) and (max-width: @screen-md-max) { &.visible-sm {
.responsive-invisibility(); @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-visibility();
}
}
&.visible-md {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-visibility();
}
} }
@media (min-width: @screen-lg) { @media (min-width: @screen-lg) {
.responsive-visibility(); .responsive-visibility();
...@@ -85,48 +121,84 @@ ...@@ -85,48 +121,84 @@
} }
.hidden-xs { .hidden-xs {
.responsive-invisibility(); .responsive-visibility();
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) { @media (max-width: @screen-xs-max) {
.responsive-visibility(); .responsive-invisibility();
} }
@media (min-width: @screen-md) and (max-width: @screen-md-max) { &.hidden-sm {
.responsive-visibility(); @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-invisibility();
}
} }
@media (min-width: @screen-lg) { &.hidden-md {
.responsive-visibility(); @media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-invisibility();
}
}
&.hidden-lg {
@media (min-width: @screen-lg) {
.responsive-invisibility();
}
} }
} }
.hidden-sm { .hidden-sm {
.responsive-visibility(); .responsive-visibility();
&.hidden-xs {
@media (max-width: @screen-xs-max) {
.responsive-invisibility();
}
}
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) { @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-invisibility(); .responsive-invisibility();
} }
@media (min-width: @screen-md) and (max-width: @screen-md-max) { &.hidden-md {
.responsive-visibility(); @media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-invisibility();
}
} }
@media (min-width: @screen-lg) { &.hidden-lg {
.responsive-visibility(); @media (min-width: @screen-lg) {
.responsive-invisibility();
}
} }
} }
.hidden-md { .hidden-md {
.responsive-visibility(); .responsive-visibility();
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) { &.hidden-xs {
.responsive-visibility(); @media (max-width: @screen-xs-max) {
.responsive-invisibility();
}
}
&.hidden-sm {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-invisibility();
}
} }
@media (min-width: @screen-md) and (max-width: @screen-md-max) { @media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-invisibility(); .responsive-invisibility();
} }
@media (min-width: @screen-lg) { &.hidden-lg {
.responsive-visibility(); @media (min-width: @screen-lg) {
.responsive-invisibility();
}
} }
} }
.hidden-lg { .hidden-lg {
.responsive-visibility(); .responsive-visibility();
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) { &.hidden-xs {
.responsive-visibility(); @media (max-width: @screen-xs-max) {
} .responsive-invisibility();
@media (min-width: @screen-md) and (max-width: @screen-md-max) { }
.responsive-visibility(); }
&.hidden-sm {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-invisibility();
}
}
&.hidden-md {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-invisibility();
}
} }
@media (min-width: @screen-lg) { @media (min-width: @screen-lg) {
.responsive-invisibility(); .responsive-invisibility();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment