Skip to content
GitLab
Commit 969cb04a authored by Mark Otto's avatar Mark Otto
Browse files

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

parent 352532cd
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 29 additions and 29 deletions
+29 -29
css.html
+ 21
- 21
View file @ 969cb04a
......@@ -2570,52 +2570,52 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div>
<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="col-xs-6 col-sm-3">
<span class="visible-xs">Extra small</span>
<span class="hidden-xs">&#10004; Hidden on x-small</span>
<span class="hidden-xs">Extra small</span>
<span class="visible-xs">&#10004; Hidden on x-small</span>
</div>
<div class="col-xs-6 col-sm-3">
<span class="visible-sm">Small</span>
<span class="hidden-sm">&#10004; Hidden on small</span>
<span class="hidden-sm">Small</span>
<span class="visible-sm">&#10004; Hidden on small</span>
</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">
<span class="visible-md">Medium</span>
<span class="hidden-md">&#10004; Hidden on medium</span>
<span class="hidden-md">Medium</span>
<span class="visible-md">&#10004; Hidden on medium</span>
</div>
<div class="col-xs-6 col-sm-3">
<span class="visible-lg">Large</span>
<span class="hidden-lg">&#10004; Hidden on large</span>
<span class="hidden-lg">Large</span>
<span class="visible-lg">&#10004; Hidden on large</span>
</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>
<span class="hidden-xs hidden-sm">Extra small and small</span>
<span class="visible-xs visible-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>
<span class="hidden-md hidden-lg">Medium and large</span>
<span class="visible-md visible-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>
<span class="hidden-xs hidden-md">Extra small and medium</span>
<span class="visible-xs visible-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>
<span class="hidden-sm hidden-lg">Small and large</span>
<span class="visible-sm visible-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>
<span class="hidden-xs hidden-lg">Extra small and large</span>
<span class="visible-xs visible-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>
<span class="hidden-sm hidden-md">Small and medium</span>
<span class="visible-sm visible-md">&#10004; Hidden on small and medium</span>
</div>
</div>
......
docs-assets/css/docs.css
+ 8
- 8
View file @ 969cb04a
......@@ -961,10 +961,10 @@ h1[id] {
.visible-on .col-xs-6 .hidden-sm,
.visible-on .col-xs-6 .hidden-md,
.visible-on .col-xs-6 .hidden-lg,
.hidden-on .col-xs-6 .visible-xs,
.hidden-on .col-xs-6 .visible-sm,
.hidden-on .col-xs-6 .visible-md,
.hidden-on .col-xs-6 .visible-lg {
.hidden-on .col-xs-6 .hidden-xs,
.hidden-on .col-xs-6 .hidden-sm,
.hidden-on .col-xs-6 .hidden-md,
.hidden-on .col-xs-6 .hidden-lg {
color: #999;
border: 1px solid #ddd;
}
......@@ -972,10 +972,10 @@ h1[id] {
.visible-on .col-xs-6 .visible-sm,
.visible-on .col-xs-6 .visible-md,
.visible-on .col-xs-6 .visible-lg,
.hidden-on .col-xs-6 .hidden-xs,
.hidden-on .col-xs-6 .hidden-sm,
.hidden-on .col-xs-6 .hidden-md,
.hidden-on .col-xs-6 .hidden-lg {
.hidden-on .col-xs-6 .visible-xs,
.hidden-on .col-xs-6 .visible-sm,
.hidden-on .col-xs-6 .visible-md,
.hidden-on .col-xs-6 .visible-lg {
color: #468847;
background-color: #dff0d8;
border: 1px solid #d6e9c6;
......
Supports Markdown
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