mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-06 22:06:30 +02:00
Code Issues Releases Wiki Activity

Core module list styles, utility module tweaks, progress module variant style and color documentation

Browse Source
This commit is contained in:
Angelos Chalaris
2016-11-26 00:46:38 +02:00
parent 4f30eba776
commit b6bb5d3bfc
8 changed files with 95 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
docs/v2/progress.html
View File

@@ -97,7 +97,7 @@
<h1>Progress</h1>
<p>The <strong>progress</strong> module gives you full control over the presentation of progress and loading on your pages. Apart from progress bars and color variants for them, spinner elements are provided to help communicate that something is loading.</p>
<p><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p>
<ul class="breadcrumbs"><li><a href="index.html">Home</a></li><li><a href="modules.html">Modules</a></li><li>Grid</li></ul>
<ul class="breadcrumbs"><li><a href="index.html">Home</a></li><li><a href="modules.html">Modules</a></li><li>Progress</li></ul>
</div>
</div>
<div class="row">
@@ -152,7 +152,7 @@
</div>
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
<pre>&lt;progress value=&quot;450.5&quot; max=&quot;1000.0&quot;&gt;&lt;/progress&gt;</pre>
<p class="dont"><mark class="secondary">Don't:</mark>&nbsp;Try not to use floating point values for either the <code>&lt;progress&gt;</code> element's <code>value</code> or <code>max</code>. During testing of the module, we found that floating point values could cause unexpected behavior. </p>
<p class="dont"><mark class="secondary">Don't:</mark>&nbsp;Try not to use floating point values for either the <code>&lt;progress&gt;</code> element's <code>value</code> or <code>max</code>. During testing of the module, we found that floating point values could cause unexpected behavior.</p>
</div>
</div>
</div>
@@ -167,29 +167,41 @@
</div>
<div class="section row">
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
<!-- sample -->
<p>Secondary process is 60% complete!</p>
<progress class="secondary" value="600" max="1000"></progress>
<p>Tertiary process is 30% complete!</p>
<progress class="tertiary" value="300" max="1000"></progress>
<p>Nano progress bar is 75% filled!</p>
<progress class="nano" value="750" max="1000"></progress>
<p>Inline progress bar:<progress class="inline" value="150" max="1000"></progress></p>
</div>
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
<p></p>
<p>Apart from the default style for the <code>&lt;progress&gt;</code> element, we have also included a couple of variants for it. First off, you can change the color of your progress bars, based on the context, using the <code>.secondary</code> or <code>.tertiary</code> class. You can also make a <code>&lt;progress&gt;</code> element tiny, using the <code>.nano</code> class. Finally, you can create inline progress bars, using the <code>.inline</code> class.</p>
<h3>Sample code</h3>
<pre></pre>
<pre>&lt;progress class=&quot;secondary&quot; value=&quot;600&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;
&lt;progress class=&quot;tertiary&quot; value=&quot;300&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;
&lt;progress class=&quot;nano&quot; value=&quot;750&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;
&lt;progress class=&quot;inline&quot; value=&quot;150&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;</pre>
</div>
</div>
<div class="section">
<h3>Notes</h3>
<ul>
<li></li>
<li></li>
<li>If you want to add your own custom size classes for <code>&lt;progress&gt;</code> elements, check the <a href="customization.html">customization page</a> for instructions.</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>&nbsp;</p>
<div class="col-sm-12 col-md-6">
<pre>&lt;progress class=&quot;nano secondary&quot; value=&quot;800&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;
<span class="fore-tertiary">&lt;!-- or --&gt;</span>
&lt;progress class=&quot;inline tertiary&quot; value=&quot;650&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;</pre>
<p class="do"><mark class="tertiary">Do:</mark>&nbsp;You can mix size and color classes for <codde>&lt;progress&gt;</codde> elements as needed.</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 class="col-sm-12 col-md-6 col-sm-last col-md-normal">
<pre>&lt;progress class=&quot;secondary teriary&quot; value=&quot;450&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;
<span class="fore-secondary">&lt;!-- or --&gt;</span>
&lt;progress class=&quot;inline nano&quot; value=&quot;300&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;</pre>
<p class="dont"><mark class="secondary">Don't:</mark>&nbsp;Avoid mixing two classes of the same type (i.e. two color classes or two size classes).</p>
</div>
</div>
</div>