Documented progress element
This commit is contained in:
Angelos Chalaris
parent
9b5e67c842
commit
5e4281d546
6 changed files with 68 additions and 4 deletions
|
|
@ -19,6 +19,7 @@ var toasts = require('./toasts');
|
|||
var tooltips = require('./tooltips');
|
||||
var modalDialogs = require('./modalDialogs');
|
||||
var spoilersAndAccordions = require('./spoilersAndAccordions');
|
||||
var progressBars = require('./progressBars');
|
||||
|
||||
module.exports = [
|
||||
gettingStarted,
|
||||
|
|
@ -26,5 +27,6 @@ module.exports = [
|
|||
grid, cards, cardSections,
|
||||
formsAndInput, buttons, inputGrouping,
|
||||
header, navigationBar, footer, drawer,
|
||||
textHighlighting, toasts, tooltips, modalDialogs, spoilersAndAccordions
|
||||
textHighlighting, toasts, tooltips, modalDialogs, spoilersAndAccordions,
|
||||
progressBars
|
||||
]
|
||||
|
|
|
|||
0
docs/doc-fragments/donutSpinners.js
Normal file
0
docs/doc-fragments/donutSpinners.js
Normal file
45
docs/doc-fragments/progressBars.js
Normal file
45
docs/doc-fragments/progressBars.js
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
module.exports = {
|
||||
id: 'progress-bars',
|
||||
title: 'Progress bars',
|
||||
keywords: [`progress`, `bar`, `primary`, `secondary`, `tertiary`, `inline`],
|
||||
description: `<p>Progress bars are minimally styled to match with the rest of the framework's aesthetics and be consistent across all modern browsers.</p>`,
|
||||
example: `<progress value="450" max="1000"></progress>`,
|
||||
samples: [`<pre><span class="code-line"><span class="highlight-a"><progress</span> <span class="highlight-b">value</span>=<span class="highlight-c">"450"</span> <span class="highlight-b">max</span>=<span class="highlight-c">"1000"</span><span class="highlight-a">></progress></span></span></pre>`],
|
||||
notes: [`Progress bars are designed to work with a <code>max="1000"</code> attribute, as this covers the most common use-cases.`],
|
||||
customization: [
|
||||
`Foreground color for progress bars can be changed by changing the value of the <code>--progress-fore-color</code> variable.`,
|
||||
`Background color for progress bars can be changed by changing the value of the <code>--progress-back-color</code> variable.`,
|
||||
`Border color for cards can be changed by changing the value of the <code>--card-border-color</code> variable.`,
|
||||
`You can customize the colors of different color variants by changing the values of the related variables in their respective definitions.`,
|
||||
`Universal margin for elements can be changed globally by changing the value of the <code>--universal-margin</code> variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.`,
|
||||
`Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.`
|
||||
],
|
||||
modifiers: [
|
||||
{
|
||||
title : 'Inline progress bars',
|
||||
description: `<p>You can create inline progress bars (<code>.inline</code>), by applying the appropriate modifier.</p>`,
|
||||
example: `<p class="doc"><progress value="450" max="1000" class="inline"></progress> 45% completed...</p>`,
|
||||
samples: [`<pre><span class="code-line"><span class="highlight-a"><progress</span> <span class="highlight-b">value</span>=<span class="highlight-c">"450"</span> <span class="highlight-b">max</span>=<span class="highlight-c">"1000"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"inline"</span><span class="highlight-a">></progress></span></span></pre>`]
|
||||
},
|
||||
{
|
||||
title : 'Color variants',
|
||||
description: `<p>You can create primary, secondary or tertiary (<code>.primary</code>, <code>.secondary</code>, <code>.tertiary</code>) progress bars, simply by adding the appropriate color modifier.</p>`,
|
||||
example: `<progress value="450" max="1000" class="primary"></progress><progress value="450" max="1000" class="secondary"></progress><progress value="450" max="1000" class="tertiary"></progress>`,
|
||||
samples: [`<pre><span class="code-line"><span class="highlight-a"><progress</span> <span class="highlight-b">value</span>=<span class="highlight-c">"450"</span> <span class="highlight-b">max</span>=<span class="highlight-c">"1000"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"primary"</span><span class="highlight-a">></progress></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><progress</span> <span class="highlight-b">value</span>=<span class="highlight-c">"450"</span> <span class="highlight-b">max</span>=<span class="highlight-c">"1000"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"secondary"</span><span class="highlight-a">></progress></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><progress</span> <span class="highlight-b">value</span>=<span class="highlight-c">"450"</span> <span class="highlight-b">max</span>=<span class="highlight-c">"1000"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"tertiary"</span><span class="highlight-a">></progress></span></span></pre>`]
|
||||
}
|
||||
],
|
||||
dos: [],
|
||||
donts: [
|
||||
{
|
||||
description: `Avoid using different values than <code>1000</code> for progress bars' <code>max</code> attribute, as well as floating point values for either <code>max</code> or <code>value</code>.`,
|
||||
sample: `<pre><span class="code-line"><span class="highlight-a"><progress</span> <span class="highlight-b">value</span>=<span class="highlight-c">"45"</span> <span class="highlight-b">max</span>=<span class="highlight-c">"100"</span><span class="highlight-a">></progress></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><progress</span> <span class="highlight-b">value</span>=<span class="highlight-c">"450.0"</span> <span class="highlight-b">max</span>=<span class="highlight-c">"1000.0"</span><span class="highlight-a">></progress></span></span></pre>`
|
||||
},
|
||||
{
|
||||
description: `Avoid applying two color modifiers on the same progress bar.`,
|
||||
sample: `<pre><span class="code-line"><span class="highlight-a"><progress</span> <span class="highlight-b">value</span>=<span class="highlight-c">"450"</span> <span class="highlight-b">max</span>=<span class="highlight-c">"1000"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"primary secondary"</span><span class="highlight-a">></progress></span></span></pre>`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -248,3 +248,7 @@
|
|||
- Added alternative color mixins for `progress` and `.spinner`.
|
||||
- Removed size variants and the inline variant mixin from `progress` and `.spinner`.
|
||||
- Updated flavor file with the `progress` module and mixed-in variants.
|
||||
|
||||
## 20171230
|
||||
|
||||
- Documented `progress` element.
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
</header>
|
||||
<div class="row" id="doc-wrapper">
|
||||
<input id="doc-drawer-checkbox" class="drawer" value="on" type="checkbox">
|
||||
<nav class="col-md-4 col-lg-3" id="nav-drawer"><h3>Menu</h3><label for="doc-drawer-checkbox" class="button drawer-close"></label><div><input style="width: 100%; margin: 0px;" placeholder="Search..." type="search" id="search-bar" oninput="search()"></div><a href="#getting-started" id="link-to-getting-started">Getting started</a><a href="#common-textual-elements" id="link-to-common-textual-elements">Common textual elements</a><a href="#heading" id="link-to-heading">Headings</a><a href="#images-captions" id="link-to-images-captions">Images & captions</a><a href="#lists" id="link-to-lists">Lists</a><a href="#code-and-quotations" id="link-to-code-and-quotations">Code & quotations</a><a href="#grid" id="link-to-grid">Grid system</a><a href="#cards" id="link-to-cards">Cards</a><a href="#card-sections" id="link-to-card-sections">Card sections</a><a href="#forms-and-input" id="link-to-forms-and-input">Forms & input</a><a href="#buttons" id="link-to-buttons">Buttons</a><a href="#input-grouping" id="link-to-input-grouping">Input grouping</a><a href="#header" id="link-to-header">Header</a><a href="#navigation-bar" id="link-to-navigation-bar">Navigation bar</a><a href="#footer" id="link-to-footer">Footer</a><a href="#drawer" id="link-to-drawer">Menu drawer</a><a href="#text-highlighting" id="link-to-text-highlighting">Text highlighting</a><a href="#toasts" id="link-to-toasts">Toasts</a><a href="#tooltips" id="link-to-tooltips">Tooltips</a><a href="#modal-dialogs" id="link-to-modal-dialogs">Modal dialogs</a><a href="#spoilers-and-accordions" id="link-to-spoilers-and-accordions">Spoilers & accordions</a><span id="no-results">No results found</span></nav>
|
||||
<nav class="col-md-4 col-lg-3" id="nav-drawer"><h3>Menu</h3><label for="doc-drawer-checkbox" class="button drawer-close"></label><div><input style="width: 100%; margin: 0px;" placeholder="Search..." type="search" id="search-bar" oninput="search()"></div><a href="#getting-started" id="link-to-getting-started">Getting started</a><a href="#common-textual-elements" id="link-to-common-textual-elements">Common textual elements</a><a href="#heading" id="link-to-heading">Headings</a><a href="#images-captions" id="link-to-images-captions">Images & captions</a><a href="#lists" id="link-to-lists">Lists</a><a href="#code-and-quotations" id="link-to-code-and-quotations">Code & quotations</a><a href="#grid" id="link-to-grid">Grid system</a><a href="#cards" id="link-to-cards">Cards</a><a href="#card-sections" id="link-to-card-sections">Card sections</a><a href="#forms-and-input" id="link-to-forms-and-input">Forms & input</a><a href="#buttons" id="link-to-buttons">Buttons</a><a href="#input-grouping" id="link-to-input-grouping">Input grouping</a><a href="#header" id="link-to-header">Header</a><a href="#navigation-bar" id="link-to-navigation-bar">Navigation bar</a><a href="#footer" id="link-to-footer">Footer</a><a href="#drawer" id="link-to-drawer">Menu drawer</a><a href="#text-highlighting" id="link-to-text-highlighting">Text highlighting</a><a href="#toasts" id="link-to-toasts">Toasts</a><a href="#tooltips" id="link-to-tooltips">Tooltips</a><a href="#modal-dialogs" id="link-to-modal-dialogs">Modal dialogs</a><a href="#spoilers-and-accordions" id="link-to-spoilers-and-accordions">Spoilers & accordions</a><a href="#progress-bars" id="link-to-progress-bars">Progress bars</a><span id="no-results">No results found</span></nav>
|
||||
<main class="col-sm-12 col-md-8 col-lg-9" id="doc-content"><div id="getting-started" class="card fluid">
|
||||
<h2 class="section double-padded">Getting started</h2>
|
||||
<div class="section"><p>You can get started using <strong>mini.css</strong> in one of many ways. It is published on <strong>npm</strong> and <strong>yarn</strong>, so you can easily download it, using your preferred package manager:</p>
|
||||
|
|
@ -721,11 +721,24 @@
|
|||
<span class="code-line"><span class="highlight-a"></div></span></span></pre></div><div class="col-sm-12 col-md-6"><p><mark class="dont">Don't:</mark> You should not place anything between the checkbox controlling the collapsible spoiler and its label or between the label and the content container.</p></div></div></div>
|
||||
<div class="section double-padded"><h3>Notes</h3><ul><li>Make sure all the radio buttons in the same accordion have the same <code>name</code>.</li><li>If you want a collapsible spoiler or an accordion section to be expanded by default, you can add the <code>checked</code> attribute to the respective collapsible spooiler's or section's control.</li><li>The <code>max-height</code> of the content container is <code>400px</code>.</li><li>Using the <code>aria-hidden="true"</code> attribute is highly recommended, as screen readers will ignore the controls of the collapsible spoiler or accordion and read all the contained content normally.</li></ul></div>
|
||||
<div class="section double-padded"><h3>Customization</h3><ul><li>Background color, text color and background color on hover for the collapsible spoiler's labels can be changed by changing the values of <code>--collapse-label-back-color</code>, <code>--collapse-label-fore-color</code> and <code>--collapse-label-hover-back-color</code> respectively.</li><li>Border color for the collapsible spoiler can be changed by changing the value of the <code>--collapse-border-color</code>.</li><li>Background color for the collapsible spoiler's content can be changed by changing the value of the <code>--collapse-content-back-color</code>.</li><li>Background color and border for the spoiler's content selected labels can be changed by changing the values of the <code>--collapse-selected-label-back-color</code> and <code>--collapse-selected-label-border-color</code> respectively.</li><li>Universal margin for elements can be changed globally by changing the value of the <code>--universal-margin</code> variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.</li><li>Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.</li><li>Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.</li></ul></div>
|
||||
</div><br/><div id="progress-bars" class="card fluid">
|
||||
<h2 class="section double-padded">Progress bars</h2>
|
||||
<div class="section"><p>Progress bars are minimally styled to match with the rest of the framework's aesthetics and be consistent across all modern browsers.</p></div>
|
||||
<div class="section"><h3>Example</h3><progress value="450" max="1000"></progress></div>
|
||||
<div class="section double-padded prefiller-example"><h3>Sample code</h3><pre><span class="code-line"><span class="highlight-a"><progress</span> <span class="highlight-b">value</span>=<span class="highlight-c">"450"</span> <span class="highlight-b">max</span>=<span class="highlight-c">"1000"</span><span class="highlight-a">></progress></span></span></pre></div>
|
||||
<div class="section double-padded prefiller-example"><h3>Modifiers</h3>
|
||||
<h4>Inline progress bars</h4><p>You can create inline progress bars (<code>.inline</code>), by applying the appropriate modifier.</p><h5>Example</h5><p class="doc"><progress value="450" max="1000" class="inline"></progress> 45% completed...</p><h5>Sample code</h5><pre><span class="code-line"><span class="highlight-a"><progress</span> <span class="highlight-b">value</span>=<span class="highlight-c">"450"</span> <span class="highlight-b">max</span>=<span class="highlight-c">"1000"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"inline"</span><span class="highlight-a">></progress></span></span></pre><br/><h4>Color variants</h4><p>You can create primary, secondary or tertiary (<code>.primary</code>, <code>.secondary</code>, <code>.tertiary</code>) progress bars, simply by adding the appropriate color modifier.</p><h5>Example</h5><progress value="450" max="1000" class="primary"></progress><progress value="450" max="1000" class="secondary"></progress><progress value="450" max="1000" class="tertiary"></progress><h5>Sample code</h5><pre><span class="code-line"><span class="highlight-a"><progress</span> <span class="highlight-b">value</span>=<span class="highlight-c">"450"</span> <span class="highlight-b">max</span>=<span class="highlight-c">"1000"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"primary"</span><span class="highlight-a">></progress></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><progress</span> <span class="highlight-b">value</span>=<span class="highlight-c">"450"</span> <span class="highlight-b">max</span>=<span class="highlight-c">"1000"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"secondary"</span><span class="highlight-a">></progress></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><progress</span> <span class="highlight-b">value</span>=<span class="highlight-c">"450"</span> <span class="highlight-b">max</span>=<span class="highlight-c">"1000"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"tertiary"</span><span class="highlight-a">></progress></span></span></pre></div>
|
||||
<div class="section double-padded"><h3>Best practices</h3><div class="row dodos"><div class="col-sm-12 col-md-6"><pre><span class="code-line"><span class="highlight-a"><progress</span> <span class="highlight-b">value</span>=<span class="highlight-c">"45"</span> <span class="highlight-b">max</span>=<span class="highlight-c">"100"</span><span class="highlight-a">></progress></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><progress</span> <span class="highlight-b">value</span>=<span class="highlight-c">"450.0"</span> <span class="highlight-b">max</span>=<span class="highlight-c">"1000.0"</span><span class="highlight-a">></progress></span></span></pre></div><div class="col-sm-12 col-md-6"><p><mark class="dont">Don't:</mark> Avoid using different values than <code>1000</code> for progress bars' <code>max</code> attribute, as well as floating point values for either <code>max</code> or <code>value</code>.</p></div></div><br/><div class="row dodos"><div class="col-sm-12 col-md-6"><pre><span class="code-line"><span class="highlight-a"><progress</span> <span class="highlight-b">value</span>=<span class="highlight-c">"450"</span> <span class="highlight-b">max</span>=<span class="highlight-c">"1000"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"primary secondary"</span><span class="highlight-a">></progress></span></span></pre></div><div class="col-sm-12 col-md-6"><p><mark class="dont">Don't:</mark> Avoid applying two color modifiers on the same progress bar.</p></div></div></div>
|
||||
<div class="section double-padded"><h3>Notes</h3><ul><li>Progress bars are designed to work with a <code>max="1000"</code> attribute, as this covers the most common use-cases.</li></ul></div>
|
||||
<div class="section double-padded"><h3>Customization</h3><ul><li>Foreground color for progress bars can be changed by changing the value of the <code>--progress-fore-color</code> variable.</li><li>Background color for progress bars can be changed by changing the value of the <code>--progress-back-color</code> variable.</li><li>Border color for cards can be changed by changing the value of the <code>--card-border-color</code> variable.</li><li>You can customize the colors of different color variants by changing the values of the related variables in their respective definitions.</li><li>Universal margin for elements can be changed globally by changing the value of the <code>--universal-margin</code> variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.</li><li>Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.</li></ul></div>
|
||||
</div><footer><p><strong>mini.css</strong> was designed and built by <a href="https://github.com/Chalarangelo" target="_blank">@Chalarangelo</a>. Source code licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>.</p><p>Icons provided by <a href="https://feathericons.com/" target="_blank">Feather</a>. Search powered by <a href="http://fusejs.io/" target="_blank">Fuse.js</a>.</p></footer></main>
|
||||
</div></div>
|
||||
<script>
|
||||
// Search script
|
||||
var docs= [{id: "getting-started", keys: ["html","viewport","head","meta","getting started","introduction","browser support","installation","usage","setup","cdn","npm","yarn"] },{id: "common-textual-elements", keys: ["p","paragraph","text","textual elements","strong","bold","b","em","i","emphasis","italics","small","a","link","hr","horizontal rule","sub","subscript","sup","exponent","superscript","normalize","reset"] },{id: "heading", keys: ["heading","h1","h2","h3","h4","h5","h6","small","title","subtitle","subheading"] },{id: "images-captions", keys: ["img","image","responsive","responsiveness","caption","figure","figcaption"] },{id: "lists", keys: ["list","ul","ol","li"] },{id: "code-and-quotations", keys: ["code","pre","kbd","blockquote","quotation"] },{id: "grid", keys: ["grid","grid system","col","column","layout","row","container","small","medium","large","sm","md","lg","cols","predefined","offset","order","reorder","first","last","normal"] },{id: "cards", keys: ["card","row","section","container","col","column","small","large","fluid","warning","error"] },{id: "card-sections", keys: ["card","row","section","container","col","column","media","double-padded","dark"] },{id: "forms-and-input", keys: ["form","fieldset","legend","input","type","text","checkbox","radio","email","password","tel","input-group","input group","row","col","column","vertical","fluid","file","upload","select","textarea","option","label"] },{id: "buttons", keys: ["button","input","reset","submit","link","a","label","primary","secondary","tertiary","aria","small","large","inverse"] },{id: "input-grouping", keys: ["input group","input-group","vertical","fluid","input","button","button group","button-group"] },{id: "header", keys: ["navigation","header","sticky","button","logo","link"] },{id: "navigation-bar", keys: ["navigation","bar","nav","link"] },{id: "footer", keys: ["navigation","footer","sticky","link"] },{id: "drawer", keys: ["drawer","checkbox","toggle","close","drawer-toggle","drawer-close","menu","navigation","hamburger"] },{id: "text-highlighting", keys: ["mark","highlight","text highlighting","tag","primary","secondary","tertiary","inline-block"] },{id: "toasts", keys: ["span","toast","mobile","contextual","message"] },{id: "tooltips", keys: ["tooltip","aria-label","contextual","bottom","span"] },{id: "modal-dialogs", keys: ["modal","dialog","contextual","alert","notification"] },{id: "spoilers-and-accordions", keys: ["spoiler","collapse","accordion","contextual","vertical tabs"] }];
|
||||
var docs= [{id: "getting-started", keys: ["html","viewport","head","meta","getting started","introduction","browser support","installation","usage","setup","cdn","npm","yarn"] },{id: "common-textual-elements", keys: ["p","paragraph","text","textual elements","strong","bold","b","em","i","emphasis","italics","small","a","link","hr","horizontal rule","sub","subscript","sup","exponent","superscript","normalize","reset"] },{id: "heading", keys: ["heading","h1","h2","h3","h4","h5","h6","small","title","subtitle","subheading"] },{id: "images-captions", keys: ["img","image","responsive","responsiveness","caption","figure","figcaption"] },{id: "lists", keys: ["list","ul","ol","li"] },{id: "code-and-quotations", keys: ["code","pre","kbd","blockquote","quotation"] },{id: "grid", keys: ["grid","grid system","col","column","layout","row","container","small","medium","large","sm","md","lg","cols","predefined","offset","order","reorder","first","last","normal"] },{id: "cards", keys: ["card","row","section","container","col","column","small","large","fluid","warning","error"] },{id: "card-sections", keys: ["card","row","section","container","col","column","media","double-padded","dark"] },{id: "forms-and-input", keys: ["form","fieldset","legend","input","type","text","checkbox","radio","email","password","tel","input-group","input group","row","col","column","vertical","fluid","file","upload","select","textarea","option","label"] },{id: "buttons", keys: ["button","input","reset","submit","link","a","label","primary","secondary","tertiary","aria","small","large","inverse"] },{id: "input-grouping", keys: ["input group","input-group","vertical","fluid","input","button","button group","button-group"] },{id: "header", keys: ["navigation","header","sticky","button","logo","link"] },{id: "navigation-bar", keys: ["navigation","bar","nav","link"] },{id: "footer", keys: ["navigation","footer","sticky","link"] },{id: "drawer", keys: ["drawer","checkbox","toggle","close","drawer-toggle","drawer-close","menu","navigation","hamburger"] },{id: "text-highlighting", keys: ["mark","highlight","text highlighting","tag","primary","secondary","tertiary","inline-block"] },{id: "toasts", keys: ["span","toast","mobile","contextual","message"] },{id: "tooltips", keys: ["tooltip","aria-label","contextual","bottom","span"] },{id: "modal-dialogs", keys: ["modal","dialog","contextual","alert","notification"] },{id: "spoilers-and-accordions", keys: ["spoiler","collapse","accordion","contextual","vertical tabs"] },{id: "progress-bars", keys: ["progress","bar","primary","secondary","tertiary","inline"] }];
|
||||
var options = {threshold:0.4, keys:["keys"]};
|
||||
var fuse = new Fuse(docs,options);
|
||||
function search(){
|
||||
|
|
|
|||
2
docs/v3/style.min.css
vendored
2
docs/v3/style.min.css
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue