beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Progress module base documentation page

Browse source
This commit is contained in:
Angelos Chalaris 2016-11-25 13:36:24 +02:00
parent 6a29439d80
commit 2a0d9c3fff
5 changed files with 25 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
dist/mini-default.css vendored
View file

@ -1176,11 +1176,11 @@ progress {
progress[value="1000"]::-moz-progress-bar { progress[value="1000"]::-moz-progress-bar {
border-radius: 1px; } border-radius: 1px; }
@supports (width: calc(100% - 2*10px)) or (width: -webkit-calc(100% - 2*10px)) { @supports (width: calc(100% - 2*8px)) or (width: -webkit-calc(100% - 2*8px)) {
progress { progress {
width: -webkit-calc(100% - 2*10px); width: -webkit-calc(100% - 2*8px);
width: calc(100% - 2*10px); width: calc(100% - 2*8px);
margin: 2px 10px; } } margin: 2px 8px; } }
@-webkit-keyframes spinner-donut-anim { @-webkit-keyframes spinner-donut-anim {
0% { 0% {
-webkit-transform: rotate(0deg); } -webkit-transform: rotate(0deg); }

2
dist/mini-default.min.css vendored
View file

File diff suppressed because one or more lines are too long

1
docs/v2/DEVLOG.md
View file

@ -543,3 +543,4 @@
- Updated demo pages with latest build. - Updated demo pages with latest build.
- Tweaks in the `core` module to use a `px`-based root in the `html` element. - Tweaks in the `core` module to use a `px`-based root in the `html` element.
- Tweaks in the `core` module to use the "native font stack" - See here: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/ - Tweaks in the `core` module to use the "native font stack" - See here: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
- Documented basic `progress` module's `progress` element structure.

29
docs/v2/progress.html
View file

@ -123,29 +123,36 @@
</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 --> <p>Process is 0% complete!</p>
<progress value="0" max="1000"></progress>
<p>Process is 45% complete!</p>
<progress value="450" max="1000"></progress>
<p>Process is 100% complete!</p>
<progress value="1000" max="1000"></progress>
</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>To create a progress bar, use the <code>&lt;progress&gt;</code> HTML element, specify the preset maximum of <code>max="1000"</code> and set a <code>value</code> between <code>0</code> and <code>1000</code>. Update your <code>&lt;progress&gt;</code> element using some Javascript code, by changing its <code>value</code> to any integer in the same range.</p>
<h3>Sample code</h3> <h3>Sample code</h3>
<pre></pre> <pre>&lt;progress value=&quot;0&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;
&lt;progress value=&quot;450&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;
&lt;progress value=&quot;1000&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;</pre>
</div> </div>
</div> </div>
<div class="section"> <div class="section">
<h3>Notes</h3> <h3>Notes</h3>
<ul> <ul>
<li></li> <li>We made sure that the <code>&lt;progress&gt;</code> element displays properly on all modern browsers, using browser-specific rules. However, there might be some irregularities with older browsers, especially legacy versions of Internet Explorer.</li>
<li></li> <li>If the preset <code>max="1000"</code> does not suit your needs, you should check the <a href="customization.html">customization page</a> for instructions on how to set your own maximum value for the <code>&lt;progress&gt;</code> element.</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;progress value=&quot;80&quot; max=&quot;100&quot;&gt;&lt;/progress&gt;</pre>
<p class="do"><mark class="tertiary">Do:</mark>&nbsp;</p> <p class="dont"><mark class="secondary">Don't:</mark>&nbsp;Avoid using different values for the <code>&lt;progress&gt;</code> element's <code>max</code>, except for the preset one (<code>1000</code>).</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;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;</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> </div>
</div> </div>

2
src/flavors/mini-default.scss
View file

@ -396,7 +396,7 @@ $progress-max-value: 1000; // Arithmetic max value of <progress>
$progress-border-style: 0; // Border style for <progress> $progress-border-style: 0; // Border style for <progress>
$progress-border-radius: 1px; // Border radius for the <progress> container $progress-border-radius: 1px; // Border radius for the <progress> container
$progress-top-bottom-margin: 2px; // Top and bottom margin for <progress> $progress-top-bottom-margin: 2px; // Top and bottom margin for <progress>
$progress-left-right-margin: 10px; // Left and right margin for <progress> $progress-left-right-margin: 8px; // Left and right margin for <progress>
$progress-box-shadow: // Box shadow for <progress> $progress-box-shadow: // Box shadow for <progress>
0 0.5px 1px rgba(0,0,0, 0.1), 0 0.5px 0.5px rgba(0, 0, 0, 0.15); 0 0.5px 1px rgba(0,0,0, 0.1), 0 0.5px 0.5px rgba(0, 0, 0, 0.15);
$progress-inline-name: 'inline'; // Class name for inline <progress> $progress-inline-name: 'inline'; // Class name for inline <progress>