Simple responsive utilities test css
This commit is contained in:
parent
e5d6a40a77
commit
af0b9cb41a
|
@ -510,28 +510,25 @@ body {
|
|||
position: relative;
|
||||
float: left;
|
||||
width: 25%;
|
||||
padding: 15px 10px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
line-height: 1.1;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.responsive-utilities-test li + li {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.responsive-utilities-test span {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
right: -1px;
|
||||
bottom: -1px;
|
||||
padding: 15px 10px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
line-height: 1.1;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.responsive-utilities-test span {
|
||||
.responsive-utilities-test.visible-on [class*="hidden"],
|
||||
.responsive-utilities-test.hidden-on [class*="visible"] {
|
||||
color: #999;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
.responsive-utilities-test.visible-on [class*="visible"],
|
||||
.responsive-utilities-test.hidden-on [class*="hidden"] {
|
||||
color: #468847;
|
||||
background-color: #dff0d8;
|
||||
border: 1px solid #d6e9c6;
|
||||
|
|
|
@ -2003,17 +2003,35 @@ For example, <code><section></code> should be wrapped as inline.
|
|||
<p>Resize your browser or load on different devices to test the responsive utility classes.</p>
|
||||
<h4>Visible on...</h4>
|
||||
<p>Green checkmarks indicate the element <strong>is visible</strong> in your current viewport.</p>
|
||||
<ul class="responsive-utilities-test">
|
||||
<li>Small<span class="visible-sm">✔ Visible on small</span></li>
|
||||
<li>Medium<span class="visible-md">✔ Visible on medium</span></li>
|
||||
<li>Large<span class="visible-lg">✔ Visible on large</span></li>
|
||||
<ul class="responsive-utilities-test visible-on">
|
||||
<li>
|
||||
<span class="hidden-sm">Small</span>
|
||||
<span class="visible-sm">✔ Visible on small</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="hidden-md">Medium</span>
|
||||
<span class="visible-md">✔ Visible on medium</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="hidden-lg">Large</span>
|
||||
<span class="visible-lg">✔ Visible on large</span>
|
||||
</li>
|
||||
</ul>
|
||||
<h4>Hidden on...</h4>
|
||||
<p>Here, green checkmarks indicate the element <strong>is hidden</strong> in your current viewport.</p>
|
||||
<ul class="responsive-utilities-test hidden-on">
|
||||
<li>Small<span class="hidden-sm">✔ Hidden on small</span></li>
|
||||
<li>Medium<span class="hidden-md">✔ Hidden on medium</span></li>
|
||||
<li>Large<span class="hidden-lg">✔ Hidden on desktop</span></li>
|
||||
<li>
|
||||
<span class="visible-sm">Small</span>
|
||||
<span class="hidden-sm">✔ Hidden on small</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="visible-md">Medium</span>
|
||||
<span class="hidden-md">✔ Hidden on medium</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="visible-lg">Large</span>
|
||||
<span class="hidden-lg">✔ Hidden on desktop</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue