mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-01 19:40:35 +02:00
Code Issues Releases Wiki Activity

Progress module documentation complete

Browse Source
This commit is contained in:
Angelos Chalaris
2016-11-26 01:15:35 +02:00
parent b6bb5d3bfc
commit 329486e717
7 changed files with 35 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/v2/DEVLOG.md
View File

@@ -549,3 +549,5 @@
- Updated `core` documentation page to reflect list changes. - Updated `core` documentation page to reflect list changes.
- Made some tweaks in the `utility` module to make `breadcrumbs` work as before. - Made some tweaks in the `utility` module to make `breadcrumbs` work as before.
- Added `progress` variant section in the `progress` module's doc page. - 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.

2
docs/v2/core.html
View File

@@ -49,7 +49,7 @@
box-sizing: border-box; box-sizing: border-box;
border-right: 1px solid #bdbdbd; 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 { .col-sm-12.col-sm-last.col-md-4.col-md-normal {
border: 0; border: 0;
border-top: 1px solid #bdbdbd; border-top: 1px solid #bdbdbd;

2
docs/v2/grid.html
View File

@@ -49,7 +49,7 @@
box-sizing: border-box; box-sizing: border-box;
border-right: 1px solid #bdbdbd; 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 { .col-sm-12.col-sm-last.col-md-4.col-md-normal {
border: 0; border: 0;
border-top: 1px solid #bdbdbd; border-top: 1px solid #bdbdbd;

4
docs/v2/index.html
View File

@@ -152,8 +152,8 @@
<tr> <tr>
<td data-label="Name">mini.css</td> <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="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 (uncompressed)">43 KB</td>
<td data-label="Size (minified)">31 KB</td> <td data-label="Size (minified)">34 KB</td>
<td data-label="Size (gzipped)">6 KB</td> <td data-label="Size (gzipped)">6 KB</td>
</tr> </tr>
<tr> <tr>

2
docs/v2/navigation.html
View File

@@ -49,7 +49,7 @@
box-sizing: border-box; box-sizing: border-box;
border-right: 1px solid #bdbdbd; 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 { .col-sm-12.col-sm-last.col-lg-4.col-lg-normal {
border: 0; border: 0;
border-top: 1px solid #bdbdbd; border-top: 1px solid #bdbdbd;

55
docs/v2/progress.html
View File

@@ -49,7 +49,7 @@
box-sizing: border-box; box-sizing: border-box;
border-right: 1px solid #bdbdbd; 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 { .col-sm-12.col-sm-last.col-md-4.col-md-normal {
border: 0; border: 0;
border-top: 1px solid #bdbdbd; border-top: 1px solid #bdbdbd;
@@ -216,29 +216,32 @@
</div> </div>
<div class="section row"> <div class="section row">
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal"> <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>
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal"> <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>&lt;div&gt;</code> element for most cases, but <code>&lt;span&gt;</code> elements should work pretty well, too.</p>
<h3>Sample code</h3> <h3>Sample code</h3>
<pre></pre> <pre>&lt;div class=&quot;spinner-donut&quot;&gt;&lt;/div&gt;</pre>
</div> </div>
</div> </div>
<div class="section"> <div class="section">
<h3>Notes</h3> <h3>Notes</h3>
<ul> <ul>
<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>
<li></li>
</ul> </ul>
<hr> <hr>
<div class="row"> <div class="row">
<div class="col-sm-12 col-md-6 col-lg-4"> <div class="col-sm-12 col-md-6">
<pre><!-- do code --></pre> <pre>&lt;p&gt;Loading... &lt;span class=&quot;spinner-donut&quot;&gt;&lt;/span&gt;&lt;/p&gt;</pre>
<p class="do"><mark class="tertiary">Do:</mark>&nbsp;</p> <p class="do"><mark class="tertiary">Do:</mark>&nbsp;You can place a <code>.spinner-donut</code> inside a paragraph or some other textual context and it will display inline.</p>
</div> </div>
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal col-lg-4 col-lg-last"> <div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
<pre><!-- don't code --></pre> <pre>&lt;div class=&quot;spinner-donut&quot;&gt;Loading...&lt;/div&gt;</pre>
<p class="dont"><mark class="secondary">Don't:</mark>&nbsp;</p> <p class="dont"><mark class="secondary">Don't:</mark>&nbsp;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> </div>
</div> </div>
@@ -253,31 +256,27 @@
</div> </div>
<div class="section row"> <div class="section row">
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal"> <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>
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal"> <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> <h3>Sample code</h3>
<pre></pre> <pre>&lt;div class=&quot;spinner-donut secondary&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;spinner-donut tertiary&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;spinner-donut large&quot;&gt;&lt;/div&gt;</pre>
</div> </div>
</div> </div>
<div class="section"> <div class="section">
<h3>Notes</h3> <h3>Notes</h3>
<ul> <ul>
<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>
<li></li>
</ul> </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>&nbsp;</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>&nbsp;</p>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

1
src/mini/_utility.scss
View File

@@ -23,6 +23,7 @@ ul.#{$breadcrumbs-name} {
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
list-style: none; 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-left: 0; // Reset margins from list styling
margin-right: 0; // Reset margins from list styling margin-right: 0; // Reset margins from list styling
padding: 0; // Remove unnecessary left and right empty space padding: 0; // Remove unnecessary left and right empty space