mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-01-17 21:08:13 +01:00
Progress module documentation complete
This commit is contained in:
Angelos Chalaris
parent
b6bb5d3bfc
commit
329486e717
@ -549,3 +549,5 @@
|
||||
- Updated `core` documentation page to reflect list changes.
|
||||
- Made some tweaks in the `utility` module to make `breadcrumbs` work as before.
|
||||
- Added `progress` variant section in the `progress` module's doc page.
|
||||
- Updated `index` to reflect the minor bloating of the files that has occured lately. Shame, really.
|
||||
- Completed documentation for `progress` module.
|
||||
|
||||
@ -49,7 +49,7 @@
|
||||
box-sizing: border-box;
|
||||
border-right: 1px solid #bdbdbd;
|
||||
}
|
||||
@media (max-width: 800px){
|
||||
@media (max-width: 767px){
|
||||
.col-sm-12.col-sm-last.col-md-4.col-md-normal {
|
||||
border: 0;
|
||||
border-top: 1px solid #bdbdbd;
|
||||
|
||||
@ -49,7 +49,7 @@
|
||||
box-sizing: border-box;
|
||||
border-right: 1px solid #bdbdbd;
|
||||
}
|
||||
@media (max-width: 800px){
|
||||
@media (max-width: 767px){
|
||||
.col-sm-12.col-sm-last.col-md-4.col-md-normal {
|
||||
border: 0;
|
||||
border-top: 1px solid #bdbdbd;
|
||||
|
||||
@ -152,8 +152,8 @@
|
||||
<tr>
|
||||
<td data-label="Name">mini.css</td>
|
||||
<td data-label="Version"><a href="https://github.com/chalarangelo/mini.css/blob/v2.0/dist/css/mini-default.css">v2.0</a></td>
|
||||
<td data-label="Size (uncompressed)">38 KB</td>
|
||||
<td data-label="Size (minified)">31 KB</td>
|
||||
<td data-label="Size (uncompressed)">43 KB</td>
|
||||
<td data-label="Size (minified)">34 KB</td>
|
||||
<td data-label="Size (gzipped)">6 KB</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
||||
@ -49,7 +49,7 @@
|
||||
box-sizing: border-box;
|
||||
border-right: 1px solid #bdbdbd;
|
||||
}
|
||||
@media (max-width: 800px){
|
||||
@media (max-width: 767px){
|
||||
.col-sm-12.col-sm-last.col-lg-4.col-lg-normal {
|
||||
border: 0;
|
||||
border-top: 1px solid #bdbdbd;
|
||||
|
||||
@ -49,7 +49,7 @@
|
||||
box-sizing: border-box;
|
||||
border-right: 1px solid #bdbdbd;
|
||||
}
|
||||
@media (max-width: 800px){
|
||||
@media (max-width: 767px){
|
||||
.col-sm-12.col-sm-last.col-md-4.col-md-normal {
|
||||
border: 0;
|
||||
border-top: 1px solid #bdbdbd;
|
||||
@ -216,29 +216,32 @@
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
||||
<!-- sample -->
|
||||
<div class="box-centered">
|
||||
<br>
|
||||
<div class="spinner-donut"></div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
||||
<p></p>
|
||||
<p>Donut spinners can be used to indicate that something is loading or that a process is running in the background. To create a donut spinner, add the <code>.spinner-donut</code> class to an element of your liking. We would recommend using a <code><div></code> element for most cases, but <code><span></code> elements should work pretty well, too.</p>
|
||||
<h3>Sample code</h3>
|
||||
<pre></pre>
|
||||
<pre><div class="spinner-donut"></div></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li>The <code>.spinner-donut</code> is an animated component, meaning that if a browsers does not support animation, this element might display incorrectly.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6 col-lg-4">
|
||||
<pre><!-- do code --></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> </p>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<pre><p>Loading... <span class="spinner-donut"></span></p></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> You can place a <code>.spinner-donut</code> inside a paragraph or some other textual context and it will display inline.</p>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal col-lg-4 col-lg-last">
|
||||
<pre><!-- don't code --></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> </p>
|
||||
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
|
||||
<pre><div class="spinner-donut">Loading...</div></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> Avoid inserting text inside the <code>.spinner-donut</code>, as this might cause unexpected bahavior and will probably make the text spin along with it.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -253,31 +256,27 @@
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
||||
<!-- sample -->
|
||||
<div class="box-centered">
|
||||
<br>
|
||||
<div class="spinner-donut secondary"></div><br>
|
||||
<div class="spinner-donut tertiary"></div><br>
|
||||
<div class="spinner-donut large"></div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
||||
<p></p>
|
||||
<p>Apart from the default donut spinner style, there are also two more contextual color classes: <code>.secondary</code> and <code>.tertiary</code>. If your donut spinners are too small, you can also use the <code>.large</code> class to make it pop out a little bit more.</p>
|
||||
<h3>Sample code</h3>
|
||||
<pre></pre>
|
||||
<pre><div class="spinner-donut secondary"></div>
|
||||
<div class="spinner-donut tertiary"></div>
|
||||
<div class="spinner-donut large"></div></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li>You can mix one of the contextual color classes and the <code>.large</code> class, if you want, similarly to what you can do with progress bars.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6 col-lg-4">
|
||||
<pre><!-- do code --></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> </p>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal col-lg-4 col-lg-last">
|
||||
<pre><!-- don't code --></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -23,6 +23,7 @@ ul.#{$breadcrumbs-name} {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
list-style: none;
|
||||
// TODO: ADD MARGIN-TOP WITH A VARIABLE TO MAKE THIS BETTER SPACED, MAYBE ALSO MARGIN-BOTTOM!
|
||||
margin-left: 0; // Reset margins from list styling
|
||||
margin-right: 0; // Reset margins from list styling
|
||||
padding: 0; // Remove unnecessary left and right empty space
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user