mirror/chota
1
0
Fork 0
mirror of https://github.com/jenil/chota.git synced 2023-08-10 21:13:07 +03:00
Code Issues Projects Releases Wiki Activity

utils: add 🆕 responsive helpers

Browse Source
This commit is contained in:
Jenil Gogari 2019-05-12 12:49:51 -04:00
parent 63dac8abf7
commit 2b83e17e19
5 changed files with 22 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
dist/chota.css vendored
View File

@ -929,11 +929,16 @@ button:disabled:hover {
display: none !important; display: none !important;
} }
@media screen and (max-width: 599px) { @media screen and (max-width: 599px) {
.hide-xs {
display: none !important;
}
}
@media screen and (min-width: 600px) and (max-width: 899px) {
.hide-sm { .hide-sm {
display: none !important; display: none !important;
} }
} }
@media screen and (min-width: 600px) and (max-width: 1199px) { @media screen and (min-width: 900px) and (max-width: 1199px) {
.hide-md { .hide-md {
display: none !important; display: none !important;
} }

2
dist/chota.min.css vendored
View File

File diff suppressed because one or more lines are too long

5
docs/_includes/utilities.html
View File

@ -41,8 +41,9 @@
<li><code>is-marginless</code> - removes any margin</li> <li><code>is-marginless</code> - removes any margin</li>
<li><code>clearfix</code> - clears the floats</li> <li><code>clearfix</code> - clears the floats</li>
<li><code>is-hidden</code> - hides the element completely</li> <li><code>is-hidden</code> - hides the element completely</li>
<li><code>hide-sm</code> - hides the element for screens &lt;600px</li> <li><code>hide-xs</code> - hides the element for screens &lt;600px</li>
<li><code>hide-md</code> - hides the element for screens &gt;=600px and &lt;=1200px</li> <li><code>hide-sm</code> - hides the element for screens &gt;=600px and &lt;900px</li>
<li><code>hide-md</code> - hides the element for screens &gt;=900px and &lt;1200px</li>
<li><code>hide-lg</code> - hides the element for screens &gt;=1200px</li> <li><code>hide-lg</code> - hides the element for screens &gt;=1200px</li>
</ul> </ul>
</section> </section>

8
src/_util.css
View File

@ -169,12 +169,18 @@
} }
@media screen and (max-width: 599px) { @media screen and (max-width: 599px) {
.hide-xs {
display: none !important;
}
}
@media screen and (min-width: 600px) and (max-width: 899px) {
.hide-sm { .hide-sm {
display: none !important; display: none !important;
} }
} }
@media screen and (min-width: 600px) and (max-width: 1199px) { @media screen and (min-width: 900px) and (max-width: 1199px) {
.hide-md { .hide-md {
display: none !important; display: none !important;
} }

5
test/components.html
View File

@ -386,6 +386,11 @@
<div class="card bg-error">.bg-error</div> <div class="card bg-error">.bg-error</div>
</div> </div>
</div> </div>
<h4>Responsive Helpers</h4>
<div class="hide-xs">.hide-xs</div>
<div class="hide-sm">.hide-sm</div>
<div class="hide-md">.hide-md</div>
<div class="hide-lg">.hide-lg</div>
</section> </section>
<section> <section>
<h1>Icons</h1> <h1>Icons</h1>