Skip to content

B
bootstrap
Commit 969cb04a authored by Mark Otto's avatar Mark Otto
Browse files
Options

Fixes #10126: Update responsive test cases to properly highlight hidden class examples

parent 352532cd
Show whitespace changes
Inline Side-by-side
Showing with 29 additions and 29 deletions
css.html
View file @ 969cb04a
...@@ -2570,52 +2570,52 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -2570,52 +2570,52 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div> </div>
<h3>Hidden on...</h3> <h3>Hidden on...</h3>
<p>Here, green checkmarks indicate the element <strong>is hidden</strong> in your current viewport.</p> <p>Here, green checkmarks also 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">
<div class="col-xs-6 col-sm-3"> <div class="col-xs-6 col-sm-3">
<span class="visible-xs">Extra small</span> <span class="hidden-xs">Extra small</span>
<span class="hidden-xs">&#10004; Hidden on x-small</span> <span class="visible-xs">&#10004; Hidden on x-small</span>
</div> </div>
<div class="col-xs-6 col-sm-3"> <div class="col-xs-6 col-sm-3">
<span class="visible-sm">Small</span> <span class="hidden-sm">Small</span>
<span class="hidden-sm">&#10004; Hidden on small</span> <span class="visible-sm">&#10004; Hidden on small</span>
</div> </div>
<div class="clearfix visible-xs"></div> <div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3"> <div class="col-xs-6 col-sm-3">
<span class="visible-md">Medium</span> <span class="hidden-md">Medium</span>
<span class="hidden-md">&#10004; Hidden on medium</span> <span class="visible-md">&#10004; Hidden on medium</span>
</div> </div>
<div class="col-xs-6 col-sm-3"> <div class="col-xs-6 col-sm-3">
<span class="visible-lg">Large</span> <span class="hidden-lg">Large</span>
<span class="hidden-lg">&#10004; Hidden on large</span> <span class="visible-lg">&#10004; Hidden on large</span>
</div> </div>
</div> </div>
<div class="row responsive-utilities-test hidden-on"> <div class="row responsive-utilities-test hidden-on">
<div class="col-xs-6 col-sm-6"> <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">Extra small and small</span>
<span class="hidden-xs hidden-sm">&#10004; Hidden on x-small and small</span> <span class="visible-xs visible-sm">&#10004; Hidden on x-small and small</span>
</div> </div>
<div class="col-xs-6 col-sm-6"> <div class="col-xs-6 col-sm-6">
<span class="visible-md visible-lg">Medium and large</span> <span class="hidden-md hidden-lg">Medium and large</span>
<span class="hidden-md hidden-lg">&#10004; Hidden on medium and large</span> <span class="visible-md visible-lg">&#10004; Hidden on medium and large</span>
</div> </div>
<div class="clearfix visible-xs"></div> <div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-6"> <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">Extra small and medium</span>
<span class="hidden-xs hidden-md">&#10004; Hidden on x-small and medium</span> <span class="visible-xs visible-md">&#10004; Hidden on x-small and medium</span>
</div> </div>
<div class="col-xs-6 col-sm-6"> <div class="col-xs-6 col-sm-6">
<span class="visible-sm visible-lg">Small and large</span> <span class="hidden-sm hidden-lg">Small and large</span>
<span class="hidden-sm hidden-lg">&#10004; Hidden on small and large</span> <span class="visible-sm visible-lg">&#10004; Hidden on small and large</span>
</div> </div>
<div class="clearfix visible-xs"></div> <div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-6"> <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">Extra small and large</span>
<span class="hidden-xs hidden-lg">&#10004; Hidden on x-small and large</span> <span class="visible-xs visible-lg">&#10004; Hidden on x-small and large</span>
</div> </div>
<div class="col-xs-6 col-sm-6"> <div class="col-xs-6 col-sm-6">
<span class="visible-sm visible-md">Small and medium</span> <span class="hidden-sm hidden-md">Small and medium</span>
<span class="hidden-sm hidden-md">&#10004; Hidden on small and medium</span> <span class="visible-sm visible-md">&#10004; Hidden on small and medium</span>
</div> </div>
</div> </div>
......
docs-assets/css/docs.css
View file @ 969cb04a
...@@ -961,10 +961,10 @@ h1[id] { ...@@ -961,10 +961,10 @@ h1[id] {
.visible-on .col-xs-6 .hidden-sm, .visible-on .col-xs-6 .hidden-sm,
.visible-on .col-xs-6 .hidden-md, .visible-on .col-xs-6 .hidden-md,
.visible-on .col-xs-6 .hidden-lg, .visible-on .col-xs-6 .hidden-lg,
.hidden-on .col-xs-6 .visible-xs, .hidden-on .col-xs-6 .hidden-xs,
.hidden-on .col-xs-6 .visible-sm, .hidden-on .col-xs-6 .hidden-sm,
.hidden-on .col-xs-6 .visible-md, .hidden-on .col-xs-6 .hidden-md,
.hidden-on .col-xs-6 .visible-lg { .hidden-on .col-xs-6 .hidden-lg {
color: #999; color: #999;
border: 1px solid #ddd; border: 1px solid #ddd;
} }
...@@ -972,10 +972,10 @@ h1[id] { ...@@ -972,10 +972,10 @@ h1[id] {
.visible-on .col-xs-6 .visible-sm, .visible-on .col-xs-6 .visible-sm,
.visible-on .col-xs-6 .visible-md, .visible-on .col-xs-6 .visible-md,
.visible-on .col-xs-6 .visible-lg, .visible-on .col-xs-6 .visible-lg,
.hidden-on .col-xs-6 .hidden-xs, .hidden-on .col-xs-6 .visible-xs,
.hidden-on .col-xs-6 .hidden-sm, .hidden-on .col-xs-6 .visible-sm,
.hidden-on .col-xs-6 .hidden-md, .hidden-on .col-xs-6 .visible-md,
.hidden-on .col-xs-6 .hidden-lg { .hidden-on .col-xs-6 .visible-lg {
color: #468847; color: #468847;
background-color: #dff0d8; background-color: #dff0d8;
border: 1px solid #d6e9c6; border: 1px solid #d6e9c6;
......
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