Progress module base documentation page
This commit is contained in:
parent
6a29439d80
commit
2a0d9c3fff
8
dist/mini-default.css
vendored
8
dist/mini-default.css
vendored
|
@ -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
2
dist/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
|
@ -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.
|
||||||
|
|
|
@ -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><progress></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><progress></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><progress value="0" max="1000"></progress>
|
||||||
|
<progress value="450" max="1000"></progress>
|
||||||
|
<progress value="1000" max="1000"></progress></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><progress></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><progress></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><progress value="80" max="100"></progress></pre>
|
||||||
<p class="do"><mark class="tertiary">Do:</mark> </p>
|
<p class="dont"><mark class="secondary">Don't:</mark> Avoid using different values for the <code><progress></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><progress value="450.5" max="1000.0"></progress></pre>
|
||||||
<p class="dont"><mark class="secondary">Don't:</mark> </p>
|
<p class="dont"><mark class="secondary">Don't:</mark> Try not to use floating point values for either the <code><progress></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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue